From d737f3db7b5daa01c31a52534883673bb7be32ba Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 20 Jan 2025 16:57:21 +0800
Subject: [PATCH 001/126] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96recy?=
 =?UTF-8?q?cle=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/web/mpx-recycle-item.vue       |  13 +
 .../components/web/mpx-recycle-list.vue       | 262 ++++++++++++++++++
 2 files changed, 275 insertions(+)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-item.vue
 create mode 100644 packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-list.vue

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-item.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-item.vue
new file mode 100644
index 0000000000..29ac7c86fc
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-item.vue
@@ -0,0 +1,13 @@
+<template>
+  <slot></slot>
+</template>
+
+
+<script>
+export default {
+
+};
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-list.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-list.vue
new file mode 100644
index 0000000000..3a9cc0aadd
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-list.vue
@@ -0,0 +1,262 @@
+<template>
+  <div ref="wrapper" :style="{ height }" class="mpx-recycle-list">
+    <div class="content-wrapper">
+      <div ref="placeholder" class="infinite-list-placeholder"></div>
+
+      <div ref="content" class="infinite-list">
+        <div class="infinite-list-item" ref="items" :id="item._index" :key="item._index"
+          :style="{ height: itemSize.height + 'px', overflow: 'hidden' }" v-for="item in visibleData">
+          <slot ref="slot" :item="item.item"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import BScroll from "@better-scroll/core";
+  export default {
+    name: "mpx-recycle-list",
+    props: {
+      listData: {
+        type: Array,
+        default: () => [],
+      },
+      //预估尺寸
+      itemSize: {
+        type: Object,
+        required: true,
+      },
+      //缓冲区比例
+      bufferScale: {
+        type: Number,
+        default: 2,
+      },
+      height: {
+        type: String,
+        default: "100%",
+      },
+      scrollX: Boolean,
+      scrollY: Boolean,
+      upperThreshold: {
+        type: [Number, String],
+        default: 50,
+      },
+      lowerThreshold: {
+        type: [Number, String],
+        default: 50,
+      },
+      scrollTop: {
+        type: [Number, String],
+        default: 0,
+      },
+      scrollLeft: {
+        type: [Number, String],
+        default: 0,
+      },
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      scrollIntoView: String,
+      scrollWithAnimation: Boolean,
+      enableFlex: Boolean,
+      enhanced: Boolean,
+      refresherEnabled: Boolean,
+      refresherTriggered: Boolean,
+      refresherThreshold: {
+        type: Number,
+        default: 45,
+      },
+      refresherDefaultStyle: {
+        type: String,
+        default: "black",
+      },
+      refresherBackground: {
+        type: String,
+        default: "",
+      },
+    },
+    computed: {
+      _listData() {
+        return this.listData.map((item, index) => {
+          return {
+            _index: `_${index}`,
+            item,
+          };
+        });
+      },
+      visibleCount() {
+        return Math.ceil(this.screenHeight / this.itemSize.height);
+      },
+      aboveCount() {
+        return Math.min(this.start, this.bufferScale * this.visibleCount);
+      },
+      belowCount() {
+        return Math.min(
+          this.listData.length - this.end,
+          this.bufferScale * this.visibleCount
+        );
+      },
+      visibleData() {
+        let start = this.start - this.aboveCount;
+        let end = this.end + this.belowCount;
+        return this._listData.slice(start, end);
+      },
+    },
+    watch: {
+      listData: {
+        handler() {
+          this.initPositions();
+        },
+        immediate: true
+      }
+    },
+    created() {
+      this.initPositions();
+    },
+    updated() {
+      this.$nextTick(function () {
+        if (!this.$refs.items || !this.$refs.items.length) {
+          return;
+        }
+        //更新列表总高度
+        let height = this.positions[this.positions.length - 1].bottom;
+        this.$refs.placeholder.style.height = height + "px";
+        this.bs.refresh()
+        //更新真实偏移量
+        this.setStartOffset();
+      });
+    },
+    data() {
+      return {
+        screenHeight: 0,
+        start: 0,
+        end: 0,
+        currentX: 0,
+        currentY: 0,
+        lastX: 0,
+        lastY: 0
+      };
+    },
+    mounted() {
+      this.initBs();
+      this.screenHeight = this.$el.clientHeight;
+      this.start = 0;
+      this.end = this.start + this.visibleCount;
+    },
+    methods: {
+      initBs() {
+        this.destroyBs();
+        const originBsOptions = {
+          startX: -this.currentX,
+          startY: -this.currentY,
+          scrollX: this.scrollX,
+          scrollY: this.scrollY,
+          probeType: 3,
+          bounce: false,
+          stopPropagation: true,
+          bindToWrapper: true,
+          useTransition: false, // 使用 transform 代替 transition
+          HWCompositing: true,
+          eventPassthrough:
+            (this.scrollX && "vertical") || (this.scrollY && "horizontal") || "",
+        };
+        const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions);
+        this.bs = new BScroll(this.$refs.wrapper, bsOptions);
+        this.lastX = -this.currentX;
+        this.lastY = -this.currentY;
+        this.bs.on("scroll", () => {
+          this.scrollEvent()
+        });
+        this.bs.on("scrollEnd", () => {
+          this.currentX = -this.bs.x;
+          this.currentY = -this.bs.y;
+        });
+      },
+      destroyBs() {
+        if (!this.bs) return;
+        this.bs.destroy();
+        delete this.bs;
+      },
+      initPositions() {
+        const { height } = this.itemSize
+        this.positions = this.listData.map((d, index) => ({
+          index,
+          height: height,
+          top: index * height,
+          bottom: (index + 1) * height,
+        }));
+      },
+      getStartIndex(scrollTop = 0) {
+        return this.binarySearch(this.positions, scrollTop);
+      },
+      binarySearch(list, value) {
+        let start = 0;
+        let end = list.length - 1;
+        let tempIndex = null;
+
+        while (start <= end) {
+          let midIndex = parseInt((start + end) / 2);
+          let midValue = list[midIndex].bottom;
+          if (midValue === value) {
+            return midIndex + 1;
+          } else if (midValue < value) {
+            start = midIndex + 1;
+          } else if (midValue > value) {
+            if (tempIndex === null || tempIndex > midIndex) {
+              tempIndex = midIndex;
+            }
+            end = end - 1;
+          }
+        }
+        return tempIndex;
+      },
+      setStartOffset() {
+        let startOffset;
+        if (this.start >= 1) {
+          let size =
+            this.positions[this.start].top -
+            (this.positions[this.start - this.aboveCount]
+              ? this.positions[this.start - this.aboveCount].top
+              : 0);
+          startOffset = this.positions[this.start - 1].bottom - size;
+        } else {
+          startOffset = 0;
+        }
+        this.$refs.content.style.transform = `translate3d(0,${startOffset}px,0)`;
+      },
+      scrollEvent() {
+        let scrollTop = -this.bs.y;
+        this.start = this.getStartIndex(scrollTop);
+        this.end = this.start + this.visibleCount;
+        this.setStartOffset();
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  .mpx-recycle-list {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .content-wrapper {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .infinite-list {
+    left: 0;
+    right: 0;
+    top: 0;
+    position: absolute;
+    will-change: transform;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+  }
+</style>

From 7de08fbf0672f63fb6de0a49ac2463a0ee32eb68 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 21 Jan 2025 17:03:15 +0800
Subject: [PATCH 002/126] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96recy?=
 =?UTF-8?q?cle=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/wx/mpx-recycle-view.mpx        | 198 ++++++++++++++++++
 1 file changed, 198 insertions(+)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
new file mode 100644
index 0000000000..9c9185c5a6
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -0,0 +1,198 @@
+<template>
+  <scroll-view
+    class="mpx-recycle-list"
+    scroll-y="{{scrollY}}"
+    bindscroll="onScroll"
+    wx:style="height: {{height}}px"
+  >
+    <view class="content-wrapper">
+      <view class="infinite-list-placeholder" ref="placeholder" wx:style="{{placeholderStyle}}"></view>
+      <view class="infinite-list" ref="content" wx:style="{{contentStyle}}">
+        <view
+          wx:for="{{visibleData}}"
+          wx:key="id"
+          class="infinite-list-item"
+          wx:style="height: {{itemSize.height}}px; overflow: hidden"
+        >
+          <recycle-item current-item="{{item.item}}"/>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  properties: {
+    scrollX: Boolean,
+    scrollY: Boolean,
+    height: {
+      type: String,
+      value: '100%'
+    },
+    // 预估尺寸
+    itemSize: Object,
+    bufferScale: {
+      type: Number,
+      value: 2
+    },
+    listData: Array
+  },
+  data: {
+    screenHeight: 0,
+    start: 0,
+    end: 0,
+    contentStyle: '',
+    placeholderStyle: '',
+    positions: []
+  },
+  computed: {
+    _listData() {
+      return this.listData.map((item, index) => {
+        return {
+          _index: `_${index}`,
+          item
+        }
+      })
+    },
+    visibleCount() {
+      return Math.ceil(this.screenHeight / this.itemSize.height)
+    },
+    aboveCount() {
+      return Math.min(this.start, this.bufferScale * this.visibleCount)
+    },
+    belowCount() {
+      return Math.min(
+        this.listData.length - this.end,
+        this.bufferScale * this.visibleCount
+      )
+    },
+    visibleData() {
+      const start = this.start - this.aboveCount
+      const end = this.end + this.belowCount
+      return this._listData.slice(start, end)
+    }
+  },
+  watch: {
+    listData: {
+      handler() {
+        this.initPositions()
+        this.$nextTick(() => {
+          if (!this.positions || !this.positions.length) {
+            return
+          }
+          // 更新列表总高度
+          const height = this.positions[this.positions.length - 1].bottom
+          this.placeholderStyle = `height: ${height}px`
+          // 更新真实偏移量
+          this.setStartOffset()
+        })
+      },
+      immediate: true
+    }
+  },
+  attached() {
+    this.initPositions()
+    const query = wx.createSelectorQuery().in(this)
+    setTimeout(() => {
+      query.select('.mpx-recycle-list').boundingClientRect(rect => {
+        this.screenHeight = rect.height
+        this.start = 0
+        this.end = this.start + this.visibleCount
+      }).exec()
+    }, 300)
+  },
+  methods: {
+    initPositions() {
+      const { height } = this.itemSize
+      this.positions = this.listData.map((d, index) => ({
+        index,
+        height,
+        top: index * height,
+        bottom: (index + 1) * height
+      }))
+    },
+    getStartIndex(scrollTop = 0) {
+      return this.binarySearch(this.positions, scrollTop)
+    },
+    binarySearch(list, value) {
+      let start = 0
+      let end = list.length - 1
+      let tempIndex = null
+
+      while (start <= end) {
+        const midIndex = parseInt((start + end) / 2)
+        const midValue = list[midIndex].bottom
+        if (midValue === value) {
+          return midIndex + 1
+        } else if (midValue < value) {
+          start = midIndex + 1
+        } else if (midValue > value) {
+          if (tempIndex === null || tempIndex > midIndex) {
+            tempIndex = midIndex
+          }
+          end = end - 1
+        }
+      }
+      return tempIndex
+    },
+    setStartOffset() {
+      let startOffset
+      if (this.start >= 1) {
+        const size =
+          this.positions[this.start].top -
+          (this.positions[this.start - this.aboveCount]
+            ? this.positions[this.start - this.aboveCount].top
+            : 0)
+        startOffset = this.positions[this.start - 1].bottom - size
+      } else {
+        startOffset = 0
+      }
+      this.contentStyle = `transform: translateY(${startOffset}px);`
+    },
+    onScroll(e) {
+      const { scrollTop } = e.detail
+      this.start = this.getStartIndex(scrollTop)
+      this.end = this.start + this.visibleCount
+      this.setStartOffset()
+    }
+  }
+})
+</script>
+<script type="application/json">
+{
+  "component": true,
+  // wx配置
+  // "componentGenerics": {
+  //   "recycle-item": true
+  // }
+  "componentGenerics": {
+    "recycle-item": {
+      "default": "../components/test-item"
+    }
+  }
+}
+</script>
+<style scoped>
+.mpx-recycle-list {
+  position: relative;
+  overflow: hidden;
+}
+
+.content-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.infinite-list {
+  left: 0;
+  right: 0;
+  pointer-events: none; /* 支付宝环境需要设置允许事件穿透 */
+  top: 0;
+  position: absolute;
+  will-change: transform;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+</style>

From 78c6340a9a8f6754d9de470e5498148327ac336e Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 22 Jan 2025 19:57:47 +0800
Subject: [PATCH 003/126] =?UTF-8?q?chore:=20=E5=A2=9E=E5=BC=BArecycle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/wx/mpx-recycle-view.mpx        | 150 ++++++++++++------
 1 file changed, 98 insertions(+), 52 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index 9c9185c5a6..f945adc7cb 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -2,11 +2,22 @@
   <scroll-view
     class="mpx-recycle-list"
     scroll-y="{{scrollY}}"
+    scroll-top="{{scrollTop}}"
+    scroll-with-animation="{{scrollWithAnimation}}"
+    enable-back-to-top="{{enableBackToTop}}"
+    lower-threshold="{{lowerThreshold}}"
+    upper-threshold="{{upperThreshold}}"
+    wx:style="width: {{_width}}; height: {{_height}}"
     bindscroll="onScroll"
-    wx:style="height: {{height}}px"
+    bindscrolltoupper="onScrollToUpper"
+    bindscrolltolower="onScrollToLower"
   >
     <view class="content-wrapper">
-      <view class="infinite-list-placeholder" ref="placeholder" wx:style="{{placeholderStyle}}"></view>
+      <view
+        class="infinite-list-placeholder"
+        ref="placeholder"
+        wx:style="{{placeholderStyle}}"
+      ></view>
       <view class="infinite-list" ref="content" wx:style="{{contentStyle}}">
         <view
           wx:for="{{visibleData}}"
@@ -14,7 +25,7 @@
           class="infinite-list-item"
           wx:style="height: {{itemSize.height}}px; overflow: hidden"
         >
-          <recycle-item current-item="{{item.item}}"/>
+          <recycle-item current-item="{{item.item}}" />
         </view>
       </view>
     </view>
@@ -25,11 +36,14 @@ import { createComponent } from '@mpxjs/core'
 
 createComponent({
   properties: {
-    scrollX: Boolean,
     scrollY: Boolean,
     height: {
-      type: String,
-      value: '100%'
+      type: Number,
+      value: 0
+    },
+    width: {
+      type: Number,
+      value: 0
     },
     // 预估尺寸
     itemSize: Object,
@@ -37,10 +51,24 @@ createComponent({
       type: Number,
       value: 2
     },
-    listData: Array
+    listData: Array,
+    scrollTop: {
+      type: Number,
+      value: 0
+    },
+    scrollWithAnimation: Boolean,
+    enableBackToTop: Boolean,
+    lowerThreshold: {
+      type: Number,
+      value: 50
+    },
+    upperThreshold: {
+      type: Number,
+      value: 50
+    }
   },
   data: {
-    screenHeight: 0,
+    containerHeight: 0,
     start: 0,
     end: 0,
     contentStyle: '',
@@ -48,6 +76,12 @@ createComponent({
     positions: []
   },
   computed: {
+    _width() {
+      return this.width ? `${this.width}px` : '100%'
+    },
+    _height() {
+      return this.height ? `${this.height}px` : '100%'
+    },
     _listData() {
       return this.listData.map((item, index) => {
         return {
@@ -57,16 +91,13 @@ createComponent({
       })
     },
     visibleCount() {
-      return Math.ceil(this.screenHeight / this.itemSize.height)
+      return Math.ceil(this.containerHeight / this.itemSize.height)
     },
     aboveCount() {
       return Math.min(this.start, this.bufferScale * this.visibleCount)
     },
     belowCount() {
-      return Math.min(
-        this.listData.length - this.end,
-        this.bufferScale * this.visibleCount
-      )
+      return Math.min(this.listData.length - this.end, this.bufferScale * this.visibleCount)
     },
     visibleData() {
       const start = this.start - this.aboveCount
@@ -90,18 +121,27 @@ createComponent({
         })
       },
       immediate: true
+    },
+    scrollTop: {
+      handler(val) {
+        this.start = this.getStartIndex(val)
+        this.end = this.start + this.visibleCount
+        this.setStartOffset()
+      }
     }
   },
-  attached() {
+  ready() {
     this.initPositions()
     const query = wx.createSelectorQuery().in(this)
-    setTimeout(() => {
-      query.select('.mpx-recycle-list').boundingClientRect(rect => {
-        this.screenHeight = rect.height
-        this.start = 0
+    query
+      .select('.mpx-recycle-list')
+      .boundingClientRect((rect) => {
+        this.containerHeight = rect.height
+        this.start = this.getStartIndex(this.scrollTop)
         this.end = this.start + this.visibleCount
-      }).exec()
-    }, 300)
+        this.setStartOffset()
+      })
+      .exec()
   },
   methods: {
     initPositions() {
@@ -141,10 +181,10 @@ createComponent({
       let startOffset
       if (this.start >= 1) {
         const size =
-          this.positions[this.start].top -
-          (this.positions[this.start - this.aboveCount]
-            ? this.positions[this.start - this.aboveCount].top
-            : 0)
+            this.positions[this.start].top -
+            (this.positions[this.start - this.aboveCount]
+              ? this.positions[this.start - this.aboveCount].top
+              : 0)
         startOffset = this.positions[this.start - 1].bottom - size
       } else {
         startOffset = 0
@@ -156,43 +196,49 @@ createComponent({
       this.start = this.getStartIndex(scrollTop)
       this.end = this.start + this.visibleCount
       this.setStartOffset()
+      this.triggerEvent('scroll', e)
+    },
+    onScrollToUpper(e) {
+      this.triggerEvent('scrolltoupper', e)
+    },
+    onScrollToLower(e) {
+      this.triggerEvent('scrolltolower', e)
     }
   }
 })
 </script>
 <script type="application/json">
-{
-  "component": true,
-  // wx配置
-  // "componentGenerics": {
-  //   "recycle-item": true
-  // }
-  "componentGenerics": {
-    "recycle-item": {
-      "default": "../components/test-item"
+  {
+    "component": true,
+    "componentGenerics": {
+      "recycle-item": {
+        "default": "../components/test"
+      }
     }
   }
-}
 </script>
 <style scoped>
-.mpx-recycle-list {
-  position: relative;
-  overflow: hidden;
-}
+  .mpx-recycle-list {
+    position: relative;
+    overflow: hidden;
+  }
 
-.content-wrapper {
-  position: relative;
-  width: 100%;
-}
+  .content-wrapper {
+    position: relative;
+    width: 100%;
+  }
 
-.infinite-list {
-  left: 0;
-  right: 0;
-  pointer-events: none; /* 支付宝环境需要设置允许事件穿透 */
-  top: 0;
-  position: absolute;
-  will-change: transform;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
+  .infinite-list {
+    left: 0;
+    right: 0;
+    /* 支付宝环境需要设置允许事件穿透, 否则滑不动 */
+    /* @mpx-if (__mpx_mode__ === 'ali') */
+    pointer-events: none;
+    /* @mpx-endif */
+    top: 0;
+    position: absolute;
+    will-change: transform;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+  }
 </style>

From e93b931623be2742c9a0d33c3371be9e0c201bea Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 22 Jan 2025 20:02:33 +0800
Subject: [PATCH 004/126] =?UTF-8?q?chore:=20=E5=A2=9E=E5=BC=BArecycle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wx/mpx-recycle-item-default.mpx           | 21 +++++++++++++++++++
 .../components/wx/mpx-recycle-view.mpx        |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
new file mode 100644
index 0000000000..2501024b06
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
@@ -0,0 +1,21 @@
+<template>
+  <view class="list-item">
+    <view class="item-content">recycle-item-default</view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+.list-item
+  margin 4px 16px
+  padding 16px
+  background #fff
+  border-radius 8px
+  box-shadow 0 2px 4px rgba(0,0,0,0.1)
+
+  .item-content
+    display flex
+    flex-direction column
+    font-size 14px
+    color #666
+
+</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index f945adc7cb..d91432ec9b 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -212,7 +212,7 @@ createComponent({
     "component": true,
     "componentGenerics": {
       "recycle-item": {
-        "default": "../components/test"
+        "default": "./mpx-recycle-item-default"
       }
     }
   }

From db5ed91be324edeebe8e7e1a6454efcbdf61e88e Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 23 Jan 2025 17:02:44 +0800
Subject: [PATCH 005/126] =?UTF-8?q?fix:=20ali&web=E7=8E=AF=E5=A2=83scrollT?=
 =?UTF-8?q?op=E5=88=9D=E5=A7=8B=E5=8C=96=E4=B8=8D=E7=94=9F=E6=95=88?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/wx/mpx-recycle-view.mpx        | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index d91432ec9b..aa6a8bac20 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -2,7 +2,7 @@
   <scroll-view
     class="mpx-recycle-list"
     scroll-y="{{scrollY}}"
-    scroll-top="{{scrollTop}}"
+    scroll-top="{{_scrollTop}}"
     scroll-with-animation="{{scrollWithAnimation}}"
     enable-back-to-top="{{enableBackToTop}}"
     lower-threshold="{{lowerThreshold}}"
@@ -73,7 +73,8 @@ createComponent({
     end: 0,
     contentStyle: '',
     placeholderStyle: '',
-    positions: []
+    positions: [],
+    isReady: false
   },
   computed: {
     _width() {
@@ -90,6 +91,10 @@ createComponent({
         }
       })
     },
+    _scrollTop() {
+      // 使用初始值或当前值
+      return this.isReady ? this.scrollTop : 0
+    },
     visibleCount() {
       return Math.ceil(this.containerHeight / this.itemSize.height)
     },
@@ -116,6 +121,11 @@ createComponent({
           // 更新列表总高度
           const height = this.positions[this.positions.length - 1].bottom
           this.placeholderStyle = `height: ${height}px`
+          if (!this.isReady) {
+            this.$nextTick(() => {
+              this.isReady = true
+            })
+          }
           // 更新真实偏移量
           this.setStartOffset()
         })
@@ -127,7 +137,8 @@ createComponent({
         this.start = this.getStartIndex(val)
         this.end = this.start + this.visibleCount
         this.setStartOffset()
-      }
+      },
+      immediate: true
     }
   },
   ready() {
@@ -212,7 +223,7 @@ createComponent({
     "component": true,
     "componentGenerics": {
       "recycle-item": {
-        "default": "./mpx-recycle-item-default"
+        "default": "./mpx-recycle-item-default.mpx"
       }
     }
   }

From b67f4a059876f11b4b910617408a05be3bbf15fc Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 5 Feb 2025 15:42:39 +0800
Subject: [PATCH 006/126] =?UTF-8?q?chore:=20=E9=80=82=E9=85=8Drn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../runtime/components/wx/mpx-recycle-item-default.mpx | 10 +++++-----
 .../lib/runtime/components/wx/mpx-recycle-view.mpx     |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
index 2501024b06..5cf26e0eb4 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
@@ -12,10 +12,10 @@
   border-radius 8px
   box-shadow 0 2px 4px rgba(0,0,0,0.1)
 
-  .item-content
-    display flex
-    flex-direction column
-    font-size 14px
-    color #666
+.item-content
+  display flex
+  flex-direction column
+  font-size 14px
+  color #666
 
 </style>
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index aa6a8bac20..4a08981de4 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -1,6 +1,7 @@
 <template>
   <scroll-view
     class="mpx-recycle-list"
+    wx:ref
     scroll-y="{{scrollY}}"
     scroll-top="{{_scrollTop}}"
     scroll-with-animation="{{scrollWithAnimation}}"
@@ -15,10 +16,9 @@
     <view class="content-wrapper">
       <view
         class="infinite-list-placeholder"
-        ref="placeholder"
         wx:style="{{placeholderStyle}}"
       ></view>
-      <view class="infinite-list" ref="content" wx:style="{{contentStyle}}">
+      <view class="infinite-list" wx:style="{{contentStyle}}">
         <view
           wx:for="{{visibleData}}"
           wx:key="id"
@@ -32,7 +32,7 @@
   </scroll-view>
 </template>
 <script>
-import { createComponent } from '@mpxjs/core'
+import mpx, { createComponent } from '@mpxjs/core'
 
 createComponent({
   properties: {
@@ -143,7 +143,7 @@ createComponent({
   },
   ready() {
     this.initPositions()
-    const query = wx.createSelectorQuery().in(this)
+    const query = mpx.createSelectorQuery().in(this)
     query
       .select('.mpx-recycle-list')
       .boundingClientRect((rect) => {

From a76b2c3c0d2af188dfc2300497122e46fda356d2 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 6 Feb 2025 19:37:14 +0800
Subject: [PATCH 007/126] =?UTF-8?q?feat:=20rn=E6=94=AF=E6=8C=81=E6=8A=BD?=
 =?UTF-8?q?=E8=B1=A1=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../platform/patch/getDefaultOptions.ios.js   | 11 +++++
 .../lib/template-compiler/compiler.js         | 44 +++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js
index c98e3ea19b..f91a779094 100644
--- a/packages/core/src/platform/patch/getDefaultOptions.ios.js
+++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js
@@ -42,6 +42,17 @@ function createEffect (proxy, components) {
   const getComponent = (tagName) => {
     if (!tagName) return null
     if (tagName === 'block') return Fragment
+    // 从父组件传递的 genericComponents 中获取 moduleId
+    if (proxy.target.__props.genericComponents && proxy.target.__props.generic) {
+    const genericKey = Object.keys(proxy.target.__props.generic)[0]
+    const actualComponentName = proxy.target.__props.generic[genericKey]
+
+    if (tagName === actualComponentName) {
+      // 通过 moduleId 从全局获取组件定义
+      const moduleId = proxy.target.__props.genericComponents[actualComponentName]
+      return global.__mpxOptionsMap[moduleId]
+    }
+  }
     return components[tagName] || getByPath(ReactNative, tagName)
   }
   const innerCreateElement = (type, ...rest) => {
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index 2781eee4be..67e145151e 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2457,6 +2457,49 @@ function getVirtualHostRoot (options, meta) {
   return getTempNode()
 }
 
+function processComponentGenericsReact (el, options) {
+  const { componentGenerics, usingComponentsInfo } = options
+  // 处理子组件定义
+  if (componentGenerics && componentGenerics[el.tag]) {
+      const genericKey = el.tag
+
+      // 使用 is 属性处理动态组件
+      el.is = `this.__props.generic && this.__props.generic['${genericKey}'] && getComponent(this.__props.generic['${genericKey}']) ? this.__props.generic['${genericKey}'] : '${genericKey}default'`
+
+      // 保存可能的组件列表
+      el.components = [
+        `this.__props.generic['${genericKey}']`,
+        `${genericKey}default`
+      ]
+  }
+
+  // 处理父组件中使用 generic 组件的情况
+  const attrsToAdd = []
+  el.attrsList.forEach(attr => {
+    const match = attr.name.match(genericRE)
+    if (match) {
+      const key = match[1]
+      const componentName = attr.value
+      // 传递 generic 配置
+      attrsToAdd.push({
+        name: 'generic',
+        value: { [key]: componentName }
+      })
+
+      // 从 usingComponentsInfo 中获取组件的 moduleId
+      if (usingComponentsInfo[componentName]) {
+        const { mid } = usingComponentsInfo[componentName]
+        // 传递组件的 moduleId 给子组件
+        attrsToAdd.push({
+          name: 'genericComponents',
+          value: { [componentName]: mid }
+        })
+      }
+    }
+  })
+  el.attrsList = el.attrsList.concat(attrsToAdd)
+}
+
 function processShow (el, options, root) {
   let { val: show, has } = getAndRemoveAttr(el, config[mode].directive.show)
   if (mode === 'swan') show = wrapMustache(show)
@@ -2707,6 +2750,7 @@ function processElement (el, root, options, meta) {
       processSlotReact(el, meta)
     }
     processAttrs(el, options)
+    processComponentGenericsReact(el, options)
     return
   }
 

From eaed9a01cc584f15e9b1e7a7a0a846019ea921c3 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 6 Feb 2025 19:48:04 +0800
Subject: [PATCH 008/126] fix: warning

---
 .../lib/runtime/components/wx/mpx-recycle-view.mpx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index 4a08981de4..ac38b2d25d 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -21,7 +21,7 @@
       <view class="infinite-list" wx:style="{{contentStyle}}">
         <view
           wx:for="{{visibleData}}"
-          wx:key="id"
+          wx:key="index"
           class="infinite-list-item"
           wx:style="height: {{itemSize.height}}px; overflow: hidden"
         >

From f9c7722e179cf544cd7e58aa947f6c8a97cff482 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 10 Feb 2025 16:09:27 +0800
Subject: [PATCH 009/126] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4web=E5=8D=95?=
 =?UTF-8?q?=E7=8B=AC=E9=80=82=E9=85=8D=E7=9A=84recycle-list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/web/mpx-recycle-item.vue       |  13 -
 .../components/web/mpx-recycle-list.vue       | 262 ------------------
 .../components/wx/mpx-recycle-view.mpx        |   8 +-
 3 files changed, 7 insertions(+), 276 deletions(-)
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-item.vue
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-list.vue

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-item.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-item.vue
deleted file mode 100644
index 29ac7c86fc..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-item.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <slot></slot>
-</template>
-
-
-<script>
-export default {
-
-};
-</script>
-
-<style scoped>
-</style>
\ No newline at end of file
diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-list.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-list.vue
deleted file mode 100644
index 3a9cc0aadd..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-list.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<template>
-  <div ref="wrapper" :style="{ height }" class="mpx-recycle-list">
-    <div class="content-wrapper">
-      <div ref="placeholder" class="infinite-list-placeholder"></div>
-
-      <div ref="content" class="infinite-list">
-        <div class="infinite-list-item" ref="items" :id="item._index" :key="item._index"
-          :style="{ height: itemSize.height + 'px', overflow: 'hidden' }" v-for="item in visibleData">
-          <slot ref="slot" :item="item.item"></slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import BScroll from "@better-scroll/core";
-  export default {
-    name: "mpx-recycle-list",
-    props: {
-      listData: {
-        type: Array,
-        default: () => [],
-      },
-      //预估尺寸
-      itemSize: {
-        type: Object,
-        required: true,
-      },
-      //缓冲区比例
-      bufferScale: {
-        type: Number,
-        default: 2,
-      },
-      height: {
-        type: String,
-        default: "100%",
-      },
-      scrollX: Boolean,
-      scrollY: Boolean,
-      upperThreshold: {
-        type: [Number, String],
-        default: 50,
-      },
-      lowerThreshold: {
-        type: [Number, String],
-        default: 50,
-      },
-      scrollTop: {
-        type: [Number, String],
-        default: 0,
-      },
-      scrollLeft: {
-        type: [Number, String],
-        default: 0,
-      },
-      scrollOptions: {
-        type: Object,
-        default: () => {
-          return {};
-        },
-      },
-      scrollIntoView: String,
-      scrollWithAnimation: Boolean,
-      enableFlex: Boolean,
-      enhanced: Boolean,
-      refresherEnabled: Boolean,
-      refresherTriggered: Boolean,
-      refresherThreshold: {
-        type: Number,
-        default: 45,
-      },
-      refresherDefaultStyle: {
-        type: String,
-        default: "black",
-      },
-      refresherBackground: {
-        type: String,
-        default: "",
-      },
-    },
-    computed: {
-      _listData() {
-        return this.listData.map((item, index) => {
-          return {
-            _index: `_${index}`,
-            item,
-          };
-        });
-      },
-      visibleCount() {
-        return Math.ceil(this.screenHeight / this.itemSize.height);
-      },
-      aboveCount() {
-        return Math.min(this.start, this.bufferScale * this.visibleCount);
-      },
-      belowCount() {
-        return Math.min(
-          this.listData.length - this.end,
-          this.bufferScale * this.visibleCount
-        );
-      },
-      visibleData() {
-        let start = this.start - this.aboveCount;
-        let end = this.end + this.belowCount;
-        return this._listData.slice(start, end);
-      },
-    },
-    watch: {
-      listData: {
-        handler() {
-          this.initPositions();
-        },
-        immediate: true
-      }
-    },
-    created() {
-      this.initPositions();
-    },
-    updated() {
-      this.$nextTick(function () {
-        if (!this.$refs.items || !this.$refs.items.length) {
-          return;
-        }
-        //更新列表总高度
-        let height = this.positions[this.positions.length - 1].bottom;
-        this.$refs.placeholder.style.height = height + "px";
-        this.bs.refresh()
-        //更新真实偏移量
-        this.setStartOffset();
-      });
-    },
-    data() {
-      return {
-        screenHeight: 0,
-        start: 0,
-        end: 0,
-        currentX: 0,
-        currentY: 0,
-        lastX: 0,
-        lastY: 0
-      };
-    },
-    mounted() {
-      this.initBs();
-      this.screenHeight = this.$el.clientHeight;
-      this.start = 0;
-      this.end = this.start + this.visibleCount;
-    },
-    methods: {
-      initBs() {
-        this.destroyBs();
-        const originBsOptions = {
-          startX: -this.currentX,
-          startY: -this.currentY,
-          scrollX: this.scrollX,
-          scrollY: this.scrollY,
-          probeType: 3,
-          bounce: false,
-          stopPropagation: true,
-          bindToWrapper: true,
-          useTransition: false, // 使用 transform 代替 transition
-          HWCompositing: true,
-          eventPassthrough:
-            (this.scrollX && "vertical") || (this.scrollY && "horizontal") || "",
-        };
-        const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions);
-        this.bs = new BScroll(this.$refs.wrapper, bsOptions);
-        this.lastX = -this.currentX;
-        this.lastY = -this.currentY;
-        this.bs.on("scroll", () => {
-          this.scrollEvent()
-        });
-        this.bs.on("scrollEnd", () => {
-          this.currentX = -this.bs.x;
-          this.currentY = -this.bs.y;
-        });
-      },
-      destroyBs() {
-        if (!this.bs) return;
-        this.bs.destroy();
-        delete this.bs;
-      },
-      initPositions() {
-        const { height } = this.itemSize
-        this.positions = this.listData.map((d, index) => ({
-          index,
-          height: height,
-          top: index * height,
-          bottom: (index + 1) * height,
-        }));
-      },
-      getStartIndex(scrollTop = 0) {
-        return this.binarySearch(this.positions, scrollTop);
-      },
-      binarySearch(list, value) {
-        let start = 0;
-        let end = list.length - 1;
-        let tempIndex = null;
-
-        while (start <= end) {
-          let midIndex = parseInt((start + end) / 2);
-          let midValue = list[midIndex].bottom;
-          if (midValue === value) {
-            return midIndex + 1;
-          } else if (midValue < value) {
-            start = midIndex + 1;
-          } else if (midValue > value) {
-            if (tempIndex === null || tempIndex > midIndex) {
-              tempIndex = midIndex;
-            }
-            end = end - 1;
-          }
-        }
-        return tempIndex;
-      },
-      setStartOffset() {
-        let startOffset;
-        if (this.start >= 1) {
-          let size =
-            this.positions[this.start].top -
-            (this.positions[this.start - this.aboveCount]
-              ? this.positions[this.start - this.aboveCount].top
-              : 0);
-          startOffset = this.positions[this.start - 1].bottom - size;
-        } else {
-          startOffset = 0;
-        }
-        this.$refs.content.style.transform = `translate3d(0,${startOffset}px,0)`;
-      },
-      scrollEvent() {
-        let scrollTop = -this.bs.y;
-        this.start = this.getStartIndex(scrollTop);
-        this.end = this.start + this.visibleCount;
-        this.setStartOffset();
-      },
-    },
-  };
-</script>
-
-<style scoped>
-  .mpx-recycle-list {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .content-wrapper {
-    position: relative;
-    width: 100%;
-    overflow: hidden;
-  }
-
-  .infinite-list {
-    left: 0;
-    right: 0;
-    top: 0;
-    position: absolute;
-    will-change: transform;
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-  }
-</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index ac38b2d25d..066864edb3 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -2,12 +2,14 @@
   <scroll-view
     class="mpx-recycle-list"
     wx:ref
+    type="list"
     scroll-y="{{scrollY}}"
     scroll-top="{{_scrollTop}}"
     scroll-with-animation="{{scrollWithAnimation}}"
     enable-back-to-top="{{enableBackToTop}}"
     lower-threshold="{{lowerThreshold}}"
     upper-threshold="{{upperThreshold}}"
+    scroll-options="{{scrollOptions}}"
     wx:style="width: {{_width}}; height: {{_height}}"
     bindscroll="onScroll"
     bindscrolltoupper="onScrollToUpper"
@@ -65,14 +67,18 @@ createComponent({
     upperThreshold: {
       type: Number,
       value: 50
+    },
+    scrollOptions: {
+      type: Object,
+      value: {}
     }
   },
   data: {
-    containerHeight: 0,
     start: 0,
     end: 0,
     contentStyle: '',
     placeholderStyle: '',
+    containerHeight: 0,
     positions: [],
     isReady: false
   },

From a38b0f16b77503e562cdedc47507429d7cf117e8 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 10 Feb 2025 16:51:08 +0800
Subject: [PATCH 010/126] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0=E8=8A=82?=
 =?UTF-8?q?=E6=B5=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/wx/mpx-recycle-view.mpx   | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index 066864edb3..37b04cc613 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -71,6 +71,10 @@ createComponent({
     scrollOptions: {
       type: Object,
       value: {}
+    },
+    scrollThrottleDelay: {
+      type: Number,
+      value: 16
     }
   },
   data: {
@@ -80,7 +84,8 @@ createComponent({
     placeholderStyle: '',
     containerHeight: 0,
     positions: [],
-    isReady: false
+    isReady: false,
+    lastScrollTime: 0
   },
   computed: {
     _width() {
@@ -209,6 +214,11 @@ createComponent({
       this.contentStyle = `transform: translateY(${startOffset}px);`
     },
     onScroll(e) {
+      const now = Date.now()
+      if (now - this.lastScrollTime < this.scrollThrottleDelay) {
+        return
+      }
+      this.lastScrollTime = now
       const { scrollTop } = e.detail
       this.start = this.getStartIndex(scrollTop)
       this.end = this.start + this.visibleCount

From 3033c17c34201534735e6691e651c103c6612a17 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 10 Feb 2025 20:40:23 +0800
Subject: [PATCH 011/126] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=90=8C?=
 =?UTF-8?q?=E6=97=B6=E4=BC=A0=E9=80=92=E5=A4=9A=E4=B8=AA=E6=8A=BD=E8=B1=A1?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs-vuepress/.vuepress/dist/404.html         |   25 +
 .../.vuepress/dist/api/ApiIndex.html          |   23 +
 .../.vuepress/dist/api/app-config.html        |  116 ++
 docs-vuepress/.vuepress/dist/api/builtIn.html |   56 +
 docs-vuepress/.vuepress/dist/api/compile.html | 1214 +++++++++++++++++
 .../.vuepress/dist/api/composition-api.html   |  117 ++
 .../.vuepress/dist/api/directives.html        |  434 ++++++
 docs-vuepress/.vuepress/dist/api/extend.html  |  365 +++++
 .../.vuepress/dist/api/global-api.html        |  253 ++++
 docs-vuepress/.vuepress/dist/api/index.html   |   43 +
 .../.vuepress/dist/api/instance-api.html      |  265 ++++
 .../.vuepress/dist/api/optional-api.html      |   51 +
 .../.vuepress/dist/api/reactivity-api.html    |  544 ++++++++
 .../.vuepress/dist/api/store-api.html         |  229 ++++
 .../.vuepress/dist/articles/1.0.html          |   54 +
 .../.vuepress/dist/articles/2.0.html          |   58 +
 .../.vuepress/dist/articles/2.7-release.html  |   63 +
 .../dist/articles/2.8-release-alter.html      |  174 +++
 .../.vuepress/dist/articles/2.8-release.html  |  182 +++
 .../dist/articles/2.9-release-alter.html      |  277 ++++
 .../.vuepress/dist/articles/2.9-release.html  |  285 ++++
 .../.vuepress/dist/articles/index.html        |   43 +
 .../.vuepress/dist/articles/mpx-cli-next.html |  137 ++
 .../.vuepress/dist/articles/mpx-cube-ui.html  |   56 +
 .../.vuepress/dist/articles/mpx1.html         |   55 +
 .../.vuepress/dist/articles/mpx2.html         |  740 ++++++++++
 .../.vuepress/dist/articles/performance.html  |   60 +
 .../.vuepress/dist/articles/size-control.html |   51 +
 .../dist/articles/ts-derivation.html          |  273 ++++
 .../.vuepress/dist/articles/unit-test.html    |  461 +++++++
 .../dist/assets/css/0.styles.f22478ca.css     |    3 +
 .../dist/assets/img/search.83621669.svg       |    1 +
 .../dist/assets/img/start-tips1.3b76ac97.png  |  Bin 0 -> 39681 bytes
 .../dist/assets/img/start-tips2.7d8836f8.png  |  Bin 0 -> 51539 bytes
 .../.vuepress/dist/assets/js/1.4f7abe8f.js    |    1 +
 .../.vuepress/dist/assets/js/10.0192acce.js   |    1 +
 .../.vuepress/dist/assets/js/100.f31ffd06.js  |    1 +
 .../.vuepress/dist/assets/js/101.283d0363.js  |    1 +
 .../.vuepress/dist/assets/js/102.094a0a16.js  |    1 +
 .../.vuepress/dist/assets/js/103.b34f6752.js  |    1 +
 .../.vuepress/dist/assets/js/104.78f6358e.js  |    1 +
 .../.vuepress/dist/assets/js/105.eb6680fc.js  |    1 +
 .../.vuepress/dist/assets/js/106.471f03cf.js  |    1 +
 .../.vuepress/dist/assets/js/107.63fd18fd.js  |    1 +
 .../.vuepress/dist/assets/js/108.614260e9.js  |    1 +
 .../.vuepress/dist/assets/js/109.3da50cc1.js  |    1 +
 .../.vuepress/dist/assets/js/11.d7a8d045.js   |    1 +
 .../.vuepress/dist/assets/js/110.f74ff3a3.js  |    1 +
 .../.vuepress/dist/assets/js/111.51932e54.js  |    1 +
 .../.vuepress/dist/assets/js/112.da7bd3e7.js  |    1 +
 .../.vuepress/dist/assets/js/113.caaf11a3.js  |    1 +
 .../.vuepress/dist/assets/js/114.16cda7ac.js  |    1 +
 .../.vuepress/dist/assets/js/115.88124b12.js  |    1 +
 .../.vuepress/dist/assets/js/116.4a116234.js  |    1 +
 .../.vuepress/dist/assets/js/117.e45c1b95.js  |    1 +
 .../.vuepress/dist/assets/js/118.9cbac09e.js  |    1 +
 .../.vuepress/dist/assets/js/119.312e4c21.js  |    1 +
 .../.vuepress/dist/assets/js/12.4d7217be.js   |    1 +
 .../.vuepress/dist/assets/js/120.7a6b4035.js  |    1 +
 .../.vuepress/dist/assets/js/14.7377c68f.js   |    1 +
 .../.vuepress/dist/assets/js/15.6f885a83.js   |    1 +
 .../.vuepress/dist/assets/js/16.974f551e.js   |    1 +
 .../.vuepress/dist/assets/js/17.e94e6745.js   |    1 +
 .../.vuepress/dist/assets/js/18.b1f7a4a2.js   |    1 +
 .../.vuepress/dist/assets/js/19.62186e92.js   |    1 +
 .../.vuepress/dist/assets/js/2.314c65b9.js    |    1 +
 .../.vuepress/dist/assets/js/20.e9cd4de3.js   |    1 +
 .../.vuepress/dist/assets/js/21.217f8fa9.js   |    1 +
 .../.vuepress/dist/assets/js/22.4cd3344f.js   |    1 +
 .../.vuepress/dist/assets/js/23.365f9a87.js   |    1 +
 .../.vuepress/dist/assets/js/24.17777a13.js   |    1 +
 .../.vuepress/dist/assets/js/25.889c07d7.js   |    1 +
 .../.vuepress/dist/assets/js/26.3aa9f276.js   |    1 +
 .../.vuepress/dist/assets/js/27.1a35170a.js   |    1 +
 .../.vuepress/dist/assets/js/28.3670fa46.js   |    1 +
 .../.vuepress/dist/assets/js/29.a911e510.js   |    1 +
 .../.vuepress/dist/assets/js/3.145e69cd.js    |    1 +
 .../.vuepress/dist/assets/js/30.04d1a7ea.js   |    1 +
 .../.vuepress/dist/assets/js/31.ec06bf2f.js   |    1 +
 .../.vuepress/dist/assets/js/32.f29d2cd1.js   |    1 +
 .../.vuepress/dist/assets/js/33.936d018e.js   |    1 +
 .../.vuepress/dist/assets/js/34.f494d685.js   |    1 +
 .../.vuepress/dist/assets/js/35.c3ed1ff7.js   |    1 +
 .../.vuepress/dist/assets/js/36.d2c9afa9.js   |    1 +
 .../.vuepress/dist/assets/js/37.4e1eee2c.js   |    1 +
 .../.vuepress/dist/assets/js/38.7826170e.js   |    1 +
 .../.vuepress/dist/assets/js/39.094ffa40.js   |    1 +
 .../.vuepress/dist/assets/js/4.9489102c.js    |    1 +
 .../.vuepress/dist/assets/js/40.10d90636.js   |    1 +
 .../.vuepress/dist/assets/js/41.8351af86.js   |    1 +
 .../.vuepress/dist/assets/js/42.53972f6c.js   |    1 +
 .../.vuepress/dist/assets/js/43.e2b432ea.js   |    1 +
 .../.vuepress/dist/assets/js/44.e4242a1f.js   |    1 +
 .../.vuepress/dist/assets/js/45.392413aa.js   |    1 +
 .../.vuepress/dist/assets/js/46.22f9a9c6.js   |    1 +
 .../.vuepress/dist/assets/js/47.2bd2cecc.js   |    1 +
 .../.vuepress/dist/assets/js/48.55792a30.js   |    1 +
 .../.vuepress/dist/assets/js/49.cde94a79.js   |    1 +
 .../.vuepress/dist/assets/js/5.12d049b6.js    |    1 +
 .../.vuepress/dist/assets/js/50.42e34e52.js   |    1 +
 .../.vuepress/dist/assets/js/51.90dfa84e.js   |    1 +
 .../.vuepress/dist/assets/js/52.10bb0251.js   |    1 +
 .../.vuepress/dist/assets/js/53.7207ffc5.js   |    1 +
 .../.vuepress/dist/assets/js/54.af3d3dcd.js   |    1 +
 .../.vuepress/dist/assets/js/55.2d6ae2e1.js   |    1 +
 .../.vuepress/dist/assets/js/56.9aec9a9e.js   |    1 +
 .../.vuepress/dist/assets/js/57.9d9ddcbd.js   |    1 +
 .../.vuepress/dist/assets/js/58.50eb3b91.js   |    1 +
 .../.vuepress/dist/assets/js/59.27106fbb.js   |    1 +
 .../.vuepress/dist/assets/js/6.6ea91b28.js    |    1 +
 .../.vuepress/dist/assets/js/60.a47e5279.js   |    1 +
 .../.vuepress/dist/assets/js/61.74ebd7d9.js   |    1 +
 .../.vuepress/dist/assets/js/62.4bf212f9.js   |    1 +
 .../.vuepress/dist/assets/js/63.b54aca3e.js   |    1 +
 .../.vuepress/dist/assets/js/64.399e72b8.js   |    1 +
 .../.vuepress/dist/assets/js/65.a8c627d3.js   |    1 +
 .../.vuepress/dist/assets/js/66.7f19cc4b.js   |    1 +
 .../.vuepress/dist/assets/js/67.e57db97e.js   |    1 +
 .../.vuepress/dist/assets/js/68.ebe4213c.js   |    1 +
 .../.vuepress/dist/assets/js/69.2d309866.js   |    1 +
 .../.vuepress/dist/assets/js/7.01e4e942.js    |    1 +
 .../.vuepress/dist/assets/js/70.60ae83e6.js   |    1 +
 .../.vuepress/dist/assets/js/71.188d7bca.js   |    1 +
 .../.vuepress/dist/assets/js/72.3f7bfd0d.js   |    1 +
 .../.vuepress/dist/assets/js/73.171571e4.js   |    1 +
 .../.vuepress/dist/assets/js/74.3d5cfaba.js   |    1 +
 .../.vuepress/dist/assets/js/75.093d716c.js   |    1 +
 .../.vuepress/dist/assets/js/76.50d84c61.js   |    1 +
 .../.vuepress/dist/assets/js/77.7bc0f013.js   |    1 +
 .../.vuepress/dist/assets/js/78.e2ded2d4.js   |    1 +
 .../.vuepress/dist/assets/js/79.f7eeb76b.js   |    1 +
 .../.vuepress/dist/assets/js/8.ba7f6ace.js    |    1 +
 .../.vuepress/dist/assets/js/80.41418749.js   |    1 +
 .../.vuepress/dist/assets/js/81.16e2cc83.js   |    1 +
 .../.vuepress/dist/assets/js/82.56c0d7c1.js   |    1 +
 .../.vuepress/dist/assets/js/83.ea65d6b1.js   |    1 +
 .../.vuepress/dist/assets/js/84.d50d3d09.js   |    1 +
 .../.vuepress/dist/assets/js/85.1eed1486.js   |    1 +
 .../.vuepress/dist/assets/js/86.1ab04b8d.js   |    1 +
 .../.vuepress/dist/assets/js/87.392384e7.js   |    1 +
 .../.vuepress/dist/assets/js/88.a95133cd.js   |    1 +
 .../.vuepress/dist/assets/js/89.213efaae.js   |    1 +
 .../.vuepress/dist/assets/js/9.26319460.js    |    1 +
 .../.vuepress/dist/assets/js/90.ef03688f.js   |    1 +
 .../.vuepress/dist/assets/js/91.43930d52.js   |    1 +
 .../.vuepress/dist/assets/js/92.ae5e9611.js   |    1 +
 .../.vuepress/dist/assets/js/93.3cdab647.js   |    1 +
 .../.vuepress/dist/assets/js/94.72df7b53.js   |    1 +
 .../.vuepress/dist/assets/js/95.c8e36604.js   |    1 +
 .../.vuepress/dist/assets/js/96.1ebdc00d.js   |    1 +
 .../.vuepress/dist/assets/js/97.fa1ed9e7.js   |    1 +
 .../.vuepress/dist/assets/js/98.939cb6ef.js   |    1 +
 .../.vuepress/dist/assets/js/99.96c5a70e.js   |    1 +
 .../.vuepress/dist/assets/js/app.84c88b57.js  |   18 +
 .../dist/baidu_verify_codeva-GYcT5ujCTB.html  |    1 +
 docs-vuepress/.vuepress/dist/desc.html        |   49 +
 docs-vuepress/.vuepress/dist/favicon.ico      |  Bin 0 -> 9662 bytes
 .../guide/advance/ability-compatible.html     |   87 ++
 .../dist/guide/advance/async-subpackage.html  |  110 ++
 .../guide/advance/custom-output-path.html     |  101 ++
 .../dist/guide/advance/dll-plugin.html        |  126 ++
 .../.vuepress/dist/guide/advance/i18n.html    |  276 ++++
 .../dist/guide/advance/image-process.html     |  175 +++
 .../.vuepress/dist/guide/advance/mixin.html   |  115 ++
 .../.vuepress/dist/guide/advance/npm.html     |  144 ++
 .../.vuepress/dist/guide/advance/pinia.html   |  191 +++
 .../dist/guide/advance/platform.html          |  300 ++++
 .../.vuepress/dist/guide/advance/plugin.html  |   77 ++
 .../dist/guide/advance/progressive.html       |  135 ++
 .../dist/guide/advance/provide-inject.html    |  200 +++
 .../dist/guide/advance/resource-resolve.html  |   88 ++
 .../dist/guide/advance/size-report.html       |  188 +++
 .../.vuepress/dist/guide/advance/ssr.html     |  190 +++
 .../.vuepress/dist/guide/advance/store.html   |  599 ++++++++
 .../dist/guide/advance/subpackage.html        |  264 ++++
 .../dist/guide/advance/utility-first-css.html |  139 ++
 .../dist/guide/basic/class-style-binding.html |  131 ++
 .../.vuepress/dist/guide/basic/component.html |  117 ++
 .../dist/guide/basic/conditional-render.html  |   72 +
 .../.vuepress/dist/guide/basic/css.html       |  173 +++
 .../.vuepress/dist/guide/basic/event.html     |   90 ++
 .../.vuepress/dist/guide/basic/ide.html       |   67 +
 .../.vuepress/dist/guide/basic/intro.html     |   51 +
 .../dist/guide/basic/list-render.html         |  144 ++
 .../dist/guide/basic/option-chain.html        |   76 ++
 .../.vuepress/dist/guide/basic/reactive.html  |  111 ++
 .../.vuepress/dist/guide/basic/refs.html      |  106 ++
 .../dist/guide/basic/single-file.html         |   77 ++
 .../.vuepress/dist/guide/basic/start.html     |  132 ++
 .../.vuepress/dist/guide/basic/template.html  |  137 ++
 .../dist/guide/basic/two-way-binding.html     |   81 ++
 .../composition-api/composition-api.html      |  527 +++++++
 .../guide/composition-api/reactive-api.html   |  386 ++++++
 .../dist/guide/extend/api-proxy.html          |  100 ++
 .../.vuepress/dist/guide/extend/fetch.html    |  139 ++
 .../.vuepress/dist/guide/extend/index.html    |   62 +
 .../.vuepress/dist/guide/extend/mock.html     |  177 +++
 .../.vuepress/dist/guide/migrate/2.7.html     |  172 +++
 .../.vuepress/dist/guide/migrate/2.8.html     |   85 ++
 .../.vuepress/dist/guide/migrate/2.9.html     |   76 ++
 .../dist/guide/migrate/mpx-cli-3.html         |   97 ++
 .../.vuepress/dist/guide/platform/index.html  |  225 +++
 .../dist/guide/platform/miniprogram.html      |   43 +
 .../.vuepress/dist/guide/platform/rn.html     |  198 +++
 .../.vuepress/dist/guide/platform/web.html    |   43 +
 .../.vuepress/dist/guide/tool/e2e-test.html   |  297 ++++
 .../.vuepress/dist/guide/tool/ts.html         |  164 +++
 .../.vuepress/dist/guide/tool/unit-test.html  |  149 ++
 .../dist/guide/understand/compile.html        |   52 +
 .../dist/guide/understand/runtime.html        |   51 +
 docs-vuepress/.vuepress/dist/index.html       |   55 +
 docs-vuepress/.vuepress/dist/logo.png         |  Bin 0 -> 13635 bytes
 .../.vuepress/dist/manifest.webmanifest       |   15 +
 docs-vuepress/.vuepress/dist/rn-api.html      |   65 +
 .../.vuepress/dist/rn-component.html          |   44 +
 docs-vuepress/.vuepress/dist/rn-style.html    |  331 +++++
 docs-vuepress/.vuepress/dist/rn-template.html |  104 ++
 .../.vuepress/dist/service-worker.js          |  901 ++++++++++++
 .../platform/patch/getDefaultOptions.ios.js   |   20 +-
 .../lib/template-compiler/compiler.js         |   35 +-
 220 files changed, 16558 insertions(+), 20 deletions(-)
 create mode 100644 docs-vuepress/.vuepress/dist/404.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/ApiIndex.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/app-config.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/builtIn.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/compile.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/composition-api.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/directives.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/extend.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/global-api.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/index.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/instance-api.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/optional-api.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/reactivity-api.html
 create mode 100644 docs-vuepress/.vuepress/dist/api/store-api.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/1.0.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/2.0.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/2.7-release.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/2.8-release-alter.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/2.8-release.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/2.9-release-alter.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/2.9-release.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/index.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/mpx-cli-next.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/mpx-cube-ui.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/mpx1.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/mpx2.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/performance.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/size-control.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/ts-derivation.html
 create mode 100644 docs-vuepress/.vuepress/dist/articles/unit-test.html
 create mode 100644 docs-vuepress/.vuepress/dist/assets/css/0.styles.f22478ca.css
 create mode 100644 docs-vuepress/.vuepress/dist/assets/img/search.83621669.svg
 create mode 100644 docs-vuepress/.vuepress/dist/assets/img/start-tips1.3b76ac97.png
 create mode 100644 docs-vuepress/.vuepress/dist/assets/img/start-tips2.7d8836f8.png
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/1.4f7abe8f.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/10.0192acce.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/100.f31ffd06.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/101.283d0363.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/102.094a0a16.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/103.b34f6752.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/104.78f6358e.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/105.eb6680fc.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/106.471f03cf.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/107.63fd18fd.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/108.614260e9.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/109.3da50cc1.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/11.d7a8d045.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/110.f74ff3a3.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/111.51932e54.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/112.da7bd3e7.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/113.caaf11a3.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/114.16cda7ac.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/115.88124b12.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/116.4a116234.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/117.e45c1b95.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/118.9cbac09e.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/119.312e4c21.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/12.4d7217be.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/120.7a6b4035.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/14.7377c68f.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/15.6f885a83.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/16.974f551e.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/17.e94e6745.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/18.b1f7a4a2.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/19.62186e92.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/2.314c65b9.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/20.e9cd4de3.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/21.217f8fa9.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/22.4cd3344f.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/23.365f9a87.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/24.17777a13.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/25.889c07d7.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/26.3aa9f276.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/27.1a35170a.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/28.3670fa46.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/29.a911e510.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/3.145e69cd.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/30.04d1a7ea.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/31.ec06bf2f.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/32.f29d2cd1.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/33.936d018e.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/34.f494d685.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/35.c3ed1ff7.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/36.d2c9afa9.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/37.4e1eee2c.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/38.7826170e.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/39.094ffa40.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/4.9489102c.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/40.10d90636.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/41.8351af86.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/42.53972f6c.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/43.e2b432ea.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/44.e4242a1f.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/45.392413aa.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/46.22f9a9c6.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/47.2bd2cecc.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/48.55792a30.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/49.cde94a79.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/5.12d049b6.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/50.42e34e52.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/51.90dfa84e.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/52.10bb0251.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/53.7207ffc5.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/54.af3d3dcd.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/55.2d6ae2e1.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/56.9aec9a9e.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/57.9d9ddcbd.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/58.50eb3b91.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/59.27106fbb.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/6.6ea91b28.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/60.a47e5279.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/61.74ebd7d9.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/62.4bf212f9.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/63.b54aca3e.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/64.399e72b8.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/65.a8c627d3.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/66.7f19cc4b.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/67.e57db97e.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/68.ebe4213c.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/69.2d309866.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/7.01e4e942.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/70.60ae83e6.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/71.188d7bca.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/72.3f7bfd0d.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/73.171571e4.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/74.3d5cfaba.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/75.093d716c.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/76.50d84c61.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/77.7bc0f013.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/78.e2ded2d4.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/79.f7eeb76b.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/8.ba7f6ace.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/80.41418749.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/81.16e2cc83.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/82.56c0d7c1.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/83.ea65d6b1.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/84.d50d3d09.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/85.1eed1486.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/86.1ab04b8d.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/87.392384e7.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/88.a95133cd.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/89.213efaae.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/9.26319460.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/90.ef03688f.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/91.43930d52.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/92.ae5e9611.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/93.3cdab647.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/94.72df7b53.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/95.c8e36604.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/96.1ebdc00d.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/97.fa1ed9e7.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/98.939cb6ef.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/99.96c5a70e.js
 create mode 100644 docs-vuepress/.vuepress/dist/assets/js/app.84c88b57.js
 create mode 100644 docs-vuepress/.vuepress/dist/baidu_verify_codeva-GYcT5ujCTB.html
 create mode 100644 docs-vuepress/.vuepress/dist/desc.html
 create mode 100644 docs-vuepress/.vuepress/dist/favicon.ico
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/ability-compatible.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/async-subpackage.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/custom-output-path.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/dll-plugin.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/i18n.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/image-process.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/mixin.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/npm.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/pinia.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/platform.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/plugin.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/progressive.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/provide-inject.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/resource-resolve.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/size-report.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/ssr.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/store.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/subpackage.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/advance/utility-first-css.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/class-style-binding.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/component.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/conditional-render.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/css.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/event.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/ide.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/intro.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/list-render.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/option-chain.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/reactive.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/refs.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/single-file.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/start.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/template.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/basic/two-way-binding.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/composition-api/composition-api.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/composition-api/reactive-api.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/extend/api-proxy.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/extend/fetch.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/extend/index.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/extend/mock.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/migrate/2.7.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/migrate/2.8.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/migrate/2.9.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/migrate/mpx-cli-3.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/platform/index.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/platform/miniprogram.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/platform/rn.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/platform/web.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/tool/e2e-test.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/tool/ts.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/tool/unit-test.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/understand/compile.html
 create mode 100644 docs-vuepress/.vuepress/dist/guide/understand/runtime.html
 create mode 100644 docs-vuepress/.vuepress/dist/index.html
 create mode 100644 docs-vuepress/.vuepress/dist/logo.png
 create mode 100644 docs-vuepress/.vuepress/dist/manifest.webmanifest
 create mode 100644 docs-vuepress/.vuepress/dist/rn-api.html
 create mode 100644 docs-vuepress/.vuepress/dist/rn-component.html
 create mode 100644 docs-vuepress/.vuepress/dist/rn-style.html
 create mode 100644 docs-vuepress/.vuepress/dist/rn-template.html
 create mode 100644 docs-vuepress/.vuepress/dist/service-worker.js

diff --git a/docs-vuepress/.vuepress/dist/404.html b/docs-vuepress/.vuepress/dist/404.html
new file mode 100644
index 0000000000..a33a589c95
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/404.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/12.4d7217be.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>That's a Four-Oh-Four.</blockquote> <a href="/" class="router-link-active">
+      Take me home.
+    </a></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/12.4d7217be.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/ApiIndex.html b/docs-vuepress/.vuepress/dist/api/ApiIndex.html
new file mode 100644
index 0000000000..4f5bdb4a1f
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/ApiIndex.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div id="api-index" data-v-a2f64316><div class="header" data-v-a2f64316><h1 data-v-a2f64316>API 参考</h1> <div class="api-filter" data-v-a2f64316><label for="api-filter" data-v-a2f64316>过滤</label> <input type="search" placeholder="Enter keyword" id="api-filter" value="" data-v-a2f64316></div></div> <div class="api-section" data-v-a2f64316><h2 id="全局配置" data-v-a2f64316>全局配置</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><!----> <ul data-v-a2f64316><li data-v-a2f64316><a href="app-config.html#usestrictdiff" data-v-a2f64316>useStrictDiff</a></li><li data-v-a2f64316><a href="app-config.html#ignorewarning" data-v-a2f64316>ignoreWarning</a></li><li data-v-a2f64316><a href="app-config.html#ignoreproxywhitelist" data-v-a2f64316>ignoreProxyWhiteList</a></li><li data-v-a2f64316><a href="app-config.html#observeclassinstance" data-v-a2f64316>observeClassInstance</a></li><li data-v-a2f64316><a href="app-config.html#proxyeventhandler" data-v-a2f64316>proxyEventHandler</a></li><li data-v-a2f64316><a href="app-config.html#setdatahandler" data-v-a2f64316>setDataHandler</a></li><li data-v-a2f64316><a href="app-config.html#forceflushsync" data-v-a2f64316>forceFlushSync</a></li><li data-v-a2f64316><a href="app-config.html#webrouteconfig" data-v-a2f64316>webRouteConfig</a></li><li data-v-a2f64316><a href="app-config.html#webconfig" data-v-a2f64316>webConfig</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="全局-api" data-v-a2f64316>全局 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>全局对象 Mpx</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="global-api.html#mixin" data-v-a2f64316>mixin</a></li><li data-v-a2f64316><a href="global-api.html#injectmixins" data-v-a2f64316>injectMixins</a></li><li data-v-a2f64316><a href="global-api.html#observable" data-v-a2f64316>observable</a></li><li data-v-a2f64316><a href="global-api.html#set" data-v-a2f64316>set</a></li><li data-v-a2f64316><a href="global-api.html#delete" data-v-a2f64316>delete</a></li><li data-v-a2f64316><a href="global-api.html#use" data-v-a2f64316>use</a></li><li data-v-a2f64316><a href="global-api.html#watch" data-v-a2f64316>watch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>基础 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="global-api.html#createapp" data-v-a2f64316>createApp</a></li><li data-v-a2f64316><a href="global-api.html#createpage" data-v-a2f64316>createPage</a></li><li data-v-a2f64316><a href="global-api.html#createcomponent" data-v-a2f64316>createComponent</a></li><li data-v-a2f64316><a href="global-api.html#nexttick" data-v-a2f64316>nextTick</a></li><li data-v-a2f64316><a href="global-api.html#topureobject" data-v-a2f64316>toPureObject</a></li><li data-v-a2f64316><a href="global-api.html#getmixin" data-v-a2f64316>getMixin</a></li><li data-v-a2f64316><a href="global-api.html#implement" data-v-a2f64316>implement</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>内建生命周期变量</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="global-api.html#beforecreate" data-v-a2f64316>BEFORECREATE</a></li><li data-v-a2f64316><a href="global-api.html#created" data-v-a2f64316>CREATED</a></li><li data-v-a2f64316><a href="global-api.html#beforemount" data-v-a2f64316>BEFOREMOUNT</a></li><li data-v-a2f64316><a href="global-api.html#mounted" data-v-a2f64316>MOUNTED</a></li><li data-v-a2f64316><a href="global-api.html#beforeupdate" data-v-a2f64316>BEFOREUPDATE</a></li><li data-v-a2f64316><a href="global-api.html#updated" data-v-a2f64316>UPDATED</a></li><li data-v-a2f64316><a href="global-api.html#beforeunmount" data-v-a2f64316>BEFOREUNMOUNT</a></li><li data-v-a2f64316><a href="global-api.html#unmounted" data-v-a2f64316>UNMOUNTED</a></li><li data-v-a2f64316><a href="global-api.html#onload" data-v-a2f64316>ONLOAD</a></li><li data-v-a2f64316><a href="global-api.html#onshow" data-v-a2f64316>ONSHOW</a></li><li data-v-a2f64316><a href="global-api.html#onhide" data-v-a2f64316>ONHIDE</a></li><li data-v-a2f64316><a href="global-api.html#onresize" data-v-a2f64316>ONRESIZE</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Store API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="store-api.html#createstore" data-v-a2f64316>createStore</a></li><li data-v-a2f64316><a href="store-api.html#createstorewiththis" data-v-a2f64316>createStoreWithThis</a></li><li data-v-a2f64316><a href="store-api.html#createstatewiththis" data-v-a2f64316>createStateWithThis</a></li><li data-v-a2f64316><a href="store-api.html#creategetterswiththis" data-v-a2f64316>createGettersWithThis</a></li><li data-v-a2f64316><a href="store-api.html#createmutationswiththis" data-v-a2f64316>createMutationsWithThis</a></li><li data-v-a2f64316><a href="store-api.html#createactionswiththis" data-v-a2f64316>createActionsWithThis</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="响应式-api" data-v-a2f64316>响应式 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>响应式基础 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#set" data-v-a2f64316>set</a></li><li data-v-a2f64316><a href="reactivity-api.html#del" data-v-a2f64316>del</a></li><li data-v-a2f64316><a href="reactivity-api.html#reactive" data-v-a2f64316>reactive</a></li><li data-v-a2f64316><a href="reactivity-api.html#isreactive" data-v-a2f64316>isReactive</a></li><li data-v-a2f64316><a href="reactivity-api.html#markraw" data-v-a2f64316>markRaw</a></li><li data-v-a2f64316><a href="reactivity-api.html#shallowreactive" data-v-a2f64316>shallowReactive</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Refs</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#ref" data-v-a2f64316>ref</a></li><li data-v-a2f64316><a href="reactivity-api.html#unref" data-v-a2f64316>unref</a></li><li data-v-a2f64316><a href="reactivity-api.html#toref" data-v-a2f64316>toRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#torefs" data-v-a2f64316>toRefs</a></li><li data-v-a2f64316><a href="reactivity-api.html#isref" data-v-a2f64316>isRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#customref" data-v-a2f64316>customRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#shallowref" data-v-a2f64316>shallowRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#triggerref" data-v-a2f64316>triggerRef</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Computed 与 Watch</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#computed" data-v-a2f64316>computed</a></li><li data-v-a2f64316><a href="reactivity-api.html#watcheffect" data-v-a2f64316>watchEffect</a></li><li data-v-a2f64316><a href="reactivity-api.html#watchsynceffect" data-v-a2f64316>watchSyncEffect</a></li><li data-v-a2f64316><a href="reactivity-api.html#watchposteffect" data-v-a2f64316>watchPostEffect</a></li><li data-v-a2f64316><a href="reactivity-api.html#watch" data-v-a2f64316>watch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Effect 作用域 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#effectscope" data-v-a2f64316>effectScope</a></li><li data-v-a2f64316><a href="reactivity-api.html#getcurrentscope" data-v-a2f64316>getCurrentScope</a></li><li data-v-a2f64316><a href="reactivity-api.html#onscopedispose" data-v-a2f64316>onScopeDispose</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="组合式-api" data-v-a2f64316>组合式 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>生命周期钩子</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="composition-api.html#onbeforemount" data-v-a2f64316>onBeforeMount</a></li><li data-v-a2f64316><a href="composition-api.html#onmounted" data-v-a2f64316>onMounted</a></li><li data-v-a2f64316><a href="composition-api.html#onbeforeupdate" data-v-a2f64316>onBeforeUpdate</a></li><li data-v-a2f64316><a href="composition-api.html#onupdated" data-v-a2f64316>onUpdated</a></li><li data-v-a2f64316><a href="composition-api.html#onbeforeunmount" data-v-a2f64316>onBeforeUnmount</a></li><li data-v-a2f64316><a href="composition-api.html#onunmount" data-v-a2f64316>onUnmount</a></li><li data-v-a2f64316><a href="composition-api.html#onload" data-v-a2f64316>onLoad</a></li><li data-v-a2f64316><a href="composition-api.html#onshow" data-v-a2f64316>onShow</a></li><li data-v-a2f64316><a href="composition-api.html#onhide" data-v-a2f64316>onHide</a></li><li data-v-a2f64316><a href="composition-api.html#onresize" data-v-a2f64316>onResize</a></li><li data-v-a2f64316><a href="composition-api.html#onpulldownrefresh" data-v-a2f64316>onPullDownRefresh</a></li><li data-v-a2f64316><a href="composition-api.html#onreachbottom" data-v-a2f64316>onReachBottom</a></li><li data-v-a2f64316><a href="composition-api.html#onshareappmessage" data-v-a2f64316>onShareAppMessage</a></li><li data-v-a2f64316><a href="composition-api.html#onsharetimeline" data-v-a2f64316>onShareTimeline</a></li><li data-v-a2f64316><a href="composition-api.html#onaddtofavorites" data-v-a2f64316>onAddToFavorites</a></li><li data-v-a2f64316><a href="composition-api.html#onpagescroll" data-v-a2f64316>onPageScroll</a></li><li data-v-a2f64316><a href="composition-api.html#ontabitemtap" data-v-a2f64316>onTabItemTap</a></li><li data-v-a2f64316><a href="composition-api.html#onsaveexitstate" data-v-a2f64316>onSaveExitState</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>其他</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="composition-api.html#setup" data-v-a2f64316>setup</a></li><li data-v-a2f64316><a href="composition-api.html#getcurrentinstance" data-v-a2f64316>getCurrentInstance</a></li><li data-v-a2f64316><a href="composition-api.html#usei18n" data-v-a2f64316>useI18n</a></li><li data-v-a2f64316><a href="composition-api.html#usefetch" data-v-a2f64316>useFetch</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="选项式-api" data-v-a2f64316>选项式 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>实例 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="instance-api.html#set" data-v-a2f64316>$set</a></li><li data-v-a2f64316><a href="instance-api.html#watch" data-v-a2f64316>$watch</a></li><li data-v-a2f64316><a href="instance-api.html#delete" data-v-a2f64316>$delete</a></li><li data-v-a2f64316><a href="instance-api.html#refs" data-v-a2f64316>$refs</a></li><li data-v-a2f64316><a href="instance-api.html#asyncrefs" data-v-a2f64316>$asyncRefs</a></li><li data-v-a2f64316><a href="instance-api.html#forceupdate" data-v-a2f64316>$forceUpdate</a></li><li data-v-a2f64316><a href="instance-api.html#nexttick" data-v-a2f64316>$nextTick</a></li><li data-v-a2f64316><a href="instance-api.html#i18n" data-v-a2f64316>$i18n</a></li><li data-v-a2f64316><a href="instance-api.html#rawoptions" data-v-a2f64316>$rawOptions</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="内置相关" data-v-a2f64316>内置相关</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>模版指令 (1)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="directives.html#wx-if" data-v-a2f64316>wx:if</a></li><li data-v-a2f64316><a href="directives.html#wx-elif" data-v-a2f64316>wx:elif</a></li><li data-v-a2f64316><a href="directives.html#wx-else" data-v-a2f64316>wx:else</a></li><li data-v-a2f64316><a href="directives.html#wx-for" data-v-a2f64316>wx:for</a></li><li data-v-a2f64316><a href="directives.html#wx-for-index" data-v-a2f64316>wx:for-index</a></li><li data-v-a2f64316><a href="directives.html#wx-for-item" data-v-a2f64316>wx:for-item</a></li><li data-v-a2f64316><a href="directives.html#wx-key" data-v-a2f64316>wx:key</a></li><li data-v-a2f64316><a href="directives.html#wx-class" data-v-a2f64316>wx:class</a></li><li data-v-a2f64316><a href="directives.html#wx-style" data-v-a2f64316>wx:style</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>模版指令 (2)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="directives.html#wx-model" data-v-a2f64316>wx:model</a></li><li data-v-a2f64316><a href="directives.html#wx-model-prop" data-v-a2f64316>wx:model-prop</a></li><li data-v-a2f64316><a href="directives.html#wx-model-event" data-v-a2f64316>wx:model-event</a></li><li data-v-a2f64316><a href="directives.html#wx-model-value-path" data-v-a2f64316>wx:model-value-path</a></li><li data-v-a2f64316><a href="directives.html#wx-model-filter" data-v-a2f64316>wx:model-filter</a></li><li data-v-a2f64316><a href="directives.html#wx-ref" data-v-a2f64316>wx:ref</a></li><li data-v-a2f64316><a href="directives.html#wx-show" data-v-a2f64316>wx:show</a></li><li data-v-a2f64316><a href="directives.html#bind" data-v-a2f64316>bind</a></li><li data-v-a2f64316><a href="directives.html#catch" data-v-a2f64316>catch</a></li><li data-v-a2f64316><a href="directives.html#capture-bind" data-v-a2f64316>capture-bind</a></li><li data-v-a2f64316><a href="directives.html#capture-catch" data-v-a2f64316>capture-catch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>内建组件</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="builtIn.html#component" data-v-a2f64316>component</a></li><li data-v-a2f64316><a href="builtIn.html#slot" data-v-a2f64316>slot</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="编译构建" data-v-a2f64316>编译构建</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>webpack 配置</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#output-publicpath" data-v-a2f64316>output.publicPath</a></li><li data-v-a2f64316><a href="compile.html#output-filename" data-v-a2f64316>output.filename</a></li><li data-v-a2f64316><a href="compile.html#node-global" data-v-a2f64316>node.global</a></li><li data-v-a2f64316><a href="compile.html#rule-resourcequery" data-v-a2f64316>rule.resourceQuery</a></li><li data-v-a2f64316><a href="compile.html#resolve-extensions" data-v-a2f64316>resolve.extensions</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>MpxWebpackPlugin options (1)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#mode" data-v-a2f64316>mode</a></li><li data-v-a2f64316><a href="compile.html#srcmode" data-v-a2f64316>srcMode</a></li><li data-v-a2f64316><a href="compile.html#moderules" data-v-a2f64316>modeRules</a></li><li data-v-a2f64316><a href="compile.html#externalclasses" data-v-a2f64316>externalClasses</a></li><li data-v-a2f64316><a href="compile.html#resolvemode" data-v-a2f64316>resolveMode</a></li><li data-v-a2f64316><a href="compile.html#projectroot" data-v-a2f64316>projectRoot</a></li><li data-v-a2f64316><a href="compile.html#writemode" data-v-a2f64316>writeMode</a></li><li data-v-a2f64316><a href="compile.html#autoscoperules" data-v-a2f64316>autoScopeRules</a></li><li data-v-a2f64316><a href="compile.html#catch" data-v-a2f64316>catch</a></li><li data-v-a2f64316><a href="compile.html#forcedisableproxyctor" data-v-a2f64316>forceDisableProxyCtor</a></li><li data-v-a2f64316><a href="compile.html#transmpxrules" data-v-a2f64316>transMpxRules</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>MpxWebpackPlugin options (2)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#forceproxyeventrules" data-v-a2f64316>forceProxyEventRules</a></li><li data-v-a2f64316><a href="compile.html#autosplit" data-v-a2f64316>autoSplit</a></li><li data-v-a2f64316><a href="compile.html#defs" data-v-a2f64316>defs</a></li><li data-v-a2f64316><a href="compile.html#attributes" data-v-a2f64316>attributes</a></li><li data-v-a2f64316><a href="compile.html#externals" data-v-a2f64316>externals</a></li><li data-v-a2f64316><a href="compile.html#mininpmpackage" data-v-a2f64316>miniNpmPackage</a></li><li data-v-a2f64316><a href="compile.html#forceusepagector" data-v-a2f64316>forceUsePageCtor</a></li><li data-v-a2f64316><a href="compile.html#transrpxrules" data-v-a2f64316>transRpxRules</a></li><li data-v-a2f64316><a href="compile.html#postcssinlineconfig" data-v-a2f64316>postcssInlineConfig</a></li><li data-v-a2f64316><a href="compile.html#decodehtmltext" data-v-a2f64316>decodeHTMLText</a></li><li data-v-a2f64316><a href="compile.html#nativeconfig" data-v-a2f64316>nativeConfig</a></li><li data-v-a2f64316><a href="compile.html#webconfig" data-v-a2f64316>webConfig</a></li><li data-v-a2f64316><a href="compile.html#i18n" data-v-a2f64316>i18n</a></li><li data-v-a2f64316><a href="compile.html#auditresource" data-v-a2f64316>auditResource</a></li><li data-v-a2f64316><a href="compile.html#subpackagemodulesrules" data-v-a2f64316>subpackageModulesRules</a></li><li data-v-a2f64316><a href="compile.html#generatebuildmap" data-v-a2f64316>generateBuildMap</a></li><li data-v-a2f64316><a href="compile.html#autovirtualhostrules" data-v-a2f64316>autoVirtualHostRules</a></li><li data-v-a2f64316><a href="compile.html#partialcompilerules" data-v-a2f64316>partialCompileRules</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>MpxWebpackPlugin static methods</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-loader" data-v-a2f64316>MpxWebpackPlugin.loader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-pluginloader" data-v-a2f64316>MpxWebpackPlugin.pluginLoader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-wxspreloader" data-v-a2f64316>MpxWebpackPlugin.wxsPreLoader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-fileloader" data-v-a2f64316>MpxWebpackPlugin.fileLoader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-urlloader" data-v-a2f64316>MpxWebpackPlugin.urlLoader</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Request query</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#resolve" data-v-a2f64316>?resolve</a></li><li data-v-a2f64316><a href="compile.html#root" data-v-a2f64316>?root</a></li><li data-v-a2f64316><a href="compile.html#fallback" data-v-a2f64316>?fallback</a></li><li data-v-a2f64316><a href="compile.html#uselocal" data-v-a2f64316>?useLocal</a></li><li data-v-a2f64316><a href="compile.html#isstyle" data-v-a2f64316>?isStyle</a></li><li data-v-a2f64316><a href="compile.html#ispage" data-v-a2f64316>?isPage</a></li><li data-v-a2f64316><a href="compile.html#iscomponent" data-v-a2f64316>?isComponent</a></li><li data-v-a2f64316><a href="compile.html#async" data-v-a2f64316>?async</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="周边拓展" data-v-a2f64316>周边拓展</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>@mpxjs/fetch</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="extend.html#fetch" data-v-a2f64316>fetch</a></li><li data-v-a2f64316><a href="extend.html#canceltoken" data-v-a2f64316>CancelToken</a></li><li data-v-a2f64316><a href="extend.html#xfetch" data-v-a2f64316>XFetch</a></li><li data-v-a2f64316><a href="extend.html#interceptors" data-v-a2f64316>interceptors</a></li><li data-v-a2f64316><a href="extend.html#proxy" data-v-a2f64316>proxy 代理</a></li><li data-v-a2f64316><a href="extend.html#usefetch" data-v-a2f64316>useFetch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>其他</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="extend.html#api-proxy" data-v-a2f64316>api-proxy</a></li><li data-v-a2f64316><a href="extend.html#webview-bridge" data-v-a2f64316>webview-bridge</a></li><li data-v-a2f64316><a href="extend.html#size-report" data-v-a2f64316>size-report</a></li><li data-v-a2f64316><a href="extend.html#i18n" data-v-a2f64316>i18n</a></li></ul></div></div></div> <!----></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/app-config.html b/docs-vuepress/.vuepress/dist/api/app-config.html
new file mode 100644
index 0000000000..15e02d6edd
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/app-config.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>全局配置 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/36.d2c9afa9.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" aria-current="page" class="active sidebar-link">全局配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/app-config.html#usestrictdiff" class="sidebar-link">useStrictDiff</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#ignorewarning" class="sidebar-link">ignoreWarning</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#ignoreproxywhitelist" class="sidebar-link">ignoreProxyWhiteList</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#observeclassinstance" class="sidebar-link">observeClassInstance</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#proxyeventhandler" class="sidebar-link">proxyEventHandler</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#setdatahandler" class="sidebar-link">setDataHandler</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#forceflushsync" class="sidebar-link">forceFlushSync</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#errorhandler" class="sidebar-link">errorHandler</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#webrouteconfig" class="sidebar-link">webRouteConfig</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#webconfig" class="sidebar-link">webConfig</a></li></ul></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="全局配置"><a href="#全局配置" class="header-anchor">#</a> 全局配置</h1> <p><code>Mpx.config</code> 是一个对象，包含 Mpx 的全局配置。可以在启动应用之前修改下列 property：</p> <h2 id="usestrictdiff"><a href="#usestrictdiff" class="header-anchor">#</a> useStrictDiff</h2> <p><code>boolean = false</code></p> <p>每次有数据变更时，是否使用严格的 diff 算法。如果项目中有大数据集的渲染建议使用，可以提升效率。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>useStrictDiff <span class="token operator">=</span> <span class="token boolean">true</span>
+</code></pre></div><blockquote><p>注意：由于微信小程序的bug，同时使用<code>useStrictDiff</code>和增强指令<code>wx:style</code>时，要注意更改数据的方式。如下所示：</p></blockquote> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 入口文件</span>
+<span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>useStrictDiff <span class="token operator">=</span> <span class="token boolean">true</span>
+
+<span class="token comment">// 页面page文件</span>
+<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
+  <span class="token operator">&lt;</span>view<span class="token operator">&gt;</span>
+    <span class="token operator">&lt;</span>view wx<span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{{style}}&quot;</span><span class="token operator">&gt;</span>test<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
+
+<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'18px'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">onLoad</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 当useStrictDiff设置true时，需要用setData的方式设置整个style对象</span>
+          <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'18px'</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span>
+        <span class="token comment">// this.style.color = 'blue' // 当useStrictDiff设置true时，不能使用这种方式，style不会生效</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><h2 id="ignorewarning"><a href="#ignorewarning" class="header-anchor">#</a> ignoreWarning</h2> <p><code>boolean = false</code></p> <p>是否忽略运行时的 warning 信息，默认不忽略。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>ignoreWarning <span class="token operator">=</span> <span class="token boolean">true</span>
+</code></pre></div><h2 id="ignoreproxywhitelist"><a href="#ignoreproxywhitelist" class="header-anchor">#</a> ignoreProxyWhiteList</h2> <p><code>Array&lt;string&gt; = ['id']</code></p> <p>Mpx 实例上的 key（包括data、computed、methods）如果有重名冲突，在<code>ignoreProxyWhiteList</code>配置中的属性会被最新的覆盖；而不在<code>ignoreProxyWhiteList</code>配置中的属性，不会被覆盖。</p> <blockquote><p>只要有重名冲突均会有报错提示。</p></blockquote> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>ignoreConflictWhiteList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'id'</span><span class="token punctuation">,</span> <span class="token string">'test'</span><span class="token punctuation">]</span>
+</code></pre></div><h2 id="observeclassinstance"><a href="#observeclassinstance" class="header-anchor">#</a> observeClassInstance</h2> <p><code>boolean = false</code></p> <p>当需要对 class 对象的数据进行响应性转化，需要开启该选项。</p> <h2 id="proxyeventhandler"><a href="#proxyeventhandler" class="header-anchor">#</a> proxyEventHandler</h2> <p><code>Function</code></p> <p>需要代理的事件的钩子方法，该钩子方法仅对内联传参事件或 <a href="/api/compile.html#forceproxyeventrules">forceProxyEventRules</a> 规则匹配的事件生效。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token function-variable function">proxyEventHandler</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 入参为 event 事件对象</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="setdatahandler"><a href="#setdatahandler" class="header-anchor">#</a> setDataHandler</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">setDataHandler</span><span class="token punctuation">(</span>data<span class="token operator">:</span> object<span class="token punctuation">,</span> target<span class="token operator">:</span> ComponentIns<span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span>
+</code></pre></div><p>页面/组件状态更新时，使用该方法可以对 setData 调用进行监听，可以用来统计 setData 调用次数和数据量的统计，方法的入参是 setData 传输的 data 和当前组件实例。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token function-variable function">setDataHandler</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> comp</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'setData trigger'</span><span class="token punctuation">,</span> data<span class="token punctuation">,</span> comp<span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="forceflushsync"><a href="#forceflushsync" class="header-anchor">#</a> forceFlushSync</h2> <p><code>boolean = false</code></p> <p>Mpx 中更改响应性状态时，最终页面的更新并不是同步立即生效的，而是由 Mpx 将它们缓存在一个队列中， 异步等到下一个 tick 一起执行，如果想将所有队列的执行改为同步执行，我们可以通过该配置来实现。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>forceFlushSync <span class="token operator">=</span> <span class="token boolean">true</span>
+</code></pre></div><h2 id="errorhandler"><a href="#errorhandler" class="header-anchor">#</a> errorHandler</h2> <p><code>Function</code></p> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token function-variable function">errorHandler</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">errmsg<span class="token punctuation">,</span> location<span class="token punctuation">,</span> error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token comment">// errmsg: 框架内部运行报错的报错归类信息，例如当执行一个watch方法报错时，会是 &quot;Unhandled error occurs during execution of watch callback!&quot;</span>
+  <span class="token comment">// location: 具体报错的代码路径，可选项，不一定存在</span>
+  <span class="token comment">// error: 具体的错误堆栈，可选项，不一定存在</span>
+  <span class="token comment">// handle error</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>Mpx 框架运行时报错捕获感知处理函数。</p> <ul><li>Mpx 框架生命周期执行错误；</li> <li>Mpx 中的 computed、watch 等内置方法执行报错；</li> <li>Mpx 框架的运行时的检测报错，例如存在目标平台不支持的属性，入参出参类型错误等；</li></ul> <p>同时被捕获的错误会通过 console.error 输出。</p> <h2 id="webrouteconfig"><a href="#webrouteconfig" class="header-anchor">#</a> webRouteConfig</h2> <p>Mpx 通过 config 暴露出 webRouteConfig 配置项，在 web 环境可以对路由进行配置。
+此配置后续将被废弃，请使用 webConfig 进行配置</p> <ul><li><strong>用法</strong>:</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>webRouteConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'history'</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="webconfig"><a href="#webconfig" class="header-anchor">#</a> webConfig</h2> <p>web 环境下的一些配置，如路由模式，页面切换动画效果等</p> <ul><li><strong>用法</strong>:</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 修改路由模式</span>
+mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>webConfig<span class="token punctuation">.</span>routeConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'history'</span>
+<span class="token punctuation">}</span>
+<span class="token comment">// 禁用页面切换动画</span>
+mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>webConfig<span class="token punctuation">.</span>disablePageTransition <span class="token operator">=</span> <span class="token boolean">true</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/api/global-api.html">
+        全局 API
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/36.d2c9afa9.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/builtIn.html b/docs-vuepress/.vuepress/dist/api/builtIn.html
new file mode 100644
index 0000000000..440c70c028
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/builtIn.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>内建组件 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/37.4e1eee2c.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" aria-current="page" class="active sidebar-link">内建组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/builtIn.html#component" class="sidebar-link">component</a></li><li class="sidebar-sub-header"><a href="/api/builtIn.html#slot" class="sidebar-link">slot</a></li></ul></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="内建组件"><a href="#内建组件" class="header-anchor">#</a> 内建组件</h1> <h2 id="component"><a href="#component" class="header-anchor">#</a> component</h2> <ul><li><p>is <code>string</code> : 动态渲染组件，通过改变<code>is</code>的值，来渲染不同的组件</p></li> <li><p>range <code>string</code> : 使用 range 来指定可能渲染的组件，不传递时则为 全局注册 + usingComponents 中注册的所有组件，存在多个组件时使用逗号 <code>,</code> 分隔</p></li></ul> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token comment">&lt;!-- ComponentName 是在全局或者组件中完成注册的组件名称 --&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ComponentName}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
+
+  <span class="token comment">&lt;!-- 只会展示 compA 或者 compB 组件 --&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ComponentName}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">range</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>compA,compB<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>参考</strong>：<a href="/guide/basic/component.html#动态组件">动态组件</a></p> <h2 id="slot"><a href="#slot" class="header-anchor">#</a> slot</h2> <ul><li>name <code>string</code> : 用于命名插槽</li></ul> <p><code>&lt;slot&gt;</code> 元素作为组件模板中的内容分发插槽，<code>&lt;slot&gt;</code>元素自身将被替换。</p> <p>详细用法，可参考下面的链接。</p> <p><strong>参考</strong>：<a href="/guide/basic/component.html#slot">slot</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/api/compile.html" class="prev">
+        编译构建
+      </a></span> <span class="next"><a href="/api/reactivity-api.html">
+        响应式 API
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/37.4e1eee2c.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/compile.html b/docs-vuepress/.vuepress/dist/api/compile.html
new file mode 100644
index 0000000000..58c276a54b
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/compile.html
@@ -0,0 +1,1214 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>编译构建 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/38.7826170e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" aria-current="page" class="active sidebar-link">编译构建</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#类型定义" class="sidebar-link">类型定义</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#rules" class="sidebar-link">Rules</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin" class="sidebar-link">MpxWebpackPlugin</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#mode" class="sidebar-link">mode</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#srcmode" class="sidebar-link">srcMode</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#moderules" class="sidebar-link">modeRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#externalclasses" class="sidebar-link">externalClasses</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#resolvemode" class="sidebar-link">resolveMode</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#projectroot" class="sidebar-link">projectRoot</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#writemode" class="sidebar-link">writeMode</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#autoscoperules" class="sidebar-link">autoScopeRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#forcedisableproxyctor" class="sidebar-link">forceDisableProxyCtor</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#transmpxrules" class="sidebar-link">transMpxRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#forceproxyeventrules" class="sidebar-link">forceProxyEventRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#defs" class="sidebar-link">defs</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#attributes" class="sidebar-link">attributes</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#externals" class="sidebar-link">externals</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mininpmpackage" class="sidebar-link">miniNpmPackage</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#forceusepagector" class="sidebar-link">forceUsePageCtor</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#transrpxrules" class="sidebar-link">transRpxRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#postcssinlineconfig" class="sidebar-link">postcssInlineConfig</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#decodehtmltext" class="sidebar-link">decodeHTMLText</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#nativeconfig" class="sidebar-link">nativeConfig</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#webconfig" class="sidebar-link">webConfig</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#i18n" class="sidebar-link">i18n</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#auditresource" class="sidebar-link">auditResource</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#subpackagemodulesrules" class="sidebar-link">subpackageModulesRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#generatebuildmap" class="sidebar-link">generateBuildMap</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#autovirtualhostrules" class="sidebar-link">autoVirtualHostRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#partialcompilerules" class="sidebar-link">partialCompileRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#optimizerenderrules" class="sidebar-link">optimizeRenderRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#asyncsubpackagerules" class="sidebar-link">asyncSubpackageRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#retryrequireasync" class="sidebar-link">retryRequireAsync</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#disablerequireasync" class="sidebar-link">disableRequireAsync</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#optimizesize" class="sidebar-link">optimizeSize</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-static-methods" class="sidebar-link">MpxWebpackPlugin static methods</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-loader" class="sidebar-link">MpxWebpackPlugin.loader</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-pluginloader" class="sidebar-link">MpxWebpackPlugin.pluginLoader</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-wxspreloader" class="sidebar-link">MpxWebpackPlugin.wxsPreLoader</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-fileloader" class="sidebar-link">MpxWebpackPlugin.fileLoader</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-urlloader" class="sidebar-link">MpxWebpackPlugin.urlLoader</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-getpageentry" class="sidebar-link">MpxWebpackPlugin.getPageEntry</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-getcomponententry" class="sidebar-link">MpxWebpackPlugin.getComponentEntry</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-getnativeentry" class="sidebar-link">MpxWebpackPlugin.getNativeEntry</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxunocssplugin" class="sidebar-link">MpxUnocssPlugin</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#unofile" class="sidebar-link">unoFile</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mincount" class="sidebar-link">minCount</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#styleisolation" class="sidebar-link">styleIsolation</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#scan" class="sidebar-link">scan</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#escapemap" class="sidebar-link">escapeMap</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#root" class="sidebar-link">root</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#transformcss" class="sidebar-link">transformCSS</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#transformgroups" class="sidebar-link">transformGroups</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#config" class="sidebar-link">config</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#configfiles" class="sidebar-link">configFiles</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#commentconfig" class="sidebar-link">commentConfig</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxunocssbase" class="sidebar-link">MpxUnocssBase</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#basefontsize" class="sidebar-link">baseFontSize</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#preflight" class="sidebar-link">preflight</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#dark" class="sidebar-link">dark</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#attributifypseudo" class="sidebar-link">attributifyPseudo</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#variableprefix" class="sidebar-link">variablePrefix</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/compile.html#request-query" class="sidebar-link">Request query</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#resolve" class="sidebar-link">?resolve</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#root" class="sidebar-link">?root</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#fallback" class="sidebar-link">?fallback</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#uselocal" class="sidebar-link">?useLocal</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#isstyle" class="sidebar-link">?isStyle</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#ispage" class="sidebar-link">?isPage</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#iscomponent" class="sidebar-link">?isComponent</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#async" class="sidebar-link">?async</a></li></ul></li></ul></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="编译构建"><a href="#编译构建" class="header-anchor">#</a> 编译构建</h1> <p>对于使用 <code>@mpxjs/cli@3.x</code> 脚手架初始化的项目而言，编译构建相关的配置统一收敛至项目根目录下的 <code>vue.config.js</code> 进行配置。一个新项目初始化的 <code>vue.config.js</code> 如下图，相较于 <code>@mpxjs/cli@2.x</code> 版本，在新的初始化项目当中原有的编译构建配置都收敛至 cli 插件当中进行管理和维护，同时还对外暴露相关的接口或者 api 使得开发者能自定义修改 cli 插件当中默认的配置。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token comment">// mpx webpack plugin options</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token comment">// @mpxjs/unocss-plugin 相关的配置</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>对于使用 <code>@mpxjs/cli@2.x</code> 脚手架初始化的项目，编译构建配置涉及到 mpx 插件相关的配置主要是在 <code>config</code> 目录下 <code>mpxPlugin.conf.js</code>，涉及到 webpack 本身的配置主要是在 <code>build</code> 目录下。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// config/mpxPlugin.conf.js</span>
+module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> <span class="token punctuation">{</span>
+    <span class="token comment">// mpx webpack plugin options</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="类型定义"><a href="#类型定义" class="header-anchor">#</a> 类型定义</h2> <p>为了便于对编译配置的数据类型进行准确地描述，我们在这里对一些常用的配置类型进行定义</p> <h3 id="rules"><a href="#rules" class="header-anchor">#</a> Rules</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">Condition</span> <span class="token operator">=</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>resourcePath<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span> <span class="token operator">|</span> RegExp
+
+<span class="token keyword">interface</span> <span class="token class-name">Rules</span> <span class="token punctuation">{</span>
+  include<span class="token operator">?</span><span class="token operator">:</span> Condition <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>Condition<span class="token operator">&gt;</span>
+  exclude<span class="token operator">?</span><span class="token operator">:</span> Condition <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>Condition<span class="token operator">&gt;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="mpxwebpackplugin"><a href="#mpxwebpackplugin" class="header-anchor">#</a> MpxWebpackPlugin</h2> <p>Mpx 编译构建跨平台小程序和 web 的 webpack 主插件，安装示例如下：</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @mpxjs/webpack-plugin
+<span class="token function">pnpm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @mpxjs/webpack-plugin
+<span class="token function">yarn</span> <span class="token function">add</span> <span class="token parameter variable">-D</span> @mpxjs/webpack-plugin
+</code></pre></div><p>使用示例如下：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token comment">// mpx webpack plugin options</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>MpxWebpackPlugin支持传入以下配置：</p> <h3 id="mode"><a href="#mode" class="header-anchor">#</a> mode</h3> <p><code>'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'jd' | 'dd' | 'qa' | 'web' = 'wx'</code></p> <p>mode 为 Mpx 编译的目标平台， 目前支持的有微信小程序(wx)\支付宝小程序(ali)\百度小程序(swan)\头条小程序(tt)\QQ 小程序(qq)\京东小程序(jd)\滴滴小程序(dd)\快应用(qa)\H5 页面(web)。</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在 @mpxjs/cli@3.x 版本当中，通过在 <code>npm script</code> 当中定义 <code>targets</code> 来设置目标平台</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 项目 package.json</span>
+<span class="token punctuation">{</span>
+  <span class="token string-property property">&quot;script&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;build:cross&quot;</span><span class="token operator">:</span> <span class="token string">&quot;mpx-cli-service build --targets=wx,ali&quot;</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div></div> <h3 id="srcmode"><a href="#srcmode" class="header-anchor">#</a> srcMode</h3> <p><code>'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'jd' | 'dd' | 'qa' = 'wx'</code></p> <p>默认和 <a href="#mode">mode</a> 一致。，当 srcMode 和 mode 不一致时，会读取相应的配置对项目进行编译和运行时的转换。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span> <span class="token comment">// 根据项目初始化所选平台来设定</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>暂时只支持微信为源 mode 做跨平台，为其他时，mode 必须和 srcMode 保持一致。</p></div> <h3 id="moderules"><a href="#moderules" class="header-anchor">#</a> modeRules</h3> <p><code>{ [key: string]: Rules }</code></p> <p>批量指定文件mode，用于条件编译场景下使用某些单小程序平台的库时批量标记这些文件的mode为对应平台，而不再走转换规则。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">modeRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">ali</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/vant-aliapp'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="externalclasses"><a href="#externalclasses" class="header-anchor">#</a> externalClasses</h3> <p><code>Array&lt;string&gt;</code></p> <p>定义若干个外部样式类，这些将会覆盖元素原有的样式。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">externalClasses</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'custom-class'</span><span class="token punctuation">,</span> <span class="token string">'i-class'</span><span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>抹平支付宝和微信之间的差异，当使用了微信 <strong>externalClasses</strong> 语法时，跨端输出需要在 @mpxjs/webpack-plugin 的配置中添加此配置来辅助框架进行转换。</p></div> <h3 id="resolvemode"><a href="#resolvemode" class="header-anchor">#</a> resolveMode</h3> <p><code>'webpack' | 'native' = 'webpack'</code></p> <p>指定resolveMode，默认webpack，更便于引入npm包中的页面/组件等资源。若想编写时和原生保持一致或兼容已有原生项目，可设为native，此时需要提供<a href="#projectroot">projectRoot</a>以指定项目根目录，且使用npm资源时需在前面加<code>~</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">resolveMode</span><span class="token operator">:</span> <span class="token string">'webpack'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="projectroot"><a href="#projectroot" class="header-anchor">#</a> projectRoot</h3> <p><code>string</code></p> <p>当resolveMode为native时需通过该字段指定项目根目录。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+         <span class="token literal-property property">resolveMode</span><span class="token operator">:</span> <span class="token string">'native'</span><span class="token punctuation">,</span>
+         <span class="token literal-property property">projectRoot</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../src'</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="writemode"><a href="#writemode" class="header-anchor">#</a> writeMode</h3> <p><code>'full' | 'change' = 'change'</code></p> <p>webpack 的输出默认是全量输出，而小程序开发者工具不关心文件是否真正发生了变化。设置为 change 时，Mpx 在 watch 模式下将内部 diff 一次，只会对内容发生变化的文件进行写入，以提升小程序开发者工具编译性能。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+         <span class="token literal-property property">writeMode</span><span class="token operator">:</span> <span class="token string">'change'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="autoscoperules"><a href="#autoscoperules" class="header-anchor">#</a> autoScopeRules</h3> <p><a href="#rules"><code>Rules</code></a></p> <p>是否需要对样式加 scope ，目前只有支付宝小程序平台没有样式隔离，因此该部分内容也只对支付宝小程序平台生效。提供 include 和 exclude 以精确控制对哪些文件进行样式隔离，哪些不隔离，和webpack的rules规则相同。也可以通过在 style 代码块上声明 scoped 进行。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+         <span class="token literal-property property">autoScopeRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+           <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'../src'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+           <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'../node_modules/vant-aliapp'</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token comment">// 比如一些组件库本来就是为支付宝小程序编写的，应该已经考虑过样式隔离，就不需要再添加</span>
+         <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="forcedisableproxyctor"><a href="#forcedisableproxyctor" class="header-anchor">#</a> forceDisableProxyCtor</h3> <p><code>boolean = false</code></p> <p>用于控制在跨平台输出时对实例构造函数（<code>App</code> | <code>Page</code> | <code>Component</code> | <code>Behavior</code>）进行代理替换以抹平平台差异。当配置 <code>forceDisableProxyCtor</code> 为 true 时，会强行取消平台差异抹平逻辑，开发时需针对输出到不同平台进行条件判断。</p> <h3 id="transmpxrules"><a href="#transmpxrules" class="header-anchor">#</a> transMpxRules</h3> <p><a href="#rules"><code>Rules</code></a></p> <p>是否转换 wx / my 等全局对象为 Mpx 对象，</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">transMpxRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token function-variable function">include</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@mpxjs'</span><span class="token punctuation">]</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="forceproxyeventrules"><a href="#forceproxyeventrules" class="header-anchor">#</a> forceProxyEventRules</h3> <p><a href="#rules"><code>Rules</code></a></p> <p>强制代理规则内配置的事件。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">forceProxyEventRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'bindtap'</span><span class="token punctuation">]</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="defs"><a href="#defs" class="header-anchor">#</a> defs</h3> <p><code>object</code></p> <p>给模板、js、json、style中定义一些全局常量。一般用于区分平台/环境。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">defs</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">__env__</span><span class="token operator">:</span> <span class="token string">'mini'</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>在模板中使用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{__env__}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>在js中使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> env <span class="token operator">=</span> __env__<span class="token punctuation">;</span>
+</code></pre></div><p>在style中使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/* @mpx-if (__env__ === 'mini') */</span>
+<span class="token punctuation">.</span>color <span class="token punctuation">{</span>
+  <span class="token literal-property property">background</span><span class="token operator">:</span> red<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token comment">/* @mpx-endif */</span>
+</code></pre></div><p>在json中使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script name<span class="token operator">=</span><span class="token string">'json'</span><span class="token operator">&gt;</span>
+  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;a&quot;</span><span class="token operator">:</span> __env__
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><blockquote><p>注意：这里定义之后使用的时候是按照全局变量来使用，而非按照<code>process.env.KEY</code>这样的形式</p></blockquote> <h3 id="attributes"><a href="#attributes" class="header-anchor">#</a> attributes</h3> <p><code>Array&lt;string&gt; = ['image:src', 'audio:src', 'video:src', 'cover-image:src', 'import:src', 'include:src']</code></p> <p><code>Mpx</code> 提供了可以给自定义标签设置资源的功能，配置该属性后，即可在目标标签中使用 <code>:src</code> 加载相应资源文件</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'customTag:src'</span><span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>customTag</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>https://www....../avator.png'<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>customTag</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>该属性可通过 <code>MpxWebpackPlugin</code> 配置，也可以通过配置 <code>WxmlLoader</code>，后者优先级高。</p></div> <h3 id="externals"><a href="#externals" class="header-anchor">#</a> externals</h3> <p><code>Array&lt;string&gt;</code></p> <p>目前仅支持微信小程序 weui 组件库通过 useExtendedLib 扩展库的方式引入，这种方式引入的组件将不会计入代码包大小。配置 externals 选项，Mpx 将不会解析 weui 组件的路径并打包。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">externals</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'weui'</span><span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token comment">// app.mpx json部分</span>
+  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;useExtendedLib&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;weui&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 在 page 中使用 weui 组件 --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'wx'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mp-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>play<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>black<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{25}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showDialog<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mp-icon</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mp-dialog</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span> <span class="token attr-name">show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{dialogShow}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindbuttontap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tapDialogButton<span class="token punctuation">&quot;</span></span> <span class="token attr-name">buttons</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{buttons}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>test content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mp-dialog</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span><span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">dialogShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">showOneButtonDialog</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">buttons</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'取消'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'确定'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">tapDialogButton</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>dialogShow <span class="token operator">=</span> <span class="token boolean">false</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>showOneButtonDialog <span class="token operator">=</span> <span class="token boolean">false</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token function">showDialog</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>dialogShow <span class="token operator">=</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">const</span> wxComponents <span class="token operator">=</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;mp-icon&quot;</span><span class="token operator">:</span> <span class="token string">&quot;weui-miniprogram/icon/icon&quot;</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;mp-dialog&quot;</span><span class="token operator">:</span> <span class="token string">&quot;weui-miniprogram/dialog/dialog&quot;</span>
+  <span class="token punctuation">}</span>
+  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> __mpx_mode__ <span class="token operator">===</span> <span class="token string">'wx'</span>
+      <span class="token operator">?</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> wxComponents<span class="token punctuation">)</span>
+      <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>参考</strong>：<a href="https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html" target="_blank">weui组件库</a></p> <h3 id="mininpmpackage"><a href="#mininpmpackage" class="header-anchor">#</a> miniNpmPackage</h3> <p><code>Array&lt;string&gt;</code></p> <p>微信小程序官方提供了<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html" target="_blank" rel="noopener noreferrer">发布小程序 npm 包的约束<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。
+部分小程序npm包，如<a href="https://vant-contrib.gitee.io/vant-weapp/#/quickstart" target="_blank" rel="noopener noreferrer">vant组件库<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>官方文档使用说明，引用资源并不会包含miniprogram所指定的目录
+如 &quot;@vant/weapp/button/index&quot;，导致 <code>Mpx</code> 解析路径失败。
+<code>Mpx</code>为解决这个问题，提供miniNpmPackage字段供用户配置需要解析的小程序npm包。miniNpmPackage对应的数组值为npm包对应的package.json中的name字段。
+<code>Mpx</code>解析规则如下:</p> <ol><li>如package.json中有miniprogram字段，则会默认拼接miniprogram对应的值到资源路径中</li> <li>如package.json中无miniprogram字段，但配置了miniNpmPackage，则默认会拼接miniprogram_dist目录</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">miniNpmPackage</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@vant/weapp'</span><span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="forceusepagector"><a href="#forceusepagector" class="header-anchor">#</a> forceUsePageCtor</h3> <p><code>Boolean = false</code></p> <p>为了获取更丰富的生命周期来进行更加完善的增强处理，在非支付宝小程序环境下，<code>Mpx</code> 默认会使用 <code>Conponent</code> 构造器来创建页面。将该值设置为 <code>true</code> 时，会强制使用 <code>Page</code> 构造器创建页面。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">forceUsePageCtor</span><span class="token operator">:</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="transrpxrules"><a href="#transrpxrules" class="header-anchor">#</a> transRpxRules</h3> <p><code>Array&lt;object&gt; | object</code></p> <ul><li><code>option.mode</code> 可选值有 none/only/all，分别是不启用/只对注释内容启用/只对非注释内容启用</li> <li><code>option.designWidth</code> 设计稿宽度，默认值就是750，可根据需要修改</li> <li><code>option.include</code> 同webpack的include规则</li> <li><code>option.exclude</code> 同webpack的exclude规则</li> <li><code>option.comment</code> rpx注释，建议使用 'use px'/'use rpx'，当 mode 为 all 时默认值为 use px，mode 为 only 时默认值为 'use rpx'</li></ul> <p>为了处理某些IDE中不支持<code>rpx</code>单位的问题，Mpx 提供了一个将 px 转换为 rpx 的功能。支持通过注释控制行级、块级的是否转换，支持局部使用，支持不同依赖分别使用不用的转换规则等灵活的能力。<code>transRpxRules</code>可以是一个对象，也可以是多个这种对象组成的数组。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">transRpxRules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+          <span class="token punctuation">{</span>
+            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'only'</span><span class="token punctuation">,</span> <span class="token comment">// 只对注释为'use rpx'的块儿启用转换rpx</span>
+            <span class="token literal-property property">comment</span><span class="token operator">:</span> <span class="token string">'use rpx'</span><span class="token punctuation">,</span> <span class="token comment">// mode为'only'时，默认值为'use rpx'</span>
+            <span class="token literal-property property">include</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">exclude</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'lib'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">designWidth</span><span class="token operator">:</span> <span class="token number">750</span>
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+          <span class="token punctuation">{</span>
+            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span> <span class="token comment">// 所有样式都启用转换rpx，除了注释为'use px'的样式不转换</span>
+            <span class="token literal-property property">comment</span><span class="token operator">:</span> <span class="token string">'use px'</span><span class="token punctuation">,</span> <span class="token comment">// mode为'all'时，默认值为'use px'</span>
+            <span class="token literal-property property">include</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/@didi/mpx-sec-guard'</span><span class="token punctuation">)</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="应用场景及相应配置"><a href="#应用场景及相应配置" class="header-anchor">#</a> 应用场景及相应配置</h4> <p>接下来我们来看下一些应用场景及如何配置。如果是用脚手架生成的项目，在<code>mpx.plugin.conf.js</code>里找到<code>transRpxRules</code>，应该已经有预设的<code>transRpxRules</code>选项，按例修改即可。</p> <p>三种场景分别是 <a href="#%E5%9C%BA%E6%99%AF%E4%B8%80">普通使用</a> ， <a href="#%E5%9C%BA%E6%99%AF%E4%BA%8C">只对某些特殊样式转换</a> ， <a href="#%E5%9C%BA%E6%99%AF%E4%B8%89">不同路径分别配置规则</a></p> <h4 id="场景一"><a href="#场景一" class="header-anchor">#</a> 场景一</h4> <p>设计师给的稿是2倍图，分辨率750px。或者更高倍图。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">transRpxRules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+          <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">designWidth</span><span class="token operator">:</span> <span class="token number">750</span> <span class="token comment">// 如果是其他倍，修改此值为设计稿的宽度即可</span>
+        <span class="token punctuation">}</span><span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="场景二"><a href="#场景二" class="header-anchor">#</a> 场景二</h4> <p>大部分样式都用px下，某些元素期望用rpx。或者反过来。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">transRpxRules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+          <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'only'</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">comment</span><span class="token operator">:</span> <span class="token string">'use rpx'</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">designWidth</span><span class="token operator">:</span> <span class="token number">750</span> <span class="token comment">// 设计稿宽度</span>
+        <span class="token punctuation">}</span><span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>mpx的rpx注释能帮助你仅为部分类或者部分样式启用rpx转换，细节请看下方附录。</p> <h4 id="场景三"><a href="#场景三" class="header-anchor">#</a> 场景三</h4> <p>使用了第三方组件，它的设计宽度和主项目不一致，期望能设置不同的转换规则</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">transRpxRules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+          <span class="token punctuation">{</span>
+            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'only'</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">designWidth</span><span class="token operator">:</span> <span class="token number">750</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">comment</span><span class="token operator">:</span> <span class="token string">'use rpx'</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span>
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+          <span class="token punctuation">{</span>
+            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">designWidth</span><span class="token operator">:</span> <span class="token number">1280</span><span class="token punctuation">,</span> <span class="token comment">// 对iview单独使用一个不同的designWidth</span>
+            <span class="token literal-property property">include</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/iview-weapp'</span><span class="token punctuation">)</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><blockquote><p>注意事项：转换规则是不可以对一个文件做多次转换的，会出错，所以一旦被一个规则命中后就不会再次命中另一个规则，include 和 exclude 的编写需要注意先后顺序，就比如上面这个配置，如果第一个规则 include 的是 '/' 即整个项目，iview-weapp 里的样式就无法命中第二条规则了。</p></blockquote> <h4 id="transrpxrules附录"><a href="#transrpxrules附录" class="header-anchor">#</a> transRpxRules附录</h4> <ul><li><strong>designWidth</strong></li></ul> <p>设计稿宽度，单位为<code>px</code>。默认值为<code>750px</code>。</p> <p><code>mpx</code>会基于小程序标准的屏幕宽度<code>baseWidth 750rpx</code>，与<code>option.designWidth</code>计算出一个转换比例<code>transRatio</code>。</p> <p>转换比例的计算方式为<code>transRatio = (baseWidth / designWidth)</code>，精度为小数点后2位四舍五入。</p> <p>所有生效的<code>rpx注释样式</code>中的px会乘上<code>transRatio</code>得出最终的 rpx 值。</p> <p>例如：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 转换前：designWidth = 1280 */</span>
+<span class="token selector">.btn</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">/* 转换后: transRatio = 0.59 */</span>
+<span class="token selector">.btn</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 118rpx<span class="token punctuation">;</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 59rpx<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><ul><li><strong>comment: rpx 注释样式</strong></li></ul> <p>根据<code>rpx注释</code>的位置，<code>mpx</code>会将<code>一段css规则</code>或者<code>一条css声明</code>视为<code>rpx注释样式</code>。</p> <p>开发者可以声明一段 rpx 注释样式，提示编译器是否转换这段 css 中的 px。</p> <p>例如：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+  <span class="token comment">/* use rpx */</span>
+  <span class="token selector">.not-translate-a</span> <span class="token punctuation">{</span>
+    <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+    <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+  <span class="token selector">.not-translate-b</span> <span class="token punctuation">{</span>
+    <span class="token comment">/* use rpx */</span>
+    <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+    <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+  <span class="token selector">.translate-a</span> <span class="token punctuation">{</span>
+    <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+    <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+  <span class="token selector">.translate-b</span> <span class="token punctuation">{</span>
+    <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+    <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><blockquote><p>第一个注释位于一个<code>选择器</code>前，是一个<code>css规则注释</code>，整个规则都会被视为<code>rpx注释样式</code></p></blockquote> <blockquote><p>第二个注释位于一个<code>css声明</code>前，是一个<code>css声明注释</code>，只有<code>font-size: 100px</code>会被视为<code>rpx注释样式</code></p></blockquote> <blockquote><p><code>transRpx = only</code>模式下，只有两部分<code>rpx注释样式</code>会转rpx。</p></blockquote> <h3 id="postcssinlineconfig"><a href="#postcssinlineconfig" class="header-anchor">#</a> postcssInlineConfig</h3> <p><code>{options? : PostcssOptions, plugins? : PostcssPlugin[], mpxPrePlugins? : PostcssPlugin[], ignoreConfigFile : Boolean}</code></p> <p>使用类似于 postcss.config.js 的语法书写 postcss 的配置文件。用于定义 Mpx 对于组件/页面样式进行 postcss 处理时的配置， ignoreConfigFile 传递为 true 时会忽略项目中的 postcss 配置文件 。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">postcssInlineConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+            <span class="token comment">// require('postcss-import'),</span>
+            <span class="token comment">// require('postcss-preset-env'),</span>
+            <span class="token comment">// require('cssnano'),</span>
+            <span class="token comment">// require('autoprefixer')</span>
+          <span class="token punctuation">]</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>注意</strong>：默认添加的 postcss 插件均会在<code>mpx的内置插件</code>（例如如rpx插件等）之后处理。如需使配置的插件优先于内置插件，可以在 <code>postcssInlineConfig</code> 中添加 <code>mpxPrePlugins</code> 配置：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">postcssInlineConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+            <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-import'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+            <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-preset-env'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+          <span class="token punctuation">]</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">mpxPrePlugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+            <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'cssnano'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+            <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'autoprefixer'</span><span class="token punctuation">)</span>
+          <span class="token punctuation">]</span>
+          <span class="token comment">// 以下写法同理</span>
+          <span class="token comment">// mpxPrePlugins: {</span>
+          <span class="token comment">//   'cssnano': {},</span>
+          <span class="token comment">//   'autoprefixer': {}</span>
+          <span class="token comment">// }</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><code>postcss.config.js</code> 中配置同理：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// postcss.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-import'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-preset-env'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mpxPrePlugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'cssnano'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'autoprefixer'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+
+</code></pre></div><p>在上面这个例子当中，postcss 插件处理的最终顺序为：<code>cssnano</code> -&gt; <code>autoprefixer</code> -&gt; <code>mpx内置插件</code> -&gt; <code>postcss-import</code> -&gt; <code>postcss-preset-env</code></p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>注意：在 <code>mpxPrePlugins</code> 中配置的 postcss 插件如果不通过 mpx 进行处理，那么将不会生效。</p></div> <h3 id="decodehtmltext"><a href="#decodehtmltext" class="header-anchor">#</a> decodeHTMLText</h3> <p><code>boolean = false</code></p> <p>设置为 true 时在模板编译时对模板中的 text 内容进行 decode</p> <h3 id="nativeconfig"><a href="#nativeconfig" class="header-anchor">#</a> nativeConfig</h3> <p><code>{cssLangs: string[]}</code></p> <p>为原生多文件写法添加css预处理语言支持，用于优先搜索预编译器后缀的文件，按 cssLangs 中的声明顺序查找。默认按照 css , less , stylus ,  scss , sass 的顺序</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">nativeConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">cssLangs</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'css'</span><span class="token punctuation">,</span> <span class="token string">'less'</span><span class="token punctuation">,</span> <span class="token string">'stylus'</span><span class="token punctuation">,</span> <span class="token string">'scss'</span><span class="token punctuation">,</span> <span class="token string">'sass'</span><span class="token punctuation">]</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="webconfig"><a href="#webconfig" class="header-anchor">#</a> webConfig</h3> <p><code>{transRpxFn(match:string, $1:number): string}</code></p> <p>transRpxFn 配置用于自定义输出 web 时对于 rpx 样式单位的转换逻辑，常见的方式有转换为 vw 或转换为 rem</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">webConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token function-variable function">transRpxFn</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">match<span class="token punctuation">,</span> $1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            <span class="token keyword">if</span> <span class="token punctuation">(</span>$1 <span class="token operator">===</span> <span class="token string">'0'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> $1
+            <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>$1 <span class="token operator">*</span> <span class="token operator">+</span><span class="token punctuation">(</span><span class="token number">100</span> <span class="token operator">/</span> <span class="token number">750</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">vw</span><span class="token template-punctuation string">`</span></span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="i18n"><a href="#i18n" class="header-anchor">#</a> i18n</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token string-property property">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+              <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} world'</span>
+              <span class="token punctuation">}</span>
+            <span class="token punctuation">}</span><span class="token punctuation">,</span>
+            <span class="token string-property property">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+              <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} 世界'</span>
+              <span class="token punctuation">}</span>
+            <span class="token punctuation">}</span>
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+          <span class="token comment">// messagesPath: path.resolve(__dirname, '../src/i18n.js')</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>Mpx 支持国际化，底层实现依赖类<code>wxs</code>能力，通过指定语言标识和语言包，可实现多语言之间的动态切换。可配置项包括locale、messages、messagesPath。</p> <h4 id="i18n-locale"><a href="#i18n-locale" class="header-anchor">#</a> i18n.locale</h4> <p><code>string</code></p> <p>通过配置 locale 属性，可指定语言标识，默认值为 'zh-CN'</p> <h4 id="i18n-messages"><a href="#i18n-messages" class="header-anchor">#</a> i18n.messages</h4> <p><code>object</code></p> <p>通过配置 messages 属性，可以指定项目语言包，Mpx 会依据语言包对象定义进行转换，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token string-property property">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">'title'</span><span class="token operator">:</span> <span class="token string">'DiDi Chuxing'</span><span class="token punctuation">,</span>
+      <span class="token string-property property">'subTitle'</span><span class="token operator">:</span> <span class="token string">'Make travel better'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token string-property property">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">'title'</span><span class="token operator">:</span> <span class="token string">'滴滴出行'</span><span class="token punctuation">,</span>
+      <span class="token string-property property">'subTitle'</span><span class="token operator">:</span> <span class="token string">'让出行更美好'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h4 id="i18n-messagespath"><a href="#i18n-messagespath" class="header-anchor">#</a> i18n.messagesPath</h4> <p><code>string</code></p> <p>为便于开发，Mpx 还支持配置语言包资源路径 messagesPath 来代替 messages 属性，Mpx 会从该路径下的 js 文件导出语言包对象。如果同时配置 messages 和 messagesPath 属性，Mpx 会优先设定 messages 为 i18n 语言包资源。</p> <p>详细介绍及使用见<a href="/guide/tool/i18n.html">工具-国际化i18n</a>一节。</p> <h3 id="auditresource"><a href="#auditresource" class="header-anchor">#</a> auditResource</h3> <p><code>'component' | boolean = false</code></p> <p>检查资源输出情况，如果置为true，则会提示有哪些资源被同时输出到了多个分包，可以检查是否应该放进主包以消减体积，设置为 <code>'component'</code> 的话，则只检查组件资源是否被输出到多个分包。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">auditResource</span><span class="token operator">:</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="subpackagemodulesrules"><a href="#subpackagemodulesrules" class="header-anchor">#</a> subpackageModulesRules</h3> <p><code>object</code></p> <p>是否将多分包共用的模块分别输出到各自分包中，匹配规则为include匹配到且未被exclude匹配到的资源</p> <p>依据微信小程序的分包策略，多个分包使用到的 js 模块会打入主包当中，但在大型分包较多的项目中，该策略极易将大量的模块打入主包，从而使主包体积大小超出2M限制，该配置项提供给开发者自主抉择，可将部分模块冗余输出至多个分包，从而控制主包体积不超限</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">subpackageModulesRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@someNpm/name/src/api/*.js'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@someNpm/name/src/api/module.js'</span><span class="token punctuation">]</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><blockquote><p>tips: 该功能是将模块分别放入多个分包，模块状态不可复用，使用前要依据模块功能做好评估，例如全局store就不适用该功能</p></blockquote> <h3 id="generatebuildmap"><a href="#generatebuildmap" class="header-anchor">#</a> generateBuildMap</h3> <p><code>boolean = false</code></p> <p>是否生成构建结果与源码之间的映射文件。用于单元测试等场景。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">generateBuildMap</span><span class="token operator">:</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>参考</strong>：<a href="/guide/tool/unit-test.html">单元测试</a></p> <h3 id="autovirtualhostrules"><a href="#autovirtualhostrules" class="header-anchor">#</a> autoVirtualHostRules</h3> <p><a href="#rules"><code>Rules</code></a>
+批量配置是否虚拟化组件节点，对应微信中<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html" target="_blank" rel="noopener noreferrer"><code>VirtualHost</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 。默认不开启，开启后也将抹平支付宝小程序中的表现差异。提供 include 和 exclude 以精确控制对哪些文件开启VirtualHost，哪些不开启。和webpack的rules规则相同。</p> <p>默认情况下，自定义组件本身的那个节点是一个“普通”的节点，使用时可以在这个节点上设置 <code>class</code> 、<code>style</code> 、动画、 flex 布局等，就如同普通的 view 组件节点一样。但有些时候，自定义组件并不希望这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定。这种情况下，可以将这个自定义组件设置为“虚拟的”。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">autoVirtualHostRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'../src'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'../components/other'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>注意：</strong> 建议使用<code>autoVirtualHostRules</code>配置项，不要使用微信组件内部的 options virtualHost 配置，因为组件内部的 options virtualHost 在跨平台输出时无法进行兼容抹平处理。</p> <h3 id="partialcompilerules"><a href="#partialcompilerules" class="header-anchor">#</a> partialCompileRules</h3> <p><code>{ include: string | RegExp | Function | Array&lt;string | RegExp | Function&gt; }</code></p> <p>在大型的小程序开发当中，全量打包页面耗时非常长，往往在<code>开发过程</code>中仅仅只需用到几个 pages 而已，该配置项支持打包指定的小程序页面。</p> <p><strong>注意：</strong> @mpxjs/webpack-plugin@2.9.41版本之前该配置为 partialCompile。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token comment">// include 可以是正则、字符串、函数、数组</span>
+        <span class="token literal-property property">partialCompileRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token string">'/project/pages'</span><span class="token punctuation">,</span> <span class="token comment">// 文件路径包含 '/project/pages' 的页面都会被打包</span>
+          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">pages\/internal</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 文件路径能与正则匹配上的页面都会被打包</span>
+          <span class="token function">include</span> <span class="token punctuation">(</span><span class="token parameter">pageResourcePath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            <span class="token comment">// pageResourcePath 是小程序页面所在系统的文件路径</span>
+            <span class="token keyword">return</span> pageResourcePath<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'pages'</span><span class="token punctuation">)</span> <span class="token comment">// 文件路径包含 'pages' 的页面都会被打包</span>
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+            <span class="token string">'/project/pages'</span><span class="token punctuation">,</span>
+            <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">pages\/internal</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+            <span class="token punctuation">(</span><span class="token parameter">pageResourcePath</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> pageResourcePath<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'pages'</span><span class="token punctuation">)</span>
+          <span class="token punctuation">]</span> <span class="token comment">// 满足任意条件的页面都会被打包</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>该特性只能用于<strong>开发环境</strong>，默认情况下会阻止所有页面(<strong>入口 app.mpx 除外</strong>)的打包。</p></div> <h3 id="optimizerenderrules"><a href="#optimizerenderrules" class="header-anchor">#</a> optimizeRenderRules</h3> <p><a href="#rules"><code>Rules</code></a></p> <p>render 函数中可能会存在一些重复变量，该配置可消除 render 函数中的重复变量，进而减少包体积。不配置该参数，则不会消除重复变量。</p> <p>同时框架 render 函数优化提供了两个等级，使用 level 字段来进行控制，默认为 level = 1</p> <ul><li>level = 1时，框架生成 render 函数中完成保留 template 中的计算逻辑，setData 传输量保持了最优。</li> <li>level = 2时，框架生成 render 函数中仅保留所有 template 中使用到的响应性变量，无任何计算逻辑保留，render 函数体积达最小状态，但 setData 传输量相对于 level=1 会有所增加。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">optimizeRenderRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span>
+          <span class="token punctuation">]</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">level</span><span class="token operator">:</span> <span class="token number">1</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="asyncsubpackagerules"><a href="#asyncsubpackagerules" class="header-anchor">#</a> asyncSubpackageRules</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">Condition</span> <span class="token operator">=</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">Function</span> <span class="token operator">|</span> RegExp
+
+<span class="token keyword">interface</span> <span class="token class-name">AsyncSubpackageRules</span> <span class="token punctuation">{</span>
+  include<span class="token operator">:</span> Condition <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>Condition<span class="token operator">&gt;</span>
+  exclude<span class="token operator">?</span><span class="token operator">:</span> Condition <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>Condition<span class="token operator">&gt;</span>
+  root<span class="token operator">:</span> <span class="token builtin">string</span>
+  placeholder<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> resource<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><ul><li>include: 同 webpack include 规则</li> <li>exclude: 同 webpack exclude 规则</li> <li>root: 匹配规则的组件或js模块的输出分包名</li> <li>placeholder: 匹配规则的组件所配置的componentPlaceholder，可支持配置原生组件和自定义组件，原生组件可直接以string类型配置，自定义组件需要配置对象，name 为该自定义组件名, resource 为自定义组件的路径，路径可为绝对路径和相对于项目目录的相对路径</li></ul> <p>异步分包场景下批量设置组件或 js 模块的异步分包，提升资源异步分包输出的灵活性。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token comment">// include 可以是正则、字符串、函数、数组</span>
+        <span class="token literal-property property">asyncSubpackageRules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+          <span class="token punctuation">{</span>
+            <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token string">'/project/pages'</span><span class="token punctuation">,</span> <span class="token comment">// 文件路径包含 '/project/pages' 的组件或者 require.async 异步引用的js 模块都会被打包至sub1分包</span>
+            <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">'sub1'</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">'view'</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <ul><li>该配置匹配的组件，若使用方在引用路径已设置?root或componentPlaceholder，则以引用路径中的?root或componentPlaceholder为最高优先级</li> <li>若placeholder配置使用自定义组件，注意一定要配置 placeholder 中的 resource 字段</li> <li>本功能只会对使用require.async异步引用的js模块生效，若引用路径中已配置?root，则以路径中?root优先</li></ul></div> <h3 id="retryrequireasync"><a href="#retryrequireasync" class="header-anchor">#</a> retryRequireAsync</h3> <p><code>boolean = false</code></p> <p>开启时在处理<code>require.async</code>时会添加单次重试逻辑</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">retryRequireAsync</span><span class="token operator">:</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="disablerequireasync"><a href="#disablerequireasync" class="header-anchor">#</a> disableRequireAsync</h3> <p><code>boolean = false</code></p> <p>Mpx 框架在输出 微信小程序、支付宝小程序、字节小程序、Web 平台时，默认支持分包异步化能力，但若在某些场景下需要关闭该能力，可配置该项。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">disableRequireAsync</span><span class="token operator">:</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="optimizesize"><a href="#optimizesize" class="header-anchor">#</a> optimizeSize</h3> <p><code>boolean = false</code></p> <p>开启后可优化编译配置减少构建产物体积</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">optimizeSize</span><span class="token operator">:</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="mpxwebpackplugin-static-methods"><a href="#mpxwebpackplugin-static-methods" class="header-anchor">#</a> MpxWebpackPlugin static methods</h2> <p><code>MpxWebpackPlugin</code> 通过静态方法暴露了以下五个内置 loader，详情如下：</p> <h3 id="mpxwebpackplugin-loader"><a href="#mpxwebpackplugin-loader" class="header-anchor">#</a> MpxWebpackPlugin.loader</h3> <p><code>MpxWebpackPlugin</code> 所提供的最主要 loader，用于处理 <code>.mpx</code> 文件，根据不同的<a href="#mode">目标平台</a>将 <code>.mpx</code> 文件输出为不同的结果。</p> <blockquote><p>在微信环境下 <code>todo.mpx</code> 被loader处理后的文件为：<code>todo.wxml</code>、<code>todo.wxss</code>、<code>todo.js</code>、<code>todo.json</code></p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.mpx$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">loader</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre></div><h3 id="mpxwebpackplugin-pluginloader"><a href="#mpxwebpackplugin-pluginloader" class="header-anchor">#</a> MpxWebpackPlugin.pluginLoader</h3> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>该 loader 仅在开发<strong>小程序插件</strong>时使用，可在使用 Mpx 脚手架进行项目初始化时选择进行组件开发来生成对应的配置文件。</p></div> <p><code>MpxWebpackPlugin.pluginLoader</code> 用于根据开发者编写的<code>plugin.json</code>文件内容，将特定的小程序组件、页面以及 js 文件进行构建，最终以小程序插件的形式输出。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+          <span class="token punctuation">{</span>
+            <span class="token literal-property property">resource</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src/plugin/plugin.json'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 小程序插件的plugin.json的绝对路径</span>
+            <span class="token literal-property property">use</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">pluginLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>更多细节请查阅 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html" target="_blank" rel="noopener noreferrer">小程序插件开发<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="mpxwebpackplugin-wxspreloader"><a href="#mpxwebpackplugin-wxspreloader" class="header-anchor">#</a> MpxWebpackPlugin.wxsPreLoader</h3> <p>加载并解析 <code>wxs</code> 脚本文件，并针对不同平台，做了差异化处理；同时可支持处理内联<code>wxs</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+          <span class="token punctuation">{</span>
+            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(wxs|qs|sjs|filter\.js)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+            <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxsPreLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">enforce</span><span class="token operator">:</span> <span class="token string">'pre'</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="mpxwebpackplugin-fileloader"><a href="#mpxwebpackplugin-fileloader" class="header-anchor">#</a> MpxWebpackPlugin.fileLoader</h3> <p>提供图像资源的处理，生成对应图像文件，输出到输出目录并返回 public URL。如果是分包资源，则会输出到相应的分包资源文件目录中。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+          <span class="token punctuation">{</span>
+            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+            <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">fileLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+              <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span>
+            <span class="token punctuation">}</span><span class="token punctuation">)</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>选项</strong>：</p> <ul><li><code>name</code> : 自定义输出文件名模板</li></ul> <h3 id="mpxwebpackplugin-urlloader"><a href="#mpxwebpackplugin-urlloader" class="header-anchor">#</a> MpxWebpackPlugin.urlLoader</h3> <p>微信小程序对于图像资源存在一些限制，<code>MpxWebpackPlugin.urlLoader</code> 针对这些差异做了相关处理，开发者可以使用web应用开发的方式进行图像资源的引入，<code>MpxWebpackPlugin.urlLoader</code> 可根据图像资源的不同引入方式，支持 CDN 或者 Base64 的方式进行处理。更多细节请查阅<a href="/guide/advance/image-process.html">图像资源处理</a>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+          <span class="token punctuation">{</span>
+            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+            <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">urlLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+              <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
+              <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token number">2048</span><span class="token punctuation">,</span>
+            <span class="token punctuation">}</span><span class="token punctuation">)</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>选项</strong>:</p> <ul><li><code>name</code> :  自定义输出文件名模板</li> <li><code>mimetype</code> : 指定文件的 MIME 类型</li> <li><code>limit</code> : 对内联文件作为数据 URL 的字节数限制</li> <li><code>publicPath</code> : 自定义 public 目录</li> <li><code>fallback</code> : 文件字节数大于限制时，为文件指定加载程序</li></ul> <h3 id="mpxwebpackplugin-getpageentry"><a href="#mpxwebpackplugin-getpageentry" class="header-anchor">#</a> MpxWebpackPlugin.getPageEntry</h3> <p>在 webpack config entry 入口文件配置中，你可以使用该方法获取独立构建页面路径，构建产物为该页面的独立原生代码，
+你可以提供该页面给其他小程序使用。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">getPageEntry</span><span class="token punctuation">(</span><span class="token string">'./index.mpx'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="mpxwebpackplugin-getcomponententry"><a href="#mpxwebpackplugin-getcomponententry" class="header-anchor">#</a> MpxWebpackPlugin.getComponentEntry</h3> <p>在 webpack config entry 入口文件配置中，你可以使用该方法获取独立构建组件路径，构建产物为该组件的独立原生代码，
+你可以提供该组件给其他小程序使用。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">getComponentEntry</span><span class="token punctuation">(</span><span class="token string">'./components/list.mpx'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="mpxwebpackplugin-getnativeentry"><a href="#mpxwebpackplugin-getnativeentry" class="header-anchor">#</a> MpxWebpackPlugin.getNativeEntry</h3> <p>在 webpack config entry 入口文件配置中，你可以使用该方法获取原生小程序入口文件路径。如果你不想将原生的小程序入口文件整合为 <code>app.mpx</code> 文件，则可以使用该方法直接使用原有的小程序入口文件进行编译。见<a href="%5B1330%5D(https://github.com/didi/mpx/issues/1330)">#1330</a>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 将 app 入口由默认的 app.mpx 更改为 app.js</span>
+    config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">getNativeEntry</span><span class="token punctuation">(</span><span class="token string">'./src/app.js'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="mpxunocssplugin"><a href="#mpxunocssplugin" class="header-anchor">#</a> MpxUnocssPlugin</h2> <p>Mpx 编译 unocss 原子类的 webpack 主插件</p> <p>如果在使用 <code>@mpxjs/cli@3.x</code> 创建项目时选择了 unocss，会自动安装 MpxUnocssPlugin ，直接在 mpx.unocss 配置项中传入相关配置即可</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token comment">// @mpxjs/unocss-plugin 相关的配置</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>如果创建项目时未选 unocss，需手动安装，安装示例如下：</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @mpxjs/unocss-plugin
+<span class="token function">pnpm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @mpxjs/unocss-plugin
+<span class="token function">yarn</span> <span class="token function">add</span> <span class="token parameter variable">-D</span> @mpxjs/unocss-plugin
+</code></pre></div><p>使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// vue.config.js</span>
+  <span class="token keyword">const</span> MpxUnocssPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/unocss-plugin'</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+
+  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">configureWebpack</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token keyword">new</span> <span class="token class-name">MpxUnocssPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+          <span class="token comment">// @mpxjs/unocss-plugin 相关的配置</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>插件支持配置如下：</p> <h3 id="unofile"><a href="#unofile" class="header-anchor">#</a> unoFile</h3> <p><code>string = 'styles/uno'</code></p> <p>生成主包或分包通用样式存储的相对路径</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">unoFile</span><span class="token operator">:</span> <span class="token string">'styles/uno'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>则会把通用样式存储到下面目录</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// 主包</span>
+  dist<span class="token operator">/</span>wx<span class="token operator">/</span>styles<span class="token operator">/</span>uno<span class="token punctuation">.</span>wxss
+  <span class="token comment">// 分包</span>
+  dist<span class="token operator">/</span>wx<span class="token operator">/</span><span class="token keyword">package</span><span class="token operator">/</span>styles<span class="token operator">/</span>uno<span class="token punctuation">.</span>wxss
+</code></pre></div><h3 id="mincount"><a href="#mincount" class="header-anchor">#</a> minCount</h3> <p><code>number = 2</code></p> <p>使用到某个原子类的最小分包个数，比如设置为2的话一个原子类只有超过2个分包使用才会输出到主包</p> <blockquote><p>主要是用来控制主包占用的，数值越大分包的原子类就有更大可能性不占用主包</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">minCount</span><span class="token operator">:</span> <span class="token number">2</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code>  <span class="token comment">&lt;!-- minCount=2 --&gt;</span>
+  <span class="token comment">&lt;!-- a分包 --&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-black color-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!-- b分包 --&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-black<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>unocss将把生成的<code>bg-black</code>样式打包到主包</p> <h3 id="styleisolation"><a href="#styleisolation" class="header-anchor">#</a> styleIsolation</h3> <p><code>string = 'isolated'</code></p> <p>需要和微信小程序的styleIsolation配合使用，比如小程序使用样式隔离的话，这里需要对应配置为isolated，这样的话每个组件会独立引用对应的原子类文件，配置为'apply-shared'的话只有父级页面和app会建立引用，然后通过配合微信的apply-shared的方式获取父级上定义的原子类</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">styleIsolation</span><span class="token operator">:</span> <span class="token string">'isolated'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="scan"><a href="#scan" class="header-anchor">#</a> scan</h3> <div class="language-ts extra-class"><pre class="language-ts"><code>  <span class="token keyword">interface</span> <span class="token class-name">Scan</span> <span class="token punctuation">{</span>
+    include<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
+    exclude<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+</code></pre></div><p>配置需要扫描的文件目录</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">scan</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'src/**/*'</span><span class="token punctuation">]</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="escapemap"><a href="#escapemap" class="header-anchor">#</a> escapeMap</h3> <p><code>object</code></p> <p>针对原子类中出现的<code>[</code> <code>(</code> <code>,</code>等特殊字符，在web中会通过转义字符<code>\</code>进行转义，由于小程序环境下不支持css选择器中出现<code>\</code>转义字符，我们内置支持了一套不带<code>\</code>的转义规则对这些特殊字符进行转义，同时替换模版和css文件中的类名，内建的默认转义规则，可自定义转译规则</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">escapeMap</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token string-property property">':'</span><span class="token operator">:</span> <span class="token string">'_d_'</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code>  &lt;view class=<span class="token string">&quot;dark:text-green-400&quot;</span>/&gt;
+</code></pre></div><p>将会转化为</p> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">.dark .dark_d_text-green-400</span><span class="token punctuation">{</span><span class="token property">--un-text-opacity</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>74<span class="token punctuation">,</span>222<span class="token punctuation">,</span>128<span class="token punctuation">,</span><span class="token function">var</span><span class="token punctuation">(</span>--un-text-opacity<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
+</code></pre></div><h3 id="root"><a href="#root" class="header-anchor">#</a> root</h3> <p><code>string = process.cwd()</code></p> <p>文件根目录</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">root</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token function">cwd</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="transformcss"><a href="#transformcss" class="header-anchor">#</a> transformCSS</h3> <p><code>boolean = true</code></p> <p>转化css指令为常规css</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">transformCSS</span><span class="token operator">:</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">.custom-div</span> <span class="token punctuation">{</span>
+    <span class="token atrule"><span class="token rule">@apply</span> text-center my-0 font-medium<span class="token punctuation">;</span></span>
+  <span class="token punctuation">}</span>
+</code></pre></div><p>将会转化为</p> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">.custom-div</span> <span class="token punctuation">{</span>
+    <span class="token property">margin-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
+    <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
+    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
+    <span class="token property">font-weight</span><span class="token punctuation">:</span> 500<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+</code></pre></div><h3 id="transformgroups"><a href="#transformgroups" class="header-anchor">#</a> transformGroups</h3> <p><code>boolean = true</code></p> <p>转化Variant group</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">transformGroups</span><span class="token operator">:</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg:(p-2 m-2 text-red-600)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>将会转化为</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg:p-2 lg:m-2 lg:text-red-600<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="config"><a href="#config" class="header-anchor">#</a> config</h3> <p><code>UserConfig | string</code></p> <p>config可以传配置对象也可以传一个配置文件路径</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+            <span class="token punctuation">[</span><span class="token string">'m-1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token string">'10rpx'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+          <span class="token punctuation">]</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="configfiles"><a href="#configfiles" class="header-anchor">#</a> configFiles</h3> <p><code>LoadConfigSource[]</code></p> <div class="language-ts extra-class"><pre class="language-ts"><code>  <span class="token keyword">interface</span> <span class="token class-name">LoadConfigSource<span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
+      files<span class="token operator">:</span> Arrayable<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
+      <span class="token comment">/**
+       * @default ['mts', 'cts', 'ts', 'mjs', 'cjs', 'js', 'json', '']
+      */</span>
+      extensions<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+      <span class="token comment">/**
+       * Loader for loading config,
+      *
+      * @default 'auto'
+      */</span>
+      parser<span class="token operator">?</span><span class="token operator">:</span> BuiltinParsers <span class="token operator">|</span> CustomParser<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token string">'auto'</span><span class="token punctuation">;</span>
+      <span class="token comment">/**
+       * Rewrite the config object,
+      * return nullish value to bypassing loading the file
+      */</span>
+      rewrite<span class="token operator">?</span><span class="token operator">:</span> <span class="token operator">&lt;</span><span class="token constant">F</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>obj<span class="token operator">:</span> <span class="token constant">F</span><span class="token punctuation">,</span> filepath<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token constant">T</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
+      <span class="token comment">/**
+       * Transform the source code before loading,
+      * return nullish value to skip transformation
+      */</span>
+      transform<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>code<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> filepath<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
+      <span class="token comment">/**
+       * Skip this source if error occurred on loading
+      *
+      * @default false
+      */</span>
+      skipOnError<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+</code></pre></div><p>configFiles的话是传递额外的配置文件数组，比如不想用uno.config作为配置文件的话可以在这里面配</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">configFiles</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+          <span class="token punctuation">{</span>
+            <span class="token literal-property property">files</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+              <span class="token string">'uno2.config.js'</span>
+            <span class="token punctuation">]</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="commentconfig"><a href="#commentconfig" class="header-anchor">#</a> commentConfig</h3> <p>我们还支持了commentConfig进行组件局部配置，目前支持safelist和styleIsolation，safelist可以用空格分隔写多个</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- mpx_config_styleIsolation: 'isolated' --&gt;</span>
+    <span class="token comment">&lt;!-- mpx_config_safelist: 'text-red-500 bg-black' --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>mpx-unocss<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="mpxunocssbase"><a href="#mpxunocssbase" class="header-anchor">#</a> MpxUnocssBase</h2> <p>Mpx 内置的 unocss preset，继承自 <code>@unocss/preset-uno</code>，并额外提供小程序原子类的预设样式，安装示例如下：</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @mpxjs/unocss-base
+<span class="token function">pnpm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @mpxjs/unocss-base
+<span class="token function">yarn</span> <span class="token function">add</span> <span class="token parameter variable">-D</span> @mpxjs/unocss-base
+</code></pre></div><p>使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// uno.config.js</span>
+  <span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'unocss'</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> presetMpx <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/unocss-base'</span><span class="token punctuation">)</span>
+
+  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token function">presetMpx</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token comment">// ...</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token comment">// unocss的config，具体配置参考https://unocss.dev/config/</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>支持的配置项如下：</p> <h3 id="basefontsize"><a href="#basefontsize" class="header-anchor">#</a> baseFontSize</h3> <p><code>number = 37.5</code></p> <p>同比换算1rem = 37.5rpx适配小程序</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// uno.config.js</span>
+  <span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'unocss'</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> presetMpx <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/unocss-base'</span><span class="token punctuation">)</span>
+
+  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token function">presetMpx</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">baseFontSize</span><span class="token operator">:</span> <span class="token number">37.5</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="preflight"><a href="#preflight" class="header-anchor">#</a> preflight</h3> <p><code>boolean = true</code></p> <p>是否生成预设样式</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// uno.config.js</span>
+  <span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'unocss'</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> presetMpx <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/unocss-base'</span><span class="token punctuation">)</span>
+
+  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token function">presetMpx</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">preflight</span><span class="token operator">:</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>将添加预设样式在主包</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">page</span><span class="token punctuation">{</span><span class="token property">--un-rotate</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-rotate-x</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-rotate-y</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-rotate-z</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-scale-x</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">--un-scale-y</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">--un-scale-z</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">--un-skew-x</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-skew-y</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-translate-x</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-translate-y</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-translate-z</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-pan-x</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-pan-y</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-pinch-zoom</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-scroll-snap-strictness</span><span class="token punctuation">:</span>proximity<span class="token punctuation">;</span><span class="token property">--un-ordinal</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-slashed-zero</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-numeric-figure</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-numeric-spacing</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-numeric-fraction</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-border-spacing-x</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-border-spacing-y</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-ring-offset-shadow</span><span class="token punctuation">:</span>0 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token property">--un-ring-shadow</span><span class="token punctuation">:</span>0 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token property">--un-shadow-inset</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-shadow</span><span class="token punctuation">:</span>0 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token property">--un-ring-inset</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-ring-offset-width</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span><span class="token property">--un-ring-offset-color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span><span class="token property">--un-ring-width</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span><span class="token property">--un-ring-color</span><span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>147<span class="token punctuation">,</span>197<span class="token punctuation">,</span>253<span class="token punctuation">,</span>0.5<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token property">--un-blur</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-brightness</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-contrast</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-drop-shadow</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-grayscale</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-hue-rotate</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-invert</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-saturate</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-sepia</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-blur</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-brightness</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-contrast</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-grayscale</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-hue-rotate</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-invert</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-opacity</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-saturate</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-sepia</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token punctuation">}</span>
+</code></pre></div><h3 id="dark"><a href="#dark" class="header-anchor">#</a> dark</h3> <p><code>class | media | DarkModeSelectors = 'class'</code></p> <div class="language-ts extra-class"><pre class="language-ts"><code>  <span class="token keyword">interface</span> <span class="token class-name">DarkModeSelectors</span> <span class="token punctuation">{</span>
+    <span class="token comment">/**
+     * light variant的选择器.
+     *
+     * @default '.light'
+     */</span>
+    light<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
+
+    <span class="token comment">/**
+     * dark variant的选择器
+     *
+     * @default '.dark'
+     */</span>
+    dark<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
+  <span class="token punctuation">}</span>
+</code></pre></div><p>默认情况下，此预设使用dark:variant生成基于类的dark模式。</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark:text-green-400<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p>我们将生成</p> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">.dark .dark_c_text-green-400</span><span class="token punctuation">{</span><span class="token property">--un-text-opacity</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>74<span class="token punctuation">,</span>222<span class="token punctuation">,</span>128<span class="token punctuation">,</span><span class="token function">var</span><span class="token punctuation">(</span>--un-text-opacity<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
+</code></pre></div><p>要选择基于媒体查询的dark模式，您可以使用@dark:variant</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>@dark:text-green-400<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p>我们将生成</p> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
+    <span class="token selector">._u_dark_c_text-green-400</span><span class="token punctuation">{</span><span class="token property">--un-text-opacity</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>74<span class="token punctuation">,</span>222<span class="token punctuation">,</span>128<span class="token punctuation">,</span><span class="token function">var</span><span class="token punctuation">(</span>--un-text-opacity<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</code></pre></div><p>或者使用针对dark:variant的配置进行全局设置</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token function">presetMpx</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">dark</span><span class="token operator">:</span> <span class="token string">&quot;media&quot;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="attributifypseudo"><a href="#attributifypseudo" class="header-anchor">#</a> attributifyPseudo</h3> <p><code>boolean = false</code></p> <p>将伪选择器生成为[group='']，而不是.group。只支持<code>group</code>|<code>peer</code>|<code>parent</code>|<code>previous</code>
+如果attributifyPseudo为true的话，</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group-hover:opacity-100<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>上面template将生成</p> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">[group=&quot;&quot;]:hover .group-hover_c_opacity-100</span><span class="token punctuation">{</span><span class="token property">opacity</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token punctuation">}</span>
+</code></pre></div><p>为false则生成</p> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">.group:hover .group-hover_c_opacity-100</span><span class="token punctuation">{</span><span class="token property">opacity</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token punctuation">}</span>
+</code></pre></div><h3 id="variableprefix"><a href="#variableprefix" class="header-anchor">#</a> variablePrefix</h3> <p><code>string = 'un-'</code></p> <p>CSS变量的前缀</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token function">presetMpx</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">variablePrefix</span><span class="token operator">:</span> <span class="token string">'un-'</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">.bg-red-500</span><span class="token punctuation">{</span><span class="token property">--un-bg-opacity</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>239<span class="token punctuation">,</span>68<span class="token punctuation">,</span>68<span class="token punctuation">,</span><span class="token function">var</span><span class="token punctuation">(</span>--un-bg-opacity<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
+</code></pre></div><h2 id="request-query"><a href="#request-query" class="header-anchor">#</a> Request query</h2> <p>Mpx中允许用户在request中传递特定query执行特定逻辑，目前已支持的query如下：</p> <h3 id="resolve"><a href="#resolve" class="header-anchor">#</a> ?resolve</h3> <p>用于获取资源最终被输出的正确路径。</p> <p>Mpx 在处理页面路径时会把对应的分包名作为 root 加在路径前。处理组件路径时会添加 hash，防止路径名冲突。直接写资源相对路径可能与最终输出的资源路径不符。</p> <p>编写代码时使用 import 引入页面地址后加上 <code>?resolve</code>，这个地址在编译时会被处理成正确的绝对路径，即资源的最终输出位置。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> subPackageIndexPage <span class="token keyword">from</span> <span class="token string">'../subpackage/pages/index.mpx?resolve'</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">url</span><span class="token operator">:</span> subPackageIndexPage
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="root"><a href="#root" class="header-anchor">#</a> ?root</h3> <ol><li>声明分包别名</li></ol> <p>指定分包别名，Mpx 项目在编译构建后会输出该别名的分包，外部小程序或 H5 页面跳转时，可直接配置该分包别名下的资源路径。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 可在项目app.mpx中进行配置</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">packages</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token string">'@packagePath/src/app.mpx?root=test'</span><span class="token punctuation">,</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// 使用</span>
+wx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">url</span> <span class="token operator">:</span> <span class="token string">'/test/homepage/index'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><ol start="2"><li>声明组件所属异步分包</li></ol> <p>微信小程序新增 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html" target="_blank" rel="noopener noreferrer">分包异步化特性<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> ，使跨分包的组件可以等待对应分包下载后异步使用, 在mpx中使用需通过?root声明组件所属异步分包即可使用，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--/packageA/pages/index.mpx--&gt;</span>
+// 这里在分包packageA中即可异步使用分包packageB中的hello组件
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;hello&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../../packageB/components/hello?root=packageB&quot;</span><span class="token punctuation">,</span>
+      <span class="token string-property property">&quot;simple-hello&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/hello&quot;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;componentPlaceholder&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;hello&quot;</span><span class="token operator">:</span> <span class="token string">&quot;simple-hello&quot;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="fallback"><a href="#fallback" class="header-anchor">#</a> ?fallback</h3> <p><code>boolean</code></p> <p>对于使用<code>MpxWebpackPlugin.urlLoader</code>的文件，如果在引用资源的末尾加上<code>?fallback=true</code>，则使用配置的自定义loader。图片的引入和处理详见<a href="/guide/advance/image-process.html">图像资源处理</a>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">urlLoader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com/'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">fallback</span><span class="token operator">:</span> <span class="token string">'file-loader'</span> <span class="token comment">// 自定义fallback为true时使用的loader</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* png资源引入 */</span>
+<span class="token selector">&lt;style&gt;
+  .logo2</span> <span class="token punctuation">{</span>
+    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'./images/logo.png?fallback=true'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/* 设置fallback=true，则使用如上方所配置的file-loader */</span>
+  <span class="token punctuation">}</span>
+&lt;/style&gt;
+</code></pre></div><h3 id="uselocal"><a href="#uselocal" class="header-anchor">#</a> ?useLocal</h3> <p><code>boolean</code></p> <p>静态资源存放有两种方式：本地、远程（配置 publicPath ）。useLocal 是用于在配置了 publicPath 时声明部分资源输出到本地。比如配置了通用的 CDN 策略，但如网络兜底资源需要强制走本地存储，可在引用资源的末尾加上<code>?useLocal=true</code></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 单个图片资源设置为存储到本地 */</span>
+<span class="token selector">&lt;style&gt;
+  .logo2</span> <span class="token punctuation">{</span>
+    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'./images/logo.png?useLocal=true'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+&lt;/style&gt;
+</code></pre></div><h3 id="isstyle"><a href="#isstyle" class="header-anchor">#</a> ?isStyle</h3> <p><code>boolean</code></p> <p>isStyle 是在非 style 模块中编写样式时，声明这部分引用的静态资源按照 style 环境来处理。如在 javascript 中 require 了一个图像资源，然后模版 template style 属性中进行引用， 则 require 资源时可选择配置<code>?isStyle=true</code></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- isStyle 案例一：引用 javascript 中的数据 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token punctuation">{</span><span class="token punctuation">{</span>testStyle<span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>测试<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- isStyle 案例二：设置资源按照style处理规则处理。style处理规则为: 默认走base64，除非同时配置了 publicPath 和 fallback --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../images/car.jpg?isStyle=true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- 普通非style模式，默认走 fallback 或者 file-loader 解析，输出到 publicPath 或者 本地img目录下 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../images/car.jpg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/* 将 script 中的图像资源标识为 style 资源 */</span>
+<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token keyword">const</span> backCar <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../images/car.jpg?isStyle=true'</span><span class="token punctuation">)</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">testStyle</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">background-image : url(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>backCar<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">); width:100px; height: 100px</span><span class="token template-punctuation string">`</span></span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><h3 id="ispage"><a href="#ispage" class="header-anchor">#</a> ?isPage</h3> <p><code>boolean</code></p> <p>在 webpack config entry 入口文件配置中，你可以在路径后追加 ?isPage 来声明独立页面构建，构建产物为该页面的独立原生代码，
+你可以提供该页面给其他小程序使用。此外，独立页面构建也可以通过MpxWebpackPlugin.getPageEntry生成，推荐使用<a href="#mpxwebpackplugin-getpageentry">此方法。</a></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'../src/pages/index.mpx?isPage'</span><span class="token punctuation">)</span>
+    <span class="token comment">// 或者</span>
+    <span class="token comment">// config.entry('index').add(MpxWebpackPlugin.getPageEntry('./index.mpx'))</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>对于使用 <code>@mpxjs/cli@2.x</code> 脚手架初始化的项目，配置 entry 的方式如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// build/getWebpackConf.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">index</span><span class="token operator">:</span> <span class="token string">'../src/pages/index.mpx?isPage'</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div></div> <h3 id="iscomponent"><a href="#iscomponent" class="header-anchor">#</a> ?isComponent</h3> <p><code>boolean</code></p> <p>在 webpack config entry 入口文件配置中，你可以在路径后追加 ?isComponent 来声明独立组件构建，构建产物为该组件的独立原生代码，
+你可以提供该组件给其他小程序使用。
+此外，独立组件构建也可以通过MpxWebpackPlugin.getComponentEntry生成，推荐使用<a href="#mpxwebpackplugin-getcomponententry">此方法。</a>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'../src/components/list.mpx?isComponent'</span><span class="token punctuation">)</span>
+    <span class="token comment">// 或者</span>
+    <span class="token comment">// config.entry('index').add(MpxWebpackPlugin.getComponentEntry('./components/list.mpx'))</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="async"><a href="#async" class="header-anchor">#</a> ?async</h3> <p><code>boolean | string</code></p> <p>输出 H5 时 Vue Router 的路由懒加载功能，Mpx框架默认会对分包开启路由懒加载功能并将分包所有页面都打入同一个Chunk
+，如果你希望对于部分主包页面或者分包页面配置路由懒加载并想自定义Chunk Name，则可以使用该功能。</p> <div class="language-html extra-class"><pre class="language-html"><code>// app.mpx 
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;./pages/index?async&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 主包页面配置路由懒加载，Chunk Name 为随机数字</span>
+      <span class="token string">&quot;./pages/index2?async=app_pages2&quot;</span>，<span class="token comment">// 主包页面配置路由懒加载，Chunk Name 自定义为 app_pages2</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;./packages/sub1/app.mpx?root=sub1&quot;</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+// packages/sub1/app.mpx
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;./pages/index?async=sub1_pages_index&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 分包中页面设置路由懒加载并设置自定义Chunk Name</span>
+      <span class="token string">&quot;./pages/index2?async=sub2_pages_index2&quot;</span> <span class="token comment">// 分包中页面设置路由懒加载并设置自定义Chunk Name</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/api/directives.html" class="prev">
+        模板指令
+      </a></span> <span class="next"><a href="/api/builtIn.html">
+        内建组件
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/38.7826170e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/composition-api.html b/docs-vuepress/.vuepress/dist/api/composition-api.html
new file mode 100644
index 0000000000..3236d17230
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/composition-api.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>组合式 API | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/39.094ffa40.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" aria-current="page" class="active sidebar-link">组合式 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/composition-api.html#setup" class="sidebar-link">setup</a></li><li class="sidebar-sub-header"><a href="/api/composition-api.html#生命周期钩子" class="sidebar-link">生命周期钩子</a></li><li class="sidebar-sub-header"><a href="/api/composition-api.html#getcurrentinstance" class="sidebar-link">getCurrentInstance</a></li><li class="sidebar-sub-header"><a href="/api/composition-api.html#usei18n" class="sidebar-link">useI18n</a></li><li class="sidebar-sub-header"><a href="/api/composition-api.html#usefetch" class="sidebar-link">useFetch</a></li></ul></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="组合式-api"><a href="#组合式-api" class="header-anchor">#</a> 组合式 API</h1> <h2 id="setup"><a href="#setup" class="header-anchor">#</a> setup</h2> <p>一个组件选项，在组件被创建之前，props 被解析之后执行。是组合式 API 的入口。</p> <ul><li><strong>参数</strong>：
+<ul><li><code>{Data} props</code></li> <li><code>{SetupContext} context</code></li></ul></li></ul> <p>该 <strong>props</strong> 对象仅包含显性声明的 properties。并且所有声明了的prop，不论父组件是否向其传递，
+都将出现在 <strong>props</strong> 对象中。其中未被传入的可选的 prop 的值会是默认值或 undefined。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">type</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
+            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">lastLeaf</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token comment">// 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种</span>
+            <span class="token literal-property property">type</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
+            <span class="token literal-property property">optionalTypes</span><span class="token operator">:</span> <span class="token punctuation">[</span>String<span class="token punctuation">,</span> Object<span class="token punctuation">]</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>min<span class="token punctuation">)</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>lastLeaf<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><ul><li><strong>类型声明</strong>：</li></ul> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">interface</span> <span class="token class-name">SetupContext</span> <span class="token punctuation">{</span>
+    <span class="token function">triggerEvent</span><span class="token punctuation">(</span>
+       name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
+       detail<span class="token operator">?</span><span class="token operator">:</span> object<span class="token punctuation">,</span> <span class="token comment">// detail对象，提供给事件监听函数</span>
+       options<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+         bubbles<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
+         composed<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
+         capturePhase<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
+       <span class="token punctuation">}</span>
+    <span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+    refs<span class="token operator">:</span> ObjectOf<span class="token operator">&lt;</span>NodesRef <span class="token operator">&amp;</span> ComponentIns<span class="token operator">&gt;</span>
+    asyncRefs<span class="token operator">:</span> ObjectOf<span class="token operator">&lt;</span><span class="token builtin">Promise</span><span class="token operator">&lt;</span>NodesRef <span class="token operator">&amp;</span> ComponentIns<span class="token operator">&gt;&gt;</span> <span class="token comment">// 字节小程序特有</span>
+    <span class="token function-variable function">nextTick</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token function-variable function">fn</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
+    <span class="token function-variable function">forceUpdate</span><span class="token operator">:</span> <span class="token punctuation">(</span>params<span class="token operator">?</span><span class="token operator">:</span> object<span class="token punctuation">,</span> callback<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
+    <span class="token function">selectComponent</span><span class="token punctuation">(</span>selector<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> ComponentIns
+    <span class="token function">selectAllComponents</span><span class="token punctuation">(</span>selector<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> ComponentIns<span class="token punctuation">[</span><span class="token punctuation">]</span>
+    <span class="token function">createSelectorQuery</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> SelectorQuery
+    <span class="token function">createIntersectionObserver</span><span class="token punctuation">(</span>
+      options<span class="token operator">:</span> <span class="token punctuation">{</span>
+        thresholds<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token builtin">number</span><span class="token operator">&gt;</span>
+        initialRatio<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span>
+        observeAll<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">)</span><span class="token operator">:</span> IntersectionObserver<span class="token punctuation">}</span>
+
+<span class="token keyword">function</span> <span class="token function">setup</span><span class="token punctuation">(</span>props<span class="token operator">:</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> context<span class="token operator">:</span> SetupContext<span class="token punctuation">)</span><span class="token operator">:</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span>
+</code></pre></div><h2 id="生命周期钩子"><a href="#生命周期钩子" class="header-anchor">#</a> 生命周期钩子</h2> <p>可以通过直接导入 on* 函数来注册生命周期钩子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onMounted<span class="token punctuation">,</span> onUpdated<span class="token punctuation">,</span> onUnmounted<span class="token punctuation">,</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'mounted!'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token function">onUpdated</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'updated!'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token function">onUnmounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'unmounted!'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>这些生命周期钩子注册函数只能在 setup() 期间同步使用，因为它们依赖于内部的全局状态来定位当前活动的实例 (此时正在调用其 setup() 的组件实例)。
+在没有当前活动实例的情况下，调用它们将会出错。</p> <p>组件实例的上下文也是在生命周期钩子的同步执行期间设置的，因此，在生命周期钩子内同步创建的侦听器和计算属性也会在组件卸载时自动删除。</p> <p>新版本的生命周期钩子我们基本上和 Vue 中的生命周期钩子对齐，相较于之前还是有部分生命周期钩子的改动。</p> <h3 id="onbeforemount"><a href="#onbeforemount" class="header-anchor">#</a> onBeforeMount</h3> <p><code>Function</code></p> <p>在组件布局完成后执行，refs 相关的前置工作在该钩子中执行。</p> <h3 id="onmounted"><a href="#onmounted" class="header-anchor">#</a> onMounted</h3> <p><code>Function</code></p> <p>在组件布局完成后执行，refs 可以直接获取。</p> <h3 id="onbeforeupdate"><a href="#onbeforeupdate" class="header-anchor">#</a> onBeforeUpdate</h3> <p><code>Function</code></p> <p>在数据发生改变后，组件/页面更新之前被调用。这里适合在现有组件/页面将要被更新之前访问它，
+比如移除某个手动添加的监听器，或者获取某个元素更新前的高度。</p> <h3 id="onupdated"><a href="#onupdated" class="header-anchor">#</a> onUpdated</h3> <p><code>Function</code></p> <p>在数据更改导致的页面/组件重新渲染和更新完毕之后被调用。</p> <p>注意，onUpdated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等待整个视图都渲染完毕，可以在 onUpdated 内部使用 nextTick。</p> <h3 id="onbeforeunmount"><a href="#onbeforeunmount" class="header-anchor">#</a> onBeforeUnmount</h3> <p><code>Function</code></p> <p>在卸载组件/页面实例之前调用。在这个阶段，实例仍然是完全正常的。</p> <h3 id="onunmount"><a href="#onunmount" class="header-anchor">#</a> onUnmount</h3> <p><code>Function</code></p> <p>卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除。</p> <h3 id="onload"><a href="#onload" class="header-anchor">#</a> onLoad</h3> <p><code>Function</code></p> <p>小程序页面 onLoad 事件，监听页面加载。</p> <h3 id="onshow"><a href="#onshow" class="header-anchor">#</a> onShow</h3> <p><code>Function</code></p> <p>小程序页面 onShow 事件，监听页面展示。</p> <h3 id="onhide"><a href="#onhide" class="header-anchor">#</a> onHide</h3> <p><code>Function</code>
+小程序页面 onHide 事件，监听页面隐藏。</p> <h3 id="onresize"><a href="#onresize" class="header-anchor">#</a> onResize</h3> <p><code>Function</code></p> <p>小程序页面 onResize 事件，页面尺寸改变时触发。</p> <h3 id="onpulldownrefresh"><a href="#onpulldownrefresh" class="header-anchor">#</a> onPullDownRefresh</h3> <p><code>Function</code></p> <p>小程序监听用户下拉刷新事件。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPullDownRefresh" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="onreachbottom"><a href="#onreachbottom" class="header-anchor">#</a> onReachBottom</h3> <p><code>Function</code></p> <p>小程序监听用户上拉触底事件。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onReachBottom" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="onshareappmessage"><a href="#onshareappmessage" class="header-anchor">#</a> onShareAppMessage</h3> <p><code>Function</code></p> <p>小程序监听用户点击页面内转发按钮（button 组件 open-type=&quot;share&quot;）或右上角菜单“转发”按钮的行为，并自定义转发内容。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="onsharetimeline"><a href="#onsharetimeline" class="header-anchor">#</a> onShareTimeline</h3> <p><code>Function</code></p> <p>小程序监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>注意：</strong> 仅微信小程序支持</p> <h3 id="onaddtofavorites"><a href="#onaddtofavorites" class="header-anchor">#</a> onAddToFavorites</h3> <p><code>Function</code></p> <p>小程序监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onAddToFavorites-Object-object" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>注意：</strong> 仅微信小程序支持</p> <h3 id="onpagescroll"><a href="#onpagescroll" class="header-anchor">#</a> onPageScroll</h3> <p><code>Function</code></p> <p>小程序监听用户滑动页面事件。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPageScroll-Object-object" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="ontabitemtap"><a href="#ontabitemtap" class="header-anchor">#</a> onTabItemTap</h3> <p><code>Function</code></p> <p>点击 tab 时触发。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onTabItemTap-Object-object" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="onsaveexitstate"><a href="#onsaveexitstate" class="header-anchor">#</a> onSaveExitState</h3> <p><code>Function</code></p> <p>每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用，可以进行退出状态的保存。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onSaveExitState" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>注意：</strong> 仅微信小程序支持</p> <h3 id="onserverprefetch"><a href="#onserverprefetch" class="header-anchor">#</a> onServerPrefetch</h3> <ul><li><strong>类型：</strong> <code>Function</code></li> <li><strong>详细：</strong></li></ul> <p>SSR渲染定制钩子，在服务端渲染期间被调用，可以实现在服务端进行数据预取。</p> <p><strong>注意：</strong> 仅 web 环境支持</p> <h2 id="getcurrentinstance"><a href="#getcurrentinstance" class="header-anchor">#</a> getCurrentInstance</h2> <p>getCurrentInstance 支持访问内部组件实例。</p> <ul><li><strong>注意：</strong></li></ul> <p>getCurrentInstance 只暴露给高阶使用场景，典型的比如在库中。强烈反对在应用的代码中使用 getCurrentInstance。请不要把它当作在组合式 API 中获取 this 的替代方案来使用。</p> <p>getCurrentInstance 只能在 setup 或生命周期钩子中调用。</p> <h2 id="usei18n"><a href="#usei18n" class="header-anchor">#</a> useI18n</h2> <p>点击<a href="/api/extend.html#usei18n">查看详情</a></p> <h2 id="usefetch"><a href="#usefetch" class="header-anchor">#</a> useFetch</h2> <p>点击<a href="/api/extend.html#usefetch">查看详情</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/api/reactivity-api.html" class="prev">
+        响应式 API
+      </a></span> <span class="next"><a href="/api/optional-api.html">
+        选项式 API
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/39.094ffa40.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/directives.html b/docs-vuepress/.vuepress/dist/api/directives.html
new file mode 100644
index 0000000000..655df54106
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/directives.html
@@ -0,0 +1,434 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>模板指令 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/40.10d90636.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" aria-current="page" class="active sidebar-link">模板指令</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/directives.html#wx-if" class="sidebar-link">wx:if</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-elif" class="sidebar-link">wx:elif</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-else" class="sidebar-link">wx:else</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-for" class="sidebar-link">wx:for</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-for-index" class="sidebar-link">wx:for-index</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-for-item" class="sidebar-link">wx:for-item</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-key" class="sidebar-link">wx:key</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-class" class="sidebar-link">wx:class</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-style" class="sidebar-link">wx:style</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-model" class="sidebar-link">wx:model</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-model-prop" class="sidebar-link">wx:model-prop</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-model-event" class="sidebar-link">wx:model-event</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-model-value-path" class="sidebar-link">wx:model-value-path</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-model-filter" class="sidebar-link">wx:model-filter</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-ref" class="sidebar-link">wx:ref</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-show" class="sidebar-link">wx:show</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#bind" class="sidebar-link">bind</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#catch" class="sidebar-link">catch</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#capture-bind" class="sidebar-link">capture-bind</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#capture-catch" class="sidebar-link">capture-catch</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#mode" class="sidebar-link">@mode</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#mode" class="sidebar-link">@_mode</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#env" class="sidebar-link">@env</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#mpxtagname" class="sidebar-link">mpxTagName</a></li></ul></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="模板指令"><a href="#模板指令" class="header-anchor">#</a> 模板指令</h1> <h2 id="wx-if"><a href="#wx-if" class="header-anchor">#</a> wx:if</h2> <p><code>any</code></p> <p>根据表达式的值的 <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy" target="_blank" rel="noopener noreferrer">truthiness<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 <strong>注意：如果元素是 <code>&lt;block/&gt;</code>, 注意它并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性</strong>。</p> <div class="custom-block danger"><p class="custom-block-title">DANGER</p> <p>当和 <code>wx:if</code> 一起使用时，<code>wx:for</code> 的优先级比 <code>wx:if</code> 更高。详见列<a href="/guide/basic/list-render.html">表渲染教程</a></p></div> <p><strong>参考：</strong> <a href="/guide/basic/conditional-render.html">条件渲染 - wx:if</a></p> <h2 id="wx-elif"><a href="#wx-elif" class="header-anchor">#</a> wx:elif</h2> <p><code>any</code></p> <p>前一兄弟元素必须有 <code>wx:if</code> 或 <code>wx:elif</code>。表示 <code>wx:if</code> 的“ <code>wx:elif</code> 块”，可以链式调用。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{type === 'A'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  A
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{type === 'B'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  B
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{type === 'C'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  C
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span>
+  Not A/B/C
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/conditional-render.html">条件渲染 - wx:elif</a></p> <h2 id="wx-else"><a href="#wx-else" class="header-anchor">#</a> wx:else</h2> <p>不需要表达式，前一兄弟元素必须有 <code>wx:if</code> 或 <code>wx:elif</code></p> <p>为 <code>wx:if</code> 或者 <code>wx:elif</code> 添加 <code>wx:else</code> 块</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{type === 'A'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  A
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span>
+  Not A
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/conditional-render.html">条件渲染 - wx:else</a></p> <h2 id="wx-for"><a href="#wx-for" class="header-anchor">#</a> wx:for</h2> <p><code>Array | Object | number | string</code></p> <p>在组件上使用 <code>wx:for</code> 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 <code>index</code>，数组当前项的变量名默认为 <code>item</code></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{array}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  {{ index }}: {{ item.message }}
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+
+// 0: foo
+// 1: bar
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">array</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'foo'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'bar'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><code>wx:for</code> 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 <code>attribute key</code> 来提供一个排序提示：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{array}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  {{ item.text }}
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+
+// foo
+// bar
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">array</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'foo'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'bar'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><div class="custom-block danger"><p class="custom-block-title">DANGER</p> <p>当和 <code>wx:if</code> 一起使用时，<code>wx:for</code> 的优先级比 <code>wx:if</code> 更高。详见列<a href="/guide/basic/list-render.html">表渲染教程</a></p></div> <p><code>wx:for</code> 的详细用法可以通过以下链接查看教程详细说明。</p> <p><strong>参考：</strong> <a href="/guide/basic/list-render.html">列表渲染 - wx:for</a></p> <h2 id="wx-for-index"><a href="#wx-for-index" class="header-anchor">#</a> wx:for-index</h2> <p><code>string</code></p> <p>使用 wx:for-index 可以指定数组当前下标的变量名：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{array}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>idx<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  {{ idx }}: {{ item.text }}
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+
+// 0: foo
+// 1: bar
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">array</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'foo'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'bar'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/list-render.html">列表渲染 - wx:for-index</a></p> <h2 id="wx-for-item"><a href="#wx-for-item" class="header-anchor">#</a> wx:for-item</h2> <p><code>string</code></p> <p>使用 wx:for-item 可以指定数组当前元素的变量名：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for-item</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>i<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for-item</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>j<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{i &lt;= j}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      {{i}} * {{j}} = {{i * j}}
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/list-render.html">列表渲染 - wx:for-item</a></p> <h2 id="wx-key"><a href="#wx-key" class="header-anchor">#</a> wx:key</h2> <p><code>number | string</code></p> <p>如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用 wx:key 来指定列表中项目的唯一的标识符。
+<strong>注意：如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略</strong>。</p> <p>有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。</p> <p>常见的用例是结合 <code>wx:for</code>：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{array}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  {{ item.text }}
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/list-render.html">列表渲染 - wx:for</a></p> <h2 id="wx-class"><a href="#wx-class" class="header-anchor">#</a> wx:class</h2> <p>绑定HTML Class: 类似vue的class绑定</p> <p>#对象用法</p> <p>我们可以传给 <code>wx:class</code> 一个对象，以动态地切换 class：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ {active: isActive} }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  这是一段测试文字
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>你可以在对象中传入更多字段来动态切换多个 class。此外，<code>wx:class</code> 指令也可以与普通的 class attribute 共存。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>static<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ {active: isActive, text-danger: hasError} }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  这是一段测试文字
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
+  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+     <span class="token literal-property property">isActive</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+     <span class="token literal-property property">hasError</span><span class="token operator">:</span> <span class="token boolean">false</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>渲染为：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>static active<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  这是一段测试文字
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>注意：由于微信的限制，<code>wx:class</code> 中的 key 值不能使用引号（如: { 'my-class-name': xx }）</strong></p> <p>绑定的数据对象不必内联定义在模板里：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ classObject }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  这是一段测试文字
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
+  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">classObject</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+        <span class="token string-property property">'text-danger'</span><span class="token operator">:</span> <span class="token boolean">false</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>我们也可以在这里绑定一个返回对象的计算属性。</p> <p>如果你也想根据条件切换列表中的 class，可以用三元表达式：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ isActive ? 'active' : '' }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  这是一段测试文字
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>#数组用法</p> <p>我们可以把一个数组传给 <code>wx:class</code>，以应用一个 class 列表：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{[activeClass, errorClass]}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  这是一段测试文字
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
+  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">activeClass</span><span class="token operator">:</span> <span class="token string">'active'</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">errorClass</span><span class="token operator">:</span> <span class="token string">'text-danger'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>渲染为：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active text-danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  这是一段测试文字
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/class-style-binding.html#类名绑定">类名样式绑定 - 类名绑定</a></p> <h2 id="wx-style"><a href="#wx-style" class="header-anchor">#</a> wx:style</h2> <p><code>wx:style</code> 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 来命名：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>color: {{activeColor}}; font-size: {{fontSize}}px; fontWeight: bold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  这是一段测试文字
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
+  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">activeColor</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">30</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>直接绑定到一个样式对象通常更好，这会让模板更清晰：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{styleObject}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  这是一段测试文字
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
+  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">styleObject</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">'bold'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>同样的，对象语法常常结合返回对象的计算属性使用。</p> <p><code>wx:style</code> 的数组语法可以将多个样式对象应用到同一个元素上</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{[baseStyles, overridingStyles]}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  这是一段测试文字
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/class-style-binding.html#样式绑定">类名样式绑定 - 样式绑定</a></p> <h2 id="wx-model"><a href="#wx-model" class="header-anchor">#</a> wx:model</h2> <p>除了小程序原生指令之外，mpx 基于input事件提供了一个指令 wx:model, 用于双向绑定。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{val}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{test.val}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{test['val']}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">val</span><span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">val</span><span class="token operator">:</span> <span class="token string">'xxx'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>wx:model并不会影响相关的事件处理函数，比如像下面这样：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{inputValue}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindinput</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/two-way-binding.html">双向绑定</a></p> <h2 id="wx-model-prop"><a href="#wx-model-prop" class="header-anchor">#</a> wx:model-prop</h2> <p>wx:model 默认使用 <code>value</code> 属性传值，使用 <code>wx:model-prop</code> 定义 wx:model 指令对应的属性；</p> <h2 id="wx-model-event"><a href="#wx-model-event" class="header-anchor">#</a> wx:model-event</h2> <p>wx:model 默认监听 <code>input</code> 事件，可以使用 <code>wx:model-event</code> 定义 wx:model 指令对应的事件；</p> <p>父组件</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>customCheck</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{checked}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkedProp<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkedChange<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>customCheck</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span>createPage<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">checked</span><span class="token operator">:</span> <span class="token boolean">true</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;customCheck&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./customCheck&quot;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+</code></pre></div><p>子组件：(customCheck.mpx)</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewProps<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{checkedProp}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+  <span class="token selector">.viewProps</span> <span class="token punctuation">{</span>
+    width 100px
+    height 100px
+    color #000
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">checkedProp</span><span class="token operator">:</span> Boolean
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">handleTap</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token comment">// 这里第二个参数为自定义事件的detail，需要以下面的形式传递值以保持与原生组件对齐</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">triggerEvent</span><span class="token punctuation">(</span><span class="token string">'checkedChange'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>checkedProp
+        <span class="token punctuation">}</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>如示例，当子组件被点击时，父组件的checked数据会发生变化</p> <blockquote><p>注意：由于微信限制，如果事件名使用横线分割（'checked-change'）,将不可以再使用该特性</p></blockquote> <h2 id="wx-model-value-path"><a href="#wx-model-value-path" class="header-anchor">#</a> wx:model-value-path</h2> <p>指定 wx:model 双向绑定时的取值路径；
+并非所有的组件都会按微信的标注格式 <code>event.detail.value</code> 来传值，例如 vant 的 input 组件，值是通过抛出 <code>event.detail</code> 本身传递的，这时我们可以使用 <code>wx:model-value-path=&quot;[]&quot;</code> 重新指定取值路径。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>vant-field</span> <span class="token attr-name"><span class="token namespace">wx:</span>model-value-path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[]<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{a}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>vant-field</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="wx-model-filter"><a href="#wx-model-filter" class="header-anchor">#</a> wx:model-filter</h2> <p>在使用 <code>wx:model</code> 时我们可能需要像 Vue 的 <code>.trim</code> 、<code>.lazy</code> 这样的修饰符来对双向数据绑定的数据进行过滤和修饰；Mpx 通过增强指令 <code>wx:model-filter</code> 可以实现这一功能；
+该指令可以绑定内建的 filter 或者自定义的 filter 方法，该方法接收过滤前的值，返回过滤操作后的值。</p> <p>例如我们希望拿到的 input 元素中的数据是经过 trim 的。示例：</p> <blockquote><p>当然，Mpx 已经内置了 trim 过滤器；可以通过 wx:model-filter=&quot;trim&quot; 直接使用；</p></blockquote> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-page<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+       <span class="token comment">&lt;!-- wx:model-filter 过滤wx:model 的值--&gt;</span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>trimSpace<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{filterData}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token punctuation">&gt;</span></span>{{filterData.length}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">filterData</span><span class="token operator">:</span> <span class="token string">'model-filter'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">trimSpace</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// wx:model-filter 绑定的 filter 方法</span>
+      <span class="token keyword">return</span> <span class="token keyword">typeof</span> val <span class="token operator">===</span> <span class="token string">'string'</span> <span class="token operator">&amp;&amp;</span> val<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>filter 方法除可以是和 <code>methods</code> 平级的方法，还可以是 <code>methods</code> 中的方法。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>  
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">filterData</span><span class="token operator">:</span> <span class="token string">'model-filter'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">trimSpace</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token comment">// wx:model-filter 支持将过滤器方法定义成 methods 中的方法</span>
+        <span class="token keyword">return</span> <span class="token keyword">typeof</span> val <span class="token operator">===</span> <span class="token string">'string'</span> <span class="token operator">&amp;&amp;</span> val<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="wx-ref"><a href="#wx-ref" class="header-anchor">#</a> wx:ref</h2> <p><code>string</code></p> <p>Mpx提供了 <code>wx:ref=xxx</code> 来更方便获取 WXML 节点信息的对象。在JS里只需要通过this.$refs.xxx 即可获取节点。</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tref<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    123
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>tref<span class="token punctuation">.</span><span class="token function">fields</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/refs.html">获取组件实例 - wx:ref</a></p> <h2 id="wx-show"><a href="#wx-show" class="header-anchor">#</a> wx:show</h2> <p><code>boolean</code></p> <p>与 <code>wx:if</code> 所不同的是<strong>不会移除节点</strong>，而是设置节点的 <code>style</code> 为 <code>display: none</code>。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{show}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  123
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="bind"><a href="#bind" class="header-anchor">#</a> bind</h2> <p><code>string</code></p> <p>让 <code>bind + (:?) + eventType</code> 作为属性值</p> <p>比如：<code>bindtap</code></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tapTest<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> Click me! <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tapTest1(testVal, $event)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> Click me! <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">tapTest</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Clicked!'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">tapTest1</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> event<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>Mpx做了增强的<strong>内联传参</strong>能力以及具体有哪些事件<strong>类型</strong>参考下方</p> <p><strong>参考：</strong> <a href="/guide/basic/event.html">事件处理 - bind</a></p> <h2 id="catch"><a href="#catch" class="header-anchor">#</a> catch</h2> <p><code>string</code></p> <p>让 <code>catch + (:?) + eventType</code> 作为属性值</p> <p>除 <code>bind</code> 外，也可以用 <code>catch</code> 来绑定事件。与 <code>bind</code> 不同，<code>catch</code> 会阻止事件向上冒泡。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  outer view
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>middle<span class="token punctuation">&quot;</span></span> <span class="token attr-name">catchtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    middle view
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      inner view
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">handleTap1</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'outer'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">handleTap2</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'middle'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">handleTap3</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'inner'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token comment">// 通过几个操作看出被catchtap的middle view阻止了向上冒泡</span>
+<span class="token comment">// click outer</span>
+<span class="token comment">// outer</span>
+
+<span class="token comment">// click middle</span>
+<span class="token comment">// middle</span>
+
+<span class="token comment">// click inner</span>
+<span class="token comment">// inner</span>
+<span class="token comment">// middle</span>
+</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/event.html">事件处理 - catch</a></p> <h2 id="capture-bind"><a href="#capture-bind" class="header-anchor">#</a> capture-bind</h2> <p><code>string</code></p> <p>让 <code>capture-bind + (:?) + eventType</code> 作为属性值</p> <p>capture-bind要在bind之前执行，是因为事件是先捕获后冒泡，<strong>注意：仅触摸类事件支持捕获阶段</strong></p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap1<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">capture-bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    outer view
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap3<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">capture-bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      inner view
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>点击inner view的调用顺序是(handleTap)2、4、3、1</p> <p><strong>参考：</strong> <a href="/guide/basic/event.html">事件处理 - capture-bind</a></p> <h2 id="capture-catch"><a href="#capture-catch" class="header-anchor">#</a> capture-catch</h2> <p><code>string</code></p> <p>让 <code>capture-catch + (:?) + eventType</code> 作为属性值</p> <p>capture-catch中断捕获阶段和取消冒泡阶段</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap1<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">capture-catch:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  outer view
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap3<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">capture-bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    inner view
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>点击inner view仅执行handleTap2</p> <p><strong>参考：</strong> <a href="/guide/basic/event.html">事件处理 - capture-catch</a></p> <h2 id="mode"><a href="#mode" class="header-anchor">#</a> @mode</h2> <p><code>type mode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'</code></p> <p>跨平台输出场景下，Mpx 框架允许用户在组件上使用 @ 和 | 符号来指定某个节点或属性只在某些平台下有效。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
+  <span class="token attr-name">open-type@wx|swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">bindgetuserinfo@wx|swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">open-type@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAuthorize<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">scope@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">onTap@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  获取用户信息
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>在上方示例中，开发者可以便捷的设置在支付宝小程序与微信和百度小程序等平台分别生效的 open-type 属性，
+以及事件绑定或其他属性。假设当前 srcMode 为 wx，目标平台为 ali，则输出产物为：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
+  <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAuthorize<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  获取用户信息
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>同时，该指令也可以作用在单个节点上，但需要注意的是，该指令作用在单个节点时，节点仅在目标平台输出，同时节点自身属性不会进行跨平台语法转换，不过其子节点不受影响。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--当srcMode为wx，跨平台输出ali时--&gt;</span>
+<span class="token comment">&lt;!--错误写法--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{flag}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token comment">&lt;!--正确写法--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{flag}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="mode"><a href="#mode" class="header-anchor">#</a> @_mode</h2> <p><code>type _mode = '_wx' | '_ali' | '_qq' | '_swan' | '_tt' | '_web' | '_qa'</code></p> <p>有时开发者期望使用 @mode 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--srcMode为 wx，输出 ali 时，bindtap 会被正常转换为 onTap--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@_ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。</p> <h2 id="env"><a href="#env" class="header-anchor">#</a> @env</h2> <p><code>string</code></p> <p>跨平台输出场景下，除了 mode 平台场景值，Mpx 框架还提供自定义 env 目标应用，来实现在不同应用下编译产出不同的代码。</p> <p>关于 env 的详细介绍可以点击<a href="/guide/advance/platform.html#use-env">查看</a></p> <p>跨平台输出使用 env 与 mode 一样支持文件纬度、区块纬度、节点纬度、属性纬度等条件编译，这里我们仅介绍下节点和属性纬度的指令模式使用，env 与 mode 可以组合使用。</p> <p>env 属性维度条件编译与 mode 的用法大致相同，使用 : 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 attr@mode:env:env|mode:env，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 : 前缀，形如 attr@:env。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--open-type 属性仅在百度平台且应用 env 为 didi 时保留--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@swan:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+<span class="token comment">&lt;!--open-type 属性在应用 env 为 didi 的任意小程序平台保留--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+<span class="token comment">&lt;!--open-type 属性在微信平台且应用 env 为 didi 或 qingju 时保留--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@wx:</span><span class="token namespace">didi:</span>qingju</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>env 也可在单个节点上进行条件编译：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--整个节点在应用 env 为 didi时进行保留--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">@:</span>didi</span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>需要注意的时，如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">@:</span>didi</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">bindtap@:</span>didi</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="mpxtagname"><a href="#mpxtagname" class="header-anchor">#</a> mpxTagName</h2> <p><code>string</code></p> <p>跨平台输出时，有时开发者不仅需要对节点属性进行条件编译，可能还需对节点标签进行条件编译。</p> <p>为此，Mpx 框架支持了一个特殊属性 mpxTagName，如果节点存在这个属性，在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">mpxTagName@swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>will be cover-view in swan<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/api/store-api.html" class="prev">
+        Store API
+      </a></span> <span class="next"><a href="/api/compile.html">
+        编译构建
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/40.10d90636.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/extend.html b/docs-vuepress/.vuepress/dist/api/extend.html
new file mode 100644
index 0000000000..e6fef447fb
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/extend.html
@@ -0,0 +1,365 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>周边拓展 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/41.8351af86.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" aria-current="page" class="active sidebar-link">周边拓展</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/extend.html#mpx-fetch" class="sidebar-link">mpx-fetch</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/extend.html#fetch-config" class="sidebar-link">fetch(config)</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#canceltoken" class="sidebar-link">CancelToken</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#xfetch" class="sidebar-link">XFetch</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#interceptors" class="sidebar-link">interceptors</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#proxy" class="sidebar-link">proxy 代理</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#usefetch" class="sidebar-link">useFetch</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/extend.html#api-proxy" class="sidebar-link">api-proxy</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#webview-bridge" class="sidebar-link">webview-bridge</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#size-report" class="sidebar-link">size-report</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/extend.html#插件配置项" class="sidebar-link">插件配置项</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/extend.html#i18n" class="sidebar-link">i18n</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/extend.html#usei18n" class="sidebar-link">useI18n</a></li></ul></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="周边拓展"><a href="#周边拓展" class="header-anchor">#</a> 周边拓展</h1> <h2 id="mpx-fetch"><a href="#mpx-fetch" class="header-anchor">#</a> mpx-fetch</h2> <p>mpx-fetch提供了一个实例<strong>xfetch</strong> ，该实例包含以下api</p> <h3 id="fetch-config"><a href="#fetch-config" class="header-anchor">#</a> fetch(config)</h3> <blockquote><p>正常的promisify风格的请求方法</p></blockquote> <ul><li><p><code>{Object} config</code></p> <p>config 可指定以下属性：</p> <ul><li><p><strong>url</strong></p> <p><code>string</code></p> <p>设置请求url</p></li> <li><p><strong>method</strong></p> <p><code>string</code></p> <p>设置请求方式，默认为GET</p></li> <li><p><strong>data</strong></p> <p><code>object</code></p> <p>设置请求参数</p></li> <li><p><strong>params</strong></p> <p><code>object</code></p> <p>设置请求参数，参数会以 Query String 的形式进行传递</p></li> <li><p><strong>header</strong></p> <p><code>object</code></p> <p>设置请求的 header，header 中不能设置 Referer。
+<code>content-type</code> 默认为 <code>application/json</code></p></li> <li><p><strong>timeout</strong></p> <p><code>number</code></p> <p>单位为毫秒。若不传，默认读取app.json文件中__networkTimeout属性。 对于超时的处理可在 catch 方法中进行</p></li> <li><p><strong>emulateJSON</strong></p> <p><code>boolean</code></p> <p>设置为 true 时，等价于 header = {'content-type': 'application/x-www-form-urlencoded'}</p></li> <li><p><strong>usePre</strong></p> <p><code>boolean</code></p> <p>预请求开关，若设置为 true，则两次请求间隔在有效期内且请求参数和请求方式对比一致的情况下，会返回上一次的请求结果</p></li> <li><p><strong>cacheInvalidationTime</strong></p> <p><code>number</code></p> <p>预请求缓存有效时长，单位 ms，默认为 5000ms。当两次请求时间间隔超过设置时长后再发起二次请求时，上一次的请求缓存会失效然后重新发起请求</p></li> <li><p><strong>ignorePreParamKeys</strong></p> <p><code>array</code> | <code>string</code></p> <p>在判断缓存请求是否可用对比前后两次请求参数时，默认对比的是 options 传入的所有参数（包括 params 和 data ）。但在具体业务场景下某些参数不一致时的缓存结果依旧可使用（比如参数中带有时间戳），所以提供 ignorePreParamKeys 来设置对比参数过程中可忽略的参数的 key，支持字符串数组和字符串（字符串传多个 key 时使用英文逗号分隔）类型。
+配置后在进行参数对比时，不会对比在 ignorePreParamKeys 设置的参数。</p></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> mpxFetch <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>mpxFetch<span class="token punctuation">)</span>
+<span class="token comment">// 第一种访问形式</span>
+mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">10</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">'content-type'</span><span class="token operator">:</span> <span class="token string">'application/x-www-form-urlencoded'</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">emulateJSON</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">usePre</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">cacheInvalidationTime</span><span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">ignorePreParamKeys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'timestamp'</span><span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+	<span class="token function">onLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+		<span class="token comment">// 第二种访问形式</span>
+		<span class="token keyword">this</span><span class="token punctuation">.</span>$xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://test.com'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+	<span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="canceltoken"><a href="#canceltoken" class="header-anchor">#</a> CancelToken</h3> <p>命名导出，用于创建一个取消请求的凭证。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> CancelToken <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
+<span class="token keyword">const</span> cancelToken <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">CancelToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+	<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">cancelToken</span><span class="token operator">:</span> cancelToken<span class="token punctuation">.</span>token
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+cancelToken<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token string">'手动取消请求'</span><span class="token punctuation">)</span> <span class="token comment">// 执行后请求中断，返回abort fail</span>
+</code></pre></div><h3 id="xfetch"><a href="#xfetch" class="header-anchor">#</a> XFetch</h3> <p>命名导出，用于创建一个新的mpx-fetch实例进行独立使用</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">interface</span> <span class="token class-name">FetchOptions</span><span class="token punctuation">{</span>
+    useQueue<span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token comment">// 是否开启队列功能</span>
+    proxy<span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token comment">// 是否开启代理功能</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> XFetch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
+<span class="token keyword">const</span> newFetch <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XFetch</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span> <span class="token comment">// 生成新的mpx-fetch实例</span>
+</code></pre></div><h3 id="interceptors"><a href="#interceptors" class="header-anchor">#</a> interceptors</h3> <blockquote><p>实例属性，用于添加拦截器，包含两个属性，request &amp; response</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span>
+    <span class="token comment">// 也可以返回promise</span>
+    <span class="token keyword">return</span> config
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
+    <span class="token comment">// 也可以返回promise</span>
+    <span class="token keyword">return</span> res
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="proxy"><a href="#proxy" class="header-anchor">#</a> proxy 代理</h3> <h4 id="setproxy"><a href="#setproxy" class="header-anchor">#</a> setProxy</h4> <blockquote><p>配置代理项，可以传入一个数组或者一个对象，请求会按设置的规则进行代理</p></blockquote> <ul><li><p><strong>参数：</strong></p> <p><code>{Array | Object}</code></p> <ul><li><p><strong>test</strong></p> <p><code>object</code></p> <ul><li><p>url</p> <p><code>string</code></p> <p>全路径匹配，规则可以参考<a href="https://www.npmjs.com/package/path-to-regexp" target="_blank" rel="noopener noreferrer">path-to-regexp<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，也可参考下面的简单示例。</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>如果设置了此项，则 protocol、host、port、path 规则不再生效。此项支持 path-to-regexp 匹配，protocol、host、port、path 为全等匹配。</p></div></li> <li><p>protocol</p> <p><code>string</code></p> <p>待匹配的协议头</p></li> <li><p>host</p> <p><code>string</code></p> <p>不包含端口的 host</p></li> <li><p>port</p> <p><code>string</code></p> <p>待匹配的端口</p></li> <li><p>path</p> <p><code>string</code></p> <p>待匹配的路径</p></li> <li><p>params</p> <p><code>object</code></p> <p>同时匹配请求中的 <code>params</code> 和 <code>query</code></p></li> <li><p>data</p> <p><code>object</code></p> <p>匹配请求中的 <code>data</code></p></li> <li><p>header</p> <p><code>object</code></p> <p>匹配请求中的 <code>header</code></p></li> <li><p>method</p> <p><code>Method | Method[]</code></p> <p>匹配请求方法，不区分大小写，可以传一个方法，也可以传一个方法数组</p></li> <li><p>custom</p> <p><code>function</code></p> <p>自定义匹配规则，参数会注入原始请求配置，结果需返回 <code>true</code> 或 <code>false</code></p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>如果设置了此项，匹配结果以此项为准，以上规则均不再生效。</p></div></li></ul></li> <li><p><strong>proxy</strong></p> <p><code>object</code></p> <ul><li><p>url</p> <p><code>string</code></p> <p>代理的 url</p></li> <li><p>protocol</p> <p><code>string</code></p> <p>修改原请求的协议头</p></li> <li><p>host</p> <p><code>string</code></p> <p>代理的 host，不包含端口号</p></li> <li><p>port</p> <p><code>string</code></p> <p>修改端口号</p></li> <li><p>path</p> <p><code>string</code></p> <p>修改原请求路径</p></li> <li><p>params</p> <p><code>object</code></p> <p>合并原请求的 params</p></li> <li><p>data</p> <p><code>object</code></p> <p>合并原请求的 data</p></li> <li><p>header</p> <p><code>object</code></p> <p>合并原请求的 header</p></li> <li><p>method</p> <p><code>Method</code></p> <p>替换原请求的方法</p></li> <li><p>custom</p> <p><code>function</code></p> <p>自定义代理规则，会注入两个参数，第一个是上一个匹配规则处理后的请求配置，第二个是 match 的参数对象，结果需返回要修改的请求配置对象。</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>如果设置了此项，最终代理配置将以此项为准，其他配置规则均不再生效。</p></div></li></ul></li> <li><p><strong>waterfall</strong></p> <p><code>boolean</code></p> <p>默认为 <code>false</code>，为 <code>false</code> 时，命中当前规则处理完就直接返回；为 <code>true</code> 时，命中当前匹配规则处理完成后将结果传递给下面命中匹配规则继续处理。</p></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">setProxy</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 此项匹配之后，会按下面 proxy 配置的修改请求配置</span>
+		<span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token string-property property">'content-type'</span><span class="token operator">:</span> <span class="token string">'application/x-www-form-urlencoded'</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">test1</span><span class="token operator">:</span> <span class="token string">'abc'</span>
+        <span class="token punctuation">}</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+			<span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token string">'env test'</span>
+		<span class="token punctuation">}</span><span class="token punctuation">,</span>
+		<span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+			<span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">test2</span><span class="token operator">:</span> <span class="token string">'cba'</span>
+        <span class="token punctuation">}</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">waterfall</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 为 true 时会将此次修改后的请求配置继续传递给下面的规则处理</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token comment">// 可以分别单独匹配 protocol、host、port、path；代理规则同样</span>
+        <span class="token literal-property property">protocol</span><span class="token operator">:</span> <span class="token string">'http:'</span><span class="token punctuation">,</span>
+		<span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">'mock.didi.com'</span><span class="token punctuation">,</span>
+		<span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+		<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/mock/test'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">'test.didi.com'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8888</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">waterfall</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 自定义匹配规则</span>
+        <span class="token function">custom</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// config 为原始的请求配置</span>
+            <span class="token comment">// 自定义匹配逻辑</span>
+			<span class="token keyword">if</span> <span class="token punctuation">(</span>xxx<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+				<span class="token keyword">return</span> <span class="token boolean">true</span>
+			<span class="token punctuation">}</span>
+			<span class="token keyword">return</span> <span class="token boolean">false</span>
+		<span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 自定义代理配置</span>
+        <span class="token function">custom</span> <span class="token punctuation">(</span><span class="token parameter">config<span class="token punctuation">,</span> params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+			<span class="token comment">// config 为上面匹配后修改过的请求配置</span>
+            <span class="token comment">// params 为 match 后的参数对象</span>
+            <span class="token comment">// 返回需要修改的请求配置对象</span>
+			<span class="token keyword">return</span> <span class="token punctuation">{</span>
+                <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                    <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span>
+                <span class="token punctuation">}</span><span class="token punctuation">,</span>
+				<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+					<span class="token literal-property property">test3</span><span class="token operator">:</span> <span class="token string">'aaa'</span>
+				<span class="token punctuation">}</span>
+			<span class="token punctuation">}</span>
+		<span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">waterfall</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token comment">// : 可以匹配目标项，并将 match 结果返回到代理 custom 函数中</span>
+        <span class="token comment">// :和?都属于保留符号，若不想做匹配时需用 '\\' 转义</span>
+        <span class="token comment">// (.*)为全匹配</span>
+        <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">':protocol\\://mock.didi.com/mock/:id/oneapi/router/forum/api/v1/(.*)'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'post'</span><span class="token punctuation">]</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'https://127.0.0.1:8080/go/into/$id/api/v2/abcd'</span> <span class="token comment">// '$'项在代理生效后会替换匹配规则中的':'项</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">waterfall</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// false 时不会继续匹配后面的规则</span>
+<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="prependproxy"><a href="#prependproxy" class="header-anchor">#</a> prependProxy</h4> <blockquote><p>向前追加代理规则</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">prependProxy</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+	<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">waterfall</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="appendproxy"><a href="#appendproxy" class="header-anchor">#</a> appendProxy</h4> <blockquote><p>向后追加代理规则</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">appendProxy</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+	<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">waterfall</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="getproxy"><a href="#getproxy" class="header-anchor">#</a> getProxy</h4> <blockquote><p>查看已有的代理配置</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">getProxy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="clearproxy"><a href="#clearproxy" class="header-anchor">#</a> clearProxy</h4> <blockquote><p>解除所有的代理配置</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">clearProxy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="usefetch"><a href="#usefetch" class="header-anchor">#</a> useFetch</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token function">useFetch</span><span class="token punctuation">(</span>options<span class="token operator">?</span><span class="token operator">:</span> FetchOptions<span class="token punctuation">)</span><span class="token operator">:</span>xfetch
+</code></pre></div><p>在组合式 API 中使用，用来获取 <code>@mpxjs/fetch</code> 插件的 xfetch 实例，等用于 <code>mpx.xfetch</code>。 关于 xfetch 实例的详细介绍，请点击<a href="/api/extend.html#mpx-fetch">查看</a></p> <p>此外该方法可选择传入 <code>options</code> 参数，若传入参数，则会创建一个新的 XFetch 实例返回，若不传入参数，则默认将全局 <code>xfetch</code> 实例返回。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
+<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> mpxFetch <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>mpxFetch<span class="token punctuation">)</span>
+
+<span class="token comment">// script-setup.mpx</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> useFetch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
+<span class="token function">useFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">10</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">emulateJSON</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">usePre</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">cacheInvalidationTime</span><span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">ignorePreParamKeys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'timestamp'</span><span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><ul><li><strong>注意：</strong> options 参数同 <a href="/api/extend.html#XFetch">XFetch</a> 章节。</li></ul> <h2 id="api-proxy"><a href="#api-proxy" class="header-anchor">#</a> api-proxy</h2> <p>Mpx目前已经支持的API转换列表，供参考</p> <table><thead><tr><th>方法/平台</th> <th style="text-align:center;">wx</th> <th style="text-align:center;">ali</th> <th style="text-align:center;">web</th> <th style="text-align:center;">RN</th></tr></thead> <tbody><tr><td>getSystemInfo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>getSystemInfoSync</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>nextTick</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>showToast</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>hideToast</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>showModal</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>showLoading</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>hideLoading</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>showActionSheet</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>showNavigationBarLoading</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>hideNavigationBarLoading</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>setNavigationBarTitle</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>setNavigationBarColor</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>request</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>downloadFile</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td></tr> <tr><td>uploadFile</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>setStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>setStorageSync</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>removeStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>removeStorageSync</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>getStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>getStorageSync</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>getStorageInfo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>getStorageInfoSync</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>clearStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>clearStorageSync</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>saveImageToPhotosAlbum</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>previewImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>compressImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>chooseImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>getLocation</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>saveFile</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>removeSavedFile</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>getSavedFileList</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>getSavedFileInfo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>addPhoneContact</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>setClipboardData</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td></tr> <tr><td>getClipboardData</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td></tr> <tr><td>setScreenBrightness</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>getScreenBrightness</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>makePhoneCall</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td></tr> <tr><td>stopAccelerometer</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>startAccelerometer</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>stopCompass</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>startCompass</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>stopGyroscope</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>startGyroscope</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>scanCode</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>login</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>checkSession</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>getUserInfo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>requestPayment</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>createCanvasContext</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>canvasToTempFilePath</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>canvasPutImageData</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>canvasGetImageData</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>createSelectorQuery</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>onWindowResize</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>offWindowResize</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>arrayBufferToBase64</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>base64ToArrayBuffer</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>connectSocket</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>getNetworkType</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>onNetworkStatusChange</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>offNetworkStatusChange</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr></tbody></table> <h2 id="webview-bridge"><a href="#webview-bridge" class="header-anchor">#</a> webview-bridge</h2> <p>Mpx 支持小程序跨平台后，多个平台的小程序里都提供了 webview 组件，webview 打开的 H5 页面可以通过小程序提供的 API 来与小程序通信以及调用一些小程序的能力，但是各家小程序对于 webview 提供的API是不一样的。</p> <p>比如微信的 webview 打开的 H5 页面里是通过调用 wx.miniProgram.navigateTo 来跳转到原生小程序页面的，而在支付宝是通过调用 my.navigateTo 来实现跳转的，那么我们开发 H5 时候为了让 H5 能适应各家小程序平台就需要写多份对应逻辑。</p> <p>为解决这个问题，Mpx 提供了抹平平台差异的bridge库：@mpxjs/webview-bridge。</p> <p><strong>安装：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>npm install @mpxjs<span class="token operator">/</span>webview<span class="token operator">-</span>bridge
+</code></pre></div><p><strong>使用：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/webview-bridge'</span>
+mpx<span class="token punctuation">.</span><span class="token function">navigateBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+mpx<span class="token punctuation">.</span>env <span class="token comment">// 输出：wx/qq/ali/baidu/tt</span>
+mpx<span class="token punctuation">.</span><span class="token function">checkJSApi</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>cdn地址引用：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 开发环境版本，方便调试 <span class="token operator">--</span><span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">&quot;https://dpubstatic.udache.com/static/dpubimg/D2JeLyT0_Y/2.2.43.webviewbridge.js&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+
+<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 生产环境版本，压缩了体积 <span class="token operator">--</span><span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">&quot;https://dpubstatic.udache.com/static/dpubimg/PRg145LZ-i/2.2.43.webviewbridge.min.js&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+
+
+<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 同时支持 <span class="token constant">ES</span> Module 引入的 <span class="token operator">--</span><span class="token operator">&gt;</span>
+<span class="token comment">// index.html</span>
+<span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;module&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;https://dpubstatic.udache.com/static/dpubimg/6MQOo-ocI4/2.2.43.webviewbridge.esm.browser.min.js&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+<span class="token comment">// main.js</span>
+<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">&quot;https://dpubstatic.udache.com/static/dpubimg/6MQOo-ocI4/2.2.43.webviewbridge.esm.browser.min.js&quot;</span>
+
+<span class="token comment">//ES Module 开发版本地址： https://dpubstatic.udache.com/static/dpubimg/cdhpNhmWmJ/2.2.43.webviewbridge.esm.browser.js</span>
+</code></pre></div><p><strong>基础方法提供：</strong></p> <table><thead><tr><th>方法/平台</th> <th style="text-align:center;">wx</th> <th style="text-align:center;">qq</th> <th style="text-align:center;">ali</th> <th style="text-align:center;">baidu</th> <th style="text-align:right;">tt</th></tr></thead> <tbody><tr><td>navigateTo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>navigateBack</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>switchTab</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>reLaunch</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>redirectTo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>getEnv</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>postMessage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>getLoadError</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>onMessage</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr></tbody></table> <p><strong>扩展方法提供：</strong></p> <table><thead><tr><th>方法/平台</th> <th style="text-align:center;">wx</th> <th style="text-align:center;">qq</th> <th style="text-align:center;">ali</th> <th style="text-align:center;">baidu</th> <th style="text-align:right;">tt</th></tr></thead> <tbody><tr><td>checkJSApi</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>chooseImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">❌</td></tr> <tr><td>previewImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">❌</td></tr> <tr><td>uploadImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>downloadImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>getLocalImgData</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>startRecord</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>stopRecord</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>onVoiceRecordEnd</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>playVoice</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>pauseVoice</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>stopVoice</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>onVoicePlayEnd</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>uploadVoice</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>downloadVoice</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>translateVoice</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>getNetworkType</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">❌</td></tr> <tr><td>openLocation</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">❌</td></tr> <tr><td>getLocation</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">❌</td></tr> <tr><td>stopSearchBeacons</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>onSearchBeacons</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>scanQRCode</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>chooseCard</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>addCard</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>openCard</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>alert</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>showLoading</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>hideLoading</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>setStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>getStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>removeStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>clearStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>getStorageInfo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>startShare</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>tradePay</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>onMessage</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr></tbody></table> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>这个库仅提供给 H5 使用，请勿在小程序环境引入</p></div> <h2 id="size-report"><a href="#size-report" class="header-anchor">#</a> size-report</h2> <p>Mpx框架项目包体积可以进行分组、分包、页面、冗余Npm包等维度的分析和对比，详细<a href="/advance/size-report.html">请见</a></p> <h3 id="插件配置项"><a href="#插件配置项" class="header-anchor">#</a> 插件配置项</h3> <ul><li><p><strong>server</strong></p> <p><code>object</code></p> <p>本地可视化服务相关配置</p></li> <li><p><strong>filename</strong></p> <p><code>string</code></p> <p>构建生成的包体积详细输出文件地址</p></li> <li><p><strong>threshold</strong></p> <p><code>object</code></p> <p>配置项目总体积和分包体积阈值，包含两个字段，size 为项目总体积阈值，packages 为分包体积阈值</p> <div class="language-html extra-class"><pre class="language-html"><code>{
+   size: '16MB', // 项目总包体积限额 16M
+   packages: '2MB' // 项目每个分包体积限额 2M
+}
+</code></pre></div></li> <li><p><strong>groups</strong></p> <p><code>Array&lt;object&gt;</code></p> <p>配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息</p> <ul><li><p>name</p> <p><code>string</code></p> <p>分组名称</p></li> <li><p>threshold</p> <p><code>string | object</code></p> <p>分组相关体积阈值，若不配置则该分组不校验体积阈值，同时也支持对分组中占各分包体积阈值</p> <div class="language-html extra-class"><pre class="language-html"><code>// 分组体积限额 500KB
+threshold: '500KB'
+// 或者如下方，分组体积限额500KB，分组占主包体积限额160KB
+threshold: {
+  size: '500KB',
+  packages: {
+    main: '160KB'
+  }
+}
+</code></pre></div></li> <li><p>entryRules</p> <p><code>object</code></p> <p>配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry</p> <ul><li>include: 包含符合条件的入口文件，默认为空数组，规则数组中支持函数、正则、字符串</li> <li>exclude: 剔除符合条件的入口文件，默认为空数组，规则数组中支持函数、正则、字符串</li></ul> <div class="language-html extra-class"><pre class="language-html"><code>include: [/@someGroup\/some-npm-package/],
+exclude: [/@someGroup\/some-two-pack/]
+</code></pre></div></li> <li><p>noEntryRules</p> <p><code>object</code></p> <p>配置计算分组中纯 js 入口引入的体积（不包含组件和页面）</p> <ul><li>include: 包含符合条件的 js 文件，默认为空数组，规则数组中支持函数、正则、字符串</li> <li>exclude: 剔除符合条件的 js 文件，默认为空数组，规则数组中支持函数、正则、字符串</li></ul> <div class="language-html extra-class"><pre class="language-html"><code>include: [/@someGroup\/some-npm-package/],
+exclude: [/@someGroup\/some-two-pack/]
+</code></pre></div></li></ul></li> <li><p><strong>reportPages</strong></p> <p><code>boolean</code></p> <p>是否收集页面维度体积详情，默认 false</p></li> <li><p><strong>reportAssets</strong></p> <p><code>boolean</code></p> <p>是否收集资源维度体积详情，默认 false</p></li> <li><p><strong>reportRedundance</strong></p> <p><code>boolean</code></p> <p>是否收集冗余资源，默认 false</p></li> <li><p><strong>showEntrysPackages</strong></p> <p><code>Array&lt;string&gt;</code></p> <p>展示某些分包资源的引用来源信息，例如 ['main'] 为查看主包资源的引用来源信息，默认为 []</p></li></ul> <p>配置使用示例：</p> <div class="language-html extra-class"><pre class="language-html"><code>{
+  // 本地可视化服务相关配置
+  server: {
+    enable: true, // 是否启动本地服务，非必填，默认 true
+    autoOpenBrowser: true, // 是否自动打开可视化平台页面，非必填，默认 true
+    port: 0, // 本地服务端口，非必填，默认 0(随机端口)
+    host: '127.0.0.1', // 本地服务host，非必填
+  },
+  // 体积报告生成后输出的文件地址名，路径相对为 dist/wx 或者 dist/ali
+  filename: '../report.json',
+  // 配置阈值，此处代表总包体积阈值为 16MB，分包体积阈值为 2MB，超出将会触发编译报错提醒，该报错不阻断构建
+  threshold: {
+    size: '16MB',
+    packages: '2MB'
+  },
+  // 配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息
+  groups: [
+    {
+      // 分组名称
+      name: 'vant',
+      // 配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry，如下所示的分组配置将计算项目中引入的 vant 组件带来的体积占用
+      entryRules: {
+        include: '@vant/weapp'
+      }
+    },
+    {
+      name: 'pageGroup',
+      // 每个分组中可分别配置阈值，如果不配置则表示
+      threshold: '500KB',
+      entryRules: {
+        include: ['src/pages/index', 'src/pages/user']
+      }
+    },
+    {
+      name: 'someSdk',
+      entryRules: {
+        include: ['@somegroup/someSdk/index', '@somegroup/someSdk2/index']
+      },
+      // 有的时候你可能希望计算纯 js 入口引入的体积（不包含组件和页面），这种情况下需要使用 noEntryRules
+      noEntryRules: {
+        include: 'src/lib/sdk.js'
+      }
+    }
+  ],
+  // 是否收集页面维度体积详情，默认 false
+  reportPages: true,
+  // 是否收集资源维度体积详情，默认 false
+  reportAssets: true,
+  // 是否收集冗余资源，默认 false
+  reportRedundance: true,
+  // 展示某些分包资源的引用来源信息，默认为 []
+  showEntrysPackages: ['main']
+}
+</code></pre></div><h2 id="i18n"><a href="#i18n" class="header-anchor">#</a> i18n</h2> <h3 id="usei18n"><a href="#usei18n" class="header-anchor">#</a> useI18n</h3> <p>组合式 API 中使用，用来获取 i18n 实例。</p> <p><strong>参数选项</strong></p> <hr> <h4 id="locale"><a href="#locale" class="header-anchor">#</a> locale</h4> <p><code>Locale</code></p> <p>设置语言环境</p> <p><strong>注意：</strong> 只传 locale，不传 messages 属性时不起作用</p> <h4 id="fallbacklocale"><a href="#fallbacklocale" class="header-anchor">#</a> fallbackLocale</h4> <p><code>Locale</code></p> <p>预设的语言环境，找不到语言环境时进行回退。</p> <h4 id="messages"><a href="#messages" class="header-anchor">#</a> messages</h4> <p><code>LocaleMessages</code></p> <p>本地化的语言环境信息。</p> <p><strong>返回实例属性和方法</strong></p> <hr> <h4 id="locale-2"><a href="#locale-2" class="header-anchor">#</a> locale</h4> <p><code>WritableComputedRef&lt;Locale&gt;</code></p> <p>可响应性的 ref 对象，表示当前 i18n 实例所使用的 locale。</p> <p>修改 ref 值会对局部或者全局语言集的 locale 进行更改，并触发翻译方法重新执行。</p> <h4 id="fallbackroot"><a href="#fallbackroot" class="header-anchor">#</a> fallbackRoot</h4> <p><code>boolean</code></p> <p>本地化失败时是否回归到全局作用域。</p> <h4 id="getlocalemessage-locale"><a href="#getlocalemessage-locale" class="header-anchor">#</a> getLocaleMessage( locale )</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">getLocaleMessage</span> <span class="token punctuation">(</span>locale<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> LocaleMessageObject
+</code></pre></div><p>获取语言环境的 <code>locale</code> 信息。</p> <h4 id="setlocalemessage-locale-message"><a href="#setlocalemessage-locale-message" class="header-anchor">#</a> setLocaleMessage( locale, message )</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">setLocaleMessage</span><span class="token punctuation">(</span>locale<span class="token operator">:</span> Locale<span class="token punctuation">,</span> messages<span class="token operator">:</span> LocaleMessageObject<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><p>设置语言环境的 <code>locale</code> 信息。</p> <h4 id="mergelocalemessage-locale-message"><a href="#mergelocalemessage-locale-message" class="header-anchor">#</a> mergeLocaleMessage( locale, message )</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">mergeLocaleMessage</span><span class="token punctuation">(</span>locale<span class="token operator">:</span> Locale<span class="token punctuation">,</span> messages<span class="token operator">:</span> LocaleMessageObject<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><p>将语言环境信息 <code>locale</code> 合并到已注册的语言环境信息中。</p> <h4 id="messages-2"><a href="#messages-2" class="header-anchor">#</a> messages</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">readonly</span> messages<span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span><span class="token punctuation">{</span>
+   <span class="token punctuation">[</span><span class="token constant">K</span> <span class="token keyword">in</span> <span class="token keyword">keyof</span> Messages<span class="token punctuation">]</span><span class="token operator">:</span> Messages<span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
+</code></pre></div><ul><li><strong>只读</strong></li></ul> <p>局部或者全局的语言环境信息。</p> <h4 id="isglobal"><a href="#isglobal" class="header-anchor">#</a> isGlobal</h4> <p><code>boolean</code></p> <p>是否是全局 i18n 实例。</p> <h4 id="t"><a href="#t" class="header-anchor">#</a> t</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">t</span><span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> choice<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> values<span class="token operator">:</span> <span class="token builtin">Array</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> TranslateResult
+</code></pre></div><p>文案翻译函数</p> <p>根据传入的 key 以及当前 locale 环境获取对应文案，文案来源是全局作用域还是本地作用域取决于 <code>useI18n</code> 执行时是否传入对应的 <code>messages、locale</code> 等值。</p> <p><strong>choice 参数可选</strong> ，当传入 choice 时，t 函数的表现为使用复数进行翻译，和老版本中的 tc 函数表现一致。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('car', 1)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('car', 2)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('apple', 0)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('apple', 1)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('apple', 10, {count: 10})}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token comment">// 语言环境信息如下：</span>
+  <span class="token keyword">const</span> messages <span class="token operator">=</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">en</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">car</span><span class="token operator">:</span> <span class="token string">'car | cars'</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">apple</span><span class="token operator">:</span> <span class="token string">'no apples | one apple | {count} apples'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>输入如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>car<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>cars<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>no apples<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>one apple<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>10 apples<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>关于复数的更多信息可以点击<a href="https://kazupon.github.io/vue-i18n/zh/guide/pluralization.html#%E5%A4%8D%E6%95%B0" target="_blank" rel="noopener noreferrer">查看<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>values 参数可选</strong> ，如果需要对文案信息即逆行格式化处理，则需要传入 values。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  // 模版输出 hello world
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('message.hello', { msg: 'hello'})}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> useI18n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/core&quot;</span>
+
+  <span class="token keyword">const</span> messages <span class="token operator">=</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">en</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} world'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+  
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+        <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+          <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+              <span class="token string-property property">'en-US'</span><span class="token operator">:</span> en
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>t<span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h4 id="te"><a href="#te" class="header-anchor">#</a> te</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">te</span><span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
+</code></pre></div><p>检查 key 是否存在。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/api/optional-api.html" class="prev">
+        选项式 API
+      </a></span> <!----></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/41.8351af86.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/global-api.html b/docs-vuepress/.vuepress/dist/api/global-api.html
new file mode 100644
index 0000000000..2fc002be47
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/global-api.html
@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>全局 API | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/42.53972f6c.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" aria-current="page" class="active sidebar-link">全局 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/global-api.html#global-mpx" class="sidebar-link">全局对象 Mpx</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#createapp" class="sidebar-link">createApp</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#createpage" class="sidebar-link">createPage</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#createcomponent" class="sidebar-link">createComponent</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#nexttick" class="sidebar-link">nextTick</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#topureobject" class="sidebar-link">toPureObject</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#getmixin" class="sidebar-link">getMixin</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#implement" class="sidebar-link">implement</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#built-in-lifecycle-variable" class="sidebar-link">内建生命周期变量</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#响应式-api" class="sidebar-link">响应式 API</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#组合式-api" class="sidebar-link">组合式 API</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#store-api" class="sidebar-link">store API</a></li></ul></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="全局-api"><a href="#全局-api" class="header-anchor">#</a> 全局 API</h1> <h2 id="global-mpx"><a href="#global-mpx" class="header-anchor">#</a> 全局对象 Mpx </h2> <p><code>@mpxjs/core</code> 默认导出 mpx 全局实例对象，通过该实例对象我们可以访问部分应用实例 API</p> <h3 id="mixin"><a href="#mixin" class="header-anchor">#</a> mixin</h3> <p>全局注入mixin方法接收两个参数：mpx.mixin(mixins, options)</p> <ul><li>第一个参数是要混入的mixins，接收类型 <code>MixinObject|MixinObject[]</code></li> <li>第二个参数是为全局混入配置，形如<code>{types:string|string[], stage:number}</code>，其中<code>types</code>用于控制mixin注入的范围，可选值有<code>'app'|'page'|'component'</code>；<code>stage</code>用于控制注入mixin的插入顺序，当stage为负数时，注入的mixin会被插入到构造函数配置中的<code>options.mixins</code>之前，数值越小约靠前，反之当stage为正数时，注入的mixin会被插入到<code>options.mixins</code>之后，数值越大越靠后。</li></ul> <blockquote><p>所有mixin中生命周期的执行均先于构造函数配置中直接声明的生命周期，mixin之间的执行顺序则遵从于其在<code>options.mixins</code>数组中的顺序</p></blockquote> <blockquote><p>options的默认值为<code>{types: ['app','page','component'], stage: -1}</code>，不传stage时，全局注入mixin的声明周期默认在<code>options.mixins</code>之前执行</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token comment">// 只在page中混入</span>
+mpx<span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function-variable function">getData</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">types</span><span class="token operator">:</span><span class="token string">'page'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 默认混入，在app|page|component中都会混入</span>
+mpx<span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+  <span class="token punctuation">{</span>
+    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function-variable function">getData</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">{</span>
+    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function-variable function">setData</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">]</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 只在component中混入，且执行顺序在options.mixins之后</span>
+mpx<span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">attached</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'com attached'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">types</span><span class="token operator">:</span> <span class="token string">'component'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">stage</span><span class="token operator">:</span> <span class="token number">100</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="injectmixins"><a href="#injectmixins" class="header-anchor">#</a> injectMixins</h3> <p>该方法是 <code>mpx.mixin</code> 方法的别名，<code>mpx.injectMixins({})</code> 等同于 <code>mpx.mixin({})</code></p> <h3 id="observable"><a href="#observable" class="header-anchor">#</a> observable</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">observable</span><span class="token punctuation">(</span>options<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token operator">:</span> Mpx
+</code></pre></div><p>用于创建响应式数据。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token comment">// 直接通过 mpx 对象访问</span>
+<span class="token keyword">const</span> b <span class="token operator">=</span> mpx<span class="token punctuation">.</span><span class="token function">observable</span><span class="token punctuation">(</span>object<span class="token punctuation">)</span>
+</code></pre></div><ul><li><strong>注意：</strong>
+Mpx 2.8 版本后该 API 等同于 <code>reactive</code>，同时不再支持具名导出方式，建议直接使用 <code>reactive</code> 替代，请<a href="/api/reactivity-api/basic-reactivity.html#reactive">点击</a>查看。</li></ul> <h3 id="set"><a href="#set" class="header-anchor">#</a> set</h3> <p>用于对一个响应式对象新增属性，会<code>触发订阅者更新操作</code>。<a href="/api/global-api.html#set">查看详情</a></p> <h3 id="delete"><a href="#delete" class="header-anchor">#</a> delete</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token keyword">delete</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Object<span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><p>用于对一个响应式对象删除属性，会<code>触发订阅者更新操作</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+mpx<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">)</span>
+</code></pre></div><ul><li><strong>注意：</strong> <code>mpx.delete</code> 也可以使用具名导出的 <code>del</code>。<a href="/api/global-api.html#del">查看详情</a></li></ul> <h3 id="use"><a href="#use" class="header-anchor">#</a> use</h3> <blockquote><p>用于安装外部扩展, 支持多参数
+方法接收两个参数：mpx.use(plugin, options)</p></blockquote> <ul><li>第一个参数是要安装的外部扩展</li> <li>第二个参数是对象，如果第二个参数是一个包含（prefix or postfix）的option， 那么将会对插件扩展的属性添加前缀或后缀</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> test <span class="token keyword">from</span> <span class="token string">'./test'</span>
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>test<span class="token punctuation">)</span>
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>test<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'mpx'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'otherparams'</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="watch"><a href="#watch" class="header-anchor">#</a> watch</h3> <p>watch 可以通过全局实例访问，也可以使用具名导出的方式，二者逻辑相同，我们推荐使用具名导出的方式。<a href="/api/reactivity-api/computed-watch-api.html#watch">查看详情</a></p> <h2 id="createapp"><a href="#createapp" class="header-anchor">#</a> createApp</h2> <blockquote><p>注册一个小程序，接受一个 Object 类型的参数</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createApp<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">onLaunch</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Launch'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">onShow</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Page show'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">//全局变量 可通过getApp()访问</span>
+  <span class="token literal-property property">globalDataA</span><span class="token operator">:</span> <span class="token string">'I am global dataA'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">globalDataB</span><span class="token operator">:</span> <span class="token string">'I am global dataB'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token comment">// 或者</span>
+<span class="token function">createApp</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span>
+</code></pre></div><h2 id="createpage"><a href="#createpage" class="header-anchor">#</a> createPage</h2> <blockquote><p>类微信小程序（微信、百度、头条等）内部使用<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html" target="_blank" rel="noopener noreferrer">Component的方式创建页面<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，所以除了支持页面的生命周期之外还同时支持组件的一切特性。当使用 Component 创建页面时，页面生命周期需要写在 methods 内部（微信小程序原生规则），mpx 进行了统一封装转换，页面生命周期都写在最外层即可</p></blockquote> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createPage</span><span class="token punctuation">(</span>options<span class="token operator">:</span> object<span class="token punctuation">,</span> config<span class="token operator">?</span><span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><ul><li><p>options:</p> <p>具体形式除了 computed、watch 这类 Mpx 扩展特性之外，其他的属性都参照原生小程序的官方文档即可。</p></li> <li><p>config:</p> <p>如果希望标识一个组件是最纯粹的原生组件，不用数据响应等能力，可通过 config.isNative 传 true 声明。
+如果有需要复写/改写最终调用的创建页面的构造器，可以通过 config 对象的 customCtor 提供。</p> <ul><li><strong>注意:</strong>
+mpx本身是用 component 来创建页面的，如果传page可能在初始化时候生命周期不正常导致取props有一点问题</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createPage<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">test2</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>test <span class="token operator">+</span> <span class="token number">1</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">test</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> old</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> old<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">onShow</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>test<span class="token operator">++</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="createcomponent"><a href="#createcomponent" class="header-anchor">#</a> createComponent</h2> <blockquote><p>创建自定义组件，接受两个Object类型的参数。</p></blockquote> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createComponent</span><span class="token punctuation">(</span>options<span class="token operator">:</span> object<span class="token punctuation">,</span> config<span class="token operator">?</span><span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">prop</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">type</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
+      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">10</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">test2</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>test <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>prop
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">test</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> old</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> old<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">prop</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">handler</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> old</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> old<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否首次执行一次</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="nexttick"><a href="#nexttick" class="header-anchor">#</a> nextTick</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">nextTick</span><span class="token punctuation">(</span>callback<span class="token operator">:</span> <span class="token builtin">Function</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><p>当我们在 Mpx 中更改响应性状态时，最终页面的更新并不是同步立即生效的，而是由 Mpx 将它们缓存在一个队列中， 等到下一个 tick 一起执行，
+从而保证了组件/页面无论发生多少状态改变，都仅执行一次更新，从而减少 <code>setData</code> 调用次数。</p> <p><code>nextTick()</code> 可以在状态改变后立即调用，可以传递一个函数作为参数，在等待页面/组件更新完成后，函数参数会触发执行。</p> <div class="language-js extra-class"><pre class="language-js"><code>     <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> nextTick<span class="token punctuation">,</span> ref<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+     <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+       <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+         <span class="token keyword">const</span> showChild <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
+         <span class="token comment">// DOM 还没有更新</span>
+         <span class="token function">setTimeOut</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+            showChild<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span>
+         <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span>
+         <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+           context<span class="token punctuation">.</span>refs<span class="token punctuation">[</span><span class="token string">'child'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+         <span class="token punctuation">}</span><span class="token punctuation">)</span>
+         <span class="token keyword">return</span> <span class="token punctuation">{</span>
+           showChild
+         <span class="token punctuation">}</span>
+       <span class="token punctuation">}</span>
+     <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="topureobject"><a href="#topureobject" class="header-anchor">#</a> toPureObject</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">toPureObject</span><span class="token punctuation">(</span>options<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token operator">:</span> object
+</code></pre></div><p>业务拿到的数据可能是响应式数据实例（包含了些其他属性），使用<code>toPureObject</code>方法可以将响应式的数据转化成纯 js 对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>toPureObject<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">const</span> pureObject <span class="token operator">=</span> <span class="token function">toPureObject</span><span class="token punctuation">(</span>object<span class="token punctuation">)</span>
+</code></pre></div><h2 id="getmixin"><a href="#getmixin" class="header-anchor">#</a> getMixin</h2> <p>专为ts项目提供的反向推导辅助方法，该函数接收类型为 <code>Object</code> ,会将传入的嵌套mixins对象拉平成一个扁平的mixin对象</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> getMixin<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token comment">// 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin</span>
+<span class="token keyword">const</span> mixin <span class="token operator">=</span> <span class="token function">getMixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">getMixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">value1</span><span class="token operator">:</span> <span class="token number">2</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">lifetimes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">attached</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value1<span class="token punctuation">,</span> <span class="token string">'attached'</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">getMixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">value2</span><span class="token operator">:</span> <span class="token number">6</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value1 <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value2 <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>outsideVal<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token comment">/*
+mixin值
+{
+  data: {value2: 6, value1: 2},
+  created: ƒ created(),
+  attached: ƒ attached()
+}
+*/</span>
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">outsideVal</span><span class="token operator">:</span> <span class="token number">20</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span>mixin<span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">/*
+以上执行输出：
+28
+2 &quot;attached&quot;
+*/</span>
+</code></pre></div><h2 id="implement"><a href="#implement" class="header-anchor">#</a> implement</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">implement</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> options<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token operator">:</span> object
+</code></pre></div><ul><li><code>{Object} options</code> <ul><li><code>{Array} modes</code>：需要取消的平台</li> <li><code>{Boolean} remove</code>：是否将此能力直接移除</li> <li><code>{Function} processor</code>：设置成功的回调函数</li></ul></li></ul> <p>以微信为 base 将代码转换输出到其他平台时（如支付宝、web 平台等），会存在一些无法进行模拟的跨平台差异，会在运行时进行检测并报错指出，例如微信转支付宝时使用 moved 生命周期等。使用<code>implement</code>方法可以取消这种报错。您可以使用 mixin 自行实现跨平台差异，然后使用 implement 取消报错。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>implement<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">if</span> <span class="token punctuation">(</span>__mpx_mode__ <span class="token operator">===</span> <span class="token string">'web'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> <span class="token function-variable function">processor</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token punctuation">}</span>
+  <span class="token function">implement</span><span class="token punctuation">(</span><span class="token string">'onShareAppMessage'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">modes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'web'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 需要取消的平台，可配置多个</span>
+    <span class="token literal-property property">remove</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否将此能力直接移除</span>
+    processor <span class="token comment">// 设置成功的回调函数</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="built-in-lifecycle-variable"><a href="#built-in-lifecycle-variable" class="header-anchor">#</a> 内建生命周期变量 </h2> <p>Mpx 在运行时自身有着一套内建生命周期，当开发者想使用内建生命周期时，可以通过内建生命周期变量进行对应生命周期的注册，
+需要注意的是，这部分内建生命周期变量<strong>只能用于选项式 API 中</strong>。</p> <h3 id="beforecreate"><a href="#beforecreate" class="header-anchor">#</a> BEFORECREATE</h3> <p><code>string</code></p> <p>在组件实例刚刚被创建时执行，在实例初始化之后、进行数据侦听和 data 初始化之前同步调用，注意此时不能调用 setData。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> <span class="token constant">BEFORECREATE</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/core&quot;</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token punctuation">[</span><span class="token constant">BEFORECREATE</span><span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'beforecreate trigger'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="created"><a href="#created" class="header-anchor">#</a> CREATED</h3> <p><code>string</code></p> <p>在组件实例刚刚被创建时执行。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、事件/侦听器的回调函数。
+然而，挂载阶段还没开始，注意此时不能调用 setData。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> <span class="token constant">CREATED</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/core&quot;</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token punctuation">[</span><span class="token constant">CREATED</span><span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'beforecreate trigger'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="beforemount"><a href="#beforemount" class="header-anchor">#</a> BEFOREMOUNT</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onbeforemount">onBeforeMount</a></p> <h3 id="mounted"><a href="#mounted" class="header-anchor">#</a> MOUNTED</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onmounted">onMounted</a></p> <h3 id="beforeupdate"><a href="#beforeupdate" class="header-anchor">#</a> BEFOREUPDATE</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onbeforeupdate">onBeforeUpdate</a></p> <h3 id="updated"><a href="#updated" class="header-anchor">#</a> UPDATED</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onupdated">onUpdated</a></p> <h3 id="serverprefetch"><a href="#serverprefetch" class="header-anchor">#</a> SERVERPREFETCH</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onServerPrefetch">onServerPrefetch</a></p> <h3 id="beforeunmount"><a href="#beforeunmount" class="header-anchor">#</a> BEFOREUNMOUNT</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onbeforeunmount">onBeforeUnmount</a></p> <h3 id="unmounted"><a href="#unmounted" class="header-anchor">#</a> UNMOUNTED</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onunmounted">onUnmounted</a></p> <h3 id="onload"><a href="#onload" class="header-anchor">#</a> ONLOAD</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onload">onLoad</a></p> <h3 id="onshow"><a href="#onshow" class="header-anchor">#</a> ONSHOW</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onshow">onShow</a></p> <h3 id="onhide"><a href="#onhide" class="header-anchor">#</a> ONHIDE</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onhide">onHide</a></p> <h3 id="onresize"><a href="#onresize" class="header-anchor">#</a> ONRESIZE</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onresize">onResize</a></p> <h2 id="响应式-api"><a href="#响应式-api" class="header-anchor">#</a> 响应式 API</h2> <p>详情请<a href="/api/reactivity-api/basic-reactivity.html">移步</a></p> <h2 id="组合式-api"><a href="#组合式-api" class="header-anchor">#</a> 组合式 API</h2> <p>详情请<a href="/api/composition-api.html">移步</a></p> <h2 id="store-api"><a href="#store-api" class="header-anchor">#</a> store API</h2> <p>详情请<a href="/api/store-api.html">移步</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/api/app-config.html" class="prev">
+        全局配置
+      </a></span> <span class="next"><a href="/api/instance-api.html">
+        实例 API
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/42.53972f6c.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/index.html b/docs-vuepress/.vuepress/dist/api/index.html
new file mode 100644
index 0000000000..2e07eecb72
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/23.365f9a87.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><div id="api-index" data-v-a2f64316><div class="header" data-v-a2f64316><h1 data-v-a2f64316>API 参考</h1> <div class="api-filter" data-v-a2f64316><label for="api-filter" data-v-a2f64316>过滤</label> <input type="search" placeholder="Enter keyword" id="api-filter" value="" data-v-a2f64316></div></div> <div class="api-section" data-v-a2f64316><h2 id="全局配置" data-v-a2f64316>全局配置</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><!----> <ul data-v-a2f64316><li data-v-a2f64316><a href="app-config.html#usestrictdiff" data-v-a2f64316>useStrictDiff</a></li><li data-v-a2f64316><a href="app-config.html#ignorewarning" data-v-a2f64316>ignoreWarning</a></li><li data-v-a2f64316><a href="app-config.html#ignoreproxywhitelist" data-v-a2f64316>ignoreProxyWhiteList</a></li><li data-v-a2f64316><a href="app-config.html#observeclassinstance" data-v-a2f64316>observeClassInstance</a></li><li data-v-a2f64316><a href="app-config.html#proxyeventhandler" data-v-a2f64316>proxyEventHandler</a></li><li data-v-a2f64316><a href="app-config.html#setdatahandler" data-v-a2f64316>setDataHandler</a></li><li data-v-a2f64316><a href="app-config.html#forceflushsync" data-v-a2f64316>forceFlushSync</a></li><li data-v-a2f64316><a href="app-config.html#webrouteconfig" data-v-a2f64316>webRouteConfig</a></li><li data-v-a2f64316><a href="app-config.html#webconfig" data-v-a2f64316>webConfig</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="全局-api" data-v-a2f64316>全局 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>全局对象 Mpx</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="global-api.html#mixin" data-v-a2f64316>mixin</a></li><li data-v-a2f64316><a href="global-api.html#injectmixins" data-v-a2f64316>injectMixins</a></li><li data-v-a2f64316><a href="global-api.html#observable" data-v-a2f64316>observable</a></li><li data-v-a2f64316><a href="global-api.html#set" data-v-a2f64316>set</a></li><li data-v-a2f64316><a href="global-api.html#delete" data-v-a2f64316>delete</a></li><li data-v-a2f64316><a href="global-api.html#use" data-v-a2f64316>use</a></li><li data-v-a2f64316><a href="global-api.html#watch" data-v-a2f64316>watch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>基础 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="global-api.html#createapp" data-v-a2f64316>createApp</a></li><li data-v-a2f64316><a href="global-api.html#createpage" data-v-a2f64316>createPage</a></li><li data-v-a2f64316><a href="global-api.html#createcomponent" data-v-a2f64316>createComponent</a></li><li data-v-a2f64316><a href="global-api.html#nexttick" data-v-a2f64316>nextTick</a></li><li data-v-a2f64316><a href="global-api.html#topureobject" data-v-a2f64316>toPureObject</a></li><li data-v-a2f64316><a href="global-api.html#getmixin" data-v-a2f64316>getMixin</a></li><li data-v-a2f64316><a href="global-api.html#implement" data-v-a2f64316>implement</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>内建生命周期变量</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="global-api.html#beforecreate" data-v-a2f64316>BEFORECREATE</a></li><li data-v-a2f64316><a href="global-api.html#created" data-v-a2f64316>CREATED</a></li><li data-v-a2f64316><a href="global-api.html#beforemount" data-v-a2f64316>BEFOREMOUNT</a></li><li data-v-a2f64316><a href="global-api.html#mounted" data-v-a2f64316>MOUNTED</a></li><li data-v-a2f64316><a href="global-api.html#beforeupdate" data-v-a2f64316>BEFOREUPDATE</a></li><li data-v-a2f64316><a href="global-api.html#updated" data-v-a2f64316>UPDATED</a></li><li data-v-a2f64316><a href="global-api.html#beforeunmount" data-v-a2f64316>BEFOREUNMOUNT</a></li><li data-v-a2f64316><a href="global-api.html#unmounted" data-v-a2f64316>UNMOUNTED</a></li><li data-v-a2f64316><a href="global-api.html#onload" data-v-a2f64316>ONLOAD</a></li><li data-v-a2f64316><a href="global-api.html#onshow" data-v-a2f64316>ONSHOW</a></li><li data-v-a2f64316><a href="global-api.html#onhide" data-v-a2f64316>ONHIDE</a></li><li data-v-a2f64316><a href="global-api.html#onresize" data-v-a2f64316>ONRESIZE</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Store API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="store-api.html#createstore" data-v-a2f64316>createStore</a></li><li data-v-a2f64316><a href="store-api.html#createstorewiththis" data-v-a2f64316>createStoreWithThis</a></li><li data-v-a2f64316><a href="store-api.html#createstatewiththis" data-v-a2f64316>createStateWithThis</a></li><li data-v-a2f64316><a href="store-api.html#creategetterswiththis" data-v-a2f64316>createGettersWithThis</a></li><li data-v-a2f64316><a href="store-api.html#createmutationswiththis" data-v-a2f64316>createMutationsWithThis</a></li><li data-v-a2f64316><a href="store-api.html#createactionswiththis" data-v-a2f64316>createActionsWithThis</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="响应式-api" data-v-a2f64316>响应式 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>响应式基础 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#set" data-v-a2f64316>set</a></li><li data-v-a2f64316><a href="reactivity-api.html#del" data-v-a2f64316>del</a></li><li data-v-a2f64316><a href="reactivity-api.html#reactive" data-v-a2f64316>reactive</a></li><li data-v-a2f64316><a href="reactivity-api.html#isreactive" data-v-a2f64316>isReactive</a></li><li data-v-a2f64316><a href="reactivity-api.html#markraw" data-v-a2f64316>markRaw</a></li><li data-v-a2f64316><a href="reactivity-api.html#shallowreactive" data-v-a2f64316>shallowReactive</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Refs</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#ref" data-v-a2f64316>ref</a></li><li data-v-a2f64316><a href="reactivity-api.html#unref" data-v-a2f64316>unref</a></li><li data-v-a2f64316><a href="reactivity-api.html#toref" data-v-a2f64316>toRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#torefs" data-v-a2f64316>toRefs</a></li><li data-v-a2f64316><a href="reactivity-api.html#isref" data-v-a2f64316>isRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#customref" data-v-a2f64316>customRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#shallowref" data-v-a2f64316>shallowRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#triggerref" data-v-a2f64316>triggerRef</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Computed 与 Watch</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#computed" data-v-a2f64316>computed</a></li><li data-v-a2f64316><a href="reactivity-api.html#watcheffect" data-v-a2f64316>watchEffect</a></li><li data-v-a2f64316><a href="reactivity-api.html#watchsynceffect" data-v-a2f64316>watchSyncEffect</a></li><li data-v-a2f64316><a href="reactivity-api.html#watchposteffect" data-v-a2f64316>watchPostEffect</a></li><li data-v-a2f64316><a href="reactivity-api.html#watch" data-v-a2f64316>watch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Effect 作用域 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#effectscope" data-v-a2f64316>effectScope</a></li><li data-v-a2f64316><a href="reactivity-api.html#getcurrentscope" data-v-a2f64316>getCurrentScope</a></li><li data-v-a2f64316><a href="reactivity-api.html#onscopedispose" data-v-a2f64316>onScopeDispose</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="组合式-api" data-v-a2f64316>组合式 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>生命周期钩子</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="composition-api.html#onbeforemount" data-v-a2f64316>onBeforeMount</a></li><li data-v-a2f64316><a href="composition-api.html#onmounted" data-v-a2f64316>onMounted</a></li><li data-v-a2f64316><a href="composition-api.html#onbeforeupdate" data-v-a2f64316>onBeforeUpdate</a></li><li data-v-a2f64316><a href="composition-api.html#onupdated" data-v-a2f64316>onUpdated</a></li><li data-v-a2f64316><a href="composition-api.html#onbeforeunmount" data-v-a2f64316>onBeforeUnmount</a></li><li data-v-a2f64316><a href="composition-api.html#onunmount" data-v-a2f64316>onUnmount</a></li><li data-v-a2f64316><a href="composition-api.html#onload" data-v-a2f64316>onLoad</a></li><li data-v-a2f64316><a href="composition-api.html#onshow" data-v-a2f64316>onShow</a></li><li data-v-a2f64316><a href="composition-api.html#onhide" data-v-a2f64316>onHide</a></li><li data-v-a2f64316><a href="composition-api.html#onresize" data-v-a2f64316>onResize</a></li><li data-v-a2f64316><a href="composition-api.html#onpulldownrefresh" data-v-a2f64316>onPullDownRefresh</a></li><li data-v-a2f64316><a href="composition-api.html#onreachbottom" data-v-a2f64316>onReachBottom</a></li><li data-v-a2f64316><a href="composition-api.html#onshareappmessage" data-v-a2f64316>onShareAppMessage</a></li><li data-v-a2f64316><a href="composition-api.html#onsharetimeline" data-v-a2f64316>onShareTimeline</a></li><li data-v-a2f64316><a href="composition-api.html#onaddtofavorites" data-v-a2f64316>onAddToFavorites</a></li><li data-v-a2f64316><a href="composition-api.html#onpagescroll" data-v-a2f64316>onPageScroll</a></li><li data-v-a2f64316><a href="composition-api.html#ontabitemtap" data-v-a2f64316>onTabItemTap</a></li><li data-v-a2f64316><a href="composition-api.html#onsaveexitstate" data-v-a2f64316>onSaveExitState</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>其他</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="composition-api.html#setup" data-v-a2f64316>setup</a></li><li data-v-a2f64316><a href="composition-api.html#getcurrentinstance" data-v-a2f64316>getCurrentInstance</a></li><li data-v-a2f64316><a href="composition-api.html#usei18n" data-v-a2f64316>useI18n</a></li><li data-v-a2f64316><a href="composition-api.html#usefetch" data-v-a2f64316>useFetch</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="选项式-api" data-v-a2f64316>选项式 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>实例 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="instance-api.html#set" data-v-a2f64316>$set</a></li><li data-v-a2f64316><a href="instance-api.html#watch" data-v-a2f64316>$watch</a></li><li data-v-a2f64316><a href="instance-api.html#delete" data-v-a2f64316>$delete</a></li><li data-v-a2f64316><a href="instance-api.html#refs" data-v-a2f64316>$refs</a></li><li data-v-a2f64316><a href="instance-api.html#asyncrefs" data-v-a2f64316>$asyncRefs</a></li><li data-v-a2f64316><a href="instance-api.html#forceupdate" data-v-a2f64316>$forceUpdate</a></li><li data-v-a2f64316><a href="instance-api.html#nexttick" data-v-a2f64316>$nextTick</a></li><li data-v-a2f64316><a href="instance-api.html#i18n" data-v-a2f64316>$i18n</a></li><li data-v-a2f64316><a href="instance-api.html#rawoptions" data-v-a2f64316>$rawOptions</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="内置相关" data-v-a2f64316>内置相关</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>模版指令 (1)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="directives.html#wx-if" data-v-a2f64316>wx:if</a></li><li data-v-a2f64316><a href="directives.html#wx-elif" data-v-a2f64316>wx:elif</a></li><li data-v-a2f64316><a href="directives.html#wx-else" data-v-a2f64316>wx:else</a></li><li data-v-a2f64316><a href="directives.html#wx-for" data-v-a2f64316>wx:for</a></li><li data-v-a2f64316><a href="directives.html#wx-for-index" data-v-a2f64316>wx:for-index</a></li><li data-v-a2f64316><a href="directives.html#wx-for-item" data-v-a2f64316>wx:for-item</a></li><li data-v-a2f64316><a href="directives.html#wx-key" data-v-a2f64316>wx:key</a></li><li data-v-a2f64316><a href="directives.html#wx-class" data-v-a2f64316>wx:class</a></li><li data-v-a2f64316><a href="directives.html#wx-style" data-v-a2f64316>wx:style</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>模版指令 (2)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="directives.html#wx-model" data-v-a2f64316>wx:model</a></li><li data-v-a2f64316><a href="directives.html#wx-model-prop" data-v-a2f64316>wx:model-prop</a></li><li data-v-a2f64316><a href="directives.html#wx-model-event" data-v-a2f64316>wx:model-event</a></li><li data-v-a2f64316><a href="directives.html#wx-model-value-path" data-v-a2f64316>wx:model-value-path</a></li><li data-v-a2f64316><a href="directives.html#wx-model-filter" data-v-a2f64316>wx:model-filter</a></li><li data-v-a2f64316><a href="directives.html#wx-ref" data-v-a2f64316>wx:ref</a></li><li data-v-a2f64316><a href="directives.html#wx-show" data-v-a2f64316>wx:show</a></li><li data-v-a2f64316><a href="directives.html#bind" data-v-a2f64316>bind</a></li><li data-v-a2f64316><a href="directives.html#catch" data-v-a2f64316>catch</a></li><li data-v-a2f64316><a href="directives.html#capture-bind" data-v-a2f64316>capture-bind</a></li><li data-v-a2f64316><a href="directives.html#capture-catch" data-v-a2f64316>capture-catch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>内建组件</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="builtIn.html#component" data-v-a2f64316>component</a></li><li data-v-a2f64316><a href="builtIn.html#slot" data-v-a2f64316>slot</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="编译构建" data-v-a2f64316>编译构建</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>webpack 配置</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#output-publicpath" data-v-a2f64316>output.publicPath</a></li><li data-v-a2f64316><a href="compile.html#output-filename" data-v-a2f64316>output.filename</a></li><li data-v-a2f64316><a href="compile.html#node-global" data-v-a2f64316>node.global</a></li><li data-v-a2f64316><a href="compile.html#rule-resourcequery" data-v-a2f64316>rule.resourceQuery</a></li><li data-v-a2f64316><a href="compile.html#resolve-extensions" data-v-a2f64316>resolve.extensions</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>MpxWebpackPlugin options (1)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#mode" data-v-a2f64316>mode</a></li><li data-v-a2f64316><a href="compile.html#srcmode" data-v-a2f64316>srcMode</a></li><li data-v-a2f64316><a href="compile.html#moderules" data-v-a2f64316>modeRules</a></li><li data-v-a2f64316><a href="compile.html#externalclasses" data-v-a2f64316>externalClasses</a></li><li data-v-a2f64316><a href="compile.html#resolvemode" data-v-a2f64316>resolveMode</a></li><li data-v-a2f64316><a href="compile.html#projectroot" data-v-a2f64316>projectRoot</a></li><li data-v-a2f64316><a href="compile.html#writemode" data-v-a2f64316>writeMode</a></li><li data-v-a2f64316><a href="compile.html#autoscoperules" data-v-a2f64316>autoScopeRules</a></li><li data-v-a2f64316><a href="compile.html#catch" data-v-a2f64316>catch</a></li><li data-v-a2f64316><a href="compile.html#forcedisableproxyctor" data-v-a2f64316>forceDisableProxyCtor</a></li><li data-v-a2f64316><a href="compile.html#transmpxrules" data-v-a2f64316>transMpxRules</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>MpxWebpackPlugin options (2)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#forceproxyeventrules" data-v-a2f64316>forceProxyEventRules</a></li><li data-v-a2f64316><a href="compile.html#autosplit" data-v-a2f64316>autoSplit</a></li><li data-v-a2f64316><a href="compile.html#defs" data-v-a2f64316>defs</a></li><li data-v-a2f64316><a href="compile.html#attributes" data-v-a2f64316>attributes</a></li><li data-v-a2f64316><a href="compile.html#externals" data-v-a2f64316>externals</a></li><li data-v-a2f64316><a href="compile.html#mininpmpackage" data-v-a2f64316>miniNpmPackage</a></li><li data-v-a2f64316><a href="compile.html#forceusepagector" data-v-a2f64316>forceUsePageCtor</a></li><li data-v-a2f64316><a href="compile.html#transrpxrules" data-v-a2f64316>transRpxRules</a></li><li data-v-a2f64316><a href="compile.html#postcssinlineconfig" data-v-a2f64316>postcssInlineConfig</a></li><li data-v-a2f64316><a href="compile.html#decodehtmltext" data-v-a2f64316>decodeHTMLText</a></li><li data-v-a2f64316><a href="compile.html#nativeconfig" data-v-a2f64316>nativeConfig</a></li><li data-v-a2f64316><a href="compile.html#webconfig" data-v-a2f64316>webConfig</a></li><li data-v-a2f64316><a href="compile.html#i18n" data-v-a2f64316>i18n</a></li><li data-v-a2f64316><a href="compile.html#auditresource" data-v-a2f64316>auditResource</a></li><li data-v-a2f64316><a href="compile.html#subpackagemodulesrules" data-v-a2f64316>subpackageModulesRules</a></li><li data-v-a2f64316><a href="compile.html#generatebuildmap" data-v-a2f64316>generateBuildMap</a></li><li data-v-a2f64316><a href="compile.html#autovirtualhostrules" data-v-a2f64316>autoVirtualHostRules</a></li><li data-v-a2f64316><a href="compile.html#partialcompilerules" data-v-a2f64316>partialCompileRules</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>MpxWebpackPlugin static methods</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-loader" data-v-a2f64316>MpxWebpackPlugin.loader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-pluginloader" data-v-a2f64316>MpxWebpackPlugin.pluginLoader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-wxspreloader" data-v-a2f64316>MpxWebpackPlugin.wxsPreLoader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-fileloader" data-v-a2f64316>MpxWebpackPlugin.fileLoader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-urlloader" data-v-a2f64316>MpxWebpackPlugin.urlLoader</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Request query</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#resolve" data-v-a2f64316>?resolve</a></li><li data-v-a2f64316><a href="compile.html#root" data-v-a2f64316>?root</a></li><li data-v-a2f64316><a href="compile.html#fallback" data-v-a2f64316>?fallback</a></li><li data-v-a2f64316><a href="compile.html#uselocal" data-v-a2f64316>?useLocal</a></li><li data-v-a2f64316><a href="compile.html#isstyle" data-v-a2f64316>?isStyle</a></li><li data-v-a2f64316><a href="compile.html#ispage" data-v-a2f64316>?isPage</a></li><li data-v-a2f64316><a href="compile.html#iscomponent" data-v-a2f64316>?isComponent</a></li><li data-v-a2f64316><a href="compile.html#async" data-v-a2f64316>?async</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="周边拓展" data-v-a2f64316>周边拓展</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>@mpxjs/fetch</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="extend.html#fetch" data-v-a2f64316>fetch</a></li><li data-v-a2f64316><a href="extend.html#canceltoken" data-v-a2f64316>CancelToken</a></li><li data-v-a2f64316><a href="extend.html#xfetch" data-v-a2f64316>XFetch</a></li><li data-v-a2f64316><a href="extend.html#interceptors" data-v-a2f64316>interceptors</a></li><li data-v-a2f64316><a href="extend.html#proxy" data-v-a2f64316>proxy 代理</a></li><li data-v-a2f64316><a href="extend.html#usefetch" data-v-a2f64316>useFetch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>其他</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="extend.html#api-proxy" data-v-a2f64316>api-proxy</a></li><li data-v-a2f64316><a href="extend.html#webview-bridge" data-v-a2f64316>webview-bridge</a></li><li data-v-a2f64316><a href="extend.html#size-report" data-v-a2f64316>size-report</a></li><li data-v-a2f64316><a href="extend.html#i18n" data-v-a2f64316>i18n</a></li></ul></div></div></div> <!----></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/23.365f9a87.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/instance-api.html b/docs-vuepress/.vuepress/dist/api/instance-api.html
new file mode 100644
index 0000000000..a6c757cb2c
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/instance-api.html
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>实例 API | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/43.e2b432ea.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" aria-current="page" class="active sidebar-link">实例 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/instance-api.html#set" class="sidebar-link">$set</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#watch" class="sidebar-link">$watch</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#delete" class="sidebar-link">$delete</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#refs" class="sidebar-link">$refs</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#asyncrefs" class="sidebar-link">$asyncRefs</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#forceupdate" class="sidebar-link">$forceUpdate</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#nexttick" class="sidebar-link">$nextTick</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#i18n" class="sidebar-link">$i18n</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#rawoptions" class="sidebar-link">$rawOptions</a></li></ul></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="实例-api"><a href="#实例-api" class="header-anchor">#</a> 实例 API</h1> <h2 id="set"><a href="#set" class="header-anchor">#</a> $set</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">$set</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Object <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token punctuation">,</span> property<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><p>这是全局 <code>mpx.set</code> 的别名。向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
+它必须用于向响应式对象上添加新 property，因为 Mpx 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')</p> <ul><li><strong>参考</strong>：<a href="/api/global-api.html#set">mpx.set</a></li></ul> <h2 id="watch"><a href="#watch" class="header-anchor">#</a> $watch</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">$watch</span><span class="token punctuation">(</span>expOrFn<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">Function</span><span class="token punctuation">,</span> callback<span class="token operator">:</span> <span class="token builtin">Function</span> <span class="token operator">|</span> Object<span class="token punctuation">,</span> options<span class="token operator">?</span><span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Function</span>
+</code></pre></div><p>观察 Mpx 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 键路径</span>
+<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'a.b.c'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">newVal<span class="token punctuation">,</span> oldVal</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 做点什么</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 函数</span>
+<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span>
+  <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 表达式 `this.a + this.b` 每次得出一个不同的结果时</span>
+    <span class="token comment">// 处理函数都会被调用。</span>
+    <span class="token comment">// 这就像监听一个未被定义的计算属性</span>
+    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>b
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">newVal<span class="token punctuation">,</span> oldVal</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 做点什么</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">)</span>
+</code></pre></div><p><code>this.$watch</code> 返回一个取消观察函数，用来停止触发回调：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> unwatch <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> cb<span class="token punctuation">)</span>
+<span class="token comment">// 之后取消观察</span>
+<span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+</code></pre></div><ul><li><code>options.deep</code></li></ul> <p>为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'someObject'</span><span class="token punctuation">,</span> callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token keyword">this</span><span class="token punctuation">.</span>someObject<span class="token punctuation">.</span>nestedValue <span class="token operator">=</span> <span class="token number">123</span>
+<span class="token comment">// callback is fired</span>
+</code></pre></div><ul><li><code>options.deep</code></li></ul> <p>在选项参数中指定 <code>immediate: true</code> 将立即以表达式的当前值触发回调：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token comment">// 立即以 `a` 的当前值触发回调</span>
+</code></pre></div><p>注意在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 这会导致报错</span>
+<span class="token keyword">var</span> unwatch <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span>
+  <span class="token string">'value'</span><span class="token punctuation">,</span>
+  <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">{</span> <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
+<span class="token punctuation">)</span>
+</code></pre></div><p>如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> unwatch <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span>
+  <span class="token string">'value'</span><span class="token punctuation">,</span>
+  <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>unwatch<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">{</span> <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
+<span class="token punctuation">)</span>
+</code></pre></div><ul><li><code>options.pausable</code></li></ul> <p>可在选项参数中指定 pausable: true 来声明一个可被暂停的 Watcher 实例，配置好之后可以通过 this.$getPausableWatchers() 来获取当前组件或者页面下定义的所有可被暂停的 Watcher 实例，
+然后根据具体是业务场景通过 watcher.pause() 或者 watcher.resume() 来暂停或者恢复 watch 的监听。
+比如说在小程序页面 hide 时不需要监听的 watch 可以配置为 pausable: true，在页面 hide 时调用 watcher.pause() 暂停监听，在页面 show 时调用 watcher.resume() 来恢复监听。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'someObject'</span><span class="token punctuation">,</span> callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">pausable</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">const</span> isHide <span class="token operator">=</span> <span class="token boolean">false</span>
+<span class="token keyword">const</span> watchers <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$getPausableWatchers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token keyword">if</span> <span class="token punctuation">(</span>watchers <span class="token operator">&amp;&amp;</span> watchers<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> watchers<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> watcher <span class="token operator">=</span> watchers<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
+    isHide <span class="token operator">&amp;&amp;</span> watcher<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token operator">!</span>isHide <span class="token operator">&amp;&amp;</span> watcher<span class="token punctuation">.</span><span class="token function">resume</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><ul><li><code>options.name</code></li></ul> <p>为了方便获取用户定义的 Watcher 实例，可在选项参数增加配置 name 来设置当前 Watcher 实例的名称，配置 name 后可通过 this.$getWatcherByName(name) 在组件或页面中获取到命名为 name 的 Watcher 实例（注意当存在多个 name 相同 watch 时，this.$getWatcherByName 获取的最后一个使用该 name
+创建的 Watcher 实例，所以为了避免混淆，请不要在多个 watch 中配置同一个 name。）</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'someObject'</span><span class="token punctuation">,</span> callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'someObject'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">const</span> someObjectWatch <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$getWatcherByName</span><span class="token punctuation">(</span><span class="token string">'someObject'</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>参考</strong>：<a href="/api/global-api.html#watch">mpx.watch</a></p> <h2 id="delete"><a href="#delete" class="header-anchor">#</a> $delete</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> $<span class="token keyword">delete</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Object<span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><p>删除对象属性，如果该对象是响应式的，那么该方法可以触发观察器更新（视图更新 | watch回调）</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">info</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'a'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token string">'info'</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 当删除属性之后会执行</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">attached</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 删除name属性</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>$<span class="token keyword">delete</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>参考：</strong> <a href="/api/global-api.html#delete">Mpx.delete</a></p> <h2 id="refs"><a href="#refs" class="header-anchor">#</a> $refs</h2> <p><code>Object</code></p> <p>一个对象，持有注册过 <a href="/api/directives.html#wx-ref">ref</a>的所有 DOM 元素和组件实例，调用响应的组件方法或者获取视图节点信息。</p> <p>以获取组件为例，模版中引用child子组件</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>child</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>childDom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>child</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>javascript 中可以调用组件的方法</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+<span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+  <span class="token comment">// 调用child中的方法</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>childDom<span class="token punctuation">.</span><span class="token function">childMethods</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token comment">// 获取child中的data</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>childDom<span class="token punctuation">.</span>data
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/refs.html">组件 ref</a></p> <h2 id="asyncrefs"><a href="#asyncrefs" class="header-anchor">#</a> $asyncRefs</h2> <p><strong>仅字节小程序可用</strong>，因为字节小程序 <code>selectComponent</code> 和 <code>selectAllComponents</code> 方法为异步方法，因此使用 $refs 同步获取组件实例并不保证能够拿到正确的组件实例，需使用异步 <code>$asyncRefs</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">ready</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>__mpx_mode__ <span class="token operator">===</span> <span class="token string">'tt'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>$asyncRefs<span class="token punctuation">.</span>mlist<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token keyword">const</span> data <span class="token operator">=</span> res<span class="token punctuation">.</span>data
+        <span class="token comment">//......</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="forceupdate"><a href="#forceupdate" class="header-anchor">#</a> $forceUpdate</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">$forceUpdate</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Object<span class="token punctuation">,</span> callback<span class="token operator">:</span> <span class="token builtin">Function</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><p>用于强制刷新视图，正常情况下只有<code>发生了变化的数据</code>才会被发送到视图层进行渲染。强制更新时，会将某些数据强制发送到视图层渲染，无论是否发生了变化</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">info</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'a'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">100</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">attached</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 虽然不会修改age的值，但仍会触发重新渲染，并且会将age发送到视图层</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$forceUpdate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">100</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'视图更新后执行'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+    <span class="token comment">// 也可用于正常的数据修改，key支持Path，数组可以使用'array[index]'：value的形式</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$forceUpdate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token string-property property">'info.name'</span><span class="token operator">:</span> <span class="token string">'b'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'视图更新后执行'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="nexttick"><a href="#nexttick" class="header-anchor">#</a> $nextTick</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">$nextTick</span><span class="token punctuation">(</span>callback<span class="token operator">:</span> <span class="token builtin">Function</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><p>将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。<strong>注意：<code>callback</code>中<code>this</code>并不是绑定当前实例，你可以使用箭头函数避免this指向问题</strong>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">info</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token number">1</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">attached</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 修改数据</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token number">2</span>
+    <span class="token comment">// DOM 还没有更新</span>
+
+    <span class="token comment">// this.$nextTick(function() {</span>
+    <span class="token comment">//   // DOM 现在更新了</span>
+    <span class="token comment">//   console.log('会在由name变化引起的视图更新之后执行')</span>
+    <span class="token comment">//   this.doSomthing() // 报错</span>
+    <span class="token comment">// })</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token comment">// DOM 现在更新了</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'会在由name变化引起的视图更新之后执行'</span><span class="token punctuation">)</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doSomthing</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="i18n"><a href="#i18n" class="header-anchor">#</a> $i18n</h2> <p>组件中直接调用$i18n的方法，比如：$t，$tc，$te，$d，$n</p> <p>首先在<code>mpx.plugin.conf.js</code>中配置i18n</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+
+  <span class="token comment">//...</span>
+
+  <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span><span class="token punctuation">,</span>
+    <span class="token comment">// messages既可以通过对象字面量传入，也可以通过messagesPath指定一个js模块路径，在该模块中定义配置并导出，dateTimeFormats/dateTimeFormatsPath和numberFormats/numberFormatsPath同理</span>
+    <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} world'</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token string-property property">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} 世界'</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>组件中直接使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
+  <span class="token operator">&lt;</span>view<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'message.hello'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
+
+<span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'message.hello'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'hello'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$te</span><span class="token punctuation">(</span><span class="token string">'message.hello'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> 
+    <span class="token comment">//...</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="rawoptions"><a href="#rawoptions" class="header-anchor">#</a> $rawOptions</h2> <p><code>Object</code></p> <p>获取组件或页面构造器的构造参数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/core&quot;</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">ready</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$rawOptions<span class="token punctuation">)</span>
+    <span class="token comment">/**
+     * attached
+     * detached
+     * methods
+     * mpxConvertMode
+     * mpxCustomKeysForBlend
+     * mpxFileResource
+     * ready
+     * setup
+     * ...其他构造参数
+     */</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/api/global-api.html" class="prev">
+        全局 API
+      </a></span> <span class="next"><a href="/api/store-api.html">
+        Store API
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/43.e2b432ea.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/optional-api.html b/docs-vuepress/.vuepress/dist/api/optional-api.html
new file mode 100644
index 0000000000..08662a27ca
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/optional-api.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>选项式 API | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/44.e4242a1f.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" aria-current="page" class="active sidebar-link">选项式 API</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="选项式-api"><a href="#选项式-api" class="header-anchor">#</a> 选项式 API</h1> <h3 id="onappinit"><a href="#onappinit" class="header-anchor">#</a> onAppInit</h3> <ul><li><strong>类型：</strong> <code>Function</code></li> <li><strong>详细：</strong></li></ul> <p>通过 createApp 注册一个应用期间被调用，输出 web 时 SSR渲染模式下，需要在此钩子中生成 pinia 的实例并返回。</p> <h3 id="onssrappcreated"><a href="#onssrappcreated" class="header-anchor">#</a> onSSRAppCreated</h3> <ul><li><strong>类型：</strong> <code>Function</code></li> <li><strong>详细：</strong></li></ul> <p>SSR渲染定制钩子，在服务端渲染期间被调用，可以在这个钩子中可以去返回应用程序实例，以及完成服务器端路由匹配，store 的状态挂载等。类 Vue 的 server entry 中的功能。</p> <p><strong>注意：</strong> 仅 web 环境支持</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/api/composition-api.html" class="prev">
+        组合式 API
+      </a></span> <span class="next"><a href="/api/extend.html">
+        周边拓展
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/44.e4242a1f.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/reactivity-api.html b/docs-vuepress/.vuepress/dist/api/reactivity-api.html
new file mode 100644
index 0000000000..59d7bdaac4
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/reactivity-api.html
@@ -0,0 +1,544 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>响应式 API | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/45.392413aa.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" aria-current="page" class="active sidebar-link">响应式 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#响应式基础-api" class="sidebar-link">响应式基础 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#reactive" class="sidebar-link">reactive</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#isreactive" class="sidebar-link">isReactive</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#markraw" class="sidebar-link">markRaw</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#shallowreactive" class="sidebar-link">shallowReactive</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#set" class="sidebar-link">set</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#del" class="sidebar-link">del</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#computed-与-watch" class="sidebar-link">Computed 与 Watch</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#computed" class="sidebar-link">computed</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#watcheffect" class="sidebar-link">watchEffect</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#watchsynceffect" class="sidebar-link">watchSyncEffect</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#watchposteffect" class="sidebar-link">watchPostEffect</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#watch" class="sidebar-link">watch</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#effect-作用域-api" class="sidebar-link">Effect 作用域 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#effectscope" class="sidebar-link">effectScope</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#getcurrentscope" class="sidebar-link">getCurrentScope</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#onscopedispose" class="sidebar-link">onScopeDispose</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#refs" class="sidebar-link">Refs</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#ref" class="sidebar-link">ref</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#unref" class="sidebar-link">unref</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#toref" class="sidebar-link">toRef</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#torefs" class="sidebar-link">toRefs</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#isref" class="sidebar-link">isRef</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#customref" class="sidebar-link">customRef</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#shallowref" class="sidebar-link">shallowRef</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#triggerref" class="sidebar-link">triggerRef</a></li></ul></li></ul></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="响应式-api"><a href="#响应式-api" class="header-anchor">#</a> 响应式 API</h1> <h2 id="响应式基础-api"><a href="#响应式基础-api" class="header-anchor">#</a> 响应式基础 API</h2> <h3 id="reactive"><a href="#reactive" class="header-anchor">#</a> reactive</h3> <p>将对象处理为响应性对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+obj<span class="token punctuation">.</span>count<span class="token operator">++</span>
+</code></pre></div><p>响应式转换是“深层”的：它会影响到所有嵌套的 property。一个响应式对象也将深层地解包任何 ref property，同时保持响应性。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> count <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// ref 会被解包</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>count <span class="token operator">===</span> count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// true</span>
+
+<span class="token comment">// 它会更新 `obj.count`</span>
+count<span class="token punctuation">.</span>value<span class="token operator">++</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 2</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token comment">// 2</span>
+</code></pre></div><p>当将 <code>ref</code> 分配给 <code>reactive</code> property 时，ref 将被自动解包。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+obj<span class="token punctuation">.</span>count <span class="token operator">=</span> count
+
+<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token comment">// 1</span>
+<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>count <span class="token operator">===</span> count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// true</span>
+</code></pre></div><p>当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> refArr <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+    refArr
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 无需.vlaue</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>refArr<span class="token punctuation">)</span>
+<span class="token comment">// 这里需要.value</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>refArr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+</code></pre></div><p>当需要给响应式对象新增属性时，需要使用set，并且新增属性的响应式对象需要为 ref 或者做为其他响应性对象的key</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> stateRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> stateRefWrap <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// 不生效</span>
+        <span class="token function">set</span><span class="token punctuation">(</span>stateRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// 生效</span>
+        <span class="token function">set</span><span class="token punctuation">(</span>stateRefWrap<span class="token punctuation">.</span>data<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// 生效</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">return</span> <span class="token punctuation">{</span>
+    state<span class="token punctuation">,</span>
+    stateRef<span class="token punctuation">,</span>
+    stateRefWrap
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="isreactive"><a href="#isreactive" class="header-anchor">#</a> isReactive</h3> <p>检查对象是否是由 reactive 创建的响应式对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> isReactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+        <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+            <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isReactive</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// -&gt; true</span>
+        <span class="token keyword">return</span> <span class="token punctuation">{</span>
+            state
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="markraw"><a href="#markraw" class="header-anchor">#</a> markRaw</h3> <p>标记一个对象，使其永远不会被抓换为响应性对象，并返回对象本身</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> markRaw<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> isReactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">markRaw</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    foo
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isReactive</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>foo<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// -&gt; false</span>
+</code></pre></div><p><strong>注意：</strong></p> <p>如果将标记对象内部的未标记对象添加进响应性对象，然后再次访问该响应性对象，就会得到该原始对象的可响应性对象</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> markRaw<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> isReactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">markRaw</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">nested</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">const</span> bar <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">nested</span><span class="token operator">:</span> foo<span class="token punctuation">.</span>nested
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span>nested <span class="token operator">===</span> bar<span class="token punctuation">.</span>nested<span class="token punctuation">)</span> <span class="token comment">// -&gt; true</span>
+</code></pre></div><h3 id="shallowreactive"><a href="#shallowreactive" class="header-anchor">#</a> shallowReactive</h3> <p>reactive() 的浅层作用形式，只跟踪自身 property 的响应性，但不执行嵌套对象的深层响应式转换(返回原始值)</p> <p><strong>注意：</strong></p> <p>和 reactive() 不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的 property 是响应式的。property 的值会被原样存储和暴露，这也意味着值为 ref 的 property 不会被自动解包了。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> shallowReactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">shallowReactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">nested</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">bar</span><span class="token operator">:</span> <span class="token number">2</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">head</span><span class="token operator">:</span> count  
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 更改状态自身的属性是响应式的</span>
+state<span class="token punctuation">.</span>foo<span class="token operator">++</span>
+
+<span class="token comment">// ...但下层嵌套对象不会被转为响应式</span>
+<span class="token function">isReactive</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>nested<span class="token punctuation">)</span> <span class="token comment">// false</span>
+
+<span class="token comment">// 不是响应式的</span>
+state<span class="token punctuation">.</span>nested<span class="token punctuation">.</span>bar<span class="token operator">++</span>
+
+<span class="token comment">// ref 属性不会解包</span>
+state<span class="token punctuation">.</span>head<span class="token punctuation">.</span>value 
+</code></pre></div><h3 id="set"><a href="#set" class="header-anchor">#</a> set</h3> <p>用于对一个响应式对象新增属性，会<code>触发订阅者更新操作</code></p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">set</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Object <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token punctuation">,</span> property<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> set<span class="token punctuation">,</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token comment">// 具名导出使用</span>
+<span class="token function">set</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">)</span> <span class="token comment">// age 改变后会触发订阅者视图更新</span>
+</code></pre></div><h3 id="del"><a href="#del" class="header-anchor">#</a> del</h3> <p>用于对一个响应式对象删除属性，会<code>触发订阅者更新操作</code></p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">del</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Object <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token punctuation">,</span> property<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>del<span class="token punctuation">,</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token function">del</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="computed-与-watch"><a href="#computed-与-watch" class="header-anchor">#</a> Computed 与 Watch</h2> <h3 id="computed"><a href="#computed" class="header-anchor">#</a> computed</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 只读形式</span>
+<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">computed</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>
+    <span class="token function-variable function">getter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">T</span>
+<span class="token punctuation">)</span><span class="token operator">:</span> Readonly<span class="token operator">&lt;</span>Ref<span class="token operator">&lt;</span>Readonly<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;&gt;&gt;</span>
+
+<span class="token comment">// 可写形式</span>
+<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">computed</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>
+    options<span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">T</span>
+        <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">)</span><span class="token operator">:</span> Ref<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
+</code></pre></div><p>接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> plusOne <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>plusOne<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 2</span>
+
+plusOne<span class="token punctuation">.</span>value<span class="token operator">++</span> <span class="token comment">// 错误</span>
+</code></pre></div><p>或者接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> plusOne <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
+  <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token parameter">val</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    count<span class="token punctuation">.</span>value <span class="token operator">=</span> val <span class="token operator">-</span> <span class="token number">1</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+plusOne<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token number">1</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 0</span>
+</code></pre></div><h3 id="watcheffect"><a href="#watcheffect" class="header-anchor">#</a> watchEffect</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">watchEffect</span><span class="token punctuation">(</span>
+  <span class="token function-variable function">effect</span><span class="token operator">:</span> <span class="token punctuation">(</span>onInvalidate<span class="token operator">:</span> InvalidateCbRegistrator<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
+  options<span class="token operator">?</span><span class="token operator">:</span> WatchEffectOptions
+<span class="token punctuation">)</span><span class="token operator">:</span> StopHandle
+
+<span class="token keyword">interface</span> <span class="token class-name">WatchEffectOptions</span> <span class="token punctuation">{</span>
+    flush<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'pre'</span> <span class="token operator">|</span> <span class="token string">'post'</span> <span class="token operator">|</span> <span class="token string">'sync'</span> <span class="token comment">// 默认：'pre'</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">type</span> <span class="token class-name">InvalidateCbRegistrator</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function-variable function">invalidate</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
+
+<span class="token keyword">type</span> <span class="token class-name">StopHandle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
+</code></pre></div><p>立即执行传入的函数，同时对其依赖进行响应式追踪，并在其依赖变更时重新运行该函数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+
+<span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
+<span class="token comment">// -&gt; logs 0</span>
+
+<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  count<span class="token punctuation">.</span>value<span class="token operator">++</span>
+  <span class="token comment">// -&gt; logs 1</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
+</code></pre></div><ul><li>停止侦听</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> stop <span class="token operator">=</span> <span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token comment">/* ... */</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// later</span>
+<span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+</code></pre></div><ul><li>清除副作用</li></ul> <p>侦听副作用传入的函数可以接收一个函数作入参，用来注册清理回调，清理回调会在该副作用下一次执行前被调用，
+可以用来清理无效的副作用，例如等待中的异步请求</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">onCleanup</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> <span class="token punctuation">{</span> response<span class="token punctuation">,</span> cancel <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">doAsyncWork</span><span class="token punctuation">(</span>id<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+  <span class="token comment">// `cancel` 会在 `id` 更改时调用</span>
+  <span class="token comment">// 以便取消之前未完成的请求</span>
+  <span class="token function">onCleanup</span><span class="token punctuation">(</span>cancel<span class="token punctuation">)</span>
+  data<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> response
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><ul><li>副作用刷新时机</li></ul> <p>响应式系统会进行副作用函数缓存，并异步地刷新执行他们</p> <p>组件的 update 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时，默认情况下，会在所有的组件 update 前执行，
+在watchEffect的第二个参数中，我们可以传入flush来进行副作用刷新时机调整</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 默认为 pre</span>
+<span class="token function">watchEffect</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">flush</span><span class="token operator">:</span> <span class="token string">'pre'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 侦听器回调中能访问被更新之后的DOM</span>
+<span class="token comment">// 注意：这也将推迟副作用的初始运行，直到组件的首次渲染完成。</span>
+<span class="token function">watchEffect</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">flush</span><span class="token operator">:</span> <span class="token string">'post'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 强制同步触发, 十分低效</span>
+<span class="token function">watchEffect</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">flush</span><span class="token operator">:</span> <span class="token string">'sync'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="watchsynceffect"><a href="#watchsynceffect" class="header-anchor">#</a> watchSyncEffect</h3> <p>watchEffect 的别名，带有 flush: 'sync' 选项。</p> <h3 id="watchposteffect"><a href="#watchposteffect" class="header-anchor">#</a> watchPostEffect</h3> <p>watchEffect 的别名，带有 flush: 'post' 选项。</p> <h3 id="watch"><a href="#watch" class="header-anchor">#</a> watch</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 侦听单一源</span>
+<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">watch</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>
+    source<span class="token operator">:</span> WatcherSource<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
+    <span class="token function-variable function">callback</span><span class="token operator">:</span> <span class="token punctuation">(</span>
+        value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span>
+        oldValue<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span>
+        onInvalidate<span class="token operator">:</span> InvalidateCbRegistrator
+    <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
+    options<span class="token operator">?</span><span class="token operator">:</span> WatchOptions
+<span class="token punctuation">)</span><span class="token operator">:</span> StopHandle
+
+<span class="token comment">// 侦听多个源</span>
+
+<span class="token keyword">type</span> <span class="token class-name">WatcherSource<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> Ref<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">T</span><span class="token punctuation">)</span>
+
+<span class="token keyword">type</span> <span class="token class-name">InvalidateCbRegistrator</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function-variable function">invalidate</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
+
+<span class="token keyword">type</span> <span class="token class-name">StopHandle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
+
+<span class="token keyword">interface</span> <span class="token class-name">WatchOptions</span> <span class="token keyword">extends</span> <span class="token class-name">WatchEffectOptions</span> <span class="token punctuation">{</span>
+    immediate<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token comment">// 默认：false</span>
+    deep<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token comment">// 默认：false</span>
+    immediateAsync<span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token comment">// 默认：false</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>该 API 与选项式 API 中的 watch 基本等效，watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下
+是惰性的——即回调仅在侦听源发生变化时被调用。</p> <p>与 watchEffect 比较，watch 允许我们：</p> <ul><li>懒执行副作用；</li> <li>更具体地说明什么状态应该触发侦听器重新运行；</li> <li>访问侦听状态变化前后的值。</li></ul> <h4 id="侦听单一源"><a href="#侦听单一源" class="header-anchor">#</a> 侦听单一源</h4> <p>watch 可以侦听一个具有返回值的 getter，也可以直接是一个 ref</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 侦听一个 getter</span>
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token function">watch</span><span class="token punctuation">(</span>
+  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>count<span class="token punctuation">,</span>
+  <span class="token punctuation">(</span><span class="token parameter">count<span class="token punctuation">,</span> prevCount</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token comment">/* ... */</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">)</span>
+
+<span class="token comment">// 直接侦听ref</span>
+<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+<span class="token function">watch</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">count<span class="token punctuation">,</span> prevCount</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token comment">/* ... */</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="侦听多个源"><a href="#侦听多个源" class="header-anchor">#</a> 侦听多个源</h4> <p>还可以使用数组的形式同时侦听多个数据源：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> watch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">[</span>aRef<span class="token punctuation">,</span> bRef<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>prevA<span class="token punctuation">,</span> prevB<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token comment">/* ... */</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="与-watcheffect-相同的行为"><a href="#与-watcheffect-相同的行为" class="header-anchor">#</a> 与 watchEffect 相同的行为</h4> <p><strong>watch</strong> 与 <strong>watchEffect</strong> 在手动停止侦听、清除副作用、副作用刷新时机方面有相同的行为。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> watch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">let</span> unwatch <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> a<span class="token punctuation">.</span>value <span class="token operator">+</span> b<span class="token punctuation">.</span>value
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">newVal<span class="token punctuation">,</span> oldVal</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 做点什么</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 调用返回值unwatch可以取消观察</span>
+<span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="watch-选项"><a href="#watch-选项" class="header-anchor">#</a> watch 选项</h4> <ul><li><p><strong>选项</strong>：deep</p> <p>为了发现对象内部值的变化，可以在选项参数中指定 deep: true。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>watch<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>someObject
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 回调函数</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token keyword">this</span><span class="token punctuation">.</span>someObject<span class="token punctuation">.</span>nestedValue <span class="token operator">=</span> <span class="token number">123</span>
+<span class="token comment">// callback is fired</span>
+</code></pre></div></li> <li><p><strong>选项</strong>：once</p> <p>在选项参数中指定 <code>once: true</code> 该回调方法只会执行一次，后续的改变将不会触发回调；<br>
+该参数也可以是函数，若函数返回值为 <code>true</code> 时，则后续的改变将不会触发回调</p> <div class="language-JavaScript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>watch<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 该回调函数只会执行一次</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">once</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 当 once 是函数时</span>
+<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> newVal</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 当 val 等于2时，this.a 的后续改变将不会被监听</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token function-variable function">once</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> oldVal</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>val <span class="token operator">==</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token boolean">true</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div></li> <li><p><strong>选项</strong>：immediate</p> <p>在选项参数中指定 <code>immediate: true</code> 将立即以表达式的当前值触发回调。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>watch<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 回调函数</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token comment">// 立即以 `this.a` 的当前值触发回调</span>
+</code></pre></div><p>注意在带有 immediate 选项时，你不能在第一次回调时取消侦听。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>watch<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">var</span> unwatch <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 这会导致报错！</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+</code></pre></div><p>如果你仍然希望在回调内部调用取消侦听的函数，你应该先检查其可用性。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>watch<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">var</span> unwatch <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">if</span> <span class="token punctuation">(</span>unwatch<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 请先检查其可用性！</span>
+    <span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+</code></pre></div></li></ul> <h2 id="effect-作用域-api"><a href="#effect-作用域-api" class="header-anchor">#</a> Effect 作用域 API</h2> <h3 id="effectscope"><a href="#effectscope" class="header-anchor">#</a> effectScope</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">effectScope</span><span class="token punctuation">(</span>detached<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span><span class="token operator">:</span> EffectScope
+
+<span class="token keyword">interface</span> <span class="token class-name">EffectScope</span> <span class="token punctuation">{</span>
+    <span class="token generic-function"><span class="token function">run</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token function-variable function">fn</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">T</span> <span class="token operator">|</span> <span class="token keyword">undefined</span>
+    <span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+    <span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+    <span class="token function">resume</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>创建一个 effect 作用域对象，捕获在其内部创建的响应性副作用(例如计算属性或监听器)，可以对这些副作用进行批量处理</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> effectScope <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> scope <span class="token operator">=</span> <span class="token function">effectScope</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+scope<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> doubled <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> counter<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
+    
+    <span class="token function">watch</span><span class="token punctuation">(</span>doubled<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>doubled<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
+    
+    <span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Count: '</span><span class="token punctuation">,</span> doubled<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+scope<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+</code></pre></div><p>需要注意的是，effectScope 接受一个 detached 参数，默认为false，该参数来表示当前作用域是否和父级作用域进行分离，若 detached 为 true，
+当前 effectScope 则不会被父级作用域收集。</p> <ul><li>暂停侦听</li></ul> <p>Mpx 提供了 pause 方法可以将整个作用域中的响应性副作用批量暂停侦听。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> effectScope<span class="token punctuation">,</span> onHide <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">const</span> scope <span class="token operator">=</span> <span class="token function">effectScope</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+scope<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> doubled <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> counter<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
+
+    <span class="token function">watch</span><span class="token punctuation">(</span>doubled<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>doubled<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
+
+    <span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Count: '</span><span class="token punctuation">,</span> doubled<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">onHide</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    scope<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><ul><li>恢复侦听</li></ul> <p>被暂停的作用域可以使用 resume 方法来恢复侦听。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>onShow<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token comment">// ......</span>
+
+<span class="token function">onShow</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    scope<span class="token punctuation">.</span><span class="token function">resume</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="getcurrentscope"><a href="#getcurrentscope" class="header-anchor">#</a> getCurrentScope</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">getCurrentScope</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> EffectScope <span class="token operator">|</span> <span class="token keyword">undefined</span>
+</code></pre></div><p>返回当前活跃的 effect 作用域。</p> <h3 id="onscopedispose"><a href="#onscopedispose" class="header-anchor">#</a> onScopeDispose</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">onScopeDispose</span><span class="token punctuation">(</span><span class="token function-variable function">fn</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><p>在当前活跃的 effect 作用域上注册一个处理回调。该回调会在相关的 effect 作用域结束之后被调用。</p> <h2 id="refs"><a href="#refs" class="header-anchor">#</a> Refs</h2> <h3 id="ref"><a href="#ref" class="header-anchor">#</a> ref</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">interface</span> <span class="token class-name">Ref<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
+    value<span class="token operator">:</span> <span class="token constant">T</span>
+<span class="token punctuation">}</span>
+<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">ref</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> Ref<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
+</code></pre></div><p>接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的 property .value。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 0</span>
+
+count<span class="token punctuation">.</span>value<span class="token operator">++</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 1</span>
+</code></pre></div><p><strong>注意事项：</strong></p> <p>1.所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。</p> <p>2.如果将一个对象赋值给 ref，那么这个对象将被 reactive 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+    foo
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token comment">// 获取count</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">.</span>count<span class="token punctuation">)</span>
+<span class="token comment">// 获取foo</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">.</span>foo<span class="token punctuation">)</span>
+</code></pre></div><h3 id="unref"><a href="#unref" class="header-anchor">#</a> unref</h3> <p>如果参数是一个 ref，则返回内部值，否则返回参数本身，是 <code>val = isRef(ref) ? ref.value : ref</code> 的语法糖函数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> unref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">unref</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// -&gt; true</span>
+</code></pre></div><h3 id="toref"><a href="#toref" class="header-anchor">#</a> toRef</h3> <p>用于为响应式对象上的property 创建 ref。创建的 ref 与其源 property 保持同步：改变源 property
+将更新 ref，改变 ref 也将更新 property。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">f</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">const</span> stateRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">black</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">white</span><span class="token operator">:</span> <span class="token number">2</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">const</span> fooRef <span class="token operator">=</span> <span class="token function">toRef</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token string">'f'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> blackRef <span class="token operator">=</span> <span class="token function">toRef</span><span class="token punctuation">(</span>stateRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token string">'black'</span><span class="token punctuation">)</span> 
+
+<span class="token comment">// 更改ref的值更新属性</span>
+fooRef<span class="token punctuation">.</span>value<span class="token operator">++</span>
+blackRef<span class="token punctuation">.</span>value<span class="token operator">++</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>f<span class="token punctuation">)</span> <span class="token comment">// 2</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>stateRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>black<span class="token punctuation">)</span> <span class="token comment">// 2</span>
+
+<span class="token comment">// 更改property的值更新ref</span>
+state<span class="token punctuation">.</span>f<span class="token operator">++</span>
+stateRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>black<span class="token operator">++</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>fooRef<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 3</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>blackRef<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 3</span>
+</code></pre></div><p><strong>注意：</strong></p> <p>即使源 property 当前不存在，toRef() 也会返回一个可用的 ref，而 toRefs 则不会，这在处理可选properties的时候
+非常有用</p> <h3 id="torefs"><a href="#torefs" class="header-anchor">#</a> toRefs</h3> <p>将一个响应式对象转换为一个普通对象，这个普通对象的每个 property 都是指向源对象相应 property 的 ref。每个单独的 ref 都是 <code>toRef</code> 创建的</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">black</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">white</span><span class="token operator">:</span> <span class="token number">2</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">const</span> stateAsRefs <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span>
+
+state<span class="token punctuation">.</span>black<span class="token operator">++</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>stateAsRefs<span class="token punctuation">.</span>black<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 2</span>
+
+stateAsRefs<span class="token punctuation">.</span>black<span class="token punctuation">.</span>value<span class="token operator">++</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>black<span class="token punctuation">)</span> <span class="token comment">// 3</span>
+</code></pre></div><p>toRefs 在使用组合式函数中的响应式对象时有很大作用，使用它，对响应式对象进行解构将不会失去响应性</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">useFeatX</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">black</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">white</span><span class="token operator">:</span> <span class="token number">2</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    
+    <span class="token comment">// 在返回时都转为 ref</span>
+    <span class="token keyword">return</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// 解构而不会失去响应性</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span>black<span class="token punctuation">,</span> white<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useFeatX</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>注意：</strong></p> <ul><li>toRefs 在调用时只会为源对象上可以列举出的 property 创建 ref。如果要为可能还不存在的 property
+创建 ref，请改用 <code>toRef</code></li></ul> <h3 id="isref"><a href="#isref" class="header-anchor">#</a> isRef</h3> <p>检查某个值是否为 ref，返回true/false。</p> <h3 id="customref"><a href="#customref" class="header-anchor">#</a> customRef</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">customRef</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>factory<span class="token operator">:</span> CustomRefFactory<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token operator">:</span> Ref<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
+
+<span class="token keyword">type</span> <span class="token class-name">CustomRefFactory<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span>
+    <span class="token function-variable function">track</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
+    <span class="token function-variable function">trigger</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
+<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">T</span><span class="token punctuation">,</span>
+    <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>创建一个自定义 ref，可对其进行依赖项跟踪和更新触发显示控制。需要一个工厂函数，该函数接收 <code>track</code> 和 <code>trigger</code>
+做为参数，并且应该返回一个带有 <code>get</code> 和 <code>set</code> 的对象。</p> <p>同时，<code>track()</code> 应该在 get() 方法中调用，<code>trigger()</code> 应该在 <code>set()</code> 中调用。不过这里具体何时调用、
+是否调用都将由用户自己来控制</p> <p>示例：创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">useDebouncedRef</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> delay <span class="token operator">=</span> <span class="token number">200</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">let</span> timeout
+  <span class="token keyword">return</span> <span class="token function">customRef</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">track<span class="token punctuation">,</span> trigger</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+        <span class="token keyword">return</span> value
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token function">set</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token function">clearTimeout</span><span class="token punctuation">(</span>timeout<span class="token punctuation">)</span>
+        timeout <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          value <span class="token operator">=</span> newValue
+          <span class="token function">trigger</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> delay<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// text 的每次改变都只在最近一次set后的200ms后调用</span>
+<span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token function">useDebouncedRef</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="shallowref"><a href="#shallowref" class="header-anchor">#</a> shallowRef</h3> <p><code>ref()</code> 的浅层作用形式，创建一个仅跟踪自身 <code>.value</code> 变化的 ref，其他值不做任何处理都为非响应式</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">shallowRef</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 不会触发更改</span>
+state<span class="token punctuation">.</span>value<span class="token punctuation">.</span>count<span class="token operator">++</span>
+
+<span class="token comment">// 会触发更改</span>
+state<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">black</span><span class="token operator">:</span> <span class="token number">1</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p><strong>注意：</strong>
+shallowRef 的内部值将会被原样存储和暴露，不会被深层递归转为响应性， 只有对 <code>.value</code> 的访问是响应式的</p> <p>常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。</p> <h3 id="triggerref"><a href="#triggerref" class="header-anchor">#</a> triggerRef</h3> <p>强制触发依赖于一个浅层 <code>ref</code> 的副作用，这通常在对浅引用的内部值进行深度变更后使用。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> shallow <span class="token operator">=</span> <span class="token function">shallowRef</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">greet</span><span class="token operator">:</span> <span class="token string">'Hello, world'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 触发该副作用第一次应该会打印 &quot;Hello, world&quot;</span>
+<span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>shallow<span class="token punctuation">.</span>value<span class="token punctuation">.</span>greet<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 这次变更不应触发副作用，因为这个 ref 是浅层的</span>
+shallow<span class="token punctuation">.</span>value<span class="token punctuation">.</span>greet <span class="token operator">=</span> <span class="token string">'Hello, universe'</span>
+
+<span class="token comment">// 手动执行该 shallowRef 关联的副作用，打印 &quot;Hello, universe&quot;</span>
+<span class="token function">triggerRef</span><span class="token punctuation">(</span>shallow<span class="token punctuation">)</span>
+
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/api/builtIn.html" class="prev">
+        内建组件
+      </a></span> <span class="next"><a href="/api/composition-api.html">
+        组合式 API
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/45.392413aa.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/api/store-api.html b/docs-vuepress/.vuepress/dist/api/store-api.html
new file mode 100644
index 0000000000..0a22caf8e0
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/api/store-api.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Store API | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/46.22f9a9c6.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" aria-current="page" class="active sidebar-link">Store API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/store-api.html#createstore" class="sidebar-link">createStore</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/store-api.html#store-实例属性" class="sidebar-link">Store 实例属性</a></li><li class="sidebar-sub-header"><a href="/api/store-api.html#store-实例方法" class="sidebar-link">Store 实例方法</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/store-api.html#createstorewiththis" class="sidebar-link">createStoreWithThis</a></li><li class="sidebar-sub-header"><a href="/api/store-api.html#createstatewiththis" class="sidebar-link">createStateWithThis</a></li><li class="sidebar-sub-header"><a href="/api/store-api.html#creategetterswiththis" class="sidebar-link">createGettersWithThis</a></li><li class="sidebar-sub-header"><a href="/api/store-api.html#createmutationswiththis" class="sidebar-link">createMutationsWithThis</a></li><li class="sidebar-sub-header"><a href="/api/store-api.html#createactionswiththis" class="sidebar-link">createActionsWithThis</a></li></ul></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="store-api"><a href="#store-api" class="header-anchor">#</a> Store API</h1> <p><strong>注意：</strong> 以下 API 在 <strong>2.8</strong> 版本后无法通过全局应用实例 <code>mpx</code> 访问。若项目中有类似 mpx.createStore 的用法，在升级到 <strong>2.8</strong> 版本后请进行修改。</p> <h2 id="createstore"><a href="#createstore" class="header-anchor">#</a> createStore</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createStore</span><span class="token punctuation">(</span>options<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Store
+</code></pre></div><blockquote><p>创建一个全局状态管理容器，实现复杂场景下的组件通信需求</p></blockquote> <ul><li><p><code>options</code></p> <p>options 可指定以下属性：</p> <ul><li><p><strong>state</strong>: <code>Object</code></p> <p>store的根 state 对象。</p> <p><a href="/guide/advance/store.html#state">详细介绍</a></p></li> <li><p><strong>mutations</strong>: <code>{ [type: string]: Function }</code></p> <p>在 store 上注册 mutation，处理函数总是接受 state 作为第一个参数（如果定义在模块中，则为模块的局部状态），payload 作为第二个参数（可选）。</p> <p><a href="/guide/advance/store.html#mutation">详细介绍</a></p></li> <li><p><strong>actions</strong>: <code>{ [type: string]: Function }</code></p> <p>在 store 上注册 action。处理函数总是接受 context 作为第一个参数，payload 作为第二个参数（可选）。</p> <p>context 对象包含以下属性：
+<code>js { state, // 等同于 `store.state` commit, // 等同于 `store.commit` dispatch, // 等同于 `store.dispatch` getters // 等同于 `store.getters` }</code>
+同时如果有第二个参数 payload 的话也能够接收。</p> <p><a href="/guide/advance/store.html#action">详细介绍</a></p></li> <li><p><strong>getters</strong>：<code>{[key: string]: Function }</code></p> <p>在 store 上注册 getter，getter 方法接受以下参数：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
+  state<span class="token punctuation">,</span>     <span class="token comment">// 如果在模块中定义则为模块的局部状态</span>
+  getters   <span class="token comment">// 等同于 store.getters</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>注册的 getter 暴露为 store.getters。</p> <p><a href="/guide/advance/store.html#getter">详细介绍</a></p></li> <li><p><strong>modules</strong>：<code>Object</code></p> <p>包含了子模块的对象，会被合并到 store，大概长这样：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
+  <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    state<span class="token punctuation">,</span>
+    mutations<span class="token punctuation">,</span>
+    actions<span class="token operator">?</span><span class="token punctuation">,</span>
+    getters<span class="token operator">?</span><span class="token punctuation">,</span>
+    modules<span class="token operator">?</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token comment">// ...</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>与根模块的选项一样，每个模块也包含 state 和 mutations 选项。模块的状态使用 key 关联到 store 的根状态。模块的 mutation 和 getter 只会接收 module 的局部状态作为第一个参数，而不是根状态，并且模块 action 的 context.state 同样指向局部状态。</p> <p><a href="/guide/advance/store.html#modules">详细介绍</a></p></li> <li><p><strong>deps</strong>：<code>Object</code></p> <p>包含了当前store依赖的第三方store：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
+  <span class="token literal-property property">store1</span><span class="token operator">:</span> storeA<span class="token punctuation">,</span>
+  <span class="token literal-property property">store2</span><span class="token operator">:</span> storeB
+<span class="token punctuation">}</span>
+</code></pre></div><p><a href="/guide/advance/store.html#modules">详细介绍</a></p></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">const</span> store1 <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token operator">...</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> store2 <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>options <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="store-实例属性"><a href="#store-实例属性" class="header-anchor">#</a> <strong>Store 实例属性</strong></h3> <ul><li><strong>state</strong>：<code>Object</code>
+根状态。</li> <li><strong>getters</strong>：<code>Object</code>
+暴露出注册的 getter。</li></ul> <h3 id="store-实例方法"><a href="#store-实例方法" class="header-anchor">#</a> <strong>Store 实例方法</strong></h3> <ul><li>commit</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">commit</span><span class="token punctuation">(</span>type<span class="token operator">:</span> string<span class="token punctuation">,</span> payload<span class="token operator">?</span><span class="token operator">:</span> any<span class="token punctuation">,</span> options<span class="token operator">?</span><span class="token operator">:</span> Object<span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token function">commit</span><span class="token punctuation">(</span>mutation<span class="token operator">:</span> Object<span class="token punctuation">,</span> options<span class="token operator">?</span><span class="token operator">:</span> Object<span class="token punctuation">)</span>
+</code></pre></div><p>提交 mutation。<a href="/guide/advance/store.html#mutation">详细介绍</a></p> <ul><li>dispatch</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">dispatch</span><span class="token punctuation">(</span>type<span class="token operator">:</span> string<span class="token punctuation">,</span> payload<span class="token operator">?</span><span class="token operator">:</span> any<span class="token punctuation">,</span> options<span class="token operator">?</span><span class="token operator">:</span> Object<span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token function">dispatch</span><span class="token punctuation">(</span>action<span class="token operator">:</span> Object<span class="token punctuation">,</span> options<span class="token operator">?</span><span class="token operator">:</span> Object<span class="token punctuation">)</span>
+</code></pre></div><p>分发 action。返回一个Promise。<a href="/guide/advance/store.html#action">详细介绍</a></p> <ul><li>mapState</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">mapState</span><span class="token punctuation">(</span>map<span class="token operator">:</span> Array<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
+</code></pre></div><p>为组件创建计算属性以返回 store 中的状态。<a href="/guide/advance/store.html#state">详细介绍</a></p> <ul><li>mapGetters</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">mapGetters</span><span class="token punctuation">(</span>map<span class="token operator">:</span> Array<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
+</code></pre></div><p>为组件创建计算属性以返回 getter 的返回值。<a href="/guide/advance/store.html#getter">详细介绍</a></p> <ul><li>mapActions</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">mapActions</span><span class="token punctuation">(</span>map<span class="token operator">:</span> Array<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
+</code></pre></div><p>创建组件方法分发 action。<a href="/guide/advance/store.html#action">详细介绍</a></p> <ul><li>mapMutations</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">mapMutations</span><span class="token punctuation">(</span>map<span class="token operator">:</span> Array<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
+</code></pre></div><p>创建组件方法提交 mutation。<a href="/guide/advance/store.html#mutation">详细介绍</a></p> <ul><li>mapStateToRefs</li></ul> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token function">mapStateToRefs</span><span class="token punctuation">(</span>maps<span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p><strong>组合式 API 特有</strong>，在组合式 API 场景下解构访问 getter 并保持 getter 响应性，可以使用该方法。<a href="/guide/advance/store.html#use-store-in-composition-api">详细介绍</a></p> <ul><li>mapGettersToRefs</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">mapGettersToRefs</span><span class="token punctuation">(</span>maps<span class="token operator">:</span> Array<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span>any<span class="token operator">&gt;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p><strong>组合式 API 特有</strong>，在组合式 API 场景下需解构访问 state 并保持 state 响应性，可以使用该方法。<a href="/guide/advance/store.html#use-store-in-composition-api">详细介绍</a></p> <h2 id="createstorewiththis"><a href="#createstorewiththis" class="header-anchor">#</a> createStoreWithThis</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span>store<span class="token operator">:</span> Store<span class="token punctuation">)</span><span class="token operator">:</span> Store
+</code></pre></div><blockquote><p>createStoreWithThis 为 createStore 的变种方法，主要为了在 <code>Typescript</code> 环境中，可以更好地支持 store 中的类型推导。<br>
+其主要变化在于定义 getters， mutations 和 actions 时，
+自身的 state，getters 等属性不再通过参数传入，而是会挂载到函数的执行上下文 this 当中，通过 this.state 或 this.getters 的方式进行访问。
+由于TS的能力限制，getters/mutations/actions 只有使用对象字面量的方式直接传入 createStoreWithThis 时
+才能正确推导出 this 的类型，当需要将 getters/mutations/actions 拆解为对象编写时，需要用户显式地声明 this 类型，无法直接推导得出。</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>
+<span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> getMixin<span class="token punctuation">,</span> createStoreWithThis<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">aa</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">bb</span><span class="token operator">:</span> <span class="token number">2</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">cc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>aa <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bb
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">doSth3</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>getters<span class="token punctuation">.</span>cc<span class="token punctuation">)</span>
+      <span class="token keyword">return</span> <span class="token boolean">false</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token string">'2'</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">c</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>b
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">d</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// data, mixin, computed中定义的数据能够被推导到this中</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>aaa <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>c
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token comment">// 从store上map过来的计算属性或者方法同样能够被推导到this中</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'aa'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token comment">// 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin</span>
+    <span class="token function">getMixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token function">aaa</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token keyword">return</span> <span class="token number">123</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token function">doSth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>aaa<span class="token punctuation">)</span>
+          <span class="token keyword">return</span> <span class="token boolean">false</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">doSth2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token operator">++</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>d<span class="token punctuation">)</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>aa<span class="token punctuation">)</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doSth3</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'doSth3'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="createstatewiththis"><a href="#createstatewiththis" class="header-anchor">#</a> createStateWithThis</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createStateWithThis</span><span class="token punctuation">(</span>state<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
+</code></pre></div><blockquote><p>createStateWithThis 为创建 state 提供了类型推导，对于基本类型可以由 TypeScript 自行推导，使用其他类型时，推荐使用 as 进行约束</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createStateWithThis <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">export</span> type StatusType <span class="token operator">=</span> <span class="token string">'start'</span> <span class="token operator">|</span> <span class="token string">'running'</span> <span class="token operator">|</span> <span class="token string">'stop'</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createStateWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">'running'</span> <span class="token keyword">as</span> StatusType
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="creategetterswiththis"><a href="#creategetterswiththis" class="header-anchor">#</a> createGettersWithThis</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createGettersWithThis</span><span class="token punctuation">(</span>getters<span class="token operator">:</span> Object<span class="token punctuation">,</span> options<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span>Object
+</code></pre></div><ul><li><p>getters</p> <p>需要定义的 getters 对象。</p></li> <li><p>options（可选参数）</p> <p>在 options 中可以传入 state，getters，deps。由于 getter 的类型推论需要基于 state，所以导出 getters 时，需要将 state 进行传入。deps 是作为一个扩展存在，getters 可以通过 deps 中传入的其他 store 来获取值，当 store 没有其他需要依赖的 deps 时可以不传。createMutationsWithThis 和 createActionsWithThis 同理。</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createGettersWithThis<span class="token punctuation">,</span> createStoreWithThis <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createGettersWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">isStart</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token string">'start'</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">getNum</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>base<span class="token punctuation">.</span>test <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>getters<span class="token punctuation">.</span>base<span class="token punctuation">.</span>getTest
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  state<span class="token punctuation">,</span>
+  <span class="token literal-property property">deps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">testNum</span><span class="token operator">:</span> <span class="token number">0</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token function">getTest</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>testNum <span class="token operator">*</span> <span class="token number">2</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="createmutationswiththis"><a href="#createmutationswiththis" class="header-anchor">#</a> createMutationsWithThis</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createMutationsWithThis</span><span class="token punctuation">(</span>mutations<span class="token operator">:</span> Object<span class="token punctuation">,</span> options<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
+</code></pre></div><ul><li><p>mutations</p> <p>需要定义的 mutations 对象。</p></li> <li><p>options（可选参数）</p> <p>在 options 中可以传入 state，deps。</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createMutationsWithThis <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createMutationsWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setCurrentStatus</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">payload</span><span class="token operator">:</span> StatusType</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>status <span class="token operator">=</span> payload
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> state <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="createactionswiththis"><a href="#createactionswiththis" class="header-anchor">#</a> createActionsWithThis</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createActionsWithThis</span><span class="token punctuation">(</span>actions<span class="token operator">:</span> Object<span class="token punctuation">,</span> options<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
+</code></pre></div><ul><li><p>actions</p> <p>需要定义的 actions 对象。</p></li> <li><p>options（可选参数）</p> <p>由于action 可以同时调用 getters、mutations，所以需要将这些都传入，以便进行类型推导。因此 options 可以传入 state、getters、mutations、deps。</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createActionsWithThis <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> state<span class="token punctuation">,</span> <span class="token punctuation">{</span> StatusType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./state'</span>
+<span class="token keyword">import</span> getters <span class="token keyword">from</span> <span class="token string">'./getters'</span>
+<span class="token keyword">import</span> mutations <span class="token keyword">from</span> <span class="token string">'./mutations'</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createActionsWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">testActions</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">payload</span><span class="token operator">:</span> StatusType</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setCurrentStatus'</span><span class="token punctuation">,</span> payload<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  state<span class="token punctuation">,</span>
+  getters<span class="token punctuation">,</span>
+  mutations
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/api/instance-api.html" class="prev">
+        实例 API
+      </a></span> <span class="next"><a href="/api/directives.html">
+        模板指令
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/46.22f9a9c6.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/1.0.html b/docs-vuepress/.vuepress/dist/articles/1.0.html
new file mode 100644
index 0000000000..b344feb20d
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/1.0.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>滴滴开源小程序框架Mpx | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/47.2bd2cecc.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" aria-current="page" class="active sidebar-link">滴滴开源小程序框架Mpx</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/1.0.html#设计思路" class="sidebar-link">设计思路</a></li><li class="sidebar-sub-header"><a href="/articles/1.0.html#技术实现" class="sidebar-link">技术实现</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/1.0.html#数据响应与性能优化" class="sidebar-link">数据响应与性能优化</a></li><li class="sidebar-sub-header"><a href="/articles/1.0.html#编译构建" class="sidebar-link">编译构建</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/1.0.html#结语" class="sidebar-link">结语</a></li></ul></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="滴滴开源小程序框架mpx"><a href="#滴滴开源小程序框架mpx" class="header-anchor">#</a> 滴滴开源小程序框架Mpx</h1> <blockquote><p>作者：<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">hiyuki<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p>Mpx是一款致力于提高小程序开发体验的增强型小程序框架，通过Mpx，我们能够以最先进的web开发体验(Vue + Webpack)来开发生产性能深度优化的小程序，Mpx具有以下一些优秀特性：</p> <ul><li>数据响应特性(watch/computed)</li> <li>增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等)</li> <li>深度性能优化(原生自定义组件/基于依赖收集和数据变化的setData)</li> <li>Webpack编译(npm/循环依赖/Babel/ESLint/css预编译/代码优化等)</li> <li>单文件组件开发</li> <li>状态管理(Vuex规范/多实例/可合并)</li> <li>跨团队合作(packages)</li> <li>逻辑复用能力(mixins)</li> <li>脚手架支持</li> <li>小程序自身规范的完全支持</li> <li>支付宝小程序的支持</li></ul> <h2 id="设计思路"><a href="#设计思路" class="header-anchor">#</a> 设计思路</h2> <p>目前业界主流的小程序框架主要有WePY，mpvue和Taro，这三者都是将其他的语法规范转译为小程序语法规范，我们称其为转译型框架。不同于上述三者，Mpx是一款基于小程序语法规范的增强型框架，我们使用Vue中优秀的语法特性增强了小程序，而不是让用户直接使用vue语法来开发小程序，之所以采用这种设计主要是基于如下考虑：</p> <ul><li>转译型框架无法支持源框架的所有语法特性(如Vue模板中的动态特性或React中动态生成的jsx)，用户在使用源框架语法进行开发时可能会遇到不可预期的错误，具有不确定性</li> <li>小程序本身的技术规范在不断地更新进步，许多新的技术规范在转译型框架中无法支持或需要很高的支持成本，而对于增强型框架来说只要新的技术规范不与增强特性冲突，就能够直接支持</li></ul> <h2 id="技术实现"><a href="#技术实现" class="header-anchor">#</a> 技术实现</h2> <p>小程序刚推出时不支持自定义组件，无法进行组件化开发，当时最早的小程序框架WePY做的核心工作就是支持了小程序的组件化开发，后来的mpvue也基于Vue做了类似的工作。由于当时的小程序本身不支持自定义组件，WePY和mpvue的组件化支持都是基于编译做的组件化封装，用户编写的组件模板会被编译为Page中模板的一部分，在组件中定义的数据会被编译为Page中的数据，对组件进行数据更新也会基于路径映射调用Page.setData。这个方案在当时的技术条件下确实是一个唯一解，但该方案在复杂的小程序应用中会存在明显性能问题，原因在于该方案中页面的数据量会很大，而且每个组件的局部更新实际上都会成为页面级别的全局更新，在组件较多的页面中容易引发性能问题。在小程序自定义组件推出后，我们通过性能测试确认了该方案解决了上述组件封装方案中的性能问题。由于自定义组件在当时是一个最新的技术标准，业内的小程序框架都未支持，而我们本身的业务又有复杂小程序的开发需求，于是我们就基于小程序自定义组件规范启动了Mpx框架的设计与开发</p> <p><em>Page与Component setData性能对照</em></p> <table><thead><tr><th></th> <th>Component</th> <th>Page</th></tr></thead> <tbody><tr><td>局部更新</td> <td>1975ms</td> <td>7186ms</td></tr> <tr><td>全局更新</td> <td>6210ms</td> <td>24612ms</td></tr></tbody></table> <blockquote><p>性能衡量标准说明：
+局部更新：文档中存在1000个节点，其中一个节点更新1000次的耗时；
+全局更新：文档中存在5个节点，5个节点独立更新1000次的耗时
+以上数据在iphone7微信小程序环境下测试得出</p></blockquote> <h3 id="数据响应与性能优化"><a href="#数据响应与性能优化" class="header-anchor">#</a> 数据响应与性能优化</h3> <p>数据响应作为Vue最核心的特性，在我们的日常开发中被大量使用，能够极大地提高前端开发体验和效率，我们在框架设计初期最早考虑的就是如何将数据响应特性加入到小程序开发中。在数据响应的实现上，我们引入了MobX，一个实现了纯粹数据响应能力的知名开源项目。借助MobX和mixins，我们在小程序组件创建初期建立了一个响应式数据管理系统，该系统观察着小程序组件中的所有数据(data/props/computed)并基于数据的变更驱动视图的渲染(setData)及用户注册的watch回调，实现了Vue中的数据响应编程体验。与此同时，我们基于MobX封装实现了一个Vuex规范的数据管理store，能够方便地注入组件进行全局数据管理。为了提高跨团队开发的体验，我们对store添加了多实例可合并的特性，不同团队维护自己的store，在需要时能够合并他人或者公共的store生成新的store实例，我们认为这是一种比Vuex中modules更加灵活便捷的跨团队数据管理模式</p> <p>作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：</p> <ol><li>尽可能减少setData调用的频次</li> <li>尽可能减少单次setData传输的数据</li></ol> <p>为了实现以上两个优化方向，我们做了以下几项工作：</p> <ul><li>将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；</li> <li>将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。
+基于以上优化，我们大大减少了小程序setData的调用频次和传递数据量，与初版Mpx中track全量数据的方案相比提升显著。</li></ul> <p><em>Mpx setData优化效果</em></p> <table><thead><tr><th></th> <th>旧版mpx</th> <th>新版mpx</th></tr></thead> <tbody><tr><td>setData次数</td> <td>164</td> <td>88</td></tr> <tr><td>setData数据量</td> <td>370kB</td> <td>38kB</td></tr></tbody></table> <blockquote><p>以上数据由较复杂小程序在固定交互流程后统计得出</p></blockquote> <p><img src="https://dpubstatic.udache.com/static/dpubimg/4cb54489-b99d-4560-97aa-68f756730131.jpeg" alt="Mpx数据响应机制流程示意图"> <em>Mpx数据响应机制流程示意图</em></p> <h3 id="编译构建"><a href="#编译构建" class="header-anchor">#</a> 编译构建</h3> <p>我们希望使用目前设计最强大、生态最完善的编译构建工具Webpack来实现小程序的编译构建，让用户得到web开发中先进强大的工程化开发体验。使用过Webpack的同学都知道，通常来说Webpack都是将项目中使用到的一系列碎片化模块打包为一个或几个bundle，而小程序所需要的文件结构是非常离散化的，如何调解这两者的矛盾成为了我们最大的难题。一种非常直观简单的思路在于遍历整个src目录，将其中的每一个.mpx文件都作为一个entry加入到Webpack中进行处理，这样做的问题主要有两个：</p> <ol><li>src目录中用不到的.mpx文件也会被编译输出，最终也会被小程序打包进项目包中，无意义地增加了包体积；</li> <li>对于node_modules下的.mpx文件，我们不认为遍历node_modules是一个好的选择。</li></ol> <p>最终我们采用了一种基于依赖分析和动态添加entry的方式来进行实现，用户在Webpack配置中只需要配置一个入口文件app.mpx，loader在解析到json时会解析json中pages域和usingComponents域中声明的路径，通过动态添加entry的方式将这些文件添加到Webpack的构建系统当中（注意这里是添加entry而不是添加依赖，因为只有entry能生成独立的文件，满足小程序的离散化文件结构），并递归执行这个过程，直到整个项目中所有用到的.mpx文件都加入进来，在输出前，我们借助了CommonsChunkPlugin/SplitChunksPlugin的能力将复用的模块抽取到一个外部的bundle中，确保最终生成的包中不包含重复模块。我们提供了一个Webpack插件和一个.mpx文件对应的loader来实现上述操作，用户只需要将其添加到Webpack配置中就可以以打包web项目的方式正常打包小程序，没有任何的前置和后置操作，支持Webpack本身的完整生态。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/ce6d470c-0a4c-486e-a2f5-ad225c289832.jpeg" alt="Mpx编译构建机制流程示意图"> <em>Mpx编译构建机制流程示意图</em></p> <h1 id="现状和未来"><a href="#现状和未来" class="header-anchor">#</a> 现状和未来</h1> <p>目前Mpx框架已经在滴滴内部大量使用，支撑了滴滴出行、青桔单车、街兔电单车、营销、车服等业务在小程序上的实现，线上运行稳定，收到了大量的好评反馈。未来我们在对框架进行持续迭代优化的同时会持续跟进微信和支付宝最新的技术标准，同时也会将在更多的小程序平台上进行适配。由于我们的设计初衷和专注点在于增强小程序开发体验，Mpx并没有进行跨H5甚至是跨Native的支持，但现实业务当中确实存在这样的诉求，未来我们会在Mpx的基础上对跨端进行一定的尝试，与此同时我们依然会持续维护升级Mpx，原因在于跨端意味着灵活性受限及能力的缺失，我们希望能给用户提供第二种选择。</p> <p><em>Mpx与业内主流小程序框架异同对比</em></p> <table><thead><tr><th></th> <th>WePY</th> <th>mpvue</th> <th>Taro</th> <th>Mpx</th></tr></thead> <tbody><tr><td>代码规范</td> <td>自定义</td> <td>Vue</td> <td>React</td> <td>小程序+</td></tr> <tr><td>组件化实现</td> <td>Page封装</td> <td>Page封装</td> <td>Component</td> <td>Component</td></tr> <tr><td>数据响应</td> <td>脏值检查</td> <td>Vue</td> <td>无</td> <td>Mobx</td></tr> <tr><td>状态管理</td> <td>Redux</td> <td>Vuex</td> <td>Redux</td> <td>类Vuex</td></tr></tbody></table> <h2 id="结语"><a href="#结语" class="header-anchor">#</a> 结语</h2> <p>如果你注重开发体验和产品性能，专注于小程序开发，那Mpx会是一个很好的选择。最后感谢开源社区源源不断涌现出的优秀项目，给我们提供了无限的启发和巨大的技术帮助。</p> <p>Github: <a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer">https://github.com/didi/mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+使用文档: <a href="https://mpxjs.cn/" target="_blank" rel="noopener noreferrer">https://mpxjs.cn/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+用户交流群:
+<img src="https://dpubstatic.udache.com/static/dpubimg/at_XEnlFb0/WechatIMG1.jpeg" alt="微信"></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/articles/2.0.html">
+        Mpx发布2.0，完美支持跨平台开发
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/47.2bd2cecc.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/2.0.html b/docs-vuepress/.vuepress/dist/articles/2.0.html
new file mode 100644
index 0000000000..9482e8fab6
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/2.0.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>滴滴小程序框架Mpx发布2.0，支持小程序跨平台开发，可直接转换已有微信小程序 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/48.55792a30.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" aria-current="page" class="active sidebar-link">Mpx发布2.0，完美支持跨平台开发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/2.0.html#跨平台开发" class="sidebar-link">跨平台开发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/2.0.html#设计理念" class="sidebar-link">设计理念</a></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#使用方法" class="sidebar-link">使用方法</a></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#差异抹平" class="sidebar-link">差异抹平</a></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#条件编译" class="sidebar-link">条件编译</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#性能优化" class="sidebar-link">性能优化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/2.0.html#setdata优化" class="sidebar-link">setData优化</a></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#包体积优化" class="sidebar-link">包体积优化</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#渐进迁移" class="sidebar-link">渐进迁移</a></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#未来规划" class="sidebar-link">未来规划</a></li></ul></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="滴滴小程序框架mpx发布2-0-支持小程序跨平台开发-可直接转换已有微信小程序"><a href="#滴滴小程序框架mpx发布2-0-支持小程序跨平台开发-可直接转换已有微信小程序" class="header-anchor">#</a> 滴滴小程序框架Mpx发布2.0，支持小程序跨平台开发，可直接转换已有微信小程序</h1> <blockquote><p>作者：<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">hiyuki<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p>Mpx是一款致力于提高小程序开发体验和效率的增强型小程序框架，目前在滴滴公司内部支撑了包括滴滴出行小程序，滴滴出行广场小程序，青桔单车，黑马电单车，小桔养车，小桔加油在内的小程序生态；自去年11月开源以来，Mpx也吸纳了众多外部开发者的加入，基于Mpx开发了开走吧，好免街，花忆等小程序。</p> <p>长期以来，Mpx优秀的开发体验和强大的稳定性得到了内外开发者的一致认可和好评，这非常符合Mpx的设计初衷。但是在各大厂商陆续推出自己的小程序平台，且各家的技术标准都不统一的今天，单纯地提高某一个平台的开发体验已经不能满足广大小程序开发者们的诉求，<code>一套代码在多小程序平台运行</code>已经成为一个现实上的刚需。为了解决这个小程序开发的痛点，Mpx发布了2.0版本，适配了目前业内已经发布的所有小程序平台(微信、支付宝、百度、头条、qq)，并且提供了直接将现有微信小程序编译输出到其他平台运行的能力。</p> <p>Mpx2.0版本新增的主要特性主要包含：</p> <ul><li>完整支持了目前业内已发布的所有小程序平台(微信，支付宝，百度，qq，头条)；</li> <li>Mpx小程序跨平台开发，支持将已有的Mpx微信项目编译输出到其他已支持的小程序平台中运行，<a href="/guide/advance/platform.html">点击查看详情</a>；</li> <li>小程序原生组件跨平台编译，支持将已有的微信原生组件编译输出到其他已支持的小程序平台中运行；</li> <li>深度分包优化，编译过程中进行精准分包资源判断，所有分包only的资源(组件、js、外部样式、外部模板、wxs，图像媒体等)都会精确输出到分包目录中；</li> <li>render函数中完整支持wxs模块，<a href="/guide/understand/runtime.html">关于render函数点击查看详情</a>；</li> <li>支持了模板引入，内联wxs，自定义tabbar，独立分包，workers，云开发等原生能力，进一步完善原生兼容性。</li></ul> <p>同业内主流的小程序跨端框架相比，Mpx更专注于小程序开发本身，在小程序开发中具备以下优势：</p> <ul><li>基于小程序自身的技术标准进行增强，没有进行过重的DSL转换，开发时遇到的坑会更少；</li> <li>完全兼容原生小程序技术规范，0成本迁移原生小程序项目;</li> <li>跨平台开发以跨小程序平台为目标，大部分差异抹平工作在编译阶段进行，大大减少运行时适配层增加的包体积；</li> <li>支持业内微信小程序组件库(如vant、iView等)直接转换到其他小程序平台运行;</li> <li>非常重视小程序性能，提供了深度的setData和包体积优化。</li></ul> <p>关于Mpx更详细的介绍可以查看<a href="https://mpxjs.cn/" target="_blank" rel="noopener noreferrer">官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>和<a href="/articles/1.0.html">这篇文章</a>。</p> <p>Github：<a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer">https://github.com/didi/mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="跨平台开发"><a href="#跨平台开发" class="header-anchor">#</a> 跨平台开发</h2> <p>作为2.0版本的核心能力，Mpx的跨平台开发能力允许用户直接将已有小程序项目编译输出到其他已支持的小程序平台中运行。微信小程序作为小程序概念的提出者，有着最广泛的生态覆盖，因此我们优先支持了将微信小程序编译为其他平台小程序的能力。基于这个能力，用户不仅能跨平台编译微信Mpx项目，甚至能够将微信的原生自定义组件也编译到其他小程序平台进行运行，这意味着我们的跨平台项目能够直接使用一些社区内已有的UI组件库生态(如vant、iView等)，极大地提高了跨平台开发的适用范围。</p> <h3 id="设计理念"><a href="#设计理念" class="header-anchor">#</a> 设计理念</h3> <p>Mpx框架的核心设计理念在于增强，增强是指在小程序已有的原生能力基础上做加法，拓展小程序的开发能力，提高小程序的开发体验和效率。这个设计理念使Mpx给开发者带来了更强的确定性和可预期性，更低的学习上手和调试成本。基于这个理念，Mpx在不同的小程序平台中进行了差异性的增强适配，并参考各个平台的模板指令风格提供了不同的增强模板指令集，让用户在各小程序平台中都可以以增强的方式去最大限度地使用平台自有的原生能力。</p> <p>我们在对Mpx提供跨平台能力的支持时也遵循了增强的核心设计理念。简单来讲，Mpx的跨平台能力是在多平台能力的基础上，在编译和运行时增加了一层转换层，将源平台的代码转换为目标平台的代码之后，再按照既有的目标平台的处理逻辑进行增强，同时我们也提供了一套完善的条件编译机制，让用户自行实现少数框架无法转换的部分。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/38652040-2fbf-435b-aeff-563666c4021c.png" alt="Mpx跨平台开发流程示意图"></p> <p><em>Mpx跨平台开发流程示意图</em></p> <p>Mpx跨平台能力设计思路明显区别于业内已有的其他小程序跨平台框架，主要差异在于：</p> <ul><li>Mpx以小程序本身的DSL作为基准，而没有使用web框架(React,Vue)的DSL；</li> <li>Mpx主要通过编译和运行时转换的方式处理平台差异，没有提供额外的差异抹平层(基础组件库等)。</li></ul> <p>之所以采用这种设计，主要基于以下原因：</p> <ul><li>Mpx主要以跨小程序平台为目标，目前各大小程序平台的技术规范具有一定相似性，绝大部分平台差异能够通过编译和运行时手段抹平，同时省去的差异抹平层也能够进一步减少框架运行时体积；</li> <li>使用小程序本身的DSL作为基准允许用户直接在已有项目中使用跨平台能力，对于原生小程序项目或组件也能够使用该能力进行跨平台输出；</li> <li>结合完善的条件编译支持，该方案能够在满足用户跨平台需求的同时仍然允许用户最大限度地使用各个小程序平台提供的能力，完全延续了Mpx增强的核心设计理念。</li></ul> <h3 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h3> <p>Mpx跨平台开发的使用方式非常简单，用户只需在MpxWebpackPlugin创建时传入mode和srcMode参数指定源平台和目标平台，当srcMode和mode不一致时，框架会读取相应的配置对项目进行编译和运行时转换。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 微信转支付宝</span>
+<span class="token keyword">new</span> <span class="token class-name">MpxWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// mode指定目标平台，可选值有(wx|ali|swan|qq|tt)</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'ali'</span><span class="token punctuation">,</span>
+  <span class="token comment">// srcMode指定源码平台，默认值同目标平台一致</span>
+  <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="差异抹平"><a href="#差异抹平" class="header-anchor">#</a> 差异抹平</h3> <p>目前各大厂商的小程序技术规范在宏观层面上大致保持一致，但是技术细节方面存在很多差异，大致划分为以下几个部分：</p> <ul><li>模板语法/基础组件差异</li> <li>json配置差异</li> <li>wxs语法差异</li> <li>页面/组件对象差异</li> <li>api调用差异</li> <li>webview bridge差异</li></ul> <p>其中，对于模板语法/基础组件、json配置和wxs中的静态差异，我们主要通过编译手段进行转换处理，对于这部分差异中无法转换的部分会在编译阶段报错指出；而对于页面/组件对象、api调用和webview bridge中js运行时的差异，我们主要通过运行时手段进行处理，对应的无法转换部分也会在运行时中报错指出。</p> <p>值得注意的是，我们在跨平台转换中做的工作不仅是对可转换的技术标准进行转换映射，对于一些目标平台中不存在的能力，我们也尽可能地通过编译和运行时手段提供了模拟和支持，最大限度地减少用户在跨平台开发中需要付出的额外工作量。以差异性最大但现实场景也最多的微信转支付宝为例，Mpx模拟提供了许多微信中支持但支付宝中未支持的能力：</p> <ul><li>组件自定义事件</li> <li>组件间关系</li> <li>获取子组件实例</li> <li>observers/property observer</li> <li>内联wxs</li> <li>外部样式类</li></ul> <p>对于原生自定义组件的跨平台转换，我们会对其进行简单的运行时注入，使其能够使用Mpx框架提供的运行时转换能力。</p> <h3 id="条件编译"><a href="#条件编译" class="header-anchor">#</a> 条件编译</h3> <p>对于框架无法抹平的差异部分，会在编译和运行时报错指出，对于这部分错误，我们提供了完善的条件编译机制让用户能够自行编写目标平台的patch进行修复，该能力也能用于实现具有平台差异性的业务逻辑。</p> <p>上文中提到Mpx通过读取用户传入的mode和srcMode来决定是否以及如何对项目进行转换，mode和srcMode分别代表整个项目构建的目标平台和源平台，条件编译能够让用户在项目中创建声明了自身平台属性(localSrcMode)的文件和代码块。在项目构建中，框架会优先加载带有localSrcMode声明且localSrcMode与项目目标平台匹配(localSrcMode===mode)的文件和代码块，这部分文件和代码块需要完全依照自身声明的平台标准进行编写，Mpx不会对其进行任何编译和运行时的跨平台转换。</p> <p>Mpx提供了三种维度的条件编译，分别是文件维度，区块维度和代码维度，用户可以根据平台差异的覆盖范围灵活选择使用。</p> <h2 id="性能优化"><a href="#性能优化" class="header-anchor">#</a> 性能优化</h2> <p>Mpx框架专注于小程序开发，在性能优化方面我们做过很多尝试和努力，主要集中在两个方面：</p> <ul><li>运行时的setData优化</li> <li>编译构建时的包体积优化</li></ul> <h3 id="setdata优化"><a href="#setdata优化" class="header-anchor">#</a> setData优化</h3> <p>数据响应是Mpx运行时增强的核心能力，该能力让用户在小程序开发中能够像Vue中一样使用watch和computed特性，并且用直接赋值的方式操作数据驱动视图更新，而不需要手动调用setData方法，换言之框架接管了小程序中的setData调用。</p> <p>通过各大小程序平台的设计原理和性能优化建议可以得知，setData对于小程序的性能表现非常重要，而setData优化的两大方向在于：</p> <ul><li>尽可能减少setData调用的频次</li> <li>尽可能减少单次setData传输的数据</li></ul> <p>为了实现setData的优化，我们在模板编译过程中对于每个组件的模板都生成了一个渲染函数(render function)，该函数模拟模板的渲染逻辑，在每次执行时访问当次渲染所需的数据，并将当次访问过的数据路径记录下来作为函数返回值返回。</p> <p>在运行时，框架会在每个组件创建时创建一个render watcher，该watcher追踪渲染函数，当渲染依赖数据发生变更时异步执行渲染函数，在render watcher回调中得到渲染函数返回的数据路径，基于这些路径与上一次的缓存数据进行diff比对，过滤掉未发生变化的数据后得到最小必要数据，最后调用setData将最小必要数据发送到真实的小程序渲染层更新视图。</p> <p>基于这个机制，当数据发生变更时，只有当前渲染依赖的那部分数据发生变更才会异步地触发render watcher的执行，而每次执行后也只有实际发生变更的那部分数据会被setData发送到渲染层。这样用户就能自由地根据业务需求来操作数据，无需关注setData的调用优化，框架能够自动进行程序上最优的setData调用，在提升用户开发体验的同时也提升了程序性能。</p> <p>在1.x版本中，渲染函数内无法执行wxs的逻辑，对于含有wxs的组件有可能降级到全量设置数据的模式，在2.0版本中，我们将wxs模块转译处理为js可执行的代码后注入到js bundle中，含有wxs的渲染函数也能够正常访问并执行wxs逻辑。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/9ead35f1-693f-44f4-beb3-f98555ab6861.png" alt="setData优化示意图"></p> <p><em>setData优化示意图</em></p> <h3 id="包体积优化"><a href="#包体积优化" class="header-anchor">#</a> 包体积优化</h3> <p>类似于运行时对于setData的接管，Mpx在编译阶段接管了项目的资源管理。得益于webpack强大的插件机制，Mpx开发了一个深度定制的webpack插件，基于webpack完成小程序的打包构建工作。用户在使用Mpx开发小程序时可以不受限制地使用npm依赖、最新的es特性和css预处理器等现代web开发能力。与此同时，Mpx在包体积优化上也做了很多工作，让用户专注于业务开发而无需花费过多精力进行包体积管理，我们所做的优化工作如下：</p> <ul><li>打包构建工作完全基于依赖分析，任何没有被引用的资源都不会出现在dist当中；</li> <li>对于npm组件和页面的构建也完全基于依赖分析按需打包，不会copy整个miniprogram_dist目录，也不需要执行构建npm，使用体验和包体积均优于微信小程序自身的npm支持方案；</li> <li>基于webpack提供的能力进行公共模块抽取和代码压缩等优化工作；</li> <li>完善的分包支持，对所有资源进行从属分析，将所有分包only的资源都输出到分包目录中。</li></ul> <p>分包作为微信小程序中优化包体积的核心手段(类似于异步按需加载)，Mpx对其进行了完善的支持。为了精确地标记出分包only的资源，我们在构建时将主包和分包的依赖收集步骤拆分开来串行处理，先处理主包，再处理分包。在主包的处理过程中，将主包页面中引用的所有非js资源(组件、外部样式、外部模板、wxs，图像媒体等)都记录下来，在处理分包时，对分包内引用的非js资源都进行检查，如果被主包引用过则输出到主包中，否则标记为分包only的资源输出到分包目录下。</p> <p>对于js模块资源，我们在脚手架中生成的构建配置中提供了辅助函数，便于用户进行分包bundle的配置，经过该配置后，分包only的公用模块会被打入分包bundle输出到分包目录下，其余的公共模块会正常打入主bundle中。</p> <p>在跨平台开发中，我们建议用户使用Mpx提供的<a href="/guide/advance/subpackage.html#packages">packages</a>来定义分包，这样在转换到不支持分包的小程序平台时会自动降级为同步包进行处理。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/3121ca4e-1b47-43bc-992a-b351c4a03da4.png" alt="分包构建示意图"></p> <p><em>分包构建示意图</em></p> <h2 id="渐进迁移"><a href="#渐进迁移" class="header-anchor">#</a> 渐进迁移</h2> <p>Mpx提供了良好的渐进迁移支持，对于使用原生或其他小程序框架的开发者来说，采用渐进迁移的方式逐步引入Mpx进行开发成本并不大。</p> <p>在2.0版本中我们进一步完善了Mpx的原生兼容性，跟进支持了各个小程序平台最新的技术能力，如自定义tabbar，独立分包，分包预加载，workers，云开发等能力，同时补齐了一些1.x版本遗漏的支持。得益于此，对于使用原生小程序开发的开发者来说，迁移Mpx的成本几乎为0，用户只需将对应页面组件的构造函数替换为Mpx提供的createPage/createCompnent，即可使用Mpx提供的各种增强能力。</p> <p>对于使用其他框架的开发者，Mpx也提供了局部构建的机制，允许用户将特定的页面和组件单独构建输出为原生组件，用户只需手动或者编写脚本输出的原生组件整合进原有项目中即可。</p> <h2 id="未来规划"><a href="#未来规划" class="header-anchor">#</a> 未来规划</h2> <p>作为滴滴公司内部小程序生态的基础设施，我们会对Mpx框架进行长期的维护更新，确保能在第一时间支持各个小程序平台最新的技术特性。与此同时，我们也会进一步完善框架的基础能力，目前已排上日程待支持能力包括：</p> <ul><li>i18n</li> <li>ts支持</li> <li>单元测试支持</li></ul> <p>在跨平台能力方面，我们也会根据社区的反馈和建议，以及小程序的标准化进程，对其进行持续的完善与更新。</p> <p>最后，如果你专注小程序开发，关注开发体验和产品性能，那Mpx会是你最好的选择。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/articles/1.0.html" class="prev">
+        滴滴开源小程序框架Mpx
+      </a></span> <span class="next"><a href="/articles/performance.html">
+        小程序框架运行时性能大测评
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/48.55792a30.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/2.7-release.html b/docs-vuepress/.vuepress/dist/articles/2.7-release.html
new file mode 100644
index 0000000000..f6ff6af0d1
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/2.7-release.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx2.7 版本正式发布，大幅提升编译构建速度 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/49.cde94a79.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" aria-current="page" class="active sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/2.7-release.html#编译构建提速" class="sidebar-link">编译构建提速</a></li><li class="sidebar-sub-header"><a href="/articles/2.7-release.html#分包输出能力增强" class="sidebar-link">分包输出能力增强</a></li><li class="sidebar-sub-header"><a href="/articles/2.7-release.html#单元测试支持" class="sidebar-link">单元测试支持</a></li><li class="sidebar-sub-header"><a href="/articles/2.7-release.html#module-rules复用" class="sidebar-link">Module.rules复用</a></li><li class="sidebar-sub-header"><a href="/articles/2.7-release.html#即将到来的新特性" class="sidebar-link">即将到来的新特性</a></li><li class="sidebar-sub-header"><a href="/articles/2.7-release.html#未来规划" class="sidebar-link">未来规划</a></li></ul></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx2-7-版本正式发布-大幅提升编译构建速度"><a href="#mpx2-7-版本正式发布-大幅提升编译构建速度" class="header-anchor">#</a> Mpx2.7 版本正式发布，大幅提升编译构建速度</h1> <blockquote><p>作者：<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">hiyuki<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p><a href="https://www.mpxjs.cn/" target="_blank" rel="noopener noreferrer">Mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>是一款开源的增强型跨端小程序框架，它具有良好的开发体验，极致的应用性能和一份源码同构输出所有小程序平台及web环境的跨端能力。近期，我们发布了框架最新的2.7版本，基于<code>webpack5</code>彻底重构了框架的核心编译构建流程，利用持久化缓存大幅提升了编译构建速度，最高提升可达10倍。除此之外，<code>Mpx2.7</code>版本还带来了一系列重要的功能更新，包括分包输出能力增强，完善的单元测试支持和用户Rules应用等，下面会对这些新特性进行逐个展开介绍。</p> <h2 id="编译构建提速"><a href="#编译构建提速" class="header-anchor">#</a> 编译构建提速</h2> <p>随着小程序生态的日渐发展壮大，各类线上小程序业务体量和复杂度的不断升级，小程序的包体积从最开始的2M以内膨胀到20M甚至30M，已经远远不复当初的&quot;<strong>小</strong>&quot;程序之名。随着小程序项目大小的不断增加，采用框架进行小程序开发的开发者们往往都会面临一个问题，即框架的编译耗时过长，Mpx也不例外。</p> <p>以团队负责的小程序项目为例，该项目目前的总包体积已经超过25M，包含近30000个JS模块，400多个页面和3000多个组件，在本地进行一次完整构建需要等待15分钟，CI环境下甚至需要近半个小时，远远超出能够忍受的范围，对小程序开发体验和开发效率造成了极大的影响。虽然旧版本中的watch模式能够在很大程度上缓解我们在开发调试过程中面临的编译耗时问题，但我们在日常开发中，仍然有很多场景无法使用watch模式（首次构建/CI环境/需真机预览等），基于内存缓存的watch模式也无法长期运行。对于这个问题，我们在过去也做了很多技术尝试，如支持watch:prod模式，局部编译，多线程编译，DLL预编译等等，但是整体尝试下来这些方案要么收效有限要么适用面不足，都没能探索到一个能从根本上解决问题的方案。</p> <p>直到2020年底，<code>webpack5</code>正式发布，基于文件系统持久化缓存能力的出现，让我们看到了该问题的解决之道。由于webpack5相较于webpack4有着非常多的升级改动，而Mpx的编译构建在过去版本中也存在着各种历史遗留问题，我们花了较长的时间吃透webpack5的源码以及重新思考Mpx中存在的不合理设计。经过3个多月的开发，我们彻底重构了Mpx的核心编译构建流程，使其能够<strong>完整安全地</strong>利用webpack5持久化缓存能力进行构建提速，同时也彻底解决了旧版Mpx中存在的历史遗留问题，在去年10月完成了beta版的开发与发布，并在业务中进行了初步的落地尝试。之后又经过2个多月的业务回归测试和框架功能补全，我们在beta版的基础上又迭代修复了近30个patch版本，在业务上完成了充分的回归测试，让我们确信目前的新版本已经达到了能够release的阶段。</p> <blockquote><p>为什么不是<code>Vite</code></p> <p>聊起编译提速，可能大部分人首先想到的是Vite，诚然Vite是一个极富创造力的技术方案，但是在小程序场景下，却不一定是最合适的方案，这主要源于Vite最核心的设计利用了现代浏览器原生支持的ESM，而目前没有任何一家的小程序环境能够原生支持ESM，这就使得Vite最核心的按需编译能力无法得到发挥，而Vite使用esbuild带来的编译速度提升，在webpack环境中也可以选择esbuild-loader提供的能力来替换babel/terser，而且目前esbuild提供的编译能力成熟度还远不能和babel/terser相比，再加上Mpx的编译构建流程很大程度上依赖了webpack提供的能力，从成本和收益上考虑采用webpack5对于我们来说无疑是更好的方案。</p></blockquote> <p>以团队负责的小程序项目为例，我们来看一下Mpx2.7版本带来的编译提速效果：相较于旧版长达15分钟的构建耗时，在无缓存环境下，新版的构建耗时约为8分钟，速度提升了近1倍；而在有缓存环境下，新版构建耗时可以缩短至80s，速度提升了<strong>10倍以上</strong>！随着我们对CI流程的持久化缓存改造完成，可以确保在日常的大部分构建场景都会在有缓存的环境下进行。</p> <h2 id="分包输出能力增强"><a href="#分包输出能力增强" class="header-anchor">#</a> 分包输出能力增强</h2> <p>在Mpx2.7版本中，我们对小程序分包能力的支持进行了进一步的完善增强。</p> <h3 id="独立分包初始化模块"><a href="#独立分包初始化模块" class="header-anchor">#</a> 独立分包初始化模块</h3> <p>在过去的版本中，我们对独立分包进行过专门的构建支持，以满足独立分包资源独占的要求。不过在使用独立分包进行业务开发时，往往会面临的一个棘手问题在于初始化逻辑无处安放。这是由于独立分包没有app.js，而在小程序中，组件的js逻辑会早于页面js执行，具体的执行顺序又和组件的嵌套关系有关，因此我们无法找到一个确定的代码位置来存放独立分包的初始化逻辑。</p> <p>在Mpx2.7版本中，我们针对独立分包新增了一个全新的增强特性，让用户能够声明独立分包的初始化模块，该模块将会在独立分包启动时全局最先执行，其实现思路大致如下：在构建时为独立分包中所有的组件和页面都添加模块引用，指向用户声明的初始化模块，这样在独立分包启动时，不管哪个组件/页面的js最先执行，都能保障这个初始化模块最先执行，同时由于模块缓存的存在，后续的组件/页面执行时，该模块也不会被重复执行。</p> <p>该特性的详细使用方式可以参考我们的<a href="https://www.mpxjs.cn/guide/advance/subpackage.html#%E7%8B%AC%E7%AB%8B%E5%88%86%E5%8C%85" target="_blank" rel="noopener noreferrer">文档说明<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="分包异步化"><a href="#分包异步化" class="header-anchor">#</a> 分包异步化</h3> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html" target="_blank" rel="noopener noreferrer">分包异步化<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>是微信小程序在去年下半年提出的全新技术特性，该特性打破了传统分包只能引用自身和主包资源的规则限制，通过相关配置和声明，允许分包异步地引用其他分包内的资源，对于复杂小程序的包体积和加载性能优化具有极其重要的意义。</p> <p>在过去，受限于小程序分包资源引用规则，Mpx在编译构建时对于跨分包共用的资源有两种处理策略，其一是将其输出到主包当中，让多个分包都能够通过主包访问，这种策略下可以达到总包体积最优，但是往往会对主包体积造成过大的压力。当主包超出2m限制时，我们就需要采用第二种策略，将这部分跨分包共用的资源冗余地输出到各自的分包中，消除其对于主包体积的占用。在实际的Mpx编译构建当中，这两种策略是同时存在的，具体什么时候采用哪种策略是根据资源类型和用户配置来决定的。</p> <p>由于分包异步化技术打破了传统分包资源引用规则的限制，理想情况下我们可以做到主包不超限的同时总包无冗余，不过该技术目前也存在一些不足：一是跨平台支持度不佳，只有微信支持，不过据我们了解支付宝目前也在跟进中；二是对交互和体验会带来一些影响，同时存在业务改造成本，但这依然不妨碍该技术成为大型小程序优化包体积和加载性能的最优路径。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/c7ac0180-6914-46c6-aaed-c1d3cface8e1.jpeg" alt="分包异步化资源引用"></p> <p>我们在Mpx2.7版本中对分包异步化中最常用的<code>跨分包自定义组件引用</code>进行了完整支持，与原生小程序不同，Mpx中资源的分包归属不由源码位置决定，而是由资源引用关系决定，因此在跨分包资源引用的场景下，用户需要声明引用的资源属于哪个分包，简单使用示例如下：</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token punctuation">{</span>
+  <span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 通过root query声明组件所属的分包，与packages语法下使用root query声明package所属分包的语义保持一致</span>
+    <span class="token property">&quot;button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../subPackageA/components/button?root=subPackageA&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../subPackageB/components/full-list?root=subPackageB&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;simple-list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/simple-list&quot;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token property">&quot;componentPlaceholder&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;view&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;simple-list&quot;</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>详细使用方式可参考<a href="https://www.mpxjs.cn/guide/advance/async-subpackage.html#%E5%88%86%E5%8C%85%E5%BC%82%E6%AD%A5%E5%8C%96" target="_blank" rel="noopener noreferrer">文档说明<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>对于另一项<code>跨分包JS代码引用</code>能力的使用支持，我们目前也正在探索规划中，预计能在今年Q1内完成开发支持。</p> <h2 id="单元测试支持"><a href="#单元测试支持" class="header-anchor">#</a> 单元测试支持</h2> <p>Mpx自从20年开始就对单元测试有了初步的支持，但过去的单测方案在设计上存在一些缺陷，可用性不高，业务落地困难，在Mpx2.7版本中，我们设计了一套全新的技术方案，克服了原有方案中存在的所有问题，在可用性上得到了质的飞跃，新旧方案的对比如下：</p> <p>旧方案：通过Mpx编译构建预先将完整的项目源码构建输出为原生小程序格式，再通过jest + miniprogram-simulate加载构建产出的原生小程序组件来执行测试case。该方案的优点在于编译流程统一，方案实现成本较低，缺点在于执行任何case都需要执行完整的构建流程，耗时较长；而且由于构建本身不基于jest进行，也无法使用jest提供的模块mock功能。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/31756195-2734-4300-8ab4-8b1b7a7d8c8f.jpeg" alt="旧版单测方案"></p> <p>新方案：我们fork了miniprogram-simulate仓库对其扩展了load mpx组件的能力，在资源加载的transform过程中通过mpx-jest插件将mpx组件编译为原生小程序组件，再将内容传递给miniprogram-simulate执行渲染并运行测试case。该方案中模块加载完全基于jest并能够实现组件的按需编译，完美规避旧方案中存在的问题，缺点在于编译流程基于jest api重构，与mpx基于webpack的编译流程独立，存在额外的维护成本，后续我们会将通用的编译逻辑抽离维护，在webpack和jest两侧复用。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/5486308b-b844-402e-802f-f9cc08a07259.jpeg" alt="新版单测方案"></p> <p>关于单元测试更详细的使用指南可参考<a href="https://www.mpxjs.cn/guide/tool/unit-test.html" target="_blank" rel="noopener noreferrer">文档说明<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>随着单测方案的完善，我们今年也会推动单元测试在小程序业务中全面落地，更好地保障代码质量与业务稳定。</p> <h2 id="module-rules复用"><a href="#module-rules复用" class="header-anchor">#</a> Module.rules复用</h2> <p>Mpx的单文件支持很大程度上参考了<code>vue-loader</code>的设计，在vue-loader@15版本前，对于单文件组件中各个区块(block)的loaders应用逻辑默认内置在loader当中，如需对某些区块进行自定义配置，需要向loader的options中传递额外的loader应用规则，无法复用webpack配置的<code>module.rules</code>中已经定义好的规则，这往往会导致我们需要在loader options和module.rules中维护重复的loader规则，同样的问题也存在于旧版的<code>mpx-loader</code>中。</p> <p>在vue-loader@15版本发布之后，其通过克隆用户原始的rules的方式实现了module.rules的复用，用户不再需要往loader options中传递冗余的loaders规则，本次全新Mpx2.7版本也支持了该特性，我们使用了webpack提供的<code>matchResource</code>能力实现了module.rules的复用，该方案相较于clone rules的方式实现起来更加简洁优雅。</p> <p>以上就是Mpx2.7版本的核心更新内容，目前使用脚手架工具创建的项目默认都会使用2.7版本，过往项目如需迁移升级可以查看<a href="https://www.mpxjs.cn/guide/migrate/2.7.html" target="_blank" rel="noopener noreferrer">这篇指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="即将到来的新特性"><a href="#即将到来的新特性" class="header-anchor">#</a> 即将到来的新特性</h2> <p>以上就是我们本次Mpx2.7版本带来的全部特性，后续我们也有计划撰写一系列文章对其中的技术细节进行更加深入的分析与介绍，除了上面介绍到的特性外，我们还有一系列特性处于即将发布的状态：</p> <ul><li><a href="https://github.com/didi/mpx/pull/919" target="_blank" rel="noopener noreferrer">组件维度运行时渲染方案<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/didi/mpx/pull/924" target="_blank" rel="noopener noreferrer">页面局部构建能力<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>E2E自动化测试能力</li> <li>基于Vite构建输出web应用</li> <li>跨端输出快手小程序</li> <li>@mpxjs/fetch提供接口mock能力</li></ul> <h2 id="未来规划"><a href="#未来规划" class="header-anchor">#</a> 未来规划</h2> <p>未来，我们的工作重心将重新回到运行时，重点致力于<code>composition api</code>编码规范支持和数据响应系统的升级，在保障性能和包体积方面优势的同时，带给开发者用户与时俱进的开发体验。</p> <p>在跨端方面，我们与<a href="https://github.com/didi/Hummer" target="_blank" rel="noopener noreferrer">移动端跨端框架Hummer<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>进行了合作，初步探索了Mpx基于Hummer输出为移动端原生应用的可行性，目前整体流程已经基本跑通，待后续能力逐步完善和业务充分落地后，就会在开源版本中发布。</p> <p>与此同时，<code>Mpx-cube-ui</code>小程序跨端组件库也在持续地开发完善中，目前业务落地效果良好，预计会在今年下半年正式开源。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/articles/ts-derivation.html" class="prev">
+        Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导
+      </a></span> <span class="next"><a href="/articles/2.8-release.html">
+        Mpx2.8 版本正式发布，使用组合式 API 开发小程序
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/49.cde94a79.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/2.8-release-alter.html b/docs-vuepress/.vuepress/dist/articles/2.8-release-alter.html
new file mode 100644
index 0000000000..3d0f341bd0
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/2.8-release-alter.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>通过 Mpx 使用组合式 API 进行小程序开发 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/50.42e34e52.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="通过-mpx-使用组合式-api-进行小程序开发"><a href="#通过-mpx-使用组合式-api-进行小程序开发" class="header-anchor">#</a> 通过 Mpx 使用组合式 API 进行小程序开发</h1> <p>滴滴开源小程序跨端框架 <a href="https://www.mpxjs.cn/" target="_blank" rel="noopener noreferrer">Mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 自18年立项开源以来，如今已经进入第五个年头，期间 Mpx 在有效支持了公司内外小程序业务开发的同时，也因其高性能、优体验、跨平台的特性获得了开发者用户的一致好评。</p> <p>为了不辜负开发者用户对我们的信赖，更好地支持小程序业务开发，一方面我们对 Mpx 的稳定版本进行着高频的维护迭代，快速响应处理开发者用户在框架使用过程中遇到的问题；另一方面我们持续跟进探索业内最新动态，力求带给用户更好的开发体验与更强大的开发能力。继我们在 <a href="https://mpxjs.cn/guide/migrate/2.7.html" target="_blank" rel="noopener noreferrer">2.7 版本<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>中对 Mpx 的编译系统进行 Webpack5 适配 ，完整支持持久化缓存并大幅提升编译速度后，在 <a href="https://mpxjs.cn/guide/migrate/2.8.html" target="_blank" rel="noopener noreferrer">2.8 版本<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>中，我们对 Mpx 的框架运行时也进行了重构改造，完整支持 Vue3 中的组合式 API 开发范式，让用户能够使用时下最热门的开发方式进行小程序业务开发。</p> <p>我们先来简单感受一下组合式 API 的使用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ collectionName }}: {{ book.title }}({{ readersNumber }})<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addReaders<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>addReaders<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">collectionName</span><span class="token operator">:</span> String
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> readersNumber <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+      <span class="token keyword">const</span> book <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Mpx'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+      <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Component mounted.'</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+      <span class="token comment">// 暴露给 template</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        readersNumber<span class="token punctuation">,</span>
+        book<span class="token punctuation">,</span>
+        <span class="token function">addReaders</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          readersNumber<span class="token punctuation">.</span>value<span class="token operator">++</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>可以看出和 Vue3 组合式 API 的使用是高度类似的，利用框架导出的一系列响应式 API 和 生命周期钩子函数在 <code>setup</code> 中编写业务逻辑，并将模板依赖的数据与方法作为返回值返回，与传统的选项式 API 相比，组合式 API 具备以下优势：</p> <ul><li>更好的逻辑复用，通过函数包装复用逻辑，显式引入调用，方便简洁且符合直觉，规避消除了 mixins 复用中存在的缺陷；</li> <li>更灵活的代码组织，相比于选项式 API 提前规定了代码的组织方式，组合式 API 在这方面几乎没有做任何限制与规定，更加灵活自由，在功能复杂的庞大组件中，我们能够通过组合式 API 让我们的功能代码更加内聚且有条理，不过这也会对开发者自身的代码规范意识提出更高要求；</li> <li>更好的类型推导，虽然基于 <code>this</code> 的选项式 API 通过 <code>ThisType</code> 类型体操的方式也能在一定程度上实现 TS 类型推导，但推导和实现成本较高，同时仍然无法完美覆盖一些复杂场景（如嵌套 mixins 等）；而组合式 API 以本地变量和函数为基础，本身就是类型友好的，我们在类型方面几乎不需要做什么额外的工作就能享受到完美的类型推导。</li></ul> <p>同时与 React Hooks 相比，组合式 API 中的 <code>setup</code> 函数只在初始化时单次执行，在数据响应能力的加持下大大降低了理解与使用成本，基于以上原因，我们决定为 Mpx 添加组合式 API 能力，让用户能够用组合式 API 方式进行小程序开发。</p> <h2 id="组合式-api-实现"><a href="#组合式-api-实现" class="header-anchor">#</a> 组合式 API 实现</h2> <p>从上面的简单示例中可以看出，抛开响应式 API 和生命周期注册模式的变化，组合式 API 的实现要点在于动态添加模板依赖的数据和方法，这也是我们在小程序中实现组合式 API 可能遇到的核心技术卡点。</p> <p>对于动态添加模板依赖数据，我们在过去的实践中已经充分证明了其可行性，事实上，从 Mpx 最初的版本开始，我们就充分利用了这项能力来实现我们对计算属性和 <code>dataFn</code> （类似于 Vue 使用函数定义 <code>data</code>）的支持，这项能力的关键在于存在合适的生命周期用于动态添加初始化数据，这里对于初始化数据的定义是能够影响组件树的初始渲染，举个简单的例子：存在一对父子组件 parent/child，parent 使用 <code>props</code> 向 child 传递数据，当我们在 parent 初始创建时使用 <code>setData</code> 动态添加 <code>props</code> 数据，同时 child 在初始创建时能够通过 <code>props</code> 正确获取到这部分的数据时，我们就可以将这部分动态添加的数据视作初始化数据，这是我们在小程序中实现完备数据响应支持的基础。</p> <p>幸运的是，目前业内所有主流小程序平台（微信/支付宝/百度/字节/QQ）都支持了上述能力，微信从一开始就支持在 <code>attached</code> 生命周期中调用 <code>setData</code> 函数动态添加初始化数据，在上述的父子 <code>props</code> 传递场景中，也能够在子组件的 <code>attached</code> 中正确获取这部分数据，支付宝和字节小程序一开始并不支持该能力，不过支付宝在 <code>component2</code> 组件系统重构后，字节在橙心合作项目中与我们沟通后，都成功支持了该能力。</p> <p>而对于动态返回的方法，最简单能想到的方案就是直接挂载到组件实例上，经过我们的完整测试，上述业内主流小程序平台都支持使用这种方式动态添加方法，基于以上事实，我们非常确定组合式 API 能够在小程序环境中顺利实现，下图简要展示了 Mpx 支持组合式 API 的初始化流程：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/0bxxw8bB9PJxXLeiMQ__6_composition-api-init.png" alt="composition-api-init"></p> <h3 id="生命周期钩子函数"><a href="#生命周期钩子函数" class="header-anchor">#</a> 生命周期钩子函数</h3> <p>在组合式 API 中，<code>setup</code> 函数只有在组件创建时初始化单次执行，因此需要提供一系列生命周期钩子函数来代替选项式 API 中的生命周期钩子选项，由于小程序原生只支持选项式的生命周期注册方式，我们通过<code>预注册 -&gt; 驱动</code>的方式来实现 <code>setup</code> 中函数式注册生命周期钩子的语法糖，简单来讲就是使用选项式 <code>mixins</code> 的方式提前注册所有需要的生命周期钩子，在选项式生命周期钩子执行时驱动对应在 <code>setup</code> 中使用生命周期钩子函数注册的代码逻辑执行，如下图所示：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/2nmOjxvubyk6H32yP5cFc_composition-api-hook.png" alt="composition-api-hook"></p> <p>作为跨端小程序框架，Mpx 需要兼容不同小程序平台不同的生命周期，在选项式 API 中，我们在框架中内置了一套统一的生命周期，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异，如微信小程序的 <code>attached</code> 钩子和支付宝小程序的 <code>onInit</code> 钩子，在组合式 API 中，我们沿用了同样的逻辑，设计了一套与框架内置生命周期对应的生命周期钩子函数，以相同的方式进行驱动，因此这些生命周期钩子函数天然具备了跨平台特性，下表显示了在组件 / 页面中框架生命周期与原生平台生命周期的对应关系：</p> <table><thead><tr><th style="text-align:left;">框架内置生命周期</th> <th style="text-align:left;">Hooks in <code>setup</code></th> <th style="text-align:left;">微信原生</th> <th style="text-align:left;">支付宝原生</th></tr></thead> <tbody><tr><td style="text-align:left;">BEFORECREATE</td> <td style="text-align:left;"><code>null</code></td> <td style="text-align:left;">attached（数据响应初始化前）</td> <td style="text-align:left;">onInit（数据响应初始化前）</td></tr> <tr><td style="text-align:left;">CREATED</td> <td style="text-align:left;"><code>null</code></td> <td style="text-align:left;">attached（数据响应初始化后）</td> <td style="text-align:left;">onInit（数据响应初始化后）</td></tr> <tr><td style="text-align:left;">BEFOREMOUNT</td> <td style="text-align:left;">onBeforeMount</td> <td style="text-align:left;">ready（<code>MOUNTED</code> 执行前）</td> <td style="text-align:left;">didMount（<code>MOUNTED</code> 执行前）</td></tr> <tr><td style="text-align:left;">MOUNTED</td> <td style="text-align:left;">onMounted</td> <td style="text-align:left;">ready（<code>BEFOREMOUNT</code> 执行后）</td> <td style="text-align:left;">didMount（<code>BEFOREMOUNT</code> 执行后）</td></tr> <tr><td style="text-align:left;">BEFOREUPDATE</td> <td style="text-align:left;">onBeforeUpdate</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> 执行前）</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> 执行前）</td></tr> <tr><td style="text-align:left;">UPDATED</td> <td style="text-align:left;">onUpdated</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> callback）</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> callback）</td></tr> <tr><td style="text-align:left;">BEFOREUNMOUNT</td> <td style="text-align:left;">onBeforeUnmount</td> <td style="text-align:left;">detached（数据响应销毁前）</td> <td style="text-align:left;">didUnmount（数据响应销毁前）</td></tr> <tr><td style="text-align:left;">UNMOUNTED</td> <td style="text-align:left;">onUnmounted</td> <td style="text-align:left;">detached（数据响应销毁后）</td> <td style="text-align:left;">didUnmount（数据响应销毁后）</td></tr> <tr><td style="text-align:left;">ONLOAD</td> <td style="text-align:left;">onLoad</td> <td style="text-align:left;">onLoad</td> <td style="text-align:left;">onLoad</td></tr> <tr><td style="text-align:left;">ONSHOW</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">onShow</td></tr> <tr><td style="text-align:left;">ONHIDE</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">onHide</td></tr> <tr><td style="text-align:left;">ONRESIZE</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">events.onResize</td></tr></tbody></table> <blockquote><p>同 Vue3 一样，Mpx 在组合式 API 中没有提供 <code>BEFORECREATE</code> 和 <code>CREATED</code> 对应的生命周期钩子函数，用户可以直接在 <code>setup</code> 中编写相关逻辑。</p></blockquote> <h4 id="具有副作用的页面事件"><a href="#具有副作用的页面事件" class="header-anchor">#</a> 具有副作用的页面事件</h4> <p>在小程序中，一些页面事件的注册存在副作用，即该页面事件注册与否会产生实质性的影响，比如微信中的 <code>onShareAppMessage</code> 和 <code>onPageScroll</code>，前者在不注册时会禁用当前页面的分享功能，而后者在注册时会带来视图与逻辑层之间的线程通信开销，对于这部分页面事件，我们无法通过<code>预注册 -&gt; 驱动</code>方式提供组合式 API 的注册方式，用户可以通过选项式 API 的方式来注册使用，通过 <code>this</code> 访问组合式 API <code>setup</code> 函数的返回。</p> <p>然而这种使用方式显然不够优雅，我们考虑是否可以通过一些非常规的方式提供这类副作用页面事件的组合式 API 注册支持，例如，借助编译手段。我们在运行时提供了副作用页面事件的注册函数，并在编译时通过 <code>babel</code> 插件的方式解析识别到当前页面中存在这些特殊注册函数的调用时，通过框架已有的<code>编译 -&gt; 运行时注入</code>的方式将事件驱动逻辑添加到当前页面当中，以提供相对优雅的副作用页面事件在组合式 API 中的注册方式，同时不产生非预期的副作用影响，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onShareAppMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+
+    <span class="token function">onShareAppMessage</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'页面分享'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      count
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>目前我们通过这种方式支持的页面事件如下：</p> <table><thead><tr><th style="text-align:left;">页面事件</th> <th style="text-align:left;">Hooks in <code>setup</code></th> <th style="text-align:left;">平台支持</th></tr></thead> <tbody><tr><td style="text-align:left;">onPullDownRefresh</td> <td style="text-align:left;">onPullDownRefresh</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onReachBottom</td> <td style="text-align:left;">onReachBottom</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onPageScroll</td> <td style="text-align:left;">onPageScroll</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onShareAppMessage</td> <td style="text-align:left;">onShareAppMessage</td> <td style="text-align:left;">全小程序平台</td></tr> <tr><td style="text-align:left;">onTabItemTap</td> <td style="text-align:left;">onTabItemTap</td> <td style="text-align:left;">微信/支付宝/百度/QQ</td></tr> <tr><td style="text-align:left;">onAddToFavorites</td> <td style="text-align:left;">onAddToFavorites</td> <td style="text-align:left;">微信 / QQ</td></tr> <tr><td style="text-align:left;">onShareTimeline</td> <td style="text-align:left;">onShareTimeline</td> <td style="text-align:left;">微信</td></tr> <tr><td style="text-align:left;">onSaveExitState</td> <td style="text-align:left;">onSaveExitState</td> <td style="text-align:left;">微信</td></tr></tbody></table> <blockquote><p><strong>特别注意</strong>，由于静态编译分析实现方式的限制，这类页面事件的组合式 API 使用需要满足页面事件注册函数（如<code>onShareAppMessage</code>）的调用和 <code>createPage</code> 的调用位于同一个 js 文件当中。</p></blockquote> <p>关于生命周期钩子函数的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="script-setup"><a href="#script-setup" class="header-anchor">#</a> <code>&lt;script setup&gt;</code></h3> <p>同 Vue3 一样，我们在 <code>.mpx</code> 单文件组件 / 页面中实现了 <code>&lt;script setup&gt;</code> 的组合式 API 编译语法糖，相较于常规的写法，<code>&lt;script setup&gt;</code> 具备以下优势：</p> <ul><li>更少的样板内容，更简洁的代码</li> <li>能够使用纯 TypeScript 声明 props 类型</li> <li>更好的 IDE 类型推导性能</li></ul> <p>简单使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
+
+  <span class="token keyword">function</span> <span class="token function">log</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>msg: {{msg}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">ontap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>log<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>可以看到使用方式与 Vue3 基本一致，不过由于 Mpx 的组合式 API 设计实现与 Vue3 存在差异，对应 <code>&lt;script setup&gt;</code> 也与 Vue3 中存在一些差异：</p> <ul><li>不支持 <code>import</code> 快捷注册组件</li> <li>没有 <code>defineEmits()</code> 编译宏</li> <li>没有 <code>useSlots()</code> 和 <code>useAttrs()</code> 运行时函数</li> <li>以编译宏的形式提供了 <code>useContext()</code>，获取 <code>setup</code> 函数的第二个参数 <code>context</code></li> <li><code>defineExpose()</code> 编译宏的作用与 Vue3 中有所差别，能够限定模板中能访问的变量范围</li></ul> <blockquote><p><strong>特别注意</strong>，受小程序底层技术限制，我们在 Mpx 的实现中无法像 Vue3 那样将模板编译的渲染函数和 <code>&lt;script setup&gt;</code> 放置到同一作用域下进行变量访问，而是通过静态编译分析提取出 <code>&lt;script setup&gt;</code> 的顶层作用域变量，再以上文中提到的动态添加数据与方法的方式将其设置到模板当中，如果 <code>&lt;script setup&gt;</code> 中声明了较多顶层作用域变量，它们并不一定都会被模板访问，就会带来无效的性能开销，因此我们强烈建议使用 <code>defineExpose()</code> 限定模板中能访问的变量范围，你可以把它等同于 <code>setup</code> 函数中的 <code>return</code>。</p></blockquote> <p>关于 <code>&lt;script setup&gt;</code> 的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="组合式-api-与-vue3-中的差异"><a href="#组合式-api-与-vue3-中的差异" class="header-anchor">#</a> 组合式 API 与 Vue3 中的差异</h3> <p>我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：</p> <ul><li><code>setup</code> 的 <code>context</code> 参数不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#context" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><code>setup</code> 不支持返回<strong>渲染函数</strong></li> <li><code>setup</code> 不能是异步函数</li> <li><code>&lt;script setup&gt;</code> 提供的宏方法不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><code>&lt;script setup&gt;</code> 不支持 <code>import</code> 快捷注册组件</li> <li>支持的生命周期钩子不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>模板引用的方式不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#template-ref" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>关于组合式 API 的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/composition-api.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="响应式-api-实现"><a href="#响应式-api-实现" class="header-anchor">#</a> 响应式 API 实现</h2> <p>组合式 API 的正常工作离不开响应式 API 的支持，下面我们来聊聊 Mpx 中响应式 API 的设计实现。我们知道 Vue3 中响应式 API 基于 <code>proxy</code> 进行了重构实现，但是目前 <code>proxy</code> 的浏览器兼容占比仍然无法达到我们对于线上可用性的要求，因此在 Mpx 中，我们仍然基于 <code>Object.defineProperty</code> 进行核心数据响应能力的实现，同时借鉴了 Vue3 中优秀的代码设计与实现，如 <code>reactiveEffect</code> 和 <code>effectScope</code> 等，尽可能实现与 Vue3 中响应式 API 能力对齐。</p> <p>说到这里，很多同学可能会想到 <code>@vue/composition-api</code> 这个库，该库提供的关键能力正是基于 Vue2 的数据响应系统模拟实现 Vue3 中的响应式 API，我们在前期也对 <code>@vue/composition-api</code> 在 Mpx 中的复用进行了非常有价值的探索尝试。不过最终我们还是决定在 Mpx 的运行时框架中进行独立实现，原因主要在于：<code>@vue/composition-api</code> 是作为一个 Vue2 插件存在，无法直接侵入 Vue2 源码，导致部分能力无法实现或会带来额外的性能开销，例如 <code>flush: 'post'</code> 和 <code>ref</code> 自动解包等。我们也看到在最新的 Vue2.7 版本中，也是在运行时框架里重新实现了这部分内容，以规避上述问题。</p> <p>下图展示了 Mpx 中响应式 API 核心模块依赖关系：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/4ySdEqTRhc_DRWWCJWrhJ_composition-api-reactive.png" alt="composition-api-reactive"></p> <h3 id="数据响应限制带来的差异"><a href="#数据响应限制带来的差异" class="header-anchor">#</a> 数据响应限制带来的差异</h3> <p>由于 <code>Object.defineProperty</code> 的能力限制，Mpx 存在和 Vue2 一致的数据响应限制，无法感知到对象 property 的添加和删除以及数组的索引赋值，与 Vue2 一致，我们暴露了 <code>set</code> 和 <code>del</code> API 来让用户显式地进行相关操作。除此之外，由于使用方式发生了变化，我们在使用 <code>reactive</code> API 创建响应式数据时，还会遇到新的限制，我们来看一下代码示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+
+<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [0,1,2,3]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发 watchEffect</span>
+
+state<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发 watchEffect</span>
+</code></pre></div><p>可以看出，即使我们使用了 <code>set</code> API 和数组原型方法对数组进行修改，我们仍然无法监听到数据变化。</p> <blockquote><p>相同的限制在使用 <code>Object.defineProperty</code> 的 Vue2.7 中也同样存在。</p></blockquote> <p>为什么会存在这个限制呢？原因在于：基于 <code>Object.defineProperty</code> 实现的数据响应系统中，我们会对对象的每个已有属性创建了一个 <code>Dep</code> 对象，在对该属性进行 <code>get</code> 访问时通过这个对象将其与依赖它的观察者 <code>ReactiveEffect</code> 关联起来，并在 <code>set</code> 操作时触发关联 <code>ReactiveEffect</code> 的更新，这是我们大家都知道的数据响应的基本原理。但是对于新增/删除对象属性和修改数组的场景，我们无法事先定义当前不存在属性的 <code>get/set</code> (当然这在 <code>proxy</code> 当中是可行的)，因此我们会把对象或者数组本身作为一个数据依赖创建 <code>Dep</code> 对象，<strong>通过父级访问</strong>该数据时定义的 <code>get/set</code> 将其关联到对应的 <code>ReactiveEffect</code>，并在对数据进行新增/删除属性或数组操作时通过数据本身持有的 <code>Dep</code> 对象触发关联 <code>ReactiveEffect</code> 的更新，如下图所示：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/XkI9cQBsLy_7np-T3rt56_composition-api-reactive2.png" alt="数据响应原理"></p> <p>需要注意的是，<strong>通过父级访问</strong>是建立 <code>Dep</code> 与 <code>ReactiveEffect</code> 关联关系的先决条件，在选项式 API 中，我们访问组件的响应式数据都需要通过 <code>this</code> 进行访问，相当于这些数据都存在 <code>this</code> 这个必要的<strong>父级</strong>，因此我们在使用 <code>$set/$delete</code> 进行对对象进行新增/删除属性或对数组进行修改时都能得到符合预期的结果，唯一的限制在于不能新增/删除根级数据属性，原因就在于 <code>this</code> 不存在访问它的父级。</p> <p>但是在组合式 API 中，我们不需要通过 <code>this</code> 访问响应式数据，因此通过 <code>reactive()</code> 创建的响应式数据本身就是根级数据，我们自然无法通过上述方式感知到根级数据自身的变化（在 Vue3 中，基于 <code>proxy</code> 提供的强大能力响应式系统能够精确地感知到数据属性，甚至是当前不存在属性的访问与修改，不需要为数据自身建立 <code>Dep</code> 对象，自然也不存在相关问题）。</p> <p>在这种情况下，我们就需要用 <code>ref()</code> 创建响应式数据，因为 <code>ref</code> 创建了一个包装对象，我们永远需要通过 <code>.value</code> 来访问其持有的数据（不管是显式访问还是隐式自动解包），这样就能保证 <code>ref</code> 数据自身的变化能够被响应式系统感知，因此也不会遇到上面描述的问题，如下所示：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+
+<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [0,1,2,3]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// [0,3,2,3]</span>
+
+state<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// [0,3,2,3,4]</span>
+</code></pre></div><h3 id="响应式-api-与-vue3-中的区别"><a href="#响应式-api-与-vue3-中的区别" class="header-anchor">#</a> 响应式 API 与 Vue3 中的区别</h3> <p>我们来总结一下 Mpx 中响应式 API 与 Vue3 中的区别：</p> <ul><li>不支持 <code>raw</code> 相关 API（<code>markRaw</code> 除外，我们提供了该 API 用于跳过部分数据的响应式转换）</li> <li>不支持 <code>readonly</code> 相关 API</li> <li>不支持 <code>watchEffect</code>、<code>watch</code>、<code>computed</code> 的调试选项</li> <li>不支持对 <code>map</code>、<code>set</code> 等集合类型进行响应式转换</li> <li>受到 <code>Object.defineProperty</code> 实现带来的数据响应限制影响</li></ul> <p>关于响应式 API 的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/reactive-api.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="生态周边适配"><a href="#生态周边适配" class="header-anchor">#</a> 生态周边适配</h2> <p>除了 Mpx 运行时核心提供了组合式 API 支持外，我们对 Mpx 的周边生态能力也都进行了组合式 API 适配支持，包括 <code>store</code>、<code>i18n</code>、<code>fetch</code> 等。</p> <h3 id="pinia-store-支持"><a href="#pinia-store-支持" class="header-anchor">#</a> Pinia store 支持</h3> <p>Pinia 是基于组合式 API 设计的全新数据管理方案，目前已经取代 Vuex 成为 Vue3 官方推荐的 store，我们在研究了 pinia 的设计实现后，对其简练优雅的设计思想及其与组合式 API 的高度适配非常满意（特别是在使用 <code>setup</code> 函数创建 store 时，使用心智与编写组件完全一致，可以将其视作是没有视图的组件）。因此我们 fork 了 pinia 的源码仓库，基于 Mpx 提供的数据响应能力对其进行了适配改造，使其在 Mpx 环境下也能正常运行，目前相关代码维护在 <code>@mpxjs/pinia</code> 中，在组合式 API 中的简单使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> computed<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
+
+<span class="token comment">// 使用组合式 API 创建 pinia store 的使用心智与 setup 函数完全一致，强烈推荐</span>
+<span class="token keyword">const</span> useSetupStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'setup'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> doubleCount <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
+
+  <span class="token keyword">function</span> <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    count<span class="token punctuation">.</span>value<span class="token operator">++</span>
+  <span class="token punctuation">}</span>
+
+  <span class="token keyword">return</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> doubleCount<span class="token punctuation">,</span> increment <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useSetupStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token comment">// store 同 props 类似是一个 reactive 对象，解构数据需使用 toRefs 以保持数据响应性</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> doubleCount <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>store<span class="token punctuation">)</span>
+    <span class="token comment">// 方法可以直接解构</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> increment <span class="token punctuation">}</span> <span class="token operator">=</span> store
+  
+    <span class="token keyword">return</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> doubleCount<span class="token punctuation">,</span> increment <span class="token punctuation">}</span>
+    <span class="token comment">//</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>Mpx 中通过 <code>createStore</code> 创建的类 Vuex store 在组合式 API 中仍然可以使用，我们可以在 <code>setup</code> 函数中引用 store 实例进行<a href="https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api" target="_blank" rel="noopener noreferrer">数据读取与方法调用<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，不过整体使用体验与 pinia store 存在较大差距，我们还是推荐在组合式 API 开发中优先使用 pinia store 作为数据管理方案。</p> <h3 id="i18n-支持"><a href="#i18n-支持" class="header-anchor">#</a> I18n 支持</h3> <p>传统选项式 API 中，我们使用 <code>this.$t</code> 方法在组件内调用翻译函数，但在组合式 API 中我们无法访问 <code>this</code>，为此我们参考了 Vue I18n 最新的 9.x 版本，该版本针对 Vue3 及组合式 API 进行了重构适配，提供了全新的 <code>useI18n</code> API，简单使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('message.hello')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeLocale<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>change locale<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// useI18n 不传参数时指向全局 i18n 对象，也可以传递 locale 和 messages 配置创建局部 i18n 对象</span>
+      <span class="token keyword">const</span> <span class="token punctuation">{</span> t<span class="token punctuation">,</span> locale <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+
+      <span class="token keyword">function</span> <span class="token function">changeLocale</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        locale<span class="token punctuation">.</span>value <span class="token operator">=</span> locale<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">'zh-CN'</span> <span class="token operator">?</span> <span class="token string">'en-US'</span> <span class="token operator">:</span> <span class="token string">'zh-CN'</span>
+      <span class="token punctuation">}</span>
+      <span class="token comment">// 返回的翻译方法名必须为 t，不能进行重命名</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span> t<span class="token punctuation">,</span> changeLocale <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><blockquote><p>上面示例代码看上去像是我们在模板上直接调用 setup() 返回的 t 翻译方法，但是熟悉小程序开发的同学都知道在小程序架构下这是不可能的，示例中的写法其实由框架通过编译 + 运行时手段实现的语法糖，我们会在模板编译时定向扫描 t/te/tm 等 i18n 方法，将其转换为计算属性注入到运行时当中，这就意味着如果我们对翻译方法进行重命名，模板编译时无法识别出 i18n 方法调用，自然也就无法正常运行。</p></blockquote> <p>Mpx 中 i18n 提供了两种实现模式，分别是 wxs 和 computed，可以使用编译选项中的 <code>i18n.isComputed</code> 进行切换，两种方式各有优劣，其中：</p> <ul><li>wxs 模式的优势在于逻辑层和视图层独立维护语言集，无额外运行时性能开销，且使用没有任何限制；劣势同样源于语言集同时存在于逻辑层（js）和视图层（wxs）当中，这部分的包体积占用翻倍；</li> <li>computed 模式的优势在于语言集只存在于逻辑层中，无额外包体积占用，且可以通过动态添加语言集的方式进一步减少包体积占用；劣势则是会产生额外的运行时性能开销，且使用上存在限制，模板调用时无法直接访问 <code>wx:for</code> 中的 <code>item</code> 和 <code>index</code>。</li></ul> <p>在组合式 API 中模板上使用 <code>useI18n()</code> 返回的翻译函数 <code>t/te/tm</code> 时，为了完整实现 <code>useI18n</code> API的功能，会强制使用 computed 模式进行实现，这也意味着该用法会受到 computed 模式使用限制的影响。不过当你不需要使用 <code>useI18n</code> 接受 <code>messages</code> 参数创建局部语言集作用域功能时，你也完全可以在模板中继续使用原有的 <code>$t/$tc/$te/$tm</code> 方法，这些方法受编译选项 <code>i18n.isComputed</code> 的影响，同时指向全局语言集作用域。</p> <p>更多关于生态周边的组合式 API 使用指南可以点击下方链接查看详情：</p> <ul><li><a href="https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api" target="_blank" rel="noopener noreferrer">store<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://mpxjs.cn/guide/advance/i18n.html#composition-api-usage" target="_blank" rel="noopener noreferrer">i18n<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://mpxjs.cn/guide/extend/fetch.html#composition-api-usage" target="_blank" rel="noopener noreferrer">fetch<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="输出-web-适配"><a href="#输出-web-适配" class="header-anchor">#</a> 输出 web 适配</h2> <p>跨端输出 web 作为 Mpx 的一大核心特性，在业务中存在广泛使用，同时也是我们设计实现任何框架新特性需要优先考虑的事项。在本次组合式 API 支持中，我们从设计之初就考虑了跨端输出 web 的适配支持，保障使用 Mpx 组合式 API 开发的业务代码都能在 web 环境中正常运行。</p> <p>我们输出 web 的整体技术方向在于尽可能复用 Vue 已有的生态能力，为了实现这个目标，我们需要提供尽可能与 Vue 保持一致的 API 设计，以降低抹平适配成本。在输出 web 时，核心组合式 API 基于 Vue2.7 版本中的已有能力进行适配提供，简单举个例子：对于 <code>import { ref } from 'mpxjs/core'</code> 这行语句，在小程序中会指向 Mpx 内部维护的 <code>ref</code> 实现，而在输出 web 时会指向 Vue 中维护的 <code>ref</code> 实现，两者的实现虽然不仅相同，但只要保障对外函数签名一致，对于开发者用户来说就无感知。</p> <p>我们借助了 Mpx 强大的条件编译能力进行上述实现，对运行时导出根据输出平台进行重定向，这样还能保障跨端输出产物干净简洁，仅包含当前输出环境下必要的逻辑，如下图所示：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/E0FojaPKOxZOa5h5OEPQk_composition-api-web.png" alt="composition-api-web"></p> <p>同理，我们也采用了类似的方式实现了组合式 API 周边能力对于输出 web 的适配支持，如pinia store 使用 pinia 原始版本进行适配实现，而 i18n 能力则是使用 vue-i18n@8.x + vue-i18n-bridge 进行适配实现。</p> <h2 id="性能表现"><a href="#性能表现" class="header-anchor">#</a> 性能表现</h2> <p>性能是 Mpx 一直以来的核心关注点，我们对组合式 API 的最终实现版本进行了一系列性能评估测试，我们使用组合式 API 版本对业务中的评价组件进行了重构，评价组件属于我们业务中交互及功能相对比较复杂的组件，源码行数约 1000 行，组件数据 27 项，组件方法 18 个，我们在测试项目中对选项式 API 和组合式 API 两个版本实现的组件进行了一系列测试。</p> <h3 id="组件初始化耗时"><a href="#组件初始化耗时" class="header-anchor">#</a> 组件初始化耗时</h3> <p>由于组合式 API 改变了原有的组件初始化流程，我们对组件的初始化耗时进行了重点测试，测试口径如下：</p> <ul><li>耗时计算以挂载组件为起点，以组件 <code>ready</code> 执行为终点</li> <li>测试结果为10次手工测试排除最大最小值后求均值</li> <li>IOS 测试机型为 iPhone 13 pro max，安卓测试机型为 OPPO R9</li></ul> <p>结果显示两个版本的组件初始化耗时大抵持平，不分优劣。</p> <table><thead><tr><th></th> <th>IOS</th> <th>安卓</th></tr></thead> <tbody><tr><td>选项式 API</td> <td>42.5ms</td> <td>366.6ms</td></tr> <tr><td>组合式 API</td> <td>42.4ms</td> <td>370.1ms</td></tr></tbody></table> <h3 id="组件-js-体积"><a href="#组件-js-体积" class="header-anchor">#</a> 组件 JS 体积</h3> <p>在构建产物体积方面，由于组合式 API 的写法对于 JS 代码压缩更加有利，同样的逻辑实现下，组合式 API 版本的组件构建压缩后 JS 体积略胜一筹。</p> <table><thead><tr><th></th> <th>组件 JS 体积</th></tr></thead> <tbody><tr><td>选项式 API</td> <td>15.67KB</td></tr> <tr><td>组合式 API</td> <td>13.60KB</td></tr></tbody></table> <h3 id="框架运行时体积"><a href="#框架运行时体积" class="header-anchor">#</a> 框架运行时体积</h3> <p>在 Mpx2.8 版本中，我们在框架运行时中新增了组合式 API 相关实现，不过通过优化运行时导出，使其对 tree shaking 更加友好，我们的框架运行时体积在实际构建产物中没有产生太大增长。</p> <table><thead><tr><th></th> <th>框架运行时体积</th></tr></thead> <tbody><tr><td>选项式 API</td> <td>51.66KB</td></tr> <tr><td>组合式 API</td> <td>57.47KB</td></tr></tbody></table> <p>综上所述，组合式 API 版本的运行时性能与选项式 API 大抵持平，在包体积占用方面，新版框架运行时体积占用略有提升，不过由于组合式 API 开发模式对代码压缩更友好，加上组合式 API 更易进行逻辑复用的特点，我们预计在实际业务项目中，组合式 API 的包体积占用会更小。</p> <h2 id="破坏性改变"><a href="#破坏性改变" class="header-anchor">#</a> 破坏性改变</h2> <p>Mpx 组合式 API 版本完全兼容原有的选项式 API 开发方式，不过我们在运行时重构过程中依然带来了少量的破坏性改变，详情如下：</p> <ul><li>框架过往提供的组件增强生命周期 <code>pageShow/pageHide</code> 与微信原生提供的 <code>pageLifetimes.show/hide</code> 完全对齐，不再提供组件初始挂载时必定执行 <code>pageShow</code> 的保障（因为组件可能在后台页面进行挂载），相关初始化逻辑一定不要放置在 <code>pageShow</code> 当中；</li> <li>取消了框架过去提供的基于内部生命周期实现的非标准增强生命周期，如 <code>beforeCreate/onBeforeCreate</code> 等，直接将内部生命周期变量导出提供给用户使用，详情查看<a href="https://mpxjs.cn/api/global-api.html#built-in-lifecycle-variable" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>;</li> <li>为了优化 tree shaking，作为框架运行时 <code>default export</code> 的 <code>Mpx</code> 对象不再挂载 <code>createComponent/createStore</code> 等运行时方法，一律通过 <code>named export</code> 提供，<code>Mpx</code> 对象上仅保留 <code>set/use</code> 等全局 API，详情查看<a href="https://mpxjs.cn/api/global-api.html#global-mpx" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>；</li> <li>使用 I18n 能力时，为了与新版 vue-i18n 保持对齐，<code>this.$i18n</code> 对象指向全局作用域，如需创建局部作用域需要使用组合式 API <code>useI18n</code> 的方式进行创建。</li> <li><code>watch</code> API 不再接受第二个参数为带有 <code>handler</code> 属性的对象形式（该参数形式只应存在于 <code>watch</code> option 中），第二个参数必须为回调函数，与 <a href="https://vuejs.org/api/reactivity-core.html#watch" target="_blank" rel="noopener noreferrer">Vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 对齐。</li></ul> <p>更详细的迁移指南请点击查看<a href="https://mpxjs.cn/guide/migrate/2.8.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="未来规划"><a href="#未来规划" class="header-anchor">#</a> 未来规划</h2> <p>目前 Mpx2.8 版本已经在以滴滴出行小程序和花小猪小程序为代表的集团小程序业务中稳定全面落地，并在新的业务迭代中大范围使用了组合式 API，使用反馈良好，在社区内也产出了多个成功案例。</p> <p>在完成持久化构建缓存和组合式 API 两个重大技术升级后，我们未来的技术规划如下：</p> <ul><li>组合式 API 工具库 @mpxjs/use</li> <li>内置原子类支持</li> <li>输出 web 支持 SSR</li> <li>输出 web 支持使用 Vite 构建</li> <li>跨端输出 Hummer 合入主干正式 release</li> <li>优化运行时 render 函数，降低包体积占用</li> <li>跨端库 @mpxjs/cube-ui 开源</li></ul> <p>最后，再次感谢所有参与 Mpx 组合式 API 技术建设的同学们，也欢迎社区同学一同加入 Mpx 项目开源共建。</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/50.42e34e52.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/2.8-release.html b/docs-vuepress/.vuepress/dist/articles/2.8-release.html
new file mode 100644
index 0000000000..6bc81b2c74
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/2.8-release.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx2.8 版本正式发布，使用组合式 API 开发小程序 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/51.90dfa84e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" aria-current="page" class="active sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#组合式-api-实现" class="sidebar-link">组合式 API 实现</a></li><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#响应式-api-实现" class="sidebar-link">响应式 API 实现</a></li><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#生态周边适配" class="sidebar-link">生态周边适配</a></li><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#输出-web-适配" class="sidebar-link">输出 web 适配</a></li><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#性能表现" class="sidebar-link">性能表现</a></li><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#破坏性改变" class="sidebar-link">破坏性改变</a></li><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#未来规划" class="sidebar-link">未来规划</a></li></ul></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx2-8-版本正式发布-使用组合式-api-开发小程序"><a href="#mpx2-8-版本正式发布-使用组合式-api-开发小程序" class="header-anchor">#</a> Mpx2.8 版本正式发布，使用组合式 API 开发小程序</h1> <blockquote><p>作者：<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">hiyuki<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p>小程序跨端开发框架 <a href="https://www.mpxjs.cn/" target="_blank" rel="noopener noreferrer">Mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 自18年立项开源以来，如今已经走过了第四个年头，其高性能、优体验、跨平台的特性收获了公司内外开发者用户的一致好评。</p> <p>为了不辜负开发者用户对我们的信赖，更好地支持集团小程序业务开发，一方面我们对 Mpx 的稳定版本进行着高频的维护迭代，快速响应处理集团内外开发者用户在框架开发使用过程中遇到的问题；另一方面我们持续跟进探索业内最新动态，力争将更新更好的开发能力与体验带给小程序开发者用户。继年初我们在 <a href="https://mpxjs.cn/guide/migrate/2.7.html" target="_blank" rel="noopener noreferrer">2.7 版本<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>中对 Mpx 的编译系统进行重构适配 Webpack5，基于持久化缓存大幅提升编译速度后，在最新的 <a href="https://mpxjs.cn/guide/migrate/2.8.html" target="_blank" rel="noopener noreferrer">2.8 版本<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>中，我们对 Mpx 的运行时框架也进行了大量重构改造工作，完整支持了 Vue3 提出的组合式 API 开发范式，让用户能够使用当下最热门的开发方式进行小程序开发，我们先来简单感受一下组合式 API 的使用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ collectionName }}: {{ book.title }}({{ readersNumber }})<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addReaders<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>addReaders<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">collectionName</span><span class="token operator">:</span> String
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> readersNumber <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+      <span class="token keyword">const</span> book <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Mpx'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+      <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Component mounted.'</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+      <span class="token comment">// 暴露给 template</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        readersNumber<span class="token punctuation">,</span>
+        book<span class="token punctuation">,</span>
+        <span class="token function">addReaders</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          readersNumber<span class="token punctuation">.</span>value<span class="token operator">++</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>可以看出和 Vue3 组合式 API 的使用是高度类似的，利用框架导出的一系列响应式 API 和 生命周期钩子函数在 <code>setup</code> 中编写业务逻辑，并将模板依赖的数据与方法作为返回值返回，与传统的选项式 API 相比，组合式 API 具备以下优势：</p> <ul><li>更好的逻辑复用，通过函数包装复用逻辑，显式引入调用，方便简洁且符合直觉，规避消除了 mixins 复用中存在的缺陷；</li> <li>更灵活的代码组织，相比于选项式 API 提前规定了代码的组织方式，组合式 API 在这方面几乎没有做任何限制与规定，更加灵活自由，在功能复杂的庞大组件中，我们能够通过组合式 API 让我们的功能代码更加内聚且有条理，不过这也会对开发者自身的代码规范意识提出更高要求；</li> <li>更好的类型推导，虽然基于 <code>this</code> 的选项式 API 通过 <code>ThisType</code> 类型体操的方式也能在一定程度上实现 TS 类型推导，但推导和实现成本较高，同时仍然无法完美覆盖一些复杂场景（如嵌套 mixins 等）；而组合式 API 以本地变量和函数为基础，本身就是类型友好的，我们在类型方面几乎不需要做什么额外的工作就能享受到完美的类型推导。</li></ul> <p>同时与 React Hooks 相比，组合式 API 中的 <code>setup</code> 函数只在初始化时单次执行，在数据响应能力的加持下大大降低了理解与使用成本，基于以上原因，我们决定为 Mpx 添加组合式 API 能力，让用户能够用组合式 API 方式进行小程序开发。</p> <h2 id="组合式-api-实现"><a href="#组合式-api-实现" class="header-anchor">#</a> 组合式 API 实现</h2> <p>从上面的简单示例中可以看出，抛开响应式 API 和生命周期注册模式的变化，组合式 API 的实现要点在于动态添加模板依赖的数据和方法，这也是我们在小程序中实现组合式 API 可能遇到的核心技术卡点。</p> <p>对于动态添加模板依赖数据，我们在过去的实践中已经充分证明了其可行性，事实上，从 Mpx 最初的版本开始，我们就充分利用了这项能力来实现我们对计算属性和 <code>dataFn</code> （类似于 Vue 使用函数定义 <code>data</code>）的支持，这项能力的关键在于存在合适的生命周期用于动态添加初始化数据，这里对于初始化数据的定义是能够影响组件树的初始渲染，举个简单的例子：存在一对父子组件 parent/child，parent 使用 <code>props</code> 向 child 传递数据，当我们在 parent 初始创建时使用 <code>setData</code> 动态添加 <code>props</code> 数据，同时 child 在初始创建时能够通过 <code>props</code> 正确获取到这部分的数据时，我们就可以将这部分动态添加的数据视作初始化数据，这是我们在小程序中实现完备数据响应支持的基础。</p> <p>幸运的是，目前业内所有主流小程序平台（微信/支付宝/百度/字节/QQ）都支持了上述能力，微信从一开始就支持在 <code>attached</code> 生命周期中调用 <code>setData</code> 函数动态添加初始化数据，在上述的父子 <code>props</code> 传递场景中，也能够在子组件的 <code>attached</code> 中正确获取这部分数据，支付宝和字节小程序一开始并不支持该能力，不过支付宝在 <code>component2</code> 组件系统重构后，字节在橙心合作项目中与我们沟通后，都成功支持了该能力。</p> <p>而对于动态返回的方法，最简单能想到的方案就是直接挂载到组件实例上，经过我们的完整测试，上述业内主流小程序平台都支持使用这种方式动态添加方法，基于以上事实，我们非常确定组合式 API 能够在小程序环境中顺利实现，下图简要展示了 Mpx 支持组合式 API 的初始化流程：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/0bxxw8bB9PJxXLeiMQ__6_composition-api-init.png" alt="composition-api-init"></p> <h3 id="生命周期钩子函数"><a href="#生命周期钩子函数" class="header-anchor">#</a> 生命周期钩子函数</h3> <p>在组合式 API 中，<code>setup</code> 函数只有在组件创建时初始化单次执行，因此需要提供一系列生命周期钩子函数来代替选项式 API 中的生命周期钩子选项，由于小程序原生只支持选项式的生命周期注册方式，我们通过<code>预注册 -&gt; 驱动</code>的方式来实现 <code>setup</code> 中函数式注册生命周期钩子的语法糖，简单来讲就是使用选项式 <code>mixins</code> 的方式提前注册所有需要的生命周期钩子，在选项式生命周期钩子执行时驱动对应在 <code>setup</code> 中使用生命周期钩子函数注册的代码逻辑执行，如下图所示：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/2nmOjxvubyk6H32yP5cFc_composition-api-hook.png" alt="composition-api-hook"></p> <p>作为跨端小程序框架，Mpx 需要兼容不同小程序平台不同的生命周期，在选项式 API 中，我们在框架中内置了一套统一的生命周期，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异，如微信小程序的 <code>attached</code> 钩子和支付宝小程序的 <code>onInit</code> 钩子，在组合式 API 中，我们沿用了同样的逻辑，设计了一套与框架内置生命周期对应的生命周期钩子函数，以相同的方式进行驱动，因此这些生命周期钩子函数天然具备了跨平台特性，下表显示了在组件 / 页面中框架生命周期与原生平台生命周期的对应关系：</p> <table><thead><tr><th style="text-align:left;">框架内置生命周期</th> <th style="text-align:left;">Hooks in <code>setup</code></th> <th style="text-align:left;">微信原生</th> <th style="text-align:left;">支付宝原生</th></tr></thead> <tbody><tr><td style="text-align:left;">BEFORECREATE</td> <td style="text-align:left;"><code>null</code></td> <td style="text-align:left;">attached（数据响应初始化前）</td> <td style="text-align:left;">onInit（数据响应初始化前）</td></tr> <tr><td style="text-align:left;">CREATED</td> <td style="text-align:left;"><code>null</code></td> <td style="text-align:left;">attached（数据响应初始化后）</td> <td style="text-align:left;">onInit（数据响应初始化后）</td></tr> <tr><td style="text-align:left;">BEFOREMOUNT</td> <td style="text-align:left;">onBeforeMount</td> <td style="text-align:left;">ready（<code>MOUNTED</code> 执行前）</td> <td style="text-align:left;">didMount（<code>MOUNTED</code> 执行前）</td></tr> <tr><td style="text-align:left;">MOUNTED</td> <td style="text-align:left;">onMounted</td> <td style="text-align:left;">ready（<code>BEFOREMOUNT</code> 执行后）</td> <td style="text-align:left;">didMount（<code>BEFOREMOUNT</code> 执行后）</td></tr> <tr><td style="text-align:left;">BEFOREUPDATE</td> <td style="text-align:left;">onBeforeUpdate</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> 执行前）</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> 执行前）</td></tr> <tr><td style="text-align:left;">UPDATED</td> <td style="text-align:left;">onUpdated</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> callback）</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> callback）</td></tr> <tr><td style="text-align:left;">BEFOREUNMOUNT</td> <td style="text-align:left;">onBeforeUnmount</td> <td style="text-align:left;">detached（数据响应销毁前）</td> <td style="text-align:left;">didUnmount（数据响应销毁前）</td></tr> <tr><td style="text-align:left;">UNMOUNTED</td> <td style="text-align:left;">onUnmounted</td> <td style="text-align:left;">detached（数据响应销毁后）</td> <td style="text-align:left;">didUnmount（数据响应销毁后）</td></tr> <tr><td style="text-align:left;">ONLOAD</td> <td style="text-align:left;">onLoad</td> <td style="text-align:left;">onLoad</td> <td style="text-align:left;">onLoad</td></tr> <tr><td style="text-align:left;">ONSHOW</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">onShow</td></tr> <tr><td style="text-align:left;">ONHIDE</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">onHide</td></tr> <tr><td style="text-align:left;">ONRESIZE</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">events.onResize</td></tr></tbody></table> <blockquote><p>同 Vue3 一样，Mpx 在组合式 API 中没有提供 <code>BEFORECREATE</code> 和 <code>CREATED</code> 对应的生命周期钩子函数，用户可以直接在 <code>setup</code> 中编写相关逻辑。</p></blockquote> <h4 id="具有副作用的页面事件"><a href="#具有副作用的页面事件" class="header-anchor">#</a> 具有副作用的页面事件</h4> <p>在小程序中，一些页面事件的注册存在副作用，即该页面事件注册与否会产生实质性的影响，比如微信中的 <code>onShareAppMessage</code> 和 <code>onPageScroll</code>，前者在不注册时会禁用当前页面的分享功能，而后者在注册时会带来视图与逻辑层之间的线程通信开销，对于这部分页面事件，我们无法通过<code>预注册 -&gt; 驱动</code>方式提供组合式 API 的注册方式，用户可以通过选项式 API 的方式来注册使用，通过 <code>this</code> 访问组合式 API <code>setup</code> 函数的返回。</p> <p>然而这种使用方式显然不够优雅，我们考虑是否可以通过一些非常规的方式提供这类副作用页面事件的组合式 API 注册支持，例如，借助编译手段。我们在运行时提供了副作用页面事件的注册函数，并在编译时通过 <code>babel</code> 插件的方式解析识别到当前页面中存在这些特殊注册函数的调用时，通过框架已有的<code>编译 -&gt; 运行时注入</code>的方式将事件驱动逻辑添加到当前页面当中，以提供相对优雅的副作用页面事件在组合式 API 中的注册方式，同时不产生非预期的副作用影响，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onShareAppMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+
+    <span class="token function">onShareAppMessage</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'页面分享'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      count
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>目前我们通过这种方式支持的页面事件如下：</p> <table><thead><tr><th style="text-align:left;">页面事件</th> <th style="text-align:left;">Hooks in <code>setup</code></th> <th style="text-align:left;">平台支持</th></tr></thead> <tbody><tr><td style="text-align:left;">onPullDownRefresh</td> <td style="text-align:left;">onPullDownRefresh</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onReachBottom</td> <td style="text-align:left;">onReachBottom</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onPageScroll</td> <td style="text-align:left;">onPageScroll</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onShareAppMessage</td> <td style="text-align:left;">onShareAppMessage</td> <td style="text-align:left;">全小程序平台</td></tr> <tr><td style="text-align:left;">onTabItemTap</td> <td style="text-align:left;">onTabItemTap</td> <td style="text-align:left;">微信/支付宝/百度/QQ</td></tr> <tr><td style="text-align:left;">onAddToFavorites</td> <td style="text-align:left;">onAddToFavorites</td> <td style="text-align:left;">微信 / QQ</td></tr> <tr><td style="text-align:left;">onShareTimeline</td> <td style="text-align:left;">onShareTimeline</td> <td style="text-align:left;">微信</td></tr> <tr><td style="text-align:left;">onSaveExitState</td> <td style="text-align:left;">onSaveExitState</td> <td style="text-align:left;">微信</td></tr></tbody></table> <blockquote><p><strong>特别注意</strong>，由于静态编译分析实现方式的限制，这类页面事件的组合式 API 使用需要满足页面事件注册函数（如<code>onShareAppMessage</code>）的调用和 <code>createPage</code> 的调用位于同一个 js 文件当中。</p></blockquote> <p>关于生命周期钩子函数的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="script-setup"><a href="#script-setup" class="header-anchor">#</a> <code>&lt;script setup&gt;</code></h3> <p>同 Vue3 一样，我们在 <code>.mpx</code> 单文件组件 / 页面中实现了 <code>&lt;script setup&gt;</code> 的组合式 API 编译语法糖，相较于常规的写法，<code>&lt;script setup&gt;</code> 具备以下优势：</p> <ul><li>更少的样板内容，更简洁的代码</li> <li>能够使用纯 TypeScript 声明 props 类型</li> <li>更好的 IDE 类型推导性能</li></ul> <p>简单使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
+
+  <span class="token keyword">function</span> <span class="token function">log</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>msg: {{msg}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">ontap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>log<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>可以看到使用方式与 Vue3 基本一致，不过由于 Mpx 的组合式 API 设计实现与 Vue3 存在差异，对应 <code>&lt;script setup&gt;</code> 也与 Vue3 中存在一些差异：</p> <ul><li>不支持 <code>import</code> 快捷注册组件</li> <li>没有 <code>defineEmits()</code> 编译宏</li> <li>没有 <code>useSlots()</code> 和 <code>useAttrs()</code> 运行时函数</li> <li>以编译宏的形式提供了 <code>useContext()</code>，获取 <code>setup</code> 函数的第二个参数 <code>context</code></li> <li><code>defineExpose()</code> 编译宏的作用与 Vue3 中有所差别，能够限定模板中能访问的变量范围</li></ul> <blockquote><p><strong>特别注意</strong>，受小程序底层技术限制，我们在 Mpx 的实现中无法像 Vue3 那样将模板编译的渲染函数和 <code>&lt;script setup&gt;</code> 放置到同一作用域下进行变量访问，而是通过静态编译分析提取出 <code>&lt;script setup&gt;</code> 的顶层作用域变量，再以上文中提到的动态添加数据与方法的方式将其设置到模板当中，如果 <code>&lt;script setup&gt;</code> 中声明了较多顶层作用域变量，它们并不一定都会被模板访问，就会带来无效的性能开销，因此我们强烈建议使用 <code>defineExpose()</code> 限定模板中能访问的变量范围，你可以把它等同于 <code>setup</code> 函数中的 <code>return</code>。</p></blockquote> <p>关于 <code>&lt;script setup&gt;</code> 的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="组合式-api-与-vue3-中的差异"><a href="#组合式-api-与-vue3-中的差异" class="header-anchor">#</a> 组合式 API 与 Vue3 中的差异</h3> <p>我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：</p> <ul><li><code>setup</code> 的 <code>context</code> 参数不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#context" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><code>setup</code> 不支持返回<strong>渲染函数</strong></li> <li><code>setup</code> 不能是异步函数</li> <li><code>&lt;script setup&gt;</code> 提供的宏方法不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><code>&lt;script setup&gt;</code> 不支持 <code>import</code> 快捷注册组件</li> <li>支持的生命周期钩子不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>模板引用的方式不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#template-ref" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>关于组合式 API 的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/composition-api.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="响应式-api-实现"><a href="#响应式-api-实现" class="header-anchor">#</a> 响应式 API 实现</h2> <p>组合式 API 的正常工作离不开响应式 API 的支持，下面我们来聊聊 Mpx 中响应式 API 的设计实现。我们知道 Vue3 中响应式 API 基于 <code>proxy</code> 进行了重构实现，但是目前 <code>proxy</code> 的浏览器兼容占比仍然无法达到我们对于线上可用性的要求，因此在 Mpx 中，我们仍然基于 <code>Object.defineProperty</code> 进行核心数据响应能力的实现，同时借鉴了 Vue3 中优秀的代码设计与实现，如 <code>reactiveEffect</code> 和 <code>effectScope</code> 等，尽可能实现与 Vue3 中响应式 API 能力对齐。</p> <p>说到这里，很多同学可能会想到 <code>@vue/composition-api</code> 这个库，该库提供的关键能力正是基于 Vue2 的数据响应系统模拟实现 Vue3 中的响应式 API，我们在前期也对 <code>@vue/composition-api</code> 在 Mpx 中的复用进行了非常有价值的探索尝试。不过最终我们还是决定在 Mpx 的运行时框架中进行独立实现，原因主要在于：<code>@vue/composition-api</code> 是作为一个 Vue2 插件存在，无法直接侵入 Vue2 源码，导致部分能力无法实现或会带来额外的性能开销，例如 <code>flush: 'post'</code> 和 <code>ref</code> 自动解包等。我们也看到在最新的 Vue2.7 版本中，也是在运行时框架里重新实现了这部分内容，以规避上述问题。</p> <p>下图展示了 Mpx 中响应式 API 核心模块依赖关系：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/4ySdEqTRhc_DRWWCJWrhJ_composition-api-reactive.png" alt="composition-api-reactive"></p> <h3 id="数据响应限制带来的差异"><a href="#数据响应限制带来的差异" class="header-anchor">#</a> 数据响应限制带来的差异</h3> <p>由于 <code>Object.defineProperty</code> 的能力限制，Mpx 存在和 Vue2 一致的数据响应限制，无法感知到对象 property 的添加和删除以及数组的索引赋值，与 Vue2 一致，我们暴露了 <code>set</code> 和 <code>del</code> API 来让用户显式地进行相关操作。除此之外，由于使用方式发生了变化，我们在使用 <code>reactive</code> API 创建响应式数据时，还会遇到新的限制，我们来看一下代码示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+
+<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [0,1,2,3]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发 watchEffect</span>
+
+state<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发 watchEffect</span>
+</code></pre></div><p>可以看出，即使我们使用了 <code>set</code> API 和数组原型方法对数组进行修改，我们仍然无法监听到数据变化。</p> <blockquote><p>相同的限制在使用 <code>Object.defineProperty</code> 的 Vue2.7 中也同样存在。</p></blockquote> <p>为什么会存在这个限制呢？原因在于：基于 <code>Object.defineProperty</code> 实现的数据响应系统中，我们会对对象的每个已有属性创建了一个 <code>Dep</code> 对象，在对该属性进行 <code>get</code> 访问时通过这个对象将其与依赖它的观察者 <code>ReactiveEffect</code> 关联起来，并在 <code>set</code> 操作时触发关联 <code>ReactiveEffect</code> 的更新，这是我们大家都知道的数据响应的基本原理。但是对于新增/删除对象属性和修改数组的场景，我们无法事先定义当前不存在属性的 <code>get/set</code> (当然这在 <code>proxy</code> 当中是可行的)，因此我们会把对象或者数组本身作为一个数据依赖创建 <code>Dep</code> 对象，<strong>通过父级访问</strong>该数据时定义的 <code>get/set</code> 将其关联到对应的 <code>ReactiveEffect</code>，并在对数据进行新增/删除属性或数组操作时通过数据本身持有的 <code>Dep</code> 对象触发关联 <code>ReactiveEffect</code> 的更新，如下图所示：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/XkI9cQBsLy_7np-T3rt56_composition-api-reactive2.png" alt="数据响应原理"></p> <p>需要注意的是，<strong>通过父级访问</strong>是建立 <code>Dep</code> 与 <code>ReactiveEffect</code> 关联关系的先决条件，在选项式 API 中，我们访问组件的响应式数据都需要通过 <code>this</code> 进行访问，相当于这些数据都存在 <code>this</code> 这个必要的<strong>父级</strong>，因此我们在使用 <code>$set/$delete</code> 进行对对象进行新增/删除属性或对数组进行修改时都能得到符合预期的结果，唯一的限制在于不能新增/删除根级数据属性，原因就在于 <code>this</code> 不存在访问它的父级。</p> <p>但是在组合式 API 中，我们不需要通过 <code>this</code> 访问响应式数据，因此通过 <code>reactive()</code> 创建的响应式数据本身就是根级数据，我们自然无法通过上述方式感知到根级数据自身的变化（在 Vue3 中，基于 <code>proxy</code> 提供的强大能力响应式系统能够精确地感知到数据属性，甚至是当前不存在属性的访问与修改，不需要为数据自身建立 <code>Dep</code> 对象，自然也不存在相关问题）。</p> <p>在这种情况下，我们就需要用 <code>ref()</code> 创建响应式数据，因为 <code>ref</code> 创建了一个包装对象，我们永远需要通过 <code>.value</code> 来访问其持有的数据（不管是显式访问还是隐式自动解包），这样就能保证 <code>ref</code> 数据自身的变化能够被响应式系统感知，因此也不会遇到上面描述的问题，如下所示：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+
+<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [0,1,2,3]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// [0,3,2,3]</span>
+
+state<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// [0,3,2,3,4]</span>
+</code></pre></div><h3 id="响应式-api-与-vue3-中的区别"><a href="#响应式-api-与-vue3-中的区别" class="header-anchor">#</a> 响应式 API 与 Vue3 中的区别</h3> <p>我们来总结一下 Mpx 中响应式 API 与 Vue3 中的区别：</p> <ul><li>不支持 <code>raw</code> 相关 API（<code>markRaw</code> 除外，我们提供了该 API 用于跳过部分数据的响应式转换）</li> <li>不支持 <code>readonly</code> 相关 API</li> <li>不支持 <code>watchEffect</code>、<code>watch</code>、<code>computed</code> 的调试选项</li> <li>不支持对 <code>map</code>、<code>set</code> 等集合类型进行响应式转换</li> <li>受到 <code>Object.defineProperty</code> 实现带来的数据响应限制影响</li></ul> <p>关于响应式 API 的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/reactive-api.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="生态周边适配"><a href="#生态周边适配" class="header-anchor">#</a> 生态周边适配</h2> <p>除了 Mpx 运行时核心提供了组合式 API 支持外，我们对 Mpx 的周边生态能力也都进行了组合式 API 适配支持，包括 <code>store</code>、<code>i18n</code>、<code>fetch</code> 等。</p> <h3 id="pinia-store-支持"><a href="#pinia-store-支持" class="header-anchor">#</a> Pinia store 支持</h3> <p>Pinia 是基于组合式 API 设计的全新数据管理方案，目前已经取代 Vuex 成为 Vue3 官方推荐的 store，我们在研究了 pinia 的设计实现后，对其简练优雅的设计思想及其与组合式 API 的高度适配非常满意（特别是在使用 <code>setup</code> 函数创建 store 时，使用心智与编写组件完全一致，可以将其视作是没有视图的组件）。因此我们 fork 了 pinia 的源码仓库，基于 Mpx 提供的数据响应能力对其进行了适配改造，使其在 Mpx 环境下也能正常运行，目前相关代码维护在 <code>@mpxjs/pinia</code> 中，在组合式 API 中的简单使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> computed<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
+
+<span class="token comment">// 使用组合式 API 创建 pinia store 的使用心智与 setup 函数完全一致，强烈推荐</span>
+<span class="token keyword">const</span> useSetupStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'setup'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> doubleCount <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
+
+  <span class="token keyword">function</span> <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    count<span class="token punctuation">.</span>value<span class="token operator">++</span>
+  <span class="token punctuation">}</span>
+
+  <span class="token keyword">return</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> doubleCount<span class="token punctuation">,</span> increment <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useSetupStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token comment">// store 同 props 类似是一个 reactive 对象，解构数据需使用 toRefs 以保持数据响应性</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> doubleCount <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>store<span class="token punctuation">)</span>
+    <span class="token comment">// 方法可以直接解构</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> increment <span class="token punctuation">}</span> <span class="token operator">=</span> store
+  
+    <span class="token keyword">return</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> doubleCount<span class="token punctuation">,</span> increment <span class="token punctuation">}</span>
+    <span class="token comment">//</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>Mpx 中通过 <code>createStore</code> 创建的类 Vuex store 在组合式 API 中仍然可以使用，我们可以在 <code>setup</code> 函数中引用 store 实例进行<a href="https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api" target="_blank" rel="noopener noreferrer">数据读取与方法调用<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，不过整体使用体验与 pinia store 存在较大差距，我们还是推荐在组合式 API 开发中优先使用 pinia store 作为数据管理方案。</p> <h3 id="i18n-支持"><a href="#i18n-支持" class="header-anchor">#</a> I18n 支持</h3> <p>传统选项式 API 中，我们使用 <code>this.$t</code> 方法在组件内调用翻译函数，但在组合式 API 中我们无法访问 <code>this</code>，为此我们参考了 Vue I18n 最新的 9.x 版本，该版本针对 Vue3 及组合式 API 进行了重构适配，提供了全新的 <code>useI18n</code> API，简单使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('message.hello')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeLocale<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>change locale<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// useI18n 不传参数时指向全局 i18n 对象，也可以传递 locale 和 messages 配置创建局部 i18n 对象</span>
+      <span class="token keyword">const</span> <span class="token punctuation">{</span> t<span class="token punctuation">,</span> locale <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+
+      <span class="token keyword">function</span> <span class="token function">changeLocale</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        locale<span class="token punctuation">.</span>value <span class="token operator">=</span> locale<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">'zh-CN'</span> <span class="token operator">?</span> <span class="token string">'en-US'</span> <span class="token operator">:</span> <span class="token string">'zh-CN'</span>
+      <span class="token punctuation">}</span>
+      <span class="token comment">// 返回的翻译方法名必须为 t，不能进行重命名</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span> t<span class="token punctuation">,</span> changeLocale <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><blockquote><p>上面示例代码看上去像是我们在模板上直接调用 setup() 返回的 t 翻译方法，但是熟悉小程序开发的同学都知道在小程序架构下这是不可能的，示例中的写法其实由框架通过编译 + 运行时手段实现的语法糖，我们会在模板编译时定向扫描 t/te/tm 等 i18n 方法，将其转换为计算属性注入到运行时当中，这就意味着如果我们对翻译方法进行重命名，模板编译时无法识别出 i18n 方法调用，自然也就无法正常运行。</p></blockquote> <p>Mpx 中 i18n 提供了两种实现模式，分别是 wxs 和 computed，可以使用编译选项中的 <code>i18n.isComputed</code> 进行切换，两种方式各有优劣，其中：</p> <ul><li>wxs 模式的优势在于逻辑层和视图层独立维护语言集，无额外运行时性能开销，且使用没有任何限制；劣势同样源于语言集同时存在于逻辑层（js）和视图层（wxs）当中，这部分的包体积占用翻倍；</li> <li>computed 模式的优势在于语言集只存在于逻辑层中，无额外包体积占用，且可以通过动态添加语言集的方式进一步减少包体积占用；劣势则是会产生额外的运行时性能开销，且使用上存在限制，模板调用时无法直接访问 <code>wx:for</code> 中的 <code>item</code> 和 <code>index</code>。</li></ul> <p>在组合式 API 中模板上使用 <code>useI18n()</code> 返回的翻译函数 <code>t/te/tm</code> 时，为了完整实现 <code>useI18n</code> API的功能，会强制使用 computed 模式进行实现，这也意味着该用法会受到 computed 模式使用限制的影响。不过当你不需要使用 <code>useI18n</code> 接受 <code>messages</code> 参数创建局部语言集作用域功能时，你也完全可以在模板中继续使用原有的 <code>$t/$tc/$te/$tm</code> 方法，这些方法受编译选项 <code>i18n.isComputed</code> 的影响，同时指向全局语言集作用域。</p> <p>更多关于生态周边的组合式 API 使用指南可以点击下方链接查看详情：</p> <ul><li><a href="https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api" target="_blank" rel="noopener noreferrer">store<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://mpxjs.cn/guide/advance/i18n.html#composition-api-usage" target="_blank" rel="noopener noreferrer">i18n<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://mpxjs.cn/guide/extend/fetch.html#composition-api-usage" target="_blank" rel="noopener noreferrer">fetch<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="输出-web-适配"><a href="#输出-web-适配" class="header-anchor">#</a> 输出 web 适配</h2> <p>跨端输出 web 作为 Mpx 的一大核心特性，在业务中存在广泛使用，同时也是我们设计实现任何框架新特性需要优先考虑的事项。在本次组合式 API 支持中，我们从设计之初就考虑了跨端输出 web 的适配支持，保障使用 Mpx 组合式 API 开发的业务代码都能在 web 环境中正常运行。</p> <p>我们输出 web 的整体技术方向在于尽可能复用 Vue 已有的生态能力，为了实现这个目标，我们需要提供尽可能与 Vue 保持一致的 API 设计，以降低抹平适配成本。在输出 web 时，核心组合式 API 基于 Vue2.7 版本中的已有能力进行适配提供，简单举个例子：对于 <code>import { ref } from 'mpxjs/core'</code> 这行语句，在小程序中会指向 Mpx 内部维护的 <code>ref</code> 实现，而在输出 web 时会指向 Vue 中维护的 <code>ref</code> 实现，两者的实现虽然不仅相同，但只要保障对外函数签名一致，对于开发者用户来说就无感知。</p> <p>我们借助了 Mpx 强大的条件编译能力进行上述实现，对运行时导出根据输出平台进行重定向，这样还能保障跨端输出产物干净简洁，仅包含当前输出环境下必要的逻辑，如下图所示：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/E0FojaPKOxZOa5h5OEPQk_composition-api-web.png" alt="composition-api-web"></p> <p>同理，我们也采用了类似的方式实现了组合式 API 周边能力对于输出 web 的适配支持，如pinia store 使用 pinia 原始版本进行适配实现，而 i18n 能力则是使用 vue-i18n@8.x + vue-i18n-bridge 进行适配实现。</p> <h2 id="性能表现"><a href="#性能表现" class="header-anchor">#</a> 性能表现</h2> <p>性能是 Mpx 一直以来的核心关注点，我们对组合式 API 的最终实现版本进行了一系列性能评估测试，我们使用组合式 API 版本对业务中的评价组件进行了重构，评价组件属于我们业务中交互及功能相对比较复杂的组件，源码行数约 1000 行，组件数据 27 项，组件方法 18 个，我们在测试项目中对选项式 API 和组合式 API 两个版本实现的组件进行了一系列测试。</p> <h3 id="组件初始化耗时"><a href="#组件初始化耗时" class="header-anchor">#</a> 组件初始化耗时</h3> <p>由于组合式 API 改变了原有的组件初始化流程，我们对组件的初始化耗时进行了重点测试，测试口径如下：</p> <ul><li>耗时计算以挂载组件为起点，以组件 <code>ready</code> 执行为终点</li> <li>测试结果为10次手工测试排除最大最小值后求均值</li> <li>IOS 测试机型为 iPhone 13 pro max，安卓测试机型为 OPPO R9</li></ul> <p>结果显示两个版本的组件初始化耗时大抵持平，不分优劣。</p> <table><thead><tr><th></th> <th>IOS</th> <th>安卓</th></tr></thead> <tbody><tr><td>选项式 API</td> <td>42.5ms</td> <td>366.6ms</td></tr> <tr><td>组合式 API</td> <td>42.4ms</td> <td>370.1ms</td></tr></tbody></table> <h3 id="组件-js-体积"><a href="#组件-js-体积" class="header-anchor">#</a> 组件 JS 体积</h3> <p>在构建产物体积方面，由于组合式 API 的写法对于 JS 代码压缩更加有利，同样的逻辑实现下，组合式 API 版本的组件构建压缩后 JS 体积略胜一筹。</p> <table><thead><tr><th></th> <th>组件 JS 体积</th></tr></thead> <tbody><tr><td>选项式 API</td> <td>15.67KB</td></tr> <tr><td>组合式 API</td> <td>13.60KB</td></tr></tbody></table> <h3 id="框架运行时体积"><a href="#框架运行时体积" class="header-anchor">#</a> 框架运行时体积</h3> <p>在 Mpx2.8 版本中，我们在框架运行时中新增了组合式 API 相关实现，不过通过优化运行时导出，使其对 tree shaking 更加友好，我们的框架运行时体积在实际构建产物中没有产生太大增长。</p> <table><thead><tr><th></th> <th>框架运行时体积</th></tr></thead> <tbody><tr><td>选项式 API</td> <td>51.66KB</td></tr> <tr><td>组合式 API</td> <td>57.47KB</td></tr></tbody></table> <p>综上所述，组合式 API 版本的运行时性能与选项式 API 大抵持平，在包体积占用方面，新版框架运行时体积占用略有提升，不过由于组合式 API 开发模式对代码压缩更友好，加上组合式 API 更易进行逻辑复用的特点，我们预计在实际业务项目中，组合式 API 的包体积占用会更小。</p> <h2 id="破坏性改变"><a href="#破坏性改变" class="header-anchor">#</a> 破坏性改变</h2> <p>Mpx 组合式 API 版本完全兼容原有的选项式 API 开发方式，不过我们在运行时重构过程中依然带来了少量的破坏性改变，详情如下：</p> <ul><li>框架过往提供的组件增强生命周期 <code>pageShow/pageHide</code> 与微信原生提供的 <code>pageLifetimes.show/hide</code> 完全对齐，不再提供组件初始挂载时必定执行 <code>pageShow</code> 的保障（因为组件可能在后台页面进行挂载），相关初始化逻辑一定不要放置在 <code>pageShow</code> 当中；</li> <li>取消了框架过去提供的基于内部生命周期实现的非标准增强生命周期，如 <code>beforeCreate/onBeforeCreate</code> 等，直接将内部生命周期变量导出提供给用户使用，详情查看<a href="https://mpxjs.cn/api/global-api.html#built-in-lifecycle-variable" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>;</li> <li>为了优化 tree shaking，作为框架运行时 <code>default export</code> 的 <code>Mpx</code> 对象不再挂载 <code>createComponent/createStore</code> 等运行时方法，一律通过 <code>named export</code> 提供，<code>Mpx</code> 对象上仅保留 <code>set/use</code> 等全局 API，详情查看<a href="https://mpxjs.cn/api/global-api.html#global-mpx" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>；</li> <li>使用 I18n 能力时，为了与新版 vue-i18n 保持对齐，<code>this.$i18n</code> 对象指向全局作用域，如需创建局部作用域需要使用组合式 API <code>useI18n</code> 的方式进行创建。</li> <li><code>watch</code> API 不再接受第二个参数为带有 <code>handler</code> 属性的对象形式（该参数形式只应存在于 <code>watch</code> option 中），第二个参数必须为回调函数，与 <a href="https://vuejs.org/api/reactivity-core.html#watch" target="_blank" rel="noopener noreferrer">Vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 对齐。</li></ul> <p>更详细的迁移指南请点击查看<a href="https://mpxjs.cn/guide/migrate/2.8.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="未来规划"><a href="#未来规划" class="header-anchor">#</a> 未来规划</h2> <p>在完成编译持久化缓存和组合式 API 支持后，我们已经完成了去年规划中最大的两个技术升级，后续我们的技术规划如下：</p> <ul><li>支持使用 Vite 进行 web 构建</li> <li>完善 Mpx 跨端输出 Hummer 并正式 release</li> <li>优化运行时 render 函数，降低包体积占用</li> <li>内置支持原子类使用</li> <li>Mpx-cube-ui 正式开源</li></ul> <p>最后，再次感谢所有参与 Mpx 组合式 API 技术建设的同学们，也欢迎社区同学加入 Mpx 项目开源共建。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/articles/2.7-release.html" class="prev">
+        Mpx2.7 版本正式发布，大幅提升编译构建速度
+      </a></span> <span class="next"><a href="/articles/2.9-release.html">
+        Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/51.90dfa84e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/2.9-release-alter.html b/docs-vuepress/.vuepress/dist/articles/2.9-release-alter.html
new file mode 100644
index 0000000000..8cbd7936d3
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/2.9-release-alter.html
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/52.10bb0251.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化"><a href="#mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化" class="header-anchor">#</a> Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</h1> <blockquote><p>作者：<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">董宏平<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer">Mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 是滴滴开源的一款增强型跨端小程序框架，自2018年立项开源以来如今已经进入第六个年头，在这六年间，Mpx 根植于业务，与业务共同成长，针对小程序业务开发中遇到的各类痛点问题提出了解决方案，并在集团内部建设了完善的小程序跨端开发生态。目前，Mpx 已经覆盖支持了集团内部全量小程序业务开发，成为了集团小程序开发的统一技术标准，并在今年年初被评选为集团内首个开源精品项目。</p> <p>随着小程序业务的发展演进，性能和包体积的重要性愈发凸显，Mpx从设计之初就非常重视性能和包体积的优化，本次的 <strong>Mpx2.9</strong> 版本更新带来的三大核心特性——原子类、SSR 和包体积优化也都与性能和包体积息息相关，下面我们逐个展开介绍。</p> <h2 id="原子类支持"><a href="#原子类支持" class="header-anchor">#</a> 原子类支持</h2> <p>原子类(utility-first CSS)是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，比较知名的有 <a href="https://github.com/" target="_blank" rel="noopener noreferrer">Github<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<a href="https://openai.com/" target="_blank" rel="noopener noreferrer">OpenAI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<a href="https://top10.netflix.com/" target="_blank" rel="noopener noreferrer">Netflix<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://www.jpl.nasa.gov/" target="_blank" rel="noopener noreferrer">NASA官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等。使用原子类离不开原子类框架的支持，常用的原子类框架有 <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwindcss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://windicss.org/" target="_blank" rel="noopener noreferrer">Windicss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://unocss.dev/" target="_blank" rel="noopener noreferrer">Unocss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等。</p> <p>在 Mpx2.9 版本中，我们在框架中内置了基于 <code>unocss</code> 的原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx 页面/组件模板中直接使用一些预定义的基础样式类，诸如 flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-base text-black font-semibold mb-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+          Erin Lindford
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-gray-500 font-medium pb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+          Product Engineer
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span>
+          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+          Message
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/Or3aaN-mmxV8pK-LmEVPm_demo.png" alt="utility-css-demo"></p> <p>相较于传统的自定义类编写样式的方式，使用原子类能给你带来以下这些好处：</p> <ul><li><strong>不用再烦恼于为自定义类取类名</strong>，传统样式开发中，我们仅仅是为某个元素定义样式就需要绞尽脑汁发明一些抽象的类名，还得提防类名冲突，使用原子类可以完全将你从这种琐碎无趣的工作中解放；</li> <li><strong>停止 css 体积的无序增长</strong>，传统样式开发中，css 体积会随着你的迭代不断增长，而在原子类中，一切样式都可以复用，你几乎不需要编写新的 css；</li> <li><strong>让调整样式变得更加安全</strong>，传统 css 是全局的，当你修改某个样式时无法保障其不会破坏其他地方的样式，而你在模板中使用的原子类是本地的，你完全不用担心修改它会影响其他地方。</li></ul> <p>而相较于使用内联样式，原子类也有一些重要的优势：</p> <ul><li><strong>约束下的设计</strong>，使用内联样式时，里面的每一个数值都是魔法数字（magic number）
+，而通过原子工具类，你可以选择一些符合预定义设计规范的样式，便于构筑具有视觉一致性的UI；</li> <li><strong>响应式设计</strong>，你无法在内联样式中使用媒体查询，然而通过原子类框架中提供的响应式工具，你可以轻而易举地构建出响应式界面；</li> <li><strong>Hover、focus 和其他状态</strong>，使用内联样式无法定义特定状态下的样式，如 hover 和 focus，通过原子类框架的状态变量能力，我们可以轻松为这些状态定义样式。</li></ul> <p>看到这里相信你已经迫不及待地想要在 Mpx 中体验原子类开发了吧，使用最新版本的 <code>@mpxjs/cli</code> 脚手架创建项目时，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用 <code>unocss</code> 的原子类，可使用的工具类可以参考 <a href="https://unocss.dev/interactive/" target="_blank" rel="noopener noreferrer">unocss 交互示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，在已有项目中开启原子类支持可以参考<a href="https://mpxjs.cn/guide/advance/utility-first-css.html#compile-config" target="_blank" rel="noopener noreferrer">配置指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="小程序原子类使用注意事项"><a href="#小程序原子类使用注意事项" class="header-anchor">#</a> 小程序原子类使用注意事项</h3> <p>小程序和 web 环境对于 css 的支持存在底层差异，小程序内也存在大量自身独有的技术特性，Mpx 在支持原子类时针对这些环境特异性进行了抹平和适配，在框架的支持下，我们实现了大部分（超过90%）原子类功能和工具类在小程序环境下正常使用，并额外支持了原子类产物的分包输出和样式隔离下的原子类使用，详情如下：</p> <h4 id="特殊字符转义"><a href="#特殊字符转义" class="header-anchor">#</a> 特殊字符转义</h4> <p>基于 <code>unocss</code> 的原子类支持 <code>value auto-infer</code>（值自动推导），可以在模版中根据相关规则书写灵活的自定义值原子类，如 <code>p-5px bg-[hsl(211.7,81.9%,69.6%)]</code> 等，针对原子类中出现的 <code>[</code> <code>(</code> <code>,</code> 等特殊字符，在 web 中会通过转义字符 <code>\</code> 进行转义，由于小程序环境下不支持 css 选择器中出现 <code>\</code> 转义字符，我们内置支持了一套不带 <code>\</code> 的转义规则对这些特殊字符进行转义，同时替换模版和 css 文件中的类名，内建的默认转义规则如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> escapeMap <span class="token operator">=</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">'('</span><span class="token operator">:</span> <span class="token string">'_pl_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">')'</span><span class="token operator">:</span> <span class="token string">'_pr_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'['</span><span class="token operator">:</span> <span class="token string">'_bl_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">']'</span><span class="token operator">:</span> <span class="token string">'_br_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'{'</span><span class="token operator">:</span> <span class="token string">'_cl_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'}'</span><span class="token operator">:</span> <span class="token string">'_cr_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'#'</span><span class="token operator">:</span> <span class="token string">'_h_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'!'</span><span class="token operator">:</span> <span class="token string">'_i_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'/'</span><span class="token operator">:</span> <span class="token string">'_s_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'.'</span><span class="token operator">:</span> <span class="token string">'_d_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">':'</span><span class="token operator">:</span> <span class="token string">'_c_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">','</span><span class="token operator">:</span> <span class="token string">'_2c_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'%'</span><span class="token operator">:</span> <span class="token string">'_p_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'\''</span><span class="token operator">:</span> <span class="token string">'_q_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'&quot;'</span><span class="token operator">:</span> <span class="token string">'_dq_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'+'</span><span class="token operator">:</span> <span class="token string">'_a_'</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">$</span><span class="token operator">:</span> <span class="token string">'_si_'</span><span class="token punctuation">,</span>
+    <span class="token comment">// unknown用于兜底不在上述范围中未知的转义字符</span>
+    <span class="token literal-property property">unknown</span><span class="token operator">:</span> <span class="token string">'_u_'</span>
+  <span class="token punctuation">}</span>
+</code></pre></div><p>与此同时，用户也可以通过传递 <code>@mpxjs/unocss-plugin</code> 的 <a href="https://mpxjs.cn/api/compile.html#escapeMap" target="_blank" rel="noopener noreferrer">escapeMap<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项来覆盖内建的转义规则。</p> <h4 id="原子类分包输出"><a href="#原子类分包输出" class="header-anchor">#</a> 原子类分包输出</h4> <p>在 web 中，原子类会被全部打包输出单个样式文件，一般会放置在顶层样式表中以供全局访问，但在小程序中这种全量的输出策略并不是最优的，主要原因在于小程序中可供全局访问的主包体积存在 <strong>2M 大小限制</strong>，主包体积十分紧缺珍贵，Mpx 在构建输出时遵循着分包优先的原则，尽可能充分利用分包体积从而减少对主包体积的占用，再进行原子类产物输出时，我们也遵循了相同的原则。</p> <p>在Mpx中，我们在收集原子类时同时记录了每个原子类的引用分包，在收集结束后根据每个原子类的分包引用数量决定该原子类应该输出到主包还是分包当中，我们在 <code>@mpxjs/unocss-plugin</code> 中提供了 <a href="https://mpxjs.cn/api/compile.html#minCount" target="_blank" rel="noopener noreferrer">minCount<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项来决定分包的输出规则，该配置项的默认值为2，即当一个原子类被2个或以上分包引用时，会被作为公共原子类抽取到主包中，否则输出到所属分包中，这也是全局最优的策略。当我们想要让原子类输出产物更少地占用主包体积时，我们也可以将<code>minCount</code>值调大，让原子类抽取到主包的条件更加苛刻，不过这样也会伴随着原子类分包冗余的增加。</p> <p><code>unocss.config.js</code> 配置中定义的 <code>safelist</code> 原子类默认会输出到主包，为了组件局部使用的 <code>safelist</code> 有输出到分包的机会，我们在模版中提供了<a href="https://mpxjs.cn/api/compile.html#commentConfig" target="_blank" rel="noopener noreferrer">注释配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（comments config），灵感来源于 <code>webpack</code> 中的魔法注释（magic comments），用户可以在组件模版中通过<code>注释配置</code>声明当前组件所需的 <code>safelist</code>，对应的原子类也会根据上述的规则输出到主包或分包中，使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- mpx_config_safelist: 'text-red-500 bg-blue-500' --&gt;</span>
+    <span class="token comment">&lt;!-- 动态样式中可以使用text-red-500和bg-blue-500原子类 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{classObj}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- ... --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h4 id="样式隔离与组件分包异步"><a href="#样式隔离与组件分包异步" class="header-anchor">#</a> 样式隔离与组件分包异步</h4> <p>在小程序中，自定义组件的样式默认是隔离的，web 中通过全局样式访问原子类的方式不再生效，不过由于小程序提供了<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB" target="_blank" rel="noopener noreferrer">样式隔离配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，我们可以将该组件样式隔离配置调整为 <code>apply-shared</code> 来获取页面或 app 中定义的原子类，但是当我们在使用传统类名和原子类混合开发或者迁移原子类的过程中，我们往往希望保留原本自定义组件的样式隔离。</p> <p>针对这种情况，我们在 <code>@mpxjs/unocss-plugin</code> 中提供了 <a href="https://mpxjs.cn/api/compile.html#styleIsolation" target="_blank" rel="noopener noreferrer">styleIsolation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项，可选设置为 <code>isolated</code>|<code>apply-shared</code>，当设置为 <code>isolated</code> 时每个组件都会通过 <code>@import</code> 独立引用主包或者分包的原子类样式文件，因此不会受到样式隔离的影响；当设置为 <code>apply-shared</code> 时，只有 app 和分包页面会引用对应的原子类样式文件，自定义组件需要通过配置样式隔离为 <code>apply-shared</code> 使原子类生效。</p> <p>在组件分包异步的情况下对应组件即使将样式隔离配置为 <code>apply-shared</code> 的情况下，<code>@mpxjs/unocss-plugin</code> 也需要将  <code>styleIsolation</code> 设置为 <code>isolated</code> 才能正常工作，原因在于组件分包异步的情况下，组件被其他分包的页面所引用渲染，由于上述原子类样式分包输出的规则，其他分包的页面中可能并不包含当前组件所需的原子类，只有在 <code>isolated</code> 模式下由组件自身引用所需的原子类样式才能保证正常工作，类似于 <code>safelist</code>，我们也提供了<a href="https://mpxjs.cn/api/compile.html#commentConfig" target="_blank" rel="noopener noreferrer">注释配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的方式对组件的 <code>styleIsolation</code> 模式进行局部配置，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- mpx_config_styleIsolation: 'isolated' --&gt;</span>
+    <span class="token comment">&lt;!-- 当前组件会直接引用对应主包或分包的原子类样式 --&gt;</span>
+     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>@dark:(text-white bg-dark-500)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- ... --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="原子类使用参考文档"><a href="#原子类使用参考文档" class="header-anchor">#</a> 原子类使用参考文档</h3> <p>Mpx 中使用原子类的详细参考文档如下：</p> <ul><li><a href="https://mpxjs.cn/guide/advance/utility-first-css.html" target="_blank" rel="noopener noreferrer">原子类使用指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://mpxjs.cn/api/compile.html#MpxUnocssPlugin" target="_blank" rel="noopener noreferrer">原子类 API 参考<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="输出-web-支持-ssr"><a href="#输出-web-支持-ssr" class="header-anchor">#</a> 输出 web 支持 SSR</h2> <p>近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，各类SSR框架层出不穷，未来进一步提升性能表现，在 SSR 的基础上还演进出 <a href="https://docs.astro.build/en/concepts/islands/" target="_blank" rel="noopener noreferrer">islands architecture<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://qwik.builder.io/docs/concepts/resumable/" target="_blank" rel="noopener noreferrer">0 hydration<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等更加精细复杂的理念和架构。</p> <p>近两年随着团队对于前端性能的重视，SSR/SSG 技术也在团队业务中逐步推广落地，并在首屏性能方面取得了显著的收效。但由于过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 Mpx2.9 版本中，我们对 web 输出流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整实现了基于 Vue 和 Pinia 的 SSR 技术方案。</p> <h3 id="配置使用-ssr"><a href="#配置使用-ssr" class="header-anchor">#</a> 配置使用 SSR</h3> <p>在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。</p> <p><img src="https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85" alt="Vue SSR流程"></p> <p>Mpx SSR 核心基于 Vue SSR 实现，大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：</p> <h4 id="构建server-client-bundle"><a href="#构建server-client-bundle" class="header-anchor">#</a> 构建server/client bundle</h4> <p>SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。
+在 Vue 中，我们需要提供 <code>entry-server.js</code> 和 <code>entry-client.js</code> 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 <code>app.mpx</code> 作为统一构建入口，无需区分 server 和 client。</p> <h5 id="服务端构建配置"><a href="#服务端构建配置" class="header-anchor">#</a> 服务端构建配置</h5> <p>服务端配置中除了将 entry 制定为 <code>app.mpx</code> 及其它基础配置外，最重要的是安装 <code>vue-server-renderer</code> 包中提供的  <code>server-plugin</code> 插件，该插件能够构建产出 <code>vue-ssr-server-bundle.json</code> 文件供 <code>renderer</code> 后续消费。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.server.config.js</span>
+<span class="token keyword">const</span> VueSSRServerPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer/server-plugin'</span><span class="token punctuation">)</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 将 entry 指向项目的 app.mpx 文件</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./app.mpx'</span><span class="token punctuation">,</span>
+  <span class="token comment">// ...</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+   <span class="token comment">// 产出 `vue-ssr-server-bundle.json`</span>
+    <span class="token keyword">new</span> <span class="token class-name">VueSSRServerPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#server-config" target="_blank" rel="noopener noreferrer">Vue SSR的服务端配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="客户端构建配置"><a href="#客户端构建配置" class="header-anchor">#</a> 客户端构建配置</h5> <p>类似服务端构建配置，在客户端构建中我们需要使用 <code>vue-server-renderer</code> 包中 <code>client-plugin</code> 插件来帮助我们生成客户端环境的资源清单 <code>vue-ssr-client-manifest.json</code>，并供 <code>renderer</code> 后续消费。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.client.config.js</span>
+<span class="token keyword">const</span> VueSSRClientPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer/client-plugin'</span><span class="token punctuation">)</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 将 entry 指向项目的 app.mpx 文件</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./app.mpx'</span><span class="token punctuation">,</span>
+  <span class="token comment">// ...</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token comment">// 产出 `vue-ssr-client-manifest.json`。</span>
+    <span class="token keyword">new</span> <span class="token class-name">VueSSRClientPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#client-config" target="_blank" rel="noopener noreferrer">Vue SSR的客户端配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="准备页面模版"><a href="#准备页面模版" class="header-anchor">#</a> 准备页面模版</h4> <p>SSR 渲染中，我们创建 <code>renderer</code> 需要一个页面模板，简单的示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Hello<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--vue-ssr-outlet--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 <code>&lt;!--vue-ssr-outlet--&gt;</code>注释，标记 SSR 渲染产物的插入位置，如使用 <code>@mpxjs/cli</code> 脚手架创建 SSR 项目，该模版已经内置于脚手架中。</p> <h4 id="集成启动-ssr-服务"><a href="#集成启动-ssr-服务" class="header-anchor">#</a> 集成启动 SSR 服务</h4> <p>当我们准备好页面模版和双端构建产物后，我们就可以创建 <code>renderer</code> 并与 Node 服务进行集成，启动 SSR 服务，下面以 <code>express</code> 为例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//server.js</span>
+<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> createBundleRenderer <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer'</span><span class="token punctuation">)</span>
+<span class="token comment">// 通过 vue-server-renderer/server-plugin 生成的文件</span>
+<span class="token keyword">const</span> serverBundle <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../dist/server/vue-ssr-server-bundle.json'</span><span class="token punctuation">)</span>
+<span class="token comment">// 通过 vue-server-renderer/client-plugin 生成的文件</span>
+<span class="token keyword">const</span> clientManifest <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../dist/client/vue-ssr-client-manifest.json'</span><span class="token punctuation">)</span>
+ <span class="token comment">// 页面模版文件</span>
+<span class="token keyword">const</span> template <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token string">'../src/index.template.html'</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span>
+<span class="token comment">// 创建 renderer 渲染器</span>
+<span class="token keyword">const</span> renderer <span class="token operator">=</span> <span class="token function">createBundleRenderer</span><span class="token punctuation">(</span>serverBundle<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">runInNewContext</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+    template<span class="token punctuation">,</span>
+    clientManifest<span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// 注册启动 SSR 服务</span>
+app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> req<span class="token punctuation">.</span>url <span class="token punctuation">}</span>
+  renderer<span class="token punctuation">.</span><span class="token function">renderToString</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> html</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  	<span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  	  res<span class="token punctuation">.</span><span class="token function">status</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'Internal Server Error'</span><span class="token punctuation">)</span>
+      <span class="token keyword">return</span>
+    <span class="token punctuation">}</span>
+  	res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8080</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="ssr-生命周期"><a href="#ssr-生命周期" class="header-anchor">#</a> SSR 生命周期</h3> <p>在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是<code>onAppInit</code>、<code>serverPrefetch</code> 和 <code>onSSRAppCreated</code>，以统一服务端与客户端的构建入口，下面展开介绍：</p> <h4 id="onappinit"><a href="#onappinit" class="header-anchor">#</a> onAppInit</h4> <p>在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，<code>onAppInit</code> 生命周期会在应用创建 <code>new Vue(...)</code> 前被调用，其执行的返回结果会被合并到创建应用的 <code>options</code> 中</p> <p>很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 <code>@mpxjs/pinia</code> 作为全局状态管理工具，我们可以在 <code>onAppInit</code> 中返回全新的 <code>pinia</code> 示例避免产生跨请求状态污染，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
+<span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
+
+<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token function">onAppInit</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      pinia
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="serverprefetch"><a href="#serverprefetch" class="header-anchor">#</a> serverPrefetch</h4> <p>当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：</p> <p>选项式 API：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> useStore <span class="token keyword">from</span> <span class="token string">'../store/index'</span>
+
+<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">//...</span>
+  <span class="token function">serverPrefetch</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query
+    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$pinia<span class="token punctuation">)</span>
+    <span class="token comment">// return the promise from the action, fetch data and update state</span>
+    <span class="token keyword">return</span> store<span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>组合式 API：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onServerPrefetch<span class="token punctuation">,</span> getCurrentInstance<span class="token punctuation">,</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> useStore <span class="token keyword">from</span> <span class="token string">'../store/index'</span>
+
+<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">userStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token function">onServerPrefetch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token function">getCurrentInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>proxy<span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query
+      <span class="token comment">// return the promise from the action, fetch data and update state</span>
+      <span class="token keyword">return</span> store<span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>关于数据预拉取更详细的说明可以查看<a href="https://v2.ssr.vuejs.org/guide/data.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h4 id="onssrappcreated"><a href="#onssrappcreated" class="header-anchor">#</a> onSSRAppCreated</h4> <p>在 Vue SSR 项目中，我们会在 <code>entry-server.js</code> 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 <code>app</code>。</p> <p>在 Mpx SSR 中，我们将这部分逻辑整合在 <code>onSSRAppCreated</code> 中执行，该生命周期执行时用户可以从参数中获取应用实例 <code>app</code>、路由实例 <code>router</code>、数据管理实例 <code>pinia</code> 和 SSR 上下文 <code>context</code>，在完成必要的操作后，该生命周期需要返回一个 <code>resolve(app)</code> 的 promise。</p> <p>通常我们会在 <code>onSSRAppCreated</code> 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
+<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token comment">// ...,</span>
+    <span class="token function">onSSRAppCreated</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> pinia<span class="token punctuation">,</span> router<span class="token punctuation">,</span> app<span class="token punctuation">,</span> context <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token comment">// 设置服务端路由路径</span>
+        router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
+        router<span class="token punctuation">.</span><span class="token function">onReady</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          <span class="token comment">// 应用完成渲染时执行</span>
+          context<span class="token punctuation">.</span><span class="token function-variable function">rendered</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+            <span class="token comment">// 将服务端渲染后得到的 pinia.state 同步到 context.state 中，</span>
+            <span class="token comment">// context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`</span>
+            <span class="token comment">// 注入到 HTML 中，并在客户端运行时再读取同步</span>
+            context<span class="token punctuation">.</span>state <span class="token operator">=</span> pinia<span class="token punctuation">.</span>state<span class="token punctuation">.</span>value
+          <span class="token punctuation">}</span>
+          <span class="token comment">// 返回应用程序实例</span>
+          <span class="token function">resolve</span><span class="token punctuation">(</span>app<span class="token punctuation">)</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> reject<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。</p> <h3 id="其他注意事项"><a href="#其他注意事项" class="header-anchor">#</a> 其他注意事项</h3> <ol><li><p>Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。</p></li> <li><p>在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。</p></li> <li><p>由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 <code>mpx.config.webRouteConfig</code> 将路由模式设置成 <code>history</code> 模式。</p></li></ol> <h2 id="包体积优化"><a href="#包体积优化" class="header-anchor">#</a> 包体积优化</h2> <p>近几年来随着集团超级 App 战略的推进，滴滴出行主小程序中集成了越来越多的业务线，主小程序的包体积也随之呈现爆炸式增长，到今天主小程序里已经集成了集团内大部分核心业务，但其总包体积也从 21 年的 12MB 增长至触达微信上限 30MB，成为一个页面数量400+，组件数量3600+，JS模块数40000+的“大程序”。在此期间，我们通过统一技术框架、分包异步改造和低效页面下线/改造等技术手段，对主小包体积进行一轮又一轮优化，并沉淀了分包异步构建、包体积分析管控和冗余包检测等一系列技术能力，累计优化总包体积超过 <strong>8MB</strong>。</p> <p>Mpx 在设计之初就考虑了包体积问题，完整继承了 webpack 已有的代码优化能力，如公共模块抽离、tree shaking、混淆压缩等。除此之外，我们还设计开发了业内最完善的分包构建流程，完整支持基于配置声明和依赖分析的普通分包、独立分包及分包异步化的构建输出，极大地缓解了复杂小程序中的主包和总包体积过大的问题。在 Mpx2.9 版本中，我们针对复杂小程序页面组件和 JS 模块众多的特点，对构建产物进行了针对性地优化，进一步降低了构建产物体积，当前版本在主小程序中实测能够在不做任何业务改造的情况下节省了约 <strong>2MB</strong> 总包体积，收效显著，主要优化项如下：</p> <h3 id="模版代码优化"><a href="#模版代码优化" class="header-anchor">#</a> 模版代码优化</h3> <p>Mpx 基于 webpack 进行打包构建，并基于小程序原生 commonjs 支持进行适配改造，以实现 webpack 构建产物在小程序环境下运行，为了将构建产物中的模块和 chunk 链接到一起，webpack 和 mpx 会在构建产物生成一些模版代码进行相关工作，下面是一个页面 js 中包含的模版代码示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> self <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+self<span class="token punctuation">.</span>webpackChunkmpx_test_2_8 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../bundle.js'</span><span class="token punctuation">)</span>
+<span class="token punctuation">(</span>self<span class="token punctuation">.</span>webpackChunkmpx_test_2_8 <span class="token operator">=</span> self<span class="token punctuation">.</span>webpackChunkmpx_test_2_8 <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">405</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token number">1307</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> e<span class="token punctuation">,</span> o</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token number">4236</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">var</span> e
+  e <span class="token operator">=</span> <span class="token number">1307</span><span class="token punctuation">,</span> <span class="token function">t</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span>s <span class="token operator">=</span> e<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+</code></pre></div><p>可以看出模版代码主要由 chunk 链接代码，chunk id，模块 id 和模块包装函数组成，对于中小项目来说，这些模版代码一般不会占用太多体积，但是在滴滴出行主小程序这样的大体量项目下，这部分体积就变得不可忽视，<code>@mpxjs/size-report</code> 的分析结果显示，生产模式下主小程序中模版代码占用体积约为 1.2MB，相当于一个中等复杂度业务的占用体积。</p> <p>我们对模版代码的生成逻辑和生成产物进行分析，发现 webpack 生产模式的默认配置中，很多配置项并不是体积最优的选项，一个典型的例子在于模块/chunk id：为了保障生成产物的内容稳定，来尽可能提升浏览器的缓存利用率，webpack 默认的模块/chunk id 采用 <code>deterministic</code> 模式进行生成，该模式下模块 id 为模块源路径的定长数字 hash，比项目模块总数长 1 位。由于在小程序中代码包按照版本的维度进行全量管理，保证文件局部的内容稳定在小程序环境下无正向意义，这就有了优化空间，我们可以简单将模块/chunk id 的生成逻辑改为数字自增，在主小程序中就能节省出上百 KB 总包体积。</p> <p>类似的可优化点还存在于 chunk 链接代码和模块包装函数当中，我们在 <code>@mpxjs/webpack-plugin@2.9</code> 版本中提供了一个新的配置项 <a href="https://mpxjs.cn/api/compile.html#optimizesize" target="_blank" rel="noopener noreferrer">optimizeSize<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，其中整合了一系列模版代码体积优化配置，开启后就能自动优化构建产物中的模版代码体积，在主小程序中，我们开启 <code>optimizeSize</code> 后可以减少总包体积约 <strong>540KB</strong>，效果非常显著，下面是上述示例在开启 <code>optimizeSize</code> 后的产物对比：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> g <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+g<span class="token punctuation">.</span>c <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../bundle.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>g<span class="token punctuation">.</span>c <span class="token operator">=</span> g<span class="token punctuation">.</span>c <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token number">448</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> e<span class="token punctuation">,</span> o</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token number">463</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span>
+  <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">var</span> e
+  e <span class="token operator">=</span> <span class="token number">448</span><span class="token punctuation">,</span> <span class="token function">t</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span>s <span class="token operator">=</span> e<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="空模块移除"><a href="#空模块移除" class="header-anchor">#</a> 空模块移除</h3> <p>Mpx 在处理 <code>.mpx</code> 单文件时会将其分拆为 <code>template/js/style/json</code> 四个新模块来进行分别处理，其中 <code>template/style/json</code> 部分的内容会在处理后通过内置的 <code>extractor</code> 抽取输出为静态文件，抽取之后原本分拆出来的模块就会以空模块的形式残留在构建产物中（template 模块在抽取后还需要保留 render 函数和 refs 等信息所以不会成为空模块），如下所示：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/***/</span> <span class="token number">533</span><span class="token operator">:</span>
+<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">__unused_webpack_module<span class="token punctuation">,</span> __unused_webpack_exports<span class="token punctuation">,</span> __webpack_require__</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+<span class="token comment">// ...</span>
+<span class="token comment">/* template */</span>
+<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">535</span><span class="token punctuation">)</span>
+<span class="token comment">/* styles */</span>
+<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">536</span><span class="token punctuation">)</span>
+<span class="token comment">/* json */</span>
+<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">537</span><span class="token punctuation">)</span>
+<span class="token comment">/* script */</span>
+<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">534</span><span class="token punctuation">)</span>
+<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+<span class="token comment">/***/</span> <span class="token number">536</span><span class="token operator">:</span>
+<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+<span class="token comment">/***/</span> <span class="token number">537</span><span class="token operator">:</span>
+<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>从上面示例中可以看出 <code>536/537</code> 模块的定义和引用都是完全不必要的，但由于 webpack 本身对于空模块没有进行识别和优化的手段，在过去的版本中这些空模块代码会占用我们一部分总包体积。在 Mpx2.9 版本中，我们定义了全新的依赖类型 <code>CommonjsExtractDependency</code> 对于这类可能被抽取成为空模块的 <code>request</code> 进行识别处理，当模块内容在完成抽取后为空时，自动将其从模块图中移除，并在产物生成时不再生成其引用代码。该项优化措施内置开启，升级后自动生效，可减少主小程序总包体积约 <strong>232KB</strong>。</p> <h3 id="render函数优化"><a href="#render函数优化" class="header-anchor">#</a> Render函数优化</h3> <p>Render 函数是 Mpx 运行时 <code>setData</code> 优化的一项核心设计，我们在模版编译时将用户模版转换为简易的 render 函数，该函数执行时能够完全模拟视图渲染的数据访问过程，正确地收集当前视图的数据依赖，避免将视图不需要的数据通过 <code>setData</code> 发送到视图中。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/ZQ6p8Rs2m7QCumOll3nmd.jpg" alt="render函数"></p> <p>虽然我们生成的简化版 render 函数仅保留了数据访问逻辑，在代码体积上并不算大，但是仍然存在着一定的优化空间，我们来看下面这个例子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>a
+  <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">)</span><span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>a
+    <span class="token keyword">this</span><span class="token punctuation">.</span>b
+    <span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">.</span>a
+    <span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">.</span>b
+    <span class="token keyword">this</span><span class="token punctuation">.</span>d
+  <span class="token punctuation">}</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>b
+<span class="token punctuation">}</span>
+</code></pre></div><p>可以看出 <code>if block</code> 下存在着大量冗余不必要的数据访问，例如 <code>this.a</code> 和 <code>this.b</code> 在父级 <code>block</code> 中已经进行过访问，<code>this.c.a</code> 和 <code>this.c.b</code> 由于在 <code>if condition</code> 中进行过 <code>this.c</code> 的访问也不再必要（render函数执行时会对模版依赖数据进行深度diff，父路径访问后子路径就无需再进行访问），上述 render 函数可以优化为：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>a
+  <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">)</span><span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>d
+  <span class="token punctuation">}</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>b
+<span class="token punctuation">}</span>
+</code></pre></div><p>在 Mpx2.9 版本中，我们通过两轮 <code>ast</code> 遍历（<code>2 pass ast travese</code>）的方式实现了这个优化，在第一轮遍历中，我们收集了数据访问信息并按照 <code>block</code> 结构存储在 <code>blockVisitTree</code> 中，第二轮遍历时依据 <code>blockVisitTree</code> 中的信息对不必要的数据访问进行剪枝优化。</p> <p>除此之外，我们也大幅优化了 render 函数中的数据收集代码，有效地降低了 render 函数的体积占用。</p> <p>该优化目前没有默认开启，可以通过 <code>@mpxjs/webpack-plugin</code> 中的 <a href="https://mpxjs.cn/api/compile.html#optimizerenderrules" target="_blank" rel="noopener noreferrer">optimizeRenderRules<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项配置生效范围进行开启，
+全量开启后在主小程序中实测可节省总包体积约 <strong>1507KB</strong>。</p> <h2 id="未来规划"><a href="#未来规划" class="header-anchor">#</a> 未来规划</h2> <p>在未来，我们对 Mpx 构建产物还有进一步的优化方案可以探索实施，主要分为两个方向：</p> <ul><li>编译注入代码优化，在功能不变的情况下简化编译注入的代码，对于 render 函数也有一种运行时有损的方案（略微增大运行时开销）可以尝试</li> <li>模版和JSON压缩，对模版和JSON中的组件名及组件路径进行短哈希压缩，缺点是丢失dist产物的可读性，可能需要对其提供 sourceMap 支持</li></ul> <p>除此之外，我们近期的框架升级计划还包括：</p> <ul><li>局部运行时渲染增强</li> <li>数据响应升级为 proxy 实现，输出 web 升级为 vue3</li> <li>支付宝 2.0 基础库适配优化</li> <li>微信 skyline 适配优化</li> <li>输出 Hummer 能力完善</li></ul> <p>在构建提速方面，我们也会在以下方向进行探索：</p> <ul><li>输出 web 支持 vite 构建</li> <li>基于模块联邦的分布式构建</li> <li>基于 Rust 的高性能构建探索</li></ul> <p>最后，特别感谢@徐伟东、@闫宇和@朱志恒对于 2.9 版本功能开发的突出贡献，也欢迎大家使用 Mpx 进行小程序跨端开发并加入社区共建。</p> <p>Github：https://github.com/didi/mpx</p> <p>官网/文档：https://mpxjs.cn/</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/52.10bb0251.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/2.9-release.html b/docs-vuepress/.vuepress/dist/articles/2.9-release.html
new file mode 100644
index 0000000000..f17db1933f
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/2.9-release.html
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/53.7207ffc5.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" aria-current="page" class="active sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/2.9-release.html#原子类支持" class="sidebar-link">原子类支持</a></li><li class="sidebar-sub-header"><a href="/articles/2.9-release.html#输出-web-支持-ssr" class="sidebar-link">输出 web 支持 SSR</a></li><li class="sidebar-sub-header"><a href="/articles/2.9-release.html#包体积优化" class="sidebar-link">包体积优化</a></li><li class="sidebar-sub-header"><a href="/articles/2.9-release.html#未来规划" class="sidebar-link">未来规划</a></li></ul></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化"><a href="#mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化" class="header-anchor">#</a> Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</h1> <blockquote><p>作者：<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">hiyuki<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer">Mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 是滴滴开源的一款增强型跨端小程序框架，自2018年立项开源以来如今已经进入第六个年头，在这六年间，Mpx 根植于业务，与业务共同成长，针对小程序业务开发中遇到的各类痛点问题提出了解决方案，并在集团内部建设了完善的小程序跨端开发生态。目前，Mpx 已经覆盖支持了集团内部全量小程序业务开发，成为了集团小程序开发的统一技术标准。</p> <p>随着小程序业务的发展演进，性能和包体积的重要性愈发凸显，Mpx从设计之初就非常重视性能和包体积的优化，本次的 <strong>Mpx2.9</strong> 版本更新带来的三大核心特性——原子类、SSR 和包体积优化也都与性能和包体积息息相关，下面我们逐个展开介绍。</p> <h2 id="原子类支持"><a href="#原子类支持" class="header-anchor">#</a> 原子类支持</h2> <p>原子类(utility-first CSS)是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，比较知名的有 <a href="https://github.com/" target="_blank" rel="noopener noreferrer">Github<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<a href="https://openai.com/" target="_blank" rel="noopener noreferrer">OpenAI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<a href="https://top10.netflix.com/" target="_blank" rel="noopener noreferrer">Netflix<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://www.jpl.nasa.gov/" target="_blank" rel="noopener noreferrer">NASA官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等。使用原子类离不开原子类框架的支持，常用的原子类框架有 <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwindcss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://windicss.org/" target="_blank" rel="noopener noreferrer">Windicss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://unocss.dev/" target="_blank" rel="noopener noreferrer">Unocss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等。</p> <p>在 Mpx2.9 版本中，我们在框架中内置了原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx 页面/组件模板中直接使用一些预定义的基础样式类，诸如 flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：</p> <div class="language-html extra-class"><pre class="language-html"><code>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-base text-black font-semibold mb-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+          Erin Lindford
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-gray-500 font-medium pb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+          Product Engineer
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+          Message
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/Or3aaN-mmxV8pK-LmEVPm_demo.png" alt="utility-css-demo"></p> <p>相较于传统的自定义类编写样式的方式，使用原子类能给你带来以下这些好处：</p> <ul><li><strong>不用再烦恼于为自定义类取类名</strong>，传统样式开发中，我们仅仅是为某个元素定义样式就需要绞尽脑汁发明一些抽象的类名，还得提防类名冲突，使用原子类可以完全将你从这种琐碎无趣的工作中解放；</li> <li><strong>停止 css 体积的无序增长</strong>，传统样式开发中，css 体积会随着你的迭代不断增长，而在原子类中，一切样式都可以复用，你几乎不需要编写新的 css；</li> <li><strong>让调整样式变得更加安全</strong>，传统 css 是全局的，当你修改某个样式时无法保障其不会破坏其他地方的样式，而你在模板中使用的原子类是本地的，你完全不用担心修改它会影响其他地方。</li></ul> <p>而相较于使用内联样式，原子类也有一些重要的优势：</p> <ul><li><strong>约束下的设计</strong>，使用内联样式时，里面的每一个数值都是魔法数字（magic number）
+，而通过原子工具类，你可以选择一些符合预定义设计规范的样式，便于构筑具有视觉一致性的UI；</li> <li><strong>响应式设计</strong>，你无法在内联样式中使用媒体查询，然而通过原子类框架中提供的响应式工具，你可以轻而易举地构建出响应式界面；</li> <li><strong>Hover、focus 和其他状态</strong>，使用内联样式无法定义特定状态下的样式，如 hover 和 focus，通过原子类框架的状态变量能力，我们可以轻松为这些状态定义样式。</li></ul> <p>看到这里相信你已经迫不及待地想要在 Mpx 中体验原子类开发了吧，使用最新版本的 <code>@mpxjs/cli</code> 脚手架创建项目时，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用原子类，可使用的工具类可以参考 <a href="https://unocss.dev/interactive/" target="_blank" rel="noopener noreferrer">交互示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，在已有项目中开启原子类支持可以参考<a href="https://mpxjs.cn/guide/advance/utility-first-css.html#compile-config" target="_blank" rel="noopener noreferrer">配置指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="小程序原子类使用注意事项"><a href="#小程序原子类使用注意事项" class="header-anchor">#</a> 小程序原子类使用注意事项</h3> <p>小程序和 web 环境对于 css 的支持存在底层差异，小程序内也存在大量自身独有的技术特性，Mpx 在支持原子类时针对这些环境特异性进行了抹平和适配，在框架的支持下，我们实现了大部分（超过90%）原子类功能和工具类在小程序环境下正常使用，并额外支持了原子类产物的分包输出和样式隔离下的原子类使用，详情如下：</p> <h4 id="特殊字符转义"><a href="#特殊字符转义" class="header-anchor">#</a> 特殊字符转义</h4> <p>现代原子类框架支持 <code>value auto-infer</code>（值自动推导），可以在模版中根据相关规则书写灵活的自定义值原子类，如 <code>p-5px bg-[hsl(211.7,81.9%,69.6%)]</code> 等，针对原子类中出现的 <code>[</code> <code>(</code> <code>,</code> 等特殊字符，在 web 中会通过转义字符 <code>\</code> 进行转义，由于小程序环境下不支持 css 选择器中出现 <code>\</code> 转义字符，我们内置支持了一套不带 <code>\</code> 的转义规则对这些特殊字符进行转义，同时替换模版和 css 文件中的类名，内建的默认转义规则如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> escapeMap <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token string-property property">'('</span><span class="token operator">:</span> <span class="token string">'_pl_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">')'</span><span class="token operator">:</span> <span class="token string">'_pr_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">'['</span><span class="token operator">:</span> <span class="token string">'_bl_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">']'</span><span class="token operator">:</span> <span class="token string">'_br_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">'{'</span><span class="token operator">:</span> <span class="token string">'_cl_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">'}'</span><span class="token operator">:</span> <span class="token string">'_cr_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">'#'</span><span class="token operator">:</span> <span class="token string">'_h_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">'!'</span><span class="token operator">:</span> <span class="token string">'_i_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">'/'</span><span class="token operator">:</span> <span class="token string">'_s_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">'.'</span><span class="token operator">:</span> <span class="token string">'_d_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">':'</span><span class="token operator">:</span> <span class="token string">'_c_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">','</span><span class="token operator">:</span> <span class="token string">'_2c_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">'%'</span><span class="token operator">:</span> <span class="token string">'_p_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">'\''</span><span class="token operator">:</span> <span class="token string">'_q_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">'&quot;'</span><span class="token operator">:</span> <span class="token string">'_dq_'</span><span class="token punctuation">,</span>
+  <span class="token string-property property">'+'</span><span class="token operator">:</span> <span class="token string">'_a_'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">$</span><span class="token operator">:</span> <span class="token string">'_si_'</span><span class="token punctuation">,</span>
+  <span class="token comment">// unknown用于兜底不在上述范围中未知的转义字符</span>
+  <span class="token literal-property property">unknown</span><span class="token operator">:</span> <span class="token string">'_u_'</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>与此同时，用户也可以通过传递 <code>@mpxjs/unocss-plugin</code> 的 <a href="https://mpxjs.cn/api/compile.html#escapeMap" target="_blank" rel="noopener noreferrer">escapeMap<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项来覆盖内建的转义规则。</p> <h4 id="原子类分包输出"><a href="#原子类分包输出" class="header-anchor">#</a> 原子类分包输出</h4> <p>在 web 中，原子类会被全部打包输出单个样式文件，一般会放置在顶层样式表中以供全局访问，但在小程序中这种全量的输出策略并不是最优的，主要原因在于小程序中可供全局访问的主包体积存在 <strong>2M 大小限制</strong>，主包体积十分紧缺珍贵，Mpx 在构建输出时遵循着分包优先的原则，尽可能充分利用分包体积从而减少对主包体积的占用，再进行原子类产物输出时，我们也遵循了相同的原则。</p> <p>在Mpx中，我们在收集原子类时同时记录了每个原子类的引用分包，在收集结束后根据每个原子类的分包引用数量决定该原子类应该输出到主包还是分包当中，我们在 <code>@mpxjs/unocss-plugin</code> 中提供了 <a href="https://mpxjs.cn/api/compile.html#minCount" target="_blank" rel="noopener noreferrer">minCount<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项来决定分包的输出规则，该配置项的默认值为2，即当一个原子类被2个或以上分包引用时，会被作为公共原子类抽取到主包中，否则输出到所属分包中，这也是全局最优的策略。当我们想要让原子类输出产物更少地占用主包体积时，我们也可以将<code>minCount</code>值调大，让原子类抽取到主包的条件更加苛刻，不过这样也会伴随着原子类分包冗余的增加。</p> <p><code>unocss.config.js</code> 配置中定义的 <code>safelist</code> 原子类默认会输出到主包，为了组件局部使用的 <code>safelist</code> 有输出到分包的机会，我们在模版中提供了<a href="https://mpxjs.cn/api/compile.html#commentConfig" target="_blank" rel="noopener noreferrer">注释配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（comments config），灵感来源于 <code>webpack</code> 中的魔法注释（magic comments），用户可以在组件模版中通过<code>注释配置</code>声明当前组件所需的 <code>safelist</code>，对应的原子类也会根据上述的规则输出到主包或分包中，使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!-- mpx_config_safelist: 'text-red-500 bg-blue-500' --&gt;</span>
+  <span class="token comment">&lt;!-- 动态样式中可以使用text-red-500和bg-blue-500原子类 --&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{classObj}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!-- ... --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h4 id="样式隔离与组件分包异步"><a href="#样式隔离与组件分包异步" class="header-anchor">#</a> 样式隔离与组件分包异步</h4> <p>在小程序中，自定义组件的样式默认是隔离的，web 中通过全局样式访问原子类的方式不再生效，不过由于小程序提供了<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB" target="_blank" rel="noopener noreferrer">样式隔离配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，我们可以将该组件样式隔离配置调整为 <code>apply-shared</code> 来获取页面或 app 中定义的原子类，但是当我们在使用传统类名和原子类混合开发或者迁移原子类的过程中，我们往往希望保留原本自定义组件的样式隔离。</p> <p>针对这种情况，我们在 <code>@mpxjs/unocss-plugin</code> 中提供了 <a href="https://mpxjs.cn/api/compile.html#styleIsolation" target="_blank" rel="noopener noreferrer">styleIsolation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项，可选设置为 <code>isolated</code>|<code>apply-shared</code>，当设置为 <code>isolated</code> 时每个组件都会通过 <code>@import</code> 独立引用主包或者分包的原子类样式文件，因此不会受到样式隔离的影响；当设置为 <code>apply-shared</code> 时，只有 app 和分包页面会引用对应的原子类样式文件，自定义组件需要通过配置样式隔离为 <code>apply-shared</code> 使原子类生效。</p> <p>在组件分包异步的情况下对应组件即使将样式隔离配置为 <code>apply-shared</code> 的情况下，<code>@mpxjs/unocss-plugin</code> 也需要将  <code>styleIsolation</code> 设置为 <code>isolated</code> 才能正常工作，原因在于组件分包异步的情况下，组件被其他分包的页面所引用渲染，由于上述原子类样式分包输出的规则，其他分包的页面中可能并不包含当前组件所需的原子类，只有在 <code>isolated</code> 模式下由组件自身引用所需的原子类样式才能保证正常工作，类似于 <code>safelist</code>，我们也提供了<a href="https://mpxjs.cn/api/compile.html#commentConfig" target="_blank" rel="noopener noreferrer">注释配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的方式对组件的 <code>styleIsolation</code> 模式进行局部配置，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!-- mpx_config_styleIsolation: 'isolated' --&gt;</span>
+  <span class="token comment">&lt;!-- 当前组件会直接引用对应主包或分包的原子类样式 --&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>@dark:(text-white bg-dark-500)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- ... --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="原子类使用参考文档"><a href="#原子类使用参考文档" class="header-anchor">#</a> 原子类使用参考文档</h3> <p>Mpx 中使用原子类的详细参考文档如下：</p> <ul><li><a href="https://mpxjs.cn/guide/advance/utility-first-css.html" target="_blank" rel="noopener noreferrer">原子类使用指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://mpxjs.cn/api/compile.html#MpxUnocssPlugin" target="_blank" rel="noopener noreferrer">原子类 API 参考<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="输出-web-支持-ssr"><a href="#输出-web-支持-ssr" class="header-anchor">#</a> 输出 web 支持 SSR</h2> <p>近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，各类SSR框架层出不穷，未来进一步提升性能表现，在 SSR 的基础上还演进出 <a href="https://docs.astro.build/en/concepts/islands/" target="_blank" rel="noopener noreferrer">islands architecture<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://qwik.builder.io/docs/concepts/resumable/" target="_blank" rel="noopener noreferrer">0 hydration<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等更加精细复杂的理念和架构。</p> <p>近两年随着团队对于前端性能的重视，SSR/SSG 技术也在团队业务中逐步推广落地，并在首屏性能方面取得了显著的收效。但由于过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 Mpx2.9 版本中，我们对 web 输出流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整实现了 SSR 技术方案。</p> <h3 id="配置使用-ssr"><a href="#配置使用-ssr" class="header-anchor">#</a> 配置使用 SSR</h3> <p>在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。</p> <p><img src="https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85" alt="Vue SSR流程"></p> <p>Mpx SSR 实现的大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：</p> <h4 id="构建server-client-bundle"><a href="#构建server-client-bundle" class="header-anchor">#</a> 构建server/client bundle</h4> <p>SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。
+在 Vue 中，我们需要提供 <code>entry-server.js</code> 和 <code>entry-client.js</code> 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 <code>app.mpx</code> 作为统一构建入口，无需区分 server 和 client。</p> <h5 id="服务端构建配置"><a href="#服务端构建配置" class="header-anchor">#</a> 服务端构建配置</h5> <p>服务端配置中除了将 entry 制定为 <code>app.mpx</code> 及其它基础配置外，最重要的是安装 <code>vue-server-renderer</code> 包中提供的  <code>server-plugin</code> 插件，该插件能够构建产出 <code>vue-ssr-server-bundle.json</code> 文件供 <code>renderer</code> 后续消费。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.server.config.js</span>
+<span class="token keyword">const</span> VueSSRServerPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer/server-plugin'</span><span class="token punctuation">)</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 将 entry 指向项目的 app.mpx 文件</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./app.mpx'</span><span class="token punctuation">,</span>
+  <span class="token comment">// ...</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+   <span class="token comment">// 产出 `vue-ssr-server-bundle.json`</span>
+    <span class="token keyword">new</span> <span class="token class-name">VueSSRServerPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#server-config" target="_blank" rel="noopener noreferrer">Vue SSR的服务端配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="客户端构建配置"><a href="#客户端构建配置" class="header-anchor">#</a> 客户端构建配置</h5> <p>类似服务端构建配置，在客户端构建中我们需要使用 <code>vue-server-renderer</code> 包中 <code>client-plugin</code> 插件来帮助我们生成客户端环境的资源清单 <code>vue-ssr-client-manifest.json</code>，并供 <code>renderer</code> 后续消费。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.client.config.js</span>
+<span class="token keyword">const</span> VueSSRClientPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer/client-plugin'</span><span class="token punctuation">)</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 将 entry 指向项目的 app.mpx 文件</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./app.mpx'</span><span class="token punctuation">,</span>
+  <span class="token comment">// ...</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token comment">// 产出 `vue-ssr-client-manifest.json`。</span>
+    <span class="token keyword">new</span> <span class="token class-name">VueSSRClientPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#client-config" target="_blank" rel="noopener noreferrer">Vue SSR的客户端配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="准备页面模版"><a href="#准备页面模版" class="header-anchor">#</a> 准备页面模版</h4> <p>SSR 渲染中，我们创建 <code>renderer</code> 需要一个页面模板，简单的示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Hello<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--vue-ssr-outlet--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 <code>&lt;!--vue-ssr-outlet--&gt;</code>注释，标记 SSR 渲染产物的插入位置，如使用 <code>@mpxjs/cli</code> 脚手架创建 SSR 项目，该模版已经内置于脚手架中。</p> <h4 id="集成启动-ssr-服务"><a href="#集成启动-ssr-服务" class="header-anchor">#</a> 集成启动 SSR 服务</h4> <p>当我们准备好页面模版和双端构建产物后，我们就可以创建 <code>renderer</code> 并与 Node 服务进行集成，启动 SSR 服务，下面以 <code>express</code> 为例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//server.js</span>
+<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> createBundleRenderer <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer'</span><span class="token punctuation">)</span>
+<span class="token comment">// 通过 vue-server-renderer/server-plugin 生成的文件</span>
+<span class="token keyword">const</span> serverBundle <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../dist/server/vue-ssr-server-bundle.json'</span><span class="token punctuation">)</span>
+<span class="token comment">// 通过 vue-server-renderer/client-plugin 生成的文件</span>
+<span class="token keyword">const</span> clientManifest <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../dist/client/vue-ssr-client-manifest.json'</span><span class="token punctuation">)</span>
+ <span class="token comment">// 页面模版文件</span>
+<span class="token keyword">const</span> template <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token string">'../src/index.template.html'</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span>
+<span class="token comment">// 创建 renderer 渲染器</span>
+<span class="token keyword">const</span> renderer <span class="token operator">=</span> <span class="token function">createBundleRenderer</span><span class="token punctuation">(</span>serverBundle<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">runInNewContext</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+    template<span class="token punctuation">,</span>
+    clientManifest<span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// 注册启动 SSR 服务</span>
+app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> req<span class="token punctuation">.</span>url <span class="token punctuation">}</span>
+  renderer<span class="token punctuation">.</span><span class="token function">renderToString</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> html</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      res<span class="token punctuation">.</span><span class="token function">status</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'Internal Server Error'</span><span class="token punctuation">)</span>
+      <span class="token keyword">return</span>
+    <span class="token punctuation">}</span>
+    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8080</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="ssr-生命周期"><a href="#ssr-生命周期" class="header-anchor">#</a> SSR 生命周期</h3> <p>在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是<code>onAppInit</code>、<code>serverPrefetch</code> 和 <code>onSSRAppCreated</code>，以统一服务端与客户端的构建入口，下面展开介绍：</p> <h4 id="onappinit"><a href="#onappinit" class="header-anchor">#</a> onAppInit</h4> <p>在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，<code>onAppInit</code> 生命周期会在应用创建 <code>new Vue(...)</code> 前被调用，其执行的返回结果会被合并到创建应用的 <code>options</code> 中</p> <p>很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 <code>@mpxjs/pinia</code> 作为全局状态管理工具，我们可以在 <code>onAppInit</code> 中返回全新的 <code>pinia</code> 示例避免产生跨请求状态污染，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
+<span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
+
+<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token function">onAppInit</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      pinia
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="serverprefetch"><a href="#serverprefetch" class="header-anchor">#</a> serverPrefetch</h4> <p>当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：</p> <p>选项式 API：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> useStore <span class="token keyword">from</span> <span class="token string">'../store/index'</span>
+
+<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">//...</span>
+  <span class="token function">serverPrefetch</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query
+    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$pinia<span class="token punctuation">)</span>
+    <span class="token comment">// return the promise from the action, fetch data and update state</span>
+    <span class="token keyword">return</span> store<span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>组合式 API：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onServerPrefetch<span class="token punctuation">,</span> getCurrentInstance<span class="token punctuation">,</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> useStore <span class="token keyword">from</span> <span class="token string">'../store/index'</span>
+
+<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">userStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token function">onServerPrefetch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token function">getCurrentInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>proxy<span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query
+      <span class="token comment">// return the promise from the action, fetch data and update state</span>
+      <span class="token keyword">return</span> store<span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>关于数据预拉取更详细的说明可以查看<a href="https://v2.ssr.vuejs.org/guide/data.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h4 id="onssrappcreated"><a href="#onssrappcreated" class="header-anchor">#</a> onSSRAppCreated</h4> <p>在 Vue SSR 项目中，我们会在 <code>entry-server.js</code> 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 <code>app</code>。</p> <p>在 Mpx SSR 中，我们将这部分逻辑整合在 <code>onSSRAppCreated</code> 中执行，该生命周期执行时用户可以从参数中获取应用实例 <code>app</code>、路由实例 <code>router</code>、数据管理实例 <code>pinia</code> 和 SSR 上下文 <code>context</code>，在完成必要的操作后，该生命周期需要返回一个 <code>resolve(app)</code> 的 promise。</p> <p>通常我们会在 <code>onSSRAppCreated</code> 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
+<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token comment">// ...,</span>
+    <span class="token function">onSSRAppCreated</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> pinia<span class="token punctuation">,</span> router<span class="token punctuation">,</span> app<span class="token punctuation">,</span> context <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token comment">// 设置服务端路由路径</span>
+        router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
+        router<span class="token punctuation">.</span><span class="token function">onReady</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          <span class="token comment">// 应用完成渲染时执行</span>
+          context<span class="token punctuation">.</span><span class="token function-variable function">rendered</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+            <span class="token comment">// 将服务端渲染后得到的 pinia.state 同步到 context.state 中，</span>
+            <span class="token comment">// context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`</span>
+            <span class="token comment">// 注入到 HTML 中，并在客户端运行时再读取同步</span>
+            context<span class="token punctuation">.</span>state <span class="token operator">=</span> pinia<span class="token punctuation">.</span>state<span class="token punctuation">.</span>value
+          <span class="token punctuation">}</span>
+          <span class="token comment">// 返回应用程序实例</span>
+          <span class="token function">resolve</span><span class="token punctuation">(</span>app<span class="token punctuation">)</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> reject<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。</p> <h3 id="其他注意事项"><a href="#其他注意事项" class="header-anchor">#</a> 其他注意事项</h3> <ol><li><p>Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。</p></li> <li><p>在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。</p></li> <li><p>由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 <code>mpx.config.webRouteConfig</code> 将路由模式设置成 <code>history</code> 模式。</p></li></ol> <h2 id="包体积优化"><a href="#包体积优化" class="header-anchor">#</a> 包体积优化</h2> <p>近几年来随着小程序的商业成功和用户增长，各大互联网公司都在加大对小程序业务的投入，小程序的体量和复杂性都在快速增长，在这样的背景下，小程序的包体积大小成为了制约小程序业务迭代发展的一大限制，同时过大的包体积也会显著影响小程序的性能表现。</p> <p>Mpx 在设计之初就考虑了包体积问题，完整继承了 webpack 已有的代码优化能力，如公共模块抽离、tree shaking、混淆压缩等。除此之外，我们还设计开发了业内最完善的分包构建流程，完整支持基于配置声明和依赖分析的普通分包、独立分包及分包异步化的构建输出，极大地缓解了复杂小程序中的主包和总包体积过大的问题。在 Mpx2.9 版本中，我们针对复杂小程序页面组件和 JS 模块众多的特点，对构建产物进行了针对性地优化，进一步降低了构建产物体积，主要优化项如下：</p> <h3 id="模版代码优化"><a href="#模版代码优化" class="header-anchor">#</a> 模版代码优化</h3> <p>Mpx 通过 webpack 进行打包构建，并对小程序原生 commonjs 支持进行适配改造，以实现 webpack 构建产物在小程序环境下运行，为了将构建产物中的模块和 chunk 链接到一起，webpack 和 mpx 会在构建产物生成一些模版代码进行相关工作，下面是一个页面 js 中包含的模版代码示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> self <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+self<span class="token punctuation">.</span>webpackChunkmpx_test_2_8 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../bundle.js'</span><span class="token punctuation">)</span>
+<span class="token punctuation">(</span>self<span class="token punctuation">.</span>webpackChunkmpx_test_2_8 <span class="token operator">=</span> self<span class="token punctuation">.</span>webpackChunkmpx_test_2_8 <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">405</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token number">1307</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> e<span class="token punctuation">,</span> o</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token number">4236</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">var</span> e
+  e <span class="token operator">=</span> <span class="token number">1307</span><span class="token punctuation">,</span> <span class="token function">t</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span>s <span class="token operator">=</span> e<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+</code></pre></div><p>可以看出模版代码主要由 chunk 链接代码，chunk id，模块 id 和模块包装函数组成，对于中小项目来说，这些模版代码一般不会占用太多体积，但是在复杂大体量小程序中众多模块的叠加效应下，这部分体积就变得不可忽视。</p> <p>我们对模版代码的生成逻辑和生成产物进行分析，发现 webpack 生产模式的默认配置中，很多配置项并不是体积最优的选项，一个典型的例子在于模块/chunk id：为了保障生成产物的内容稳定，来尽可能提升浏览器的缓存利用率，webpack 默认的模块/chunk id 采用 <code>deterministic</code> 模式进行生成，该模式下模块 id 为模块源路径的定长数字 hash，比项目模块总数长 1 位。由于在小程序中代码包按照版本的维度进行全量管理，保证文件局部的内容稳定在小程序环境下无正向意义，这就有了优化空间，我们可以简单将模块/chunk id 的生成逻辑改为数字自增，在主小程序中就能节省出上百 KB 总包体积。</p> <p>类似的可优化点还存在于 chunk 链接代码和模块包装函数当中，我们在 <code>@mpxjs/webpack-plugin@2.9</code> 版本中提供了一个新的配置项 <a href="https://mpxjs.cn/api/compile.html#optimizesize" target="_blank" rel="noopener noreferrer">optimizeSize<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，其中整合了一系列模版代码体积优化配置，开启后就能自动优化构建产物中的模版代码体积，在实际业务中，我们开启 <code>optimizeSize</code> 后可以减少总包体积约 <strong>1.6%</strong>，效果非常显著，下面是上述示例在开启 <code>optimizeSize</code> 后的产物对比：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> g <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+g<span class="token punctuation">.</span>c <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../bundle.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>g<span class="token punctuation">.</span>c <span class="token operator">=</span> g<span class="token punctuation">.</span>c <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token number">448</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> e<span class="token punctuation">,</span> o</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token number">463</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span>
+  <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">var</span> e
+  e <span class="token operator">=</span> <span class="token number">448</span><span class="token punctuation">,</span> <span class="token function">t</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span>s <span class="token operator">=</span> e<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="空模块移除"><a href="#空模块移除" class="header-anchor">#</a> 空模块移除</h3> <p>Mpx 在处理 <code>.mpx</code> 单文件时会将其分拆为 <code>template/js/style/json</code> 四个新模块来进行分别处理，其中 <code>template/style/json</code> 部分的内容会在处理后通过内置的 <code>extractor</code> 抽取输出为静态文件，抽取之后原本分拆出来的模块就会以空模块的形式残留在构建产物中（template 模块在抽取后还需要保留 render 函数和 refs 等信息所以不会成为空模块），如下所示：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/***/</span> <span class="token number">533</span><span class="token operator">:</span>
+<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">__unused_webpack_module<span class="token punctuation">,</span> __unused_webpack_exports<span class="token punctuation">,</span> __webpack_require__</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+<span class="token comment">// ...</span>
+<span class="token comment">/* template */</span>
+<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">535</span><span class="token punctuation">)</span>
+<span class="token comment">/* styles */</span>
+<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">536</span><span class="token punctuation">)</span>
+<span class="token comment">/* json */</span>
+<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">537</span><span class="token punctuation">)</span>
+<span class="token comment">/* script */</span>
+<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">534</span><span class="token punctuation">)</span>
+<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+<span class="token comment">/***/</span> <span class="token number">536</span><span class="token operator">:</span>
+<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+<span class="token comment">/***/</span> <span class="token number">537</span><span class="token operator">:</span>
+<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>从上面示例中可以看出 <code>536/537</code> 模块的定义和引用都是完全不必要的，但由于 webpack 本身对于空模块没有进行识别和优化的手段，在过去的版本中这些空模块代码会占用我们一部分总包体积。在 Mpx2.9 版本中，我们定义了全新的依赖类型 <code>CommonjsExtractDependency</code> 对于这类可能被抽取成为空模块的 <code>request</code> 进行识别处理，当模块内容在完成抽取后为空时，自动将其从模块图中移除，并在产物生成时不再生成其引用代码。该项优化措施内置开启，升级后自动生效，在实际业务中可减少总包体积约 <strong>0.7%</strong>。</p> <h3 id="render函数优化"><a href="#render函数优化" class="header-anchor">#</a> Render函数优化</h3> <p>Render 函数是 Mpx 运行时 <code>setData</code> 优化的一项核心设计，我们在模版编译时将用户模版转换为简易的 render 函数，该函数执行时能够完全模拟视图渲染的数据访问过程，正确地收集当前视图的数据依赖，避免将视图不需要的数据通过 <code>setData</code> 发送到视图中。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/ZQ6p8Rs2m7QCumOll3nmd.jpg" alt="render函数"></p> <p>虽然我们生成的简化版 render 函数仅保留了数据访问逻辑，在代码体积上并不算大，但是仍然存在着一定的优化空间，我们来看下面这个例子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>a
+  <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">)</span><span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>a
+    <span class="token keyword">this</span><span class="token punctuation">.</span>b
+    <span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">.</span>a
+    <span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">.</span>b
+    <span class="token keyword">this</span><span class="token punctuation">.</span>d
+  <span class="token punctuation">}</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>b
+<span class="token punctuation">}</span>
+</code></pre></div><p>可以看出 <code>if block</code> 下存在着大量冗余不必要的数据访问，例如 <code>this.a</code> 和 <code>this.b</code> 在父级 <code>block</code> 中已经进行过访问，<code>this.c.a</code> 和 <code>this.c.b</code> 由于在 <code>if condition</code> 中进行过 <code>this.c</code> 的访问也不再必要（render函数执行时会对模版依赖数据进行深度diff，父路径访问后子路径就无需再进行访问），上述 render 函数可以优化为：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>a
+  <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">)</span><span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>d
+  <span class="token punctuation">}</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>b
+<span class="token punctuation">}</span>
+</code></pre></div><p>在 Mpx2.9 版本中，我们通过两轮 <code>ast</code> 遍历（<code>2 pass ast travese</code>）的方式实现了这个优化，在第一轮遍历中，我们收集了数据访问信息并按照 <code>block</code> 结构存储在 <code>blockVisitTree</code> 中，第二轮遍历时依据 <code>blockVisitTree</code> 中的信息对不必要的数据访问进行剪枝优化。</p> <p>除此之外，我们也大幅优化了 render 函数中的数据收集代码，有效地降低了 render 函数的体积占用。</p> <p>该优化目前没有默认开启，可以通过 <code>@mpxjs/webpack-plugin</code> 中的 <a href="https://mpxjs.cn/api/compile.html#optimizerenderrules" target="_blank" rel="noopener noreferrer">optimizeRenderRules<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项配置生效范围进行开启，全量开启后在实际业务中可节省总包体积约 <strong>5%</strong>。</p> <h2 id="未来规划"><a href="#未来规划" class="header-anchor">#</a> 未来规划</h2> <p>在未来，我们对 Mpx 构建产物还有进一步的优化方案可以探索实施，主要分为两个方向：</p> <ul><li>编译注入代码优化，在功能不变的情况下简化编译注入的代码，对于 render 函数也有一种运行时有损的方案（略微增大运行时开销）可以尝试</li> <li>模版和JSON压缩，对模版和JSON中的组件名及组件路径进行短哈希压缩，缺点是丢失dist产物的可读性，可能需要对其提供 sourceMap 支持</li></ul> <p>除此之外，我们近期的框架升级计划还包括：</p> <ul><li>局部运行时渲染增强</li> <li>数据响应升级为 proxy 实现，输出 web 升级为 vue3</li> <li>支付宝 2.0 基础库适配优化</li> <li>微信 skyline 适配优化</li> <li>输出 Hummer 能力完善</li></ul> <p>在构建提速方面，我们也会在以下方向进行探索：</p> <ul><li>输出 web 支持 vite 构建</li> <li>基于模块联邦的分布式构建</li> <li>基于 Rust 的高性能构建探索</li></ul> <p>最后，特别感谢@<a href="https://github.com/pagnkelly" target="_blank" rel="noopener noreferrer">pagnkelly<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、@<a href="https://github.com/yandadaFreedom" target="_blank" rel="noopener noreferrer">yandadaFreedom<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>和
+@<a href="https://github.com/zhuzhh" target="_blank" rel="noopener noreferrer">zhuzhh<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>对于 2.9 版本功能开发的突出贡献，也欢迎大家使用 Mpx 进行小程序跨端开发并加入社区共建。</p> <p>Github：https://github.com/didi/mpx</p> <p>官网/文档：https://mpxjs.cn/</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/articles/2.8-release.html" class="prev">
+        Mpx2.8 版本正式发布，使用组合式 API 开发小程序
+      </a></span> <span class="next"><a href="/articles/mpx-cube-ui.html">
+        小程序跨端组件库 Mpx-cube-ui 开源啦
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/53.7207ffc5.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/index.html b/docs-vuepress/.vuepress/dist/articles/index.html
new file mode 100644
index 0000000000..091d29837f
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx框架相关文章 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/54.af3d3dcd.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx框架相关文章"><a href="#mpx框架相关文章" class="header-anchor">#</a> Mpx框架相关文章</h1> <ul><li><a href="/articles/1.0.html">滴滴开源小程序框架Mpx</a></li> <li><a href="/articles/2.0.html">Mpx发布2.0，完美支持跨平台开发</a></li> <li><a href="/articles/performance.html">小程序框架运行时性能大测评</a></li> <li><a href="/articles/mpx1.html">Mpx框架初体验</a></li> <li><a href="/articles/mpx2.html">Mpx框架技术揭秘</a></li> <li><a href="/articles/size-control.html">基于Mpx框架做体积优化</a></li> <li><a href="/articles/ts-derivation.html">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li> <li><a href="/articles/2.7-release.html">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li> <li><a href="/articles/2.8-release.html">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li> <li><a href="/articles/mpx-cli-next.html">Mpx-cli 插件化改造</a></li> <li><a href="/articles/unit-test.html">Mpx 小程序单元测试能力建设与实践</a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/54.af3d3dcd.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/mpx-cli-next.html b/docs-vuepress/.vuepress/dist/articles/mpx-cli-next.html
new file mode 100644
index 0000000000..0d3e732cba
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/mpx-cli-next.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>@mpxjs/cli 插件化改造 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/55.2d6ae2e1.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" aria-current="page" class="active sidebar-link">Mpx-cli 插件化改造</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx-cli-next.html#背景-现状" class="sidebar-link">背景 &amp; 现状</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cli-next.html#mpxjs-cli-2-x-自身的痛点" class="sidebar-link">mpxjs/cli@2.x 自身的痛点</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cli-next.html#插件化改造方案" class="sidebar-link">插件化改造方案</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cli-next.html#没有银弹" class="sidebar-link">没有银弹</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cli-next.html#如何开发一个基于-mpx-的业务脚手架插件" class="sidebar-link">如何开发一个基于 mpx 的业务脚手架插件</a></li></ul></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpxjs-cli-插件化改造"><a href="#mpxjs-cli-插件化改造" class="header-anchor">#</a> @mpxjs/cli 插件化改造</h1> <p><a href="https://github.com/mpx-ecology/mpx-cli" target="_blank" rel="noopener noreferrer">@mxpjs/cli 地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="背景-现状"><a href="#背景-现状" class="header-anchor">#</a> 背景 &amp; 现状</h2> <p>Mpx 脚手架 <code>@mpxjs/cli</code> 作为 Mpx 生态当中比较重要的一部分，是使用 Mpx 进行小程序开发的入口。</p> <p><code>@mpxjs/cli@2.x</code> 版本整体是基于模板配置的方式完成项目的初始化，整个的工作流是：</p> <ol><li><p>下载一份存放于远端的 mpx 项目原始模板（mpx-template）</p></li> <li><p>根据用户的 prompts 选项完成用户选项的注入，并初始化最终的项目文件</p></li></ol> <p>完成项目的初始化后，除了一些基础配置文件外，整个项目的文件主要包含了如下的结构：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">--</span> mpx<span class="token operator">-</span>project
+ <span class="token operator">|</span><span class="token operator">--</span> src <span class="token comment">// 项目源码</span>
+ <span class="token operator">|</span><span class="token operator">--</span> config <span class="token comment">// 项目配置文件</span>
+   <span class="token operator">|</span><span class="token operator">--</span> index<span class="token punctuation">.</span>js <span class="token comment">// 配置入口文件</span>
+   <span class="token operator">|</span><span class="token operator">--</span> mpxLoader<span class="token punctuation">.</span>conf<span class="token punctuation">.</span>js <span class="token comment">// mpx-loader 配置</span>
+   <span class="token operator">|</span><span class="token operator">--</span> mpxPlugin<span class="token punctuation">.</span>conf<span class="token punctuation">.</span>js <span class="token comment">// mpx webpack-plugin 配置</span>
+   <span class="token operator">|</span><span class="token operator">--</span> user<span class="token punctuation">.</span>conf<span class="token punctuation">.</span>js <span class="token comment">// 用户的 prompts 选择信息</span>
+ <span class="token operator">|</span><span class="token operator">--</span> build <span class="token comment">// 编译构建配置</span>
+   <span class="token operator">|</span><span class="token operator">--</span> build<span class="token punctuation">.</span>js <span class="token comment">// 构建编译脚本</span>
+   <span class="token operator">|</span><span class="token operator">--</span> getPlugins<span class="token punctuation">.</span>js <span class="token comment">// webpack plugins </span>
+   <span class="token operator">|</span><span class="token operator">--</span> getRules<span class="token punctuation">.</span>js <span class="token comment">// webpack module rules</span>
+   <span class="token operator">|</span><span class="token operator">--</span> getWebpackConf<span class="token punctuation">.</span>js <span class="token comment">// webpack 配置生成辅助函数</span>
+   <span class="token operator">|</span><span class="token operator">--</span> utils<span class="token punctuation">.</span>js <span class="token comment">// 工具函数</span>
+   <span class="token operator">|</span><span class="token operator">--</span> webpack<span class="token punctuation">.</span>base<span class="token punctuation">.</span>conf<span class="token punctuation">.</span>js <span class="token comment">// webpack 基础配置</span>
+</code></pre></div><p>在初始化的项目当中，有关项目的所有配置文件，编译构建代码是全部暴露给开发者的，开发者可以对这些文件进行修改来满足自己实际的项目开发需要。同时还可以基于这一套原始的模板文件二次拓展为满足自己业务场景的模板。</p> <p><strong>基于远程模板初始化项目的方式最大的一个好处就是将项目所有的底层配置完全暴露给开发者，开发者可以任意去修改对应的配置。</strong></p> <h2 id="mpxjs-cli-2-x-自身的痛点"><a href="#mpxjs-cli-2-x-自身的痛点" class="header-anchor">#</a> <code>mpxjs/cli@2.x</code> 自身的痛点</h2> <p>目前 <code>@mpxjs/cli@2.x</code> 采用这种基于模板的方式面临着两方面的痛点：</p> <ol><li>对于 <code>@mpxjs/cli</code> 的使用者而言：</li></ol> <ul><li><p>模板和业务项目割裂：远程模板没有严格的版本控制，用户无法感知到远程模板的更新变化；</p></li> <li><p>项目升级困难：对于用户来说没有一个很好的方式完成升级工作，基本只能通过 copy 代码的方式，将 <code>mpx-template</code> 更新后的内容复制一份到自己的项目当中；或者是通过脚手架重新创建一个新的项目，将老的代码迁移到新项目当中；</p></li> <li><p>项目结构臃肿：从项目结构角度来说没法做到按需，初始化代码臃肿。Mpx 支持了小程序跨平台、跨端、小程序插件等等相关的开发，不同的编译构建配置都需要全部生成，在运行时阶段才能决定是否启动对应的功能；</p></li> <li><p>跨 Web 构建能力弱：在基于 Mpx 的跨 Web 场景构建中有关 <code>web</code> 侧的编译构建的配置是比较初级的，像 <code>MPA 多页应用</code> 等比较常用的功能是需要用户重新去手动搭建一套的；</p></li> <li><p>可拓展性差，基于目前的模板拉取的方式无法满足多样化的业务需求场景迭代；</p></li></ul> <ol start="2"><li>对于 <code>@mpxjs/cli</code> 的开发者而言：</li></ol> <ul><li>分支场景多，功能模块耦合度高：脚手架的所有功能全部集合到一个大的模板当中。各部分的能力都是耦合在一起，为了满足不同项目的实际开发需要，代码里面需要写比较多的 <code>if...else...</code> 判断逻辑来决定要开启哪些功能，生成哪部分的模板；</li> <li>长期可维护性差，开发心智负担重；</li></ul> <p><strong>针对以上问题，通过调研业内一些优秀的脚手架工具，发现 <code>@vue/cli</code> 插件化的架构设计能很好的去解决我们以上所遇到的问题。核心思路是将 <code>@vue/cli</code> 作为 <code>@mpxjs/cli</code> 底层的引擎，收敛 Mpx 对于核心依赖管理、模板、构建配置的能力，充分利用 <code>@vue/cli</code> 提供的插件机制去构建、拓展上层的插件集。</strong></p> <h3 id="有关-vue-cli"><a href="#有关-vue-cli" class="header-anchor">#</a> 有关 <code>@vue/cli</code></h3> <p>简单介绍下 <code>@vue/cli</code> 的插件化架构：</p> <p><code>@vue/cli@3.x</code> 相较于 <code>2.x</code> 版本相比，整个 <code>@vue/cli</code> 的架构发生了非常大的变化，从基于模板的脚手架迭代为基于插件化的脚手架。简单的概述下整个插件化的构架就是：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/zfUXzzdOptIviAJ15AgSn_cli-3.png" alt="mpx-cli-3"></p> <ul><li><p>@vue/cli 提供 vue cli 命令，负责偏好设置，生成模板、<code>vue-cli-plugin</code> 插件依赖管理的工作，例如 <code>vue create &lt;projectName&gt;</code>、<code>vue add &lt;pluginName&gt;</code>；</p></li> <li><p>@vue/cli-service 作为 @vue/cli 整个插件系统当中的内部核心插件，提供了 npm script 注册服务，内置了部分 webpack 配置的同时，又提供了 <code>vue-cli-plugin</code> 插件的导入、加载以及 webpack 配置更新服务等。</p></li></ul> <p>以上是 <code>@vue/cli</code> 生态当中最为核心的两部分内容，二者分工明确，各司其职。</p> <p>此外在 <code>@vue/cli</code> 生态当中非常重要的一个点就是 <code>vue-cli-plugin</code> 插件，每个插件主要完成模板生成及生产编译构建配置。根据 <code>@vue/cli</code> 设计的规范，开发一个 <code>vue-cli-plugin</code> 需要遵照<strong>相关的约定</strong>来进行开发：</p> <ul><li><p>@vue/cli <strong>约定</strong>插件如果要生成模板，那么需要提供 <code>generator</code> 入口文件；</p></li> <li><p>@vue/cli-service <strong>约定</strong>插件的 <code>webpack</code> 配置更新需要放到插件的入口文件当中来完成，同时插件的命名也需要包含 <code>vue-cli-plugin</code> 前缀，因为 @vue/cli-service 是依据命名来加载相关的插件的；</p></li></ul> <h2 id="插件化改造方案"><a href="#插件化改造方案" class="header-anchor">#</a> 插件化改造方案</h2> <p>一张图了解下插件化改造之后的 <code>@mpxjs/cli</code> 的架构设计：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/hNaL_GUMzUVLOsyY5quGE_cli-2.png" alt="mpx-cli-2"></p> <h3 id="底层能力"><a href="#底层能力" class="header-anchor">#</a> 底层能力</h3> <p>将 <code>@vue/cli</code>、<code>@vue/cli-service</code> 分别作为 <code>@mpx/cli</code>和 <code>@mpx/cli-service</code> 的底层能力，即利用插件化的架构设计，同时还非常灵活的满足了 Mpx 做差异化场景迭代的定制化改造。上层的插件满足 <code>vue-cli-plugin</code> 插件开发的规范，最终底层的能力还是依托于 <code>@vue/cli</code> 和 <code>@vue/cli-service</code> 进行工作。</p> <h3 id="上层插件拆分"><a href="#上层插件拆分" class="header-anchor">#</a> 上层插件拆分</h3> <p>将原本大而全的模板进行插件化拆分，从 Mpx 所要解决的问题以及设计思路来考虑，站在跨平台的角度：</p> <ol><li>web 开发</li></ol> <ul><li>基于 <code>wx</code> 的跨 <code>web</code> 开发；</li></ul> <ol start="2"><li>小程序开发</li></ol> <ul><li>基于 <code>wx</code> 的跨平台(<code>ali</code>、<code>swan</code>，<code>tt</code>，<code>dd</code>)的小程序开发；</li> <li>使用云函数的微信小程序开发；</li> <li>微信小程序的插件模式的开发；</li></ul> <p>一个项目可能只需要某一种开发模式，例如仅仅是微信小程序的插件模式开发，也有可能是小程序和web平台混合开发等等，不同的开发模式对应了：</p> <ol><li><p><strong>不同的目录结构</strong>；</p></li> <li><p><strong>不同的编译构建配置</strong></p></li></ol> <hr> <p>基于这样一种现状以及 <code>@mpxjs/cli</code> 所要解决的问题，从跨平台的角度出发将功能进行了拆分，最终拆解为如下的9个插件：</p> <ul><li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（mpx 基础开发插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-mp" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-mp<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（mpx 小程序平台开发插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-web" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-web<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（mpx 跨 web 平台开发插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-cloud-func" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-cloud-func<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（微信小程序云函数开发插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-plugin-mode" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-plugin-mode<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（微信小程序插件模式开发插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-eslint" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-eslint<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（mpx eslint 插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-unit-test" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-unit-test<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（小程序单元测试插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-typescript" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-typescript<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（mpx typescript 插件）</p></li></ul> <p>这些拆解出来的插件都将和功能相关的<strong>项目模板</strong>以及<strong>编译构建</strong>配置进行了收敛。</p> <p>项目模板的生成不用说，借助 <code>@vue/cli</code> 的 <code>Generator API</code> 按需去生成项目开发所需要的模板，例如项目需要使用 <code>eslint</code> 的功能，那么在生成项目的时候会生成对应 <code>vue-cli-plugin-mpx-eslint</code> 所提供的模板文件，如果不需要使用，项目当中最终也不会出现和 <code>eslint</code> 相关的文件配置。</p> <p>重点说下编译构建的配置是如何进行拆解的：</p> <p><strong>在 <code>@vue/cli@3.x</code> 基于插件的架构设计当中，决定是否要使用某个插件的依据就是判断这个插件是否被你的项目所安装</strong>和基于模板的构架相比最大的区别就是：基于模板的架构在最终生成的模板配置里需要保存一些环境配置文件，以供编译构建的运行时来判断是否启用某些功能。但是基于插件的架构基本上是不再需要这些环境配置文件的，因为你如果要使用一个插件的功能，只需要安装它即可。</p> <p>因此依照这样的设计规范，我们将：</p> <ul><li><p><code>eslint</code></p></li> <li><p><code>unit-test</code></p></li> <li><p><code>typescript</code></p></li></ul> <p>这些非常独立的功能都单独抽离成了可拔插的插件，安装即启用。</p> <p>以上功能有个特点就是和平台是完全解耦的，所以在拆解的过程中可以拆的比较彻底。但是由于 <code>mpx</code> 项目的特殊性，即要支持基于 <code>wx</code> 小程序的跨端以及 <code>web</code> 开发，同时还要支持小程序的云函数、小程序插件模式的开发，且不同开发模式的编译构建配置都有些差异。可以用如下的集合图来表示他们之间的关系：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/3bgI4GSZ09ai4G1C3TDtr_cli-4.png" alt="mpx-cli-4"></p> <p>不同插件进行组合使用来满足不同场景下的使用。</p> <p>在不同平台开发模式下是有 <code>mpx</code> 编译构建的基础配置的，这个是和平台没有太多关系，因此将这部分的配置单独抽离为一个插件：<code>vue-cli-plugin-mpx</code>，<strong>同时这个插件也被置为了 <code>@mpxjs/cli</code> 的 <code>preset</code> 预设插件，不管任何项目开发模式下，这个插件都会被默认的安装</strong>。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue-cli-plugin-mpx</span>
+module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">api<span class="token punctuation">,</span> options<span class="token punctuation">,</span> webpackConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  webpackConfig<span class="token punctuation">.</span>module
+    <span class="token punctuation">.</span><span class="token function">rule</span><span class="token punctuation">(</span><span class="token string">'json'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.json$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">resourceQuery</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">asScript</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string">'javascript/auto'</span><span class="token punctuation">)</span>
+
+  webpackConfig<span class="token punctuation">.</span>module
+    <span class="token punctuation">.</span><span class="token function">rule</span><span class="token punctuation">(</span><span class="token string">'wxs-pre-loader'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(wxs|qs|sjs|filter\.js)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">pre</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token string">'mpx-wxs-pre-loader'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">loader</span><span class="token punctuation">(</span>MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxsPreLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>loader<span class="token punctuation">)</span>
+
+  <span class="token keyword">const</span> transpileDepRegex <span class="token operator">=</span> <span class="token function">genTranspileDepRegex</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span>transpileDependencies <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  webpackConfig<span class="token punctuation">.</span>module
+    <span class="token punctuation">.</span><span class="token function">rule</span><span class="token punctuation">(</span><span class="token string">'js'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span>include
+    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">filepath</span> <span class="token operator">=&gt;</span> transpileDepRegex <span class="token operator">&amp;&amp;</span> transpileDepRegex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>filepath<span class="token punctuation">)</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">filepath</span> <span class="token operator">=&gt;</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.mpx\.js</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>filepath<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 处理 mpx 转 web 的情况，vue-loader 会将 script block fake 出一个 .mpx.js 路径，用以 loader 的匹配</span>
+    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/@mpxjs'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token string">'babel-loader'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">loader</span><span class="token punctuation">(</span><span class="token string">'babel-loader'</span><span class="token punctuation">)</span>
+
+  <span class="token keyword">const</span> transpileDepRegex <span class="token operator">=</span> <span class="token function">genTranspileDepRegex</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span>transpileDependencies<span class="token punctuation">)</span>
+  webpackConfig<span class="token punctuation">.</span>module
+    <span class="token punctuation">.</span><span class="token function">rule</span><span class="token punctuation">(</span><span class="token string">'js'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span>include
+      <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">filepath</span> <span class="token operator">=&gt;</span> transpileDepRegex <span class="token operator">&amp;&amp;</span> transpileDepRegex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>filepath<span class="token punctuation">)</span><span class="token punctuation">)</span>
+      <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+      <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/@mpxjs'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+      <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+        <span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token string">'babel-loader'</span><span class="token punctuation">)</span>
+      <span class="token punctuation">.</span><span class="token function">loader</span><span class="token punctuation">(</span><span class="token string">'babel-loader'</span><span class="token punctuation">)</span>
+
+  webpackConfig<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>extensions
+    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'.mpx'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'.wxml'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'.ts'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'.js'</span><span class="token punctuation">)</span>
+
+  webpackConfig<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>modules<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'node_modules'</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>在小程序的开发模式下，<code>vue-cli-plugin-mpx-mp</code> 会在 <code>vue-cli-plugin-mpx</code> 的基础上去拓展 <code>webpack</code> 配置以满足小程序的编译构建。</p> <p>在跨 web 的开发模式下，<code>vue-cli-plugin-mpx-web</code> 会在 <code>vue-cli-plugin-mpx</code> 和 <code>@vue/cli</code> 的基础上去拓展配置以满足 web 侧的开发编译构建。</p> <h3 id="web-平台编译构建能力增强"><a href="#web-平台编译构建能力增强" class="header-anchor">#</a> Web 平台编译构建能力增强</h3> <p>在 <code>@mpxjs/cli@2.x</code> 版本当中有关 <code>web</code> 侧的编译构建的配置是比较初级的，像 <code>热更新</code>、<code>MPA 多页应用</code> 等比较常用的功能是需要用户重新去手动搭建一套的。而 <code>@vue/cli@3.x</code> 即为 <code>vue</code> 项目而生，提供了非常完备的 <code>web</code> 应用的编译构建打包配置。</p> <p><strong>所以 <code>@mpxjs/cli@next</code> 版本里面做了一项非常重要的工作就是复用 <code>@vue/cli</code> 的能力，弥补 <code>mpx</code> 项目在跨 <code>web</code> 项目编译构建的不足。</strong></p> <p>因此关于 <code>mpx</code> 跨 <code>web</code> 编译构建的部分也单独抽离为一个插件：<code>vue-cli-plugin-mpx-web</code>，这个插件所做的工作就是在 <code>@vue/cli</code> 提供的 <code>web</code> 编译构建的能力上去适配 <code>mpx</code> 项目。这样也就完成了 <code>mpx</code> 跨 <code>web</code> 项目编译构建能力的增强。</p> <p><strong>这也意味着 <code>@vue/cli</code> 所提供的能力基本上在 mpx 跨 web 项目当中都可使用。</strong></p> <h3 id="项目配置拓展能力"><a href="#项目配置拓展能力" class="header-anchor">#</a> 项目配置拓展能力</h3> <p>在 <code>@mpxjs/cli@2.x</code> 版本的项目如果要进行配置拓展，基本需要进行以下2个步骤：</p> <ol><li><p>对 <code>config</code> 文件夹下的相关的配置文件进行修改；</p></li> <li><p>对 <code>build</code> 文件夹下的编译构建配置文件进行修改；</p></li></ol> <p>这也是在文章一开始的时候就提到的基于模板的大而全的文件组织方式。</p> <p>而在 <code>@mpxjs/cli@next</code> 版本当中，将项目的配置拓展全部收敛至 <code>vue.config.js</code> 文件当中去完成，同时减少了开发者需要了解项目结构的心智负担。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token comment">// mpx-plugin 相关的配置</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token comment">// mpx-loader 相关的配置</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 自定义的 webpack 配置</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="改造后的目录结构"><a href="#改造后的目录结构" class="header-anchor">#</a> 改造后的目录结构</h3> <p>在第一章节展示了目前 <code>@mpxjs/cli@2.x</code> 初始化项目的结构和现状。经过这次的插件化的改造后，项目的结构变得更为简洁，开发者只需要关注 <code>src</code> 源码目录以及 <code>vue.config.js</code> 配置文件即可：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">--</span> mpx<span class="token operator">-</span>project
+ <span class="token operator">|</span><span class="token operator">--</span>src
+ <span class="token operator">|</span><span class="token operator">--</span>vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>js 
+</code></pre></div><h2 id="没有银弹"><a href="#没有银弹" class="header-anchor">#</a> 没有银弹</h2> <p>虽然基于 <code>@vue/cli</code> 插件的架构模式完成了 <code>@mpxjs/cli@3.x</code> 的插件化改造升级。但是由于 <code>mpx</code> 项目开发的一些特殊性，不同插件之间的协同工作是有一些约定的。</p> <p>例如 <code>@vue/cli-service</code> 内置了一些 <code>webpack</code> 的配置，因为 <code>@vue/cli</code> 是专门针对 <code>web</code>应用的，这些配置会在所有的编译构建流程当中生效，不过这些配置当中有些对于小程序的开发来说是不需要的。</p> <p>那么针对这种情况，为了避免不同模式下的 <code>webpack</code> 配置相互污染。<code>web</code> 侧的编译构建还是基于 <code>@vue/cli</code> 提供的能力去适配 <code>mpx</code> 的 <code>web</code> 开发。而小程序侧的编译构建配置是通过 <code>@vue/cli-service</code> 内部暴露出来的一些方法去跳过一些对于小程序开发来说不需要的 <code>webpack</code> 配置来最终满足小程序的构建配置。</p> <p>因此在各插件的开发当中，需要暴露该插件所应用的平台：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>export<span class="token punctuation">.</span>platform <span class="token operator">=</span> <span class="token string">'mp'</span>  <span class="token comment">// 可选值： 'web'</span>
+</code></pre></div><p>这样在实际的构建过程当中通过平台的标识来决定对应哪些插件会生效。</p> <h2 id="如何开发一个基于-mpx-的业务脚手架插件"><a href="#如何开发一个基于-mpx-的业务脚手架插件" class="header-anchor">#</a> 如何开发一个基于 mpx 的业务脚手架插件</h2> <p>具体参阅<a href="https://github.com/mpx-ecology/mpx-cli/blob/master/PLUGIN_GUIDE.md" target="_blank" rel="noopener noreferrer">文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/articles/mpx-cube-ui.html" class="prev">
+        小程序跨端组件库 Mpx-cube-ui 开源啦
+      </a></span> <span class="next"><a href="/articles/unit-test.html">
+        Mpx 小程序单元测试能力建设与实践
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/55.2d6ae2e1.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/mpx-cube-ui.html b/docs-vuepress/.vuepress/dist/articles/mpx-cube-ui.html
new file mode 100644
index 0000000000..6c43a1c96d
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/mpx-cube-ui.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>小程序跨端组件库 Mpx-cube-ui 开源啦 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/56.9aec9a9e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" aria-current="page" class="active sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx-cube-ui.html#业务现状" class="sidebar-link">业务现状</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cube-ui.html#mpx-技术生态" class="sidebar-link">Mpx 技术生态</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cube-ui.html#组件库自身的维护" class="sidebar-link">组件库自身的维护</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cube-ui.html#mpx-组件体系" class="sidebar-link">Mpx 组件体系</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cube-ui.html#mpx-cube-ui-组件设计" class="sidebar-link">Mpx-cube-ui 组件设计</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cube-ui.html#未来的规划" class="sidebar-link">未来的规划</a></li></ul></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="小程序跨端组件库-mpx-cube-ui-开源啦"><a href="#小程序跨端组件库-mpx-cube-ui-开源啦" class="header-anchor">#</a> 小程序跨端组件库 Mpx-cube-ui 开源啦</h1> <blockquote><p>作者：<a href="https://github.com/CommanderXL" target="_blank" rel="noopener noreferrer">CommanderXL<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p>Mpx-cube-ui 是一款基于 <a href="https://www.mpxjs.cn/" target="_blank" rel="noopener noreferrer">Mpx 小程序框架<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 的移动端基础组件库，一份源码可以跨端输出所有小程序平台及 Web，同时具备良好的拓展能力和可定制化的能力来帮助你快速构建 Mpx 应用项目。</p> <p>Mpx-cube-ui 提供了灵活配置的主题定制能力，在组件设计开发阶段对表现层的结构和样式进行抽离，利用预编译器和 CSS 变量的能力，提供细粒度（颜色、字体、圆角、阴影等）的样式定制能力，你的项目可以按需使用主题的编译方案还是运行时方案来满足不同样式风格的业务场景开发。</p> <p>Mpx-cube-ui 提供了开箱即用的跨端输出能力，源码基于 Mpx 小程序框架进行开发，依托于 Mpx 提供的<a href="https://mpxjs.cn/articles/2.0.html#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E5%BC%80%E5%8F%91" target="_blank" rel="noopener noreferrer">跨平台能力<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>即基于微信小程序跨平台编译输出为支付宝、百度、QQ、头条等目标平台的小程序代码，同时还可以输出到 Web。</p> <p>接下来会通过这篇文章去分享一下 Mpx-cube-ui 是如何诞生的。</p> <h2 id="业务现状"><a href="#业务现状" class="header-anchor">#</a> 业务现状</h2> <h3 id="集团产品的迭代"><a href="#集团产品的迭代" class="header-anchor">#</a> 集团产品的迭代</h3> <p>越来越多的业务产品开始借助小程序的渠道来拓展产品的推广和使用，不同的技术团队承接的不同业务产品方向的需求。在滴滴所有的小程序产品当中，滴滴出行小程序作为最大的C端流量入口，承接了不同业务产品流量分发。在具体到小程序产品的研发环节，不同业务的小程序都被集成到了滴滴出行小程序当中，一同打包上线并发布。
+当然在这种跨业务、技术部门的产品研发当中，不同的技术团队都会有自身配套的基础能力建设。就拿小程序的组件库来说，每个独立的业务产品都会依据对应的交互设计规范来搭建一套满足自身业务述求的基础组件用以提高日常的业务开发效率，例如按钮、半浮层弹窗、Toast、Dialog、表单等等。</p> <h3 id="团队内的业务迭代"><a href="#团队内的业务迭代" class="header-anchor">#</a> 团队内的业务迭代</h3> <p>除了跨业务产品研发的场景外，在同一个技术团队内部也可能会承接来自不同业务产品方向的需求，这些不同业务产品同样也会有独立发展迭代的述求。由于业务场景的约束，团队内部同样也会面临如何做基础能力的沉淀和复用的议题，在节省研发资源的同时去提升业务项目交付的质量和效率。
+</p><hr><p></p> <p>那么在不同的业务产品发展初期，为了快速交付产品的功能保障上线时间，研发侧会尽量利用之前已有的基础能力来快速搭建产品功能。就拿小程序组件库的复用来说，常见的方式有：</p> <ul><li>直接侵入到原有的组件代码当中进行 Hard Code，不同的业务产品依赖同一份组件代码，利用一些 if/else 或者条件编译等手段来使得原有的组件在满足最新的业务述求的同时，还要确保不会影响到原有的业务使用；</li> <li>Fork 一份原有组件库的代码，在此基础上单独迭代维护，做到和原有组件的彻底隔离而不会造成污染；</li></ul> <p>对于第一种方案来说：组件本身因为增量的差异化需求使得组件本身的维护成本变高，同时对于差异化的代码处理难免在编译打包环节出现代码冗余问题，也就是原本不属于当前业务产品的代码实现也被一同打包；
+对于第二种方案来说：组件库维护的数量变多，使得后续的组件迭代和更新需要修改多处代码；</p> <p>此外，在小程序的场景下还面临着包体积等平台规范的硬性约束，特别是对于像滴滴出行小程序这种体量大的小程序来说，众多小程序业务产品被集成到同一个小程序当中，包体积也是日常研发过程中重点关注的一个指标。模块或组件的可复用性好、可拓展性强也意味着不需要重复去开发同一份功能相同代码，随之代码包体积也不会因重复实现相同功能而增速过快。</p> <h2 id="mpx-技术生态"><a href="#mpx-技术生态" class="header-anchor">#</a> Mpx 技术生态</h2> <p>在 Mpx 整个技术生态当中，组件体系目前是不完备的。</p> <p>在我们目前使用 Mpx 去搭建实际的业务产品的过程中，我们基于小程序平台的基础组件去搭建了特定业务场景的基础业务组件，因为业务场景、功能和代码实现等各方面的原因，这些业务场景的基础组件是没法开放给社区的 Mpx 开发者来使用的。因此对于社区来说，要么只能同样基于平台的基础组件去开发上层基础组件，或者是使用第三方的原生小程序组件库，不管哪种方式对于社区的开发者而言，都有不少的上手和开发成本。</p> <p>因此在社区当中也有比较强的述求，期望 Mpx 能提供更为基础通用的组件来更好的支持上层的业务开发。</p> <h2 id="组件库自身的维护"><a href="#组件库自身的维护" class="header-anchor">#</a> 组件库自身的维护</h2> <ul><li>文档示例一体化</li></ul> <p>不管是我们内部维护的业务组件库还是之前我们开源的基于 Vue 的 Web 组件库 <a href="https://didi.github.io/cube-ui/#/zh-CN" target="_blank" rel="noopener noreferrer">Cube-ui<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，组件本身的文档示例也是在组件库迭代过程中也是比较占用时间精力的，在示例和文档方面往往需要重复写多份文案，还要确保它们之间是同步更新的。那么针对组件库自身的维护，如何尽量减少组件库本身的维护成本也是我们需要深入思考的一部分工作。</p> <p>以上这些问题促使我们重新思考整个 Mpx 组件体系的构建和发展。</p> <h2 id="mpx-组件体系"><a href="#mpx-组件体系" class="header-anchor">#</a> Mpx 组件体系</h2> <p>经过业务的长期迭代和验证，Mpx-cube-ui 作为 Mpx 技术生态当中组件体系的基础设施：脱离于业务的基础组件库，同时又要有良好的拓展能力和可定制化的能力来更好的支持上层业务。</p> <p><img src="https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_6wEnx7fVXGlK8hILtuYa" alt="组件分层设计">
+在整个组件体系的搭建过程中，我们依据组件的特性将组件拆分为如下几种类型：</p> <ul><li>业务组件一般来源于某一个具体的产品功能，用以解决特定问题域，更加强调关注点分离，代码的维护成本；</li> <li>基础业务组件一般来源于某一类的业务产品，在特定的业务背景下抽象的比较通用的，较少糅合业务逻辑，介于基础组件和业务组件之间，强调解决效率，可复用性，可维护性；</li> <li>基础组件一般来源于我们设计交互元语言，用以定义业务产品和用户的交互、反馈，更加强调一致性，效率，可复用性；</li></ul> <p>底层的基础组件（可组合性、可拓展性、稳定性）是为了更好的服务于上层的（基础）业务组件。</p> <p>从底层的基础组件到业务组件（由下至上），组件的业务属性越来越强，所要解决的问题域更加聚焦，更贴合具体的问题和场景，同时它们的可复用性也随之降低。</p> <h2 id="mpx-cube-ui-组件设计"><a href="#mpx-cube-ui-组件设计" class="header-anchor">#</a> Mpx-cube-ui 组件设计</h2> <p>这里通过乘客交易、司机运营两个不同业务方向的组件来举例说明 Mpx-cube-ui 在组件的设计和开发当中所做的一些思考。
+在这两个业务场景当中都有 Modal 半浮层组件，不过在司乘业务不同的设计规范约束下，组件间的差异还是比较大的。</p> <p><img src="https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_1EABWsPUeVHTim2iwTUf" alt="mpx-cube-ui-modal"></p> <p>那么为了解决上文当中组件库在跨业务产品的的可复用性、可拓展性的问题，核心所遵循的原则是：</p> <p><strong>弱化不同业务场景的设计规范（去业务），回归到组件本身的行为（逻辑）、结构和样式（表现）：</strong></p> <ul><li>行为，组件所特有的行为方法：展示（show），隐藏（hide），关闭（close）；</li> <li>结构，方便组件间的重新组合：头部区，标题区，内容区，底部操作区；</li> <li>样式，方便业务场景的主题定制：颜色、字号、圆角、边距等；</li></ul> <p><img src="https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_ceWLvE8RbZIIduHHTdtu" alt="组件设计原则"></p> <p>对于 Mpx-cube-ui 组件的主题定制有个简单的逻辑关系：</p> <ul><li>全局基础样式变量：提供了基本色值、字号等，会影响到所有组件的展示；</li> <li>组件样式变量：对于基本的色值、字号等继承于全局基础变量，涉及到组件自身的结构、样式变量会单独定义；</li> <li>组件渲染样式：直接依赖组件样式变量；</li></ul> <p><img src="https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_b4uBKbP8yIwdip7pBZAq" alt="mpx-cube-ui-modal"></p> <p>通过定制<a href="https://www.mpxjs.cn/mpx-cube-ui/guide/design-tokens.html" target="_blank" rel="noopener noreferrer">全局基础样式变量<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>和<a href="https://www.mpxjs.cn/mpx-cube-ui/components/base/button.html#css-variable" target="_blank" rel="noopener noreferrer">组件样式变量<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>都能达到定制主题的目的，有关主题定制的功能具体参见<a href="https://www.mpxjs.cn/mpx-cube-ui/guide/theme.html" target="_blank" rel="noopener noreferrer">文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>在 Mpx-cube-ui 实现的定制主题的方案当中是利用预编译器和 Css Varaibles 的能力来提供细粒度的样式定制能力：</p> <p><img src="https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_3ZVcQITsryAG4k96hFrH" alt="业务架构图"></p> <ul><li>利用预编译器可编程的能力，在编译阶段就可以完成主题能力的定制，当你的业务项目作为独立应用迭代，可以只利用预编译器的能力，从而使得你的 css 代码体积尽可能的小；</li> <li>利用 Css Varaibles 的能力，可以解决更为复杂的场景，例如同一个组件在巨型应用当中，在不同业务场景页面需要有不同的主题样式；</li></ul> <p>在<a href="https://www.mpxjs.cn/mpx-cube-ui/guide/intro.html" target="_blank" rel="noopener noreferrer">官网示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>当中可以直接体验主题切换功能。</p> <h2 id="未来的规划"><a href="#未来的规划" class="header-anchor">#</a> 未来的规划</h2> <ol><li>开源更多我们内部所沉淀出的基础组件，去满足多样化的业务场景开发；</li> <li>将文档示例一体化的能力独立打包开源，用以组件库的快速建站以及降低文档、示例代码的维护成本。</li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/articles/2.9-release.html" class="prev">
+        Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化
+      </a></span> <span class="next"><a href="/articles/mpx-cli-next.html">
+        Mpx-cli 插件化改造
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/56.9aec9a9e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/mpx1.html b/docs-vuepress/.vuepress/dist/articles/mpx1.html
new file mode 100644
index 0000000000..7aea0fe8b3
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/mpx1.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>小程序开发者，为什么你应该尝试下MPX | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/57.9d9ddcbd.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" aria-current="page" class="active sidebar-link">Mpx框架初体验</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx1.html#背景" class="sidebar-link">背景</a></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#优势" class="sidebar-link">优势</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx1.html#原生兼容" class="sidebar-link">原生兼容</a></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#第三方组件库" class="sidebar-link">第三方组件库</a></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#按需引用" class="sidebar-link">按需引用</a></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#跨小程序平台" class="sidebar-link">跨小程序平台</a></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#能力增强" class="sidebar-link">能力增强</a></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#性能优势" class="sidebar-link">性能优势</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="小程序开发者-为什么你应该尝试下mpx"><a href="#小程序开发者-为什么你应该尝试下mpx" class="header-anchor">#</a> 小程序开发者，为什么你应该尝试下MPX</h1> <blockquote><p>作者：<a href="https://github.com/sky-admin" target="_blank" rel="noopener noreferrer">sky-admin<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <blockquote><p>MPX框架是滴滴出行推出的一款专注小程序开发的增强型框架。本篇文章将从使用角度谈谈MPX的优势与好处。如果嫌内容太长，优势部分每个小节都有简单的一句话总结，可以快速阅读。如果想了解更多设计细节，可以阅读 <a href="/articles/2.0.html">前一篇文章 - MPX2.0发布</a>。</p></blockquote> <h2 id="背景"><a href="#背景" class="header-anchor">#</a> 背景</h2> <p>在小程序逐渐火热的今天，越来越多的开发者需要进行小程序的开发。原生小程序的开发有诸多不便，开发者又需要在众多的小程序框架中做出抉择。</p> <p>那么今天，我们要给大家安利一款小程序框架：MPX</p> <h2 id="优势"><a href="#优势" class="header-anchor">#</a> 优势</h2> <p>之所以建议开发者们考虑使用MPX框架来开发小程序，是因为MPX框架具有一些别的框架所没有的优点。</p> <p>MPX立足原生小程序，在保证坑少的同时做了很多能力增强，提供了数据响应、模板增强、性能优化、跨平台开发等能力，以提升用户的开发体验及效率。</p> <p>接下来会从 原生兼容 -&gt; 第三方组件支持 -&gt; 按需构建 -&gt; 跨平台编译 -&gt; 能力增强 -&gt; 独特性能优势 六个点来逐一讲述。</p> <h3 id="原生兼容"><a href="#原生兼容" class="header-anchor">#</a> 原生兼容</h3> <blockquote><p>MPX完全兼容原生，坑少。渐进接入简单。</p></blockquote> <p>从语法风格上，我们可以看到目前市面上流行的小程序框架基本是基于web框架（taro/nanachi - react，uniapp/megalo/mpvue - vue）或者是一套全新（chameleon）/ 半全新（wepy）的标准。</p> <p>使用了这些框架，你所写的代码，并不是小程序代码。而是react/vue或者另一套代码。而这些代码源码到小程序代码，需要经过一次全面的转换，这个转换可能会引入一些未知的问题，产生一些坑。</p> <p>同时随着时间，小程序自身会逐步迭代，做出更多的功能特性，提供更好的组件、方法。而一些框架可能会受限于精力或框架节奏，没有办法第一时间跟进，甚至框架慢慢疏于维护而无法使用。</p> <p>而MPX选择的是，<strong>全面拥抱原生</strong>。</p> <p>口说无凭，我们来看个典型的MPX组件长什么样。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/3877c653-d180-4fe7-8661-457b9de1bd82.png" alt="mpx组件示例"></p> <p>乍一看好像和vue没什么区别，也就多了个json块，template里写的是小程序的标签。</p> <p>由于这一块全是符合微信小程序原生语法，我们是不会做任何转换的，所以你写什么就是什么。（如果使用了MPX的增强特性，还是会进行一些必要的转换的，后续我们也会出文章详细解释MPX的增强是如何实现的，相对来说，我们的转换比较轻量、透明、易理解）</p> <p>当微信出了新的能力、新的标签、新的生命周期钩子，使用MPX框架来编写的小程序只需要直接用起来就行。</p> <p>所以，使用MPX框架，你可以轻易地使用 <strong><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html" target="_blank" rel="noopener noreferrer">自定义组件的relations<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> 来搞定组件间关系，使用 <strong><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/" target="_blank" rel="noopener noreferrer">wxs<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> 来更好地构建页面。</p> <p>MPX几乎支持原生的每一个特性，在 .mpx 文件里，模板部分写的是原生小程序的模板语法，脚本部分写的是原生小程序的脚本语法，json部分写的是原生小程序的配置信息。用MPX，你才是真的在开发小程序。</p> <p>目前很多原生小程序开发者可能想尝试下框架，老项目接入框架，选MPX肯定是最简单的了。口说无凭，我们搞了个demo来给大家打个样：在我们GitHub项目中有examples文件夹，里面的 <a href="https://github.com/didi/mpx/tree/master/examples/mpx-progressive" target="_blank" rel="noopener noreferrer">原生项目渐进接入MPX示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 。</p> <h3 id="第三方组件库"><a href="#第三方组件库" class="header-anchor">#</a> 第三方组件库</h3> <blockquote><p>MPX提供了完备的第三方组件库支持</p></blockquote> <p>上面说了MPX对原生的极致兼容，能让你想到什么？对，就是对第三方组件库的完美支持。</p> <p>支持第三方组件库的重要性大家都知道，所以这个能力大部分框架都支持了。但是支持和完美支持还是有区别的。据简单观察，taro/mpvue/uniapp对于第三方组件库的支持都是以复制的形式进行的，也就是和微信小程序本来的行为很像。</p> <p>那么MPX是怎么支持第三方组件库的呢，这里有个demo：也在我们的GitHub里的examples文件夹下，<a href="https://github.com/didi/mpx/tree/master/examples/mpx-useuilib" target="_blank" rel="noopener noreferrer">MPX使用第三方组件库示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> ，核心代码见下图：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/9ecdd898-f7e5-48cc-89c2-bfc7ce3a03f9.png" alt="MPX使用第三方组件库代码示例"></p> <p>乍一眼看不太出来有什么特别的？没用过别的框架引第三方组件，简单找了找其他框架好像也没提供相应的demo，用过的朋友可以自行对比下。</p> <p>在MPX里使用第三方组件库，仅需要***像web项目一样npm安装即可，并不需要复制文件***。然后在json里直接写包名就会去node_modules下面查找了。再配合webpack alias可以做到更简单、更语义化。</p> <p>然而这还没有结束~</p> <p>细心的朋友会发现，这段示例代码中既有vant的组件，也有iview的组件，如果按照微信的规范，这些组件库会通过miniprogram字段指定自己的构建文件生成目录，开发者工具会把这个目录完全拷贝到最终发布的代码里去，我们就会有两个巨大的组件库占据宝贵的空间。</p> <p>我们当然是希望用多少引多少，而不是一股脑全引进去，对，于是MPX提供了按需引用的能力，在下一章<a href="#%E6%8C%89%E9%9C%80%E5%BC%95%E7%94%A8">按需引用</a>细讲。</p> <p>以及，组件库目前很少有跨小程序平台的组件库啊，如果我用了vant，支付宝、QQ里没有vant怎么办？也许这是别的框架不怎么推荐使用第三方库的原因，而MPX里，我们帮你把别人的组件库也转了，细节看下下章<a href="#%E8%B7%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B9%B3%E5%8F%B0">跨小程序平台</a></p> <h3 id="按需引用"><a href="#按需引用" class="header-anchor">#</a> 按需引用</h3> <blockquote><p>通过webpack依赖分析收集，使用第三方组件库或者拆分开发大型项目时MPX能保证构建的代码全是要用到的代码</p></blockquote> <p>原生小程序本身的编译是遍历项目文件夹里所有的JS，包装成一个AMD包，也就是说项目文件夹里所有的文件，不论是否被使用，都会占用包体积并上传。</p> <p>同时，原生微信小程序的npm支持是基于文件夹复制的，第三方包通过声明miniprogram字段指定要拷贝的文件夹，不论使用还是未使用的资源（模板/js/样式/图片），全会被复制到项目文件夹中。</p> <p>而我们提供了@mpxjs/webpack-plugin插件，借助webpack生态，解析.mpx文件的json部分或原生的json文件将依赖作为新的入口添加子编译。基于依赖收集，而不是文件遍历。</p> <p>带来的好处就是：如果你喜欢vant的按钮，iview的输入框，wux的布局，欢迎尝试MPX，让你能同时使用多个UI框架的同时不用担心应用的体积爆炸。</p> <p>同理，面对一个大型项目，我们可以拆成不同的部分，由不同的团队完成后发npm包，在一个主项目中引入即可，具体内容可以看文档<a href="/guide/advance/subpackage.html#packages">packages</a>一节。</p> <p>收集依赖的细节可以查阅文档<a href="/guide/understand/compile.html">编译构建</a>一节。</p> <h3 id="跨小程序平台"><a href="#跨小程序平台" class="header-anchor">#</a> 跨小程序平台</h3> <blockquote><p>MPX的跨平台方法能带着第三方组件库一起跨小程序平台，同时提供了充足完善的条件编译能力。</p></blockquote> <p>在 MPX 1.0 时代，MPX框架是专注提升微信小程序的开发体验，虽然也提供了支付宝版，但代码完全要另写。</p> <p>而随着越来越多的 super app 提供了小程序能力，目前至少有5种体系的小程序（微信、支付宝系列、百度系列、头条系列、QQ），如果每一个平台都需要维护一份代码，工程师人数明显不够用了，所以跨小程序平台的能力也是 MPX 2.0 的主打特性。</p> <p>我们的跨平台的方法就是转换。都是小程序，语法基本一样，配置、钩子的差异在MPX运行时里提供了抹平。</p> <p>而除此之外最大的区别也就是模板上的标签和指令。所以我们实现了一套转换的架子，再编写一份转换规则，即可完成微信小程序到支付宝、百度、头条小程序的转换。</p> <p>采用这种转换的模式，非常方便用户理解我们是如何把微信小程序转换成支付宝、百度等小程序平台的。而且只要用户有需求，可以补齐任一套小程序转换其他平台的规则，就可以完成以某个小程序为标准为基础来编写小程序代码以及进一步转换成别的平台的能力。</p> <p>再结合前面一直在说的我们对原生小程序的支持，就可以撞出一点不一样的东西，比如，前文提到的第三方组件库跨小程序平台。</p> <p>对，我们能帮你把针对微信编写的ui组件库在支付宝、百度上运行起来，带着组件库一起跨小程序平台。</p> <p>那么一定会有这样一个问题，就算MPX对原生的支持再怎么牛逼，有的基础能力只有微信平台有，别的平台没有，MPX的转换还能无中生有吗？</p> <p>当然不能，其实这个问题对于所有的跨端框架都是一个问题，所以跨端最核心的问题是，如何搞定差异化部分。</p> <p>MPX提供了丰富的条件编译能力，可以以文件为维度差别构建，可以以代码块为维度，也可以以代码维度进行差别构建。</p> <p>而且MPX的差异化构建能力也是完全基于webpack实现的，所以上面提到的第三方组件库如果确实存在转换不了的地方，比如vant的picker组件使用内联wxs写了一个小方法叫isSimple在模板里调用了，但是这个方法的写法在百度小程序的filter脚本（filter可以理解为百度小程序的wxs）里不支持，因为百度的filter要求必须导出一个对象包裹方法。</p> <p>最好的解决办法当然是给vant-weapp提pr帮他们解决一下这个问题，但时间可能会比较慢，所以在MPX里，可以利用webpack的alias能力：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/7f90593b-65b4-40d0-bd93-6396e8a18e64.png" alt="通过alias解决第三方组件的跨平台问题"></p> <p>当尝试构建百度小程序时，会优先去查找pick/index.swan.wxml，再被alias到一个src下的文件，自己修改一下第三方包里有一些小问题的部分即可。</p> <p>关于跨平台的条件编译，更多具体信息可以<a href="/guide/advance/platform.html#跨平台编译">查阅我们的官方文档 - 跨平台编译</a></p> <h3 id="能力增强"><a href="#能力增强" class="header-anchor">#</a> 能力增强</h3> <blockquote><p>通过数据响应、编译时预处理提供了computed/watch，完备的样式类型绑定，双向数据绑定，动态组件等一系列方便开发者更好开发小程序的能力增强</p></blockquote> <p>能力增强应该是一个框架提供的最核心最重要的能力了，而MPX也确实在这里下了很大的力气，提供了多且好用的能力增强，不过受限于此处的篇幅，就只简单介绍，细节大家还是<a href="/guide/basic/template.html">查阅我们的文档</a>的好。</p> <p>别的框架由于往往基于react/vue的，会给个列表写明不支持哪些能力，用户写的时候习惯使然，往往用了后可能才反应过来哦这个不支持。MPX则是原生的小程序语法写着难受时候突然想起MPX有这个能力。</p> <p>列一下MPX增强的能力：</p> <ul><li>模板上的增强
+<ul><li>样式类名绑定</li> <li>内联事件传参</li> <li>动态组件</li> <li>双向绑定</li> <li>节点获取ref</li></ul></li> <li>JS里的增强
+<ul><li>数据响应</li> <li>setData优化</li> <li>ES6+</li></ul></li> <li>样式上的增强
+<ul><li>预处理支持</li> <li>rpx转换</li></ul></li> <li>JSON里的增强
+<ul><li>packages</li> <li>分包资源优化</li></ul></li></ul> <p>MPX最显著的能力是数据响应，它衍生出computed/watch，以及双向数据绑定等。这个能力和Vue比较像，不同的是在MPX里是由mobx提供的数据响应能力。</p> <p>而同样是数据响应，我们做了一些不一样的优化。</p> <h3 id="性能优势"><a href="#性能优势" class="header-anchor">#</a> 性能优势</h3> <blockquote><p>通过对模板的解析抽象出访问的数据以保证在提供了数据响应能力的同时不至于劣化性能。</p></blockquote> <p>mpvue/wepy/megalo等框架也提供了数据响应的能力，但是数据响应在小程序领域有个较大的问题，微信开发指南里明确提到要注意setData的调用频次和数据量的大小。</p> <p>而数据响应最基本的做法就是数据变了就去set数据，这会极大劣化小程序的性能表现。</p> <p>而MPX通过对模板进行解析，抽象出对应的render函数，在调用setData发送数据前执行render函数找到真正需要发送的数据。</p> <p>效果如图：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/9399b75c-5c81-4584-89b6-5e7f2c2ba7ba.png" alt="小程序性能分析"></p> <p>小程序开发者工具的audits面板能辅助用户分析出可能需要优化的点。正如前文所说，MPX在红框部分，尤其是红框里的第三条，不将模板上未使用的数据发送到渲染层上做了极大的优化。</p> <p>只要不出现渲染函数执行失败（会有warning在console里提示，同时兜底逻辑会进行全量setData以保证程序仍可正常运行），使用MPX开发的小程序就永远不用担心发送了模板未使用的数据。</p> <p>虽然只是一个小小的TODO MVC示例，但是这个优化和应用的规模没关系，而且同时大家可以尝试别家的小demo对比看看。</p> <p>这个优化的细节可以看<a href="/articles/2.0.html">前一篇文章</a>，或者我们的文档<a href="/guide/understand/runtime.html">MPX运行机制 - 数据响应与性能优化</a></p> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>与目前市面上的诸多框架相比，MPX希望以原生小程序为基础，全面拥抱原生小程序，在原生小程序的基础上做增强，通过尽可能少的转换实现尽可能多的能力增强，在提升小程序开发体验的同时，保证不因转换或框架的问题产生过多的坑。</p> <p>MPX框架的目标用户是对小程序质量有较高要求的开发者，如果你是原生小程序开发者，或者厌倦了解决某些以web框架DSL语法为基础的转换框架造成的坑，欢迎尝试MPX框架。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/articles/performance.html" class="prev">
+        小程序框架运行时性能大测评
+      </a></span> <span class="next"><a href="/articles/mpx2.html">
+        Mpx框架技术揭秘
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/57.9d9ddcbd.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/mpx2.html b/docs-vuepress/.vuepress/dist/articles/mpx2.html
new file mode 100644
index 0000000000..be760c89ba
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/mpx2.html
@@ -0,0 +1,740 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx 小程序框架技术揭秘 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/58.50eb3b91.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" aria-current="page" class="active sidebar-link">Mpx框架技术揭秘</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx2.html#编译环节" class="sidebar-link">编译环节</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx2.html#动态入口编译" class="sidebar-link">动态入口编译</a></li><li class="sidebar-sub-header"><a href="/articles/mpx2.html#render-function" class="sidebar-link">Render Function</a></li><li class="sidebar-sub-header"><a href="/articles/mpx2.html#wxs-module" class="sidebar-link">Wxs Module</a></li><li class="sidebar-sub-header"><a href="/articles/mpx2.html#template-script-style-json-模块单文件的生成" class="sidebar-link">template/script/style/json 模块单文件的生成</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/mpx2.html#运行时环节" class="sidebar-link">运行时环节</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx2.html#响应式系统" class="sidebar-link">响应式系统</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/mpx2.html#性能优化" class="sidebar-link">性能优化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx2.html#尽可能的减少-setdata-传输的数据" class="sidebar-link">尽可能的减少 setData 传输的数据</a></li><li class="sidebar-sub-header"><a href="/articles/mpx2.html#尽可能的减少-setdata-的调用频次" class="sidebar-link">尽可能的减少 setData 的调用频次</a></li></ul></li></ul></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx-小程序框架技术揭秘"><a href="#mpx-小程序框架技术揭秘" class="header-anchor">#</a> Mpx 小程序框架技术揭秘</h1> <blockquote><p>作者：<a href="https://github.com/CommanderXL" target="_blank" rel="noopener noreferrer">CommanderXL<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p>与目前业内的几个小程序框架相比较而言，mpx 开发设计的出发点就是基于原生的小程序去做功能增强。所以从开发框架的角度来说，是没有任何“包袱”，围绕着原生小程序这个 core 去做不同功能的 patch 工作，使得开发小程序的体验更好。</p> <p>于是我挑了一些我非常感兴趣的点去学习了下 mpx 在相关功能上的设计与实现。</p> <h2 id="编译环节"><a href="#编译环节" class="header-anchor">#</a> 编译环节</h2> <h3 id="动态入口编译"><a href="#动态入口编译" class="header-anchor">#</a> 动态入口编译</h3> <p>不同于 web 规范，我们都知道小程序每个 page/component 需要被最终在 webview 上渲染出来的内容是需要包含这几个独立的文件的：js/json/wxml/wxss。为了提升小程序的开发体验，mpx 参考 vue 的 SFC(single file component)的设计思路，采用单文件的代码组织方式进行开发。既然采用这种方式去组织代码的话，那么模板、逻辑代码、json配置文件、style样式等都放到了同一个文件当中。那么 mpx 需要做的一个工作就是如何将 SFC 在代码编译后拆分为 js/json/wxml/wxss 以满足小程序技术规范。熟悉 vue 生态的同学都知道，vue-loader 里面就做了这样一个编译转化工作。具体有关 vue-loader 的工作流程可以参见我写的<a href="https://github.com/CommanderXL/Biu-blog/issues/33" target="_blank" rel="noopener noreferrer">文章<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>这里会遇到这样一个问题，就是在 vue 当中，如果你要引入一个页面/组件的话，直接通过<code>import</code>语法去引入对应的 vue 文件即可。但是在小程序的标准规范里面，它有自己一套组件系统，即如果你在某个页面/组件里面想要使用另外一个组件，那么需要在你的 json 配置文件当中去声明<code>usingComponents</code>这个字段，对应的值为这个组件的路径。</p> <p>在 vue 里面 import 一个 vue 文件，那么这个文件会被当做一个 dependency 去加入到 webpack 的编译流程当中。但是 mpx 是保持小程序原有的功能，去进行功能的增强。因此一个 mpx 文件当中如果需要引入其他页面/组件，那么就是遵照小程序的组件规范需要在<code>usingComponents</code>定义好<code>组件名:路径</code>即可，<strong>mpx 提供的 webpack 插件来完成确定依赖关系，同时将被引入的页面/组件加入到编译构建的环节当中</strong>。</p> <p>接下来就来看下具体的实现，mpx webpack-plugin 暴露出来的插件上也提供了静态方法去使用 loader。这个 loader 的作用和 vue-loader 的作用类似，首先就是拿到 mpx 原始的文件后转化一个 js 文本的文件。例如一个 list.mpx 文件里面有关 json 的配置会被编译为：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=json&amp;index=0!../../node_modules/@mpxjs/webpack-plugin/lib/json-compiler/index?root=!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=json&amp;index=0!./list.mpx&quot;</span><span class="token punctuation">)</span>
+</code></pre></div><p>这样可以清楚的看到 list.mpx 这个文件首先 selector(抽离<code>list.mpx</code>当中有关 json 的配置，并传入到 json-compiler 当中) ---&gt;&gt;&gt; json-compiler(对 json 配置进行处理，添加动态入口等) ---&gt;&gt;&gt; extractor(利用 child compiler 单独生成 json 配置文件)</p> <p>其中动态添加入口的处理流程是在 json-compiler 当中去完成的。例如在你的 <code>page/home.mpx</code> 文件当中的 json 配置中使用了 局部组件 <code>components/list.mpx</code>:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;application/json&quot;</span><span class="token operator">&gt;</span>
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/list&quot;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>在 json-compiler 当中：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">...</span>
+
+<span class="token keyword">const</span> <span class="token function-variable function">addEntrySafely</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">resource<span class="token punctuation">,</span> name<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 如果loader已经回调，就不再添加entry</span>
+  <span class="token keyword">if</span> <span class="token punctuation">(</span>callbacked<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token comment">// 使用 webpack 提供的 SingleEntryPlugin 插件创建一个单文件的入口依赖(即这个 component)</span>
+  <span class="token keyword">const</span> dep <span class="token operator">=</span> SingleEntryPlugin<span class="token punctuation">.</span><span class="token function">createDependency</span><span class="token punctuation">(</span>resource<span class="token punctuation">,</span> name<span class="token punctuation">)</span>
+  entryDeps<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>dep<span class="token punctuation">)</span>
+  <span class="token comment">// compilation.addEntry 方法开始将这个需要被编译的 component 作为依赖添加到 webpack 的构建流程当中</span>
+  <span class="token comment">// 这里可以看到的是整个动态添加入口文件的过程是深度优先的</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>_compilation<span class="token punctuation">.</span><span class="token function">addEntry</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>_compiler<span class="token punctuation">.</span>context<span class="token punctuation">,</span> dep<span class="token punctuation">,</span> name<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> module</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    entryDeps<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>dep<span class="token punctuation">)</span>
+    <span class="token function">checkEntryDeps</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token function">callback</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> module<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">const</span> <span class="token function-variable function">processComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">component<span class="token punctuation">,</span> context<span class="token punctuation">,</span> rewritePath<span class="token punctuation">,</span> componentPath<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token operator">...</span>
+  <span class="token comment">// 调用 loaderContext 上提供的 resolve 方法去解析这个 component path 完整的路径，以及这个 component 所属的 package 相关的信息(例如 package.json 等)</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> component<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> rawResult<span class="token punctuation">,</span> info</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token operator">...</span>
+    componentPath <span class="token operator">=</span> componentPath <span class="token operator">||</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>subPackageRoot<span class="token punctuation">,</span> <span class="token string">'components'</span><span class="token punctuation">,</span> componentName <span class="token operator">+</span> <span class="token function">hash</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">,</span> componentName<span class="token punctuation">)</span>
+    <span class="token operator">...</span>
+    <span class="token comment">// component path 解析完之后，调用 addEntrySafely 开始在 webpack 构建流程中动态添加入口</span>
+    <span class="token function">addEntrySafely</span><span class="token punctuation">(</span>rawResult<span class="token punctuation">,</span> componentPath<span class="token punctuation">,</span> callback<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">if</span> <span class="token punctuation">(</span>isApp<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token operator">...</span>
+<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+  <span class="token keyword">if</span> <span class="token punctuation">(</span>json<span class="token punctuation">.</span>usingComponents<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// async.forEachOf 流程控制依次调用 processComponent 方法</span>
+    async<span class="token punctuation">.</span><span class="token function">forEachOf</span><span class="token punctuation">(</span>json<span class="token punctuation">.</span>usingComponents<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">component<span class="token punctuation">,</span> name<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token function">processComponent</span><span class="token punctuation">(</span>component<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">path</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        json<span class="token punctuation">.</span>usingComponents<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> path
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+  <span class="token operator">...</span>
+<span class="token punctuation">}</span>
+<span class="token operator">...</span>
+</code></pre></div><p>这里需要解释说明下有关 webpack 提供的 SingleEntryPlugin 插件。这个插件是 webpack 提供的一个内置插件，当这个插件被挂载到 webpack 的编译流程的过程中是，会绑定<code>compiler.hooks.make.tapAsync</code>hook，当这个 hook 触发后会调用这个插件上的 SingleEntryPlugin.createDependency 静态方法去创建一个入口依赖，然后调用<code>compilation.addEntry</code>将这个依赖加入到编译的流程当中，这个是单入口文件的编译流程的最开始的一个步骤(具体可以参见 <a href="https://github.com/webpack/webpack/blob/master/lib/SingleEntryPlugin.js" target="_blank" rel="noopener noreferrer">Webpack SingleEntryPlugin 源码<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)。</p> <p>Mpx 正是利用了 webpack 提供的这样一种能力，在遵照小程序的自定义组件的规范的前提下，解析 mpx json 配置文件的过程中，手动的调用 SingleEntryPlugin 相关的方法去完成动态入口的添加工作。这样也就串联起了所有的 mpx 文件的编译工作。</p> <h3 id="render-function"><a href="#render-function" class="header-anchor">#</a> Render Function</h3> <p>Render Function 这块的内容我觉得是 Mpx 设计上的一大亮点内容。Mpx 引入 Render Function 主要解决的问题是性能优化方向相关的，因为小程序的架构设计，逻辑层和渲染层是2个独立的。</p> <p>这里直接引用 Mpx 有关 Render Function 对于性能优化相关开发工作的描述：</p> <blockquote><p>作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：</p></blockquote> <blockquote><ul><li>尽可能减少setData调用的频次</li> <li>尽可能减少单次setData传输的数据
+为了实现以上两个优化方向，我们做了以下几项工作：</li></ul></blockquote> <blockquote><p>将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；</p></blockquote> <blockquote><p>将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。</p></blockquote> <p>接下来我们看下 Mpx 是如何实现 Render Function 的。这里我们从一个简单的 demo 来说起：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>Computed reversed message: &quot;{{ reversedMessage }}&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>the c string {{ demoObj.a.b.c }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ { active: isActive } }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/core&quot;</span><span class="token punctuation">;</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">isActive</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'messages'</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">demoObj</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token string">'c'</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token function">reversedMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><code>.mpx</code> 文件经过 loader 编译转换的过程中。对于 template 模块的处理和 vue 类似，首先将 template 转化为 AST，然后再将 AST 转化为 code 的过程中做相关转化的工作，最终得到我们需要的 template 模板代码。</p> <p>在<code>packages/webpack-plugin/lib/template-compiler.js</code>模板处理 loader 当中:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">let</span> renderResult <span class="token operator">=</span> <span class="token function">bindThis</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">global.currentInject = {
+    moduleId: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span>moduleId<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">,
+    render: function () {
+      var __seen = [];
+      var renderData = {};
+      </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>compiler<span class="token punctuation">.</span><span class="token function">genNode</span><span class="token punctuation">(</span>ast<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">return renderData;
+    }
+};\n</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">needCollect</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">ignoreMap</span><span class="token operator">:</span> meta<span class="token punctuation">.</span>wxsModuleMap
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>在 render 方法内部，创建 renderData 局部变量，调用<code>compiler.genNode(ast)</code>方法完成 Render Function 核心代码的生成工作，最终将这个 renderData 返回。例如在上面给出来的 demo 实例当中，通过<code>compiler.genNode(ast)</code>方法最终生成的代码为：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">(</span><span class="token punctuation">(</span>mpxShow<span class="token punctuation">)</span><span class="token operator">||</span><span class="token punctuation">(</span>mpxShow<span class="token punctuation">)</span><span class="token operator">===</span><span class="token keyword">undefined</span><span class="token operator">?</span><span class="token string">''</span><span class="token operator">:</span><span class="token string">'display:none;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token punctuation">(</span> isActive <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+<span class="token punctuation">}</span>
+<span class="token string">&quot;Computed reversed message: \&quot;&quot;</span><span class="token operator">+</span><span class="token punctuation">(</span> reversedMessage <span class="token punctuation">)</span><span class="token operator">+</span><span class="token string">&quot;\&quot;&quot;</span><span class="token punctuation">;</span>
+<span class="token string">&quot;the c string &quot;</span><span class="token operator">+</span><span class="token punctuation">(</span> demoObj<span class="token punctuation">.</span>a<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c <span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">(</span>__injectHelper<span class="token punctuation">.</span><span class="token function">transformClass</span><span class="token punctuation">(</span><span class="token string">&quot;list&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span><span class="token literal-property property">active</span><span class="token operator">:</span> isActive<span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><p>mpx 文件当中的 template 模块被初步处理成上面的代码后，可以看到这是一段可执行的 js 代码。那么这段 js 代码到底是用作何处呢？可以看到<code>compiler.genNode</code>方法是被包裹至<code>bindThis</code>方法当中的。即这段 js 代码还会被<code>bindThis</code>方法做进一步的处理。打开 bind-this.js 文件可以看到内部的实现其实就是一个 babel 的 transform plugin。在处理上面这段 js 代码的 AST 的过程中，通过这个插件对 js 代码做进一步的处理。最终这段 js 代码处理后的结果是：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">/* mpx inject */</span> global<span class="token punctuation">.</span>currentInject <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">moduleId</span><span class="token operator">:</span> <span class="token string">&quot;2271575d&quot;</span><span class="token punctuation">,</span>
+  <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">var</span> __seen <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+    <span class="token keyword">var</span> renderData <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
+    <span class="token punctuation">(</span>renderData<span class="token punctuation">[</span><span class="token string">&quot;mpxShow&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>mpxShow<span class="token punctuation">,</span> <span class="token string">&quot;mpxShow&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>mpxShow<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">(</span>renderData<span class="token punctuation">[</span><span class="token string">&quot;mpxShow&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>mpxShow<span class="token punctuation">,</span> <span class="token string">&quot;mpxShow&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>mpxShow<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token keyword">undefined</span> <span class="token operator">?</span> <span class="token string">''</span> <span class="token operator">:</span> <span class="token string">'display:none;'</span><span class="token punctuation">;</span>
+    <span class="token string">&quot;Computed reversed message: \&quot;&quot;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>renderData<span class="token punctuation">[</span><span class="token string">&quot;reversedMessage&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>reversedMessage<span class="token punctuation">,</span> <span class="token string">&quot;reversedMessage&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>reversedMessage<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;\&quot;&quot;</span><span class="token punctuation">;</span>
+    <span class="token string">&quot;the c string &quot;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>renderData<span class="token punctuation">[</span><span class="token string">&quot;demoObj.a.b.c&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>demoObj<span class="token punctuation">.</span>a<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c<span class="token punctuation">,</span> <span class="token string">&quot;demoObj&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">__get</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">__get</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">__get</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>demoObj<span class="token punctuation">,</span> <span class="token string">&quot;a&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">&quot;b&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">&quot;c&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">__get</span><span class="token punctuation">(</span>__injectHelper<span class="token punctuation">,</span> <span class="token string">&quot;transformClass&quot;</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token string">&quot;list&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token punctuation">(</span>renderData<span class="token punctuation">[</span><span class="token string">&quot;isActive&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>isActive<span class="token punctuation">,</span> <span class="token string">&quot;isActive&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isActive<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token keyword">return</span> renderData<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre></div><p>bindThis 方法对于 js 代码的转化规则就是：</p> <ol><li>一个变量的访问形式，改造成 this.xxx 的形式；</li> <li>对象属性的访问形式，改造成 this.__get(object, property) 的形式(this.__get方法为运行时 mpx runtime 提供的方法)</li></ol> <p>这里的 this 为 mpx 构造的一个代理对象，在你业务代码当中调用 createComponent/createPage 方法传入的配置项，例如 data，都会通过这个代理对象转化为响应式的数据。</p> <p>需要注意的是不管哪种数据形式的改造，最终需要达到的效果就是确保在 Render Function 执行的过程当中，这些被模板使用到的数据能被正常的访问到，在访问的阶段中，这些被访问到的数据即被加入到 mpx 构建的整个响应式的系统当中。</p> <p>只要在 template 当中使用到的 data 数据(包括衍生的 computed 数据)，最终都会被 renderData 所记录，而记录的数据形式是例如：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>renderData<span class="token punctuation">[</span><span class="token string">'xxx'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>xxx<span class="token punctuation">,</span> <span class="token string">'xxx'</span><span class="token punctuation">]</span> <span class="token comment">// 数组的形式，第一项为这个数据实际的值，第二项为这个数据的 firstKey(主要用以数据 diff 的工作)</span>
+</code></pre></div><p>以上就是 mpx 生成 Render Function 的整个过程。总结下 Render Function 所做的工作：</p> <ol><li>执行 render 函数，将渲染模板使用到的数据加入到响应式的系统当中；</li> <li>返回 renderData 用以接下来的数据 diff 以及调用小程序的 setData 方法来完成视图的更新</li></ol> <h3 id="wxs-module"><a href="#wxs-module" class="header-anchor">#</a> Wxs Module</h3> <p>Wxs 是小程序自己推出的一套脚本语言。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html" target="_blank" rel="noopener noreferrer">官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>给出的示例，wxs 模块必须要声明式的被 wxml 引用。和 js 在 jsCore 当中去运行不同的是 wxs 是在渲染线程当中去运行的。因此 wxs 的执行便少了一次从 jsCore 执行的线程和渲染线程的通讯，从这个角度来说是对代码执行效率和性能上的比较大的一个优化手段。</p> <p>有关官方提到的有关 wxs 的运行效率的问题还有待论证：</p> <blockquote><p>“在 android 设备中，小程序里的 wxs 与 js 运行效率无差异，而在 ios 设备中，小程序里的 wxs 会比 js 快 2~20倍。”</p></blockquote> <p>因为 mpx 是对小程序做渐进增强，因此 wxs 的使用方式和原生的小程序保持一致。在你的<code>.mpx</code>文件当中的 template block 内通过路径直接去引入 wxs 模块即可使用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>wxs</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../wxs/components/list.wxs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">module</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ list.FOO }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// wxs/components/list.wxs</span>
+<span class="token keyword">const</span> Foo <span class="token operator">=</span> <span class="token string">'This is from list wxs module'</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  Foo
+<span class="token punctuation">}</span>
+</code></pre></div><p>在 template 模块经过 template-compiler 处理的过程中。模板编译器 compiler 在解析模板的 AST 过程中会针对 wxs 标签缓存一份 wxs 模块的映射表：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">{</span>
+  <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">wxsModuleMap</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token string">'../wxs/components/list.wxs'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>当 compiler 对 template 模板解析完后，template-compiler 接下来就开始处理 wxs 模块相关的内容：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// template-compiler/index.js</span>
+
+module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">raw</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token operator">...</span>
+
+  <span class="token keyword">const</span> <span class="token function-variable function">addDependency</span> <span class="token operator">=</span> <span class="token parameter">dep</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> resourceIdent <span class="token operator">=</span> dep<span class="token punctuation">.</span><span class="token function">getResourceIdentifier</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>resourceIdent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> factory <span class="token operator">=</span> compilation<span class="token punctuation">.</span>dependencyFactories<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>dep<span class="token punctuation">.</span>constructor<span class="token punctuation">)</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>factory <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">No module factory available for dependency type: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dep<span class="token punctuation">.</span>constructor<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+      <span class="token keyword">let</span> innerMap <span class="token operator">=</span> dependencies<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>factory<span class="token punctuation">)</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>innerMap <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        dependencies<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>factory<span class="token punctuation">,</span> <span class="token punctuation">(</span>innerMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+      <span class="token keyword">let</span> list <span class="token operator">=</span> innerMap<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>resourceIdent<span class="token punctuation">)</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>list <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> innerMap<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>resourceIdent<span class="token punctuation">,</span> <span class="token punctuation">(</span>list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+      list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>dep<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+
+  <span class="token comment">// 如果有 wxsModuleMap 即为 wxs module 依赖的话，那么下面会调用 compilation.addModuleDependencies 方法</span>
+  <span class="token comment">// 将 wxsModule 作为 issuer 的依赖再次进行编译，最终也会被打包进输出的模块代码当中</span>
+  <span class="token comment">// 需要注意的就是 wxs module 不仅要被注入到 bundle 里的 render 函数当中，同时也会通过 wxs-loader 处理，单独输出一份可运行的 wxs js 文件供 wxml 引入使用</span>
+  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> module <span class="token keyword">in</span> meta<span class="token punctuation">.</span>wxsModuleMap<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    isSync <span class="token operator">=</span> <span class="token boolean">false</span>
+    <span class="token keyword">let</span> src <span class="token operator">=</span> meta<span class="token punctuation">.</span>wxsModuleMap<span class="token punctuation">[</span>module<span class="token punctuation">]</span>
+    <span class="token keyword">const</span> expression <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">require(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>src<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span>
+    <span class="token keyword">const</span> deps <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+    <span class="token comment">// parser 为 js 的编译器</span>
+    parser<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>expression<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">current</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 需要注意的是这里需要部署 addDependency 接口，因为通过 parse.parse 对代码进行编译的时候，会调用这个接口来获取 require(${JSON.stringify(src)}) 编译产生的依赖模块</span>
+        <span class="token function-variable function">addDependency</span><span class="token operator">:</span> <span class="token parameter">dep</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          dep<span class="token punctuation">.</span>userRequest <span class="token operator">=</span> module
+          deps<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>dep<span class="token punctuation">)</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">module</span><span class="token operator">:</span> issuer
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    issuer<span class="token punctuation">.</span><span class="token function">addVariable</span><span class="token punctuation">(</span>module<span class="token punctuation">,</span> expression<span class="token punctuation">,</span> deps<span class="token punctuation">)</span> <span class="token comment">// 给 issuer module 添加 variable 依赖</span>
+    <span class="token function">iterationOfArrayCallback</span><span class="token punctuation">(</span>deps<span class="token punctuation">,</span> addDependency<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+
+  <span class="token comment">// 如果没有 wxs module 的处理，那么 template-compiler 即为同步任务，否则为异步任务</span>
+  <span class="token keyword">if</span> <span class="token punctuation">(</span>isSync<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> result
+  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> callback <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">async</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+
+    <span class="token keyword">const</span> sortedDependencies <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> pair1 <span class="token keyword">of</span> dependencies<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> pair2 <span class="token keyword">of</span> pair1<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        sortedDependencies<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+          <span class="token literal-property property">factory</span><span class="token operator">:</span> pair1<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">dependencies</span><span class="token operator">:</span> pair2<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token comment">// 调用 compilation.addModuleDependencies 方法，将 wxs module 作为 issuer module 的依赖加入到编译流程中</span>
+    compilation<span class="token punctuation">.</span><span class="token function">addModuleDependencies</span><span class="token punctuation">(</span>
+      issuer<span class="token punctuation">,</span>
+      sortedDependencies<span class="token punctuation">,</span>
+      compilation<span class="token punctuation">.</span>bail<span class="token punctuation">,</span>
+      <span class="token keyword">null</span><span class="token punctuation">,</span>
+      <span class="token boolean">true</span><span class="token punctuation">,</span>
+      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> result<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="template-script-style-json-模块单文件的生成"><a href="#template-script-style-json-模块单文件的生成" class="header-anchor">#</a> template/script/style/json 模块单文件的生成</h3> <p>不同于 Vue 借助 webpack 是将 Vue 单文件最终打包成单独的 js chunk 文件。而小程序的规范是每个页面/组件需要对应的 wxml/js/wxss/json 4个文件。因为 mpx 使用单文件的方式去组织代码，所以在编译环节所需要做的工作之一就是将 mpx 单文件当中不同 block 的内容拆解到对应文件类型当中。在动态入口编译的小节里面我们了解到 mpx 会分析每个 mpx 文件的引用依赖，从而去给这个文件创建一个 entry 依赖(SingleEntryPlugin)并加入到 webpack 的编译流程当中。我们还是继续看下 mpx loader 对于 mpx 单文件初步编译转化后的内容：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">/* script */</span>
+<span class="token keyword">export</span> <span class="token operator">*</span> <span class="token keyword">from</span> <span class="token string">&quot;!!babel-loader!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=script&amp;index=0!./list.mpx&quot;</span>
+
+<span class="token comment">/* styles */</span>
+<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=styles&amp;index=0!../../node_modules/@mpxjs/webpack-plugin/lib/wxss/loader?root=&amp;importLoaders=1&amp;extract=true!../../node_modules/@mpxjs/webpack-plugin/lib/style-compiler/index?{\&quot;id\&quot;:\&quot;2271575d\&quot;,\&quot;scoped\&quot;:false,\&quot;sourceMap\&quot;:false,\&quot;transRpx\&quot;:{\&quot;mode\&quot;:\&quot;only\&quot;,\&quot;comment\&quot;:\&quot;use rpx\&quot;,\&quot;include\&quot;:\&quot;/Users/XRene/demo/mpx-demo-source/src\&quot;}}!stylus-loader!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=styles&amp;index=0!./list.mpx&quot;</span><span class="token punctuation">)</span>
+
+<span class="token comment">/* json */</span>
+<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=json&amp;index=0!../../node_modules/@mpxjs/webpack-plugin/lib/json-compiler/index?root=!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=json&amp;index=0!./list.mpx&quot;</span><span class="token punctuation">)</span>
+
+<span class="token comment">/* template */</span>
+<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=template&amp;index=0!../../node_modules/@mpxjs/webpack-plugin/lib/wxml/wxml-loader?root=!../../node_modules/@mpxjs/webpack-plugin/lib/template-compiler/index?{\&quot;usingComponents\&quot;:[],\&quot;hasScoped\&quot;:false,\&quot;isNative\&quot;:false,\&quot;moduleId\&quot;:\&quot;2271575d\&quot;}!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=template&amp;index=0!./list.mpx&quot;</span><span class="token punctuation">)</span>
+</code></pre></div><p>接下来可以看下 styles/json/template 这3个 block 的处理流程是什么样。</p> <p>首先来看下 json block 的处理流程：<code>list.mpx -&gt; json-compiler -&gt; extractor</code>。第一个阶段 list.mpx 文件经由 json-compiler 的处理流程在前面的章节已经讲过，主要就是分析依赖增加动态入口的编译过程。当所有的依赖分析完后，调用 json-compiler loader 的异步回调函数：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// lib/json-compiler/index.js</span>
+
+module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+
+  <span class="token operator">...</span>
+  <span class="token keyword">const</span> nativeCallback <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">async</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token operator">...</span>
+
+  <span class="token keyword">let</span> callbacked <span class="token operator">=</span> <span class="token boolean">false</span>
+  <span class="token keyword">const</span> <span class="token function-variable function">callback</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> processOutput</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token function">checkEntryDeps</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      callbacked <span class="token operator">=</span> <span class="token boolean">true</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">nativeCallback</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
+      <span class="token keyword">let</span> output <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">var json = </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>json<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;\n</span><span class="token template-punctuation string">`</span></span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>processOutput<span class="token punctuation">)</span> output <span class="token operator">=</span> <span class="token function">processOutput</span><span class="token punctuation">(</span>output<span class="token punctuation">)</span>
+      output <span class="token operator">+=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">module.exports = JSON.stringify(json, null, 2);\n</span><span class="token template-punctuation string">`</span></span>
+      <span class="token function">nativeCallback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> output<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>这里我们可以看到经由 json-compiler 处理后，通过<code>nativeCallback</code>方法传入下一个 loader 的文本内容形如：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> json <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/components/list397512ea/list&quot;</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>json<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span>
+</code></pre></div><p>即这段文本内容会传递到下一个 loader 内部进行处理，即 extractor。接下来我们来看下 extractor 里面主要是实现了哪些功能：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// lib/extractor.js</span>
+
+module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token operator">...</span>
+  <span class="token keyword">const</span> contentLoader <span class="token operator">=</span> normalize<span class="token punctuation">.</span><span class="token function">lib</span><span class="token punctuation">(</span><span class="token string">'content-loader'</span><span class="token punctuation">)</span>
+  <span class="token keyword">let</span> request <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">!!</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>contentLoader<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">?</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>resource<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token comment">// 构建一个新的 resource，且这个 resource 只需要经过 content-loader</span>
+  <span class="token keyword">let</span> resultSource <span class="token operator">=</span> defaultResultSource
+  <span class="token keyword">const</span> childFilename <span class="token operator">=</span> <span class="token string">'extractor-filename'</span>
+  <span class="token keyword">const</span> outputOptions <span class="token operator">=</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> childFilename
+  <span class="token punctuation">}</span>
+  <span class="token comment">// 创建一个 child compiler</span>
+  <span class="token keyword">const</span> childCompiler <span class="token operator">=</span> mainCompilation<span class="token punctuation">.</span><span class="token function">createChildCompiler</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span> outputOptions<span class="token punctuation">,</span> <span class="token punctuation">[</span>
+    <span class="token keyword">new</span> <span class="token class-name">NodeTemplatePlugin</span><span class="token punctuation">(</span>outputOptions<span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token keyword">new</span> <span class="token class-name">LibraryTemplatePlugin</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'commonjs2'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 最终输出的 chunk 内容遵循 commonjs 规范的可执行的模块代码 module.exports = (function(modules) {})([modules])</span>
+    <span class="token keyword">new</span> <span class="token class-name">NodeTargetPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token keyword">new</span> <span class="token class-name">SingleEntryPlugin</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">,</span> request<span class="token punctuation">,</span> resourcePath<span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token keyword">new</span> <span class="token class-name">LimitChunkCountPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">maxChunks</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">]</span><span class="token punctuation">)</span>
+
+  <span class="token operator">...</span>
+  childCompiler<span class="token punctuation">.</span>hooks<span class="token punctuation">.</span>thisCompilation<span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token string">'MpxWebpackPlugin '</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">compilation</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 创建 loaderContext 时触发的 hook，在这个 hook 触发的时候，将原本从 json-compiler 传递过来的 content 内容挂载至 loaderContext.__mpx__ 属性上面以供接下来的 content -loader 来进行使用</span>
+    compilation<span class="token punctuation">.</span>hooks<span class="token punctuation">.</span>normalModuleLoader<span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token string">'MpxWebpackPlugin'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">loaderContext<span class="token punctuation">,</span> module</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 传递编译结果，子编译器进入content-loader后直接输出</span>
+      loaderContext<span class="token punctuation">.</span>__mpx__ <span class="token operator">=</span> <span class="token punctuation">{</span>
+        content<span class="token punctuation">,</span>
+        <span class="token literal-property property">fileDependencies</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getDependencies</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">contextDependencies</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getContextDependencies</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+  <span class="token keyword">let</span> source
+
+  childCompiler<span class="token punctuation">.</span>hooks<span class="token punctuation">.</span>afterCompile<span class="token punctuation">.</span><span class="token function">tapAsync</span><span class="token punctuation">(</span><span class="token string">'MpxWebpackPlugin'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">compilation<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 这里 afterCompile 产出的 assets 的代码当中是包含 webpack runtime bootstrap 的代码，不过需要注意的是这个 source 模块的产出形式</span>
+    <span class="token comment">// 因为使用了 new LibraryTemplatePlugin(null, 'commonjs2') 等插件。所以产出的 source 是可以在 node 环境下执行的 module</span>
+    <span class="token comment">// 因为在 loaderContext 上部署了 exec 方法，即可以直接执行 commonjs 规范的 module 代码，这样就最终完成了 mpx 单文件当中不同模块的抽离工作</span>
+    source <span class="token operator">=</span> compilation<span class="token punctuation">.</span>assets<span class="token punctuation">[</span>childFilename<span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> compilation<span class="token punctuation">.</span>assets<span class="token punctuation">[</span>childFilename<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">source</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+
+    <span class="token comment">// Remove all chunk assets</span>
+    compilation<span class="token punctuation">.</span>chunks<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">chunk</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      chunk<span class="token punctuation">.</span>files<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token keyword">delete</span> compilation<span class="token punctuation">.</span>assets<span class="token punctuation">[</span>file<span class="token punctuation">]</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+    <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+  childCompiler<span class="token punctuation">.</span><span class="token function">runAsChild</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> entries<span class="token punctuation">,</span> compilation</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token operator">...</span>
+    <span class="token keyword">try</span> <span class="token punctuation">{</span>
+      <span class="token comment">// exec 是 loaderContext 上提供的一个方法，在其内部会构建原生的 node.js module，并执行这个 module 的代码</span>
+      <span class="token comment">// 执行这个 module 代码后获取的内容就是通过 module.exports 导出的内容</span>
+      <span class="token keyword">let</span> text <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>source<span class="token punctuation">,</span> request<span class="token punctuation">)</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        text <span class="token operator">=</span> text<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          <span class="token keyword">return</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+
+      <span class="token keyword">let</span> extracted <span class="token operator">=</span> <span class="token function">extract</span><span class="token punctuation">(</span>text<span class="token punctuation">,</span> options<span class="token punctuation">.</span>type<span class="token punctuation">,</span> resourcePath<span class="token punctuation">,</span> <span class="token operator">+</span>options<span class="token punctuation">.</span>index<span class="token punctuation">,</span> selfResourcePath<span class="token punctuation">)</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>extracted<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        resultSource <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">module.exports = __webpack_public_path__ + </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>extracted<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;</span><span class="token template-punctuation string">`</span></span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token function">nativeCallback</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>resultSource<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token function">nativeCallback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> resultSource<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+      <span class="token function">nativeCallback</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>稍微总结下上面的处理流程：</p> <ol><li>构建一个以当前模块路径及 content-loader 的 resource 路径</li> <li>以这个 resource 路径作为入口模块，创建一个 childCompiler</li> <li>childCompiler 启动后，创建 loaderContext 的过程中，将 content 文本内容挂载至 loaderContext.<strong>mpx</strong> 上，这样在 content-loader 在处理入口模块的时候仅仅就是取出这个 content 文本内容并返回。实际上这个入口模块经过 loader 的过程不会做任何的处理工作，仅仅是将父 compilation 传入的 content 返回出去。</li> <li>loader 处理模块的环节结束后，进入到 module.build 阶段，这个阶段对 content 内容没有太多的处理</li> <li>createAssets 阶段，输出 chunk。</li> <li>将输出的 chunk 构建为一个原生的 node.js 模块并执行，获取从这个 chunk 导出的内容。也就是模块通过<code>module.exports</code>导出的内容。</li></ol> <p>所以上面的示例 demo 最终会输出一个 json 文件，里面包含的内容即为：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">{</span>
+  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/components/list397512ea/list&quot;</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="运行时环节"><a href="#运行时环节" class="header-anchor">#</a> 运行时环节</h2> <p>以上几个章节主要是分析了几个 Mpx 在编译构建环节所做的工作。接下来我们来看下 Mpx 在运行时环节做了哪些工作。</p> <h3 id="响应式系统"><a href="#响应式系统" class="header-anchor">#</a> 响应式系统</h3> <p>小程序也是通过数据去驱动视图的渲染，需要手动的调用<code>setData</code>去完成这样一个动作。同时小程序的视图层也提供了用户交互的响应事件系统，在 js 代码中可以去注册相关的事件回调并在回调中去更改相关数据的值。Mpx 使用 Mobx 作为响应式数据工具并引入到小程序当中，使得小程序也有一套完成的响应式的系统，让小程序的开发有了更好的体验。</p> <p>还是从组件的角度开始分析 mpx 的整个响应式的系统。每次通过<code>createComponent</code>方法去创建一个新的组件，这个方法将原生的小程序创造组件的方法<code>Component</code>做了一层代理，例如在 attched 的生命周期钩子函数内部会注入一个 mixin：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// attached 生命周期钩子 mixin</span>
+
+<span class="token function">attached</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 提供代理对象需要的api</span>
+  <span class="token function">transformApiForProxy</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> currentInject<span class="token punctuation">)</span>
+  <span class="token comment">// 缓存options</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>$rawOptions <span class="token operator">=</span> rawOptions <span class="token comment">// 原始的，没有剔除 customKeys 的 options 配置</span>
+  <span class="token comment">// 创建proxy对象</span>
+  <span class="token keyword">const</span> mpxProxy <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MPXProxy</span><span class="token punctuation">(</span>rawOptions<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span> <span class="token comment">// 将当前实例代理到 MPXProxy 这个代理对象上面去</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>$mpxProxy <span class="token operator">=</span> mpxProxy <span class="token comment">// 在小程序实例上绑定 $mpxProxy 的实例</span>
+  <span class="token comment">// 组件监听视图数据更新, attached之后才能拿到properties</span>
+  <span class="token keyword">this</span><span class="token punctuation">.</span>$mpxProxy<span class="token punctuation">.</span><span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>在这个方法内部首先调用<code>transformApiForProxy</code>方法对组件实例上下文<code>this</code>做一层代理工作，在 context 上下文上去重置小程序的 setData 方法，同时拓展 context 相关的属性内容：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">transformApiForProxy</span> <span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> currentInject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> rawSetData <span class="token operator">=</span> context<span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token comment">// setData 绑定对应的 context 上下文</span>
+  Object<span class="token punctuation">.</span><span class="token function">defineProperties</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">setData</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 重置 context 的 setData 方法</span>
+      <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$mpxProxy<span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$mpxProxy<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">true</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">__getInitialData</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> context<span class="token punctuation">.</span>data
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">false</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">__render</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 小程序原生的 setData 方法</span>
+      <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> rawSetData
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">false</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token comment">// context 绑定注入的render函数</span>
+  <span class="token keyword">if</span> <span class="token punctuation">(</span>currentInject<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>currentInject<span class="token punctuation">.</span>render<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 编译过程中生成的 render 函数</span>
+      Object<span class="token punctuation">.</span><span class="token function">defineProperties</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">__injectedRender</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            <span class="token keyword">return</span> currentInject<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">false</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>currentInject<span class="token punctuation">.</span>getRefsData<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      Object<span class="token punctuation">.</span><span class="token function">defineProperties</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">__getRefsData</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            <span class="token keyword">return</span> currentInject<span class="token punctuation">.</span>getRefsData
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">false</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>接下来实例化一个 mpxProxy 实例并挂载至 context 上下文的 $mpxProxy 属性上，并调用 mpxProxy 的 created 方法完成这个代理对象的初始化的工作。在 created 方法内部主要是完成了以下的几个工作：</p> <ol><li>initApi，在组件实例 this 上挂载<code>$watch</code>,<code>$forceUpdate</code>,<code>$updated</code>,<code>$nextTick</code>等方法，这样在你的业务代码当中即可直接访问实例上部署好的这些方法；</li> <li>initData</li> <li>initComputed，将 computed 计算属性字段全部代理至组件实例 this 上；</li> <li>通过 Mobx observable 方法将 data 数据转化为响应式的数据；</li> <li>initWatch，初始化所有的 watcher 实例；</li> <li>initRender，初始化一个 renderWatcher 实例；</li></ol> <p>这里我们具体的来看下 initRender 方法内部是如何进行工作的：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">MPXProxy</span> <span class="token punctuation">{</span>
+  <span class="token operator">...</span>
+  <span class="token function">initRender</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">let</span> renderWatcher
+    <span class="token keyword">let</span> renderExcutedFailed <span class="token operator">=</span> <span class="token boolean">false</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>target<span class="token punctuation">.</span>__injectedRender<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// webpack 注入的有关这个 page/component 的 renderFunction</span>
+      renderWatcher <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>target<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token keyword">if</span> <span class="token punctuation">(</span>renderExcutedFailed<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+          <span class="token keyword">try</span> <span class="token punctuation">{</span>
+            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">__injectedRender</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 执行 renderFunction，获取渲染所需的响应式数据</span>
+          <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            <span class="token operator">...</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+        <span class="token function-variable function">handler</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">ret</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>renderExcutedFailed<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderWithData</span><span class="token punctuation">(</span>ret<span class="token punctuation">)</span> <span class="token comment">// 渲染页面</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">forceCallback</span><span class="token operator">:</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+  <span class="token operator">...</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>在 initRender 方法内部非常清楚的看到，首先判断这个 page/component 是否具有 renderFunction，如果有的话那么就直接实例化一个 renderWatcher：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Watcher</span> <span class="token punctuation">{</span>
+  <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> expr<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>destroyed <span class="token operator">=</span> <span class="token boolean">false</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">get</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token function">type</span><span class="token punctuation">(</span>expr<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'String'</span> <span class="token operator">?</span> <span class="token function">getByPath</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> expr<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">expr</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+    <span class="token keyword">const</span> callbackType <span class="token operator">=</span> <span class="token function">type</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>callbackType <span class="token operator">===</span> <span class="token string">'Object'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      options <span class="token operator">=</span> callback
+      callback <span class="token operator">=</span> <span class="token keyword">null</span>
+    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>callbackType <span class="token operator">===</span> <span class="token string">'String'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      callback <span class="token operator">=</span> context<span class="token punctuation">[</span>callback<span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>callback <span class="token operator">=</span> <span class="token keyword">typeof</span> callback <span class="token operator">===</span> <span class="token string">'function'</span> <span class="token operator">?</span> <span class="token function">action</span><span class="token punctuation">(</span><span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">null</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>options <span class="token operator">=</span> options <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token operator">++</span>uid
+    <span class="token comment">// 创建一个新的 reaction</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>reaction <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Reaction</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">mpx-watcher-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token comment">// 在调用 getValue 函数的时候，实际上是调用 reaction.track 方法，这个方法内部会自动执行 effect 函数，即执行 this.update() 方法，这样便会出发一次模板当中的 render 函数来完成依赖的收集</span>
+    <span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>immediateAsync<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 放置到一个队列里面去执行</span>
+      <span class="token function">queueWatcher</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// 立即执行 callback</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token operator">=</span> value
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>immediate<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>callback <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+
+  <span class="token function">getValue</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">let</span> value
+    <span class="token keyword">this</span><span class="token punctuation">.</span>reaction<span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 获取注入的 render 函数执行后返回的 renderData 的值，在执行 render 函数的过程中，就会访问响应式数据的值</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>deep<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">const</span> valueType <span class="token operator">=</span> <span class="token function">type</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
+        <span class="token comment">// 某些情况下，最外层是非isObservable 对象，比如同时观察多个属性时</span>
+        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isObservable</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>valueType <span class="token operator">===</span> <span class="token string">'Array'</span> <span class="token operator">||</span> valueType <span class="token operator">===</span> <span class="token string">'Object'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token keyword">if</span> <span class="token punctuation">(</span>valueType <span class="token operator">===</span> <span class="token string">'Array'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            value <span class="token operator">=</span> value<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token function">toJS</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+            <span class="token keyword">const</span> newValue <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+            Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+              newValue<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">toJS</span><span class="token punctuation">(</span>value<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
+            <span class="token punctuation">}</span><span class="token punctuation">)</span>
+            value <span class="token operator">=</span> newValue
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+          value <span class="token operator">=</span> <span class="token function">toJS</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isObservableArray</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        value<span class="token punctuation">.</span><span class="token function">peek</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isObservableObject</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token function">keys</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token keyword">return</span> value
+  <span class="token punctuation">}</span>
+
+  <span class="token function">update</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>sync<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+      <span class="token function">queueWatcher</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+
+  <span class="token function">run</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> immediateAsync <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">'value'</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> oldValue <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value
+    <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 重新获取新的 renderData 的值</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>immediateAsync <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token operator">!==</span> oldValue <span class="token operator">||</span> <span class="token function">isObject</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>forceCallback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        immediateAsync <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">,</span> oldValue<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+
+  <span class="token function">destroy</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>destroyed <span class="token operator">=</span> <span class="token boolean">true</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>reaction<span class="token punctuation">.</span><span class="token function">getDisposer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>Watcher 观察者核心实现的工作流程就是：</p> <ol><li>构建一个 Reaction 实例；</li> <li>调用 getValue 方法，即 reaction.track，在这个方法内部执行过程中会调用 renderFunction，这样在 renderFunction 方法的执行过程中便会访问到渲染所需要的响应式的数据并完成依赖收集；</li> <li>根据 immediateAsync 配置来决定回调是放到下一帧还是立即执行；</li> <li>当响应式数据发生变化的时候，执行 reaction 实例当中的回调函数，即<code>this.update()</code>方法来完成页面的重新渲染。</li></ol> <p>mpx 在构建这个响应式的系统当中，主要有2个大的环节，其一为在构建编译的过程中，将 template 模块转化为 renderFunction，提供了渲染模板时所需响应式数据的访问机制，并将 renderFunction 注入到运行时代码当中，其二就是在运行环节，mpx 通过构建一个小程序实例的代理对象，将小程序实例上的数据访问全部代理至 MPXProxy 实例上，而 MPXProxy 实例即 mpx 基于 Mobx 去构建的一套响应式数据对象，首先将 data 数据转化为响应式数据，其次提供了 computed 计算属性，watch 方法等一系列增强的拓展属性/方法，虽然在你的业务代码当中 page/component 实例 this 都是小程序提供的，但是最终经过代理机制，实际上访问的是 MPXProxy 所提供的增强功能，所以 mpx 也是通过这样一个代理对象去接管了小程序的实例。需要特别指出的是，mpx 将小程序官方提供的 setData 方法同样收敛至内部，这也是响应式系统提供的基础能力，即开发者只需要关注业务开发，而有关小程序渲染运行在 mpx 内部去帮你完成。</p> <h2 id="性能优化"><a href="#性能优化" class="header-anchor">#</a> 性能优化</h2> <p>由于小程序的双线程的架构设计，逻辑层和视图层之间需要桥接 native bridge。如果要完成视图层的更新，那么逻辑层需要调用 setData 方法，数据经由 native bridge，再到渲染层，这个工程流程为：</p> <blockquote><p>小程序逻辑层调用宿主环境的 setData 方法；</p></blockquote> <blockquote><p>逻辑层执行 JSON.stringify 将待传输数据转换成字符串并拼接到特定的JS脚本，并通过evaluateJavascript 执行脚本将数据传输到渲染层；</p></blockquote> <blockquote><p>渲染层接收到后， WebView JS 线程会对脚本进行编译，得到待更新数据后进入渲染队列等待 WebView 线程空闲时进行页面渲染；</p></blockquote> <blockquote><p>WebView 线程开始执行渲染时，待更新数据会合并到视图层保留的原始 data 数据，并将新数据套用在WXML片段中得到新的虚拟节点树。经过新虚拟节点树与当前节点树的 diff 对比，将差异部分更新到UI视图。同时，将新的节点树替换旧节点树，用于下一次重渲染。</p></blockquote> <p><a href="https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&amp;mid=2651232791&amp;idx=1&amp;sn=4b83b66d376b1331a992d242cb2a0f17&amp;chksm=bd4943938a3eca853a687765397517cc0ab9cfe4c711705e8fd821bbea8a1ab3c115c8c2fc65&amp;scene=21#wechat_redirect" target="_blank" rel="noopener noreferrer">文章来源<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>而 setData 作为逻辑层和视图层之间通讯的核心接口，那么对于这个接口的使用遵照一些准则将有助于性能方面的提升。</p> <h3 id="尽可能的减少-setdata-传输的数据"><a href="#尽可能的减少-setdata-传输的数据" class="header-anchor">#</a> 尽可能的减少 setData 传输的数据</h3> <p>Mpx 在这个方面所做的工作之一就是基于数据路径的 diff。这也是官方所推荐的 setData 的方式。每次响应式数据发生了变化，调用 setData 方法的时候确保传递的数据都为 diff 过后的最小数据集，这样来减少 setData 传输的数据。</p> <p>接下来我们就来看下这个优化手段的具体实现思路，首先还是从一个简单的 demo 来看：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">obj</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">2</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+  <span class="token function">onShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>obj<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token string">'d'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>在示例 demo 当中，声明了一个 obj 对象(这个对象里面的内容在模块当中被使用到了)。然后经过 200ms 后，手动修改 obj.a 的值，因为对于 c 字段来说它的值没有发生改变，而 d 字段发生了改变。因此在 setData 方法当中也应该只更新 obj.a.d 的值，即：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token string">'obj.a.d'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">)</span>
+</code></pre></div><p>因为 mpx 是整体接管了小程序当中有关调用 setData 方法并驱动视图更新的机制。所以当你在改变某些数据的时候，mpx 会帮你完成数据的 diff 工作，以保证每次调用 setData 方法时，传入的是最小的更新数据集。</p> <p>这里也简单的分析下 mpx 是如何去实现这样的功能的。在上文的编译构建阶段有分析到 mpx 生成的 Render Function，这个 Render Function 每次执行的时候会返回一个 renderData，而这个 renderData 即用以接下来进行 setData 驱动视图渲染的原始数据。renderData 的数据组织形式是模板当中使用到的数据路径作为 key 键值，对应的值使用一个数组组织，数组第一项为数据的访问路径(可获取到对应渲染数据)，第二项为数据路径的第一个键值，例如在 demo 示例当中的 renderData 数据如下：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>renderData<span class="token punctuation">[</span><span class="token string">'obj.a.c'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">.</span>c<span class="token punctuation">,</span> <span class="token string">'obj'</span><span class="token punctuation">]</span>
+renderData<span class="token punctuation">[</span><span class="token string">'obj.a.d'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">.</span>d<span class="token punctuation">,</span> <span class="token string">'obj'</span><span class="token punctuation">]</span>
+</code></pre></div><p>当页面第一次渲染，或者是响应式输出发生变化的时候，Render Function 都会被执行一次用以获取最新的 renderData 来进行接下来的页面渲染过程。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// src/core/proxy.js</span>
+
+<span class="token keyword">class</span> <span class="token class-name">MPXProxy</span> <span class="token punctuation">{</span>
+  <span class="token operator">...</span>
+  <span class="token function">renderWithData</span><span class="token punctuation">(</span><span class="token parameter">rawRenderData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// rawRenderData 即为 Render Function 执行后获取的初始化 renderData</span>
+    <span class="token keyword">const</span> renderData <span class="token operator">=</span> <span class="token function">preprocessRenderData</span><span class="token punctuation">(</span>rawRenderData<span class="token punctuation">)</span> <span class="token comment">// renderData 数据的预处理</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>miniRenderData<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 最小数据渲染集，页面/组件初次渲染的时候使用 miniRenderData 进行渲染，初次渲染的时候是没有数据需要进行 diff 的</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>miniRenderData <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> renderData<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 遍历数据访问路径</span>
+        <span class="token keyword">if</span> <span class="token punctuation">(</span>renderData<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token keyword">let</span> item <span class="token operator">=</span> renderData<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
+          <span class="token keyword">let</span> data <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
+          <span class="token keyword">let</span> firstKey <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token comment">// 某个字段 path 的第一个 key 值</span>
+          <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>localKeys<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>firstKey<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            <span class="token keyword">this</span><span class="token punctuation">.</span>miniRenderData<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">diffAndCloneA</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">.</span>clone
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doRender</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>miniRenderData<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// 非初次渲染使用 processRenderData 进行数据的处理，主要是需要进行数据的 diff 取值工作，并更新 miniRenderData 的值</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doRender</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">processRenderData</span><span class="token punctuation">(</span>renderData<span class="token punctuation">)</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+
+  <span class="token function">processRenderData</span><span class="token punctuation">(</span><span class="token parameter">renderData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> renderData<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>renderData<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">let</span> item <span class="token operator">=</span> renderData<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
+        <span class="token keyword">let</span> data <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
+        <span class="token keyword">let</span> firstKey <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
+        <span class="token keyword">let</span> <span class="token punctuation">{</span> clone<span class="token punctuation">,</span> diff <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">diffAndCloneA</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>miniRenderData<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 开始数据 diff</span>
+        <span class="token comment">// firstKey 必须是为响应式数据的 key，且这个发生变化的 key 为 forceUpdateKey 或者是在 diff 阶段发现确实出现了 diff 的情况</span>
+        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>localKeys<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>firstKey<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">checkInForceUpdateKeys</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token operator">||</span> diff<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token keyword">this</span><span class="token punctuation">.</span>miniRenderData<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> result<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> clone
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+    <span class="token keyword">return</span> result
+  <span class="token punctuation">}</span>
+  <span class="token operator">...</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// src/helper/utils.js</span>
+
+<span class="token comment">// 如果 renderData 里面即包含对某个 key 的访问，同时还有对这个 key 的子节点访问的话，那么需要剔除这个子节点</span>
+<span class="token comment">/**
+ * process renderData, remove sub node if visit parent node already
+ * @param {Object} renderData
+ * @return {Object} processedRenderData
+ */</span>
+<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">preprocessRenderData</span> <span class="token punctuation">(</span><span class="token parameter">renderData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token comment">// method for get key path array</span>
+  <span class="token keyword">const</span> <span class="token function-variable function">processKeyPathMap</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">keyPathMap</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">let</span> keyPath <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>keyPathMap<span class="token punctuation">)</span>
+    <span class="token keyword">return</span> keyPath<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">keyA</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> keyPath<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">keyB</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token keyword">if</span> <span class="token punctuation">(</span>keyA<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span>keyB<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> keyA <span class="token operator">!==</span> keyB<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token keyword">let</span> nextChar <span class="token operator">=</span> keyA<span class="token punctuation">[</span>keyB<span class="token punctuation">.</span>length<span class="token punctuation">]</span>
+          <span class="token keyword">if</span> <span class="token punctuation">(</span>nextChar <span class="token operator">===</span> <span class="token string">'.'</span> <span class="token operator">||</span> nextChar <span class="token operator">===</span> <span class="token string">'['</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            <span class="token keyword">return</span> <span class="token boolean">false</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+        <span class="token keyword">return</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+
+  <span class="token keyword">const</span> processedRenderData <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+  <span class="token keyword">const</span> renderDataFinalKey <span class="token operator">=</span> <span class="token function">processKeyPathMap</span><span class="token punctuation">(</span>renderData<span class="token punctuation">)</span> <span class="token comment">// 获取最终需要被渲染的数据的 key</span>
+  Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>renderData<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>renderDataFinalKey<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      processedRenderData<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> renderData<span class="token punctuation">[</span>item<span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token keyword">return</span> processedRenderData
+<span class="token punctuation">}</span>
+</code></pre></div><p>其中在 processRenderData 方法内部调用了 diffAndCloneA 方法去完成数据的 diff 工作。在这个方法内部判断新、旧值是否发生变化，返回的 diff 字段即表示是否发生了变化，clone 为 diffAndCloneA 接受到的第一个数据的深拷贝值。</p> <p>这里大致的描述下相关流程：</p> <ol><li>响应式的数据发生了变化，触发 Render Function 重新执行，获取最新的 renderData；</li> <li>renderData 的预处理，主要是用以剔除通过路径访问时同时有父、子路径情况下的子路径的 key；</li> <li>判断是否存在 miniRenderData 最小数据渲染集，如果没有那么 Mpx 完成 miniRenderData 最小渲染数据集的收集，如果有那么使用处理后的 renderData 和 miniRenderData 进行数据的 diff 工作(diffAndCloneA)，并更新最新的 miniRenderData 的值；</li> <li>调用 doRender 方法，进入到 setData 阶段</li></ol> <p>相关参阅文档：</p> <ul><li><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#Page.prototype.setData(Object%20data,%20Function%20callback)" target="_blank" rel="noopener noreferrer">Page<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="尽可能的减少-setdata-的调用频次"><a href="#尽可能的减少-setdata-的调用频次" class="header-anchor">#</a> 尽可能的减少 setData 的调用频次</h3> <p>每次调用 setData 方法都会完成一次从逻辑层 -&gt; native bridge -&gt; 视图层的通讯，并完成页面的更新。因此频繁的调用 setData 方法势必也会造成视图的多次渲染，用户的交互受阻。所以对于 setData 方法另外一个优化角度就是尽可能的减少 setData 的调用频次，将多个同步的 setData 操作合并到一次调用当中。接下来就来看下 mpx 在这方面是如何做优化的。</p> <p>还是先来看一个简单的 demo:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'hello'</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">obj</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">2</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">obj</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">handler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>msg <span class="token operator">=</span> <span class="token string">'world'</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">onShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>obj<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token string">'d'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>在示例 demo 当中，msg 和 obj 都作为模板依赖的数据，这个组件开始展示后的 200ms，更新 obj.a 的值，同时 obj 被 watch，当 obj 发生改变后，更新 msg 的值。这里的逻辑处理顺序是：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>obj<span class="token punctuation">.</span>a 变化 <span class="token operator">-</span><span class="token operator">&gt;</span> 将 renderWatch 加入到执行队列 <span class="token operator">-</span><span class="token operator">&gt;</span> 触发 obj watch <span class="token operator">-</span><span class="token operator">&gt;</span> 将 obj watch 加入到执行队列 <span class="token operator">-</span><span class="token operator">&gt;</span> 将执行队列放到下一帧执行 <span class="token operator">-</span><span class="token operator">&gt;</span> 按照 watch id 从小到大依次执行 watch<span class="token punctuation">.</span>run <span class="token operator">-</span><span class="token operator">&gt;</span> setData <span class="token function">方法调用一次</span><span class="token punctuation">(</span>即 renderWatch 回调<span class="token punctuation">)</span>，统一更新 obj<span class="token punctuation">.</span>a 及 msg <span class="token operator">-</span><span class="token operator">&gt;</span> 视图重新渲染
+</code></pre></div><p>接下来就来具体看下这个流程：由于 obj 作为模板渲染的依赖数据，自然会被这个组件的 renderWatch 作为依赖而被收集。当 obj 的值发生变化后，首先触发 reaction 的回调，即 <code>this.update()</code> 方法，如果是个同步的 watch，那么立即调用 <code>this.run()</code> 方法，即 watcher 监听的回调方法，否则就通过 <code>queueWatcher(this)</code> 方法将这个 watcher 加入到执行队列：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// src/core/watcher.js</span>
+<span class="token keyword">export</span> <span class="token keyword">default</span> Watcher <span class="token punctuation">{</span>
+  <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> expr<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token operator">...</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token operator">++</span>uid
+    <span class="token keyword">this</span><span class="token punctuation">.</span>reaction <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Reaction</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">mpx-watcher-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token operator">...</span>
+  <span class="token punctuation">}</span>
+
+  <span class="token function">update</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>sync<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+      <span class="token function">queueWatcher</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>而在 queueWatcher 方法中，lockTask 维护了一个异步锁，即将 flushQueue 当成微任务统一放到下一帧去执行。所以在 flushQueue 开始执行之前，还会有同步的代码将 watcher 加入到执行队列当中，当 flushQueue 开始执行的时候，依照 watcher.id 升序依次执行，这样去确保 renderWatcher 在执行前，其他所有的 watcher 回调都执行完了，即执行 renderWatcher 的回调的时候获取到的 renderData 都是最新的，然后再去进行 setData 的操作，完成页面的更新。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// src/core/queueWatcher.js</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> asyncLock <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../helper/utils'</span>
+<span class="token keyword">const</span> queue <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+<span class="token keyword">const</span> idsMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+<span class="token keyword">let</span> flushing <span class="token operator">=</span> <span class="token boolean">false</span>
+<span class="token keyword">let</span> curIndex <span class="token operator">=</span> <span class="token number">0</span>
+<span class="token keyword">const</span> lockTask <span class="token operator">=</span> <span class="token function">asyncLock</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">queueWatcher</span> <span class="token punctuation">(</span><span class="token parameter">watcher</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>watcher<span class="token punctuation">.</span>id <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> watcher <span class="token operator">===</span> <span class="token string">'function'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    watcher <span class="token operator">=</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">Infinity</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">run</span><span class="token operator">:</span> watcher
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>idsMap<span class="token punctuation">[</span>watcher<span class="token punctuation">.</span>id<span class="token punctuation">]</span> <span class="token operator">||</span> watcher<span class="token punctuation">.</span>id <span class="token operator">===</span> <span class="token number">Infinity</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    idsMap<span class="token punctuation">[</span>watcher<span class="token punctuation">.</span>id<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">true</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>flushing<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      queue<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>watcher<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> i <span class="token operator">=</span> queue<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span>
+      <span class="token keyword">while</span> <span class="token punctuation">(</span>i <span class="token operator">&gt;</span> curIndex <span class="token operator">&amp;&amp;</span> watcher<span class="token punctuation">.</span>id <span class="token operator">&lt;</span> queue<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        i<span class="token operator">--</span>
+      <span class="token punctuation">}</span>
+      queue<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> watcher<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+    <span class="token function">lockTask</span><span class="token punctuation">(</span>flushQueue<span class="token punctuation">,</span> resetQueue<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">function</span> <span class="token function">flushQueue</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  flushing <span class="token operator">=</span> <span class="token boolean">true</span>
+  queue<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a<span class="token punctuation">.</span>id <span class="token operator">-</span> b<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
+  <span class="token keyword">for</span> <span class="token punctuation">(</span>curIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> curIndex <span class="token operator">&lt;</span> queue<span class="token punctuation">.</span>length<span class="token punctuation">;</span> curIndex<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> watcher <span class="token operator">=</span> queue<span class="token punctuation">[</span>curIndex<span class="token punctuation">]</span>
+    idsMap<span class="token punctuation">[</span>watcher<span class="token punctuation">.</span>id<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">null</span>
+    watcher<span class="token punctuation">.</span>destroyed <span class="token operator">||</span> watcher<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+  <span class="token function">resetQueue</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">function</span> <span class="token function">resetQueue</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  flushing <span class="token operator">=</span> <span class="token boolean">false</span>
+  curIndex <span class="token operator">=</span> queue<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span>
+<span class="token punctuation">}</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/articles/mpx1.html" class="prev">
+        Mpx框架初体验
+      </a></span> <span class="next"><a href="/articles/size-control.html">
+        基于Mpx的小程序体积优化
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/58.50eb3b91.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/performance.html b/docs-vuepress/.vuepress/dist/articles/performance.html
new file mode 100644
index 0000000000..6dc9f5e7a6
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/performance.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>小程序框架运行时性能大测评 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/59.27106fbb.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" aria-current="page" class="active sidebar-link">小程序框架运行时性能大测评</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/performance.html#测试方案" class="sidebar-link">测试方案</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/performance.html#动态测试场景" class="sidebar-link">动态测试场景</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#静态测试场景" class="sidebar-link">静态测试场景</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/performance.html#测试流程及数据" class="sidebar-link">测试流程及数据</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/performance.html#框架运行时体积" class="sidebar-link">框架运行时体积</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#页面渲染耗时-动态测试" class="sidebar-link">页面渲染耗时(动态测试)</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#页面更新耗时-无后台数据" class="sidebar-link">页面更新耗时(无后台数据)</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#页面更新耗时-有后台数据" class="sidebar-link">页面更新耗时(有后台数据)</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#页面更新耗时-大数据量场景" class="sidebar-link">页面更新耗时(大数据量场景)</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#局部更新耗时" class="sidebar-link">局部更新耗时</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#setdata调用" class="sidebar-link">setData调用</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#页面渲染耗时-静态测试" class="sidebar-link">页面渲染耗时(静态测试)</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/performance.html#结论" class="sidebar-link">结论</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#一点私货" class="sidebar-link">一点私货</a></li></ul></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="小程序框架运行时性能大测评"><a href="#小程序框架运行时性能大测评" class="header-anchor">#</a> 小程序框架运行时性能大测评</h1> <blockquote><p>作者：董宏平(<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">hiyuki<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)，滴滴出行小程序负责人，mpx框架负责人及核心作者</p></blockquote> <p>随着小程序在商业上的巨大成功，小程序开发在国内前端领域越来越受到重视，为了方便广大开发者更好地进行小程序开发，各类小程序框架也层出不穷，呈现出百花齐放的态势。但是到目前为止，业内一直没有出现一份全面、详细、客观、公正的小程序框架测评报告，为小程序开发者在技术选型时提供参考。于是我便筹划推出一系列文章，对业内流行的小程序框架进行一次全方位的、客观公正的测评，本文是系列文章的第一篇——运行时性能篇。</p> <p>在本文中，我们会对下列框架进行运行时性能测试(排名不分先后):</p> <ul><li>wepy2(https://github.com/Tencent/wepy) @2.0.0-alpha.20</li> <li>uniapp(https://github.com/dcloudio/uni-app) @2.0.0-26120200226001</li> <li>mpx(https://github.com/didi/mpx) @2.5.3</li> <li>chameleon(https://github.com/didi/chameleon) @1.0.5</li> <li>mpvue(https://github.com/Meituan-Dianping/mpvue) @2.0.6</li> <li>kbone(https://github.com/Tencent/kbone) @0.8.3</li> <li>taro next(https://github.com/NervJS/taro) @3.0.0-alpha.5</li></ul> <p>其中对于kbone和taro next均以vue作为业务框架进行测试。</p> <p>运行时性能的测试内容包括以下几个维度：</p> <ul><li>框架运行时体积</li> <li>页面渲染耗时</li> <li>页面更新耗时</li> <li>局部更新耗时</li> <li>setData调用次数</li> <li>setData发送数据大小</li></ul> <p>框架性能测试demo全部存放于https://github.com/hiyuki/mp-framework-benchmark 中，欢迎广大开发者进行验证纠错及补全；</p> <h2 id="测试方案"><a href="#测试方案" class="header-anchor">#</a> 测试方案</h2> <p>为了使测试结果真实有效，我基于常见的业务场景构建了两种测试场景，分别是动态测试场景和静态测试场景。</p> <h3 id="动态测试场景"><a href="#动态测试场景" class="header-anchor">#</a> 动态测试场景</h3> <p>动态测试中，视图基于数据动态渲染，静态节点较少，视图更新耗时和setData调用情况是该测试场景中的主要测试点。</p> <p>动态测试demo模拟了实际业务中常见的长列表+多tab场景，该demo中存在两份优惠券列表数据，一份为可用券数据，另一份为不可用券数据，其中同一时刻视图中只会渲染展示其中一份数据，可以在上方的操作区模拟对列表数据的各种操作及视图展示切换(切tab)。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/PWsGL0GkuQ/dynamic.jpeg" width="300px"></p> <p><em>动态测试demo</em></p> <p>在动态测试中，我在外部通过函数代理的方式在初始化之前将App、Page和Component构造器进行代理，通过mixin的方式在Page的onLoad和Component的created钩子中注入setData拦截逻辑，对所有页面和组件的setData调用进行监听，并统计小程序的视图更新耗时及setData调用情况。该测试方式能够做到对框架代码的零侵入，能够跟踪到小程序全量的setData行为并进行独立的耗时计算，具有很强的普适性，代码具体实现可以查看https://github.com/hiyuki/mp-framework-benchmark/blob/master/utils/proxy.js</p> <h3 id="静态测试场景"><a href="#静态测试场景" class="header-anchor">#</a> 静态测试场景</h3> <p>静态测试模拟业务中静态页面的场景，如运营活动和文章等页面，页面内具备大量的静态节点，而没有数据动态渲染，初始ready耗时是该场景下测试的重心。</p> <p>静态测试demo使用了我去年发表的一篇技术文章的html代码进行小程序适配构建，其中包含大量静态节点及文本内容。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/5TOToHvunN/static.jpeg" width="300px"></p> <p><em>静态测试demo</em></p> <h2 id="测试流程及数据"><a href="#测试流程及数据" class="header-anchor">#</a> 测试流程及数据</h2> <blockquote><p>以下所有耗时类的测试数据均为微信小程序中真机进行5次测试计算平均值得出，单位均为ms。Ios测试环境为手机型号iPhone 11，系统版本13.3.1，微信版本7.0.12，安卓测试环境为手机型号小米9，系统版本Android10，微信版本7.0.12。</p></blockquote> <blockquote><p>为了使数据展示不过于混乱复杂，文章中所列的数据以Ios的测试结果为主，安卓测试结论与Ios相符，整体耗时比Ios高3~4倍左右，所有的原始测试数据存放在https://github.com/hiyuki/mp-framework-benchmark/blob/master/rawData.csv</p></blockquote> <blockquote><p>由于transform-runtime引入的core-js会对框架的运行时体积和运行耗时带来一定影响，且不是所有的框架都会在编译时开启transform-runtime，为了对齐测试环境，下述测试均在transform-runtime关闭时进行。</p></blockquote> <h3 id="框架运行时体积"><a href="#框架运行时体积" class="header-anchor">#</a> 框架运行时体积</h3> <p>由于不是所有框架都能够使用<code>webpack-bundle-analyzer</code>得到精确的包体积占用，这里我通过将各框架生成的demo项目体积减去native编写的demo项目体积作为框架的运行时体积。</p> <table><thead><tr><th></th> <th>demo总体积(KB)</th> <th>框架运行时体积(KB)</th></tr></thead> <tbody><tr><td>native</td> <td>27</td> <td>0</td></tr> <tr><td>wepy2</td> <td>66</td> <td>39</td></tr> <tr><td>uniapp</td> <td>114</td> <td>87</td></tr> <tr><td>mpx</td> <td>78</td> <td>51</td></tr> <tr><td>chameleon</td> <td>136</td> <td>109</td></tr> <tr><td>mpvue</td> <td>103</td> <td>76</td></tr> <tr><td>kbone</td> <td>395</td> <td>368</td></tr> <tr><td>taro next</td> <td>183</td> <td>156</td></tr></tbody></table> <p>该项测试的结论为：<br>
+native &gt; wepy2 &gt; mpx &gt; mpvue &gt; uniapp &gt; chameleon &gt; taro next &gt; kbone</p> <p>结论分析：</p> <ul><li>wepy2和mpx在框架运行时体积上控制得最好；</li> <li>taro next和kbone由于动态渲染的特性，在dist中会生成递归渲染模板/组件，所以占用体积较大。</li></ul> <h3 id="页面渲染耗时-动态测试"><a href="#页面渲染耗时-动态测试" class="header-anchor">#</a> 页面渲染耗时(动态测试)</h3> <p>我们使用<code>刷新页面</code>操作触发页面重新加载，对于大部分框架来说，页面渲染耗时是从触发刷新操作到页面执行onReady的耗时，但是对于像kbone和taro next这样的动态渲染框架，页面执行onReady并不代表视图真正渲染完成，为此，我们设定了一个特殊规则，在页面onReady触发的1000ms内，在没有任何操作的情况下出现setData回调时，以最后触发的setData回调作为页面渲染完成时机来计算真实的页面渲染耗时，测试结果如下：</p> <table><thead><tr><th></th> <th>页面渲染耗时</th></tr></thead> <tbody><tr><td>native</td> <td>60.8</td></tr> <tr><td>wepy2</td> <td>64</td></tr> <tr><td>uniapp</td> <td>56.4</td></tr> <tr><td>mpx</td> <td>52.6</td></tr> <tr><td>chameleon</td> <td>56.4</td></tr> <tr><td>mpvue</td> <td>117.8</td></tr> <tr><td>kbone</td> <td>98.6</td></tr> <tr><td>taro next</td> <td>89.6</td></tr></tbody></table> <blockquote><p>该项测试的耗时并不等同于真实的渲染耗时，由于小程序自身没有提供performance api，真实渲染耗时无法通过js准确测试得出，不过从得出的数据来看该项数据依然具备一定的参考意义。</p></blockquote> <p>该项测试的结论为：<br>
+mpx ≈ chameleon ≈ uniapp ≈ native ≈ wepy2 &gt; taro next ≈ kbone ≈ mpvue</p> <p>结论分析：</p> <ul><li>由于mpvue全量在页面进行渲染，kbone和taro next采用了动态渲染技术，页面渲染耗时较长，其余框架并无太大区别。</li></ul> <h3 id="页面更新耗时-无后台数据"><a href="#页面更新耗时-无后台数据" class="header-anchor">#</a> 页面更新耗时(无后台数据)</h3> <p>这里后台数据的定义为data中存在但当前页面渲染中未使用到的数据，在这个demo场景下即为不可用券的数据，当前会在不可用券为0的情况下，对可用券列表进行各种操作，并统计更新耗时。</p> <p>更新耗时的计算方式是从数据操作事件触发开始到对应的setData回调完成的耗时</p> <blockquote><p>mpvue中使用了当前时间戳(new Date)作为超时依据对setData进行了超时时间为50ms的节流操作，该方式存在严重问题，当vue内单次渲染同步流程执行耗时超过50ms时，后续组件patch触发的setData会突破这个节流限制，以50ms每次的频率对setData进行高频无效调用。在该性能测试demo中，当优惠券数量超过500时，界面就会完全卡死。为了顺利跑完整个测试流程，我对该问题进行了简单修复，使用setTimeout重写了节流部分，确保在vue单次渲染流程同步执行完毕后才会调用setData发送合并数据，之后mpvue的所有性能测试都是基于这个patch版本来进行的，该patch版本存放在https://github.com/hiyuki/mp-framework-benchmark/blob/master/frameworks/mpvue/runtime/patch/index.js</p></blockquote> <blockquote><p>理论上来讲native的性能在进行优化的前提下一定是所有框架的天花板，但是在日常业务开发中我们可能无法对每一次setData都进行优化，以下性能测试中所有的native数据均采用修改数据后全量发送的形式来实现。</p></blockquote> <p>第一项测试我们使用<code>新增可用券(100)</code>操作将可用券数量由0逐级递增到1000：</p> <table><thead><tr><th></th> <th>100</th> <th>200</th> <th>300</th> <th>400</th> <th>500</th> <th>600</th> <th>700</th> <th>800</th> <th>900</th> <th>1000</th></tr></thead> <tbody><tr><td>native</td> <td>84.6</td> <td>69.8</td> <td>71.6</td> <td>75</td> <td>77.2</td> <td>78.8</td> <td>82.8</td> <td>93.2</td> <td>93.4</td> <td>105.4</td></tr> <tr><td>wepy2</td> <td>118.4</td> <td>168.6</td> <td>204.6</td> <td>246.4</td> <td>288.6</td> <td>347.8</td> <td>389.2</td> <td>434.2</td> <td>496</td> <td>539</td></tr> <tr><td>uniapp</td> <td>121.2</td> <td>100</td> <td>96</td> <td>98.2</td> <td>97.8</td> <td>99.6</td> <td>104</td> <td>102.4</td> <td>109.4</td> <td>107.6</td></tr> <tr><td>mpx</td> <td>110.4</td> <td>87.2</td> <td>82.2</td> <td>83</td> <td>80.6</td> <td>79.6</td> <td>86.6</td> <td>90.6</td> <td>89.2</td> <td>96.4</td></tr> <tr><td>chameleon</td> <td>116.8</td> <td>115.4</td> <td>117</td> <td>119.6</td> <td>122</td> <td>125.2</td> <td>133.8</td> <td>133.2</td> <td>144.8</td> <td>145.6</td></tr> <tr><td>mpvue</td> <td>112.8</td> <td>121.2</td> <td>140</td> <td>169</td> <td>198.8</td> <td>234.2</td> <td>278.8</td> <td>318.4</td> <td>361.4</td> <td>408.2</td></tr> <tr><td>kbone</td> <td>556.4</td> <td>762.4</td> <td>991.6</td> <td>1220.6</td> <td>1468.8</td> <td>1689.6</td> <td>1933.2</td> <td>2150.4</td> <td>2389</td> <td>2620.6</td></tr> <tr><td>taro next</td> <td>470</td> <td>604.6</td> <td>759.6</td> <td>902.4</td> <td>1056.2</td> <td>1228</td> <td>1393.4</td> <td>1536.2</td> <td>1707.8</td> <td>1867.2</td></tr></tbody></table> <p>然后我们按顺序逐项点击<code>删除可用券(all)</code> &gt; <code>新增可用券(1000)</code> &gt; <code>更新可用券(1)</code> &gt; <code>更新可用券(all)</code> &gt; <code>删除可用券(1)</code>：</p> <table><thead><tr><th></th> <th>delete(all)</th> <th>add(1000)</th> <th>update(1)</th> <th>update(all)</th> <th>delete(1)</th></tr></thead> <tbody><tr><td>native</td> <td>32.8</td> <td>295.6</td> <td>92.2</td> <td>92.2</td> <td>83</td></tr> <tr><td>wepy2</td> <td>56.8</td> <td>726.4</td> <td>49.2</td> <td>535</td> <td>530.8</td></tr> <tr><td>uniapp</td> <td>43.6</td> <td>584.4</td> <td>54.8</td> <td>144.8</td> <td>131.2</td></tr> <tr><td>mpx</td> <td>41.8</td> <td>489.6</td> <td>52.6</td> <td>169.4</td> <td>165.6</td></tr> <tr><td>chameleon</td> <td>39</td> <td>765.6</td> <td>95.6</td> <td>237.8</td> <td>144.8</td></tr> <tr><td>mpvue</td> <td>103.6</td> <td>669.4</td> <td>404.4</td> <td>414.8</td> <td>433.6</td></tr> <tr><td>kbone</td> <td>120.2</td> <td>4978</td> <td>2356.4</td> <td>2419.4</td> <td>2357</td></tr> <tr><td>taro next</td> <td>126.6</td> <td>3930.6</td> <td>1607.8</td> <td>1788.6</td> <td>2318.2</td></tr></tbody></table> <blockquote><p>该项测试中初期我update(all)的逻辑是循环对每个列表项进行更新，形如<code>listData.forEach((item)=&gt;{item.count++})</code>，发现在chameleon框架中执行界面会完全卡死，追踪发现chameleon框架中没有对setData进行异步合并处理，而是在数据变动时直接同步发送，这样在数据量为1000的场景下用该方式进行更新会高频触发1000次setData，导致界面卡死；对此，我在chameleon框架的测试demo中，将update(all)的逻辑调整为深clone产生一份更新后的listData，再将其整体赋值到this.listData当中，以确保该项测试能够正常进行。</p></blockquote> <p>该项测试的结论为：<br>
+native &gt; mpx ≈ uniapp &gt; chameleon &gt; mpvue &gt; wepy2 &gt; taro next &gt; kbone</p> <p>结论分析：</p> <ul><li>mpx和uniapp在框架内部进行了完善的diff优化，随着数据量的增加，两个框架的新增耗时没有显著上升；</li> <li>wepy2会在数据变更时对props数据也进行setData，在该场景下造成了大量的无效性能损耗，导致性能表现不佳；</li> <li>kbone和taro next采用了动态渲染方案，每次新增更新时会发送大量描述dom结构的数据，与此同时动态递归渲染的耗时也远大于常规的静态模板渲染，使得这两个框架在所有的更新场景下耗时都远大于其他框架。</li></ul> <h3 id="页面更新耗时-有后台数据"><a href="#页面更新耗时-有后台数据" class="header-anchor">#</a> 页面更新耗时(有后台数据)</h3> <p>刷新页面后我们使用<code>新增不可用券(1000)</code>创建后台数据，观察该操作是否会触发setData并统计耗时</p> <table><thead><tr><th></th> <th>back add(1000)</th></tr></thead> <tbody><tr><td>native</td> <td>45.2</td></tr> <tr><td>wepy2</td> <td>174.6</td></tr> <tr><td>uniapp</td> <td>89.4</td></tr> <tr><td>mpx</td> <td>0</td></tr> <tr><td>chameleon</td> <td>142.6</td></tr> <tr><td>mpvue</td> <td>134</td></tr> <tr><td>kbone</td> <td>0</td></tr> <tr><td>taro next</td> <td>0</td></tr></tbody></table> <blockquote><p>mpx进行setData优化时inspired by vue，使用了编译时生成的渲染函数跟踪模板数据依赖，在后台数据变更时不会进行setData调用，而kbone和taro next采用了动态渲染技术模拟了web底层环境，在上层完整地运行了vue框架，也达到了同样的效果。</p></blockquote> <p>然后我们执行和上面无后台数据时相同的操作进行耗时统计，首先是递增100：</p> <table><thead><tr><th></th> <th>100</th> <th>200</th> <th>300</th> <th>400</th> <th>500</th> <th>600</th> <th>700</th> <th>800</th> <th>900</th> <th>1000</th></tr></thead> <tbody><tr><td>native</td> <td>88</td> <td>69.8</td> <td>71.2</td> <td>80.8</td> <td>79.4</td> <td>84.4</td> <td>89.8</td> <td>93.2</td> <td>99.6</td> <td>108</td></tr> <tr><td>wepy2</td> <td>121</td> <td>173.4</td> <td>213.6</td> <td>250</td> <td>298</td> <td>345.6</td> <td>383</td> <td>434.8</td> <td>476.8</td> <td>535.6</td></tr> <tr><td>uniapp</td> <td>135.4</td> <td>112.4</td> <td>110.6</td> <td>106.4</td> <td>109.6</td> <td>107.2</td> <td>114.4</td> <td>116</td> <td>118.8</td> <td>117.4</td></tr> <tr><td>mpx</td> <td>112.6</td> <td>86.2</td> <td>84.6</td> <td>86.8</td> <td>90</td> <td>87.2</td> <td>91.2</td> <td>88.8</td> <td>92.4</td> <td>93.4</td></tr> <tr><td>chameleon</td> <td>178.4</td> <td>178.2</td> <td>186.4</td> <td>184.6</td> <td>192.6</td> <td>203.8</td> <td>210</td> <td>217.6</td> <td>232.6</td> <td>236.8</td></tr> <tr><td>mpvue</td> <td>139</td> <td>151</td> <td>173.4</td> <td>194</td> <td>231.4</td> <td>258.8</td> <td>303.4</td> <td>340.4</td> <td>384.6</td> <td>429.4</td></tr> <tr><td>kbone</td> <td>559.8</td> <td>746.6</td> <td>980.6</td> <td>1226.8</td> <td>1450.6</td> <td>1705.4</td> <td>1927.2</td> <td>2154.8</td> <td>2367.8</td> <td>2617</td></tr> <tr><td>taro next</td> <td>482.6</td> <td>626.2</td> <td>755</td> <td>909.6</td> <td>1085</td> <td>1233.2</td> <td>1384</td> <td>1568.6</td> <td>1740.6</td> <td>1883.8</td></tr></tbody></table> <p>然后按下表操作顺序逐项点击统计</p> <table><thead><tr><th></th> <th>delete(all)</th> <th>add(1000)</th> <th>update(1)</th> <th>update(all)</th> <th>delete(1)</th></tr></thead> <tbody><tr><td>native</td> <td>43.4</td> <td>299.8</td> <td>89.2</td> <td>89</td> <td>87.2</td></tr> <tr><td>wepy2</td> <td>43.2</td> <td>762.4</td> <td>50</td> <td>533</td> <td>522.4</td></tr> <tr><td>uniapp</td> <td>57.8</td> <td>589.8</td> <td>62.6</td> <td>160.6</td> <td>154.4</td></tr> <tr><td>mpx</td> <td>45.8</td> <td>490.8</td> <td>52.8</td> <td>167</td> <td>166</td></tr> <tr><td>chameleon</td> <td>93.8</td> <td>837</td> <td>184.6</td> <td>318</td> <td>220.8</td></tr> <tr><td>mpvue</td> <td>124.8</td> <td>696.2</td> <td>423.4</td> <td>419</td> <td>430.6</td></tr> <tr><td>kbone</td> <td>121.4</td> <td>4978.2</td> <td>2331.2</td> <td>2448.4</td> <td>2348</td></tr> <tr><td>taro next</td> <td>129.8</td> <td>3947.2</td> <td>1610.4</td> <td>1813.8</td> <td>2290.2</td></tr></tbody></table> <p>该项测试的结论为：<br>
+native &gt; mpx &gt; uniapp &gt; chameleon &gt; mpvue &gt; wepy2 &gt; taro next &gt; kbone</p> <p>结论分析：</p> <ul><li>具备模板数据跟踪能力的三个框架mpx，kbone和taro next在有后台数据场景下耗时并没有显著增加；</li> <li>wepy2当中的diff精度不足，耗时也没有产生明显变化；</li> <li>其余框架由于每次更新都会对后台数据进行deep diff，耗时都产生了一定提升。</li></ul> <h3 id="页面更新耗时-大数据量场景"><a href="#页面更新耗时-大数据量场景" class="header-anchor">#</a> 页面更新耗时(大数据量场景)</h3> <blockquote><p>由于mpvue和taro next的渲染全部在页面中进行，而kbone的渲染方案会额外新增大量的自定义组件，这三个框架都会在优惠券数量达到2000时崩溃白屏，我们排除了这三个框架对其余框架进行大数据量场景下的页面更新耗时测试</p></blockquote> <p>首先还是在无后台数据场景下使用<code>新增可用券(1000)</code>将可用券数量递增至5000：</p> <table><thead><tr><th></th> <th>1000</th> <th>2000</th> <th>3000</th> <th>4000</th> <th>5000</th></tr></thead> <tbody><tr><td>native</td> <td>332.6</td> <td>350</td> <td>412.6</td> <td>498.2</td> <td>569.4</td></tr> <tr><td>wepy2</td> <td>970.2</td> <td>1531.4</td> <td>2015.2</td> <td>2890.6</td> <td>3364.2</td></tr> <tr><td>uniapp</td> <td>655.2</td> <td>593.4</td> <td>655</td> <td>675.6</td> <td>718.8</td></tr> <tr><td>mpx</td> <td>532.2</td> <td>496</td> <td>548.6</td> <td>564</td> <td>601.8</td></tr> <tr><td>chameleon</td> <td>805.4</td> <td>839.6</td> <td>952.8</td> <td>1086.6</td> <td>1291.8</td></tr></tbody></table> <p>然后点击<code>新增不可用券(5000)</code>将后台数据量增加至5000，再测试可用券数量递增至5000的耗时：</p> <table><thead><tr><th></th> <th>back add(5000)</th></tr></thead> <tbody><tr><td>native</td> <td>117.4</td></tr> <tr><td>wepy2</td> <td>511.6</td></tr> <tr><td>uniapp</td> <td>285</td></tr> <tr><td>mpx</td> <td>0</td></tr> <tr><td>chameleon</td> <td>824</td></tr></tbody></table> <table><thead><tr><th></th> <th>1000</th> <th>2000</th> <th>3000</th> <th>4000</th> <th>5000</th></tr></thead> <tbody><tr><td>native</td> <td>349.8</td> <td>348.4</td> <td>430.4</td> <td>497</td> <td>594.8</td></tr> <tr><td>wepy2</td> <td>1128</td> <td>1872</td> <td>2470.4</td> <td>3263.4</td> <td>4075.8</td></tr> <tr><td>uniapp</td> <td>715</td> <td>666.8</td> <td>709.2</td> <td>755.6</td> <td>810.2</td></tr> <tr><td>mpx</td> <td>538.8</td> <td>501.8</td> <td>562.6</td> <td>573.6</td> <td>595.2</td></tr> <tr><td>chameleon</td> <td>1509.2</td> <td>1672.4</td> <td>1951.8</td> <td>2232.4</td> <td>2586.2</td></tr></tbody></table> <p>该项测试的结论为：<br>
+native &gt; mpx &gt; uniapp &gt; chameleon &gt; wepy2</p> <p>结论分析：</p> <ul><li>在大数据量场景下，框架之间基础性能的差异会变得更加明显，mpx和uniapp依然保持了接近原生的良好性能表现，而chameleon和wepy2则产生了比较显著的性能劣化。</li></ul> <h3 id="局部更新耗时"><a href="#局部更新耗时" class="header-anchor">#</a> 局部更新耗时</h3> <p>我们在可用券数量为1000的情况下，点击任意一张可用券触发选中状态，以测试局部更新性能</p> <table><thead><tr><th></th> <th>toggleSelect(ms)</th></tr></thead> <tbody><tr><td>native</td> <td>2</td></tr> <tr><td>wepy2</td> <td>2.6</td></tr> <tr><td>uniapp</td> <td>2.8</td></tr> <tr><td>mpx</td> <td>2.2</td></tr> <tr><td>chameleon</td> <td>2</td></tr> <tr><td>mpvue</td> <td>289.6</td></tr> <tr><td>kbone</td> <td>2440.8</td></tr> <tr><td>taro next</td> <td>1975</td></tr></tbody></table> <p>该项测试的结论为：<br>
+native ≈ chameleon ≈ mpx ≈ wepy2 ≈ uniapp &gt; mpvue &gt; taro next &gt; kbone</p> <p>结论分析：</p> <ul><li>可以看出所有使用了原生自定义组件进行组件化实现的框架局部更新耗时都极低，这足以证明小程序原生自定义组件的优秀性和重要性；</li> <li>mpvue由于使用了页面更新，局部更新耗时显著增加；</li> <li>kbone和taro next由于递归动态渲染的性能开销巨大，导致局部更新耗时同样巨大。</li></ul> <h3 id="setdata调用"><a href="#setdata调用" class="header-anchor">#</a> setData调用</h3> <p>我们将<code>proxySetData</code>的count和size选项设置为true，开启setData的次数和体积统计，重新构建后按照以下流程执行系列操作，并统计setData的调用次数和发送数据的体积。</p> <p>操作流程如下：</p> <ol><li>100逐级递增可用券(0-&gt;500)</li> <li>切换至不可用券</li> <li>新增不可用券(1000)</li> <li>100逐级递增可用券(500-&gt;1000)</li> <li>更新可用券(all)</li> <li>切换至可用券</li></ol> <p>操作完成后我们使用<code>getCount</code>和<code>getSize</code>方法获取累积的setData调用次数和数据体积，其中数据体积计算方式为JSON.stringify后按照utf-8编码方式进行体积计算，统计结果为：</p> <table><thead><tr><th></th> <th>count</th> <th>size(KB)</th></tr></thead> <tbody><tr><td>native</td> <td>14</td> <td>803</td></tr> <tr><td>wepy2</td> <td>3514</td> <td>1124</td></tr> <tr><td>mpvue</td> <td>16</td> <td>2127</td></tr> <tr><td>uniapp</td> <td>14</td> <td>274</td></tr> <tr><td>mpx</td> <td>8</td> <td>261</td></tr> <tr><td>chameleon</td> <td>2515</td> <td>319</td></tr> <tr><td>kbone</td> <td>22</td> <td>10572</td></tr> <tr><td>taro next</td> <td>9</td> <td>2321</td></tr></tbody></table> <p>该项测试的结论为：<br>
+mpx &gt; uniapp &gt; native &gt; chameleon &gt; wepy2 &gt; taro next &gt; mpvue &gt; kbone</p> <p>结论分析：</p> <ul><li>mpx框架成功实现了理论上setData的最优；</li> <li>uniapp由于缺失模板追踪能力紧随其后；</li> <li>chameleon由于组件每次创建时都会进行一次不必要的setData，产生了大量无效setData调用，但是数据的发送本身经过diff，在数据发送量上表现不错；</li> <li>wepy2的组件会在数据更新时调用setData发送已经更新过的props数据，因此也产生了大量无效调用，且diff精度不足，发送的数据量也较大；</li> <li>taro next由于上层完全基于vue，在数据发送次数上控制到了9次，但由于需要发送大量的dom描述信息，数据发送量较大；</li> <li>mpvue由于使用较长的数据路径描述数据对应的组件，也产生了较大的数据发送量；</li> <li>kbone对于setData的调用控制得不是很好，在上层运行vue的情况依然进行了22次数据发送，且发送的数据量巨大，在此流程中达到了惊人的10MB。</li></ul> <h3 id="页面渲染耗时-静态测试"><a href="#页面渲染耗时-静态测试" class="header-anchor">#</a> 页面渲染耗时(静态测试)</h3> <p>此处的页面渲染耗时与前面描述的动态测试场景中相同，测试结果如下：</p> <table><thead><tr><th></th> <th>页面渲染耗时</th></tr></thead> <tbody><tr><td>native</td> <td>70.4</td></tr> <tr><td>wepy2</td> <td>86.6</td></tr> <tr><td>mpvue</td> <td>115.2</td></tr> <tr><td>uniapp</td> <td>69.6</td></tr> <tr><td>mpx</td> <td>66.6</td></tr> <tr><td>chameleon</td> <td>65</td></tr> <tr><td>kbone</td> <td>144.2</td></tr> <tr><td>taro next</td> <td>119.8</td></tr></tbody></table> <p>该项测试的结论为：<br>
+chameleon ≈ mpx ≈ uniapp ≈ native &gt; wepy2 &gt; mpvue ≈ taro next &gt; kbone</p> <p>结论分析：</p> <ul><li>除了kbone和taro next采用动态渲染耗时增加，mpvue使用页面模板渲染性能稍差，其余框架的静态页面渲染表现都和原生差不多。</li></ul> <h2 id="结论"><a href="#结论" class="header-anchor">#</a> 结论</h2> <p>综合上述测试数据，我们得到最终的小程序框架运行时性能排名为：<br>
+mpx &gt; uniapp &gt; chameleon &gt; wepy2 &gt; mpvue &gt; taro next &gt; kbone</p> <h2 id="一点私货"><a href="#一点私货" class="header-anchor">#</a> 一点私货</h2> <p>虽然kbone和taro next采用了动态渲染技术在性能表现上并不尽如人意，但是我依然认为这是很棒的技术方案。虽然本文从头到位都在进行性能测试和对比，但性能并不是框架的全部，开发效率和高可用性仍然是框架的重心，开发效率相信是所有框架设计的初衷，但是高可用性却在很大程度被忽视。从这个角度来说，kbone和taro next是非常成功的，不同于过去的转译思路，这种从抹平底层渲染环境的做法能够使上层web框架完整运行，在框架可用性上带来非常大的提升，非常适合于运营类简单小程序的迁移和开发。</p> <p>我主导开发的mpx框架(https://github.com/didi/mpx) 选择了另一条道路解决可用性问题，那就是基于小程序原生语法能力进行增强，这样既能避免转译web框架时带来的不确定性和不稳定性，同时也能带来非常接近于原生的性能表现，对于复杂业务小程序的开发者来说，非常推荐使用。在跨端输出方面，mpx目前能够完善支持业内全部小程序平台和web平台的同构输出，滴滴内部最重要最复杂的小程序——滴滴出行小程序完全基于mpx进行开发，并利用框架提供的跨端能力对微信和支付宝入口进行同步业务迭代，大大提升了业务开发效率。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/articles/2.0.html" class="prev">
+        Mpx发布2.0，完美支持跨平台开发
+      </a></span> <span class="next"><a href="/articles/mpx1.html">
+        Mpx框架初体验
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/59.27106fbb.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/size-control.html b/docs-vuepress/.vuepress/dist/articles/size-control.html
new file mode 100644
index 0000000000..f1c5d9cae9
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/size-control.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>滴滴出行小程序体积优化实践 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/60.a47e5279.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" aria-current="page" class="active sidebar-link">基于Mpx的小程序体积优化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/size-control.html#概述" class="sidebar-link">概述</a></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#背景" class="sidebar-link">背景</a></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#体积控制" class="sidebar-link">体积控制</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/size-control.html#基础优化手段" class="sidebar-link">基础优化手段</a></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#分析体积" class="sidebar-link">分析体积</a></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#配置分包" class="sidebar-link">配置分包</a></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#分包资源精细化管理" class="sidebar-link">分包资源精细化管理</a></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#封面方案" class="sidebar-link">封面方案</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="滴滴出行小程序体积优化实践"><a href="#滴滴出行小程序体积优化实践" class="header-anchor">#</a> 滴滴出行小程序体积优化实践</h1> <blockquote><p>作者：<a href="http://github.com/sky-admin" target="_blank" rel="noopener noreferrer">sky-admin<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <h2 id="概述"><a href="#概述" class="header-anchor">#</a> 概述</h2> <p>2019年下半年，为了将微信钱包/支付宝九宫格入口的滴滴出行迁移为小程序，团队对小程序进行了大量的功能升级与补全。在整个过程中也遇到并克服了一系列问题和挑战，其中包体积问题尤为突出。接下来全面介绍一下滴滴出行小程序在体积控制方面做的努力与沉淀。</p> <h2 id="背景"><a href="#背景" class="header-anchor">#</a> 背景</h2> <p>微信对小程序包体积的要求是总体积不得超过12M，主包及单个分包体积不得超过2M。支付宝对于小程序包体积的计算方式虽和微信略有区别，不过整体也大同小异。</p> <p>18年至19年初时，滴滴出行小程序里承载的业务只有网约车，且业务需求较少，在主包内都能够搞定。而在下半年时，为了将微信钱包/支付宝九宫格入口迁移至小程序，小程序开始新增诸如公交/代驾/车服/单车/顺风车等众多业务线，同时网约车的业务需求也要做全面的补齐，业务量和代码量一起爆炸式增长。</p> <p>滴滴出行包含了丰富多样的出行业务，包含了快车/专车/出租车/豪华车/拼车/单车/代驾/顺风车/公交/车生活等众多业务线。整个滴滴出行小程序的最重要，使用最高频的页面是首页与订单详情页，首页中承载了各个业务线的需求表达，各个业务线的订单详情页则承载了具体的出行订单展示逻辑。此外还有各种功能页面比如个人中心，营销页面，设置，历史行程。</p> <p>按照滴滴出行的产品逻辑，所有业务线的需求表达逻辑都在首页承载，为了良好的切换体验，在首页采用了单页顶导的方案进行业务线展示。即每个业务线在首页中提供一个需求表达组件，当用户切换顶导业务线后，切换出对应的业务线组件。</p> <p>在这种设计下，所有的业务线的需求表达逻辑都集中在首页这个单一页面中，导致在业务迭代过程中，承载首页的主包体积迅速增长，很快触碰了小程序平台的单包2M上限，对后续的业务迭代与发展带来巨大阻碍。因此，对于包体积的控制是我们在小程序开发过程中面临的一大难题。</p> <h2 id="体积控制"><a href="#体积控制" class="header-anchor">#</a> 体积控制</h2> <p>下面我们将介绍滴滴出行小程序开发迭代过程中，我们对于小程序包体积进行的一系列优化控制实践。</p> <h3 id="基础优化手段"><a href="#基础优化手段" class="header-anchor">#</a> 基础优化手段</h3> <p>对于小程序来说，基础的包体积优化手段包括：资源压缩/去除代码冗余/资源CDN化/异步加载</p> <p>在web开发中，webpack提供了大量的代码优化能力，包括依赖分析、模块去重、代码压缩、tree shaking、side effects等，这些能力可以方便地完成资源压缩和去除代码冗余的工作。滴滴出行小程序基于滴滴开源的小程序框架Mpx( https://github.com/didi/mpx )进行开发，Mpx框架的编译构建完全基于webpack，兼容webpack内部生态，天然可以使用上述能力对包体积进行优化。</p> <p>小程序中支持部分静态资源（如图像视频等）使用CDN地址加载，我们会尽可能将相关的资源压缩后放到CDN上，避免这部分资源对包体积的占用。</p> <p>小程序场景下无法像web当中通过script标签便捷地进行异步加载，但是小程序平台后期纷纷支持了分包加载的方案来实现该能力，由于分包加载是小程序特有的技术规范，webpack无法直接支持，因此Mpx框架专门针对该技术规范进行了良好的适配支持，关于该能力的应用我们会在后文详细阐述。</p> <p>除此之外，Mpx框架还针对小程序场景进行了许多包体积优化的适配工作，如尽可能减少框架运行时包体积占用（压缩后占用56Kb），对引用到的页面/组件按需进行打包构建，声明公共样式进行样式复用，分包内公共模块抽取等。</p> <p>在Mpx框架的这些能力的支持下，基本不需要额外配置就能构建出一个经过初步优化的小程序包。</p> <blockquote><p>微信开发者工具选项里也有类似的&quot;上传代码时自动压缩混淆&quot;可勾选，但在开发者工具中上传代码时计算体积是直接计算的当前项目代码的体积，并不会依据压缩后的体积。因此，如果你使用原生小程序进行开发，你的source代码极有可能进行进一步的压缩以节省空间。</p></blockquote> <h3 id="分析体积"><a href="#分析体积" class="header-anchor">#</a> 分析体积</h3> <p>虽然框架已经提供了很多在体积控制方面的优化，但是随着业务迭代我们发现主包体积依然偏大。</p> <p>在遇到主包体积偏大后，我们需要弄明白，主包里有哪些东西？它们为什么这么大？</p> <p>使用原生小程序或者其他非基于webpack的框架进行开发的同学遇到这个问题后，可能只能去看硬盘上的文件大小。这样一来，各个模块的大小占比可能并不直观。而我们则可以借助 webpack-bundle-analyzer 这样一个webpack插件去做辅助分析。</p> <p>比如这是一个使用Mpx框架编写的demo，通过 <code>npm run build --report</code> 就可以看到这样一个界面：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/3e488293-959e-4617-8187-69fdb532e9ab.jpg" alt="体积分析图"></p> <p>可以看到这个demo工程由 moment / lodash / socket-weapp / core-js 等第三方库组成。各个库的大小，相互依赖关系也能清晰地看出。</p> <p>对于滴滴出行小程序也是能看到类似的图，能看到整个项目到底是由哪些代码组成。</p> <p>另外，滴滴出行前端开发一直是采用“源码编译”的，可以让整个项目里公共的依赖可以实现仅有一份，一起共用。简而言之，也有助于减少项目代码体积。<a href="https://github.com/DDFE/DDFE-blog/issues/23" target="_blank" rel="noopener noreferrer">相关资料：https://github.com/DDFE/DDFE-blog/issues/23 <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>要完美发挥源码编译的效果，需要上下游一起建立整套源码编译生态，比如主项目的依赖方在声明公用依赖时，就应该用peerDep或者devDep来声明一些公有依赖，这些共有依赖应该在主项目中统一声明，避免因版本不同装出两份公共依赖，那样反而会增大体积。由于滴滴出行小程序涉及业务线及团队众多，部分团队可能并不知道这个事情，因此代码里实际是可能出现上述劣化场景。而依照分析图，可以容易地发现这种问题，并推动相关团队清除这些重复依赖。</p> <p>同时，我们依照体积分析图，对其中体积较大的文件重点分析，进行了一轮业务代码梳理和精简，删除了一些无用代码，精简了websocket的消息体描述文件等。</p> <h3 id="配置分包"><a href="#配置分包" class="header-anchor">#</a> 配置分包</h3> <p>分包是小程序给出的类似web异步引入的一个方案，把一些初始进入时不需要的页面可以放进分包里，跳转到对应页面时才去下载分包，将这些页面及其附属资源放到分包里可以有效减少主包体积。</p> <p>Mpx框架早期对分包规范进行了初步支持，资源访问规则保持和微信一致，主要根据资源存放的目录判断应该输出到主包还是分包。有这个能力后，我们把行程页抽到了分包，大概抽出了200多K左右的空间。</p> <p>有了行程页的成功拆分后，我们开始对所有的非首页代码进行分包操作，比如起终点选择和个人中心。以及部分业务线的接入是通过npm的方式接入，我们也尽可能将这些业务线的所有非首页的代码放到了分包。</p> <p>这里还有个题外话，得益于mpx早期设计了packages形式的业务组合方案，可以很方便地让业务独立开发，又能及其方便地整合。而后发现微信的分包的json配置设计和packages很像，就在这个基础上支持了微信的分包，用户侧仅需在原来的packages基础上加一个query标记这个分包的名字即可。</p> <p>拆除各个分包后，整个项目结构大概如图：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/0562f94d-3929-42b8-a389-854e14983373.png" alt="分包一期结构图"></p> <p>初阶的分包工作进行完毕后，总计从主包里拆了差不多400K的空间到分包里。</p> <h3 id="分包资源精细化管理"><a href="#分包资源精细化管理" class="header-anchor">#</a> 分包资源精细化管理</h3> <p>上面提到，Mpx框架初期的分包处理规则是完全按照微信的方式，把在分包路径下的资源收集到分包里。而npm管理的资源因为都在node_modules目录下，不属于任何分包路径，则会被全部收集进主包。</p> <p>比如之前我们有行程页分包，行程页自有的状态管理store整个都在行程页分包的路径下，就会被收集到行程页分包中。而行程页还用到了封装好的didi-socket库，这个库是公共的npm包，即使它只在行程页分包里被使用，但由于它本身路径是在node_modules下的，那么就会将其收集进主包里。</p> <p>因为早期的一些设计，行程页的资源和首页是分割开的，都比较独立地存在于各自的路径下，一期的分包处理的大头也主要是行程页，它刚好契合了Mpx初期对分包处理上的特点，因此能较好地收集进行程页分包里。</p> <p>随着业务迭代，后续大量业务线的接入都是通过npm进行的，就会有大量npm包资源，他们都在node_modules目录下，因此全部会被收集进主包。</p> <p>所以Mpx框架进行了一系列改造：</p> <ol><li>在构建的依赖收集过程中，我们会对收集到的依赖打上标记，记录它是被哪些分包引入的。一旦它只有一个分包引入，它就会被输出到这个分包中。</li> <li>我们会根据用户定义的分包配置，自动在 SplitChunksPlugin 中生成各个分包的 cacheGroups ，把分包中的复用模块抽取到分包下的bundle中。</li> <li>对于组件和静态资源，如果他们被多个分包所引用且未在主包中引用，为了确保主包体积最优，这些资源将产生多份副本分别输出到对应分包中，而不会占用主包体积。</li></ol> <p>这样一来，<em><strong>不管分包中引用的资源原本在什么位置，最终输出时都会尽可能将其输出到dist的分包目录下，避免占用主包空间</strong></em>。</p> <p>这个改动完成后项目结构看似和之前一样，但得益于Mpx处理分包资源能力的升级，我们得以将业务线分包中引用的npm资源成功输出到其所在的分包目录下。</p> <h3 id="封面方案"><a href="#封面方案" class="header-anchor">#</a> 封面方案</h3> <p>再后来滴滴出行小程序需要替换微信/支付宝里原有的WebApp入口，小程序接入的业务线迅速增加，包体积迅速增长。</p> <p>这个部分体积增长的主要原因前面提到过，所有的业务线都要接入到主页来展示。这也是由于业务特点决定的，滴滴出行提供了丰富的出行产品线，包括快车/专车/出租车/豪华车/拼车/单车/代驾/顺风行车等产品，用户是可能需要反复切换挑选的。这个过程还要保留起终点车型之类的信息，必须是一个页面内切换组件加一整套非常复杂的大型状态管理才能比较流畅顺滑地实现。而不能像一些电商/信息平台，将不同的功能拆分到不同页面，让用户通过首页的菜单进入子页面再进行操作，首页只承载入口，只有较少的业务逻辑，分包处理起来就会容易很多。</p> <p>因此各个业务线都要提供首页组件进行接入。这个组件会在首页被用到，所以无论如何也拆不到分包里。最终，整个首页主包部分的体积可以分成两个部分：基础库和业务代码。两者的体积占比大概是公共依赖基础库占1M左右，业务代码占1M左右。</p> <p>这么庞大的基础库体积主要是由于滴滴出行的业务线及业务团队众多，各方均有一些自己的基础依赖。比如网约车依赖的长链接通信pb数据描述文件，地图会依的大数计算库，顺风车依赖的CML框架运行时、代驾依赖的通信网关库，以及公用的组件库和polyfill等。</p> <p>所以滴滴出行小程序面对的问题在当时已经无法用纯技术方案在短期内快速解决问题了，于是我们做了一个工程架构调整，可以叫封面页方案，解决了主包问题。</p> <p>封面方案简单讲，就是做一个带滴滴出行Logo的封面作为启动页面，而页面一旦加载，立刻跳转另一个页面，这个页面真正承载业务，且它被放在分包里。</p> <p>这个操作的意义在于，主包里就只剩下了所有方都要依赖的基础框架/库等，而业务全被抽离到了分包里。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/0f0ed782-8f67-4601-bc83-a8a343e1050b.png" alt="封面方案结构图"></p> <p>这是封面方案完成后项目的结构图，之前很大块的首页业务逻辑被抽出到首页分包中了。</p> <p>这样一个挪移的操作的结果是我们可以有2M的主包空间来乘放基础的公共的库，有一个2M左右的分包来乘放前面提到的滴滴出行的集成了各种业务的“大主页”。而当时拆下来差不多有1.2M的主包，800K+的业务主分包。</p> <p>这个改造最优秀的一点在于，后续的业务迭代产生的体积增长几乎全是在业务主分包里，剩下的1.1M+空间留给业务迭代还是比较充裕的。而主包的体积在理想条件下是可以长久保持不变的，就不会因为业务需求的不断开发反复导致主包体积临近超标，不再需要为主包体积感到焦虑。</p> <p>当然，可以看到，这个方案本身是没有消减任何体积的，只是把位置变换了一下。除此之外，这个封面页方案其实也存在一些缺陷，比如首屏业务的展示会变慢，因为要加载的内容会变多，不过小程序本身有较好的缓存资源的能力，因此还算可以接受。</p> <p>相比于因体积问题卡住需求迭代以及产品线的接入，目前这个方案至少能解决有无问题。我们开发团队后续也会持续跟进关注体积问题，看是否会有产品方案变更或者小程序本身给出一些解决方案来进一步优化这个部分。</p> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>Mpx框架在包体积控制上做了大量工作，对于npm场景下的小程序分包进行了非常完善的支持。</p> <p>滴滴出行小程序团队在框架支持的基础上，通过梳理业务依赖，充分利用分包，调整交互方案等一系列手段，在不阻碍业务发展的前提下，将庞大复杂的滴滴出行小程序包体积控制在平台限制范围内。</p> <p>希望本文能给在包体积上遇到问题的小程序开发者们带来一些启发，欢迎留言交流。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/articles/mpx2.html" class="prev">
+        Mpx框架技术揭秘
+      </a></span> <span class="next"><a href="/articles/ts-derivation.html">
+        Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/60.a47e5279.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/ts-derivation.html b/docs-vuepress/.vuepress/dist/articles/ts-derivation.html
new file mode 100644
index 0000000000..37ba492785
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/ts-derivation.html
@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>使用Typescript新特性Template Literal Types完善链式key的类型推导 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/61.74ebd7d9.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" aria-current="page" class="active sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#前言" class="sidebar-link">前言</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#特性" class="sidebar-link">特性</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#可以用来做什么" class="sidebar-link">可以用来做什么</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#getvaluebypath使用ts实现" class="sidebar-link">getValueByPath使用TS实现</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#单层推导" class="sidebar-link">单层推导</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#多层推导" class="sidebar-link">多层推导</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#深层次actions的dispatch函数ts实现" class="sidebar-link">深层次Actions的dispatch函数TS实现</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#结尾" class="sidebar-link">结尾</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#题外话：uniontointersection" class="sidebar-link">题外话：UnionToIntersection</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#distributive-conditional-types" class="sidebar-link">Distributive conditional types</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#type-inference-in-conditional-types" class="sidebar-link">Type inference in conditional types</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#uniontointersection-原理探究" class="sidebar-link">UnionToIntersection 原理探究</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#参考资料汇总" class="sidebar-link">参考资料汇总</a></li></ul></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用typescript新特性template-literal-types完善链式key的类型推导"><a href="#使用typescript新特性template-literal-types完善链式key的类型推导" class="header-anchor">#</a> 使用Typescript新特性Template Literal Types完善链式key的类型推导</h1> <blockquote><p>作者：<a href="https://github.com/anotherso1a" target="_blank" rel="noopener noreferrer">anotherso1a<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <h2 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h2> <p>在<strong>Mpx框架</strong>中我们采用了类似 <code>Vuex</code> 的数据仓库设计，这使得小程序的数据也可以在框架中得到<strong>统一的管理</strong>。但由于设计上的原因，这一部分在TS推导的实现上变得异常艰难，其中有一个明显的问题就是<strong>链式key</strong>的推导：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 一段 mpx-store 代码实例</span>
+
+<span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// other options ...</span>
+  actions<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">someAction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 下面这一个dispatch语句如何得到正确的推导？result的类型如何获取？</span>
+      <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'deeperActions.anotherAction'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
+      <span class="token keyword">return</span> result
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  deps<span class="token operator">:</span> <span class="token punctuation">{</span>
+    deeperActions<span class="token operator">:</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      actions<span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token function">anotherAction</span><span class="token punctuation">(</span>payload<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token comment">// do something</span>
+          <span class="token keyword">return</span> <span class="token string">'result'</span> <span class="token operator">+</span> payload
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// other deps ...</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>我们该如何获取 <code>this.dispatch('deeperActions.anotherAction', 1)</code> 的返回值？如何针对dispatch后续的参数类型做限制？这几乎是不可能解决的问题。</p> <p>好消息是，在 2020.09.19，typescript团队release了一个<a href="https://github.com/microsoft/TypeScript/releases/tag/v4.1-beta" target="_blank" rel="noopener noreferrer">beta版本<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。这个版本新推出了一个特性：<strong>模板字符串类型（Template Literal Types）</strong>。</p> <p>这让<strong>链式key</strong>的推导出现了曙光，不久后，我们开始尝试完善 <code>mpx-store</code> 的推导，此篇文章也是基于我们实践中所做的一些工作总结而来。</p> <h2 id="特性"><a href="#特性" class="header-anchor">#</a> 特性</h2> <p>这里可以直接看<a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html" target="_blank" rel="noopener noreferrer">官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>例子，可以十分直观的感受到其特性：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">Color</span> <span class="token operator">=</span> <span class="token string">&quot;red&quot;</span> <span class="token operator">|</span> <span class="token string">&quot;blue&quot;</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">Quantity</span> <span class="token operator">=</span> <span class="token string">&quot;one&quot;</span> <span class="token operator">|</span> <span class="token string">&quot;two&quot;</span><span class="token punctuation">;</span>
+
+<span class="token keyword">type</span> <span class="token class-name">SeussFish</span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>Quantity <span class="token operator">|</span> Color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> fish</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
+<span class="token comment">//   ^ = type SeussFish = &quot;one fish&quot; | &quot;two fish&quot; | &quot;red fish&quot; | &quot;blue fish&quot;</span>
+</code></pre></div><p>根据例子得知：模板字符串的使用方式几乎和ES6的字符串模板一致，可以做字符串的拼接，当接收字面量联合类型时，会做matrix操作，返回所有可能的拼接后的字面量联合类型。</p> <p>另一个例子：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token operator">=</span> <span class="token string">'1'</span> <span class="token operator">|</span> <span class="token string">'2'</span>
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">B</span></span> <span class="token operator">=</span> <span class="token string">'a'</span> <span class="token operator">|</span> <span class="token string">'b'</span>
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token operator">=</span> <span class="token string">'C'</span> <span class="token operator">|</span> <span class="token string">'D'</span>
+
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">D</span></span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">A</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">B</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">C</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
+<span class="token comment">// type D = &quot;1aC&quot; | &quot;1aD&quot; | &quot;1bC&quot; | &quot;1bD&quot; | &quot;2aC&quot; | &quot;2aD&quot; | &quot;2bC&quot; | &quot;2bD&quot;</span>
+</code></pre></div><h2 id="可以用来做什么"><a href="#可以用来做什么" class="header-anchor">#</a> 可以用来做什么</h2> <p>这个新特性的出现使得在js中常用的链式key取值，调用等，都能够使用ts进行完整的推导。</p> <p><strong>第一个问题：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token parameter">object<span class="token punctuation">,</span> prop</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  prop <span class="token operator">=</span> prop <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">;</span>
+  <span class="token keyword">const</span> paths <span class="token operator">=</span> prop<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token keyword">let</span> current <span class="token operator">=</span> object<span class="token punctuation">;</span>
+  <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
+  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> j <span class="token operator">=</span> paths<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> j<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> path <span class="token operator">=</span> paths<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>current<span class="token punctuation">)</span> <span class="token keyword">break</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> j <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      result <span class="token operator">=</span> current<span class="token punctuation">[</span>path<span class="token punctuation">]</span><span class="token punctuation">;</span>
+      <span class="token keyword">break</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+    current <span class="token operator">=</span> current<span class="token punctuation">[</span>path<span class="token punctuation">]</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+  <span class="token keyword">return</span> result<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// 调用例子</span>
+<span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
+<span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a.b'</span><span class="token punctuation">)</span> <span class="token comment">// { c: 1 }</span>
+</code></pre></div><p><strong>如何将以上 getValueByPath 函数使用ts改写，使该函数的调用具有完备的类型推断？</strong></p> <p><strong>第二个问题：</strong></p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">simpleActions</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token function">actionOne</span><span class="token punctuation">(</span>payload<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token builtin">number</span><span class="token operator">&gt;</span>
+  <span class="token function">actionTwo</span><span class="token punctuation">(</span>payload<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token builtin">boolean</span><span class="token operator">&gt;</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">dispatch</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token keyword">keyof</span> simpleActions<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>type<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">)</span><span class="token operator">:</span> ReturnType<span class="token operator">&lt;</span>simpleActions<span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
+
+<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'actionOne'</span><span class="token punctuation">)</span>
+<span class="token comment">// function dispatch&lt;&quot;actionOne&quot;&gt;(type: &quot;actionOne&quot;): Promise&lt;number&gt;</span>
+</code></pre></div><p><strong>我们很容易为上面的 <code>simpleActions</code> 编写出其对应的 <code>dispatch</code> 函数，并具备完整推导，但针对下面这种深层次的actions，如何为其编写dispatch函数？</strong></p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token function">someAction</span><span class="token punctuation">(</span>payload<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> payload
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  deeperActions<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">anotherAction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// do something</span>
+      <span class="token keyword">return</span> <span class="token string">'result'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    otherActions<span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">finalAction</span><span class="token punctuation">(</span>payload<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token operator">!</span>payload
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">type</span> <span class="token class-name">Actions</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> actions
+
+<span class="token comment">// 编写一个 dispatch 方法，使得：</span>
+<span class="token comment">// let result = dispatch('deeperActions.anotherAction') // 返回类型为： Promise&lt;string&gt;</span>
+<span class="token comment">// let final = dispatch('deeperActions.otherActions.finalAction', 'hello world') // 返回类型为：Promise&lt;boolean&gt;</span>
+</code></pre></div><p>在typescript发布4.1之前，这几乎是不可能完成的任务，但是4.1的发布使我们能够对这一部分的缺失做一些类型补全。</p> <p>接下来我们围绕上面两个问题分别进行实现。</p> <h2 id="getvaluebypath使用ts实现"><a href="#getvaluebypath使用ts实现" class="header-anchor">#</a> getValueByPath使用TS实现</h2> <p>需要使 <code>getValueByPath({ a: { b: { c: 1 } } }, 'a.b')</code> 获得完整的推导，我们首先需要能拿到两个参数的完整类型，这在ts中是十分容易的。第二步则是对两个参数的类型做映射处理，最好使得第一个参数输入完成之后，第二个参数直接能具备完整推导。</p> <h3 id="单层推导"><a href="#单层推导" class="header-anchor">#</a> 单层推导</h3> <p>我们可以先尝试着实现对单层对象取值的类型推导：</p> <p>首先能得到一个大致的函数结构，接受两个参数，返回一个值</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span>object<span class="token operator">:</span> Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span>
+</code></pre></div><p>上面这种写法是拿不到参数类型的，为了能正确拿到参数的类型，我们使用范型来填充参数 <code>object</code>：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">getValueByPath</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;&gt;</span></span></span><span class="token punctuation">(</span>object<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span>
+</code></pre></div><p>可以直接在编辑器上面尝试一下(我使用的是vscode)，很明显可以看到，我们正确的拿到了第一个参数的类型：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/5a1f9aef-c5ff-4109-980a-85216b62e291.png" alt="xx"></p> <p>能取到参数的类型对象，就能使用关键字 <code>keyof</code> 获取对象的每一个key，接下来我们把候选key值限定给参数prop，然后把对应的返回值结果填充到函数的结果当中，这里我们引入第二个范型 <code>K</code>。尝试调用之后，我们发现结果都符合预期。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">getValueByPath</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token keyword">keyof</span> <span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>object<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span>
+
+<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">)</span> <span class="token comment">// number</span>
+<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">)</span> <span class="token comment">// string</span>
+<span class="token keyword">let</span> c <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">)</span> <span class="token comment">// Argument of type '&quot;c&quot;' is not assignable to parameter of type '&quot;a&quot; | &quot;b&quot;'.ts(2345)</span>
+</code></pre></div><h3 id="多层推导"><a href="#多层推导" class="header-anchor">#</a> 多层推导</h3> <p>仅仅是单层推导的结构依然是无法满足我们对于 <code>getValueByPath({ a: { b: { c: 1 } } }, 'a.b')</code> 推导的需求：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a.b'</span><span class="token punctuation">)</span> 
+<span class="token comment">// Argument of type '&quot;a.b&quot;' is not assignable to parameter of type '&quot;a&quot;'.ts(2345)</span>
+</code></pre></div><p>可以看到，第二个候选参数的类型仅有 <code>&quot;a&quot;</code>，而我们按正常期望来讲，<code>getValueByPath</code>的第一个参数传入 <code>{ a: { b: { c: 1 } } }</code> 之后，第二个候选参数类型应该为： <code>&quot;a&quot; | &quot;a.b&quot; | &quot;a.b.c&quot;</code> 。</p> <p>接下来我们使用4.1的新特性，将对象： <code>{ a: { b: { c: 1 } } }</code> 与其链式key： <code>&quot;a&quot; | &quot;a.b&quot; | &quot;a.b.c&quot;</code> 一一对应起来。</p> <p>工欲善其事，必先利其器。我们先封装好两个工具函数：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 取出对象的所有除了 symbol 以外的key</span>
+<span class="token keyword">type</span> <span class="token class-name">StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> Exclude<span class="token operator">&lt;</span><span class="token keyword">keyof</span> <span class="token constant">T</span><span class="token punctuation">,</span> <span class="token builtin">symbol</span><span class="token operator">&gt;</span>
+
+<span class="token comment">// 将字符串用 . 进行拼接</span>
+<span class="token keyword">type</span> <span class="token class-name">CombineStringKey<span class="token operator">&lt;</span><span class="token constant">H</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">,</span> <span class="token constant">L</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">H</span> <span class="token keyword">extends</span> <span class="token string">''</span> <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">L</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">H</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">L</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
+</code></pre></div><p>我们知道，<code>symbol</code> 类型是没办法放在<strong>模板字符串</strong>中的，所以对key进行拼接之前，需要过滤掉所有 <code>symbol</code> 类型的key。而 <code>StringKeyof</code> 函数，就是用来过滤对象中所有不符合<strong>模板字符串</strong>类型的key的方法。其实际用法与 <code>keyof</code> 相同，只是返回值能用于<strong>模板字符串</strong>。</p> <p><code>CombineStringKey</code> 则是对两个key进行拼接，拼接的结果自然就是我们需要的链式key格式。</p> <p>调用例子：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">const</span> symbol1 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token number">1</span><span class="token operator">:</span> <span class="token builtin">string</span>
+  a<span class="token operator">:</span> <span class="token builtin">string</span>
+  <span class="token punctuation">[</span>symbol1<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">string</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">K</span></span> <span class="token operator">=</span> StringKeyof<span class="token operator">&lt;</span><span class="token constant">A</span><span class="token operator">&gt;</span> <span class="token comment">// 1 | 'a'</span>
+
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">B</span></span> <span class="token operator">=</span> CombineStringKey<span class="token operator">&lt;</span><span class="token string">''</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token operator">&gt;</span>         <span class="token comment">// &quot;a&quot;</span>
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token operator">=</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">B</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token operator">&gt;</span>          <span class="token comment">// &quot;a.b&quot;</span>
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">D</span></span> <span class="token operator">=</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">C</span><span class="token punctuation">,</span> <span class="token string">'c1'</span> <span class="token operator">|</span> <span class="token string">'c2'</span><span class="token operator">&gt;</span>  <span class="token comment">// &quot;a.b.c1&quot; | &quot;a.b.c2&quot;</span>
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">E</span></span> <span class="token operator">=</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">D</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token operator">&gt;</span>          <span class="token comment">// &quot;a.b.c1.d&quot; | &quot;a.b.c2.d&quot;</span>
+</code></pre></div><p>我们现在以下面这个对象类型为例，取出该对象所有符合要求的链式key：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">deepObj</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+  a<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
+  b<span class="token operator">:</span> <span class="token punctuation">{</span>
+    c<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
+    d<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
+    e<span class="token operator">:</span> <span class="token punctuation">{</span>
+      f<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
+      g<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>思路：遍历对象的所有key，同时对key对应的值进行判断，如果是一个更深层次的对象，则保留外层的key，对更深层对象递归处理，把后续递归出的key都和上一层中保留的key进行拼接。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">P</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token string">''</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token punctuation">[</span><span class="token constant">K</span> <span class="token keyword">in</span> StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span> <span class="token operator">?</span> ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token punctuation">,</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;&gt;</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token punctuation">[</span>_ <span class="token keyword">in</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">[</span>StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span>
+</code></pre></div><p>我们将 <code>ChainKeys</code> 函数拆开来看，首先是它的参数，接受两个类型参数，第一个是类型T，第二个则是用于拼接的<strong>前缀字符串</strong>，其值可选。我们使用 <code>in</code> 语法遍历 <code>T</code> 的所有 key 值，也就是 <code>[K in StringKeyof&lt;T&gt;]</code>，这里我们使用了前面封装好的方法 <code>StringKeyof</code> 来代替 <code>keyof</code> 关键字。对对应的 key 的值，也就是 <code>T[K]</code>，我们使用 <code>extends</code> 进行前置判断，如果 <code>T[K]</code> 是一个<strong>复杂类型</strong>，我们则将当前的字符串前缀 <code>P</code> 和当前的 <code>K</code> 进行拼接，递归调用 <code>ChainKeys</code> 函数进行处理。如果 <code>T[K]</code> 为<strong>基本类型</strong>，我们直接使用 <code>Record</code> 方法组装拼接好的key（<code>CombineStringKey&lt;P, K&gt;</code>）和value（<code>T[K]</code>），为了方便在编辑器里面查看结果，这里将<code>Record&lt;CombineStringKey&lt;P, K&gt;, T[K]&gt;</code> 替换为 <code>{ [_ in CombineStringKey&lt;P, K&gt;]:T[K] }</code>。最后将所有结果打平成联合类型，也就是最后的一个取值操作：<code>{...}[StringKeyof&lt;T&gt;]</code>，这和 <code>[1,2,3][number] // 3 | 1 | 2</code> 的处理方式一致。</p> <p>接下来我们在编辑器中查看一下调用结果：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/36f16bdc-4754-4387-bdac-bf3710a3ea56.png" alt="img"></p> <p>如红框中所示，发现链式key已经和其类型一一对应起来了。</p> <p>但是这还有一些问题：</p> <p>一、<code>&quot;b&quot;</code> 以及 <code>&quot;b.e&quot;</code> 没有出现在枚举当中。</p> <p>二、返回结果是一个<strong>联合类型</strong>，如何把这个结果运用到函数当中呢？</p> <p>第一个问题其实很好解决，当我们在递归处理的同时，将当前的链式key与对应值也进行处理就可以，即：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">P</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token string">''</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token punctuation">[</span><span class="token constant">K</span> <span class="token keyword">in</span> StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span>
+    <span class="token operator">?</span> Record<span class="token operator">&lt;</span>CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span> <span class="token operator">&amp;</span> ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token punctuation">,</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;&gt;</span> 
+    <span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token punctuation">[</span>_ <span class="token keyword">in</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">[</span>StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span>
+</code></pre></div><p>同样为了方便编辑器中查看结果我们把 <code>Record&lt;CombineStringKey&lt;P, K&gt;, T[K]&gt;</code> 替换成 <code>{ [_ in CombineStringKey&lt;P, K&gt;]:T[K] }</code>：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/d0bb4b70-f355-4d41-8430-031ac4a44136.png" alt="img"></p> <p>可以看到 <code>b</code> 以及 <code>&quot;b.e&quot;</code> 这样的key都被取出来并放到了结果当中。其实这里还是有一些问题，如果你实际去代码编辑器里面查看结果的话，会发现有很多重复的 <code>b</code> ，这是因为后续使用交叉类型进行拼接的 <code>ChainKeys</code> 的返回值是一个联合类型，如此一来，<code>b</code> 会被分配到联合类型的<strong>每一项</strong>上，在后面我们会解决这个问题。</p> <p>第二个问题是结果为联合类型，我们如何才能将其运用至函数当中呢？</p> <p>大家都知道，对联合类型使用 <code>keyof</code> 操作，返回的类型为 <code>never</code>，即无法取出联合类型的所有key值：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span> <span class="token operator">|</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">K</span></span> <span class="token operator">=</span> <span class="token keyword">keyof</span> <span class="token constant">T</span> <span class="token comment">// never</span>
+<span class="token comment">// 如何使K的类型为 a ｜ b 呢？</span>
+</code></pre></div><p>这里我们引入另一个工具函数：<code>UnionToIntersection</code>，顾名思义，该函数的作用就是将联合类型转换为交叉类型，至于<strong>为什么</strong>它能将联合类型转换为交叉类型，我们后面会讲：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">UnionToIntersection<span class="token operator">&lt;</span><span class="token constant">U</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token constant">U</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">any</span></span> <span class="token operator">?</span> <span class="token punctuation">(</span>k<span class="token operator">:</span> <span class="token constant">U</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span> <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">)</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>k<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">I</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token constant">I</span> <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">;</span>
+</code></pre></div><p>我们将其运用到ChainKeys的推导当中去：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">P</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token string">''</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> UnionToIntersection<span class="token operator">&lt;</span><span class="token punctuation">{</span>
+  <span class="token punctuation">[</span><span class="token constant">K</span> <span class="token keyword">in</span> StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span>
+    <span class="token operator">?</span> Record<span class="token operator">&lt;</span>CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span> <span class="token operator">&amp;</span> ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token punctuation">,</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;&gt;</span> 
+    <span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token punctuation">[</span>_ <span class="token keyword">in</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">[</span>StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
+</code></pre></div><p>再经过一些润色得到一个比较精简的函数：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">P</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token string">''</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> UnionToIntersection<span class="token operator">&lt;</span><span class="token punctuation">{</span>
+  <span class="token punctuation">[</span><span class="token constant">K</span> <span class="token keyword">in</span> StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span> Record<span class="token operator">&lt;</span>CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span> <span class="token operator">&amp;</span> <span class="token punctuation">(</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span> <span class="token operator">?</span> ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token punctuation">,</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;&gt;</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">[</span>StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
+</code></pre></div><p>尝试调用该方法最终得到的结果为：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/f7b952df-6668-434e-b26c-e43345a0f4b4.png" alt="img"></p> <p>最终，我们以此为基础，编写 <code>getValueByPath</code> 函数的定义：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">getValueByPath</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token keyword">keyof</span> ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;&gt;</span></span></span><span class="token punctuation">(</span>object<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">)</span><span class="token operator">:</span> ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span>
+
+<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">)</span>     <span class="token comment">// { b: { c: number } }</span>
+<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a.b'</span><span class="token punctuation">)</span>   <span class="token comment">// { c: number }</span>
+<span class="token keyword">let</span> c <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a.b.c'</span><span class="token punctuation">)</span> <span class="token comment">// number</span>
+</code></pre></div><p>到此，我们算是完成了 <code>getValueByPath</code> 函数的类型定义以及推导。</p> <h2 id="深层次actions的dispatch函数ts实现"><a href="#深层次actions的dispatch函数ts实现" class="header-anchor">#</a> 深层次Actions的dispatch函数TS实现</h2> <p>其实在推导 <code>getValueByPath</code> 的过程中，我们已经基本上完成了所有实现该 <code>dispatch</code> 所需要的条件，与 <code>getValueByPath</code> 不同的是，我们只需要遍历出函数所对应的链式key即可，改写一下 <code>ChainKeys</code> 方法：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">interface</span> <span class="token class-name">DeeperActions</span> <span class="token punctuation">{</span>
+  <span class="token punctuation">[</span>k<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">|</span> DeeperActions
+<span class="token punctuation">}</span>
+<span class="token keyword">type</span> <span class="token class-name">ActionChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">P</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token string">''</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> UnionToIntersection<span class="token operator">&lt;</span><span class="token punctuation">{</span>
+  <span class="token punctuation">[</span><span class="token constant">K</span> <span class="token keyword">in</span> StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">DeeperActions</span>
+    <span class="token operator">?</span> ActionChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token punctuation">,</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;&gt;</span>
+    <span class="token operator">:</span> Record<span class="token operator">&lt;</span>CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
+<span class="token punctuation">}</span><span class="token punctuation">[</span>StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
+</code></pre></div><p>我们除去了对对象的混入，同时将判断类型改为了 <code>DeeperActions</code> ，以此来判断该 <code>action</code> 对象是否有更深层次的actions。</p> <p>调用结果：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/812f50b2-a148-4065-9f87-a9b010502c6d.png" alt="img"></p> <p>再看我们最开始提出的问题：</p> <blockquote><p>编写一个 dispatch 方法，使得：</p> <p><code>let result = dispatch('deeperActions.anotherAction') // 返回类型为： Promise&lt;string&gt;</code></p> <p><code>let final = dispatch('deeperActions.otherActions.finalAction', 'hello world') // 返回类型为：Promise&lt;boolean&gt;</code></p></blockquote> <p>我们开始定义 <code>dispatch</code> 方法：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">dispatch</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token keyword">keyof</span> ChainingActions<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token operator">:</span> Parameters<span class="token operator">&lt;</span>ChainingActions<span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token operator">:</span> ReturnType<span class="token operator">&lt;</span>ChainingActions<span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
+</code></pre></div><p>这里我们分别使用了 <code>Parameters</code> 和 <code>ReturnType</code> 函数来获取对应 <code>action</code> 的参数以及返回值，用来填充至 <code>dispatch</code> 方法中，实际编写调用代码：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/c6165376-d374-4ede-9bd2-0c99ca336337.png" alt=""></p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/9447cd1a-04b6-4972-80a1-13f28de2b0cc.png" alt=""></p> <p>考虑到我们的 <code>actions</code> 无论如何都会返回一个 <code>Promise</code>，上述定义其实还是稍微有一些问题，但是改动起来也很方便，只需要在 <code>ReturnType</code> 外层使用 <code>Promise</code> 包装一下就可以了：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">Promisify<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span></span> <span class="token operator">?</span> <span class="token constant">T</span> <span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
+
+<span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">dispatch</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token keyword">keyof</span> ChainingActions<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token operator">:</span> Parameters<span class="token operator">&lt;</span>ChainingActions<span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token operator">:</span> Promisify<span class="token operator">&lt;</span>ReturnType<span class="token operator">&lt;</span>ChainingActions<span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;&gt;</span>
+
+<span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'deeperActions.anotherAction'</span><span class="token punctuation">)</span> <span class="token comment">// Promise&lt;string&gt;</span>
+<span class="token keyword">let</span> final <span class="token operator">=</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'deeperActions.otherActions.finalAction'</span><span class="token punctuation">,</span> <span class="token string">'hello world'</span><span class="token punctuation">)</span> <span class="token comment">// Promise&lt;boolean&gt;</span>
+</code></pre></div><p>至此，我们 <code>dispatch</code> 的TS实现也已经完成。</p> <p>最终结果：</p> <p><img src="http://cdn.qiniu.archerk.com.cn/QQ20210128-162139-HD.gif" alt=""></p> <ul><li>若图片加载失败请访问： http://cdn.qiniu.archerk.com.cn/QQ20210128-162139-HD.gif</li></ul> <h2 id="结尾"><a href="#结尾" class="header-anchor">#</a> 结尾</h2> <p>其实 <code>getValueByPath</code> 这一部分的内容是有一些缺陷的，因为TS本身<strong>限制了递归的次数</strong>，当数据层级达到一定程度时，上文的推导会失效。在Mpx的建设中我们还对此做了一些优化，尽可能的<strong>减少</strong>了递归次数。</p> <p>这里也给出<strong>另一个方案</strong>做链式key推导，这种方式<strong>性能</strong>上会好很多，因为不用解析出所有的链式key，而是根据链式key<strong>反向解析</strong>前面的对象，因此该方案可以解析出正确的类型，但是会丧失一部分代码提示：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">CutChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token builtin">string</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">infer</span> <span class="token constant">A</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">infer</span> <span class="token constant">B</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token constant">A</span><span class="token punctuation">,</span> <span class="token constant">B</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token builtin">never</span><span class="token punctuation">]</span>
+
+<span class="token keyword">type</span> <span class="token class-name">GetValueByPath<span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token builtin">string</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> CutChainKeys<span class="token operator">&lt;</span><span class="token constant">K</span><span class="token operator">&gt;</span> <span class="token keyword">extends</span> <span class="token punctuation">[</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">never</span><span class="token punctuation">]</span>
+  <span class="token operator">?</span> <span class="token constant">T</span><span class="token punctuation">[</span>CutChainKeys<span class="token operator">&lt;</span><span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
+  <span class="token operator">:</span> GetValueByPath<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">[</span>CutChainKeys<span class="token operator">&lt;</span><span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> CutChainKeys<span class="token operator">&lt;</span><span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
+
+<span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">test</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token builtin">string</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>o<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> k<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">)</span><span class="token operator">:</span> GetValueByPath<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span>
+
+<span class="token keyword">let</span> s <span class="token operator">=</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  a<span class="token operator">:</span> <span class="token punctuation">{</span>
+    b<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+    c<span class="token operator">:</span> <span class="token punctuation">{</span>
+      d<span class="token operator">:</span> <span class="token punctuation">{</span>
+        e<span class="token operator">:</span> <span class="token punctuation">{</span>
+          f<span class="token operator">:</span> <span class="token string">'f'</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a.c.d.e.f'</span><span class="token punctuation">)</span> <span class="token comment">// string</span>
+</code></pre></div><p>通过这一系列的处理，我们基本完成了 <code>mpx-store</code> 的类型推导，包括对应的<strong>辅助函数</strong>等。这也使得我们能够在项目中更好的使用TS进行开发。在最新的滴滴出行小程序更新中，我们已经开始使用TS全量进行开发，目前看来开发体验还不错，后期也会逐步将旧的代码重构为TS。我们后续也会持续维护和迭代框架，也欢迎有兴趣的朋友来一起<a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer">共建<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>有写的不好的地方请多包含，也欢迎大家批评指正。</p> <h2 id="题外话：uniontointersection"><a href="#题外话：uniontointersection" class="header-anchor">#</a> 题外话：UnionToIntersection</h2> <p>上面提到的，我们使用工具函数 <code>UnionToIntersection</code> 将联合类型转换为交叉类型。而 <code>UnionToIntersection</code> 又是如何将<strong>联合类型转换为交叉类型</strong>的呢？</p> <p>在 <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html" target="_blank" rel="noopener noreferrer">Conditional Types<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 中有提到一些点：</p> <h3 id="distributive-conditional-types"><a href="#distributive-conditional-types" class="header-anchor">#</a> Distributive conditional types</h3> <blockquote><p>Conditional types in which the checked type is a naked type parameter are called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation. For example, an instantiation of <code>T extends U ? X : Y</code> with the type argument <code>A | B | C</code> for <code>T</code> is resolved as <code>(A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)</code>.</p></blockquote> <p>即在<strong>执行</strong> <code>extends</code> <strong>语句时</strong>，如果 <code>extends</code> 左侧为<strong>联合类型</strong>，则会被分配成<strong>对应数量个</strong>子条件判断语句，最终<strong>联合</strong>每个子语句的结果。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">|</span> <span class="token string">'2'</span> <span class="token operator">|</span> <span class="token number">3</span>
+
+<span class="token keyword">type</span> <span class="token class-name">IsNumber<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">number</span></span> <span class="token operator">?</span> <span class="token constant">T</span> <span class="token operator">:</span> <span class="token builtin">never</span>
+
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">B</span></span> <span class="token operator">=</span> IsNumber<span class="token operator">&lt;</span><span class="token constant">A</span><span class="token operator">&gt;</span> <span class="token comment">// 1 | 3</span>
+</code></pre></div><h3 id="type-inference-in-conditional-types"><a href="#type-inference-in-conditional-types" class="header-anchor">#</a> Type inference in conditional types</h3> <blockquote><p>Within the <code>extends</code> clause of a conditional type, it is now possible to have <code>infer</code> declarations that introduce a type variable to be inferred. Such inferred type variables may be referenced in the true branch of the conditional type. It is possible to have multiple <code>infer</code> locations for the same type variable.</p></blockquote> <p>在条件判断语句中，可以使用 <code>infer</code> 关键字做类型推断，同一个候选值能有<strong>多个</strong>推断位置。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">ReturnType<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">infer</span> <span class="token constant">R</span> <span class="token operator">?</span> <span class="token constant">R</span> <span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
+</code></pre></div><p><strong>正位推断</strong>的结果会被推导为<strong>联合</strong>类型：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">Foo<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">U</span><span class="token punctuation">;</span> b<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">U</span> <span class="token punctuation">}</span> <span class="token operator">?</span> <span class="token constant">U</span> <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T10</span></span> <span class="token operator">=</span> Foo<span class="token operator">&lt;</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> b<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token comment">// string</span>
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T11</span></span> <span class="token operator">=</span> Foo<span class="token operator">&lt;</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> b<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token comment">// string | number</span>
+</code></pre></div><p><strong>逆变位置推断</strong>的结果会被处理成<strong>交叉</strong>类型：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">Bar<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">{</span> <span class="token function-variable function">a</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">U</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token function-variable function">b</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">U</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span> <span class="token punctuation">}</span>
+  <span class="token operator">?</span> <span class="token constant">U</span>
+  <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T20</span></span> <span class="token operator">=</span> Bar<span class="token operator">&lt;</span><span class="token punctuation">{</span> <span class="token function-variable function">a</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token function-variable function">b</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span> <span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token comment">// string</span>
+<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T21</span></span> <span class="token operator">=</span> Bar<span class="token operator">&lt;</span><span class="token punctuation">{</span> <span class="token function-variable function">a</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token function-variable function">b</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span> <span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token comment">// string &amp; number</span>
+</code></pre></div><p><strong>注意</strong>：这里是<code>ts-2.8</code>发布时的文档以及例子，现在来说是不存在 <code>string &amp; number</code> 类型的，如果实际编写这段代码的话会发现 <code>T21</code> 的值为 <code>never</code>，因为不可能存在一个值既为 <code>string</code> 又为 <code>number</code>。逆变与协变的一些概念可以参考一下<a href="https://zh.wikipedia.org/wiki/%E5%8D%8F%E5%8F%98%E4%B8%8E%E9%80%86%E5%8F%98" target="_blank" rel="noopener noreferrer">逆变与协变<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="uniontointersection-原理探究"><a href="#uniontointersection-原理探究" class="header-anchor">#</a> UnionToIntersection 原理探究</h3> <p>有了以上两个信息之后，我们再来看看 <code>UnionToIntersection</code> 的实现，为了方便阅读我们做一些折行：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">UnionToIntersection<span class="token operator">&lt;</span><span class="token constant">U</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span>
+    <span class="token constant">U</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">any</span></span> 
+      <span class="token operator">?</span> <span class="token punctuation">(</span>k<span class="token operator">:</span> <span class="token constant">U</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
+      <span class="token operator">:</span> <span class="token builtin">never</span>
+  <span class="token punctuation">)</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>k<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">I</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> 
+    <span class="token operator">?</span> <span class="token constant">I</span>
+    <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">;</span>
+</code></pre></div><p>发现实际上 <code>UnionToIntersection</code> 分为两步：</p> <p>1、将联合类型的<strong>每一项</strong>填充至 函数类型 <code>(k: U) =&gt; void</code> 的参数 <code>k</code> 中。</p> <p>2、使用 <code>infer</code> 关键字在<strong>逆变位</strong>对 <code>(k: U) =&gt; void</code> 做推导，将参数的类型推入结果 <code>I</code> 中，组成<strong>交叉</strong>类型。</p> <p>拆分看实现：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 联合类型推入函数参数</span>
+<span class="token keyword">type</span> <span class="token class-name">UnionToFunction<span class="token operator">&lt;</span><span class="token constant">U</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">U</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">any</span></span> <span class="token operator">?</span> <span class="token punctuation">(</span>k<span class="token operator">:</span> <span class="token constant">U</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span> <span class="token operator">:</span> <span class="token builtin">never</span>
+<span class="token comment">// 对函数逆变推导，将参数推导为交叉类型</span>
+<span class="token keyword">type</span> <span class="token class-name">FunctionsToIntersection<span class="token operator">&lt;</span><span class="token constant">F</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token constant">F</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token punctuation">[</span><span class="token punctuation">(</span>k<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">I</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token constant">I</span> <span class="token operator">:</span> <span class="token builtin">never</span>
+
+<span class="token keyword">type</span> <span class="token class-name">Union</span> <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span> <span class="token operator">|</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
+
+<span class="token keyword">type</span> <span class="token class-name">Fun</span> <span class="token operator">=</span> UnionToFunction<span class="token operator">&lt;</span>Union<span class="token operator">&gt;</span> <span class="token comment">// ((k: { a: number }) =&gt; void) | ((k: { b: string }) =&gt; void)</span>
+
+<span class="token keyword">type</span> <span class="token class-name">Intersection</span> <span class="token operator">=</span> FunctionsToIntersection<span class="token operator">&lt;</span>Fun<span class="token operator">&gt;</span> <span class="token comment">// { a: number } &amp; { b: string }</span>
+</code></pre></div><p>可以注意到我们拆分开来了 <code>UnionToIntersection</code> 后并不是完全按照原有写法去写的，在 <code>FunctionsToIntersection</code> 函数中，我们使用了<code>[]</code>将类型给包裹起来，这是为了<strong>避免</strong>第一个特性（Distributive conditional types）的影响，如果不做包裹，则 <code>extends</code> 左侧为联合类型，被分配成若干个子句后，同一位置的 <code>infer</code> 就会被分别执行，无法合成为交叉类型。而使用<code>[]</code>进行包裹之后则避免了这个影响，<code>extends</code> 左侧不再是一个联合类型，而是一个数组类型。</p> <h2 id="参考资料汇总"><a href="#参考资料汇总" class="header-anchor">#</a> 参考资料汇总</h2> <ul><li><a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html" target="_blank" rel="noopener noreferrer">Template Literal Types<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html" target="_blank" rel="noopener noreferrer">Conditional Types<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://zh.wikipedia.org/wiki/%E5%8D%8F%E5%8F%98%E4%B8%8E%E9%80%86%E5%8F%98" target="_blank" rel="noopener noreferrer">逆变与协变 Covariance and contravariance<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/microsoft/TypeScript/issues/30188" target="_blank" rel="noopener noreferrer">TS递归上限<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/didi/mpx/pull/631" target="_blank" rel="noopener noreferrer">Mpx中的实现（前期）<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/articles/size-control.html" class="prev">
+        基于Mpx的小程序体积优化
+      </a></span> <span class="next"><a href="/articles/2.7-release.html">
+        Mpx2.7 版本正式发布，大幅提升编译构建速度
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/61.74ebd7d9.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/unit-test.html b/docs-vuepress/.vuepress/dist/articles/unit-test.html
new file mode 100644
index 0000000000..cc828c450b
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/articles/unit-test.html
@@ -0,0 +1,461 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx 小程序单元测试能力建设与实践 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/62.4bf212f9.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" aria-current="page" class="active sidebar-link">Mpx 小程序单元测试能力建设与实践</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/unit-test.html#什么是单元测试" class="sidebar-link">什么是单元测试</a></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#前端单元测试" class="sidebar-link">前端单元测试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/unit-test.html#前端单元测试工具" class="sidebar-link">前端单元测试工具</a></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#测试断言库" class="sidebar-link">测试断言库</a></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#jest-框架简介" class="sidebar-link">Jest 框架简介</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#小程序单元测试" class="sidebar-link">小程序单元测试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/unit-test.html#与-web-应用的不同" class="sidebar-link">与 web 应用的不同</a></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#小程序单测框架整体流程" class="sidebar-link">小程序单测框架整体流程</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#mpx-框架单元测试" class="sidebar-link">Mpx 框架单元测试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/unit-test.html#初期版本" class="sidebar-link">初期版本</a></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#优化版本" class="sidebar-link">优化版本</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#mpx组件单元测试实战" class="sidebar-link">Mpx组件单元测试实战</a></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#结语" class="sidebar-link">结语</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx-小程序单元测试能力建设与实践"><a href="#mpx-小程序单元测试能力建设与实践" class="header-anchor">#</a> Mpx 小程序单元测试能力建设与实践</h1> <blockquote><p>作者：<a href="https://github.com/Blackgan3" target="_blank" rel="noopener noreferrer">Blackgan3<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <h2 id="什么是单元测试"><a href="#什么是单元测试" class="header-anchor">#</a> 什么是单元测试</h2> <p>In computer programming, unit testing is a software testing method by which individual units of source code—sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures—are tested to determine whether they are fit for use wikipedia</p> <p>对一个函数，模块，类进行运行结果正确性检验的工作就是单元测试，此外每个单元测试的对象应该是一个最简单的组件/函数。</p> <p>那写单测又能给我们哪些收益呢？</p> <ul><li>大幅提高项目代码可维护性</li> <li>覆盖率到达一定指标后可大幅提高研发效率</li> <li>让你的代码零线上bug锐减，上线不再提心吊胆</li> <li>改进设计，促进重构</li></ul> <p>此外，单测高覆盖率的项目也会给公司节省大量支出：
+<img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1640872105786-b7b230b4-7f65-4a0f-8dbf-e8ba89f61837.png" alt="unit-test-money.png">
+据微软统计单测效益结果，如上图展示，绝大多数bug都是在coding阶段产生，并且随着需求开发进度的推进，修复bug的成本会随指数级增长，当我们在unit test阶段发现并修复这个bug是能给公司带来巨大收益的。</p> <p>下方介绍两种常见的项目单元测试规范：</p> <ul><li>TDD (Test driven development)</li></ul> <blockquote><p>测试驱动开发，在书写业务代码之前，先根据需求进行单元功能测试用例书写</p></blockquote> <p>这里驱动开发的不是简单的测试用例，是能够持续验证、重构并且对需求功能极致细化的测试用例</p> <ul><li>BDD (Behavior driven development)</li></ul> <blockquote><p>行为驱动开发，通过具有辨识力的测试用例驱动项目开发团队所有人，使用自然语言来描述功能，一般和 TDD 相结合，针对行为进行测试，让开发者在写单测时从专注代码实现转为业务行为，能使单测更加场景化和智能化</p></blockquote> <p>单元测试的书写初期必定伴随着大量精力与时间的消耗，但长期持续维护的业务在搭建并完善好整个单元测试体系后，可大大提高项目稳定性和研发效率</p> <h2 id="前端单元测试"><a href="#前端单元测试" class="header-anchor">#</a> 前端单元测试</h2> <h3 id="前端单元测试工具"><a href="#前端单元测试工具" class="header-anchor">#</a> 前端单元测试工具</h3> <p>前端单元测试目前有很多框架和工具，我们下方列出三个较为流行的框架和工具库进行介绍</p> <ul><li>Mocha: 功能丰富的 javascript 测试框架(不包括断言和仿真环境，快照测试需额外配置)，可以运行在node.js和浏览器中</li> <li>Jasmine：Behavior-Drive development(BDD)风格的测试框架，在业内较为流行,功能很全面，自带asssert、mock功能</li> <li>Jest：一个功能全面的 javascript 测试框架，基于Jasmine 做了大量新特性(例如并行执行、源代码改动感知等)，开箱即用，适用于绝大多数 js 项目</li></ul> <h3 id="测试断言库"><a href="#测试断言库" class="header-anchor">#</a> 测试断言库</h3> <p>在单测运行框架中，我们需要断言库来进行方法返回和实例状态的正确性验证</p> <ul><li>should: BDD风格断言                    (true).should.be.ok</li> <li>expect: expect()样式断言              expect(true).toBe(true)</li> <li>assert: Node.js 内置断言模块       assert(true === true)</li> <li>chai: expect()，assert()和should风格的断言都支持，全能型选手</li></ul> <p>在众多前端单元测试框架中，Jest 目前凭借零配置，高性能，且对于断言，快照，覆盖率等都有很好的集成，是目前较为流行的一个单测框架</p> <h3 id="jest-框架简介"><a href="#jest-框架简介" class="header-anchor">#</a> Jest 框架简介</h3> <p>简单来看下 Jest 框架的特点以及大致的运行原理</p> <p><strong>Jest 的整体框架特点大概归纳总结为以下几点:</strong></p> <ul><li>在操作系统上高效的进行文件搜索以及相互依赖关系匹配</li> <li>单测并行执行，运行效率高</li> <li>内置断言库、覆盖率、快照测试等功能，开箱可用</li> <li>使用 vm 来进行沙盒环境运行，单测之间相互隔离</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1639153318989-0e6ac9ed-75a3-4874-8a48-5370db55891d.png#averageHue=%23464a4d&amp;clientId=uf375a834-bd4b-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=579&amp;id=u7fb4026f&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=2014&amp;originWidth=777&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=495531&amp;status=done&amp;style=none&amp;taskId=u6e39efb8-e12a-49b0-b8ce-ade9b63fd2c&amp;title=&amp;width=223.5" alt="image.png">
+打开 Jest pacakges，可以看到大概有50多个包，我们根据这些不同的包来将整个 jest 运行流程整体串起来</p> <p><strong>第一步 jest-cli 读取相关配置</strong>
+当我们执行 jest 命令时，先去执行 jest-cli 中的 run 方法，再调用 jest-core 中的 runCli 方法，其中通过 jest-config 提供的 readConfigs 来读取 Jest 相关配置，返回全局配置(globalConfig)和局部配置(configs)</p> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1640502186276-2a1c2976-58a5-4fd9-91db-c5df8265fc7f.png#clientId=u3d4e127e-cc05-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=161&amp;id=uc6c948fd&amp;margin=%5Bobject%20Object%5D&amp;name=unit-test-jest-step1.png&amp;originHeight=177&amp;originWidth=808&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=23884&amp;status=done&amp;style=none&amp;taskId=ub778d79f-2480-411f-97c3-d13aed04965&amp;title=&amp;width=735" alt="unit-test-jest-step1.png"></p> <p><strong>第二步 文件静态分析</strong>
+使用 jest-haste-map 来进行项目中所有文件的检索以及生成文件之间的相互依赖关系，在 jest-core 中的 _run10000 方法中执行 buildContextsAndHasteMaps，返回 contexts 和 hasteMapInstances，contexts 中的 hasteFs 存储的就是文件及依赖关系。</p> <p>**jest-haste-map **检索的过程中借助 jest-worker 来根据当前cpu核数并行的进行文件检索，借助 fb-watch-man/crawler 对整体文件变动做实时监听，做到只执行有改动的单元测试文件，实现单测缓存效果。</p> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1640524931986-a0ee9e99-151b-464e-96f3-c5d403a258f5.png#clientId=u059512e6-4582-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=555&amp;id=u042b30bc&amp;margin=%5Bobject%20Object%5D&amp;name=unit-test-jest-haste.png&amp;originHeight=1109&amp;originWidth=2131&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=188410&amp;status=done&amp;style=none&amp;taskId=u0c46aead-c2c6-4bd4-a90a-cf1e8cce042&amp;title=&amp;width=1065.5" alt="unit-test-jest-haste.png">
+下方看一个简单的jest-haste-map使用示例</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> JestHasteMap <span class="token keyword">from</span> <span class="token string">'jest-haste-map'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span>cpus<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'os'</span><span class="token punctuation">;</span>
+
+<span class="token keyword">const</span> hasteMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">JestHasteMap<span class="token punctuation">.</span>default</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">extensions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'js'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">maxWorkers</span><span class="token operator">:</span> <span class="token function">cpus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">,</span>
+  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">platforms</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+<span class="token keyword">const</span> <span class="token punctuation">{</span>hasteFS<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> hasteMap<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> testFiles <span class="token operator">=</span> hasteFS<span class="token punctuation">.</span><span class="token function">getAllFiles</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>testFiles<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// ['/path/to/tests/list1.spec.js', '/path/to/tests/list2.spec.js', …]</span>
+</code></pre></div><p><strong>第三步 单测检索和排序</strong>
+经过第一步和第二步，我们拿到了 <strong>配置对象 configs</strong>，以及<strong>文件Map HasteContext</strong>，接下来通过 SearchSource 对象检索出所有的单元测试到一个数组中，检索出单元测试文件后，在正式执行之前，我们需要先对当前拿到的所有单测进行权重优先级排序。</p> <p>单测排序的工作是由 jest Sequencer 完成的，默认排序优先级为 failed (上次失败的先运行)&gt; duration(耗时长的先运行) &gt; size(文件体积大的先运行)，当然这里我们也可以自定义customSequencer来覆盖 jest 默认的排序规则，jest 排序规则如下。</p> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1640525025246-045963f5-1df6-411c-9257-74359f05e235.png#clientId=u059512e6-4582-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=802&amp;id=u61d4057e&amp;margin=%5Bobject%20Object%5D&amp;name=unit-test-jest-scquencer.png&amp;originHeight=1603&amp;originWidth=2726&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=292495&amp;status=done&amp;style=none&amp;taskId=udcf49166-d29d-4ba5-97b4-f942d8b9fe4&amp;title=&amp;width=1363" alt="unit-test-jest-scquencer.png"></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>		<span class="token keyword">return</span> tests<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">testA<span class="token punctuation">,</span> testB</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>failedA <span class="token operator">!==</span> failedB<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> failedA <span class="token operator">?</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>hasTimeA <span class="token operator">!=</span> <span class="token punctuation">(</span>testB<span class="token punctuation">.</span>duration <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token comment">// If only one of two tests has timing information, run it last</span>
+        <span class="token keyword">return</span> hasTimeA <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>testA<span class="token punctuation">.</span>duration <span class="token operator">!=</span> <span class="token keyword">null</span> <span class="token operator">&amp;&amp;</span> testB<span class="token punctuation">.</span>duration <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> testA<span class="token punctuation">.</span>duration <span class="token operator">&lt;</span> testB<span class="token punctuation">.</span>duration <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token function">fileSize</span><span class="token punctuation">(</span>testA<span class="token punctuation">)</span> <span class="token operator">&lt;</span> <span class="token function">fileSize</span><span class="token punctuation">(</span>testB<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><p><strong>第四步 开始执行</strong>
+在经过第三步之后，我们拿到了经过排序后的单测文件，接下来开始进入到执行步骤，执行单测时的整个调度工作是 jest/core 中的 TestScheduler 来完成，例如 scheduler 会推算是串行执行还是并行执行，推算单测执行完的大概时间，覆盖率报告的生成等，scheduler 会调用 jest-runner 中的 runTests 方法去触发单测执行</p> <p>如果需要并行执行，runTest 方法触发 jest-worker 创建多个child process 子进程来支持 parallel 执行</p> <p>单元测试中全局方法和全局变量，比如 test() describe() it() 等是由 jest-cirucs(jest-jasmine) 提供并注入global中</p> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1640527878045-b379169e-e180-4226-884d-2da6b90321ec.png#clientId=u059512e6-4582-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;id=u4114c79f&amp;margin=%5Bobject%20Object%5D&amp;name=unit-test-jest-run-test.png&amp;originHeight=2878&amp;originWidth=3480&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=683293&amp;status=done&amp;style=none&amp;taskId=ue36536e2-f975-4782-8f78-6d5203e2ae6&amp;title=" alt="unit-test-jest-run-test.png">
+最终单测的运行是由 jest-runtime 中创建的 vm 虚拟机隔离执行，vm 作用域中dom环境是由 jest-environment-jsdom 提供，此外 jest-runtime 中还包括了 transformer 能力以及mock功能的具体实现等，这部分功能在接下来的Mpx框架单元测试实现章节我们会去详细介绍它。</p> <p><strong>第五步 处理返回结果</strong>
+此外 jest-runner中提供了一套类似于 redux 的数据流机制和eventEmitter来管理维护单测状态以及单测执行结果，在jest-runner 中进行事件触发，在TestScheduler 中进行事件监听并对执行结果进行各种处理和序列化，
+最后在 jest-core 中的runJest方法中进行执行结果的终端输出/文件输出等一系列处理。</p> <h2 id="小程序单元测试"><a href="#小程序单元测试" class="header-anchor">#</a> 小程序单元测试</h2> <h3 id="与-web-应用的不同"><a href="#与-web-应用的不同" class="header-anchor">#</a> 与 web 应用的不同</h3> <p>上个章节讲完前端单测简介，以及jest单测框架的大概运行原理后，接下来我们看下单元测试在小程序场景下与web场景的不同</p> <p>首先小程序本身是双线程分离的机制，但目前并没有这种独特的运行环境用来执行单元测试，这里需要借助小程序官方提供的 miniprogram-simulate 工具集，来将整体运行机制调整为单线程模拟运行，并利用 dom 环境来进行小程序组件的注册渲染以及整个自定义组件树的搭建</p> <p>小程序的单元测试执行依赖 js 运行环境和 dom 环境，这里我们选择 jest 框架来提供对应的环境</p> <p>下方是一个简单的微信小程序官方提供的单元测试demo，具体关于miniprogram-simulate 的更多API的使用可以去官方文档查看 <a href="https://github.com/wechat-miniprogram/miniprogram-simulate" target="_blank" rel="noopener noreferrer">https://github.com/wechat-miniprogram/miniprogram-simulate<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> simulate <span class="token keyword">from</span> <span class="token string">'miniprogram-simulate'</span>
+<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'comp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> id <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./comp'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 注册自定义组件，返回组件 id</span>
+    <span class="token keyword">const</span> comp <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token comment">// 使用 id 渲染自定义组件，返回组件封装实例</span>
+
+    <span class="token keyword">const</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'parent-wrapper'</span><span class="token punctuation">)</span> <span class="token comment">// 创建容器节点</span>
+    comp<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span> <span class="token comment">// 将组件插入到容器节点中，会触发 attached 生命周期</span>
+
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'&lt;div&gt;123&lt;/div&gt;'</span><span class="token punctuation">)</span> <span class="token comment">// 判断组件渲染结果</span>
+    <span class="token comment">// 执行其他的一些测试逻辑</span>
+
+    comp<span class="token punctuation">.</span><span class="token function">detach</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 将组件从容器节点中移除，会触发 detached 生命周期</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>此外对于小程序工具集的整体运行流程，在下方章节进行了简要总结。</p> <h3 id="小程序单测框架整体流程"><a href="#小程序单测框架整体流程" class="header-anchor">#</a> 小程序单测框架整体流程</h3> <p>小程序单元测试中微信官方提供的相关库有 miniprogram-simulate、j-component 和 miniprogram-exparser等</p> <ul><li>miniprogram-simulate: 小程序自定义组件测试工具集，进行小程序内置组件的注册以及模拟微信原生api的注入</li> <li>j-component: 仿小程序组件系统，可以让小程序自定义组件跑在 web 端。</li> <li>miniprogram-exparser：微信小程序官方的组件系统模块，exparser 的组件模型和 WebComponents标准中的 Shadow DOM 高度相似，基于 Shadow DOM 原型，可在纯 JS 环境运行，维护整个组件的节点树相关的信息，包括属性、事件等。</li> <li>miniprogram-compiler:  wcc、wcsc 官方编译器的 node 封装版，用于编译 wxml、wxss 文件</li></ul> <p>开发者在使用的时候经常用的的两个方法就是 simulate.load 和 simulate.render 方法，那这里我们就从这两个方法为入口进行整个流程的总结
+<strong>1.miniprogramSimulate.load(path)</strong> <img src="https://cdn.nlark.com/yuque/0/2022/png/116604/1645371259515-600e82a3-5a16-4b50-90d2-4de16b3a6e13.png#clientId=u8f88ae50-6693-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=2179&amp;id=u91907731&amp;margin=%5Bobject%20Object%5D&amp;name=%E5%B0%8F%E7%A8%8B%E5%BA%8F-load.png&amp;originHeight=2179&amp;originWidth=3100&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=655139&amp;status=done&amp;style=none&amp;taskId=uffad3560-8564-4372-bf2f-ceded0ad196&amp;title=&amp;width=3100" alt="小程序-load.png"></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">let</span> nowLoad
+<span class="token comment">// miniprogram-simulate</span>
+<span class="token keyword">function</span> <span class="token function">load</span><span class="token punctuation">(</span><span class="token parameter">path<span class="token punctuation">,</span> definition</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+  <span class="token comment">// 省略部分判断</span>
+  <span class="token keyword">const</span> id <span class="token operator">=</span> <span class="token function">register</span><span class="token punctuation">(</span>componentPath<span class="token punctuation">,</span> tagName<span class="token punctuation">,</span> cache<span class="token punctuation">,</span> hasRegisterCache<span class="token punctuation">)</span>
+  cache<span class="token punctuation">.</span>needRunJsList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token comment">// nowLoad 用于执行用户代码调用 Component 构造器时注入额外的参数给 j-component</span>
+    nowLoad <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
+    <span class="token comment">// require('xxx.js')</span>
+    _<span class="token punctuation">.</span><span class="token function">runJs</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+	<span class="token keyword">return</span> id
+<span class="token punctuation">}</span>
+<span class="token keyword">function</span> <span class="token function">register</span><span class="token punctuation">(</span><span class="token parameter">componentPath<span class="token punctuation">,</span> tagName<span class="token punctuation">,</span> cache<span class="token punctuation">,</span> hasRegisterCache</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 随机生成，不重复</span>
+  <span class="token keyword">const</span> id <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> component <span class="token operator">=</span> <span class="token punctuation">{</span>
+    id<span class="token punctuation">,</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> componentPath<span class="token punctuation">,</span>
+    tagName<span class="token punctuation">,</span>
+    <span class="token literal-property property">json</span><span class="token operator">:</span> _<span class="token punctuation">.</span><span class="token function">readJson</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>componentPath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.json</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+   	<span class="token literal-property property">wxml</span><span class="token operator">:</span> compile<span class="token punctuation">.</span><span class="token function">getWxml</span><span class="token punctuation">(</span>componentPath<span class="token punctuation">,</span> cache<span class="token punctuation">.</span>options<span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">wxss</span><span class="token operator">:</span> wxss<span class="token punctuation">.</span><span class="token function">getContent</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>componentPath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.wxss</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+  <span class="token comment">// 存入需要执行的自定义组件 js</span>
+  cache<span class="token punctuation">.</span>needRunJsList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span>componentPath<span class="token punctuation">,</span> component<span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token keyword">return</span> component<span class="token punctuation">.</span>id
+<span class="token punctuation">}</span>
+global<span class="token punctuation">.</span><span class="token function-variable function">Component</span> <span class="token operator">=</span> <span class="token parameter">options</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+	<span class="token keyword">const</span> component <span class="token operator">=</span> nowLoad
+  jComponent<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span>definition<span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">function</span> <span class="token function">register</span><span class="token punctuation">(</span><span class="token parameter">definition <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> componentManager <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ComponentManager</span><span class="token punctuation">(</span>definition<span class="token punctuation">)</span>
+    <span class="token keyword">return</span> componentManager<span class="token punctuation">.</span>id
+<span class="token punctuation">}</span>
+
+<span class="token comment">// ComponentManager 方法</span>
+<span class="token keyword">class</span> <span class="token class-name">ComponentManager</span> <span class="token punctuation">{</span>
+    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">definition</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token comment">// ......</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>exparserDef <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">registerToExparser</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+        _<span class="token punctuation">.</span><span class="token function">cache</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">registerToExparser</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token operator">...</span>
+        <span class="token keyword">const</span> exparserDef <span class="token operator">=</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">is</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">,</span>
+            using<span class="token punctuation">,</span>
+            <span class="token literal-property property">generics</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// TODO</span>
+            <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                <span class="token literal-property property">func</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>generateFunc<span class="token punctuation">,</span>
+                <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">,</span>
+            <span class="token punctuation">}</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">properties</span><span class="token operator">:</span> definition<span class="token punctuation">.</span>properties<span class="token punctuation">,</span>
+            <span class="token literal-property property">data</span><span class="token operator">:</span> definition<span class="token punctuation">.</span>data<span class="token punctuation">,</span>
+            <span class="token literal-property property">methods</span><span class="token operator">:</span> definition<span class="token punctuation">.</span>methods<span class="token punctuation">,</span>
+            <span class="token operator">...</span>
+        <span class="token punctuation">}</span>
+        <span class="token comment">// miniprogram-exparser</span>
+        <span class="token keyword">return</span> exparser<span class="token punctuation">.</span><span class="token function">registerElement</span><span class="token punctuation">(</span>exparserDef<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+
+</code></pre></div><p><strong>2.miniprogramSimulate.render(id)</strong></p> <p><img src="https://cdn.nlark.com/yuque/0/2022/png/116604/1645372791716-b3faf038-ff6f-4309-9a91-270bcfda4aa7.png#clientId=u8f88ae50-6693-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=2069&amp;id=u272fdda2&amp;margin=%5Bobject%20Object%5D&amp;name=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-render.png&amp;originHeight=2069&amp;originWidth=3131&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=668246&amp;status=done&amp;style=none&amp;taskId=u0ed961d2-5859-4c1b-ac1b-79595d39e8e&amp;title=&amp;width=3131" alt="微信小程序-render.png">
+miniprogram-simulate中render方法会调用j-component create，根据id从缓存对象中获取componentManager，进行组件实例创建</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>  <span class="token comment">/**
+   * 创建组件实例
+   */</span>
+  <span class="token function">create</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> properties</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> componentManager <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">cache</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
+
+    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>componentManager<span class="token punctuation">)</span> <span class="token keyword">return</span>
+
+    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">RootComponent</span><span class="token punctuation">(</span>componentManager<span class="token punctuation">,</span> properties<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+</code></pre></div><p>RootComponent 构造函数中使用之前的 _exparserDef 对象进行真实dom节点创建，生成 _exparserNode</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">RootComponent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span><span class="token punctuation">{</span>
+	<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">componentManager<span class="token punctuation">,</span> properties</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  	<span class="token operator">...</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>_exparserNode <span class="token operator">=</span> exparser<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span>tagName <span class="token operator">||</span> id<span class="token punctuation">,</span> exparserDef<span class="token punctuation">)</span> <span class="token comment">// create exparser node and render</span>
+		<span class="token operator">...</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_bindEvent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// touchstart，touchemove blur 等事件绑定</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>新生成的 rootComponent 实例继承Component对象，定义了许多我们单测中需要用到的组件方法</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
+	<span class="token keyword">get</span> <span class="token function">dom</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">...</span>
+  <span class="token keyword">get</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">...</span><span class="token punctuation">.</span>
+  <span class="token keyword">get</span> instance <span class="token operator">...</span>
+  dispatchEvent <span class="token operator">...</span>
+  addEventListener <span class="token operator">...</span>
+  removeEventListener <span class="token operator">...</span>
+  querySelector <span class="token operator">...</span>
+  setData <span class="token operator">...</span>
+  triggerLifeTime <span class="token operator">...</span>
+  triggerPageLifeTime <span class="token operator">...</span>
+  toJSON<span class="token operator">...</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>当然中间还有很多细节实现，比如模版渲染 j-component/template/compile，组件更新 j-component/render 等，感兴趣的话可以详细去看下里边具体的实现，这里我们暂且按下不表。至此，我们拿到了 component 实例，并可以进行正常的组件状态获取以及更新，然后在Jest框架中去断言组件的各种属性以及方法执行后的预期。</p> <h2 id="mpx-框架单元测试"><a href="#mpx-框架单元测试" class="header-anchor">#</a> Mpx 框架单元测试</h2> <p>经过上方 Jest 框架讲解以及小程序单元测试流程分析后，接下来看下在Mpx框架中的单测能力支持实现</p> <h3 id="初期版本"><a href="#初期版本" class="header-anchor">#</a> 初期版本</h3> <p>Mpx框架的初期单测架构，是将Mpx框架开发的小程序项目，先构建编译为源码，再使用 miniprogram-simulate + j-component + jest 对构建后的小程序原生代码运行单元测试
+<img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1640786157277-5f92065d-c87e-46ed-b57e-4692b3d78a36.png#clientId=uc72cd25a-bebe-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=485&amp;id=uf9a7caa5&amp;margin=%5Bobject%20Object%5D&amp;name=mpx-old-unit-test-architecture.png&amp;originHeight=969&amp;originWidth=3076&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=744497&amp;status=done&amp;style=none&amp;taskId=uf25026f4-fd27-4116-bcb5-ffbe7357910&amp;title=&amp;width=1538" alt="mpx-old-unit-test-architecture.png">
+该方案执行任何case都需要执行完整的构建流程，而且预构建已经完成了所有的模块收集，无法使用jest提供的模块mock功能，导致业务使用成本很高，落地困难。</p> <h3 id="优化版本"><a href="#优化版本" class="header-anchor">#</a> 优化版本</h3> <p>经过调研，Jest 本身支持代码转换功能</p> <blockquote><p>Jest在项目中以JavaScript的代码形式运行，但是如果使用一些Node.js不支持的，却可以开箱即用的语法(如JSX，TypeScript中的类型，Vue模板等)那你就需要将代码转换为纯JavaScript，转换的工作就是transformer</p></blockquote> <p>这里我们就可以通过Jest提供的转换能力编写mpx-jest转换器，实现在Jest模块加载过程中实时地将当前的Mpx组件编译转换为原生小程序组件，再交由miniprogram-simulate加载运行测试case。</p> <p>该方案中模块加载完全基于Jest并能实现按需编译，完美规避旧方案中存在的缺陷，缺点在于编译构建流程基于Jest api重构，与Mpx自身基于Webpack的构建流程独立存在，带来额外维护成本，这一问题我们通过将通用的编译转换逻辑抽离出来统一维护，在Webpack和Jest两侧复用，从而解决了改问题。同时在实现这个方案的过程中也做了一部分对应库的改动，将会在下方介绍。</p> <p>首先来看下 jest-runtime 中 transform 的整体流程。</p> <ul><li>runTest 方法调用 runtime.requireModule(path)，传入对应的单测文件地址</li> <li>判断是否是mock module，如果是则直接走 requireMock方法，否则继续往下进行</li> <li>定义 localModule</li> <li>调用 this._loadModule</li> <li>_createRequireImplementation(module, options) 赋值给module.require</li> <li>transformFile 处理对应的文件</li> <li>createScriptFromCode(transformdCode)</li> <li>getVmContext  使用 vm 创建沙盒环境</li> <li>在沙盒环境执行对应的 jest 单测代码</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2022/png/116604/1645251815753-ba8529bb-c63f-477f-bb2a-60182bf5f390.png#clientId=u3600a0a4-27fc-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=811&amp;id=u9a266c8b&amp;margin=%5Bobject%20Object%5D&amp;name=jest-runtime1.png&amp;originHeight=3242&amp;originWidth=4075&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=1246325&amp;status=done&amp;style=none&amp;taskId=uae1603dd-c05f-443b-977e-849426edf0d&amp;title=&amp;width=1019" alt="jest-runtime1.png">
+其中关键节点的代码如下</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>			<span class="token comment">// 自定义 localModule</span>
+			<span class="token keyword">const</span> localModule <span class="token operator">=</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">exports</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">filename</span><span class="token operator">:</span> modulePath<span class="token punctuation">,</span>
+        <span class="token literal-property property">id</span><span class="token operator">:</span> modulePath<span class="token punctuation">,</span>
+        <span class="token literal-property property">loaded</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token function">path</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">dirname</span><span class="token punctuation">(</span>modulePath<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">;</span>
+      <span class="token comment">// 自定义 module.require</span>
+			Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>module<span class="token punctuation">,</span> <span class="token string">'require'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+        <span class="token comment">// rquireModuleOrMock || rquireInternalModule</span>
+      	<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_createRequireImplementation</span><span class="token punctuation">(</span>module<span class="token punctuation">,</span> options<span class="token punctuation">)</span>
+    	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+			<span class="token comment">// transformCode</span>
+			<span class="token keyword">const</span> transformedCode <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">transformFile</span><span class="token punctuation">(</span>filename<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span>
+			
+			<span class="token comment">// createScriptFromCode</span>
+			<span class="token keyword">const</span> script <span class="token operator">=</span> vm<span class="token punctuation">.</span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string">'({&quot;'</span> <span class="token operator">+</span> <span class="token constant">EVAL_RESULT_VARIABLE</span> <span class="token operator">+</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&quot;:function(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>args<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">){</span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span> transformedCode <span class="token operator">+</span> <span class="token string">'\n}});'</span><span class="token punctuation">;</span><span class="token punctuation">)</span>
+			<span class="token keyword">const</span> vmContext <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_environment<span class="token punctuation">.</span><span class="token function">getVmContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      runScript <span class="token operator">=</span> script<span class="token punctuation">.</span><span class="token function">runInContext</span><span class="token punctuation">(</span>vmContext<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+        filename
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+			compiledFunction <span class="token operator">=</span> runScript<span class="token punctuation">[</span><span class="token constant">EVAL_RESULT_VARIABLE</span><span class="token punctuation">]</span>
+      <span class="token function">compiledFunction</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>
+        module<span class="token punctuation">.</span>exports<span class="token punctuation">,</span>
+        module<span class="token punctuation">,</span> <span class="token comment">// module object</span>
+        module<span class="token punctuation">.</span>exports<span class="token punctuation">,</span> <span class="token comment">// module exports</span>
+        module<span class="token punctuation">.</span>require<span class="token punctuation">,</span> <span class="token comment">// require implementation</span>
+        module<span class="token punctuation">.</span>path<span class="token punctuation">,</span> <span class="token comment">// __dirname</span>
+        module<span class="token punctuation">.</span>filename<span class="token punctuation">,</span> <span class="token comment">// __filename</span>
+        <span class="token comment">// @ts-expect-error</span>
+        <span class="token operator">...</span>lastArgs<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>notEmpty<span class="token punctuation">)</span><span class="token punctuation">,</span>
+      <span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><p>上方是整个 jest-runtime 中对于require module 时transform的整体流程。在Jest的这一能力之上，我们基于 @mpxjs/webpack-plugin 开发了 mpx-jest transformer，实现将 Mpx 单文件组件转换输出为对应的小程序原生代码。
+<img src="https://cdn.nlark.com/yuque/0/2022/png/116604/1645264785364-2db4095b-0344-4fa8-8d56-bfeb28c0f78d.png#clientId=uec723a90-39b3-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=1588&amp;id=ubbef4532&amp;margin=%5Bobject%20Object%5D&amp;name=%E6%94%B9%E8%89%AF%E6%96%B9%E6%A1%8801.png&amp;originHeight=1588&amp;originWidth=3007&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=368757&amp;status=done&amp;style=none&amp;taskId=u8c2c10f8-f83f-4765-b312-bb75081e05c&amp;title=&amp;width=3007" alt="改良方案01.png">
+在完成代码转换后，对应的 script 代码做为String存在于内存中，无法直接使用 Jest 环境的 require 加载执行，为此我们参考上述 jest-runtime 中的 loadModule方法实现了requireFromString方法，核心还是使用node vm 模块来进行 script 代码的执行，同时将jsdom-environment 和 Jest global 对象合并做为 vmContext</p> <p><img src="https://cdn.nlark.com/yuque/0/2022/png/116604/1645269513406-df59853a-086d-4d5f-87a5-cb003d556ce9.png#clientId=uec723a90-39b3-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=802&amp;id=u2da3911b&amp;margin=%5Bobject%20Object%5D&amp;name=%E6%94%B9%E9%80%A0%E6%96%B9%E6%A1%882.png&amp;originHeight=802&amp;originWidth=1970&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=125179&amp;status=done&amp;style=none&amp;taskId=u182d9b94-f659-4d25-80d5-d9d01fdbaac&amp;title=&amp;width=1970" alt="改造方案2.png">
+至此，我们的整体单测方案就大致完成，通过 mpx-jest 转换组件，再交由 miniprogram-simulate 来渲染组件实例，从而完成对组件状态的断言，在实际测试的过程中，还遇到了以下问题进行解决。</p> <p>1.Mpx框架的文件纬度的条件编译支持
+Mpx框架的跨平台输出部分支持对文件进行平台和应用的条件编译引用</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 文件列表</span>
+example<span class="token punctuation">.</span>wx<span class="token punctuation">.</span>mpx
+example<span class="token punctuation">.</span>ali<span class="token punctuation">.</span>mpx
+
+<span class="token comment">// 代码使用</span>
+<span class="token punctuation">{</span>
+	<span class="token literal-property property">example</span><span class="token operator">:</span> <span class="token string">'../src/example'</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>这里我们需要在Jest运行时环境中提供该功能，借助Jest本身提供的 resolver 自定义能力，让我们可以对请求的文件进行自定义resolve功能，这里我们使用Mpx中现有的resolve plugin 和 enhanced-resolve来自定义resolve方法进行文件条件编译的支持。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> CachedInputFileSystem<span class="token punctuation">,</span> ResolverFactory <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'enhanced-resolve'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> AddModePlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin/lib/resolver/AddModePlugin'</span><span class="token punctuation">)</span>
+
+module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> addModePlugin <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AddModePlugin</span><span class="token punctuation">(</span><span class="token string">'before-file'</span><span class="token punctuation">,</span> <span class="token string">'wx'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token function-variable function">include</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token boolean">true</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'file'</span><span class="token punctuation">)</span>
+  <span class="token comment">// create a resolver</span>
+  <span class="token keyword">const</span> myResolver <span class="token operator">=</span> ResolverFactory<span class="token punctuation">.</span><span class="token function">createResolver</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token operator">...</span>
+    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>addModePlugin<span class="token punctuation">]</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token keyword">let</span> result <span class="token operator">=</span> myResolver<span class="token punctuation">.</span><span class="token function">resolveSync</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> options<span class="token punctuation">.</span>basedir<span class="token punctuation">,</span> request<span class="token punctuation">)</span>
+	<span class="token keyword">return</span> result<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'?'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>2.miniprogram-simulate 定制化方法
+在小程序单元测试的章节中，我们介绍了小程序相关库的运行机制，miniprogram-simulate提供的 load 方法默认只解析渲染原生组件，我们的Mpx组件，mpx-jest 转换器无法和miniprogram-simulate进行关联，所以这里我们选择fork miniprogram-simulate 仓库，自定义了loadMpx和registerMpx方法。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 使用</span>
+<span class="token keyword">import</span> simulate <span class="token keyword">from</span> <span class="token string">'@mpxjs/miniprogram-simulate'</span>
+<span class="token keyword">const</span> id <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">loadMpx</span><span class="token punctuation">(</span><span class="token string">'src/components/list.mpx'</span><span class="token punctuation">)</span>
+
+<span class="token comment">//@mpxjs/miniprogram-simulate 中 loadMpx 实现简单描述</span>
+<span class="token keyword">function</span> <span class="token function">loadMpx</span><span class="token punctuation">(</span><span class="token parameter">path<span class="token punctuation">,</span> tagName<span class="token punctuation">,</span> options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+	<span class="token comment">// ...省略一部分校验逻辑</span>
+  <span class="token comment">// .mpx 结尾文件会经过 mpx-jest 进行转换，输出 wxml,wxss,json,script</span>
+  <span class="token keyword">const</span> componentContent <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span>componentPath<span class="token punctuation">)</span>
+  id <span class="token operator">=</span> <span class="token function">registerMpx</span><span class="token punctuation">(</span>componentPath<span class="token punctuation">,</span> tagName<span class="token punctuation">,</span> cache<span class="token punctuation">,</span> hasRegisterCache<span class="token punctuation">,</span> componentContent<span class="token punctuation">)</span>
+  <span class="token comment">//....</span>
+  <span class="token keyword">return</span> id
+<span class="token punctuation">}</span>
+<span class="token keyword">function</span> <span class="token function">registerMpx</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+  <span class="token comment">// 部分 require('xx/xx.json') 等修改为直接赋值</span>
+<span class="token punctuation">}</span>
+
+</code></pre></div><p>对于组件/页面在存在大量组件引用的情况下，mock引用组件可大大提升单测的运行速度，原有miniprogram-simulate框架并没有提供mock功能，所以这里我们也自定义了mockComponent和clearMockComponent方法。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 代码在 @mpxjs/miniprogram-simulate 中</span>
+<span class="token keyword">let</span> mockComponentMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+
+<span class="token keyword">function</span> <span class="token function">registerMpx</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+	<span class="token comment">// 判断是否是mock的组件</span>
+  <span class="token keyword">if</span> <span class="token punctuation">(</span>mockComponentMap<span class="token punctuation">[</span>tagName<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    componentPath <span class="token operator">=</span> mockComponentMap<span class="token punctuation">[</span>tagName<span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+<span class="token comment">/**
+ * mock usingComponents中的组件
+ * @param compName
+ * @param compDefinition
+ */</span>
+<span class="token keyword">function</span> <span class="token function">mockComponent</span><span class="token punctuation">(</span><span class="token parameter">compName<span class="token punctuation">,</span> compDefinition</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  mockComponentMap<span class="token punctuation">[</span>compName<span class="token punctuation">]</span> <span class="token operator">=</span> compDefinition
+<span class="token punctuation">}</span>
+<span class="token comment">/**
+ * 清除 component mock 数据
+ */</span>
+<span class="token keyword">function</span> <span class="token function">clearMockComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  mockComponentMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// 单测中使用时</span>
+simulate<span class="token punctuation">.</span><span class="token function">mockComponent</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'&lt;view&gt;component list&lt;/view&gt;'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>3.封装定制test-utils工具集
+书写单测的过程中我们会有很多重复工作，比如创建挂载组件、代理接口、模拟多个组件、断言多个数据等，这里我们将这些共性的方法抽离封装成了 test-utils</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">/**
+ * 创建渲染并挂载自定义组件
+ * @param {组件基于所在项目的相对路径,例如'src/subpackage/gulfstream/components/bottom/bottom.mpx'} compPath
+ * @returns 用于测试的自定义组件
+ */</span>
+<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">createCompAndAttach</span> <span class="token punctuation">(</span><span class="token parameter">compPath<span class="token punctuation">,</span> renderProps <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> id <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">loadMpx</span><span class="token punctuation">(</span>compPath<span class="token punctuation">)</span>
+  <span class="token keyword">let</span> comp <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> renderProps<span class="token punctuation">)</span>
+  <span class="token keyword">const</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span>
+  comp<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span>
+  <span class="token keyword">return</span> comp
+<span class="token punctuation">}</span>
+
+<span class="token comment">/**
+ * 借助xfetch构造mock请求
+ * @param {待模拟url} mockUrl
+ * @param {mock数据文件路径} mockFilePath
+ */</span>
+<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">proxyFetch</span> <span class="token punctuation">(</span><span class="token parameter">mockUrl<span class="token punctuation">,</span> mockUrlData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">let</span> mockData
+  mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span>fetch <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span> <span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span>options<span class="token punctuation">.</span>url<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>mockUrl<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> mockUrlData <span class="token operator">===</span> <span class="token string">'string'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          mockData <span class="token operator">=</span> <span class="token function">getMockContent</span><span class="token punctuation">(</span>mockUrlData<span class="token punctuation">)</span>
+        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+          mockData <span class="token operator">=</span> mockUrlData
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+      <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">errno</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">data</span><span class="token operator">:</span> mockData
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+<span class="token operator">...</span><span class="token operator">...</span>
+</code></pre></div><p>至此，Mpx框架的单元测试方案整体上就完备了，整体上的方案架构如下图所示
+<img src="https://cdn.nlark.com/yuque/0/2022/png/116604/1645448762294-8e4cb0ab-bc09-4688-9360-ab4d67776af1.png#clientId=uc67aedb9-b0af-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=1164&amp;id=u19264b9b&amp;margin=%5Bobject%20Object%5D&amp;name=Mpx%E5%8D%95%E6%B5%8B%E6%9E%B6%E6%9E%84%E5%9B%BE.png&amp;originHeight=2327&amp;originWidth=3335&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=7199152&amp;status=done&amp;style=none&amp;taskId=uc2ecd51a-8419-46f1-a52a-1c9a8868ce1&amp;title=&amp;width=1667.5" alt="Mpx单测架构图.png"></p> <h2 id="mpx组件单元测试实战"><a href="#mpx组件单元测试实战" class="header-anchor">#</a> Mpx组件单元测试实战</h2> <p>在上方介绍过整体的jest框架流程以及Mpx框架单元测试架构后，接下来我们着手进行 Mpx 框架开发的小程序组件的单元测试用例书写实战</p> <p>使用 @mpxjs/cli 创建模版项目时选择使用单元测试，<strong>会自动生成有单测能力的模版项目</strong>，和普通 Jest + miniprogram-simulate 搭建的原生小程序单测项目不同的是，transform 中添加了 Mpx 文件的处理，这里jest.config.js其他配置就不过多列出，可通过新创建项目进行查看。</p> <div class="language-json extra-class"><pre class="language-json"><code>	transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+    '^.+\\.js$'<span class="token operator">:</span> '&lt;rootDir&gt;/node_modules/babel-jest'<span class="token punctuation">,</span>
+    '^.+\\.mpx$'<span class="token operator">:</span> '&lt;rootDir&gt;/node_modules/@mpxjs/mpx-jest'
+  <span class="token punctuation">}</span>
+</code></pre></div><p>首先我们列出一个组件示例，具体项目可点击链接查看:
+<a href="https://github.com/Blackgan3/mpx-unit-test-demo" target="_blank" rel="noopener noreferrer">https://github.com/Blackgan3/mpx-unit-test-demo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>首先对于组件单测的书写，我们希望有一套固定的规范，即所写的不同组件的单测能有一个相同的格式和顺序，这里我们建议的顺序为</p> <ul><li>组件初始化断言</li> <li>组件初始化各种形态断言</li> <li>组件变化- data|computed|watch变化断言</li> <li>组件变化- 事件触发断言</li> <li>组件销毁断言</li></ul> <p>根据上方组件功能，首先我们建议对组件usingComponents 引入的组件进行模拟注册，这样可以节省组件渲染挂载的时间</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>	<span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 进行usingComponents 组件 mock</span>
+    testUtils<span class="token punctuation">.</span><span class="token function">mockComponents</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+      <span class="token string">'list'</span>
+    <span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>1.我们首先需要对组件初始化成功后进行各种组件形态预期，即组件初始化断言</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>	<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'test component init correctly'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> comp <span class="token operator">=</span> testUtils<span class="token punctuation">.</span><span class="token function">createCompAndAttach</span><span class="token punctuation">(</span>compPath<span class="token punctuation">)</span>
+    <span class="token keyword">const</span> insData <span class="token operator">=</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data
+    testUtils<span class="token punctuation">.</span><span class="token function">checkExpectedData</span><span class="token punctuation">(</span>insData<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">someClassShowOne</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">someClassShowTwo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">someClassShowTwoFlag</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">listData2</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;手机&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;电视&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;电脑&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">compStatus</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">timeDeferFlag</span><span class="token operator">:</span> <span class="token boolean">false</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> domHTML <span class="token operator">=</span> comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML
+    <span class="token comment">// 进行组件初始化dom快照测试</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>domHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>上方我们使用工具方法创建并挂载生成组件实例，然后对组件data中key值和value进行预期断言，最后对组件初始化生成的HTML进行快照测试</p> <p>2.组件初始化各种形态断言
+当组件的初始化数据源有多种形态，比如你的组件初始化数据是由接口或者其他重要的props传递过来决定的，那这里我们可以对不同的数据源组件的不同表现进行断言</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>	<span class="token function">it</span> <span class="token punctuation">(</span><span class="token string">'test comp different data'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 进行唯一数据源请求的接口代理</span>
+    <span class="token function">proxyFetch</span><span class="token punctuation">(</span><span class="token string">'api/somePackage/getCompData'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">1</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> comp <span class="token operator">=</span> testUtils<span class="token punctuation">.</span><span class="token function">createCompAndAttach</span><span class="token punctuation">(</span>compPath<span class="token punctuation">)</span>
+    <span class="token comment">// 目前 status 为 1，再次改变数据源代理</span>
+    <span class="token function">proxyFetch</span><span class="token punctuation">(</span><span class="token string">'api/somePackage/getCompData'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">2</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token keyword">await</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span><span class="token function">fetchCompData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token keyword">await</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data<span class="token punctuation">.</span>compStatus<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data<span class="token punctuation">.</span>compData<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+		<span class="token comment">// 再次改变数据源代理，修改源数据</span>
+    <span class="token function">proxyFetch</span><span class="token punctuation">(</span><span class="token string">'api/somePackage/getCompData'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">3</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token keyword">await</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span><span class="token function">fetchCompData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token keyword">await</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data<span class="token punctuation">.</span>compStatus<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data<span class="token punctuation">.</span>compData<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>3.组件变化- props|data|computed|watch变化断言
+接下来我们需要对组件自身的 props|data|computed|watch 等属性变化时所触发的组件相应变化做出各种预期。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>	<span class="token comment">// 组件 props 改变后组件的各种形态预期</span>
+	<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'test props different values correspond to different performance'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 传入初始渲染 props</span>
+    <span class="token keyword">const</span> successContent <span class="token operator">=</span> <span class="token string">'some successContent'</span>
+    <span class="token keyword">const</span> comp <span class="token operator">=</span> testUtils<span class="token punctuation">.</span><span class="token function">createCompAndAttach</span><span class="token punctuation">(</span>compPath<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      successContent
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> childComp <span class="token operator">=</span> comp<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.successContent'</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>childComp<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeDefined</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data<span class="token punctuation">.</span>successContent<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span>successContent<span class="token punctuation">)</span>
+    <span class="token comment">// 对最终的HTML进行快照测试</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>childComp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+	<span class="token comment">// 当组件data中的someClassShowOne改变之后需要做的哪些预期</span>
+	<span class="token comment">// 当组件computed中的someCompShow改变之后需要做的预期</span>
+	<span class="token comment">// ......</span>
+	
+</code></pre></div><p>4.组件必不可少的会有方法，这里我们对示例组件的方法调用进行预期</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>	<span class="token function">it</span> <span class="token punctuation">(</span><span class="token string">'test someClassShowTwoFlag tap event trigger'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> comp <span class="token operator">=</span> testUtils<span class="token punctuation">.</span><span class="token function">createComp</span><span class="token punctuation">(</span>compPath<span class="token punctuation">)</span>
+    <span class="token keyword">const</span> fetchCompDataSpy <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">spyOn</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">,</span> <span class="token string">'fetchCompData'</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> changeSomeClassShowTwoFlagSpy <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">spyOn</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">,</span> <span class="token string">'changeSomeClassShowTwoFlag'</span><span class="token punctuation">)</span>
+    <span class="token function">proxyFetch</span><span class="token punctuation">(</span><span class="token string">'api/somePackage/getCompData'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">1</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    comp<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span>
+    <span class="token keyword">const</span> compData <span class="token operator">=</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data
+    <span class="token keyword">const</span> changeFlagViewComp <span class="token operator">=</span> comp<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.changeFlagClass'</span><span class="token punctuation">)</span>
+
+    <span class="token comment">// dispatchEvent 为异步</span>
+    changeFlagViewComp<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span><span class="token string">'tap'</span><span class="token punctuation">)</span>
+    <span class="token keyword">await</span> testUtils<span class="token punctuation">.</span><span class="token function">sleep</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+
+    <span class="token function">expect</span><span class="token punctuation">(</span>changeSomeClassShowTwoFlagSpy<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeCalledWith</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>fetchCompDataSpy<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHaveBeenCalledTimes</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>compData<span class="token punctuation">.</span>someClassShowTwo<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>someClassShowTwoFlag<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 此处注意 非template中使用过到的data，获取更新后的值，从instance中获取</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>	
+
+	<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'test someTimeDeferAction tap event trigger'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    jest<span class="token punctuation">.</span><span class="token function">useFakeTimers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    jest<span class="token punctuation">.</span><span class="token function">spyOn</span><span class="token punctuation">(</span>global<span class="token punctuation">,</span> <span class="token string">'setTimeout'</span><span class="token punctuation">)</span>
+
+    <span class="token keyword">const</span> comp <span class="token operator">=</span> testUtils<span class="token punctuation">.</span><span class="token function">createCompAndAttach</span><span class="token punctuation">(</span>compPath<span class="token punctuation">)</span>
+    <span class="token keyword">const</span> compData <span class="token operator">=</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data
+    <span class="token keyword">const</span> someTimeDeferActionSpy <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">spyOn</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">,</span> <span class="token string">'someTimeDeferAction'</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> childComp <span class="token operator">=</span> comp<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.someTimeDeferActionClass'</span><span class="token punctuation">)</span>
+    childComp<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span><span class="token string">'tap'</span><span class="token punctuation">)</span>
+
+    <span class="token comment">// comp.instance.someTimeDeferAction()</span>
+    <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+
+    jest<span class="token punctuation">.</span><span class="token function">runAllTimers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token keyword">await</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+
+    <span class="token function">expect</span><span class="token punctuation">(</span>compData<span class="token punctuation">.</span>timeDeferFlag<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>someTimeDeferActionSpy<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHaveBeenCalledTimes</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    jest<span class="token punctuation">.</span><span class="token function">useRealTimers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>以上，我们对当前的示例组件完成了整体内容的单元测试书写，完整版单测文件可点击链接查看
+<a href="https://github.com/Blackgan3/mpx-unit-test-demo/blob/master/test/components/example.spec.js" target="_blank" rel="noopener noreferrer">https://github.com/Blackgan3/mpx-unit-test-demo/blob/master/test/components/example.spec.js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="结语"><a href="#结语" class="header-anchor">#</a> 结语</h2> <p>通篇文章我们依次进行了前端常用单测框架简介，jest框架原理总结，小程序单元测试内部执行流程，最后介绍Mpx框架中单测能力的支持实现以及Mpx组件单测实战。</p> <p>学习到了jest不仅仅是一个单元测试框架，你甚至可以使用它的各个工具库自己创建一个单元测试框架；以及感受到小程序场景下单元测试的差异化；Mpx框架层面也做了诸多改造来支撑单测功能的落地。</p> <p>后续我们还会继续跟进推动业务中落地TDD规范，复杂逻辑组件中各种功能场景单测用例规范的补充等问题，持续在小程序单测方向深耕并有更好的规范总结产出。</p> <p>参考文章：</p> <ul><li><a href="https://jestjs.io/" target="_blank" rel="noopener noreferrer">https://jestjs.io<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://jestjs.io/docs/architecture" target="_blank" rel="noopener noreferrer">https://jestjs.io/docs/architecture<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://medium.com/code-for-cause/jest-architecture-9870bbfcda44" target="_blank" rel="noopener noreferrer">https://medium.com/code-for-cause/jest-architecture-9870bbfcda44<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/articles/mpx-cli-next.html" class="prev">
+        Mpx-cli 插件化改造
+      </a></span> <!----></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/62.4bf212f9.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/assets/css/0.styles.f22478ca.css b/docs-vuepress/.vuepress/dist/assets/css/0.styles.f22478ca.css
new file mode 100644
index 0000000000..e0aefebd3c
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/css/0.styles.f22478ca.css
@@ -0,0 +1,3 @@
+.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;height:2rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#3eaf7c}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:2rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#3eaf7c}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}
+
+/*! @docsearch/css 3.8.2 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,0.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,0.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,0.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,0.3);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 1px 1px 0 rgba(3,4,9,0.30196078431372547);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,0.5),0 -4px 8px 0 rgba(0,0,0,0.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 2px;position:relative;top:-1px;width:20px}.DocSearch-Button-Key--pressed{box-shadow:var(--docsearch-key-pressed-shadow);transform:translate3d(0,1px,0)}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::-moz-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:2px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;width:20px}.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.logo[data-v-3ad594c3]{background-image:url(https://dpubstatic.udache.com/static/dpubimg/imdk1FF2QF/logo_color.png);background-size:135px 35px;background-repeat:no-repeat;font-size:0;width:135px;height:35px;margin-right:50px}.nav[data-v-3ad594c3]{margin-left:50px}.header-menu[data-v-3ad594c3],.row[data-v-3ad594c3]{display:flex;align-items:center}.header-menu[data-v-3ad594c3]{width:100%;justify-content:space-between;z-index:101;position:fixed;left:0;top:0;line-height:60px;padding:0 16px;box-sizing:border-box;background:#f6f6f6}.header-menu-icon[data-v-3ad594c3]{display:inline-block;padding-left:12px}.head-container[data-v-3ad594c3]{width:100%;height:3.5rem;display:flex;align-items:center;line-height:2.2rem;z-index:100;position:fixed;left:0;top:0;-webkit-backdrop-filter:saturate(180%) blur(1rem);backdrop-filter:saturate(180%) blur(1rem);background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 8px #f0f1f2;padding:.5rem 3rem}.nav-link[data-v-3ad594c3]{color:#3a495d;display:flex;align-items:center;width:100%;justify-content:space-between}a.router-link-active[data-v-3ad594c3]{color:#3eaf7c;border-bottom:2px solid #46bd87;margin-bottom:-2px}.banner[data-v-3ad594c3]{position:absolute;right:0;top:0}.searchBox-wrapper[data-v-3ad594c3]{position:absolute;right:150px;z-index:2}.header__line[data-v-3ad594c3]{height:33px;opacity:.1;border:1px solid #3a495d}.header-container[data-v-3ad594c3]{position:absolute;width:100%}.header-nav[data-v-3ad594c3]{position:relative;z-index:5}.head-mask[data-v-3ad594c3]{width:100vw;height:100vh;position:fixed;left:0;top:0;z-index:9}@media (max-width:719px){.head-container[data-v-3ad594c3]{width:100vw;max-height:100vh;background:#fff;align-items:start;padding:16px 0;height:auto;top:60px;transform:translateY(-100%);transition:transform .3s}.row[data-v-3ad594c3]{flex-direction:column;align-items:start;width:100%}.nav[data-v-3ad594c3]{width:100%;height:60px;line-height:60px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;margin:0}}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#3eaf7c}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:16px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#3eaf7c}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;-webkit-user-select:none;user-select:none;opacity:0}a.header-anchor:focus,a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}.navbar .site-name{display:none!important}a{word-break:break-all}:root{--vt-c-white:#fff;--vt-c-white-soft:#f9f9f9;--vt-c-white-mute:#f1f1f1;--vt-c-black:#1a1a1a;--vt-c-black-pure:#000;--vt-c-black-soft:#242424;--vt-c-black-mute:#2f2f2f;--vt-c-indigo:#213547;--vt-c-indigo-soft:#476582;--vt-c-indigo-light:#aac8e4;--vt-c-gray:#8e8e8e;--vt-c-gray-light-1:#aeaeae;--vt-c-gray-light-2:#c7c7c7;--vt-c-gray-light-3:#d1d1d1;--vt-c-gray-light-4:#e5e5e5;--vt-c-gray-light-5:#f2f2f2;--vt-c-gray-dark-1:#636363;--vt-c-gray-dark-2:#484848;--vt-c-gray-dark-3:#3a3a3a;--vt-c-gray-dark-4:#282828;--vt-c-gray-dark-5:#202020;--vt-c-divider-light-1:rgba(60,60,60,0.29);--vt-c-divider-light-2:rgba(60,60,60,0.12);--vt-c-divider-dark-1:rgba(84,84,84,0.65);--vt-c-divider-dark-2:rgba(84,84,84,0.48);--vt-c-text-light-1:var(--vt-c-indigo);--vt-c-text-light-2:rgba(60,60,60,0.7);--vt-c-text-light-3:rgba(60,60,60,0.33);--vt-c-text-light-4:rgba(60,60,60,0.18);--vt-c-text-light-code:var(--vt-c-indigo-soft);--vt-c-text-dark-1:hsla(0,0%,100%,0.87);--vt-c-text-dark-2:hsla(0,0%,92.2%,0.6);--vt-c-text-dark-3:hsla(0,0%,92.2%,0.38);--vt-c-text-dark-4:hsla(0,0%,92.2%,0.18);--vt-c-text-dark-code:var(--vt-c-indigo-light);--vt-c-green:#42b883;--vt-c-green-light:#42d392;--vt-c-green-lighter:#35eb9a;--vt-c-green-dark:#33a06f;--vt-c-green-darker:#155f3e;--vt-c-blue:#3b8eed;--vt-c-blue-light:#549ced;--vt-c-blue-lighter:#50a2ff;--vt-c-blue-dark:#3468a3;--vt-c-blue-darker:#255489;--vt-c-yellow:#ffc517;--vt-c-yellow-light:#ffe417;--vt-c-yellow-lighter:#ffff17;--vt-c-yellow-dark:#e0ad15;--vt-c-yellow-darker:#bc9112;--vt-c-red:#ed3c50;--vt-c-red-light:#f43771;--vt-c-red-lighter:#fd1d7c;--vt-c-red-dark:#cd2d3f;--vt-c-red-darker:#ab2131;--vt-c-purple:#de41e0;--vt-c-purple-light:#e936eb;--vt-c-purple-lighter:#f616f8;--vt-c-purple-dark:#823c83;--vt-c-purple-darker:#602960;--c-brand:#3eaf7c;--c-bg:#fff;--c-bg-light:#f3f4f5;--c-bg-lighter:#eee;--c-text:#2c3e50;--c-text-light:#3a5169;--c-text-quote:#999;--c-border-dark:#dfe2e5;--vt-c-bg:var(--vt-c-white);--vt-c-bg-soft:var(--vt-c-white-soft);--vt-c-bg-mute:var(--vt-c-white-mute);--vt-c-divider:var(--vt-c-divider-light-1);--vt-c-divider-light:var(--vt-c-divider-light-2);--vt-c-divider-inverse:var(--vt-c-divider-dark-1);--vt-c-divider-inverse-light:var(--vt-c-divider-dark-2);--vt-c-text-1:var(--vt-c-text-light-1);--vt-c-text-2:var(--vt-c-text-light-2);--vt-c-text-3:var(--vt-c-text-light-3);--vt-c-text-4:var(--vt-c-text-light-4);--vt-c-text-code:var(--vt-c-text-light-code);--vt-c-text-inverse-1:var(--vt-c-text-dark-1);--vt-c-text-inverse-2:var(--vt-c-text-dark-2);--vt-c-text-inverse-3:var(--vt-c-text-dark-3);--vt-c-text-inverse-4:var(--vt-c-text-dark-4);--vt-c-brand:var(--vt-c-green);--vt-c-brand-light:var(--vt-c-green-light);--vt-c-brand-dark:var(--vt-c-green-dark);--vt-c-brand-highlight:var(--vt-c-brand-dark)}:root .DocSearch{--docsearch-primary-color:var(--c-brand);--docsearch-text-color:var(--c-text);--docsearch-highlight-color:var(--c-brand);--docsearch-muted-color:var(--c-text-quote);--docsearch-container-background:rgba(9,10,17,0.8);--docsearch-modal-background:var(--c-bg-light);--docsearch-searchbox-background:var(--c-bg-lighter);--docsearch-searchbox-focus-background:var(--c-bg);--docsearch-searchbox-shadow:inset 0 0 0 2px var(--c-brand);--docsearch-hit-color:var(--c-text-light);--docsearch-hit-active-color:var(--c-bg);--docsearch-hit-background:var(--c-bg);--docsearch-hit-shadow:0 1px 3px 0 var(--c-border-dark);--docsearch-footer-background:var(--c-bg)}@media (max-width:719px){:root{--c-bg-lighter:none}}#nprogress{pointer-events:none}#nprogress .bar{background:#3eaf7c;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #3eaf7c,0 0 5px #3eaf7c;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#3eaf7c transparent transparent #3eaf7c;border-style:solid;border-width:2px;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.go-to-top[data-v-5cf0f4c0]{cursor:pointer;position:fixed;bottom:2rem;right:2.5rem;width:2rem;color:#3eaf7c;z-index:1}.go-to-top[data-v-5cf0f4c0]:hover{color:#72cda4}@media (max-width:959px){.go-to-top[data-v-5cf0f4c0]{display:none}}.fade-enter-active[data-v-5cf0f4c0],.fade-leave-active[data-v-5cf0f4c0]{transition:opacity .3s}.fade-enter[data-v-5cf0f4c0],.fade-leave-to[data-v-5cf0f4c0]{opacity:0}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}[data-v-ae3bb0ce]::-webkit-scrollbar{display:none}.swiper-container[data-v-ae3bb0ce]{position:relative;width:100%;height:152px;overflow:hidden}.swiper[data-v-ae3bb0ce]{height:100%;white-space:nowrap;transform:translateX(0);display:inline-block}.swiper-list[data-v-ae3bb0ce]{width:100%;display:inline-block}.swiper-dot[data-v-ae3bb0ce]{position:absolute;left:50%;bottom:12px;display:flex;padding:0;z-index:3;transform:translate3d(-50%,0,0)}.swiper-icon[data-v-ae3bb0ce]{list-style:none;width:6px;height:6px;border-radius:50%;background:#efefef;margin:0 3px}.active[data-v-ae3bb0ce]{background:#00bd81}.active[data-v-a2c0041c]{border:2px solid #00bd81!important}.m-banner[data-v-a2c0041c]{display:flex;flex-direction:column;align-items:center;height:468px;background-image:linear-gradient(0deg,#50be97 4%,#31bc7f 83%)}.m-banner .m-title[data-v-a2c0041c]{font-family:PingFangSC-Medium;font-size:26px;color:#fff;letter-spacing:0;text-align:justify;font-weight:500;margin-top:120px}.m-banner .m-subtitle[data-v-a2c0041c]{font-family:PingFangSC-Regular;font-size:13px;color:#fff;letter-spacing:0;text-align:center;line-height:22px;font-weight:400;margin:10px 30px 0}.m-banner .m-banner-btn-wrapper[data-v-a2c0041c]{display:flex;flex-direction:row;justify-content:center;align-content:center;padding-top:30px}.m-banner .m-banner-btn-wrapper .m-banner-btn[data-v-a2c0041c]{width:104px;height:36px;border-radius:4px;text-align:center;line-height:36px}.m-banner .m-banner-btn-wrapper .m-banner-btn-enter[data-v-a2c0041c]{background:#fff;border:0 solid #efefef;margin-right:15px}.m-banner .m-banner-btn-wrapper .m-banner-btn-jump[data-v-a2c0041c]{border:1px solid #fff;margin-left:15px;color:#fff;box-sizing:border-box}.m-banner .m-banner-btn-wrapper .white-link[data-v-a2c0041c]{color:#fff}.m-banner .m-banner-bg[data-v-a2c0041c]{width:375px;height:202px;background-image:url(https://dpubstatic.udache.com/static/dpubimg/A0HNx-AsoO/y_pic_banner.png);background-size:cover;margin-top:35px}.m-advantages[data-v-a2c0041c]{display:flex;justify-content:space-between;align-items:center;padding:20px 16px;background:#fff}.m-advantages .m-advan-section[data-v-a2c0041c]{width:100px;height:78px;background:#fff;box-shadow:0 11px 32px 0 rgba(49,188,127,.06),0 3px 10px 0 rgba(49,188,127,.04);border-radius:4px;text-align:center;list-style:none}.m-advantages .m-advan-section .m-advan-section-img[data-v-a2c0041c]{margin-top:10px}.m-advantages .m-advan-section .m-advan-section-title[data-v-a2c0041c]{margin-top:4px;font-family:PingFangSC-Regular;font-size:15px;color:#3a495d;letter-spacing:0;text-align:center;line-height:22px;font-weight:400}.m-example-swiper[data-v-a2c0041c]{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border-radius:4px}.m-example-name[data-v-a2c0041c]{width:166px;height:60px;margin:6px;border:2px solid #ededed;box-shadow:0 11px 32px 0 rgba(49,188,127,.06),0 4px 10px 0 rgba(49,188,127,.04);border-radius:4px;display:flex;align-items:center;justify-content:center;background:#fff}.m-example-wrapper[data-v-a2c0041c],.m-feature-wrapper[data-v-a2c0041c],.m-util-wrapper[data-v-a2c0041c],.mdemo-wrapper[data-v-a2c0041c]{display:flex;flex-direction:column;align-items:center;background:#f7f7f7}.m-example-wrapper .m-example-title[data-v-a2c0041c],.m-example-wrapper .m-feature-title[data-v-a2c0041c],.m-example-wrapper .m-util-title[data-v-a2c0041c],.m-example-wrapper .mdemo-title[data-v-a2c0041c],.m-feature-wrapper .m-example-title[data-v-a2c0041c],.m-feature-wrapper .m-feature-title[data-v-a2c0041c],.m-feature-wrapper .m-util-title[data-v-a2c0041c],.m-feature-wrapper .mdemo-title[data-v-a2c0041c],.m-util-wrapper .m-example-title[data-v-a2c0041c],.m-util-wrapper .m-feature-title[data-v-a2c0041c],.m-util-wrapper .m-util-title[data-v-a2c0041c],.m-util-wrapper .mdemo-title[data-v-a2c0041c],.mdemo-wrapper .m-example-title[data-v-a2c0041c],.mdemo-wrapper .m-feature-title[data-v-a2c0041c],.mdemo-wrapper .m-util-title[data-v-a2c0041c],.mdemo-wrapper .mdemo-title[data-v-a2c0041c]{font-family:PingFangSC-Medium;font-size:24px;color:#3a495d;letter-spacing:0;text-align:justify;font-weight:500;margin-top:50px;margin-bottom:20px}.m-example-wrapper .m-feature-subtitle[data-v-a2c0041c],.m-example-wrapper .mdemo-subtitle[data-v-a2c0041c],.m-feature-wrapper .m-feature-subtitle[data-v-a2c0041c],.m-feature-wrapper .mdemo-subtitle[data-v-a2c0041c],.m-util-wrapper .m-feature-subtitle[data-v-a2c0041c],.m-util-wrapper .mdemo-subtitle[data-v-a2c0041c],.mdemo-wrapper .m-feature-subtitle[data-v-a2c0041c],.mdemo-wrapper .mdemo-subtitle[data-v-a2c0041c]{font-family:PingFangSC-Regular;font-size:13px;color:#394e5e;letter-spacing:0;text-align:center;line-height:22px;font-weight:400;padding:0 30px}.m-example-wrapper .m-feature-btn[data-v-a2c0041c],.m-example-wrapper .mdemo-btn[data-v-a2c0041c],.m-feature-wrapper .m-feature-btn[data-v-a2c0041c],.m-feature-wrapper .mdemo-btn[data-v-a2c0041c],.m-util-wrapper .m-feature-btn[data-v-a2c0041c],.m-util-wrapper .mdemo-btn[data-v-a2c0041c],.mdemo-wrapper .m-feature-btn[data-v-a2c0041c],.mdemo-wrapper .mdemo-btn[data-v-a2c0041c]{width:104px;height:36px;background:#00bd81;border:0 solid #efefef;border-radius:4px;margin-top:30px;font-family:PingFangSC-Medium;font-size:15px;color:#fff;letter-spacing:0;text-align:center;line-height:36px;font-weight:500}.m-example-wrapper .mdemo-icon-wrapper[data-v-a2c0041c],.m-feature-wrapper .mdemo-icon-wrapper[data-v-a2c0041c],.m-util-wrapper .mdemo-icon-wrapper[data-v-a2c0041c],.mdemo-wrapper .mdemo-icon-wrapper[data-v-a2c0041c]{margin:10px 0 40px;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;align-content:space-around}.m-example-wrapper .mdemo-icon-wrapper .mdemo-icon-card[data-v-a2c0041c],.m-feature-wrapper .mdemo-icon-wrapper .mdemo-icon-card[data-v-a2c0041c],.m-util-wrapper .mdemo-icon-wrapper .mdemo-icon-card[data-v-a2c0041c],.mdemo-wrapper .mdemo-icon-wrapper .mdemo-icon-card[data-v-a2c0041c]{width:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:30px}.m-example-wrapper .m-feature-pic[data-v-a2c0041c],.m-feature-wrapper .m-feature-pic[data-v-a2c0041c],.m-util-wrapper .m-feature-pic[data-v-a2c0041c],.mdemo-wrapper .m-feature-pic[data-v-a2c0041c]{margin-top:40px}.m-example-wrapper .six-section__row[data-v-a2c0041c],.m-feature-wrapper .six-section__row[data-v-a2c0041c],.m-util-wrapper .six-section__row[data-v-a2c0041c],.mdemo-wrapper .six-section__row[data-v-a2c0041c]{margin:0 0 10px;flex-wrap:wrap;justify-content:center;padding:0 16px;width:100%;box-sizing:border-box}.m-example-wrapper .six-section__row .six-section__item[data-v-a2c0041c],.m-feature-wrapper .six-section__row .six-section__item[data-v-a2c0041c],.m-util-wrapper .six-section__row .six-section__item[data-v-a2c0041c],.mdemo-wrapper .six-section__row .six-section__item[data-v-a2c0041c]{align-items:center;background:#fff;border:0 solid #efefef;border-radius:4px;height:72px;display:flex;padding:11px 0 11px 24px;box-sizing:border-box;box-shadow:0 11px 32px 0 rgba(49,188,127,.06),0 4px 10px 0 rgba(49,188,127,.04)}.m-example-wrapper .six-section__row .six-section__icon[data-v-a2c0041c],.m-feature-wrapper .six-section__row .six-section__icon[data-v-a2c0041c],.m-util-wrapper .six-section__row .six-section__icon[data-v-a2c0041c],.mdemo-wrapper .six-section__row .six-section__icon[data-v-a2c0041c]{margin-right:9px}.m-example-wrapper .six-section__row .six-section__list[data-v-a2c0041c],.m-feature-wrapper .six-section__row .six-section__list[data-v-a2c0041c],.m-util-wrapper .six-section__row .six-section__list[data-v-a2c0041c],.mdemo-wrapper .six-section__row .six-section__list[data-v-a2c0041c]{display:flex;flex-direction:column;justify-content:space-between;color:#3a495d;margin-left:10px;font-family:PingFangSC-Medium}.m-example-wrapper .six-section__row .six-section__bold[data-v-a2c0041c],.m-feature-wrapper .six-section__row .six-section__bold[data-v-a2c0041c],.m-util-wrapper .six-section__row .six-section__bold[data-v-a2c0041c],.mdemo-wrapper .six-section__row .six-section__bold[data-v-a2c0041c]{font-size:15px;margin-right:9px;margin-bottom:4px}.m-example-wrapper .six-section__row .six-section__subtitle[data-v-a2c0041c],.m-feature-wrapper .six-section__row .six-section__subtitle[data-v-a2c0041c],.m-util-wrapper .six-section__row .six-section__subtitle[data-v-a2c0041c],.mdemo-wrapper .six-section__row .six-section__subtitle[data-v-a2c0041c]{font-size:13px}.m-example-wrapper .m-example-phone[data-v-a2c0041c],.m-feature-wrapper .m-example-phone[data-v-a2c0041c],.m-util-wrapper .m-example-phone[data-v-a2c0041c],.mdemo-wrapper .m-example-phone[data-v-a2c0041c]{width:100%;display:flex;justify-content:center;position:relative;height:450px;align-items:center}.m-example-wrapper .m-example-phone .m-example-img-contain[data-v-a2c0041c],.m-feature-wrapper .m-example-phone .m-example-img-contain[data-v-a2c0041c],.m-util-wrapper .m-example-phone .m-example-img-contain[data-v-a2c0041c],.mdemo-wrapper .m-example-phone .m-example-img-contain[data-v-a2c0041c]{position:absolute;top:0;left:50%;transform:translate3d(-50%,0,0);width:100%;width:190px;height:390px;background:url(https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png) no-repeat 50%;background-size:contain;padding:12px}.m-feature-wrapper[data-v-a2c0041c]{background:#fff;padding-bottom:50px}.m-example-wrapper[data-v-a2c0041c]{background:#fff}.m-util-wrapper[data-v-a2c0041c]{padding-bottom:20px}[data-v-5724bcdd]::-webkit-scrollbar{display:none}.swiper-container[data-v-5724bcdd]{max-width:1190px;display:flex;margin:0 auto}.swiper-container .swiper-button[data-v-5724bcdd]{width:140px;margin-top:80px;transform:filter .3s}.swiper-container .swiper-img[data-v-5724bcdd]{cursor:pointer}.swiper-container .swiper-disable[data-v-5724bcdd]{cursor:not-allowed;filter:grayscale(100%)}.swiper[data-v-5724bcdd]{flex:1;position:relative;overflow-y:hidden;overflow-x:scroll;white-space:nowrap;height:300px}.swiper .swiper-list[data-v-5724bcdd]{display:inline-block;padding:24px;border-radius:10px;margin-top:20px;position:relative;transition:none 0s ease 0s;transform:scale(1)}.swiper .swiper-list.active[data-v-5724bcdd]{transition:transform .3s;transform:scale(1.5)}.swiper .swiper-item[data-v-5724bcdd]{width:136px;height:136px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer}.swiper-list[data-v-5724bcdd]:first-child{padding-left:50px}.swiper-list[data-v-5724bcdd]:last-child{padding-right:50px}.swiper-img[data-v-60490726]{width:188px;height:408px;height:100%;white-space:nowrap;overflow:hidden;border-radius:20px}.swiper-img .swiper-img__wrap[data-v-60490726]{display:inline-block}.swiper-img .swiper-img__list[data-v-60490726]{transform:translateZ(0);transition:transform .3s}.fade-enter-active[data-v-8bac5638],.fade-leave-active[data-v-8bac5638]{transition:all .3s}.fade-enter[data-v-8bac5638],.fade-leave-to[data-v-8bac5638]{opacity:0}.popover[data-v-8bac5638]{position:relative;display:inline-block}.popover .popover__top[data-v-8bac5638]{position:absolute;width:300px;height:300px;background:#fff;left:-150px;top:-350px;border-radius:4px}.popover .popover__content[data-v-8bac5638]{position:relative;width:100%;height:100%}.popover .popover__arrow[data-v-8bac5638]{position:absolute;left:50%;margin-left:-5px;bottom:-5px;width:6px;height:6px;background:#fff;transform:rotate(45deg);border-bottom:1px solid #ededed;border-right:1px solid #ededed;z-index:6}.popover .popover__inner[data-v-8bac5638]{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;position:relative;z-index:4;background:#fff;border-radius:4px;border:1px solid #ededed}.popover .popover__content[data-v-8bac5638]{display:inline-block}.fade-enter-active[data-v-76bf3aa2],.fade-leave-active[data-v-76bf3aa2]{transition:all .3s}.fade-enter[data-v-76bf3aa2],.fade-leave-to[data-v-76bf3aa2]{opacity:0}.code-list[data-v-76bf3aa2]{margin-top:40px;display:flex}.code-list .code-list__item[data-v-76bf3aa2]{margin-right:62px;width:150px;height:170px;cursor:pointer}.code-list .code-list__inner[data-v-76bf3aa2]{position:relative}.code-list .code-list__big[data-v-76bf3aa2]{position:absolute;left:0;top:0;transform:scale(1.5)}ul li[data-v-2d48710e]{list-style:none}section[data-v-2d48710e]{position:relative;z-index:2}.row[data-v-2d48710e]{display:flex;align-items:center}.header[data-v-2d48710e]{padding:40px 0 0 30px;position:relative}.title[data-v-2d48710e]{font-size:30px;margin-bottom:20px;font-weight:500}.desc[data-v-2d48710e]{font-size:14px;line-height:22px;margin-bottom:40px}.btn[data-v-2d48710e]{width:116px;height:40px;background-image:linear-gradient(-58deg,#50be97 30%,#31bc7f 79%);box-shadow:-3px 12px 35px 0 rgba(49,188,127,.2);border-radius:4px;border:none;font-size:14px}.one-section__content[data-v-2d48710e]{display:flex;justify-content:flex-end}.one-section[data-v-2d48710e]{padding-top:181px;position:relative;display:flex}.one-section__img1[data-v-2d48710e]{position:absolute;top:0;left:45%;width:100%;height:100%;background:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/banner_bg_v3.png) no-repeat 0 0;background-size:auto 680px}.one-section__img2[data-v-2d48710e]{position:absolute;top:20;left:53%;width:100%;height:100%;background:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/banner_pic_v3.png) no-repeat 0 0;background-size:auto 550px}.one-section__inner[data-v-2d48710e]{flex:1}.one-section__title[data-v-2d48710e]{margin-bottom:20px;font-size:40px;font-weight:500;border-bottom:none}.one-section__desc[data-v-2d48710e]{width:450px;line-height:30px;margin-bottom:70px}.one-section__btn[data-v-2d48710e]{width:162px;height:52px;border-radius:4px;border:none;font-size:20px}.one-section__enter[data-v-2d48710e]{background-image:linear-gradient(-58deg,#50be97 30%,#31bc7f 79%);box-shadow:-3px 12px 35px 0 rgba(49,188,127,.2)}.one-section__github[data-v-2d48710e]{margin-left:30px;background:#fff;border:0 solid #efefef;box-shadow:-3px 12px 35px 0 rgba(49,188,127,.2)}.white-link[data-v-2d48710e]{color:#fff}.blue-link[data-v-2d48710e],.white-link[data-v-2d48710e]{font-weight:600;display:flex;align-items:center;justify-content:center}.blue-link[data-v-2d48710e]{color:#31bc7f;width:100%;height:100%}.target-link[data-v-2d48710e]{color:#fff;font-weight:600;text-decoration:underline}.two-section[data-v-2d48710e]{padding-top:240px;display:flex;justify-content:center}.two-section__item[data-v-2d48710e]{width:280px;padding:40px 18px;box-sizing:border-box;background:#fff;border:0 solid #efefef;box-shadow:0 51px 145px 0 rgba(49,188,127,.1),0 11px 32px 0 rgba(49,188,127,.06),0 3px 10px 0 rgba(49,188,127,.04);border-radius:4px;margin:0 10px;text-align:center;list-style:none;position:relative;overflow:hidden}.two-section__item[data-v-2d48710e]:nth-child(2){position:relative;top:54px}.two-section__line[data-v-2d48710e]{height:8px;width:100%;position:absolute;left:0;bottom:0;opacity:.6;background-image:linear-gradient(-58deg,#50be97 30%,#31bc7f 79%)}.two-section__title[data-v-2d48710e]{font-size:20px;margin:33px 0 21px}.two-section__desc[data-v-2d48710e]{font-size:14px;line-height:22px}.three-section[data-v-2d48710e]{margin-top:183px;display:flex;background-repeat:no-repeat;background-size:auto 100%;background-position:50%;height:713px;align-items:center;position:relative}.three-section__inner[data-v-2d48710e]{width:1190px;margin:0 auto;display:flex;align-items:center;box-sizing:border-box;padding:0 40px}.three-section__mvc[data-v-2d48710e]{margin-left:60px}.three-section__todo[data-v-2d48710e]{position:relative}.three-section__phone[data-v-2d48710e]{position:absolute;left:0;top:0}.three-section__iframe[data-v-2d48710e]{position:relative;left:20px;top:20px;border-radius:44px;background:#fff;overflow:hidden;box-shadow:0 80px 252px 0 rgba(49,188,127,.12),0 36px 76px 0 rgba(49,188,127,.08),0 15px 31px 0 rgba(49,188,127,.06),0 5px 11px 0 rgba(49,188,127,.04)}.iframe_wrapper[data-v-2d48710e],.three-section__iframe[data-v-2d48710e]{display:flex;align-items:center;justify-content:center;width:375px;height:672px}.white-text[data-v-2d48710e]{color:#fff}.three-section__btn[data-v-2d48710e]{background:#fff}.section[data-v-2d48710e]{display:flex;align-items:center;height:520px;box-sizing:border-box;margin-top:183px;position:relative;justify-content:center}.grow[data-v-2d48710e]{flex:1}.four-section__bg[data-v-2d48710e]{background-repeat:no-repeat;background-size:auto 600px;height:600px;width:100%;text-align:center;position:absolute;right:50%;background-position:100% 0}.four-section__inner[data-v-2d48710e]{display:flex;width:1190px;align-items:center;padding:0 40px;box-sizing:border-box}.five-section__bg[data-v-2d48710e]{background-repeat:no-repeat;background-size:auto 600px;height:600px;width:100%;text-align:center;position:absolute;left:50%;background-position:0 0}.five-section__inner[data-v-2d48710e]{display:flex;width:1190px;align-items:center;padding:0 40px;box-sizing:border-box}.six-section[data-v-2d48710e]{margin-top:140px;display:flex;align-items:center;justify-content:center;background-repeat:no-repeat;background-size:auto 100%;background-position:50%;height:694px}.six-section__inner[data-v-2d48710e]{margin-bottom:50px}.six-section__item[data-v-2d48710e]{background:#fff;border:0 solid #a4a4a4;border-radius:4px;width:290px;height:80px;display:flex;padding:17px 0 17px 17px;box-sizing:border-box}.six-section__step[data-v-2d48710e]{margin-right:20px}.six-section__row[data-v-2d48710e]{margin-bottom:20px;flex-wrap:wrap;justify-content:center}.six-section__list[data-v-2d48710e]{display:flex;flex-direction:column;justify-content:space-between;font-size:14px;color:#3a495d}.six-section__bold[data-v-2d48710e]{font-size:16px;font-weight:500;white-space:nowrap}.six-section__title[data-v-2d48710e]{margin-bottom:50px;text-align:center;color:#fff}.six-section__icon[data-v-2d48710e]{margin-right:9px}.seven-section[data-v-2d48710e]{margin-top:113px;text-align:center;background:#f5f5f5}.seven-section__center[data-v-2d48710e]{width:402px;height:100%;background-repeat:no-repeat;background-size:contain;background-position:50%;display:flex;justify-content:center;position:relative}.seven-section__inner[data-v-2d48710e]{padding:14px;box-shadow:0 43px 86px 0 rgba(49,188,127,.07),0 7px 21px 0 rgba(49,188,127,.04),0 2px 6px 0 rgba(49,188,127,.03);border-radius:30px}.seven-section__wrap[data-v-2d48710e]{height:433px;margin-top:40px;margin-bottom:40px}.seven-section_phone[data-v-2d48710e]{position:absolute;top:0;left:50%;transform:translate3d(-50%,0,0)}.seven-section__title[data-v-2d48710e]{text-align:right;font-size:20px;font-weight:600}.seven-section__desc[data-v-2d48710e]{margin-top:41px;text-align:left;font-size:14px;line-height:23px}.dot[data-v-2d48710e]{width:100%}.dot-inner[data-v-2d48710e]{background:#31bc7f;border-radius:4px;width:34px;height:10px;display:inline-block}ul li[data-v-f9ca297c]{list-style:none}.footer-container[data-v-f9ca297c]{display:flex;flex-direction:column;justify-content:flex-end;height:466px;background:url(https://dpubstatic.udache.com/static/dpubimg/cSRXkZjG5W/footer_bg.png) no-repeat 50%;background-size:auto 100%;margin-top:60px}.footer[data-v-f9ca297c]{display:flex;text-align:center;max-width:1280px;margin:0 auto;width:100%}.footer__list[data-v-f9ca297c]{margin-bottom:80px;display:flex;flex:1;text-align:left}.footer__wrap[data-v-f9ca297c]{margin-bottom:14px;color:#fff;text-align:left;height:28px;position:relative}.footer__text[data-v-f9ca297c]{font-size:14px;color:#fff;display:inline-block;text-align:left;height:28px}.footer__title[data-v-f9ca297c]{font-size:20px;font-weight:500}.copyright[data-v-f9ca297c]{font-size:12px;color:#fff;background:#3a495d;text-align:center;line-height:30px;padding:10px 0}.grow[data-v-f9ca297c]{flex:1}.footer__img[data-v-f9ca297c]{position:absolute;left:0;top:0;display:none}@media (max-width:750px){.footer__list[data-v-f9ca297c]{margin-bottom:16px}.footer__text[data-v-f9ca297c]{font-size:12px}.footer__title[data-v-f9ca297c]{font-size:12px;color:#979797}.footer__wrap[data-v-f9ca297c]{margin-bottom:0}.footer-container[data-v-f9ca297c]{background:#606d7c;height:auto;margin-top:0}.footer-inner[data-v-f9ca297c]{padding-left:6px}}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#3eaf7c;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #389d70}.home .hero .action-button:hover{background-color:#4abf8a}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#767676}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}.page{padding-bottom:2rem;display:block}.dropdown-enter,.dropdown-leave-to{height:0!important}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.badge[data-v-59f00772]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-59f00772],.badge.tip[data-v-59f00772],.badge[data-v-59f00772]{background-color:#42b983}.badge.error[data-v-59f00772]{background-color:#da5961}.badge.warn[data-v-59f00772],.badge.warning[data-v-59f00772],.badge.yellow[data-v-59f00772]{background-color:#e7c000}.badge+.badge[data-v-59f00772]{margin-left:5px}.theme-code-block[data-v-488b05bd]{display:none}.theme-code-block__active[data-v-488b05bd]{display:block}.theme-code-block>pre[data-v-488b05bd]{background-color:orange}.theme-code-group__nav[data-v-131b8180]{margin-bottom:-35px;background-color:#282c34;padding-bottom:22px;border-top-left-radius:6px;border-top-right-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__ul[data-v-131b8180]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__nav-tab[data-v-131b8180]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:hsla(0,0%,100%,.9);font-weight:600}.theme-code-group__nav-tab-active[data-v-131b8180]{border-bottom:1px solid #42b983}.pre-blank[data-v-131b8180]{color:#42b983}.swiper-item[data-v-f19c6420]{width:100%}img[data-v-f19c6420]{display:block;width:100%;height:100%}#api-index[data-v-a2f64316]{max-width:1024px;margin:0 auto;padding:64px 32px}a[data-v-a2f64316]{text-decoration:none}h1[data-v-a2f64316],h2[data-v-a2f64316],h3[data-v-a2f64316]{font-weight:600;line-height:1}h1[data-v-a2f64316],h2[data-v-a2f64316]{letter-spacing:-.02em}h1[data-v-a2f64316]{font-size:38px}ul[data-v-a2f64316]{list-style:none;margin:0;padding:0}h2[data-v-a2f64316]{font-size:24px;color:var(--vt-c-text-1);margin:36px 0;transition:color .5s;padding-top:36px;border-top:1px solid var(--vt-c-divider-light);border-bottom:none}h3[data-v-a2f64316]{letter-spacing:-.01em;color:var(--vt-c-green);font-size:18px;margin-bottom:1em;transition:color .5s}.api-section[data-v-a2f64316]{margin-bottom:64px}.api-groups a[data-v-a2f64316]{font-size:15px;font-weight:500;line-height:2;color:var(--vt-c-text-code);transition:color .5s}.dark api-groups a[data-v-a2f64316]{font-weight:400}.api-groups a[data-v-a2f64316]:hover{color:var(--vt-c-green);transition:none}.api-group[data-v-a2f64316]{-moz-column-break-inside:avoid;break-inside:avoid;overflow:auto;margin-bottom:20px;background-color:var(--vt-c-bg-soft);border-radius:8px;padding:28px 26px;transition:background-color .5s}.header[data-v-a2f64316]{display:flex;align-items:center;justify-content:space-between}.api-filter[data-v-a2f64316]{display:flex;align-items:center;justify-content:flex-start;gap:1rem}.api-filter input[data-v-a2f64316]{border:1px solid var(--vt-c-divider);border-radius:8px;padding:6px 12px}.api-filter[data-v-a2f64316]:focus{border-color:var(--vt-c-green-light)}.no-match[data-v-a2f64316]{font-size:1.2em;color:var(--vt-c-text-3);text-align:center;margin-top:36px;padding-top:36px;border-top:1px solid var(--vt-c-divider-light)}@media (max-width:768px){#api-index[data-v-a2f64316]{padding:42px 24px}h1[data-v-a2f64316]{font-size:32px;margin-bottom:24px}h2[data-v-a2f64316]{font-size:22px;margin:42px 0 32px;padding-top:32px}.api-groups a[data-v-a2f64316]{font-size:14px}.header[data-v-a2f64316]{display:block}}@media (min-width:768px){.api-groups[data-v-a2f64316]{-moz-columns:2;column-count:2}}@media (min-width:1024px){.api-groups[data-v-a2f64316]{-moz-columns:3;column-count:3}}.sw-update-popup[data-v-613ca22e]{position:fixed;right:1em;bottom:1em;padding:1em;border:1px solid #3eaf7c;border-radius:3px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.5);text-align:center;z-index:3}.sw-update-popup>button[data-v-613ca22e]{margin-top:.5em;padding:.25em 2em}.sw-update-popup-enter-active[data-v-613ca22e],.sw-update-popup-leave-active[data-v-613ca22e]{transition:opacity .3s,transform .3s}.sw-update-popup-enter[data-v-613ca22e],.sw-update-popup-leave-to[data-v-613ca22e]{opacity:0;transform:translateY(50%) scale(.5)}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#3eaf7c;border-left-color:#3eaf7c}.sidebar-heading.clickable:hover{color:#3eaf7c}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#3eaf7c}a.sidebar-link.active{font-weight:600;color:#3eaf7c;border-left-color:#3eaf7c}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title,.dropdown-wrapper .mobile-dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50}.dropdown-wrapper .dropdown-title:hover,.dropdown-wrapper .mobile-dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow,.dropdown-wrapper .mobile-dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .mobile-dropdown-title{display:none;font-weight:600}.dropdown-wrapper .mobile-dropdown-title font-size inherit:hover{color:#3eaf7c}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:1rem 1.5rem .45rem 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#3eaf7c}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #3eaf7c;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{display:none}.dropdown-wrapper .mobile-dropdown-title{display:block}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid;border-color:#ddd #ddd #ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#3eaf7c}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #46bd87}}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar>.sidebar-links{padding:1rem 0}}.test{width:200px;height:200px;background:red}
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/img/search.83621669.svg b/docs-vuepress/.vuepress/dist/assets/img/search.83621669.svg
new file mode 100644
index 0000000000..03d83913e8
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/img/search.83621669.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
diff --git a/docs-vuepress/.vuepress/dist/assets/img/start-tips1.3b76ac97.png b/docs-vuepress/.vuepress/dist/assets/img/start-tips1.3b76ac97.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b037f53b8e4129bed96e17654b47caaca1a6979
GIT binary patch
literal 39681
zcmeFZXFycTvM{>HIS0ugSu#qJC?HvK&XPfL&J3uaWB~yI0VN|zat6scCk4qOISg@t
zVdfj%ce~x^-gEB#-uvE<_ulEDXKK~zuCA&MtGcQe@XzoSfKXXpNghB#0suwC2Y{~v
z59ItDYym)372p5>024rZ;Q*i_AVd*>3XuT-`5p3~804ULD1X98>_2Y8_W=<Ndsi=4
zPkUE4hI>4GfQXEeD(Vjki1ZU?`3VwE)5d&>2dYrFL$TiML1aSUYq+OMva;qHTI%vj
zkK}$bh5OCI&CLm!5CEKAygalNWEcz#jTkW25ZoXG*Z>;9Xkq2)Cat0I=m*U|e}B^d
z^>se`lXqZ>`v<LG=>Hi&WNqVVg%Dl?QQXqn)5;kE*C6tsm79kb0HA~-@Jzm5Za?5W
z1Wf9IU=RT}{DAHLfQNs;mVdx2Kg;N7$s)>}BGij(Vc}s10JsP=z~EzLhoFPYfPnd2
ztQ}ks@Q-#St?VtV5%4Pn%;oIt`U7r3!0eX4(Xsmtwy?1LMbpB<?ic)rEQp$jh95e3
zx;a_+|GfA=`Q_~7jnLQ6#Dw_9wf9ieLj02d(3_*H$}iZ(Qce9&yaPg_KVf@sMcqGP
zD^FR3F8`=&ZShd$PuRst?MHwAq-pCQuk<JE;H9MVC+y*>^^3lZr=0emcnc2%^dEJ-
z9d)JugzasVe$foD*U|qI@8h7S_9yJ=sQrtF0DIYAcn@!_Up(7-$p4bj*%MLoKiaZ)
zQ2JHg%U%aD*Z$z&%Hl8HY&;Eq@nCK9Q0~t%HZHoq_;>S?`9<H&>F2orsRtV;g<p72
zAMIaty*zY&;oZD6e(C3lh4PQF^|LPU5Rd~NAwCR%25=Yg;Rl3&tOi~-eu(i10J5%b
z{vHl?_FfFqh#6$VpyXo3!^Loyk6#1;e$2-oWdPvh^UryPM2`6v&I-ZDT}#BxvA=Ln
zq5z<o3;+m4{=(hC003eHzLUku+r#H4xu44lVuoV_1OO>O3D5yd06V~q;7$k-10Ena
zRtD4o9l#JU1FQghz!~rWe1RY!42S@tfmc8>kPc)6xj+$622=s{Knu_T^a4Y`I4}b&
z04u--unQak=fE`*5)uXy9uf%>B@#Un3lb;NT_h1CNhCR>M@U*ohDeW*?2ufLype*C
zo*_jeB_gFGy+<lWszho;>OdMmnn3!3w2HKibc}R`jDn1dOo~j4%!<s5EP^bJtb(kA
zY>I4$?2a6O{2VzB`3-Uoaw&2hatHDd@(l6{@-Ffj3V?!xLXL79g&Rc#MHWRJ#R$a~
z#RDY-B?=`4B?qM(r3s}EWeQ~lWe?>N6&;lXl>wC-RSZ=TRTtF?)g3hiH3l^uwFtEi
zwHtK`brtmp6^4d~MuWzQCW@wnW`Jgg=8G1AmV#D*R*TkyHiNc-c8-pYPL9roE{v{-
zZixN_JrF$xJrlhG{S*2G`a1d<1_lNt1}BCDhB}4?h8IQzMjA#bMmxqN#s&ri69<zX
z^Dd@5rV*wK=2OfR%nz7tn3I^BnAcc@SS(ngSn62TSpHb?Sb11YSYuclSl8G@*lgGm
z*gDuxu*0z5V3%X}V1LCv!NI{{#JP{7iQ|A1it`5NBThfgD$XS?F)jzLEUpQzH*Oqm
zA?_#KFSsXoczCRM5Acleyzt`iit)Pemhd3>B=|h|O8D0JAp8vcI{Zoe0|G1p76NGk
zGlBqu6oP7kF@ilpEJ9X7SwaiK5W)<?M#4G5Ga?cqej;@uXQCLQ4@3h*Tf`W|ti*D}
z*2K?=bBVi%*GW)Fm`G$vtVo`b<dO7{Y>=XpvXLs0J|T@JEh8NzJt89}6Cl$g^CQb3
zYb9GDM<Hh=S0Z;Jk0-AppC!M#MSDy7md&lmTjjSVZ(UGOQ#_!sp@^cWpqQb!qGX_y
zqjaQ9psc4{q(Y_QpwguBrOKk}q1vM+r52;MqK=}jqMoNgrs1H`q6wtQr5UC<qot!&
zpmn27qwS*Iqa&w#K=*|1HC-FsHa!WwB)tRuYx;Kj9R@N6X$B{THw@hjN4IHiE8h0L
z{r>jo?Q2FhMqS3Ij1`QFOxR2!Otws~nL3${nCY2SnS+>1nCDrrSVUOtSyEa0ST0!E
zSoK+7u-3C~u~D!ou?4V|uzh96W0zugXU}1uzJq>8<c{N=%sb;8$Q*(k_8b`;W1PsG
zLYxkqnVb_`Xk7QXT)1+$=D2aWrMZ2$OSo5g$ax;|Jmsn9IpAgHHR4U+?c;^<3GzAd
z<?$`>6Z0$cKjm-YKfcRx*XnM@-RXOH_vG(^?ls&43vde92xJL-79<f=6?`GsDR?6!
zEaV|nF0?JoEc{sbt?--(sfdP1j7a}|wEHsmLHAqkUy2HedWlwv9*S{`If{J{+Y)CJ
zw-L`1UzcE%u#k8!u_DPJ`B?Iu<cid7DGR9_skH}853C;)JlK@JBmG3WRQf=MPsT&0
zR^~!hR5n=l(?gVp3J;?mj>-|s>B^<cEy**=+sT*6A1Meb1S)(|L{n5zOi-LtqE)g|
zDpopD7FG^c?pDE7(N;-US$o9s$m3CyDzd7wYLe<#H5N4&wR&|xT}eGjeNlr=!(F3U
z6J1k7Geh&c7Qa@IR-ZPBwz>8P?Q<O&op_xEU3Oh>-A+9MJrliRy$k(^`ic502D}Er
z21ABah7N`eMi@qVMg>M^#&X8V#v3MrCJ`pHrfjBurUPbFW=>|U<^<*z=GBkU9_v5;
z@EB^LZjobgW~pTP*7C?o)+*I%*ZP6=YwK+r37bTlO<M`uMB6Pp3A-e_ZF?#E6#G2~
zS%-87@Ds%+*-tJU)g22R;ZFKa70#H>kDVJ`h+Q0Ax?Sm9{ah#9INc)LR@_D1liiOz
zR6GhikvvU38@xynhR?7!yLY(vs*j{kh7ZJ7&$rr-$j`-Z*q_5c(tk5RJ|I63HP9-s
zGw60uSkP*)bnyESq!7!HP7o95IcOtPA+#tAJIpa`<SF0N#HXjv^q)07r+ps!d_7zt
zyd(lY!Xskth1iSim#8ltUXDiIi%g4zMOjA;M)O6dL_=e&Vg_URW8cKW<80$b<Avh0
zUZKBoc{Q6Ll~9yOlo*h>o}`*o_nP5#)a%n^^W=dPft2i2>{Rd6l{b&xG^8=7y-I_o
z+o#WD$YfN!rFk3q_9D|db295eR(UpUc69dDJBN3l-z&VY%VEt)$wklg$^D+Em)Dms
zl3!dvRS;cpQ|MB-QlwSXT`XK&{DI~}d<k-icgc3CN$Ggm!?K2Q?(+8)<Q35$fsfuF
zcPbxO&Q_^Zbyka1m)Ee=ysagvjjBVc^RGLqx36DmFl?A;RBr5S5^Jh$=4mc$x!sb{
zO4b_RhTZnO4c;Eme)h@j(_V*N$9kuE=R%i3*L1gL_h^qwPk*m`Z&#mmUwgkqf6IXA
zK;xjuVEvHLP~EWLaP5fTNbRW5Xx*6bSi|`J@ums!iMC0p$&RUqQ@ztl(?c_AGZVAA
zv!CZo=2kvif8P4y^aVWcGk?7h`W5YK)FR<x$`Z{|&hnk*iWQ-i*42lr!)w}W3+q<v
zyWc#&K{uX%$NQeLNxxaVb$6>}TYh_d$9QLB*KPNDFJhl)|Lp<$LCxWV!{H-?qYbbJ
z7=9dcLU~enDsb9)rg64(?tFfI5e1=y6kUp3_Fd^;ZC?9AF`#d5?%XuNRA67>&TzP!
zg@?sYTL1;|jckk9l^hoW0G=TLkc<NWw(%eK^3M`Tf7tj4_{TowNB)ui0sh0L{&`0T
z017_=fF9yP`vCyFMZj#K2%7})tAV)Ic>o~ayZ0*te<V-adv||ANI3NXfR+M>pCIf+
zj5`2uGY5xX*TdmA1qi!-9soX_|6!;9C{0)j0Pp7b)%0a%Y8Cz<^xHT56F`KC#Eu+<
zg2V_Q6Ct4xA;G%=dIaxi2*U)C{w#}xjDm`Wj)94Vje{sqO9&t%p`ak6qM)Ju*jyn6
zBklvJL}<jf`K8fGG%YX~-AV6;CA`OElBw(<)0#M9zGvz26bqaD76m003o9G@9S#9O
zAz_jGqOuR=<P{W^l(ltq_4E-YnU%GTt)0EY6HhO1A74NJfM?IcBVN3Wj7m&;ot%>T
zCM`WDH!r`Su&DS$Rdr2mU427iQ)gFqPj6rUz~JQ6^vvws=P&cCYwO=OzHe@A?|_d_
zPS4ISAeUD^<U#^a{t)YzWd9%+5kf9xR8$mHj306#A^RdS3K1&WZGLoOX-y0ZcM`_C
zVVI;c3GXXAu$b;?9g$gjOkk5U3#_t$e~9)|vj3T2Pya7T_Dit8<XQk^0py<v1sNFy
z4Fv@S4IK@U&@mC#7CJg6Hs;TS{T~VUXTtxH2!16vf(R0V1}Z8l2I7wp2MdSre>=e!
z5mqxhd>+6>L2QtTP>292;6@9Q3C3!{T8)?~TQ@A<Om^O%7#p;4Gv<zS`%v09M|K>S
z3BFh}jmzP!s70N24jY=UA(9Udd~U7l7L0RGe|(uZh$qN%wK`vpA!-LpZ*4K-AX4M*
zYUL<)H9>EiWhF#xePQUZa><b8IqGV;k^Q2~1$$A?!0BLFkWcX0p(}mKa_UffHk6iN
zs~x+22DJB~eZFmMesMW#ZlkK6<?Qh2dhU`wa9i}Ot~%dv=iK=X@B28v0ob<>lptA?
z-uG+V%4^>Z_6n~B_!{FmJ`4{R;)XnaK)If;kT2_+yX_MomrZEUMMD(-FjA&si<8ce
zhap`rf>-j6NdxvEr3%f*E<(&P3CG>lKpy9@%~Ex?n$#+Y%YMire)Ge*gYRjju5XnX
z)cI-fnqL!QGPu7|+}<^r>j6cwtu8;eo?VHwYfjgxtCN?yliVd_OtY$M7$>@xUC<|>
zj~D2cBlM+`kmeN@YN7(A2(1L?Ye?ZL0mQ(JG?@JULt%}<RPuvmFXhm3YMRyLH1*lW
z%B88#W1pdV<CjaUSDWYFpglOS?$M?WHdZ}7Z9HB|x>gC&telZM&j*p`J2dk?nFY(|
z2R`@GSh;esy{H&BWiqdut;yiF9jJB%q52Xf-3;i6!Xny5PM1To2@eHt+kx!pvYm_x
zJf`{>!w)nyqm#B9_1eIb4D}OUCERpFj7y!ED=`7g%0wV(GYq_7*X668{i%#V=vcov
zAsjIDcb8gdf!3R}O|7-n*PhianKor^E=X)$+qHURJ4x0Af4rKTp>NGJ|2u9RL;rj%
zK=R9>N#O!P89kyP(#%cuQhZ(D+@15TT?GUZ@CG?u<nCvk4I*evAdnAe|4rooIi2iw
ziW`EZ)`XHlYZ>u)_5rrJc@R~i1IdYC?%L_Dy&;b^7D6TZMJMFZ`@3doi0&|x_CBhA
zFbCDH*j?fZUG69zavA@`Q%+7o%ExSDSFdMaJrp5g6BJ|j4%sG{%jCZIcd;!=L8w&v
z_8#+$ct%E`O>?7ulxfPx8su++-S2TVQ7HR)R`^lxFcaRdAc2C8da}dL#)u(ihP<vd
zMdREx=lTgEiEcqJ5=pR!ZwJvR-m>UGsx}#|Kbk)@oou^pKWW<MKoFfDwr|9E`CQro
zmGe9Mm%cOtITxKXj6%WuAbv2D1B@Y6D`Ij?YlfS<bj@|&R9%<F;?-c!W*hSdVzvHB
zt_tR6mrwP!%W^lMt`Jt29f@VA@EL?|fS@-X(?Mw7COfM3wW{*>r6t2fuJW?g=zWYQ
z0=tZj)rQp1jbCUlFh4Wam%1g6W%uDplf-OkrHQ>}O?^-9YdNP6QE;Fo!!9MSq*%k4
zdvx5*{bVjql4!T-FiKpyXnWbNbqcCgx3<CKEulQX!2j^0<gPKBV);a_hD@`(=PPpu
zik%?YqXmt*mV4{Ys7rFLY%gos1#uL#88DsS*I-t?{=9zInC7)}hayKu6OPWp33TqV
ze$%qiTlva9Ai2Fa`$avK-1i1=E41=#0X~!Hmu&Uvlst-rkqjw<$q&OLI<@hpX>=-s
zERJZ}=$pX8=kKEi2i+a-4xxfg^1G~@SZ5VyLHrkY9ugfqme!CaTcuL(q9<}{YMo}R
zscvnY7BC$3mQc|1sh>Ou?|RYLHZU;sa)MDKZ{zLe##WHriaO!q?yV)33EP@mU`O)w
z*0<WJM9Pn=$UPLqI8tN=jU9`E3mq7aYrZ8aUBajwA?*#C`t615<=F{4c;J%Nt%>#7
zIUNVal#S9^(z=Ggv6`F%zu25!7nBds;R5jw&_0y(#OrmoP%eQ?VPj{VMWZL+0q)|O
zr-1{^Q8fM)8^(RiVOIV4Jr86aSYq|~xkk2Ntiu5^lWj?kY1pUq-VBMAYqFI0!G+z<
zE{QDI-Z+nwYCc%v8gvtdv1^B(>7A_lMlu|Yh81q>8M(Jlg<tniJW0=gKCTkXmOg@a
zB{0?B+&)`c5@~>O$wyq6zkF7BwsDzk;}z^!xSJwc8(vpjV8Sw!|J6a@Zf{4T;#U_v
zEfI!iubv>*%H7c*fu{1b)qP>LIo|e~Giqb|+=ixklCfk`j3oQ*hHq<iu+PB`gLC6A
zTLnei>jEbbOXr5<=V1G5i?h6YC5WY#-sz%Td;i63d>y?Jumk&YsDL2*8gV-pfeih}
zI`8l+_OnidtCt$p5#@gnLV=HOfL0sZ1VCeLNpK)^5(M6n`iE=Cn#hvA!MfIHH-Mp~
z>WIV1E@_<VkVpH_nj_x1n+AqL_q}<8f_q{(pJ|sK;^G=he{z@y2UY~Kp#ky#aNVYH
zd|Gk2Ds=-hhY2gB=7Ywt;K1QA8~`^(cU9`AdhWo1f2i`mL4p^*!{1l30uDrchfKf$
z$t!gjiV_^?EBa5Ek_`f0WjK&U0tc2i5KmSw{{VgHQ8o+?@WKJ=oTI&4|7PXiTKQx2
z{C{t(s2|tl!U3)VI@pu!n*xs3o~Tm!?=#TPbJSrJUSp5q{4VI@L<;E?#?`bAg5BW&
z-Uv7s7JQlwMMta=@jAXz_3FKEg39Wyl$M&~obz`Z;xG62&1t6f7a8C{Ip|tUs{}RW
zC6iEaIHK+{xB?bj6Awj8Mby>&M}&UQw4O;(xot3lq5r<9=HRomY<oD+<qLI$1KG|@
zZ~(~$F@2{&|A?6Zdy{&+`))Tcb+iZvsNlfnf+8IFWC((s(f=n*kf|I^(fzdZc&IR_
zxBc>bQtF7@944Xg_e=9znhG5F|K{}HI{j~l^uNdHA2SL*0ePlOA$*UZm6W-n(pE<*
zm+C6FJBu027S^It;K$S<YJGQ0tIK&q?%ewI6GW8y;6Nu)iJ68d#x6f7+rlm7BwJWg
z=YuAA4x@d=4TODqBfO^HZI0)llDlm*T)DksDUSLI?Nq^rEB7-|yz)+Y=BVGj@|h5N
zh>8ZJx(p&OVdKTAxZvF^AY)MPgbyaRR&7?g?V0svHwH3V;%ebg^mV}@RsMXIjgw}d
z{<XCx)L2*uX@Asxj+V0l+!x0c<Ze}HwzS<zPb7ou>+Ali@@wxqRIboqIH29j|CR98
z$S%>xoG5leO*vBFf0}g{#a)`?NG@z8jf3f*L3dKklD+KIWj&<^?qCecUPLlczud#n
z+yPO!tF{80A2<(Qf##%cGCvqaUFXrCjlluCCp#sT{1WObyy0H-R6&}PEn;hq=5-Ep
zoNm_9fqe~mJVPh)gI%a79Tk>ff{qcU9?9F2;@qocC~8M(ndP=w=Xe%pCdLaz+--~@
zGFTLwiEfH0f+u#NEv_G+Vqm$#XfK0zS;xbQL_B2aOy6(IzKVH~>wbdoIQ|ZDQnr0{
zkiEu@(G@@*>1%m>OGwC>uu)0hu}{+4vOi#jP<m4^T-DiSId(82weeK{nIu(^ggF7^
z!PYZ1u=+wRt&C86V|60`T{&0IaKE%?c;SBE;-2d#OCK3`hA=@utERGD=~WdkTV#XI
zJB;o;e{>xIY3!FqK47_Ax`mQtvJ)~%$5|IF=v77_KUG!}9eKcAw!fbj$Kv=hiw%`4
zmkHlkoOTi1<1tUrn@#5D*(GE~F}3fcyq%iuQqz=3?pWd<{lYoE-DP&efb71O!lbh=
zNPW!w)8sa5YW6pT)k?cDws&ITW(mT9G;y0z2>N+BOSknO36`FS#Ct?|uxRvAqT1C5
z`MY*kpl#8i&VoLA#S;~@`??(W_%YS_kuMo6APL`Rl<^-hL!v0()V;}R(GQx<{&FRs
znwMwvJRrZ*=+jnxsypA~6WCEAB6^NWb5TJySDR5m<QNdq9#E7@6?6PmvGOUQc&R}+
zY9hKiCEKnNTRt2pyR{4Yq_r`-JX>*Ezh*t>xIThBBt2^x%=~dm(AckHZ&LR9^GXAy
z0YVH1OwQ~zKx8%CUAMAgHx<S*>vA@t`pm?%?K`$mPFQCSubhqs*@G1T%@CsmN__O<
zMUbicS`8SlaDML5_`xA}-y85=7I!oKH=EIW<KF_Jc2{mPy{=<L(c*gvV?9pfsJ>DK
z8a6EAj|`Xbd6Yc+w377HC(Mk0C7a%n4mn9LNg)C&uF{GpTR5w9!7_t7%Gst1*G)~K
z)>|XU39Q>zX;+q?pODoj59^Y<!`kIsQ+`fo8#GM!4q-9a7UTqrfsV~@inixr7a*7d
z9H<k^)IN7lQa%!p<V`idJHY)~zf+{tCS}ekyW>31R%87pU-NLO9I<(*7WbKQOc#2#
z_F2#rB=b}(tu$ot==&W$g+rCQ7#-IwXOv9h9zM%87%%r*?!qW*CcPGJdpp(n3hNyS
zcnrBtR7I_E@7+tq#5&(KP3?}Kmp{>(sr}r7W9Q)L`k@b3YTkBXXxa!>ZrJJi<tOJ)
z#P{myLSKk2tJcDSu$zE5@*S}rsj7n3clP?};Spu$*Eb@c*uqM`)rYs7<6K9-u&ml=
z`@ZUa_DQ@jS`yb!y;J^By%l_xHY<?EodO#v%af%V)prkz4uSR-dU6zrQ0#^oX0brP
zYrMptM-#WMbhC;Bzh#su<2acPK4y5oG~7Xe!t#Kv?vA)Ic)44WcY@bzXoN|nws|In
zrM>;>vhz&;3u<A0OAM5^1O*smycvaOZ~z6&A>InAfJlYyr?+>GA^Djbfw^D2fQ@{>
z4C3X!mJLK5o!ukD9w7}+#baI5r@RwGSGzd@8x`AMpUmhX<c+qOlB!KrzP`7A%%54X
z=`(&)Sr6_L9NLkhZ_zK#>kZ~rQHjpvP^EKxxsqU;GXEf#r_<z?YWtmDboHUBTTC}O
zP&>M)I>s(F(GLcQ{w^<n%zEj}9~*YzJl3`xWS7pGnb}@u1G8sX|1s>DVCqN0|C8aT
zTigC+R+V7&3NmZzH^yYZ0*T_Jw65h?mo%TBNRy2}Pf%zNSX+U7St|*)95Yr?VUmc8
zy@`m@QjJ(}Fx?X$zI-DgjRPBb0_wa0bA=E#9OcI)6&PeJsDJ!wy6|aYhzpg_BMPQ>
zKE^{Luv2*G0d1$B>@0Nk&Dgx)o!t!Alp}jc1*5NhdTlo4RGu0ne2cGlH}P)y3Q@w-
zy97_Jr+THT37)Y`oFT1>Db;-0pWjZ|@h^8t9jr=}OS<hmOXhnVH$LT_(5qN6_A);O
zOUsWoH&F<;G%rFAgW>6YRJw@PKGmD|Fb0QoiMm))9})#er}IdG*%FqqWQNBpqkY3e
zu9k`x7jgXh`&6;1TXuUDVneQaZj$IVQ3vPH*3w(9c)0^qCa)NmXaO!2b{dkedYP~=
z+I5pB0SiX<DRocTD<5au>-!56b@t1<;VW5;yPF6`6iU8LbwDn`={Lgoiq%<(tJpyU
z&7G|ga3xaBGyZC*<cM~bKcMGlr^nfPuQp68k0?>}n1kh;<E{7OQct-{;XsYejJGse
zZP+uXgif0iy;YUlIE{)TC=91(XPY&&#N4Lk-<z7qeNy=StA;-Ie<H_5e#gX|C>D08
z{e+HdMv&cgrODuYhXAK;hUsxAVN@s$8nBKbs4h3hBcNo<-$UCi%>Sk!;;|v~qi4^a
zVlu=$#g}7o^AQjv!2e>reIc5aUCg~lSc9E!#jc)3vl=GF$up`T5itAy$R@dQ`rCA^
ztSfr@_#K<jev{FR2vWXYQIFu84^@!)bzvf<0z-+sUE*j@YRsvD(N3X{mLXP&N@D@J
zMUV>3=_yU6^+@?b=DSLjit`qz>}F~h;+vAwwR2bdZ~!%c8tjL^w07L}sD65A$xJ4d
zCrj2+#7K(oZG>3HM~(Yqnv-SfN2|`Bp1ws&uGV$OCbv>%5;ZqObML&YQ&>V%Q<PkE
zOjRe}ao?$%ugWvCsljpnSj^v|oWZw}<;!bAv>%n?N<KQF?rLY@V1w3;=c2`Iaomi-
z-B4-yMKiWLR219gVrmSAvBf?=e@TlL|J;k+<v?4b&7sVCDt4o$1P7&NbMsEi<M;Hw
z%v9gJ@Q4KWA3HdBFvuGkDEF%q6+0zkh=(1<2Q)gbU0?g}=R5kb8VBC9+UPIUT)jWK
z$9I3Th%sYT^~s#v+?;MxjK6Xc5Y?Q@OU)5OGWadje_Or@3I{ZsjjxV{%7O^&iU#a>
zGD@(V%44>s#L=jP!^AtWU6`MW5`yq&Q0Yh}Y{GeMW@GeHwKD?kgt}{D-m8#nzyZdm
zpX`{k8j1+wc-I46KYm#->~N|^i(s*!beOVg93p3<z5nS$x<b@}Kne55#L@XHcAI-L
zJVbALZUe;425xS5@fAohcgliDik9YObHqAmUM(-mF_nttAyahm<Ku6l22X$5Y|p!8
zj<1?}WixZKuswt_e5~p;G2BeUy3AbXp@K{Mnd$8`MsEc|%`Bw_yBdKR(HRv&e2kI-
z&+U&0hA}ZD_~)xhdOc<N$>*Kl3dNGhvQ+ghnM8H-FR8dP6Jm-r>}yw?ZNqE=+vkc4
z30{bEHK~<(dCPh|j>CvBSam9V^SO)X2!-T0VHATQD|u6Ju04jww0vrh{OQsGY3L`W
z$1f{0`}J|D-Ne5oWu5hF>yv!^vDSo>YCb^wEz`p%Av~qh-ri11b!ls3rZM`Lx&fTi
zA|v$s!TK<e9UN$ng$aNhciK;`rEZ|E;L@EthWL9Eu(=t~<~isZvb?Tv-c|w!q^c2a
zv0lWsc{C@Qp;-V_duD!llMRCjLndx2KEQ!7L@??C+}>MVl+(}iFQ~Iu;Z!SJo9iOB
z>R%9UzI9M6{rpu06o#;2LDW!3(I~E`|2JAM_Sbq7(?O7ezxY|qb2}@oXzRaeF8?Xk
zL4k^+{k%i|<D!>1_xM);4CZX*`?7Bu|0Y)aZ|V|MvuCYK+dp8k&yS3165$x^dWtFj
zRDy%!U$b7~?CcrnPMiN$UHpVkCr*%SukW2MC3Cj4lDn%!-m%f5{P+k7;!uok^6QnS
z1PsrnsSxz)|2Y?#a^%uJ2*<}?eV6+;z1nHYy)sRg`c1p`zxAr&w5Ihf+pw8hEk0LU
zsq=~U-lFPzm3AzVJL;?%a^z&4Ic?h*H=c0d%Y1%OMUylfFo6T-KBYT*I?AM)a*s9s
z+S)ii<Swg$9DJ)cevx8Gf^Wc%Sp*6#9$4IcKq;V?y|543qIQJ?!Kw(aEBkeD#SMxx
zqT`F(AsZ<7*vq8q=i$J(&@${Q0}jM#o?n|^p)VkYnl=bL2n^@cz?KnSod*k`>m66v
zeTBahL%AC@^*4g_t_Yj!opbxmnJ^rnd51g5slI>Seu`HQ2igh{KB3paZF8`&I>bnw
zUWR&v{=ckweY!xFj}coA<F1K@8nIJWm_-WE8aQA-*<kSLKPyUX`=iyDf-zW(z^CDy
z@*P42S1&D^=U#Dg7>TGaX>c!k-F1oxHT5dET)lQvtEaiY)i%Ua=O$x|ezUeQK)#D9
zrCjp2mE`ZM$`pjBt@!4x7cb`SJbf$!IFJ0;VFHKTfd^Ci7BncRQ$||$0J9?bgH1z&
zBHb5en+UDaEsAj4NBhiP%q}9Q17{V=?oE{gw`{#(l9fkhnQM3UTd;~$i?*NT4rjQ1
z+0bp^$*m?c?<=l8YVYJ-&!*d2qQW-fES?@!uxGm5kX&YG+KpOqR8g4~495SqWM4nE
zeSsTGnYg4EIVikj+ArO4AU4yppk-b0{(Nqqq+lB+d{mYiD^L=R)A8;JLE+F%wn!%V
zpdFpU8~uZZ&W!-%J~FnbHXNvUSc`eSA;joJNtHl7?rK3dFfEJnYxz2H2{hcV<1*S#
zLZl+HRPe^}QBAg5WqTG5XMudyB8zu~<qOX5jIYX`O)*6sw77zOdtkydygcRQ-)pB1
znWOZk*0W@v(6Q)ZScrTpVp~q{C7rKoL%2VAXZL1Cgnil(OKi%E=_`ak5)Qo3GV?2Z
zP=B<s6i%LGgSXgL%`#kp(j01tJaAo=`^uxI!R4(k0euiD#G%lBel|77VNPhiAmLmZ
zZ7^d_81EiCr`Ql-t?8G}8t2e})A<l<@Mcf;Ex%*fm2vYxnZWLO?6P{4KVFgjgbrbh
z`{?4bnPXZzxIM<(l!ul?dydzolpDO!!QCBCwSV1y$0?|_RZORsxT+b}UY@~!!g2#L
zKO!iFF+r)1cp_IM9JQ(@A~K8ZJq_jQ#7Y{WV-gdlHun^09=R=AtoSm$FD!<NL+pIP
z0a6i?^hdejQ__ts4M|#Qs1uh+(AH*ajt_=v`aJ$L*q5G~;LX^xKy9lJkY^grbvAPL
z`Ax~|7L;E@i=Ai-6B0VU7ga<BJ!%>UGt893f!Z*PeOq5)8ob<#w8aa*-Kn@_&1XB;
zFqO0EG$muX8*^xlWPb}p@Msn4ykc-mS!kB-cKtNn&itK&mMUkfMQSD!%uS59nV(Sl
zD85Y|^>vPgOA+2aDrhdWKiQg{tJ>jLx2<=*XG$$N2psm?_Np!BQleB=ytV@`#~xHX
zo^}zJEmHD!{7zxx*r?L82`c@(P}K|vqAA7#MxS+OG1f-RF3ssQMQ~zKIeIBA>QNdW
zia(~|r2F<bos_l=v~zek?vc0`Y`O{u!n3f!sZl`!^;tyI;<OF{sbhkrbNJg{&TTsn
zC;8vf9UkMxH}9IT^)91An54&RxIvwI9@|OgO5*nx_F9h#QbP1&53S;40{OPbXmGPB
zr&}D?@vOA#XKN)~j=#gEZXO+qr7^+*_v&OQzi#azsb5l$FqZF{s@kS@I)5$In%=9T
zQ`7F1;5&i$9V*Ulg1a`2wnC!(^gENrjuzA)HZ;wGI3pDPl`jpw&LgfgjK1BEzewd{
z6Z0)!-?~rF8!~nk;6Pu4mz7KtVN;b3BlBoh!CXt0b>4q#M_ba*9m42$-uEb4t_n=|
z-qi|Syuqp|nMmku=sUho7_TsZS!KWM?gU4LZuckk4ki4|OI!y$Se!LU>|)0XsGA9T
zNt+&rpgz~;tK&hVu2<J^pgRB)lD*1Jq7Ft|{5oFolIf{qtKI|`FY4Vp$efQ$BJ`N?
zy0e1a!$!@6gdzU#9AWe`(0hd=`ODjFEH%})^)6S_rT7Rk57y;~eQy@Xm<l`-z-DFZ
z^tX1G)XxtZgNts`p7oq(q}d*S1`!`xJv-p&&0Sxn-Z?fL`QUhQq2;hw;WTN|KY~-C
zAY;tYb={R6knZ)>$gveMp^u>|B`nNyUUQo;P}tc)+0n%(bD|2t>l-GS^aY)%mPcHL
zua^0Qhq&5Xxf=}`DVbxV6ajC+?Dh7DY-}jE#XG;m-G}5Ub|$dV)+o-B-Z&M@vc{pW
zT<VROqgI_XgjoB>TxOi$hm77Y3|eAL)p+u8+!;=INDqkHsK39Wlcn<<ed6rcYsLen
zF}DMw*9R8MwkU0UHBsVlMX`4-?Y73h7qeDCnyzH-7?S-BcD$i^Uuhu_*8aV1eOE$u
z^+k9arC)aEIY*penPYcjO}bbl+55>!Ib9S-D^C}C{>=(OOQ{!<#7#+BV4;fD>oJO@
zowhrTQ_MPzX{xUowb~rtwAng&re3<qyDzUVRFFclu8yZPTW1b=cutRU<{fyL{TVPl
za)h{)A0G=PL^b9^c6-yA=X^!wTZ8QcuWvQ@l{3pHFC>o2+Pr}SekX@|@AfKgoUgcp
zzK9PVs_!n{m}R|~%(`<#-`W0xjv9<!jIi<`5yq-Mrg!Ir6OH%f>kak&;~CxzFdckL
z7)1+uX5_JJ)YB8~;JG};lJUsp5gsQ+%pRW&yP9x9hm+k>^_@;`m+KJo&EmU`h1uWX
zfC@uS6vqHIdrs)j{Fje4<u9YCs-#j=f?%aL)vgq(FnPMWOK~QWr;@{+Z@SHyUlS9h
zL#RHA;cm8C62w;v_Kpj;S)--vL(KF@9v5EUz9*#vEU~SXZy(JrIaaMkjC>gwb@L-T
zJ`9H{1+Q{H;r3Nk{MHc88pHMObvIZ*^;N!_Ok<yf`)P3t%UYR2M|%I9K*L&!JMNLC
zjjd`uk-#Ij(!$#Y>shUyla-n2mmw^LR#T-RWDue6qqLTry{gXnPkalyRMToU?HUru
zaO0UR%@^fMS3MiwoGnD{tRL0CXdyaUFsq(fnpY?8DWer!GQH0;V?@|3M_Rs;(||M_
zCJjRti|0Ga?vaq~yb?E}?M*1$^{Mk^JsvmjK5#Cl01UB3t!dvSJ3W0M7+vfK2h3-=
zcuKwR(d-8nXBru%slS;+!zSvOC&74U{=Sbi`Oqaj#1TfYLS=LVLa1dWgl!7O3{ecy
z=kyDh<)l_sghXo?M-Pb+VUnMpyDRI75LPF=-H+iPqH9SqlUk>LdIXUasc=18t}<LQ
zG&M2ClNog6OtY)C(W~bp-Y~pCj%_F=LxBc?b9WT9t_5G(wKcXSO5GXO%4pETvha4m
zx3o6P4irDwj`P)mB#@nm`@qO2oc2}U&L(uG3@>TEeL7XroO%ygQr`Bq0-z&sT5oeP
zznrGwSOJ>5x)Br~t=WJBuLLV@g47Wvr<`GOAulwn479rjx<TfsQm?9MM|Vi2Qj15g
zTqzUf#WsP2P-m2R9Xws*OsV5-QMSSE8wQ-Q64l+)kI5jMd9CLOd2CU@H18hMj7vi4
zTLlM8=aH^P_uD75?x9gF-)Q0<91{>i60f_fK97VX^m<*31yVpiKHxWI?dDDlu@p@R
z+d}hx1=RyH)3Hsp=+g+b+fS8RP6egJrel@mMi1QKAZMvBT<V}X=6^WzHGSt4>U<Rx
zCP5tBPAj!?X>uBm9VAp!Gh37C*m+f3-k7^9)RgDI4a>~taa8f~C)!V!9niuS@r?Nv
z$7jm6_obXSqP>=}HTmrJ<MhbqpZn|Ng^`9GgN!X+bK1F#WA)?pXdP|#(h5A$TzWE_
zVBh2tX%$SDS>W)IKh8K~E1k`OP6-F4pC!@-9VnMSS%Z~;^76}OV+&M1^f}VLnlVCm
zoIrhm+F{2Z2>@8gE}wR@96;vTP=Z%8?G>p|`s{?6_;5PZ$slcv7iZ=a`6K(`H?8IG
zZMnY5^eSKvxU#(w|0*@ucj1Tnag;BpYmF}9oxPdRj8`_EiNr{F?Qms98qv#M-F|*x
z?Dpd~^E7YkO|W;)vSY4#KbE=QMCThl(HAB(HC>i<k?R?*8>Ph|_t6;w%!hCq&Q8k-
zdfHf%dX^ZPz@+EoO<or<)+u6wUXgj0Dw52;43+mqL{5=knkw^{3PTa9ja@MI4{1LV
zk1ulNhT^OdL<Y2X>}F#*oD)?Ik;T2YtdjG_1<TmzzfNV}QS8F|0DNymzj@1B1{D>|
zxY6=sjp~$8UcnR9t5LB;Y06(ZN_>=%xnu@dVn>X41jP4A5t_EW54OnJ7S$^&?wwFC
zn(yFUz!u$itKh0a<!T}RfG<j9D4N=nsh~fOaD{u*lBhIHtEL;!s;=0z2!YFIDDC)P
zU?X3K30t-K7e5(T06{<yBx+N0SBNV_YHDg0>bgRY<5#lAjtB^_2?@>1XHyFVguFy}
zroK=DFHO?YE?n;_Zrw^ASeJBOZ+|vNhfzCoa3Dw`x?Sb4OC`}5p+uq)r-bBf$I7P8
z6``Jy1@)BgTSu>VE#D15JYsD?1TUS}>RM}(Z3sml6p^4Y<70ltx;*k<rxj#_Y?hg;
z2YEYVD7IF$Jsl;nJsRYm+QS|~d1ok#j6x{CpXVN?TIfvIe&hlN`jtv{eA}oYj;onM
z3*8|!V6I4yy7{_i1Pf>%?_nOye6t^S#eF}3*<%6<tmEtqVce!d4_{X`Ryvv)`ucgn
zM1|@yfg;An<Qd`DV{)w6_X9)TpUR^(AU$ibGKc!DiA$q*1T%)Hw}TqKqNb`-yp+dz
zMG6N9@1OU$xAB0vvUukXT4W`{%QGd`DOuu1Oc@<062~HG`?=KA@Fjpk&bsWgsvB)m
zrzG>)Ll{!~N(m)T&7x7D1P86rF?l^v-`!LsgSPe1p)Il5g2q)<yzkA^d5xxYoCakf
z6R3(V$m*hX-%R*=u}|4z&i2jR(F-NoGJOjei=)7~cFeS&dJ_3ZrCx4E1yR+Gv?crI
z=Dd#pulxSE@%Hg1#by?JVgswU>&hEF);d!qV_g;VI%-$;=f~%l89`syeMa5uX{(JB
z{pi*W6I@wd$>9p6JdYN;doaRb9kNfI2wc8R$X1&fA)q!_a$*P!^lJ1&D=~Y{3Sy#G
zyk79Ek69O47tAg8n_YCtnjBn`P<V9A{r-+uxNmEdGcgc@oz*%<Ywrtd10A84-2}C-
zgfEAd)%bdY@k{HJr{3JQ3C~*&*IW8p-h&hokT6E07t)xsrAJ3QRld&?Q(x6GxS_F^
zY6U1-ens2!fqwe7mO&7EFfD4bJ*&^}U*MPP_fpaN6Fp<Gc`9H{^DHLIk>jFUUo_%P
zlg&&EF0mo2k_=hGqe9Q34xE~-1;2gmqJy}QDE1NtPBrsO6eBn=*9`}*P<7LcJP^Z(
zY7W-MhVV%+zO!qG(n9cZf{e#21Vx}G0ws(0`x|Qm`Pot_2b54Qw_iUd5R=Db8qY?Z
zD?J^NGHj`waE&Xpa^+;!m*-_0)fHJH@!ZF#A9-sfvaOWA+tmA#_m*OF;`kFniL$<w
z&nFB?XbG)x=#H$fr~>Mt!HA%i+4=Gn3+H?r#&$aQ>HM1(zY3Qua{4dF3laDUuWgb>
z9_s}4xh%hzK=Ugvg9G%4gKQ?;?WfAxr>(w*6R7Kottn&s9OSYjq+Fy2G;#6-?gyeI
zay3)|*{V?KC|dPZXnK3(e$LVNVs9bChm8I_bfh5GyE}I?LO)sh(a_;@Zi;2{K8Ws`
zy~=MZpL#-aU!m$)=*{_=73<0Iu~25q>8FmKLt@Bv_Yz0S){d|o_rbi7qx}#jQlwk6
zZZy%3yubLBRm^(^C-$5u>wk1b{%|1B!>1uUQS22O>)7lS!8Zu|?pyU1=wK1FE&h7H
zeK>7!a5GHP+~2RHGexwgA`D8qa{W${&QZ9>8>c_SaB~`^Zq>a3FTZY$PaehRQbSK6
zHiQOBb9AcL)RO*i*5@juCPmo2cv?KI%zVSv--Vd3ig)>D3K0n*CZOp3;B(>wZ67<B
zp4Zt2@j|3FF1CV{<bvO?5j>MbJ95d-wGSvuYia@WMxqM67<=V3DO*9I_bs!-m(G9G
z@uA<nmF#4}=@5dn@c2mmuHo3CQPdoHlrc+uX*0LzxGz>}f;>s4pp}p+MKwIL8>tmI
zaLk=eplKfD7q}uEc6-*FQ&s!nwfEbm;X0woA%8F0+qxK7w58U_EzlDY?Pan7dns%v
zk>mTFxf4IFlOB@KkSu2wV(Q3T>smA&@uxh^p403DOw8DtAF@{=3(#@p4C9OXP1qyI
zWYlRz3?1oY3lW&!=x8)zcvi@RErquJZX}cbyn1kc<(LS~iJ7B5Rxu09G#du_T4xmd
z2L?nJ0sks<{8xtz2FrUMzLz7_L;K|oGOuqxek?TELECLyAI7>``?7-}_s%z@?0k)!
zP=SBpyyLtZ#U+*w`kTWp_ixU+<TN>QoPU@2<-Gi_^iix<f+JJ6sa}6Pkrq1ql^h^}
zRkuwToN9eE`MYP7eVRM0f2yp5?u34PAZjQl^Xa#_Tf~cxE=V#*H<?dwIH=g)Nz0LH
zApMh!0iXGE;*L)Vnrc66jn|r}VExz}Eyh}(kdxqxOCw4sFWs@3Z#VIPTEj1?Td$79
z!Dl{yT1cN5D?g0QJ90w{)8~Ot3Mw)d<%-_dB?&NjMR38$I?h5ik)gw6ZnVl!B%QFX
zc=2T<^$XNEcN1O5FA$K~v{jU;lxkz6(w7vWs9SD(p()rpG_R1D@k2Gg<DH6uUec3^
zORtX+eenwo%gf|oU#*OqSqvGiq<LDAxo|RiK!7sYunbXxDw9oJ8yz~OGM>H2W~JKl
zdJFwJDAj(^x=Z*Jp8!=$D@w(p?kY39y_=VAKDcnNjcM9KI1#JhjxYONW&V>&yu`2g
z>f+d2rII|5E|sI=qwg91f@MQHyu}hw&;ELK=E_T#@{YF0i%Q~2X2x=OoCYMbi08^#
zvEax^&qjBuZ(_^IaL<wwMRha(fUVU4^BL>=oG8m53+2C@g+K29)0vnThJ$pQqqUz>
zDn-uV3nG>yVU39ASRq_cA8Pc_$m<LdVHrcI!_RPFZR;OyYuue3lDgbwySb)^no@Hi
z&O(-EU+jUv-g;3$ZPgeoU;qw;^ud8!@_!Z6%?agpLWF^`szA$?aG+=6_j0=S?{JL&
zqT}^@!5JfV<bOB!|1)Ju!DkUMg4ml(K`G3kHKib?wSC6k8$mT^o2L3GJ*9C_3GR*}
zek*#&5rA7+@%Dq_pQjt{QW`4ZmflAt>SvhCXYsa55W6?qCb*kLHPhngZnH`&I;B1(
z(6WGdpF`x~<ei&u&)-o;_?hLRFcl+AqA&3<70DN{{W(}ts~?%YLqJ_|j#*!^eSMOF
zX-{U7asPy3a|AvuCKJQT$>ax7PJgNXsOU6$pJn?)uxxKS{fi)nVn?HbRHD{~YYA9-
z`r|~!Tr{f)9bG%FyNYAdZ)3hU9b(QKgF2;FqMfDWT92NSJPAm<CNWX{-WTmK`Y?`M
zwNzh3Dvj(2Z#lljyU4_7(Hs)5*_7S`9r8^%aG<)?D}39QMNKS5dlM4AzL4>}IlDVO
zX@t7w<@aN!lBPXd?dGTY8_XaAT22D%OQU00dj*rfs<7wIK2Dbz8Mv?W5M?`6l=Kzr
z`w}H*_mCtp0W})egg52)?xT?ztQs~9tY!Kiz4$~GRn`Y(oHL`M@_o5qlbK{Pyj!%O
z#F#5`g2|yMR!!L}O0uwCB(Ab1X3BqR?5uY{E2%&%Sf$R`Ig0tXmv2D@83}{3AHBw#
zp3ZMsKXKGq+q}IgN$v6Z2+MHHc+;sDOI4{<%l(TIjhc$@?dr#lb$O${ssTT}hy{=u
zaWcELj0ytCJ=tJJZo0r|2kXR*1FDUL^B40_g&0DBjj2L#qgG;OW@LZ3KDDZ~r+d##
ziP`etppPXjPKo(gsp!sBw5C$H{M!s;gsGwT;IC-oKR;Bd^Xsg+PA%DmqSS6SY;-2s
zG%8Z2)w2UcQ0pAbmZVO8#GS*rXtpF0xAa+RQEMcj;bP_Ol@(k6?shzZ=~mY5qm;@O
zoJB2K;vHu>Z)%4FB^CcL)hwO3do@TAs2Al9<Z)s>S(ISAXR6i9X51s0TimYR4);@*
zG+KQc`k2PUOnlF?5J!}xJV8Ih<yUM5N2PVynCnyGf<^OwiO#pQgfB*(bb5tS42DK^
zZN@j#Jbnufb^mV02VP2D!xBgnh$k>`VC>P{G;q$*6kk7dnSb{NvPw`q>ev0gA7NG2
zobg^>XZ#U)FDwR)eO>+$cW<j~oDfIL+qojo$BTWP(k3>`<x;kuB4AxJHO{0?M`3}K
zIc)94@n+i~g&wa=fI66Ud5t`kE|csqDv{hlrgz_NqkgC%Xoy5u?SXj0uG;*UtDsYa
z7#)$VJk91O2)}j@y#V46;g0#qh47Dq0=d`fT8JQiWBZR7e(-H@z1-yKA-?el+l$eJ
zqVim3jX^GFuZ_gdw^@RUTv!}rKBC!jh=_bu4eHXQWUJJUmOI>+P=SRY+^s)PApAx6
zgMcoH$Hm{2DD{`jGgRz2sfZV&{wp06O*}AZz4=Qg@xQeoC?AEq@z0yoxWx<li-o_*
zrkNAk82G!e^z#9!(3_E;2Ns^hlA;YQ|Aw%KO-;9N9=QHEIiX|!j>qh`Yc09pk}(cx
zyx}qC=Nv^o18kw9v(8>-Bn|boV6vEthnQWjl(um005H@jB-&Cs?3s-ke^<d*@pQiL
zSs!YlD_R<(pj423Ut&Ij&Ju8p5cjxa;s>>#dGx9YR}>JK`0VjH&Ut4t!Zx*<o2#pB
zs^w+fF+JLym=bmHMd;HmN?l)S&-=gXAb#!`s8nCn*Uzj`S=@($QQyiuWPfCI(898U
zr`@Y}L9(5i;+A2Hy)B+kkCFTM&ZYXJt2rE_dAi18h^O`o{Yf@HlTRL)TMFJ5U+LDG
z-4Y8vuo;?3sNs5XDkteMziu+u35bWXACdy<=Mfp9SW??~;~wf?E9e`a?akd?@Q>tu
zy_c~rmQeTBM%^utUir#+y)V}F_SES<IZg-atxko82OWl;`|||Bc}aaif%-$>A(~t-
zH5&Z8_>MDUN7L+j=K@x?^}da3M{T@hkzJ+ojLMT=Se!F!dDJN6Tof571}Gnd#_sns
z9mb!>-@goCFR$(jpnrBIb}PdSOq#B{@+!wTKYEe!77&43{*G9Q;(XM<T*frx_Lq7w
zwf*Mm%)UdHb&<Zsb&A9EnWL|}j^&1<bI;Tl7<xJ)ZHefHH5)`EuHteN%(&U_D9IsW
zKIMfIx*0JhiC;j*rZC(C?{-v(ux!);&KQY_bn!y(XiAbpTr89G*XULoZw)B!xAle!
z&I%Psro`0Fk#vz`bortz{RpFRA7+d&M|09)!1}wf#tMNla1EJg)pJ*yr8y|If+Tv&
zhlyAvqr=+$<EBR`XyFC1E;M~ak7<*A$xM!AzFEgViZAn#<T~n&U;XS%)n{a?Wn4>)
z7DpRq#T3EaavX>out|FXqx1_Gpx@_)vBQDqj$_B5?=<x=AH?f0OZ2S6h~RU5pneHG
z(a8I~Yr8ml#cNA0@Zr&7(`El6jlWGhc#r-`l!x-$3Y`7&rjYc@be(8##>@S-bjPdh
zZ$ZU!WQQPxdHBqWmlTq|bJ2ZE+ekLAH?eb^i!10Hl;rVMPQd9Mx(MeSMlFSt_=jno
z)n>L^QQ_DwrAsfnCPFYEyGBzM)06CFTJDX+9=ohl<FAM+v%Y+9SvQ@q8y7^MDrb%I
z(ZGi&Su<RbV=G?t5@^1Xu4sYrLUQPFx5>xl)}pT=6*2Ah5o=;(`VoQ~()D!_kE*MX
zg;!!CP)W>D9Yss$XY++}MX)Cm!fDAKe4<YdykAE^AfFzit$h+=d`X9|64$-Paet%`
zKgBH2u>`T~Ju5IJ)ijq37Wt1S5E6Xu&y5g!#RrfbEl#KC`HOW$aR;=PbT65nbd{%s
zatPN9J>RQW8rM%bY&bdNI1c&-r{57jKw+M9Sl^{b+g@VKTKJUyd_L}tsQ5rVUY4%$
z(;YE>U1&g7^~ysxB{1W_Aanhz4sY%l4=cx|K9m|@Gv*M857K4J@4lvUDBhwvh^lO>
zEHwGd^|jY7e2oBhaC8r%ry8t@3ATF)qkx1$s=M{?aV{DQF18ig@Hm&Je`AdHU((g}
z$V=6DgY)Xau4!HFQR?aw$HK0U+k1%)O$FIc%y{?N9A6fuSthvTr7+ja?D#Utth0qB
zj6AeH97F_NQ!kTQ^2c7<R}^!%V66~P3>5NY=F=18nX#%8d!*h~vkRMe!+(#M{87Q(
zcf3-*wccQ;0K^bfJYTiVDp=px{?swhXL^#->gl9mYS3JQLY<cvB~fA?%|0R=q>DJ^
zW6XB-zRBerR_}Of*OTnAuHIf#U)S7JmqNiymW4%2simu>^V*W{6CXpuIM`eldjCiv
z3~E7^RZ<MGoE;qNriwP2FI@1Zw0;;#WFqr1H?$+t<AT_ElLGsmnK#&SKwudgLa!DX
z%~IBuOPn<Qye(N;Dp{D*_-flj>&GOn6Bj}_1^?UkHvYMpQNJ(9&K%BNQB}bIJXt=(
zY_O|MjHrM6S?~P;+9Z1oipoAV+Q?JM*Nb!XU(K(#5O25&jt)t%$%FC6UTh+QzH?}=
ztK}!e<XN@)*HP&gVP-E9`bVr?rrNh|6Wp92jx<r13w!rn+=5+6K~<^Cr5f5VCJ=i&
z2Lt>epG-I)jR`tTYlke}&#UxoJfnDXmHY<r1h4b%IcR{bA&yib{ELyfzv`2t)H*ns
zQ=hSC*nb)vcEfNz^BS4=y+OT=I4fm~I4kAd`%kJ>Ef#{tW$3TJyTXL!_r+jO5&!yO
z`5p+|wC-yHat9qE-rDP)Xj;FHMx6Pghp|Q@efeF2+}}BMZ~i5O{i6F#52ERKI6xv7
zx>xV8d`kENc9{VOVker_5FxhbQWwL^P?v_klqcZwms~lYe2i-juP|ldKoH`|+`IJ~
zlO`^^@dvy&ryxkW@LwE07UTY1T(94m{4dpP|B*K3cX5S(V{wl9FM(r!^{&7_bPV<H
z9PY;cCb9f44!JOFeit|PcOL)Gb;*tojCa~;KfF|Q=Teyuz0Ve9oIIZCq+Cj81~yAa
zVfa;XA@6^c_uWxVZ`-=DVL?DadY29YO7DnB2?z+%TU2`Q5K4%G^bP`2BVB5w_ujj7
z=@6Q9LJcjx-yZkuv)$+JbMATX-8bGC@BNXHF#<_e)|zv!HRt@kZ$+y#GT<j{zTb}7
z@H9&P%fS*pRg#hZt6$Eqg-b1vfI{B;F~?Mj_D+E@iqwBtcfe~BHgR5`@X7SbQn>-X
z{u)&-K?hWm5ky`(uqAF{W#)#4H~ZPoUv^~NexLwm4;Hx_tqf)gV)6USZ+DEbOW1kw
zHoaQ2{j`^?u$l2a`86)8EA>?%STnYJO;S*ncns=^A_(!~$mz{8cMG~vFw7SoW_Nwk
z^kwF%x{=R=yJj@AR{nqa;n5M`Bvei~%ZM$XYrWs2oeY4JBr2-itb;R7F8}_z@8~_)
z<{&%uA8Y-KF@DB<*|Vn*BNsOG^-UEHIaR37Ey-t344502BnhGEtgk0*+lQx<J3nPS
zt6o@0_l>ZgVED^PEPFx}s?We2Gwb#wl_EJahc$bAFz=ALFonUeVd#3x0Edp)Wo^TV
znVnl$b;rDfu)xupEpLa@d+k4B!>?|oJu}s*=z>yub|7IbV1+ncGqNJZz9$@~td*bs
z1cJR&J-vIU@Q;DiATd%Gu%Do3D<{}%N`OyoBJPJ}$j*&h3hoSF^s@~mV;@ZR59tXu
zkf8mOEKh2}gIuiaXavEJcsfF2-p3h(j3aN>zy1lz+@4=4`sR?*Ne=k8<(Id)WBQ|+
znRO}cB5EOJu|eiv1p6;Xfj<obuCG`F|C_5$Eo&zR2mC!;{qd75W*)(Re*1kBPO#-7
zyjcMzfAcY41czQHMifkan=)LS2WCmZ3d(&Lr|15kDH9p_BynzTC$}w(uFa@0yLM8<
zyEb*VgvPXkoN4F)9GsZeT>*d|Rdgg&IAEk0lq&No)EI}+jQVV34S;?X6>b%B@t>d4
zk0cmQ>aMEMJD-Ol1behF^6OK@<#@DO!>({k?Lo8EHM0~Vxms$6s=G`4Nnl0+3%Io<
zR$32M17}(zeUxft!~6a{8+o%A(SgfJVg4?VXunFuEtG2`J>k`3=p^cP;oxBm)@X^I
zr2M#8FNaet0$`_81R|DH$e<p>ig?%b>PKv{92n$m92gb!ovj)0p;Y5CJNbE*;JdnE
z%M)O`s^=wL14N#rHfcc}t4!e{F){rw(?9tHvwpt%Up@W+y8H?Ko42L@BG>yua+mh<
z`ov`89f=zkoS2A(Dls|ctXwHK{I~UCrtcVE(e>W1x%%uYy+61~h%wS?iS75dyaAvd
z6wrWH3e(a|^Aj4Sih59GjlLNxzN0w)a4%w~)UBDSZ-^&82(@=XL)Ylrg5;}tp;n^T
zZQnE871FV<@zSf!7%v0#&Yc|j664~qB+jsiXhS^k5~@<<CNi(6a1%J7G`H3H9JU;d
zx>w2&Djzg}<Cy=0qb>gj62P0I2tIfbaWz_?))R4Inyk+%KMrTy>h+hsMc(j+g~|xD
z9L~Gopq?*xMNJ#(1a>Sd^qf-In021-+U<cM#u>H^G78U}&C(6Mhii6_s4rfsi!rNE
z$rdag4db{CgZ!16nwl5Q)+W$7`5utoGDD=aS=tfI?l@uZB!GU1yF83|sdTK4S2D<8
zSjH`gUVD0LQQ+N9$J1-Js;TL9luabGB@?ZPJJ5{gL<yvuOE#v~V=m;2iP?RT2lr*W
zuigtLiye?>5#|p_gW4Ti4bKUTdzlqt!rl&>eH#~->yPFiS!=q_o>fA;-*kE>($Ue$
zuXAN=i4C0PpWjPe-_1Otw7HsjcBq(k_%ShpbE9)mW2h67sC>MEHFGdISA#k&G5et+
zu0k;0Qym*itrNP18B#Euocr?e?4_T^yh1)&OSDj0kk2NYEqR<-a=u!W{7@%Y$Q-i-
z^K3hbURPV!g%zIne4B2io65^wktXLzHB=fbyN3^z<eB*4#Xyp#Hkx&7R!3pu%(l9G
z`=I*ZG=E$$+OB6lCuMsXK$XMXSN`5u`h~>sZ@=c9t+kQ@O9NyBNEZ;N`=jvP8OaOR
z#=Gc@fG3jyW8PWd!T8kUb#F!Q7w6u1edcd2krjzr<&8wSn6aNA#$KRcUJ1Ws4R3gh
zd1=$%zi(jB{D%CouY(g^FqyAix0|H1J&$+n588VTd{DjiRDw}4$sFA|IR}>&8w<6^
zzQ$kHn2e2vl!Z18DHrP<oTY@X=;TaCZuLB_?zoeGmW(!>{~*lFeJxHsBP4r~MYUF9
zrdaEOyu1C=lm=Qgh0VY*3sbrwS_`{_YZf=(p^JABETPR={vgic_EsQ{_PJJ<NM5?-
znUCz%^qGMNSKfi5zJidziRZ&EHUW5o1J(Z}{?$sy(-Wr|GiEajd=ZmwqtN4SRHM3&
zgrVKD`Uk4I<OqO({d)@*0Jt3?-tW6Zh@7imAVKm-y}pRuY)&T8_^1Q?jHp2eLnX}u
zB+_}>uXdz}u{=fk3Zt@WlM8zjPo%wiBuwgI%E`5LaS2)iXxm0jJ+{2S>zNAvdWnIY
z(U*kR%vy0m1H&=B%uP8?TO8kvQOL^oVz*5=2LpG#BsQ->jjbdndGz~IWtytB-yQHU
z?az9@rewLkSabh?E2?1Q?8d&O2ldtzY{ngzkC0FK%7!4@&6`!bnniU=DACQ@-t&I7
z4XYFxvHS!YGfqDDo5mlKOO^>fqMHthV|;<bbs@YT)}HHz1>pWHCkRz@3Om0t8^fIw
zxxJ}=oW_Mye%fNnkbwJ$1QS1UePJB|-)Kc{BM8F`kJvt+gFCx+6dB_d`J$uyQjXYo
zJu+BK$;ib9W|TjtH!~@-EcM8ZkfEJGvR3x)og9`GGOAP#3LTSFtyDK2F#V&xwm4H3
z#%OoOL`w;PTv<4MDb=e8*JC=nKO{qJ{BN1F3~ZR-Yz;u{lq;%2oPDv?KS5jDIvU@<
zB&c0t;B%5^w{!Ez{}xt9$KJmI`gQ<nk@eb?nD}0f^w^;|k=j_@8z59c0|rRqCLX`g
z2vsYC@O9la$HgxUFYlVW;6-nz=I8xD|Imt$F)u08QnI=p(@DuXpqL(c1@eg~G~BA8
z91`HovS;_9Kuj7nI%GOTxXtzYoVxFTr`K^mf-_o@n@PR{;^U5V{3gMD!Pht*-%jcg
zf2<mzb^bi=qywu-GSo@+virJbI6Y5E&hCr%gQfUIigT{;F#yHYWo5V7cPgohv0K99
zZ55FVvE^G2M--Gkdi1q7mfk0O|0U~z)2BV<#bizV%Ebsms0Avb%|mJK<AKjm;SAwZ
zef+HF!PVEM8a@Pcc;hsNw3KdmGgOs_$c)=DRh7TDHTpQMBos}a9z|-t-?UyOMC)vt
z?`4Dz_`r|Au}H)Z$km;n*WGXv<iUO3@V!`x!jD;R)zy^I>pPtp#xr>o!3ku9h&2oe
zsyeap2zlzwf}0IwoV8Gh0-7bL&IreUs%2nLuRgZFmDoo!Fy&i5Yquc=DG0;W1!und
zu5TB9#kuE=y-fAXmbXu$$kp(7KGCh#TVPr77@8!=_I5(3{g#iv8D^nozsuO8`6lqY
z2*DXbH*QJNcX%8a0BJUs25jPqazRsE)||KGW-=$+<Q!=3h&q4RiDZepw{@z#lza>t
zQy<=j>-_{ppLd5P0ca3i<nZn?^!gkg8decEwK5O@BS}mHS9@A$f~c-$c4^u5k=-Ap
zi_oRtvkTeb`|c6~!#~r*4bWby(zDPdb+gIKTXc=qdv~Q<Osi4fOZ6MeXc6bUcI;u!
zp80Ux!&0(_8P2ii-i9-G<t2^<)>3AFplQR(@Lnm#w27#M?Uc1lQBhd_h-~FT^Qk^E
z<&oci{;0RnBXVYs_xWtn_D>K2R&n>diz9RXsPeS2>cBv2Q5MimtG81|n^%`qk66pB
z)JmI(ebYD2mWs@?mYFZlWH5KAL>f~31hsgx4HwuPDZP@dFD<R3lNKA_mwS-q|5VQ8
z&LmYR#hJ7k#&6-%g&Yb7<DcJ_=dULudsAV~bxqEJayq`!X1#QE|NGAMv>m7M&QNbU
z%riX*xn&%dEye&s2DToragr8EqUAFASe9zOKic*=-Q9St;s&)A;uPCx9}n3~$JQeF
zH&O}EwgIL!;pOQNi{qkI{zTN2b_N&E9e<Z=3^zm9g4a0Kk(6G_-!7zC+Augs&XuC7
zW6mr_pSNMlFS3I3kvqqqg=Q<mZ+P{-x-C#n6%91pHKKuS5A^Rmh))JD*dYG!L!6(W
z?vMzqFyxxnhKcvhrEsUv7TBwe@+{ng`8Z|4N+zT!(yDY<h~=g%vi$g~S|!)I#N}X8
z1FIMJo?w6%UhbxdK*F(SFPz2bbVNe1FA(ZRw@fHZyhuynMM)ZFyEby%bC6~ba{Fa}
z)sxP?TMKO45Zwz)z{pGreuAbOu^;6ibWn+H>xBlEmm>PZWV*P14wRW+qkDQ($X}H$
z9Q}aydp6*iLX$N$)Uufia+p-}yDPSP@wm<`9UQzVQXZ)rDYJ2DlvHYZ%th@bHCKF{
z!vJ&yLDwnf!0YiQ34)^6{N96}wl7<=f_w+5q6}}K@MJml^cx#}Uno(qG26#EBp2Mt
zF@JGFNAM~9_J9!5YP^AYgGM5;y-xF(!lWX4?sa8Fm0b7^CRBX$eW)=!UphMBEm(-5
z#f61%Ln|h?r&p|m?MTb92}?JzY43qx<4;ovW-Yus_#0dDcX-nOOmQ!-ppRG<yl`bS
zaa#;#v`{bF_G%hR^fF0x<fdGLz+!1nzP*8*DSKnYs|hcha28CA@gkw(cblE%V(^pl
zUBa7>uM&{YhkBxN#krVMyAG&To{b->uv&@0+5?hrM{M60(`(w$f|6gb$7W^CUXE%C
zJg)EW+aeUo0Mt=BuV~1E84s^EMC`?1JQ}10I`bS$#ZFF(o7-={8O%bAm8|S{v}~$l
z<E_9wC3#;}FBlqC7YA`Mwn}DC(E=%p)n05a+0g7k741}uEWIz2A%xGDqZmzawm<39
z*039Ks>MSvv}<SKo&q)8Kt+^c8T>Zxwjp_BC!=vb$6cPU09)}HyU01={Njo4u1h_x
zZ2jKWSq7#?aov_*J=OS}5;y48{XFl@6DeuQPn5#jhH|KFjusj!jOXHf$&XEk0;|Xw
z`Lm#^_~mo)k&ZjhD0@$b?7>|fw?NCuOB#HQ0M%y&E7L>b3iLwPQ?;_qJ;p1Bxx#X0
zAfKL^k)Xx0uKdt@Ekvu^?`-}(!>1tUI?XMHVq~^A#l{2)1V3%0NKg0Mb`ig6BA%X{
zMuMS97-@HPkd84u)P#IZ9G@c}4e{OLo0Z+vMMDAz!paLF`f)uAlYGa;EhMZ7FC5yS
zi3aDz^mO;2Vu{r~!<9!P7hS=1c9$-{O@&^V1a^3CYG-3g`*ocrl+oD)tN~V24QvH9
z`N&DPze1LM9;&0ym0KVH0VI@Yqc3uKdUAXd+|=#Soh}mJNFK=!<Ip~NE!6?KCfu=?
z)5;ydgL&23IIX$u<btBK%FV0}wIrNr8!F8Ufo{Kvo;mfDa$p-|yvTTvqK;ho3A%X^
z97<Wd&rf_*3VpR0j<9mGb6B)1SIWZJ4(eHiZMTrGeUzmTc==uXdxP?PQW4qJCmth<
zgRPpy4QQ`KeGA+1#1})~Rm2bD_V_Pe>=TX$adwj%e9>E>T8??I!KQnHEw?&&-VU+b
zG&@634;jq2^%KbMt%dU|(Y9h8*Y|43;!wg2vDX8OUKZp<?8h}d`W)rsF>za&r=|+5
z^BsV%y!|_m;&(p9Z_odfQ-R0aL9M7&T9RCn8G6d`4jL9=591hWT*MiMuL0rbWcatL
zX)DwSD=RK}xh{G5YNA4GdydS0?k4%W6nzaQHnwuN={U(%Z+Lrk_CtT>$5{gL?C=nw
zL5x%x;&fB;^04tjiFVJ|Lh@i7e!dRW1h;-5hb2e#GqCSbUX^F9VL(%}U`g^%U&se<
z!OQ#&Oal;Cvw$qpsx&>~h!kj{e1-=6?H#>k7{Oe~cev&E^~99+II>f8%ODAnzi68Y
zlx{7R;~Ms!4GY!-C~?5JfiedKW<kS@Y5xo`;}mIItO{Q$u^h+nmj}fzBtj~yr1&^K
z%`-$K({L1FDgmQNoCqu2z2Hx~%(hYNu*u%I+SN70YUL@+?DyQJ{8>NaPtfB#9?PL1
z39w1RbB=R%jJ9K?DBqEO^vX$0IkIM=>o_Z<qsD75pCcbqQS3M}+_~C#K{usxafHC0
zL9om<1`G?SrKnqKYtM#Vl%A1OsDtVJGG)yf4oqJ5lHZ7uFa<5&r8zp`qa|pd{UJd;
z#y^PBI)FB)qf^t;<Q}-WMHL7*Y&{{E5l}o*Hx*mnA?OfyQUrKc7#M96i6AMVg@;{m
z-HRwOH$v&h+GTGZGALf-APl`)DP(=G^?LAX$51yt&iW$pk;k-g(Q)iq;kM@wi-6ou
z3YI*D<5M2pTyf{zjcKP(eu8cZ!~iHK0O|A_buuX9A13v)2OtAS0Nfzcx=={8h)pXn
z99-N~QWcZ7b7Nmcq4*-Zx+cp>disp4ueQ=c6OV8K;+-U(7|ZhJaRWt}ui9Q^U|Bx-
z8=nJ>6oVqF49>QR`^^s`D7Pai^|@rnDdh)_SdH(mRN!Asdx;M#olk%(;_^20WF7K9
zmCaX98thId&f_JOGz6@e{W`l5zgnJm673Z)QS{AVZ#L*iy9AXFAWovK$oI86N#k7D
zVl@digLtb`RQg1<4D?V<<tq|*v`pm|hUoZX$uJ)W8?sE%M!Bus%Bxafm}Tm^EwOI_
zFLr&NT}S<^YSleukH^BcV1u6f&F4L0(-vh0G4;q@?uQPaLR&)JXJOoS;#2j7<s%Z}
zK*mT392Qecfx^AwZ`JyLoLJ<D(E@jXHyv7~otpxh(;BJUowj+~G>(+lveArFY{afM
zW=oNO+>~A5-E{@<F|n!2hxzMe)DV@C2!AgAKrd-j+t5SL-jGf5g6$$3n`{*Gy;?C9
z4r_~hwvf8QNI5EtWe9Gw=%hGdMXtics-g_j8ReM!2V3mdLf3}PO)JP&>A^pEjMm|x
zKS!ZK2p$FQ^m(?H!voyaE=_)}?ecrc>^^PBpqO^=2&mR#KnnrYCWW)BH$hwnhmDoq
z&}yYWc2%ohky^ZnKC+Zh(}<3If0SObIh;do5&7YQ`!a1&GEi60Z+XvPdmYV;;7UCh
z6j7mWNMI;zfqh9JwQ!<bh-Gx}Z6`|<rg|g#x{!(Fs2pj*my$VGhcw>K+G2mzN3}!>
zk=@QZ&pdN()Ptm*`u^j5{-dF0IeC#|U|AO;qdWWveBJgUjOVk`ai)Ew3tLX?Y=$d%
zc|W5>J%KDNvN-A{efVu^g1|cB1qjuJG1}%Ns7{nRRD$Z8jor9F(#t27chP$6y{x|d
zRr`x_Q!+IN@3bR64Q=hyn8p!2Pnk;*wz2b6KP`i2e+lW+XW+KWw_rjVo>|yoY@8(@
zJMa2CY?4~!tUoa{oRue!V<qj2{Ghh=ERXQn7e;i`^;GtVUro7D-i7uSMtX5Hl?C&D
zq1P(J%Kbvr%)-vL*pM~i<piUrg+#{$T1G7B7`g(T{Fv$xqbIW4H0V!poRh8tg~%Fk
z%iDN&zNoDg6g)mlX0y+EJg2kq<O5+fBzEETXF#}-tRDt>sHUtfDsxmZC_7rd%{nzv
zTmND0(|)a1t?q73MVQ6%uBYx4;#1?VA$&Y$@kQj1ub6N>z2)H|W>4r&59($D$TSpO
zYVrD((16t;Wh;Wfn+k($j~kzgXxRn?#azO6a;<nNr;(+zoQ0tWos?p2UGaB@{CnPt
znQ?s6K>DZR?cHp<BzT$%!Rt56vJ}}t60QqO`E5mAvC4eZ#c;p~pX1ALz03-CP5y$b
z+(63sK_8oALhQCzFTTx}x*OXtJH@2gC;U;op|GrSR`<Nq#N~`ON%Gfm|9O|;KYPDd
z+nS2&+Xg4_g1uQV-CM!t=Wgg~9a~pwIWnBydlckGnvAtwnHl1Vei@T|^$CO-D)JMg
z5V9l?;(?_OAL!etSg^3+?C4Sy$tyaB3vIonT(ypV3@zHCQHq&Jk?*`7&uCXzSr=Ot
zgEiQh@N`*gTPhyS?Z`mZRzf&kAbXzrr@em;s&ao?f5rHw)CXwNHrhaMCbXc>)^>sQ
zQTa#|*Dk+Jq06J;_^8(<;a2g{_Sddezg2EJBsoI(&=S;9elgI~#xNgrY<i*+%3!%J
zj$zr;j1D4Kj=fA}55RZ=vZOml{A+pcH%6I!PZCwOrqz?QRuz>^Jg0lpCIvs`mqVUU
zZNh}h%aO;16BmPhcE5(yKW*k`*Onv$oFi@lL^v&f=UaFcN!gY}&35Fju&9hTvTID?
z;$Y^wo`#&8&8Pexj|=belto*uB4^NO;Q^6Yuv)AZw4z}fpZ8zPL9GZ!&ZSI`<PREV
z+D&{xtaoYXe;H4U27>=~!ubE<EwmpB(_=r6r0(lH^EU~WAGretMNi8yQaPn^lzus!
ztSfwbFoz4jyrYX55bG+rsO64h!3&7sA0C6i6L#%a-vqV4jb$%4C>Sup-WSE9Eg={p
zJ0PnW6RM-m)Xzy~uIgr_?o0E%=0ngsdf(SD=eTBtZ>feYX?%4VAe6Wv!}nH&tOrTe
z{5c44KH3%(j&Whls@u7W2tzGZ^EoPQE)b_w^S|2lpSEaMXRR&72A3)zJA#%Vy?oOF
z9Q?-NKLN#y|Husgb;pT5(aJp<H9N)j_I1~WLP<%o&#mQq9u(oR8VNpMy2U^uG0$*Z
zMApK+%usJ^#iWW1EgydK4^$DYlBI3?oJx6F)NnW}*Ma33=d#{)F>pQGSyHAi%#2%=
zgKAUx%W}qAzwcTL?i)Siw0pkqUz#(c?cVeWJ4Do8ho9y49??>g%i&B}J)(;l=^)W{
z8IQ0ioNG1m(8+nv#dyC9vP<&PUJ*`;^k}ad<=)xeF61gQNyOzh_7QY74$_XJe~`@j
z2u$Z9_AL>15yxX0WW%A;vPm>>KU9&yM?(i)_5>7pySq8h+5D!;Z;c#GV@nX9H^sQ^
zVO!Ntkaop^m}O_S{7v#haT(?WpiO0tbYqSxGMubGWnN6Hin`n9Q5re_WG#2KbgK-{
z?Nxc=xzb3HZDHZTYVQN?hs-$MrZ1l^rCKqEapANXK15&V)tQmbot5K4)NT!w3YiN=
z_pd}cCNRcSk~1b&8ZFV1SR|^S(WDg2>8?)*AK0K$p9h`5wmu83HBy}vgiuQWikwyF
z%t<z!Gb=h5RjQe=FSt*pJ_F|k@D`3`3W?s0epfV31J?9XVWn=<rOc~u&85c3nse|;
z=w14S*ADH5Bfu(MQf%9m71|yTFTT-pVALYyxb^Z4Lzi7uef;Mwj>Pm&A*5PvS`$2m
zhJ7cbL{H43Ww~}bb4`UA5wA3Uq<?t-n-nPMuO7dM>f~Df&b7&BuO%ilz~7nc)GMi}
zfkiP$DBtcdvKJy3R{}7HOo=xyF5ycNz>#etsP_a|0)S`zgE<?CTr3jrFmYxIXzkz>
z?B8Yaoa72~6%(5XFgIdnkEK-Nu&~|jJ`qpC682xidN-m0U_Z(nh+3sjfn*1H;Q$D%
zC!!NMe!x+WSK$Xch*@r|{DI_XD9eH3F61I;Ykn`zob~{yWQR)v$&1{d1`;|XcOgqP
zh=q-u1F2E>&9kTvSPR(ZPf(OZ^02ok6!CP}-!~09qB&C5K6j(Ae0JtB!Q<$kpxS4o
ztBf(7!mIf|Xeo{w@955IV~pAp{iE!>nsdU3Jp)Mqk7#}pGcE4Wsc>2pyz0$vWU%`z
zuJ#-Wfk4OXVK=PQQ&X)jB8tlzr`*~+NI%H=9TMC#SdWp&a>`YK+wk{kX%V<k$Zm45
zQTo4fRS^yMIM64~Y41J1e*Zfr@oe^asq%FveLBJ!mUzBTWT%-bvD5k7Hy<{*rkCcR
z{CV(|`Pi%)YdPWjZ?js|jiX&yvZs*y60x+D{KbpS3usjRQ*%qlM_!u|rFW^8de5r{
zg*tc#bt?<JJkctF)=MKt^Awix$Hne4Z&FuR<(ogO@|FitMkeQW$apo%KrUp&Y)<R_
zIOcwWaOWG_t0g!5aP_8?r)?{?i;t))fh8iD+;oJ-O?OP?S&lrXi{9PVl64F6-r)PN
zV?zBg8Go$H0E+E7QH2>EXe6SrV6lm+n0|}I7i;d0xFmzZ16D0R@^erPBKUh5VDYk$
z>B=@XdsiBT;aq`wty5anX)ie1Cbg0!$fnLFFT0TM*=;WDn6nu)ekVg-c~x~1+_bH|
zjrM%$o>2uSnlJl0n{?>J-)vkbgtMrk$~Gklm9V`jrZw<Uy|ev=rJFh%d;v&oqbV28
z@N`BIbB$eRolTH3yoq<^n4?VtWxe@Fa|(1RJ7SGxhI;k2Gp~(KYV}0VlJ6#VjW!5l
zLUcyAj|%lVC{pIqEQqA=+A2x8`5ff442ZjDh({xvXp>lkyO9azUw(oDGeVEUkzcd=
ztsrrFRypmfJwHL}UmW*6!BZ!*b~*9U5-EU`Mo^J6<6eDdXt^*S6eWP_o6)~SbPGx7
zM2ITbOQ=15%vS8>jAj%8^f+ll%b$2=J%3Y{v@OW22#vrI`jni0@3H#p`%?|Z>G{})
zsl1RGwasIQ0d~R=C<5djO0F$qkFauMBD<aaa&2?uF|8ulf+?TDFK`PLH_0ic+Qc{a
z{7Ar5k!t({?V#7iYoEz$);hL5+r}$g4H?k38F_l^ZTw|!yfZJpmW1LwJ-yRpe`}3O
ztN(#o4l0g^WF<{eNvoDqTzvZu;?_`nyBe(0u)Y@Y(h@=|rct1;J7<~7H^!Ay9ES1%
zbJ^;kzz;I~-Z~2AvVT8s^^MYMpz-obS{z4O<yzGE&NQ2HO>uxJ9Ih(4*^c+~<SjgU
zukF>E3KG-m;Zs8d3w6J8PPwCBs8gh4y?ePUc=7=%>ywzf&Ek?b29G-I$VIn8#*eHx
zJ+;xUS)RG;0Ldq}h|3WAq-%d!l85RbQcmos0LY^QzggB~Ca&fd%otj}5{lZ%w#ZD$
zq$baNt^KuWIeEfYRd)n!M2qXFnq6Z-ZUYFTk`MaY?_=_mfU8MpUp1dU!vHdUyRQN|
zb!+Az&%dfjPVI!2v?WXxE$`4fx-O$*!pnca34Ves3ng0wrlL2GhoQj-YBhS*b~I<$
z@l{t1+?82CQNW3Se3IFnCDm$Cmm}srN}0KUiYXw+%;savh>iM)U{*`n=h0a3`fLt{
z-{^-OiI-X_8WB{kLSm&AXm{k9z-79Ra(TL6{Pw}?MOk|s73xjIe~ywh@gWJJ57X|b
z59=~n{Pt7G)ED~rme<(2D_0v&i6$EtAAOTt0|Fow9LpSmQRE{4ZZ89M0(IFSBzbxn
zFjuV!z>%T`?%a6#@P9kV{#QXAC{q3MeRMxTYL5~9-1YE%mQr|&&S&`G1Xk!L=(m#C
zuOZ%$SB4f%<|KJ~qOt>2S{P|JWQk6*PLSB=$98}EMH#<tDOMfk8CV8<pgbe7ehC!n
zmVGbfTi|>Rz{b&)+W!-D+w?uaD1cy=fEpf9Qv2oGq5TiwZEpYo^4hFq4dfyco=c{(
z8b9}+rZZ0wML?j)otpTeVxRbqF5`L6ZMu8ts)d+v(TQkPee(FA?{y|D(nQaa)6aAv
z7YRcj7Df12w%OF9z4L(`N!;ulE(28UW+yJuz<Mx@1&S#y_Ch~AF`&+1`RE8{0nQe=
zVu|Pt4qvvVyiepcpI-0_RTRwTR1R3LckEp_+*d8swBZIO?7y5o&-q{H&wc*y6Zi)M
z`Yh+z;aeR8(%hTRw<A)oJLmZ$oy;ow>ku^h;P&ks1XT|kG;`xni*%mGQE}u7rJvst
zC-9a<eT%AE8etjFcBuJ^+8Su=9GAcysgn_}e9wQoocgh|dyFlmSYG9gQP;Qmm?Lqw
zCUX=#NI>~MW4-^}j^cwDN<%cA6NnC-g6VAF=wz2SO`J2Xs&oz3{=_2^T~LtoAF8ss
zHg9;>C2zx9`p|%Ns5OX^3QEv4jC0<Y9XozLUWvcrI-Q{7T9%y8o_~Y3MRaq@OBiS=
z>ZwH4NecS5K>ewiz76srEd8Ih7a#k`#|nTH91dV}u?KV2O9*nzC%uS!R`H2}W%TJp
z13UKv(5x)}fRG`wUaA1v+MY`9Y2mVMdhpUy@`%$xw981`F)OHf!BM#2)G%)346<UE
zpbYdp4Ss?KfHm9{=V<k&MRWVnwj%bzl@>WD2OoT&RJdExm>5`6q&^tU*gW-piSb@_
zm&6;iS&QM#;R~TeWWb}w(p}CYmJ;XpE+p@lZt1N>pOG~s+*v5FmbxiKyextY_p&IG
z{ko}pd3k8w)l)jF_|QK>lnm!BPqmP^tV*HggqRL0f+$cf@W`|NrQTh+<AgbbcSjxj
z4ykMP&n>!Lum$lyu=}TD$Jlbf=$p<m7Uy#EDg!QX)1@5>pl?rUOh<NX-jM1Vpc9??
z`y6U2q)sV?Tb9u}G)&cdV-3CwU1EBRRm>$38l$i4t1A;%?z`&e>67g(%6(Ga6YBUz
z3dpmMM=cFf{GhO|kq9c9`~JN@<y)(0CR|XTmF}wN68Wx%^DdF4W~5Z+yo&fvU`)aO
zdcOm^-V3Sjo{YOhBlgR#{26|0fYTv2(OaRXg}B_CXBVOfb*NpFhe|7g#A51E_v&W6
zMbY4z9g8i3x@<_#>+|;I&UlO~Z>Vd*tkWW*HHEh&Mi<v{>VxhBk3_>Z{@b<`u3^T#
zc`f5_aTv4RR-nCR{6Nnr=mL%eIKlgvbYVTEq#iwUwXxaj0_(INi#g0(1?(p!1(ZF;
zUjb_$krr{cp%m)uw{C6*r@OmGW9YghwnR3_&&6W}`%NgQ-)qPctZ+PnrMyU~3wH#%
zb}w4~378E}oKPM$Zp{?y^HBeJU!Oe)|2AW4OYKpW#S0IEgAl(@Q!)?5wwZzI`SY!&
z%M9Te@C^orYel?<db+Bcx^42sGBA;cAmZl*plhG6iL)tO;uMbd|Mjt5q!yo9z0sTY
zBm(PWY3UDXBsd2Sa8msIueAZ*z^#9W<@>+#KR?G#JI}da0Ec*a`0f-?&8D67FuOPd
zut44u7wkvGmz|dhfMX#X&Z90)j%peQu*a&{-Vw>QVcPTK#znbfLtrP8hy=>OfQ{a%
zm!X~fWOsT(TYYmJkWCjopOpL4hwGH>9a8wUOle!>JBj*e3Z>yMvp%x_Ow@E8VHsCn
zd+fsKr9T`fBxwSGIS+kM)lV?`;uORj?5bYHb|yoR;s%mJ-B=@)l#SupBQb(Mee|#6
z=Ge&}3_#q;E{kujm?J$GC<LmhV&04tUmL0|ZlI<Lwo;{^g!DS%OI`N?U%z_=zkaW@
ziSU9wMs2S%05s;@&#he75VsF|)~oIhPPkr@<Qdq|DPFrnf0s#*j4mc|&nS82Vko3_
zYMa|%+#tsGjJvbfXh{3+s{oPQq5ApfDHU`5?(PV@pCFTU#KAhj<vC<8<4=S2{s3KC
zIB9jtyLh(ek62j0;H3TV*=J`&KYC+TBdI@;X+KlZ|6XjAiG<<I<H_j$?xITF%Tz3&
z0p$a~Ha*>)HJD{tWAdr45<42LvsC>X-(tC@Qjcs(#%73*+h+#UihPLjDvjfTx)n9v
zHHfd-*_un;KQK@e!1lDC_iGsLCh2Zw=eiyqNb)q691fly24F9d7|nuIys7}1fHub;
zS$z3HsdJ*Gc7Zg;R}!Bv3&eqZLsuJsG|wU%BRhz4^@HVjvDNM!ezg+xP<QHeb7Ly~
zS{W5@AM2YGdrOw|{<cwUm;PHXQH=W{EiF_}rD}{%F(21%d)87aUCQ01LdqmNtIf5z
zplHQl=AQ8#6Nb>e#~W+kh33>+v&b^%B0Uc*GT^=54XzvGI)-SUe0PB{BvamjRRdzA
zvT6PoBW3-?93h?<w?(a1$b&fyWm`?ahwQzhimJp7gCFx&)zhpaoVw;k^l_%VpE>s{
z6uDN`Lw!RsFbs>_L2DS#B|zPCAU<O=Lnq?pNC9KR=sk(#&+WVq4!Az(xExdvKJ(Ec
z9zH0j7lj$Dd!B#wD1z~MRBo+U8QA0o_oBHi>kA9YF)q_NJoVe-6A}-98Pq@c$Qi@Z
zyw4%x_Qn+T>iaBRiyGU~*IW;+aC?(#^}<R-$Qeij<L^6PiRyiQIsUMYq<*F$j)+K>
zKMl-yo&}>W2i%NzpuMM_B0M>Jr*2-uG2+iIDEY^7YHV;+p7R1`D6w?HfY@|_r(AAj
zT*ha^2Qwv4w&5)iTlKtH7(GCrw89d51WT4ao<G=;bR;Mo!@8Z6{HxDp#rCzr2dgf-
zBr3H|=jVDP|H*o2eaZNJ0CZ=wkTtj`aG3mOPGOiHvDGJdaUL<_``<TKt<M)iHRZ*a
zfJM*g$>_PcdG!+DDwx-SfiY>Ora~YP4|w6uSp~Jmu1VRRT+o`5E}qOGB}bR7i*QkY
z=QK%=yGdw@HdT<ZshrQ)2yR$A?$TPRmm%eCe$oIX-E*#E82|a%;mo1Ex|NnvUYOV9
z-aky+{yeG71ChqqJGX|6^w~qNBp(xR5ifi50?Kbd&#cG-LWx?%j}@y(&TVEHr~tzf
zXijcSBp0ix#dvRC40ZfcqWNNSz6V_T2tOoxrFBq!X8(V5R~SFV2BVSNN-BTQYb`C|
zf8*^U*9kD8WOk=$?t0qTpP(;C@HNzV!d97982pca$~b@Z3fMRPgWL;b0)TCyARYuq
zG{}n!h?966(qbw#D`Pf0EpxWl#D&a6=XF#@lyt7_m5)Bx*ys+r7-=|KCCm9G|3*|E
z3sFq*z%Ft=GO4ageX$)b;PyAbJqzlXIA4VD{M*EJP2Ic@wD<v*u<^m^>e~6+g8>1=
zYwqJ9L0E+CVCkBxS79S}{E0)y6J4hZY4q%zpUtA){5{Cbk2t@(nuN0o$N4LfFK>m|
zv_v&^QWqOOaF(PkaC$K=5}j3NszcWK_%<26B2_r((G`iK2pD&ub8odZKTAzn&AaVr
zwvf(;f*BmIeUA!ggE1r{P_yi5XYR`vZ8}J+oW8RWlu8GJ=0bUt|2BW2+J-p$+0r&g
zR$<?u3GTv`62Z41YB?%G`AvNwStjb7nu|3{+oWL_wR64{%dM<T+|YR#m@~^>&~~++
z^qX_L*U)8dE|C8H2Wvaxmqp?aBOr3zco`-F)%@r>t&D)Du9ibph=qj}Dv$sTBj24?
zc>_-5&0wXK=$)32$#_*)Gb}IQ*z3*<wr$0vzn#<sw4h&~kFnLcFNK6;HXzz`L*t*!
zB#p%ut(xhjr@dGVF;>ucI)CyN1c+kJ|2mAqnQjyZYvEd*RTV?6iU3JuO+oQ;(K3s_
zz7LO3*Tb@iVCb#PIAY|*^#OhAptz$(-XHxcD3*xw6bmuAyx;T<#u$Rq6mz+<cpoWe
zkrSU7bFk69vzHRyuo6{4y9FP{<W$5L%uS}yFUR$ES4Bzm?f(Q7n7e-6?_FBu2tDbC
z!pd_(xviPTtQQ+od+wgbbd;2V!<E-)S(`RvbR?$|5q~FKXP}C1aB29vp1S`8C7pkl
zz;CPU+w?a3CP9yu47@PN6(~lfsI6%=nA|d}O<0YwJTw>pHw|9<Tp+Tq$W|wnJKO#y
z2M`_@1<+IJ+>GIX2D^SV%umxsQA3vX<P`^7^NsKK<c#{QRNDI(2}A9-nTCG^?P<6R
zvS}z?3>v4`<*Ps*SoUpZh4glWUTvY}dG`5mU<MWcGNN5qd2m~%zVyJUbb#<T-bXEY
z2Y{MGJ$}=;*4A*Sau%V5_2#Zl&6R;p9B1eJArbJ4qX1FmzVB}_pXmf>hpGanu)+2d
z-br)h!?NlL<W72Vaop-E%JnvtYH4k4ag&BdH)HBMb+!4;dkTB~PGXL-3MHjqP2MzL
zCyM+nf&T}$4gTj*0m$2ND6w9OyHePUF~IXfcFanK4EcXGl3#6=58n0~*h7L~KO{#z
z8V}I0zGGdEj>bPc{?Atad%(H*`yBKdq#)biftmu}CUu}0>Xnt1GT}l?^(pu7;}B~|
zFMx1BR97HCnEfXa>5X2y7qN`xC(}#oezrZ^hqO1;8xAI|x-Njy1APV{iZ-18OE4?g
zR?snpnk4jv5AF9kDwEeHo=ONW^$2GZl6e54z0n@irI6e$AUxx%+|<=DVcaRiAoriF
z{5@c+^Zbsu&fm}2x(Z|)|4J$8pD8H)JFnmTg<SmKg3X5s?6<bxgZe*5+m@qDMh-1Z
zUwsk#=B`HhiS&w0TiV$B6}`}R_R3E-QW^JX-*bB@7GOf!Dnh;t=57v8@)S4rsb)GP
zKdZQ}n2_Y~X7wTm1ajx!tIy8*vc4&zZJ=mf30_fn=qknNj#qvhRqc4Cd5KQ*GCo4g
zE=S4T=?x0^+`XJADPA#GBU`9L-@lj2A*TO%MtKc95x#dt&<(z+2yYfuxdr7`8pX2C
zVO(q)%MR;#6emn-;uOWd>F%^Ds0n;D0+r<1iM<b>>&(3n#W-cRVOd1j4Rqlx;sTkR
z4^xlH?(WSpD)dZT;kqhPNgt4_CS-Xks5H)RL;Es9bJ&i#v_3FSXE7@Jsfrr8yx7T6
zp^|h*>f^Cgtug-I&5A?;zl-SvT4&|yDc(3q`qyO07YD)dq{hgRL-?KqDoM+3@CdS}
z@_A{G)<<{Mj(F+^w~M8ipj|<G2IB!w!b(z?!|GMjC!cS04ZxIvE8J0$Oabq`d$SuN
zh|JT*hh@#or3X1|W`2U6P_4K*g&N27yW=5(>r`?KbvH;T>Syc6LZ97Y0?!(<`m4l!
z5YP~oWL=7B*Bm>#bZaAG8mRv=v!Mo%M`i%fy^rEO+~}u_F%hp46JFUAy1HEe;bD&r
ztaApBKb5RI3xG^WF#kw>xW^yRs!<&SR^n+d!_eKeu}xIRfeUesIS!K$+A^50ag3*A
zdWrAV&#w798yK|=y1Ag{%X{6v=&7*F<#d(G`_XClN>|{0uDCn})FZuCvZ1>jHC!>w
zewkL46}n#4v)6fR<PKn4>``H}=!tsGVst?8VLdbKrqVb!r}K33Y21+VI_}Q-<kP3W
zb>i}pfr5WyXWA22FkII~A`b&uw8Mvb8e+U`>cqLq-3rR$?eZB*@}}!}<=?B``&5zs
znY)(Je?#btGu$76U&LoaUtSAbh=XF?HH%(-@<q`Jmob|C7dT{hw<K%3S7R1*x<i*Z
z;@C8(Xx`#D>0*$5ZdE%5Dm+6>c6TlLQk<>An-}eh$ksQnpcvb(_nS0&bRW1>P1vqZ
zN2+;tKHPIuAvxs;+o*!MA#34`ZG=ecEsob0nHzGC5J`^~S(EJSPYE{+^0qKV^wV;D
zU~oM6wyf2_^g%)#ldv?hl)rwYM~hp2IPMz%YF6wPURT7<bP%)lki9}%y}$g`1|@%s
z!t8L=oa{eT+R7i*$)WHBwQS%jqdPW7f~KxD;buAsh&ZO^8AZ45wR$Voxxoo^F}tQp
zKeA<Q<gC+If)oRPF(#&*c+FBZ-GY<4pk!XRnP`qYT9s1a>mZ}tYhzRLLB}gNTL9v|
zfqV{%RNE^=1Wb)Nb2=%OSYRi_B3y24g_b;e_f?}qLhZdgHCPN0yL+LEGEm(?sErlv
zBpwZeFS=(hCPGBX_r2dHh&qjkX=eK^A@7?vF!;7bxbq)&yWLps78~Z7>9(DY>_0H+
zTD!i_+b+~OrvwoB;W6jkNnVAV+gP&^8mhejf2}qWk@5il)xG|SfI8Kj?;XQRd_Kp*
zjIZ5p*T~mii+*>Pwnm6w0<l-yQd2<s#A-^P?Te-TM*PrBVf$9R-dpz<j_h(|Wnoe;
z@ARxBr8>QbJl=%d6Ej0Xq+wsIv`Y9h`^CQq@_emuoPHnjNP+mrt!0onI|rN=x;mmF
zqJa!_xn(_>5(;)<PvbH3erkv69xMVXPWsUfl@QErZ_Cwq1-JE|pc~lm&Jj+a%5)dH
z+tzSnxSaF0^`q%l)Rvgz3__ePTvPA06Md6OH*5B@+t(`SXs%<_CP)%n*TcW6ym9QO
zkj}687}L&YL51XKi<ctT_HSk{!coTaYDfj-+U>tj%M}<t64A3OlX9TbbHg4=yWTr5
z;*e^f!>k|qp|3&xFE$iXUsj*LNHq^VdOBTNcIKS#;MRy-f*)LPDa6HjL;M<%O=Fmx
z#qVC+OB{tfQyt<WIN{_O{u}`{A;!h|IABKg7%MY6p_!XE#jOT5R@1(0P?Rs%gy%YO
zuFR}C#{k!FgnO7I1TkJJy~-grc^y;x4JbRMEB(J;DEm8K_&4xzv4xo%+&(Vuv3T3Q
znYBZ%oAupf)^0HkkAF>uQ@YZIxQQt?N;Dm^)8Jg<>FSt!O8EF$oUq~FvWhpbY=ho6
zxq96eE?1@*U(ts@x0BTb`5qy&%BFh>9!R0ciP~!>g5p(%vJ#X(A4sjp+rHMnK}r~)
zc{A3Q=Ss6sXC5@B$@_XenyVDJ-EWF3Lm~&MXxsxJP@c#}bvWGlF2iMN(;kqtpA5RP
zJSu1f9D!5(3z0{|Yb~08&1lvg<%2=Mlb5+h;)tY_RA(icEtif3-q7G<ZhryIMD7lB
z&UY2b$pVwn^k4%&uB&p_HwwRQKYWT~@0v2>U|^VHmH|LX&SaBNqPzDoJ}sg)&&(q9
zIj>#AtB&#t(8*$8lHEzck)nFJl5PbQHzfDjTKcoSnq^>e=}^k12JZNl2D-8#nwDwR
z%CTj{i^}Ral`_TbBFwNbBj>{eo-3f3&fZ|t*hSjgmS?bukd;0D*}$(OX4Oi(+eAs8
zlMJasbzR?M>`C|?jjt3(K7Kl2GNuUMgzw|4Y@QuSKnlAqcu~SO6j*Vt^}^`+ZCO>^
zt#gU(RNE~h(;Y$QE-^F&0J^r+>{%1`q7WFl)kyAuj4}UrBZ~V2Cp1#MzH6saaCaZ4
z@WSBr3+YUYDStnkpCH1`Fd8y1DzosxZ6db7dd#Wzj%L)Yx6is$Zw<)z(+qFR*dZ4H
zutQhyxR$2{2FPXh<=XkQ#%Or<R9Yt)(b)m%KN`P}K$Ta!)eg2_y)X%1H3^n_sL&2F
zm{fZ#E6ft3+rWTvSj4rGr1~zk&|4^mF?g*gE<IS~TEor5yj|o~;r<}*sjn@8baSpo
zYz(#r{^^u_pP2X%*=~0Yqo}l3H#O*6_MxJ(xITCaoM_dBWS9%}s;$*)yXMXynofrg
z?ZERI)4DyQ7Uly;nlS#S+H&FlqQ`@4uPUYL{Xs}n`{RCZO&3@8|0^}{KhassO<<nc
zGn{iN4on3bWVatWhF{Coyz<f4C)0Q1HZdS>S!<DNDdI5@N2)f>Iqa?$m=X!5k+y+l
z+UmcvhjtM+nk)@cu8$b%e~0>D=WL#@t_*KzScE@`r!VQGGCt5xdGMI~yJbywtaoBj
zygPr&*7FjTyJ1v$+V|vL=-<;tx);{YQ$wfKs{D6V(Ks0{;w4>CV9uEVbU}vod!0{_
z)X>)=;dqW^YF~FOn~SVmdrd2*{Mr<AM8VdCTB_HoZzPJ*MiyUVvRCFXgwQ~zV5XAy
z`jHTc+&f!}F-|OrxtHJ0OCFq1<2gFNx<7;r71K^!f+p}MwU12~eotvzz8^}?TT8Y?
z-XWBJ&>_J!${1~RX?wN`PJb*4cH)Q&LiDkMjbgbEh}Tm+CWK`;=qvi&y`+j}!0wzK
z84kRbGD<`41`Xd{?mz@t)|$yFOZz=K1F`&bR^DXQdn@75iEh*B!MA4&^pyzPi8xMO
z_Y_uzh!dpf<*c;=Ri%S1o061&{3wqg#UR@>zv@^`^{-~wSz+@;gO+3OEs<-yeJZph
zk*p;u^PugoIB&#RH01@)Lmp_2q|;qdS7-u>fOv;X&C{Fh|GMo0prwe||7f;IbI%7{
a0?p;miHTny0XBdAufF5I<2Crt$^QXRr|zHt

literal 0
HcmV?d00001

diff --git a/docs-vuepress/.vuepress/dist/assets/img/start-tips2.7d8836f8.png b/docs-vuepress/.vuepress/dist/assets/img/start-tips2.7d8836f8.png
new file mode 100644
index 0000000000000000000000000000000000000000..7297ca2ee43cc1c617d16ae5d49bc16e63bcfb44
GIT binary patch
literal 51539
zcmeFZbwE^aw?Ddv?gph>q@}y1L@DVMX_4+6K?P|61!)114(T4cL%O@984wt1<~RDj
zU*Gq<_ndRj{oQ;1xc8oCc=mku+Rt8lt!F>6)_R@+F@snEh#o1aDghu60H`280Adx8
zRrIm90e~k@01f~EumDh)J%ENp$RYq0G6Mk0XOzDvD43s7|H7d6zb+yU08vdlXAft0
zJ7*UL0iFkdsJ!YEv|k*M={IKm4T&abqh@1)3bdV9*q`=c@<E6-yq~HH3g(*H8cM2<
z6@Lqbw_)Mp@)Csz034k>+_aVD84L`K7%<n6(x3o106M^AVd?H7r>Xh)7tg=GfAjxy
zIG_40J21}ui`O6We+>{@S-V>zmDfZTe{SV&>4?Nt$lPz~;^qMWsIQQ8W^WIdU-%0W
zler-UMB=(%*!FLD@E3mmH@xz@jE=Sfvdm9p_2OArxY+^#9+C_&cv;#a`QR}i@dGC-
zdnY9R^;~I7I}0l${#CzRj*ia1a1#>WfBsK=Z2t*cSUms3)55~`5B{4j$UBh_erWIR
z^3uZh_sRd02gjG5$ol%7n2|?3J2w?=<Tu5ydUJ4A`-7dHt84s4w?}I97q;_M(ftcs
zx+@^-@^ANASv*wx3p>43|Mk9q^R%&7QvD0td#LLCh25OB|M0hVSA6;x-NFrt{(i5g
zgRb0P*v?w@4^KZk9sR%PUiNzGe_?lrr+;Mdvs3s(ck|T#BeRX0(jOfi-H~_x{aJSQ
zs(;FR*y$kq+TY~2wD^Z?*6s#>WU#V+sQ6bIYbV`5^1FD*|KacQ@^`!cT@ThTmH*J)
zy`KKL*TYTc58cH>^H2S}uz2*VZT-F%cnBy0kC7h+Koj6ce)s^9U!#GCwGXmA0)T?E
zi?5r#t(^yh9I^*lGpIUQ@^CTmKj0GufM5ObR~Y~}o%!9*KonU2pjjg2;D3(1IPwqL
ziwFQ{BnJQ@(SOj`F#&)CNpEMh^mOz3&F=TGg6!cq03kpIPy%!SGjJc^MoK3PNC2`(
zi5~$PfDT{?m;si69pDJK0p36W5DbI@k-&T4Bai}Q0y#iFPy$o{wLlZl26O`hz;|F0
zm<LvXO<)f=2F`(N5D0_`!UvIpC_(ffRuCtMA0!Hr1}TCbgS0`0pl2XkkQ2xg6aab+
ziUh@jQb1Xt0?;>5J*W-T2O0&<f>uF0pcBv)3MvX73K<G5$~_cb6j2m86g3nb6jKyi
z6ju~Kls70bD4$TWQHoJ&P})!iP$p4UQ1(#HPytk2R0>o^RBlvJR0UKGR3lUyR5#Qh
z)Ckl>)NIsJ)CSZZ)N#}m)P2-TGz>ISGzK(oGzl~nG+i`HG*`4Bv?#O`w0yK0v`(~f
zv{kfYG&njwIt@A}x;VNjx&gW^x;J_#dLsH)^lJ1j^hxwh^m7ah3<?Z33=s?!3`2|;
z82%Vh80i>g7_Ati80#2kn3$N9n4FkWm>QTCm>!s+n8}#Mm=Me{%uP%f7A_V&7C)8}
zmJyZ{RtQ!iRv}gk))>|{)-^T}HY>I`wg$Epwl8)p_8061>=Eou>}woi95x&&937k&
zIKeoda7uBya29Y*adB~(aK&)7aP4tl;eNs`$L+;k#l6HM!Q;SFz%#+~#EZep!)wKx
z#XH5v$G?X!i*JPQfggikfZu_?gbyPiCEy`YC9om@6QmN<5R4HV5@Hjw63P*p5&97(
z5>^t95bhIU6Wt?HAhI9|B1$EyCz>WYBPJ#0Bi0~xB#t63B<>^rL4rwgk3^BgisTJR
z4oL^eIw>kCGpPcpCFyI@FQi?hn`9VdY-FlrFUTUvO2~%Ej>$>L1<CcueaKVEo5@!w
zP$}+Fs8YP7h^45Yn4-A4LwiT=j`f}JJEeEV?p)lZzAJmz`fkMCvb&RauP7NP6)7Dk
z<0xw>7pc&wIH<I!ys0v%x~TT4$*3i$EvX}@E2!saP-r-4v}ycla%cu=&S>dqm1$jQ
zlW99>_vt9;Wa(beeV}Wh+o30=m!`L;|3D9+-(?_YkYjks@QI<5;h2$zQH9ZyF^h4S
z@tTQ^NtY>vsf=ln8HZVv*@pQ8b35}f3q8vdmH?I_mN`~zR#8?v)+E**){A>=_w?_D
z-K)L#gY7PxDw`i$5!=Fj{QENZUGHb#pJ2ye7iD)~PiOzmfx;ogVaJimF~W($Da>il
zna(-Nh0Z0$<;0cEHO-C3EywM}UBtc0L&5WyCxoY#=a83$*N8Wcw}%)0K<L5C2VWk{
z^O5j9;tSzx;5*^x;J4&Y<)0A17f=!a3)Bff1vv$+1v3O^gh+*+2!#o?3*8Ef2)hZF
z3h#)ph&&TX6PXqz6V()r673a37n2tQi#3T|iVKT-h*yXoNpMRzNEAx^kYtmzmi!{Q
zF2y8eA(bVyBF!NEO!~9*iVUNSg-o{0nk=)dmF!p9Z8>(i7jngNhw=~P-Q=s~FBHTT
z0u@>xqCQl981Zmekwj5fF-37niAl*;sYvNqSxDJmxm5*SMNK76Wm=V1)l#)U_4tv<
zqrgX<YItf-)l$^f9&<c)d))8@<;kNb2~QT(S=F7?Yc&83RgDCVMNKwMSItH(3@uHq
zRIM#-KJ5VQo~NWw&7T%NJ=c-fiPf3cy|3%3+pb5bXQEf2ccK4KKVE;ufY%_<V8D>d
z(B81l2-8T<=&RA0v7+%u<4qGGlTec>Q#Ml{(>^mQvzKPg=7i=J=9SOTpXom<e0F1@
zVUcZd_FVOO+Vf*e1<NGMJu6wO4^}(YQr7X-+cr`*@isqfrEC*yckE>B67BZw73@>&
zp)XWkWWKm?&~V6eK)lp{S>}l4_{_21iNwjlsneOx*~fX*h0`U}WyMw8^`q;to0{8K
zcaXcOdz}Xv((oDdyzlwebJa`QE7c3;t><0oL+s<^Gw93V8}7U9r{tIGkLGXb-yXmi
z5FD@?C>NL&1PXc{)DC6_zX5N)Qht>mj1%k-JQVUEBtGQlYyH;^Z)o4Vdb9pk`E5}s
zL8x2kbeKd~<~y`^_V0$n1;UfV;Sp95{gDqM6C-b;ETj6P`Jz8XBVue~hGT_eGu~so
zcX~e+Cli++PaN+Tzn<_Uq2>d_hlme9Kbn8+OB77ZOu|X>Oj`N$_)}dnOY-~Vn-sg0
z$yE8&vNW2s@U)9`tMsu9*^JUm+RVtztIzhIXR?&DYO?QTC+1+}c;#$;(fiVqE1FyI
zmFjEc*V{a&yp??I{LTWAf`USt!q_5|BG00oVw2+UB@avLO1Vq3$|%Yr%Ykyw^4)LG
zzD-rARkT-%R+d(=R;5*wR!7u;YJ6*sYwc=R>I~~f>mSv(H%K&8H}W**H8D1&Hj_8U
zw&1k9X+c2zAZM*Et@~}ZZR_pk?eiT59TS~eox@#fUA^5(-5ou0J&<0h-ljhBzWRRA
z{@MZIfto>~!RjHQq3U7b;hGVVk-G0<-y23HM_a~Z#@faoj(1O}P7F+{PmWIMPR&f4
zOs~vX&HR{sISZZhn!BEVwSc}5u}HL-xJ0v*z0AH`wj#XJy!vo;aP8^Z{JQ1(-iG_e
z&E}ge{H?@o`t5=r{6Cs@ly<)F8t-oIx$Ir<haM0gq#fQrtU8iC8ay^Q-h{eA5hqcn
zl&5(=1%I}mX`U^eJDy)(M8GIv`In-XJy-fy+t=PVm^Ytp*>4-*YVZYwBLd-K;b!sM
z7C=QFQEZT2$w?jn;2Qz}>30CYG5(vq{JR9`Z#F&>|MF9Q<zMMv@ZW6e-&ceIAg>hw
z^pGb{WdR@!iP>HuZ4%_SCh}ZI7C;dY_>+OZC3hPE{@)0MTMGc_i3r3g(oV!=2Y}mY
z1me0Dfw=vOwCm>pp!NK3cKWZ<M8yE`d74jMUw*P$`EQK=>4<0rh_OKLQ7}<KOaKZo
z2$dLw=mhAIvZEsn6J+|UEC>Y^4IKj$3mXR)S)iH-KmnnmqM)IoqyKWQK!M2X02(nm
z2_v5z2C0?>CX*`}e{ftD7PI`fHgfIJV-|tuZXwt>6nE}YQnB7+yU)%cC?qT*DkiS*
zP*F))MfK5B9bG+rq)BFJWo=_?XaB<8!_&*#$Jg)mo4281@4_SE6Fz)QO!}0ZlAZG<
z_iJ8$L19H@Rdr2mU427)M`u@ePj6rU*!aZc)bz~k-0Ir;#^%=ckDXoU$?4Ct^9$JJ
z)i1q30P5e=`lH#u=tYdw3k3}g6%F&3ULX{2WJV=MLucf}Ad%C;v~VS5;t$3mlaI^#
z)`rb2pnXjK+-($xf<<tZ75YoH-<ti`6bt#^((I37|Ilk5PykSVCsY&^RCH8SRCEk<
zWWvBgT3Z+xSU6a}6VBfg-tR>4D-r%l2qY5_k_Q?Z8Yc3O2p1cd=>Kv;EF!IDM#LO|
zhl+HNiBX9G8Q|6tni-XK3=ZYJQ5N^j9s=nMi}daj-;v&L)$ax$x3t_x0Cu;H*Xq2S
zV%NO0>nD6Wjn1hD>1StmqC9*8OjnB#0KqWapi!>+>cHdKkC}68j20yX@Kz3rd$4Q?
zABh|omLA{k*;t>ZJe9%!cp|BMwro#Ww45{mNr$Y){vgDJOhO9v;nU|qQwZSXWEnrH
zBdE6dptNTp2oL%}`oVEm*t->t`(}(>$-{lb5#rmkA0l4sL(wlA<NMpq8K1R!0|FEl
zji_F-t<2x{OtxQF`2;Yp77-G(!k<+s)L%JyKR=wgu(|i8CDhfEb+W;CKpHon;ej=^
zo4_kK;80wD!s7BaEikXk8f=!gMhTgO*Bb9;wr?fz!kjL_xYSq5?|8cwy!1~l_oU^;
zKnDELGZHQYvQlA>z%i1Jm?2GU1wPrUcmtMqIq!-tGnYR!xo!lR97GAE<{y@l_8IVN
zsiH?dm`{ibex>0)RRo(?c-@^rJ`o_`&KT}&2{JG3Q6h+rwb8WebiWq!mx&l&Y9`Da
z3WQ9)xYdWHRcy8_OnKeB4Ddt%_-s(iYyE@eIZa>c%5#lM<&E|0#&28Kw%}EBZy0^|
zcc1BYKj#SU@9njt@uLap@yukNBb5c@m!}8-hki}tJZT2rMwrk@|Kj>#kh)BBt+efG
zCA6$ok~FJr1%k7)L|OB`zeel*$hd#w9j~57KB1EvG348lDK<|UfqX;&tFdhX<Osm1
zr8*qGxP9(5KIc3Ht_(_SnRB$944OSso|oGDaBXpxa}YMwQU?zght&9wo{#u#O3wt^
zA?cq9$__Gq239WBYt+yi{UV|kUE4O(zq}}Yio7KjNd$J`|CZ0I|6%gqSSQmTeDb<8
zi7cTGFw53Co8-WAf2=Z_K>0(5=K-@;(b_T`*ue-uFX&u++VH$%&rE-fJ}kvKGQjp;
z^BN()G2#9XN9G9X##9@gN>%2|5X@*(ENg(zdF?KcHqbl?DWTtcK3Q)K<{b)361m}n
z&bNziCca8KX%4L{HR^B^JX3WtV`Q#+SQV$F-)~6#p?_Y-#h`RG6?MJr6;H8{S~C+|
zZF=0%stK#6mid4vYktc(lk=8IY6e5aJHMA@CB)a~1|3fvUVQ$XnwI2Ru4dFCbou`A
zJF}IVNq{5YFv*F)jSw{?V7tv6J3uj8Qni@7NH{6i#J;9hW-cXtuYa7Wr%BEYu9!_O
zYbI#u+o}gr(lr#JG&G!@ht_U1J8uxHs<LffnV*7Pcj+i$2ib}%C3noA=bsa=LQ7B=
z1%(>|cYU=OFK4r?<8>pr-a3Tgk_N8GGUx}gb(y1emCXD2U+Y@6G}fy1P6@`Vz=s&T
zR8w@GQgzFV3=iJ<JZ$KG+7li`;gh(A03J<Md50dZ(URaZZDCA$;&VK3?6dl4{p~W>
zq!A-VapPGLd#{vm=5e=*;E;F6sRnv;XvyjTKDP8=*{A3#Z@xy3{^5B(@qK*eT1?jw
zHotHqbtz%f3k2{A9ynOQc6cgv0B%PBWea}OVL?1F>MpktjIe^sG2_n4k3KeU`cP}S
zQW!aSQ;D6>;tmyV4;}Ilz?(8v1dthf;|XbRu{aj#FekB_dk2|jt}-kUL;&Rq{JSY%
zb68TpL@$2iHR*ArBxXMuwG!(&0?bp#k=M@%FZb@;{#?F!;&YkEOssCN8OC3`do!&j
z(1`o!L-wMwEdl@q<srUrf>-NX1i>RM2}p6rz|dWpe>sOu)nH^gJMjhVTOUz9BR{th
zYdZ&~19H$C#6Elpv_=k&L(m*};Lpq(3?z$Kt$!ux_tTjnM=(j`10e$lp!>(k&$7!^
znOnFyTtv&qi{s=l(EMNT`45?}{X0w)S7&&6wkHw5@xn5d%=R*}-dgQtU}yCIavqSi
zxnq9X4!*vD+&IPZK0*K)qzGVn69KGyn9+v(j~xF~AOGKJAANAW-<^*Bd=d;>ROEi6
zLH)#Pvj(r~<%3p&FT@?7<*f4_!D(jl&4sIJICbi}^3C;*3=ALH!RWq@TzdrAN8H^o
z4rJpRByh~#$GjE3D2v`n0z(f7ua9mLBR;G<h6vcs&>t@%04fBqJ+Ff7bcWzxo$g;L
z0j7$U{SjNXb29&jOaE?RntZY3^Vk~^a5v=gd`#w;!W=H8{BKXq?`SD=5ZDCfAjgem
zXc;`PD)t6F>F<Njzai*%O=$JMPR_JL03F^p4#*MJkr_GgAxEwC3GlyCCZV2WZlC{0
z(*J+gDPk1nt*Yr97b|Vl$8gpCHf)!3hg-SR=%NFH3)7Osb)=Fjp3Uu=Tz+3EH8c?w
z&`bGAWML=x^-w^cz3aL0hfL~_4CTTMtQ$o?o7d|IfW}9@>mY!yNR1+sodqahLh(D^
zou{6@dv;OUuyg3%mcAT)!@9aR^6ttk$yeORYEMsZe4$XWh0|d+c#-nSPPHm(+OfuC
zj}vDKyDPKcGE=)N_1xPM{Gyj4D7@^3Jxe$uEwYkMBT{v3Qr_XxOp5EgIP){G#NGv1
zNY~`E37xk#wHp<W`A&)a0^Q%cHx3km%CjTx6KN@u0sqyk^Zn8H!T3B~1_W?cNYzO8
ze1>~-W}fP#(1)M+J7{OuKhQqcg`YRu*nj>V>0u9Z{uPR%b|bPw+JTqB8`Xj_W4&Wy
z17a+h?wZKqp{Gjb2y$YySMZHbTqaChJ+sW`x?_%~<W8n_AlMmi^w4^dx)&9{Ujgs+
z1d+q8#ybd>q?mBtoi~!yt50N98k#4@`f<;uSsFgwGpJOx>52#`RNdx`@)SBD3=^7%
z;5l4*zuPBfsUK&HSrhs|@^<Z6>jUjCQ86ycQ_Z&eu(Q%#zYj(SWnqHcoCXmGyg|#h
zHai|;1q%ui{g?WE1Xvq-B-2UL<{faXb<d%lJmfnBF3NBM*p4w`SNHb(B?jp4m>a<&
zHOk|C_cx;ChxnDbSPfe|`Xq}i>PvZbU{6*YH9F{cr`B6y28^qwbIU`p7(U67CQ~xi
z==R<H@JeADJB{vRk6F-|8As-z8aJ-e_?W|W;3GL_M<z<1k_{4PH`W2?XCk&~9t;~9
zMkDJQ;l=w+sut(8(mpp&yrxf*Exa836IsH!M?MKx(CO6d6Q2!xc}-uzz<nu8>^rvs
z#<zPvCBQ^MBf?j@iH#IVYjr|W&h1bI;k@THV-LTv)QQE|JZIq`P??hwmDHz(TCRq^
zKJNZuH|mos6m3oW@I2g}#q6<q>g1gK;G4AA_iiAJ8cDfp1z4l`7;n}2xW_!_kOfn$
z7Nqu7?$De<dvSDK6meVY&Nyns$*&gQ^Avg!ek7@1tcWM#-6-+}XW;J1sOB>Xz8^Va
zY$<*Sz&tN$jn`viuNtZzY;E!72OZ;BB=^@!he0>`CDx%*raI;+5!dFsuBT+Xp>>5b
zQ=S92UTXR+&lEpa3BNClE{v1Sl0}`2F^u)HVN1}F+c5_PaDIl3uf=>^T_!cUtyHf!
ze$8UMB-O>}Wu79ecb9<<KM>P)MTWrmM)CMO6hc^aK<*s0B$uia_?&$VOAQ~2c{_`V
zMsp@Td1C&m$+_@G0;*UR>7nvD<77~Un1?(?V2e@VeN<SE>xdEfb(3e24|7)>tVcBz
z+nM>aJb_ct9HOVRYH0kbhhAj+;aPQ~48$0R)Blq0((yQAxd%=QbIgVL;Rf<w=*Q}%
zoc~~C>2ZDllw-Por00mb*jsA4UK?q17zq`o(yK^1%D2BNQl&~RG3)o)h|Kq~vSA?Z
zPdkwk9S(|wR(4C%o8#a6l=v+cw`9V_M%Y5qJGwz9?M?^p*Y9;#rv@2furQHm#)^ta
z#qlZ$YLo*S@c=qABZWj;FRq~xxirE@$$4OJ$R1p2VbmY_DyBF5hd*SZ^GK7J-6&<Q
ze)p}K|KV}|`r7Q+H+R%vpoxZ;<t9sGs_uv|041U8yN|iSn9!TZ$51LWRmo5ir8Gwj
zBauruST@MytjqUFS*%c`2FUD2BIYhZYM@V28Kd55=esOfy~SE5V5LC%Y(IkvR{0sm
zxnh&IGQ@PXb!0wm+MzW1GPKY7l696*%n_QubECYMq#K|eb7g#p03<3HoxOOsVemIW
zv@rCny%gK9vTf)WJ$_iB@h1<MS--Nq88#)xqZV=lKvfDGHKTgW4qT!9&XXD|ReMTr
zM61F7L&*ID*1B2*plo9@<o1P2u7A_*%X{S@&O47_myWBvAee;GcfkQEHQn!1&@Ybi
zGmzP@iSnbWPOELhQxXt@wfZ8NInpkNye`L5dq1;gU%S&j2Vbz`))1)v`IsXpggBv<
zGx#T<oqoj9gmm=wWZxF2!Xaf%KYp6emL6#xn*?#ROiPal4!AueGF0=WdGfN$&^CqQ
z9>0oAYsXTHMVZfW?Ez>FjP+w6&)!e{6Yq0XZ3zTW`JoP%{j&DmthT&3yS3;=85YYo
zE?>5kM>oUQ_$TvEI<q4<dU5V&zxt1|3}Ot%^EGtM-)q^K`QcLGqs+0a>}G|iQTX&E
zc>5fD4O?DUK5s#W5@jlpzEC&Pnj6mk`2KK+{vc2v4*un{MZ*Qb4!e-kYnj^{XK3;6
z{R-Sl<!f_Yq%Adz0FKtd(e!gyWjF8<1OTSKaS)H-3fccp*+()o3WBT8%r9><;cyYy
z=xtdc0vOpx02fe5cV&KdFVFw>(_h4Qapv^CGqh}b4q|j4XRB6Ld~cc}^H1{G{gdK`
z6Q4<BQCUX&X$HUl6Zv22qs-UZH*Y~G_lCq+{nH{%p;ot&lI|;J=9H5El=p7&Ai0w2
z3TPswI?y8UtEp6Ct|M!1r_Ul;?`Xq@m9+s1KY?8ZZiVxIZ$-=eqoOC-S>tW_A8pQ@
zak+s79%o0Qw<mie&He8PpalW++5a4Xz|O;NFW_og`WBtT*%6#+pOJ<F@P8wtBF14n
zE#bE*9wm1Sp^4ut)^P2dip^C%^(MU11WD5KjXd@oxx1HgIrlYUZ4Lb+V_c45l2x$5
ztDX1r#<WVZqEf9wJAI}G8|s5U5kRE4Mn@oXCkA1dQB+d7b<+fM0H4U0r=&^r!Sn|i
z3mC6+%zPq^%fEY^ExPAx&=5!2ZpDSX{z=(aoKl~+D;}EQOOcanGGOZsTBP~jsLVu{
ztf!47qo7V@w3gUN|5=7gQsj%nGG4U|{tpof5t0CD;R9#dsx`H@wK06Ot#wguQPi$I
zfuA!RFqL6^#~0d9P?eL~YlA&YK+c;}+FQ=|mNt~ILF$%$Y%F{|%&3%Q5sm@MYq*qU
zJTE;ZihQfdJsNzrJ?y6xl1Sdmx%9+SiyfKvgiG_lAm-&2V<m@M<6MqaKLmFi5Ax!k
z*QtO&UmmX{Vq(^amU^q3l$n}eO2CC}zI||N<UKV%*2w#r8G--^g+QNwjQJRyI#qry
zxoH?P8QPd%z-nXQ<=e<mv5Zl|5O~}SV>>SGX<utQ$V<HZsd0cdv3h4*>{IEAR}Zz(
zJNKEE6>$XM*J24}>sr3EcTQoX+q^Jm9bJ=-k<Q&*b;6~O4KN6Xr;)U-ocECT$5O%C
zJOoxhP8})5D@hM*_iY@=bX1DYAB@ixx+H8>!mAO0&;=Sx68H33-g4#jNNFC7b)^U#
zmJ&5R$2;rkPm6o4Vv@T!F_v6IK@IUpY&53#RDC8RzJ6wohMYC7Tj5w^Hv+8Pm1_>%
z;wKK3`Kmbi3CUVouk)A4D_l>YRW>bt&U8MDKPN|1JE?-pRZ>8hbGau?U+?nmFGhcH
zt^F!moLqhDwYD{OzOGdtzt%<~VNYdi8_aYaNlp3z_lDsa!DM#i7DNp>f?bx?MV1<S
zR^H0=-EPmeaKproPv+so4n^Dy29YDgin%6=<XsDK1E{uMMw^y_%RC}VC}(X_MS1Nb
zZ<e_IQ}LM}rOG)ncNTn6lbKtxbjN0)3Fpr@h~gQI>sH-r(SkrPVmwu!r)oh7vfPdz
z*Agf5<T@rWwD;CKe{5ZOu%Tz^6Wggl-icpmdiQYq&QtdE^8puvhou6cF1`!C7x{0f
zs+Z65E@heu`XpvO5WogxD6nTTCANJTeb4A1Ci>3nGkR>}uT6qI&HkbBxcPvT<oQB{
zYH(HdhwXxcOlan6ZAUX^+l3J%)Z?<M@m56pniAxkL7CG=FR|Di!7?J#`235<u$#2Y
zRDi=eAyK6Dv}faxtRa!b>9((A4K1ZNY3Rk?(c@`J%e4{GE_BGd>eOa+PUkZRSBd_D
zZhlk}ftcGDfoa9aU_%MA4mZWR59Y6?Zx8?~a^?<B@$3#i9#JZf-J0+`1^YUXxmL`X
z22+MVYsu_?kD68yT>F_)if~X|<L%QnnJS8eRh7e_nFg<Kw)82MCl@5WJsSg-XzK-K
zLSr}H>!yT{1MetJI~TuXVfn;Z7cUBTs?%k_yXY}H%k*AzCSKlszvn$yGTEKuT-o0c
z?`=OmAoiq!w9ZlLfzN@loRIz;*v#DZ&E$@_?T@m~yF5)6tIo7``qTPPmF)vTs-9|s
zHMNzIBOR$?A8fRNl}ZA>y^)j~1(?inPsbcZJw=>_t8IZ#fKea*SmaLA+J+NpRUGa!
zYS?3qw!J7v8HU{@QD`Z|?xoN&(F>}N-x!;UQtNGEnX~5hl@#y5MWBgAxgFWNewzoA
zZ(AhmSnJ}}O(EW!Z1lX&>XRSE)rBh$V8&OcyN+Ucfyk-fe5z*-0T4GauQ=2D<n){?
zC?`uQWX~HeL_)nfhP)r5FcRO+m43%q!ybO(zD(3Y93Xu>5_}fzCWU6S<m2a0v?kG5
z-*oozyBbXymut7%-BUsht?xG>a4x7$<<g>R@lw-VJl0{_f{M{9*)y&@FB4EJew^N!
z3@vQlsM1kFfBNXi(Nv3yvNYFc)>2Hfe^9P%!^(3jSKFQ?V+vg;Q2)$w$C>Vi9|m5D
zC43<*H2&H4wQ;689c|}{4S75t*O-;CG0nQGsAwsqYYFXmb2+?)!Kc<>j91dqGg~!p
zetxHY%YxA`E7l_hx}}Yw4y-(b?m&f>Af?N*M)tLHABVcWX8xL<`UIL>Y~j9HENnMu
zIOCPjk!UU<`|3R@uPg3HtMUVGJXWVxnh#K0_R9g+w6&^@z~4=A@iKvuwWL|2=tk}s
zvZ^0E-z`2>kgZW@^yApx`+-6A!uuv(zu_|6-Z0T#Ocn~%ypjNmK<=uGTGH9Jb7Nl?
zuNc~{n<|!%PkIvPMEf?*O0aKK*En+_YU$d$x|5V<`;v$4tM4}-f6h!R*q|7e(Bl^E
z%JaH684_{7h~<8E1n?`f|B0AoKK_S0oNgKsUcK@JXS|C}@cWHe&=GA-o-cY+G%=|C
z(W<I;+bdB?EBai2jqo7cos*q!eXA1q=1(TROp&Ta%<J1hy|*x#3=E%#ZJOqI$=wwj
z^6`EnDTe^C@*=7-Nqy;Gzy}&axBC|>2Twi;FV4KQy*o@e)+|519#cYUKkZ%P7zobZ
zJt{EJ5bEFyrG!iy)ea;^*R?I=YCI?4#OBO(-qXD@htqXLR)VLMuja4nmB7L9`^NKF
zT%Pz6npG_#49jv7w}}h0dC4+qCrWR<7#GvO5MQ|KK3zHg#=6HMK9z7UnKpAiQ^z<_
zSd}n&(;_x$E9_KSGsA4n4`<(#FqUuOg;#vn*X1SqY>D2|m5FNKBRZcl%abM1#a9L)
zgmrDWwux-H?uif*N$R`-|C|{g-JIj8T&u(+&A{^83Vqc#ePVSd=SO+~`pNmhdW(b5
z&}{$$STVk`DN(*U$lC$$$)g@W?bLkYH<wYAyK@zoU&FUN;?_R4cMxGl$T&%v>Q^9H
z_!c;1CNGw;9U;%%+nH`?NwD@jAJ6NcnI_>hF~wT{piIHUu%YsqG&lpBlJcNR<DD5P
zbh9RB6#<YbSmynhihL$GK)u)a$%{KhQZ9OdPsOmNcK9n_6a9zMxo)H>o6fU`Y&$jK
zmgfWb^rqs){Jx>QRSYpp4}uM`<*uVb+*}sQXr_(9dJQ*@ZgkV;<CXLM=VJF@_5?YY
zVK2wFMr4~OxM^q0oNN*fo^p@R?>~%KjF8p`VXXKaj*xrFAg%8%H}eJi<+%p!!6au3
z=hU#S#fcZiP}zq8AGnB;W*XrpTP5}~R8@`KMm+|Q<Mo9F`x<YrsS(;A;j8h7YleeA
zjIaR@!$&+iD>ogOfcf!7k1-*kz3sz_u``vI+)f$0W1>O@&z{@po-#MY-~T@NcG{;^
ziIOuzHU9!4GosOP^+PXnI`0ym3l1|!OEs9NDhMzSw712`B46msqYjPKN)#oL+hTfY
zjl-hQ_Dn^uwROnqh8yOY1MBEWIj_yPpKJN%n)}3_OfN-2siI=RH#PZn2ao(dEwDFa
z_rsj3Dive&EZVjsy1?Ozw&~o(6n8pC01df>*R3@m?pus{XM;|TK|j^5MW}96lDfo4
zdyayzXu(LGM_W6Tx8ms1EBMrDdD^90oT};q-hcq&_|??FM&RV#Ir9!M{xZNe#_Iv=
zoLlf|Kwf;LH@^R7hvpmC{X*Sd*5J$fyX2iO%rOHra$#=HL__Y@EQvMcOA7`)oI)EE
z)6`xnJLUJJJy|eW<<NrFkEgrXC1rAqcC>f4pa&b1EcQl$xx=|HxMSp$u0JiNr7w!^
znTmu5i7ogfv}@ZXQB3cFUG34+N^T2eW>DIye8X+(Ob-iDooq}tYc^8C+0E4l&LBIt
zFLbE9Aeq~FtG6Bx;B-G^@I7y-^%6QYUu+=&rHT}|QdNCz3?*~SL)nN5IcAKG6E)(V
zN5d5`d+=IhI?qx2<H)ZL)3p>{%P&$r61x{4MxTFGX^&F!-qhKY6Q$++blek;++9HZ
z+9Yg$*$zHCo?AYAn_>P5iu4E?ye)0`dd#YKq|u-yd2fR5`ee@;|FD`65;3T{)}&dG
zWA6Sw;@arcr5B<kcS@pR5j8onyFL$vTpE1xLJq>X;B*8~MCoVV76{fK-4{}m(pNjJ
zwzEy??klBrDotEWH&F_es=vfG9Tf4}X5c?ssg30J5T5MnN}J}BbM_R@q$zf04B5z!
zQPvKA;9bBV#(~8GG7ZgyDz{5h9$&mZED_8pfF;S7*Q?lGD|C@pjcf2}aT)XROuFn<
z_psp~7<basZb1n{2@-s511>6!jps(v^;YaR8D?-xQXD}WIvv*i8;Pj*!u+eZuOKk`
z&+Cr7w~hz^^GuYG=0<p;3H`cRLub5<$MVzsh_i!);Q7hh#Tu1G;%_lAjqfv1_0#pM
zZWLkP9M_!*W?^3A8Vw<w#+g;&yv`|bm5Nl!cc!DJ7L>!ZX$dhtWz<pa0^6J-U#D<y
z+P;*Pw9Ts#Yw6V@JMjp+%+U%0Si8TBbhjnHAYJa)2;f~Iv0g-V%Lv>Txts~cL|Ot$
z*D{xzY_~V`H;RC6c8N36U(e76FSj9pPOX0~CrfTuWQ_Etw?AZF9D|``|6EWL-H2oA
zAAG3)sTk<L<8hdX2^der{W8sUocm?+uqOzBRi-`joU{r7j27u)Eq+l{b?X}Vwq2$F
zL#C^QNAUQtlCY!bgYaBUBMTjSBM|xNaXgUU8vKsbi$GM;%T{Rk<{?b^IIlyTpyB1u
zqIZW)qTJSo!H|T5N1b<67juj~3HZsggRpn8+P0!S)(4T600ckCRw1_}>8u1&+S8$<
zKNBPg(>>m652Bh1uy=f6JAPJ~#}+m|l5hdGdveOhcmku85q2GGASCvoUnvb^i+-ko
zH6#Gz=E`HcmiN44?tpq>oA6C1u6KZ5YpiUJcW)DJl`pW`&v~Q_qh67qCwCYxeSO}{
zL|%TvlyS1p#p_XTh3iO@&^OIc`ONz$iZX}@MyfK^!om_n(*Q;Bu`Z_T@8=BHljk7~
zh^*%yL<UIFYhuK<lByqF>>$nPn>M*>kASC&{`x&&bUSHGsAqa+SjpzMTFCgp5!IMJ
zzf@KHAwJ#KW!?OZ$+pm1wd=>puKTkyNb@6GKH~mol>aRM2mZg|<V=3@gw7q{ZYwiG
z1^9=2bKdHcq__9R1LP<w1ba(IW~KY5x0WOWMz&tsuYDrmOH*2Ga8bfGopGEsfzEO6
znBUzoCoBn~+l_X1{bK4s;!9^_oO;IxDt>s9v9z=}ym38ih9SGoa?^M255C-hywBDu
zSJJ<i-7E;pY!kk^cwKGmOwcA(6K?NFk?Y9a#F3Ps%v@D0yFl+&PMv189v5tSSh7wZ
za-n|}5c^dl(ALrIB9>%_N;h;<QTj;{wT`|Om-460UJg-t^@p`rNNbw^;1+D|dRjt$
zP_`EPMm#oxb?T@|@|?o2CW*Uwvn02qQPDnNmrTPdW(9ra0a}5!I(8Xx#$4wUhMFhe
zLnUyti^xaNg5MK}ztWhBcP<xfj8s(kyX-mp=Lq1m56q~;^n!!Favs^ES#RFb+akk_
z8ETg}KuSc|UnP`h50D)*9xngtUUt^C6y)Z_yjSb*Y(8V>=Ld~ABZq*b6SBaJWw<Zz
z#(k9k7jQ&HO#ao$zu9|xTX>S6MU6PRqhiJw%;e-0^jcelU`b&W{?x=c@hR$rN@ub7
zb*%{(V>L6a$vVjmKkV^75=gkHoS1ApqJ}l<jz1d}3bZ-7ep1U>Gv^Ra$Hl(l$Q>i$
z=T&M{Rs7S@Tq|~XeBZVq)~~DKesa&J8;(u6%Wz48uW#@(!k~m}B^NRKRe==q8etE|
z1X--Bt7>hZ70(P%SjH<okP<s9Wm@l&W@~iVZkRl}=lGauF{v&tx;6F?+ih9Ye04F+
ztJpu%_kb;aYF9Ya?o&=qNO5r<8j&v=-RB7*KGl~`U+!hWg4Y}UBO~hq6!X7aXccSs
z@@y`%*gYs5YGk>;La<nrJ&KGYK$OO+_e78Gr62$^e^q)--%SzM>KyAweT{6)o7=VI
zn?IkvSbGd9e9@3m8^}{oY&sC=D>j($cuV!}Pf8n>Gy-(Z><D{Q?*(K(MkCWw1pd?f
zCvvCp)%4H$+Hh&t!`{q8!VBcK9C>oDxv8xa3uk-M5l*W&id>!d`&wy^L2Ppc8W)(?
zeFz{6=gM|vIrOK<_;`<(hzR{$3QYoTZ$+*irKL5&yF1<s&lM=H2SQLb!-iZbylEh~
zTn|59@#_1t&5BqD9gynfaXI<ehBa}n(UY4<m4)qFHTfiYymiTs+&%2%_<5*kIX7o&
zZo-=Tf!9?s443AG>CD-xl4@CflUl)#764{nG~fV?9|~!4Y0e+hESN@*)zSuhzV<)B
zj=^SXp&dV?RZwY;)E+C%t!R987-MIe6G!;Ch#ieStBm)JPhzS4L6LYs)%YW+#l+HU
zuj-m<{c&;fw8Mj}Z%EI`Ir4%DY_aSVHzh=Goy2u0Ul^MduL=-sM{I9K7_j=VDbU2l
z7Z*S1?+C$?48aeK<&A7I_Fs>ELlwAG9Vk_rWt*$vPL{-9<vws;d%F=~5a#?LU=Vx7
zPhX;FHh^y;n~oQ9ygkGHQc~+SIiSE>;`Zy5uD7pABD$5f2!5*EPL%$P1e`l?h<7Mm
z?<V1T92_sLm)+7*0aI8R!H2~@Iu46?8Iv36bJg|ptrMNVZKge0$anlO)FHdU;BRTq
z-1s@DdGT+!rWlSp?N>qeypbLUN*hhy7hK#d6^0>qKh7L3SPuB6hDln|L?gYQvdagX
zQzKXK(%5)%!%rMh39YCFLNDO$*J@2k8WRU!sv2G$#Iwic#8Hoae8q697#Ivj`p7lO
zt5BPo{kbS3E~;#^P9e%tDlf$(9tu(`?wR=H<&W#!X~A=_q*gjm3sky#O@?%~G}pCo
z?_{Rp8|2>oG0|a0W31f4p}O+Zpr@|@$&><42|u`fkW~qCsi36nl0NgSz&&fv%g?c<
z(mQWKE^mpX+(c5nyk9?GnSqmd8EtyTProe_HIm)KR6$)SV{QIveN9um!%?lE-Vj5m
z0?EUg^5Aj|RbyANA1>7!nN&i1_zJ4WX6e?sxgk9{#*g2!WypT(wL*CiFTsmO+DIMa
zq7D=<{2U)RLjX(@LenG25VAl|@r}Tml>DMImtaxjCwd912y9y9es4-S8mdl)*RRcu
z?5T=o0yvLfs+GV})t2!uPkxduBe#j=_6;sWBDeNMCA|*};Pl7zZ>o9URNg4mf6q<Q
z9_KDyyS|^?Zcgr@m2Wvjf>yg6u8Yy$>OuWhSGj+47HmF!X`&Uq-%z<F&bdzr(}QDW
zsPW<x;tV<QHVHRWI+)wlF;NFQY$eY0^qpLkPGP3iqPd{?dB19*-j(J(UJglBIH7W+
zqBYyyKG5f89ZwZtf2Gt|!z_LG(r(N}ew_i6n_469h90gMcgG`T@0ZyydO}Nnu5wJ+
zu2)wzWv&+YETerVMKH|3kwa`PMKH#Y)hGT3Gbd3eN#Tms%A`MU=n`f*lm}v83JVfd
zKaknS78=eH{y?!MwGVNqdG{!q4TJB&iY?>2T=3rZ^97BBjWHpEs=DfWu1!;EU#h!@
zI1j?V$l@{tJS)c(9kSJ*ZBTAsB=C3M547pt;K?l6Q@9qEm}Mo2lu%5O@UVEx)$^LE
zn}s>{t9s<|MQg+D^jpupWdgMv<K590YwK#)kFQM(WUXTCzI;g5p;+0d*zo9<Q@0PC
zz7%rV1V@^?*Pg-s=vlPPwd^y<V6J5vD-bf7u<i13A&*Illm5}eBO<AHbS5RWfvvGz
zl0#t(cv1T4H_wi1(pQHxRO?26Ui(wis`qM88<}djI}6i(Xu$nwn6ncSV~m-_6vhoH
zMTS~w(lr>7>ucfv-rAZBVhYC73|`5oUoBzlE;saPRIi#49C}Kz@3azQfffb!X5h)Q
z8|h!fAkdIAlT-9_{I!VDGYY9P%UiwMq<ZH~6Z02?nR`h?6E!u^ha(b%XV!6YjF?)P
zP3lTI`Y8eT5I}t9s>U_;9Qem%DTbkShJJ>(J<Iz<o9Ai*bgC>TszR)}i;Hh3^rr-*
zst57t#4Ml3#N;u448>yj$yAusFut#7J(zMB^d>+#<hpx_qxM+6w%CC?dudOrgG*q?
zb$&LR-K~gxYjIE&q`7f8>|4T3sx(&Rh^jp%$V*^`bfxLZcBVQ8>ylG8wbuks*S$M<
zR&S@Qe+nI|=dK^oIuLP}maR!Wx+3#@&vKFQDC_&C0mgHFLWK#PS}?IBIH>JNQmx>z
zg3`L@LJvOnA~j)ZA)U?{X55g)qlD<Blv|krsBn?A!xcF55{@}_x-*CIZ6%X#*2K=u
zY@uV#kbAq?e#4h^Fz%yM+5rm}j?(7vRJTDy(c01L7L@98XlSzSYGX5P6T7psP)iAS
zXKB&_1Nw)eHR+%qCzm5xD>uP}5jR>+NznPdJ8?XP221F5af*Ebho`TcGsVOf)3%D2
zVaS-^*Cc}Q0*9npqrm#7v`w`nk}vcRS5=ue4|e9s<Wu!7gH(euW8<FYr}}x{Ag9*S
zMG+~D_3otO>-G%h%r-N^?{w|k8a_)7J&p0^LRRl&62D2yzcQem?GrmN!`83neyTm?
z%rfEWUtd<b*?pN8mm62}3d1m*4f*qHKV7Oi#oU6llpn~s-H=g{OcV5fmj4k%th%yZ
zzVTOpUn5<r;@y3n$Ki0K59urOlhKqdtVyHHNBgXrkZ?&V?J!iB0~JGIg1?+Yc|u=A
zW`X{Q4gQ963Qh)7CnVlIHCx)Lr79^+-K=Z_1uF<_+qnyVyMeH;x@W*>eTpoyjCek(
z6eu31Gz8_lS653eooY{b((_)+?;2;a5M?-29-tjEdXv6VWm#|5E-St<UM-;*Uk$PM
zY5=4eV!APX9rr2ch0AajA#;{dStkR}m6qE?+1N5a32J566gf#MO=EveyuCK!5L|V=
zL6I+1cb$ls)Y3HhruVR0Uq0H~_zs2sYt6dTpOX)(6NUoM_b3-a?hR|Qv%IQn+t7`q
z_1k5)jMTCBq!nD`p6p5;VN!HuSgAZ<IAn-x3TP#LZMI$<AOL&L(<G2>C;qimNQR=v
zRw&g}&WU?HV%M4TVxDEO4*fYw2zKj;kypWS<?0G@l7*)i?4|_e(v>*m4LKGXf8jUj
zkZgIX;ZR$V;j;KnkbCU3c6b*7gnvnlz6_!mKb|=$BfF7@Vum+8<&DVsSk-rvTl1FN
z%7e(5B}luoB)!YaN?2nkA)~I;iI>RXdtgHEM5*O9iYjf(Y??1SPe4~J<_2NiAu6!3
zUE(E8b^J9w-)Hx_LqvEw<qbtUjLAq9?`guznEuVL?G|2#78Ak232nw@Z_J6gswkk`
z!wIz-Y938oY{8lPV}PFdeHE+OQ@ol5)b}oOonMPHHDF*Ev;C=Y*$v+?xZQs3G^;E$
zrq=&9{tbE6^}`I=wqB4xE#>yzZr?pUt^n|QiLk?bx=g3|+orj=p@H0q!f_f)k2k^w
z>rojF?mZB^>R4dTZhHDuQPQZo*gYV=y<5zfHD{hCMnx0z=mFU_>U)RWu>kzz3zg&2
z$Th-ns@&TqIJ2#Tu|HOhC4QBYr3fjdc)>H5qCV89NoR25_DsgI?{-awG;}C5`8L{e
zjaGiCgD2qKVJ>o0sSg(T!-Kmo(_+HdgoYQ*m(6{d&ezmpE0xN-w#2|Ztiux~32!My
zQG?C0gYaOrPbWPkoH5=7$bFqzxJ}`N<%QgLGRXHdh>8aeb)vE<7@&qJgzfb2GFWTk
zk5tBRd&mc7Yf}Y<H%xk>zaJ!jzf6nb;rDG76*Y3c1si=BH=jP6=@`2STrVN$5^TQH
z>6e&kOLtIiy!3=jt!`tLxIHQ%p-VHi%Z%;qXCKeVP6q>{Ig(luR2stc(R<XJN`3t?
z1is|EbG+@JWL8aHWC%ggMD88Vo$kjOcX&Er%O;al74TTGJeVVvbza+adr?|&Y~FPh
z_RcdBjAf_Ko;PE9`;p{)Ytn|~0DlvMghTBffh)y&l;#}d?ADW{0gjAmNUfPiEb&2U
zqo~9t*eb@>Dr+kJMQuMA_j2c8QRZ-0CAM;RWB25`LgufI<`1gP4>&VxW;s|$FGsdI
zzu__EY`eXsxsUeDqoi3G8QPAlDtdR|i7(l~ReNF|(PCvQ;`(x#9?#F&JoWIjZBKs%
zX1LxM&8sz)GcH>(W|OhBrI&$*EmS@j_i7AfU!YY}4NTx-r>(K1F>-|*n~06`2Cl9l
zD6az^LihGK*C?PApFIU*`|rruCkzp1<WqZjWvYL~kBtp*{kkjS*OIx0i?sO_=<PEk
zlJyL~jSsraK9{h9&NYg*U<N3}YK<44nM%EU4rz#(%oU*+*^qqg#j3?)>G<k>S=G0@
zG*G>2jkk9igdp!clD;)ecse2%EUK$BrX0L$t?O-dNR(nueB%%L3*&W;VTb0mXSJ8n
zwT*D3qs~0|9LoD{#V!M1?@%~owRD|R@>Oof@i-54IDwc&-&s-8k`OdBuMpo^bLz-R
z2t7L6IIQk{|F?3EUTQD-_bLo7ZtfG)iiH7;u<#tyopb#w^;u7~I9n&n3~bGX%**E^
zG*S5oV88z9L0j<=d4LEsFQkM40_90RSMv|2BKJ&WfAtZ$kLo1-T$EP#cxgg7_};Tw
zpM*{$2See^LQ`W}q4a}*`gF<AgriT#LGsI;N&-tcQ`HB~o!-dJb{JXGxn8a8iEBz9
z&tqP@lekC_gjCpl<$Oz~C5!&=WO~H(UoQLovTU$TI;Y}PfOWBfPski~(Vek-{46VE
zfClEE`#7z8xA@kF^pD*i7h}`&%XDFtUv5OkBxRq$JoEefF^q@gMLJ0R6#2wlVZ`v+
zgRtZNWtB!)*y@0zzw-<Wq}EX3wmr88AKoX5Iaf$`7M{BKB<)~2>}-$vZnfH?@Yd3B
zfUkQW?iY;=rD+ECk(X4xW#6(JpzxYyqIIZEt^3QhrJtrd(>2-y)-=R;olw;+CZ$Wz
z^H#CFP>jzLEq4P%%8z%-g$FMNvO5a6Hxx7zSGPP2rCrKXg@VJ`-(Q;X&kkARB;CkR
zBcuPtS&mX*TyXLUI{BG$R1@*>m7%14mYpB(xgeaZzCx$zT4$WnvOf9wdzJWavUh@X
zqKIQuH>Mr)Z&+bQDLcpe;{GftP6c^$Ns-s8b8GBd249Q|Si`x$H>CG|uj^Z}a#trO
zD{+Dx%M2zf_0@idg_a6u1|_l=3RPwItKzANDV?M!f+8@x$6AS0hFu(XMhIZ~t#gy`
z`T_*d&gtNoYhUZK6Nejlpkz9JC!l6PC*C$*5wPW?T0cyKs;wP`y_95I32&0fJ*4oG
zW^Yk>ojypq|NTAoQPjF%b2f74MalGK7*7qn2D}l_r%0yv=09oxe;Nh<5nL(@0R$q=
z&GCQi@2@QSrp3>8{rYwT0epWONO~+|STR<0M5fGB;E=my(gjre7ibHe$`6HhWPW02
zNJBN3_!CCh6Qsv^k#hSrE8m!B;0ZsrO`;w>kEQ%7W|6QAsPCeiU_>^hp;CIO%3m#$
z5@u{trR2yh*!jVPf|SLpX0$iS;*gAkg!XvoB&s*rOjZVEsW~kvi7>DGc&;kSLX}2k
zhm!3@<y*}`3=pG|2672wrpff!8%}IaXu7vNhX7t&^Cn$GD)$$gC#5ew&2;boETgWj
zYG|obQ@d}r=1V{!I??!T4>@kDd+**i&f1yliIx;Aeqn}_c+$VN*3)qnSn_e-_zf?6
zguXYQI3IHuwQ5`MhJNwFjn#2z=GU2>skw~WHM^WiF6SKhgi2H*(Of@^$J@b};X{m(
zrlN?;iqj5hmhpo*<o*ZM#+qQh2GwVAL{=--p8$TJV(~X;kaPq<4Y!H?S-Wca;|XuK
zIZlAc+D?E)j#`PSiAm%ti#|ooXm(^Tt6WuX2Wgn+-i?@)3m!>;&hhnL!mj+>UVl=1
zjy&oMr)!PbPUDf0SYDUmpmUipN&R5mB2MbXN4pZ-;!A2p;p!y!-y>ChRfsL~mdCg!
z>Fe@q^CGHL?QNugh%PfqdlcQIxLQX1qlHr3r!i7@tO{1l6R#7yzh9on0Tr)zQ$JK-
z=qd4}2)YMzT`R-+;U^QjtTlerBph$tCG<w?ajjnImSz--$1GDN5%qhyttM~HaZlQN
zJH^$;hA$6E(X*4OL@0MYKEv0}@;-$O8XF%<M^!;D+S3&@YDTL$X*Cqbe{$;~ef@~R
z+`f2rG~Wol<cXq$yAq)*{7Rza3MR0|+`R#Ncd4}RCVAmo)2uo;y$neM?VJ>7bu;eo
zF(DRfei?CvKPr_Si)II`xxRhrtz=djqIrFP<pHH0ExxT5xvl4|BV0v8*BKcSshkPW
zg<>jBb9qKOsPGV16Os%R_cUvQoOb)k%X>(y8}MS!i+)7Xs&y<=;x*LQ)KfG#L0Hc!
zy1eb3#lQ3sJ6E$D3M=9Hk~|#ti>{|Edz+ul&g!(B3+W?pbMp=YM<altOoKfLam(E$
zSdtceF&=I;)}-NHWH^xbMZ3qFCX}zdDkfFwIobpK_daC;Q2I_ORHIRhM6T@wY38QM
zMJt^A^Jxh_I^A%>w+ztWnG|Rt`_nKERgc<L=M#mr()qI+XZXvjfle?boUSEKICFJC
z;sfcfU*L@k_uKR|J*bhGS6Bf4)}y7^d;8b!Y0<pvcU}i@mpU|*g&mX~u1^Z3(i#cY
zt7LO9#_OjDvooJw4>D4YxJcaeDGHX{`hnv~y~nTikdH9yS@Z6IU`uD(uX;@KI<icc
zR2NM*#<0W-)^gX}jbmX<-I7R7mTO(FJ5AT`zCy-#LaM>|U3l%=n$wVKW*gm;DSGa4
zdx>zuL>fRzVme9dX>W=1ULG<I6LB8%dnNYdF*2}O@gFTt5F)<+H9w_rM!uua2~~==
zF^xxmj`~#r`H##fft3qjLJ;XMk+W#2xpK&%Ab;U0UzpFD918$qEZ;G;3Vlwy8<rC2
z-WKiE);0tfd$n;LLT@169O?v1vpaJ|$l=y<Z9Kaybhz60_QR)n2jo6BJepUe60RAp
zQMMV?N(ex1+N18xRYtnIJt=M0*4uUMo;2%Mlxr3Cb^=C$VABSN>G}yL>;J{tTSrCt
zwq3(02q+~Wol19i2}%nHNSD$B3@Kd-(j|j{v`Xhl*8tMpB^^WekOK_!`!4VIz3cs+
z=YHO`zVDA&ti`M~=auKVkA3XDPp}rKnNO&);kP$mM$*}8Y}{OXxe*{%axC@dQjZHl
ztGwSbsMBx!5@{w2XB$3EMw3W-Rp>->GyRwdFk3HwaFjnT5;KU?I+{JEiAeJpF)gN&
z&ejsqeLZ_|Xhtn#pwrl5kX%8jCDeyMa=+%2fP_27gQm|IWzp<EO@S-;_CM0Xe`w?X
z3u^di8N;83fEw4OhK9%3OvwO3#Y;BG8N&42&_wOq{V<>vjIr@?2F4oPAh)b_hig!<
zV=kMZG<o2Zp(RwCkWt&UfazPNI&dH(v~Oawmmqa{G_V3qO&%2z_eoX_)H63YogZz>
zO0b>1XtC;TrEH#XDl1=&-yiH6mi~QBXTeE5Cx%&1g+m6cCnZQbWAC5Mkcq!Aw35f|
z>JxK4-?OMHo0UnOwRd}`TXZ>sSxut8O;XKo6gv$?V=tZ?uE}TnGL!gh!S;1v=<zA%
zT7qngc^hA^Z7J_cC%ag<NUPl5V&Z#?mRXM^cAsOANK{<zq|11Yrq5)Lcl9z#yb@8D
zA6SI+)}G+DndZqpbxjJ-etp_s+q3-|^S&>OvPg9SismFdYCVqO7n<p3psvo8_4Ltb
zvQ%zuT#Y-=*XI#bX`lNDC)_@U5OQtWi=<h%PHxY>*t@K|$7JGL@R{QyVL<X*?`O0*
zO-h0)TP?V#x3gMZ*vJoc<IKBGmtL29BTONf_v#guMh<>thG?pLEW<KfoM9{RD{*b4
zJJ(QaR2u=q#g4yRcq^q3O^<S?-{$g1zHt3LGfjz_71_0!L#MZ-Oiz;nR>`Fp-dehy
ze()(T7t%Z#{Zt^!bP}Ez^w}X@@qpqm7q8Y|*yx8|Q+1%4c)rKT-2Eh=5&IYlfubDY
zbOt)LGoC!|H+$%=doFG)Lvh@OyOo2^7Uo3e4udFp#A5nl5K~f@*kOr6Gs(tcpUoTe
zDtK<*ANpcZ8+x$=sNQ))G)ye^O@Lbm)!i$%>KJqMGlNE<6h%hk%7o(x*SBBQHAS27
zDA<_f#ii^frYoz|r|2sPN`35Kw>>%jPy@wx%odqKJ#=$=m!R$#D0_7JK2Bphvtp;O
zLn*56{`ZlC_=Z)a^s+Rfwx=nZEyJt@Y%VfiZ($!SVQ~BX>~m{pf<tZ*vaqYEv01XB
z+}r!|Qn}&G&YM)&_qQp@izodH*=cYx=_Zq#Wxy<qGYq|$W6*P0COj#xk2pqY`LFGw
z)IADzgBW~P{hO;O4nMc08|J1GhunLF`^Xg=TRy1pJJPO$o&j;0THs^7*eepA5Oi6s
z<!V!VYd&*om|NUMs2<YE#whz7np2|{jTRac)_9>dSxXan#Fsu+zS{7`^ab5lPnE<_
z*RKKK-H#sxOl#<Q5oWa)TZQ0q^G@HQka}H~t{CRMrI)cZyhN^D(|QJ9%B#`kR~L)v
zn*A0x=r-N#AJH6<z?=U!ecAu?7x1$Ez5Nb&1P;)&fX-X~q(=haF0xY5@oI2RN5_m9
zsmO{$pb7FZ84eNU+}U$4E0e&Ym#5?09hi8P*0Y<tj~%0cIF8#G^8~uv+3evH8VZN!
zrQZ-rqmH!ki3-aBh0JlG4w&`g-3H^Zd#izd`yKO#+Y#2|tJ9X#-92fSQI`!rKlIa%
zOXm%IOA3VyCQee}Z0-kYY1g!w8PDt)x@e=Ov*=Q^Sv?xWrRwckJxnN;1rc8P#c>Wm
z=0!{Pot1sc+7Yv0<Zm)-g3K_+&(Bu@ro@92%*8f|x<EJ6sDbKMF7A98)O`pCJD9qb
z?;*S*)~2e!K70DZ_Pow4aV&Kh+(kp1{Wg~Qs$7fsvxC%ApEXLBRKbODoU9&oQ$jyK
z1$zrZwiym-C(ADm-N%e#%#^l>3#C*YtL!YEE`|(~6ZIK>gfy^`>HLN9x^3EpWlBUU
zjgPlbDlgp*#O!rpYpE)yt4C?HsA-_jsjW!%{eL9${*ZnDH-w(~+R0@5tmJY;$)0FR
z$}Fj7wUIJQ*D=Fq^QWnXGZa{BH%IiDp0W&or}mbldDeg;8c(J1@pr-U-me-pf+0G}
z^G4~SL4I%fSKq!pGqFL6nLBgU@4HN$3B`_xtEuIs9Ib=~e?PRKklV=KTe<86tTMe8
zbUV3<VEsj(xC&AYp4-csH=qtU5-aRYCcK#JfEW~aY4`=CcFO%b<%Ja$HZAX#qWv?*
z;@grpNl90gy@@^{>}#{N?C<1h-4=&RO8B4PFk;|5=W+_VH=(AHIj7`8`!ZjH%MfUu
zlc0o8s1<(zHl7^AsQ~$PM-}Ju9cQMRXc9;>Z@<MbjRo#+OvX(7Gjp3C0V0UrNO-gv
zjhg>QnXZ}2xSiOug&v#4`_<SiudNZWh^dce*v0F`FpW|qHQ&R$M2B>`<SYo4vG~X4
za63;M_ge*<2yTN`SFWArHcI3>wCL`<Fo~jLE{NQ?tls=ppOx6`iMq(|cm*#K%E;NG
zfpu7^@iEFGyz~S$e$G46?;9kAmMcCZJMPem^rEiF_%WO(oNC;bb}5hlbCkB#;ATjj
zw8qNLV2~g;>7!XhSS#+n;C`xpkZ8!(#KfpZsxDrkuR)SoFKL+#Pr8`TT)o(E|H7hy
z-r7nG`oYPw9Y3P*)hWL77!cnUEc=L^94<B%Dey!pFEVoK{tF20hAT&X@DtcW-@ro9
znT4akJZQ`mFHm7%c~T>NVsHJW6|??Kkj|H<uD2V^Nr~}5x&br^)w;!;T#K%~3p#gA
zZ|jtjvD2%pK^lqllwM{S@$!OQUV2?g`i9jtG+GXlKp9I(?hV^@pXjbT)qB@jDgD0j
z>pGK8B}a4>i(An|8Ozf!9g5pnHo_&=TRaSrqpQPa7M;d5>Dh&aOS>+GOO7OpkM>9!
zv+UxA{OhWe>z%2t9&1VLZ#Qknp-3r0YoXZ4cOo2CFiHCm#~CG_OCgTL=m=Sz`mdtT
zjxceUZF5b60j9mrc^2KwH?v`!&_P7(km{C$y)(-JB8!W?;tBM$|4zU6Yz;NM7ejN%
z;{8}zsh#l+xdj%?N;Gxdu|+}nC+uV{Ql@O;SKQMi{NJ|8&+iM;8DbM<@@n{X_>BIc
zxdQG%m7%8QhQ`V+Yx~>^KWqEbCnU79o`EoYP9-`qLkOh|=*m#9PqZRwx|+;3sN?EV
z0}FO%r~@J^)m`PPaoHzJRbp<30u~J6bq;&G9PEE#m<8u)@aVV$LX*xMDT4{o6>ON4
zi|0DcuqIr$W%50q8LuvO)+2RaroGqPjn}Pu@q(JFbOI~TL?1EqV+os<8pJp(L;|i2
z_OvZ!lIQ%%T=VLUWYwnMh9}g*A}Z*?l(a>e<FkF^lZ97xZlIg6&``-2phq1#>%`Bv
z9^S|7q@|ajD(GNUK=GW!xA~UYFW;YKnXXkSf7Ukn_Wc{jNJQFUmh!W$r%5%gzjsZE
zy7=&R&;--pPBxSGEgVEY7fpQy^LKms`dBih5Z}$PA*-YepnEyg0RlMDE-3Hs#-@ut
z5IlD7_Y2JpZ!!8x^!<0I3GojIr(Wkj-^iW@T(ZQT#{@owT{vAq^fjqkN!p6(H*?7^
zwU@<iCNZ&@dwREMJ}^QAV)gxY@B9MF+p=JTlNS5+`#0CLWKXn>ss1Ofg5i&s?eAi;
z|368qn3E0y&i!@1@WYFiws#QpqI%m=BJ8bL<sZ(9`gdA0>xjeI^V#?N;+}LbG#l$`
z8+wz4e>N#yQ_&cGz+uWJu)#14(}wt97)(-!*CR3vXQl0O9V@lm3YJ_n6!|a%(+60R
z71VLPUg~Q~w-j#Ct~JH+k@;YDh>rWTc50n$+;C?Tr7RrW#Ec5(fR_Zj^c9n?d_Rkx
zpLW3My6qkoz=PUmFBT`<YG<uBZ};&I1&>S!)RxuNiwNhQrQy3X`3e5SVkmzDtwVXP
zS>Pv-S?o7OgxexCW*XP2oM@RRU-B@$jG=jnWvjfb!k75*$}b&o>5}_s{X%1(q*O9a
z^i&6k48KsVYldvSIsFkX%)a^TZTy~A5RnAVhi4+r&`q?(R%nvN{wOMK)z3M(#8FJn
zYJz*KHRl1WfeB=RSv>zOQ_nxcF+*ab78bRd&Qv?0$T^^FNyIn{3wSooG8w?J9(lw#
z4L;wW<A$f|jz`mE7$_VR?HC#MvIP)N(r%OO1__)DJ)|#$yHFU3#X}kECoJnUs(<%^
zD|9rfmwHKkTb&<29lQs5II7l^v>9X^BsaUq&Xv1CK6yOREuvKS#YpvOlpXuBuF5xo
z=g4`(`wyu`2y~&98#O1{acf{Hg&AoUDWhd%)@pRm&6dh$jY*8ZdsmH=IzPdw^N#EZ
zYwox#8A@`Ju_e{87Ck|<jyKGKRUTx{&hwiyGNpq<NC>mR_Z!DA3{PQ?eV~-R4lywJ
zo1z%8Np{H+(RmzpncBn_;atPvNm?Rb_Ufw2bkRhULNg_pkJz<js4^_Dzt;wfcJgHV
z1DXbz-7(w4rmP{la{Fu#0mu?+%+;MI+PyDb55}+SrS7AKNLwW^S>rwb$lCiO_%5yh
z&QgYKPma8Xh|pe^vDyOv<>h7l4F4jGJC%#pU3RsD)SK2rTG?4I%^%K2wmGf3$Xo`L
zhJyd40`Nbn{z&iI(WijouPKhElRBmOUGbi%#-r}M4z{oAf=b=$Sl48c-0q!-U$@=z
zo7?{&2=AT5bhZkp%Qza1ou@Wt=uWbQY9@X^vvmB*%d_d^{NTkW<<l6?#OJ0zyFEmW
zmBURIOwIb<)kYP3=4zdK5dV9snU)ZMhCA3GFqjuwK{7Ew(U7hAhpMZSSjA834&*CE
zrmk;=p6u3YkuNVBIn>?6>euzZH<oIvHZw7O_^Psww#a_6-;S0)urT`iwgb)Ba#9$1
zzCr@prl1CQc@&L^IXNZE4vEY5lsq~b(iyk6k+<`9uNJ8x;#~Od`-tOhBq5%tBz|^5
zjFeQ1!X6C`F8$WlT8Q!!HM6DPtDGep5UuB2`$Tm1O$H&tGNvG*veziJsq*2>4+%*s
z9j1+!^iCxaGG5f@T*2W$E?<BYTwO(2U9@&eTB;lbdNNL+r2kb_G8eBPo2*vn*YOL|
z4_cT^>2EGTvUL{8=>3HmczPAs?=Oth6|2=K%an)a5660$txLJ^1%IxF5HW^o&(75W
zzYC-BudtWoxe7lLF+hAuJzaDd9~BIY3hOG49GCOB{q{X)h#>Q_LT&I@E9vC99D!j1
z?y^q_yvwWJqrb>li&GV^n>n)dKF6t?*JGjUjOy$~eYFz6V%By|zPs<Tw=xUX$`p}d
z(i^vpUofan88EU^O|(^tOP9db{`FR{Op<y8TH`7HK8~&3oVkXY#*uIyC*sH&RN=f4
zyz-z&fNdaA*7RN&nijm?K;ZGK^<mYC#%$Muqcq4bB^5-N<FYM5ym#8H>?%gSxU3Sj
z(P>RL*dt!fe6VyQ6%@Sjis?OU`Y#N=v$pT6enFuX4&ycR`dJ>n)O2NI9j6$6tI0Un
zr7OGXDarix(>yHI$*HcYx%R({;o@%z#rMr8Z>4=AEGE&cJH{g6g`VKTWmAFdWsa<;
zUm`Oez;(zfKTc8aqA>G!TgAtv<>3jDS2{k?XX@EABV<z*e48rpFU>Y_>4R=lV9opY
zHQik~{^S&F5gS;{=3F!Ik6Sp1bq0qSYZh7+W?_Rhd0e_I=CoU;X1yQ_^4yPAyR4PE
zb3wQYdxEkj5?HT+7d?pDr}=di`7#w`MqGr)L=%DwWlKCt85tTTO|euPu(<ueA=eqt
z@%~T1AKT4$lRpi!{v0Ml(0q8Y+ogu!j7k4M^|foR%B{A#05HXJhNvE3Yv@92U<7N!
z7-l}fJ?Z8j(Bw@p4X+V())bJ=n~?4_TP^7{Y`iDVB`R<_&QE{}A4OH@!}dByckFOd
zf9$+eL(PJB4{c;^XKh(6mr7SsR?-EIih)|XYLIx{wvC?4llcRk;s@8&@ByyFC6|s?
zVuW4SUl^pzjyK$1iT3FlEx(l@SA#G+6+P?EFSazQSez`$sD5!Pv$lF8TL5T9;1k@X
zufArVS6|y!8M3=(-Dn6;yuyB5yXZEAplePBNG?G)^$Zs|q}+xG&B`De=Q>+Y@rfSE
zf1<L2{}_q?*V_M|3Bf0?ag0ik$30D3sq|500Qpx(Y~@6%dCV|)1vviQ7G$LK0+oAY
zd8W^A!EAanE_~eOxcr^Mr_yf8lr(x#n3x}TB=u;9G0i5+)}}lOB)8^g;Ph`MI(BI`
ztiiSzwDCS7Not*vgM9QpD;nviTb*4LmuC)aV!Ww3;a}lY?lgecPD|t?Yktw7b(2%Q
zPRkFKNnG{HShZDb*T$Z83@kYFBXzJW`V=oCLmgxnK8%&r#3b1DDGYxDpPl=8|B>69
zohnTKPBaICEsWRvtkXEFCrvoiu@+WNe{l{j#FvRPsYUe09@P3LJT}@-{kdmgs^OkW
z^3a+-zP+k*jCx>FSjN!=M4>c!#5cq!6yuYv^WmK5CoNIAZIiH*cDufA2oV<X@3AYw
z@S5ePvqxTcxjK!hPFp+9X$uqtu>*p^Gqm{i<~Sm`g+A~ezn7`iAiu+ly!04~M*9kD
zrL+YJ5Ux`-ZMK&5MTOtQ#1VRri-yvCYs>2)t#+}ux7CM|TxN*hJ?+6KKh;i#!X=nk
zj11o;M_@hnBUb!uI-SrJ^fat|nNDYydYn0)q`E<XdG3siKj`&s{HnNw#J&z_nGM03
zB$D5gTC!xU`j!qn&yj`C^>lHKUumoh^2=4rxZ}syI06HMY0tr35gCV5$Nk1u)MT?N
zlU0FHl(bjb4SQa49nCw%C%XS-#EmX5ko`2zaJ6#HBm1ulp`&Co87Y4^OQ$l{3y*$g
zhui{HR~+O01qFnav7%+))-twtyqt(vscMY`ruT!oilC6jB`LImm)yk}4m#HO#&1w9
z!Dy@&S9rRo)}b|kF|%wOx}wpx+^cr0NwtO|2q18B78w}>`DZq<O)oh$T`Kn>#EA8N
zjSz?EryQ<mfXB<FvL&3e`RY%Ww!<kj>-`<)a<ewyhZPb$e%ox##uP3KXTFaq>f45V
zdGQy<HSp=3{0k!*>VL9X=1orvLnze}8``-%>!3}xb-UWInktgkAN^1hhi8E(i23f5
zexyz(q}>#~>>nAD8f7DeiCTQ8inU$mcz6mWIyJT7Oy1FiGSe7bdDfv?4_B62BSvLK
zyKj{>dc-tG{Vk4nXNRu$&QuWD-wDcFuG6=;m`}f{+7bTj%{+(|`dpgr%FpEo*F{!(
zy4Zj`N*zdE6jZfT)$SAH6)sxeZ4VeARW`i31C85oOjIXZpRV{+_=0KLQ;B!$_Nj|*
z^>c;0nO@bO_&Q98O7w7zUNA&t3ryG|uqbYPqqQFO(;9z1vvhg7nKU4OTDg)6-&i{C
z_8L1GWiFZz^F6=Sp1E{bK5Bas1m>BWHi`DY4R`~ecDgZ>ZPhvoOdzOjM&{ZSEZNWa
zC7+9m<){0QoJ4N$T@A7akgRm?uZYm+h;<FKspiN}@*VRCFO*%^jhh`roz1e-68hg<
zLGw_$Cl>22A?JKZRcZC_Em<KoASU0jer5vxCCY5}rMyo+cUbiL;pLzm27Er0)oL95
zaYs7O-BxpvL%n{GTlSojxj4^^`*))hm3a}Cr4`~sH2299m{8wcPL19M++Q>wkB6^x
zb4P7`s9jZlQuU}Nb*=cc1(rj~!{U1=LbGEHc~EPs-cdHQ!(U0ljMam4&+p!R9ZcDO
zUBji*nD3L*d;9ZYKIIj*R9f`A?5)>WNsZppb>i9|8pSU!a;SWWx`QxU>nC9b);uh*
zFlR>VbgoF-u&8_RbR3^W>&IS|?UW+N<U#lDvh9#=d|gJh7Ej7+YtJQ}DtXGIf@{_B
zG?KBMD1Ye)syOHH<ypc+`->;zv_LxANmXucDfN@~S11jBly*YqlB`NW%E-RD+0iXu
z1M2SQ7|JZ)thWdhVj@+fsbgqsxS^mVSXPD$ADc-DW$2Q_Tap2wOvU@=C<Diq+P<hX
zzqROwzESDf$x{?5GK(RsZA}E-@fk#Le<@r@emlm9a4M_3E88`4Bj}`H$RpFkOgg6u
zcoEo*Qi2J&&2^o=wA?|;nD163Vpm@>#Dxt+^etpYdz@@Xz!8@7O98G+&aL#Rvs1}k
z*GWkG!r8Ud{^KhK+OOzmHHkwmeE6RiX=+?*Gt2vXY;l4~Xz?4a8)#?#!U(-ch@>Z+
zp4F>UZd$lZAy#)g^__iP!zYTFu>AJ!s1TF2HF>hl&L!3_ul_R-JZfcVE}J8k<>}~5
zet2IXLU7<iBVqn?wxA%>Rk-Hts%>L2lD7lQ+i|2tY3dVltCZ3{FAk4$I)vEqz<7If
zO#FooA4z!%@e!Wl?o<i}(&ZD7nzVT<+BD3PZW+u#OpfxKS~HGYBl=QjbDmsCA!{|1
z-?TNhgs_H7Y_#w^Q(7&3R+;qFkc84MGxMTQqbNYXVS?g$j$T`!2-B%zWeY0<_v!)1
z)>|lMh(LE>)Y|b}#=2;EiG#6b@e^w6x^&a@tmceniFZv4iPXyc4a8)&`ueUzOuZx6
zif%UszgD8tm!tS1Ysw#1a9iFg%^0ncyy8(MrF<s%knIiQMpuQn^cYNP?aK3_801oq
z=jiV^2=?T<vl$i+>UO-Fvnb3-mvxB0T`x1J^Mg3lukULm4Ai9_mYGwIzKM%X)03HU
zJ2afHONE<x-Dv2VfS|{$n_JnQ5T)K%)dJF9&|*)9PzI87=%e5caBwc=d2$F%>N{xy
zVOP_~&r;MqKaV7~DpBQPCXPOXwKf;|XeZ4y=Nr3MSJ(VFxDAlXtQGI2!}HKpLu=_>
zWeWlJfb6!vFl5`1H^GQE!5wT+z`p}U%jTf;{6)ydf&Pd;HxLw&EQ<s(vRQ-oTluc7
zuH?`vh@5|)hjY=yGQsG;;6LTudg)wIE}HSu2#D3;3`780;um+`-G5<l2W<lgkN!W8
z`6RfDeo$_EQ>#@D6&YNCY}-s&1m=6Dp5QgoS-?F6d>FLQoC*IvJk<6_0y1>Y4uvYd
z>II}OL>DU*sLETwK+o(mih2fA7N{Fw;R76H-9WhNznrq(!4&Y1e?7^k=w=`jH$~0^
zIPL^0Ac<DX0=NJcs6aVniQK;(LrZ$J+&Ym>&e>_<3IqD3+-!iwY41@mDiJPs5(TIX
z&VWw>(Dfx#{`Vs=sMc0S$sbgsgWlW%yis4o&2bFc@D4~2f=Ju_>vb&p_t7sM0GcgQ
zCM9@uASWRB`Z2({A%X`P8i6~b{7<Lh4cjGXqQ=aw#~8>j=lR}L8TicVndZIcSSJC!
zG6F!7MTO(G!+(n+Cm>BfC#z-T)<=>~R#Xu8Lf2+;Sq`XNL~vK|HFlqLZT7Az-`dsj
zb>a$_LL*yg>Sr$R!qsox09etag!r)BwaVbI#$FO0M=J7u{CwnlIm&iMWRz-W{y=vT
zRBtk=t^RApwkpczHKc<skt`{J4|E+N?wqR&U~EEZ>cRCT>dEIh&t=I{rk_qTXB$2E
z4YB!j9m7GqISuPNy#)B6fV=+z--5Mz=(%RzF9b3e%<%C!f!#Lcg^!s*A3ug!KL54q
zNBF?<+l2lu@Hm^rnI5fNxa>DxWQ~TSWb#05BmrD`KF(kg0#O=AzC$Y36nXbJPl{2-
zqz(Mv%gy|v8}9s$DahiJ<F)OG8ivR1xyB;3e_=#y)~ggmI*`<KDB*VO7KVYp{FEB&
zS|$C}x7F$o1M(U?3B*AZH+Og4k+F&!s-9emn<2P5VLzWUzP0*!PDYpyCn9&0bfT7p
zmMxqAo`(;FfR<GzF)<%?ef;?Aoc2+&8o&ob_Y1#H&ARO0>^B}W5O_Mq@I}1do#iRF
z_nM`y*1#^$Eg6Ce_QY%~c9m5<h6%==Wk--rp_DRi<p8C2Xjc<mMRlOdy6~;u6!!WO
z-SWy1DdqG@tnLP<Pd{7AR;%U7Ul?%#7Hcol<p><b{47m_%S?Q;MXV;7F=KD&f0T3r
z0VDDRhb0cFmMc2o*~Et%58XYIwm$rJ4>S?UTN~!O3Ch{LGmKOlSedmrlP#H)##!UT
z^=VU>b$Tb*yUr7=5r~y$c&(4ceA+4&fE47G6LpoB@hz<k5Jq~sx!BH6H#RmSNF9Xw
zJt(JG8p9wUJw=$;&wl5CmTwJTHa2p;ShhMKEV}5FyTooZdeU&m4r_3A=wxY(tXUVi
zC>B|4c}*)v4z>&Pt&EYgJ><roBZ+nu=ABkPMg<>vnGHAWZo9vTK6F{XIM!var{R-p
zR=hF0ju%v2x();;hO9D=ml!HIOf!&ZE*;AME*8?D)WI*KV^(?82%aLbaj%dU!VFRS
z{`^*fR}_Q4q>KL7s==3;Pt<j#V3KyQudsH7YcUgN?5XR$USrL>d&WR;H<tc<`DP7X
zop?dw6FYG|ON{>Qd|Tk|{_jZ0bX9r-kd5WhMvA4os*I{^Ex|uT?nT9wDiNB0VSLU?
zxC?0i3nQ1jHG0zJNVs{&6HkAE8=unuCiFlVyVYK>-+6qLcplMD!?7PiOFYxObpNU+
zn|1o>__;6sEGfeg>$LenugfE;oPCQQCt{Rus}5wGWO+#-8FS3j<+fS#vg%O{eifqH
zt`7ae$HAv|jXpW%W?mQ6^K#E79xOb0jzJ+^`3ufGD`GgG8WzO38$_f<W9r~lZh6u!
zu1J*%ZhxJN&DcoO6XarQ3)`FR0)%>i_>6=8Z{o9c125TMyc&V6X6r#(q2KXE9*I1$
zEUQTXWc+QxLYq4$tgHgsvAH%|z_fVVw!Ym<C%4WJ4k-S1Qv~PDbMw*7%pVn&_uSga
zN(M5F;#YX3QNQR$7QJN*;$-<z9L@EJ?AkSUPw!b6$g^-6W{~(iB?Ss{t?s9MpO)3h
zFAmO)#m9%pN%XX=cRF0PZ-|aJ#O0qFST<5UGI74gRBy}+lV5M9!V;^JfraUX^gsGO
z-^uCv##Nc|3Mwe=pQxz7U#Q3442>w&slKX%SvmK!RPGN(2;mG5vrCnF9!y`ZEPJ1M
zFW!kDV-UA%D{*DDJ`-T`c|Ho$xz<7uc3R%TSDy7Wo2;Oj#JeB6r$i8I>vjou-v>8D
z(J+pa$zSy3&1RbDo`LNy<JybQHISY_ZQ<Q=l6ekio|U0b;f!U8Do@0hLa+&fY((qV
z&wpy@4VBt3$B~S@)h1Q>Cd3%ntd1eiB!LlKS+IiKHzK8@r-@l}7E|9a@oj!`1uk+G
zKQ<kQzk)nTe&ky8-M`k}@o3??*~GxV{Hn3J@9g2!W%U=+CaIQ-(=$Inky&ncG1>#A
z0`_=FpULoCEf+fonHW>_^}JMh{})ExqKmEI9b_q+y@Ann&Z@t?EXIWf<cgwcMS6`5
zdD3LL6KGgJYJDEg<@=OV^KfBMoDtk3bqP&9;FI<*>6oQ9r4UPeI&V(nBJko~CP|T!
zt0M<YZ=KAt+#^Jsu_p}&eGN5FjY^Yd?}(@_wy&8<T$1_=Lo6u6MDcsCEP1bFe7!L5
zq?uo-*WuY-Q1)I<P4K4+2E4!m^0vy^jWPJRO>L;g1ge0Gq~nxMNoDz<W9Qq~28mUE
z4C+<sU_?#_nlobky`N|PhH_7OcABr<R-V;h{NT_s>jKle__Z3|wLQfEDywpz&Nn#+
zO?DaHqIgc>4-$V$W^yJ)*9ZH;mpF;tN=z2#x`u0{XO@jq_CFY5jM8z9bh?eaP%}Nr
z*Fh(u?fdy+%q;7h&%}y9+v+B8Wr6|gL~?Jv-AztWD?8%2eTCkKJovFs-5Jo7gdyHv
z)t$_-)TDmY8CX(DXZs2!stNP7ythZ>Wd9cih#^Aqs9feaHbBlz*uW26Sc1jh=}p#T
zHrESwVN2x-OIJw~lN87GC!J{HlUw8dgO>mdLaT*lO+c!P05A%e>v~B6`9p<6fK_7A
zshWuKG+&sJ6q}2Gf8cU`+X1&9sJr8~<-$AZupV|Ur{xJvu)w=8Q&yckVw%pM0K?=;
z?NbdN|28xlvUu%2C@flc%6w1Rb09}YQ&pM;NJ!;+d6E<1w3(z+H7(6RFkJh+ep0w`
zc~1<Y6xO{oufdaxv7uHOfo12yJiA4WEbZcM*WYG7!H5&ox;xW{UW`(Jydk?c8LA-9
zdkf6E3YC3vI|Bo_a@q#G0)2EM8WW}9%ZMvzp-AnPqw`F)O3_9mBu6rnZ=ZME40>s>
zv^6>gB|%vtJu6T=NuBj4Kr3h;@FW<E=Gs_Rfld{4{gsQ_t9-wAd`^@O<fm#NI}HQy
zAxk=d5ATBEQ9zgk0C^wU0*F}70=XWH5IL|}X0t}>u}>803<C)v^j9c3-3W?~hP_4D
zX?*lT+o?=?G=PQw?c(O5Nrr>bL2U>C)T}!KKN#5wV78{5_rcdpNp~s$5*7}+0w%cZ
zVa5MAxNvaSI{*qVX*J2AJ_i?5wrwQ<%AIS{xgzKvTw47HmqJl)a>(@m^IpeF*r9HV
zuap5qNp!(Pff~PE0mO#@pa+m?iX(tb0s17K4WKoZ|Ic$Lj`#!jJ!N+QP$`ejv-}Gq
zUCtjs!dkXJV0Qm{Uclq{Z%44sznOD(RJg=|R*{>EwK!8g4n{>COc}%iT0^5hMa3*y
zJO`!0@PCf4L|csxoVv{gDg&IG#2B>w-7$dQ|EH@8jQ-Dy3dAz&2m}u^v;fD<R;_Ig
z6d3<<3x$LKZF~f!`{?zR?h&x$Ff;5a@m=R$wV_}B)5HHKO%y_D(~!*gky_RIZAl59
zkiaSi4s+7j8_)RwG3J05CylhkB}TzJ=Ov$9n4>bwGQ@Y8e6oHdt4WejskCExV);#S
z9Z<p;PSCf;CtDH4JFGxG(L+>1<<dGWC{0AxwM)}WUDu&B{`pr3#wu;nFw*;%Eb(+J
zgA(}tI}d0}*ydE6H_v9~;YKPKPp*@rs+FF0va@R6A|Y4K{LX?&FtGeHx!9E_o{^DV
zw4u1#9%!+ohWCbT)l)3fn(5W%)R+?Eug?ziR3;>C9-Hz@Z#FP};8{j-A;B)+D!w4T
zv`7k5hwKr@DHx%4i7h-n5?7ILv#2gVLZpni<tArX%vzjUE5FIPm_&^u4(%25_L2aP
zTo*Z{-^yW^cCv)@i3_V27eD2L${xqP7$_l9y)#HSRio;JZbEsjMStMQl=+qiZHMa1
zcSo3y+a#XCPwUP;xHk^p20z>h5=1b>oG&R1m=SVFD;LhI(i)J4xp7ZMF>^2_^ReF3
zk$<Gshp{?Pl&;|k1Sz85u{f>(#@<s|@gJ?_H77)&0g9|?K4^;6PIZbXo|-70<@L3h
z(`8HVjUn%{sQNAT=j}U^Gp5T=kbxB@b1T1n{NS45y<Jgxrk!@eS4m4Ig4HRH7824$
z87|&pW>e%77i9r~Yg^H-pxQfNzzw4_5wfEd3K+{b`y1!v3Lh(tx|*NO>09?i%DWe$
z@J&>V7+d7Ib=c)ZDT~i>qEFI`)b`fDI04+f_J8eQ1k6v_1t+!RXEQ#V@xB<K!MrGD
zNYQKAv6#3I_?(qEKgFM9{A3yc{Ua%@=EDA2-LwnOH?zua;mBNxj?%~2S~6V!VpN!V
z1H_a3y;0dRxdzkT@e<st4;Q13?%WKU;ys|F7=aKsEcCQri63c>3Az&anEr*~8Vt+1
zc??yoM1&_3CKT@ag+s3R3VS`M`%>@ocWl(D>e9G3x9VmSiEO~P%@n02XV4~&i=AYn
z11)Li=Cya#>nr#B*UT8Ss;aAO;&JnCttXsJjNVugIpw!aANEUM^dFz`0wI+?c)j|@
z@vC-Y(5XfR*X5UAU4=r!G2$1g&*P-vuc&RpTC*I#=Wx!Eiww`GJ`#WgRHz;WI`)VF
zlgy!+@s;k}W?+>s>s;1CKo3vssvXsS^wz*W+)N3f)(@`V88M}GtY@Frw_rNX7{%TJ
zKREt%D^J{jFr77L40+wj8L}l;&3GVY!u=^e7a_9ky4#A6II4xOL`tHFEjkPL$S*}*
zO=VU;^8B)gdyzk6UMzDc{q<aRMDsyFQ7a3AdXN03YOmh%W<mg8C~D)(D$d~T%YY-j
zM`|Ak1$x!ILe~>We9U)`1H?*9cRdE0%?|T@(o!oZi>au#v0L<Lj8|rwf*$pjZ3hBg
zSzwB7`*<na3^auvB3*!&_V=YMc{4&bC7T5z{`TwAf=okW&Bw^M<PtIX$+1nbaAwlz
z-mw}eF;cf%ay#NZ&Gk7H6DeoxxDeCqy0y3U{0Ym~-@ySJ1kEZPr=#)ru4A;2q3~gj
z{6L{DzqnG(W9D$K#-soU2HgU|peVNL_QxHLbc=)lkMEr<tugC7%39GNY6Eru#vl5L
zt!F=#F)DkRPaVFbdz-Zlp4RqF%mf2mU)E?|O%91FUuZ2)V1TYz=eX~B=|V^)%V4!j
zxY(%?Pp^~=!=qrypEnep$FcKwK-E|S<W1C0iukh4n0@V;1O>@|dG%V9iTk7}ph3b_
zOGZ|+b=I>*n>j&eikEi=l)l+D0sC0!imBEfHTW5W+n1^3{f%6_%~$|kDbhmyXFOMy
zhm*I#!s5WpzzbY5p-TC8kl+1S39q#H^qSOG+${>1w(PgP?W&!DWNaW|COb%ptUl6{
zj>5QM8pY<}_Pr*KG3KDUpEj{;`<a}8p#a8P+HAMsK)ZE3|C~q*x}5e_o@qYbb1p}A
z7ya%ERsrcs&@L+(ssH^0RV!)=#ySZR1lW--*bJ;EGBf3@nNO^cs$_RI)pNg?#Ljgd
z12Y@rS3#om!ZpwwJs~P{mc}_Lp_AS3cH7Buh+j}{Zgv!3(FqwYsA~)t_9<vqDR?{h
zl!Tr89_?dSCFjO9hH&?a+&o~zvs;3`lZ(1$y1tf%#M~4Q!ne4GH9c6L?*D4LHO~>>
z3j*wR)owB~<rU^j!yZI)n;>Uq%aaYUlsRWzM!Le-v)E}71ZykX?TbAzL5VOPllLRu
zCIzA$zFPt{?<DaF#Y;jAOjm&Wxz)OEvb-|0vVlI^OCU!{p6JzH#R-GOI;!o1PojGX
zrYrJhDM%g;s#Bh(*~l7^;K-V<WNhv&&VF-{BS7)26Gf(%&qkkr<yC5~7zANWm@Z#;
zGsR&>TGqt=AY;xtYn|M|)(8lLCqx5N`_kRwe0HuIUDyz?cb^GawtijIt&@@^wq$~W
zrsRxGVV6rJIRogHBFdAUU?T(+Z8lWS97^f+w94e;sQH7Jd^W-RE~hl7e;kPsvhf+6
zt#q^J!4c*U8zvsK<lWRBhB`dtUKmq!FJ=`JNC>#|wfJ(^9?unnY+NI{4>G6LFzM8{
zn47J;Nt%;<-V`Ix{0=YZR2^w`-<m6=vJ#7S)gS@@Biie_Z|AkAE6`nMf#2G<`!}ho
zbNCAmo6klL>}2-L{JWPq5h@>iQVpA@AN=gHaLC&FO=RlAMs?&rp&d{hY$msQw|Q1!
zdw2)nD9j^?dG;S=L;p#L{3j~mf6KN2Xpug@wLY@W)vRj%aMi|VBQCm0GP9J6P#)*A
zvRZgvG>0>b3ZoK46<1FWtNL%aBi){=;?K;qXuMQW>cv*M4BjB^ZzX-ojW%%}IATtU
zwT5UJSK`D<8-aiHuMGmxK|Gvh3y0+E@|ez>A7knANc$<bTV&-PAUi-<+B@Du8$$Ok
zLGB71UTFG(hc}P9TPBasx8r#f=1mMzgp<kNSo8dE3lVLII8(l629a(Pf}xv_0vX*y
zz_>DMSD<JIww-YuWvovGe`d6et(!2xsHYr}dEgNT5LvR}(t<a`YZDat-?LC3gfe}7
z7l4P=N_tj8k$@+lT?Q7Pa@!NcJ9WVGzD3!%rLnr|>9=t8C@LndE45;$`z<X}Z@iaz
z5atCFt@-8VOEp`ppNBn|!-gbI2c4}TX;L0n?rx?Rrb$|D(E~i1CLo=WwR!O^_71W4
zJ(~tS4^3k~`1B3m7ZYKiK@J)=R<}%hF6=kQiHFxgOw#Dq-nvs!*6CFNqBSlakzr?c
zRM7?Arx&igmr<rfHGHa-ITxYQVita08Q=EP2h>>;3QbqIF$F1~`YK@Ft$%|f${+&m
z-)xVX|11MP3=0vgrJg0K_mkr)Y<;6S_9%SCM*}>|I0M{Z6_qdZm--%kvxfL#-~f8F
zfiunKl+M>7>LwXp9Lze!s>G=wW#u8bM+En|v<<l5-`;5kSA*&%mWD$Xo+<q)G1=M3
z0QI;0tnfcwI0b+UXUP>0L#Ufy(Eg7EJ|Cm<Q7%wDl^V=Y%-by1Q76NIkWjiRMM269
zrE{CNxN^oA#s3<rVEou&zPv{LLG8x4Qe#J6Y>80+FC02Y*=TMG2Id5=nyN}~cXa^?
z=Ip#2<M96*YoyDqG>YM*E#bgZL%B;(bJS&{%#rx{Hx&!77o{7hP@GtU{=XxY*802b
zAbuZ<U*wVnS?iSB1`VgiqLEK^nE0Am=J<o$K8`r1m@6fo$w;lI9-OUe;QVTeugvfF
zpqtM5GM-{Tu$lKpDx@bbRsb$?QWry>z*-F=ieyQl6Uo<WfMDQ9QHk5Wc7I6cwvrz>
zjZnXgIN@zx1uH90<TgT%jt2}ox!<{0ab<N|TVg-C6gkOGy!$-gQan2}Sa4n9EIU+k
z=4%9OBWPpR<tq4`F0iEdxTxgt`vE-<QW3PO!DKLvQZ6EoR)x^v^vx@Mi^mFIP0D;(
zS+$V>m-6U--^z((`UavFt)@@)C{``qd2FP?Jozi8aG9nmrfRNz>9aMByXFByxh1l5
zeKZ{Ak*k`&*CbFw&5X#p_x2?RS$Y@{WGVF}+2-{^&(^Zm$t-AHD{h$rHhD4FB73Xf
z8fb~TUONsY;XAk!RGBlfj*NJB+tSwjJ6bcyA*`-#7Daz2t1qkpI3&vNoZlfAR-xf2
zrnN&&Rp(m6T8(GygJz~iUnVM!9^N-({DL2@;EG2=S&X?bBK>eJ0ms1)yJg*i+RS2M
z-u@UwU6DhpqjLD(nl{P^8++9FLhDI@)k$`#%X-3NW37@!M|z%0a`)X?DT26Ml8hw=
zU%q;~qwsDfHj&Nj2go?LRSN=S$e{XwLwa6{(nD%o=Vxy|<_Y2$h2nqi1U>RU<><Is
zx$$P1AL#Xj20WPr3kSY<eKNf{17+S;PEs?Ap;0F<-Fjz}fOY-h8zw%E$80<~e6_c$
zG*EL;MN%%qv*^0x9zi#3;Ly1_UjxzCN2ko9N^tl`XfE*k>jfJ!nV>h)7LcxpZYg#J
znaJC0VZX9bfV<9r^vZnfW_AFuA+QIw={EVF4C)1b4;HJ8qz5KPTV9TTi__uq*1M*R
z>u$BgcK0!M*KcVnC*}gg*rV)Yt$051S`>!%^n4Zv8B!VkF*6Ne>rDh;`?85^4ZJ2H
zRI^)Vh%Z?dTn-!QFx$~&7mp(L^c77E^bq-yXz_!mON<x;{<T%f;6-BmC*o1?F<yYi
zSdEDsrtxAqN^7k&PDwqgoQmlS&(;ceM|Y%U155HReFly`)-se4vhdyd3ej#5=>+dl
zEjxDwb92hx-aMYngyf;&ddR}YOYMfry`ip&<nup*%+!mqyyQRag5c3DYm@}?Re<+e
z@MA})7r3xemp+S#VK-HkbW!?+Y~oXCzv#^Xp_ATTdj83g;<ZDuL(yd`g|f*P4^!Tl
z9VBvBlr!Dy$EBRjLwdtM$>NT~IC6a~)WhFT&{Z5;x6~^qS8Ta6^YdH2_BDLINV<sc
zQNIR_mcxH<J9TjMbjn#+LWJY^>BNy!S;aR9$MgA;k(VhGy!>W#?HG^69=W$HwUq|v
zXvy<Hf~Wt&7}SCxZso$VW!lDQx@MZR9Unv+wF`Dt3%@2|e*ZD^)j%F?vVyqmmu;jj
z;=UXaG@3!>U15!?TaGB7u>8}GfwwDLk^OQ31&bb;2Kl=Tq%a(uk0$an<<1ur(ep<%
z{&+EtM&Cn>2EQ&Z-)=O9QFy7XoqB|ZIC{TE!q=J)u@;qFcszaI7oGR>tXEE=s`N#o
z7MGhu`s0#4Hcvc$y~Plo0jM(*V3)UB^!nh<b#VJF;0qKD{$N3FX=_xYm@o*gB5$tI
zCYJLaW_`=FgrY$-Gda6+IV`M-MIED9E}OYHa3XnX9phy8mO-oGlr!SF));+nsOY|a
zz|89Ww&x&6iP9dEeu0y~R8`*?i_F!oYOXsY!|po_JtA2fp**6*Yw$}nb8bW^uerpQ
zAC<urL^6aW7t_o5!1#n}!UD>hO|aZ8DMH*nbIFa>=t&E{yLvRy;;Wik7$C0$Jd9@-
zNaa#fAGTZliHWt^eXs(0{%Cyeu`)p{2lpqYcQF<4&y)}xJab@E-#aVyN#P|+^kOHd
zv@F44^Gg~z>+fxQmJbBKnDH-%17-42h8e&rKG7TD6ic1t1KHPm-vD7hM0X26B<(qs
zDq6JEUls_>No8J#xxgtRg|l3G+~<(sk7G6Bxs&hj3SIe4tetUMuej%qGpFj#&+0d!
z@S87?>eIHZLu61y3Sc05`QPc`|24ef|BI_D2K+(`A(xOhp3!4`R9EC_0GZe=sE@`Z
ztLc8_oXQ)dBMQeL>yx&oyFJG7QGWyIEIt)>{ZtIN@k;n+()*y(oST!ip1Juhj5&k3
zNN<&0;!hE21uof3@h&emTGn{5aJ(e!F4z|^_F}WWfAJx~C}ZYKPYxUi2Nes|o)j5e
zF!}z-<T`Ot1-jA0pSU5msC{Md?a+|jn1he613>N|4s&Pow!&+=%i>iq3tFf!BtXJN
zWF$vs5s$8=A2Oi<;p{_Ht5YUoV0{>-U*~t#@DE0Du7qFJOVSslzj1VwZYmRM2gx9#
zwLuP(Pf5%<RT~Z8R)s{2opQl*OC0R9(Z9t!Xn<6>;alae%id|3$17P2)gvD1E3F8i
zc&(Lyz+WTCzq>K}UkWX$sa;2HwytEv^`F*B#uGhpZ#A)a4fYTly8;vaT7H0dzf6W8
zs0g1CosVmUGT+#=3{Bugy`Ns8R%Q;%(`9|mNa6!0OF#(E^`9hlP>4#B`gn0%5GbMt
z%vCAGqtw4=@YTS-vt`0#4L&XG&u@OKCQpwWV$$@2%vz7MzG!@q&du<-5|hPM%dff|
z3GJq5Spdpva;SIlC(AuvJ70xrjEAo`KB!>0{eG0D>pcG#hC$oKe7BNg@V+B3g?mql
zxX|oa5Xv$@JByuHt20eCq<%*%vF5S8)iDd*dU`)hX*Isf;Dz^Esc)VIaH#D$3-pW#
z>_(QX!<M{BMY5<jky#;2zkRD*_|7W-*!L{N?de4k5n<o57dri>m($2b1zBLDB$Yja
z3W+097gq%!b0I{~C+Crv^5x$d>l(dDZp=ZB^kugy{Trvg<+PqIH%n4MIc^l=eEW7#
zcremq7tbOBO?vXFZ_Hi@*<^%LcFWHz7LEj4)>;349=a)5x9$#i83;19ZPqaP6@=A-
zz;0gWBbn#Tl`ULXZ+=$ha`wdj%{tl7Xw#vE7$UJvaSY6UXxw=Mg-_}8=q&;~L)c_4
zFc+BCU6H(GmMtR-*J>=)mz6@)rHLH&WI<OJ)Qcdqd~`!4lLC7akLPT!q-WGJD>A%+
zCx0Ut*xRD9+zD7<{_GhNc(HU90y8P@UE|R_>YH2Cav|#iv(&annHCY$TX8TF3_Ra1
zf)>>710^>Dtw}qYYwGCeT-{$Bs^9;QlAFT!!B<F+Ft5B5emZh9Ei0yxd&pgN1LF8<
zzX|RTRbKbq)su4IOQT?0c0PvQvsXtn&oMlHQIh=#kG}gjY*zbcmyNtYUAI-2uyI3E
zWPuFDp}+!&!W(Qyv&U~#GjsL0CxNzJ^~n&G^)tl>ADBW232gU+o*==Td(`?_YtWyI
zL_`aYiHkA)8}=JtyT2+(fdxK3#rVmGo-G`uPK`yGm6>XJmh2nUyDxTL`WmZ8QNkn$
zHtV!FJ`+v?VNrS%UB)LFqk&3miyd{tO?Fb{lQi$7&nV~lv#@b!^%Nva|F&SH-$s6^
z{}Z(%2fGRF&LM(Pf&Jk!44Nmfc{bED1Q3H%EPU3-#=~tjVDshLTHK@BW%%^M*|Bv>
zmd?k@0vT4ah%8hM*>Fr>tou34(tVt%Bm8`wy_|_XOm*aX1#}LmuhbAwpw&QuT)#O2
zt7|vJ_iP2rIO+RR&$Av@Qbkhk$vhO_H>zuUjPkd-%&GKA(*Cfl!umCTv1CF;;H;7W
zvPkH6!X>UaXK}M|^xI|dW(7@qL+?U_^fw<z(<6D|s^phRd-ZiZK~=*oFAW|+tUM^M
zMrRXGbD9LY?M(w@kh&}v$%DHT#NFUP53sc8<GslaL@#Dj&7m|Nqy3WdS4OrC<_}T<
z`M@hH7DW&WveRq6B^|yD#mQm&VmlJhkx_R%Dpi>|leLn7@(A{~D_TZIyw2X&8lBtp
zFE&<DrDUP3dz0AC1odOWPKMsu>q45n{_M2#!83<KTA&c=4<w@s$Kd(X@MsR(#g+5g
zHiS4yalEJCtX7_Uz~C)I$kp#?U^MFqB{t7ew`j}JZhre@(2Ys$R$0C=N}Mi2-bl|?
zU*EdF;2cOhEcy)9pSlnWt4PSM?&bFA!_+imR%K3B_;~rr)CuFAUZl*&Ur>&6ToJJT
zJWI&@seP{LnvRkl)y67jd`;HP{n`rxW8CsulR<k5CpQ3mkGPg}-Afu(8*2XNj*t-P
ziiv^lrGD<N4Tv8k(1GS3dr#?FCMN#f${PH9Ohk*+;q%UoG^=A&!nmHYzSW$v$DQN-
zzh@ED2T1is9Po<7G{DYV!nU;dUN=?wtk+mprQAx=p{iC%bL9J>Qlzo@@*MifNs~9X
z@dxB)79@-OCtDzk%^!EKG}PC$BHy>+6vkEX@)&oog}6o^*(|ueVQ+u_j~@Qa#NN#s
z5BGQfs7-MdxXw}U7<<3SMO#$GMV5Cv#7A&Yt@dZVK>HK$<s8fD1dft+C<af56-)I>
z`n6xXNDEEZ*o$1LIOCB6W&&*W>m8(7rZuE9UgEs$#HfOTRMu2_s=Ouc3_pe@G$fld
zDekf{gFLH9lNVofqL1eus4ka*9W%rNbCU|5?lVy<6!5;?P5?$VL~r5?Bk0}e@$;C>
z5B!K|;&?xby`;4k3I5(N&G&<z_m(F0)bl|U6{9r1f;I0pRw%EMyMT#)B@!cO?8-yg
zzl4F<xrtTC1-E+HX@yaJn@XVm`{}jxTSCWj8NU5%wyWUIZ2$P>;MwH>N0&9NCuYA=
z_0wfG#s)B%@?o)MM6L>}(ZkJ?o-_}XT5D65ta(eUm7Wh%&97SHCrdNDXom&?xY>nj
z9>s^4H*viAq@F*&yFSJ;Rl*Z$##x^nek};2Yv@~V!O<9FL6)CHbjlJ5rUkq__5eD{
zue!7K9IrwSqy+k(n%PKi9E#|>xa^~;9GH^<S{b@;wV`zoXQ)t*JrK<CLkQ<|0TiW)
z7a9x3TFp)?+q>QFxstRk&%+JiAO_3wJ#_H$iVkH}Dfh(vrjOydOzI7{z%~25{9Em5
zTRmi6LF_@|BT=FNT3Vgfwpp*X=WbQAH{)_srGSL|A3M4HCxYwm-~BVR<ZnGR_Wb|V
zLt}ob_l9Js_X7qk#6j}^?ZIzygF#r`tDN!~LQwC7L)g!yw%n;c+zK~7ebO9EWP^40
zz;b!_>c*p&{5zPZbdXvthEtF{UjB<KC4MQPJT37=YgOHpFwn|G-e^$4Y%2C0BJ_ND
zc+(wyz6qGTdegJ(zP-uh%zw``v`2oW^~C#AtvVl4EkGU1V6@Qw<^jyrRAjy5hoifC
z+ixA!Dzz~4`=OZ|tNM?E_L5G4z!{|q*(=U76c5_2Yh011s~8J+LiOpRl5Z)t(m*Uo
zlCi-Jc5{9guZWD~)&wi~pFt_`d_UMcecak;f~0NY8iIdvZMuw_xlxrV5i5b_i%l}|
zN&ZhfcILO~#~0&v>uq%QXu4@n7m~dh1HS`TAa$`+*_z3h%B0_>!JUwh;!&ZqFCFJ(
zQyj1W|N09<(70aY=5KAlO-Zgjb(i}{%pMXDuyvwx=PprH(#y>JsU)h^_qO=2y26q;
zVvF!bmk#xXgE5iH-PBEG*$-OB)+P&EUr?LA8ehpU@lNLH&k*G9DrA)v-Nv9L&Z*OH
zyQm5-cFq7Q;Q2eM(=2C0AG<EUGB=F^khg*M=+-s(31Fg8I7$U!;#ht*p%WCEX@yM4
z(jvvWAU=*=BtAjlr!MQ$=4NzkX{}T5k*K~QEe;{}&spUmOR}a0@A7_w(tE>E)QR><
zNay)Alsw;DZbO4s8qYmK2sz0o%Un*w5P90-ZjKpMDIkb26~+IBcN{@LcENKT8pO~7
zLsQp{1;oiq^U&9c-18I?Z!{zaavv)btUMB9Lo{(IG2JKEprLvjV>unVi=9Lfghfp&
z^St-_U1yf<S>8l?;YjHzOVC0DIi^a!`=8(Op<lgO8+HWxe;?8I$eZXJmo9qDlLQo3
z+657jeX}QloK|&X6J*O|&;*&S@I%?&R;yYakNi5|$N$sbc}7K*rF$P0K_#PPBqK^x
zD1uNxgCa>pP>B+hoO2E(NhBu$iKPU|l;liF778em<RC>31r)J>qWT_trn~LwnR(}Z
z?_KYjb=Q1g@#WMxXP>k8K6^jU^Z)(HZ_9zldJ}UGY(AA_`L%}M{K%H|C(FPCJM|}?
zdaK79VCOFIE6~!={dnc4H(4zeIzJQ9=md>3Ur`&US_1t>s?qbVq|&#pNg5CwN2T7^
zNS}Z9<^oS<;*V+#YhK%@4}D&d8dJsU0?bp@Uu^__{Vd#@M_gyp9JSkQlq-ao=qST`
z8+KV15UtekdU=ML+az5NSKgPt?DzQ-n7_FVV-zC8_}mw?!=1PtjYqt&IV(6+g>N>5
zo*JHp2;*19R&mwG{titePDbpH17gqqO6vbB&Hq_`BFj@<qnFed#6$w77n=D@HW`J^
zF3Rp+7$BDVTf+dY+^5P0Fa1_8Um5RIG>M+bU;XqvN`NCSkc+psi{K(*ywABuNgZ~J
zmKHTsUqUbHipBc1(5#(YOv?B$AyeYU(e0l5b}#NSF(IUB-ET)E6;;)wdl0c*C5gWB
zfi9BzeY(XQ6mdQt$c=Fl|EZ-PvkF`5D1J30i22pGKuv*`<Zm1GbVS4Wf5D;9KjKjS
zc_!jD!(TEHy7at-fxW$+1n0WB_OA^H&r}x`>dsc@T6lrz9N?~lUl8njaumtLJdRxA
z;6N9BMo5&eNzN>p;=?f^JNw{U4$F#89PkACR>jykC&d}VpenO*%lhUb?-TbFGtsZp
z)|&$zOyGc*gmt_`{*TH1_=Iy9ysD&?4_MJ24T-SE7V$~aNb|jOU;K_|8o(=e`&{W}
zWihiK?fP?3YATzPDiv)jhH5;?ynYi`U9K04w2><~i&j|7115C0NlIi@>+1u;&MSTJ
z&{TX*qbc!GD)zdG_HEIEW@xup2ZASc>ftwIl?RSSgt!^M4WQViO9u2+(01GHy7$TQ
zg8K5LvY@F&aP(?NdET_k^Mjd;nUFR;qn{3kKZ+}Iymg9;OJt+!(8?iQ-EMq=>QmPW
zH5?I5Lqw@eu{=ZcFIyh&k019ejE9%`EWnx8#V>n6P-OBbOI%;{k!FQZY6Gj4K<Co2
z{&hv-@Fm`*QYgeXnR-HB)iEh9#oTf*U4fpB&Y8HUj?EMke{)IBU0;T6Eb^mE!SmxN
zheP>Umo2d=_v5?$zD<p`r?m?-8)9%KA>d1R85UZ3#v$dCSmDDiIX&%lj$1Qcr8*54
zCsM#xdtF%qMv)b!02;njoiRB091HL8s0SG`H;y{+41JiS9$blg{}}Fise3A5Dq2cg
zO5s}j-xDU%d>|?*oVx!>-%#zEO**eqPc}H6z-hE%HLJyGS82CFm5<JYtKw?B^1AXt
zK9H*YhmtdnzfM_CN4hDM02N!Tvvjmo<`bY^NDG&Y<9k=}p&7#h6#q>cg>Kt}5oAor
zQ!af<FNme%F77jtU9ZUA)#!1Wu*b*hKNCpn?;7o7_dt%<=i+}R2q92YxVI#WJ8<ZR
zw8j8p)|DcERs6NjsX4FZt`*!;h~>OcRZ;cHo7wo=QDO71SG>6k#e3H*!smZttf^1@
zdfG5e!!%xZDg0I0mU}?LmUYPAIpr(B;^eohviy3cTLGdp6mNlAtFLhGp9!vj^MGu1
z$*~ajG2zHlnO_h3{c=||{`EGT`}aOG<Ofm(5TQfMFr|O5n(DvvOVw1V;K!QU+KSrn
zts$*IPaUu`CylGyUD98mOEj)aRyQ6lxDIZ!knb#g9qaG|d?^8zoGzp)#Z)V4&Pm7I
zt^Li@Sf_ZAK#98yB|b<3Pj+9BuWu6mQ9`kf&Xi8OxikA$^VklTJ=*D3s;k|vCD@Z|
z)R`KvVVLtcjycb?r?pf`yj)Eghe?`Ik#(KV!l93qR@Gc!h1Sk%gI3fAy@!+ys@Ln{
zB5!e$itt)kzLbm=wxRFHNwyK{2cjR}Y;GCU09AN-$9`SIb2Kv7ap0Z9AQU~w=0P=l
z2UooYXx-(t-YK=v8-R97%9Dt_>C?}9GBA&^?mPi7$>lQaLz@RaU-;3L0*_EPIcwuy
zMw`Vr#!-rWb@U=7axqjb@NDZy?N1|$DcTTEt`@7^eV^(P5BmJMwT#W!QJVOC+2#Ss
znRKoVNs3)0rc#(bBewC;?JrYGJ)hPoh?`V`mf{^CyNs!g2GuruG9PwWLvTVU2#Fqc
zxU1P5Ua%pVrmM<5QXg5tasLfL%%)Rs-yO2Vz2@fx1f5FbpRj&A%|l1`chI9Df>~}#
zqG6ebs%a5ct!qQbC6pkIZqjX7oy6vQAhHWm2f|8i8tTNMRS`|XQXj&!COyK8YI?6l
zLhp?hb)jS_TSvFa3tXct;}tLKPSeNR9*4h^z3JEG$jqF6P?)Yibuu)UnUgmMxTRLg
zBoF$s0ty79Arp*UP4IZ=z_t+J{%u@e2M8ThJA!GP`ve(8YE3ce#^0i(Wn1;0H767p
zSxV}!4q=m9VO*&$J=;slhpQ+}*d0OY#}@=~3z<r=Ot1iku04~w8qogPn*lgd01U0)
zAE!5HnrLqEs)#I7*V$<#-h1@=N(A^x{;Ywu_+-c8k#^Y|i^P?<Oq~Ei&Uoi9mk4hy
z1gxob8HkNxfTDEKqpPKONV3rPXwLG+XBOg}J-OnkRd)<<H?vSHuE*2s)I|*Miui~6
z;~s29g%VLDa}pXyF2r2+6aly>KBy>&!t0s+CN%-AAumx19^r0wpU_iYgj33usM_<l
z)d#fuB$K0YcEwY<nI*8fSvi*0GK34?`#a8|R<>p?E$g>-Jb|y2)@1fZtY_$Bg9lHk
zq`M|_g&S=KbrGido0mW5|J4BW46m>!w6TJRgr*#jCAV(BhEFC>3cQXHK!5E!Rj{tl
zJB$jfR3o(Ks7`rtiCfVH-*oq!GCkK==h0*7s*%y5TMxn}fI`T?JVH}Pr**#U3d~rP
z>tbVcn-RRmKrUkX&6b(b-Kjw2>*FwHYA??4CF^Y3j4g7N7C_4$`}aN>{}{#iKjpQ3
z+;uAS5E!FMkZmCT8^Su_ZGk(v_cMY27>@UV=B(>11z=M^olfI$M+f!re*B>Z9x*Jt
zGQ@g%2%lFxG)w_>aIt_5JP=sA(xkvT@y_A+h_#M*6e!r1I-OAb!^u^N!Ytgt?xUkr
zeV}40Dh|@#UPl4~Q-Ff=EOlQf7`pq+mni^>O$QWbCyx`Oe2Ew--=4j7)t(@GSy+RC
zH@$m|<HESLw_ftS?mZ;ja1oD8;Cc`;#mXb`jO+Bu@&Uz_3=XBNuaz-n((M{ZMx?`1
z@@tJcuE#yXk$1J2slLGAXg34CP9s{bodsWcjQE?c+@p)h>Ww}Tsy-%U83^{*O54o1
zNHOD!q`^Tgyxu_SDs+}`43v+vTj0}iy9I)fd+Loc+2p}hUFpP%^^}QHm}>~*KRkK$
zYK1HP3KoW5zqZ8c5UQ86nGI{4RCdujfpIS*vy=2SHJ$RFtu8eT&s6vrPRbf_?r9;~
z03E)@_}b*lndiNZaSE3_OvbK!=kD4W;Uq`*8?>88aCe+6>{!GRq6wW52?0r_1g1cu
z4yQT1>Cfn^H-c_vo;6zgWHqE9kP|5=Ac&3}<PSNQ_%hvA@R@F+PU+<hLkwVU#gZ#M
z)+$Bu#=AMU$n%NTK;>~&kvP1LYKG6?A&aj37m_dUiAcS;f9mt0Ssy;@P?7Mg9nr4P
zO6u3DD)Hg7K9aB+j(0QBDr%I>bE`KhIRhhKL(2D&$NQo9GZ<FmEcqh@nIn6IhP1-v
zK(JT9CU7OHQF>>k!`n8szo>Y6qXu4A8!v7rICNRF<?#cjl*P!NlFD>r<3Kqu>yE=b
zy#2;b@*9UnA@Lxs-4&g{1?5w<kqF;<w@<ZE3s$~}#N)7Nbpf69>#xLVx@0(dP<3Zf
z3pR5}Vl_=eM`Q5-+Pz9l*YFM^VbW);sub5)QlYMmg+d`ebmW^qbXlVhMLTWZOlAOX
zxf<jB>bhZ}6jb<}ksY<vJDxE1Ox?vmsg|pJ<#n1GrWg3nb@&4Pu2l?w1smd#Jz*7R
zMO%K)&V`iHpxcMM8>LNlt%A#W(>A_{V_Tzzr^J0JC7PH<d%TOHXLGKJz9b`c4x%P7
z(nS~8J{Xk0KEr1_HDh!Ff6@W}`wtMNVWjZecw0QPhwZ_e-u{D!4bxCOG-ty5b#2N0
zx5wol2mLjO`3v~UwErTjei3ea+l+OyNd)i54tPx3;IBc<)}VW96lbSKJ4GXabJbra
zhgiRV!+WJ!$rP;#ob`EH6ZKNF*zx_%enqf${#dH#9$uydGVQQpl;N2jm`z&HL#e!{
zXd070&#a(qLj5*v@ZgRwJ5Yd%Rlz;U!CD|sg${E^#AfYhPQjxj4ffg+{Z4TQFoiK0
zz|AV*M&7rmmqwJ*%^y=AR&SfynVsJMQ0--`dec#bYJ{qbzLer~DmpI&XY~Oaea50{
zC%j7%M$1O>Hmr^ELwKO0L^rG6k?7fbh5bpfT-3$-#-^Ra+M~nwmqu?Df1HmurauQV
zInzhmUuL*&b6lvZ-~gS41EwuXXOD!mAsdQ7ih8#Q9xO{`d*CN~FIiE*qmV(NHr&!I
zs#kVHE=k;Sr0eU^?WsAM9AJwBR?J>INkoS2pT0AV?wy`U)2^-!H>gmgGB<m>B*I4U
z5vBainDNj~2;~s!woPd@OFgu;0(}TqQ{fA8amce=4Lq6aInT;2#_;J*v*HzWNNZ54
zMO35WJSzcK`_Ybcda`pbsHn&<%f`x{-K*-7{nMU90FsiVG@h@y<XpF{J9DssSKloM
zIT=X7>R0y!NDh6l5rsC@sbbkSEbo#H9Ywmq)cg*l{x721ovF)RkICsT#NWQmoPt%w
z5L$`reH*ILod}zlun2gUTS1e!Ajj^-DNk;2LFl^8l)VhdS2m`dQLN$6r%z>zq|Us)
zIlgCTa%W1_cE{_{fMjlOII^MFIOERrR}%HeS=vuKRUe@yq6bY|F(z(#`WJ`ycZa*!
z6MEvd%%~AWS`SsiYOfxt^IImkyW`;{l&EYs$j0|1&#uT$42s^4TejRorZ!6zr29>X
z%Uo96ON0Gp+Fkznr^btmjKr<7Z`6RGbE{;%mV->+Vej#d7pr+cc&^eb^HDD*1B<-w
zSvsYJEz4S)qbzQGcsN|03DR**X$fcGmKUI%SyWmSVtUoaZuHuao-|JXB&GvOyg}kM
zuco=6ku29ROp8Qo=<4brNV}Z{?<rV0EWLjd_xcID$x%7kU2#7!uqec`dQqxO9{VSs
z`7eZx`coltJdavu&(}5B_>}n1cC2_PKq?UK9lAd~Xba{Hs<jx+D8_MD`$@xmFBc(D
zx7bF8RZ?d*`-)pp2D64O%POVCk0ZATJ?NK9tszuE!kh}ngtFr$8P4%EB$J#;a*II=
zb4R4d(j1y4(=&yFU6<b{FVGw|Es#m>b$(vYr2jO+xP2<k7I@K&>s$H#{OEb5rEcWI
zZ-C+3<jmZRn?oz=(U?Q|DNt&pPq_*`4|Xf?ENp9?jC{NX%U5s$xm2}Zy{|Ry`wgTi
zTtU>DNX&VcjX>>2_6`qFIBy={<v^-kBe{oUoN56J4uUS$nd@Fj<jsu;s`{yo(q>Sw
z8RW@(9Rg&~9cPdh^T%$S&Il7LvnHWzsvuI@EzTZ_ZOTXI1p0}LLj3tXdD`6lSu1q5
zm+)N%S{*4RCF!C`S-MHa<x1=3_iFA4zkLBjZ_UJkN>&5NH%66PfKwan8;}4e_UBY9
zkqMxUXWW(2@P-Tt;IeJ?EmAAIGN0Vox=iZS@6Bjxbg7vgnI-$?!%%S2W#*x6{Wm0F
z_e}&J*Gsi6%7U4yN5s;Xcm{mcFc$LgijjREWd|XFrNQV72hK^|3AU82q4_U?BfMR-
z*N)r;x;xcOu`Ve0fE)u)O`8UvWHl0{5nG-sZ#-1p?ZvJkBJ=mOog}0kDHzlmAV$FU
zi~A@6C>BQG=B6F%VQuP6tIe$H*Q~u?gg$Z$K^&KfWKEN{n}$8_rgu70%|}|#+srlU
zW3IN;ue^E?QNE!$8Y$-3BE3{nu4Z11-2+g^iSeG}q#X6<vkSPi13NhcPDgoVCkWE<
zT+f=u>p3KOM-j5e8$4&HtT+QEejt=k3_aR}U|gT`16IVg6~NBE95Po1zy$`&k$CTJ
zV9D79<YN_DI{?4o{~f=C{5*1u568gJYU+4@U?T*N!h;~z){wm;@iUwQ2DV0ljih%t
z#t1dBCjLy2e*jrQou+J7YDfKWQ1<B)AnpOJgKsZDqF6EXx99dyM&1+$EHE6-$VED-
zSkGW)?Z|O%{Ndr4Sbw<!|3gis8S-a|$%MB#*`noO)cBDR;Ms3EoMPt|6c0ZF5fxb%
z$Xw^o1dQq(IKIJw<k_GzMIh}iOE-=5t^{NUvYLM8ZI5fKN4WOHpDXa?^sSsPH&<Yf
z-f0Jdm2w;Ulj`k|H;lCJ>#L(s1}Z%mfuR94n(0E+EPHS$d&ScG)1m?Q^UV&KD~8od
zxphg)T(t(6ii&)<e(_t<4}8L5X9Wd7q-uKZ2=KcvD?l|9Sr4^|59du=v5>a&xIOdd
zsWmd1vrbO1mdt2R_V6Gz)cxqf6@O>Fw^y0#BtftG1h;1``K&7pJmZW|-9_oEhAmyP
z%eI@dc%U`I$ec+TX&Tq(DNvco(HOYAJXpH&3onb#EbQ_XhA;DSFNxF{BnqLEsZiWm
zA7GQsgtMND@O)6`4-){7W@ZFqd7ELAC4TDFMhjzMOsIF*oFqp@CkHF;sNAf|Kt3B2
z+tIQtG4yeizT-=0{e;oRy{Fi)1+<G+`B+s9wY7MCQYt}Jed?BWCRt;Qp!`(qN_ybk
zl@i}Q(`KHL4-K`$_%RonNPoAs2L|mLi)34hGtc9?^Gk9tG>dfNVo@GoF-xwDfd+mh
zrN{k>S4b#@J-a)c1~EbcABUr9X1K49_MG?&jTJOKy4Ilv+7K|n10D>+dH2?mu`rCJ
znjiQnp8qR(8M8S}!>Q@4bGz4_(3#la$i!83iBd(auLlM`8c^*qp&KJYrD?7;bkv~o
zFXNrM(@8uRm{WK58^*W-Rr8l?Eno0nZ@c?c;K+j|NJ0Xs7y4r-bk)RYUm*5;k?LNZ
zG*$EAEmjI(4(S0#a{sL7x<cBG+aSm=zg5I<z0EAE(dNe!1OBnUy_D}-#g^}jOX|}B
z$nPT~Wm3m;2tQ-LDNsf7-H9`b+f_nB!i><-I^^vv`v{C<cz>n7zCHthFe=O{nhfxk
zD$BIS{5r~rPhzz3{z7$`H40t^`~J6v*{bSC6qbs`3y~KP%N#xV9XcN*`Y*L~So|;m
zKX|tN`9A({M(97D0J8C%L`-;J)onR^_E(^-5nC4JgNC9%4v?5X%pJczL)j5;_#Vcu
z_fU_o6J8}MdwiOP$BSbJ|M1H{wHje)wSdH)06TRjcm@!+|9vJZ)Qf6AqLe?P1{E`O
z>Lf|DV)}gZ7_cFV!YyFXEs2Ia_py5uUuw+(k$Cmn;lUKp)59|E4s=Q5`?pD+8n3v_
zbU$-)#>Lu<+kr1+&rNgZMg@;u?alzSQvK+Fgb-3?RI}>qT0WZ8CmGMdS#J%XA~w4Z
z4@I7zM3ZYo-JkL+!CPXy`Nn1ENq1Ior{ZV$WB|9Eji*GCLy#4axitv3{saP`YM?k=
z-Vp+jx`LqxbC+@Dr@(Pso@X?htUIqgUGRQs_@4<>zkg8xT#ZGj?8*dudmoN7V8swu
z$Q~c7Zv%&Oux>P8JvKWM0&qMh|NN2wr^Xzzw+o#U`h`=&vy0d=0ys7M+Mgh;4D-n2
zLx<BdAmm1;h-1%W240^zFvAc1On?FUI!iAw=Pt=M8~uXgQC~`)h97fwt-_3ff=H1z
z=-%es(TNdWFa~=Md>06ye4mJbIv><3(Cejvhzha?;tT(URkH&{2-QJ$6=Mbs0WsVk
z8uh0pQ~HPickvc~4A}*EJoB<iM$SMLS`2GeQ_vqC<=;MLwnGbG`oDFy3mgqVhgu>0
z%}d{zL$V4!#D8kq-?UtA6N&eKata*(oyZf6*YyKlPdwN^{E*_$ZTn->e|Vh$dFVfH
z^KUxvzt7v0{iD!(Yyf0~q_S~mB+qOpb-TO}cqbA!bo;UTr+)P+(`N`W`JV|?8Y47@
zw#+K(f3)3Z_GYx22t$83WbM4pc^^X;eBM&LTD<$4Pptq)bl=31n%I3M^>ndF@kz?`
zzz6hu8@<@B7FLSf<W6te(5#;cOw{L9)3{Yz+(4Z=Tjo0HfAL$>rst&R+O=8MS9|j0
zlYVenL+XV6FyfseCtIR0lg+oNHa2D!VP3C;Gxs%^;fh9GVwLpA&Bp%Dg%{J!_Ugz$
zVQ~wh@<_(2Ip`8zecL=*H4ktf#KpiID#<R$4asn0T^;~chfnpMH8tf;Wm-YeZ|t*|
z+He6-rZL3lsW>E2-I;bPD>(`S0VLYut*<Q`>1?=)tdl(ikG6L22joaa@ZM*L=4|0)
zN{fVMls398*r26d(|}a#)d}89!4v@5=o6*<ra<I*B4Pk+q%s9m=~j&Dw`<jxjOZ1`
z>!B^2q^`E~rc66a+y#$3NLW9CsN)G-1S4Sk@NZBR*sDf~h<pQG{pXg-Mc5ZYvtOpw
zB6JPW>~|4-VB2g@T@P}Xej>4|C<^(V?NI#9RYsnW<sp+nv~e}vHfYGN#DAE96r~<3
zV&c6CG$*J9max^RhLYN7K%DkzuG?fNfQwRCECfJa#HPXN<%<+=F`xHo-1oX<L`OjL
zIYt{tN3<Mw=;F9XO6Za<v8&Lw5CjB7w+(1$ro~sC;vreXz3f~WXR?HFDc|U}R<SW{
zC@I*+&f+SP^SKolm$hy*i+@`t-*7Xvuke7Vn#dy=(BMli(F{2>hu2E8{;M}dwF+d#
z3Y4YjsTI4tXo7B7hO7ED&*U~WKCFvY!%*tCbL^FwN+cou;$F5Qk?H2u9M}X5IZ>^r
zuX;iDOno;WNq3FZ`*XT!?#cw`pg$2?PwK;Ev4kvxc01cGWLZ!~=`uf|w$YQs>VnHD
zT^SJjQvn&{sbu8d<9SD!2cHiH(&mvt_n%-5TrbDA&CeH+L6FHr4s7Z@R~Nk$Vv=8p
zTVN{;ue&WYr1)L~(^*+2b-TD6Hk?9*m2Whrc-RUx#(ucxs?ps79u)zSR1P0vNSn(%
zC*>DtUwhmpWnMt^Pg|s$FsziA&hv>vHVpia^5T`gsu@T@w2iWG`qD`&^UcZE@wvQf
zno%-ytxncqH`aX1+z$t9QsB~y0=o&(<DZL>k;(3Kk`_URNO?60<!pV){`iOU*@%Ek
zdkk-b+0xIpyd*lj!Z0<F(XpAV_?c#W@BKR^uu0S1`?j~An4=q%(2-hpqYb4-R-=>B
zTiH%dFHDsKXO%PN-()sW#uq`2d2@;8kU;4$a)*N)vE+cj!LP3Q@jSDk2$`h}bAwS^
zrJ<T-3}2_AAo~S((~dAN8ptWGpK7hN#*kql3SaTppWmCWtFl3R_-&@XPkMF=ic?vq
z(vWqlIv;ccmykKF-Kz(vf1I*(N>j2uBQ!o$JVd{q-LlMLihe{ze=gqH^P`o&I3_dH
z)OCi=5dNuBXxU5aNVq+1FJtQ2t9~!!P&#VL4g!Shjo9j|VhS6jiIVfyZmZpho$Nir
zvy3iTF4fkt6^m;UMT3+H<Tw_j2*9S!%B2>qa}+ox2x~AX4MwW&>-&PHeRy4C`Vrii
zLz$AxI;ZnKyBq{`=k5y4ULq_U_ryfH>T7hFmxE}0{ZE)_r6}qzsuJ?_G^EP>#G205
zJ`Rl7R^+4lApy~baa#vf&`xf9;9Zh4R1Xtj4aWN@-xaEOW&nJl=a;o*;A3WZqnNl=
zL&2d&_IYGz^Yv4~=o-e(I<oed{IoEC^@<s=aSnSUJcEufJ<|9UxiZGP&MDt$W@<{$
z;5h<BYu!y~zu8S)#xH+M;;~NrPwQTVZdv-V<A4f8{x|pW-~FERh6R5sD6r6enRPD@
z^5sz%z8P4M3`Q7v<B?FhN@S4#owRnz&RDky{UVnO_rb8_Wpd`rl<{(gx7Q*U6Czmy
zO1PtE4~M)SjYNCu#ymgAkucN*0RSf#zJptU-8;(W0Dw6=Nl@gY9LLwo!qfEb-kj0@
zn2)vR%YJjx!CUJowlHB-u)h^*K1YieS@Y-mx_=k7vmNFuXJ;cp@a9_oM*Xz<75NX<
zEayXv8&Ag?b+IPjYzHmJ)OYqxG%>c#G<;`8-tw)lW%pstm!T_baje9PizeS9Si@@=
z4RRR$Q&4;eRek;3rtq7lnGy^2av>Qsj<k=7F2uYe-;cm(n(D-X?|BwExH~MISN^Qp
z7C9}HlXqc-Rs2Hg>9o1f1&vM+W+0fOIKIe^&PUk>uh_4d9To%1mDhY*W!HMLQ8kuo
zu}T}Y6Eoj<)sy0<w9g)T-!LIt*(PoUxigbY3f0X?Gh7Oh$5KOJsqKp@uo(t^uO_~E
zo>yF0)gqi+Lfh_~wG3m-lL}SSTDJ&o%7<~Kg#>ARI_P^Svp2TpBwv_9eEYmkAA6=6
zU9pm(9tJCT<?5{sJa3WGL%K0E(LHJ08Y5s9G3!~W<&jo%bo4bIDbX85H)=qx>gYG+
z)+ujYYqPuI(Z(XPXqQk&bZsTh(18D`p1p4H)nx~44S={ls%+HLv#r9$*Z6!KN&GZq
zjo9?!+aEJ<Lpy|&OY&uWN7VcT^ilwl1BAf8Q*s7me*q#v@Hd*b&nywLtGrM=G3%a;
z!zm{nuy_Ts#INAHlDz-?r!fcFKn&=8Aq2||>6I<N1KC?P!jb?`maMG0Ijky(;up*k
zD}Y)0P6GO^Ljn6hJz?a@6(DR8(1mOJ&lUgpLjLnq|G)N}AFu@fqZY{jZ8sUyv0=%7
z)kcPb7ALdgD~7)_%#XV(6Fy57KP{IJ-jkgQ>Mf&*Gd-I%)tb%Jd2Ui$oGrC`oT@@w
zk3NGKh3!_+9CStCE`GBifiqeq;i;1!hPFB>cwF3@o)(_Dz;FB+b+5v<aFPAt?M~+|
zP`5uVmg3Q9<x1+vj1~U&XffyDNFT@BVbiCn?mgA|L<*t&%7j<b_a0qcuBxBH;Ne87
zT55;zZ?H3OsK7tNCs{Y;=FXgrXo=l!>g(O4mdMuJ+Uh#@?13`Z{`uyT9b^cOW`S<B
zQeRC{jrdWh-caST63il2rG$Td3#B-2>Uix!%@zMuhPyL6bHR<0$=>R3(2Y#uA+Sxb
z_6rk+c%KwnrJ6E_B$uOr3r@_gpP82)WYw#ez?mTLa#GcMfD#E{tBdW_$qm$gZF;Ah
zfw!lPv{-^IXdpbg`I8NVaMnoAv$L%&!onpFTLzlAihlB?hEMQ_S~=;W!E>Txv4YhH
zeC>FCun^{|A>~?-%7m9>rCg5P7MCsJbVzB|-<IO7JALkzni}Xa&q=CE2JFnuW*@v2
zezW8uP%8cY{NMfK`&uQfHgA)?Qj9?`?-C3rD^n|TKYs7`fsToQ{@F_kW5-+K#)@x$
zSOZwC4=C6b&g%cvU=nUc^}r=Wi;XnXTkH1)1HjJw!Oq!-rv(;*!9Bw;pYTtH9{Rcu
zq@+}f*fWqsVR`d-I6Vx5QZaS-Z$J<bsI1m5vESOXr{3zcsL2GQ<Hc@n#09;k=L`y8
zQ4skA-?>r58pDHyWV53A_UmjcYfoj<H&$=(MILsq)Mz|j1D0ejigW;OpUztEA>OWC
zDrF(^I4O={naLpFn3FK`&Q$3|tzkDZI;G(fQ9Bv^FE|Y||AhOW6%Q2xZ!;*}-2)G@
z?N8OrHVr?)4$m_I+I1`O!%4fZ&``FT5!z+K%PW3GTDme{`Az(X&N))jvhoIWsH#0c
zXrD}O;2OgR8}{+=`7;XgVK5o0$*l72(EduDozqAC+mXRNcKzJ4K1-LUtBLNe^@()I
zT)~J3ZV8}qiWY|^?wO{7@rq#0_Y&OPAsI}>ffr0!s?aCm9S-NP_cV5@V4?FPLZCiI
zvPYBa`tOW&a~Pv#y{;)NMxybH>6Ev<(;ea0d>wMIS#uADKvHRGMQS%6O?|AW_@pj8
zpO}US?7MdJ_yMZ7BL?ijH2IxUvvZES1j(Ki&KvgIdhff2<X`-g{oT&}A99U<vCI8G
zyJI{RZw6t^3(TxOTGw~X93&?2-6P!V=2FuBNE0o=Od<EVm|=4Z9e>N-*fW0Kqq9Hv
zUa3=^^18_MGjH1HRf_wVJV1y?i(SUA8|a-l<vmBPM1j@$^g8{h7~ZhVrbujPc*0QR
z*(j#78w(GEE!`&xZ;?aEip#Is(?o1hSI`OSthl=j57i?6xktwOQ_XS%+4<K~9=0>X
zV8ueK8hHoNQe&Str54pGDevn%)0~gH(`BD@uOtK+rY*2WN!GmCUv)*_7*%8D9`T5}
z-Becx?F*)&j8;y67cbpjn0Ie3d{<w9=jktTeKdDnc&Du7e6~F5<}T3@n{QG4UD4~+
zP>9#XzP{YbiZ=5=<r%7!m-6zjor$i|vY8%9<Z)%j<Q<%x-^Ig=5+Jtg_<Q<(^$_kA
zI{r)>JCVqMTMR9ZmyhfBMx*rgMnyL&@@<lb*Tog&Q|!&WaweOIR=B>oGvo~K`{`>5
zf{Jc!lj_VZwh!4MAEJpFI-b_n)K;dTOS3G^Bj@8rif-+*?cOXWQvx6;FR$<^st+F6
z>C_Hw<~8n?!Mme!0H4!Ia*^;P0pjQBbC+CCLnW=fYJR#u5pa&6GKlqNH*+e}g&X0#
z2bswQ>$gCuemP^xwuM9QvMs2JZY%IVz5c$8z@mW7?fn(dGqkGO2*_uxvQKYPRjR>#
zic7da@xeZ?qk_hV+kfbu13_9}?Xq+PU^l`=`)Rn$G%_C%0HVu%4ddElE-!=J#E6D?
z-LP)11Fn-1aR>%Yak`C5g8uG*S(RZB9`>v7kJtM3uVv9+`*i>u@ugoiR{t;mf1da+
DPj#Nk

literal 0
HcmV?d00001

diff --git a/docs-vuepress/.vuepress/dist/assets/js/1.4f7abe8f.js b/docs-vuepress/.vuepress/dist/assets/js/1.4f7abe8f.js
new file mode 100644
index 0000000000..9af842699f
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/1.4f7abe8f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1,4,15,16,20,31,34],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return a})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return h})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return f})),n.d(e,"c",(function(){return m})),n.d(e,"j",(function(){return g}));n(69),n(10),n(19),n(48),n(30);const i=/#.*$/,r=/\.(md|html)$/,s=/\/$/,a=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function l(t){return a.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function p(t){if(l(t))return t;const e=t.match(i),n=e?e[0]:"",r=o(t);return s.test(r)?t:r+".html"+n}function h(t,e){const n=decodeURIComponent(t.hash),r=function(t){const e=t.match(i);if(e)return e[0]}(e);if(r&&n!==r)return!1;return o(t.path)===o(e)}function d(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const r=e.split("/");n&&r[r.length-1]||r.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t<s.length;t++){const e=s[t];".."===e?r.pop():"."!==e&&r.push(e)}""!==r[0]&&r.unshift("");return r.join("/")}(e,n));const i=o(e);for(let e=0;e<t.length;e++)if(o(t[e].regularPath)===i)return Object.assign({},t[e],{type:"page",path:p(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function f(t,e,n,i){const{pages:r,themeConfig:s}=n,a=i&&s.locales&&s.locales[i]||s;if("auto"===(t.frontmatter.sidebar||a.sidebar||s.sidebar))return b(t);const o=a.sidebar||s.sidebar;if(o){const{base:n,config:i}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,o);return"auto"===i?b(t):i?i.map(t=>function t(e,n,i,r=1){if("string"==typeof e)return d(n,e,i);if(Array.isArray(e))return Object.assign(d(n,e[0],i),{title:e[1]});{const s=e.children||[];return 0===s.length&&e.path?Object.assign(d(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:s.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(t,r,n)):[]}return[]}function b(t){const e=m(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},291:function(t,e,n){},293:function(t,e,n){"use strict";n.r(e);n(10),n(47);var i=n(290),r={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},s=n(4),a=Object(s.a)(r,(function(){var t=this,e=t._self._c;return t.isInternal?e("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?e("OutboundLink"):t._e()],1)}),[],!1,null,null,null);e.default=a.exports},294:function(t,e,n){"use strict";n(291)},296:function(t,e,n){"use strict";n.r(e);var i={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},r=(n(294),n(4)),s=Object(r.a)(i,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},297:function(t,e,n){},300:function(t,e,n){},304:function(t,e,n){"use strict";n(297)},306:function(t,e,n){},311:function(t,e,n){},312:function(t,e,n){"use strict";n(313)},313:function(t,e,n){"use strict";var i=n(14),r=n(49),s=n(11),a=n(5),o=n(26);i({target:"Iterator",proto:!0,real:!0},{find:function(t){a(this),s(t);var e=o(this),n=0;return r(e,(function(e,i){if(t(e,n++))return i(e)}),{IS_RECORD:!0,INTERRUPTED:!0}).result}})},314:function(t,e,n){"use strict";n(300)},322:function(t,e,n){"use strict";n.r(e);var i=n(293),r=n(296),s=n(127),a=n.n(s),o={name:"DropdownLink",components:{NavLink:i.default,DropdownTransition:r.default},props:{item:{required:!0}},data:()=>({open:!1}),computed:{dropdownAriaLabel(){return this.item.ariaLabel||this.item.text}},watch:{$route(){this.open=!1}},methods:{setOpen(t){this.open=t},isLastItemOfArray:(t,e)=>a()(e)===t,handleDropdown(){0===event.detail&&this.setOpen(!this.open)}}},l=(n(304),n(4)),u=Object(l.a)(o,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow down"})]),t._v(" "),e("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,i){return e("li",{key:n.link||i,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v("\n          "+t._s(n.text)+"\n        ")]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(i){return e("li",{key:i.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:i},on:{focusout:function(e){t.isLastItemOfArray(i,n.items)&&t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0):e("NavLink",{attrs:{item:n},on:{focusout:function(e){t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=u.exports},325:function(t,e,n){"use strict";n.r(e);n(10),n(47);var i=n(338),r=n(327),s=n(290);function a(t,e){if("group"===e.type){const n=e.path&&Object(s.e)(t,e.path),i=e.children.some(e=>"group"===e.type?a(t,e):"page"===e.type&&Object(s.e)(t,e.path));return n||i}return!1}var o={name:"SidebarLinks",components:{SidebarGroup:i.default,SidebarLink:r.default},props:["items","depth","sidebarDepth","initialOpenGroupIndex"],data(){return{openGroupIndex:this.initialOpenGroupIndex||0}},watch:{$route(){this.refreshIndex()}},created(){this.refreshIndex()},methods:{refreshIndex(){const t=function(t,e){for(let n=0;n<e.length;n++){const i=e[n];if(a(t,i))return n}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(s.e)(this.$route,t.regularPath)}}},l=n(4),u=Object(l.a)(o,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(n,i){return e("li",{key:i},["group"===n.type?e("SidebarGroup",{attrs:{item:n,open:i===t.openGroupIndex,collapsable:n.collapsable||n.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(i)}}}):e("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:n}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=u.exports},327:function(t,e,n){"use strict";n.r(e);n(10),n(312),n(30),n(47);var i=n(290);function r(t,e,n,i,r){const s={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:i,"sidebar-link":!0}};return r>2&&(s.style={"padding-left":r+"rem"}),t("RouterLink",s,n)}function s(t,e,n,a,o,l=1){return!e||l>o?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const u=Object(i.e)(a,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[r(t,n+"#"+e.slug,e.title,u,e.level-1),s(t,e.children,n,a,o,l+1)])}))}var a={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:a,$themeConfig:o,$themeLocaleConfig:l},props:{item:u,sidebarDepth:c}}){const p=Object(i.e)(a,u.path),h="auto"===u.type?p||u.children.some(t=>Object(i.e)(a,u.basePath+"#"+t.slug)):p,d="external"===u.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,u.path,u.title||u.path):r(t,u.path,u.title||u.path,h),f=[e.frontmatter.sidebarDepth,c,l.sidebarDepth,o.sidebarDepth,1].find(t=>void 0!==t),b=l.displayAllHeaders||o.displayAllHeaders;if("auto"===u.type)return[d,s(t,u.children,u.basePath,a,f)];if((h||b)&&u.headers&&!i.d.test(u.path)){return[d,s(t,Object(i.c)(u.headers),u.path,a,f)]}return d}},o=(n(314),n(4)),l=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=l.exports},329:function(t,e,n){"use strict";n(306)},331:function(t,e,n){"use strict";n(311)},338:function(t,e,n){"use strict";n.r(e);var i=n(290),r={name:"SidebarGroup",components:{DropdownTransition:n(296).default},props:["item","open","collapsable","depth"],beforeCreate(){this.$options.components.SidebarLinks=n(325).default},methods:{isActive:i.e}},s=(n(331),n(4)),a=Object(s.a)(r,(function(){var t=this,e=t._self._c;return e("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?e("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):e("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),e("DropdownTransition",[t.open||!t.collapsable?e("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,"initial-open-group-index":t.item.initialOpenGroupIndex,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null);e.default=a.exports},339:function(t,e,n){},349:function(t,e,n){"use strict";n.r(e);n(10),n(30),n(47);var i=n(322),r=n(290),s={name:"NavLinks",components:{NavLink:n(293).default,DropdownLink:i.default},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,i=this.$site.themeConfig.locales||{},r={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(t).map(r=>{const s=t[r],a=i[r]&&i[r].label||s.lang;let o;return s.lang===this.$lang?o=e:(o=e.replace(this.$localeConfig.path,r),n.some(t=>t.path===o)||(o=r)),{text:a,link:o}})};return[...this.userNav,r]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(r.j)(t),{items:(t.items||[]).map(r.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;return t?/^https?:/.test(t)?t:"https://github.com/"+t:null},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n<e.length;n++){const i=e[n];if(new RegExp(i,"i").test(t))return i}return"Source"}}},a=(n(329),n(4)),o=Object(a.a)(s,(function(){var t=this,e=t._self._c;return t.userLinks.length||t.repoLink?e("nav",{staticClass:"nav-links"},[t._l(t.userLinks,(function(t){return e("div",{key:t.link,staticClass:"nav-item"},["links"===t.type?e("DropdownLink",{attrs:{item:t}}):e("NavLink",{attrs:{item:t}})],1)})),t._v(" "),t.repoLink?e("a",{staticClass:"repo-link",attrs:{href:t.repoLink,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n    "+t._s(t.repoLabel)+"\n    "),e("OutboundLink")],1):t._e()],2):t._e()}),[],!1,null,null,null);e.default=o.exports},358:function(t,e,n){"use strict";n(339)},369:function(t,e,n){"use strict";n.r(e);var i=n(325),r=n(349),s={name:"Sidebar",components:{SidebarLinks:i.default,NavLinks:r.default},props:["items"]},a=(n(358),n(4)),o=Object(a.a)(s,(function(){var t=this._self._c;return t("aside",{staticClass:"sidebar"},[t("NavLinks"),this._v(" "),this._t("top"),this._v(" "),t("SidebarLinks",{attrs:{depth:0,items:this.items}}),this._v(" "),this._t("bottom")],2)}),[],!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/10.0192acce.js b/docs-vuepress/.vuepress/dist/assets/js/10.0192acce.js
new file mode 100644
index 0000000000..20af63f321
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/10.0192acce.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{343:function(e,t,a){},362:function(e,t,a){"use strict";a(343)},375:function(e,t,a){"use strict";a.r(t);a(10),a(19),a(48),a(30);var o={name:"CodeGroup",data:()=>({codeTabs:[],activeCodeTabIndex:-1}),watch:{activeCodeTabIndex(e){this.activateCodeTab(e)}},mounted(){this.loadTabs()},methods:{changeCodeTab(e){this.activeCodeTabIndex=e},loadTabs(){this.codeTabs=(this.$slots.default||[]).filter(e=>Boolean(e.componentOptions)).map((e,t)=>(""===e.componentOptions.propsData.active&&(this.activeCodeTabIndex=t),{title:e.componentOptions.propsData.title,elm:e.elm})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab(e){this.codeTabs.forEach(e=>{e.elm&&e.elm.classList.remove("theme-code-block__active")}),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},s=(a(362),a(4)),c=Object(s.a)(o,(function(){var e=this,t=e._self._c;return t("ClientOnly",[t("div",{staticClass:"theme-code-group"},[t("div",{staticClass:"theme-code-group__nav"},[t("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(a,o){return t("li",{key:a.title,staticClass:"theme-code-group__li"},[t("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v("\n            "+e._s(a.title)+"\n          ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?t("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"131b8180",null);t.default=c.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/100.f31ffd06.js b/docs-vuepress/.vuepress/dist/assets/js/100.f31ffd06.js
new file mode 100644
index 0000000000..0b6c6e453d
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/100.f31ffd06.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{447:function(t,s,a){"use strict";a.r(s);var n=a(4),r=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"网络请求"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#网络请求"}},[t._v("#")]),t._v(" 网络请求")]),t._v(" "),s("p",[t._v("Mpx 提供了网络请求库 fetch，抹平了微信，阿里等平台请求参数及响应数据的差异；同时支持请求拦截器，请求取消等")]),t._v(" "),s("h2",{attrs:{id:"使用说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用说明"}},[t._v("#")]),t._v(" 使用说明")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpxFetch "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mpxFetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第一种访问形式")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLaunch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第二种访问形式")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://test.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"导出说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#导出说明"}},[t._v("#")]),t._v(" 导出说明")]),t._v(" "),s("p",[t._v("mpx-fetch提供了一个实例 "),s("strong",[t._v("xfetch")]),t._v(" ，该实例包含以下api")]),t._v(" "),s("ul",[s("li",[t._v("fetch(config)， 正常的promisify风格的请求方法")]),t._v(" "),s("li",[t._v("CancelToken，实例属性，用于创建一个取消请求的凭证。")]),t._v(" "),s("li",[t._v("interceptors，实例属性，用于添加拦截器，包含两个属性，request & response")])]),t._v(" "),s("h2",{attrs:{id:"请求拦截器"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#请求拦截器"}},[t._v("#")]),t._v(" 请求拦截器")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("interceptors"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以返回promise")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" config\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("interceptors"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以返回promise")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" res\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"请求中断"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#请求中断"}},[t._v("#")]),t._v(" 请求中断")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cancelToken "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("CancelToken")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cancelToken")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" cancelToken"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("token\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ncancelToken"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手动取消请求'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行后请求中断，返回abort fail")]),t._v("\n")])])]),s("h2",{attrs:{id:"设置请求参数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#设置请求参数"}},[t._v("#")]),t._v(" 设置请求参数")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'POST'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// params 参数等价于 url query")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置参数序列化方式，等价于header = {'content-type': 'application/x-www-form-urlencoded'}")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("emulateJSON")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"设置请求-timeout"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#设置请求-timeout"}},[t._v("#")]),t._v(" 设置请求 timeout")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'POST'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("timeout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10000")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 超时时间")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"composition-api-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#composition-api-usage"}},[t._v("#")]),t._v(" 在组合式 API 中使用 ")]),t._v(" "),s("p",[t._v("在组合式 API 中我们提供了 "),s("RouterLink",{attrs:{to:"/api/extend.html#usefetch"}},[t._v("useFetch")]),t._v(" 方法来访问 "),s("code",[t._v("xfetch")]),t._v(" 实例对象")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" useFetch "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useFetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'POST'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("emulateJSON")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePre")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheInvalidationTime")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ignorePreParamKeys")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'timestamp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("   \n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n")])])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/101.283d0363.js b/docs-vuepress/.vuepress/dist/assets/js/101.283d0363.js
new file mode 100644
index 0000000000..ffc2ca40be
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/101.283d0363.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{449:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"扩展mpx"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#扩展mpx"}},[t._v("#")]),t._v(" 扩展mpx")]),t._v(" "),s("h2",{attrs:{id:"开发插件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开发插件"}},[t._v("#")]),t._v(" 开发插件")]),t._v(" "),s("p",[t._v("mpx支持使用mpx.use使用插件来进行扩展。插件本身需要提供一个install方法或本身是一个function，该函数接收一个proxyMPX。插件将采用直接在proxyMPX挂载新api属性或在prototype上挂属性。需要注意的是，一定要在app创建之前进行mpx.use。")]),t._v(" "),s("p",[t._v("简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("proxyMPX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  proxyMPX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("newApi")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'is new api'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  proxyMPX\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLaunch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'app onLaunch'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'app'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'page onShow'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'page'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// proxyMPX.injectMixins === proxyMPX.mixin")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//  注意：proxyMPX.prototype上挂载的属性都将挂载到组件实例（page实例、app实例上，可以直接通过this访问）, 可以看mixin中的case")]),t._v("\n    proxyMPX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("testHello")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"目前已有插件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#目前已有插件"}},[t._v("#")]),t._v(" 目前已有插件")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("网络请求库fetch: @mpxjs/fetch "),s("a",{attrs:{href:"#fetch"}},[t._v("详细介绍")]),t._v(" "),s("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/packages/fetch",target:"_blank",rel:"noopener noreferrer"}},[t._v("源码地址"),s("OutboundLink")],1)])]),t._v(" "),s("li",[s("p",[t._v("小程序API转换及promisify：@mpxjs/api-proxy "),s("a",{attrs:{href:"#api-proxy"}},[t._v("详细介绍")]),t._v(" "),s("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/packages/api-proxy",target:"_blank",rel:"noopener noreferrer"}},[t._v("源码地址"),s("OutboundLink")],1)])]),t._v(" "),s("li",[s("p",[t._v("mock数据：@mpxjs/mock "),s("a",{attrs:{href:"#mock"}},[t._v("详细介绍")]),t._v(" "),s("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/packages/mock",target:"_blank",rel:"noopener noreferrer"}},[t._v("源码地址"),s("OutboundLink")],1)])])])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/102.094a0a16.js b/docs-vuepress/.vuepress/dist/assets/js/102.094a0a16.js
new file mode 100644
index 0000000000..317d5c68b3
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/102.094a0a16.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{448:function(t,s,a){"use strict";a.r(s);var n=a(4),r=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"数据-mock"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#数据-mock"}},[t._v("#")]),t._v(" 数据 Mock")]),t._v(" "),s("h2",{attrs:{id:"安装"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装"}},[t._v("#")]),t._v(" 安装")]),t._v(" "),s("p",[t._v("Mpx 提供了对请求响应数据进行拦截的 mock 插件，可通过如下命令进行安装：")]),t._v(" "),s("div",{staticClass:"language-sh extra-class"},[s("pre",{pre:!0,attrs:{class:"language-sh"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" i @mpxjs/mock\n")])])]),s("h2",{attrs:{id:"使用说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用说明"}},[t._v("#")]),t._v(" 使用说明")]),t._v(" "),s("p",[t._v("新建 mock 文件目录及文件(例如："),s("code",[t._v("src/mock/index.js")]),t._v(" )：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/mock/index.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mock "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/mock"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://api.example.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list|1-10"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"id|+1"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("在入口文件( "),s("code",[t._v("app.mpx")]),t._v(" )中引入：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/javascript"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mock/index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引入mock即可")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 其他配置 --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"window"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"backgroundTextStyle"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"light"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"navigationBarBackgroundColor"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#fff"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"navigationBarTitleText"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"WeChat"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"navigationBarTextStyle"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"black"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("由于 mock 为全局自动代理，执行"),s("code",[t._v("@mpxjs/mock")]),t._v("所暴露的方法之后会立即拦截小程序的原生请求，如果需要根据不同环境变量等去控制是否使用 mock 数据，可以参考如下方法：")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/mock/index.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mock "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/mock"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://api.example.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list|1-10"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"id|+1"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- app.mpx --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/javascript"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mockSetup "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mock/index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当为开发环境时才启用mock")]),t._v("\n  process"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("env"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NODE_ENV")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"development"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mockSetup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"mock-入参"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mock-入参"}},[t._v("#")]),t._v(" Mock 入参")]),t._v(" "),s("p",[s("code",[t._v("@mpxjs/mock")]),t._v(" 所暴露的函数仅接收一个类型为 "),s("code",[t._v("mockRequstList")]),t._v(" 的参数，该类型定义如下：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("mockItem")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  url"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  rule"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("mockRequstList")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("mockItem"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//示例:")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mockList"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" mockRequstList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    url"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://api.example.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请求触发后匹配到该链接时其响应数据会被mock拦截")]),t._v("\n    rule"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mock生成返回数据的规则")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'number|1-10'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("h2",{attrs:{id:"mock-规则示例"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mock-规则示例"}},[t._v("#")]),t._v(" Mock 规则示例")]),t._v(" "),s("ul",[s("li",[t._v("基本类型数据生成")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mock "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/mock"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://api.example.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"number|1-10"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 随机生成1-10中的任意整数")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"string|6"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("[0-9a-f]")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 值支持正则表达式,随机生成6位的16进制值")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"boolean|1"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 随机生成一个布尔值,值为 true 的概率是 1/2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请求 http://api.example.com 后返回值为:")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   number: 2,")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//   string: "e1e6dc",')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   boolean: false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// }")]),t._v("\n")])])]),s("ul",[s("li",[t._v("生成随机长度id自增的列表")])]),t._v(" "),s("details",{staticClass:"custom-block details"},[s("summary",[t._v("查看示例")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mock "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/mock"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://api.example.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list|2-5"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 生成长度范围在2-5的数组")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"id|+1"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// id每次自增1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请求 http://api.example.com 后返回")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//   "list": [{')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//     "id": 0')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   },{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//     "id": 1')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   },{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//     "id": 2')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   }]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// }")]),t._v("\n")])])])]),t._v(" "),s("ul",[s("li",[t._v("pick对象中的随机个值")])]),t._v(" "),s("details",{staticClass:"custom-block details"},[s("summary",[t._v("查看示例")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mock "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/mock"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://api.example.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"object|2"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 随机选取object中的两条数据作为返回")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"310000"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"上海市"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"320000"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"江苏省"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"330000"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"浙江省"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"340000"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"安徽省"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请求 http://api.example.com 后返回")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//   "object": {')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//     "330000": "浙江省",')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//     "340000": "安徽省"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   }")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// }")]),t._v("\n")])])])]),t._v(" "),s("p",[t._v("更多生成规则可查阅 "),s("a",{attrs:{href:"https://github.com/nuysoft/Mock/wiki/Syntax-Specification",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mock官方文档-Syntax Specification"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("更多示例可查看 "),s("a",{attrs:{href:"http://mockjs.com/examples.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mock示例"),s("OutboundLink")],1)]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("由于小程序环境的局限性，mockjs 依赖 eval 函数实现的相关能力(如：占位符)无法正确运行")])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/103.b34f6752.js b/docs-vuepress/.vuepress/dist/assets/js/103.b34f6752.js
new file mode 100644
index 0000000000..927c61ed86
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/103.b34f6752.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{451:function(t,s,a){"use strict";a.r(s);var e=a(4),n=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"从旧版本迁移至-2-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#从旧版本迁移至-2-7"}},[t._v("#")]),t._v(" 从旧版本迁移至 2.7")]),t._v(" "),s("p",[t._v("自 2.7 版本开始，Mpx 将编译构建流程基于 Webpack5 进行了"),s("strong",[t._v("全面的重构")]),t._v("，优化解决了老的编译流程中存在的大量历史遗留问题，安全完整地支持了基于文件系统的持久化缓存，大幅提升了 Mpx 想的编译构建速度，以滴滴出行小程序为例，无缓存场景下相较 2.6 版本提速约 180%，有缓存场景下提速约 "),s("strong",[t._v("10")]),t._v(" 倍。")]),t._v(" "),s("p",[t._v("与此同时，Mpx 2.7 版本还带来了 rules 复用，完善的单元测试支持，独立分包构建，分包异步化等众多新特性。直接通过 @mpxjs/cli 创建的新项目就能够直接使用这些新特性，如果你对于编译构建没有太多定制化诉求，我们也推荐使用 @mpxjs/cli 新建项目，并将老项目中的 src 目录 copy 覆盖至新项目的方式进行迁移，这是一种成本最低的迁移方式。")]),t._v(" "),s("p",[t._v("如果你的老项目中已经对编译构建进行了高度的定制，本文将提供详细的迁移工作指引。")]),t._v(" "),s("h2",{attrs:{id:"依赖升级"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#依赖升级"}},[t._v("#")]),t._v(" 依赖升级")]),t._v(" "),s("p",[t._v("将下面列出的相关依赖升级至对应版本，如果有其他自行引入的 loader 也确保将其升级至 webpack5 兼容的版本：")]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"dependencies"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/api-proxy"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.7.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/core"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.7.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/fetch"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.7.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"devDependencies"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/webpack-plugin"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.7.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"webpack"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^5.64.4"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"webpack-merge"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^5.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"terser-webpack-plugin"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^5.2.5"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"copy-webpack-plugin"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^9.0.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"webpack-bundle-analyzer"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^4.5.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"ts-loader"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^9.2.6"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// eslint相关配置，按需安装")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^7.32.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint-config-standard"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^16.0.3"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint-plugin-html"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^6.2.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint-plugin-import"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.25.2"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint-plugin-node"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^11.1.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint-plugin-promise"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^5.1.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint-webpack-plugin"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^3.1.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"开启持久化缓存"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开启持久化缓存"}},[t._v("#")]),t._v(" 开启持久化缓存")]),t._v(" "),s("p",[t._v("在 webpack 配置中添加以下配置项：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cache")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'filesystem'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 声明构建配置，注意如果声明某个文件夹为构建配置，需要在文件夹下放置空的package.json文件，避免构建依赖收集时将主项目的依赖项视为构建依赖")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("buildDependencies")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'build/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'config/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheDirectory")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.cache/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("snapshot")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果希望修改node_modules下的文件时对应的缓存可以失效，可以将此处的配置改为 managedPaths: []")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("managedPaths")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"修改rules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#修改rules"}},[t._v("#")]),t._v(" 修改rules")]),t._v(" "),s("p",[t._v("在 2.7 版本中，我们优化了 .mpx 文件中各个 block 应用 loader 的规则。")]),t._v(" "),s("p",[t._v('在之前的版本中，我们基本上使用内置的规则对 .mpx 中的 block 应用 loaders，如：对 <script> 应用 babel-loader，对 <style lang="stylus"> 应用 stylus-loader。这种方式的弊端主要在于用户无法便捷地自定义 block 的 loaders 应用规则，比如传入特定的 loaders 配置。')]),t._v(" "),s("p",[t._v('在 2.7 版本中，我们支持了构建时读取用户在 module.rules 中配置的规则来对 block 进行 loaders 应用， 例如：对于 <style lang="stylus"> 我们会对其应用用户在 rules 中对于 .stylus 文件 配置的 loaders，当用户没有在 block 中声明 lang 属性时，我们也会兜底使用不同区块默认的 lang 来进行 rules 匹配。')]),t._v(" "),s("p",[t._v("因此，相较于过去的版本，我们需要在 rules 中添加一些规则使得 .mpx 文件中的各类 block 都能得到正确的处理。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 新版本中rules规则对.mpx文件中的区块同样生效，在旧版本中.mpx文件中script会走内置的babel转义，但是新版当中只有在include范围内的.mpx文件才会走babel，但由于新版本中.mpx文件中的script会采用.mpx.js的格式来匹配rules，因此我们可以用如下include条件让其保持与旧版本一致的表现。")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.js$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.mpx\\.js")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/@mpxjs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如使用ts编码则需要添加本条rule")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.ts$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ts-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("options")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("appendTsSuffixTo")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(mpx|vue)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理json区块")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.json$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resourceQuery")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("asScript")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'javascript/auto'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理wxs")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(wxs|qs|sjs|qjs|jds|dds|filter\\.js)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wxsPreLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("enforce")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pre'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理图像资源")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 下面的rules输出小程序时需配置，如输出web需要修改为vue的相关rules，具体逻辑可以参考脚手架项目中build/getRules.js")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx主loader")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.mpx$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("currentMpxLoaderConf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如使用sass/less等其他预编译语言，自行修改test规则并用sass/less-loader替换stylus-loader")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.styl(us)?$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wxssLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'stylus-loader'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理未使用预编译语言的style区块和独立样式文件")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(wxss|acss|css|qss|ttss|jxss|ddss)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wxssLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理未使用预编译语言的template区块和独立模板文件")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(wxml|axml|swan|qml|ttml|qxml|jxml|ddml)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wxmlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"entry配置修改"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#entry配置修改"}},[t._v("#")]),t._v(" entry配置修改")]),t._v(" "),s("p",[t._v("如果进行常规的小程序输出，无需关注。如进行插件输出或独立输出组件/页面等特殊场景，mpx 提供了辅助方法来生成对应的 entry request，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 输出plugin")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPluginEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./plugin.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 独立输出组件，相当于./list.mpx?isComponent，不过为了保障后续该配置不受框架内部query变动影响，建议使用辅助方法")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getComponentEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./list.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 独立输出页面，相当于./index.mpx?isPage")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("index")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPageEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./index.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"mpxwebpackplugin配置变更"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin配置变更"}},[t._v("#")]),t._v(" MpxWebpackPlugin配置变更")]),t._v(" "),s("ul",[s("li",[t._v("移除了forceDisableInject配置")]),t._v(" "),s("li",[t._v("nativeOptions更名为nativeConfig")])]),t._v(" "),s("p",[t._v("上述的内容中只列举了一些和 mpx 高度相关的配置项变更，如果你的项目使用了特定的插件或者loader，请确保将其升级至兼容 webpack5 的版本。")])])}),[],!1,null,null,null);s.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/104.78f6358e.js b/docs-vuepress/.vuepress/dist/assets/js/104.78f6358e.js
new file mode 100644
index 0000000000..4959c786f5
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/104.78f6358e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{450:function(t,s,a){"use strict";a.r(s);var e=a(4),n=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"从-2-7-升级至-2-8"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#从-2-7-升级至-2-8"}},[t._v("#")]),t._v(" 从 2.7 升级至 2.8")]),t._v(" "),s("p",[t._v("不同于 2.7 版本对于编译构建进行的大幅度变动升级，Mpx@2.8 版本升级的核心在于运行时支持组合式 API 能力，并尽可能追求向前兼容，以降低用户的升级成本。我们默认脚手架生成的全新项目已经适配了 2.8 版本的全部变更，如果你需要将旧项目从 2.7 升级至 2.8 版本，下面是详细的升级指引。")]),t._v(" "),s("h2",{attrs:{id:"依赖升级"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#依赖升级"}},[t._v("#")]),t._v(" 依赖升级")]),t._v(" "),s("p",[t._v("请按照下方列表升级或新增相关依赖：")]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"dependencies"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/api-proxy"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/core"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/store"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/pinia"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/utils"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/fetch"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这部分依赖为输出 web 专用，如项目无需输出 web 可以省略")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"vue"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.7.10"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"vue-demi"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^0.13.11"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"vue-i18n"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^8.27.2"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"vue-i18n-bridge"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^9.2.2"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"devDependencies"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/webpack-plugin"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/size-report"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/babel-plugin-inject-page-events"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"编译配置变更"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编译配置变更"}},[t._v("#")]),t._v(" 编译配置变更")]),t._v(" "),s("p",[t._v("在编译配置方面，用户几乎不用进行任何改变，唯一的例外是当用户想要通过组合式 API 的方式注册具有副作用的页面事件时，需要在 "),s("code",[t._v("babel")]),t._v(" 配置中添加 "),s("code",[t._v("@mpxjs/babel-plugin-inject-page-events")]),t._v(" 插件，如下所示：")]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// babel.config.json")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"plugins"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@babel/transform-runtime"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"corejs"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"version"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^7.10.4"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/babel-plugin-inject-page-events"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("关于副作用页面事件的更多详情查看"),s("RouterLink",{attrs:{to:"/guide/composition-api/composition-api.html#具有副作用的页面事件"}},[t._v("这里")]),t._v("。")],1),t._v(" "),s("h2",{attrs:{id:"运行时破坏性变化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#运行时破坏性变化"}},[t._v("#")]),t._v(" 运行时破坏性变化")]),t._v(" "),s("p",[t._v("在 2.8 开发过程中，我们修正了过去版本中存在的不合理的设计与实现，在运行时带来了少许破坏性改变，详情如下：")]),t._v(" "),s("ul",[s("li",[t._v("框架过往提供的组件增强生命周期 "),s("code",[t._v("pageShow/pageHide")]),t._v(" 与微信原生提供的 "),s("code",[t._v("pageLifetimes.show/hide")]),t._v(" 完全对齐，不再提供组件初始挂载时必定执行 "),s("code",[t._v("pageShow")]),t._v(" 的保障（因为组件可能在后台页面进行挂载），相关初始化逻辑一定不要放置在 "),s("code",[t._v("pageShow")]),t._v(" 当中；")]),t._v(" "),s("li",[t._v("取消了框架过去提供的基于内部生命周期实现的非标准增强生命周期，如 "),s("code",[t._v("beforeCreate/onBeforeCreate")]),t._v(" 等，直接将内部生命周期变量导出提供给用户使用，详情查看"),s("RouterLink",{attrs:{to:"/guide/composition-api/composition-api.html#框架内置生命周期"}},[t._v("这里")]),t._v("；")],1),t._v(" "),s("li",[t._v("为了优化 tree shaking，作为框架运行时 "),s("code",[t._v("default export")]),t._v(" 的 "),s("code",[t._v("Mpx")]),t._v(" 对象不再挂载 "),s("code",[t._v("createComponent/createStore")]),t._v(" 等运行时方法，一律通过 "),s("code",[t._v("named export")]),t._v(" 提供，"),s("code",[t._v("Mpx")]),t._v(" 对象上仅保留 "),s("code",[t._v("set/use")]),t._v(" 等全局 API；")]),t._v(" "),s("li",[t._v("使用 I18n 能力时，为了与新版 vue-i18n 保持对齐，"),s("code",[t._v("this.$i18n")]),t._v(" 对象指向全局作用域，如需创建局部作用域需要使用组合式 API "),s("code",[t._v("useI18n")]),t._v(" 的方式进行创建。")]),t._v(" "),s("li",[s("code",[t._v("watch")]),t._v(" API 不再接受第二个参数为带有 "),s("code",[t._v("handler")]),t._v(" 属性的对象形式（该参数形式只应存在于 "),s("code",[t._v("watch")]),t._v(" option 中），第二个参数必须为回调函数，与 "),s("a",{attrs:{href:"https://vuejs.org/api/reactivity-core.html#watch",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue"),s("OutboundLink")],1),t._v(" 对齐。")])])])}),[],!1,null,null,null);s.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/105.eb6680fc.js b/docs-vuepress/.vuepress/dist/assets/js/105.eb6680fc.js
new file mode 100644
index 0000000000..9abb8d8427
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/105.eb6680fc.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{455:function(s,t,a){"use strict";a.r(t);var r=a(4),n=Object(r.a)({},(function(){var s=this,t=s._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h1",{attrs:{id:"从-2-8-升级至-2-9"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#从-2-8-升级至-2-9"}},[s._v("#")]),s._v(" 从 2.8 升级至 2.9")]),s._v(" "),t("p",[s._v("Mpx 2.9 版本不包含破坏性变更，主要新增了原子类支持、输出 web 支持 SSR 和构建产物体积优化三项核心特性，更详细的介绍查看"),t("RouterLink",{attrs:{to:"/articles/2.9-release.html"}},[s._v("这里")])],1),s._v(" "),t("h2",{attrs:{id:"依赖升级"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#依赖升级"}},[s._v("#")]),s._v(" 依赖升级")]),s._v(" "),t("p",[s._v("如果你从既有项目中进行升级，仅需将 @mpxjs 下的依赖升级至 2.9 即可")]),s._v(" "),t("div",{staticClass:"language-json5 extra-class"},[t("pre",{pre:!0,attrs:{class:"language-json5"}},[t("code",[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"dependencies"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/api-proxy"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/core"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/store"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/pinia"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/utils"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/fetch"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// ...")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"devDependencies"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/webpack-plugin"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/size-report"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/babel-plugin-inject-page-events"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 如需使用原子类，加入以下依赖")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/unocss-plugin"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/unocss-base"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 如需使用SSR，加入以下依赖")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"axios"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^1.6.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"express"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^4.18.2"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"serve-favicon"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.5.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"vue-server-renderer"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.7.14"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// ...")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("h2",{attrs:{id:"使用原子类"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#使用原子类"}},[s._v("#")]),s._v(" 使用原子类")]),s._v(" "),t("p",[s._v("详情查看"),t("RouterLink",{attrs:{to:"/guide/advance/utility-first-css.html"}},[s._v("这里")])],1),s._v(" "),t("h2",{attrs:{id:"使用ssr"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#使用ssr"}},[s._v("#")]),s._v(" 使用SSR")]),s._v(" "),t("p",[s._v("详情查看"),t("RouterLink",{attrs:{to:"/guide/advance/ssr.html"}},[s._v("这里")])],1)])}),[],!1,null,null,null);t.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/106.471f03cf.js b/docs-vuepress/.vuepress/dist/assets/js/106.471f03cf.js
new file mode 100644
index 0000000000..32e0a093bc
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/106.471f03cf.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{454:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"mpx-cli-v2-迁移到-v3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx-cli-v2-迁移到-v3"}},[t._v("#")]),t._v(" mpx-cli v2 迁移到 v3")]),t._v(" "),s("h2",{attrs:{id:"升级-mpxjs-cli"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#升级-mpxjs-cli"}},[t._v("#")]),t._v(" 升级"),s("code",[t._v("@mpxjs/cli")])]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("npm install @mpxjs/cli@3.x -g\n")])])]),s("h2",{attrs:{id:"配置迁移"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置迁移"}},[t._v("#")]),t._v(" 配置迁移")]),t._v(" "),s("blockquote",[s("p",[t._v("v3 兼容了 v2 的所有配置，如果没有特殊修改，则不需要进行配置迁移。")])]),t._v(" "),s("ul",[s("li",[s("code",[t._v("config/devServer.js")]),t._v("迁移到"),s("code",[t._v("vue.config.js")]),t._v("下的"),s("code",[t._v("devServer")])]),t._v(" "),s("li",[s("code",[t._v("config/mpxPlugin.conf.js")]),t._v("迁移到"),s("code",[t._v("vue.config.js")]),t._v("下的"),s("code",[t._v("pluginOptions.mpx.plugin")])]),t._v(" "),s("li",[s("code",[t._v("config/mpxLoader.conf.js")]),t._v("迁移到"),s("code",[t._v("vue.config.js")]),t._v("下的"),s("code",[t._v("pluginOptions.mpx.loader")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里等同于`@mpxjs/webpack-plugin`的参数")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里等同于`mpx-loader`参数")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("devServer")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// dev服务配置")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"新增自定义配置-修改已有配置参数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#新增自定义配置-修改已有配置参数"}},[t._v("#")]),t._v(" 新增自定义配置/修改已有配置参数")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'newPlugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("params"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用mpx inspect 可以根据注释来查看插件命名")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mpx-webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("tap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("args")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" newArgs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者也可以通过configureWebpack配置,这里返回的配置会通过webpack-merge合并到内部配置中")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Plugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[s("a",{attrs:{href:"https://github.com/neutrinojs/webpack-chain",target:"_blank",rel:"noopener noreferrer"}},[t._v("webpack-chain"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://github.com/survivejs/webpack-merge",target:"_blank",rel:"noopener noreferrer"}},[t._v("webpack-merge"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"编译后钩子"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编译后钩子"}},[t._v("#")]),t._v(" 编译后钩子")]),t._v(" "),s("p",[t._v("由于 webpack 配置都内置到了插件里，所以编译后的钩子无法像 2.x 一样直接在"),s("code",[t._v("webpack")]),t._v("脚本里添加。")]),t._v(" "),s("p",[t._v("这里有两个方案来解决上述问题")]),t._v(" "),s("ol",[s("li",[s("code",[t._v("webpack")]),t._v("插件")]),t._v(" "),s("li",[t._v("新建一个"),s("code",[t._v("mpx-cli")]),t._v("插件")])]),t._v(" "),s("p",[t._v("例如我们新建一个"),s("code",[t._v("vue-cli-plugin-mpx-build-upload")]),t._v("插件,用来在构建完成后上传图片到"),s("code",[t._v("cdn")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// index.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runServiceCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fn "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("service"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" fn "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fn")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注册一个新的命令")]),t._v("\n  api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'build:upload'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("deploy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 运行原有的build命令，build会返回一个promise来表示构建完成")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runServiceCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'build'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do something")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("uploadFile")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("然后在我们的项目里安装该插件并运行"),s("code",[t._v("npx mpx-cli-service build:upload")]),t._v("即可。")]),t._v(" "),s("h2",{attrs:{id:"项目结构变化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#项目结构变化"}},[t._v("#")]),t._v(" 项目结构变化")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/filetree.jpg",alt:"项目结构变化"}})]),t._v(" "),s("p",[t._v("v3 版本相对于 v2 版本的目录结构更加清晰。")]),t._v(" "),s("ul",[s("li",[t._v("移除了"),s("code",[t._v("config/build")]),t._v("的配置目录，将其统一到了插件配置当中，可以通过"),s("code",[t._v("vue.config.js")]),t._v("修改。")]),t._v(" "),s("li",[s("code",[t._v("index.html")]),t._v("移动到"),s("code",[t._v("public")]),t._v("目录下。")]),t._v(" "),s("li",[t._v("增加"),s("code",[t._v("jsconfig.json")]),t._v(",让类型提示更加友好。")])]),t._v(" "),s("h2",{attrs:{id:"more"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#more"}},[t._v("#")]),t._v(" More")]),t._v(" "),s("p",[t._v("v3 版本相对于 v2 版本的整体架构相差较大，v3 版本主要基于"),s("code",[t._v("vue-cli")]),t._v("架构，主要有以下优势。")]),t._v(" "),s("h3",{attrs:{id:"_1-插件化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-插件化"}},[t._v("#")]),t._v(" 1. 插件化")]),t._v(" "),s("p",[t._v("v3 版本的配置依靠插件化，将 v2 版本的文件配置整合到了各个自定义插件中。")]),t._v(" "),s("ul",[s("li",[t._v("vue-cli-plugin-mpx-eslint eslint 配置")]),t._v(" "),s("li",[t._v("vue-cli-plugin-mpx-mp 小程序构建配置以及命令")]),t._v(" "),s("li",[t._v("vue-cli-plugin-mpx-plugin-mode 插件配置")]),t._v(" "),s("li",[t._v("vue-cli-plugin-mpx-typescript ts 配置")]),t._v(" "),s("li",[t._v("vue-cli-plugin-mpx-web web 构建配置以及命令")])]),t._v(" "),s("p",[t._v("除此之外，也可以使用统一的"),s("code",[t._v("vue.config.js")]),t._v("来自定义配置，或者将配置抽离到插件当中，来进行统一的管理。")]),t._v(" "),s("h3",{attrs:{id:"_2-模板"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-模板"}},[t._v("#")]),t._v(" 2. 模板")]),t._v(" "),s("p",[t._v("v3 版本的模板也可以通过插件进行自定义生成，同时不依赖于 github，在国内网络下不会有生成模板时网络错误的问题。")]),t._v(" "),s("h3",{attrs:{id:"_3-调试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-调试"}},[t._v("#")]),t._v(" 3. 调试")]),t._v(" "),s("p",[t._v("v3 版本可以通过"),s("code",[t._v("mpx inspect:mp/web")]),t._v("来直接调试相关配置，可以更直观的发现配置错误。")]),t._v(" "),s("h3",{attrs:{id:"_4-插件管理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-插件管理"}},[t._v("#")]),t._v(" 4. 插件管理")]),t._v(" "),s("p",[t._v("使用"),s("code",[t._v("mpx invoke")]),t._v("/"),s("code",[t._v("mpx add")]),t._v("/"),s("code",[t._v("mpx upgrade")]),t._v("来管理插件，可以更细粒度的控制相关配置的更新。")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/107.63fd18fd.js b/docs-vuepress/.vuepress/dist/assets/js/107.63fd18fd.js
new file mode 100644
index 0000000000..64f39abf57
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/107.63fd18fd.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{456:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"跨端输出基础"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨端输出基础"}},[t._v("#")]),t._v(" 跨端输出基础")]),t._v(" "),a("p",[t._v("Mpx以微信增强DSL为基础，支持跨端输出至多端小程序、web和客户端，包括支付宝、百度、抖音、京东、QQ等多端小程序平台，基于Vue的web平台，和基于react-native的ios、android及鸿蒙平台。")]),t._v(" "),a("h2",{attrs:{id:"跨端输出配置"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨端输出配置"}},[t._v("#")]),t._v(" 跨端输出配置")]),t._v(" "),a("p",[t._v("配置mpx进行跨端输出十分简单，找到项目构建的webpack配置，在@mpxjs/webpack-plugin的配置参数中设置mode和srcMode参数即可。")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MpxwebpackPlugin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt|jd|web|ios|android|harmony)")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// srcMode为mpx编译的源码平台，目前仅支持wx   ")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("对于使用 @mpxjs/cli 创建的项目，可以通过在 "),a("code",[t._v("npm script")]),t._v(" 当中定义 "),a("code",[t._v("targets")]),t._v(" 来设置编译的目标平台，多个平台标识以"),a("code",[t._v(",")]),t._v("分隔。")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 项目 package.json")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"script"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"build:cross"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpx-cli-service build --targets=wx,ali,ios,android"')]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"跨端条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨端条件编译"}},[t._v("#")]),t._v(" 跨端条件编译")]),t._v(" "),a("p",[t._v("Mpx跨端输出时在框架内针对不同平台的差异进行了大量的转换抹平工作，但框架能做的工作始终是有限的，对于框架无法抹平的部分我们会在编译和运行时进行报错提示，同时提供了完善的跨平台条件编译机制，便于用户自行进行差异化处理，该能力也能够用于实现区分平台进行业务逻辑实现。")]),t._v(" "),a("p",[t._v("Mpx中我们支持了三种维度的条件编译，分别是文件维度，区块维度和代码维度，其中，文件维度和区块维度主要用于处理一些大块的平台差异性逻辑，而代码维度主要用于处理一些局部简单的平台差异。")]),t._v(" "),a("h3",{attrs:{id:"文件维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文件维度条件编译"}},[t._v("#")]),t._v(" 文件维度条件编译")]),t._v(" "),a("p",[t._v("文件维度条件编译简单的来说就是文件为维度进行跨平台差异代码的编写，例如在微信->支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，这时你可以在相同的位置新建一个map.ali.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的mode来加载对应模块，当mode为ali时，会优先加载map.ali.mpx，反之则会加载map.mpx。")]),t._v(" "),a("p",[t._v("文件维度条件编译能够与webpack alias结合使用，对于npm包的文件我们并不方便在原本的文件位置创建.ali的条件编译文件，但我们可以通过webpack alias在相同位置创建一个"),a("code",[t._v("虚拟的")]),t._v(".ali文件，并将其指向项目中的其他文件位置。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对于npm包中的文件依赖")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" npmModule "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'somePackage/lib/index'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置以下alias后，当mode为ali时，会优先加载项目目录中定义的projectRoot/somePackage/lib/index文件")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n  module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resolve")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("alias")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'somePackage/lib/index.ali'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'projectRoot/somePackage/lib/index'")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"区块维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#区块维度条件编译"}},[t._v("#")]),t._v(" 区块维度条件编译")]),t._v(" "),a("p",[t._v("在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加"),a("code",[t._v("mode")]),t._v("属性定义该区块的目标平台即可，示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译mode为ali时使用如下区块--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--该区块中的所有代码需采用支付宝的技术标准进行编写--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("支付宝环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--其他编译mode时使用如下区块--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("其他环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"代码维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#代码维度条件编译"}},[t._v("#")]),t._v(" 代码维度条件编译")]),t._v(" "),a("p",[t._v("如果只有局部的代码存在跨平台差异，mpx同样支持在代码内使用if/else进行局部条件编译，用户可以在js代码和template插值中访问"),a("code",[t._v("__mpx_mode__")]),t._v("获取当前编译mode，进行平台差异逻辑编写，js代码中使用示例如下。")]),t._v(" "),a("p",[t._v("除了 "),a("code",[t._v("__mpx_mode__")]),t._v(" 这个默认插值以外，有别的环境变量需要的话可以在mpx.plugin.conf.js里通过defs进行配置。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__mpx_mode__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行支付宝环境相关逻辑")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行其他环境相关逻辑")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("template代码中使用示例如下")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--此处的__mpx_mode__不需要在组件中声明数据，编译时会基于当前编译mode进行替换--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'ali'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("支付宝环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("else")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("其他环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v('JSON中的条件编译（注意，这个依赖JSON的动态方案，得通过name="json"这种方式来编写，其实写的是js代码，最终module.exports导出一个可json化的对象即可）：')]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" __mpx_mode__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'main/xxx'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sub/xxx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/xxx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以为不同环境动态书写配置")]),t._v("\nmodule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usingComponents")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("aComponents")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../xxxxx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以打注释 xxx组件")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("样式的条件编译：")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n  @mpx-if (__mpx_env__ === 'someEvn')\n*/")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__mpx_mode__ === 'wx') */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" green"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n    @mpx-elif (__mpx_mode__ === 'qq')\n  */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" black"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__mpx_mode__ === 'swan') */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cyan"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".textSize")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 18px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n  @mpx-else\n*/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__mpx_mode__ === 'swan') */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" blue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-else */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n  @mpx-endif\n*/")]),t._v("\n")])])]),a("h3",{attrs:{id:"属性维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#属性维度条件编译"}},[t._v("#")]),t._v(" 属性维度条件编译")]),t._v(" "),a("p",[t._v("属性维度条件编译允许用户在组件上使用 "),a("code",[t._v("@")]),t._v(" 和 "),a("code",[t._v("|")]),t._v(" 符号来指定某个节点或属性只在某些平台下有效。")]),t._v(" "),a("p",[t._v("对于同一个 button 组件，微信小程序支持 "),a("code",[t._v('open-type="getUserInfo"')]),t._v("，但是支付宝小程序支持 "),a("code",[t._v('open-type="getAuthorize"')]),t._v("。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。")]),t._v(" "),a("p",[t._v("比如业务中需要通过 button 按钮获取用户信息，虽然可以使用代码维度条件编译来解决，但是增加了很多代码量：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'wx' || __mpx_mode__ === 'swan'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindgetuserinfo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("elif")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'ali'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getAuthorize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scope")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("userInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("而用属性维度的编译则方便很多：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type@wx|swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindgetuserinfo@wx|swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getAuthorize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scope@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("userInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("属性维度的编译也可以对整个节点进行条件编译，例如只想在支付宝小程序中输出某个节点：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is view"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("需要注意使用上述用法时，节点自身在构建时框架不会对节点属性进行平台语法转换，但对于其子节点，框架并不会继承父级节点 mode，会进行正常跨平台语法转换。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--错误示例--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n// srcMode 为 wx 跨端输出 ali 结果为\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("上述示例为错误写法，假如srcMode为微信小程序，用上述写法构建输出支付宝小程序时，父节点 bindtap 不会被转为 onTap，在支付宝平台执行时事件会无响应。")]),t._v(" "),a("p",[t._v("正确写法如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--正确示例--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n// 输出 ali 产物\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("有时开发者期望使用 @ali 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--srcMode为 wx，输出 ali 时，bindtap 会被正常转换为 onTap--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@_ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。")]),t._v(" "),a("p",[t._v("有时候我们不仅需要对节点属性进行条件编译，可能还需要对节点标签进行条件编译。")]),t._v(" "),a("p",[t._v("为此，我们支持了一个特殊属性 "),a("code",[t._v("mpxTagName")]),t._v("，如果节点存在这个属性，我们会在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mpxTagName@swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cover-view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("will be cover-view in swan"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"use-env"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-env"}},[t._v("#")]),t._v(" 通过 env 实现自定义目标环境的条件编译 ")]),t._v(" "),a("p",[t._v("Mpx 支持在以上四种条件编译的基础上，通过自定义 env 的形式实现在不同环境下编译产出不同的代码。")]),t._v(" "),a("p",[t._v("实例化 MpxWebpackPlugin 的时候，传入配置 env。")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// srcMode为mpx编译的源码平台，目前仅支持wx")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("env")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"didi"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// env为mpx编译的目标环境，需自定义")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"文件维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文件维度条件编译-2"}},[t._v("#")]),t._v(" 文件维度条件编译")]),t._v(" "),a("p",[t._v("微信转支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，而且这个地图组件在不同的目标环境中也有很大的差异，这时你可以在相同的位置新建一个 map.ali.didi.mpx 或 map.ali.qingju.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的 mode 和 env 来加载对应模块，当 mode 为 ali，env 为 didi 时，会优先加载 map.ali.didi.mpx、map.ali.mpx，如果没有定义 env，则会优先加载 map.ali.mpx，反之则会加载 map.mpx。")]),t._v(" "),a("h4",{attrs:{id:"区块维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#区块维度条件编译-2"}},[t._v("#")]),t._v(" 区块维度条件编译")]),t._v(" "),a("p",[t._v("在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加"),a("code",[t._v("mode")]),t._v("或"),a("code",[t._v("env")]),t._v("属性定义该区块的目标平台即可，示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译mode为ali且env为didi时使用如下区块，优先级最高是4--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("env")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("didi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译mode为ali时使用如下区块，优先级是3--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译env为didi时使用如下区块，优先级是2--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("env")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("didi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--其他环境，优先级是1--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("注意，如果多个相同的区块写相同的 mode 和 env，默认会用最后一个，如：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块会被忽略"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("默认会用这个区块"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h4",{attrs:{id:"代码维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#代码维度条件编译-2"}},[t._v("#")]),t._v(" 代码维度条件编译")]),t._v(" "),a("p",[t._v("如果在 MpxWebpackPlugin 插件初始化时自定义了 env，你可以访问"),a("code",[t._v("__mpx_env__")]),t._v("获取当前编译env，进行环境差异逻辑编写。使用方法与"),a("code",[t._v("__mpx_mode__")]),t._v("相同。")]),t._v(" "),a("h4",{attrs:{id:"属性维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#属性维度条件编译-2"}},[t._v("#")]),t._v(" 属性维度条件编译")]),t._v(" "),a("p",[t._v("env 属性维度条件编译与 mode 的用法大致相同，使用 "),a("code",[t._v(":")]),t._v(" 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 "),a("code",[t._v("attr@mode:env:env|mode:env")]),t._v("，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 "),a("code",[t._v(":")]),t._v(" 前缀，形如 "),a("code",[t._v("attr@:env")]),t._v("。")]),t._v(" "),a("p",[t._v("对于同一个 button 组件，微信小程序支持 "),a("code",[t._v('open-type="getUserInfo"')]),t._v("，但是支付宝小程序支持 "),a("code",[t._v('open-type="getAuthorize"')]),t._v("。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。")]),t._v(" "),a("p",[t._v("如果当前编译的目标平台是 wx，以下写法 open-type 属性将被忽略")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@swan:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如果当前 env 不是 didi，以下写法 open-type 属性也会被忽略")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如果只想在 mode 为 wx 且 env 为 didi 或 qingju 的环境下使用 open-type 属性，则可以这样写：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@wx:")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("didi:")]),t._v("qingju")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("env 属性维度的编译同样支持对整个节点或者节点标签名进行条件编译：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mpxTagName@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cover-view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("@:")]),t._v("didi")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bindtap@:")]),t._v("didi")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"环境api跨端抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#环境api跨端抹平"}},[t._v("#")]),t._v(" 环境API跨端抹平")]),t._v(" "),a("h2",{attrs:{id:"webview环境跨端抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#webview环境跨端抹平"}},[t._v("#")]),t._v(" Webview环境跨端抹平")])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/108.614260e9.js b/docs-vuepress/.vuepress/dist/assets/js/108.614260e9.js
new file mode 100644
index 0000000000..a3df5ba269
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/108.614260e9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{452:function(t,n,s){"use strict";s.r(n);var e=s(4),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/109.3da50cc1.js b/docs-vuepress/.vuepress/dist/assets/js/109.3da50cc1.js
new file mode 100644
index 0000000000..bbeab7669e
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/109.3da50cc1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[109],{458:function(t,a,v){"use strict";v.r(a);var e=v(4),_=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"跨端输出rn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨端输出rn"}},[t._v("#")]),t._v(" 跨端输出RN")]),t._v(" "),a("p",[t._v("大致介绍")]),t._v(" "),a("h2",{attrs:{id:"跨端样式定义"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨端样式定义"}},[t._v("#")]),t._v(" 跨端样式定义")]),t._v(" "),a("h3",{attrs:{id:"css选择器"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#css选择器"}},[t._v("#")]),t._v(" CSS选择器")]),t._v(" "),a("h3",{attrs:{id:"样式单位"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#样式单位"}},[t._v("#")]),t._v(" 样式单位")]),t._v(" "),a("h3",{attrs:{id:"文本样式继承"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文本样式继承"}},[t._v("#")]),t._v(" 文本样式继承")]),t._v(" "),a("h3",{attrs:{id:"简写样式属性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#简写样式属性"}},[t._v("#")]),t._v(" 简写样式属性")]),t._v(" "),a("h3",{attrs:{id:"css函数"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#css函数"}},[t._v("#")]),t._v(" CSS函数")]),t._v(" "),a("h3",{attrs:{id:"使用原子类"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用原子类"}},[t._v("#")]),t._v(" 使用原子类")]),t._v(" "),a("h2",{attrs:{id:"混合编写rn代码"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#混合编写rn代码"}},[t._v("#")]),t._v(" 混合编写RN代码")]),t._v(" "),a("h3",{attrs:{id:"使用rn组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用rn组件"}},[t._v("#")]),t._v(" 使用RN组件")]),t._v(" "),a("h3",{attrs:{id:"使用react-hooks"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用react-hooks"}},[t._v("#")]),t._v(" 使用React hooks")]),t._v(" "),a("h2",{attrs:{id:"能力支持范围"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#能力支持范围"}},[t._v("#")]),t._v(" 能力支持范围")]),t._v(" "),a("h3",{attrs:{id:"模版语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#模版语法"}},[t._v("#")]),t._v(" 模版语法")]),t._v(" "),a("h4",{attrs:{id:"事件处理"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#事件处理"}},[t._v("#")]),t._v(" 事件处理")]),t._v(" "),a("p",[t._v("目前 Mpx 输出 React Native 的事件编写遵循小程序的事件编写规范，支持事件的冒泡及捕获")]),t._v(" "),a("p",[t._v("普通事件绑定")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view bindtap"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    Click here"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("绑定并阻止事件冒泡")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view catchtap"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    Click here"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("事件捕获")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view capture"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("bind"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("touchstart"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap1"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  outer view\n  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view capture"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("bind"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("touchstart"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap2"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    inner view\n  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("中断捕获阶段和取消冒泡阶段")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view capture"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("catch"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("touchstart"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap1"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  outer view\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n")])])]),a("p",[t._v("在此基础上也新增了事件处理内联传参的增强机制。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--Mpx增强语法，模板内联传参，方便简洁--\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTapInline('b')"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("b"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接通过参数获取数据，直观方便")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTapInline")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("除此之外，Mpx 也支持了动态事件绑定")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--动态事件绑定--\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{items}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap_{{index}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{item}}\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" data "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 3'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 4'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_0")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_2")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 3'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 4'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("当同一个元素上同时绑定了 catchtap 和 bindtap 事件时，两个事件都会被触发执行。但是是否阻止事件冒泡的行为,会以模板上第一个绑定的事件标识符为准。\n如果第一个绑定的是 catchtap，那么不管后面绑定的是什么,都会阻止事件冒泡。如果第一个绑定的是 bindtap，则不会阻止事件冒泡。")]),t._v(" "),a("li",[t._v("当同一个元素上绑定了 capture-bind:tap 和 bindtap 事件时，事件的执行时机会根据模板上第一个绑定事件的标识符来决定。如果第一个绑定的是 capture-bind:tap，则事件会在捕获阶段触发，如果第一个绑定的是 bindtap，则事件会在冒泡阶段触发。")]),t._v(" "),a("li",[t._v("当使用了事件委托想获取 e.target.dataset 时，只有点击到文本节点才能获取到，点击其他区域无效。建议直接将事件绑定到事件触发的元素上，使用 e.currentTarget 来获取 dataset 等数据。")]),t._v(" "),a("li",[t._v("如果元素上设置了 opacity: 0 的样式，会导致 ios 事件无法响应。")])]),t._v(" "),a("h3",{attrs:{id:"基础组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#基础组件"}},[t._v("#")]),t._v(" 基础组件")]),t._v(" "),a("p",[t._v("目前 Mpx 输出 React Native 仅支持以下组件，文档中未提及的组件以及组件属性即为不支持，具体使用范围可参考如下文档")]),t._v(" "),a("p",[t._v("RN环境基础组件通用属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])]),t._v(" "),a("tr",[a("td",[t._v("enable-var")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("true")]),t._v(" "),a("td",[t._v("默认支持使用 css variable，若想关闭该功能可设置为 false")])]),t._v(" "),a("tr",[a("td",[t._v("parent-font-size")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("父组件字体大小，主要用于百分比计算的场景，如 font-size: 100%")])]),t._v(" "),a("tr",[a("td",[t._v("parent-width")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("父组件宽度，主要用于百分比计算的场景，如 width: calc(100% - 20px)，需要在外部传递父组件的宽度")])]),t._v(" "),a("tr",[a("td",[t._v("parent-height")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("父组件高度，主要用于百分比计算的场景，如 height: calc(100% - 20px),需要在外部传递父组件的高度")])])])]),t._v(" "),a("h4",{attrs:{id:"view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#view"}},[t._v("#")]),t._v(" view")]),t._v(" "),a("p",[t._v("视图容器。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("hover-class")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定按下去的样式类。")])]),t._v(" "),a("tr",[a("td",[t._v("hover-start-time")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("50")]),t._v(" "),a("td",[t._v("按住后多久出现点击态，单位毫秒")])]),t._v(" "),a("tr",[a("td",[t._v("hover-stay-time")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("400")]),t._v(" "),a("td",[t._v("手指松开后点击态保留时间，单位毫秒")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindtap")]),t._v(" "),a("td",[t._v("点击的时候触发")])])])]),t._v(" "),a("h4",{attrs:{id:"scroll-view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scroll-view"}},[t._v("#")]),t._v(" scroll-view")]),t._v(" "),a("p",[t._v("可滚动视图区域。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("scroll-x")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("允许横向滚动动")])]),t._v(" "),a("tr",[a("td",[t._v("scroll-y")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("允许纵向滚动")])]),t._v(" "),a("tr",[a("td",[t._v("upper-threshold")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("50")])]),t._v(" "),a("td",[t._v("距顶部/左边多远时(单位 px),触发 scrolltoupper 事件")])]),t._v(" "),a("tr",[a("td",[t._v("lower-threshold")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("50")])]),t._v(" "),a("td",[t._v("距底部/右边多远时(单位 px),触发 scrolltolower 事件")])]),t._v(" "),a("tr",[a("td",[t._v("scroll-top")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("0")])]),t._v(" "),a("td",[t._v("设置纵向滚动条位置")])]),t._v(" "),a("tr",[a("td",[t._v("scroll-left")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("0")])]),t._v(" "),a("td",[t._v("设置横向滚动条位置")])]),t._v(" "),a("tr",[a("td",[t._v("scroll-with-animation")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("在设置滚动条位置时使用动画过渡")])]),t._v(" "),a("tr",[a("td",[t._v("enable-back-to-top")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("点击状态栏的时候视图会滚动到顶部")])]),t._v(" "),a("tr",[a("td",[t._v("enhanced")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("scroll-view 组件功能增强")])]),t._v(" "),a("tr",[a("td",[t._v("refresher-enabled")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("开启自定义下拉刷新")])]),t._v(" "),a("tr",[a("td",[t._v("scroll-anchoring")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("开启滚动区域滚动锚点")])]),t._v(" "),a("tr",[a("td",[t._v("scroll-into-view")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("值应为某子元素id（id不能以数字开头）")])]),t._v(" "),a("tr",[a("td",[t._v("refresher-default-style")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("'black'")])]),t._v(" "),a("td",[t._v("设置下拉刷新默认样式,支持 "),a("code",[t._v("black")]),t._v("、"),a("code",[t._v("white")]),t._v("、"),a("code",[t._v("none")]),t._v("，仅安卓支持")])]),t._v(" "),a("tr",[a("td",[t._v("refresher-background")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("'#fff'")])]),t._v(" "),a("td",[t._v("设置自定义下拉刷新背景颜色，仅安卓支持")])]),t._v(" "),a("tr",[a("td",[t._v("refresher-triggered")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置当前下拉刷新状态,true 表示已触发")])]),t._v(" "),a("tr",[a("td",[t._v("paging-enabled")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置")])]),t._v(" "),a("tr",[a("td",[t._v("show-scrollbar")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("true")])]),t._v(" "),a("td",[t._v("滚动条显隐控制 (同时开启 enhanced 属性后生效)")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])]),t._v(" "),a("tr",[a("td",[t._v("enable-trigger-intersection-observer")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("是否开启intersection-observer")])]),t._v(" "),a("tr",[a("td",[t._v("simultaneous-handlers")]),t._v(" "),a("td",[t._v("Array"),a("object")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件")])]),t._v(" "),a("tr",[a("td",[t._v("wait-for")]),t._v(" "),a("td",[t._v("Array"),a("object")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("binddragstart")]),t._v(" "),a("td",[t._v("滑动开始事件，同时开启 enhanced 属性后生效")])]),t._v(" "),a("tr",[a("td",[t._v("binddragging")]),t._v(" "),a("td",[t._v("滑动事件，同时开启 enhanced 属性后生效")])]),t._v(" "),a("tr",[a("td",[t._v("binddragend")]),t._v(" "),a("td",[t._v("滑动结束事件，同时开启 enhanced 属性后生效")])]),t._v(" "),a("tr",[a("td",[t._v("bindscrolltoupper")]),t._v(" "),a("td",[t._v("滚动到顶部/左边触发")])]),t._v(" "),a("tr",[a("td",[t._v("bindscrolltolower")]),t._v(" "),a("td",[t._v("滚动到底部/右边触发")])]),t._v(" "),a("tr",[a("td",[t._v("bindscroll")]),t._v(" "),a("td",[t._v("滚动时触发")])]),t._v(" "),a("tr",[a("td",[t._v("bindrefresherrefresh")]),t._v(" "),a("td",[t._v("自定义下拉刷新被触发")])])])]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v('目前不支持自定义下拉刷新节点，使用 slot="refresher" 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来')]),t._v(" "),a("li",[t._v("若使用 scroll-into-view 属性，需要 id 对应的组件节点添加 wx:ref 标记，否则无法正常滚动")]),t._v(" "),a("li",[t._v("simultaneous-handlers 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture]")]),t._v(" "),a("li",[t._v("wait-for  为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail]")])]),t._v(" "),a("h4",{attrs:{id:"swiper"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#swiper"}},[t._v("#")]),t._v(" swiper")]),t._v(" "),a("p",[t._v("滑块视图容器。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("indicator-dots")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否显示面板指示点")])]),t._v(" "),a("tr",[a("td",[t._v("indicator-color")]),t._v(" "),a("td",[t._v("color")]),t._v(" "),a("td",[a("code",[t._v("rgba(0, 0, 0, .3)")])]),t._v(" "),a("td",[t._v("指示点颜色")])]),t._v(" "),a("tr",[a("td",[t._v("indicator-active-color")]),t._v(" "),a("td",[t._v("color")]),t._v(" "),a("td",[a("code",[t._v("#000000")])]),t._v(" "),a("td",[t._v("当前选中的指示点颜色")])]),t._v(" "),a("tr",[a("td",[t._v("autoplay")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否自动切换")])]),t._v(" "),a("tr",[a("td",[t._v("current")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("0")])]),t._v(" "),a("td",[t._v("当前所在滑块的 index")])]),t._v(" "),a("tr",[a("td",[t._v("interval")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("5000")])]),t._v(" "),a("td",[t._v("自动切换时间间隔")])]),t._v(" "),a("tr",[a("td",[t._v("duration")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("500")])]),t._v(" "),a("td",[t._v("滑动动画时长")])]),t._v(" "),a("tr",[a("td",[t._v("circular")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否采用衔接滑动")])]),t._v(" "),a("tr",[a("td",[t._v("vertical")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("滑动方向是否为纵向")])]),t._v(" "),a("tr",[a("td",[t._v("previous-margin")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("0")])]),t._v(" "),a("td",[t._v("前边距，可用于露出前一项的一小部分，接受px")])]),t._v(" "),a("tr",[a("td",[t._v("next-margin")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("0")])]),t._v(" "),a("td",[t._v("后边距，可用于露出后一项的一小部分，接受px")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])]),t._v(" "),a("tr",[a("td",[t._v("easing-function")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("linear")])]),t._v(" "),a("td",[t._v("支持 linear、easeInCubic、easeOutCubic、easeInOutCubic")])]),t._v(" "),a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("无")]),t._v(" "),a("td",[t._v("current 改变时会触发 change 事件，event.detail = {current, source}")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("current 改变时会触发 change 事件，event.detail = {current, source}")])])])]),t._v(" "),a("h4",{attrs:{id:"swiper-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#swiper-item"}},[t._v("#")]),t._v(" swiper-item")]),t._v(" "),a("ol",[a("li",[t._v("仅可放置在swiper组件中，宽高自动设置为100%。")])]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("item-id")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("无")])]),t._v(" "),a("td",[t._v("该 swiper-item 的标识符")])])])]),t._v(" "),a("h4",{attrs:{id:"movable-area"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#movable-area"}},[t._v("#")]),t._v(" movable-area")]),t._v(" "),a("p",[t._v("movable-view的可移动区域。")]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("movable-area不支持设置 scale-area，缩放手势生效区域仅在 movable-view 内")])]),t._v(" "),a("h4",{attrs:{id:"movable-view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#movable-view"}},[t._v("#")]),t._v(" movable-view")]),t._v(" "),a("p",[t._v("可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("direction")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("none")]),t._v(" "),a("td",[t._v("目前支持 all、vertical、horizontal、none｜")])]),t._v(" "),a("tr",[a("td",[t._v("inertia")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("movable-view是否带有惯性｜")])]),t._v(" "),a("tr",[a("td",[t._v("out-of-bounds")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("超过可移动区域后，movable-view是否还可以移动｜")])]),t._v(" "),a("tr",[a("td",[t._v("x")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("定义x轴方向的偏移")])]),t._v(" "),a("tr",[a("td",[t._v("y")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("定义y轴方向的偏移")])]),t._v(" "),a("tr",[a("td",[t._v("friction")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("7")]),t._v(" "),a("td",[t._v("摩擦系数")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("是否禁用")])]),t._v(" "),a("tr",[a("td",[t._v("animation")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("true")]),t._v(" "),a("td",[t._v("是否使用动画")])]),t._v(" "),a("tr",[a("td",[t._v("simultaneous-handlers")]),t._v(" "),a("td",[t._v("Array"),a("object")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件")])]),t._v(" "),a("tr",[a("td",[t._v("wait-for")]),t._v(" "),a("td",[t._v("Array"),a("object")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("拖动过程中触发的事件，event.detail = {x, y, source}")])]),t._v(" "),a("tr",[a("td",[t._v("bindscale")]),t._v(" "),a("td",[t._v("缩放过程中触发的事件，event.detail = {x, y, scale}")])]),t._v(" "),a("tr",[a("td",[t._v("htouchmove")]),t._v(" "),a("td",[t._v("初次手指触摸后移动为横向的移动时触发")])]),t._v(" "),a("tr",[a("td",[t._v("vtouchmove")]),t._v(" "),a("td",[t._v("初次手指触摸后移动为纵向的移动时触发")])])])]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("simultaneous-handlers 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture]")]),t._v(" "),a("li",[t._v("wait-for  为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail]")])]),t._v(" "),a("h4",{attrs:{id:"root-portal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#root-portal"}},[t._v("#")]),t._v(" root-portal")]),t._v(" "),a("p",[t._v("使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。\n属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody")]),t._v(" "),a("p",[t._v("| enable   | boolean           |   true\t     | 是否从页面中脱离出来\t｜")]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("style 样式不支持中使用百分比计算、css variable")])]),t._v(" "),a("h4",{attrs:{id:"cover-view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cover-view"}},[t._v("#")]),t._v(" cover-view")]),t._v(" "),a("p",[t._v("视图容器。\n功能同 view 组件")]),t._v(" "),a("h4",{attrs:{id:"cover-image"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cover-image"}},[t._v("#")]),t._v(" cover-image")]),t._v(" "),a("p",[t._v("视图容器。\n功能同 image 组件")]),t._v(" "),a("h4",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon"}},[t._v("#")]),t._v(" icon")]),t._v(" "),a("p",[t._v("图标组件")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("icon 的类型，有效值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear")])]),t._v(" "),a("tr",[a("td",[t._v("size")]),t._v(" "),a("td",[t._v("String | Number")]),t._v(" "),a("td",[t._v("23")]),t._v(" "),a("td",[t._v("icon 的大小")])]),t._v(" "),a("tr",[a("td",[t._v("color")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("icon 的颜色，同 css 的 color")])])])]),t._v(" "),a("h4",{attrs:{id:"text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text"}},[t._v("#")]),t._v(" text")]),t._v(" "),a("p",[t._v("文本。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("user-select")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("文本是否可选。")])]),t._v(" "),a("tr",[a("td",[t._v("disable-default-style")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("会内置默认样式，比如fontSize为16。设置"),a("code",[t._v("true")]),t._v("可以禁止默认的内置样式。")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindtap")]),t._v(" "),a("td",[t._v("点击的时候触发")])])])]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("未包裹 text 标签的文本，会自动包裹 text 标签。")]),t._v(" "),a("li",[t._v("text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段")])]),t._v(" "),a("h4",{attrs:{id:"button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button"}},[t._v("#")]),t._v(" button")]),t._v(" "),a("p",[t._v("按钮。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("size")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("default")])]),t._v(" "),a("td",[t._v("按钮的大小")])]),t._v(" "),a("tr",[a("td",[t._v("type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("default")])]),t._v(" "),a("td",[t._v("按钮的样式类型")])]),t._v(" "),a("tr",[a("td",[t._v("plain")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("按钮是否镂空，背景色透明")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否禁用")])]),t._v(" "),a("tr",[a("td",[t._v("loading")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("名称前是否带 loading 图标")])]),t._v(" "),a("tr",[a("td",[t._v("open-type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("微信开放能力，当前仅支持 "),a("code",[t._v("share")])])]),t._v(" "),a("tr",[a("td",[t._v("hover-class")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v('指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果')])]),t._v(" "),a("tr",[a("td",[t._v("hover-start-time")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("20")])]),t._v(" "),a("td",[t._v("按住后多久出现点击态，单位毫秒")])]),t._v(" "),a("tr",[a("td",[t._v("hover-stay-time")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("70")])]),t._v(" "),a("td",[t._v("手指松开后点击态保留时间，单位毫秒")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),a("h4",{attrs:{id:"label"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#label"}},[t._v("#")]),t._v(" label")]),t._v(" "),a("p",[t._v("用来改进表单组件的可用性")]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("当前不支持使用 for 属性找到对应 id，仅支持将控件放在该标签内，目前可以绑定的空间有：checkbox、radio、switch。")])]),t._v(" "),a("h4",{attrs:{id:"checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox"}},[t._v("#")]),t._v(" checkbox")]),t._v(" "),a("p",[t._v("多选项目")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("是否禁用")])]),t._v(" "),a("tr",[a("td",[t._v("checked")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("当前是否选中，可用来设置默认选中")])]),t._v(" "),a("tr",[a("td",[t._v("color")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("#09BB07")]),t._v(" "),a("td",[t._v("checkbox的颜色，同css的color")])])])]),t._v(" "),a("h4",{attrs:{id:"checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group"}},[t._v("#")]),t._v(" checkbox-group")]),t._v(" "),a("p",[t._v("多项选择器，内部由多个checkbox组成。")]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }")])])])]),t._v(" "),a("h4",{attrs:{id:"radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio"}},[t._v("#")]),t._v(" radio")]),t._v(" "),a("p",[t._v("单选项目")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("radio 标识，当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("是否禁用")])]),t._v(" "),a("tr",[a("td",[t._v("checked")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("当前是否选中，可用来设置默认选中")])]),t._v(" "),a("tr",[a("td",[t._v("color")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("#09BB07")]),t._v(" "),a("td",[t._v("checkbox 的颜色，同 css 的 color")])])])]),t._v(" "),a("h4",{attrs:{id:"radio-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group"}},[t._v("#")]),t._v(" radio-group")]),t._v(" "),a("p",[t._v("单项选择器，内部由多个 radio 组成")]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("radio-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 radio 的 value 的数组 ] }")])])])]),t._v(" "),a("h4",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form"}},[t._v("#")]),t._v(" form")]),t._v(" "),a("p",[t._v("表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。")]),t._v(" "),a("p",[t._v("当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。")]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindsubmit")]),t._v(" "),a("td",[t._v("携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} }")])]),t._v(" "),a("tr",[a("td",[t._v("bindreset")]),t._v(" "),a("td",[t._v("表单重置时会触发 reset 事件")])])])]),t._v(" "),a("h4",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[t._v("#")]),t._v(" input")]),t._v(" "),a("p",[t._v("输入框。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("输入框的初始内容")])]),t._v(" "),a("tr",[a("td",[t._v("type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("text")])]),t._v(" "),a("td",[t._v("input 的类型，不支持 "),a("code",[t._v("safe-password")]),t._v("、"),a("code",[t._v("nickname")])])]),t._v(" "),a("tr",[a("td",[t._v("password")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否是密码类型")])]),t._v(" "),a("tr",[a("td",[t._v("placeholder")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("输入框为空时占位符")])]),t._v(" "),a("tr",[a("td",[t._v("placeholder-class")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定 placeholder 的样式类，仅支持 color 属性")])]),t._v(" "),a("tr",[a("td",[t._v("placeholder-style")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定 placeholder 的样式，仅支持 color 属性")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否禁用")])]),t._v(" "),a("tr",[a("td",[t._v("maxlength")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("140")])]),t._v(" "),a("td",[t._v("最大输入长度，设置为 -1 的时候不限制最大长度")])]),t._v(" "),a("tr",[a("td",[t._v("auto-focus")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("(即将废弃，请直接使用 focus )自动聚焦，拉起键盘")])]),t._v(" "),a("tr",[a("td",[t._v("focus")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("获取焦点")])]),t._v(" "),a("tr",[a("td",[t._v("confirm-type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("done")])]),t._v(" "),a("td",[t._v("设置键盘右下角按钮的文字，仅在 type='text' 时生效")])]),t._v(" "),a("tr",[a("td",[t._v("confirm-hold")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("点击键盘右下角按钮时是否保持键盘不收起")])]),t._v(" "),a("tr",[a("td",[t._v("cursor")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定 focus 时的光标位置")])]),t._v(" "),a("tr",[a("td",[t._v("cursor-color")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("光标颜色")])]),t._v(" "),a("tr",[a("td",[t._v("selection-start")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("-1")])]),t._v(" "),a("td",[t._v("光标起始位置，自动聚集时有效，需与 selection-end 搭配使用")])]),t._v(" "),a("tr",[a("td",[t._v("selection-end")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("-1")])]),t._v(" "),a("td",[t._v("光标结束位置，自动聚集时有效，需与 selection-start 搭配使用")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindinput")]),t._v(" "),a("td",[t._v("键盘输入时触发，event.detail = { value, cursor }，不支持 "),a("code",[t._v("keyCode")])])]),t._v(" "),a("tr",[a("td",[t._v("bindfocus")]),t._v(" "),a("td",[t._v("输入框聚焦时触发，event.detail = { value }，不支持 "),a("code",[t._v("height")])])]),t._v(" "),a("tr",[a("td",[t._v("bindblur")]),t._v(" "),a("td",[t._v("输入框失去焦点时触发，event.detail = { value }，不支持 "),a("code",[t._v("encryptedValue")]),t._v("、"),a("code",[t._v("encryptError")])])]),t._v(" "),a("tr",[a("td",[t._v("bindconfirm")]),t._v(" "),a("td",[t._v("点击完成按钮时触发，event.detail = { value }")])]),t._v(" "),a("tr",[a("td",[t._v("bind:selectionchange")]),t._v(" "),a("td",[t._v("选区改变事件, event.detail = { selectionStart, selectionEnd }")])])])]),t._v(" "),a("p",[t._v("方法")]),t._v(" "),a("p",[t._v("可通过 "),a("code",[t._v("ref")]),t._v(" 方式调用以下组件实例方法")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("方法名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("focus")]),t._v(" "),a("td",[t._v("使输入框得到焦点")])]),t._v(" "),a("tr",[a("td",[t._v("blur")]),t._v(" "),a("td",[t._v("使输入框失去焦点")])]),t._v(" "),a("tr",[a("td",[t._v("clear")]),t._v(" "),a("td",[t._v("清空输入框的内容")])]),t._v(" "),a("tr",[a("td",[t._v("isFocused")]),t._v(" "),a("td",[t._v("返回值表明当前输入框是否获得了焦点")])])])]),t._v(" "),a("h4",{attrs:{id:"textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea"}},[t._v("#")]),t._v(" textarea")]),t._v(" "),a("p",[t._v("多行输入框。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("输入框内容")])]),t._v(" "),a("tr",[a("td",[t._v("type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("text")])]),t._v(" "),a("td",[t._v("input 的类型，不支持 "),a("code",[t._v("safe-password")]),t._v("、"),a("code",[t._v("nickname")])])]),t._v(" "),a("tr",[a("td",[t._v("placeholder")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("输入框为空时占位符")])]),t._v(" "),a("tr",[a("td",[t._v("placeholder-class")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定 placeholder 的样式类，仅支持 color 属性")])]),t._v(" "),a("tr",[a("td",[t._v("placeholder-style")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定 placeholder 的样式，仅支持 color 属性")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否禁用")])]),t._v(" "),a("tr",[a("td",[t._v("maxlength")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("140")])]),t._v(" "),a("td",[t._v("最大输入长度，设置为 -1 的时候不限制最大长度")])]),t._v(" "),a("tr",[a("td",[t._v("auto-focus")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("(即将废弃，请直接使用 focus )自动聚焦，拉起键盘")])]),t._v(" "),a("tr",[a("td",[t._v("focus")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("获取焦点")])]),t._v(" "),a("tr",[a("td",[t._v("auto-height")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否自动增高，设置 auto-height 时，style.height不生效")])]),t._v(" "),a("tr",[a("td",[t._v("confirm-type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("done")])]),t._v(" "),a("td",[t._v("设置键盘右下角按钮的文字，不支持 "),a("code",[t._v("return")])])]),t._v(" "),a("tr",[a("td",[t._v("confirm-hold")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("点击键盘右下角按钮时是否保持键盘不收起")])]),t._v(" "),a("tr",[a("td",[t._v("cursor")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定 focus 时的光标位置")])]),t._v(" "),a("tr",[a("td",[t._v("cursor-color")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("光标颜色")])]),t._v(" "),a("tr",[a("td",[t._v("selection-start")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("-1")])]),t._v(" "),a("td",[t._v("光标起始位置，自动聚集时有效，需与 selection-end 搭配使用")])]),t._v(" "),a("tr",[a("td",[t._v("selection-end")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("-1")])]),t._v(" "),a("td",[t._v("光标结束位置，自动聚集时有效，需与 selection-start 搭配使用")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindinput")]),t._v(" "),a("td",[t._v("键盘输入时触发，event.detail = { value, cursor }，不支持 "),a("code",[t._v("keyCode")])])]),t._v(" "),a("tr",[a("td",[t._v("bindfocus")]),t._v(" "),a("td",[t._v("输入框聚焦时触发，event.detail = { value }，不支持 "),a("code",[t._v("height")])])]),t._v(" "),a("tr",[a("td",[t._v("bindblur")]),t._v(" "),a("td",[t._v("输入框失去焦点时触发，event.detail = { value }，不支持 "),a("code",[t._v("encryptedValue")]),t._v("、"),a("code",[t._v("encryptError")])])]),t._v(" "),a("tr",[a("td",[t._v("bindconfirm")]),t._v(" "),a("td",[t._v("点击完成按钮时触发，event.detail = { value }")])]),t._v(" "),a("tr",[a("td",[t._v("bindlinechange")]),t._v(" "),a("td",[t._v("输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 "),a("code",[t._v("heightRpx")])])]),t._v(" "),a("tr",[a("td",[t._v("bind:selectionchange")]),t._v(" "),a("td",[t._v("选区改变事件, {selectionStart, selectionEnd}")])])])]),t._v(" "),a("p",[t._v("方法")]),t._v(" "),a("p",[t._v("可通过 "),a("code",[t._v("ref")]),t._v(" 方式调用以下组件实例方法")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("方法名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("focus")]),t._v(" "),a("td",[t._v("使输入框得到焦点")])]),t._v(" "),a("tr",[a("td",[t._v("blur")]),t._v(" "),a("td",[t._v("使输入框失去焦点")])]),t._v(" "),a("tr",[a("td",[t._v("clear")]),t._v(" "),a("td",[t._v("清空输入框的内容")])]),t._v(" "),a("tr",[a("td",[t._v("isFocused")]),t._v(" "),a("td",[t._v("返回值表明当前输入框是否获得了焦点")])])])]),t._v(" "),a("h4",{attrs:{id:"picker-view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-view"}},[t._v("#")]),t._v(" picker-view")]),t._v(" "),a("p",[t._v("嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("Array[number]")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }")])])])]),t._v(" "),a("h4",{attrs:{id:"picker-view-column"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-view-column"}},[t._v("#")]),t._v(" picker-view-column")]),t._v(" "),a("p",[t._v("滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致")]),t._v(" "),a("h4",{attrs:{id:"picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker"}},[t._v("#")]),t._v(" picker")]),t._v(" "),a("p",[t._v("从底部弹起的滚动选择器。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("mode")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("selector")])]),t._v(" "),a("td",[t._v("选择器类型")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否禁用")])])])]),t._v(" "),a("p",[t._v("公共事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindcancel")]),t._v(" "),a("td",[t._v("取消选择时触发")])]),t._v(" "),a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）")])])])]),t._v(" "),a("h5",{attrs:{id:"普通选择器-mode-selector"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#普通选择器-mode-selector"}},[t._v("#")]),t._v(" 普通选择器：mode = selector")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("range")]),t._v(" "),a("td",[t._v("array[object]/array")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v("mode 为 selector 或 multiSelector 时，range 有效")])]),t._v(" "),a("tr",[a("td",[t._v("range-key")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容")])]),t._v(" "),a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("0")]),t._v(" "),a("td",[t._v("表示选择了 range 中的第几个（下标从 0 开始）")])])])]),t._v(" "),a("h5",{attrs:{id:"多列选择器-mode-multiselector"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#多列选择器-mode-multiselector"}},[t._v("#")]),t._v(" 多列选择器：mode = multiSelector")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("range")]),t._v(" "),a("td",[t._v("array[object]/array")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v("mode 为 selector 或 multiSelector 时，range 有效")])]),t._v(" "),a("tr",[a("td",[t._v("range-key")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容")])]),t._v(" "),a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("array")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v("表示选择了 range 中的第几个（下标从 0 开始）")])]),t._v(" "),a("tr",[a("td",[t._v("bindcolumnchange")]),t._v(" "),a("td"),t._v(" "),a("td"),t._v(" "),a("td",[t._v("列改变时触发")])])])]),t._v(" "),a("h5",{attrs:{id:"多列选择器-时间选择器-mode-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#多列选择器-时间选择器-mode-time"}},[t._v("#")]),t._v(" 多列选择器：时间选择器：mode = time")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v('表示选中的时间，格式为"hh:mm"')])]),t._v(" "),a("tr",[a("td",[t._v("start")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v('表示有效时间范围的开始，字符串格式为"hh:mm"')])]),t._v(" "),a("tr",[a("td",[t._v("end")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v('表示有效时间范围的结束，字符串格式为"hh:mm"')])])])]),t._v(" "),a("h5",{attrs:{id:"多列选择器-时间选择器-mode-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#多列选择器-时间选择器-mode-date"}},[t._v("#")]),t._v(" 多列选择器：时间选择器：mode = date")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("当天")])]),t._v(" "),a("td",[t._v('表示选中的日期，格式为"YYYY-MM-DD"')])]),t._v(" "),a("tr",[a("td",[t._v("start")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v('表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"')])]),t._v(" "),a("tr",[a("td",[t._v("end")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v('表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"')])]),t._v(" "),a("tr",[a("td",[t._v("fields")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("day")])]),t._v(" "),a("td",[t._v("有效值 year,month,day，表示选择器的粒度")])])])]),t._v(" "),a("h5",{attrs:{id:"fields-有效值"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fields-有效值"}},[t._v("#")]),t._v(" fields 有效值：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("year")]),t._v(" "),a("td",[t._v("选择器粒度为年")])]),t._v(" "),a("tr",[a("td",[t._v("month")]),t._v(" "),a("td",[t._v("选择器粒度为月份")])]),t._v(" "),a("tr",[a("td",[t._v("day")]),t._v(" "),a("td",[t._v("选择器粒度为天")])])])]),t._v(" "),a("h5",{attrs:{id:"省市区选择器-mode-region"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#省市区选择器-mode-region"}},[t._v("#")]),t._v(" 省市区选择器：mode = region")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("array")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v("表示选中的省市区，默认选中每一列的第一个值")])]),t._v(" "),a("tr",[a("td",[t._v("custom-item")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("可为每一列的顶部添加一个自定义的项")])]),t._v(" "),a("tr",[a("td",[t._v("level")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("region")])]),t._v(" "),a("td",[t._v("选择器层级")])])])]),t._v(" "),a("h5",{attrs:{id:"level-有效值"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#level-有效值"}},[t._v("#")]),t._v(" level 有效值：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("province")]),t._v(" "),a("td",[t._v("选省级选择器")])]),t._v(" "),a("tr",[a("td",[t._v("city")]),t._v(" "),a("td",[t._v("市级选择器")])]),t._v(" "),a("tr",[a("td",[t._v("region")]),t._v(" "),a("td",[t._v("区级选择器")])])])]),t._v(" "),a("h4",{attrs:{id:"image"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#image"}},[t._v("#")]),t._v(" image")]),t._v(" "),a("p",[t._v("图片。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("src")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("图片资源地址，支持本地图片资源及 base64 格式数据，暂不支持 svg 格式")])]),t._v(" "),a("tr",[a("td",[t._v("mode")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("scaleToFill")])]),t._v(" "),a("td",[t._v("图片裁剪、缩放的模式，适配微信 image 所有 mode 格式")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("binderror")]),t._v(" "),a("td",[t._v("当错误发生时触发，event.detail = { errMsg }")])]),t._v(" "),a("tr",[a("td",[t._v("bindload")]),t._v(" "),a("td",[t._v("当图片载入完毕时触发，event.detail = { height, width }")])])])]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("image 组件默认宽度320px、高度240px")]),t._v(" "),a("li",[t._v("image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分")])]),t._v(" "),a("h4",{attrs:{id:"canvas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#canvas"}},[t._v("#")]),t._v(" canvas")]),t._v(" "),a("p",[t._v("画布。")]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindtouchstart")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("手指触摸动作开始")])]),t._v(" "),a("tr",[a("td",[t._v("bindtouchmove")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("手指触摸后移动")])]),t._v(" "),a("tr",[a("td",[t._v("bindtouchend")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("手指触摸动作结束")])]),t._v(" "),a("tr",[a("td",[t._v("bindtouchcancel")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("手指触摸动作被打断")])]),t._v(" "),a("tr",[a("td",[t._v("bindlongtap")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("手指长按 300ms 之后触发")])]),t._v(" "),a("tr",[a("td",[t._v("binderror")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("当发生错误时触发 error 事件， detail = {errMsg}")])])])]),t._v(" "),a("p",[t._v("API")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("方法名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("createImage")]),t._v(" "),a("td",[t._v("创建一个图片对象。 仅支持在 2D Canvas 中使用")])]),t._v(" "),a("tr",[a("td",[t._v("createImageData")]),t._v(" "),a("td",[t._v("创建一个 ImageData 对象。仅支持在 2D Canvas 中使用")])]),t._v(" "),a("tr",[a("td",[t._v("getContext")]),t._v(" "),a("td",[t._v("该方法返回 Canvas 的绘图上下文。仅支持在 2D Canvas 中使用")])]),t._v(" "),a("tr",[a("td",[t._v("toDataURL")]),t._v(" "),a("td",[t._v("返回一个包含图片展示的 data URI")])])])]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("canvas 组件目前仅支持 2D 类型，不支持 webgl")]),t._v(" "),a("li",[t._v("通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，具体接口可以参考 (HTML Canvas 2D Context)[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D] 定义的属性、方法")]),t._v(" "),a("li",[t._v("canvas 的实现主要借助于 PostMessage 方式与 webview 容器通信进行绘制，所以对于严格依赖方法执行时机的场景，如调用 drawImage 绘图，再通过 getImageData 获取图片数据的场景，调用时需要使用 await 等方式来保证方法的执行时机")]),t._v(" "),a("li",[t._v("通过 Canvas.createImage 画图，图片的链接不能有特殊字符，安卓手机可能会 load 失败")])]),t._v(" "),a("h5",{attrs:{id:"web-view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#web-view"}},[t._v("#")]),t._v(" web-view")]),t._v(" "),a("p",[t._v("承载网页的容器。会自动铺满整个RN页面")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("src")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("webview 指向网页的链接，如果需要对跳转的URL设定白名单可跳转，需要在业务跳转之前出来该逻辑")])]),t._v(" "),a("tr",[a("td",[t._v("bindmessage")]),t._v(" "),a("td",[t._v("EventHandler")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("网页向RN通过 postMessage 传递数据")])]),t._v(" "),a("tr",[a("td",[t._v("bindload")]),t._v(" "),a("td",[t._v("EventHandler")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("网页加载成功时候触发此事件")])]),t._v(" "),a("tr",[a("td",[t._v("binderror")]),t._v(" "),a("td",[t._v("EventHandler")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("网页加载失败的时候触发此事件")])])])]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("web-view网页中可使用@mpxjs/webview-bridge@2.9.68提供的接口返回RN页面或与RN页面通信，具体使用细节可以参见"),a("a",{attrs:{href:"#WebviewAPI"}},[t._v("Webview API")])])]),t._v(" "),a("h4",{attrs:{id:"自定义组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#自定义组件"}},[t._v("#")]),t._v(" 自定义组件")]),t._v(" "),a("h4",{attrs:{id:"样式规则"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#样式规则"}},[t._v("#")]),t._v(" 样式规则")]),t._v(" "),a("h4",{attrs:{id:"应用能力"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#应用能力"}},[t._v("#")]),t._v(" 应用能力")]),t._v(" "),a("h4",{attrs:{id:"环境api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#环境api"}},[t._v("#")]),t._v(" 环境API")]),t._v(" "),a("p",[t._v("在RN环境中也提供了一部分常用api能力，方法名与使用方式与小程序相同，可能对于某个api提供的能力会比微信小程序提供的能力少一些，以下是使用说明：")]),t._v(" "),a("h5",{attrs:{id:"使用说明"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用说明"}},[t._v("#")]),t._v(" 使用说明")]),t._v(" "),a("p",[t._v("如果全量引入api-proxy这种情况下，需要如下配置")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 全量引入api-proxy")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@didi/mpxjs-api-proxy'")]),t._v("\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePromise")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("需要在mpx项目中需要配置externals")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("externals: {\n  ...\n  '@react-native-async-storage/async-storage': '@react-native-async-storage/async-storage',\n  '@react-native-clipboard/clipboard': '@react-native-clipboard/clipboard',\n  '@react-native-community/netinfo': '@react-native-community/netinfo',\n  'react-native-device-info': 'react-native-device-info',\n  'react-native-safe-area-context': 'react-native-safe-area-context',\n  'react-native-reanimated': 'react-native-reanimated',\n  'react-native-get-location': 'react-native-get-location',\n  'react-native-haptic-feedback': 'react-native-haptic-feedback'\n},\n")])])]),a("p",[t._v("如果引用单独的api-proxy方法这种情况，需要根据下表说明是否用到一下方法，来确定是否需要配置externals，配置参考上面示例")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("api方法")]),t._v(" "),a("th",[t._v("依赖的react-native三方库")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("showActionSheet")]),t._v(" "),a("td",[t._v("react-native-reanimated")])]),t._v(" "),a("tr",[a("td",[t._v("getNetworkType、"),a("br"),t._v("offNetworkStatusChange、"),a("br"),t._v("onNetworkStatusChange")]),t._v(" "),a("td",[t._v("@react-native-community/netinfo")])]),t._v(" "),a("tr",[a("td",[t._v("getLocation、"),a("br"),t._v("openLocation、"),a("br"),t._v("chooseLocation")]),t._v(" "),a("td",[t._v("react-native-get-location")])]),t._v(" "),a("tr",[a("td",[t._v("setStorage、"),a("br"),t._v(" setStorageSync、"),a("br"),t._v("getStorage、"),a("br"),t._v(" getStorageSync、"),a("br"),t._v("getStorageInfo、"),a("br"),t._v("getStorageInfoSync、"),a("br"),t._v("removeStorage，"),a("br"),t._v("removeStorageSync，"),a("br"),t._v("clearStorage，"),a("br"),t._v("clearStorageSync")]),t._v(" "),a("td",[t._v("@react-native-async-storage/async-storage")])]),t._v(" "),a("tr",[a("td",[t._v("getSystemInfo、"),a("br"),t._v("getSystemInfoSync、"),a("br"),t._v("getDeviceInfo、"),a("br"),t._v("getWindowInfo、"),a("br"),t._v("getLaunchOptionsSync、"),a("br"),t._v("getEnterOptionsSync")]),t._v(" "),a("td",[t._v("react-native-device-info")])]),t._v(" "),a("tr",[a("td",[t._v("getWindowInfo、"),a("br"),t._v("getLaunchOptionsSync、"),a("br"),t._v("getEnterOptionsSync")]),t._v(" "),a("td",[t._v("react-native-safe-area-context")])]),t._v(" "),a("tr",[a("td",[t._v("vibrateShort、"),a("br"),t._v(" vibrateLong")]),t._v(" "),a("td",[t._v("react-native-haptic-feedback")])])])]),t._v(" "),a("p",[t._v("在RN 项目中，如果是以全量引入api-proxy的方法需要在RN环境中执行以下所有的命令，如果只是使用单个api的能力，可以参考上表来判断安装对应的包")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("// 安装api-proxy下所用到的依赖 如果\nnpm i @react-native-async-storage/async-storage\nnpm i @react-native-clipboard/clipboard\nnpm i @react-native-community/netinfo\nnpm i react-native-safe-area-context\nnpm i react-native-device-info\nnpm i react-native-reanimated\nnpm i react-native-haptic-feedback\nios项目需要执行如下命令\ncd ios\npod install\n\nnpm i react-native-get-location\n")])])]),a("p",[t._v("android下需要做如下配置：\n安装react-native-get-location包后，需要在AndroidManifest.xml中定义位置权限，"),a("a",{attrs:{href:"https://www.npmjs.com/package/react-native-get-location",target:"_blank",rel:"noopener noreferrer"}},[t._v("参考文档"),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v('\x3c!-- Define ACCESS_FINE_LOCATION if you will use enableHighAccuracy=true  --\x3e\n<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>\n\n\x3c!-- Define ACCESS_COARSE_LOCATION if you will use enableHighAccuracy=false  --\x3e\n<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>\n\n')])])]),a("p",[t._v("安装react-native-haptic-feedback包后需要在安卓中配置，"),a("a",{attrs:{href:"https://github.com/mkuczera/react-native-haptic-feedback",target:"_blank",rel:"noopener noreferrer"}},[t._v("配置参考文档"),a("OutboundLink")],1),t._v("\n打开 android/app/src/main/java/[...]/MainApplication.java. 在文件的顶部添加以下导入下面的代码片段")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("import com.mkuczera.RNReactNativeHapticFeedbackPackage;\n")])])]),a("p",[t._v("修改设置,将下面的配置添加到android/settings.gradle文件中")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("include "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("':react-native-haptic-feedback'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("project")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("':react-native-haptic-feedback'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("projectDir "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("File")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rootProject"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("projectDir"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../node_modules/react-native-haptic-feedback/android'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("react-native-reanimated在mpx和RN项目都要安装，安装好包后需要在babel.config.json文件中做如下配置，并且RN环境中使用的react-native-reanimated与mpx项目中安装的react-native-reanimated版本要一致：\n"),a("a",{attrs:{href:"https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/",target:"_blank",rel:"noopener noreferrer"}},[t._v("配置参考文档"),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("presets")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// don't add it here :)")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'react-native-reanimated/plugin'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),t._v(" "),a("h4",{attrs:{id:"webview-api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#webview-api"}},[t._v("#")]),t._v(" Webview API")]),t._v(" "),a("p",[t._v("对于web-view组件打开的网页，想要跟RN通信，或者跳转到RN页面，提供了以下能力")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("方法名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("navigateTo")]),t._v(" "),a("td",[t._v("保留当前webview页面，跳转RN页面")])]),t._v(" "),a("tr",[a("td",[t._v("navigateBack")]),t._v(" "),a("td",[t._v("关闭当前页面，返回上一页或多级RN页面")])]),t._v(" "),a("tr",[a("td",[t._v("switchTab")]),t._v(" "),a("td",[t._v("跳转到RN的 tabBar 页面")])]),t._v(" "),a("tr",[a("td",[t._v("reLaunch")]),t._v(" "),a("td",[t._v("关闭所有页面，打开到应用内的某个RN页面")])]),t._v(" "),a("tr",[a("td",[t._v("redirectTo")]),t._v(" "),a("td",[t._v("关闭当前页面，跳转到应用内的某个RN页面")])]),t._v(" "),a("tr",[a("td",[t._v("getEnv")]),t._v(" "),a("td",[t._v("获取当前环境")])]),t._v(" "),a("tr",[a("td",[t._v("postMessage")]),t._v(" "),a("td",[t._v("向RN发送消息，实时触发组件的message事件")])]),t._v(" "),a("tr",[a("td",[t._v("invoke")]),t._v(" "),a("td",[t._v("开放一个webview页面和web页面互通消息的能力")])])])]),t._v(" "),a("h5",{attrs:{id:"webview-bridge示例代码"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#webview-bridge示例代码"}},[t._v("#")]),t._v(" webview-bridge示例代码")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" webviewBridge "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webview-bridge'")]),t._v("\nwebviewBridge"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'RN地址'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("success")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'跳转成功'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h5",{attrs:{id:"invoke示例代码"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#invoke示例代码"}},[t._v("#")]),t._v(" invoke示例代码")]),t._v(" "),a("p",[t._v("RN环境中挂载getTime的逻辑")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 普通方法")]),t._v("\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webviewConfig "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("apiImplementations")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getTime")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("options "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" params "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" options\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" params"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("time")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2024-12-24'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者promise")]),t._v("\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webviewConfig "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("apiImplementations")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getTime")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("options "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" params "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" options\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("params"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" params"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("time")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2024-12-24'")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("reject")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Error")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'没有传text参数'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("web中通信的逻辑")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" webviewBridge "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webview-bridge'")]),t._v("\nwebviewBridge"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("invoke")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'getTime'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'我是入参'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("success")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'接收到的消息：'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("time"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"其他使用限制"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#其他使用限制"}},[t._v("#")]),t._v(" 其他使用限制")]),t._v(" "),a("p",[t._v("如事件的target等")])])}),[],!1,null,null,null);a.default=_.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/11.d7a8d045.js b/docs-vuepress/.vuepress/dist/assets/js/11.d7a8d045.js
new file mode 100644
index 0000000000..3866f0026e
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/11.d7a8d045.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{371:function(n,o,l){"use strict";l.r(o);var u=l(4),e=Object(u.a)({},void 0,void 0,!1,null,null,null);o.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/110.f74ff3a3.js b/docs-vuepress/.vuepress/dist/assets/js/110.f74ff3a3.js
new file mode 100644
index 0000000000..6ee8853189
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/110.f74ff3a3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[110],{453:function(t,n,s){"use strict";s.r(n);var e=s(4),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/111.51932e54.js b/docs-vuepress/.vuepress/dist/assets/js/111.51932e54.js
new file mode 100644
index 0000000000..091d34ac78
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/111.51932e54.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[111],{457:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"e2e自动化测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#e2e自动化测试"}},[t._v("#")]),t._v(" E2E自动化测试")]),t._v(" "),s("p",[t._v("微信小程序的官方文档推荐 "),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("miniprogram-automator"),s("OutboundLink")],1),t._v("，其与小程序IDE的关系，正如 Google 与 UiAutomator、selenium 与 webdriver 一样；它是最契合小程序的。")]),t._v(" "),s("p",[t._v("虽然微信小程序提供了 automator + ide 的 E2E 的解决方案，但该项目维护频率低且 case 编写效率低、API 不够友好等问题，因此基于微信提供的能力& Mpx 生态我们产出了相对完善的小程序E2E自动化测试增强方案，此外还提供了可扩展的开箱即用的E2E基础设施。")]),t._v(" "),s("p",[t._v("小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。")]),t._v(" "),s("blockquote",[s("p",[t._v("如果你之前使用过 Selenium WebDriver 或者 Puppeteer，那你可以很容易快速上手。小程序自动化 SDK 与它们的工作原理是类似的，主要区别在于控制对象由浏览器换成了小程序。")])]),t._v(" "),s("h2",{attrs:{id:"mpx-cli-脚手架集成e2e"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx-cli-脚手架集成e2e"}},[t._v("#")]),t._v(" @mpx/cli 脚手架集成E2E")]),t._v(" "),s("p",[t._v("当使用 @mpxjs/cli 初始化 Mpx 项目的时候，交互式命令行里面新增了 E2E 选项，当选择了此选项，项目将会初始化 E2E 配置，完成相关内容的生成。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/mpxtemplate_v2.png",alt:""}})]),t._v(" "),s("p",[t._v("关于 E2E 的模板文件如下：")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("# 忽略部分文件夹\nvue-project\n├─ .e2erc.js # E2E配置\n├─ src\n│  ├─ app.mpx\n│  ├─ pages\n│  │  └─ index.png\n│  └─ components\n│     └─ list.mpx\n├─ test\n│  └─ e2e # case目录\n│     └─ list.spec.js # 示例文件\n├─ jest-e2e.config.js # Jest配置\n└─ package.json\n")])])]),s("p",[t._v("这里罗列了 E2E 项目中约定(或推荐)的目录结构，在项目开发中，请遵照这个目录结构组织代码。")]),t._v(" "),s("h3",{attrs:{id:"文件说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#文件说明"}},[t._v("#")]),t._v(" 文件说明")]),t._v(" "),s("p",[s("strong",[t._v("package.json")])]),t._v(" "),s("p",[t._v("使用自动化测试，我们要做的第一件事就是安装 @mpxjs/e2e 和 @mpxjs/e2e-scripts，然后我们需要在 package.json 中定义两个自动化测试的脚本 test 和 testServer。")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"devDependencies"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/e2e"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.0.13"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/e2e-scripts"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.0.12"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"scripts"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"test"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"e2e-runner"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"testServer"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"e2e-runner --preview"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。")]),t._v(" "),s("p",[s("strong",[t._v(".e2erc.js")])]),t._v(" "),s("p",[t._v("E2E 配置文件，包含 E2E 内置功能和插件的配置。可以在这里扩展运行时的能力，比如修改运行时是否自动保存页面快照。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'path'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" PluginReport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/e2e/report-server/server.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("recordsDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'dist/wx/minitest'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 录制 json 文件的存储目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("connectFirst")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 优先使用 automator.connect，默认 automator.launch 优先")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("defaultWaitFor")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认 waitFor 时长")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("devServer")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 测试报告服务器配置")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("open")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("port")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8886")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("jestTimeout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("990000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// jestTimeout")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("jsonCaseCpDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/e2e/e2e-json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 从 minitest 目录复制 json 文件到该目录下")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("needRealMachine")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否需要真机")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PluginReport")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义测试报告的插件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("projectPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./dist/wx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("sequence")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// e2e 的 case 的执行顺序")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 'minitest-1'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("testSuitsDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/e2e/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// e2e 的 case 存放目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("useTS")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// e2e 的 case 是否为 TS 语法")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("wsEndpoint")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ws://localhost:9420'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// automator.connect 的 wsEndpoint")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("timeoutSave")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 定时截图默认开启，设置为 false 即可关闭")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheDirectory")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./node_modules/@mpxjs/e2e/report-server/cache'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置截图数据的保存目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("tapSave")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 点击截图默认开启，设置为 false 即可关闭")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("routeUpdateSave")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 路由切换截图默认开启，设置为 false 即可关闭")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("routeTime")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("300")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 路由切换 300ms 后再截图")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watchResponse")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/api/list'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handler")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newRes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldRes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置接口请求截图")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("我们提供了丰富的配置化选项，满足各种场景运行。")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("参数")]),t._v(" "),s("th",[t._v("类型")]),t._v(" "),s("th",[t._v("默认值")]),t._v(" "),s("th",[t._v("说明")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("projectPath")]),t._v(" "),s("td",[t._v("String")]),t._v(" "),s("td",[t._v("./dist/wx")]),t._v(" "),s("td",[t._v("小程序代码路径，Mpx 框架的 wx 输出目录")])]),t._v(" "),s("tr",[s("td",[t._v("testSuitsDir")]),t._v(" "),s("td",[t._v("String")]),t._v(" "),s("td",[t._v("test/e2e/suits/")]),t._v(" "),s("td",[t._v("e2e 的 case 存放目录")])]),t._v(" "),s("tr",[s("td",[t._v("sequence")]),t._v(" "),s("td",[t._v("string[ ]")]),t._v(" "),s("td",[t._v("[ ]")]),t._v(" "),s("td",[t._v("用例运行的顺序")])]),t._v(" "),s("tr",[s("td",[t._v("recordsDir")]),t._v(" "),s("td",[t._v("String")]),t._v(" "),s("td",[t._v("dist/wx/minitest")]),t._v(" "),s("td",[t._v("录制 json 文件的存储目录")])]),t._v(" "),s("tr",[s("td",[t._v("connectFirst")]),t._v(" "),s("td",[t._v("Boolean")]),t._v(" "),s("td",[t._v("false")]),t._v(" "),s("td",[t._v("优先使用 automator 的 connect 方法")])]),t._v(" "),s("tr",[s("td",[t._v("wsEndpoint")]),t._v(" "),s("td",[t._v("String")]),t._v(" "),s("td",[t._v("ws://localhost:9420")]),t._v(" "),s("td",[t._v("使用 connect 方式时的 wsEndpoint 选项")])]),t._v(" "),s("tr",[s("td",[t._v("defaultWaitFor")]),t._v(" "),s("td",[t._v("Number")]),t._v(" "),s("td",[t._v("15000")]),t._v(" "),s("td",[t._v("默认 waitFor 时长")])]),t._v(" "),s("tr",[s("td",[t._v("useTS")]),t._v(" "),s("td",[t._v("Boolean")]),t._v(" "),s("td",[t._v("false")]),t._v(" "),s("td",[t._v("用例是否为 TS 语法")])]),t._v(" "),s("tr",[s("td",[t._v("jestTimeout")]),t._v(" "),s("td",[t._v("Number")]),t._v(" "),s("td",[t._v("990000")]),t._v(" "),s("td",[t._v("默认测试超时时间")])]),t._v(" "),s("tr",[s("td",[t._v("jsonCaseCpDir")]),t._v(" "),s("td",[t._v("String")]),t._v(" "),s("td",[t._v("test/e2e-json")]),t._v(" "),s("td",[t._v("从 minitest 目录复制 json 文件到该目录下")])]),t._v(" "),s("tr",[s("td",[t._v("needRealMachine")]),t._v(" "),s("td",[t._v("Boolean")]),t._v(" "),s("td",[t._v("false")]),t._v(" "),s("td",[t._v("是否需要真机回放")])]),t._v(" "),s("tr",[s("td",[t._v("devServer")]),t._v(" "),s("td",[t._v("Object")]),t._v(" "),s("td",[t._v("null")]),t._v(" "),s("td",[t._v("测试报告服务器配置")])]),t._v(" "),s("tr",[s("td",[t._v("plugins")]),t._v(" "),s("td",[t._v("Array")]),t._v(" "),s("td",[t._v("[ ]")]),t._v(" "),s("td",[t._v("自定义测试报告的插件")])]),t._v(" "),s("tr",[s("td",[t._v("timeoutSave")]),t._v(" "),s("td",[t._v("Number")]),t._v(" "),s("td",[t._v("3000")]),t._v(" "),s("td",[t._v("定时3000ms保存页面快照")])]),t._v(" "),s("tr",[s("td",[t._v("cacheDirectory")]),t._v(" "),s("td",[t._v("String")]),t._v(" "),s("td",[t._v("report-server/cache")]),t._v(" "),s("td",[t._v("页面快照的保存目录")])]),t._v(" "),s("tr",[s("td",[t._v("tapSave")]),t._v(" "),s("td",[t._v("Boolean")]),t._v(" "),s("td",[t._v("true")]),t._v(" "),s("td",[t._v("点击时候保存页面快照")])]),t._v(" "),s("tr",[s("td",[t._v("routeUpdateSave")]),t._v(" "),s("td",[t._v("Boolean")]),t._v(" "),s("td",[t._v("true")]),t._v(" "),s("td",[t._v("路由切换时候保存页面快照")])]),t._v(" "),s("tr",[s("td",[t._v("routeTime")]),t._v(" "),s("td",[t._v("Number")]),t._v(" "),s("td",[t._v("300")]),t._v(" "),s("td",[t._v("路由切换300ms后保存页面快照")])]),t._v(" "),s("tr",[s("td",[t._v("watchResponse")]),t._v(" "),s("td",[t._v("Object")]),t._v(" "),s("td",[t._v("null")]),t._v(" "),s("td",[t._v("监听接口请求保存页面快照")])])])]),t._v(" "),s("p",[s("strong",[t._v("e2e")])]),t._v(" "),s("p",[t._v('e2e 目录，所有的 case 文件存放在此目录下，默认会创建一个演示 demo 文件，也就是 list.spec.js 文件，约定 e2e 下所有的 .spec.js 结尾的作为自动化测试的文件，使用 Typescript 编写测试文件的时候, 需要将文件名改成 .spec.ts 格式，然后 tsconfig.json 加上 "esModuleInterop": true。')]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * @file e2e test example\n * 首先开启工具安全设置中的 CLI/HTTP 调用功能\n * docs of miniprogram-automator: https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" automator "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/e2e'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("describe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" miniProgram\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" page\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("beforeAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      miniProgram "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" automator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("connect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("wsEndpoint")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ws://localhost:9420'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("catch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      miniProgram "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" automator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("launch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("projectPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./dist/wx'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    page "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reLaunch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/pages/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("waitFor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("30000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'desc'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" desc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'list'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components/list2271575d/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 断言页面标签")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'view'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 断言文字内容")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toContain")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手机'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 保存页面快照")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("screenshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/e2e/screenshot/homePage.png'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("afterAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("close")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果你已经熟悉了 Jest，你应该很适应 Jest 的断言 API。")]),t._v(" "),s("p",[s("strong",[t._v("jest-e2e.config.js")])]),t._v(" "),s("p",[t._v("Jest 配置文件，这些选项可让你控制 Jest 的行为，你可以了解 Jest 的默认选项，以便在必要时扩展它们：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("preset")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ts-jest'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("testEnvironment")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("testTimeout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000000000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("maxWorkers")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("reporters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<rootDir>/node_modules/@mpxjs/e2e/report-server/report.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义测试报告")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("除了 Jest 提供的默认测试报告器外，我们还可以自定义测试报告。框架 @mpxjs/e2e 内部提供了可视化测试报告平台，需要配置 reporters 字段。")]),t._v(" "),s("p",[t._v("目前对于@mpx/cli@3.*版本也会陆续完成E2E的相关支持。")]),t._v(" "),s("h2",{attrs:{id:"mpxjs-e2e-scripts"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxjs-e2e-scripts"}},[t._v("#")]),t._v(" @mpxjs/e2e-scripts")]),t._v(" "),s("p",[t._v("默认情况下，Jest 将会递归的找到整个工程里所有 .spec.js 或 .test.js 扩展名的文件。 Jest 支持并行运行 test ，特别是在 ci 场景，将会极大减少 test 消耗时间。配置 --maxWorkers 参数表示的是 Jest 会开启多少个线程去完成所有的测试任务，默认值是 50% * os.cpus().length，相关的文档可见："),s("a",{attrs:{href:"https://jestjs.io/docs/cli#--maxworkersnumstring",target:"_blank",rel:"noopener noreferrer"}},[t._v("链接"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("p",[t._v("合理的设置 maxWorkers 会使得运行变快，依赖的是并行跑用例，但是在自动化测试环境下，用例通过脚本操控模拟器或真机环境，多个用例不能同时操控一个环境，否则会相互干扰，就好比 JS 只能是单线程执行一样。")]),t._v(" "),s("p",[t._v("因为用例只能一个一个的执行，一个完整的项目自然会包含很多用例，但是一次只能执行一个用例的话，我们需要人工的操作很多次，才能全部执行完。为了跑一个遍就把所有的用例都执行完的话，我们会想到写一个脚本通过遍历的方式依次执行，这就是 @mpxjs/e2e-scripts 设计的初衷。")]),t._v(" "),s("p",[t._v("使用 @mpxjs/e2e-scripts 内部提供的命令脚本，执行 npx e2e-runner 将会按照 sequence 的定义的顺序依次执行用例文件。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("sequence")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 测试用例的执行顺序")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'minitest-1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'minitest-2'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("上面代码表示会先执行 minitest-1.spec.js 文件，然后再执行 minitest-2.spec.js 文件。")]),t._v(" "),s("h2",{attrs:{id:"e2e可视化报告平台"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#e2e可视化报告平台"}},[t._v("#")]),t._v(" E2E可视化报告平台")]),t._v(" "),s("p",[t._v("E2E内置的 Jest 默认支持输出 HTML 的报告，因其只支持对测试结果数据的简单展示，故我们希望在其基础上，不仅针对报告查看的广度和颗粒度进行细化，还将对自动化测试过程中涉及到的痛点实现功能上的增强。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/baogao-2.jpeg",alt:""}})]),t._v(" "),s("p",[t._v("E2E可视化报告平台是一个运行在本地环境，统合了用例管理、测试报告、页面快照和错误日志的平台。支持对通过 WechatDevTools 录制回放功能录制出的 case 进行自定义增强的能力，同时提供执行 E2E 测试过程中产出的页面快照和错误日志等信息进行快捷、直观地查看的功能。")]),t._v(" "),s("p",[t._v("目前支持多种交互动作保存快照（点击、输入、滑动等），我们还在页面快照方面做了增强，提供了快照标记的功能，可以完善测试报告，增强排查手段，当点击元素后，页面快照上会自动标记出点击的区域或者元素。")]),t._v(" "),s("h2",{attrs:{id:"e2e录制-自动化生成case"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#e2e录制-自动化生成case"}},[t._v("#")]),t._v(" E2E录制+自动化生成case")]),t._v(" "),s("p",[t._v("微信推出了官方的录制回放能力。通过微信开发者工具可以录制用户的操作过程，期间可以进行简单断言，录制结束后支持回放。但是经过实际使用发现录制回放存在下列不足：")]),t._v(" "),s("ol",[s("li",[t._v("录制结果结果以 json 形式存在于 dist 目录，难以扩展、难维护；")]),t._v(" "),s("li",[t._v("仅支持 data快照、wxml快照、检查元素、检查路径四种简单断言，难以满足复杂业务场景的细粒度断言诉求；")]),t._v(" "),s("li",[t._v("因等待时长、接口响应时机、组件更新时机等难以和录制时对应，录制结果回放失败频率高、不稳定；")])]),t._v(" "),s("p",[t._v("我们通过基于微信原生的录制进行增强的方案。使用录制的便捷性降低手写流程的成本，再通过 sdk 的能力对录制所得 Case 进行增强。")]),t._v(" "),s("p",[t._v("这样，我们通过分析录制 JSON 文件，把 JSON 中的每一条进行分析转换，最终得到 spec 的 JS 代码文件，通过这种方式，可以大幅度降低获取元素、触发事件等常规 Case 的编写。")]),t._v(" "),s("p",[t._v("JSON to Spec 本质只是录制结果的一种呈现，而这种转换的目的在于通过扩展强化录制 Case，弥补录制的能力有限。")]),t._v(" "),s("p",[t._v("为了方便我们进行扩展，首先需要对录制所得的 JSON 文件进行语义化的分析。这么做的意义在于把录制的操作步骤和 JSON 的数据关联起来，而关联步骤和数据又可以增强可读性为用户在某一个步骤之后进行扩展增加了极大的便利性。")]),t._v(" "),s("p",[t._v("上一个部分已经论证过把录制和SDK增强接合起来的可行性，但是上面一系列的操作都是通过脚本的形式呈现的，这对于我们前面的降低门槛来说仍然是繁琐的。最起码对于不会写代码的的人来说，还是不够理想。接下来就是探索如何更直观、更高效的方式把这种方案落地。")]),t._v(" "),s("p",[t._v("我们设计了 Mpx-E2E 的工作台，当然这些也都集成到了 Mpx-E2E 的可视化平台中，下面我们看看这些具体的可视化的工作。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/gencae.png",alt:""}})]),t._v(" "),s("p",[t._v("分析 JSON 操作步骤后，我们把依据 JSON 生成的 Spec 同样做了可视化处理，起初的时候我们只是做了 Spec 代码的 highlight，并没有支持编辑。但是考虑到所见即所得的效率，我们又在此支持了 WEB-IDE。在生成 Spec 代码后，即可在线进行编辑，最终通过我们的@mpxjs/e2e SDK核心能力，完成了保存spec文件。")]),t._v(" "),s("h2",{attrs:{id:"增强api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#增强api"}},[t._v("#")]),t._v(" 增强API")]),t._v(" "),s("blockquote",[s("p",[t._v("@mpxjs/e2e")])]),t._v(" "),s("p",[t._v("小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。")]),t._v(" "),s("p",[t._v("然而在我们使用过程中发现原始小程序官网提供的sdk存在能力的不足和缺失，或者说无法满足我们复杂的业务流程，针对这一系列的能力的缺失，我们开发了针对e2e的增强型api，来满足我们的整个自动化流程所需的功能")]),t._v(" "),s("p",[t._v("1、获取页面中的DOM元素 $ 方法 ：")]),t._v(" "),s("p",[t._v("SDK 中重写 page 和 element 的 "),s("code",[t._v("$")]),t._v(" 方法。之所以这么处理是因为原生的 "),s("code",[t._v("$")]),t._v(" 方法存在自定义组件中的元素不能稳定获取的问题，而这个问题的根源在于微信小程序会以某种规则为元素拼接组件或者父组件的名字作为真实类名，而这种规则并不固定。")]),t._v(" "),s("p",[t._v("目前增强后的 "),s("code",[t._v("$")]),t._v(" 方法支持两个参数，第一个为选择器，第二个是自定义组件名。第二个参数不传时其行为和原生 "),s("code",[t._v("$")]),t._v(" 方法一致。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("className"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" componentsName"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Promise"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Element "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" any"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" confirmbtn "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'confirm-btn'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'homepage/components/confirmef91faba/confirm'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" confirmbtn2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.confirm-btn'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'view'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#id'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("获取自定义组件中的元素需要以渲染结果为准，通常第二个参数是传入组件的 "),s("code",[t._v("is")]),t._v(" 属性。注意弹窗类似的组件往往会存在动画所以需要异步获取。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 页面的渲染结果")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("base"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("dialog is"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"homepage/components/dialogd2d0cea6/index"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  #shadow"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("root\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wrapper"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"cancel-btn"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("确认"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"confirm-btn"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("取消"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("base"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("dialog"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对应获取元素的方法")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cancelbtn "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cancel-btn'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'homepage/components/dialogd2d0cea6/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" confirmbtn "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'confirm-btn'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'homepage/components/dialogd2d0cea6/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("2、增强 wait/ waitAll")]),t._v(" "),s("p",[t._v("automator 中原生支持 "),s("code",[t._v("wait")]),t._v(" 方法，表示等待时长或者等待终止的断言函数。但是经过实际测试发现，使用指定的等待时间并不可靠，其运行受限于硬件条件。")]),t._v(" "),s("p",[t._v("经过增强的 "),s("code",[t._v("wait")]),t._v(" 方法可以支持： 路由到指定页面， 指定组件渲染，指定组件更新，指定接口发起， 指定接口响应后；")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Promise"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("string "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" miniProgram "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" Automator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("launch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("projectPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./dist/wx'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 页面")]),t._v("\npage "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reLaunch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/pages/index/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pages/index/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 组件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" suggest1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'suggest/components/suggestcaafe3e4/suggest'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'component'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 组件更新")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" suggest2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'suggest/components/suggestcaafe3e4/suggest'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'componentUpdate'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请求")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" request "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://xxxx.xxx/xxx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'request'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回结果")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" response "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://xxxx.xxx/xxx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'response'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("errno"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("status"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("3、新增 mock 能力")]),t._v(" "),s("p",[t._v("考虑到进行 e2e 测试时有些场景需要 mock 数据，所以 SDK 结合 mpx-fetch 的 "),s("code",[t._v("setProxy")]),t._v(" 能力提供了静态资源文件 mock、手动设置接口响应结果的能力。")]),t._v(" "),s("p",[t._v("前置：如果需要使用 mock 需要使用支持 "),s("code",[t._v("setProxy")]),t._v(" 的 mpx-fetch 版本；此外还需要在 createApp 的时候传入 "),s("code",[t._v("setProxy")]),t._v(" 属性，其配置与 mpx-fetch 的 "),s("code",[t._v("setProxy")]),t._v(" 方法的配置相同，示例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("setProxy")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  \t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("host")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-domain.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("protocol")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https:'")]),t._v("\n    \t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("host")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'localhost'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("port")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8887")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("protocol")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http:'")]),t._v("\n    \t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  \t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// otherApp props")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("3.1 初始化 mock：initMock")]),t._v(" "),s("p",[t._v("当传入 "),s("code",[t._v("staticDir")]),t._v(" 时会优先匹配该目录下的静 json 文件作为指定接口的响应结果。")]),t._v(" "),s("p",[t._v("接口与文件名的映射规则：将域名后的 path 中的分隔符 "),s("code",[t._v("/")]),t._v(" 替换为 "),s("code",[t._v("-")]),t._v("，示例：")]),t._v(" "),s("ul",[s("li",[t._v("接口名称："),s("code",[t._v("api/pGetIndexInfo")])]),t._v(" "),s("li",[t._v("json 文件名称："),s("code",[t._v("api-pGetIndexInfo.json")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("E2eMockConfig")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("staticDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 本地文件目录：")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\nAutomator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initMock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mockCfg"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" E2eMockConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Promise"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("MiniProgram"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("3.2 "),s("code",[t._v("setMock")]),t._v(" 方法，除了上面的静态资源文件，mock 内置了一个 Map 列表，因此可以按需的设置某一接口的响应结果。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("Automator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setMock")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("response")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("any"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 示例：")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" un "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Automator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setMock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://some-domain.com/api/pGetIndexInfo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("errno")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("errmsg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mock-index-info'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 需要取消时可以调用 un，注意这一步骤非必须！！")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("un")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("3.3 "),s("code",[t._v("removeMockFromMap")]),t._v(" 从 mock 内置的 Map 列表中移除指定 path 对应的的 mock 数据。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("Automator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeMockFromMap")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("h2",{attrs:{id:"sop"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#sop"}},[t._v("#")]),t._v(" SOP")]),t._v(" "),s("p",[s("strong",[t._v("一、环境要求")])]),t._v(" "),s("p",[t._v("1.1 微信环境\n安装 Node.js 并且版本大于 8.0\n基础库版本为 2.7.3 及以上\n开发者工具版本为 1.02.1907232 及以上\n \n1.2 Mpx 环境\nMpx-E2E 很多能力基于 Mpx 增强的，最低版本要求如下：\n@mpxjs/core >= 2.7.2\n@mpxjs/api-proxy >= 2.7.1\n@mpxjs/webpack-plugin >= 2.7.8")]),t._v(" "),s("p",[s("strong",[t._v("二、新建项目")])]),t._v(" "),s("p",[t._v("2.1 安装 @mpxjs/cli 脚手架")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("$ npm install "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("g @mpxjs"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("cli\n")])])]),s("p",[t._v("2.2 初始化项目选择 E2E 测试，执行以下命令执行初始化项目")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("$ mpx init some"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("proj\n")])])]),s("p",[t._v("执行该命令后稍等片刻，等模板下载完成 Terminal 会输出以下提示，当输出到 ”是否需要 E2E 测试“时输入 “yes“ ，脚手架内置了 E2E 需要的依赖和简单的测试用例。待脚手架初始化完成后，你的新项目就已经拥有了开箱即用的E2E能力。")]),t._v(" "),s("p",[s("strong",[t._v("三、已有项目")])]),t._v(" "),s("p",[t._v("3.1 安装 E2E sdk、runner")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("npm i @mpxjs"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("e2e  @mpxjs"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("e2e"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("scripts "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("save"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("dev\n")])])]),s("p",[t._v("3.2 创建 .e2erc 配置文件")]),t._v(" "),s("blockquote",[s("p",[t._v("在项目的源文件目录下创建名为 .e2erc.js 的配置文件，以下为 e2erc 各选项及其含义，建议直接复制到项目中")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'path'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" PluginReport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/e2e/report-server/server.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E2E 报告插件")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("recordsDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'dist/wx/minitest'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 录制 json 文件的存储目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("connectFirst")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 优先使用 automator.connect，默认 automator.launch 优先")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("wsEndpoint")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ws://localhost:9420'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// automator.connect 的 wsEndpoint 选项，用于 connectFirst 时链接到模拟器服务")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("defaultWaitFor")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("15000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认 waitFor 时长")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("useTS")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否启用 TS , 该特性暂不支持，")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("devServer")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("open")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("jestTimeout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("990000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// jestTimeout")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("jsonCaseCpDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/e2e-json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 从 minitest 目录复制 json 文件到该目录下")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("needRealMachine")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否需要真机")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PluginReport")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("projectPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./dist/wx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 小程序代码路径，Mpx 框架的 wx 输出目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("testSuitsDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/e2e/suits/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// e2e 的 case 存放目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("sequence")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E2E case，runner 将会按照这个数组顺序执行其中的 case 文件，")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'minitest-20'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不需要写 .spec.js 这个扩展名")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("reportsDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/reports'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 报告输出目录")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("四、获取 Case")])]),t._v(" "),s("p",[t._v("4.1 录制 JSON Case")]),t._v(" "),s("p",[t._v("录制 case 是依托于微信开发者工具已有的能力，操作流程如下：")]),t._v(" "),s("ol",[s("li",[t._v("启动录制\n启动微信开发者工具 -> 工具 -> 自动化测试")]),t._v(" "),s("li",[t._v("创建用例\n选择【开始录制】按钮\n【用例名】会成为录制 JSON case 的文件名，比如上图中录制结束后会得到一个名为\nminitest-3.json 的 JSON 文件；我们推荐您采用更语义化的测试用例名称，便于后续的 CASE 管理。\n【结束录制】后，开发者工具会在小程序的代目录（Mpx 的产物输出目录，如 dist/wx）下新增 minitest/ 目录，该目录是微信开发者工具自动创建的，用于存放录制 JSON case。例如上面的例子中，录制结束后该目录下就应该有 名为 minitest-3.json 的 文件。")])]),t._v(" "),s("p",[t._v("4.2 生成 Spec Case")]),t._v(" "),s("p",[t._v("启动 Mpx-E2E 平台服务，首先在项目的 package.json 中加入以下 npm script：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"e2eServe"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"npx e2e-runner --preview"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("在小程序项目录下通过命令行启动 Mpx-E2E 平台服务:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("npm run e2eServe\n")])])]),s("p",[t._v("平台服务已经成功启动！打开 Mpx-E2E 的可视化平台:\n选择【用例管理】，加载录制的 JSON Case，点击可视化平台上的 【JSON 导入】按钮。界面中间是对当前 JSON 文件的语义化解析，最后侧是包含自动生成代码的 Web IDE。点击中间的语义化解析会联动右侧 WebIDE 代码跳转到对应的区域。")]),t._v(" "),s("p",[t._v("4.3 可视化扩展 Spec Case")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("新增\n鼠标悬浮在中间语义化区域中每一条的左侧的绿色按钮时，就会出现一个扩展菜单，在弹出框中填写相关信息，点击【保存】即可新增一条操作")])]),t._v(" "),s("li",[s("p",[t._v("编辑\n通过可视化的方式扩展的操作可以编辑，录制的操作不能编辑；")])])]),t._v(" "),s("p",[t._v("4.4 保存 Spec case")]),t._v(" "),s("p",[t._v("在完成上述操作后，点击 Web-IDE 下面的 【保存】即可.")]),t._v(" "),s("p",[t._v("点击保存后， Web-IDE 中的内容将会被写入到 .e2erc.js 的 testSuitsDir 字段指定的目录中。当文件写入成功后，被保存的 spec 文件名会被自动写入到剪贴板中。")]),t._v(" "),s("p",[t._v("另外，生成这份 Case 的 JSON 文件也会被复制到 .e2erc.js 的 jsonCaseCpDir 目录下，之所以保存 JSON 文件主要是做备份，你可以不关心这个 json 的文件内容，但是我们建议你随着 spec 代码已经提交到版本库；\n \n经过保存后，我们就得到了 minitest-3.spec.js Case 文件。")]),t._v(" "),s("p",[s("strong",[t._v("五、修改 .e2erc.js sequence")])]),t._v(" "),s("p",[t._v("5.1 sequence 数组\n经过前面的获取 Case 后步骤后，我们已经得到了 minitest-3.spec.js Case 文件。在正式运行前，我们需要把这个 minitest-3.spec.js Case 加入到 .e2erc.js 的 sequence 字段数组中。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("sequence")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" \n  "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'minitest-3'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不用写 .spec.js ")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("5.2 为什么手动维护？\n之所以需要手动维护这个数组，是因为微信的 automator 不能并发运行，进而 E2E 的 Case 无法并发运行；又或者某几个 spec 间是有联系的， 这种情况下只能把顺序交给人工维护。")]),t._v(" "),s("p",[s("strong",[t._v("六、运行 e2e")])]),t._v(" "),s("p",[t._v('6.1 新增 npm scripts\n修改项目的 package.json 中 scripts 字段，向其中加入 "test:e2e":"npx e2e-runner" 命令')]),t._v(" "),s("p",[t._v("6.2 运行 E2E 测试命令")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("npm run test"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("e2e\n")])])]),s("p",[t._v("6.3 在真机中运行 E2E")]),t._v(" "),s("ol",[s("li",[t._v("真机运行 E2E 相当于微信开发者工具的【真机调试】，首先需要确保你的 Mpx 构建输出产物是 prod 模式下的产物；")]),t._v(" "),s("li",[t._v("修改 .e2erc.js 中的 needRealMachine 字段为 true，再执行 npm run test:e2e 命令；\n静等微信开发者工具完成真机调试二维码的构建完成，待完成后用真机扫描二维码即可开始；")])]),t._v(" "),s("blockquote",[s("p",[t._v("注：目前因为微信 automator 的限制，包括 wait 接口请求等能力暂时在真机上不能支持，这些问题目前已经反馈到微信，有进展我们会及时更新！")])]),t._v(" "),s("p",[s("strong",[t._v("七、测试报告")])]),t._v(" "),s("p",[t._v("在 .e2erc.js 中配置 report-plugin（详情见.e2erc.js 配置文件部分） 即可在所有 spec 运行结束后自动打开浏览器并呈现测试结果，测试结果包含以下三部分:")]),t._v(" "),s("p",[t._v("1） Jest 数据\n2） 自动截图：\n截图分析：在 Mpx-E2E 平台下，点击【截图】Tab 即可，截图以 spec 文件为维度展示，目前包含三种自动时机的截图：定时、点击时、路由发生时，默认全部展示。\n截图筛选：通过操作 timeout/tap/router 的复选框即可实现分类查看，另外在点击时的自动截图还会对点击位置进行标记；\n3）JSError 分析\n如果运行过程中小程序抛出 JS 异常，此时会触发 Mpx-E2E 的收集动作，同时会抓取报错瞬间的截图")]),t._v(" "),s("p",[t._v("未来可视化平台会持续集成更多功能，可以涵盖业务稳定，数据稳定(埋点测试)和性能数据，持续更新...")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/112.da7bd3e7.js b/docs-vuepress/.vuepress/dist/assets/js/112.da7bd3e7.js
new file mode 100644
index 0000000000..59814a2ea2
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/112.da7bd3e7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[112],{461:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"使用typescript开发小程序"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用typescript开发小程序"}},[t._v("#")]),t._v(" 使用TypeScript开发小程序")]),t._v(" "),s("h2",{attrs:{id:"什么是typescript"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#什么是typescript"}},[t._v("#")]),t._v(" 什么是TypeScript")]),t._v(" "),s("p",[t._v("TypeScript 是一个开源的编程语言，通过在 JavaScript（世界上最常用的语言之一） 的基础上添加静态类型定义构建而成。")]),t._v(" "),s("p",[t._v("类型提供了一种描述对象形状的方法。可以帮助提供更好的文档，还可以让 TypeScript 验证你的代码可以正常工作。")]),t._v(" "),s("p",[t._v("在 TypeScript 中，不是每个地方都需要标注类型，因为类型推断允许您无需编写额外的代码即可获得大量功能。")]),t._v(" "),s("h2",{attrs:{id:"typescript优势"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#typescript优势"}},[t._v("#")]),t._v(" TypeScript优势")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("静态类型检查\n静态类型检查可以避免很多不必要类型的错误，在编译阶段提前发现问题；")])]),t._v(" "),s("li",[s("p",[t._v("强大的类型推断能力\n除了类型声明外，"),s("code",[t._v("TypeScript")]),t._v(" 提供了强大的类型推断能力，该能力能够大大减少我们需要编写的类型声明，有效地减少我们使用 "),s("code",[t._v("TypeScript")]),t._v(" 的额外压力；")])]),t._v(" "),s("li",[s("p",[t._v("IDE 智能提示\n目前主流的 IDE 都对 "),s("code",[t._v("TypeScript")]),t._v(" 提供了良好的支持，基于 "),s("code",[t._v("TypeScript")]),t._v(" 的类型系统提供友好准确的编码提示与错误检查。")])])]),t._v(" "),s("h2",{attrs:{id:"使用方式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用方式"}},[t._v("#")]),t._v(" 使用方式")]),t._v(" "),s("h3",{attrs:{id:"编写ts前的准备工作"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编写ts前的准备工作"}},[t._v("#")]),t._v(" 编写ts前的准备工作")]),t._v(" "),s("p",[t._v("由于对 store 做类型推导使用了最新的 "),s("code",[t._v("TypeScript")]),t._v(" 特性，因此需要将编辑器的 "),s("code",[t._v("TypeScript")]),t._v(" 版本升级至 "),s("strong",[t._v("4.1.3")]),t._v(" 及以上版本。以下是 VSCode 配置示例：")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("更新项目中的TypeScript为 4.1.3 及以上版本。")])]),t._v(" "),s("li",[s("p",[t._v("在VSCode中打开一个 .js/.ts/.tsx 后缀的文件，使用 "),s("code",[t._v("Shift+Command+P")]),t._v(" 唤出 VSCode 命令行，输入 "),s("code",[t._v("TypeScript")]),t._v(" ，选择 "),s("code",[t._v("Select TypeScript Version")]),t._v("，选择使用工作区版本，将版本切换至 4.1.3 及以上版本。")])])]),t._v(" "),s("img",{staticStyle:{"border-radius":"6px"},attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/select-ts-version.png"}}),t._v(" "),s("ol",{attrs:{start:"3"}},[s("li",[t._v("在 VSCode 编辑器中安装 mpx 插件，来支持在.mpx单文件中编写 ts 时的代码提示和实时报错等优秀体验。")])]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("使用 @typescript/eslint-plugin 对 ts 代码进行检查，当在.mpx文件中使用全局类型时，eslint 会抛出 no-undef 错误，可以关闭相关 eslint 规则校验")])]),t._v(" "),s("h3",{attrs:{id:"mpx中编写ts（推荐）"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx中编写ts（推荐）"}},[t._v("#")]),t._v(" .mpx中编写ts（推荐）")]),t._v(" "),s("p",[t._v("目前 Mpx 已经支持在.mpx文件的 script 标签中编写 ts 代码，需要在 script 标签上添加 "),s("code",[t._v('lang="ts"')]),t._v(" 属性，在编译时会自动这部分 script 中的内容进行 ts 类型检查。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 内联编写ts代码")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("当然，由于大部分IDE对 ts 的语法支持都只对 .ts 和 .d.ts 文件生效，因此 Mpx 也支持创建一个 .ts 文件进行 ts 代码编写，在.mpx文件中，通过 src 的方式引入。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("./index.ts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}}),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"为-ts文件添加loader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#为-ts文件添加loader"}},[t._v("#")]),t._v(" 为.ts文件添加loader")]),t._v(" "),s("p",[t._v("在 Webpack 配置中添加如下 rules 以配置 ts-loader")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.ts$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ts-loader'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"编写tsconfig-json文件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编写tsconfig-json文件"}},[t._v("#")]),t._v(" 编写tsconfig.json文件")]),t._v(" "),s("p",[t._v("对相关配置不熟悉的同学可以直接采用下面配置，能够最大限度发挥 Mpx 中强大的 ts 类型推导能力")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"compilerOptions"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"target"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"es6"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"allowJs"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"noImplicitThis"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"noImplicitAny"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"strictNullChecks"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"moduleResolution"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"node"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"lib"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dom"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"es6"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dom.iterable"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"增强类型"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#增强类型"}},[t._v("#")]),t._v(" 增强类型")]),t._v(" "),s("p",[t._v("如果需要增加 Mpx 的属性和选项，可以自定义声明 "),s("code",[t._v("TypeScript")]),t._v(" 补充现有的类型。")]),t._v(" "),s("p",[t._v("例如，首先创建一个 types.d.ts 文件")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// types.d.ts")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" Mpx "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("module")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 声明为 Mpx 补充的属性")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mpx")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    $myProperty"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("之后在任意文件只需引用一次 types.d.ts 声明文件即可，例如在 app.mpx 中引用")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('/// <reference path="./types.d.ts" />')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$myProperty "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'my-property'")]),t._v("\n")])])]),s("h2",{attrs:{id:"类型推导及注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#类型推导及注意事项"}},[t._v("#")]),t._v(" 类型推导及注意事项")]),t._v(" "),s("p",[t._v("Mpx 基于泛型函数提供了非常方便用户使用的反向类型推导能力，简单来说，就是用户可以用非常接近于 js 的方式调用 Mpx 提供的 api ，就能够获得大量基于用户输入参数反向推导得到的类型提示及检查。但是由于 ts 本身的能力限制，我们在 Mpx 的运行时中添加了少量辅助函数和变种api，便于用户最大程度地享受反向类型推导带来的便利性，简单的使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-typescript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-typescript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getMixin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createStoreWithThis"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// createStoreWithThis作为createStore的变种方法，主要变化在于定义getters，mutations和actions时，")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取自身的state，getters等属性不再通过参数传入，而是通过this.state或者this.getters等属性进行访问，")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 由于TS的能力限制，getters/mutations/actions只有使用对象字面量的方式直接传入createStoreWithThis时")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 才能正确推导出this的类型，当需要将getters/mutations/actions拆解为对象编写时，")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 需要用户显式地声明this类型，无法直接推导得出。")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  state"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    aa"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    bb"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  getters"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aa "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bb\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  actions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  computed"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// data, mixin, computed中定义的数据能够被推导到this中")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 从store上map过来的计算属性或者方法同样能够被推导到this中")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'aa'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  mixins"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      computed"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("aaa")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("123")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      methods"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  methods"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'doSth3'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"getmixin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getmixin"}},[t._v("#")]),t._v(" getMixin")]),t._v(" "),s("p",[t._v("为 ts 项目提供的反向推导 mixin 的辅助函数，getMixin 接收一个对象作为参数，使用 mixins 时，支持嵌套 mixin。具体用法见"),s("RouterLink",{attrs:{to:"/api/global-api.html#getmixin"}},[t._v("getMixin")]),t._v("。")],1),t._v(" "),s("h3",{attrs:{id:"createstorewiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createstorewiththis"}},[t._v("#")]),t._v(" createStoreWithThis")]),t._v(" "),s("p",[t._v("为了在 ts 项目中更好的支持 store 的类型推导，提供了 createStoreWithThis 进行 store 的创建，createStoreWithThis 接收一个 options 对象作为参数。通过 createStoreWithThis 创建 store 时，使用"),s("code",[t._v("this.state")]),t._v("，"),s("code",[t._v("this.getters")]),t._v("，"),s("code",[t._v("this.commit")]),t._v(", "),s("code",[t._v("this.dispatch")]),t._v("对自身的相关属性进行获取。具体用法见"),s("RouterLink",{attrs:{to:"/api/store-api.html#createstorewiththis"}},[t._v("createStoreWithThis")]),t._v("。")],1),t._v(" "),s("h3",{attrs:{id:"createstatewiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createstatewiththis"}},[t._v("#")]),t._v(" createStateWithThis")]),t._v(" "),s("p",[t._v("创建一个 state，支持 state 类型推导的辅助函数，具体用法见"),s("RouterLink",{attrs:{to:"/api/store-api.html#createstatewiththis"}},[t._v("createStateWithThis")])],1),t._v(" "),s("h3",{attrs:{id:"creategetterswiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#creategetterswiththis"}},[t._v("#")]),t._v(" createGettersWithThis")]),t._v(" "),s("p",[t._v("创建一个 getters，支持 getters 类型推导的辅助函数，具体用法见"),s("RouterLink",{attrs:{to:"/api/store-api.html#creategetterswiththis"}},[t._v("createGettersWithThis")])],1),t._v(" "),s("h3",{attrs:{id:"createmutationswiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createmutationswiththis"}},[t._v("#")]),t._v(" createMutationsWithThis")]),t._v(" "),s("p",[t._v("创建一个 mutations，支持 mutations 类型推导的辅助函数，具体用法见"),s("RouterLink",{attrs:{to:"/api/store-api.html#createmutationswiththis"}},[t._v("createMutationsWithThis")])],1),t._v(" "),s("h3",{attrs:{id:"createactionswiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createactionswiththis"}},[t._v("#")]),t._v(" createActionsWithThis")]),t._v(" "),s("p",[t._v("创建一个 actions，支持 actions 类型推导的辅助函数，具体用法见"),s("RouterLink",{attrs:{to:"/api/store-api.html#createactionswiththis"}},[t._v("createActionsWithThis")])],1)])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/113.caaf11a3.js b/docs-vuepress/.vuepress/dist/assets/js/113.caaf11a3.js
new file mode 100644
index 0000000000..23d537d00a
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/113.caaf11a3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[113],{459:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"单元测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#单元测试"}},[t._v("#")]),t._v(" 单元测试")]),t._v(" "),s("p",[t._v("Mpx 框架提供了 jest 转换器 mpx-jest，结合微信小程序提供的 "),s("a",{attrs:{href:"https://github.com/wechat-miniprogram/miniprogram-simulate",target:"_blank",rel:"noopener noreferrer"}},[t._v("miniprogram-simulate"),s("OutboundLink")],1),t._v(" 来进行单元测试的工作。")]),t._v(" "),s("blockquote",[s("p",[t._v("因为目前仅微信提供了仿真工具，暂时只支持微信小程序平台的单元测试。如果需要 E2E 测试，则和框架无关了，可参考微信的"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/",target:"_blank",rel:"noopener noreferrer"}},[t._v("小程序自动化"),s("OutboundLink")],1),t._v("。")])]),t._v(" "),s("p",[t._v("如果是初始化项目，单元测试相关的项目依赖和配置可以通过 @mpx/cli 创建项目时选择使用单元测试选项自动生成，如果时旧项目需要使用，可以按照下方步骤安装依赖和添加配置。")]),t._v(" "),s("h2",{attrs:{id:"安装依赖"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装依赖"}},[t._v("#")]),t._v(" 安装依赖")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("npm i -D @mpxjs/mpx-jest @mpxjs/miniprogram-simulate jest babel-jest\n\n// 如果项目使用了ts，则还需要安装\nnpm i -D ts-jest\n")])])]),s("h2",{attrs:{id:"jest-相关配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#jest-相关配置"}},[t._v("#")]),t._v(" jest 相关配置")]),t._v(" "),s("p",[t._v("首先在项目根目录创建 jest.config.js 配置文件，并加入以下关键配置")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  testEnvironment: 'jsdom', // 使用 jsdom 环境\n  transform: {\n    '^.+\\\\.js$': '"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("rootDir")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("/node_modules/babel-jest',\n    '^.+\\\\.mpx$': '"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("rootDir")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("/node_modules/@mpxjs/mpx-jest',\n    '^.+\\\\.ts$': '"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("rootDir")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("/node_modules/ts-jest' // 如果没使用 ts 可不用添加\n  },\n  setupFiles: ['"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("rootDir")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("/test/setup'], // test 文件夹下声明 setup，路径可以随意定义，可以为每一个单测添加相应的配置\n  transformIgnorePatterns: ['node_modules/(?!(@mpxjs))'], // 定义node_modules 中需要进行 transform 的内容\n\n")])])]),s("h2",{attrs:{id:"简单的断言"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#简单的断言"}},[t._v("#")]),t._v(" 简单的断言")]),t._v(" "),s("p",[t._v("暂时进行一个简单的组件单元测试书写，对于复杂组件以及通用测试逻辑的总结我们会在后续进行发布。")]),t._v(" "),s("p",[t._v("示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ message }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello!'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bye!'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("对应的 hello-world.spec.js")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" simulate "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/miniprogram-simulate'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里是一些 Jasmine 2.0 的测试，你也可以使用你喜欢的任何断言库或测试工具。")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("describe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MyComponent'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" id\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("beforeAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<rootDir>/src/components/hello-world.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 检查 mount 中的组件实例")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'correctly sets the message when component attached'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" instance "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance\n    \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Mpx提供的数据响应是发生在组件挂载时的，未挂载前只能通过实例上的data访问数据")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello!'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parent-wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建容器节点")]),t._v("\n    comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将组件插入到容器节点中，会触发 attached 生命周期")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 挂载后则可以直接通过实例访问")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bye!'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建一个实例并检查渲染输出")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'renders the correct message'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parent-wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建容器节点")]),t._v("\n    comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 挂载组件到容器节点")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<wx-view>bye!</wx-view>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"编写可被测试的组件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编写可被测试的组件"}},[t._v("#")]),t._v(" 编写可被测试的组件")]),t._v(" "),s("p",[t._v("很多组件的渲染输出由它的 props 决定。事实上，如果一个组件的渲染输出完全取决于它的 props，那么它会让测试变得简单，就好像断言不同参数的纯函数的返回值。看下面这个例子：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ msg }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("msg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("你可以在不同的 properties 中，通过 simulate.render 的第二个参数控制组件的输出：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" simulate "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/miniprogram-simulate'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 省略辅助方法")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("describe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MyComponent'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'renders correctly with different props'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<rootDir>/src/components/hello-world.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("msg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parent-wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    comp1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<wx-view>hello</wx-view>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("msg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bye'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parent-wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    comp2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<wx-view>bye</wx-view>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"断言异步更新"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#断言异步更新"}},[t._v("#")]),t._v(" 断言异步更新")]),t._v(" "),s("p",[t._v("小程序视图层的更新是异步的，一些依赖视图更新结果的断言必须 await simulate.sleep() 或者 await comp.instance.$nextTick() 后进行：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" simulate "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/miniprogram-simulate'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 省略辅助方法")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'updates the rendered message when vm.message updates'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<rootDir>/src/components/hello-world.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parent-wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("msg "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sleep")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<wx-view>foo</wx-view>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更深入的 Mpx 单元测试的内容将在以后持续更新……")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/114.16cda7ac.js b/docs-vuepress/.vuepress/dist/assets/js/114.16cda7ac.js
new file mode 100644
index 0000000000..b2aa6d052b
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/114.16cda7ac.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[114],{463:function(p,e,_){"use strict";_.r(e);var v=_(4),t=Object(v.a)({},(function(){var p=this,e=p._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":p.$parent.slotKey}},[e("h1",{attrs:{id:"mpx编译构建原理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mpx编译构建原理"}},[p._v("#")]),p._v(" Mpx编译构建原理")]),p._v(" "),e("p",[p._v("我们希望使用目前设计最强大、生态最完善的编译构建工具Webpack来实现小程序的编译构建，让用户得到web开发中先进强大的工程化开发体验。使用过Webpack的同学都知道，通常来说Webpack都是将项目中使用到的一系列碎片化模块打包为一个或几个bundle，而小程序所需要的文件结构是非常离散化的，如何调解这两者的矛盾成为了我们最大的难题。一种非常直观简单的思路在于遍历整个src目录，将其中的每一个.mpx文件都作为一个entry加入到Webpack中进行处理，这样做的问题主要有两个：")]),p._v(" "),e("ol",[e("li",[p._v("src目录中用不到的.mpx文件也会被编译输出，最终也会被小程序打包进项目包中，无意义地增加了包体积；")]),p._v(" "),e("li",[p._v("对于node_modules下的.mpx文件，我们不认为遍历node_modules是一个好的选择。")])]),p._v(" "),e("p",[p._v("最终我们采用了一种基于依赖分析和动态添加entry的方式来进行实现，用户在Webpack配置中只需要配置一个入口文件app.mpx，loader在解析到json时会解析json中pages域和usingComponents域中声明的路径，通过动态添加entry的方式将这些文件添加到Webpack的构建系统当中（注意这里是添加entry而不是添加依赖，因为只有entry能生成独立的文件，满足小程序的离散化文件结构），并递归执行这个过程，直到整个项目中所有用到的.mpx文件都加入进来，在输出前，我们借助了CommonsChunkPlugin/SplitChunksPlugin的能力将复用的模块抽取到一个外部的bundle中，确保最终生成的包中不包含重复模块。我们提供了一个Webpack插件和一个.mpx文件对应的loader来实现上述操作，用户只需要将其添加到Webpack配置中就可以以打包web项目的方式正常打包小程序，没有任何的前置和后置操作，支持Webpack本身的完整生态。")]),p._v(" "),e("p",[e("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/mpx-liucheng.002.jpeg",alt:"Mpx编译构建机制流程示意图"}})]),p._v(" "),e("p",[e("em",[p._v("Mpx编译构建机制流程示意图")])]),p._v(" "),e("h2",{attrs:{id:"分包处理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#分包处理"}},[p._v("#")]),p._v(" 分包处理")]),p._v(" "),e("p",[p._v("构建时对于非JS资源，是所有的包串行处理，资源map会精确记录每个包中引用了哪些资源。")]),p._v(" "),e("p",[p._v("在主包的处理过程中，将主包页面中引用的所有非js资源(组件、外部样式、外部模板、wxs，图像媒体等)都记录下来，在处理分包时，对分包内引用的非js资源都进行检查，如果被主包引用过则输出到主包中，否则标记为分包only的资源输出到分包目录下。")]),p._v(" "),e("p",[p._v("由于主包和分包限制相同，一般情况下分包体积远小于主包体积\n，而微信小程序的体积限制策略主要卡主包体积不得超过2M，因此，Mpx设定的是主包体积优先策略，即尽可能减小主包体积，为此，会将分包资源尽可能打到分包去。")]),p._v(" "),e("p",[p._v("组件和静态资源的输出规则如下：")]),p._v(" "),e("ol",[e("li",[p._v("主包引用的资源输出至主包")]),p._v(" "),e("li",[p._v("分包引用且主包引用过的资源输出至主包，不在当前分包重复输出")]),p._v(" "),e("li",[p._v("分包引用且无其他包引用的资源输出至当前分包")]),p._v(" "),e("li",[p._v("分包引用且其他分包也引用过的资源，重复输出至当前分包")]),p._v(" "),e("li",[p._v("当用户通过packageName query显式指定了资源的所属包时，输出至指定的包")])]),p._v(" "),e("p",[p._v("如此复杂的分包策略也完全是为了尽可能良好地支持处理分包引用npm资源，因此不管在主包还是分包中，使用Mpx框架开发小程序，可以享受最舒适最自然最好用的npm机制。")]),p._v(" "),e("p",[p._v("而小程序原生的分包是不具备这个能力，只能引用自己分包下的资源，同时大部分基于web技术而来的转译型框架应该也都是不会考虑这个部分的。")]),p._v(" "),e("p",[p._v("甚至如果出现这种场景：同一个组件在A分包和B分包中都有使用，但未在主包使用，会将这个组件分别放入A分包和B分包而不是主包。（是否需要这样可自行斟酌，如果不希望出现这种情况，可在主包中引入一次该组件就会被收到主包去，全局就这一份了）")]),p._v(" "),e("p",[p._v("总结一下：")]),p._v(" "),e("p",[p._v("对于组件，若同时被多个分包引用，主包未引用，会有多份分包存在于各分包中。一旦被主包使用，就仅有一份存在于主包中。")]),p._v(" "),e("p",[p._v("对于资源（例如纯JS模块），若被主包使用，会被收集到主包里。若被多个分包使用，会被收集进主包的bundle里。若仅被某分包使用，就会在分包的bundle.js里（视模块大小及引用次数也可能被内联到某个组件JS里）。")]),p._v(" "),e("p",[p._v("进阶用户有更花式的需求可通过packageName query来显式指定输出。")])])}),[],!1,null,null,null);e.default=t.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/115.88124b12.js b/docs-vuepress/.vuepress/dist/assets/js/115.88124b12.js
new file mode 100644
index 0000000000..51335b93ae
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/115.88124b12.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{460:function(t,e,a){"use strict";a.r(e);var s=a(4),r=Object(s.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"mpx运行时增强原理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mpx运行时增强原理"}},[t._v("#")]),t._v(" Mpx运行时增强原理")]),t._v(" "),e("p",[t._v("数据响应作为Vue最核心的特性，在我们的日常开发中被大量使用，能够极大地提高前端开发体验和效率，我们在框架设计初期最早考虑的就是如何将数据响应特性加入到小程序开发中。在数据响应的实现上，我们引入了MobX，一个实现了纯粹数据响应能力的知名开源项目。借助MobX和mixins，我们在小程序组件创建初期建立了一个响应式数据管理系统，该系统观察着小程序组件中的所有数据(data/props/computed)并基于数据的变更驱动视图的渲染(setData)及用户注册的watch回调，实现了Vue中的数据响应编程体验。与此同时，我们基于MobX封装实现了一个Vuex规范的数据管理store，能够方便地注入组件进行全局数据管理。为了提高跨团队开发的体验，我们对store添加了多实例可合并的特性，不同团队维护自己的store，在需要时能够合并他人或者公共的store生成新的store实例，我们认为这是一种比Vuex中modules更加灵活便捷的跨团队数据管理模式")]),t._v(" "),e("p",[t._v("作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：")]),t._v(" "),e("ol",[e("li",[t._v("尽可能减少setData调用的频次")]),t._v(" "),e("li",[t._v("尽可能减少单次setData传输的数据")])]),t._v(" "),e("p",[t._v("为了实现以上两个优化方向，我们做了以下几项工作：")]),t._v(" "),e("ul",[e("li",[t._v("将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；")]),t._v(" "),e("li",[t._v("将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。")])]),t._v(" "),e("p",[e("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/runtime.jpeg",alt:"Mpx数据响应机制流程示意图"}})]),t._v(" "),e("p",[e("em",[t._v("Mpx数据响应机制流程示意图")])])])}),[],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/116.4a116234.js b/docs-vuepress/.vuepress/dist/assets/js/116.4a116234.js
new file mode 100644
index 0000000000..cd64dc2f87
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/116.4a116234.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[116],{466:function(t,a,e){"use strict";e.r(a);var r=e(4),s=Object(r.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"api支持列表"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#api支持列表"}},[t._v("#")]),t._v(" API支持列表")]),t._v(" "),a("p",[t._v("mpx转RN的对标微信api目前支持及部分的api转换，目前支持的能力可以参考下表：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("支持方法")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("getSystemInfo")])]),t._v(" "),a("tr",[a("td",[t._v("getSystemInfoSync")])]),t._v(" "),a("tr",[a("td",[t._v("getDeviceInfo")])]),t._v(" "),a("tr",[a("td",[t._v("getWindowInfo")])]),t._v(" "),a("tr",[a("td",[t._v("request")])]),t._v(" "),a("tr",[a("td",[t._v("setStorage")])]),t._v(" "),a("tr",[a("td",[t._v("removeStorage")])]),t._v(" "),a("tr",[a("td",[t._v("removeStorageSync")])]),t._v(" "),a("tr",[a("td",[t._v("getStorage")])]),t._v(" "),a("tr",[a("td",[t._v("getStorageInfo")])]),t._v(" "),a("tr",[a("td",[t._v("clearStorage")])]),t._v(" "),a("tr",[a("td",[t._v("clearStorageSync")])]),t._v(" "),a("tr",[a("td",[t._v("setClipboardData")])]),t._v(" "),a("tr",[a("td",[t._v("getClipboardData")])]),t._v(" "),a("tr",[a("td",[t._v("makePhoneCall")])]),t._v(" "),a("tr",[a("td",[t._v("onWindowResize")])]),t._v(" "),a("tr",[a("td",[t._v("offWindowResize")])]),t._v(" "),a("tr",[a("td",[t._v("arrayBufferToBase64")])]),t._v(" "),a("tr",[a("td",[t._v("base64ToArrayBuffer")])]),t._v(" "),a("tr",[a("td",[t._v("connectSocket")])]),t._v(" "),a("tr",[a("td",[t._v("getNetworkType")])]),t._v(" "),a("tr",[a("td",[t._v("onNetworkStatusChange")])]),t._v(" "),a("tr",[a("td",[t._v("offNetworkStatusChange")])])])]),t._v(" "),a("h1",{attrs:{id:"使用说明"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用说明"}},[t._v("#")]),t._v(" 使用说明")]),t._v(" "),a("p",[t._v("对于一些api-proxy中没有提供的能力，用户可以搭配mpx对象方式传入custom使用即可示例如下：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" showModal "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@test/showModal'")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("custom")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ios")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      showModal\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("android")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      showModal\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showModal")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'标题'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'这是一个弹窗'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'弹框展示成功'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h1",{attrs:{id:"api抹平差异详情"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#api抹平差异详情"}},[t._v("#")]),t._v(" API抹平差异详情")]),t._v(" "),a("p",[t._v("对于一些微信独有的返回结果，或者RN目前不能支持的入参/返回结果，在下面会有详细说明：")]),t._v(" "),a("h3",{attrs:{id:"getsysteminfo-getsysteminfosync"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getsysteminfo-getsysteminfosync"}},[t._v("#")]),t._v(" getSystemInfo/getSystemInfoSync")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("language")])]),t._v(" "),a("tr",[a("td",[t._v("version")])]),t._v(" "),a("tr",[a("td",[t._v("SDKVersion")])]),t._v(" "),a("tr",[a("td",[t._v("benchmarkLevel")])]),t._v(" "),a("tr",[a("td",[t._v("albumAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("cameraAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("locationAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("microphoneAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("notificationAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("phoneCalendarAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("host")])]),t._v(" "),a("tr",[a("td",[t._v("enableDebug")])]),t._v(" "),a("tr",[a("td",[t._v("notificationAlertAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("notificationBadgeAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("notificationSoundAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("bluetoothEnabled")])]),t._v(" "),a("tr",[a("td",[t._v("locationEnabled")])]),t._v(" "),a("tr",[a("td",[t._v("wifiEnabled")])]),t._v(" "),a("tr",[a("td",[t._v("locationReducedAccuracy")])]),t._v(" "),a("tr",[a("td",[t._v("theme")])])])]),t._v(" "),a("h3",{attrs:{id:"getdeviceinfo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getdeviceinfo"}},[t._v("#")]),t._v(" getDeviceInfo")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("benchmarkLevel")])]),t._v(" "),a("tr",[a("td",[t._v("abi")])]),t._v(" "),a("tr",[a("td",[t._v("cpuType")])])])]),t._v(" "),a("h3",{attrs:{id:"getwindowinfo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getwindowinfo"}},[t._v("#")]),t._v(" getWindowInfo")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("screenTop")])])])]),t._v(" "),a("h3",{attrs:{id:"request"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#request"}},[t._v("#")]),t._v(" request")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持入参")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("useHighPerformanceMode")])]),t._v(" "),a("tr",[a("td",[t._v("enableHttp2")])]),t._v(" "),a("tr",[a("td",[t._v("enableProfile")])]),t._v(" "),a("tr",[a("td",[t._v("enableQuic")])]),t._v(" "),a("tr",[a("td",[t._v("enableCache")])]),t._v(" "),a("tr",[a("td",[t._v("enableHttpDNS")])]),t._v(" "),a("tr",[a("td",[t._v("httpDNSServiceId")])]),t._v(" "),a("tr",[a("td",[t._v("enableChunked")])]),t._v(" "),a("tr",[a("td",[t._v("forceCellularNetwork")])]),t._v(" "),a("tr",[a("td",[t._v("redirect")])])])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("cookies")])]),t._v(" "),a("tr",[a("td",[t._v("profile")])]),t._v(" "),a("tr",[a("td",[t._v("exception")])])])]),t._v(" "),a("h3",{attrs:{id:"setstorage-getstorage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setstorage-getstorage"}},[t._v("#")]),t._v(" setStorage/getStorage")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持入参")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("encrypt")])])])]),t._v(" "),a("h3",{attrs:{id:"getstorageinfo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getstorageinfo"}},[t._v("#")]),t._v(" getStorageInfo")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("currentSize")])]),t._v(" "),a("tr",[a("td",[t._v("limitSize")])])])]),t._v(" "),a("h3",{attrs:{id:"connectsocket"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#connectsocket"}},[t._v("#")]),t._v(" connectSocket")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持入参")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("tcpNoDelay")])]),t._v(" "),a("tr",[a("td",[t._v("perMessageDeflate")])]),t._v(" "),a("tr",[a("td",[t._v("timeout")])]),t._v(" "),a("tr",[a("td",[t._v("forceCellularNetwork")])])])]),t._v(" "),a("h3",{attrs:{id:"getnetworktype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getnetworktype"}},[t._v("#")]),t._v(" getNetworkType")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("signalStrength")])]),t._v(" "),a("tr",[a("td",[t._v("hasSystemProxy")])])])])])}),[],!1,null,null,null);a.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/117.e45c1b95.js b/docs-vuepress/.vuepress/dist/assets/js/117.e45c1b95.js
new file mode 100644
index 0000000000..3b3f338209
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/117.e45c1b95.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[117],{462:function(v,t,_){"use strict";_.r(t);var d=_(4),e=Object(d.a)({},(function(){var v=this,t=v._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":v.$parent.slotKey}},[t("h1",{attrs:{id:"rn-自定义组件支持"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rn-自定义组件支持"}},[v._v("#")]),v._v(" RN 自定义组件支持")]),v._v(" "),t("p",[v._v("创建自定义组件在 RN 环境下部分实例方法、属性存在兼容性问题不支持，\n此文档以微信小程序为参照，会详细列出各方法、属性的支持度。")]),v._v(" "),t("h2",{attrs:{id:"参数"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#参数"}},[v._v("#")]),v._v(" 参数")]),v._v(" "),t("h3",{attrs:{id:"组件定义属性说明"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#组件定义属性说明"}},[v._v("#")]),v._v(" 组件定义属性说明")]),v._v(" "),t("table",[t("thead",[t("tr",[t("th",[v._v("属性")]),v._v(" "),t("th",[v._v("类型")]),v._v(" "),t("th",[v._v("RN 是否支持")]),v._v(" "),t("th",[v._v("描述")])])]),v._v(" "),t("tbody",[t("tr",[t("td",[v._v("properties")]),v._v(" "),t("td",[v._v("Object Map")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件的对外属性，是属性名到属性设置的映射表")])]),v._v(" "),t("tr",[t("td",[v._v("data")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件的内部数据，和 "),t("code",[v._v("properties")]),v._v(" 一同用于组件的模板渲染")])]),v._v(" "),t("tr",[t("td",[v._v("observers")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件数据字段监听器，用于监听 "),t("code",[v._v("properties")]),v._v(" 和 "),t("code",[v._v("data")]),v._v(" 的变化")])]),v._v(" "),t("tr",[t("td",[v._v("methods")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用")])]),v._v(" "),t("tr",[t("td",[v._v("behaviors")]),v._v(" "),t("td",[v._v("String Array")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("created")]),v._v(" "),t("td",[v._v("Function")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 "),t("code",[v._v("setData")])])]),v._v(" "),t("tr",[t("td",[v._v("attached")]),v._v(" "),t("td",[v._v("Function")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件生命周期函数-在组件实例进入页面节点树时执行")])]),v._v(" "),t("tr",[t("td",[v._v("ready")]),v._v(" "),t("td",[v._v("Function")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件生命周期函数-在组件布局完成后执行")])]),v._v(" "),t("tr",[t("td",[v._v("moved")]),v._v(" "),t("td",[v._v("Function")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("RN 不支持，组件生命周期函数-在组件实例被移动到节点树另一个位置时执行")])]),v._v(" "),t("tr",[t("td",[v._v("detached")]),v._v(" "),t("td",[v._v("Function")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件生命周期函数-在组件实例被从页面节点树移除时执行")])]),v._v(" "),t("tr",[t("td",[v._v("relations")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("externalClasses")]),v._v(" "),t("td",[v._v("String Array")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("options")]),v._v(" "),t("td",[v._v("Object Map")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 不支持，一些选项，诸如 multipleSlots、virtualHost、pureDataPattern，这些功能输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("lifetimes")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件生命周期声明对象")])]),v._v(" "),t("tr",[t("td",[v._v("pageLifetimes")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件所在页面的生命周期声明对象")])])])]),v._v(" "),t("h3",{attrs:{id:"组件实例属性与方法"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#组件实例属性与方法"}},[v._v("#")]),v._v(" 组件实例属性与方法")]),v._v(" "),t("p",[v._v("生成的组件实例可以在组件的方法、生命周期函数中通过 this 访问。组件包含一些通用属性和方法。")]),v._v(" "),t("table",[t("thead",[t("tr",[t("th",[v._v("属性名")]),v._v(" "),t("th",[v._v("类型")]),v._v(" "),t("th",[v._v("RN 是否支持")]),v._v(" "),t("th",[v._v("描述")])])]),v._v(" "),t("tbody",[t("tr",[t("td",[v._v("is")]),v._v(" "),t("td",[v._v("String")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持，未来支持, 组件的文件路径")])]),v._v(" "),t("tr",[t("td",[v._v("id")]),v._v(" "),t("td",[v._v("String")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("节点id")])]),v._v(" "),t("tr",[t("td",[v._v("dataset")]),v._v(" "),t("td",[v._v("String")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("节点dataset")])]),v._v(" "),t("tr",[t("td",[v._v("data")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("组件数据，通过 this 直接访问")])]),v._v(" "),t("tr",[t("td",[v._v("properties")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("组件props，通过 this 直接访问")])]),v._v(" "),t("tr",[t("td",[v._v("router")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持")])]),v._v(" "),t("tr",[t("td",[v._v("pageRouter")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持")])]),v._v(" "),t("tr",[t("td",[v._v("renderer")]),v._v(" "),t("td",[v._v("string")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持")])])])]),v._v(" "),t("p",[v._v("微信小程序原生方法")]),v._v(" "),t("table",[t("thead",[t("tr",[t("th",[v._v("方法名")]),v._v(" "),t("th",[v._v("RN是否支持")]),v._v(" "),t("th",[v._v("参数")]),v._v(" "),t("th",[v._v("描述")])])]),v._v(" "),t("tbody",[t("tr",[t("td",[v._v("setData")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("Object newData")]),v._v(" "),t("td",[v._v("设置data并执行视图层渲染")])]),v._v(" "),t("tr",[t("td",[v._v("hasBehavior")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("Object behavior")]),v._v(" "),t("td",[v._v("检查组件是否具有 behavior")])]),v._v(" "),t("tr",[t("td",[v._v("triggerEvent")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("String name, Object detail, Object options")]),v._v(" "),t("td",[v._v("触发事件")])]),v._v(" "),t("tr",[t("td",[v._v("createSelectorQuery")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td"),v._v(" "),t("td",[v._v("输出 RN 暂不支持，未来支持，建议使用 ref")])]),v._v(" "),t("tr",[t("td",[v._v("createIntersectionObserver")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td"),v._v(" "),t("td",[v._v("输出 RN 暂不支持")])]),v._v(" "),t("tr",[t("td",[v._v("selectComponent")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("String selector")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持，未来支持，建议使用 ref")])]),v._v(" "),t("tr",[t("td",[v._v("selectAllComponents")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("String selector")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持，未来支持，建议使用 ref")])]),v._v(" "),t("tr",[t("td",[v._v("selectOwnerComponent")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td"),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("getRelationNodes")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("String relationKey")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("groupSetData")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("Function callback")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("getTabBar")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td"),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("getPageId")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td"),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("animate")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("String selector, Array keyframes, ...")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("clearAnimation")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("String selector, Object options, ...")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])])])]),v._v(" "),t("p",[v._v("Mpx 框架增强实例方法")]),v._v(" "),t("table",[t("thead",[t("tr",[t("th",[v._v("方法名")]),v._v(" "),t("th",[v._v("RN是否支持")]),v._v(" "),t("th",[v._v("描述")])])]),v._v(" "),t("tbody",[t("tr",[t("td",[v._v("$set")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新")])]),v._v(" "),t("tr",[t("td",[v._v("$watch")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("观察 Mpx 实例上的一个表达式或者一个函数计算结果的变化")])]),v._v(" "),t("tr",[t("td",[v._v("$delete")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("删除对象属性，如果该对象是响应式的，那么该方法可以触发观察器更新（视图更新")])]),v._v(" "),t("tr",[t("td",[v._v("$refs")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("一个对象，持有注册过 ref的所有 DOM 元素和组件实例，调用响应的组件方法或者获取视图节点信息。")])]),v._v(" "),t("tr",[t("td",[v._v("$asyncRefs")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("$forceUpdate")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("用于强制刷新视图，不常用，通常建议使用响应式数据驱动视图更新")])]),v._v(" "),t("tr",[t("td",[v._v("$nextTick")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("在下次 DOM 更新循环结束之后执行延迟回调函数，用于等待 Mpx 完成状态更新和 DOM 更新后再执行某些操作")])]),v._v(" "),t("tr",[t("td",[v._v("$i18n")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持，国际化功能访问器，用于获取多语言字符串资源")])]),v._v(" "),t("tr",[t("td",[v._v("$rawOptions")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("访问组件原始选项对象")])])])])])}),[],!1,null,null,null);t.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/118.9cbac09e.js b/docs-vuepress/.vuepress/dist/assets/js/118.9cbac09e.js
new file mode 100644
index 0000000000..76b64985be
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/118.9cbac09e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[118],{467:function(t,a,s){"use strict";s.r(a);var r=s(4),n=Object(r.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"mpx转rn样式使用指南"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mpx转rn样式使用指南"}},[t._v("#")]),t._v(" Mpx转RN样式使用指南")]),t._v(" "),a("p",[t._v("RN 的样式的支持基本为 web 样式的一个子集，同时还有一些属性并未与 web 对齐，因此跨平台输出 RN 时，为了保障多端输出样式一致，可参考本文针对样式在RN上的支持情况来进行样式编写。")]),t._v(" "),a("h2",{attrs:{id:"样式编写限制"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#样式编写限制"}},[t._v("#")]),t._v(" 样式编写限制")]),t._v(" "),a("h3",{attrs:{id:"选择器"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#选择器"}},[t._v("#")]),t._v(" 选择器")]),t._v(" "),a("p",[t._v("RN 环境下仅支持以下类名选择器，不支持逗号之外的组合选择器。")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".classname")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".classA, .classB")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h3",{attrs:{id:"布局"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#布局"}},[t._v("#")]),t._v(" 布局")]),t._v(" "),a("p",[t._v("在 RN 中布局方式有限制，像 block inline inline-block 和 fixed 等都不支持，支持的布局方式如下：")]),t._v(" "),a("h4",{attrs:{id:"flex"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex"}},[t._v("#")]),t._v(" flex")]),t._v(" "),a("p",[t._v("在RN中，常规的组件元素可以用过 flex 布局来实现，"),a("a",{attrs:{href:"https://reactnative.dev/docs/layout-props#flex",target:"_blank",rel:"noopener noreferrer"}},[t._v("参考文档"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("p",[a("strong",[t._v("注")]),t._v("：RN中view标签的主轴是column，和css不一致，使用mpx开发设置"),a("code",[t._v("dispay:flex")]),t._v("时，会默认的主轴方向是row。")]),t._v(" "),a("h4",{attrs:{id:"relative-absolute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#relative-absolute"}},[t._v("#")]),t._v(" relative/absolute")]),t._v(" "),a("p",[t._v("在 RN 中 position 仅支持 relative（默认）和 absolute，可"),a("a",{attrs:{href:"https://reactnative.dev/docs/layout-props#position",target:"_blank",rel:"noopener noreferrer"}},[t._v("参考文档"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h3",{attrs:{id:"样式单位"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#样式单位"}},[t._v("#")]),t._v(" 样式单位")]),t._v(" "),a("h4",{attrs:{id:"number-类型值"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#number-类型值"}},[t._v("#")]),t._v(" number 类型值")]),t._v(" "),a("p",[t._v("RN 环境中，number 数值型单位支持 px rpx % 三种，web 下的 vw em rem 等不支持。")]),t._v(" "),a("h4",{attrs:{id:"color-类型值"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-类型值"}},[t._v("#")]),t._v(" color 类型值")]),t._v(" "),a("p",[t._v("RN 环境支持大部分 css 中 color 定义方式，仅少量不支持，详情参考 RN 文档 https://reactnative.dev/docs/colors")]),t._v(" "),a("h2",{attrs:{id:"组件样式规则"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件样式规则"}},[t._v("#")]),t._v(" 组件样式规则")]),t._v(" "),a("p",[t._v("在web和RN下组件的渲染会存在一些差异的地方，比如默认样式不一致、继承的关系不一致等。框架针对这些不一致进行了抹平工作，但是仍旧存在一些使用限制，具体参考以下组件节点的介绍。")]),t._v(" "),a("h3",{attrs:{id:"text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text"}},[t._v("#")]),t._v(" text")]),t._v(" "),a("p",[t._v("RN中，文本节点需要通过Text组件来创建文本节点。文本节点需要给Text组件来设定"),a("a",{attrs:{href:"https://reactnative.dev/docs/text-style-props",target:"_blank",rel:"noopener noreferrer"}},[t._v("属性"),a("OutboundLink")],1),t._v("来调整文本的外观。")]),t._v(" "),a("p",[t._v("Web/小程序中，文本节点可以通过div/view节点进行直接包裹，在div/view标签上设定对应文本样式即可。不需单独包裹text节点。")]),t._v(" "),a("p",[t._v("框架抹平了此部分的差异，但仍因受限于RN内text的样式"),a("a",{attrs:{href:"https://reactnative.dev/docs/text#limited-style-inheritance",target:"_blank",rel:"noopener noreferrer"}},[t._v("继承原则的限制"),a("OutboundLink")],1),t._v("，通过在祖先节点来设置文本节点的样式仍旧无法生效。具体例子说明如下")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrapper"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我是文本"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n.wrapper {\n    font-size: 20px;\n}\n.content {\n    text-align: right;\n}\n/** 以上例子中\nweb渲染效果: 字体的大小为20px，文字居右 \n转RN之后渲染效果: 字体大小为默认大小，文字居右\n*/\n\n")])])]),a("p",[a("strong",[t._v("限制与使用说明")])]),t._v(" "),a("ol",[a("li",[t._v("无法通过设置祖先节点的样式来修改文本节点的样式，只可通过修改直接包裹文本的节点来修改文本的样式。")]),t._v(" "),a("li",[t._v("框架处理将文本节点样式的默认值与web进行了对齐，如果需要按照RN的默认值来进行渲染，可设置"),a("code",[t._v("disable-default-style")]),t._v("为"),a("code",[t._v("true")])])]),t._v(" "),a("h3",{attrs:{id:"view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#view"}},[t._v("#")]),t._v(" view")]),t._v(" "),a("p",[t._v("background、background-image、background-size、background-repeat仅在view标签下支持，background-color在其他标签上也支持。")]),t._v(" "),a("p",[a("strong",[t._v("各属性支持的类型")])]),t._v(" "),a("ul",[a("li",[t._v("background - 仅支持 background-image | background-color | background-size | background-repeat，每个属性支持情况，可参考下面的介绍。")]),t._v(" "),a("li",[t._v("background-image - 仅支持 <url()>。")]),t._v(" "),a("li",[t._v("background-size - 支持px|rpx|%，也支持枚举值 contain|cover|auto； 不支持两个以上的值进行设置。")]),t._v(" "),a("li",[t._v("backgroundno-repeat - 仅支持值为no-repeat。")]),t._v(" "),a("li",[t._v("backfround-color - 参考"),a("a",{attrs:{href:"https://reactnative.dev/docs/colors",target:"_blank",rel:"noopener noreferrer"}},[t._v("Color"),a("OutboundLink")],1)])]),t._v(" "),a("p",[a("strong",[t._v("支持的语法")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 1. background **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token url"}},[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" pink contain no-repeat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token url"}},[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" pink"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("linear-gradient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 2. background-image **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token url"}},[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("linear-gradient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 3. background-size **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50% 25%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" contain"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cover"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20px auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n/ * 不支持 * /\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 25%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 25%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 4. background-repeat **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-repeat")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" no-repeat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-repeat")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" repeat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 5. background-color **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-repeat")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"样式参考"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#样式参考"}},[t._v("#")]),t._v(" 样式参考")]),t._v(" "),a("h3",{attrs:{id:"layout-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-style"}},[t._v("#")]),t._v(" Layout Style")]),t._v(" "),a("h4",{attrs:{id:"position"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#position"}},[t._v("#")]),t._v(" position")]),t._v(" "),a("p",[t._v("设置元素的定位样式\n"),a("strong",[t._v("值支持类型")]),t._v("\nenum: absolute, relative， 默认relative。")]),t._v(" "),a("h5",{attrs:{id:"语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" relative"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n")])])]),a("h4",{attrs:{id:"top-right-left-bottom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#top-right-left-bottom"}},[t._v("#")]),t._v(" top|right|left|bottom")]),t._v(" "),a("p",[t._v("设置元素的不同方向的偏移量")]),t._v(" "),a("h5",{attrs:{id:"值支持类型"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: px,rpx,%")]),t._v(" "),a("h5",{attrs:{id:"语法-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-2"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"z-index"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#z-index"}},[t._v("#")]),t._v(" z-index")]),t._v(" "),a("p",[t._v("控制着元素的堆叠覆盖顺序。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-2"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number")]),t._v(" "),a("h5",{attrs:{id:"语法-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-3"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("z-index")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"display"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#display"}},[t._v("#")]),t._v(" display")]),t._v(" "),a("p",[t._v("设置元素的布局方式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-3"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("flex/none")]),t._v(" "),a("h5",{attrs:{id:"语法-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-4"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 默认 */")]),t._v(" \n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("flex\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 隐藏 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("none\n")])])]),a("h4",{attrs:{id:"align-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#align-content"}},[t._v("#")]),t._v(" align-content")]),t._v(" "),a("p",[t._v("设置多根轴线的对齐方式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-4"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: flex-start, flex-end, center, stretch, space-between, space-around, space-evenly")]),t._v(" "),a("h5",{attrs:{id:"语法-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-5"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-start"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-end"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" stretch"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" space-between"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" space-around"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" space-evenly"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" safe center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" unsafe center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"align-items"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#align-items"}},[t._v("#")]),t._v(" align-items")]),t._v(" "),a("p",[t._v("设置单根轴线上的子元素的对齐方式。默认会是交叉轴上的。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-5"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: flex-start, flex-end, center, stretch, baseline")]),t._v(" "),a("h5",{attrs:{id:"语法-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-6"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-start"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-end"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" stretch"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" baseline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" first baseline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" last baseline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"align-self"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#align-self"}},[t._v("#")]),t._v(" align-self")]),t._v(" "),a("p",[t._v("设置单个子元素在单根轴线上的对齐方式")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-6"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: auto, flex-start, flex-end, center, stretch, baseline")]),t._v(" "),a("h5",{attrs:{id:"语法-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-7"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-start"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-end"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" stretch"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" baseline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" first baseline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" last baseline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"flex-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-2"}},[t._v("#")]),t._v(" flex")]),t._v(" "),a("p",[t._v("仅支持 flex-grow | flex-shrink | flex-basis 这种顺序，值以空格分隔按顺序赋值")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-7"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("flex: number number px/rpx")]),t._v(" "),a("h5",{attrs:{id:"语法-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-8"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 简写 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* flex-grow | flex-shrink | flex-basis */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 1 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"flex-grow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-grow"}},[t._v("#")]),t._v(" flex-grow")]),t._v(" "),a("p",[t._v("设置子盒子的放大比例")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-8"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number")]),t._v(" "),a("h5",{attrs:{id:"语法-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-9"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-grow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"flex-shrink"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-shrink"}},[t._v("#")]),t._v(" flex-shrink")]),t._v(" "),a("p",[t._v("设置子盒子的缩放比例。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-9"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number")]),t._v(" "),a("h5",{attrs:{id:"语法-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-10"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-shrink")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"flex-basis"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-basis"}},[t._v("#")]),t._v(" flex-basis")]),t._v(" "),a("p",[t._v("设置在分配多余空间之前，子盒子的初始主轴尺寸。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-10"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number px|rpx|%")]),t._v(" "),a("h5",{attrs:{id:"语法-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-11"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-shrink")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-shrink")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-shrink")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"flex-direction"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-direction"}},[t._v("#")]),t._v(" flex-direction")]),t._v(" "),a("p",[t._v("设置主轴的方向。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-11"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: row, row-reverse, column, column-reverse")]),t._v(" "),a("h5",{attrs:{id:"语法-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-12"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" row"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" row-reverse"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" column"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" column-reverse"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n")])])]),a("h4",{attrs:{id:"flex-wrap"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-wrap"}},[t._v("#")]),t._v(" flex-wrap")]),t._v(" "),a("p",[t._v("设置元素是否换行。当值为wrap时，alignItems：center不生效。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-12"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: wrap, nowrap, wrap-reverse")]),t._v(" "),a("h5",{attrs:{id:"语法-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-13"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-wrap")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" wrap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-wrap")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" nowrap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-wrap")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" wrap-reverse"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"flex-flow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-flow"}},[t._v("#")]),t._v(" flex-flow")]),t._v(" "),a("p",[t._v("是flex-direction flex-wrap 缩写，仅支持 flex-flow: flex-direction flex-wrap 这种顺序，值以空格分隔按顺序赋值")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* flex-direction */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-flow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" row"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* flex-direction|  flex-wrap*/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-flow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" row nowrap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"view-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#view-style"}},[t._v("#")]),t._v(" View Style")]),t._v(" "),a("h4",{attrs:{id:"margin"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#margin"}},[t._v("#")]),t._v(" margin")]),t._v(" "),a("p",[t._v("margin 是 margin-top|margin-right|margin-left|margin-bottom 的缩写模式, 目前仅支持四种缩写模式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-13"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("string: 'auto'\nnumber: rpx，px, %")]),t._v(" "),a("h5",{attrs:{id:"语法-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-14"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top and bottom | left and right */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 5% auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top | left and right | bottom */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1rpx auto 2rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top | right | bottom | left */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1rpx 2rpx 2rpx "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"margin-top-margin-bottom-margin-right-margin-left"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#margin-top-margin-bottom-margin-right-margin-left"}},[t._v("#")]),t._v(" margin-top|margin-bottom|margin-right|margin-left")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-14"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: rpx，px, %")]),t._v(" "),a("h5",{attrs:{id:"语法-15"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-15"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"padding"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#padding"}},[t._v("#")]),t._v(" padding")]),t._v(" "),a("p",[t._v("padding是padding-left、padding-right、padding-left、padding-bottom的缩写模式, 目前仅支持四种缩写模式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-15"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-15"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("string: 'auto'\nnumber: rpx，px, %")]),t._v(" "),a("h5",{attrs:{id:"语法-16"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-16"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top and bottom | left and right */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 5% 10%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top | left and right | bottom */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1rpx 0 2rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top | right | bottom | left */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1rpx 2rpx 2rpx "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"padding-top-padding-bottom-padding-left-padding-right"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#padding-top-padding-bottom-padding-left-padding-right"}},[t._v("#")]),t._v(" padding-top|padding-bottom|padding-left|padding-right")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-16"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-16"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: rpx，px, %")]),t._v(" "),a("h5",{attrs:{id:"语法-17"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-17"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** padding-top **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border"}},[t._v("#")]),t._v(" border")]),t._v(" "),a("p",[t._v("border 是 border-width|border-style|border-color 的缩写模式, 目前仅支持 width | style | color 这种排序，值以空格分隔按顺序赋值")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* width | style | color */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px double pink"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-color"}},[t._v("#")]),t._v(" border-color")]),t._v(" "),a("p",[t._v("设置边框的颜色, 目前只支持统一设置，不支持缩写。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-17"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-17"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("color: 参考"),a("a",{attrs:{href:"https://reactnative.dev/docs/colors",target:"_blank",rel:"noopener noreferrer"}},[t._v("Color"),a("OutboundLink")],1)]),t._v(" "),a("h5",{attrs:{id:"语法-18"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-18"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all border */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-style"}},[t._v("#")]),t._v(" border-style")]),t._v(" "),a("p",[t._v("设置边框的样式, 目前只支持统一设置，不支持缩写。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-18"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-18"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: solid|dotted|dashed")]),t._v(" "),a("h5",{attrs:{id:"语法-19"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-19"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all border */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'solid'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'dotted'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'dashed'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" double"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" groove"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" ridge"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dotted solid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" hidden double dashed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none solid dotted dashed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-width"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-width"}},[t._v("#")]),t._v(" border-width")]),t._v(" "),a("p",[t._v("设置边框的宽度，目前只支持统一设置，不支持缩写。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-19"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-19"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: px rpx %")]),t._v(" "),a("h5",{attrs:{id:"语法-20"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-20"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all border */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-top-color-border-bottom-color-border-left-color-border-right-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-top-color-border-bottom-color-border-left-color-border-right-color"}},[t._v("#")]),t._v(" border-top-color|border-bottom-color|border-left-color|border-right-color")]),t._v(" "),a("p",[t._v("设置各边框的颜色")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-20"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-20"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("color: 参考"),a("a",{attrs:{href:"https://reactnative.dev/docs/colors",target:"_blank",rel:"noopener noreferrer"}},[t._v("Color"),a("OutboundLink")],1)]),t._v(" "),a("h5",{attrs:{id:"语法-21"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-21"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-top-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-top-width-border-bottom-width-border-left-width-border-right-width"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-top-width-border-bottom-width-border-left-width-border-right-width"}},[t._v("#")]),t._v(" border-top-width|border-bottom-width|border-left-width|border-right-width")]),t._v(" "),a("p",[t._v("设置各边框的宽度")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-21"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-21"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: px rpx")]),t._v(" "),a("h5",{attrs:{id:"语法-22"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-22"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-top-width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-radius"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-radius"}},[t._v("#")]),t._v(" border-radius")]),t._v(" "),a("p",[t._v("设置border的圆角格式，支持一种缩写方式")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-22"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-22"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("仅支持 border-radius 0px|border-radius 0px 0px 0px 0px（值以空格分隔按顺序赋值）\nnumber: px rpx %")]),t._v(" "),a("h5",{attrs:{id:"语法-23"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-23"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top-left | top-right | bottom-right | bottom-left */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px 10px 10px 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-bottom-left-radius-border-bottom-right-radius-border-top-left-radius-border-top-right-radius"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-bottom-left-radius-border-bottom-right-radius-border-top-left-radius-border-top-right-radius"}},[t._v("#")]),t._v(" border-bottom-left-radius|border-bottom-right-radius|border-top-left-radius|border-top-right-radius")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-23"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-23"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: px rpx %")]),t._v(" "),a("h5",{attrs:{id:"语法-24"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-24"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-bottom-left-radius")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"text-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-style"}},[t._v("#")]),t._v(" Text Style")]),t._v(" "),a("h4",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color"}},[t._v("#")]),t._v(" color")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-24"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-24"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("color: 参考"),a("a",{attrs:{href:"https://reactnative.dev/docs/colors",target:"_blank",rel:"noopener noreferrer"}},[t._v("Color"),a("OutboundLink")],1)]),t._v(" "),a("h5",{attrs:{id:"语法-25"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-25"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" orange"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fafafa"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgb")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 99"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 71"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"font-family"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family"}},[t._v("#")]),t._v(" font-family")]),t._v(" "),a("p",[t._v("可设置系统字体，引入字体文件，暂时不支持。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-25"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-25"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("string")]),t._v(" "),a("h5",{attrs:{id:"语法-26"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-26"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-family")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"PingFangSC-Regular"')]),t._v("\n")])])]),a("h4",{attrs:{id:"font-size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-size"}},[t._v("#")]),t._v(" font-size")]),t._v(" "),a("p",[t._v("可设置字体的大小")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-26"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-26"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: px,rpx")]),t._v(" "),a("h5",{attrs:{id:"语法-27"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-27"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 12px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 12rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"font-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-style"}},[t._v("#")]),t._v(" font-style")]),t._v(" "),a("p",[t._v("设置文本的字体样式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-27"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-27"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: normal，italic")]),t._v(" "),a("h5",{attrs:{id:"语法-28"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-28"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" italic"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" normal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"font-weight"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-weight"}},[t._v("#")]),t._v(" font-weight")]),t._v(" "),a("p",[t._v("设置文字的权重。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-28"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-28"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: 100，200，300，400，500，600，800，900,normal,bold")]),t._v(" "),a("h5",{attrs:{id:"语法-29"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-29"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 200"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 300"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 400"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 500"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 600"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 700"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 800"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 900"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" normal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bold"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"font-variant"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-variant"}},[t._v("#")]),t._v(" font-variant")]),t._v(" "),a("p",[t._v("设置文本的字体变体")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-29"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-29"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums")]),t._v(" "),a("h5",{attrs:{id:"语法-30"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-30"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" small-caps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" oldstyle-nums"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" lining-nums"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" tabular-nums"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" lining-nums"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" proportional-nums"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"letter-spacing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#letter-spacing"}},[t._v("#")]),t._v(" letter-spacing")]),t._v(" "),a("p",[t._v("定义字符之间的间距")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-30"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-30"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("px,rpx")]),t._v(" "),a("h5",{attrs:{id:"语法-31"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-31"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("letter-spacing")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("letter-spacing")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"line-height"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#line-height"}},[t._v("#")]),t._v(" line-height")]),t._v(" "),a("p",[t._v("设置行高。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-31"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-31"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("px,rpx,%")]),t._v(" "),a("h5",{attrs:{id:"语法-32"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-32"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("line-height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 16px\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("line-height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 16rpx\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("line-height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("line-height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1\n")])])]),a("h4",{attrs:{id:"text-align"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-align"}},[t._v("#")]),t._v(" text-align")]),t._v(" "),a("p",[t._v("设置文本的水平对齐方式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-32"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-32"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: left, right, center, justify")]),t._v(" "),a("h5",{attrs:{id:"语法-33"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-33"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" left"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" right"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" justify"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" match-parent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" justify-all"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"text-decoration-line"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-decoration-line"}},[t._v("#")]),t._v(" text-decoration-line")]),t._v(" "),a("p",[t._v("设置文本的装饰线样式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-33"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-33"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: none, underline, line-through, underline line-through")]),t._v(" "),a("h5",{attrs:{id:"语法-34"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-34"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-decoration-line")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-decoration-line")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" underline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-decoration-line")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" line-through"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-decoration-line")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" underline line-through"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-decoration-line")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" overline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"text-transform"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-transform"}},[t._v("#")]),t._v(" text-transform")]),t._v(" "),a("p",[t._v("设置文本的大小写转换。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-34"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-34"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: none, uppercase, lowercase, capitalize")]),t._v(" "),a("h5",{attrs:{id:"语法-35"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-35"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" uppercase"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" lowercase"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" capitalize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" uppercase"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" lowercase"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" capitalize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"text-shadow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-shadow"}},[t._v("#")]),t._v(" text-shadow")]),t._v(" "),a("p",[t._v("设置文本阴影")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-35"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-35"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("仅支持 offset-x | offset-y | blur-radius | color 排序，值以空格分隔按顺序赋值")]),t._v(" "),a("h5",{attrs:{id:"语法-36"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-36"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1rpx 3rpx 0 #2E0C02"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"background-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background-style"}},[t._v("#")]),t._v(" Background Style")]),t._v(" "),a("p",[t._v("背景相关的属性")]),t._v(" "),a("h4",{attrs:{id:"background-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background-color"}},[t._v("#")]),t._v(" background-color")]),t._v(" "),a("p",[t._v("表示背景色，可以在任何标签上使用。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-36"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-36"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("color: 参考"),a("a",{attrs:{href:"https://reactnative.dev/docs/colors",target:"_blank",rel:"noopener noreferrer"}},[t._v("Color"),a("OutboundLink")],1)]),t._v(" "),a("h5",{attrs:{id:"语法-37"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-37"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all border */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"background-image"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background-image"}},[t._v("#")]),t._v(" background-image")]),t._v(" "),a("p",[t._v("表示背景图，只能在view上使用")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-37"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-37"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("仅支持 <url()>")]),t._v(" "),a("h5",{attrs:{id:"语法-38"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-38"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token url"}},[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("linear-gradient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"background-size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background-size"}},[t._v("#")]),t._v(" background-size")]),t._v(" "),a("p",[t._v("表示背景大小，只能在view上使用")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-38"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-38"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number 支持 px|rpx|%，枚举值支持 contain|cover|auto；\n支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto；\n支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度；\n不支持逗号分隔的多个值：设置多重背景!!!")]),t._v(" "),a("h5",{attrs:{id:"语法-39"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-39"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50% 25%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" contain"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cover"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20px auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n/ * 不支持 * /\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 25%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 25%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"background-repeat"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background-repeat"}},[t._v("#")]),t._v(" background-repeat")]),t._v(" "),a("p",[t._v("表示背景图是否重复，只能在view上使用")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-39"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-39"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: no-repeat")]),t._v(" "),a("h5",{attrs:{id:"语法-40"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-40"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-repeat")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" no-repeat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-repeat")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" repeat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n")])])]),a("h4",{attrs:{id:"background"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background"}},[t._v("#")]),t._v(" background")]),t._v(" "),a("p",[t._v("表示背景的组合属性，只能在view上使用")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-40"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-40"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("仅支持 background-image | background-color | background-size | background-repeat，具体每个属性的支持情况参见上面具体属性支持的文档")]),t._v(" "),a("h5",{attrs:{id:"语法-41"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-41"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token url"}},[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" pink no-repeat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token url"}},[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" pink"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("linear-gradient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"shadow-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shadow-style"}},[t._v("#")]),t._v(" Shadow Style")]),t._v(" "),a("h4",{attrs:{id:"box-shadow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#box-shadow"}},[t._v("#")]),t._v(" box-shadow")]),t._v(" "),a("p",[t._v("此属性是阴影颜色、阴影的偏移量")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-41"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-41"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("仅支持 offset-x | offset-y | blur-radius | color 排序，值以空格分隔按顺序赋值")]),t._v(" "),a("h5",{attrs:{id:"语法-42"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-42"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* offset-x | offset-y | blur-radius | color */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 1px 3px "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("139"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0.32"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"附录"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#附录"}},[t._v("#")]),t._v(" 附录")]),t._v(" "),a("h3",{attrs:{id:"rn-不支持的属性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rn-不支持的属性"}},[t._v("#")]),t._v(" RN 不支持的属性")]),t._v(" "),a("p",[t._v("若设置以下不支持的属性会被 mpx 编译处理时丢弃，有编译 error 提示")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("描述")]),t._v(" "),a("th",[t._v("不支持的属性")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("双端都不支持")]),t._v(" "),a("td",[t._v("box-sizing white-space text-overflow animation transition")])]),t._v(" "),a("tr",[a("td",[t._v("ios 不支持")]),t._v(" "),a("td",[t._v("vertical-align")])]),t._v(" "),a("tr",[a("td",[t._v("android 不支持")]),t._v(" "),a("td",[t._v("text-decoration-style text-decoration-color shadow-offset shadow-opacity shadow-radius")])])])]),t._v(" "),a("h3",{attrs:{id:"rn-支持的枚举值"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rn-支持的枚举值"}},[t._v("#")]),t._v(" RN 支持的枚举值")]),t._v(" "),a("p",[t._v("RN 支持的枚举值映射如下表，其他不支持的枚举值会被 mpx 编译处理时丢弃，设置无效")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("prop")]),t._v(" "),a("th",[t._v("value 枚举")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("overflow")]),t._v(" "),a("td",[t._v("visible hidden scroll")])]),t._v(" "),a("tr",[a("td",[t._v("border-style")]),t._v(" "),a("td",[t._v("solid dotted dashed")])]),t._v(" "),a("tr",[a("td",[t._v("display")]),t._v(" "),a("td",[t._v("flex none")])]),t._v(" "),a("tr",[a("td",[t._v("pointer-events")]),t._v(" "),a("td",[t._v("auto none")])]),t._v(" "),a("tr",[a("td",[t._v("position")]),t._v(" "),a("td",[t._v("relative absolute")])]),t._v(" "),a("tr",[a("td",[t._v("vertical-align")]),t._v(" "),a("td",[t._v("auto top bottom center")])]),t._v(" "),a("tr",[a("td",[t._v("font-variant")]),t._v(" "),a("td",[t._v("small-caps oldstyle-nums lining-nums tabular-nums proportional-nums")])]),t._v(" "),a("tr",[a("td",[t._v("text-align")]),t._v(" "),a("td",[t._v("left right center justify")])]),t._v(" "),a("tr",[a("td",[t._v("font-style")]),t._v(" "),a("td",[t._v("normal italic")])]),t._v(" "),a("tr",[a("td",[t._v("font-weight")]),t._v(" "),a("td",[t._v("normal bold 100-900")])]),t._v(" "),a("tr",[a("td",[t._v("text-decoration-line")]),t._v(" "),a("td",[t._v("none underline line-through 'underline line-through'")])]),t._v(" "),a("tr",[a("td",[t._v("text-transform")]),t._v(" "),a("td",[t._v("none uppercase lowercase capitalize")])]),t._v(" "),a("tr",[a("td",[t._v("user-select")]),t._v(" "),a("td",[t._v("auto text none contain all")])]),t._v(" "),a("tr",[a("td",[t._v("align-content")]),t._v(" "),a("td",[t._v("flex-start flex-end none center stretch space-between space-around")])]),t._v(" "),a("tr",[a("td",[t._v("align-items")]),t._v(" "),a("td",[t._v("flex-start flex-end center stretch baseline")])]),t._v(" "),a("tr",[a("td",[t._v("align-self")]),t._v(" "),a("td",[t._v("auto flex-start flex-end center stretch baseline")])]),t._v(" "),a("tr",[a("td",[t._v("justify-content")]),t._v(" "),a("td",[t._v("flex-start flex-end center space-between space-around space-evenly none")])]),t._v(" "),a("tr",[a("td",[t._v("background-repeat")]),t._v(" "),a("td",[t._v("no-repeat")])])])]),t._v(" "),a("h3",{attrs:{id:"缩写支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#缩写支持"}},[t._v("#")]),t._v(" 缩写支持")]),t._v(" "),a("p",[t._v("RN 仅支持部分常用的缩写形式，具体参加下表：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("缩写属性")]),t._v(" "),a("th",[t._v("支持的缩写格式")]),t._v(" "),a("th",[t._v("备注")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("text-decoration")]),t._v(" "),a("td",[t._v("仅支持 text-decoration-line text-decoration-style text-decoration-color")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值")])]),t._v(" "),a("tr",[a("td",[t._v("margin")]),t._v(" "),a("td",[t._v("margin: 0;margin: 0 auto;margin: 0 auto 10px;margin: 0 10px 10px 20px;")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("padding")]),t._v(" "),a("td",[t._v("padding: 0;padding: 0 auto;padding: 0 auto 10px;padding: 0 10px 10px 20px;")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("text-shadow")]),t._v(" "),a("td",[t._v("仅支持 offset-x offset-y blur-radius color 排序")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值")])]),t._v(" "),a("tr",[a("td",[t._v("border")]),t._v(" "),a("td",[t._v("仅支持 border-width border-style border-color")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值")])]),t._v(" "),a("tr",[a("td",[t._v("box-shadow")]),t._v(" "),a("td",[t._v("仅支持 offset-x offset-y blur-radius color")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值")])]),t._v(" "),a("tr",[a("td",[t._v("flex")]),t._v(" "),a("td",[t._v("仅支持 flex-grow flex-shrink flex-basis")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值")])]),t._v(" "),a("tr",[a("td",[t._v("flex-flow")]),t._v(" "),a("td",[t._v("仅支持 flex-direction flex-wrap")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值")])]),t._v(" "),a("tr",[a("td",[t._v("border-radius")]),t._v(" "),a("td",[t._v("支持 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值；当设置 border-radius: 0 相当于同时设置了4个方向")])]),t._v(" "),a("tr",[a("td",[t._v("background")]),t._v(" "),a("td",[t._v("仅支持 background-image  background-color background-repeat")]),t._v(" "),a("td",[t._v("顺序不固定，具体每个属性的支持情况参见上面具体属性支持的文档；")])])])])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/119.312e4c21.js b/docs-vuepress/.vuepress/dist/assets/js/119.312e4c21.js
new file mode 100644
index 0000000000..5177fdf955
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/119.312e4c21.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[119],{468:function(t,v,_){"use strict";_.r(v);var e=_(4),a=Object(e.a)({},(function(){var t=this,v=t._self._c;return v("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[v("h1",{attrs:{id:"mpx转rn模版使用指南"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#mpx转rn模版使用指南"}},[t._v("#")]),t._v(" Mpx转RN模版使用指南")]),t._v(" "),v("h2",{attrs:{id:"模版指令"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#模版指令"}},[t._v("#")]),t._v(" 模版指令")]),t._v(" "),v("p",[t._v("目前 Mpx 输出 React Native 仅支持以下指令，具体使用范围可参考如下文档")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("指令名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("wx:if")]),t._v(" "),v("td",[t._v("根据表达式的值的来有条件地渲染元素")])]),t._v(" "),v("tr",[v("td",[t._v("wx:elif")]),t._v(" "),v("td",[t._v("根据表达式的值的来有条件地渲染元素，前一兄弟元素必须有 wx:if 或 wx:elif")])]),t._v(" "),v("tr",[v("td",[t._v("wx:else")]),t._v(" "),v("td",[t._v("不需要表达式，前一兄弟元素必须有 wx:if 或 wx:elif")])]),t._v(" "),v("tr",[v("td",[t._v("wx:show")]),t._v(" "),v("td",[t._v("根据表达式的值的来有条件地渲染元素，与 wx:if 所不同的是不会移除节点，而是设置节点的 style 为 display: none")])]),t._v(" "),v("tr",[v("td",[t._v("wx:style")]),t._v(" "),v("td",[t._v("动态绑定 style 样式")])]),t._v(" "),v("tr",[v("td",[t._v("wx:class")]),t._v(" "),v("td",[t._v("动态绑定 class 样式")])]),t._v(" "),v("tr",[v("td",[t._v("wx:for")]),t._v(" "),v("td",[t._v("在组件上使用 wx:for 绑定一个数组，即可使数组中各项的数据重复渲染该组件")])]),t._v(" "),v("tr",[v("td",[t._v("wx:for-item")]),t._v(" "),v("td",[t._v("指定数组当前元素的变量名")])]),t._v(" "),v("tr",[v("td",[t._v("wx:for-index")]),t._v(" "),v("td",[t._v("指定数组当前下标的变量名")])]),t._v(" "),v("tr",[v("td",[t._v("wx:key")]),t._v(" "),v("td",[t._v("指定列表中项目的唯一的标识符")])]),t._v(" "),v("tr",[v("td",[t._v("wx:ref")]),t._v(" "),v("td",[t._v("获取节点信息")])]),t._v(" "),v("tr",[v("td",[t._v("mpxTagName")]),t._v(" "),v("td",[t._v("动态转换标签")])]),t._v(" "),v("tr",[v("td",[t._v("component")]),t._v(" "),v("td",[t._v("使用 component is 动态切换组件")])]),t._v(" "),v("tr",[v("td",[t._v("@mode")]),t._v(" "),v("td",[t._v("使用 @ 符号来指定某个节点或属性只在某些平台下有效")])]),t._v(" "),v("tr",[v("td",[t._v("@_mode")]),t._v(" "),v("td",[t._v("隐式属性条件编译，仅控制节点的展示，保留节点属性的平台转换能力")])]),t._v(" "),v("tr",[v("td",[t._v("@env")]),t._v(" "),v("td",[t._v("自定义 env 目标应用，来实现在不同应用下编译产出不同的代码")])])])]),t._v(" "),v("h2",{attrs:{id:"事件编写"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#事件编写"}},[t._v("#")]),t._v(" 事件编写")]),t._v(" "),v("p",[t._v("目前 Mpx 输出 React Native 的事件编写遵循小程序的事件编写规范，支持事件的冒泡及捕获")]),t._v(" "),v("p",[t._v("普通事件绑定")]),t._v(" "),v("div",{staticClass:"language-js extra-class"},[v("pre",{pre:!0,attrs:{class:"language-js"}},[v("code",[v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view bindtap"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap"')]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    Click here"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("\n"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),v("p",[t._v("绑定并阻止事件冒泡")]),t._v(" "),v("div",{staticClass:"language-js extra-class"},[v("pre",{pre:!0,attrs:{class:"language-js"}},[v("code",[v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view catchtap"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap"')]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    Click here"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("\n"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),v("p",[t._v("事件捕获")]),t._v(" "),v("div",{staticClass:"language-js extra-class"},[v("pre",{pre:!0,attrs:{class:"language-js"}},[v("code",[v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view capture"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("bind"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("touchstart"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap1"')]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  outer view\n  "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view capture"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("bind"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("touchstart"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap2"')]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    inner view\n  "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),v("p",[t._v("中断捕获阶段和取消冒泡阶段")]),t._v(" "),v("div",{staticClass:"language-js extra-class"},[v("pre",{pre:!0,attrs:{class:"language-js"}},[v("code",[v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view capture"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("catch"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("touchstart"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap1"')]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  outer view\n"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n")])])]),v("p",[t._v("在此基础上也新增了事件处理内联传参的增强机制。")]),t._v(" "),v("div",{staticClass:"language-html extra-class"},[v("pre",{pre:!0,attrs:{class:"language-html"}},[v("code",[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--Mpx增强语法，模板内联传参，方便简洁--\x3e")]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),v("span",{pre:!0,attrs:{class:"token attr-value"}},[v("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTapInline('b')"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("b"),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),v("span",{pre:!0,attrs:{class:"token script"}},[v("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),v("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接通过参数获取数据，直观方便")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTapInline")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("name")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),v("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name:'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n")])]),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),v("p",[t._v("除此之外，Mpx 也支持了动态事件绑定")]),t._v(" "),v("div",{staticClass:"language-html extra-class"},[v("pre",{pre:!0,attrs:{class:"language-html"}},[v("code",[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--动态事件绑定--\x3e")]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token attr-name"}},[v("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),v("span",{pre:!0,attrs:{class:"token attr-value"}},[v("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{items}}"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),v("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),v("span",{pre:!0,attrs:{class:"token attr-value"}},[v("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap_{{index}}"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{item}}\n"),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),v("span",{pre:!0,attrs:{class:"token script"}},[v("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" data "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 1'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 2'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 3'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 4'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_0")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),v("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 1'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_1")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),v("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 2'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_2")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),v("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 3'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_3")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),v("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 4'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),v("p",[t._v("注意事项：")]),t._v(" "),v("p",[t._v("当同一个元素上同时绑定了 catchtap 和 bindtap 事件时:")]),t._v(" "),v("p",[t._v("两个事件都会被触发执行。\n但是是否阻止事件冒泡的行为,会以模板上第一个绑定的事件标识符为准。\n如果第一个绑定的是 catchtap，那么不管后面绑定的是什么,都会阻止事件冒泡。\n如果第一个绑定的是 bindtap，则不会阻止事件冒泡。")]),t._v(" "),v("p",[t._v("同理,如果同一个元素上绑定了 capture-bind:tap 和 bindtap:")]),t._v(" "),v("p",[t._v("事件的执行时机会根据模板上第一个绑定事件的标识符来决定:\n如果第一个绑定的是 capture-bind:tap，则事件会在捕获阶段触发。\n如果第一个绑定的是 bindtap，则事件会在冒泡阶段触发。")]),t._v(" "),v("h2",{attrs:{id:"基础组件"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#基础组件"}},[t._v("#")]),t._v(" 基础组件")]),t._v(" "),v("p",[t._v("目前 Mpx 输出 React Native 仅支持以下组件，具体使用范围可参考如下文档")]),t._v(" "),v("h3",{attrs:{id:"view"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#view"}},[t._v("#")]),t._v(" view")]),t._v(" "),v("p",[t._v("视图容器。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("hover-class")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定按下去的样式类。")])]),t._v(" "),v("tr",[v("td",[t._v("hover-start-time")]),t._v(" "),v("td",[t._v("number")]),t._v(" "),v("td",[t._v("50")]),t._v(" "),v("td",[t._v("按住后多久出现点击态，单位毫秒")])]),t._v(" "),v("tr",[v("td",[t._v("hover-stay-time")]),t._v(" "),v("td",[t._v("number")]),t._v(" "),v("td",[t._v("400")]),t._v(" "),v("td",[t._v("手指松开后点击态保留时间，单位毫秒")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindtap")]),t._v(" "),v("td",[t._v("点击的时候触发")])])])]),t._v(" "),v("h3",{attrs:{id:"text"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#text"}},[t._v("#")]),t._v(" text")]),t._v(" "),v("p",[t._v("文本。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("user-select")]),t._v(" "),v("td",[t._v("boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("文本是否可选。")])]),t._v(" "),v("tr",[v("td",[t._v("disable-default-style")]),t._v(" "),v("td",[t._v("boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("会内置默认样式，比如fontSize为16。设置"),v("code",[t._v("true")]),t._v("可以禁止默认的内置样式。")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindtap")]),t._v(" "),v("td",[t._v("点击的时候触发")])])])]),t._v(" "),v("p",[t._v("注意事项")]),t._v(" "),v("ol",[v("li",[t._v("未包裹 text 标签的文本，会自动包裹 text 标签。")]),t._v(" "),v("li",[t._v("text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段")])]),t._v(" "),v("h3",{attrs:{id:"image"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#image"}},[t._v("#")]),t._v(" image")]),t._v(" "),v("p",[t._v("图片。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("src")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("图片资源地址，支持本地图片资源及 base64 格式数据，暂不支持 svg 格式")])]),t._v(" "),v("tr",[v("td",[t._v("mode")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("scaleToFill")])]),t._v(" "),v("td",[t._v("图片裁剪、缩放的模式，适配微信 image 所有 mode 格式")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("binderror")]),t._v(" "),v("td",[t._v("当错误发生时触发，event.detail = { errMsg }")])]),t._v(" "),v("tr",[v("td",[t._v("bindload")]),t._v(" "),v("td",[t._v("当图片载入完毕时触发，event.detail = { height, width }")])])])]),t._v(" "),v("p",[t._v("注意事项")]),t._v(" "),v("ol",[v("li",[t._v("image 组件默认宽度320px、高度240px")]),t._v(" "),v("li",[t._v("image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分")])]),t._v(" "),v("h3",{attrs:{id:"input"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[t._v("#")]),t._v(" input")]),t._v(" "),v("p",[t._v("输入框。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("输入框的初始内容")])]),t._v(" "),v("tr",[v("td",[t._v("type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("text")])]),t._v(" "),v("td",[t._v("input 的类型，不支持 "),v("code",[t._v("safe-password")]),t._v("、"),v("code",[t._v("nickname")])])]),t._v(" "),v("tr",[v("td",[t._v("password")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否是密码类型")])]),t._v(" "),v("tr",[v("td",[t._v("placeholder")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("输入框为空时占位符")])]),t._v(" "),v("tr",[v("td",[t._v("placeholder-class")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定 placeholder 的样式类，仅支持 color 属性")])]),t._v(" "),v("tr",[v("td",[t._v("placeholder-style")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定 placeholder 的样式，仅支持 color 属性")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否禁用")])]),t._v(" "),v("tr",[v("td",[t._v("maxlength")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("140")])]),t._v(" "),v("td",[t._v("最大输入长度，设置为 -1 的时候不限制最大长度")])]),t._v(" "),v("tr",[v("td",[t._v("auto-focus")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("(即将废弃，请直接使用 focus )自动聚焦，拉起键盘")])]),t._v(" "),v("tr",[v("td",[t._v("focus")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("获取焦点")])]),t._v(" "),v("tr",[v("td",[t._v("confirm-type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("done")])]),t._v(" "),v("td",[t._v("设置键盘右下角按钮的文字，仅在 type='text' 时生效")])]),t._v(" "),v("tr",[v("td",[t._v("confirm-hold")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("点击键盘右下角按钮时是否保持键盘不收起")])]),t._v(" "),v("tr",[v("td",[t._v("cursor")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定 focus 时的光标位置")])]),t._v(" "),v("tr",[v("td",[t._v("cursor-color")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("光标颜色")])]),t._v(" "),v("tr",[v("td",[t._v("selection-start")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("-1")])]),t._v(" "),v("td",[t._v("光标起始位置，自动聚集时有效，需与 selection-end 搭配使用")])]),t._v(" "),v("tr",[v("td",[t._v("selection-end")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("-1")])]),t._v(" "),v("td",[t._v("光标结束位置，自动聚集时有效，需与 selection-start 搭配使用")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindinput")]),t._v(" "),v("td",[t._v("键盘输入时触发，event.detail = { value, cursor }，不支持 "),v("code",[t._v("keyCode")])])]),t._v(" "),v("tr",[v("td",[t._v("bindfocus")]),t._v(" "),v("td",[t._v("输入框聚焦时触发，event.detail = { value }，不支持 "),v("code",[t._v("height")])])]),t._v(" "),v("tr",[v("td",[t._v("bindblur")]),t._v(" "),v("td",[t._v("输入框失去焦点时触发，event.detail = { value }，不支持 "),v("code",[t._v("encryptedValue")]),t._v("、"),v("code",[t._v("encryptError")])])]),t._v(" "),v("tr",[v("td",[t._v("bindconfirm")]),t._v(" "),v("td",[t._v("点击完成按钮时触发，event.detail = { value }")])]),t._v(" "),v("tr",[v("td",[t._v("bind:selectionchange")]),t._v(" "),v("td",[t._v("选区改变事件, event.detail = { selectionStart, selectionEnd }")])])])]),t._v(" "),v("p",[t._v("方法")]),t._v(" "),v("p",[t._v("可通过 "),v("code",[t._v("ref")]),t._v(" 方式调用以下组件实例方法")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("方法名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("focus")]),t._v(" "),v("td",[t._v("使输入框得到焦点")])]),t._v(" "),v("tr",[v("td",[t._v("blur")]),t._v(" "),v("td",[t._v("使输入框失去焦点")])]),t._v(" "),v("tr",[v("td",[t._v("clear")]),t._v(" "),v("td",[t._v("清空输入框的内容")])]),t._v(" "),v("tr",[v("td",[t._v("isFocused")]),t._v(" "),v("td",[t._v("返回值表明当前输入框是否获得了焦点")])])])]),t._v(" "),v("h3",{attrs:{id:"textarea"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#textarea"}},[t._v("#")]),t._v(" textarea")]),t._v(" "),v("p",[t._v("多行输入框。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("输入框内容")])]),t._v(" "),v("tr",[v("td",[t._v("type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("text")])]),t._v(" "),v("td",[t._v("input 的类型，不支持 "),v("code",[t._v("safe-password")]),t._v("、"),v("code",[t._v("nickname")])])]),t._v(" "),v("tr",[v("td",[t._v("placeholder")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("输入框为空时占位符")])]),t._v(" "),v("tr",[v("td",[t._v("placeholder-class")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定 placeholder 的样式类，仅支持 color 属性")])]),t._v(" "),v("tr",[v("td",[t._v("placeholder-style")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定 placeholder 的样式，仅支持 color 属性")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否禁用")])]),t._v(" "),v("tr",[v("td",[t._v("maxlength")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("140")])]),t._v(" "),v("td",[t._v("最大输入长度，设置为 -1 的时候不限制最大长度")])]),t._v(" "),v("tr",[v("td",[t._v("auto-focus")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("(即将废弃，请直接使用 focus )自动聚焦，拉起键盘")])]),t._v(" "),v("tr",[v("td",[t._v("focus")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("获取焦点")])]),t._v(" "),v("tr",[v("td",[t._v("auto-height")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否自动增高，设置 auto-height 时，style.height不生效")])]),t._v(" "),v("tr",[v("td",[t._v("confirm-type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("done")])]),t._v(" "),v("td",[t._v("设置键盘右下角按钮的文字，不支持 "),v("code",[t._v("return")])])]),t._v(" "),v("tr",[v("td",[t._v("confirm-hold")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("点击键盘右下角按钮时是否保持键盘不收起")])]),t._v(" "),v("tr",[v("td",[t._v("cursor")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定 focus 时的光标位置")])]),t._v(" "),v("tr",[v("td",[t._v("cursor-color")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("光标颜色")])]),t._v(" "),v("tr",[v("td",[t._v("selection-start")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("-1")])]),t._v(" "),v("td",[t._v("光标起始位置，自动聚集时有效，需与 selection-end 搭配使用")])]),t._v(" "),v("tr",[v("td",[t._v("selection-end")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("-1")])]),t._v(" "),v("td",[t._v("光标结束位置，自动聚集时有效，需与 selection-start 搭配使用")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindinput")]),t._v(" "),v("td",[t._v("键盘输入时触发，event.detail = { value, cursor }，不支持 "),v("code",[t._v("keyCode")])])]),t._v(" "),v("tr",[v("td",[t._v("bindfocus")]),t._v(" "),v("td",[t._v("输入框聚焦时触发，event.detail = { value }，不支持 "),v("code",[t._v("height")])])]),t._v(" "),v("tr",[v("td",[t._v("bindblur")]),t._v(" "),v("td",[t._v("输入框失去焦点时触发，event.detail = { value }，不支持 "),v("code",[t._v("encryptedValue")]),t._v("、"),v("code",[t._v("encryptError")])])]),t._v(" "),v("tr",[v("td",[t._v("bindconfirm")]),t._v(" "),v("td",[t._v("点击完成按钮时触发，event.detail = { value }")])]),t._v(" "),v("tr",[v("td",[t._v("bindlinechange")]),t._v(" "),v("td",[t._v("输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 "),v("code",[t._v("heightRpx")])])]),t._v(" "),v("tr",[v("td",[t._v("bind:selectionchange")]),t._v(" "),v("td",[t._v("选区改变事件, {selectionStart, selectionEnd}")])])])]),t._v(" "),v("p",[t._v("方法")]),t._v(" "),v("p",[t._v("可通过 "),v("code",[t._v("ref")]),t._v(" 方式调用以下组件实例方法")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("方法名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("focus")]),t._v(" "),v("td",[t._v("使输入框得到焦点")])]),t._v(" "),v("tr",[v("td",[t._v("blur")]),t._v(" "),v("td",[t._v("使输入框失去焦点")])]),t._v(" "),v("tr",[v("td",[t._v("clear")]),t._v(" "),v("td",[t._v("清空输入框的内容")])]),t._v(" "),v("tr",[v("td",[t._v("isFocused")]),t._v(" "),v("td",[t._v("返回值表明当前输入框是否获得了焦点")])])])]),t._v(" "),v("h3",{attrs:{id:"button"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#button"}},[t._v("#")]),t._v(" button")]),t._v(" "),v("p",[t._v("按钮。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("size")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("default")])]),t._v(" "),v("td",[t._v("按钮的大小")])]),t._v(" "),v("tr",[v("td",[t._v("type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("default")])]),t._v(" "),v("td",[t._v("按钮的样式类型")])]),t._v(" "),v("tr",[v("td",[t._v("plain")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("按钮是否镂空，背景色透明")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否禁用")])]),t._v(" "),v("tr",[v("td",[t._v("loading")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("名称前是否带 loading 图标")])]),t._v(" "),v("tr",[v("td",[t._v("open-type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("微信开放能力，当前仅支持 "),v("code",[t._v("share")])])]),t._v(" "),v("tr",[v("td",[t._v("hover-class")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v('指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果')])]),t._v(" "),v("tr",[v("td",[t._v("hover-start-time")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("20")])]),t._v(" "),v("td",[t._v("按住后多久出现点击态，单位毫秒")])]),t._v(" "),v("tr",[v("td",[t._v("hover-stay-time")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("70")])]),t._v(" "),v("td",[t._v("手指松开后点击态保留时间，单位毫秒")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("h3",{attrs:{id:"scroll-view"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#scroll-view"}},[t._v("#")]),t._v(" scroll-view")]),t._v(" "),v("p",[t._v("可滚动视图区域。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("scroll-x")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("允许横向滚动动")])]),t._v(" "),v("tr",[v("td",[t._v("scroll-y")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("允许纵向滚动")])]),t._v(" "),v("tr",[v("td",[t._v("upper-threshold")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("50")])]),t._v(" "),v("td",[t._v("距顶部/左边多远时(单位 px),触发 scrolltoupper 事件")])]),t._v(" "),v("tr",[v("td",[t._v("lower-threshold")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("50")])]),t._v(" "),v("td",[t._v("距底部/右边多远时(单位 px),触发 scrolltolower 事件")])]),t._v(" "),v("tr",[v("td",[t._v("scroll-top")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("0")])]),t._v(" "),v("td",[t._v("设置纵向滚动条位置")])]),t._v(" "),v("tr",[v("td",[t._v("scroll-left")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("0")])]),t._v(" "),v("td",[t._v("设置横向滚动条位置")])]),t._v(" "),v("tr",[v("td",[t._v("scroll-with-animation")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("在设置滚动条位置时使用动画过渡")])]),t._v(" "),v("tr",[v("td",[t._v("enable-back-to-top")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("点击状态栏的时候视图会滚动到顶部")])]),t._v(" "),v("tr",[v("td",[t._v("enhanced")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("scroll-view 组件功能增强")])]),t._v(" "),v("tr",[v("td",[t._v("refresher-enabled")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("开启自定义下拉刷新")])]),t._v(" "),v("tr",[v("td",[t._v("scroll-anchoring")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("开启滚动区域滚动锚点")])]),t._v(" "),v("tr",[v("td",[t._v("refresher-default-style")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("'black'")])]),t._v(" "),v("td",[t._v("设置下拉刷新默认样式,支持 "),v("code",[t._v("black")]),t._v("、"),v("code",[t._v("white")]),t._v("、"),v("code",[t._v("none")]),t._v("，仅安卓支持")])]),t._v(" "),v("tr",[v("td",[t._v("refresher-background")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("'#fff'")])]),t._v(" "),v("td",[t._v("设置自定义下拉刷新背景颜色，仅安卓支持")])]),t._v(" "),v("tr",[v("td",[t._v("refresher-triggered")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置当前下拉刷新状态,true 表示已触发")])]),t._v(" "),v("tr",[v("td",[t._v("paging-enabled")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置")])]),t._v(" "),v("tr",[v("td",[t._v("show-scrollbar")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("true")])]),t._v(" "),v("td",[t._v("滚动条显隐控制 (同时开启 enhanced 属性后生效)")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("binddragstart")]),t._v(" "),v("td",[t._v("滑动开始事件，同时开启 enhanced 属性后生效")])]),t._v(" "),v("tr",[v("td",[t._v("binddragging")]),t._v(" "),v("td",[t._v("滑动事件，同时开启 enhanced 属性后生效")])]),t._v(" "),v("tr",[v("td",[t._v("binddragend")]),t._v(" "),v("td",[t._v("滑动结束事件，同时开启 enhanced 属性后生效")])]),t._v(" "),v("tr",[v("td",[t._v("bindscrolltoupper")]),t._v(" "),v("td",[t._v("滚动到顶部/左边触发")])]),t._v(" "),v("tr",[v("td",[t._v("bindscrolltolower")]),t._v(" "),v("td",[t._v("滚动到底部/右边触发")])]),t._v(" "),v("tr",[v("td",[t._v("bindscroll")]),t._v(" "),v("td",[t._v("滚动时触发")])]),t._v(" "),v("tr",[v("td",[t._v("bindrefresherrefresh")]),t._v(" "),v("td",[t._v("自定义下拉刷新被触发")])])])]),t._v(" "),v("p",[t._v("注意事项")]),t._v(" "),v("ol",[v("li",[t._v('目前不支持自定义下拉刷新节点，使用 slot="refresher" 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来')])]),t._v(" "),v("h3",{attrs:{id:"swiper"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#swiper"}},[t._v("#")]),t._v(" swiper")]),t._v(" "),v("p",[t._v("滑块视图容器。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("indicator-dots")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否显示面板指示点")])]),t._v(" "),v("tr",[v("td",[t._v("indicator-color")]),t._v(" "),v("td",[t._v("color")]),t._v(" "),v("td",[v("code",[t._v("rgba(0, 0, 0, .3)")])]),t._v(" "),v("td",[t._v("指示点颜色")])]),t._v(" "),v("tr",[v("td",[t._v("indicator-active-color")]),t._v(" "),v("td",[t._v("color")]),t._v(" "),v("td",[v("code",[t._v("#000000")])]),t._v(" "),v("td",[t._v("当前选中的指示点颜色")])]),t._v(" "),v("tr",[v("td",[t._v("autoplay")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否自动切换")])]),t._v(" "),v("tr",[v("td",[t._v("current")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("0")])]),t._v(" "),v("td",[t._v("当前所在滑块的 index")])]),t._v(" "),v("tr",[v("td",[t._v("interval")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("5000")])]),t._v(" "),v("td",[t._v("自动切换时间间隔")])]),t._v(" "),v("tr",[v("td",[t._v("duration")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("500")])]),t._v(" "),v("td",[t._v("滑动动画时长")])]),t._v(" "),v("tr",[v("td",[t._v("circular")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否采用衔接滑动")])]),t._v(" "),v("tr",[v("td",[t._v("vertical")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("滑动方向是否为纵向")])]),t._v(" "),v("tr",[v("td",[t._v("previous-margin")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("0")])]),t._v(" "),v("td",[t._v("前边距，可用于露出前一项的一小部分，接受px")])]),t._v(" "),v("tr",[v("td",[t._v("next-margin")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("0")])]),t._v(" "),v("td",[t._v("后边距，可用于露出后一项的一小部分，接受px")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindchange")]),t._v(" "),v("td",[t._v("current 改变时会触发 change 事件，event.detail = {current, source}")])])])]),t._v(" "),v("h3",{attrs:{id:"swiper-item"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#swiper-item"}},[t._v("#")]),t._v(" swiper-item")]),t._v(" "),v("ol",[v("li",[t._v("仅可放置在swiper组件中，宽高自动设置为100%。")])]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("item-id")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("无")])]),t._v(" "),v("td",[t._v("该 swiper-item 的标识符")])])])]),t._v(" "),v("h3",{attrs:{id:"checkbox"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#checkbox"}},[t._v("#")]),t._v(" checkbox")]),t._v(" "),v("p",[t._v("多选项目")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("是否禁用")])]),t._v(" "),v("tr",[v("td",[t._v("checked")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("当前是否选中，可用来设置默认选中")])]),t._v(" "),v("tr",[v("td",[t._v("color")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[t._v("#09BB07")]),t._v(" "),v("td",[t._v("checkbox的颜色，同css的color")])])])]),t._v(" "),v("h3",{attrs:{id:"checkbox-group"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group"}},[t._v("#")]),t._v(" checkbox-group")]),t._v(" "),v("p",[t._v("多项选择器，内部由多个checkbox组成。")]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindchange")]),t._v(" "),v("td",[t._v("checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }")])])])]),t._v(" "),v("h3",{attrs:{id:"radio"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#radio"}},[t._v("#")]),t._v(" radio")]),t._v(" "),v("p",[t._v("单选项目")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("radio 标识，当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("是否禁用")])]),t._v(" "),v("tr",[v("td",[t._v("checked")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("当前是否选中，可用来设置默认选中")])]),t._v(" "),v("tr",[v("td",[t._v("color")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[t._v("#09BB07")]),t._v(" "),v("td",[t._v("checkbox 的颜色，同 css 的 color")])])])]),t._v(" "),v("h3",{attrs:{id:"radio-group"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#radio-group"}},[t._v("#")]),t._v(" radio-group")]),t._v(" "),v("p",[t._v("单项选择器，内部由多个 radio 组成")]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindchange")]),t._v(" "),v("td",[t._v("radio-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 radio 的 value 的数组 ] }")])])])]),t._v(" "),v("h3",{attrs:{id:"label"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#label"}},[t._v("#")]),t._v(" label")]),t._v(" "),v("p",[t._v("用来改进表单组件的可用性")]),t._v(" "),v("p",[t._v("注意事项")]),t._v(" "),v("ol",[v("li",[t._v("当前不支持使用 for 属性找到对应 id，仅支持将控件放在该标签内，目前可以绑定的空间有：checkbox、radio、switch。")])]),t._v(" "),v("h3",{attrs:{id:"icon"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#icon"}},[t._v("#")]),t._v(" icon")]),t._v(" "),v("p",[t._v("图标组件")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("icon 的类型，有效值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear")])]),t._v(" "),v("tr",[v("td",[t._v("size")]),t._v(" "),v("td",[t._v("String | Number")]),t._v(" "),v("td",[t._v("23")]),t._v(" "),v("td",[t._v("icon 的大小")])]),t._v(" "),v("tr",[v("td",[t._v("color")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("icon 的颜色，同 css 的 color")])])])]),t._v(" "),v("h3",{attrs:{id:"movable-area"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#movable-area"}},[t._v("#")]),t._v(" movable-area")]),t._v(" "),v("p",[t._v("movable-view的可移动区域。")]),t._v(" "),v("p",[t._v("注意事项")]),t._v(" "),v("ol",[v("li",[t._v("movable-area不支持设置 scale-area，缩放手势生效区域仅在 movable-view 内")])]),t._v(" "),v("h3",{attrs:{id:"movable-view"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#movable-view"}},[t._v("#")]),t._v(" movable-view")]),t._v(" "),v("p",[t._v("可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("direction")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[t._v("none")]),t._v(" "),v("td",[t._v("目前支持 all、vertical、horizontal、none｜")])]),t._v(" "),v("tr",[v("td",[t._v("x")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("定义x轴方向的偏移")])]),t._v(" "),v("tr",[v("td",[t._v("y")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("定义y轴方向的偏移")])]),t._v(" "),v("tr",[v("td",[t._v("friction")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[t._v("7")]),t._v(" "),v("td",[t._v("摩擦系数")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("boolean")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("是否禁用")])]),t._v(" "),v("tr",[v("td",[t._v("scale")]),t._v(" "),v("td",[t._v("boolean")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("是否支持双指缩放")])]),t._v(" "),v("tr",[v("td",[t._v("scale-min")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[t._v("0.1")]),t._v(" "),v("td",[t._v("定义缩放倍数最小值")])]),t._v(" "),v("tr",[v("td",[t._v("scale-max")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[t._v("10")]),t._v(" "),v("td",[t._v("定义缩放倍数最大值")])]),t._v(" "),v("tr",[v("td",[t._v("scale-value")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[t._v("1")]),t._v(" "),v("td",[t._v("定义缩放倍数，取值范围为 0.1 - 10")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindchange")]),t._v(" "),v("td",[t._v("拖动过程中触发的事件，event.detail = {x, y, source}")])]),t._v(" "),v("tr",[v("td",[t._v("bindscale")]),t._v(" "),v("td",[t._v("缩放过程中触发的事件，event.detail = {x, y, scale}")])]),t._v(" "),v("tr",[v("td",[t._v("htouchmove")]),t._v(" "),v("td",[t._v("初次手指触摸后移动为横向的移动时触发")])]),t._v(" "),v("tr",[v("td",[t._v("vtouchmove")]),t._v(" "),v("td",[t._v("初次手指触摸后移动为纵向的移动时触发")])])])]),t._v(" "),v("h3",{attrs:{id:"form"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#form"}},[t._v("#")]),t._v(" form")]),t._v(" "),v("p",[t._v("表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。")]),t._v(" "),v("p",[t._v("当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。")]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindsubmit")]),t._v(" "),v("td",[t._v("携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} }")])]),t._v(" "),v("tr",[v("td",[t._v("bindreset")]),t._v(" "),v("td",[t._v("表单重置时会触发 reset 事件")])])])]),t._v(" "),v("h3",{attrs:{id:"cover-view"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#cover-view"}},[t._v("#")]),t._v(" cover-view")]),t._v(" "),v("p",[t._v("视图容器。\n功能同 view 组件")]),t._v(" "),v("h3",{attrs:{id:"cover-image"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#cover-image"}},[t._v("#")]),t._v(" cover-image")]),t._v(" "),v("p",[t._v("视图容器。\n功能同 image 组件\n| bindchange      | 滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）|")]),t._v(" "),v("h3",{attrs:{id:"picker-view"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#picker-view"}},[t._v("#")]),t._v(" picker-view")]),t._v(" "),v("p",[t._v("嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("Array[number]")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindchange")]),t._v(" "),v("td",[t._v("checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }")])])])]),t._v(" "),v("h3",{attrs:{id:"picker-view-column"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#picker-view-column"}},[t._v("#")]),t._v(" picker-view-column")]),t._v(" "),v("p",[t._v("滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致")]),t._v(" "),v("h3",{attrs:{id:"picker"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#picker"}},[t._v("#")]),t._v(" picker")]),t._v(" "),v("p",[t._v("从底部弹起的滚动选择器。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("mode")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("selector")])]),t._v(" "),v("td",[t._v("选择器类型")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否禁用")])])])]),t._v(" "),v("p",[t._v("公共事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindcancel")]),t._v(" "),v("td",[t._v("取消选择时触发")])]),t._v(" "),v("tr",[v("td",[t._v("bindchange")]),t._v(" "),v("td",[t._v("滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）")])])])]),t._v(" "),v("h4",{attrs:{id:"普通选择器-mode-selector"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#普通选择器-mode-selector"}},[t._v("#")]),t._v(" 普通选择器：mode = selector")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("range")]),t._v(" "),v("td",[t._v("array[object]/array")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v("mode 为 selector 或 multiSelector 时，range 有效")])]),t._v(" "),v("tr",[v("td",[t._v("range-key")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容")])]),t._v(" "),v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("number")]),t._v(" "),v("td",[t._v("0")]),t._v(" "),v("td",[t._v("表示选择了 range 中的第几个（下标从 0 开始）")])])])]),t._v(" "),v("h4",{attrs:{id:"多列选择器-mode-multiselector"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#多列选择器-mode-multiselector"}},[t._v("#")]),t._v(" 多列选择器：mode = multiSelector")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("range")]),t._v(" "),v("td",[t._v("array[object]/array")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v("mode 为 selector 或 multiSelector 时，range 有效")])]),t._v(" "),v("tr",[v("td",[t._v("range-key")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容")])]),t._v(" "),v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("array")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v("表示选择了 range 中的第几个（下标从 0 开始）")])]),t._v(" "),v("tr",[v("td",[t._v("bindcolumnchange")]),t._v(" "),v("td"),t._v(" "),v("td"),t._v(" "),v("td",[t._v("列改变时触发")])])])]),t._v(" "),v("h4",{attrs:{id:"多列选择器-时间选择器-mode-time"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#多列选择器-时间选择器-mode-time"}},[t._v("#")]),t._v(" 多列选择器：时间选择器：mode = time")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v('表示选中的时间，格式为"hh:mm"')])]),t._v(" "),v("tr",[v("td",[t._v("start")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v('表示有效时间范围的开始，字符串格式为"hh:mm"')])]),t._v(" "),v("tr",[v("td",[t._v("end")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v('表示有效时间范围的结束，字符串格式为"hh:mm"')])])])]),t._v(" "),v("h4",{attrs:{id:"多列选择器-时间选择器-mode-date"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#多列选择器-时间选择器-mode-date"}},[t._v("#")]),t._v(" 多列选择器：时间选择器：mode = date")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("当天")])]),t._v(" "),v("td",[t._v('表示选中的日期，格式为"YYYY-MM-DD"')])]),t._v(" "),v("tr",[v("td",[t._v("start")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v('表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"')])]),t._v(" "),v("tr",[v("td",[t._v("end")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v('表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"')])]),t._v(" "),v("tr",[v("td",[t._v("fields")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("day")])]),t._v(" "),v("td",[t._v("有效值 year,month,day，表示选择器的粒度")])])])]),t._v(" "),v("h4",{attrs:{id:"fields-有效值"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#fields-有效值"}},[t._v("#")]),t._v(" fields 有效值：")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("year")]),t._v(" "),v("td",[t._v("选择器粒度为年")])]),t._v(" "),v("tr",[v("td",[t._v("month")]),t._v(" "),v("td",[t._v("选择器粒度为月份")])]),t._v(" "),v("tr",[v("td",[t._v("day")]),t._v(" "),v("td",[t._v("选择器粒度为天")])])])]),t._v(" "),v("h3",{attrs:{id:"省市区选择器：mode-region"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#省市区选择器：mode-region"}},[t._v("#")]),t._v(" 省市区选择器：mode = region")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("array")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v("表示选中的省市区，默认选中每一列的第一个值")])]),t._v(" "),v("tr",[v("td",[t._v("custom-item")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("可为每一列的顶部添加一个自定义的项")])]),t._v(" "),v("tr",[v("td",[t._v("level")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("region")])]),t._v(" "),v("td",[t._v("选择器层级")])])])]),t._v(" "),v("h4",{attrs:{id:"level-有效值"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#level-有效值"}},[t._v("#")]),t._v(" level 有效值：")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("province")]),t._v(" "),v("td",[t._v("选省级选择器")])]),t._v(" "),v("tr",[v("td",[t._v("city")]),t._v(" "),v("td",[t._v("市级选择器")])]),t._v(" "),v("tr",[v("td",[t._v("region")]),t._v(" "),v("td",[t._v("区级选择器")])])])])])}),[],!1,null,null,null);v.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/12.4d7217be.js b/docs-vuepress/.vuepress/dist/assets/js/12.4d7217be.js
new file mode 100644
index 0000000000..31955d11a9
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/12.4d7217be.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{376:function(t,e,s){"use strict";s.r(e);const o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."];var n={methods:{getMsg:()=>o[Math.floor(Math.random()*o.length)]}},h=s(4),i=Object(h.a)(n,(function(){var t=this._self._c;return t("div",{staticClass:"theme-container"},[t("div",{staticClass:"theme-default-content"},[t("h1",[this._v("404")]),this._v(" "),t("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),t("RouterLink",{attrs:{to:"/"}},[this._v("\n      Take me home.\n    ")])],1)])}),[],!1,null,null,null);e.default=i.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/120.7a6b4035.js b/docs-vuepress/.vuepress/dist/assets/js/120.7a6b4035.js
new file mode 100644
index 0000000000..7bcb88f145
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/120.7a6b4035.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[120],{372:function(n,e,t){"use strict";t.r(e),t.d(e,"register",(function(){return o})),t.d(e,"unregister",(function(){return c}));var r;function o(n,e){void 0===e&&(e={});var t=e.registrationOptions;void 0===t&&(t={}),delete e.registrationOptions;var o=function(n){for(var t=[],r=arguments.length-1;r-- >0;)t[r]=arguments[r+1];e&&e[n]&&e[n].apply(e,t)};"serviceWorker"in navigator&&r.then((function(){Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/))?(!function(n,e,t){fetch(n).then((function(r){404===r.status?(e("error",new Error("Service worker not found at "+n)),c()):-1===r.headers.get("content-type").indexOf("javascript")?(e("error",new Error("Expected "+n+" to have javascript content-type, but received "+r.headers.get("content-type"))),c()):a(n,e,t)})).catch((function(n){return i(e,n)}))}(n,o,t),navigator.serviceWorker.ready.then((function(n){o("ready",n)})).catch((function(n){return i(o,n)}))):(a(n,o,t),navigator.serviceWorker.ready.then((function(n){o("ready",n)})).catch((function(n){return i(o,n)})))}))}function i(n,e){navigator.onLine||n("offline"),n("error",e)}function a(n,e,t){navigator.serviceWorker.register(n,t).then((function(n){e("registered",n),n.waiting?e("updated",n):n.onupdatefound=function(){e("updatefound",n);var t=n.installing;t.onstatechange=function(){"installed"===t.state&&(navigator.serviceWorker.controller?e("updated",n):e("cached",n))}}})).catch((function(n){return i(e,n)}))}function c(){"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(n){n.unregister()})).catch((function(n){return i(emit,n)}))}"undefined"!=typeof window&&(r="undefined"!=typeof Promise?new Promise((function(n){return window.addEventListener("load",n)})):{then:function(n){return window.addEventListener("load",n)}})}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/14.7377c68f.js b/docs-vuepress/.vuepress/dist/assets/js/14.7377c68f.js
new file mode 100644
index 0000000000..2d1ca55dd8
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/14.7377c68f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[14,19,22],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return u})),n.d(e,"g",(function(){return c})),n.d(e,"h",(function(){return l})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return h})),n.d(e,"c",(function(){return v})),n.d(e,"j",(function(){return m}));n(69),n(10),n(19),n(48),n(30);const r=/#.*$/,i=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(r,"").replace(i,"")}function u(t){return s.test(t)}function c(t){return/^mailto:/.test(t)}function l(t){return/^tel:/.test(t)}function p(t){if(u(t))return t;const e=t.match(r),n=e?e[0]:"",i=o(t);return a.test(i)?t:i+".html"+n}function f(t,e){const n=decodeURIComponent(t.hash),i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function d(t,e,n){if(u(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;t<a.length;t++){const e=a[t];".."===e?i.pop():"."!==e&&i.push(e)}""!==i[0]&&i.unshift("");return i.join("/")}(e,n));const r=o(e);for(let e=0;e<t.length;e++)if(o(t[e].regularPath)===r)return Object.assign({},t[e],{type:"page",path:p(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function h(t,e,n,r){const{pages:i,themeConfig:a}=n,s=r&&a.locales&&a.locales[r]||a;if("auto"===(t.frontmatter.sidebar||s.sidebar||a.sidebar))return g(t);const o=s.sidebar||a.sidebar;if(o){const{base:n,config:r}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,o);return"auto"===r?g(t):r?r.map(t=>function t(e,n,r,i=1){if("string"==typeof e)return d(n,e,r);if(Array.isArray(e))return Object.assign(d(n,e[0],r),{title:e[1]});{const a=e.children||[];return 0===a.length&&e.path?Object.assign(d(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(t,i,n)):[]}return[]}function g(t){const e=v(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function v(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},295:function(t,e){t.exports=function(t){return null==t}},298:function(t,e,n){},299:function(t,e,n){},307:function(t,e,n){"use strict";n(298)},308:function(t,e,n){var r=n(27),i=n(15),a=n(22);t.exports=function(t){return"string"==typeof t||!i(t)&&a(t)&&"[object String]"==r(t)}},309:function(t,e,n){"use strict";n(299)},310:function(t,e,n){},323:function(t,e,n){"use strict";n.r(e);var r=n(295),i=n.n(r),a=n(290),s={name:"PageEdit",computed:{lastUpdated(){return this.$page.lastUpdated},lastUpdatedText(){return"string"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:"string"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:"Last Updated"},editLink(){const t=i()(this.$page.frontmatter.editLink)?this.$site.themeConfig.editLinks:this.$page.frontmatter.editLink,{repo:e,docsDir:n="",docsBranch:r="master",docsRepo:a=e}=this.$site.themeConfig;return t&&a&&this.$page.relativePath?this.createEditLink(e,a,n,r,this.$page.relativePath):null},editLinkText(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||"Edit this page"}},methods:{createEditLink(t,e,n,r,i){if(/bitbucket.org/.test(e)){return e.replace(a.a,"")+"/src"+`/${r}/`+(n?n.replace(a.a,"")+"/":"")+i+`?mode=edit&spa=0&at=${r}&fileviewer=file-view-default`}if(/gitlab.com/.test(e)){return e.replace(a.a,"")+"/-/edit"+`/${r}/`+(n?n.replace(a.a,"")+"/":"")+i}return(a.i.test(e)?e:"https://github.com/"+e).replace(a.a,"")+"/edit"+`/${r}/`+(n?n.replace(a.a,"")+"/":"")+i}}},o=(n(307),n(4)),u=Object(o.a)(s,(function(){var t=this,e=t._self._c;return e("footer",{staticClass:"page-edit"},[t.editLink?e("div",{staticClass:"edit-link"},[e("a",{attrs:{href:t.editLink,target:"_blank",rel:"noopener noreferrer"}},[t._v(t._s(t.editLinkText))]),t._v(" "),e("OutboundLink")],1):t._e(),t._v(" "),t.lastUpdated?e("div",{staticClass:"last-updated"},[e("span",{staticClass:"prefix"},[t._v(t._s(t.lastUpdatedText)+":")]),t._v(" "),e("span",{staticClass:"time"},[t._v(t._s(t.lastUpdated))])]):t._e()])}),[],!1,null,null,null);e.default=u.exports},324:function(t,e,n){"use strict";n.r(e);n(69);var r=n(290),i=n(308),a=n.n(i),s=n(295),o=n.n(s),u={name:"PageNav",props:["sidebarItems"],computed:{prev(){return l(c.PREV,this)},next(){return l(c.NEXT,this)}}};const c={NEXT:{resolveLink:function(t,e){return p(t,e,1)},getThemeLinkConfig:({nextLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.next},PREV:{resolveLink:function(t,e){return p(t,e,-1)},getThemeLinkConfig:({prevLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.prev}};function l(t,{$themeConfig:e,$page:n,$route:i,$site:s,sidebarItems:u}){const{resolveLink:c,getThemeLinkConfig:l,getPageLinkConfig:p}=t,f=l(e),d=p(n),h=o()(d)?f:d;return!1===h?void 0:a()(h)?Object(r.k)(s.pages,h,i.path):c(n,u)}function p(t,e,n){const r=[];!function t(e,n){for(let r=0,i=e.length;r<i;r++)"group"===e[r].type?t(e[r].children||[],n):n.push(e[r])}(e,r);for(let e=0;e<r.length;e++){const i=r[e];if("page"===i.type&&i.path===decodeURIComponent(t.path))return r[e+n]}}var f=u,d=(n(309),n(4)),h=Object(d.a)(f,(function(){var t=this,e=t._self._c;return t.prev||t.next?e("div",{staticClass:"page-nav"},[e("p",{staticClass:"inner"},[t.prev?e("span",{staticClass:"prev"},[t._v("\n      ←\n      "),"external"===t.prev.type?e("a",{staticClass:"prev",attrs:{href:t.prev.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n\n        "),e("OutboundLink")],1):e("RouterLink",{staticClass:"prev",attrs:{to:t.prev.path}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n      ")])],1):t._e(),t._v(" "),t.next?e("span",{staticClass:"next"},["external"===t.next.type?e("a",{attrs:{href:t.next.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n\n        "),e("OutboundLink")],1):e("RouterLink",{attrs:{to:t.next.path}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n      ")]),t._v("\n      →\n    ")],1):t._e()])]):t._e()}),[],!1,null,null,null);e.default=h.exports},330:function(t,e,n){"use strict";n(310)},350:function(t,e,n){"use strict";n.r(e);var r=n(323),i=n(324),a={components:{PageEdit:r.default,PageNav:i.default},props:["sidebarItems"]},s=(n(330),n(4)),o=Object(s.a)(a,(function(){var t=this._self._c;return t("main",{staticClass:"page"},[this._t("top"),this._v(" "),t("Content",{staticClass:"theme-default-content"}),this._v(" "),t("PageEdit"),this._v(" "),t("PageNav",this._b({},"PageNav",{sidebarItems:this.sidebarItems},!1)),this._v(" "),this._t("bottom")],2)}),[],!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/15.6f885a83.js b/docs-vuepress/.vuepress/dist/assets/js/15.6f885a83.js
new file mode 100644
index 0000000000..d169bb8c06
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/15.6f885a83.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[15,16,31,34],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return a})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return h})),n.d(e,"k",(function(){return f})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return b})),n.d(e,"j",(function(){return g}));n(69),n(10),n(19),n(48),n(30);const i=/#.*$/,r=/\.(md|html)$/,s=/\/$/,a=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function l(t){return a.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function p(t){if(l(t))return t;const e=t.match(i),n=e?e[0]:"",r=o(t);return s.test(r)?t:r+".html"+n}function h(t,e){const n=decodeURIComponent(t.hash),r=function(t){const e=t.match(i);if(e)return e[0]}(e);if(r&&n!==r)return!1;return o(t.path)===o(e)}function f(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const r=e.split("/");n&&r[r.length-1]||r.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t<s.length;t++){const e=s[t];".."===e?r.pop():"."!==e&&r.push(e)}""!==r[0]&&r.unshift("");return r.join("/")}(e,n));const i=o(e);for(let e=0;e<t.length;e++)if(o(t[e].regularPath)===i)return Object.assign({},t[e],{type:"page",path:p(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function d(t,e,n,i){const{pages:r,themeConfig:s}=n,a=i&&s.locales&&s.locales[i]||s;if("auto"===(t.frontmatter.sidebar||a.sidebar||s.sidebar))return m(t);const o=a.sidebar||s.sidebar;if(o){const{base:n,config:i}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,o);return"auto"===i?m(t):i?i.map(t=>function t(e,n,i,r=1){if("string"==typeof e)return f(n,e,i);if(Array.isArray(e))return Object.assign(f(n,e[0],i),{title:e[1]});{const s=e.children||[];return 0===s.length&&e.path?Object.assign(f(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:s.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(t,r,n)):[]}return[]}function m(t){const e=b(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function b(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},291:function(t,e,n){},293:function(t,e,n){"use strict";n.r(e);n(10),n(47);var i=n(290),r={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},s=n(4),a=Object(s.a)(r,(function(){var t=this,e=t._self._c;return t.isInternal?e("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?e("OutboundLink"):t._e()],1)}),[],!1,null,null,null);e.default=a.exports},294:function(t,e,n){"use strict";n(291)},296:function(t,e,n){"use strict";n.r(e);var i={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},r=(n(294),n(4)),s=Object(r.a)(i,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},297:function(t,e,n){},304:function(t,e,n){"use strict";n(297)},306:function(t,e,n){},322:function(t,e,n){"use strict";n.r(e);var i=n(293),r=n(296),s=n(127),a=n.n(s),o={name:"DropdownLink",components:{NavLink:i.default,DropdownTransition:r.default},props:{item:{required:!0}},data:()=>({open:!1}),computed:{dropdownAriaLabel(){return this.item.ariaLabel||this.item.text}},watch:{$route(){this.open=!1}},methods:{setOpen(t){this.open=t},isLastItemOfArray:(t,e)=>a()(e)===t,handleDropdown(){0===event.detail&&this.setOpen(!this.open)}}},l=(n(304),n(4)),u=Object(l.a)(o,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow down"})]),t._v(" "),e("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,i){return e("li",{key:n.link||i,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v("\n          "+t._s(n.text)+"\n        ")]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(i){return e("li",{key:i.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:i},on:{focusout:function(e){t.isLastItemOfArray(i,n.items)&&t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0):e("NavLink",{attrs:{item:n},on:{focusout:function(e){t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=u.exports},329:function(t,e,n){"use strict";n(306)},349:function(t,e,n){"use strict";n.r(e);n(10),n(30),n(47);var i=n(322),r=n(290),s={name:"NavLinks",components:{NavLink:n(293).default,DropdownLink:i.default},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,i=this.$site.themeConfig.locales||{},r={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(t).map(r=>{const s=t[r],a=i[r]&&i[r].label||s.lang;let o;return s.lang===this.$lang?o=e:(o=e.replace(this.$localeConfig.path,r),n.some(t=>t.path===o)||(o=r)),{text:a,link:o}})};return[...this.userNav,r]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(r.j)(t),{items:(t.items||[]).map(r.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;return t?/^https?:/.test(t)?t:"https://github.com/"+t:null},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n<e.length;n++){const i=e[n];if(new RegExp(i,"i").test(t))return i}return"Source"}}},a=(n(329),n(4)),o=Object(a.a)(s,(function(){var t=this,e=t._self._c;return t.userLinks.length||t.repoLink?e("nav",{staticClass:"nav-links"},[t._l(t.userLinks,(function(t){return e("div",{key:t.link,staticClass:"nav-item"},["links"===t.type?e("DropdownLink",{attrs:{item:t}}):e("NavLink",{attrs:{item:t}})],1)})),t._v(" "),t.repoLink?e("a",{staticClass:"repo-link",attrs:{href:t.repoLink,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n    "+t._s(t.repoLabel)+"\n    "),e("OutboundLink")],1):t._e()],2):t._e()}),[],!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/16.974f551e.js b/docs-vuepress/.vuepress/dist/assets/js/16.974f551e.js
new file mode 100644
index 0000000000..49aa880ad2
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/16.974f551e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[16,31,34],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return o})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return h})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return b})),n.d(e,"j",(function(){return g}));n(69),n(10),n(19),n(48),n(30);const i=/#.*$/,r=/\.(md|html)$/,s=/\/$/,o=/^[a-z]+:/i;function a(t){return decodeURI(t).replace(i,"").replace(r,"")}function l(t){return o.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function p(t){if(l(t))return t;const e=t.match(i),n=e?e[0]:"",r=a(t);return s.test(r)?t:r+".html"+n}function f(t,e){const n=decodeURIComponent(t.hash),r=function(t){const e=t.match(i);if(e)return e[0]}(e);if(r&&n!==r)return!1;return a(t.path)===a(e)}function h(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const r=e.split("/");n&&r[r.length-1]||r.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t<s.length;t++){const e=s[t];".."===e?r.pop():"."!==e&&r.push(e)}""!==r[0]&&r.unshift("");return r.join("/")}(e,n));const i=a(e);for(let e=0;e<t.length;e++)if(a(t[e].regularPath)===i)return Object.assign({},t[e],{type:"page",path:p(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function d(t,e,n,i){const{pages:r,themeConfig:s}=n,o=i&&s.locales&&s.locales[i]||s;if("auto"===(t.frontmatter.sidebar||o.sidebar||s.sidebar))return m(t);const a=o.sidebar||s.sidebar;if(a){const{base:n,config:i}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,a);return"auto"===i?m(t):i?i.map(t=>function t(e,n,i,r=1){if("string"==typeof e)return h(n,e,i);if(Array.isArray(e))return Object.assign(h(n,e[0],i),{title:e[1]});{const s=e.children||[];return 0===s.length&&e.path?Object.assign(h(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:s.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(t,r,n)):[]}return[]}function m(t){const e=b(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function b(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},291:function(t,e,n){},293:function(t,e,n){"use strict";n.r(e);n(10),n(47);var i=n(290),r={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},s=n(4),o=Object(s.a)(r,(function(){var t=this,e=t._self._c;return t.isInternal?e("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?e("OutboundLink"):t._e()],1)}),[],!1,null,null,null);e.default=o.exports},294:function(t,e,n){"use strict";n(291)},296:function(t,e,n){"use strict";n.r(e);var i={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},r=(n(294),n(4)),s=Object(r.a)(i,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},297:function(t,e,n){},304:function(t,e,n){"use strict";n(297)},322:function(t,e,n){"use strict";n.r(e);var i=n(293),r=n(296),s=n(127),o=n.n(s),a={name:"DropdownLink",components:{NavLink:i.default,DropdownTransition:r.default},props:{item:{required:!0}},data:()=>({open:!1}),computed:{dropdownAriaLabel(){return this.item.ariaLabel||this.item.text}},watch:{$route(){this.open=!1}},methods:{setOpen(t){this.open=t},isLastItemOfArray:(t,e)=>o()(e)===t,handleDropdown(){0===event.detail&&this.setOpen(!this.open)}}},l=(n(304),n(4)),u=Object(l.a)(a,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow down"})]),t._v(" "),e("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,i){return e("li",{key:n.link||i,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v("\n          "+t._s(n.text)+"\n        ")]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(i){return e("li",{key:i.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:i},on:{focusout:function(e){t.isLastItemOfArray(i,n.items)&&t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0):e("NavLink",{attrs:{item:n},on:{focusout:function(e){t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=u.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/17.e94e6745.js b/docs-vuepress/.vuepress/dist/assets/js/17.e94e6745.js
new file mode 100644
index 0000000000..41e3c15915
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/17.e94e6745.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[17,25],{292:function(t,e,s){},302:function(t,e,s){"use strict";s(292)},303:function(t,e,s){"use strict";s.r(e);var i={props:{code:{type:String,default:""},title:{type:String,default:""}},data:()=>({isShow:!1,isClick:!1}),methods:{handleEnter(){this.isShow=!0},handleLeave(){this.isShow=!1},handleToggle(){this.isClick=!this.isClick,this.isShow=this.isClick}}},a=(s(302),s(4)),o=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"popover"},[e("div",{staticClass:"popover__content",on:{click:t.handleToggle,mouseenter:t.handleEnter,mouseleave:t.handleLeave}},[t._t("default")],2),t._v(" "),e("div",{directives:[{name:"show",rawName:"v-show",value:t.isShow,expression:"isShow"}],staticClass:"popover__top"},[e("div",{staticClass:"popover__content"},[e("div",{staticClass:"popover__inner"},[t.code?e("img",{attrs:{width:"300",src:t.code,alt:"code",loading:"lazy"}}):t._e(),t._v(" "),t.title?e("div",[t._v(t._s(t.title))]):t._e()]),t._v(" "),e("div",{staticClass:"popover__arrow"})])])])}),[],!1,null,"8bac5638",null);e.default=o.exports},315:function(t,e,s){},332:function(t,e,s){"use strict";s(315)},351:function(t,e,s){"use strict";s.r(e);var i={components:{Popover:s(303).default},props:{dataList:{type:Array,default:()=>[]}},data:()=>({current:-1}),methods:{handleEnter(t){this.current=t},handleLeave(){this.current=-1}}},a=(s(332),s(4)),o=Object(a.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"code-list"},this._l(this.dataList,(function(e,s){return t("div",{key:s,staticClass:"code-list__item"},[t("img",{attrs:{width:"150",height:"170",src:e.code,alt:"code",loading:"lazy"}})])})),0)}),[],!1,null,"76bf3aa2",null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/18.b1f7a4a2.js b/docs-vuepress/.vuepress/dist/assets/js/18.b1f7a4a2.js
new file mode 100644
index 0000000000..b16793c50a
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/18.b1f7a4a2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[18,24],{301:function(t,e,s){},316:function(t,e,s){"use strict";s(301)},317:function(t,e,s){},326:function(t,e,s){"use strict";s.r(e);var i={props:{dataList:{type:Array,default:()=>[]},height:{type:Number,default:152},autoPlay:{type:Boolean,default:!0},currentIndex:{type:Number,default:0},dot:{type:Boolean,default:!1}},data:()=>({msg:"",current:0,resut:[],allWidth:0,timer:0,prevCls:"swiper-disable",nextCls:"",offsetWidth:0,isMove:!1,timeout:0}),computed:{getStyle(){return`height: ${this.height}px;`},getMode(){return this.isMove?"transition: transform 0s;":"transition: transform 0.3s;"},getWidth(){return`width: ${this.offsetWidth}px;`}},mounted(){this.$nextTick(()=>{const t=this.$refs.container;this.offsetWidth=t.offsetWidth,this.autoPlay&&this.animationScroll(),window.addEventListener("resize",()=>{this.offsetWidth=t.offsetWidth},!1)}),this.touchInfo={clientX:0,clientY:0,moveX:0}},watch:{current(t){this.prevCls=0===t?"swiper-disable":"",t===this.dataList.length-1?this.nextCls="swiper-disable":this.nextCls=""}},methods:{animationScroll(){clearInterval(this.timer),this.timer=setInterval(()=>{this.handleNext()},3e3)},handlePrev(t){const e=this.$refs.wrapper;this.current--,-1===this.current&&(this.current=0),e.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,"off"!==t&&this.$emit("change",this.current)},handleNext(t){const e=this.$refs.wrapper;e&&(this.current++,this.current===this.dataList.length&&(this.current=0),e.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,"off"!==t&&this.$emit("change",this.current))},handleSelect(t){clearInterval(this.timer),clearTimeout(this.timeout),this.current=t;this.$refs.wrapper.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,this.autoPlay&&(this.timeout=setTimeout(()=>{this.animationScroll()},3e3))},handleStart(t){clearInterval(this.timer),clearTimeout(this.timeout);const e=t.touches[0];this.touchInfo={clientX:e.clientX},this.isMove=!0},handleMove(t){const e=this.$refs.wrapper,s=t.touches[0].clientX-this.touchInfo.clientX,i=this.current*this.offsetWidth-s;e.style.transform=`translateX(${-i}px)`,this.touchInfo.moveX=s},handleEnd(){this.isMove=!1;const t=this.touchInfo.moveX||0;let e=0;e=Math.abs(t)<20?0:t<0?this.current===this.dataList.length-1?0:1:0===this.current?0:-1;const s=this.$refs.wrapper;switch(e){case 0:s.style.transform=`translateX(${-this.current*this.offsetWidth}px)`;break;case 1:this.handleNext();break;case-1:this.handlePrev()}this.touchInfo={},this.autoPlay&&(this.timeout=setTimeout(()=>{this.animationScroll()},3e3))}}},a=(s(316),s(4)),n=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("div",{ref:"container",staticClass:"swiper-container",style:t.getStyle},[e("div",{ref:"wrapper",staticClass:"swiper",style:t.getMode,on:{touchstart:t.handleStart,touchmove:t.handleMove,touchend:t.handleEnd}},t._l(t.dataList,(function(s,i){return e("div",{key:i,ref:"list",refInFor:!0,staticClass:"swiper-list",style:t.getWidth},[t._t("default",null,{item:s})],2)})),0),t._v(" "),t.dot?e("ul",{staticClass:"swiper-dot"},t._l(t.dataList,(function(s,i){return e("li",{key:i,staticClass:"swiper-icon",class:{active:t.current===i}})})),0):t._e()])}),[],!1,null,"ae3bb0ce",null);e.default=n.exports},333:function(t,e,s){"use strict";s(317)},352:function(t,e,s){"use strict";s.r(e);s(69);var i={components:{MobileSwiper:s(326).default},data:()=>({currentIndex:0,pageIndex:0,tempIndex:0}),computed:{list(){return this.$page.frontmatter.sixSection.details},multiList(){const t=this.$page.frontmatter.sevenSection.details,e=[];let s=[];for(let i=0;i<t.length;i++)i%4==0&&(s.length&&e.push(s),s=[]),s.push(t[i]);return s.length&&e.push(s),e},mvcList(){return this.$page.frontmatter.threeSection.list},dataList(){return this.$page.frontmatter.sevenSection.details}},methods:{handleChange(t){this.currentIndex=t>3?t%4:t,t>2&&(t%4==0&&t>this.tempIndex&&(this.$refs.multiPage.handleNext("off"),this.currentIndex=0),(t+1)%4==0&&t<this.tempIndex&&(this.$refs.multiPage.handlePrev("off"),this.currentIndex=3)),this.tempIndex=t},handleSelect(t){let e=4*this.pageIndex+t;this.tempIndex=e,this.currentIndex=t,this.$refs.multiImg.handleSelect(e)},handlePage(t){this.pageIndex=t,this.handleSelect(0)}}},a=(s(333),s(4)),n=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"m-banner-wrapper"},[e("div",{staticClass:"m-banner"},[e("div",{staticClass:"m-title"},[t._v(t._s(t.$page.frontmatter.heroText))]),t._v(" "),e("div",{staticClass:"m-subtitle"},[t._v("\n      "+t._s(t.$page.frontmatter.tagline)+"\n    ")]),t._v(" "),e("div",{staticClass:"m-banner-btn-wrapper"},[e("button",{staticClass:"m-banner-btn m-banner-btn-enter"},[e("a",{staticStyle:{"font-size":"15px"},attrs:{href:t.$page.frontmatter.actionLink}},[t._v("\n          "+t._s(t.$page.frontmatter.actionText)+"\n        ")])]),t._v(" "),e("div",{staticClass:"m-banner-btn m-banner-btn-jump"},[e("a",{staticClass:"white-link",attrs:{href:t.$page.frontmatter.githubLink}},[t._v("\n          "+t._s(t.$page.frontmatter.githubText)+"\n        ")])])]),t._v(" "),e("div",{staticClass:"m-banner-bg"})]),t._v(" "),e("div",{staticClass:"m-advantages"},t._l(t.$page.frontmatter.features,(function(s,i){return e("li",{key:i,staticClass:"m-advan-section"},[e("img",{staticClass:"m-advan-section-img",attrs:{src:s.micon,loading:"lazy",width:"34",height:"34"}}),t._v(" "),e("p",{staticClass:"m-advan-section-title"},[t._v(t._s(s.title))])])})),0),t._v(" "),e("div",{staticClass:"mdemo-wrapper"},[e("div",{staticClass:"mdemo-title"},[t._v(t._s(t.$page.frontmatter.threeSection.title))]),t._v(" "),t._m(0),t._v(" "),e("div",{staticClass:"mdemo-icon-wrapper"},t._l(t.mvcList,(function(t,s){return e("div",{key:s,staticStyle:{margin:"0 6px"}},[e("img",{attrs:{width:"130",height:"150",src:t.code,alt:"code",loading:"lazy"}})])})),0)]),t._v(" "),e("div",{staticClass:"m-feature-wrapper"},[e("div",{staticClass:"m-feature-title"},[t._v("\n      "+t._s(t.$page.frontmatter.fourSection.title)+"\n    ")]),t._v(" "),e("div",{staticClass:"m-feature-subtitle"},[t._v("\n      "+t._s(t.$page.frontmatter.fourSection.details)+"\n    ")]),t._v(" "),e("a",{staticClass:"m-feature-btn",attrs:{href:t.$page.frontmatter.fourSection.actionLink}},[t._v("\n      "+t._s(t.$page.frontmatter.fourSection.actionText)+"\n    ")]),t._v(" "),e("img",{staticClass:"m-feature-pic",attrs:{width:"100%",height:"309px",src:t.$page.frontmatter.fourSection.mimg,alt:"platform",loading:"lazy"}}),t._v(" "),e("div",{staticClass:"m-feature-title"},[t._v("\n      "+t._s(t.$page.frontmatter.fiveSection.title)+"\n    ")]),t._v(" "),e("div",{staticClass:"m-feature-subtitle"},[t._v("\n      "+t._s(t.$page.frontmatter.fiveSection.details)+"\n    ")]),t._v(" "),e("a",{staticClass:"m-feature-btn",attrs:{href:t.$page.frontmatter.fourSection.actionLink}},[t._v("\n      "+t._s(t.$page.frontmatter.fiveSection.actionText)+"\n    ")]),t._v(" "),e("img",{staticClass:"m-feature-pic",attrs:{width:"100%",height:"309px",src:t.$page.frontmatter.fiveSection.mimg,alt:"platform",loading:"lazy"}})]),t._v(" "),e("div",{staticClass:"m-util-wrapper"},[e("div",{staticClass:"m-util-title"},[t._v(t._s(t.$page.frontmatter.sixSection.title))]),t._v(" "),t._l(t.list,(function(s,i){return e("ul",{key:i,staticClass:"row six-section__row"},[e("a",{staticClass:"six-section__item six-section__step",attrs:{href:s.actionLink}},[e("img",{staticClass:"six-section__icon",attrs:{src:s.icon,alt:"svg",loading:"lazy",width:"50",height:"50"}}),t._v(" "),e("div",{staticClass:"six-section__list"},[e("div",{staticClass:"six-section__bold"},[t._v(t._s(s.title))]),t._v(" "),e("div",{staticClass:"six-section__subtitle"},[t._v(t._s(s.details))])])])])}))],2),t._v(" "),e("div",{staticClass:"m-example-wrapper"},[e("div",{staticClass:"m-example-title"},[t._v(t._s(t.$page.frontmatter.sevenSection.title))]),t._v(" "),e("div",{staticClass:"m-example-phone"},[e("img",{attrs:{width:"318",height:"318",src:"https://dpubstatic.udache.com/static/dpubimg/xxjYvzgJdt/y_bg_phone.png",alt:"phone"}}),t._v(" "),e("div",{staticClass:"m-example-img-contain"},[e("mobile-swiper",{ref:"multiImg",attrs:{height:390,dataList:t.dataList},on:{change:t.handleChange},scopedSlots:t._u([{key:"default",fn:function(t){return[e("div",{staticClass:"m-example-swiper"},[e("img",{staticStyle:{"border-radius":"20px"},attrs:{width:"180",src:t.item.demo,alt:"demo"}})])]}}])})],1)]),t._v(" "),e("mobile-swiper",{ref:"multiPage",attrs:{height:200,dot:!0,autoPlay:!1,dataList:t.multiList},on:{change:t.handlePage},scopedSlots:t._u([{key:"default",fn:function(s){return[e("div",{staticClass:"m-example-swiper"},t._l(s.item,(function(s,i){return e("div",{key:i,staticClass:"m-example-name",class:{active:t.currentIndex===i},on:{click:function(e){return t.handleSelect(i)}}},[t._v("\n              "+t._s(s.title)+"\n            ")])})),0)]}}])})],1)])}),[function(){var t=this._self._c;return t("p",{staticClass:"mdemo-subtitle"},[this._v("\n      扫码体验Mpx版本的\n      "),t("a",{staticClass:"target-link",attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC"}},[this._v("todoMVC")]),this._v("\n      在各个小程序平台和web中的一致表现 ，更多示例项目可点击\n      "),t("a",{staticClass:"target-link",attrs:{href:"https://github.com/didi/mpx/tree/master/examples"}},[this._v("这里")]),this._v("\n      进入查看。\n    ")])}],!1,null,"a2c0041c",null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/19.62186e92.js b/docs-vuepress/.vuepress/dist/assets/js/19.62186e92.js
new file mode 100644
index 0000000000..0d4cb8914c
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/19.62186e92.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{290:function(t,n,e){"use strict";e.d(n,"d",(function(){return r})),e.d(n,"a",(function(){return o})),e.d(n,"i",(function(){return a})),e.d(n,"f",(function(){return u})),e.d(n,"g",(function(){return c})),e.d(n,"h",(function(){return p})),e.d(n,"b",(function(){return l})),e.d(n,"e",(function(){return f})),e.d(n,"k",(function(){return h})),e.d(n,"l",(function(){return d})),e.d(n,"c",(function(){return v})),e.d(n,"j",(function(){return b}));e(69),e(10),e(19),e(48),e(30);const r=/#.*$/,i=/\.(md|html)$/,o=/\/$/,a=/^[a-z]+:/i;function s(t){return decodeURI(t).replace(r,"").replace(i,"")}function u(t){return a.test(t)}function c(t){return/^mailto:/.test(t)}function p(t){return/^tel:/.test(t)}function l(t){if(u(t))return t;const n=t.match(r),e=n?n[0]:"",i=s(t);return o.test(i)?t:i+".html"+e}function f(t,n){const e=decodeURIComponent(t.hash),i=function(t){const n=t.match(r);if(n)return n[0]}(n);if(i&&e!==i)return!1;return s(t.path)===s(n)}function h(t,n,e){if(u(n))return{type:"external",path:n};e&&(n=function(t,n,e){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return n+t;const i=n.split("/");e&&i[i.length-1]||i.pop();const o=t.replace(/^\//,"").split("/");for(let t=0;t<o.length;t++){const n=o[t];".."===n?i.pop():"."!==n&&i.push(n)}""!==i[0]&&i.unshift("");return i.join("/")}(n,e));const r=s(n);for(let n=0;n<t.length;n++)if(s(t[n].regularPath)===r)return Object.assign({},t[n],{type:"page",path:l(t[n].path)});return console.error(`[vuepress] No matching page found for sidebar item "${n}"`),{}}function d(t,n,e,r){const{pages:i,themeConfig:o}=e,a=r&&o.locales&&o.locales[r]||o;if("auto"===(t.frontmatter.sidebar||a.sidebar||o.sidebar))return g(t);const s=a.sidebar||o.sidebar;if(s){const{base:e,config:r}=function(t,n){if(Array.isArray(n))return{base:"/",config:n};for(const r in n)if(0===(e=t,/(\.html|\/)$/.test(e)?e:e+"/").indexOf(encodeURI(r)))return{base:r,config:n[r]};var e;return{}}(n,s);return"auto"===r?g(t):r?r.map(t=>function t(n,e,r,i=1){if("string"==typeof n)return h(e,n,r);if(Array.isArray(n))return Object.assign(h(e,n[0],r),{title:n[1]});{const o=n.children||[];return 0===o.length&&n.path?Object.assign(h(e,n.path,r),{title:n.title}):{type:"group",path:n.path,title:n.title,sidebarDepth:n.sidebarDepth,initialOpenGroupIndex:n.initialOpenGroupIndex,children:o.map(n=>t(n,e,r,i+1)),collapsable:!1!==n.collapsable}}}(t,i,e)):[]}return[]}function g(t){const n=v(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:n.map(n=>({type:"auto",title:n.title,basePath:t.path,path:t.path+"#"+n.slug,children:n.children||[]}))}]}function v(t){let n;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?n=t:n&&(n.children||(n.children=[])).push(t)}),t.filter(t=>2===t.level)}function b(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},295:function(t,n){t.exports=function(t){return null==t}},299:function(t,n,e){},308:function(t,n,e){var r=e(27),i=e(15),o=e(22);t.exports=function(t){return"string"==typeof t||!i(t)&&o(t)&&"[object String]"==r(t)}},309:function(t,n,e){"use strict";e(299)},324:function(t,n,e){"use strict";e.r(n);e(69);var r=e(290),i=e(308),o=e.n(i),a=e(295),s=e.n(a),u={name:"PageNav",props:["sidebarItems"],computed:{prev(){return p(c.PREV,this)},next(){return p(c.NEXT,this)}}};const c={NEXT:{resolveLink:function(t,n){return l(t,n,1)},getThemeLinkConfig:({nextLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.next},PREV:{resolveLink:function(t,n){return l(t,n,-1)},getThemeLinkConfig:({prevLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.prev}};function p(t,{$themeConfig:n,$page:e,$route:i,$site:a,sidebarItems:u}){const{resolveLink:c,getThemeLinkConfig:p,getPageLinkConfig:l}=t,f=p(n),h=l(e),d=s()(h)?f:h;return!1===d?void 0:o()(d)?Object(r.k)(a.pages,d,i.path):c(e,u)}function l(t,n,e){const r=[];!function t(n,e){for(let r=0,i=n.length;r<i;r++)"group"===n[r].type?t(n[r].children||[],e):e.push(n[r])}(n,r);for(let n=0;n<r.length;n++){const i=r[n];if("page"===i.type&&i.path===decodeURIComponent(t.path))return r[n+e]}}var f=u,h=(e(309),e(4)),d=Object(h.a)(f,(function(){var t=this,n=t._self._c;return t.prev||t.next?n("div",{staticClass:"page-nav"},[n("p",{staticClass:"inner"},[t.prev?n("span",{staticClass:"prev"},[t._v("\n      ←\n      "),"external"===t.prev.type?n("a",{staticClass:"prev",attrs:{href:t.prev.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n\n        "),n("OutboundLink")],1):n("RouterLink",{staticClass:"prev",attrs:{to:t.prev.path}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n      ")])],1):t._e(),t._v(" "),t.next?n("span",{staticClass:"next"},["external"===t.next.type?n("a",{attrs:{href:t.next.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n\n        "),n("OutboundLink")],1):n("RouterLink",{attrs:{to:t.next.path}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n      ")]),t._v("\n      →\n    ")],1):t._e()])]):t._e()}),[],!1,null,null,null);n.default=d.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/2.314c65b9.js b/docs-vuepress/.vuepress/dist/assets/js/2.314c65b9.js
new file mode 100644
index 0000000000..2486bb7ec5
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/2.314c65b9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2,17,25,27,28],{292:function(t,s,i){},302:function(t,s,i){"use strict";i(292)},303:function(t,s,i){"use strict";i.r(s);var e={props:{code:{type:String,default:""},title:{type:String,default:""}},data:()=>({isShow:!1,isClick:!1}),methods:{handleEnter(){this.isShow=!0},handleLeave(){this.isShow=!1},handleToggle(){this.isClick=!this.isClick,this.isShow=this.isClick}}},a=(i(302),i(4)),n=Object(a.a)(e,(function(){var t=this,s=t._self._c;return s("div",{staticClass:"popover"},[s("div",{staticClass:"popover__content",on:{click:t.handleToggle,mouseenter:t.handleEnter,mouseleave:t.handleLeave}},[t._t("default")],2),t._v(" "),s("div",{directives:[{name:"show",rawName:"v-show",value:t.isShow,expression:"isShow"}],staticClass:"popover__top"},[s("div",{staticClass:"popover__content"},[s("div",{staticClass:"popover__inner"},[t.code?s("img",{attrs:{width:"300",src:t.code,alt:"code",loading:"lazy"}}):t._e(),t._v(" "),t.title?s("div",[t._v(t._s(t.title))]):t._e()]),t._v(" "),s("div",{staticClass:"popover__arrow"})])])])}),[],!1,null,"8bac5638",null);s.default=n.exports},315:function(t,s,i){},318:function(t,s,i){},319:function(t,s,i){},332:function(t,s,i){"use strict";i(315)},334:function(t,s,i){"use strict";i(318)},335:function(t,s,i){"use strict";i(319)},346:function(t,s,i){},351:function(t,s,i){"use strict";i.r(s);var e={components:{Popover:i(303).default},props:{dataList:{type:Array,default:()=>[]}},data:()=>({current:-1}),methods:{handleEnter(t){this.current=t},handleLeave(){this.current=-1}}},a=(i(332),i(4)),n=Object(a.a)(e,(function(){var t=this._self._c;return t("div",{staticClass:"code-list"},this._l(this.dataList,(function(s,i){return t("div",{key:i,staticClass:"code-list__item"},[t("img",{attrs:{width:"150",height:"170",src:s.code,alt:"code",loading:"lazy"}})])})),0)}),[],!1,null,"76bf3aa2",null);s.default=n.exports},353:function(t,s,i){"use strict";i.r(s);i(69);var e={props:{dataList:{type:Array,default:()=>[]}},data:()=>({msg:"",current:0,resut:[],allWidth:0,timer:0}),mounted(){this.$nextTick(()=>{const t=this.$refs.list;if(!t.length)return;const s=[];let i=0;for(let e=0;e<t.length;e++){const a=t[e];i+=a.offsetWidth,s.push({width:a.offsetWidth,left:a.offsetLeft})}this.wrapper=this.$refs.wrapper,this.resut=s,this.allWidth=i,this.handleClick(0)})},computed:{leftButtonDisabled(){return 0===this.current?"swiper-disable":""},rightButtonDisabled(){return this.current===this.dataList.length-1?"swiper-disable":""}},methods:{handlePrev(){this.current-1>-1&&(clearInterval(this.timer),this.handleClick(this.current-1))},handleNext(){this.current+1<this.dataList.length&&(clearInterval(this.timer),this.handleClick(this.current+1))},handleClick(t){this.current=t,this.$emit("change",t)},handleEnd(){const t=Math.floor(this.resut[this.current].left)-this.wrapper.scrollLeft,s=this.wrapper.scrollLeft,i=Math.floor(this.wrapper.offsetWidth/2)-Math.floor(this.resut[this.current].width/2),e=this.allWidth-this.wrapper.offsetWidth;let a=s+(t-i);a<0&&(a=0),a>e&&(a=e),this.allWidth>this.wrapper.offsetWidth&&s!==a&&this.animationScroll(a)},animationScroll(t){const s=this.allWidth-this.wrapper.offsetWidth,i=this.wrapper.scrollLeft,e=Math.floor(Math.abs((i-t)/200*20));let a=0;clearInterval(this.timer),this.timer=setInterval(()=>{if(a&&this.wrapper.scrollLeft!==a)return clearInterval(this.timer);if(t>i){const i=this.wrapper.scrollLeft+e;i>t||i>=s?(clearInterval(this.timer),this.wrapper.scrollLeft=t):(this.wrapper.scrollLeft=i,a=i)}else{const s=this.wrapper.scrollLeft-e;s<t||s<=0?(clearInterval(this.timer),this.wrapper.scrollLeft=t):(this.wrapper.scrollLeft=s,a=s)}},20)}}},a=(i(334),i(4)),n=Object(a.a)(e,(function(){var t=this,s=t._self._c;return s("div",{staticClass:"swiper-container"},[s("div",{staticClass:"swiper-button"},[s("img",{staticClass:"swiper-img",class:t.leftButtonDisabled,attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/0cgzDC8Apn/anli_icon_left.png",width:"50",height:"50",alt:"left",loading:"lazy"},on:{click:t.handlePrev}})]),t._v(" "),s("div",{ref:"wrapper",staticClass:"swiper"},t._l(t.dataList,(function(i,e){return s("div",{key:e,ref:"list",refInFor:!0,class:["swiper-list",t.current===e?"active":""],on:{click:function(s){return t.handleClick(e)},transitionend:t.handleEnd}},[s("div",{staticClass:"swiper-item"},[s("div",[s("div",[s("img",{attrs:{width:"80",height:"80",src:i.img,alt:"二维码",loading:"lazy"}})]),t._v(" "),s("div",[t._v(t._s(i.title))])])])])})),0),t._v(" "),s("div",{staticClass:"swiper-button"},[s("img",{staticClass:"swiper-img",class:t.rightButtonDisabled,attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/QhD6ulEP7k/anli_icon_right.png",width:"50",height:"50",alt:"right",loading:"lazy"},on:{click:t.handleNext}})])])}),[],!1,null,"5724bcdd",null);s.default=n.exports},354:function(t,s,i){"use strict";i.r(s);var e={props:{dataList:{type:Array,default:()=>[]},currentIndex:{type:Number,default:0}},data:()=>({translateX:0}),computed:{getStyle(){return{transform:`translate3d(${188*-this.currentIndex}px, 0, 0)`}}},watch:{currentIndex(t){}}},a=(i(335),i(4)),n=Object(a.a)(e,(function(){var t=this._self._c;return t("div",{staticClass:"swiper-img"},[t("div",{staticClass:"swiper-img__list",style:this.getStyle},this._l(this.dataList,(function(s,i){return t("div",{key:i,staticClass:"swiper-img__wrap"},[t("img",{attrs:{width:"188",height:"410",src:s.demo,alt:"img",loading:"lazy"}})])})),0)])}),[],!1,null,"60490726",null);s.default=n.exports},365:function(t,s,i){"use strict";i(346)},370:function(t,s,i){"use strict";i.r(s);i(69);var e=i(353),a=i(354),n=i(351),r={data:()=>({currentIndex:0}),computed:{list(){let t=[],s=this.$page.frontmatter.sixSection.details,i=[],e=0;for(;e<s.length;)e%3==0&&(i=[],t.push(i)),i.push(s[e]),e++;return t},dataList(){return this.$page.frontmatter.sevenSection.details},mvcList(){return this.$page.frontmatter.threeSection.list},currentTitle(){return this.dataList[this.currentIndex].title}},components:{Swiper:e.default,SwiperImg:a.default,CodeList:n.default},methods:{handleChange(t){this.currentIndex=t}}},c=(i(365),i(4)),l=Object(c.a)(r,(function(){var t=this,s=t._self._c;return s("div",{staticStyle:{position:"relative",overflow:"hidden","min-width":"950px",background:"#f5f5f5"}},[s("div",{staticClass:"one-section__img1"}),t._v(" "),s("div",{staticClass:"one-section__img2"}),t._v(" "),s("section",{staticClass:"one-section"},[s("div",{staticClass:"one-section__inner one-section__content"},[s("div",{staticStyle:{display:"inline-block"}},[s("h2",{staticClass:"one-section__title"},[t._v(t._s(t.$page.frontmatter.heroText))]),t._v(" "),s("p",{staticClass:"one-section__desc"},[t._v("\n            "+t._s(t.$page.frontmatter.tagline)+"\n          ")]),t._v(" "),s("button",{staticClass:"one-section__btn one-section__enter"},[s("a",{staticClass:"white-link",attrs:{href:t.$page.frontmatter.actionLink}},[t._v("\n              "+t._s(t.$page.frontmatter.actionText)+"\n            ")])]),t._v(" "),s("button",{staticClass:"one-section__btn one-section__github"},[s("a",{staticClass:"blue-link",attrs:{href:t.$page.frontmatter.githubLink,target:"_blank"}},[t._v("\n              "+t._s(t.$page.frontmatter.githubText)+"\n            ")])])])]),t._v(" "),s("div",{staticClass:"one-section__inner"})]),t._v(" "),s("section",{staticClass:"two-section"},[s("ul",{staticClass:"row"},t._l(t.$page.frontmatter.features,(function(i,e){return s("li",{key:e,staticClass:"two-section__item"},[s("img",{attrs:{src:i.icon,alt:"svg",loading:"lazy",width:"80",height:"80"}}),t._v(" "),s("p",{staticClass:"two-section__title"},[t._v(t._s(i.title))]),t._v(" "),s("p",{staticClass:"two-section__desc"},[t._v(t._s(i.details))]),t._v(" "),s("div",{staticClass:"two-section__line"})])})),0)]),t._v(" "),s("section",{staticClass:"three-section",style:{backgroundImage:`url(${t.$page.frontmatter.threeSection.bg})`}},[s("div",{staticClass:"three-section__inner"},[t._m(0),t._v(" "),s("div",{staticClass:"three-section__mvc"},[s("div",[s("span",{staticClass:"dot-inner",staticStyle:{background:"#fff",margin:"0 auto"}}),t._v(" "),s("p",{staticClass:"white-text title"},[t._v(t._s(t.$page.frontmatter.threeSection.title))]),t._v(" "),t._m(1)]),t._v(" "),s("code-list",{attrs:{dataList:t.mvcList}})],1)])]),t._v(" "),s("section",{staticClass:"section four-section"},[s("div",{staticClass:"grow four-section__bg",style:{backgroundImage:`url(${t.$page.frontmatter.fourSection.bg})`}}),t._v(" "),s("div",{staticClass:"four-section__inner"},[s("div",{staticClass:"grow",staticStyle:{position:"relative"}},[s("img",{attrs:{width:"412",src:t.$page.frontmatter.fourSection.img,alt:"svg",loading:"lazy"}})]),t._v(" "),s("div",{staticClass:"four-section__text grow"},[s("div",{staticStyle:{"margin-left":"86px"}},[s("div",[s("span",{staticClass:"dot-inner"}),t._v(" "),s("p",{staticClass:"title"},[t._v(t._s(t.$page.frontmatter.fourSection.title))]),t._v(" "),s("p",{staticClass:"desc"},[t._v("\n                "+t._s(t.$page.frontmatter.fourSection.details)+"\n              ")])]),t._v(" "),s("button",{staticClass:"btn"},[s("a",{staticClass:"white-link",attrs:{href:t.$page.frontmatter.fourSection.actionLink}},[t._v("\n                "+t._s(t.$page.frontmatter.fourSection.actionText)+"\n              ")])])])])])]),t._v(" "),s("section",{staticClass:"section five-section"},[s("div",{staticClass:"grow five-section__bg",style:{backgroundImage:`url(${t.$page.frontmatter.fiveSection.bg})`}}),t._v(" "),s("div",{staticClass:"five-section__inner"},[s("div",{staticClass:"five-section__text grow"},[s("div",{staticStyle:{"margin-right":"86px"}},[s("div",[s("span",{staticClass:"dot-inner"}),t._v(" "),s("p",{staticClass:"title"},[t._v(t._s(t.$page.frontmatter.fiveSection.title))]),t._v(" "),s("p",{staticClass:"desc"},[t._v("\n                "+t._s(t.$page.frontmatter.fiveSection.details)+"\n              ")])]),t._v(" "),s("button",{staticClass:"btn"},[s("a",{staticClass:"white-link",attrs:{href:t.$page.frontmatter.fiveSection.actionLink}},[t._v("\n                "+t._s(t.$page.frontmatter.fiveSection.actionText)+"\n              ")])])])]),t._v(" "),s("div",{staticClass:"grow",staticStyle:{position:"relative",display:"flex","justify-content":"flex-end"}},[s("img",{attrs:{width:"412",src:t.$page.frontmatter.fiveSection.img,alt:"svg",loading:"lazy"}})])])]),t._v(" "),s("section",{staticClass:"six-section",style:{backgroundImage:`url(${t.$page.frontmatter.sixSection.bg})`}},[s("div",{staticClass:"six-section__inner"},[t._m(2),t._v(" "),s("p",{staticClass:"title six-section__title"},[t._v(t._s(t.$page.frontmatter.sixSection.title))]),t._v(" "),t._l(t.list,(function(i,e){return s("ul",{key:e,staticClass:"row six-section__row"},t._l(i,(function(i,e){return s("li",{key:e},[s("a",{staticClass:"six-section__item six-section__step",attrs:{href:i.actionLink}},[s("div",{staticClass:"six-section__icon"},[s("img",{attrs:{src:i.icon,alt:"svg",loading:"lazy",width:"50",height:"50"}})]),t._v(" "),s("div",{staticClass:"six-section__list"},[s("div",{staticClass:"six-section__bold"},[t._v(t._s(i.title))]),t._v(" "),s("div",[t._v(t._s(i.details))])])])])})),0)}))],2)]),t._v(" "),s("section",{staticClass:"seven-section"},[s("span",{staticClass:"dot-inner"}),t._v(" "),s("p",{staticClass:"title"},[t._v(t._s(t.$page.frontmatter.sevenSection.title))]),t._v(" "),s("div",{staticClass:"row seven-section__wrap"},[s("div",{staticClass:"grow"},[s("p",{staticClass:"seven-section__title"},[t._v("\n            "+t._s(t.currentTitle)+"\n          ")]),t._v(" "),s("p",{staticClass:"seven-section__desc"})]),t._v(" "),s("div",{staticClass:"grow seven-section__center",style:{backgroundImage:`url(${t.$page.frontmatter.sevenSection.bg})`}},[t._m(3),t._v(" "),s("div",{staticClass:"seven-section__inner"},[s("swiper-img",{attrs:{dataList:t.dataList,currentIndex:t.currentIndex}})],1)]),t._v(" "),s("div",{staticClass:"grow"})]),t._v(" "),s("swiper",{attrs:{dataList:t.dataList},on:{change:t.handleChange}})],1)])}),[function(){var t=this._self._c;return t("div",[t("div",{staticClass:"three-section__todo"},[t("div",{staticClass:"three-section__phone"},[t("img",{attrs:{width:"410",height:"712",src:"https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png",alt:"phone",loading:"lazy"}})]),this._v(" "),t("div",{staticClass:"three-section__iframe"},[t("iframe",{attrs:{title:"todo示例",scrolling:"no",width:"325",height:"617",src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/index.html",frameborder:"0"}})])])])},function(){var t=this._self._c;return t("p",{staticClass:"white-text desc"},[this._v("\n              扫码体验Mpx版本的\n              "),t("a",{staticClass:"target-link",attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC"}},[this._v("todoMVC")]),this._v("\n              在各个小程序平台和web中的一致表现 ，更多示例项目可点击\n              "),t("a",{staticClass:"target-link",attrs:{href:"https://github.com/didi/mpx/tree/master/examples"}},[this._v("这里")]),this._v("\n              进入查看。\n            ")])},function(){var t=this._self._c;return t("div",{staticStyle:{"text-align":"center"}},[t("span",{staticClass:"dot-inner",staticStyle:{background:"#fff",margin:"0 auto"}})])},function(){var t=this._self._c;return t("div",{staticClass:"seven-section_phone"},[t("img",{attrs:{width:"213",height:"433",src:"https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png",alt:"phone",loading:"lazy"}})])}],!1,null,"2d48710e",null);s.default=l.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/20.e9cd4de3.js b/docs-vuepress/.vuepress/dist/assets/js/20.e9cd4de3.js
new file mode 100644
index 0000000000..e44ef72709
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/20.e9cd4de3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return o})),n.d(e,"g",(function(){return c})),n.d(e,"h",(function(){return l})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return h})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return m}));n(69),n(10),n(19),n(48),n(30);const r=/#.*$/,i=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function u(t){return decodeURI(t).replace(r,"").replace(i,"")}function o(t){return s.test(t)}function c(t){return/^mailto:/.test(t)}function l(t){return/^tel:/.test(t)}function p(t){if(o(t))return t;const e=t.match(r),n=e?e[0]:"",i=u(t);return a.test(i)?t:i+".html"+n}function f(t,e){const n=decodeURIComponent(t.hash),i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return u(t.path)===u(e)}function d(t,e,n){if(o(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;t<a.length;t++){const e=a[t];".."===e?i.pop():"."!==e&&i.push(e)}""!==i[0]&&i.unshift("");return i.join("/")}(e,n));const r=u(e);for(let e=0;e<t.length;e++)if(u(t[e].regularPath)===r)return Object.assign({},t[e],{type:"page",path:p(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function h(t,e,n,r){const{pages:i,themeConfig:a}=n,s=r&&a.locales&&a.locales[r]||a;if("auto"===(t.frontmatter.sidebar||s.sidebar||a.sidebar))return b(t);const u=s.sidebar||a.sidebar;if(u){const{base:n,config:r}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,u);return"auto"===r?b(t):r?r.map(t=>function t(e,n,r,i=1){if("string"==typeof e)return d(n,e,r);if(Array.isArray(e))return Object.assign(d(n,e[0],r),{title:e[1]});{const a=e.children||[];return 0===a.length&&e.path?Object.assign(d(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(t,i,n)):[]}return[]}function b(t){const e=g(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function g(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},300:function(t,e,n){},312:function(t,e,n){"use strict";n(313)},313:function(t,e,n){"use strict";var r=n(14),i=n(49),a=n(11),s=n(5),u=n(26);r({target:"Iterator",proto:!0,real:!0},{find:function(t){s(this),a(t);var e=u(this),n=0;return i(e,(function(e,r){if(t(e,n++))return r(e)}),{IS_RECORD:!0,INTERRUPTED:!0}).result}})},314:function(t,e,n){"use strict";n(300)},327:function(t,e,n){"use strict";n.r(e);n(10),n(312),n(30),n(47);var r=n(290);function i(t,e,n,r,i){const a={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:r,"sidebar-link":!0}};return i>2&&(a.style={"padding-left":i+"rem"}),t("RouterLink",a,n)}function a(t,e,n,s,u,o=1){return!e||o>u?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const c=Object(r.e)(s,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[i(t,n+"#"+e.slug,e.title,c,e.level-1),a(t,e.children,n,s,u,o+1)])}))}var s={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:s,$themeConfig:u,$themeLocaleConfig:o},props:{item:c,sidebarDepth:l}}){const p=Object(r.e)(s,c.path),f="auto"===c.type?p||c.children.some(t=>Object(r.e)(s,c.basePath+"#"+t.slug)):p,d="external"===c.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,c.path,c.title||c.path):i(t,c.path,c.title||c.path,f),h=[e.frontmatter.sidebarDepth,l,o.sidebarDepth,u.sidebarDepth,1].find(t=>void 0!==t),b=o.displayAllHeaders||u.displayAllHeaders;if("auto"===c.type)return[d,a(t,c.children,c.basePath,s,h)];if((f||b)&&c.headers&&!r.d.test(c.path)){return[d,a(t,Object(r.c)(c.headers),c.path,s,h)]}return d}},u=(n(314),n(4)),o=Object(u.a)(s,void 0,void 0,!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/21.217f8fa9.js b/docs-vuepress/.vuepress/dist/assets/js/21.217f8fa9.js
new file mode 100644
index 0000000000..cc9c7ea89c
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/21.217f8fa9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[21,34],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return f})),n.d(e,"e",(function(){return h})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return p})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return b}));n(69),n(10),n(19),n(48),n(30);const i=/#.*$/,r=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function l(t){return s.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function f(t){if(l(t))return t;const e=t.match(i),n=e?e[0]:"",r=o(t);return a.test(r)?t:r+".html"+n}function h(t,e){const n=decodeURIComponent(t.hash),r=function(t){const e=t.match(i);if(e)return e[0]}(e);if(r&&n!==r)return!1;return o(t.path)===o(e)}function d(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const r=e.split("/");n&&r[r.length-1]||r.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;t<a.length;t++){const e=a[t];".."===e?r.pop():"."!==e&&r.push(e)}""!==r[0]&&r.unshift("");return r.join("/")}(e,n));const i=o(e);for(let e=0;e<t.length;e++)if(o(t[e].regularPath)===i)return Object.assign({},t[e],{type:"page",path:f(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function p(t,e,n,i){const{pages:r,themeConfig:a}=n,s=i&&a.locales&&a.locales[i]||a;if("auto"===(t.frontmatter.sidebar||s.sidebar||a.sidebar))return m(t);const o=s.sidebar||a.sidebar;if(o){const{base:n,config:i}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,o);return"auto"===i?m(t):i?i.map(t=>function t(e,n,i,r=1){if("string"==typeof e)return d(n,e,i);if(Array.isArray(e))return Object.assign(d(n,e[0],i),{title:e[1]});{const a=e.children||[];return 0===a.length&&e.path?Object.assign(d(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(t,r,n)):[]}return[]}function m(t){const e=g(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function g(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function b(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},293:function(t,e,n){"use strict";n.r(e);n(10),n(47);var i=n(290),r={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},a=n(4),s=Object(a.a)(r,(function(){var t=this,e=t._self._c;return t.isInternal?e("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?e("OutboundLink"):t._e()],1)}),[],!1,null,null,null);e.default=s.exports},305:function(t,e,n){},328:function(t,e,n){"use strict";n(305)},348:function(t,e,n){"use strict";n.r(e);var i={name:"Home",components:{NavLink:n(293).default},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},r=(n(328),n(4)),a=Object(r.a)(i,(function(){var t=this,e=t._self._c;return e("main",{staticClass:"home",attrs:{"aria-labelledby":null!==t.data.heroText?"main-title":null}},[e("header",{staticClass:"hero"},[t.data.heroImage?e("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?e("h1",{attrs:{id:"main-title"}},[t._v("\n      "+t._s(t.data.heroText||t.$title||"Hello")+"\n    ")]):t._e(),t._v(" "),null!==t.data.tagline?e("p",{staticClass:"description"},[t._v("\n      "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n    ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?e("p",{staticClass:"action"},[e("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?e("div",{staticClass:"features"},t._l(t.data.features,(function(n,i){return e("div",{key:i,staticClass:"feature"},[e("h2",[t._v(t._s(n.title))]),t._v(" "),e("p",[t._v(t._s(n.details))])])})),0):t._e(),t._v(" "),e("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?e("div",{staticClass:"footer"},[t._v("\n    "+t._s(t.data.footer)+"\n  ")]):e("Content",{staticClass:"footer",attrs:{"slot-key":"footer"}})],1)}),[],!1,null,null,null);e.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/22.4cd3344f.js b/docs-vuepress/.vuepress/dist/assets/js/22.4cd3344f.js
new file mode 100644
index 0000000000..183c6a3cb9
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/22.4cd3344f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return c})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return l})),n.d(e,"b",(function(){return d})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return f})),n.d(e,"l",(function(){return h})),n.d(e,"c",(function(){return m})),n.d(e,"j",(function(){return b}));n(69),n(10),n(19),n(48),n(30);const i=/#.*$/,r=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function c(t){return s.test(t)}function u(t){return/^mailto:/.test(t)}function l(t){return/^tel:/.test(t)}function d(t){if(c(t))return t;const e=t.match(i),n=e?e[0]:"",r=o(t);return a.test(r)?t:r+".html"+n}function p(t,e){const n=decodeURIComponent(t.hash),r=function(t){const e=t.match(i);if(e)return e[0]}(e);if(r&&n!==r)return!1;return o(t.path)===o(e)}function f(t,e,n){if(c(e))return{type:"external",path:e};n&&(e=function(t,e,n){const i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const r=e.split("/");n&&r[r.length-1]||r.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;t<a.length;t++){const e=a[t];".."===e?r.pop():"."!==e&&r.push(e)}""!==r[0]&&r.unshift("");return r.join("/")}(e,n));const i=o(e);for(let e=0;e<t.length;e++)if(o(t[e].regularPath)===i)return Object.assign({},t[e],{type:"page",path:d(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function h(t,e,n,i){const{pages:r,themeConfig:a}=n,s=i&&a.locales&&a.locales[i]||a;if("auto"===(t.frontmatter.sidebar||s.sidebar||a.sidebar))return g(t);const o=s.sidebar||a.sidebar;if(o){const{base:n,config:i}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,o);return"auto"===i?g(t):i?i.map(t=>function t(e,n,i,r=1){if("string"==typeof e)return f(n,e,i);if(Array.isArray(e))return Object.assign(f(n,e[0],i),{title:e[1]});{const a=e.children||[];return 0===a.length&&e.path?Object.assign(f(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(t,r,n)):[]}return[]}function g(t){const e=m(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function b(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},295:function(t,e){t.exports=function(t){return null==t}},298:function(t,e,n){},307:function(t,e,n){"use strict";n(298)},323:function(t,e,n){"use strict";n.r(e);var i=n(295),r=n.n(i),a=n(290),s={name:"PageEdit",computed:{lastUpdated(){return this.$page.lastUpdated},lastUpdatedText(){return"string"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:"string"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:"Last Updated"},editLink(){const t=r()(this.$page.frontmatter.editLink)?this.$site.themeConfig.editLinks:this.$page.frontmatter.editLink,{repo:e,docsDir:n="",docsBranch:i="master",docsRepo:a=e}=this.$site.themeConfig;return t&&a&&this.$page.relativePath?this.createEditLink(e,a,n,i,this.$page.relativePath):null},editLinkText(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||"Edit this page"}},methods:{createEditLink(t,e,n,i,r){if(/bitbucket.org/.test(e)){return e.replace(a.a,"")+"/src"+`/${i}/`+(n?n.replace(a.a,"")+"/":"")+r+`?mode=edit&spa=0&at=${i}&fileviewer=file-view-default`}if(/gitlab.com/.test(e)){return e.replace(a.a,"")+"/-/edit"+`/${i}/`+(n?n.replace(a.a,"")+"/":"")+r}return(a.i.test(e)?e:"https://github.com/"+e).replace(a.a,"")+"/edit"+`/${i}/`+(n?n.replace(a.a,"")+"/":"")+r}}},o=(n(307),n(4)),c=Object(o.a)(s,(function(){var t=this,e=t._self._c;return e("footer",{staticClass:"page-edit"},[t.editLink?e("div",{staticClass:"edit-link"},[e("a",{attrs:{href:t.editLink,target:"_blank",rel:"noopener noreferrer"}},[t._v(t._s(t.editLinkText))]),t._v(" "),e("OutboundLink")],1):t._e(),t._v(" "),t.lastUpdated?e("div",{staticClass:"last-updated"},[e("span",{staticClass:"prefix"},[t._v(t._s(t.lastUpdatedText)+":")]),t._v(" "),e("span",{staticClass:"time"},[t._v(t._s(t.lastUpdated))])]):t._e()])}),[],!1,null,null,null);e.default=c.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/23.365f9a87.js b/docs-vuepress/.vuepress/dist/assets/js/23.365f9a87.js
new file mode 100644
index 0000000000..342300a185
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/23.365f9a87.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[23,29],{321:function(e,t,o){},337:function(e,t,o){"use strict";o(321)},356:function(e,t,o){"use strict";o.r(t);o(10),o(19),o(30);const a=[{text:"全局配置",items:[{link:"app-config",text:"",headers:[{text:"useStrictDiff",anchor:"#useStrictDiff"},{text:"ignoreWarning",anchor:"#ignoreWarning"},{text:"ignoreProxyWhiteList",anchor:"#ignoreProxyWhiteList"},{text:"observeClassInstance",anchor:"#observeClassInstance"},{text:"proxyEventHandler",anchor:"#proxyEventHandler"},{text:"setDataHandler",anchor:"#setDataHandler"},{text:"forceFlushSync",anchor:"#forceFlushSync"},{text:"webRouteConfig",anchor:"#webRouteConfig"},{text:"webConfig",anchor:"#webConfig"}]}]},{text:"全局 API",items:[{link:"global-api",text:"全局对象 Mpx",headers:[{text:"mixin",anchor:"#mixin"},{text:"injectMixins",anchor:"#injectMixins"},{text:"observable",anchor:"#observable"},{text:"set",anchor:"#set"},{text:"delete",anchor:"#delete"},{text:"use",anchor:"#use"},{text:"watch",anchor:"#watch"}]},{link:"global-api",text:"基础 API",headers:[{text:"createApp",anchor:"#createApp"},{text:"createPage",anchor:"#createPage"},{text:"createComponent",anchor:"#createComponent"},{text:"nextTick",anchor:"#nextTick"},{text:"toPureObject",anchor:"#toPureObject"},{text:"getMixin",anchor:"#getMixin"},{text:"implement",anchor:"#implement"}]},{link:"global-api",text:"内建生命周期变量",headers:[{text:"BEFORECREATE",anchor:"#BEFORECREATE"},{text:"CREATED",anchor:"#CREATED"},{text:"BEFOREMOUNT",anchor:"#BEFOREMOUNT"},{text:"MOUNTED",anchor:"#MOUNTED"},{text:"BEFOREUPDATE",anchor:"#BEFOREUPDATE"},{text:"UPDATED",anchor:"#UPDATED"},{text:"BEFOREUNMOUNT",anchor:"#BEFOREUNMOUNT"},{text:"UNMOUNTED",anchor:"#UNMOUNTED"},{text:"ONLOAD",anchor:"#ONLOAD"},{text:"ONSHOW",anchor:"#ONSHOW"},{text:"ONHIDE",anchor:"#ONHIDE"},{text:"ONRESIZE",anchor:"#ONRESIZE"}]},{link:"store-api",text:"Store API",headers:[{text:"createStore",anchor:"#createStore"},{text:"createStoreWithThis",anchor:"#createStoreWithThis"},{text:"createStateWithThis",anchor:"#createStateWithThis"},{text:"createGettersWithThis",anchor:"#createGettersWithThis"},{text:"createMutationsWithThis",anchor:"#createMutationsWithThis"},{text:"createActionsWithThis",anchor:"#createActionsWithThis"}]}]},{text:"响应式 API",items:[{link:"reactivity-api",text:"响应式基础 API",headers:[{text:"set",anchor:"#set"},{text:"del",anchor:"#del"},{text:"reactive",anchor:"#reactive"},{text:"isReactive",anchor:"#isReactive"},{text:"markRaw",anchor:"#markRaw"},{text:"shallowReactive",anchor:"#shallowReactive"}]},{link:"reactivity-api",text:"Refs",headers:[{text:"ref",anchor:"#ref"},{text:"unref",anchor:"#unref"},{text:"toRef",anchor:"#toRef"},{text:"toRefs",anchor:"#toRefs"},{text:"isRef",anchor:"#isRef"},{text:"customRef",anchor:"#customRef"},{text:"shallowRef",anchor:"#shallowRef"},{text:"triggerRef",anchor:"#triggerRef"}]},{link:"reactivity-api",text:"Computed 与 Watch",headers:[{text:"computed",anchor:"#computed"},{text:"watchEffect",anchor:"#watchEffect"},{text:"watchSyncEffect",anchor:"#watchSyncEffect"},{text:"watchPostEffect",anchor:"#watchPostEffect"},{text:"watch",anchor:"#watch"}]},{link:"reactivity-api",text:"Effect 作用域 API",headers:[{text:"effectScope",anchor:"#effectScope"},{text:"getCurrentScope",anchor:"#getCurrentScope"},{text:"onScopeDispose",anchor:"#onScopeDispose"}]}]},{text:"组合式 API",items:[{link:"composition-api",text:"生命周期钩子",headers:[{text:"onBeforeMount",anchor:"#onBeforeMount"},{text:"onMounted",anchor:"#onMounted"},{text:"onBeforeUpdate",anchor:"#onBeforeUpdate"},{text:"onUpdated",anchor:"#onUpdated"},{text:"onBeforeUnmount",anchor:"#onBeforeUnmount"},{text:"onUnmount",anchor:"#onUnmount"},{text:"onLoad",anchor:"#onLoad"},{text:"onShow",anchor:"#onShow"},{text:"onHide",anchor:"#onHide"},{text:"onResize",anchor:"#onResize"},{text:"onPullDownRefresh",anchor:"#onPullDownRefresh"},{text:"onReachBottom",anchor:"#onReachBottom"},{text:"onShareAppMessage",anchor:"#onShareAppMessage"},{text:"onShareTimeline",anchor:"#onShareTimeline"},{text:"onAddToFavorites",anchor:"#onAddToFavorites"},{text:"onPageScroll",anchor:"#onPageScroll"},{text:"onTabItemTap",anchor:"#onTabItemTap"},{text:"onSaveExitState",anchor:"#onSaveExitState"}]},{link:"composition-api",text:"其他",headers:[{text:"setup",anchor:"#setup"},{text:"getCurrentInstance",anchor:"#getCurrentInstance"},{text:"useI18n",anchor:"#useI18n"},{text:"useFetch",anchor:"#useFetch"}]}]},{text:"选项式 API",items:[{link:"instance-api",text:"实例 API",headers:[{text:"$set",anchor:"#$set"},{text:"$watch",anchor:"#$watch"},{text:"$delete",anchor:"#$delete"},{text:"$refs",anchor:"#$refs"},{text:"$asyncRefs",anchor:"#$asyncRefs"},{text:"$forceUpdate",anchor:"#$forceUpdate"},{text:"$nextTick",anchor:"#$nextTick"},{text:"$i18n",anchor:"#$i18n"},{text:"$rawOptions",anchor:"#$rawOptions"}]}]},{text:"内置相关",items:[{link:"directives",text:"模版指令 (1)",headers:[{text:"wx:if",anchor:"#wx-if"},{text:"wx:elif",anchor:"#wx-elif"},{text:"wx:else",anchor:"#wx-else"},{text:"wx:for",anchor:"#wx-for"},{text:"wx:for-index",anchor:"#wx-for-index"},{text:"wx:for-item",anchor:"#wx-for-item"},{text:"wx:key",anchor:"#wx-key"},{text:"wx:class",anchor:"#wx-class"},{text:"wx:style",anchor:"#wx-style"}]},{link:"directives",text:"模版指令 (2)",headers:[{text:"wx:model",anchor:"#wx-model"},{text:"wx:model-prop",anchor:"#wx-model-prop"},{text:"wx:model-event",anchor:"#wx-model-event"},{text:"wx:model-value-path",anchor:"#wx-model-value-path"},{text:"wx:model-filter",anchor:"#wx-model-filter"},{text:"wx:ref",anchor:"#wx-ref"},{text:"wx:show",anchor:"#wx-show"},{text:"bind",anchor:"#bind"},{text:"catch",anchor:"#catch"},{text:"capture-bind",anchor:"#capture-bind"},{text:"capture-catch",anchor:"#capture-catch"}]},{link:"builtIn",text:"内建组件",headers:[{text:"component",anchor:"#component"},{text:"slot",anchor:"#slot"}]}]},{text:"编译构建",items:[{link:"compile",text:"webpack 配置",headers:[{text:"output.publicPath",anchor:"#output-publicPath"},{text:"output.filename",anchor:"#output-filename"},{text:"node.global",anchor:"#node-global"},{text:"rule.resourceQuery",anchor:"#rule-resourceQuery"},{text:"resolve.extensions",anchor:"#resolve-extensions"}]},{link:"compile",text:"MpxWebpackPlugin options (1)",headers:[{text:"mode",anchor:"#mode"},{text:"srcMode",anchor:"#srcMode"},{text:"modeRules",anchor:"#modeRules"},{text:"externalClasses",anchor:"#externalClasses"},{text:"resolveMode",anchor:"#resolveMode"},{text:"projectRoot",anchor:"#projectRoot"},{text:"writeMode",anchor:"#writeMode"},{text:"autoScopeRules",anchor:"#autoScopeRules"},{text:"catch",anchor:"#catch"},{text:"forceDisableProxyCtor",anchor:"#forceDisableProxyCtor"},{text:"transMpxRules",anchor:"#transMpxRules"}]},{link:"compile",text:"MpxWebpackPlugin options (2)",headers:[{text:"forceProxyEventRules",anchor:"#forceProxyEventRules"},{text:"autoSplit",anchor:"#autoSplit"},{text:"defs",anchor:"#defs"},{text:"attributes",anchor:"#attributes"},{text:"externals",anchor:"#externals"},{text:"miniNpmPackage",anchor:"#miniNpmPackage"},{text:"forceUsePageCtor",anchor:"#forceUsePageCtor"},{text:"transRpxRules",anchor:"#transRpxRules"},{text:"postcssInlineConfig",anchor:"#postcssInlineConfig"},{text:"decodeHTMLText",anchor:"#decodeHTMLText"},{text:"nativeConfig",anchor:"#nativeConfig"},{text:"webConfig",anchor:"#webConfig"},{text:"i18n",anchor:"#i18n"},{text:"auditResource",anchor:"#auditResource"},{text:"subpackageModulesRules",anchor:"#subpackageModulesRules"},{text:"generateBuildMap",anchor:"#generateBuildMap"},{text:"autoVirtualHostRules",anchor:"#autoVirtualHostRules"},{text:"partialCompileRules",anchor:"#partialCompileRules"}]},{link:"compile",text:"MpxWebpackPlugin static methods",headers:[{text:"MpxWebpackPlugin.loader",anchor:"#mpxwebpackplugin-loader"},{text:"MpxWebpackPlugin.pluginLoader",anchor:"#mpxwebpackplugin-pluginloader"},{text:"MpxWebpackPlugin.wxsPreLoader",anchor:"#mpxwebpackplugin-wxspreloader"},{text:"MpxWebpackPlugin.fileLoader",anchor:"#mpxwebpackplugin-fileloader"},{text:"MpxWebpackPlugin.urlLoader",anchor:"#mpxwebpackplugin-urlloader"}]},{link:"compile",text:"Request query",headers:[{text:"?resolve",anchor:"#resolve"},{text:"?root",anchor:"#root"},{text:"?fallback",anchor:"#fallback"},{text:"?useLocal",anchor:"#useLocal"},{text:"?isStyle",anchor:"#isStyle"},{text:"?isPage",anchor:"#isPage"},{text:"?isComponent",anchor:"#isComponent"},{text:"?async",anchor:"#async"}]}]},{text:"周边拓展",items:[{link:"extend",text:"@mpxjs/fetch",headers:[{text:"fetch",anchor:"#fetch"},{text:"CancelToken",anchor:"#CancelToken"},{text:"XFetch",anchor:"#XFetch"},{text:"interceptors",anchor:"#interceptors"},{text:"proxy 代理",anchor:"#proxy"},{text:"useFetch",anchor:"#useFetch"}]},{link:"extend",text:"其他",headers:[{text:"api-proxy",anchor:"#api-proxy"},{text:"webview-bridge",anchor:"#webview-bridge"},{text:"size-report",anchor:"#size-report"},{text:"i18n",anchor:"#i18n"}]}]}],n=e=>e.toLowerCase().replace(/-/g," ");var r={data:()=>({query:""}),computed:{filtered(){const e=n(this.query),t=t=>n(t).includes(e);return a.map(e=>{if(t(e.text))return e;const o=e.items.map(e=>{if(t(e.text))return e;const o=e.headers.filter(({text:e,anchor:o})=>t(e)||t(o));return o.length?{text:e.text,link:e.link,headers:o}:null}).filter(e=>e);return o.length?{text:e.text,items:o}:null}).filter(e=>e)}},methods:{slugify:e=>e.replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g,"-").replace(/\-{2,}/g,"-").replace(/^\-+|\-+$/g,"").replace(/^(\d)/,"_$1").toLowerCase()}},c=(o(337),o(4)),i=Object(c.a)(r,(function(){var e=this,t=e._self._c;return t("div",{attrs:{id:"api-index"}},[t("div",{staticClass:"header"},[t("h1",[e._v("API 参考")]),e._v(" "),t("div",{staticClass:"api-filter"},[t("label",{attrs:{for:"api-filter"}},[e._v("过滤")]),e._v(" "),t("input",{directives:[{name:"model",rawName:"v-model",value:e.query,expression:"query"}],attrs:{type:"search",placeholder:"Enter keyword",id:"api-filter"},domProps:{value:e.query},on:{input:function(t){t.target.composing||(e.query=t.target.value)}}})])]),e._v(" "),e._l(e.filtered,(function(o){return t("div",{key:o.text,staticClass:"api-section"},[t("h2",{attrs:{id:e.slugify(o.text)}},[e._v(e._s(o.text))]),e._v(" "),t("div",{staticClass:"api-groups"},e._l(o.items,(function(o){return t("div",{key:o.text,staticClass:"api-group"},[o.text?t("h3",[e._v(e._s(o.text))]):e._e(),e._v(" "),t("ul",e._l(o.headers,(function(a){return t("li",{key:a.anchor},[t("a",{attrs:{href:o.link+".html#"+e.slugify(a.anchor)}},[e._v(e._s(a.text))])])})),0)])})),0)])})),e._v(" "),e.filtered.length?e._e():t("div",{staticClass:"no-match"},[e._v('\n    没有匹配到 API "'+e._s(e.query)+'"\n  ')])],2)}),[],!1,null,"a2f64316",null);t.default=i.exports},380:function(e,t,o){"use strict";o.r(t);var a={components:{ApiIndex:o(356).default}},n=o(4),r=Object(n.a)(a,(function(){var e=this._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("ApiIndex")],1)}),[],!1,null,null,null);t.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/24.17777a13.js b/docs-vuepress/.vuepress/dist/assets/js/24.17777a13.js
new file mode 100644
index 0000000000..eb011a519d
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/24.17777a13.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{301:function(t,e,s){},316:function(t,e,s){"use strict";s(301)},326:function(t,e,s){"use strict";s.r(e);var i={props:{dataList:{type:Array,default:()=>[]},height:{type:Number,default:152},autoPlay:{type:Boolean,default:!0},currentIndex:{type:Number,default:0},dot:{type:Boolean,default:!1}},data:()=>({msg:"",current:0,resut:[],allWidth:0,timer:0,prevCls:"swiper-disable",nextCls:"",offsetWidth:0,isMove:!1,timeout:0}),computed:{getStyle(){return`height: ${this.height}px;`},getMode(){return this.isMove?"transition: transform 0s;":"transition: transform 0.3s;"},getWidth(){return`width: ${this.offsetWidth}px;`}},mounted(){this.$nextTick(()=>{const t=this.$refs.container;this.offsetWidth=t.offsetWidth,this.autoPlay&&this.animationScroll(),window.addEventListener("resize",()=>{this.offsetWidth=t.offsetWidth},!1)}),this.touchInfo={clientX:0,clientY:0,moveX:0}},watch:{current(t){this.prevCls=0===t?"swiper-disable":"",t===this.dataList.length-1?this.nextCls="swiper-disable":this.nextCls=""}},methods:{animationScroll(){clearInterval(this.timer),this.timer=setInterval(()=>{this.handleNext()},3e3)},handlePrev(t){const e=this.$refs.wrapper;this.current--,-1===this.current&&(this.current=0),e.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,"off"!==t&&this.$emit("change",this.current)},handleNext(t){const e=this.$refs.wrapper;e&&(this.current++,this.current===this.dataList.length&&(this.current=0),e.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,"off"!==t&&this.$emit("change",this.current))},handleSelect(t){clearInterval(this.timer),clearTimeout(this.timeout),this.current=t;this.$refs.wrapper.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,this.autoPlay&&(this.timeout=setTimeout(()=>{this.animationScroll()},3e3))},handleStart(t){clearInterval(this.timer),clearTimeout(this.timeout);const e=t.touches[0];this.touchInfo={clientX:e.clientX},this.isMove=!0},handleMove(t){const e=this.$refs.wrapper,s=t.touches[0].clientX-this.touchInfo.clientX,i=this.current*this.offsetWidth-s;e.style.transform=`translateX(${-i}px)`,this.touchInfo.moveX=s},handleEnd(){this.isMove=!1;const t=this.touchInfo.moveX||0;let e=0;e=Math.abs(t)<20?0:t<0?this.current===this.dataList.length-1?0:1:0===this.current?0:-1;const s=this.$refs.wrapper;switch(e){case 0:s.style.transform=`translateX(${-this.current*this.offsetWidth}px)`;break;case 1:this.handleNext();break;case-1:this.handlePrev()}this.touchInfo={},this.autoPlay&&(this.timeout=setTimeout(()=>{this.animationScroll()},3e3))}}},r=(s(316),s(4)),n=Object(r.a)(i,(function(){var t=this,e=t._self._c;return e("div",{ref:"container",staticClass:"swiper-container",style:t.getStyle},[e("div",{ref:"wrapper",staticClass:"swiper",style:t.getMode,on:{touchstart:t.handleStart,touchmove:t.handleMove,touchend:t.handleEnd}},t._l(t.dataList,(function(s,i){return e("div",{key:i,ref:"list",refInFor:!0,staticClass:"swiper-list",style:t.getWidth},[t._t("default",null,{item:s})],2)})),0),t._v(" "),t.dot?e("ul",{staticClass:"swiper-dot"},t._l(t.dataList,(function(s,i){return e("li",{key:i,staticClass:"swiper-icon",class:{active:t.current===i}})})),0):t._e()])}),[],!1,null,"ae3bb0ce",null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/25.889c07d7.js b/docs-vuepress/.vuepress/dist/assets/js/25.889c07d7.js
new file mode 100644
index 0000000000..b0841c13a2
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/25.889c07d7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{292:function(e,t,s){},302:function(e,t,s){"use strict";s(292)},303:function(e,t,s){"use strict";s.r(t);var i={props:{code:{type:String,default:""},title:{type:String,default:""}},data:()=>({isShow:!1,isClick:!1}),methods:{handleEnter(){this.isShow=!0},handleLeave(){this.isShow=!1},handleToggle(){this.isClick=!this.isClick,this.isShow=this.isClick}}},o=(s(302),s(4)),a=Object(o.a)(i,(function(){var e=this,t=e._self._c;return t("div",{staticClass:"popover"},[t("div",{staticClass:"popover__content",on:{click:e.handleToggle,mouseenter:e.handleEnter,mouseleave:e.handleLeave}},[e._t("default")],2),e._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:e.isShow,expression:"isShow"}],staticClass:"popover__top"},[t("div",{staticClass:"popover__content"},[t("div",{staticClass:"popover__inner"},[e.code?t("img",{attrs:{width:"300",src:e.code,alt:"code",loading:"lazy"}}):e._e(),e._v(" "),e.title?t("div",[e._v(e._s(e.title))]):e._e()]),e._v(" "),t("div",{staticClass:"popover__arrow"})])])])}),[],!1,null,"8bac5638",null);t.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/26.3aa9f276.js b/docs-vuepress/.vuepress/dist/assets/js/26.3aa9f276.js
new file mode 100644
index 0000000000..789a4b118a
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/26.3aa9f276.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{345:function(t,n,s){},364:function(t,n,s){"use strict";s(345)},378:function(t,n,s){"use strict";s.r(n);var i={},c=(s(364),s(4)),e=Object(c.a)(i,(function(){return(0,this._self._c)("div",{staticClass:"swiper-item"},[this._t("default")],2)}),[],!1,null,"f19c6420",null);n.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/27.1a35170a.js b/docs-vuepress/.vuepress/dist/assets/js/27.1a35170a.js
new file mode 100644
index 0000000000..b4e745b3c9
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/27.1a35170a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{318:function(t,i,s){},334:function(t,i,s){"use strict";s(318)},353:function(t,i,s){"use strict";s.r(i);s(69);var e={props:{dataList:{type:Array,default:()=>[]}},data:()=>({msg:"",current:0,resut:[],allWidth:0,timer:0}),mounted(){this.$nextTick(()=>{const t=this.$refs.list;if(!t.length)return;const i=[];let s=0;for(let e=0;e<t.length;e++){const r=t[e];s+=r.offsetWidth,i.push({width:r.offsetWidth,left:r.offsetLeft})}this.wrapper=this.$refs.wrapper,this.resut=i,this.allWidth=s,this.handleClick(0)})},computed:{leftButtonDisabled(){return 0===this.current?"swiper-disable":""},rightButtonDisabled(){return this.current===this.dataList.length-1?"swiper-disable":""}},methods:{handlePrev(){this.current-1>-1&&(clearInterval(this.timer),this.handleClick(this.current-1))},handleNext(){this.current+1<this.dataList.length&&(clearInterval(this.timer),this.handleClick(this.current+1))},handleClick(t){this.current=t,this.$emit("change",t)},handleEnd(){const t=Math.floor(this.resut[this.current].left)-this.wrapper.scrollLeft,i=this.wrapper.scrollLeft,s=Math.floor(this.wrapper.offsetWidth/2)-Math.floor(this.resut[this.current].width/2),e=this.allWidth-this.wrapper.offsetWidth;let r=i+(t-s);r<0&&(r=0),r>e&&(r=e),this.allWidth>this.wrapper.offsetWidth&&i!==r&&this.animationScroll(r)},animationScroll(t){const i=this.allWidth-this.wrapper.offsetWidth,s=this.wrapper.scrollLeft,e=Math.floor(Math.abs((s-t)/200*20));let r=0;clearInterval(this.timer),this.timer=setInterval(()=>{if(r&&this.wrapper.scrollLeft!==r)return clearInterval(this.timer);if(t>s){const s=this.wrapper.scrollLeft+e;s>t||s>=i?(clearInterval(this.timer),this.wrapper.scrollLeft=t):(this.wrapper.scrollLeft=s,r=s)}else{const i=this.wrapper.scrollLeft-e;i<t||i<=0?(clearInterval(this.timer),this.wrapper.scrollLeft=t):(this.wrapper.scrollLeft=i,r=i)}},20)}}},r=(s(334),s(4)),l=Object(r.a)(e,(function(){var t=this,i=t._self._c;return i("div",{staticClass:"swiper-container"},[i("div",{staticClass:"swiper-button"},[i("img",{staticClass:"swiper-img",class:t.leftButtonDisabled,attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/0cgzDC8Apn/anli_icon_left.png",width:"50",height:"50",alt:"left",loading:"lazy"},on:{click:t.handlePrev}})]),t._v(" "),i("div",{ref:"wrapper",staticClass:"swiper"},t._l(t.dataList,(function(s,e){return i("div",{key:e,ref:"list",refInFor:!0,class:["swiper-list",t.current===e?"active":""],on:{click:function(i){return t.handleClick(e)},transitionend:t.handleEnd}},[i("div",{staticClass:"swiper-item"},[i("div",[i("div",[i("img",{attrs:{width:"80",height:"80",src:s.img,alt:"二维码",loading:"lazy"}})]),t._v(" "),i("div",[t._v(t._s(s.title))])])])])})),0),t._v(" "),i("div",{staticClass:"swiper-button"},[i("img",{staticClass:"swiper-img",class:t.rightButtonDisabled,attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/QhD6ulEP7k/anli_icon_right.png",width:"50",height:"50",alt:"right",loading:"lazy"},on:{click:t.handleNext}})])])}),[],!1,null,"5724bcdd",null);i.default=l.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/28.3670fa46.js b/docs-vuepress/.vuepress/dist/assets/js/28.3670fa46.js
new file mode 100644
index 0000000000..2463d8a3a7
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/28.3670fa46.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{319:function(t,e,s){},335:function(t,e,s){"use strict";s(319)},354:function(t,e,s){"use strict";s.r(e);var i={props:{dataList:{type:Array,default:()=>[]},currentIndex:{type:Number,default:0}},data:()=>({translateX:0}),computed:{getStyle(){return{transform:`translate3d(${188*-this.currentIndex}px, 0, 0)`}}},watch:{currentIndex(t){}}},a=(s(335),s(4)),r=Object(a.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"swiper-img"},[t("div",{staticClass:"swiper-img__list",style:this.getStyle},this._l(this.dataList,(function(e,s){return t("div",{key:s,staticClass:"swiper-img__wrap"},[t("img",{attrs:{width:"188",height:"410",src:e.demo,alt:"img",loading:"lazy"}})])})),0)])}),[],!1,null,"60490726",null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/29.a911e510.js b/docs-vuepress/.vuepress/dist/assets/js/29.a911e510.js
new file mode 100644
index 0000000000..1749087cce
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/29.a911e510.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{321:function(e,t,o){},337:function(e,t,o){"use strict";o(321)},356:function(e,t,o){"use strict";o.r(t);o(10),o(19),o(30);const a=[{text:"全局配置",items:[{link:"app-config",text:"",headers:[{text:"useStrictDiff",anchor:"#useStrictDiff"},{text:"ignoreWarning",anchor:"#ignoreWarning"},{text:"ignoreProxyWhiteList",anchor:"#ignoreProxyWhiteList"},{text:"observeClassInstance",anchor:"#observeClassInstance"},{text:"proxyEventHandler",anchor:"#proxyEventHandler"},{text:"setDataHandler",anchor:"#setDataHandler"},{text:"forceFlushSync",anchor:"#forceFlushSync"},{text:"webRouteConfig",anchor:"#webRouteConfig"},{text:"webConfig",anchor:"#webConfig"}]}]},{text:"全局 API",items:[{link:"global-api",text:"全局对象 Mpx",headers:[{text:"mixin",anchor:"#mixin"},{text:"injectMixins",anchor:"#injectMixins"},{text:"observable",anchor:"#observable"},{text:"set",anchor:"#set"},{text:"delete",anchor:"#delete"},{text:"use",anchor:"#use"},{text:"watch",anchor:"#watch"}]},{link:"global-api",text:"基础 API",headers:[{text:"createApp",anchor:"#createApp"},{text:"createPage",anchor:"#createPage"},{text:"createComponent",anchor:"#createComponent"},{text:"nextTick",anchor:"#nextTick"},{text:"toPureObject",anchor:"#toPureObject"},{text:"getMixin",anchor:"#getMixin"},{text:"implement",anchor:"#implement"}]},{link:"global-api",text:"内建生命周期变量",headers:[{text:"BEFORECREATE",anchor:"#BEFORECREATE"},{text:"CREATED",anchor:"#CREATED"},{text:"BEFOREMOUNT",anchor:"#BEFOREMOUNT"},{text:"MOUNTED",anchor:"#MOUNTED"},{text:"BEFOREUPDATE",anchor:"#BEFOREUPDATE"},{text:"UPDATED",anchor:"#UPDATED"},{text:"BEFOREUNMOUNT",anchor:"#BEFOREUNMOUNT"},{text:"UNMOUNTED",anchor:"#UNMOUNTED"},{text:"ONLOAD",anchor:"#ONLOAD"},{text:"ONSHOW",anchor:"#ONSHOW"},{text:"ONHIDE",anchor:"#ONHIDE"},{text:"ONRESIZE",anchor:"#ONRESIZE"}]},{link:"store-api",text:"Store API",headers:[{text:"createStore",anchor:"#createStore"},{text:"createStoreWithThis",anchor:"#createStoreWithThis"},{text:"createStateWithThis",anchor:"#createStateWithThis"},{text:"createGettersWithThis",anchor:"#createGettersWithThis"},{text:"createMutationsWithThis",anchor:"#createMutationsWithThis"},{text:"createActionsWithThis",anchor:"#createActionsWithThis"}]}]},{text:"响应式 API",items:[{link:"reactivity-api",text:"响应式基础 API",headers:[{text:"set",anchor:"#set"},{text:"del",anchor:"#del"},{text:"reactive",anchor:"#reactive"},{text:"isReactive",anchor:"#isReactive"},{text:"markRaw",anchor:"#markRaw"},{text:"shallowReactive",anchor:"#shallowReactive"}]},{link:"reactivity-api",text:"Refs",headers:[{text:"ref",anchor:"#ref"},{text:"unref",anchor:"#unref"},{text:"toRef",anchor:"#toRef"},{text:"toRefs",anchor:"#toRefs"},{text:"isRef",anchor:"#isRef"},{text:"customRef",anchor:"#customRef"},{text:"shallowRef",anchor:"#shallowRef"},{text:"triggerRef",anchor:"#triggerRef"}]},{link:"reactivity-api",text:"Computed 与 Watch",headers:[{text:"computed",anchor:"#computed"},{text:"watchEffect",anchor:"#watchEffect"},{text:"watchSyncEffect",anchor:"#watchSyncEffect"},{text:"watchPostEffect",anchor:"#watchPostEffect"},{text:"watch",anchor:"#watch"}]},{link:"reactivity-api",text:"Effect 作用域 API",headers:[{text:"effectScope",anchor:"#effectScope"},{text:"getCurrentScope",anchor:"#getCurrentScope"},{text:"onScopeDispose",anchor:"#onScopeDispose"}]}]},{text:"组合式 API",items:[{link:"composition-api",text:"生命周期钩子",headers:[{text:"onBeforeMount",anchor:"#onBeforeMount"},{text:"onMounted",anchor:"#onMounted"},{text:"onBeforeUpdate",anchor:"#onBeforeUpdate"},{text:"onUpdated",anchor:"#onUpdated"},{text:"onBeforeUnmount",anchor:"#onBeforeUnmount"},{text:"onUnmount",anchor:"#onUnmount"},{text:"onLoad",anchor:"#onLoad"},{text:"onShow",anchor:"#onShow"},{text:"onHide",anchor:"#onHide"},{text:"onResize",anchor:"#onResize"},{text:"onPullDownRefresh",anchor:"#onPullDownRefresh"},{text:"onReachBottom",anchor:"#onReachBottom"},{text:"onShareAppMessage",anchor:"#onShareAppMessage"},{text:"onShareTimeline",anchor:"#onShareTimeline"},{text:"onAddToFavorites",anchor:"#onAddToFavorites"},{text:"onPageScroll",anchor:"#onPageScroll"},{text:"onTabItemTap",anchor:"#onTabItemTap"},{text:"onSaveExitState",anchor:"#onSaveExitState"}]},{link:"composition-api",text:"其他",headers:[{text:"setup",anchor:"#setup"},{text:"getCurrentInstance",anchor:"#getCurrentInstance"},{text:"useI18n",anchor:"#useI18n"},{text:"useFetch",anchor:"#useFetch"}]}]},{text:"选项式 API",items:[{link:"instance-api",text:"实例 API",headers:[{text:"$set",anchor:"#$set"},{text:"$watch",anchor:"#$watch"},{text:"$delete",anchor:"#$delete"},{text:"$refs",anchor:"#$refs"},{text:"$asyncRefs",anchor:"#$asyncRefs"},{text:"$forceUpdate",anchor:"#$forceUpdate"},{text:"$nextTick",anchor:"#$nextTick"},{text:"$i18n",anchor:"#$i18n"},{text:"$rawOptions",anchor:"#$rawOptions"}]}]},{text:"内置相关",items:[{link:"directives",text:"模版指令 (1)",headers:[{text:"wx:if",anchor:"#wx-if"},{text:"wx:elif",anchor:"#wx-elif"},{text:"wx:else",anchor:"#wx-else"},{text:"wx:for",anchor:"#wx-for"},{text:"wx:for-index",anchor:"#wx-for-index"},{text:"wx:for-item",anchor:"#wx-for-item"},{text:"wx:key",anchor:"#wx-key"},{text:"wx:class",anchor:"#wx-class"},{text:"wx:style",anchor:"#wx-style"}]},{link:"directives",text:"模版指令 (2)",headers:[{text:"wx:model",anchor:"#wx-model"},{text:"wx:model-prop",anchor:"#wx-model-prop"},{text:"wx:model-event",anchor:"#wx-model-event"},{text:"wx:model-value-path",anchor:"#wx-model-value-path"},{text:"wx:model-filter",anchor:"#wx-model-filter"},{text:"wx:ref",anchor:"#wx-ref"},{text:"wx:show",anchor:"#wx-show"},{text:"bind",anchor:"#bind"},{text:"catch",anchor:"#catch"},{text:"capture-bind",anchor:"#capture-bind"},{text:"capture-catch",anchor:"#capture-catch"}]},{link:"builtIn",text:"内建组件",headers:[{text:"component",anchor:"#component"},{text:"slot",anchor:"#slot"}]}]},{text:"编译构建",items:[{link:"compile",text:"webpack 配置",headers:[{text:"output.publicPath",anchor:"#output-publicPath"},{text:"output.filename",anchor:"#output-filename"},{text:"node.global",anchor:"#node-global"},{text:"rule.resourceQuery",anchor:"#rule-resourceQuery"},{text:"resolve.extensions",anchor:"#resolve-extensions"}]},{link:"compile",text:"MpxWebpackPlugin options (1)",headers:[{text:"mode",anchor:"#mode"},{text:"srcMode",anchor:"#srcMode"},{text:"modeRules",anchor:"#modeRules"},{text:"externalClasses",anchor:"#externalClasses"},{text:"resolveMode",anchor:"#resolveMode"},{text:"projectRoot",anchor:"#projectRoot"},{text:"writeMode",anchor:"#writeMode"},{text:"autoScopeRules",anchor:"#autoScopeRules"},{text:"catch",anchor:"#catch"},{text:"forceDisableProxyCtor",anchor:"#forceDisableProxyCtor"},{text:"transMpxRules",anchor:"#transMpxRules"}]},{link:"compile",text:"MpxWebpackPlugin options (2)",headers:[{text:"forceProxyEventRules",anchor:"#forceProxyEventRules"},{text:"autoSplit",anchor:"#autoSplit"},{text:"defs",anchor:"#defs"},{text:"attributes",anchor:"#attributes"},{text:"externals",anchor:"#externals"},{text:"miniNpmPackage",anchor:"#miniNpmPackage"},{text:"forceUsePageCtor",anchor:"#forceUsePageCtor"},{text:"transRpxRules",anchor:"#transRpxRules"},{text:"postcssInlineConfig",anchor:"#postcssInlineConfig"},{text:"decodeHTMLText",anchor:"#decodeHTMLText"},{text:"nativeConfig",anchor:"#nativeConfig"},{text:"webConfig",anchor:"#webConfig"},{text:"i18n",anchor:"#i18n"},{text:"auditResource",anchor:"#auditResource"},{text:"subpackageModulesRules",anchor:"#subpackageModulesRules"},{text:"generateBuildMap",anchor:"#generateBuildMap"},{text:"autoVirtualHostRules",anchor:"#autoVirtualHostRules"},{text:"partialCompileRules",anchor:"#partialCompileRules"}]},{link:"compile",text:"MpxWebpackPlugin static methods",headers:[{text:"MpxWebpackPlugin.loader",anchor:"#mpxwebpackplugin-loader"},{text:"MpxWebpackPlugin.pluginLoader",anchor:"#mpxwebpackplugin-pluginloader"},{text:"MpxWebpackPlugin.wxsPreLoader",anchor:"#mpxwebpackplugin-wxspreloader"},{text:"MpxWebpackPlugin.fileLoader",anchor:"#mpxwebpackplugin-fileloader"},{text:"MpxWebpackPlugin.urlLoader",anchor:"#mpxwebpackplugin-urlloader"}]},{link:"compile",text:"Request query",headers:[{text:"?resolve",anchor:"#resolve"},{text:"?root",anchor:"#root"},{text:"?fallback",anchor:"#fallback"},{text:"?useLocal",anchor:"#useLocal"},{text:"?isStyle",anchor:"#isStyle"},{text:"?isPage",anchor:"#isPage"},{text:"?isComponent",anchor:"#isComponent"},{text:"?async",anchor:"#async"}]}]},{text:"周边拓展",items:[{link:"extend",text:"@mpxjs/fetch",headers:[{text:"fetch",anchor:"#fetch"},{text:"CancelToken",anchor:"#CancelToken"},{text:"XFetch",anchor:"#XFetch"},{text:"interceptors",anchor:"#interceptors"},{text:"proxy 代理",anchor:"#proxy"},{text:"useFetch",anchor:"#useFetch"}]},{link:"extend",text:"其他",headers:[{text:"api-proxy",anchor:"#api-proxy"},{text:"webview-bridge",anchor:"#webview-bridge"},{text:"size-report",anchor:"#size-report"},{text:"i18n",anchor:"#i18n"}]}]}],r=e=>e.toLowerCase().replace(/-/g," ");var n={data:()=>({query:""}),computed:{filtered(){const e=r(this.query),t=t=>r(t).includes(e);return a.map(e=>{if(t(e.text))return e;const o=e.items.map(e=>{if(t(e.text))return e;const o=e.headers.filter(({text:e,anchor:o})=>t(e)||t(o));return o.length?{text:e.text,link:e.link,headers:o}:null}).filter(e=>e);return o.length?{text:e.text,items:o}:null}).filter(e=>e)}},methods:{slugify:e=>e.replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g,"-").replace(/\-{2,}/g,"-").replace(/^\-+|\-+$/g,"").replace(/^(\d)/,"_$1").toLowerCase()}},c=(o(337),o(4)),i=Object(c.a)(n,(function(){var e=this,t=e._self._c;return t("div",{attrs:{id:"api-index"}},[t("div",{staticClass:"header"},[t("h1",[e._v("API 参考")]),e._v(" "),t("div",{staticClass:"api-filter"},[t("label",{attrs:{for:"api-filter"}},[e._v("过滤")]),e._v(" "),t("input",{directives:[{name:"model",rawName:"v-model",value:e.query,expression:"query"}],attrs:{type:"search",placeholder:"Enter keyword",id:"api-filter"},domProps:{value:e.query},on:{input:function(t){t.target.composing||(e.query=t.target.value)}}})])]),e._v(" "),e._l(e.filtered,(function(o){return t("div",{key:o.text,staticClass:"api-section"},[t("h2",{attrs:{id:e.slugify(o.text)}},[e._v(e._s(o.text))]),e._v(" "),t("div",{staticClass:"api-groups"},e._l(o.items,(function(o){return t("div",{key:o.text,staticClass:"api-group"},[o.text?t("h3",[e._v(e._s(o.text))]):e._e(),e._v(" "),t("ul",e._l(o.headers,(function(a){return t("li",{key:a.anchor},[t("a",{attrs:{href:o.link+".html#"+e.slugify(a.anchor)}},[e._v(e._s(a.text))])])})),0)])})),0)])})),e._v(" "),e.filtered.length?e._e():t("div",{staticClass:"no-match"},[e._v('\n    没有匹配到 API "'+e._s(e.query)+'"\n  ')])],2)}),[],!1,null,"a2f64316",null);t.default=i.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/3.145e69cd.js b/docs-vuepress/.vuepress/dist/assets/js/3.145e69cd.js
new file mode 100644
index 0000000000..91b85b185d
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/3.145e69cd.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{295:function(t,e){t.exports=function(t){return null==t}},298:function(t,e,a){},299:function(t,e,a){},305:function(t,e,a){},307:function(t,e,a){"use strict";a(298)},308:function(t,e,a){var n=a(27),s=a(15),i=a(22);t.exports=function(t){return"string"==typeof t||!s(t)&&i(t)&&"[object String]"==n(t)}},309:function(t,e,a){"use strict";a(299)},310:function(t,e,a){},323:function(t,e,a){"use strict";a.r(e);var n=a(295),s=a.n(n),i=a(290),r={name:"PageEdit",computed:{lastUpdated(){return this.$page.lastUpdated},lastUpdatedText(){return"string"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:"string"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:"Last Updated"},editLink(){const t=s()(this.$page.frontmatter.editLink)?this.$site.themeConfig.editLinks:this.$page.frontmatter.editLink,{repo:e,docsDir:a="",docsBranch:n="master",docsRepo:i=e}=this.$site.themeConfig;return t&&i&&this.$page.relativePath?this.createEditLink(e,i,a,n,this.$page.relativePath):null},editLinkText(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||"Edit this page"}},methods:{createEditLink(t,e,a,n,s){if(/bitbucket.org/.test(e)){return e.replace(i.a,"")+"/src"+`/${n}/`+(a?a.replace(i.a,"")+"/":"")+s+`?mode=edit&spa=0&at=${n}&fileviewer=file-view-default`}if(/gitlab.com/.test(e)){return e.replace(i.a,"")+"/-/edit"+`/${n}/`+(a?a.replace(i.a,"")+"/":"")+s}return(i.i.test(e)?e:"https://github.com/"+e).replace(i.a,"")+"/edit"+`/${n}/`+(a?a.replace(i.a,"")+"/":"")+s}}},o=(a(307),a(4)),l=Object(o.a)(r,(function(){var t=this,e=t._self._c;return e("footer",{staticClass:"page-edit"},[t.editLink?e("div",{staticClass:"edit-link"},[e("a",{attrs:{href:t.editLink,target:"_blank",rel:"noopener noreferrer"}},[t._v(t._s(t.editLinkText))]),t._v(" "),e("OutboundLink")],1):t._e(),t._v(" "),t.lastUpdated?e("div",{staticClass:"last-updated"},[e("span",{staticClass:"prefix"},[t._v(t._s(t.lastUpdatedText)+":")]),t._v(" "),e("span",{staticClass:"time"},[t._v(t._s(t.lastUpdated))])]):t._e()])}),[],!1,null,null,null);e.default=l.exports},324:function(t,e,a){"use strict";a.r(e);a(69);var n=a(290),s=a(308),i=a.n(s),r=a(295),o=a.n(r),l={name:"PageNav",props:["sidebarItems"],computed:{prev(){return u(c.PREV,this)},next(){return u(c.NEXT,this)}}};const c={NEXT:{resolveLink:function(t,e){return d(t,e,1)},getThemeLinkConfig:({nextLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.next},PREV:{resolveLink:function(t,e){return d(t,e,-1)},getThemeLinkConfig:({prevLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.prev}};function u(t,{$themeConfig:e,$page:a,$route:s,$site:r,sidebarItems:l}){const{resolveLink:c,getThemeLinkConfig:u,getPageLinkConfig:d}=t,h=u(e),p=d(a),f=o()(p)?h:p;return!1===f?void 0:i()(f)?Object(n.k)(r.pages,f,s.path):c(a,l)}function d(t,e,a){const n=[];!function t(e,a){for(let n=0,s=e.length;n<s;n++)"group"===e[n].type?t(e[n].children||[],a):a.push(e[n])}(e,n);for(let e=0;e<n.length;e++){const s=n[e];if("page"===s.type&&s.path===decodeURIComponent(t.path))return n[e+a]}}var h=l,p=(a(309),a(4)),f=Object(p.a)(h,(function(){var t=this,e=t._self._c;return t.prev||t.next?e("div",{staticClass:"page-nav"},[e("p",{staticClass:"inner"},[t.prev?e("span",{staticClass:"prev"},[t._v("\n      ←\n      "),"external"===t.prev.type?e("a",{staticClass:"prev",attrs:{href:t.prev.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n\n        "),e("OutboundLink")],1):e("RouterLink",{staticClass:"prev",attrs:{to:t.prev.path}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n      ")])],1):t._e(),t._v(" "),t.next?e("span",{staticClass:"next"},["external"===t.next.type?e("a",{attrs:{href:t.next.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n\n        "),e("OutboundLink")],1):e("RouterLink",{attrs:{to:t.next.path}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n      ")]),t._v("\n      →\n    ")],1):t._e()])]):t._e()}),[],!1,null,null,null);e.default=f.exports},328:function(t,e,a){"use strict";a(305)},330:function(t,e,a){"use strict";a(310)},348:function(t,e,a){"use strict";a.r(e);var n={name:"Home",components:{NavLink:a(293).default},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},s=(a(328),a(4)),i=Object(s.a)(n,(function(){var t=this,e=t._self._c;return e("main",{staticClass:"home",attrs:{"aria-labelledby":null!==t.data.heroText?"main-title":null}},[e("header",{staticClass:"hero"},[t.data.heroImage?e("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?e("h1",{attrs:{id:"main-title"}},[t._v("\n      "+t._s(t.data.heroText||t.$title||"Hello")+"\n    ")]):t._e(),t._v(" "),null!==t.data.tagline?e("p",{staticClass:"description"},[t._v("\n      "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n    ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?e("p",{staticClass:"action"},[e("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?e("div",{staticClass:"features"},t._l(t.data.features,(function(a,n){return e("div",{key:n,staticClass:"feature"},[e("h2",[t._v(t._s(a.title))]),t._v(" "),e("p",[t._v(t._s(a.details))])])})),0):t._e(),t._v(" "),e("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?e("div",{staticClass:"footer"},[t._v("\n    "+t._s(t.data.footer)+"\n  ")]):e("Content",{staticClass:"footer",attrs:{"slot-key":"footer"}})],1)}),[],!1,null,null,null);e.default=i.exports},350:function(t,e,a){"use strict";a.r(e);var n=a(323),s=a(324),i={components:{PageEdit:n.default,PageNav:s.default},props:["sidebarItems"]},r=(a(330),a(4)),o=Object(r.a)(i,(function(){var t=this._self._c;return t("main",{staticClass:"page"},[this._t("top"),this._v(" "),t("Content",{staticClass:"theme-default-content"}),this._v(" "),t("PageEdit"),this._v(" "),t("PageNav",this._b({},"PageNav",{sidebarItems:this.sidebarItems},!1)),this._v(" "),this._t("bottom")],2)}),[],!1,null,null,null);e.default=o.exports},357:function(t,e,a){"use strict";var n=a(348),s=a(70),i=a(350),r=a(369),o=a(290),l={name:"Layout",components:{Home:n.default,Page:i.default,Sidebar:r.default,Navbar:s.default},data:()=>({isSidebarOpen:!1}),computed:{shouldShowNavbar(){const{themeConfig:t}=this.$site,{frontmatter:e}=this.$page;return!1!==e.navbar&&!1!==t.navbar&&(this.$title||t.logo||t.repo||t.nav||this.$themeLocaleConfig.nav)},shouldShowSidebar(){const{frontmatter:t}=this.$page;return!t.home&&!1!==t.sidebar&&this.sidebarItems.length},sidebarItems(){return Object(o.l)(this.$page,this.$page.regularPath,this.$site,this.$localePath)},pageClasses(){const t=this.$page.frontmatter.pageClass;return[{"no-navbar":!this.shouldShowNavbar,"sidebar-open":this.isSidebarOpen,"no-sidebar":!this.shouldShowSidebar},t]}},mounted(){this.$router.afterEach(()=>{this.isSidebarOpen=!1})},methods:{toggleSidebar(t){this.isSidebarOpen="boolean"==typeof t?t:!this.isSidebarOpen,this.$emit("toggle-sidebar",this.isSidebarOpen)},onTouchStart(t){this.touchStart={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}},onTouchEnd(t){const e=t.changedTouches[0].clientX-this.touchStart.x,a=t.changedTouches[0].clientY-this.touchStart.y;Math.abs(e)>Math.abs(a)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}},c=a(4),u=Object(c.a)(l,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?e("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),e("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),e("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("sidebar-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("sidebar-bottom")]},proxy:!0}],null,!0)}),t._v(" "),t.$page.frontmatter.home?e("Home"):e("Page",{attrs:{"sidebar-items":t.sidebarItems},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("page-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("page-bottom")]},proxy:!0}],null,!0)})],1)}),[],!1,null,null,null);e.a=u.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/30.04d1a7ea.js b/docs-vuepress/.vuepress/dist/assets/js/30.04d1a7ea.js
new file mode 100644
index 0000000000..cdc93a389c
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/30.04d1a7ea.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{347:function(t,e,n){},368:function(t,e,n){"use strict";n(347)},373:function(t,e,n){"use strict";n.r(e);var s=n(25),a=n(0);const o={"/":{message:"New content is available.",buttonText:"Refresh"},"/zh/":{message:"发现新内容可用",buttonText:"刷新"},"/ru/":{message:"Доступен новый контент.",buttonText:"Обновить"},"/uk/":{message:"Доступний новий контент.",buttonText:"Оновити"},"/ja/":{message:"新しいコンテンツがあります。",buttonText:"更新する"},"/es/":{message:"Hay nuevo contenido disponible.",buttonText:"Actualizar"}};var u={name:"SWUpdatePopup",data:()=>({rawPopupConfig:{message:"文档有更新啦！",buttonText:"刷新"},updateEvent:null}),computed:{popupConfig(){return Object(a.g)(this,this.rawPopupConfig)},enabled(){return Boolean(this.popupConfig&&this.updateEvent)},message(){const t=this.popupConfig;return t&&t.message||o["/"].message},buttonText(){const t=this.popupConfig;return t&&t.buttonText||o["/"].buttonText}},created(){s.a.$on("sw-updated",this.onSWUpdated),!0==={message:"文档有更新啦！",buttonText:"刷新"}&&(this.rawPopupConfig=o)},methods:{onSWUpdated(t){this.updateEvent=t},reload(){this.updateEvent&&(this.updateEvent.skipWaiting().then(()=>{location.reload(!0)}),this.updateEvent=null)}}},p=(n(368),n(4)),i=Object(p.a)(u,(function(){var t=this,e=t._self._c;return e("transition",{attrs:{name:"sw-update-popup"}},[t._t("default",(function(){return[t.enabled?e("div",{staticClass:"sw-update-popup"},[t._v("\n      "+t._s(t.message)+"\n\n      "),e("br"),t._v(" "),e("button",{on:{click:t.reload}},[t._v("\n        "+t._s(t.buttonText)+"\n      ")])]):t._e()]}),{reload:t.reload,enabled:t.enabled,message:t.message,buttonText:t.buttonText})],2)}),[],!1,null,"613ca22e",null);e.default=i.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/31.ec06bf2f.js b/docs-vuepress/.vuepress/dist/assets/js/31.ec06bf2f.js
new file mode 100644
index 0000000000..bf7dfff393
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/31.ec06bf2f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{291:function(t,e,n){},294:function(t,e,n){"use strict";n(291)},296:function(t,e,n){"use strict";n.r(e);var s={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},i=(n(294),n(4)),o=Object(i.a)(s,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/32.f29d2cd1.js b/docs-vuepress/.vuepress/dist/assets/js/32.f29d2cd1.js
new file mode 100644
index 0000000000..8084abd33f
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/32.f29d2cd1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{340:function(t,c,n){},359:function(t,c,n){"use strict";n(340)},381:function(t,c,n){"use strict";n.r(c);n(359);var i=n(4),s=Object(i.a)({},(function(){var t=this,c=t._self._c;return c("div",{staticClass:"sidebar-button",on:{click:function(c){return t.$emit("toggle-sidebar")}}},[c("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[c("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null);c.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/33.936d018e.js b/docs-vuepress/.vuepress/dist/assets/js/33.936d018e.js
new file mode 100644
index 0000000000..de335fa687
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/33.936d018e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{366:function(t,s,e){t.exports=e.p+"assets/img/start-tips2.7d8836f8.png"},367:function(t,s,e){t.exports=e.p+"assets/img/start-tips1.3b76ac97.png"},435:function(t,s,e){"use strict";e.r(s);var i=e(4),a=Object(i.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"ide-高亮配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ide-高亮配置"}},[t._v("#")]),t._v(" IDE 高亮配置")]),t._v(" "),s("ul",[s("li",[s("RouterLink",{attrs:{to:"/guide/basic/ide.html#IntelliJ"}},[t._v("IntelliJ")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/ide.html#vscode"}},[t._v("vscode")])],1)]),t._v(" "),s("h2",{attrs:{id:"intellij"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#intellij"}},[t._v("#")]),t._v(" IntelliJ")]),t._v(" "),s("p",[t._v("如果使用 IntelliJ 系 IDE 开发，可将"),s("code",[t._v(".mpx")]),t._v("后缀文件关联到"),s("code",[t._v("vue")]),t._v("模板类型，按"),s("code",[t._v("vue")]),t._v("模板解析。")]),t._v(" "),s("p",[s("img",{attrs:{src:e(366),alt:"关联文件类型"}})]),t._v(" "),s("p",[t._v("但会报一个"),s("code",[t._v("warning")]),t._v("提示有重复的"),s("code",[t._v("script")]),t._v("标签，关闭该警告即可。")]),t._v(" "),s("p",[s("img",{attrs:{src:e(367),alt:"关闭警告"}})]),t._v(" "),s("h2",{attrs:{id:"vscode"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#vscode"}},[t._v("#")]),t._v(" vscode")]),t._v(" "),s("blockquote",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/vscode-mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("git地址"),s("OutboundLink")],1),t._v("，有任何vscode插件的问题和需求可在仓库中提issue")])]),t._v(" "),s("blockquote",[s("p",[t._v("下载")])]),t._v(" "),s("ol",[s("li",[s("p",[s("a",{attrs:{href:"https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("下载地址"),s("OutboundLink")],1)])]),t._v(" "),s("li",[s("p",[t._v("也可直接在vscode扩展处搜索mpx即可下载")])])]),t._v(" "),s("blockquote",[s("p",[t._v("使用")])]),t._v(" "),s("h3",{attrs:{id:"插件功能介绍"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#插件功能介绍"}},[t._v("#")]),t._v(" 插件功能介绍")]),t._v(" "),s("ul",[s("li",[t._v("高亮")]),t._v(" "),s("li",[t._v("emmet")]),t._v(" "),s("li",[t._v("跳转定义")]),t._v(" "),s("li",[t._v("自动补全")]),t._v(" "),s("li",[t._v("eslint")]),t._v(" "),s("li",[t._v("格式化")])]),t._v(" "),s("p",[s("a",{attrs:{href:"https://gift-static.hongyibo.com.cn/static/kfpub/3227/vscodes.mp4",target:"_blank",rel:"noopener noreferrer"}},[t._v("视频介绍"),s("OutboundLink")],1)]),t._v(" "),s("h4",{attrs:{id:"高亮"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#高亮"}},[t._v("#")]),t._v(" 高亮")]),t._v(" "),s("p",[t._v("  与其他语言插件无异，提供相应代码的高亮，因为Mpx分为四个模块，所以每个模块都有相应的语法高亮，还包括注释快捷键，也区分了相应模块，比如"),s("code",[t._v("<template>")]),t._v("中使用的是html的高亮，且注释是"),s("code",[t._v("\x3c!-- --\x3e")]),t._v(",而"),s("code",[t._v("<script>")]),t._v("中就是"),s("code",[t._v("js")]),t._v("的高亮，注释是"),s("code",[t._v("//")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/codelight.jpeg",alt:"image"}})]),t._v(" "),s("h4",{attrs:{id:"emmet"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#emmet"}},[t._v("#")]),t._v(" emmet")]),t._v(" "),s("p",[t._v("  早在使用sublime时就在使用emmet插件，以提高写HTML的效率。")]),t._v(" "),s("p",[t._v("  比如键入多个"),s("code",[t._v("<view>")]),t._v("标签："),s("code",[t._v("view*n")]),t._v("。")]),t._v(" "),s("p",[t._v("  比如一些标签的快速键入，配合"),s("code",[t._v("tab")]),t._v("或者"),s("code",[t._v("Enter")]),t._v("键快速键入")]),t._v(" "),s("p",[t._v("  不仅仅是"),s("code",[t._v("<template>")]),t._v("模块，css，scss，less，stylus，sass模块也有相应的快捷指令")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200258.gif",alt:"image"}}),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200331.gif",alt:"image"}})]),t._v(" "),s("p",[t._v("提示组件标签")]),t._v(" "),s("p",[t._v("我们可以像编写 html 一样，只要输入对应的单词就会出现对应的标签，比如输入的是 view ，然后按下 tab 键，即可输入 "),s("code",[t._v("<view></view>")]),t._v(" 标签。")]),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi1_v2.png",width:"500",alt:"图片名称"}}),t._v(" "),s("p",[t._v("组件指令提示")]),t._v(" "),s("p",[t._v('指令的提示类似于 vue 文件一样，只要输入对应的指令前缀就会出现对应的完整指令，比如输入的是 wx ，然后按下 tab 键，就可以输入 wx:if="" 指令。')]),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi2_v2.png",width:"500",alt:"图片名称"}}),t._v(" "),s("p",[t._v("组件属性提示")]),t._v(" "),s("p",[t._v("微信小程序的每个组件都有一些属性选项，在编写组件的时候输入前缀就会出现完整的属性，并且包含了属性的说明和属性的类型。")]),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi3_v2.png",width:"500",alt:"图片名称"}}),t._v(" "),s("p",[t._v("组件事件提示")]),t._v(" "),s("p",[t._v('给组件绑定事件，也是只需要输入事件的前缀，就会出现完整的事件列表，然后按下 tab 键，即可输入 bindtap="" 类似的事件。')]),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi4_v2.png",width:"500",alt:"图片名称"}}),t._v(" "),s("h4",{attrs:{id:"跳转定义"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#跳转定义"}},[t._v("#")]),t._v(" 跳转定义")]),t._v(" "),s("p",[t._v("  command + 鼠标左键 查看定义位置，也可以在当前文件查看内容，决定是否跳转")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200848.gif",alt:"image"}})]),t._v(" "),s("h4",{attrs:{id:"自动补全"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#自动补全"}},[t._v("#")]),t._v(" 自动补全")]),t._v(" "),s("p",[t._v("  毕竟Mpx是个小程序的框架，对于微信和支付宝的api快速补全snippets没有怎么能行，可在"),s("code",[t._v("<script>")]),t._v("中通过键入部分文字插入相应的代码块")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-201858.gif",alt:"image"}})]),t._v(" "),s("h4",{attrs:{id:"eslint"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#eslint"}},[t._v("#")]),t._v(" eslint")]),t._v(" "),s("p",[t._v("  eslint这块要分两部分来讲，一部分是插件实现了按照模块区分的简单的eslint，另一部分是要配合eslint的vscode插件，配置.eslintrc高阶的eslint检测。")]),t._v(" "),s("p",[t._v("部分一可通过配置开关")]),t._v(" "),s("p",[s("code",[t._v("<template>")]),t._v("是通过我们自己实现的eslint插件"),s("code",[t._v("eslint-plugin-mpx")]),t._v("，通过调eslint提供的引擎api，返回eslint校验的结果，我们再进行展示。")]),t._v(" "),s("p",[s("code",[t._v("<script>")]),t._v("中是通过调用typescript提供的检测js代码的api来进行检测，返回\n的校验结果也是不太符合语法的，基础的检测，不会过于苛刻")]),t._v(" "),s("p",[s("code",[t._v("<style>")]),t._v("中会根据lang的设定进行相应的检测，此检测是vscode官方提供的库\n"),s("code",[t._v("vscode-css-languageservice")])]),t._v(" "),s("p",[s("code",[t._v("<json>")]),t._v("模块同tempalte，用到了一个eslint插件"),s("code",[t._v("eslint-plugin-jsonc")]),t._v("来检测json的部分")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/vscodeseting.png",alt:"image"}})]),t._v(" "),s("p",[t._v("部分二可参照此"),s("a",{attrs:{href:"https://github.com/mpx-ecology/vscode-mpx/issues/35",target:"_blank",rel:"noopener noreferrer"}},[t._v("链接"),s("OutboundLink")],1),t._v("配置")]),t._v(" "),s("h4",{attrs:{id:"代码格式化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#代码格式化"}},[t._v("#")]),t._v(" 代码格式化")]),t._v(" "),s("p",[t._v("支持代码格式化 JavaScript  (ts)· JSON · CSS (less/scss/stylus) · WXML，通过鼠标右键选择代码格式化文档。")]),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/format_v2.png",width:"500",alt:"图片名称"}}),t._v(" "),s("p",[t._v("默认每个区块都是调用 Prettier 这个库来完成格式化的，当然也可以在设置中切换成使用其他库。")]),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/format2_v3.png",width:"500",alt:"图片名称"}}),t._v(" "),s("p",[t._v("如果切换成 none 将会禁用格式化。")]),t._v(" "),s("p",[t._v("Prettier 支持从项目根目录读取 .prettierrc 配置文件。配置选项可以参考 "),s("a",{attrs:{href:"https://prettier.io/docs/en/configuration.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("官方"),s("OutboundLink")],1),t._v(" 文档。.prettierrc 文件可以使用 JSON 语法编写，比如下面这样：")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('{\n  "tabWidth": 4,\n  "semi": false,\n  "singleQuote": true\n}\n')])])]),s("p",[t._v("注意：由于 Prettier 这个库不支持格式化 stylus 语法，所以 stylus 的格式化使用另外一个 stylus-supremacy 库，配置 stylus 格式化规则只能在编辑器的 settings 中配置。")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('"mpx.format.defaultFormatterOptions": {\n  "stylus-supremacy": {\n    "insertColons": false, // 不使用括号\n    "insertSemicolons": false, // 不使用冒号\n    "insertBraces": false, // 不使用分号\n    "insertNewLineAroundImports": true, // import之后插入空行\n    "insertNewLineAroundBlocks": false // 每个块不添加空行\n  }\n}\n')])])]),s("p",[t._v("总结一下，配置格式化有两种方式，一种是使用 .prettierrc 文件的形式配置，另一种是在编辑器的 settings 中自行配置，通过 mpx.format.defaultFormatterOptions 选项。")])])}),[],!1,null,null,null);s.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/34.f494d685.js b/docs-vuepress/.vuepress/dist/assets/js/34.f494d685.js
new file mode 100644
index 0000000000..3739ab3bf3
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/34.f494d685.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{290:function(t,n,e){"use strict";e.d(n,"d",(function(){return r})),e.d(n,"a",(function(){return s})),e.d(n,"i",(function(){return u})),e.d(n,"f",(function(){return a})),e.d(n,"g",(function(){return l})),e.d(n,"h",(function(){return c})),e.d(n,"b",(function(){return f})),e.d(n,"e",(function(){return h})),e.d(n,"k",(function(){return p})),e.d(n,"l",(function(){return d})),e.d(n,"c",(function(){return b})),e.d(n,"j",(function(){return m}));e(69),e(10),e(19),e(48),e(30);const r=/#.*$/,i=/\.(md|html)$/,s=/\/$/,u=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(r,"").replace(i,"")}function a(t){return u.test(t)}function l(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function f(t){if(a(t))return t;const n=t.match(r),e=n?n[0]:"",i=o(t);return s.test(i)?t:i+".html"+e}function h(t,n){const e=decodeURIComponent(t.hash),i=function(t){const n=t.match(r);if(n)return n[0]}(n);if(i&&e!==i)return!1;return o(t.path)===o(n)}function p(t,n,e){if(a(n))return{type:"external",path:n};e&&(n=function(t,n,e){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return n+t;const i=n.split("/");e&&i[i.length-1]||i.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t<s.length;t++){const n=s[t];".."===n?i.pop():"."!==n&&i.push(n)}""!==i[0]&&i.unshift("");return i.join("/")}(n,e));const r=o(n);for(let n=0;n<t.length;n++)if(o(t[n].regularPath)===r)return Object.assign({},t[n],{type:"page",path:f(t[n].path)});return console.error(`[vuepress] No matching page found for sidebar item "${n}"`),{}}function d(t,n,e,r){const{pages:i,themeConfig:s}=e,u=r&&s.locales&&s.locales[r]||s;if("auto"===(t.frontmatter.sidebar||u.sidebar||s.sidebar))return g(t);const o=u.sidebar||s.sidebar;if(o){const{base:e,config:r}=function(t,n){if(Array.isArray(n))return{base:"/",config:n};for(const r in n)if(0===(e=t,/(\.html|\/)$/.test(e)?e:e+"/").indexOf(encodeURI(r)))return{base:r,config:n[r]};var e;return{}}(n,o);return"auto"===r?g(t):r?r.map(t=>function t(n,e,r,i=1){if("string"==typeof n)return p(e,n,r);if(Array.isArray(n))return Object.assign(p(e,n[0],r),{title:n[1]});{const s=n.children||[];return 0===s.length&&n.path?Object.assign(p(e,n.path,r),{title:n.title}):{type:"group",path:n.path,title:n.title,sidebarDepth:n.sidebarDepth,initialOpenGroupIndex:n.initialOpenGroupIndex,children:s.map(n=>t(n,e,r,i+1)),collapsable:!1!==n.collapsable}}}(t,i,e)):[]}return[]}function g(t){const n=b(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:n.map(n=>({type:"auto",title:n.title,basePath:t.path,path:t.path+"#"+n.slug,children:n.children||[]}))}]}function b(t){let n;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?n=t:n&&(n.children||(n.children=[])).push(t)}),t.filter(t=>2===t.level)}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},293:function(t,n,e){"use strict";e.r(n);e(10),e(47);var r=e(290),i={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(r.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(r.g)(this.link)||Object(r.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(r.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(r.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},s=e(4),u=Object(s.a)(i,(function(){var t=this,n=t._self._c;return t.isInternal?n("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(n){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):n("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?n("OutboundLink"):t._e()],1)}),[],!1,null,null,null);n.default=u.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/35.c3ed1ff7.js b/docs-vuepress/.vuepress/dist/assets/js/35.c3ed1ff7.js
new file mode 100644
index 0000000000..40ee107240
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/35.c3ed1ff7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{385:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"安装使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装使用"}},[t._v("#")]),t._v(" 安装使用")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 安装mpx命令行工具")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-g")]),t._v(" @mpxjs/cli\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 初始化项目")]),t._v("\nmpx create "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("project-name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 进入项目目录")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("cd")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("project-name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# development")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" run serve\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# production")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" run build\n")])])]),s("p",[t._v("使用小程序开发者工具打开项目文件夹下dist中对应平台的文件夹即可预览效果。")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/36.d2c9afa9.js b/docs-vuepress/.vuepress/dist/assets/js/36.d2c9afa9.js
new file mode 100644
index 0000000000..0598587d4b
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/36.d2c9afa9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{384:function(t,s,a){"use strict";a.r(s);var n=a(4),r=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"全局配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#全局配置"}},[t._v("#")]),t._v(" 全局配置")]),t._v(" "),s("p",[s("code",[t._v("Mpx.config")]),t._v(" 是一个对象，包含 Mpx 的全局配置。可以在启动应用之前修改下列 property：")]),t._v(" "),s("h2",{attrs:{id:"usestrictdiff"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#usestrictdiff"}},[t._v("#")]),t._v(" useStrictDiff")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("每次有数据变更时，是否使用严格的 diff 算法。如果项目中有大数据集的渲染建议使用，可以提升效率。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("useStrictDiff "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注意：由于微信小程序的bug，同时使用"),s("code",[t._v("useStrictDiff")]),t._v("和增强指令"),s("code",[t._v("wx:style")]),t._v("时，要注意更改数据的方式。如下所示：")])]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 入口文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("useStrictDiff "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 页面page文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("template"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view wx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("style"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{{style}}"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("test"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("template"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'18px'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLoad")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当useStrictDiff设置true时，需要用setData的方式设置整个style对象")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'18px'")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this.style.color = 'blue' // 当useStrictDiff设置true时，不能使用这种方式，style不会生效")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("h2",{attrs:{id:"ignorewarning"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ignorewarning"}},[t._v("#")]),t._v(" ignoreWarning")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("是否忽略运行时的 warning 信息，默认不忽略。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ignoreWarning "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n")])])]),s("h2",{attrs:{id:"ignoreproxywhitelist"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ignoreproxywhitelist"}},[t._v("#")]),t._v(" ignoreProxyWhiteList")]),t._v(" "),s("p",[s("code",[t._v("Array<string> = ['id']")])]),t._v(" "),s("p",[t._v("Mpx 实例上的 key（包括data、computed、methods）如果有重名冲突，在"),s("code",[t._v("ignoreProxyWhiteList")]),t._v("配置中的属性会被最新的覆盖；而不在"),s("code",[t._v("ignoreProxyWhiteList")]),t._v("配置中的属性，不会被覆盖。")]),t._v(" "),s("blockquote",[s("p",[t._v("只要有重名冲突均会有报错提示。")])]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ignoreConflictWhiteList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'id'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("h2",{attrs:{id:"observeclassinstance"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#observeclassinstance"}},[t._v("#")]),t._v(" observeClassInstance")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("当需要对 class 对象的数据进行响应性转化，需要开启该选项。")]),t._v(" "),s("h2",{attrs:{id:"proxyeventhandler"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#proxyeventhandler"}},[t._v("#")]),t._v(" proxyEventHandler")]),t._v(" "),s("p",[s("code",[t._v("Function")])]),t._v(" "),s("p",[t._v("需要代理的事件的钩子方法，该钩子方法仅对内联传参事件或 "),s("RouterLink",{attrs:{to:"/api/compile.html#forceproxyeventrules"}},[t._v("forceProxyEventRules")]),t._v(" 规则匹配的事件生效。")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("proxyEventHandler")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 入参为 event 事件对象")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"setdatahandler"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setdatahandler"}},[t._v("#")]),t._v(" setDataHandler")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setDataHandler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ComponentIns"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),t._v("\n")])])]),s("p",[t._v("页面/组件状态更新时，使用该方法可以对 setData 调用进行监听，可以用来统计 setData 调用次数和数据量的统计，方法的入参是 setData 传输的 data 和当前组件实例。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("setDataHandler")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" comp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setData trigger'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"forceflushsync"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#forceflushsync"}},[t._v("#")]),t._v(" forceFlushSync")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("Mpx 中更改响应性状态时，最终页面的更新并不是同步立即生效的，而是由 Mpx 将它们缓存在一个队列中， 异步等到下一个 tick 一起执行，如果想将所有队列的执行改为同步执行，我们可以通过该配置来实现。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("forceFlushSync "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n")])])]),s("h2",{attrs:{id:"errorhandler"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#errorhandler"}},[t._v("#")]),t._v(" errorHandler")]),t._v(" "),s("p",[s("code",[t._v("Function")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("errorHandler")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("errmsg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" error")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// errmsg: 框架内部运行报错的报错归类信息，例如当执行一个watch方法报错时，会是 "Unhandled error occurs during execution of watch callback!"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// location: 具体报错的代码路径，可选项，不一定存在")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// error: 具体的错误堆栈，可选项，不一定存在")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// handle error")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Mpx 框架运行时报错捕获感知处理函数。")]),t._v(" "),s("ul",[s("li",[t._v("Mpx 框架生命周期执行错误；")]),t._v(" "),s("li",[t._v("Mpx 中的 computed、watch 等内置方法执行报错；")]),t._v(" "),s("li",[t._v("Mpx 框架的运行时的检测报错，例如存在目标平台不支持的属性，入参出参类型错误等；")])]),t._v(" "),s("p",[t._v("同时被捕获的错误会通过 console.error 输出。")]),t._v(" "),s("h2",{attrs:{id:"webrouteconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#webrouteconfig"}},[t._v("#")]),t._v(" webRouteConfig")]),t._v(" "),s("p",[t._v("Mpx 通过 config 暴露出 webRouteConfig 配置项，在 web 环境可以对路由进行配置。\n此配置后续将被废弃，请使用 webConfig 进行配置")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("用法")]),t._v(":")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webRouteConfig "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'history'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"webconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#webconfig"}},[t._v("#")]),t._v(" webConfig")]),t._v(" "),s("p",[t._v("web 环境下的一些配置，如路由模式，页面切换动画效果等")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("用法")]),t._v(":")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 修改路由模式")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("routeConfig "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'history'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 禁用页面切换动画")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("disablePageTransition "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/37.4e1eee2c.js b/docs-vuepress/.vuepress/dist/assets/js/37.4e1eee2c.js
new file mode 100644
index 0000000000..1f98c5adce
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/37.4e1eee2c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{383:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"内建组件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#内建组件"}},[t._v("#")]),t._v(" 内建组件")]),t._v(" "),s("h2",{attrs:{id:"component"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#component"}},[t._v("#")]),t._v(" component")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("is "),s("code",[t._v("string")]),t._v(" : 动态渲染组件，通过改变"),s("code",[t._v("is")]),t._v("的值，来渲染不同的组件")])]),t._v(" "),s("li",[s("p",[t._v("range "),s("code",[t._v("string")]),t._v(" : 使用 range 来指定可能渲染的组件，不传递时则为 全局注册 + usingComponents 中注册的所有组件，存在多个组件时使用逗号 "),s("code",[t._v(",")]),t._v(" 分隔")])])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ComponentName 是在全局或者组件中完成注册的组件名称 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("component")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("is")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ComponentName}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 只会展示 compA 或者 compB 组件 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("component")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("is")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ComponentName}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("range")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("compA,compB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("strong",[t._v("参考")]),t._v("："),s("RouterLink",{attrs:{to:"/guide/basic/component.html#动态组件"}},[t._v("动态组件")])],1),t._v(" "),s("h2",{attrs:{id:"slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[t._v("#")]),t._v(" slot")]),t._v(" "),s("ul",[s("li",[t._v("name "),s("code",[t._v("string")]),t._v(" : 用于命名插槽")])]),t._v(" "),s("p",[s("code",[t._v("<slot>")]),t._v(" 元素作为组件模板中的内容分发插槽，"),s("code",[t._v("<slot>")]),t._v("元素自身将被替换。")]),t._v(" "),s("p",[t._v("详细用法，可参考下面的链接。")]),t._v(" "),s("p",[s("strong",[t._v("参考")]),t._v("："),s("RouterLink",{attrs:{to:"/guide/basic/component.html#slot"}},[t._v("slot")])],1)])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/38.7826170e.js b/docs-vuepress/.vuepress/dist/assets/js/38.7826170e.js
new file mode 100644
index 0000000000..31d5badf90
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/38.7826170e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{386:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"编译构建"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编译构建"}},[t._v("#")]),t._v(" 编译构建")]),t._v(" "),s("p",[t._v("对于使用 "),s("code",[t._v("@mpxjs/cli@3.x")]),t._v(" 脚手架初始化的项目而言，编译构建相关的配置统一收敛至项目根目录下的 "),s("code",[t._v("vue.config.js")]),t._v(" 进行配置。一个新项目初始化的 "),s("code",[t._v("vue.config.js")]),t._v(" 如下图，相较于 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 版本，在新的初始化项目当中原有的编译构建配置都收敛至 cli 插件当中进行管理和维护，同时还对外暴露相关的接口或者 api 使得开发者能自定义修改 cli 插件当中默认的配置。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx webpack plugin options")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// @mpxjs/unocss-plugin 相关的配置")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("对于使用 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 脚手架初始化的项目，编译构建配置涉及到 mpx 插件相关的配置主要是在 "),s("code",[t._v("config")]),t._v(" 目录下 "),s("code",[t._v("mpxPlugin.conf.js")]),t._v("，涉及到 webpack 本身的配置主要是在 "),s("code",[t._v("build")]),t._v(" 目录下。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// config/mpxPlugin.conf.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx webpack plugin options")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"类型定义"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#类型定义"}},[t._v("#")]),t._v(" 类型定义")]),t._v(" "),s("p",[t._v("为了便于对编译配置的数据类型进行准确地描述，我们在这里对一些常用的配置类型进行定义")]),t._v(" "),s("h3",{attrs:{id:"rules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#rules"}},[t._v("#")]),t._v(" Rules")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Condition")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resourcePath"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" RegExp\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rules")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  include"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Condition "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Condition"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  exclude"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Condition "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Condition"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"mpxwebpackplugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin"}},[t._v("#")]),t._v(" MpxWebpackPlugin")]),t._v(" "),s("p",[t._v("Mpx 编译构建跨平台小程序和 web 的 webpack 主插件，安装示例如下：")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/webpack-plugin\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pnpm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/webpack-plugin\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("yarn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/webpack-plugin\n")])])]),s("p",[t._v("使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx webpack plugin options")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("MpxWebpackPlugin支持传入以下配置：")]),t._v(" "),s("h3",{attrs:{id:"mode"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mode"}},[t._v("#")]),t._v(" mode")]),t._v(" "),s("p",[s("code",[t._v("'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'jd' | 'dd' | 'qa' | 'web' = 'wx'")])]),t._v(" "),s("p",[t._v("mode 为 Mpx 编译的目标平台， 目前支持的有微信小程序(wx)\\支付宝小程序(ali)\\百度小程序(swan)\\头条小程序(tt)\\QQ 小程序(qq)\\京东小程序(jd)\\滴滴小程序(dd)\\快应用(qa)\\H5 页面(web)。")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("在 @mpxjs/cli@3.x 版本当中，通过在 "),s("code",[t._v("npm script")]),t._v(" 当中定义 "),s("code",[t._v("targets")]),t._v(" 来设置目标平台")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 项目 package.json")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"script"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"build:cross"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpx-cli-service build --targets=wx,ali"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),s("h3",{attrs:{id:"srcmode"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#srcmode"}},[t._v("#")]),t._v(" srcMode")]),t._v(" "),s("p",[s("code",[t._v("'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'jd' | 'dd' | 'qa' = 'wx'")])]),t._v(" "),s("p",[t._v("默认和 "),s("a",{attrs:{href:"#mode"}},[t._v("mode")]),t._v(" 一致。，当 srcMode 和 mode 不一致时，会读取相应的配置对项目进行编译和运行时的转换。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据项目初始化所选平台来设定")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("暂时只支持微信为源 mode 做跨平台，为其他时，mode 必须和 srcMode 保持一致。")])]),t._v(" "),s("h3",{attrs:{id:"moderules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#moderules"}},[t._v("#")]),t._v(" modeRules")]),t._v(" "),s("p",[s("code",[t._v("{ [key: string]: Rules }")])]),t._v(" "),s("p",[t._v("批量指定文件mode，用于条件编译场景下使用某些单小程序平台的库时批量标记这些文件的mode为对应平台，而不再走转换规则。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modeRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ali")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/vant-aliapp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"externalclasses"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#externalclasses"}},[t._v("#")]),t._v(" externalClasses")]),t._v(" "),s("p",[s("code",[t._v("Array<string>")])]),t._v(" "),s("p",[t._v("定义若干个外部样式类，这些将会覆盖元素原有的样式。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("externalClasses")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'custom-class'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'i-class'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("抹平支付宝和微信之间的差异，当使用了微信 "),s("strong",[t._v("externalClasses")]),t._v(" 语法时，跨端输出需要在 @mpxjs/webpack-plugin 的配置中添加此配置来辅助框架进行转换。")])]),t._v(" "),s("h3",{attrs:{id:"resolvemode"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#resolvemode"}},[t._v("#")]),t._v(" resolveMode")]),t._v(" "),s("p",[s("code",[t._v("'webpack' | 'native' = 'webpack'")])]),t._v(" "),s("p",[t._v("指定resolveMode，默认webpack，更便于引入npm包中的页面/组件等资源。若想编写时和原生保持一致或兼容已有原生项目，可设为native，此时需要提供"),s("a",{attrs:{href:"#projectroot"}},[t._v("projectRoot")]),t._v("以指定项目根目录，且使用npm资源时需在前面加"),s("code",[t._v("~")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resolveMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'webpack'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"projectroot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#projectroot"}},[t._v("#")]),t._v(" projectRoot")]),t._v(" "),s("p",[s("code",[t._v("string")])]),t._v(" "),s("p",[t._v("当resolveMode为native时需通过该字段指定项目根目录。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resolveMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'native'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("projectRoot")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"writemode"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#writemode"}},[t._v("#")]),t._v(" writeMode")]),t._v(" "),s("p",[s("code",[t._v("'full' | 'change' = 'change'")])]),t._v(" "),s("p",[t._v("webpack 的输出默认是全量输出，而小程序开发者工具不关心文件是否真正发生了变化。设置为 change 时，Mpx 在 watch 模式下将内部 diff 一次，只会对内容发生变化的文件进行写入，以提升小程序开发者工具编译性能。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("writeMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'change'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"autoscoperules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#autoscoperules"}},[t._v("#")]),t._v(" autoScopeRules")]),t._v(" "),s("p",[s("a",{attrs:{href:"#rules"}},[s("code",[t._v("Rules")])])]),t._v(" "),s("p",[t._v("是否需要对样式加 scope ，目前只有支付宝小程序平台没有样式隔离，因此该部分内容也只对支付宝小程序平台生效。提供 include 和 exclude 以精确控制对哪些文件进行样式隔离，哪些不隔离，和webpack的rules规则相同。也可以通过在 style 代码块上声明 scoped 进行。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("autoScopeRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n           "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n           "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exclude")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../node_modules/vant-aliapp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 比如一些组件库本来就是为支付宝小程序编写的，应该已经考虑过样式隔离，就不需要再添加")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"forcedisableproxyctor"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#forcedisableproxyctor"}},[t._v("#")]),t._v(" forceDisableProxyCtor")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("用于控制在跨平台输出时对实例构造函数（"),s("code",[t._v("App")]),t._v(" | "),s("code",[t._v("Page")]),t._v(" | "),s("code",[t._v("Component")]),t._v(" | "),s("code",[t._v("Behavior")]),t._v("）进行代理替换以抹平平台差异。当配置 "),s("code",[t._v("forceDisableProxyCtor")]),t._v(" 为 true 时，会强行取消平台差异抹平逻辑，开发时需针对输出到不同平台进行条件判断。")]),t._v(" "),s("h3",{attrs:{id:"transmpxrules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#transmpxrules"}},[t._v("#")]),t._v(" transMpxRules")]),t._v(" "),s("p",[s("a",{attrs:{href:"#rules"}},[s("code",[t._v("Rules")])])]),t._v(" "),s("p",[t._v("是否转换 wx / my 等全局对象为 Mpx 对象，")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transMpxRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exclude")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"forceproxyeventrules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#forceproxyeventrules"}},[t._v("#")]),t._v(" forceProxyEventRules")]),t._v(" "),s("p",[s("a",{attrs:{href:"#rules"}},[s("code",[t._v("Rules")])])]),t._v(" "),s("p",[t._v("强制代理规则内配置的事件。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("forceProxyEventRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bindtap'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"defs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#defs"}},[t._v("#")]),t._v(" defs")]),t._v(" "),s("p",[s("code",[t._v("object")])]),t._v(" "),s("p",[t._v("给模板、js、json、style中定义一些全局常量。一般用于区分平台/环境。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("defs")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("__env__")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mini'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在模板中使用：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{__env__}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("在js中使用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" env "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" __env__"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("在style中使用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__env__ === 'mini') */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n")])])]),s("p",[t._v("在json中使用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'json'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"component"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"a"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" __env__\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注意：这里定义之后使用的时候是按照全局变量来使用，而非按照"),s("code",[t._v("process.env.KEY")]),t._v("这样的形式")])]),t._v(" "),s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[t._v("#")]),t._v(" attributes")]),t._v(" "),s("p",[s("code",[t._v("Array<string> = ['image:src', 'audio:src', 'video:src', 'cover-image:src', 'import:src', 'include:src']")])]),t._v(" "),s("p",[s("code",[t._v("Mpx")]),t._v(" 提供了可以给自定义标签设置资源的功能，配置该属性后，即可在目标标签中使用 "),s("code",[t._v(":src")]),t._v(" 加载相应资源文件")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("attributes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'customTag:src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("customTag")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("https://www....../avator.png'"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("customTag")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("该属性可通过 "),s("code",[t._v("MpxWebpackPlugin")]),t._v(" 配置，也可以通过配置 "),s("code",[t._v("WxmlLoader")]),t._v("，后者优先级高。")])]),t._v(" "),s("h3",{attrs:{id:"externals"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#externals"}},[t._v("#")]),t._v(" externals")]),t._v(" "),s("p",[s("code",[t._v("Array<string>")])]),t._v(" "),s("p",[t._v("目前仅支持微信小程序 weui 组件库通过 useExtendedLib 扩展库的方式引入，这种方式引入的组件将不会计入代码包大小。配置 externals 选项，Mpx 将不会解析 weui 组件的路径并打包。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("externals")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'weui'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx json部分")]),t._v("\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"useExtendedLib"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"weui"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 在 page 中使用 weui 组件 --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'wx'}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mp-icon")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("play"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("size")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{25}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("showDialog"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("mp-icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mp-dialog")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("test"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("show")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{dialogShow}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindbuttontap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tapDialogButton"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("buttons")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{buttons}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test content"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("mp-dialog")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dialogShow")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("showOneButtonDialog")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("buttons")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'取消'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'确定'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("tapDialogButton")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dialogShow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("showOneButtonDialog "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("showDialog")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dialogShow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" wxComponents "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"mp-icon"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"weui-miniprogram/icon/icon"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"mp-dialog"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"weui-miniprogram/dialog/dialog"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" __mpx_mode__ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("assign")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" wxComponents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("strong",[t._v("参考")]),t._v("："),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html",target:"_blank"}},[t._v("weui组件库")])]),t._v(" "),s("h3",{attrs:{id:"mininpmpackage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mininpmpackage"}},[t._v("#")]),t._v(" miniNpmPackage")]),t._v(" "),s("p",[s("code",[t._v("Array<string>")])]),t._v(" "),s("p",[t._v("微信小程序官方提供了"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("发布小程序 npm 包的约束"),s("OutboundLink")],1),t._v("。\n部分小程序npm包，如"),s("a",{attrs:{href:"https://vant-contrib.gitee.io/vant-weapp/#/quickstart",target:"_blank",rel:"noopener noreferrer"}},[t._v("vant组件库"),s("OutboundLink")],1),t._v('官方文档使用说明，引用资源并不会包含miniprogram所指定的目录\n如 "@vant/weapp/button/index"，导致 '),s("code",[t._v("Mpx")]),t._v(" 解析路径失败。\n"),s("code",[t._v("Mpx")]),t._v("为解决这个问题，提供miniNpmPackage字段供用户配置需要解析的小程序npm包。miniNpmPackage对应的数组值为npm包对应的package.json中的name字段。\n"),s("code",[t._v("Mpx")]),t._v("解析规则如下:")]),t._v(" "),s("ol",[s("li",[t._v("如package.json中有miniprogram字段，则会默认拼接miniprogram对应的值到资源路径中")]),t._v(" "),s("li",[t._v("如package.json中无miniprogram字段，但配置了miniNpmPackage，则默认会拼接miniprogram_dist目录")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("miniNpmPackage")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vant/weapp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"forceusepagector"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#forceusepagector"}},[t._v("#")]),t._v(" forceUsePageCtor")]),t._v(" "),s("p",[s("code",[t._v("Boolean = false")])]),t._v(" "),s("p",[t._v("为了获取更丰富的生命周期来进行更加完善的增强处理，在非支付宝小程序环境下，"),s("code",[t._v("Mpx")]),t._v(" 默认会使用 "),s("code",[t._v("Conponent")]),t._v(" 构造器来创建页面。将该值设置为 "),s("code",[t._v("true")]),t._v(" 时，会强制使用 "),s("code",[t._v("Page")]),t._v(" 构造器创建页面。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("forceUsePageCtor")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"transrpxrules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#transrpxrules"}},[t._v("#")]),t._v(" transRpxRules")]),t._v(" "),s("p",[s("code",[t._v("Array<object> | object")])]),t._v(" "),s("ul",[s("li",[s("code",[t._v("option.mode")]),t._v(" 可选值有 none/only/all，分别是不启用/只对注释内容启用/只对非注释内容启用")]),t._v(" "),s("li",[s("code",[t._v("option.designWidth")]),t._v(" 设计稿宽度，默认值就是750，可根据需要修改")]),t._v(" "),s("li",[s("code",[t._v("option.include")]),t._v(" 同webpack的include规则")]),t._v(" "),s("li",[s("code",[t._v("option.exclude")]),t._v(" 同webpack的exclude规则")]),t._v(" "),s("li",[s("code",[t._v("option.comment")]),t._v(" rpx注释，建议使用 'use px'/'use rpx'，当 mode 为 all 时默认值为 use px，mode 为 only 时默认值为 'use rpx'")])]),t._v(" "),s("p",[t._v("为了处理某些IDE中不支持"),s("code",[t._v("rpx")]),t._v("单位的问题，Mpx 提供了一个将 px 转换为 rpx 的功能。支持通过注释控制行级、块级的是否转换，支持局部使用，支持不同依赖分别使用不用的转换规则等灵活的能力。"),s("code",[t._v("transRpxRules")]),t._v("可以是一个对象，也可以是多个这种对象组成的数组。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'path'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transRpxRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'only'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 只对注释为'use rpx'的块儿启用转换rpx")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("comment")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'use rpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mode为'only'时，默认值为'use rpx'")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exclude")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'lib'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("designWidth")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("750")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'all'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 所有样式都启用转换rpx，除了注释为'use px'的样式不转换")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("comment")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'use px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mode为'all'时，默认值为'use px'")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/@didi/mpx-sec-guard'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"应用场景及相应配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#应用场景及相应配置"}},[t._v("#")]),t._v(" 应用场景及相应配置")]),t._v(" "),s("p",[t._v("接下来我们来看下一些应用场景及如何配置。如果是用脚手架生成的项目，在"),s("code",[t._v("mpx.plugin.conf.js")]),t._v("里找到"),s("code",[t._v("transRpxRules")]),t._v("，应该已经有预设的"),s("code",[t._v("transRpxRules")]),t._v("选项，按例修改即可。")]),t._v(" "),s("p",[t._v("三种场景分别是 "),s("a",{attrs:{href:"#%E5%9C%BA%E6%99%AF%E4%B8%80"}},[t._v("普通使用")]),t._v(" ， "),s("a",{attrs:{href:"#%E5%9C%BA%E6%99%AF%E4%BA%8C"}},[t._v("只对某些特殊样式转换")]),t._v(" ， "),s("a",{attrs:{href:"#%E5%9C%BA%E6%99%AF%E4%B8%89"}},[t._v("不同路径分别配置规则")])]),t._v(" "),s("h4",{attrs:{id:"场景一"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#场景一"}},[t._v("#")]),t._v(" 场景一")]),t._v(" "),s("p",[t._v("设计师给的稿是2倍图，分辨率750px。或者更高倍图。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transRpxRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'all'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("designWidth")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("750")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果是其他倍，修改此值为设计稿的宽度即可")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"场景二"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#场景二"}},[t._v("#")]),t._v(" 场景二")]),t._v(" "),s("p",[t._v("大部分样式都用px下，某些元素期望用rpx。或者反过来。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transRpxRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'only'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("comment")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'use rpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("designWidth")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("750")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设计稿宽度")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("mpx的rpx注释能帮助你仅为部分类或者部分样式启用rpx转换，细节请看下方附录。")]),t._v(" "),s("h4",{attrs:{id:"场景三"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#场景三"}},[t._v("#")]),t._v(" 场景三")]),t._v(" "),s("p",[t._v("使用了第三方组件，它的设计宽度和主项目不一致，期望能设置不同的转换规则")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'path'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transRpxRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'only'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("designWidth")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("750")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("comment")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'use rpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'all'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("designWidth")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1280")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对iview单独使用一个不同的designWidth")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/iview-weapp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注意事项：转换规则是不可以对一个文件做多次转换的，会出错，所以一旦被一个规则命中后就不会再次命中另一个规则，include 和 exclude 的编写需要注意先后顺序，就比如上面这个配置，如果第一个规则 include 的是 '/' 即整个项目，iview-weapp 里的样式就无法命中第二条规则了。")])]),t._v(" "),s("h4",{attrs:{id:"transrpxrules附录"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#transrpxrules附录"}},[t._v("#")]),t._v(" transRpxRules附录")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("designWidth")])])]),t._v(" "),s("p",[t._v("设计稿宽度，单位为"),s("code",[t._v("px")]),t._v("。默认值为"),s("code",[t._v("750px")]),t._v("。")]),t._v(" "),s("p",[s("code",[t._v("mpx")]),t._v("会基于小程序标准的屏幕宽度"),s("code",[t._v("baseWidth 750rpx")]),t._v("，与"),s("code",[t._v("option.designWidth")]),t._v("计算出一个转换比例"),s("code",[t._v("transRatio")]),t._v("。")]),t._v(" "),s("p",[t._v("转换比例的计算方式为"),s("code",[t._v("transRatio = (baseWidth / designWidth)")]),t._v("，精度为小数点后2位四舍五入。")]),t._v(" "),s("p",[t._v("所有生效的"),s("code",[t._v("rpx注释样式")]),t._v("中的px会乘上"),s("code",[t._v("transRatio")]),t._v("得出最终的 rpx 值。")]),t._v(" "),s("p",[t._v("例如：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 转换前：designWidth = 1280 */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".btn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 200px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 转换后: transRatio = 0.59 */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".btn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 118rpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 59rpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[s("strong",[t._v("comment: rpx 注释样式")])])]),t._v(" "),s("p",[t._v("根据"),s("code",[t._v("rpx注释")]),t._v("的位置，"),s("code",[t._v("mpx")]),t._v("会将"),s("code",[t._v("一段css规则")]),t._v("或者"),s("code",[t._v("一条css声明")]),t._v("视为"),s("code",[t._v("rpx注释样式")]),t._v("。")]),t._v(" "),s("p",[t._v("开发者可以声明一段 rpx 注释样式，提示编译器是否转换这段 css 中的 px。")]),t._v(" "),s("p",[t._v("例如：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("css"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* use rpx */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".not-translate-a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".not-translate-b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* use rpx */")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".translate-a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".translate-b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("第一个注释位于一个"),s("code",[t._v("选择器")]),t._v("前，是一个"),s("code",[t._v("css规则注释")]),t._v("，整个规则都会被视为"),s("code",[t._v("rpx注释样式")])])]),t._v(" "),s("blockquote",[s("p",[t._v("第二个注释位于一个"),s("code",[t._v("css声明")]),t._v("前，是一个"),s("code",[t._v("css声明注释")]),t._v("，只有"),s("code",[t._v("font-size: 100px")]),t._v("会被视为"),s("code",[t._v("rpx注释样式")])])]),t._v(" "),s("blockquote",[s("p",[s("code",[t._v("transRpx = only")]),t._v("模式下，只有两部分"),s("code",[t._v("rpx注释样式")]),t._v("会转rpx。")])]),t._v(" "),s("h3",{attrs:{id:"postcssinlineconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#postcssinlineconfig"}},[t._v("#")]),t._v(" postcssInlineConfig")]),t._v(" "),s("p",[s("code",[t._v("{options? : PostcssOptions, plugins? : PostcssPlugin[], mpxPrePlugins? : PostcssPlugin[], ignoreConfigFile : Boolean}")])]),t._v(" "),s("p",[t._v("使用类似于 postcss.config.js 的语法书写 postcss 的配置文件。用于定义 Mpx 对于组件/页面样式进行 postcss 处理时的配置， ignoreConfigFile 传递为 true 时会忽略项目中的 postcss 配置文件 。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("postcssInlineConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require('postcss-import'),")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require('postcss-preset-env'),")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require('cssnano'),")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require('autoprefixer')")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意")]),t._v("：默认添加的 postcss 插件均会在"),s("code",[t._v("mpx的内置插件")]),t._v("（例如如rpx插件等）之后处理。如需使配置的插件优先于内置插件，可以在 "),s("code",[t._v("postcssInlineConfig")]),t._v(" 中添加 "),s("code",[t._v("mpxPrePlugins")]),t._v(" 配置：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("postcssInlineConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'postcss-import'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'postcss-preset-env'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpxPrePlugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cssnano'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'autoprefixer'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 以下写法同理")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpxPrePlugins: {")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   'cssnano': {},")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   'autoprefixer': {}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// }")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("code",[t._v("postcss.config.js")]),t._v(" 中配置同理：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// postcss.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'postcss-import'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'postcss-preset-env'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpxPrePlugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cssnano'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'autoprefixer'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[t._v("在上面这个例子当中，postcss 插件处理的最终顺序为："),s("code",[t._v("cssnano")]),t._v(" -> "),s("code",[t._v("autoprefixer")]),t._v(" -> "),s("code",[t._v("mpx内置插件")]),t._v(" -> "),s("code",[t._v("postcss-import")]),t._v(" -> "),s("code",[t._v("postcss-preset-env")])]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("注意：在 "),s("code",[t._v("mpxPrePlugins")]),t._v(" 中配置的 postcss 插件如果不通过 mpx 进行处理，那么将不会生效。")])]),t._v(" "),s("h3",{attrs:{id:"decodehtmltext"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#decodehtmltext"}},[t._v("#")]),t._v(" decodeHTMLText")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("设置为 true 时在模板编译时对模板中的 text 内容进行 decode")]),t._v(" "),s("h3",{attrs:{id:"nativeconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#nativeconfig"}},[t._v("#")]),t._v(" nativeConfig")]),t._v(" "),s("p",[s("code",[t._v("{cssLangs: string[]}")])]),t._v(" "),s("p",[t._v("为原生多文件写法添加css预处理语言支持，用于优先搜索预编译器后缀的文件，按 cssLangs 中的声明顺序查找。默认按照 css , less , stylus ,  scss , sass 的顺序")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nativeConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cssLangs")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'css'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'less'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'stylus'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'scss'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sass'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"webconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#webconfig"}},[t._v("#")]),t._v(" webConfig")]),t._v(" "),s("p",[s("code",[t._v("{transRpxFn(match:string, $1:number): string}")])]),t._v(" "),s("p",[t._v("transRpxFn 配置用于自定义输出 web 时对于 rpx 样式单位的转换逻辑，常见的方式有转换为 vw 或转换为 rem")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("webConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("transRpxFn")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("match"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" $1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("$1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'0'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" $1\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("$1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("750")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toFixed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("vw")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"i18n"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#i18n"}},[t._v("#")]),t._v(" i18n")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} world'")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'zh-CN'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} 世界'")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// messagesPath: path.resolve(__dirname, '../src/i18n.js')")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("Mpx 支持国际化，底层实现依赖类"),s("code",[t._v("wxs")]),t._v("能力，通过指定语言标识和语言包，可实现多语言之间的动态切换。可配置项包括locale、messages、messagesPath。")]),t._v(" "),s("h4",{attrs:{id:"i18n-locale"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#i18n-locale"}},[t._v("#")]),t._v(" i18n.locale")]),t._v(" "),s("p",[s("code",[t._v("string")])]),t._v(" "),s("p",[t._v("通过配置 locale 属性，可指定语言标识，默认值为 'zh-CN'")]),t._v(" "),s("h4",{attrs:{id:"i18n-messages"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#i18n-messages"}},[t._v("#")]),t._v(" i18n.messages")]),t._v(" "),s("p",[s("code",[t._v("object")])]),t._v(" "),s("p",[t._v("通过配置 messages 属性，可以指定项目语言包，Mpx 会依据语言包对象定义进行转换，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'title'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'DiDi Chuxing'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'subTitle'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Make travel better'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'zh-CN'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'title'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'滴滴出行'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'subTitle'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'让出行更美好'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h4",{attrs:{id:"i18n-messagespath"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#i18n-messagespath"}},[t._v("#")]),t._v(" i18n.messagesPath")]),t._v(" "),s("p",[s("code",[t._v("string")])]),t._v(" "),s("p",[t._v("为便于开发，Mpx 还支持配置语言包资源路径 messagesPath 来代替 messages 属性，Mpx 会从该路径下的 js 文件导出语言包对象。如果同时配置 messages 和 messagesPath 属性，Mpx 会优先设定 messages 为 i18n 语言包资源。")]),t._v(" "),s("p",[t._v("详细介绍及使用见"),s("RouterLink",{attrs:{to:"/guide/tool/i18n.html"}},[t._v("工具-国际化i18n")]),t._v("一节。")],1),t._v(" "),s("h3",{attrs:{id:"auditresource"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#auditresource"}},[t._v("#")]),t._v(" auditResource")]),t._v(" "),s("p",[s("code",[t._v("'component' | boolean = false")])]),t._v(" "),s("p",[t._v("检查资源输出情况，如果置为true，则会提示有哪些资源被同时输出到了多个分包，可以检查是否应该放进主包以消减体积，设置为 "),s("code",[t._v("'component'")]),t._v(" 的话，则只检查组件资源是否被输出到多个分包。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("auditResource")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"subpackagemodulesrules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#subpackagemodulesrules"}},[t._v("#")]),t._v(" subpackageModulesRules")]),t._v(" "),s("p",[s("code",[t._v("object")])]),t._v(" "),s("p",[t._v("是否将多分包共用的模块分别输出到各自分包中，匹配规则为include匹配到且未被exclude匹配到的资源")]),t._v(" "),s("p",[t._v("依据微信小程序的分包策略，多个分包使用到的 js 模块会打入主包当中，但在大型分包较多的项目中，该策略极易将大量的模块打入主包，从而使主包体积大小超出2M限制，该配置项提供给开发者自主抉择，可将部分模块冗余输出至多个分包，从而控制主包体积不超限")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("subpackageModulesRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@someNpm/name/src/api/*.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exclude")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@someNpm/name/src/api/module.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("tips: 该功能是将模块分别放入多个分包，模块状态不可复用，使用前要依据模块功能做好评估，例如全局store就不适用该功能")])]),t._v(" "),s("h3",{attrs:{id:"generatebuildmap"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#generatebuildmap"}},[t._v("#")]),t._v(" generateBuildMap")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("是否生成构建结果与源码之间的映射文件。用于单元测试等场景。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("generateBuildMap")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("参考")]),t._v("："),s("RouterLink",{attrs:{to:"/guide/tool/unit-test.html"}},[t._v("单元测试")])],1),t._v(" "),s("h3",{attrs:{id:"autovirtualhostrules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#autovirtualhostrules"}},[t._v("#")]),t._v(" autoVirtualHostRules")]),t._v(" "),s("p",[s("a",{attrs:{href:"#rules"}},[s("code",[t._v("Rules")])]),t._v("\n批量配置是否虚拟化组件节点，对应微信中"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v("VirtualHost")]),s("OutboundLink")],1),t._v(" 。默认不开启，开启后也将抹平支付宝小程序中的表现差异。提供 include 和 exclude 以精确控制对哪些文件开启VirtualHost，哪些不开启。和webpack的rules规则相同。")]),t._v(" "),s("p",[t._v("默认情况下，自定义组件本身的那个节点是一个“普通”的节点，使用时可以在这个节点上设置 "),s("code",[t._v("class")]),t._v(" 、"),s("code",[t._v("style")]),t._v(" 、动画、 flex 布局等，就如同普通的 view 组件节点一样。但有些时候，自定义组件并不希望这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定。这种情况下，可以将这个自定义组件设置为“虚拟的”。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("autoVirtualHostRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exclude")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../components/other'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")]),t._v(" 建议使用"),s("code",[t._v("autoVirtualHostRules")]),t._v("配置项，不要使用微信组件内部的 options virtualHost 配置，因为组件内部的 options virtualHost 在跨平台输出时无法进行兼容抹平处理。")]),t._v(" "),s("h3",{attrs:{id:"partialcompilerules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#partialcompilerules"}},[t._v("#")]),t._v(" partialCompileRules")]),t._v(" "),s("p",[s("code",[t._v("{ include: string | RegExp | Function | Array<string | RegExp | Function> }")])]),t._v(" "),s("p",[t._v("在大型的小程序开发当中，全量打包页面耗时非常长，往往在"),s("code",[t._v("开发过程")]),t._v("中仅仅只需用到几个 pages 而已，该配置项支持打包指定的小程序页面。")]),t._v(" "),s("p",[s("strong",[t._v("注意：")]),t._v(" @mpxjs/webpack-plugin@2.9.41版本之前该配置为 partialCompile。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// include 可以是正则、字符串、函数、数组")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("partialCompileRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/project/pages'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 文件路径包含 '/project/pages' 的页面都会被打包")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("pages\\/internal")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 文件路径能与正则匹配上的页面都会被打包")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("include")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("pageResourcePath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// pageResourcePath 是小程序页面所在系统的文件路径")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" pageResourcePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pages'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 文件路径包含 'pages' 的页面都会被打包")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/project/pages'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("pages\\/internal")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("pageResourcePath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" pageResourcePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pages'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 满足任意条件的页面都会被打包")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("该特性只能用于"),s("strong",[t._v("开发环境")]),t._v("，默认情况下会阻止所有页面("),s("strong",[t._v("入口 app.mpx 除外")]),t._v(")的打包。")])]),t._v(" "),s("h3",{attrs:{id:"optimizerenderrules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#optimizerenderrules"}},[t._v("#")]),t._v(" optimizeRenderRules")]),t._v(" "),s("p",[s("a",{attrs:{href:"#rules"}},[s("code",[t._v("Rules")])])]),t._v(" "),s("p",[t._v("render 函数中可能会存在一些重复变量，该配置可消除 render 函数中的重复变量，进而减少包体积。不配置该参数，则不会消除重复变量。")]),t._v(" "),s("p",[t._v("同时框架 render 函数优化提供了两个等级，使用 level 字段来进行控制，默认为 level = 1")]),t._v(" "),s("ul",[s("li",[t._v("level = 1时，框架生成 render 函数中完成保留 template 中的计算逻辑，setData 传输量保持了最优。")]),t._v(" "),s("li",[t._v("level = 2时，框架生成 render 函数中仅保留所有 template 中使用到的响应性变量，无任何计算逻辑保留，render 函数体积达最小状态，但 setData 传输量相对于 level=1 会有所增加。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("optimizeRenderRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("level")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"asyncsubpackagerules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#asyncsubpackagerules"}},[t._v("#")]),t._v(" asyncSubpackageRules")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Condition")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" RegExp\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AsyncSubpackageRules")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  include"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Condition "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Condition"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  exclude"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Condition "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Condition"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  root"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n  placeholder"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resource"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[t._v("include: 同 webpack include 规则")]),t._v(" "),s("li",[t._v("exclude: 同 webpack exclude 规则")]),t._v(" "),s("li",[t._v("root: 匹配规则的组件或js模块的输出分包名")]),t._v(" "),s("li",[t._v("placeholder: 匹配规则的组件所配置的componentPlaceholder，可支持配置原生组件和自定义组件，原生组件可直接以string类型配置，自定义组件需要配置对象，name 为该自定义组件名, resource 为自定义组件的路径，路径可为绝对路径和相对于项目目录的相对路径")])]),t._v(" "),s("p",[t._v("异步分包场景下批量设置组件或 js 模块的异步分包，提升资源异步分包输出的灵活性。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// include 可以是正则、字符串、函数、数组")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("asyncSubpackageRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/project/pages'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 文件路径包含 '/project/pages' 的组件或者 require.async 异步引用的js 模块都会被打包至sub1分包")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("root")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sub1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("placeholder")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'view'")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("ul",[s("li",[t._v("该配置匹配的组件，若使用方在引用路径已设置?root或componentPlaceholder，则以引用路径中的?root或componentPlaceholder为最高优先级")]),t._v(" "),s("li",[t._v("若placeholder配置使用自定义组件，注意一定要配置 placeholder 中的 resource 字段")]),t._v(" "),s("li",[t._v("本功能只会对使用require.async异步引用的js模块生效，若引用路径中已配置?root，则以路径中?root优先")])])]),t._v(" "),s("h3",{attrs:{id:"retryrequireasync"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#retryrequireasync"}},[t._v("#")]),t._v(" retryRequireAsync")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("开启时在处理"),s("code",[t._v("require.async")]),t._v("时会添加单次重试逻辑")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("retryRequireAsync")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"disablerequireasync"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disablerequireasync"}},[t._v("#")]),t._v(" disableRequireAsync")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("Mpx 框架在输出 微信小程序、支付宝小程序、字节小程序、Web 平台时，默认支持分包异步化能力，但若在某些场景下需要关闭该能力，可配置该项。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("disableRequireAsync")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"optimizesize"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#optimizesize"}},[t._v("#")]),t._v(" optimizeSize")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("开启后可优化编译配置减少构建产物体积")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("optimizeSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"mpxwebpackplugin-static-methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-static-methods"}},[t._v("#")]),t._v(" MpxWebpackPlugin static methods")]),t._v(" "),s("p",[s("code",[t._v("MpxWebpackPlugin")]),t._v(" 通过静态方法暴露了以下五个内置 loader，详情如下：")]),t._v(" "),s("h3",{attrs:{id:"mpxwebpackplugin-loader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-loader"}},[t._v("#")]),t._v(" MpxWebpackPlugin.loader")]),t._v(" "),s("p",[s("code",[t._v("MpxWebpackPlugin")]),t._v(" 所提供的最主要 loader，用于处理 "),s("code",[t._v(".mpx")]),t._v(" 文件，根据不同的"),s("a",{attrs:{href:"#mode"}},[t._v("目标平台")]),t._v("将 "),s("code",[t._v(".mpx")]),t._v(" 文件输出为不同的结果。")]),t._v(" "),s("blockquote",[s("p",[t._v("在微信环境下 "),s("code",[t._v("todo.mpx")]),t._v(" 被loader处理后的文件为："),s("code",[t._v("todo.wxml")]),t._v("、"),s("code",[t._v("todo.wxss")]),t._v("、"),s("code",[t._v("todo.js")]),t._v("、"),s("code",[t._v("todo.json")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.mpx$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"mpxwebpackplugin-pluginloader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-pluginloader"}},[t._v("#")]),t._v(" MpxWebpackPlugin.pluginLoader")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("该 loader 仅在开发"),s("strong",[t._v("小程序插件")]),t._v("时使用，可在使用 Mpx 脚手架进行项目初始化时选择进行组件开发来生成对应的配置文件。")])]),t._v(" "),s("p",[s("code",[t._v("MpxWebpackPlugin.pluginLoader")]),t._v(" 用于根据开发者编写的"),s("code",[t._v("plugin.json")]),t._v("文件内容，将特定的小程序组件、页面以及 js 文件进行构建，最终以小程序插件的形式输出。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resource")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/plugin/plugin.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 小程序插件的plugin.json的绝对路径")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pluginLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更多细节请查阅 "),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("小程序插件开发"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"mpxwebpackplugin-wxspreloader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-wxspreloader"}},[t._v("#")]),t._v(" MpxWebpackPlugin.wxsPreLoader")]),t._v(" "),s("p",[t._v("加载并解析 "),s("code",[t._v("wxs")]),t._v(" 脚本文件，并针对不同平台，做了差异化处理；同时可支持处理内联"),s("code",[t._v("wxs")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(wxs|qs|sjs|filter\\.js)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wxsPreLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("enforce")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pre'")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"mpxwebpackplugin-fileloader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-fileloader"}},[t._v("#")]),t._v(" MpxWebpackPlugin.fileLoader")]),t._v(" "),s("p",[t._v("提供图像资源的处理，生成对应图像文件，输出到输出目录并返回 public URL。如果是分包资源，则会输出到相应的分包资源文件目录中。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fileLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("选项")]),t._v("：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("name")]),t._v(" : 自定义输出文件名模板")])]),t._v(" "),s("h3",{attrs:{id:"mpxwebpackplugin-urlloader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-urlloader"}},[t._v("#")]),t._v(" MpxWebpackPlugin.urlLoader")]),t._v(" "),s("p",[t._v("微信小程序对于图像资源存在一些限制，"),s("code",[t._v("MpxWebpackPlugin.urlLoader")]),t._v(" 针对这些差异做了相关处理，开发者可以使用web应用开发的方式进行图像资源的引入，"),s("code",[t._v("MpxWebpackPlugin.urlLoader")]),t._v(" 可根据图像资源的不同引入方式，支持 CDN 或者 Base64 的方式进行处理。更多细节请查阅"),s("RouterLink",{attrs:{to:"/guide/advance/image-process.html"}},[t._v("图像资源处理")]),t._v("。")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2048")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("选项")]),t._v(":")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("name")]),t._v(" :  自定义输出文件名模板")]),t._v(" "),s("li",[s("code",[t._v("mimetype")]),t._v(" : 指定文件的 MIME 类型")]),t._v(" "),s("li",[s("code",[t._v("limit")]),t._v(" : 对内联文件作为数据 URL 的字节数限制")]),t._v(" "),s("li",[s("code",[t._v("publicPath")]),t._v(" : 自定义 public 目录")]),t._v(" "),s("li",[s("code",[t._v("fallback")]),t._v(" : 文件字节数大于限制时，为文件指定加载程序")])]),t._v(" "),s("h3",{attrs:{id:"mpxwebpackplugin-getpageentry"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-getpageentry"}},[t._v("#")]),t._v(" MpxWebpackPlugin.getPageEntry")]),t._v(" "),s("p",[t._v("在 webpack config entry 入口文件配置中，你可以使用该方法获取独立构建页面路径，构建产物为该页面的独立原生代码，\n你可以提供该页面给其他小程序使用。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPageEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./index.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"mpxwebpackplugin-getcomponententry"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-getcomponententry"}},[t._v("#")]),t._v(" MpxWebpackPlugin.getComponentEntry")]),t._v(" "),s("p",[t._v("在 webpack config entry 入口文件配置中，你可以使用该方法获取独立构建组件路径，构建产物为该组件的独立原生代码，\n你可以提供该组件给其他小程序使用。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getComponentEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./components/list.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"mpxwebpackplugin-getnativeentry"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-getnativeentry"}},[t._v("#")]),t._v(" MpxWebpackPlugin.getNativeEntry")]),t._v(" "),s("p",[t._v("在 webpack config entry 入口文件配置中，你可以使用该方法获取原生小程序入口文件路径。如果你不想将原生的小程序入口文件整合为 "),s("code",[t._v("app.mpx")]),t._v(" 文件，则可以使用该方法直接使用原有的小程序入口文件进行编译。见"),s("a",{attrs:{href:"%5B1330%5D(https://github.com/didi/mpx/issues/1330)"}},[t._v("#1330")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 app 入口由默认的 app.mpx 更改为 app.js")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'app'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getNativeEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./src/app.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"mpxunocssplugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxunocssplugin"}},[t._v("#")]),t._v(" MpxUnocssPlugin")]),t._v(" "),s("p",[t._v("Mpx 编译 unocss 原子类的 webpack 主插件")]),t._v(" "),s("p",[t._v("如果在使用 "),s("code",[t._v("@mpxjs/cli@3.x")]),t._v(" 创建项目时选择了 unocss，会自动安装 MpxUnocssPlugin ，直接在 mpx.unocss 配置项中传入相关配置即可")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// @mpxjs/unocss-plugin 相关的配置")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果创建项目时未选 unocss，需手动安装，安装示例如下：")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/unocss-plugin\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pnpm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/unocss-plugin\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("yarn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/unocss-plugin\n")])])]),s("p",[t._v("使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxUnocssPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/unocss-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MpxUnocssPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// @mpxjs/unocss-plugin 相关的配置")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("插件支持配置如下：")]),t._v(" "),s("h3",{attrs:{id:"unofile"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#unofile"}},[t._v("#")]),t._v(" unoFile")]),t._v(" "),s("p",[s("code",[t._v("string = 'styles/uno'")])]),t._v(" "),s("p",[t._v("生成主包或分包通用样式存储的相对路径")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unoFile")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'styles/uno'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("则会把通用样式存储到下面目录")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 主包")]),t._v("\n  dist"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("wx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("styles"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("uno"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wxss\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 分包")]),t._v("\n  dist"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("wx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("package")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("styles"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("uno"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wxss\n")])])]),s("h3",{attrs:{id:"mincount"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mincount"}},[t._v("#")]),t._v(" minCount")]),t._v(" "),s("p",[s("code",[t._v("number = 2")])]),t._v(" "),s("p",[t._v("使用到某个原子类的最小分包个数，比如设置为2的话一个原子类只有超过2个分包使用才会输出到主包")]),t._v(" "),s("blockquote",[s("p",[t._v("主要是用来控制主包占用的，数值越大分包的原子类就有更大可能性不占用主包")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("minCount")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- minCount=2 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- a分包 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bg-black color-white"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- b分包 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bg-black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("unocss将把生成的"),s("code",[t._v("bg-black")]),t._v("样式打包到主包")]),t._v(" "),s("h3",{attrs:{id:"styleisolation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#styleisolation"}},[t._v("#")]),t._v(" styleIsolation")]),t._v(" "),s("p",[s("code",[t._v("string = 'isolated'")])]),t._v(" "),s("p",[t._v("需要和微信小程序的styleIsolation配合使用，比如小程序使用样式隔离的话，这里需要对应配置为isolated，这样的话每个组件会独立引用对应的原子类文件，配置为'apply-shared'的话只有父级页面和app会建立引用，然后通过配合微信的apply-shared的方式获取父级上定义的原子类")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("styleIsolation")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'isolated'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"scan"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#scan"}},[t._v("#")]),t._v(" scan")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Scan")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    include"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    exclude"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("配置需要扫描的文件目录")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("scan")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/**/*'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"escapemap"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#escapemap"}},[t._v("#")]),t._v(" escapeMap")]),t._v(" "),s("p",[s("code",[t._v("object")])]),t._v(" "),s("p",[t._v("针对原子类中出现的"),s("code",[t._v("[")]),t._v(" "),s("code",[t._v("(")]),t._v(" "),s("code",[t._v(",")]),t._v("等特殊字符，在web中会通过转义字符"),s("code",[t._v("\\")]),t._v("进行转义，由于小程序环境下不支持css选择器中出现"),s("code",[t._v("\\")]),t._v("转义字符，我们内置支持了一套不带"),s("code",[t._v("\\")]),t._v("的转义规则对这些特殊字符进行转义，同时替换模版和css文件中的类名，内建的默认转义规则，可自定义转译规则")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("escapeMap")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("':'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_d_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  <view class="),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dark:text-green-400"')]),t._v("/>\n")])])]),s("p",[t._v("将会转化为")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".dark .dark_d_text-green-400")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-text-opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("74"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("222"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("128"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("--un-text-opacity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"root"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#root"}},[t._v("#")]),t._v(" root")]),t._v(" "),s("p",[s("code",[t._v("string = process.cwd()")])]),t._v(" "),s("p",[t._v("文件根目录")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("root")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" process"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cwd")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"transformcss"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#transformcss"}},[t._v("#")]),t._v(" transformCSS")]),t._v(" "),s("p",[s("code",[t._v("boolean = true")])]),t._v(" "),s("p",[t._v("转化css指令为常规css")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transformCSS")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".custom-div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token atrule"}},[s("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@apply")]),t._v(" text-center my-0 font-medium"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("将会转化为")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".custom-div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-bottom")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 500"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"transformgroups"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#transformgroups"}},[t._v("#")]),t._v(" transformGroups")]),t._v(" "),s("p",[s("code",[t._v("boolean = true")])]),t._v(" "),s("p",[t._v("转化Variant group")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transformGroups")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("lg:(p-2 m-2 text-red-600)"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("将会转化为")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("lg:p-2 lg:m-2 lg:text-red-600"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"config"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#config"}},[t._v("#")]),t._v(" config")]),t._v(" "),s("p",[s("code",[t._v("UserConfig | string")])]),t._v(" "),s("p",[t._v("config可以传配置对象也可以传一个配置文件路径")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'m-1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'10rpx'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"configfiles"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#configfiles"}},[t._v("#")]),t._v(" configFiles")]),t._v(" "),s("p",[s("code",[t._v("LoadConfigSource[]")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadConfigSource"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      files"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Arrayable"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n       * @default ['mts', 'cts', 'ts', 'mjs', 'cjs', 'js', 'json', '']\n      */")]),t._v("\n      extensions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n       * Loader for loading config,\n      *\n      * @default 'auto'\n      */")]),t._v("\n      parser"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" BuiltinParsers "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" CustomParser"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auto'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n       * Rewrite the config object,\n      * return nullish value to bypassing loading the file\n      */")]),t._v("\n      rewrite"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("F")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("F")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" filepath"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n       * Transform the source code before loading,\n      * return nullish value to skip transformation\n      */")]),t._v("\n      transform"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("code"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" filepath"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n       * Skip this source if error occurred on loading\n      *\n      * @default false\n      */")]),t._v("\n      skipOnError"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("configFiles的话是传递额外的配置文件数组，比如不想用uno.config作为配置文件的话可以在这里面配")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configFiles")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("files")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'uno2.config.js'")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"commentconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#commentconfig"}},[t._v("#")]),t._v(" commentConfig")]),t._v(" "),s("p",[t._v("我们还支持了commentConfig进行组件局部配置，目前支持safelist和styleIsolation，safelist可以用空格分隔写多个")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_styleIsolation: 'isolated' --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_safelist: 'text-red-500 bg-black' --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("mpx-unocss"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"mpxunocssbase"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxunocssbase"}},[t._v("#")]),t._v(" MpxUnocssBase")]),t._v(" "),s("p",[t._v("Mpx 内置的 unocss preset，继承自 "),s("code",[t._v("@unocss/preset-uno")]),t._v("，并额外提供小程序原子类的预设样式，安装示例如下：")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/unocss-base\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pnpm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/unocss-base\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("yarn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/unocss-base\n")])])]),s("p",[t._v("使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// uno.config.js")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unocss'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" presetMpx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/unocss-base'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("presets")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("presetMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unocss的config，具体配置参考https://unocss.dev/config/")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("支持的配置项如下：")]),t._v(" "),s("h3",{attrs:{id:"basefontsize"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basefontsize"}},[t._v("#")]),t._v(" baseFontSize")]),t._v(" "),s("p",[s("code",[t._v("number = 37.5")])]),t._v(" "),s("p",[t._v("同比换算1rem = 37.5rpx适配小程序")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// uno.config.js")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unocss'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" presetMpx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/unocss-base'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("presets")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("presetMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("baseFontSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("37.5")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"preflight"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#preflight"}},[t._v("#")]),t._v(" preflight")]),t._v(" "),s("p",[s("code",[t._v("boolean = true")])]),t._v(" "),s("p",[t._v("是否生成预设样式")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// uno.config.js")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unocss'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" presetMpx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/unocss-base'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("presets")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("presetMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("preflight")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("将添加预设样式在主包")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("page")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-rotate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-rotate-x")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-rotate-y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-rotate-z")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-scale-x")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-scale-y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-scale-z")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-skew-x")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-skew-y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-translate-x")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-translate-y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-translate-z")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-pan-x")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-pan-y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-pinch-zoom")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-scroll-snap-strictness")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("proximity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ordinal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-slashed-zero")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-numeric-figure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-numeric-spacing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-numeric-fraction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-border-spacing-x")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-border-spacing-y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-offset-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0 0 "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0 0 "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-shadow-inset")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0 0 "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-inset")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-offset-width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-offset-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("#fff"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("147"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("197"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("253"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0.5"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-blur")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-brightness")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-contrast")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-drop-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-grayscale")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-hue-rotate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-invert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-saturate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-sepia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-blur")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-brightness")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-contrast")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-grayscale")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-hue-rotate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-invert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-saturate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-sepia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"dark"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dark"}},[t._v("#")]),t._v(" dark")]),t._v(" "),s("p",[s("code",[t._v("class | media | DarkModeSelectors = 'class'")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DarkModeSelectors")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n     * light variant的选择器.\n     *\n     * @default '.light'\n     */")]),t._v("\n    light"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n     * dark variant的选择器\n     *\n     * @default '.dark'\n     */")]),t._v("\n    dark"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("默认情况下，此预设使用dark:variant生成基于类的dark模式。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dark:text-green-400"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("p",[t._v("我们将生成")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".dark .dark_c_text-green-400")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-text-opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("74"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("222"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("128"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("--un-text-opacity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("要选择基于媒体查询的dark模式，您可以使用@dark:variant")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("@dark:text-green-400"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("p",[t._v("我们将生成")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token atrule"}},[s("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@media")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("prefers-color-scheme")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dark"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("._u_dark_c_text-green-400")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-text-opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("74"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("222"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("128"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("--un-text-opacity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("或者使用针对dark:variant的配置进行全局设置")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("presetMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dark")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"media"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"attributifypseudo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributifypseudo"}},[t._v("#")]),t._v(" attributifyPseudo")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("将伪选择器生成为[group='']，而不是.group。只支持"),s("code",[t._v("group")]),t._v("|"),s("code",[t._v("peer")]),t._v("|"),s("code",[t._v("parent")]),t._v("|"),s("code",[t._v("previous")]),t._v("\n如果attributifyPseudo为true的话，")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("group-hover:opacity-100"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("上面template将生成")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[group=""]:hover .group-hover_c_opacity-100')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("为false则生成")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".group:hover .group-hover_c_opacity-100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"variableprefix"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#variableprefix"}},[t._v("#")]),t._v(" variablePrefix")]),t._v(" "),s("p",[s("code",[t._v("string = 'un-'")])]),t._v(" "),s("p",[t._v("CSS变量的前缀")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("presetMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("variablePrefix")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'un-'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".bg-red-500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-bg-opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("239"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("68"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("68"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("--un-bg-opacity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"request-query"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#request-query"}},[t._v("#")]),t._v(" Request query")]),t._v(" "),s("p",[t._v("Mpx中允许用户在request中传递特定query执行特定逻辑，目前已支持的query如下：")]),t._v(" "),s("h3",{attrs:{id:"resolve"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#resolve"}},[t._v("#")]),t._v(" ?resolve")]),t._v(" "),s("p",[t._v("用于获取资源最终被输出的正确路径。")]),t._v(" "),s("p",[t._v("Mpx 在处理页面路径时会把对应的分包名作为 root 加在路径前。处理组件路径时会添加 hash，防止路径名冲突。直接写资源相对路径可能与最终输出的资源路径不符。")]),t._v(" "),s("p",[t._v("编写代码时使用 import 引入页面地址后加上 "),s("code",[t._v("?resolve")]),t._v("，这个地址在编译时会被处理成正确的绝对路径，即资源的最终输出位置。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" subPackageIndexPage "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../subpackage/pages/index.mpx?resolve'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" subPackageIndexPage\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"root"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#root"}},[t._v("#")]),t._v(" ?root")]),t._v(" "),s("ol",[s("li",[t._v("声明分包别名")])]),t._v(" "),s("p",[t._v("指定分包别名，Mpx 项目在编译构建后会输出该别名的分包，外部小程序或 H5 页面跳转时，可直接配置该分包别名下的资源路径。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可在项目app.mpx中进行配置")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("packages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@packagePath/src/app.mpx?root=test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用")]),t._v("\nwx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/test/homepage/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ol",{attrs:{start:"2"}},[s("li",[t._v("声明组件所属异步分包")])]),t._v(" "),s("p",[t._v("微信小程序新增 "),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("分包异步化特性"),s("OutboundLink")],1),t._v(" ，使跨分包的组件可以等待对应分包下载后异步使用, 在mpx中使用需通过?root声明组件所属异步分包即可使用，示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--/packageA/pages/index.mpx--\x3e")]),t._v("\n// 这里在分包packageA中即可异步使用分包packageB中的hello组件\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"hello"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../../packageB/components/hello?root=packageB"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"simple-hello"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/hello"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"componentPlaceholder"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"hello"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"simple-hello"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"fallback"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#fallback"}},[t._v("#")]),t._v(" ?fallback")]),t._v(" "),s("p",[s("code",[t._v("boolean")])]),t._v(" "),s("p",[t._v("对于使用"),s("code",[t._v("MpxWebpackPlugin.urlLoader")]),t._v("的文件，如果在引用资源的末尾加上"),s("code",[t._v("?fallback=true")]),t._v("，则使用配置的自定义loader。图片的引入和处理详见"),s("RouterLink",{attrs:{to:"/guide/advance/image-process.html"}},[t._v("图像资源处理")]),t._v("。")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fallback")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'file-loader'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义fallback为true时使用的loader")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* png资源引入 */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("<style>\n  .logo2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v("'./images/logo.png?fallback=true'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 设置fallback=true，则使用如上方所配置的file-loader */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n</style>\n")])])]),s("h3",{attrs:{id:"uselocal"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#uselocal"}},[t._v("#")]),t._v(" ?useLocal")]),t._v(" "),s("p",[s("code",[t._v("boolean")])]),t._v(" "),s("p",[t._v("静态资源存放有两种方式：本地、远程（配置 publicPath ）。useLocal 是用于在配置了 publicPath 时声明部分资源输出到本地。比如配置了通用的 CDN 策略，但如网络兜底资源需要强制走本地存储，可在引用资源的末尾加上"),s("code",[t._v("?useLocal=true")])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 单个图片资源设置为存储到本地 */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("<style>\n  .logo2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v("'./images/logo.png?useLocal=true'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n</style>\n")])])]),s("h3",{attrs:{id:"isstyle"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#isstyle"}},[t._v("#")]),t._v(" ?isStyle")]),t._v(" "),s("p",[s("code",[t._v("boolean")])]),t._v(" "),s("p",[t._v("isStyle 是在非 style 模块中编写样式时，声明这部分引用的静态资源按照 style 环境来处理。如在 javascript 中 require 了一个图像资源，然后模版 template style 属性中进行引用， 则 require 资源时可选择配置"),s("code",[t._v("?isStyle=true")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- isStyle 案例一：引用 javascript 中的数据 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("testStyle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("测试"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- isStyle 案例二：设置资源按照style处理规则处理。style处理规则为: 默认走base64，除非同时配置了 publicPath 和 fallback --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("image")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("../images/car.jpg?isStyle=true"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 普通非style模式，默认走 fallback 或者 file-loader 解析，输出到 publicPath 或者 本地img目录下 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("image")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("../images/car.jpg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 将 script 中的图像资源标识为 style 资源 */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" backCar "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../images/car.jpg?isStyle=true'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("testStyle")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("background-image : url(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("backCar"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("); width:100px; height: 100px")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("h3",{attrs:{id:"ispage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ispage"}},[t._v("#")]),t._v(" ?isPage")]),t._v(" "),s("p",[s("code",[t._v("boolean")])]),t._v(" "),s("p",[t._v("在 webpack config entry 入口文件配置中，你可以在路径后追加 ?isPage 来声明独立页面构建，构建产物为该页面的独立原生代码，\n你可以提供该页面给其他小程序使用。此外，独立页面构建也可以通过MpxWebpackPlugin.getPageEntry生成，推荐使用"),s("a",{attrs:{href:"#mpxwebpackplugin-getpageentry"}},[t._v("此方法。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/pages/index.mpx?isPage'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// config.entry('index').add(MpxWebpackPlugin.getPageEntry('./index.mpx'))")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("对于使用 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 脚手架初始化的项目，配置 entry 的方式如下")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// build/getWebpackConf.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("index")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/pages/index.mpx?isPage'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),s("h3",{attrs:{id:"iscomponent"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#iscomponent"}},[t._v("#")]),t._v(" ?isComponent")]),t._v(" "),s("p",[s("code",[t._v("boolean")])]),t._v(" "),s("p",[t._v("在 webpack config entry 入口文件配置中，你可以在路径后追加 ?isComponent 来声明独立组件构建，构建产物为该组件的独立原生代码，\n你可以提供该组件给其他小程序使用。\n此外，独立组件构建也可以通过MpxWebpackPlugin.getComponentEntry生成，推荐使用"),s("a",{attrs:{href:"#mpxwebpackplugin-getcomponententry"}},[t._v("此方法。")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/components/list.mpx?isComponent'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// config.entry('index').add(MpxWebpackPlugin.getComponentEntry('./components/list.mpx'))")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"async"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#async"}},[t._v("#")]),t._v(" ?async")]),t._v(" "),s("p",[s("code",[t._v("boolean | string")])]),t._v(" "),s("p",[t._v("输出 H5 时 Vue Router 的路由懒加载功能，Mpx框架默认会对分包开启路由懒加载功能并将分包所有页面都打入同一个Chunk\n，如果你希望对于部分主包页面或者分包页面配置路由懒加载并想自定义Chunk Name，则可以使用该功能。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("// app.mpx \n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index?async"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 主包页面配置路由懒加载，Chunk Name 为随机数字")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index2?async=app_pages2"')]),t._v("，"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 主包页面配置路由懒加载，Chunk Name 自定义为 app_pages2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./packages/sub1/app.mpx?root=sub1"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// packages/sub1/app.mpx\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index?async=sub1_pages_index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 分包中页面设置路由懒加载并设置自定义Chunk Name")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index2?async=sub2_pages_index2"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 分包中页面设置路由懒加载并设置自定义Chunk Name")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/39.094ffa40.js b/docs-vuepress/.vuepress/dist/assets/js/39.094ffa40.js
new file mode 100644
index 0000000000..89a42a7159
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/39.094ffa40.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{388:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"组合式-api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api"}},[t._v("#")]),t._v(" 组合式 API")]),t._v(" "),a("h2",{attrs:{id:"setup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setup"}},[t._v("#")]),t._v(" setup")]),t._v(" "),a("p",[t._v("一个组件选项，在组件被创建之前，props 被解析之后执行。是组合式 API 的入口。")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("参数")]),t._v("：\n"),a("ul",[a("li",[a("code",[t._v("{Data} props")])]),t._v(" "),a("li",[a("code",[t._v("{SetupContext} context")])])])])]),t._v(" "),a("p",[t._v("该 "),a("strong",[t._v("props")]),t._v(" 对象仅包含显性声明的 properties。并且所有声明了的prop，不论父组件是否向其传递，\n都将出现在 "),a("strong",[t._v("props")]),t._v(" 对象中。其中未被传入的可选的 prop 的值会是默认值或 undefined。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("min")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Number"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("lastLeaf")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Number"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("optionalTypes")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("String"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" Object"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("min"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lastLeaf"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("ul",[a("li",[a("strong",[t._v("类型声明")]),t._v("：")])]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SetupContext")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("triggerEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n       name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n       detail"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// detail对象，提供给事件监听函数")]),t._v("\n       options"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         bubbles"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v("\n         composed"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v("\n         capturePhase"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v("\n       "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n    refs"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ObjectOf"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("NodesRef "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" ComponentIns"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    asyncRefs"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ObjectOf"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("NodesRef "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" ComponentIns"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 字节小程序特有")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("nextTick")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("fn")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("forceUpdate")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("params"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("selectComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selector"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ComponentIns\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("selectAllComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selector"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ComponentIns"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createSelectorQuery")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" SelectorQuery\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createIntersectionObserver")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n      options"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        thresholds"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n        initialRatio"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v("\n        observeAll"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" IntersectionObserver"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Record"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" SetupContext"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Record"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("h2",{attrs:{id:"生命周期钩子"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#生命周期钩子"}},[t._v("#")]),t._v(" 生命周期钩子")]),t._v(" "),a("p",[t._v("可以通过直接导入 on* 函数来注册生命周期钩子：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" onMounted"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onUpdated"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onUnmounted"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createComponent "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mounted!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onUpdated")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'updated!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onUnmounted")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unmounted!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("这些生命周期钩子注册函数只能在 setup() 期间同步使用，因为它们依赖于内部的全局状态来定位当前活动的实例 (此时正在调用其 setup() 的组件实例)。\n在没有当前活动实例的情况下，调用它们将会出错。")]),t._v(" "),a("p",[t._v("组件实例的上下文也是在生命周期钩子的同步执行期间设置的，因此，在生命周期钩子内同步创建的侦听器和计算属性也会在组件卸载时自动删除。")]),t._v(" "),a("p",[t._v("新版本的生命周期钩子我们基本上和 Vue 中的生命周期钩子对齐，相较于之前还是有部分生命周期钩子的改动。")]),t._v(" "),a("h3",{attrs:{id:"onbeforemount"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onbeforemount"}},[t._v("#")]),t._v(" onBeforeMount")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("在组件布局完成后执行，refs 相关的前置工作在该钩子中执行。")]),t._v(" "),a("h3",{attrs:{id:"onmounted"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onmounted"}},[t._v("#")]),t._v(" onMounted")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("在组件布局完成后执行，refs 可以直接获取。")]),t._v(" "),a("h3",{attrs:{id:"onbeforeupdate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onbeforeupdate"}},[t._v("#")]),t._v(" onBeforeUpdate")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("在数据发生改变后，组件/页面更新之前被调用。这里适合在现有组件/页面将要被更新之前访问它，\n比如移除某个手动添加的监听器，或者获取某个元素更新前的高度。")]),t._v(" "),a("h3",{attrs:{id:"onupdated"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onupdated"}},[t._v("#")]),t._v(" onUpdated")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("在数据更改导致的页面/组件重新渲染和更新完毕之后被调用。")]),t._v(" "),a("p",[t._v("注意，onUpdated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等待整个视图都渲染完毕，可以在 onUpdated 内部使用 nextTick。")]),t._v(" "),a("h3",{attrs:{id:"onbeforeunmount"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onbeforeunmount"}},[t._v("#")]),t._v(" onBeforeUnmount")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("在卸载组件/页面实例之前调用。在这个阶段，实例仍然是完全正常的。")]),t._v(" "),a("h3",{attrs:{id:"onunmount"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onunmount"}},[t._v("#")]),t._v(" onUnmount")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除。")]),t._v(" "),a("h3",{attrs:{id:"onload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onload"}},[t._v("#")]),t._v(" onLoad")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序页面 onLoad 事件，监听页面加载。")]),t._v(" "),a("h3",{attrs:{id:"onshow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onshow"}},[t._v("#")]),t._v(" onShow")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序页面 onShow 事件，监听页面展示。")]),t._v(" "),a("h3",{attrs:{id:"onhide"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onhide"}},[t._v("#")]),t._v(" onHide")]),t._v(" "),a("p",[a("code",[t._v("Function")]),t._v("\n小程序页面 onHide 事件，监听页面隐藏。")]),t._v(" "),a("h3",{attrs:{id:"onresize"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onresize"}},[t._v("#")]),t._v(" onResize")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序页面 onResize 事件，页面尺寸改变时触发。")]),t._v(" "),a("h3",{attrs:{id:"onpulldownrefresh"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onpulldownrefresh"}},[t._v("#")]),t._v(" onPullDownRefresh")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序监听用户下拉刷新事件。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPullDownRefresh",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"onreachbottom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onreachbottom"}},[t._v("#")]),t._v(" onReachBottom")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序监听用户上拉触底事件。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onReachBottom",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"onshareappmessage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onshareappmessage"}},[t._v("#")]),t._v(" onShareAppMessage")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v('小程序监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。'),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"onsharetimeline"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onsharetimeline"}},[t._v("#")]),t._v(" onShareTimeline")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("strong",[t._v("注意：")]),t._v(" 仅微信小程序支持")]),t._v(" "),a("h3",{attrs:{id:"onaddtofavorites"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onaddtofavorites"}},[t._v("#")]),t._v(" onAddToFavorites")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onAddToFavorites-Object-object",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("strong",[t._v("注意：")]),t._v(" 仅微信小程序支持")]),t._v(" "),a("h3",{attrs:{id:"onpagescroll"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onpagescroll"}},[t._v("#")]),t._v(" onPageScroll")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序监听用户滑动页面事件。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPageScroll-Object-object",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"ontabitemtap"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ontabitemtap"}},[t._v("#")]),t._v(" onTabItemTap")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("点击 tab 时触发。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onTabItemTap-Object-object",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"onsaveexitstate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onsaveexitstate"}},[t._v("#")]),t._v(" onSaveExitState")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用，可以进行退出状态的保存。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onSaveExitState",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("strong",[t._v("注意：")]),t._v(" 仅微信小程序支持")]),t._v(" "),a("h3",{attrs:{id:"onserverprefetch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onserverprefetch"}},[t._v("#")]),t._v(" onServerPrefetch")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("类型：")]),t._v(" "),a("code",[t._v("Function")])]),t._v(" "),a("li",[a("strong",[t._v("详细：")])])]),t._v(" "),a("p",[t._v("SSR渲染定制钩子，在服务端渲染期间被调用，可以实现在服务端进行数据预取。")]),t._v(" "),a("p",[a("strong",[t._v("注意：")]),t._v(" 仅 web 环境支持")]),t._v(" "),a("h2",{attrs:{id:"getcurrentinstance"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcurrentinstance"}},[t._v("#")]),t._v(" getCurrentInstance")]),t._v(" "),a("p",[t._v("getCurrentInstance 支持访问内部组件实例。")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("注意：")])])]),t._v(" "),a("p",[t._v("getCurrentInstance 只暴露给高阶使用场景，典型的比如在库中。强烈反对在应用的代码中使用 getCurrentInstance。请不要把它当作在组合式 API 中获取 this 的替代方案来使用。")]),t._v(" "),a("p",[t._v("getCurrentInstance 只能在 setup 或生命周期钩子中调用。")]),t._v(" "),a("h2",{attrs:{id:"usei18n"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usei18n"}},[t._v("#")]),t._v(" useI18n")]),t._v(" "),a("p",[t._v("点击"),a("RouterLink",{attrs:{to:"/api/extend.html#usei18n"}},[t._v("查看详情")])],1),t._v(" "),a("h2",{attrs:{id:"usefetch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usefetch"}},[t._v("#")]),t._v(" useFetch")]),t._v(" "),a("p",[t._v("点击"),a("RouterLink",{attrs:{to:"/api/extend.html#usefetch"}},[t._v("查看详情")])],1)])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/4.9489102c.js b/docs-vuepress/.vuepress/dist/assets/js/4.9489102c.js
new file mode 100644
index 0000000000..4cb83cc712
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/4.9489102c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4,20,31],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return a})),n.d(e,"f",(function(){return u})),n.d(e,"g",(function(){return l})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return d})),n.d(e,"k",(function(){return h})),n.d(e,"l",(function(){return f})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return m}));n(69),n(10),n(19),n(48),n(30);const r=/#.*$/,i=/\.(md|html)$/,s=/\/$/,a=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(r,"").replace(i,"")}function u(t){return a.test(t)}function l(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function p(t){if(u(t))return t;const e=t.match(r),n=e?e[0]:"",i=o(t);return s.test(i)?t:i+".html"+n}function d(t,e){const n=decodeURIComponent(t.hash),i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function h(t,e,n){if(u(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t<s.length;t++){const e=s[t];".."===e?i.pop():"."!==e&&i.push(e)}""!==i[0]&&i.unshift("");return i.join("/")}(e,n));const r=o(e);for(let e=0;e<t.length;e++)if(o(t[e].regularPath)===r)return Object.assign({},t[e],{type:"page",path:p(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function f(t,e,n,r){const{pages:i,themeConfig:s}=n,a=r&&s.locales&&s.locales[r]||s;if("auto"===(t.frontmatter.sidebar||a.sidebar||s.sidebar))return b(t);const o=a.sidebar||s.sidebar;if(o){const{base:n,config:r}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,o);return"auto"===r?b(t):r?r.map(t=>function t(e,n,r,i=1){if("string"==typeof e)return h(n,e,r);if(Array.isArray(e))return Object.assign(h(n,e[0],r),{title:e[1]});{const s=e.children||[];return 0===s.length&&e.path?Object.assign(h(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:s.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(t,i,n)):[]}return[]}function b(t){const e=g(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function g(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},291:function(t,e,n){},294:function(t,e,n){"use strict";n(291)},296:function(t,e,n){"use strict";n.r(e);var r={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},i=(n(294),n(4)),s=Object(i.a)(r,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},300:function(t,e,n){},311:function(t,e,n){},312:function(t,e,n){"use strict";n(313)},313:function(t,e,n){"use strict";var r=n(14),i=n(49),s=n(11),a=n(5),o=n(26);r({target:"Iterator",proto:!0,real:!0},{find:function(t){a(this),s(t);var e=o(this),n=0;return i(e,(function(e,r){if(t(e,n++))return r(e)}),{IS_RECORD:!0,INTERRUPTED:!0}).result}})},314:function(t,e,n){"use strict";n(300)},325:function(t,e,n){"use strict";n.r(e);n(10),n(47);var r=n(338),i=n(327),s=n(290);function a(t,e){if("group"===e.type){const n=e.path&&Object(s.e)(t,e.path),r=e.children.some(e=>"group"===e.type?a(t,e):"page"===e.type&&Object(s.e)(t,e.path));return n||r}return!1}var o={name:"SidebarLinks",components:{SidebarGroup:r.default,SidebarLink:i.default},props:["items","depth","sidebarDepth","initialOpenGroupIndex"],data(){return{openGroupIndex:this.initialOpenGroupIndex||0}},watch:{$route(){this.refreshIndex()}},created(){this.refreshIndex()},methods:{refreshIndex(){const t=function(t,e){for(let n=0;n<e.length;n++){const r=e[n];if(a(t,r))return n}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(s.e)(this.$route,t.regularPath)}}},u=n(4),l=Object(u.a)(o,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(n,r){return e("li",{key:r},["group"===n.type?e("SidebarGroup",{attrs:{item:n,open:r===t.openGroupIndex,collapsable:n.collapsable||n.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(r)}}}):e("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:n}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=l.exports},327:function(t,e,n){"use strict";n.r(e);n(10),n(312),n(30),n(47);var r=n(290);function i(t,e,n,r,i){const s={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:r,"sidebar-link":!0}};return i>2&&(s.style={"padding-left":i+"rem"}),t("RouterLink",s,n)}function s(t,e,n,a,o,u=1){return!e||u>o?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const l=Object(r.e)(a,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[i(t,n+"#"+e.slug,e.title,l,e.level-1),s(t,e.children,n,a,o,u+1)])}))}var a={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:a,$themeConfig:o,$themeLocaleConfig:u},props:{item:l,sidebarDepth:c}}){const p=Object(r.e)(a,l.path),d="auto"===l.type?p||l.children.some(t=>Object(r.e)(a,l.basePath+"#"+t.slug)):p,h="external"===l.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,l.path,l.title||l.path):i(t,l.path,l.title||l.path,d),f=[e.frontmatter.sidebarDepth,c,u.sidebarDepth,o.sidebarDepth,1].find(t=>void 0!==t),b=u.displayAllHeaders||o.displayAllHeaders;if("auto"===l.type)return[h,s(t,l.children,l.basePath,a,f)];if((d||b)&&l.headers&&!r.d.test(l.path)){return[h,s(t,Object(r.c)(l.headers),l.path,a,f)]}return h}},o=(n(314),n(4)),u=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=u.exports},331:function(t,e,n){"use strict";n(311)},338:function(t,e,n){"use strict";n.r(e);var r=n(290),i={name:"SidebarGroup",components:{DropdownTransition:n(296).default},props:["item","open","collapsable","depth"],beforeCreate(){this.$options.components.SidebarLinks=n(325).default},methods:{isActive:r.e}},s=(n(331),n(4)),a=Object(s.a)(i,(function(){var t=this,e=t._self._c;return e("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?e("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):e("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),e("DropdownTransition",[t.open||!t.collapsable?e("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,"initial-open-group-index":t.item.initialOpenGroupIndex,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null);e.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/40.10d90636.js b/docs-vuepress/.vuepress/dist/assets/js/40.10d90636.js
new file mode 100644
index 0000000000..597926bdd8
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/40.10d90636.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{387:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"模板指令"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#模板指令"}},[t._v("#")]),t._v(" 模板指令")]),t._v(" "),a("h2",{attrs:{id:"wx-if"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-if"}},[t._v("#")]),t._v(" wx:if")]),t._v(" "),a("p",[a("code",[t._v("any")])]),t._v(" "),a("p",[t._v("根据表达式的值的 "),a("a",{attrs:{href:"https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy",target:"_blank",rel:"noopener noreferrer"}},[t._v("truthiness"),a("OutboundLink")],1),t._v(" 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 "),a("strong",[t._v("注意：如果元素是 "),a("code",[t._v("<block/>")]),t._v(", 注意它并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性")]),t._v("。")]),t._v(" "),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[t._v("DANGER")]),t._v(" "),a("p",[t._v("当和 "),a("code",[t._v("wx:if")]),t._v(" 一起使用时，"),a("code",[t._v("wx:for")]),t._v(" 的优先级比 "),a("code",[t._v("wx:if")]),t._v(" 更高。详见列"),a("RouterLink",{attrs:{to:"/guide/basic/list-render.html"}},[t._v("表渲染教程")])],1)]),t._v(" "),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/conditional-render.html"}},[t._v("条件渲染 - wx:if")])],1),t._v(" "),a("h2",{attrs:{id:"wx-elif"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-elif"}},[t._v("#")]),t._v(" wx:elif")]),t._v(" "),a("p",[a("code",[t._v("any")])]),t._v(" "),a("p",[t._v("前一兄弟元素必须有 "),a("code",[t._v("wx:if")]),t._v(" 或 "),a("code",[t._v("wx:elif")]),t._v("。表示 "),a("code",[t._v("wx:if")]),t._v(" 的“ "),a("code",[t._v("wx:elif")]),t._v(" 块”，可以链式调用。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{type === 'A'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  A\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("elif")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{type === 'B'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  B\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("elif")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{type === 'C'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  C\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("else")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  Not A/B/C\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/conditional-render.html"}},[t._v("条件渲染 - wx:elif")])],1),t._v(" "),a("h2",{attrs:{id:"wx-else"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-else"}},[t._v("#")]),t._v(" wx:else")]),t._v(" "),a("p",[t._v("不需要表达式，前一兄弟元素必须有 "),a("code",[t._v("wx:if")]),t._v(" 或 "),a("code",[t._v("wx:elif")])]),t._v(" "),a("p",[t._v("为 "),a("code",[t._v("wx:if")]),t._v(" 或者 "),a("code",[t._v("wx:elif")]),t._v(" 添加 "),a("code",[t._v("wx:else")]),t._v(" 块")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{type === 'A'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  A\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("else")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  Not A\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/conditional-render.html"}},[t._v("条件渲染 - wx:else")])],1),t._v(" "),a("h2",{attrs:{id:"wx-for"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-for"}},[t._v("#")]),t._v(" wx:for")]),t._v(" "),a("p",[a("code",[t._v("Array | Object | number | string")])]),t._v(" "),a("p",[t._v("在组件上使用 "),a("code",[t._v("wx:for")]),t._v(" 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 "),a("code",[t._v("index")]),t._v("，数组当前项的变量名默认为 "),a("code",[t._v("item")])]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{ index }}: {{ item.message }}\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// 0: foo\n// 1: bar\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("array")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bar'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[a("code",[t._v("wx:for")]),t._v(" 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 "),a("code",[t._v("attribute key")]),t._v(" 来提供一个排序提示：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{ item.text }}\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// foo\n// bar\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("array")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bar'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[t._v("DANGER")]),t._v(" "),a("p",[t._v("当和 "),a("code",[t._v("wx:if")]),t._v(" 一起使用时，"),a("code",[t._v("wx:for")]),t._v(" 的优先级比 "),a("code",[t._v("wx:if")]),t._v(" 更高。详见列"),a("RouterLink",{attrs:{to:"/guide/basic/list-render.html"}},[t._v("表渲染教程")])],1)]),t._v(" "),a("p",[a("code",[t._v("wx:for")]),t._v(" 的详细用法可以通过以下链接查看教程详细说明。")]),t._v(" "),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/list-render.html"}},[t._v("列表渲染 - wx:for")])],1),t._v(" "),a("h2",{attrs:{id:"wx-for-index"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-for-index"}},[t._v("#")]),t._v(" wx:for-index")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("使用 wx:for-index 可以指定数组当前下标的变量名：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for-index")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("idx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{ idx }}: {{ item.text }}\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// 0: foo\n// 1: bar\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("array")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bar'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/list-render.html"}},[t._v("列表渲染 - wx:for-index")])],1),t._v(" "),a("h2",{attrs:{id:"wx-for-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-for-item"}},[t._v("#")]),t._v(" wx:for-item")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("使用 wx:for-item 可以指定数组当前元素的变量名：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for-item")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for-item")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("j"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{i <= j}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      {{i}} * {{j}} = {{i * j}}\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/list-render.html"}},[t._v("列表渲染 - wx:for-item")])],1),t._v(" "),a("h2",{attrs:{id:"wx-key"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-key"}},[t._v("#")]),t._v(" wx:key")]),t._v(" "),a("p",[a("code",[t._v("number | string")])]),t._v(" "),a("p",[t._v("如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用 wx:key 来指定列表中项目的唯一的标识符。\n"),a("strong",[t._v("注意：如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略")]),t._v("。")]),t._v(" "),a("p",[t._v("有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。")]),t._v(" "),a("p",[t._v("常见的用例是结合 "),a("code",[t._v("wx:for")]),t._v("：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{ item.text }}\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/list-render.html"}},[t._v("列表渲染 - wx:for")])],1),t._v(" "),a("h2",{attrs:{id:"wx-class"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-class"}},[t._v("#")]),t._v(" wx:class")]),t._v(" "),a("p",[t._v("绑定HTML Class: 类似vue的class绑定")]),t._v(" "),a("p",[t._v("#对象用法")]),t._v(" "),a("p",[t._v("我们可以传给 "),a("code",[t._v("wx:class")]),t._v(" 一个对象，以动态地切换 class：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ {active: isActive} }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("你可以在对象中传入更多字段来动态切换多个 class。此外，"),a("code",[t._v("wx:class")]),t._v(" 指令也可以与普通的 class attribute 共存。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("static"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ {active: isActive, text-danger: hasError} }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("isActive")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hasError")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("渲染为：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("static active"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("注意：由于微信的限制，"),a("code",[t._v("wx:class")]),t._v(" 中的 key 值不能使用引号（如: { 'my-class-name': xx }）")])]),t._v(" "),a("p",[t._v("绑定的数据对象不必内联定义在模板里：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ classObject }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("classObject")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'text-danger'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("我们也可以在这里绑定一个返回对象的计算属性。")]),t._v(" "),a("p",[t._v("如果你也想根据条件切换列表中的 class，可以用三元表达式：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ isActive ? 'active' : '' }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("#数组用法")]),t._v(" "),a("p",[t._v("我们可以把一个数组传给 "),a("code",[t._v("wx:class")]),t._v("，以应用一个 class 列表：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{[activeClass, errorClass]}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("activeClass")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'active'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("errorClass")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'text-danger'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("渲染为：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("active text-danger"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html#类名绑定"}},[t._v("类名样式绑定 - 类名绑定")])],1),t._v(" "),a("h2",{attrs:{id:"wx-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-style"}},[t._v("#")]),t._v(" wx:style")]),t._v(" "),a("p",[a("code",[t._v("wx:style")]),t._v(" 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 来命名：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("color: {{activeColor}}; font-size: {{fontSize}}px; fontWeight: bold"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("activeColor")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontSize")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("30")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("直接绑定到一个样式对象通常更好，这会让模板更清晰：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{styleObject}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("styleObject")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontWeight")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("同样的，对象语法常常结合返回对象的计算属性使用。")]),t._v(" "),a("p",[a("code",[t._v("wx:style")]),t._v(" 的数组语法可以将多个样式对象应用到同一个元素上")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{[baseStyles, overridingStyles]}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html#样式绑定"}},[t._v("类名样式绑定 - 样式绑定")])],1),t._v(" "),a("h2",{attrs:{id:"wx-model"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-model"}},[t._v("#")]),t._v(" wx:model")]),t._v(" "),a("p",[t._v("除了小程序原生指令之外，mpx 基于input事件提供了一个指令 wx:model, 用于双向绑定。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{val}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{test.val}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{test['val']}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("wx:model并不会影响相关的事件处理函数，比如像下面这样：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{inputValue}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindinput")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleInput"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html"}},[t._v("双向绑定")])],1),t._v(" "),a("h2",{attrs:{id:"wx-model-prop"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-model-prop"}},[t._v("#")]),t._v(" wx:model-prop")]),t._v(" "),a("p",[t._v("wx:model 默认使用 "),a("code",[t._v("value")]),t._v(" 属性传值，使用 "),a("code",[t._v("wx:model-prop")]),t._v(" 定义 wx:model 指令对应的属性；")]),t._v(" "),a("h2",{attrs:{id:"wx-model-event"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-model-event"}},[t._v("#")]),t._v(" wx:model-event")]),t._v(" "),a("p",[t._v("wx:model 默认监听 "),a("code",[t._v("input")]),t._v(" 事件，可以使用 "),a("code",[t._v("wx:model-event")]),t._v(" 定义 wx:model 指令对应的事件；")]),t._v(" "),a("p",[t._v("父组件")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("customCheck")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{checked}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-prop")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("checkedProp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-event")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("checkedChange"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("customCheck")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createPage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("checked")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"customCheck"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./customCheck"')]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),a("p",[t._v("子组件：(customCheck.mpx)")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("viewProps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{checkedProp}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylus"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token style"}},[a("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".viewProps")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    width 100px\n    height 100px\n    color #000\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("checkedProp")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Boolean\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTap")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里第二个参数为自定义事件的detail，需要以下面的形式传递值以保持与原生组件对齐")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("triggerEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'checkedChange'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("checkedProp\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如示例，当子组件被点击时，父组件的checked数据会发生变化")]),t._v(" "),a("blockquote",[a("p",[t._v("注意：由于微信限制，如果事件名使用横线分割（'checked-change'）,将不可以再使用该特性")])]),t._v(" "),a("h2",{attrs:{id:"wx-model-value-path"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-model-value-path"}},[t._v("#")]),t._v(" wx:model-value-path")]),t._v(" "),a("p",[t._v("指定 wx:model 双向绑定时的取值路径；\n并非所有的组件都会按微信的标注格式 "),a("code",[t._v("event.detail.value")]),t._v(" 来传值，例如 vant 的 input 组件，值是通过抛出 "),a("code",[t._v("event.detail")]),t._v(" 本身传递的，这时我们可以使用 "),a("code",[t._v('wx:model-value-path="[]"')]),t._v(" 重新指定取值路径。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("vant-field")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-value-path")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("[]"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{a}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("vant-field")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"wx-model-filter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-model-filter"}},[t._v("#")]),t._v(" wx:model-filter")]),t._v(" "),a("p",[t._v("在使用 "),a("code",[t._v("wx:model")]),t._v(" 时我们可能需要像 Vue 的 "),a("code",[t._v(".trim")]),t._v(" 、"),a("code",[t._v(".lazy")]),t._v(" 这样的修饰符来对双向数据绑定的数据进行过滤和修饰；Mpx 通过增强指令 "),a("code",[t._v("wx:model-filter")]),t._v(" 可以实现这一功能；\n该指令可以绑定内建的 filter 或者自定义的 filter 方法，该方法接收过滤前的值，返回过滤操作后的值。")]),t._v(" "),a("p",[t._v("例如我们希望拿到的 input 元素中的数据是经过 trim 的。示例：")]),t._v(" "),a("blockquote",[a("p",[t._v('当然，Mpx 已经内置了 trim 过滤器；可以通过 wx:model-filter="trim" 直接使用；')])]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cover-page"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n       "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- wx:model-filter 过滤wx:model 的值--\x3e")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-filter")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("trimSpace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{filterData}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{filterData.length}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("filterData")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'model-filter'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trimSpace")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wx:model-filter 绑定的 filter 方法")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" val "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'string'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" val"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trim")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("filter 方法除可以是和 "),a("code",[t._v("methods")]),t._v(" 平级的方法，还可以是 "),a("code",[t._v("methods")]),t._v(" 中的方法。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("..."),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("  \n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("filterData")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'model-filter'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trimSpace")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wx:model-filter 支持将过滤器方法定义成 methods 中的方法")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" val "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'string'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" val"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trim")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"wx-ref"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-ref"}},[t._v("#")]),t._v(" wx:ref")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("Mpx提供了 "),a("code",[t._v("wx:ref=xxx")]),t._v(" 来更方便获取 WXML 节点信息的对象。在JS里只需要通过this.$refs.xxx 即可获取节点。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[t._v("  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    123\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("fields")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("size")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  ")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/refs.html"}},[t._v("获取组件实例 - wx:ref")])],1),t._v(" "),a("h2",{attrs:{id:"wx-show"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-show"}},[t._v("#")]),t._v(" wx:show")]),t._v(" "),a("p",[a("code",[t._v("boolean")])]),t._v(" "),a("p",[t._v("与 "),a("code",[t._v("wx:if")]),t._v(" 所不同的是"),a("strong",[t._v("不会移除节点")]),t._v("，而是设置节点的 "),a("code",[t._v("style")]),t._v(" 为 "),a("code",[t._v("display: none")]),t._v("。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("show")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{show}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  123\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("show")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h2",{attrs:{id:"bind"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bind"}},[t._v("#")]),t._v(" bind")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("让 "),a("code",[t._v("bind + (:?) + eventType")]),t._v(" 作为属性值")]),t._v(" "),a("p",[t._v("比如："),a("code",[t._v("bindtap")])]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tapTest"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" Click me! "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bind:")]),t._v("tap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tapTest1(testVal, $event)"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" Click me! "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("tapTest")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Clicked!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("tapTest1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Mpx做了增强的"),a("strong",[t._v("内联传参")]),t._v("能力以及具体有哪些事件"),a("strong",[t._v("类型")]),t._v("参考下方")]),t._v(" "),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("事件处理 - bind")])],1),t._v(" "),a("h2",{attrs:{id:"catch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#catch"}},[t._v("#")]),t._v(" catch")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("让 "),a("code",[t._v("catch + (:?) + eventType")]),t._v(" 作为属性值")]),t._v(" "),a("p",[t._v("除 "),a("code",[t._v("bind")]),t._v(" 外，也可以用 "),a("code",[t._v("catch")]),t._v(" 来绑定事件。与 "),a("code",[t._v("bind")]),t._v(" 不同，"),a("code",[t._v("catch")]),t._v(" 会阻止事件向上冒泡。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("outer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  outer view\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("middle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("catchtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    middle view\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("inner"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      inner view\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTap1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'outer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTap2")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'middle'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTap3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'inner'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过几个操作看出被catchtap的middle view阻止了向上冒泡")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// click outer")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// outer")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// click middle")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// middle")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// click inner")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// inner")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// middle")]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("事件处理 - catch")])],1),t._v(" "),a("h2",{attrs:{id:"capture-bind"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#capture-bind"}},[t._v("#")]),t._v(" capture-bind")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("让 "),a("code",[t._v("capture-bind + (:?) + eventType")]),t._v(" 作为属性值")]),t._v(" "),a("p",[t._v("capture-bind要在bind之前执行，是因为事件是先捕获后冒泡，"),a("strong",[t._v("注意：仅触摸类事件支持捕获阶段")])]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[t._v("  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("outer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("capture-bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    outer view\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("inner"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("capture-bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      inner view\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("点击inner view的调用顺序是(handleTap)2、4、3、1")]),t._v(" "),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("事件处理 - capture-bind")])],1),t._v(" "),a("h2",{attrs:{id:"capture-catch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#capture-catch"}},[t._v("#")]),t._v(" capture-catch")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("让 "),a("code",[t._v("capture-catch + (:?) + eventType")]),t._v(" 作为属性值")]),t._v(" "),a("p",[t._v("capture-catch中断捕获阶段和取消冒泡阶段")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("outer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("capture-catch:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  outer view\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("inner"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("capture-bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    inner view\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("点击inner view仅执行handleTap2")]),t._v(" "),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("事件处理 - capture-catch")])],1),t._v(" "),a("h2",{attrs:{id:"mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mode"}},[t._v("#")]),t._v(" @mode")]),t._v(" "),a("p",[a("code",[t._v("type mode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'")])]),t._v(" "),a("p",[t._v("跨平台输出场景下，Mpx 框架允许用户在组件上使用 @ 和 | 符号来指定某个节点或属性只在某些平台下有效。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type@wx|swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindgetuserinfo@wx|swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getAuthorize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scope@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("userInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("在上方示例中，开发者可以便捷的设置在支付宝小程序与微信和百度小程序等平台分别生效的 open-type 属性，\n以及事件绑定或其他属性。假设当前 srcMode 为 wx，目标平台为 ali，则输出产物为：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getAuthorize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scope")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("userInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("同时，该指令也可以作用在单个节点上，但需要注意的是，该指令作用在单个节点时，节点仅在目标平台输出，同时节点自身属性不会进行跨平台语法转换，不过其子节点不受影响。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--当srcMode为wx，跨平台输出ali时--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--错误写法--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{flag}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("text"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--正确写法--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{flag}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("text"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mode"}},[t._v("#")]),t._v(" @_mode")]),t._v(" "),a("p",[a("code",[t._v("type _mode = '_wx' | '_ali' | '_qq' | '_swan' | '_tt' | '_web' | '_qa'")])]),t._v(" "),a("p",[t._v("有时开发者期望使用 @mode 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--srcMode为 wx，输出 ali 时，bindtap 会被正常转换为 onTap--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@_ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。")]),t._v(" "),a("h2",{attrs:{id:"env"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#env"}},[t._v("#")]),t._v(" @env")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("跨平台输出场景下，除了 mode 平台场景值，Mpx 框架还提供自定义 env 目标应用，来实现在不同应用下编译产出不同的代码。")]),t._v(" "),a("p",[t._v("关于 env 的详细介绍可以点击"),a("RouterLink",{attrs:{to:"/guide/advance/platform.html#use-env"}},[t._v("查看")])],1),t._v(" "),a("p",[t._v("跨平台输出使用 env 与 mode 一样支持文件纬度、区块纬度、节点纬度、属性纬度等条件编译，这里我们仅介绍下节点和属性纬度的指令模式使用，env 与 mode 可以组合使用。")]),t._v(" "),a("p",[t._v("env 属性维度条件编译与 mode 的用法大致相同，使用 : 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 attr@mode:env:env|mode:env，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 : 前缀，形如 attr@:env。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--open-type 属性仅在百度平台且应用 env 为 didi 时保留--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@swan:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--open-type 属性在应用 env 为 didi 的任意小程序平台保留--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--open-type 属性在微信平台且应用 env 为 didi 或 qingju 时保留--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@wx:")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("didi:")]),t._v("qingju")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("env 也可在单个节点上进行条件编译：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--整个节点在应用 env 为 didi时进行保留--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("需要注意的时，如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("@:")]),t._v("didi")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bindtap@:")]),t._v("didi")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"mpxtagname"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mpxtagname"}},[t._v("#")]),t._v(" mpxTagName")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("跨平台输出时，有时开发者不仅需要对节点属性进行条件编译，可能还需对节点标签进行条件编译。")]),t._v(" "),a("p",[t._v("为此，Mpx 框架支持了一个特殊属性 mpxTagName，如果节点存在这个属性，在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mpxTagName@swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cover-view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("will be cover-view in swan"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/41.8351af86.js b/docs-vuepress/.vuepress/dist/assets/js/41.8351af86.js
new file mode 100644
index 0000000000..4fe0c51f14
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/41.8351af86.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{389:function(t,e,a){"use strict";a.r(e);var s=a(4),n=Object(s.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"周边拓展"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#周边拓展"}},[t._v("#")]),t._v(" 周边拓展")]),t._v(" "),e("h2",{attrs:{id:"mpx-fetch"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mpx-fetch"}},[t._v("#")]),t._v(" mpx-fetch")]),t._v(" "),e("p",[t._v("mpx-fetch提供了一个实例"),e("strong",[t._v("xfetch")]),t._v(" ，该实例包含以下api")]),t._v(" "),e("h3",{attrs:{id:"fetch-config"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fetch-config"}},[t._v("#")]),t._v(" fetch(config)")]),t._v(" "),e("blockquote",[e("p",[t._v("正常的promisify风格的请求方法")])]),t._v(" "),e("ul",[e("li",[e("p",[e("code",[t._v("{Object} config")])]),t._v(" "),e("p",[t._v("config 可指定以下属性：")]),t._v(" "),e("ul",[e("li",[e("p",[e("strong",[t._v("url")])]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("设置请求url")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("method")])]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("设置请求方式，默认为GET")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("data")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("设置请求参数")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("params")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("设置请求参数，参数会以 Query String 的形式进行传递")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("header")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("设置请求的 header，header 中不能设置 Referer。\n"),e("code",[t._v("content-type")]),t._v(" 默认为 "),e("code",[t._v("application/json")])])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("timeout")])]),t._v(" "),e("p",[e("code",[t._v("number")])]),t._v(" "),e("p",[t._v("单位为毫秒。若不传，默认读取app.json文件中__networkTimeout属性。 对于超时的处理可在 catch 方法中进行")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("emulateJSON")])]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("设置为 true 时，等价于 header = {'content-type': 'application/x-www-form-urlencoded'}")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("usePre")])]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("预请求开关，若设置为 true，则两次请求间隔在有效期内且请求参数和请求方式对比一致的情况下，会返回上一次的请求结果")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("cacheInvalidationTime")])]),t._v(" "),e("p",[e("code",[t._v("number")])]),t._v(" "),e("p",[t._v("预请求缓存有效时长，单位 ms，默认为 5000ms。当两次请求时间间隔超过设置时长后再发起二次请求时，上一次的请求缓存会失效然后重新发起请求")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("ignorePreParamKeys")])]),t._v(" "),e("p",[e("code",[t._v("array")]),t._v(" | "),e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("在判断缓存请求是否可用对比前后两次请求参数时，默认对比的是 options 传入的所有参数（包括 params 和 data ）。但在具体业务场景下某些参数不一致时的缓存结果依旧可使用（比如参数中带有时间戳），所以提供 ignorePreParamKeys 来设置对比参数过程中可忽略的参数的 key，支持字符串数组和字符串（字符串传多个 key 时使用英文逗号分隔）类型。\n配置后在进行参数对比时，不会对比在 ignorePreParamKeys 设置的参数。")])])])])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpxFetch "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mpxFetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第一种访问形式")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'POST'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("header")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'content-type'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'application/x-www-form-urlencoded'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("emulateJSON")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePre")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheInvalidationTime")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3000")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ignorePreParamKeys")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'timestamp'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tconsole"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLaunch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第二种访问形式")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://test.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h3",{attrs:{id:"canceltoken"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#canceltoken"}},[t._v("#")]),t._v(" CancelToken")]),t._v(" "),e("p",[t._v("命名导出，用于创建一个取消请求的凭证。")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" CancelToken "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cancelToken "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CancelToken")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cancelToken")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" cancelToken"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("token\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ncancelToken"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手动取消请求'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行后请求中断，返回abort fail")]),t._v("\n")])])]),e("h3",{attrs:{id:"xfetch"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xfetch"}},[t._v("#")]),t._v(" XFetch")]),t._v(" "),e("p",[t._v("命名导出，用于创建一个新的mpx-fetch实例进行独立使用")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FetchOptions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    useQueue"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否开启队列功能")]),t._v("\n    proxy"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否开启代理功能")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" XFetch "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newFetch "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("XFetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 生成新的mpx-fetch实例")]),t._v("\n")])])]),e("h3",{attrs:{id:"interceptors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#interceptors"}},[t._v("#")]),t._v(" interceptors")]),t._v(" "),e("blockquote",[e("p",[t._v("实例属性，用于添加拦截器，包含两个属性，request & response")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("mpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("interceptors"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("request"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("config"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以返回promise")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" config\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("interceptors"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以返回promise")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" res\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h3",{attrs:{id:"proxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#proxy"}},[t._v("#")]),t._v(" proxy 代理")]),t._v(" "),e("h4",{attrs:{id:"setproxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setproxy"}},[t._v("#")]),t._v(" setProxy")]),t._v(" "),e("blockquote",[e("p",[t._v("配置代理项，可以传入一个数组或者一个对象，请求会按设置的规则进行代理")])]),t._v(" "),e("ul",[e("li",[e("p",[e("strong",[t._v("参数：")])]),t._v(" "),e("p",[e("code",[t._v("{Array | Object}")])]),t._v(" "),e("ul",[e("li",[e("p",[e("strong",[t._v("test")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("ul",[e("li",[e("p",[t._v("url")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("全路径匹配，规则可以参考"),e("a",{attrs:{href:"https://www.npmjs.com/package/path-to-regexp",target:"_blank",rel:"noopener noreferrer"}},[t._v("path-to-regexp"),e("OutboundLink")],1),t._v("，也可参考下面的简单示例。")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),e("p",[t._v("如果设置了此项，则 protocol、host、port、path 规则不再生效。此项支持 path-to-regexp 匹配，protocol、host、port、path 为全等匹配。")])])]),t._v(" "),e("li",[e("p",[t._v("protocol")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("待匹配的协议头")])]),t._v(" "),e("li",[e("p",[t._v("host")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("不包含端口的 host")])]),t._v(" "),e("li",[e("p",[t._v("port")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("待匹配的端口")])]),t._v(" "),e("li",[e("p",[t._v("path")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("待匹配的路径")])]),t._v(" "),e("li",[e("p",[t._v("params")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("同时匹配请求中的 "),e("code",[t._v("params")]),t._v(" 和 "),e("code",[t._v("query")])])]),t._v(" "),e("li",[e("p",[t._v("data")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("匹配请求中的 "),e("code",[t._v("data")])])]),t._v(" "),e("li",[e("p",[t._v("header")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("匹配请求中的 "),e("code",[t._v("header")])])]),t._v(" "),e("li",[e("p",[t._v("method")]),t._v(" "),e("p",[e("code",[t._v("Method | Method[]")])]),t._v(" "),e("p",[t._v("匹配请求方法，不区分大小写，可以传一个方法，也可以传一个方法数组")])]),t._v(" "),e("li",[e("p",[t._v("custom")]),t._v(" "),e("p",[e("code",[t._v("function")])]),t._v(" "),e("p",[t._v("自定义匹配规则，参数会注入原始请求配置，结果需返回 "),e("code",[t._v("true")]),t._v(" 或 "),e("code",[t._v("false")])]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),e("p",[t._v("如果设置了此项，匹配结果以此项为准，以上规则均不再生效。")])])])])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("proxy")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("ul",[e("li",[e("p",[t._v("url")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("代理的 url")])]),t._v(" "),e("li",[e("p",[t._v("protocol")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("修改原请求的协议头")])]),t._v(" "),e("li",[e("p",[t._v("host")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("代理的 host，不包含端口号")])]),t._v(" "),e("li",[e("p",[t._v("port")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("修改端口号")])]),t._v(" "),e("li",[e("p",[t._v("path")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("修改原请求路径")])]),t._v(" "),e("li",[e("p",[t._v("params")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("合并原请求的 params")])]),t._v(" "),e("li",[e("p",[t._v("data")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("合并原请求的 data")])]),t._v(" "),e("li",[e("p",[t._v("header")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("合并原请求的 header")])]),t._v(" "),e("li",[e("p",[t._v("method")]),t._v(" "),e("p",[e("code",[t._v("Method")])]),t._v(" "),e("p",[t._v("替换原请求的方法")])]),t._v(" "),e("li",[e("p",[t._v("custom")]),t._v(" "),e("p",[e("code",[t._v("function")])]),t._v(" "),e("p",[t._v("自定义代理规则，会注入两个参数，第一个是上一个匹配规则处理后的请求配置，第二个是 match 的参数对象，结果需返回要修改的请求配置对象。")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),e("p",[t._v("如果设置了此项，最终代理配置将以此项为准，其他配置规则均不再生效。")])])])])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("waterfall")])]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("默认为 "),e("code",[t._v("false")]),t._v("，为 "),e("code",[t._v("false")]),t._v(" 时，命中当前规则处理完就直接返回；为 "),e("code",[t._v("true")]),t._v(" 时，命中当前匹配规则处理完成后将结果传递给下面命中匹配规则继续处理。")])])])])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("mpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("setProxy")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此项匹配之后，会按下面 proxy 配置的修改请求配置")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("header")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'content-type'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'application/x-www-form-urlencoded'")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'get'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test1")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'abc'")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("header")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("env")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'env test'")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test2")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cba'")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("waterfall")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 为 true 时会将此次修改后的请求配置继续传递给下面的规则处理")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以分别单独匹配 protocol、host、port、path；代理规则同样")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("protocol")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http:'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("host")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mock.didi.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("port")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/mock/test'")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("host")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test.didi.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("port")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("8888")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("waterfall")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义匹配规则")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("custom")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// config 为原始的请求配置")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义匹配逻辑")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("xxx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义代理配置")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("custom")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" params")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// config 为上面匹配后修改过的请求配置")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// params 为 match 后的参数对象")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回需要修改的请求配置对象")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v("\n                "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test3")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'aaa'")]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("waterfall")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// : 可以匹配目标项，并将 match 结果返回到代理 custom 函数中")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// :和?都属于保留符号，若不想做匹配时需用 '\\\\' 转义")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// (.*)为全匹配")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("':protocol\\\\://mock.didi.com/mock/:id/oneapi/router/forum/api/v1/(.*)'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'get'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'post'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://127.0.0.1:8080/go/into/$id/api/v2/abcd'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// '$'项在代理生效后会替换匹配规则中的':'项")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("waterfall")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// false 时不会继续匹配后面的规则")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h4",{attrs:{id:"prependproxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#prependproxy"}},[t._v("#")]),t._v(" prependProxy")]),t._v(" "),e("blockquote",[e("p",[t._v("向前追加代理规则")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("mpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("prependProxy")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("waterfall")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h4",{attrs:{id:"appendproxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#appendproxy"}},[t._v("#")]),t._v(" appendProxy")]),t._v(" "),e("blockquote",[e("p",[t._v("向后追加代理规则")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("mpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("appendProxy")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("waterfall")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h4",{attrs:{id:"getproxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getproxy"}},[t._v("#")]),t._v(" getProxy")]),t._v(" "),e("blockquote",[e("p",[t._v("查看已有的代理配置")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getProxy")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h4",{attrs:{id:"clearproxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#clearproxy"}},[t._v("#")]),t._v(" clearProxy")]),t._v(" "),e("blockquote",[e("p",[t._v("解除所有的代理配置")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("mpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearProxy")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h3",{attrs:{id:"usefetch"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#usefetch"}},[t._v("#")]),t._v(" useFetch")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("useFetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" FetchOptions"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("xfetch\n")])])]),e("p",[t._v("在组合式 API 中使用，用来获取 "),e("code",[t._v("@mpxjs/fetch")]),t._v(" 插件的 xfetch 实例，等用于 "),e("code",[t._v("mpx.xfetch")]),t._v("。 关于 xfetch 实例的详细介绍，请点击"),e("RouterLink",{attrs:{to:"/api/extend.html#mpx-fetch"}},[t._v("查看")])],1),t._v(" "),e("p",[t._v("此外该方法可选择传入 "),e("code",[t._v("options")]),t._v(" 参数，若传入参数，则会创建一个新的 XFetch 实例返回，若不传入参数，则默认将全局 "),e("code",[t._v("xfetch")]),t._v(" 实例返回。")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpxFetch "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mpxFetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// script-setup.mpx")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" useFetch "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("useFetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'POST'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("emulateJSON")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePre")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheInvalidationTime")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3000")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ignorePreParamKeys")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'timestamp'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("ul",[e("li",[e("strong",[t._v("注意：")]),t._v(" options 参数同 "),e("RouterLink",{attrs:{to:"/api/extend.html#XFetch"}},[t._v("XFetch")]),t._v(" 章节。")],1)]),t._v(" "),e("h2",{attrs:{id:"api-proxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-proxy"}},[t._v("#")]),t._v(" api-proxy")]),t._v(" "),e("p",[t._v("Mpx目前已经支持的API转换列表，供参考")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("方法/平台")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("wx")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("ali")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("web")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("RN")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("getSystemInfo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getSystemInfoSync")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("nextTick")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("showToast")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("hideToast")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("showModal")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("showLoading")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("hideLoading")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("showActionSheet")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("showNavigationBarLoading")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("hideNavigationBarLoading")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("setNavigationBarTitle")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("setNavigationBarColor")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("request")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("downloadFile")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("uploadFile")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("setStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("setStorageSync")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("removeStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("removeStorageSync")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getStorageSync")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getStorageInfo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getStorageInfoSync")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("clearStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("clearStorageSync")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("saveImageToPhotosAlbum")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("previewImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("compressImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("chooseImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getLocation")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("saveFile")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("removeSavedFile")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getSavedFileList")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getSavedFileInfo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("addPhoneContact")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("setClipboardData")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getClipboardData")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("setScreenBrightness")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getScreenBrightness")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("makePhoneCall")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("stopAccelerometer")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("startAccelerometer")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("stopCompass")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("startCompass")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("stopGyroscope")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("startGyroscope")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("scanCode")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("login")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("checkSession")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getUserInfo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("requestPayment")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("createCanvasContext")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("canvasToTempFilePath")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("canvasPutImageData")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("canvasGetImageData")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("createSelectorQuery")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("onWindowResize")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("offWindowResize")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("arrayBufferToBase64")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("base64ToArrayBuffer")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("connectSocket")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getNetworkType")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("onNetworkStatusChange")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("offNetworkStatusChange")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])])])]),t._v(" "),e("h2",{attrs:{id:"webview-bridge"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#webview-bridge"}},[t._v("#")]),t._v(" webview-bridge")]),t._v(" "),e("p",[t._v("Mpx 支持小程序跨平台后，多个平台的小程序里都提供了 webview 组件，webview 打开的 H5 页面可以通过小程序提供的 API 来与小程序通信以及调用一些小程序的能力，但是各家小程序对于 webview 提供的API是不一样的。")]),t._v(" "),e("p",[t._v("比如微信的 webview 打开的 H5 页面里是通过调用 wx.miniProgram.navigateTo 来跳转到原生小程序页面的，而在支付宝是通过调用 my.navigateTo 来实现跳转的，那么我们开发 H5 时候为了让 H5 能适应各家小程序平台就需要写多份对应逻辑。")]),t._v(" "),e("p",[t._v("为解决这个问题，Mpx 提供了抹平平台差异的bridge库：@mpxjs/webview-bridge。")]),t._v(" "),e("p",[e("strong",[t._v("安装：")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("npm install @mpxjs"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("webview"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("bridge\n")])])]),e("p",[e("strong",[t._v("使用：")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webview-bridge'")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateBack")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("env "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 输出：wx/qq/ali/baidu/tt")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkJSApi")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("p",[e("strong",[t._v("cdn地址引用：")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" 开发环境版本，方便调试 "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://dpubstatic.udache.com/static/dpubimg/D2JeLyT0_Y/2.2.43.webviewbridge.js"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" 生产环境版本，压缩了体积 "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://dpubstatic.udache.com/static/dpubimg/PRg145LZ-i/2.2.43.webviewbridge.min.js"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" 同时支持 "),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ES")]),t._v(" Module 引入的 "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// index.html")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"module"')]),t._v(" src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://dpubstatic.udache.com/static/dpubimg/6MQOo-ocI4/2.2.43.webviewbridge.esm.browser.min.js"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.js")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://dpubstatic.udache.com/static/dpubimg/6MQOo-ocI4/2.2.43.webviewbridge.esm.browser.min.js"')]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//ES Module 开发版本地址： https://dpubstatic.udache.com/static/dpubimg/cdhpNhmWmJ/2.2.43.webviewbridge.esm.browser.js")]),t._v("\n")])])]),e("p",[e("strong",[t._v("基础方法提供：")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("方法/平台")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("wx")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("qq")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("ali")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("baidu")]),t._v(" "),e("th",{staticStyle:{"text-align":"right"}},[t._v("tt")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("navigateTo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("navigateBack")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("switchTab")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("reLaunch")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("redirectTo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getEnv")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("postMessage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getLoadError")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("onMessage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])])])]),t._v(" "),e("p",[e("strong",[t._v("扩展方法提供：")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("方法/平台")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("wx")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("qq")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("ali")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("baidu")]),t._v(" "),e("th",{staticStyle:{"text-align":"right"}},[t._v("tt")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("checkJSApi")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("chooseImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("previewImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("uploadImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("downloadImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getLocalImgData")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("startRecord")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("stopRecord")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("onVoiceRecordEnd")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("playVoice")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("pauseVoice")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("stopVoice")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("onVoicePlayEnd")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("uploadVoice")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("downloadVoice")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("translateVoice")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getNetworkType")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("openLocation")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getLocation")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("stopSearchBeacons")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("onSearchBeacons")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("scanQRCode")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("chooseCard")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("addCard")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("openCard")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("alert")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("showLoading")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("hideLoading")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("setStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("getStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("removeStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("clearStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("getStorageInfo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("startShare")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("tradePay")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("onMessage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])])])]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),e("p",[t._v("这个库仅提供给 H5 使用，请勿在小程序环境引入")])]),t._v(" "),e("h2",{attrs:{id:"size-report"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#size-report"}},[t._v("#")]),t._v(" size-report")]),t._v(" "),e("p",[t._v("Mpx框架项目包体积可以进行分组、分包、页面、冗余Npm包等维度的分析和对比，详细"),e("RouterLink",{attrs:{to:"/advance/size-report.html"}},[t._v("请见")])],1),t._v(" "),e("h3",{attrs:{id:"插件配置项"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#插件配置项"}},[t._v("#")]),t._v(" 插件配置项")]),t._v(" "),e("ul",[e("li",[e("p",[e("strong",[t._v("server")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("本地可视化服务相关配置")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("filename")])]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("构建生成的包体积详细输出文件地址")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("threshold")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("配置项目总体积和分包体积阈值，包含两个字段，size 为项目总体积阈值，packages 为分包体积阈值")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("{\n   size: '16MB', // 项目总包体积限额 16M\n   packages: '2MB' // 项目每个分包体积限额 2M\n}\n")])])])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("groups")])]),t._v(" "),e("p",[e("code",[t._v("Array<object>")])]),t._v(" "),e("p",[t._v("配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息")]),t._v(" "),e("ul",[e("li",[e("p",[t._v("name")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("分组名称")])]),t._v(" "),e("li",[e("p",[t._v("threshold")]),t._v(" "),e("p",[e("code",[t._v("string | object")])]),t._v(" "),e("p",[t._v("分组相关体积阈值，若不配置则该分组不校验体积阈值，同时也支持对分组中占各分包体积阈值")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("// 分组体积限额 500KB\nthreshold: '500KB'\n// 或者如下方，分组体积限额500KB，分组占主包体积限额160KB\nthreshold: {\n  size: '500KB',\n  packages: {\n    main: '160KB'\n  }\n}\n")])])])]),t._v(" "),e("li",[e("p",[t._v("entryRules")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry")]),t._v(" "),e("ul",[e("li",[t._v("include: 包含符合条件的入口文件，默认为空数组，规则数组中支持函数、正则、字符串")]),t._v(" "),e("li",[t._v("exclude: 剔除符合条件的入口文件，默认为空数组，规则数组中支持函数、正则、字符串")])]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("include: [/@someGroup\\/some-npm-package/],\nexclude: [/@someGroup\\/some-two-pack/]\n")])])])]),t._v(" "),e("li",[e("p",[t._v("noEntryRules")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("配置计算分组中纯 js 入口引入的体积（不包含组件和页面）")]),t._v(" "),e("ul",[e("li",[t._v("include: 包含符合条件的 js 文件，默认为空数组，规则数组中支持函数、正则、字符串")]),t._v(" "),e("li",[t._v("exclude: 剔除符合条件的 js 文件，默认为空数组，规则数组中支持函数、正则、字符串")])]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("include: [/@someGroup\\/some-npm-package/],\nexclude: [/@someGroup\\/some-two-pack/]\n")])])])])])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("reportPages")])]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("是否收集页面维度体积详情，默认 false")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("reportAssets")])]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("是否收集资源维度体积详情，默认 false")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("reportRedundance")])]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("是否收集冗余资源，默认 false")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("showEntrysPackages")])]),t._v(" "),e("p",[e("code",[t._v("Array<string>")])]),t._v(" "),e("p",[t._v("展示某些分包资源的引用来源信息，例如 ['main'] 为查看主包资源的引用来源信息，默认为 []")])])]),t._v(" "),e("p",[t._v("配置使用示例：")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("{\n  // 本地可视化服务相关配置\n  server: {\n    enable: true, // 是否启动本地服务，非必填，默认 true\n    autoOpenBrowser: true, // 是否自动打开可视化平台页面，非必填，默认 true\n    port: 0, // 本地服务端口，非必填，默认 0(随机端口)\n    host: '127.0.0.1', // 本地服务host，非必填\n  },\n  // 体积报告生成后输出的文件地址名，路径相对为 dist/wx 或者 dist/ali\n  filename: '../report.json',\n  // 配置阈值，此处代表总包体积阈值为 16MB，分包体积阈值为 2MB，超出将会触发编译报错提醒，该报错不阻断构建\n  threshold: {\n    size: '16MB',\n    packages: '2MB'\n  },\n  // 配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息\n  groups: [\n    {\n      // 分组名称\n      name: 'vant',\n      // 配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry，如下所示的分组配置将计算项目中引入的 vant 组件带来的体积占用\n      entryRules: {\n        include: '@vant/weapp'\n      }\n    },\n    {\n      name: 'pageGroup',\n      // 每个分组中可分别配置阈值，如果不配置则表示\n      threshold: '500KB',\n      entryRules: {\n        include: ['src/pages/index', 'src/pages/user']\n      }\n    },\n    {\n      name: 'someSdk',\n      entryRules: {\n        include: ['@somegroup/someSdk/index', '@somegroup/someSdk2/index']\n      },\n      // 有的时候你可能希望计算纯 js 入口引入的体积（不包含组件和页面），这种情况下需要使用 noEntryRules\n      noEntryRules: {\n        include: 'src/lib/sdk.js'\n      }\n    }\n  ],\n  // 是否收集页面维度体积详情，默认 false\n  reportPages: true,\n  // 是否收集资源维度体积详情，默认 false\n  reportAssets: true,\n  // 是否收集冗余资源，默认 false\n  reportRedundance: true,\n  // 展示某些分包资源的引用来源信息，默认为 []\n  showEntrysPackages: ['main']\n}\n")])])]),e("h2",{attrs:{id:"i18n"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#i18n"}},[t._v("#")]),t._v(" i18n")]),t._v(" "),e("h3",{attrs:{id:"usei18n"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#usei18n"}},[t._v("#")]),t._v(" useI18n")]),t._v(" "),e("p",[t._v("组合式 API 中使用，用来获取 i18n 实例。")]),t._v(" "),e("p",[e("strong",[t._v("参数选项")])]),t._v(" "),e("hr"),t._v(" "),e("h4",{attrs:{id:"locale"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#locale"}},[t._v("#")]),t._v(" locale")]),t._v(" "),e("p",[e("code",[t._v("Locale")])]),t._v(" "),e("p",[t._v("设置语言环境")]),t._v(" "),e("p",[e("strong",[t._v("注意：")]),t._v(" 只传 locale，不传 messages 属性时不起作用")]),t._v(" "),e("h4",{attrs:{id:"fallbacklocale"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fallbacklocale"}},[t._v("#")]),t._v(" fallbackLocale")]),t._v(" "),e("p",[e("code",[t._v("Locale")])]),t._v(" "),e("p",[t._v("预设的语言环境，找不到语言环境时进行回退。")]),t._v(" "),e("h4",{attrs:{id:"messages"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#messages"}},[t._v("#")]),t._v(" messages")]),t._v(" "),e("p",[e("code",[t._v("LocaleMessages")])]),t._v(" "),e("p",[t._v("本地化的语言环境信息。")]),t._v(" "),e("p",[e("strong",[t._v("返回实例属性和方法")])]),t._v(" "),e("hr"),t._v(" "),e("h4",{attrs:{id:"locale-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#locale-2"}},[t._v("#")]),t._v(" locale")]),t._v(" "),e("p",[e("code",[t._v("WritableComputedRef<Locale>")])]),t._v(" "),e("p",[t._v("可响应性的 ref 对象，表示当前 i18n 实例所使用的 locale。")]),t._v(" "),e("p",[t._v("修改 ref 值会对局部或者全局语言集的 locale 进行更改，并触发翻译方法重新执行。")]),t._v(" "),e("h4",{attrs:{id:"fallbackroot"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fallbackroot"}},[t._v("#")]),t._v(" fallbackRoot")]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("本地化失败时是否回归到全局作用域。")]),t._v(" "),e("h4",{attrs:{id:"getlocalemessage-locale"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getlocalemessage-locale"}},[t._v("#")]),t._v(" getLocaleMessage( locale )")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getLocaleMessage")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("locale"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" LocaleMessageObject\n")])])]),e("p",[t._v("获取语言环境的 "),e("code",[t._v("locale")]),t._v(" 信息。")]),t._v(" "),e("h4",{attrs:{id:"setlocalemessage-locale-message"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setlocalemessage-locale-message"}},[t._v("#")]),t._v(" setLocaleMessage( locale, message )")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("setLocaleMessage")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("locale"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Locale"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" messages"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" LocaleMessageObject"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),e("p",[t._v("设置语言环境的 "),e("code",[t._v("locale")]),t._v(" 信息。")]),t._v(" "),e("h4",{attrs:{id:"mergelocalemessage-locale-message"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mergelocalemessage-locale-message"}},[t._v("#")]),t._v(" mergeLocaleMessage( locale, message )")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("mergeLocaleMessage")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("locale"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Locale"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" messages"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" LocaleMessageObject"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),e("p",[t._v("将语言环境信息 "),e("code",[t._v("locale")]),t._v(" 合并到已注册的语言环境信息中。")]),t._v(" "),e("h4",{attrs:{id:"messages-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#messages-2"}},[t._v("#")]),t._v(" messages")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("readonly")]),t._v(" messages"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ComputedRef"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" Messages"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Messages"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("ul",[e("li",[e("strong",[t._v("只读")])])]),t._v(" "),e("p",[t._v("局部或者全局的语言环境信息。")]),t._v(" "),e("h4",{attrs:{id:"isglobal"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#isglobal"}},[t._v("#")]),t._v(" isGlobal")]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("是否是全局 i18n 实例。")]),t._v(" "),e("h4",{attrs:{id:"t"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#t"}},[t._v("#")]),t._v(" t")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" choice"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" values"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" TranslateResult\n")])])]),e("p",[t._v("文案翻译函数")]),t._v(" "),e("p",[t._v("根据传入的 key 以及当前 locale 环境获取对应文案，文案来源是全局作用域还是本地作用域取决于 "),e("code",[t._v("useI18n")]),t._v(" 执行时是否传入对应的 "),e("code",[t._v("messages、locale")]),t._v(" 等值。")]),t._v(" "),e("p",[e("strong",[t._v("choice 参数可选")]),t._v(" ，当传入 choice 时，t 函数的表现为使用复数进行翻译，和老版本中的 tc 函数表现一致。")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('car', 1)}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('car', 2)}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('apple', 0)}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('apple', 1)}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('apple', 10, {count: 10})}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 语言环境信息如下：")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("car")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'car | cars'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("apple")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'no apples | one apple | {count} apples'")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("输入如下：")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("car"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("cars"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("no apples"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("one apple"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("10 apples"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("关于复数的更多信息可以点击"),e("a",{attrs:{href:"https://kazupon.github.io/vue-i18n/zh/guide/pluralization.html#%E5%A4%8D%E6%95%B0",target:"_blank",rel:"noopener noreferrer"}},[t._v("查看"),e("OutboundLink")],1)]),t._v(" "),e("p",[e("strong",[t._v("values 参数可选")]),t._v(" ，如果需要对文案信息即逆行格式化处理，则需要传入 values。")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  // 模版输出 hello world\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('message.hello', { msg: 'hello'})}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/core"')]),t._v("\n\n  "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} world'")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  \n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" en\n          "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("h4",{attrs:{id:"te"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#te"}},[t._v("#")]),t._v(" te")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("te")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v("\n")])])]),e("p",[t._v("检查 key 是否存在。")])])}),[],!1,null,null,null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/42.53972f6c.js b/docs-vuepress/.vuepress/dist/assets/js/42.53972f6c.js
new file mode 100644
index 0000000000..a49607cd4a
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/42.53972f6c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{390:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"全局-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#全局-api"}},[t._v("#")]),t._v(" 全局 API")]),t._v(" "),s("h2",{attrs:{id:"global-mpx"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#global-mpx"}},[t._v("#")]),t._v(" 全局对象 Mpx ")]),t._v(" "),s("p",[s("code",[t._v("@mpxjs/core")]),t._v(" 默认导出 mpx 全局实例对象，通过该实例对象我们可以访问部分应用实例 API")]),t._v(" "),s("h3",{attrs:{id:"mixin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mixin"}},[t._v("#")]),t._v(" mixin")]),t._v(" "),s("p",[t._v("全局注入mixin方法接收两个参数：mpx.mixin(mixins, options)")]),t._v(" "),s("ul",[s("li",[t._v("第一个参数是要混入的mixins，接收类型 "),s("code",[t._v("MixinObject|MixinObject[]")])]),t._v(" "),s("li",[t._v("第二个参数是为全局混入配置，形如"),s("code",[t._v("{types:string|string[], stage:number}")]),t._v("，其中"),s("code",[t._v("types")]),t._v("用于控制mixin注入的范围，可选值有"),s("code",[t._v("'app'|'page'|'component'")]),t._v("；"),s("code",[t._v("stage")]),t._v("用于控制注入mixin的插入顺序，当stage为负数时，注入的mixin会被插入到构造函数配置中的"),s("code",[t._v("options.mixins")]),t._v("之前，数值越小约靠前，反之当stage为正数时，注入的mixin会被插入到"),s("code",[t._v("options.mixins")]),t._v("之后，数值越大越靠后。")])]),t._v(" "),s("blockquote",[s("p",[t._v("所有mixin中生命周期的执行均先于构造函数配置中直接声明的生命周期，mixin之间的执行顺序则遵从于其在"),s("code",[t._v("options.mixins")]),t._v("数组中的顺序")])]),t._v(" "),s("blockquote",[s("p",[t._v("options的默认值为"),s("code",[t._v("{types: ['app','page','component'], stage: -1}")]),t._v("，不传stage时，全局注入mixin的声明周期默认在"),s("code",[t._v("options.mixins")]),t._v("之前执行")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 只在page中混入")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("types")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'page'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认混入，在app|page|component中都会混入")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("setData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 只在component中混入，且执行顺序在options.mixins之后")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'com attached'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("types")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'component'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("stage")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"injectmixins"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#injectmixins"}},[t._v("#")]),t._v(" injectMixins")]),t._v(" "),s("p",[t._v("该方法是 "),s("code",[t._v("mpx.mixin")]),t._v(" 方法的别名，"),s("code",[t._v("mpx.injectMixins({})")]),t._v(" 等同于 "),s("code",[t._v("mpx.mixin({})")])]),t._v(" "),s("h3",{attrs:{id:"observable"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#observable"}},[t._v("#")]),t._v(" observable")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("observable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Mpx\n")])])]),s("p",[t._v("用于创建响应式数据。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接通过 mpx 对象访问")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" b "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("observable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[s("strong",[t._v("注意：")]),t._v("\nMpx 2.8 版本后该 API 等同于 "),s("code",[t._v("reactive")]),t._v("，同时不再支持具名导出方式，建议直接使用 "),s("code",[t._v("reactive")]),t._v(" 替代，请"),s("RouterLink",{attrs:{to:"/api/reactivity-api/basic-reactivity.html#reactive"}},[t._v("点击")]),t._v("查看。")],1)]),t._v(" "),s("h3",{attrs:{id:"set"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#set"}},[t._v("#")]),t._v(" set")]),t._v(" "),s("p",[t._v("用于对一个响应式对象新增属性，会"),s("code",[t._v("触发订阅者更新操作")]),t._v("。"),s("RouterLink",{attrs:{to:"/api/global-api.html#set"}},[t._v("查看详情")])],1),t._v(" "),s("h3",{attrs:{id:"delete"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#delete"}},[t._v("#")]),t._v(" delete")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("delete")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("用于对一个响应式对象删除属性，会"),s("code",[t._v("触发订阅者更新操作")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" person "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delete")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("person"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'age'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[s("strong",[t._v("注意：")]),t._v(" "),s("code",[t._v("mpx.delete")]),t._v(" 也可以使用具名导出的 "),s("code",[t._v("del")]),t._v("。"),s("RouterLink",{attrs:{to:"/api/global-api.html#del"}},[t._v("查看详情")])],1)]),t._v(" "),s("h3",{attrs:{id:"use"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#use"}},[t._v("#")]),t._v(" use")]),t._v(" "),s("blockquote",[s("p",[t._v("用于安装外部扩展, 支持多参数\n方法接收两个参数：mpx.use(plugin, options)")])]),t._v(" "),s("ul",[s("li",[t._v("第一个参数是要安装的外部扩展")]),t._v(" "),s("li",[t._v("第二个参数是对象，如果第二个参数是一个包含（prefix or postfix）的option， 那么将会对插件扩展的属性添加前缀或后缀")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" test "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./test'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("test"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("test"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("prefix")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'otherparams'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"watch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watch"}},[t._v("#")]),t._v(" watch")]),t._v(" "),s("p",[t._v("watch 可以通过全局实例访问，也可以使用具名导出的方式，二者逻辑相同，我们推荐使用具名导出的方式。"),s("RouterLink",{attrs:{to:"/api/reactivity-api/computed-watch-api.html#watch"}},[t._v("查看详情")])],1),t._v(" "),s("h2",{attrs:{id:"createapp"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createapp"}},[t._v("#")]),t._v(" createApp")]),t._v(" "),s("blockquote",[s("p",[t._v("注册一个小程序，接受一个 Object 类型的参数")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createApp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLaunch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Launch'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShow")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Page show'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//全局变量 可通过getApp()访问")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("globalDataA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'I am global dataA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("globalDataB")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'I am global dataB'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"createpage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createpage"}},[t._v("#")]),t._v(" createPage")]),t._v(" "),s("blockquote",[s("p",[t._v("类微信小程序（微信、百度、头条等）内部使用"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Component的方式创建页面"),s("OutboundLink")],1),t._v("，所以除了支持页面的生命周期之外还同时支持组件的一切特性。当使用 Component 创建页面时，页面生命周期需要写在 methods 内部（微信小程序原生规则），mpx 进行了统一封装转换，页面生命周期都写在最外层即可")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("ul",[s("li",[s("p",[t._v("options:")]),t._v(" "),s("p",[t._v("具体形式除了 computed、watch 这类 Mpx 扩展特性之外，其他的属性都参照原生小程序的官方文档即可。")])]),t._v(" "),s("li",[s("p",[t._v("config:")]),t._v(" "),s("p",[t._v("如果希望标识一个组件是最纯粹的原生组件，不用数据响应等能力，可通过 config.isNative 传 true 声明。\n如果有需要复写/改写最终调用的创建页面的构造器，可以通过 config 对象的 customCtor 提供。")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("注意:")]),t._v("\nmpx本身是用 component 来创建页面的，如果传page可能在初始化时候生命周期不正常导致取props有一点问题")])])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createPage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("test "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShow")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("test"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"createcomponent"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createcomponent"}},[t._v("#")]),t._v(" createComponent")]),t._v(" "),s("blockquote",[s("p",[t._v("创建自定义组件，接受两个Object类型的参数。")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("prop")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("test "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prop\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("prop")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handler")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否首次执行一次")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"nexttick"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#nexttick"}},[t._v("#")]),t._v(" nextTick")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("当我们在 Mpx 中更改响应性状态时，最终页面的更新并不是同步立即生效的，而是由 Mpx 将它们缓存在一个队列中， 等到下一个 tick 一起执行，\n从而保证了组件/页面无论发生多少状态改变，都仅执行一次更新，从而减少 "),s("code",[t._v("setData")]),t._v(" 调用次数。")]),t._v(" "),s("p",[s("code",[t._v("nextTick()")]),t._v(" 可以在状态改变后立即调用，可以传递一个函数作为参数，在等待页面/组件更新完成后，函数参数会触发执行。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("     "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" nextTick"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n     "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n       "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" showChild "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// DOM 还没有更新")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeOut")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            showChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n           context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'child'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("showToast")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n           showChild\n         "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n       "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n     "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"topureobject"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#topureobject"}},[t._v("#")]),t._v(" toPureObject")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toPureObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object\n")])])]),s("p",[t._v("业务拿到的数据可能是响应式数据实例（包含了些其他属性），使用"),s("code",[t._v("toPureObject")]),t._v("方法可以将响应式的数据转化成纯 js 对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("toPureObject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pureObject "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toPureObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"getmixin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getmixin"}},[t._v("#")]),t._v(" getMixin")]),t._v(" "),s("p",[t._v("专为ts项目提供的反向推导辅助方法，该函数接收类型为 "),s("code",[t._v("Object")]),t._v(" ,会将传入的嵌套mixins对象拉平成一个扁平的mixin对象")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getMixin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" mixin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mixins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value1")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("lifetimes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'attached'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mixins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("outsideVal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\nmixin值\n{\n  data: {value2: 6, value1: 2},\n  created: ƒ created(),\n  attached: ƒ attached()\n}\n*/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("outsideVal")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("20")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mixins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mixin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('/*\n以上执行输出：\n28\n2 "attached"\n*/')]),t._v("\n")])])]),s("h2",{attrs:{id:"implement"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#implement"}},[t._v("#")]),t._v(" implement")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("implement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object\n")])])]),s("ul",[s("li",[s("code",[t._v("{Object} options")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("{Array} modes")]),t._v("：需要取消的平台")]),t._v(" "),s("li",[s("code",[t._v("{Boolean} remove")]),t._v("：是否将此能力直接移除")]),t._v(" "),s("li",[s("code",[t._v("{Function} processor")]),t._v("：设置成功的回调函数")])])])]),t._v(" "),s("p",[t._v("以微信为 base 将代码转换输出到其他平台时（如支付宝、web 平台等），会存在一些无法进行模拟的跨平台差异，会在运行时进行检测并报错指出，例如微信转支付宝时使用 moved 生命周期等。使用"),s("code",[t._v("implement")]),t._v("方法可以取消这种报错。您可以使用 mixin 自行实现跨平台差异，然后使用 implement 取消报错。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("implement"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__mpx_mode__ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'web'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("processor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("implement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'onShareAppMessage'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'web'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 需要取消的平台，可配置多个")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("remove")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否将此能力直接移除")]),t._v("\n    processor "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置成功的回调函数")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"built-in-lifecycle-variable"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#built-in-lifecycle-variable"}},[t._v("#")]),t._v(" 内建生命周期变量 ")]),t._v(" "),s("p",[t._v("Mpx 在运行时自身有着一套内建生命周期，当开发者想使用内建生命周期时，可以通过内建生命周期变量进行对应生命周期的注册，\n需要注意的是，这部分内建生命周期变量"),s("strong",[t._v("只能用于选项式 API 中")]),t._v("。")]),t._v(" "),s("h3",{attrs:{id:"beforecreate"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#beforecreate"}},[t._v("#")]),t._v(" BEFORECREATE")]),t._v(" "),s("p",[s("code",[t._v("string")])]),t._v(" "),s("p",[t._v("在组件实例刚刚被创建时执行，在实例初始化之后、进行数据侦听和 data 初始化之前同步调用，注意此时不能调用 setData。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("BEFORECREATE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/core"')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("BEFORECREATE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'beforecreate trigger'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"created"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#created"}},[t._v("#")]),t._v(" CREATED")]),t._v(" "),s("p",[s("code",[t._v("string")])]),t._v(" "),s("p",[t._v("在组件实例刚刚被创建时执行。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、事件/侦听器的回调函数。\n然而，挂载阶段还没开始，注意此时不能调用 setData。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("CREATED")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/core"')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("CREATED")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'beforecreate trigger'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"beforemount"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#beforemount"}},[t._v("#")]),t._v(" BEFOREMOUNT")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onbeforemount"}},[t._v("onBeforeMount")])],1),t._v(" "),s("h3",{attrs:{id:"mounted"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mounted"}},[t._v("#")]),t._v(" MOUNTED")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onmounted"}},[t._v("onMounted")])],1),t._v(" "),s("h3",{attrs:{id:"beforeupdate"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#beforeupdate"}},[t._v("#")]),t._v(" BEFOREUPDATE")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onbeforeupdate"}},[t._v("onBeforeUpdate")])],1),t._v(" "),s("h3",{attrs:{id:"updated"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#updated"}},[t._v("#")]),t._v(" UPDATED")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onupdated"}},[t._v("onUpdated")])],1),t._v(" "),s("h3",{attrs:{id:"serverprefetch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#serverprefetch"}},[t._v("#")]),t._v(" SERVERPREFETCH")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onServerPrefetch"}},[t._v("onServerPrefetch")])],1),t._v(" "),s("h3",{attrs:{id:"beforeunmount"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#beforeunmount"}},[t._v("#")]),t._v(" BEFOREUNMOUNT")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onbeforeunmount"}},[t._v("onBeforeUnmount")])],1),t._v(" "),s("h3",{attrs:{id:"unmounted"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#unmounted"}},[t._v("#")]),t._v(" UNMOUNTED")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onunmounted"}},[t._v("onUnmounted")])],1),t._v(" "),s("h3",{attrs:{id:"onload"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onload"}},[t._v("#")]),t._v(" ONLOAD")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onload"}},[t._v("onLoad")])],1),t._v(" "),s("h3",{attrs:{id:"onshow"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onshow"}},[t._v("#")]),t._v(" ONSHOW")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onshow"}},[t._v("onShow")])],1),t._v(" "),s("h3",{attrs:{id:"onhide"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onhide"}},[t._v("#")]),t._v(" ONHIDE")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onhide"}},[t._v("onHide")])],1),t._v(" "),s("h3",{attrs:{id:"onresize"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onresize"}},[t._v("#")]),t._v(" ONRESIZE")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onresize"}},[t._v("onResize")])],1),t._v(" "),s("h2",{attrs:{id:"响应式-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api"}},[t._v("#")]),t._v(" 响应式 API")]),t._v(" "),s("p",[t._v("详情请"),s("RouterLink",{attrs:{to:"/api/reactivity-api/basic-reactivity.html"}},[t._v("移步")])],1),t._v(" "),s("h2",{attrs:{id:"组合式-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api"}},[t._v("#")]),t._v(" 组合式 API")]),t._v(" "),s("p",[t._v("详情请"),s("RouterLink",{attrs:{to:"/api/composition-api.html"}},[t._v("移步")])],1),t._v(" "),s("h2",{attrs:{id:"store-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store-api"}},[t._v("#")]),t._v(" store API")]),t._v(" "),s("p",[t._v("详情请"),s("RouterLink",{attrs:{to:"/api/store-api.html"}},[t._v("移步")])],1)])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/43.e2b432ea.js b/docs-vuepress/.vuepress/dist/assets/js/43.e2b432ea.js
new file mode 100644
index 0000000000..a7b839c8b9
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/43.e2b432ea.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{391:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"实例-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#实例-api"}},[t._v("#")]),t._v(" 实例 API")]),t._v(" "),s("h2",{attrs:{id:"set"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#set"}},[t._v("#")]),t._v(" $set")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" property"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("这是全局 "),s("code",[t._v("mpx.set")]),t._v(" 的别名。向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。\n它必须用于向响应式对象上添加新 property，因为 Mpx 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("参考")]),t._v("："),s("RouterLink",{attrs:{to:"/api/global-api.html#set"}},[t._v("mpx.set")])],1)]),t._v(" "),s("h2",{attrs:{id:"watch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watch"}},[t._v("#")]),t._v(" $watch")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("expOrFn"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),t._v("\n")])])]),s("p",[t._v("观察 Mpx 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 键路径")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.b.c'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newVal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldVal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 做点什么")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 函数")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 表达式 `this.a + this.b` 每次得出一个不同的结果时")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理函数都会被调用。")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这就像监听一个未被定义的计算属性")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newVal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldVal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 做点什么")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("code",[t._v("this.$watch")]),t._v(" 返回一个取消观察函数，用来停止触发回调：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" unwatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 之后取消观察")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("options.deep")])])]),t._v(" "),s("p",[t._v("为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someObject'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("deep")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("someObject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nestedValue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("123")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// callback is fired")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("options.deep")])])]),t._v(" "),s("p",[t._v("在选项参数中指定 "),s("code",[t._v("immediate: true")]),t._v(" 将立即以表达式的当前值触发回调：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 立即以 `a` 的当前值触发回调")]),t._v("\n")])])]),s("p",[t._v("注意在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这会导致报错")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" unwatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSomething")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" unwatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSomething")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("unwatch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("options.pausable")])])]),t._v(" "),s("p",[t._v("可在选项参数中指定 pausable: true 来声明一个可被暂停的 Watcher 实例，配置好之后可以通过 this.$getPausableWatchers() 来获取当前组件或者页面下定义的所有可被暂停的 Watcher 实例，\n然后根据具体是业务场景通过 watcher.pause() 或者 watcher.resume() 来暂停或者恢复 watch 的监听。\n比如说在小程序页面 hide 时不需要监听的 watch 可以配置为 pausable: true，在页面 hide 时调用 watcher.pause() 暂停监听，在页面 show 时调用 watcher.resume() 来恢复监听。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someObject'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pausable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" isHide "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" watchers "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$getPausableWatchers")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("watchers "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" watchers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" watchers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" watcher "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" watchers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    isHide "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pause")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("isHide "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resume")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("options.name")])])]),t._v(" "),s("p",[t._v("为了方便获取用户定义的 Watcher 实例，可在选项参数增加配置 name 来设置当前 Watcher 实例的名称，配置 name 后可通过 this.$getWatcherByName(name) 在组件或页面中获取到命名为 name 的 Watcher 实例（注意当存在多个 name 相同 watch 时，this.$getWatcherByName 获取的最后一个使用该 name\n创建的 Watcher 实例，所以为了避免混淆，请不要在多个 watch 中配置同一个 name。）")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someObject'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someObject'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" someObjectWatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$getWatcherByName")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someObject'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("参考")]),t._v("："),s("RouterLink",{attrs:{to:"/api/global-api.html#watch"}},[t._v("mpx.watch")])],1),t._v(" "),s("h2",{attrs:{id:"delete"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#delete"}},[t._v("#")]),t._v(" $delete")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" $"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("delete")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("删除对象属性，如果该对象是响应式的，那么该方法可以触发观察器更新（视图更新 | watch回调）")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("info")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'info'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当删除属性之后会执行")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 删除name属性")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("delete")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("参考：")]),t._v(" "),s("RouterLink",{attrs:{to:"/api/global-api.html#delete"}},[t._v("Mpx.delete")])],1),t._v(" "),s("h2",{attrs:{id:"refs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#refs"}},[t._v("#")]),t._v(" $refs")]),t._v(" "),s("p",[s("code",[t._v("Object")])]),t._v(" "),s("p",[t._v("一个对象，持有注册过 "),s("RouterLink",{attrs:{to:"/api/directives.html#wx-ref"}},[t._v("ref")]),t._v("的所有 DOM 元素和组件实例，调用响应的组件方法或者获取视图节点信息。")],1),t._v(" "),s("p",[t._v("以获取组件为例，模版中引用child子组件")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("child")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("childDom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("child")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("javascript 中可以调用组件的方法")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用child中的方法")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("childDom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("childMethods")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取child中的data")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("childDom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("参考：")]),t._v(" "),s("RouterLink",{attrs:{to:"/guide/basic/refs.html"}},[t._v("组件 ref")])],1),t._v(" "),s("h2",{attrs:{id:"asyncrefs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#asyncrefs"}},[t._v("#")]),t._v(" $asyncRefs")]),t._v(" "),s("p",[s("strong",[t._v("仅字节小程序可用")]),t._v("，因为字节小程序 "),s("code",[t._v("selectComponent")]),t._v(" 和 "),s("code",[t._v("selectAllComponents")]),t._v(" 方法为异步方法，因此使用 $refs 同步获取组件实例并不保证能够拿到正确的组件实例，需使用异步 "),s("code",[t._v("$asyncRefs")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__mpx_mode__ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tt'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$asyncRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mlist"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//......")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"forceupdate"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#forceupdate"}},[t._v("#")]),t._v(" $forceUpdate")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$forceUpdate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("用于强制刷新视图，正常情况下只有"),s("code",[t._v("发生了变化的数据")]),t._v("才会被发送到视图层进行渲染。强制更新时，会将某些数据强制发送到视图层渲染，无论是否发生了变化")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("info")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 虽然不会修改age的值，但仍会触发重新渲染，并且会将age发送到视图层")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$forceUpdate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'视图更新后执行'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可用于正常的数据修改，key支持Path，数组可以使用'array[index]'：value的形式")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$forceUpdate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'info.name'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'b'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'视图更新后执行'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"nexttick"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#nexttick"}},[t._v("#")]),t._v(" $nextTick")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。"),s("strong",[t._v("注意："),s("code",[t._v("callback")]),t._v("中"),s("code",[t._v("this")]),t._v("并不是绑定当前实例，你可以使用箭头函数避免this指向问题")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("info")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 修改数据")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// DOM 还没有更新")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this.$nextTick(function() {")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   // DOM 现在更新了")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   console.log('会在由name变化引起的视图更新之后执行')")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   this.doSomthing() // 报错")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// })")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// DOM 现在更新了")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'会在由name变化引起的视图更新之后执行'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSomthing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"i18n"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#i18n"}},[t._v("#")]),t._v(" $i18n")]),t._v(" "),s("p",[t._v("组件中直接调用$i18n的方法，比如：$t，$tc，$te，$d，$n")]),t._v(" "),s("p",[t._v("首先在"),s("code",[t._v("mpx.plugin.conf.js")]),t._v("中配置i18n")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//...")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// messages既可以通过对象字面量传入，也可以通过messagesPath指定一个js模块路径，在该模块中定义配置并导出，dateTimeFormats/dateTimeFormatsPath和numberFormats/numberFormatsPath同理")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} world'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'zh-CN'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} 世界'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("组件中直接使用")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("template"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message.hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("template"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message.hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("msg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$te")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message.hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"rawoptions"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#rawoptions"}},[t._v("#")]),t._v(" $rawOptions")]),t._v(" "),s("p",[s("code",[t._v("Object")])]),t._v(" "),s("p",[t._v("获取组件或页面构造器的构造参数。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/core"')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$rawOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n     * attached\n     * detached\n     * methods\n     * mpxConvertMode\n     * mpxCustomKeysForBlend\n     * mpxFileResource\n     * ready\n     * setup\n     * ...其他构造参数\n     */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/44.e4242a1f.js b/docs-vuepress/.vuepress/dist/assets/js/44.e4242a1f.js
new file mode 100644
index 0000000000..530e2a4eb6
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/44.e4242a1f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{392:function(t,r,a){"use strict";a.r(r);var s=a(4),e=Object(s.a)({},(function(){var t=this,r=t._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"选项式-api"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#选项式-api"}},[t._v("#")]),t._v(" 选项式 API")]),t._v(" "),r("h3",{attrs:{id:"onappinit"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#onappinit"}},[t._v("#")]),t._v(" onAppInit")]),t._v(" "),r("ul",[r("li",[r("strong",[t._v("类型：")]),t._v(" "),r("code",[t._v("Function")])]),t._v(" "),r("li",[r("strong",[t._v("详细：")])])]),t._v(" "),r("p",[t._v("通过 createApp 注册一个应用期间被调用，输出 web 时 SSR渲染模式下，需要在此钩子中生成 pinia 的实例并返回。")]),t._v(" "),r("h3",{attrs:{id:"onssrappcreated"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#onssrappcreated"}},[t._v("#")]),t._v(" onSSRAppCreated")]),t._v(" "),r("ul",[r("li",[r("strong",[t._v("类型：")]),t._v(" "),r("code",[t._v("Function")])]),t._v(" "),r("li",[r("strong",[t._v("详细：")])])]),t._v(" "),r("p",[t._v("SSR渲染定制钩子，在服务端渲染期间被调用，可以在这个钩子中可以去返回应用程序实例，以及完成服务器端路由匹配，store 的状态挂载等。类 Vue 的 server entry 中的功能。")]),t._v(" "),r("p",[r("strong",[t._v("注意：")]),t._v(" 仅 web 环境支持")])])}),[],!1,null,null,null);r.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/45.392413aa.js b/docs-vuepress/.vuepress/dist/assets/js/45.392413aa.js
new file mode 100644
index 0000000000..c156d3829d
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/45.392413aa.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{394:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"响应式-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api"}},[t._v("#")]),t._v(" 响应式 API")]),t._v(" "),s("h2",{attrs:{id:"响应式基础-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式基础-api"}},[t._v("#")]),t._v(" 响应式基础 API")]),t._v(" "),s("h3",{attrs:{id:"reactive"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#reactive"}},[t._v("#")]),t._v(" reactive")]),t._v(" "),s("p",[t._v("将对象处理为响应性对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nobj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n")])])]),s("p",[t._v("响应式转换是“深层”的：它会影响到所有嵌套的 property。一个响应式对象也将深层地解包任何 ref property，同时保持响应性。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ref 会被解包")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// true")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 它会更新 `obj.count`")]),t._v("\ncount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\n")])])]),s("p",[t._v("当将 "),s("code",[t._v("ref")]),t._v(" 分配给 "),s("code",[t._v("reactive")]),t._v(" property 时，ref 将被自动解包。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nobj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" count\n\n"),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// true")]),t._v("\n")])])]),s("p",[t._v("当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" refArr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    refArr\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 无需.vlaue")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("refArr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里需要.value")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("refArr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("当需要给响应式对象新增属性时，需要使用set，并且新增属性的响应式对象需要为 ref 或者做为其他响应性对象的key")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stateRef "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stateRefWrap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLoad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不生效")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("stateRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 生效")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("stateRefWrap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 生效")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    stateRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    stateRefWrap\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"isreactive"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#isreactive"}},[t._v("#")]),t._v(" isReactive")]),t._v(" "),s("p",[t._v("检查对象是否是由 reactive 创建的响应式对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" isReactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isReactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> true")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            state\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"markraw"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#markraw"}},[t._v("#")]),t._v(" markRaw")]),t._v(" "),s("p",[t._v("标记一个对象，使其永远不会被抓换为响应性对象，并返回对象本身")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" markRaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" isReactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("markRaw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    foo\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isReactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("foo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> false")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")])]),t._v(" "),s("p",[t._v("如果将标记对象内部的未标记对象添加进响应性对象，然后再次访问该响应性对象，就会得到该原始对象的可响应性对象")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" markRaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" isReactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("markRaw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nested")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" bar "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nested")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" foo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nested\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("foo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nested "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" bar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nested"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> true")]),t._v("\n")])])]),s("h3",{attrs:{id:"shallowreactive"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#shallowreactive"}},[t._v("#")]),t._v(" shallowReactive")]),t._v(" "),s("p",[t._v("reactive() 的浅层作用形式，只跟踪自身 property 的响应性，但不执行嵌套对象的深层响应式转换(返回原始值)")]),t._v(" "),s("p",[s("strong",[t._v("注意：")])]),t._v(" "),s("p",[t._v("和 reactive() 不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的 property 是响应式的。property 的值会被原样存储和暴露，这也意味着值为 ref 的 property 不会被自动解包了。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" shallowReactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shallowReactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("foo")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nested")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("bar")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("head")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" count  \n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更改状态自身的属性是响应式的")]),t._v("\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("foo"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...但下层嵌套对象不会被转为响应式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isReactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nested"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// false")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不是响应式的")]),t._v("\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nested"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bar"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ref 属性不会解包")]),t._v("\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("head"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value \n")])])]),s("h3",{attrs:{id:"set"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#set"}},[t._v("#")]),t._v(" set")]),t._v(" "),s("p",[t._v("用于对一个响应式对象新增属性，会"),s("code",[t._v("触发订阅者更新操作")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" property"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" set"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" person "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 具名导出使用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("person"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'age'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("17")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// age 改变后会触发订阅者视图更新")]),t._v("\n")])])]),s("h3",{attrs:{id:"del"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#del"}},[t._v("#")]),t._v(" del")]),t._v(" "),s("p",[t._v("用于对一个响应式对象删除属性，会"),s("code",[t._v("触发订阅者更新操作")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("del")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" property"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("del"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" person "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("del")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("person"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'age'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"computed-与-watch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#computed-与-watch"}},[t._v("#")]),t._v(" Computed 与 Watch")]),t._v(" "),s("h3",{attrs:{id:"computed"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#computed"}},[t._v("#")]),t._v(" computed")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 只读形式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getter")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Readonly"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Ref"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Readonly"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>>")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可写形式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Ref"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" plusOne "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("plusOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\n\nplusOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 错误")]),t._v("\n")])])]),s("p",[t._v("或者接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" plusOne "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" val "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nplusOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0")]),t._v("\n")])])]),s("h3",{attrs:{id:"watcheffect"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watcheffect"}},[t._v("#")]),t._v(" watchEffect")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("effect")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("onInvalidate"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" InvalidateCbRegistrator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" WatchEffectOptions\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" StopHandle\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WatchEffectOptions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    flush"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pre'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'post'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sync'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认：'pre'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InvalidateCbRegistrator")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("invalidate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StopHandle")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("立即执行传入的函数，同时对其依赖进行响应式追踪，并在其依赖变更时重新运行该函数。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> logs 0")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> logs 1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[t._v("停止侦听")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// later")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[t._v("清除副作用")])]),t._v(" "),s("p",[t._v("侦听副作用传入的函数可以接收一个函数作入参，用来注册清理回调，清理回调会在该副作用下一次执行前被调用，\n可以用来清理无效的副作用，例如等待中的异步请求")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("onCleanup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cancel "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doAsyncWork")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// `cancel` 会在 `id` 更改时调用")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 以便取消之前未完成的请求")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onCleanup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cancel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" response\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[t._v("副作用刷新时机")])]),t._v(" "),s("p",[t._v("响应式系统会进行副作用函数缓存，并异步地刷新执行他们")]),t._v(" "),s("p",[t._v("组件的 update 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时，默认情况下，会在所有的组件 update 前执行，\n在watchEffect的第二个参数中，我们可以传入flush来进行副作用刷新时机调整")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认为 pre")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("flush")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pre'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 侦听器回调中能访问被更新之后的DOM")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注意：这也将推迟副作用的初始运行，直到组件的首次渲染完成。")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("flush")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'post'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 强制同步触发, 十分低效")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("flush")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sync'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"watchsynceffect"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watchsynceffect"}},[t._v("#")]),t._v(" watchSyncEffect")]),t._v(" "),s("p",[t._v("watchEffect 的别名，带有 flush: 'sync' 选项。")]),t._v(" "),s("h3",{attrs:{id:"watchposteffect"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watchposteffect"}},[t._v("#")]),t._v(" watchPostEffect")]),t._v(" "),s("p",[t._v("watchEffect 的别名，带有 flush: 'post' 选项。")]),t._v(" "),s("h3",{attrs:{id:"watch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watch"}},[t._v("#")]),t._v(" watch")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 侦听单一源")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    source"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" WatcherSource"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        oldValue"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        onInvalidate"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" InvalidateCbRegistrator\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" WatchOptions\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" StopHandle\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 侦听多个源")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WatcherSource"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Ref"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InvalidateCbRegistrator")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("invalidate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StopHandle")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WatchOptions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WatchEffectOptions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    immediate"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认：false")]),t._v("\n    deep"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认：false")]),t._v("\n    immediateAsync"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认：false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("该 API 与选项式 API 中的 watch 基本等效，watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下\n是惰性的——即回调仅在侦听源发生变化时被调用。")]),t._v(" "),s("p",[t._v("与 watchEffect 比较，watch 允许我们：")]),t._v(" "),s("ul",[s("li",[t._v("懒执行副作用；")]),t._v(" "),s("li",[t._v("更具体地说明什么状态应该触发侦听器重新运行；")]),t._v(" "),s("li",[t._v("访问侦听状态变化前后的值。")])]),t._v(" "),s("h4",{attrs:{id:"侦听单一源"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#侦听单一源"}},[t._v("#")]),t._v(" 侦听单一源")]),t._v(" "),s("p",[t._v("watch 可以侦听一个具有返回值的 getter，也可以直接是一个 ref")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 侦听一个 getter")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevCount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接侦听ref")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevCount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"侦听多个源"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#侦听多个源"}},[t._v("#")]),t._v(" 侦听多个源")]),t._v(" "),s("p",[t._v("还可以使用数组的形式同时侦听多个数据源：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" watch "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("aRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" bRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("prevA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"与-watcheffect-相同的行为"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#与-watcheffect-相同的行为"}},[t._v("#")]),t._v(" 与 watchEffect 相同的行为")]),t._v(" "),s("p",[s("strong",[t._v("watch")]),t._v(" 与 "),s("strong",[t._v("watchEffect")]),t._v(" 在手动停止侦听、清除副作用、副作用刷新时机方面有相同的行为。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" watch "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" unwatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newVal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldVal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 做点什么")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用返回值unwatch可以取消观察")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"watch-选项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watch-选项"}},[t._v("#")]),t._v(" watch 选项")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("选项")]),t._v("：deep")]),t._v(" "),s("p",[t._v("为了发现对象内部值的变化，可以在选项参数中指定 deep: true。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("someObject\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 回调函数")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("deep")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("someObject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nestedValue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("123")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// callback is fired")]),t._v("\n")])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("选项")]),t._v("：once")]),t._v(" "),s("p",[t._v("在选项参数中指定 "),s("code",[t._v("once: true")]),t._v(" 该回调方法只会执行一次，后续的改变将不会触发回调；"),s("br"),t._v("\n该参数也可以是函数，若函数返回值为 "),s("code",[t._v("true")]),t._v(" 时，则后续的改变将不会触发回调")]),t._v(" "),s("div",{staticClass:"language-JavaScript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 该回调函数只会执行一次")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("once")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当 once 是函数时")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" newVal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当 val 等于2时，this.a 的后续改变将不会被监听")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("once")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldVal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("选项")]),t._v("：immediate")]),t._v(" "),s("p",[t._v("在选项参数中指定 "),s("code",[t._v("immediate: true")]),t._v(" 将立即以表达式的当前值触发回调。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 回调函数")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 立即以 `this.a` 的当前值触发回调")]),t._v("\n")])])]),s("p",[t._v("注意在带有 immediate 选项时，你不能在第一次回调时取消侦听。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" unwatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这会导致报错！")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n")])])]),s("p",[t._v("如果你仍然希望在回调内部调用取消侦听的函数，你应该先检查其可用性。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" unwatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("unwatch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请先检查其可用性！")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n")])])])])]),t._v(" "),s("h2",{attrs:{id:"effect-作用域-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#effect-作用域-api"}},[t._v("#")]),t._v(" Effect 作用域 API")]),t._v(" "),s("h3",{attrs:{id:"effectscope"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#effectscope"}},[t._v("#")]),t._v(" effectScope")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("effectScope")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("detached"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" EffectScope\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EffectScope")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("fn")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pause")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resume")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("创建一个 effect 作用域对象，捕获在其内部创建的响应性副作用(例如计算属性或监听器)，可以对这些副作用进行批量处理")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" effectScope "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" scope "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("effectScope")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nscope"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" doubled "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("doubled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("doubled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Count: '")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nscope"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("需要注意的是，effectScope 接受一个 detached 参数，默认为false，该参数来表示当前作用域是否和父级作用域进行分离，若 detached 为 true，\n当前 effectScope 则不会被父级作用域收集。")]),t._v(" "),s("ul",[s("li",[t._v("暂停侦听")])]),t._v(" "),s("p",[t._v("Mpx 提供了 pause 方法可以将整个作用域中的响应性副作用批量暂停侦听。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" effectScope"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onHide "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" scope "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("effectScope")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nscope"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" doubled "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("doubled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("doubled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Count: '")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onHide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    scope"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pause")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[t._v("恢复侦听")])]),t._v(" "),s("p",[t._v("被暂停的作用域可以使用 resume 方法来恢复侦听。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("onShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ......")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    scope"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resume")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"getcurrentscope"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getcurrentscope"}},[t._v("#")]),t._v(" getCurrentScope")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getCurrentScope")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" EffectScope "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),t._v("\n")])])]),s("p",[t._v("返回当前活跃的 effect 作用域。")]),t._v(" "),s("h3",{attrs:{id:"onscopedispose"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onscopedispose"}},[t._v("#")]),t._v(" onScopeDispose")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onScopeDispose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("fn")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("在当前活跃的 effect 作用域上注册一个处理回调。该回调会在相关的 effect 作用域结束之后被调用。")]),t._v(" "),s("h2",{attrs:{id:"refs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#refs"}},[t._v("#")]),t._v(" Refs")]),t._v(" "),s("h3",{attrs:{id:"ref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ref"}},[t._v("#")]),t._v(" ref")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ref"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Ref"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的 property .value。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0")]),t._v("\n\ncount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意事项：")])]),t._v(" "),s("p",[t._v("1.所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。")]),t._v(" "),s("p",[t._v("2.如果将一个对象赋值给 ref，那么这个对象将被 reactive 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    foo\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取count")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取foo")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("foo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"unref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#unref"}},[t._v("#")]),t._v(" unref")]),t._v(" "),s("p",[t._v("如果参数是一个 ref，则返回内部值，否则返回参数本身，是 "),s("code",[t._v("val = isRef(ref) ? ref.value : ref")]),t._v(" 的语法糖函数。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" unref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> true")]),t._v("\n")])])]),s("h3",{attrs:{id:"toref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#toref"}},[t._v("#")]),t._v(" toRef")]),t._v(" "),s("p",[t._v("用于为响应式对象上的property 创建 ref。创建的 ref 与其源 property 保持同步：改变源 property\n将更新 ref，改变 ref 也将更新 property。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("f")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stateRef "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("black")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("white")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" fooRef "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'f'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blackRef "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("stateRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'black'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更改ref的值更新属性")]),t._v("\nfooRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nblackRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("f"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("stateRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更改property的值更新ref")]),t._v("\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("f"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nstateRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fooRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("blackRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")])]),t._v(" "),s("p",[t._v("即使源 property 当前不存在，toRef() 也会返回一个可用的 ref，而 toRefs 则不会，这在处理可选properties的时候\n非常有用")]),t._v(" "),s("h3",{attrs:{id:"torefs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#torefs"}},[t._v("#")]),t._v(" toRefs")]),t._v(" "),s("p",[t._v("将一个响应式对象转换为一个普通对象，这个普通对象的每个 property 都是指向源对象相应 property 的 ref。每个单独的 ref 都是 "),s("code",[t._v("toRef")]),t._v(" 创建的")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("black")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("white")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stateAsRefs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("stateAsRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\n\nstateAsRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3")]),t._v("\n")])])]),s("p",[t._v("toRefs 在使用组合式函数中的响应式对象时有很大作用，使用它，对响应式对象进行解构将不会失去响应性")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useFeatX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("black")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("white")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在返回时都转为 ref")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 解构而不会失去响应性")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" white"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useFeatX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")])]),t._v(" "),s("ul",[s("li",[t._v("toRefs 在调用时只会为源对象上可以列举出的 property 创建 ref。如果要为可能还不存在的 property\n创建 ref，请改用 "),s("code",[t._v("toRef")])])]),t._v(" "),s("h3",{attrs:{id:"isref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#isref"}},[t._v("#")]),t._v(" isRef")]),t._v(" "),s("p",[t._v("检查某个值是否为 ref，返回true/false。")]),t._v(" "),s("h3",{attrs:{id:"customref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#customref"}},[t._v("#")]),t._v(" customRef")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("customRef")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("factory"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" CustomRefFactory"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Ref"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomRefFactory"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("track")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("trigger")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("创建一个自定义 ref，可对其进行依赖项跟踪和更新触发显示控制。需要一个工厂函数，该函数接收 "),s("code",[t._v("track")]),t._v(" 和 "),s("code",[t._v("trigger")]),t._v("\n做为参数，并且应该返回一个带有 "),s("code",[t._v("get")]),t._v(" 和 "),s("code",[t._v("set")]),t._v(" 的对象。")]),t._v(" "),s("p",[t._v("同时，"),s("code",[t._v("track()")]),t._v(" 应该在 get() 方法中调用，"),s("code",[t._v("trigger()")]),t._v(" 应该在 "),s("code",[t._v("set()")]),t._v(" 中调用。不过这里具体何时调用、\n是否调用都将由用户自己来控制")]),t._v(" "),s("p",[t._v("示例：创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useDebouncedRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" delay "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" timeout\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("customRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("track"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" trigger")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("track")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" value\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("timeout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        timeout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" newValue\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("trigger")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" delay"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// text 的每次改变都只在最近一次set后的200ms后调用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" text "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useDebouncedRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"shallowref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#shallowref"}},[t._v("#")]),t._v(" shallowRef")]),t._v(" "),s("p",[s("code",[t._v("ref()")]),t._v(" 的浅层作用形式，创建一个仅跟踪自身 "),s("code",[t._v(".value")]),t._v(" 变化的 ref，其他值不做任何处理都为非响应式")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shallowRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发更改")]),t._v("\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 会触发更改")]),t._v("\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("black")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")]),t._v("\nshallowRef 的内部值将会被原样存储和暴露，不会被深层递归转为响应性， 只有对 "),s("code",[t._v(".value")]),t._v(" 的访问是响应式的")]),t._v(" "),s("p",[t._v("常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。")]),t._v(" "),s("h3",{attrs:{id:"triggerref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#triggerref"}},[t._v("#")]),t._v(" triggerRef")]),t._v(" "),s("p",[t._v("强制触发依赖于一个浅层 "),s("code",[t._v("ref")]),t._v(" 的副作用，这通常在对浅引用的内部值进行深度变更后使用。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" shallow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shallowRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("greet")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello, world'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 触发该副作用第一次应该会打印 "Hello, world"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("shallow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("greet"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这次变更不应触发副作用，因为这个 ref 是浅层的")]),t._v("\nshallow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("greet "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello, universe'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 手动执行该 shallowRef 关联的副作用，打印 "Hello, universe"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("triggerRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("shallow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/46.22f9a9c6.js b/docs-vuepress/.vuepress/dist/assets/js/46.22f9a9c6.js
new file mode 100644
index 0000000000..875578b2d1
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/46.22f9a9c6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{395:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"store-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store-api"}},[t._v("#")]),t._v(" Store API")]),t._v(" "),s("p",[s("strong",[t._v("注意：")]),t._v(" 以下 API 在 "),s("strong",[t._v("2.8")]),t._v(" 版本后无法通过全局应用实例 "),s("code",[t._v("mpx")]),t._v(" 访问。若项目中有类似 mpx.createStore 的用法，在升级到 "),s("strong",[t._v("2.8")]),t._v(" 版本后请进行修改。")]),t._v(" "),s("h2",{attrs:{id:"createstore"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createstore"}},[t._v("#")]),t._v(" createStore")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Store\n")])])]),s("blockquote",[s("p",[t._v("创建一个全局状态管理容器，实现复杂场景下的组件通信需求")])]),t._v(" "),s("ul",[s("li",[s("p",[s("code",[t._v("options")])]),t._v(" "),s("p",[t._v("options 可指定以下属性：")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("state")]),t._v(": "),s("code",[t._v("Object")])]),t._v(" "),s("p",[t._v("store的根 state 对象。")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/guide/advance/store.html#state"}},[t._v("详细介绍")])],1)]),t._v(" "),s("li",[s("p",[s("strong",[t._v("mutations")]),t._v(": "),s("code",[t._v("{ [type: string]: Function }")])]),t._v(" "),s("p",[t._v("在 store 上注册 mutation，处理函数总是接受 state 作为第一个参数（如果定义在模块中，则为模块的局部状态），payload 作为第二个参数（可选）。")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/guide/advance/store.html#mutation"}},[t._v("详细介绍")])],1)]),t._v(" "),s("li",[s("p",[s("strong",[t._v("actions")]),t._v(": "),s("code",[t._v("{ [type: string]: Function }")])]),t._v(" "),s("p",[t._v("在 store 上注册 action。处理函数总是接受 context 作为第一个参数，payload 作为第二个参数（可选）。")]),t._v(" "),s("p",[t._v("context 对象包含以下属性：\n"),s("code",[t._v("js { state, // 等同于 `store.state` commit, // 等同于 `store.commit` dispatch, // 等同于 `store.dispatch` getters // 等同于 `store.getters` }")]),t._v("\n同时如果有第二个参数 payload 的话也能够接收。")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/guide/advance/store.html#action"}},[t._v("详细介绍")])],1)]),t._v(" "),s("li",[s("p",[s("strong",[t._v("getters")]),t._v("："),s("code",[t._v("{[key: string]: Function }")])]),t._v(" "),s("p",[t._v("在 store 上注册 getter，getter 方法接受以下参数：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("     "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果在模块中定义则为模块的局部状态")]),t._v("\n  getters   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 等同于 store.getters")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("注册的 getter 暴露为 store.getters。")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/guide/advance/store.html#getter"}},[t._v("详细介绍")])],1)]),t._v(" "),s("li",[s("p",[s("strong",[t._v("modules")]),t._v("："),s("code",[t._v("Object")])]),t._v(" "),s("p",[t._v("包含了子模块的对象，会被合并到 store，大概长这样：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("key")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    mutations"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    actions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    getters"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    modules"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("与根模块的选项一样，每个模块也包含 state 和 mutations 选项。模块的状态使用 key 关联到 store 的根状态。模块的 mutation 和 getter 只会接收 module 的局部状态作为第一个参数，而不是根状态，并且模块 action 的 context.state 同样指向局部状态。")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/guide/advance/store.html#modules"}},[t._v("详细介绍")])],1)]),t._v(" "),s("li",[s("p",[s("strong",[t._v("deps")]),t._v("："),s("code",[t._v("Object")])]),t._v(" "),s("p",[t._v("包含了当前store依赖的第三方store：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("store1")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" storeA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("store2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" storeB\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("RouterLink",{attrs:{to:"/guide/advance/store.html#modules"}},[t._v("详细介绍")])],1)])])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("options "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"store-实例属性"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store-实例属性"}},[t._v("#")]),t._v(" "),s("strong",[t._v("Store 实例属性")])]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("state")]),t._v("："),s("code",[t._v("Object")]),t._v("\n根状态。")]),t._v(" "),s("li",[s("strong",[t._v("getters")]),t._v("："),s("code",[t._v("Object")]),t._v("\n暴露出注册的 getter。")])]),t._v(" "),s("h3",{attrs:{id:"store-实例方法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store-实例方法"}},[t._v("#")]),t._v(" "),s("strong",[t._v("Store 实例方法")])]),t._v(" "),s("ul",[s("li",[t._v("commit")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" any"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mutation"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("提交 mutation。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#mutation"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("dispatch")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" any"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("action"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("分发 action。返回一个Promise。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#action"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("mapState")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("map"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("p",[t._v("为组件创建计算属性以返回 store 中的状态。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#state"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("mapGetters")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGetters")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("map"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("p",[t._v("为组件创建计算属性以返回 getter 的返回值。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#getter"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("mapActions")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("map"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("p",[t._v("创建组件方法分发 action。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#action"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("mapMutations")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("map"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("p",[t._v("创建组件方法提交 mutation。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#mutation"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("mapStateToRefs")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapStateToRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("maps"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ComputedRef"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("组合式 API 特有")]),t._v("，在组合式 API 场景下解构访问 getter 并保持 getter 响应性，可以使用该方法。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#use-store-in-composition-api"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("mapGettersToRefs")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGettersToRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("maps"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ComputedRef"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("any"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("组合式 API 特有")]),t._v("，在组合式 API 场景下需解构访问 state 并保持 state 响应性，可以使用该方法。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#use-store-in-composition-api"}},[t._v("详细介绍")])],1),t._v(" "),s("h2",{attrs:{id:"createstorewiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createstorewiththis"}},[t._v("#")]),t._v(" createStoreWithThis")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Store\n")])])]),s("blockquote",[s("p",[t._v("createStoreWithThis 为 createStore 的变种方法，主要为了在 "),s("code",[t._v("Typescript")]),t._v(" 环境中，可以更好地支持 store 中的类型推导。"),s("br"),t._v("\n其主要变化在于定义 getters， mutations 和 actions 时，\n自身的 state，getters 等属性不再通过参数传入，而是会挂载到函数的执行上下文 this 当中，通过 this.state 或 this.getters 的方式进行访问。\n由于TS的能力限制，getters/mutations/actions 只有使用对象字面量的方式直接传入 createStoreWithThis 时\n才能正确推导出 this 的类型，当需要将 getters/mutations/actions 拆解为对象编写时，需要用户显式地声明 this 类型，无法直接推导得出。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getMixin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createStoreWithThis"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("aa")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("bb")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aa "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bb\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// data, mixin, computed中定义的数据能够被推导到this中")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 从store上map过来的计算属性或者方法同样能够被推导到this中")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'aa'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mixins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("aaa")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("123")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'doSth3'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"createstatewiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createstatewiththis"}},[t._v("#")]),t._v(" createStateWithThis")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStateWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("blockquote",[s("p",[t._v("createStateWithThis 为创建 state 提供了类型推导，对于基本类型可以由 TypeScript 自行推导，使用其他类型时，推荐使用 as 进行约束")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createStateWithThis "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" type StatusType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'start'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'running'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'stop'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStateWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'running'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" StatusType\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"creategetterswiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#creategetterswiththis"}},[t._v("#")]),t._v(" createGettersWithThis")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createGettersWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("Object\n")])])]),s("ul",[s("li",[s("p",[t._v("getters")]),t._v(" "),s("p",[t._v("需要定义的 getters 对象。")])]),t._v(" "),s("li",[s("p",[t._v("options（可选参数）")]),t._v(" "),s("p",[t._v("在 options 中可以传入 state，getters，deps。由于 getter 的类型推论需要基于 state，所以导出 getters 时，需要将 state 进行传入。deps 是作为一个扩展存在，getters 可以通过 deps 中传入的其他 store 来获取值，当 store 没有其他需要依赖的 deps 时可以不传。createMutationsWithThis 和 createActionsWithThis 同理。")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createGettersWithThis"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createStoreWithThis "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createGettersWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isStart")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("status "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'start'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getNum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("base"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("test "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("base"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getTest\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("deps")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("base")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("testNum")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getTest")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("testNum "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"createmutationswiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createmutationswiththis"}},[t._v("#")]),t._v(" createMutationsWithThis")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createMutationsWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mutations"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("ul",[s("li",[s("p",[t._v("mutations")]),t._v(" "),s("p",[t._v("需要定义的 mutations 对象。")])]),t._v(" "),s("li",[s("p",[t._v("options（可选参数）")]),t._v(" "),s("p",[t._v("在 options 中可以传入 state，deps。")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createMutationsWithThis "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createMutationsWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setCurrentStatus")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("payload")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" StatusType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("status "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" payload\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"createactionswiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createactionswiththis"}},[t._v("#")]),t._v(" createActionsWithThis")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createActionsWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("actions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("ul",[s("li",[s("p",[t._v("actions")]),t._v(" "),s("p",[t._v("需要定义的 actions 对象。")])]),t._v(" "),s("li",[s("p",[t._v("options（可选参数）")]),t._v(" "),s("p",[t._v("由于action 可以同时调用 getters、mutations，所以需要将这些都传入，以便进行类型推导。因此 options 可以传入 state、getters、mutations、deps。")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createActionsWithThis "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" StatusType "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./state'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" getters "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./getters'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mutations "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./mutations'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createActionsWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("testActions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("payload")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" StatusType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" Promise"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setCurrentStatus'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  mutations\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/47.2bd2cecc.js b/docs-vuepress/.vuepress/dist/assets/js/47.2bd2cecc.js
new file mode 100644
index 0000000000..01a3b3a970
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/47.2bd2cecc.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{393:function(t,v,_){"use strict";_.r(v);var e=_(4),a=Object(e.a)({},(function(){var t=this,v=t._self._c;return v("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[v("h1",{attrs:{id:"滴滴开源小程序框架mpx"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#滴滴开源小程序框架mpx"}},[t._v("#")]),t._v(" 滴滴开源小程序框架Mpx")]),t._v(" "),v("blockquote",[v("p",[t._v("作者："),v("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[t._v("hiyuki"),v("OutboundLink")],1)])]),t._v(" "),v("p",[t._v("Mpx是一款致力于提高小程序开发体验的增强型小程序框架，通过Mpx，我们能够以最先进的web开发体验(Vue + Webpack)来开发生产性能深度优化的小程序，Mpx具有以下一些优秀特性：")]),t._v(" "),v("ul",[v("li",[t._v("数据响应特性(watch/computed)")]),t._v(" "),v("li",[t._v("增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等)")]),t._v(" "),v("li",[t._v("深度性能优化(原生自定义组件/基于依赖收集和数据变化的setData)")]),t._v(" "),v("li",[t._v("Webpack编译(npm/循环依赖/Babel/ESLint/css预编译/代码优化等)")]),t._v(" "),v("li",[t._v("单文件组件开发")]),t._v(" "),v("li",[t._v("状态管理(Vuex规范/多实例/可合并)")]),t._v(" "),v("li",[t._v("跨团队合作(packages)")]),t._v(" "),v("li",[t._v("逻辑复用能力(mixins)")]),t._v(" "),v("li",[t._v("脚手架支持")]),t._v(" "),v("li",[t._v("小程序自身规范的完全支持")]),t._v(" "),v("li",[t._v("支付宝小程序的支持")])]),t._v(" "),v("h2",{attrs:{id:"设计思路"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#设计思路"}},[t._v("#")]),t._v(" 设计思路")]),t._v(" "),v("p",[t._v("目前业界主流的小程序框架主要有WePY，mpvue和Taro，这三者都是将其他的语法规范转译为小程序语法规范，我们称其为转译型框架。不同于上述三者，Mpx是一款基于小程序语法规范的增强型框架，我们使用Vue中优秀的语法特性增强了小程序，而不是让用户直接使用vue语法来开发小程序，之所以采用这种设计主要是基于如下考虑：")]),t._v(" "),v("ul",[v("li",[t._v("转译型框架无法支持源框架的所有语法特性(如Vue模板中的动态特性或React中动态生成的jsx)，用户在使用源框架语法进行开发时可能会遇到不可预期的错误，具有不确定性")]),t._v(" "),v("li",[t._v("小程序本身的技术规范在不断地更新进步，许多新的技术规范在转译型框架中无法支持或需要很高的支持成本，而对于增强型框架来说只要新的技术规范不与增强特性冲突，就能够直接支持")])]),t._v(" "),v("h2",{attrs:{id:"技术实现"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#技术实现"}},[t._v("#")]),t._v(" 技术实现")]),t._v(" "),v("p",[t._v("小程序刚推出时不支持自定义组件，无法进行组件化开发，当时最早的小程序框架WePY做的核心工作就是支持了小程序的组件化开发，后来的mpvue也基于Vue做了类似的工作。由于当时的小程序本身不支持自定义组件，WePY和mpvue的组件化支持都是基于编译做的组件化封装，用户编写的组件模板会被编译为Page中模板的一部分，在组件中定义的数据会被编译为Page中的数据，对组件进行数据更新也会基于路径映射调用Page.setData。这个方案在当时的技术条件下确实是一个唯一解，但该方案在复杂的小程序应用中会存在明显性能问题，原因在于该方案中页面的数据量会很大，而且每个组件的局部更新实际上都会成为页面级别的全局更新，在组件较多的页面中容易引发性能问题。在小程序自定义组件推出后，我们通过性能测试确认了该方案解决了上述组件封装方案中的性能问题。由于自定义组件在当时是一个最新的技术标准，业内的小程序框架都未支持，而我们本身的业务又有复杂小程序的开发需求，于是我们就基于小程序自定义组件规范启动了Mpx框架的设计与开发")]),t._v(" "),v("p",[v("em",[t._v("Page与Component setData性能对照")])]),t._v(" "),v("table",[v("thead",[v("tr",[v("th"),t._v(" "),v("th",[t._v("Component")]),t._v(" "),v("th",[t._v("Page")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("局部更新")]),t._v(" "),v("td",[t._v("1975ms")]),t._v(" "),v("td",[t._v("7186ms")])]),t._v(" "),v("tr",[v("td",[t._v("全局更新")]),t._v(" "),v("td",[t._v("6210ms")]),t._v(" "),v("td",[t._v("24612ms")])])])]),t._v(" "),v("blockquote",[v("p",[t._v("性能衡量标准说明：\n局部更新：文档中存在1000个节点，其中一个节点更新1000次的耗时；\n全局更新：文档中存在5个节点，5个节点独立更新1000次的耗时\n以上数据在iphone7微信小程序环境下测试得出")])]),t._v(" "),v("h3",{attrs:{id:"数据响应与性能优化"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#数据响应与性能优化"}},[t._v("#")]),t._v(" 数据响应与性能优化")]),t._v(" "),v("p",[t._v("数据响应作为Vue最核心的特性，在我们的日常开发中被大量使用，能够极大地提高前端开发体验和效率，我们在框架设计初期最早考虑的就是如何将数据响应特性加入到小程序开发中。在数据响应的实现上，我们引入了MobX，一个实现了纯粹数据响应能力的知名开源项目。借助MobX和mixins，我们在小程序组件创建初期建立了一个响应式数据管理系统，该系统观察着小程序组件中的所有数据(data/props/computed)并基于数据的变更驱动视图的渲染(setData)及用户注册的watch回调，实现了Vue中的数据响应编程体验。与此同时，我们基于MobX封装实现了一个Vuex规范的数据管理store，能够方便地注入组件进行全局数据管理。为了提高跨团队开发的体验，我们对store添加了多实例可合并的特性，不同团队维护自己的store，在需要时能够合并他人或者公共的store生成新的store实例，我们认为这是一种比Vuex中modules更加灵活便捷的跨团队数据管理模式")]),t._v(" "),v("p",[t._v("作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：")]),t._v(" "),v("ol",[v("li",[t._v("尽可能减少setData调用的频次")]),t._v(" "),v("li",[t._v("尽可能减少单次setData传输的数据")])]),t._v(" "),v("p",[t._v("为了实现以上两个优化方向，我们做了以下几项工作：")]),t._v(" "),v("ul",[v("li",[t._v("将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；")]),t._v(" "),v("li",[t._v("将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。\n基于以上优化，我们大大减少了小程序setData的调用频次和传递数据量，与初版Mpx中track全量数据的方案相比提升显著。")])]),t._v(" "),v("p",[v("em",[t._v("Mpx setData优化效果")])]),t._v(" "),v("table",[v("thead",[v("tr",[v("th"),t._v(" "),v("th",[t._v("旧版mpx")]),t._v(" "),v("th",[t._v("新版mpx")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("setData次数")]),t._v(" "),v("td",[t._v("164")]),t._v(" "),v("td",[t._v("88")])]),t._v(" "),v("tr",[v("td",[t._v("setData数据量")]),t._v(" "),v("td",[t._v("370kB")]),t._v(" "),v("td",[t._v("38kB")])])])]),t._v(" "),v("blockquote",[v("p",[t._v("以上数据由较复杂小程序在固定交互流程后统计得出")])]),t._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/4cb54489-b99d-4560-97aa-68f756730131.jpeg",alt:"Mpx数据响应机制流程示意图"}}),t._v(" "),v("em",[t._v("Mpx数据响应机制流程示意图")])]),t._v(" "),v("h3",{attrs:{id:"编译构建"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#编译构建"}},[t._v("#")]),t._v(" 编译构建")]),t._v(" "),v("p",[t._v("我们希望使用目前设计最强大、生态最完善的编译构建工具Webpack来实现小程序的编译构建，让用户得到web开发中先进强大的工程化开发体验。使用过Webpack的同学都知道，通常来说Webpack都是将项目中使用到的一系列碎片化模块打包为一个或几个bundle，而小程序所需要的文件结构是非常离散化的，如何调解这两者的矛盾成为了我们最大的难题。一种非常直观简单的思路在于遍历整个src目录，将其中的每一个.mpx文件都作为一个entry加入到Webpack中进行处理，这样做的问题主要有两个：")]),t._v(" "),v("ol",[v("li",[t._v("src目录中用不到的.mpx文件也会被编译输出，最终也会被小程序打包进项目包中，无意义地增加了包体积；")]),t._v(" "),v("li",[t._v("对于node_modules下的.mpx文件，我们不认为遍历node_modules是一个好的选择。")])]),t._v(" "),v("p",[t._v("最终我们采用了一种基于依赖分析和动态添加entry的方式来进行实现，用户在Webpack配置中只需要配置一个入口文件app.mpx，loader在解析到json时会解析json中pages域和usingComponents域中声明的路径，通过动态添加entry的方式将这些文件添加到Webpack的构建系统当中（注意这里是添加entry而不是添加依赖，因为只有entry能生成独立的文件，满足小程序的离散化文件结构），并递归执行这个过程，直到整个项目中所有用到的.mpx文件都加入进来，在输出前，我们借助了CommonsChunkPlugin/SplitChunksPlugin的能力将复用的模块抽取到一个外部的bundle中，确保最终生成的包中不包含重复模块。我们提供了一个Webpack插件和一个.mpx文件对应的loader来实现上述操作，用户只需要将其添加到Webpack配置中就可以以打包web项目的方式正常打包小程序，没有任何的前置和后置操作，支持Webpack本身的完整生态。")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/ce6d470c-0a4c-486e-a2f5-ad225c289832.jpeg",alt:"Mpx编译构建机制流程示意图"}}),t._v(" "),v("em",[t._v("Mpx编译构建机制流程示意图")])]),t._v(" "),v("h1",{attrs:{id:"现状和未来"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#现状和未来"}},[t._v("#")]),t._v(" 现状和未来")]),t._v(" "),v("p",[t._v("目前Mpx框架已经在滴滴内部大量使用，支撑了滴滴出行、青桔单车、街兔电单车、营销、车服等业务在小程序上的实现，线上运行稳定，收到了大量的好评反馈。未来我们在对框架进行持续迭代优化的同时会持续跟进微信和支付宝最新的技术标准，同时也会将在更多的小程序平台上进行适配。由于我们的设计初衷和专注点在于增强小程序开发体验，Mpx并没有进行跨H5甚至是跨Native的支持，但现实业务当中确实存在这样的诉求，未来我们会在Mpx的基础上对跨端进行一定的尝试，与此同时我们依然会持续维护升级Mpx，原因在于跨端意味着灵活性受限及能力的缺失，我们希望能给用户提供第二种选择。")]),t._v(" "),v("p",[v("em",[t._v("Mpx与业内主流小程序框架异同对比")])]),t._v(" "),v("table",[v("thead",[v("tr",[v("th"),t._v(" "),v("th",[t._v("WePY")]),t._v(" "),v("th",[t._v("mpvue")]),t._v(" "),v("th",[t._v("Taro")]),t._v(" "),v("th",[t._v("Mpx")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("代码规范")]),t._v(" "),v("td",[t._v("自定义")]),t._v(" "),v("td",[t._v("Vue")]),t._v(" "),v("td",[t._v("React")]),t._v(" "),v("td",[t._v("小程序+")])]),t._v(" "),v("tr",[v("td",[t._v("组件化实现")]),t._v(" "),v("td",[t._v("Page封装")]),t._v(" "),v("td",[t._v("Page封装")]),t._v(" "),v("td",[t._v("Component")]),t._v(" "),v("td",[t._v("Component")])]),t._v(" "),v("tr",[v("td",[t._v("数据响应")]),t._v(" "),v("td",[t._v("脏值检查")]),t._v(" "),v("td",[t._v("Vue")]),t._v(" "),v("td",[t._v("无")]),t._v(" "),v("td",[t._v("Mobx")])]),t._v(" "),v("tr",[v("td",[t._v("状态管理")]),t._v(" "),v("td",[t._v("Redux")]),t._v(" "),v("td",[t._v("Vuex")]),t._v(" "),v("td",[t._v("Redux")]),t._v(" "),v("td",[t._v("类Vuex")])])])]),t._v(" "),v("h2",{attrs:{id:"结语"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#结语"}},[t._v("#")]),t._v(" 结语")]),t._v(" "),v("p",[t._v("如果你注重开发体验和产品性能，专注于小程序开发，那Mpx会是一个很好的选择。最后感谢开源社区源源不断涌现出的优秀项目，给我们提供了无限的启发和巨大的技术帮助。")]),t._v(" "),v("p",[t._v("Github: "),v("a",{attrs:{href:"https://github.com/didi/mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/didi/mpx"),v("OutboundLink")],1),t._v("\n使用文档: "),v("a",{attrs:{href:"https://mpxjs.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://mpxjs.cn/"),v("OutboundLink")],1),t._v("\n用户交流群:\n"),v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/at_XEnlFb0/WechatIMG1.jpeg",alt:"微信"}})])])}),[],!1,null,null,null);v.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/48.55792a30.js b/docs-vuepress/.vuepress/dist/assets/js/48.55792a30.js
new file mode 100644
index 0000000000..e0193a93c3
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/48.55792a30.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{396:function(t,a,v){"use strict";v.r(a);var _=v(4),e=Object(_.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"滴滴小程序框架mpx发布2-0-支持小程序跨平台开发-可直接转换已有微信小程序"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#滴滴小程序框架mpx发布2-0-支持小程序跨平台开发-可直接转换已有微信小程序"}},[t._v("#")]),t._v(" 滴滴小程序框架Mpx发布2.0，支持小程序跨平台开发，可直接转换已有微信小程序")]),t._v(" "),a("blockquote",[a("p",[t._v("作者："),a("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[t._v("hiyuki"),a("OutboundLink")],1)])]),t._v(" "),a("p",[t._v("Mpx是一款致力于提高小程序开发体验和效率的增强型小程序框架，目前在滴滴公司内部支撑了包括滴滴出行小程序，滴滴出行广场小程序，青桔单车，黑马电单车，小桔养车，小桔加油在内的小程序生态；自去年11月开源以来，Mpx也吸纳了众多外部开发者的加入，基于Mpx开发了开走吧，好免街，花忆等小程序。")]),t._v(" "),a("p",[t._v("长期以来，Mpx优秀的开发体验和强大的稳定性得到了内外开发者的一致认可和好评，这非常符合Mpx的设计初衷。但是在各大厂商陆续推出自己的小程序平台，且各家的技术标准都不统一的今天，单纯地提高某一个平台的开发体验已经不能满足广大小程序开发者们的诉求，"),a("code",[t._v("一套代码在多小程序平台运行")]),t._v("已经成为一个现实上的刚需。为了解决这个小程序开发的痛点，Mpx发布了2.0版本，适配了目前业内已经发布的所有小程序平台(微信、支付宝、百度、头条、qq)，并且提供了直接将现有微信小程序编译输出到其他平台运行的能力。")]),t._v(" "),a("p",[t._v("Mpx2.0版本新增的主要特性主要包含：")]),t._v(" "),a("ul",[a("li",[t._v("完整支持了目前业内已发布的所有小程序平台(微信，支付宝，百度，qq，头条)；")]),t._v(" "),a("li",[t._v("Mpx小程序跨平台开发，支持将已有的Mpx微信项目编译输出到其他已支持的小程序平台中运行，"),a("RouterLink",{attrs:{to:"/guide/advance/platform.html"}},[t._v("点击查看详情")]),t._v("；")],1),t._v(" "),a("li",[t._v("小程序原生组件跨平台编译，支持将已有的微信原生组件编译输出到其他已支持的小程序平台中运行；")]),t._v(" "),a("li",[t._v("深度分包优化，编译过程中进行精准分包资源判断，所有分包only的资源(组件、js、外部样式、外部模板、wxs，图像媒体等)都会精确输出到分包目录中；")]),t._v(" "),a("li",[t._v("render函数中完整支持wxs模块，"),a("RouterLink",{attrs:{to:"/guide/understand/runtime.html"}},[t._v("关于render函数点击查看详情")]),t._v("；")],1),t._v(" "),a("li",[t._v("支持了模板引入，内联wxs，自定义tabbar，独立分包，workers，云开发等原生能力，进一步完善原生兼容性。")])]),t._v(" "),a("p",[t._v("同业内主流的小程序跨端框架相比，Mpx更专注于小程序开发本身，在小程序开发中具备以下优势：")]),t._v(" "),a("ul",[a("li",[t._v("基于小程序自身的技术标准进行增强，没有进行过重的DSL转换，开发时遇到的坑会更少；")]),t._v(" "),a("li",[t._v("完全兼容原生小程序技术规范，0成本迁移原生小程序项目;")]),t._v(" "),a("li",[t._v("跨平台开发以跨小程序平台为目标，大部分差异抹平工作在编译阶段进行，大大减少运行时适配层增加的包体积；")]),t._v(" "),a("li",[t._v("支持业内微信小程序组件库(如vant、iView等)直接转换到其他小程序平台运行;")]),t._v(" "),a("li",[t._v("非常重视小程序性能，提供了深度的setData和包体积优化。")])]),t._v(" "),a("p",[t._v("关于Mpx更详细的介绍可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("官方文档"),a("OutboundLink")],1),t._v("和"),a("RouterLink",{attrs:{to:"/articles/1.0.html"}},[t._v("这篇文章")]),t._v("。")],1),t._v(" "),a("p",[t._v("Github："),a("a",{attrs:{href:"https://github.com/didi/mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/didi/mpx"),a("OutboundLink")],1)]),t._v(" "),a("h2",{attrs:{id:"跨平台开发"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨平台开发"}},[t._v("#")]),t._v(" 跨平台开发")]),t._v(" "),a("p",[t._v("作为2.0版本的核心能力，Mpx的跨平台开发能力允许用户直接将已有小程序项目编译输出到其他已支持的小程序平台中运行。微信小程序作为小程序概念的提出者，有着最广泛的生态覆盖，因此我们优先支持了将微信小程序编译为其他平台小程序的能力。基于这个能力，用户不仅能跨平台编译微信Mpx项目，甚至能够将微信的原生自定义组件也编译到其他小程序平台进行运行，这意味着我们的跨平台项目能够直接使用一些社区内已有的UI组件库生态(如vant、iView等)，极大地提高了跨平台开发的适用范围。")]),t._v(" "),a("h3",{attrs:{id:"设计理念"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#设计理念"}},[t._v("#")]),t._v(" 设计理念")]),t._v(" "),a("p",[t._v("Mpx框架的核心设计理念在于增强，增强是指在小程序已有的原生能力基础上做加法，拓展小程序的开发能力，提高小程序的开发体验和效率。这个设计理念使Mpx给开发者带来了更强的确定性和可预期性，更低的学习上手和调试成本。基于这个理念，Mpx在不同的小程序平台中进行了差异性的增强适配，并参考各个平台的模板指令风格提供了不同的增强模板指令集，让用户在各小程序平台中都可以以增强的方式去最大限度地使用平台自有的原生能力。")]),t._v(" "),a("p",[t._v("我们在对Mpx提供跨平台能力的支持时也遵循了增强的核心设计理念。简单来讲，Mpx的跨平台能力是在多平台能力的基础上，在编译和运行时增加了一层转换层，将源平台的代码转换为目标平台的代码之后，再按照既有的目标平台的处理逻辑进行增强，同时我们也提供了一套完善的条件编译机制，让用户自行实现少数框架无法转换的部分。")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/38652040-2fbf-435b-aeff-563666c4021c.png",alt:"Mpx跨平台开发流程示意图"}})]),t._v(" "),a("p",[a("em",[t._v("Mpx跨平台开发流程示意图")])]),t._v(" "),a("p",[t._v("Mpx跨平台能力设计思路明显区别于业内已有的其他小程序跨平台框架，主要差异在于：")]),t._v(" "),a("ul",[a("li",[t._v("Mpx以小程序本身的DSL作为基准，而没有使用web框架(React,Vue)的DSL；")]),t._v(" "),a("li",[t._v("Mpx主要通过编译和运行时转换的方式处理平台差异，没有提供额外的差异抹平层(基础组件库等)。")])]),t._v(" "),a("p",[t._v("之所以采用这种设计，主要基于以下原因：")]),t._v(" "),a("ul",[a("li",[t._v("Mpx主要以跨小程序平台为目标，目前各大小程序平台的技术规范具有一定相似性，绝大部分平台差异能够通过编译和运行时手段抹平，同时省去的差异抹平层也能够进一步减少框架运行时体积；")]),t._v(" "),a("li",[t._v("使用小程序本身的DSL作为基准允许用户直接在已有项目中使用跨平台能力，对于原生小程序项目或组件也能够使用该能力进行跨平台输出；")]),t._v(" "),a("li",[t._v("结合完善的条件编译支持，该方案能够在满足用户跨平台需求的同时仍然允许用户最大限度地使用各个小程序平台提供的能力，完全延续了Mpx增强的核心设计理念。")])]),t._v(" "),a("h3",{attrs:{id:"使用方法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用方法"}},[t._v("#")]),t._v(" 使用方法")]),t._v(" "),a("p",[t._v("Mpx跨平台开发的使用方式非常简单，用户只需在MpxWebpackPlugin创建时传入mode和srcMode参数指定源平台和目标平台，当srcMode和mode不一致时，框架会读取相应的配置对项目进行编译和运行时转换。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 微信转支付宝")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MpxWebpackPlugin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mode指定目标平台，可选值有(wx|ali|swan|qq|tt)")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// srcMode指定源码平台，默认值同目标平台一致")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#差异抹平"}},[t._v("#")]),t._v(" 差异抹平")]),t._v(" "),a("p",[t._v("目前各大厂商的小程序技术规范在宏观层面上大致保持一致，但是技术细节方面存在很多差异，大致划分为以下几个部分：")]),t._v(" "),a("ul",[a("li",[t._v("模板语法/基础组件差异")]),t._v(" "),a("li",[t._v("json配置差异")]),t._v(" "),a("li",[t._v("wxs语法差异")]),t._v(" "),a("li",[t._v("页面/组件对象差异")]),t._v(" "),a("li",[t._v("api调用差异")]),t._v(" "),a("li",[t._v("webview bridge差异")])]),t._v(" "),a("p",[t._v("其中，对于模板语法/基础组件、json配置和wxs中的静态差异，我们主要通过编译手段进行转换处理，对于这部分差异中无法转换的部分会在编译阶段报错指出；而对于页面/组件对象、api调用和webview bridge中js运行时的差异，我们主要通过运行时手段进行处理，对应的无法转换部分也会在运行时中报错指出。")]),t._v(" "),a("p",[t._v("值得注意的是，我们在跨平台转换中做的工作不仅是对可转换的技术标准进行转换映射，对于一些目标平台中不存在的能力，我们也尽可能地通过编译和运行时手段提供了模拟和支持，最大限度地减少用户在跨平台开发中需要付出的额外工作量。以差异性最大但现实场景也最多的微信转支付宝为例，Mpx模拟提供了许多微信中支持但支付宝中未支持的能力：")]),t._v(" "),a("ul",[a("li",[t._v("组件自定义事件")]),t._v(" "),a("li",[t._v("组件间关系")]),t._v(" "),a("li",[t._v("获取子组件实例")]),t._v(" "),a("li",[t._v("observers/property observer")]),t._v(" "),a("li",[t._v("内联wxs")]),t._v(" "),a("li",[t._v("外部样式类")])]),t._v(" "),a("p",[t._v("对于原生自定义组件的跨平台转换，我们会对其进行简单的运行时注入，使其能够使用Mpx框架提供的运行时转换能力。")]),t._v(" "),a("h3",{attrs:{id:"条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#条件编译"}},[t._v("#")]),t._v(" 条件编译")]),t._v(" "),a("p",[t._v("对于框架无法抹平的差异部分，会在编译和运行时报错指出，对于这部分错误，我们提供了完善的条件编译机制让用户能够自行编写目标平台的patch进行修复，该能力也能用于实现具有平台差异性的业务逻辑。")]),t._v(" "),a("p",[t._v("上文中提到Mpx通过读取用户传入的mode和srcMode来决定是否以及如何对项目进行转换，mode和srcMode分别代表整个项目构建的目标平台和源平台，条件编译能够让用户在项目中创建声明了自身平台属性(localSrcMode)的文件和代码块。在项目构建中，框架会优先加载带有localSrcMode声明且localSrcMode与项目目标平台匹配(localSrcMode===mode)的文件和代码块，这部分文件和代码块需要完全依照自身声明的平台标准进行编写，Mpx不会对其进行任何编译和运行时的跨平台转换。")]),t._v(" "),a("p",[t._v("Mpx提供了三种维度的条件编译，分别是文件维度，区块维度和代码维度，用户可以根据平台差异的覆盖范围灵活选择使用。")]),t._v(" "),a("h2",{attrs:{id:"性能优化"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#性能优化"}},[t._v("#")]),t._v(" 性能优化")]),t._v(" "),a("p",[t._v("Mpx框架专注于小程序开发，在性能优化方面我们做过很多尝试和努力，主要集中在两个方面：")]),t._v(" "),a("ul",[a("li",[t._v("运行时的setData优化")]),t._v(" "),a("li",[t._v("编译构建时的包体积优化")])]),t._v(" "),a("h3",{attrs:{id:"setdata优化"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setdata优化"}},[t._v("#")]),t._v(" setData优化")]),t._v(" "),a("p",[t._v("数据响应是Mpx运行时增强的核心能力，该能力让用户在小程序开发中能够像Vue中一样使用watch和computed特性，并且用直接赋值的方式操作数据驱动视图更新，而不需要手动调用setData方法，换言之框架接管了小程序中的setData调用。")]),t._v(" "),a("p",[t._v("通过各大小程序平台的设计原理和性能优化建议可以得知，setData对于小程序的性能表现非常重要，而setData优化的两大方向在于：")]),t._v(" "),a("ul",[a("li",[t._v("尽可能减少setData调用的频次")]),t._v(" "),a("li",[t._v("尽可能减少单次setData传输的数据")])]),t._v(" "),a("p",[t._v("为了实现setData的优化，我们在模板编译过程中对于每个组件的模板都生成了一个渲染函数(render function)，该函数模拟模板的渲染逻辑，在每次执行时访问当次渲染所需的数据，并将当次访问过的数据路径记录下来作为函数返回值返回。")]),t._v(" "),a("p",[t._v("在运行时，框架会在每个组件创建时创建一个render watcher，该watcher追踪渲染函数，当渲染依赖数据发生变更时异步执行渲染函数，在render watcher回调中得到渲染函数返回的数据路径，基于这些路径与上一次的缓存数据进行diff比对，过滤掉未发生变化的数据后得到最小必要数据，最后调用setData将最小必要数据发送到真实的小程序渲染层更新视图。")]),t._v(" "),a("p",[t._v("基于这个机制，当数据发生变更时，只有当前渲染依赖的那部分数据发生变更才会异步地触发render watcher的执行，而每次执行后也只有实际发生变更的那部分数据会被setData发送到渲染层。这样用户就能自由地根据业务需求来操作数据，无需关注setData的调用优化，框架能够自动进行程序上最优的setData调用，在提升用户开发体验的同时也提升了程序性能。")]),t._v(" "),a("p",[t._v("在1.x版本中，渲染函数内无法执行wxs的逻辑，对于含有wxs的组件有可能降级到全量设置数据的模式，在2.0版本中，我们将wxs模块转译处理为js可执行的代码后注入到js bundle中，含有wxs的渲染函数也能够正常访问并执行wxs逻辑。")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/9ead35f1-693f-44f4-beb3-f98555ab6861.png",alt:"setData优化示意图"}})]),t._v(" "),a("p",[a("em",[t._v("setData优化示意图")])]),t._v(" "),a("h3",{attrs:{id:"包体积优化"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#包体积优化"}},[t._v("#")]),t._v(" 包体积优化")]),t._v(" "),a("p",[t._v("类似于运行时对于setData的接管，Mpx在编译阶段接管了项目的资源管理。得益于webpack强大的插件机制，Mpx开发了一个深度定制的webpack插件，基于webpack完成小程序的打包构建工作。用户在使用Mpx开发小程序时可以不受限制地使用npm依赖、最新的es特性和css预处理器等现代web开发能力。与此同时，Mpx在包体积优化上也做了很多工作，让用户专注于业务开发而无需花费过多精力进行包体积管理，我们所做的优化工作如下：")]),t._v(" "),a("ul",[a("li",[t._v("打包构建工作完全基于依赖分析，任何没有被引用的资源都不会出现在dist当中；")]),t._v(" "),a("li",[t._v("对于npm组件和页面的构建也完全基于依赖分析按需打包，不会copy整个miniprogram_dist目录，也不需要执行构建npm，使用体验和包体积均优于微信小程序自身的npm支持方案；")]),t._v(" "),a("li",[t._v("基于webpack提供的能力进行公共模块抽取和代码压缩等优化工作；")]),t._v(" "),a("li",[t._v("完善的分包支持，对所有资源进行从属分析，将所有分包only的资源都输出到分包目录中。")])]),t._v(" "),a("p",[t._v("分包作为微信小程序中优化包体积的核心手段(类似于异步按需加载)，Mpx对其进行了完善的支持。为了精确地标记出分包only的资源，我们在构建时将主包和分包的依赖收集步骤拆分开来串行处理，先处理主包，再处理分包。在主包的处理过程中，将主包页面中引用的所有非js资源(组件、外部样式、外部模板、wxs，图像媒体等)都记录下来，在处理分包时，对分包内引用的非js资源都进行检查，如果被主包引用过则输出到主包中，否则标记为分包only的资源输出到分包目录下。")]),t._v(" "),a("p",[t._v("对于js模块资源，我们在脚手架中生成的构建配置中提供了辅助函数，便于用户进行分包bundle的配置，经过该配置后，分包only的公用模块会被打入分包bundle输出到分包目录下，其余的公共模块会正常打入主bundle中。")]),t._v(" "),a("p",[t._v("在跨平台开发中，我们建议用户使用Mpx提供的"),a("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#packages"}},[t._v("packages")]),t._v("来定义分包，这样在转换到不支持分包的小程序平台时会自动降级为同步包进行处理。")],1),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/3121ca4e-1b47-43bc-992a-b351c4a03da4.png",alt:"分包构建示意图"}})]),t._v(" "),a("p",[a("em",[t._v("分包构建示意图")])]),t._v(" "),a("h2",{attrs:{id:"渐进迁移"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#渐进迁移"}},[t._v("#")]),t._v(" 渐进迁移")]),t._v(" "),a("p",[t._v("Mpx提供了良好的渐进迁移支持，对于使用原生或其他小程序框架的开发者来说，采用渐进迁移的方式逐步引入Mpx进行开发成本并不大。")]),t._v(" "),a("p",[t._v("在2.0版本中我们进一步完善了Mpx的原生兼容性，跟进支持了各个小程序平台最新的技术能力，如自定义tabbar，独立分包，分包预加载，workers，云开发等能力，同时补齐了一些1.x版本遗漏的支持。得益于此，对于使用原生小程序开发的开发者来说，迁移Mpx的成本几乎为0，用户只需将对应页面组件的构造函数替换为Mpx提供的createPage/createCompnent，即可使用Mpx提供的各种增强能力。")]),t._v(" "),a("p",[t._v("对于使用其他框架的开发者，Mpx也提供了局部构建的机制，允许用户将特定的页面和组件单独构建输出为原生组件，用户只需手动或者编写脚本输出的原生组件整合进原有项目中即可。")]),t._v(" "),a("h2",{attrs:{id:"未来规划"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#未来规划"}},[t._v("#")]),t._v(" 未来规划")]),t._v(" "),a("p",[t._v("作为滴滴公司内部小程序生态的基础设施，我们会对Mpx框架进行长期的维护更新，确保能在第一时间支持各个小程序平台最新的技术特性。与此同时，我们也会进一步完善框架的基础能力，目前已排上日程待支持能力包括：")]),t._v(" "),a("ul",[a("li",[t._v("i18n")]),t._v(" "),a("li",[t._v("ts支持")]),t._v(" "),a("li",[t._v("单元测试支持")])]),t._v(" "),a("p",[t._v("在跨平台能力方面，我们也会根据社区的反馈和建议，以及小程序的标准化进程，对其进行持续的完善与更新。")]),t._v(" "),a("p",[t._v("最后，如果你专注小程序开发，关注开发体验和产品性能，那Mpx会是你最好的选择。")])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/49.cde94a79.js b/docs-vuepress/.vuepress/dist/assets/js/49.cde94a79.js
new file mode 100644
index 0000000000..c058eaf38c
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/49.cde94a79.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{397:function(t,e,a){"use strict";a.r(e);var r=a(4),s=Object(r.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"mpx2-7-版本正式发布-大幅提升编译构建速度"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mpx2-7-版本正式发布-大幅提升编译构建速度"}},[t._v("#")]),t._v(" Mpx2.7 版本正式发布，大幅提升编译构建速度")]),t._v(" "),e("blockquote",[e("p",[t._v("作者："),e("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[t._v("hiyuki"),e("OutboundLink")],1)])]),t._v(" "),e("p",[e("a",{attrs:{href:"https://www.mpxjs.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx"),e("OutboundLink")],1),t._v("是一款开源的增强型跨端小程序框架，它具有良好的开发体验，极致的应用性能和一份源码同构输出所有小程序平台及web环境的跨端能力。近期，我们发布了框架最新的2.7版本，基于"),e("code",[t._v("webpack5")]),t._v("彻底重构了框架的核心编译构建流程，利用持久化缓存大幅提升了编译构建速度，最高提升可达10倍。除此之外，"),e("code",[t._v("Mpx2.7")]),t._v("版本还带来了一系列重要的功能更新，包括分包输出能力增强，完善的单元测试支持和用户Rules应用等，下面会对这些新特性进行逐个展开介绍。")]),t._v(" "),e("h2",{attrs:{id:"编译构建提速"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#编译构建提速"}},[t._v("#")]),t._v(" 编译构建提速")]),t._v(" "),e("p",[t._v('随着小程序生态的日渐发展壮大，各类线上小程序业务体量和复杂度的不断升级，小程序的包体积从最开始的2M以内膨胀到20M甚至30M，已经远远不复当初的"'),e("strong",[t._v("小")]),t._v('"程序之名。随着小程序项目大小的不断增加，采用框架进行小程序开发的开发者们往往都会面临一个问题，即框架的编译耗时过长，Mpx也不例外。')]),t._v(" "),e("p",[t._v("以团队负责的小程序项目为例，该项目目前的总包体积已经超过25M，包含近30000个JS模块，400多个页面和3000多个组件，在本地进行一次完整构建需要等待15分钟，CI环境下甚至需要近半个小时，远远超出能够忍受的范围，对小程序开发体验和开发效率造成了极大的影响。虽然旧版本中的watch模式能够在很大程度上缓解我们在开发调试过程中面临的编译耗时问题，但我们在日常开发中，仍然有很多场景无法使用watch模式（首次构建/CI环境/需真机预览等），基于内存缓存的watch模式也无法长期运行。对于这个问题，我们在过去也做了很多技术尝试，如支持watch:prod模式，局部编译，多线程编译，DLL预编译等等，但是整体尝试下来这些方案要么收效有限要么适用面不足，都没能探索到一个能从根本上解决问题的方案。")]),t._v(" "),e("p",[t._v("直到2020年底，"),e("code",[t._v("webpack5")]),t._v("正式发布，基于文件系统持久化缓存能力的出现，让我们看到了该问题的解决之道。由于webpack5相较于webpack4有着非常多的升级改动，而Mpx的编译构建在过去版本中也存在着各种历史遗留问题，我们花了较长的时间吃透webpack5的源码以及重新思考Mpx中存在的不合理设计。经过3个多月的开发，我们彻底重构了Mpx的核心编译构建流程，使其能够"),e("strong",[t._v("完整安全地")]),t._v("利用webpack5持久化缓存能力进行构建提速，同时也彻底解决了旧版Mpx中存在的历史遗留问题，在去年10月完成了beta版的开发与发布，并在业务中进行了初步的落地尝试。之后又经过2个多月的业务回归测试和框架功能补全，我们在beta版的基础上又迭代修复了近30个patch版本，在业务上完成了充分的回归测试，让我们确信目前的新版本已经达到了能够release的阶段。")]),t._v(" "),e("blockquote",[e("p",[t._v("为什么不是"),e("code",[t._v("Vite")])]),t._v(" "),e("p",[t._v("聊起编译提速，可能大部分人首先想到的是Vite，诚然Vite是一个极富创造力的技术方案，但是在小程序场景下，却不一定是最合适的方案，这主要源于Vite最核心的设计利用了现代浏览器原生支持的ESM，而目前没有任何一家的小程序环境能够原生支持ESM，这就使得Vite最核心的按需编译能力无法得到发挥，而Vite使用esbuild带来的编译速度提升，在webpack环境中也可以选择esbuild-loader提供的能力来替换babel/terser，而且目前esbuild提供的编译能力成熟度还远不能和babel/terser相比，再加上Mpx的编译构建流程很大程度上依赖了webpack提供的能力，从成本和收益上考虑采用webpack5对于我们来说无疑是更好的方案。")])]),t._v(" "),e("p",[t._v("以团队负责的小程序项目为例，我们来看一下Mpx2.7版本带来的编译提速效果：相较于旧版长达15分钟的构建耗时，在无缓存环境下，新版的构建耗时约为8分钟，速度提升了近1倍；而在有缓存环境下，新版构建耗时可以缩短至80s，速度提升了"),e("strong",[t._v("10倍以上")]),t._v("！随着我们对CI流程的持久化缓存改造完成，可以确保在日常的大部分构建场景都会在有缓存的环境下进行。")]),t._v(" "),e("h2",{attrs:{id:"分包输出能力增强"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#分包输出能力增强"}},[t._v("#")]),t._v(" 分包输出能力增强")]),t._v(" "),e("p",[t._v("在Mpx2.7版本中，我们对小程序分包能力的支持进行了进一步的完善增强。")]),t._v(" "),e("h3",{attrs:{id:"独立分包初始化模块"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#独立分包初始化模块"}},[t._v("#")]),t._v(" 独立分包初始化模块")]),t._v(" "),e("p",[t._v("在过去的版本中，我们对独立分包进行过专门的构建支持，以满足独立分包资源独占的要求。不过在使用独立分包进行业务开发时，往往会面临的一个棘手问题在于初始化逻辑无处安放。这是由于独立分包没有app.js，而在小程序中，组件的js逻辑会早于页面js执行，具体的执行顺序又和组件的嵌套关系有关，因此我们无法找到一个确定的代码位置来存放独立分包的初始化逻辑。")]),t._v(" "),e("p",[t._v("在Mpx2.7版本中，我们针对独立分包新增了一个全新的增强特性，让用户能够声明独立分包的初始化模块，该模块将会在独立分包启动时全局最先执行，其实现思路大致如下：在构建时为独立分包中所有的组件和页面都添加模块引用，指向用户声明的初始化模块，这样在独立分包启动时，不管哪个组件/页面的js最先执行，都能保障这个初始化模块最先执行，同时由于模块缓存的存在，后续的组件/页面执行时，该模块也不会被重复执行。")]),t._v(" "),e("p",[t._v("该特性的详细使用方式可以参考我们的"),e("a",{attrs:{href:"https://www.mpxjs.cn/guide/advance/subpackage.html#%E7%8B%AC%E7%AB%8B%E5%88%86%E5%8C%85",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档说明"),e("OutboundLink")],1)]),t._v(" "),e("h3",{attrs:{id:"分包异步化"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#分包异步化"}},[t._v("#")]),t._v(" 分包异步化")]),t._v(" "),e("p",[e("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("分包异步化"),e("OutboundLink")],1),t._v("是微信小程序在去年下半年提出的全新技术特性，该特性打破了传统分包只能引用自身和主包资源的规则限制，通过相关配置和声明，允许分包异步地引用其他分包内的资源，对于复杂小程序的包体积和加载性能优化具有极其重要的意义。")]),t._v(" "),e("p",[t._v("在过去，受限于小程序分包资源引用规则，Mpx在编译构建时对于跨分包共用的资源有两种处理策略，其一是将其输出到主包当中，让多个分包都能够通过主包访问，这种策略下可以达到总包体积最优，但是往往会对主包体积造成过大的压力。当主包超出2m限制时，我们就需要采用第二种策略，将这部分跨分包共用的资源冗余地输出到各自的分包中，消除其对于主包体积的占用。在实际的Mpx编译构建当中，这两种策略是同时存在的，具体什么时候采用哪种策略是根据资源类型和用户配置来决定的。")]),t._v(" "),e("p",[t._v("由于分包异步化技术打破了传统分包资源引用规则的限制，理想情况下我们可以做到主包不超限的同时总包无冗余，不过该技术目前也存在一些不足：一是跨平台支持度不佳，只有微信支持，不过据我们了解支付宝目前也在跟进中；二是对交互和体验会带来一些影响，同时存在业务改造成本，但这依然不妨碍该技术成为大型小程序优化包体积和加载性能的最优路径。")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/c7ac0180-6914-46c6-aaed-c1d3cface8e1.jpeg",alt:"分包异步化资源引用"}})]),t._v(" "),e("p",[t._v("我们在Mpx2.7版本中对分包异步化中最常用的"),e("code",[t._v("跨分包自定义组件引用")]),t._v("进行了完整支持，与原生小程序不同，Mpx中资源的分包归属不由源码位置决定，而是由资源引用关系决定，因此在跨分包资源引用的场景下，用户需要声明引用的资源属于哪个分包，简单使用示例如下：")]),t._v(" "),e("div",{staticClass:"language-json5 extra-class"},[e("pre",{pre:!0,attrs:{class:"language-json5"}},[e("code",[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"usingComponents"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过root query声明组件所属的分包，与packages语法下使用root query声明package所属分包的语义保持一致")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"button"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../subPackageA/components/button?root=subPackageA"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"list"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../subPackageB/components/full-list?root=subPackageB"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"simple-list"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/simple-list"')]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"componentPlaceholder"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"button"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"view"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"list"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"simple-list"')]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("详细使用方式可参考"),e("a",{attrs:{href:"https://www.mpxjs.cn/guide/advance/async-subpackage.html#%E5%88%86%E5%8C%85%E5%BC%82%E6%AD%A5%E5%8C%96",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档说明"),e("OutboundLink")],1)]),t._v(" "),e("p",[t._v("对于另一项"),e("code",[t._v("跨分包JS代码引用")]),t._v("能力的使用支持，我们目前也正在探索规划中，预计能在今年Q1内完成开发支持。")]),t._v(" "),e("h2",{attrs:{id:"单元测试支持"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#单元测试支持"}},[t._v("#")]),t._v(" 单元测试支持")]),t._v(" "),e("p",[t._v("Mpx自从20年开始就对单元测试有了初步的支持，但过去的单测方案在设计上存在一些缺陷，可用性不高，业务落地困难，在Mpx2.7版本中，我们设计了一套全新的技术方案，克服了原有方案中存在的所有问题，在可用性上得到了质的飞跃，新旧方案的对比如下：")]),t._v(" "),e("p",[t._v("旧方案：通过Mpx编译构建预先将完整的项目源码构建输出为原生小程序格式，再通过jest + miniprogram-simulate加载构建产出的原生小程序组件来执行测试case。该方案的优点在于编译流程统一，方案实现成本较低，缺点在于执行任何case都需要执行完整的构建流程，耗时较长；而且由于构建本身不基于jest进行，也无法使用jest提供的模块mock功能。")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/31756195-2734-4300-8ab4-8b1b7a7d8c8f.jpeg",alt:"旧版单测方案"}})]),t._v(" "),e("p",[t._v("新方案：我们fork了miniprogram-simulate仓库对其扩展了load mpx组件的能力，在资源加载的transform过程中通过mpx-jest插件将mpx组件编译为原生小程序组件，再将内容传递给miniprogram-simulate执行渲染并运行测试case。该方案中模块加载完全基于jest并能够实现组件的按需编译，完美规避旧方案中存在的问题，缺点在于编译流程基于jest api重构，与mpx基于webpack的编译流程独立，存在额外的维护成本，后续我们会将通用的编译逻辑抽离维护，在webpack和jest两侧复用。")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/5486308b-b844-402e-802f-f9cc08a07259.jpeg",alt:"新版单测方案"}})]),t._v(" "),e("p",[t._v("关于单元测试更详细的使用指南可参考"),e("a",{attrs:{href:"https://www.mpxjs.cn/guide/tool/unit-test.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档说明"),e("OutboundLink")],1)]),t._v(" "),e("p",[t._v("随着单测方案的完善，我们今年也会推动单元测试在小程序业务中全面落地，更好地保障代码质量与业务稳定。")]),t._v(" "),e("h2",{attrs:{id:"module-rules复用"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#module-rules复用"}},[t._v("#")]),t._v(" Module.rules复用")]),t._v(" "),e("p",[t._v("Mpx的单文件支持很大程度上参考了"),e("code",[t._v("vue-loader")]),t._v("的设计，在vue-loader@15版本前，对于单文件组件中各个区块(block)的loaders应用逻辑默认内置在loader当中，如需对某些区块进行自定义配置，需要向loader的options中传递额外的loader应用规则，无法复用webpack配置的"),e("code",[t._v("module.rules")]),t._v("中已经定义好的规则，这往往会导致我们需要在loader options和module.rules中维护重复的loader规则，同样的问题也存在于旧版的"),e("code",[t._v("mpx-loader")]),t._v("中。")]),t._v(" "),e("p",[t._v("在vue-loader@15版本发布之后，其通过克隆用户原始的rules的方式实现了module.rules的复用，用户不再需要往loader options中传递冗余的loaders规则，本次全新Mpx2.7版本也支持了该特性，我们使用了webpack提供的"),e("code",[t._v("matchResource")]),t._v("能力实现了module.rules的复用，该方案相较于clone rules的方式实现起来更加简洁优雅。")]),t._v(" "),e("p",[t._v("以上就是Mpx2.7版本的核心更新内容，目前使用脚手架工具创建的项目默认都会使用2.7版本，过往项目如需迁移升级可以查看"),e("a",{attrs:{href:"https://www.mpxjs.cn/guide/migrate/2.7.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这篇指南"),e("OutboundLink")],1),t._v("。")]),t._v(" "),e("h2",{attrs:{id:"即将到来的新特性"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#即将到来的新特性"}},[t._v("#")]),t._v(" 即将到来的新特性")]),t._v(" "),e("p",[t._v("以上就是我们本次Mpx2.7版本带来的全部特性，后续我们也有计划撰写一系列文章对其中的技术细节进行更加深入的分析与介绍，除了上面介绍到的特性外，我们还有一系列特性处于即将发布的状态：")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"https://github.com/didi/mpx/pull/919",target:"_blank",rel:"noopener noreferrer"}},[t._v("组件维度运行时渲染方案"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("a",{attrs:{href:"https://github.com/didi/mpx/pull/924",target:"_blank",rel:"noopener noreferrer"}},[t._v("页面局部构建能力"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("E2E自动化测试能力")]),t._v(" "),e("li",[t._v("基于Vite构建输出web应用")]),t._v(" "),e("li",[t._v("跨端输出快手小程序")]),t._v(" "),e("li",[t._v("@mpxjs/fetch提供接口mock能力")])]),t._v(" "),e("h2",{attrs:{id:"未来规划"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#未来规划"}},[t._v("#")]),t._v(" 未来规划")]),t._v(" "),e("p",[t._v("未来，我们的工作重心将重新回到运行时，重点致力于"),e("code",[t._v("composition api")]),t._v("编码规范支持和数据响应系统的升级，在保障性能和包体积方面优势的同时，带给开发者用户与时俱进的开发体验。")]),t._v(" "),e("p",[t._v("在跨端方面，我们与"),e("a",{attrs:{href:"https://github.com/didi/Hummer",target:"_blank",rel:"noopener noreferrer"}},[t._v("移动端跨端框架Hummer"),e("OutboundLink")],1),t._v("进行了合作，初步探索了Mpx基于Hummer输出为移动端原生应用的可行性，目前整体流程已经基本跑通，待后续能力逐步完善和业务充分落地后，就会在开源版本中发布。")]),t._v(" "),e("p",[t._v("与此同时，"),e("code",[t._v("Mpx-cube-ui")]),t._v("小程序跨端组件库也在持续地开发完善中，目前业务落地效果良好，预计会在今年下半年正式开源。")])])}),[],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/5.12d049b6.js b/docs-vuepress/.vuepress/dist/assets/js/5.12d049b6.js
new file mode 100644
index 0000000000..7f7e3b41d2
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/5.12d049b6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5,18,24],{301:function(t,e,s){},316:function(t,e,s){"use strict";s(301)},317:function(t,e,s){},320:function(t,e,s){},326:function(t,e,s){"use strict";s.r(e);var i={props:{dataList:{type:Array,default:()=>[]},height:{type:Number,default:152},autoPlay:{type:Boolean,default:!0},currentIndex:{type:Number,default:0},dot:{type:Boolean,default:!1}},data:()=>({msg:"",current:0,resut:[],allWidth:0,timer:0,prevCls:"swiper-disable",nextCls:"",offsetWidth:0,isMove:!1,timeout:0}),computed:{getStyle(){return`height: ${this.height}px;`},getMode(){return this.isMove?"transition: transform 0s;":"transition: transform 0.3s;"},getWidth(){return`width: ${this.offsetWidth}px;`}},mounted(){this.$nextTick(()=>{const t=this.$refs.container;this.offsetWidth=t.offsetWidth,this.autoPlay&&this.animationScroll(),window.addEventListener("resize",()=>{this.offsetWidth=t.offsetWidth},!1)}),this.touchInfo={clientX:0,clientY:0,moveX:0}},watch:{current(t){this.prevCls=0===t?"swiper-disable":"",t===this.dataList.length-1?this.nextCls="swiper-disable":this.nextCls=""}},methods:{animationScroll(){clearInterval(this.timer),this.timer=setInterval(()=>{this.handleNext()},3e3)},handlePrev(t){const e=this.$refs.wrapper;this.current--,-1===this.current&&(this.current=0),e.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,"off"!==t&&this.$emit("change",this.current)},handleNext(t){const e=this.$refs.wrapper;e&&(this.current++,this.current===this.dataList.length&&(this.current=0),e.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,"off"!==t&&this.$emit("change",this.current))},handleSelect(t){clearInterval(this.timer),clearTimeout(this.timeout),this.current=t;this.$refs.wrapper.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,this.autoPlay&&(this.timeout=setTimeout(()=>{this.animationScroll()},3e3))},handleStart(t){clearInterval(this.timer),clearTimeout(this.timeout);const e=t.touches[0];this.touchInfo={clientX:e.clientX},this.isMove=!0},handleMove(t){const e=this.$refs.wrapper,s=t.touches[0].clientX-this.touchInfo.clientX,i=this.current*this.offsetWidth-s;e.style.transform=`translateX(${-i}px)`,this.touchInfo.moveX=s},handleEnd(){this.isMove=!1;const t=this.touchInfo.moveX||0;let e=0;e=Math.abs(t)<20?0:t<0?this.current===this.dataList.length-1?0:1:0===this.current?0:-1;const s=this.$refs.wrapper;switch(e){case 0:s.style.transform=`translateX(${-this.current*this.offsetWidth}px)`;break;case 1:this.handleNext();break;case-1:this.handlePrev()}this.touchInfo={},this.autoPlay&&(this.timeout=setTimeout(()=>{this.animationScroll()},3e3))}}},a=(s(316),s(4)),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("div",{ref:"container",staticClass:"swiper-container",style:t.getStyle},[e("div",{ref:"wrapper",staticClass:"swiper",style:t.getMode,on:{touchstart:t.handleStart,touchmove:t.handleMove,touchend:t.handleEnd}},t._l(t.dataList,(function(s,i){return e("div",{key:i,ref:"list",refInFor:!0,staticClass:"swiper-list",style:t.getWidth},[t._t("default",null,{item:s})],2)})),0),t._v(" "),t.dot?e("ul",{staticClass:"swiper-dot"},t._l(t.dataList,(function(s,i){return e("li",{key:i,staticClass:"swiper-icon",class:{active:t.current===i}})})),0):t._e()])}),[],!1,null,"ae3bb0ce",null);e.default=r.exports},333:function(t,e,s){"use strict";s(317)},336:function(t,e,s){"use strict";s(320)},352:function(t,e,s){"use strict";s.r(e);s(69);var i={components:{MobileSwiper:s(326).default},data:()=>({currentIndex:0,pageIndex:0,tempIndex:0}),computed:{list(){return this.$page.frontmatter.sixSection.details},multiList(){const t=this.$page.frontmatter.sevenSection.details,e=[];let s=[];for(let i=0;i<t.length;i++)i%4==0&&(s.length&&e.push(s),s=[]),s.push(t[i]);return s.length&&e.push(s),e},mvcList(){return this.$page.frontmatter.threeSection.list},dataList(){return this.$page.frontmatter.sevenSection.details}},methods:{handleChange(t){this.currentIndex=t>3?t%4:t,t>2&&(t%4==0&&t>this.tempIndex&&(this.$refs.multiPage.handleNext("off"),this.currentIndex=0),(t+1)%4==0&&t<this.tempIndex&&(this.$refs.multiPage.handlePrev("off"),this.currentIndex=3)),this.tempIndex=t},handleSelect(t){let e=4*this.pageIndex+t;this.tempIndex=e,this.currentIndex=t,this.$refs.multiImg.handleSelect(e)},handlePage(t){this.pageIndex=t,this.handleSelect(0)}}},a=(s(333),s(4)),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"m-banner-wrapper"},[e("div",{staticClass:"m-banner"},[e("div",{staticClass:"m-title"},[t._v(t._s(t.$page.frontmatter.heroText))]),t._v(" "),e("div",{staticClass:"m-subtitle"},[t._v("\n      "+t._s(t.$page.frontmatter.tagline)+"\n    ")]),t._v(" "),e("div",{staticClass:"m-banner-btn-wrapper"},[e("button",{staticClass:"m-banner-btn m-banner-btn-enter"},[e("a",{staticStyle:{"font-size":"15px"},attrs:{href:t.$page.frontmatter.actionLink}},[t._v("\n          "+t._s(t.$page.frontmatter.actionText)+"\n        ")])]),t._v(" "),e("div",{staticClass:"m-banner-btn m-banner-btn-jump"},[e("a",{staticClass:"white-link",attrs:{href:t.$page.frontmatter.githubLink}},[t._v("\n          "+t._s(t.$page.frontmatter.githubText)+"\n        ")])])]),t._v(" "),e("div",{staticClass:"m-banner-bg"})]),t._v(" "),e("div",{staticClass:"m-advantages"},t._l(t.$page.frontmatter.features,(function(s,i){return e("li",{key:i,staticClass:"m-advan-section"},[e("img",{staticClass:"m-advan-section-img",attrs:{src:s.micon,loading:"lazy",width:"34",height:"34"}}),t._v(" "),e("p",{staticClass:"m-advan-section-title"},[t._v(t._s(s.title))])])})),0),t._v(" "),e("div",{staticClass:"mdemo-wrapper"},[e("div",{staticClass:"mdemo-title"},[t._v(t._s(t.$page.frontmatter.threeSection.title))]),t._v(" "),t._m(0),t._v(" "),e("div",{staticClass:"mdemo-icon-wrapper"},t._l(t.mvcList,(function(t,s){return e("div",{key:s,staticStyle:{margin:"0 6px"}},[e("img",{attrs:{width:"130",height:"150",src:t.code,alt:"code",loading:"lazy"}})])})),0)]),t._v(" "),e("div",{staticClass:"m-feature-wrapper"},[e("div",{staticClass:"m-feature-title"},[t._v("\n      "+t._s(t.$page.frontmatter.fourSection.title)+"\n    ")]),t._v(" "),e("div",{staticClass:"m-feature-subtitle"},[t._v("\n      "+t._s(t.$page.frontmatter.fourSection.details)+"\n    ")]),t._v(" "),e("a",{staticClass:"m-feature-btn",attrs:{href:t.$page.frontmatter.fourSection.actionLink}},[t._v("\n      "+t._s(t.$page.frontmatter.fourSection.actionText)+"\n    ")]),t._v(" "),e("img",{staticClass:"m-feature-pic",attrs:{width:"100%",height:"309px",src:t.$page.frontmatter.fourSection.mimg,alt:"platform",loading:"lazy"}}),t._v(" "),e("div",{staticClass:"m-feature-title"},[t._v("\n      "+t._s(t.$page.frontmatter.fiveSection.title)+"\n    ")]),t._v(" "),e("div",{staticClass:"m-feature-subtitle"},[t._v("\n      "+t._s(t.$page.frontmatter.fiveSection.details)+"\n    ")]),t._v(" "),e("a",{staticClass:"m-feature-btn",attrs:{href:t.$page.frontmatter.fourSection.actionLink}},[t._v("\n      "+t._s(t.$page.frontmatter.fiveSection.actionText)+"\n    ")]),t._v(" "),e("img",{staticClass:"m-feature-pic",attrs:{width:"100%",height:"309px",src:t.$page.frontmatter.fiveSection.mimg,alt:"platform",loading:"lazy"}})]),t._v(" "),e("div",{staticClass:"m-util-wrapper"},[e("div",{staticClass:"m-util-title"},[t._v(t._s(t.$page.frontmatter.sixSection.title))]),t._v(" "),t._l(t.list,(function(s,i){return e("ul",{key:i,staticClass:"row six-section__row"},[e("a",{staticClass:"six-section__item six-section__step",attrs:{href:s.actionLink}},[e("img",{staticClass:"six-section__icon",attrs:{src:s.icon,alt:"svg",loading:"lazy",width:"50",height:"50"}}),t._v(" "),e("div",{staticClass:"six-section__list"},[e("div",{staticClass:"six-section__bold"},[t._v(t._s(s.title))]),t._v(" "),e("div",{staticClass:"six-section__subtitle"},[t._v(t._s(s.details))])])])])}))],2),t._v(" "),e("div",{staticClass:"m-example-wrapper"},[e("div",{staticClass:"m-example-title"},[t._v(t._s(t.$page.frontmatter.sevenSection.title))]),t._v(" "),e("div",{staticClass:"m-example-phone"},[e("img",{attrs:{width:"318",height:"318",src:"https://dpubstatic.udache.com/static/dpubimg/xxjYvzgJdt/y_bg_phone.png",alt:"phone"}}),t._v(" "),e("div",{staticClass:"m-example-img-contain"},[e("mobile-swiper",{ref:"multiImg",attrs:{height:390,dataList:t.dataList},on:{change:t.handleChange},scopedSlots:t._u([{key:"default",fn:function(t){return[e("div",{staticClass:"m-example-swiper"},[e("img",{staticStyle:{"border-radius":"20px"},attrs:{width:"180",src:t.item.demo,alt:"demo"}})])]}}])})],1)]),t._v(" "),e("mobile-swiper",{ref:"multiPage",attrs:{height:200,dot:!0,autoPlay:!1,dataList:t.multiList},on:{change:t.handlePage},scopedSlots:t._u([{key:"default",fn:function(s){return[e("div",{staticClass:"m-example-swiper"},t._l(s.item,(function(s,i){return e("div",{key:i,staticClass:"m-example-name",class:{active:t.currentIndex===i},on:{click:function(e){return t.handleSelect(i)}}},[t._v("\n              "+t._s(s.title)+"\n            ")])})),0)]}}])})],1)])}),[function(){var t=this._self._c;return t("p",{staticClass:"mdemo-subtitle"},[this._v("\n      扫码体验Mpx版本的\n      "),t("a",{staticClass:"target-link",attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC"}},[this._v("todoMVC")]),this._v("\n      在各个小程序平台和web中的一致表现 ，更多示例项目可点击\n      "),t("a",{staticClass:"target-link",attrs:{href:"https://github.com/didi/mpx/tree/master/examples"}},[this._v("这里")]),this._v("\n      进入查看。\n    ")])}],!1,null,"a2c0041c",null);e.default=r.exports},355:function(t,e,s){"use strict";s.r(e);var i={data:()=>({smallMode:!1}),components:{Popover:s(303).default},mounted(){const t=()=>{document.documentElement.clientWidth<719?this.smallMode=!0:this.smallMode=!1};t(),window.addEventListener("resize",t,!1)}},a=(s(336),s(4)),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"footer-container"},[e("footer",{staticClass:"footer"},[e("ul",{staticClass:"footer__list"},[t.smallMode?t._e():e("li",{staticClass:"grow"},[e("img",{attrs:{width:"180",src:"https://dpubstatic.udache.com/static/dpubimg/T1R-u2N8nn/footer_logo.png",alt:"logo"}})]),t._v(" "),e("li",{staticClass:"grow"},[e("ul",{staticClass:"footer-inner"},[e("li",{staticClass:"footer__wrap"},[e("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.resourcesList.title))])]),t._v(" "),t._l(t.$page.frontmatter.resourcesList.details,(function(s,i){return e("li",{key:i,staticClass:"footer__wrap"},[e("a",{staticClass:"footer__text",attrs:{href:s.actionLink,target:"_blank"}},[t._v(t._s(s.title))])])}))],2)]),t._v(" "),e("li",{staticClass:"grow"},[e("ul",{staticClass:"footer-inner"},[e("li",{staticClass:"footer__wrap"},[e("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.communityList.title))])]),t._v(" "),t._l(t.$page.frontmatter.communityList.details,(function(s,i){return e("li",{key:i,staticClass:"footer__wrap"},[s.img?e("popover",{attrs:{code:s.img}},[e("span",{staticClass:"footer__text",attrs:{target:"_blank"}},[t._v(t._s(s.title))])]):e("a",{staticClass:"footer__text",attrs:{href:s.img||s.actionLink,target:"_blank"}},[t._v(t._s(s.title))])],1)}))],2)]),t._v(" "),e("li",{staticClass:"grow"},[e("ul",{staticClass:"footer-inner"},[e("li",{staticClass:"footer__wrap"},[e("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.helpList.title))])]),t._v(" "),t._l(t.$page.frontmatter.helpList.details,(function(s,i){return e("li",{key:i,staticClass:"footer__wrap"},[e("a",{staticClass:"footer__text",attrs:{href:s.actionLink,target:"_blank"}},[t._v(t._s(s.title))])])}))],2)]),t._v(" "),e("li",{staticClass:"grow"},[e("ul",{staticClass:"footer-inner"},[e("li",{staticClass:"footer__wrap"},[e("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.moreList.title))])]),t._v(" "),t._l(t.$page.frontmatter.moreList.details,(function(s,i){return e("li",{key:i,staticClass:"footer__wrap"},[e("a",{staticClass:"footer__text",attrs:{href:s.actionLink,target:"_blank"}},[t._v(t._s(s.title))])])}))],2)])])]),t._v(" "),t._m(0)])}),[function(){var t=this._self._c;return t("div",{staticClass:"copyright"},[t("div",[this._v("备案号："),t("a",{attrs:{href:"https://beian.miit.gov.cn/"}},[this._v("蜀ICP备15023364号-2")])]),this._v(" "),t("div",[this._v("Copyright 2020 滴滴出行")])])}],!1,null,"f9ca297c",null);e.default=r.exports},379:function(t,e,s){"use strict";s.r(e);var i=s(70),a=s(352),r=s(370),n=s(355),o=s(357),l={components:{Navbar:i.default,Content:r.default,Footer:n.default,ParentLayout:o.a,MobileView:a.default},data:()=>({smallMode:!1}),mounted(){const t=()=>{document.documentElement.clientWidth<719?this.smallMode=!0:this.smallMode=!1};t(),window.addEventListener("resize",t,!1)},methods:{toggleSidebar(t){this.isSidebarOpen="boolean"==typeof t?t:!this.isSidebarOpen,this.$emit("toggle-sidebar",this.isSidebarOpen)}}},c=s(4),h=Object(c.a)(l,(function(){var t=this._self._c;return t("div",{staticClass:"container"},[t("Navbar"),this._v(" "),this.smallMode?t("mobile-view"):t("Content"),this._v(" "),t("Footer")],1)}),[],!1,null,"13a300a6",null);e.default=h.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/50.42e34e52.js b/docs-vuepress/.vuepress/dist/assets/js/50.42e34e52.js
new file mode 100644
index 0000000000..d88337835e
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/50.42e34e52.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{400:function(t,a,s){"use strict";s.r(a);var e=s(4),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"通过-mpx-使用组合式-api-进行小程序开发"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#通过-mpx-使用组合式-api-进行小程序开发"}},[t._v("#")]),t._v(" 通过 Mpx 使用组合式 API 进行小程序开发")]),t._v(" "),a("p",[t._v("滴滴开源小程序跨端框架 "),a("a",{attrs:{href:"https://www.mpxjs.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx"),a("OutboundLink")],1),t._v(" 自18年立项开源以来，如今已经进入第五个年头，期间 Mpx 在有效支持了公司内外小程序业务开发的同时，也因其高性能、优体验、跨平台的特性获得了开发者用户的一致好评。")]),t._v(" "),a("p",[t._v("为了不辜负开发者用户对我们的信赖，更好地支持小程序业务开发，一方面我们对 Mpx 的稳定版本进行着高频的维护迭代，快速响应处理开发者用户在框架使用过程中遇到的问题；另一方面我们持续跟进探索业内最新动态，力求带给用户更好的开发体验与更强大的开发能力。继我们在 "),a("a",{attrs:{href:"https://mpxjs.cn/guide/migrate/2.7.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("2.7 版本"),a("OutboundLink")],1),t._v("中对 Mpx 的编译系统进行 Webpack5 适配 ，完整支持持久化缓存并大幅提升编译速度后，在 "),a("a",{attrs:{href:"https://mpxjs.cn/guide/migrate/2.8.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("2.8 版本"),a("OutboundLink")],1),t._v("中，我们对 Mpx 的框架运行时也进行了重构改造，完整支持 Vue3 中的组合式 API 开发范式，让用户能够使用时下最热门的开发方式进行小程序业务开发。")]),t._v(" "),a("p",[t._v("我们先来简单感受一下组合式 API 的使用：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ collectionName }}: {{ book.title }}({{ readersNumber }})"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addReaders"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("addReaders"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("collectionName")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" readersNumber "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" book "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Mpx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Component mounted.'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 暴露给 template")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        readersNumber"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        book"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addReaders")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          readersNumber"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("可以看出和 Vue3 组合式 API 的使用是高度类似的，利用框架导出的一系列响应式 API 和 生命周期钩子函数在 "),a("code",[t._v("setup")]),t._v(" 中编写业务逻辑，并将模板依赖的数据与方法作为返回值返回，与传统的选项式 API 相比，组合式 API 具备以下优势：")]),t._v(" "),a("ul",[a("li",[t._v("更好的逻辑复用，通过函数包装复用逻辑，显式引入调用，方便简洁且符合直觉，规避消除了 mixins 复用中存在的缺陷；")]),t._v(" "),a("li",[t._v("更灵活的代码组织，相比于选项式 API 提前规定了代码的组织方式，组合式 API 在这方面几乎没有做任何限制与规定，更加灵活自由，在功能复杂的庞大组件中，我们能够通过组合式 API 让我们的功能代码更加内聚且有条理，不过这也会对开发者自身的代码规范意识提出更高要求；")]),t._v(" "),a("li",[t._v("更好的类型推导，虽然基于 "),a("code",[t._v("this")]),t._v(" 的选项式 API 通过 "),a("code",[t._v("ThisType")]),t._v(" 类型体操的方式也能在一定程度上实现 TS 类型推导，但推导和实现成本较高，同时仍然无法完美覆盖一些复杂场景（如嵌套 mixins 等）；而组合式 API 以本地变量和函数为基础，本身就是类型友好的，我们在类型方面几乎不需要做什么额外的工作就能享受到完美的类型推导。")])]),t._v(" "),a("p",[t._v("同时与 React Hooks 相比，组合式 API 中的 "),a("code",[t._v("setup")]),t._v(" 函数只在初始化时单次执行，在数据响应能力的加持下大大降低了理解与使用成本，基于以上原因，我们决定为 Mpx 添加组合式 API 能力，让用户能够用组合式 API 方式进行小程序开发。")]),t._v(" "),a("h2",{attrs:{id:"组合式-api-实现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-实现"}},[t._v("#")]),t._v(" 组合式 API 实现")]),t._v(" "),a("p",[t._v("从上面的简单示例中可以看出，抛开响应式 API 和生命周期注册模式的变化，组合式 API 的实现要点在于动态添加模板依赖的数据和方法，这也是我们在小程序中实现组合式 API 可能遇到的核心技术卡点。")]),t._v(" "),a("p",[t._v("对于动态添加模板依赖数据，我们在过去的实践中已经充分证明了其可行性，事实上，从 Mpx 最初的版本开始，我们就充分利用了这项能力来实现我们对计算属性和 "),a("code",[t._v("dataFn")]),t._v(" （类似于 Vue 使用函数定义 "),a("code",[t._v("data")]),t._v("）的支持，这项能力的关键在于存在合适的生命周期用于动态添加初始化数据，这里对于初始化数据的定义是能够影响组件树的初始渲染，举个简单的例子：存在一对父子组件 parent/child，parent 使用 "),a("code",[t._v("props")]),t._v(" 向 child 传递数据，当我们在 parent 初始创建时使用 "),a("code",[t._v("setData")]),t._v(" 动态添加 "),a("code",[t._v("props")]),t._v(" 数据，同时 child 在初始创建时能够通过 "),a("code",[t._v("props")]),t._v(" 正确获取到这部分的数据时，我们就可以将这部分动态添加的数据视作初始化数据，这是我们在小程序中实现完备数据响应支持的基础。")]),t._v(" "),a("p",[t._v("幸运的是，目前业内所有主流小程序平台（微信/支付宝/百度/字节/QQ）都支持了上述能力，微信从一开始就支持在 "),a("code",[t._v("attached")]),t._v(" 生命周期中调用 "),a("code",[t._v("setData")]),t._v(" 函数动态添加初始化数据，在上述的父子 "),a("code",[t._v("props")]),t._v(" 传递场景中，也能够在子组件的 "),a("code",[t._v("attached")]),t._v(" 中正确获取这部分数据，支付宝和字节小程序一开始并不支持该能力，不过支付宝在 "),a("code",[t._v("component2")]),t._v(" 组件系统重构后，字节在橙心合作项目中与我们沟通后，都成功支持了该能力。")]),t._v(" "),a("p",[t._v("而对于动态返回的方法，最简单能想到的方案就是直接挂载到组件实例上，经过我们的完整测试，上述业内主流小程序平台都支持使用这种方式动态添加方法，基于以上事实，我们非常确定组合式 API 能够在小程序环境中顺利实现，下图简要展示了 Mpx 支持组合式 API 的初始化流程：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/0bxxw8bB9PJxXLeiMQ__6_composition-api-init.png",alt:"composition-api-init"}})]),t._v(" "),a("h3",{attrs:{id:"生命周期钩子函数"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#生命周期钩子函数"}},[t._v("#")]),t._v(" 生命周期钩子函数")]),t._v(" "),a("p",[t._v("在组合式 API 中，"),a("code",[t._v("setup")]),t._v(" 函数只有在组件创建时初始化单次执行，因此需要提供一系列生命周期钩子函数来代替选项式 API 中的生命周期钩子选项，由于小程序原生只支持选项式的生命周期注册方式，我们通过"),a("code",[t._v("预注册 -> 驱动")]),t._v("的方式来实现 "),a("code",[t._v("setup")]),t._v(" 中函数式注册生命周期钩子的语法糖，简单来讲就是使用选项式 "),a("code",[t._v("mixins")]),t._v(" 的方式提前注册所有需要的生命周期钩子，在选项式生命周期钩子执行时驱动对应在 "),a("code",[t._v("setup")]),t._v(" 中使用生命周期钩子函数注册的代码逻辑执行，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/2nmOjxvubyk6H32yP5cFc_composition-api-hook.png",alt:"composition-api-hook"}})]),t._v(" "),a("p",[t._v("作为跨端小程序框架，Mpx 需要兼容不同小程序平台不同的生命周期，在选项式 API 中，我们在框架中内置了一套统一的生命周期，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异，如微信小程序的 "),a("code",[t._v("attached")]),t._v(" 钩子和支付宝小程序的 "),a("code",[t._v("onInit")]),t._v(" 钩子，在组合式 API 中，我们沿用了同样的逻辑，设计了一套与框架内置生命周期对应的生命周期钩子函数，以相同的方式进行驱动，因此这些生命周期钩子函数天然具备了跨平台特性，下表显示了在组件 / 页面中框架生命周期与原生平台生命周期的对应关系：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("框架内置生命周期")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("Hooks in "),a("code",[t._v("setup")])]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("微信原生")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("支付宝原生")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFORECREATE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")])]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("attached（数据响应初始化前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onInit（数据响应初始化前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("CREATED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")])]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("attached（数据响应初始化后）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onInit（数据响应初始化后）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREMOUNT")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeMount")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("ready（"),a("code",[t._v("MOUNTED")]),t._v(" 执行前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didMount（"),a("code",[t._v("MOUNTED")]),t._v(" 执行前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("MOUNTED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onMounted")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("ready（"),a("code",[t._v("BEFOREMOUNT")]),t._v(" 执行后）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didMount（"),a("code",[t._v("BEFOREMOUNT")]),t._v(" 执行后）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREUPDATE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeUpdate")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" 执行前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" 执行前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("UPDATED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onUpdated")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" callback）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" callback）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREUNMOUNT")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeUnmount")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("detached（数据响应销毁前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didUnmount（数据响应销毁前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("UNMOUNTED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onUnmounted")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("detached（数据响应销毁后）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didUnmount（数据响应销毁后）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONLOAD")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONSHOW")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONHIDE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONRESIZE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("events.onResize")])])])]),t._v(" "),a("blockquote",[a("p",[t._v("同 Vue3 一样，Mpx 在组合式 API 中没有提供 "),a("code",[t._v("BEFORECREATE")]),t._v(" 和 "),a("code",[t._v("CREATED")]),t._v(" 对应的生命周期钩子函数，用户可以直接在 "),a("code",[t._v("setup")]),t._v(" 中编写相关逻辑。")])]),t._v(" "),a("h4",{attrs:{id:"具有副作用的页面事件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#具有副作用的页面事件"}},[t._v("#")]),t._v(" 具有副作用的页面事件")]),t._v(" "),a("p",[t._v("在小程序中，一些页面事件的注册存在副作用，即该页面事件注册与否会产生实质性的影响，比如微信中的 "),a("code",[t._v("onShareAppMessage")]),t._v(" 和 "),a("code",[t._v("onPageScroll")]),t._v("，前者在不注册时会禁用当前页面的分享功能，而后者在注册时会带来视图与逻辑层之间的线程通信开销，对于这部分页面事件，我们无法通过"),a("code",[t._v("预注册 -> 驱动")]),t._v("方式提供组合式 API 的注册方式，用户可以通过选项式 API 的方式来注册使用，通过 "),a("code",[t._v("this")]),t._v(" 访问组合式 API "),a("code",[t._v("setup")]),t._v(" 函数的返回。")]),t._v(" "),a("p",[t._v("然而这种使用方式显然不够优雅，我们考虑是否可以通过一些非常规的方式提供这类副作用页面事件的组合式 API 注册支持，例如，借助编译手段。我们在运行时提供了副作用页面事件的注册函数，并在编译时通过 "),a("code",[t._v("babel")]),t._v(" 插件的方式解析识别到当前页面中存在这些特殊注册函数的调用时，通过框架已有的"),a("code",[t._v("编译 -> 运行时注入")]),t._v("的方式将事件驱动逻辑添加到当前页面当中，以提供相对优雅的副作用页面事件在组合式 API 中的注册方式，同时不产生非预期的副作用影响，简单示例如下：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onShareAppMessage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShareAppMessage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'页面分享'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      count\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("目前我们通过这种方式支持的页面事件如下：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("页面事件")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("Hooks in "),a("code",[t._v("setup")])]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("平台支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareAppMessage")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareAppMessage")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信/支付宝/百度/QQ")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onAddToFavorites")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onAddToFavorites")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信 / QQ")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareTimeline")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareTimeline")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onSaveExitState")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onSaveExitState")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信")])])])]),t._v(" "),a("blockquote",[a("p",[a("strong",[t._v("特别注意")]),t._v("，由于静态编译分析实现方式的限制，这类页面事件的组合式 API 使用需要满足页面事件注册函数（如"),a("code",[t._v("onShareAppMessage")]),t._v("）的调用和 "),a("code",[t._v("createPage")]),t._v(" 的调用位于同一个 js 文件当中。")])]),t._v(" "),a("p",[t._v("关于生命周期钩子函数的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h3",{attrs:{id:"script-setup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#script-setup"}},[t._v("#")]),t._v(" "),a("code",[t._v("<script setup>")])]),t._v(" "),a("p",[t._v("同 Vue3 一样，我们在 "),a("code",[t._v(".mpx")]),t._v(" 单文件组件 / 页面中实现了 "),a("code",[t._v("<script setup>")]),t._v(" 的组合式 API 编译语法糖，相较于常规的写法，"),a("code",[t._v("<script setup>")]),t._v(" 具备以下优势：")]),t._v(" "),a("ul",[a("li",[t._v("更少的样板内容，更简洁的代码")]),t._v(" "),a("li",[t._v("能够使用纯 TypeScript 声明 props 类型")]),t._v(" "),a("li",[t._v("更好的 IDE 类型推导性能")])]),t._v(" "),a("p",[t._v("简单使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" msg "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("msg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("msg: {{msg}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ontap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("log"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("可以看到使用方式与 Vue3 基本一致，不过由于 Mpx 的组合式 API 设计实现与 Vue3 存在差异，对应 "),a("code",[t._v("<script setup>")]),t._v(" 也与 Vue3 中存在一些差异：")]),t._v(" "),a("ul",[a("li",[t._v("不支持 "),a("code",[t._v("import")]),t._v(" 快捷注册组件")]),t._v(" "),a("li",[t._v("没有 "),a("code",[t._v("defineEmits()")]),t._v(" 编译宏")]),t._v(" "),a("li",[t._v("没有 "),a("code",[t._v("useSlots()")]),t._v(" 和 "),a("code",[t._v("useAttrs()")]),t._v(" 运行时函数")]),t._v(" "),a("li",[t._v("以编译宏的形式提供了 "),a("code",[t._v("useContext()")]),t._v("，获取 "),a("code",[t._v("setup")]),t._v(" 函数的第二个参数 "),a("code",[t._v("context")])]),t._v(" "),a("li",[a("code",[t._v("defineExpose()")]),t._v(" 编译宏的作用与 Vue3 中有所差别，能够限定模板中能访问的变量范围")])]),t._v(" "),a("blockquote",[a("p",[a("strong",[t._v("特别注意")]),t._v("，受小程序底层技术限制，我们在 Mpx 的实现中无法像 Vue3 那样将模板编译的渲染函数和 "),a("code",[t._v("<script setup>")]),t._v(" 放置到同一作用域下进行变量访问，而是通过静态编译分析提取出 "),a("code",[t._v("<script setup>")]),t._v(" 的顶层作用域变量，再以上文中提到的动态添加数据与方法的方式将其设置到模板当中，如果 "),a("code",[t._v("<script setup>")]),t._v(" 中声明了较多顶层作用域变量，它们并不一定都会被模板访问，就会带来无效的性能开销，因此我们强烈建议使用 "),a("code",[t._v("defineExpose()")]),t._v(" 限定模板中能访问的变量范围，你可以把它等同于 "),a("code",[t._v("setup")]),t._v(" 函数中的 "),a("code",[t._v("return")]),t._v("。")])]),t._v(" "),a("p",[t._v("关于 "),a("code",[t._v("<script setup>")]),t._v(" 的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h3",{attrs:{id:"组合式-api-与-vue3-中的差异"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-与-vue3-中的差异"}},[t._v("#")]),t._v(" 组合式 API 与 Vue3 中的差异")]),t._v(" "),a("p",[t._v("我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("setup")]),t._v(" 的 "),a("code",[t._v("context")]),t._v(" 参数不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#context",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("code",[t._v("setup")]),t._v(" 不支持返回"),a("strong",[t._v("渲染函数")])]),t._v(" "),a("li",[a("code",[t._v("setup")]),t._v(" 不能是异步函数")]),t._v(" "),a("li",[a("code",[t._v("<script setup>")]),t._v(" 提供的宏方法不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("code",[t._v("<script setup>")]),t._v(" 不支持 "),a("code",[t._v("import")]),t._v(" 快捷注册组件")]),t._v(" "),a("li",[t._v("支持的生命周期钩子不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("li",[t._v("模板引用的方式不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#template-ref",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)])]),t._v(" "),a("p",[t._v("关于组合式 API 的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"响应式-api-实现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api-实现"}},[t._v("#")]),t._v(" 响应式 API 实现")]),t._v(" "),a("p",[t._v("组合式 API 的正常工作离不开响应式 API 的支持，下面我们来聊聊 Mpx 中响应式 API 的设计实现。我们知道 Vue3 中响应式 API 基于 "),a("code",[t._v("proxy")]),t._v(" 进行了重构实现，但是目前 "),a("code",[t._v("proxy")]),t._v(" 的浏览器兼容占比仍然无法达到我们对于线上可用性的要求，因此在 Mpx 中，我们仍然基于 "),a("code",[t._v("Object.defineProperty")]),t._v(" 进行核心数据响应能力的实现，同时借鉴了 Vue3 中优秀的代码设计与实现，如 "),a("code",[t._v("reactiveEffect")]),t._v(" 和 "),a("code",[t._v("effectScope")]),t._v(" 等，尽可能实现与 Vue3 中响应式 API 能力对齐。")]),t._v(" "),a("p",[t._v("说到这里，很多同学可能会想到 "),a("code",[t._v("@vue/composition-api")]),t._v(" 这个库，该库提供的关键能力正是基于 Vue2 的数据响应系统模拟实现 Vue3 中的响应式 API，我们在前期也对 "),a("code",[t._v("@vue/composition-api")]),t._v(" 在 Mpx 中的复用进行了非常有价值的探索尝试。不过最终我们还是决定在 Mpx 的运行时框架中进行独立实现，原因主要在于："),a("code",[t._v("@vue/composition-api")]),t._v(" 是作为一个 Vue2 插件存在，无法直接侵入 Vue2 源码，导致部分能力无法实现或会带来额外的性能开销，例如 "),a("code",[t._v("flush: 'post'")]),t._v(" 和 "),a("code",[t._v("ref")]),t._v(" 自动解包等。我们也看到在最新的 Vue2.7 版本中，也是在运行时框架里重新实现了这部分内容，以规避上述问题。")]),t._v(" "),a("p",[t._v("下图展示了 Mpx 中响应式 API 核心模块依赖关系：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/4ySdEqTRhc_DRWWCJWrhJ_composition-api-reactive.png",alt:"composition-api-reactive"}})]),t._v(" "),a("h3",{attrs:{id:"数据响应限制带来的差异"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#数据响应限制带来的差异"}},[t._v("#")]),t._v(" 数据响应限制带来的差异")]),t._v(" "),a("p",[t._v("由于 "),a("code",[t._v("Object.defineProperty")]),t._v(" 的能力限制，Mpx 存在和 Vue2 一致的数据响应限制，无法感知到对象 property 的添加和删除以及数组的索引赋值，与 Vue2 一致，我们暴露了 "),a("code",[t._v("set")]),t._v(" 和 "),a("code",[t._v("del")]),t._v(" API 来让用户显式地进行相关操作。除此之外，由于使用方式发生了变化，我们在使用 "),a("code",[t._v("reactive")]),t._v(" API 创建响应式数据时，还会遇到新的限制，我们来看一下代码示例：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,1,2,3]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发 watchEffect")]),t._v("\n\nstate"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发 watchEffect")]),t._v("\n")])])]),a("p",[t._v("可以看出，即使我们使用了 "),a("code",[t._v("set")]),t._v(" API 和数组原型方法对数组进行修改，我们仍然无法监听到数据变化。")]),t._v(" "),a("blockquote",[a("p",[t._v("相同的限制在使用 "),a("code",[t._v("Object.defineProperty")]),t._v(" 的 Vue2.7 中也同样存在。")])]),t._v(" "),a("p",[t._v("为什么会存在这个限制呢？原因在于：基于 "),a("code",[t._v("Object.defineProperty")]),t._v(" 实现的数据响应系统中，我们会对对象的每个已有属性创建了一个 "),a("code",[t._v("Dep")]),t._v(" 对象，在对该属性进行 "),a("code",[t._v("get")]),t._v(" 访问时通过这个对象将其与依赖它的观察者 "),a("code",[t._v("ReactiveEffect")]),t._v(" 关联起来，并在 "),a("code",[t._v("set")]),t._v(" 操作时触发关联 "),a("code",[t._v("ReactiveEffect")]),t._v(" 的更新，这是我们大家都知道的数据响应的基本原理。但是对于新增/删除对象属性和修改数组的场景，我们无法事先定义当前不存在属性的 "),a("code",[t._v("get/set")]),t._v(" (当然这在 "),a("code",[t._v("proxy")]),t._v(" 当中是可行的)，因此我们会把对象或者数组本身作为一个数据依赖创建 "),a("code",[t._v("Dep")]),t._v(" 对象，"),a("strong",[t._v("通过父级访问")]),t._v("该数据时定义的 "),a("code",[t._v("get/set")]),t._v(" 将其关联到对应的 "),a("code",[t._v("ReactiveEffect")]),t._v("，并在对数据进行新增/删除属性或数组操作时通过数据本身持有的 "),a("code",[t._v("Dep")]),t._v(" 对象触发关联 "),a("code",[t._v("ReactiveEffect")]),t._v(" 的更新，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/XkI9cQBsLy_7np-T3rt56_composition-api-reactive2.png",alt:"数据响应原理"}})]),t._v(" "),a("p",[t._v("需要注意的是，"),a("strong",[t._v("通过父级访问")]),t._v("是建立 "),a("code",[t._v("Dep")]),t._v(" 与 "),a("code",[t._v("ReactiveEffect")]),t._v(" 关联关系的先决条件，在选项式 API 中，我们访问组件的响应式数据都需要通过 "),a("code",[t._v("this")]),t._v(" 进行访问，相当于这些数据都存在 "),a("code",[t._v("this")]),t._v(" 这个必要的"),a("strong",[t._v("父级")]),t._v("，因此我们在使用 "),a("code",[t._v("$set/$delete")]),t._v(" 进行对对象进行新增/删除属性或对数组进行修改时都能得到符合预期的结果，唯一的限制在于不能新增/删除根级数据属性，原因就在于 "),a("code",[t._v("this")]),t._v(" 不存在访问它的父级。")]),t._v(" "),a("p",[t._v("但是在组合式 API 中，我们不需要通过 "),a("code",[t._v("this")]),t._v(" 访问响应式数据，因此通过 "),a("code",[t._v("reactive()")]),t._v(" 创建的响应式数据本身就是根级数据，我们自然无法通过上述方式感知到根级数据自身的变化（在 Vue3 中，基于 "),a("code",[t._v("proxy")]),t._v(" 提供的强大能力响应式系统能够精确地感知到数据属性，甚至是当前不存在属性的访问与修改，不需要为数据自身建立 "),a("code",[t._v("Dep")]),t._v(" 对象，自然也不存在相关问题）。")]),t._v(" "),a("p",[t._v("在这种情况下，我们就需要用 "),a("code",[t._v("ref()")]),t._v(" 创建响应式数据，因为 "),a("code",[t._v("ref")]),t._v(" 创建了一个包装对象，我们永远需要通过 "),a("code",[t._v(".value")]),t._v(" 来访问其持有的数据（不管是显式访问还是隐式自动解包），这样就能保证 "),a("code",[t._v("ref")]),t._v(" 数据自身的变化能够被响应式系统感知，因此也不会遇到上面描述的问题，如下所示：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,1,2,3]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,3,2,3]")]),t._v("\n\nstate"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,3,2,3,4]")]),t._v("\n")])])]),a("h3",{attrs:{id:"响应式-api-与-vue3-中的区别"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api-与-vue3-中的区别"}},[t._v("#")]),t._v(" 响应式 API 与 Vue3 中的区别")]),t._v(" "),a("p",[t._v("我们来总结一下 Mpx 中响应式 API 与 Vue3 中的区别：")]),t._v(" "),a("ul",[a("li",[t._v("不支持 "),a("code",[t._v("raw")]),t._v(" 相关 API（"),a("code",[t._v("markRaw")]),t._v(" 除外，我们提供了该 API 用于跳过部分数据的响应式转换）")]),t._v(" "),a("li",[t._v("不支持 "),a("code",[t._v("readonly")]),t._v(" 相关 API")]),t._v(" "),a("li",[t._v("不支持 "),a("code",[t._v("watchEffect")]),t._v("、"),a("code",[t._v("watch")]),t._v("、"),a("code",[t._v("computed")]),t._v(" 的调试选项")]),t._v(" "),a("li",[t._v("不支持对 "),a("code",[t._v("map")]),t._v("、"),a("code",[t._v("set")]),t._v(" 等集合类型进行响应式转换")]),t._v(" "),a("li",[t._v("受到 "),a("code",[t._v("Object.defineProperty")]),t._v(" 实现带来的数据响应限制影响")])]),t._v(" "),a("p",[t._v("关于响应式 API 的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/reactive-api.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"生态周边适配"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#生态周边适配"}},[t._v("#")]),t._v(" 生态周边适配")]),t._v(" "),a("p",[t._v("除了 Mpx 运行时核心提供了组合式 API 支持外，我们对 Mpx 的周边生态能力也都进行了组合式 API 适配支持，包括 "),a("code",[t._v("store")]),t._v("、"),a("code",[t._v("i18n")]),t._v("、"),a("code",[t._v("fetch")]),t._v(" 等。")]),t._v(" "),a("h3",{attrs:{id:"pinia-store-支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pinia-store-支持"}},[t._v("#")]),t._v(" Pinia store 支持")]),t._v(" "),a("p",[t._v("Pinia 是基于组合式 API 设计的全新数据管理方案，目前已经取代 Vuex 成为 Vue3 官方推荐的 store，我们在研究了 pinia 的设计实现后，对其简练优雅的设计思想及其与组合式 API 的高度适配非常满意（特别是在使用 "),a("code",[t._v("setup")]),t._v(" 函数创建 store 时，使用心智与编写组件完全一致，可以将其视作是没有视图的组件）。因此我们 fork 了 pinia 的源码仓库，基于 Mpx 提供的数据响应能力对其进行了适配改造，使其在 Mpx 环境下也能正常运行，目前相关代码维护在 "),a("code",[t._v("@mpxjs/pinia")]),t._v(" 中，在组合式 API 中的简单使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineStore "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用组合式 API 创建 pinia store 的使用心智与 setup 函数完全一致，强烈推荐")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" useSetupStore "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineStore")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setup'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" doubleCount "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" increment "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("useSetupStore")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// store 同 props 类似是一个 reactive 对象，解构数据需使用 toRefs 以保持数据响应性")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("store"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 方法可以直接解构")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" increment "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store\n  \n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" increment "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Mpx 中通过 "),a("code",[t._v("createStore")]),t._v(" 创建的类 Vuex store 在组合式 API 中仍然可以使用，我们可以在 "),a("code",[t._v("setup")]),t._v(" 函数中引用 store 实例进行"),a("a",{attrs:{href:"https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api",target:"_blank",rel:"noopener noreferrer"}},[t._v("数据读取与方法调用"),a("OutboundLink")],1),t._v("，不过整体使用体验与 pinia store 存在较大差距，我们还是推荐在组合式 API 开发中优先使用 pinia store 作为数据管理方案。")]),t._v(" "),a("h3",{attrs:{id:"i18n-支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#i18n-支持"}},[t._v("#")]),t._v(" I18n 支持")]),t._v(" "),a("p",[t._v("传统选项式 API 中，我们使用 "),a("code",[t._v("this.$t")]),t._v(" 方法在组件内调用翻译函数，但在组合式 API 中我们无法访问 "),a("code",[t._v("this")]),t._v("，为此我们参考了 Vue I18n 最新的 9.x 版本，该版本针对 Vue3 及组合式 API 进行了重构适配，提供了全新的 "),a("code",[t._v("useI18n")]),t._v(" API，简单使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('message.hello')}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("changeLocale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("change locale"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// useI18n 不传参数时指向全局 i18n 对象，也可以传递 locale 和 messages 配置创建局部 i18n 对象")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" locale "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("changeLocale")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回的翻译方法名必须为 t，不能进行重命名")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" changeLocale "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("blockquote",[a("p",[t._v("上面示例代码看上去像是我们在模板上直接调用 setup() 返回的 t 翻译方法，但是熟悉小程序开发的同学都知道在小程序架构下这是不可能的，示例中的写法其实由框架通过编译 + 运行时手段实现的语法糖，我们会在模板编译时定向扫描 t/te/tm 等 i18n 方法，将其转换为计算属性注入到运行时当中，这就意味着如果我们对翻译方法进行重命名，模板编译时无法识别出 i18n 方法调用，自然也就无法正常运行。")])]),t._v(" "),a("p",[t._v("Mpx 中 i18n 提供了两种实现模式，分别是 wxs 和 computed，可以使用编译选项中的 "),a("code",[t._v("i18n.isComputed")]),t._v(" 进行切换，两种方式各有优劣，其中：")]),t._v(" "),a("ul",[a("li",[t._v("wxs 模式的优势在于逻辑层和视图层独立维护语言集，无额外运行时性能开销，且使用没有任何限制；劣势同样源于语言集同时存在于逻辑层（js）和视图层（wxs）当中，这部分的包体积占用翻倍；")]),t._v(" "),a("li",[t._v("computed 模式的优势在于语言集只存在于逻辑层中，无额外包体积占用，且可以通过动态添加语言集的方式进一步减少包体积占用；劣势则是会产生额外的运行时性能开销，且使用上存在限制，模板调用时无法直接访问 "),a("code",[t._v("wx:for")]),t._v(" 中的 "),a("code",[t._v("item")]),t._v(" 和 "),a("code",[t._v("index")]),t._v("。")])]),t._v(" "),a("p",[t._v("在组合式 API 中模板上使用 "),a("code",[t._v("useI18n()")]),t._v(" 返回的翻译函数 "),a("code",[t._v("t/te/tm")]),t._v(" 时，为了完整实现 "),a("code",[t._v("useI18n")]),t._v(" API的功能，会强制使用 computed 模式进行实现，这也意味着该用法会受到 computed 模式使用限制的影响。不过当你不需要使用 "),a("code",[t._v("useI18n")]),t._v(" 接受 "),a("code",[t._v("messages")]),t._v(" 参数创建局部语言集作用域功能时，你也完全可以在模板中继续使用原有的 "),a("code",[t._v("$t/$tc/$te/$tm")]),t._v(" 方法，这些方法受编译选项 "),a("code",[t._v("i18n.isComputed")]),t._v(" 的影响，同时指向全局语言集作用域。")]),t._v(" "),a("p",[t._v("更多关于生态周边的组合式 API 使用指南可以点击下方链接查看详情：")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api",target:"_blank",rel:"noopener noreferrer"}},[t._v("store"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://mpxjs.cn/guide/advance/i18n.html#composition-api-usage",target:"_blank",rel:"noopener noreferrer"}},[t._v("i18n"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://mpxjs.cn/guide/extend/fetch.html#composition-api-usage",target:"_blank",rel:"noopener noreferrer"}},[t._v("fetch"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"输出-web-适配"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#输出-web-适配"}},[t._v("#")]),t._v(" 输出 web 适配")]),t._v(" "),a("p",[t._v("跨端输出 web 作为 Mpx 的一大核心特性，在业务中存在广泛使用，同时也是我们设计实现任何框架新特性需要优先考虑的事项。在本次组合式 API 支持中，我们从设计之初就考虑了跨端输出 web 的适配支持，保障使用 Mpx 组合式 API 开发的业务代码都能在 web 环境中正常运行。")]),t._v(" "),a("p",[t._v("我们输出 web 的整体技术方向在于尽可能复用 Vue 已有的生态能力，为了实现这个目标，我们需要提供尽可能与 Vue 保持一致的 API 设计，以降低抹平适配成本。在输出 web 时，核心组合式 API 基于 Vue2.7 版本中的已有能力进行适配提供，简单举个例子：对于 "),a("code",[t._v("import { ref } from 'mpxjs/core'")]),t._v(" 这行语句，在小程序中会指向 Mpx 内部维护的 "),a("code",[t._v("ref")]),t._v(" 实现，而在输出 web 时会指向 Vue 中维护的 "),a("code",[t._v("ref")]),t._v(" 实现，两者的实现虽然不仅相同，但只要保障对外函数签名一致，对于开发者用户来说就无感知。")]),t._v(" "),a("p",[t._v("我们借助了 Mpx 强大的条件编译能力进行上述实现，对运行时导出根据输出平台进行重定向，这样还能保障跨端输出产物干净简洁，仅包含当前输出环境下必要的逻辑，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/E0FojaPKOxZOa5h5OEPQk_composition-api-web.png",alt:"composition-api-web"}})]),t._v(" "),a("p",[t._v("同理，我们也采用了类似的方式实现了组合式 API 周边能力对于输出 web 的适配支持，如pinia store 使用 pinia 原始版本进行适配实现，而 i18n 能力则是使用 vue-i18n@8.x + vue-i18n-bridge 进行适配实现。")]),t._v(" "),a("h2",{attrs:{id:"性能表现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#性能表现"}},[t._v("#")]),t._v(" 性能表现")]),t._v(" "),a("p",[t._v("性能是 Mpx 一直以来的核心关注点，我们对组合式 API 的最终实现版本进行了一系列性能评估测试，我们使用组合式 API 版本对业务中的评价组件进行了重构，评价组件属于我们业务中交互及功能相对比较复杂的组件，源码行数约 1000 行，组件数据 27 项，组件方法 18 个，我们在测试项目中对选项式 API 和组合式 API 两个版本实现的组件进行了一系列测试。")]),t._v(" "),a("h3",{attrs:{id:"组件初始化耗时"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件初始化耗时"}},[t._v("#")]),t._v(" 组件初始化耗时")]),t._v(" "),a("p",[t._v("由于组合式 API 改变了原有的组件初始化流程，我们对组件的初始化耗时进行了重点测试，测试口径如下：")]),t._v(" "),a("ul",[a("li",[t._v("耗时计算以挂载组件为起点，以组件 "),a("code",[t._v("ready")]),t._v(" 执行为终点")]),t._v(" "),a("li",[t._v("测试结果为10次手工测试排除最大最小值后求均值")]),t._v(" "),a("li",[t._v("IOS 测试机型为 iPhone 13 pro max，安卓测试机型为 OPPO R9")])]),t._v(" "),a("p",[t._v("结果显示两个版本的组件初始化耗时大抵持平，不分优劣。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th"),t._v(" "),a("th",[t._v("IOS")]),t._v(" "),a("th",[t._v("安卓")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("选项式 API")]),t._v(" "),a("td",[t._v("42.5ms")]),t._v(" "),a("td",[t._v("366.6ms")])]),t._v(" "),a("tr",[a("td",[t._v("组合式 API")]),t._v(" "),a("td",[t._v("42.4ms")]),t._v(" "),a("td",[t._v("370.1ms")])])])]),t._v(" "),a("h3",{attrs:{id:"组件-js-体积"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件-js-体积"}},[t._v("#")]),t._v(" 组件 JS 体积")]),t._v(" "),a("p",[t._v("在构建产物体积方面，由于组合式 API 的写法对于 JS 代码压缩更加有利，同样的逻辑实现下，组合式 API 版本的组件构建压缩后 JS 体积略胜一筹。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th"),t._v(" "),a("th",[t._v("组件 JS 体积")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("选项式 API")]),t._v(" "),a("td",[t._v("15.67KB")])]),t._v(" "),a("tr",[a("td",[t._v("组合式 API")]),t._v(" "),a("td",[t._v("13.60KB")])])])]),t._v(" "),a("h3",{attrs:{id:"框架运行时体积"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#框架运行时体积"}},[t._v("#")]),t._v(" 框架运行时体积")]),t._v(" "),a("p",[t._v("在 Mpx2.8 版本中，我们在框架运行时中新增了组合式 API 相关实现，不过通过优化运行时导出，使其对 tree shaking 更加友好，我们的框架运行时体积在实际构建产物中没有产生太大增长。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th"),t._v(" "),a("th",[t._v("框架运行时体积")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("选项式 API")]),t._v(" "),a("td",[t._v("51.66KB")])]),t._v(" "),a("tr",[a("td",[t._v("组合式 API")]),t._v(" "),a("td",[t._v("57.47KB")])])])]),t._v(" "),a("p",[t._v("综上所述，组合式 API 版本的运行时性能与选项式 API 大抵持平，在包体积占用方面，新版框架运行时体积占用略有提升，不过由于组合式 API 开发模式对代码压缩更友好，加上组合式 API 更易进行逻辑复用的特点，我们预计在实际业务项目中，组合式 API 的包体积占用会更小。")]),t._v(" "),a("h2",{attrs:{id:"破坏性改变"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#破坏性改变"}},[t._v("#")]),t._v(" 破坏性改变")]),t._v(" "),a("p",[t._v("Mpx 组合式 API 版本完全兼容原有的选项式 API 开发方式，不过我们在运行时重构过程中依然带来了少量的破坏性改变，详情如下：")]),t._v(" "),a("ul",[a("li",[t._v("框架过往提供的组件增强生命周期 "),a("code",[t._v("pageShow/pageHide")]),t._v(" 与微信原生提供的 "),a("code",[t._v("pageLifetimes.show/hide")]),t._v(" 完全对齐，不再提供组件初始挂载时必定执行 "),a("code",[t._v("pageShow")]),t._v(" 的保障（因为组件可能在后台页面进行挂载），相关初始化逻辑一定不要放置在 "),a("code",[t._v("pageShow")]),t._v(" 当中；")]),t._v(" "),a("li",[t._v("取消了框架过去提供的基于内部生命周期实现的非标准增强生命周期，如 "),a("code",[t._v("beforeCreate/onBeforeCreate")]),t._v(" 等，直接将内部生命周期变量导出提供给用户使用，详情查看"),a("a",{attrs:{href:"https://mpxjs.cn/api/global-api.html#built-in-lifecycle-variable",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v(";")]),t._v(" "),a("li",[t._v("为了优化 tree shaking，作为框架运行时 "),a("code",[t._v("default export")]),t._v(" 的 "),a("code",[t._v("Mpx")]),t._v(" 对象不再挂载 "),a("code",[t._v("createComponent/createStore")]),t._v(" 等运行时方法，一律通过 "),a("code",[t._v("named export")]),t._v(" 提供，"),a("code",[t._v("Mpx")]),t._v(" 对象上仅保留 "),a("code",[t._v("set/use")]),t._v(" 等全局 API，详情查看"),a("a",{attrs:{href:"https://mpxjs.cn/api/global-api.html#global-mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("；")]),t._v(" "),a("li",[t._v("使用 I18n 能力时，为了与新版 vue-i18n 保持对齐，"),a("code",[t._v("this.$i18n")]),t._v(" 对象指向全局作用域，如需创建局部作用域需要使用组合式 API "),a("code",[t._v("useI18n")]),t._v(" 的方式进行创建。")]),t._v(" "),a("li",[a("code",[t._v("watch")]),t._v(" API 不再接受第二个参数为带有 "),a("code",[t._v("handler")]),t._v(" 属性的对象形式（该参数形式只应存在于 "),a("code",[t._v("watch")]),t._v(" option 中），第二个参数必须为回调函数，与 "),a("a",{attrs:{href:"https://vuejs.org/api/reactivity-core.html#watch",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue"),a("OutboundLink")],1),t._v(" 对齐。")])]),t._v(" "),a("p",[t._v("更详细的迁移指南请点击查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/migrate/2.8.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"未来规划"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#未来规划"}},[t._v("#")]),t._v(" 未来规划")]),t._v(" "),a("p",[t._v("目前 Mpx2.8 版本已经在以滴滴出行小程序和花小猪小程序为代表的集团小程序业务中稳定全面落地，并在新的业务迭代中大范围使用了组合式 API，使用反馈良好，在社区内也产出了多个成功案例。")]),t._v(" "),a("p",[t._v("在完成持久化构建缓存和组合式 API 两个重大技术升级后，我们未来的技术规划如下：")]),t._v(" "),a("ul",[a("li",[t._v("组合式 API 工具库 @mpxjs/use")]),t._v(" "),a("li",[t._v("内置原子类支持")]),t._v(" "),a("li",[t._v("输出 web 支持 SSR")]),t._v(" "),a("li",[t._v("输出 web 支持使用 Vite 构建")]),t._v(" "),a("li",[t._v("跨端输出 Hummer 合入主干正式 release")]),t._v(" "),a("li",[t._v("优化运行时 render 函数，降低包体积占用")]),t._v(" "),a("li",[t._v("跨端库 @mpxjs/cube-ui 开源")])]),t._v(" "),a("p",[t._v("最后，再次感谢所有参与 Mpx 组合式 API 技术建设的同学们，也欢迎社区同学一同加入 Mpx 项目开源共建。")])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/51.90dfa84e.js b/docs-vuepress/.vuepress/dist/assets/js/51.90dfa84e.js
new file mode 100644
index 0000000000..de06ba1e2c
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/51.90dfa84e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{398:function(t,a,s){"use strict";s.r(a);var e=s(4),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"mpx2-8-版本正式发布-使用组合式-api-开发小程序"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mpx2-8-版本正式发布-使用组合式-api-开发小程序"}},[t._v("#")]),t._v(" Mpx2.8 版本正式发布，使用组合式 API 开发小程序")]),t._v(" "),a("blockquote",[a("p",[t._v("作者："),a("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[t._v("hiyuki"),a("OutboundLink")],1)])]),t._v(" "),a("p",[t._v("小程序跨端开发框架 "),a("a",{attrs:{href:"https://www.mpxjs.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx"),a("OutboundLink")],1),t._v(" 自18年立项开源以来，如今已经走过了第四个年头，其高性能、优体验、跨平台的特性收获了公司内外开发者用户的一致好评。")]),t._v(" "),a("p",[t._v("为了不辜负开发者用户对我们的信赖，更好地支持集团小程序业务开发，一方面我们对 Mpx 的稳定版本进行着高频的维护迭代，快速响应处理集团内外开发者用户在框架开发使用过程中遇到的问题；另一方面我们持续跟进探索业内最新动态，力争将更新更好的开发能力与体验带给小程序开发者用户。继年初我们在 "),a("a",{attrs:{href:"https://mpxjs.cn/guide/migrate/2.7.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("2.7 版本"),a("OutboundLink")],1),t._v("中对 Mpx 的编译系统进行重构适配 Webpack5，基于持久化缓存大幅提升编译速度后，在最新的 "),a("a",{attrs:{href:"https://mpxjs.cn/guide/migrate/2.8.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("2.8 版本"),a("OutboundLink")],1),t._v("中，我们对 Mpx 的运行时框架也进行了大量重构改造工作，完整支持了 Vue3 提出的组合式 API 开发范式，让用户能够使用当下最热门的开发方式进行小程序开发，我们先来简单感受一下组合式 API 的使用：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ collectionName }}: {{ book.title }}({{ readersNumber }})"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addReaders"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("addReaders"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("collectionName")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" readersNumber "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" book "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Mpx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Component mounted.'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 暴露给 template")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        readersNumber"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        book"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addReaders")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          readersNumber"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("可以看出和 Vue3 组合式 API 的使用是高度类似的，利用框架导出的一系列响应式 API 和 生命周期钩子函数在 "),a("code",[t._v("setup")]),t._v(" 中编写业务逻辑，并将模板依赖的数据与方法作为返回值返回，与传统的选项式 API 相比，组合式 API 具备以下优势：")]),t._v(" "),a("ul",[a("li",[t._v("更好的逻辑复用，通过函数包装复用逻辑，显式引入调用，方便简洁且符合直觉，规避消除了 mixins 复用中存在的缺陷；")]),t._v(" "),a("li",[t._v("更灵活的代码组织，相比于选项式 API 提前规定了代码的组织方式，组合式 API 在这方面几乎没有做任何限制与规定，更加灵活自由，在功能复杂的庞大组件中，我们能够通过组合式 API 让我们的功能代码更加内聚且有条理，不过这也会对开发者自身的代码规范意识提出更高要求；")]),t._v(" "),a("li",[t._v("更好的类型推导，虽然基于 "),a("code",[t._v("this")]),t._v(" 的选项式 API 通过 "),a("code",[t._v("ThisType")]),t._v(" 类型体操的方式也能在一定程度上实现 TS 类型推导，但推导和实现成本较高，同时仍然无法完美覆盖一些复杂场景（如嵌套 mixins 等）；而组合式 API 以本地变量和函数为基础，本身就是类型友好的，我们在类型方面几乎不需要做什么额外的工作就能享受到完美的类型推导。")])]),t._v(" "),a("p",[t._v("同时与 React Hooks 相比，组合式 API 中的 "),a("code",[t._v("setup")]),t._v(" 函数只在初始化时单次执行，在数据响应能力的加持下大大降低了理解与使用成本，基于以上原因，我们决定为 Mpx 添加组合式 API 能力，让用户能够用组合式 API 方式进行小程序开发。")]),t._v(" "),a("h2",{attrs:{id:"组合式-api-实现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-实现"}},[t._v("#")]),t._v(" 组合式 API 实现")]),t._v(" "),a("p",[t._v("从上面的简单示例中可以看出，抛开响应式 API 和生命周期注册模式的变化，组合式 API 的实现要点在于动态添加模板依赖的数据和方法，这也是我们在小程序中实现组合式 API 可能遇到的核心技术卡点。")]),t._v(" "),a("p",[t._v("对于动态添加模板依赖数据，我们在过去的实践中已经充分证明了其可行性，事实上，从 Mpx 最初的版本开始，我们就充分利用了这项能力来实现我们对计算属性和 "),a("code",[t._v("dataFn")]),t._v(" （类似于 Vue 使用函数定义 "),a("code",[t._v("data")]),t._v("）的支持，这项能力的关键在于存在合适的生命周期用于动态添加初始化数据，这里对于初始化数据的定义是能够影响组件树的初始渲染，举个简单的例子：存在一对父子组件 parent/child，parent 使用 "),a("code",[t._v("props")]),t._v(" 向 child 传递数据，当我们在 parent 初始创建时使用 "),a("code",[t._v("setData")]),t._v(" 动态添加 "),a("code",[t._v("props")]),t._v(" 数据，同时 child 在初始创建时能够通过 "),a("code",[t._v("props")]),t._v(" 正确获取到这部分的数据时，我们就可以将这部分动态添加的数据视作初始化数据，这是我们在小程序中实现完备数据响应支持的基础。")]),t._v(" "),a("p",[t._v("幸运的是，目前业内所有主流小程序平台（微信/支付宝/百度/字节/QQ）都支持了上述能力，微信从一开始就支持在 "),a("code",[t._v("attached")]),t._v(" 生命周期中调用 "),a("code",[t._v("setData")]),t._v(" 函数动态添加初始化数据，在上述的父子 "),a("code",[t._v("props")]),t._v(" 传递场景中，也能够在子组件的 "),a("code",[t._v("attached")]),t._v(" 中正确获取这部分数据，支付宝和字节小程序一开始并不支持该能力，不过支付宝在 "),a("code",[t._v("component2")]),t._v(" 组件系统重构后，字节在橙心合作项目中与我们沟通后，都成功支持了该能力。")]),t._v(" "),a("p",[t._v("而对于动态返回的方法，最简单能想到的方案就是直接挂载到组件实例上，经过我们的完整测试，上述业内主流小程序平台都支持使用这种方式动态添加方法，基于以上事实，我们非常确定组合式 API 能够在小程序环境中顺利实现，下图简要展示了 Mpx 支持组合式 API 的初始化流程：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/0bxxw8bB9PJxXLeiMQ__6_composition-api-init.png",alt:"composition-api-init"}})]),t._v(" "),a("h3",{attrs:{id:"生命周期钩子函数"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#生命周期钩子函数"}},[t._v("#")]),t._v(" 生命周期钩子函数")]),t._v(" "),a("p",[t._v("在组合式 API 中，"),a("code",[t._v("setup")]),t._v(" 函数只有在组件创建时初始化单次执行，因此需要提供一系列生命周期钩子函数来代替选项式 API 中的生命周期钩子选项，由于小程序原生只支持选项式的生命周期注册方式，我们通过"),a("code",[t._v("预注册 -> 驱动")]),t._v("的方式来实现 "),a("code",[t._v("setup")]),t._v(" 中函数式注册生命周期钩子的语法糖，简单来讲就是使用选项式 "),a("code",[t._v("mixins")]),t._v(" 的方式提前注册所有需要的生命周期钩子，在选项式生命周期钩子执行时驱动对应在 "),a("code",[t._v("setup")]),t._v(" 中使用生命周期钩子函数注册的代码逻辑执行，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/2nmOjxvubyk6H32yP5cFc_composition-api-hook.png",alt:"composition-api-hook"}})]),t._v(" "),a("p",[t._v("作为跨端小程序框架，Mpx 需要兼容不同小程序平台不同的生命周期，在选项式 API 中，我们在框架中内置了一套统一的生命周期，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异，如微信小程序的 "),a("code",[t._v("attached")]),t._v(" 钩子和支付宝小程序的 "),a("code",[t._v("onInit")]),t._v(" 钩子，在组合式 API 中，我们沿用了同样的逻辑，设计了一套与框架内置生命周期对应的生命周期钩子函数，以相同的方式进行驱动，因此这些生命周期钩子函数天然具备了跨平台特性，下表显示了在组件 / 页面中框架生命周期与原生平台生命周期的对应关系：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("框架内置生命周期")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("Hooks in "),a("code",[t._v("setup")])]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("微信原生")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("支付宝原生")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFORECREATE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")])]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("attached（数据响应初始化前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onInit（数据响应初始化前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("CREATED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")])]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("attached（数据响应初始化后）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onInit（数据响应初始化后）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREMOUNT")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeMount")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("ready（"),a("code",[t._v("MOUNTED")]),t._v(" 执行前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didMount（"),a("code",[t._v("MOUNTED")]),t._v(" 执行前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("MOUNTED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onMounted")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("ready（"),a("code",[t._v("BEFOREMOUNT")]),t._v(" 执行后）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didMount（"),a("code",[t._v("BEFOREMOUNT")]),t._v(" 执行后）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREUPDATE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeUpdate")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" 执行前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" 执行前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("UPDATED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onUpdated")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" callback）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" callback）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREUNMOUNT")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeUnmount")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("detached（数据响应销毁前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didUnmount（数据响应销毁前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("UNMOUNTED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onUnmounted")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("detached（数据响应销毁后）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didUnmount（数据响应销毁后）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONLOAD")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONSHOW")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONHIDE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONRESIZE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("events.onResize")])])])]),t._v(" "),a("blockquote",[a("p",[t._v("同 Vue3 一样，Mpx 在组合式 API 中没有提供 "),a("code",[t._v("BEFORECREATE")]),t._v(" 和 "),a("code",[t._v("CREATED")]),t._v(" 对应的生命周期钩子函数，用户可以直接在 "),a("code",[t._v("setup")]),t._v(" 中编写相关逻辑。")])]),t._v(" "),a("h4",{attrs:{id:"具有副作用的页面事件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#具有副作用的页面事件"}},[t._v("#")]),t._v(" 具有副作用的页面事件")]),t._v(" "),a("p",[t._v("在小程序中，一些页面事件的注册存在副作用，即该页面事件注册与否会产生实质性的影响，比如微信中的 "),a("code",[t._v("onShareAppMessage")]),t._v(" 和 "),a("code",[t._v("onPageScroll")]),t._v("，前者在不注册时会禁用当前页面的分享功能，而后者在注册时会带来视图与逻辑层之间的线程通信开销，对于这部分页面事件，我们无法通过"),a("code",[t._v("预注册 -> 驱动")]),t._v("方式提供组合式 API 的注册方式，用户可以通过选项式 API 的方式来注册使用，通过 "),a("code",[t._v("this")]),t._v(" 访问组合式 API "),a("code",[t._v("setup")]),t._v(" 函数的返回。")]),t._v(" "),a("p",[t._v("然而这种使用方式显然不够优雅，我们考虑是否可以通过一些非常规的方式提供这类副作用页面事件的组合式 API 注册支持，例如，借助编译手段。我们在运行时提供了副作用页面事件的注册函数，并在编译时通过 "),a("code",[t._v("babel")]),t._v(" 插件的方式解析识别到当前页面中存在这些特殊注册函数的调用时，通过框架已有的"),a("code",[t._v("编译 -> 运行时注入")]),t._v("的方式将事件驱动逻辑添加到当前页面当中，以提供相对优雅的副作用页面事件在组合式 API 中的注册方式，同时不产生非预期的副作用影响，简单示例如下：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onShareAppMessage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShareAppMessage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'页面分享'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      count\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("目前我们通过这种方式支持的页面事件如下：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("页面事件")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("Hooks in "),a("code",[t._v("setup")])]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("平台支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareAppMessage")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareAppMessage")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信/支付宝/百度/QQ")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onAddToFavorites")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onAddToFavorites")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信 / QQ")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareTimeline")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareTimeline")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onSaveExitState")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onSaveExitState")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信")])])])]),t._v(" "),a("blockquote",[a("p",[a("strong",[t._v("特别注意")]),t._v("，由于静态编译分析实现方式的限制，这类页面事件的组合式 API 使用需要满足页面事件注册函数（如"),a("code",[t._v("onShareAppMessage")]),t._v("）的调用和 "),a("code",[t._v("createPage")]),t._v(" 的调用位于同一个 js 文件当中。")])]),t._v(" "),a("p",[t._v("关于生命周期钩子函数的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h3",{attrs:{id:"script-setup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#script-setup"}},[t._v("#")]),t._v(" "),a("code",[t._v("<script setup>")])]),t._v(" "),a("p",[t._v("同 Vue3 一样，我们在 "),a("code",[t._v(".mpx")]),t._v(" 单文件组件 / 页面中实现了 "),a("code",[t._v("<script setup>")]),t._v(" 的组合式 API 编译语法糖，相较于常规的写法，"),a("code",[t._v("<script setup>")]),t._v(" 具备以下优势：")]),t._v(" "),a("ul",[a("li",[t._v("更少的样板内容，更简洁的代码")]),t._v(" "),a("li",[t._v("能够使用纯 TypeScript 声明 props 类型")]),t._v(" "),a("li",[t._v("更好的 IDE 类型推导性能")])]),t._v(" "),a("p",[t._v("简单使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" msg "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("msg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("msg: {{msg}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ontap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("log"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("可以看到使用方式与 Vue3 基本一致，不过由于 Mpx 的组合式 API 设计实现与 Vue3 存在差异，对应 "),a("code",[t._v("<script setup>")]),t._v(" 也与 Vue3 中存在一些差异：")]),t._v(" "),a("ul",[a("li",[t._v("不支持 "),a("code",[t._v("import")]),t._v(" 快捷注册组件")]),t._v(" "),a("li",[t._v("没有 "),a("code",[t._v("defineEmits()")]),t._v(" 编译宏")]),t._v(" "),a("li",[t._v("没有 "),a("code",[t._v("useSlots()")]),t._v(" 和 "),a("code",[t._v("useAttrs()")]),t._v(" 运行时函数")]),t._v(" "),a("li",[t._v("以编译宏的形式提供了 "),a("code",[t._v("useContext()")]),t._v("，获取 "),a("code",[t._v("setup")]),t._v(" 函数的第二个参数 "),a("code",[t._v("context")])]),t._v(" "),a("li",[a("code",[t._v("defineExpose()")]),t._v(" 编译宏的作用与 Vue3 中有所差别，能够限定模板中能访问的变量范围")])]),t._v(" "),a("blockquote",[a("p",[a("strong",[t._v("特别注意")]),t._v("，受小程序底层技术限制，我们在 Mpx 的实现中无法像 Vue3 那样将模板编译的渲染函数和 "),a("code",[t._v("<script setup>")]),t._v(" 放置到同一作用域下进行变量访问，而是通过静态编译分析提取出 "),a("code",[t._v("<script setup>")]),t._v(" 的顶层作用域变量，再以上文中提到的动态添加数据与方法的方式将其设置到模板当中，如果 "),a("code",[t._v("<script setup>")]),t._v(" 中声明了较多顶层作用域变量，它们并不一定都会被模板访问，就会带来无效的性能开销，因此我们强烈建议使用 "),a("code",[t._v("defineExpose()")]),t._v(" 限定模板中能访问的变量范围，你可以把它等同于 "),a("code",[t._v("setup")]),t._v(" 函数中的 "),a("code",[t._v("return")]),t._v("。")])]),t._v(" "),a("p",[t._v("关于 "),a("code",[t._v("<script setup>")]),t._v(" 的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h3",{attrs:{id:"组合式-api-与-vue3-中的差异"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-与-vue3-中的差异"}},[t._v("#")]),t._v(" 组合式 API 与 Vue3 中的差异")]),t._v(" "),a("p",[t._v("我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("setup")]),t._v(" 的 "),a("code",[t._v("context")]),t._v(" 参数不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#context",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("code",[t._v("setup")]),t._v(" 不支持返回"),a("strong",[t._v("渲染函数")])]),t._v(" "),a("li",[a("code",[t._v("setup")]),t._v(" 不能是异步函数")]),t._v(" "),a("li",[a("code",[t._v("<script setup>")]),t._v(" 提供的宏方法不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("code",[t._v("<script setup>")]),t._v(" 不支持 "),a("code",[t._v("import")]),t._v(" 快捷注册组件")]),t._v(" "),a("li",[t._v("支持的生命周期钩子不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("li",[t._v("模板引用的方式不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#template-ref",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)])]),t._v(" "),a("p",[t._v("关于组合式 API 的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"响应式-api-实现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api-实现"}},[t._v("#")]),t._v(" 响应式 API 实现")]),t._v(" "),a("p",[t._v("组合式 API 的正常工作离不开响应式 API 的支持，下面我们来聊聊 Mpx 中响应式 API 的设计实现。我们知道 Vue3 中响应式 API 基于 "),a("code",[t._v("proxy")]),t._v(" 进行了重构实现，但是目前 "),a("code",[t._v("proxy")]),t._v(" 的浏览器兼容占比仍然无法达到我们对于线上可用性的要求，因此在 Mpx 中，我们仍然基于 "),a("code",[t._v("Object.defineProperty")]),t._v(" 进行核心数据响应能力的实现，同时借鉴了 Vue3 中优秀的代码设计与实现，如 "),a("code",[t._v("reactiveEffect")]),t._v(" 和 "),a("code",[t._v("effectScope")]),t._v(" 等，尽可能实现与 Vue3 中响应式 API 能力对齐。")]),t._v(" "),a("p",[t._v("说到这里，很多同学可能会想到 "),a("code",[t._v("@vue/composition-api")]),t._v(" 这个库，该库提供的关键能力正是基于 Vue2 的数据响应系统模拟实现 Vue3 中的响应式 API，我们在前期也对 "),a("code",[t._v("@vue/composition-api")]),t._v(" 在 Mpx 中的复用进行了非常有价值的探索尝试。不过最终我们还是决定在 Mpx 的运行时框架中进行独立实现，原因主要在于："),a("code",[t._v("@vue/composition-api")]),t._v(" 是作为一个 Vue2 插件存在，无法直接侵入 Vue2 源码，导致部分能力无法实现或会带来额外的性能开销，例如 "),a("code",[t._v("flush: 'post'")]),t._v(" 和 "),a("code",[t._v("ref")]),t._v(" 自动解包等。我们也看到在最新的 Vue2.7 版本中，也是在运行时框架里重新实现了这部分内容，以规避上述问题。")]),t._v(" "),a("p",[t._v("下图展示了 Mpx 中响应式 API 核心模块依赖关系：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/4ySdEqTRhc_DRWWCJWrhJ_composition-api-reactive.png",alt:"composition-api-reactive"}})]),t._v(" "),a("h3",{attrs:{id:"数据响应限制带来的差异"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#数据响应限制带来的差异"}},[t._v("#")]),t._v(" 数据响应限制带来的差异")]),t._v(" "),a("p",[t._v("由于 "),a("code",[t._v("Object.defineProperty")]),t._v(" 的能力限制，Mpx 存在和 Vue2 一致的数据响应限制，无法感知到对象 property 的添加和删除以及数组的索引赋值，与 Vue2 一致，我们暴露了 "),a("code",[t._v("set")]),t._v(" 和 "),a("code",[t._v("del")]),t._v(" API 来让用户显式地进行相关操作。除此之外，由于使用方式发生了变化，我们在使用 "),a("code",[t._v("reactive")]),t._v(" API 创建响应式数据时，还会遇到新的限制，我们来看一下代码示例：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,1,2,3]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发 watchEffect")]),t._v("\n\nstate"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发 watchEffect")]),t._v("\n")])])]),a("p",[t._v("可以看出，即使我们使用了 "),a("code",[t._v("set")]),t._v(" API 和数组原型方法对数组进行修改，我们仍然无法监听到数据变化。")]),t._v(" "),a("blockquote",[a("p",[t._v("相同的限制在使用 "),a("code",[t._v("Object.defineProperty")]),t._v(" 的 Vue2.7 中也同样存在。")])]),t._v(" "),a("p",[t._v("为什么会存在这个限制呢？原因在于：基于 "),a("code",[t._v("Object.defineProperty")]),t._v(" 实现的数据响应系统中，我们会对对象的每个已有属性创建了一个 "),a("code",[t._v("Dep")]),t._v(" 对象，在对该属性进行 "),a("code",[t._v("get")]),t._v(" 访问时通过这个对象将其与依赖它的观察者 "),a("code",[t._v("ReactiveEffect")]),t._v(" 关联起来，并在 "),a("code",[t._v("set")]),t._v(" 操作时触发关联 "),a("code",[t._v("ReactiveEffect")]),t._v(" 的更新，这是我们大家都知道的数据响应的基本原理。但是对于新增/删除对象属性和修改数组的场景，我们无法事先定义当前不存在属性的 "),a("code",[t._v("get/set")]),t._v(" (当然这在 "),a("code",[t._v("proxy")]),t._v(" 当中是可行的)，因此我们会把对象或者数组本身作为一个数据依赖创建 "),a("code",[t._v("Dep")]),t._v(" 对象，"),a("strong",[t._v("通过父级访问")]),t._v("该数据时定义的 "),a("code",[t._v("get/set")]),t._v(" 将其关联到对应的 "),a("code",[t._v("ReactiveEffect")]),t._v("，并在对数据进行新增/删除属性或数组操作时通过数据本身持有的 "),a("code",[t._v("Dep")]),t._v(" 对象触发关联 "),a("code",[t._v("ReactiveEffect")]),t._v(" 的更新，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/XkI9cQBsLy_7np-T3rt56_composition-api-reactive2.png",alt:"数据响应原理"}})]),t._v(" "),a("p",[t._v("需要注意的是，"),a("strong",[t._v("通过父级访问")]),t._v("是建立 "),a("code",[t._v("Dep")]),t._v(" 与 "),a("code",[t._v("ReactiveEffect")]),t._v(" 关联关系的先决条件，在选项式 API 中，我们访问组件的响应式数据都需要通过 "),a("code",[t._v("this")]),t._v(" 进行访问，相当于这些数据都存在 "),a("code",[t._v("this")]),t._v(" 这个必要的"),a("strong",[t._v("父级")]),t._v("，因此我们在使用 "),a("code",[t._v("$set/$delete")]),t._v(" 进行对对象进行新增/删除属性或对数组进行修改时都能得到符合预期的结果，唯一的限制在于不能新增/删除根级数据属性，原因就在于 "),a("code",[t._v("this")]),t._v(" 不存在访问它的父级。")]),t._v(" "),a("p",[t._v("但是在组合式 API 中，我们不需要通过 "),a("code",[t._v("this")]),t._v(" 访问响应式数据，因此通过 "),a("code",[t._v("reactive()")]),t._v(" 创建的响应式数据本身就是根级数据，我们自然无法通过上述方式感知到根级数据自身的变化（在 Vue3 中，基于 "),a("code",[t._v("proxy")]),t._v(" 提供的强大能力响应式系统能够精确地感知到数据属性，甚至是当前不存在属性的访问与修改，不需要为数据自身建立 "),a("code",[t._v("Dep")]),t._v(" 对象，自然也不存在相关问题）。")]),t._v(" "),a("p",[t._v("在这种情况下，我们就需要用 "),a("code",[t._v("ref()")]),t._v(" 创建响应式数据，因为 "),a("code",[t._v("ref")]),t._v(" 创建了一个包装对象，我们永远需要通过 "),a("code",[t._v(".value")]),t._v(" 来访问其持有的数据（不管是显式访问还是隐式自动解包），这样就能保证 "),a("code",[t._v("ref")]),t._v(" 数据自身的变化能够被响应式系统感知，因此也不会遇到上面描述的问题，如下所示：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,1,2,3]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,3,2,3]")]),t._v("\n\nstate"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,3,2,3,4]")]),t._v("\n")])])]),a("h3",{attrs:{id:"响应式-api-与-vue3-中的区别"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api-与-vue3-中的区别"}},[t._v("#")]),t._v(" 响应式 API 与 Vue3 中的区别")]),t._v(" "),a("p",[t._v("我们来总结一下 Mpx 中响应式 API 与 Vue3 中的区别：")]),t._v(" "),a("ul",[a("li",[t._v("不支持 "),a("code",[t._v("raw")]),t._v(" 相关 API（"),a("code",[t._v("markRaw")]),t._v(" 除外，我们提供了该 API 用于跳过部分数据的响应式转换）")]),t._v(" "),a("li",[t._v("不支持 "),a("code",[t._v("readonly")]),t._v(" 相关 API")]),t._v(" "),a("li",[t._v("不支持 "),a("code",[t._v("watchEffect")]),t._v("、"),a("code",[t._v("watch")]),t._v("、"),a("code",[t._v("computed")]),t._v(" 的调试选项")]),t._v(" "),a("li",[t._v("不支持对 "),a("code",[t._v("map")]),t._v("、"),a("code",[t._v("set")]),t._v(" 等集合类型进行响应式转换")]),t._v(" "),a("li",[t._v("受到 "),a("code",[t._v("Object.defineProperty")]),t._v(" 实现带来的数据响应限制影响")])]),t._v(" "),a("p",[t._v("关于响应式 API 的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/reactive-api.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"生态周边适配"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#生态周边适配"}},[t._v("#")]),t._v(" 生态周边适配")]),t._v(" "),a("p",[t._v("除了 Mpx 运行时核心提供了组合式 API 支持外，我们对 Mpx 的周边生态能力也都进行了组合式 API 适配支持，包括 "),a("code",[t._v("store")]),t._v("、"),a("code",[t._v("i18n")]),t._v("、"),a("code",[t._v("fetch")]),t._v(" 等。")]),t._v(" "),a("h3",{attrs:{id:"pinia-store-支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pinia-store-支持"}},[t._v("#")]),t._v(" Pinia store 支持")]),t._v(" "),a("p",[t._v("Pinia 是基于组合式 API 设计的全新数据管理方案，目前已经取代 Vuex 成为 Vue3 官方推荐的 store，我们在研究了 pinia 的设计实现后，对其简练优雅的设计思想及其与组合式 API 的高度适配非常满意（特别是在使用 "),a("code",[t._v("setup")]),t._v(" 函数创建 store 时，使用心智与编写组件完全一致，可以将其视作是没有视图的组件）。因此我们 fork 了 pinia 的源码仓库，基于 Mpx 提供的数据响应能力对其进行了适配改造，使其在 Mpx 环境下也能正常运行，目前相关代码维护在 "),a("code",[t._v("@mpxjs/pinia")]),t._v(" 中，在组合式 API 中的简单使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineStore "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用组合式 API 创建 pinia store 的使用心智与 setup 函数完全一致，强烈推荐")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" useSetupStore "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineStore")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setup'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" doubleCount "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" increment "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("useSetupStore")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// store 同 props 类似是一个 reactive 对象，解构数据需使用 toRefs 以保持数据响应性")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("store"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 方法可以直接解构")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" increment "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store\n  \n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" increment "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Mpx 中通过 "),a("code",[t._v("createStore")]),t._v(" 创建的类 Vuex store 在组合式 API 中仍然可以使用，我们可以在 "),a("code",[t._v("setup")]),t._v(" 函数中引用 store 实例进行"),a("a",{attrs:{href:"https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api",target:"_blank",rel:"noopener noreferrer"}},[t._v("数据读取与方法调用"),a("OutboundLink")],1),t._v("，不过整体使用体验与 pinia store 存在较大差距，我们还是推荐在组合式 API 开发中优先使用 pinia store 作为数据管理方案。")]),t._v(" "),a("h3",{attrs:{id:"i18n-支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#i18n-支持"}},[t._v("#")]),t._v(" I18n 支持")]),t._v(" "),a("p",[t._v("传统选项式 API 中，我们使用 "),a("code",[t._v("this.$t")]),t._v(" 方法在组件内调用翻译函数，但在组合式 API 中我们无法访问 "),a("code",[t._v("this")]),t._v("，为此我们参考了 Vue I18n 最新的 9.x 版本，该版本针对 Vue3 及组合式 API 进行了重构适配，提供了全新的 "),a("code",[t._v("useI18n")]),t._v(" API，简单使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('message.hello')}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("changeLocale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("change locale"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// useI18n 不传参数时指向全局 i18n 对象，也可以传递 locale 和 messages 配置创建局部 i18n 对象")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" locale "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("changeLocale")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回的翻译方法名必须为 t，不能进行重命名")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" changeLocale "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("blockquote",[a("p",[t._v("上面示例代码看上去像是我们在模板上直接调用 setup() 返回的 t 翻译方法，但是熟悉小程序开发的同学都知道在小程序架构下这是不可能的，示例中的写法其实由框架通过编译 + 运行时手段实现的语法糖，我们会在模板编译时定向扫描 t/te/tm 等 i18n 方法，将其转换为计算属性注入到运行时当中，这就意味着如果我们对翻译方法进行重命名，模板编译时无法识别出 i18n 方法调用，自然也就无法正常运行。")])]),t._v(" "),a("p",[t._v("Mpx 中 i18n 提供了两种实现模式，分别是 wxs 和 computed，可以使用编译选项中的 "),a("code",[t._v("i18n.isComputed")]),t._v(" 进行切换，两种方式各有优劣，其中：")]),t._v(" "),a("ul",[a("li",[t._v("wxs 模式的优势在于逻辑层和视图层独立维护语言集，无额外运行时性能开销，且使用没有任何限制；劣势同样源于语言集同时存在于逻辑层（js）和视图层（wxs）当中，这部分的包体积占用翻倍；")]),t._v(" "),a("li",[t._v("computed 模式的优势在于语言集只存在于逻辑层中，无额外包体积占用，且可以通过动态添加语言集的方式进一步减少包体积占用；劣势则是会产生额外的运行时性能开销，且使用上存在限制，模板调用时无法直接访问 "),a("code",[t._v("wx:for")]),t._v(" 中的 "),a("code",[t._v("item")]),t._v(" 和 "),a("code",[t._v("index")]),t._v("。")])]),t._v(" "),a("p",[t._v("在组合式 API 中模板上使用 "),a("code",[t._v("useI18n()")]),t._v(" 返回的翻译函数 "),a("code",[t._v("t/te/tm")]),t._v(" 时，为了完整实现 "),a("code",[t._v("useI18n")]),t._v(" API的功能，会强制使用 computed 模式进行实现，这也意味着该用法会受到 computed 模式使用限制的影响。不过当你不需要使用 "),a("code",[t._v("useI18n")]),t._v(" 接受 "),a("code",[t._v("messages")]),t._v(" 参数创建局部语言集作用域功能时，你也完全可以在模板中继续使用原有的 "),a("code",[t._v("$t/$tc/$te/$tm")]),t._v(" 方法，这些方法受编译选项 "),a("code",[t._v("i18n.isComputed")]),t._v(" 的影响，同时指向全局语言集作用域。")]),t._v(" "),a("p",[t._v("更多关于生态周边的组合式 API 使用指南可以点击下方链接查看详情：")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api",target:"_blank",rel:"noopener noreferrer"}},[t._v("store"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://mpxjs.cn/guide/advance/i18n.html#composition-api-usage",target:"_blank",rel:"noopener noreferrer"}},[t._v("i18n"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://mpxjs.cn/guide/extend/fetch.html#composition-api-usage",target:"_blank",rel:"noopener noreferrer"}},[t._v("fetch"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"输出-web-适配"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#输出-web-适配"}},[t._v("#")]),t._v(" 输出 web 适配")]),t._v(" "),a("p",[t._v("跨端输出 web 作为 Mpx 的一大核心特性，在业务中存在广泛使用，同时也是我们设计实现任何框架新特性需要优先考虑的事项。在本次组合式 API 支持中，我们从设计之初就考虑了跨端输出 web 的适配支持，保障使用 Mpx 组合式 API 开发的业务代码都能在 web 环境中正常运行。")]),t._v(" "),a("p",[t._v("我们输出 web 的整体技术方向在于尽可能复用 Vue 已有的生态能力，为了实现这个目标，我们需要提供尽可能与 Vue 保持一致的 API 设计，以降低抹平适配成本。在输出 web 时，核心组合式 API 基于 Vue2.7 版本中的已有能力进行适配提供，简单举个例子：对于 "),a("code",[t._v("import { ref } from 'mpxjs/core'")]),t._v(" 这行语句，在小程序中会指向 Mpx 内部维护的 "),a("code",[t._v("ref")]),t._v(" 实现，而在输出 web 时会指向 Vue 中维护的 "),a("code",[t._v("ref")]),t._v(" 实现，两者的实现虽然不仅相同，但只要保障对外函数签名一致，对于开发者用户来说就无感知。")]),t._v(" "),a("p",[t._v("我们借助了 Mpx 强大的条件编译能力进行上述实现，对运行时导出根据输出平台进行重定向，这样还能保障跨端输出产物干净简洁，仅包含当前输出环境下必要的逻辑，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/E0FojaPKOxZOa5h5OEPQk_composition-api-web.png",alt:"composition-api-web"}})]),t._v(" "),a("p",[t._v("同理，我们也采用了类似的方式实现了组合式 API 周边能力对于输出 web 的适配支持，如pinia store 使用 pinia 原始版本进行适配实现，而 i18n 能力则是使用 vue-i18n@8.x + vue-i18n-bridge 进行适配实现。")]),t._v(" "),a("h2",{attrs:{id:"性能表现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#性能表现"}},[t._v("#")]),t._v(" 性能表现")]),t._v(" "),a("p",[t._v("性能是 Mpx 一直以来的核心关注点，我们对组合式 API 的最终实现版本进行了一系列性能评估测试，我们使用组合式 API 版本对业务中的评价组件进行了重构，评价组件属于我们业务中交互及功能相对比较复杂的组件，源码行数约 1000 行，组件数据 27 项，组件方法 18 个，我们在测试项目中对选项式 API 和组合式 API 两个版本实现的组件进行了一系列测试。")]),t._v(" "),a("h3",{attrs:{id:"组件初始化耗时"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件初始化耗时"}},[t._v("#")]),t._v(" 组件初始化耗时")]),t._v(" "),a("p",[t._v("由于组合式 API 改变了原有的组件初始化流程，我们对组件的初始化耗时进行了重点测试，测试口径如下：")]),t._v(" "),a("ul",[a("li",[t._v("耗时计算以挂载组件为起点，以组件 "),a("code",[t._v("ready")]),t._v(" 执行为终点")]),t._v(" "),a("li",[t._v("测试结果为10次手工测试排除最大最小值后求均值")]),t._v(" "),a("li",[t._v("IOS 测试机型为 iPhone 13 pro max，安卓测试机型为 OPPO R9")])]),t._v(" "),a("p",[t._v("结果显示两个版本的组件初始化耗时大抵持平，不分优劣。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th"),t._v(" "),a("th",[t._v("IOS")]),t._v(" "),a("th",[t._v("安卓")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("选项式 API")]),t._v(" "),a("td",[t._v("42.5ms")]),t._v(" "),a("td",[t._v("366.6ms")])]),t._v(" "),a("tr",[a("td",[t._v("组合式 API")]),t._v(" "),a("td",[t._v("42.4ms")]),t._v(" "),a("td",[t._v("370.1ms")])])])]),t._v(" "),a("h3",{attrs:{id:"组件-js-体积"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件-js-体积"}},[t._v("#")]),t._v(" 组件 JS 体积")]),t._v(" "),a("p",[t._v("在构建产物体积方面，由于组合式 API 的写法对于 JS 代码压缩更加有利，同样的逻辑实现下，组合式 API 版本的组件构建压缩后 JS 体积略胜一筹。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th"),t._v(" "),a("th",[t._v("组件 JS 体积")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("选项式 API")]),t._v(" "),a("td",[t._v("15.67KB")])]),t._v(" "),a("tr",[a("td",[t._v("组合式 API")]),t._v(" "),a("td",[t._v("13.60KB")])])])]),t._v(" "),a("h3",{attrs:{id:"框架运行时体积"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#框架运行时体积"}},[t._v("#")]),t._v(" 框架运行时体积")]),t._v(" "),a("p",[t._v("在 Mpx2.8 版本中，我们在框架运行时中新增了组合式 API 相关实现，不过通过优化运行时导出，使其对 tree shaking 更加友好，我们的框架运行时体积在实际构建产物中没有产生太大增长。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th"),t._v(" "),a("th",[t._v("框架运行时体积")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("选项式 API")]),t._v(" "),a("td",[t._v("51.66KB")])]),t._v(" "),a("tr",[a("td",[t._v("组合式 API")]),t._v(" "),a("td",[t._v("57.47KB")])])])]),t._v(" "),a("p",[t._v("综上所述，组合式 API 版本的运行时性能与选项式 API 大抵持平，在包体积占用方面，新版框架运行时体积占用略有提升，不过由于组合式 API 开发模式对代码压缩更友好，加上组合式 API 更易进行逻辑复用的特点，我们预计在实际业务项目中，组合式 API 的包体积占用会更小。")]),t._v(" "),a("h2",{attrs:{id:"破坏性改变"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#破坏性改变"}},[t._v("#")]),t._v(" 破坏性改变")]),t._v(" "),a("p",[t._v("Mpx 组合式 API 版本完全兼容原有的选项式 API 开发方式，不过我们在运行时重构过程中依然带来了少量的破坏性改变，详情如下：")]),t._v(" "),a("ul",[a("li",[t._v("框架过往提供的组件增强生命周期 "),a("code",[t._v("pageShow/pageHide")]),t._v(" 与微信原生提供的 "),a("code",[t._v("pageLifetimes.show/hide")]),t._v(" 完全对齐，不再提供组件初始挂载时必定执行 "),a("code",[t._v("pageShow")]),t._v(" 的保障（因为组件可能在后台页面进行挂载），相关初始化逻辑一定不要放置在 "),a("code",[t._v("pageShow")]),t._v(" 当中；")]),t._v(" "),a("li",[t._v("取消了框架过去提供的基于内部生命周期实现的非标准增强生命周期，如 "),a("code",[t._v("beforeCreate/onBeforeCreate")]),t._v(" 等，直接将内部生命周期变量导出提供给用户使用，详情查看"),a("a",{attrs:{href:"https://mpxjs.cn/api/global-api.html#built-in-lifecycle-variable",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v(";")]),t._v(" "),a("li",[t._v("为了优化 tree shaking，作为框架运行时 "),a("code",[t._v("default export")]),t._v(" 的 "),a("code",[t._v("Mpx")]),t._v(" 对象不再挂载 "),a("code",[t._v("createComponent/createStore")]),t._v(" 等运行时方法，一律通过 "),a("code",[t._v("named export")]),t._v(" 提供，"),a("code",[t._v("Mpx")]),t._v(" 对象上仅保留 "),a("code",[t._v("set/use")]),t._v(" 等全局 API，详情查看"),a("a",{attrs:{href:"https://mpxjs.cn/api/global-api.html#global-mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("；")]),t._v(" "),a("li",[t._v("使用 I18n 能力时，为了与新版 vue-i18n 保持对齐，"),a("code",[t._v("this.$i18n")]),t._v(" 对象指向全局作用域，如需创建局部作用域需要使用组合式 API "),a("code",[t._v("useI18n")]),t._v(" 的方式进行创建。")]),t._v(" "),a("li",[a("code",[t._v("watch")]),t._v(" API 不再接受第二个参数为带有 "),a("code",[t._v("handler")]),t._v(" 属性的对象形式（该参数形式只应存在于 "),a("code",[t._v("watch")]),t._v(" option 中），第二个参数必须为回调函数，与 "),a("a",{attrs:{href:"https://vuejs.org/api/reactivity-core.html#watch",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue"),a("OutboundLink")],1),t._v(" 对齐。")])]),t._v(" "),a("p",[t._v("更详细的迁移指南请点击查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/migrate/2.8.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"未来规划"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#未来规划"}},[t._v("#")]),t._v(" 未来规划")]),t._v(" "),a("p",[t._v("在完成编译持久化缓存和组合式 API 支持后，我们已经完成了去年规划中最大的两个技术升级，后续我们的技术规划如下：")]),t._v(" "),a("ul",[a("li",[t._v("支持使用 Vite 进行 web 构建")]),t._v(" "),a("li",[t._v("完善 Mpx 跨端输出 Hummer 并正式 release")]),t._v(" "),a("li",[t._v("优化运行时 render 函数，降低包体积占用")]),t._v(" "),a("li",[t._v("内置支持原子类使用")]),t._v(" "),a("li",[t._v("Mpx-cube-ui 正式开源")])]),t._v(" "),a("p",[t._v("最后，再次感谢所有参与 Mpx 组合式 API 技术建设的同学们，也欢迎社区同学加入 Mpx 项目开源共建。")])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/52.10bb0251.js b/docs-vuepress/.vuepress/dist/assets/js/52.10bb0251.js
new file mode 100644
index 0000000000..ac6607c0a1
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/52.10bb0251.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{401:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化"}},[t._v("#")]),t._v(" Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化")]),t._v(" "),s("blockquote",[s("p",[t._v("作者："),s("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[t._v("董宏平"),s("OutboundLink")],1)])]),t._v(" "),s("p",[s("a",{attrs:{href:"https://github.com/didi/mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx"),s("OutboundLink")],1),t._v(" 是滴滴开源的一款增强型跨端小程序框架，自2018年立项开源以来如今已经进入第六个年头，在这六年间，Mpx 根植于业务，与业务共同成长，针对小程序业务开发中遇到的各类痛点问题提出了解决方案，并在集团内部建设了完善的小程序跨端开发生态。目前，Mpx 已经覆盖支持了集团内部全量小程序业务开发，成为了集团小程序开发的统一技术标准，并在今年年初被评选为集团内首个开源精品项目。")]),t._v(" "),s("p",[t._v("随着小程序业务的发展演进，性能和包体积的重要性愈发凸显，Mpx从设计之初就非常重视性能和包体积的优化，本次的 "),s("strong",[t._v("Mpx2.9")]),t._v(" 版本更新带来的三大核心特性——原子类、SSR 和包体积优化也都与性能和包体积息息相关，下面我们逐个展开介绍。")]),t._v(" "),s("h2",{attrs:{id:"原子类支持"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原子类支持"}},[t._v("#")]),t._v(" 原子类支持")]),t._v(" "),s("p",[t._v("原子类(utility-first CSS)是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，比较知名的有 "),s("a",{attrs:{href:"https://github.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github"),s("OutboundLink")],1),t._v("，"),s("a",{attrs:{href:"https://openai.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("OpenAI"),s("OutboundLink")],1),t._v("，"),s("a",{attrs:{href:"https://top10.netflix.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Netflix"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://www.jpl.nasa.gov/",target:"_blank",rel:"noopener noreferrer"}},[t._v("NASA官网"),s("OutboundLink")],1),t._v(" 等。使用原子类离不开原子类框架的支持，常用的原子类框架有 "),s("a",{attrs:{href:"https://tailwindcss.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Tailwindcss"),s("OutboundLink")],1),t._v("、"),s("a",{attrs:{href:"https://windicss.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Windicss"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://unocss.dev/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Unocss"),s("OutboundLink")],1),t._v(" 等。")]),t._v(" "),s("p",[t._v("在 Mpx2.9 版本中，我们在框架中内置了基于 "),s("code",[t._v("unocss")]),t._v(" 的原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx 页面/组件模板中直接使用一些预定义的基础样式类，诸如 flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("flex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-base text-black font-semibold mb-2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Erin Lindford\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-gray-500 font-medium pb-3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Product Engineer\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Message\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/Or3aaN-mmxV8pK-LmEVPm_demo.png",alt:"utility-css-demo"}})]),t._v(" "),s("p",[t._v("相较于传统的自定义类编写样式的方式，使用原子类能给你带来以下这些好处：")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("不用再烦恼于为自定义类取类名")]),t._v("，传统样式开发中，我们仅仅是为某个元素定义样式就需要绞尽脑汁发明一些抽象的类名，还得提防类名冲突，使用原子类可以完全将你从这种琐碎无趣的工作中解放；")]),t._v(" "),s("li",[s("strong",[t._v("停止 css 体积的无序增长")]),t._v("，传统样式开发中，css 体积会随着你的迭代不断增长，而在原子类中，一切样式都可以复用，你几乎不需要编写新的 css；")]),t._v(" "),s("li",[s("strong",[t._v("让调整样式变得更加安全")]),t._v("，传统 css 是全局的，当你修改某个样式时无法保障其不会破坏其他地方的样式，而你在模板中使用的原子类是本地的，你完全不用担心修改它会影响其他地方。")])]),t._v(" "),s("p",[t._v("而相较于使用内联样式，原子类也有一些重要的优势：")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("约束下的设计")]),t._v("，使用内联样式时，里面的每一个数值都是魔法数字（magic number）\n，而通过原子工具类，你可以选择一些符合预定义设计规范的样式，便于构筑具有视觉一致性的UI；")]),t._v(" "),s("li",[s("strong",[t._v("响应式设计")]),t._v("，你无法在内联样式中使用媒体查询，然而通过原子类框架中提供的响应式工具，你可以轻而易举地构建出响应式界面；")]),t._v(" "),s("li",[s("strong",[t._v("Hover、focus 和其他状态")]),t._v("，使用内联样式无法定义特定状态下的样式，如 hover 和 focus，通过原子类框架的状态变量能力，我们可以轻松为这些状态定义样式。")])]),t._v(" "),s("p",[t._v("看到这里相信你已经迫不及待地想要在 Mpx 中体验原子类开发了吧，使用最新版本的 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 脚手架创建项目时，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用 "),s("code",[t._v("unocss")]),t._v(" 的原子类，可使用的工具类可以参考 "),s("a",{attrs:{href:"https://unocss.dev/interactive/",target:"_blank",rel:"noopener noreferrer"}},[t._v("unocss 交互示例"),s("OutboundLink")],1),t._v("，在已有项目中开启原子类支持可以参考"),s("a",{attrs:{href:"https://mpxjs.cn/guide/advance/utility-first-css.html#compile-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("配置指南"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"小程序原子类使用注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#小程序原子类使用注意事项"}},[t._v("#")]),t._v(" 小程序原子类使用注意事项")]),t._v(" "),s("p",[t._v("小程序和 web 环境对于 css 的支持存在底层差异，小程序内也存在大量自身独有的技术特性，Mpx 在支持原子类时针对这些环境特异性进行了抹平和适配，在框架的支持下，我们实现了大部分（超过90%）原子类功能和工具类在小程序环境下正常使用，并额外支持了原子类产物的分包输出和样式隔离下的原子类使用，详情如下：")]),t._v(" "),s("h4",{attrs:{id:"特殊字符转义"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#特殊字符转义"}},[t._v("#")]),t._v(" 特殊字符转义")]),t._v(" "),s("p",[t._v("基于 "),s("code",[t._v("unocss")]),t._v(" 的原子类支持 "),s("code",[t._v("value auto-infer")]),t._v("（值自动推导），可以在模版中根据相关规则书写灵活的自定义值原子类，如 "),s("code",[t._v("p-5px bg-[hsl(211.7,81.9%,69.6%)]")]),t._v(" 等，针对原子类中出现的 "),s("code",[t._v("[")]),t._v(" "),s("code",[t._v("(")]),t._v(" "),s("code",[t._v(",")]),t._v(" 等特殊字符，在 web 中会通过转义字符 "),s("code",[t._v("\\")]),t._v(" 进行转义，由于小程序环境下不支持 css 选择器中出现 "),s("code",[t._v("\\")]),t._v(" 转义字符，我们内置支持了一套不带 "),s("code",[t._v("\\")]),t._v(" 的转义规则对这些特殊字符进行转义，同时替换模版和 css 文件中的类名，内建的默认转义规则如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" escapeMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'('")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_pl_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("')'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_pr_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'['")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_bl_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("']'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_br_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'{'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_cl_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'}'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_cr_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'#'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_h_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'!'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_i_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'/'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_s_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'.'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_d_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("':'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_c_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("','")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_2c_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'%'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_p_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'\\''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_q_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'\"'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_dq_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'+'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_a_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_si_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unknown用于兜底不在上述范围中未知的转义字符")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unknown")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_u_'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("与此同时，用户也可以通过传递 "),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 的 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#escapeMap",target:"_blank",rel:"noopener noreferrer"}},[t._v("escapeMap"),s("OutboundLink")],1),t._v(" 配置项来覆盖内建的转义规则。")]),t._v(" "),s("h4",{attrs:{id:"原子类分包输出"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原子类分包输出"}},[t._v("#")]),t._v(" 原子类分包输出")]),t._v(" "),s("p",[t._v("在 web 中，原子类会被全部打包输出单个样式文件，一般会放置在顶层样式表中以供全局访问，但在小程序中这种全量的输出策略并不是最优的，主要原因在于小程序中可供全局访问的主包体积存在 "),s("strong",[t._v("2M 大小限制")]),t._v("，主包体积十分紧缺珍贵，Mpx 在构建输出时遵循着分包优先的原则，尽可能充分利用分包体积从而减少对主包体积的占用，再进行原子类产物输出时，我们也遵循了相同的原则。")]),t._v(" "),s("p",[t._v("在Mpx中，我们在收集原子类时同时记录了每个原子类的引用分包，在收集结束后根据每个原子类的分包引用数量决定该原子类应该输出到主包还是分包当中，我们在 "),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 中提供了 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#minCount",target:"_blank",rel:"noopener noreferrer"}},[t._v("minCount"),s("OutboundLink")],1),t._v(" 配置项来决定分包的输出规则，该配置项的默认值为2，即当一个原子类被2个或以上分包引用时，会被作为公共原子类抽取到主包中，否则输出到所属分包中，这也是全局最优的策略。当我们想要让原子类输出产物更少地占用主包体积时，我们也可以将"),s("code",[t._v("minCount")]),t._v("值调大，让原子类抽取到主包的条件更加苛刻，不过这样也会伴随着原子类分包冗余的增加。")]),t._v(" "),s("p",[s("code",[t._v("unocss.config.js")]),t._v(" 配置中定义的 "),s("code",[t._v("safelist")]),t._v(" 原子类默认会输出到主包，为了组件局部使用的 "),s("code",[t._v("safelist")]),t._v(" 有输出到分包的机会，我们在模版中提供了"),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#commentConfig",target:"_blank",rel:"noopener noreferrer"}},[t._v("注释配置"),s("OutboundLink")],1),t._v("（comments config），灵感来源于 "),s("code",[t._v("webpack")]),t._v(" 中的魔法注释（magic comments），用户可以在组件模版中通过"),s("code",[t._v("注释配置")]),t._v("声明当前组件所需的 "),s("code",[t._v("safelist")]),t._v("，对应的原子类也会根据上述的规则输出到主包或分包中，使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_safelist: 'text-red-500 bg-blue-500' --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 动态样式中可以使用text-red-500和bg-blue-500原子类 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{classObj}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h4",{attrs:{id:"样式隔离与组件分包异步"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#样式隔离与组件分包异步"}},[t._v("#")]),t._v(" 样式隔离与组件分包异步")]),t._v(" "),s("p",[t._v("在小程序中，自定义组件的样式默认是隔离的，web 中通过全局样式访问原子类的方式不再生效，不过由于小程序提供了"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB",target:"_blank",rel:"noopener noreferrer"}},[t._v("样式隔离配置"),s("OutboundLink")],1),t._v("，我们可以将该组件样式隔离配置调整为 "),s("code",[t._v("apply-shared")]),t._v(" 来获取页面或 app 中定义的原子类，但是当我们在使用传统类名和原子类混合开发或者迁移原子类的过程中，我们往往希望保留原本自定义组件的样式隔离。")]),t._v(" "),s("p",[t._v("针对这种情况，我们在 "),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 中提供了 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#styleIsolation",target:"_blank",rel:"noopener noreferrer"}},[t._v("styleIsolation"),s("OutboundLink")],1),t._v(" 配置项，可选设置为 "),s("code",[t._v("isolated")]),t._v("|"),s("code",[t._v("apply-shared")]),t._v("，当设置为 "),s("code",[t._v("isolated")]),t._v(" 时每个组件都会通过 "),s("code",[t._v("@import")]),t._v(" 独立引用主包或者分包的原子类样式文件，因此不会受到样式隔离的影响；当设置为 "),s("code",[t._v("apply-shared")]),t._v(" 时，只有 app 和分包页面会引用对应的原子类样式文件，自定义组件需要通过配置样式隔离为 "),s("code",[t._v("apply-shared")]),t._v(" 使原子类生效。")]),t._v(" "),s("p",[t._v("在组件分包异步的情况下对应组件即使将样式隔离配置为 "),s("code",[t._v("apply-shared")]),t._v(" 的情况下，"),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 也需要将  "),s("code",[t._v("styleIsolation")]),t._v(" 设置为 "),s("code",[t._v("isolated")]),t._v(" 才能正常工作，原因在于组件分包异步的情况下，组件被其他分包的页面所引用渲染，由于上述原子类样式分包输出的规则，其他分包的页面中可能并不包含当前组件所需的原子类，只有在 "),s("code",[t._v("isolated")]),t._v(" 模式下由组件自身引用所需的原子类样式才能保证正常工作，类似于 "),s("code",[t._v("safelist")]),t._v("，我们也提供了"),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#commentConfig",target:"_blank",rel:"noopener noreferrer"}},[t._v("注释配置"),s("OutboundLink")],1),t._v("的方式对组件的 "),s("code",[t._v("styleIsolation")]),t._v(" 模式进行局部配置，示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_styleIsolation: 'isolated' --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 当前组件会直接引用对应主包或分包的原子类样式 --\x3e")]),t._v("\n     "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("@dark:(text-white bg-dark-500)"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"原子类使用参考文档"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原子类使用参考文档"}},[t._v("#")]),t._v(" 原子类使用参考文档")]),t._v(" "),s("p",[t._v("Mpx 中使用原子类的详细参考文档如下：")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://mpxjs.cn/guide/advance/utility-first-css.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("原子类使用指南"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#MpxUnocssPlugin",target:"_blank",rel:"noopener noreferrer"}},[t._v("原子类 API 参考"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"输出-web-支持-ssr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#输出-web-支持-ssr"}},[t._v("#")]),t._v(" 输出 web 支持 SSR")]),t._v(" "),s("p",[t._v("近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，各类SSR框架层出不穷，未来进一步提升性能表现，在 SSR 的基础上还演进出 "),s("a",{attrs:{href:"https://docs.astro.build/en/concepts/islands/",target:"_blank",rel:"noopener noreferrer"}},[t._v("islands architecture"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://qwik.builder.io/docs/concepts/resumable/",target:"_blank",rel:"noopener noreferrer"}},[t._v("0 hydration"),s("OutboundLink")],1),t._v(" 等更加精细复杂的理念和架构。")]),t._v(" "),s("p",[t._v("近两年随着团队对于前端性能的重视，SSR/SSG 技术也在团队业务中逐步推广落地，并在首屏性能方面取得了显著的收效。但由于过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 Mpx2.9 版本中，我们对 web 输出流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整实现了基于 Vue 和 Pinia 的 SSR 技术方案。")]),t._v(" "),s("h3",{attrs:{id:"配置使用-ssr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置使用-ssr"}},[t._v("#")]),t._v(" 配置使用 SSR")]),t._v(" "),s("p",[t._v("在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85",alt:"Vue SSR流程"}})]),t._v(" "),s("p",[t._v("Mpx SSR 核心基于 Vue SSR 实现，大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：")]),t._v(" "),s("h4",{attrs:{id:"构建server-client-bundle"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#构建server-client-bundle"}},[t._v("#")]),t._v(" 构建server/client bundle")]),t._v(" "),s("p",[t._v("SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。\n在 Vue 中，我们需要提供 "),s("code",[t._v("entry-server.js")]),t._v(" 和 "),s("code",[t._v("entry-client.js")]),t._v(" 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 "),s("code",[t._v("app.mpx")]),t._v(" 作为统一构建入口，无需区分 server 和 client。")]),t._v(" "),s("h5",{attrs:{id:"服务端构建配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#服务端构建配置"}},[t._v("#")]),t._v(" 服务端构建配置")]),t._v(" "),s("p",[t._v("服务端配置中除了将 entry 制定为 "),s("code",[t._v("app.mpx")]),t._v(" 及其它基础配置外，最重要的是安装 "),s("code",[t._v("vue-server-renderer")]),t._v(" 包中提供的  "),s("code",[t._v("server-plugin")]),t._v(" 插件，该插件能够构建产出 "),s("code",[t._v("vue-ssr-server-bundle.json")]),t._v(" 文件供 "),s("code",[t._v("renderer")]),t._v(" 后续消费。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.server.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" VueSSRServerPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer/server-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 entry 指向项目的 app.mpx 文件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 产出 `vue-ssr-server-bundle.json`")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueSSRServerPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更加详细的配置说明可参考 "),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/build-config.html#server-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue SSR的服务端配置"),s("OutboundLink")],1)]),t._v(" "),s("h5",{attrs:{id:"客户端构建配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#客户端构建配置"}},[t._v("#")]),t._v(" 客户端构建配置")]),t._v(" "),s("p",[t._v("类似服务端构建配置，在客户端构建中我们需要使用 "),s("code",[t._v("vue-server-renderer")]),t._v(" 包中 "),s("code",[t._v("client-plugin")]),t._v(" 插件来帮助我们生成客户端环境的资源清单 "),s("code",[t._v("vue-ssr-client-manifest.json")]),t._v("，并供 "),s("code",[t._v("renderer")]),t._v(" 后续消费。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.client.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" VueSSRClientPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer/client-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 entry 指向项目的 app.mpx 文件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 产出 `vue-ssr-client-manifest.json`。")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueSSRClientPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更加详细的配置说明可参考 "),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/build-config.html#client-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue SSR的客户端配置"),s("OutboundLink")],1)]),t._v(" "),s("h4",{attrs:{id:"准备页面模版"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#准备页面模版"}},[t._v("#")]),t._v(" 准备页面模版")]),t._v(" "),s("p",[t._v("SSR 渲染中，我们创建 "),s("code",[t._v("renderer")]),t._v(" 需要一个页面模板，简单的示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token doctype"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<!")]),s("span",{pre:!0,attrs:{class:"token doctype-tag"}},[t._v("DOCTYPE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token name"}},[t._v("html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("en"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Hello"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--vue-ssr-outlet--\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 "),s("code",[t._v("\x3c!--vue-ssr-outlet--\x3e")]),t._v("注释，标记 SSR 渲染产物的插入位置，如使用 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 脚手架创建 SSR 项目，该模版已经内置于脚手架中。")]),t._v(" "),s("h4",{attrs:{id:"集成启动-ssr-服务"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#集成启动-ssr-服务"}},[t._v("#")]),t._v(" 集成启动 SSR 服务")]),t._v(" "),s("p",[t._v("当我们准备好页面模版和双端构建产物后，我们就可以创建 "),s("code",[t._v("renderer")]),t._v(" 并与 Node 服务进行集成，启动 SSR 服务，下面以 "),s("code",[t._v("express")]),t._v(" 为例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//server.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" app "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'express'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createBundleRenderer "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 vue-server-renderer/server-plugin 生成的文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" serverBundle "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../dist/server/vue-ssr-server-bundle.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 vue-server-renderer/client-plugin 生成的文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" clientManifest "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../dist/client/vue-ssr-client-manifest.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 页面模版文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" template "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("readFileSync")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/index.template.html'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'utf-8'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建 renderer 渲染器")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" renderer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createBundleRenderer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("serverBundle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("runInNewContext")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    template"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    clientManifest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注册启动 SSR 服务")]),t._v("\napp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'*'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("req"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" req"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  renderer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("renderToString")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  \t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  \t  res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Internal Server Error'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  \tres"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("html"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\napp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("listen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8080")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"ssr-生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ssr-生命周期"}},[t._v("#")]),t._v(" SSR 生命周期")]),t._v(" "),s("p",[t._v("在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是"),s("code",[t._v("onAppInit")]),t._v("、"),s("code",[t._v("serverPrefetch")]),t._v(" 和 "),s("code",[t._v("onSSRAppCreated")]),t._v("，以统一服务端与客户端的构建入口，下面展开介绍：")]),t._v(" "),s("h4",{attrs:{id:"onappinit"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onappinit"}},[t._v("#")]),t._v(" onAppInit")]),t._v(" "),s("p",[t._v("在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，"),s("code",[t._v("onAppInit")]),t._v(" 生命周期会在应用创建 "),s("code",[t._v("new Vue(...)")]),t._v(" 前被调用，其执行的返回结果会被合并到创建应用的 "),s("code",[t._v("options")]),t._v(" 中")]),t._v(" "),s("p",[t._v("很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 "),s("code",[t._v("@mpxjs/pinia")]),t._v(" 作为全局状态管理工具，我们可以在 "),s("code",[t._v("onAppInit")]),t._v(" 中返回全新的 "),s("code",[t._v("pinia")]),t._v(" 示例避免产生跨请求状态污染，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPinia "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onAppInit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pinia "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPinia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      pinia\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"serverprefetch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#serverprefetch"}},[t._v("#")]),t._v(" serverPrefetch")]),t._v(" "),s("p",[t._v("当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：")]),t._v(" "),s("p",[t._v("选项式 API：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useStore "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store/index'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("serverPrefetch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" query "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("query\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the promise from the action, fetch data and update state")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("query"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("组合式 API：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" onServerPrefetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getCurrentInstance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useStore "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store/index'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("userStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onServerPrefetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" query "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getCurrentInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("proxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("query\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the promise from the action, fetch data and update state")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("query"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("关于数据预拉取更详细的说明可以查看"),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/data.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("h4",{attrs:{id:"onssrappcreated"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onssrappcreated"}},[t._v("#")]),t._v(" onSSRAppCreated")]),t._v(" "),s("p",[t._v("在 Vue SSR 项目中，我们会在 "),s("code",[t._v("entry-server.js")]),t._v(" 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 "),s("code",[t._v("app")]),t._v("。")]),t._v(" "),s("p",[t._v("在 Mpx SSR 中，我们将这部分逻辑整合在 "),s("code",[t._v("onSSRAppCreated")]),t._v(" 中执行，该生命周期执行时用户可以从参数中获取应用实例 "),s("code",[t._v("app")]),t._v("、路由实例 "),s("code",[t._v("router")]),t._v("、数据管理实例 "),s("code",[t._v("pinia")]),t._v(" 和 SSR 上下文 "),s("code",[t._v("context")]),t._v("，在完成必要的操作后，该生命周期需要返回一个 "),s("code",[t._v("resolve(app)")]),t._v(" 的 promise。")]),t._v(" "),s("p",[t._v("通常我们会在 "),s("code",[t._v("onSSRAppCreated")]),t._v(" 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...,")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onSSRAppCreated")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置服务端路由路径")]),t._v("\n        router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 应用完成渲染时执行")]),t._v("\n          context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("rendered")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将服务端渲染后得到的 pinia.state 同步到 context.state 中，")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注入到 HTML 中，并在客户端运行时再读取同步")]),t._v("\n            context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回应用程序实例")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。")]),t._v(" "),s("h3",{attrs:{id:"其他注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#其他注意事项"}},[t._v("#")]),t._v(" 其他注意事项")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。")])]),t._v(" "),s("li",[s("p",[t._v("在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。")])]),t._v(" "),s("li",[s("p",[t._v("由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 "),s("code",[t._v("mpx.config.webRouteConfig")]),t._v(" 将路由模式设置成 "),s("code",[t._v("history")]),t._v(" 模式。")])])]),t._v(" "),s("h2",{attrs:{id:"包体积优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#包体积优化"}},[t._v("#")]),t._v(" 包体积优化")]),t._v(" "),s("p",[t._v("近几年来随着集团超级 App 战略的推进，滴滴出行主小程序中集成了越来越多的业务线，主小程序的包体积也随之呈现爆炸式增长，到今天主小程序里已经集成了集团内大部分核心业务，但其总包体积也从 21 年的 12MB 增长至触达微信上限 30MB，成为一个页面数量400+，组件数量3600+，JS模块数40000+的“大程序”。在此期间，我们通过统一技术框架、分包异步改造和低效页面下线/改造等技术手段，对主小包体积进行一轮又一轮优化，并沉淀了分包异步构建、包体积分析管控和冗余包检测等一系列技术能力，累计优化总包体积超过 "),s("strong",[t._v("8MB")]),t._v("。")]),t._v(" "),s("p",[t._v("Mpx 在设计之初就考虑了包体积问题，完整继承了 webpack 已有的代码优化能力，如公共模块抽离、tree shaking、混淆压缩等。除此之外，我们还设计开发了业内最完善的分包构建流程，完整支持基于配置声明和依赖分析的普通分包、独立分包及分包异步化的构建输出，极大地缓解了复杂小程序中的主包和总包体积过大的问题。在 Mpx2.9 版本中，我们针对复杂小程序页面组件和 JS 模块众多的特点，对构建产物进行了针对性地优化，进一步降低了构建产物体积，当前版本在主小程序中实测能够在不做任何业务改造的情况下节省了约 "),s("strong",[t._v("2MB")]),t._v(" 总包体积，收效显著，主要优化项如下：")]),t._v(" "),s("h3",{attrs:{id:"模版代码优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模版代码优化"}},[t._v("#")]),t._v(" 模版代码优化")]),t._v(" "),s("p",[t._v("Mpx 基于 webpack 进行打包构建，并基于小程序原生 commonjs 支持进行适配改造，以实现 webpack 构建产物在小程序环境下运行，为了将构建产物中的模块和 chunk 链接到一起，webpack 和 mpx 会在构建产物生成一些模版代码进行相关工作，下面是一个页面 js 中包含的模版代码示例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" self "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nself"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackChunkmpx_test_2_8 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../bundle.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("self"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackChunkmpx_test_2_8 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" self"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackChunkmpx_test_2_8 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("405")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1307")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" o")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4236")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" e\n  e "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1307")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("s "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("可以看出模版代码主要由 chunk 链接代码，chunk id，模块 id 和模块包装函数组成，对于中小项目来说，这些模版代码一般不会占用太多体积，但是在滴滴出行主小程序这样的大体量项目下，这部分体积就变得不可忽视，"),s("code",[t._v("@mpxjs/size-report")]),t._v(" 的分析结果显示，生产模式下主小程序中模版代码占用体积约为 1.2MB，相当于一个中等复杂度业务的占用体积。")]),t._v(" "),s("p",[t._v("我们对模版代码的生成逻辑和生成产物进行分析，发现 webpack 生产模式的默认配置中，很多配置项并不是体积最优的选项，一个典型的例子在于模块/chunk id：为了保障生成产物的内容稳定，来尽可能提升浏览器的缓存利用率，webpack 默认的模块/chunk id 采用 "),s("code",[t._v("deterministic")]),t._v(" 模式进行生成，该模式下模块 id 为模块源路径的定长数字 hash，比项目模块总数长 1 位。由于在小程序中代码包按照版本的维度进行全量管理，保证文件局部的内容稳定在小程序环境下无正向意义，这就有了优化空间，我们可以简单将模块/chunk id 的生成逻辑改为数字自增，在主小程序中就能节省出上百 KB 总包体积。")]),t._v(" "),s("p",[t._v("类似的可优化点还存在于 chunk 链接代码和模块包装函数当中，我们在 "),s("code",[t._v("@mpxjs/webpack-plugin@2.9")]),t._v(" 版本中提供了一个新的配置项 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#optimizesize",target:"_blank",rel:"noopener noreferrer"}},[t._v("optimizeSize"),s("OutboundLink")],1),t._v("，其中整合了一系列模版代码体积优化配置，开启后就能自动优化构建产物中的模版代码体积，在主小程序中，我们开启 "),s("code",[t._v("optimizeSize")]),t._v(" 后可以减少总包体积约 "),s("strong",[t._v("540KB")]),t._v("，效果非常显著，下面是上述示例在开启 "),s("code",[t._v("optimizeSize")]),t._v(" 后的产物对比：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" g "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\ng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../bundle.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("448")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" o")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("463")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" e\n  e "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("448")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("s "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"空模块移除"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#空模块移除"}},[t._v("#")]),t._v(" 空模块移除")]),t._v(" "),s("p",[t._v("Mpx 在处理 "),s("code",[t._v(".mpx")]),t._v(" 单文件时会将其分拆为 "),s("code",[t._v("template/js/style/json")]),t._v(" 四个新模块来进行分别处理，其中 "),s("code",[t._v("template/style/json")]),t._v(" 部分的内容会在处理后通过内置的 "),s("code",[t._v("extractor")]),t._v(" 抽取输出为静态文件，抽取之后原本分拆出来的模块就会以空模块的形式残留在构建产物中（template 模块在抽取后还需要保留 render 函数和 refs 等信息所以不会成为空模块），如下所示：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("533")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("__unused_webpack_module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" __unused_webpack_exports"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" __webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* template */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("535")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("536")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* json */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("537")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* script */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("534")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("536")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("537")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("从上面示例中可以看出 "),s("code",[t._v("536/537")]),t._v(" 模块的定义和引用都是完全不必要的，但由于 webpack 本身对于空模块没有进行识别和优化的手段，在过去的版本中这些空模块代码会占用我们一部分总包体积。在 Mpx2.9 版本中，我们定义了全新的依赖类型 "),s("code",[t._v("CommonjsExtractDependency")]),t._v(" 对于这类可能被抽取成为空模块的 "),s("code",[t._v("request")]),t._v(" 进行识别处理，当模块内容在完成抽取后为空时，自动将其从模块图中移除，并在产物生成时不再生成其引用代码。该项优化措施内置开启，升级后自动生效，可减少主小程序总包体积约 "),s("strong",[t._v("232KB")]),t._v("。")]),t._v(" "),s("h3",{attrs:{id:"render函数优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#render函数优化"}},[t._v("#")]),t._v(" Render函数优化")]),t._v(" "),s("p",[t._v("Render 函数是 Mpx 运行时 "),s("code",[t._v("setData")]),t._v(" 优化的一项核心设计，我们在模版编译时将用户模版转换为简易的 render 函数，该函数执行时能够完全模拟视图渲染的数据访问过程，正确地收集当前视图的数据依赖，避免将视图不需要的数据通过 "),s("code",[t._v("setData")]),t._v(" 发送到视图中。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/ZQ6p8Rs2m7QCumOll3nmd.jpg",alt:"render函数"}})]),t._v(" "),s("p",[t._v("虽然我们生成的简化版 render 函数仅保留了数据访问逻辑，在代码体积上并不算大，但是仍然存在着一定的优化空间，我们来看下面这个例子：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("可以看出 "),s("code",[t._v("if block")]),t._v(" 下存在着大量冗余不必要的数据访问，例如 "),s("code",[t._v("this.a")]),t._v(" 和 "),s("code",[t._v("this.b")]),t._v(" 在父级 "),s("code",[t._v("block")]),t._v(" 中已经进行过访问，"),s("code",[t._v("this.c.a")]),t._v(" 和 "),s("code",[t._v("this.c.b")]),t._v(" 由于在 "),s("code",[t._v("if condition")]),t._v(" 中进行过 "),s("code",[t._v("this.c")]),t._v(" 的访问也不再必要（render函数执行时会对模版依赖数据进行深度diff，父路径访问后子路径就无需再进行访问），上述 render 函数可以优化为：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在 Mpx2.9 版本中，我们通过两轮 "),s("code",[t._v("ast")]),t._v(" 遍历（"),s("code",[t._v("2 pass ast travese")]),t._v("）的方式实现了这个优化，在第一轮遍历中，我们收集了数据访问信息并按照 "),s("code",[t._v("block")]),t._v(" 结构存储在 "),s("code",[t._v("blockVisitTree")]),t._v(" 中，第二轮遍历时依据 "),s("code",[t._v("blockVisitTree")]),t._v(" 中的信息对不必要的数据访问进行剪枝优化。")]),t._v(" "),s("p",[t._v("除此之外，我们也大幅优化了 render 函数中的数据收集代码，有效地降低了 render 函数的体积占用。")]),t._v(" "),s("p",[t._v("该优化目前没有默认开启，可以通过 "),s("code",[t._v("@mpxjs/webpack-plugin")]),t._v(" 中的 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#optimizerenderrules",target:"_blank",rel:"noopener noreferrer"}},[t._v("optimizeRenderRules"),s("OutboundLink")],1),t._v(" 配置项配置生效范围进行开启，\n全量开启后在主小程序中实测可节省总包体积约 "),s("strong",[t._v("1507KB")]),t._v("。")]),t._v(" "),s("h2",{attrs:{id:"未来规划"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#未来规划"}},[t._v("#")]),t._v(" 未来规划")]),t._v(" "),s("p",[t._v("在未来，我们对 Mpx 构建产物还有进一步的优化方案可以探索实施，主要分为两个方向：")]),t._v(" "),s("ul",[s("li",[t._v("编译注入代码优化，在功能不变的情况下简化编译注入的代码，对于 render 函数也有一种运行时有损的方案（略微增大运行时开销）可以尝试")]),t._v(" "),s("li",[t._v("模版和JSON压缩，对模版和JSON中的组件名及组件路径进行短哈希压缩，缺点是丢失dist产物的可读性，可能需要对其提供 sourceMap 支持")])]),t._v(" "),s("p",[t._v("除此之外，我们近期的框架升级计划还包括：")]),t._v(" "),s("ul",[s("li",[t._v("局部运行时渲染增强")]),t._v(" "),s("li",[t._v("数据响应升级为 proxy 实现，输出 web 升级为 vue3")]),t._v(" "),s("li",[t._v("支付宝 2.0 基础库适配优化")]),t._v(" "),s("li",[t._v("微信 skyline 适配优化")]),t._v(" "),s("li",[t._v("输出 Hummer 能力完善")])]),t._v(" "),s("p",[t._v("在构建提速方面，我们也会在以下方向进行探索：")]),t._v(" "),s("ul",[s("li",[t._v("输出 web 支持 vite 构建")]),t._v(" "),s("li",[t._v("基于模块联邦的分布式构建")]),t._v(" "),s("li",[t._v("基于 Rust 的高性能构建探索")])]),t._v(" "),s("p",[t._v("最后，特别感谢@徐伟东、@闫宇和@朱志恒对于 2.9 版本功能开发的突出贡献，也欢迎大家使用 Mpx 进行小程序跨端开发并加入社区共建。")]),t._v(" "),s("p",[t._v("Github：https://github.com/didi/mpx")]),t._v(" "),s("p",[t._v("官网/文档：https://mpxjs.cn/")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/53.7207ffc5.js b/docs-vuepress/.vuepress/dist/assets/js/53.7207ffc5.js
new file mode 100644
index 0000000000..b572c7c4a8
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/53.7207ffc5.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{402:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化"}},[t._v("#")]),t._v(" Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化")]),t._v(" "),s("blockquote",[s("p",[t._v("作者："),s("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[t._v("hiyuki"),s("OutboundLink")],1)])]),t._v(" "),s("p",[s("a",{attrs:{href:"https://github.com/didi/mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx"),s("OutboundLink")],1),t._v(" 是滴滴开源的一款增强型跨端小程序框架，自2018年立项开源以来如今已经进入第六个年头，在这六年间，Mpx 根植于业务，与业务共同成长，针对小程序业务开发中遇到的各类痛点问题提出了解决方案，并在集团内部建设了完善的小程序跨端开发生态。目前，Mpx 已经覆盖支持了集团内部全量小程序业务开发，成为了集团小程序开发的统一技术标准。")]),t._v(" "),s("p",[t._v("随着小程序业务的发展演进，性能和包体积的重要性愈发凸显，Mpx从设计之初就非常重视性能和包体积的优化，本次的 "),s("strong",[t._v("Mpx2.9")]),t._v(" 版本更新带来的三大核心特性——原子类、SSR 和包体积优化也都与性能和包体积息息相关，下面我们逐个展开介绍。")]),t._v(" "),s("h2",{attrs:{id:"原子类支持"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原子类支持"}},[t._v("#")]),t._v(" 原子类支持")]),t._v(" "),s("p",[t._v("原子类(utility-first CSS)是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，比较知名的有 "),s("a",{attrs:{href:"https://github.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github"),s("OutboundLink")],1),t._v("，"),s("a",{attrs:{href:"https://openai.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("OpenAI"),s("OutboundLink")],1),t._v("，"),s("a",{attrs:{href:"https://top10.netflix.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Netflix"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://www.jpl.nasa.gov/",target:"_blank",rel:"noopener noreferrer"}},[t._v("NASA官网"),s("OutboundLink")],1),t._v(" 等。使用原子类离不开原子类框架的支持，常用的原子类框架有 "),s("a",{attrs:{href:"https://tailwindcss.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Tailwindcss"),s("OutboundLink")],1),t._v("、"),s("a",{attrs:{href:"https://windicss.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Windicss"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://unocss.dev/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Unocss"),s("OutboundLink")],1),t._v(" 等。")]),t._v(" "),s("p",[t._v("在 Mpx2.9 版本中，我们在框架中内置了原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx 页面/组件模板中直接使用一些预定义的基础样式类，诸如 flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("flex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-base text-black font-semibold mb-2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Erin Lindford\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-gray-500 font-medium pb-3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Product Engineer\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Message\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/Or3aaN-mmxV8pK-LmEVPm_demo.png",alt:"utility-css-demo"}})]),t._v(" "),s("p",[t._v("相较于传统的自定义类编写样式的方式，使用原子类能给你带来以下这些好处：")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("不用再烦恼于为自定义类取类名")]),t._v("，传统样式开发中，我们仅仅是为某个元素定义样式就需要绞尽脑汁发明一些抽象的类名，还得提防类名冲突，使用原子类可以完全将你从这种琐碎无趣的工作中解放；")]),t._v(" "),s("li",[s("strong",[t._v("停止 css 体积的无序增长")]),t._v("，传统样式开发中，css 体积会随着你的迭代不断增长，而在原子类中，一切样式都可以复用，你几乎不需要编写新的 css；")]),t._v(" "),s("li",[s("strong",[t._v("让调整样式变得更加安全")]),t._v("，传统 css 是全局的，当你修改某个样式时无法保障其不会破坏其他地方的样式，而你在模板中使用的原子类是本地的，你完全不用担心修改它会影响其他地方。")])]),t._v(" "),s("p",[t._v("而相较于使用内联样式，原子类也有一些重要的优势：")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("约束下的设计")]),t._v("，使用内联样式时，里面的每一个数值都是魔法数字（magic number）\n，而通过原子工具类，你可以选择一些符合预定义设计规范的样式，便于构筑具有视觉一致性的UI；")]),t._v(" "),s("li",[s("strong",[t._v("响应式设计")]),t._v("，你无法在内联样式中使用媒体查询，然而通过原子类框架中提供的响应式工具，你可以轻而易举地构建出响应式界面；")]),t._v(" "),s("li",[s("strong",[t._v("Hover、focus 和其他状态")]),t._v("，使用内联样式无法定义特定状态下的样式，如 hover 和 focus，通过原子类框架的状态变量能力，我们可以轻松为这些状态定义样式。")])]),t._v(" "),s("p",[t._v("看到这里相信你已经迫不及待地想要在 Mpx 中体验原子类开发了吧，使用最新版本的 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 脚手架创建项目时，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用原子类，可使用的工具类可以参考 "),s("a",{attrs:{href:"https://unocss.dev/interactive/",target:"_blank",rel:"noopener noreferrer"}},[t._v("交互示例"),s("OutboundLink")],1),t._v("，在已有项目中开启原子类支持可以参考"),s("a",{attrs:{href:"https://mpxjs.cn/guide/advance/utility-first-css.html#compile-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("配置指南"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"小程序原子类使用注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#小程序原子类使用注意事项"}},[t._v("#")]),t._v(" 小程序原子类使用注意事项")]),t._v(" "),s("p",[t._v("小程序和 web 环境对于 css 的支持存在底层差异，小程序内也存在大量自身独有的技术特性，Mpx 在支持原子类时针对这些环境特异性进行了抹平和适配，在框架的支持下，我们实现了大部分（超过90%）原子类功能和工具类在小程序环境下正常使用，并额外支持了原子类产物的分包输出和样式隔离下的原子类使用，详情如下：")]),t._v(" "),s("h4",{attrs:{id:"特殊字符转义"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#特殊字符转义"}},[t._v("#")]),t._v(" 特殊字符转义")]),t._v(" "),s("p",[t._v("现代原子类框架支持 "),s("code",[t._v("value auto-infer")]),t._v("（值自动推导），可以在模版中根据相关规则书写灵活的自定义值原子类，如 "),s("code",[t._v("p-5px bg-[hsl(211.7,81.9%,69.6%)]")]),t._v(" 等，针对原子类中出现的 "),s("code",[t._v("[")]),t._v(" "),s("code",[t._v("(")]),t._v(" "),s("code",[t._v(",")]),t._v(" 等特殊字符，在 web 中会通过转义字符 "),s("code",[t._v("\\")]),t._v(" 进行转义，由于小程序环境下不支持 css 选择器中出现 "),s("code",[t._v("\\")]),t._v(" 转义字符，我们内置支持了一套不带 "),s("code",[t._v("\\")]),t._v(" 的转义规则对这些特殊字符进行转义，同时替换模版和 css 文件中的类名，内建的默认转义规则如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" escapeMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'('")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_pl_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("')'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_pr_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'['")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_bl_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("']'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_br_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'{'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_cl_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'}'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_cr_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'#'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_h_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'!'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_i_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'/'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_s_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'.'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_d_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("':'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_c_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("','")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_2c_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'%'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_p_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'\\''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_q_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'\"'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_dq_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'+'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_a_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_si_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unknown用于兜底不在上述范围中未知的转义字符")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unknown")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_u_'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("与此同时，用户也可以通过传递 "),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 的 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#escapeMap",target:"_blank",rel:"noopener noreferrer"}},[t._v("escapeMap"),s("OutboundLink")],1),t._v(" 配置项来覆盖内建的转义规则。")]),t._v(" "),s("h4",{attrs:{id:"原子类分包输出"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原子类分包输出"}},[t._v("#")]),t._v(" 原子类分包输出")]),t._v(" "),s("p",[t._v("在 web 中，原子类会被全部打包输出单个样式文件，一般会放置在顶层样式表中以供全局访问，但在小程序中这种全量的输出策略并不是最优的，主要原因在于小程序中可供全局访问的主包体积存在 "),s("strong",[t._v("2M 大小限制")]),t._v("，主包体积十分紧缺珍贵，Mpx 在构建输出时遵循着分包优先的原则，尽可能充分利用分包体积从而减少对主包体积的占用，再进行原子类产物输出时，我们也遵循了相同的原则。")]),t._v(" "),s("p",[t._v("在Mpx中，我们在收集原子类时同时记录了每个原子类的引用分包，在收集结束后根据每个原子类的分包引用数量决定该原子类应该输出到主包还是分包当中，我们在 "),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 中提供了 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#minCount",target:"_blank",rel:"noopener noreferrer"}},[t._v("minCount"),s("OutboundLink")],1),t._v(" 配置项来决定分包的输出规则，该配置项的默认值为2，即当一个原子类被2个或以上分包引用时，会被作为公共原子类抽取到主包中，否则输出到所属分包中，这也是全局最优的策略。当我们想要让原子类输出产物更少地占用主包体积时，我们也可以将"),s("code",[t._v("minCount")]),t._v("值调大，让原子类抽取到主包的条件更加苛刻，不过这样也会伴随着原子类分包冗余的增加。")]),t._v(" "),s("p",[s("code",[t._v("unocss.config.js")]),t._v(" 配置中定义的 "),s("code",[t._v("safelist")]),t._v(" 原子类默认会输出到主包，为了组件局部使用的 "),s("code",[t._v("safelist")]),t._v(" 有输出到分包的机会，我们在模版中提供了"),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#commentConfig",target:"_blank",rel:"noopener noreferrer"}},[t._v("注释配置"),s("OutboundLink")],1),t._v("（comments config），灵感来源于 "),s("code",[t._v("webpack")]),t._v(" 中的魔法注释（magic comments），用户可以在组件模版中通过"),s("code",[t._v("注释配置")]),t._v("声明当前组件所需的 "),s("code",[t._v("safelist")]),t._v("，对应的原子类也会根据上述的规则输出到主包或分包中，使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_safelist: 'text-red-500 bg-blue-500' --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 动态样式中可以使用text-red-500和bg-blue-500原子类 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{classObj}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h4",{attrs:{id:"样式隔离与组件分包异步"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#样式隔离与组件分包异步"}},[t._v("#")]),t._v(" 样式隔离与组件分包异步")]),t._v(" "),s("p",[t._v("在小程序中，自定义组件的样式默认是隔离的，web 中通过全局样式访问原子类的方式不再生效，不过由于小程序提供了"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB",target:"_blank",rel:"noopener noreferrer"}},[t._v("样式隔离配置"),s("OutboundLink")],1),t._v("，我们可以将该组件样式隔离配置调整为 "),s("code",[t._v("apply-shared")]),t._v(" 来获取页面或 app 中定义的原子类，但是当我们在使用传统类名和原子类混合开发或者迁移原子类的过程中，我们往往希望保留原本自定义组件的样式隔离。")]),t._v(" "),s("p",[t._v("针对这种情况，我们在 "),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 中提供了 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#styleIsolation",target:"_blank",rel:"noopener noreferrer"}},[t._v("styleIsolation"),s("OutboundLink")],1),t._v(" 配置项，可选设置为 "),s("code",[t._v("isolated")]),t._v("|"),s("code",[t._v("apply-shared")]),t._v("，当设置为 "),s("code",[t._v("isolated")]),t._v(" 时每个组件都会通过 "),s("code",[t._v("@import")]),t._v(" 独立引用主包或者分包的原子类样式文件，因此不会受到样式隔离的影响；当设置为 "),s("code",[t._v("apply-shared")]),t._v(" 时，只有 app 和分包页面会引用对应的原子类样式文件，自定义组件需要通过配置样式隔离为 "),s("code",[t._v("apply-shared")]),t._v(" 使原子类生效。")]),t._v(" "),s("p",[t._v("在组件分包异步的情况下对应组件即使将样式隔离配置为 "),s("code",[t._v("apply-shared")]),t._v(" 的情况下，"),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 也需要将  "),s("code",[t._v("styleIsolation")]),t._v(" 设置为 "),s("code",[t._v("isolated")]),t._v(" 才能正常工作，原因在于组件分包异步的情况下，组件被其他分包的页面所引用渲染，由于上述原子类样式分包输出的规则，其他分包的页面中可能并不包含当前组件所需的原子类，只有在 "),s("code",[t._v("isolated")]),t._v(" 模式下由组件自身引用所需的原子类样式才能保证正常工作，类似于 "),s("code",[t._v("safelist")]),t._v("，我们也提供了"),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#commentConfig",target:"_blank",rel:"noopener noreferrer"}},[t._v("注释配置"),s("OutboundLink")],1),t._v("的方式对组件的 "),s("code",[t._v("styleIsolation")]),t._v(" 模式进行局部配置，示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_styleIsolation: 'isolated' --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 当前组件会直接引用对应主包或分包的原子类样式 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("@dark:(text-white bg-dark-500)"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"原子类使用参考文档"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原子类使用参考文档"}},[t._v("#")]),t._v(" 原子类使用参考文档")]),t._v(" "),s("p",[t._v("Mpx 中使用原子类的详细参考文档如下：")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://mpxjs.cn/guide/advance/utility-first-css.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("原子类使用指南"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#MpxUnocssPlugin",target:"_blank",rel:"noopener noreferrer"}},[t._v("原子类 API 参考"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"输出-web-支持-ssr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#输出-web-支持-ssr"}},[t._v("#")]),t._v(" 输出 web 支持 SSR")]),t._v(" "),s("p",[t._v("近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，各类SSR框架层出不穷，未来进一步提升性能表现，在 SSR 的基础上还演进出 "),s("a",{attrs:{href:"https://docs.astro.build/en/concepts/islands/",target:"_blank",rel:"noopener noreferrer"}},[t._v("islands architecture"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://qwik.builder.io/docs/concepts/resumable/",target:"_blank",rel:"noopener noreferrer"}},[t._v("0 hydration"),s("OutboundLink")],1),t._v(" 等更加精细复杂的理念和架构。")]),t._v(" "),s("p",[t._v("近两年随着团队对于前端性能的重视，SSR/SSG 技术也在团队业务中逐步推广落地，并在首屏性能方面取得了显著的收效。但由于过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 Mpx2.9 版本中，我们对 web 输出流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整实现了 SSR 技术方案。")]),t._v(" "),s("h3",{attrs:{id:"配置使用-ssr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置使用-ssr"}},[t._v("#")]),t._v(" 配置使用 SSR")]),t._v(" "),s("p",[t._v("在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85",alt:"Vue SSR流程"}})]),t._v(" "),s("p",[t._v("Mpx SSR 实现的大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：")]),t._v(" "),s("h4",{attrs:{id:"构建server-client-bundle"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#构建server-client-bundle"}},[t._v("#")]),t._v(" 构建server/client bundle")]),t._v(" "),s("p",[t._v("SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。\n在 Vue 中，我们需要提供 "),s("code",[t._v("entry-server.js")]),t._v(" 和 "),s("code",[t._v("entry-client.js")]),t._v(" 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 "),s("code",[t._v("app.mpx")]),t._v(" 作为统一构建入口，无需区分 server 和 client。")]),t._v(" "),s("h5",{attrs:{id:"服务端构建配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#服务端构建配置"}},[t._v("#")]),t._v(" 服务端构建配置")]),t._v(" "),s("p",[t._v("服务端配置中除了将 entry 制定为 "),s("code",[t._v("app.mpx")]),t._v(" 及其它基础配置外，最重要的是安装 "),s("code",[t._v("vue-server-renderer")]),t._v(" 包中提供的  "),s("code",[t._v("server-plugin")]),t._v(" 插件，该插件能够构建产出 "),s("code",[t._v("vue-ssr-server-bundle.json")]),t._v(" 文件供 "),s("code",[t._v("renderer")]),t._v(" 后续消费。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.server.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" VueSSRServerPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer/server-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 entry 指向项目的 app.mpx 文件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 产出 `vue-ssr-server-bundle.json`")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueSSRServerPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更加详细的配置说明可参考 "),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/build-config.html#server-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue SSR的服务端配置"),s("OutboundLink")],1)]),t._v(" "),s("h5",{attrs:{id:"客户端构建配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#客户端构建配置"}},[t._v("#")]),t._v(" 客户端构建配置")]),t._v(" "),s("p",[t._v("类似服务端构建配置，在客户端构建中我们需要使用 "),s("code",[t._v("vue-server-renderer")]),t._v(" 包中 "),s("code",[t._v("client-plugin")]),t._v(" 插件来帮助我们生成客户端环境的资源清单 "),s("code",[t._v("vue-ssr-client-manifest.json")]),t._v("，并供 "),s("code",[t._v("renderer")]),t._v(" 后续消费。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.client.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" VueSSRClientPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer/client-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 entry 指向项目的 app.mpx 文件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 产出 `vue-ssr-client-manifest.json`。")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueSSRClientPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更加详细的配置说明可参考 "),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/build-config.html#client-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue SSR的客户端配置"),s("OutboundLink")],1)]),t._v(" "),s("h4",{attrs:{id:"准备页面模版"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#准备页面模版"}},[t._v("#")]),t._v(" 准备页面模版")]),t._v(" "),s("p",[t._v("SSR 渲染中，我们创建 "),s("code",[t._v("renderer")]),t._v(" 需要一个页面模板，简单的示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token doctype"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<!")]),s("span",{pre:!0,attrs:{class:"token doctype-tag"}},[t._v("DOCTYPE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token name"}},[t._v("html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("en"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Hello"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--vue-ssr-outlet--\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 "),s("code",[t._v("\x3c!--vue-ssr-outlet--\x3e")]),t._v("注释，标记 SSR 渲染产物的插入位置，如使用 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 脚手架创建 SSR 项目，该模版已经内置于脚手架中。")]),t._v(" "),s("h4",{attrs:{id:"集成启动-ssr-服务"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#集成启动-ssr-服务"}},[t._v("#")]),t._v(" 集成启动 SSR 服务")]),t._v(" "),s("p",[t._v("当我们准备好页面模版和双端构建产物后，我们就可以创建 "),s("code",[t._v("renderer")]),t._v(" 并与 Node 服务进行集成，启动 SSR 服务，下面以 "),s("code",[t._v("express")]),t._v(" 为例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//server.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" app "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'express'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createBundleRenderer "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 vue-server-renderer/server-plugin 生成的文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" serverBundle "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../dist/server/vue-ssr-server-bundle.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 vue-server-renderer/client-plugin 生成的文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" clientManifest "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../dist/client/vue-ssr-client-manifest.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 页面模版文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" template "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("readFileSync")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/index.template.html'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'utf-8'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建 renderer 渲染器")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" renderer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createBundleRenderer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("serverBundle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("runInNewContext")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    template"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    clientManifest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注册启动 SSR 服务")]),t._v("\napp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'*'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("req"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" req"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  renderer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("renderToString")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Internal Server Error'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("html"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\napp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("listen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8080")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"ssr-生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ssr-生命周期"}},[t._v("#")]),t._v(" SSR 生命周期")]),t._v(" "),s("p",[t._v("在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是"),s("code",[t._v("onAppInit")]),t._v("、"),s("code",[t._v("serverPrefetch")]),t._v(" 和 "),s("code",[t._v("onSSRAppCreated")]),t._v("，以统一服务端与客户端的构建入口，下面展开介绍：")]),t._v(" "),s("h4",{attrs:{id:"onappinit"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onappinit"}},[t._v("#")]),t._v(" onAppInit")]),t._v(" "),s("p",[t._v("在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，"),s("code",[t._v("onAppInit")]),t._v(" 生命周期会在应用创建 "),s("code",[t._v("new Vue(...)")]),t._v(" 前被调用，其执行的返回结果会被合并到创建应用的 "),s("code",[t._v("options")]),t._v(" 中")]),t._v(" "),s("p",[t._v("很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 "),s("code",[t._v("@mpxjs/pinia")]),t._v(" 作为全局状态管理工具，我们可以在 "),s("code",[t._v("onAppInit")]),t._v(" 中返回全新的 "),s("code",[t._v("pinia")]),t._v(" 示例避免产生跨请求状态污染，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPinia "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onAppInit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pinia "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPinia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      pinia\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"serverprefetch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#serverprefetch"}},[t._v("#")]),t._v(" serverPrefetch")]),t._v(" "),s("p",[t._v("当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：")]),t._v(" "),s("p",[t._v("选项式 API：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useStore "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store/index'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("serverPrefetch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" query "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("query\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the promise from the action, fetch data and update state")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("query"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("组合式 API：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" onServerPrefetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getCurrentInstance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useStore "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store/index'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("userStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onServerPrefetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" query "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getCurrentInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("proxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("query\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the promise from the action, fetch data and update state")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("query"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("关于数据预拉取更详细的说明可以查看"),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/data.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("h4",{attrs:{id:"onssrappcreated"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onssrappcreated"}},[t._v("#")]),t._v(" onSSRAppCreated")]),t._v(" "),s("p",[t._v("在 Vue SSR 项目中，我们会在 "),s("code",[t._v("entry-server.js")]),t._v(" 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 "),s("code",[t._v("app")]),t._v("。")]),t._v(" "),s("p",[t._v("在 Mpx SSR 中，我们将这部分逻辑整合在 "),s("code",[t._v("onSSRAppCreated")]),t._v(" 中执行，该生命周期执行时用户可以从参数中获取应用实例 "),s("code",[t._v("app")]),t._v("、路由实例 "),s("code",[t._v("router")]),t._v("、数据管理实例 "),s("code",[t._v("pinia")]),t._v(" 和 SSR 上下文 "),s("code",[t._v("context")]),t._v("，在完成必要的操作后，该生命周期需要返回一个 "),s("code",[t._v("resolve(app)")]),t._v(" 的 promise。")]),t._v(" "),s("p",[t._v("通常我们会在 "),s("code",[t._v("onSSRAppCreated")]),t._v(" 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...,")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onSSRAppCreated")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置服务端路由路径")]),t._v("\n        router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 应用完成渲染时执行")]),t._v("\n          context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("rendered")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将服务端渲染后得到的 pinia.state 同步到 context.state 中，")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注入到 HTML 中，并在客户端运行时再读取同步")]),t._v("\n            context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回应用程序实例")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。")]),t._v(" "),s("h3",{attrs:{id:"其他注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#其他注意事项"}},[t._v("#")]),t._v(" 其他注意事项")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。")])]),t._v(" "),s("li",[s("p",[t._v("在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。")])]),t._v(" "),s("li",[s("p",[t._v("由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 "),s("code",[t._v("mpx.config.webRouteConfig")]),t._v(" 将路由模式设置成 "),s("code",[t._v("history")]),t._v(" 模式。")])])]),t._v(" "),s("h2",{attrs:{id:"包体积优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#包体积优化"}},[t._v("#")]),t._v(" 包体积优化")]),t._v(" "),s("p",[t._v("近几年来随着小程序的商业成功和用户增长，各大互联网公司都在加大对小程序业务的投入，小程序的体量和复杂性都在快速增长，在这样的背景下，小程序的包体积大小成为了制约小程序业务迭代发展的一大限制，同时过大的包体积也会显著影响小程序的性能表现。")]),t._v(" "),s("p",[t._v("Mpx 在设计之初就考虑了包体积问题，完整继承了 webpack 已有的代码优化能力，如公共模块抽离、tree shaking、混淆压缩等。除此之外，我们还设计开发了业内最完善的分包构建流程，完整支持基于配置声明和依赖分析的普通分包、独立分包及分包异步化的构建输出，极大地缓解了复杂小程序中的主包和总包体积过大的问题。在 Mpx2.9 版本中，我们针对复杂小程序页面组件和 JS 模块众多的特点，对构建产物进行了针对性地优化，进一步降低了构建产物体积，主要优化项如下：")]),t._v(" "),s("h3",{attrs:{id:"模版代码优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模版代码优化"}},[t._v("#")]),t._v(" 模版代码优化")]),t._v(" "),s("p",[t._v("Mpx 通过 webpack 进行打包构建，并对小程序原生 commonjs 支持进行适配改造，以实现 webpack 构建产物在小程序环境下运行，为了将构建产物中的模块和 chunk 链接到一起，webpack 和 mpx 会在构建产物生成一些模版代码进行相关工作，下面是一个页面 js 中包含的模版代码示例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" self "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nself"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackChunkmpx_test_2_8 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../bundle.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("self"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackChunkmpx_test_2_8 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" self"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackChunkmpx_test_2_8 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("405")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1307")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" o")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4236")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" e\n  e "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1307")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("s "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("可以看出模版代码主要由 chunk 链接代码，chunk id，模块 id 和模块包装函数组成，对于中小项目来说，这些模版代码一般不会占用太多体积，但是在复杂大体量小程序中众多模块的叠加效应下，这部分体积就变得不可忽视。")]),t._v(" "),s("p",[t._v("我们对模版代码的生成逻辑和生成产物进行分析，发现 webpack 生产模式的默认配置中，很多配置项并不是体积最优的选项，一个典型的例子在于模块/chunk id：为了保障生成产物的内容稳定，来尽可能提升浏览器的缓存利用率，webpack 默认的模块/chunk id 采用 "),s("code",[t._v("deterministic")]),t._v(" 模式进行生成，该模式下模块 id 为模块源路径的定长数字 hash，比项目模块总数长 1 位。由于在小程序中代码包按照版本的维度进行全量管理，保证文件局部的内容稳定在小程序环境下无正向意义，这就有了优化空间，我们可以简单将模块/chunk id 的生成逻辑改为数字自增，在主小程序中就能节省出上百 KB 总包体积。")]),t._v(" "),s("p",[t._v("类似的可优化点还存在于 chunk 链接代码和模块包装函数当中，我们在 "),s("code",[t._v("@mpxjs/webpack-plugin@2.9")]),t._v(" 版本中提供了一个新的配置项 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#optimizesize",target:"_blank",rel:"noopener noreferrer"}},[t._v("optimizeSize"),s("OutboundLink")],1),t._v("，其中整合了一系列模版代码体积优化配置，开启后就能自动优化构建产物中的模版代码体积，在实际业务中，我们开启 "),s("code",[t._v("optimizeSize")]),t._v(" 后可以减少总包体积约 "),s("strong",[t._v("1.6%")]),t._v("，效果非常显著，下面是上述示例在开启 "),s("code",[t._v("optimizeSize")]),t._v(" 后的产物对比：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" g "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\ng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../bundle.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("448")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" o")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("463")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" e\n  e "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("448")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("s "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"空模块移除"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#空模块移除"}},[t._v("#")]),t._v(" 空模块移除")]),t._v(" "),s("p",[t._v("Mpx 在处理 "),s("code",[t._v(".mpx")]),t._v(" 单文件时会将其分拆为 "),s("code",[t._v("template/js/style/json")]),t._v(" 四个新模块来进行分别处理，其中 "),s("code",[t._v("template/style/json")]),t._v(" 部分的内容会在处理后通过内置的 "),s("code",[t._v("extractor")]),t._v(" 抽取输出为静态文件，抽取之后原本分拆出来的模块就会以空模块的形式残留在构建产物中（template 模块在抽取后还需要保留 render 函数和 refs 等信息所以不会成为空模块），如下所示：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("533")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("__unused_webpack_module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" __unused_webpack_exports"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" __webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* template */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("535")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("536")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* json */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("537")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* script */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("534")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("536")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("537")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("从上面示例中可以看出 "),s("code",[t._v("536/537")]),t._v(" 模块的定义和引用都是完全不必要的，但由于 webpack 本身对于空模块没有进行识别和优化的手段，在过去的版本中这些空模块代码会占用我们一部分总包体积。在 Mpx2.9 版本中，我们定义了全新的依赖类型 "),s("code",[t._v("CommonjsExtractDependency")]),t._v(" 对于这类可能被抽取成为空模块的 "),s("code",[t._v("request")]),t._v(" 进行识别处理，当模块内容在完成抽取后为空时，自动将其从模块图中移除，并在产物生成时不再生成其引用代码。该项优化措施内置开启，升级后自动生效，在实际业务中可减少总包体积约 "),s("strong",[t._v("0.7%")]),t._v("。")]),t._v(" "),s("h3",{attrs:{id:"render函数优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#render函数优化"}},[t._v("#")]),t._v(" Render函数优化")]),t._v(" "),s("p",[t._v("Render 函数是 Mpx 运行时 "),s("code",[t._v("setData")]),t._v(" 优化的一项核心设计，我们在模版编译时将用户模版转换为简易的 render 函数，该函数执行时能够完全模拟视图渲染的数据访问过程，正确地收集当前视图的数据依赖，避免将视图不需要的数据通过 "),s("code",[t._v("setData")]),t._v(" 发送到视图中。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/ZQ6p8Rs2m7QCumOll3nmd.jpg",alt:"render函数"}})]),t._v(" "),s("p",[t._v("虽然我们生成的简化版 render 函数仅保留了数据访问逻辑，在代码体积上并不算大，但是仍然存在着一定的优化空间，我们来看下面这个例子：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("可以看出 "),s("code",[t._v("if block")]),t._v(" 下存在着大量冗余不必要的数据访问，例如 "),s("code",[t._v("this.a")]),t._v(" 和 "),s("code",[t._v("this.b")]),t._v(" 在父级 "),s("code",[t._v("block")]),t._v(" 中已经进行过访问，"),s("code",[t._v("this.c.a")]),t._v(" 和 "),s("code",[t._v("this.c.b")]),t._v(" 由于在 "),s("code",[t._v("if condition")]),t._v(" 中进行过 "),s("code",[t._v("this.c")]),t._v(" 的访问也不再必要（render函数执行时会对模版依赖数据进行深度diff，父路径访问后子路径就无需再进行访问），上述 render 函数可以优化为：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在 Mpx2.9 版本中，我们通过两轮 "),s("code",[t._v("ast")]),t._v(" 遍历（"),s("code",[t._v("2 pass ast travese")]),t._v("）的方式实现了这个优化，在第一轮遍历中，我们收集了数据访问信息并按照 "),s("code",[t._v("block")]),t._v(" 结构存储在 "),s("code",[t._v("blockVisitTree")]),t._v(" 中，第二轮遍历时依据 "),s("code",[t._v("blockVisitTree")]),t._v(" 中的信息对不必要的数据访问进行剪枝优化。")]),t._v(" "),s("p",[t._v("除此之外，我们也大幅优化了 render 函数中的数据收集代码，有效地降低了 render 函数的体积占用。")]),t._v(" "),s("p",[t._v("该优化目前没有默认开启，可以通过 "),s("code",[t._v("@mpxjs/webpack-plugin")]),t._v(" 中的 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#optimizerenderrules",target:"_blank",rel:"noopener noreferrer"}},[t._v("optimizeRenderRules"),s("OutboundLink")],1),t._v(" 配置项配置生效范围进行开启，全量开启后在实际业务中可节省总包体积约 "),s("strong",[t._v("5%")]),t._v("。")]),t._v(" "),s("h2",{attrs:{id:"未来规划"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#未来规划"}},[t._v("#")]),t._v(" 未来规划")]),t._v(" "),s("p",[t._v("在未来，我们对 Mpx 构建产物还有进一步的优化方案可以探索实施，主要分为两个方向：")]),t._v(" "),s("ul",[s("li",[t._v("编译注入代码优化，在功能不变的情况下简化编译注入的代码，对于 render 函数也有一种运行时有损的方案（略微增大运行时开销）可以尝试")]),t._v(" "),s("li",[t._v("模版和JSON压缩，对模版和JSON中的组件名及组件路径进行短哈希压缩，缺点是丢失dist产物的可读性，可能需要对其提供 sourceMap 支持")])]),t._v(" "),s("p",[t._v("除此之外，我们近期的框架升级计划还包括：")]),t._v(" "),s("ul",[s("li",[t._v("局部运行时渲染增强")]),t._v(" "),s("li",[t._v("数据响应升级为 proxy 实现，输出 web 升级为 vue3")]),t._v(" "),s("li",[t._v("支付宝 2.0 基础库适配优化")]),t._v(" "),s("li",[t._v("微信 skyline 适配优化")]),t._v(" "),s("li",[t._v("输出 Hummer 能力完善")])]),t._v(" "),s("p",[t._v("在构建提速方面，我们也会在以下方向进行探索：")]),t._v(" "),s("ul",[s("li",[t._v("输出 web 支持 vite 构建")]),t._v(" "),s("li",[t._v("基于模块联邦的分布式构建")]),t._v(" "),s("li",[t._v("基于 Rust 的高性能构建探索")])]),t._v(" "),s("p",[t._v("最后，特别感谢@"),s("a",{attrs:{href:"https://github.com/pagnkelly",target:"_blank",rel:"noopener noreferrer"}},[t._v("pagnkelly"),s("OutboundLink")],1),t._v("、@"),s("a",{attrs:{href:"https://github.com/yandadaFreedom",target:"_blank",rel:"noopener noreferrer"}},[t._v("yandadaFreedom"),s("OutboundLink")],1),t._v("和\n@"),s("a",{attrs:{href:"https://github.com/zhuzhh",target:"_blank",rel:"noopener noreferrer"}},[t._v("zhuzhh"),s("OutboundLink")],1),t._v("对于 2.9 版本功能开发的突出贡献，也欢迎大家使用 Mpx 进行小程序跨端开发并加入社区共建。")]),t._v(" "),s("p",[t._v("Github：https://github.com/didi/mpx")]),t._v(" "),s("p",[t._v("官网/文档：https://mpxjs.cn/")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/54.af3d3dcd.js b/docs-vuepress/.vuepress/dist/assets/js/54.af3d3dcd.js
new file mode 100644
index 0000000000..9223e3bf5a
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/54.af3d3dcd.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{399:function(t,r,e){"use strict";e.r(r);var l=e(4),i=Object(l.a)({},(function(){var t=this,r=t._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"mpx框架相关文章"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#mpx框架相关文章"}},[t._v("#")]),t._v(" Mpx框架相关文章")]),t._v(" "),r("ul",[r("li",[r("RouterLink",{attrs:{to:"/articles/1.0.html"}},[t._v("滴滴开源小程序框架Mpx")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/2.0.html"}},[t._v("Mpx发布2.0，完美支持跨平台开发")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/performance.html"}},[t._v("小程序框架运行时性能大测评")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/mpx1.html"}},[t._v("Mpx框架初体验")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/mpx2.html"}},[t._v("Mpx框架技术揭秘")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/size-control.html"}},[t._v("基于Mpx框架做体积优化")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/ts-derivation.html"}},[t._v("Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/2.7-release.html"}},[t._v("Mpx2.7 版本正式发布，大幅提升编译构建速度")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/2.8-release.html"}},[t._v("Mpx2.8 版本正式发布，使用组合式 API 开发小程序")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/mpx-cli-next.html"}},[t._v("Mpx-cli 插件化改造")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/unit-test.html"}},[t._v("Mpx 小程序单元测试能力建设与实践")])],1)])])}),[],!1,null,null,null);r.default=i.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/55.2d6ae2e1.js b/docs-vuepress/.vuepress/dist/assets/js/55.2d6ae2e1.js
new file mode 100644
index 0000000000..569840f194
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/55.2d6ae2e1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{405:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"mpxjs-cli-插件化改造"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxjs-cli-插件化改造"}},[t._v("#")]),t._v(" @mpxjs/cli 插件化改造")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli",target:"_blank",rel:"noopener noreferrer"}},[t._v("@mxpjs/cli 地址"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"背景-现状"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#背景-现状"}},[t._v("#")]),t._v(" 背景 & 现状")]),t._v(" "),s("p",[t._v("Mpx 脚手架 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 作为 Mpx 生态当中比较重要的一部分，是使用 Mpx 进行小程序开发的入口。")]),t._v(" "),s("p",[s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 版本整体是基于模板配置的方式完成项目的初始化，整个的工作流是：")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("下载一份存放于远端的 mpx 项目原始模板（mpx-template）")])]),t._v(" "),s("li",[s("p",[t._v("根据用户的 prompts 选项完成用户选项的注入，并初始化最终的项目文件")])])]),t._v(" "),s("p",[t._v("完成项目的初始化后，除了一些基础配置文件外，整个项目的文件主要包含了如下的结构：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("project\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" src "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 项目源码")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" config "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 项目配置文件")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置入口文件")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" mpxLoader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("conf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx-loader 配置")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" mpxPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("conf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx webpack-plugin 配置")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("conf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 用户的 prompts 选择信息")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" build "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 编译构建配置")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" build"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 构建编译脚本")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" getPlugins"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack plugins ")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" getRules"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack module rules")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" getWebpackConf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack 配置生成辅助函数")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" utils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 工具函数")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" webpack"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("base"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("conf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack 基础配置")]),t._v("\n")])])]),s("p",[t._v("在初始化的项目当中，有关项目的所有配置文件，编译构建代码是全部暴露给开发者的，开发者可以对这些文件进行修改来满足自己实际的项目开发需要。同时还可以基于这一套原始的模板文件二次拓展为满足自己业务场景的模板。")]),t._v(" "),s("p",[s("strong",[t._v("基于远程模板初始化项目的方式最大的一个好处就是将项目所有的底层配置完全暴露给开发者，开发者可以任意去修改对应的配置。")])]),t._v(" "),s("h2",{attrs:{id:"mpxjs-cli-2-x-自身的痛点"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxjs-cli-2-x-自身的痛点"}},[t._v("#")]),t._v(" "),s("code",[t._v("mpxjs/cli@2.x")]),t._v(" 自身的痛点")]),t._v(" "),s("p",[t._v("目前 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 采用这种基于模板的方式面临着两方面的痛点：")]),t._v(" "),s("ol",[s("li",[t._v("对于 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 的使用者而言：")])]),t._v(" "),s("ul",[s("li",[s("p",[t._v("模板和业务项目割裂：远程模板没有严格的版本控制，用户无法感知到远程模板的更新变化；")])]),t._v(" "),s("li",[s("p",[t._v("项目升级困难：对于用户来说没有一个很好的方式完成升级工作，基本只能通过 copy 代码的方式，将 "),s("code",[t._v("mpx-template")]),t._v(" 更新后的内容复制一份到自己的项目当中；或者是通过脚手架重新创建一个新的项目，将老的代码迁移到新项目当中；")])]),t._v(" "),s("li",[s("p",[t._v("项目结构臃肿：从项目结构角度来说没法做到按需，初始化代码臃肿。Mpx 支持了小程序跨平台、跨端、小程序插件等等相关的开发，不同的编译构建配置都需要全部生成，在运行时阶段才能决定是否启动对应的功能；")])]),t._v(" "),s("li",[s("p",[t._v("跨 Web 构建能力弱：在基于 Mpx 的跨 Web 场景构建中有关 "),s("code",[t._v("web")]),t._v(" 侧的编译构建的配置是比较初级的，像 "),s("code",[t._v("MPA 多页应用")]),t._v(" 等比较常用的功能是需要用户重新去手动搭建一套的；")])]),t._v(" "),s("li",[s("p",[t._v("可拓展性差，基于目前的模板拉取的方式无法满足多样化的业务需求场景迭代；")])])]),t._v(" "),s("ol",{attrs:{start:"2"}},[s("li",[t._v("对于 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 的开发者而言：")])]),t._v(" "),s("ul",[s("li",[t._v("分支场景多，功能模块耦合度高：脚手架的所有功能全部集合到一个大的模板当中。各部分的能力都是耦合在一起，为了满足不同项目的实际开发需要，代码里面需要写比较多的 "),s("code",[t._v("if...else...")]),t._v(" 判断逻辑来决定要开启哪些功能，生成哪部分的模板；")]),t._v(" "),s("li",[t._v("长期可维护性差，开发心智负担重；")])]),t._v(" "),s("p",[s("strong",[t._v("针对以上问题，通过调研业内一些优秀的脚手架工具，发现 "),s("code",[t._v("@vue/cli")]),t._v(" 插件化的架构设计能很好的去解决我们以上所遇到的问题。核心思路是将 "),s("code",[t._v("@vue/cli")]),t._v(" 作为 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 底层的引擎，收敛 Mpx 对于核心依赖管理、模板、构建配置的能力，充分利用 "),s("code",[t._v("@vue/cli")]),t._v(" 提供的插件机制去构建、拓展上层的插件集。")])]),t._v(" "),s("h3",{attrs:{id:"有关-vue-cli"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#有关-vue-cli"}},[t._v("#")]),t._v(" 有关 "),s("code",[t._v("@vue/cli")])]),t._v(" "),s("p",[t._v("简单介绍下 "),s("code",[t._v("@vue/cli")]),t._v(" 的插件化架构：")]),t._v(" "),s("p",[s("code",[t._v("@vue/cli@3.x")]),t._v(" 相较于 "),s("code",[t._v("2.x")]),t._v(" 版本相比，整个 "),s("code",[t._v("@vue/cli")]),t._v(" 的架构发生了非常大的变化，从基于模板的脚手架迭代为基于插件化的脚手架。简单的概述下整个插件化的构架就是：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/zfUXzzdOptIviAJ15AgSn_cli-3.png",alt:"mpx-cli-3"}})]),t._v(" "),s("ul",[s("li",[s("p",[t._v("@vue/cli 提供 vue cli 命令，负责偏好设置，生成模板、"),s("code",[t._v("vue-cli-plugin")]),t._v(" 插件依赖管理的工作，例如 "),s("code",[t._v("vue create <projectName>")]),t._v("、"),s("code",[t._v("vue add <pluginName>")]),t._v("；")])]),t._v(" "),s("li",[s("p",[t._v("@vue/cli-service 作为 @vue/cli 整个插件系统当中的内部核心插件，提供了 npm script 注册服务，内置了部分 webpack 配置的同时，又提供了 "),s("code",[t._v("vue-cli-plugin")]),t._v(" 插件的导入、加载以及 webpack 配置更新服务等。")])])]),t._v(" "),s("p",[t._v("以上是 "),s("code",[t._v("@vue/cli")]),t._v(" 生态当中最为核心的两部分内容，二者分工明确，各司其职。")]),t._v(" "),s("p",[t._v("此外在 "),s("code",[t._v("@vue/cli")]),t._v(" 生态当中非常重要的一个点就是 "),s("code",[t._v("vue-cli-plugin")]),t._v(" 插件，每个插件主要完成模板生成及生产编译构建配置。根据 "),s("code",[t._v("@vue/cli")]),t._v(" 设计的规范，开发一个 "),s("code",[t._v("vue-cli-plugin")]),t._v(" 需要遵照"),s("strong",[t._v("相关的约定")]),t._v("来进行开发：")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("@vue/cli "),s("strong",[t._v("约定")]),t._v("插件如果要生成模板，那么需要提供 "),s("code",[t._v("generator")]),t._v(" 入口文件；")])]),t._v(" "),s("li",[s("p",[t._v("@vue/cli-service "),s("strong",[t._v("约定")]),t._v("插件的 "),s("code",[t._v("webpack")]),t._v(" 配置更新需要放到插件的入口文件当中来完成，同时插件的命名也需要包含 "),s("code",[t._v("vue-cli-plugin")]),t._v(" 前缀，因为 @vue/cli-service 是依据命名来加载相关的插件的；")])])]),t._v(" "),s("h2",{attrs:{id:"插件化改造方案"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#插件化改造方案"}},[t._v("#")]),t._v(" 插件化改造方案")]),t._v(" "),s("p",[t._v("一张图了解下插件化改造之后的 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 的架构设计：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/hNaL_GUMzUVLOsyY5quGE_cli-2.png",alt:"mpx-cli-2"}})]),t._v(" "),s("h3",{attrs:{id:"底层能力"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#底层能力"}},[t._v("#")]),t._v(" 底层能力")]),t._v(" "),s("p",[t._v("将 "),s("code",[t._v("@vue/cli")]),t._v("、"),s("code",[t._v("@vue/cli-service")]),t._v(" 分别作为 "),s("code",[t._v("@mpx/cli")]),t._v("和 "),s("code",[t._v("@mpx/cli-service")]),t._v(" 的底层能力，即利用插件化的架构设计，同时还非常灵活的满足了 Mpx 做差异化场景迭代的定制化改造。上层的插件满足 "),s("code",[t._v("vue-cli-plugin")]),t._v(" 插件开发的规范，最终底层的能力还是依托于 "),s("code",[t._v("@vue/cli")]),t._v(" 和 "),s("code",[t._v("@vue/cli-service")]),t._v(" 进行工作。")]),t._v(" "),s("h3",{attrs:{id:"上层插件拆分"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#上层插件拆分"}},[t._v("#")]),t._v(" 上层插件拆分")]),t._v(" "),s("p",[t._v("将原本大而全的模板进行插件化拆分，从 Mpx 所要解决的问题以及设计思路来考虑，站在跨平台的角度：")]),t._v(" "),s("ol",[s("li",[t._v("web 开发")])]),t._v(" "),s("ul",[s("li",[t._v("基于 "),s("code",[t._v("wx")]),t._v(" 的跨 "),s("code",[t._v("web")]),t._v(" 开发；")])]),t._v(" "),s("ol",{attrs:{start:"2"}},[s("li",[t._v("小程序开发")])]),t._v(" "),s("ul",[s("li",[t._v("基于 "),s("code",[t._v("wx")]),t._v(" 的跨平台("),s("code",[t._v("ali")]),t._v("、"),s("code",[t._v("swan")]),t._v("，"),s("code",[t._v("tt")]),t._v("，"),s("code",[t._v("dd")]),t._v(")的小程序开发；")]),t._v(" "),s("li",[t._v("使用云函数的微信小程序开发；")]),t._v(" "),s("li",[t._v("微信小程序的插件模式的开发；")])]),t._v(" "),s("p",[t._v("一个项目可能只需要某一种开发模式，例如仅仅是微信小程序的插件模式开发，也有可能是小程序和web平台混合开发等等，不同的开发模式对应了：")]),t._v(" "),s("ol",[s("li",[s("p",[s("strong",[t._v("不同的目录结构")]),t._v("；")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("不同的编译构建配置")])])])]),t._v(" "),s("hr"),t._v(" "),s("p",[t._v("基于这样一种现状以及 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 所要解决的问题，从跨平台的角度出发将功能进行了拆分，最终拆解为如下的9个插件：")]),t._v(" "),s("ul",[s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx"),s("OutboundLink")],1),t._v("（mpx 基础开发插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-mp",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-mp"),s("OutboundLink")],1),t._v("（mpx 小程序平台开发插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-web",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-web"),s("OutboundLink")],1),t._v("（mpx 跨 web 平台开发插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-cloud-func",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-cloud-func"),s("OutboundLink")],1),t._v("（微信小程序云函数开发插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-plugin-mode",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-plugin-mode"),s("OutboundLink")],1),t._v("（微信小程序插件模式开发插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-eslint",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-eslint"),s("OutboundLink")],1),t._v("（mpx eslint 插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-unit-test",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-unit-test"),s("OutboundLink")],1),t._v("（小程序单元测试插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-typescript",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-typescript"),s("OutboundLink")],1),t._v("（mpx typescript 插件）")])])]),t._v(" "),s("p",[t._v("这些拆解出来的插件都将和功能相关的"),s("strong",[t._v("项目模板")]),t._v("以及"),s("strong",[t._v("编译构建")]),t._v("配置进行了收敛。")]),t._v(" "),s("p",[t._v("项目模板的生成不用说，借助 "),s("code",[t._v("@vue/cli")]),t._v(" 的 "),s("code",[t._v("Generator API")]),t._v(" 按需去生成项目开发所需要的模板，例如项目需要使用 "),s("code",[t._v("eslint")]),t._v(" 的功能，那么在生成项目的时候会生成对应 "),s("code",[t._v("vue-cli-plugin-mpx-eslint")]),t._v(" 所提供的模板文件，如果不需要使用，项目当中最终也不会出现和 "),s("code",[t._v("eslint")]),t._v(" 相关的文件配置。")]),t._v(" "),s("p",[t._v("重点说下编译构建的配置是如何进行拆解的：")]),t._v(" "),s("p",[s("strong",[t._v("在 "),s("code",[t._v("@vue/cli@3.x")]),t._v(" 基于插件的架构设计当中，决定是否要使用某个插件的依据就是判断这个插件是否被你的项目所安装")]),t._v("和基于模板的构架相比最大的区别就是：基于模板的架构在最终生成的模板配置里需要保存一些环境配置文件，以供编译构建的运行时来判断是否启用某些功能。但是基于插件的架构基本上是不再需要这些环境配置文件的，因为你如果要使用一个插件的功能，只需要安装它即可。")]),t._v(" "),s("p",[t._v("因此依照这样的设计规范，我们将：")]),t._v(" "),s("ul",[s("li",[s("p",[s("code",[t._v("eslint")])])]),t._v(" "),s("li",[s("p",[s("code",[t._v("unit-test")])])]),t._v(" "),s("li",[s("p",[s("code",[t._v("typescript")])])])]),t._v(" "),s("p",[t._v("这些非常独立的功能都单独抽离成了可拔插的插件，安装即启用。")]),t._v(" "),s("p",[t._v("以上功能有个特点就是和平台是完全解耦的，所以在拆解的过程中可以拆的比较彻底。但是由于 "),s("code",[t._v("mpx")]),t._v(" 项目的特殊性，即要支持基于 "),s("code",[t._v("wx")]),t._v(" 小程序的跨端以及 "),s("code",[t._v("web")]),t._v(" 开发，同时还要支持小程序的云函数、小程序插件模式的开发，且不同开发模式的编译构建配置都有些差异。可以用如下的集合图来表示他们之间的关系：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/3bgI4GSZ09ai4G1C3TDtr_cli-4.png",alt:"mpx-cli-4"}})]),t._v(" "),s("p",[t._v("不同插件进行组合使用来满足不同场景下的使用。")]),t._v(" "),s("p",[t._v("在不同平台开发模式下是有 "),s("code",[t._v("mpx")]),t._v(" 编译构建的基础配置的，这个是和平台没有太多关系，因此将这部分的配置单独抽离为一个插件："),s("code",[t._v("vue-cli-plugin-mpx")]),t._v("，"),s("strong",[t._v("同时这个插件也被置为了 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 的 "),s("code",[t._v("preset")]),t._v(" 预设插件，不管任何项目开发模式下，这个插件都会被默认的安装")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue-cli-plugin-mpx")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" webpackConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  webpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("module\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.json$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resourceQuery")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("asScript")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'javascript/auto'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  webpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("module\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wxs-pre-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(wxs|qs|sjs|filter\\.js)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pre")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mpx-wxs-pre-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wxsPreLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("loader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" transpileDepRegex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("genTranspileDepRegex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("transpileDependencies "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  webpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("module\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.js$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("include\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("filepath")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" transpileDepRegex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" transpileDepRegex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filepath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("filepath")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.mpx\\.js")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filepath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理 mpx 转 web 的情况，vue-loader 会将 script block fake 出一个 .mpx.js 路径，用以 loader 的匹配")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/@mpxjs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" transpileDepRegex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("genTranspileDepRegex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("transpileDependencies"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  webpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("module\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.js$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("include\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("filepath")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" transpileDepRegex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" transpileDepRegex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filepath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/@mpxjs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  webpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("extensions\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wxml'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.ts'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  webpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("modules"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在小程序的开发模式下，"),s("code",[t._v("vue-cli-plugin-mpx-mp")]),t._v(" 会在 "),s("code",[t._v("vue-cli-plugin-mpx")]),t._v(" 的基础上去拓展 "),s("code",[t._v("webpack")]),t._v(" 配置以满足小程序的编译构建。")]),t._v(" "),s("p",[t._v("在跨 web 的开发模式下，"),s("code",[t._v("vue-cli-plugin-mpx-web")]),t._v(" 会在 "),s("code",[t._v("vue-cli-plugin-mpx")]),t._v(" 和 "),s("code",[t._v("@vue/cli")]),t._v(" 的基础上去拓展配置以满足 web 侧的开发编译构建。")]),t._v(" "),s("h3",{attrs:{id:"web-平台编译构建能力增强"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#web-平台编译构建能力增强"}},[t._v("#")]),t._v(" Web 平台编译构建能力增强")]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 版本当中有关 "),s("code",[t._v("web")]),t._v(" 侧的编译构建的配置是比较初级的，像 "),s("code",[t._v("热更新")]),t._v("、"),s("code",[t._v("MPA 多页应用")]),t._v(" 等比较常用的功能是需要用户重新去手动搭建一套的。而 "),s("code",[t._v("@vue/cli@3.x")]),t._v(" 即为 "),s("code",[t._v("vue")]),t._v(" 项目而生，提供了非常完备的 "),s("code",[t._v("web")]),t._v(" 应用的编译构建打包配置。")]),t._v(" "),s("p",[s("strong",[t._v("所以 "),s("code",[t._v("@mpxjs/cli@next")]),t._v(" 版本里面做了一项非常重要的工作就是复用 "),s("code",[t._v("@vue/cli")]),t._v(" 的能力，弥补 "),s("code",[t._v("mpx")]),t._v(" 项目在跨 "),s("code",[t._v("web")]),t._v(" 项目编译构建的不足。")])]),t._v(" "),s("p",[t._v("因此关于 "),s("code",[t._v("mpx")]),t._v(" 跨 "),s("code",[t._v("web")]),t._v(" 编译构建的部分也单独抽离为一个插件："),s("code",[t._v("vue-cli-plugin-mpx-web")]),t._v("，这个插件所做的工作就是在 "),s("code",[t._v("@vue/cli")]),t._v(" 提供的 "),s("code",[t._v("web")]),t._v(" 编译构建的能力上去适配 "),s("code",[t._v("mpx")]),t._v(" 项目。这样也就完成了 "),s("code",[t._v("mpx")]),t._v(" 跨 "),s("code",[t._v("web")]),t._v(" 项目编译构建能力的增强。")]),t._v(" "),s("p",[s("strong",[t._v("这也意味着 "),s("code",[t._v("@vue/cli")]),t._v(" 所提供的能力基本上在 mpx 跨 web 项目当中都可使用。")])]),t._v(" "),s("h3",{attrs:{id:"项目配置拓展能力"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#项目配置拓展能力"}},[t._v("#")]),t._v(" 项目配置拓展能力")]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 版本的项目如果要进行配置拓展，基本需要进行以下2个步骤：")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("对 "),s("code",[t._v("config")]),t._v(" 文件夹下的相关的配置文件进行修改；")])]),t._v(" "),s("li",[s("p",[t._v("对 "),s("code",[t._v("build")]),t._v(" 文件夹下的编译构建配置文件进行修改；")])])]),t._v(" "),s("p",[t._v("这也是在文章一开始的时候就提到的基于模板的大而全的文件组织方式。")]),t._v(" "),s("p",[t._v("而在 "),s("code",[t._v("@mpxjs/cli@next")]),t._v(" 版本当中，将项目的配置拓展全部收敛至 "),s("code",[t._v("vue.config.js")]),t._v(" 文件当中去完成，同时减少了开发者需要了解项目结构的心智负担。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx-plugin 相关的配置")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx-loader 相关的配置")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义的 webpack 配置")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"改造后的目录结构"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#改造后的目录结构"}},[t._v("#")]),t._v(" 改造后的目录结构")]),t._v(" "),s("p",[t._v("在第一章节展示了目前 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 初始化项目的结构和现状。经过这次的插件化的改造后，项目的结构变得更为简洁，开发者只需要关注 "),s("code",[t._v("src")]),t._v(" 源码目录以及 "),s("code",[t._v("vue.config.js")]),t._v(" 配置文件即可：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("project\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("src\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("vue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js \n")])])]),s("h2",{attrs:{id:"没有银弹"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#没有银弹"}},[t._v("#")]),t._v(" 没有银弹")]),t._v(" "),s("p",[t._v("虽然基于 "),s("code",[t._v("@vue/cli")]),t._v(" 插件的架构模式完成了 "),s("code",[t._v("@mpxjs/cli@3.x")]),t._v(" 的插件化改造升级。但是由于 "),s("code",[t._v("mpx")]),t._v(" 项目开发的一些特殊性，不同插件之间的协同工作是有一些约定的。")]),t._v(" "),s("p",[t._v("例如 "),s("code",[t._v("@vue/cli-service")]),t._v(" 内置了一些 "),s("code",[t._v("webpack")]),t._v(" 的配置，因为 "),s("code",[t._v("@vue/cli")]),t._v(" 是专门针对 "),s("code",[t._v("web")]),t._v("应用的，这些配置会在所有的编译构建流程当中生效，不过这些配置当中有些对于小程序的开发来说是不需要的。")]),t._v(" "),s("p",[t._v("那么针对这种情况，为了避免不同模式下的 "),s("code",[t._v("webpack")]),t._v(" 配置相互污染。"),s("code",[t._v("web")]),t._v(" 侧的编译构建还是基于 "),s("code",[t._v("@vue/cli")]),t._v(" 提供的能力去适配 "),s("code",[t._v("mpx")]),t._v(" 的 "),s("code",[t._v("web")]),t._v(" 开发。而小程序侧的编译构建配置是通过 "),s("code",[t._v("@vue/cli-service")]),t._v(" 内部暴露出来的一些方法去跳过一些对于小程序开发来说不需要的 "),s("code",[t._v("webpack")]),t._v(" 配置来最终满足小程序的构建配置。")]),t._v(" "),s("p",[t._v("因此在各插件的开发当中，需要暴露该插件所应用的平台：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("export"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mp'")]),t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可选值： 'web'")]),t._v("\n")])])]),s("p",[t._v("这样在实际的构建过程当中通过平台的标识来决定对应哪些插件会生效。")]),t._v(" "),s("h2",{attrs:{id:"如何开发一个基于-mpx-的业务脚手架插件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#如何开发一个基于-mpx-的业务脚手架插件"}},[t._v("#")]),t._v(" 如何开发一个基于 mpx 的业务脚手架插件")]),t._v(" "),s("p",[t._v("具体参阅"),s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/blob/master/PLUGIN_GUIDE.md",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/56.9aec9a9e.js b/docs-vuepress/.vuepress/dist/assets/js/56.9aec9a9e.js
new file mode 100644
index 0000000000..c8a673ccb9
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/56.9aec9a9e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{404:function(t,r,e){"use strict";e.r(r);var _=e(4),a=Object(_.a)({},(function(){var t=this,r=t._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"小程序跨端组件库-mpx-cube-ui-开源啦"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#小程序跨端组件库-mpx-cube-ui-开源啦"}},[t._v("#")]),t._v(" 小程序跨端组件库 Mpx-cube-ui 开源啦")]),t._v(" "),r("blockquote",[r("p",[t._v("作者："),r("a",{attrs:{href:"https://github.com/CommanderXL",target:"_blank",rel:"noopener noreferrer"}},[t._v("CommanderXL"),r("OutboundLink")],1)])]),t._v(" "),r("p",[t._v("Mpx-cube-ui 是一款基于 "),r("a",{attrs:{href:"https://www.mpxjs.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx 小程序框架"),r("OutboundLink")],1),t._v(" 的移动端基础组件库，一份源码可以跨端输出所有小程序平台及 Web，同时具备良好的拓展能力和可定制化的能力来帮助你快速构建 Mpx 应用项目。")]),t._v(" "),r("p",[t._v("Mpx-cube-ui 提供了灵活配置的主题定制能力，在组件设计开发阶段对表现层的结构和样式进行抽离，利用预编译器和 CSS 变量的能力，提供细粒度（颜色、字体、圆角、阴影等）的样式定制能力，你的项目可以按需使用主题的编译方案还是运行时方案来满足不同样式风格的业务场景开发。")]),t._v(" "),r("p",[t._v("Mpx-cube-ui 提供了开箱即用的跨端输出能力，源码基于 Mpx 小程序框架进行开发，依托于 Mpx 提供的"),r("a",{attrs:{href:"https://mpxjs.cn/articles/2.0.html#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E5%BC%80%E5%8F%91",target:"_blank",rel:"noopener noreferrer"}},[t._v("跨平台能力"),r("OutboundLink")],1),t._v("即基于微信小程序跨平台编译输出为支付宝、百度、QQ、头条等目标平台的小程序代码，同时还可以输出到 Web。")]),t._v(" "),r("p",[t._v("接下来会通过这篇文章去分享一下 Mpx-cube-ui 是如何诞生的。")]),t._v(" "),r("h2",{attrs:{id:"业务现状"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#业务现状"}},[t._v("#")]),t._v(" 业务现状")]),t._v(" "),r("h3",{attrs:{id:"集团产品的迭代"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#集团产品的迭代"}},[t._v("#")]),t._v(" 集团产品的迭代")]),t._v(" "),r("p",[t._v("越来越多的业务产品开始借助小程序的渠道来拓展产品的推广和使用，不同的技术团队承接的不同业务产品方向的需求。在滴滴所有的小程序产品当中，滴滴出行小程序作为最大的C端流量入口，承接了不同业务产品流量分发。在具体到小程序产品的研发环节，不同业务的小程序都被集成到了滴滴出行小程序当中，一同打包上线并发布。\n当然在这种跨业务、技术部门的产品研发当中，不同的技术团队都会有自身配套的基础能力建设。就拿小程序的组件库来说，每个独立的业务产品都会依据对应的交互设计规范来搭建一套满足自身业务述求的基础组件用以提高日常的业务开发效率，例如按钮、半浮层弹窗、Toast、Dialog、表单等等。")]),t._v(" "),r("h3",{attrs:{id:"团队内的业务迭代"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#团队内的业务迭代"}},[t._v("#")]),t._v(" 团队内的业务迭代")]),t._v(" "),r("p",[t._v("除了跨业务产品研发的场景外，在同一个技术团队内部也可能会承接来自不同业务产品方向的需求，这些不同业务产品同样也会有独立发展迭代的述求。由于业务场景的约束，团队内部同样也会面临如何做基础能力的沉淀和复用的议题，在节省研发资源的同时去提升业务项目交付的质量和效率。\n")]),r("hr"),r("p"),t._v(" "),r("p",[t._v("那么在不同的业务产品发展初期，为了快速交付产品的功能保障上线时间，研发侧会尽量利用之前已有的基础能力来快速搭建产品功能。就拿小程序组件库的复用来说，常见的方式有：")]),t._v(" "),r("ul",[r("li",[t._v("直接侵入到原有的组件代码当中进行 Hard Code，不同的业务产品依赖同一份组件代码，利用一些 if/else 或者条件编译等手段来使得原有的组件在满足最新的业务述求的同时，还要确保不会影响到原有的业务使用；")]),t._v(" "),r("li",[t._v("Fork 一份原有组件库的代码，在此基础上单独迭代维护，做到和原有组件的彻底隔离而不会造成污染；")])]),t._v(" "),r("p",[t._v("对于第一种方案来说：组件本身因为增量的差异化需求使得组件本身的维护成本变高，同时对于差异化的代码处理难免在编译打包环节出现代码冗余问题，也就是原本不属于当前业务产品的代码实现也被一同打包；\n对于第二种方案来说：组件库维护的数量变多，使得后续的组件迭代和更新需要修改多处代码；")]),t._v(" "),r("p",[t._v("此外，在小程序的场景下还面临着包体积等平台规范的硬性约束，特别是对于像滴滴出行小程序这种体量大的小程序来说，众多小程序业务产品被集成到同一个小程序当中，包体积也是日常研发过程中重点关注的一个指标。模块或组件的可复用性好、可拓展性强也意味着不需要重复去开发同一份功能相同代码，随之代码包体积也不会因重复实现相同功能而增速过快。")]),t._v(" "),r("h2",{attrs:{id:"mpx-技术生态"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#mpx-技术生态"}},[t._v("#")]),t._v(" Mpx 技术生态")]),t._v(" "),r("p",[t._v("在 Mpx 整个技术生态当中，组件体系目前是不完备的。")]),t._v(" "),r("p",[t._v("在我们目前使用 Mpx 去搭建实际的业务产品的过程中，我们基于小程序平台的基础组件去搭建了特定业务场景的基础业务组件，因为业务场景、功能和代码实现等各方面的原因，这些业务场景的基础组件是没法开放给社区的 Mpx 开发者来使用的。因此对于社区来说，要么只能同样基于平台的基础组件去开发上层基础组件，或者是使用第三方的原生小程序组件库，不管哪种方式对于社区的开发者而言，都有不少的上手和开发成本。")]),t._v(" "),r("p",[t._v("因此在社区当中也有比较强的述求，期望 Mpx 能提供更为基础通用的组件来更好的支持上层的业务开发。")]),t._v(" "),r("h2",{attrs:{id:"组件库自身的维护"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#组件库自身的维护"}},[t._v("#")]),t._v(" 组件库自身的维护")]),t._v(" "),r("ul",[r("li",[t._v("文档示例一体化")])]),t._v(" "),r("p",[t._v("不管是我们内部维护的业务组件库还是之前我们开源的基于 Vue 的 Web 组件库 "),r("a",{attrs:{href:"https://didi.github.io/cube-ui/#/zh-CN",target:"_blank",rel:"noopener noreferrer"}},[t._v("Cube-ui"),r("OutboundLink")],1),t._v("，组件本身的文档示例也是在组件库迭代过程中也是比较占用时间精力的，在示例和文档方面往往需要重复写多份文案，还要确保它们之间是同步更新的。那么针对组件库自身的维护，如何尽量减少组件库本身的维护成本也是我们需要深入思考的一部分工作。")]),t._v(" "),r("p",[t._v("以上这些问题促使我们重新思考整个 Mpx 组件体系的构建和发展。")]),t._v(" "),r("h2",{attrs:{id:"mpx-组件体系"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#mpx-组件体系"}},[t._v("#")]),t._v(" Mpx 组件体系")]),t._v(" "),r("p",[t._v("经过业务的长期迭代和验证，Mpx-cube-ui 作为 Mpx 技术生态当中组件体系的基础设施：脱离于业务的基础组件库，同时又要有良好的拓展能力和可定制化的能力来更好的支持上层业务。")]),t._v(" "),r("p",[r("img",{attrs:{src:"https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_6wEnx7fVXGlK8hILtuYa",alt:"组件分层设计"}}),t._v("\n在整个组件体系的搭建过程中，我们依据组件的特性将组件拆分为如下几种类型：")]),t._v(" "),r("ul",[r("li",[t._v("业务组件一般来源于某一个具体的产品功能，用以解决特定问题域，更加强调关注点分离，代码的维护成本；")]),t._v(" "),r("li",[t._v("基础业务组件一般来源于某一类的业务产品，在特定的业务背景下抽象的比较通用的，较少糅合业务逻辑，介于基础组件和业务组件之间，强调解决效率，可复用性，可维护性；")]),t._v(" "),r("li",[t._v("基础组件一般来源于我们设计交互元语言，用以定义业务产品和用户的交互、反馈，更加强调一致性，效率，可复用性；")])]),t._v(" "),r("p",[t._v("底层的基础组件（可组合性、可拓展性、稳定性）是为了更好的服务于上层的（基础）业务组件。")]),t._v(" "),r("p",[t._v("从底层的基础组件到业务组件（由下至上），组件的业务属性越来越强，所要解决的问题域更加聚焦，更贴合具体的问题和场景，同时它们的可复用性也随之降低。")]),t._v(" "),r("h2",{attrs:{id:"mpx-cube-ui-组件设计"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#mpx-cube-ui-组件设计"}},[t._v("#")]),t._v(" Mpx-cube-ui 组件设计")]),t._v(" "),r("p",[t._v("这里通过乘客交易、司机运营两个不同业务方向的组件来举例说明 Mpx-cube-ui 在组件的设计和开发当中所做的一些思考。\n在这两个业务场景当中都有 Modal 半浮层组件，不过在司乘业务不同的设计规范约束下，组件间的差异还是比较大的。")]),t._v(" "),r("p",[r("img",{attrs:{src:"https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_1EABWsPUeVHTim2iwTUf",alt:"mpx-cube-ui-modal"}})]),t._v(" "),r("p",[t._v("那么为了解决上文当中组件库在跨业务产品的的可复用性、可拓展性的问题，核心所遵循的原则是：")]),t._v(" "),r("p",[r("strong",[t._v("弱化不同业务场景的设计规范（去业务），回归到组件本身的行为（逻辑）、结构和样式（表现）：")])]),t._v(" "),r("ul",[r("li",[t._v("行为，组件所特有的行为方法：展示（show），隐藏（hide），关闭（close）；")]),t._v(" "),r("li",[t._v("结构，方便组件间的重新组合：头部区，标题区，内容区，底部操作区；")]),t._v(" "),r("li",[t._v("样式，方便业务场景的主题定制：颜色、字号、圆角、边距等；")])]),t._v(" "),r("p",[r("img",{attrs:{src:"https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_ceWLvE8RbZIIduHHTdtu",alt:"组件设计原则"}})]),t._v(" "),r("p",[t._v("对于 Mpx-cube-ui 组件的主题定制有个简单的逻辑关系：")]),t._v(" "),r("ul",[r("li",[t._v("全局基础样式变量：提供了基本色值、字号等，会影响到所有组件的展示；")]),t._v(" "),r("li",[t._v("组件样式变量：对于基本的色值、字号等继承于全局基础变量，涉及到组件自身的结构、样式变量会单独定义；")]),t._v(" "),r("li",[t._v("组件渲染样式：直接依赖组件样式变量；")])]),t._v(" "),r("p",[r("img",{attrs:{src:"https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_b4uBKbP8yIwdip7pBZAq",alt:"mpx-cube-ui-modal"}})]),t._v(" "),r("p",[t._v("通过定制"),r("a",{attrs:{href:"https://www.mpxjs.cn/mpx-cube-ui/guide/design-tokens.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("全局基础样式变量"),r("OutboundLink")],1),t._v("和"),r("a",{attrs:{href:"https://www.mpxjs.cn/mpx-cube-ui/components/base/button.html#css-variable",target:"_blank",rel:"noopener noreferrer"}},[t._v("组件样式变量"),r("OutboundLink")],1),t._v("都能达到定制主题的目的，有关主题定制的功能具体参见"),r("a",{attrs:{href:"https://www.mpxjs.cn/mpx-cube-ui/guide/theme.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档"),r("OutboundLink")],1),t._v("。")]),t._v(" "),r("p",[t._v("在 Mpx-cube-ui 实现的定制主题的方案当中是利用预编译器和 Css Varaibles 的能力来提供细粒度的样式定制能力：")]),t._v(" "),r("p",[r("img",{attrs:{src:"https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_3ZVcQITsryAG4k96hFrH",alt:"业务架构图"}})]),t._v(" "),r("ul",[r("li",[t._v("利用预编译器可编程的能力，在编译阶段就可以完成主题能力的定制，当你的业务项目作为独立应用迭代，可以只利用预编译器的能力，从而使得你的 css 代码体积尽可能的小；")]),t._v(" "),r("li",[t._v("利用 Css Varaibles 的能力，可以解决更为复杂的场景，例如同一个组件在巨型应用当中，在不同业务场景页面需要有不同的主题样式；")])]),t._v(" "),r("p",[t._v("在"),r("a",{attrs:{href:"https://www.mpxjs.cn/mpx-cube-ui/guide/intro.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("官网示例"),r("OutboundLink")],1),t._v("当中可以直接体验主题切换功能。")]),t._v(" "),r("h2",{attrs:{id:"未来的规划"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#未来的规划"}},[t._v("#")]),t._v(" 未来的规划")]),t._v(" "),r("ol",[r("li",[t._v("开源更多我们内部所沉淀出的基础组件，去满足多样化的业务场景开发；")]),t._v(" "),r("li",[t._v("将文档示例一体化的能力独立打包开源，用以组件库的快速建站以及降低文档、示例代码的维护成本。")])])])}),[],!1,null,null,null);r.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/57.9d9ddcbd.js b/docs-vuepress/.vuepress/dist/assets/js/57.9d9ddcbd.js
new file mode 100644
index 0000000000..610cd89b22
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/57.9d9ddcbd.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{403:function(t,v,_){"use strict";_.r(v);var e=_(4),a=Object(e.a)({},(function(){var t=this,v=t._self._c;return v("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[v("h1",{attrs:{id:"小程序开发者-为什么你应该尝试下mpx"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#小程序开发者-为什么你应该尝试下mpx"}},[t._v("#")]),t._v(" 小程序开发者，为什么你应该尝试下MPX")]),t._v(" "),v("blockquote",[v("p",[t._v("作者："),v("a",{attrs:{href:"https://github.com/sky-admin",target:"_blank",rel:"noopener noreferrer"}},[t._v("sky-admin"),v("OutboundLink")],1)])]),t._v(" "),v("blockquote",[v("p",[t._v("MPX框架是滴滴出行推出的一款专注小程序开发的增强型框架。本篇文章将从使用角度谈谈MPX的优势与好处。如果嫌内容太长，优势部分每个小节都有简单的一句话总结，可以快速阅读。如果想了解更多设计细节，可以阅读 "),v("RouterLink",{attrs:{to:"/articles/2.0.html"}},[t._v("前一篇文章 - MPX2.0发布")]),t._v("。")],1)]),t._v(" "),v("h2",{attrs:{id:"背景"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#背景"}},[t._v("#")]),t._v(" 背景")]),t._v(" "),v("p",[t._v("在小程序逐渐火热的今天，越来越多的开发者需要进行小程序的开发。原生小程序的开发有诸多不便，开发者又需要在众多的小程序框架中做出抉择。")]),t._v(" "),v("p",[t._v("那么今天，我们要给大家安利一款小程序框架：MPX")]),t._v(" "),v("h2",{attrs:{id:"优势"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#优势"}},[t._v("#")]),t._v(" 优势")]),t._v(" "),v("p",[t._v("之所以建议开发者们考虑使用MPX框架来开发小程序，是因为MPX框架具有一些别的框架所没有的优点。")]),t._v(" "),v("p",[t._v("MPX立足原生小程序，在保证坑少的同时做了很多能力增强，提供了数据响应、模板增强、性能优化、跨平台开发等能力，以提升用户的开发体验及效率。")]),t._v(" "),v("p",[t._v("接下来会从 原生兼容 -> 第三方组件支持 -> 按需构建 -> 跨平台编译 -> 能力增强 -> 独特性能优势 六个点来逐一讲述。")]),t._v(" "),v("h3",{attrs:{id:"原生兼容"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#原生兼容"}},[t._v("#")]),t._v(" 原生兼容")]),t._v(" "),v("blockquote",[v("p",[t._v("MPX完全兼容原生，坑少。渐进接入简单。")])]),t._v(" "),v("p",[t._v("从语法风格上，我们可以看到目前市面上流行的小程序框架基本是基于web框架（taro/nanachi - react，uniapp/megalo/mpvue - vue）或者是一套全新（chameleon）/ 半全新（wepy）的标准。")]),t._v(" "),v("p",[t._v("使用了这些框架，你所写的代码，并不是小程序代码。而是react/vue或者另一套代码。而这些代码源码到小程序代码，需要经过一次全面的转换，这个转换可能会引入一些未知的问题，产生一些坑。")]),t._v(" "),v("p",[t._v("同时随着时间，小程序自身会逐步迭代，做出更多的功能特性，提供更好的组件、方法。而一些框架可能会受限于精力或框架节奏，没有办法第一时间跟进，甚至框架慢慢疏于维护而无法使用。")]),t._v(" "),v("p",[t._v("而MPX选择的是，"),v("strong",[t._v("全面拥抱原生")]),t._v("。")]),t._v(" "),v("p",[t._v("口说无凭，我们来看个典型的MPX组件长什么样。")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/3877c653-d180-4fe7-8661-457b9de1bd82.png",alt:"mpx组件示例"}})]),t._v(" "),v("p",[t._v("乍一看好像和vue没什么区别，也就多了个json块，template里写的是小程序的标签。")]),t._v(" "),v("p",[t._v("由于这一块全是符合微信小程序原生语法，我们是不会做任何转换的，所以你写什么就是什么。（如果使用了MPX的增强特性，还是会进行一些必要的转换的，后续我们也会出文章详细解释MPX的增强是如何实现的，相对来说，我们的转换比较轻量、透明、易理解）")]),t._v(" "),v("p",[t._v("当微信出了新的能力、新的标签、新的生命周期钩子，使用MPX框架来编写的小程序只需要直接用起来就行。")]),t._v(" "),v("p",[t._v("所以，使用MPX框架，你可以轻易地使用 "),v("strong",[v("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("自定义组件的relations"),v("OutboundLink")],1)]),t._v(" 来搞定组件间关系，使用 "),v("strong",[v("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/",target:"_blank",rel:"noopener noreferrer"}},[t._v("wxs"),v("OutboundLink")],1)]),t._v(" 来更好地构建页面。")]),t._v(" "),v("p",[t._v("MPX几乎支持原生的每一个特性，在 .mpx 文件里，模板部分写的是原生小程序的模板语法，脚本部分写的是原生小程序的脚本语法，json部分写的是原生小程序的配置信息。用MPX，你才是真的在开发小程序。")]),t._v(" "),v("p",[t._v("目前很多原生小程序开发者可能想尝试下框架，老项目接入框架，选MPX肯定是最简单的了。口说无凭，我们搞了个demo来给大家打个样：在我们GitHub项目中有examples文件夹，里面的 "),v("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-progressive",target:"_blank",rel:"noopener noreferrer"}},[t._v("原生项目渐进接入MPX示例"),v("OutboundLink")],1),t._v(" 。")]),t._v(" "),v("h3",{attrs:{id:"第三方组件库"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#第三方组件库"}},[t._v("#")]),t._v(" 第三方组件库")]),t._v(" "),v("blockquote",[v("p",[t._v("MPX提供了完备的第三方组件库支持")])]),t._v(" "),v("p",[t._v("上面说了MPX对原生的极致兼容，能让你想到什么？对，就是对第三方组件库的完美支持。")]),t._v(" "),v("p",[t._v("支持第三方组件库的重要性大家都知道，所以这个能力大部分框架都支持了。但是支持和完美支持还是有区别的。据简单观察，taro/mpvue/uniapp对于第三方组件库的支持都是以复制的形式进行的，也就是和微信小程序本来的行为很像。")]),t._v(" "),v("p",[t._v("那么MPX是怎么支持第三方组件库的呢，这里有个demo：也在我们的GitHub里的examples文件夹下，"),v("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-useuilib",target:"_blank",rel:"noopener noreferrer"}},[t._v("MPX使用第三方组件库示例"),v("OutboundLink")],1),t._v(" ，核心代码见下图：")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/9ecdd898-f7e5-48cc-89c2-bfc7ce3a03f9.png",alt:"MPX使用第三方组件库代码示例"}})]),t._v(" "),v("p",[t._v("乍一眼看不太出来有什么特别的？没用过别的框架引第三方组件，简单找了找其他框架好像也没提供相应的demo，用过的朋友可以自行对比下。")]),t._v(" "),v("p",[t._v("在MPX里使用第三方组件库，仅需要***像web项目一样npm安装即可，并不需要复制文件***。然后在json里直接写包名就会去node_modules下面查找了。再配合webpack alias可以做到更简单、更语义化。")]),t._v(" "),v("p",[t._v("然而这还没有结束~")]),t._v(" "),v("p",[t._v("细心的朋友会发现，这段示例代码中既有vant的组件，也有iview的组件，如果按照微信的规范，这些组件库会通过miniprogram字段指定自己的构建文件生成目录，开发者工具会把这个目录完全拷贝到最终发布的代码里去，我们就会有两个巨大的组件库占据宝贵的空间。")]),t._v(" "),v("p",[t._v("我们当然是希望用多少引多少，而不是一股脑全引进去，对，于是MPX提供了按需引用的能力，在下一章"),v("a",{attrs:{href:"#%E6%8C%89%E9%9C%80%E5%BC%95%E7%94%A8"}},[t._v("按需引用")]),t._v("细讲。")]),t._v(" "),v("p",[t._v("以及，组件库目前很少有跨小程序平台的组件库啊，如果我用了vant，支付宝、QQ里没有vant怎么办？也许这是别的框架不怎么推荐使用第三方库的原因，而MPX里，我们帮你把别人的组件库也转了，细节看下下章"),v("a",{attrs:{href:"#%E8%B7%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B9%B3%E5%8F%B0"}},[t._v("跨小程序平台")])]),t._v(" "),v("h3",{attrs:{id:"按需引用"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#按需引用"}},[t._v("#")]),t._v(" 按需引用")]),t._v(" "),v("blockquote",[v("p",[t._v("通过webpack依赖分析收集，使用第三方组件库或者拆分开发大型项目时MPX能保证构建的代码全是要用到的代码")])]),t._v(" "),v("p",[t._v("原生小程序本身的编译是遍历项目文件夹里所有的JS，包装成一个AMD包，也就是说项目文件夹里所有的文件，不论是否被使用，都会占用包体积并上传。")]),t._v(" "),v("p",[t._v("同时，原生微信小程序的npm支持是基于文件夹复制的，第三方包通过声明miniprogram字段指定要拷贝的文件夹，不论使用还是未使用的资源（模板/js/样式/图片），全会被复制到项目文件夹中。")]),t._v(" "),v("p",[t._v("而我们提供了@mpxjs/webpack-plugin插件，借助webpack生态，解析.mpx文件的json部分或原生的json文件将依赖作为新的入口添加子编译。基于依赖收集，而不是文件遍历。")]),t._v(" "),v("p",[t._v("带来的好处就是：如果你喜欢vant的按钮，iview的输入框，wux的布局，欢迎尝试MPX，让你能同时使用多个UI框架的同时不用担心应用的体积爆炸。")]),t._v(" "),v("p",[t._v("同理，面对一个大型项目，我们可以拆成不同的部分，由不同的团队完成后发npm包，在一个主项目中引入即可，具体内容可以看文档"),v("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#packages"}},[t._v("packages")]),t._v("一节。")],1),t._v(" "),v("p",[t._v("收集依赖的细节可以查阅文档"),v("RouterLink",{attrs:{to:"/guide/understand/compile.html"}},[t._v("编译构建")]),t._v("一节。")],1),t._v(" "),v("h3",{attrs:{id:"跨小程序平台"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#跨小程序平台"}},[t._v("#")]),t._v(" 跨小程序平台")]),t._v(" "),v("blockquote",[v("p",[t._v("MPX的跨平台方法能带着第三方组件库一起跨小程序平台，同时提供了充足完善的条件编译能力。")])]),t._v(" "),v("p",[t._v("在 MPX 1.0 时代，MPX框架是专注提升微信小程序的开发体验，虽然也提供了支付宝版，但代码完全要另写。")]),t._v(" "),v("p",[t._v("而随着越来越多的 super app 提供了小程序能力，目前至少有5种体系的小程序（微信、支付宝系列、百度系列、头条系列、QQ），如果每一个平台都需要维护一份代码，工程师人数明显不够用了，所以跨小程序平台的能力也是 MPX 2.0 的主打特性。")]),t._v(" "),v("p",[t._v("我们的跨平台的方法就是转换。都是小程序，语法基本一样，配置、钩子的差异在MPX运行时里提供了抹平。")]),t._v(" "),v("p",[t._v("而除此之外最大的区别也就是模板上的标签和指令。所以我们实现了一套转换的架子，再编写一份转换规则，即可完成微信小程序到支付宝、百度、头条小程序的转换。")]),t._v(" "),v("p",[t._v("采用这种转换的模式，非常方便用户理解我们是如何把微信小程序转换成支付宝、百度等小程序平台的。而且只要用户有需求，可以补齐任一套小程序转换其他平台的规则，就可以完成以某个小程序为标准为基础来编写小程序代码以及进一步转换成别的平台的能力。")]),t._v(" "),v("p",[t._v("再结合前面一直在说的我们对原生小程序的支持，就可以撞出一点不一样的东西，比如，前文提到的第三方组件库跨小程序平台。")]),t._v(" "),v("p",[t._v("对，我们能帮你把针对微信编写的ui组件库在支付宝、百度上运行起来，带着组件库一起跨小程序平台。")]),t._v(" "),v("p",[t._v("那么一定会有这样一个问题，就算MPX对原生的支持再怎么牛逼，有的基础能力只有微信平台有，别的平台没有，MPX的转换还能无中生有吗？")]),t._v(" "),v("p",[t._v("当然不能，其实这个问题对于所有的跨端框架都是一个问题，所以跨端最核心的问题是，如何搞定差异化部分。")]),t._v(" "),v("p",[t._v("MPX提供了丰富的条件编译能力，可以以文件为维度差别构建，可以以代码块为维度，也可以以代码维度进行差别构建。")]),t._v(" "),v("p",[t._v("而且MPX的差异化构建能力也是完全基于webpack实现的，所以上面提到的第三方组件库如果确实存在转换不了的地方，比如vant的picker组件使用内联wxs写了一个小方法叫isSimple在模板里调用了，但是这个方法的写法在百度小程序的filter脚本（filter可以理解为百度小程序的wxs）里不支持，因为百度的filter要求必须导出一个对象包裹方法。")]),t._v(" "),v("p",[t._v("最好的解决办法当然是给vant-weapp提pr帮他们解决一下这个问题，但时间可能会比较慢，所以在MPX里，可以利用webpack的alias能力：")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/7f90593b-65b4-40d0-bd93-6396e8a18e64.png",alt:"通过alias解决第三方组件的跨平台问题"}})]),t._v(" "),v("p",[t._v("当尝试构建百度小程序时，会优先去查找pick/index.swan.wxml，再被alias到一个src下的文件，自己修改一下第三方包里有一些小问题的部分即可。")]),t._v(" "),v("p",[t._v("关于跨平台的条件编译，更多具体信息可以"),v("RouterLink",{attrs:{to:"/guide/advance/platform.html#跨平台编译"}},[t._v("查阅我们的官方文档 - 跨平台编译")])],1),t._v(" "),v("h3",{attrs:{id:"能力增强"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#能力增强"}},[t._v("#")]),t._v(" 能力增强")]),t._v(" "),v("blockquote",[v("p",[t._v("通过数据响应、编译时预处理提供了computed/watch，完备的样式类型绑定，双向数据绑定，动态组件等一系列方便开发者更好开发小程序的能力增强")])]),t._v(" "),v("p",[t._v("能力增强应该是一个框架提供的最核心最重要的能力了，而MPX也确实在这里下了很大的力气，提供了多且好用的能力增强，不过受限于此处的篇幅，就只简单介绍，细节大家还是"),v("RouterLink",{attrs:{to:"/guide/basic/template.html"}},[t._v("查阅我们的文档")]),t._v("的好。")],1),t._v(" "),v("p",[t._v("别的框架由于往往基于react/vue的，会给个列表写明不支持哪些能力，用户写的时候习惯使然，往往用了后可能才反应过来哦这个不支持。MPX则是原生的小程序语法写着难受时候突然想起MPX有这个能力。")]),t._v(" "),v("p",[t._v("列一下MPX增强的能力：")]),t._v(" "),v("ul",[v("li",[t._v("模板上的增强\n"),v("ul",[v("li",[t._v("样式类名绑定")]),t._v(" "),v("li",[t._v("内联事件传参")]),t._v(" "),v("li",[t._v("动态组件")]),t._v(" "),v("li",[t._v("双向绑定")]),t._v(" "),v("li",[t._v("节点获取ref")])])]),t._v(" "),v("li",[t._v("JS里的增强\n"),v("ul",[v("li",[t._v("数据响应")]),t._v(" "),v("li",[t._v("setData优化")]),t._v(" "),v("li",[t._v("ES6+")])])]),t._v(" "),v("li",[t._v("样式上的增强\n"),v("ul",[v("li",[t._v("预处理支持")]),t._v(" "),v("li",[t._v("rpx转换")])])]),t._v(" "),v("li",[t._v("JSON里的增强\n"),v("ul",[v("li",[t._v("packages")]),t._v(" "),v("li",[t._v("分包资源优化")])])])]),t._v(" "),v("p",[t._v("MPX最显著的能力是数据响应，它衍生出computed/watch，以及双向数据绑定等。这个能力和Vue比较像，不同的是在MPX里是由mobx提供的数据响应能力。")]),t._v(" "),v("p",[t._v("而同样是数据响应，我们做了一些不一样的优化。")]),t._v(" "),v("h3",{attrs:{id:"性能优势"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#性能优势"}},[t._v("#")]),t._v(" 性能优势")]),t._v(" "),v("blockquote",[v("p",[t._v("通过对模板的解析抽象出访问的数据以保证在提供了数据响应能力的同时不至于劣化性能。")])]),t._v(" "),v("p",[t._v("mpvue/wepy/megalo等框架也提供了数据响应的能力，但是数据响应在小程序领域有个较大的问题，微信开发指南里明确提到要注意setData的调用频次和数据量的大小。")]),t._v(" "),v("p",[t._v("而数据响应最基本的做法就是数据变了就去set数据，这会极大劣化小程序的性能表现。")]),t._v(" "),v("p",[t._v("而MPX通过对模板进行解析，抽象出对应的render函数，在调用setData发送数据前执行render函数找到真正需要发送的数据。")]),t._v(" "),v("p",[t._v("效果如图：")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/9399b75c-5c81-4584-89b6-5e7f2c2ba7ba.png",alt:"小程序性能分析"}})]),t._v(" "),v("p",[t._v("小程序开发者工具的audits面板能辅助用户分析出可能需要优化的点。正如前文所说，MPX在红框部分，尤其是红框里的第三条，不将模板上未使用的数据发送到渲染层上做了极大的优化。")]),t._v(" "),v("p",[t._v("只要不出现渲染函数执行失败（会有warning在console里提示，同时兜底逻辑会进行全量setData以保证程序仍可正常运行），使用MPX开发的小程序就永远不用担心发送了模板未使用的数据。")]),t._v(" "),v("p",[t._v("虽然只是一个小小的TODO MVC示例，但是这个优化和应用的规模没关系，而且同时大家可以尝试别家的小demo对比看看。")]),t._v(" "),v("p",[t._v("这个优化的细节可以看"),v("RouterLink",{attrs:{to:"/articles/2.0.html"}},[t._v("前一篇文章")]),t._v("，或者我们的文档"),v("RouterLink",{attrs:{to:"/guide/understand/runtime.html"}},[t._v("MPX运行机制 - 数据响应与性能优化")])],1),t._v(" "),v("h2",{attrs:{id:"总结"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#总结"}},[t._v("#")]),t._v(" 总结")]),t._v(" "),v("p",[t._v("与目前市面上的诸多框架相比，MPX希望以原生小程序为基础，全面拥抱原生小程序，在原生小程序的基础上做增强，通过尽可能少的转换实现尽可能多的能力增强，在提升小程序开发体验的同时，保证不因转换或框架的问题产生过多的坑。")]),t._v(" "),v("p",[t._v("MPX框架的目标用户是对小程序质量有较高要求的开发者，如果你是原生小程序开发者，或者厌倦了解决某些以web框架DSL语法为基础的转换框架造成的坑，欢迎尝试MPX框架。")])])}),[],!1,null,null,null);v.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/58.50eb3b91.js b/docs-vuepress/.vuepress/dist/assets/js/58.50eb3b91.js
new file mode 100644
index 0000000000..8fb0ab00a7
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/58.50eb3b91.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{406:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"mpx-小程序框架技术揭秘"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx-小程序框架技术揭秘"}},[t._v("#")]),t._v(" Mpx 小程序框架技术揭秘")]),t._v(" "),s("blockquote",[s("p",[t._v("作者："),s("a",{attrs:{href:"https://github.com/CommanderXL",target:"_blank",rel:"noopener noreferrer"}},[t._v("CommanderXL"),s("OutboundLink")],1)])]),t._v(" "),s("p",[t._v("与目前业内的几个小程序框架相比较而言，mpx 开发设计的出发点就是基于原生的小程序去做功能增强。所以从开发框架的角度来说，是没有任何“包袱”，围绕着原生小程序这个 core 去做不同功能的 patch 工作，使得开发小程序的体验更好。")]),t._v(" "),s("p",[t._v("于是我挑了一些我非常感兴趣的点去学习了下 mpx 在相关功能上的设计与实现。")]),t._v(" "),s("h2",{attrs:{id:"编译环节"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编译环节"}},[t._v("#")]),t._v(" 编译环节")]),t._v(" "),s("h3",{attrs:{id:"动态入口编译"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#动态入口编译"}},[t._v("#")]),t._v(" 动态入口编译")]),t._v(" "),s("p",[t._v("不同于 web 规范，我们都知道小程序每个 page/component 需要被最终在 webview 上渲染出来的内容是需要包含这几个独立的文件的：js/json/wxml/wxss。为了提升小程序的开发体验，mpx 参考 vue 的 SFC(single file component)的设计思路，采用单文件的代码组织方式进行开发。既然采用这种方式去组织代码的话，那么模板、逻辑代码、json配置文件、style样式等都放到了同一个文件当中。那么 mpx 需要做的一个工作就是如何将 SFC 在代码编译后拆分为 js/json/wxml/wxss 以满足小程序技术规范。熟悉 vue 生态的同学都知道，vue-loader 里面就做了这样一个编译转化工作。具体有关 vue-loader 的工作流程可以参见我写的"),s("a",{attrs:{href:"https://github.com/CommanderXL/Biu-blog/issues/33",target:"_blank",rel:"noopener noreferrer"}},[t._v("文章"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("p",[t._v("这里会遇到这样一个问题，就是在 vue 当中，如果你要引入一个页面/组件的话，直接通过"),s("code",[t._v("import")]),t._v("语法去引入对应的 vue 文件即可。但是在小程序的标准规范里面，它有自己一套组件系统，即如果你在某个页面/组件里面想要使用另外一个组件，那么需要在你的 json 配置文件当中去声明"),s("code",[t._v("usingComponents")]),t._v("这个字段，对应的值为这个组件的路径。")]),t._v(" "),s("p",[t._v("在 vue 里面 import 一个 vue 文件，那么这个文件会被当做一个 dependency 去加入到 webpack 的编译流程当中。但是 mpx 是保持小程序原有的功能，去进行功能的增强。因此一个 mpx 文件当中如果需要引入其他页面/组件，那么就是遵照小程序的组件规范需要在"),s("code",[t._v("usingComponents")]),t._v("定义好"),s("code",[t._v("组件名:路径")]),t._v("即可，"),s("strong",[t._v("mpx 提供的 webpack 插件来完成确定依赖关系，同时将被引入的页面/组件加入到编译构建的环节当中")]),t._v("。")]),t._v(" "),s("p",[t._v("接下来就来看下具体的实现，mpx webpack-plugin 暴露出来的插件上也提供了静态方法去使用 loader。这个 loader 的作用和 vue-loader 的作用类似，首先就是拿到 mpx 原始的文件后转化一个 js 文本的文件。例如一个 list.mpx 文件里面有关 json 的配置会被编译为：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=json&index=0!../../node_modules/@mpxjs/webpack-plugin/lib/json-compiler/index?root=!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=json&index=0!./list.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("这样可以清楚的看到 list.mpx 这个文件首先 selector(抽离"),s("code",[t._v("list.mpx")]),t._v("当中有关 json 的配置，并传入到 json-compiler 当中) ---\x3e>> json-compiler(对 json 配置进行处理，添加动态入口等) ---\x3e>> extractor(利用 child compiler 单独生成 json 配置文件)")]),t._v(" "),s("p",[t._v("其中动态添加入口的处理流程是在 json-compiler 当中去完成的。例如在你的 "),s("code",[t._v("page/home.mpx")]),t._v(" 文件当中的 json 配置中使用了 局部组件 "),s("code",[t._v("components/list.mpx")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"application/json"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/list"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("在 json-compiler 当中：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("addEntrySafely")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果loader已经回调，就不再添加entry")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callbacked"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 webpack 提供的 SingleEntryPlugin 插件创建一个单文件的入口依赖(即这个 component)")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" dep "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" SingleEntryPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createDependency")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  entryDeps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// compilation.addEntry 方法开始将这个需要被编译的 component 作为依赖添加到 webpack 的构建流程当中")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里可以看到的是整个动态添加入口文件的过程是深度优先的")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_compiler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    entryDeps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delete")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkEntryDeps")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("processComponent")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rewritePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用 loaderContext 上提供的 resolve 方法去解析这个 component path 完整的路径，以及这个 component 所属的 package 相关的信息(例如 package.json 等)")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" component"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rawResult"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" info")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    componentPath "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" componentPath "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("subPackageRoot"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" componentName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hash")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" componentName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// component path 解析完之后，调用 addEntrySafely 开始在 webpack 构建流程中动态添加入口")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addEntrySafely")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rawResult"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isApp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("usingComponents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// async.forEachOf 流程控制依次调用 processComponent 方法")]),t._v("\n    async"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEachOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("usingComponents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("processComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("usingComponents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" path\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),s("p",[t._v("这里需要解释说明下有关 webpack 提供的 SingleEntryPlugin 插件。这个插件是 webpack 提供的一个内置插件，当这个插件被挂载到 webpack 的编译流程的过程中是，会绑定"),s("code",[t._v("compiler.hooks.make.tapAsync")]),t._v("hook，当这个 hook 触发后会调用这个插件上的 SingleEntryPlugin.createDependency 静态方法去创建一个入口依赖，然后调用"),s("code",[t._v("compilation.addEntry")]),t._v("将这个依赖加入到编译的流程当中，这个是单入口文件的编译流程的最开始的一个步骤(具体可以参见 "),s("a",{attrs:{href:"https://github.com/webpack/webpack/blob/master/lib/SingleEntryPlugin.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Webpack SingleEntryPlugin 源码"),s("OutboundLink")],1),t._v(")。")]),t._v(" "),s("p",[t._v("Mpx 正是利用了 webpack 提供的这样一种能力，在遵照小程序的自定义组件的规范的前提下，解析 mpx json 配置文件的过程中，手动的调用 SingleEntryPlugin 相关的方法去完成动态入口的添加工作。这样也就串联起了所有的 mpx 文件的编译工作。")]),t._v(" "),s("h3",{attrs:{id:"render-function"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#render-function"}},[t._v("#")]),t._v(" Render Function")]),t._v(" "),s("p",[t._v("Render Function 这块的内容我觉得是 Mpx 设计上的一大亮点内容。Mpx 引入 Render Function 主要解决的问题是性能优化方向相关的，因为小程序的架构设计，逻辑层和渲染层是2个独立的。")]),t._v(" "),s("p",[t._v("这里直接引用 Mpx 有关 Render Function 对于性能优化相关开发工作的描述：")]),t._v(" "),s("blockquote",[s("p",[t._v("作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：")])]),t._v(" "),s("blockquote",[s("ul",[s("li",[t._v("尽可能减少setData调用的频次")]),t._v(" "),s("li",[t._v("尽可能减少单次setData传输的数据\n为了实现以上两个优化方向，我们做了以下几项工作：")])])]),t._v(" "),s("blockquote",[s("p",[t._v("将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；")])]),t._v(" "),s("blockquote",[s("p",[t._v("将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。")])]),t._v(" "),s("p",[t._v("接下来我们看下 Mpx 是如何实现 Render Function 的。这里我们从一个简单的 demo 来说起：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('Computed reversed message: "{{ reversedMessage }}"'),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("the c string {{ demoObj.a.b.c }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ { active: isActive } }}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/core"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("isActive")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'messages'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("demoObj")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'c'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reversedMessage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("split")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reverse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("code",[t._v(".mpx")]),t._v(" 文件经过 loader 编译转换的过程中。对于 template 模块的处理和 vue 类似，首先将 template 转化为 AST，然后再将 AST 转化为 code 的过程中做相关转化的工作，最终得到我们需要的 template 模板代码。")]),t._v(" "),s("p",[t._v("在"),s("code",[t._v("packages/webpack-plugin/lib/template-compiler.js")]),t._v("模板处理 loader 当中:")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderResult "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bindThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("global.currentInject = {\n    moduleId: ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("moduleId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(",\n    render: function () {\n      var __seen = [];\n      var renderData = {};\n      ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("compiler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("genNode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ast"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("return renderData;\n    }\n};\\n")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("needCollect")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ignoreMap")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" meta"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wxsModuleMap\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在 render 方法内部，创建 renderData 局部变量，调用"),s("code",[t._v("compiler.genNode(ast)")]),t._v("方法完成 Render Function 核心代码的生成工作，最终将这个 renderData 返回。例如在上面给出来的 demo 实例当中，通过"),s("code",[t._v("compiler.genNode(ast)")]),t._v("方法最终生成的代码为：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mpxShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mpxShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'display:none;'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" isActive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Computed reversed message: \\""')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" reversedMessage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"\\""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"the c string "')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" demoObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__injectHelper"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("transformClass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" isActive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("mpx 文件当中的 template 模块被初步处理成上面的代码后，可以看到这是一段可执行的 js 代码。那么这段 js 代码到底是用作何处呢？可以看到"),s("code",[t._v("compiler.genNode")]),t._v("方法是被包裹至"),s("code",[t._v("bindThis")]),t._v("方法当中的。即这段 js 代码还会被"),s("code",[t._v("bindThis")]),t._v("方法做进一步的处理。打开 bind-this.js 文件可以看到内部的实现其实就是一个 babel 的 transform plugin。在处理上面这段 js 代码的 AST 的过程中，通过这个插件对 js 代码做进一步的处理。最终这段 js 代码处理后的结果是：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* mpx inject */")]),t._v(" global"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentInject "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("moduleId")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"2271575d"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" __seen "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" renderData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpxShow"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mpxShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpxShow"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mpxShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpxShow"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mpxShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpxShow"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mpxShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'display:none;'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Computed reversed message: \\""')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"reversedMessage"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("reversedMessage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"reversedMessage"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("reversedMessage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"\\""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"the c string "')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"demoObj.a.b.c"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("demoObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"demoObj"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("demoObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"a"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"b"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"c"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__injectHelper"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"transformClass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"isActive"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isActive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"isActive"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isActive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("bindThis 方法对于 js 代码的转化规则就是：")]),t._v(" "),s("ol",[s("li",[t._v("一个变量的访问形式，改造成 this.xxx 的形式；")]),t._v(" "),s("li",[t._v("对象属性的访问形式，改造成 this.__get(object, property) 的形式(this.__get方法为运行时 mpx runtime 提供的方法)")])]),t._v(" "),s("p",[t._v("这里的 this 为 mpx 构造的一个代理对象，在你业务代码当中调用 createComponent/createPage 方法传入的配置项，例如 data，都会通过这个代理对象转化为响应式的数据。")]),t._v(" "),s("p",[t._v("需要注意的是不管哪种数据形式的改造，最终需要达到的效果就是确保在 Render Function 执行的过程当中，这些被模板使用到的数据能被正常的访问到，在访问的阶段中，这些被访问到的数据即被加入到 mpx 构建的整个响应式的系统当中。")]),t._v(" "),s("p",[t._v("只要在 template 当中使用到的 data 数据(包括衍生的 computed 数据)，最终都会被 renderData 所记录，而记录的数据形式是例如：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xxx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 数组的形式，第一项为这个数据实际的值，第二项为这个数据的 firstKey(主要用以数据 diff 的工作)")]),t._v("\n")])])]),s("p",[t._v("以上就是 mpx 生成 Render Function 的整个过程。总结下 Render Function 所做的工作：")]),t._v(" "),s("ol",[s("li",[t._v("执行 render 函数，将渲染模板使用到的数据加入到响应式的系统当中；")]),t._v(" "),s("li",[t._v("返回 renderData 用以接下来的数据 diff 以及调用小程序的 setData 方法来完成视图的更新")])]),t._v(" "),s("h3",{attrs:{id:"wxs-module"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#wxs-module"}},[t._v("#")]),t._v(" Wxs Module")]),t._v(" "),s("p",[t._v("Wxs 是小程序自己推出的一套脚本语言。"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("官方文档"),s("OutboundLink")],1),t._v("给出的示例，wxs 模块必须要声明式的被 wxml 引用。和 js 在 jsCore 当中去运行不同的是 wxs 是在渲染线程当中去运行的。因此 wxs 的执行便少了一次从 jsCore 执行的线程和渲染线程的通讯，从这个角度来说是对代码执行效率和性能上的比较大的一个优化手段。")]),t._v(" "),s("p",[t._v("有关官方提到的有关 wxs 的运行效率的问题还有待论证：")]),t._v(" "),s("blockquote",[s("p",[t._v("“在 android 设备中，小程序里的 wxs 与 js 运行效率无差异，而在 ios 设备中，小程序里的 wxs 会比 js 快 2~20倍。”")])]),t._v(" "),s("p",[t._v("因为 mpx 是对小程序做渐进增强，因此 wxs 的使用方式和原生的小程序保持一致。在你的"),s("code",[t._v(".mpx")]),t._v("文件当中的 template block 内通过路径直接去引入 wxs 模块即可使用：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("wxs")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("../wxs/components/list.wxs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ list.FOO }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wxs/components/list.wxs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" Foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'This is from list wxs module'")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  Foo\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在 template 模块经过 template-compiler 处理的过程中。模板编译器 compiler 在解析模板的 AST 过程中会针对 wxs 标签缓存一份 wxs 模块的映射表：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("meta")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("wxsModuleMap")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../wxs/components/list.wxs'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("当 compiler 对 template 模板解析完后，template-compiler 接下来就开始处理 wxs 模块相关的内容：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// template-compiler/index.js")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("raw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("addDependency")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("dep")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" resourceIdent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getResourceIdentifier")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resourceIdent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" factory "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dependencyFactories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("constructor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("factory "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("throw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Error")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("No module factory available for dependency type: ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("constructor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" innerMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" dependencies"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("factory"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("innerMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        dependencies"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("factory"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("innerMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" list "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" innerMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resourceIdent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("list "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" innerMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resourceIdent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("list "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果有 wxsModuleMap 即为 wxs module 依赖的话，那么下面会调用 compilation.addModuleDependencies 方法")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 wxsModule 作为 issuer 的依赖再次进行编译，最终也会被打包进输出的模块代码当中")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 需要注意的就是 wxs module 不仅要被注入到 bundle 里的 render 函数当中，同时也会通过 wxs-loader 处理，单独输出一份可运行的 wxs js 文件供 wxml 引入使用")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" module "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" meta"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wxsModuleMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    isSync "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" src "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" meta"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wxsModuleMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" expression "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("require(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("src"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" deps "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// parser 为 js 的编译器")]),t._v("\n    parser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("parse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("expression"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("current")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 需要注意的是这里需要部署 addDependency 接口，因为通过 parse.parse 对代码进行编译的时候，会调用这个接口来获取 require(${JSON.stringify(src)}) 编译产生的依赖模块")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("addDependency")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("dep")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("userRequest "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" module\n          deps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" issuer\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    issuer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addVariable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" expression"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" deps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 给 issuer module 添加 variable 依赖")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("iterationOfArrayCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("deps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" addDependency"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果没有 wxs module 的处理，那么 template-compiler 即为同步任务，否则为异步任务")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isSync"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" callback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" sortedDependencies "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pair1 "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("of")]),t._v(" dependencies"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pair2 "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("of")]),t._v(" pair1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        sortedDependencies"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("factory")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" pair1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" pair2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用 compilation.addModuleDependencies 方法，将 wxs module 作为 issuer module 的依赖加入到编译流程中")]),t._v("\n    compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addModuleDependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n      issuer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      sortedDependencies"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bail"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"template-script-style-json-模块单文件的生成"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#template-script-style-json-模块单文件的生成"}},[t._v("#")]),t._v(" template/script/style/json 模块单文件的生成")]),t._v(" "),s("p",[t._v("不同于 Vue 借助 webpack 是将 Vue 单文件最终打包成单独的 js chunk 文件。而小程序的规范是每个页面/组件需要对应的 wxml/js/wxss/json 4个文件。因为 mpx 使用单文件的方式去组织代码，所以在编译环节所需要做的工作之一就是将 mpx 单文件当中不同 block 的内容拆解到对应文件类型当中。在动态入口编译的小节里面我们了解到 mpx 会分析每个 mpx 文件的引用依赖，从而去给这个文件创建一个 entry 依赖(SingleEntryPlugin)并加入到 webpack 的编译流程当中。我们还是继续看下 mpx loader 对于 mpx 单文件初步编译转化后的内容：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* script */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"!!babel-loader!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=script&index=0!./list.mpx"')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=styles&index=0!../../node_modules/@mpxjs/webpack-plugin/lib/wxss/loader?root=&importLoaders=1&extract=true!../../node_modules/@mpxjs/webpack-plugin/lib/style-compiler/index?{\\"id\\":\\"2271575d\\",\\"scoped\\":false,\\"sourceMap\\":false,\\"transRpx\\":{\\"mode\\":\\"only\\",\\"comment\\":\\"use rpx\\",\\"include\\":\\"/Users/XRene/demo/mpx-demo-source/src\\"}}!stylus-loader!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=styles&index=0!./list.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* json */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=json&index=0!../../node_modules/@mpxjs/webpack-plugin/lib/json-compiler/index?root=!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=json&index=0!./list.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* template */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=template&index=0!../../node_modules/@mpxjs/webpack-plugin/lib/wxml/wxml-loader?root=!../../node_modules/@mpxjs/webpack-plugin/lib/template-compiler/index?{\\"usingComponents\\":[],\\"hasScoped\\":false,\\"isNative\\":false,\\"moduleId\\":\\"2271575d\\"}!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=template&index=0!./list.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("接下来可以看下 styles/json/template 这3个 block 的处理流程是什么样。")]),t._v(" "),s("p",[t._v("首先来看下 json block 的处理流程："),s("code",[t._v("list.mpx -> json-compiler -> extractor")]),t._v("。第一个阶段 list.mpx 文件经由 json-compiler 的处理流程在前面的章节已经讲过，主要就是分析依赖增加动态入口的编译过程。当所有的依赖分析完后，调用 json-compiler loader 的异步回调函数：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib/json-compiler/index.js")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" nativeCallback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" callbacked "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("callback")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" processOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkEntryDeps")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      callbacked "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nativeCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("var json = ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(";\\n")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("processOutput"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" output "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("processOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      output "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("module.exports = JSON.stringify(json, null, 2);\\n")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nativeCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这里我们可以看到经由 json-compiler 处理后，通过"),s("code",[t._v("nativeCallback")]),t._v("方法传入下一个 loader 的文本内容形如：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" json "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/list397512ea/list"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("即这段文本内容会传递到下一个 loader 内部进行处理，即 extractor。接下来我们来看下 extractor 里面主要是实现了哪些功能：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib/extractor.js")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" contentLoader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" normalize"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("lib")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'content-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" request "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("!!")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("contentLoader"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("resource"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 构建一个新的 resource，且这个 resource 只需要经过 content-loader")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" resultSource "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" defaultResultSource\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" childFilename "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'extractor-filename'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" outputOptions "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("filename")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" childFilename\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建一个 child compiler")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" childCompiler "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mainCompilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createChildCompiler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" outputOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NodeTemplatePlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("outputOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LibraryTemplatePlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commonjs2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 最终输出的 chunk 内容遵循 commonjs 规范的可执行的模块代码 module.exports = (function(modules) {})([modules])")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NodeTargetPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SingleEntryPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resourcePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LimitChunkCountPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("maxChunks")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  childCompiler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hooks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("thisCompilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("tap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MpxWebpackPlugin '")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("compilation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建 loaderContext 时触发的 hook，在这个 hook 触发的时候，将原本从 json-compiler 传递过来的 content 内容挂载至 loaderContext.__mpx__ 属性上面以供接下来的 content -loader 来进行使用")]),t._v("\n    compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hooks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normalModuleLoader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("tap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MpxWebpackPlugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("loaderContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 传递编译结果，子编译器进入content-loader后直接输出")]),t._v("\n      loaderContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("__mpx__ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fileDependencies")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getDependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("contextDependencies")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getContextDependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" source\n\n  childCompiler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hooks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("afterCompile"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("tapAsync")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MpxWebpackPlugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里 afterCompile 产出的 assets 的代码当中是包含 webpack runtime bootstrap 的代码，不过需要注意的是这个 source 模块的产出形式")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 因为使用了 new LibraryTemplatePlugin(null, 'commonjs2') 等插件。所以产出的 source 是可以在 node 环境下执行的 module")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 因为在 loaderContext 上部署了 exec 方法，即可以直接执行 commonjs 规范的 module 代码，这样就最终完成了 mpx 单文件当中不同模块的抽离工作")]),t._v("\n    source "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("assets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("childFilename"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("assets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("childFilename"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("source")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Remove all chunk assets")]),t._v("\n    compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("chunks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("chunk")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      chunk"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("files"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("file")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("delete")]),t._v(" compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("assets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("file"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  childCompiler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runAsChild")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" compilation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// exec 是 loaderContext 上提供的一个方法，在其内部会构建原生的 node.js module，并执行这个 module 的代码")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行这个 module 代码后获取的内容就是通过 module.exports 导出的内容")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" text "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("source"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Array"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isArray")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        text "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'\\n'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" extracted "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("extract")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resourcePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" selfResourcePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("extracted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        resultSource "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("module.exports = __webpack_public_path__ + ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("extracted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("catch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nativeCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultSource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nativeCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resultSource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nativeCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("稍微总结下上面的处理流程：")]),t._v(" "),s("ol",[s("li",[t._v("构建一个以当前模块路径及 content-loader 的 resource 路径")]),t._v(" "),s("li",[t._v("以这个 resource 路径作为入口模块，创建一个 childCompiler")]),t._v(" "),s("li",[t._v("childCompiler 启动后，创建 loaderContext 的过程中，将 content 文本内容挂载至 loaderContext."),s("strong",[t._v("mpx")]),t._v(" 上，这样在 content-loader 在处理入口模块的时候仅仅就是取出这个 content 文本内容并返回。实际上这个入口模块经过 loader 的过程不会做任何的处理工作，仅仅是将父 compilation 传入的 content 返回出去。")]),t._v(" "),s("li",[t._v("loader 处理模块的环节结束后，进入到 module.build 阶段，这个阶段对 content 内容没有太多的处理")]),t._v(" "),s("li",[t._v("createAssets 阶段，输出 chunk。")]),t._v(" "),s("li",[t._v("将输出的 chunk 构建为一个原生的 node.js 模块并执行，获取从这个 chunk 导出的内容。也就是模块通过"),s("code",[t._v("module.exports")]),t._v("导出的内容。")])]),t._v(" "),s("p",[t._v("所以上面的示例 demo 最终会输出一个 json 文件，里面包含的内容即为：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/list397512ea/list"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"运行时环节"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#运行时环节"}},[t._v("#")]),t._v(" 运行时环节")]),t._v(" "),s("p",[t._v("以上几个章节主要是分析了几个 Mpx 在编译构建环节所做的工作。接下来我们来看下 Mpx 在运行时环节做了哪些工作。")]),t._v(" "),s("h3",{attrs:{id:"响应式系统"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式系统"}},[t._v("#")]),t._v(" 响应式系统")]),t._v(" "),s("p",[t._v("小程序也是通过数据去驱动视图的渲染，需要手动的调用"),s("code",[t._v("setData")]),t._v("去完成这样一个动作。同时小程序的视图层也提供了用户交互的响应事件系统，在 js 代码中可以去注册相关的事件回调并在回调中去更改相关数据的值。Mpx 使用 Mobx 作为响应式数据工具并引入到小程序当中，使得小程序也有一套完成的响应式的系统，让小程序的开发有了更好的体验。")]),t._v(" "),s("p",[t._v("还是从组件的角度开始分析 mpx 的整个响应式的系统。每次通过"),s("code",[t._v("createComponent")]),t._v("方法去创建一个新的组件，这个方法将原生的小程序创造组件的方法"),s("code",[t._v("Component")]),t._v("做了一层代理，例如在 attched 的生命周期钩子函数内部会注入一个 mixin：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// attached 生命周期钩子 mixin")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 提供代理对象需要的api")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("transformApiForProxy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" currentInject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 缓存options")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$rawOptions "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rawOptions "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 原始的，没有剔除 customKeys 的 options 配置")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建proxy对象")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" mpxProxy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MPXProxy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rawOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将当前实例代理到 MPXProxy 这个代理对象上面去")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$mpxProxy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mpxProxy "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在小程序实例上绑定 $mpxProxy 的实例")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 组件监听视图数据更新, attached之后才能拿到properties")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$mpxProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在这个方法内部首先调用"),s("code",[t._v("transformApiForProxy")]),t._v("方法对组件实例上下文"),s("code",[t._v("this")]),t._v("做一层代理工作，在 context 上下文上去重置小程序的 setData 方法，同时拓展 context 相关的属性内容：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("transformApiForProxy")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" currentInject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rawSetData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// setData 绑定对应的 context 上下文")]),t._v("\n  Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProperties")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("setData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 重置 context 的 setData 方法")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$mpxProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$mpxProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configurable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("__getInitialData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configurable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("__render")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 小程序原生的 setData 方法")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" rawSetData\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configurable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// context 绑定注入的render函数")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("currentInject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("currentInject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 编译过程中生成的 render 函数")]),t._v("\n      Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProperties")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("__injectedRender")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" currentInject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configurable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("currentInject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getRefsData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProperties")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("__getRefsData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" currentInject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getRefsData\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configurable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("接下来实例化一个 mpxProxy 实例并挂载至 context 上下文的 $mpxProxy 属性上，并调用 mpxProxy 的 created 方法完成这个代理对象的初始化的工作。在 created 方法内部主要是完成了以下的几个工作：")]),t._v(" "),s("ol",[s("li",[t._v("initApi，在组件实例 this 上挂载"),s("code",[t._v("$watch")]),t._v(","),s("code",[t._v("$forceUpdate")]),t._v(","),s("code",[t._v("$updated")]),t._v(","),s("code",[t._v("$nextTick")]),t._v("等方法，这样在你的业务代码当中即可直接访问实例上部署好的这些方法；")]),t._v(" "),s("li",[t._v("initData")]),t._v(" "),s("li",[t._v("initComputed，将 computed 计算属性字段全部代理至组件实例 this 上；")]),t._v(" "),s("li",[t._v("通过 Mobx observable 方法将 data 数据转化为响应式的数据；")]),t._v(" "),s("li",[t._v("initWatch，初始化所有的 watcher 实例；")]),t._v(" "),s("li",[t._v("initRender，初始化一个 renderWatcher 实例；")])]),t._v(" "),s("p",[t._v("这里我们具体的来看下 initRender 方法内部是如何进行工作的：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MPXProxy")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initRender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderWatcher\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderExcutedFailed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("__injectedRender"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack 注入的有关这个 page/component 的 renderFunction")]),t._v("\n      renderWatcher "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderExcutedFailed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__injectedRender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行 renderFunction，获取渲染所需的响应式数据")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("catch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handler")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("ret")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("renderExcutedFailed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("renderWithData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ret"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 渲染页面")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("forceCallback")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在 initRender 方法内部非常清楚的看到，首先判断这个 page/component 是否具有 renderFunction，如果有的话那么就直接实例化一个 renderWatcher：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Watcher")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("constructor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" expr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("destroyed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("expr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'String'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" expr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expr")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" callbackType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callbackType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Object'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      options "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" callback\n      callback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callbackType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'String'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      callback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("callback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" callback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'function'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" options "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("uid\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建一个新的 reaction")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("reaction "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Reaction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("mpx-watcher-")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在调用 getValue 函数的时候，实际上是调用 reaction.track 方法，这个方法内部会自动执行 effect 函数，即执行 this.update() 方法，这样便会出发一次模板当中的 render 函数来完成依赖的收集")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("immediateAsync"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 放置到一个队列里面去执行")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("queueWatcher")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 立即执行 callback")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" value\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("immediate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("callback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValue")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" value\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("reaction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("track")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取注入的 render 函数执行后返回的 renderData 的值，在执行 render 函数的过程中，就会访问响应式数据的值")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("deep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" valueType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 某些情况下，最外层是非isObservable 对象，比如同时观察多个属性时")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isObservable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("valueType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Array'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" valueType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Object'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("valueType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Array'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toJS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newValue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("keys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("key")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              newValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toJS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" newValue\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toJS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isObservableArray")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("peek")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isObservableObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("keys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" value\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sync"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("queueWatcher")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" immediateAsync "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hasOwnProperty")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" oldValue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 重新获取新的 renderData 的值")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("immediateAsync "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!==")]),t._v(" oldValue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("forceCallback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        immediateAsync "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("destroy")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("destroyed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("reaction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getDisposer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Watcher 观察者核心实现的工作流程就是：")]),t._v(" "),s("ol",[s("li",[t._v("构建一个 Reaction 实例；")]),t._v(" "),s("li",[t._v("调用 getValue 方法，即 reaction.track，在这个方法内部执行过程中会调用 renderFunction，这样在 renderFunction 方法的执行过程中便会访问到渲染所需要的响应式的数据并完成依赖收集；")]),t._v(" "),s("li",[t._v("根据 immediateAsync 配置来决定回调是放到下一帧还是立即执行；")]),t._v(" "),s("li",[t._v("当响应式数据发生变化的时候，执行 reaction 实例当中的回调函数，即"),s("code",[t._v("this.update()")]),t._v("方法来完成页面的重新渲染。")])]),t._v(" "),s("p",[t._v("mpx 在构建这个响应式的系统当中，主要有2个大的环节，其一为在构建编译的过程中，将 template 模块转化为 renderFunction，提供了渲染模板时所需响应式数据的访问机制，并将 renderFunction 注入到运行时代码当中，其二就是在运行环节，mpx 通过构建一个小程序实例的代理对象，将小程序实例上的数据访问全部代理至 MPXProxy 实例上，而 MPXProxy 实例即 mpx 基于 Mobx 去构建的一套响应式数据对象，首先将 data 数据转化为响应式数据，其次提供了 computed 计算属性，watch 方法等一系列增强的拓展属性/方法，虽然在你的业务代码当中 page/component 实例 this 都是小程序提供的，但是最终经过代理机制，实际上访问的是 MPXProxy 所提供的增强功能，所以 mpx 也是通过这样一个代理对象去接管了小程序的实例。需要特别指出的是，mpx 将小程序官方提供的 setData 方法同样收敛至内部，这也是响应式系统提供的基础能力，即开发者只需要关注业务开发，而有关小程序渲染运行在 mpx 内部去帮你完成。")]),t._v(" "),s("h2",{attrs:{id:"性能优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#性能优化"}},[t._v("#")]),t._v(" 性能优化")]),t._v(" "),s("p",[t._v("由于小程序的双线程的架构设计，逻辑层和视图层之间需要桥接 native bridge。如果要完成视图层的更新，那么逻辑层需要调用 setData 方法，数据经由 native bridge，再到渲染层，这个工程流程为：")]),t._v(" "),s("blockquote",[s("p",[t._v("小程序逻辑层调用宿主环境的 setData 方法；")])]),t._v(" "),s("blockquote",[s("p",[t._v("逻辑层执行 JSON.stringify 将待传输数据转换成字符串并拼接到特定的JS脚本，并通过evaluateJavascript 执行脚本将数据传输到渲染层；")])]),t._v(" "),s("blockquote",[s("p",[t._v("渲染层接收到后， WebView JS 线程会对脚本进行编译，得到待更新数据后进入渲染队列等待 WebView 线程空闲时进行页面渲染；")])]),t._v(" "),s("blockquote",[s("p",[t._v("WebView 线程开始执行渲染时，待更新数据会合并到视图层保留的原始 data 数据，并将新数据套用在WXML片段中得到新的虚拟节点树。经过新虚拟节点树与当前节点树的 diff 对比，将差异部分更新到UI视图。同时，将新的节点树替换旧节点树，用于下一次重渲染。")])]),t._v(" "),s("p",[s("a",{attrs:{href:"https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651232791&idx=1&sn=4b83b66d376b1331a992d242cb2a0f17&chksm=bd4943938a3eca853a687765397517cc0ab9cfe4c711705e8fd821bbea8a1ab3c115c8c2fc65&scene=21#wechat_redirect",target:"_blank",rel:"noopener noreferrer"}},[t._v("文章来源"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("而 setData 作为逻辑层和视图层之间通讯的核心接口，那么对于这个接口的使用遵照一些准则将有助于性能方面的提升。")]),t._v(" "),s("h3",{attrs:{id:"尽可能的减少-setdata-传输的数据"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#尽可能的减少-setdata-传输的数据"}},[t._v("#")]),t._v(" 尽可能的减少 setData 传输的数据")]),t._v(" "),s("p",[t._v("Mpx 在这个方面所做的工作之一就是基于数据路径的 diff。这也是官方所推荐的 setData 的方式。每次响应式数据发生了变化，调用 setData 方法的时候确保传递的数据都为 diff 过后的最小数据集，这样来减少 setData 传输的数据。")]),t._v(" "),s("p",[t._v("接下来我们就来看下这个优化手段的具体实现思路，首先还是从一个简单的 demo 来看：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("obj")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("d")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("d")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'d'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("在示例 demo 当中，声明了一个 obj 对象(这个对象里面的内容在模块当中被使用到了)。然后经过 200ms 后，手动修改 obj.a 的值，因为对于 c 字段来说它的值没有发生改变，而 d 字段发生了改变。因此在 setData 方法当中也应该只更新 obj.a.d 的值，即：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'obj.a.d'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'d'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("因为 mpx 是整体接管了小程序当中有关调用 setData 方法并驱动视图更新的机制。所以当你在改变某些数据的时候，mpx 会帮你完成数据的 diff 工作，以保证每次调用 setData 方法时，传入的是最小的更新数据集。")]),t._v(" "),s("p",[t._v("这里也简单的分析下 mpx 是如何去实现这样的功能的。在上文的编译构建阶段有分析到 mpx 生成的 Render Function，这个 Render Function 每次执行的时候会返回一个 renderData，而这个 renderData 即用以接下来进行 setData 驱动视图渲染的原始数据。renderData 的数据组织形式是模板当中使用到的数据路径作为 key 键值，对应的值使用一个数组组织，数组第一项为数据的访问路径(可获取到对应渲染数据)，第二项为数据路径的第一个键值，例如在 demo 示例当中的 renderData 数据如下：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'obj.a.c'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'obj'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nrenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'obj.a.d'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'obj'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("当页面第一次渲染，或者是响应式输出发生变化的时候，Render Function 都会被执行一次用以获取最新的 renderData 来进行接下来的页面渲染过程。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/core/proxy.js")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MPXProxy")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("renderWithData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rawRenderData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// rawRenderData 即为 Render Function 执行后获取的初始化 renderData")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" renderData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("preprocessRenderData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rawRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// renderData 数据的预处理")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("miniRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 最小数据渲染集，页面/组件初次渲染的时候使用 miniRenderData 进行渲染，初次渲染的时候是没有数据需要进行 diff 的")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("miniRenderData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" key "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 遍历数据访问路径")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hasOwnProperty")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" item "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" firstKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 某个字段 path 的第一个 key 值")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("localKeys"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("miniRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("diffAndCloneA")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clone\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doRender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("miniRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 非初次渲染使用 processRenderData 进行数据的处理，主要是需要进行数据的 diff 取值工作，并更新 miniRenderData 的值")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doRender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("processRenderData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("processRenderData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("renderData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" key "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hasOwnProperty")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" item "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" firstKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" clone"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diff "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("diffAndCloneA")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("miniRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 开始数据 diff")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// firstKey 必须是为响应式数据的 key，且这个发生变化的 key 为 forceUpdateKey 或者是在 diff 阶段发现确实出现了 diff 的情况")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("localKeys"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkInForceUpdateKeys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" diff"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("miniRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" clone\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/helper/utils.js")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果 renderData 里面即包含对某个 key 的访问，同时还有对这个 key 的子节点访问的话，那么需要剔除这个子节点")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * process renderData, remove sub node if visit parent node already\n * @param {Object} renderData\n * @return {Object} processedRenderData\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("preprocessRenderData")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("renderData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// method for get key path array")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("processKeyPathMap")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("keyPathMap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" keyPath "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("keys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keyPathMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" keyPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("keyA")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" keyPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("every")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("keyB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keyA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("startsWith")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keyB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" keyA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!==")]),t._v(" keyB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" nextChar "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" keyA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("keyB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("nextChar "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" nextChar "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'['")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" processedRenderData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" renderDataFinalKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("processKeyPathMap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取最终需要被渲染的数据的 key")]),t._v("\n  Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("keys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderDataFinalKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      processedRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" processedRenderData\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("其中在 processRenderData 方法内部调用了 diffAndCloneA 方法去完成数据的 diff 工作。在这个方法内部判断新、旧值是否发生变化，返回的 diff 字段即表示是否发生了变化，clone 为 diffAndCloneA 接受到的第一个数据的深拷贝值。")]),t._v(" "),s("p",[t._v("这里大致的描述下相关流程：")]),t._v(" "),s("ol",[s("li",[t._v("响应式的数据发生了变化，触发 Render Function 重新执行，获取最新的 renderData；")]),t._v(" "),s("li",[t._v("renderData 的预处理，主要是用以剔除通过路径访问时同时有父、子路径情况下的子路径的 key；")]),t._v(" "),s("li",[t._v("判断是否存在 miniRenderData 最小数据渲染集，如果没有那么 Mpx 完成 miniRenderData 最小渲染数据集的收集，如果有那么使用处理后的 renderData 和 miniRenderData 进行数据的 diff 工作(diffAndCloneA)，并更新最新的 miniRenderData 的值；")]),t._v(" "),s("li",[t._v("调用 doRender 方法，进入到 setData 阶段")])]),t._v(" "),s("p",[t._v("相关参阅文档：")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#Page.prototype.setData(Object%20data,%20Function%20callback)",target:"_blank",rel:"noopener noreferrer"}},[t._v("Page"),s("OutboundLink")],1)])]),t._v(" "),s("h3",{attrs:{id:"尽可能的减少-setdata-的调用频次"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#尽可能的减少-setdata-的调用频次"}},[t._v("#")]),t._v(" 尽可能的减少 setData 的调用频次")]),t._v(" "),s("p",[t._v("每次调用 setData 方法都会完成一次从逻辑层 -> native bridge -> 视图层的通讯，并完成页面的更新。因此频繁的调用 setData 方法势必也会造成视图的多次渲染，用户的交互受阻。所以对于 setData 方法另外一个优化角度就是尽可能的减少 setData 的调用频次，将多个同步的 setData 操作合并到一次调用当中。接下来就来看下 mpx 在这方面是如何做优化的。")]),t._v(" "),s("p",[t._v("还是先来看一个简单的 demo:")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("msg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("obj")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("d")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("obj")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("msg "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'world'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("deep")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("d")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'d'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("在示例 demo 当中，msg 和 obj 都作为模板依赖的数据，这个组件开始展示后的 200ms，更新 obj.a 的值，同时 obj 被 watch，当 obj 发生改变后，更新 msg 的值。这里的逻辑处理顺序是：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a 变化 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" 将 renderWatch 加入到执行队列 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" 触发 obj watch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" 将 obj watch 加入到执行队列 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" 将执行队列放到下一帧执行 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" 按照 watch id 从小到大依次执行 watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("run "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" setData "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("方法调用一次")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("即 renderWatch 回调"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("，统一更新 obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a 及 msg "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" 视图重新渲染\n")])])]),s("p",[t._v("接下来就来具体看下这个流程：由于 obj 作为模板渲染的依赖数据，自然会被这个组件的 renderWatch 作为依赖而被收集。当 obj 的值发生变化后，首先触发 reaction 的回调，即 "),s("code",[t._v("this.update()")]),t._v(" 方法，如果是个同步的 watch，那么立即调用 "),s("code",[t._v("this.run()")]),t._v(" 方法，即 watcher 监听的回调方法，否则就通过 "),s("code",[t._v("queueWatcher(this)")]),t._v(" 方法将这个 watcher 加入到执行队列：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/core/watcher.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" Watcher "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("constructor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" expr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("uid\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("reaction "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Reaction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("mpx-watcher-")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sync"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("queueWatcher")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("而在 queueWatcher 方法中，lockTask 维护了一个异步锁，即将 flushQueue 当成微任务统一放到下一帧去执行。所以在 flushQueue 开始执行之前，还会有同步的代码将 watcher 加入到执行队列当中，当 flushQueue 开始执行的时候，依照 watcher.id 升序依次执行，这样去确保 renderWatcher 在执行前，其他所有的 watcher 回调都执行完了，即执行 renderWatcher 的回调的时候获取到的 renderData 都是最新的，然后再去进行 setData 的操作，完成页面的更新。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/core/queueWatcher.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" asyncLock "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../helper/utils'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" queue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" idsMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" flushing "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" curIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" lockTask "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("asyncLock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("queueWatcher")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("watcher")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" watcher "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'function'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    watcher "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("Infinity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" watcher\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("idsMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("Infinity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    idsMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("flushing"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("while")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" curIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        i"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("splice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("lockTask")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flushQueue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resetQueue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("flushQueue")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  flushing "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n  queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sort")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("curIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" curIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" curIndex"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" watcher "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("curIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    idsMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v("\n    watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("destroyed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resetQueue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resetQueue")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  flushing "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n  curIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/59.27106fbb.js b/docs-vuepress/.vuepress/dist/assets/js/59.27106fbb.js
new file mode 100644
index 0000000000..f5c2aa7158
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/59.27106fbb.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{407:function(v,_,t){"use strict";t.r(_);var d=t(4),e=Object(d.a)({},(function(){var v=this,_=v._self._c;return _("ContentSlotsDistributor",{attrs:{"slot-key":v.$parent.slotKey}},[_("h1",{attrs:{id:"小程序框架运行时性能大测评"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#小程序框架运行时性能大测评"}},[v._v("#")]),v._v(" 小程序框架运行时性能大测评")]),v._v(" "),_("blockquote",[_("p",[v._v("作者：董宏平("),_("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[v._v("hiyuki"),_("OutboundLink")],1),v._v(")，滴滴出行小程序负责人，mpx框架负责人及核心作者")])]),v._v(" "),_("p",[v._v("随着小程序在商业上的巨大成功，小程序开发在国内前端领域越来越受到重视，为了方便广大开发者更好地进行小程序开发，各类小程序框架也层出不穷，呈现出百花齐放的态势。但是到目前为止，业内一直没有出现一份全面、详细、客观、公正的小程序框架测评报告，为小程序开发者在技术选型时提供参考。于是我便筹划推出一系列文章，对业内流行的小程序框架进行一次全方位的、客观公正的测评，本文是系列文章的第一篇——运行时性能篇。")]),v._v(" "),_("p",[v._v("在本文中，我们会对下列框架进行运行时性能测试(排名不分先后):")]),v._v(" "),_("ul",[_("li",[v._v("wepy2(https://github.com/Tencent/wepy) @2.0.0-alpha.20")]),v._v(" "),_("li",[v._v("uniapp(https://github.com/dcloudio/uni-app) @2.0.0-26120200226001")]),v._v(" "),_("li",[v._v("mpx(https://github.com/didi/mpx) @2.5.3")]),v._v(" "),_("li",[v._v("chameleon(https://github.com/didi/chameleon) @1.0.5")]),v._v(" "),_("li",[v._v("mpvue(https://github.com/Meituan-Dianping/mpvue) @2.0.6")]),v._v(" "),_("li",[v._v("kbone(https://github.com/Tencent/kbone) @0.8.3")]),v._v(" "),_("li",[v._v("taro next(https://github.com/NervJS/taro) @3.0.0-alpha.5")])]),v._v(" "),_("p",[v._v("其中对于kbone和taro next均以vue作为业务框架进行测试。")]),v._v(" "),_("p",[v._v("运行时性能的测试内容包括以下几个维度：")]),v._v(" "),_("ul",[_("li",[v._v("框架运行时体积")]),v._v(" "),_("li",[v._v("页面渲染耗时")]),v._v(" "),_("li",[v._v("页面更新耗时")]),v._v(" "),_("li",[v._v("局部更新耗时")]),v._v(" "),_("li",[v._v("setData调用次数")]),v._v(" "),_("li",[v._v("setData发送数据大小")])]),v._v(" "),_("p",[v._v("框架性能测试demo全部存放于https://github.com/hiyuki/mp-framework-benchmark 中，欢迎广大开发者进行验证纠错及补全；")]),v._v(" "),_("h2",{attrs:{id:"测试方案"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#测试方案"}},[v._v("#")]),v._v(" 测试方案")]),v._v(" "),_("p",[v._v("为了使测试结果真实有效，我基于常见的业务场景构建了两种测试场景，分别是动态测试场景和静态测试场景。")]),v._v(" "),_("h3",{attrs:{id:"动态测试场景"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#动态测试场景"}},[v._v("#")]),v._v(" 动态测试场景")]),v._v(" "),_("p",[v._v("动态测试中，视图基于数据动态渲染，静态节点较少，视图更新耗时和setData调用情况是该测试场景中的主要测试点。")]),v._v(" "),_("p",[v._v("动态测试demo模拟了实际业务中常见的长列表+多tab场景，该demo中存在两份优惠券列表数据，一份为可用券数据，另一份为不可用券数据，其中同一时刻视图中只会渲染展示其中一份数据，可以在上方的操作区模拟对列表数据的各种操作及视图展示切换(切tab)。")]),v._v(" "),_("p",[_("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/PWsGL0GkuQ/dynamic.jpeg",width:"300px"}})]),v._v(" "),_("p",[_("em",[v._v("动态测试demo")])]),v._v(" "),_("p",[v._v("在动态测试中，我在外部通过函数代理的方式在初始化之前将App、Page和Component构造器进行代理，通过mixin的方式在Page的onLoad和Component的created钩子中注入setData拦截逻辑，对所有页面和组件的setData调用进行监听，并统计小程序的视图更新耗时及setData调用情况。该测试方式能够做到对框架代码的零侵入，能够跟踪到小程序全量的setData行为并进行独立的耗时计算，具有很强的普适性，代码具体实现可以查看https://github.com/hiyuki/mp-framework-benchmark/blob/master/utils/proxy.js")]),v._v(" "),_("h3",{attrs:{id:"静态测试场景"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#静态测试场景"}},[v._v("#")]),v._v(" 静态测试场景")]),v._v(" "),_("p",[v._v("静态测试模拟业务中静态页面的场景，如运营活动和文章等页面，页面内具备大量的静态节点，而没有数据动态渲染，初始ready耗时是该场景下测试的重心。")]),v._v(" "),_("p",[v._v("静态测试demo使用了我去年发表的一篇技术文章的html代码进行小程序适配构建，其中包含大量静态节点及文本内容。")]),v._v(" "),_("p",[_("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/5TOToHvunN/static.jpeg",width:"300px"}})]),v._v(" "),_("p",[_("em",[v._v("静态测试demo")])]),v._v(" "),_("h2",{attrs:{id:"测试流程及数据"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#测试流程及数据"}},[v._v("#")]),v._v(" 测试流程及数据")]),v._v(" "),_("blockquote",[_("p",[v._v("以下所有耗时类的测试数据均为微信小程序中真机进行5次测试计算平均值得出，单位均为ms。Ios测试环境为手机型号iPhone 11，系统版本13.3.1，微信版本7.0.12，安卓测试环境为手机型号小米9，系统版本Android10，微信版本7.0.12。")])]),v._v(" "),_("blockquote",[_("p",[v._v("为了使数据展示不过于混乱复杂，文章中所列的数据以Ios的测试结果为主，安卓测试结论与Ios相符，整体耗时比Ios高3~4倍左右，所有的原始测试数据存放在https://github.com/hiyuki/mp-framework-benchmark/blob/master/rawData.csv")])]),v._v(" "),_("blockquote",[_("p",[v._v("由于transform-runtime引入的core-js会对框架的运行时体积和运行耗时带来一定影响，且不是所有的框架都会在编译时开启transform-runtime，为了对齐测试环境，下述测试均在transform-runtime关闭时进行。")])]),v._v(" "),_("h3",{attrs:{id:"框架运行时体积"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#框架运行时体积"}},[v._v("#")]),v._v(" 框架运行时体积")]),v._v(" "),_("p",[v._v("由于不是所有框架都能够使用"),_("code",[v._v("webpack-bundle-analyzer")]),v._v("得到精确的包体积占用，这里我通过将各框架生成的demo项目体积减去native编写的demo项目体积作为框架的运行时体积。")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("demo总体积(KB)")]),v._v(" "),_("th",[v._v("框架运行时体积(KB)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("27")]),v._v(" "),_("td",[v._v("0")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("66")]),v._v(" "),_("td",[v._v("39")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("114")]),v._v(" "),_("td",[v._v("87")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("78")]),v._v(" "),_("td",[v._v("51")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("136")]),v._v(" "),_("td",[v._v("109")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("103")]),v._v(" "),_("td",[v._v("76")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("395")]),v._v(" "),_("td",[v._v("368")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("183")]),v._v(" "),_("td",[v._v("156")])])])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nnative > wepy2 > mpx > mpvue > uniapp > chameleon > taro next > kbone")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("wepy2和mpx在框架运行时体积上控制得最好；")]),v._v(" "),_("li",[v._v("taro next和kbone由于动态渲染的特性，在dist中会生成递归渲染模板/组件，所以占用体积较大。")])]),v._v(" "),_("h3",{attrs:{id:"页面渲染耗时-动态测试"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#页面渲染耗时-动态测试"}},[v._v("#")]),v._v(" 页面渲染耗时(动态测试)")]),v._v(" "),_("p",[v._v("我们使用"),_("code",[v._v("刷新页面")]),v._v("操作触发页面重新加载，对于大部分框架来说，页面渲染耗时是从触发刷新操作到页面执行onReady的耗时，但是对于像kbone和taro next这样的动态渲染框架，页面执行onReady并不代表视图真正渲染完成，为此，我们设定了一个特殊规则，在页面onReady触发的1000ms内，在没有任何操作的情况下出现setData回调时，以最后触发的setData回调作为页面渲染完成时机来计算真实的页面渲染耗时，测试结果如下：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("页面渲染耗时")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("60.8")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("64")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("56.4")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("52.6")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("56.4")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("117.8")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("98.6")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("89.6")])])])]),v._v(" "),_("blockquote",[_("p",[v._v("该项测试的耗时并不等同于真实的渲染耗时，由于小程序自身没有提供performance api，真实渲染耗时无法通过js准确测试得出，不过从得出的数据来看该项数据依然具备一定的参考意义。")])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nmpx ≈ chameleon ≈ uniapp ≈ native ≈ wepy2 > taro next ≈ kbone ≈ mpvue")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("由于mpvue全量在页面进行渲染，kbone和taro next采用了动态渲染技术，页面渲染耗时较长，其余框架并无太大区别。")])]),v._v(" "),_("h3",{attrs:{id:"页面更新耗时-无后台数据"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#页面更新耗时-无后台数据"}},[v._v("#")]),v._v(" 页面更新耗时(无后台数据)")]),v._v(" "),_("p",[v._v("这里后台数据的定义为data中存在但当前页面渲染中未使用到的数据，在这个demo场景下即为不可用券的数据，当前会在不可用券为0的情况下，对可用券列表进行各种操作，并统计更新耗时。")]),v._v(" "),_("p",[v._v("更新耗时的计算方式是从数据操作事件触发开始到对应的setData回调完成的耗时")]),v._v(" "),_("blockquote",[_("p",[v._v("mpvue中使用了当前时间戳(new Date)作为超时依据对setData进行了超时时间为50ms的节流操作，该方式存在严重问题，当vue内单次渲染同步流程执行耗时超过50ms时，后续组件patch触发的setData会突破这个节流限制，以50ms每次的频率对setData进行高频无效调用。在该性能测试demo中，当优惠券数量超过500时，界面就会完全卡死。为了顺利跑完整个测试流程，我对该问题进行了简单修复，使用setTimeout重写了节流部分，确保在vue单次渲染流程同步执行完毕后才会调用setData发送合并数据，之后mpvue的所有性能测试都是基于这个patch版本来进行的，该patch版本存放在https://github.com/hiyuki/mp-framework-benchmark/blob/master/frameworks/mpvue/runtime/patch/index.js")])]),v._v(" "),_("blockquote",[_("p",[v._v("理论上来讲native的性能在进行优化的前提下一定是所有框架的天花板，但是在日常业务开发中我们可能无法对每一次setData都进行优化，以下性能测试中所有的native数据均采用修改数据后全量发送的形式来实现。")])]),v._v(" "),_("p",[v._v("第一项测试我们使用"),_("code",[v._v("新增可用券(100)")]),v._v("操作将可用券数量由0逐级递增到1000：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("100")]),v._v(" "),_("th",[v._v("200")]),v._v(" "),_("th",[v._v("300")]),v._v(" "),_("th",[v._v("400")]),v._v(" "),_("th",[v._v("500")]),v._v(" "),_("th",[v._v("600")]),v._v(" "),_("th",[v._v("700")]),v._v(" "),_("th",[v._v("800")]),v._v(" "),_("th",[v._v("900")]),v._v(" "),_("th",[v._v("1000")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("84.6")]),v._v(" "),_("td",[v._v("69.8")]),v._v(" "),_("td",[v._v("71.6")]),v._v(" "),_("td",[v._v("75")]),v._v(" "),_("td",[v._v("77.2")]),v._v(" "),_("td",[v._v("78.8")]),v._v(" "),_("td",[v._v("82.8")]),v._v(" "),_("td",[v._v("93.2")]),v._v(" "),_("td",[v._v("93.4")]),v._v(" "),_("td",[v._v("105.4")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("118.4")]),v._v(" "),_("td",[v._v("168.6")]),v._v(" "),_("td",[v._v("204.6")]),v._v(" "),_("td",[v._v("246.4")]),v._v(" "),_("td",[v._v("288.6")]),v._v(" "),_("td",[v._v("347.8")]),v._v(" "),_("td",[v._v("389.2")]),v._v(" "),_("td",[v._v("434.2")]),v._v(" "),_("td",[v._v("496")]),v._v(" "),_("td",[v._v("539")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("121.2")]),v._v(" "),_("td",[v._v("100")]),v._v(" "),_("td",[v._v("96")]),v._v(" "),_("td",[v._v("98.2")]),v._v(" "),_("td",[v._v("97.8")]),v._v(" "),_("td",[v._v("99.6")]),v._v(" "),_("td",[v._v("104")]),v._v(" "),_("td",[v._v("102.4")]),v._v(" "),_("td",[v._v("109.4")]),v._v(" "),_("td",[v._v("107.6")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("110.4")]),v._v(" "),_("td",[v._v("87.2")]),v._v(" "),_("td",[v._v("82.2")]),v._v(" "),_("td",[v._v("83")]),v._v(" "),_("td",[v._v("80.6")]),v._v(" "),_("td",[v._v("79.6")]),v._v(" "),_("td",[v._v("86.6")]),v._v(" "),_("td",[v._v("90.6")]),v._v(" "),_("td",[v._v("89.2")]),v._v(" "),_("td",[v._v("96.4")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("116.8")]),v._v(" "),_("td",[v._v("115.4")]),v._v(" "),_("td",[v._v("117")]),v._v(" "),_("td",[v._v("119.6")]),v._v(" "),_("td",[v._v("122")]),v._v(" "),_("td",[v._v("125.2")]),v._v(" "),_("td",[v._v("133.8")]),v._v(" "),_("td",[v._v("133.2")]),v._v(" "),_("td",[v._v("144.8")]),v._v(" "),_("td",[v._v("145.6")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("112.8")]),v._v(" "),_("td",[v._v("121.2")]),v._v(" "),_("td",[v._v("140")]),v._v(" "),_("td",[v._v("169")]),v._v(" "),_("td",[v._v("198.8")]),v._v(" "),_("td",[v._v("234.2")]),v._v(" "),_("td",[v._v("278.8")]),v._v(" "),_("td",[v._v("318.4")]),v._v(" "),_("td",[v._v("361.4")]),v._v(" "),_("td",[v._v("408.2")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("556.4")]),v._v(" "),_("td",[v._v("762.4")]),v._v(" "),_("td",[v._v("991.6")]),v._v(" "),_("td",[v._v("1220.6")]),v._v(" "),_("td",[v._v("1468.8")]),v._v(" "),_("td",[v._v("1689.6")]),v._v(" "),_("td",[v._v("1933.2")]),v._v(" "),_("td",[v._v("2150.4")]),v._v(" "),_("td",[v._v("2389")]),v._v(" "),_("td",[v._v("2620.6")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("470")]),v._v(" "),_("td",[v._v("604.6")]),v._v(" "),_("td",[v._v("759.6")]),v._v(" "),_("td",[v._v("902.4")]),v._v(" "),_("td",[v._v("1056.2")]),v._v(" "),_("td",[v._v("1228")]),v._v(" "),_("td",[v._v("1393.4")]),v._v(" "),_("td",[v._v("1536.2")]),v._v(" "),_("td",[v._v("1707.8")]),v._v(" "),_("td",[v._v("1867.2")])])])]),v._v(" "),_("p",[v._v("然后我们按顺序逐项点击"),_("code",[v._v("删除可用券(all)")]),v._v(" > "),_("code",[v._v("新增可用券(1000)")]),v._v(" > "),_("code",[v._v("更新可用券(1)")]),v._v(" > "),_("code",[v._v("更新可用券(all)")]),v._v(" > "),_("code",[v._v("删除可用券(1)")]),v._v("：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("delete(all)")]),v._v(" "),_("th",[v._v("add(1000)")]),v._v(" "),_("th",[v._v("update(1)")]),v._v(" "),_("th",[v._v("update(all)")]),v._v(" "),_("th",[v._v("delete(1)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("32.8")]),v._v(" "),_("td",[v._v("295.6")]),v._v(" "),_("td",[v._v("92.2")]),v._v(" "),_("td",[v._v("92.2")]),v._v(" "),_("td",[v._v("83")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("56.8")]),v._v(" "),_("td",[v._v("726.4")]),v._v(" "),_("td",[v._v("49.2")]),v._v(" "),_("td",[v._v("535")]),v._v(" "),_("td",[v._v("530.8")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("43.6")]),v._v(" "),_("td",[v._v("584.4")]),v._v(" "),_("td",[v._v("54.8")]),v._v(" "),_("td",[v._v("144.8")]),v._v(" "),_("td",[v._v("131.2")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("41.8")]),v._v(" "),_("td",[v._v("489.6")]),v._v(" "),_("td",[v._v("52.6")]),v._v(" "),_("td",[v._v("169.4")]),v._v(" "),_("td",[v._v("165.6")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("39")]),v._v(" "),_("td",[v._v("765.6")]),v._v(" "),_("td",[v._v("95.6")]),v._v(" "),_("td",[v._v("237.8")]),v._v(" "),_("td",[v._v("144.8")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("103.6")]),v._v(" "),_("td",[v._v("669.4")]),v._v(" "),_("td",[v._v("404.4")]),v._v(" "),_("td",[v._v("414.8")]),v._v(" "),_("td",[v._v("433.6")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("120.2")]),v._v(" "),_("td",[v._v("4978")]),v._v(" "),_("td",[v._v("2356.4")]),v._v(" "),_("td",[v._v("2419.4")]),v._v(" "),_("td",[v._v("2357")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("126.6")]),v._v(" "),_("td",[v._v("3930.6")]),v._v(" "),_("td",[v._v("1607.8")]),v._v(" "),_("td",[v._v("1788.6")]),v._v(" "),_("td",[v._v("2318.2")])])])]),v._v(" "),_("blockquote",[_("p",[v._v("该项测试中初期我update(all)的逻辑是循环对每个列表项进行更新，形如"),_("code",[v._v("listData.forEach((item)=>{item.count++})")]),v._v("，发现在chameleon框架中执行界面会完全卡死，追踪发现chameleon框架中没有对setData进行异步合并处理，而是在数据变动时直接同步发送，这样在数据量为1000的场景下用该方式进行更新会高频触发1000次setData，导致界面卡死；对此，我在chameleon框架的测试demo中，将update(all)的逻辑调整为深clone产生一份更新后的listData，再将其整体赋值到this.listData当中，以确保该项测试能够正常进行。")])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nnative > mpx ≈ uniapp > chameleon > mpvue > wepy2 > taro next > kbone")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("mpx和uniapp在框架内部进行了完善的diff优化，随着数据量的增加，两个框架的新增耗时没有显著上升；")]),v._v(" "),_("li",[v._v("wepy2会在数据变更时对props数据也进行setData，在该场景下造成了大量的无效性能损耗，导致性能表现不佳；")]),v._v(" "),_("li",[v._v("kbone和taro next采用了动态渲染方案，每次新增更新时会发送大量描述dom结构的数据，与此同时动态递归渲染的耗时也远大于常规的静态模板渲染，使得这两个框架在所有的更新场景下耗时都远大于其他框架。")])]),v._v(" "),_("h3",{attrs:{id:"页面更新耗时-有后台数据"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#页面更新耗时-有后台数据"}},[v._v("#")]),v._v(" 页面更新耗时(有后台数据)")]),v._v(" "),_("p",[v._v("刷新页面后我们使用"),_("code",[v._v("新增不可用券(1000)")]),v._v("创建后台数据，观察该操作是否会触发setData并统计耗时")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("back add(1000)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("45.2")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("174.6")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("89.4")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("0")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("142.6")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("134")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("0")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("0")])])])]),v._v(" "),_("blockquote",[_("p",[v._v("mpx进行setData优化时inspired by vue，使用了编译时生成的渲染函数跟踪模板数据依赖，在后台数据变更时不会进行setData调用，而kbone和taro next采用了动态渲染技术模拟了web底层环境，在上层完整地运行了vue框架，也达到了同样的效果。")])]),v._v(" "),_("p",[v._v("然后我们执行和上面无后台数据时相同的操作进行耗时统计，首先是递增100：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("100")]),v._v(" "),_("th",[v._v("200")]),v._v(" "),_("th",[v._v("300")]),v._v(" "),_("th",[v._v("400")]),v._v(" "),_("th",[v._v("500")]),v._v(" "),_("th",[v._v("600")]),v._v(" "),_("th",[v._v("700")]),v._v(" "),_("th",[v._v("800")]),v._v(" "),_("th",[v._v("900")]),v._v(" "),_("th",[v._v("1000")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("88")]),v._v(" "),_("td",[v._v("69.8")]),v._v(" "),_("td",[v._v("71.2")]),v._v(" "),_("td",[v._v("80.8")]),v._v(" "),_("td",[v._v("79.4")]),v._v(" "),_("td",[v._v("84.4")]),v._v(" "),_("td",[v._v("89.8")]),v._v(" "),_("td",[v._v("93.2")]),v._v(" "),_("td",[v._v("99.6")]),v._v(" "),_("td",[v._v("108")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("121")]),v._v(" "),_("td",[v._v("173.4")]),v._v(" "),_("td",[v._v("213.6")]),v._v(" "),_("td",[v._v("250")]),v._v(" "),_("td",[v._v("298")]),v._v(" "),_("td",[v._v("345.6")]),v._v(" "),_("td",[v._v("383")]),v._v(" "),_("td",[v._v("434.8")]),v._v(" "),_("td",[v._v("476.8")]),v._v(" "),_("td",[v._v("535.6")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("135.4")]),v._v(" "),_("td",[v._v("112.4")]),v._v(" "),_("td",[v._v("110.6")]),v._v(" "),_("td",[v._v("106.4")]),v._v(" "),_("td",[v._v("109.6")]),v._v(" "),_("td",[v._v("107.2")]),v._v(" "),_("td",[v._v("114.4")]),v._v(" "),_("td",[v._v("116")]),v._v(" "),_("td",[v._v("118.8")]),v._v(" "),_("td",[v._v("117.4")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("112.6")]),v._v(" "),_("td",[v._v("86.2")]),v._v(" "),_("td",[v._v("84.6")]),v._v(" "),_("td",[v._v("86.8")]),v._v(" "),_("td",[v._v("90")]),v._v(" "),_("td",[v._v("87.2")]),v._v(" "),_("td",[v._v("91.2")]),v._v(" "),_("td",[v._v("88.8")]),v._v(" "),_("td",[v._v("92.4")]),v._v(" "),_("td",[v._v("93.4")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("178.4")]),v._v(" "),_("td",[v._v("178.2")]),v._v(" "),_("td",[v._v("186.4")]),v._v(" "),_("td",[v._v("184.6")]),v._v(" "),_("td",[v._v("192.6")]),v._v(" "),_("td",[v._v("203.8")]),v._v(" "),_("td",[v._v("210")]),v._v(" "),_("td",[v._v("217.6")]),v._v(" "),_("td",[v._v("232.6")]),v._v(" "),_("td",[v._v("236.8")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("139")]),v._v(" "),_("td",[v._v("151")]),v._v(" "),_("td",[v._v("173.4")]),v._v(" "),_("td",[v._v("194")]),v._v(" "),_("td",[v._v("231.4")]),v._v(" "),_("td",[v._v("258.8")]),v._v(" "),_("td",[v._v("303.4")]),v._v(" "),_("td",[v._v("340.4")]),v._v(" "),_("td",[v._v("384.6")]),v._v(" "),_("td",[v._v("429.4")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("559.8")]),v._v(" "),_("td",[v._v("746.6")]),v._v(" "),_("td",[v._v("980.6")]),v._v(" "),_("td",[v._v("1226.8")]),v._v(" "),_("td",[v._v("1450.6")]),v._v(" "),_("td",[v._v("1705.4")]),v._v(" "),_("td",[v._v("1927.2")]),v._v(" "),_("td",[v._v("2154.8")]),v._v(" "),_("td",[v._v("2367.8")]),v._v(" "),_("td",[v._v("2617")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("482.6")]),v._v(" "),_("td",[v._v("626.2")]),v._v(" "),_("td",[v._v("755")]),v._v(" "),_("td",[v._v("909.6")]),v._v(" "),_("td",[v._v("1085")]),v._v(" "),_("td",[v._v("1233.2")]),v._v(" "),_("td",[v._v("1384")]),v._v(" "),_("td",[v._v("1568.6")]),v._v(" "),_("td",[v._v("1740.6")]),v._v(" "),_("td",[v._v("1883.8")])])])]),v._v(" "),_("p",[v._v("然后按下表操作顺序逐项点击统计")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("delete(all)")]),v._v(" "),_("th",[v._v("add(1000)")]),v._v(" "),_("th",[v._v("update(1)")]),v._v(" "),_("th",[v._v("update(all)")]),v._v(" "),_("th",[v._v("delete(1)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("43.4")]),v._v(" "),_("td",[v._v("299.8")]),v._v(" "),_("td",[v._v("89.2")]),v._v(" "),_("td",[v._v("89")]),v._v(" "),_("td",[v._v("87.2")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("43.2")]),v._v(" "),_("td",[v._v("762.4")]),v._v(" "),_("td",[v._v("50")]),v._v(" "),_("td",[v._v("533")]),v._v(" "),_("td",[v._v("522.4")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("57.8")]),v._v(" "),_("td",[v._v("589.8")]),v._v(" "),_("td",[v._v("62.6")]),v._v(" "),_("td",[v._v("160.6")]),v._v(" "),_("td",[v._v("154.4")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("45.8")]),v._v(" "),_("td",[v._v("490.8")]),v._v(" "),_("td",[v._v("52.8")]),v._v(" "),_("td",[v._v("167")]),v._v(" "),_("td",[v._v("166")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("93.8")]),v._v(" "),_("td",[v._v("837")]),v._v(" "),_("td",[v._v("184.6")]),v._v(" "),_("td",[v._v("318")]),v._v(" "),_("td",[v._v("220.8")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("124.8")]),v._v(" "),_("td",[v._v("696.2")]),v._v(" "),_("td",[v._v("423.4")]),v._v(" "),_("td",[v._v("419")]),v._v(" "),_("td",[v._v("430.6")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("121.4")]),v._v(" "),_("td",[v._v("4978.2")]),v._v(" "),_("td",[v._v("2331.2")]),v._v(" "),_("td",[v._v("2448.4")]),v._v(" "),_("td",[v._v("2348")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("129.8")]),v._v(" "),_("td",[v._v("3947.2")]),v._v(" "),_("td",[v._v("1610.4")]),v._v(" "),_("td",[v._v("1813.8")]),v._v(" "),_("td",[v._v("2290.2")])])])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nnative > mpx > uniapp > chameleon > mpvue > wepy2 > taro next > kbone")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("具备模板数据跟踪能力的三个框架mpx，kbone和taro next在有后台数据场景下耗时并没有显著增加；")]),v._v(" "),_("li",[v._v("wepy2当中的diff精度不足，耗时也没有产生明显变化；")]),v._v(" "),_("li",[v._v("其余框架由于每次更新都会对后台数据进行deep diff，耗时都产生了一定提升。")])]),v._v(" "),_("h3",{attrs:{id:"页面更新耗时-大数据量场景"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#页面更新耗时-大数据量场景"}},[v._v("#")]),v._v(" 页面更新耗时(大数据量场景)")]),v._v(" "),_("blockquote",[_("p",[v._v("由于mpvue和taro next的渲染全部在页面中进行，而kbone的渲染方案会额外新增大量的自定义组件，这三个框架都会在优惠券数量达到2000时崩溃白屏，我们排除了这三个框架对其余框架进行大数据量场景下的页面更新耗时测试")])]),v._v(" "),_("p",[v._v("首先还是在无后台数据场景下使用"),_("code",[v._v("新增可用券(1000)")]),v._v("将可用券数量递增至5000：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("1000")]),v._v(" "),_("th",[v._v("2000")]),v._v(" "),_("th",[v._v("3000")]),v._v(" "),_("th",[v._v("4000")]),v._v(" "),_("th",[v._v("5000")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("332.6")]),v._v(" "),_("td",[v._v("350")]),v._v(" "),_("td",[v._v("412.6")]),v._v(" "),_("td",[v._v("498.2")]),v._v(" "),_("td",[v._v("569.4")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("970.2")]),v._v(" "),_("td",[v._v("1531.4")]),v._v(" "),_("td",[v._v("2015.2")]),v._v(" "),_("td",[v._v("2890.6")]),v._v(" "),_("td",[v._v("3364.2")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("655.2")]),v._v(" "),_("td",[v._v("593.4")]),v._v(" "),_("td",[v._v("655")]),v._v(" "),_("td",[v._v("675.6")]),v._v(" "),_("td",[v._v("718.8")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("532.2")]),v._v(" "),_("td",[v._v("496")]),v._v(" "),_("td",[v._v("548.6")]),v._v(" "),_("td",[v._v("564")]),v._v(" "),_("td",[v._v("601.8")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("805.4")]),v._v(" "),_("td",[v._v("839.6")]),v._v(" "),_("td",[v._v("952.8")]),v._v(" "),_("td",[v._v("1086.6")]),v._v(" "),_("td",[v._v("1291.8")])])])]),v._v(" "),_("p",[v._v("然后点击"),_("code",[v._v("新增不可用券(5000)")]),v._v("将后台数据量增加至5000，再测试可用券数量递增至5000的耗时：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("back add(5000)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("117.4")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("511.6")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("285")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("0")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("824")])])])]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("1000")]),v._v(" "),_("th",[v._v("2000")]),v._v(" "),_("th",[v._v("3000")]),v._v(" "),_("th",[v._v("4000")]),v._v(" "),_("th",[v._v("5000")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("349.8")]),v._v(" "),_("td",[v._v("348.4")]),v._v(" "),_("td",[v._v("430.4")]),v._v(" "),_("td",[v._v("497")]),v._v(" "),_("td",[v._v("594.8")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("1128")]),v._v(" "),_("td",[v._v("1872")]),v._v(" "),_("td",[v._v("2470.4")]),v._v(" "),_("td",[v._v("3263.4")]),v._v(" "),_("td",[v._v("4075.8")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("715")]),v._v(" "),_("td",[v._v("666.8")]),v._v(" "),_("td",[v._v("709.2")]),v._v(" "),_("td",[v._v("755.6")]),v._v(" "),_("td",[v._v("810.2")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("538.8")]),v._v(" "),_("td",[v._v("501.8")]),v._v(" "),_("td",[v._v("562.6")]),v._v(" "),_("td",[v._v("573.6")]),v._v(" "),_("td",[v._v("595.2")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("1509.2")]),v._v(" "),_("td",[v._v("1672.4")]),v._v(" "),_("td",[v._v("1951.8")]),v._v(" "),_("td",[v._v("2232.4")]),v._v(" "),_("td",[v._v("2586.2")])])])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nnative > mpx > uniapp > chameleon > wepy2")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("在大数据量场景下，框架之间基础性能的差异会变得更加明显，mpx和uniapp依然保持了接近原生的良好性能表现，而chameleon和wepy2则产生了比较显著的性能劣化。")])]),v._v(" "),_("h3",{attrs:{id:"局部更新耗时"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#局部更新耗时"}},[v._v("#")]),v._v(" 局部更新耗时")]),v._v(" "),_("p",[v._v("我们在可用券数量为1000的情况下，点击任意一张可用券触发选中状态，以测试局部更新性能")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("toggleSelect(ms)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("2")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("2.6")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("2.8")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("2.2")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("2")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("289.6")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("2440.8")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("1975")])])])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nnative ≈ chameleon ≈ mpx ≈ wepy2 ≈ uniapp > mpvue > taro next > kbone")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("可以看出所有使用了原生自定义组件进行组件化实现的框架局部更新耗时都极低，这足以证明小程序原生自定义组件的优秀性和重要性；")]),v._v(" "),_("li",[v._v("mpvue由于使用了页面更新，局部更新耗时显著增加；")]),v._v(" "),_("li",[v._v("kbone和taro next由于递归动态渲染的性能开销巨大，导致局部更新耗时同样巨大。")])]),v._v(" "),_("h3",{attrs:{id:"setdata调用"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#setdata调用"}},[v._v("#")]),v._v(" setData调用")]),v._v(" "),_("p",[v._v("我们将"),_("code",[v._v("proxySetData")]),v._v("的count和size选项设置为true，开启setData的次数和体积统计，重新构建后按照以下流程执行系列操作，并统计setData的调用次数和发送数据的体积。")]),v._v(" "),_("p",[v._v("操作流程如下：")]),v._v(" "),_("ol",[_("li",[v._v("100逐级递增可用券(0->500)")]),v._v(" "),_("li",[v._v("切换至不可用券")]),v._v(" "),_("li",[v._v("新增不可用券(1000)")]),v._v(" "),_("li",[v._v("100逐级递增可用券(500->1000)")]),v._v(" "),_("li",[v._v("更新可用券(all)")]),v._v(" "),_("li",[v._v("切换至可用券")])]),v._v(" "),_("p",[v._v("操作完成后我们使用"),_("code",[v._v("getCount")]),v._v("和"),_("code",[v._v("getSize")]),v._v("方法获取累积的setData调用次数和数据体积，其中数据体积计算方式为JSON.stringify后按照utf-8编码方式进行体积计算，统计结果为：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("count")]),v._v(" "),_("th",[v._v("size(KB)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("14")]),v._v(" "),_("td",[v._v("803")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("3514")]),v._v(" "),_("td",[v._v("1124")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("16")]),v._v(" "),_("td",[v._v("2127")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("14")]),v._v(" "),_("td",[v._v("274")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("8")]),v._v(" "),_("td",[v._v("261")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("2515")]),v._v(" "),_("td",[v._v("319")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("22")]),v._v(" "),_("td",[v._v("10572")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("9")]),v._v(" "),_("td",[v._v("2321")])])])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nmpx > uniapp > native > chameleon > wepy2 > taro next > mpvue > kbone")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("mpx框架成功实现了理论上setData的最优；")]),v._v(" "),_("li",[v._v("uniapp由于缺失模板追踪能力紧随其后；")]),v._v(" "),_("li",[v._v("chameleon由于组件每次创建时都会进行一次不必要的setData，产生了大量无效setData调用，但是数据的发送本身经过diff，在数据发送量上表现不错；")]),v._v(" "),_("li",[v._v("wepy2的组件会在数据更新时调用setData发送已经更新过的props数据，因此也产生了大量无效调用，且diff精度不足，发送的数据量也较大；")]),v._v(" "),_("li",[v._v("taro next由于上层完全基于vue，在数据发送次数上控制到了9次，但由于需要发送大量的dom描述信息，数据发送量较大；")]),v._v(" "),_("li",[v._v("mpvue由于使用较长的数据路径描述数据对应的组件，也产生了较大的数据发送量；")]),v._v(" "),_("li",[v._v("kbone对于setData的调用控制得不是很好，在上层运行vue的情况依然进行了22次数据发送，且发送的数据量巨大，在此流程中达到了惊人的10MB。")])]),v._v(" "),_("h3",{attrs:{id:"页面渲染耗时-静态测试"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#页面渲染耗时-静态测试"}},[v._v("#")]),v._v(" 页面渲染耗时(静态测试)")]),v._v(" "),_("p",[v._v("此处的页面渲染耗时与前面描述的动态测试场景中相同，测试结果如下：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("页面渲染耗时")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("70.4")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("86.6")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("115.2")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("69.6")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("66.6")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("65")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("144.2")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("119.8")])])])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nchameleon ≈ mpx ≈ uniapp ≈ native > wepy2 > mpvue ≈ taro next > kbone")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("除了kbone和taro next采用动态渲染耗时增加，mpvue使用页面模板渲染性能稍差，其余框架的静态页面渲染表现都和原生差不多。")])]),v._v(" "),_("h2",{attrs:{id:"结论"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#结论"}},[v._v("#")]),v._v(" 结论")]),v._v(" "),_("p",[v._v("综合上述测试数据，我们得到最终的小程序框架运行时性能排名为："),_("br"),v._v("\nmpx > uniapp > chameleon > wepy2 > mpvue > taro next > kbone")]),v._v(" "),_("h2",{attrs:{id:"一点私货"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#一点私货"}},[v._v("#")]),v._v(" 一点私货")]),v._v(" "),_("p",[v._v("虽然kbone和taro next采用了动态渲染技术在性能表现上并不尽如人意，但是我依然认为这是很棒的技术方案。虽然本文从头到位都在进行性能测试和对比，但性能并不是框架的全部，开发效率和高可用性仍然是框架的重心，开发效率相信是所有框架设计的初衷，但是高可用性却在很大程度被忽视。从这个角度来说，kbone和taro next是非常成功的，不同于过去的转译思路，这种从抹平底层渲染环境的做法能够使上层web框架完整运行，在框架可用性上带来非常大的提升，非常适合于运营类简单小程序的迁移和开发。")]),v._v(" "),_("p",[v._v("我主导开发的mpx框架(https://github.com/didi/mpx) 选择了另一条道路解决可用性问题，那就是基于小程序原生语法能力进行增强，这样既能避免转译web框架时带来的不确定性和不稳定性，同时也能带来非常接近于原生的性能表现，对于复杂业务小程序的开发者来说，非常推荐使用。在跨端输出方面，mpx目前能够完善支持业内全部小程序平台和web平台的同构输出，滴滴内部最重要最复杂的小程序——滴滴出行小程序完全基于mpx进行开发，并利用框架提供的跨端能力对微信和支付宝入口进行同步业务迭代，大大提升了业务开发效率。")])])}),[],!1,null,null,null);_.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/6.6ea91b28.js b/docs-vuepress/.vuepress/dist/assets/js/6.6ea91b28.js
new file mode 100644
index 0000000000..53453cb701
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/6.6ea91b28.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6,25],{292:function(t,s,e){},302:function(t,s,e){"use strict";e(292)},303:function(t,s,e){"use strict";e.r(s);var a={props:{code:{type:String,default:""},title:{type:String,default:""}},data:()=>({isShow:!1,isClick:!1}),methods:{handleEnter(){this.isShow=!0},handleLeave(){this.isShow=!1},handleToggle(){this.isClick=!this.isClick,this.isShow=this.isClick}}},i=(e(302),e(4)),o=Object(i.a)(a,(function(){var t=this,s=t._self._c;return s("div",{staticClass:"popover"},[s("div",{staticClass:"popover__content",on:{click:t.handleToggle,mouseenter:t.handleEnter,mouseleave:t.handleLeave}},[t._t("default")],2),t._v(" "),s("div",{directives:[{name:"show",rawName:"v-show",value:t.isShow,expression:"isShow"}],staticClass:"popover__top"},[s("div",{staticClass:"popover__content"},[s("div",{staticClass:"popover__inner"},[t.code?s("img",{attrs:{width:"300",src:t.code,alt:"code",loading:"lazy"}}):t._e(),t._v(" "),t.title?s("div",[t._v(t._s(t.title))]):t._e()]),t._v(" "),s("div",{staticClass:"popover__arrow"})])])])}),[],!1,null,"8bac5638",null);s.default=o.exports},320:function(t,s,e){},336:function(t,s,e){"use strict";e(320)},355:function(t,s,e){"use strict";e.r(s);var a={data:()=>({smallMode:!1}),components:{Popover:e(303).default},mounted(){const t=()=>{document.documentElement.clientWidth<719?this.smallMode=!0:this.smallMode=!1};t(),window.addEventListener("resize",t,!1)}},i=(e(336),e(4)),o=Object(i.a)(a,(function(){var t=this,s=t._self._c;return s("div",{staticClass:"footer-container"},[s("footer",{staticClass:"footer"},[s("ul",{staticClass:"footer__list"},[t.smallMode?t._e():s("li",{staticClass:"grow"},[s("img",{attrs:{width:"180",src:"https://dpubstatic.udache.com/static/dpubimg/T1R-u2N8nn/footer_logo.png",alt:"logo"}})]),t._v(" "),s("li",{staticClass:"grow"},[s("ul",{staticClass:"footer-inner"},[s("li",{staticClass:"footer__wrap"},[s("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.resourcesList.title))])]),t._v(" "),t._l(t.$page.frontmatter.resourcesList.details,(function(e,a){return s("li",{key:a,staticClass:"footer__wrap"},[s("a",{staticClass:"footer__text",attrs:{href:e.actionLink,target:"_blank"}},[t._v(t._s(e.title))])])}))],2)]),t._v(" "),s("li",{staticClass:"grow"},[s("ul",{staticClass:"footer-inner"},[s("li",{staticClass:"footer__wrap"},[s("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.communityList.title))])]),t._v(" "),t._l(t.$page.frontmatter.communityList.details,(function(e,a){return s("li",{key:a,staticClass:"footer__wrap"},[e.img?s("popover",{attrs:{code:e.img}},[s("span",{staticClass:"footer__text",attrs:{target:"_blank"}},[t._v(t._s(e.title))])]):s("a",{staticClass:"footer__text",attrs:{href:e.img||e.actionLink,target:"_blank"}},[t._v(t._s(e.title))])],1)}))],2)]),t._v(" "),s("li",{staticClass:"grow"},[s("ul",{staticClass:"footer-inner"},[s("li",{staticClass:"footer__wrap"},[s("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.helpList.title))])]),t._v(" "),t._l(t.$page.frontmatter.helpList.details,(function(e,a){return s("li",{key:a,staticClass:"footer__wrap"},[s("a",{staticClass:"footer__text",attrs:{href:e.actionLink,target:"_blank"}},[t._v(t._s(e.title))])])}))],2)]),t._v(" "),s("li",{staticClass:"grow"},[s("ul",{staticClass:"footer-inner"},[s("li",{staticClass:"footer__wrap"},[s("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.moreList.title))])]),t._v(" "),t._l(t.$page.frontmatter.moreList.details,(function(e,a){return s("li",{key:a,staticClass:"footer__wrap"},[s("a",{staticClass:"footer__text",attrs:{href:e.actionLink,target:"_blank"}},[t._v(t._s(e.title))])])}))],2)])])]),t._v(" "),t._m(0)])}),[function(){var t=this._self._c;return t("div",{staticClass:"copyright"},[t("div",[this._v("备案号："),t("a",{attrs:{href:"https://beian.miit.gov.cn/"}},[this._v("蜀ICP备15023364号-2")])]),this._v(" "),t("div",[this._v("Copyright 2020 滴滴出行")])])}],!1,null,"f9ca297c",null);s.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/60.a47e5279.js b/docs-vuepress/.vuepress/dist/assets/js/60.a47e5279.js
new file mode 100644
index 0000000000..57fcdffec7
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/60.a47e5279.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{408:function(_,v,t){"use strict";t.r(v);var a=t(4),p=Object(a.a)({},(function(){var _=this,v=_._self._c;return v("ContentSlotsDistributor",{attrs:{"slot-key":_.$parent.slotKey}},[v("h1",{attrs:{id:"滴滴出行小程序体积优化实践"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#滴滴出行小程序体积优化实践"}},[_._v("#")]),_._v(" 滴滴出行小程序体积优化实践")]),_._v(" "),v("blockquote",[v("p",[_._v("作者："),v("a",{attrs:{href:"http://github.com/sky-admin",target:"_blank",rel:"noopener noreferrer"}},[_._v("sky-admin"),v("OutboundLink")],1)])]),_._v(" "),v("h2",{attrs:{id:"概述"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#概述"}},[_._v("#")]),_._v(" 概述")]),_._v(" "),v("p",[_._v("2019年下半年，为了将微信钱包/支付宝九宫格入口的滴滴出行迁移为小程序，团队对小程序进行了大量的功能升级与补全。在整个过程中也遇到并克服了一系列问题和挑战，其中包体积问题尤为突出。接下来全面介绍一下滴滴出行小程序在体积控制方面做的努力与沉淀。")]),_._v(" "),v("h2",{attrs:{id:"背景"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#背景"}},[_._v("#")]),_._v(" 背景")]),_._v(" "),v("p",[_._v("微信对小程序包体积的要求是总体积不得超过12M，主包及单个分包体积不得超过2M。支付宝对于小程序包体积的计算方式虽和微信略有区别，不过整体也大同小异。")]),_._v(" "),v("p",[_._v("18年至19年初时，滴滴出行小程序里承载的业务只有网约车，且业务需求较少，在主包内都能够搞定。而在下半年时，为了将微信钱包/支付宝九宫格入口迁移至小程序，小程序开始新增诸如公交/代驾/车服/单车/顺风车等众多业务线，同时网约车的业务需求也要做全面的补齐，业务量和代码量一起爆炸式增长。")]),_._v(" "),v("p",[_._v("滴滴出行包含了丰富多样的出行业务，包含了快车/专车/出租车/豪华车/拼车/单车/代驾/顺风车/公交/车生活等众多业务线。整个滴滴出行小程序的最重要，使用最高频的页面是首页与订单详情页，首页中承载了各个业务线的需求表达，各个业务线的订单详情页则承载了具体的出行订单展示逻辑。此外还有各种功能页面比如个人中心，营销页面，设置，历史行程。")]),_._v(" "),v("p",[_._v("按照滴滴出行的产品逻辑，所有业务线的需求表达逻辑都在首页承载，为了良好的切换体验，在首页采用了单页顶导的方案进行业务线展示。即每个业务线在首页中提供一个需求表达组件，当用户切换顶导业务线后，切换出对应的业务线组件。")]),_._v(" "),v("p",[_._v("在这种设计下，所有的业务线的需求表达逻辑都集中在首页这个单一页面中，导致在业务迭代过程中，承载首页的主包体积迅速增长，很快触碰了小程序平台的单包2M上限，对后续的业务迭代与发展带来巨大阻碍。因此，对于包体积的控制是我们在小程序开发过程中面临的一大难题。")]),_._v(" "),v("h2",{attrs:{id:"体积控制"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#体积控制"}},[_._v("#")]),_._v(" 体积控制")]),_._v(" "),v("p",[_._v("下面我们将介绍滴滴出行小程序开发迭代过程中，我们对于小程序包体积进行的一系列优化控制实践。")]),_._v(" "),v("h3",{attrs:{id:"基础优化手段"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#基础优化手段"}},[_._v("#")]),_._v(" 基础优化手段")]),_._v(" "),v("p",[_._v("对于小程序来说，基础的包体积优化手段包括：资源压缩/去除代码冗余/资源CDN化/异步加载")]),_._v(" "),v("p",[_._v("在web开发中，webpack提供了大量的代码优化能力，包括依赖分析、模块去重、代码压缩、tree shaking、side effects等，这些能力可以方便地完成资源压缩和去除代码冗余的工作。滴滴出行小程序基于滴滴开源的小程序框架Mpx( https://github.com/didi/mpx )进行开发，Mpx框架的编译构建完全基于webpack，兼容webpack内部生态，天然可以使用上述能力对包体积进行优化。")]),_._v(" "),v("p",[_._v("小程序中支持部分静态资源（如图像视频等）使用CDN地址加载，我们会尽可能将相关的资源压缩后放到CDN上，避免这部分资源对包体积的占用。")]),_._v(" "),v("p",[_._v("小程序场景下无法像web当中通过script标签便捷地进行异步加载，但是小程序平台后期纷纷支持了分包加载的方案来实现该能力，由于分包加载是小程序特有的技术规范，webpack无法直接支持，因此Mpx框架专门针对该技术规范进行了良好的适配支持，关于该能力的应用我们会在后文详细阐述。")]),_._v(" "),v("p",[_._v("除此之外，Mpx框架还针对小程序场景进行了许多包体积优化的适配工作，如尽可能减少框架运行时包体积占用（压缩后占用56Kb），对引用到的页面/组件按需进行打包构建，声明公共样式进行样式复用，分包内公共模块抽取等。")]),_._v(" "),v("p",[_._v("在Mpx框架的这些能力的支持下，基本不需要额外配置就能构建出一个经过初步优化的小程序包。")]),_._v(" "),v("blockquote",[v("p",[_._v('微信开发者工具选项里也有类似的"上传代码时自动压缩混淆"可勾选，但在开发者工具中上传代码时计算体积是直接计算的当前项目代码的体积，并不会依据压缩后的体积。因此，如果你使用原生小程序进行开发，你的source代码极有可能进行进一步的压缩以节省空间。')])]),_._v(" "),v("h3",{attrs:{id:"分析体积"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#分析体积"}},[_._v("#")]),_._v(" 分析体积")]),_._v(" "),v("p",[_._v("虽然框架已经提供了很多在体积控制方面的优化，但是随着业务迭代我们发现主包体积依然偏大。")]),_._v(" "),v("p",[_._v("在遇到主包体积偏大后，我们需要弄明白，主包里有哪些东西？它们为什么这么大？")]),_._v(" "),v("p",[_._v("使用原生小程序或者其他非基于webpack的框架进行开发的同学遇到这个问题后，可能只能去看硬盘上的文件大小。这样一来，各个模块的大小占比可能并不直观。而我们则可以借助 webpack-bundle-analyzer 这样一个webpack插件去做辅助分析。")]),_._v(" "),v("p",[_._v("比如这是一个使用Mpx框架编写的demo，通过 "),v("code",[_._v("npm run build --report")]),_._v(" 就可以看到这样一个界面：")]),_._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/3e488293-959e-4617-8187-69fdb532e9ab.jpg",alt:"体积分析图"}})]),_._v(" "),v("p",[_._v("可以看到这个demo工程由 moment / lodash / socket-weapp / core-js 等第三方库组成。各个库的大小，相互依赖关系也能清晰地看出。")]),_._v(" "),v("p",[_._v("对于滴滴出行小程序也是能看到类似的图，能看到整个项目到底是由哪些代码组成。")]),_._v(" "),v("p",[_._v("另外，滴滴出行前端开发一直是采用“源码编译”的，可以让整个项目里公共的依赖可以实现仅有一份，一起共用。简而言之，也有助于减少项目代码体积。"),v("a",{attrs:{href:"https://github.com/DDFE/DDFE-blog/issues/23",target:"_blank",rel:"noopener noreferrer"}},[_._v("相关资料：https://github.com/DDFE/DDFE-blog/issues/23 "),v("OutboundLink")],1)]),_._v(" "),v("p",[_._v("要完美发挥源码编译的效果，需要上下游一起建立整套源码编译生态，比如主项目的依赖方在声明公用依赖时，就应该用peerDep或者devDep来声明一些公有依赖，这些共有依赖应该在主项目中统一声明，避免因版本不同装出两份公共依赖，那样反而会增大体积。由于滴滴出行小程序涉及业务线及团队众多，部分团队可能并不知道这个事情，因此代码里实际是可能出现上述劣化场景。而依照分析图，可以容易地发现这种问题，并推动相关团队清除这些重复依赖。")]),_._v(" "),v("p",[_._v("同时，我们依照体积分析图，对其中体积较大的文件重点分析，进行了一轮业务代码梳理和精简，删除了一些无用代码，精简了websocket的消息体描述文件等。")]),_._v(" "),v("h3",{attrs:{id:"配置分包"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#配置分包"}},[_._v("#")]),_._v(" 配置分包")]),_._v(" "),v("p",[_._v("分包是小程序给出的类似web异步引入的一个方案，把一些初始进入时不需要的页面可以放进分包里，跳转到对应页面时才去下载分包，将这些页面及其附属资源放到分包里可以有效减少主包体积。")]),_._v(" "),v("p",[_._v("Mpx框架早期对分包规范进行了初步支持，资源访问规则保持和微信一致，主要根据资源存放的目录判断应该输出到主包还是分包。有这个能力后，我们把行程页抽到了分包，大概抽出了200多K左右的空间。")]),_._v(" "),v("p",[_._v("有了行程页的成功拆分后，我们开始对所有的非首页代码进行分包操作，比如起终点选择和个人中心。以及部分业务线的接入是通过npm的方式接入，我们也尽可能将这些业务线的所有非首页的代码放到了分包。")]),_._v(" "),v("p",[_._v("这里还有个题外话，得益于mpx早期设计了packages形式的业务组合方案，可以很方便地让业务独立开发，又能及其方便地整合。而后发现微信的分包的json配置设计和packages很像，就在这个基础上支持了微信的分包，用户侧仅需在原来的packages基础上加一个query标记这个分包的名字即可。")]),_._v(" "),v("p",[_._v("拆除各个分包后，整个项目结构大概如图：")]),_._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/0562f94d-3929-42b8-a389-854e14983373.png",alt:"分包一期结构图"}})]),_._v(" "),v("p",[_._v("初阶的分包工作进行完毕后，总计从主包里拆了差不多400K的空间到分包里。")]),_._v(" "),v("h3",{attrs:{id:"分包资源精细化管理"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#分包资源精细化管理"}},[_._v("#")]),_._v(" 分包资源精细化管理")]),_._v(" "),v("p",[_._v("上面提到，Mpx框架初期的分包处理规则是完全按照微信的方式，把在分包路径下的资源收集到分包里。而npm管理的资源因为都在node_modules目录下，不属于任何分包路径，则会被全部收集进主包。")]),_._v(" "),v("p",[_._v("比如之前我们有行程页分包，行程页自有的状态管理store整个都在行程页分包的路径下，就会被收集到行程页分包中。而行程页还用到了封装好的didi-socket库，这个库是公共的npm包，即使它只在行程页分包里被使用，但由于它本身路径是在node_modules下的，那么就会将其收集进主包里。")]),_._v(" "),v("p",[_._v("因为早期的一些设计，行程页的资源和首页是分割开的，都比较独立地存在于各自的路径下，一期的分包处理的大头也主要是行程页，它刚好契合了Mpx初期对分包处理上的特点，因此能较好地收集进行程页分包里。")]),_._v(" "),v("p",[_._v("随着业务迭代，后续大量业务线的接入都是通过npm进行的，就会有大量npm包资源，他们都在node_modules目录下，因此全部会被收集进主包。")]),_._v(" "),v("p",[_._v("所以Mpx框架进行了一系列改造：")]),_._v(" "),v("ol",[v("li",[_._v("在构建的依赖收集过程中，我们会对收集到的依赖打上标记，记录它是被哪些分包引入的。一旦它只有一个分包引入，它就会被输出到这个分包中。")]),_._v(" "),v("li",[_._v("我们会根据用户定义的分包配置，自动在 SplitChunksPlugin 中生成各个分包的 cacheGroups ，把分包中的复用模块抽取到分包下的bundle中。")]),_._v(" "),v("li",[_._v("对于组件和静态资源，如果他们被多个分包所引用且未在主包中引用，为了确保主包体积最优，这些资源将产生多份副本分别输出到对应分包中，而不会占用主包体积。")])]),_._v(" "),v("p",[_._v("这样一来，"),v("em",[v("strong",[_._v("不管分包中引用的资源原本在什么位置，最终输出时都会尽可能将其输出到dist的分包目录下，避免占用主包空间")])]),_._v("。")]),_._v(" "),v("p",[_._v("这个改动完成后项目结构看似和之前一样，但得益于Mpx处理分包资源能力的升级，我们得以将业务线分包中引用的npm资源成功输出到其所在的分包目录下。")]),_._v(" "),v("h3",{attrs:{id:"封面方案"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#封面方案"}},[_._v("#")]),_._v(" 封面方案")]),_._v(" "),v("p",[_._v("再后来滴滴出行小程序需要替换微信/支付宝里原有的WebApp入口，小程序接入的业务线迅速增加，包体积迅速增长。")]),_._v(" "),v("p",[_._v("这个部分体积增长的主要原因前面提到过，所有的业务线都要接入到主页来展示。这也是由于业务特点决定的，滴滴出行提供了丰富的出行产品线，包括快车/专车/出租车/豪华车/拼车/单车/代驾/顺风行车等产品，用户是可能需要反复切换挑选的。这个过程还要保留起终点车型之类的信息，必须是一个页面内切换组件加一整套非常复杂的大型状态管理才能比较流畅顺滑地实现。而不能像一些电商/信息平台，将不同的功能拆分到不同页面，让用户通过首页的菜单进入子页面再进行操作，首页只承载入口，只有较少的业务逻辑，分包处理起来就会容易很多。")]),_._v(" "),v("p",[_._v("因此各个业务线都要提供首页组件进行接入。这个组件会在首页被用到，所以无论如何也拆不到分包里。最终，整个首页主包部分的体积可以分成两个部分：基础库和业务代码。两者的体积占比大概是公共依赖基础库占1M左右，业务代码占1M左右。")]),_._v(" "),v("p",[_._v("这么庞大的基础库体积主要是由于滴滴出行的业务线及业务团队众多，各方均有一些自己的基础依赖。比如网约车依赖的长链接通信pb数据描述文件，地图会依的大数计算库，顺风车依赖的CML框架运行时、代驾依赖的通信网关库，以及公用的组件库和polyfill等。")]),_._v(" "),v("p",[_._v("所以滴滴出行小程序面对的问题在当时已经无法用纯技术方案在短期内快速解决问题了，于是我们做了一个工程架构调整，可以叫封面页方案，解决了主包问题。")]),_._v(" "),v("p",[_._v("封面方案简单讲，就是做一个带滴滴出行Logo的封面作为启动页面，而页面一旦加载，立刻跳转另一个页面，这个页面真正承载业务，且它被放在分包里。")]),_._v(" "),v("p",[_._v("这个操作的意义在于，主包里就只剩下了所有方都要依赖的基础框架/库等，而业务全被抽离到了分包里。")]),_._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/0f0ed782-8f67-4601-bc83-a8a343e1050b.png",alt:"封面方案结构图"}})]),_._v(" "),v("p",[_._v("这是封面方案完成后项目的结构图，之前很大块的首页业务逻辑被抽出到首页分包中了。")]),_._v(" "),v("p",[_._v("这样一个挪移的操作的结果是我们可以有2M的主包空间来乘放基础的公共的库，有一个2M左右的分包来乘放前面提到的滴滴出行的集成了各种业务的“大主页”。而当时拆下来差不多有1.2M的主包，800K+的业务主分包。")]),_._v(" "),v("p",[_._v("这个改造最优秀的一点在于，后续的业务迭代产生的体积增长几乎全是在业务主分包里，剩下的1.1M+空间留给业务迭代还是比较充裕的。而主包的体积在理想条件下是可以长久保持不变的，就不会因为业务需求的不断开发反复导致主包体积临近超标，不再需要为主包体积感到焦虑。")]),_._v(" "),v("p",[_._v("当然，可以看到，这个方案本身是没有消减任何体积的，只是把位置变换了一下。除此之外，这个封面页方案其实也存在一些缺陷，比如首屏业务的展示会变慢，因为要加载的内容会变多，不过小程序本身有较好的缓存资源的能力，因此还算可以接受。")]),_._v(" "),v("p",[_._v("相比于因体积问题卡住需求迭代以及产品线的接入，目前这个方案至少能解决有无问题。我们开发团队后续也会持续跟进关注体积问题，看是否会有产品方案变更或者小程序本身给出一些解决方案来进一步优化这个部分。")]),_._v(" "),v("h2",{attrs:{id:"总结"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#总结"}},[_._v("#")]),_._v(" 总结")]),_._v(" "),v("p",[_._v("Mpx框架在包体积控制上做了大量工作，对于npm场景下的小程序分包进行了非常完善的支持。")]),_._v(" "),v("p",[_._v("滴滴出行小程序团队在框架支持的基础上，通过梳理业务依赖，充分利用分包，调整交互方案等一系列手段，在不阻碍业务发展的前提下，将庞大复杂的滴滴出行小程序包体积控制在平台限制范围内。")]),_._v(" "),v("p",[_._v("希望本文能给在包体积上遇到问题的小程序开发者们带来一些启发，欢迎留言交流。")])])}),[],!1,null,null,null);v.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/61.74ebd7d9.js b/docs-vuepress/.vuepress/dist/assets/js/61.74ebd7d9.js
new file mode 100644
index 0000000000..658e6b2d5f
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/61.74ebd7d9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{409:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"使用typescript新特性template-literal-types完善链式key的类型推导"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用typescript新特性template-literal-types完善链式key的类型推导"}},[t._v("#")]),t._v(" 使用Typescript新特性Template Literal Types完善链式key的类型推导")]),t._v(" "),s("blockquote",[s("p",[t._v("作者："),s("a",{attrs:{href:"https://github.com/anotherso1a",target:"_blank",rel:"noopener noreferrer"}},[t._v("anotherso1a"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"前言"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#前言"}},[t._v("#")]),t._v(" 前言")]),t._v(" "),s("p",[t._v("在"),s("strong",[t._v("Mpx框架")]),t._v("中我们采用了类似 "),s("code",[t._v("Vuex")]),t._v(" 的数据仓库设计，这使得小程序的数据也可以在框架中得到"),s("strong",[t._v("统一的管理")]),t._v("。但由于设计上的原因，这一部分在TS推导的实现上变得异常艰难，其中有一个明显的问题就是"),s("strong",[t._v("链式key")]),t._v("的推导：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 一段 mpx-store 代码实例")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// other options ...")]),t._v("\n  actions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("someAction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 下面这一个dispatch语句如何得到正确的推导？result的类型如何获取？")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'deeperActions.anotherAction'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  deps"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    deeperActions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      actions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("anotherAction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do something")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'result'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" payload\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// other deps ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("我们该如何获取 "),s("code",[t._v("this.dispatch('deeperActions.anotherAction', 1)")]),t._v(" 的返回值？如何针对dispatch后续的参数类型做限制？这几乎是不可能解决的问题。")]),t._v(" "),s("p",[t._v("好消息是，在 2020.09.19，typescript团队release了一个"),s("a",{attrs:{href:"https://github.com/microsoft/TypeScript/releases/tag/v4.1-beta",target:"_blank",rel:"noopener noreferrer"}},[t._v("beta版本"),s("OutboundLink")],1),t._v("。这个版本新推出了一个特性："),s("strong",[t._v("模板字符串类型（Template Literal Types）")]),t._v("。")]),t._v(" "),s("p",[t._v("这让"),s("strong",[t._v("链式key")]),t._v("的推导出现了曙光，不久后，我们开始尝试完善 "),s("code",[t._v("mpx-store")]),t._v(" 的推导，此篇文章也是基于我们实践中所做的一些工作总结而来。")]),t._v(" "),s("h2",{attrs:{id:"特性"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#特性"}},[t._v("#")]),t._v(" 特性")]),t._v(" "),s("p",[t._v("这里可以直接看"),s("a",{attrs:{href:"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("官网"),s("OutboundLink")],1),t._v("例子，可以十分直观的感受到其特性：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"red"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"blue"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quantity")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"one"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"two"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SeussFish")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("Quantity "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Color"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(" fish")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//   ^ = type SeussFish = "one fish" | "two fish" | "red fish" | "blue fish"')]),t._v("\n")])])]),s("p",[t._v("根据例子得知：模板字符串的使用方式几乎和ES6的字符串模板一致，可以做字符串的拼接，当接收字面量联合类型时，会做matrix操作，返回所有可能的拼接后的字面量联合类型。")]),t._v(" "),s("p",[t._v("另一个例子：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'b'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("C")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'D'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("C")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// type D = "1aC" | "1aD" | "1bC" | "1bD" | "2aC" | "2aD" | "2bC" | "2bD"')]),t._v("\n")])])]),s("h2",{attrs:{id:"可以用来做什么"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#可以用来做什么"}},[t._v("#")]),t._v(" 可以用来做什么")]),t._v(" "),s("p",[t._v("这个新特性的出现使得在js中常用的链式key取值，调用等，都能够使用ts进行完整的推导。")]),t._v(" "),s("p",[s("strong",[t._v("第一个问题：")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  prop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" prop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" paths "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" prop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("split")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" current "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" j "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" paths"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" j"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" paths"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("current"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" j "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" current"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    current "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" current"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用例子")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.b'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// { c: 1 }")]),t._v("\n")])])]),s("p",[s("strong",[t._v("如何将以上 getValueByPath 函数使用ts改写，使该函数的调用具有完备的类型推断？")])]),t._v(" "),s("p",[s("strong",[t._v("第二个问题：")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("simpleActions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionOne")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionTwo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" simpleActions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ReturnType"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("simpleActions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'actionOne'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// function dispatch<"actionOne">(type: "actionOne"): Promise<number>')]),t._v("\n")])])]),s("p",[s("strong",[t._v("我们很容易为上面的 "),s("code",[t._v("simpleActions")]),t._v(" 编写出其对应的 "),s("code",[t._v("dispatch")]),t._v(" 函数，并具备完整推导，但针对下面这种深层次的actions，如何为其编写dispatch函数？")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" actions "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("someAction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" payload\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  deeperActions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("anotherAction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do something")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'result'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    otherActions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finalAction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("payload\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Actions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" actions\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 编写一个 dispatch 方法，使得：")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let result = dispatch('deeperActions.anotherAction') // 返回类型为： Promise<string>")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let final = dispatch('deeperActions.otherActions.finalAction', 'hello world') // 返回类型为：Promise<boolean>")]),t._v("\n")])])]),s("p",[t._v("在typescript发布4.1之前，这几乎是不可能完成的任务，但是4.1的发布使我们能够对这一部分的缺失做一些类型补全。")]),t._v(" "),s("p",[t._v("接下来我们围绕上面两个问题分别进行实现。")]),t._v(" "),s("h2",{attrs:{id:"getvaluebypath使用ts实现"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getvaluebypath使用ts实现"}},[t._v("#")]),t._v(" getValueByPath使用TS实现")]),t._v(" "),s("p",[t._v("需要使 "),s("code",[t._v("getValueByPath({ a: { b: { c: 1 } } }, 'a.b')")]),t._v(" 获得完整的推导，我们首先需要能拿到两个参数的完整类型，这在ts中是十分容易的。第二步则是对两个参数的类型做映射处理，最好使得第一个参数输入完成之后，第二个参数直接能具备完整推导。")]),t._v(" "),s("h3",{attrs:{id:"单层推导"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#单层推导"}},[t._v("#")]),t._v(" 单层推导")]),t._v(" "),s("p",[t._v("我们可以先尝试着实现对单层对象取值的类型推导：")]),t._v(" "),s("p",[t._v("首先能得到一个大致的函数结构，接受两个参数，返回一个值")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("object"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prop"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),t._v("\n")])])]),s("p",[t._v("上面这种写法是拿不到参数类型的，为了能正确拿到参数的类型，我们使用范型来填充参数 "),s("code",[t._v("object")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("object"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prop"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),t._v("\n")])])]),s("p",[t._v("可以直接在编辑器上面尝试一下(我使用的是vscode)，很明显可以看到，我们正确的拿到了第一个参数的类型：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/5a1f9aef-c5ff-4109-980a-85216b62e291.png",alt:"xx"}})]),t._v(" "),s("p",[t._v("能取到参数的类型对象，就能使用关键字 "),s("code",[t._v("keyof")]),t._v(" 获取对象的每一个key，接下来我们把候选key值限定给参数prop，然后把对应的返回值结果填充到函数的结果当中，这里我们引入第二个范型 "),s("code",[t._v("K")]),t._v("。尝试调用之后，我们发现结果都符合预期。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("object"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prop"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// number")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" b "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'b'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'c'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Argument of type \'"c"\' is not assignable to parameter of type \'"a" | "b"\'.ts(2345)')]),t._v("\n")])])]),s("h3",{attrs:{id:"多层推导"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#多层推导"}},[t._v("#")]),t._v(" 多层推导")]),t._v(" "),s("p",[t._v("仅仅是单层推导的结构依然是无法满足我们对于 "),s("code",[t._v("getValueByPath({ a: { b: { c: 1 } } }, 'a.b')")]),t._v(" 推导的需求：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.b'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Argument of type '\"a.b\"' is not assignable to parameter of type '\"a\"'.ts(2345)")]),t._v("\n")])])]),s("p",[t._v("可以看到，第二个候选参数的类型仅有 "),s("code",[t._v('"a"')]),t._v("，而我们按正常期望来讲，"),s("code",[t._v("getValueByPath")]),t._v("的第一个参数传入 "),s("code",[t._v("{ a: { b: { c: 1 } } }")]),t._v(" 之后，第二个候选参数类型应该为： "),s("code",[t._v('"a" | "a.b" | "a.b.c"')]),t._v(" 。")]),t._v(" "),s("p",[t._v("接下来我们使用4.1的新特性，将对象： "),s("code",[t._v("{ a: { b: { c: 1 } } }")]),t._v(" 与其链式key： "),s("code",[t._v('"a" | "a.b" | "a.b.c"')]),t._v(" 一一对应起来。")]),t._v(" "),s("p",[t._v("工欲善其事，必先利其器。我们先封装好两个工具函数：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出对象的所有除了 symbol 以外的key")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Exclude"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("symbol")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将字符串用 . 进行拼接")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("H")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("L")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("H")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("L")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("H")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("L")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n")])])]),s("p",[t._v("我们知道，"),s("code",[t._v("symbol")]),t._v(" 类型是没办法放在"),s("strong",[t._v("模板字符串")]),t._v("中的，所以对key进行拼接之前，需要过滤掉所有 "),s("code",[t._v("symbol")]),t._v(" 类型的key。而 "),s("code",[t._v("StringKeyof")]),t._v(" 函数，就是用来过滤对象中所有不符合"),s("strong",[t._v("模板字符串")]),t._v("类型的key的方法。其实际用法与 "),s("code",[t._v("keyof")]),t._v(" 相同，只是返回值能用于"),s("strong",[t._v("模板字符串")]),t._v("。")]),t._v(" "),s("p",[s("code",[t._v("CombineStringKey")]),t._v(" 则是对两个key进行拼接，拼接的结果自然就是我们需要的链式key格式。")]),t._v(" "),s("p",[t._v("调用例子：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" symbol1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Symbol")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n  a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("symbol1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1 | 'a'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("         "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// "a"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("C")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'b'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// "a.b"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("C")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'c1'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'c2'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// "a.b.c1" | "a.b.c2"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("E")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'d'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// "a.b.c1.d" | "a.b.c2.d"')]),t._v("\n")])])]),s("p",[t._v("我们现在以下面这个对象类型为例，取出该对象所有符合要求的链式key：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("deepObj")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    c"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    d"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    e"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      f"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      g"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("思路：遍历对象的所有key，同时对key对应的值进行判断，如果是一个更深层次的对象，则保留外层的key，对更深层对象递归处理，把后续递归出的key都和上一层中保留的key进行拼接。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_ "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("我们将 "),s("code",[t._v("ChainKeys")]),t._v(" 函数拆开来看，首先是它的参数，接受两个类型参数，第一个是类型T，第二个则是用于拼接的"),s("strong",[t._v("前缀字符串")]),t._v("，其值可选。我们使用 "),s("code",[t._v("in")]),t._v(" 语法遍历 "),s("code",[t._v("T")]),t._v(" 的所有 key 值，也就是 "),s("code",[t._v("[K in StringKeyof<T>]")]),t._v("，这里我们使用了前面封装好的方法 "),s("code",[t._v("StringKeyof")]),t._v(" 来代替 "),s("code",[t._v("keyof")]),t._v(" 关键字。对对应的 key 的值，也就是 "),s("code",[t._v("T[K]")]),t._v("，我们使用 "),s("code",[t._v("extends")]),t._v(" 进行前置判断，如果 "),s("code",[t._v("T[K]")]),t._v(" 是一个"),s("strong",[t._v("复杂类型")]),t._v("，我们则将当前的字符串前缀 "),s("code",[t._v("P")]),t._v(" 和当前的 "),s("code",[t._v("K")]),t._v(" 进行拼接，递归调用 "),s("code",[t._v("ChainKeys")]),t._v(" 函数进行处理。如果 "),s("code",[t._v("T[K]")]),t._v(" 为"),s("strong",[t._v("基本类型")]),t._v("，我们直接使用 "),s("code",[t._v("Record")]),t._v(" 方法组装拼接好的key（"),s("code",[t._v("CombineStringKey<P, K>")]),t._v("）和value（"),s("code",[t._v("T[K]")]),t._v("），为了方便在编辑器里面查看结果，这里将"),s("code",[t._v("Record<CombineStringKey<P, K>, T[K]>")]),t._v(" 替换为 "),s("code",[t._v("{ [_ in CombineStringKey<P, K>]:T[K] }")]),t._v("。最后将所有结果打平成联合类型，也就是最后的一个取值操作："),s("code",[t._v("{...}[StringKeyof<T>]")]),t._v("，这和 "),s("code",[t._v("[1,2,3][number] // 3 | 1 | 2")]),t._v(" 的处理方式一致。")]),t._v(" "),s("p",[t._v("接下来我们在编辑器中查看一下调用结果：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/36f16bdc-4754-4387-bdac-bf3710a3ea56.png",alt:"img"}})]),t._v(" "),s("p",[t._v("如红框中所示，发现链式key已经和其类型一一对应起来了。")]),t._v(" "),s("p",[t._v("但是这还有一些问题：")]),t._v(" "),s("p",[t._v("一、"),s("code",[t._v('"b"')]),t._v(" 以及 "),s("code",[t._v('"b.e"')]),t._v(" 没有出现在枚举当中。")]),t._v(" "),s("p",[t._v("二、返回结果是一个"),s("strong",[t._v("联合类型")]),t._v("，如何把这个结果运用到函数当中呢？")]),t._v(" "),s("p",[t._v("第一个问题其实很好解决，当我们在递归处理的同时，将当前的链式key与对应值也进行处理就可以，即：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_ "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("同样为了方便编辑器中查看结果我们把 "),s("code",[t._v("Record<CombineStringKey<P, K>, T[K]>")]),t._v(" 替换成 "),s("code",[t._v("{ [_ in CombineStringKey<P, K>]:T[K] }")]),t._v("：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/d0bb4b70-f355-4d41-8430-031ac4a44136.png",alt:"img"}})]),t._v(" "),s("p",[t._v("可以看到 "),s("code",[t._v("b")]),t._v(" 以及 "),s("code",[t._v('"b.e"')]),t._v(" 这样的key都被取出来并放到了结果当中。其实这里还是有一些问题，如果你实际去代码编辑器里面查看结果的话，会发现有很多重复的 "),s("code",[t._v("b")]),t._v(" ，这是因为后续使用交叉类型进行拼接的 "),s("code",[t._v("ChainKeys")]),t._v(" 的返回值是一个联合类型，如此一来，"),s("code",[t._v("b")]),t._v(" 会被分配到联合类型的"),s("strong",[t._v("每一项")]),t._v("上，在后面我们会解决这个问题。")]),t._v(" "),s("p",[t._v("第二个问题是结果为联合类型，我们如何才能将其运用至函数当中呢？")]),t._v(" "),s("p",[t._v("大家都知道，对联合类型使用 "),s("code",[t._v("keyof")]),t._v(" 操作，返回的类型为 "),s("code",[t._v("never")]),t._v("，即无法取出联合类型的所有key值：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// never")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如何使K的类型为 a ｜ b 呢？")]),t._v("\n")])])]),s("p",[t._v("这里我们引入另一个工具函数："),s("code",[t._v("UnionToIntersection")]),t._v("，顾名思义，该函数的作用就是将联合类型转换为交叉类型，至于"),s("strong",[t._v("为什么")]),t._v("它能将联合类型转换为交叉类型，我们后面会讲：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UnionToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("I")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("I")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("我们将其运用到ChainKeys的推导当中去：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UnionToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_ "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("再经过一些润色得到一个比较精简的函数：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UnionToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("尝试调用该方法最终得到的结果为：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/f7b952df-6668-434e-b26c-e43345a0f4b4.png",alt:"img"}})]),t._v(" "),s("p",[t._v("最终，我们以此为基础，编写 "),s("code",[t._v("getValueByPath")]),t._v(" 函数的定义：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("object"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prop"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("     "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// { b: { c: number } }")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" b "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.b'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// { c: number }")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.b.c'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// number")]),t._v("\n")])])]),s("p",[t._v("到此，我们算是完成了 "),s("code",[t._v("getValueByPath")]),t._v(" 函数的类型定义以及推导。")]),t._v(" "),s("h2",{attrs:{id:"深层次actions的dispatch函数ts实现"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#深层次actions的dispatch函数ts实现"}},[t._v("#")]),t._v(" 深层次Actions的dispatch函数TS实现")]),t._v(" "),s("p",[t._v("其实在推导 "),s("code",[t._v("getValueByPath")]),t._v(" 的过程中，我们已经基本上完成了所有实现该 "),s("code",[t._v("dispatch")]),t._v(" 所需要的条件，与 "),s("code",[t._v("getValueByPath")]),t._v(" 不同的是，我们只需要遍历出函数所对应的链式key即可，改写一下 "),s("code",[t._v("ChainKeys")]),t._v(" 方法：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeeperActions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" DeeperActions\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ActionChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UnionToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeeperActions")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" ActionChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("我们除去了对对象的混入，同时将判断类型改为了 "),s("code",[t._v("DeeperActions")]),t._v(" ，以此来判断该 "),s("code",[t._v("action")]),t._v(" 对象是否有更深层次的actions。")]),t._v(" "),s("p",[t._v("调用结果：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/812f50b2-a148-4065-9f87-a9b010502c6d.png",alt:"img"}})]),t._v(" "),s("p",[t._v("再看我们最开始提出的问题：")]),t._v(" "),s("blockquote",[s("p",[t._v("编写一个 dispatch 方法，使得：")]),t._v(" "),s("p",[s("code",[t._v("let result = dispatch('deeperActions.anotherAction') // 返回类型为： Promise<string>")])]),t._v(" "),s("p",[s("code",[t._v("let final = dispatch('deeperActions.otherActions.finalAction', 'hello world') // 返回类型为：Promise<boolean>")])])]),t._v(" "),s("p",[t._v("我们开始定义 "),s("code",[t._v("dispatch")]),t._v(" 方法：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" ChainingActions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Parameters"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ChainingActions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ReturnType"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ChainingActions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("这里我们分别使用了 "),s("code",[t._v("Parameters")]),t._v(" 和 "),s("code",[t._v("ReturnType")]),t._v(" 函数来获取对应 "),s("code",[t._v("action")]),t._v(" 的参数以及返回值，用来填充至 "),s("code",[t._v("dispatch")]),t._v(" 方法中，实际编写调用代码：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/c6165376-d374-4ede-9bd2-0c99ca336337.png",alt:""}})]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/9447cd1a-04b6-4972-80a1-13f28de2b0cc.png",alt:""}})]),t._v(" "),s("p",[t._v("考虑到我们的 "),s("code",[t._v("actions")]),t._v(" 无论如何都会返回一个 "),s("code",[t._v("Promise")]),t._v("，上述定义其实还是稍微有一些问题，但是改动起来也很方便，只需要在 "),s("code",[t._v("ReturnType")]),t._v(" 外层使用 "),s("code",[t._v("Promise")]),t._v(" 包装一下就可以了：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promisify"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" ChainingActions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Parameters"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ChainingActions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Promisify"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ReturnType"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ChainingActions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'deeperActions.anotherAction'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Promise<string>")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" final "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'deeperActions.otherActions.finalAction'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello world'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Promise<boolean>")]),t._v("\n")])])]),s("p",[t._v("至此，我们 "),s("code",[t._v("dispatch")]),t._v(" 的TS实现也已经完成。")]),t._v(" "),s("p",[t._v("最终结果：")]),t._v(" "),s("p",[s("img",{attrs:{src:"http://cdn.qiniu.archerk.com.cn/QQ20210128-162139-HD.gif",alt:""}})]),t._v(" "),s("ul",[s("li",[t._v("若图片加载失败请访问： http://cdn.qiniu.archerk.com.cn/QQ20210128-162139-HD.gif")])]),t._v(" "),s("h2",{attrs:{id:"结尾"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#结尾"}},[t._v("#")]),t._v(" 结尾")]),t._v(" "),s("p",[t._v("其实 "),s("code",[t._v("getValueByPath")]),t._v(" 这一部分的内容是有一些缺陷的，因为TS本身"),s("strong",[t._v("限制了递归的次数")]),t._v("，当数据层级达到一定程度时，上文的推导会失效。在Mpx的建设中我们还对此做了一些优化，尽可能的"),s("strong",[t._v("减少")]),t._v("了递归次数。")]),t._v(" "),s("p",[t._v("这里也给出"),s("strong",[t._v("另一个方案")]),t._v("做链式key推导，这种方式"),s("strong",[t._v("性能")]),t._v("上会好很多，因为不用解析出所有的链式key，而是根据链式key"),s("strong",[t._v("反向解析")]),t._v("前面的对象，因此该方案可以解析出正确的类型，但是会丧失一部分代码提示：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CutChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GetValueByPath"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" CutChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("CutChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" GetValueByPath"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("CutChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" CutChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("o"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" GetValueByPath"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" s "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    c"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      d"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        e"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          f"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'f'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.c.d.e.f'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string")]),t._v("\n")])])]),s("p",[t._v("通过这一系列的处理，我们基本完成了 "),s("code",[t._v("mpx-store")]),t._v(" 的类型推导，包括对应的"),s("strong",[t._v("辅助函数")]),t._v("等。这也使得我们能够在项目中更好的使用TS进行开发。在最新的滴滴出行小程序更新中，我们已经开始使用TS全量进行开发，目前看来开发体验还不错，后期也会逐步将旧的代码重构为TS。我们后续也会持续维护和迭代框架，也欢迎有兴趣的朋友来一起"),s("a",{attrs:{href:"https://github.com/didi/mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("共建"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("p",[t._v("有写的不好的地方请多包含，也欢迎大家批评指正。")]),t._v(" "),s("h2",{attrs:{id:"题外话：uniontointersection"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#题外话：uniontointersection"}},[t._v("#")]),t._v(" 题外话：UnionToIntersection")]),t._v(" "),s("p",[t._v("上面提到的，我们使用工具函数 "),s("code",[t._v("UnionToIntersection")]),t._v(" 将联合类型转换为交叉类型。而 "),s("code",[t._v("UnionToIntersection")]),t._v(" 又是如何将"),s("strong",[t._v("联合类型转换为交叉类型")]),t._v("的呢？")]),t._v(" "),s("p",[t._v("在 "),s("a",{attrs:{href:"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Conditional Types"),s("OutboundLink")],1),t._v(" 中有提到一些点：")]),t._v(" "),s("h3",{attrs:{id:"distributive-conditional-types"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#distributive-conditional-types"}},[t._v("#")]),t._v(" Distributive conditional types")]),t._v(" "),s("blockquote",[s("p",[t._v("Conditional types in which the checked type is a naked type parameter are called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation. For example, an instantiation of "),s("code",[t._v("T extends U ? X : Y")]),t._v(" with the type argument "),s("code",[t._v("A | B | C")]),t._v(" for "),s("code",[t._v("T")]),t._v(" is resolved as "),s("code",[t._v("(A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)")]),t._v(".")])]),t._v(" "),s("p",[t._v("即在"),s("strong",[t._v("执行")]),t._v(" "),s("code",[t._v("extends")]),t._v(" "),s("strong",[t._v("语句时")]),t._v("，如果 "),s("code",[t._v("extends")]),t._v(" 左侧为"),s("strong",[t._v("联合类型")]),t._v("，则会被分配成"),s("strong",[t._v("对应数量个")]),t._v("子条件判断语句，最终"),s("strong",[t._v("联合")]),t._v("每个子语句的结果。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IsNumber"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" IsNumber"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1 | 3")]),t._v("\n")])])]),s("h3",{attrs:{id:"type-inference-in-conditional-types"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#type-inference-in-conditional-types"}},[t._v("#")]),t._v(" Type inference in conditional types")]),t._v(" "),s("blockquote",[s("p",[t._v("Within the "),s("code",[t._v("extends")]),t._v(" clause of a conditional type, it is now possible to have "),s("code",[t._v("infer")]),t._v(" declarations that introduce a type variable to be inferred. Such inferred type variables may be referenced in the true branch of the conditional type. It is possible to have multiple "),s("code",[t._v("infer")]),t._v(" locations for the same type variable.")])]),t._v(" "),s("p",[t._v("在条件判断语句中，可以使用 "),s("code",[t._v("infer")]),t._v(" 关键字做类型推断，同一个候选值能有"),s("strong",[t._v("多个")]),t._v("推断位置。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ReturnType"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("R")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("R")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[s("strong",[t._v("正位推断")]),t._v("的结果会被推导为"),s("strong",[t._v("联合")]),t._v("类型：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Foo"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T10")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Foo"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T11")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Foo"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string | number")]),t._v("\n")])])]),s("p",[s("strong",[t._v("逆变位置推断")]),t._v("的结果会被处理成"),s("strong",[t._v("交叉")]),t._v("类型：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bar"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T20")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Bar"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T21")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Bar"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string & number")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意")]),t._v("：这里是"),s("code",[t._v("ts-2.8")]),t._v("发布时的文档以及例子，现在来说是不存在 "),s("code",[t._v("string & number")]),t._v(" 类型的，如果实际编写这段代码的话会发现 "),s("code",[t._v("T21")]),t._v(" 的值为 "),s("code",[t._v("never")]),t._v("，因为不可能存在一个值既为 "),s("code",[t._v("string")]),t._v(" 又为 "),s("code",[t._v("number")]),t._v("。逆变与协变的一些概念可以参考一下"),s("a",{attrs:{href:"https://zh.wikipedia.org/wiki/%E5%8D%8F%E5%8F%98%E4%B8%8E%E9%80%86%E5%8F%98",target:"_blank",rel:"noopener noreferrer"}},[t._v("逆变与协变"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("h3",{attrs:{id:"uniontointersection-原理探究"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#uniontointersection-原理探究"}},[t._v("#")]),t._v(" UnionToIntersection 原理探究")]),t._v(" "),s("p",[t._v("有了以上两个信息之后，我们再来看看 "),s("code",[t._v("UnionToIntersection")]),t._v(" 的实现，为了方便阅读我们做一些折行：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UnionToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")])]),t._v(" \n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("I")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("I")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("发现实际上 "),s("code",[t._v("UnionToIntersection")]),t._v(" 分为两步：")]),t._v(" "),s("p",[t._v("1、将联合类型的"),s("strong",[t._v("每一项")]),t._v("填充至 函数类型 "),s("code",[t._v("(k: U) => void")]),t._v(" 的参数 "),s("code",[t._v("k")]),t._v(" 中。")]),t._v(" "),s("p",[t._v("2、使用 "),s("code",[t._v("infer")]),t._v(" 关键字在"),s("strong",[t._v("逆变位")]),t._v("对 "),s("code",[t._v("(k: U) => void")]),t._v(" 做推导，将参数的类型推入结果 "),s("code",[t._v("I")]),t._v(" 中，组成"),s("strong",[t._v("交叉")]),t._v("类型。")]),t._v(" "),s("p",[t._v("拆分看实现：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 联合类型推入函数参数")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UnionToFunction"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对函数逆变推导，将参数推导为交叉类型")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FunctionsToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("F")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("F")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("I")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("I")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Union")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fun")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UnionToFunction"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Union"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ((k: { a: number }) => void) | ((k: { b: string }) => void)")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Intersection")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" FunctionsToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Fun"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// { a: number } & { b: string }")]),t._v("\n")])])]),s("p",[t._v("可以注意到我们拆分开来了 "),s("code",[t._v("UnionToIntersection")]),t._v(" 后并不是完全按照原有写法去写的，在 "),s("code",[t._v("FunctionsToIntersection")]),t._v(" 函数中，我们使用了"),s("code",[t._v("[]")]),t._v("将类型给包裹起来，这是为了"),s("strong",[t._v("避免")]),t._v("第一个特性（Distributive conditional types）的影响，如果不做包裹，则 "),s("code",[t._v("extends")]),t._v(" 左侧为联合类型，被分配成若干个子句后，同一位置的 "),s("code",[t._v("infer")]),t._v(" 就会被分别执行，无法合成为交叉类型。而使用"),s("code",[t._v("[]")]),t._v("进行包裹之后则避免了这个影响，"),s("code",[t._v("extends")]),t._v(" 左侧不再是一个联合类型，而是一个数组类型。")]),t._v(" "),s("h2",{attrs:{id:"参考资料汇总"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#参考资料汇总"}},[t._v("#")]),t._v(" 参考资料汇总")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Template Literal Types"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Conditional Types"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://zh.wikipedia.org/wiki/%E5%8D%8F%E5%8F%98%E4%B8%8E%E9%80%86%E5%8F%98",target:"_blank",rel:"noopener noreferrer"}},[t._v("逆变与协变 Covariance and contravariance"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://github.com/microsoft/TypeScript/issues/30188",target:"_blank",rel:"noopener noreferrer"}},[t._v("TS递归上限"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://github.com/didi/mpx/pull/631",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx中的实现（前期）"),s("OutboundLink")],1)])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/62.4bf212f9.js b/docs-vuepress/.vuepress/dist/assets/js/62.4bf212f9.js
new file mode 100644
index 0000000000..08a9a372da
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/62.4bf212f9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[62],{413:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"mpx-小程序单元测试能力建设与实践"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx-小程序单元测试能力建设与实践"}},[t._v("#")]),t._v(" Mpx 小程序单元测试能力建设与实践")]),t._v(" "),s("blockquote",[s("p",[t._v("作者："),s("a",{attrs:{href:"https://github.com/Blackgan3",target:"_blank",rel:"noopener noreferrer"}},[t._v("Blackgan3"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"什么是单元测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#什么是单元测试"}},[t._v("#")]),t._v(" 什么是单元测试")]),t._v(" "),s("p",[t._v("In computer programming, unit testing is a software testing method by which individual units of source code—sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures—are tested to determine whether they are fit for use wikipedia")]),t._v(" "),s("p",[t._v("对一个函数，模块，类进行运行结果正确性检验的工作就是单元测试，此外每个单元测试的对象应该是一个最简单的组件/函数。")]),t._v(" "),s("p",[t._v("那写单测又能给我们哪些收益呢？")]),t._v(" "),s("ul",[s("li",[t._v("大幅提高项目代码可维护性")]),t._v(" "),s("li",[t._v("覆盖率到达一定指标后可大幅提高研发效率")]),t._v(" "),s("li",[t._v("让你的代码零线上bug锐减，上线不再提心吊胆")]),t._v(" "),s("li",[t._v("改进设计，促进重构")])]),t._v(" "),s("p",[t._v("此外，单测高覆盖率的项目也会给公司节省大量支出：\n"),s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1640872105786-b7b230b4-7f65-4a0f-8dbf-e8ba89f61837.png",alt:"unit-test-money.png"}}),t._v("\n据微软统计单测效益结果，如上图展示，绝大多数bug都是在coding阶段产生，并且随着需求开发进度的推进，修复bug的成本会随指数级增长，当我们在unit test阶段发现并修复这个bug是能给公司带来巨大收益的。")]),t._v(" "),s("p",[t._v("下方介绍两种常见的项目单元测试规范：")]),t._v(" "),s("ul",[s("li",[t._v("TDD (Test driven development)")])]),t._v(" "),s("blockquote",[s("p",[t._v("测试驱动开发，在书写业务代码之前，先根据需求进行单元功能测试用例书写")])]),t._v(" "),s("p",[t._v("这里驱动开发的不是简单的测试用例，是能够持续验证、重构并且对需求功能极致细化的测试用例")]),t._v(" "),s("ul",[s("li",[t._v("BDD (Behavior driven development)")])]),t._v(" "),s("blockquote",[s("p",[t._v("行为驱动开发，通过具有辨识力的测试用例驱动项目开发团队所有人，使用自然语言来描述功能，一般和 TDD 相结合，针对行为进行测试，让开发者在写单测时从专注代码实现转为业务行为，能使单测更加场景化和智能化")])]),t._v(" "),s("p",[t._v("单元测试的书写初期必定伴随着大量精力与时间的消耗，但长期持续维护的业务在搭建并完善好整个单元测试体系后，可大大提高项目稳定性和研发效率")]),t._v(" "),s("h2",{attrs:{id:"前端单元测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#前端单元测试"}},[t._v("#")]),t._v(" 前端单元测试")]),t._v(" "),s("h3",{attrs:{id:"前端单元测试工具"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#前端单元测试工具"}},[t._v("#")]),t._v(" 前端单元测试工具")]),t._v(" "),s("p",[t._v("前端单元测试目前有很多框架和工具，我们下方列出三个较为流行的框架和工具库进行介绍")]),t._v(" "),s("ul",[s("li",[t._v("Mocha: 功能丰富的 javascript 测试框架(不包括断言和仿真环境，快照测试需额外配置)，可以运行在node.js和浏览器中")]),t._v(" "),s("li",[t._v("Jasmine：Behavior-Drive development(BDD)风格的测试框架，在业内较为流行,功能很全面，自带asssert、mock功能")]),t._v(" "),s("li",[t._v("Jest：一个功能全面的 javascript 测试框架，基于Jasmine 做了大量新特性(例如并行执行、源代码改动感知等)，开箱即用，适用于绝大多数 js 项目")])]),t._v(" "),s("h3",{attrs:{id:"测试断言库"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#测试断言库"}},[t._v("#")]),t._v(" 测试断言库")]),t._v(" "),s("p",[t._v("在单测运行框架中，我们需要断言库来进行方法返回和实例状态的正确性验证")]),t._v(" "),s("ul",[s("li",[t._v("should: BDD风格断言                    (true).should.be.ok")]),t._v(" "),s("li",[t._v("expect: expect()样式断言              expect(true).toBe(true)")]),t._v(" "),s("li",[t._v("assert: Node.js 内置断言模块       assert(true === true)")]),t._v(" "),s("li",[t._v("chai: expect()，assert()和should风格的断言都支持，全能型选手")])]),t._v(" "),s("p",[t._v("在众多前端单元测试框架中，Jest 目前凭借零配置，高性能，且对于断言，快照，覆盖率等都有很好的集成，是目前较为流行的一个单测框架")]),t._v(" "),s("h3",{attrs:{id:"jest-框架简介"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#jest-框架简介"}},[t._v("#")]),t._v(" Jest 框架简介")]),t._v(" "),s("p",[t._v("简单来看下 Jest 框架的特点以及大致的运行原理")]),t._v(" "),s("p",[s("strong",[t._v("Jest 的整体框架特点大概归纳总结为以下几点:")])]),t._v(" "),s("ul",[s("li",[t._v("在操作系统上高效的进行文件搜索以及相互依赖关系匹配")]),t._v(" "),s("li",[t._v("单测并行执行，运行效率高")]),t._v(" "),s("li",[t._v("内置断言库、覆盖率、快照测试等功能，开箱可用")]),t._v(" "),s("li",[t._v("使用 vm 来进行沙盒环境运行，单测之间相互隔离")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1639153318989-0e6ac9ed-75a3-4874-8a48-5370db55891d.png#averageHue=%23464a4d&clientId=uf375a834-bd4b-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=579&id=u7fb4026f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=2014&originWidth=777&originalType=binary&ratio=1&rotation=0&showTitle=false&size=495531&status=done&style=none&taskId=u6e39efb8-e12a-49b0-b8ce-ade9b63fd2c&title=&width=223.5",alt:"image.png"}}),t._v("\n打开 Jest pacakges，可以看到大概有50多个包，我们根据这些不同的包来将整个 jest 运行流程整体串起来")]),t._v(" "),s("p",[s("strong",[t._v("第一步 jest-cli 读取相关配置")]),t._v("\n当我们执行 jest 命令时，先去执行 jest-cli 中的 run 方法，再调用 jest-core 中的 runCli 方法，其中通过 jest-config 提供的 readConfigs 来读取 Jest 相关配置，返回全局配置(globalConfig)和局部配置(configs)")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1640502186276-2a1c2976-58a5-4fd9-91db-c5df8265fc7f.png#clientId=u3d4e127e-cc05-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=161&id=uc6c948fd&margin=%5Bobject%20Object%5D&name=unit-test-jest-step1.png&originHeight=177&originWidth=808&originalType=binary&ratio=1&rotation=0&showTitle=false&size=23884&status=done&style=none&taskId=ub778d79f-2480-411f-97c3-d13aed04965&title=&width=735",alt:"unit-test-jest-step1.png"}})]),t._v(" "),s("p",[s("strong",[t._v("第二步 文件静态分析")]),t._v("\n使用 jest-haste-map 来进行项目中所有文件的检索以及生成文件之间的相互依赖关系，在 jest-core 中的 _run10000 方法中执行 buildContextsAndHasteMaps，返回 contexts 和 hasteMapInstances，contexts 中的 hasteFs 存储的就是文件及依赖关系。")]),t._v(" "),s("p",[t._v("**jest-haste-map **检索的过程中借助 jest-worker 来根据当前cpu核数并行的进行文件检索，借助 fb-watch-man/crawler 对整体文件变动做实时监听，做到只执行有改动的单元测试文件，实现单测缓存效果。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1640524931986-a0ee9e99-151b-464e-96f3-c5d403a258f5.png#clientId=u059512e6-4582-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=555&id=u042b30bc&margin=%5Bobject%20Object%5D&name=unit-test-jest-haste.png&originHeight=1109&originWidth=2131&originalType=binary&ratio=1&rotation=0&showTitle=false&size=188410&status=done&style=none&taskId=u0c46aead-c2c6-4bd4-a90a-cf1e8cce042&title=&width=1065.5",alt:"unit-test-jest-haste.png"}}),t._v("\n下方看一个简单的jest-haste-map使用示例")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" JestHasteMap "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'jest-haste-map'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("cpus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'os'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" hasteMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("JestHasteMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("extensions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("maxWorkers")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cpus")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("platforms")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("hasteFS"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" hasteMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" testFiles "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" hasteFS"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAllFiles")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("testFiles"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ['/path/to/tests/list1.spec.js', '/path/to/tests/list2.spec.js', …]")]),t._v("\n")])])]),s("p",[s("strong",[t._v("第三步 单测检索和排序")]),t._v("\n经过第一步和第二步，我们拿到了 "),s("strong",[t._v("配置对象 configs")]),t._v("，以及"),s("strong",[t._v("文件Map HasteContext")]),t._v("，接下来通过 SearchSource 对象检索出所有的单元测试到一个数组中，检索出单元测试文件后，在正式执行之前，我们需要先对当前拿到的所有单测进行权重优先级排序。")]),t._v(" "),s("p",[t._v("单测排序的工作是由 jest Sequencer 完成的，默认排序优先级为 failed (上次失败的先运行)> duration(耗时长的先运行) > size(文件体积大的先运行)，当然这里我们也可以自定义customSequencer来覆盖 jest 默认的排序规则，jest 排序规则如下。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1640525025246-045963f5-1df6-411c-9257-74359f05e235.png#clientId=u059512e6-4582-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=802&id=u61d4057e&margin=%5Bobject%20Object%5D&name=unit-test-jest-scquencer.png&originHeight=1603&originWidth=2726&originalType=binary&ratio=1&rotation=0&showTitle=false&size=292495&status=done&style=none&taskId=udcf49166-d29d-4ba5-97b4-f942d8b9fe4&title=&width=1363",alt:"unit-test-jest-scquencer.png"}})]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" tests"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sort")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("testA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" testB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("failedA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!==")]),t._v(" failedB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" failedA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("hasTimeA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("testB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("duration "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If only one of two tests has timing information, run it last")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" hasTimeA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("testA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("duration "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" testB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("duration "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" testA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("duration "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" testB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("duration "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fileSize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("testA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fileSize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("testB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[s("strong",[t._v("第四步 开始执行")]),t._v("\n在经过第三步之后，我们拿到了经过排序后的单测文件，接下来开始进入到执行步骤，执行单测时的整个调度工作是 jest/core 中的 TestScheduler 来完成，例如 scheduler 会推算是串行执行还是并行执行，推算单测执行完的大概时间，覆盖率报告的生成等，scheduler 会调用 jest-runner 中的 runTests 方法去触发单测执行")]),t._v(" "),s("p",[t._v("如果需要并行执行，runTest 方法触发 jest-worker 创建多个child process 子进程来支持 parallel 执行")]),t._v(" "),s("p",[t._v("单元测试中全局方法和全局变量，比如 test() describe() it() 等是由 jest-cirucs(jest-jasmine) 提供并注入global中")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1640527878045-b379169e-e180-4226-884d-2da6b90321ec.png#clientId=u059512e6-4582-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u4114c79f&margin=%5Bobject%20Object%5D&name=unit-test-jest-run-test.png&originHeight=2878&originWidth=3480&originalType=binary&ratio=1&rotation=0&showTitle=false&size=683293&status=done&style=none&taskId=ue36536e2-f975-4782-8f78-6d5203e2ae6&title=",alt:"unit-test-jest-run-test.png"}}),t._v("\n最终单测的运行是由 jest-runtime 中创建的 vm 虚拟机隔离执行，vm 作用域中dom环境是由 jest-environment-jsdom 提供，此外 jest-runtime 中还包括了 transformer 能力以及mock功能的具体实现等，这部分功能在接下来的Mpx框架单元测试实现章节我们会去详细介绍它。")]),t._v(" "),s("p",[s("strong",[t._v("第五步 处理返回结果")]),t._v("\n此外 jest-runner中提供了一套类似于 redux 的数据流机制和eventEmitter来管理维护单测状态以及单测执行结果，在jest-runner 中进行事件触发，在TestScheduler 中进行事件监听并对执行结果进行各种处理和序列化，\n最后在 jest-core 中的runJest方法中进行执行结果的终端输出/文件输出等一系列处理。")]),t._v(" "),s("h2",{attrs:{id:"小程序单元测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#小程序单元测试"}},[t._v("#")]),t._v(" 小程序单元测试")]),t._v(" "),s("h3",{attrs:{id:"与-web-应用的不同"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#与-web-应用的不同"}},[t._v("#")]),t._v(" 与 web 应用的不同")]),t._v(" "),s("p",[t._v("上个章节讲完前端单测简介，以及jest单测框架的大概运行原理后，接下来我们看下单元测试在小程序场景下与web场景的不同")]),t._v(" "),s("p",[t._v("首先小程序本身是双线程分离的机制，但目前并没有这种独特的运行环境用来执行单元测试，这里需要借助小程序官方提供的 miniprogram-simulate 工具集，来将整体运行机制调整为单线程模拟运行，并利用 dom 环境来进行小程序组件的注册渲染以及整个自定义组件树的搭建")]),t._v(" "),s("p",[t._v("小程序的单元测试执行依赖 js 运行环境和 dom 环境，这里我们选择 jest 框架来提供对应的环境")]),t._v(" "),s("p",[t._v("下方是一个简单的微信小程序官方提供的单元测试demo，具体关于miniprogram-simulate 的更多API的使用可以去官方文档查看 "),s("a",{attrs:{href:"https://github.com/wechat-miniprogram/miniprogram-simulate",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/wechat-miniprogram/miniprogram-simulate"),s("OutboundLink")],1)]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" simulate "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'miniprogram-simulate'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'comp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./comp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注册自定义组件，返回组件 id")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 id 渲染自定义组件，返回组件封装实例")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parent-wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建容器节点")]),t._v("\n    comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将组件插入到容器节点中，会触发 attached 生命周期")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<div>123</div>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 判断组件渲染结果")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行其他的一些测试逻辑")]),t._v("\n\n    comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("detach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将组件从容器节点中移除，会触发 detached 生命周期")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("此外对于小程序工具集的整体运行流程，在下方章节进行了简要总结。")]),t._v(" "),s("h3",{attrs:{id:"小程序单测框架整体流程"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#小程序单测框架整体流程"}},[t._v("#")]),t._v(" 小程序单测框架整体流程")]),t._v(" "),s("p",[t._v("小程序单元测试中微信官方提供的相关库有 miniprogram-simulate、j-component 和 miniprogram-exparser等")]),t._v(" "),s("ul",[s("li",[t._v("miniprogram-simulate: 小程序自定义组件测试工具集，进行小程序内置组件的注册以及模拟微信原生api的注入")]),t._v(" "),s("li",[t._v("j-component: 仿小程序组件系统，可以让小程序自定义组件跑在 web 端。")]),t._v(" "),s("li",[t._v("miniprogram-exparser：微信小程序官方的组件系统模块，exparser 的组件模型和 WebComponents标准中的 Shadow DOM 高度相似，基于 Shadow DOM 原型，可在纯 JS 环境运行，维护整个组件的节点树相关的信息，包括属性、事件等。")]),t._v(" "),s("li",[t._v("miniprogram-compiler:  wcc、wcsc 官方编译器的 node 封装版，用于编译 wxml、wxss 文件")])]),t._v(" "),s("p",[t._v("开发者在使用的时候经常用的的两个方法就是 simulate.load 和 simulate.render 方法，那这里我们就从这两个方法为入口进行整个流程的总结\n"),s("strong",[t._v("1.miniprogramSimulate.load(path)")]),t._v(" "),s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2022/png/116604/1645371259515-600e82a3-5a16-4b50-90d2-4de16b3a6e13.png#clientId=u8f88ae50-6693-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=2179&id=u91907731&margin=%5Bobject%20Object%5D&name=%E5%B0%8F%E7%A8%8B%E5%BA%8F-load.png&originHeight=2179&originWidth=3100&originalType=binary&ratio=1&rotation=0&showTitle=false&size=655139&status=done&style=none&taskId=uffad3560-8564-4372-bf2f-ceded0ad196&title=&width=3100",alt:"小程序-load.png"}})]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" nowLoad\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// miniprogram-simulate")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" definition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 省略部分判断")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("register")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hasRegisterCache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("needRunJsList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// nowLoad 用于执行用户代码调用 Component 构造器时注入额外的参数给 j-component")]),t._v("\n    nowLoad "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require('xxx.js')")]),t._v("\n    _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runJs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" id\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("register")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hasRegisterCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 随机生成，不重复")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getId")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" component "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("json")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("readJson")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(".json")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("wxml")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" compile"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getWxml")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("wxss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" wxss"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getContent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(".wxss")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 存入需要执行的自定义组件 js")]),t._v("\n  cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("needRunJsList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" component"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" component"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nglobal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("Component")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("options")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" component "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" nowLoad\n  jComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("register")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("definition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("register")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("definition "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" componentManager "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ComponentManager")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("definition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" componentManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ComponentManager 方法")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ComponentManager")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("constructor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("definition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ......")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exparserDef "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerToExparser")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerToExparser")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" exparserDef "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("is")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            using"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("generics")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// TODO")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("template")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("func")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("generateFunc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" definition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("properties"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" definition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" definition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("methods"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// miniprogram-exparser")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" exparser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("exparserDef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[s("strong",[t._v("2.miniprogramSimulate.render(id)")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2022/png/116604/1645372791716-b3faf038-ff6f-4309-9a91-270bcfda4aa7.png#clientId=u8f88ae50-6693-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=2069&id=u272fdda2&margin=%5Bobject%20Object%5D&name=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-render.png&originHeight=2069&originWidth=3131&originalType=binary&ratio=1&rotation=0&showTitle=false&size=668246&status=done&style=none&taskId=u0ed961d2-5859-4c1b-ac1b-79595d39e8e&title=&width=3131",alt:"微信小程序-render.png"}}),t._v("\nminiprogram-simulate中render方法会调用j-component create，根据id从缓存对象中获取componentManager，进行组件实例创建")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n   * 创建组件实例\n   */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" properties")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" componentManager "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("componentManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RootComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("componentManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" properties"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("RootComponent 构造函数中使用之前的 _exparserDef 对象进行真实dom节点创建，生成 _exparserNode")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RootComponent")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("constructor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("componentManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" properties")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  \t"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_exparserNode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" exparser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tagName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" exparserDef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create exparser node and render")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_bindEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// touchstart，touchemove blur 等事件绑定")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("新生成的 rootComponent 实例继承Component对象，定义了许多我们单测中需要用到的组件方法")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Component")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dom")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" instance "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  dispatchEvent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  addEventListener "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  removeEventListener "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  querySelector "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  setData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  triggerLifeTime "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  triggerPageLifeTime "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  toJSON"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("当然中间还有很多细节实现，比如模版渲染 j-component/template/compile，组件更新 j-component/render 等，感兴趣的话可以详细去看下里边具体的实现，这里我们暂且按下不表。至此，我们拿到了 component 实例，并可以进行正常的组件状态获取以及更新，然后在Jest框架中去断言组件的各种属性以及方法执行后的预期。")]),t._v(" "),s("h2",{attrs:{id:"mpx-框架单元测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx-框架单元测试"}},[t._v("#")]),t._v(" Mpx 框架单元测试")]),t._v(" "),s("p",[t._v("经过上方 Jest 框架讲解以及小程序单元测试流程分析后，接下来看下在Mpx框架中的单测能力支持实现")]),t._v(" "),s("h3",{attrs:{id:"初期版本"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#初期版本"}},[t._v("#")]),t._v(" 初期版本")]),t._v(" "),s("p",[t._v("Mpx框架的初期单测架构，是将Mpx框架开发的小程序项目，先构建编译为源码，再使用 miniprogram-simulate + j-component + jest 对构建后的小程序原生代码运行单元测试\n"),s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1640786157277-5f92065d-c87e-46ed-b57e-4692b3d78a36.png#clientId=uc72cd25a-bebe-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=485&id=uf9a7caa5&margin=%5Bobject%20Object%5D&name=mpx-old-unit-test-architecture.png&originHeight=969&originWidth=3076&originalType=binary&ratio=1&rotation=0&showTitle=false&size=744497&status=done&style=none&taskId=uf25026f4-fd27-4116-bcb5-ffbe7357910&title=&width=1538",alt:"mpx-old-unit-test-architecture.png"}}),t._v("\n该方案执行任何case都需要执行完整的构建流程，而且预构建已经完成了所有的模块收集，无法使用jest提供的模块mock功能，导致业务使用成本很高，落地困难。")]),t._v(" "),s("h3",{attrs:{id:"优化版本"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#优化版本"}},[t._v("#")]),t._v(" 优化版本")]),t._v(" "),s("p",[t._v("经过调研，Jest 本身支持代码转换功能")]),t._v(" "),s("blockquote",[s("p",[t._v("Jest在项目中以JavaScript的代码形式运行，但是如果使用一些Node.js不支持的，却可以开箱即用的语法(如JSX，TypeScript中的类型，Vue模板等)那你就需要将代码转换为纯JavaScript，转换的工作就是transformer")])]),t._v(" "),s("p",[t._v("这里我们就可以通过Jest提供的转换能力编写mpx-jest转换器，实现在Jest模块加载过程中实时地将当前的Mpx组件编译转换为原生小程序组件，再交由miniprogram-simulate加载运行测试case。")]),t._v(" "),s("p",[t._v("该方案中模块加载完全基于Jest并能实现按需编译，完美规避旧方案中存在的缺陷，缺点在于编译构建流程基于Jest api重构，与Mpx自身基于Webpack的构建流程独立存在，带来额外维护成本，这一问题我们通过将通用的编译转换逻辑抽离出来统一维护，在Webpack和Jest两侧复用，从而解决了改问题。同时在实现这个方案的过程中也做了一部分对应库的改动，将会在下方介绍。")]),t._v(" "),s("p",[t._v("首先来看下 jest-runtime 中 transform 的整体流程。")]),t._v(" "),s("ul",[s("li",[t._v("runTest 方法调用 runtime.requireModule(path)，传入对应的单测文件地址")]),t._v(" "),s("li",[t._v("判断是否是mock module，如果是则直接走 requireMock方法，否则继续往下进行")]),t._v(" "),s("li",[t._v("定义 localModule")]),t._v(" "),s("li",[t._v("调用 this._loadModule")]),t._v(" "),s("li",[t._v("_createRequireImplementation(module, options) 赋值给module.require")]),t._v(" "),s("li",[t._v("transformFile 处理对应的文件")]),t._v(" "),s("li",[t._v("createScriptFromCode(transformdCode)")]),t._v(" "),s("li",[t._v("getVmContext  使用 vm 创建沙盒环境")]),t._v(" "),s("li",[t._v("在沙盒环境执行对应的 jest 单测代码")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2022/png/116604/1645251815753-ba8529bb-c63f-477f-bb2a-60182bf5f390.png#clientId=u3600a0a4-27fc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=811&id=u9a266c8b&margin=%5Bobject%20Object%5D&name=jest-runtime1.png&originHeight=3242&originWidth=4075&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1246325&status=done&style=none&taskId=uae1603dd-c05f-443b-977e-849426edf0d&title=&width=1019",alt:"jest-runtime1.png"}}),t._v("\n其中关键节点的代码如下")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t\t\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义 localModule")]),t._v("\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" localModule "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("children")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exports")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("filename")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" modulePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" modulePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loaded")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dirname")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("modulePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义 module.require")]),t._v("\n\t\t\tObject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProperty")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'require'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// rquireModuleOrMock || rquireInternalModule")]),t._v("\n      \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_createRequireImplementation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// transformCode")]),t._v("\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" transformedCode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("transformFile")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filename"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t\t\t\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// createScriptFromCode")]),t._v("\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vm"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'({\"'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("EVAL_RESULT_VARIABLE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('":function(')]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("','")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("){")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" transformedCode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'\\n}});'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" vmContext "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_environment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getVmContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      runScript "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" script"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runInContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vmContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        filename\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t\t\tcompiledFunction "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" runScript"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("EVAL_RESULT_VARIABLE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("compiledFunction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("call")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// module object")]),t._v("\n        module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// module exports")]),t._v("\n        module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("require"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require implementation")]),t._v("\n        module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// __dirname")]),t._v("\n        module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("filename"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// __filename")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// @ts-expect-error")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("lastArgs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("notEmpty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("上方是整个 jest-runtime 中对于require module 时transform的整体流程。在Jest的这一能力之上，我们基于 @mpxjs/webpack-plugin 开发了 mpx-jest transformer，实现将 Mpx 单文件组件转换输出为对应的小程序原生代码。\n"),s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2022/png/116604/1645264785364-2db4095b-0344-4fa8-8d56-bfeb28c0f78d.png#clientId=uec723a90-39b3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=1588&id=ubbef4532&margin=%5Bobject%20Object%5D&name=%E6%94%B9%E8%89%AF%E6%96%B9%E6%A1%8801.png&originHeight=1588&originWidth=3007&originalType=binary&ratio=1&rotation=0&showTitle=false&size=368757&status=done&style=none&taskId=u8c2c10f8-f83f-4765-b312-bb75081e05c&title=&width=3007",alt:"改良方案01.png"}}),t._v("\n在完成代码转换后，对应的 script 代码做为String存在于内存中，无法直接使用 Jest 环境的 require 加载执行，为此我们参考上述 jest-runtime 中的 loadModule方法实现了requireFromString方法，核心还是使用node vm 模块来进行 script 代码的执行，同时将jsdom-environment 和 Jest global 对象合并做为 vmContext")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2022/png/116604/1645269513406-df59853a-086d-4d5f-87a5-cb003d556ce9.png#clientId=uec723a90-39b3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=802&id=u2da3911b&margin=%5Bobject%20Object%5D&name=%E6%94%B9%E9%80%A0%E6%96%B9%E6%A1%882.png&originHeight=802&originWidth=1970&originalType=binary&ratio=1&rotation=0&showTitle=false&size=125179&status=done&style=none&taskId=u182d9b94-f659-4d25-80d5-d9d01fdbaac&title=&width=1970",alt:"改造方案2.png"}}),t._v("\n至此，我们的整体单测方案就大致完成，通过 mpx-jest 转换组件，再交由 miniprogram-simulate 来渲染组件实例，从而完成对组件状态的断言，在实际测试的过程中，还遇到了以下问题进行解决。")]),t._v(" "),s("p",[t._v("1.Mpx框架的文件纬度的条件编译支持\nMpx框架的跨平台输出部分支持对文件进行平台和应用的条件编译引用")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 文件列表")]),t._v("\nexample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mpx\nexample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ali"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mpx\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 代码使用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("example")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/example'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这里我们需要在Jest运行时环境中提供该功能，借助Jest本身提供的 resolver 自定义能力，让我们可以对请求的文件进行自定义resolve功能，这里我们使用Mpx中现有的resolve plugin 和 enhanced-resolve来自定义resolve方法进行文件条件编译的支持。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" CachedInputFileSystem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ResolverFactory "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'enhanced-resolve'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" AddModePlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin/lib/resolver/AddModePlugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" addModePlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddModePlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'before-file'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'file'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create a resolver")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" myResolver "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ResolverFactory"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createResolver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("addModePlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" myResolver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolveSync")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("basedir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("split")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'?'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("2.miniprogram-simulate 定制化方法\n在小程序单元测试的章节中，我们介绍了小程序相关库的运行机制，miniprogram-simulate提供的 load 方法默认只解析渲染原生组件，我们的Mpx组件，mpx-jest 转换器无法和miniprogram-simulate进行关联，所以这里我们选择fork miniprogram-simulate 仓库，自定义了loadMpx和registerMpx方法。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" simulate "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/miniprogram-simulate'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/components/list.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//@mpxjs/miniprogram-simulate 中 loadMpx 实现简单描述")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...省略一部分校验逻辑")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// .mpx 结尾文件会经过 mpx-jest 进行转换，输出 wxml,wxss,json,script")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" componentContent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hasRegisterCache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" componentContent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//....")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" id\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 部分 require('xx/xx.json') 等修改为直接赋值")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[t._v("对于组件/页面在存在大量组件引用的情况下，mock引用组件可大大提升单测的运行速度，原有miniprogram-simulate框架并没有提供mock功能，所以这里我们也自定义了mockComponent和clearMockComponent方法。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 代码在 @mpxjs/miniprogram-simulate 中")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mockComponentMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 判断是否是mock的组件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mockComponentMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    componentPath "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mockComponentMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * mock usingComponents中的组件\n * @param compName\n * @param compDefinition\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mockComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("compName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" compDefinition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  mockComponentMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("compName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compDefinition\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * 清除 component mock 数据\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearMockComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  mockComponentMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 单测中使用时")]),t._v("\nsimulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mockComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'list'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("template")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<view>component list</view>'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("3.封装定制test-utils工具集\n书写单测的过程中我们会有很多重复工作，比如创建挂载组件、代理接口、模拟多个组件、断言多个数据等，这里我们将这些共性的方法抽离封装成了 test-utils")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * 创建渲染并挂载自定义组件\n * @param {组件基于所在项目的相对路径,例如'src/subpackage/gulfstream/components/bottom/bottom.mpx'} compPath\n * @returns 用于测试的自定义组件\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createCompAndAttach")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" renderProps "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" renderProps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" comp\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * 借助xfetch构造mock请求\n * @param {待模拟url} mockUrl\n * @param {mock数据文件路径} mockFilePath\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxyFetch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("mockUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mockUrlData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mockData\n  mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fetch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fn")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("options")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mockUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" mockUrlData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'string'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          mockData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMockContent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mockUrlData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          mockData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mockUrlData\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("errno")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" mockData\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),s("p",[t._v("至此，Mpx框架的单元测试方案整体上就完备了，整体上的方案架构如下图所示\n"),s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2022/png/116604/1645448762294-8e4cb0ab-bc09-4688-9360-ab4d67776af1.png#clientId=uc67aedb9-b0af-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=1164&id=u19264b9b&margin=%5Bobject%20Object%5D&name=Mpx%E5%8D%95%E6%B5%8B%E6%9E%B6%E6%9E%84%E5%9B%BE.png&originHeight=2327&originWidth=3335&originalType=binary&ratio=1&rotation=0&showTitle=false&size=7199152&status=done&style=none&taskId=uc2ecd51a-8419-46f1-a52a-1c9a8868ce1&title=&width=1667.5",alt:"Mpx单测架构图.png"}})]),t._v(" "),s("h2",{attrs:{id:"mpx组件单元测试实战"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx组件单元测试实战"}},[t._v("#")]),t._v(" Mpx组件单元测试实战")]),t._v(" "),s("p",[t._v("在上方介绍过整体的jest框架流程以及Mpx框架单元测试架构后，接下来我们着手进行 Mpx 框架开发的小程序组件的单元测试用例书写实战")]),t._v(" "),s("p",[t._v("使用 @mpxjs/cli 创建模版项目时选择使用单元测试，"),s("strong",[t._v("会自动生成有单测能力的模版项目")]),t._v("，和普通 Jest + miniprogram-simulate 搭建的原生小程序单测项目不同的是，transform 中添加了 Mpx 文件的处理，这里jest.config.js其他配置就不过多列出，可通过新创建项目进行查看。")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[t._v("\ttransform"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    '^.+\\\\.js$'"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" '<rootDir>/node_modules/babel-jest'"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    '^.+\\\\.mpx$'"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" '<rootDir>/node_modules/@mpxjs/mpx-jest'\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("首先我们列出一个组件示例，具体项目可点击链接查看:\n"),s("a",{attrs:{href:"https://github.com/Blackgan3/mpx-unit-test-demo",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/Blackgan3/mpx-unit-test-demo"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("首先对于组件单测的书写，我们希望有一套固定的规范，即所写的不同组件的单测能有一个相同的格式和顺序，这里我们建议的顺序为")]),t._v(" "),s("ul",[s("li",[t._v("组件初始化断言")]),t._v(" "),s("li",[t._v("组件初始化各种形态断言")]),t._v(" "),s("li",[t._v("组件变化- data|computed|watch变化断言")]),t._v(" "),s("li",[t._v("组件变化- 事件触发断言")]),t._v(" "),s("li",[t._v("组件销毁断言")])]),t._v(" "),s("p",[t._v("根据上方组件功能，首先我们建议对组件usingComponents 引入的组件进行模拟注册，这样可以节省组件渲染挂载的时间")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("beforeEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 进行usingComponents 组件 mock")]),t._v("\n    testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mockComponents")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'list'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("1.我们首先需要对组件初始化成功后进行各种组件形态预期，即组件初始化断言")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test component init correctly'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createCompAndAttach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" insData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n    testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkExpectedData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("insData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("someClassShowOne")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("someClassShowTwo")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("someClassShowTwoFlag")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("listData2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"手机"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"电视"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"电脑"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("key")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("compStatus")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("timeDeferFlag")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" domHTML "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 进行组件初始化dom快照测试")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("domHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toMatchSnapshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("上方我们使用工具方法创建并挂载生成组件实例，然后对组件data中key值和value进行预期断言，最后对组件初始化生成的HTML进行快照测试")]),t._v(" "),s("p",[t._v("2.组件初始化各种形态断言\n当组件的初始化数据源有多种形态，比如你的组件初始化数据是由接口或者其他重要的props传递过来决定的，那这里我们可以对不同的数据源组件的不同表现进行断言")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test comp different data'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 进行唯一数据源请求的接口代理")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxyFetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'api/somePackage/getCompData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createCompAndAttach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 目前 status 为 1，再次改变数据源代理")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxyFetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'api/somePackage/getCompData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchCompData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("compStatus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("compData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toEqual")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toMatchSnapshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 再次改变数据源代理，修改源数据")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxyFetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'api/somePackage/getCompData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchCompData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("compStatus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("compData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toEqual")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toMatchSnapshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("3.组件变化- props|data|computed|watch变化断言\n接下来我们需要对组件自身的 props|data|computed|watch 等属性变化时所触发的组件相应变化做出各种预期。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 组件 props 改变后组件的各种形态预期")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test props different values correspond to different performance'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 传入初始渲染 props")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" successContent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some successContent'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createCompAndAttach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      successContent\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" childComp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.successContent'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("childComp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBeDefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("successContent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("successContent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对最终的HTML进行快照测试")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("childComp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toMatchSnapshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当组件data中的someClassShowOne改变之后需要做的哪些预期")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当组件computed中的someCompShow改变之后需要做的预期")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ......")]),t._v("\n\t\n")])])]),s("p",[t._v("4.组件必不可少的会有方法，这里我们对示例组件的方法调用进行预期")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test someClassShowTwoFlag tap event trigger'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" fetchCompDataSpy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("spyOn")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fetchCompData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" changeSomeClassShowTwoFlagSpy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("spyOn")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'changeSomeClassShowTwoFlag'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxyFetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'api/somePackage/getCompData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" compData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" changeFlagViewComp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.changeFlagClass'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// dispatchEvent 为异步")]),t._v("\n    changeFlagViewComp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatchEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tap'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sleep")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("changeSomeClassShowTwoFlagSpy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBeCalledWith")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fetchCompDataSpy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHaveBeenCalledTimes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("someClassShowTwo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBeTruthy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("someClassShowTwoFlag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBeTruthy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此处注意 非template中使用过到的data，获取更新后的值，从instance中获取")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toMatchSnapshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\t\n\n\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test someTimeDeferAction tap event trigger'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useFakeTimers")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("spyOn")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("global"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setTimeout'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createCompAndAttach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" compData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" someTimeDeferActionSpy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("spyOn")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someTimeDeferAction'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" childComp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.someTimeDeferActionClass'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    childComp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatchEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tap'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// comp.instance.someTimeDeferAction()")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" Promise"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runAllTimers")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timeDeferFlag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBeTruthy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("someTimeDeferActionSpy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHaveBeenCalledTimes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toMatchSnapshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useRealTimers")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("以上，我们对当前的示例组件完成了整体内容的单元测试书写，完整版单测文件可点击链接查看\n"),s("a",{attrs:{href:"https://github.com/Blackgan3/mpx-unit-test-demo/blob/master/test/components/example.spec.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/Blackgan3/mpx-unit-test-demo/blob/master/test/components/example.spec.js"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"结语"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#结语"}},[t._v("#")]),t._v(" 结语")]),t._v(" "),s("p",[t._v("通篇文章我们依次进行了前端常用单测框架简介，jest框架原理总结，小程序单元测试内部执行流程，最后介绍Mpx框架中单测能力的支持实现以及Mpx组件单测实战。")]),t._v(" "),s("p",[t._v("学习到了jest不仅仅是一个单元测试框架，你甚至可以使用它的各个工具库自己创建一个单元测试框架；以及感受到小程序场景下单元测试的差异化；Mpx框架层面也做了诸多改造来支撑单测功能的落地。")]),t._v(" "),s("p",[t._v("后续我们还会继续跟进推动业务中落地TDD规范，复杂逻辑组件中各种功能场景单测用例规范的补充等问题，持续在小程序单测方向深耕并有更好的规范总结产出。")]),t._v(" "),s("p",[t._v("参考文章：")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://jestjs.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://jestjs.io"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://jestjs.io/docs/architecture",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://jestjs.io/docs/architecture"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://medium.com/code-for-cause/jest-architecture-9870bbfcda44",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://medium.com/code-for-cause/jest-architecture-9870bbfcda44"),s("OutboundLink")],1)])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/63.b54aca3e.js b/docs-vuepress/.vuepress/dist/assets/js/63.b54aca3e.js
new file mode 100644
index 0000000000..1eb30bb4c6
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/63.b54aca3e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[63],{411:function(s,t,e){"use strict";e.r(t);var r=e(4),a=Object(r.a)({},(function(){var s=this,t=s._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h1",{attrs:{id:"文档指南"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#文档指南"}},[s._v("#")]),s._v(" 文档指南")]),s._v(" "),t("p",[s._v("该文档使用vuepress生成")]),s._v(" "),t("h2",{attrs:{id:"该项目指南"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#该项目指南"}},[s._v("#")]),s._v(" 该项目指南")]),s._v(" "),t("p",[s._v("已安装依赖vuepress，并已经在package.json中新增写作和部署脚本")]),s._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 写作时")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("npm")]),s._v(" run docs:dev\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 部署时")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("npm")]),s._v(" run docs:build\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 将在docs-vuepress/.vuepress/dist下生成静态文件，部署到相应服务器即可，部署参考下方链接")]),s._v("\n")])])]),t("h2",{attrs:{id:"编写格式指南"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#编写格式指南"}},[s._v("#")]),s._v(" 编写格式指南")]),s._v(" "),t("ul",[t("li",[s._v("对于引用的文档或资料使用"),t("a",{attrs:{href:""}},[s._v("链接")]),s._v("指明出处")]),s._v(" "),t("li",[s._v("中英文混排时为了阅读体验使用空格对于英文单词进行包裹，在标点符号边缘或句首时可省略该侧空格，例如：这是一个 word 而不是 world。")]),s._v(" "),t("li",[s._v("句首的英文单词首字母大写")]),s._v(" "),t("li",[s._v("Mpx 正确的写法为 "),t("code",[s._v("Mpx")]),s._v("，首字母大写，任何地方都应该这样书写，其余的专业名称参考原始的写法进行书写")]),s._v(" "),t("li",[s._v("除英文段落外，所有标点符号使用中文半角")]),s._v(" "),t("li",[s._v("能使用示例代码描述的部分都"),t("strong",[s._v("尽量添加示例代码")]),s._v("进行说明，show me the code")]),s._v(" "),t("li",[s._v("对于文档内容拓展说明的部分使用>引用的方式进行编写，like this")])]),s._v(" "),t("blockquote",[t("p",[s._v("我们来聊聊人生吧，这个地方你可以不看但没必要")])]),s._v(" "),t("h2",{attrs:{id:"参考"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#参考"}},[s._v("#")]),s._v(" 参考")]),s._v(" "),t("ul",[t("li",[t("a",{attrs:{href:"https://www.vuepress.cn/guide/deploy.html",target:"_blank",rel:"noopener noreferrer"}},[s._v("部署指南"),t("OutboundLink")],1)]),s._v(" "),t("li",[t("a",{attrs:{href:"https://www.vuepress.cn/",target:"_blank",rel:"noopener noreferrer"}},[s._v("Vuepress文档"),t("OutboundLink")],1)])])])}),[],!1,null,null,null);t.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/64.399e72b8.js b/docs-vuepress/.vuepress/dist/assets/js/64.399e72b8.js
new file mode 100644
index 0000000000..37c6052240
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/64.399e72b8.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{410:function(t,s,a){"use strict";a.r(s);var r=a(4),n=Object(r.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"原生能力兼容"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原生能力兼容"}},[t._v("#")]),t._v(" 原生能力兼容")]),t._v(" "),s("h2",{attrs:{id:"custom-tab-bar"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab-bar"}},[t._v("#")]),t._v(" custom-tab-bar")]),t._v(" "),s("p",[t._v("Mpx 支持微信小程序原生自定义 tabbar ，关于自定义 tabbar 的详情请查看"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("在 Mpx 中使用自定义 tabbar ，需要在 app.mpx 的 json 部分的 tabBar 配置里的 "),s("code",[t._v("custom")]),t._v(" 为 true 。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"application/json"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"tabBar"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"custom"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"color"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#000000"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"selectedColor"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#000000"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"backgroundColor"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#000000"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pagePath"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./page/component/index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"text"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"组件"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pagePath"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./page/API/index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"text"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"接口"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("在 src 目录下创建 custom-tab-bar 目录，包含 index.mpx 文件，可以在该 index.mpx 文件中编写自定义 tabbar 的模板、js、样式和 json 部分，同时也支持原生写法。")]),t._v(" "),s("h2",{attrs:{id:"workers"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#workers"}},[t._v("#")]),t._v(" workers")]),t._v(" "),s("p",[t._v("Mpx 完全支持小程序原生的 worker ，需要在 app.mpx 文件中的 json 部分声明 worker 的目录，Mpx 会将其对应目录进行打包，输出到目标代码目录中。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"application/json"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 指定 worker 的目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"workers"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"workers"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("更多详情可查看"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"云开发"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#云开发"}},[t._v("#")]),t._v(" 云开发")]),t._v(" "),s("p",[t._v("Mpx 支持微信小程序提供的原生云开发能力。如果需要在项目中使用云开发的能力，可以通过 Mpx 脚手架工具在初始化项目时选择支持云开发。如果需要支持云开发能力，在项目初始化时需要选择是微信平台下，且不能支持跨平台开发。如下图所示：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/cloud_v2.png",alt:"云开发"}})]),t._v(" "),s("p",[t._v("更多关于云开发相关可查看"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"useextendedlib"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#useextendedlib"}},[t._v("#")]),t._v(" useExtendedLib")]),t._v(" "),s("p",[t._v("Mpx 对于引入扩展库做了相关处理，可以在 app.mpx 中配置使用的扩展库，目前支持 weui 。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"useExtendedLib"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"weui"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("还需要在 Mpx 的配置文件配置 "),s("code",[t._v("externals")]),t._v(" 属性，来指定外部依赖，这样 Mpx 在进行打包时，会将其当做外部依赖进行打包。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("externals")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'weui'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/65.a8c627d3.js b/docs-vuepress/.vuepress/dist/assets/js/65.a8c627d3.js
new file mode 100644
index 0000000000..22c1346ef9
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/65.a8c627d3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[65],{415:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"分包异步化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#分包异步化"}},[t._v("#")]),t._v(" 分包异步化")]),t._v(" "),s("blockquote",[s("p",[t._v("在小程序中，不同的分包对应不同的下载单元；因此，除了非独立分包可以依赖主包外，分包之间不能互相使用自定义组件或进行 require。\n「分包异步化」特性将允许通过一些配置和新的接口，使部分跨分包的内容可以等待下载后异步使用，从而一定程度上解决这个限制。")])]),t._v(" "),s("p",[t._v("具体功能介绍和功能目的可 "),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("点击查看"),s("OutboundLink")],1),t._v(", Mpx对于分包异步化功能进行了完整支持。")]),t._v(" "),s("p",[t._v("当前 Mpx 框架默认支持以下平台的分包异步化能力：")]),t._v(" "),s("ul",[s("li",[t._v("微信小程序")]),t._v(" "),s("li",[t._v("支付宝小程序")]),t._v(" "),s("li",[t._v("字节小程序")]),t._v(" "),s("li",[t._v("Web")])]),t._v(" "),s("p",[t._v("在非上述平台，异步分包代码会默认降级。")]),t._v(" "),s("h2",{attrs:{id:"跨分包自定义组件引用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#跨分包自定义组件引用"}},[t._v("#")]),t._v(" 跨分包自定义组件引用")]),t._v(" "),s("blockquote",[s("p",[t._v("一个分包使用其他分包的自定义组件时，由于其他分包还未下载或注入，其他分包的组件处于不可用的状态。通过为其他分包的自定义组件设置 占位组件，\n我们可以先渲染占位组件作为替代，在分包下载完成后再进行替换。")])]),t._v(" "),s("p",[t._v("在 Mpx 中使用跨分包自定义组件引用通过?root声明组件所属异步分包即可使用，示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--/packageA/pages/index.mpx--\x3e")]),t._v("\n// 这里在分包packageA中即可异步使用分包packageB中的hello组件\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"hello"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../../packageB/components/hello?root=packageB"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"simple-hello"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/hello"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"componentPlaceholder"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"hello"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"simple-hello"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("ul",[s("li",[t._v("注意项：目前该能力已在微信、支付宝和Web环境下支持，其他环境下框架将进行自动降级。")])]),t._v(" "),s("h2",{attrs:{id:"跨分包-js-代码引用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#跨分包-js-代码引用"}},[t._v("#")]),t._v(" 跨分包 JS 代码引用")]),t._v(" "),s("blockquote",[s("p",[t._v("一个分包中的代码引用其它分包的代码时，为了不让下载阻塞代码运行，我们需要异步获取引用的结果")])]),t._v(" "),s("p",[t._v("在 Mpx 中跨分包异步引用 JS 代码时，"),s("strong",[t._v("需要在引用的 JS 路径后拼接 JS 模块所在的分包名")]),t._v("，此外由于 "),s("strong",[t._v("require")]),t._v(" 不能传入多个参数的限制，在Mpx中无法使用回调函数的\n风格跨分包 JS 代码引用，只能使用 Promise 风格。")]),t._v(" "),s("p",[t._v("示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// subPackageA/index.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者使用 Promise 风格的调用")]),t._v("\nrequire"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../commonPackage/index.js?root=subPackageB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("pkg")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  pkg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPackageName")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 'common'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[t._v("注意项：目前该能力仅微信平台下支持，其他平台下框架将会自动降级")])]),t._v(" "),s("h2",{attrs:{id:"跨分包-store-引用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#跨分包-store-引用"}},[t._v("#")]),t._v(" 跨分包 Store 引用")]),t._v(" "),s("p",[t._v("在 Mpx 中如果想要跨分包异步引用 Store 代码，分为三个步骤")]),t._v(" "),s("ul",[s("li",[t._v("页面或父组件在 "),s("code",[t._v("created")]),t._v(" 钩子加载异步 Store")]),t._v(" "),s("li",[t._v("异步 Store 加载完成后再渲染使用异步 Store 的组件")]),t._v(" "),s("li",[t._v("子组件在框架内部生命周期 "),s("code",[t._v("BEFORECREATE")]),t._v(" 钩子中动态注入 computed 和 methods")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--pages/index/index.mpx--\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("store-list")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{showStoreList}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("store-list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("showStoreList")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      require"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../subpackages/sub2/store?root=sub2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("store")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("asyncStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sub2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("default\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当异步 Store 加载完成后再渲染使用异步 Store 的组件")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("showStoreList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 子组件:store-list --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("BEFORECREATE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在 BEFORECREATE 钩子中动态注入 options")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("BEFORECREATE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取异步 Store实例")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" subStore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("asyncStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sub2\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// computed 中 mapState、mapGetters 替换为 mapStateToInstance、mapGettersToInstance，最后一个参数必须传当前 component 实例 this")]),t._v("\n      subStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapStateToInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pagename'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      subStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGettersToInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pageDataGetter'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// methods 中 mapActions、mapMutations 替换为 mapMutationsToInstance、mapActionsToInstance，最后一个参数必须传当前 component 实例 this")]),t._v("\n      subStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutationsToInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'updatePageData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      subStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActionsToInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'updatePageName'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/66.7f19cc4b.js b/docs-vuepress/.vuepress/dist/assets/js/66.7f19cc4b.js
new file mode 100644
index 0000000000..fdb6c91e68
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/66.7f19cc4b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[66],{412:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"自定义路径"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#自定义路径"}},[t._v("#")]),t._v(" 自定义路径")]),t._v(" "),s("p",[t._v("Mpx在构建时，如果引用的页面不存在于当前 app.mpx 所在的上下文中，例如存在于 npm 包中，为避免和本地声明的其他 page 路径冲突，Mpx 会对页面路径进行 hash 化处理，\n同时处理组件路径时也会添加 hash 防止路径名冲突，hash 化处理后最终的文件名是 name+hash+ext 的格式")]),t._v(" "),s("p",[t._v("与此同时，部分开发者希望能够对最终输出的页面路径和组件路径能够自定义，Mpx 对此也提供了相应的配置和Api来支持用户自定义路径")]),t._v(" "),s("h2",{attrs:{id:"自定义页面路径"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#自定义页面路径"}},[t._v("#")]),t._v(" 自定义页面路径")]),t._v(" "),s("p",[t._v("针对 Mpx 对 json 中非当前上下文的页面路径 hash 化的特性，如果为提升可读性需要避免路径 hash 化，可以使用该特性，具体为在\njson 中配置 pages 时，数组中支持放入 Object，对象中传入两个字段，src 字段表示页面地址，path 字段表示自定义页面路径")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("示例")]),t._v(":")])]),t._v(" "),s("p",[t._v("object风格的页面声明")]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 主包中的声明")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"src"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@someGroup/someNpmPackage/pages/view/index.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/somNpmPackage/index"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注意保持 path 的唯一性")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 分包中的声明")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"subPackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"test"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n           "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"src"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@someGroup/someNpmPackage/pages/view/test.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n           "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/somNpmPackage/test"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注意保持 path 的唯一性")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("使用声明中配置的页面路径进行跳转")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/pages/somNpmPackage/index'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/test/pages/somNpmPackage/test'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"customoutputpath"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#customoutputpath"}},[t._v("#")]),t._v(" customOutputPath")]),t._v(" "),s("p",[t._v("Mpx 框架 webpack-plugin 也提供了 customOutputPath 方法可以让用户进行页面和组件路径的自定义，\n可使用该方法对"),s("strong",[t._v("非原生组件和非当前文件context的页面")]),t._v("输出路径进行自定义")]),t._v(" "),s("p",[t._v("需要注意的是，该方法需要具有"),s("strong",[t._v("稳定性和唯一性")]),t._v("，即同样的输入不管什么时候执行都要有同样的返回以及不同的的输入一定会得到不同的输出。")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("示例")]),t._v("：")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("customOutputPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hash"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resourcePath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// type: 资源类型(page | component | static)")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// name: 资源原有文件名")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// hash: 8位长度的hash串")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ext: 文件后缀(.js｜ .wxml | .json 等)")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// resourcePath: 资源路径")]),t._v("\n\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 输出示例： pages/testax34dde3/index.js")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'s'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" hash"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" ext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("基于上方示例，你可以根据需要进行路径定制化，例如缩短hash、使用012代替文件名等各种自定义路径")])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/67.e57db97e.js b/docs-vuepress/.vuepress/dist/assets/js/67.e57db97e.js
new file mode 100644
index 0000000000..9788731584
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/67.e57db97e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[67],{414:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"使用-dllplugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用-dllplugin"}},[t._v("#")]),t._v(" 使用 DllPlugin")]),t._v(" "),s("h3",{attrs:{id:"相关插件简述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#相关插件简述"}},[t._v("#")]),t._v(" 相关插件简述")]),t._v(" "),s("h4",{attrs:{id:"dllplugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dllplugin"}},[t._v("#")]),t._v(" DllPlugin")]),t._v(" "),s("blockquote",[s("p",[t._v("DllPlugin 和 DllReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度，这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。并且会生成一个名为 manifest.json的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。")])]),t._v(" "),s("p",[t._v("DllPlugin 用来将我们某些长时间不变更的资源，独立拆分出去，之后项目的每次构建这部分资源都不需要重新编译，而是直接通过 DLLReferencePlugin 引入 dll bundle, 大大的节省了构建时间。")]),t._v(" "),s("p",[t._v("构建生成对应的 dll bundle 和 manifest.json 文件，manifest 文件中是模块 id 与请求路径的关系映射。")]),t._v(" "),s("h4",{attrs:{id:"dllreferenceplugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dllreferenceplugin"}},[t._v("#")]),t._v(" DllReferencePlugin")]),t._v(" "),s("blockquote",[s("p",[t._v("这个插件是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖")])]),t._v(" "),s("p",[t._v("通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上，之后再在需要的时候通过内置的 "),s("strong",[t._v("webpack_require")]),t._v(" 函数来 require 他们。")]),t._v(" "),s("h3",{attrs:{id:"mpx中-dllplugin-的使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx中-dllplugin-的使用"}},[t._v("#")]),t._v(" Mpx中 DllPlugin 的使用")]),t._v(" "),s("p",[s("strong",[t._v("1.通过 @mpxjs/cli init 生成项目")])]),t._v(" "),s("p",[t._v("初始化选项中选择使用dll功能。")]),t._v(" "),s("p",[s("strong",[t._v("2.在项目中 build/dll.config.js 进行 dll 文件配置")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'path'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里是一个用法示例")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("file")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'..'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheGroups")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entries")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/@someNpmGroup/someNpmPkgName/dist/wx/static/js/common.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("root")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'testSomeDllFile'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entryOnly")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("webpackCfg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'none'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不使用任何默认优化选项")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheGroups")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entries")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/@someNpmGroup/someNpmPkgName/dist/ali/static/js/common.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("root")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'testSomeDllFile'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entryOnly")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("webpackCfg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'none'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不使用任何默认优化选项")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("DllPlugin 的配置项详见"),s("a",{attrs:{href:"https://webpack.docschina.org/plugins/dll-plugin/",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档"),s("OutboundLink")],1),t._v("，Mpx 中相关配置项依据小程序环境做了相关调整。")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("cacheGroups")])]),t._v(" "),s("ul",[s("li",[t._v("类型: "),s("code",[t._v("Array<object>")]),t._v(" "),s("ul",[s("li",[t._v("entries\n"),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("Array")]),t._v("dll")]),t._v(" "),s("p",[t._v("构建入 dll 的文件入口")])])])]),t._v(" "),s("li",[t._v("name\n"),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("String")])]),t._v(" "),s("p",[t._v("生成的 dll 文件名")])])])]),t._v(" "),s("li",[t._v("root\n"),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("String")])]),t._v(" "),s("p",[t._v("生成的 dll 文件夹名")])])])])])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("modes")])]),t._v(" "),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("Array")])]),t._v(" "),s("p",[t._v("构建 dll 产物对应的平台")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置多平台输出，例如：")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 微信平台")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 支付宝平台")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("entryOnly")])]),t._v(" "),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("Boolean")])]),t._v(" "),s("p",[t._v("如果为true，则仅暴露入口")]),t._v(" "),s("p",[t._v("这里建立使用entryOnly: true 配置")]),t._v(" "),s("blockquote",[s("p",[t._v("如果为 false 时，dllPlugin 中的 tree shakeing 功能就不再起作用")])]),t._v(" "),s("p",[t._v("另外如果为false，如果是将分包资源打入dll bundle，会存在将全局方法打入分包 dll 中的可能性，这样主包在使用该方法被映射到 dll bundle 中时，会因为分包未加载而报错")])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("webpackCfg")])]),t._v(" "),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("Object")])]),t._v(" "),s("p",[t._v("构建 dll 时可添加其他的 webpack 配置")])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("format")])]),t._v(" "),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("Boolean")])]),t._v(" "),s("p",[t._v("生成的 manifest json 文件 是否进行格式化")])])])])]),t._v(" "),s("h3",{attrs:{id:"mpx-中对-dllplugin-配置所做的相关处理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx-中对-dllplugin-配置所做的相关处理"}},[t._v("#")]),t._v(" Mpx 中对 DllPlugin 配置所做的相关处理")]),t._v(" "),s("p",[t._v("正常使用 DllPlugin 是单独创建一个 webpack 配置文件，配置文件中加入 DllPlugin，然后运行 webpack 编译构建生成 dll 文件。")]),t._v(" "),s("p",[t._v("考虑到 Mpx 在编译时需要跨平台输出，所以 Mpx 的配置项是 "),s("code",[t._v("Array<object>")]),t._v(" 类型，同时增加了 modes 配置项，可以自主控制输出不同平台版本 dll 文件。")]),t._v(" "),s("p",[t._v("构建生成 dll bundle 的主要逻辑在 buildDll.js 中，通过对 dll.config 中数组的循环处理，生成 webpackCfgs 数组。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("dllConfigs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("dllConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" entries "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getDllEntries")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dllConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cacheGroups"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dllConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("modes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据配置的 mode 以及 cacheGroups 生成 entry，结果例如：")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n  *{\n        'somePkgRoot/wx.somePkgName': [\n            '/Users/didi/didiProject/mp-apphome/node_modules/@someNpmGroup/somNpmName/dist/wx/static/js/common.js'\n        ]\n    }\n  **/")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("keys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    webpackCfgs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("output")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dllPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("filename")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'lib'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dllName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("libraryTarget")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commonjs2'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'production'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("webpack"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DllPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dllPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" manifestName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" dllConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entryOnly")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" dllConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("entryOnly"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" dllName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commonjs2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("context\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dllConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackCfg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("生成的 webpackCfgs 数组配置项，传入 webpack 执行，最终在 dll 文件夹下生成 dll bundle 和 manifest.json 文件")]),t._v(" "),s("p",[t._v("之后在 build.js 中使用 DllReferencePlugin 将编译中的依赖项与 dll bundle 的模块 id 关联起来，这里我们通过多个 DllReferencePlugin 实例来将可能存在的多个 manifest 文件关联引入，具体在项目 build.js 文件中：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("plugins"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("webpack"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DllReferencePlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//（绝对路径） manifest (或者是内容属性)中请求的上下文")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("manifest")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" manifest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("content "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请求到模块 id 的映射（默认值为 manifest.content）")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("DllReferencePlugin 的其他配置项详见"),s("a",{attrs:{href:"https://webpack.docschina.org/plugins/dll-plugin/",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"总结"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#总结"}},[t._v("#")]),t._v(" 总结")]),t._v(" "),s("p",[t._v("综上所述，在 Mpx 中使用 dllPlugin 时，只需要进行 build/dll.config.js 文件的配置，然后通过 build:dll 命令生成 dll bundle，之后就可以正常的进行代码的 build 了。不过每次 build 需要检查下项目中使用的 npm 包版本与 dll bundle 中的 npm 包版本是否一致，避免因为包版本的滞后更新导致线上 bug，这里我们后续也会提供相应的包版本比对插件。")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/68.ebe4213c.js b/docs-vuepress/.vuepress/dist/assets/js/68.ebe4213c.js
new file mode 100644
index 0000000000..20199b86b5
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/68.ebe4213c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[68],{417:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"国际化i18n"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#国际化i18n"}},[t._v("#")]),t._v(" 国际化i18n")]),t._v(" "),s("p",[t._v("Mpx 支持国际化 i18n，使用方式及支持能力与 vue-i18n 非常接近。")]),t._v(" "),s("p",[t._v("Mpx 自带 i18n 能力，无需额外安装插件。由于小程序模板中的 i18n 函数是通过 wxs 编译注入进行实现，我们需要将 i18n 配置传入到 MpxWebpackPlugin 中来使 i18n 生效，这是与 vue-i18n 最大的区别。")]),t._v(" "),s("h2",{attrs:{id:"开启-i18n"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开启-i18n"}},[t._v("#")]),t._v(" 开启 i18n")]),t._v(" "),s("p",[t._v("I18n 配置传入到 MpxWebpackPlugin 选项中即可生效，额外支持 messagesPath 配置，通过模块路径传入语言集，其余配置参考 vue-i18n。")]),t._v(" "),s("p",[t._v("由于小程序的双线程特性，在选项式 API 场景下，默认情况下模板中调用的 i18n 函数由 wxs 实现，而 js 中调用的 i18n 函数由 js 实现，该设计能够将视图层和逻辑层之间的通信开销降至最低，得到最优的性能表现，但是由于 wxs 和 js 之间无法共享数据，在最终的编译产物中语言集会同时存在于 js 和 wxs 当中，对包体积产生负面影响。")]),t._v(" "),s("p",[t._v("为了平衡上述影响，自2.6.56版本之后我们新增了编译配置项 "),s("code",[t._v("i18n.useComputed")]),t._v(" ，改配置项开启的情况下对于模板中的 i18n 调用将不再使用 wxs 实现，而是通过在 computed 进行实现，语言集将只存在于 js 逻辑层当中，对于节省了包体积的同时双线程通信成本也会增加，用时间换空间，具体是否开启可以根据实际项目的使用情况及资源瓶颈由开发者自行决定，\n另外需要注意的是，"),s("strong",[t._v("在 Mpx 组合式 API 场景下 i18n 仅支持通过 computed 实现")]),t._v("。")]),t._v(" "),s("blockquote",[s("p",[t._v("开启 "),s("code",[t._v("i18n.useComputed")]),t._v(" 配置时，由于 computed 技术架构的限制，i18n 函数无法对模板循环渲染中的 "),s("code",[t._v("item")]),t._v(" 或 "),s("code",[t._v("index")]),t._v(" 生效。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// messages既可以通过对象字面量传入，也可以通过messagesPath指定一个js模块路径，在该模块中定义配置并导出，dateTimeFormats/dateTimeFormatsPath和numberFormats/numberFormatsPath同理")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} world'")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'zh-CN'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} 世界'")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("useComputed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认 false,  此开关将模板中的 i18n 函数注入 computed，在包体积空间紧张的情况下可以使用")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// messagesPath: path.resolve(__dirname, '../src/i18n.js')")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"options-api-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#options-api-usage"}},[t._v("#")]),t._v(" 选项式 API 中使用 ")]),t._v(" "),s("p",[t._v("同 vue-i18n，在组件中直接调用翻译函数使用，由于 wxs 执行环境的限制，目前 js 中支持了 vue-i18n 中 $t/$tc/$te 翻译函数，$d/$n 暂不支持，详细使用方法可参考 vue-i18n。")]),t._v(" "),s("p",[t._v("此外类似于 vue-i18n，在组件模板的 Mustache 插值中直接调用翻译函数。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{isMessageExist}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('message.hello', { msg: 'hello' }) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message.hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("msg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isMessageExist")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$te")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message.hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"composition-api-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#composition-api-usage"}},[t._v("#")]),t._v(" 在组合式 API 中使用 ")]),t._v(" "),s("p",[t._v("在组合式 API setup 中，"),s("code",[t._v("this")]),t._v(" 不是该活跃实例的引用，为了继续使用 i18n 的相关能力，我们需要一个新的方法来替代 "),s("code",[t._v("this")]),t._v("\n，这里 Mpx 提供 "),s("code",[t._v("useI18n")]),t._v(" 方法支持对 i18n 相关功能的使用。")]),t._v(" "),s("h3",{attrs:{id:"开始使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开始使用"}},[t._v("#")]),t._v(" 开始使用")]),t._v(" "),s("p",[t._v("同 vue-i18n, "),s("strong",[t._v("useI18n")]),t._v(" 返回一个 i18n 实例，该实例提供文案翻译 API 例如 "),s("strong",[t._v("t")]),t._v(" 方法，相较于选项式 API 中的翻译方法，在组合式 API 中有部分变化。")]),t._v(" "),s("ol",[s("li",[t._v("翻译方法 $t/t 和 $tc/tc，在组合式 API 中统一使用翻译方法 t")]),t._v(" "),s("li",[t._v("翻译方法 $te/te，在组合式 API 中统一使用 te")]),t._v(" "),s("li",[t._v("翻译方法 $tm/tm，在组合式 API 中统一使用 tm")])]),t._v(" "),s("p",[s("code",[t._v("useI18n")]),t._v(" 方法的执行必须在 "),s("code",[t._v("setup")]),t._v(" 中的顶层。")]),t._v(" "),s("p",[t._v("i18n 同时也支持传入参数，例如 "),s("code",[t._v("locale")]),t._v(" 和 "),s("code",[t._v("fallbackLocale")]),t._v("，\n关于实例的更多信息可移步API章节 "),s("RouterLink",{attrs:{to:"/api/extend.html#usei18n"}},[t._v("查看")])],1),t._v(" "),s("p",[t._v("在不给 "),s("code",[t._v("useI18n")]),t._v(" 传入任何参数时，i18n 实例的上下文将是全局作用域，即翻译函数 "),s("code",[t._v("t")]),t._v(" 引用的文案来源是我们在 "),s("code",[t._v("MpxWebpackPlugin")]),t._v("\n中配置的文案。")]),t._v(" "),s("p",[t._v("通过在 "),s("strong",[t._v("setup")]),t._v(" 中返回翻译函数 "),s("strong",[t._v("t")]),t._v("，我们可以在模版中直接使用它:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('{{t("message.hello")}}'),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 从返回中解构出 t 方法")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      t\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 t 方法返回挂载到渲染实例")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意事项：")])]),t._v(" "),s("p",[t._v("组合式 API 中，Mpx 在编译时对模版进行 ast 遍历分析，检测到对应的翻译函数 t/tc/te 后，将其转换为 computed 方法注入，computed 中调用 setup 中返回的 t 方法进行文案获取，由此引申出来两个注意项：")]),t._v(" "),s("p",[t._v("1.不可对从 "),s("strong",[t._v("useI18n")]),t._v(" 中解构出的 "),s("strong",[t._v("t")]),t._v(" 方法进行重命名，否则模版中将无法正确获取文案。")]),t._v(" "),s("p",[t._v("下方即为错误示例：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t1('message.hello')}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" t1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                t1\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("2.模版中的 t/tc/te 方法都是使用 computed 实现，由于 computed 技术架构的限制，i18n 函数无法对模板循环渲染中的 "),s("code",[t._v("item")]),t._v(" 或 "),s("code",[t._v("index")]),t._v(" 生效。")]),t._v(" "),s("p",[t._v("例如下方示例将会报错 computed 中找不到 item")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--tc方法使用 computed 实现，最终将无法正确获取item--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{listData}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{tc('message.hello', {msg: item})}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" listData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("tc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                tc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                listData\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"scope"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#scope"}},[t._v("#")]),t._v(" 作用域 ")]),t._v(" "),s("p",[t._v("在 Mpx 组合式 API 中，"),s("code",[t._v("useI18n")]),t._v(" 返回的 i18n 实例默认是指向全局作用域，文案来源即为 "),s("code",[t._v("MpxWebpackPlugin")]),t._v(" 中配置的 messages。")]),t._v(" "),s("p",[t._v("如果需要在组合式 API 中使用本地作用域，需要给 "),s("code",[t._v("useI18n")]),t._v(" 传入响应的配置项，"),s("code",[t._v("useI18n")]),t._v(" 将根据传入的 locale、messages 等配置项来生成一个全新的\ni18n 实例，该实例的文案源即为用户传入的 "),s("code",[t._v("messages")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--将展示本地作用域中的文案 哈喽--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('message.hello')}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createPage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'哈喽'")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                t\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意事项：")])]),t._v(" "),s("p",[t._v("在给 "),s("code",[t._v("useI18n")]),t._v(" 传参时，若只传入 "),s("code",[t._v("messages")]),t._v(" 属性，则 "),s("code",[t._v("locale")]),t._v(" 会自动 fallback 到全局 locale，修改 "),s("code",[t._v("useI18n")]),t._v(" 返回的 "),s("code",[t._v("locale")]),t._v(" ref 值将改变本地作用域  locale。")]),t._v(" "),s("p",[t._v("若只传入 "),s("code",[t._v("locale")]),t._v(" 属性，不传入 "),s("code",[t._v("messages")]),t._v("，则会自动 fallback 到全局 "),s("code",[t._v("locale")]),t._v(" 和 "),s("code",[t._v("messages")]),t._v("，且修改 "),s("code",[t._v("useI18n")]),t._v(" 返回的 "),s("code",[t._v("locale")]),t._v(" 对"),s("strong",[t._v("全局和本地都不会起作用")]),t._v("，\n因此建议不要单独传入 "),s("code",[t._v("locale")]),t._v(" 属性，若想使用本地 i18n 实例，则必须传入 "),s("code",[t._v("messages")]),t._v(" 属性。")]),t._v(" "),s("p",[t._v("在 Mpx 选项式 API 中，i18n 实例仅有全局 global i18n 实例，所有 i18n 翻译方法 $t/$tc/$te/$tm 的执行上下文都为全局作用域。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{$t('message.hello')}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createPage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLoad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$i18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n             * locale 全局 locale\n             * fallbackLocale 全局兜底 locale\n             */")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 作用域为 global scope")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message.name'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"动态变更locale"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#动态变更locale"}},[t._v("#")]),t._v(" 动态变更locale")]),t._v(" "),s("p",[t._v("在 Mpx 组合式 API 中，你可以通过修改 "),s("code",[t._v("useI18n")]),t._v(" 返回的 "),s("code",[t._v("locale")]),t._v(" 来更换局部或全局语言，或者更改 mpx.i18n 中的 locale 属性更换全局语言集，并自动更新视图。")]),t._v(" "),s("ul",[s("li",[t._v("变更全局 locale")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 局部locale变更，生效范围为当前组件内")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" locale"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 全局locale变更，生效范围为项目全局，locale 是一个 ref 变量")]),t._v("\n      locale"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者通过mpx.i18n来修改，也能起到全局locale修改作用")]),t._v("\n      mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("i18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("locale "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        t\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("  \n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")]),t._v(" 这里通过 mpx.i18n 修改 locale 时，为和 vue3 保持一直，需要通过 global 属性来获取 locale，同时 locale 也是一个 ref 变量，需要使用 "),s("code",[t._v(".value")]),t._v(" 来修改。")]),t._v(" "),s("ul",[s("li",[t._v("变更局部 locale")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 局部locale变更，生效范围为当前组件内")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" locale"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'zh-CN'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'你好'")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 局部locale变更，生效范围为当前组件/页面，locale 是一个 ref 变量")]),t._v("\n      locale"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        t\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("  \n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在选项式 API 中，仅支持修改全局 locale, 不支持修改局部 locale。")]),t._v(" "),s("p",[t._v("在 Vue3 中，选项式 API 中直接修改 this.$i18n.locale 无任何作用，这里为和 Vue3 拉齐建议使用 mpx.i18n 来进行 locale 修改。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 修改全局 locale")]),t._v("\n      mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("i18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("locale "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"动态更新语言集"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#动态更新语言集"}},[t._v("#")]),t._v(" 动态更新语言集")]),t._v(" "),s("p",[t._v("在组合式 API 中默认支持动态更新语言集。")]),t._v(" "),s("p",[t._v("在选项式 API 中，当模板中没有使用 i18n 函数或开启了 "),s("code",[t._v("i18n.useComputed")]),t._v(" 配置时, 可以对语言集进行动态更新。")]),t._v(" "),s("p",[t._v("我们提供了 "),s("code",[t._v("mergeLocaleMessage")]),t._v(" 对语言集进行动态扩展，"),s("code",[t._v("setLocaleMessage")]),t._v(" 对语言集进行覆盖更新。")]),t._v(" "),s("p",[t._v("使用方式如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--2 秒之后展示 哈喽--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('message.hello')}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--1秒之后展示 hello1, 2秒之后展示为 恭喜你--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('message.hello1')}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mergeLocaleMessage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" setLocaleMessage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 新增一门语言或针对特定语言更新语言集")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mergeLocaleMessage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello1")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setLocaleMessage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'哈喽'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello1")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'恭喜你'")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("同理我们在选项式 API 中可以使用 "),s("code",[t._v("mpx.i18n.global.mergeLocaleMessage")]),t._v(", "),s("code",[t._v("mpx.i18n.global.setLocaleMessage")]),t._v(" 方法来动态更新或扩展语言集。")]),t._v(" "),s("h2",{attrs:{id:"平台支持"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#平台支持"}},[t._v("#")]),t._v(" 平台支持")]),t._v(" "),s("p",[t._v("目前支持业内所有小程序平台(微信/支付宝/qq/百度/头条)。")]),t._v(" "),s("p",[t._v("在输出 web 时，构建会自动引入 vue-i18n 并进行安装配置，无需修改任何代码即可按照预期正常工作。")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/69.2d309866.js b/docs-vuepress/.vuepress/dist/assets/js/69.2d309866.js
new file mode 100644
index 0000000000..19f6e5e323
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/69.2d309866.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[69],{416:function(t,s,a){"use strict";a.r(s);var n=a(4),r=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"图像资源处理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#图像资源处理"}},[t._v("#")]),t._v(" 图像资源处理")]),t._v(" "),s("blockquote",[s("p",[t._v("Mpx在小程序开发中提供了很好的图像资源处理能力，让开发者可以愉快地在项目中使用图片。")])]),t._v(" "),s("h2",{attrs:{id:"图像资源引入有三种方式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#图像资源引入有三种方式"}},[t._v("#")]),t._v(" 图像资源引入有三种方式")]),t._v(" "),s("ol",[s("li",[t._v("Template 中通过 image src 指定图像资源\n"),s("ul",[s("li",[t._v("直接指定图像的远程资源地址")]),t._v(" "),s("li",[t._v("资源为本地路径，若配置 publicPath，则 publicPath 与 webpack loader 中配置的 name 进行拼接")])])]),t._v(" "),s("li",[t._v("Style 中通过 src 指定图像资源")]),t._v(" "),s("li",[t._v("Style 中通过 class 指定图像资源")])]),t._v(" "),s("p",[t._v("Wxss文件中只能用 CDN 地址或 Base64, 针对第二、三种方式引入的资源，可以通过配置决定使用 CDN 还是 Base64，且 Mpx 中图像资源处理会优先检查 Base64，具体配置参数如下：")]),t._v(" "),s("ul",[s("li",[t._v("publicPath：资源存放 CDN 地址，可选")]),t._v(" "),s("li",[t._v("limit: 资源大小限制，可根据资源的大小判断走 Base64 还是 CDN， 可选")]),t._v(" "),s("li",[t._v("publicPathScope: 限制输出 CDN 图像资源的范围，可选 styleOnly、all，默认为 styleOnly。（图像引用方式分两大类 Template, Style）")]),t._v(" "),s("li",[t._v("outputPathCDN: 设置 CDN 图像对应的本地相对地址（相对于当前编译输出目录的地址，如 dist,或者 dist/wx），可写脚本将本地图像批量上传到 CDN")])]),t._v(" "),s("h2",{attrs:{id:"base64-图像资源"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#base64-图像资源"}},[t._v("#")]),t._v(" Base64 图像资源")]),t._v(" "),s("p",[t._v("图像转 Base64的两种方式:")]),t._v(" "),s("ul",[s("li",[t._v("未配置 publicPath")]),t._v(" "),s("li",[t._v("配置了 publicPath，且用户未自定义图像处理 fallback query，且未配置 limit 或图像资源未超过 limit 的限制时")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.config.js 配置,未配置 publicPath 必走 Base64")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" webpackConfig "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("@mpxjs/cli 3.x 版本配置如下")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("<style>\n  .logo")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v("'~images/logo.png'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n</style>\n")])])]),s("h2",{attrs:{id:"cdn-图像资源"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cdn-图像资源"}},[t._v("#")]),t._v(" CDN 图像资源")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.config.js 配置")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" webpackConfig "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CDN 地址")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1024'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Base64 的最大长度，超过则走 CDN ")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("@mpxjs/cli 3.x 版本配置如下")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CDN 地址")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1024'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Base64 的最大长度，超过则走 CDN ")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])]),t._v(" "),s("h2",{attrs:{id:"cdn-图像资源输出本地目录，用户自行批量上传到cdn服务器"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cdn-图像资源输出本地目录，用户自行批量上传到cdn服务器"}},[t._v("#")]),t._v(" CDN 图像资源输出本地目录，用户自行批量上传到CDN服务器")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.config.js 配置")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" webpackConfig "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPathScope")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'styleOnly'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("outputPathCDN")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./cdnImages'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("@mpxjs/cli 3.x 版本配置如下")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPathScope")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'styleOnly'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("outputPathCDN")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./cdnImages'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])]),t._v(" "),s("blockquote",[s("p",[t._v("备注:"),s("br"),t._v("\n图像默认编译后会输出到 img 目录下, 当设置 outputPathCDN 后，输出的本地图像地址为 outputPathCDN + img/图像.png"),s("br"),t._v("\nCND 文件地址为 publicPath + img/图像.png，所以当使用脚本上传到 CDN 时，路径要带上 img")])]),t._v(" "),s("h2",{attrs:{id:"用户自定义图像处理方式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#用户自定义图像处理方式"}},[t._v("#")]),t._v(" 用户自定义图像处理方式")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.config.js 配置")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" webpackConfig "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CDN 地址")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1024'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Base64 的最大长度，超过则走 CDN,")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fallback")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'file-loader'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认走 file-loader")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("@mpxjs/cli 3.x 版本配置如下")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CDN 地址")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1024'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Base64 的最大长度，超过则走 CDN,")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fallback")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'file-loader'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认走 file-loader")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*不走 Base64 的情况下*/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("<style>\n  .logo2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v("'~images/logo.png?fallback=true'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n</style>\n")])])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/7.01e4e942.js b/docs-vuepress/.vuepress/dist/assets/js/7.01e4e942.js
new file mode 100644
index 0000000000..4c62302242
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/7.01e4e942.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{344:function(n,t,a){},363:function(n,t,a){"use strict";a(344)},377:function(n,t,a){"use strict";a.r(t);var o={components:{ParentLayout:a(357).a}},s=(a(363),a(4)),u=Object(s.a)(o,(function(){var n=this._self._c;return n("div",{staticClass:"container"},[n("ParentLayout")],1)}),[],!1,null,null,null);t.default=u.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/70.60ae83e6.js b/docs-vuepress/.vuepress/dist/assets/js/70.60ae83e6.js
new file mode 100644
index 0000000000..cf7f549257
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/70.60ae83e6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[70],{418:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"使用-mixin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用-mixin"}},[t._v("#")]),t._v(" 使用 mixin")]),t._v(" "),s("p",[t._v("Mpx 提供了一套完善的 mixin 机制，有人可能要问，原生小程序中已经支持了 behaviors，为何我们还需要提供 mixin 呢？主要有以下两点原因：")]),t._v(" "),s("ol",[s("li",[t._v("Behaviors 是平台限度的，只有在部分小程序平台中可以使用，而且内置 behaviors 承载了除了 mixin 外的其他功能，框架提供的 mixin 是一个与平台无关的基础能力；")]),t._v(" "),s("li",[t._v("Behaviors 只有组件支持使用，页面不支持，而且只支持局部声明，框架提供的 mixin 与组件页面无关，且支持全局 mixin 声明。")])]),t._v(" "),s("h2",{attrs:{id:"局部-mixin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#局部-mixin"}},[t._v("#")]),t._v(" 局部 Mixin")]),t._v(" "),s("p",[s("code",[t._v("App")]),t._v("、"),s("code",[t._v("Page")]),t._v("、"),s("code",[t._v("Component")]),t._v(" 接收 mixins 参数,参数格式为[Mixin1(Object),Mixin2(Object)]")]),t._v(" "),s("blockquote",[s("p",[t._v("Mixin 混合实例对象可以像正常的实例对象一样包含选项，相同选项将进行逻辑合并。举例：如果 mixin1 包含一个钩子 ready,而创建组件 Component 也有一个钩子 ready，两个函数将被调用。 Mixin 钩子按照传入顺序(数组顺序)依次调用，并在调用组件自身的钩子之前被调用。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mixin.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'phone'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手机'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'tv'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电视'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'computer'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电脑'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mixins ready:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("phone"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mixins "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../common/mixins'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mixins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mixins"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手机'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电视'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电脑'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'component ready:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("phone"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("// 输出结果为\nmixins ready: 手机\ncomponent ready: 手机\n")])])]),s("h2",{attrs:{id:"全局-mixin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#全局-mixin"}},[t._v("#")]),t._v(" 全局 Mixin")]),t._v(" "),s("p",[t._v("Mpx 中可以使用 "),s("code",[t._v("mpx.injectMixins")]),t._v(" 方法配置全局 mixin，能够按照 App / 组件 / 页面维度自由配置，简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第一个参数为 mixins，可以混入任意配置，第二个参数为混入生效范围，可传递 'app' / 'page' / 'component' 字符串或由其组成的数组")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("injectMixins")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("customData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'123'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'page'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx.mixin 为 mpx.injectMixins 的别名，混入单个 mixin 时可以直接传递对象，生效范围可传递字符串")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useCustomData")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("customData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'component'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当未传递生效范围时默认为全局生效，对 app / page / component 都生效")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("processedCustomData")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("customData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'321'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/71.188d7bca.js b/docs-vuepress/.vuepress/dist/assets/js/71.188d7bca.js
new file mode 100644
index 0000000000..d3764227d2
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/71.188d7bca.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[71],{421:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"使用npm"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用npm"}},[t._v("#")]),t._v(" 使用npm")]),t._v(" "),s("p",[t._v("Mpx项目中用户能够方便自然地引用 npm 资源，像 web 开发中一样")]),t._v(" "),s("p",[t._v("在 Mpx 中使用 npm，通过 Webpack 插件在编译时将引用的 npm 包输出为小程序文件，所以 Mpx 的构建产物不需要在开发工具再次进行 npm 构建。")]),t._v(" "),s("h2",{attrs:{id:"下载npm包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#下载npm包"}},[t._v("#")]),t._v(" 下载npm包")]),t._v(" "),s("p",[t._v("在项目 package.json 所在的目录中执行命令安装项目 npm 包")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("npm install\n")])])]),s("p",[t._v("在项目中安装某个第三方 npm 包")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("npm install mpx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("ui\n")])])]),s("p",[t._v("如若之前未接触过 npm，请翻阅 "),s("a",{attrs:{href:"https://docs.npmjs.com/about-npm/index.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("官方 npm 文档"),s("OutboundLink")],1),t._v(" 进行学习。")]),t._v(" "),s("h2",{attrs:{id:"引用npm模块"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#引用npm模块"}},[t._v("#")]),t._v(" 引用npm模块")]),t._v(" "),s("p",[t._v("直接使用模块路径引用，可以直接通过 ES6 的 import 语法来引用 JS 文件，并且无需额外执行npm构建")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n")])])]),s("h2",{attrs:{id:"引用npm组件-页面"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#引用npm组件-页面"}},[t._v("#")]),t._v(" 引用npm组件/页面")]),t._v(" "),s("p",[t._v("在页面 script 标签中的 json 对象中使用 usingComponents 引入第三方组件，直接使用模块路径引用")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"application/json"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"mpx-button"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpx-ui/src/components/button"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("在 app.mpx 中的 script 标签中的 pages/packages/subPackages 中都可以声明引用 npm 包页面")]),t._v(" "),s("p",[t._v("示例:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"application/json"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@someGroup/someNpmPackage/pages/view/index.mpx"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("以上这种写法为避免和本地页面路径冲突，Mpx 会将路径进行 hash 化处理，所以使用页面时要在路径后添加 ?resovle 标识符，编译时会被处理成正确的、完整的绝对路径。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" packageIndexPage "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@someGroup/someNpmPackage/pages/view/index.mpx?resolve'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" packageIndexPage\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果你觉得上述引用 npm 包页面的方式太繁琐，我们也提供了另一种 page 声明方式，可以让你自定义页面路径")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 声明")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"src"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@someGroup/someNpmPackage/pages/view/index.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"path"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/somNpmPackage/index"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注意保持 path 的唯一性")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以直接使用你自己声明的 path")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/pages/somNpmPackage/index'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("同理，我们在使用 subPackages 分包时也可以使用 pages 对象的方式")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"subPackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"test"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n       "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"src"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@someGroup/someNpmPackage/pages/view/index.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"path"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/somNpmPackage/index"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注意保持 path 的唯一性")]),t._v("\n       "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/test/pages/somNpmPackage/index'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("同时使用 Mpx 引用npm组件/页面时包体积比原生中的 npm 规范更优，好处有：")]),t._v(" "),s("p",[t._v("Mpx npm构建的优势主要有两点：1. 按需构建；2. 支持分包")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("小程序的 npm 规范场景下，组件库需声明miniprogram_dist目录，执行构建npm命令，将整个miniprogram_dist中的代码copy到项目的miniprogram_npm目录下。而 Mpx 的 npm 包引用，借助 Webpack 强大的构建分析能力，loader 在解析 json 中的 pages 域和 usingComponents 域中的路径时，通过动态创建 entry 的方式把这些文件添加进来，同时按需加载被确切使用的文件，降低包体积，借助  CommonsChunkPlugin/SplitChunksPlugin 的能力将复用的 js 模块抽出到一个外部公用的 bundle 中。")])]),t._v(" "),s("li",[s("p",[t._v("原生小程序的构建中，所有的 npm 模块都会输出到主包中，Mpx 在编译中，还会进行分包处理，对组件和静态资源，根据用户的分包配置，串行对主包和各个分包进行构建，标记出每个组件及静态资源的归属，根据小程序资源访问策略将其输出到主包或者分包中。")])])]),t._v(" "),s("p",[t._v("所以使用 Mpx 框架开发小程序，可以享受最舒适最自然最好用的 npm 机制，详细原理介绍请移步"),s("RouterLink",{attrs:{to:"/guide/understand/compile.html"}},[t._v("Mpx编译构建原理")])],1),t._v(" "),s("h2",{attrs:{id:"兼容原生小程序路径规范"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#兼容原生小程序路径规范"}},[t._v("#")]),t._v(" 兼容原生小程序路径规范")]),t._v(" "),s("p",[t._v("组件或者页面的引入有绝对路径和相对路径，或者引入 npm 第三方包，原生小程序中，我们通过相对路径引入一个组件时")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"component-tag-name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"path/to/the/custom/component"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这种路径形式在 webpack 路径规范中会被当成 npm 包路径来处理，所以要对原生小程序的路径规范做下兼容。")]),t._v(" "),s("p",[t._v("Mpx 提供了两种路径规范的配置模式可供大家选择，具体的使用方式为：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resolveMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'webpack'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在 MpxWebpackPlugin 插件中设置 resolveMode 项，默认值为 webpack，可选值有 webpack/native，推荐使用 webpack 模式，更舒服一些，配置项为 webpack 时，json 中的 pages/usingComponents 等需要写相对路径，但是也可以直接写 npm 包路径。例如：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"component-tag-name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./path/to/the/custom/component"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 内部组件路径")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"mpx-button"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpx-ui/src/components/button"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// npm 包路径")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v('如果希望使用类似小程序原始那种"绝对路径"，可以将 resolveMode 设置为 native，但是 npm 路径需要在前面加一个~，类似 webpack 的样式引入规范，同时必须配合 projectRoot 参数提供项目根目录地址。')]),t._v(" "),s("p",[t._v("resolveMode 为 native 时的使用示例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resolveMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'native'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当resolveMode为native时可通过该字段指定项目根目录")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("projectRoot")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 项目page.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"mpx-button"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"~mpx-ui/src/components/button"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// npm 包路径")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"component-tag-name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"path/to/the/custom/component"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 内部组件路径")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/72.3f7bfd0d.js b/docs-vuepress/.vuepress/dist/assets/js/72.3f7bfd0d.js
new file mode 100644
index 0000000000..03b4408131
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/72.3f7bfd0d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[72],{419:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"状态管理-pinia"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#状态管理-pinia"}},[t._v("#")]),t._v(" 状态管理（pinia）")]),t._v(" "),s("p",[t._v("Mpx 参考 "),s("a",{attrs:{href:"https://pinia.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Pinia"),s("OutboundLink")],1),t._v(" 设计实现了一套外部状态逻辑管理系统（pinia），允许跨页面/组件共享状态，其中的概念与 api 与 Pinia 保持一致，同时支持在 Mpx 组合式 API（Composition API）和选项式 API（Options API）模式下使用。")]),t._v(" "),s("h2",{attrs:{id:"介绍"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#介绍"}},[t._v("#")]),t._v(" 介绍")]),t._v(" "),s("p",[s("code",[t._v("pinia")]),t._v(" 是一个状态管理容器，可支持复杂场景下的组件通信机制，与"),s("code",[t._v("Vuex")]),t._v("状态管理不同之处在于：")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("mutations 不再存在，使用 actions 来支持应用中状态的同步和异步变更。")])]),t._v(" "),s("li",[s("p",[t._v("动态创建 store，使用"),s("code",[t._v("useStore")]),t._v("实现运行时动态创建 store。")])]),t._v(" "),s("li",[s("p",[t._v("扁平架构，不再有 modules 嵌套结构，支持不同 store 之间的交叉组合方式使用。")])])]),t._v(" "),s("h3",{attrs:{id:"创建-pinia"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#创建-pinia"}},[t._v("#")]),t._v(" 创建 pinia")]),t._v(" "),s("p",[t._v("首先在应用中调用"),s("code",[t._v("createPinia")]),t._v("方法来创建全局 pinia 实例。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPinia "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pinia "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPinia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果你的应用想使用 SSR 渲染模式，请将 pinia 的创建放在 "),s("code",[t._v("onAppInit")]),t._v(" 钩子中执行")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPinia "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onAppInit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pinia "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPinia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      pinia\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"创建-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#创建-store"}},[t._v("#")]),t._v(" 创建 store")]),t._v(" "),s("p",[t._v("然后调用"),s("code",[t._v("defineStore")]),t._v("方法，传入 store 唯一标识（id），来创建一个 store，支持 Setup 和 Options 两种风格的 store。")]),t._v(" "),s("h4",{attrs:{id:"setup-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setup-store"}},[t._v("#")]),t._v(" Setup store")]),t._v(" "),s("p",[t._v("与组合式 API 的 setup 函数类似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并返回一个带有我们想暴露出去的属性和方法的对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// setup.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" useSetupStore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setup'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pinia'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" myName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" myName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" increment "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在 Setup Store 中：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("ref()")]),t._v(" 就是 "),s("code",[t._v("state")]),t._v(" 属性")]),t._v(" "),s("li",[s("code",[t._v("computed()")]),t._v(" 就是 "),s("code",[t._v("getters")])]),t._v(" "),s("li",[s("code",[t._v("function()")]),t._v(" 就是 "),s("code",[t._v("actions")])])]),t._v(" "),s("h4",{attrs:{id:"options-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#options-store"}},[t._v("#")]),t._v(" Options store")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" useOptionsStore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'options'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("state")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pinia'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("myName")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$patch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"使用-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用-store"}},[t._v("#")]),t._v(" 使用 store")]),t._v(" "),s("p",[t._v("在选项式 API 中使用，如果你不能使用组合式 API，但你可以使用 "),s("code",[t._v("computed")]),t._v(", "),s("code",[t._v("methods")]),t._v(", '...'，那你可以使用 "),s("code",[t._v("mapState()")]),t._v(", "),s("code",[t._v("mapActions()")]),t._v(" 辅助函数\n来将 "),s("code",[t._v("state")]),t._v(", "),s("code",[t._v("getter")]),t._v(", "),s("code",[t._v("action")]),t._v(" 等映射到你的组件中。")]),t._v(" "),s("p",[t._v("无论是 optionsStore、还是 setupStore，我们都可以在选项式组件中使用，且使用方式并无差异，下方例子我们统一使用 useSetupStore 来作为示范例")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" storeToRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mapState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mapActions "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" useOptionsStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx/options'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" useSetupStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx/setup'")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 选项式API（Options API）风格下通过mapHelper函数使用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以访问组件中的 this.name")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此处与直接从 useSetupStore 中读取的数据相同")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("useSetupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以将state修改别名，例如将name 注册为 otherName")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("useSetupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("otherName")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以写一个函数来获取对 useSetupStore 的访问权")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("double")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("store")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以通过访问 `this` 拿到数据")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("magicValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("double\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在pinia中，getter 也是通过 mapState 来进行映射")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("useSetupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myName'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("useSetupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以将其注册问题 this.setupIncrement 方法")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("useSetupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("setupIncrement")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")]),t._v(" 在 "),s("code",[t._v("pinia")]),t._v(" 中，getter 也是通过 mapState 来进行映射")]),t._v(" "),s("p",[t._v("在组合式API (Setup API) 风格下使用")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" useSetupStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx/setup'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" storeToRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mapState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mapActions "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" setupStore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useSetupStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    setupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 作为 store 的一个属性，我们可以直接访问任何 getter(与 state )")]),t._v("\n    setupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("myName "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// pinia")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onIncrementClick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用 action 方法")]),t._v("\n      setupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'New Count:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" setupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      onIncrementClick"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("storeToRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("setupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注意：在组合式 API（Setup API）模式下，直接解构获取到的 store 数据会失去响应性，需要通过 storeToRefs 方法处理赋予数据响应性。另外"),s("code",[t._v("storeToRefs")]),t._v("方法只会返回 state 或 getter。")])]),t._v(" "),s("h2",{attrs:{id:"使用插件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用插件"}},[t._v("#")]),t._v(" 使用插件")]),t._v(" "),s("p",[t._v("Mpx pinia 支持使用插件扩展当前 store 实例的功能，用法如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// onStoreAction.js，订阅所有store实例的方法")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("onStoreAction")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$onAction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      after"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      onError\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("after")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("name")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("error")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'after'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onError")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("error")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'onError'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" error"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPinia "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" onStoreAction "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx/onStoreAction'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pinia "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPinia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\npinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("onStoreAction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/73.171571e4.js b/docs-vuepress/.vuepress/dist/assets/js/73.171571e4.js
new file mode 100644
index 0000000000..f3c230f734
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/73.171571e4.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[73],{423:function(t,a,s){"use strict";s.r(a);var e=s(4),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"跨平台"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨平台"}},[t._v("#")]),t._v(" 跨平台")]),t._v(" "),a("h2",{attrs:{id:"多平台支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#多平台支持"}},[t._v("#")]),t._v(" 多平台支持")]),t._v(" "),a("p",[t._v("Mpx支持在多个小程序平台中进行增强，目前支持的小程序平台包括微信，支付宝，百度，qq和头条，不过自2.0版本后，Mpx支持了以微信增强语法为base的跨平台输出，实现了一套业务源码在多端输出运行的能力，大大提升了多小程序平台业务的开发效率，详情可以查看"),a("a",{attrs:{href:"#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%BC%96%E8%AF%91"}},[t._v("跨平台编译")])]),t._v(" "),a("h3",{attrs:{id:"template增强特性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#template增强特性"}},[t._v("#")]),t._v(" template增强特性")]),t._v(" "),a("p",[t._v("不同平台上的模板增强指令按照平台的指令风格进行设计，文档和代码示例为了方便统一采用微信小程序下的书写方式。")]),t._v(" "),a("p",[t._v("模板增强指令对应表：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("增强指令")]),t._v(" "),a("th",[t._v("微信")]),t._v(" "),a("th",[t._v("支付宝")]),t._v(" "),a("th",[t._v("百度")]),t._v(" "),a("th",[t._v("qq")]),t._v(" "),a("th",[t._v("头条")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("双向绑定")]),t._v(" "),a("td",[t._v("wx:model")]),t._v(" "),a("td",[t._v("a:model")]),t._v(" "),a("td",[t._v("s-model")]),t._v(" "),a("td",[t._v("qq:model")]),t._v(" "),a("td",[t._v("tt:model")])]),t._v(" "),a("tr",[a("td",[t._v("双向绑定辅助属性")]),t._v(" "),a("td",[t._v("wx:model-prop")]),t._v(" "),a("td",[t._v("a:model-prop")]),t._v(" "),a("td",[t._v("s-model-prop")]),t._v(" "),a("td",[t._v("qq:model-prop")]),t._v(" "),a("td",[t._v("tt:model-prop")])]),t._v(" "),a("tr",[a("td",[t._v("双向绑定辅助属性")]),t._v(" "),a("td",[t._v("wx:model-event")]),t._v(" "),a("td",[t._v("a:model-event")]),t._v(" "),a("td",[t._v("s-model-event")]),t._v(" "),a("td",[t._v("qq:model-event")]),t._v(" "),a("td",[t._v("tt:model-event")])]),t._v(" "),a("tr",[a("td",[t._v("双向绑定辅助属性")]),t._v(" "),a("td",[t._v("wx:model-value-path")]),t._v(" "),a("td",[t._v("a:model-value-path")]),t._v(" "),a("td",[t._v("s-model-value-path")]),t._v(" "),a("td",[t._v("qq:model-value-path")]),t._v(" "),a("td",[t._v("tt:model-value-path")])]),t._v(" "),a("tr",[a("td",[t._v("双向绑定辅助属性")]),t._v(" "),a("td",[t._v("wx:model-filter")]),t._v(" "),a("td",[t._v("a:model-filter")]),t._v(" "),a("td",[t._v("s-model-filter")]),t._v(" "),a("td",[t._v("qq:model-filter")]),t._v(" "),a("td",[t._v("tt:model-filter")])]),t._v(" "),a("tr",[a("td",[t._v("动态样式绑定")]),t._v(" "),a("td",[t._v("wx:class")]),t._v(" "),a("td",[t._v("a:class")]),t._v(" "),a("td",[t._v("s-class")]),t._v(" "),a("td",[t._v("qq:class")]),t._v(" "),a("td",[t._v("暂不支持")])]),t._v(" "),a("tr",[a("td",[t._v("动态样式绑定")]),t._v(" "),a("td",[t._v("wx:style")]),t._v(" "),a("td",[t._v("a:style")]),t._v(" "),a("td",[t._v("s-style")]),t._v(" "),a("td",[t._v("qq:style")]),t._v(" "),a("td",[t._v("暂不支持")])]),t._v(" "),a("tr",[a("td",[t._v("获取节点/组件实例")]),t._v(" "),a("td",[t._v("wx:ref")]),t._v(" "),a("td",[t._v("a:ref")]),t._v(" "),a("td",[t._v("s-ref")]),t._v(" "),a("td",[t._v("qq:ref")]),t._v(" "),a("td",[t._v("tt:ref")])]),t._v(" "),a("tr",[a("td",[t._v("显示/隐藏")]),t._v(" "),a("td",[t._v("wx:show")]),t._v(" "),a("td",[t._v("a:show")]),t._v(" "),a("td",[t._v("s-show")]),t._v(" "),a("td",[t._v("qq:show")]),t._v(" "),a("td",[t._v("tt:show")])])])]),t._v(" "),a("h3",{attrs:{id:"script增强特性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#script增强特性"}},[t._v("#")]),t._v(" script增强特性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("增强字段")]),t._v(" "),a("th",[t._v("微信")]),t._v(" "),a("th",[t._v("支付宝")]),t._v(" "),a("th",[t._v("百度")]),t._v(" "),a("th",[t._v("qq")]),t._v(" "),a("th",[t._v("头条")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("computed")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("部分支持，无法作为props传递(待头条修复生命周期执行顺序可完整支持)")])]),t._v(" "),a("tr",[a("td",[t._v("watch")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",[t._v("mixins")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")])])])]),t._v(" "),a("h3",{attrs:{id:"style增强特性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#style增强特性"}},[t._v("#")]),t._v(" style增强特性")]),t._v(" "),a("p",[t._v("无平台差异")]),t._v(" "),a("h3",{attrs:{id:"json增强特性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#json增强特性"}},[t._v("#")]),t._v(" json增强特性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("增强字段")]),t._v(" "),a("th",[t._v("微信")]),t._v(" "),a("th",[t._v("支付宝")]),t._v(" "),a("th",[t._v("百度")]),t._v(" "),a("th",[t._v("qq")]),t._v(" "),a("th",[t._v("头条")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("packages")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("部分支持，无法分包")])])])]),t._v(" "),a("h2",{attrs:{id:"跨平台输出小程序"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨平台输出小程序"}},[t._v("#")]),t._v(" 跨平台输出小程序")]),t._v(" "),a("p",[t._v("自2.0版本开始，mpx开始支持跨小程序平台编译，不同于常规跨平台框架重新定义一套DSL的方式，mpx支持基于现有平台的源码编译为其他已支持平台的目标代码。跨平台编译能力依赖于mpx的多平台支持，目前mpx已经支持将微信小程序跨平台编译为支付宝、百度、qq和头条小程序。")]),t._v(" "),a("h3",{attrs:{id:"使用方法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用方法"}},[t._v("#")]),t._v(" 使用方法")]),t._v(" "),a("p",[t._v("如果你是使用"),a("code",[t._v("mpx init xxx")]),t._v("新生成的项目，package.json里script部分有"),a("code",[t._v("npm run build:cross")]),t._v("，直接执行"),a("code",[t._v("npm run build:cross")]),t._v("（watch同理），如果仅需构建某几个平台的，可以修改该script，按已有的格式删除或增添某些某些平台")]),t._v(" "),a("p",[t._v("如果你是自行搭建的mpx项目，你只需要进行简单的配置修改，打开项目的webpack配置，找到@mpxjs/webpack-plugin的声明位置，传入mode和srcMode参数即可，示例如下")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MpxwebpackPlugin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt|jd|web|ios|android)")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// srcMode为mpx编译的源码平台，目前仅支持wx   ")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("使用 @mpxjs/cli 创建的项目，可以通过在 "),a("code",[t._v("npm script")]),t._v(" 当中定义 "),a("code",[t._v("targets")]),t._v(" 来设置编译的目标平台")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 项目 package.json")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"script"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"build:cross"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpx-cli-service build --targets=wx,ali"')]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h3",{attrs:{id:"跨平台差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨平台差异抹平"}},[t._v("#")]),t._v(" 跨平台差异抹平")]),t._v(" "),a("p",[t._v("为了实现小程序的跨平台编译，我们在编译和运行时做了很多工作以抹平小程序开发中各个方面的跨平台差异")]),t._v(" "),a("h4",{attrs:{id:"模板语法差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#模板语法差异抹平"}},[t._v("#")]),t._v(" 模板语法差异抹平")]),t._v(" "),a("p",[t._v("对于通用指令/事件处理的差异，mpx提供了统一的编译转换抹平操作；而对于平台组件和组件属性的差异，我们也在力所能及的范围内进行了转换抹平，对于平台差异性过大无法转换的部分会在编译阶段报错指出。")]),t._v(" "),a("h4",{attrs:{id:"组件-页面对象差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件-页面对象差异抹平"}},[t._v("#")]),t._v(" 组件/页面对象差异抹平")]),t._v(" "),a("p",[t._v("不同平台间组件/页面对象的差异主要体现在生命周期上，我们在支持多平台能力时已经将不同平台的生命周期映射到mpx框架的一套内部生命周期中，基于这个统一的映射，不同平台的生命周期差异也得到了抹平。")]),t._v(" "),a("p",[t._v("此外，我们还进行了一系列运行时增强来模拟微信平台中提供而其他平台中未提供的能力，例如：")]),t._v(" "),a("ul",[a("li",[t._v("在支付宝组件实例中提供了this.triggerEvent方法模拟微信中的自定义组件事件；")]),t._v(" "),a("li",[t._v("提供了this.selectComponent/this.selectAllComponents方法模拟微信中获取子组件实例的能力；")]),t._v(" "),a("li",[t._v("重写了createSelectorQuery方法抹平了微信/支付宝平台间的使用差异；")]),t._v(" "),a("li",[t._v("转换抹平了微信/支付宝中properties定义的差异；")]),t._v(" "),a("li",[t._v("利用mpx本身的数据响应能力模拟了微信中的observers/property observer能力等;")]),t._v(" "),a("li",[t._v("提供了this.getRelationNodes方法并支持了微信中组件间关系relations的能力")])]),t._v(" "),a("p",[t._v("对于原生小程序组件的转换，还会进行一些额外的抹平，已兼容一些已有的原生组件库，例如：")]),t._v(" "),a("ul",[a("li",[t._v("将支付宝组件中的props数据挂载到this.data中以模拟微信平台中的表现；")]),t._v(" "),a("li",[t._v("利用mpx本身的mixins能力模拟微信中的behaviors能力。")])]),t._v(" "),a("p",[t._v("对于一些无法进行模拟的跨平台差异，会在运行时进行检测并报错指出，例如微信转支付宝时使用moved生命周期等。")]),t._v(" "),a("h4",{attrs:{id:"json配置差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#json配置差异抹平"}},[t._v("#")]),t._v(" json配置差异抹平")]),t._v(" "),a("p",[t._v("类似于模板语法，会在编译阶段进行转换抹平，无法转换的部分会在编译阶段报错指出。")]),t._v(" "),a("h4",{attrs:{id:"api调用差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#api调用差异抹平"}},[t._v("#")]),t._v(" api调用差异抹平")]),t._v(" "),a("p",[t._v("对于api调用，mpx提供了一个api调用代理插件来抹平跨平台api调用的差异，使用时需要在项目中安装使用"),a("code",[t._v("@mpxjs/api-proxy")]),t._v("，可以通过两种方式使用")]),t._v(" "),a("h4",{attrs:{id:"方式一-在调用小程序api时统一使用mpx对象进行调用-示例如下"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#方式一-在调用小程序api时统一使用mpx对象进行调用-示例如下"}},[t._v("#")]),t._v(" 方式一：在调用小程序api时统一使用mpx对象进行调用，示例如下：")]),t._v(" "),a("p",[t._v("安装插件支持options传入，options说明如下：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数名称")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("含义")]),t._v(" "),a("th",[t._v("是否必填")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("备注")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("s",[t._v("platform")])]),t._v(" "),a("td",[a("s",[t._v("Object")])]),t._v(" "),a("td",[a("s",[t._v("各平台之间的转换")])]),t._v(" "),a("td",[a("s",[t._v("否")])]),t._v(" "),a("td",[a("s",[t._v("{ from:'', to:'' }")])]),t._v(" "),a("td",[t._v("已删除")])]),t._v(" "),a("tr",[a("td",[t._v("usePromise")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("是否将 api 转化为 promise 格式使用")]),t._v(" "),a("td",[t._v("-")]),t._v(" "),a("td",[t._v("-")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[a("s",[t._v("exclude")])]),t._v(" "),a("td",[a("s",[t._v("Array(String)")])]),t._v(" "),a("td",[a("s",[t._v("跨平台时不需要转换的 api")])]),t._v(" "),a("td",[t._v("-")]),t._v(" "),a("td",[t._v("-")]),t._v(" "),a("td",[t._v("已删除")])]),t._v(" "),a("tr",[a("td",[t._v("whiteList")]),t._v(" "),a("td",[t._v("Array(String)")]),t._v(" "),a("td",[t._v("强行转化为 promise 格式的 api")]),t._v(" "),a("td",[t._v("否")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("需要 usePromise 设为 true")])]),t._v(" "),a("tr",[a("td",[t._v("blackList")]),t._v(" "),a("td",[t._v("Array(String)")]),t._v(" "),a("td",[t._v("不转换 promise 格式的 api")]),t._v(" "),a("td",[t._v("否")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("需要 usePromise 设为 true")])]),t._v(" "),a("tr",[a("td",[t._v("custom")]),t._v(" "),a("td",[t._v("Object")]),t._v(" "),a("td",[t._v("提供用户在各渠道下自定义api开放能力")]),t._v(" "),a("td",[t._v("否")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h4",{attrs:{id:"普通形式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#普通形式"}},[t._v("#")]),t._v(" 普通形式")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showModal")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'标题'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'这是一个弹窗'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cancel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'用户点击取消'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"使用promise形式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用promise形式"}},[t._v("#")]),t._v(" 使用promise形式")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePromise")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showActionSheet")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("itemList")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tapIndex"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"用户自定义"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#用户自定义"}},[t._v("#")]),t._v(" 用户自定义")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" scanCode "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@test/scanCode'")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("custom")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("web")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      scanCode\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在web下调用的实际是用户自定义部分的scanCode")]),t._v("\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("scanCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("onlyFromCamera")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'scanCode, success'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("fail")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'scanCode, fail'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"方式二-直接在-mpxjs-api-proxy导出想使用的方法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#方式二-直接在-mpxjs-api-proxy导出想使用的方法"}},[t._v("#")]),t._v(" 方式二：直接在"),a("code",[t._v("@mpxjs/api-proxy")]),t._v("导出想使用的方法")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 独立使用 支持treesharking能力")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" showModal "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showModal")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'标题'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'这是一个弹窗'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'弹框展示成功'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("对于无法转换抹平的api调用会在运行时阶段报错指出。")]),t._v(" "),a("h4",{attrs:{id:"webview-bridge差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#webview-bridge差异抹平"}},[t._v("#")]),t._v(" webview bridge差异抹平")]),t._v(" "),a("p",[t._v("Mpx支持小程序跨平台后，多个平台的小程序里都有webview组件，webview打开的页面和小程序可以通过API来通信以及调用一些小程序能力，但是各方webview提供的API是不一样的。")]),t._v(" "),a("p",[t._v("比如微信是用 wx.miniProgram.navigateTo 来跳转到别的小程序页面，而支付宝里是 my.navigateTo ，那么我们开发H5时候为了让H5能适应各家小程序平台就需要写多份对应逻辑。")]),t._v(" "),a("p",[t._v("为解决这个问题，Mpx提供了用于运行在小程序的webview里的H5抹平平台差异的bridge库：@mpxjs/webview-bridge")]),t._v(" "),a("p",[t._v("使用方式很简单，不过注意这个库是给H5用的，不是给小程序用的。在H5项目中引入。")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-webview",target:"_blank",rel:"noopener noreferrer"}},[t._v("使用示例"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("支持script标签引入和npm引入，标签引入的话，全局实例是mpx（npm模块使用下也鼓励import mpx from '@mpxjs/webview-birdge'），使用就例如 mpx.navigateTo ，能保持整个项目风格完全一致。")]),t._v(" "),a("p",[t._v("提供的API如下："),a("code",[t._v("navigateTo, navigateBack, switchTab, reLaunch, redirectTo, getEnv, postMessage, getLoadError")])]),t._v(" "),a("h2",{attrs:{id:"跨平台条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨平台条件编译"}},[t._v("#")]),t._v(" 跨平台条件编译")]),t._v(" "),a("p",[t._v("Mpx跨平台编译的原则在于，"),a("code",[t._v("能转则转，转不了则报错提示")]),t._v("，对于无法抹平差异的部分，我们提供了完善的跨平台条件编译机制便于用户处理因平台差异而无法相互转换的部分，也能够用于实现具有平台差异性的业务逻辑。")]),t._v(" "),a("p",[t._v("mpx中我们支持了三种维度的条件编译，分别是文件维度，区块维度和代码维度，其中，文件维度和区块维度主要用于处理一些大块的平台差异性逻辑，而代码维度主要用于处理一些局部简单的平台差异。")]),t._v(" "),a("h3",{attrs:{id:"文件维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文件维度条件编译"}},[t._v("#")]),t._v(" 文件维度条件编译")]),t._v(" "),a("p",[t._v("文件维度条件编译简单的来说就是文件为维度进行跨平台差异代码的编写，例如在微信->支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，这时你可以在相同的位置新建一个map.ali.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的mode来加载对应模块，当mode为ali时，会优先加载map.ali.mpx，反之则会加载map.mpx。")]),t._v(" "),a("p",[t._v("文件维度条件编译能够与webpack alias结合使用，对于npm包的文件我们并不方便在原本的文件位置创建.ali的条件编译文件，但我们可以通过webpack alias在相同位置创建一个"),a("code",[t._v("虚拟的")]),t._v(".ali文件，并将其指向项目中的其他文件位置。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对于npm包中的文件依赖")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" npmModule "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'somePackage/lib/index'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置以下alias后，当mode为ali时，会优先加载项目目录中定义的projectRoot/somePackage/lib/index文件")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n  module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resolve")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("alias")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'somePackage/lib/index.ali'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'projectRoot/somePackage/lib/index'")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"区块维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#区块维度条件编译"}},[t._v("#")]),t._v(" 区块维度条件编译")]),t._v(" "),a("p",[t._v("在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加"),a("code",[t._v("mode")]),t._v("属性定义该区块的目标平台即可，示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译mode为ali时使用如下区块--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--该区块中的所有代码需采用支付宝的技术标准进行编写--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("支付宝环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--其他编译mode时使用如下区块--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("其他环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"代码维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#代码维度条件编译"}},[t._v("#")]),t._v(" 代码维度条件编译")]),t._v(" "),a("p",[t._v("如果只有局部的代码存在跨平台差异，mpx同样支持在代码内使用if/else进行局部条件编译，用户可以在js代码和template插值中访问"),a("code",[t._v("__mpx_mode__")]),t._v("获取当前编译mode，进行平台差异逻辑编写，js代码中使用示例如下。")]),t._v(" "),a("p",[t._v("除了 "),a("code",[t._v("__mpx_mode__")]),t._v(" 这个默认插值以外，有别的环境变量需要的话可以在mpx.plugin.conf.js里通过defs进行配置。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__mpx_mode__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行支付宝环境相关逻辑")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行其他环境相关逻辑")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("template代码中使用示例如下")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--此处的__mpx_mode__不需要在组件中声明数据，编译时会基于当前编译mode进行替换--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'ali'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("支付宝环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("else")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("其他环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v('JSON中的条件编译（注意，这个依赖JSON的动态方案，得通过name="json"这种方式来编写，其实写的是js代码，最终module.exports导出一个可json化的对象即可）：')]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" __mpx_mode__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'main/xxx'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sub/xxx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/xxx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以为不同环境动态书写配置")]),t._v("\nmodule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usingComponents")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("aComponents")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../xxxxx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以打注释 xxx组件")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("样式的条件编译：")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n  @mpx-if (__mpx_env__ === 'someEvn')\n*/")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__mpx_mode__ === 'wx') */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" green"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n    @mpx-elif (__mpx_mode__ === 'qq')\n  */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" black"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__mpx_mode__ === 'swan') */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cyan"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".textSize")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 18px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n  @mpx-else\n*/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__mpx_mode__ === 'swan') */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" blue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-else */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n  @mpx-endif\n*/")]),t._v("\n")])])]),a("h3",{attrs:{id:"属性维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#属性维度条件编译"}},[t._v("#")]),t._v(" 属性维度条件编译")]),t._v(" "),a("p",[t._v("属性维度条件编译允许用户在组件上使用 "),a("code",[t._v("@")]),t._v(" 和 "),a("code",[t._v("|")]),t._v(" 符号来指定某个节点或属性只在某些平台下有效。")]),t._v(" "),a("p",[t._v("对于同一个 button 组件，微信小程序支持 "),a("code",[t._v('open-type="getUserInfo"')]),t._v("，但是支付宝小程序支持 "),a("code",[t._v('open-type="getAuthorize"')]),t._v("。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。")]),t._v(" "),a("p",[t._v("比如业务中需要通过 button 按钮获取用户信息，虽然可以使用代码维度条件编译来解决，但是增加了很多代码量：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'wx' || __mpx_mode__ === 'swan'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindgetuserinfo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("elif")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'ali'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getAuthorize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scope")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("userInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("而用属性维度的编译则方便很多：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type@wx|swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindgetuserinfo@wx|swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getAuthorize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scope@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("userInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("属性维度的编译也可以对整个节点进行条件编译，例如只想在支付宝小程序中输出某个节点：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is view"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("需要注意使用上述用法时，节点自身在构建时框架不会对节点属性进行平台语法转换，但对于其子节点，框架并不会继承父级节点 mode，会进行正常跨平台语法转换。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--错误示例--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n// srcMode 为 wx 跨端输出 ali 结果为\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("上述示例为错误写法，假如srcMode为微信小程序，用上述写法构建输出支付宝小程序时，父节点 bindtap 不会被转为 onTap，在支付宝平台执行时事件会无响应。")]),t._v(" "),a("p",[t._v("正确写法如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--正确示例--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n// 输出 ali 产物\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("有时开发者期望使用 @ali 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--srcMode为 wx，输出 ali 时，bindtap 会被正常转换为 onTap--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@_ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。")]),t._v(" "),a("p",[t._v("有时候我们不仅需要对节点属性进行条件编译，可能还需要对节点标签进行条件编译。")]),t._v(" "),a("p",[t._v("为此，我们支持了一个特殊属性 "),a("code",[t._v("mpxTagName")]),t._v("，如果节点存在这个属性，我们会在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mpxTagName@swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cover-view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("will be cover-view in swan"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"use-env"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-env"}},[t._v("#")]),t._v(" 通过 env 实现自定义目标环境的条件编译 ")]),t._v(" "),a("p",[t._v("Mpx 支持在以上四种条件编译的基础上，通过自定义 env 的形式实现在不同环境下编译产出不同的代码。")]),t._v(" "),a("p",[t._v("实例化 MpxWebpackPlugin 的时候，传入配置 env。")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// srcMode为mpx编译的源码平台，目前仅支持wx")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("env")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"didi"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// env为mpx编译的目标环境，需自定义")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"文件维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文件维度条件编译-2"}},[t._v("#")]),t._v(" 文件维度条件编译")]),t._v(" "),a("p",[t._v("微信转支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，而且这个地图组件在不同的目标环境中也有很大的差异，这时你可以在相同的位置新建一个 map.ali.didi.mpx 或 map.ali.qingju.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的 mode 和 env 来加载对应模块，当 mode 为 ali，env 为 didi 时，会优先加载 map.ali.didi.mpx、map.ali.mpx，如果没有定义 env，则会优先加载 map.ali.mpx，反之则会加载 map.mpx。")]),t._v(" "),a("h4",{attrs:{id:"区块维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#区块维度条件编译-2"}},[t._v("#")]),t._v(" 区块维度条件编译")]),t._v(" "),a("p",[t._v("在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加"),a("code",[t._v("mode")]),t._v("或"),a("code",[t._v("env")]),t._v("属性定义该区块的目标平台即可，示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译mode为ali且env为didi时使用如下区块，优先级最高是4--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("env")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("didi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译mode为ali时使用如下区块，优先级是3--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译env为didi时使用如下区块，优先级是2--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("env")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("didi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--其他环境，优先级是1--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("注意，如果多个相同的区块写相同的 mode 和 env，默认会用最后一个，如：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块会被忽略"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("默认会用这个区块"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h4",{attrs:{id:"代码维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#代码维度条件编译-2"}},[t._v("#")]),t._v(" 代码维度条件编译")]),t._v(" "),a("p",[t._v("如果在 MpxWebpackPlugin 插件初始化时自定义了 env，你可以访问"),a("code",[t._v("__mpx_env__")]),t._v("获取当前编译env，进行环境差异逻辑编写。使用方法与"),a("code",[t._v("__mpx_mode__")]),t._v("相同。")]),t._v(" "),a("h4",{attrs:{id:"属性维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#属性维度条件编译-2"}},[t._v("#")]),t._v(" 属性维度条件编译")]),t._v(" "),a("p",[t._v("env 属性维度条件编译与 mode 的用法大致相同，使用 "),a("code",[t._v(":")]),t._v(" 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 "),a("code",[t._v("attr@mode:env:env|mode:env")]),t._v("，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 "),a("code",[t._v(":")]),t._v(" 前缀，形如 "),a("code",[t._v("attr@:env")]),t._v("。")]),t._v(" "),a("p",[t._v("对于同一个 button 组件，微信小程序支持 "),a("code",[t._v('open-type="getUserInfo"')]),t._v("，但是支付宝小程序支持 "),a("code",[t._v('open-type="getAuthorize"')]),t._v("。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。")]),t._v(" "),a("p",[t._v("如果当前编译的目标平台是 wx，以下写法 open-type 属性将被忽略")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@swan:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如果当前 env 不是 didi，以下写法 open-type 属性也会被忽略")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如果只想在 mode 为 wx 且 env 为 didi 或 qingju 的环境下使用 open-type 属性，则可以这样写：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@wx:")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("didi:")]),t._v("qingju")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("env 属性维度的编译同样支持对整个节点或者节点标签名进行条件编译：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mpxTagName@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cover-view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("@:")]),t._v("didi")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bindtap@:")]),t._v("didi")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"其他注意事项"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#其他注意事项"}},[t._v("#")]),t._v(" 其他注意事项")]),t._v(" "),a("ul",[a("li",[t._v("当目标平台为支付宝时，需要启用支付宝最新的component2编译才能保障框架正常工作，关于component2"),a("a",{attrs:{href:"https://docs.alipay.com/mini/framework/custom-component-overview",target:"_blank",rel:"noopener noreferrer"}},[t._v("点此查看详情"),a("OutboundLink")],1),t._v("；")]),t._v(" "),a("li",[t._v("跨平台源码中自定义组件的标签名不能使用驼峰形式"),a("code",[t._v("myComponent")]),t._v("，请使用横杠形式"),a("code",[t._v("my-component")]),t._v("来书写；")]),t._v(" "),a("li",[t._v("生成的目标代码中文件名和文件夹名不能带有"),a("code",[t._v("@")]),t._v("符号，目前媒体文件和原生自定义组件在编译时不会修改文件名，需要重点关注。")])]),t._v(" "),a("h2",{attrs:{id:"跨平台输出web"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨平台输出web"}},[t._v("#")]),t._v(" 跨平台输出web")]),t._v(" "),a("p",[t._v("从2.3.0版本开始，Mpx开始支持将已有项目跨平台输出web平台中运行的能力，目前输出web能力完备，能够支持直接转换大型复杂项目，我们会持续对输出web的能力进行优化，不断的建全更全面的适用范围和开发体验。")]),t._v(" "),a("h3",{attrs:{id:"技术实现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#技术实现"}},[t._v("#")]),t._v(" 技术实现")]),t._v(" "),a("p",[t._v("与小程序平台间的差异相比，web平台和小程序平台间的差异要大很多，小程序相当于是基于web技术的上层封装，所以不同于我们跨平台输出其他小程序平台时以编译转换为主的思路，在输出web时，我们更多地采用了封装的方式来抹平组件/Api和底层环境的差异，与当前大部分的跨平台框架相仿。但与当前大部分跨平台框架以web MVVM框架为base输出到小程序上运行的思路不同，我们是以Mpx小程序增强语法为基础输出到web中运行，前面说过小程序本身是基于web技术进行的实现，小程序->web的转换在可行性和兼容性上会好一些。")]),t._v(" "),a("p",[t._v("在具体实现上，Mpx项目输出到web中运行时在组件化和路由层面都是基于Vue生态实现，所以可以将Mpx的跨端输出产物整合到既有的Vue项目中，或者在条件编译中直接使用Vue语法进行web端的实现。")]),t._v(" "),a("h3",{attrs:{id:"使用方法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用方法"}},[t._v("#")]),t._v(" 使用方法")]),t._v(" "),a("p",[t._v("使用@mpxjs/cli创建新项目时选择跨平台并选择输出web后，即可生成可输出web的示例项目，运行"),a("code",[t._v("npm run build:web")]),t._v("，就会在dist/web下输出构建后的web项目，并启动静态服务预览运行。")]),t._v(" "),a("h3",{attrs:{id:"支持范围"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#支持范围"}},[t._v("#")]),t._v(" 支持范围")]),t._v(" "),a("p",[t._v("目前对输出web的通用能力支持已经非常完备，下列表格中显示了当前版本中已支持的能力范围")]),t._v(" "),a("h4",{attrs:{id:"模板指令"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#模板指令"}},[t._v("#")]),t._v(" 模板指令")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("指令名称")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("Mustache数据绑定")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:for")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:for-item")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:for-index")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:key")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:if")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:elif")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:else")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:model")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:model-prop")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:model-event")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:model-value-path")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:model-filter")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:class")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:style")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:ref")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:show")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("h4",{attrs:{id:"事件绑定方式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#事件绑定方式"}},[t._v("#")]),t._v(" 事件绑定方式")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("绑定方式")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("bind")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("catch")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("capture-bind")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("capture-catch")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("h4",{attrs:{id:"事件名称"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#事件名称"}},[t._v("#")]),t._v(" 事件名称")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("事件名称")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("tap")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("longpress")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("longtap")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("p",[t._v("web同名事件默认全部支持，已支持组件的特殊事件默认为支持，不支持的情况下会在编译时抛出异常")]),t._v(" "),a("h4",{attrs:{id:"基础组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#基础组件"}},[t._v("#")]),t._v(" 基础组件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("组件名称")]),t._v(" "),a("th",[t._v("是否支持")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("audio")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("block")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("button")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("canvas")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("checkbox")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("checkbox-group")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("cover-view")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("form")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("image")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("input")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("movable-area")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("movable-view")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("navigator")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("picker")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("picker-view")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("progress")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("radio")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("radio-group")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("rich-text")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("scroll-view")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td",[t._v("scroll-view 输出 web 底层滚动依赖 "),a("a",{attrs:{href:"https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("BetterScroll"),a("OutboundLink")],1),t._v(" 实现，支持额外传入以下属性： "),a("br"),a("br"),a("code",[t._v("scroll-options")]),t._v(": object "),a("br"),t._v("可重写 BetterScroll 初始化基本配置"),a("br"),t._v("若出现无法滚动，可尝试手动传入 "),a("code",[t._v("{ observeDOM: true }")]),t._v(" "),a("br"),a("br"),t._v(" "),a("code",[t._v("update-refresh")]),t._v(": boolean "),a("br"),t._v("Vue updated 钩子函数触发时，可用于重新计算 BetterScroll"),a("br"),a("br"),t._v("tips: 当使用下拉刷新相关属性时，由于 Vue 数据响应机制的限制，在 web 侧可能出现下拉组件状态无法复原的问题，可尝试在 "),a("code",[t._v("refresherrefresh")]),t._v(" 事件中，手动将 refresher-triggered 属性值设置为 true")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("swiper")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td",[t._v("swiper 输出 web 底层滚动依赖 "),a("a",{attrs:{href:"https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("BetterScroll"),a("OutboundLink")],1),t._v(" 实现，支持额外传入以下属性： "),a("br"),a("br"),a("code",[t._v("scroll-options")]),t._v(": object "),a("br"),t._v("可重写 BetterScroll 初始化基本配置"),a("br"),t._v("当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 "),a("code",[t._v("{ eventPassthrough: vertical }")]),t._v("，反之可将 eventPassthrough 设置为 "),a("code",[t._v("horizontal")])])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("swiper-item")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("switch")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("slider")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("text")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("textarea")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("video")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("view")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("web-view")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")])])]),t._v(" "),a("p",[t._v('在项目的app.json 中配置 "style": "v2"启用新版的组件样式，涉及的组件有 button icon radio checkbox switch slider在输出web时也与小程序保持了一致')]),t._v(" "),a("h4",{attrs:{id:"生命周期"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#生命周期"}},[t._v("#")]),t._v(" 生命周期")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("生命周期名称")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onLaunch")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onReady")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onUnload")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onError")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("p",[t._v("onServerPrefetch｜是\ncreated|是\nattached|是\nready|是\ndetached|是\nupdated|是\nserverPrefetch|是")]),t._v(" "),a("h4",{attrs:{id:"应用级事件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#应用级事件"}},[t._v("#")]),t._v(" 应用级事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("应用级事件名称")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPageNotFound")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("h4",{attrs:{id:"组件配置"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件配置"}},[t._v("#")]),t._v(" 组件配置")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("配置项")]),t._v(" "),a("th",[t._v("支持度")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("properties")]),t._v(" "),a("td",[t._v("部分支持，observer不支持，请使用watch代替")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("data")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("watch")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("computed")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("relations")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("methods")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("mixins")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("pageLifetimes")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("observers")]),t._v(" "),a("td",[t._v("不支持，请使用watch代替")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("behaviors")]),t._v(" "),a("td",[t._v("不支持，请使用mixins代替")])])])]),t._v(" "),a("h4",{attrs:{id:"组件api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件api"}},[t._v("#")]),t._v(" 组件API")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("api名称")]),t._v(" "),a("th",[t._v("支持度")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("triggerEvent")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("$nextTick")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("createSelectorQuery/selectComponent")]),t._v(" "),a("td",[t._v("支持")])])])]),t._v(" "),a("h4",{attrs:{id:"全局api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#全局api"}},[t._v("#")]),t._v(" 全局API")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("api名称")]),t._v(" "),a("th",[t._v("支持度")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("navigateTo")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("navigateBack")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("redirectTo")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("request")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("connectSocket")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("SocketTask")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("EventChannel")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("createSelectorQuery")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("base64ToArrayBuffer")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("arrayBufferToBase64")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("nextTick")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("set")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("setNavigationBarTitle")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("setNavigationBarColor")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("setStorage")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("setStorageSync")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("getStorage")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("getStorageSync")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("getStorageInfo")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("getStorageInfoSync")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("removeStorage")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("removeStorageSync")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("clearStorage")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("clearStorageSync")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("getSystemInfo")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("getSystemInfoSync")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("showModal")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("showToast")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("hideToast")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("showLoading")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("hideLoading")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onWindowResize")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("offWindowResize")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("createAnimation")]),t._v(" "),a("td",[t._v("支持")])])])]),t._v(" "),a("h4",{attrs:{id:"json配置"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#json配置"}},[t._v("#")]),t._v(" JSON配置")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("配置项")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("backgroundColor")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("backgroundTextStyle")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("disableScroll")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("enablePullDownRefresh")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottomDistance")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("packages")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("pages")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("navigationBarBackgroundColor")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("navigationBarTextStyle")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("navigationBarTitleText")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("networkTimeout")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("subpackages")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("tabBar")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("usingComponents")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("h4",{attrs:{id:"拓展能力"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#拓展能力"}},[t._v("#")]),t._v(" 拓展能力")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("能力")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("fetch")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("i18n")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("h4",{attrs:{id:"小程序其他原生能力"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#小程序其他原生能力"}},[t._v("#")]),t._v(" 小程序其他原生能力")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("能力")]),t._v(" "),a("th",[t._v("支持度")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wxs")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("animation")]),t._v(" "),a("td",[t._v("支持组件的animation属性，支持所有animation对象方法(export、step、width、height、rotate、scale、skew、translate等等)")])])])])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/74.3d5cfaba.js b/docs-vuepress/.vuepress/dist/assets/js/74.3d5cfaba.js
new file mode 100644
index 0000000000..e4eb2e5f52
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/74.3d5cfaba.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[74],{420:function(s,t,a){"use strict";a.r(t);var n=a(4),e=Object(n.a)({},(function(){var s=this,t=s._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h1",{attrs:{id:"小程序插件"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#小程序插件"}},[s._v("#")]),s._v(" 小程序插件")]),s._v(" "),t("p",[s._v("插件，是可被添加到小程序内直接使用的功能组件，是对一组 js 接口、自定义组件或页面的封装，。开发者可以像开发小程序一样开发一个插件，供其他小程序使用。同时，小程序开发者可直接在小程序内使用插件，无需重复开发，但是在使用第三那个插件时，无法看到插件的代码。插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用。")]),s._v(" "),t("p",[s._v("开发小程序插件，大致要经过 开通插件功能，填写开发信息，提交审,发布，管理插件使用申请。同时在原生小程序使用插件，要先发出插件申请，等待使用申请通过，插件所有者还可以进行拒绝。\n原生小程序开发插件请移步：")]),s._v(" "),t("ul",[t("li",[t("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html",target:"_blank",rel:"noopener noreferrer"}},[s._v("微信小程序插件开发"),t("OutboundLink")],1)]),s._v(" "),t("li",[t("a",{attrs:{href:"https://opendocs.alipay.com/mini/plugin/create-plugin",target:"_blank",rel:"noopener noreferrer"}},[s._v("支付宝小程序插件开发"),t("OutboundLink")],1)])]),s._v(" "),t("p",[s._v("新建插件类型的项目后，如果创建示例项目，则项目中将包含三个目录：")]),s._v(" "),t("ul",[t("li",[s._v("plugin 目录：插件代码目录。")]),s._v(" "),t("li",[s._v("miniprogram 目录：放置一个小程序，用于调试插件。")]),s._v(" "),t("li",[s._v("doc 目录：用于放置插件开发文档。")])]),s._v(" "),t("p",[s._v("，插件会同时有多个线上版本，由使用插件的小程序决定具体使用的版本号。")]),s._v(" "),t("h3",{attrs:{id:"如何编写一个插件"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#如何编写一个插件"}},[s._v("#")]),s._v(" 如何编写一个插件")]),s._v(" "),t("p",[s._v("推荐使用 mpx 官方脚手架 @mpxjs/cli 创建一个小程序插件项目来快速的进入插件开发阶段，首先全局安装 @mpxjs/cli")]),s._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[s._v("npm")]),s._v(" i "),t("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-g")]),s._v(" @mpxjs/cli\n")])])]),t("p",[s._v("然后使用 cli 初始化项目")]),s._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[s._v("mpx create "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),s._v("project-name"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),s._v("\n? 请选择小程序项目所属平台（目前仅微信下支持跨平台输出） wx\n? 是否需要跨小程序平台 No\n? 是否需要使用小程序云开发能力 No\n? 是否是个插件项目?（不清楚请选 No ！什么是插件项目请看微信官方文档！） Yes\n? 是否需要typescript No\n? 项目描述 A mpx project\n? 请输入小程序的Appid touristappid\n")])])]),t("p",[t("strong",[s._v("文件目录")])]),s._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v("  src\n  |-- miniprogram // 目录：放置一个小程序，用于调试插件。\n  |   --pages\n  |   --app.mpx // 引入插件调试\n  |-- plugin // 目录：插件代码目录\n  |   --components // 插件组件\n  |     -- list.mpx // 插件提供的列表组件\n  |   --plugin.json // 插件配置文件\n")])])]),t("p",[s._v("我们在 plugin/components/list.mpx 中开发插件中的列表组件，开发完成后，在plugin.json中我们向使用者小程序开放的所有自定义组件、页面和 js 接口，格式如下：")]),s._v(" "),t("p",[t("strong",[s._v("代码示例：")])]),s._v(" "),t("div",{staticClass:"language-html extra-class"},[t("pre",{pre:!0,attrs:{class:"language-html"}},[t("code",[s._v('{\n  "publicComponents": {\n    "list": "./components/list" // 使用mpx 中的webpack 路径引入规范\n  },\n  "pages": {\n    "hello-page": "./pages/hello-page"\n  }\n}\n')])])]),t("p",[s._v("运行 "),t("strong",[s._v("npm run build/serve")]),s._v(" 构建小程序产物，在 dist 文件夹下，生成最终的小程序插件产物，使用微信开发者工具，打开代码片段菜单栏，选择插件模式，打开 dist 文件夹。")]),s._v(" "),t("p",[s._v("我们可以像小程序一样预览和上传，但插件没有体验版，同时我们通常将 miniprogram 下的代码当做使用插件的小程序代码，来进行插件的调试和测试。")]),s._v(" "),t("p",[s._v("在开发完插件之后，我们可以上传插件代码，在小程序管理后台进行提交发布审核，审核通过后，就可以提供给第三方小程序使用我们的插件了。")]),s._v(" "),t("p",[s._v("使用 mpx 开发插件的优势相似于使用 mpx 开发小程序项目，可以使用 mpx 的各种增强特性以及跨平台输出的特性，提高开发效率和插件性能。")])])}),[],!1,null,null,null);t.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/75.093d716c.js b/docs-vuepress/.vuepress/dist/assets/js/75.093d716c.js
new file mode 100644
index 0000000000..3f59514094
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/75.093d716c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[75],{464:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"原生渐进迁移"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原生渐进迁移"}},[t._v("#")]),t._v(" 原生渐进迁移")]),t._v(" "),s("p",[s("strong",[t._v("已有项目")]),t._v(" 期望接入 Mpx，可根据项目或人力情况选择如何迁移，Mpx 不要求用户一次性用上框架的所有东西。")]),t._v(" "),s("ol",[s("li",[t._v("项目初始期：可以考虑一次性转为 Mpx，此时迁移成本比较低")]),t._v(" "),s("li",[t._v("项目成熟期：若人力有限，可选择逐步将原生小程序转为Mpx，而且 "),s("strong",[s("code",[t._v("不需要对原有代码做全局重写")])]),t._v("。可参考此demo："),s("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-progressive",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx渐进接入demo"),s("OutboundLink")],1),t._v("。\n"),s("ul",[s("li",[t._v("可以保持原有代码不变，新的组件、页面期望使用 Mpx 某些特性时才引入 Mpx。（推荐新模块引 Mpx，老模块逐步迁移 Mpx）")]),t._v(" "),s("li",[t._v("用 Mpx 编写新的页面、组件，再局部导出对应的页面、组件，反向应用到现有的原生小程序项目中。见"),s("a",{attrs:{href:"#%E5%AF%BC%E5%87%BA%E5%8E%9F%E7%94%9F"}},[t._v("导出原生")]),t._v("一节。(建议优先考虑老项目渐进改为 Mpx，而不是反向 Mpx 输出原生小程序的模式)")])])])]),t._v(" "),s("h2",{attrs:{id:"原生接入"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原生接入"}},[t._v("#")]),t._v(" 原生接入")]),t._v(" "),s("p",[t._v("有些时候，我们需要在"),s("code",[t._v("Mpx")]),t._v("工程中使用原生小程序组件:")]),t._v(" "),s("ul",[s("li",[t._v("通过"),s("code",[t._v("npm")]),t._v("引用安装第三包")]),t._v(" "),s("li",[t._v("将第三方包源码拷贝到本地"),s("code",[t._v("src")]),t._v("目录下")])]),t._v(" "),s("blockquote",[s("p",[t._v("注：Mpx并不限制第三方包的格式。开发者可以自己参考小程序官方的"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/trdparty.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("开发第三方自定义组件"),s("OutboundLink")],1)])]),t._v(" "),s("h3",{attrs:{id:"原理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原理"}},[t._v("#")]),t._v(" 原理")]),t._v(" "),s("p",[t._v("根据"),s("code",[t._v("unsingComponents")]),t._v("中设定的路径，"),s("code",[t._v("Mpx")]),t._v("会去查找包入口的js文件。然后提取入口文件所在的"),s("strong",[t._v("目录")]),t._v("中的"),s("code",[t._v("js")]),t._v(" "),s("code",[t._v("json")]),t._v(" "),s("code",[t._v("wxss")]),t._v(" "),s("code",[t._v("wxml")]),t._v("进行编译")]),t._v(" "),s("p",[t._v("编译带来的好处是，常规的拷贝操作，会造成组件内部的依赖缺失，以及冗余代码被打包。而执行了编译，使得"),s("code",[t._v("Mpx")]),t._v("可以精确的收集依赖，这表现在：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("js")]),t._v("文件中的依赖也会被打包，没有被加载的依赖库不会打包，减小体积")]),t._v(" "),s("li",[s("code",[t._v("json")]),t._v("文件的"),s("code",[t._v("usingComponents")]),t._v("会被解析，因此原生组件内部可以再引用其他原生组件，甚至是mpx组件")]),t._v(" "),s("li",[s("code",[t._v("wxss")]),t._v("中引用外部样式")]),t._v(" "),s("li",[s("code",[t._v("wxml")]),t._v("中的图片资源会被打包")])]),t._v(" "),s("blockquote",[s("p",[t._v("例如:使用第三方组件库时，很多组件可能并未使用，如果按照官方给出的组件库使用方式，会将整个组件库放进项目。"),s("br"),t._v("\n而采用Mpx这种方式则只会引入使用了的组件，所以如果你喜欢vant的按钮，iview的输入框，ColorUI的布局，欢迎尝试mpx。"),s("br"),t._v("\n（本段内容具有时效性，未来微信可能会有优化，毕竟一开始微信连npm都不支持）")])]),t._v(" "),s("h3",{attrs:{id:"例子"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#例子"}},[t._v("#")]),t._v(" 例子")]),t._v(" "),s("p",[s("strong",[t._v("文件目录")])]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("node_modules\n|-- npm-a-wx-component // npm安装\n|   --package.json\n|   --src\n|     --index.js\n|     --index.json\n|     --index.wxss\n|     --index.wxml\n|-- npm-b-wx-component // npm安装\n|   --package.json\n|   --src\n|     --index.js\n|     --index.json\n|     --index.wxss\n|     --index.wxml\ncomponent\n│-- container.mpx \n│-- com-a.mpx \n|-- src-wx-component // 手动拷贝\n|  --index.js\n|  --index.json\n|  --index.wxss\n|  --index.wxml\n\n")])])]),s("p",[s("strong",[t._v("container.mpx")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx组件 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("com-a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("com-a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- npm安装的原生组件 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("npm-a-wx-component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("npm-a-wx-component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 手动拷贝到工程的原生组件 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("src-wx-component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("src-wx-component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"com-a"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./com-a"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"npm-a-wx-component"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"npm-a-wx-component"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"src-wx-component"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./src-wx-component"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("strong",[t._v("node_modules/npm-a-wx-component/src/index.wxml")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a native component"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 原生组件内部使用原生组件 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("npm-b-wx-component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("npm-b-wx-component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("strong",[t._v("node_modules/npm-a-wx-component/src/index.json")])]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"npm-b-wx-component"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"npm-b-wx-component"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"原生page支持"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原生page支持"}},[t._v("#")]),t._v(" 原生page支持")]),t._v(" "),s("p",[t._v("原生自定义组件的支持已经基本能保证第三方 UI 库和 Mpx 的完美结合，但如果是用户存在已经开发好的小程序，在后续的迭代中发现了 Mpx 想使用，就需要用户手工将4个文件变成 Mpx 文件，这不够友好。")]),t._v(" "),s("p",[t._v("Mpx 提供了对原生页面的支持，允许项目中存在原生小程序文件（wxml,js,json,wxss）和 Mpx 文件，两者可以混合使用，通过 webpack 的构建将两者完美混合在一起生成最终的 dist。")]),t._v(" "),s("p",[t._v("使用方式和组件相似。")]),t._v(" "),s("h2",{attrs:{id:"原生导出"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原生导出"}},[t._v("#")]),t._v(" 原生导出")]),t._v(" "),s("p",[t._v("通过导出原生能力，你可以将一个 Mpx 项目融回到原生小程序项目中。有两种做法：")]),t._v(" "),s("ul",[s("li",[t._v("一是局部导出部分页面、组件")]),t._v(" "),s("li",[t._v("二是完整导出一个 Mpx 项目。")])]),t._v(" "),s("h3",{attrs:{id:"导出部分页面-组件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#导出部分页面-组件"}},[t._v("#")]),t._v(" 导出部分页面/组件")]),t._v(" "),s("p",[t._v("使用 Mpx 开发的页面/组件也可以局部导出为纯粹的普通的原生小程序页面/组件，整合到已有的原生小程序中。")]),t._v(" "),s("ol",[s("li",[t._v("修改 webpack config 中 entry 一项，将 app 改为对应的页面/组件即可。")])]),t._v(" "),s("p",[t._v("在路径后追加 ?isPage 来声明独立页面构建，构建产物为该页面的独立原生代码,在路径后追加 ?isComponent 来声明独立组件构建，构建产物为该组件的独立原生代码。")]),t._v(" "),s("p",[t._v("请参考下面的例子，"),s("code",[t._v("注意resolve时候最后的query不可以省略，一定要按正确的类型声明这是一个组件or页面。")])]),t._v(" "),s("p",[t._v("例子：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseWebpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'main-compile'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// entry point of our application")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此处以mpx脚手架生成的项目为例")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// before")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app: resolveSrc('app.mpx')")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// after，这里"pages/dindex"代表将原页面导出到output目录下的pages目录，文件名改为dindex.*')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'pages/dindex'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolveSrc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./pages/index.mpx?isPage'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ?后标识导出类型")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'components/dlist'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolveSrc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./components/list.mpx?isComponent'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ol",{attrs:{start:"2"}},[s("li",[t._v("执行 webpack 打包命令")]),t._v(" "),s("li",[t._v("拷贝打包后 dist 里所有文件到原生微信小程序项目根目录即可正常工作。")])]),t._v(" "),s("h3",{attrs:{id:"完整导出"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#完整导出"}},[t._v("#")]),t._v(" 完整导出")]),t._v(" "),s("p",[t._v("举例：假如我们使用 Mpx 开发了一个完整的项目，这个项目可能包含多个页面，这些页面组合完成一个完整的功能。一般可能是公共需求，比如登录/用户中心等公共模块")]),t._v(" "),s("p",[t._v("如果其它接入方想复用这一公共模块，考虑有以下两种情形")]),t._v(" "),s("ul",[s("li",[t._v("接入方也是 Mpx 框架开发的项目，直接迁移")]),t._v(" "),s("li",[t._v("接入方是原生开发，这时我们希望能将整个项目完整导出成原生，并让接入方顺利使用。")])]),t._v(" "),s("blockquote",[s("p",[t._v("其实观察下 Mpx 项目的打包结构，结构是非常简单的，页面/组件都很规矩地放在对应文件夹里的，所以删掉app.json/app.js/app.wxss/project.config.json几个文件后直接整个拷贝即可。")])]),t._v(" "),s("p",[t._v("完整导出整个项目的做法可以是这样：")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("确认页面路径不要冲突，一般这种公共模块项目，路径上就不要占据"),s("code",[t._v("/pages/index/index")]),t._v("，页面路径Mpx是不会修改的，所以定一个"),s("code",[t._v("/pages/{模块名}/{页面名}")]),t._v("就好。")])]),t._v(" "),s("li",[s("p",[t._v("app.*的内容都要删掉的，所以全局样式都应该写在独立的文件中（wxss），全局配置有什么特殊的要告知接入方（json），因为App.js会被舍弃，所以入口js要抽出来(js)。")])]),t._v(" "),s("li",[s("p",[t._v("如果有要导出的入口文件，需要给output增加配置：")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.conf")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("app")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolveSrc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("index")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolveSrc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 导出的入口文件，若没有可不写")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("output")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("libraryTarget")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commonjs2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("libraryExport")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 若export default导出需要写这个,module.exports可省略")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ... 略")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ol",{attrs:{start:"4"}},[s("li",[t._v("整个复制进"),s("strong",[t._v("接入方")]),t._v("的项目里，注册对应的页面，然后就可以正常使用了！")])])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/76.50d84c61.js b/docs-vuepress/.vuepress/dist/assets/js/76.50d84c61.js
new file mode 100644
index 0000000000..59d46f5a8a
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/76.50d84c61.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[76],{424:function(t,s,a){"use strict";a.r(s);var n=a(4),r=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"依赖注入-provide-inject"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#依赖注入-provide-inject"}},[t._v("#")]),t._v(" 依赖注入（Provide/Inject）")]),t._v(" "),s("h2",{attrs:{id:"适用场景"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#适用场景"}},[t._v("#")]),t._v(" 适用场景")]),t._v(" "),s("p",[t._v("通常情况下，从父组件向子组件传递数据时，我们会使用 props 向下传递。如果在一颗组件层级嵌套很深的组件树中，某个深层的子组件依赖一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链路逐级传递下去，这就是 "),s("strong",[t._v("prop 逐级透传（prop-drilling）")]),t._v(" 问题。")]),t._v(" "),s("p",[t._v("使用 "),s("code",[t._v("provide")]),t._v(" 和 "),s("code",[t._v("inject")]),t._v(" 可以帮助我们解决这一麻烦问题：一个父组件相对于其所有的后代组件，会作为"),s("strong",[t._v("依赖提供者")]),t._v("。任何后代的组件树，无论层级有多深，都可以"),s("strong",[t._v("注入")]),t._v("由父组件提供给整条链路的依赖。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://s3-gz01.didistatic.com/packages-mait/img/bLipGWmlcm1732166788438.png",alt:"组件间 provide-inject 示意图"}})]),t._v(" "),s("h2",{attrs:{id:"provide-提供"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#provide-提供"}},[t._v("#")]),t._v(" Provide 提供")]),t._v(" "),s("h3",{attrs:{id:"组合式语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式语法"}},[t._v("#")]),t._v(" 组合式语法")]),t._v(" "),s("p",[t._v("在组合式语法中，需要使用到 "),s("code",[t._v("provide()")]),t._v(" 函数，"),s("code",[t._v("provide()")]),t._v(" 函数接收两个必填参数：")]),t._v(" "),s("ol",[s("li",[t._v("第一个参数表示"),s("strong",[t._v("注入名")]),t._v("，是一个字符串或者 "),s("code",[t._v("Symbol")]),t._v("。后代组件会用注入名来查找期望注入的值，一个组件可以多次调用 "),s("code",[t._v("provide()")]),t._v("，使用不同的注入名，注入不同的依赖值。使用 "),s("code",[t._v("Symbol")]),t._v(" 作为注入名时，只能使用组合式语法而非选项式语法。")]),t._v(" "),s("li",[t._v("第二个参数表示"),s("strong",[t._v("提供值")]),t._v("，值可以是任意类型，包括响应式的状态，比如一个 "),s("code",[t._v("ref")]),t._v("、"),s("code",[t._v("reactive")]),t._v(" 或者 "),s("code",[t._v("computed")]),t._v(" 计算值。")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script setup"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" computed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" provide"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 静态数据")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 注入名 */")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 值 */")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello!'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 Symbol 作为注入名")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" key "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Symbol")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello!'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 响应式数据")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" double "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'double'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" double"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("h3",{attrs:{id:"选项式语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#选项式语法"}},[t._v("#")]),t._v(" 选项式语法")]),t._v(" "),s("p",[t._v("选项式语法的 "),s("code",[t._v("setup()")]),t._v(" 中，用法和组合式 API 一致。另外针对选项式语法，我们也提供了 "),s("code",[t._v("provide")]),t._v(" 选项，它是"),s("strong",[t._v("一个对象或返回一个对象的函数")]),t._v("。")]),t._v(" "),s("p",[t._v("对于 "),s("code",[t._v("provide")]),t._v(" 对象上的每一个属性，后代组件会用其 key 为注入名查找期望注入的值，属性的值就是要提供的数据。")]),t._v(" "),s("p",[t._v("如果我们需要提供依赖当前组件实例的状态 (比如在 "),s("code",[t._v("data")]),t._v(" 属性中定义的数据)，那么需要使用函数形式的 "),s("code",[t._v("provide")]),t._v(" 选项。需要注意的是，这 "),s("strong",[t._v("并不会")]),t._v(" 使注入保持响应性，如果需要保证注入方和供给方之间的响应性链接，我们需要使用 "),s("code",[t._v("computed()")]),t._v(" 函数提供一个计算属性。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("div",{staticClass:"highlight-lines"},[s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("div",{staticClass:"highlighted"},[t._v(" ")]),s("br"),s("br"),s("br"),s("br"),s("br")]),s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1. 静态数据可以选择直接使用对象形式")]),t._v("\n  provide"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    message"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2. 选择使用函数的形式，可以访问到 `this`")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 显式提供一个计算属性")]),t._v("\n      message"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("h3",{attrs:{id:"应用级顶层-provide"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#应用级顶层-provide"}},[t._v("#")]),t._v(" 应用级顶层 provide")]),t._v(" "),s("p",[t._v("前面介绍的是在一个组件中提供依赖，我们还可以在整个应用层面提供依赖，这样整个应用中所有组件都可以使用。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 应用层 provide")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'appMessage'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'provide from App scope!'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"inject-注入"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#inject-注入"}},[t._v("#")]),t._v(" Inject 注入")]),t._v(" "),s("h3",{attrs:{id:"组合式语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式语法"}},[t._v("#")]),t._v(" 组合式语法")]),t._v(" "),s("p",[s("code",[t._v("inject()")]),t._v(" 函数最多接收三个参数：")]),t._v(" "),s("ul",[s("li",[t._v("第一个参数必填，表示"),s("strong",[t._v("注入名")]),t._v("，字符串类型。")]),t._v(" "),s("li",[t._v("第二个参数可选，表示"),s("strong",[t._v("默认值")]),t._v("。\n"),s("ul",[s("li",[t._v("如果在注入一个值时不确定是否有提供者，那么应该声明一个默认值。如果既没有提供者也没有默认值，则会抛出一个运行时警告。")])])]),t._v(" "),s("li",[t._v("第三个参数可选，表示"),s("strong",[t._v("是否将默认值视为工厂函数")]),t._v("，布尔类型。\n"),s("ul",[s("li",[t._v("某些场景下，默认值可能需要通过调用一个函数或初始化一个类来生成，或者某些非基础类型数据创建开销比较大，请使用工厂函数来创建默认值。")])])])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script setup"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" inject "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注入 message 依赖")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建默认值")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用工厂函数创建默认值")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'key'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ExpensiveClass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("如果提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值。这使得注入方能够通过 ref 对象和提供方保持响应性链接。")]),t._v(" "),s("h3",{attrs:{id:"选项式语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#选项式语法"}},[t._v("#")]),t._v(" 选项式语法")]),t._v(" "),s("p",[t._v("选项式语法的 "),s("code",[t._v("setup()")]),t._v(" 中，用法和组合式 API 一致。另外针对选项式语法，我们也提供了 "),s("code",[t._v("inject")]),t._v(" 选项，它是"),s("strong",[t._v("一个数组或一个对象")]),t._v("。")]),t._v(" "),s("ol",[s("li",[s("strong",[t._v("数组")]),t._v("形式使用。数组中的每一项对应一个注入名，注入的属性会以同名的 key 暴露到组件实例上。如下示例中，注入名 "),s("code",[t._v('"message"')]),t._v(" 在注入后以 "),s("code",[t._v("this.message")]),t._v(" 的形式暴露。另外，"),s("code",[t._v("inject")]),t._v(" 会在组件自身的状态"),s("strong",[t._v("之前")]),t._v("被解析，意味着你可以在 "),s("code",[t._v("data()")]),t._v(" 中访问到注入的属性。")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("div",{staticClass:"highlight-lines"},[s("br"),s("br"),s("br"),s("br"),s("br"),s("div",{staticClass:"highlighted"},[t._v(" ")]),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br")]),s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 数组形式使用 `inject` 选项")]),t._v("\n  inject"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以在 `data()` 中访问到注入的属性")]),t._v("\n      fullMessage"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      fullCount"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("ol",{attrs:{start:"2"}},[s("li",[s("strong",[t._v("对象")]),t._v("形式使用。相比数组形式，对象形式支持注入"),s("strong",[t._v("别名")]),t._v("和"),s("strong",[t._v("默认值")]),t._v("。如下示例，通过 "),s("code",[t._v("from")]),t._v(" 属性指定原注入名，通过 "),s("code",[t._v("default")]),t._v(" 属性指定默认值。")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  inject"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    myCount"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 按注入名 'count' 注入")]),t._v("\n    message"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      from"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 'message' 是原注入名，当与原注入名同名时，这个属性是可选的")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default value'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认值")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    user"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 与原注入名 'user' 同名")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Wang'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用工厂函数创建默认值")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("h2",{attrs:{id:"避免注入名潜在冲突"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#避免注入名潜在冲突"}},[t._v("#")]),t._v(" 避免注入名潜在冲突")]),t._v(" "),s("p",[t._v("如果你正在构建大型的应用，包含非常多的依赖提供，那么随处定义的注入名容易存在潜在的同名冲突。在 Mpx 实现中，同名的注入名会覆盖之前已有的注入名对应的提供值。")]),t._v(" "),s("p",[t._v("针对大型应用的最佳实践，我们通常推荐在一个单独的文件中导出这些注入名，可以结合业务模块功能来统一注入名的命名和管理规范。"),s("em",[t._v("以下示例仅供参考，具体实现请依据自身实际场景确定。")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 推荐创建一个单独的文件来管理和导出注入名 */")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1. 使用枚举类型")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" InjectionKeys "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  user"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'user'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  auth"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auth'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  product"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'product'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2. 按业务模块功能划分命名，不容易命名冲突，可读性高")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" InjectionKeys "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  user"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    service"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'user:service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    store"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'user:store'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  auth"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    service"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auth:service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    token"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auth:token'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  product"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    list"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'product:list'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    details"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'product:details'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3. 使用 Symbol 创建唯一注入名，或再结合命名空间")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" InjectionKeys "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  user"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Symbol")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'user'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  auth"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Symbol")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auth'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  product"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Symbol")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'product'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4. 自行实现类似 Symbol polyfill 的命名生成函数")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("createInjectionKey")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" InjectionKeys "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  user"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createInjectionKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'user'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  auth"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createInjectionKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auth'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'token'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  product"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createInjectionKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'product'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'list'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"ts-类型支持"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ts-类型支持"}},[t._v("#")]),t._v(" TS 类型支持")]),t._v(" "),s("p",[t._v("直接使用字符串注入 key 时，注入值的类型默认推导会是 "),s("code",[t._v("unknown")]),t._v("，需要通过泛型参数显式声明。因为无法保证运行时一定存在这个 provide，所以推导类型也可能是 "),s("code",[t._v("undefined")]),t._v("。当声明一个默认值后，这个 "),s("code",[t._v("undefined")]),t._v(" 类型就可以成功被移除。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script setup lang"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"ts"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" inject "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 类型：unknown")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 类型：string | undefined")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 类型：string ✅")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("当然，如果你已经确定注入名肯定被提供了，也可以强制断言。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n")])])]),s("p",[t._v("如果使用 "),s("code",[t._v("Symbol")]),t._v(" 作为注入名，可以使用我们提供的 "),s("code",[t._v("InjectionKey")]),t._v(" 泛型接口，使用它对注入名进行注解或者断言后，可以用来在不同组件之间同步注入值的类型。建议将注入 key 放在单独文件，这样方便在多个组件中导入使用。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("div",{staticClass:"highlight-lines"},[s("br"),s("br"),s("br"),s("div",{staticClass:"highlighted"},[t._v(" ")]),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br")]),s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" provide"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" inject "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" InjectionKey "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" InjectionKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Symbol")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 类型注解")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// const key = Symbol() as InjectionKey<string> // 类型断言写法等效")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 若默认值是非字符串则会 TS 类型报错")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ✅ foo 的类型：string | undefined")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ✅ foo 的类型：string")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ❌ 默认值是非字符串则会 TS 类型报错")]),t._v("\n")])])]),s("h2",{attrs:{id:"跨端差异"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#跨端差异"}},[t._v("#")]),t._v(" 跨端差异")]),t._v(" "),s("ul",[s("li",[t._v("Mpx 输出 Web 端后，使用规则与 Vue 一致，"),s("code",[t._v("provide/inject")]),t._v(" 的生效范围严格遵行父子组件关系，只有父组件可以成功向子孙组件提供依赖。")]),t._v(" "),s("li",[t._v("Mpx 输出小程序端会略有不同，由于小程序原生框架限制，暂时无法在子组件获取真实渲染时的父组件引用关系，所以不能像 Vue 那样基于父组件原型继承来实现 "),s("code",[t._v("provide")]),t._v("。在 Mpx 底层实现中，我们将组件层的 "),s("code",[t._v("provide")]),t._v(" 挂载在所属页面实例上，相当于将组件 scope 提升到页面 scope，可以理解成一种“降级模拟”。当然，这并不影响父组件向子孙组件 "),s("code",[t._v("provide")]),t._v(" 的能力，只是会额外存在“"),s("strong",[t._v("副作用")]),t._v("”：同一页面中的组件可以向页面中其他所有在其之后渲染子组件提供依赖。比如同一页面下的组件 A 可以向后渲染的兄弟组件 B 的子孙组件提供数据，这在 Web 端是不允许的。因此，针对小程序端可能出现的“副作用”需要开发者自行保证，可以结合上述注入名的管理优化来规避。")])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/77.7bc0f013.js b/docs-vuepress/.vuepress/dist/assets/js/77.7bc0f013.js
new file mode 100644
index 0000000000..499578dcb8
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/77.7bc0f013.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[77],{422:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"资源路径获取"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#资源路径获取"}},[t._v("#")]),t._v(" 资源路径获取")]),t._v(" "),s("p",[t._v("Mpx在构建时，如果引用的页面不存在于当前 app.mpx 所在的上下文中，例如存在于 npm 包中，为避免和本地声明的其他 page 路径冲突，Mpx 会对页面路径进行 hash 化处理；\n处理组件路径时也会添加 hash 防止路径名冲突，hash 化处理后最终的文件名是 name+hash+ext 的格式；对于图片等资源路径输出也会进行 hash 化处理。")]),t._v(" "),s("p",[t._v("开发者经常会面临以下问题：")]),t._v(" "),s("ul",[s("li",[t._v("希望获取 hash 化之后的页面/组件/图片路径")]),t._v(" "),s("li",[t._v("在页面路径变化时(分包名更改或页面名修改)，需要手动修改散落在代码中各处写死的资源路径")])]),t._v(" "),s("h2",{attrs:{id:"resolve"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#resolve"}},[t._v("#")]),t._v(" ?resolve")]),t._v(" "),s("p",[t._v("为了解决以上开发者痛点，Mpx 框架提供了资源路径自动获取能力，只需要在资源引用路径后加上?resolve，\nMpx 在编译时会生成一个资源路径处理模块，该模块暴露出资源对应的真实输出路径，从而可以实现在页面/组件/图片路径变化时正确获取输出路径，并避免写死资源路径。")]),t._v(" "),s("p",[t._v("获取并使用页面路径")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.json 中注册分包，此处仅列出 packages 语法示例")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("packages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@someNpm/app.mpx?root=someNpm'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// import 语法获取并使用页面路径")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" subPackageIndexPage "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@someNpm/subpackage/pages/index.mpx?resolve'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" subPackageIndexPage\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require 语法获取并使用页面路径")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@someNpm/subpackage/pages/index.mpx?resolve'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("获取并使用组件资源路径")]),t._v(" "),s("blockquote",[s("p",[t._v("我们在使用小程序 relations 语法时，需要获取组件路径，这时就可使用 ?resolve 语法")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" someComponentItem "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./some-component-item?resolve'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("relations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("someComponentItem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'child'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("获取并使用图像资源路径")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{someStyle}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" iconPath "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../assets/icon.png?resolve'")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("someStyle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("background-image url(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("iconPath"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/78.e2ded2d4.js b/docs-vuepress/.vuepress/dist/assets/js/78.e2ded2d4.js
new file mode 100644
index 0000000000..1e63812874
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/78.e2ded2d4.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[78],{426:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"包体积分析"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#包体积分析"}},[t._v("#")]),t._v(" 包体积分析")]),t._v(" "),s("p",[t._v("目前业内主流小程序平台都对小程序的代码包设置了严格的体积限制，微信是单包 2MB，总包 16MB，支付宝是单包 2MB，总包 8MB；包体积作为有限的资源，在小程序业务开发中异常重要，特别对于像滴滴出行这样的大型复杂业务。")]),t._v(" "),s("p",[t._v("Mpx 在包体积控制上做了很多工作，主要包括：")]),t._v(" "),s("ul",[s("li",[s("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#分包"}},[t._v("完善的分包支持")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/advance/npm.html"}},[t._v("基于依赖声明的按需构建")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/advance/image-process.html"}},[t._v("图像资源处理")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/css.html#公共样式复用"}},[t._v("公共样式复用")])],1)]),t._v(" "),s("p",[t._v("此外由于 Mpx 的编译构建完全基于 webpack，也能够直接复用webpack生态自带的代码压缩，模块复用，tree shaking，side effects 等能力对代码体积进行优化。")]),t._v(" "),s("p",[t._v("但是系统能做的工作终究有限，在一些人为不规范操作的影响下，最终输出的项目依然可能存在大量优化空间，比如在业务中不会被调用但无法被 tree shaking / side effects 移除的代码，因为 npm 依赖版本不统一造成的重复依赖，未经压缩的图像静态资源等，在大型项目中，这些问题想要被发现会非常困难，因此我们非常需要一个体积分析工具来管控项目体积和发现隐藏的体积问题。")]),t._v(" "),s("h2",{attrs:{id:"与-webpack-bundle-analyzer-的区别"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#与-webpack-bundle-analyzer-的区别"}},[t._v("#")]),t._v(" 与 webpack-bundle-analyzer 的区别")]),t._v(" "),s("p",[s("code",[t._v("webpack-bundle-analyzer")]),t._v(" 提供了非常完善的体积分析和可视化展示能力，但是在 Mpx 构建输出小程序场景下，其所提供的能力还是有所缺失：")]),t._v(" "),s("ul",[s("li",[t._v("只能对 js 资源进行模块体积分析，而小程序的输出中包含了大量的非 js 静态资源，如 wxss / wxml / json 等，这些资源的体积都不会被统计分析；")]),t._v(" "),s("li",[t._v("没有针对某个分包进行体积分析的能力，由于小程序中存在对单一分包的体积限制，我们的体积往往会集中在主包和主要业务分包中，以分包维度进行体积分析的能力非常必要；")]),t._v(" "),s("li",[t._v("无法以特定的输入范围为维度进行体积的统计分析，这个能力诉求更多地出现在跨团队合作的复杂小程序当中，如滴滴出行。在这种场景下，接入合作的各方会更加关注己方引入的体积，并进行针对性地优化。")])]),t._v(" "),s("p",[t._v("由于上述原因，我们提供了"),s("code",[t._v("@mpxjs/size-report")]),t._v("插件提供包体积分析能力，弥补了 "),s("code",[t._v("webpack-bundle-analyzer")]),t._v(" 的能力缺失，为业务提供了便捷准确的包体积管控优化抓手。")]),t._v(" "),s("h2",{attrs:{id:"使用方法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用方法"}},[t._v("#")]),t._v(" 使用方法")]),t._v(" "),s("h4",{attrs:{id:"安装插件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装插件"}},[t._v("#")]),t._v(" 安装插件")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("npm i @mpxjs/size-report --save-dev\n")])])]),s("h4",{attrs:{id:"配置插件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置插件"}},[t._v("#")]),t._v(" 配置插件")]),t._v(" "),s("p",[t._v("在项目 webpack.config 文件中配置使用 "),s("code",[t._v("@mpxjs/size-report")]),t._v(" 插件即可使用，简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxSizeReportPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/size-report'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MpxSizeReportPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 本地可视化服务相关配置")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("server")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("enable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否启动本地服务，非必填，默认 true")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("autoOpenBrowser")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否自动打开可视化平台页面，非必填，默认 true")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("port")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 本地服务端口，非必填，默认 0(随机端口)")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("host")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'127.0.0.1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 本地服务host，非必填")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 体积报告生成后输出的文件地址名，路径相对为 dist/wx 或者 dist/ali")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("filename")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../report.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置阈值，此处代表总包体积阈值为 16MB，分包体积阈值为 2MB，超出将会触发编译报错提醒，该报错不阻断构建")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("threshold")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("size")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'16MB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("packages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2MB'")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("groups")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 分组名称")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vant'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry，如下所示的分组配置将计算项目中引入的 vant 组件带来的体积占用")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entryRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vant/weapp'")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pageGroup'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 每个分组中可分别配置阈值，如果不配置则表示")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("threshold")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'500KB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entryRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/pages/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/pages/user'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someSdk'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entryRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@somegroup/someSdk/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@somegroup/someSdk2/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 有的时候你可能希望计算纯 js 入口引入的体积（不包含组件和页面），这种情况下需要使用 noEntryRules")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("noEntryRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/lib/sdk.js'")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否收集页面维度体积详情，默认 false")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("reportPages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否收集资源维度体积详情，默认 false")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("reportAssets")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否收集冗余资源，默认 false")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("reportRedundance")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 展示某些分包资源的引用来源信息，默认为 []")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("showEntrysPackages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'main'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("参考上述示例进行配置后，构建代码后，dist 目录下会产出 report.json 文件，里边是项目的具体体积信息，关于输入 json 的简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v('{\n    // 项目体积概要，大部分情况下，我们只需要看这部分就足够了\n    "sizeSummary": {\n        // 分组体积概要，与上述配置文件中的 groups 对应\n        "groups": [\n            {\n                "name": "vant",\n                // 只有该分组包含的模块体积\n                "selfSize": "164.75KiB",\n                "selfSizeInfo": {\n                  // 该分组所占 shansong\n                  "shansong": "164.75KiB"\n                },\n                "sharedSize": "885.68KiB",\n                "sharedSizeInfo": {\n                  "main": "885.68KiB"\n                }\n            },\n        ],\n        // 项目各个分包以及主包体积概要\n        "sizeInfo": {\n            "main": "1000KiB",\n            "fenbao1": "200kiB"\n        },\n        // 项目总体积\n        "totalSize": "13468.85KiB",\n        // 项目静态资源总体积\n        "staticSize": "4880.58KiB",\n        // 项目chunk 文件总体积\n        "chunkSize": "8587.70KiB",\n        // 非依赖项体积大小\n        "copySize": "1KiB"\n    },\n    // 分组资源详细体积\n    "groupsSizeInfo": [\n        {\n            "name": "groupOne",\n            // group 自身包含的 module 详情列表\n            "selfEntryModules": [],\n            // group 与其他group 共有的 module 详情列表\n            "sharedEntryModules": [],\n            // 自身包含 module 体积\n            "selfSize": "",\n            // 自身包含 module 体积详情\n            "selfSizeInfo": {\n                "main": {},\n                "homepage": {}\n            },\n            // 与其他 group 共有 module 体积\n            "sharedSize": "",\n            // 与其他 group 共有 module 体积详情\n            "sharedSizeInfo": {\n                "main": {},\n                "homepage": {}\n            },\n\n        }\n    ],\n    // 项目资源详细体积报告\n    "assetsSizeInfo": {\n        "assets": [{\n            // 资源类型\n            "type": "chunk",\n            "name": "test",\n            // 分包名\n            "packageName": "main",\n            "size": "",\n            "modules": []\n        }]\n    }\n}\n')])])]),s("p",[t._v("与此同时，如果你开启了本地可视化平台服务，可以直接通过可视化平台查看项目体积构成。默认开启自动打开平台网页或者手动打开后，整体页面展示如下图：")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://mpxjs.cn",target:"_blank",rel:"noopener noreferrer"}},[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/feat1.png",alt:"size-report"}}),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("可视化平台中包含三部分功能，第一个体积分析如上图所示，主要是展示整体项目的体积总览，以及 group 体积列表和分包体积列表。")]),t._v(" "),s("p",[t._v("第二个功能是体积详情模块，在该模块中，可以最小颗粒度的查看包体积构成，通过 table 表格的层层展开可看到每个 group 中包含的分包，点击分包可看到该分包包含的静态资源和 js 模块详细列表，同时聚合模式可将分散的模块整合为具体的npm包名，方便宏观查看。此外为了方便用户定向查看某个特定资源的分布情况，列表上方可进行资源路径/名称搜索，该搜索支持模糊匹配，搜索结果为该资源在项目中 group 和 分包的分布情况。")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://mpxjs.cn",target:"_blank",rel:"noopener noreferrer"}},[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/feat2.png",alt:"size-report"}}),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("第三个功能为体积对比功能，这里主要进行项目不同版本之间的体积大小变化比较，体积对比依赖插件生成的json文件，通过该功能，可具体的分析出包体积具体增大的group，分包，以及模块，给包体积优化提供定向目标。")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://mpxjs.cn",target:"_blank",rel:"noopener noreferrer"}},[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/feat3.png",alt:"size-report"}}),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"业务实践"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#业务实践"}},[t._v("#")]),t._v(" 业务实践")]),t._v(" "),s("p",[t._v("目前 sizeReport 工具在滴滴出行小程序, 花小猪, 青桔骑行, 特惠出行小程序以及一部分外部小程序中使用。")]),t._v(" "),s("p",[t._v("在滴滴出行小程序中，配置使用 @mpxjs/size-report 插件后使包体积管控和优化更加工程化：")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("在 sizeReport 检测结果文件中，通过对 groupsSizeInfo 和 assetsSizeInfo 中assets 与 module 体积分析，我们发现了部分体积较大图片文件和css资源，通过将图片存 CDN 和删除冗余文件；")])]),t._v(" "),s("li",[s("p",[t._v("基于各小程序平台对小程序总包，主包，分包有大小限制的原则，给各接入方配置了主包和首页分包体积大小占比阈值，在构建时检测到包体积超过阈值时，抛出 error 阻断构建，开发者可通过 size-report.json 中详细的包体积分析准确的找到体积变动点。")])])]),t._v(" "),s("h2",{attrs:{id:"总结"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#总结"}},[t._v("#")]),t._v(" 总结")]),t._v(" "),s("p",[t._v("Mpx sizeReport 工具对小程序体积计算有更细微(模块级别)的体积展示。 更加适合小程序开发场景的包体积分析。")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/79.f7eeb76b.js b/docs-vuepress/.vuepress/dist/assets/js/79.f7eeb76b.js
new file mode 100644
index 0000000000..57ab84eb82
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/79.f7eeb76b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[79],{425:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"ssr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ssr"}},[t._v("#")]),t._v(" SSR")]),t._v(" "),s("p",[t._v("近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，但过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 2.9 版本中，我们对 Mpx 输出 web 流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整支持了基于 Vue 和 Pinia 的 SSR 技术方案。")]),t._v(" "),s("h2",{attrs:{id:"配置使用-ssr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置使用-ssr"}},[t._v("#")]),t._v(" 配置使用 SSR")]),t._v(" "),s("p",[t._v("在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85",alt:"Vue SSR流程"}})]),t._v(" "),s("p",[t._v("Mpx SSR 核心基于 Vue SSR 实现，大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：")]),t._v(" "),s("h3",{attrs:{id:"构建server-client-bundle"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#构建server-client-bundle"}},[t._v("#")]),t._v(" 构建server/client bundle")]),t._v(" "),s("p",[t._v("SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。\n在 Vue 中，我们需要提供 "),s("code",[t._v("entry-server.js")]),t._v(" 和 "),s("code",[t._v("entry-client.js")]),t._v(" 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 "),s("code",[t._v("app.mpx")]),t._v(" 作为统一构建入口，无需区分 server 和 client。")]),t._v(" "),s("h4",{attrs:{id:"服务端构建配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#服务端构建配置"}},[t._v("#")]),t._v(" 服务端构建配置")]),t._v(" "),s("p",[t._v("服务端配置中除了将 entry 制定为 "),s("code",[t._v("app.mpx")]),t._v(" 及其它基础配置外，最重要的是安装 "),s("code",[t._v("vue-server-renderer")]),t._v(" 包中提供的  "),s("code",[t._v("server-plugin")]),t._v(" 插件，该插件能够构建产出 "),s("code",[t._v("vue-ssr-server-bundle.json")]),t._v(" 文件供 "),s("code",[t._v("renderer")]),t._v(" 后续消费。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.server.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" VueSSRServerPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer/server-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 entry 指向项目的 app.mpx 文件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 产出 `vue-ssr-server-bundle.json`")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueSSRServerPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更加详细的配置说明可参考 "),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/build-config.html#server-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue SSR的服务端配置"),s("OutboundLink")],1)]),t._v(" "),s("h4",{attrs:{id:"客户端构建配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#客户端构建配置"}},[t._v("#")]),t._v(" 客户端构建配置")]),t._v(" "),s("p",[t._v("类似服务端构建配置，在客户端构建中我们需要使用 "),s("code",[t._v("vue-server-renderer")]),t._v(" 包中 "),s("code",[t._v("client-plugin")]),t._v(" 插件来帮助我们生成客户端环境的资源清单 "),s("code",[t._v("vue-ssr-client-manifest.json")]),t._v("，并供 "),s("code",[t._v("renderer")]),t._v(" 后续消费。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.client.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" VueSSRClientPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer/client-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 entry 指向项目的 app.mpx 文件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 产出 `vue-ssr-client-manifest.json`。")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueSSRClientPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更加详细的配置说明可参考 "),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/build-config.html#client-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue SSR的客户端配置"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"准备页面模版"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#准备页面模版"}},[t._v("#")]),t._v(" 准备页面模版")]),t._v(" "),s("p",[t._v("SSR 渲染中，我们创建 "),s("code",[t._v("renderer")]),t._v(" 需要一个页面模板，简单的示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token doctype"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<!")]),s("span",{pre:!0,attrs:{class:"token doctype-tag"}},[t._v("DOCTYPE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token name"}},[t._v("html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("en"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Hello"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--vue-ssr-outlet--\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 "),s("code",[t._v("\x3c!--vue-ssr-outlet--\x3e")]),t._v("注释，标记 SSR 渲染产物的插入位置，如使用 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 脚手架创建 SSR 项目，该模版已经内置于脚手架中。")]),t._v(" "),s("h3",{attrs:{id:"集成启动-ssr-服务"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#集成启动-ssr-服务"}},[t._v("#")]),t._v(" 集成启动 SSR 服务")]),t._v(" "),s("p",[t._v("当我们准备好页面模版和双端构建产物后，我们就可以创建 "),s("code",[t._v("renderer")]),t._v(" 并与 Node 服务进行集成，启动 SSR 服务，下面以 "),s("code",[t._v("express")]),t._v(" 为例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//server.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" app "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'express'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createBundleRenderer "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 vue-server-renderer/server-plugin 生成的文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" serverBundle "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../dist/server/vue-ssr-server-bundle.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 vue-server-renderer/client-plugin 生成的文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" clientManifest "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../dist/client/vue-ssr-client-manifest.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 页面模版文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" template "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("readFileSync")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/index.template.html'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'utf-8'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建 renderer 渲染器")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" renderer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createBundleRenderer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("serverBundle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("runInNewContext")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    template"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    clientManifest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注册启动 SSR 服务")]),t._v("\napp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'*'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("req"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" req"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  renderer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("renderToString")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  \t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  \t  res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Internal Server Error'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  \tres"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("html"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\napp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("listen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8080")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"ssr-生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ssr-生命周期"}},[t._v("#")]),t._v(" SSR 生命周期")]),t._v(" "),s("p",[t._v("在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是"),s("code",[t._v("onAppInit")]),t._v("、"),s("code",[t._v("serverPrefetch")]),t._v(" 和 "),s("code",[t._v("onSSRAppCreated")]),t._v("，以统一服务端与客户端的构建入口，下面展开介绍：")]),t._v(" "),s("h3",{attrs:{id:"onappinit"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onappinit"}},[t._v("#")]),t._v(" onAppInit")]),t._v(" "),s("blockquote",[s("p",[t._v("该生命周期仅可在 App 中使用")])]),t._v(" "),s("p",[t._v("在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，"),s("code",[t._v("onAppInit")]),t._v(" 生命周期会在应用创建 "),s("code",[t._v("new Vue(...)")]),t._v(" 前被调用，其执行的返回结果会被合并到创建应用的 "),s("code",[t._v("options")]),t._v(" 中")]),t._v(" "),s("p",[t._v("很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 "),s("code",[t._v("@mpxjs/pinia")]),t._v(" 作为全局状态管理工具，我们可以在 "),s("code",[t._v("onAppInit")]),t._v(" 中返回全新的 "),s("code",[t._v("pinia")]),t._v(" 示例避免产生跨请求状态污染，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPinia "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onAppInit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pinia "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPinia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      pinia\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("SSR 中仅支持使用 "),s("code",[t._v("@mpxjs/pinia")]),t._v(" 作为状态管理工具，"),s("code",[t._v("@mpxjs/store")]),t._v(" 暂不支持")])]),t._v(" "),s("h3",{attrs:{id:"serverprefetch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#serverprefetch"}},[t._v("#")]),t._v(" serverPrefetch")]),t._v(" "),s("blockquote",[s("p",[t._v("该生命周期可在 App/Page/Component 中使用，只在服务端渲染时执行")])]),t._v(" "),s("p",[t._v("当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：")]),t._v(" "),s("p",[t._v("选项式 API：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useStore "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store/index'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("serverPrefetch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" query "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("query\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the promise from the action, fetch data and update state")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("query"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("组合式 API：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" onServerPrefetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getCurrentInstance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useStore "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store/index'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("userStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onServerPrefetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" query "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getCurrentInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("proxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("query\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the promise from the action, fetch data and update state")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("query"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("关于数据预拉取更详细的说明可以查看"),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/data.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("h3",{attrs:{id:"onssrappcreated"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onssrappcreated"}},[t._v("#")]),t._v(" onSSRAppCreated")]),t._v(" "),s("blockquote",[s("p",[t._v("该生命周期仅可在 App 中使用，只在服务端渲染时执行")])]),t._v(" "),s("p",[t._v("在 Vue SSR 项目中，我们会在 "),s("code",[t._v("entry-server.js")]),t._v(" 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 "),s("code",[t._v("app")]),t._v("。")]),t._v(" "),s("p",[t._v("在 Mpx SSR 中，我们将这部分逻辑整合在 "),s("code",[t._v("onSSRAppCreated")]),t._v(" 中执行，该生命周期执行时用户可以从参数中获取应用实例 "),s("code",[t._v("app")]),t._v("、路由实例 "),s("code",[t._v("router")]),t._v("、数据管理实例 "),s("code",[t._v("pinia")]),t._v(" 和 SSR 上下文 "),s("code",[t._v("context")]),t._v("，在完成必要的操作后，该生命周期需要返回一个 "),s("code",[t._v("resolve(app)")]),t._v(" 的 promise。")]),t._v(" "),s("p",[t._v("通常我们会在 "),s("code",[t._v("onSSRAppCreated")]),t._v(" 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...,")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onSSRAppCreated")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置服务端路由路径")]),t._v("\n        router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 应用完成渲染时执行")]),t._v("\n          context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("rendered")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将服务端渲染后得到的 pinia.state 同步到 context.state 中，")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注入到 HTML 中，并在客户端运行时再读取同步")]),t._v("\n            context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回应用程序实例")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("上述示例代码等价于 Vue 中的 "),s("code",[t._v("entry-server.js")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// entry-server.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This `rendered` hook is called when the app has finished rendering")]),t._v("\n      context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("rendered")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// After the app is rendered, our store is now")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// filled with the state from our components.")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// When we attach the state to the context, and the `template` option")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// is used for the renderer, the state will automatically be")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// serialized and injected into the HTML as `window.__INITIAL_STATE__`.")]),t._v("\n        context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。")]),t._v(" "),s("h2",{attrs:{id:"其他注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#其他注意事项"}},[t._v("#")]),t._v(" 其他注意事项")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。")])]),t._v(" "),s("li",[s("p",[t._v("在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。")])]),t._v(" "),s("li",[s("p",[t._v("由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 "),s("code",[t._v("mpx.config.webRouteConfig")]),t._v(" 将路由模式设置成 "),s("code",[t._v("history")]),t._v(" 模式。")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/8.ba7f6ace.js b/docs-vuepress/.vuepress/dist/assets/js/8.ba7f6ace.js
new file mode 100644
index 0000000000..d3454032bf
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/8.ba7f6ace.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{341:function(t,e,n){},360:function(t,e,n){"use strict";n(341)},382:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:(t,{props:e,slots:n})=>t("span",{class:["badge",e.type],style:{verticalAlign:e.vertical}},e.text||n().default)},p=(n(360),n(4)),l=Object(p.a)(i,void 0,void 0,!1,null,"59f00772",null);e.default=l.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/80.41418749.js b/docs-vuepress/.vuepress/dist/assets/js/80.41418749.js
new file mode 100644
index 0000000000..2362e82125
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/80.41418749.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[80],{427:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"状态管理-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#状态管理-store"}},[t._v("#")]),t._v(" 状态管理（store）")]),t._v(" "),s("p",[t._v("Mpx 参考 vuex 设计实现了外部状态管理系统（store），其中的概念与 api 与 vuex 保持一致，为了更好地支持状态模块管理和跨团队合作场景，我们提出多实例 store 作为 vuex 中 modules 的替代方案，该方案在模块拆分及合并上的灵活性远高于 modules。")]),t._v(" "),s("h2",{attrs:{id:"介绍"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#介绍"}},[t._v("#")]),t._v(" 介绍")]),t._v(" "),s("p",[s("code",[t._v("Store")]),t._v(" 是一个全局状态管理容器，能够轻松实现复杂场景下的组件通信需求，store 与简单的全局状态对象主要有以下两点不同：")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("Store 中存放的状态是响应式的。当用户将 store 中的状态注入到组件以后，若 store 中状态发生变化，那么对应的组件也会得到更新。")])]),t._v(" "),s("li",[s("p",[t._v("你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径是显式地提交变更（commit mutation），这种方式能使整个应用中的状态变更变得可回朔可追踪，同时也更加安全。")])])]),t._v(" "),s("h3",{attrs:{id:"创建-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#创建-store"}},[t._v("#")]),t._v(" 创建 store")]),t._v(" "),s("p",[t._v("让我们来创建一个简单 store。创建过程直截了当，仅需要提供一个初始 state 对象和一些 mutation 方法，并调用 Mpx 暴露的 "),s("code",[t._v("createStore")]),t._v(" 方法进行创建：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" store\n")])])]),s("p",[t._v("现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),s("p",[t._v("接下来，我们将会更深入地探讨一些 store 的核心概念。让我们先从 "),s("a",{attrs:{href:"#state"}},[t._v("State")]),t._v(" 开始。")]),t._v(" "),s("h2",{attrs:{id:"state"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#state"}},[t._v("#")]),t._v(" State")]),t._v(" "),s("p",[t._v("State 存放了 store 中的原始状态数据，可以通过 "),s("code",[t._v("store.state")]),t._v(" 进行访问。")]),t._v(" "),s("h3",{attrs:{id:"在组件中获取-state"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在组件中获取-state"}},[t._v("#")]),t._v(" 在组件中获取 state")]),t._v(" "),s("p",[t._v("Mpx 在小程序组件中实现了数据响应，而刚才提到 store 中的状态也是响应式的，组件中获取 store 状态最简单的方法就是建立一个计算属性，在计算属性中访问 store 中需要的状态数据并返回：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// store.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("count")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("当 store.state.count 发生变化时, 组件中访问了 count 计算属性的 watcher 将得到响应。")]),t._v(" "),s("blockquote",[s("p",[t._v("于 vuex 中的不同的地方在于，vuex 奉行"),s("code",[t._v("单一状态树")]),t._v("，一个应用当中只存在一个 store 示例，用户能够在组件中通过"),s("code",[t._v("this.$store")]),t._v("隐式地访问到当前应用的 store；而 Mpx 当中为了追求灵活便捷的状态模块化管理及跨团队合作的能力，支持了多实例 store，用户需要显式地引入 store 实例，并通过计算属性将其注入到组件当中。")])]),t._v(" "),s("h3",{attrs:{id:"mapstate-辅助函数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mapstate-辅助函数"}},[t._v("#")]),t._v(" MapState 辅助函数")]),t._v(" "),s("p",[t._v("当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 "),s("code",[t._v("mapState")]),t._v(" 辅助函数帮助我们生成计算属性")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 箭头函数可使代码更简练")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 传字符串参数 'count' 等同于 state => state.count")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countAlias")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 为了能够使用 `this` 获取局部状态，必须使用常规函数")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("countPlusLocalState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("localCount\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 映射 this.count 为 store.state.count")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"对象展开运算符"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#对象展开运算符"}},[t._v("#")]),t._v(" 对象展开运算符")]),t._v(" "),s("p",[t._v("MapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了"),s("a",{attrs:{href:"https://github.com/sebmarkbage/ecmascript-rest-spread",target:"_blank",rel:"noopener noreferrer"}},[t._v("对象展开运算符"),s("OutboundLink")],1),t._v("，我们可以极大地简化写法：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("localComputed")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用对象展开运算符将 mapState 返回的对象合并到计算属性中")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("使用 store 并不意味着你需要将所有的状态放入 store。如果有些状态严格属于单个组件，最好将其放到组件内部的 data 当中。")])]),t._v(" "),s("h2",{attrs:{id:"getter"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getter"}},[t._v("#")]),t._v(" Getter")]),t._v(" "),s("p",[t._v("有时候我们需要从 state 中派生出一些状态，例如经过过滤的列表：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doneTodos")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("todos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("todo")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" todo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("done"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它，无论哪种方式都不是很理想。")]),t._v(" "),s("p",[t._v("这个时候我们可以在 store 中定义 "),s("code",[t._v("getter")]),t._v(" 来完成这个功能，getter 可以简单认为是 store 中的计算属性。同计算属性一样，getter 的返回值会根据它的依赖被缓存起来，只有当它的依赖发生变化时才会被重新计算。")]),t._v(" "),s("p",[t._v("Getter 接受 state 作为第一个参数：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("todos")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sth1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("done")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sth2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("done")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("doneTodos")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("todos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("todo")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" todo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("done"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" store\n")])])]),s("p",[t._v("定义好的 getter 可以通过 "),s("code",[t._v("store.getters")]),t._v(" 访问：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doneTodos "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [{ id: 1, text: '...', done: true }]")]),t._v("\n")])])]),s("p",[t._v("Getter 也可以接受其他 getters 作为第二个参数, rootState作为第三个参数，rootState是模块化中引入的概念，之后会详细介绍：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("doneTodosCount")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rootState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doneTodos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doneTodosCount "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 1")]),t._v("\n")])])]),s("p",[t._v("我们采用与state类似的方法将其注入到组件中进行访问：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doneTodosCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doneTodosCount\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"mapgetters-辅助函数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mapgetters-辅助函数"}},[t._v("#")]),t._v(" MapGetters 辅助函数")]),t._v(" "),s("p",[s("code",[t._v("MapGetters")]),t._v(" 的作用与使用方法同上面提到的 "),s("code",[t._v("mapState")]),t._v(" 高度类似，唯一的区别在于 mapGetters 用于映射 store 中的 getter：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用对象展开运算符将 getter 混入 computed 对象中")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGetters")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'doneTodosCount'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'anotherGetter'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果你想将一个 getter 在组件中映射为另一个名字，使用对象形式：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGetters")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 映射 this.doneCount 为 store.getters.doneTodosCount")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("doneCount")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'doneTodosCount'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"mutation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mutation"}},[t._v("#")]),t._v(" Mutation")]),t._v(" "),s("p",[t._v("更改 store 中的状态的唯一方法是提交 mutation。Mutation 非常类似于事件：每个 mutation 都有一个字符串的"),s("strong",[t._v("类型（type）")]),t._v(" 和 一个"),s("strong",[t._v("回调函数（handler）")]),t._v("。这个回调函数就是我们实际进行状态更改的地方，它接受 state 作为第一个参数：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 变更状态")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" store\n")])])]),s("p",[t._v("当你需要触发某个 mutation 时，你需要使用对应的 "),s("code",[t._v("type")]),t._v(" 调用 "),s("code",[t._v("store.commit")]),t._v(" 方法，就像触发某个事件一样：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"提交载荷（payload）"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#提交载荷（payload）"}},[t._v("#")]),t._v(" 提交载荷（Payload）")]),t._v(" "),s("p",[t._v("你可以向 "),s("code",[t._v("store.commit")]),t._v(" 传入额外的参数，作为 mutation 的"),s("strong",[t._v("载荷（payload）")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" n\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且增强 mutation 的可读性：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" payload"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("amount")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"mutation-必须是同步函数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mutation-必须是同步函数"}},[t._v("#")]),t._v(" Mutation 必须是同步函数")]),t._v(" "),s("p",[t._v("一条重要的原则就是要记住 "),s("strong",[t._v("mutation 必须是同步函数")])]),t._v(" "),s("h3",{attrs:{id:"在组件中提交-mutation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在组件中提交-mutation"}},[t._v("#")]),t._v(" 在组件中提交 Mutation")]),t._v(" "),s("p",[t._v("你可以在组件中使用 "),s("code",[t._v("store.commit('increment')")]),t._v(" 提交 mutation，或者使用 "),s("code",[t._v("store.mapMutations")]),t._v(" 辅助函数将组件中名为 "),s("code",[t._v("increment")]),t._v(" 的 "),s("code",[t._v("method")]),t._v(" 映射为 "),s("code",[t._v("store.commit('increment')")]),t._v(" 调用。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 this.increment() 映射为 store.commit('increment')")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n       "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mapMutations 也支持载荷：将 this.incrementBy(amount) 映射为 store.commit('incrementBy', amount)")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementBy'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mapMutations同样支持传入对象形式的参数进行别名映射")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 this.add() 映射为 store.commit('increment')")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"action"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#action"}},[t._v("#")]),t._v(" Action")]),t._v(" "),s("p",[t._v("Action 类似于 mutation，不同在于：")]),t._v(" "),s("ul",[s("li",[t._v("Action 不能直接变更状态，但是可以提交 mutation 进行状态变更")]),t._v(" "),s("li",[t._v("Action 可以包含任意异步操作")])]),t._v(" "),s("p",[t._v("让我们来创建一个简单的 action：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" store\n")])])]),s("p",[t._v("Action 函数接受一个 "),s("code",[t._v("context")]),t._v(" 对象，因此你可以调用 "),s("code",[t._v("context.commit")]),t._v(" 提交一个 mutation，调用 "),s("code",[t._v("context.dispatch")]),t._v(" 触发其他的 action 调用，或者通过 "),s("code",[t._v("context.rootState")]),t._v("、"),s("code",[t._v("context.state")]),t._v(" 和 "),s("code",[t._v("context.getters")]),t._v(" 来获取全局state、局部state 和 全局 getters。")]),t._v(" "),s("p",[t._v("实践中，我们会经常用到 ES2015 的"),s("a",{attrs:{href:"https://github.com/lukehoban/es6features#destructuring",target:"_blank",rel:"noopener noreferrer"}},[t._v("参数解构"),s("OutboundLink")],1),t._v("来简化代码：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"调用-action"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#调用-action"}},[t._v("#")]),t._v(" 调用 action")]),t._v(" "),s("p",[t._v("Action 可以通过 "),s("code",[t._v("store.dispatch")]),t._v(" 方法进行调用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 "),s("strong",[t._v("mutation 必须同步执行")]),t._v("这个限制么？Action 就不受约束！我们可以在 action 内部执行"),s("strong",[t._v("异步")]),t._v("操作：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementAsync")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Action 同样支持载荷：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用载荷")]),t._v("\nstore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementAsync'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("amount")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("来看一个更加实际的购物车示例，涉及到"),s("strong",[t._v("调用异步 API")]),t._v(" 和"),s("strong",[t._v("提交多个 mutation")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" products")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 把当前购物车的物品备份起来")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" savedCartItems "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cart"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("added"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 发出结账请求，然后乐观地清空购物车")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("types"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("CHECKOUT_REQUEST")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 购物 API 接受一个成功回调和一个失败回调")]),t._v("\n    shop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("buyProducts")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n      products"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 成功操作")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("types"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("CHECKOUT_SUCCESS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 失败操作")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("types"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("CHECKOUT_FAILURE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" savedCartItems"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("注意我们进行了一系列异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）。")]),t._v(" "),s("h3",{attrs:{id:"在组件中调用-action"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在组件中调用-action"}},[t._v("#")]),t._v(" 在组件中调用 Action")]),t._v(" "),s("p",[t._v("你可以在组件中使用 "),s("code",[t._v("store.dispatch('increment')")]),t._v(" 进行 action 调用，或者使用 "),s("code",[t._v("store.mapActions")]),t._v(" 辅助函数将组件中名为 "),s("code",[t._v("increment")]),t._v(" 的 "),s("code",[t._v("method")]),t._v(" 映射为 "),s("code",[t._v("store.dispatch('increment')")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 this.increment() 映射为 store.dispatch('increment')")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mapActions 也支持载荷：将 this.incrementBy(amount) 映射为 store.dispatch('incrementBy', amount)")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementBy'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mapActions 同样支持传入对象形式的参数进行别名映射")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 this.add() 映射为 store.dispatch('increment')")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"组合-action"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合-action"}},[t._v("#")]),t._v(" 组合 Action")]),t._v(" "),s("p",[t._v("Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？")]),t._v(" "),s("p",[t._v("在 Mpx 中，action 永远返回一个 Promise，你可以在定义 action 手动返回一个 Promise，即使你没有这样做，框架也会对你 action 的返回值进行 "),s("code",[t._v("Promise.resolve(returned)")]),t._v(" 包装，确保你可以使用 Promise 的方式处理多个 action 之间的异步组合：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionA")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someMutation'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("现在你可以通过 "),s("code",[t._v("then")]),t._v(" 方法获取 "),s("code",[t._v("actionA")]),t._v(" 执行完毕的时机：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'actionA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在另外一个 action 中也可以通过这种方式进行一系列异步调用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionB")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" dispatch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'actionA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someOtherMutation'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("如果我们利用 "),s("a",{attrs:{href:"https://tc39.github.io/ecmascript-asyncawait/",target:"_blank",rel:"noopener noreferrer"}},[t._v("async / await"),s("OutboundLink")],1),t._v("，我们能够更方便地对一系列异步操作进行组合：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 假设 getData() 和 getOtherData() 返回的是 Promise")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionA")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'gotData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionB")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" dispatch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'actionA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 等待 actionA 完成")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'gotOtherData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getOtherData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"modules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#modules"}},[t._v("#")]),t._v(" Modules")]),t._v(" "),s("blockquote",[s("p",[t._v("Mpx 虽然支持了 modules，但并不推荐使用。在 Mpx 中，我们更推荐使用[多实例模式](#多实例 store)进行对应用状态进行模块划分")])]),t._v(" "),s("p",[t._v("在 Mpx 中，modules 的设计与 vuex 中基本保持一致，在 createStore 中将子模块配置传入 modules 配置项中即可使用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" moduleA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" moduleB "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    moduleA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    moduleB\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nstore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("moduleA "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> moduleA 的状态")]),t._v("\nstore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("moduleB "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> moduleB 的状态")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" store\n")])])]),s("blockquote",[s("p",[t._v("Mpx 并未实现 vuex 中的命名空间，除 state 外的所有属性（getters / mutations / actions）将被平铺展开到根 store 的对应空间下。在多实例 store 中，我们的实现方式则与命名空间高度相似。")])]),t._v(" "),s("h3",{attrs:{id:"模块的局部状态"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模块的局部状态"}},[t._v("#")]),t._v(" 模块的局部状态")]),t._v(" "),s("p",[t._v("对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" moduleA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里的 state 对象是模块的局部状态")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doubleCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("对于模块内部的 action，局部状态通过 "),s("code",[t._v("context.state")]),t._v(" 访问，根状态则通过 "),s("code",[t._v("context.rootState")]),t._v(" 访问：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" moduleA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementIfOddOnRootSum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" commit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rootState "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" rootState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("对于模块内部的 getter，根状态能通过第三个参数访问：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" moduleA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sumWithRootCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rootState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" rootState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"模块在组件中的引入方式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模块在组件中的引入方式"}},[t._v("#")]),t._v(" 模块在组件中的引入方式")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getName")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("s")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" s"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" moduleB\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 我们支持了多种方式引入子模块中的 state")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过函数引入")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("nameA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过路径字符串引入")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nameA2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.name'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过传入模块路径引入")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对于 getters / mutations / actions，由于我们没有实现 namespace，子模块当中定义的 getters / mutations / actions 都能在根空间下直接访问，正常调用映射方法即可")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGetters")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'getName'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"多实例-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#多实例-store"}},[t._v("#")]),t._v(" 多实例 store")]),t._v(" "),s("p",[t._v("在 Mpx 中，我们允许在一个应用下创建多个 store 实例，进行模块化分布式的数据管理，同时提供了 deps 声明模块依赖的机制，让用户自由组合多个 store 实例并基于这些已有的 store 创建新的继承 store。在实际业务使用中，我们发现多实例模式的灵活性远高于 module，更加适合跨团队合作当中的数据管理。")]),t._v(" "),s("p",[t._v("使用多实例 store 的方式非常简单，你只需要多次调用 "),s("code",[t._v("createStore")]),t._v(" api 创建出多个 store 示例，并分别将其注入到组件中即可使用，简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storeA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementA")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countA"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storeB "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countB")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementB")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countB"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'countA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'countB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("可以看到 Mpx 中的 map 辅助方法都挂载在 store 实例上，正是为了支持多实例 store 的实现")])]),t._v(" "),s("h3",{attrs:{id:"合并继承多实例-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#合并继承多实例-store"}},[t._v("#")]),t._v(" 合并继承多实例 store")]),t._v(" "),s("p",[t._v("在实际的跨团队业务当中，我们既希望不同团队间的数据管理尽量解耦，也希望一些共同的部分能够复用，这就要求我们的 store 实例可以以某种方式组合起来使用，我们提供了 deps 能来实现多实例 store 的合并与继承。")]),t._v(" "),s("p",[t._v("承接上面的示例，我们基于 storeA 和 storeB 创建一个新的 storeC，在 storeC 当中可以定义自身的独立状态，也能基于 storeA 和 storeB 进行状态衍生：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storeA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementA")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countA"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storeB "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countB")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementB")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countB"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storeC "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countC")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("abc")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此处 state.storeA 指向了原始的 storeA.state")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("storeA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("storeB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countB "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countC\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementC")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countC"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementB")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// storeC内部也可以通过命名空间路径的方式提交 storeB 的 mutation")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeB.incrementB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此处 deps 声明了 storeC 的依赖，依赖中的 state / getters / mutations / actions 都会以 deps 中的 key 为命名空间存放在 storeC 对应的域下")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("deps")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    storeA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    storeB\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过继承合并得到的 storeC，我们可以完整访问其依赖 storeA / storeB")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用路径字符串或函数映射，可以看出和 modules 中 mapState 的方式非常类似")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeC"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeA.countA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("countA2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("storeA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countA\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 传入命名空间参数映射 storeB 中的 countB")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeC"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'countB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 映射基于 storeA/B/C 衍生得到的 getters")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeC"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGetters")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'abc'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mutation不支持函数映射")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 下面代码以三种方式分别映射了increment、incrementB和incrementC")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeC"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("incrementA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeA.incrementA'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeC"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeC"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementC'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("简单来讲，作为 deps 的 store 会以注册在 deps 中的 key 值作为命名空间，将其原始的 state / getters / mutations / actions 存放在新生成 store 对应的域下，便于新 store 对其进行访问并衍生出新的数据或操作，如上述示例中，storeA.state 会存放在 storeC.state.storeA 中，对于 getters / mutations / actions 亦然。")])]),t._v(" "),s("h2",{attrs:{id:"在-typescript-中使用-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在-typescript-中使用-store"}},[t._v("#")]),t._v(" 在 Typescript 中使用 store")]),t._v(" "),s("p",[t._v("Mpx 自 2.2 版本开始支持 Typescript，为了更好地支持 store 中的类型推导，我们针对 Typescript 环境提供了变种的 store api "),s("code",[t._v("createStoreWithThis")]),t._v(" 进行 store 创建，该 api 最主要的变化在于定义 getters，mutations 和 actions 时，自身的 state，getters 等属性不再通过参数传入，而是会挂载到函数的执行上下文 "),s("code",[t._v("this")]),t._v(" 当中，通过 this.state 或 this.getters 的方式进行访问，简单的使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("aa")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("bb")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 this.state 访问 state")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aa "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bb\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 this.getters 访问 getter")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("详细的使用方式及推导规则请查看 "),s("RouterLink",{attrs:{to:"/guide/tool/ts.html"}},[t._v("Typescript 支持")]),t._v("章节。")],1),t._v(" "),s("h2",{attrs:{id:"use-store-in-composition-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#use-store-in-composition-api"}},[t._v("#")]),t._v(" 在组合式 API 中使用 store ")]),t._v(" "),s("p",[t._v("Mpx 自 2.8 版本完整支持了组合式 API 的开发方式，虽然在组合式 API 中我们首推使用 "),s("RouterLink",{attrs:{to:"/guide/advance/pinia.html"}},[t._v("pinia")]),t._v(" 作为外部状态管理方案，不过旧的 store 在组合式 API 中仍然可以使用，我们提供了新的 "),s("code",[t._v("mapStateToRefs")]),t._v(" 和 "),s("code",[t._v("mapGettersToRefs")]),t._v(" 便于用户在组合式 API 中访问 "),s("code",[t._v("state")]),t._v(" 和 "),s("code",[t._v("getters")]),t._v("，而对于 "),s("code",[t._v("mutations")]),t._v(" 和 "),s("code",[t._v("actions")]),t._v("，用户可以直接调用 store 实例上的 "),s("code",[t._v("commit")]),t._v(" 和 "),s("code",[t._v("dispatch")]),t._v(" 方法进行调用，或者使用原有的 "),s("code",[t._v("map*")]),t._v(" API 进行映射访问，简单使用示例如下：")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createStoreWithThis"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchEffect "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("123")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doubleCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("subCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapStateToRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" doubleCount "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGettersToRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'doubleCount'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" addCount "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'addCount'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      doubleCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      addCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("subCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 两种方式均可以进行 mutations 调用，actions 同理")]),t._v("\n        store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'subCount'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/81.16e2cc83.js b/docs-vuepress/.vuepress/dist/assets/js/81.16e2cc83.js
new file mode 100644
index 0000000000..87519aed45
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/81.16e2cc83.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[81],{428:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"使用分包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用分包"}},[t._v("#")]),t._v(" 使用分包")]),t._v(" "),s("p",[t._v("作为一个对 performance 极度重视的框架，分包作为提升小程序体验的重要能力，框架对各种类型的分包能力进行了完善支持。")]),t._v(" "),s("blockquote",[s("p",[t._v("分包是小程序平台提供的原生能力，mpx是对该能力做了部分加强，目前各大主流小程序平台都已支持分包，且框架在可能的情况下进行了抹平。")])]),t._v(" "),s("blockquote",[s("p",[t._v("使用分包一定要记得阅读下面的"),s("a",{attrs:{href:"#%E5%88%86%E5%8C%85%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"}},[t._v("分包注意事项")])])]),t._v(" "),s("h2",{attrs:{id:"原生语法注册分包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原生语法注册分包"}},[t._v("#")]),t._v(" 原生语法注册分包")]),t._v(" "),s("p",[t._v("Mpx 支持小程序原生语法注册分包，并且在框架层面对不同平台的的差异进行了抹平，我们以微信小程序原生语法注册分包为例。")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index/index"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"subPackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"test"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other2"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"packages-语法注册分包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#packages-语法注册分包"}},[t._v("#")]),t._v(" packages 语法注册分包")]),t._v(" "),s("p",[t._v("Mpx 提供 packages 语法来对小程序的主包页面和分包划分能力进行增强，使用 packages 语法可以灵活的对业务进行拆分，允许以 npm 包的形式进行\n主包页面和分包注册，且分包名和页面路径可自定义，十分有利于大型多团队开发的项目维护。")]),t._v(" "),s("h3",{attrs:{id:"使用方法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用方法"}},[t._v("#")]),t._v(" 使用方法")]),t._v(" "),s("p",[t._v("Mpx 拓展了 app.json 的语法，新增了 packages 域，用来声明依赖的 packages，packages 可嵌套依赖。")]),t._v(" "),s("h4",{attrs:{id:"注册主包页面"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#注册主包页面"}},[t._v("#")]),t._v(" 注册主包页面")]),t._v(" "),s("p",[t._v("首先我们介绍下 packages 注册主包页面的用法，在 packages 中直接配置资源路径，Mpx 会去读取该资源中 json 区块中的 pages 属性，合并到主包页面配置中。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("// @file src/app.mpx\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index/index"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{npmPackage || relativePathToPackage}/index"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// @file src/packages/index.mpx\n// 注意确保页面路径的唯一性\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/other/other2"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("打包结果：dist/app.json")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index/index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other2"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h4",{attrs:{id:"注册分包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#注册分包"}},[t._v("#")]),t._v(" 注册分包")]),t._v(" "),s("p",[t._v("Mpx 会将 packages 域下的路径带 root 为 key 的 query 解析注册为分包，使用 packages 语法注册分包，只需要在 packages 中配置资源路径添加 "),s("code",[t._v("root=xxx")]),t._v("，root的值即为分包名。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("// @file src/app.mpx\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index/index"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{npmPackage || relativePathToPackage}/index?root=test"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// @file src/packages/index.mpx (子包的入口文件)\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/other/other2"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("打包结果：dist/app.json")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index/index"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"subPackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"test"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other2"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("由上可见，经过我们的编译过程，packages 中注册的页面可按照原始的路径被合并入主包页面或注册为分包，\n这样开发者可以不用考虑自己在被依赖时页面路径是怎么样的，也可以直接将调试用的app.mpx作为依赖入口直接暴露出去，\n对于主app的开发者来说也不需要了解依赖内部的细节，只需要在packages中声明自己所需的依赖即可。")]),t._v(" "),s("h3",{attrs:{id:"注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#注意事项"}},[t._v("#")]),t._v(" 注意事项")]),t._v(" "),s("ul",[s("li",[t._v("依赖的开发者在自己的入口 app.mpx 中注册页面时对于本地页面一定要使用相对路径进行注册，否则在主app中进行编译时会找不到对应的页面")]),t._v(" "),s("li",[t._v("不管是用 json 还是 mpx 格式定义 package 入口，编译时永远只会解析 json 且只会关注 json 中的 pages 和 packages 域，其余所有东西在主app编译时都会被忽略")]),t._v(" "),s("li",[t._v("由于我们是将 packages 中注册的页面按照原始的路径合并到主 app 当中，有可能会出现路径名冲突。"),s("br"),t._v("\n这种情况下编译会报出响应错误提示用户解决冲突，为了避免这种情况的发生，依赖的提供者最好将自己内部的页面放置在能够描述依赖特性的子文件夹下。")])]),t._v(" "),s("p",[t._v("例如一个包叫login，建议包内页面文件目录为：")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("project\n│   app.mpx  \n└───pages\n    └───login\n        │   page1.mpx\n        │   page2.mpx\n        │   ...\n")])])]),s("h2",{attrs:{id:"独立分包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#独立分包"}},[t._v("#")]),t._v(" 独立分包")]),t._v(" "),s("p",[t._v("Mpx目前已支持独立分包构建，使用 "),s("a",{attrs:{href:"#packages"}},[t._v("packages")]),t._v(" 语法声明分包时只需要在后面添加 "),s("code",[t._v("independent=true")]),t._v(" query 即可，同时也支持原生语法声明。\n如下方示例声明 packageA 分包为独立分包")]),t._v(" "),s("p",[s("strong",[t._v("示例：")])]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/app.mpx 文件中 json 块")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Mpx packages 方式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"packageA/app.mpx?root=packageA&independent=true"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 微信原生方式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"subpackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"packageA"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"independent"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("需要注意的是，由于独立分包可以独立于主包和其他分包运行，从独立分包页面进入小程序时，主包中的相应初始化逻辑并不会执行，如果独立分包中多个页面需要某种通用初始化逻辑时就无法优雅的实现，\nMpx框架针对独立分包场景提供了独立分包初始化逻辑执行能力。")]),t._v(" "),s("p",[t._v("对于使用 packages 方式声明的独立分包，默认将 .mpx 文件自身的 script 块作为初始化逻辑执行。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--src/packagesA/app.mpx，packageA 独立分包入口文件--\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePromise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isIndependent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do some in independent package")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do some not independent package")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("上方代码中 独立分包 packageA 的入口文件 app.mpx 中的 script block 代码会默认在独立分包初始化时执行，Mpx 同时提供了全局变量 "),s("code",[t._v("isIndependent")]),t._v(" 标识当前代码执行环境是否为独立分包来进行特定逻辑区分")]),t._v(" "),s("p",[t._v("如果你不想走这个默认的初始化逻辑执行规则，想自定义一个 js 文件存储当前独立分包的初始化逻辑，我们支持 independent 配置项直接配置为初始化逻辑文件地址")]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/app.mpx 文件中 json 块")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Mpx packages 方式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"packageA/app.mpx?root=packageA&independent=./common"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 路径上下文为 packageA 文件夹")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 微信原生方式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"subpackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"packageA"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"independent"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./common"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 路径上下文为 packageA 文件夹")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/pacakgeA/common.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePromise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isIndependent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do some in independent package")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do some not independent package")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("注意上方配置 independent 为初始化逻辑文件地址时，路径相对地址上下文为 packageA")]),t._v(" "),s("h2",{attrs:{id:"分包预下载"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#分包预下载"}},[t._v("#")]),t._v(" 分包预下载")]),t._v(" "),s("p",[t._v("分包预下载是在 json中 新增一个 preloadRule 字段，mpx 打包时候会原封不动把这个部分放到 app.json 中，所以只需要按照 "),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("微信小程序官方文档 - 分包预下载"),s("OutboundLink")],1),t._v(" 或者 "),s("a",{attrs:{href:"https://opendocs.alipay.com/mini/framework/subpackages",target:"_blank",rel:"noopener noreferrer"}},[t._v("支付宝小程序官方文档 - 分包预下载"),s("OutboundLink")],1),t._v(" 配置即可。")]),t._v(" "),s("p",[s("strong",[t._v("示例：")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("// @file src/app.mpx\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index/index"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{npmPackage || relativePathToPackage}/index?root=xxx"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"preloadRule"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages/index"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"network"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"all"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"important"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"sub1/index"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"hello"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"sub3"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// @file src/packages/index.mpx (子包的入口文件)\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/other/other2"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("打包结果：dist/app.json")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index/index"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"subPackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"xxx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other2"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"preloadRule"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages/index"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"network"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"all"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"important"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"sub1/index"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"hello"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"sub3"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("  \n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"分包注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#分包注意事项"}},[t._v("#")]),t._v(" 分包注意事项")]),t._v(" "),s("p",[t._v("当我们使用分包加载时，依赖包内的跳转路径需注意，比如要跳转到other2页面")]),t._v(" "),s("ul",[s("li",[t._v("不用分包时会是：/pages/other/other2")]),t._v(" "),s("li",[t._v("使用分包后应为：/test/pages/other/other2")])]),t._v(" "),s("p",[t._v("即前面会多?root={rootKey}的rootKey这一层")]),t._v(" "),s("p",[t._v("为了解决这个问题，有三种方案：")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("import的时候在最后加'?resolve', 例如: "),s("code",[t._v("import testPagePath from '../pages/testPage.mpx?resolve'")]),t._v(" , 编译时就会把它处理成正确的完整的绝对路径。")])]),t._v(" "),s("li",[s("p",[t._v("使用相对路径跳转。")])]),t._v(" "),s("li",[s("p",[t._v("定死使用的分包路径名，直接写/{rootKey}/pages/xxx （极度不推荐，尤其在分包可能被多方引用的情况时）")])])]),t._v(" "),s("p",[t._v("这里我们建议使用第一种方式。")])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/82.56c0d7c1.js b/docs-vuepress/.vuepress/dist/assets/js/82.56c0d7c1.js
new file mode 100644
index 0000000000..c3846ffefb
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/82.56c0d7c1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[82],{432:function(t,e,a){"use strict";a.r(e);var s=a(4),n=Object(s.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"使用原子类"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#使用原子类"}},[t._v("#")]),t._v(" 使用原子类")]),t._v(" "),e("p",[t._v("原子类(utility-first CSS)是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，我们耳熟能详的有"),e("a",{attrs:{href:"https://github.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github"),e("OutboundLink")],1),t._v("，"),e("a",{attrs:{href:"https://openai.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("OpenAI"),e("OutboundLink")],1),t._v("，"),e("a",{attrs:{href:"https://top10.netflix.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Netflix"),e("OutboundLink")],1),t._v("\n和"),e("a",{attrs:{href:"https://www.jpl.nasa.gov/",target:"_blank",rel:"noopener noreferrer"}},[t._v("NASA官网"),e("OutboundLink")],1),t._v("\n等。使用原子类离不开原子类框架的支持，常用的原子类框架有 "),e("a",{attrs:{href:"https://tailwindcss.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Tailwindcss"),e("OutboundLink")],1),t._v("、"),e("a",{attrs:{href:"https://windicss.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Windicss"),e("OutboundLink")],1),t._v("\n和 "),e("a",{attrs:{href:"https://unocss.dev/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Unocss"),e("OutboundLink")],1),t._v(" 等，而在 "),e("strong",[t._v("Mpx2.9")]),t._v(" 以后，我们在框架中内置了基于 unocss\n的原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx\n页面/组件模板中直接使用一些预定义的基础样式类，诸如flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("flex"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-base text-black font-semibold mb-2"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Erin Lindford\n        "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-gray-500 font-medium pb-3"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Product Engineer\n        "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v("\n          "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Message\n        "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/Or3aaN-mmxV8pK-LmEVPm_demo.png",alt:"utility-css-demo"}})]),t._v(" "),e("p",[t._v("相较于传统的自定义类编写样式的方式，使用原子类能给你带来以下这些好处：")]),t._v(" "),e("ul",[e("li",[e("strong",[t._v("不用再烦恼于为自定义类取类名")]),t._v("，传统样式开发中，我们仅仅是为某个元素定义样式就需要绞尽脑汁发明一些抽象的类名，还得提防类名冲突，使用原子类可以完全将你从这种琐碎无趣的工作中解放；")]),t._v(" "),e("li",[e("strong",[t._v("停止css体积的无序增长")]),t._v("，传统样式开发中，css体积会随着你的迭代不断增长，而在原子类中，一切样式都可以复用，你几乎不需要编写新的css；")]),t._v(" "),e("li",[e("strong",[t._v("让调整样式变得更加安全")]),t._v("，传统css是全局的，当你修改某个样式时无法保障其不会破坏其他地方的样式，而你在模板中使用的原子类是本地的，你完全不用担心修改它会影响其他地方。")])]),t._v(" "),e("p",[t._v("而相较于使用内联样式，原子类也有一些重要的优势：")]),t._v(" "),e("ul",[e("li",[e("strong",[t._v("约束下的设计")]),t._v("，使用内联样式时，里面的每一个数值都是魔法数字(magic number)\n，而通过原子工具类，你可以选择一些符合预定义设计规范的样式，便于构筑具有视觉一致性的UI；")]),t._v(" "),e("li",[e("strong",[t._v("响应式设计")]),t._v("，你无法在内联样式中使用媒体查询，然而通过原子类框架中提供的响应式工具，你可以轻而易举地构建出响应式界面；")]),t._v(" "),e("li",[e("strong",[t._v("Hover、focus和其他状态")]),t._v("，使用内联样式无法定义特定状态下的样式，如hover和focus，通过原子类框架的状态变量能力，我们可以轻松为这些状态定义样式。")])]),t._v(" "),e("p",[t._v("看到这里相信你已经迫不及待地想要在 Mpx 中体验原子类开发了吧，可以根据下面的指南开启你的原子类之旅。")]),t._v(" "),e("h2",{attrs:{id:"compile-config"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#compile-config"}},[t._v("#")]),t._v(" 原子类环境配置 ")]),t._v(" "),e("p",[t._v("如果你想在新项目中使用原子类，可以使用最新版本的 "),e("code",[t._v("@mpxjs/cli")]),t._v(" 创建项目，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用 unocss 的原子类，关于可使用的工具类可参考 "),e("a",{attrs:{href:"https://unocss.dev/interactive/",target:"_blank",rel:"noopener noreferrer"}},[t._v("unocss 交互示例"),e("OutboundLink")],1),t._v("及本指南下方的"),e("a",{attrs:{href:"#%E5%B7%A5%E5%85%B7%E7%B1%BB%E6%94%AF%E6%8C%81%E8%8C%83%E5%9B%B4"}},[t._v("工具类支持范围")]),t._v("。")]),t._v(" "),e("blockquote",[e("p",[t._v("与 web 中使用 unocss 不同，在 Mpx 中使用 unocss 不需要显式引入虚拟模块 "),e("code",[t._v("import 'uno.css'")]),t._v(" 来承载生成的样式内容，这是由于在\nMpx 中，我们充分考虑到小程序分包架构的特殊性和主包体积的重要性，结合 Mpx\n强大的分包构建能力，对生成的原子工具类的使用情况进行分析，将其自动注入到合适的主包或者分包中，来达到全局体积分配的最优（在没有内容冗余的情况下尽可能输出到分包）。")])]),t._v(" "),e("p",[t._v("对于使用 "),e("code",[t._v("@mpxjs/cli@3.0")]),t._v(" 新版脚手架创建的项目，可以在项目初始化时选择"),e("code",[t._v("需要使用原子类")]),t._v("\n选项，或在已有项目下执行"),e("code",[t._v("mpx add @mpxjs/vue-cli-plugin-mpx-utility-first-css")]),t._v("以激活原子类相关编译配置。")]),t._v(" "),e("p",[t._v("对于使用旧版脚手架创建的项目，可以通过修改项目编译配置以激活原子类支持：")]),t._v(" "),e("ol",[e("li",[t._v("安装相关依赖：")])]),t._v(" "),e("div",{staticClass:"language-json5 extra-class"},[e("pre",{pre:!0,attrs:{class:"language-json5"}},[e("code",[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//...")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"devDependencies"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/unocss-base"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'^2.9.0'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/unocss-plugin"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'^2.9.0'")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("ol",{attrs:{start:"2"}},[e("li",[t._v("新建uno.config.js，基础配置内容如下：")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unocss'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" presetMpx "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/unocss-base'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("presets")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("presetMpx")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("ol",{attrs:{start:"3"}},[e("li",[t._v("注册"),e("code",[t._v("MpxUnocssPlugin")]),t._v("，在"),e("code",[t._v("build/getPlugins")]),t._v("中添加如下代码：")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxUnocssPlugin "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/unocss-plugin'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\nplugins"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MpxUnocssPlugin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("p",[t._v("即可在项目模版中使用基于"),e("code",[t._v("unocss")]),t._v("的原子类功能，"),e("code",[t._v("unocss")]),t._v("默认的preset兼容"),e("code",[t._v("tailwindcss")]),t._v("/"),e("code",[t._v("windicss")]),t._v("\n，可以通过查阅"),e("a",{attrs:{href:"https://tailwindcss.com/docs/installation",target:"_blank",rel:"noopener noreferrer"}},[t._v("tailwindcss文档"),e("OutboundLink")],1),t._v("、"),e("a",{attrs:{href:"https://windicss.org/utilities/general/colors.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("windicss文档"),e("OutboundLink")],1),t._v("或"),e("a",{attrs:{href:"https://unocss.dev/interactive/",target:"_blank",rel:"noopener noreferrer"}},[t._v("unocss可交互文档"),e("OutboundLink")],1),t._v("进行探索使用。")]),t._v(" "),e("p",[t._v("关于"),e("code",[t._v("uno.config.js")]),t._v("可用配置项及"),e("code",[t._v("@mpxjs/unocss-plugin")]),t._v("及"),e("code",[t._v("@mpxjs/unocss-base")]),t._v("的配置项请参考"),e("RouterLink",{attrs:{to:"/api/compile.html#mpxunocssplugin-配置"}},[t._v("API文档")])],1),t._v(" "),e("h3",{attrs:{id:"vscode插件支持"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#vscode插件支持"}},[t._v("#")]),t._v(" vscode插件支持")]),t._v(" "),e("p",[t._v("推荐使用unocss官方插件https://unocss.dev/integrations/vscode\nmpx文件则需要在unocss.config.js添加如下参数才能生效")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unocss'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token regex"}},[e("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),e("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.mpx($|\\?)")]),e("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h2",{attrs:{id:"config-supports"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#config-supports"}},[t._v("#")]),t._v(" 功能支持范围 ")]),t._v(" "),e("p",[t._v("我们支持了"),e("code",[t._v("unocss")]),t._v("大部分的配置项及功能，并针对小程序技术规范提供了一些额外的功能支持，如分包输出和样式隔离等功能，以下为详细功能支持范围。")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Load Config")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持windi默认的全部配置文件路径，并支持在plugin options中手动传入配置对象或配置文件路径")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Rules")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Shortcuts")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Theme")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Variants")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Extractors")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Transformers")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("内建支持variant groups、directives和alias，不支持自定义transformers")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Preflights")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持内建和自定义preflight配置")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Presets")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Safelist")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持全局配置和模版注释语法局部配置声明safelist")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Value Auto-infer")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Variant Groups")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Directives")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Alias")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Attributify Mode")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序模版不支持不识别的自定义属性")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Responsive Design")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Dark Mode")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Important Prefix")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Layers Ordering")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("分包输出/公共样式抽离")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("可通过设置"),e("code",[t._v("@mpxjs/unocss-plugin")]),t._v("配置项"),e("code",[t._v("minCount")]),t._v("决定公共样式范围")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("组件分包异步/组件样式隔离")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("可通过全局配置和模版注释语法局部配置"),e("code",[t._v("styleIsolation='isolated'")]),t._v("支持相关场景的原子类使用")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Rpx样式单位")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序类名特殊字符转义")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("静态类名和动态类名均以支持")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("跨平台输出")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持输出Mpx已支持的所有小程序平台及Web")])])])]),t._v(" "),e("h2",{attrs:{id:"utility-supports"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#utility-supports"}},[t._v("#")]),t._v(" 工具类可用范围 ")]),t._v(" "),e("p",[t._v("经过我们的详细测试，大部分"),e("code",[t._v("unocss")]),t._v("\n提供的工具类都能在小程序环境下正常工作，但是也有部分工具类由于小程序底层环境差异无法正常运行，以下是详细的测试结果，参考"),e("a",{attrs:{href:"https://windicss.org/utilities/general/colors.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("windicss文档"),e("OutboundLink")],1),t._v("\n进行分类组织。")]),t._v(" "),e("h3",{attrs:{id:"general"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#general"}},[t._v("#")]),t._v(" General")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Colors")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Typography")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持子项：Font Variant Numeric Tab Size")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("SVG")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持svg标签")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Variants")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持子项：Child Selectors，因为小程序不支持*选择器")])])])]),t._v(" "),e("h3",{attrs:{id:"accessibility"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#accessibility"}},[t._v("#")]),t._v(" Accessibility")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Screen Readers")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),e("h3",{attrs:{id:"animations"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#animations"}},[t._v("#")]),t._v(" Animations")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Animation")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Transforms")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Transitions")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),e("h3",{attrs:{id:"backgrounds"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#backgrounds"}},[t._v("#")]),t._v(" Backgrounds")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Attachment")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Clip")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Color")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Opacity")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("需要和Background Color一起使用")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Position")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Repeat")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Size")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Origin")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Gradient Direction")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Gradient From")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Gradient Via")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Gradient To")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Blend Mode")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),e("h3",{attrs:{id:"behaviors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#behaviors"}},[t._v("#")]),t._v(" Behaviors")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Box Decoration Break")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Image Rendering")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("image-render-edge 真机不支持")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Listings")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Overflow")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Overscroll Behavior")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Placeholder")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("微信小程序 input 需要通过 placeholder-style 设置 placeholder 样式")])])])]),t._v(" "),e("h3",{attrs:{id:"borders"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#borders"}},[t._v("#")]),t._v(" Borders")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Border Radius")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Border Width")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Border Color")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Border Opacity")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Border Style")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Divider Width")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的css选择器")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Divider Color")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的css选择器")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Divider Opacity")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的css选择器")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Divider Style")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的css选择器")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Outline")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Outline Solid")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Outline Dotted")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Ring Width")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Ring Color")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Ring Opacity")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Ring Offset Width")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Ring Offset Color")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),e("h3",{attrs:{id:"effects"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#effects"}},[t._v("#")]),t._v(" Effects")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Box Shadow")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Opacity")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Mix Blend Mode")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),e("h3",{attrs:{id:"filters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#filters"}},[t._v("#")]),t._v(" Filters")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Filter")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Backdrop Filter")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),e("h3",{attrs:{id:"interactivity"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#interactivity"}},[t._v("#")]),t._v(" Interactivity")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Accent Color")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Appearance")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Cursor")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Caret")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Pointer Events")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Resize")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Scroll Behavior")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Touch Action")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("User Select")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Will Change")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])])])]),t._v(" "),e("h3",{attrs:{id:"layout"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#layout"}},[t._v("#")]),t._v(" Layout")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Columns")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Container")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Display")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Flex")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Grid")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Positioning")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序图片设置object-fit 无效，可使用mode代替")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Sizing")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Spacing")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("Space Between小程序不支持生成的css选择器")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Tables")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持部分table样式")])])])]),t._v(" "),e("h2",{attrs:{id:"attentions"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#attentions"}},[t._v("#")]),t._v(" 小程序原子类使用注意点 ")]),t._v(" "),e("p",[t._v("小程序由于底层环境差异，我们在支持和使用原子类时有一些特殊的注意点。")]),t._v(" "),e("h3",{attrs:{id:"escape"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#escape"}},[t._v("#")]),t._v(" 特殊字符转义 ")]),t._v(" "),e("p",[t._v("基于"),e("code",[t._v("unocss")]),t._v("的原子类支持"),e("code",[t._v("value auto-infer")]),t._v("（值自动推导），可以在模版中根据相关规则书写灵活的自定义值原子类，如"),e("code",[t._v("p-5px bg-[hsl(211.7,81.9%,69.6%)]")]),t._v("等，针对原子类中出现的"),e("code",[t._v("[")]),t._v(" "),e("code",[t._v("(")]),t._v(" "),e("code",[t._v(",")]),t._v("等特殊字符，在web中会通过转义字符"),e("code",[t._v("\\")]),t._v("进行转义，由于小程序环境下不支持css选择器中出现"),e("code",[t._v("\\")]),t._v("转义字符，我们内置支持了一套不带"),e("code",[t._v("\\")]),t._v("的转义规则对这些特殊字符进行转义，同时替换模版和css文件中的类名，内建的默认转义规则如下：")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" escapeMap "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'('")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_pl_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("')'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_pr_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'['")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_bl_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("']'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_br_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'{'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_cl_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'}'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_cr_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'#'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_h_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'!'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_i_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'/'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_s_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'.'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_d_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("':'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_c_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("','")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_2c_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'%'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_p_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'\\''")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_q_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'\"'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_dq_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'+'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_a_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("$")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_si_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unknown用于兜底不在上述范围中未知的转义字符")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unknown")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_u_'")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("与此同时，用户也可以通过传递"),e("code",[t._v("@mpxjs/unocss-plugin")]),t._v("的"),e("RouterLink",{attrs:{to:"/api/compile.html#escapeMap"}},[e("code",[t._v("escapeMap")]),t._v("配置项")]),t._v("来覆盖内建的转义规则。")],1),t._v(" "),e("h3",{attrs:{id:"subpackage"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#subpackage"}},[t._v("#")]),t._v(" 原子类分包输出 ")]),t._v(" "),e("p",[t._v("在web中，原子类会被全部打包输出单个样式文件，一般会放置在顶层样式表中以供全局访问，但在小程序中这种全量的输出策略并不是最优的，主要原因在于小程序中可供全局访问的主包体积存在"),e("strong",[t._v("2M大小限制")]),t._v("，主包体积十分紧缺珍贵，Mpx在构建输出时遵循着分包优先的原则，尽可能充分利用分包体积从而减少对主包体积的占用，再进行原子类产物输出时，我们也遵循了相同的原则。")]),t._v(" "),e("p",[t._v("在Mpx中，我们在收集原子类时同时记录了每个原子类的引用分包，在收集结束后根据每个原子类的分包引用数量决定该原子类应该输出到主包还是分包当中，我们在"),e("code",[t._v("@mpxjs/unocss-plugin")]),t._v("中提供了"),e("RouterLink",{attrs:{to:"/api/compile.html#minCount"}},[e("code",[t._v("minCount")]),t._v("配置项")]),t._v("来决定分包的输出规则，该配置项的默认值为2，即当一个原子类被2个或以上分包引用时，会被作为公共原子类抽取到主包中，否则输出到所属分包中，这也是全局最优的策略。当我们想要让原子类输出产物更少地占用主包体积时，我们也可以将"),e("code",[t._v("minCount")]),t._v("值调大，让原子类抽取到主包的条件更加苛刻，不过这样也会伴随着原子类分包冗余的增加。")],1),t._v(" "),e("p",[e("code",[t._v("unocss.config.js")]),t._v("配置中定义的"),e("code",[t._v("safelist")]),t._v("原子类默认会输出到主包，为了组件局部使用的"),e("code",[t._v("safelist")]),t._v("有输出到分包的机会，我们在模版中提供了"),e("RouterLink",{attrs:{to:"/api/compile.html#commentConfig"}},[e("code",[t._v("注释配置")])]),t._v("（comments config），灵感来源于"),e("code",[t._v("webpack")]),t._v("中的魔法注释（magic comments），用户可以在组件模版中通过"),e("code",[t._v("注释配置")]),t._v("声明当前组件所需的"),e("code",[t._v("safelist")]),t._v("，对应的原子类也会根据上述的规则输出到主包或分包中，使用示例如下：")],1),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_safelist: 'text-red-500 bg-blue-500' --\x3e")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 动态样式中可以使用text-red-500和bg-blue-500原子类 --\x3e")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{classObj}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("h3",{attrs:{id:"style-isolation"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#style-isolation"}},[t._v("#")]),t._v(" 样式隔离与组件分包异步 ")]),t._v(" "),e("p",[t._v("在小程序中，自定义组件的样式默认是隔离的，web中通过全局样式访问原子类的方式不再生效，不过由于小程序提供了"),e("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB",target:"_blank",rel:"noopener noreferrer"}},[t._v("样式隔离配置"),e("OutboundLink")],1),t._v("，我们可以将该组件样式隔离配置调整为"),e("code",[t._v("apply-shared")]),t._v("来获取页面或app中定义的原子类，但是当我们在使用传统类名和原子类混合开发或者迁移原子类的过程中，我们往往希望保留原本自定义组件的样式隔离。")]),t._v(" "),e("p",[t._v("针对这种情况，我们在"),e("code",[t._v("@mpxjs/unocss-plugin")]),t._v("中提供了"),e("RouterLink",{attrs:{to:"/api/compile.html#styleIsolation"}},[e("code",[t._v("styleIsolation")]),t._v("配置项")]),t._v("，可选设置为"),e("code",[t._v("isolated")]),t._v("|"),e("code",[t._v("apply-shared")]),t._v("，当设置为"),e("code",[t._v("isolated")]),t._v("时每个组件都会通过"),e("code",[t._v("@import")]),t._v("独立引用主包或者分包的原子类样式文件，因此不会受到样式隔离的影响；当设置为"),e("code",[t._v("apply-shared")]),t._v("时，只有app和分包页面会引用对应的原子类样式文件，自定义组件需要通过配置样式隔离为"),e("code",[t._v("apply-shared")]),t._v("使原子类生效。")],1),t._v(" "),e("p",[t._v("在组件分包异步的情况下对应组件即使将样式隔离配置为"),e("code",[t._v("apply-shared")]),t._v("的情况下，"),e("code",[t._v("@mpxjs/unocss-plugin")]),t._v("也需要将"),e("code",[t._v("styleIsolation")]),t._v("设置为"),e("code",[t._v("isolated")]),t._v("才能正常工作，原因在于组件分包异步的情况下，组件被其他分包的页面所引用渲染，由于上述原子类样式分包输出的规则，其他分包的页面中可能并不包含当前组件所需的原子类，只有在"),e("code",[t._v("isolated")]),t._v("模式下由组件自身引用所需的原子类样式才能保证正常work，类似于"),e("code",[t._v("safelist")]),t._v("，我们也提供了"),e("RouterLink",{attrs:{to:"/api/compile.html#commentConfig"}},[e("code",[t._v("注释配置")])]),t._v("的方式对组件的"),e("code",[t._v("styleIsolation")]),t._v("模式进行局部配置，示例如下：")],1),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_styleIsolation: 'isolated' --\x3e")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 当前组件会直接引用对应主包或分包的原子类样式 --\x3e")]),t._v("\n     "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("@dark:(text-white bg-dark-500)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/83.ea65d6b1.js b/docs-vuepress/.vuepress/dist/assets/js/83.ea65d6b1.js
new file mode 100644
index 0000000000..8e958c5002
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/83.ea65d6b1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[83],{429:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"类名样式绑定"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#类名样式绑定"}},[t._v("#")]),t._v(" 类名样式绑定")]),t._v(" "),a("p",[t._v("Mpx利用wxs完整实现了Vue中的类名样式绑定，性能优良且没有任何使用限制（很多小程序框架基于字符串解析来实现该能力，只支持在模板上写简单的字面量，大大限制了使用场景）")]),t._v(" "),a("h2",{attrs:{id:"类名绑定"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#类名绑定"}},[t._v("#")]),t._v(" 类名绑定")]),t._v(" "),a("p",[t._v("类名绑定的增强指令是wx:class，可以与普通的class属性同时存在，在视图渲染中进行合成。")]),t._v(" "),a("h3",{attrs:{id:"对象语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#对象语法"}},[t._v("#")]),t._v(" 对象语法")]),t._v(" "),a("p",[t._v("wx:class中传入对象，key值为类名，value值控制该类名是否生效。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--支持传入对象字面量，此处视图的class="outer active"--\x3e')]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("outer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ {active:active, disabled:disabled} }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--直接直接传入对象数据，此处视图的class="inner selected"--\x3e')]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("inner"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{innerClass}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("disable")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("innerClass")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("selected")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"数组语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#数组语法"}},[t._v("#")]),t._v(" 数组语法")]),t._v(" "),a("p",[t._v("wx:class中传入字符串数组，字符串为类名。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--支持传入数组字面量，此处视图的class="outer active danger"--\x3e')]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("outer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ ['active', 'danger'] }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--直接直接传入数组数据，此处视图的class="inner selected"--\x3e')]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("inner"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{innerClass}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("innerClass")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selected'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"样式绑定"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#样式绑定"}},[t._v("#")]),t._v(" 样式绑定")]),t._v(" "),a("p",[t._v("样式的增强指令是wx:style，可以与普通的style属性同时存在，在视图渲染中进行合成。")]),t._v(" "),a("h3",{attrs:{id:"对象语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#对象语法"}},[t._v("#")]),t._v(" 对象语法")]),t._v(" "),a("p",[t._v("wx:style中传入用样式对象，带有横杠的样式名可以用驼峰写法来代替")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--支持传入对象字面量，模板会显得杂乱，此处视图的style="color:red;font-size:16px;font-weight:bold;"--\x3e')]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token special-attr"}},[a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),a("span",{pre:!0,attrs:{class:"token value css language-css"}},[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ {fontSize:'16px', fontWeight:'bold'} }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--更好的方式是直接传入对象数据，此处视图的style="color:blue;font-size:14px;"--\x3e')]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{innerStyle}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("innerStyle")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontSize")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'14px'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"数组语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#数组语法"}},[t._v("#")]),t._v(" 数组语法")]),t._v(" "),a("p",[t._v("wx:style同样支持传入数组将多个样式合成应用到视图上")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--此处视图的style="color:blue;font-size:14px;background-color:red;"--\x3e')]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ [baseStyle, activeStyle] }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("baseStyle")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontSize")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'14px'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("activeStyle")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("backgroundColor")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/84.d50d3d09.js b/docs-vuepress/.vuepress/dist/assets/js/84.d50d3d09.js
new file mode 100644
index 0000000000..7e7fe28c70
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/84.d50d3d09.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[84],{430:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"自定义组件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#自定义组件"}},[t._v("#")]),t._v(" 自定义组件")]),t._v(" "),s("p",[t._v("Mpx中的自定义组件完全基于小程序原生的自定义组件支持，与此同时，Mpx提供的数据响应和模板增强等一系列增强能力都能在自定义组件中使用。")]),t._v(" "),s("p",[t._v("原生自定义组件的规范详情查看"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"动态组件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#动态组件"}},[t._v("#")]),t._v(" 动态组件")]),t._v(" "),s("p",[t._v("Mpx中提供了使用方法类似于 Vue 的动态组件能力，这是一个基于 wx:if 实现的语法。通过对 "),s("code",[t._v("is")]),t._v(" 属性进行动态绑定，可以实现在同一个挂载点切换多个组件，前提需要动态切换的组件已经在全局或者组件中完成注册。\n使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- current为组件名称字符串，可选范围为局部注册的自定义组件和全局注册的自定义组件 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 当 `current`改变时，组件也会跟着切换  --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("component")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("is")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{current}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("current")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("current "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'list'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/list"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"test"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/test"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[t._v("#")]),t._v(" slot")]),t._v(" "),s("p",[t._v("在组件中使用slot（插槽）可以使我们封装的组件更具有可扩展性，Mpx完全支持原生插槽的使用。")]),t._v(" "),s("p",[t._v("简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 组件模板 --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- components/mySlot.mpx --\x3e")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("这是组件模板"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("slot")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slot1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("slot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("slot")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slot2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("slot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("下面是引入 "),s("code",[t._v("mySlot")]),t._v(" 组件的页面")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- index.mpx --\x3e")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("my-slot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slot1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我是slot1中的内容"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slot2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我是slot2中的内容"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("my-slot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("options")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("multipleSlots")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 启用多slot支持")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"my-slot"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"components/mySlot"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("更多详情可查看"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/85.1eed1486.js b/docs-vuepress/.vuepress/dist/assets/js/85.1eed1486.js
new file mode 100644
index 0000000000..7c03988647
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/85.1eed1486.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[85],{431:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"条件渲染"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#条件渲染"}},[t._v("#")]),t._v(" 条件渲染")]),t._v(" "),a("p",[t._v("Mpx中的条件渲染与原生小程序中完全一致，详情可以查看"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("简单示例如下:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 通过 wx:if 的语法来控制需要渲染的元素 --\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ score > 90 }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" A "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("elif")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ score > 60 }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" B "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("else")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" C "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 通过 wx:show 来控制元素的显示隐藏--\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("show")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ score > 90 }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" very good! "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("score")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("80")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/86.1ab04b8d.js b/docs-vuepress/.vuepress/dist/assets/js/86.1ab04b8d.js
new file mode 100644
index 0000000000..d6befc16b0
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/86.1ab04b8d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[86],{436:function(s,t,a){"use strict";a.r(t);var n=a(4),e=Object(n.a)({},(function(){var s=this,t=s._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h1",{attrs:{id:"css-处理"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#css-处理"}},[s._v("#")]),s._v(" CSS 处理")]),s._v(" "),t("h2",{attrs:{id:"css-预编译"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#css-预编译"}},[s._v("#")]),s._v(" CSS 预编译")]),s._v(" "),t("p",[s._v("Mpx 支持 CSS 预编译处理，你可以通过在 style 标签上设置 "),t("code",[s._v("lang")]),s._v(" 属性，来指定使用的 CSS 预处理器，此外需要在对应的 webpack 配置文件中\n加入对应的 loader 配置")]),s._v(" "),t("div",{staticClass:"language-html extra-class"},[t("pre",{pre:!0,attrs:{class:"language-html"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("\x3c!-- 使用 stylus --\x3e")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("<")]),s._v("style")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("lang")]),t("span",{pre:!0,attrs:{class:"token attr-value"}},[t("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("stylus"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),t("span",{pre:!0,attrs:{class:"token style"}},[t("span",{pre:!0,attrs:{class:"token language-css"}},[s._v("\n  .nav\n    width 100px\n    height 80px\n    color #f90\n    &"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v("hover\n      background-color #f40\n      color #fff\n")])]),t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("</")]),s._v("style")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),s._v("\n\n// getRules 配置文件\nrules: [\n    {\n        test: /\\.styl(us)?$/,\n        use: [\n            MpxWebpackPlugin.wxssLoader(),\n            'stylus-loader'\n        ]\n    }\n]\n")])])]),t("div",{staticClass:"language-html extra-class"},[t("pre",{pre:!0,attrs:{class:"language-html"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("\x3c!-- 使用 sass  --\x3e")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("<")]),s._v("style")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("lang")]),t("span",{pre:!0,attrs:{class:"token attr-value"}},[t("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("scss"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),t("span",{pre:!0,attrs:{class:"token style"}},[t("span",{pre:!0,attrs:{class:"token language-css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".nav")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("width")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 100px"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("height")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 80px"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v("color: #f90\n    &:hover")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("background-color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #f40"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #fff\n    "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])]),t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("</")]),s._v("style")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),s._v("\n\n// getRules 配置文件\nrules: [\n    {\n        test: /\\.scss$/,\n        use: [\n            'css-loader',\n            'sass-loader'\n        ]\n    }\n]\n")])])]),t("div",{staticClass:"language-html extra-class"},[t("pre",{pre:!0,attrs:{class:"language-html"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("\x3c!-- 使用 less --\x3e")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("<")]),s._v("style")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("lang")]),t("span",{pre:!0,attrs:{class:"token attr-value"}},[t("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("less"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),t("span",{pre:!0,attrs:{class:"token style"}},[t("span",{pre:!0,attrs:{class:"token language-css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".size")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("width")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 100px"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("height")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 80px\n  "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".nav")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    ."),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("size")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #f90"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v("&:hover")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("background-color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #f40"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #fff\n    "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])]),t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("</")]),s._v("style")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),s._v("\n\n// getRules 配置文件\nrules: [\n    {\n        test: /\\.less$/,\n        use: [\n            'css-loader',\n            'less-loader'\n        ]\n    }\n]\n\n")])])]),t("h2",{attrs:{id:"公共样式复用"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#公共样式复用"}},[s._v("#")]),s._v(" 公共样式复用")]),s._v(" "),t("p",[s._v("为了达到最大限度的样式复用，Mpx 提供了以下两种方式实现公共样式抽离，但是最终打包的效果有所区别。")]),s._v(" "),t("div",{staticClass:"language-styl extra-class"},[t("pre",{pre:!0,attrs:{class:"language-styl"}},[t("code",[t("span",{pre:!0,attrs:{class:"token selector"}},[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// styles/mixin.styl")]),s._v("\n.header-styl")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("width")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")]),t("span",{pre:!0,attrs:{class:"token unit"}},[s._v("%")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("height")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")]),t("span",{pre:!0,attrs:{class:"token unit"}},[s._v("px")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("background-color")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token hexcode"}},[s._v("#f00")])]),s._v("\n")])])]),t("h3",{attrs:{id:"style-src-复用"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-src-复用"}},[s._v("#")]),s._v(" style src 复用")]),s._v(" "),t("p",[s._v("通过给 style 标签添加 src 属性引入外部样式，最终公共样式代码只会打包一份。")]),s._v(" "),t("div",{staticClass:"language-template extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v('\x3c!-- index.mpx --\x3e\n<style lang="stylus" src="../styles/common.styl"></style>\n')])])]),t("div",{staticClass:"language-template extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v('\x3c!-- list.mpx --\x3e\n<style lang="stylus" src="../styles/common.styl"></style>\n')])])]),t("p",[s._v("Mpx 将 common.styl 中的代码经过 loader 编译后生成一份单独的 wxss 文件，这样既实现了样式抽离，又能节省打包后的代码体积。")]),s._v(" "),t("h3",{attrs:{id:"import-复用"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-复用"}},[s._v("#")]),s._v(" @import 复用")]),s._v(" "),t("p",[s._v("如果指定 style 标签的 lang 属性并且使用 @import 导入样式，那么这个文件经过对应的 loader 处理之后的内容会重复打包到引用它的文件目录下，并不会抽离成单独的文件，这样无形中增加了代码体积。")]),s._v(" "),t("div",{staticClass:"language-template extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v('\x3c!-- index.mpx --\x3e\n<style lang="stylus">\n  @import "../styles/mixin.styl"\n</style>\n')])])]),t("div",{staticClass:"language-template extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v('\x3c!-- list.mpx --\x3e\n<style lang="less">\n  @import "../styles/mixin.less";\n</style>\n')])])]),t("p",[s._v("如果导入的是一份 css 文件，则最终打包后的效果与 style src 一致。")]),s._v(" "),t("div",{staticClass:"language-styl extra-class"},[t("pre",{pre:!0,attrs:{class:"language-styl"}},[t("code",[t("span",{pre:!0,attrs:{class:"token selector"}},[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// styles/mixin.css")]),s._v("\n.header-css "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("width")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")]),t("span",{pre:!0,attrs:{class:"token unit"}},[s._v("%")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("height")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")]),t("span",{pre:!0,attrs:{class:"token unit"}},[s._v("px")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("background-color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token hexcode"}},[s._v("#f00")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")])]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("div",{staticClass:"language-template extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v('\x3c!-- index.mpx --\x3e\n<style>\n  @import "../styles/mixin.css";\n</style>\n')])])]),t("div",{staticClass:"language-template extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v('\x3c!-- list.mpx --\x3e\n<style>\n  @import "../styles/mixin.css";\n</style>\n')])])]),t("p",[s._v("对于多个页面或组件公用的样式，建议使用 style src 形式引入，避免一份样式被内联打成多份，同时还能使用 less、scss 等提升编码效率。")]),s._v(" "),t("h2",{attrs:{id:"css-压缩"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#css-压缩"}},[s._v("#")]),s._v(" CSS 压缩")]),s._v(" "),t("p",[s._v("在 production 模式下，框架默认会使用 "),t("a",{attrs:{href:"https://www.cssnano.cn/",target:"_blank",rel:"noopener noreferrer"}},[t("code",[s._v("cssnano")]),t("OutboundLink")],1),s._v(" 对 css 内容进行压缩。")]),s._v(" "),t("p",[s._v("框架默认内置 cssnano 的 default 预设，默认配置为：")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[s._v("cssnanoConfig "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[s._v("preset")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token string"}},[s._v("'cssnano-preset-default'")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" minimizeOptions"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("optimisation "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("||")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("p",[s._v("以上配置为框架内置，开发者无需手动配置。")]),s._v(" "),t("p",[s._v("如果你想要使用 cssnano advanced 预设，则需要在 wxssLoader 中传入配置开启")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[s._v("test")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token regex"}},[t("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[s._v("/")]),t("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[s._v("\\.(wxss|acss|css|qss|ttss|jxss|ddss)$")]),t("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[s._v("/")])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[s._v("use")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),s._v("\n    MpxWebpackPlugin"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("wxssLoader")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[s._v("minimize")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[s._v("advanced")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 使用 cssnano advanced preset")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[s._v("optimisation")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"token string-property property"}},[s._v("'autoprefixer'")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"token string-property property"}},[s._v("'discardUnused'")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"token string-property property"}},[s._v("'mergeIdents'")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n")])])]),t("p",[s._v("同时也需要安装 advanced 依赖：")]),s._v(" "),t("div",{staticClass:"language-bash extra-class"},[t("pre",{pre:!0,attrs:{class:"language-bash"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[s._v("npm")]),s._v(" i "),t("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-D")]),s._v(" cssnano-preset-advanced\n")])])]),t("p",[s._v("optimisation 配置可以点击"),t("a",{attrs:{href:"https://www.cssnano.cn/docs/what-are-optimisations/",target:"_blank",rel:"noopener noreferrer"}},[s._v("详情"),t("OutboundLink")],1),s._v("查看更多配置项。")])])}),[],!1,null,null,null);t.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/87.392384e7.js b/docs-vuepress/.vuepress/dist/assets/js/87.392384e7.js
new file mode 100644
index 0000000000..7b9836c366
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/87.392384e7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[87],{433:function(t,a,s){"use strict";s.r(a);var n=s(4),p=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"事件处理"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#事件处理"}},[t._v("#")]),t._v(" 事件处理")]),t._v(" "),a("p",[t._v("Mpx在事件处理上基于原生小程序，支持原生小程序的全部事件处理技术规范，在此基础上新增了事件处理内联传参的增强机制。")]),t._v(" "),a("p",[t._v("原生小程序事件处理详情请参考"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("增强的内联传参能力对于传递参数的个数和类型没有特殊限制，可以传递各种字面量，可以传递组件数据，甚至可以传递for中的item和index，\n当内联事件处理器中需要访问原始事件对象时，可以传递"),a("code",[t._v("$event")]),t._v("特殊关键字作为参数，在事件处理器的对应参数位置即可获取。")]),t._v(" "),a("p",[t._v("示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--原生小程序语法，通过dataset进行传参--\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data-name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("a"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--Mpx增强语法，模板内联传参，方便简洁--\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTapInline('b')"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("b"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--参数支持传递字面量和组件数据--\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTapInline(name)"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--参数同样支持传递for作用域下的item/index--\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{names}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTapInline(item)"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--需要使用原始事件对象时可以传递$event特殊关键字--\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTapInlineWithEvent('g', $event)"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("g"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'c'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("names")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'d'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'e'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'f'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTap")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("e")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dataset"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接通过参数获取数据，直观方便")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTapInline")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTapInlineWithEvent")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'event:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/88.a95133cd.js b/docs-vuepress/.vuepress/dist/assets/js/88.a95133cd.js
new file mode 100644
index 0000000000..e4492f8e22
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/88.a95133cd.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[88],{465:function(t,e,a){"use strict";a.r(e);var i=a(4),v=Object(i.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"介绍"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#介绍"}},[t._v("#")]),t._v(" 介绍")]),t._v(" "),e("h2",{attrs:{id:"mpx是什么？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mpx是什么？"}},[t._v("#")]),t._v(" Mpx是什么？")]),t._v(" "),e("p",[t._v("Mpx是一款致力于提高小程序开发体验和开发效率的增强型小程序框架，通过Mpx，我们能够高效优雅地开发出具有极致性能的优质小程序应用，并将其输出到各大小程序平台和web平台中运行。")]),t._v(" "),e("p",[t._v("Mpx的核心设计理念在于增强，这意味着Mpx是对小程序原生开发标准的补强和扩充，同时也兼容了原生开发标准。Mpx的一个设计理念在于尽可能地依赖小程序原生的自有能力，如路由系统，自定义组件，事件系统和slot等能力，因此用户在使用Mpx开发小程序时，需要对原生小程序开发有一定程度的掌握。所幸小程序开发本身并不困难，我们也会在本文档中对必要的原生小程序开发知识进行一定程度地说明。")]),t._v(" "),e("p",[t._v("微信小程序作为小程序的开山鼻祖，具有最完善的生态和最全面的特性支持，后来的所有小程序平台在技术方案和代码语法上都与微信小程序高度相似，Mpx目前完善支持了以微信小程序增强语法为base的跨平台输出能力，本文档在介绍原生小程序开发相关的部分时也会以微信小程序为例。")]),t._v(" "),e("p",[t._v("最后，Mpx是一个开发框架，不是组件库，这一点经常会有开发者搞混。Mpx兼容业内已有的小程序组件库，如vant/iview等，我们之后也会开源内部基于Mpx开发的跨端组件库。")]),t._v(" "),e("h2",{attrs:{id:"mpx提供了哪些能力？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mpx提供了哪些能力？"}},[t._v("#")]),t._v(" Mpx提供了哪些能力？")]),t._v(" "),e("h3",{attrs:{id:"单文件开发-sfc"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#单文件开发-sfc"}},[t._v("#")]),t._v(" 单文件开发(SFC)")]),t._v(" "),e("p",[t._v("Mpx使用类似Vue的单文件开发模式，小程序原本的template/js/style/json都可以写在单个的.mpx文件中，清晰便捷。")]),t._v(" "),e("h3",{attrs:{id:"数据响应"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#数据响应"}},[t._v("#")]),t._v(" 数据响应")]),t._v(" "),e("p",[t._v("数据响应是Mpx提供的核心增强能力，该能力主要受Vue的启发，主要包含数据赋值响应，watch api和computed计算属性等能力，关于该能力更详细的介绍可以查看"),e("RouterLink",{attrs:{to:"/guide/basic/reactive.html"}},[t._v("这里")])],1),t._v(" "),e("h3",{attrs:{id:"增强的模板语法"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#增强的模板语法"}},[t._v("#")]),t._v(" 增强的模板语法")]),t._v(" "),e("p",[t._v("同样受到Vue的启发，Mpx提供了很多增强模板语法便于开发者方便快捷地进行视图开发，主要包含以下：")]),t._v(" "),e("ul",[e("li",[e("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html#样式绑定"}},[t._v("wx:style动态样式")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html#类名绑定"}},[t._v("wx:class动态类名")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html"}},[t._v("wx:model双向绑定")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性"}},[t._v("wx:model-prop双向绑定属性")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性"}},[t._v("wx:model-event双向绑定事件")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#更改双向绑定事件数据路径"}},[t._v("wx:model-value-path双向绑定数据路径")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#双向绑定过滤器"}},[t._v("wx:model-filter双向绑定过滤器")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/refs.html"}},[t._v("wx:ref获取实例")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/conditional-render.html"}},[t._v("wx:show隐藏显示")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/component.html#动态组件"}},[t._v("component动态组件")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("事件处理内联传参")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/conditional-render.html"}},[t._v("模板条件编译")])],1)]),t._v(" "),e("h3",{attrs:{id:"极致性能"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#极致性能"}},[t._v("#")]),t._v(" 极致性能")]),t._v(" "),e("p",[t._v("Mpx在性能上做到了极致，我们在框架中通过模板数据依赖收集进行了深度的setData优化，做到了程序上的最优，让用户能够专注于业务开发；")]),t._v(" "),e("p",[t._v("其次，Mpx的编译构建完全基于依赖收集，支持按需进行的npm构建，能够自动根据用户的分包配置抽离共用模块，确保用户最终产出项目的包体积最优；")]),t._v(" "),e("p",[t._v("最后，Mpx的运行时框架部分仅占用51KB；")]),t._v(" "),e("p",[t._v("Mpx和业内其他框架的运行时性能对比可以参考"),e("a",{attrs:{href:"https://github.com/hiyuki/mp-framework-benchmark/blob/master/README.md",target:"_blank",rel:"noopener noreferrer"}},[t._v("这篇文章"),e("OutboundLink")],1)]),t._v(" "),e("h3",{attrs:{id:"状态管理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#状态管理"}},[t._v("#")]),t._v(" 状态管理")]),t._v(" "),e("p",[t._v("Mpx借鉴Vuex的设计实现一套与框架搭配使用的状态管理(store)工具，除了支持Vuex中已有的特性外，我们还创新地提出了一种多实例store的跨团队状态管理模式，我们在业务中实际使用后普遍认为该设计比原有的modules更加灵活方便，更多详情可以"),e("RouterLink",{attrs:{to:"/guide/advance/store.html"}},[t._v("查看这里")])],1),t._v(" "),e("h3",{attrs:{id:"编译构建"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#编译构建"}},[t._v("#")]),t._v(" 编译构建")]),t._v(" "),e("p",[t._v("Mpx的编译构建以webpack为基础，针对小程序项目结构深度定制开发了一个webpack插件和一系列loaders，整个构建过程完全基于依赖收集按需打包，兼容大部分webpack自身能力及生态，此外Mpx的编译构建还支持以下能力：")]),t._v(" "),e("ul",[e("li",[e("RouterLink",{attrs:{to:"/guide/advance/npm.html"}},[t._v("npm构建")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#分包"}},[t._v("分包构建")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/subpackage.html"}},[t._v("包体积优化")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/progressive.html#原生接入"}},[t._v("原生组件支持")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/ability-compatible.html"}},[t._v("原生能力兼容(custom-tab-bar/workers/云开发等)")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/plugin.html"}},[t._v("小程序插件")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/template.html#模板预编译"}},[t._v("模板预编译")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/css.html"}},[t._v("css预编译")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/image-process.html"}},[t._v("静态资源处理")])],1)]),t._v(" "),e("h3",{attrs:{id:"跨平台能力"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#跨平台能力"}},[t._v("#")]),t._v(" 跨平台能力")]),t._v(" "),e("p",[t._v("Mpx支持全部小程序平台(微信，支付宝，百度，头条，qq)的增强开发，同时支持将一份基于微信增强的业务源码输出到全部的小程序平台和web平台中运行，也即将支持输出快应用的能力，更多详情请"),e("RouterLink",{attrs:{to:"/guide/advance/platform.html"}},[t._v("查看这里")])],1),t._v(" "),e("h3",{attrs:{id:"完善的周边能力"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#完善的周边能力"}},[t._v("#")]),t._v(" 完善的周边能力")]),t._v(" "),e("p",[t._v("除了上述的核心能力外，Mpx还提供了丰富的周边能力支持，主要包括以下能力：")]),t._v(" "),e("ul",[e("li",[e("RouterLink",{attrs:{to:"/guide/extend/fetch.html"}},[t._v("网络请求")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/extend/mock.html"}},[t._v("数据mock")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/extend/api-proxy.html"}},[t._v("api增强抹平")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/api/extend.html#webview-bridge"}},[t._v("webview抹平")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/tool/ts.html"}},[t._v("Typescript支持")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/i18n.html"}},[t._v("I18n国际化")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/tool/unit-test.html"}},[t._v("单元测试")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/tool/e2e-test.html"}},[t._v("E2E测试")])],1)]),t._v(" "),e("p",[t._v("Mpx具有以下功能特性：")]),t._v(" "),e("ul",[e("li",[t._v("数据响应 (赋值响应 / "),e("RouterLink",{attrs:{to:"/guide/basic/reactive.html"}},[t._v("watch")]),t._v(" / "),e("RouterLink",{attrs:{to:"/guide/basic/reactive.html"}},[t._v("computed")]),t._v(")")],1),t._v(" "),e("li",[t._v("增强模板语法 ("),e("RouterLink",{attrs:{to:"/guide/basic/component.html#动态组件"}},[t._v("动态组件")]),t._v(" / "),e("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html"}},[t._v("样式绑定 / 类名绑定 ")]),t._v(" / "),e("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("内联事件函数")]),t._v(" / "),e("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html"}},[t._v("双向绑定")]),t._v(" / "),e("RouterLink",{attrs:{to:"/guide/basic/refs.html"}},[t._v("refs")]),t._v(")")],1),t._v(" "),e("li",[t._v("极致性能 ("),e("RouterLink",{attrs:{to:"/guide/understand/runtime.html"}},[t._v("运行时性能优化")]),t._v(" / "),e("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#分包"}},[t._v("包体积优化")]),t._v(" / 框架运行时体积14KB)")],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/understand/compile.html"}},[t._v("高效强大的编译构建")]),t._v(" (基于webpack / 兼容webpack生态 / 兼容原生小程序 / 完善支持npm场景下的分包输出 / 高效调试)")],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/single-file.html"}},[t._v("单文件组件开发")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/progressive.html"}},[t._v("渐进接入 / 原生组件支持")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/store.html"}},[t._v("状态管理")]),t._v(" (Vuex规范 / 支持多实例Store)")],1),t._v(" "),e("li",[t._v("跨团队开发 ("),e("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#packages"}},[t._v("packages")]),t._v(")")],1),t._v(" "),e("li",[t._v("逻辑复用 ("),e("RouterLink",{attrs:{to:"/guide/advance/mixin.html"}},[t._v("mixins")]),t._v(")")],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/extend/"}},[t._v("周边能力支持")]),t._v(" (fetch / api增强 / mock / webview-bridge)")],1),t._v(" "),e("li",[t._v("脚手架支持")]),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/platform.html#多平台支持"}},[t._v("多平台增强")]),t._v(" (支持在微信、支付宝、百度、qq、头条小程序平台中进行增强开发)")],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/platform.html#跨平台编译"}},[t._v("跨平台编译")]),t._v(" (支持以微信为base，将一套代码转换输出到支付宝、百度、qq、头条小程序平台和"),e("RouterLink",{attrs:{to:"/guide/advance/platform.html#跨平台输出web"}},[t._v("web平台")]),t._v("中运行)")],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/tool/ts.html"}},[t._v("TypeScript支持")]),t._v(" (基于ThisType实现了完善的类型推导)")],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/tool/i18n.html"}},[t._v("I18n国际化")])],1),t._v(" "),e("li",[t._v("单元测试支持 (即将到来)")]),t._v(" "),e("li",[t._v("快应用输出 (即将到来)")])]),t._v(" "),e("h2",{attrs:{id:"对比其他小程序框架"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#对比其他小程序框架"}},[t._v("#")]),t._v(" 对比其他小程序框架")]),t._v(" "),e("p",[t._v("目前业内的小程序框架主要分为两类，一类是以uniapp，taro2为代表的静态编译型框架，这类框架以静态编译为主要手段，将React和Vue开发的业务源码转换到小程序环境中进行适配运行。这类框架的主要优点在于web项目迁移方便，跨端能力较强。但是由于React/Vue等web框架的DSL与小程序本身存在较大差距，无法完善支持原web框架的全部能力，开发的时候容易踩坑。")]),t._v(" "),e("p",[t._v("另一类是以kbone，taro3为代表的运行时框架，这类框架利用小程序本身提供的动态渲染能力，在小程序中模拟出web的运行时环境，让React/Vue等框架直接在上层运行。这类框架的优点在于web项目迁移方便，且在web框架语法能力的支持上比静态编译型的框架要强很多，开发时遇到的坑也会少很多。但是由于模拟的web运行时环境带来了巨大的性能开销，这类框架并不适合用于大型复杂的小程序开发。")]),t._v(" "),e("p",[t._v("不同于上面两类框架，Mpx以小程序本身的DSL为基础，通过编译和运行时手段结合对其进行了一系列拓展增强，没有复杂庞大的转译和环境抹平，在提升用户开发体验和效率的同时，既能保障开发的稳定和可预期性，又能保障接近原生的良好性能，非常适合开发大型复杂的小程序应用。")]),t._v(" "),e("p",[t._v("在跨端方面，Mpx重点保障跨小程序平台的跨端能力，由于各家小程序标准具有很强的相似性，Mpx在进行跨端输出时，以静态编译为主要手段，辅以灵活便捷的条件编译，保障了跨端输出的性能和可用性。")])])}),[],!1,null,null,null);e.default=v.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/89.213efaae.js b/docs-vuepress/.vuepress/dist/assets/js/89.213efaae.js
new file mode 100644
index 0000000000..3a35e44ba4
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/89.213efaae.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[89],{434:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"列表渲染"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#列表渲染"}},[t._v("#")]),t._v(" 列表渲染")]),t._v(" "),a("p",[t._v("Mpx中的列表渲染与原生小程序中完全一致，详情可以查看"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("blockquote",[a("p",[t._v("值得注意的是wx:key与Vue中的key属性的区别，不能使用数据绑定，只能传递普通字符串将数组item中的对应属性作为key，或者传入保留关键字*this将item本身作为key")])]),t._v(" "),a("p",[t._v("下面是简单示例：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 使用数组中元素的 id属性/保留关键字*this 作为key值  --\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{titleList}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- item 默认代表数组的当前项 --\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item.id}}: {{item.name}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("titleList")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"特殊处理"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#特殊处理"}},[t._v("#")]),t._v(" \b特殊处理")]),t._v(" "),a("p",[t._v("当列表中一些需要特殊二次处理的数据，可参考下列两种方式")]),t._v(" "),a("h3",{attrs:{id:"computed方式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#computed方式"}},[t._v("#")]),t._v(" computed方式")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 使用数组中元素的 id属性/保留关键字*this 作为key值  --\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{refactorTitleList}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- item 默认代表数组的当前项 --\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item.id}}: {{item.name}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- bad方式 不可用computed或methods中方法处理 --\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- <view>{{item.id}}: {{format(item.name)}}</view> --\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("titleList")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nameMap")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'1'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mpx'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("refactorTitleList")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("titleList"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 列表中需要特殊处理的数据可在computed中处理好再渲染")]),t._v("\n          item"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nameMap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("item"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nameMap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("item"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" item"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name\n          "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" item\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"wxs方式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wxs方式"}},[t._v("#")]),t._v(" wxs方式")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("wxs")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("module")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("foo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    var formatName = function (item, nameMap) {\n      // 这里区别string和number\n      var id = ''+item.id\n      if(nameMap[id]){\n        return nameMap[id];\n      }\n      return item.name;\n    }\n    module.exports = {\n      formatName: formatName\n    };\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("wxs")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 使用数组中元素的 id属性/保留关键字*this 作为key值  --\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{titleList}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- item 默认代表数组的当前项 --\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item.id}}: {{foo.formatName(item, nameMap)}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("titleList")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nameMap")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'1'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mpx'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/9.26319460.js b/docs-vuepress/.vuepress/dist/assets/js/9.26319460.js
new file mode 100644
index 0000000000..8754f4cad4
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/9.26319460.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{342:function(t,e,s){},361:function(t,e,s){"use strict";s(342)},374:function(t,e,s){"use strict";s.r(e);var a={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},i=(s(361),s(4)),n=Object(i.a)(a,(function(){return(0,this._self._c)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"488b05bd",null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/90.ef03688f.js b/docs-vuepress/.vuepress/dist/assets/js/90.ef03688f.js
new file mode 100644
index 0000000000..c522baa2fe
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/90.ef03688f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[90],{437:function(t,a,s){"use strict";s.r(a);var n=s(4),p=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"模版内可选链表达式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#模版内可选链表达式"}},[t._v("#")]),t._v(" 模版内可选链表达式")]),t._v(" "),a("p",[t._v("Mpx提供了在模版中使用可选链"),a("code",[t._v("?.")]),t._v("访问变量属性的能力，用法/能力和JS的可选链基本一致，可以在任意被"),a("code",[t._v("{{}}")]),t._v("所包裹的模版语法内使用。")]),t._v(" "),a("blockquote",[a("p",[t._v("实现原理是在编译时将使用"),a("code",[t._v("?.")]),t._v("的部分转化为"),a("code",[t._v("wxs")]),t._v("函数调用，运行时通过"),a("code",[t._v("wxs")]),t._v("访问变量属性，模拟出可选链的效果。")])]),t._v(" "),a("p",[t._v("使用示例：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[t._v("  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ a?.b }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ a?.c + a?.d }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ a?.d || [] }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ a?.d ? 'a' : 'b' }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ a?.g[e?.d] }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("123")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("g")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("d")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("321")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("e")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("d")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'d'")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  ")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/91.43930d52.js b/docs-vuepress/.vuepress/dist/assets/js/91.43930d52.js
new file mode 100644
index 0000000000..cf3773abab
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/91.43930d52.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[91],{439:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"数据响应"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#数据响应"}},[t._v("#")]),t._v(" 数据响应")]),t._v(" "),s("p",[t._v("Vue中最为开发者们所津津乐道的特性就是其数据响应特性，Vue中的数据响应特性主要包含：响应数据赋值、watch观察数据和computed计算属性，该能力让我们能够以非常直观简洁的方式建立起数据与数据之间/数据与视图之间的绑定依赖关系，大幅提升复杂webapp的开发体验和开发效率。")]),t._v(" "),s("p",[t._v("受此启发，Mpx通过增强的方式在小程序开发中提供了完整的数据响应特性，在2.5.x版本前，Mpx通过mobx实现内部和核心数据响应，在2.5.x版本之后，从数据响应性能、完整度和运行时包体积等多方面角度考虑，我们借鉴了Vue2的设计，在内部自行维护了一套精简高效的数据响应系统，全面移除了对于mobx的依赖。")]),t._v(" "),s("p",[t._v("在新的响应系统中，所有的使用方法和使用限制都和Vue保持一致，关于数据响应的原理和使用限制可以参考"),s("a",{attrs:{href:"https://cn.vuejs.org/v2/guide/reactivity.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("下面是一个小程序数据响应的简单示例：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Num: {{num}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Minus num: {{mnum}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Num plus: {{nump}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{info.name}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{info.age}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{info.age}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// data中定义的数据会在初始化时进行数据响应处理")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("num")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("info")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置中直接定义watch")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("num")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 定义计算属性，模板中可以直接访问")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mnum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nump")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 支持计算属性的setter")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" val "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用实例方法定义watch，可以传递追踪函数更加灵活")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nump "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mnum\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 每隔一秒进行一次更新，相关watcher会被触发，视图也会发生更新")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setInterval")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用$set新增响应属性，视图同样能够得到更新")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'age'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("23")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/92.ae5e9611.js b/docs-vuepress/.vuepress/dist/assets/js/92.ae5e9611.js
new file mode 100644
index 0000000000..a6cf10550a
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/92.ae5e9611.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[92],{438:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"获取组件实例-节点信息"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#获取组件实例-节点信息"}},[t._v("#")]),t._v(" 获取组件实例/节点信息")]),t._v(" "),s("p",[t._v("微信小程序中原生提供了"),s("code",[t._v("selectComponent/SelectorQuery.select")]),t._v("方法获取自定义组件实例和wxml节点信息，但是该api使用起来不太方便，并且不具备平台无关性，我们提供了增强指令"),s("code",[t._v("wx:ref")]),t._v("用于获取组件实例及节点信息，该指令的使用方式同vue中的ref类似，在模板中声明了"),s("code",[t._v("wx:ref")]),t._v("后，在组件ready后用户可以通过"),s("code",[t._v("this.$refs")]),t._v("获取对应的组件实例或节点查询对象(NodeRefs)，调用响应的组件方法或者获取视图节点信息。")]),t._v(" "),s("blockquote",[s("p",[s("code",[t._v("wx:ref")]),t._v("其实也是模板编译和运行时注入结合实现的语法糖，本质还是通过原生小程序平台提供的能力进行获取，其实现的主要意义在于抹平跨平台差异以及提升用户的使用体验。")])]),t._v(" "),s("p",[t._v("简单的使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- my-header 为一个组件，组件内部定义了一个 show 方法 --\x3e")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("my-header")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("myHeader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("my-header")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 this.$refs 获取view的节点查询对象")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fields")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("size")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// res 就是我们要拿到的节点大小")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 this.$refs 可直接获取组件实例")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("myHeader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("show")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 拿到组件实例，调用组件内部的方法")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  ")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"在列表渲染中使用-wx-ref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在列表渲染中使用-wx-ref"}},[t._v("#")]),t._v(" 在列表渲染中使用"),s("code",[t._v("wx:ref")])]),t._v(" "),s("p",[t._v("在列表渲染中定义的"),s("code",[t._v("wx:ref")]),t._v("存在多个实例/节点，Mpx会在模板编译中判断某个"),s("code",[t._v("wx:ref")]),t._v("是否存在于列表渲染"),s("code",[t._v("wx:for")]),t._v("中，是的情况下在注入"),s("code",[t._v("this.$refs")]),t._v("时会通过"),s("code",[t._v("selectAllComponents/SelectQuery.selectAll")]),t._v("方法获取组件实例数组或数组节点查询对象，确保开发者能拿到列表渲染中所有的组件实例/节点信息。")]),t._v(" "),s("p",[t._v("使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- list 组件 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("list")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{listData}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{item.name}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- view 节点 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("test"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{listData}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item.name}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("listData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 this.$refs.list 获取的是组件实例的数组")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对每一个组件实例的操作...")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 this.$refs.test 获取的是节点查询对象，通过相关的方法操作节点")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("test"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fields")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("size")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此处拿到的 res 是一个数组，包含了列表渲染中的所有节点的大小信息")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/93.3cdab647.js b/docs-vuepress/.vuepress/dist/assets/js/93.3cdab647.js
new file mode 100644
index 0000000000..dcaab07949
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/93.3cdab647.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[93],{440:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"单文件开发"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#单文件开发"}},[t._v("#")]),t._v(" 单文件开发")]),t._v(" "),s("p",[t._v("小程序规范中每个页面和组件都是由四个文件描述组成的，wxml/js/wxss/json，分别描述了组件/页面的视图模板，执行逻辑，样式和配置，由于这四个部分彼此之间存在相关性，比如模板中的组件需要在json中注册，数据需要在js中定义，这种离散的文件结构在实际开发的时候体验并不理想；受Vue单文件开发的启发，Mpx也提供了类似的单文件开发模式，拓展名为.mpx。")]),t._v(" "),s("p",[t._v("从下面的简单例子可以看出，.mpx中的四个区块分别对应了原生规范中的四个文件，Mpx在执行编译构建时会通过内置的"),s("code",[t._v("mpx-loader")]),t._v("收集依赖，并将.mpx的文件转换输出为原生规范中的四个文件。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--对应wxml文件--\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--对应js文件--\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLoad")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--对应wxss文件--\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--对应json文件--\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/list"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/94.72df7b53.js b/docs-vuepress/.vuepress/dist/assets/js/94.72df7b53.js
new file mode 100644
index 0000000000..eee51c3344
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/94.72df7b53.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[94],{443:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"快速开始"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#快速开始"}},[t._v("#")]),t._v(" 快速开始")]),t._v(" "),s("h2",{attrs:{id:"安装脚手架"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装脚手架"}},[t._v("#")]),t._v(" 安装脚手架")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-g")]),t._v(" @mpxjs/cli\n")])])]),s("blockquote",[s("p",[t._v("@mpxjs/cli文档 https://github.com/mpx-ecology/mpx-cli")])]),t._v(" "),s("h2",{attrs:{id:"创建项目安装依赖"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#创建项目安装依赖"}},[t._v("#")]),t._v(" 创建项目安装依赖")]),t._v(" "),s("p",[t._v("在当前目录下创建mpx项目。")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("mpx create mpx-project\n")])])]),s("p",[t._v("也可以使用npx在不全局安装脚手架情况下创建项目。")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("npx @mpxjs/cli create mpx-project\n")])])]),s("p",[t._v("执行命令后会弹出一系列问题进行项目初始配置，根据自身需求进行选择，完成后进入项目目录进行依赖安装。")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("创建"),s("code",[t._v("插件项目")]),t._v("由于微信限制必须填写插件的"),s("code",[t._v("AppID")]),t._v("，创建"),s("code",[t._v("普通项目")]),t._v("无强制要求。")])]),t._v(" "),s("h2",{attrs:{id:"编译构建"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编译构建"}},[t._v("#")]),t._v(" 编译构建")]),t._v(" "),s("p",[t._v("使用npm script执行mpx的编译构建，在开发模式下我们执行serve命令，将项目源码构建输出到"),s("code",[t._v("dist/${平台目录}")]),t._v("下，并且监听源码的改动进行重新编译。")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" run serve\n")])])]),s("h2",{attrs:{id:"预览调试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#预览调试"}},[t._v("#")]),t._v(" 预览调试")]),t._v(" "),s("p",[t._v("使用小程序开发者工具打开dist下对应平台的目录，对你的小程序进行预览、调试，详情可参考"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("小程序开发指南"),s("OutboundLink")],1)]),t._v(" "),s("blockquote",[s("p",[t._v("开启小程序开发者工具的watch选项，配合mpx本身的watch，能够得到很好的开发调试体验。")])]),t._v(" "),s("h2",{attrs:{id:"开始code"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开始code"}},[t._v("#")]),t._v(" 开始code")]),t._v(" "),s("p",[t._v("在Mpx中，我们使用"),s("code",[t._v("@mpxjs/core")]),t._v("提供的createApp、createPage和createComponent函数（分别对应原生小程序中的App、Page和Component）来创建App、页面和组件，我们下面根据脚手架创建出的初始项目目录，进行简单的介绍。")]),t._v(" "),s("p",[t._v("进入src/app.mpx，我们可以看到里面的结构和.vue文件非常类似，三个区块分别对应了小程序中的js/wxss/json文件。")]),t._v(" "),s("p",[t._v("js区块中调用createApp用于注册小程序，传入的配置可以参考"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("小程序App构造器"),s("OutboundLink")],1),t._v("，由于app.js是小程序全局最早执行的js模块，一般mpx插件安装等初始化操作也在这里进行。")]),t._v(" "),s("p",[t._v("style区块对应app.wxss定义了全局样式，可以自由使用sass/less/stylus等css预编译语言。")]),t._v(" "),s("p",[t._v("json区块完全支持小程序原生的"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("app.json配置"),s("OutboundLink")],1),t._v("，还额外支持了"),s("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#packages"}},[t._v("packages多人合作")]),t._v("等增强特性。")],1),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\n  mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePromise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  \n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLaunch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n  .bold\n    font-weight bold\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("进入src/pages/index.mpx，可以看到同样是.vue风格的单文件结构，比起上面的app.mpx多了一个template区块，用于定义页面模板，除了支持小程序本身的全部模块语法和指令外，mpx还参考vue提供了大量"),s("RouterLink",{attrs:{to:"/api/directives.html"}},[t._v("模板增强指令")]),t._v("，便于用户更快速高效地进行界面开发。")],1),t._v(" "),s("p",[t._v("在js中调用createPage创建页面时，除了支持原本小程序支持的"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Page配置"),s("OutboundLink")],1),t._v("外，我们还支持以"),s("RouterLink",{attrs:{to:"/guide/basic/reactive.html"}},[t._v("数据响应")]),t._v("为核心的一系列增强能力。")],1),t._v(" "),s("p",[t._v("在json中，我们同样支持原生的"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("页面json配置"),s("OutboundLink")],1),t._v("，此外，我们能够直接在"),s("code",[t._v("usingComponents")]),t._v("中填写npm地址引用npm包中的组件，mpx组件和原生小程序组件均可引用，无需调用开发者工具npm编译，且能够通过依赖收集按需进行打包。")]),t._v(" "),s("blockquote",[s("p",[t._v("为了保障增强能力的完整性，在支持的平台中Mpx优先使用Component构造器创建页面，支持全部Component生命周期；在某些特殊情况下，你可以在"),s("RouterLink",{attrs:{to:"/api/compile.html#forceusepagector"}},[t._v("@mpxjs/webpack-plugin")]),t._v("中传入forceUsePageCtor:true配置来禁用掉这个行为。")],1)]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLoad")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/list"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("最后，我们进入src/components/list.mpx文件，可以看到其构成与页面文件十分相似，对于组件，Mpx提供了和页面完全一致的增强能力")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{listData}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("listData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手机'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电视'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电脑'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n  .list\n    background-color red\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"component"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("更多用法可以查看我们的官方实例："),s("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/examples/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/didi/mpx/tree/master/examples/"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"跨平台输出"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#跨平台输出"}},[t._v("#")]),t._v(" 跨平台输出")]),t._v(" "),s("p",[t._v("如果你选择的base平台为微信，mpx提供了强大的跨平台输出能力，能够将你的小程序源码输出到目前业内的全部小程序平台(微信/支付宝/百度/头条/QQ)中和web平台中运行。")]),t._v(" "),s("p",[t._v("执行以下命令进行跨平台输出")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" run build:cross\n")])])]),s("p",[t._v("关于跨平台能力的更多详情请查看"),s("RouterLink",{attrs:{to:"/guide/advance/platform.html"}},[t._v("这里")])],1)])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/95.c8e36604.js b/docs-vuepress/.vuepress/dist/assets/js/95.c8e36604.js
new file mode 100644
index 0000000000..d851b55941
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/95.c8e36604.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[95],{442:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"模板语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模板语法"}},[t._v("#")]),t._v(" 模板语法")]),t._v(" "),s("p",[t._v("Mpx中的模板语法以小程序模板语法为基础，支持小程序的全部模板语法，同时提供了一系列增强的模板指令及语法。")]),t._v(" "),s("p",[t._v("小程序原生模板语法请参考"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("Mpx提供的增强指令语法如下：")]),t._v(" "),s("ul",[s("li",[s("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html#样式绑定"}},[t._v("wx:style动态样式")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html#类名绑定"}},[t._v("wx:class动态类名")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html"}},[t._v("wx:model双向绑定")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性"}},[t._v("wx:model-prop双向绑定属性")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性"}},[t._v("wx:model-event双向绑定事件")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#更改双向绑定事件数据路径"}},[t._v("wx:model-value-path双向绑定数据路径")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#双向绑定过滤器"}},[t._v("wx:model-filter双向绑定过滤器")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/refs.html"}},[t._v("wx:ref获取实例")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/conditional-render.html"}},[t._v("wx:show隐藏显示")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/component.html#动态组件"}},[t._v("component动态组件")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("事件处理内联传参")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/template.html"}},[t._v("模板条件编译")])],1)]),t._v(" "),s("p",[t._v("下面是使用了模板增强语法的一个简单实例，许多在原生小程序上很繁琐的模板描述在增强语法的帮助下变得清晰简洁：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--动态样式--\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{dynamicStyle}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--数据绑定--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{title}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--计算属性数据绑定--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{reversedTitle}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--循环渲染，动态类名，事件处理内联传参--\x3e")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ {active:item.active} }}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap(index)"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item.content}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--循环内部双向数据绑定--\x3e")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list[index].content}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--自定义组件获取实例，双向绑定，自定义双向绑定属性及事件--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("custom-input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ci"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{customInfo}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-prop")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-event")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("change"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--动态组件，is传入组件名字符串，可使用的组件需要在json中注册，全局注册也生效--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("component")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("is")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{current}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--显示/隐藏dom--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bottom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("show")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{showBottom}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--模板条件编译，__mpx_mode__为框架注入的环境变量，条件判断为false的模板不会生成到dist--\x3e")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'wx'}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("wx env"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'ali'}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("ali env"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 动态样式和类名也可以使用computed返回")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dynamicStyle")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'16px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello world'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'全军出击'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'猥琐发育，别浪'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("customInfo")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test content'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("current")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'com-a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("showBottom")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reversedTitle")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("split")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reverse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTap")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("index")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理函数直接通过参数获取当前点击的index，清晰简洁")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("active "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("active\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"custom-input"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/custom-input"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"com-a"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/com-a"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"com-b"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/com-b"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"模板预编译"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模板预编译"}},[t._v("#")]),t._v(" 模板预编译")]),t._v(" "),s("p",[t._v("Mpx还支持开发者使用插值语法与小程序不冲突第三方的模板引擎语法来编写template，如pug：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pug"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('\n  view(class="list")\n    view(class="list-item") red\n    view(class="list-item") blue\n    view(class="list-item") green\n'),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/96.1ebdc00d.js b/docs-vuepress/.vuepress/dist/assets/js/96.1ebdc00d.js
new file mode 100644
index 0000000000..811234c7c1
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/96.1ebdc00d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[96],{441:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"双向绑定"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#双向绑定"}},[t._v("#")]),t._v(" 双向绑定")]),t._v(" "),a("p",[t._v("Mpx针对表单组件提供了"),a("code",[t._v("wx:model")]),t._v("双向绑定指令，类似于"),a("code",[t._v("v-model")]),t._v("，该指令是一个语法糖指令，监听了组件抛出的输入事件并对绑定的数据进行更新，默认情况下会监听表单组件的"),a("code",[t._v("input")]),t._v("事件，并将"),a("code",[t._v("event.detail.value")]),t._v("中的数据更新到组件的"),a("code",[t._v("value")]),t._v("属性上。")]),t._v(" "),a("p",[t._v("简单实用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--view中的文案会随着用户对输入框进行输入而实时更新--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"对自定义组件使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#对自定义组件使用"}},[t._v("#")]),t._v(" 对自定义组件使用")]),t._v(" "),a("p",[t._v("对自定义组件使用双向绑定时用法与原生小程序组件完全一致")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("custom-input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--此处的文案会随着输入框输入实时更新--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"更改双向绑定的监听事件及数据属性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#更改双向绑定的监听事件及数据属性"}},[t._v("#")]),t._v(" 更改双向绑定的监听事件及数据属性")]),t._v(" "),a("p",[t._v("如前文所述，"),a("code",[t._v("wx:model")]),t._v("指令默认监听组件抛出的"),a("code",[t._v("input")]),t._v("事件，并将声明的数据绑定到组件的"),a("code",[t._v("value")]),t._v("属性上，该行为在一些原生组件和自定义组件上并不成立，因为这些组件可能不存在"),a("code",[t._v("input")]),t._v("事件或"),a("code",[t._v("value")]),t._v("属性。对此，我们提供了"),a("code",[t._v("wx:model-event")]),t._v("和"),a("code",[t._v("wx:model-prop")]),t._v("指令来修改双向绑定的监听事件和数据属性，使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--原生组件picker中没有input事件，通过wx:model-event指令将双向绑定监听事件改为change事件--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("picker")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("selector"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("range")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{countryRange}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{country}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-event")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("change"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("picker"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      当前选择: {{country}}\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("picker")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--通过wx:model-event和wx:model-prop将该自定义组件的双向绑定监听事件和数据属性修改为customInput/customValue--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("custom-input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-event")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("customInput"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-prop")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("customValue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"更改双向绑定事件数据路径"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#更改双向绑定事件数据路径"}},[t._v("#")]),t._v(" 更改双向绑定事件数据路径")]),t._v(" "),a("p",[t._v("Mpx中双向绑定默认使用event对象中的"),a("code",[t._v("event.detail.value")]),t._v("作为用户输入来更新组件数据，该行为在一些原生组件和自定义组件中也不成立，例如vant中的field输入框组件，用户的输入直接存储在"),a("code",[t._v("event.detail")]),t._v("当中，当然用户也可以将其存放在detail中的其他数据路径下，对此，我们提供了"),a("code",[t._v("wx:model-value-path")]),t._v("指令让用户声明在事件当中应该访问的数据路径。")]),t._v(" "),a("p",[t._v("由于小程序triggerEvent的Api设计，事件的用户数据都只能存放在"),a("code",[t._v("event.detail")]),t._v("中，因此"),a("code",[t._v("wx:model-value-path")]),t._v("的值都是相对于"),a("code",[t._v("event.detail")]),t._v("的数据路径，我们支持两种形式进行声明：")]),t._v(" "),a("ul",[a("li",[t._v("一种是点语法，如传入"),a("code",[t._v("current.value")]),t._v("时框架会从"),a("code",[t._v("event.detail.current.value")]),t._v("中取值作为用户输入，为空字符串时"),a("code",[t._v('wx:model-value-path=""')]),t._v("代表直接使用"),a("code",[t._v("event.detail")]),t._v("作为用户输入；")]),t._v(" "),a("li",[t._v("第二种是数组字面量的JSON字符串，如"),a("code",[t._v('["current", "value"]')]),t._v("与上面的"),a("code",[t._v("current.value")]),t._v("等价，传入"),a("code",[t._v("[]")]),t._v("时与上面的空字符串等价。")])]),t._v(" "),a("p",[t._v("使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--wx:model-value-path传入[]直接使用event.detail作为用户输入，使vant-field中双向绑定能够生效--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("van-field")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{username}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-value-path")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("[]"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("label")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("用户名"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("placeholder")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("请输入用户名"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"双向绑定过滤器"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#双向绑定过滤器"}},[t._v("#")]),t._v(" 双向绑定过滤器")]),t._v(" "),a("p",[t._v("用户可以使用"),a("code",[t._v("wx:model-filter")]),t._v("指令定义双向绑定过滤器，在修改数据之前对用户输入进行过滤，来实现特定的效果，框架内置了"),a("code",[t._v("trim")]),t._v("过滤器对用户输入进行trim操作，传入其他字符串时会使用当前组件中的同名方法作为自定义过滤器，使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--以下示例中，用户输入的首尾空格将被过滤--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-filter")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("trim"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/97.fa1ed9e7.js b/docs-vuepress/.vuepress/dist/assets/js/97.fa1ed9e7.js
new file mode 100644
index 0000000000..ac67e84306
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/97.fa1ed9e7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[97],{446:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"组合式-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api"}},[t._v("#")]),t._v(" 组合式 API")]),t._v(" "),s("h2",{attrs:{id:"什么是组合式-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#什么是组合式-api"}},[t._v("#")]),t._v(" 什么是组合式 API")]),t._v(" "),s("p",[t._v("组合式 API 是 Vue3 中包含的最重要的特性之一，主要由 "),s("code",[t._v("setup")]),t._v(" 函数及一系列响应式 API 及生命周期钩子函数组成，与传统的选项式 API 相比，组合式 API 具备以下优势：")]),t._v(" "),s("ul",[s("li",[t._v("更好的逻辑复用，通过函数包装复用逻辑，显式引入调用，方便简洁且符合直觉，规避消除了 mixins 复用中存在的缺陷；")]),t._v(" "),s("li",[t._v("更灵活的代码组织，相比于选项式 API 提前规定了代码的组织方式，组合式 API 在这方面几乎没有做任何限制与规定，更加灵活自由，在功能复杂的庞大组件中，我们能够通过组合式 API 让我们的功能代码更加内聚且有条理，不过这也会对开发者自身的代码规范意识提出更高要求；")]),t._v(" "),s("li",[t._v("更方便的类型推导，虽然基于 "),s("code",[t._v("this")]),t._v(" 的选项式 API 通过 "),s("code",[t._v("ThisType")]),t._v(" 也能在一定程度上实现 TS 类型推导，但推导和实现成本较高，同时仍然无法完美覆盖一些复杂场景（如嵌套 mixins 等）；而组合式 API 以本地变量和函数为基础，本身就是类型友好的，我们在类型方面几乎不需要做什么额外的工作就能享受到完美的类型推导。")])]),t._v(" "),s("p",[t._v("同时与 React Hooks 相比，组合式 API 中的 "),s("code",[t._v("setup")]),t._v(" 函数只在初始化时单次执行，在数据响应能力的加持下大大降低了理解与使用成本，基于以上原因，我们决定为 Mpx 添加组合式 API 能力，让用户能够用组合式 API 方式进行小程序开发。")]),t._v(" "),s("p",[t._v("更多关于组合式 API 的说明可以查看 "),s("a",{attrs:{href:"https://vuejs.org/guide/extras/composition-api-faq.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue3 官方文档"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("p",[t._v("Mpx 是一个小程序优先的增强型跨端框架，因此我们在为 Mpx 设计实现组合式 API 的过程中，并不追求与 Vue3 中的组合式 API 完全一致，我们更多是借鉴 Vue3 中组合式 API 的设计思想，将其与目前 Mpx 及小程序中的开发模式结合起来，而非完全照搬其实现。因此在 Mpx 中一些具体的 API 设计实现会与 Vue3 存在差异，我们会在后续相关的文档中进行标注说明，如果你想查看 Mpx 与 Vue3 在组合式 API 中的差异，可以跳转到"),s("a",{attrs:{href:"#%E7%BB%84%E5%90%88%E5%BC%8F-API-%E4%B8%8E-Vue3-%E4%B8%AD%E7%9A%84%E5%8C%BA%E5%88%AB"}},[t._v("这里")]),t._v("查看。")]),t._v(" "),s("h2",{attrs:{id:"组合式-api-基础"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-基础"}},[t._v("#")]),t._v(" 组合式 API 基础")]),t._v(" "),s("h3",{attrs:{id:"setup-函数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setup-函数"}},[t._v("#")]),t._v(" setup 函数")]),t._v(" "),s("p",[t._v("同 Vue3 一样，在 Mpx 当中 "),s("code",[t._v("setup")]),t._v(" 函数是组合式 API 的基础，我们可以在 "),s("code",[t._v("createPage")]),t._v(" 和 "),s("code",[t._v("createComponent")]),t._v(" 中声明 "),s("code",[t._v("setup")]),t._v(" 函数。")]),t._v(" "),s("p",[s("code",[t._v("setup")]),t._v(" 函数接收 "),s("code",[t._v("props")]),t._v(" 和 "),s("code",[t._v("context")]),t._v(" 两个参数，其中 "),s("code",[t._v("context")]),t._v(" 参数与 Vue3 中存在差别，详情可以查看"),s("a",{attrs:{href:"#Setup"}},[t._v("这里")]),t._v("。")]),t._v(" "),s("p",[t._v("我们参考 Vue3 中的示例实现一个小程序版本，可以看到它和 Vue3 中的实现基本一致，包含以下功能：")]),t._v(" "),s("ul",[s("li",[t._v("仓库列表")]),t._v(" "),s("li",[t._v("更新仓库列表的函数")]),t._v(" "),s("li",[t._v("返回列表和函数，以便其他组件选项可以对它们进行访问")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fetchUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/api/repositories'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getUserRepositories")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回的数据，可以在其他选项式 API 中通过 this 访问或在模板上直接访问")]),t._v("\n      getUserRepositories "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回的函数，它的行为与将其定义在 methods 选项中的行为相同")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("目前 "),s("code",[t._v("repositories")]),t._v(" 是个非响应式变量，用户层面将无法感知它的变化，仓库列表将始终为空。")]),t._v(" "),s("h3",{attrs:{id:"带-ref-的响应式变量"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#带-ref-的响应式变量"}},[t._v("#")]),t._v(" 带 "),s("code",[t._v("ref")]),t._v(" 的响应式变量")]),t._v(" "),s("p",[t._v("同 Vue3 一致，我们可以通过 "),s("code",[t._v("ref")]),t._v(" 函数为任意一个变量创建响应式引用，"),s("code",[t._v("ref")]),t._v(" 接收参数并将其包裹在一个带有 "),s("code",[t._v("value")]),t._v(" property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值，简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" counter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// { value: 0 }")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0")]),t._v("\n\ncounter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),s("p",[t._v("回到我们的示例中，我们通过 "),s("code",[t._v("ref")]),t._v(" 创建一个响应式的 "),s("code",[t._v("repositories")]),t._v(" 变量：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fetchUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/api/repositories'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getUserRepositories")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      getUserRepositories\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("通过 "),s("code",[t._v("ref")]),t._v(" 包裹以后，我们每次调用 "),s("code",[t._v("getUserRepositories")]),t._v(" 更新 "),s("code",[t._v("repositories")]),t._v(" 的值都能被外部的 "),s("code",[t._v("watch")]),t._v(" 观测到，并且触发视图的更新。")]),t._v(" "),s("h3",{attrs:{id:"在-setup-中注册生命周期钩子"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在-setup-中注册生命周期钩子"}},[t._v("#")]),t._v(" 在 "),s("code",[t._v("setup")]),t._v(" 中注册生命周期钩子")]),t._v(" "),s("p",[t._v("为了完整实现选项式 API 中的能力，我们需要支持在 "),s("code",[t._v("setup")]),t._v(" 中注册生命周期钩子，同 Vue3 类似，我们也提供了一系列生命周期钩子的注册函数，这些函数都以 "),s("code",[t._v("on")]),t._v(" 开头，不过由于 Mpx 的跨平台特性，我们不可能针对不同的平台提供不同的生命周期钩子函数，因此我们提供了一份抹平跨平台差异后统一的生命周期钩子，与小程序原生生命周期的映射关系可查看"),s("a",{attrs:{href:"#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90"}},[t._v("这里")]),t._v("。")]),t._v(" "),s("p",[t._v("我们希望在组件挂载时调用 "),s("code",[t._v("getUserRepositories")]),t._v("，可以使用 "),s("code",[t._v("onMounted")]),t._v(" 钩子来实现，注意这里不是 "),s("code",[t._v("onReady")]),t._v("，不过它确实对应于微信小程序中组件的 "),s("code",[t._v("ready")]),t._v(" 钩子：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fetchUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/api/repositories'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getUserRepositories")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在组件挂载时（微信小程序中相当于ready）调用 getUserRepositories")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      getUserRepositories\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"watch-响应式更改"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watch-响应式更改"}},[t._v("#")]),t._v(" "),s("code",[t._v("watch")]),t._v(" 响应式更改")]),t._v(" "),s("p",[t._v("现在我们需要对 "),s("code",[t._v("user")]),t._v(" prop 的变化做出响应，可以使用新的 "),s("code",[t._v("watch")]),t._v(" API，该 API 接受 3 个参数：")]),t._v(" "),s("ul",[s("li",[t._v("一个想要侦听的响应式引用或 getter 函数")]),t._v(" "),s("li",[t._v("一个回调")]),t._v(" "),s("li",[t._v("可选的配置选项")])]),t._v(" "),s("p",[t._v("简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watch "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" counter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'The new counter value is: '")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("当 "),s("code",[t._v("counter")]),t._v(" 被修改时，例如 "),s("code",[t._v("counter.value = 5")]),t._v("，侦听将触发并执行回调打印 "),s("code",[t._v("The new counter value is:5")]),t._v("。")]),t._v(" "),s("p",[t._v("回到我们的示例中，当 "),s("code",[t._v("user")]),t._v(" prop 发生变化时调用 "),s("code",[t._v("getUserRepositories")]),t._v(" 更新仓库列表：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fetchUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/api/repositories'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 `toRefs` 创建对 `props` 中的 `user` property 的响应式引用")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" user "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getUserRepositories")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更新 `prop.user` 到 `user.value` 访问引用值")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n    \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在 user prop 的响应式引用上设置一个侦听器")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      getUserRepositories\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("你可能已经注意到在我们的 setup 的顶部使用了 toRefs。这是为了确保我们的侦听器能够根据 user prop 的变化做出反应。")]),t._v(" "),s("h3",{attrs:{id:"独立的-computed-属性"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#独立的-computed-属性"}},[t._v("#")]),t._v(" 独立的 "),s("code",[t._v("computed")]),t._v(" 属性")]),t._v(" "),s("p",[t._v("与 "),s("code",[t._v("ref")]),t._v(" 和 "),s("code",[t._v("watch")]),t._v(" 类似，也可以使用从 Mpx 导入的 "),s("code",[t._v("computed")]),t._v(" 函数创建计算属性，简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" counter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" twiceTheCounter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\ncounter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("twiceTheCounter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\n")])])]),s("p",[t._v("这里我们给 "),s("code",[t._v("computed")]),t._v(" 函数传递了第一个参数，它是一个类似 getter 的回调函数，输出的是一个只读的响应式引用。为了访问新创建的计算变量的 value，我们需要像 "),s("code",[t._v("ref")]),t._v(" 一样使用 "),s("code",[t._v(".value")]),t._v(" property。")]),t._v(" "),s("p",[t._v("回到我们的示例，我们通过 "),s("code",[t._v("computed")]),t._v(" 为仓库列表实现搜索功能：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fetchUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/api/repositories'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" user "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getUserRepositories")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n    \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" searchQuery "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" repositoriesMatchingSearchQuery "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("repository")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" repository"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("searchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      searchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      repositoriesMatchingSearchQuery\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("可以看到目前我们的 "),s("code",[t._v("setup")]),t._v(" 函数已经相当庞大了，在不进行任何封装的情况下我们很可能在 "),s("code",[t._v("setup")]),t._v(" 中写出流水账式的代码，可维护性很差，这也是为什么组合式 API 会对开发者的代码风格提出更高的要求，下面我们来拆解目前已经实现的功能，将它们提取到独立的组合函数中，先从创建 "),s("code",[t._v("useUserRepositories")]),t._v(" 函数开始：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/composables/useUserRepositories.js")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fetchUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/api/repositories'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watch "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getUserRepositories")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    getUserRepositories\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[t._v("然后是搜索功能：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/composables/useRepositoryNameSearch.js")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useRepositoryNameSearch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("repositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" searchQuery "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" repositoriesMatchingSearchQuery "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("repository")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" repository"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("searchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    searchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    repositoriesMatchingSearchQuery\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("现在我们有了两个单独的功能模块，接下来就可以开始在组件中使用它们了:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useUserRepositories "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/composables/useUserRepositories'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useRepositoryNameSearch "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/composables/useRepositoryNameSearch'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" user "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      searchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      repositoriesMatchingSearchQuery\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useRepositoryNameSearch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 因为我们并不关心未经过滤的仓库")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 我们可以在 `repositories` 名称下暴露过滤后的结果")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("repositories")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" repositoriesMatchingSearchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      searchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("现在我们使用组合式 API 完成了仓库列表组件的开发，它看上去相当清晰且易于维护。想要了解更多组合式 API 的信息，请继续查看本页接下来的章节，想要了解新的响应式 API 的使用，请跳转查看"),s("RouterLink",{attrs:{to:"/guide/composition-api/reactive-api.html"}},[t._v("响应式 API")]),t._v("章节。")],1),t._v(" "),s("h2",{attrs:{id:"setup"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setup"}},[t._v("#")]),t._v(" Setup")]),t._v(" "),s("p",[s("code",[t._v("setup")]),t._v(" 函数在组件创建时执行，返回组件所需的数据和方法，是组合式 API 的核心。")]),t._v(" "),s("blockquote",[s("p",[t._v("注意，"),s("code",[t._v("setup")]),t._v(" 函数不可被混入，所有定义在 "),s("code",[t._v("mixin")]),t._v(" 中的 "),s("code",[t._v("setup")]),t._v(" 都将被丢弃。")])]),t._v(" "),s("h3",{attrs:{id:"参数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#参数"}},[t._v("#")]),t._v(" 参数")]),t._v(" "),s("p",[s("code",[t._v("setup")]),t._v(" 函数接受两个参数，分别是 "),s("code",[t._v("props")]),t._v(" 和 "),s("code",[t._v("context")]),t._v("。")]),t._v(" "),s("h4",{attrs:{id:"props"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[t._v("#")]),t._v(" Props")]),t._v(" "),s("p",[s("code",[t._v("setup")]),t._v(" 函数的第一个参数 "),s("code",[t._v("props")]),t._v(" 和 Vue3 中完全一致，就是包含当前组件 props 的响应式数据，当父组件更新某个 prop 时，该数据也将被更新。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("Warning: "),s("code",[t._v("props")]),t._v(" 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。")])]),t._v(" "),s("p",[t._v("如果需要解构 prop，可以在 "),s("code",[t._v("setup")]),t._v(" 函数中使用 "),s("code",[t._v("toRefs")]),t._v(" 函数将其转换一个包含 ref 数据的纯对象：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// `title` 是一个 ref")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果 "),s("code",[t._v("title")]),t._v(" 是可选的 prop，则传入的 "),s("code",[t._v("props")]),t._v(" 中可能没有 "),s("code",[t._v("title")]),t._v(" 。在这种情况下，"),s("code",[t._v("toRefs")]),t._v(" 将不会为 "),s("code",[t._v("title")]),t._v(" 创建一个 ref 。你需要使用 "),s("code",[t._v("toRef")]),t._v(" 替代它：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRef "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" title "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// `title` 是一个 ref")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"context"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#context"}},[t._v("#")]),t._v(" Context")]),t._v(" "),s("p",[t._v("由于小程序与 web 基础技术规范的差异，Mpx 中 "),s("code",[t._v("setup")]),t._v(" 的第二个参数 "),s("code",[t._v("context")]),t._v(" 与 Vue3 中完全不同，"),s("code",[t._v("context")]),t._v(" 包含的属性如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 触发事件，等价于 this.triggerEvent")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("triggerEvent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取 NodesRef/组件实例，等价于 this.$refs")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 字节小程序中异步获取组件实例，等价于 this.$asyncRefs")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("asyncRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取组件实例，等价于 this.selectComponent，可用 this.$refs 替代")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("selectComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 批量获取组件实例，等价于 this.selectAllComponents，可用 $refs 替代")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("selectAllComponents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取 SelectorQuery 对象实例查询元素布局信息，等价于 this.createSelectorQuery，可用 $refs 替代")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("createSelectorQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取 IntersectionObserver 对象实例查询视图相交信息，等价于 this.createIntersectionObserver")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("createIntersectionObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("code",[t._v("context")]),t._v(" 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 "),s("code",[t._v("context")]),t._v(" 使用 ES6 解构。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" triggerEvent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" refs "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("code",[t._v("refs")]),t._v(" 是有状态的对象，它会随组件本身的更新而更新。这意味着你应该避免对其进行解构，并始终以 refs.x 的方式访问 NodesRef 或组件实例。与 props 不同，refs 是非响应式的。如果你打算根据 refs 的更改应用副作用，那么应该在 onUpdated 生命周期钩子中执行此操作。")]),t._v(" "),s("h3",{attrs:{id:"访问组件的-property"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#访问组件的-property"}},[t._v("#")]),t._v(" 访问组件的 property")]),t._v(" "),s("p",[t._v("除了 "),s("code",[t._v("props")]),t._v(" 和 "),s("code",[t._v("context")]),t._v(" 中包含的内容，执行 "),s("code",[t._v("setup")]),t._v(" 时将"),s("strong",[t._v("无法访问")]),t._v("部分组件选项，包括：")]),t._v(" "),s("ul",[s("li",[t._v("data")]),t._v(" "),s("li",[t._v("computed")])]),t._v(" "),s("h3",{attrs:{id:"结合模板使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#结合模板使用"}},[t._v("#")]),t._v(" 结合模板使用")]),t._v(" "),s("p",[t._v("如果 "),s("code",[t._v("setup")]),t._v(" 返回一个对象，那么该对象的 property 可以在模板中访问到：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ collectionName }}: {{ readersNumber }} {{ book.title }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("collectionName")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" readersNumber "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" book "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Mpx'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 暴露给 template")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        readersNumber"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        book\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"使用-this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用-this"}},[t._v("#")]),t._v(" 使用 "),s("code",[t._v("this")])]),t._v(" "),s("p",[s("strong",[t._v("在 "),s("code",[t._v("setup()")]),t._v(" 内部，"),s("code",[t._v("this")]),t._v(" 不是当前组件的引用")]),t._v("，因为 "),s("code",[t._v("setup()")]),t._v(" 是在解析其它组件选项之前被调用的，所以 "),s("code",[t._v("setup()")]),t._v(" 内部的 "),s("code",[t._v("this")]),t._v(" 的行为与其它选项中的 "),s("code",[t._v("this")]),t._v(" 完全不同。这使得 "),s("code",[t._v("setup()")]),t._v("  在和其它选项式 API 一起使用时可能会导致混淆。")]),t._v(" "),s("blockquote",[s("p",[t._v("Mpx 的组合式 API 设计极力避免了用户需要在 "),s("code",[t._v("setup()")]),t._v(" 中访问 "),s("code",[t._v("this")]),t._v(" 的场景，不过在一些例外情况下，用户仍然可以通过 "),s("code",[t._v("getCurrentInstance()")]),t._v(" 的方式获取到当前组件实例，注意该函数必须在 "),s("code",[t._v("setup()")]),t._v(" 或生命周期钩子中同步调用。")])]),t._v(" "),s("h2",{attrs:{id:"lifecycle-hooks"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#lifecycle-hooks"}},[t._v("#")]),t._v(" 生命周期钩子 ")]),t._v(" "),s("p",[t._v("组合式 API 中，我们通过 "),s("code",[t._v("on${Hookname}(fn)")]),t._v(" 的方式注册访问生命周期钩子。")]),t._v(" "),s("p",[t._v("Mpx 作为一个跨端小程序框架，需要兼容不同小程序平台不同的生命周期，在选项式 API 中，我们在框架中内置了一套统一的生命周期，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异，如微信小程序的 "),s("code",[t._v("attached")]),t._v(" 钩子和支付宝小程序的 "),s("code",[t._v("onInit")]),t._v(" 钩子，在组合式 API 中，我们基于框架内置的生命周期暴露了一套统一的生命周期钩子函数，下表展示了框架内置生命周期/组合式 API 生命周期函数与不同小程序平台原生生命周期的对应关系：")]),t._v(" "),s("h4",{attrs:{id:"组件生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组件生命周期"}},[t._v("#")]),t._v(" 组件生命周期")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",{staticStyle:{"text-align":"left"}},[t._v("框架内置生命周期")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("Hook inside "),s("code",[t._v("setup")])]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("微信原生")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("支付宝原生")])])]),t._v(" "),s("tbody",[s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("BEFORECREATE")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")])]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("attached（数据响应初始化前）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onInit（数据响应初始化前）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("CREATED")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")])]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("attached（数据响应初始化后）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onInit（数据响应初始化后）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREMOUNT")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeMount")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("ready（"),s("code",[t._v("MOUNTED")]),t._v(" 执行前）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("didMount（"),s("code",[t._v("MOUNTED")]),t._v(" 执行前）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("MOUNTED")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onMounted")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("ready（"),s("code",[t._v("BEFOREMOUNT")]),t._v(" 执行后）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("didMount（"),s("code",[t._v("BEFOREMOUNT")]),t._v(" 执行后）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREUPDATE")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeUpdate")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（"),s("code",[t._v("setData")]),t._v(" 执行前）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（"),s("code",[t._v("setData")]),t._v(" 执行前）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("UPDATED")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onUpdated")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（"),s("code",[t._v("setData")]),t._v(" callback）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（"),s("code",[t._v("setData")]),t._v(" callback）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREUNMOUNT")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeUnmount")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("detached（数据响应销毁前）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("didUnmount（数据响应销毁前）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("UNMOUNTED")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onUnmounted")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("detached（数据响应销毁后）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("didUnmount（数据响应销毁后）")])])])]),t._v(" "),s("blockquote",[s("p",[t._v("同 Vue3 一样，组合式 API 中没有提供 "),s("code",[t._v("BEFORECREATE")]),t._v(" 和 "),s("code",[t._v("CREATED")]),t._v(" 对应的生命周期钩子函数，用户可以直接在 "),s("code",[t._v("setup")]),t._v(" 中编写相关逻辑。")])]),t._v(" "),s("blockquote",[s("p",[t._v("除支付宝外的小程序平台支持使用Component构建页面，在页面中使用组件生命周期钩子与在组件中完全一致，并且框架在支付宝环境也进行了抹平实现。")])]),t._v(" "),s("h4",{attrs:{id:"页面生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#页面生命周期"}},[t._v("#")]),t._v(" 页面生命周期")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",{staticStyle:{"text-align":"left"}},[t._v("框架内置生命周期")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("Hook inside "),s("code",[t._v("setup")])]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("微信原生")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("支付宝原生")])])]),t._v(" "),s("tbody",[s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONLOAD")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONSHOW")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONHIDE")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONRESIZE")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("events.onResize")])])])]),t._v(" "),s("h4",{attrs:{id:"组件中访问页面生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组件中访问页面生命周期"}},[t._v("#")]),t._v(" 组件中访问页面生命周期")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",{staticStyle:{"text-align":"left"}},[t._v("框架内置生命周期")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("Hook inside "),s("code",[t._v("setup")])]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("微信原生")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("支付宝原生")])])]),t._v(" "),s("tbody",[s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONSHOW")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("pageLifetimes.show")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（框架抹平实现）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONHIDE")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("pageLifetimes.hide")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（框架抹平实现）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONRESIZE")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("pageLifetimes.resize")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（框架抹平实现）")])])])]),t._v(" "),s("p",[t._v("下面是简单的使用示例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onUnmounted "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mounted")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Component mounted.'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unmounted")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onUnmounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Component unmounted.'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"框架内置生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#框架内置生命周期"}},[t._v("#")]),t._v(" 框架内置生命周期")]),t._v(" "),s("p",[t._v("从上面可以看到我们在框架内部内置了一套统一的生命周期来抹平不同平台生命周期的差异，由于存在数据响应机制，这套内置生命周期与小程序原生的生命周期不完全一一对应，反而与 Vue 的生命周期更加相似，在过去的版本中，我们没有显式地暴露出 "),s("code",[t._v("BEFORECREATE")]),t._v(" 这这类框架内置的生命周期，更多都在框架内部使用，但是在组合式 API 版本中，为了使选项式 API 的生命周期能力与之对齐，我们将框架内置的生命周期显式导出，让用户在选项式 API 开发环境下也能正常使用这些能力，简单使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("BEFORECREATE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("BEFORECREATE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'beforeCreate exec.'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 原生的 created 会被映射为框架内部的 CREATED 执行，此处逻辑在 BEFORECREATE 后执行")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'created exec.'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"具有副作用的页面事件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#具有副作用的页面事件"}},[t._v("#")]),t._v(" 具有副作用的页面事件")]),t._v(" "),s("p",[t._v("在小程序中，一些页面事件的注册存在副作用，即该页面事件注册与否会产生实质性的影响，比如微信中的 "),s("code",[t._v("onShareAppMessage")]),t._v(" 和 "),s("code",[t._v("onPageScroll")]),t._v("，前者在不注册时会禁用当前页面的分享功能，而后者在注册时会带来视图与逻辑层之间的线程通信开销，对于这部分页面事件，我们无法通过"),s("code",[t._v("预注册 -> 驱动")]),t._v("方式提供组合式 API 的注册方式，用户可以通过选项式 API 的方式来注册使用，通过 "),s("code",[t._v("this")]),t._v(" 访问组合式 API "),s("code",[t._v("setup")]),t._v(" 函数的返回。")]),t._v(" "),s("p",[t._v("然而这种使用方式显然不够优雅，我们考虑是否可以通过一些非常规的方式提供这类副作用页面事件的组合式 API 注册支持，例如，借助编译手段。我们在运行时提供了副作用页面事件的注册函数，并在编译时通过 "),s("code",[t._v("babel")]),t._v(" 插件的方式解析识别到当前页面中存在这些特殊注册函数的调用时，通过框架已有的"),s("code",[t._v("编译 -> 运行时注入")]),t._v("的方式将事件驱动逻辑添加到当前页面当中，以提供相对优雅的副作用页面事件在组合式 API 中的注册方式，同时不产生非预期的副作用影响。")]),t._v(" "),s("p",[t._v("我们需要先修改 "),s("code",[t._v("babel")]),t._v(" 配置添加 "),s("code",[t._v("@mpxjs/babel-plugin-inject-page-events")]),t._v(" 插件：")]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// babel.config.json")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"plugins"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@babel/transform-runtime"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"corejs"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"version"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^7.10.4"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/babel-plugin-inject-page-events"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("然后就能想普通生命周期一样使用组合式 API 进行页面事件注册，简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onShareAppMessage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShareAppMessage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'页面分享'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      count\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("目前我们通过这种方式支持的页面事件如下：")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",{staticStyle:{"text-align":"left"}},[t._v("页面事件")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("Hook inside "),s("code",[t._v("setup")])]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("平台支持")])])]),t._v(" "),s("tbody",[s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onShareAppMessage")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onShareAppMessage")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("微信/支付宝/百度/QQ")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onAddToFavorites")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onAddToFavorites")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("微信 / QQ")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onShareTimeline")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onShareTimeline")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("微信")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onSaveExitState")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onSaveExitState")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("微信")])])])]),t._v(" "),s("blockquote",[s("p",[t._v("特别注意，由于静态编译分析实现方式的限制，这类页面事件的组合式 API 使用需要满足页面事件注册函数的调用和 "),s("code",[t._v("createPage")]),t._v(" 的调用位于同一个 js 文件当中。")])]),t._v(" "),s("h2",{attrs:{id:"template-ref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#template-ref"}},[t._v("#")]),t._v(" 模板引用 ")]),t._v(" "),s("p",[t._v("在 Vue3 的组合式 API 中，我们可以在 "),s("code",[t._v("setup")]),t._v(" 函数中使用 "),s("code",[t._v("ref()")]),t._v(" 创建引用数据获取模板中绑定了 "),s("code",[t._v("ref")]),t._v(" 属性的组件或 DOM 节点，优雅地将"),s("strong",[t._v("响应式引用")]),t._v("和"),s("strong",[t._v("模板引用")]),t._v("进行了关联统一，但在 Mpx 中，受限于小程序的技术限制，我们无法在低性能损耗下实现相同的设计，因此我们在 setup 的 context 参数中提供了 refs 对象，结合模板中的"),s("code",[t._v("wx:ref")]),t._v("指令使用，与选项式 API 中的 $refs 保持一致。")]),t._v(" "),s("p",[t._v("下面是组合式 API 中进行模板引用的使用示例：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleHello"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("hello"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hello"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{showWorld}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("world"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("world"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" nextTick "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" refs "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" showWorld "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" list "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手机'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电视'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电脑'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 最早在 onMounted 中才能访问refs，对于节点返回 NodesRef 对象，对于组件返回组件实例")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello ref:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hello"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在循环中定义 wx:ref，对应的 refs 返回数组")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'list ref:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleHello")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        showWorld"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 数据变更后要在 nextTick 中访问更新后的视图数据")]),t._v("\n          console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'world ref:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      \n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 暴露给 template")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        showWorld"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        handleHello"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        list\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"script-setup"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#script-setup"}},[t._v("#")]),t._v(" "),s("code",[t._v("<script setup>")])]),t._v(" "),s("p",[t._v("和 Vue 类似，"),s("code",[t._v("<script setup>")]),t._v(" 是在 Mpx 单文件组件中使用组合式 API 时的编译时语法糖。不过受小程序底层技术限制，在 Mpx 中 "),s("code",[t._v("<script setup>")]),t._v(" 无法完整提供其在 Vue 中所具备的相关优势，我们提供了这个语法能力，但不作为默认的推荐选项。")]),t._v(" "),s("h3",{attrs:{id:"基本语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#基本语法"}},[t._v("#")]),t._v(" 基本语法")]),t._v(" "),s("p",[t._v("启用该语法需要在 "),s("code",[t._v("<script>")]),t._v(" 代码块上添加 "),s("code",[t._v("setup")]),t._v(" attribute:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello Mpx script setup'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("code",[t._v("<script>")]),t._v(" 里边的代码会被编译成组件 "),s("code",[t._v("setup()")]),t._v(" 函数的内容。")]),t._v(" "),s("h3",{attrs:{id:"顶层的绑定会被暴露给模版"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#顶层的绑定会被暴露给模版"}},[t._v("#")]),t._v(" 顶层的绑定会被暴露给模版")]),t._v(" "),s("blockquote",[s("p",[t._v("从 v2.8.19 开始，顶层绑定自动暴露给模板的能力被取消，构建时会强制用户通过 "),s("code",[t._v("defineExpose")]),t._v(" 手动声明需要暴露给模板的数据或方法。")])]),t._v(" "),s("p",[t._v("和 Vue 一样，当使用 "),s("code",[t._v("<script setup>")]),t._v(" 时，任何在 "),s("code",[t._v("<script setup>")]),t._v(" 声明的顶层的绑定（包括变量，函数声明，以及 import 导入的内容） 都能在模版中直接使用：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" msg "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("msg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("msg: {{msg}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ontap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("log"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("click"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("import 导入的内容，除了从 "),s("code",[t._v("@mpxjs/core")]),t._v(" 中导入的变量或方法，其他模块导入的属性和方法全部都会暴露给模版。这意味着我们可以直接在模版中使用引入的相关方法，而不需要通过 "),s("code",[t._v("methods")]),t._v(" 选项来暴露：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ontap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("clickTrigger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("click"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" clickTrigger "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./utils'")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注意项：如果你 "),s("code",[t._v("script setup")]),t._v(" 中有较多对象或方法的声明和引入，比如全局 store 这种十分复杂的对象，走默认逻辑暴露给模版会造成性能问题，因此需要使用 "),s("code",[t._v("defineExpose")]),t._v(" 来手动定义暴露给模版的数据和方法。")])]),t._v(" "),s("h3",{attrs:{id:"响应式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式"}},[t._v("#")]),t._v(" 响应式")]),t._v(" "),s("p",[t._v("和 Vue 中一样，响应式状态需要明确使用响应性 API 来创建。和 "),s("code",[t._v("setup()")]),t._v(" 函数的返回值一样，ref 在模版中使用的时候会自动解包：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ontap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{count}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addCount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"defineprops"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#defineprops"}},[t._v("#")]),t._v(" "),s("code",[t._v("defineProps()")])]),t._v(" "),s("p",[t._v("和 Vue 类似，为了在声明小程序组件 "),s("code",[t._v("properties")]),t._v(" 选项时获得完整的类型推导支持，在 "),s("code",[t._v("<script setup>")]),t._v(" 中，我们需要使用 "),s("code",[t._v("defineProps")]),t._v(" API，它默认在 "),s("code",[t._v("<script setup>")]),t._v(" 中可用：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" props "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProps")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("testA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("defineProps")]),t._v(" 是只能在 "),s("code",[t._v("<script setup>")]),t._v(" 中使用的"),s("strong",[t._v("编译宏")]),t._v("，不需要手动导入，会跟随 "),s("code",[t._v("<script setup>")]),t._v(" 的处理过程一同被编译掉。")]),t._v(" "),s("li",[s("code",[t._v("defineProps")]),t._v(" 接收与小程序 "),s("code",[t._v("properties")]),t._v(" 选项相同的值。")]),t._v(" "),s("li",[t._v("传入到 "),s("code",[t._v("defineProps")]),t._v(" 的选项会从 setup 中提升到模块的作用域。因此传入的选项不能引用在 setup 作用域中声明的局部变量，否则会导致编译错误，不过可以引入导入的绑定。")])]),t._v(" "),s("h3",{attrs:{id:"defineexpose"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#defineexpose"}},[t._v("#")]),t._v(" "),s("code",[t._v("defineExpose()")])]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("<script setup>")]),t._v(" 中定义暴露给模版的变量和方法，在 Mpx "),s("code",[t._v("<script setup>")]),t._v(" 中属于"),s("strong",[t._v("强制要求")]),t._v("，若不使用该编译宏，则会构建报错。")]),t._v(" "),s("p",[t._v("Mpx 中的 defineExpose 和 Vue3 中的不尽相同，在 Vue3 中，使用 "),s("code",[t._v("<scrip setup>")]),t._v(" 的组件默认是关闭的-即通过模版引用或者 "),s("code",[t._v("$parent")]),t._v(" 链获取到的组件实例中不会暴露任何在"),s("code",[t._v("<script setup>")]),t._v(" 中声明的绑定。")]),t._v(" "),s("p",[t._v("在 Mpx 中，"),s("code",[t._v("<script setup>")]),t._v(" 中的声明绑定都会挂载到组件实例中，都可以通过组件实例来访问，Mpx "),s("code",[t._v("defineExpose")]),t._v(" 更大的作用是假如你在 "),s("code",[t._v("<scrip setup>")]),t._v(" 中引入了一些 store 实例，这些 store 实例默认会挂载到组件实例中，会导致后续的响应式处理以及组件更新速度变慢，这里我们通过强制使用\n"),s("code",[t._v("defineExpose")]),t._v(" 来规避掉这个问题。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'black'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineExpose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        name\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--正确渲染 black--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{name}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--找不到对应变量，无内容--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{count}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"defineoptions"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#defineoptions"}},[t._v("#")]),t._v(" "),s("code",[t._v("defineOptions()")])]),t._v(" "),s("p",[t._v("此编译宏相较于 Vue 是 Mpx 中独有的，主要是当开发者想在 "),s("code",[t._v("<script setup>")]),t._v(" 中使用一些微信小程序中特有的选项式，例如 relations、moved 等，可以使用该编译宏进行定义。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineOptions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pageLifetimes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 组件所在页面的生命周期函数")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("defineOptions")]),t._v(" 是只能在 "),s("code",[t._v("<script setup>")]),t._v(" 中使用的"),s("strong",[t._v("编译宏")]),t._v("，不需要手动导入，会跟随 "),s("code",[t._v("<script setup>")]),t._v(" 的处理过程一同被编译掉。")]),t._v(" "),s("li",[s("code",[t._v("defineOptions")]),t._v(" 无返回值。")]),t._v(" "),s("li",[s("code",[t._v("defineOptions")]),t._v(" 中的选项会无脑提升至组件或页面构造器的选项之中，因此不可引用 setup 中的局部变量。")])]),t._v(" "),s("h3",{attrs:{id:"usecontext"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#usecontext"}},[t._v("#")]),t._v(" "),s("code",[t._v("useContext()")])]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("<script setup>")]),t._v(" 中，当我们想要使用 "),s("code",[t._v("context")]),t._v(" 时，可以使用 "),s("code",[t._v("useContext()")]),t._v(" 来获 "),s("code",[t._v("context")]),t._v(" 对象。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取 NodesRef/组件实例，等价于 this.$refs")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"针对-typescript-的功能"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#针对-typescript-的功能"}},[t._v("#")]),t._v(" 针对 TypeScript 的功能")]),t._v(" "),s("h4",{attrs:{id:"类型-props-的声明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#类型-props-的声明"}},[t._v("#")]),t._v(" 类型 props 的声明")]),t._v(" "),s("p",[t._v("props 可以通过给 "),s("code",[t._v("defineProps")]),t._v(" 传递纯类型函数的方式来声明：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[t._v("    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" props "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProps")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        foo"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        bar"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 构建转换为")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        properties"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            foo"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            bar"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Number\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("defineProps")]),t._v(" 要么使用运行时声明，要么使用类型声明。同时使用两种方式会导致编译报错。")]),t._v(" "),s("li",[t._v("小程序中 "),s("code",[t._v("defineProps")]),t._v(" 类型声明若有 optional 不会生效，因为小程序的 props 只要声明则一定会存在")]),t._v(" "),s("li",[t._v("类型声明参数必须是一下内容之一，以确保正确的静态分析：\n"),s("ul",[s("li",[t._v("类型字面量")]),t._v(" "),s("li",[t._v("在同一文件中的接口或者类型字面量的引用")])])])]),t._v(" "),s("h4",{attrs:{id:"使用类型声明时的默认-props-值"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用类型声明时的默认-props-值"}},[t._v("#")]),t._v(" 使用类型声明时的默认 props 值")]),t._v(" "),s("p",[t._v("和 Vue3 一样，针对类型的 "),s("code",[t._v("defineProps")]),t._v(" 声明的不足，它无法给 props 提供默认值。为了解决这个问题，我们也支持了 "),s("code",[t._v("withDefaults")]),t._v(" 编译宏：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Props")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  msg"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n  labels"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" props "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("withDefaults")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProps")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Props"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  msg"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  labels"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'world'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("上边代码会被编译为等价的运行时 props 的 "),s("code",[t._v("value")]),t._v(" 选项。")]),t._v(" "),s("ul",[s("li",[t._v("小程序 properties 定义中的 optionalTypes 和 observer 字段，无法使用 TypeScript 类型声明的方式定义，如果需要定义这两个字段，目前需要使用运行时的方式来定义。")])]),t._v(" "),s("h3",{attrs:{id:"限制"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#限制"}},[t._v("#")]),t._v(" 限制")]),t._v(" "),s("p",[t._v("由于模块执行语义的差异，"),s("code",[t._v("<script setup>")]),t._v(" 中的代码依赖单文件组件的上下文，如果将其移动到外部的 "),s("code",[t._v(".js")]),t._v(" 或者 "),s("code",[t._v(".ts")]),t._v(" 的时候，对于开发者可工具来说都十分混乱。因此 "),s("code",[t._v("<script setup>")]),t._v(" 不能和 "),s("code",[t._v("src")]),t._v(" attribute 一起使用。")]),t._v(" "),s("h2",{attrs:{id:"组合式-api-与-vue3-中的区别"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-与-vue3-中的区别"}},[t._v("#")]),t._v(" 组合式 API 与 Vue3 中的区别")]),t._v(" "),s("p",[t._v("下面我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("setup")]),t._v(" 的 "),s("code",[t._v("context")]),t._v(" 参数不同，详见"),s("a",{attrs:{href:"#Context"}},[t._v("这里")])]),t._v(" "),s("li",[s("code",[t._v("setup")]),t._v(" 不支持返回"),s("strong",[t._v("渲染函数")])]),t._v(" "),s("li",[s("code",[t._v("setup")]),t._v(" 不能是异步函数")]),t._v(" "),s("li",[s("code",[t._v("<script setup>")]),t._v(" 提供的宏方法不同，详见"),s("a",{attrs:{href:"#script-setup"}},[t._v("这里")])]),t._v(" "),s("li",[s("code",[t._v("<script setup>")]),t._v(" 不支持 "),s("code",[t._v("import")]),t._v(" 快捷引入组件")]),t._v(" "),s("li",[s("code",[t._v("<script setup>")]),t._v(" 必须使用 "),s("a",{attrs:{href:"#defineprops"}},[t._v("defineExpose")])]),t._v(" "),s("li",[t._v("支持的生命周期钩子不同，详见"),s("a",{attrs:{href:"#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90"}},[t._v("这里")])]),t._v(" "),s("li",[t._v("模板引用的方式不同，详见"),s("a",{attrs:{href:"#%E6%A8%A1%E6%9D%BF%E5%BC%95%E7%94%A8"}},[t._v("这里")])])]),t._v(" "),s("h2",{attrs:{id:"组合式-api-周边生态能力的使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-周边生态能力的使用"}},[t._v("#")]),t._v(" 组合式 API 周边生态能力的使用")]),t._v(" "),s("p",[t._v("我们对 Mpx 提供的周边生态能力也都进行了组合式 API 适配升级，详情如下：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("store")]),t._v(" 在组合式 API 中使用，详见"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#use-store-in-composition-api"}},[t._v("这里")])],1),t._v(" "),s("li",[s("code",[t._v("pinia")]),t._v(" 在组合式 API 中使用，详见"),s("RouterLink",{attrs:{to:"/guide/advance/pinia.html"}},[t._v("这里")])],1),t._v(" "),s("li",[s("code",[t._v("fetch")]),t._v(" 在组合式 API 中使用，详见"),s("RouterLink",{attrs:{to:"/guide/extend/fetch.md/#composition-api-usage"}},[t._v("这里")])],1),t._v(" "),s("li",[s("code",[t._v("i18n")]),t._v(" 在组合式 API 中使用，详见"),s("RouterLink",{attrs:{to:"/guide/advance/i18n.html#composition-api-usage"}},[t._v("这里")])],1)])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/98.939cb6ef.js b/docs-vuepress/.vuepress/dist/assets/js/98.939cb6ef.js
new file mode 100644
index 0000000000..21d2b62097
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/98.939cb6ef.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[98],{444:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"响应式-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api"}},[t._v("#")]),t._v(" 响应式 API")]),t._v(" "),s("p",[t._v("在 Mpx 中，为了支持"),s("RouterLink",{attrs:{to:"/guide/composition-api/composition-api.html"}},[t._v("组合式 API")]),t._v(" 的使用，我们参考 Vue3 提供了相关的响应式 API，但由于 "),s("code",[t._v("proxy")]),t._v(" 目前仍然存在浏览器兼容性问题，我们在底层还是基于 "),s("code",[t._v("Object.defineProperty")]),t._v(" 实现的数据响应，因此相较于 Vue3 提供的 API 存在一些删减，同时也存在与 Vue2 一样的数据响应"),s("a",{attrs:{href:"https://v2.cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9",target:"_blank",rel:"noopener noreferrer"}},[t._v("使用限制"),s("OutboundLink")],1),t._v("。")],1),t._v(" "),s("h2",{attrs:{id:"创建响应式对象"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#创建响应式对象"}},[t._v("#")]),t._v(" 创建响应式对象")]),t._v(" "),s("p",[t._v("在 Mpx 中，我们可以使用 "),s("code",[t._v("reactive")]),t._v(" 方法将一个 JavaScript 对象"),s("strong",[t._v("深度转换")]),t._v("为响应式对象，当对象内数据发生变化时能够被系统感知，相当于 Vue2 中的 "),s("code",[t._v("observable")]),t._v("，需要注意的是在 Mpx 中 "),s("code",[t._v("reactive()")]),t._v(" 是将传入的对象进行响应性转化后返回原对象，而在 Vue3 中则会基于 "),s("code",[t._v("proxy")]),t._v(" API 返回传入对象的响应式代理。")]),t._v(" "),s("p",[t._v("目前 "),s("code",[t._v("reactive")]),t._v(" 仅支持传入基础对象类型，包括纯对象和数组，暂不支持 "),s("code",[t._v("Map")]),t._v(" 和 "),s("code",[t._v("Set")]),t._v(" 这样的集合类型。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 响应式对象")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("你可以在"),s("RouterLink",{attrs:{to:"/api/reactivity-api/basic-reactivity.html"}},[t._v("响应式基础 API")]),t._v(" 章节中了解更多关于 "),s("code",[t._v("reactive")]),t._v(" 的信息。")],1),t._v(" "),s("h2",{attrs:{id:"use-ref-create-reactive-value"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#use-ref-create-reactive-value"}},[t._v("#")]),t._v(" 使用"),s("code",[t._v("ref()")]),t._v("创建独立的响应式值 ")]),t._v(" "),s("p",[t._v("上面提到 "),s("code",[t._v("reactive")]),t._v(" 只能传入对象类型数据，当我们想将一个原始数据类型的值（如数字、字符串、布尔值）变成响应式时，我们不得不先将其包装为一个对象，使用起来较为繁琐，新的 "),s("code",[t._v("ref")]),t._v(" 方法能够让我们便捷地达成上述目标：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 响应式值")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("code",[t._v("ref()")]),t._v(" 会返回一个可变的响应式对象，该对象作为一个"),s("strong",[t._v("响应式引用")]),t._v("通过 "),s("code",[t._v("value")]),t._v(" 属性维护着传入的内部值：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0")]),t._v("\n\ncount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),s("h3",{attrs:{id:"ref-解包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ref-解包"}},[t._v("#")]),t._v(" Ref 解包")]),t._v(" "),s("p",[t._v("当 "),s("code",[t._v("ref")]),t._v(" 作为渲染上下文 (从 "),s("code",[t._v("setup()")]),t._v(" 中返回的对象) 上的 property 返回并可以在模板中被访问时，它将自动浅层次解包内部值。只有访问嵌套的 ref 时需要在模板中添加 "),s("code",[t._v(".value")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ count }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ nested.count.value }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n   \n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nested")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          count\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"访问响应式对象"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#访问响应式对象"}},[t._v("#")]),t._v(" 访问响应式对象")]),t._v(" "),s("p",[t._v("当 "),s("code",[t._v("ref")]),t._v(" 作为响应式对象的 property 被访问或更改时，为使其行为类似于普通 property，它会自动解包内部值：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  count\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),s("p",[t._v("如果将新的 ref 赋值给现有 ref 的 property，将会替换旧的 ref：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" otherCount "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" otherCount\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),s("p",[t._v("Ref 解包仅发生在被响应式 "),s("code",[t._v("Object")]),t._v(" 嵌套的时候。当从 "),s("code",[t._v("Array")]),t._v(" 访问 ref 时，不会进行解包：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" arr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello world'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里需要 .value")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("arr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"响应式对象解构"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式对象解构"}},[t._v("#")]),t._v(" 响应式对象解构")]),t._v(" "),s("p",[t._v("当我们想使用大型响应式对象的一些 property 时，可能很想使用 "),s("strong",[t._v("ES6 解构")]),t._v("来获取我们想要的 property：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" people "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hiyuki'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("26")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("gender")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'male'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("city")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Beijing'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" age "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" people\n")])])]),s("p",[t._v("遗憾的是，使用解构的两个 property 的响应性都会丢失。对于这种情况，我们需要将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" people "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hiyuki'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("26")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("gender")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'male'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("city")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Beijing'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" age "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("people"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("30")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// age 现在是个 ref，我们需要使用 .value 进行访问，对其进行修改也将直接作用在原响应式对象中")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("people"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("age"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 30")]),t._v("\n")])])]),s("p",[t._v("你可以在"),s("RouterLink",{attrs:{to:"/api/reactivity-api/refs-api.html"}},[t._v("Refs API")]),t._v(" 章节中了解更多关于 "),s("code",[t._v("refs")]),t._v(" 的信息。")],1),t._v(" "),s("h2",{attrs:{id:"计算值"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#计算值"}},[t._v("#")]),t._v(" 计算值")]),t._v(" "),s("p",[t._v("有时我们需要依赖于其他状态的状态——在 选项式 API 中，这是用组件计算属性处理的，在新的组合式 API 中，我们可以使用 "),s("code",[t._v("computed")]),t._v(" 函数直接创建计算值：它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" plusOne "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("plusOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\n\nplusOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// error")]),t._v("\n")])])]),s("p",[t._v("或者，可以使用一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" plusOne "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" val "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nplusOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0")]),t._v("\n")])])]),s("h2",{attrs:{id:"watcheffect"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watcheffect"}},[t._v("#")]),t._v(" "),s("code",[t._v("watchEffect")])]),t._v(" "),s("p",[t._v("为了根据响应式状态自动应用和重新应用副作用，我们可以使用 "),s("code",[t._v("watchEffect")]),t._v(" 函数。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> logs 0")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> logs 1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"停止侦听"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#停止侦听"}},[t._v("#")]),t._v(" 停止侦听")]),t._v(" "),s("p",[t._v("当 "),s("code",[t._v("watchEffect")]),t._v(" 在组件的 "),s("RouterLink",{attrs:{to:"/guide/composition-api/composition-api.html#Setup"}},[t._v("setup()")]),t._v(" 函数或"),s("RouterLink",{attrs:{to:"/guide/composition-api/composition-api.html#生命周期钩子"}},[t._v("生命周期钩子")]),t._v("被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。")],1),t._v(" "),s("p",[t._v("在一些情况下，也可以显式调用返回值以停止侦听：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// later")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"清除副作用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#清除副作用"}},[t._v("#")]),t._v(" 清除副作用")]),t._v(" "),s("p",[t._v("有时副作用函数会执行一些异步的副作用，这些响应需要在其失效时清除 (即完成之前状态已改变了) 。所以侦听副作用传入的函数可以接收一个 "),s("code",[t._v("onInvalidate")]),t._v(" 函数作入参，用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发：")]),t._v(" "),s("ul",[s("li",[t._v("副作用即将重新执行时")]),t._v(" "),s("li",[t._v("侦听器被停止 (如果在 "),s("code",[t._v("setup()")]),t._v(" 或生命周期钩子函数中使用了 "),s("code",[t._v("watchEffect")]),t._v("，则在组件卸载时)")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("onInvalidate")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" token "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("performAsyncOperation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onInvalidate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// id has changed or watcher is stopped.")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// invalidate previously pending async operation")]),t._v("\n    token"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cancel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("之所以是通过传入一个函数去注册失效回调，而不是从回调返回它，是因为返回值对于异步错误处理很重要。")]),t._v(" "),s("p",[t._v("在执行数据请求时，副作用函数往往是一个异步函数：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("onInvalidate")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onInvalidate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在Promise解析之前注册清除函数")]),t._v("\n  data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("我们知道异步函数都会隐式地返回一个 Promise，但是清理函数必须要在 Promise 被 resolve 之前被注册。")]),t._v(" "),s("h3",{attrs:{id:"副作用刷新时机"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#副作用刷新时机"}},[t._v("#")]),t._v(" 副作用刷新时机")]),t._v(" "),s("p",[t._v("默认情况下，数据发生变更时，关联的副作用会被推入异步队列中，进行异步刷新，这样可以避免同一个“tick” 中多个状态改变导致的不必要的重复调用。在核心的具体实现中，组件的 "),s("code",[t._v("render")]),t._v(" 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时，默认情况下，会在所有的组件 "),s("code",[t._v("render")]),t._v(" 前执行：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ count }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchEffect "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      count\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("在这个例子中：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("count")]),t._v(" 会在初始运行时同步打印出来")]),t._v(" "),s("li",[t._v("更改 "),s("code",[t._v("count")]),t._v(" 时，将在组件"),s("strong",[t._v("更新前")]),t._v("执行副作用。")])]),t._v(" "),s("p",[t._v("如果需要在组件更新(例如：当与"),s("RouterLink",{attrs:{to:"/guide/composition-api/composition-api.html#模板引用"}},[t._v("模板引用")]),t._v("一起)后重新运行侦听器副作用，我们可以传递带有 "),s("code",[t._v("flush")]),t._v(" 选项的附加 "),s("code",[t._v("options")]),t._v(" 对象 (默认为 "),s("code",[t._v("'pre'")]),t._v(")：")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在组件更新后触发，这样你就可以访问更新的 DOM。")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注意：这也将推迟副作用的初始运行，直到组件的首次渲染完成。")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 访问视图 */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("flush")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'post'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("code",[t._v("flush")]),t._v(" 选项还接受 "),s("code",[t._v("sync")]),t._v("，这将强制效果始终同步触发。然而，这是低效的，应该很少需要。")]),t._v(" "),s("p",[t._v("与此同时，我们还提供了 "),s("code",[t._v("watchPostEffect")]),t._v(" 和 "),s("code",[t._v("watchSyncEffect")]),t._v(" 别名用来让代码意图更加明显。")]),t._v(" "),s("h2",{attrs:{id:"watch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watch"}},[t._v("#")]),t._v(" "),s("code",[t._v("watch")])]),t._v(" "),s("p",[s("code",[t._v("watch")]),t._v(" API 相当于选项式 API 中的 "),s("code",[t._v("watch property")]),t._v("。"),s("code",[t._v("watch")]),t._v(" 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况下，它也是惰性的，即只有当被侦听的源发生变化时才执行回调。")]),t._v(" "),s("ul",[s("li",[t._v("与 "),s("a",{attrs:{href:"#watcheffect"}},[t._v("watchEffect")]),t._v(" 比较，"),s("code",[t._v("watch")]),t._v(" 允许我们：\n"),s("ul",[s("li",[t._v("懒执行副作用；")]),t._v(" "),s("li",[t._v("更具体地说明什么状态应该触发侦听器重新运行；")]),t._v(" "),s("li",[t._v("访问侦听状态变化前后的值。")])])])]),t._v(" "),s("h3",{attrs:{id:"侦听单个数据源"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#侦听单个数据源"}},[t._v("#")]),t._v(" 侦听单个数据源")]),t._v(" "),s("p",[t._v("侦听器数据源可以是返回值的 getter 函数，也可以直接是 "),s("code",[t._v("ref")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 侦听一个 getter")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevCount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接侦听ref")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevCount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"侦听多个数据源"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#侦听多个数据源"}},[t._v("#")]),t._v(" 侦听多个数据源")]),t._v(" "),s("p",[t._v("侦听器还可以使用数组同时侦听多个源：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" firstName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" lastName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("firstName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" lastName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevValues")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nfirstName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'John'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// logs: ["John", ""] ["", ""]')]),t._v("\nlastName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Smith'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// logs: ["John", "Smith"] ["John", ""]')]),t._v("\n")])])]),s("p",[t._v("尽管如此，如果你在同一个函数里同时改变这些被侦听的来源，侦听器仍只会执行一次：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" firstName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" lastName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("firstName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" lastName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevValues")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("changeValues")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      firstName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'John'")]),t._v("\n      lastName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Smith'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 打印 ["John", "Smith"] ["", ""]')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" changeValues "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("注意多个同步更改只会触发一次侦听器。")]),t._v(" "),s("p",[t._v("通过更改设置 "),s("code",[t._v("flush: 'sync'")]),t._v("，我们可以为每个更改都强制触发侦听器，尽管这通常是不推荐的。或者，可以用 "),s("RouterLink",{attrs:{to:"/api/global-api.html#nexttick"}},[t._v("nextTick")]),t._v(" 等待侦听器在下一步改变之前运行。例如：")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("changeValues")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  firstName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'John'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 打印 ["John", ""] ["", ""]')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  lastName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Smith'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 打印 ["John", "Smith"] ["John", ""]')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"侦听响应式对象"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#侦听响应式对象"}},[t._v("#")]),t._v(" 侦听响应式对象")]),t._v(" "),s("p",[t._v("为了侦听深度嵌套的对象或数组中 property 变化，我们需要将 "),s("code",[t._v("deep")]),t._v(" 选项设置为 true：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("attributes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'not deep'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'deep'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("deep")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Alex'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 日志: "deep" "Alex" "Alex"')]),t._v("\n")])])]),s("p",[t._v("然而，侦听一个响应式对象或数组将始终返回该对象的引用。为了完全侦听深度嵌套的对象和数组，可能需要对值进行深拷贝。这可以通过诸如 "),s("code",[t._v("lodash.cloneDeep")]),t._v(" 这样的实用工具来实现：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" _ "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'lodash'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("attributes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cloneDeep")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Alex'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 日志: "Alex" ""')]),t._v("\n")])])]),s("p",[t._v("我们也可以直接给 "),s("code",[t._v("watch()")]),t._v(" 传入一个响应式对象，这种情况下会隐式地强制开启 "),s("code",[t._v("deep")]),t._v(" 选项，确保嵌套的深层变更能够被监听到：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("attributes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'implicit deep'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Alex'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 日志: "implicit deep" "Alex" "Alex"')]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("需要注意的是，在侦听使用 "),s("code",[t._v("reactive()")]),t._v(" 创建的响应式对象时，受数据响应限制影响，在改变数组或使用 "),s("code",[t._v("set()")]),t._v(" 新增对象属性时，存在和 Vue3 中表现不一致的情况，详情查看"),s("a",{attrs:{href:"#%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E9%99%90%E5%88%B6%E5%B8%A6%E6%9D%A5%E7%9A%84%E5%B7%AE%E5%BC%82"}},[t._v("这里")])])]),t._v(" "),s("h3",{attrs:{id:"立即回调的侦听器"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#立即回调的侦听器"}},[t._v("#")]),t._v(" 立即回调的侦听器")]),t._v(" "),s("p",[t._v("同选项式 "),s("code",[t._v("watch")]),t._v(" 一致，我们也可以通过传递 "),s("code",[t._v("immediate")]),t._v(" 选项让侦听回调立即执行：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'immediate'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 日志: "immediate" 0 undefined')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"与-watcheffect-共享的行为"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#与-watcheffect-共享的行为"}},[t._v("#")]),t._v(" 与 watchEffect 共享的行为")]),t._v(" "),s("p",[s("code",[t._v("watch")]),t._v(" 与 "),s("code",[t._v("watchEffect")]),t._v(" 共享"),s("a",{attrs:{href:"#%E5%81%9C%E6%AD%A2%E4%BE%A6%E5%90%AC"}},[t._v("停止侦听")]),t._v("，"),s("a",{attrs:{href:"#%E6%B8%85%E9%99%A4%E5%89%AF%E4%BD%9C%E7%94%A8"}},[t._v("清除副作用")]),t._v(" (相应地 "),s("code",[t._v("onInvalidate")]),t._v(" 会作为回调的第三个参数传入)、"),s("a",{attrs:{href:"#%E5%89%AF%E4%BD%9C%E7%94%A8%E5%88%B7%E6%96%B0%E6%97%B6%E6%9C%BA"}},[t._v("副作用刷新时机")]),t._v("行为。")]),t._v(" "),s("h2",{attrs:{id:"响应式-api-与-vue3-中的区别"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api-与-vue3-中的区别"}},[t._v("#")]),t._v(" 响应式 API 与 Vue3 中的区别")]),t._v(" "),s("p",[t._v("下面我们来总结一下 Mpx 中响应式 API 与 Vue3 中的区别：")]),t._v(" "),s("ul",[s("li",[t._v("不支持 "),s("code",[t._v("raw")]),t._v(" 相关 API（"),s("code",[t._v("markRaw")]),t._v(" 除外，我们提供了该 API 用于跳过部分数据的响应式转换）")]),t._v(" "),s("li",[t._v("不支持 "),s("code",[t._v("readonly")]),t._v(" 相关 API")]),t._v(" "),s("li",[t._v("不支持 "),s("code",[t._v("watchEffect")]),t._v("、"),s("code",[t._v("watch")]),t._v("、"),s("code",[t._v("computed")]),t._v(" 的调试选项")]),t._v(" "),s("li",[t._v("不支持对 "),s("code",[t._v("map")]),t._v("、"),s("code",[t._v("set")]),t._v(" 等集合类型进行响应式转换")]),t._v(" "),s("li",[t._v("受到 "),s("code",[t._v("Object.defineProperty")]),t._v(" 实现带来的数据响应限制影响")])]),t._v(" "),s("h3",{attrs:{id:"数据响应限制带来的差异"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#数据响应限制带来的差异"}},[t._v("#")]),t._v(" 数据响应限制带来的差异")]),t._v(" "),s("p",[t._v("同 Vue2 一致，Mpx 无法感知到对象 property 的添加或移除，我们暴露了 "),s("code",[t._v("set")]),t._v(" 和 "),s("code",[t._v("del")]),t._v(" API 来让用户显式地进行相关操作：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" del "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// {"count":0}')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'world'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// {"count":0,"hello":"world"}')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("del")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// {"hello":"world"}')]),t._v("\n")])])]),s("p",[t._v("同样，我们需要使用 "),s("code",[t._v("set")]),t._v(" 或数组原型方法对数组进行修改：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,1,2,3]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,3,2,3]")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,3,2,3,4]")]),t._v("\n")])])]),s("p",[t._v("可能你已经注意到，上面两个示例当中我们都使用了 "),s("code",[t._v("ref()")]),t._v(" 进行响应式数据创建，这是有原因的，在新的响应式 API 模式下，我们使用 "),s("code",[t._v("reactive()")]),t._v(" 创建的响应式数据在上述情况下仍然无法绕过 Vue2 设计中的数据响应限制，即使你使用了 "),s("code",[t._v("set")]),t._v(" 或数组原型方法：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,1,2,3]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发 watchEffect")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发 watchEffect")]),t._v("\n")])])]),s("p",[t._v("对于对象和在模板中使用也是同理：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addCount2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{state.count}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{state.count2}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  \n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("addCount2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发视图更新")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        addCount2\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("为什么会产生这个现象呢？原因在于：基于 "),s("code",[t._v("Object.defineProperty")]),t._v(" 实现的数据响应系统中，我们会对对象的每个已有属性创建了一个 "),s("code",[t._v("Dep")]),t._v(" 对象，在对该属性进行 "),s("code",[t._v("get")]),t._v(" 访问时通过这个对象将其与依赖它的观察者 "),s("code",[t._v("ReactiveEffect")]),t._v(" 关联起来，并在 "),s("code",[t._v("set")]),t._v(" 操作时触发关联 "),s("code",[t._v("ReactiveEffect")]),t._v(" 的更新，这是我们大家都知道的数据响应的基本原理。但是对于新增/删除对象属性和修改数组的场景，我们无法事先定义当前不存在属性的 "),s("code",[t._v("get/set")]),t._v(" (当然这在 "),s("code",[t._v("proxy")]),t._v(" 当中是可行的)，因此我们会把对象或者数组本身作为一个数据依赖创建 "),s("code",[t._v("Dep")]),t._v(" 对象，"),s("strong",[t._v("通过父级访问")]),t._v("该数据时定义的 "),s("code",[t._v("get/set")]),t._v(" 将其关联到对应的 "),s("code",[t._v("ReactiveEffect")]),t._v("，并在对数据进行新增/删除属性或数组操作时通过数据本身持有的 "),s("code",[t._v("Dep")]),t._v(" 对象触发关联 "),s("code",[t._v("ReactiveEffect")]),t._v(" 的更新，如下图所示：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/ReactiveEffect.png",alt:"数据响应原理"}})]),t._v(" "),s("p",[t._v("需要注意的是，"),s("strong",[t._v("通过父级访问")]),t._v("是建立 "),s("code",[t._v("Dep")]),t._v(" 与 "),s("code",[t._v("ReactiveEffect")]),t._v(" 关联关系的先决条件，在选项式 API 中，我们访问组件的响应式数据都需要通过 "),s("code",[t._v("this")]),t._v(" 进行访问，相当于这些数据都存在 "),s("code",[t._v("this")]),t._v(" 这个必要的"),s("strong",[t._v("父级")]),t._v("，因此我们在使用 "),s("code",[t._v("$set/$delete")]),t._v(" 进行对对象进行新增/删除属性或对数组进行修改时都能得到符合预期的结果，唯一的限制在于不能新增/删除根级数据属性，原因就在于 "),s("code",[t._v("this")]),t._v(" 不存在访问它的父级。")]),t._v(" "),s("p",[t._v("但是在组合式 API 中，我们不需要通过 "),s("code",[t._v("this")]),t._v(" 访问响应式数据，因此通过 "),s("code",[t._v("reactive()")]),t._v(" 创建的响应式数据本身就是根级数据，我们自然无法通过上述方式感知到根级数据自身的变化（在 Vue3 中，基于 "),s("code",[t._v("proxy")]),t._v(" 提供的强大能力响应式系统能够精确地感知到数据属性，甚至是当前不存在属性的访问与修改，不需要为数据自身建立 "),s("code",[t._v("Dep")]),t._v(" 对象，自然也不存在相关问题）。")]),t._v(" "),s("p",[t._v("在这种情况下，我们就需要用 "),s("code",[t._v("ref()")]),t._v(" 创建响应式数据，因为 "),s("code",[t._v("ref")]),t._v(" 创建了一个包装对象，我们永远需要通过 "),s("code",[t._v(".value")]),t._v(" 来访问其持有的数据（不管是显式访问还是隐式自动解包），这样就能保证 "),s("code",[t._v("ref")]),t._v(" 数据自身的变化能够被响应式系统感知，因此也不会遇到上面描述的问题。")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/99.96c5a70e.js b/docs-vuepress/.vuepress/dist/assets/js/99.96c5a70e.js
new file mode 100644
index 0000000000..f9de4f098d
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/99.96c5a70e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[99],{445:function(t,s,a){"use strict";a.r(s);var n=a(4),r=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"api代理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#api代理"}},[t._v("#")]),t._v(" Api代理")]),t._v(" "),s("blockquote",[s("p",[t._v("convert API at each end 各个平台之间 api 进行转换，目前已支持微信转支付宝、微信转web")])]),t._v(" "),s("h2",{attrs:{id:"usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#usage"}},[t._v("#")]),t._v(" Usage")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 mpx 生态")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 脱离 Mpx 单独使用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" getProxy "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// proxy 即为target 实例")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" proxy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getProxy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nproxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/pages/test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#options"}},[t._v("#")]),t._v(" Options")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("参数名称")]),t._v(" "),s("th",[t._v("类型")]),t._v(" "),s("th",[t._v("含义")]),t._v(" "),s("th",[t._v("是否必填")]),t._v(" "),s("th",[t._v("默认值")]),t._v(" "),s("th",[t._v("备注")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("platform")]),t._v(" "),s("td",[t._v("Object")]),t._v(" "),s("td",[t._v("各平台之间的转换")]),t._v(" "),s("td",[t._v("否")]),t._v(" "),s("td",[t._v("{ from:'', to:'' }")]),t._v(" "),s("td",[t._v("使用 mpx 脚手架配置会自动进行转换，无需配置")])]),t._v(" "),s("tr",[s("td",[t._v("exclude")]),t._v(" "),s("td",[t._v("Array(String)")]),t._v(" "),s("td",[t._v("跨平台时不需要转换的 api")]),t._v(" "),s("td",[t._v("-")]),t._v(" "),s("td"),t._v(" "),s("td")]),t._v(" "),s("tr",[s("td",[t._v("usePromise")]),t._v(" "),s("td",[t._v("Boolean")]),t._v(" "),s("td",[t._v("是否将 api 转化为 promise 格式使用")]),t._v(" "),s("td",[t._v("否")]),t._v(" "),s("td",[t._v("false")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("whiteList")]),t._v(" "),s("td",[t._v("Array(String)")]),t._v(" "),s("td",[t._v("强行转化为 promise 格式的 api")]),t._v(" "),s("td",[t._v("否")]),t._v(" "),s("td",[t._v("[]")]),t._v(" "),s("td",[t._v("需要 usePromise 设为 true")])]),t._v(" "),s("tr",[s("td",[t._v("blackList")]),t._v(" "),s("td",[t._v("Array(String)")]),t._v(" "),s("td",[t._v("强制不变成 promise 格式的 api")]),t._v(" "),s("td",[t._v("否")]),t._v(" "),s("td",[t._v("[]")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("fallbackMap")]),t._v(" "),s("td",[t._v("Object")]),t._v(" "),s("td",[t._v("对于不支持的API，允许配置一个映射表，接管不存在的API")]),t._v(" "),s("td",[t._v("否")]),t._v(" "),s("td",[t._v("{}")]),t._v(" "),s("td",[t._v("-")])])])]),t._v(" "),s("h2",{attrs:{id:"example"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[t._v("#")]),t._v(" example")]),t._v(" "),s("h3",{attrs:{id:"普通形式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#普通形式"}},[t._v("#")]),t._v(" 普通形式")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exclude")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'showToast'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// showToast 将不会被转换为目标平台")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("showModal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'标题'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'这是一个弹窗'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cancel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'用户点击取消'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"使用promise形式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用promise形式"}},[t._v("#")]),t._v(" 使用promise形式")]),t._v(" "),s("blockquote",[s("p",[t._v("开启usePromise时所有的异步api将返回promise，但是小程序中存在一些异步api本身的返回值是具有意义的，如uploadFile会返回一个uploadTask对象用于后续监听上传进度或者取消上传，在对api进行promise化之后我们会将原始的返回值挂载到promise.__returned属性上，便于开发者访问使用")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePromise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("showActionSheet")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("itemList")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tapIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/app.84c88b57.js b/docs-vuepress/.vuepress/dist/assets/js/app.84c88b57.js
new file mode 100644
index 0000000000..3977c40ff5
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/assets/js/app.84c88b57.js
@@ -0,0 +1,18 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(e){function t(t){for(var r,a,l=t[0],s=t[1],c=t[2],f=0,p=[];f<l.length;f++)a=l[f],Object.prototype.hasOwnProperty.call(i,a)&&i[a]&&p.push(i[a][0]),i[a]=0;for(r in s)Object.prototype.hasOwnProperty.call(s,r)&&(e[r]=s[r]);for(u&&u(t);p.length;)p.shift()();return o.push.apply(o,c||[]),n()}function n(){for(var e,t=0;t<o.length;t++){for(var n=o[t],r=!0,l=1;l<n.length;l++){var s=n[l];0!==i[s]&&(r=!1)}r&&(o.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},i={13:0},o=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.e=function(e){var t=[],n=i[e];if(0!==n)if(n)t.push(n[2]);else{var r=new Promise((function(t,r){n=i[e]=[t,r]}));t.push(n[2]=r);var o,l=document.createElement("script");l.charset="utf-8",l.timeout=120,a.nc&&l.setAttribute("nonce",a.nc),l.src=function(e){return a.p+"assets/js/"+({}[e]||e)+"."+{1:"4f7abe8f",2:"314c65b9",3:"145e69cd",4:"9489102c",5:"12d049b6",6:"6ea91b28",7:"01e4e942",8:"ba7f6ace",9:"26319460",10:"0192acce",11:"d7a8d045",12:"4d7217be",14:"7377c68f",15:"6f885a83",16:"974f551e",17:"e94e6745",18:"b1f7a4a2",19:"62186e92",20:"e9cd4de3",21:"217f8fa9",22:"4cd3344f",23:"365f9a87",24:"17777a13",25:"889c07d7",26:"3aa9f276",27:"1a35170a",28:"3670fa46",29:"a911e510",30:"04d1a7ea",31:"ec06bf2f",32:"f29d2cd1",33:"936d018e",34:"f494d685",35:"c3ed1ff7",36:"d2c9afa9",37:"4e1eee2c",38:"7826170e",39:"094ffa40",40:"10d90636",41:"8351af86",42:"53972f6c",43:"e2b432ea",44:"e4242a1f",45:"392413aa",46:"22f9a9c6",47:"2bd2cecc",48:"55792a30",49:"cde94a79",50:"42e34e52",51:"90dfa84e",52:"10bb0251",53:"7207ffc5",54:"af3d3dcd",55:"2d6ae2e1",56:"9aec9a9e",57:"9d9ddcbd",58:"50eb3b91",59:"27106fbb",60:"a47e5279",61:"74ebd7d9",62:"4bf212f9",63:"b54aca3e",64:"399e72b8",65:"a8c627d3",66:"7f19cc4b",67:"e57db97e",68:"ebe4213c",69:"2d309866",70:"60ae83e6",71:"188d7bca",72:"3f7bfd0d",73:"171571e4",74:"3d5cfaba",75:"093d716c",76:"50d84c61",77:"7bc0f013",78:"e2ded2d4",79:"f7eeb76b",80:"41418749",81:"16e2cc83",82:"56c0d7c1",83:"ea65d6b1",84:"d50d3d09",85:"1eed1486",86:"1ab04b8d",87:"392384e7",88:"a95133cd",89:"213efaae",90:"ef03688f",91:"43930d52",92:"ae5e9611",93:"3cdab647",94:"72df7b53",95:"c8e36604",96:"1ebdc00d",97:"fa1ed9e7",98:"939cb6ef",99:"96c5a70e",100:"f31ffd06",101:"283d0363",102:"094a0a16",103:"b34f6752",104:"78f6358e",105:"eb6680fc",106:"471f03cf",107:"63fd18fd",108:"614260e9",109:"3da50cc1",110:"f74ff3a3",111:"51932e54",112:"da7bd3e7",113:"caaf11a3",114:"16cda7ac",115:"88124b12",116:"4a116234",117:"e45c1b95",118:"9cbac09e",119:"312e4c21",120:"7a6b4035"}[e]+".js"}(e);var s=new Error;o=function(t){l.onerror=l.onload=null,clearTimeout(c);var n=i[e];if(0!==n){if(n){var r=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;s.message="Loading chunk "+e+" failed.\n("+r+": "+o+")",s.name="ChunkLoadError",s.type=r,s.request=o,n[1](s)}i[e]=void 0}};var c=setTimeout((function(){o({type:"timeout",target:l})}),12e4);l.onerror=l.onload=o,document.head.appendChild(l)}return Promise.all(t)},a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/",a.oe=function(e){throw console.error(e),e};var l=window.webpackJsonp=window.webpackJsonp||[],s=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var u=s;o.push([128,0]),n()}([function(e,t,n){"use strict";n.d(t,"d",(function(){return b})),n.d(t,"c",(function(){return y})),n.d(t,"b",(function(){return _})),n.d(t,"e",(function(){return w})),n.d(t,"a",(function(){return x})),n.d(t,"f",(function(){return S})),n.d(t,"g",(function(){return O})),n.d(t,"h",(function(){return j}));n(169),n(69),n(10),n(19),n(30);var r=n(2),i={"components/AlgoliaSearchBox":()=>Promise.resolve().then(n.bind(null,126)),"components/DropdownLink":()=>Promise.all([n.e(0),n.e(16)]).then(n.bind(null,322)),"components/DropdownTransition":()=>Promise.all([n.e(0),n.e(31)]).then(n.bind(null,296)),"components/Home":()=>Promise.all([n.e(0),n.e(21)]).then(n.bind(null,348)),"components/NavLink":()=>n.e(34).then(n.bind(null,293)),"components/NavLinks":()=>Promise.all([n.e(0),n.e(15)]).then(n.bind(null,349)),"components/Navbar":()=>Promise.resolve().then(n.bind(null,70)),"components/Page":()=>Promise.all([n.e(0),n.e(14)]).then(n.bind(null,350)),"components/PageEdit":()=>Promise.all([n.e(0),n.e(22)]).then(n.bind(null,323)),"components/PageNav":()=>Promise.all([n.e(0),n.e(19)]).then(n.bind(null,324)),"components/Sidebar":()=>Promise.all([n.e(0),n.e(1)]).then(n.bind(null,369)),"components/SidebarButton":()=>Promise.all([n.e(0),n.e(32)]).then(n.bind(null,381)),"components/SidebarGroup":()=>Promise.all([n.e(0),n.e(4)]).then(n.bind(null,338)),"components/SidebarLink":()=>Promise.all([n.e(0),n.e(20)]).then(n.bind(null,327)),"components/SidebarLinks":()=>Promise.all([n.e(0),n.e(4)]).then(n.bind(null,325)),"global-components/Badge":()=>Promise.all([n.e(0),n.e(8)]).then(n.bind(null,382)),"global-components/CodeBlock":()=>Promise.all([n.e(0),n.e(9)]).then(n.bind(null,374)),"global-components/CodeGroup":()=>Promise.all([n.e(0),n.e(10)]).then(n.bind(null,375)),"layouts/404":()=>n.e(12).then(n.bind(null,376)),"layouts/Layout":()=>Promise.all([n.e(0),n.e(1),n.e(3),n.e(7)]).then(n.bind(null,377)),NotFound:()=>n.e(12).then(n.bind(null,376)),Layout:()=>Promise.all([n.e(0),n.e(1),n.e(3),n.e(7)]).then(n.bind(null,377)),"components/CodeList":()=>Promise.all([n.e(0),n.e(17)]).then(n.bind(null,351)),"components/MobileSwiper":()=>Promise.all([n.e(0),n.e(24)]).then(n.bind(null,326)),"components/MobileView":()=>Promise.all([n.e(0),n.e(18)]).then(n.bind(null,352)),"components/Popover":()=>Promise.all([n.e(0),n.e(25)]).then(n.bind(null,303)),"components/SlideItem":()=>Promise.all([n.e(0),n.e(26)]).then(n.bind(null,378)),"components/Swiper":()=>Promise.all([n.e(0),n.e(27)]).then(n.bind(null,353)),"components/SwiperImg":()=>Promise.all([n.e(0),n.e(28)]).then(n.bind(null,354)),"global-components/Content":()=>Promise.all([n.e(0),n.e(2)]).then(n.bind(null,370)),"global-components/Footer":()=>Promise.all([n.e(0),n.e(6)]).then(n.bind(null,355)),"global-components/Header":()=>n.e(11).then(n.bind(null,371)),"layouts/GlobalLayout":()=>Promise.resolve().then(n.bind(null,1)),"layouts/HomepageLayout":()=>Promise.all([n.e(0),n.e(1),n.e(3),n.e(2),n.e(5)]).then(n.bind(null,379)),GlobalLayout:()=>Promise.resolve().then(n.bind(null,1)),HomepageLayout:()=>Promise.all([n.e(0),n.e(1),n.e(3),n.e(2),n.e(5)]).then(n.bind(null,379))},o={"v-81665940":()=>n.e(37).then(n.bind(null,383)),"v-78e9c206":()=>n.e(36).then(n.bind(null,384)),"v-1f9c424a":()=>n.e(35).then(n.bind(null,385)),"v-301af225":()=>Promise.all([n.e(0),n.e(29)]).then(n.bind(null,356)),"v-13123160":()=>n.e(38).then(n.bind(null,386)),"v-068ddbda":()=>n.e(40).then(n.bind(null,387)),"v-7560cbe0":()=>n.e(39).then(n.bind(null,388)),"v-33e6cba4":()=>n.e(41).then(n.bind(null,389)),"v-32b77802":()=>n.e(42).then(n.bind(null,390)),"v-6266eb79":()=>Promise.all([n.e(0),n.e(23)]).then(n.bind(null,380)),"v-808ce144":()=>n.e(43).then(n.bind(null,391)),"v-7d2b6e08":()=>n.e(44).then(n.bind(null,392)),"v-4286840a":()=>n.e(47).then(n.bind(null,393)),"v-0c915944":()=>n.e(45).then(n.bind(null,394)),"v-cd129100":()=>n.e(46).then(n.bind(null,395)),"v-b32d8070":()=>n.e(48).then(n.bind(null,396)),"v-ae4cfcf4":()=>n.e(49).then(n.bind(null,397)),"v-27ec3078":()=>n.e(51).then(n.bind(null,398)),"v-6ced36f6":()=>n.e(54).then(n.bind(null,399)),"v-1b4df5b2":()=>n.e(50).then(n.bind(null,400)),"v-16cd1ba0":()=>n.e(52).then(n.bind(null,401)),"v-2f3a4e02":()=>n.e(53).then(n.bind(null,402)),"v-65ac7ae0":()=>n.e(57).then(n.bind(null,403)),"v-29b15788":()=>n.e(56).then(n.bind(null,404)),"v-67f67560":()=>n.e(55).then(n.bind(null,405)),"v-9cda2680":()=>n.e(58).then(n.bind(null,406)),"v-aba0a160":()=>n.e(59).then(n.bind(null,407)),"v-06150180":()=>n.e(60).then(n.bind(null,408)),"v-16a68b26":()=>n.e(61).then(n.bind(null,409)),"v-2df9c8de":()=>n.e(64).then(n.bind(null,410)),"v-770abfaa":()=>n.e(63).then(n.bind(null,411)),"v-419821e2":()=>n.e(66).then(n.bind(null,412)),"v-31f676ba":()=>n.e(62).then(n.bind(null,413)),"v-32741058":()=>n.e(67).then(n.bind(null,414)),"v-27eacdde":()=>n.e(65).then(n.bind(null,415)),"v-43feb580":()=>n.e(69).then(n.bind(null,416)),"v-261b4b10":()=>n.e(68).then(n.bind(null,417)),"v-23021ac0":()=>n.e(70).then(n.bind(null,418)),"v-6a447440":()=>n.e(72).then(n.bind(null,419)),"v-aa3f94b4":()=>n.e(74).then(n.bind(null,420)),"v-298abc80":()=>n.e(71).then(n.bind(null,421)),"v-f6b6871c":()=>n.e(77).then(n.bind(null,422)),"v-c6307034":()=>n.e(73).then(n.bind(null,423)),"v-b7e9c1dc":()=>n.e(76).then(n.bind(null,424)),"v-59734f60":()=>n.e(79).then(n.bind(null,425)),"v-4cc39ac0":()=>n.e(78).then(n.bind(null,426)),"v-04b286c0":()=>n.e(80).then(n.bind(null,427)),"v-25e023c0":()=>n.e(81).then(n.bind(null,428)),"v-ade3a0c0":()=>n.e(83).then(n.bind(null,429)),"v-082a4080":()=>n.e(84).then(n.bind(null,430)),"v-4653082a":()=>n.e(85).then(n.bind(null,431)),"v-eb995c80":()=>n.e(82).then(n.bind(null,432)),"v-4c636240":()=>n.e(87).then(n.bind(null,433)),"v-9217ab80":()=>n.e(89).then(n.bind(null,434)),"v-b77c6940":()=>n.e(33).then(n.bind(null,435)),"v-64d5c000":()=>n.e(86).then(n.bind(null,436)),"v-3f8ff5dc":()=>n.e(90).then(n.bind(null,437)),"v-14d018a4":()=>n.e(92).then(n.bind(null,438)),"v-3e859f72":()=>n.e(91).then(n.bind(null,439)),"v-05fb8080":()=>n.e(93).then(n.bind(null,440)),"v-4db713e0":()=>n.e(96).then(n.bind(null,441)),"v-25ecbea0":()=>n.e(95).then(n.bind(null,442)),"v-fa77fc40":()=>n.e(94).then(n.bind(null,443)),"v-1553266a":()=>n.e(98).then(n.bind(null,444)),"v-4777611a":()=>n.e(99).then(n.bind(null,445)),"v-453e3320":()=>n.e(97).then(n.bind(null,446)),"v-2fa3b31c":()=>n.e(100).then(n.bind(null,447)),"v-670c5b20":()=>n.e(102).then(n.bind(null,448)),"v-4147fde5":()=>n.e(101).then(n.bind(null,449)),"v-41032180":()=>n.e(104).then(n.bind(null,450)),"v-05fd3820":()=>n.e(103).then(n.bind(null,451)),"v-69e59278":()=>n.e(108).then(n.bind(null,452)),"v-4269b2b6":()=>n.e(110).then(n.bind(null,453)),"v-63e1d400":()=>n.e(106).then(n.bind(null,454)),"v-7c090ae0":()=>n.e(105).then(n.bind(null,455)),"v-fbaff41a":()=>n.e(107).then(n.bind(null,456)),"v-2e48a400":()=>n.e(111).then(n.bind(null,457)),"v-f2e08d00":()=>n.e(109).then(n.bind(null,458)),"v-29f7525e":()=>n.e(113).then(n.bind(null,459)),"v-5bf8d898":()=>n.e(115).then(n.bind(null,460)),"v-15dbdb80":()=>n.e(112).then(n.bind(null,461)),"v-ae319f98":()=>n.e(117).then(n.bind(null,462)),"v-0960fc22":()=>n.e(114).then(n.bind(null,463)),"v-c5494280":()=>n.e(75).then(n.bind(null,464)),"v-48addfa0":()=>n.e(88).then(n.bind(null,465)),"v-f625b20c":()=>n.e(116).then(n.bind(null,466)),"v-4f2760cc":()=>n.e(118).then(n.bind(null,467)),"v-16c21d00":()=>n.e(119).then(n.bind(null,468))};function a(e){const t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}const l=/-(\w)/g,s=a(e=>e.replace(l,(e,t)=>t?t.toUpperCase():"")),c=/\B([A-Z])/g,u=a(e=>e.replace(c,"-$1").toLowerCase()),f=a(e=>e.charAt(0).toUpperCase()+e.slice(1));function p(e,t){if(!t)return;if(e(t))return e(t);return t.includes("-")?e(f(s(t))):e(f(t))||e(u(t))}const d=Object.assign({},i,o),h=e=>d[e],v=e=>o[e],m=e=>i[e],g=e=>r.a.component(e);function b(e){return p(v,e)}function y(e){return p(m,e)}function _(e){return p(h,e)}function w(e){return p(g,e)}function x(...e){return Promise.all(e.filter(e=>e).map(async e=>{if(!w(e)&&_(e)){const t=await _(e)();r.a.component(e,t.default)}}))}function S(e,t,n){switch(t){case"components":e[t]||(e[t]={}),Object.assign(e[t],n);break;case"mixins":e[t]||(e[t]=[]),e[t].push(...n);break;default:throw new Error("Unknown option name.")}}function O(e,t){const{$localePath:n}=e;return"object"==typeof t&&t[n]?t[n]:t}function j(e,t){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[e]=t)}},function(e,t,n){"use strict";n.r(t);var r=n(2),i=n(0),o={name:"GlobalLayout",computed:{layout(){const e=this.getLayout();return Object(i.h)("layout",e),r.a.component(e)}},methods:{getLayout(){if(this.$page.path){const e=this.$page.frontmatter.layout;return e&&(this.$vuepress.getLayoutAsyncComponent(e)||this.$vuepress.getVueComponent(e))?e:"Layout"}return"NotFound"}}},a=n(4),l={components:{DefaultGlobalLayout:Object(a.a)(o,(function(){return(0,this._self._c)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports,Navbar:n(70).default},data:()=>({isMobileHeaderOpen:!1}),computed:{isMobile:()=>document.documentElement.clientWidth<720}},s=Object(a.a)(l,(function(){var e=this._self._c;return e("div",{attrs:{id:"vuepress-theme-blog__global-layout"}},[e("div",{staticClass:"content-wrapper"},[e("DefaultGlobalLayout")],1)])}),[],!1,null,null,null);t.default=s.exports},function(e,t,n){"use strict";n.d(t,"a",(function(){return Kn}));
+/*!
+ * Vue.js v2.7.16
+ * (c) 2014-2023 Evan You
+ * Released under the MIT License.
+ */
+var r=Object.freeze({}),i=Array.isArray;function o(e){return null==e}function a(e){return null!=e}function l(e){return!0===e}function s(e){return"string"==typeof e||"number"==typeof e||"symbol"==typeof e||"boolean"==typeof e}function c(e){return"function"==typeof e}function u(e){return null!==e&&"object"==typeof e}var f=Object.prototype.toString;function p(e){return"[object Object]"===f.call(e)}function d(e){return"[object RegExp]"===f.call(e)}function h(e){var t=parseFloat(String(e));return t>=0&&Math.floor(t)===t&&isFinite(e)}function v(e){return a(e)&&"function"==typeof e.then&&"function"==typeof e.catch}function m(e){return null==e?"":Array.isArray(e)||p(e)&&e.toString===f?JSON.stringify(e,g,2):String(e)}function g(e,t){return t&&t.__v_isRef?t.value:t}function b(e){var t=parseFloat(e);return isNaN(t)?e:t}function y(e,t){for(var n=Object.create(null),r=e.split(","),i=0;i<r.length;i++)n[r[i]]=!0;return t?function(e){return n[e.toLowerCase()]}:function(e){return n[e]}}y("slot,component",!0);var _=y("key,ref,slot,slot-scope,is");function w(e,t){var n=e.length;if(n){if(t===e[n-1])return void(e.length=n-1);var r=e.indexOf(t);if(r>-1)return e.splice(r,1)}}var x=Object.prototype.hasOwnProperty;function S(e,t){return x.call(e,t)}function O(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}var j=/-(\w)/g,k=O((function(e){return e.replace(j,(function(e,t){return t?t.toUpperCase():""}))})),P=O((function(e){return e.charAt(0).toUpperCase()+e.slice(1)})),E=/\B([A-Z])/g,C=O((function(e){return e.replace(E,"-$1").toLowerCase()}));var I=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n};function A(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function T(e,t){for(var n in t)e[n]=t[n];return e}function L(e){for(var t={},n=0;n<e.length;n++)e[n]&&T(t,e[n]);return t}function D(e,t,n){}var $=function(e,t,n){return!1},R=function(e){return e};function M(e,t){if(e===t)return!0;var n=u(e),r=u(t);if(!n||!r)return!n&&!r&&String(e)===String(t);try{var i=Array.isArray(e),o=Array.isArray(t);if(i&&o)return e.length===t.length&&e.every((function(e,n){return M(e,t[n])}));if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(i||o)return!1;var a=Object.keys(e),l=Object.keys(t);return a.length===l.length&&a.every((function(n){return M(e[n],t[n])}))}catch(e){return!1}}function N(e,t){for(var n=0;n<e.length;n++)if(M(e[n],t))return n;return-1}function U(e){var t=!1;return function(){t||(t=!0,e.apply(this,arguments))}}function q(e,t){return e===t?0===e&&1/e!=1/t:e==e||t==t}var F=["component","directive","filter"],B=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured","serverPrefetch","renderTracked","renderTriggered"],H={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:$,isReservedAttr:$,isUnknownElement:$,getTagNamespace:D,parsePlatformTagName:R,mustUseProp:$,async:!0,_lifecycleHooks:B},z=/a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;function V(e){var t=(e+"").charCodeAt(0);return 36===t||95===t}function W(e,t,n,r){Object.defineProperty(e,t,{value:n,enumerable:!!r,writable:!0,configurable:!0})}var K=new RegExp("[^".concat(z.source,".$_\\d]"));var G="__proto__"in{},J="undefined"!=typeof window,Q=J&&window.navigator.userAgent.toLowerCase(),Z=Q&&/msie|trident/.test(Q),Y=Q&&Q.indexOf("msie 9.0")>0,X=Q&&Q.indexOf("edge/")>0;Q&&Q.indexOf("android");var ee=Q&&/iphone|ipad|ipod|ios/.test(Q);Q&&/chrome\/\d+/.test(Q),Q&&/phantomjs/.test(Q);var te,ne=Q&&Q.match(/firefox\/(\d+)/),re={}.watch,ie=!1;if(J)try{var oe={};Object.defineProperty(oe,"passive",{get:function(){ie=!0}}),window.addEventListener("test-passive",null,oe)}catch(e){}var ae=function(){return void 0===te&&(te=!J&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),te},le=J&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function se(e){return"function"==typeof e&&/native code/.test(e.toString())}var ce,ue="undefined"!=typeof Symbol&&se(Symbol)&&"undefined"!=typeof Reflect&&se(Reflect.ownKeys);ce="undefined"!=typeof Set&&se(Set)?Set:function(){function e(){this.set=Object.create(null)}return e.prototype.has=function(e){return!0===this.set[e]},e.prototype.add=function(e){this.set[e]=!0},e.prototype.clear=function(){this.set=Object.create(null)},e}();var fe=null;function pe(e){void 0===e&&(e=null),e||fe&&fe._scope.off(),fe=e,e&&e._scope.on()}var de=function(){function e(e,t,n,r,i,o,a,l){this.tag=e,this.data=t,this.children=n,this.text=r,this.elm=i,this.ns=void 0,this.context=o,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=t&&t.key,this.componentOptions=a,this.componentInstance=void 0,this.parent=void 0,this.raw=!1,this.isStatic=!1,this.isRootInsert=!0,this.isComment=!1,this.isCloned=!1,this.isOnce=!1,this.asyncFactory=l,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1}return Object.defineProperty(e.prototype,"child",{get:function(){return this.componentInstance},enumerable:!1,configurable:!0}),e}(),he=function(e){void 0===e&&(e="");var t=new de;return t.text=e,t.isComment=!0,t};function ve(e){return new de(void 0,void 0,void 0,String(e))}function me(e){var t=new de(e.tag,e.data,e.children&&e.children.slice(),e.text,e.elm,e.context,e.componentOptions,e.asyncFactory);return t.ns=e.ns,t.isStatic=e.isStatic,t.key=e.key,t.isComment=e.isComment,t.fnContext=e.fnContext,t.fnOptions=e.fnOptions,t.fnScopeId=e.fnScopeId,t.asyncMeta=e.asyncMeta,t.isCloned=!0,t}"function"==typeof SuppressedError&&SuppressedError;var ge=0,be=[],ye=function(){function e(){this._pending=!1,this.id=ge++,this.subs=[]}return e.prototype.addSub=function(e){this.subs.push(e)},e.prototype.removeSub=function(e){this.subs[this.subs.indexOf(e)]=null,this._pending||(this._pending=!0,be.push(this))},e.prototype.depend=function(t){e.target&&e.target.addDep(this)},e.prototype.notify=function(e){var t=this.subs.filter((function(e){return e}));for(var n=0,r=t.length;n<r;n++){0,t[n].update()}},e}();ye.target=null;var _e=[];function we(e){_e.push(e),ye.target=e}function xe(){_e.pop(),ye.target=_e[_e.length-1]}var Se=Array.prototype,Oe=Object.create(Se);["push","pop","shift","unshift","splice","sort","reverse"].forEach((function(e){var t=Se[e];W(Oe,e,(function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];var i,o=t.apply(this,n),a=this.__ob__;switch(e){case"push":case"unshift":i=n;break;case"splice":i=n.slice(2)}return i&&a.observeArray(i),a.dep.notify(),o}))}));var je=Object.getOwnPropertyNames(Oe),ke={},Pe=!0;function Ee(e){Pe=e}var Ce={notify:D,depend:D,addSub:D,removeSub:D},Ie=function(){function e(e,t,n){if(void 0===t&&(t=!1),void 0===n&&(n=!1),this.value=e,this.shallow=t,this.mock=n,this.dep=n?Ce:new ye,this.vmCount=0,W(e,"__ob__",this),i(e)){if(!n)if(G)e.__proto__=Oe;else for(var r=0,o=je.length;r<o;r++){W(e,l=je[r],Oe[l])}t||this.observeArray(e)}else{var a=Object.keys(e);for(r=0;r<a.length;r++){var l;Te(e,l=a[r],ke,void 0,t,n)}}}return e.prototype.observeArray=function(e){for(var t=0,n=e.length;t<n;t++)Ae(e[t],!1,this.mock)},e}();function Ae(e,t,n){return e&&S(e,"__ob__")&&e.__ob__ instanceof Ie?e.__ob__:!Pe||!n&&ae()||!i(e)&&!p(e)||!Object.isExtensible(e)||e.__v_skip||Ue(e)||e instanceof de?void 0:new Ie(e,t,n)}function Te(e,t,n,r,o,a,l){void 0===l&&(l=!1);var s=new ye,c=Object.getOwnPropertyDescriptor(e,t);if(!c||!1!==c.configurable){var u=c&&c.get,f=c&&c.set;u&&!f||n!==ke&&2!==arguments.length||(n=e[t]);var p=o?n&&n.__ob__:Ae(n,!1,a);return Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){var t=u?u.call(e):n;return ye.target&&(s.depend(),p&&(p.dep.depend(),i(t)&&$e(t))),Ue(t)&&!o?t.value:t},set:function(t){var r=u?u.call(e):n;if(q(r,t)){if(f)f.call(e,t);else{if(u)return;if(!o&&Ue(r)&&!Ue(t))return void(r.value=t);n=t}p=o?t&&t.__ob__:Ae(t,!1,a),s.notify()}}}),s}}function Le(e,t,n){if(!Ne(e)){var r=e.__ob__;return i(e)&&h(t)?(e.length=Math.max(e.length,t),e.splice(t,1,n),r&&!r.shallow&&r.mock&&Ae(n,!1,!0),n):t in e&&!(t in Object.prototype)?(e[t]=n,n):e._isVue||r&&r.vmCount?n:r?(Te(r.value,t,n,void 0,r.shallow,r.mock),r.dep.notify(),n):(e[t]=n,n)}}function De(e,t){if(i(e)&&h(t))e.splice(t,1);else{var n=e.__ob__;e._isVue||n&&n.vmCount||Ne(e)||S(e,t)&&(delete e[t],n&&n.dep.notify())}}function $e(e){for(var t=void 0,n=0,r=e.length;n<r;n++)(t=e[n])&&t.__ob__&&t.__ob__.dep.depend(),i(t)&&$e(t)}function Re(e){return Me(e,!0),W(e,"__v_isShallow",!0),e}function Me(e,t){if(!Ne(e)){Ae(e,t,ae());0}}function Ne(e){return!(!e||!e.__v_isReadonly)}function Ue(e){return!(!e||!0!==e.__v_isRef)}function qe(e,t,n){Object.defineProperty(e,n,{enumerable:!0,configurable:!0,get:function(){var e=t[n];if(Ue(e))return e.value;var r=e&&e.__ob__;return r&&r.dep.depend(),e},set:function(e){var r=t[n];Ue(r)&&!Ue(e)?r.value=e:t[n]=e}})}"".concat("watcher"," callback"),"".concat("watcher"," getter"),"".concat("watcher"," cleanup");var Fe;var Be=function(){function e(e){void 0===e&&(e=!1),this.detached=e,this.active=!0,this.effects=[],this.cleanups=[],this.parent=Fe,!e&&Fe&&(this.index=(Fe.scopes||(Fe.scopes=[])).push(this)-1)}return e.prototype.run=function(e){if(this.active){var t=Fe;try{return Fe=this,e()}finally{Fe=t}}else 0},e.prototype.on=function(){Fe=this},e.prototype.off=function(){Fe=this.parent},e.prototype.stop=function(e){if(this.active){var t=void 0,n=void 0;for(t=0,n=this.effects.length;t<n;t++)this.effects[t].teardown();for(t=0,n=this.cleanups.length;t<n;t++)this.cleanups[t]();if(this.scopes)for(t=0,n=this.scopes.length;t<n;t++)this.scopes[t].stop(!0);if(!this.detached&&this.parent&&!e){var r=this.parent.scopes.pop();r&&r!==this&&(this.parent.scopes[this.index]=r,r.index=this.index)}this.parent=void 0,this.active=!1}},e}();function He(e){var t=e._provided,n=e.$parent&&e.$parent._provided;return n===t?e._provided=Object.create(n):t}var ze=O((function(e){var t="&"===e.charAt(0),n="~"===(e=t?e.slice(1):e).charAt(0),r="!"===(e=n?e.slice(1):e).charAt(0);return{name:e=r?e.slice(1):e,once:n,capture:r,passive:t}}));function Ve(e,t){function n(){var e=n.fns;if(!i(e))return Pt(e,null,arguments,t,"v-on handler");for(var r=e.slice(),o=0;o<r.length;o++)Pt(r[o],null,arguments,t,"v-on handler")}return n.fns=e,n}function We(e,t,n,r,i,a){var s,c,u,f;for(s in e)c=e[s],u=t[s],f=ze(s),o(c)||(o(u)?(o(c.fns)&&(c=e[s]=Ve(c,a)),l(f.once)&&(c=e[s]=i(f.name,c,f.capture)),n(f.name,c,f.capture,f.passive,f.params)):c!==u&&(u.fns=c,e[s]=u));for(s in t)o(e[s])&&r((f=ze(s)).name,t[s],f.capture)}function Ke(e,t,n){var r;e instanceof de&&(e=e.data.hook||(e.data.hook={}));var i=e[t];function s(){n.apply(this,arguments),w(r.fns,s)}o(i)?r=Ve([s]):a(i.fns)&&l(i.merged)?(r=i).fns.push(s):r=Ve([i,s]),r.merged=!0,e[t]=r}function Ge(e,t,n,r,i){if(a(t)){if(S(t,n))return e[n]=t[n],i||delete t[n],!0;if(S(t,r))return e[n]=t[r],i||delete t[r],!0}return!1}function Je(e){return s(e)?[ve(e)]:i(e)?function e(t,n){var r,c,u,f,p=[];for(r=0;r<t.length;r++)o(c=t[r])||"boolean"==typeof c||(u=p.length-1,f=p[u],i(c)?c.length>0&&(Qe((c=e(c,"".concat(n||"","_").concat(r)))[0])&&Qe(f)&&(p[u]=ve(f.text+c[0].text),c.shift()),p.push.apply(p,c)):s(c)?Qe(f)?p[u]=ve(f.text+c):""!==c&&p.push(ve(c)):Qe(c)&&Qe(f)?p[u]=ve(f.text+c.text):(l(t._isVList)&&a(c.tag)&&o(c.key)&&a(n)&&(c.key="__vlist".concat(n,"_").concat(r,"__")),p.push(c)));return p}(e):void 0}function Qe(e){return a(e)&&a(e.text)&&!1===e.isComment}function Ze(e,t){var n,r,o,l,s=null;if(i(e)||"string"==typeof e)for(s=new Array(e.length),n=0,r=e.length;n<r;n++)s[n]=t(e[n],n);else if("number"==typeof e)for(s=new Array(e),n=0;n<e;n++)s[n]=t(n+1,n);else if(u(e))if(ue&&e[Symbol.iterator]){s=[];for(var c=e[Symbol.iterator](),f=c.next();!f.done;)s.push(t(f.value,s.length)),f=c.next()}else for(o=Object.keys(e),s=new Array(o.length),n=0,r=o.length;n<r;n++)l=o[n],s[n]=t(e[l],l,n);return a(s)||(s=[]),s._isVList=!0,s}function Ye(e,t,n,r){var i,o=this.$scopedSlots[e];o?(n=n||{},r&&(n=T(T({},r),n)),i=o(n)||(c(t)?t():t)):i=this.$slots[e]||(c(t)?t():t);var a=n&&n.slot;return a?this.$createElement("template",{slot:a},i):i}function Xe(e){return An(this.$options,"filters",e,!0)||R}function et(e,t){return i(e)?-1===e.indexOf(t):e!==t}function tt(e,t,n,r,i){var o=H.keyCodes[t]||n;return i&&r&&!H.keyCodes[t]?et(i,r):o?et(o,e):r?C(r)!==t:void 0===e}function nt(e,t,n,r,o){if(n)if(u(n)){i(n)&&(n=L(n));var a=void 0,l=function(i){if("class"===i||"style"===i||_(i))a=e;else{var l=e.attrs&&e.attrs.type;a=r||H.mustUseProp(t,l,i)?e.domProps||(e.domProps={}):e.attrs||(e.attrs={})}var s=k(i),c=C(i);s in a||c in a||(a[i]=n[i],o&&((e.on||(e.on={}))["update:".concat(i)]=function(e){n[i]=e}))};for(var s in n)l(s)}else;return e}function rt(e,t){var n=this._staticTrees||(this._staticTrees=[]),r=n[e];return r&&!t||ot(r=n[e]=this.$options.staticRenderFns[e].call(this._renderProxy,this._c,this),"__static__".concat(e),!1),r}function it(e,t,n){return ot(e,"__once__".concat(t).concat(n?"_".concat(n):""),!0),e}function ot(e,t,n){if(i(e))for(var r=0;r<e.length;r++)e[r]&&"string"!=typeof e[r]&&at(e[r],"".concat(t,"_").concat(r),n);else at(e,t,n)}function at(e,t,n){e.isStatic=!0,e.key=t,e.isOnce=n}function lt(e,t){if(t)if(p(t)){var n=e.on=e.on?T({},e.on):{};for(var r in t){var i=n[r],o=t[r];n[r]=i?[].concat(i,o):o}}else;return e}function st(e,t,n,r){t=t||{$stable:!n};for(var o=0;o<e.length;o++){var a=e[o];i(a)?st(a,t,n):a&&(a.proxy&&(a.fn.proxy=!0),t[a.key]=a.fn)}return r&&(t.$key=r),t}function ct(e,t){for(var n=0;n<t.length;n+=2){var r=t[n];"string"==typeof r&&r&&(e[t[n]]=t[n+1])}return e}function ut(e,t){return"string"==typeof e?t+e:e}function ft(e){e._o=it,e._n=b,e._s=m,e._l=Ze,e._t=Ye,e._q=M,e._i=N,e._m=rt,e._f=Xe,e._k=tt,e._b=nt,e._v=ve,e._e=he,e._u=st,e._g=lt,e._d=ct,e._p=ut}function pt(e,t){if(!e||!e.length)return{};for(var n={},r=0,i=e.length;r<i;r++){var o=e[r],a=o.data;if(a&&a.attrs&&a.attrs.slot&&delete a.attrs.slot,o.context!==t&&o.fnContext!==t||!a||null==a.slot)(n.default||(n.default=[])).push(o);else{var l=a.slot,s=n[l]||(n[l]=[]);"template"===o.tag?s.push.apply(s,o.children||[]):s.push(o)}}for(var c in n)n[c].every(dt)&&delete n[c];return n}function dt(e){return e.isComment&&!e.asyncFactory||" "===e.text}function ht(e){return e.isComment&&e.asyncFactory}function vt(e,t,n,i){var o,a=Object.keys(n).length>0,l=t?!!t.$stable:!a,s=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(l&&i&&i!==r&&s===i.$key&&!a&&!i.$hasNormal)return i;for(var c in o={},t)t[c]&&"$"!==c[0]&&(o[c]=mt(e,n,c,t[c]))}else o={};for(var u in n)u in o||(o[u]=gt(n,u));return t&&Object.isExtensible(t)&&(t._normalized=o),W(o,"$stable",l),W(o,"$key",s),W(o,"$hasNormal",a),o}function mt(e,t,n,r){var o=function(){var t=fe;pe(e);var n=arguments.length?r.apply(null,arguments):r({}),o=(n=n&&"object"==typeof n&&!i(n)?[n]:Je(n))&&n[0];return pe(t),n&&(!o||1===n.length&&o.isComment&&!ht(o))?void 0:n};return r.proxy&&Object.defineProperty(t,n,{get:o,enumerable:!0,configurable:!0}),o}function gt(e,t){return function(){return e[t]}}function bt(e){return{get attrs(){if(!e._attrsProxy){var t=e._attrsProxy={};W(t,"_v_attr_proxy",!0),yt(t,e.$attrs,r,e,"$attrs")}return e._attrsProxy},get listeners(){e._listenersProxy||yt(e._listenersProxy={},e.$listeners,r,e,"$listeners");return e._listenersProxy},get slots(){return function(e){e._slotsProxy||wt(e._slotsProxy={},e.$scopedSlots);return e._slotsProxy}(e)},emit:I(e.$emit,e),expose:function(t){t&&Object.keys(t).forEach((function(n){return qe(e,t,n)}))}}}function yt(e,t,n,r,i){var o=!1;for(var a in t)a in e?t[a]!==n[a]&&(o=!0):(o=!0,_t(e,a,r,i));for(var a in e)a in t||(o=!0,delete e[a]);return o}function _t(e,t,n,r){Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){return n[r][t]}})}function wt(e,t){for(var n in t)e[n]=t[n];for(var n in e)n in t||delete e[n]}var xt=null;function St(e,t){return(e.__esModule||ue&&"Module"===e[Symbol.toStringTag])&&(e=e.default),u(e)?t.extend(e):e}function Ot(e){if(i(e))for(var t=0;t<e.length;t++){var n=e[t];if(a(n)&&(a(n.componentOptions)||ht(n)))return n}}function jt(e,t,n,r,f,p){return(i(n)||s(n))&&(f=r,r=n,n=void 0),l(p)&&(f=2),function(e,t,n,r,s){if(a(n)&&a(n.__ob__))return he();a(n)&&a(n.is)&&(t=n.is);if(!t)return he();0;i(r)&&c(r[0])&&((n=n||{}).scopedSlots={default:r[0]},r.length=0);2===s?r=Je(r):1===s&&(r=function(e){for(var t=0;t<e.length;t++)if(i(e[t]))return Array.prototype.concat.apply([],e);return e}(r));var f,p;if("string"==typeof t){var d=void 0;p=e.$vnode&&e.$vnode.ns||H.getTagNamespace(t),f=H.isReservedTag(t)?new de(H.parsePlatformTagName(t),n,r,void 0,void 0,e):n&&n.pre||!a(d=An(e.$options,"components",t))?new de(t,n,r,void 0,void 0,e):wn(d,n,e,r,t)}else f=wn(t,n,e,r);return i(f)?f:a(f)?(a(p)&&function e(t,n,r){t.ns=n,"foreignObject"===t.tag&&(n=void 0,r=!0);if(a(t.children))for(var i=0,s=t.children.length;i<s;i++){var c=t.children[i];a(c.tag)&&(o(c.ns)||l(r)&&"svg"!==c.tag)&&e(c,n,r)}}(f,p),a(n)&&function(e){u(e.style)&&Bt(e.style);u(e.class)&&Bt(e.class)}(n),f):he()}(e,t,n,r,f)}function kt(e,t,n){we();try{if(t)for(var r=t;r=r.$parent;){var i=r.$options.errorCaptured;if(i)for(var o=0;o<i.length;o++)try{if(!1===i[o].call(r,e,t,n))return}catch(e){Et(e,r,"errorCaptured hook")}}Et(e,t,n)}finally{xe()}}function Pt(e,t,n,r,i){var o;try{(o=n?e.apply(t,n):e.call(t))&&!o._isVue&&v(o)&&!o._handled&&(o.catch((function(e){return kt(e,r,i+" (Promise/async)")})),o._handled=!0)}catch(e){kt(e,r,i)}return o}function Et(e,t,n){if(H.errorHandler)try{return H.errorHandler.call(null,e,t,n)}catch(t){t!==e&&Ct(t,null,"config.errorHandler")}Ct(e,t,n)}function Ct(e,t,n){if(!J||"undefined"==typeof console)throw e;console.error(e)}var It,At=!1,Tt=[],Lt=!1;function Dt(){Lt=!1;var e=Tt.slice(0);Tt.length=0;for(var t=0;t<e.length;t++)e[t]()}if("undefined"!=typeof Promise&&se(Promise)){var $t=Promise.resolve();It=function(){$t.then(Dt),ee&&setTimeout(D)},At=!0}else if(Z||"undefined"==typeof MutationObserver||!se(MutationObserver)&&"[object MutationObserverConstructor]"!==MutationObserver.toString())It="undefined"!=typeof setImmediate&&se(setImmediate)?function(){setImmediate(Dt)}:function(){setTimeout(Dt,0)};else{var Rt=1,Mt=new MutationObserver(Dt),Nt=document.createTextNode(String(Rt));Mt.observe(Nt,{characterData:!0}),It=function(){Rt=(Rt+1)%2,Nt.data=String(Rt)},At=!0}function Ut(e,t){var n;if(Tt.push((function(){if(e)try{e.call(t)}catch(e){kt(e,t,"nextTick")}else n&&n(t)})),Lt||(Lt=!0,It()),!e&&"undefined"!=typeof Promise)return new Promise((function(e){n=e}))}function qt(e){return function(t,n){if(void 0===n&&(n=fe),n)return function(e,t,n){var r=e.$options;r[t]=Pn(r[t],n)}(n,e,t)}}qt("beforeMount"),qt("mounted"),qt("beforeUpdate"),qt("updated"),qt("beforeDestroy"),qt("destroyed"),qt("activated"),qt("deactivated"),qt("serverPrefetch"),qt("renderTracked"),qt("renderTriggered"),qt("errorCaptured");var Ft=new ce;function Bt(e){return function e(t,n){var r,o,a=i(t);if(!a&&!u(t)||t.__v_skip||Object.isFrozen(t)||t instanceof de)return;if(t.__ob__){var l=t.__ob__.dep.id;if(n.has(l))return;n.add(l)}if(a)for(r=t.length;r--;)e(t[r],n);else if(Ue(t))e(t.value,n);else for(o=Object.keys(t),r=o.length;r--;)e(t[o[r]],n)}(e,Ft),Ft.clear(),e}var Ht,zt=0,Vt=function(){function e(e,t,n,r,i){var o,a;o=this,void 0===(a=Fe&&!Fe._vm?Fe:e?e._scope:void 0)&&(a=Fe),a&&a.active&&a.effects.push(o),(this.vm=e)&&i&&(e._watcher=this),r?(this.deep=!!r.deep,this.user=!!r.user,this.lazy=!!r.lazy,this.sync=!!r.sync,this.before=r.before):this.deep=this.user=this.lazy=this.sync=!1,this.cb=n,this.id=++zt,this.active=!0,this.post=!1,this.dirty=this.lazy,this.deps=[],this.newDeps=[],this.depIds=new ce,this.newDepIds=new ce,this.expression="",c(t)?this.getter=t:(this.getter=function(e){if(!K.test(e)){var t=e.split(".");return function(e){for(var n=0;n<t.length;n++){if(!e)return;e=e[t[n]]}return e}}}(t),this.getter||(this.getter=D)),this.value=this.lazy?void 0:this.get()}return e.prototype.get=function(){var e;we(this);var t=this.vm;try{e=this.getter.call(t,t)}catch(e){if(!this.user)throw e;kt(e,t,'getter for watcher "'.concat(this.expression,'"'))}finally{this.deep&&Bt(e),xe(),this.cleanupDeps()}return e},e.prototype.addDep=function(e){var t=e.id;this.newDepIds.has(t)||(this.newDepIds.add(t),this.newDeps.push(e),this.depIds.has(t)||e.addSub(this))},e.prototype.cleanupDeps=function(){for(var e=this.deps.length;e--;){var t=this.deps[e];this.newDepIds.has(t.id)||t.removeSub(this)}var n=this.depIds;this.depIds=this.newDepIds,this.newDepIds=n,this.newDepIds.clear(),n=this.deps,this.deps=this.newDeps,this.newDeps=n,this.newDeps.length=0},e.prototype.update=function(){this.lazy?this.dirty=!0:this.sync?this.run():dn(this)},e.prototype.run=function(){if(this.active){var e=this.get();if(e!==this.value||u(e)||this.deep){var t=this.value;if(this.value=e,this.user){var n='callback for watcher "'.concat(this.expression,'"');Pt(this.cb,this.vm,[e,t],this.vm,n)}else this.cb.call(this.vm,e,t)}}},e.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},e.prototype.depend=function(){for(var e=this.deps.length;e--;)this.deps[e].depend()},e.prototype.teardown=function(){if(this.vm&&!this.vm._isBeingDestroyed&&w(this.vm._scope.effects,this),this.active){for(var e=this.deps.length;e--;)this.deps[e].removeSub(this);this.active=!1,this.onStop&&this.onStop()}},e}();function Wt(e,t){Ht.$on(e,t)}function Kt(e,t){Ht.$off(e,t)}function Gt(e,t){var n=Ht;return function r(){var i=t.apply(null,arguments);null!==i&&n.$off(e,r)}}function Jt(e,t,n){Ht=e,We(t,n||{},Wt,Kt,Gt,e),Ht=void 0}var Qt=null;function Zt(e){var t=Qt;return Qt=e,function(){Qt=t}}function Yt(e){for(;e&&(e=e.$parent);)if(e._inactive)return!0;return!1}function Xt(e,t){if(t){if(e._directInactive=!1,Yt(e))return}else if(e._directInactive)return;if(e._inactive||null===e._inactive){e._inactive=!1;for(var n=0;n<e.$children.length;n++)Xt(e.$children[n]);en(e,"activated")}}function en(e,t,n,r){void 0===r&&(r=!0),we();var i=fe,o=Fe;r&&pe(e);var a=e.$options[t],l="".concat(t," hook");if(a)for(var s=0,c=a.length;s<c;s++)Pt(a[s],e,n||null,e,l);e._hasHookEvent&&e.$emit("hook:"+t),r&&(pe(i),o&&o.on()),xe()}var tn=[],nn=[],rn={},on=!1,an=!1,ln=0;var sn=0,cn=Date.now;if(J&&!Z){var un=window.performance;un&&"function"==typeof un.now&&cn()>document.createEvent("Event").timeStamp&&(cn=function(){return un.now()})}var fn=function(e,t){if(e.post){if(!t.post)return 1}else if(t.post)return-1;return e.id-t.id};function pn(){var e,t;for(sn=cn(),an=!0,tn.sort(fn),ln=0;ln<tn.length;ln++)(e=tn[ln]).before&&e.before(),t=e.id,rn[t]=null,e.run();var n=nn.slice(),r=tn.slice();ln=tn.length=nn.length=0,rn={},on=an=!1,function(e){for(var t=0;t<e.length;t++)e[t]._inactive=!0,Xt(e[t],!0)}(n),function(e){var t=e.length;for(;t--;){var n=e[t],r=n.vm;r&&r._watcher===n&&r._isMounted&&!r._isDestroyed&&en(r,"updated")}}(r),function(){for(var e=0;e<be.length;e++){var t=be[e];t.subs=t.subs.filter((function(e){return e})),t._pending=!1}be.length=0}(),le&&H.devtools&&le.emit("flush")}function dn(e){var t=e.id;if(null==rn[t]&&(e!==ye.target||!e.noRecurse)){if(rn[t]=!0,an){for(var n=tn.length-1;n>ln&&tn[n].id>e.id;)n--;tn.splice(n+1,0,e)}else tn.push(e);on||(on=!0,Ut(pn))}}function hn(e,t){if(e){for(var n=Object.create(null),r=ue?Reflect.ownKeys(e):Object.keys(e),i=0;i<r.length;i++){var o=r[i];if("__ob__"!==o){var a=e[o].from;if(a in t._provided)n[o]=t._provided[a];else if("default"in e[o]){var l=e[o].default;n[o]=c(l)?l.call(t):l}else 0}}return n}}function vn(e,t,n,o,a){var s,c=this,u=a.options;S(o,"_uid")?(s=Object.create(o))._original=o:(s=o,o=o._original);var f=l(u._compiled),p=!f;this.data=e,this.props=t,this.children=n,this.parent=o,this.listeners=e.on||r,this.injections=hn(u.inject,o),this.slots=function(){return c.$slots||vt(o,e.scopedSlots,c.$slots=pt(n,o)),c.$slots},Object.defineProperty(this,"scopedSlots",{enumerable:!0,get:function(){return vt(o,e.scopedSlots,this.slots())}}),f&&(this.$options=u,this.$slots=this.slots(),this.$scopedSlots=vt(o,e.scopedSlots,this.$slots)),u._scopeId?this._c=function(e,t,n,r){var a=jt(s,e,t,n,r,p);return a&&!i(a)&&(a.fnScopeId=u._scopeId,a.fnContext=o),a}:this._c=function(e,t,n,r){return jt(s,e,t,n,r,p)}}function mn(e,t,n,r,i){var o=me(e);return o.fnContext=n,o.fnOptions=r,t.slot&&((o.data||(o.data={})).slot=t.slot),o}function gn(e,t){for(var n in t)e[k(n)]=t[n]}function bn(e){return e.name||e.__name||e._componentTag}ft(vn.prototype);var yn={init:function(e,t){if(e.componentInstance&&!e.componentInstance._isDestroyed&&e.data.keepAlive){var n=e;yn.prepatch(n,n)}else{(e.componentInstance=function(e,t){var n={_isComponent:!0,_parentVnode:e,parent:t},r=e.data.inlineTemplate;a(r)&&(n.render=r.render,n.staticRenderFns=r.staticRenderFns);return new e.componentOptions.Ctor(n)}(e,Qt)).$mount(t?e.elm:void 0,t)}},prepatch:function(e,t){var n=t.componentOptions;!function(e,t,n,i,o){var a=i.data.scopedSlots,l=e.$scopedSlots,s=!!(a&&!a.$stable||l!==r&&!l.$stable||a&&e.$scopedSlots.$key!==a.$key||!a&&e.$scopedSlots.$key),c=!!(o||e.$options._renderChildren||s),u=e.$vnode;e.$options._parentVnode=i,e.$vnode=i,e._vnode&&(e._vnode.parent=i),e.$options._renderChildren=o;var f=i.data.attrs||r;e._attrsProxy&&yt(e._attrsProxy,f,u.data&&u.data.attrs||r,e,"$attrs")&&(c=!0),e.$attrs=f,n=n||r;var p=e.$options._parentListeners;if(e._listenersProxy&&yt(e._listenersProxy,n,p||r,e,"$listeners"),e.$listeners=e.$options._parentListeners=n,Jt(e,n,p),t&&e.$options.props){Ee(!1);for(var d=e._props,h=e.$options._propKeys||[],v=0;v<h.length;v++){var m=h[v],g=e.$options.props;d[m]=Tn(m,g,t,e)}Ee(!0),e.$options.propsData=t}c&&(e.$slots=pt(o,i.context),e.$forceUpdate())}(t.componentInstance=e.componentInstance,n.propsData,n.listeners,t,n.children)},insert:function(e){var t,n=e.context,r=e.componentInstance;r._isMounted||(r._isMounted=!0,en(r,"mounted")),e.data.keepAlive&&(n._isMounted?((t=r)._inactive=!1,nn.push(t)):Xt(r,!0))},destroy:function(e){var t=e.componentInstance;t._isDestroyed||(e.data.keepAlive?function e(t,n){if(!(n&&(t._directInactive=!0,Yt(t))||t._inactive)){t._inactive=!0;for(var r=0;r<t.$children.length;r++)e(t.$children[r]);en(t,"deactivated")}}(t,!0):t.$destroy())}},_n=Object.keys(yn);function wn(e,t,n,s,c){if(!o(e)){var f=n.$options._base;if(u(e)&&(e=f.extend(e)),"function"==typeof e){var p;if(o(e.cid)&&void 0===(e=function(e,t){if(l(e.error)&&a(e.errorComp))return e.errorComp;if(a(e.resolved))return e.resolved;var n=xt;if(n&&a(e.owners)&&-1===e.owners.indexOf(n)&&e.owners.push(n),l(e.loading)&&a(e.loadingComp))return e.loadingComp;if(n&&!a(e.owners)){var r=e.owners=[n],i=!0,s=null,c=null;n.$on("hook:destroyed",(function(){return w(r,n)}));var f=function(e){for(var t=0,n=r.length;t<n;t++)r[t].$forceUpdate();e&&(r.length=0,null!==s&&(clearTimeout(s),s=null),null!==c&&(clearTimeout(c),c=null))},p=U((function(n){e.resolved=St(n,t),i?r.length=0:f(!0)})),d=U((function(t){a(e.errorComp)&&(e.error=!0,f(!0))})),h=e(p,d);return u(h)&&(v(h)?o(e.resolved)&&h.then(p,d):v(h.component)&&(h.component.then(p,d),a(h.error)&&(e.errorComp=St(h.error,t)),a(h.loading)&&(e.loadingComp=St(h.loading,t),0===h.delay?e.loading=!0:s=setTimeout((function(){s=null,o(e.resolved)&&o(e.error)&&(e.loading=!0,f(!1))}),h.delay||200)),a(h.timeout)&&(c=setTimeout((function(){c=null,o(e.resolved)&&d(null)}),h.timeout)))),i=!1,e.loading?e.loadingComp:e.resolved}}(p=e,f)))return function(e,t,n,r,i){var o=he();return o.asyncFactory=e,o.asyncMeta={data:t,context:n,children:r,tag:i},o}(p,t,n,s,c);t=t||{},Wn(e),a(t.model)&&function(e,t){var n=e.model&&e.model.prop||"value",r=e.model&&e.model.event||"input";(t.attrs||(t.attrs={}))[n]=t.model.value;var o=t.on||(t.on={}),l=o[r],s=t.model.callback;a(l)?(i(l)?-1===l.indexOf(s):l!==s)&&(o[r]=[s].concat(l)):o[r]=s}(e.options,t);var d=function(e,t,n){var r=t.options.props;if(!o(r)){var i={},l=e.attrs,s=e.props;if(a(l)||a(s))for(var c in r){var u=C(c);Ge(i,s,c,u,!0)||Ge(i,l,c,u,!1)}return i}}(t,e);if(l(e.options.functional))return function(e,t,n,o,l){var s=e.options,c={},u=s.props;if(a(u))for(var f in u)c[f]=Tn(f,u,t||r);else a(n.attrs)&&gn(c,n.attrs),a(n.props)&&gn(c,n.props);var p=new vn(n,c,l,o,e),d=s.render.call(null,p._c,p);if(d instanceof de)return mn(d,n,p.parent,s,p);if(i(d)){for(var h=Je(d)||[],v=new Array(h.length),m=0;m<h.length;m++)v[m]=mn(h[m],n,p.parent,s,p);return v}}(e,d,t,n,s);var h=t.on;if(t.on=t.nativeOn,l(e.options.abstract)){var m=t.slot;t={},m&&(t.slot=m)}!function(e){for(var t=e.hook||(e.hook={}),n=0;n<_n.length;n++){var r=_n[n],i=t[r],o=yn[r];i===o||i&&i._merged||(t[r]=i?xn(o,i):o)}}(t);var g=bn(e.options)||c;return new de("vue-component-".concat(e.cid).concat(g?"-".concat(g):""),t,void 0,void 0,void 0,n,{Ctor:e,propsData:d,listeners:h,tag:c,children:s},p)}}}function xn(e,t){var n=function(n,r){e(n,r),t(n,r)};return n._merged=!0,n}var Sn=D,On=H.optionMergeStrategies;function jn(e,t,n){if(void 0===n&&(n=!0),!t)return e;for(var r,i,o,a=ue?Reflect.ownKeys(t):Object.keys(t),l=0;l<a.length;l++)"__ob__"!==(r=a[l])&&(i=e[r],o=t[r],n&&S(e,r)?i!==o&&p(i)&&p(o)&&jn(i,o):Le(e,r,o));return e}function kn(e,t,n){return n?function(){var r=c(t)?t.call(n,n):t,i=c(e)?e.call(n,n):e;return r?jn(r,i):i}:t?e?function(){return jn(c(t)?t.call(this,this):t,c(e)?e.call(this,this):e)}:t:e}function Pn(e,t){var n=t?e?e.concat(t):i(t)?t:[t]:e;return n?function(e){for(var t=[],n=0;n<e.length;n++)-1===t.indexOf(e[n])&&t.push(e[n]);return t}(n):n}function En(e,t,n,r){var i=Object.create(e||null);return t?T(i,t):i}On.data=function(e,t,n){return n?kn(e,t,n):t&&"function"!=typeof t?e:kn(e,t)},B.forEach((function(e){On[e]=Pn})),F.forEach((function(e){On[e+"s"]=En})),On.watch=function(e,t,n,r){if(e===re&&(e=void 0),t===re&&(t=void 0),!t)return Object.create(e||null);if(!e)return t;var o={};for(var a in T(o,e),t){var l=o[a],s=t[a];l&&!i(l)&&(l=[l]),o[a]=l?l.concat(s):i(s)?s:[s]}return o},On.props=On.methods=On.inject=On.computed=function(e,t,n,r){if(!e)return t;var i=Object.create(null);return T(i,e),t&&T(i,t),i},On.provide=function(e,t){return e?function(){var n=Object.create(null);return jn(n,c(e)?e.call(this):e),t&&jn(n,c(t)?t.call(this):t,!1),n}:t};var Cn=function(e,t){return void 0===t?e:t};function In(e,t,n){if(c(t)&&(t=t.options),function(e,t){var n=e.props;if(n){var r,o,a={};if(i(n))for(r=n.length;r--;)"string"==typeof(o=n[r])&&(a[k(o)]={type:null});else if(p(n))for(var l in n)o=n[l],a[k(l)]=p(o)?o:{type:o};else 0;e.props=a}}(t),function(e,t){var n=e.inject;if(n){var r=e.inject={};if(i(n))for(var o=0;o<n.length;o++)r[n[o]]={from:n[o]};else if(p(n))for(var a in n){var l=n[a];r[a]=p(l)?T({from:a},l):{from:l}}else 0}}(t),function(e){var t=e.directives;if(t)for(var n in t){var r=t[n];c(r)&&(t[n]={bind:r,update:r})}}(t),!t._base&&(t.extends&&(e=In(e,t.extends,n)),t.mixins))for(var r=0,o=t.mixins.length;r<o;r++)e=In(e,t.mixins[r],n);var a,l={};for(a in e)s(a);for(a in t)S(e,a)||s(a);function s(r){var i=On[r]||Cn;l[r]=i(e[r],t[r],n,r)}return l}function An(e,t,n,r){if("string"==typeof n){var i=e[t];if(S(i,n))return i[n];var o=k(n);if(S(i,o))return i[o];var a=P(o);return S(i,a)?i[a]:i[n]||i[o]||i[a]}}function Tn(e,t,n,r){var i=t[e],o=!S(n,e),a=n[e],l=Rn(Boolean,i.type);if(l>-1)if(o&&!S(i,"default"))a=!1;else if(""===a||a===C(e)){var s=Rn(String,i.type);(s<0||l<s)&&(a=!0)}if(void 0===a){a=function(e,t,n){if(!S(t,"default"))return;var r=t.default;0;if(e&&e.$options.propsData&&void 0===e.$options.propsData[n]&&void 0!==e._props[n])return e._props[n];return c(r)&&"Function"!==Dn(t.type)?r.call(e):r}(r,i,e);var u=Pe;Ee(!0),Ae(a),Ee(u)}return a}var Ln=/^\s*function (\w+)/;function Dn(e){var t=e&&e.toString().match(Ln);return t?t[1]:""}function $n(e,t){return Dn(e)===Dn(t)}function Rn(e,t){if(!i(t))return $n(t,e)?0:-1;for(var n=0,r=t.length;n<r;n++)if($n(t[n],e))return n;return-1}var Mn={enumerable:!0,configurable:!0,get:D,set:D};function Nn(e,t,n){Mn.get=function(){return this[t][n]},Mn.set=function(e){this[t][n]=e},Object.defineProperty(e,n,Mn)}function Un(e){var t=e.$options;if(t.props&&function(e,t){var n=e.$options.propsData||{},r=e._props=Re({}),i=e.$options._propKeys=[];e.$parent&&Ee(!1);var o=function(o){i.push(o);var a=Tn(o,t,n,e);Te(r,o,a,void 0,!0),o in e||Nn(e,"_props",o)};for(var a in t)o(a);Ee(!0)}(e,t.props),function(e){var t=e.$options,n=t.setup;if(n){var r=e._setupContext=bt(e);pe(e),we();var i=Pt(n,null,[e._props||Re({}),r],e,"setup");if(xe(),pe(),c(i))t.render=i;else if(u(i))if(e._setupState=i,i.__sfc){var o=e._setupProxy={};for(var a in i)"__sfc"!==a&&qe(o,i,a)}else for(var a in i)V(a)||qe(e,i,a);else 0}}(e),t.methods&&function(e,t){e.$options.props;for(var n in t)e[n]="function"!=typeof t[n]?D:I(t[n],e)}(e,t.methods),t.data)!function(e){var t=e.$options.data;p(t=e._data=c(t)?function(e,t){we();try{return e.call(t,t)}catch(e){return kt(e,t,"data()"),{}}finally{xe()}}(t,e):t||{})||(t={});var n=Object.keys(t),r=e.$options.props,i=(e.$options.methods,n.length);for(;i--;){var o=n[i];0,r&&S(r,o)||V(o)||Nn(e,"_data",o)}var a=Ae(t);a&&a.vmCount++}(e);else{var n=Ae(e._data={});n&&n.vmCount++}t.computed&&function(e,t){var n=e._computedWatchers=Object.create(null),r=ae();for(var i in t){var o=t[i],a=c(o)?o:o.get;0,r||(n[i]=new Vt(e,a||D,D,qn)),i in e||Fn(e,i,o)}}(e,t.computed),t.watch&&t.watch!==re&&function(e,t){for(var n in t){var r=t[n];if(i(r))for(var o=0;o<r.length;o++)zn(e,n,r[o]);else zn(e,n,r)}}(e,t.watch)}var qn={lazy:!0};function Fn(e,t,n){var r=!ae();c(n)?(Mn.get=r?Bn(t):Hn(n),Mn.set=D):(Mn.get=n.get?r&&!1!==n.cache?Bn(t):Hn(n.get):D,Mn.set=n.set||D),Object.defineProperty(e,t,Mn)}function Bn(e){return function(){var t=this._computedWatchers&&this._computedWatchers[e];if(t)return t.dirty&&t.evaluate(),ye.target&&t.depend(),t.value}}function Hn(e){return function(){return e.call(this,this)}}function zn(e,t,n,r){return p(n)&&(r=n,n=n.handler),"string"==typeof n&&(n=e[n]),e.$watch(t,n,r)}var Vn=0;function Wn(e){var t=e.options;if(e.super){var n=Wn(e.super);if(n!==e.superOptions){e.superOptions=n;var r=function(e){var t,n=e.options,r=e.sealedOptions;for(var i in n)n[i]!==r[i]&&(t||(t={}),t[i]=n[i]);return t}(e);r&&T(e.extendOptions,r),(t=e.options=In(n,e.extendOptions)).name&&(t.components[t.name]=e)}}return t}function Kn(e){this._init(e)}function Gn(e){e.cid=0;var t=1;e.extend=function(e){e=e||{};var n=this,r=n.cid,i=e._Ctor||(e._Ctor={});if(i[r])return i[r];var o=bn(e)||bn(n.options);var a=function(e){this._init(e)};return(a.prototype=Object.create(n.prototype)).constructor=a,a.cid=t++,a.options=In(n.options,e),a.super=n,a.options.props&&function(e){var t=e.options.props;for(var n in t)Nn(e.prototype,"_props",n)}(a),a.options.computed&&function(e){var t=e.options.computed;for(var n in t)Fn(e.prototype,n,t[n])}(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,F.forEach((function(e){a[e]=n[e]})),o&&(a.options.components[o]=a),a.superOptions=n.options,a.extendOptions=e,a.sealedOptions=T({},a.options),i[r]=a,a}}function Jn(e){return e&&(bn(e.Ctor.options)||e.tag)}function Qn(e,t){return i(e)?e.indexOf(t)>-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!d(e)&&e.test(t)}function Zn(e,t){var n=e.cache,r=e.keys,i=e._vnode,o=e.$vnode;for(var a in n){var l=n[a];if(l){var s=l.name;s&&!t(s)&&Yn(n,a,r,i)}}o.componentOptions.children=void 0}function Yn(e,t,n,r){var i=e[t];!i||r&&i.tag===r.tag||i.componentInstance.$destroy(),e[t]=null,w(n,t)}!function(e){e.prototype._init=function(e){var t=this;t._uid=Vn++,t._isVue=!0,t.__v_skip=!0,t._scope=new Be(!0),t._scope.parent=void 0,t._scope._vm=!0,e&&e._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),r=t._parentVnode;n.parent=t.parent,n._parentVnode=r;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(t,e):t.$options=In(Wn(t.constructor),e||{},t),t._renderProxy=t,t._self=t,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._provided=n?n._provided:Object.create(null),e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(t),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&Jt(e,t)}(t),function(e){e._vnode=null,e._staticTrees=null;var t=e.$options,n=e.$vnode=t._parentVnode,i=n&&n.context;e.$slots=pt(t._renderChildren,i),e.$scopedSlots=n?vt(e.$parent,n.data.scopedSlots,e.$slots):r,e._c=function(t,n,r,i){return jt(e,t,n,r,i,!1)},e.$createElement=function(t,n,r,i){return jt(e,t,n,r,i,!0)};var o=n&&n.data;Te(e,"$attrs",o&&o.attrs||r,null,!0),Te(e,"$listeners",t._parentListeners||r,null,!0)}(t),en(t,"beforeCreate",void 0,!1),function(e){var t=hn(e.$options.inject,e);t&&(Ee(!1),Object.keys(t).forEach((function(n){Te(e,n,t[n])})),Ee(!0))}(t),Un(t),function(e){var t=e.$options.provide;if(t){var n=c(t)?t.call(e):t;if(!u(n))return;for(var r=He(e),i=ue?Reflect.ownKeys(n):Object.keys(n),o=0;o<i.length;o++){var a=i[o];Object.defineProperty(r,a,Object.getOwnPropertyDescriptor(n,a))}}}(t),en(t,"created"),t.$options.el&&t.$mount(t.$options.el)}}(Kn),function(e){var t={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",n),e.prototype.$set=Le,e.prototype.$delete=De,e.prototype.$watch=function(e,t,n){if(p(t))return zn(this,e,t,n);(n=n||{}).user=!0;var r=new Vt(this,e,t,n);if(n.immediate){var i='callback for immediate watcher "'.concat(r.expression,'"');we(),Pt(t,this,[r.value],this,i),xe()}return function(){r.teardown()}}}(Kn),function(e){var t=/^hook:/;e.prototype.$on=function(e,n){var r=this;if(i(e))for(var o=0,a=e.length;o<a;o++)r.$on(e[o],n);else(r._events[e]||(r._events[e]=[])).push(n),t.test(e)&&(r._hasHookEvent=!0);return r},e.prototype.$once=function(e,t){var n=this;function r(){n.$off(e,r),t.apply(n,arguments)}return r.fn=t,n.$on(e,r),n},e.prototype.$off=function(e,t){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(i(e)){for(var r=0,o=e.length;r<o;r++)n.$off(e[r],t);return n}var a,l=n._events[e];if(!l)return n;if(!t)return n._events[e]=null,n;for(var s=l.length;s--;)if((a=l[s])===t||a.fn===t){l.splice(s,1);break}return n},e.prototype.$emit=function(e){var t=this,n=t._events[e];if(n){n=n.length>1?A(n):n;for(var r=A(arguments,1),i='event handler for "'.concat(e,'"'),o=0,a=n.length;o<a;o++)Pt(n[o],t,r,t,i)}return t}}(Kn),function(e){e.prototype._update=function(e,t){var n=this,r=n.$el,i=n._vnode,o=Zt(n);n._vnode=e,n.$el=i?n.__patch__(i,e):n.__patch__(n.$el,e,t,!1),o(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n);for(var a=n;a&&a.$vnode&&a.$parent&&a.$vnode===a.$parent._vnode;)a.$parent.$el=a.$el,a=a.$parent},e.prototype.$forceUpdate=function(){this._watcher&&this._watcher.update()},e.prototype.$destroy=function(){var e=this;if(!e._isBeingDestroyed){en(e,"beforeDestroy"),e._isBeingDestroyed=!0;var t=e.$parent;!t||t._isBeingDestroyed||e.$options.abstract||w(t.$children,e),e._scope.stop(),e._data.__ob__&&e._data.__ob__.vmCount--,e._isDestroyed=!0,e.__patch__(e._vnode,null),en(e,"destroyed"),e.$off(),e.$el&&(e.$el.__vue__=null),e.$vnode&&(e.$vnode.parent=null)}}}(Kn),function(e){ft(e.prototype),e.prototype.$nextTick=function(e){return Ut(e,this)},e.prototype._render=function(){var e=this,t=e.$options,n=t.render,r=t._parentVnode;r&&e._isMounted&&(e.$scopedSlots=vt(e.$parent,r.data.scopedSlots,e.$slots,e.$scopedSlots),e._slotsProxy&&wt(e._slotsProxy,e.$scopedSlots)),e.$vnode=r;var o,a=fe,l=xt;try{pe(e),xt=e,o=n.call(e._renderProxy,e.$createElement)}catch(t){kt(t,e,"render"),o=e._vnode}finally{xt=l,pe(a)}return i(o)&&1===o.length&&(o=o[0]),o instanceof de||(o=he()),o.parent=r,o}}(Kn);var Xn=[String,RegExp,Array],er={KeepAlive:{name:"keep-alive",abstract:!0,props:{include:Xn,exclude:Xn,max:[String,Number]},methods:{cacheVNode:function(){var e=this.cache,t=this.keys,n=this.vnodeToCache,r=this.keyToCache;if(n){var i=n.tag,o=n.componentInstance,a=n.componentOptions;e[r]={name:Jn(a),tag:i,componentInstance:o},t.push(r),this.max&&t.length>parseInt(this.max)&&Yn(e,t[0],t,this._vnode),this.vnodeToCache=null}}},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var e in this.cache)Yn(this.cache,e,this.keys)},mounted:function(){var e=this;this.cacheVNode(),this.$watch("include",(function(t){Zn(e,(function(e){return Qn(t,e)}))})),this.$watch("exclude",(function(t){Zn(e,(function(e){return!Qn(t,e)}))}))},updated:function(){this.cacheVNode()},render:function(){var e=this.$slots.default,t=Ot(e),n=t&&t.componentOptions;if(n){var r=Jn(n),i=this.include,o=this.exclude;if(i&&(!r||!Qn(i,r))||o&&r&&Qn(o,r))return t;var a=this.cache,l=this.keys,s=null==t.key?n.Ctor.cid+(n.tag?"::".concat(n.tag):""):t.key;a[s]?(t.componentInstance=a[s].componentInstance,w(l,s),l.push(s)):(this.vnodeToCache=t,this.keyToCache=s),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return H}};Object.defineProperty(e,"config",t),e.util={warn:Sn,extend:T,mergeOptions:In,defineReactive:Te},e.set=Le,e.delete=De,e.nextTick=Ut,e.observable=function(e){return Ae(e),e},e.options=Object.create(null),F.forEach((function(t){e.options[t+"s"]=Object.create(null)})),e.options._base=e,T(e.options.components,er),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=A(arguments,1);return n.unshift(this),c(e.install)?e.install.apply(e,n):c(e)&&e.apply(null,n),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=In(this.options,e),this}}(e),Gn(e),function(e){F.forEach((function(t){e[t]=function(e,n){return n?("component"===t&&p(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&c(n)&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}}))}(e)}(Kn),Object.defineProperty(Kn.prototype,"$isServer",{get:ae}),Object.defineProperty(Kn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(Kn,"FunctionalRenderContext",{value:vn}),Kn.version="2.7.16";var tr=y("style,class"),nr=y("input,textarea,option,select,progress"),rr=y("contenteditable,draggable,spellcheck"),ir=y("events,caret,typing,plaintext-only"),or=y("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,truespeed,typemustmatch,visible"),ar="http://www.w3.org/1999/xlink",lr=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},sr=function(e){return lr(e)?e.slice(6,e.length):""},cr=function(e){return null==e||!1===e};function ur(e){for(var t=e.data,n=e,r=e;a(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(t=fr(r.data,t));for(;a(n=n.parent);)n&&n.data&&(t=fr(t,n.data));return function(e,t){if(a(e)||a(t))return pr(e,dr(t));return""}(t.staticClass,t.class)}function fr(e,t){return{staticClass:pr(e.staticClass,t.staticClass),class:a(e.class)?[e.class,t.class]:t.class}}function pr(e,t){return e?t?e+" "+t:e:t||""}function dr(e){return Array.isArray(e)?function(e){for(var t,n="",r=0,i=e.length;r<i;r++)a(t=dr(e[r]))&&""!==t&&(n&&(n+=" "),n+=t);return n}(e):u(e)?function(e){var t="";for(var n in e)e[n]&&(t&&(t+=" "),t+=n);return t}(e):"string"==typeof e?e:""}var hr={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},vr=y("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template,blockquote,iframe,tfoot"),mr=y("svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,foreignobject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view",!0),gr=function(e){return vr(e)||mr(e)};var br=Object.create(null);var yr=y("text,number,password,search,email,tel,url");var _r=Object.freeze({__proto__:null,createElement:function(e,t){var n=document.createElement(e);return"select"!==e||t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n},createElementNS:function(e,t){return document.createElementNS(hr[e],t)},createTextNode:function(e){return document.createTextNode(e)},createComment:function(e){return document.createComment(e)},insertBefore:function(e,t,n){e.insertBefore(t,n)},removeChild:function(e,t){e.removeChild(t)},appendChild:function(e,t){e.appendChild(t)},parentNode:function(e){return e.parentNode},nextSibling:function(e){return e.nextSibling},tagName:function(e){return e.tagName},setTextContent:function(e,t){e.textContent=t},setStyleScope:function(e,t){e.setAttribute(t,"")}}),wr={create:function(e,t){xr(t)},update:function(e,t){e.data.ref!==t.data.ref&&(xr(e,!0),xr(t))},destroy:function(e){xr(e,!0)}};function xr(e,t){var n=e.data.ref;if(a(n)){var r=e.context,o=e.componentInstance||e.elm,l=t?null:o,s=t?void 0:o;if(c(n))Pt(n,r,[l],r,"template ref function");else{var u=e.data.refInFor,f="string"==typeof n||"number"==typeof n,p=Ue(n),d=r.$refs;if(f||p)if(u){var h=f?d[n]:n.value;t?i(h)&&w(h,o):i(h)?h.includes(o)||h.push(o):f?(d[n]=[o],Sr(r,n,d[n])):n.value=[o]}else if(f){if(t&&d[n]!==o)return;d[n]=s,Sr(r,n,l)}else if(p){if(t&&n.value!==o)return;n.value=l}else 0}}}function Sr(e,t,n){var r=e._setupState;r&&S(r,t)&&(Ue(r[t])?r[t].value=n:r[t]=n)}var Or=new de("",{},[]),jr=["create","activate","update","remove","destroy"];function kr(e,t){return e.key===t.key&&e.asyncFactory===t.asyncFactory&&(e.tag===t.tag&&e.isComment===t.isComment&&a(e.data)===a(t.data)&&function(e,t){if("input"!==e.tag)return!0;var n,r=a(n=e.data)&&a(n=n.attrs)&&n.type,i=a(n=t.data)&&a(n=n.attrs)&&n.type;return r===i||yr(r)&&yr(i)}(e,t)||l(e.isAsyncPlaceholder)&&o(t.asyncFactory.error))}function Pr(e,t,n){var r,i,o={};for(r=t;r<=n;++r)a(i=e[r].key)&&(o[i]=r);return o}var Er={create:Cr,update:Cr,destroy:function(e){Cr(e,Or)}};function Cr(e,t){(e.data.directives||t.data.directives)&&function(e,t){var n,r,i,o=e===Or,a=t===Or,l=Ar(e.data.directives,e.context),s=Ar(t.data.directives,t.context),c=[],u=[];for(n in s)r=l[n],i=s[n],r?(i.oldValue=r.value,i.oldArg=r.arg,Lr(i,"update",t,e),i.def&&i.def.componentUpdated&&u.push(i)):(Lr(i,"bind",t,e),i.def&&i.def.inserted&&c.push(i));if(c.length){var f=function(){for(var n=0;n<c.length;n++)Lr(c[n],"inserted",t,e)};o?Ke(t,"insert",f):f()}u.length&&Ke(t,"postpatch",(function(){for(var n=0;n<u.length;n++)Lr(u[n],"componentUpdated",t,e)}));if(!o)for(n in l)s[n]||Lr(l[n],"unbind",e,e,a)}(e,t)}var Ir=Object.create(null);function Ar(e,t){var n,r,i=Object.create(null);if(!e)return i;for(n=0;n<e.length;n++){if((r=e[n]).modifiers||(r.modifiers=Ir),i[Tr(r)]=r,t._setupState&&t._setupState.__sfc){var o=r.def||An(t,"_setupState","v-"+r.name);r.def="function"==typeof o?{bind:o,update:o}:o}r.def=r.def||An(t.$options,"directives",r.name)}return i}function Tr(e){return e.rawName||"".concat(e.name,".").concat(Object.keys(e.modifiers||{}).join("."))}function Lr(e,t,n,r,i){var o=e.def&&e.def[t];if(o)try{o(n.elm,e,n,r,i)}catch(r){kt(r,n.context,"directive ".concat(e.name," ").concat(t," hook"))}}var Dr=[wr,Er];function $r(e,t){var n=t.componentOptions;if(!(a(n)&&!1===n.Ctor.options.inheritAttrs||o(e.data.attrs)&&o(t.data.attrs))){var r,i,s=t.elm,c=e.data.attrs||{},u=t.data.attrs||{};for(r in(a(u.__ob__)||l(u._v_attr_proxy))&&(u=t.data.attrs=T({},u)),u)i=u[r],c[r]!==i&&Rr(s,r,i,t.data.pre);for(r in(Z||X)&&u.value!==c.value&&Rr(s,"value",u.value),c)o(u[r])&&(lr(r)?s.removeAttributeNS(ar,sr(r)):rr(r)||s.removeAttribute(r))}}function Rr(e,t,n,r){r||e.tagName.indexOf("-")>-1?Mr(e,t,n):or(t)?cr(n)?e.removeAttribute(t):(n="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,n)):rr(t)?e.setAttribute(t,function(e,t){return cr(t)||"false"===t?"false":"contenteditable"===e&&ir(t)?t:"true"}(t,n)):lr(t)?cr(n)?e.removeAttributeNS(ar,sr(t)):e.setAttributeNS(ar,t,n):Mr(e,t,n)}function Mr(e,t,n){if(cr(n))e.removeAttribute(t);else{if(Z&&!Y&&"TEXTAREA"===e.tagName&&"placeholder"===t&&""!==n&&!e.__ieph){var r=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",r)};e.addEventListener("input",r),e.__ieph=!0}e.setAttribute(t,n)}}var Nr={create:$r,update:$r};function Ur(e,t){var n=t.elm,r=t.data,i=e.data;if(!(o(r.staticClass)&&o(r.class)&&(o(i)||o(i.staticClass)&&o(i.class)))){var l=ur(t),s=n._transitionClasses;a(s)&&(l=pr(l,dr(s))),l!==n._prevClass&&(n.setAttribute("class",l),n._prevClass=l)}}var qr,Fr={create:Ur,update:Ur};function Br(e,t,n){var r=qr;return function i(){var o=t.apply(null,arguments);null!==o&&Vr(e,i,n,r)}}var Hr=At&&!(ne&&Number(ne[1])<=53);function zr(e,t,n,r){if(Hr){var i=sn,o=t;t=o._wrapper=function(e){if(e.target===e.currentTarget||e.timeStamp>=i||e.timeStamp<=0||e.target.ownerDocument!==document)return o.apply(this,arguments)}}qr.addEventListener(e,t,ie?{capture:n,passive:r}:n)}function Vr(e,t,n,r){(r||qr).removeEventListener(e,t._wrapper||t,n)}function Wr(e,t){if(!o(e.data.on)||!o(t.data.on)){var n=t.data.on||{},r=e.data.on||{};qr=t.elm||e.elm,function(e){if(a(e.__r)){var t=Z?"change":"input";e[t]=[].concat(e.__r,e[t]||[]),delete e.__r}a(e.__c)&&(e.change=[].concat(e.__c,e.change||[]),delete e.__c)}(n),We(n,r,zr,Vr,Br,t.context),qr=void 0}}var Kr,Gr={create:Wr,update:Wr,destroy:function(e){return Wr(e,Or)}};function Jr(e,t){if(!o(e.data.domProps)||!o(t.data.domProps)){var n,r,i=t.elm,s=e.data.domProps||{},c=t.data.domProps||{};for(n in(a(c.__ob__)||l(c._v_attr_proxy))&&(c=t.data.domProps=T({},c)),s)n in c||(i[n]="");for(n in c){if(r=c[n],"textContent"===n||"innerHTML"===n){if(t.children&&(t.children.length=0),r===s[n])continue;1===i.childNodes.length&&i.removeChild(i.childNodes[0])}if("value"===n&&"PROGRESS"!==i.tagName){i._value=r;var u=o(r)?"":String(r);Qr(i,u)&&(i.value=u)}else if("innerHTML"===n&&mr(i.tagName)&&o(i.innerHTML)){(Kr=Kr||document.createElement("div")).innerHTML="<svg>".concat(r,"</svg>");for(var f=Kr.firstChild;i.firstChild;)i.removeChild(i.firstChild);for(;f.firstChild;)i.appendChild(f.firstChild)}else if(r!==s[n])try{i[n]=r}catch(e){}}}}function Qr(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}(e,t)||function(e,t){var n=e.value,r=e._vModifiers;if(a(r)){if(r.number)return b(n)!==b(t);if(r.trim)return n.trim()!==t.trim()}return n!==t}(e,t))}var Zr={create:Jr,update:Jr},Yr=O((function(e){var t={},n=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach((function(e){if(e){var r=e.split(n);r.length>1&&(t[r[0].trim()]=r[1].trim())}})),t}));function Xr(e){var t=ei(e.style);return e.staticStyle?T(e.staticStyle,t):t}function ei(e){return Array.isArray(e)?L(e):"string"==typeof e?Yr(e):e}var ti,ni=/^--/,ri=/\s*!important$/,ii=function(e,t,n){if(ni.test(t))e.style.setProperty(t,n);else if(ri.test(n))e.style.setProperty(C(t),n.replace(ri,""),"important");else{var r=ai(t);if(Array.isArray(n))for(var i=0,o=n.length;i<o;i++)e.style[r]=n[i];else e.style[r]=n}},oi=["Webkit","Moz","ms"],ai=O((function(e){if(ti=ti||document.createElement("div").style,"filter"!==(e=k(e))&&e in ti)return e;for(var t=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<oi.length;n++){var r=oi[n]+t;if(r in ti)return r}}));function li(e,t){var n=t.data,r=e.data;if(!(o(n.staticStyle)&&o(n.style)&&o(r.staticStyle)&&o(r.style))){var i,l,s=t.elm,c=r.staticStyle,u=r.normalizedStyle||r.style||{},f=c||u,p=ei(t.data.style)||{};t.data.normalizedStyle=a(p.__ob__)?T({},p):p;var d=function(e,t){var n,r={};if(t)for(var i=e;i.componentInstance;)(i=i.componentInstance._vnode)&&i.data&&(n=Xr(i.data))&&T(r,n);(n=Xr(e.data))&&T(r,n);for(var o=e;o=o.parent;)o.data&&(n=Xr(o.data))&&T(r,n);return r}(t,!0);for(l in f)o(d[l])&&ii(s,l,"");for(l in d)i=d[l],ii(s,l,null==i?"":i)}}var si={create:li,update:li},ci=/\s+/;function ui(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(ci).forEach((function(t){return e.classList.add(t)})):e.classList.add(t);else{var n=" ".concat(e.getAttribute("class")||""," ");n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function fi(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(ci).forEach((function(t){return e.classList.remove(t)})):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" ".concat(e.getAttribute("class")||""," "),r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?e.setAttribute("class",n):e.removeAttribute("class")}}function pi(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&T(t,di(e.name||"v")),T(t,e),t}return"string"==typeof e?di(e):void 0}}var di=O((function(e){return{enterClass:"".concat(e,"-enter"),enterToClass:"".concat(e,"-enter-to"),enterActiveClass:"".concat(e,"-enter-active"),leaveClass:"".concat(e,"-leave"),leaveToClass:"".concat(e,"-leave-to"),leaveActiveClass:"".concat(e,"-leave-active")}})),hi=J&&!Y,vi="transition",mi="transitionend",gi="animation",bi="animationend";hi&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(vi="WebkitTransition",mi="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(gi="WebkitAnimation",bi="webkitAnimationEnd"));var yi=J?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(e){return e()};function _i(e){yi((function(){yi(e)}))}function wi(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),ui(e,t))}function xi(e,t){e._transitionClasses&&w(e._transitionClasses,t),fi(e,t)}function Si(e,t,n){var r=ji(e,t),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var l="transition"===i?mi:bi,s=0,c=function(){e.removeEventListener(l,u),n()},u=function(t){t.target===e&&++s>=a&&c()};setTimeout((function(){s<a&&c()}),o+1),e.addEventListener(l,u)}var Oi=/\b(transform|all)(,|$)/;function ji(e,t){var n,r=window.getComputedStyle(e),i=(r[vi+"Delay"]||"").split(", "),o=(r[vi+"Duration"]||"").split(", "),a=ki(i,o),l=(r[gi+"Delay"]||"").split(", "),s=(r[gi+"Duration"]||"").split(", "),c=ki(l,s),u=0,f=0;return"transition"===t?a>0&&(n="transition",u=a,f=o.length):"animation"===t?c>0&&(n="animation",u=c,f=s.length):f=(n=(u=Math.max(a,c))>0?a>c?"transition":"animation":null)?"transition"===n?o.length:s.length:0,{type:n,timeout:u,propCount:f,hasTransform:"transition"===n&&Oi.test(r[vi+"Property"])}}function ki(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max.apply(null,t.map((function(t,n){return Pi(t)+Pi(e[n])})))}function Pi(e){return 1e3*Number(e.slice(0,-1).replace(",","."))}function Ei(e,t){var n=e.elm;a(n._leaveCb)&&(n._leaveCb.cancelled=!0,n._leaveCb());var r=pi(e.data.transition);if(!o(r)&&!a(n._enterCb)&&1===n.nodeType){for(var i=r.css,l=r.type,s=r.enterClass,f=r.enterToClass,p=r.enterActiveClass,d=r.appearClass,h=r.appearToClass,v=r.appearActiveClass,m=r.beforeEnter,g=r.enter,y=r.afterEnter,_=r.enterCancelled,w=r.beforeAppear,x=r.appear,S=r.afterAppear,O=r.appearCancelled,j=r.duration,k=Qt,P=Qt.$vnode;P&&P.parent;)k=P.context,P=P.parent;var E=!k._isMounted||!e.isRootInsert;if(!E||x||""===x){var C=E&&d?d:s,I=E&&v?v:p,A=E&&h?h:f,T=E&&w||m,L=E&&c(x)?x:g,D=E&&S||y,$=E&&O||_,R=b(u(j)?j.enter:j);0;var M=!1!==i&&!Y,N=Ai(L),q=n._enterCb=U((function(){M&&(xi(n,A),xi(n,I)),q.cancelled?(M&&xi(n,C),$&&$(n)):D&&D(n),n._enterCb=null}));e.data.show||Ke(e,"insert",(function(){var t=n.parentNode,r=t&&t._pending&&t._pending[e.key];r&&r.tag===e.tag&&r.elm._leaveCb&&r.elm._leaveCb(),L&&L(n,q)})),T&&T(n),M&&(wi(n,C),wi(n,I),_i((function(){xi(n,C),q.cancelled||(wi(n,A),N||(Ii(R)?setTimeout(q,R):Si(n,l,q)))}))),e.data.show&&(t&&t(),L&&L(n,q)),M||N||q()}}}function Ci(e,t){var n=e.elm;a(n._enterCb)&&(n._enterCb.cancelled=!0,n._enterCb());var r=pi(e.data.transition);if(o(r)||1!==n.nodeType)return t();if(!a(n._leaveCb)){var i=r.css,l=r.type,s=r.leaveClass,c=r.leaveToClass,f=r.leaveActiveClass,p=r.beforeLeave,d=r.leave,h=r.afterLeave,v=r.leaveCancelled,m=r.delayLeave,g=r.duration,y=!1!==i&&!Y,_=Ai(d),w=b(u(g)?g.leave:g);0;var x=n._leaveCb=U((function(){n.parentNode&&n.parentNode._pending&&(n.parentNode._pending[e.key]=null),y&&(xi(n,c),xi(n,f)),x.cancelled?(y&&xi(n,s),v&&v(n)):(t(),h&&h(n)),n._leaveCb=null}));m?m(S):S()}function S(){x.cancelled||(!e.data.show&&n.parentNode&&((n.parentNode._pending||(n.parentNode._pending={}))[e.key]=e),p&&p(n),y&&(wi(n,s),wi(n,f),_i((function(){xi(n,s),x.cancelled||(wi(n,c),_||(Ii(w)?setTimeout(x,w):Si(n,l,x)))}))),d&&d(n,x),y||_||x())}}function Ii(e){return"number"==typeof e&&!isNaN(e)}function Ai(e){if(o(e))return!1;var t=e.fns;return a(t)?Ai(Array.isArray(t)?t[0]:t):(e._length||e.length)>1}function Ti(e,t){!0!==t.data.show&&Ei(t)}var Li=function(e){var t,n,r={},c=e.modules,u=e.nodeOps;for(t=0;t<jr.length;++t)for(r[jr[t]]=[],n=0;n<c.length;++n)a(c[n][jr[t]])&&r[jr[t]].push(c[n][jr[t]]);function f(e){var t=u.parentNode(e);a(t)&&u.removeChild(t,e)}function p(e,t,n,i,o,s,c){if(a(e.elm)&&a(s)&&(e=s[c]=me(e)),e.isRootInsert=!o,!function(e,t,n,i){var o=e.data;if(a(o)){var s=a(e.componentInstance)&&o.keepAlive;if(a(o=o.hook)&&a(o=o.init)&&o(e,!1),a(e.componentInstance))return d(e,t),h(n,e.elm,i),l(s)&&function(e,t,n,i){var o,l=e;for(;l.componentInstance;)if(l=l.componentInstance._vnode,a(o=l.data)&&a(o=o.transition)){for(o=0;o<r.activate.length;++o)r.activate[o](Or,l);t.push(l);break}h(n,e.elm,i)}(e,t,n,i),!0}}(e,t,n,i)){var f=e.data,p=e.children,m=e.tag;a(m)?(e.elm=e.ns?u.createElementNS(e.ns,m):u.createElement(m,e),b(e),v(e,p,t),a(f)&&g(e,t),h(n,e.elm,i)):l(e.isComment)?(e.elm=u.createComment(e.text),h(n,e.elm,i)):(e.elm=u.createTextNode(e.text),h(n,e.elm,i))}}function d(e,t){a(e.data.pendingInsert)&&(t.push.apply(t,e.data.pendingInsert),e.data.pendingInsert=null),e.elm=e.componentInstance.$el,m(e)?(g(e,t),b(e)):(xr(e),t.push(e))}function h(e,t,n){a(e)&&(a(n)?u.parentNode(n)===e&&u.insertBefore(e,t,n):u.appendChild(e,t))}function v(e,t,n){if(i(t)){0;for(var r=0;r<t.length;++r)p(t[r],n,e.elm,null,!0,t,r)}else s(e.text)&&u.appendChild(e.elm,u.createTextNode(String(e.text)))}function m(e){for(;e.componentInstance;)e=e.componentInstance._vnode;return a(e.tag)}function g(e,n){for(var i=0;i<r.create.length;++i)r.create[i](Or,e);a(t=e.data.hook)&&(a(t.create)&&t.create(Or,e),a(t.insert)&&n.push(e))}function b(e){var t;if(a(t=e.fnScopeId))u.setStyleScope(e.elm,t);else for(var n=e;n;)a(t=n.context)&&a(t=t.$options._scopeId)&&u.setStyleScope(e.elm,t),n=n.parent;a(t=Qt)&&t!==e.context&&t!==e.fnContext&&a(t=t.$options._scopeId)&&u.setStyleScope(e.elm,t)}function _(e,t,n,r,i,o){for(;r<=i;++r)p(n[r],o,e,t,!1,n,r)}function w(e){var t,n,i=e.data;if(a(i))for(a(t=i.hook)&&a(t=t.destroy)&&t(e),t=0;t<r.destroy.length;++t)r.destroy[t](e);if(a(t=e.children))for(n=0;n<e.children.length;++n)w(e.children[n])}function x(e,t,n){for(;t<=n;++t){var r=e[t];a(r)&&(a(r.tag)?(S(r),w(r)):f(r.elm))}}function S(e,t){if(a(t)||a(e.data)){var n,i=r.remove.length+1;for(a(t)?t.listeners+=i:t=function(e,t){function n(){0==--n.listeners&&f(e)}return n.listeners=t,n}(e.elm,i),a(n=e.componentInstance)&&a(n=n._vnode)&&a(n.data)&&S(n,t),n=0;n<r.remove.length;++n)r.remove[n](e,t);a(n=e.data.hook)&&a(n=n.remove)?n(e,t):t()}else f(e.elm)}function O(e,t,n,r){for(var i=n;i<r;i++){var o=t[i];if(a(o)&&kr(e,o))return i}}function j(e,t,n,i,s,c){if(e!==t){a(t.elm)&&a(i)&&(t=i[s]=me(t));var f=t.elm=e.elm;if(l(e.isAsyncPlaceholder))a(t.asyncFactory.resolved)?E(e.elm,t,n):t.isAsyncPlaceholder=!0;else if(l(t.isStatic)&&l(e.isStatic)&&t.key===e.key&&(l(t.isCloned)||l(t.isOnce)))t.componentInstance=e.componentInstance;else{var d,h=t.data;a(h)&&a(d=h.hook)&&a(d=d.prepatch)&&d(e,t);var v=e.children,g=t.children;if(a(h)&&m(t)){for(d=0;d<r.update.length;++d)r.update[d](e,t);a(d=h.hook)&&a(d=d.update)&&d(e,t)}o(t.text)?a(v)&&a(g)?v!==g&&function(e,t,n,r,i){var l,s,c,f=0,d=0,h=t.length-1,v=t[0],m=t[h],g=n.length-1,b=n[0],y=n[g],w=!i;for(0;f<=h&&d<=g;)o(v)?v=t[++f]:o(m)?m=t[--h]:kr(v,b)?(j(v,b,r,n,d),v=t[++f],b=n[++d]):kr(m,y)?(j(m,y,r,n,g),m=t[--h],y=n[--g]):kr(v,y)?(j(v,y,r,n,g),w&&u.insertBefore(e,v.elm,u.nextSibling(m.elm)),v=t[++f],y=n[--g]):kr(m,b)?(j(m,b,r,n,d),w&&u.insertBefore(e,m.elm,v.elm),m=t[--h],b=n[++d]):(o(l)&&(l=Pr(t,f,h)),o(s=a(b.key)?l[b.key]:O(b,t,f,h))?p(b,r,e,v.elm,!1,n,d):kr(c=t[s],b)?(j(c,b,r,n,d),t[s]=void 0,w&&u.insertBefore(e,c.elm,v.elm)):p(b,r,e,v.elm,!1,n,d),b=n[++d]);f>h?_(e,o(n[g+1])?null:n[g+1].elm,n,d,g,r):d>g&&x(t,f,h)}(f,v,g,n,c):a(g)?(a(e.text)&&u.setTextContent(f,""),_(f,null,g,0,g.length-1,n)):a(v)?x(v,0,v.length-1):a(e.text)&&u.setTextContent(f,""):e.text!==t.text&&u.setTextContent(f,t.text),a(h)&&a(d=h.hook)&&a(d=d.postpatch)&&d(e,t)}}}function k(e,t,n){if(l(n)&&a(e.parent))e.parent.data.pendingInsert=t;else for(var r=0;r<t.length;++r)t[r].data.hook.insert(t[r])}var P=y("attrs,class,staticClass,staticStyle,key");function E(e,t,n,r){var i,o=t.tag,s=t.data,c=t.children;if(r=r||s&&s.pre,t.elm=e,l(t.isComment)&&a(t.asyncFactory))return t.isAsyncPlaceholder=!0,!0;if(a(s)&&(a(i=s.hook)&&a(i=i.init)&&i(t,!0),a(i=t.componentInstance)))return d(t,n),!0;if(a(o)){if(a(c))if(e.hasChildNodes())if(a(i=s)&&a(i=i.domProps)&&a(i=i.innerHTML)){if(i!==e.innerHTML)return!1}else{for(var u=!0,f=e.firstChild,p=0;p<c.length;p++){if(!f||!E(f,c[p],n,r)){u=!1;break}f=f.nextSibling}if(!u||f)return!1}else v(t,c,n);if(a(s)){var h=!1;for(var m in s)if(!P(m)){h=!0,g(t,n);break}!h&&s.class&&Bt(s.class)}}else e.data!==t.text&&(e.data=t.text);return!0}return function(e,t,n,i){if(!o(t)){var s,c=!1,f=[];if(o(e))c=!0,p(t,f);else{var d=a(e.nodeType);if(!d&&kr(e,t))j(e,t,f,null,null,i);else{if(d){if(1===e.nodeType&&e.hasAttribute("data-server-rendered")&&(e.removeAttribute("data-server-rendered"),n=!0),l(n)&&E(e,t,f))return k(t,f,!0),e;s=e,e=new de(u.tagName(s).toLowerCase(),{},[],void 0,s)}var h=e.elm,v=u.parentNode(h);if(p(t,f,h._leaveCb?null:v,u.nextSibling(h)),a(t.parent))for(var g=t.parent,b=m(t);g;){for(var y=0;y<r.destroy.length;++y)r.destroy[y](g);if(g.elm=t.elm,b){for(var _=0;_<r.create.length;++_)r.create[_](Or,g);var S=g.data.hook.insert;if(S.merged)for(var O=S.fns.slice(1),P=0;P<O.length;P++)O[P]()}else xr(g);g=g.parent}a(v)?x([e],0,0):a(e.tag)&&w(e)}}return k(t,f,c),t.elm}a(e)&&w(e)}}({nodeOps:_r,modules:[Nr,Fr,Gr,Zr,si,J?{create:Ti,activate:Ti,remove:function(e,t){!0!==e.data.show?Ci(e,t):t()}}:{}].concat(Dr)});Y&&document.addEventListener("selectionchange",(function(){var e=document.activeElement;e&&e.vmodel&&Fi(e,"input")}));var Di={inserted:function(e,t,n,r){"select"===n.tag?(r.elm&&!r.elm._vOptions?Ke(n,"postpatch",(function(){Di.componentUpdated(e,t,n)})):$i(e,t,n.context),e._vOptions=[].map.call(e.options,Ni)):("textarea"===n.tag||yr(e.type))&&(e._vModifiers=t.modifiers,t.modifiers.lazy||(e.addEventListener("compositionstart",Ui),e.addEventListener("compositionend",qi),e.addEventListener("change",qi),Y&&(e.vmodel=!0)))},componentUpdated:function(e,t,n){if("select"===n.tag){$i(e,t,n.context);var r=e._vOptions,i=e._vOptions=[].map.call(e.options,Ni);if(i.some((function(e,t){return!M(e,r[t])})))(e.multiple?t.value.some((function(e){return Mi(e,i)})):t.value!==t.oldValue&&Mi(t.value,i))&&Fi(e,"change")}}};function $i(e,t,n){Ri(e,t,n),(Z||X)&&setTimeout((function(){Ri(e,t,n)}),0)}function Ri(e,t,n){var r=t.value,i=e.multiple;if(!i||Array.isArray(r)){for(var o,a,l=0,s=e.options.length;l<s;l++)if(a=e.options[l],i)o=N(r,Ni(a))>-1,a.selected!==o&&(a.selected=o);else if(M(Ni(a),r))return void(e.selectedIndex!==l&&(e.selectedIndex=l));i||(e.selectedIndex=-1)}}function Mi(e,t){return t.every((function(t){return!M(t,e)}))}function Ni(e){return"_value"in e?e._value:e.value}function Ui(e){e.target.composing=!0}function qi(e){e.target.composing&&(e.target.composing=!1,Fi(e.target,"input"))}function Fi(e,t){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function Bi(e){return!e.componentInstance||e.data&&e.data.transition?e:Bi(e.componentInstance._vnode)}var Hi={model:Di,show:{bind:function(e,t,n){var r=t.value,i=(n=Bi(n)).data&&n.data.transition,o=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;r&&i?(n.data.show=!0,Ei(n,(function(){e.style.display=o}))):e.style.display=r?o:"none"},update:function(e,t,n){var r=t.value;!r!=!t.oldValue&&((n=Bi(n)).data&&n.data.transition?(n.data.show=!0,r?Ei(n,(function(){e.style.display=e.__vOriginalDisplay})):Ci(n,(function(){e.style.display="none"}))):e.style.display=r?e.__vOriginalDisplay:"none")},unbind:function(e,t,n,r,i){i||(e.style.display=e.__vOriginalDisplay)}}},zi={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function Vi(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?Vi(Ot(t.children)):e}function Wi(e){var t={},n=e.$options;for(var r in n.propsData)t[r]=e[r];var i=n._parentListeners;for(var r in i)t[k(r)]=i[r];return t}function Ki(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var Gi=function(e){return e.tag||ht(e)},Ji=function(e){return"show"===e.name},Qi={name:"transition",props:zi,abstract:!0,render:function(e){var t=this,n=this.$slots.default;if(n&&(n=n.filter(Gi)).length){0;var r=this.mode;0;var i=n[0];if(function(e){for(;e=e.parent;)if(e.data.transition)return!0}(this.$vnode))return i;var o=Vi(i);if(!o)return i;if(this._leaving)return Ki(e,i);var a="__transition-".concat(this._uid,"-");o.key=null==o.key?o.isComment?a+"comment":a+o.tag:s(o.key)?0===String(o.key).indexOf(a)?o.key:a+o.key:o.key;var l=(o.data||(o.data={})).transition=Wi(this),c=this._vnode,u=Vi(c);if(o.data.directives&&o.data.directives.some(Ji)&&(o.data.show=!0),u&&u.data&&!function(e,t){return t.key===e.key&&t.tag===e.tag}(o,u)&&!ht(u)&&(!u.componentInstance||!u.componentInstance._vnode.isComment)){var f=u.data.transition=T({},l);if("out-in"===r)return this._leaving=!0,Ke(f,"afterLeave",(function(){t._leaving=!1,t.$forceUpdate()})),Ki(e,i);if("in-out"===r){if(ht(o))return c;var p,d=function(){p()};Ke(l,"afterEnter",d),Ke(l,"enterCancelled",d),Ke(f,"delayLeave",(function(e){p=e}))}}return i}}},Zi=T({tag:String,moveClass:String},zi);function Yi(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function Xi(e){e.data.newPos=e.elm.getBoundingClientRect()}function eo(e){var t=e.data.pos,n=e.data.newPos,r=t.left-n.left,i=t.top-n.top;if(r||i){e.data.moved=!0;var o=e.elm.style;o.transform=o.WebkitTransform="translate(".concat(r,"px,").concat(i,"px)"),o.transitionDuration="0s"}}delete Zi.mode;var to={Transition:Qi,TransitionGroup:{props:Zi,beforeMount:function(){var e=this,t=this._update;this._update=function(n,r){var i=Zt(e);e.__patch__(e._vnode,e.kept,!1,!0),e._vnode=e.kept,i(),t.call(e,n,r)}},render:function(e){for(var t=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,i=this.$slots.default||[],o=this.children=[],a=Wi(this),l=0;l<i.length;l++){if((u=i[l]).tag)if(null!=u.key&&0!==String(u.key).indexOf("__vlist"))o.push(u),n[u.key]=u,(u.data||(u.data={})).transition=a;else;}if(r){var s=[],c=[];for(l=0;l<r.length;l++){var u;(u=r[l]).data.transition=a,u.data.pos=u.elm.getBoundingClientRect(),n[u.key]?s.push(u):c.push(u)}this.kept=e(t,null,s),this.removed=c}return e(t,null,o)},updated:function(){var e=this.prevChildren,t=this.moveClass||(this.name||"v")+"-move";e.length&&this.hasMove(e[0].elm,t)&&(e.forEach(Yi),e.forEach(Xi),e.forEach(eo),this._reflow=document.body.offsetHeight,e.forEach((function(e){if(e.data.moved){var n=e.elm,r=n.style;wi(n,t),r.transform=r.WebkitTransform=r.transitionDuration="",n.addEventListener(mi,n._moveCb=function e(r){r&&r.target!==n||r&&!/transform$/.test(r.propertyName)||(n.removeEventListener(mi,e),n._moveCb=null,xi(n,t))})}})))},methods:{hasMove:function(e,t){if(!hi)return!1;if(this._hasMove)return this._hasMove;var n=e.cloneNode();e._transitionClasses&&e._transitionClasses.forEach((function(e){fi(n,e)})),ui(n,t),n.style.display="none",this.$el.appendChild(n);var r=ji(n);return this.$el.removeChild(n),this._hasMove=r.hasTransform}}}};Kn.config.mustUseProp=function(e,t,n){return"value"===n&&nr(e)&&"button"!==t||"selected"===n&&"option"===e||"checked"===n&&"input"===e||"muted"===n&&"video"===e},Kn.config.isReservedTag=gr,Kn.config.isReservedAttr=tr,Kn.config.getTagNamespace=function(e){return mr(e)?"svg":"math"===e?"math":void 0},Kn.config.isUnknownElement=function(e){if(!J)return!0;if(gr(e))return!1;if(e=e.toLowerCase(),null!=br[e])return br[e];var t=document.createElement(e);return e.indexOf("-")>-1?br[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:br[e]=/HTMLUnknownElement/.test(t.toString())},T(Kn.options.directives,Hi),T(Kn.options.components,to),Kn.prototype.__patch__=J?Li:D,Kn.prototype.$mount=function(e,t){return function(e,t,n){var r;e.$el=t,e.$options.render||(e.$options.render=he),en(e,"beforeMount"),r=function(){e._update(e._render(),n)},new Vt(e,r,D,{before:function(){e._isMounted&&!e._isDestroyed&&en(e,"beforeUpdate")}},!0),n=!1;var i=e._preWatchers;if(i)for(var o=0;o<i.length;o++)i[o].run();return null==e.$vnode&&(e._isMounted=!0,en(e,"mounted")),e}(this,e=e&&J?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},J&&setTimeout((function(){H.devtools&&le&&le.emit("init",Kn)}),0)},function(e,t,n){"use strict";var r="object"==typeof document&&document.all;e.exports=void 0===r&&void 0!==r?function(e){return"function"==typeof e||e===r}:function(e){return"function"==typeof e}},function(e,t,n){"use strict";function r(e,t,n,r,i,o,a,l){var s,c="function"==typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=n,c._compiled=!0),r&&(c.functional=!0),o&&(c._scopeId="data-v-"+o),a?(s=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},c._ssrRegister=s):i&&(s=l?function(){i.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:i),s)if(c.functional){c._injectStyles=s;var u=c.render;c.render=function(e,t){return s.call(t),u(e,t)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,s):[s]}return{exports:e,options:c}}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";var r=n(12),i=String,o=TypeError;e.exports=function(e){if(r(e))return e;throw new o(i(e)+" is not an object")}},function(e,t,n){"use strict";var r=function(e){return e&&e.Math===Math&&e};e.exports=r("object"==typeof globalThis&&globalThis)||r("object"==typeof window&&window)||r("object"==typeof self&&self)||r("object"==typeof global&&global)||r("object"==typeof this&&this)||function(){return this}()||Function("return this")()},function(e,t,n){"use strict";e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,n){"use strict";var r=n(7);e.exports=!r((function(){return 7!==Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(e,t,n){"use strict";var r=n(31),i=Function.prototype,o=i.call,a=r&&i.bind.bind(o,o);e.exports=r?a:function(e){return function(){return o.apply(e,arguments)}}},function(e,t,n){"use strict";n(129)},function(e,t,n){"use strict";var r=n(3),i=n(52),o=TypeError;e.exports=function(e){if(r(e))return e;throw new o(i(e)+" is not a function")}},function(e,t,n){"use strict";var r=n(3);e.exports=function(e){return"object"==typeof e?null!==e:r(e)}},function(e,t,n){"use strict";var r=n(9),i=n(37),o=r({}.hasOwnProperty);e.exports=Object.hasOwn||function(e,t){return o(i(e),t)}},function(e,t,n){"use strict";var r=n(6),i=n(71).f,o=n(24),a=n(55),l=n(54),s=n(86),c=n(143);e.exports=function(e,t){var n,u,f,p,d,h=e.target,v=e.global,m=e.stat;if(n=v?r:m?r[h]||l(h,{}):r[h]&&r[h].prototype)for(u in t){if(p=t[u],f=e.dontCallGetSet?(d=i(n,u))&&d.value:n[u],!c(v?u:h+(m?".":"#")+u,e.forced)&&void 0!==f){if(typeof p==typeof f)continue;s(p,f)}(e.sham||f&&f.sham)&&o(p,"sham",!0),a(n,u,p,e)}}},function(e,t){var n=Array.isArray;e.exports=n},function(e,t,n){"use strict";var r=n(31),i=Function.prototype.call;e.exports=r?i.bind(i):function(){return i.apply(i,arguments)}},function(e,t,n){var r=n(99),i="object"==typeof self&&self&&self.Object===Object&&self,o=r||i||Function("return this")();e.exports=o},function(e,t,n){"use strict";var r=n(6),i=n(79),o=n(13),a=n(80),l=n(76),s=n(75),c=r.Symbol,u=i("wks"),f=s?c.for||c:c&&c.withoutSetter||a;e.exports=function(e){return o(u,e)||(u[e]=l&&o(c,e)?c[e]:f("Symbol."+e)),u[e]}},function(e,t,n){"use strict";n(151)},function(e,t,n){"use strict";var r=n(8),i=n(81),o=n(83),a=n(5),l=n(73),s=TypeError,c=Object.defineProperty,u=Object.getOwnPropertyDescriptor;t.f=r?o?function(e,t,n){if(a(e),t=l(t),a(n),"function"==typeof e&&"prototype"===t&&"value"in n&&"writable"in n&&!n.writable){var r=u(e,t);r&&r.writable&&(e[t]=n.value,n={configurable:"configurable"in n?n.configurable:r.configurable,enumerable:"enumerable"in n?n.enumerable:r.enumerable,writable:!1})}return c(e,t,n)}:c:function(e,t,n){if(a(e),t=l(t),a(n),i)try{return c(e,t,n)}catch(e){}if("get"in n||"set"in n)throw new s("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},function(e,t,n){var r=n(204),i=n(207);e.exports=function(e,t){var n=i(e,t);return r(n)?n:void 0}},function(e,t){e.exports=function(e){return null!=e&&"object"==typeof e}},function(e,t,n){"use strict";e.exports=!1},function(e,t,n){"use strict";var r=n(8),i=n(20),o=n(32);e.exports=r?function(e,t,n){return i.f(e,t,o(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){"use strict";var r=n(2);t.a=new r.a},function(e,t,n){"use strict";e.exports=function(e){return{iterator:e,next:e.next,done:!1}}},function(e,t,n){var r=n(29),i=n(189),o=n(190),a=r?r.toStringTag:void 0;e.exports=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":a&&a in Object(e)?i(e):o(e)}},function(e,t,n){"use strict";var r=n(9),i=r({}.toString),o=r("".slice);e.exports=function(e){return o(i(e),8,-1)}},function(e,t,n){var r=n(17).Symbol;e.exports=r},function(e,t,n){"use strict";n(154)},function(e,t,n){"use strict";var r=n(7);e.exports=!r((function(){var e=function(){}.bind();return"function"!=typeof e||e.hasOwnProperty("prototype")}))},function(e,t,n){"use strict";e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,n){"use strict";var r=n(72),i=n(50);e.exports=function(e){return r(i(e))}},function(e,t,n){"use strict";var r=n(6),i=n(3),o=function(e){return i(e)?e:void 0};e.exports=function(e,t){return arguments.length<2?o(r[e]):r[e]&&r[e][t]}},function(e,t,n){"use strict";var r=n(9);e.exports=r({}.isPrototypeOf)},function(e,t,n){"use strict";var r=n(11),i=n(51);e.exports=function(e,t){var n=e[t];return i(n)?void 0:r(n)}},function(e,t,n){"use strict";var r=n(50),i=Object;e.exports=function(e){return i(r(e))}},function(e,t,n){"use strict";var r=n(141);e.exports=function(e){return r(e.length)}},function(e,t,n){var r=n(194),i=n(195),o=n(196),a=n(197),l=n(198);function s(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}s.prototype.clear=r,s.prototype.delete=i,s.prototype.get=o,s.prototype.has=a,s.prototype.set=l,e.exports=s},function(e,t,n){var r=n(101);e.exports=function(e,t){for(var n=e.length;n--;)if(r(e[n][0],t))return n;return-1}},function(e,t,n){var r=n(21)(Object,"create");e.exports=r},function(e,t,n){var r=n(216);e.exports=function(e,t){var n=e.__data__;return r(t)?n["string"==typeof t?"string":"hash"]:n.map}},function(e,t,n){var r=n(67);e.exports=function(e){if("string"==typeof e||r(e))return e;var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}},function(e,t,n){var r=n(117);e.exports=function(e,t,n){var i=null==e?void 0:r(e,t);return void 0===i?n:i}},function(e,t){var n=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,o=/^0o[0-7]+$/i,a=parseInt,l="object"==typeof global&&global&&global.Object===Object&&global,s="object"==typeof self&&self&&self.Object===Object&&self,c=l||s||Function("return this")(),u=Object.prototype.toString,f=Math.max,p=Math.min,d=function(){return c.Date.now()};function h(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function v(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==u.call(e)}(e))return NaN;if(h(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=h(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(n,"");var l=i.test(e);return l||o.test(e)?a(e.slice(2),l?2:8):r.test(e)?NaN:+e}e.exports=function(e,t,n){var r,i,o,a,l,s,c=0,u=!1,m=!1,g=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function b(t){var n=r,o=i;return r=i=void 0,c=t,a=e.apply(o,n)}function y(e){return c=e,l=setTimeout(w,t),u?b(e):a}function _(e){var n=e-s;return void 0===s||n>=t||n<0||m&&e-c>=o}function w(){var e=d();if(_(e))return x(e);l=setTimeout(w,function(e){var n=t-(e-s);return m?p(n,o-(e-c)):n}(e))}function x(e){return l=void 0,g&&r?b(e):(r=i=void 0,a)}function S(){var e=d(),n=_(e);if(r=arguments,i=this,s=e,n){if(void 0===l)return y(s);if(m)return l=setTimeout(w,t),b(s)}return void 0===l&&(l=setTimeout(w,t)),a}return t=v(t)||0,h(n)&&(u=!!n.leading,o=(m="maxWait"in n)?f(v(n.maxWait)||0,t):o,g="trailing"in n?!!n.trailing:g),S.cancel=function(){void 0!==l&&clearTimeout(l),c=0,r=s=i=l=void 0},S.flush=function(){return void 0===l?a:x(d())},S}},function(e,t,n){var r,i;
+/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
+ * @license MIT */void 0===(i="function"==typeof(r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function i(e,t,n){return e<t?t:e>n?n:e}function o(e){return 100*(-1+e)}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=i(e,r.minimum,1),n.status=1===e?null:e;var s=n.render(!t),c=s.querySelector(r.barSelector),u=r.speed,f=r.easing;return s.offsetWidth,a((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),l(c,function(e,t,n){var i;return(i="translate3d"===r.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,i}(e,u,f)),1===e?(l(s,{transition:"none",opacity:1}),s.offsetWidth,setTimeout((function(){l(s,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*i(Math.random()*t,.1,.95)),t=i(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");c(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var i,a=t.querySelector(r.barSelector),s=e?"-100":o(n.status||0),u=document.querySelector(r.parent);return l(a,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),r.showSpinner||(i=t.querySelector(r.spinnerSelector))&&p(i),u!=document.body&&c(u,"nprogress-custom-parent"),u.appendChild(t),t},n.remove=function(){u(document.documentElement,"nprogress-busy"),u(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&p(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var a=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),l=function(){var e=["Webkit","O","Moz","ms"],t={};function n(n){return n=n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()})),t[n]||(t[n]=function(t){var n=document.body.style;if(t in n)return t;for(var r,i=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);i--;)if((r=e[i]+o)in n)return r;return t}(n))}function r(e,t,r){t=n(t),e.style[t]=r}return function(e,t){var n,i,o=arguments;if(2==o.length)for(n in t)void 0!==(i=t[n])&&t.hasOwnProperty(n)&&r(e,n,i);else r(e,o[1],o[2])}}();function s(e,t){return("string"==typeof e?e:f(e)).indexOf(" "+t+" ")>=0}function c(e,t){var n=f(e),r=n+t;s(n,t)||(e.className=r.substring(1))}function u(e,t){var n,r=f(e);s(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function f(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function p(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n})?r.call(t,n,t,e):r)||(e.exports=i)},function(e,t,n){"use strict";n(279)},function(e,t,n){"use strict";n(161)},function(e,t,n){"use strict";var r=n(162),i=n(16),o=n(5),a=n(52),l=n(164),s=n(38),c=n(35),u=n(165),f=n(95),p=n(59),d=TypeError,h=function(e,t){this.stopped=e,this.result=t},v=h.prototype;e.exports=function(e,t,n){var m,g,b,y,_,w,x,S=n&&n.that,O=!(!n||!n.AS_ENTRIES),j=!(!n||!n.IS_RECORD),k=!(!n||!n.IS_ITERATOR),P=!(!n||!n.INTERRUPTED),E=r(t,S),C=function(e){return m&&p(m,"normal",e),new h(!0,e)},I=function(e){return O?(o(e),P?E(e[0],e[1],C):E(e[0],e[1])):P?E(e,C):E(e)};if(j)m=e.iterator;else if(k)m=e;else{if(!(g=f(e)))throw new d(a(e)+" is not iterable");if(l(g)){for(b=0,y=s(e);y>b;b++)if((_=I(e[b]))&&c(v,_))return _;return new h(!1)}m=u(e,g)}for(w=j?e.next:m.next;!(x=i(w,m)).done;){try{_=I(x.value)}catch(e){p(m,"throw",e)}if("object"==typeof _&&_&&c(v,_))return _}return new h(!1)}},function(e,t,n){"use strict";var r=n(51),i=TypeError;e.exports=function(e){if(r(e))throw new i("Can't call method on "+e);return e}},function(e,t,n){"use strict";e.exports=function(e){return null==e}},function(e,t,n){"use strict";var r=String;e.exports=function(e){try{return r(e)}catch(e){return"Object"}}},function(e,t,n){"use strict";var r=n(23),i=n(6),o=n(54),a=e.exports=i["__core-js_shared__"]||o("__core-js_shared__",{});(a.versions||(a.versions=[])).push({version:"3.39.0",mode:r?"pure":"global",copyright:"© 2014-2024 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.39.0/LICENSE",source:"https://github.com/zloirock/core-js"})},function(e,t,n){"use strict";var r=n(6),i=Object.defineProperty;e.exports=function(e,t){try{i(r,e,{value:t,configurable:!0,writable:!0})}catch(n){r[e]=t}return t}},function(e,t,n){"use strict";var r=n(3),i=n(20),o=n(84),a=n(54);e.exports=function(e,t,n,l){l||(l={});var s=l.enumerable,c=void 0!==l.name?l.name:t;if(r(n)&&o(n,c,l),l.global)s?e[t]=n:a(t,n);else{try{l.unsafe?e[t]&&(s=!0):delete e[t]}catch(e){}s?e[t]=n:i.f(e,t,{value:n,enumerable:!1,configurable:!l.nonConfigurable,writable:!l.nonWritable})}return e}},function(e,t,n){"use strict";var r=n(79),i=n(80),o=r("keys");e.exports=function(e){return o[e]||(o[e]=i(e))}},function(e,t,n){"use strict";e.exports={}},function(e,t,n){"use strict";e.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(e,t,n){"use strict";var r=n(16),i=n(5),o=n(36);e.exports=function(e,t,n){var a,l;i(e);try{if(!(a=o(e,"return"))){if("throw"===t)throw n;return n}a=r(a,e)}catch(e){l=!0,a=e}if("throw"===t)throw n;if(l)throw a;return i(a),n}},function(e,t,n){var r=n(188),i=n(22),o=Object.prototype,a=o.hasOwnProperty,l=o.propertyIsEnumerable,s=r(function(){return arguments}())?r:function(e){return i(e)&&a.call(e,"callee")&&!l.call(e,"callee")};e.exports=s},function(e,t,n){var r=n(21)(n(17),"Map");e.exports=r},function(e,t){e.exports=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},function(e,t,n){var r=n(208),i=n(215),o=n(217),a=n(218),l=n(219);function s(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}s.prototype.clear=r,s.prototype.delete=i,s.prototype.get=o,s.prototype.has=a,s.prototype.set=l,e.exports=s},function(e,t){e.exports=function(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}},function(e,t){e.exports=function(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=9007199254740991}},function(e,t,n){var r=n(15),i=n(67),o=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,a=/^\w*$/;e.exports=function(e,t){if(r(e))return!1;var n=typeof e;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=e&&!i(e))||(a.test(e)||!o.test(e)||null!=t&&e in Object(t))}},function(e,t,n){var r=n(27),i=n(22);e.exports=function(e){return"symbol"==typeof e||i(e)&&"[object Symbol]"==r(e)}},function(e,t){e.exports=function(e){return e}},function(e,t,n){"use strict";var r=n(14),i=n(37),o=n(38),a=n(183),l=n(185);r({target:"Array",proto:!0,arity:1,forced:n(7)((function(){return 4294967297!==[].push.call({length:4294967296},1)}))||!function(){try{Object.defineProperty([],"length",{writable:!1}).push()}catch(e){return e instanceof TypeError}}()},{push:function(e){var t=i(this),n=o(t),r=arguments.length;l(n+r);for(var s=0;s<r;s++)t[n]=arguments[s],n++;return a(t,n),n}})},function(e,t,n){"use strict";n.r(t);n(10),n(48),n(69),n(19),n(30),n(47);var r=n(44),i=n.n(r),o=(e,t,n=null)=>{let r=i()(t,"title","");return i()(t,"frontmatter.tags")&&(r+=" "+t.frontmatter.tags.join(" ")),n&&(r+=" "+n),a(e,r)};const a=(e,t)=>{const n=e=>e.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),r=new RegExp("[^\0-]"),i=e.split(/\s+/g).map(e=>e.trim()).filter(e=>!!e);if(r.test(e))return i.some(e=>t.toLowerCase().indexOf(e)>-1);{const r=e.endsWith(" ");return new RegExp(i.map((e,t)=>i.length!==t+1||r?`(?=.*\\b${n(e)}\\b)`:`(?=.*\\b${n(e)})`).join("")+".+","gi").test(t)}};var l={name:"SearchBox",data:()=>({query:"",focused:!1,focusIndex:0,placeholder:void 0}),computed:{showSuggestions(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions(){const e=this.query.trim().toLowerCase();if(!e)return;const{pages:t}=this.$site,n=this.$site.themeConfig.searchMaxSuggestions||10,r=this.$localePath,i=[];for(let a=0;a<t.length&&!(i.length>=n);a++){const l=t[a];if(this.getPageLocalePath(l)===r&&this.isSearchable(l))if(o(e,l))i.push(l);else if(l.headers)for(let t=0;t<l.headers.length&&!(i.length>=n);t++){const n=l.headers[t];n.title&&o(e,l,n.title)&&i.push(Object.assign({},l,{path:l.path+"#"+n.slug,header:n}))}}return i},alignRight(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath(e){for(const t in this.$site.locales||{})if("/"!==t&&0===e.path.indexOf(t))return t;return"/"},isSearchable(e){let t=null;return null===t||(t=Array.isArray(t)?t:new Array(t),t.filter(t=>e.path.match(t)).length>0)},onHotkey(e){e.srcElement===document.body&&["s","/"].includes(e.key)&&(this.$refs.input.focus(),e.preventDefault())},onUp(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown(){this.showSuggestions&&(this.focusIndex<this.suggestions.length-1?this.focusIndex++:this.focusIndex=0)},go(e){this.showSuggestions&&(this.$router.push(this.suggestions[e].path),this.query="",this.focusIndex=0)},focus(e){this.focusIndex=e},unfocus(){this.focusIndex=-1}}},s=(n(280),n(4)),c={components:{SearchBox:Object(s.a)(l,(function(){var e=this,t=e._self._c;return t("div",{staticClass:"search-box"},[t("input",{ref:"input",class:{focused:e.focused},attrs:{"aria-label":"Search",placeholder:e.placeholder,autocomplete:"off",spellcheck:"false"},domProps:{value:e.query},on:{input:function(t){e.query=t.target.value},focus:function(t){e.focused=!0},blur:function(t){e.focused=!1},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.go(e.focusIndex)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:e.onUp.apply(null,arguments)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:e.onDown.apply(null,arguments)}]}}),e._v(" "),e.showSuggestions?t("ul",{staticClass:"suggestions",class:{"align-right":e.alignRight},on:{mouseleave:e.unfocus}},e._l(e.suggestions,(function(n,r){return t("li",{key:r,staticClass:"suggestion",class:{focused:r===e.focusIndex},on:{mousedown:function(t){return e.go(r)},mouseenter:function(t){return e.focus(r)}}},[t("a",{attrs:{href:n.path},on:{click:function(e){e.preventDefault()}}},[t("span",{staticClass:"page-title"},[e._v(e._s(n.title||n.path))]),e._v(" "),n.header?t("span",{staticClass:"header"},[e._v("> "+e._s(n.header.title))]):e._e()])])})),0):e._e()])}),[],!1,null,null,null).exports,AlgoliaSearchBox:n(126).default},data:()=>({smallMode:!1,isSidebarOpen:!1,selectedNavIndex:null,list:[{title:"指南",link:"/guide/basic/start.html"},{title:"API",link:"/api/"},{title:"文章",link:"/articles/"},{title:"更新记录",link:"https://github.com/didi/mpx/releases",target:"_blank"},{title:"GitHub",link:"https://github.com/didi/mpx",target:"_blank"}]}),computed:{algolia(){return this.$themeLocaleConfig.algolia||this.$site.themeConfig.algolia||{}},isAlgoliaSearch(){return this.algolia&&this.algolia.apiKey&&this.algolia.indexName},calculateStyle(){return"/"!==this.$page.path?"":this.isSidebarOpen?"transform: translateY(0);":""}},mounted(){const e=()=>{document.documentElement.clientWidth<719?this.smallMode=!0:this.smallMode=!1};e(),window.addEventListener("resize",e,!1),this.$router.afterEach(()=>{this.isSidebarOpen=!1});const t=this.$route.path;this.list.forEach((e,n)=>{e.link!==t||e.link.includes("https://")||(this.selectedNavIndex=n)})},methods:{toggleSidebar(e){this.isSidebarOpen="boolean"==typeof e?e:!this.isSidebarOpen,"/"!==this.$page.path&&this.$emit("toggle-sidebar")}}},u=(n(282),Object(s.a)(c,(function(){var e=this,t=e._self._c;return t("header",{staticClass:"header"},[e.smallMode?t("div",{staticClass:"header-menu"},[e._m(0),e._v(" "),t("div",{staticStyle:{display:"flex","align-items":"center"}},[e.isAlgoliaSearch?t("AlgoliaSearchBox",{attrs:{options:e.algolia}}):e._e(),e._v(" "),t("span",{staticClass:"header-menu-icon"},[t("img",{attrs:{height:"14",src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/y_icon_liebiao.png",alt:"menu"},on:{click:e.toggleSidebar}})])],1)]):e._e(),e._v(" "),t("div",{staticClass:"head-container",style:e.calculateStyle},[e.smallMode?e._e():t("a",{attrs:{href:"/"}},[t("div",{staticClass:"logo"},[e._v("mpx")])]),e._v(" "),t("div",{staticClass:"row"},[e.smallMode?e._e():t("div",{staticClass:"header__line"}),e._v(" "),e._l(e.list,(function(n,r){return t("nav",{key:r,class:["nav"]},[t("a",{staticClass:"nav-link",class:[e.selectedNavIndex===r?"router-link-active":""],attrs:{href:n.link,target:n.target}},[e._v("\n          "+e._s(n.title)+"\n          "),e.smallMode?t("img",{attrs:{width:"16",src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/y_icon_jinru.png",alt:"arrow"}}):e._e()])])})),e._v(" "),e.smallMode?e._e():t("div",{staticClass:"searchBox-wrapper"},[t("div",{staticClass:"searchBox"},[e.isAlgoliaSearch?t("AlgoliaSearchBox",{attrs:{options:e.algolia}}):e._e()],1)])],2)]),e._v(" "),e.isSidebarOpen?t("div",{staticClass:"head-mask",on:{click:e.toggleSidebar}}):e._e()])}),[function(){var e=this._self._c;return e("a",{attrs:{href:"/"}},[e("img",{staticStyle:{"vertical-align":"middle"},attrs:{height:"20",src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/logo_color.png",alt:"logo"}})])}],!1,null,"3ad594c3",null));t.default=u.exports},function(e,t,n){"use strict";var r=n(8),i=n(16),o=n(130),a=n(32),l=n(33),s=n(73),c=n(13),u=n(81),f=Object.getOwnPropertyDescriptor;t.f=r?f:function(e,t){if(e=l(e),t=s(t),u)try{return f(e,t)}catch(e){}if(c(e,t))return a(!i(o.f,e,t),e[t])}},function(e,t,n){"use strict";var r=n(9),i=n(7),o=n(28),a=Object,l=r("".split);e.exports=i((function(){return!a("z").propertyIsEnumerable(0)}))?function(e){return"String"===o(e)?l(e,""):a(e)}:a},function(e,t,n){"use strict";var r=n(131),i=n(74);e.exports=function(e){var t=r(e,"string");return i(t)?t:t+""}},function(e,t,n){"use strict";var r=n(34),i=n(3),o=n(35),a=n(75),l=Object;e.exports=a?function(e){return"symbol"==typeof e}:function(e){var t=r("Symbol");return i(t)&&o(t.prototype,l(e))}},function(e,t,n){"use strict";var r=n(76);e.exports=r&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},function(e,t,n){"use strict";var r=n(77),i=n(7),o=n(6).String;e.exports=!!Object.getOwnPropertySymbols&&!i((function(){var e=Symbol("symbol detection");return!o(e)||!(Object(e)instanceof Symbol)||!Symbol.sham&&r&&r<41}))},function(e,t,n){"use strict";var r,i,o=n(6),a=n(78),l=o.process,s=o.Deno,c=l&&l.versions||s&&s.version,u=c&&c.v8;u&&(i=(r=u.split("."))[0]>0&&r[0]<4?1:+(r[0]+r[1])),!i&&a&&(!(r=a.match(/Edge\/(\d+)/))||r[1]>=74)&&(r=a.match(/Chrome\/(\d+)/))&&(i=+r[1]),e.exports=i},function(e,t,n){"use strict";var r=n(6).navigator,i=r&&r.userAgent;e.exports=i?String(i):""},function(e,t,n){"use strict";var r=n(53);e.exports=function(e,t){return r[e]||(r[e]=t||{})}},function(e,t,n){"use strict";var r=n(9),i=0,o=Math.random(),a=r(1..toString);e.exports=function(e){return"Symbol("+(void 0===e?"":e)+")_"+a(++i+o,36)}},function(e,t,n){"use strict";var r=n(8),i=n(7),o=n(82);e.exports=!r&&!i((function(){return 7!==Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a}))},function(e,t,n){"use strict";var r=n(6),i=n(12),o=r.document,a=i(o)&&i(o.createElement);e.exports=function(e){return a?o.createElement(e):{}}},function(e,t,n){"use strict";var r=n(8),i=n(7);e.exports=r&&i((function(){return 42!==Object.defineProperty((function(){}),"prototype",{value:42,writable:!1}).prototype}))},function(e,t,n){"use strict";var r=n(9),i=n(7),o=n(3),a=n(13),l=n(8),s=n(133).CONFIGURABLE,c=n(134),u=n(85),f=u.enforce,p=u.get,d=String,h=Object.defineProperty,v=r("".slice),m=r("".replace),g=r([].join),b=l&&!i((function(){return 8!==h((function(){}),"length",{value:8}).length})),y=String(String).split("String"),_=e.exports=function(e,t,n){"Symbol("===v(d(t),0,7)&&(t="["+m(d(t),/^Symbol\(([^)]*)\).*$/,"$1")+"]"),n&&n.getter&&(t="get "+t),n&&n.setter&&(t="set "+t),(!a(e,"name")||s&&e.name!==t)&&(l?h(e,"name",{value:t,configurable:!0}):e.name=t),b&&n&&a(n,"arity")&&e.length!==n.arity&&h(e,"length",{value:n.arity});try{n&&a(n,"constructor")&&n.constructor?l&&h(e,"prototype",{writable:!1}):e.prototype&&(e.prototype=void 0)}catch(e){}var r=f(e);return a(r,"source")||(r.source=g(y,"string"==typeof t?t:"")),e};Function.prototype.toString=_((function(){return o(this)&&p(this).source||c(this)}),"toString")},function(e,t,n){"use strict";var r,i,o,a=n(135),l=n(6),s=n(12),c=n(24),u=n(13),f=n(53),p=n(56),d=n(57),h=l.TypeError,v=l.WeakMap;if(a||f.state){var m=f.state||(f.state=new v);m.get=m.get,m.has=m.has,m.set=m.set,r=function(e,t){if(m.has(e))throw new h("Object already initialized");return t.facade=e,m.set(e,t),t},i=function(e){return m.get(e)||{}},o=function(e){return m.has(e)}}else{var g=p("state");d[g]=!0,r=function(e,t){if(u(e,g))throw new h("Object already initialized");return t.facade=e,c(e,g,t),t},i=function(e){return u(e,g)?e[g]:{}},o=function(e){return u(e,g)}}e.exports={set:r,get:i,has:o,enforce:function(e){return o(e)?i(e):r(e,{})},getterFor:function(e){return function(t){var n;if(!s(t)||(n=i(t)).type!==e)throw new h("Incompatible receiver, "+e+" required");return n}}}},function(e,t,n){"use strict";var r=n(13),i=n(136),o=n(71),a=n(20);e.exports=function(e,t,n){for(var l=i(t),s=a.f,c=o.f,u=0;u<l.length;u++){var f=l[u];r(e,f)||n&&r(n,f)||s(e,f,c(t,f))}}},function(e,t,n){"use strict";var r=n(9),i=n(13),o=n(33),a=n(138).indexOf,l=n(57),s=r([].push);e.exports=function(e,t){var n,r=o(e),c=0,u=[];for(n in r)!i(l,n)&&i(r,n)&&s(u,n);for(;t.length>c;)i(r,n=t[c++])&&(~a(u,n)||s(u,n));return u}},function(e,t,n){"use strict";var r=n(140);e.exports=function(e){var t=+e;return t!=t||0===t?0:r(t)}},function(e,t,n){"use strict";var r=n(13),i=n(3),o=n(37),a=n(56),l=n(145),s=a("IE_PROTO"),c=Object,u=c.prototype;e.exports=l?c.getPrototypeOf:function(e){var t=o(e);if(r(t,s))return t[s];var n=t.constructor;return i(n)&&t instanceof n?n.prototype:t instanceof c?u:null}},function(e,t,n){"use strict";var r,i,o,a=n(7),l=n(3),s=n(12),c=n(91),u=n(89),f=n(55),p=n(18),d=n(23),h=p("iterator"),v=!1;[].keys&&("next"in(o=[].keys())?(i=u(u(o)))!==Object.prototype&&(r=i):v=!0),!s(r)||a((function(){var e={};return r[h].call(e)!==e}))?r={}:d&&(r=c(r)),l(r[h])||f(r,h,(function(){return this})),e.exports={IteratorPrototype:r,BUGGY_SAFARI_ITERATORS:v}},function(e,t,n){"use strict";var r,i=n(5),o=n(148),a=n(58),l=n(57),s=n(150),c=n(82),u=n(56),f=u("IE_PROTO"),p=function(){},d=function(e){return"<script>"+e+"<\/script>"},h=function(e){e.write(d("")),e.close();var t=e.parentWindow.Object;return e=null,t},v=function(){try{r=new ActiveXObject("htmlfile")}catch(e){}var e,t;v="undefined"!=typeof document?document.domain&&r?h(r):((t=c("iframe")).style.display="none",s.appendChild(t),t.src=String("javascript:"),(e=t.contentWindow.document).open(),e.write(d("document.F=Object")),e.close(),e.F):h(r);for(var n=a.length;n--;)delete v.prototype[a[n]];return v()};l[f]=!0,e.exports=Object.create||function(e,t){var n;return null!==e?(p.prototype=i(e),n=new p,p.prototype=null,n[f]=e):n=v(),void 0===t?n:o.f(n,t)}},function(e,t,n){"use strict";var r=n(16),i=n(91),o=n(24),a=n(152),l=n(18),s=n(85),c=n(36),u=n(90).IteratorPrototype,f=n(153),p=n(59),d=l("toStringTag"),h=s.set,v=function(e){var t=s.getterFor(e?"WrapForValidIterator":"IteratorHelper");return a(i(u),{next:function(){var n=t(this);if(e)return n.nextHandler();try{var r=n.done?void 0:n.nextHandler();return f(r,n.done)}catch(e){throw n.done=!0,e}},return:function(){var n=t(this),i=n.iterator;if(n.done=!0,e){var o=c(i,"return");return o?r(o,i):f(void 0,!0)}if(n.inner)try{p(n.inner.iterator,"normal")}catch(e){return p(i,"throw",e)}return i&&p(i,"normal"),f(void 0,!0)}})},m=v(!0),g=v(!1);o(g,d,"Iterator Helper"),e.exports=function(e,t){var n=function(n,r){r?(r.iterator=n.iterator,r.next=n.next):r=n,r.type=t?"WrapForValidIterator":"IteratorHelper",r.nextHandler=e,r.counter=0,r.done=!1,h(this,r)};return n.prototype=t?m:g,n}},function(e,t,n){"use strict";var r=n(5),i=n(59);e.exports=function(e,t,n,o){try{return o?t(r(n)[0],n[1]):t(n)}catch(t){i(e,"throw",t)}}},function(e,t,n){"use strict";e.exports={}},function(e,t,n){"use strict";var r=n(96),i=n(36),o=n(51),a=n(94),l=n(18)("iterator");e.exports=function(e){if(!o(e))return i(e,l)||i(e,"@@iterator")||a[r(e)]}},function(e,t,n){"use strict";var r=n(166),i=n(3),o=n(28),a=n(18)("toStringTag"),l=Object,s="Arguments"===o(function(){return arguments}());e.exports=r?o:function(e){var t,n,r;return void 0===e?"Undefined":null===e?"Null":"string"==typeof(n=function(e,t){try{return e[t]}catch(e){}}(t=l(e),a))?n:s?o(t):"Object"===(r=o(t))&&i(t.callee)?"Arguments":r}},function(e,t,n){"use strict";var r=n(172),i=n(12),o=n(50),a=n(173);e.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var e,t=!1,n={};try{(e=r(Object.prototype,"__proto__","set"))(n,[]),t=n instanceof Array}catch(e){}return function(n,r){return o(n),a(r),i(n)?(t?e(n,r):n.__proto__=r,n):n}}():void 0)},function(e,t){e.exports=function(e,t){for(var n=-1,r=t.length,i=e.length;++n<r;)e[i+n]=t[n];return e}},function(e,t){var n="object"==typeof global&&global&&global.Object===Object&&global;e.exports=n},function(e,t,n){var r=n(39),i=n(199),o=n(200),a=n(201),l=n(202),s=n(203);function c(e){var t=this.__data__=new r(e);this.size=t.size}c.prototype.clear=i,c.prototype.delete=o,c.prototype.get=a,c.prototype.has=l,c.prototype.set=s,e.exports=c},function(e,t){e.exports=function(e,t){return e===t||e!=e&&t!=t}},function(e,t,n){var r=n(27),i=n(62);e.exports=function(e){if(!i(e))return!1;var t=r(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},function(e,t){var n=Function.prototype.toString;e.exports=function(e){if(null!=e){try{return n.call(e)}catch(e){}try{return e+""}catch(e){}}return""}},function(e,t,n){var r=n(220),i=n(22);e.exports=function e(t,n,o,a,l){return t===n||(null==t||null==n||!i(t)&&!i(n)?t!=t&&n!=n:r(t,n,o,a,e,l))}},function(e,t,n){var r=n(106),i=n(223),o=n(107);e.exports=function(e,t,n,a,l,s){var c=1&n,u=e.length,f=t.length;if(u!=f&&!(c&&f>u))return!1;var p=s.get(e),d=s.get(t);if(p&&d)return p==t&&d==e;var h=-1,v=!0,m=2&n?new r:void 0;for(s.set(e,t),s.set(t,e);++h<u;){var g=e[h],b=t[h];if(a)var y=c?a(b,g,h,t,e,s):a(g,b,h,e,t,s);if(void 0!==y){if(y)continue;v=!1;break}if(m){if(!i(t,(function(e,t){if(!o(m,t)&&(g===e||l(g,e,n,a,s)))return m.push(t)}))){v=!1;break}}else if(g!==b&&!l(g,b,n,a,s)){v=!1;break}}return s.delete(e),s.delete(t),v}},function(e,t,n){var r=n(63),i=n(221),o=n(222);function a(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new r;++t<n;)this.add(e[t])}a.prototype.add=a.prototype.push=i,a.prototype.has=o,e.exports=a},function(e,t){e.exports=function(e,t){return e.has(t)}},function(e,t,n){var r=n(233),i=n(239),o=n(113);e.exports=function(e){return o(e)?r(e):i(e)}},function(e,t,n){(function(e){var r=n(17),i=n(235),o=t&&!t.nodeType&&t,a=o&&"object"==typeof e&&e&&!e.nodeType&&e,l=a&&a.exports===o?r.Buffer:void 0,s=(l?l.isBuffer:void 0)||i;e.exports=s}).call(this,n(110)(e))},function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e}},function(e,t){var n=/^(?:0|[1-9]\d*)$/;e.exports=function(e,t){var r=typeof e;return!!(t=null==t?9007199254740991:t)&&("number"==r||"symbol"!=r&&n.test(e))&&e>-1&&e%1==0&&e<t}},function(e,t,n){var r=n(236),i=n(237),o=n(238),a=o&&o.isTypedArray,l=a?i(a):r;e.exports=l},function(e,t,n){var r=n(102),i=n(65);e.exports=function(e){return null!=e&&i(e.length)&&!r(e)}},function(e,t,n){var r=n(21)(n(17),"Set");e.exports=r},function(e,t,n){var r=n(62);e.exports=function(e){return e==e&&!r(e)}},function(e,t){e.exports=function(e,t){return function(n){return null!=n&&(n[e]===t&&(void 0!==t||e in Object(n)))}}},function(e,t,n){var r=n(118),i=n(43);e.exports=function(e,t){for(var n=0,o=(t=r(t,e)).length;null!=e&&n<o;)e=e[i(t[n++])];return n&&n==o?e:void 0}},function(e,t,n){var r=n(15),i=n(66),o=n(249),a=n(252);e.exports=function(e,t){return r(e)?e:i(e,t)?[e]:o(a(e))}},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){var r=n(186),i=n(191),o=n(261),a=n(269),l=n(278),s=n(127),c=o((function(e){var t=s(e);return l(t)&&(t=void 0),a(r(e,1,l,!0),i(t,2))}));e.exports=c},function(e,t,n){"use strict";
+/*!
+ * escape-html
+ * Copyright(c) 2012-2013 TJ Holowaychuk
+ * Copyright(c) 2015 Andreas Lubbe
+ * Copyright(c) 2015 Tiancheng "Timothy" Gu
+ * MIT Licensed
+ */var r=/["'&<>]/;e.exports=function(e){var t,n=""+e,i=r.exec(n);if(!i)return n;var o="",a=0,l=0;for(a=i.index;a<n.length;a++){switch(n.charCodeAt(a)){case 34:t="&quot;";break;case 38:t="&amp;";break;case 39:t="&#39;";break;case 60:t="&lt;";break;case 62:t="&gt;";break;default:continue}l!==a&&(o+=n.substring(l,a)),l=a+1,o+=t}return l!==a?o+n.substring(l,a):o}},function(e,t,n){"use strict";n.r(t);
+/*! @docsearch/js 3.8.2 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
+function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(null,arguments)}function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var o,a,l,s,c,u,f,p,d,h,v,m={},g=[],b=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,y=Array.isArray;function _(e,t){for(var n in t)e[n]=t[n];return e}function w(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function x(e,t,n){var r,i,a,l={};for(a in t)"key"==a?r=t[a]:"ref"==a?i=t[a]:l[a]=t[a];if(arguments.length>2&&(l.children=arguments.length>3?o.call(arguments,2):n),"function"==typeof e&&null!=e.defaultProps)for(a in e.defaultProps)void 0===l[a]&&(l[a]=e.defaultProps[a]);return S(e,l,r,i,null)}function S(e,t,n,r,i){var o={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:null==i?++l:i,__i:-1,__u:0};return null==i&&null!=a.vnode&&a.vnode(o),o}function O(e){return e.children}function j(e,t){this.props=e,this.context=t}function k(e,t){if(null==t)return e.__?k(e.__,e.__i+1):null;for(var n;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e)return n.__e;return"function"==typeof e.type?k(e):null}function P(e){var t,n;if(null!=(e=e.__)&&null!=e.__c){for(e.__e=e.__c.base=null,t=0;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e){e.__e=e.__c.base=n.__e;break}return P(e)}}function E(e){(!e.__d&&(e.__d=!0)&&s.push(e)&&!C.__r++||c!==a.debounceRendering)&&((c=a.debounceRendering)||u)(C)}function C(){var e,t,n,r,i,o,l,c;for(s.sort(f);e=s.shift();)e.__d&&(t=s.length,r=void 0,o=(i=(n=e).__v).__e,l=[],c=[],n.__P&&((r=_({},i)).__v=i.__v+1,a.vnode&&a.vnode(r),M(n.__P,r,i,n.__n,n.__P.namespaceURI,32&i.__u?[o]:null,l,null==o?k(i):o,!!(32&i.__u),c),r.__v=i.__v,r.__.__k[r.__i]=r,N(l,r,c),r.__e!=o&&P(r)),s.length>t&&s.sort(f));C.__r=0}function I(e,t,n,r,i,o,a,l,s,c,u){var f,p,d,h,v,b=r&&r.__k||g,_=t.length;for(n.__d=s,function(e,t,n){var r,i,o,a,l,s=t.length,c=n.length,u=c,f=0;for(e.__k=[],r=0;r<s;r++)null!=(i=t[r])&&"boolean"!=typeof i&&"function"!=typeof i?(a=r+f,(i=e.__k[r]="string"==typeof i||"number"==typeof i||"bigint"==typeof i||i.constructor==String?S(null,i,null,null,null):y(i)?S(O,{children:i},null,null,null):void 0===i.constructor&&i.__b>0?S(i.type,i.props,i.key,i.ref?i.ref:null,i.__v):i).__=e,i.__b=e.__b+1,o=null,-1!==(l=i.__i=L(i,n,a,u))&&(u--,(o=n[l])&&(o.__u|=131072)),null==o||null===o.__v?(-1==l&&f--,"function"!=typeof i.type&&(i.__u|=65536)):l!==a&&(l==a-1?f--:l==a+1?f++:(l>a?f--:f++,i.__u|=65536))):i=e.__k[r]=null;if(u)for(r=0;r<c;r++)null!=(o=n[r])&&!(131072&o.__u)&&(o.__e==e.__d&&(e.__d=k(o)),F(o,o))}(n,t,b),s=n.__d,f=0;f<_;f++)null!=(d=n.__k[f])&&(p=-1===d.__i?m:b[d.__i]||m,d.__i=f,M(e,d,p,i,o,a,l,s,c,u),h=d.__e,d.ref&&p.ref!=d.ref&&(p.ref&&q(p.ref,null,d),u.push(d.ref,d.__c||h,d)),null==v&&null!=h&&(v=h),65536&d.__u||p.__k===d.__k?s=A(d,s,e):"function"==typeof d.type&&void 0!==d.__d?s=d.__d:h&&(s=h.nextSibling),d.__d=void 0,d.__u&=-196609);n.__d=s,n.__e=v}function A(e,t,n){var r,i;if("function"==typeof e.type){for(r=e.__k,i=0;r&&i<r.length;i++)r[i]&&(r[i].__=e,t=A(r[i],t,n));return t}e.__e!=t&&(t&&e.type&&!n.contains(t)&&(t=k(e)),n.insertBefore(e.__e,t||null),t=e.__e);do{t=t&&t.nextSibling}while(null!=t&&8===t.nodeType);return t}function T(e,t){return t=t||[],null==e||"boolean"==typeof e||(y(e)?e.some((function(e){T(e,t)})):t.push(e)),t}function L(e,t,n,r){var i=e.key,o=e.type,a=n-1,l=n+1,s=t[n];if(null===s||s&&i==s.key&&o===s.type&&!(131072&s.__u))return n;if(r>(null==s||131072&s.__u?0:1))for(;a>=0||l<t.length;){if(a>=0){if((s=t[a])&&!(131072&s.__u)&&i==s.key&&o===s.type)return a;a--}if(l<t.length){if((s=t[l])&&!(131072&s.__u)&&i==s.key&&o===s.type)return l;l++}}return-1}function D(e,t,n){"-"===t[0]?e.setProperty(t,null==n?"":n):e[t]=null==n?"":"number"!=typeof n||b.test(t)?n:n+"px"}function $(e,t,n,r,i){var o;e:if("style"===t)if("string"==typeof n)e.style.cssText=n;else{if("string"==typeof r&&(e.style.cssText=r=""),r)for(t in r)n&&t in n||D(e.style,t,"");if(n)for(t in n)r&&n[t]===r[t]||D(e.style,t,n[t])}else if("o"===t[0]&&"n"===t[1])o=t!==(t=t.replace(/(PointerCapture)$|Capture$/i,"$1")),t=t.toLowerCase()in e||"onFocusOut"===t||"onFocusIn"===t?t.toLowerCase().slice(2):t.slice(2),e.l||(e.l={}),e.l[t+o]=n,n?r?n.u=r.u:(n.u=p,e.addEventListener(t,o?h:d,o)):e.removeEventListener(t,o?h:d,o);else{if("http://www.w3.org/2000/svg"==i)t=t.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=t&&"height"!=t&&"href"!=t&&"list"!=t&&"form"!=t&&"tabIndex"!=t&&"download"!=t&&"rowSpan"!=t&&"colSpan"!=t&&"role"!=t&&"popover"!=t&&t in e)try{e[t]=null==n?"":n;break e}catch(e){}"function"==typeof n||(null==n||!1===n&&"-"!==t[4]?e.removeAttribute(t):e.setAttribute(t,"popover"==t&&1==n?"":n))}}function R(e){return function(t){if(this.l){var n=this.l[t.type+e];if(null==t.t)t.t=p++;else if(t.t<n.u)return;return n(a.event?a.event(t):t)}}}function M(e,t,n,r,i,o,l,s,c,u){var f,p,d,h,v,m,g,b,w,x,S,k,P,E,C,A,T=t.type;if(void 0!==t.constructor)return null;128&n.__u&&(c=!!(32&n.__u),o=[s=t.__e=n.__e]),(f=a.__b)&&f(t);e:if("function"==typeof T)try{if(b=t.props,w="prototype"in T&&T.prototype.render,x=(f=T.contextType)&&r[f.__c],S=f?x?x.props.value:f.__:r,n.__c?g=(p=t.__c=n.__c).__=p.__E:(w?t.__c=p=new T(b,S):(t.__c=p=new j(b,S),p.constructor=T,p.render=B),x&&x.sub(p),p.props=b,p.state||(p.state={}),p.context=S,p.__n=r,d=p.__d=!0,p.__h=[],p._sb=[]),w&&null==p.__s&&(p.__s=p.state),w&&null!=T.getDerivedStateFromProps&&(p.__s==p.state&&(p.__s=_({},p.__s)),_(p.__s,T.getDerivedStateFromProps(b,p.__s))),h=p.props,v=p.state,p.__v=t,d)w&&null==T.getDerivedStateFromProps&&null!=p.componentWillMount&&p.componentWillMount(),w&&null!=p.componentDidMount&&p.__h.push(p.componentDidMount);else{if(w&&null==T.getDerivedStateFromProps&&b!==h&&null!=p.componentWillReceiveProps&&p.componentWillReceiveProps(b,S),!p.__e&&(null!=p.shouldComponentUpdate&&!1===p.shouldComponentUpdate(b,p.__s,S)||t.__v===n.__v)){for(t.__v!==n.__v&&(p.props=b,p.state=p.__s,p.__d=!1),t.__e=n.__e,t.__k=n.__k,t.__k.some((function(e){e&&(e.__=t)})),k=0;k<p._sb.length;k++)p.__h.push(p._sb[k]);p._sb=[],p.__h.length&&l.push(p);break e}null!=p.componentWillUpdate&&p.componentWillUpdate(b,p.__s,S),w&&null!=p.componentDidUpdate&&p.__h.push((function(){p.componentDidUpdate(h,v,m)}))}if(p.context=S,p.props=b,p.__P=e,p.__e=!1,P=a.__r,E=0,w){for(p.state=p.__s,p.__d=!1,P&&P(t),f=p.render(p.props,p.state,p.context),C=0;C<p._sb.length;C++)p.__h.push(p._sb[C]);p._sb=[]}else do{p.__d=!1,P&&P(t),f=p.render(p.props,p.state,p.context),p.state=p.__s}while(p.__d&&++E<25);p.state=p.__s,null!=p.getChildContext&&(r=_(_({},r),p.getChildContext())),w&&!d&&null!=p.getSnapshotBeforeUpdate&&(m=p.getSnapshotBeforeUpdate(h,v)),I(e,y(A=null!=f&&f.type===O&&null==f.key?f.props.children:f)?A:[A],t,n,r,i,o,l,s,c,u),p.base=t.__e,t.__u&=-161,p.__h.length&&l.push(p),g&&(p.__E=p.__=null)}catch(e){if(t.__v=null,c||null!=o){for(t.__u|=c?160:128;s&&8===s.nodeType&&s.nextSibling;)s=s.nextSibling;o[o.indexOf(s)]=null,t.__e=s}else t.__e=n.__e,t.__k=n.__k;a.__e(e,t,n)}else null==o&&t.__v===n.__v?(t.__k=n.__k,t.__e=n.__e):t.__e=U(n.__e,t,n,r,i,o,l,c,u);(f=a.diffed)&&f(t)}function N(e,t,n){t.__d=void 0;for(var r=0;r<n.length;r++)q(n[r],n[++r],n[++r]);a.__c&&a.__c(t,e),e.some((function(t){try{e=t.__h,t.__h=[],e.some((function(e){e.call(t)}))}catch(e){a.__e(e,t.__v)}}))}function U(e,t,n,r,i,l,s,c,u){var f,p,d,h,v,g,b,_=n.props,x=t.props,S=t.type;if("svg"===S?i="http://www.w3.org/2000/svg":"math"===S?i="http://www.w3.org/1998/Math/MathML":i||(i="http://www.w3.org/1999/xhtml"),null!=l)for(f=0;f<l.length;f++)if((v=l[f])&&"setAttribute"in v==!!S&&(S?v.localName===S:3===v.nodeType)){e=v,l[f]=null;break}if(null==e){if(null===S)return document.createTextNode(x);e=document.createElementNS(i,S,x.is&&x),c&&(a.__m&&a.__m(t,l),c=!1),l=null}if(null===S)_===x||c&&e.data===x||(e.data=x);else{if(l=l&&o.call(e.childNodes),_=n.props||m,!c&&null!=l)for(_={},f=0;f<e.attributes.length;f++)_[(v=e.attributes[f]).name]=v.value;for(f in _)if(v=_[f],"children"==f);else if("dangerouslySetInnerHTML"==f)d=v;else if(!(f in x)){if("value"==f&&"defaultValue"in x||"checked"==f&&"defaultChecked"in x)continue;$(e,f,null,v,i)}for(f in x)v=x[f],"children"==f?h=v:"dangerouslySetInnerHTML"==f?p=v:"value"==f?g=v:"checked"==f?b=v:c&&"function"!=typeof v||_[f]===v||$(e,f,v,_[f],i);if(p)c||d&&(p.__html===d.__html||p.__html===e.innerHTML)||(e.innerHTML=p.__html),t.__k=[];else if(d&&(e.innerHTML=""),I(e,y(h)?h:[h],t,n,r,"foreignObject"===S?"http://www.w3.org/1999/xhtml":i,l,s,l?l[0]:n.__k&&k(n,0),c,u),null!=l)for(f=l.length;f--;)w(l[f]);c||(f="value","progress"===S&&null==g?e.removeAttribute("value"):void 0!==g&&(g!==e[f]||"progress"===S&&!g||"option"===S&&g!==_[f])&&$(e,f,g,_[f],i),f="checked",void 0!==b&&b!==e[f]&&$(e,f,b,_[f],i))}return e}function q(e,t,n){try{if("function"==typeof e){var r="function"==typeof e.__u;r&&e.__u(),r&&null==t||(e.__u=e(t))}else e.current=t}catch(e){a.__e(e,n)}}function F(e,t,n){var r,i;if(a.unmount&&a.unmount(e),(r=e.ref)&&(r.current&&r.current!==e.__e||q(r,null,t)),null!=(r=e.__c)){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(e){a.__e(e,t)}r.base=r.__P=null}if(r=e.__k)for(i=0;i<r.length;i++)r[i]&&F(r[i],t,n||"function"!=typeof e.type);n||w(e.__e),e.__c=e.__=e.__e=e.__d=void 0}function B(e,t,n){return this.constructor(e,n)}function H(e,t,n){var r,i,l,s;a.__&&a.__(e,t),i=(r="function"==typeof n)?null:n&&n.__k||t.__k,l=[],s=[],M(t,e=(!r&&n||t).__k=x(O,null,[e]),i||m,m,t.namespaceURI,!r&&n?[n]:i?null:t.firstChild?o.call(t.childNodes):null,l,!r&&n?n:i?i.__e:t.firstChild,r,s),N(l,e,s)}function z(e,t){H(e,t,z)}function V(e,t,n){var r,i,a,l,s=_({},e.props);for(a in e.type&&e.type.defaultProps&&(l=e.type.defaultProps),t)"key"==a?r=t[a]:"ref"==a?i=t[a]:s[a]=void 0===t[a]&&void 0!==l?l[a]:t[a];return arguments.length>2&&(s.children=arguments.length>3?o.call(arguments,2):n),S(e.type,s,r||e.key,i||e.ref,null)}o=g.slice,a={__e:function(e,t,n,r){for(var i,o,a;t=t.__;)if((i=t.__c)&&!i.__)try{if((o=i.constructor)&&null!=o.getDerivedStateFromError&&(i.setState(o.getDerivedStateFromError(e)),a=i.__d),null!=i.componentDidCatch&&(i.componentDidCatch(e,r||{}),a=i.__d),a)return i.__E=i}catch(t){e=t}throw e}},l=0,j.prototype.setState=function(e,t){var n;n=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=_({},this.state),"function"==typeof e&&(e=e(_({},n),this.props)),e&&_(n,e),null!=e&&this.__v&&(t&&this._sb.push(t),E(this))},j.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),E(this))},j.prototype.render=O,s=[],u="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,f=function(e,t){return e.__v.__b-t.__v.__b},C.__r=0,p=0,d=R(!1),h=R(!0),v=0;var W,K,G,J,Q=0,Z=[],Y=a,X=Y.__b,ee=Y.__r,te=Y.diffed,ne=Y.__c,re=Y.unmount,ie=Y.__;function oe(e,t){Y.__h&&Y.__h(K,e,Q||t),Q=0;var n=K.__H||(K.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function ae(e){return Q=1,le(Se,e)}function le(e,t,n){var r=oe(W++,2);if(r.t=e,!r.__c&&(r.__=[n?n(t):Se(void 0,t),function(e){var t=r.__N?r.__N[0]:r.__[0],n=r.t(t,e);t!==n&&(r.__N=[n,r.__[1]],r.__c.setState({}))}],r.__c=K,!K.u)){var i=function(e,t,n){if(!r.__c.__H)return!0;var i=r.__c.__H.__.filter((function(e){return!!e.__c}));if(i.every((function(e){return!e.__N})))return!o||o.call(this,e,t,n);var a=!1;return i.forEach((function(e){if(e.__N){var t=e.__[0];e.__=e.__N,e.__N=void 0,t!==e.__[0]&&(a=!0)}})),!(!a&&r.__c.props===e)&&(!o||o.call(this,e,t,n))};K.u=!0;var o=K.shouldComponentUpdate,a=K.componentWillUpdate;K.componentWillUpdate=function(e,t,n){if(this.__e){var r=o;o=void 0,i(e,t,n),o=r}a&&a.call(this,e,t,n)},K.shouldComponentUpdate=i}return r.__N||r.__}function se(e,t){var n=oe(W++,3);!Y.__s&&xe(n.__H,t)&&(n.__=e,n.i=t,K.__H.__h.push(n))}function ce(e,t){var n=oe(W++,4);!Y.__s&&xe(n.__H,t)&&(n.__=e,n.i=t,K.__h.push(n))}function ue(e){return Q=5,pe((function(){return{current:e}}),[])}function fe(e,t,n){Q=6,ce((function(){return"function"==typeof e?(e(t()),function(){return e(null)}):e?(e.current=t(),function(){return e.current=null}):void 0}),null==n?n:n.concat(e))}function pe(e,t){var n=oe(W++,7);return xe(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function de(e,t){return Q=8,pe((function(){return e}),t)}function he(e){var t=K.context[e.__c],n=oe(W++,9);return n.c=e,t?(null==n.__&&(n.__=!0,t.sub(K)),t.props.value):e.__}function ve(e,t){Y.useDebugValue&&Y.useDebugValue(t?t(e):e)}function me(){var e=oe(W++,11);if(!e.__){for(var t=K.__v;null!==t&&!t.__m&&null!==t.__;)t=t.__;var n=t.__m||(t.__m=[0,0]);e.__="P"+n[0]+"-"+n[1]++}return e.__}function ge(){for(var e;e=Z.shift();)if(e.__P&&e.__H)try{e.__H.__h.forEach(_e),e.__H.__h.forEach(we),e.__H.__h=[]}catch(t){e.__H.__h=[],Y.__e(t,e.__v)}}Y.__b=function(e){K=null,X&&X(e)},Y.__=function(e,t){e&&t.__k&&t.__k.__m&&(e.__m=t.__k.__m),ie&&ie(e,t)},Y.__r=function(e){ee&&ee(e),W=0;var t=(K=e.__c).__H;t&&(G===K?(t.__h=[],K.__h=[],t.__.forEach((function(e){e.__N&&(e.__=e.__N),e.i=e.__N=void 0}))):(t.__h.forEach(_e),t.__h.forEach(we),t.__h=[],W=0)),G=K},Y.diffed=function(e){te&&te(e);var t=e.__c;t&&t.__H&&(t.__H.__h.length&&(1!==Z.push(t)&&J===Y.requestAnimationFrame||((J=Y.requestAnimationFrame)||ye)(ge)),t.__H.__.forEach((function(e){e.i&&(e.__H=e.i),e.i=void 0}))),G=K=null},Y.__c=function(e,t){t.some((function(e){try{e.__h.forEach(_e),e.__h=e.__h.filter((function(e){return!e.__||we(e)}))}catch(n){t.some((function(e){e.__h&&(e.__h=[])})),t=[],Y.__e(n,e.__v)}})),ne&&ne(e,t)},Y.unmount=function(e){re&&re(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.forEach((function(e){try{_e(e)}catch(e){t=e}})),n.__H=void 0,t&&Y.__e(t,n.__v))};var be="function"==typeof requestAnimationFrame;function ye(e){var t,n=function(){clearTimeout(r),be&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,100);be&&(t=requestAnimationFrame(n))}function _e(e){var t=K,n=e.__c;"function"==typeof n&&(e.__c=void 0,n()),K=t}function we(e){var t=K;e.__c=e.__(),K=t}function xe(e,t){return!e||e.length!==t.length||t.some((function(t,n){return t!==e[n]}))}function Se(e,t){return"function"==typeof t?t(e):t}function Oe(e,t){for(var n in e)if("__source"!==n&&!(n in t))return!0;for(var r in t)if("__source"!==r&&e[r]!==t[r])return!0;return!1}function je(e,t){this.props=e,this.context=t}(je.prototype=new j).isPureReactComponent=!0,je.prototype.shouldComponentUpdate=function(e,t){return Oe(this.props,e)||Oe(this.state,t)};var ke=a.__b;a.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),ke&&ke(e)};var Pe="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911,Ee=function(e,t){return null==e?null:T(T(e).map(t))},Ce={map:Ee,forEach:Ee,count:function(e){return e?T(e).length:0},only:function(e){var t=T(e);if(1!==t.length)throw"Children.only";return t[0]},toArray:T},Ie=a.__e;a.__e=function(e,t,n,r){if(e.then)for(var i,o=t;o=o.__;)if((i=o.__c)&&i.__c)return null==t.__e&&(t.__e=n.__e,t.__k=n.__k),i.__c(e,t);Ie(e,t,n,r)};var Ae=a.unmount;function Te(){this.__u=0,this.t=null,this.__b=null}function Le(e){var t=e.__.__c;return t&&t.__a&&t.__a(e)}function De(){this.u=null,this.o=null}a.unmount=function(e){var t=e.__c;t&&t.__R&&t.__R(),t&&32&e.__u&&(e.type=null),Ae&&Ae(e)},(Te.prototype=new j).__c=function(e,t){var n=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(n);var i=Le(r.__v),o=!1,a=function(){o||(o=!0,n.__R=null,i?i(l):l())};n.__R=a;var l=function(){if(!--r.__u){if(r.state.__a){var e=r.state.__a;r.__v.__k[0]=function e(t,n,r){return t&&r&&(t.__v=null,t.__k=t.__k&&t.__k.map((function(t){return e(t,n,r)})),t.__c&&t.__c.__P===n&&(t.__e&&r.appendChild(t.__e),t.__c.__e=!0,t.__c.__P=r)),t}(e,e.__c.__P,e.__c.__O)}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate()}};r.__u++||32&t.__u||r.setState({__a:r.__b=r.__v.__k[0]}),e.then(a,a)},Te.prototype.componentWillUnmount=function(){this.t=[]},Te.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function e(t,n,r){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach((function(e){"function"==typeof e.__c&&e.__c()})),t.__c.__H=null),null!=(t=function(e,t){for(var n in t)e[n]=t[n];return e}({},t)).__c&&(t.__c.__P===r&&(t.__c.__P=n),t.__c=null),t.__k=t.__k&&t.__k.map((function(t){return e(t,n,r)}))),t}(this.__b,n,r.__O=r.__P)}this.__b=null}var i=t.__a&&x(O,null,e.fallback);return i&&(i.__u&=-33),[x(O,null,t.__a?null:e.children),i]};var $e=function(e,t,n){if(++n[1]===n[0]&&e.o.delete(t),e.props.revealOrder&&("t"!==e.props.revealOrder[0]||!e.o.size))for(n=e.u;n;){for(;n.length>3;)n.pop()();if(n[1]<n[0])break;e.u=n=n[2]}};function Re(e){return this.getChildContext=function(){return e.context},e.children}function Me(e){var t=this,n=e.i;t.componentWillUnmount=function(){H(null,t.l),t.l=null,t.i=null},t.i&&t.i!==n&&t.componentWillUnmount(),t.l||(t.i=n,t.l={nodeType:1,parentNode:n,childNodes:[],contains:function(){return!0},appendChild:function(e){this.childNodes.push(e),t.i.appendChild(e)},insertBefore:function(e,n){this.childNodes.push(e),t.i.appendChild(e)},removeChild:function(e){this.childNodes.splice(this.childNodes.indexOf(e)>>>1,1),t.i.removeChild(e)}}),H(x(Re,{context:t.context},e.__v),t.l)}function Ne(e,t){var n=x(Me,{__v:e,i:t});return n.containerInfo=t,n}(De.prototype=new j).__a=function(e){var t=this,n=Le(t.__v),r=t.o.get(e);return r[0]++,function(i){var o=function(){t.props.revealOrder?(r.push(i),$e(t,e,r)):i()};n?n(o):o()}},De.prototype.render=function(e){this.u=null,this.o=new Map;var t=T(e.children);e.revealOrder&&"b"===e.revealOrder[0]&&t.reverse();for(var n=t.length;n--;)this.o.set(t[n],this.u=[1,0,this.u]);return e.children},De.prototype.componentDidUpdate=De.prototype.componentDidMount=function(){var e=this;this.o.forEach((function(t,n){$e(e,n,t)}))};var Ue="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,qe=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Fe=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,Be=/[A-Z0-9]/g,He="undefined"!=typeof document,ze=function(e){return("undefined"!=typeof Symbol&&"symbol"==i(Symbol())?/fil|che|rad/:/fil|che|ra/).test(e)};function Ve(e,t,n){return null==t.__k&&(t.textContent=""),H(e,t),"function"==typeof n&&n(),e?e.__c:null}j.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach((function(e){Object.defineProperty(j.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})}));var We=a.event;function Ke(){}function Ge(){return this.cancelBubble}function Je(){return this.defaultPrevented}a.event=function(e){return We&&(e=We(e)),e.persist=Ke,e.isPropagationStopped=Ge,e.isDefaultPrevented=Je,e.nativeEvent=e};var Qe,Ze={enumerable:!1,configurable:!0,get:function(){return this.class}},Ye=a.vnode;a.vnode=function(e){"string"==typeof e.type&&function(e){var t=e.props,n=e.type,r={},i=-1===n.indexOf("-");for(var o in t){var a=t[o];if(!("value"===o&&"defaultValue"in t&&null==a||He&&"children"===o&&"noscript"===n||"class"===o||"className"===o)){var l=o.toLowerCase();"defaultValue"===o&&"value"in t&&null==t.value?o="value":"download"===o&&!0===a?a="":"translate"===l&&"no"===a?a=!1:"o"===l[0]&&"n"===l[1]?"ondoubleclick"===l?o="ondblclick":"onchange"!==l||"input"!==n&&"textarea"!==n||ze(t.type)?"onfocus"===l?o="onfocusin":"onblur"===l?o="onfocusout":Fe.test(o)&&(o=l):l=o="oninput":i&&qe.test(o)?o=o.replace(Be,"-$&").toLowerCase():null===a&&(a=void 0),"oninput"===l&&r[o=l]&&(o="oninputCapture"),r[o]=a}}"select"==n&&r.multiple&&Array.isArray(r.value)&&(r.value=T(t.children).forEach((function(e){e.props.selected=-1!=r.value.indexOf(e.props.value)}))),"select"==n&&null!=r.defaultValue&&(r.value=T(t.children).forEach((function(e){e.props.selected=r.multiple?-1!=r.defaultValue.indexOf(e.props.value):r.defaultValue==e.props.value}))),t.class&&!t.className?(r.class=t.class,Object.defineProperty(r,"className",Ze)):(t.className&&!t.class||t.class&&t.className)&&(r.class=r.className=t.className),e.props=r}(e),e.$$typeof=Ue,Ye&&Ye(e)};var Xe=a.__r;a.__r=function(e){Xe&&Xe(e),Qe=e.__c};var et=a.diffed;a.diffed=function(e){et&&et(e);var t=e.props,n=e.__e;null!=n&&"textarea"===e.type&&"value"in t&&t.value!==n.value&&(n.value=null==t.value?"":t.value),Qe=null};var tt={ReactCurrentDispatcher:{current:{readContext:function(e){return Qe.__n[e.__c].props.value},useCallback:de,useContext:he,useDebugValue:ve,useDeferredValue:it,useEffect:se,useId:me,useImperativeHandle:fe,useInsertionEffect:at,useLayoutEffect:ce,useMemo:pe,useReducer:le,useRef:ue,useState:ae,useSyncExternalStore:lt,useTransition:ot}}};function nt(e){return!!e&&e.$$typeof===Ue}function rt(e){e()}function it(e){return e}function ot(){return[!1,rt]}var at=ce;function lt(e,t){var n=t(),r=ae({h:{__:n,v:t}}),i=r[0].h,o=r[1];return ce((function(){i.__=n,i.v=t,st(i)&&o({h:i})}),[e,n,t]),se((function(){return st(i)&&o({h:i}),e((function(){st(i)&&o({h:i})}))}),[e]),n}function st(e){var t,n,r=e.v,i=e.__;try{var o=r();return!((t=i)===(n=o)&&(0!==t||1/t==1/n)||t!=t&&n!=n)}catch(e){return!0}}var ct={useState:ae,useId:me,useReducer:le,useEffect:se,useLayoutEffect:ce,useInsertionEffect:at,useTransition:ot,useDeferredValue:it,useSyncExternalStore:lt,startTransition:rt,useRef:ue,useImperativeHandle:fe,useMemo:pe,useCallback:de,useContext:he,useDebugValue:ve,version:"18.3.1",Children:Ce,render:Ve,hydrate:function(e,t,n){return z(e,t),"function"==typeof n&&n(),e?e.__c:null},unmountComponentAtNode:function(e){return!!e.__k&&(H(null,e),!0)},createPortal:Ne,createElement:x,createContext:function(e,t){var n={__c:t="__cC"+v++,__:e,Consumer:function(e,t){return e.children(t)},Provider:function(e){var n,r;return this.getChildContext||(n=new Set,(r={})[t]=this,this.getChildContext=function(){return r},this.componentWillUnmount=function(){n=null},this.shouldComponentUpdate=function(e){this.props.value!==e.value&&n.forEach((function(e){e.__e=!0,E(e)}))},this.sub=function(e){n.add(e);var t=e.componentWillUnmount;e.componentWillUnmount=function(){n&&n.delete(e),t&&t.call(e)}}),e.children}};return n.Provider.__=n.Consumer.contextType=n},createFactory:function(e){return x.bind(null,e)},cloneElement:function(e){return nt(e)?V.apply(null,arguments):e},createRef:function(){return{current:null}},Fragment:O,isValidElement:nt,isElement:nt,isFragment:function(e){return nt(e)&&e.type===O},isMemo:function(e){return!!e&&!!e.displayName&&("string"==typeof e.displayName||e.displayName instanceof String)&&e.displayName.startsWith("Memo(")},findDOMNode:function(e){return e&&(e.base||1===e.nodeType&&e)||null},Component:j,PureComponent:je,memo:function(e,t){function n(e){var n=this.props.ref,r=n==e.ref;return!r&&n&&(n.call?n(null):n.current=null),t?!t(this.props,e)||!r:Oe(this.props,e)}function r(t){return this.shouldComponentUpdate=n,x(e,t)}return r.displayName="Memo("+(e.displayName||e.name)+")",r.prototype.isReactComponent=!0,r.__f=!0,r},forwardRef:function(e){function t(t){if(!("ref"in t))return e(t,null);var n=t.ref;delete t.ref;var r=e(t,n);return t.ref=n,r}return t.$$typeof=Pe,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(e.displayName||e.name)+")",t},flushSync:function(e,t){return e(t)},unstable_batchedUpdates:function(e,t){return e(t)},StrictMode:O,Suspense:Te,SuspenseList:De,lazy:function(e){var t,n,r;function i(i){if(t||(t=e()).then((function(e){n=e.default||e}),(function(e){r=e})),r)throw r;if(!n)throw t;return x(n,i)}return i.displayName="Lazy",i.__f=!0,i},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:tt};function ut(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function ft(e,t,n,r,i,o,a){try{var l=e[o](a),s=l.value}catch(e){return void n(e)}l.done?t(s):Promise.resolve(s).then(r,i)}function pt(e){return function(){var t=this,n=arguments;return new Promise((function(r,i){var o=e.apply(t,n);function a(e){ft(o,r,i,a,l,"next",e)}function l(e){ft(o,r,i,a,l,"throw",e)}a(void 0)}))}}function dt(e,t,n){return t=bt(t),function(e,t){if(t&&("object"==i(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,_t()?Reflect.construct(t,n||[],bt(e).constructor):t.apply(e,n))}function ht(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function vt(e,t,n){return Object.defineProperty(e,"prototype",{writable:!1}),e}function mt(e,t,n){return(t=function(e){var t=function(e){if("object"!=i(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==i(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function gt(){return(gt=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(null,arguments)}function bt(e){return(bt=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function yt(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&jt(e,t)}function _t(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(e){}return(_t=function(){return!!e})()}function wt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function xt(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?wt(Object(n),!0).forEach((function(t){mt(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):wt(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function St(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function Ot(){Ot=function(){return t};var e,t={},n=Object.prototype,r=n.hasOwnProperty,o=Object.defineProperty||function(e,t,n){e[t]=n.value},a="function"==typeof Symbol?Symbol:{},l=a.iterator||"@@iterator",s=a.asyncIterator||"@@asyncIterator",c=a.toStringTag||"@@toStringTag";function u(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{u({},"")}catch(e){u=function(e,t,n){return e[t]=n}}function f(e,t,n,r){var i=t&&t.prototype instanceof g?t:g,a=Object.create(i.prototype),l=new I(r||[]);return o(a,"_invoke",{value:k(e,n,l)}),a}function p(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}t.wrap=f;var d="suspendedStart",h="executing",v="completed",m={};function g(){}function b(){}function y(){}var _={};u(_,l,(function(){return this}));var w=Object.getPrototypeOf,x=w&&w(w(A([])));x&&x!==n&&r.call(x,l)&&(_=x);var S=y.prototype=g.prototype=Object.create(_);function O(e){["next","throw","return"].forEach((function(t){u(e,t,(function(e){return this._invoke(t,e)}))}))}function j(e,t){function n(o,a,l,s){var c=p(e[o],e,a);if("throw"!==c.type){var u=c.arg,f=u.value;return f&&"object"==i(f)&&r.call(f,"__await")?t.resolve(f.__await).then((function(e){n("next",e,l,s)}),(function(e){n("throw",e,l,s)})):t.resolve(f).then((function(e){u.value=e,l(u)}),(function(e){return n("throw",e,l,s)}))}s(c.arg)}var a;o(this,"_invoke",{value:function(e,r){function i(){return new t((function(t,i){n(e,r,t,i)}))}return a=a?a.then(i,i):i()}})}function k(t,n,r){var i=d;return function(o,a){if(i===h)throw Error("Generator is already running");if(i===v){if("throw"===o)throw a;return{value:e,done:!0}}for(r.method=o,r.arg=a;;){var l=r.delegate;if(l){var s=P(l,r);if(s){if(s===m)continue;return s}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(i===d)throw i=v,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);i=h;var c=p(t,n,r);if("normal"===c.type){if(i=r.done?v:"suspendedYield",c.arg===m)continue;return{value:c.arg,done:r.done}}"throw"===c.type&&(i=v,r.method="throw",r.arg=c.arg)}}}function P(t,n){var r=n.method,i=t.iterator[r];if(i===e)return n.delegate=null,"throw"===r&&t.iterator.return&&(n.method="return",n.arg=e,P(t,n),"throw"===n.method)||"return"!==r&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+r+"' method")),m;var o=p(i,t.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,m;var a=o.arg;return a?a.done?(n[t.resultName]=a.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,m):a:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,m)}function E(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function C(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function I(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(E,this),this.reset(!0)}function A(t){if(t||""===t){var n=t[l];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var o=-1,a=function n(){for(;++o<t.length;)if(r.call(t,o))return n.value=t[o],n.done=!1,n;return n.value=e,n.done=!0,n};return a.next=a}}throw new TypeError(i(t)+" is not iterable")}return b.prototype=y,o(S,"constructor",{value:y,configurable:!0}),o(y,"constructor",{value:b,configurable:!0}),b.displayName=u(y,c,"GeneratorFunction"),t.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===b||"GeneratorFunction"===(t.displayName||t.name))},t.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,y):(e.__proto__=y,u(e,c,"GeneratorFunction")),e.prototype=Object.create(S),e},t.awrap=function(e){return{__await:e}},O(j.prototype),u(j.prototype,s,(function(){return this})),t.AsyncIterator=j,t.async=function(e,n,r,i,o){void 0===o&&(o=Promise);var a=new j(f(e,n,r,i),o);return t.isGeneratorFunction(n)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},O(S),u(S,c,"Generator"),u(S,l,(function(){return this})),u(S,"toString",(function(){return"[object Generator]"})),t.keys=function(e){var t=Object(e),n=[];for(var r in t)n.push(r);return n.reverse(),function e(){for(;n.length;){var r=n.pop();if(r in t)return e.value=r,e.done=!1,e}return e.done=!0,e}},t.values=A,I.prototype={constructor:I,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(C),!t)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function i(r,i){return l.type="throw",l.arg=t,n.next=r,i&&(n.method="next",n.arg=e),!!i}for(var o=this.tryEntries.length-1;o>=0;--o){var a=this.tryEntries[o],l=a.completion;if("root"===a.tryLoc)return i("end");if(a.tryLoc<=this.prev){var s=r.call(a,"catchLoc"),c=r.call(a,"finallyLoc");if(s&&c){if(this.prev<a.catchLoc)return i(a.catchLoc,!0);if(this.prev<a.finallyLoc)return i(a.finallyLoc)}else if(s){if(this.prev<a.catchLoc)return i(a.catchLoc,!0)}else{if(!c)throw Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return i(a.finallyLoc)}}}},abrupt:function(e,t){for(var n=this.tryEntries.length-1;n>=0;--n){var i=this.tryEntries[n];if(i.tryLoc<=this.prev&&r.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var o=i;break}}o&&("break"===e||"continue"===e)&&o.tryLoc<=t&&t<=o.finallyLoc&&(o=null);var a=o?o.completion:{};return a.type=e,a.arg=t,o?(this.method="next",this.next=o.finallyLoc,m):this.complete(a)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),m},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),C(n),m}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var i=r.arg;C(n)}return i}}throw Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:A(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),m}},t}function jt(e,t){return(jt=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}function kt(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,a,l=[],s=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);s=!0);}catch(e){c=!0,i=e}finally{try{if(!s&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw i}}return l}}(e,t)||Et(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Pt(e){return function(e){if(Array.isArray(e))return ut(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||Et(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Et(e,t){if(e){if("string"==typeof e)return ut(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?ut(e,t):void 0}}function Ct(e){var t="function"==typeof Map?new Map:void 0;return(Ct=function(e){if(null===e||!function(e){try{return-1!==Function.toString.call(e).indexOf("[native code]")}catch(t){return"function"==typeof e}}(e))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return function(e,t,n){if(_t())return Reflect.construct.apply(null,arguments);var r=[null];r.push.apply(r,t);var i=new(e.bind.apply(e,r));return n&&jt(i,n.prototype),i}(e,arguments,bt(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),jt(n,e)})(e)}function It(){return ct.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},ct.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function At(){return ct.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20","aria-hidden":"true"},ct.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}var Tt=["translations"],Lt="Ctrl",Dt=ct.forwardRef((function(e,t){var n=e.translations,r=void 0===n?{}:n,i=St(e,Tt),o=r.buttonText,a=void 0===o?"Search":o,l=r.buttonAriaLabel,s=void 0===l?"Search":l,c=kt(ae(null),2),u=c[0],f=c[1];se((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?f("⌘"):f(Lt))}),[]);var p=kt(u===Lt?[Lt,"Ctrl",ct.createElement(It,null)]:["Meta","Command",u],3),d=p[0],h=p[1],v=p[2];return ct.createElement("button",gt({type:"button",className:"DocSearch DocSearch-Button","aria-label":"".concat(s," (").concat(h,"+K)")},i,{ref:t}),ct.createElement("span",{className:"DocSearch-Button-Container"},ct.createElement(At,null),ct.createElement("span",{className:"DocSearch-Button-Placeholder"},a)),ct.createElement("span",{className:"DocSearch-Button-Keys"},null!==u&&ct.createElement(ct.Fragment,null,ct.createElement($t,{reactsToKey:d},v),ct.createElement($t,{reactsToKey:"k"},"K"))))}));function $t(e){var t=e.reactsToKey,n=e.children,r=kt(ae(!1),2),i=r[0],o=r[1];return se((function(){if(t)return window.addEventListener("keydown",e),window.addEventListener("keyup",n),function(){window.removeEventListener("keydown",e),window.removeEventListener("keyup",n)};function e(e){e.key===t&&o(!0)}function n(e){e.key!==t&&"Meta"!==e.key||o(!1)}}),[t]),ct.createElement("kbd",{className:i?"DocSearch-Button-Key DocSearch-Button-Key--pressed":"DocSearch-Button-Key"},n)}function Rt(e,t){var n=void 0;return function(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];n&&clearTimeout(n),n=setTimeout((function(){return e.apply(void 0,i)}),t)}}function Mt(e){return e.reduce((function(e,t){return e.concat(t)}),[])}var Nt=0;function Ut(e){return 0===e.collections.length?0:e.collections.reduce((function(e,t){return e+t.items.length}),0)}function qt(e){return e!==Object(e)}var Ft=function(){},Bt=[{segment:"autocomplete-core",version:"1.17.7"}];function Ht(e){var t=e.item,n=e.items,r=void 0===n?[]:n;return{index:t.__autocomplete_indexName,items:[t],positions:[1+r.findIndex((function(e){return e.objectID===t.objectID}))],queryID:t.__autocomplete_queryID,algoliaSource:["autocomplete"]}}function zt(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var Vt=["items"],Wt=["items"];function Kt(e){return(Kt="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Gt(e){return function(e){if(Array.isArray(e))return Jt(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return Jt(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Jt(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Jt(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function Qt(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function Zt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Yt(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Zt(Object(n),!0).forEach((function(t){Xt(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Zt(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Xt(e,t,n){return(t=function(e){var t=function(e){if("object"!==Kt(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Kt(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Kt(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function en(e){return e.map((function(e){var t=e.items,n=Qt(e,Vt);return Yt(Yt({},n),{},{objectIDs:(null==t?void 0:t.map((function(e){return e.objectID})))||n.objectIDs})}))}function tn(e){var t=e.items.reduce((function(e,t){var n;return e[t.__autocomplete_indexName]=(null!==(n=e[t.__autocomplete_indexName])&&void 0!==n?n:[]).concat(t),e}),{});return Object.keys(t).map((function(e){return{index:e,items:t[e],algoliaSource:["autocomplete"]}}))}function nn(e){return e.objectID&&e.__autocomplete_indexName&&e.__autocomplete_queryID}function rn(e){return(rn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function on(e){return function(e){if(Array.isArray(e))return an(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return an(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?an(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function an(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function ln(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function sn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ln(Object(n),!0).forEach((function(t){cn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ln(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function cn(e,t,n){return(t=function(e){var t=function(e){if("object"!==rn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==rn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===rn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var un="https://cdn.jsdelivr.net/npm/search-insights@".concat("2.15.0","/dist/search-insights.min.js"),fn=Rt((function(e){var t=e.onItemsChange,n=e.items,r=e.insights,i=e.state;t({insights:r,insightsEvents:tn({items:n}).map((function(e){return sn({eventName:"Items Viewed"},e)})),state:i})}),400);function pn(e){var t=function(e){return sn({onItemsChange:function(e){var t=e.insights,n=e.insightsEvents,r=e.state;t.viewedObjectIDs.apply(t,on(n.map((function(e){return sn(sn({},e),{},{algoliaSource:dn(e.algoliaSource,r.context)})}))))},onSelect:function(e){var t=e.insights,n=e.insightsEvents,r=e.state;t.clickedObjectIDsAfterSearch.apply(t,on(n.map((function(e){return sn(sn({},e),{},{algoliaSource:dn(e.algoliaSource,r.context)})}))))},onActive:Ft,__autocomplete_clickAnalytics:!0},e)}(e),n=t.insightsClient,r=t.insightsInitParams,i=t.onItemsChange,o=t.onSelect,a=t.onActive,l=t.__autocomplete_clickAnalytics,s=n;if(n||"undefined"!=typeof window&&function(){var e={window:window}.window,t=e.AlgoliaAnalyticsObject||"aa";"string"==typeof t&&(s=e[t]),s||(e.AlgoliaAnalyticsObject=t,e[t]||(e[t]=function(){e[t].queue||(e[t].queue=[]);for(var n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];e[t].queue.push(r)}),e[t].version="2.15.0",s=e[t],function(e){var t="[Autocomplete]: Could not load search-insights.js. Please load it manually following https://alg.li/insights-autocomplete";try{var n=e.document.createElement("script");n.async=!0,n.src=un,n.onerror=function(){console.error(t)},document.body.appendChild(n)}catch(e){console.error(t)}}(e))}(),!s)return{};r&&s("init",sn({partial:!0},r));var c=function(e){var t,n,r,i=(t=function(e){return function(e){if(Array.isArray(e))return e}(e)||function(e){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,r,i,o,a=[],l=!0,s=!1;try{for(i=(t=t.call(e)).next;!(l=(n=i.call(t)).done)&&(a.push(n.value),2!==a.length);l=!0);}catch(e){s=!0,r=e}finally{try{if(!l&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(s)throw r}}return a}}(e)||function(e){if(e){if("string"==typeof e)return zt(e,2);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?zt(e,2):void 0}}(e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}((e.version||"").split(".").map(Number)),n=t[0],r=t[1],n>=3||2===n&&r>=4||1===n&&r>=10);function o(t,n,r){if(i&&void 0!==r){var o=r[0].__autocomplete_algoliaCredentials,a={"X-Algolia-Application-Id":o.appId,"X-Algolia-API-Key":o.apiKey};e.apply(void 0,[t].concat(Gt(n),[{headers:a}]))}else e.apply(void 0,[t].concat(Gt(n)))}return{init:function(t,n){e("init",{appId:t,apiKey:n})},setAuthenticatedUserToken:function(t){e("setAuthenticatedUserToken",t)},setUserToken:function(t){e("setUserToken",t)},clickedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];t.length>0&&o("clickedObjectIDsAfterSearch",en(t),t[0].items)},clickedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];t.length>0&&o("clickedObjectIDs",en(t),t[0].items)},clickedFilters:function(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];n.length>0&&e.apply(void 0,["clickedFilters"].concat(n))},convertedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];t.length>0&&o("convertedObjectIDsAfterSearch",en(t),t[0].items)},convertedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];t.length>0&&o("convertedObjectIDs",en(t),t[0].items)},convertedFilters:function(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];n.length>0&&e.apply(void 0,["convertedFilters"].concat(n))},viewedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];t.length>0&&t.reduce((function(e,t){var n=t.items,r=Qt(t,Wt);return[].concat(Gt(e),Gt(function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:20,n=[],r=0;r<e.objectIDs.length;r+=t)n.push(Yt(Yt({},e),{},{objectIDs:e.objectIDs.slice(r,r+t)}));return n}(Yt(Yt({},r),{},{objectIDs:(null==n?void 0:n.map((function(e){return e.objectID})))||r.objectIDs})).map((function(e){return{items:n,payload:e}}))))}),[]).forEach((function(e){var t=e.items;return o("viewedObjectIDs",[e.payload],t)}))},viewedFilters:function(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];n.length>0&&e.apply(void 0,["viewedFilters"].concat(n))}}}(s),u={current:[]},f=Rt((function(e){var t=e.state;if(t.isOpen){var n=t.collections.reduce((function(e,t){return[].concat(on(e),on(t.items))}),[]).filter(nn);(function e(t,n){if(t===n)return!0;if(qt(t)||qt(n)||"function"==typeof t||"function"==typeof n)return t===n;if(Object.keys(t).length!==Object.keys(n).length)return!1;for(var r=0,i=Object.keys(t);r<i.length;r++){var o=i[r];if(!(o in n))return!1;if(!e(t[o],n[o]))return!1}return!0})(u.current.map((function(e){return e.objectID})),n.map((function(e){return e.objectID})))||(u.current=n,n.length>0&&fn({onItemsChange:i,items:n,insights:c,state:t}))}}),0);return{name:"aa.algoliaInsightsPlugin",subscribe:function(e){var t=e.setContext,n=e.onSelect,r=e.onActive,i=!1;function u(e){t({algoliaInsightsPlugin:{__algoliaSearchParameters:sn(sn({},l?{clickAnalytics:!0}:{}),e?{userToken:hn(e)}:{}),insights:c}})}s("addAlgoliaAgent","insights-plugin"),u(),s("onUserTokenChange",(function(e){i||u(e)})),s("getUserToken",null,(function(e,t){i||u(t)})),s("onAuthenticatedUserTokenChange",(function(e){e?(i=!0,u(e)):(i=!1,s("getUserToken",null,(function(e,t){return u(t)})))})),s("getAuthenticatedUserToken",null,(function(e,t){t&&(i=!0,u(t))})),n((function(e){var t=e.item,n=e.state,r=e.event,i=e.source;nn(t)&&o({state:n,event:r,insights:c,item:t,insightsEvents:[sn({eventName:"Item Selected"},Ht({item:t,items:i.getItems().filter(nn)}))]})})),r((function(e){var t=e.item,n=e.source,r=e.state,i=e.event;nn(t)&&a({state:r,event:i,insights:c,item:t,insightsEvents:[sn({eventName:"Item Active"},Ht({item:t,items:n.getItems().filter(nn)}))]})}))},onStateChange:function(e){var t=e.state;f({state:t})},__autocomplete_pluginOptions:e}}function dn(){var e,t=arguments.length>1?arguments[1]:void 0;return[].concat(on(arguments.length>0&&void 0!==arguments[0]?arguments[0]:[]),["autocomplete-internal"],on(null!==(e=t.algoliaInsightsPlugin)&&void 0!==e&&e.__automaticInsights?["autocomplete-automatic"]:[]))}function hn(e){return"number"==typeof e?e.toString():e}function vn(e){return function e(t,n){var r=n;return{then:function(n,i){return e(t.then(mn(n,r,t),mn(i,r,t)),r)},catch:function(n){return e(t.catch(mn(n,r,t)),r)},finally:function(n){return n&&r.onCancelList.push(n),e(t.finally(mn(n&&function(){return r.onCancelList=[],n()},r,t)),r)},cancel:function(){r.isCanceled=!0;var e=r.onCancelList;r.onCancelList=[],e.forEach((function(e){e()}))},isCanceled:function(){return!0===r.isCanceled}}}(e,{isCanceled:!1,onCancelList:[]})}function mn(e,t,n){return e?function(n){return t.isCanceled?n:e(n)}:n}function gn(e,t,n,r){if(!n)return null;if(e<0&&(null===t||null!==r&&0===t))return n+e;var i=(null===t?-1:t)+e;return i<=-1||i>=n?null===r?null:0:i}function bn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function yn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?bn(Object(n),!0).forEach((function(t){_n(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):bn(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function _n(e,t,n){return(t=function(e){var t=function(e){if("object"!==wn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==wn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===wn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function wn(e){return(wn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function xn(e){var t=function(e){var t=e.collections.map((function(e){return e.items.length})).reduce((function(e,t,n){var r=(e[n-1]||0)+t;return e.push(r),e}),[]).reduce((function(t,n){return n<=e.activeItemId?t+1:t}),0);return e.collections[t]}(e);if(!t)return null;var n=t.items[function(e){for(var t=e.state,n=e.collection,r=!1,i=0,o=0;!1===r;){var a=t.collections[i];if(a===n){r=!0;break}o+=a.items.length,i++}return t.activeItemId-o}({state:e,collection:t})],r=t.source;return{item:n,itemInputValue:r.getItemInputValue({item:n,state:e}),itemUrl:r.getItemUrl({item:n,state:e}),source:r}}function Sn(e,t,n){return[e,null==n?void 0:n.sourceId,t].filter(Boolean).join("-").replace(/\s/g,"")}var On=/((gt|sm)-|galaxy nexus)|samsung[- ]|samsungbrowser/i;function jn(e){return e.nativeEvent||e}function kn(e){return(kn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Pn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function En(e,t,n){return(t=function(e){var t=function(e){if("object"!==kn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==kn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===kn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Cn(e){return(Cn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function In(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function An(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?In(Object(n),!0).forEach((function(t){Tn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):In(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Tn(e,t,n){return(t=function(e){var t=function(e){if("object"!==Cn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Cn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Cn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Ln(e){return(Ln="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Dn(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function $n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Rn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?$n(Object(n),!0).forEach((function(t){Mn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):$n(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Mn(e,t,n){return(t=function(e){var t=function(e){if("object"!==Ln(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Ln(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Ln(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Nn(e){return(Nn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Un(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function qn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Un(Object(n),!0).forEach((function(t){Fn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Un(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Fn(e,t,n){return(t=function(e){var t=function(e){if("object"!==Nn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Nn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Nn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Bn(e){return(Bn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Hn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function zn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Hn(Object(n),!0).forEach((function(t){Vn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Hn(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Vn(e,t,n){return(t=function(e){var t=function(e){if("object"!==Bn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Bn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Bn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Wn(e){return function(e){if(Array.isArray(e))return Kn(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return Kn(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Kn(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Kn(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function Gn(e){return Boolean(e.execute)}function Jn(e){var t=e.reduce((function(e,t){if(!Gn(t))return e.push(t),e;var n=t.searchClient,r=t.execute,i=t.requesterId,o=t.requests,a=e.find((function(e){return Gn(t)&&Gn(e)&&e.searchClient===n&&Boolean(i)&&e.requesterId===i}));if(a){var l;(l=a.items).push.apply(l,Wn(o))}else{var s={execute:r,requesterId:i,items:o,searchClient:n};e.push(s)}return e}),[]).map((function(e){if(!Gn(e))return Promise.resolve(e);var t=e,n=t.execute,r=t.items;return n({searchClient:t.searchClient,requests:r})}));return Promise.all(t).then((function(e){return Mt(e)}))}function Qn(e){return(Qn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}var Zn=["event","nextState","props","query","refresh","store"];function Yn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Xn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Yn(Object(n),!0).forEach((function(t){er(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Yn(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function er(e,t,n){return(t=function(e){var t=function(e){if("object"!==Qn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Qn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Qn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var tr,nr,rr,ir=null,or=(tr=-1,nr=-1,rr=void 0,function(e){var t=++tr;return Promise.resolve(e).then((function(e){return rr&&t<nr?rr:(nr=t,rr=e,e)}))});function ar(e){var t=e.event,n=e.nextState,r=void 0===n?{}:n,i=e.props,o=e.query,a=e.refresh,l=e.store,s=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(e,Zn);ir&&i.environment.clearTimeout(ir);var c=s.setCollections,u=s.setIsOpen,f=s.setQuery,p=s.setActiveItemId,d=s.setStatus,h=s.setContext;if(f(o),p(i.defaultActiveItemId),!o&&!1===i.openOnFocus){var v,m=l.getState().collections.map((function(e){return Xn(Xn({},e),{},{items:[]})}));d("idle"),c(m),u(null!==(v=r.isOpen)&&void 0!==v?v:i.shouldPanelOpen({state:l.getState()}));var g=vn(or(m).then((function(){return Promise.resolve()})));return l.pendingRequests.add(g)}d("loading"),ir=i.environment.setTimeout((function(){d("stalled")}),i.stallThreshold);var b=vn(or(i.getSources(Xn({query:o,refresh:a,state:l.getState()},s)).then((function(e){return Promise.all(e.map((function(e){return Promise.resolve(e.getItems(Xn({query:o,refresh:a,state:l.getState()},s))).then((function(t){return function(e,t,n){if(i=e,Boolean(null==i?void 0:i.execute)){var r="algolia"===e.requesterId?Object.assign.apply(Object,[{}].concat(Wn(Object.keys(n.context).map((function(e){var t;return null===(t=n.context[e])||void 0===t?void 0:t.__algoliaSearchParameters}))))):{};return zn(zn({},e),{},{requests:e.queries.map((function(n){return{query:"algolia"===e.requesterId?zn(zn({},n),{},{params:zn(zn({},r),n.params)}):n,sourceId:t,transformResponse:e.transformResponse}}))})}var i;return{items:e,sourceId:t}}(t,e.sourceId,l.getState())}))}))).then(Jn).then((function(t){var n,r=t.some((function(e){return function(e){return!Array.isArray(e)&&Boolean(null==e?void 0:e._automaticInsights)}(e.items)}));return r&&h({algoliaInsightsPlugin:Xn(Xn({},(null===(n=l.getState().context)||void 0===n?void 0:n.algoliaInsightsPlugin)||{}),{},{__automaticInsights:r})}),function(e,t,n){return t.map((function(t){var r,i=e.filter((function(e){return e.sourceId===t.sourceId})),o=i.map((function(e){return e.items})),a=i[0].transformResponse,l=a?a({results:r=o,hits:r.map((function(e){return e.hits})).filter(Boolean),facetHits:r.map((function(e){var t;return null===(t=e.facetHits)||void 0===t?void 0:t.map((function(e){return{label:e.value,count:e.count,_highlightResult:{label:{value:e.highlighted}}}}))})).filter(Boolean)}):o;return t.onResolve({source:t,results:o,items:l,state:n.getState()}),l.every(Boolean),'The `getItems` function from source "'.concat(t.sourceId,'" must return an array of items but returned ').concat(JSON.stringify(void 0),".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),{source:t,items:l}}))}(t,e,l)})).then((function(e){return function(e){var t=e.props,n=e.state,r=e.collections.reduce((function(e,t){return qn(qn({},e),{},Fn({},t.source.sourceId,qn(qn({},t.source),{},{getItems:function(){return Mt(t.items)}})))}),{}),i=t.plugins.reduce((function(e,t){return t.reshape?t.reshape(e):e}),{sourcesBySourceId:r,state:n}).sourcesBySourceId;return Mt(t.reshape({sourcesBySourceId:i,sources:Object.values(i),state:n})).filter(Boolean).map((function(e){return{source:e,items:e.getItems()}}))}({collections:e,props:i,state:l.getState()})}))})))).then((function(e){var n;d("idle"),c(e);var f=i.shouldPanelOpen({state:l.getState()});u(null!==(n=r.isOpen)&&void 0!==n?n:i.openOnFocus&&!o&&f||f);var p=xn(l.getState());if(null!==l.getState().activeItemId&&p){var h=p.item,v=p.itemInputValue,m=p.itemUrl,g=p.source;g.onActive(Xn({event:t,item:h,itemInputValue:v,itemUrl:m,refresh:a,source:g,state:l.getState()},s))}})).finally((function(){d("idle"),ir&&i.environment.clearTimeout(ir)}));return l.pendingRequests.add(b)}function lr(e){return(lr="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}var sr=["event","props","refresh","store"];function cr(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function ur(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?cr(Object(n),!0).forEach((function(t){fr(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):cr(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function fr(e,t,n){return(t=function(e){var t=function(e){if("object"!==lr(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==lr(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===lr(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function pr(e){return(pr="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}var dr=["props","refresh","store"],hr=["inputElement","formElement","panelElement"],vr=["inputElement"],mr=["inputElement","maxLength"],gr=["source"],br=["item","source"];function yr(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function _r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?yr(Object(n),!0).forEach((function(t){wr(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):yr(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function wr(e,t,n){return(t=function(e){var t=function(e){if("object"!==pr(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==pr(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===pr(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function xr(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function Sr(e){return(Sr="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Or(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function jr(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Or(Object(n),!0).forEach((function(t){kr(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Or(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function kr(e,t,n){return(t=function(e){var t=function(e){if("object"!==Sr(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Sr(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Sr(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Pr(e){var t,n,r,i,o=e.plugins,a=e.options,l=null===(t=((null===(n=a.__autocomplete_metadata)||void 0===n?void 0:n.userAgents)||[])[0])||void 0===t?void 0:t.segment,s=l?kr({},l,Object.keys((null===(r=a.__autocomplete_metadata)||void 0===r?void 0:r.options)||{})):{};return{plugins:o.map((function(e){return{name:e.name,options:Object.keys(e.__autocomplete_pluginOptions||[])}})),options:jr({"autocomplete-core":Object.keys(a)},s),ua:Bt.concat((null===(i=a.__autocomplete_metadata)||void 0===i?void 0:i.userAgents)||[])}}function Er(e){var t,n=e.state;return!1===n.isOpen||null===n.activeItemId?null:(null===(t=xn(n))||void 0===t?void 0:t.itemInputValue)||null}function Cr(e){return(Cr="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Ir(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Ar(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Ir(Object(n),!0).forEach((function(t){Tr(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Ir(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Tr(e,t,n){return(t=function(e){var t=function(e){if("object"!==Cr(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Cr(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Cr(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var Lr=function(e,t){switch(t.type){case"setActiveItemId":case"mousemove":return Ar(Ar({},e),{},{activeItemId:t.payload});case"setQuery":return Ar(Ar({},e),{},{query:t.payload,completion:null});case"setCollections":return Ar(Ar({},e),{},{collections:t.payload});case"setIsOpen":return Ar(Ar({},e),{},{isOpen:t.payload});case"setStatus":return Ar(Ar({},e),{},{status:t.payload});case"setContext":return Ar(Ar({},e),{},{context:Ar(Ar({},e.context),t.payload)});case"ArrowDown":var n=Ar(Ar({},e),{},{activeItemId:t.payload.hasOwnProperty("nextActiveItemId")?t.payload.nextActiveItemId:gn(1,e.activeItemId,Ut(e),t.props.defaultActiveItemId)});return Ar(Ar({},n),{},{completion:Er({state:n})});case"ArrowUp":var r=Ar(Ar({},e),{},{activeItemId:gn(-1,e.activeItemId,Ut(e),t.props.defaultActiveItemId)});return Ar(Ar({},r),{},{completion:Er({state:r})});case"Escape":return e.isOpen?Ar(Ar({},e),{},{activeItemId:null,isOpen:!1,completion:null}):Ar(Ar({},e),{},{activeItemId:null,query:"",status:"idle",collections:[]});case"submit":return Ar(Ar({},e),{},{activeItemId:null,isOpen:!1,status:"idle"});case"reset":return Ar(Ar({},e),{},{activeItemId:!0===t.props.openOnFocus?t.props.defaultActiveItemId:null,status:"idle",completion:null,query:""});case"focus":return Ar(Ar({},e),{},{activeItemId:t.props.defaultActiveItemId,isOpen:(t.props.openOnFocus||Boolean(e.query))&&t.props.shouldPanelOpen({state:e})});case"blur":return t.props.debug?e:Ar(Ar({},e),{},{isOpen:!1,activeItemId:null});case"mouseleave":return Ar(Ar({},e),{},{activeItemId:t.props.defaultActiveItemId});default:return"The reducer action ".concat(JSON.stringify(t.type)," is not supported."),e}};function Dr(e){return(Dr="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function $r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Rr(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?$r(Object(n),!0).forEach((function(t){Mr(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):$r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Mr(e,t,n){return(t=function(e){var t=function(e){if("object"!==Dr(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Dr(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Dr(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Nr(e){var t=e.translations,n=(void 0===t?{}:t).searchByText,r=void 0===n?"Search by":n;return ct.createElement("a",{href:"https://www.algolia.com/ref/docsearch/?utm_source=".concat(window.location.hostname,"&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch"),target:"_blank",rel:"noopener noreferrer"},ct.createElement("span",{className:"DocSearch-Label"},r),ct.createElement("svg",{width:"77",height:"19","aria-label":"Algolia",role:"img",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 2196.2 500"},ct.createElement("defs",null,ct.createElement("style",null,".cls-1,.cls-2{fill:#003dff;}.cls-2{fill-rule:evenodd;}")),ct.createElement("path",{className:"cls-2",d:"M1070.38,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z"}),ct.createElement("rect",{className:"cls-1",x:"1845.88",y:"104.73",width:"62.58",height:"277.9",rx:"5.9",ry:"5.9"}),ct.createElement("path",{className:"cls-2",d:"M1851.78,71.38h50.77c3.26,0,5.9-2.64,5.9-5.9V5.9c0-3.62-3.24-6.39-6.82-5.83l-50.77,7.95c-2.87,.45-4.99,2.92-4.99,5.83v51.62c0,3.26,2.64,5.9,5.9,5.9Z"}),ct.createElement("path",{className:"cls-2",d:"M1764.03,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z"}),ct.createElement("path",{className:"cls-2",d:"M1631.95,142.72c-11.14-12.25-24.83-21.65-40.78-28.31-15.92-6.53-33.26-9.85-52.07-9.85-18.78,0-36.15,3.17-51.92,9.85-15.59,6.66-29.29,16.05-40.76,28.31-11.47,12.23-20.38,26.87-26.76,44.03-6.38,17.17-9.24,37.37-9.24,58.36,0,20.99,3.19,36.87,9.55,54.21,6.38,17.32,15.14,32.11,26.45,44.36,11.29,12.23,24.83,21.62,40.6,28.46,15.77,6.83,40.12,10.33,52.4,10.48,12.25,0,36.78-3.82,52.7-10.48,15.92-6.68,29.46-16.23,40.78-28.46,11.29-12.25,20.05-27.04,26.25-44.36,6.22-17.34,9.24-33.22,9.24-54.21,0-20.99-3.34-41.19-10.03-58.36-6.38-17.17-15.14-31.8-26.43-44.03Zm-44.43,163.75c-11.47,15.75-27.56,23.7-48.09,23.7-20.55,0-36.63-7.8-48.1-23.7-11.47-15.75-17.21-34.01-17.21-61.2,0-26.89,5.59-49.14,17.06-64.87,11.45-15.75,27.54-23.52,48.07-23.52,20.55,0,36.63,7.78,48.09,23.52,11.47,15.57,17.36,37.98,17.36,64.87,0,27.19-5.72,45.3-17.19,61.2Z"}),ct.createElement("path",{className:"cls-2",d:"M894.42,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z"}),ct.createElement("path",{className:"cls-2",d:"M2133.97,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z"}),ct.createElement("path",{className:"cls-2",d:"M1314.05,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-11.79,18.34-19.6,39.64-22.11,62.59-.58,5.3-.88,10.68-.88,16.14s.31,11.15,.93,16.59c4.28,38.09,23.14,71.61,50.66,94.52,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47h0c17.99,0,34.61-5.93,48.16-15.97,16.29-11.58,28.88-28.54,34.48-47.75v50.26h-.11v11.08c0,21.84-5.71,38.27-17.34,49.36-11.61,11.08-31.04,16.63-58.25,16.63-11.12,0-28.79-.59-46.6-2.41-2.83-.29-5.46,1.5-6.27,4.22l-12.78,43.11c-1.02,3.46,1.27,7.02,4.83,7.53,21.52,3.08,42.52,4.68,54.65,4.68,48.91,0,85.16-10.75,108.89-32.21,21.48-19.41,33.15-48.89,35.2-88.52V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,64.1s.65,139.13,0,143.36c-12.08,9.77-27.11,13.59-43.49,14.7-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-1.32,0-2.63-.03-3.94-.1-40.41-2.11-74.52-37.26-74.52-79.38,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33Z"}),ct.createElement("path",{className:"cls-1",d:"M249.83,0C113.3,0,2,110.09,.03,246.16c-2,138.19,110.12,252.7,248.33,253.5,42.68,.25,83.79-10.19,120.3-30.03,3.56-1.93,4.11-6.83,1.08-9.51l-23.38-20.72c-4.75-4.21-11.51-5.4-17.36-2.92-25.48,10.84-53.17,16.38-81.71,16.03-111.68-1.37-201.91-94.29-200.13-205.96,1.76-110.26,92-199.41,202.67-199.41h202.69V407.41l-115-102.18c-3.72-3.31-9.42-2.66-12.42,1.31-18.46,24.44-48.53,39.64-81.93,37.34-46.33-3.2-83.87-40.5-87.34-86.81-4.15-55.24,39.63-101.52,94-101.52,49.18,0,89.68,37.85,93.91,85.95,.38,4.28,2.31,8.27,5.52,11.12l29.95,26.55c3.4,3.01,8.79,1.17,9.63-3.3,2.16-11.55,2.92-23.58,2.07-35.92-4.82-70.34-61.8-126.93-132.17-131.26-80.68-4.97-148.13,58.14-150.27,137.25-2.09,77.1,61.08,143.56,138.19,145.26,32.19,.71,62.03-9.41,86.14-26.95l150.26,133.2c6.44,5.71,16.61,1.14,16.61-7.47V9.48C499.66,4.25,495.42,0,490.18,0H249.83Z"})))}function Ur(e){return ct.createElement("svg",{width:"15",height:"15","aria-label":e.ariaLabel,role:"img"},ct.createElement("g",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.2"},e.children))}function qr(e){var t=e.translations,n=void 0===t?{}:t,r=n.selectText,i=void 0===r?"to select":r,o=n.selectKeyAriaLabel,a=void 0===o?"Enter key":o,l=n.navigateText,s=void 0===l?"to navigate":l,c=n.navigateUpKeyAriaLabel,u=void 0===c?"Arrow up":c,f=n.navigateDownKeyAriaLabel,p=void 0===f?"Arrow down":f,d=n.closeText,h=void 0===d?"to close":d,v=n.closeKeyAriaLabel,m=void 0===v?"Escape key":v,g=n.searchByText,b=void 0===g?"Search by":g;return ct.createElement(ct.Fragment,null,ct.createElement("div",{className:"DocSearch-Logo"},ct.createElement(Nr,{translations:{searchByText:b}})),ct.createElement("ul",{className:"DocSearch-Commands"},ct.createElement("li",null,ct.createElement("kbd",{className:"DocSearch-Commands-Key"},ct.createElement(Ur,{ariaLabel:a},ct.createElement("path",{d:"M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"}))),ct.createElement("span",{className:"DocSearch-Label"},i)),ct.createElement("li",null,ct.createElement("kbd",{className:"DocSearch-Commands-Key"},ct.createElement(Ur,{ariaLabel:p},ct.createElement("path",{d:"M7.5 3.5v8M10.5 8.5l-3 3-3-3"}))),ct.createElement("kbd",{className:"DocSearch-Commands-Key"},ct.createElement(Ur,{ariaLabel:u},ct.createElement("path",{d:"M7.5 11.5v-8M10.5 6.5l-3-3-3 3"}))),ct.createElement("span",{className:"DocSearch-Label"},s)),ct.createElement("li",null,ct.createElement("kbd",{className:"DocSearch-Commands-Key"},ct.createElement(Ur,{ariaLabel:m},ct.createElement("path",{d:"M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"}))),ct.createElement("span",{className:"DocSearch-Label"},h))))}function Fr(e){var t=e.hit,n=e.children;return ct.createElement("a",{href:t.url},n)}function Br(){return ct.createElement("svg",{viewBox:"0 0 38 38",stroke:"currentColor",strokeOpacity:".5"},ct.createElement("g",{fill:"none",fillRule:"evenodd"},ct.createElement("g",{transform:"translate(1 1)",strokeWidth:"2"},ct.createElement("circle",{strokeOpacity:".3",cx:"18",cy:"18",r:"18"}),ct.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18"},ct.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"})))))}function Hr(){return ct.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},ct.createElement("path",{d:"M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0"}),ct.createElement("path",{d:"M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13"})))}function zr(){return ct.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("path",{d:"M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Vr(){return ct.createElement("svg",{className:"DocSearch-Hit-Select-Icon",width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},ct.createElement("path",{d:"M18 3v4c0 2-2 4-4 4H2"}),ct.createElement("path",{d:"M8 17l-6-6 6-6"})))}var Wr=function(){return ct.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("path",{d:"M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))};function Kr(e){switch(e.type){case"lvl1":return ct.createElement(Wr,null);case"content":return ct.createElement(Jr,null);default:return ct.createElement(Gr,null)}}function Gr(){return ct.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("path",{d:"M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Jr(){return ct.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("path",{d:"M17 5H3h14zm0 5H3h14zm0 5H3h14z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function Qr(){return ct.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("path",{d:"M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function Zr(){return ct.createElement("svg",{width:"40",height:"40",viewBox:"0 0 20 20",fill:"none",fillRule:"evenodd",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"},ct.createElement("path",{d:"M19 4.8a16 16 0 00-2-1.2m-3.3-1.2A16 16 0 001.1 4.7M16.7 8a12 12 0 00-2.8-1.4M10 6a12 12 0 00-6.7 2M12.3 14.7a4 4 0 00-4.5 0M14.5 11.4A8 8 0 0010 10M3 16L18 2M10 18h0"}))}function Yr(){return ct.createElement("svg",{width:"40",height:"40",viewBox:"0 0 20 20",fill:"none",fillRule:"evenodd",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"},ct.createElement("path",{d:"M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"}))}function Xr(e){var t=e.translations,n=void 0===t?{}:t,r=n.titleText,i=void 0===r?"Unable to fetch results":r,o=n.helpText,a=void 0===o?"You might want to check your network connection.":o;return ct.createElement("div",{className:"DocSearch-ErrorScreen"},ct.createElement("div",{className:"DocSearch-Screen-Icon"},ct.createElement(Zr,null)),ct.createElement("p",{className:"DocSearch-Title"},i),ct.createElement("p",{className:"DocSearch-Help"},a))}var ei=["translations"];function ti(e){var t=e.translations,n=void 0===t?{}:t,r=St(e,ei),i=n.noResultsText,o=void 0===i?"No results for":i,a=n.suggestedQueryText,l=void 0===a?"Try searching for":a,s=n.reportMissingResultsText,c=void 0===s?"Believe this query should return results?":s,u=n.reportMissingResultsLinkText,f=void 0===u?"Let us know.":u,p=r.state.context.searchSuggestions;return ct.createElement("div",{className:"DocSearch-NoResults"},ct.createElement("div",{className:"DocSearch-Screen-Icon"},ct.createElement(Yr,null)),ct.createElement("p",{className:"DocSearch-Title"},o,' "',ct.createElement("strong",null,r.state.query),'"'),p&&p.length>0&&ct.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},ct.createElement("p",{className:"DocSearch-Help"},l,":"),ct.createElement("ul",null,p.slice(0,3).reduce((function(e,t){return[].concat(Pt(e),[ct.createElement("li",{key:t},ct.createElement("button",{className:"DocSearch-Prefill",key:t,type:"button",onClick:function(){r.setQuery(t.toLowerCase()+" "),r.refresh(),r.inputRef.current.focus()}},t))])}),[]))),r.getMissingResultsUrl&&ct.createElement("p",{className:"DocSearch-Help"},"".concat(c," "),ct.createElement("a",{href:r.getMissingResultsUrl({query:r.state.query}),target:"_blank",rel:"noopener noreferrer"},f)))}var ni=["hit","attribute","tagName"];function ri(e,t){return t.split(".").reduce((function(e,t){return null!=e&&e[t]?e[t]:null}),e)}function ii(e){var t=e.hit,n=e.attribute,r=e.tagName;return x(void 0===r?"span":r,xt(xt({},St(e,ni)),{},{dangerouslySetInnerHTML:{__html:ri(t,"_snippetResult.".concat(n,".value"))||ri(t,n)}}))}function oi(e){return e.collection&&0!==e.collection.items.length?ct.createElement("section",{className:"DocSearch-Hits"},ct.createElement("div",{className:"DocSearch-Hit-source"},e.title),ct.createElement("ul",e.getListProps(),e.collection.items.map((function(t,n){return ct.createElement(ai,gt({key:[e.title,t.objectID].join(":"),item:t,index:n},e))})))):null}function ai(e){var t=e.item,n=e.index,r=e.renderIcon,i=e.renderAction,o=e.getItemProps,a=e.onItemClick,l=e.collection,s=e.hitComponent,c=kt(ct.useState(!1),2),u=c[0],f=c[1],p=kt(ct.useState(!1),2),d=p[0],h=p[1],v=ct.useRef(null),m=s;return ct.createElement("li",gt({className:["DocSearch-Hit",t.__docsearch_parent&&"DocSearch-Hit--Child",u&&"DocSearch-Hit--deleting",d&&"DocSearch-Hit--favoriting"].filter(Boolean).join(" "),onTransitionEnd:function(){v.current&&v.current()}},o({item:t,source:l.source,onClick:function(e){a(t,e)}})),ct.createElement(m,{hit:t},ct.createElement("div",{className:"DocSearch-Hit-Container"},r({item:t,index:n}),t.hierarchy[t.type]&&"lvl1"===t.type&&ct.createElement("div",{className:"DocSearch-Hit-content-wrapper"},ct.createElement(ii,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.lvl1"}),t.content&&ct.createElement(ii,{className:"DocSearch-Hit-path",hit:t,attribute:"content"})),t.hierarchy[t.type]&&("lvl2"===t.type||"lvl3"===t.type||"lvl4"===t.type||"lvl5"===t.type||"lvl6"===t.type)&&ct.createElement("div",{className:"DocSearch-Hit-content-wrapper"},ct.createElement(ii,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.".concat(t.type)}),ct.createElement(ii,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),"content"===t.type&&ct.createElement("div",{className:"DocSearch-Hit-content-wrapper"},ct.createElement(ii,{className:"DocSearch-Hit-title",hit:t,attribute:"content"}),ct.createElement(ii,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),i({item:t,runDeleteTransition:function(e){f(!0),v.current=e},runFavoriteTransition:function(e){h(!0),v.current=e}}))))}function li(e,t,n){return e.reduce((function(e,r){var i=t(r);return e.hasOwnProperty(i)||(e[i]=[]),e[i].length<(n||5)&&e[i].push(r),e}),{})}function si(e){return e}function ci(e){return 1===e.button||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey}function ui(){}var fi=/(<mark>|<\/mark>)/g,pi=RegExp(fi.source);function di(e){var t,n,r=e;if(!r.__docsearch_parent&&!e._highlightResult)return e.hierarchy.lvl0;var i=r.__docsearch_parent?null===(t=r.__docsearch_parent)||void 0===t||null===(t=t._highlightResult)||void 0===t||null===(t=t.hierarchy)||void 0===t?void 0:t.lvl0:null===(n=e._highlightResult)||void 0===n||null===(n=n.hierarchy)||void 0===n?void 0:n.lvl0;return i?i.value&&pi.test(i.value)?i.value.replace(fi,""):i.value:e.hierarchy.lvl0}function hi(e){return ct.createElement("div",{className:"DocSearch-Dropdown-Container"},e.state.collections.map((function(t){if(0===t.items.length)return null;var n=di(t.items[0]);return ct.createElement(oi,gt({},e,{key:t.source.sourceId,title:n,collection:t,renderIcon:function(e){var n,r=e.item,i=e.index;return ct.createElement(ct.Fragment,null,r.__docsearch_parent&&ct.createElement("svg",{className:"DocSearch-Hit-Tree",viewBox:"0 0 24 54"},ct.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},r.__docsearch_parent!==(null===(n=t.items[i+1])||void 0===n?void 0:n.__docsearch_parent)?ct.createElement("path",{d:"M8 6v21M20 27H8.3"}):ct.createElement("path",{d:"M8 6v42M20 27H8.3"}))),ct.createElement("div",{className:"DocSearch-Hit-icon"},ct.createElement(Kr,{type:r.type})))},renderAction:function(){return ct.createElement("div",{className:"DocSearch-Hit-action"},ct.createElement(Vr,null))}}))})),e.resultsFooterComponent&&ct.createElement("section",{className:"DocSearch-HitsFooter"},ct.createElement(e.resultsFooterComponent,{state:e.state})))}var vi=["translations"];function mi(e){var t=e.translations,n=void 0===t?{}:t,r=St(e,vi),i=n.recentSearchesTitle,o=void 0===i?"Recent":i,a=n.noRecentSearchesText,l=void 0===a?"No recent searches":a,s=n.saveRecentSearchButtonTitle,c=void 0===s?"Save this search":s,u=n.removeRecentSearchButtonTitle,f=void 0===u?"Remove this search from history":u,p=n.favoriteSearchesTitle,d=void 0===p?"Favorite":p,h=n.removeFavoriteSearchButtonTitle,v=void 0===h?"Remove this search from favorites":h;return"idle"===r.state.status&&!1===r.hasCollections?r.disableUserPersonalization?null:ct.createElement("div",{className:"DocSearch-StartScreen"},ct.createElement("p",{className:"DocSearch-Help"},l)):!1===r.hasCollections?null:ct.createElement("div",{className:"DocSearch-Dropdown-Container"},ct.createElement(oi,gt({},r,{title:o,collection:r.state.collections[0],renderIcon:function(){return ct.createElement("div",{className:"DocSearch-Hit-icon"},ct.createElement(Hr,null))},renderAction:function(e){var t=e.item,n=e.runFavoriteTransition,i=e.runDeleteTransition;return ct.createElement(ct.Fragment,null,ct.createElement("div",{className:"DocSearch-Hit-action"},ct.createElement("button",{className:"DocSearch-Hit-action-button",title:c,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),n((function(){r.favoriteSearches.add(t),r.recentSearches.remove(t),r.refresh()}))}},ct.createElement(Qr,null))),ct.createElement("div",{className:"DocSearch-Hit-action"},ct.createElement("button",{className:"DocSearch-Hit-action-button",title:f,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),i((function(){r.recentSearches.remove(t),r.refresh()}))}},ct.createElement(zr,null))))}})),ct.createElement(oi,gt({},r,{title:d,collection:r.state.collections[1],renderIcon:function(){return ct.createElement("div",{className:"DocSearch-Hit-icon"},ct.createElement(Qr,null))},renderAction:function(e){var t=e.item,n=e.runDeleteTransition;return ct.createElement("div",{className:"DocSearch-Hit-action"},ct.createElement("button",{className:"DocSearch-Hit-action-button",title:v,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),n((function(){r.favoriteSearches.remove(t),r.refresh()}))}},ct.createElement(zr,null)))}})))}var gi=["translations"],bi=ct.memo((function(e){var t=e.translations,n=void 0===t?{}:t,r=St(e,gi);if("error"===r.state.status)return ct.createElement(Xr,{translations:null==n?void 0:n.errorScreen});var i=r.state.collections.some((function(e){return e.items.length>0}));return r.state.query?!1===i?ct.createElement(ti,gt({},r,{translations:null==n?void 0:n.noResultsScreen})):ct.createElement(hi,r):ct.createElement(mi,gt({},r,{hasCollections:i,translations:null==n?void 0:n.startScreen}))}),(function(e,t){return"loading"===t.state.status||"stalled"===t.state.status})),yi=["translations"];function _i(e){var t=e.translations,n=void 0===t?{}:t,r=St(e,yi),i=n.resetButtonTitle,o=void 0===i?"Clear the query":i,a=n.resetButtonAriaLabel,l=void 0===a?"Clear the query":a,s=n.cancelButtonText,c=void 0===s?"Cancel":s,u=n.cancelButtonAriaLabel,f=void 0===u?"Cancel":u,p=n.searchInputLabel,d=void 0===p?"Search":p,h=r.getFormProps({inputElement:r.inputRef.current}).onReset;return ct.useEffect((function(){r.autoFocus&&r.inputRef.current&&r.inputRef.current.focus()}),[r.autoFocus,r.inputRef]),ct.useEffect((function(){r.isFromSelection&&r.inputRef.current&&r.inputRef.current.select()}),[r.isFromSelection,r.inputRef]),ct.createElement(ct.Fragment,null,ct.createElement("form",{className:"DocSearch-Form",onSubmit:function(e){e.preventDefault()},onReset:h},ct.createElement("label",gt({className:"DocSearch-MagnifierLabel"},r.getLabelProps()),ct.createElement(At,null),ct.createElement("span",{className:"DocSearch-VisuallyHiddenForAccessibility"},d)),ct.createElement("div",{className:"DocSearch-LoadingIndicator"},ct.createElement(Br,null)),ct.createElement("input",gt({className:"DocSearch-Input",ref:r.inputRef},r.getInputProps({inputElement:r.inputRef.current,autoFocus:r.autoFocus,maxLength:64}))),ct.createElement("button",{type:"reset",title:o,className:"DocSearch-Reset","aria-label":l,hidden:!r.state.query},ct.createElement(zr,null))),ct.createElement("button",{className:"DocSearch-Cancel",type:"reset","aria-label":f,onClick:r.onClose},c))}var wi=["_highlightResult","_snippetResult"];function xi(e){var t=e.key,n=e.limit,r=void 0===n?5:n,i=function(e){return!1===function(){var e="__TEST_KEY__";try{return localStorage.setItem(e,""),localStorage.removeItem(e),!0}catch(e){return!1}}()?{setItem:function(){},getItem:function(){return[]}}:{setItem:function(t){return window.localStorage.setItem(e,JSON.stringify(t))},getItem:function(){var t=window.localStorage.getItem(e);return t?JSON.parse(t):[]}}}(t),o=i.getItem().slice(0,r);return{add:function(e){var t=e;t._highlightResult,t._snippetResult;var n=St(t,wi),a=o.findIndex((function(e){return e.objectID===n.objectID}));a>-1&&o.splice(a,1),o.unshift(n),o=o.slice(0,r),i.setItem(o)},remove:function(e){o=o.filter((function(t){return t.objectID!==e.objectID})),i.setItem(o)},getAll:function(){return o}}}function Si(e){var t,n="algolia-client-js-".concat(e.key);function r(){return void 0===t&&(t=e.localStorage||window.localStorage),t}function i(){return JSON.parse(r().getItem(n)||"{}")}function o(e){r().setItem(n,JSON.stringify(e))}return{get:function(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){var n,r,a;return n=e.timeToLive?1e3*e.timeToLive:null,r=i(),o(a=Object.fromEntries(Object.entries(r).filter((function(e){return void 0!==kt(e,2)[1].timestamp})))),n&&o(Object.fromEntries(Object.entries(a).filter((function(e){var t=kt(e,2)[1],r=(new Date).getTime();return!(t.timestamp+n<r)})))),i()[JSON.stringify(t)]})).then((function(e){return Promise.all([e?e.value:n(),void 0!==e])})).then((function(e){var t=kt(e,2),n=t[0],i=t[1];return Promise.all([n,i||r.miss(n)])})).then((function(e){return kt(e,1)[0]}))},set:function(e,t){return Promise.resolve().then((function(){var o=i();return o[JSON.stringify(e)]={timestamp:(new Date).getTime(),value:t},r().setItem(n,JSON.stringify(o)),t}))},delete:function(e){return Promise.resolve().then((function(){var t=i();delete t[JSON.stringify(e)],r().setItem(n,JSON.stringify(t))}))},clear:function(){return Promise.resolve().then((function(){r().removeItem(n)}))}}}function Oi(e){var t=Pt(e.caches),n=t.shift();return void 0===n?{get:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return t().then((function(e){return Promise.all([e,n.miss(e)])})).then((function(e){return kt(e,1)[0]}))},set:function(e,t){return Promise.resolve(t)},delete:function(e){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(e,r){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return n.get(e,r,i).catch((function(){return Oi({caches:t}).get(e,r,i)}))},set:function(e,r){return n.set(e,r).catch((function(){return Oi({caches:t}).set(e,r)}))},delete:function(e){return n.delete(e).catch((function(){return Oi({caches:t}).delete(e)}))},clear:function(){return n.clear().catch((function(){return Oi({caches:t}).clear()}))}}}function ji(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},t={};return{get:function(n,r){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},o=JSON.stringify(n);if(o in t)return Promise.resolve(e.serializable?JSON.parse(t[o]):t[o]);var a=r();return a.then((function(e){return i.miss(e)})).then((function(){return a}))},set:function(n,r){return t[JSON.stringify(n)]=e.serializable?JSON.stringify(r):r,Promise.resolve(r)},delete:function(e){return delete t[JSON.stringify(e)],Promise.resolve()},clear:function(){return t={},Promise.resolve()}}}function ki(e){var t=e.algoliaAgents,n=e.client,r=e.version,i=function(e){var t={value:"Algolia for JavaScript (".concat(e,")"),add:function(e){var n="; ".concat(e.segment).concat(void 0!==e.version?" (".concat(e.version,")"):"");return-1===t.value.indexOf(n)&&(t.value="".concat(t.value).concat(n)),t}};return t}(r).add({segment:n,version:r});return t.forEach((function(e){return i.add(e)})),i}var Pi=12e4;function Ei(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"up",n=Date.now();return xt(xt({},e),{},{status:t,lastUpdate:n,isUp:function(){return"up"===t||Date.now()-n>Pi},isTimedOut:function(){return"timed out"===t&&Date.now()-n<=Pi}})}var Ci=function(){function e(t,n){var r;return ht(this,e),mt(r=dt(this,e,[t]),"name","AlgoliaError"),n&&(r.name=n),r}return yt(e,Ct(Error)),vt(e)}(),Ii=function(){function e(t,n,r){var i;return ht(this,e),mt(i=dt(this,e,[t,r]),"stackTrace",void 0),i.stackTrace=n,i}return yt(e,Ci),vt(e)}(),Ai=function(){function e(t){return ht(this,e),dt(this,e,["Unreachable hosts - your application id may be incorrect. If the error persists, please reach out to the Algolia Support team: https://alg.li/support.",t,"RetryError"])}return yt(e,Ii),vt(e)}(),Ti=function(){function e(t,n,r){var i,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"ApiError";return ht(this,e),mt(i=dt(this,e,[t,r,o]),"status",void 0),i.status=n,i}return yt(e,Ii),vt(e)}(),Li=function(){function e(t,n){var r;return ht(this,e),mt(r=dt(this,e,[t,"DeserializationError"]),"response",void 0),r.response=n,r}return yt(e,Ci),vt(e)}(),Di=function(){function e(t,n,r,i){var o;return ht(this,e),mt(o=dt(this,e,[t,n,i,"DetailedApiError"]),"error",void 0),o.error=r,o}return yt(e,Ti),vt(e)}();function $i(e,t,n){var r,i=(r=n,Object.keys(r).filter((function(e){return void 0!==r[e]})).sort().map((function(e){return"".concat(e,"=").concat(encodeURIComponent("[object Array]"===Object.prototype.toString.call(r[e])?r[e].join(","):r[e]).replace(/\+/g,"%20"))})).join("&")),o="".concat(e.protocol,"://").concat(e.url).concat(e.port?":".concat(e.port):"","/").concat("/"===t.charAt(0)?t.substring(1):t);return i.length&&(o+="?".concat(i)),o}function Ri(e,t){if("GET"!==e.method&&(void 0!==e.data||void 0!==t.data)){var n=Array.isArray(e.data)?e.data:xt(xt({},e.data),t.data);return JSON.stringify(n)}}function Mi(e,t,n){var r=xt(xt(xt({Accept:"application/json"},e),t),n),i={};return Object.keys(r).forEach((function(e){var t=r[e];i[e.toLowerCase()]=t})),i}function Ni(e){try{return JSON.parse(e.content)}catch(t){throw new Li(t.message,e)}}function Ui(e,t){var n=e.content,r=e.status;try{var i=JSON.parse(n);return"error"in i?new Di(i.message,r,i.error,t):new Ti(i.message,r,t)}catch(e){}return new Ti(n,r,t)}function qi(e){return e.map((function(e){return Fi(e)}))}function Fi(e){var t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return xt(xt({},e),{},{request:xt(xt({},e.request),{},{headers:xt(xt({},e.request.headers),t)})})}var Bi=["appId","apiKey","authMode","algoliaAgents"],Hi=["params"];function zi(e){return[{url:"".concat(e,"-dsn.algolia.net"),accept:"read",protocol:"https"},{url:"".concat(e,".algolia.net"),accept:"write",protocol:"https"}].concat(function(e){for(var t=e,n=e.length-1;n>0;n--){var r=Math.floor(Math.random()*(n+1)),i=e[n];t[n]=e[r],t[r]=i}return t}([{url:"".concat(e,"-1.algolianet.com"),accept:"readWrite",protocol:"https"},{url:"".concat(e,"-2.algolianet.com"),accept:"readWrite",protocol:"https"},{url:"".concat(e,"-3.algolianet.com"),accept:"readWrite",protocol:"https"}]))}var Vi="3.8.2",Wi=["footer","searchBox"];function Ki(e){var t=e.appId,n=e.apiKey,r=e.indexName,i=e.placeholder,o=void 0===i?"Search docs":i,a=e.searchParameters,l=e.maxResultsPerGroup,s=e.onClose,c=void 0===s?ui:s,u=e.transformItems,f=void 0===u?si:u,p=e.hitComponent,d=void 0===p?Fr:p,h=e.resultsFooterComponent,v=void 0===h?function(){return null}:h,m=e.navigator,g=e.initialScrollY,b=void 0===g?0:g,y=e.transformSearchClient,_=void 0===y?si:y,w=e.disableUserPersonalization,x=void 0!==w&&w,S=e.initialQuery,O=void 0===S?"":S,j=e.translations,k=void 0===j?{}:j,P=e.getMissingResultsUrl,E=e.insights,C=void 0!==E&&E,I=k.footer,A=k.searchBox,T=St(k,Wi),L=kt(ct.useState({query:"",collections:[],completion:null,context:{},isOpen:!1,activeItemId:null,status:"idle"}),2),D=L[0],$=L[1],R=ct.useRef(null),M=ct.useRef(null),N=ct.useRef(null),U=ct.useRef(null),q=ct.useRef(null),F=ct.useRef(10),B=ct.useRef("undefined"!=typeof window?window.getSelection().toString().slice(0,64):"").current,H=ct.useRef(O||B).current,z=function(e,t,n){return ct.useMemo((function(){var r=function(e,t){if(!e||"string"!=typeof e)throw new Error("`appId` is missing.");if(!t||"string"!=typeof t)throw new Error("`apiKey` is missing.");return function(e){var t=e.appId,n=e.apiKey,r=e.authMode,i=e.algoliaAgents,o=St(e,Bi),a=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"WithinHeaders",r={"x-algolia-api-key":t,"x-algolia-application-id":e};return{headers:function(){return"WithinHeaders"===n?r:{}},queryParameters:function(){return"WithinQueryParameters"===n?r:{}}}}(t,n,r),l=function(e){var t=e.hosts,n=e.hostsCache,r=e.baseHeaders,i=e.logger,o=e.baseQueryParameters,a=e.algoliaAgent,l=e.timeouts,s=e.requester,c=e.requestsCache,u=e.responsesCache;function f(e){return p.apply(this,arguments)}function p(){return(p=pt(Ot().mark((function e(t){var r,i,o,a,l;return Ot().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,Promise.all(t.map((function(e){return n.get(e,(function(){return Promise.resolve(Ei(e))}))})));case 2:return r=e.sent,i=r.filter((function(e){return e.isUp()})),o=r.filter((function(e){return e.isTimedOut()})),a=[].concat(Pt(i),Pt(o)),l=a.length>0?a:t,e.abrupt("return",{hosts:l,getTimeout:function(e,t){return(0===o.length&&0===e?1:o.length+3+e)*t}});case 8:case"end":return e.stop()}}),e)})))).apply(this,arguments)}function d(e,t){return h.apply(this,arguments)}function h(){return(h=pt(Ot().mark((function e(c,u){var p,d,h,v,m,g,b,y,_,w,x,S,O,j=arguments;return Ot().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(p=!(j.length>2&&void 0!==j[2])||j[2],d=[],h=Ri(c,u),v=Mi(r,c.headers,u.headers),m="GET"===c.method?xt(xt({},c.data),u.data):{},g=xt(xt(xt({},o),c.queryParameters),m),a.value&&(g["x-algolia-agent"]=a.value),u&&u.queryParameters)for(b=0,y=Object.keys(u.queryParameters);b<y.length;b++)_=y[b],u.queryParameters[_]&&"[object Object]"!==Object.prototype.toString.call(u.queryParameters[_])?g[_]=u.queryParameters[_].toString():g[_]=u.queryParameters[_];return w=0,x=function(){var e=pt(Ot().mark((function e(t,r){var o,a,f,m,b,y;return Ot().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(void 0!==(o=t.pop())){e.next=3;break}throw new Ai(qi(d));case 3:return a=xt(xt({},l),u.timeouts),f={data:h,headers:v,method:c.method,url:$i(o,c.path,g),connectTimeout:r(w,a.connect),responseTimeout:r(w,p?a.read:a.write)},m=function(e){var n={request:f,response:e,host:o,triesLeft:t.length};return d.push(n),n},e.next=8,s.send(f);case 8:if(S=(_=b=e.sent).isTimedOut,O=_.status,!(S||function(e){return!e.isTimedOut&&!~~e.status}({isTimedOut:S,status:O})||2!=~~(O/100)&&4!=~~(O/100))){e.next=16;break}return y=m(b),b.isTimedOut&&w++,i.info("Retryable failure",Fi(y)),e.next=15,n.set(o,Ei(o,b.isTimedOut?"timed out":"down"));case 15:return e.abrupt("return",x(t,r));case 16:if(2!=~~(b.status/100)){e.next=18;break}return e.abrupt("return",Ni(b));case 18:throw m(b),Ui(b,d);case 20:case"end":return e.stop()}var _,S,O}),e)})));return function(t,n){return e.apply(this,arguments)}}(),S=t.filter((function(e){return"readWrite"===e.accept||(p?"read"===e.accept:"write"===e.accept)})),e.next=13,f(S);case 13:return O=e.sent,e.abrupt("return",x(Pt(O.hosts).reverse(),O.getTimeout));case 15:case"end":return e.stop()}}),e)})))).apply(this,arguments)}return{hostsCache:n,requester:s,timeouts:l,logger:i,algoliaAgent:a,baseHeaders:r,baseQueryParameters:o,hosts:t,request:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.useReadTransporter||"GET"===e.method;if(!n)return d(e,t,n);var i=function(){return d(e,t)};if(!0!==(t.cacheable||e.cacheable))return i();var a={request:e,requestOptions:t,transporter:{queryParameters:o,headers:r}};return u.get(a,(function(){return c.get(a,(function(){return c.set(a,i()).then((function(e){return Promise.all([c.delete(a),e])}),(function(e){return Promise.all([c.delete(a),Promise.reject(e)])})).then((function(e){var t=kt(e,2);return t[0],t[1]}))}))}),{miss:function(e){return u.set(a,e)}})},requestsCache:c,responsesCache:u}}(xt(xt({hosts:zi(t)},o),{},{algoliaAgent:ki({algoliaAgents:i,client:"Lite",version:"5.14.2"}),baseHeaders:xt(xt({"content-type":"text/plain"},a.headers()),o.baseHeaders),baseQueryParameters:xt(xt({},a.queryParameters()),o.baseQueryParameters)}));return{transporter:l,appId:t,clearCache:function(){return Promise.all([l.requestsCache.clear(),l.responsesCache.clear()]).then((function(){}))},get _ua(){return l.algoliaAgent.value},addAlgoliaAgent:function(e,t){l.algoliaAgent.add({segment:e,version:t})},setClientApiKey:function(e){var t=e.apiKey;r&&"WithinHeaders"!==r?l.baseQueryParameters["x-algolia-api-key"]=t:l.baseHeaders["x-algolia-api-key"]=t},searchForHits:function(e,t){return this.search(e,t)},searchForFacets:function(e,t){return this.search(e,t)},customPost:function(e,t){var n=e.path,r=e.parameters,i=e.body;if(!n)throw new Error("Parameter `path` is required when calling `customPost`.");var o={method:"POST",path:"/{path}".replace("{path}",n),queryParameters:r||{},headers:{},data:i||{}};return l.request(o,t)},getRecommendations:function(e,t){if(e&&Array.isArray(e)&&(e={requests:e}),!e)throw new Error("Parameter `getRecommendationsParams` is required when calling `getRecommendations`.");if(!e.requests)throw new Error("Parameter `getRecommendationsParams.requests` is required when calling `getRecommendations`.");var n={method:"POST",path:"/1/indexes/*/recommendations",queryParameters:{},headers:{},data:e,useReadTransporter:!0,cacheable:!0};return l.request(n,t)},search:function(e,t){if(e&&Array.isArray(e)){var n={requests:e.map((function(e){var t=e.params,n=St(e,Hi);return"facet"===n.type?xt(xt(xt({},n),t),{},{type:"facet"}):xt(xt(xt({},n),t),{},{facet:void 0,maxFacetHits:void 0,facetQuery:void 0})}))};e=n}if(!e)throw new Error("Parameter `searchMethodParams` is required when calling `search`.");if(!e.requests)throw new Error("Parameter `searchMethodParams.requests` is required when calling `search`.");var r={method:"POST",path:"/1/indexes/*/queries",queryParameters:{},headers:{},data:e,useReadTransporter:!0,cacheable:!0};return l.request(r,t)}}}(xt({appId:e,apiKey:t,timeouts:{connect:1e3,read:2e3,write:3e4},logger:{debug:function(e,t){return Promise.resolve()},info:function(e,t){return Promise.resolve()},error:function(e,t){return Promise.resolve()}},requester:{send:function(e){return new Promise((function(t){var n=new XMLHttpRequest;n.open(e.method,e.url,!0),Object.keys(e.headers).forEach((function(t){return n.setRequestHeader(t,e.headers[t])}));var r,i=function(e,r){return setTimeout((function(){n.abort(),t({status:0,content:r,isTimedOut:!0})}),e)},o=i(e.connectTimeout,"Connection timeout");n.onreadystatechange=function(){n.readyState>n.OPENED&&void 0===r&&(clearTimeout(o),r=i(e.responseTimeout,"Socket timeout"))},n.onerror=function(){0===n.status&&(clearTimeout(o),clearTimeout(r),t({content:n.responseText||"Network request failed",status:n.status,isTimedOut:!1}))},n.onload=function(){clearTimeout(o),clearTimeout(r),t({content:n.responseText,status:n.status,isTimedOut:!1})},n.send(e.data)}))}},algoliaAgents:[{segment:"Browser"}],authMode:"WithinQueryParameters",responsesCache:ji(),requestsCache:ji({serializable:!1}),hostsCache:Oi({caches:[Si({key:"".concat("5.14.2","-").concat(e)}),ji()]})},void 0))}(e,t);return r.addAlgoliaAgent("docsearch",Vi),!1===/docsearch.js \(.*\)/.test(r.transporter.algoliaAgent.value)&&r.addAlgoliaAgent("docsearch-react",Vi),n(r)}),[e,t,n])}(t,n,_),V=ct.useRef(xi({key:"__DOCSEARCH_FAVORITE_SEARCHES__".concat(r),limit:10})).current,W=ct.useRef(xi({key:"__DOCSEARCH_RECENT_SEARCHES__".concat(r),limit:0===V.getAll().length?7:4})).current,K=ct.useCallback((function(e){if(!x){var t="content"===e.type?e.__docsearch_parent:e;t&&-1===V.getAll().findIndex((function(e){return e.objectID===t.objectID}))&&W.add(t)}}),[V,W,x]),G=ct.useCallback((function(e){if(D.context.algoliaInsightsPlugin&&e.__autocomplete_id){var t=e,n={eventName:"Item Selected",index:t.__autocomplete_indexName,items:[t],positions:[e.__autocomplete_id],queryID:t.__autocomplete_queryID};D.context.algoliaInsightsPlugin.insights.clickedObjectIDsAfterSearch(n)}}),[D.context.algoliaInsightsPlugin]),J=ct.useMemo((function(){return function(e){var t=[],n=function(e,t){var n,r="undefined"!=typeof window?window:{},i=e.plugins||[];return Rn(Rn({debug:!1,openOnFocus:!1,enterKeyHint:void 0,ignoreCompositionEvents:!1,placeholder:"",autoFocus:!1,defaultActiveItemId:null,stallThreshold:300,insights:void 0,environment:r,shouldPanelOpen:function(e){return Ut(e.state)>0},reshape:function(e){return e.sources}},e),{},{id:null!==(n=e.id)&&void 0!==n?n:"autocomplete-".concat(Nt++),plugins:i,initialState:Rn({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},e.initialState),onStateChange:function(t){var n;null===(n=e.onStateChange)||void 0===n||n.call(e,t),i.forEach((function(e){var n;return null===(n=e.onStateChange)||void 0===n?void 0:n.call(e,t)}))},onSubmit:function(t){var n;null===(n=e.onSubmit)||void 0===n||n.call(e,t),i.forEach((function(e){var n;return null===(n=e.onSubmit)||void 0===n?void 0:n.call(e,t)}))},onReset:function(t){var n;null===(n=e.onReset)||void 0===n||n.call(e,t),i.forEach((function(e){var n;return null===(n=e.onReset)||void 0===n?void 0:n.call(e,t)}))},getSources:function(n){return Promise.all([].concat(function(e){return function(e){if(Array.isArray(e))return Dn(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return Dn(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Dn(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(i.map((function(e){return e.getSources}))),[e.getSources]).filter(Boolean).map((function(e){return function(e,t){var n=[];return Promise.resolve(e(t)).then((function(e){return Promise.all(e.filter((function(e){return Boolean(e)})).map((function(e){if(e.sourceId,n.includes(e.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(e.sourceId)," is not unique."));n.push(e.sourceId);var t={getItemInputValue:function(e){return e.state.query},getItemUrl:function(){},onSelect:function(e){(0,e.setIsOpen)(!1)},onActive:Ft,onResolve:Ft};Object.keys(t).forEach((function(e){t[e].__default=!0}));var r=yn(yn({},t),e);return Promise.resolve(r)})))}))}(e,n)}))).then((function(e){return Mt(e)})).then((function(e){return e.map((function(e){return Rn(Rn({},e),{},{onSelect:function(n){e.onSelect(n),t.forEach((function(e){var t;return null===(t=e.onSelect)||void 0===t?void 0:t.call(e,n)}))},onActive:function(n){e.onActive(n),t.forEach((function(e){var t;return null===(t=e.onActive)||void 0===t?void 0:t.call(e,n)}))},onResolve:function(n){e.onResolve(n),t.forEach((function(e){var t;return null===(t=e.onResolve)||void 0===t?void 0:t.call(e,n)}))}})}))}))},navigator:Rn({navigate:function(e){var t=e.itemUrl;r.location.assign(t)},navigateNewTab:function(e){var t=e.itemUrl,n=r.open(t,"_blank","noopener");null==n||n.focus()},navigateNewWindow:function(e){var t=e.itemUrl;r.open(t,"_blank","noopener")}},e.navigator)})}(e,t),r=function(e,t,n){var r,i=t.initialState;return{getState:function(){return i},dispatch:function(r,o){var a=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Pn(Object(n),!0).forEach((function(t){En(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Pn(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},i);i=e(i,{type:r,props:t,payload:o}),n({state:i,prevState:a})},pendingRequests:(r=[],{add:function(e){return r.push(e),e.finally((function(){r=r.filter((function(t){return t!==e}))}))},cancelAll:function(){r.forEach((function(e){return e.cancel()}))},isEmpty:function(){return 0===r.length}})}}(Lr,n,(function(e){var t,r,o=e.prevState,c=e.state;if(n.onStateChange(Rr({prevState:o,state:c,refresh:a,navigator:n.navigator},i)),!s()&&null!==(t=c.context)&&void 0!==t&&null!==(r=t.algoliaInsightsPlugin)&&void 0!==r&&r.__automaticInsights&&!1!==n.insights){var u=pn({__autocomplete_clickAnalytics:!1});n.plugins.push(u),l([u])}})),i=function(e){var t=e.store;return{setActiveItemId:function(e){t.dispatch("setActiveItemId",e)},setQuery:function(e){t.dispatch("setQuery",e)},setCollections:function(e){var n=0,r=e.map((function(e){return An(An({},e),{},{items:Mt(e.items).map((function(e){return An(An({},e),{},{__autocomplete_id:n++})}))})}));t.dispatch("setCollections",r)},setIsOpen:function(e){t.dispatch("setIsOpen",e)},setStatus:function(e){t.dispatch("setStatus",e)},setContext:function(e){t.dispatch("setContext",e)}}}({store:r}),o=function(e){var t=e.props,n=e.refresh,r=e.store,i=xr(e,dr);return{getEnvironmentProps:function(e){var n=e.inputElement,i=e.formElement,o=e.panelElement;function a(e){!r.getState().isOpen&&r.pendingRequests.isEmpty()||e.target===n||!1===[i,o].some((function(t){return(n=t)===(r=e.target)||n.contains(r);var n,r}))&&(r.dispatch("blur",null),t.debug||r.pendingRequests.cancelAll())}return _r({onTouchStart:a,onMouseDown:a,onTouchMove:function(e){!1!==r.getState().isOpen&&n===t.environment.document.activeElement&&e.target!==n&&n.blur()}},xr(e,hr))},getRootProps:function(e){return _r({role:"combobox","aria-expanded":r.getState().isOpen,"aria-haspopup":"listbox","aria-controls":r.getState().isOpen?r.getState().collections.map((function(e){var n=e.source;return Sn(t.id,"list",n)})).join(" "):void 0,"aria-labelledby":Sn(t.id,"label")},e)},getFormProps:function(e){return e.inputElement,_r({action:"",noValidate:!0,role:"search",onSubmit:function(o){var a;o.preventDefault(),t.onSubmit(_r({event:o,refresh:n,state:r.getState()},i)),r.dispatch("submit",null),null===(a=e.inputElement)||void 0===a||a.blur()},onReset:function(o){var a;o.preventDefault(),t.onReset(_r({event:o,refresh:n,state:r.getState()},i)),r.dispatch("reset",null),null===(a=e.inputElement)||void 0===a||a.focus()}},xr(e,vr))},getLabelProps:function(e){return _r({htmlFor:Sn(t.id,"input"),id:Sn(t.id,"label")},e)},getInputProps:function(e){var o;function a(e){(t.openOnFocus||Boolean(r.getState().query))&&ar(_r({event:e,props:t,query:r.getState().completion||r.getState().query,refresh:n,store:r},i)),r.dispatch("focus",null)}var l=e||{};l.inputElement;var s=l.maxLength,c=void 0===s?512:s,u=xr(l,mr),f=xn(r.getState()),p=function(e){return Boolean(e&&e.match(On))}((null===(o=t.environment.navigator)||void 0===o?void 0:o.userAgent)||""),d=t.enterKeyHint||(null!=f&&f.itemUrl&&!p?"go":"search");return _r({"aria-autocomplete":"both","aria-activedescendant":r.getState().isOpen&&null!==r.getState().activeItemId?Sn(t.id,"item-".concat(r.getState().activeItemId),null==f?void 0:f.source):void 0,"aria-controls":r.getState().isOpen?r.getState().collections.map((function(e){var n=e.source;return Sn(t.id,"list",n)})).join(" "):void 0,"aria-labelledby":Sn(t.id,"label"),value:r.getState().completion||r.getState().query,id:Sn(t.id,"input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:d,spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:c,type:"search",onChange:function(e){var o=e.currentTarget.value;t.ignoreCompositionEvents&&jn(e).isComposing?i.setQuery(o):ar(_r({event:e,props:t,query:o.slice(0,c),refresh:n,store:r},i))},onCompositionEnd:function(e){ar(_r({event:e,props:t,query:e.currentTarget.value.slice(0,c),refresh:n,store:r},i))},onKeyDown:function(e){jn(e).isComposing||function(e){var t=e.event,n=e.props,r=e.refresh,i=e.store,o=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(e,sr);if("ArrowUp"===t.key||"ArrowDown"===t.key){var a=function(){var e=xn(i.getState()),t=n.environment.document.getElementById(Sn(n.id,"item-".concat(i.getState().activeItemId),null==e?void 0:e.source));t&&(t.scrollIntoViewIfNeeded?t.scrollIntoViewIfNeeded(!1):t.scrollIntoView(!1))},l=function(){var e=xn(i.getState());if(null!==i.getState().activeItemId&&e){var n=e.item,a=e.itemInputValue,l=e.itemUrl,s=e.source;s.onActive(ur({event:t,item:n,itemInputValue:a,itemUrl:l,refresh:r,source:s,state:i.getState()},o))}};t.preventDefault(),!1===i.getState().isOpen&&(n.openOnFocus||Boolean(i.getState().query))?ar(ur({event:t,props:n,query:i.getState().query,refresh:r,store:i},o)).then((function(){i.dispatch(t.key,{nextActiveItemId:n.defaultActiveItemId}),l(),setTimeout(a,0)})):(i.dispatch(t.key,{}),l(),a())}else if("Escape"===t.key)t.preventDefault(),i.dispatch(t.key,null),i.pendingRequests.cancelAll();else if("Tab"===t.key)i.dispatch("blur",null),i.pendingRequests.cancelAll();else if("Enter"===t.key){if(null===i.getState().activeItemId||i.getState().collections.every((function(e){return 0===e.items.length})))return void(n.debug||i.pendingRequests.cancelAll());t.preventDefault();var s=xn(i.getState()),c=s.item,u=s.itemInputValue,f=s.itemUrl,p=s.source;if(t.metaKey||t.ctrlKey)void 0!==f&&(p.onSelect(ur({event:t,item:c,itemInputValue:u,itemUrl:f,refresh:r,source:p,state:i.getState()},o)),n.navigator.navigateNewTab({itemUrl:f,item:c,state:i.getState()}));else if(t.shiftKey)void 0!==f&&(p.onSelect(ur({event:t,item:c,itemInputValue:u,itemUrl:f,refresh:r,source:p,state:i.getState()},o)),n.navigator.navigateNewWindow({itemUrl:f,item:c,state:i.getState()}));else if(t.altKey);else{if(void 0!==f)return p.onSelect(ur({event:t,item:c,itemInputValue:u,itemUrl:f,refresh:r,source:p,state:i.getState()},o)),void n.navigator.navigate({itemUrl:f,item:c,state:i.getState()});ar(ur({event:t,nextState:{isOpen:!1},props:n,query:u,refresh:r,store:i},o)).then((function(){p.onSelect(ur({event:t,item:c,itemInputValue:u,itemUrl:f,refresh:r,source:p,state:i.getState()},o))}))}}}(_r({event:e,props:t,refresh:n,store:r},i))},onFocus:a,onBlur:Ft,onClick:function(n){e.inputElement!==t.environment.document.activeElement||r.getState().isOpen||a(n)}},u)},getPanelProps:function(e){return _r({onMouseDown:function(e){e.preventDefault()},onMouseLeave:function(){r.dispatch("mouseleave",null)}},e)},getListProps:function(e){var n=e||{},r=n.source,i=xr(n,gr);return _r({role:"listbox","aria-labelledby":Sn(t.id,"label"),id:Sn(t.id,"list",r)},i)},getItemProps:function(e){var o=e.item,a=e.source,l=xr(e,br);return _r({id:Sn(t.id,"item-".concat(o.__autocomplete_id),a),role:"option","aria-selected":r.getState().activeItemId===o.__autocomplete_id,onMouseMove:function(e){if(o.__autocomplete_id!==r.getState().activeItemId){r.dispatch("mousemove",o.__autocomplete_id);var t=xn(r.getState());if(null!==r.getState().activeItemId&&t){var a=t.item,l=t.itemInputValue,s=t.itemUrl,c=t.source;c.onActive(_r({event:e,item:a,itemInputValue:l,itemUrl:s,refresh:n,source:c,state:r.getState()},i))}}},onMouseDown:function(e){e.preventDefault()},onClick:function(e){var l=a.getItemInputValue({item:o,state:r.getState()}),s=a.getItemUrl({item:o,state:r.getState()});(s?Promise.resolve():ar(_r({event:e,nextState:{isOpen:!1},props:t,query:l,refresh:n,store:r},i))).then((function(){a.onSelect(_r({event:e,item:o,itemInputValue:l,itemUrl:s,refresh:n,source:a,state:r.getState()},i))}))}},l)}}}(Rr({props:n,refresh:a,store:r,navigator:n.navigator},i));function a(){return ar(Rr({event:new Event("input"),nextState:{isOpen:r.getState().isOpen},props:n,navigator:n.navigator,query:r.getState().query,refresh:a,store:r},i))}function l(e){e.forEach((function(e){var r;return null===(r=e.subscribe)||void 0===r?void 0:r.call(e,Rr(Rr({},i),{},{navigator:n.navigator,refresh:a,onSelect:function(e){t.push({onSelect:e})},onActive:function(e){t.push({onActive:e})},onResolve:function(e){t.push({onResolve:e})}}))}))}function s(){return n.plugins.some((function(e){return"aa.algoliaInsightsPlugin"===e.name}))}if(n.insights&&!s()){var c="boolean"==typeof n.insights?{}:n.insights;n.plugins.push(pn(c))}return l(n.plugins),function(e){var t,n,r=e.metadata,i=e.environment;if(null===(t=i.navigator)||void 0===t||null===(n=t.userAgent)||void 0===n?void 0:n.includes("Algolia Crawler")){var o=i.document.createElement("meta"),a=i.document.querySelector("head");o.name="algolia:metadata",setTimeout((function(){o.content=JSON.stringify(r),a.appendChild(o)}),0)}}({metadata:Pr({plugins:n.plugins,options:e}),environment:n.environment}),Rr(Rr({refresh:a,navigator:n.navigator},o),i)}({id:"docsearch",defaultActiveItemId:0,placeholder:o,openOnFocus:!0,initialState:{query:H,context:{searchSuggestions:[]}},insights:C,navigator:m,onStateChange:function(e){$(e.state)},getSources:function(e){var i=e.query,o=e.state,s=e.setContext,u=e.setStatus;if(!i)return x?[]:[{sourceId:"recentSearches",onSelect:function(e){var t=e.item,n=e.event;K(t),ci(n)||c()},getItemUrl:function(e){return e.item.url},getItems:function(){return W.getAll()}},{sourceId:"favoriteSearches",onSelect:function(e){var t=e.item,n=e.event;K(t),ci(n)||c()},getItemUrl:function(e){return e.item.url},getItems:function(){return V.getAll()}}];var p=Boolean(C);return z.search({requests:[xt({query:i,indexName:r,attributesToRetrieve:["hierarchy.lvl0","hierarchy.lvl1","hierarchy.lvl2","hierarchy.lvl3","hierarchy.lvl4","hierarchy.lvl5","hierarchy.lvl6","content","type","url"],attributesToSnippet:["hierarchy.lvl1:".concat(F.current),"hierarchy.lvl2:".concat(F.current),"hierarchy.lvl3:".concat(F.current),"hierarchy.lvl4:".concat(F.current),"hierarchy.lvl5:".concat(F.current),"hierarchy.lvl6:".concat(F.current),"content:".concat(F.current)],snippetEllipsisText:"…",highlightPreTag:"<mark>",highlightPostTag:"</mark>",hitsPerPage:20,clickAnalytics:p},a)]}).catch((function(e){throw"RetryError"===e.name&&u("error"),e})).then((function(e){var i=e.results[0],a=i.hits,u=i.nbHits,d=li(a,(function(e){return di(e)}),l);o.context.searchSuggestions.length<Object.keys(d).length&&s({searchSuggestions:Object.keys(d)}),s({nbHits:u});var h={};return p&&(h={__autocomplete_indexName:r,__autocomplete_queryID:i.queryID,__autocomplete_algoliaCredentials:{appId:t,apiKey:n}}),Object.values(d).map((function(e,t){return{sourceId:"hits".concat(t),onSelect:function(e){var t=e.item,n=e.event;K(t),ci(n)||c()},getItemUrl:function(e){return e.item.url},getItems:function(){return Object.values(li(e,(function(e){return e.hierarchy.lvl1}),l)).map(f).map((function(e){return e.map((function(t){var n=null,r=e.find((function(e){return"lvl1"===e.type&&e.hierarchy.lvl1===t.hierarchy.lvl1}));return"lvl1"!==t.type&&r&&(n=r),xt(xt({},t),{},{__docsearch_parent:n},h)}))})).flat()}}}))}))}})}),[r,a,l,z,c,W,V,K,H,o,m,f,x,C,t,n]),Q=J.getEnvironmentProps,Z=J.getRootProps,Y=J.refresh;return function(e){var t=e.getEnvironmentProps,n=e.panelElement,r=e.formElement,i=e.inputElement;ct.useEffect((function(){if(n&&r&&i){var e=t({panelElement:n,formElement:r,inputElement:i}),o=e.onTouchStart,a=e.onTouchMove;return window.addEventListener("touchstart",o),window.addEventListener("touchmove",a),function(){window.removeEventListener("touchstart",o),window.removeEventListener("touchmove",a)}}}),[t,n,r,i])}({getEnvironmentProps:Q,panelElement:U.current,formElement:N.current,inputElement:q.current}),function(e){var t=e.container;ct.useEffect((function(){if(t){var e=t.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), input:not([disabled])"),n=e[0],r=e[e.length-1];return t.addEventListener("keydown",i),function(){t.removeEventListener("keydown",i)}}function i(e){"Tab"===e.key&&(e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus()))}}),[t])}({container:R.current}),ct.useEffect((function(){return document.body.classList.add("DocSearch--active"),function(){var e,t;document.body.classList.remove("DocSearch--active"),null===(e=(t=window).scrollTo)||void 0===e||e.call(t,0,b)}}),[]),ct.useEffect((function(){window.matchMedia("(max-width: 768px)").matches&&(F.current=5)}),[]),ct.useEffect((function(){U.current&&(U.current.scrollTop=0)}),[D.query]),ct.useEffect((function(){H.length>0&&(Y(),q.current&&q.current.focus())}),[H,Y]),ct.useEffect((function(){function e(){if(M.current){var e=.01*window.innerHeight;M.current.style.setProperty("--docsearch-vh","".concat(e,"px"))}}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),ct.createElement("div",gt({ref:R},Z({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===D.status&&"DocSearch-Container--Stalled","error"===D.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),role:"button",tabIndex:0,onMouseDown:function(e){e.target===e.currentTarget&&c()}}),ct.createElement("div",{className:"DocSearch-Modal",ref:M},ct.createElement("header",{className:"DocSearch-SearchBar",ref:N},ct.createElement(_i,gt({},J,{state:D,autoFocus:0===H.length,inputRef:q,isFromSelection:Boolean(H)&&H===B,translations:A,onClose:c}))),ct.createElement("div",{className:"DocSearch-Dropdown",ref:U},ct.createElement(bi,gt({},J,{indexName:r,state:D,hitComponent:d,resultsFooterComponent:v,disableUserPersonalization:x,recentSearches:W,favoriteSearches:V,inputRef:q,translations:T,getMissingResultsUrl:P,onItemClick:function(e,t){G(e),K(e),ci(t)||c()}}))),ct.createElement("footer",{className:"DocSearch-Footer"},ct.createElement(qr,{translations:I}))))}function Gi(e){var t,n,r=ct.useRef(null),i=kt(ct.useState(!1),2),o=i[0],a=i[1],l=kt(ct.useState((null==e?void 0:e.initialQuery)||void 0),2),s=l[0],c=l[1],u=ct.useCallback((function(){a(!0)}),[a]),f=ct.useCallback((function(){a(!1),c(null==e?void 0:e.initialQuery)}),[a,e.initialQuery]);return function(e){var t=e.isOpen,n=e.onOpen,r=e.onClose,i=e.onInput,o=e.searchButtonRef;ct.useEffect((function(){function e(e){var a;if("Escape"===e.code&&t||"k"===(null===(a=e.key)||void 0===a?void 0:a.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)return e.preventDefault(),void(t?r():document.body.classList.contains("DocSearch--active")||n());o&&o.current===document.activeElement&&i&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&i(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,r,i,o])}({isOpen:o,onOpen:u,onClose:f,onInput:ct.useCallback((function(e){a(!0),c(e.key)}),[a,c]),searchButtonRef:r}),ct.createElement(ct.Fragment,null,ct.createElement(Dt,{ref:r,translations:null==e||null===(t=e.translations)||void 0===t?void 0:t.button,onClick:u}),o&&Ne(ct.createElement(Ki,gt({},e,{initialScrollY:window.scrollY,initialQuery:s,translations:null==e||null===(n=e.translations)||void 0===n?void 0:n.modal,onClose:f})),document.body))}n(281);var Ji={props:["options"],mounted(){this.initialize()},methods:{initialize(){!function(e){Ve(ct.createElement(Gi,r({},e,{transformSearchClient:function(t){return t.addAlgoliaAgent("docsearch.js",Vi),e.transformSearchClient?e.transformSearchClient(t):t}})),function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window;return"string"==typeof e?t.document.querySelector(e):e}(e.container,e.environment))}({container:"#docsearch-container",appId:"DZ8S6HN0MP",apiKey:"a34809e24ae1eb13ca3afc255d0a0cef",indexName:"mpxjs"})}},watch:{options(e){this.$el.innerHTML='<div id="docsearch-container"></div>',this.initialize(e)}}},Qi=n(4),Zi=Object(Qi.a)(Ji,(function(){this._self._c;return this._m(0)}),[function(){var e=this._self._c;return e("form",{staticClass:"algolia-search-wrapper search-box",attrs:{id:"search-form",role:"search"}},[e("div",{attrs:{id:"docsearch-container"}})])}],!1,null,null,null);t.default=Zi.exports},function(e,t){e.exports=function(e){var t=null==e?0:e.length;return t?e[t-1]:void 0}},function(e,t,n){e.exports=n(289)},function(e,t,n){"use strict";var r=n(14),i=n(6),o=n(144),a=n(5),l=n(3),s=n(89),c=n(146),u=n(147),f=n(7),p=n(13),d=n(18),h=n(90).IteratorPrototype,v=n(8),m=n(23),g=d("toStringTag"),b=TypeError,y=i.Iterator,_=m||!l(y)||y.prototype!==h||!f((function(){y({})})),w=function(){if(o(this,h),s(this)===h)throw new b("Abstract class Iterator not directly constructable")},x=function(e,t){v?c(h,e,{configurable:!0,get:function(){return t},set:function(t){if(a(this),this===h)throw new b("You can't redefine this property");p(this,e)?this[e]=t:u(this,e,t)}}):h[e]=t};p(h,g)||x(g,"Iterator"),!_&&p(h,"constructor")&&h.constructor!==Object||x("constructor",w),w.prototype=h,r({global:!0,constructor:!0,forced:_},{Iterator:w})},function(e,t,n){"use strict";var r={}.propertyIsEnumerable,i=Object.getOwnPropertyDescriptor,o=i&&!r.call({1:2},1);t.f=o?function(e){var t=i(this,e);return!!t&&t.enumerable}:r},function(e,t,n){"use strict";var r=n(16),i=n(12),o=n(74),a=n(36),l=n(132),s=n(18),c=TypeError,u=s("toPrimitive");e.exports=function(e,t){if(!i(e)||o(e))return e;var n,s=a(e,u);if(s){if(void 0===t&&(t="default"),n=r(s,e,t),!i(n)||o(n))return n;throw new c("Can't convert object to primitive value")}return void 0===t&&(t="number"),l(e,t)}},function(e,t,n){"use strict";var r=n(16),i=n(3),o=n(12),a=TypeError;e.exports=function(e,t){var n,l;if("string"===t&&i(n=e.toString)&&!o(l=r(n,e)))return l;if(i(n=e.valueOf)&&!o(l=r(n,e)))return l;if("string"!==t&&i(n=e.toString)&&!o(l=r(n,e)))return l;throw new a("Can't convert object to primitive value")}},function(e,t,n){"use strict";var r=n(8),i=n(13),o=Function.prototype,a=r&&Object.getOwnPropertyDescriptor,l=i(o,"name"),s=l&&"something"===function(){}.name,c=l&&(!r||r&&a(o,"name").configurable);e.exports={EXISTS:l,PROPER:s,CONFIGURABLE:c}},function(e,t,n){"use strict";var r=n(9),i=n(3),o=n(53),a=r(Function.toString);i(o.inspectSource)||(o.inspectSource=function(e){return a(e)}),e.exports=o.inspectSource},function(e,t,n){"use strict";var r=n(6),i=n(3),o=r.WeakMap;e.exports=i(o)&&/native code/.test(String(o))},function(e,t,n){"use strict";var r=n(34),i=n(9),o=n(137),a=n(142),l=n(5),s=i([].concat);e.exports=r("Reflect","ownKeys")||function(e){var t=o.f(l(e)),n=a.f;return n?s(t,n(e)):t}},function(e,t,n){"use strict";var r=n(87),i=n(58).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return r(e,i)}},function(e,t,n){"use strict";var r=n(33),i=n(139),o=n(38),a=function(e){return function(t,n,a){var l=r(t),s=o(l);if(0===s)return!e&&-1;var c,u=i(a,s);if(e&&n!=n){for(;s>u;)if((c=l[u++])!=c)return!0}else for(;s>u;u++)if((e||u in l)&&l[u]===n)return e||u||0;return!e&&-1}};e.exports={includes:a(!0),indexOf:a(!1)}},function(e,t,n){"use strict";var r=n(88),i=Math.max,o=Math.min;e.exports=function(e,t){var n=r(e);return n<0?i(n+t,0):o(n,t)}},function(e,t,n){"use strict";var r=Math.ceil,i=Math.floor;e.exports=Math.trunc||function(e){var t=+e;return(t>0?i:r)(t)}},function(e,t,n){"use strict";var r=n(88),i=Math.min;e.exports=function(e){var t=r(e);return t>0?i(t,9007199254740991):0}},function(e,t,n){"use strict";t.f=Object.getOwnPropertySymbols},function(e,t,n){"use strict";var r=n(7),i=n(3),o=/#|\.prototype\./,a=function(e,t){var n=s[l(e)];return n===u||n!==c&&(i(t)?r(t):!!t)},l=a.normalize=function(e){return String(e).replace(o,".").toLowerCase()},s=a.data={},c=a.NATIVE="N",u=a.POLYFILL="P";e.exports=a},function(e,t,n){"use strict";var r=n(35),i=TypeError;e.exports=function(e,t){if(r(t,e))return e;throw new i("Incorrect invocation")}},function(e,t,n){"use strict";var r=n(7);e.exports=!r((function(){function e(){}return e.prototype.constructor=null,Object.getPrototypeOf(new e)!==e.prototype}))},function(e,t,n){"use strict";var r=n(84),i=n(20);e.exports=function(e,t,n){return n.get&&r(n.get,t,{getter:!0}),n.set&&r(n.set,t,{setter:!0}),i.f(e,t,n)}},function(e,t,n){"use strict";var r=n(8),i=n(20),o=n(32);e.exports=function(e,t,n){r?i.f(e,t,o(0,n)):e[t]=n}},function(e,t,n){"use strict";var r=n(8),i=n(83),o=n(20),a=n(5),l=n(33),s=n(149);t.f=r&&!i?Object.defineProperties:function(e,t){a(e);for(var n,r=l(t),i=s(t),c=i.length,u=0;c>u;)o.f(e,n=i[u++],r[n]);return e}},function(e,t,n){"use strict";var r=n(87),i=n(58);e.exports=Object.keys||function(e){return r(e,i)}},function(e,t,n){"use strict";var r=n(34);e.exports=r("document","documentElement")},function(e,t,n){"use strict";var r=n(14),i=n(16),o=n(11),a=n(5),l=n(26),s=n(92),c=n(93),u=n(23),f=s((function(){for(var e,t,n=this.iterator,r=this.predicate,o=this.next;;){if(e=a(i(o,n)),this.done=!!e.done)return;if(t=e.value,c(n,r,[t,this.counter++],!0))return t}}));r({target:"Iterator",proto:!0,real:!0,forced:u},{filter:function(e){return a(this),o(e),new f(l(this),{predicate:e})}})},function(e,t,n){"use strict";var r=n(55);e.exports=function(e,t,n){for(var i in t)r(e,i,t[i],n);return e}},function(e,t,n){"use strict";e.exports=function(e,t){return{value:e,done:t}}},function(e,t,n){"use strict";var r=n(14),i=n(155);r({target:"Iterator",proto:!0,real:!0,forced:n(23)},{map:i})},function(e,t,n){"use strict";var r=n(16),i=n(11),o=n(5),a=n(26),l=n(92),s=n(93),c=l((function(){var e=this.iterator,t=o(r(this.next,e));if(!(this.done=!!t.done))return s(e,this.mapper,[t.value,this.counter++],!0)}));e.exports=function(e){return o(this),i(e),new c(a(this),{mapper:e})}},function(e,t,n){"use strict";var r=n(14),i=n(157).left,o=n(158),a=n(77);r({target:"Array",proto:!0,forced:!n(159)&&a>79&&a<83||!o("reduce")},{reduce:function(e){var t=arguments.length;return i(this,e,t,t>1?arguments[1]:void 0)}})},function(e,t,n){"use strict";var r=n(11),i=n(37),o=n(72),a=n(38),l=TypeError,s="Reduce of empty array with no initial value",c=function(e){return function(t,n,c,u){var f=i(t),p=o(f),d=a(f);if(r(n),0===d&&c<2)throw new l(s);var h=e?d-1:0,v=e?-1:1;if(c<2)for(;;){if(h in p){u=p[h],h+=v;break}if(h+=v,e?h<0:d<=h)throw new l(s)}for(;e?h>=0:d>h;h+=v)h in p&&(u=n(u,p[h],h,f));return u}};e.exports={left:c(!1),right:c(!0)}},function(e,t,n){"use strict";var r=n(7);e.exports=function(e,t){var n=[][e];return!!n&&r((function(){n.call(null,t||function(){return 1},1)}))}},function(e,t,n){"use strict";var r=n(160);e.exports="NODE"===r},function(e,t,n){"use strict";var r=n(6),i=n(78),o=n(28),a=function(e){return i.slice(0,e.length)===e};e.exports=a("Bun/")?"BUN":a("Cloudflare-Workers")?"CLOUDFLARE":a("Deno/")?"DENO":a("Node.js/")?"NODE":r.Bun&&"string"==typeof Bun.version?"BUN":r.Deno&&"object"==typeof Deno.version?"DENO":"process"===o(r.process)?"NODE":r.window&&r.document?"BROWSER":"REST"},function(e,t,n){"use strict";var r=n(14),i=n(49),o=n(11),a=n(5),l=n(26);r({target:"Iterator",proto:!0,real:!0},{forEach:function(e){a(this),o(e);var t=l(this),n=0;i(t,(function(t){e(t,n++)}),{IS_RECORD:!0})}})},function(e,t,n){"use strict";var r=n(163),i=n(11),o=n(31),a=r(r.bind);e.exports=function(e,t){return i(e),void 0===t?e:o?a(e,t):function(){return e.apply(t,arguments)}}},function(e,t,n){"use strict";var r=n(28),i=n(9);e.exports=function(e){if("Function"===r(e))return i(e)}},function(e,t,n){"use strict";var r=n(18),i=n(94),o=r("iterator"),a=Array.prototype;e.exports=function(e){return void 0!==e&&(i.Array===e||a[o]===e)}},function(e,t,n){"use strict";var r=n(16),i=n(11),o=n(5),a=n(52),l=n(95),s=TypeError;e.exports=function(e,t){var n=arguments.length<2?l(e):t;if(i(n))return o(r(n,e));throw new s(a(e)+" is not iterable")}},function(e,t,n){"use strict";var r={};r[n(18)("toStringTag")]="z",e.exports="[object z]"===String(r)},function(e,t,n){"use strict";n(168)},function(e,t,n){"use strict";var r=n(14),i=n(49),o=n(11),a=n(5),l=n(26),s=TypeError;r({target:"Iterator",proto:!0,real:!0},{reduce:function(e){a(this),o(e);var t=l(this),n=arguments.length<2,r=n?void 0:arguments[1],c=0;if(i(t,(function(t){n?(n=!1,r=t):r=e(r,t,c),c++}),{IS_RECORD:!0}),n)throw new s("Reduce of empty iterator with no initial value");return r}})},function(e,t,n){"use strict";var r=n(14),i=n(6),o=n(170),a=n(171),l=i.WebAssembly,s=7!==new Error("e",{cause:7}).cause,c=function(e,t){var n={};n[e]=a(e,t,s),r({global:!0,constructor:!0,arity:1,forced:s},n)},u=function(e,t){if(l&&l[e]){var n={};n[e]=a("WebAssembly."+e,t,s),r({target:"WebAssembly",stat:!0,constructor:!0,arity:1,forced:s},n)}};c("Error",(function(e){return function(t){return o(e,this,arguments)}})),c("EvalError",(function(e){return function(t){return o(e,this,arguments)}})),c("RangeError",(function(e){return function(t){return o(e,this,arguments)}})),c("ReferenceError",(function(e){return function(t){return o(e,this,arguments)}})),c("SyntaxError",(function(e){return function(t){return o(e,this,arguments)}})),c("TypeError",(function(e){return function(t){return o(e,this,arguments)}})),c("URIError",(function(e){return function(t){return o(e,this,arguments)}})),u("CompileError",(function(e){return function(t){return o(e,this,arguments)}})),u("LinkError",(function(e){return function(t){return o(e,this,arguments)}})),u("RuntimeError",(function(e){return function(t){return o(e,this,arguments)}}))},function(e,t,n){"use strict";var r=n(31),i=Function.prototype,o=i.apply,a=i.call;e.exports="object"==typeof Reflect&&Reflect.apply||(r?a.bind(o):function(){return a.apply(o,arguments)})},function(e,t,n){"use strict";var r=n(34),i=n(13),o=n(24),a=n(35),l=n(97),s=n(86),c=n(175),u=n(176),f=n(177),p=n(179),d=n(180),h=n(8),v=n(23);e.exports=function(e,t,n,m){var g=m?2:1,b=e.split("."),y=b[b.length-1],_=r.apply(null,b);if(_){var w=_.prototype;if(!v&&i(w,"cause")&&delete w.cause,!n)return _;var x=r("Error"),S=t((function(e,t){var n=f(m?t:e,void 0),r=m?new _(e):new _;return void 0!==n&&o(r,"message",n),d(r,S,r.stack,2),this&&a(w,this)&&u(r,this,S),arguments.length>g&&p(r,arguments[g]),r}));if(S.prototype=w,"Error"!==y?l?l(S,x):s(S,x,{name:!0}):h&&"stackTraceLimit"in _&&(c(S,_,"stackTraceLimit"),c(S,_,"prepareStackTrace")),s(S,_),!v)try{w.name!==y&&o(w,"name",y),w.constructor=S}catch(e){}return S}}},function(e,t,n){"use strict";var r=n(9),i=n(11);e.exports=function(e,t,n){try{return r(i(Object.getOwnPropertyDescriptor(e,t)[n]))}catch(e){}}},function(e,t,n){"use strict";var r=n(174),i=String,o=TypeError;e.exports=function(e){if(r(e))return e;throw new o("Can't set "+i(e)+" as a prototype")}},function(e,t,n){"use strict";var r=n(12);e.exports=function(e){return r(e)||null===e}},function(e,t,n){"use strict";var r=n(20).f;e.exports=function(e,t,n){n in e||r(e,n,{configurable:!0,get:function(){return t[n]},set:function(e){t[n]=e}})}},function(e,t,n){"use strict";var r=n(3),i=n(12),o=n(97);e.exports=function(e,t,n){var a,l;return o&&r(a=t.constructor)&&a!==n&&i(l=a.prototype)&&l!==n.prototype&&o(e,l),e}},function(e,t,n){"use strict";var r=n(178);e.exports=function(e,t){return void 0===e?arguments.length<2?"":t:r(e)}},function(e,t,n){"use strict";var r=n(96),i=String;e.exports=function(e){if("Symbol"===r(e))throw new TypeError("Cannot convert a Symbol value to a string");return i(e)}},function(e,t,n){"use strict";var r=n(12),i=n(24);e.exports=function(e,t){r(t)&&"cause"in t&&i(e,"cause",t.cause)}},function(e,t,n){"use strict";var r=n(24),i=n(181),o=n(182),a=Error.captureStackTrace;e.exports=function(e,t,n,l){o&&(a?a(e,t):r(e,"stack",i(n,l)))}},function(e,t,n){"use strict";var r=n(9),i=Error,o=r("".replace),a=String(new i("zxcasd").stack),l=/\n\s*at [^:]*:[^\n]*/,s=l.test(a);e.exports=function(e,t){if(s&&"string"==typeof e&&!i.prepareStackTrace)for(;t--;)e=o(e,l,"");return e}},function(e,t,n){"use strict";var r=n(7),i=n(32);e.exports=!r((function(){var e=new Error("a");return!("stack"in e)||(Object.defineProperty(e,"stack",i(1,7)),7!==e.stack)}))},function(e,t,n){"use strict";var r=n(8),i=n(184),o=TypeError,a=Object.getOwnPropertyDescriptor,l=r&&!function(){if(void 0!==this)return!0;try{Object.defineProperty([],"length",{writable:!1}).length=1}catch(e){return e instanceof TypeError}}();e.exports=l?function(e,t){if(i(e)&&!a(e,"length").writable)throw new o("Cannot set read only .length");return e.length=t}:function(e,t){return e.length=t}},function(e,t,n){"use strict";var r=n(28);e.exports=Array.isArray||function(e){return"Array"===r(e)}},function(e,t,n){"use strict";var r=TypeError;e.exports=function(e){if(e>9007199254740991)throw r("Maximum allowed index exceeded");return e}},function(e,t,n){var r=n(98),i=n(187);e.exports=function e(t,n,o,a,l){var s=-1,c=t.length;for(o||(o=i),l||(l=[]);++s<c;){var u=t[s];n>0&&o(u)?n>1?e(u,n-1,o,a,l):r(l,u):a||(l[l.length]=u)}return l}},function(e,t,n){var r=n(29),i=n(60),o=n(15),a=r?r.isConcatSpreadable:void 0;e.exports=function(e){return o(e)||i(e)||!!(a&&e&&e[a])}},function(e,t,n){var r=n(27),i=n(22);e.exports=function(e){return i(e)&&"[object Arguments]"==r(e)}},function(e,t,n){var r=n(29),i=Object.prototype,o=i.hasOwnProperty,a=i.toString,l=r?r.toStringTag:void 0;e.exports=function(e){var t=o.call(e,l),n=e[l];try{e[l]=void 0;var r=!0}catch(e){}var i=a.call(e);return r&&(t?e[l]=n:delete e[l]),i}},function(e,t){var n=Object.prototype.toString;e.exports=function(e){return n.call(e)}},function(e,t,n){var r=n(192),i=n(248),o=n(68),a=n(15),l=n(258);e.exports=function(e){return"function"==typeof e?e:null==e?o:"object"==typeof e?a(e)?i(e[0],e[1]):r(e):l(e)}},function(e,t,n){var r=n(193),i=n(247),o=n(116);e.exports=function(e){var t=i(e);return 1==t.length&&t[0][2]?o(t[0][0],t[0][1]):function(n){return n===e||r(n,e,t)}}},function(e,t,n){var r=n(100),i=n(104);e.exports=function(e,t,n,o){var a=n.length,l=a,s=!o;if(null==e)return!l;for(e=Object(e);a--;){var c=n[a];if(s&&c[2]?c[1]!==e[c[0]]:!(c[0]in e))return!1}for(;++a<l;){var u=(c=n[a])[0],f=e[u],p=c[1];if(s&&c[2]){if(void 0===f&&!(u in e))return!1}else{var d=new r;if(o)var h=o(f,p,u,e,t,d);if(!(void 0===h?i(p,f,3,o,d):h))return!1}}return!0}},function(e,t){e.exports=function(){this.__data__=[],this.size=0}},function(e,t,n){var r=n(40),i=Array.prototype.splice;e.exports=function(e){var t=this.__data__,n=r(t,e);return!(n<0)&&(n==t.length-1?t.pop():i.call(t,n,1),--this.size,!0)}},function(e,t,n){var r=n(40);e.exports=function(e){var t=this.__data__,n=r(t,e);return n<0?void 0:t[n][1]}},function(e,t,n){var r=n(40);e.exports=function(e){return r(this.__data__,e)>-1}},function(e,t,n){var r=n(40);e.exports=function(e,t){var n=this.__data__,i=r(n,e);return i<0?(++this.size,n.push([e,t])):n[i][1]=t,this}},function(e,t,n){var r=n(39);e.exports=function(){this.__data__=new r,this.size=0}},function(e,t){e.exports=function(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n}},function(e,t){e.exports=function(e){return this.__data__.get(e)}},function(e,t){e.exports=function(e){return this.__data__.has(e)}},function(e,t,n){var r=n(39),i=n(61),o=n(63);e.exports=function(e,t){var n=this.__data__;if(n instanceof r){var a=n.__data__;if(!i||a.length<199)return a.push([e,t]),this.size=++n.size,this;n=this.__data__=new o(a)}return n.set(e,t),this.size=n.size,this}},function(e,t,n){var r=n(102),i=n(205),o=n(62),a=n(103),l=/^\[object .+?Constructor\]$/,s=Function.prototype,c=Object.prototype,u=s.toString,f=c.hasOwnProperty,p=RegExp("^"+u.call(f).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");e.exports=function(e){return!(!o(e)||i(e))&&(r(e)?p:l).test(a(e))}},function(e,t,n){var r,i=n(206),o=(r=/[^.]+$/.exec(i&&i.keys&&i.keys.IE_PROTO||""))?"Symbol(src)_1."+r:"";e.exports=function(e){return!!o&&o in e}},function(e,t,n){var r=n(17)["__core-js_shared__"];e.exports=r},function(e,t){e.exports=function(e,t){return null==e?void 0:e[t]}},function(e,t,n){var r=n(209),i=n(39),o=n(61);e.exports=function(){this.size=0,this.__data__={hash:new r,map:new(o||i),string:new r}}},function(e,t,n){var r=n(210),i=n(211),o=n(212),a=n(213),l=n(214);function s(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}s.prototype.clear=r,s.prototype.delete=i,s.prototype.get=o,s.prototype.has=a,s.prototype.set=l,e.exports=s},function(e,t,n){var r=n(41);e.exports=function(){this.__data__=r?r(null):{},this.size=0}},function(e,t){e.exports=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}},function(e,t,n){var r=n(41),i=Object.prototype.hasOwnProperty;e.exports=function(e){var t=this.__data__;if(r){var n=t[e];return"__lodash_hash_undefined__"===n?void 0:n}return i.call(t,e)?t[e]:void 0}},function(e,t,n){var r=n(41),i=Object.prototype.hasOwnProperty;e.exports=function(e){var t=this.__data__;return r?void 0!==t[e]:i.call(t,e)}},function(e,t,n){var r=n(41);e.exports=function(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=r&&void 0===t?"__lodash_hash_undefined__":t,this}},function(e,t,n){var r=n(42);e.exports=function(e){var t=r(this,e).delete(e);return this.size-=t?1:0,t}},function(e,t){e.exports=function(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}},function(e,t,n){var r=n(42);e.exports=function(e){return r(this,e).get(e)}},function(e,t,n){var r=n(42);e.exports=function(e){return r(this,e).has(e)}},function(e,t,n){var r=n(42);e.exports=function(e,t){var n=r(this,e),i=n.size;return n.set(e,t),this.size+=n.size==i?0:1,this}},function(e,t,n){var r=n(100),i=n(105),o=n(224),a=n(227),l=n(243),s=n(15),c=n(109),u=n(112),f="[object Object]",p=Object.prototype.hasOwnProperty;e.exports=function(e,t,n,d,h,v){var m=s(e),g=s(t),b=m?"[object Array]":l(e),y=g?"[object Array]":l(t),_=(b="[object Arguments]"==b?f:b)==f,w=(y="[object Arguments]"==y?f:y)==f,x=b==y;if(x&&c(e)){if(!c(t))return!1;m=!0,_=!1}if(x&&!_)return v||(v=new r),m||u(e)?i(e,t,n,d,h,v):o(e,t,b,n,d,h,v);if(!(1&n)){var S=_&&p.call(e,"__wrapped__"),O=w&&p.call(t,"__wrapped__");if(S||O){var j=S?e.value():e,k=O?t.value():t;return v||(v=new r),h(j,k,n,d,v)}}return!!x&&(v||(v=new r),a(e,t,n,d,h,v))}},function(e,t){e.exports=function(e){return this.__data__.set(e,"__lodash_hash_undefined__"),this}},function(e,t){e.exports=function(e){return this.__data__.has(e)}},function(e,t){e.exports=function(e,t){for(var n=-1,r=null==e?0:e.length;++n<r;)if(t(e[n],n,e))return!0;return!1}},function(e,t,n){var r=n(29),i=n(225),o=n(101),a=n(105),l=n(226),s=n(64),c=r?r.prototype:void 0,u=c?c.valueOf:void 0;e.exports=function(e,t,n,r,c,f,p){switch(n){case"[object DataView]":if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case"[object ArrayBuffer]":return!(e.byteLength!=t.byteLength||!f(new i(e),new i(t)));case"[object Boolean]":case"[object Date]":case"[object Number]":return o(+e,+t);case"[object Error]":return e.name==t.name&&e.message==t.message;case"[object RegExp]":case"[object String]":return e==t+"";case"[object Map]":var d=l;case"[object Set]":var h=1&r;if(d||(d=s),e.size!=t.size&&!h)return!1;var v=p.get(e);if(v)return v==t;r|=2,p.set(e,t);var m=a(d(e),d(t),r,c,f,p);return p.delete(e),m;case"[object Symbol]":if(u)return u.call(e)==u.call(t)}return!1}},function(e,t,n){var r=n(17).Uint8Array;e.exports=r},function(e,t){e.exports=function(e){var t=-1,n=Array(e.size);return e.forEach((function(e,r){n[++t]=[r,e]})),n}},function(e,t,n){var r=n(228),i=Object.prototype.hasOwnProperty;e.exports=function(e,t,n,o,a,l){var s=1&n,c=r(e),u=c.length;if(u!=r(t).length&&!s)return!1;for(var f=u;f--;){var p=c[f];if(!(s?p in t:i.call(t,p)))return!1}var d=l.get(e),h=l.get(t);if(d&&h)return d==t&&h==e;var v=!0;l.set(e,t),l.set(t,e);for(var m=s;++f<u;){var g=e[p=c[f]],b=t[p];if(o)var y=s?o(b,g,p,t,e,l):o(g,b,p,e,t,l);if(!(void 0===y?g===b||a(g,b,n,o,l):y)){v=!1;break}m||(m="constructor"==p)}if(v&&!m){var _=e.constructor,w=t.constructor;_==w||!("constructor"in e)||!("constructor"in t)||"function"==typeof _&&_ instanceof _&&"function"==typeof w&&w instanceof w||(v=!1)}return l.delete(e),l.delete(t),v}},function(e,t,n){var r=n(229),i=n(230),o=n(108);e.exports=function(e){return r(e,o,i)}},function(e,t,n){var r=n(98),i=n(15);e.exports=function(e,t,n){var o=t(e);return i(e)?o:r(o,n(e))}},function(e,t,n){var r=n(231),i=n(232),o=Object.prototype.propertyIsEnumerable,a=Object.getOwnPropertySymbols,l=a?function(e){return null==e?[]:(e=Object(e),r(a(e),(function(t){return o.call(e,t)})))}:i;e.exports=l},function(e,t){e.exports=function(e,t){for(var n=-1,r=null==e?0:e.length,i=0,o=[];++n<r;){var a=e[n];t(a,n,e)&&(o[i++]=a)}return o}},function(e,t){e.exports=function(){return[]}},function(e,t,n){var r=n(234),i=n(60),o=n(15),a=n(109),l=n(111),s=n(112),c=Object.prototype.hasOwnProperty;e.exports=function(e,t){var n=o(e),u=!n&&i(e),f=!n&&!u&&a(e),p=!n&&!u&&!f&&s(e),d=n||u||f||p,h=d?r(e.length,String):[],v=h.length;for(var m in e)!t&&!c.call(e,m)||d&&("length"==m||f&&("offset"==m||"parent"==m)||p&&("buffer"==m||"byteLength"==m||"byteOffset"==m)||l(m,v))||h.push(m);return h}},function(e,t){e.exports=function(e,t){for(var n=-1,r=Array(e);++n<e;)r[n]=t(n);return r}},function(e,t){e.exports=function(){return!1}},function(e,t,n){var r=n(27),i=n(65),o=n(22),a={};a["[object Float32Array]"]=a["[object Float64Array]"]=a["[object Int8Array]"]=a["[object Int16Array]"]=a["[object Int32Array]"]=a["[object Uint8Array]"]=a["[object Uint8ClampedArray]"]=a["[object Uint16Array]"]=a["[object Uint32Array]"]=!0,a["[object Arguments]"]=a["[object Array]"]=a["[object ArrayBuffer]"]=a["[object Boolean]"]=a["[object DataView]"]=a["[object Date]"]=a["[object Error]"]=a["[object Function]"]=a["[object Map]"]=a["[object Number]"]=a["[object Object]"]=a["[object RegExp]"]=a["[object Set]"]=a["[object String]"]=a["[object WeakMap]"]=!1,e.exports=function(e){return o(e)&&i(e.length)&&!!a[r(e)]}},function(e,t){e.exports=function(e){return function(t){return e(t)}}},function(e,t,n){(function(e){var r=n(99),i=t&&!t.nodeType&&t,o=i&&"object"==typeof e&&e&&!e.nodeType&&e,a=o&&o.exports===i&&r.process,l=function(){try{var e=o&&o.require&&o.require("util").types;return e||a&&a.binding&&a.binding("util")}catch(e){}}();e.exports=l}).call(this,n(110)(e))},function(e,t,n){var r=n(240),i=n(241),o=Object.prototype.hasOwnProperty;e.exports=function(e){if(!r(e))return i(e);var t=[];for(var n in Object(e))o.call(e,n)&&"constructor"!=n&&t.push(n);return t}},function(e,t){var n=Object.prototype;e.exports=function(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||n)}},function(e,t,n){var r=n(242)(Object.keys,Object);e.exports=r},function(e,t){e.exports=function(e,t){return function(n){return e(t(n))}}},function(e,t,n){var r=n(244),i=n(61),o=n(245),a=n(114),l=n(246),s=n(27),c=n(103),u=c(r),f=c(i),p=c(o),d=c(a),h=c(l),v=s;(r&&"[object DataView]"!=v(new r(new ArrayBuffer(1)))||i&&"[object Map]"!=v(new i)||o&&"[object Promise]"!=v(o.resolve())||a&&"[object Set]"!=v(new a)||l&&"[object WeakMap]"!=v(new l))&&(v=function(e){var t=s(e),n="[object Object]"==t?e.constructor:void 0,r=n?c(n):"";if(r)switch(r){case u:return"[object DataView]";case f:return"[object Map]";case p:return"[object Promise]";case d:return"[object Set]";case h:return"[object WeakMap]"}return t}),e.exports=v},function(e,t,n){var r=n(21)(n(17),"DataView");e.exports=r},function(e,t,n){var r=n(21)(n(17),"Promise");e.exports=r},function(e,t,n){var r=n(21)(n(17),"WeakMap");e.exports=r},function(e,t,n){var r=n(115),i=n(108);e.exports=function(e){for(var t=i(e),n=t.length;n--;){var o=t[n],a=e[o];t[n]=[o,a,r(a)]}return t}},function(e,t,n){var r=n(104),i=n(44),o=n(255),a=n(66),l=n(115),s=n(116),c=n(43);e.exports=function(e,t){return a(e)&&l(t)?s(c(e),t):function(n){var a=i(n,e);return void 0===a&&a===t?o(n,e):r(t,a,3)}}},function(e,t,n){var r=n(250),i=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,o=/\\(\\)?/g,a=r((function(e){var t=[];return 46===e.charCodeAt(0)&&t.push(""),e.replace(i,(function(e,n,r,i){t.push(r?i.replace(o,"$1"):n||e)})),t}));e.exports=a},function(e,t,n){var r=n(251);e.exports=function(e){var t=r(e,(function(e){return 500===n.size&&n.clear(),e})),n=t.cache;return t}},function(e,t,n){var r=n(63);function i(e,t){if("function"!=typeof e||null!=t&&"function"!=typeof t)throw new TypeError("Expected a function");var n=function(){var r=arguments,i=t?t.apply(this,r):r[0],o=n.cache;if(o.has(i))return o.get(i);var a=e.apply(this,r);return n.cache=o.set(i,a)||o,a};return n.cache=new(i.Cache||r),n}i.Cache=r,e.exports=i},function(e,t,n){var r=n(253);e.exports=function(e){return null==e?"":r(e)}},function(e,t,n){var r=n(29),i=n(254),o=n(15),a=n(67),l=r?r.prototype:void 0,s=l?l.toString:void 0;e.exports=function e(t){if("string"==typeof t)return t;if(o(t))return i(t,e)+"";if(a(t))return s?s.call(t):"";var n=t+"";return"0"==n&&1/t==-1/0?"-0":n}},function(e,t){e.exports=function(e,t){for(var n=-1,r=null==e?0:e.length,i=Array(r);++n<r;)i[n]=t(e[n],n,e);return i}},function(e,t,n){var r=n(256),i=n(257);e.exports=function(e,t){return null!=e&&i(e,t,r)}},function(e,t){e.exports=function(e,t){return null!=e&&t in Object(e)}},function(e,t,n){var r=n(118),i=n(60),o=n(15),a=n(111),l=n(65),s=n(43);e.exports=function(e,t,n){for(var c=-1,u=(t=r(t,e)).length,f=!1;++c<u;){var p=s(t[c]);if(!(f=null!=e&&n(e,p)))break;e=e[p]}return f||++c!=u?f:!!(u=null==e?0:e.length)&&l(u)&&a(p,u)&&(o(e)||i(e))}},function(e,t,n){var r=n(259),i=n(260),o=n(66),a=n(43);e.exports=function(e){return o(e)?r(a(e)):i(e)}},function(e,t){e.exports=function(e){return function(t){return null==t?void 0:t[e]}}},function(e,t,n){var r=n(117);e.exports=function(e){return function(t){return r(t,e)}}},function(e,t,n){var r=n(68),i=n(262),o=n(264);e.exports=function(e,t){return o(i(e,t,r),e+"")}},function(e,t,n){var r=n(263),i=Math.max;e.exports=function(e,t,n){return t=i(void 0===t?e.length-1:t,0),function(){for(var o=arguments,a=-1,l=i(o.length-t,0),s=Array(l);++a<l;)s[a]=o[t+a];a=-1;for(var c=Array(t+1);++a<t;)c[a]=o[a];return c[t]=n(s),r(e,this,c)}}},function(e,t){e.exports=function(e,t,n){switch(n.length){case 0:return e.call(t);case 1:return e.call(t,n[0]);case 2:return e.call(t,n[0],n[1]);case 3:return e.call(t,n[0],n[1],n[2])}return e.apply(t,n)}},function(e,t,n){var r=n(265),i=n(268)(r);e.exports=i},function(e,t,n){var r=n(266),i=n(267),o=n(68),a=i?function(e,t){return i(e,"toString",{configurable:!0,enumerable:!1,value:r(t),writable:!0})}:o;e.exports=a},function(e,t){e.exports=function(e){return function(){return e}}},function(e,t,n){var r=n(21),i=function(){try{var e=r(Object,"defineProperty");return e({},"",{}),e}catch(e){}}();e.exports=i},function(e,t){var n=Date.now;e.exports=function(e){var t=0,r=0;return function(){var i=n(),o=16-(i-r);if(r=i,o>0){if(++t>=800)return arguments[0]}else t=0;return e.apply(void 0,arguments)}}},function(e,t,n){var r=n(106),i=n(270),o=n(275),a=n(107),l=n(276),s=n(64);e.exports=function(e,t,n){var c=-1,u=i,f=e.length,p=!0,d=[],h=d;if(n)p=!1,u=o;else if(f>=200){var v=t?null:l(e);if(v)return s(v);p=!1,u=a,h=new r}else h=t?[]:d;e:for(;++c<f;){var m=e[c],g=t?t(m):m;if(m=n||0!==m?m:0,p&&g==g){for(var b=h.length;b--;)if(h[b]===g)continue e;t&&h.push(g),d.push(m)}else u(h,g,n)||(h!==d&&h.push(g),d.push(m))}return d}},function(e,t,n){var r=n(271);e.exports=function(e,t){return!!(null==e?0:e.length)&&r(e,t,0)>-1}},function(e,t,n){var r=n(272),i=n(273),o=n(274);e.exports=function(e,t,n){return t==t?o(e,t,n):r(e,i,n)}},function(e,t){e.exports=function(e,t,n,r){for(var i=e.length,o=n+(r?1:-1);r?o--:++o<i;)if(t(e[o],o,e))return o;return-1}},function(e,t){e.exports=function(e){return e!=e}},function(e,t){e.exports=function(e,t,n){for(var r=n-1,i=e.length;++r<i;)if(e[r]===t)return r;return-1}},function(e,t){e.exports=function(e,t,n){for(var r=-1,i=null==e?0:e.length;++r<i;)if(n(t,e[r]))return!0;return!1}},function(e,t,n){var r=n(114),i=n(277),o=n(64),a=r&&1/o(new r([,-0]))[1]==1/0?function(e){return new r(e)}:i;e.exports=a},function(e,t){e.exports=function(){}},function(e,t,n){var r=n(113),i=n(22);e.exports=function(e){return i(e)&&r(e)}},function(e,t,n){"use strict";var r=n(14),i=n(49),o=n(11),a=n(5),l=n(26);r({target:"Iterator",proto:!0,real:!0},{some:function(e){a(this),o(e);var t=l(this),n=0;return i(t,(function(t,r){if(e(t,n++))return r()}),{IS_RECORD:!0,INTERRUPTED:!0}).stopped}})},function(e,t,n){"use strict";n(119)},function(e,t,n){},function(e,t,n){"use strict";n(120)},function(e,t){},function(e,t,n){},function(e,t,n){},function(e,t,n){"use strict";n(121)},function(e,t,n){"use strict";n(122)},function(e,t,n){"use strict";n(123)},function(e,t,n){"use strict";n.r(t);n(10),n(19),n(30);var r=n(2);function i(e,t){for(var n in t)e[n]=t[n];return e}var o=/[!'()*]/g,a=function(e){return"%"+e.charCodeAt(0).toString(16)},l=/%2C/g,s=function(e){return encodeURIComponent(e).replace(o,a).replace(l,",")};function c(e){try{return decodeURIComponent(e)}catch(e){0}return e}var u=function(e){return null==e||"object"==typeof e?e:String(e)};function f(e){var t={};return(e=e.trim().replace(/^(\?|#|&)/,""))?(e.split("&").forEach((function(e){var n=e.replace(/\+/g," ").split("="),r=c(n.shift()),i=n.length>0?c(n.join("=")):null;void 0===t[r]?t[r]=i:Array.isArray(t[r])?t[r].push(i):t[r]=[t[r],i]})),t):t}function p(e){var t=e?Object.keys(e).map((function(t){var n=e[t];if(void 0===n)return"";if(null===n)return s(t);if(Array.isArray(n)){var r=[];return n.forEach((function(e){void 0!==e&&(null===e?r.push(s(t)):r.push(s(t)+"="+s(e)))})),r.join("&")}return s(t)+"="+s(n)})).filter((function(e){return e.length>0})).join("&"):null;return t?"?"+t:""}var d=/\/?$/;function h(e,t,n,r){var i=r&&r.options.stringifyQuery,o=t.query||{};try{o=v(o)}catch(e){}var a={name:t.name||e&&e.name,meta:e&&e.meta||{},path:t.path||"/",hash:t.hash||"",query:o,params:t.params||{},fullPath:b(t,i),matched:e?g(e):[]};return n&&(a.redirectedFrom=b(n,i)),Object.freeze(a)}function v(e){if(Array.isArray(e))return e.map(v);if(e&&"object"==typeof e){var t={};for(var n in e)t[n]=v(e[n]);return t}return e}var m=h(null,{path:"/"});function g(e){for(var t=[];e;)t.unshift(e),e=e.parent;return t}function b(e,t){var n=e.path,r=e.query;void 0===r&&(r={});var i=e.hash;return void 0===i&&(i=""),(n||"/")+(t||p)(r)+i}function y(e,t,n){return t===m?e===t:!!t&&(e.path&&t.path?e.path.replace(d,"")===t.path.replace(d,"")&&(n||e.hash===t.hash&&_(e.query,t.query)):!(!e.name||!t.name)&&(e.name===t.name&&(n||e.hash===t.hash&&_(e.query,t.query)&&_(e.params,t.params))))}function _(e,t){if(void 0===e&&(e={}),void 0===t&&(t={}),!e||!t)return e===t;var n=Object.keys(e).sort(),r=Object.keys(t).sort();return n.length===r.length&&n.every((function(n,i){var o=e[n];if(r[i]!==n)return!1;var a=t[n];return null==o||null==a?o===a:"object"==typeof o&&"object"==typeof a?_(o,a):String(o)===String(a)}))}function w(e){for(var t=0;t<e.matched.length;t++){var n=e.matched[t];for(var r in n.instances){var i=n.instances[r],o=n.enteredCbs[r];if(i&&o){delete n.enteredCbs[r];for(var a=0;a<o.length;a++)i._isBeingDestroyed||o[a](i)}}}}var x={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(e,t){var n=t.props,r=t.children,o=t.parent,a=t.data;a.routerView=!0;for(var l=o.$createElement,s=n.name,c=o.$route,u=o._routerViewCache||(o._routerViewCache={}),f=0,p=!1;o&&o._routerRoot!==o;){var d=o.$vnode?o.$vnode.data:{};d.routerView&&f++,d.keepAlive&&o._directInactive&&o._inactive&&(p=!0),o=o.$parent}if(a.routerViewDepth=f,p){var h=u[s],v=h&&h.component;return v?(h.configProps&&S(v,a,h.route,h.configProps),l(v,a,r)):l()}var m=c.matched[f],g=m&&m.components[s];if(!m||!g)return u[s]=null,l();u[s]={component:g},a.registerRouteInstance=function(e,t){var n=m.instances[s];(t&&n!==e||!t&&n===e)&&(m.instances[s]=t)},(a.hook||(a.hook={})).prepatch=function(e,t){m.instances[s]=t.componentInstance},a.hook.init=function(e){e.data.keepAlive&&e.componentInstance&&e.componentInstance!==m.instances[s]&&(m.instances[s]=e.componentInstance),w(c)};var b=m.props&&m.props[s];return b&&(i(u[s],{route:c,configProps:b}),S(g,a,c,b)),l(g,a,r)}};function S(e,t,n,r){var o=t.props=function(e,t){switch(typeof t){case"undefined":return;case"object":return t;case"function":return t(e);case"boolean":return t?e.params:void 0;default:0}}(n,r);if(o){o=t.props=i({},o);var a=t.attrs=t.attrs||{};for(var l in o)e.props&&l in e.props||(a[l]=o[l],delete o[l])}}function O(e,t,n){var r=e.charAt(0);if("/"===r)return e;if("?"===r||"#"===r)return t+e;var i=t.split("/");n&&i[i.length-1]||i.pop();for(var o=e.replace(/^\//,"").split("/"),a=0;a<o.length;a++){var l=o[a];".."===l?i.pop():"."!==l&&i.push(l)}return""!==i[0]&&i.unshift(""),i.join("/")}function j(e){return e.replace(/\/(?:\s*\/)+/g,"/")}var k=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)},P=F,E=L,C=function(e,t){return $(L(e,t),t)},I=$,A=q,T=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function L(e,t){for(var n,r=[],i=0,o=0,a="",l=t&&t.delimiter||"/";null!=(n=T.exec(e));){var s=n[0],c=n[1],u=n.index;if(a+=e.slice(o,u),o=u+s.length,c)a+=c[1];else{var f=e[o],p=n[2],d=n[3],h=n[4],v=n[5],m=n[6],g=n[7];a&&(r.push(a),a="");var b=null!=p&&null!=f&&f!==p,y="+"===m||"*"===m,_="?"===m||"*"===m,w=n[2]||l,x=h||v;r.push({name:d||i++,prefix:p||"",delimiter:w,optional:_,repeat:y,partial:b,asterisk:!!g,pattern:x?M(x):g?".*":"[^"+R(w)+"]+?"})}}return o<e.length&&(a+=e.substr(o)),a&&r.push(a),r}function D(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function $(e,t){for(var n=new Array(e.length),r=0;r<e.length;r++)"object"==typeof e[r]&&(n[r]=new RegExp("^(?:"+e[r].pattern+")$",U(t)));return function(t,r){for(var i="",o=t||{},a=(r||{}).pretty?D:encodeURIComponent,l=0;l<e.length;l++){var s=e[l];if("string"!=typeof s){var c,u=o[s.name];if(null==u){if(s.optional){s.partial&&(i+=s.prefix);continue}throw new TypeError('Expected "'+s.name+'" to be defined')}if(k(u)){if(!s.repeat)throw new TypeError('Expected "'+s.name+'" to not repeat, but received `'+JSON.stringify(u)+"`");if(0===u.length){if(s.optional)continue;throw new TypeError('Expected "'+s.name+'" to not be empty')}for(var f=0;f<u.length;f++){if(c=a(u[f]),!n[l].test(c))throw new TypeError('Expected all "'+s.name+'" to match "'+s.pattern+'", but received `'+JSON.stringify(c)+"`");i+=(0===f?s.prefix:s.delimiter)+c}}else{if(c=s.asterisk?encodeURI(u).replace(/[?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})):a(u),!n[l].test(c))throw new TypeError('Expected "'+s.name+'" to match "'+s.pattern+'", but received "'+c+'"');i+=s.prefix+c}}else i+=s}return i}}function R(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function M(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function N(e,t){return e.keys=t,e}function U(e){return e&&e.sensitive?"":"i"}function q(e,t,n){k(t)||(n=t||n,t=[]);for(var r=(n=n||{}).strict,i=!1!==n.end,o="",a=0;a<e.length;a++){var l=e[a];if("string"==typeof l)o+=R(l);else{var s=R(l.prefix),c="(?:"+l.pattern+")";t.push(l),l.repeat&&(c+="(?:"+s+c+")*"),o+=c=l.optional?l.partial?s+"("+c+")?":"(?:"+s+"("+c+"))?":s+"("+c+")"}}var u=R(n.delimiter||"/"),f=o.slice(-u.length)===u;return r||(o=(f?o.slice(0,-u.length):o)+"(?:"+u+"(?=$))?"),o+=i?"$":r&&f?"":"(?="+u+"|$)",N(new RegExp("^"+o,U(n)),t)}function F(e,t,n){return k(t)||(n=t||n,t=[]),n=n||{},e instanceof RegExp?function(e,t){var n=e.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)t.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return N(e,t)}(e,t):k(e)?function(e,t,n){for(var r=[],i=0;i<e.length;i++)r.push(F(e[i],t,n).source);return N(new RegExp("(?:"+r.join("|")+")",U(n)),t)}(e,t,n):function(e,t,n){return q(L(e,n),t,n)}(e,t,n)}P.parse=E,P.compile=C,P.tokensToFunction=I,P.tokensToRegExp=A;var B=Object.create(null);function H(e,t,n){t=t||{};try{var r=B[e]||(B[e]=P.compile(e));return"string"==typeof t.pathMatch&&(t[0]=t.pathMatch),r(t,{pretty:!0})}catch(e){return""}finally{delete t[0]}}function z(e,t,n,r){var o="string"==typeof e?{path:e}:e;if(o._normalized)return o;if(o.name){var a=(o=i({},e)).params;return a&&"object"==typeof a&&(o.params=i({},a)),o}if(!o.path&&o.params&&t){(o=i({},o))._normalized=!0;var l=i(i({},t.params),o.params);if(t.name)o.name=t.name,o.params=l;else if(t.matched.length){var s=t.matched[t.matched.length-1].path;o.path=H(s,l,t.path)}else 0;return o}var c=function(e){var t="",n="",r=e.indexOf("#");r>=0&&(t=e.slice(r),e=e.slice(0,r));var i=e.indexOf("?");return i>=0&&(n=e.slice(i+1),e=e.slice(0,i)),{path:e,query:n,hash:t}}(o.path||""),p=t&&t.path||"/",d=c.path?O(c.path,p,n||o.append):p,h=function(e,t,n){void 0===t&&(t={});var r,i=n||f;try{r=i(e||"")}catch(e){r={}}for(var o in t){var a=t[o];r[o]=Array.isArray(a)?a.map(u):u(a)}return r}(c.query,o.query,r&&r.options.parseQuery),v=o.hash||c.hash;return v&&"#"!==v.charAt(0)&&(v="#"+v),{_normalized:!0,path:d,query:h,hash:v}}var V,W=function(){},K={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},custom:Boolean,exact:Boolean,exactPath:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,ariaCurrentValue:{type:String,default:"page"},event:{type:[String,Array],default:"click"}},render:function(e){var t=this,n=this.$router,r=this.$route,o=n.resolve(this.to,r,this.append),a=o.location,l=o.route,s=o.href,c={},u=n.options.linkActiveClass,f=n.options.linkExactActiveClass,p=null==u?"router-link-active":u,v=null==f?"router-link-exact-active":f,m=null==this.activeClass?p:this.activeClass,g=null==this.exactActiveClass?v:this.exactActiveClass,b=l.redirectedFrom?h(null,z(l.redirectedFrom),null,n):l;c[g]=y(r,b,this.exactPath),c[m]=this.exact||this.exactPath?c[g]:function(e,t){return 0===e.path.replace(d,"/").indexOf(t.path.replace(d,"/"))&&(!t.hash||e.hash===t.hash)&&function(e,t){for(var n in t)if(!(n in e))return!1;return!0}(e.query,t.query)}(r,b);var _=c[g]?this.ariaCurrentValue:null,w=function(e){G(e)&&(t.replace?n.replace(a,W):n.push(a,W))},x={click:G};Array.isArray(this.event)?this.event.forEach((function(e){x[e]=w})):x[this.event]=w;var S={class:c},O=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:s,route:l,navigate:w,isActive:c[m],isExactActive:c[g]});if(O){if(1===O.length)return O[0];if(O.length>1||!O.length)return 0===O.length?e():e("span",{},O)}if("a"===this.tag)S.on=x,S.attrs={href:s,"aria-current":_};else{var j=function e(t){var n;if(t)for(var r=0;r<t.length;r++){if("a"===(n=t[r]).tag)return n;if(n.children&&(n=e(n.children)))return n}}(this.$slots.default);if(j){j.isStatic=!1;var k=j.data=i({},j.data);for(var P in k.on=k.on||{},k.on){var E=k.on[P];P in x&&(k.on[P]=Array.isArray(E)?E:[E])}for(var C in x)C in k.on?k.on[C].push(x[C]):k.on[C]=w;var I=j.data.attrs=i({},j.data.attrs);I.href=s,I["aria-current"]=_}else S.on=x}return e(this.tag,S,this.$slots.default)}};function G(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey||e.defaultPrevented||void 0!==e.button&&0!==e.button)){if(e.currentTarget&&e.currentTarget.getAttribute){var t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}var J="undefined"!=typeof window;function Q(e,t,n,r,i){var o=t||[],a=n||Object.create(null),l=r||Object.create(null);e.forEach((function(e){!function e(t,n,r,i,o,a){var l=i.path,s=i.name;0;var c=i.pathToRegexpOptions||{},u=function(e,t,n){n||(e=e.replace(/\/$/,""));if("/"===e[0])return e;if(null==t)return e;return j(t.path+"/"+e)}(l,o,c.strict);"boolean"==typeof i.caseSensitive&&(c.sensitive=i.caseSensitive);var f={path:u,regex:Z(u,c),components:i.components||{default:i.component},alias:i.alias?"string"==typeof i.alias?[i.alias]:i.alias:[],instances:{},enteredCbs:{},name:s,parent:o,matchAs:a,redirect:i.redirect,beforeEnter:i.beforeEnter,meta:i.meta||{},props:null==i.props?{}:i.components?i.props:{default:i.props}};i.children&&i.children.forEach((function(i){var o=a?j(a+"/"+i.path):void 0;e(t,n,r,i,f,o)}));n[f.path]||(t.push(f.path),n[f.path]=f);if(void 0!==i.alias)for(var p=Array.isArray(i.alias)?i.alias:[i.alias],d=0;d<p.length;++d){0;var h={path:p[d],children:i.children};e(t,n,r,h,o,f.path||"/")}s&&(r[s]||(r[s]=f))}(o,a,l,e,i)}));for(var s=0,c=o.length;s<c;s++)"*"===o[s]&&(o.push(o.splice(s,1)[0]),c--,s--);return{pathList:o,pathMap:a,nameMap:l}}function Z(e,t){return P(e,[],t)}function Y(e,t){var n=Q(e),r=n.pathList,i=n.pathMap,o=n.nameMap;function a(e,n,a){var l=z(e,n,!1,t),c=l.name;if(c){var u=o[c];if(!u)return s(null,l);var f=u.regex.keys.filter((function(e){return!e.optional})).map((function(e){return e.name}));if("object"!=typeof l.params&&(l.params={}),n&&"object"==typeof n.params)for(var p in n.params)!(p in l.params)&&f.indexOf(p)>-1&&(l.params[p]=n.params[p]);return l.path=H(u.path,l.params),s(u,l,a)}if(l.path){l.params={};for(var d=0;d<r.length;d++){var h=r[d],v=i[h];if(X(v.regex,l.path,l.params))return s(v,l,a)}}return s(null,l)}function l(e,n){var r=e.redirect,i="function"==typeof r?r(h(e,n,null,t)):r;if("string"==typeof i&&(i={path:i}),!i||"object"!=typeof i)return s(null,n);var l=i,c=l.name,u=l.path,f=n.query,p=n.hash,d=n.params;if(f=l.hasOwnProperty("query")?l.query:f,p=l.hasOwnProperty("hash")?l.hash:p,d=l.hasOwnProperty("params")?l.params:d,c){o[c];return a({_normalized:!0,name:c,query:f,hash:p,params:d},void 0,n)}if(u){var v=function(e,t){return O(e,t.parent?t.parent.path:"/",!0)}(u,e);return a({_normalized:!0,path:H(v,d),query:f,hash:p},void 0,n)}return s(null,n)}function s(e,n,r){return e&&e.redirect?l(e,r||n):e&&e.matchAs?function(e,t,n){var r=a({_normalized:!0,path:H(n,t.params)});if(r){var i=r.matched,o=i[i.length-1];return t.params=r.params,s(o,t)}return s(null,t)}(0,n,e.matchAs):h(e,n,r,t)}return{match:a,addRoute:function(e,t){var n="object"!=typeof e?o[e]:void 0;Q([t||e],r,i,o,n),n&&n.alias.length&&Q(n.alias.map((function(e){return{path:e,children:[t]}})),r,i,o,n)},getRoutes:function(){return r.map((function(e){return i[e]}))},addRoutes:function(e){Q(e,r,i,o)}}}function X(e,t,n){var r=t.match(e);if(!r)return!1;if(!n)return!0;for(var i=1,o=r.length;i<o;++i){var a=e.keys[i-1];a&&(n[a.name||"pathMatch"]="string"==typeof r[i]?c(r[i]):r[i])}return!0}var ee=J&&window.performance&&window.performance.now?window.performance:Date;function te(){return ee.now().toFixed(3)}var ne=te();function re(){return ne}function ie(e){return ne=e}var oe=Object.create(null);function ae(){"scrollRestoration"in window.history&&(window.history.scrollRestoration="manual");var e=window.location.protocol+"//"+window.location.host,t=window.location.href.replace(e,""),n=i({},window.history.state);return n.key=re(),window.history.replaceState(n,"",t),window.addEventListener("popstate",ce),function(){window.removeEventListener("popstate",ce)}}function le(e,t,n,r){if(e.app){var i=e.options.scrollBehavior;i&&e.app.$nextTick((function(){var o=function(){var e=re();if(e)return oe[e]}(),a=i.call(e,t,n,r?o:null);a&&("function"==typeof a.then?a.then((function(e){he(e,o)})).catch((function(e){0})):he(a,o))}))}}function se(){var e=re();e&&(oe[e]={x:window.pageXOffset,y:window.pageYOffset})}function ce(e){se(),e.state&&e.state.key&&ie(e.state.key)}function ue(e){return pe(e.x)||pe(e.y)}function fe(e){return{x:pe(e.x)?e.x:window.pageXOffset,y:pe(e.y)?e.y:window.pageYOffset}}function pe(e){return"number"==typeof e}var de=/^#\d/;function he(e,t){var n,r="object"==typeof e;if(r&&"string"==typeof e.selector){var i=de.test(e.selector)?document.getElementById(e.selector.slice(1)):document.querySelector(e.selector);if(i){var o=e.offset&&"object"==typeof e.offset?e.offset:{};t=function(e,t){var n=document.documentElement.getBoundingClientRect(),r=e.getBoundingClientRect();return{x:r.left-n.left-t.x,y:r.top-n.top-t.y}}(i,o={x:pe((n=o).x)?n.x:0,y:pe(n.y)?n.y:0})}else ue(e)&&(t=fe(e))}else r&&ue(e)&&(t=fe(e));t&&("scrollBehavior"in document.documentElement.style?window.scrollTo({left:t.x,top:t.y,behavior:e.behavior}):window.scrollTo(t.x,t.y))}var ve,me=J&&((-1===(ve=window.navigator.userAgent).indexOf("Android 2.")&&-1===ve.indexOf("Android 4.0")||-1===ve.indexOf("Mobile Safari")||-1!==ve.indexOf("Chrome")||-1!==ve.indexOf("Windows Phone"))&&window.history&&"function"==typeof window.history.pushState);function ge(e,t){se();var n=window.history;try{if(t){var r=i({},n.state);r.key=re(),n.replaceState(r,"",e)}else n.pushState({key:ie(te())},"",e)}catch(n){window.location[t?"replace":"assign"](e)}}function be(e){ge(e,!0)}var ye={redirected:2,aborted:4,cancelled:8,duplicated:16};function _e(e,t){return xe(e,t,ye.redirected,'Redirected when going from "'+e.fullPath+'" to "'+function(e){if("string"==typeof e)return e;if("path"in e)return e.path;var t={};return Se.forEach((function(n){n in e&&(t[n]=e[n])})),JSON.stringify(t,null,2)}(t)+'" via a navigation guard.')}function we(e,t){return xe(e,t,ye.cancelled,'Navigation cancelled from "'+e.fullPath+'" to "'+t.fullPath+'" with a new navigation.')}function xe(e,t,n,r){var i=new Error(r);return i._isRouter=!0,i.from=e,i.to=t,i.type=n,i}var Se=["params","query","hash"];function Oe(e){return Object.prototype.toString.call(e).indexOf("Error")>-1}function je(e,t){return Oe(e)&&e._isRouter&&(null==t||e.type===t)}function ke(e,t,n){var r=function(i){i>=e.length?n():e[i]?t(e[i],(function(){r(i+1)})):r(i+1)};r(0)}function Pe(e){return function(t,n,r){var i=!1,o=0,a=null;Ee(e,(function(e,t,n,l){if("function"==typeof e&&void 0===e.cid){i=!0,o++;var s,c=Ae((function(t){var i;((i=t).__esModule||Ie&&"Module"===i[Symbol.toStringTag])&&(t=t.default),e.resolved="function"==typeof t?t:V.extend(t),n.components[l]=t,--o<=0&&r()})),u=Ae((function(e){var t="Failed to resolve async component "+l+": "+e;a||(a=Oe(e)?e:new Error(t),r(a))}));try{s=e(c,u)}catch(e){u(e)}if(s)if("function"==typeof s.then)s.then(c,u);else{var f=s.component;f&&"function"==typeof f.then&&f.then(c,u)}}})),i||r()}}function Ee(e,t){return Ce(e.map((function(e){return Object.keys(e.components).map((function(n){return t(e.components[n],e.instances[n],e,n)}))})))}function Ce(e){return Array.prototype.concat.apply([],e)}var Ie="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function Ae(e){var t=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!t)return t=!0,e.apply(this,n)}}var Te=function(e,t){this.router=e,this.base=function(e){if(!e)if(J){var t=document.querySelector("base");e=(e=t&&t.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else e="/";"/"!==e.charAt(0)&&(e="/"+e);return e.replace(/\/$/,"")}(t),this.current=m,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[],this.listeners=[]};function Le(e,t,n,r){var i=Ee(e,(function(e,r,i,o){var a=function(e,t){"function"!=typeof e&&(e=V.extend(e));return e.options[t]}(e,t);if(a)return Array.isArray(a)?a.map((function(e){return n(e,r,i,o)})):n(a,r,i,o)}));return Ce(r?i.reverse():i)}function De(e,t){if(t)return function(){return e.apply(t,arguments)}}Te.prototype.listen=function(e){this.cb=e},Te.prototype.onReady=function(e,t){this.ready?e():(this.readyCbs.push(e),t&&this.readyErrorCbs.push(t))},Te.prototype.onError=function(e){this.errorCbs.push(e)},Te.prototype.transitionTo=function(e,t,n){var r,i=this;try{r=this.router.match(e,this.current)}catch(e){throw this.errorCbs.forEach((function(t){t(e)})),e}var o=this.current;this.confirmTransition(r,(function(){i.updateRoute(r),t&&t(r),i.ensureURL(),i.router.afterHooks.forEach((function(e){e&&e(r,o)})),i.ready||(i.ready=!0,i.readyCbs.forEach((function(e){e(r)})))}),(function(e){n&&n(e),e&&!i.ready&&(je(e,ye.redirected)&&o===m||(i.ready=!0,i.readyErrorCbs.forEach((function(t){t(e)}))))}))},Te.prototype.confirmTransition=function(e,t,n){var r=this,i=this.current;this.pending=e;var o,a,l=function(e){!je(e)&&Oe(e)&&(r.errorCbs.length?r.errorCbs.forEach((function(t){t(e)})):console.error(e)),n&&n(e)},s=e.matched.length-1,c=i.matched.length-1;if(y(e,i)&&s===c&&e.matched[s]===i.matched[c])return this.ensureURL(),e.hash&&le(this.router,i,e,!1),l(((a=xe(o=i,e,ye.duplicated,'Avoided redundant navigation to current location: "'+o.fullPath+'".')).name="NavigationDuplicated",a));var u=function(e,t){var n,r=Math.max(e.length,t.length);for(n=0;n<r&&e[n]===t[n];n++);return{updated:t.slice(0,n),activated:t.slice(n),deactivated:e.slice(n)}}(this.current.matched,e.matched),f=u.updated,p=u.deactivated,d=u.activated,h=[].concat(function(e){return Le(e,"beforeRouteLeave",De,!0)}(p),this.router.beforeHooks,function(e){return Le(e,"beforeRouteUpdate",De)}(f),d.map((function(e){return e.beforeEnter})),Pe(d)),v=function(t,n){if(r.pending!==e)return l(we(i,e));try{t(e,i,(function(t){!1===t?(r.ensureURL(!0),l(function(e,t){return xe(e,t,ye.aborted,'Navigation aborted from "'+e.fullPath+'" to "'+t.fullPath+'" via a navigation guard.')}(i,e))):Oe(t)?(r.ensureURL(!0),l(t)):"string"==typeof t||"object"==typeof t&&("string"==typeof t.path||"string"==typeof t.name)?(l(_e(i,e)),"object"==typeof t&&t.replace?r.replace(t):r.push(t)):n(t)}))}catch(e){l(e)}};ke(h,v,(function(){ke(function(e){return Le(e,"beforeRouteEnter",(function(e,t,n,r){return function(e,t,n){return function(r,i,o){return e(r,i,(function(e){"function"==typeof e&&(t.enteredCbs[n]||(t.enteredCbs[n]=[]),t.enteredCbs[n].push(e)),o(e)}))}}(e,n,r)}))}(d).concat(r.router.resolveHooks),v,(function(){if(r.pending!==e)return l(we(i,e));r.pending=null,t(e),r.router.app&&r.router.app.$nextTick((function(){w(e)}))}))}))},Te.prototype.updateRoute=function(e){this.current=e,this.cb&&this.cb(e)},Te.prototype.setupListeners=function(){},Te.prototype.teardown=function(){this.listeners.forEach((function(e){e()})),this.listeners=[],this.current=m,this.pending=null};var $e=function(e){function t(t,n){e.call(this,t,n),this._startLocation=Re(this.base)}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.setupListeners=function(){var e=this;if(!(this.listeners.length>0)){var t=this.router,n=t.options.scrollBehavior,r=me&&n;r&&this.listeners.push(ae());var i=function(){var n=e.current,i=Re(e.base);e.current===m&&i===e._startLocation||e.transitionTo(i,(function(e){r&&le(t,e,n,!0)}))};window.addEventListener("popstate",i),this.listeners.push((function(){window.removeEventListener("popstate",i)}))}},t.prototype.go=function(e){window.history.go(e)},t.prototype.push=function(e,t,n){var r=this,i=this.current;this.transitionTo(e,(function(e){ge(j(r.base+e.fullPath)),le(r.router,e,i,!1),t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this,i=this.current;this.transitionTo(e,(function(e){be(j(r.base+e.fullPath)),le(r.router,e,i,!1),t&&t(e)}),n)},t.prototype.ensureURL=function(e){if(Re(this.base)!==this.current.fullPath){var t=j(this.base+this.current.fullPath);e?ge(t):be(t)}},t.prototype.getCurrentLocation=function(){return Re(this.base)},t}(Te);function Re(e){var t=window.location.pathname,n=t.toLowerCase(),r=e.toLowerCase();return!e||n!==r&&0!==n.indexOf(j(r+"/"))||(t=t.slice(e.length)),(t||"/")+window.location.search+window.location.hash}var Me=function(e){function t(t,n,r){e.call(this,t,n),r&&function(e){var t=Re(e);if(!/^\/#/.test(t))return window.location.replace(j(e+"/#"+t)),!0}(this.base)||Ne()}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.setupListeners=function(){var e=this;if(!(this.listeners.length>0)){var t=this.router.options.scrollBehavior,n=me&&t;n&&this.listeners.push(ae());var r=function(){var t=e.current;Ne()&&e.transitionTo(Ue(),(function(r){n&&le(e.router,r,t,!0),me||Be(r.fullPath)}))},i=me?"popstate":"hashchange";window.addEventListener(i,r),this.listeners.push((function(){window.removeEventListener(i,r)}))}},t.prototype.push=function(e,t,n){var r=this,i=this.current;this.transitionTo(e,(function(e){Fe(e.fullPath),le(r.router,e,i,!1),t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this,i=this.current;this.transitionTo(e,(function(e){Be(e.fullPath),le(r.router,e,i,!1),t&&t(e)}),n)},t.prototype.go=function(e){window.history.go(e)},t.prototype.ensureURL=function(e){var t=this.current.fullPath;Ue()!==t&&(e?Fe(t):Be(t))},t.prototype.getCurrentLocation=function(){return Ue()},t}(Te);function Ne(){var e=Ue();return"/"===e.charAt(0)||(Be("/"+e),!1)}function Ue(){var e=window.location.href,t=e.indexOf("#");return t<0?"":e=e.slice(t+1)}function qe(e){var t=window.location.href,n=t.indexOf("#");return(n>=0?t.slice(0,n):t)+"#"+e}function Fe(e){me?ge(qe(e)):window.location.hash=e}function Be(e){me?be(qe(e)):window.location.replace(qe(e))}var He=function(e){function t(t,n){e.call(this,t,n),this.stack=[],this.index=-1}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.push=function(e,t,n){var r=this;this.transitionTo(e,(function(e){r.stack=r.stack.slice(0,r.index+1).concat(e),r.index++,t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this;this.transitionTo(e,(function(e){r.stack=r.stack.slice(0,r.index).concat(e),t&&t(e)}),n)},t.prototype.go=function(e){var t=this,n=this.index+e;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){var e=t.current;t.index=n,t.updateRoute(r),t.router.afterHooks.forEach((function(t){t&&t(r,e)}))}),(function(e){je(e,ye.duplicated)&&(t.index=n)}))}},t.prototype.getCurrentLocation=function(){var e=this.stack[this.stack.length-1];return e?e.fullPath:"/"},t.prototype.ensureURL=function(){},t}(Te),ze=function(e){void 0===e&&(e={}),this.app=null,this.apps=[],this.options=e,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Y(e.routes||[],this);var t=e.mode||"hash";switch(this.fallback="history"===t&&!me&&!1!==e.fallback,this.fallback&&(t="hash"),J||(t="abstract"),this.mode=t,t){case"history":this.history=new $e(this,e.base);break;case"hash":this.history=new Me(this,e.base,this.fallback);break;case"abstract":this.history=new He(this,e.base);break;default:0}},Ve={currentRoute:{configurable:!0}};ze.prototype.match=function(e,t,n){return this.matcher.match(e,t,n)},Ve.currentRoute.get=function(){return this.history&&this.history.current},ze.prototype.init=function(e){var t=this;if(this.apps.push(e),e.$once("hook:destroyed",(function(){var n=t.apps.indexOf(e);n>-1&&t.apps.splice(n,1),t.app===e&&(t.app=t.apps[0]||null),t.app||t.history.teardown()})),!this.app){this.app=e;var n=this.history;if(n instanceof $e||n instanceof Me){var r=function(e){n.setupListeners(),function(e){var r=n.current,i=t.options.scrollBehavior;me&&i&&"fullPath"in e&&le(t,e,r,!1)}(e)};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(e){t.apps.forEach((function(t){t._route=e}))}))}},ze.prototype.beforeEach=function(e){return Ke(this.beforeHooks,e)},ze.prototype.beforeResolve=function(e){return Ke(this.resolveHooks,e)},ze.prototype.afterEach=function(e){return Ke(this.afterHooks,e)},ze.prototype.onReady=function(e,t){this.history.onReady(e,t)},ze.prototype.onError=function(e){this.history.onError(e)},ze.prototype.push=function(e,t,n){var r=this;if(!t&&!n&&"undefined"!=typeof Promise)return new Promise((function(t,n){r.history.push(e,t,n)}));this.history.push(e,t,n)},ze.prototype.replace=function(e,t,n){var r=this;if(!t&&!n&&"undefined"!=typeof Promise)return new Promise((function(t,n){r.history.replace(e,t,n)}));this.history.replace(e,t,n)},ze.prototype.go=function(e){this.history.go(e)},ze.prototype.back=function(){this.go(-1)},ze.prototype.forward=function(){this.go(1)},ze.prototype.getMatchedComponents=function(e){var t=e?e.matched?e:this.resolve(e).route:this.currentRoute;return t?[].concat.apply([],t.matched.map((function(e){return Object.keys(e.components).map((function(t){return e.components[t]}))}))):[]},ze.prototype.resolve=function(e,t,n){var r=z(e,t=t||this.history.current,n,this),i=this.match(r,t),o=i.redirectedFrom||i.fullPath;return{location:r,route:i,href:function(e,t,n){var r="hash"===n?"#"+t:t;return e?j(e+"/"+r):r}(this.history.base,o,this.mode),normalizedTo:r,resolved:i}},ze.prototype.getRoutes=function(){return this.matcher.getRoutes()},ze.prototype.addRoute=function(e,t){this.matcher.addRoute(e,t),this.history.current!==m&&this.history.transitionTo(this.history.getCurrentLocation())},ze.prototype.addRoutes=function(e){this.matcher.addRoutes(e),this.history.current!==m&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(ze.prototype,Ve);var We=ze;function Ke(e,t){return e.push(t),function(){var n=e.indexOf(t);n>-1&&e.splice(n,1)}}ze.install=function e(t){if(!e.installed||V!==t){e.installed=!0,V=t;var n=function(e){return void 0!==e},r=function(e,t){var r=e.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(e,t)};t.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),t.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(t.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(t.prototype,"$route",{get:function(){return this._routerRoot._route}}),t.component("RouterView",x),t.component("RouterLink",K);var i=t.config.optionMergeStrategies;i.beforeRouteEnter=i.beforeRouteLeave=i.beforeRouteUpdate=i.created}},ze.version="3.6.5",ze.isNavigationFailure=je,ze.NavigationFailureType=ye,ze.START_LOCATION=m,J&&window.Vue&&window.Vue.use(ze);n(156),n(48),n(167);var Ge=n(0),Je=n(124),Qe=n.n(Je),Ze=n(125),Ye=n.n(Ze),Xe={created(){if(this.siteMeta=this.$site.headTags.filter(([e])=>"meta"===e).map(([e,t])=>t),this.$ssrContext){const t=this.getMergedMetaTags();this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.pageMeta=(e=t)?e.map(e=>{let t="<meta";return Object.keys(e).forEach(n=>{t+=` ${n}="${Ye()(e[n])}"`}),t+">"}).join("\n    "):"",this.$ssrContext.canonicalLink=tt(this.$canonicalUrl)}var e},mounted(){this.currentMetaTags=[...document.querySelectorAll("meta")],this.updateMeta(),this.updateCanonicalLink()},methods:{updateMeta(){document.title=this.$title,document.documentElement.lang=this.$lang;const e=this.getMergedMetaTags();this.currentMetaTags=nt(e,this.currentMetaTags)},getMergedMetaTags(){const e=this.$page.frontmatter.meta||[];return Qe()([{name:"description",content:this.$description}],e,this.siteMeta,rt)},updateCanonicalLink(){et(),this.$canonicalUrl&&document.head.insertAdjacentHTML("beforeend",tt(this.$canonicalUrl))}},watch:{$page(){this.updateMeta(),this.updateCanonicalLink()}},beforeDestroy(){nt(null,this.currentMetaTags),et()}};function et(){const e=document.querySelector("link[rel='canonical']");e&&e.remove()}function tt(e=""){return e?`<link href="${e}" rel="canonical" />`:""}function nt(e,t){if(t&&[...t].filter(e=>e.parentNode===document.head).forEach(e=>document.head.removeChild(e)),e)return e.map(e=>{const t=document.createElement("meta");return Object.keys(e).forEach(n=>{t.setAttribute(n,e[n])}),document.head.appendChild(t),t})}function rt(e){for(const t of["name","property","itemprop"])if(e.hasOwnProperty(t))return e[t]+t;return JSON.stringify(e)}var it=n(46),ot=n.n(it),at={mounted(){ot.a.configure({showSpinner:!1}),this.$router.beforeEach((e,t,n)=>{e.path===t.path||r.a.component(e.name)||ot.a.start(),n()}),this.$router.afterEach(()=>{ot.a.done(),this.isSidebarOpen=!1})}},lt=(n(47),n(45)),st=n.n(lt),ct=[Xe,at,{mounted(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:st()((function(){this.setActiveHash()}),300),setActiveHash(){const e=[].slice.call(document.querySelectorAll(".header-anchor")),t=[].slice.call(document.querySelectorAll(".header-anchor")).filter(t=>e.some(e=>e.hash===t.hash)),n=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),r=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),i=window.innerHeight+n;for(let e=0;e<t.length;e++){const o=t[e],a=t[e+1],l=0===e&&0===n||n>=o.parentElement.offsetTop+10&&(!a||n<a.parentElement.offsetTop-10),s=decodeURIComponent(this.$route.hash);if(l&&s!==decodeURIComponent(o.hash)){const n=o;if(i===r)for(let n=e+1;n<t.length;n++)if(s===decodeURIComponent(t[n].hash))return;return this.$vuepress.$set("disableScrollBehavior",!0),void this.$router.replace(decodeURIComponent(n.hash),()=>{this.$nextTick(()=>{this.$vuepress.$set("disableScrollBehavior",!1)})})}}}},beforeDestroy(){window.removeEventListener("scroll",this.onScroll)}}],ut=n(1);Object(Ge.f)(ut.default,"mixins",ct);const ft=[{name:"v-81665940",path:"/api/builtIn.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-81665940").then(n)}},{name:"v-78e9c206",path:"/api/app-config.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-78e9c206").then(n)}},{name:"v-1f9c424a",path:"/",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("homepageLayout","v-1f9c424a").then(n)}},{path:"/index.html",redirect:"/"},{name:"v-301af225",path:"/api/ApiIndex.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("v-301af225","v-301af225").then(n)}},{name:"v-13123160",path:"/api/compile.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-13123160").then(n)}},{name:"v-068ddbda",path:"/api/directives.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-068ddbda").then(n)}},{name:"v-7560cbe0",path:"/api/composition-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-7560cbe0").then(n)}},{name:"v-33e6cba4",path:"/api/extend.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-33e6cba4").then(n)}},{name:"v-32b77802",path:"/api/global-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-32b77802").then(n)}},{name:"v-6266eb79",path:"/api/",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-6266eb79").then(n)}},{path:"/api/index.html",redirect:"/api/"},{name:"v-808ce144",path:"/api/instance-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-808ce144").then(n)}},{name:"v-7d2b6e08",path:"/api/optional-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-7d2b6e08").then(n)}},{name:"v-4286840a",path:"/articles/1.0.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4286840a").then(n)}},{name:"v-0c915944",path:"/api/reactivity-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-0c915944").then(n)}},{name:"v-cd129100",path:"/api/store-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-cd129100").then(n)}},{name:"v-b32d8070",path:"/articles/2.0.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-b32d8070").then(n)}},{name:"v-ae4cfcf4",path:"/articles/2.7-release.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-ae4cfcf4").then(n)}},{name:"v-27ec3078",path:"/articles/2.8-release.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-27ec3078").then(n)}},{name:"v-6ced36f6",path:"/articles/",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-6ced36f6").then(n)}},{path:"/articles/index.html",redirect:"/articles/"},{name:"v-1b4df5b2",path:"/articles/2.8-release-alter.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-1b4df5b2").then(n)}},{name:"v-16cd1ba0",path:"/articles/2.9-release-alter.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-16cd1ba0").then(n)}},{name:"v-2f3a4e02",path:"/articles/2.9-release.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-2f3a4e02").then(n)}},{name:"v-65ac7ae0",path:"/articles/mpx1.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-65ac7ae0").then(n)}},{name:"v-29b15788",path:"/articles/mpx-cube-ui.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-29b15788").then(n)}},{name:"v-67f67560",path:"/articles/mpx-cli-next.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-67f67560").then(n)}},{name:"v-9cda2680",path:"/articles/mpx2.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-9cda2680").then(n)}},{name:"v-aba0a160",path:"/articles/performance.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-aba0a160").then(n)}},{name:"v-06150180",path:"/articles/size-control.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-06150180").then(n)}},{name:"v-16a68b26",path:"/articles/ts-derivation.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-16a68b26").then(n)}},{name:"v-2df9c8de",path:"/guide/advance/ability-compatible.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-2df9c8de").then(n)}},{name:"v-770abfaa",path:"/desc.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-770abfaa").then(n)}},{name:"v-419821e2",path:"/guide/advance/custom-output-path.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-419821e2").then(n)}},{name:"v-31f676ba",path:"/articles/unit-test.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-31f676ba").then(n)}},{name:"v-32741058",path:"/guide/advance/dll-plugin.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-32741058").then(n)}},{name:"v-27eacdde",path:"/guide/advance/async-subpackage.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-27eacdde").then(n)}},{name:"v-43feb580",path:"/guide/advance/image-process.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-43feb580").then(n)}},{name:"v-261b4b10",path:"/guide/advance/i18n.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-261b4b10").then(n)}},{name:"v-23021ac0",path:"/guide/advance/mixin.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-23021ac0").then(n)}},{name:"v-6a447440",path:"/guide/advance/pinia.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-6a447440").then(n)}},{name:"v-aa3f94b4",path:"/guide/advance/plugin.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-aa3f94b4").then(n)}},{name:"v-298abc80",path:"/guide/advance/npm.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-298abc80").then(n)}},{name:"v-f6b6871c",path:"/guide/advance/resource-resolve.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-f6b6871c").then(n)}},{name:"v-c6307034",path:"/guide/advance/platform.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-c6307034").then(n)}},{name:"v-b7e9c1dc",path:"/guide/advance/provide-inject.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-b7e9c1dc").then(n)}},{name:"v-59734f60",path:"/guide/advance/ssr.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-59734f60").then(n)}},{name:"v-4cc39ac0",path:"/guide/advance/size-report.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4cc39ac0").then(n)}},{name:"v-04b286c0",path:"/guide/advance/store.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-04b286c0").then(n)}},{name:"v-25e023c0",path:"/guide/advance/subpackage.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-25e023c0").then(n)}},{name:"v-ade3a0c0",path:"/guide/basic/class-style-binding.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-ade3a0c0").then(n)}},{name:"v-082a4080",path:"/guide/basic/component.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-082a4080").then(n)}},{name:"v-4653082a",path:"/guide/basic/conditional-render.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4653082a").then(n)}},{name:"v-eb995c80",path:"/guide/advance/utility-first-css.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-eb995c80").then(n)}},{name:"v-4c636240",path:"/guide/basic/event.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4c636240").then(n)}},{name:"v-9217ab80",path:"/guide/basic/list-render.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-9217ab80").then(n)}},{name:"v-b77c6940",path:"/guide/basic/ide.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-b77c6940").then(n)}},{name:"v-64d5c000",path:"/guide/basic/css.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-64d5c000").then(n)}},{name:"v-3f8ff5dc",path:"/guide/basic/option-chain.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-3f8ff5dc").then(n)}},{name:"v-14d018a4",path:"/guide/basic/refs.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-14d018a4").then(n)}},{name:"v-3e859f72",path:"/guide/basic/reactive.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-3e859f72").then(n)}},{name:"v-05fb8080",path:"/guide/basic/single-file.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-05fb8080").then(n)}},{name:"v-4db713e0",path:"/guide/basic/two-way-binding.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4db713e0").then(n)}},{name:"v-25ecbea0",path:"/guide/basic/template.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-25ecbea0").then(n)}},{name:"v-fa77fc40",path:"/guide/basic/start.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-fa77fc40").then(n)}},{name:"v-1553266a",path:"/guide/composition-api/reactive-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-1553266a").then(n)}},{name:"v-4777611a",path:"/guide/extend/api-proxy.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4777611a").then(n)}},{name:"v-453e3320",path:"/guide/composition-api/composition-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-453e3320").then(n)}},{name:"v-2fa3b31c",path:"/guide/extend/fetch.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-2fa3b31c").then(n)}},{name:"v-670c5b20",path:"/guide/extend/mock.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-670c5b20").then(n)}},{name:"v-4147fde5",path:"/guide/extend/",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4147fde5").then(n)}},{path:"/guide/extend/index.html",redirect:"/guide/extend/"},{name:"v-41032180",path:"/guide/migrate/2.8.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-41032180").then(n)}},{name:"v-05fd3820",path:"/guide/migrate/2.7.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-05fd3820").then(n)}},{name:"v-69e59278",path:"/guide/platform/miniprogram.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-69e59278").then(n)}},{name:"v-4269b2b6",path:"/guide/platform/web.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4269b2b6").then(n)}},{name:"v-63e1d400",path:"/guide/migrate/mpx-cli-3.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-63e1d400").then(n)}},{name:"v-7c090ae0",path:"/guide/migrate/2.9.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-7c090ae0").then(n)}},{name:"v-fbaff41a",path:"/guide/platform/",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-fbaff41a").then(n)}},{path:"/guide/platform/index.html",redirect:"/guide/platform/"},{name:"v-2e48a400",path:"/guide/tool/e2e-test.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-2e48a400").then(n)}},{name:"v-f2e08d00",path:"/guide/platform/rn.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-f2e08d00").then(n)}},{name:"v-29f7525e",path:"/guide/tool/unit-test.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-29f7525e").then(n)}},{name:"v-5bf8d898",path:"/guide/understand/runtime.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-5bf8d898").then(n)}},{name:"v-15dbdb80",path:"/guide/tool/ts.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-15dbdb80").then(n)}},{name:"v-ae319f98",path:"/rn-component.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-ae319f98").then(n)}},{name:"v-0960fc22",path:"/guide/understand/compile.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-0960fc22").then(n)}},{name:"v-c5494280",path:"/guide/advance/progressive.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-c5494280").then(n)}},{name:"v-48addfa0",path:"/guide/basic/intro.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-48addfa0").then(n)}},{name:"v-f625b20c",path:"/rn-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-f625b20c").then(n)}},{name:"v-4f2760cc",path:"/rn-style.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4f2760cc").then(n)}},{name:"v-16c21d00",path:"/rn-template.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-16c21d00").then(n)}},{path:"*",component:ut.default}],pt={title:"Mpx框架",description:"",base:"/",headTags:[["link",{rel:"icon",href:"/favicon.ico"}],["script",{type:"text/javascript"},'(function(c,l,a,r,i,t,y){\n        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\n        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;\n        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\n    })(window, document, "clarity", "script", "jtvvy52wxy");']],pages:[{title:"内建组件",frontmatter:{},regularPath:"/api/builtIn.html",relativePath:"api/builtIn.md",key:"v-81665940",path:"/api/builtIn.html",headers:[{level:2,title:"component",slug:"component"},{level:2,title:"slot",slug:"slot"}]},{title:"全局配置",frontmatter:{},regularPath:"/api/app-config.html",relativePath:"api/app-config.md",key:"v-78e9c206",path:"/api/app-config.html",headers:[{level:2,title:"useStrictDiff",slug:"usestrictdiff"},{level:2,title:"ignoreWarning",slug:"ignorewarning"},{level:2,title:"ignoreProxyWhiteList",slug:"ignoreproxywhitelist"},{level:2,title:"observeClassInstance",slug:"observeclassinstance"},{level:2,title:"proxyEventHandler",slug:"proxyeventhandler"},{level:2,title:"setDataHandler",slug:"setdatahandler"},{level:2,title:"forceFlushSync",slug:"forceflushsync"},{level:2,title:"errorHandler",slug:"errorhandler"},{level:2,title:"webRouteConfig",slug:"webrouteconfig"},{level:2,title:"webConfig",slug:"webconfig"}]},{title:"Home",frontmatter:{home:!0,layout:"homepageLayout",heroImage:"/logo.png",heroText:"增强型跨端小程序框架",tagline:"良好的开发体验，极致的应用性能，完整的原生兼容，一份源码跨端输出所有小程序平台及Web。",actionText:"快速进入",actionLink:"/guide/basic/start.html",githubText:"Github",githubLink:"https://github.com/didi/mpx",features:[{title:"高性能",details:"Mpx高度关注小程序性能与包体积，深度整合了运行时性能优化与包体积分析优化能力，让开发者在大部分场景下只需专注于业务开发，就能生产出媲美甚至超出原生的高性能小程序应用。",icon:"https://dpubstatic.udache.com/static/dpubimg/PsrcQ_igBl/texing_icon_you.png",micon:"https://dpubstatic.udache.com/static/dpubimg/BBQBgCRCOl/y_icon_you.png"},{title:"优体验",details:"以增强的方式将Vue中优良的开发特性引入到小程序开发中，如数据响应、组合式api等，配合强大的工程化能力，大大提升了小程序开发的体验与效率，同时保障了框架开发的可维护性与可预期性。",icon:"https://dpubstatic.udache.com/static/dpubimg/N7sc6TZnja/texing_icon_gao.png",micon:"https://dpubstatic.udache.com/static/dpubimg/0S3n12uc1k/y_icon_gao.png"},{title:"跨平台",details:"Mpx专注解决小程序跨端问题，通过静态转译与运行时适配结合，将一份源码跨端输出到所有开放的小程序平台和web环境下运行，同时最大限度减少跨端带来的性能与包体积损失。",icon:"https://dpubstatic.udache.com/static/dpubimg/bJMx84lznm/texing_icon_kua.png",micon:"https://dpubstatic.udache.com/static/dpubimg/KPG_IXLuwU/y_icon_kua.png"}],threeSection:{title:"示例项目",details:"扫码查看使用Mpx开发的todoMVC项目在各个小程序平台及web下的运行情况，更多示例项目代码可点击这里查看。",mdetails:"TodoMVC是一个示例项目，它使用目前流行的不同JavaScript框架的来实现同一个Demo，来帮助你熟悉和选择最合适的前端框架。",actionText:"查看详情",actionLink:"https://dpubstatic.udache.com/static/dpubimg/c3b0d3bc-1bb0-4bee-b6da-4205a2744e21.html#/pages/index",img:"https://dpubstatic.udache.com/static/dpubimg/nYbrJSPSz7/anli_pic_phone.png",bg:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/todomvc_bg_v3.png",list:[{title:"微信",icon1:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/todomvc_icon_wechat_normal.png",icon2:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/todomvc_icon_wechat_active.png",code:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/wx-qrcode.jpg"},{title:"支付宝",icon1:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/todomvc_icon_alipay_normal.png",icon2:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/todomvc_icon_alipay_active.png",code:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/ali-qrcode.jpg"}],mlist:[{title:"微信",icon:"https://dpubstatic.udache.com/static/dpubimg/ho5eKaVX5L/y_icon_wechat.png"},{title:"QQ",icon:"https://dpubstatic.udache.com/static/dpubimg/IoQuifVymo/y_icon_qq.png"},{title:"支付宝",icon:"https://dpubstatic.udache.com/static/dpubimg/rMS51-MYUE/y_icon_zhifubao.png"},{title:"百度",icon:"https://dpubstatic.udache.com/static/dpubimg/nth1TOFUVA/y_icon_baidu.png"},{title:"字节跳动",icon:"https://dpubstatic.udache.com/static/dpubimg/JQBu676x6W/y_icon_zijie.png"},{title:"Web",icon:"https://dpubstatic.udache.com/static/dpubimg/d4pVP4BUGU/y_icon_web.png"}]},fourSection:{title:"极致性能",details:"得益于增强的设计思路，Mpx在运行时没有复杂的封装抹平逻辑，而是专注于实现数据响应，setData优化和Composition api等关键增强能力，压缩后体积占用仅为60KB；配合编译构建中灵活强大的包体积分析优化能力，Mpx在性能与包体积方面做到了业内最优。",img:"https://dpubstatic.udache.com/static/dpubimg/jvACYsEQfm/jizhi_pic.png",mimg:"https://dpubstatic.udache.com/static/dpubimg/G4RXehQ40n/y_pic_jizhi.png",bg:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/jizhi_bg_v3.png",actionText:"点击进入",actionLink:"/guide/basic/start.html"},fiveSection:{title:"渐进迁移",details:"同样得益于增强的设计思路，Mpx能够完整兼容小程序原生技术规范，并以较低的成本进行持续跟进；借助框架提供的渐进迁移能力，小程序开发者可以方便地在Mpx项目中使用已有的原生开发生态，如组件库，统计工具等，同时也能将Mpx开发的组件输出到原生小程序项目中使用。",img:"https://dpubstatic.udache.com/static/dpubimg/k5Ft6oWF6F/jianjin_pic.png",mimg:"https://dpubstatic.udache.com/static/dpubimg/Z0W_MvwJ8C/y_pic_jianjin.png",bg:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/jianjin_bg_v3.png",actionText:"点击进入",actionLink:"/guide/basic/start.html"},sixSection:{title:"开发生态",mtitle:"开发生态",bg:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/kaifa_bg_v3.png",details:[{title:"@mpxjs/core",details:"运行时核心",icon:"https://dpubstatic.udache.com/static/dpubimg/K4XYVLjBLH/kaifa_icon_1.png",actionLink:"/guide/basic/start.html"},{title:"@mpxjs/webpack-plugin",details:"编译核心",icon:"https://dpubstatic.udache.com/static/dpubimg/2k0jC-ZkFX/kaifa_icon_2.png",actionLink:"/guide/basic/start.html"},{title:"@mpxjs/cli",details:"脚手架工具",icon:"https://dpubstatic.udache.com/static/dpubimg/ug3MOMmXaz/kaifa_icon_3.png",actionLink:"/guide/basic/start.html"},{title:"@mpxjs/fetch",details:"网络请求库",icon:"https://dpubstatic.udache.com/static/dpubimg/L6kO_akb2G/kaifa_icon_4.png",actionLink:"/api/extend.html#mpx-fetch"},{title:"@mpxjs/api-proxy api",details:"增强调用",icon:"https://dpubstatic.udache.com/static/dpubimg/oZGOmLr5f3/kaifa_icon_5.png",actionLink:"/api/extend.html#api-proxy"},{title:"@mpxjs/webview-bridge web",details:"页面桥接",icon:"https://dpubstatic.udache.com/static/dpubimg/trdVxyR_5_/kaifa_icon_6.png",actionLink:"/api/extend.html#webview-bridge"},{title:"@mpxjs/vscode-plugin ide",details:"插件",icon:"https://dpubstatic.udache.com/static/dpubimg/PczNH3wywM/kaifa_icon_7.png",actionLink:"https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx"},{title:"@mpxjs/es-check",details:"高级语法检查",icon:"https://dpubstatic.udache.com/static/dpubimg/qXb0ZEY4xN/kaifa_icon_8.png",actionLink:"https://github.com/mpx-ecology/mpx-es-check"},{title:"@mpxjs/size-report",details:"包体积分析工具",icon:"https://dpubstatic.udache.com/static/dpubimg/2pa_xoKoeL/kaifa_icon_9.png",actionLink:"/guide/advance/size-report.html"}]},sevenSection:{title:"成功案例",bg:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/anli_bg_v3.png",details:[{title:"滴滴出行",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/bcca3d10-01b7-4c08-951a-22418b2443d6.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg"},{title:"青桔单车",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/pIM3h2vyj2/qingju.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/shunfengche_demo_v3.jpeg"},{title:"滴滴顺风车",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/neOI_G6deQ/shunfengche.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/qingju_demo_v3.jpeg"},{title:"出行广场",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/708d5579-81f0-480e-96b3-5f49e8022273.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/guangchuang_v3.jpeg"},{title:"滴滴公交",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/69a08787-d3a1-4c51-b182-0fcb96960b56.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg"},{title:"滴滴金融",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/8c25bec8-938e-452d-96f9-5e524092a8ee.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/jinlong_v3.jpeg"},{title:"滴滴外卖",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/8fdd04ed-a74b-4b87-be6e-652550fb843f.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg"},{title:"司机招募",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/d3b62a33-7dbd-45ea-a4aa-f30ad61965f2.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/siji_v3.jpeg"},{title:"小桔加油",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/988099b3-9930-4c54-abd7-75e70134d649.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/jiayou_v3.jpeg"},{title:"番薯借阅",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/79573ef6-2a66-462e-8cc7-63eb983168f8.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/jieshu_v3.jpeg"},{title:"疫查查应用",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/8932c3c2-b6da-4da2-8661-5554fe2bd4a3.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/yiqin_v3.jpeg"},{title:"小桔养车",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/b6507fca-1e1f-4922-9240-d0f172bea6de.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/yangche_v3.jpeg"},{title:"学而思直播课",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/40fd646b-10d0-4383-a576-e1d425a8c05d.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/zhibo_v3.jpeg"},{title:"小猴启蒙课",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/6833dbdb-1dc8-4929-bd41-6d71069b0714.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/ai_v3.jpeg"},{title:"科创书店",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/8627f48d-cf64-4511-8b2f-ede8e54186a7.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/shudian_v3.jpeg"},{title:"在武院",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/421bf49b-a9cb-4d54-90d7-e21b80ab21b3.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/wuyuan_v3.jpeg"},{title:"三股绳Lite",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/46ee136b-0791-4069-98b0-35566d5ef394.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/daka_v3.jpeg"},{title:"学而思优选课",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/eab48487-5ca2-4368-9080-a6b843097e67.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/xueersi_v3.jpeg"},{title:"食享会",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/lY7eYSppkW/68747470733a2f2f73686978682e636f6d2f73686571752f696d672f7172636f64655f322e37343664373562342e706e67.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/canshi_v3.jpeg"},{title:"青铜安全医生",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/58cdbcc5-1f00-4da9-89c6-e638b2f77b19.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/qintong_v3.jpeg"},{title:"青铜安全培训",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/a9d60600-40c0-4b66-934e-3bb176d3f07a.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/peixun_v3.jpeg"},{title:"视穹云机械",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/0a816842-dda4-4e30-8c14-e951fb1a8131.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/jixie_v3.jpeg"},{title:"店有生意通",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/7f1b5f22-d765-4142-862a-999c1ed9d10f.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/shenyi_v3.jpeg"},{title:"花小猪打车",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/JzHnEyu8VT/aaa.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/dache_v3.jpeg"},{title:"橙心优选",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/37222642-c508-4a67-8cbc-036a66985bfc.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/chenxin_v3.jpeg"},{title:"小二押镖",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/nB6-p3WzIQ/xiaoeryabiao.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/xiaoer_v3.jpeg"},{title:"顺鑫官方微商城",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/nY2bg3A1L_/shunxin.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/shangchen_v3.jpeg"},{title:"嘀嗒出行",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/DO3m0Iflq1/didachuxing.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/dida_v3.jpeg"},{title:"汉行通Pro",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/86cd89be-de29-48ad-8cb0-72c432446e7b.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/hantong_v3.jpeg"},{title:"滴滴出行(支付宝)",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/47fe83e5-c41a-4245-b910-60ed6493d87e.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg"},{title:"小桔充电(支付宝)",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/fa1a524b-da97-4df3-9412-8c988f50b6ae.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/chongdian_v3.jpeg"},{title:"唯品会QQ",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/2a150b0a-e23d-4e91-98fe-e862410be911.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/weiping_v3.jpeg"},{title:"唯品会(百度)",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/56273723-ba98-4ceb-9672-075a5ab9f2da.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/weiping_v3.jpeg"},{title:"唯品会(字节)",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/88f898a0-2f3b-44c5-b7ce-c1a8aec25299.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/weiping_v3.jpeg"}]},resourcesList:{title:"资源",details:[{title:"案例收集",actionLink:"https://github.com/didi/mpx/issues/385"}]},communityList:{title:"社区",details:[{title:"微信群",actionLink:"https://github.com/didi/mpx",img:"https://dpubstatic.udache.com/static/dpubimg/6DN0ebkbjgI2P9QjJr8jr_WechatIMG3.jpeg"},{title:"QQ群",actionLink:"https://github.com/didi/mpx",img:"https://dpubstatic.udache.com/static/dpubimg/etX-gKWeUb/temp_qrcode_share_374632411.png"}]},helpList:{title:"帮助",details:[{title:"反馈问题",actionLink:"https://github.com/didi/mpx/issues"}]},moreList:{title:"更多",details:[{title:"滴滴前端技术",actionLink:"https://juejin.cn/user/4195392101298510"}]}},regularPath:"/",relativePath:"README.md",key:"v-1f9c424a",path:"/",headers:[{level:2,title:"安装使用",slug:"安装使用"}]},{frontmatter:{layout:"v-301af225"},regularPath:"/api/ApiIndex.html",relativePath:"api/ApiIndex.vue",key:"v-301af225",path:"/api/ApiIndex.html"},{title:"编译构建",frontmatter:{sidebarDepth:2},regularPath:"/api/compile.html",relativePath:"api/compile.md",key:"v-13123160",path:"/api/compile.html",headers:[{level:2,title:"类型定义",slug:"类型定义"},{level:3,title:"Rules",slug:"rules"},{level:2,title:"MpxWebpackPlugin",slug:"mpxwebpackplugin"},{level:3,title:"mode",slug:"mode"},{level:3,title:"srcMode",slug:"srcmode"},{level:3,title:"modeRules",slug:"moderules"},{level:3,title:"externalClasses",slug:"externalclasses"},{level:3,title:"resolveMode",slug:"resolvemode"},{level:3,title:"projectRoot",slug:"projectroot"},{level:3,title:"writeMode",slug:"writemode"},{level:3,title:"autoScopeRules",slug:"autoscoperules"},{level:3,title:"forceDisableProxyCtor",slug:"forcedisableproxyctor"},{level:3,title:"transMpxRules",slug:"transmpxrules"},{level:3,title:"forceProxyEventRules",slug:"forceproxyeventrules"},{level:3,title:"defs",slug:"defs"},{level:3,title:"attributes",slug:"attributes"},{level:3,title:"externals",slug:"externals"},{level:3,title:"miniNpmPackage",slug:"mininpmpackage"},{level:3,title:"forceUsePageCtor",slug:"forceusepagector"},{level:3,title:"transRpxRules",slug:"transrpxrules"},{level:3,title:"postcssInlineConfig",slug:"postcssinlineconfig"},{level:3,title:"decodeHTMLText",slug:"decodehtmltext"},{level:3,title:"nativeConfig",slug:"nativeconfig"},{level:3,title:"webConfig",slug:"webconfig"},{level:3,title:"i18n",slug:"i18n"},{level:3,title:"auditResource",slug:"auditresource"},{level:3,title:"subpackageModulesRules",slug:"subpackagemodulesrules"},{level:3,title:"generateBuildMap",slug:"generatebuildmap"},{level:3,title:"autoVirtualHostRules",slug:"autovirtualhostrules"},{level:3,title:"partialCompileRules",slug:"partialcompilerules"},{level:3,title:"optimizeRenderRules",slug:"optimizerenderrules"},{level:3,title:"asyncSubpackageRules",slug:"asyncsubpackagerules"},{level:3,title:"retryRequireAsync",slug:"retryrequireasync"},{level:3,title:"disableRequireAsync",slug:"disablerequireasync"},{level:3,title:"optimizeSize",slug:"optimizesize"},{level:2,title:"MpxWebpackPlugin static methods",slug:"mpxwebpackplugin-static-methods"},{level:3,title:"MpxWebpackPlugin.loader",slug:"mpxwebpackplugin-loader"},{level:3,title:"MpxWebpackPlugin.pluginLoader",slug:"mpxwebpackplugin-pluginloader"},{level:3,title:"MpxWebpackPlugin.wxsPreLoader",slug:"mpxwebpackplugin-wxspreloader"},{level:3,title:"MpxWebpackPlugin.fileLoader",slug:"mpxwebpackplugin-fileloader"},{level:3,title:"MpxWebpackPlugin.urlLoader",slug:"mpxwebpackplugin-urlloader"},{level:3,title:"MpxWebpackPlugin.getPageEntry",slug:"mpxwebpackplugin-getpageentry"},{level:3,title:"MpxWebpackPlugin.getComponentEntry",slug:"mpxwebpackplugin-getcomponententry"},{level:3,title:"MpxWebpackPlugin.getNativeEntry",slug:"mpxwebpackplugin-getnativeentry"},{level:2,title:"MpxUnocssPlugin",slug:"mpxunocssplugin"},{level:3,title:"unoFile",slug:"unofile"},{level:3,title:"minCount",slug:"mincount"},{level:3,title:"styleIsolation",slug:"styleisolation"},{level:3,title:"scan",slug:"scan"},{level:3,title:"escapeMap",slug:"escapemap"},{level:3,title:"root",slug:"root"},{level:3,title:"transformCSS",slug:"transformcss"},{level:3,title:"transformGroups",slug:"transformgroups"},{level:3,title:"config",slug:"config"},{level:3,title:"configFiles",slug:"configfiles"},{level:3,title:"commentConfig",slug:"commentconfig"},{level:2,title:"MpxUnocssBase",slug:"mpxunocssbase"},{level:3,title:"baseFontSize",slug:"basefontsize"},{level:3,title:"preflight",slug:"preflight"},{level:3,title:"dark",slug:"dark"},{level:3,title:"attributifyPseudo",slug:"attributifypseudo"},{level:3,title:"variablePrefix",slug:"variableprefix"},{level:2,title:"Request query",slug:"request-query"},{level:3,title:"?resolve",slug:"resolve"},{level:3,title:"?root",slug:"root"},{level:3,title:"?fallback",slug:"fallback"},{level:3,title:"?useLocal",slug:"uselocal"},{level:3,title:"?isStyle",slug:"isstyle"},{level:3,title:"?isPage",slug:"ispage"},{level:3,title:"?isComponent",slug:"iscomponent"},{level:3,title:"?async",slug:"async"}]},{title:"模板指令",frontmatter:{},regularPath:"/api/directives.html",relativePath:"api/directives.md",key:"v-068ddbda",path:"/api/directives.html",headers:[{level:2,title:"wx:if",slug:"wx-if"},{level:2,title:"wx:elif",slug:"wx-elif"},{level:2,title:"wx:else",slug:"wx-else"},{level:2,title:"wx:for",slug:"wx-for"},{level:2,title:"wx:for-index",slug:"wx-for-index"},{level:2,title:"wx:for-item",slug:"wx-for-item"},{level:2,title:"wx:key",slug:"wx-key"},{level:2,title:"wx:class",slug:"wx-class"},{level:2,title:"wx:style",slug:"wx-style"},{level:2,title:"wx:model",slug:"wx-model"},{level:2,title:"wx:model-prop",slug:"wx-model-prop"},{level:2,title:"wx:model-event",slug:"wx-model-event"},{level:2,title:"wx:model-value-path",slug:"wx-model-value-path"},{level:2,title:"wx:model-filter",slug:"wx-model-filter"},{level:2,title:"wx:ref",slug:"wx-ref"},{level:2,title:"wx:show",slug:"wx-show"},{level:2,title:"bind",slug:"bind"},{level:2,title:"catch",slug:"catch"},{level:2,title:"capture-bind",slug:"capture-bind"},{level:2,title:"capture-catch",slug:"capture-catch"},{level:2,title:"@mode",slug:"mode"},{level:2,title:"@_mode",slug:"mode"},{level:2,title:"@env",slug:"env"},{level:2,title:"mpxTagName",slug:"mpxtagname"}]},{title:"组合式 API",frontmatter:{},regularPath:"/api/composition-api.html",relativePath:"api/composition-api.md",key:"v-7560cbe0",path:"/api/composition-api.html",headers:[{level:2,title:"setup",slug:"setup"},{level:2,title:"生命周期钩子",slug:"生命周期钩子"},{level:3,title:"onBeforeMount",slug:"onbeforemount"},{level:3,title:"onMounted",slug:"onmounted"},{level:3,title:"onBeforeUpdate",slug:"onbeforeupdate"},{level:3,title:"onUpdated",slug:"onupdated"},{level:3,title:"onBeforeUnmount",slug:"onbeforeunmount"},{level:3,title:"onUnmount",slug:"onunmount"},{level:3,title:"onLoad",slug:"onload"},{level:3,title:"onShow",slug:"onshow"},{level:3,title:"onHide",slug:"onhide"},{level:3,title:"onResize",slug:"onresize"},{level:3,title:"onPullDownRefresh",slug:"onpulldownrefresh"},{level:3,title:"onReachBottom",slug:"onreachbottom"},{level:3,title:"onShareAppMessage",slug:"onshareappmessage"},{level:3,title:"onShareTimeline",slug:"onsharetimeline"},{level:3,title:"onAddToFavorites",slug:"onaddtofavorites"},{level:3,title:"onPageScroll",slug:"onpagescroll"},{level:3,title:"onTabItemTap",slug:"ontabitemtap"},{level:3,title:"onSaveExitState",slug:"onsaveexitstate"},{level:3,title:"onServerPrefetch",slug:"onserverprefetch"},{level:2,title:"getCurrentInstance",slug:"getcurrentinstance"},{level:2,title:"useI18n",slug:"usei18n"},{level:2,title:"useFetch",slug:"usefetch"}]},{title:"周边拓展",frontmatter:{sidebarDepth:2},regularPath:"/api/extend.html",relativePath:"api/extend.md",key:"v-33e6cba4",path:"/api/extend.html",headers:[{level:2,title:"mpx-fetch",slug:"mpx-fetch"},{level:3,title:"fetch(config)",slug:"fetch-config"},{level:3,title:"CancelToken",slug:"canceltoken"},{level:3,title:"XFetch",slug:"xfetch"},{level:3,title:"interceptors",slug:"interceptors"},{level:3,title:"proxy 代理",slug:"proxy"},{level:3,title:"useFetch",slug:"usefetch"},{level:2,title:"api-proxy",slug:"api-proxy"},{level:2,title:"webview-bridge",slug:"webview-bridge"},{level:2,title:"size-report",slug:"size-report"},{level:3,title:"插件配置项",slug:"插件配置项"},{level:2,title:"i18n",slug:"i18n"},{level:3,title:"useI18n",slug:"usei18n"}]},{title:"全局 API",frontmatter:{},regularPath:"/api/global-api.html",relativePath:"api/global-api.md",key:"v-32b77802",path:"/api/global-api.html",headers:[{level:2,title:"全局对象 Mpx",slug:"global-mpx"},{level:3,title:"mixin",slug:"mixin"},{level:3,title:"injectMixins",slug:"injectmixins"},{level:3,title:"observable",slug:"observable"},{level:3,title:"set",slug:"set"},{level:3,title:"delete",slug:"delete"},{level:3,title:"use",slug:"use"},{level:3,title:"watch",slug:"watch"},{level:2,title:"createApp",slug:"createapp"},{level:2,title:"createPage",slug:"createpage"},{level:2,title:"createComponent",slug:"createcomponent"},{level:2,title:"nextTick",slug:"nexttick"},{level:2,title:"toPureObject",slug:"topureobject"},{level:2,title:"getMixin",slug:"getmixin"},{level:2,title:"implement",slug:"implement"},{level:2,title:"内建生命周期变量",slug:"built-in-lifecycle-variable"},{level:3,title:"BEFORECREATE",slug:"beforecreate"},{level:3,title:"CREATED",slug:"created"},{level:3,title:"BEFOREMOUNT",slug:"beforemount"},{level:3,title:"MOUNTED",slug:"mounted"},{level:3,title:"BEFOREUPDATE",slug:"beforeupdate"},{level:3,title:"UPDATED",slug:"updated"},{level:3,title:"SERVERPREFETCH",slug:"serverprefetch"},{level:3,title:"BEFOREUNMOUNT",slug:"beforeunmount"},{level:3,title:"UNMOUNTED",slug:"unmounted"},{level:3,title:"ONLOAD",slug:"onload"},{level:3,title:"ONSHOW",slug:"onshow"},{level:3,title:"ONHIDE",slug:"onhide"},{level:3,title:"ONRESIZE",slug:"onresize"},{level:2,title:"响应式 API",slug:"响应式-api"},{level:2,title:"组合式 API",slug:"组合式-api"},{level:2,title:"store API",slug:"store-api"}]},{frontmatter:{},regularPath:"/api/",relativePath:"api/index.md",key:"v-6266eb79",path:"/api/"},{title:"实例 API",frontmatter:{},regularPath:"/api/instance-api.html",relativePath:"api/instance-api.md",key:"v-808ce144",path:"/api/instance-api.html",headers:[{level:2,title:"$set",slug:"set"},{level:2,title:"$watch",slug:"watch"},{level:2,title:"$delete",slug:"delete"},{level:2,title:"$refs",slug:"refs"},{level:2,title:"$asyncRefs",slug:"asyncrefs"},{level:2,title:"$forceUpdate",slug:"forceupdate"},{level:2,title:"$nextTick",slug:"nexttick"},{level:2,title:"$i18n",slug:"i18n"},{level:2,title:"$rawOptions",slug:"rawoptions"}]},{title:"选项式 API",frontmatter:{},regularPath:"/api/optional-api.html",relativePath:"api/optional-api.md",key:"v-7d2b6e08",path:"/api/optional-api.html",headers:[{level:3,title:"onAppInit",slug:"onappinit"},{level:3,title:"onSSRAppCreated",slug:"onssrappcreated"}]},{title:"滴滴开源小程序框架Mpx",frontmatter:{sidebarDepth:2},regularPath:"/articles/1.0.html",relativePath:"articles/1.0.md",key:"v-4286840a",path:"/articles/1.0.html",headers:[{level:2,title:"设计思路",slug:"设计思路"},{level:2,title:"技术实现",slug:"技术实现"},{level:3,title:"数据响应与性能优化",slug:"数据响应与性能优化"},{level:3,title:"编译构建",slug:"编译构建"},{level:2,title:"结语",slug:"结语"}]},{title:"响应式 API",frontmatter:{sidebarDepth:2},regularPath:"/api/reactivity-api.html",relativePath:"api/reactivity-api.md",key:"v-0c915944",path:"/api/reactivity-api.html",headers:[{level:2,title:"响应式基础 API",slug:"响应式基础-api"},{level:3,title:"reactive",slug:"reactive"},{level:3,title:"isReactive",slug:"isreactive"},{level:3,title:"markRaw",slug:"markraw"},{level:3,title:"shallowReactive",slug:"shallowreactive"},{level:3,title:"set",slug:"set"},{level:3,title:"del",slug:"del"},{level:2,title:"Computed 与 Watch",slug:"computed-与-watch"},{level:3,title:"computed",slug:"computed"},{level:3,title:"watchEffect",slug:"watcheffect"},{level:3,title:"watchSyncEffect",slug:"watchsynceffect"},{level:3,title:"watchPostEffect",slug:"watchposteffect"},{level:3,title:"watch",slug:"watch"},{level:2,title:"Effect 作用域 API",slug:"effect-作用域-api"},{level:3,title:"effectScope",slug:"effectscope"},{level:3,title:"getCurrentScope",slug:"getcurrentscope"},{level:3,title:"onScopeDispose",slug:"onscopedispose"},{level:2,title:"Refs",slug:"refs"},{level:3,title:"ref",slug:"ref"},{level:3,title:"unref",slug:"unref"},{level:3,title:"toRef",slug:"toref"},{level:3,title:"toRefs",slug:"torefs"},{level:3,title:"isRef",slug:"isref"},{level:3,title:"customRef",slug:"customref"},{level:3,title:"shallowRef",slug:"shallowref"},{level:3,title:"triggerRef",slug:"triggerref"}]},{title:"Store API",frontmatter:{sidebarDepth:2},regularPath:"/api/store-api.html",relativePath:"api/store-api.md",key:"v-cd129100",path:"/api/store-api.html",headers:[{level:2,title:"createStore",slug:"createstore"},{level:3,title:"Store 实例属性",slug:"store-实例属性"},{level:3,title:"Store 实例方法",slug:"store-实例方法"},{level:2,title:"createStoreWithThis",slug:"createstorewiththis"},{level:2,title:"createStateWithThis",slug:"createstatewiththis"},{level:2,title:"createGettersWithThis",slug:"creategetterswiththis"},{level:2,title:"createMutationsWithThis",slug:"createmutationswiththis"},{level:2,title:"createActionsWithThis",slug:"createactionswiththis"}]},{title:"滴滴小程序框架Mpx发布2.0，支持小程序跨平台开发，可直接转换已有微信小程序",frontmatter:{sidebarDepth:2},regularPath:"/articles/2.0.html",relativePath:"articles/2.0.md",key:"v-b32d8070",path:"/articles/2.0.html",headers:[{level:2,title:"跨平台开发",slug:"跨平台开发"},{level:3,title:"设计理念",slug:"设计理念"},{level:3,title:"使用方法",slug:"使用方法"},{level:3,title:"差异抹平",slug:"差异抹平"},{level:3,title:"条件编译",slug:"条件编译"},{level:2,title:"性能优化",slug:"性能优化"},{level:3,title:"setData优化",slug:"setdata优化"},{level:3,title:"包体积优化",slug:"包体积优化"},{level:2,title:"渐进迁移",slug:"渐进迁移"},{level:2,title:"未来规划",slug:"未来规划"}]},{title:"Mpx2.7 版本正式发布，大幅提升编译构建速度",frontmatter:{},regularPath:"/articles/2.7-release.html",relativePath:"articles/2.7-release.md",key:"v-ae4cfcf4",path:"/articles/2.7-release.html",headers:[{level:2,title:"编译构建提速",slug:"编译构建提速"},{level:2,title:"分包输出能力增强",slug:"分包输出能力增强"},{level:3,title:"独立分包初始化模块",slug:"独立分包初始化模块"},{level:3,title:"分包异步化",slug:"分包异步化"},{level:2,title:"单元测试支持",slug:"单元测试支持"},{level:2,title:"Module.rules复用",slug:"module-rules复用"},{level:2,title:"即将到来的新特性",slug:"即将到来的新特性"},{level:2,title:"未来规划",slug:"未来规划"}]},{title:"Mpx2.8 版本正式发布，使用组合式 API 开发小程序",frontmatter:{},regularPath:"/articles/2.8-release.html",relativePath:"articles/2.8-release.md",key:"v-27ec3078",path:"/articles/2.8-release.html",headers:[{level:2,title:"组合式 API 实现",slug:"组合式-api-实现"},{level:3,title:"生命周期钩子函数",slug:"生命周期钩子函数"},{level:3,title:"<script setup>",slug:"script-setup"},{level:3,title:"组合式 API 与 Vue3 中的差异",slug:"组合式-api-与-vue3-中的差异"},{level:2,title:"响应式 API 实现",slug:"响应式-api-实现"},{level:3,title:"数据响应限制带来的差异",slug:"数据响应限制带来的差异"},{level:3,title:"响应式 API 与 Vue3 中的区别",slug:"响应式-api-与-vue3-中的区别"},{level:2,title:"生态周边适配",slug:"生态周边适配"},{level:3,title:"Pinia store 支持",slug:"pinia-store-支持"},{level:3,title:"I18n 支持",slug:"i18n-支持"},{level:2,title:"输出 web 适配",slug:"输出-web-适配"},{level:2,title:"性能表现",slug:"性能表现"},{level:3,title:"组件初始化耗时",slug:"组件初始化耗时"},{level:3,title:"组件 JS 体积",slug:"组件-js-体积"},{level:3,title:"框架运行时体积",slug:"框架运行时体积"},{level:2,title:"破坏性改变",slug:"破坏性改变"},{level:2,title:"未来规划",slug:"未来规划"}]},{title:"Mpx框架相关文章",frontmatter:{sidebarDepth:0},regularPath:"/articles/",relativePath:"articles/index.md",key:"v-6ced36f6",path:"/articles/"},{title:"通过 Mpx 使用组合式 API 进行小程序开发",frontmatter:{},regularPath:"/articles/2.8-release-alter.html",relativePath:"articles/2.8-release-alter.md",key:"v-1b4df5b2",path:"/articles/2.8-release-alter.html",headers:[{level:2,title:"组合式 API 实现",slug:"组合式-api-实现"},{level:3,title:"生命周期钩子函数",slug:"生命周期钩子函数"},{level:3,title:"<script setup>",slug:"script-setup"},{level:3,title:"组合式 API 与 Vue3 中的差异",slug:"组合式-api-与-vue3-中的差异"},{level:2,title:"响应式 API 实现",slug:"响应式-api-实现"},{level:3,title:"数据响应限制带来的差异",slug:"数据响应限制带来的差异"},{level:3,title:"响应式 API 与 Vue3 中的区别",slug:"响应式-api-与-vue3-中的区别"},{level:2,title:"生态周边适配",slug:"生态周边适配"},{level:3,title:"Pinia store 支持",slug:"pinia-store-支持"},{level:3,title:"I18n 支持",slug:"i18n-支持"},{level:2,title:"输出 web 适配",slug:"输出-web-适配"},{level:2,title:"性能表现",slug:"性能表现"},{level:3,title:"组件初始化耗时",slug:"组件初始化耗时"},{level:3,title:"组件 JS 体积",slug:"组件-js-体积"},{level:3,title:"框架运行时体积",slug:"框架运行时体积"},{level:2,title:"破坏性改变",slug:"破坏性改变"},{level:2,title:"未来规划",slug:"未来规划"}]},{title:"Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化",frontmatter:{},regularPath:"/articles/2.9-release-alter.html",relativePath:"articles/2.9-release-alter.md",key:"v-16cd1ba0",path:"/articles/2.9-release-alter.html",headers:[{level:2,title:"原子类支持",slug:"原子类支持"},{level:3,title:"小程序原子类使用注意事项",slug:"小程序原子类使用注意事项"},{level:3,title:"原子类使用参考文档",slug:"原子类使用参考文档"},{level:2,title:"输出 web 支持 SSR",slug:"输出-web-支持-ssr"},{level:3,title:"配置使用 SSR",slug:"配置使用-ssr"},{level:3,title:"SSR 生命周期",slug:"ssr-生命周期"},{level:3,title:"其他注意事项",slug:"其他注意事项"},{level:2,title:"包体积优化",slug:"包体积优化"},{level:3,title:"模版代码优化",slug:"模版代码优化"},{level:3,title:"空模块移除",slug:"空模块移除"},{level:3,title:"Render函数优化",slug:"render函数优化"},{level:2,title:"未来规划",slug:"未来规划"}]},{title:"Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化",frontmatter:{},regularPath:"/articles/2.9-release.html",relativePath:"articles/2.9-release.md",key:"v-2f3a4e02",path:"/articles/2.9-release.html",headers:[{level:2,title:"原子类支持",slug:"原子类支持"},{level:3,title:"小程序原子类使用注意事项",slug:"小程序原子类使用注意事项"},{level:3,title:"原子类使用参考文档",slug:"原子类使用参考文档"},{level:2,title:"输出 web 支持 SSR",slug:"输出-web-支持-ssr"},{level:3,title:"配置使用 SSR",slug:"配置使用-ssr"},{level:3,title:"SSR 生命周期",slug:"ssr-生命周期"},{level:3,title:"其他注意事项",slug:"其他注意事项"},{level:2,title:"包体积优化",slug:"包体积优化"},{level:3,title:"模版代码优化",slug:"模版代码优化"},{level:3,title:"空模块移除",slug:"空模块移除"},{level:3,title:"Render函数优化",slug:"render函数优化"},{level:2,title:"未来规划",slug:"未来规划"}]},{title:"小程序开发者，为什么你应该尝试下MPX",frontmatter:{sidebarDepth:2},regularPath:"/articles/mpx1.html",relativePath:"articles/mpx1.md",key:"v-65ac7ae0",path:"/articles/mpx1.html",headers:[{level:2,title:"背景",slug:"背景"},{level:2,title:"优势",slug:"优势"},{level:3,title:"原生兼容",slug:"原生兼容"},{level:3,title:"第三方组件库",slug:"第三方组件库"},{level:3,title:"按需引用",slug:"按需引用"},{level:3,title:"跨小程序平台",slug:"跨小程序平台"},{level:3,title:"能力增强",slug:"能力增强"},{level:3,title:"性能优势",slug:"性能优势"},{level:2,title:"总结",slug:"总结"}]},{title:"小程序跨端组件库 Mpx-cube-ui 开源啦",frontmatter:{},regularPath:"/articles/mpx-cube-ui.html",relativePath:"articles/mpx-cube-ui.md",key:"v-29b15788",path:"/articles/mpx-cube-ui.html",headers:[{level:2,title:"业务现状",slug:"业务现状"},{level:3,title:"集团产品的迭代",slug:"集团产品的迭代"},{level:3,title:"团队内的业务迭代",slug:"团队内的业务迭代"},{level:2,title:"Mpx 技术生态",slug:"mpx-技术生态"},{level:2,title:"组件库自身的维护",slug:"组件库自身的维护"},{level:2,title:"Mpx 组件体系",slug:"mpx-组件体系"},{level:2,title:"Mpx-cube-ui 组件设计",slug:"mpx-cube-ui-组件设计"},{level:2,title:"未来的规划",slug:"未来的规划"}]},{title:"@mpxjs/cli 插件化改造",frontmatter:{},regularPath:"/articles/mpx-cli-next.html",relativePath:"articles/mpx-cli-next.md",key:"v-67f67560",path:"/articles/mpx-cli-next.html",headers:[{level:2,title:"背景 & 现状",slug:"背景-现状"},{level:2,title:"mpxjs/cli@2.x 自身的痛点",slug:"mpxjs-cli-2-x-自身的痛点"},{level:3,title:"有关 @vue/cli",slug:"有关-vue-cli"},{level:2,title:"插件化改造方案",slug:"插件化改造方案"},{level:3,title:"底层能力",slug:"底层能力"},{level:3,title:"上层插件拆分",slug:"上层插件拆分"},{level:3,title:"Web 平台编译构建能力增强",slug:"web-平台编译构建能力增强"},{level:3,title:"项目配置拓展能力",slug:"项目配置拓展能力"},{level:3,title:"改造后的目录结构",slug:"改造后的目录结构"},{level:2,title:"没有银弹",slug:"没有银弹"},{level:2,title:"如何开发一个基于 mpx 的业务脚手架插件",slug:"如何开发一个基于-mpx-的业务脚手架插件"}]},{title:"Mpx 小程序框架技术揭秘",frontmatter:{sidebarDepth:2},regularPath:"/articles/mpx2.html",relativePath:"articles/mpx2.md",key:"v-9cda2680",path:"/articles/mpx2.html",headers:[{level:2,title:"编译环节",slug:"编译环节"},{level:3,title:"动态入口编译",slug:"动态入口编译"},{level:3,title:"Render Function",slug:"render-function"},{level:3,title:"Wxs Module",slug:"wxs-module"},{level:3,title:"template/script/style/json 模块单文件的生成",slug:"template-script-style-json-模块单文件的生成"},{level:2,title:"运行时环节",slug:"运行时环节"},{level:3,title:"响应式系统",slug:"响应式系统"},{level:2,title:"性能优化",slug:"性能优化"},{level:3,title:"尽可能的减少 setData 传输的数据",slug:"尽可能的减少-setdata-传输的数据"},{level:3,title:"尽可能的减少 setData 的调用频次",slug:"尽可能的减少-setdata-的调用频次"}]},{title:"小程序框架运行时性能大测评",frontmatter:{sidebarDepth:2},regularPath:"/articles/performance.html",relativePath:"articles/performance.md",key:"v-aba0a160",path:"/articles/performance.html",headers:[{level:2,title:"测试方案",slug:"测试方案"},{level:3,title:"动态测试场景",slug:"动态测试场景"},{level:3,title:"静态测试场景",slug:"静态测试场景"},{level:2,title:"测试流程及数据",slug:"测试流程及数据"},{level:3,title:"框架运行时体积",slug:"框架运行时体积"},{level:3,title:"页面渲染耗时(动态测试)",slug:"页面渲染耗时-动态测试"},{level:3,title:"页面更新耗时(无后台数据)",slug:"页面更新耗时-无后台数据"},{level:3,title:"页面更新耗时(有后台数据)",slug:"页面更新耗时-有后台数据"},{level:3,title:"页面更新耗时(大数据量场景)",slug:"页面更新耗时-大数据量场景"},{level:3,title:"局部更新耗时",slug:"局部更新耗时"},{level:3,title:"setData调用",slug:"setdata调用"},{level:3,title:"页面渲染耗时(静态测试)",slug:"页面渲染耗时-静态测试"},{level:2,title:"结论",slug:"结论"},{level:2,title:"一点私货",slug:"一点私货"}]},{title:"滴滴出行小程序体积优化实践",frontmatter:{sidebarDepth:2},regularPath:"/articles/size-control.html",relativePath:"articles/size-control.md",key:"v-06150180",path:"/articles/size-control.html",headers:[{level:2,title:"概述",slug:"概述"},{level:2,title:"背景",slug:"背景"},{level:2,title:"体积控制",slug:"体积控制"},{level:3,title:"基础优化手段",slug:"基础优化手段"},{level:3,title:"分析体积",slug:"分析体积"},{level:3,title:"配置分包",slug:"配置分包"},{level:3,title:"分包资源精细化管理",slug:"分包资源精细化管理"},{level:3,title:"封面方案",slug:"封面方案"},{level:2,title:"总结",slug:"总结"}]},{title:"使用Typescript新特性Template Literal Types完善链式key的类型推导",frontmatter:{sidebarDepth:2},regularPath:"/articles/ts-derivation.html",relativePath:"articles/ts-derivation.md",key:"v-16a68b26",path:"/articles/ts-derivation.html",headers:[{level:2,title:"前言",slug:"前言"},{level:2,title:"特性",slug:"特性"},{level:2,title:"可以用来做什么",slug:"可以用来做什么"},{level:2,title:"getValueByPath使用TS实现",slug:"getvaluebypath使用ts实现"},{level:3,title:"单层推导",slug:"单层推导"},{level:3,title:"多层推导",slug:"多层推导"},{level:2,title:"深层次Actions的dispatch函数TS实现",slug:"深层次actions的dispatch函数ts实现"},{level:2,title:"结尾",slug:"结尾"},{level:2,title:"题外话：UnionToIntersection",slug:"题外话：uniontointersection"},{level:3,title:"Distributive conditional types",slug:"distributive-conditional-types"},{level:3,title:"Type inference in conditional types",slug:"type-inference-in-conditional-types"},{level:3,title:"UnionToIntersection 原理探究",slug:"uniontointersection-原理探究"},{level:2,title:"参考资料汇总",slug:"参考资料汇总"}]},{title:"原生能力兼容",frontmatter:{},regularPath:"/guide/advance/ability-compatible.html",relativePath:"guide/advance/ability-compatible.md",key:"v-2df9c8de",path:"/guide/advance/ability-compatible.html",headers:[{level:2,title:"custom-tab-bar",slug:"custom-tab-bar"},{level:2,title:"workers",slug:"workers"},{level:2,title:"云开发",slug:"云开发"},{level:2,title:"useExtendedLib",slug:"useextendedlib"}]},{title:"文档指南",frontmatter:{},regularPath:"/desc.html",relativePath:"desc.md",key:"v-770abfaa",path:"/desc.html",headers:[{level:2,title:"该项目指南",slug:"该项目指南"},{level:2,title:"编写格式指南",slug:"编写格式指南"},{level:2,title:"参考",slug:"参考"}]},{title:"自定义路径",frontmatter:{},regularPath:"/guide/advance/custom-output-path.html",relativePath:"guide/advance/custom-output-path.md",key:"v-419821e2",path:"/guide/advance/custom-output-path.html",headers:[{level:2,title:"自定义页面路径",slug:"自定义页面路径"},{level:2,title:"customOutputPath",slug:"customoutputpath"}]},{title:"Mpx 小程序单元测试能力建设与实践",frontmatter:{sidebarDepth:2},regularPath:"/articles/unit-test.html",relativePath:"articles/unit-test.md",key:"v-31f676ba",path:"/articles/unit-test.html",headers:[{level:2,title:"什么是单元测试",slug:"什么是单元测试"},{level:2,title:"前端单元测试",slug:"前端单元测试"},{level:3,title:"前端单元测试工具",slug:"前端单元测试工具"},{level:3,title:"测试断言库",slug:"测试断言库"},{level:3,title:"Jest 框架简介",slug:"jest-框架简介"},{level:2,title:"小程序单元测试",slug:"小程序单元测试"},{level:3,title:"与 web 应用的不同",slug:"与-web-应用的不同"},{level:3,title:"小程序单测框架整体流程",slug:"小程序单测框架整体流程"},{level:2,title:"Mpx 框架单元测试",slug:"mpx-框架单元测试"},{level:3,title:"初期版本",slug:"初期版本"},{level:3,title:"优化版本",slug:"优化版本"},{level:2,title:"Mpx组件单元测试实战",slug:"mpx组件单元测试实战"},{level:2,title:"结语",slug:"结语"}]},{title:"使用 DllPlugin",frontmatter:{},regularPath:"/guide/advance/dll-plugin.html",relativePath:"guide/advance/dll-plugin.md",key:"v-32741058",path:"/guide/advance/dll-plugin.html",headers:[{level:3,title:"相关插件简述",slug:"相关插件简述"},{level:3,title:"Mpx中 DllPlugin 的使用",slug:"mpx中-dllplugin-的使用"},{level:3,title:"Mpx 中对 DllPlugin 配置所做的相关处理",slug:"mpx-中对-dllplugin-配置所做的相关处理"},{level:3,title:"总结",slug:"总结"}]},{title:"分包异步化",frontmatter:{},regularPath:"/guide/advance/async-subpackage.html",relativePath:"guide/advance/async-subpackage.md",key:"v-27eacdde",path:"/guide/advance/async-subpackage.html",headers:[{level:2,title:"跨分包自定义组件引用",slug:"跨分包自定义组件引用"},{level:2,title:"跨分包 JS 代码引用",slug:"跨分包-js-代码引用"},{level:2,title:"跨分包 Store 引用",slug:"跨分包-store-引用"}]},{title:"图像资源处理",frontmatter:{},regularPath:"/guide/advance/image-process.html",relativePath:"guide/advance/image-process.md",key:"v-43feb580",path:"/guide/advance/image-process.html",headers:[{level:2,title:"图像资源引入有三种方式",slug:"图像资源引入有三种方式"},{level:2,title:"Base64 图像资源",slug:"base64-图像资源"},{level:2,title:"CDN 图像资源",slug:"cdn-图像资源"},{level:2,title:"CDN 图像资源输出本地目录，用户自行批量上传到CDN服务器",slug:"cdn-图像资源输出本地目录，用户自行批量上传到cdn服务器"},{level:2,title:"用户自定义图像处理方式",slug:"用户自定义图像处理方式"}]},{title:"国际化i18n",frontmatter:{},regularPath:"/guide/advance/i18n.html",relativePath:"guide/advance/i18n.md",key:"v-261b4b10",path:"/guide/advance/i18n.html",headers:[{level:2,title:"开启 i18n",slug:"开启-i18n"},{level:2,title:"选项式 API 中使用",slug:"options-api-usage"},{level:2,title:"在组合式 API 中使用",slug:"composition-api-usage"},{level:3,title:"开始使用",slug:"开始使用"},{level:2,title:"作用域",slug:"scope"},{level:2,title:"动态变更locale",slug:"动态变更locale"},{level:2,title:"动态更新语言集",slug:"动态更新语言集"},{level:2,title:"平台支持",slug:"平台支持"}]},{title:"使用 mixin",frontmatter:{},regularPath:"/guide/advance/mixin.html",relativePath:"guide/advance/mixin.md",key:"v-23021ac0",path:"/guide/advance/mixin.html",headers:[{level:2,title:"局部 Mixin",slug:"局部-mixin"},{level:2,title:"全局 Mixin",slug:"全局-mixin"}]},{title:"状态管理（pinia）",frontmatter:{},regularPath:"/guide/advance/pinia.html",relativePath:"guide/advance/pinia.md",key:"v-6a447440",path:"/guide/advance/pinia.html",headers:[{level:2,title:"介绍",slug:"介绍"},{level:3,title:"创建 pinia",slug:"创建-pinia"},{level:3,title:"创建 store",slug:"创建-store"},{level:3,title:"使用 store",slug:"使用-store"},{level:2,title:"使用插件",slug:"使用插件"}]},{title:"小程序插件",frontmatter:{},regularPath:"/guide/advance/plugin.html",relativePath:"guide/advance/plugin.md",key:"v-aa3f94b4",path:"/guide/advance/plugin.html",headers:[{level:3,title:"如何编写一个插件",slug:"如何编写一个插件"}]},{title:"使用npm",frontmatter:{},regularPath:"/guide/advance/npm.html",relativePath:"guide/advance/npm.md",key:"v-298abc80",path:"/guide/advance/npm.html",headers:[{level:2,title:"下载npm包",slug:"下载npm包"},{level:2,title:"引用npm模块",slug:"引用npm模块"},{level:2,title:"引用npm组件/页面",slug:"引用npm组件-页面"},{level:2,title:"兼容原生小程序路径规范",slug:"兼容原生小程序路径规范"}]},{title:"资源路径获取",frontmatter:{},regularPath:"/guide/advance/resource-resolve.html",relativePath:"guide/advance/resource-resolve.md",key:"v-f6b6871c",path:"/guide/advance/resource-resolve.html",headers:[{level:2,title:"?resolve",slug:"resolve"}]},{title:"跨平台",frontmatter:{},regularPath:"/guide/advance/platform.html",relativePath:"guide/advance/platform.md",key:"v-c6307034",path:"/guide/advance/platform.html",headers:[{level:2,title:"多平台支持",slug:"多平台支持"},{level:3,title:"template增强特性",slug:"template增强特性"},{level:3,title:"script增强特性",slug:"script增强特性"},{level:3,title:"style增强特性",slug:"style增强特性"},{level:3,title:"json增强特性",slug:"json增强特性"},{level:2,title:"跨平台输出小程序",slug:"跨平台输出小程序"},{level:3,title:"使用方法",slug:"使用方法"},{level:3,title:"跨平台差异抹平",slug:"跨平台差异抹平"},{level:2,title:"跨平台条件编译",slug:"跨平台条件编译"},{level:3,title:"文件维度条件编译",slug:"文件维度条件编译"},{level:3,title:"区块维度条件编译",slug:"区块维度条件编译"},{level:3,title:"代码维度条件编译",slug:"代码维度条件编译"},{level:3,title:"属性维度条件编译",slug:"属性维度条件编译"},{level:3,title:"通过 env 实现自定义目标环境的条件编译",slug:"use-env"},{level:3,title:"其他注意事项",slug:"其他注意事项"},{level:2,title:"跨平台输出web",slug:"跨平台输出web"},{level:3,title:"技术实现",slug:"技术实现"},{level:3,title:"使用方法",slug:"使用方法"},{level:3,title:"支持范围",slug:"支持范围"}]},{title:"依赖注入（Provide/Inject）",frontmatter:{},regularPath:"/guide/advance/provide-inject.html",relativePath:"guide/advance/provide-inject.md",key:"v-b7e9c1dc",path:"/guide/advance/provide-inject.html",headers:[{level:2,title:"适用场景",slug:"适用场景"},{level:2,title:"Provide 提供",slug:"provide-提供"},{level:3,title:"组合式语法",slug:"组合式语法"},{level:3,title:"选项式语法",slug:"选项式语法"},{level:3,title:"应用级顶层 provide",slug:"应用级顶层-provide"},{level:2,title:"Inject 注入",slug:"inject-注入"},{level:3,title:"组合式语法",slug:"组合式语法"},{level:3,title:"选项式语法",slug:"选项式语法"},{level:2,title:"避免注入名潜在冲突",slug:"避免注入名潜在冲突"},{level:2,title:"TS 类型支持",slug:"ts-类型支持"},{level:2,title:"跨端差异",slug:"跨端差异"}]},{title:"SSR",frontmatter:{},regularPath:"/guide/advance/ssr.html",relativePath:"guide/advance/ssr.md",key:"v-59734f60",path:"/guide/advance/ssr.html",headers:[{level:2,title:"配置使用 SSR",slug:"配置使用-ssr"},{level:3,title:"构建server/client bundle",slug:"构建server-client-bundle"},{level:3,title:"准备页面模版",slug:"准备页面模版"},{level:3,title:"集成启动 SSR 服务",slug:"集成启动-ssr-服务"},{level:2,title:"SSR 生命周期",slug:"ssr-生命周期"},{level:3,title:"onAppInit",slug:"onappinit"},{level:3,title:"serverPrefetch",slug:"serverprefetch"},{level:3,title:"onSSRAppCreated",slug:"onssrappcreated"},{level:2,title:"其他注意事项",slug:"其他注意事项"}]},{title:"包体积分析",frontmatter:{},regularPath:"/guide/advance/size-report.html",relativePath:"guide/advance/size-report.md",key:"v-4cc39ac0",path:"/guide/advance/size-report.html",headers:[{level:2,title:"与 webpack-bundle-analyzer 的区别",slug:"与-webpack-bundle-analyzer-的区别"},{level:2,title:"使用方法",slug:"使用方法"},{level:2,title:"业务实践",slug:"业务实践"},{level:2,title:"总结",slug:"总结"}]},{title:"状态管理（store）",frontmatter:{},regularPath:"/guide/advance/store.html",relativePath:"guide/advance/store.md",key:"v-04b286c0",path:"/guide/advance/store.html",headers:[{level:2,title:"介绍",slug:"介绍"},{level:3,title:"创建 store",slug:"创建-store"},{level:2,title:"State",slug:"state"},{level:3,title:"在组件中获取 state",slug:"在组件中获取-state"},{level:3,title:"MapState 辅助函数",slug:"mapstate-辅助函数"},{level:3,title:"对象展开运算符",slug:"对象展开运算符"},{level:2,title:"Getter",slug:"getter"},{level:3,title:"MapGetters 辅助函数",slug:"mapgetters-辅助函数"},{level:2,title:"Mutation",slug:"mutation"},{level:3,title:"提交载荷（Payload）",slug:"提交载荷（payload）"},{level:3,title:"Mutation 必须是同步函数",slug:"mutation-必须是同步函数"},{level:3,title:"在组件中提交 Mutation",slug:"在组件中提交-mutation"},{level:2,title:"Action",slug:"action"},{level:3,title:"调用 action",slug:"调用-action"},{level:3,title:"在组件中调用 Action",slug:"在组件中调用-action"},{level:3,title:"组合 Action",slug:"组合-action"},{level:2,title:"Modules",slug:"modules"},{level:3,title:"模块的局部状态",slug:"模块的局部状态"},{level:3,title:"模块在组件中的引入方式",slug:"模块在组件中的引入方式"},{level:2,title:"多实例 store",slug:"多实例-store"},{level:3,title:"合并继承多实例 store",slug:"合并继承多实例-store"},{level:2,title:"在 Typescript 中使用 store",slug:"在-typescript-中使用-store"},{level:2,title:"在组合式 API 中使用 store",slug:"use-store-in-composition-api"}]},{title:"使用分包",frontmatter:{},regularPath:"/guide/advance/subpackage.html",relativePath:"guide/advance/subpackage.md",key:"v-25e023c0",path:"/guide/advance/subpackage.html",headers:[{level:2,title:"原生语法注册分包",slug:"原生语法注册分包"},{level:2,title:"packages 语法注册分包",slug:"packages-语法注册分包"},{level:3,title:"使用方法",slug:"使用方法"},{level:3,title:"注意事项",slug:"注意事项"},{level:2,title:"独立分包",slug:"独立分包"},{level:2,title:"分包预下载",slug:"分包预下载"},{level:2,title:"分包注意事项",slug:"分包注意事项"}]},{title:"类名样式绑定",frontmatter:{},regularPath:"/guide/basic/class-style-binding.html",relativePath:"guide/basic/class-style-binding.md",key:"v-ade3a0c0",path:"/guide/basic/class-style-binding.html",headers:[{level:2,title:"类名绑定",slug:"类名绑定"},{level:3,title:"对象语法",slug:"对象语法"},{level:3,title:"数组语法",slug:"数组语法"},{level:2,title:"样式绑定",slug:"样式绑定"},{level:3,title:"对象语法",slug:"对象语法"},{level:3,title:"数组语法",slug:"数组语法"}]},{title:"自定义组件",frontmatter:{},regularPath:"/guide/basic/component.html",relativePath:"guide/basic/component.md",key:"v-082a4080",path:"/guide/basic/component.html",headers:[{level:2,title:"动态组件",slug:"动态组件"},{level:2,title:"slot",slug:"slot"}]},{title:"条件渲染",frontmatter:{},regularPath:"/guide/basic/conditional-render.html",relativePath:"guide/basic/conditional-render.md",key:"v-4653082a",path:"/guide/basic/conditional-render.html"},{title:"使用原子类",frontmatter:{},regularPath:"/guide/advance/utility-first-css.html",relativePath:"guide/advance/utility-first-css.md",key:"v-eb995c80",path:"/guide/advance/utility-first-css.html",headers:[{level:2,title:"原子类环境配置",slug:"compile-config"},{level:3,title:"vscode插件支持",slug:"vscode插件支持"},{level:2,title:"功能支持范围",slug:"config-supports"},{level:2,title:"工具类可用范围",slug:"utility-supports"},{level:3,title:"General",slug:"general"},{level:3,title:"Accessibility",slug:"accessibility"},{level:3,title:"Animations",slug:"animations"},{level:3,title:"Backgrounds",slug:"backgrounds"},{level:3,title:"Behaviors",slug:"behaviors"},{level:3,title:"Borders",slug:"borders"},{level:3,title:"Effects",slug:"effects"},{level:3,title:"Filters",slug:"filters"},{level:3,title:"Interactivity",slug:"interactivity"},{level:3,title:"Layout",slug:"layout"},{level:2,title:"小程序原子类使用注意点",slug:"attentions"},{level:3,title:"特殊字符转义",slug:"escape"},{level:3,title:"原子类分包输出",slug:"subpackage"},{level:3,title:"样式隔离与组件分包异步",slug:"style-isolation"}]},{title:"事件处理",frontmatter:{},regularPath:"/guide/basic/event.html",relativePath:"guide/basic/event.md",key:"v-4c636240",path:"/guide/basic/event.html"},{title:"列表渲染",frontmatter:{},regularPath:"/guide/basic/list-render.html",relativePath:"guide/basic/list-render.md",key:"v-9217ab80",path:"/guide/basic/list-render.html",headers:[{level:2,title:"\b特殊处理",slug:"特殊处理"},{level:3,title:"computed方式",slug:"computed方式"},{level:3,title:"wxs方式",slug:"wxs方式"}]},{title:"IDE 高亮配置",frontmatter:{},regularPath:"/guide/basic/ide.html",relativePath:"guide/basic/ide.md",key:"v-b77c6940",path:"/guide/basic/ide.html",headers:[{level:2,title:"IntelliJ",slug:"intellij"},{level:2,title:"vscode",slug:"vscode"},{level:3,title:"插件功能介绍",slug:"插件功能介绍"}]},{title:"CSS 处理",frontmatter:{},regularPath:"/guide/basic/css.html",relativePath:"guide/basic/css.md",key:"v-64d5c000",path:"/guide/basic/css.html",headers:[{level:2,title:"CSS 预编译",slug:"css-预编译"},{level:2,title:"公共样式复用",slug:"公共样式复用"},{level:3,title:"style src 复用",slug:"style-src-复用"},{level:3,title:"@import 复用",slug:"import-复用"},{level:2,title:"CSS 压缩",slug:"css-压缩"}]},{title:"模版内可选链表达式",frontmatter:{},regularPath:"/guide/basic/option-chain.html",relativePath:"guide/basic/option-chain.md",key:"v-3f8ff5dc",path:"/guide/basic/option-chain.html"},{title:"获取组件实例/节点信息",frontmatter:{},regularPath:"/guide/basic/refs.html",relativePath:"guide/basic/refs.md",key:"v-14d018a4",path:"/guide/basic/refs.html",headers:[{level:2,title:"在列表渲染中使用wx:ref",slug:"在列表渲染中使用wx-ref"}]},{title:"数据响应",frontmatter:{},regularPath:"/guide/basic/reactive.html",relativePath:"guide/basic/reactive.md",key:"v-3e859f72",path:"/guide/basic/reactive.html"},{title:"单文件开发",frontmatter:{},regularPath:"/guide/basic/single-file.html",relativePath:"guide/basic/single-file.md",key:"v-05fb8080",path:"/guide/basic/single-file.html"},{title:"双向绑定",frontmatter:{},regularPath:"/guide/basic/two-way-binding.html",relativePath:"guide/basic/two-way-binding.md",key:"v-4db713e0",path:"/guide/basic/two-way-binding.html",headers:[{level:2,title:"对自定义组件使用",slug:"对自定义组件使用"},{level:2,title:"更改双向绑定的监听事件及数据属性",slug:"更改双向绑定的监听事件及数据属性"},{level:2,title:"更改双向绑定事件数据路径",slug:"更改双向绑定事件数据路径"},{level:2,title:"双向绑定过滤器",slug:"双向绑定过滤器"}]},{title:"模板语法",frontmatter:{},regularPath:"/guide/basic/template.html",relativePath:"guide/basic/template.md",key:"v-25ecbea0",path:"/guide/basic/template.html",headers:[{level:2,title:"模板预编译",slug:"模板预编译"}]},{title:"快速开始",frontmatter:{},regularPath:"/guide/basic/start.html",relativePath:"guide/basic/start.md",key:"v-fa77fc40",path:"/guide/basic/start.html",headers:[{level:2,title:"安装脚手架",slug:"安装脚手架"},{level:2,title:"创建项目安装依赖",slug:"创建项目安装依赖"},{level:2,title:"编译构建",slug:"编译构建"},{level:2,title:"预览调试",slug:"预览调试"},{level:2,title:"开始code",slug:"开始code"},{level:2,title:"跨平台输出",slug:"跨平台输出"}]},{title:"响应式 API",frontmatter:{},regularPath:"/guide/composition-api/reactive-api.html",relativePath:"guide/composition-api/reactive-api.md",key:"v-1553266a",path:"/guide/composition-api/reactive-api.html",headers:[{level:2,title:"创建响应式对象",slug:"创建响应式对象"},{level:2,title:"使用ref()创建独立的响应式值",slug:"use-ref-create-reactive-value"},{level:3,title:"Ref 解包",slug:"ref-解包"},{level:3,title:"访问响应式对象",slug:"访问响应式对象"},{level:2,title:"响应式对象解构",slug:"响应式对象解构"},{level:2,title:"计算值",slug:"计算值"},{level:2,title:"watchEffect",slug:"watcheffect"},{level:3,title:"停止侦听",slug:"停止侦听"},{level:3,title:"清除副作用",slug:"清除副作用"},{level:3,title:"副作用刷新时机",slug:"副作用刷新时机"},{level:2,title:"watch",slug:"watch"},{level:3,title:"侦听单个数据源",slug:"侦听单个数据源"},{level:3,title:"侦听多个数据源",slug:"侦听多个数据源"},{level:3,title:"侦听响应式对象",slug:"侦听响应式对象"},{level:3,title:"立即回调的侦听器",slug:"立即回调的侦听器"},{level:3,title:"与 watchEffect 共享的行为",slug:"与-watcheffect-共享的行为"},{level:2,title:"响应式 API 与 Vue3 中的区别",slug:"响应式-api-与-vue3-中的区别"},{level:3,title:"数据响应限制带来的差异",slug:"数据响应限制带来的差异"}]},{title:"Api代理",frontmatter:{},regularPath:"/guide/extend/api-proxy.html",relativePath:"guide/extend/api-proxy.md",key:"v-4777611a",path:"/guide/extend/api-proxy.html",headers:[{level:2,title:"Usage",slug:"usage"},{level:2,title:"Options",slug:"options"},{level:2,title:"example",slug:"example"},{level:3,title:"普通形式",slug:"普通形式"},{level:3,title:"使用promise形式",slug:"使用promise形式"}]},{title:"组合式 API",frontmatter:{},regularPath:"/guide/composition-api/composition-api.html",relativePath:"guide/composition-api/composition-api.md",key:"v-453e3320",path:"/guide/composition-api/composition-api.html",headers:[{level:2,title:"什么是组合式 API",slug:"什么是组合式-api"},{level:2,title:"组合式 API 基础",slug:"组合式-api-基础"},{level:3,title:"setup 函数",slug:"setup-函数"},{level:3,title:"带 ref 的响应式变量",slug:"带-ref-的响应式变量"},{level:3,title:"在 setup 中注册生命周期钩子",slug:"在-setup-中注册生命周期钩子"},{level:3,title:"watch 响应式更改",slug:"watch-响应式更改"},{level:3,title:"独立的 computed 属性",slug:"独立的-computed-属性"},{level:2,title:"Setup",slug:"setup"},{level:3,title:"参数",slug:"参数"},{level:3,title:"访问组件的 property",slug:"访问组件的-property"},{level:3,title:"结合模板使用",slug:"结合模板使用"},{level:3,title:"使用 this",slug:"使用-this"},{level:2,title:"生命周期钩子",slug:"lifecycle-hooks"},{level:3,title:"框架内置生命周期",slug:"框架内置生命周期"},{level:3,title:"具有副作用的页面事件",slug:"具有副作用的页面事件"},{level:2,title:"模板引用",slug:"template-ref"},{level:2,title:"<script setup>",slug:"script-setup"},{level:3,title:"基本语法",slug:"基本语法"},{level:3,title:"顶层的绑定会被暴露给模版",slug:"顶层的绑定会被暴露给模版"},{level:3,title:"响应式",slug:"响应式"},{level:3,title:"defineProps()",slug:"defineprops"},{level:3,title:"defineExpose()",slug:"defineexpose"},{level:3,title:"defineOptions()",slug:"defineoptions"},{level:3,title:"useContext()",slug:"usecontext"},{level:3,title:"针对 TypeScript 的功能",slug:"针对-typescript-的功能"},{level:3,title:"限制",slug:"限制"},{level:2,title:"组合式 API 与 Vue3 中的区别",slug:"组合式-api-与-vue3-中的区别"},{level:2,title:"组合式 API 周边生态能力的使用",slug:"组合式-api-周边生态能力的使用"}]},{title:"网络请求",frontmatter:{},regularPath:"/guide/extend/fetch.html",relativePath:"guide/extend/fetch.md",key:"v-2fa3b31c",path:"/guide/extend/fetch.html",headers:[{level:2,title:"使用说明",slug:"使用说明"},{level:2,title:"导出说明",slug:"导出说明"},{level:2,title:"请求拦截器",slug:"请求拦截器"},{level:2,title:"请求中断",slug:"请求中断"},{level:2,title:"设置请求参数",slug:"设置请求参数"},{level:2,title:"设置请求 timeout",slug:"设置请求-timeout"},{level:2,title:"在组合式 API 中使用",slug:"composition-api-usage"}]},{title:"数据 Mock",frontmatter:{},regularPath:"/guide/extend/mock.html",relativePath:"guide/extend/mock.md",key:"v-670c5b20",path:"/guide/extend/mock.html",headers:[{level:2,title:"安装",slug:"安装"},{level:2,title:"使用说明",slug:"使用说明"},{level:2,title:"Mock 入参",slug:"mock-入参"},{level:2,title:"Mock 规则示例",slug:"mock-规则示例"}]},{title:"扩展mpx",frontmatter:{},regularPath:"/guide/extend/",relativePath:"guide/extend/index.md",key:"v-4147fde5",path:"/guide/extend/",headers:[{level:2,title:"开发插件",slug:"开发插件"},{level:2,title:"目前已有插件",slug:"目前已有插件"}]},{title:"从 2.7 升级至 2.8",frontmatter:{},regularPath:"/guide/migrate/2.8.html",relativePath:"guide/migrate/2.8.md",key:"v-41032180",path:"/guide/migrate/2.8.html",headers:[{level:2,title:"依赖升级",slug:"依赖升级"},{level:2,title:"编译配置变更",slug:"编译配置变更"},{level:2,title:"运行时破坏性变化",slug:"运行时破坏性变化"}]},{title:"从旧版本迁移至 2.7",frontmatter:{},regularPath:"/guide/migrate/2.7.html",relativePath:"guide/migrate/2.7.md",key:"v-05fd3820",path:"/guide/migrate/2.7.html",headers:[{level:2,title:"依赖升级",slug:"依赖升级"},{level:2,title:"开启持久化缓存",slug:"开启持久化缓存"},{level:2,title:"修改rules",slug:"修改rules"},{level:2,title:"entry配置修改",slug:"entry配置修改"},{level:2,title:"MpxWebpackPlugin配置变更",slug:"mpxwebpackplugin配置变更"}]},{frontmatter:{},regularPath:"/guide/platform/miniprogram.html",relativePath:"guide/platform/miniprogram.md",key:"v-69e59278",path:"/guide/platform/miniprogram.html"},{frontmatter:{},regularPath:"/guide/platform/web.html",relativePath:"guide/platform/web.md",key:"v-4269b2b6",path:"/guide/platform/web.html"},{title:"mpx-cli v2 迁移到 v3",frontmatter:{},regularPath:"/guide/migrate/mpx-cli-3.html",relativePath:"guide/migrate/mpx-cli-3.md",key:"v-63e1d400",path:"/guide/migrate/mpx-cli-3.html",headers:[{level:2,title:"升级@mpxjs/cli",slug:"升级-mpxjs-cli"},{level:2,title:"配置迁移",slug:"配置迁移"},{level:2,title:"新增自定义配置/修改已有配置参数",slug:"新增自定义配置-修改已有配置参数"},{level:2,title:"编译后钩子",slug:"编译后钩子"},{level:2,title:"项目结构变化",slug:"项目结构变化"},{level:2,title:"More",slug:"more"},{level:3,title:"1. 插件化",slug:"_1-插件化"},{level:3,title:"2. 模板",slug:"_2-模板"},{level:3,title:"3. 调试",slug:"_3-调试"},{level:3,title:"4. 插件管理",slug:"_4-插件管理"}]},{title:"从 2.8 升级至 2.9",frontmatter:{},regularPath:"/guide/migrate/2.9.html",relativePath:"guide/migrate/2.9.md",key:"v-7c090ae0",path:"/guide/migrate/2.9.html",headers:[{level:2,title:"依赖升级",slug:"依赖升级"},{level:2,title:"使用原子类",slug:"使用原子类"},{level:2,title:"使用SSR",slug:"使用ssr"}]},{title:"跨端输出基础",frontmatter:{},regularPath:"/guide/platform/",relativePath:"guide/platform/index.md",key:"v-fbaff41a",path:"/guide/platform/",headers:[{level:2,title:"跨端输出配置",slug:"跨端输出配置"},{level:2,title:"跨端条件编译",slug:"跨端条件编译"},{level:3,title:"文件维度条件编译",slug:"文件维度条件编译"},{level:3,title:"区块维度条件编译",slug:"区块维度条件编译"},{level:3,title:"代码维度条件编译",slug:"代码维度条件编译"},{level:3,title:"属性维度条件编译",slug:"属性维度条件编译"},{level:3,title:"通过 env 实现自定义目标环境的条件编译",slug:"use-env"},{level:2,title:"环境API跨端抹平",slug:"环境api跨端抹平"},{level:2,title:"Webview环境跨端抹平",slug:"webview环境跨端抹平"}]},{title:"E2E自动化测试",frontmatter:{},regularPath:"/guide/tool/e2e-test.html",relativePath:"guide/tool/e2e-test.md",key:"v-2e48a400",path:"/guide/tool/e2e-test.html",headers:[{level:2,title:"@mpx/cli 脚手架集成E2E",slug:"mpx-cli-脚手架集成e2e"},{level:3,title:"文件说明",slug:"文件说明"},{level:2,title:"@mpxjs/e2e-scripts",slug:"mpxjs-e2e-scripts"},{level:2,title:"E2E可视化报告平台",slug:"e2e可视化报告平台"},{level:2,title:"E2E录制+自动化生成case",slug:"e2e录制-自动化生成case"},{level:2,title:"增强API",slug:"增强api"},{level:2,title:"SOP",slug:"sop"}]},{title:"跨端输出RN",frontmatter:{},regularPath:"/guide/platform/rn.html",relativePath:"guide/platform/rn.md",key:"v-f2e08d00",path:"/guide/platform/rn.html",headers:[{level:2,title:"跨端样式定义",slug:"跨端样式定义"},{level:3,title:"CSS选择器",slug:"css选择器"},{level:3,title:"样式单位",slug:"样式单位"},{level:3,title:"文本样式继承",slug:"文本样式继承"},{level:3,title:"简写样式属性",slug:"简写样式属性"},{level:3,title:"CSS函数",slug:"css函数"},{level:3,title:"使用原子类",slug:"使用原子类"},{level:2,title:"混合编写RN代码",slug:"混合编写rn代码"},{level:3,title:"使用RN组件",slug:"使用rn组件"},{level:3,title:"使用React hooks",slug:"使用react-hooks"},{level:2,title:"能力支持范围",slug:"能力支持范围"},{level:3,title:"模版语法",slug:"模版语法"},{level:3,title:"基础组件",slug:"基础组件"}]},{title:"单元测试",frontmatter:{},regularPath:"/guide/tool/unit-test.html",relativePath:"guide/tool/unit-test.md",key:"v-29f7525e",path:"/guide/tool/unit-test.html",headers:[{level:2,title:"安装依赖",slug:"安装依赖"},{level:2,title:"jest 相关配置",slug:"jest-相关配置"},{level:2,title:"简单的断言",slug:"简单的断言"},{level:2,title:"编写可被测试的组件",slug:"编写可被测试的组件"},{level:2,title:"断言异步更新",slug:"断言异步更新"}]},{title:"Mpx运行时增强原理",frontmatter:{},regularPath:"/guide/understand/runtime.html",relativePath:"guide/understand/runtime.md",key:"v-5bf8d898",path:"/guide/understand/runtime.html"},{title:"使用TypeScript开发小程序",frontmatter:{},regularPath:"/guide/tool/ts.html",relativePath:"guide/tool/ts.md",key:"v-15dbdb80",path:"/guide/tool/ts.html",headers:[{level:2,title:"什么是TypeScript",slug:"什么是typescript"},{level:2,title:"TypeScript优势",slug:"typescript优势"},{level:2,title:"使用方式",slug:"使用方式"},{level:3,title:"编写ts前的准备工作",slug:"编写ts前的准备工作"},{level:3,title:".mpx中编写ts（推荐）",slug:"mpx中编写ts（推荐）"},{level:3,title:"为.ts文件添加loader",slug:"为-ts文件添加loader"},{level:3,title:"编写tsconfig.json文件",slug:"编写tsconfig-json文件"},{level:3,title:"增强类型",slug:"增强类型"},{level:2,title:"类型推导及注意事项",slug:"类型推导及注意事项"},{level:3,title:"getMixin",slug:"getmixin"},{level:3,title:"createStoreWithThis",slug:"createstorewiththis"},{level:3,title:"createStateWithThis",slug:"createstatewiththis"},{level:3,title:"createGettersWithThis",slug:"creategetterswiththis"},{level:3,title:"createMutationsWithThis",slug:"createmutationswiththis"},{level:3,title:"createActionsWithThis",slug:"createactionswiththis"}]},{title:"RN 自定义组件支持",frontmatter:{},regularPath:"/rn-component.html",relativePath:"rn-component.md",key:"v-ae319f98",path:"/rn-component.html",headers:[{level:2,title:"参数",slug:"参数"},{level:3,title:"组件定义属性说明",slug:"组件定义属性说明"},{level:3,title:"组件实例属性与方法",slug:"组件实例属性与方法"}]},{title:"Mpx编译构建原理",frontmatter:{},regularPath:"/guide/understand/compile.html",relativePath:"guide/understand/compile.md",key:"v-0960fc22",path:"/guide/understand/compile.html",headers:[{level:2,title:"分包处理",slug:"分包处理"}]},{title:"原生渐进迁移",frontmatter:{},regularPath:"/guide/advance/progressive.html",relativePath:"guide/advance/progressive.md",key:"v-c5494280",path:"/guide/advance/progressive.html",headers:[{level:2,title:"原生接入",slug:"原生接入"},{level:3,title:"原理",slug:"原理"},{level:3,title:"例子",slug:"例子"},{level:2,title:"原生page支持",slug:"原生page支持"},{level:2,title:"原生导出",slug:"原生导出"},{level:3,title:"导出部分页面/组件",slug:"导出部分页面-组件"},{level:3,title:"完整导出",slug:"完整导出"}]},{title:"介绍",frontmatter:{},regularPath:"/guide/basic/intro.html",relativePath:"guide/basic/intro.md",key:"v-48addfa0",path:"/guide/basic/intro.html",headers:[{level:2,title:"Mpx是什么？",slug:"mpx是什么？"},{level:2,title:"Mpx提供了哪些能力？",slug:"mpx提供了哪些能力？"},{level:3,title:"单文件开发(SFC)",slug:"单文件开发-sfc"},{level:3,title:"数据响应",slug:"数据响应"},{level:3,title:"增强的模板语法",slug:"增强的模板语法"},{level:3,title:"极致性能",slug:"极致性能"},{level:3,title:"状态管理",slug:"状态管理"},{level:3,title:"编译构建",slug:"编译构建"},{level:3,title:"跨平台能力",slug:"跨平台能力"},{level:3,title:"完善的周边能力",slug:"完善的周边能力"},{level:2,title:"对比其他小程序框架",slug:"对比其他小程序框架"}]},{title:"API支持列表",frontmatter:{},regularPath:"/rn-api.html",relativePath:"rn-api.md",key:"v-f625b20c",path:"/rn-api.html",headers:[{level:3,title:"getSystemInfo/getSystemInfoSync",slug:"getsysteminfo-getsysteminfosync"},{level:3,title:"getDeviceInfo",slug:"getdeviceinfo"},{level:3,title:"getWindowInfo",slug:"getwindowinfo"},{level:3,title:"request",slug:"request"},{level:3,title:"setStorage/getStorage",slug:"setstorage-getstorage"},{level:3,title:"getStorageInfo",slug:"getstorageinfo"},{level:3,title:"connectSocket",slug:"connectsocket"},{level:3,title:"getNetworkType",slug:"getnetworktype"}]},{title:"Mpx转RN样式使用指南",frontmatter:{},regularPath:"/rn-style.html",relativePath:"rn-style.md",key:"v-4f2760cc",path:"/rn-style.html",headers:[{level:2,title:"样式编写限制",slug:"样式编写限制"},{level:3,title:"选择器",slug:"选择器"},{level:3,title:"布局",slug:"布局"},{level:3,title:"样式单位",slug:"样式单位"},{level:2,title:"组件样式规则",slug:"组件样式规则"},{level:3,title:"text",slug:"text"},{level:3,title:"view",slug:"view"},{level:2,title:"样式参考",slug:"样式参考"},{level:3,title:"Layout Style",slug:"layout-style"},{level:3,title:"View Style",slug:"view-style"},{level:3,title:"Text Style",slug:"text-style"},{level:3,title:"Background Style",slug:"background-style"},{level:3,title:"Shadow Style",slug:"shadow-style"},{level:2,title:"附录",slug:"附录"},{level:3,title:"RN 不支持的属性",slug:"rn-不支持的属性"},{level:3,title:"RN 支持的枚举值",slug:"rn-支持的枚举值"},{level:3,title:"缩写支持",slug:"缩写支持"}]},{title:"Mpx转RN模版使用指南",frontmatter:{},regularPath:"/rn-template.html",relativePath:"rn-template.md",key:"v-16c21d00",path:"/rn-template.html",headers:[{level:2,title:"模版指令",slug:"模版指令"},{level:2,title:"事件编写",slug:"事件编写"},{level:2,title:"基础组件",slug:"基础组件"},{level:3,title:"view",slug:"view"},{level:3,title:"text",slug:"text"},{level:3,title:"image",slug:"image"},{level:3,title:"input",slug:"input"},{level:3,title:"textarea",slug:"textarea"},{level:3,title:"button",slug:"button"},{level:3,title:"scroll-view",slug:"scroll-view"},{level:3,title:"swiper",slug:"swiper"},{level:3,title:"swiper-item",slug:"swiper-item"},{level:3,title:"checkbox",slug:"checkbox"},{level:3,title:"checkbox-group",slug:"checkbox-group"},{level:3,title:"radio",slug:"radio"},{level:3,title:"radio-group",slug:"radio-group"},{level:3,title:"label",slug:"label"},{level:3,title:"icon",slug:"icon"},{level:3,title:"movable-area",slug:"movable-area"},{level:3,title:"movable-view",slug:"movable-view"},{level:3,title:"form",slug:"form"},{level:3,title:"cover-view",slug:"cover-view"},{level:3,title:"cover-image",slug:"cover-image"},{level:3,title:"picker-view",slug:"picker-view"},{level:3,title:"picker-view-column",slug:"picker-view-column"},{level:3,title:"picker",slug:"picker"},{level:3,title:"省市区选择器：mode = region",slug:"省市区选择器：mode-region"}]}],themeConfig:{algolia:{apiKey:"7849f511f78afc4383a81f0137a91c0f",indexName:"mpxjs"},sidebarDepth:1,logo:"/logo.png",displayAllHeaders:!1,sidebar:{"/guide/":[{title:"基础",collapsable:!1,children:["basic/start","basic/intro","basic/single-file","basic/ide","basic/template","basic/css","basic/reactive","basic/class-style-binding","basic/conditional-render","basic/list-render","basic/event","basic/two-way-binding","basic/component","basic/refs","basic/option-chain"]},{title:"进阶",collapsable:!1,children:["advance/store","advance/pinia","advance/mixin","advance/npm","advance/subpackage","advance/async-subpackage","advance/platform","advance/i18n","advance/size-report","advance/image-process","advance/progressive","advance/ability-compatible","advance/plugin","advance/custom-output-path","advance/utility-first-css","advance/ssr","advance/provide-inject"]},{title:"组合式 API",collapsable:!1,children:["composition-api/composition-api","composition-api/reactive-api"]},{title:"工具",collapsable:!1,children:["tool/ts","tool/unit-test","tool/e2e-test"]},{title:"拓展",collapsable:!1,path:"/guide/extend",children:["extend/fetch","extend/api-proxy","extend/mock"]},{title:"理解",collapsable:!1,children:["understand/runtime","understand/compile"]},{title:"迁移",collapsable:!1,children:["migrate/2.9","migrate/2.8","migrate/2.7","migrate/mpx-cli-3"]}],"/api/":["app-config","global-api","instance-api","store-api","directives","compile","builtIn","reactivity-api","composition-api","optional-api","extend"],"/articles/":[{title:"滴滴开源小程序框架Mpx",path:"1.0"},{title:"Mpx发布2.0，完美支持跨平台开发",path:"2.0"},{title:"小程序框架运行时性能大测评",path:"performance"},{title:"Mpx框架初体验",path:"mpx1"},{title:"Mpx框架技术揭秘",path:"mpx2"},{title:"基于Mpx的小程序体积优化",path:"size-control"},{title:"Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导",path:"ts-derivation"},{title:"Mpx2.7 版本正式发布，大幅提升编译构建速度",path:"2.7-release"},{title:"Mpx2.8 版本正式发布，使用组合式 API 开发小程序",path:"2.8-release"},{title:"Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化",path:"2.9-release"},{title:"小程序跨端组件库 Mpx-cube-ui 开源啦",path:"mpx-cube-ui"},{title:"Mpx-cli 插件化改造",path:"mpx-cli-next"},{title:"Mpx 小程序单元测试能力建设与实践",path:"unit-test"}]},nav:[{text:"指南",link:"/guide/basic/start"},{text:"API",link:"/api/index"},{text:"文章",link:"/articles/index"},{text:"更新记录",link:"https://github.com/didi/mpx/releases",target:"_blank"},{text:"Github",link:"https://github.com/didi/mpx",target:"_blank"}]},locales:{"/":{lang:"zh-CN",title:"Mpx框架",description:"Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。",path:"/"}}};n(283),n(284);r.a.component("Content",()=>Promise.all([n.e(0),n.e(2)]).then(n.bind(null,370))),r.a.component("Header",()=>n.e(11).then(n.bind(null,371))),r.a.component("Footer",()=>Promise.all([n.e(0),n.e(6)]).then(n.bind(null,355))),r.a.component("Badge",()=>Promise.all([n.e(0),n.e(8)]).then(n.bind(null,382))),r.a.component("CodeBlock",()=>Promise.all([n.e(0),n.e(9)]).then(n.bind(null,374))),r.a.component("CodeGroup",()=>Promise.all([n.e(0),n.e(10)]).then(n.bind(null,375)));n(285);var dt={name:"BackToTop",props:{threshold:{type:Number,default:300}},data:()=>({scrollTop:null}),computed:{show(){return this.scrollTop>this.threshold}},mounted(){this.scrollTop=this.getScrollTop(),window.addEventListener("scroll",st()(()=>{this.scrollTop=this.getScrollTop()},100))},methods:{getScrollTop:()=>window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,scrollToTop(){window.scrollTo({top:0,behavior:"smooth"}),this.scrollTop=0}}},ht=(n(286),n(4)),vt=Object(ht.a)(dt,(function(){var e=this._self._c;return e("transition",{attrs:{name:"fade"}},[this.show?e("svg",{staticClass:"go-to-top",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 49.484 28.284"},on:{click:this.scrollToTop}},[e("g",{attrs:{transform:"translate(-229 -126.358)"}},[e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(229 151.107) rotate(-45)"}}),this._v(" "),e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(274.949 154.642) rotate(-135)"}})])]):this._e()])}),[],!1,null,"5cf0f4c0",null).exports;class mt{constructor(e){Object.defineProperty(this,"registration",{value:e,configurable:!0,writable:!0})}update(){return this.registration.update()}skipWaiting(){const e=this.registration.waiting;return e?(console.log("[vuepress:sw] Doing worker.skipWaiting()."),new Promise((t,n)=>{const r=new MessageChannel;r.port1.onmessage=e=>{console.log("[vuepress:sw] Done worker.skipWaiting()."),e.data.error?n(e.data.error):t(e.data)},e.postMessage({type:"skip-waiting"},[r.port2])})):Promise.resolve()}}var gt=n(25);r.a.component("SWUpdatePopup",()=>Promise.all([n.e(0),n.e(30)]).then(n.bind(null,373)));var bt=[({router:e})=>{"undefined"!=typeof process&&"server"===process.env.VUE_ENV||e.onReady(()=>{const{app:t}=e;t.$once("hook:mounted",()=>{setTimeout(()=>{const{hash:e}=document.location;if(e.length>1){const t=decodeURIComponent(e.substring(1)),n=document.getElementById(t);n&&n.scrollIntoView()}},500)})})},{},{},({Vue:e})=>{e.mixin({computed:{$dataBlock(){return this.$options.__data__block__}}})},{},{},({Vue:e})=>{e.component("BackToTop",vt)},async({router:e,isServer:t})=>{if(!t){const{register:t}=await n.e(120).then(n.bind(null,372));e.onReady(()=>{t("/service-worker.js",{registrationOptions:{},ready(){console.log("[vuepress:sw] Service worker is active."),gt.a.$emit("sw-ready")},cached(e){console.log("[vuepress:sw] Content has been cached for offline use."),gt.a.$emit("sw-cached",new mt(e))},updated(e){console.log("[vuepress:sw] Content updated."),gt.a.$emit("sw-updated",new mt(e))},offline(){console.log("[vuepress:sw] No internet connection found. App is running in offline mode."),gt.a.$emit("sw-offline")},error(e){console.error("[vuepress:sw] Error during service worker registration:",e),gt.a.$emit("sw-error",e),GA_ID&&ga("send","exception",{exDescription:e.message,exFatal:!1})}})})}}],yt=["BackToTop","SWUpdatePopup"];class _t extends class{constructor(){this.store=new r.a({data:{state:{}}})}$get(e){return this.store.state[e]}$set(e,t){r.a.set(this.store.state,e,t)}$emit(...e){this.store.$emit(...e)}$on(...e){this.store.$on(...e)}}{}Object.assign(_t.prototype,{getPageAsyncComponent:Ge.d,getLayoutAsyncComponent:Ge.c,getAsyncComponent:Ge.b,getVueComponent:Ge.e});var wt={install(e){const t=new _t;e.$vuepress=t,e.prototype.$vuepress=t}};function xt(e,t){const n=t.toLowerCase();return e.options.routes.some(e=>e.path.toLowerCase()===n)}var St={props:{pageKey:String,slotKey:{type:String,default:"default"}},render(e){const t=this.pageKey||this.$parent.$page.key;return Object(Ge.h)("pageKey",t),r.a.component(t)||r.a.component(t,Object(Ge.d)(t)),r.a.component(t)?e(t):e("")}},Ot={functional:!0,props:{slotKey:String,required:!0},render:(e,{props:t,slots:n})=>e("div",{class:["content__"+t.slotKey]},n()[t.slotKey])},jt={computed:{openInNewWindowTitle(){return this.$themeLocaleConfig.openNewWindowText||"(opens new window)"}}},kt=(n(287),n(288),Object(ht.a)(jt,(function(){var e=this._self._c;return e("span",[e("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[e("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),this._v(" "),e("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})]),this._v(" "),e("span",{staticClass:"sr-only"},[this._v(this._s(this.openInNewWindowTitle))])])}),[],!1,null,null,null).exports),Pt={functional:!0,render(e,{parent:t,children:n}){if(t._isMounted)return n;t.$once("hook:mounted",()=>{t.$forceUpdate()})}};r.a.config.productionTip=!1,r.a.use(We),r.a.use(wt),r.a.mixin(function(e,t,n=r.a){!function(e){e.locales&&Object.keys(e.locales).forEach(t=>{e.locales[t].path=t});Object.freeze(e)}(t),n.$vuepress.$set("siteData",t);const i=new(e(n.$vuepress.$get("siteData"))),o=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(i)),a={};return Object.keys(o).reduce((e,t)=>(t.startsWith("$")&&(e[t]=o[t].get),e),a),{computed:a}}(e=>class{setPage(e){this.__page=e}get $site(){return e}get $themeConfig(){return this.$site.themeConfig}get $frontmatter(){return this.$page.frontmatter}get $localeConfig(){const{locales:e={}}=this.$site;let t,n;for(const r in e)"/"===r?n=e[r]:0===this.$page.path.indexOf(r)&&(t=e[r]);return t||n||{}}get $siteTitle(){return this.$localeConfig.title||this.$site.title||""}get $canonicalUrl(){const{canonicalUrl:e}=this.$page.frontmatter;return"string"==typeof e&&e}get $title(){const e=this.$page,{metaTitle:t}=this.$page.frontmatter;if("string"==typeof t)return t;const n=this.$siteTitle,r=e.frontmatter.home?null:e.frontmatter.title||e.title;return n?r?r+" | "+n:n:r||"VuePress"}get $description(){const e=function(e){if(e){const t=e.filter(e=>"description"===e.name)[0];if(t)return t.content}}(this.$page.frontmatter.meta);return e||(this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||"")}get $lang(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}get $localePath(){return this.$localeConfig.path||"/"}get $themeLocaleConfig(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}get $page(){return this.__page?this.__page:function(e,t){for(let n=0;n<e.length;n++){const r=e[n];if(r.path.toLowerCase()===t.toLowerCase())return r}return{path:"",frontmatter:{}}}(this.$site.pages,this.$route.path)}},pt)),r.a.component("Content",St),r.a.component("ContentSlotsDistributor",Ot),r.a.component("OutboundLink",kt),r.a.component("ClientOnly",Pt),r.a.component("Layout",Object(Ge.c)("Layout")),r.a.component("NotFound",Object(Ge.c)("NotFound")),r.a.prototype.$withBase=function(e){const t=this.$site.base;return"/"===e.charAt(0)?t+e.slice(1):e},window.__VUEPRESS__={version:"1.9.10",hash:"3f6a4a558"},async function(e){const t="undefined"!=typeof window&&window.__VUEPRESS_ROUTER_BASE__?window.__VUEPRESS_ROUTER_BASE__:pt.routerBase||pt.base,n=new We({base:t,mode:"history",fallback:!1,routes:ft,scrollBehavior:(e,t,n)=>n||(e.hash?!r.a.$vuepress.$get("disableScrollBehavior")&&{selector:decodeURIComponent(e.hash)}:{x:0,y:0})});!function(e){e.beforeEach((t,n,r)=>{if(xt(e,t.path))r();else if(/(\/|\.html)$/.test(t.path))if(/\/$/.test(t.path)){const n=t.path.replace(/\/$/,"")+".html";xt(e,n)?r(n):r()}else r();else{const n=t.path+"/",i=t.path+".html";xt(e,i)?r(i):xt(e,n)?r(n):r()}})}(n);const i={};try{await Promise.all(bt.filter(e=>"function"==typeof e).map(t=>t({Vue:r.a,options:i,router:n,siteData:pt,isServer:e})))}catch(e){console.error(e)}return{app:new r.a(Object.assign(i,{router:n,render:e=>e("div",{attrs:{id:"app"}},[e("RouterView",{ref:"layout"}),e("div",{class:"global-ui"},yt.map(t=>e(t)))])})),router:n}}(!1).then(({app:e,router:t})=>{t.onReady(()=>{e.$mount("#app")})})}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/baidu_verify_codeva-GYcT5ujCTB.html b/docs-vuepress/.vuepress/dist/baidu_verify_codeva-GYcT5ujCTB.html
new file mode 100644
index 0000000000..d4526e039c
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/baidu_verify_codeva-GYcT5ujCTB.html
@@ -0,0 +1 @@
+e197dca3487ecef730bbb3a05e79d985
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/desc.html b/docs-vuepress/.vuepress/dist/desc.html
new file mode 100644
index 0000000000..f6794a2c47
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/desc.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>文档指南 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/63.b54aca3e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container no-sidebar"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="文档指南"><a href="#文档指南" class="header-anchor">#</a> 文档指南</h1> <p>该文档使用vuepress生成</p> <h2 id="该项目指南"><a href="#该项目指南" class="header-anchor">#</a> 该项目指南</h2> <p>已安装依赖vuepress，并已经在package.json中新增写作和部署脚本</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token comment"># 写作时</span>
+<span class="token function">npm</span> run docs:dev
+
+<span class="token comment"># 部署时</span>
+<span class="token function">npm</span> run docs:build
+<span class="token comment"># 将在docs-vuepress/.vuepress/dist下生成静态文件，部署到相应服务器即可，部署参考下方链接</span>
+</code></pre></div><h2 id="编写格式指南"><a href="#编写格式指南" class="header-anchor">#</a> 编写格式指南</h2> <ul><li>对于引用的文档或资料使用<a href="">链接</a>指明出处</li> <li>中英文混排时为了阅读体验使用空格对于英文单词进行包裹，在标点符号边缘或句首时可省略该侧空格，例如：这是一个 word 而不是 world。</li> <li>句首的英文单词首字母大写</li> <li>Mpx 正确的写法为 <code>Mpx</code>，首字母大写，任何地方都应该这样书写，其余的专业名称参考原始的写法进行书写</li> <li>除英文段落外，所有标点符号使用中文半角</li> <li>能使用示例代码描述的部分都<strong>尽量添加示例代码</strong>进行说明，show me the code</li> <li>对于文档内容拓展说明的部分使用&gt;引用的方式进行编写，like this</li></ul> <blockquote><p>我们来聊聊人生吧，这个地方你可以不看但没必要</p></blockquote> <h2 id="参考"><a href="#参考" class="header-anchor">#</a> 参考</h2> <ul><li><a href="https://www.vuepress.cn/guide/deploy.html" target="_blank" rel="noopener noreferrer">部署指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.vuepress.cn/" target="_blank" rel="noopener noreferrer">Vuepress文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/63.b54aca3e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/favicon.ico b/docs-vuepress/.vuepress/dist/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..891c2ce0106d2e229eaa160a87a6f4a63e4bd519
GIT binary patch
literal 9662
zcmZQzU<5(~0|p?ez_3D<fkBLcfk6X^fkF%kKnxNG0~H80N{)uWXb6mkz+ef1ITPBM
zvLe0mVmvLYD8YS=WmbgzH0zWJOXoqMvc|m(Rg~ZvC-oJO?P{yYiHY~I{SS0M**G=W
z<?)2(3JGL$(b<!ZDNhHw`#&Xk!cqC1hwis9A)EdB#WRMg?6`hP+z-;58{>DhwLF^z
z*=!hl)+wWuroBvmDRFz}L4n(cAGBi)qjM*YaOB1M?WEKXrKu59VQz-eOU}DnwCv~j
zPKn!F_j7(;c`4WgW+paz`P``zz;tk%5<kRxTmNk+Oih8AzxGO$MAt!~r<Az8c^}LF
zIj7B|U}oZ@JF5#!68#;%QsRfC0Eh2=4W$-qu7tBpJgRV%61Ri&PC2g8`~34ce9lIZ
z1LlR8IBy%W^D@ZqSrJ}Or|magN~zm>4vX(R^JE4GiUSF7ZeF>-P?Z%slae?9>CGrm
z{ok;g{PL#zkl6DL*AlSiR{~yO*tBX9TYg-?QOf*a@jt&^imdXo{Q%GJ#pm732)PrV
ze1B89SZ27#ON#v9ZT`P(E<Z_rXxhvCf9`2Zco~4tjfCV{O0&$80vvx+;)nPklm9hq
z*@^bU)Z-e{3Au|D`I_8>v{)}Iit=-Eg6{wN9ZUrM(0f?&=+0Y(Y^1o47_~)7Ar$B5
z%wpyL4SR6s=gxzI&*z=70d*m%4rcYWuoWZ(ou?!n#duo$FYK1U>W9|-96y&|^mm}T
z!;uV}(bFWC9_sd*B0m80bNK>3v~<J>%CC7yR?&>vRa5Ac;Ai)f5<kR;82_)?zy|jN
zuzp=gGY4Za7?__6VkpedDM>p2>vuB#?>i!We(41ds^?cM&PEX`P7d8oNgROmmNaYs
z-F!Vw3B_PKaHh1^>LmKxzo*3gv3_R%t5$IRpMFBOkq%CVTd{rp3X!xB*Q=Dc9aIjL
zOce&F|K@$Hf9IdI3xHcdL&l3IkJt+012<CUcFX@cb#f?WD6ntxcH^~VJsLV4Y;;{-
zQZuD)PtDN$->{1jUiQG+*T6o`<+D%ch|tOpjm2qRz&<`j?VyBk!~eCLSuorV^TWiW
zifd`%eqer81NO-%s<&c&&Hh&|<;LlDm>;H}&?%#)A674%$&(r3d6BYoWAVRuq9{t5
zhq)J>2KIG-E<ESxK`lQ3%lXxmx!v-Ac9jBAZio4$Z9n(x4ObH=9`UcuOR9+Rq^#YX
zlB)f`0a(w%+(s-7Y)4<-cej>{+<54zFZPP}r7*vS8vU=`$V#%?VSb!?Tyy1yYw;v|
zp}90e1~?8xQGNxs@&4B?l)ejd3wbo-|7j<*b4c+(XLUYDc9hRqO4EF8USjjgOF>#4
z2lzje=XOXxr)3}e&v|F8?TGQiig{BRfcbSHrEV`w2;O+%^fB-_D6nl1)UuC_!f{W*
z*Ne`%ND=Y_FwF8O?dN8Mdt6^KYoZXcUDHqKwNerXAicnL_Stn;VsMUQ0n?2Gu#Tdr
zeoYB-{tO&{22FpWfGaOnu=F31-At(;fcbg;kp~?pW`j8WO%+nWI_fPY=?2)g_zR3b
zobAYs*OG*Q{qviY_yIWn{vVhZQ1UZq{-roM4AiE4ObM>ej_bq-7&L*|r%W|k_jBC`
z`r$FTxa|P<{aL4s>E7o-^U5f9Gz3ONU^E1VbO`(h0|o|C=?4t_9~hV!7#=XNe_&u|
zU;uJ}LJSN)7?=+*$TKkfVPI?k(f>f9V-Kb4f%bs-K;nM`a9t9JJ^-a3FfcHK_&}N+
zM1Npl;0Mt^7#QS1^dBe<G|(Qz2h#OW8q5dEgK3z0n0_D)HV<Yl&_1v|4N!Z5G}t{r
uilH9iPM~oOAb0;@U_1cw2iRXg{{cM<^fJibK>q{j0}T8?DWDN#h9dx^v_XFW

literal 0
HcmV?d00001

diff --git a/docs-vuepress/.vuepress/dist/guide/advance/ability-compatible.html b/docs-vuepress/.vuepress/dist/guide/advance/ability-compatible.html
new file mode 100644
index 0000000000..8e7c1007d4
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/ability-compatible.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>原生能力兼容 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/64.399e72b8.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" aria-current="page" class="active sidebar-link">原生能力兼容</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/ability-compatible.html#custom-tab-bar" class="sidebar-link">custom-tab-bar</a></li><li class="sidebar-sub-header"><a href="/guide/advance/ability-compatible.html#workers" class="sidebar-link">workers</a></li><li class="sidebar-sub-header"><a href="/guide/advance/ability-compatible.html#云开发" class="sidebar-link">云开发</a></li><li class="sidebar-sub-header"><a href="/guide/advance/ability-compatible.html#useextendedlib" class="sidebar-link">useExtendedLib</a></li></ul></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="原生能力兼容"><a href="#原生能力兼容" class="header-anchor">#</a> 原生能力兼容</h1> <h2 id="custom-tab-bar"><a href="#custom-tab-bar" class="header-anchor">#</a> custom-tab-bar</h2> <p>Mpx 支持微信小程序原生自定义 tabbar ，关于自定义 tabbar 的详情请查看<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>在 Mpx 中使用自定义 tabbar ，需要在 app.mpx 的 json 部分的 tabBar 配置里的 <code>custom</code> 为 true 。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
+<span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;application/json&quot;</span><span class="token operator">&gt;</span>
+<span class="token punctuation">{</span>
+  <span class="token string-property property">&quot;tabBar&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;custom&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;color&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#000000&quot;</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;selectedColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#000000&quot;</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;backgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#000000&quot;</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./page/component/index&quot;</span><span class="token punctuation">,</span>
+      <span class="token string-property property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;组件&quot;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./page/API/index&quot;</span><span class="token punctuation">,</span>
+      <span class="token string-property property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;接口&quot;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">]</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>在 src 目录下创建 custom-tab-bar 目录，包含 index.mpx 文件，可以在该 index.mpx 文件中编写自定义 tabbar 的模板、js、样式和 json 部分，同时也支持原生写法。</p> <h2 id="workers"><a href="#workers" class="header-anchor">#</a> workers</h2> <p>Mpx 完全支持小程序原生的 worker ，需要在 app.mpx 文件中的 json 部分声明 worker 的目录，Mpx 会将其对应目录进行打包，输出到目标代码目录中。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;application/json&quot;</span><span class="token operator">&gt;</span>
+<span class="token punctuation">{</span>
+  <span class="token comment">// 指定 worker 的目录</span>
+  <span class="token string-property property">&quot;workers&quot;</span><span class="token operator">:</span> <span class="token string">&quot;workers&quot;</span>
+<span class="token punctuation">}</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>更多详情可查看<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="云开发"><a href="#云开发" class="header-anchor">#</a> 云开发</h2> <p>Mpx 支持微信小程序提供的原生云开发能力。如果需要在项目中使用云开发的能力，可以通过 Mpx 脚手架工具在初始化项目时选择支持云开发。如果需要支持云开发能力，在项目初始化时需要选择是微信平台下，且不能支持跨平台开发。如下图所示：</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/cloud_v2.png" alt="云开发"></p> <p>更多关于云开发相关可查看<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="useextendedlib"><a href="#useextendedlib" class="header-anchor">#</a> useExtendedLib</h2> <p>Mpx 对于引入扩展库做了相关处理，可以在 app.mpx 中配置使用的扩展库，目前支持 weui 。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;useExtendedLib&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;weui&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>还需要在 Mpx 的配置文件配置 <code>externals</code> 属性，来指定外部依赖，这样 Mpx 在进行打包时，会将其当做外部依赖进行打包。</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token literal-property property">externals</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'weui'</span> <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/progressive.html" class="prev">
+        原生渐进迁移
+      </a></span> <span class="next"><a href="/guide/advance/plugin.html">
+        小程序插件
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/64.399e72b8.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/async-subpackage.html b/docs-vuepress/.vuepress/dist/guide/advance/async-subpackage.html
new file mode 100644
index 0000000000..36fb075f5e
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/async-subpackage.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>分包异步化 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/65.a8c627d3.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" aria-current="page" class="active sidebar-link">分包异步化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/async-subpackage.html#跨分包自定义组件引用" class="sidebar-link">跨分包自定义组件引用</a></li><li class="sidebar-sub-header"><a href="/guide/advance/async-subpackage.html#跨分包-js-代码引用" class="sidebar-link">跨分包 JS 代码引用</a></li><li class="sidebar-sub-header"><a href="/guide/advance/async-subpackage.html#跨分包-store-引用" class="sidebar-link">跨分包 Store 引用</a></li></ul></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="分包异步化"><a href="#分包异步化" class="header-anchor">#</a> 分包异步化</h1> <blockquote><p>在小程序中，不同的分包对应不同的下载单元；因此，除了非独立分包可以依赖主包外，分包之间不能互相使用自定义组件或进行 require。
+「分包异步化」特性将允许通过一些配置和新的接口，使部分跨分包的内容可以等待下载后异步使用，从而一定程度上解决这个限制。</p></blockquote> <p>具体功能介绍和功能目的可 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html" target="_blank" rel="noopener noreferrer">点击查看<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, Mpx对于分包异步化功能进行了完整支持。</p> <p>当前 Mpx 框架默认支持以下平台的分包异步化能力：</p> <ul><li>微信小程序</li> <li>支付宝小程序</li> <li>字节小程序</li> <li>Web</li></ul> <p>在非上述平台，异步分包代码会默认降级。</p> <h2 id="跨分包自定义组件引用"><a href="#跨分包自定义组件引用" class="header-anchor">#</a> 跨分包自定义组件引用</h2> <blockquote><p>一个分包使用其他分包的自定义组件时，由于其他分包还未下载或注入，其他分包的组件处于不可用的状态。通过为其他分包的自定义组件设置 占位组件，
+我们可以先渲染占位组件作为替代，在分包下载完成后再进行替换。</p></blockquote> <p>在 Mpx 中使用跨分包自定义组件引用通过?root声明组件所属异步分包即可使用，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--/packageA/pages/index.mpx--&gt;</span>
+// 这里在分包packageA中即可异步使用分包packageB中的hello组件
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;hello&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../../packageB/components/hello?root=packageB&quot;</span><span class="token punctuation">,</span>
+      <span class="token string-property property">&quot;simple-hello&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/hello&quot;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;componentPlaceholder&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;hello&quot;</span><span class="token operator">:</span> <span class="token string">&quot;simple-hello&quot;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><ul><li>注意项：目前该能力已在微信、支付宝和Web环境下支持，其他环境下框架将进行自动降级。</li></ul> <h2 id="跨分包-js-代码引用"><a href="#跨分包-js-代码引用" class="header-anchor">#</a> 跨分包 JS 代码引用</h2> <blockquote><p>一个分包中的代码引用其它分包的代码时，为了不让下载阻塞代码运行，我们需要异步获取引用的结果</p></blockquote> <p>在 Mpx 中跨分包异步引用 JS 代码时，<strong>需要在引用的 JS 路径后拼接 JS 模块所在的分包名</strong>，此外由于 <strong>require</strong> 不能传入多个参数的限制，在Mpx中无法使用回调函数的
+风格跨分包 JS 代码引用，只能使用 Promise 风格。</p> <p>示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// subPackageA/index.js</span>
+<span class="token comment">// 或者使用 Promise 风格的调用</span>
+require<span class="token punctuation">.</span><span class="token function">async</span><span class="token punctuation">(</span><span class="token string">'../commonPackage/index.js?root=subPackageB'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">pkg</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  pkg<span class="token punctuation">.</span><span class="token function">getPackageName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 'common'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><ul><li>注意项：目前该能力仅微信平台下支持，其他平台下框架将会自动降级</li></ul> <h2 id="跨分包-store-引用"><a href="#跨分包-store-引用" class="header-anchor">#</a> 跨分包 Store 引用</h2> <p>在 Mpx 中如果想要跨分包异步引用 Store 代码，分为三个步骤</p> <ul><li>页面或父组件在 <code>created</code> 钩子加载异步 Store</li> <li>异步 Store 加载完成后再渲染使用异步 Store 的组件</li> <li>子组件在框架内部生命周期 <code>BEFORECREATE</code> 钩子中动态注入 computed 和 methods</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--pages/index/index.mpx--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>store-list</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{showStoreList}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>store-list</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">showStoreList</span><span class="token operator">:</span> <span class="token boolean">false</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      require<span class="token punctuation">.</span><span class="token function">async</span><span class="token punctuation">(</span><span class="token string">'../subpackages/sub2/store?root=sub2'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">store</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>asyncStore<span class="token punctuation">.</span>sub2 <span class="token operator">=</span> store<span class="token punctuation">.</span>default
+        <span class="token comment">// 当异步 Store 加载完成后再渲染使用异步 Store 的组件</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>showStoreList <span class="token operator">=</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token comment">&lt;!-- 子组件:store-list --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> <span class="token constant">BEFORECREATE</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token comment">// 在 BEFORECREATE 钩子中动态注入 options</span>
+    <span class="token punctuation">[</span><span class="token constant">BEFORECREATE</span><span class="token punctuation">]</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 获取异步 Store实例</span>
+      <span class="token keyword">const</span> subStore <span class="token operator">=</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>asyncStore<span class="token punctuation">.</span>sub2
+      <span class="token comment">// computed 中 mapState、mapGetters 替换为 mapStateToInstance、mapGettersToInstance，最后一个参数必须传当前 component 实例 this</span>
+      subStore<span class="token punctuation">.</span><span class="token function">mapStateToInstance</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'pagename'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
+      subStore<span class="token punctuation">.</span><span class="token function">mapGettersToInstance</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'pageDataGetter'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
+      <span class="token comment">// methods 中 mapActions、mapMutations 替换为 mapMutationsToInstance、mapActionsToInstance，最后一个参数必须传当前 component 实例 this</span>
+      subStore<span class="token punctuation">.</span><span class="token function">mapMutationsToInstance</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'updatePageData'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
+      subStore<span class="token punctuation">.</span><span class="token function">mapActionsToInstance</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'updatePageName'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/subpackage.html" class="prev">
+        使用分包
+      </a></span> <span class="next"><a href="/guide/advance/platform.html">
+        跨平台
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/65.a8c627d3.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/custom-output-path.html b/docs-vuepress/.vuepress/dist/guide/advance/custom-output-path.html
new file mode 100644
index 0000000000..58a1f1c010
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/custom-output-path.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>自定义路径 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/66.7f19cc4b.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" aria-current="page" class="active sidebar-link">自定义路径</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/custom-output-path.html#自定义页面路径" class="sidebar-link">自定义页面路径</a></li><li class="sidebar-sub-header"><a href="/guide/advance/custom-output-path.html#customoutputpath" class="sidebar-link">customOutputPath</a></li></ul></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="自定义路径"><a href="#自定义路径" class="header-anchor">#</a> 自定义路径</h1> <p>Mpx在构建时，如果引用的页面不存在于当前 app.mpx 所在的上下文中，例如存在于 npm 包中，为避免和本地声明的其他 page 路径冲突，Mpx 会对页面路径进行 hash 化处理，
+同时处理组件路径时也会添加 hash 防止路径名冲突，hash 化处理后最终的文件名是 name+hash+ext 的格式</p> <p>与此同时，部分开发者希望能够对最终输出的页面路径和组件路径能够自定义，Mpx 对此也提供了相应的配置和Api来支持用户自定义路径</p> <h2 id="自定义页面路径"><a href="#自定义页面路径" class="header-anchor">#</a> 自定义页面路径</h2> <p>针对 Mpx 对 json 中非当前上下文的页面路径 hash 化的特性，如果为提升可读性需要避免路径 hash 化，可以使用该特性，具体为在
+json 中配置 pages 时，数组中支持放入 Object，对象中传入两个字段，src 字段表示页面地址，path 字段表示自定义页面路径</p> <ul><li><strong>示例</strong>:</li></ul> <p>object风格的页面声明</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token punctuation">{</span>
+  <span class="token comment">// 主包中的声明</span>
+  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">{</span>
+      <span class="token property">&quot;src&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@someGroup/someNpmPackage/pages/view/index.mpx&quot;</span><span class="token punctuation">,</span>
+      <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/somNpmPackage/index&quot;</span> <span class="token comment">// 注意保持 path 的唯一性</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token comment">// 分包中的声明</span>
+  <span class="token property">&quot;subPackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">{</span>
+      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span><span class="token punctuation">,</span>
+      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+         <span class="token punctuation">{</span>
+           <span class="token property">&quot;src&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@someGroup/someNpmPackage/pages/view/test.mpx&quot;</span><span class="token punctuation">,</span>
+           <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/somNpmPackage/test&quot;</span> <span class="token comment">// 注意保持 path 的唯一性</span>
+         <span class="token punctuation">}</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>使用声明中配置的页面路径进行跳转</p> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/pages/somNpmPackage/index'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/test/pages/somNpmPackage/test'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="customoutputpath"><a href="#customoutputpath" class="header-anchor">#</a> customOutputPath</h2> <p>Mpx 框架 webpack-plugin 也提供了 customOutputPath 方法可以让用户进行页面和组件路径的自定义，
+可使用该方法对<strong>非原生组件和非当前文件context的页面</strong>输出路径进行自定义</p> <p>需要注意的是，该方法需要具有<strong>稳定性和唯一性</strong>，即同样的输入不管什么时候执行都要有同样的返回以及不同的的输入一定会得到不同的输出。</p> <ul><li><strong>示例</strong>：</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+         <span class="token function-variable function">customOutputPath</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> name<span class="token punctuation">,</span> hash<span class="token punctuation">,</span> ext<span class="token punctuation">,</span> resourcePath</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          <span class="token comment">// type: 资源类型(page | component | static)</span>
+          <span class="token comment">// name: 资源原有文件名</span>
+          <span class="token comment">// hash: 8位长度的hash串</span>
+          <span class="token comment">// ext: 文件后缀(.js｜ .wxml | .json 等)</span>
+          <span class="token comment">// resourcePath: 资源路径</span>
+
+          <span class="token comment">// 输出示例： pages/testax34dde3/index.js</span>
+          <span class="token keyword">return</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>type <span class="token operator">+</span> <span class="token string">'s'</span><span class="token punctuation">,</span> name <span class="token operator">+</span> hash<span class="token punctuation">,</span> <span class="token string">'index'</span> <span class="token operator">+</span> ext<span class="token punctuation">)</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>基于上方示例，你可以根据需要进行路径定制化，例如缩短hash、使用012代替文件名等各种自定义路径</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/plugin.html" class="prev">
+        小程序插件
+      </a></span> <span class="next"><a href="/guide/advance/utility-first-css.html">
+        使用原子类
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/66.7f19cc4b.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/dll-plugin.html b/docs-vuepress/.vuepress/dist/guide/advance/dll-plugin.html
new file mode 100644
index 0000000000..ff5a026123
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/dll-plugin.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>使用 DllPlugin | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/67.e57db97e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用-dllplugin"><a href="#使用-dllplugin" class="header-anchor">#</a> 使用 DllPlugin</h1> <h3 id="相关插件简述"><a href="#相关插件简述" class="header-anchor">#</a> 相关插件简述</h3> <h4 id="dllplugin"><a href="#dllplugin" class="header-anchor">#</a> DllPlugin</h4> <blockquote><p>DllPlugin 和 DllReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度，这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。并且会生成一个名为 manifest.json的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。</p></blockquote> <p>DllPlugin 用来将我们某些长时间不变更的资源，独立拆分出去，之后项目的每次构建这部分资源都不需要重新编译，而是直接通过 DLLReferencePlugin 引入 dll bundle, 大大的节省了构建时间。</p> <p>构建生成对应的 dll bundle 和 manifest.json 文件，manifest 文件中是模块 id 与请求路径的关系映射。</p> <h4 id="dllreferenceplugin"><a href="#dllreferenceplugin" class="header-anchor">#</a> DllReferencePlugin</h4> <blockquote><p>这个插件是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖</p></blockquote> <p>通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上，之后再在需要的时候通过内置的 <strong>webpack_require</strong> 函数来 require 他们。</p> <h3 id="mpx中-dllplugin-的使用"><a href="#mpx中-dllplugin-的使用" class="header-anchor">#</a> Mpx中 DllPlugin 的使用</h3> <p><strong>1.通过 @mpxjs/cli init 生成项目</strong></p> <p>初始化选项中选择使用dll功能。</p> <p><strong>2.在项目中 build/dll.config.js 进行 dll 文件配置</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 这里是一个用法示例</span>
+<span class="token keyword">function</span> <span class="token function">resolve</span> <span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">,</span> file <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">[</span>
+  <span class="token punctuation">{</span>
+    <span class="token literal-property property">cacheGroups</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">entries</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/@someNpmGroup/someNpmPkgName/dist/wx/static/js/common.js'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">'testSomeDllFile'</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">modes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'wx'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">entryOnly</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">webpackCfg</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token comment">// 不使用任何默认优化选项</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">{</span>
+    <span class="token literal-property property">cacheGroups</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">entries</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/@someNpmGroup/someNpmPkgName/dist/ali/static/js/common.js'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">'testSomeDllFile'</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">modes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'ali'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">entryOnly</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">webpackCfg</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token comment">// 不使用任何默认优化选项</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+
+<span class="token punctuation">]</span>
+</code></pre></div><p>DllPlugin 的配置项详见<a href="https://webpack.docschina.org/plugins/dll-plugin/" target="_blank" rel="noopener noreferrer">文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，Mpx 中相关配置项依据小程序环境做了相关调整。</p> <ul><li><p><strong>cacheGroups</strong></p> <ul><li>类型: <code>Array&lt;object&gt;</code> <ul><li>entries
+<ul><li><p>类型: <code>Array</code>dll</p> <p>构建入 dll 的文件入口</p></li></ul></li> <li>name
+<ul><li><p>类型: <code>String</code></p> <p>生成的 dll 文件名</p></li></ul></li> <li>root
+<ul><li><p>类型: <code>String</code></p> <p>生成的 dll 文件夹名</p></li></ul></li></ul></li></ul></li> <li><p><strong>modes</strong></p> <ul><li><p>类型: <code>Array</code></p> <p>构建 dll 产物对应的平台</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 配置多平台输出，例如：</span>
+<span class="token punctuation">[</span>
+  <span class="token string">'wx'</span><span class="token punctuation">,</span> <span class="token comment">// 微信平台</span>
+  <span class="token string">'ali'</span> <span class="token comment">// 支付宝平台</span>
+<span class="token punctuation">]</span>
+</code></pre></div></li></ul></li> <li><p><strong>entryOnly</strong></p> <ul><li><p>类型: <code>Boolean</code></p> <p>如果为true，则仅暴露入口</p> <p>这里建立使用entryOnly: true 配置</p> <blockquote><p>如果为 false 时，dllPlugin 中的 tree shakeing 功能就不再起作用</p></blockquote> <p>另外如果为false，如果是将分包资源打入dll bundle，会存在将全局方法打入分包 dll 中的可能性，这样主包在使用该方法被映射到 dll bundle 中时，会因为分包未加载而报错</p></li></ul></li> <li><p><strong>webpackCfg</strong></p> <ul><li><p>类型: <code>Object</code></p> <p>构建 dll 时可添加其他的 webpack 配置</p></li></ul></li> <li><p><strong>format</strong></p> <ul><li><p>类型: <code>Boolean</code></p> <p>生成的 manifest json 文件 是否进行格式化</p></li></ul></li></ul> <h3 id="mpx-中对-dllplugin-配置所做的相关处理"><a href="#mpx-中对-dllplugin-配置所做的相关处理" class="header-anchor">#</a> Mpx 中对 DllPlugin 配置所做的相关处理</h3> <p>正常使用 DllPlugin 是单独创建一个 webpack 配置文件，配置文件中加入 DllPlugin，然后运行 webpack 编译构建生成 dll 文件。</p> <p>考虑到 Mpx 在编译时需要跨平台输出，所以 Mpx 的配置项是 <code>Array&lt;object&gt;</code> 类型，同时增加了 modes 配置项，可以自主控制输出不同平台版本 dll 文件。</p> <p>构建生成 dll bundle 的主要逻辑在 buildDll.js 中，通过对 dll.config 中数组的循环处理，生成 webpackCfgs 数组。</p> <div class="language-js extra-class"><pre class="language-js"><code>dllConfigs<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">dllConfig</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> entries <span class="token operator">=</span> <span class="token function">getDllEntries</span><span class="token punctuation">(</span>dllConfig<span class="token punctuation">.</span>cacheGroups<span class="token punctuation">,</span> dllConfig<span class="token punctuation">.</span>modes<span class="token punctuation">)</span>
+  <span class="token comment">// 根据配置的 mode 以及 cacheGroups 生成 entry，结果例如：</span>
+  <span class="token comment">/**
+  *{
+        'somePkgRoot/wx.somePkgName': [
+            '/Users/didi/didiProject/mp-apphome/node_modules/@someNpmGroup/somNpmName/dist/wx/static/js/common.js'
+        ]
+    }
+  **/</span>
+  <span class="token keyword">if</span> <span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>entries<span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    webpackCfgs<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">merge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">entry</span><span class="token operator">:</span> entries<span class="token punctuation">,</span>
+      <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">path</span><span class="token operator">:</span> config<span class="token punctuation">.</span>dllPath<span class="token punctuation">,</span>
+        <span class="token literal-property property">filename</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'lib'</span><span class="token punctuation">,</span> dllName<span class="token punctuation">)</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">libraryTarget</span><span class="token operator">:</span> <span class="token string">'commonjs2'</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'production'</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>DllPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+          <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>config<span class="token punctuation">.</span>dllPath<span class="token punctuation">,</span> manifestName<span class="token punctuation">)</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">format</span><span class="token operator">:</span> dllConfig<span class="token punctuation">.</span>format<span class="token punctuation">,</span>
+          <span class="token literal-property property">entryOnly</span><span class="token operator">:</span> dllConfig<span class="token punctuation">.</span>entryOnly<span class="token punctuation">,</span>
+          <span class="token literal-property property">name</span><span class="token operator">:</span> dllName<span class="token punctuation">,</span>
+          <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'commonjs2'</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">context</span><span class="token operator">:</span> config<span class="token punctuation">.</span>context
+        <span class="token punctuation">}</span><span class="token punctuation">)</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> dllConfig<span class="token punctuation">.</span>webpackCfg<span class="token punctuation">)</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>生成的 webpackCfgs 数组配置项，传入 webpack 执行，最终在 dll 文件夹下生成 dll bundle 和 manifest.json 文件</p> <p>之后在 build.js 中使用 DllReferencePlugin 将编译中的依赖项与 dll bundle 的模块 id 关联起来，这里我们通过多个 DllReferencePlugin 实例来将可能存在的多个 manifest 文件关联引入，具体在项目 build.js 文件中：</p> <div class="language-js extra-class"><pre class="language-js"><code>plugins<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>DllReferencePlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">context</span><span class="token operator">:</span> config<span class="token punctuation">.</span>context<span class="token punctuation">,</span> <span class="token comment">//（绝对路径） manifest (或者是内容属性)中请求的上下文</span>
+    <span class="token literal-property property">manifest</span><span class="token operator">:</span> manifest<span class="token punctuation">.</span>content <span class="token comment">// 请求到模块 id 的映射（默认值为 manifest.content）</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+</code></pre></div><p>DllReferencePlugin 的其他配置项详见<a href="https://webpack.docschina.org/plugins/dll-plugin/" target="_blank" rel="noopener noreferrer">文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h3> <p>综上所述，在 Mpx 中使用 dllPlugin 时，只需要进行 build/dll.config.js 文件的配置，然后通过 build:dll 命令生成 dll bundle，之后就可以正常的进行代码的 build 了。不过每次 build 需要检查下项目中使用的 npm 包版本与 dll bundle 中的 npm 包版本是否一致，避免因为包版本的滞后更新导致线上 bug，这里我们后续也会提供相应的包版本比对插件。</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/67.e57db97e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/i18n.html b/docs-vuepress/.vuepress/dist/guide/advance/i18n.html
new file mode 100644
index 0000000000..207d91a34b
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/i18n.html
@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>国际化i18n | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/68.ebe4213c.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" aria-current="page" class="active sidebar-link">国际化i18n</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#开启-i18n" class="sidebar-link">开启 i18n</a></li><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#options-api-usage" class="sidebar-link">选项式 API 中使用</a></li><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#composition-api-usage" class="sidebar-link">在组合式 API 中使用</a></li><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#scope" class="sidebar-link">作用域</a></li><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#动态变更locale" class="sidebar-link">动态变更locale</a></li><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#动态更新语言集" class="sidebar-link">动态更新语言集</a></li><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#平台支持" class="sidebar-link">平台支持</a></li></ul></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="国际化i18n"><a href="#国际化i18n" class="header-anchor">#</a> 国际化i18n</h1> <p>Mpx 支持国际化 i18n，使用方式及支持能力与 vue-i18n 非常接近。</p> <p>Mpx 自带 i18n 能力，无需额外安装插件。由于小程序模板中的 i18n 函数是通过 wxs 编译注入进行实现，我们需要将 i18n 配置传入到 MpxWebpackPlugin 中来使 i18n 生效，这是与 vue-i18n 最大的区别。</p> <h2 id="开启-i18n"><a href="#开启-i18n" class="header-anchor">#</a> 开启 i18n</h2> <p>I18n 配置传入到 MpxWebpackPlugin 选项中即可生效，额外支持 messagesPath 配置，通过模块路径传入语言集，其余配置参考 vue-i18n。</p> <p>由于小程序的双线程特性，在选项式 API 场景下，默认情况下模板中调用的 i18n 函数由 wxs 实现，而 js 中调用的 i18n 函数由 js 实现，该设计能够将视图层和逻辑层之间的通信开销降至最低，得到最优的性能表现，但是由于 wxs 和 js 之间无法共享数据，在最终的编译产物中语言集会同时存在于 js 和 wxs 当中，对包体积产生负面影响。</p> <p>为了平衡上述影响，自2.6.56版本之后我们新增了编译配置项 <code>i18n.useComputed</code> ，改配置项开启的情况下对于模板中的 i18n 调用将不再使用 wxs 实现，而是通过在 computed 进行实现，语言集将只存在于 js 逻辑层当中，对于节省了包体积的同时双线程通信成本也会增加，用时间换空间，具体是否开启可以根据实际项目的使用情况及资源瓶颈由开发者自行决定，
+另外需要注意的是，<strong>在 Mpx 组合式 API 场景下 i18n 仅支持通过 computed 实现</strong>。</p> <blockquote><p>开启 <code>i18n.useComputed</code> 配置时，由于 computed 技术架构的限制，i18n 函数无法对模板循环渲染中的 <code>item</code> 或 <code>index</code> 生效。</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span><span class="token punctuation">,</span>
+          <span class="token comment">// messages既可以通过对象字面量传入，也可以通过messagesPath指定一个js模块路径，在该模块中定义配置并导出，dateTimeFormats/dateTimeFormatsPath和numberFormats/numberFormatsPath同理</span>
+          <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token string-property property">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+              <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} world'</span>
+              <span class="token punctuation">}</span>
+            <span class="token punctuation">}</span><span class="token punctuation">,</span>
+            <span class="token string-property property">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+              <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} 世界'</span>
+              <span class="token punctuation">}</span>
+            <span class="token punctuation">}</span>
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">useComputed</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 默认 false,  此开关将模板中的 i18n 函数注入 computed，在包体积空间紧张的情况下可以使用</span>
+          <span class="token comment">// messagesPath: path.resolve(__dirname, '../src/i18n.js')</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="options-api-usage"><a href="#options-api-usage" class="header-anchor">#</a> 选项式 API 中使用 </h2> <p>同 vue-i18n，在组件中直接调用翻译函数使用，由于 wxs 执行环境的限制，目前 js 中支持了 vue-i18n 中 $t/$tc/$te 翻译函数，$d/$n 暂不支持，详细使用方法可参考 vue-i18n。</p> <p>此外类似于 vue-i18n，在组件模板的 Mustache 插值中直接调用翻译函数。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{isMessageExist}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ $t('message.hello', { msg: 'hello' }) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'message.hello'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'hello'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token function">isMessageExist</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+                <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$te</span><span class="token punctuation">(</span><span class="token string">'message.hello'</span><span class="token punctuation">)</span>
+            <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="composition-api-usage"><a href="#composition-api-usage" class="header-anchor">#</a> 在组合式 API 中使用 </h2> <p>在组合式 API setup 中，<code>this</code> 不是该活跃实例的引用，为了继续使用 i18n 的相关能力，我们需要一个新的方法来替代 <code>this</code>
+，这里 Mpx 提供 <code>useI18n</code> 方法支持对 i18n 相关功能的使用。</p> <h3 id="开始使用"><a href="#开始使用" class="header-anchor">#</a> 开始使用</h3> <p>同 vue-i18n, <strong>useI18n</strong> 返回一个 i18n 实例，该实例提供文案翻译 API 例如 <strong>t</strong> 方法，相较于选项式 API 中的翻译方法，在组合式 API 中有部分变化。</p> <ol><li>翻译方法 $t/t 和 $tc/tc，在组合式 API 中统一使用翻译方法 t</li> <li>翻译方法 $te/te，在组合式 API 中统一使用 te</li> <li>翻译方法 $tm/tm，在组合式 API 中统一使用 tm</li></ol> <p><code>useI18n</code> 方法的执行必须在 <code>setup</code> 中的顶层。</p> <p>i18n 同时也支持传入参数，例如 <code>locale</code> 和 <code>fallbackLocale</code>，
+关于实例的更多信息可移步API章节 <a href="/api/extend.html#usei18n">查看</a></p> <p>在不给 <code>useI18n</code> 传入任何参数时，i18n 实例的上下文将是全局作用域，即翻译函数 <code>t</code> 引用的文案来源是我们在 <code>MpxWebpackPlugin</code>
+中配置的文案。</p> <p>通过在 <strong>setup</strong> 中返回翻译函数 <strong>t</strong>，我们可以在模版中直接使用它:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t(&quot;message.hello&quot;)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> useI18n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 从返回中解构出 t 方法</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      t
+    <span class="token punctuation">}</span> <span class="token comment">// 将 t 方法返回挂载到渲染实例</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>注意事项：</strong></p> <p>组合式 API 中，Mpx 在编译时对模版进行 ast 遍历分析，检测到对应的翻译函数 t/tc/te 后，将其转换为 computed 方法注入，computed 中调用 setup 中返回的 t 方法进行文案获取，由此引申出来两个注意项：</p> <p>1.不可对从 <strong>useI18n</strong> 中解构出的 <strong>t</strong> 方法进行重命名，否则模版中将无法正确获取文案。</p> <p>下方即为错误示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t1('message.hello')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> useI18n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+    <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            <span class="token keyword">const</span> <span class="token punctuation">{</span><span class="token literal-property property">t</span><span class="token operator">:</span> t1<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+            <span class="token keyword">return</span> <span class="token punctuation">{</span>
+                t1
+            <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>2.模版中的 t/tc/te 方法都是使用 computed 实现，由于 computed 技术架构的限制，i18n 函数无法对模板循环渲染中的 <code>item</code> 或 <code>index</code> 生效。</p> <p>例如下方示例将会报错 computed 中找不到 item</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--tc方法使用 computed 实现，最终将无法正确获取item--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{listData}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{tc('message.hello', {msg: item})}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> useI18n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+    <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            <span class="token keyword">const</span> listData <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+            <span class="token keyword">const</span> <span class="token punctuation">{</span>tc<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+            <span class="token keyword">return</span> <span class="token punctuation">{</span>
+                tc<span class="token punctuation">,</span>
+                listData
+            <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="scope"><a href="#scope" class="header-anchor">#</a> 作用域 </h2> <p>在 Mpx 组合式 API 中，<code>useI18n</code> 返回的 i18n 实例默认是指向全局作用域，文案来源即为 <code>MpxWebpackPlugin</code> 中配置的 messages。</p> <p>如果需要在组合式 API 中使用本地作用域，需要给 <code>useI18n</code> 传入响应的配置项，<code>useI18n</code> 将根据传入的 locale、messages 等配置项来生成一个全新的
+i18n 实例，该实例的文案源即为用户传入的 <code>messages</code>。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--将展示本地作用域中的文案 哈喽--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('message.hello')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">import</span> <span class="token punctuation">{</span>createPage<span class="token punctuation">,</span> useI18n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+    <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+                <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span><span class="token punctuation">,</span>
+                <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                    <span class="token string-property property">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                        <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                            <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'哈喽'</span>
+                        <span class="token punctuation">}</span>
+                    <span class="token punctuation">}</span>
+                <span class="token punctuation">}</span>
+            <span class="token punctuation">}</span><span class="token punctuation">)</span>
+            <span class="token keyword">return</span> <span class="token punctuation">{</span>
+                t
+            <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>注意事项：</strong></p> <p>在给 <code>useI18n</code> 传参时，若只传入 <code>messages</code> 属性，则 <code>locale</code> 会自动 fallback 到全局 locale，修改 <code>useI18n</code> 返回的 <code>locale</code> ref 值将改变本地作用域  locale。</p> <p>若只传入 <code>locale</code> 属性，不传入 <code>messages</code>，则会自动 fallback 到全局 <code>locale</code> 和 <code>messages</code>，且修改 <code>useI18n</code> 返回的 <code>locale</code> 对<strong>全局和本地都不会起作用</strong>，
+因此建议不要单独传入 <code>locale</code> 属性，若想使用本地 i18n 实例，则必须传入 <code>messages</code> 属性。</p> <p>在 Mpx 选项式 API 中，i18n 实例仅有全局 global i18n 实例，所有 i18n 翻译方法 $t/$tc/$te/$tm 的执行上下文都为全局作用域。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{$t('message.hello')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">import</span> <span class="token punctuation">{</span>createPage<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+    <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$i18n<span class="token punctuation">)</span>
+            <span class="token comment">/**
+             * locale 全局 locale
+             * fallbackLocale 全局兜底 locale
+             */</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+                <span class="token comment">// 作用域为 global scope</span>
+                <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'message.name'</span><span class="token punctuation">)</span>
+            <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="动态变更locale"><a href="#动态变更locale" class="header-anchor">#</a> 动态变更locale</h2> <p>在 Mpx 组合式 API 中，你可以通过修改 <code>useI18n</code> 返回的 <code>locale</code> 来更换局部或全局语言，或者更改 mpx.i18n 中的 locale 属性更换全局语言集，并自动更新视图。</p> <ul><li>变更全局 locale</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 局部locale变更，生效范围为当前组件内</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span>t<span class="token punctuation">,</span> locale<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 全局locale变更，生效范围为项目全局，locale 是一个 ref 变量</span>
+      locale<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'zh-CN'</span>
+      <span class="token comment">// 或者通过mpx.i18n来修改，也能起到全局locale修改作用</span>
+      mpx<span class="token punctuation">.</span>i18n<span class="token punctuation">.</span>locale <span class="token operator">=</span> <span class="token string">'zh-CN'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        t
+    <span class="token punctuation">}</span>  
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>注意：</strong> 这里通过 mpx.i18n 修改 locale 时，为和 vue3 保持一直，需要通过 global 属性来获取 locale，同时 locale 也是一个 ref 变量，需要使用 <code>.value</code> 来修改。</p> <ul><li>变更局部 locale</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 局部locale变更，生效范围为当前组件内</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span>t<span class="token punctuation">,</span> locale<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token string-property property">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                    <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'hello'</span>
+                <span class="token punctuation">}</span>
+            <span class="token punctuation">}</span><span class="token punctuation">,</span>
+            <span class="token string-property property">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                    <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'你好'</span>
+                <span class="token punctuation">}</span>
+            <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 局部locale变更，生效范围为当前组件/页面，locale 是一个 ref 变量</span>
+      locale<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'zh-CN'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        t
+    <span class="token punctuation">}</span>  
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>在选项式 API 中，仅支持修改全局 locale, 不支持修改局部 locale。</p> <p>在 Vue3 中，选项式 API 中直接修改 this.$i18n.locale 无任何作用，这里为和 Vue3 拉齐建议使用 mpx.i18n 来进行 locale 修改。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 修改全局 locale</span>
+      mpx<span class="token punctuation">.</span>i18n<span class="token punctuation">.</span>locale <span class="token operator">=</span> <span class="token string">'en-US'</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="动态更新语言集"><a href="#动态更新语言集" class="header-anchor">#</a> 动态更新语言集</h2> <p>在组合式 API 中默认支持动态更新语言集。</p> <p>在选项式 API 中，当模板中没有使用 i18n 函数或开启了 <code>i18n.useComputed</code> 配置时, 可以对语言集进行动态更新。</p> <p>我们提供了 <code>mergeLocaleMessage</code> 对语言集进行动态扩展，<code>setLocaleMessage</code> 对语言集进行覆盖更新。</p> <p>使用方式如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--2 秒之后展示 哈喽--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('message.hello')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--1秒之后展示 hello1, 2秒之后展示为 恭喜你--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('message.hello1')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> useI18n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+    <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+            <span class="token keyword">const</span> <span class="token punctuation">{</span> t<span class="token punctuation">,</span> mergeLocaleMessage<span class="token punctuation">,</span> setLocaleMessage <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+            <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+                <span class="token comment">// 新增一门语言或针对特定语言更新语言集</span>
+                <span class="token function">mergeLocaleMessage</span><span class="token punctuation">(</span><span class="token string">'en-US'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+                    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                        <span class="token literal-property property">hello1</span><span class="token operator">:</span> <span class="token string">'hello1'</span><span class="token punctuation">,</span>
+                    <span class="token punctuation">}</span>
+                <span class="token punctuation">}</span><span class="token punctuation">)</span>
+            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
+            <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+                <span class="token function">setLocaleMessage</span><span class="token punctuation">(</span><span class="token string">'en-US'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+                    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                        <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'哈喽'</span><span class="token punctuation">,</span>
+                        <span class="token literal-property property">hello1</span><span class="token operator">:</span> <span class="token string">'恭喜你'</span>
+                    <span class="token punctuation">}</span>
+                <span class="token punctuation">}</span><span class="token punctuation">)</span>
+            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span>
+            <span class="token keyword">return</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>同理我们在选项式 API 中可以使用 <code>mpx.i18n.global.mergeLocaleMessage</code>, <code>mpx.i18n.global.setLocaleMessage</code> 方法来动态更新或扩展语言集。</p> <h2 id="平台支持"><a href="#平台支持" class="header-anchor">#</a> 平台支持</h2> <p>目前支持业内所有小程序平台(微信/支付宝/qq/百度/头条)。</p> <p>在输出 web 时，构建会自动引入 vue-i18n 并进行安装配置，无需修改任何代码即可按照预期正常工作。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/platform.html" class="prev">
+        跨平台
+      </a></span> <span class="next"><a href="/guide/advance/size-report.html">
+        包体积分析
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/68.ebe4213c.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/image-process.html b/docs-vuepress/.vuepress/dist/guide/advance/image-process.html
new file mode 100644
index 0000000000..37b1f3de55
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/image-process.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>图像资源处理 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/69.2d309866.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" aria-current="page" class="active sidebar-link">图像资源处理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/image-process.html#图像资源引入有三种方式" class="sidebar-link">图像资源引入有三种方式</a></li><li class="sidebar-sub-header"><a href="/guide/advance/image-process.html#base64-图像资源" class="sidebar-link">Base64 图像资源</a></li><li class="sidebar-sub-header"><a href="/guide/advance/image-process.html#cdn-图像资源" class="sidebar-link">CDN 图像资源</a></li><li class="sidebar-sub-header"><a href="/guide/advance/image-process.html#cdn-图像资源输出本地目录，用户自行批量上传到cdn服务器" class="sidebar-link">CDN 图像资源输出本地目录，用户自行批量上传到CDN服务器</a></li><li class="sidebar-sub-header"><a href="/guide/advance/image-process.html#用户自定义图像处理方式" class="sidebar-link">用户自定义图像处理方式</a></li></ul></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="图像资源处理"><a href="#图像资源处理" class="header-anchor">#</a> 图像资源处理</h1> <blockquote><p>Mpx在小程序开发中提供了很好的图像资源处理能力，让开发者可以愉快地在项目中使用图片。</p></blockquote> <h2 id="图像资源引入有三种方式"><a href="#图像资源引入有三种方式" class="header-anchor">#</a> 图像资源引入有三种方式</h2> <ol><li>Template 中通过 image src 指定图像资源
+<ul><li>直接指定图像的远程资源地址</li> <li>资源为本地路径，若配置 publicPath，则 publicPath 与 webpack loader 中配置的 name 进行拼接</li></ul></li> <li>Style 中通过 src 指定图像资源</li> <li>Style 中通过 class 指定图像资源</li></ol> <p>Wxss文件中只能用 CDN 地址或 Base64, 针对第二、三种方式引入的资源，可以通过配置决定使用 CDN 还是 Base64，且 Mpx 中图像资源处理会优先检查 Base64，具体配置参数如下：</p> <ul><li>publicPath：资源存放 CDN 地址，可选</li> <li>limit: 资源大小限制，可根据资源的大小判断走 Base64 还是 CDN， 可选</li> <li>publicPathScope: 限制输出 CDN 图像资源的范围，可选 styleOnly、all，默认为 styleOnly。（图像引用方式分两大类 Template, Style）</li> <li>outputPathCDN: 设置 CDN 图像对应的本地相对地址（相对于当前编译输出目录的地址，如 dist,或者 dist/wx），可写脚本将本地图像批量上传到 CDN</li></ul> <h2 id="base64-图像资源"><a href="#base64-图像资源" class="header-anchor">#</a> Base64 图像资源</h2> <p>图像转 Base64的两种方式:</p> <ul><li>未配置 publicPath</li> <li>配置了 publicPath，且用户未自定义图像处理 fallback query，且未配置 limit 或图像资源未超过 limit 的限制时</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.config.js 配置,未配置 publicPath 必走 Base64</span>
+<span class="token keyword">const</span> webpackConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+      <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">urlLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="custom-block tip"><p class="custom-block-title">@mpxjs/cli 3.x 版本配置如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">urlLoader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div></div> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">&lt;style&gt;
+  .logo</span> <span class="token punctuation">{</span>
+    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'~images/logo.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+&lt;/style&gt;
+</code></pre></div><h2 id="cdn-图像资源"><a href="#cdn-图像资源" class="header-anchor">#</a> CDN 图像资源</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.config.js 配置</span>
+<span class="token keyword">const</span> webpackConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+      <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">urlLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
+        <span class="token comment">// CDN 地址</span>
+        <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com/'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token string">'1024'</span> <span class="token comment">// Base64 的最大长度，超过则走 CDN </span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="custom-block tip"><p class="custom-block-title">@mpxjs/cli 3.x 版本配置如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">urlLoader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
+        <span class="token comment">// CDN 地址</span>
+        <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com/'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token string">'1024'</span> <span class="token comment">// Base64 的最大长度，超过则走 CDN </span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div></div> <h2 id="cdn-图像资源输出本地目录，用户自行批量上传到cdn服务器"><a href="#cdn-图像资源输出本地目录，用户自行批量上传到cdn服务器" class="header-anchor">#</a> CDN 图像资源输出本地目录，用户自行批量上传到CDN服务器</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.config.js 配置</span>
+<span class="token keyword">const</span> webpackConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+      <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">urlLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com'</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">publicPathScope</span><span class="token operator">:</span> <span class="token string">'styleOnly'</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">outputPathCDN</span><span class="token operator">:</span> <span class="token string">'./cdnImages'</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="custom-block tip"><p class="custom-block-title">@mpxjs/cli 3.x 版本配置如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">urlLoader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">publicPathScope</span><span class="token operator">:</span> <span class="token string">'styleOnly'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">outputPathCDN</span><span class="token operator">:</span> <span class="token string">'./cdnImages'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div></div> <blockquote><p>备注:<br>
+图像默认编译后会输出到 img 目录下, 当设置 outputPathCDN 后，输出的本地图像地址为 outputPathCDN + img/图像.png<br>
+CND 文件地址为 publicPath + img/图像.png，所以当使用脚本上传到 CDN 时，路径要带上 img</p></blockquote> <h2 id="用户自定义图像处理方式"><a href="#用户自定义图像处理方式" class="header-anchor">#</a> 用户自定义图像处理方式</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.config.js 配置</span>
+<span class="token keyword">const</span> webpackConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+      <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">urlLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
+        <span class="token comment">// CDN 地址</span>
+        <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com/'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token string">'1024'</span> <span class="token comment">// Base64 的最大长度，超过则走 CDN,</span>
+        <span class="token literal-property property">fallback</span><span class="token operator">:</span> <span class="token string">'file-loader'</span> <span class="token comment">// 默认走 file-loader</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="custom-block tip"><p class="custom-block-title">@mpxjs/cli 3.x 版本配置如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">urlLoader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
+        <span class="token comment">// CDN 地址</span>
+        <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com/'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token string">'1024'</span> <span class="token comment">// Base64 的最大长度，超过则走 CDN,</span>
+        <span class="token literal-property property">fallback</span><span class="token operator">:</span> <span class="token string">'file-loader'</span> <span class="token comment">// 默认走 file-loader</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div></div> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*不走 Base64 的情况下*/</span>
+<span class="token selector">&lt;style&gt;
+  .logo2</span> <span class="token punctuation">{</span>
+    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'~images/logo.png?fallback=true'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+&lt;/style&gt;
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/size-report.html" class="prev">
+        包体积分析
+      </a></span> <span class="next"><a href="/guide/advance/progressive.html">
+        原生渐进迁移
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/69.2d309866.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/mixin.html b/docs-vuepress/.vuepress/dist/guide/advance/mixin.html
new file mode 100644
index 0000000000..312f093e26
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/mixin.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>使用 mixin | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/70.60ae83e6.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" aria-current="page" class="active sidebar-link">使用 mixin</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/mixin.html#局部-mixin" class="sidebar-link">局部 Mixin</a></li><li class="sidebar-sub-header"><a href="/guide/advance/mixin.html#全局-mixin" class="sidebar-link">全局 Mixin</a></li></ul></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用-mixin"><a href="#使用-mixin" class="header-anchor">#</a> 使用 mixin</h1> <p>Mpx 提供了一套完善的 mixin 机制，有人可能要问，原生小程序中已经支持了 behaviors，为何我们还需要提供 mixin 呢？主要有以下两点原因：</p> <ol><li>Behaviors 是平台限度的，只有在部分小程序平台中可以使用，而且内置 behaviors 承载了除了 mixin 外的其他功能，框架提供的 mixin 是一个与平台无关的基础能力；</li> <li>Behaviors 只有组件支持使用，页面不支持，而且只支持局部声明，框架提供的 mixin 与组件页面无关，且支持全局 mixin 声明。</li></ol> <h2 id="局部-mixin"><a href="#局部-mixin" class="header-anchor">#</a> 局部 Mixin</h2> <p><code>App</code>、<code>Page</code>、<code>Component</code> 接收 mixins 参数,参数格式为[Mixin1(Object),Mixin2(Object)]</p> <blockquote><p>Mixin 混合实例对象可以像正常的实例对象一样包含选项，相同选项将进行逻辑合并。举例：如果 mixin1 包含一个钩子 ready,而创建组件 Component 也有一个钩子 ready，两个函数将被调用。 Mixin 钩子按照传入顺序(数组顺序)依次调用，并在调用组件自身的钩子之前被调用。</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// mixin.js</span>
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">'phone'</span><span class="token operator">:</span> <span class="token string">'手机'</span><span class="token punctuation">,</span>
+      <span class="token string-property property">'tv'</span><span class="token operator">:</span> <span class="token string">'电视'</span><span class="token punctuation">,</span>
+      <span class="token string-property property">'computer'</span><span class="token operator">:</span> <span class="token string">'电脑'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'mixins ready:'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span>phone<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{list}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token keyword">import</span> mixins <span class="token keyword">from</span> <span class="token string">'../common/mixins'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span>mixins<span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'手机'</span><span class="token punctuation">,</span> <span class="token string">'电视'</span><span class="token punctuation">,</span> <span class="token string">'电脑'</span><span class="token punctuation">]</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'component ready:'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span>phone<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="language-shell extra-class"><pre class="language-shell"><code>// 输出结果为
+mixins ready: 手机
+component ready: 手机
+</code></pre></div><h2 id="全局-mixin"><a href="#全局-mixin" class="header-anchor">#</a> 全局 Mixin</h2> <p>Mpx 中可以使用 <code>mpx.injectMixins</code> 方法配置全局 mixin，能够按照 App / 组件 / 页面维度自由配置，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token comment">// 第一个参数为 mixins，可以混入任意配置，第二个参数为混入生效范围，可传递 'app' / 'page' / 'component' 字符串或由其组成的数组</span>
+mpx<span class="token punctuation">.</span><span class="token function">injectMixins</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+  <span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">customData</span><span class="token operator">:</span> <span class="token string">'123'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'page'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+
+<span class="token comment">// mpx.mixin 为 mpx.injectMixins 的别名，混入单个 mixin 时可以直接传递对象，生效范围可传递字符串</span>
+mpx<span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">useCustomData</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>customData<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'component'</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 当未传递生效范围时默认为全局生效，对 app / page / component 都生效</span>
+mpx<span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">processedCustomData</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>customData <span class="token operator">+</span> <span class="token string">'321'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/pinia.html" class="prev">
+        状态管理（pinia）
+      </a></span> <span class="next"><a href="/guide/advance/npm.html">
+        使用npm
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/70.60ae83e6.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/npm.html b/docs-vuepress/.vuepress/dist/guide/advance/npm.html
new file mode 100644
index 0000000000..7dc074ae6d
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/npm.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>使用npm | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/71.188d7bca.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" aria-current="page" class="active sidebar-link">使用npm</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/npm.html#下载npm包" class="sidebar-link">下载npm包</a></li><li class="sidebar-sub-header"><a href="/guide/advance/npm.html#引用npm模块" class="sidebar-link">引用npm模块</a></li><li class="sidebar-sub-header"><a href="/guide/advance/npm.html#引用npm组件-页面" class="sidebar-link">引用npm组件/页面</a></li><li class="sidebar-sub-header"><a href="/guide/advance/npm.html#兼容原生小程序路径规范" class="sidebar-link">兼容原生小程序路径规范</a></li></ul></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用npm"><a href="#使用npm" class="header-anchor">#</a> 使用npm</h1> <p>Mpx项目中用户能够方便自然地引用 npm 资源，像 web 开发中一样</p> <p>在 Mpx 中使用 npm，通过 Webpack 插件在编译时将引用的 npm 包输出为小程序文件，所以 Mpx 的构建产物不需要在开发工具再次进行 npm 构建。</p> <h2 id="下载npm包"><a href="#下载npm包" class="header-anchor">#</a> 下载npm包</h2> <p>在项目 package.json 所在的目录中执行命令安装项目 npm 包</p> <div class="language-js extra-class"><pre class="language-js"><code>npm install
+</code></pre></div><p>在项目中安装某个第三方 npm 包</p> <div class="language-js extra-class"><pre class="language-js"><code>npm install mpx<span class="token operator">-</span>ui
+</code></pre></div><p>如若之前未接触过 npm，请翻阅 <a href="https://docs.npmjs.com/about-npm/index.html" target="_blank" rel="noopener noreferrer">官方 npm 文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 进行学习。</p> <h2 id="引用npm模块"><a href="#引用npm模块" class="header-anchor">#</a> 引用npm模块</h2> <p>直接使用模块路径引用，可以直接通过 ES6 的 import 语法来引用 JS 文件，并且无需额外执行npm构建</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+</code></pre></div><h2 id="引用npm组件-页面"><a href="#引用npm组件-页面" class="header-anchor">#</a> 引用npm组件/页面</h2> <p>在页面 script 标签中的 json 对象中使用 usingComponents 引入第三方组件，直接使用模块路径引用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;application/json&quot;</span><span class="token operator">&gt;</span>
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;mpx-button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;mpx-ui/src/components/button&quot;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>在 app.mpx 中的 script 标签中的 pages/packages/subPackages 中都可以声明引用 npm 包页面</p> <p>示例:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;application/json&quot;</span><span class="token operator">&gt;</span>
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;@someGroup/someNpmPackage/pages/view/index.mpx&quot;</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>以上这种写法为避免和本地页面路径冲突，Mpx 会将路径进行 hash 化处理，所以使用页面时要在路径后添加 ?resovle 标识符，编译时会被处理成正确的、完整的绝对路径。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> packageIndexPage <span class="token keyword">from</span> <span class="token string">'@someGroup/someNpmPackage/pages/view/index.mpx?resolve'</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">url</span><span class="token operator">:</span> packageIndexPage
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>如果你觉得上述引用 npm 包页面的方式太繁琐，我们也提供了另一种 page 声明方式，可以让你自定义页面路径</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 声明</span>
+<span class="token punctuation">{</span>
+  <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;src&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@someGroup/someNpmPackage/pages/view/index.mpx&quot;</span><span class="token punctuation">,</span>
+      <span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/somNpmPackage/index&quot;</span> <span class="token comment">// 注意保持 path 的唯一性</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// 使用</span>
+<span class="token comment">// 可以直接使用你自己声明的 path</span>
+mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/pages/somNpmPackage/index'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>同理，我们在使用 subPackages 分包时也可以使用 pages 对象的方式</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string-property property">&quot;subPackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+       <span class="token punctuation">{</span>
+         <span class="token string-property property">&quot;src&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@someGroup/someNpmPackage/pages/view/index.mpx&quot;</span><span class="token punctuation">,</span>
+         <span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/somNpmPackage/index&quot;</span> <span class="token comment">// 注意保持 path 的唯一性</span>
+       <span class="token punctuation">}</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">]</span>
+<span class="token comment">// 使用</span>
+mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/test/pages/somNpmPackage/index'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>同时使用 Mpx 引用npm组件/页面时包体积比原生中的 npm 规范更优，好处有：</p> <p>Mpx npm构建的优势主要有两点：1. 按需构建；2. 支持分包</p> <ul><li><p>小程序的 npm 规范场景下，组件库需声明miniprogram_dist目录，执行构建npm命令，将整个miniprogram_dist中的代码copy到项目的miniprogram_npm目录下。而 Mpx 的 npm 包引用，借助 Webpack 强大的构建分析能力，loader 在解析 json 中的 pages 域和 usingComponents 域中的路径时，通过动态创建 entry 的方式把这些文件添加进来，同时按需加载被确切使用的文件，降低包体积，借助  CommonsChunkPlugin/SplitChunksPlugin 的能力将复用的 js 模块抽出到一个外部公用的 bundle 中。</p></li> <li><p>原生小程序的构建中，所有的 npm 模块都会输出到主包中，Mpx 在编译中，还会进行分包处理，对组件和静态资源，根据用户的分包配置，串行对主包和各个分包进行构建，标记出每个组件及静态资源的归属，根据小程序资源访问策略将其输出到主包或者分包中。</p></li></ul> <p>所以使用 Mpx 框架开发小程序，可以享受最舒适最自然最好用的 npm 机制，详细原理介绍请移步<a href="/guide/understand/compile.html">Mpx编译构建原理</a></p> <h2 id="兼容原生小程序路径规范"><a href="#兼容原生小程序路径规范" class="header-anchor">#</a> 兼容原生小程序路径规范</h2> <p>组件或者页面的引入有绝对路径和相对路径，或者引入 npm 第三方包，原生小程序中，我们通过相对路径引入一个组件时</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
+  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;component-tag-name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;path/to/the/custom/component&quot;</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>这种路径形式在 webpack 路径规范中会被当成 npm 包路径来处理，所以要对原生小程序的路径规范做下兼容。</p> <p>Mpx 提供了两种路径规范的配置模式可供大家选择，具体的使用方式为：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+         <span class="token literal-property property">resolveMode</span><span class="token operator">:</span> <span class="token string">'webpack'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>在 MpxWebpackPlugin 插件中设置 resolveMode 项，默认值为 webpack，可选值有 webpack/native，推荐使用 webpack 模式，更舒服一些，配置项为 webpack 时，json 中的 pages/usingComponents 等需要写相对路径，但是也可以直接写 npm 包路径。例如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
+  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;component-tag-name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./path/to/the/custom/component&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 内部组件路径</span>
+    <span class="token string-property property">&quot;mpx-button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;mpx-ui/src/components/button&quot;</span> <span class="token comment">// npm 包路径</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>如果希望使用类似小程序原始那种&quot;绝对路径&quot;，可以将 resolveMode 设置为 native，但是 npm 路径需要在前面加一个~，类似 webpack 的样式引入规范，同时必须配合 projectRoot 参数提供项目根目录地址。</p> <p>resolveMode 为 native 时的使用示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">resolveMode</span><span class="token operator">:</span> <span class="token string">'native'</span><span class="token punctuation">,</span>
+        <span class="token comment">// 当resolveMode为native时可通过该字段指定项目根目录</span>
+        <span class="token literal-property property">projectRoot</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../src'</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 项目page.mpx</span>
+<span class="token punctuation">{</span>
+  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;mpx-button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;~mpx-ui/src/components/button&quot;</span><span class="token punctuation">,</span> <span class="token comment">// npm 包路径</span>
+    <span class="token string-property property">&quot;component-tag-name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;path/to/the/custom/component&quot;</span> <span class="token comment">// 内部组件路径</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/mixin.html" class="prev">
+        使用 mixin
+      </a></span> <span class="next"><a href="/guide/advance/subpackage.html">
+        使用分包
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/71.188d7bca.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/pinia.html b/docs-vuepress/.vuepress/dist/guide/advance/pinia.html
new file mode 100644
index 0000000000..dff4cbe5af
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/pinia.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>状态管理（pinia） | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/72.3f7bfd0d.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" aria-current="page" class="active sidebar-link">状态管理（pinia）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/pinia.html#介绍" class="sidebar-link">介绍</a></li><li class="sidebar-sub-header"><a href="/guide/advance/pinia.html#使用插件" class="sidebar-link">使用插件</a></li></ul></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="状态管理-pinia"><a href="#状态管理-pinia" class="header-anchor">#</a> 状态管理（pinia）</h1> <p>Mpx 参考 <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener noreferrer">Pinia<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 设计实现了一套外部状态逻辑管理系统（pinia），允许跨页面/组件共享状态，其中的概念与 api 与 Pinia 保持一致，同时支持在 Mpx 组合式 API（Composition API）和选项式 API（Options API）模式下使用。</p> <h2 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h2> <p><code>pinia</code> 是一个状态管理容器，可支持复杂场景下的组件通信机制，与<code>Vuex</code>状态管理不同之处在于：</p> <ol><li><p>mutations 不再存在，使用 actions 来支持应用中状态的同步和异步变更。</p></li> <li><p>动态创建 store，使用<code>useStore</code>实现运行时动态创建 store。</p></li> <li><p>扁平架构，不再有 modules 嵌套结构，支持不同 store 之间的交叉组合方式使用。</p></li></ol> <h3 id="创建-pinia"><a href="#创建-pinia" class="header-anchor">#</a> 创建 pinia</h3> <p>首先在应用中调用<code>createPinia</code>方法来创建全局 pinia 实例。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
+<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
+
+<span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+</code></pre></div><p>如果你的应用想使用 SSR 渲染模式，请将 pinia 的创建放在 <code>onAppInit</code> 钩子中执行</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
+
+<span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
+
+<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token function">onAppInit</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      pinia
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="创建-store"><a href="#创建-store" class="header-anchor">#</a> 创建 store</h3> <p>然后调用<code>defineStore</code>方法，传入 store 唯一标识（id），来创建一个 store，支持 Setup 和 Options 两种风格的 store。</p> <h4 id="setup-store"><a href="#setup-store" class="header-anchor">#</a> Setup store</h4> <p>与组合式 API 的 setup 函数类似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并返回一个带有我们想暴露出去的属性和方法的对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// setup.js</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">export</span> <span class="token keyword">const</span> useSetupStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'setup'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'pinia'</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> myName <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> name<span class="token punctuation">.</span>value
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token keyword">function</span> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    count<span class="token punctuation">.</span>value<span class="token operator">++</span>
+  <span class="token punctuation">}</span>
+  <span class="token keyword">return</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> name<span class="token punctuation">,</span> myName<span class="token punctuation">,</span> increment <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>在 Setup Store 中：</p> <ul><li><code>ref()</code> 就是 <code>state</code> 属性</li> <li><code>computed()</code> 就是 <code>getters</code></li> <li><code>function()</code> 就是 <code>actions</code></li></ul> <h4 id="options-store"><a href="#options-store" class="header-anchor">#</a> Options store</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// options.js</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">export</span> <span class="token keyword">const</span> useOptionsStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'options'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token function-variable function">state</span> <span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'pinia'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">myName</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> state<span class="token punctuation">.</span>name
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$patch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        state<span class="token punctuation">.</span>count<span class="token operator">++</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="使用-store"><a href="#使用-store" class="header-anchor">#</a> 使用 store</h3> <p>在选项式 API 中使用，如果你不能使用组合式 API，但你可以使用 <code>computed</code>, <code>methods</code>, '...'，那你可以使用 <code>mapState()</code>, <code>mapActions()</code> 辅助函数
+来将 <code>state</code>, <code>getter</code>, <code>action</code> 等映射到你的组件中。</p> <p>无论是 optionsStore、还是 setupStore，我们都可以在选项式组件中使用，且使用方式并无差异，下方例子我们统一使用 useSetupStore 来作为示范例</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> storeToRefs<span class="token punctuation">,</span> mapState<span class="token punctuation">,</span> mapActions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> useOptionsStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'xxx/options'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> useSetupStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'xxx/setup'</span>
+
+
+<span class="token comment">// 选项式API（Options API）风格下通过mapHelper函数使用</span>
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 可以访问组件中的 this.name</span>
+    <span class="token comment">// 此处与直接从 useSetupStore 中读取的数据相同</span>
+    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span>useSetupStore<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'count'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// 也可以将state修改别名，例如将name 注册为 otherName</span>
+    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span>useSetupStore<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">otherName</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
+      <span class="token comment">// 也可以写一个函数来获取对 useSetupStore 的访问权</span>
+      <span class="token function-variable function">double</span><span class="token operator">:</span> <span class="token parameter">store</span> <span class="token operator">=&gt;</span> store<span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">,</span>
+      <span class="token comment">// 也可以通过访问 `this` 拿到数据</span>
+      <span class="token function">magicValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>double
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// 在pinia中，getter 也是通过 mapState 来进行映射</span>
+    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span>useSetupStore<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'myName'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span>useSetupStore<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'increment'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// 也可以将其注册问题 this.setupIncrement 方法</span>
+    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span>useSetupStore<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">setupIncrement</span><span class="token operator">:</span> <span class="token string">'increment'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><strong>注意：</strong> 在 <code>pinia</code> 中，getter 也是通过 mapState 来进行映射</p> <p>在组合式API (Setup API) 风格下使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useSetupStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'xxx/setup'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> storeToRefs<span class="token punctuation">,</span> mapState<span class="token punctuation">,</span> mapActions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> setupStore <span class="token operator">=</span> <span class="token function">useSetupStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    setupStore<span class="token punctuation">.</span>count <span class="token operator">=</span> <span class="token number">2</span>
+    <span class="token comment">// 作为 store 的一个属性，我们可以直接访问任何 getter(与 state )</span>
+    setupStore<span class="token punctuation">.</span>myName <span class="token comment">// pinia</span>
+
+    <span class="token keyword">function</span> <span class="token function">onIncrementClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 调用 action 方法</span>
+      setupStore<span class="token punctuation">.</span><span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'New Count:'</span><span class="token punctuation">,</span> setupStore<span class="token punctuation">.</span>count<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      onIncrementClick<span class="token punctuation">,</span>
+      <span class="token operator">...</span><span class="token function">storeToRefs</span><span class="token punctuation">(</span>setupStore<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><blockquote><p>注意：在组合式 API（Setup API）模式下，直接解构获取到的 store 数据会失去响应性，需要通过 storeToRefs 方法处理赋予数据响应性。另外<code>storeToRefs</code>方法只会返回 state 或 getter。</p></blockquote> <h2 id="使用插件"><a href="#使用插件" class="header-anchor">#</a> 使用插件</h2> <p>Mpx pinia 支持使用插件扩展当前 store 实例的功能，用法如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// onStoreAction.js，订阅所有store实例的方法</span>
+<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">onStoreAction</span><span class="token operator">:</span> <span class="token parameter">context</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  context<span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">$onAction</span><span class="token punctuation">(</span><span class="token punctuation">(</span>
+    <span class="token parameter"><span class="token punctuation">{</span>
+      name<span class="token punctuation">,</span>
+      store<span class="token punctuation">,</span>
+      args<span class="token punctuation">,</span>
+      after<span class="token punctuation">,</span>
+      onError
+    <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token function">after</span><span class="token punctuation">(</span><span class="token parameter">name</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'after'</span><span class="token punctuation">,</span> name<span class="token punctuation">,</span> store<span class="token punctuation">,</span> args<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+      <span class="token function">onError</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onError'</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// app.mpx</span>
+<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> onStoreAction <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'xxx/onStoreAction'</span>
+
+<span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+pinia<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>onStoreAction<span class="token punctuation">)</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/store.html" class="prev">
+        状态管理（store）
+      </a></span> <span class="next"><a href="/guide/advance/mixin.html">
+        使用 mixin
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/72.3f7bfd0d.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/platform.html b/docs-vuepress/.vuepress/dist/guide/advance/platform.html
new file mode 100644
index 0000000000..b95a932b6d
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/platform.html
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>跨平台 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/73.171571e4.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" aria-current="page" class="active sidebar-link">跨平台</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/platform.html#多平台支持" class="sidebar-link">多平台支持</a></li><li class="sidebar-sub-header"><a href="/guide/advance/platform.html#跨平台输出小程序" class="sidebar-link">跨平台输出小程序</a></li><li class="sidebar-sub-header"><a href="/guide/advance/platform.html#跨平台条件编译" class="sidebar-link">跨平台条件编译</a></li><li class="sidebar-sub-header"><a href="/guide/advance/platform.html#跨平台输出web" class="sidebar-link">跨平台输出web</a></li></ul></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="跨平台"><a href="#跨平台" class="header-anchor">#</a> 跨平台</h1> <h2 id="多平台支持"><a href="#多平台支持" class="header-anchor">#</a> 多平台支持</h2> <p>Mpx支持在多个小程序平台中进行增强，目前支持的小程序平台包括微信，支付宝，百度，qq和头条，不过自2.0版本后，Mpx支持了以微信增强语法为base的跨平台输出，实现了一套业务源码在多端输出运行的能力，大大提升了多小程序平台业务的开发效率，详情可以查看<a href="#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%BC%96%E8%AF%91">跨平台编译</a></p> <h3 id="template增强特性"><a href="#template增强特性" class="header-anchor">#</a> template增强特性</h3> <p>不同平台上的模板增强指令按照平台的指令风格进行设计，文档和代码示例为了方便统一采用微信小程序下的书写方式。</p> <p>模板增强指令对应表：</p> <table><thead><tr><th>增强指令</th> <th>微信</th> <th>支付宝</th> <th>百度</th> <th>qq</th> <th>头条</th></tr></thead> <tbody><tr><td>双向绑定</td> <td>wx:model</td> <td>a:model</td> <td>s-model</td> <td>qq:model</td> <td>tt:model</td></tr> <tr><td>双向绑定辅助属性</td> <td>wx:model-prop</td> <td>a:model-prop</td> <td>s-model-prop</td> <td>qq:model-prop</td> <td>tt:model-prop</td></tr> <tr><td>双向绑定辅助属性</td> <td>wx:model-event</td> <td>a:model-event</td> <td>s-model-event</td> <td>qq:model-event</td> <td>tt:model-event</td></tr> <tr><td>双向绑定辅助属性</td> <td>wx:model-value-path</td> <td>a:model-value-path</td> <td>s-model-value-path</td> <td>qq:model-value-path</td> <td>tt:model-value-path</td></tr> <tr><td>双向绑定辅助属性</td> <td>wx:model-filter</td> <td>a:model-filter</td> <td>s-model-filter</td> <td>qq:model-filter</td> <td>tt:model-filter</td></tr> <tr><td>动态样式绑定</td> <td>wx:class</td> <td>a:class</td> <td>s-class</td> <td>qq:class</td> <td>暂不支持</td></tr> <tr><td>动态样式绑定</td> <td>wx:style</td> <td>a:style</td> <td>s-style</td> <td>qq:style</td> <td>暂不支持</td></tr> <tr><td>获取节点/组件实例</td> <td>wx:ref</td> <td>a:ref</td> <td>s-ref</td> <td>qq:ref</td> <td>tt:ref</td></tr> <tr><td>显示/隐藏</td> <td>wx:show</td> <td>a:show</td> <td>s-show</td> <td>qq:show</td> <td>tt:show</td></tr></tbody></table> <h3 id="script增强特性"><a href="#script增强特性" class="header-anchor">#</a> script增强特性</h3> <table><thead><tr><th>增强字段</th> <th>微信</th> <th>支付宝</th> <th>百度</th> <th>qq</th> <th>头条</th></tr></thead> <tbody><tr><td>computed</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>部分支持，无法作为props传递(待头条修复生命周期执行顺序可完整支持)</td></tr> <tr><td>watch</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td></tr> <tr><td>mixins</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td></tr></tbody></table> <h3 id="style增强特性"><a href="#style增强特性" class="header-anchor">#</a> style增强特性</h3> <p>无平台差异</p> <h3 id="json增强特性"><a href="#json增强特性" class="header-anchor">#</a> json增强特性</h3> <table><thead><tr><th>增强字段</th> <th>微信</th> <th>支付宝</th> <th>百度</th> <th>qq</th> <th>头条</th></tr></thead> <tbody><tr><td>packages</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>部分支持，无法分包</td></tr></tbody></table> <h2 id="跨平台输出小程序"><a href="#跨平台输出小程序" class="header-anchor">#</a> 跨平台输出小程序</h2> <p>自2.0版本开始，mpx开始支持跨小程序平台编译，不同于常规跨平台框架重新定义一套DSL的方式，mpx支持基于现有平台的源码编译为其他已支持平台的目标代码。跨平台编译能力依赖于mpx的多平台支持，目前mpx已经支持将微信小程序跨平台编译为支付宝、百度、qq和头条小程序。</p> <h3 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h3> <p>如果你是使用<code>mpx init xxx</code>新生成的项目，package.json里script部分有<code>npm run build:cross</code>，直接执行<code>npm run build:cross</code>（watch同理），如果仅需构建某几个平台的，可以修改该script，按已有的格式删除或增添某些某些平台</p> <p>如果你是自行搭建的mpx项目，你只需要进行简单的配置修改，打开项目的webpack配置，找到@mpxjs/webpack-plugin的声明位置，传入mode和srcMode参数即可，示例如下</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">MpxwebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt|jd|web|ios|android)</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'ali'</span><span class="token punctuation">,</span>
+  <span class="token comment">// srcMode为mpx编译的源码平台，目前仅支持wx   </span>
+  <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>使用 @mpxjs/cli 创建的项目，可以通过在 <code>npm script</code> 当中定义 <code>targets</code> 来设置编译的目标平台</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 项目 package.json</span>
+<span class="token punctuation">{</span>
+  <span class="token string-property property">&quot;script&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;build:cross&quot;</span><span class="token operator">:</span> <span class="token string">&quot;mpx-cli-service build --targets=wx,ali&quot;</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="跨平台差异抹平"><a href="#跨平台差异抹平" class="header-anchor">#</a> 跨平台差异抹平</h3> <p>为了实现小程序的跨平台编译，我们在编译和运行时做了很多工作以抹平小程序开发中各个方面的跨平台差异</p> <h4 id="模板语法差异抹平"><a href="#模板语法差异抹平" class="header-anchor">#</a> 模板语法差异抹平</h4> <p>对于通用指令/事件处理的差异，mpx提供了统一的编译转换抹平操作；而对于平台组件和组件属性的差异，我们也在力所能及的范围内进行了转换抹平，对于平台差异性过大无法转换的部分会在编译阶段报错指出。</p> <h4 id="组件-页面对象差异抹平"><a href="#组件-页面对象差异抹平" class="header-anchor">#</a> 组件/页面对象差异抹平</h4> <p>不同平台间组件/页面对象的差异主要体现在生命周期上，我们在支持多平台能力时已经将不同平台的生命周期映射到mpx框架的一套内部生命周期中，基于这个统一的映射，不同平台的生命周期差异也得到了抹平。</p> <p>此外，我们还进行了一系列运行时增强来模拟微信平台中提供而其他平台中未提供的能力，例如：</p> <ul><li>在支付宝组件实例中提供了this.triggerEvent方法模拟微信中的自定义组件事件；</li> <li>提供了this.selectComponent/this.selectAllComponents方法模拟微信中获取子组件实例的能力；</li> <li>重写了createSelectorQuery方法抹平了微信/支付宝平台间的使用差异；</li> <li>转换抹平了微信/支付宝中properties定义的差异；</li> <li>利用mpx本身的数据响应能力模拟了微信中的observers/property observer能力等;</li> <li>提供了this.getRelationNodes方法并支持了微信中组件间关系relations的能力</li></ul> <p>对于原生小程序组件的转换，还会进行一些额外的抹平，已兼容一些已有的原生组件库，例如：</p> <ul><li>将支付宝组件中的props数据挂载到this.data中以模拟微信平台中的表现；</li> <li>利用mpx本身的mixins能力模拟微信中的behaviors能力。</li></ul> <p>对于一些无法进行模拟的跨平台差异，会在运行时进行检测并报错指出，例如微信转支付宝时使用moved生命周期等。</p> <h4 id="json配置差异抹平"><a href="#json配置差异抹平" class="header-anchor">#</a> json配置差异抹平</h4> <p>类似于模板语法，会在编译阶段进行转换抹平，无法转换的部分会在编译阶段报错指出。</p> <h4 id="api调用差异抹平"><a href="#api调用差异抹平" class="header-anchor">#</a> api调用差异抹平</h4> <p>对于api调用，mpx提供了一个api调用代理插件来抹平跨平台api调用的差异，使用时需要在项目中安装使用<code>@mpxjs/api-proxy</code>，可以通过两种方式使用</p> <h4 id="方式一-在调用小程序api时统一使用mpx对象进行调用-示例如下"><a href="#方式一-在调用小程序api时统一使用mpx对象进行调用-示例如下" class="header-anchor">#</a> 方式一：在调用小程序api时统一使用mpx对象进行调用，示例如下：</h4> <p>安装插件支持options传入，options说明如下：</p> <table><thead><tr><th>参数名称</th> <th>类型</th> <th>含义</th> <th>是否必填</th> <th>默认值</th> <th>备注</th></tr></thead> <tbody><tr><td><s>platform</s></td> <td><s>Object</s></td> <td><s>各平台之间的转换</s></td> <td><s>否</s></td> <td><s>{ from:'', to:'' }</s></td> <td>已删除</td></tr> <tr><td>usePromise</td> <td>Boolean</td> <td>是否将 api 转化为 promise 格式使用</td> <td>-</td> <td>-</td> <td>-</td></tr> <tr><td><s>exclude</s></td> <td><s>Array(String)</s></td> <td><s>跨平台时不需要转换的 api</s></td> <td>-</td> <td>-</td> <td>已删除</td></tr> <tr><td>whiteList</td> <td>Array(String)</td> <td>强行转化为 promise 格式的 api</td> <td>否</td> <td>[]</td> <td>需要 usePromise 设为 true</td></tr> <tr><td>blackList</td> <td>Array(String)</td> <td>不转换 promise 格式的 api</td> <td>否</td> <td>[]</td> <td>需要 usePromise 设为 true</td></tr> <tr><td>custom</td> <td>Object</td> <td>提供用户在各渠道下自定义api开放能力</td> <td>否</td> <td>[]</td> <td>-</td></tr></tbody></table> <h4 id="普通形式"><a href="#普通形式" class="header-anchor">#</a> 普通形式</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">)</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'标题'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'这是一个弹窗'</span><span class="token punctuation">,</span>
+  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>cancel<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'用户点击取消'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="使用promise形式"><a href="#使用promise形式" class="header-anchor">#</a> 使用promise形式</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">usePromise</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">showActionSheet</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">itemList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>tapIndex<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="用户自定义"><a href="#用户自定义" class="header-anchor">#</a> 用户自定义</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> scanCode <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@test/scanCode'</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">custom</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">web</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      scanCode
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token comment">// 在web下调用的实际是用户自定义部分的scanCode</span>
+mpx<span class="token punctuation">.</span><span class="token function">scanCode</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">onlyFromCamera</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">,</span> <span class="token string">'scanCode, success'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">fail</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">,</span> <span class="token string">'scanCode, fail'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="方式二-直接在-mpxjs-api-proxy导出想使用的方法"><a href="#方式二-直接在-mpxjs-api-proxy导出想使用的方法" class="header-anchor">#</a> 方式二：直接在<code>@mpxjs/api-proxy</code>导出想使用的方法</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 独立使用 支持treesharking能力</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> showModal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
+
+<span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'标题'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'这是一个弹窗'</span><span class="token punctuation">,</span>
+  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'弹框展示成功'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>对于无法转换抹平的api调用会在运行时阶段报错指出。</p> <h4 id="webview-bridge差异抹平"><a href="#webview-bridge差异抹平" class="header-anchor">#</a> webview bridge差异抹平</h4> <p>Mpx支持小程序跨平台后，多个平台的小程序里都有webview组件，webview打开的页面和小程序可以通过API来通信以及调用一些小程序能力，但是各方webview提供的API是不一样的。</p> <p>比如微信是用 wx.miniProgram.navigateTo 来跳转到别的小程序页面，而支付宝里是 my.navigateTo ，那么我们开发H5时候为了让H5能适应各家小程序平台就需要写多份对应逻辑。</p> <p>为解决这个问题，Mpx提供了用于运行在小程序的webview里的H5抹平平台差异的bridge库：@mpxjs/webview-bridge</p> <p>使用方式很简单，不过注意这个库是给H5用的，不是给小程序用的。在H5项目中引入。</p> <p><a href="https://github.com/didi/mpx/tree/master/examples/mpx-webview" target="_blank" rel="noopener noreferrer">使用示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>支持script标签引入和npm引入，标签引入的话，全局实例是mpx（npm模块使用下也鼓励import mpx from '@mpxjs/webview-birdge'），使用就例如 mpx.navigateTo ，能保持整个项目风格完全一致。</p> <p>提供的API如下：<code>navigateTo, navigateBack, switchTab, reLaunch, redirectTo, getEnv, postMessage, getLoadError</code></p> <h2 id="跨平台条件编译"><a href="#跨平台条件编译" class="header-anchor">#</a> 跨平台条件编译</h2> <p>Mpx跨平台编译的原则在于，<code>能转则转，转不了则报错提示</code>，对于无法抹平差异的部分，我们提供了完善的跨平台条件编译机制便于用户处理因平台差异而无法相互转换的部分，也能够用于实现具有平台差异性的业务逻辑。</p> <p>mpx中我们支持了三种维度的条件编译，分别是文件维度，区块维度和代码维度，其中，文件维度和区块维度主要用于处理一些大块的平台差异性逻辑，而代码维度主要用于处理一些局部简单的平台差异。</p> <h3 id="文件维度条件编译"><a href="#文件维度条件编译" class="header-anchor">#</a> 文件维度条件编译</h3> <p>文件维度条件编译简单的来说就是文件为维度进行跨平台差异代码的编写，例如在微信-&gt;支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，这时你可以在相同的位置新建一个map.ali.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的mode来加载对应模块，当mode为ali时，会优先加载map.ali.mpx，反之则会加载map.mpx。</p> <p>文件维度条件编译能够与webpack alias结合使用，对于npm包的文件我们并不方便在原本的文件位置创建.ali的条件编译文件，但我们可以通过webpack alias在相同位置创建一个<code>虚拟的</code>.ali文件，并将其指向项目中的其他文件位置。</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// 对于npm包中的文件依赖</span>
+  <span class="token keyword">import</span> npmModule <span class="token keyword">from</span> <span class="token string">'somePackage/lib/index'</span>
+
+  <span class="token comment">// 配置以下alias后，当mode为ali时，会优先加载项目目录中定义的projectRoot/somePackage/lib/index文件</span>
+  <span class="token comment">// vue.config.js</span>
+  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token string-property property">'somePackage/lib/index.ali'</span><span class="token operator">:</span> <span class="token string">'projectRoot/somePackage/lib/index'</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="区块维度条件编译"><a href="#区块维度条件编译" class="header-anchor">#</a> 区块维度条件编译</h3> <p>在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加<code>mode</code>属性定义该区块的目标平台即可，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--编译mode为ali时使用如下区块--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+<span class="token comment">&lt;!--该区块中的所有代码需采用支付宝的技术标准进行编写--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>支付宝环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token comment">&lt;!--其他编译mode时使用如下区块--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>其他环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="代码维度条件编译"><a href="#代码维度条件编译" class="header-anchor">#</a> 代码维度条件编译</h3> <p>如果只有局部的代码存在跨平台差异，mpx同样支持在代码内使用if/else进行局部条件编译，用户可以在js代码和template插值中访问<code>__mpx_mode__</code>获取当前编译mode，进行平台差异逻辑编写，js代码中使用示例如下。</p> <p>除了 <code>__mpx_mode__</code> 这个默认插值以外，有别的环境变量需要的话可以在mpx.plugin.conf.js里通过defs进行配置。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span><span class="token punctuation">(</span>__mpx_mode__ <span class="token operator">===</span> <span class="token string">'ali'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 执行支付宝环境相关逻辑</span>
+<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 执行其他环境相关逻辑</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>template代码中使用示例如下</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--此处的__mpx_mode__不需要在组件中声明数据，编译时会基于当前编译mode进行替换--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'ali'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>支付宝环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span>其他环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>JSON中的条件编译（注意，这个依赖JSON的动态方案，得通过name=&quot;json&quot;这种方式来编写，其实写的是js代码，最终module.exports导出一个可json化的对象即可）：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">const</span> pages <span class="token operator">=</span> __mpx_mode__ <span class="token operator">===</span> <span class="token string">'wx'</span> <span class="token operator">?</span> <span class="token punctuation">[</span>
+  <span class="token string">'main/xxx'</span><span class="token punctuation">,</span>
+  <span class="token string">'sub/xxx'</span>
+<span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token punctuation">[</span>
+  <span class="token string">'test/xxx'</span>
+<span class="token punctuation">]</span> <span class="token comment">// 可以为不同环境动态书写配置</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">usingComponents</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">aComponents</span><span class="token operator">:</span> <span class="token string">'../xxxxx'</span> <span class="token comment">// 可以打注释 xxx组件</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>样式的条件编译：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*
+  @mpx-if (__mpx_env__ === 'someEvn')
+*/</span>
+  <span class="token comment">/* @mpx-if (__mpx_mode__ === 'wx') */</span>
+  <span class="token selector">.backColor</span> <span class="token punctuation">{</span>
+    <span class="token property">background</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+  <span class="token comment">/*
+    @mpx-elif (__mpx_mode__ === 'qq')
+  */</span>
+  <span class="token selector">.backColor</span> <span class="token punctuation">{</span>
+    <span class="token property">background</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+  <span class="token comment">/* @mpx-endif */</span>
+
+  <span class="token comment">/* @mpx-if (__mpx_mode__ === 'swan') */</span>
+  <span class="token selector">.backColor</span> <span class="token punctuation">{</span>
+    <span class="token property">background</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+  <span class="token comment">/* @mpx-endif */</span>
+  <span class="token selector">.textSize</span> <span class="token punctuation">{</span>
+    <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+<span class="token comment">/*
+  @mpx-else
+*/</span>
+<span class="token selector">.backColor</span> <span class="token punctuation">{</span>
+  <span class="token comment">/* @mpx-if (__mpx_mode__ === 'swan') */</span>
+  <span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
+  <span class="token comment">/* @mpx-else */</span>
+  <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
+  <span class="token comment">/* @mpx-endif */</span>
+<span class="token punctuation">}</span>
+<span class="token comment">/*
+  @mpx-endif
+*/</span>
+</code></pre></div><h3 id="属性维度条件编译"><a href="#属性维度条件编译" class="header-anchor">#</a> 属性维度条件编译</h3> <p>属性维度条件编译允许用户在组件上使用 <code>@</code> 和 <code>|</code> 符号来指定某个节点或属性只在某些平台下有效。</p> <p>对于同一个 button 组件，微信小程序支持 <code>open-type=&quot;getUserInfo&quot;</code>，但是支付宝小程序支持 <code>open-type=&quot;getAuthorize&quot;</code>。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。</p> <p>比如业务中需要通过 button 按钮获取用户信息，虽然可以使用代码维度条件编译来解决，但是增加了很多代码量：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
+  <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'wx' || __mpx_mode__ === 'swan'}}<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">bindgetuserinfo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  获取用户信息
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
+  <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'ali'}}<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAuthorize<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  获取用户信息
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>而用属性维度的编译则方便很多：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
+  <span class="token attr-name">open-type@wx|swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">bindgetuserinfo@wx|swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">open-type@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAuthorize<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">scope@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">onTap@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  获取用户信息
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>属性维度的编译也可以对整个节点进行条件编译，例如只想在支付宝小程序中输出某个节点：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span><span class="token punctuation">&gt;</span></span>this is view<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>需要注意使用上述用法时，节点自身在构建时框架不会对节点属性进行平台语法转换，但对于其子节点，框架并不会继承父级节点 mode，会进行正常跨平台语法转换。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--错误示例--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+// srcMode 为 wx 跨端输出 ali 结果为
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>上述示例为错误写法，假如srcMode为微信小程序，用上述写法构建输出支付宝小程序时，父节点 bindtap 不会被转为 onTap，在支付宝平台执行时事件会无响应。</p> <p>正确写法如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--正确示例--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+// 输出 ali 产物
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>有时开发者期望使用 @ali 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--srcMode为 wx，输出 ali 时，bindtap 会被正常转换为 onTap--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@_ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。</p> <p>有时候我们不仅需要对节点属性进行条件编译，可能还需要对节点标签进行条件编译。</p> <p>为此，我们支持了一个特殊属性 <code>mpxTagName</code>，如果节点存在这个属性，我们会在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">mpxTagName@swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>will be cover-view in swan<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="use-env"><a href="#use-env" class="header-anchor">#</a> 通过 env 实现自定义目标环境的条件编译 </h3> <p>Mpx 支持在以上四种条件编译的基础上，通过自定义 env 的形式实现在不同环境下编译产出不同的代码。</p> <p>实例化 MpxWebpackPlugin 的时候，传入配置 env。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span> <span class="token comment">// srcMode为mpx编译的源码平台，目前仅支持wx</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token string">&quot;didi&quot;</span> <span class="token comment">// env为mpx编译的目标环境，需自定义</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="文件维度条件编译-2"><a href="#文件维度条件编译-2" class="header-anchor">#</a> 文件维度条件编译</h4> <p>微信转支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，而且这个地图组件在不同的目标环境中也有很大的差异，这时你可以在相同的位置新建一个 map.ali.didi.mpx 或 map.ali.qingju.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的 mode 和 env 来加载对应模块，当 mode 为 ali，env 为 didi 时，会优先加载 map.ali.didi.mpx、map.ali.mpx，如果没有定义 env，则会优先加载 map.ali.mpx，反之则会加载 map.mpx。</p> <h4 id="区块维度条件编译-2"><a href="#区块维度条件编译-2" class="header-anchor">#</a> 区块维度条件编译</h4> <p>在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加<code>mode</code>或<code>env</code>属性定义该区块的目标平台即可，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--编译mode为ali且env为didi时使用如下区块，优先级最高是4--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span> <span class="token attr-name">env</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>didi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token comment">&lt;!--编译mode为ali时使用如下区块，优先级是3--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token comment">&lt;!--编译env为didi时使用如下区块，优先级是2--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">env</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>didi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token comment">&lt;!--其他环境，优先级是1--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>注意，如果多个相同的区块写相同的 mode 和 env，默认会用最后一个，如：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块会被忽略<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>默认会用这个区块<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h4 id="代码维度条件编译-2"><a href="#代码维度条件编译-2" class="header-anchor">#</a> 代码维度条件编译</h4> <p>如果在 MpxWebpackPlugin 插件初始化时自定义了 env，你可以访问<code>__mpx_env__</code>获取当前编译env，进行环境差异逻辑编写。使用方法与<code>__mpx_mode__</code>相同。</p> <h4 id="属性维度条件编译-2"><a href="#属性维度条件编译-2" class="header-anchor">#</a> 属性维度条件编译</h4> <p>env 属性维度条件编译与 mode 的用法大致相同，使用 <code>:</code> 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 <code>attr@mode:env:env|mode:env</code>，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 <code>:</code> 前缀，形如 <code>attr@:env</code>。</p> <p>对于同一个 button 组件，微信小程序支持 <code>open-type=&quot;getUserInfo&quot;</code>，但是支付宝小程序支持 <code>open-type=&quot;getAuthorize&quot;</code>。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。</p> <p>如果当前编译的目标平台是 wx，以下写法 open-type 属性将被忽略</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@swan:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>如果当前 env 不是 didi，以下写法 open-type 属性也会被忽略</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>如果只想在 mode 为 wx 且 env 为 didi 或 qingju 的环境下使用 open-type 属性，则可以这样写：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@wx:</span><span class="token namespace">didi:</span>qingju</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>env 属性维度的编译同样支持对整个节点或者节点标签名进行条件编译：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">@:</span>didi</span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">mpxTagName@:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">@:</span>didi</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">bindtap@:</span>didi</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="其他注意事项"><a href="#其他注意事项" class="header-anchor">#</a> 其他注意事项</h3> <ul><li>当目标平台为支付宝时，需要启用支付宝最新的component2编译才能保障框架正常工作，关于component2<a href="https://docs.alipay.com/mini/framework/custom-component-overview" target="_blank" rel="noopener noreferrer">点此查看详情<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>；</li> <li>跨平台源码中自定义组件的标签名不能使用驼峰形式<code>myComponent</code>，请使用横杠形式<code>my-component</code>来书写；</li> <li>生成的目标代码中文件名和文件夹名不能带有<code>@</code>符号，目前媒体文件和原生自定义组件在编译时不会修改文件名，需要重点关注。</li></ul> <h2 id="跨平台输出web"><a href="#跨平台输出web" class="header-anchor">#</a> 跨平台输出web</h2> <p>从2.3.0版本开始，Mpx开始支持将已有项目跨平台输出web平台中运行的能力，目前输出web能力完备，能够支持直接转换大型复杂项目，我们会持续对输出web的能力进行优化，不断的建全更全面的适用范围和开发体验。</p> <h3 id="技术实现"><a href="#技术实现" class="header-anchor">#</a> 技术实现</h3> <p>与小程序平台间的差异相比，web平台和小程序平台间的差异要大很多，小程序相当于是基于web技术的上层封装，所以不同于我们跨平台输出其他小程序平台时以编译转换为主的思路，在输出web时，我们更多地采用了封装的方式来抹平组件/Api和底层环境的差异，与当前大部分的跨平台框架相仿。但与当前大部分跨平台框架以web MVVM框架为base输出到小程序上运行的思路不同，我们是以Mpx小程序增强语法为基础输出到web中运行，前面说过小程序本身是基于web技术进行的实现，小程序-&gt;web的转换在可行性和兼容性上会好一些。</p> <p>在具体实现上，Mpx项目输出到web中运行时在组件化和路由层面都是基于Vue生态实现，所以可以将Mpx的跨端输出产物整合到既有的Vue项目中，或者在条件编译中直接使用Vue语法进行web端的实现。</p> <h3 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h3> <p>使用@mpxjs/cli创建新项目时选择跨平台并选择输出web后，即可生成可输出web的示例项目，运行<code>npm run build:web</code>，就会在dist/web下输出构建后的web项目，并启动静态服务预览运行。</p> <h3 id="支持范围"><a href="#支持范围" class="header-anchor">#</a> 支持范围</h3> <p>目前对输出web的通用能力支持已经非常完备，下列表格中显示了当前版本中已支持的能力范围</p> <h4 id="模板指令"><a href="#模板指令" class="header-anchor">#</a> 模板指令</h4> <table><thead><tr><th style="text-align:left;">指令名称</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">Mustache数据绑定</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:for</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:for-item</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:for-index</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:key</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:if</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:elif</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:else</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:model</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:model-prop</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:model-event</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:model-value-path</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:model-filter</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:class</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:style</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:ref</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:show</td> <td>是</td></tr></tbody></table> <h4 id="事件绑定方式"><a href="#事件绑定方式" class="header-anchor">#</a> 事件绑定方式</h4> <table><thead><tr><th style="text-align:left;">绑定方式</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">bind</td> <td>是</td></tr> <tr><td style="text-align:left;">catch</td> <td>是</td></tr> <tr><td style="text-align:left;">capture-bind</td> <td>是</td></tr> <tr><td style="text-align:left;">capture-catch</td> <td>是</td></tr></tbody></table> <h4 id="事件名称"><a href="#事件名称" class="header-anchor">#</a> 事件名称</h4> <table><thead><tr><th style="text-align:left;">事件名称</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">tap</td> <td>是</td></tr> <tr><td style="text-align:left;">longpress</td> <td>是</td></tr> <tr><td style="text-align:left;">longtap</td> <td>是</td></tr></tbody></table> <p>web同名事件默认全部支持，已支持组件的特殊事件默认为支持，不支持的情况下会在编译时抛出异常</p> <h4 id="基础组件"><a href="#基础组件" class="header-anchor">#</a> 基础组件</h4> <table><thead><tr><th style="text-align:left;">组件名称</th> <th>是否支持</th> <th>说明</th></tr></thead> <tbody><tr><td style="text-align:left;">audio</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">block</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">button</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">canvas</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">checkbox</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">checkbox-group</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">cover-view</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">form</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">image</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">input</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">movable-area</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">movable-view</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">navigator</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">picker</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">picker-view</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">progress</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">radio</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">radio-group</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">rich-text</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">scroll-view</td> <td>是</td> <td>scroll-view 输出 web 底层滚动依赖 <a href="https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html" target="_blank" rel="noopener noreferrer">BetterScroll<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 实现，支持额外传入以下属性： <br><br><code>scroll-options</code>: object <br>可重写 BetterScroll 初始化基本配置<br>若出现无法滚动，可尝试手动传入 <code>{ observeDOM: true }</code> <br><br> <code>update-refresh</code>: boolean <br>Vue updated 钩子函数触发时，可用于重新计算 BetterScroll<br><br>tips: 当使用下拉刷新相关属性时，由于 Vue 数据响应机制的限制，在 web 侧可能出现下拉组件状态无法复原的问题，可尝试在 <code>refresherrefresh</code> 事件中，手动将 refresher-triggered 属性值设置为 true</td></tr> <tr><td style="text-align:left;">swiper</td> <td>是</td> <td>swiper 输出 web 底层滚动依赖 <a href="https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html" target="_blank" rel="noopener noreferrer">BetterScroll<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 实现，支持额外传入以下属性： <br><br><code>scroll-options</code>: object <br>可重写 BetterScroll 初始化基本配置<br>当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 <code>{ eventPassthrough: vertical }</code>，反之可将 eventPassthrough 设置为 <code>horizontal</code></td></tr> <tr><td style="text-align:left;">swiper-item</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">switch</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">slider</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">text</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">textarea</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">video</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">view</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">web-view</td> <td>是</td> <td></td></tr></tbody></table> <p>在项目的app.json 中配置 &quot;style&quot;: &quot;v2&quot;启用新版的组件样式，涉及的组件有 button icon radio checkbox switch slider在输出web时也与小程序保持了一致</p> <h4 id="生命周期"><a href="#生命周期" class="header-anchor">#</a> 生命周期</h4> <table><thead><tr><th style="text-align:left;">生命周期名称</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">onLaunch</td> <td>是</td></tr> <tr><td style="text-align:left;">onLoad</td> <td>是</td></tr> <tr><td style="text-align:left;">onReady</td> <td>是</td></tr> <tr><td style="text-align:left;">onShow</td> <td>是</td></tr> <tr><td style="text-align:left;">onHide</td> <td>是</td></tr> <tr><td style="text-align:left;">onUnload</td> <td>是</td></tr> <tr><td style="text-align:left;">onError</td> <td>是</td></tr></tbody></table> <p>onServerPrefetch｜是
+created|是
+attached|是
+ready|是
+detached|是
+updated|是
+serverPrefetch|是</p> <h4 id="应用级事件"><a href="#应用级事件" class="header-anchor">#</a> 应用级事件</h4> <table><thead><tr><th style="text-align:left;">应用级事件名称</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">onPageNotFound</td> <td>是</td></tr> <tr><td style="text-align:left;">onPageScroll</td> <td>是</td></tr> <tr><td style="text-align:left;">onPullDownRefresh</td> <td>是</td></tr> <tr><td style="text-align:left;">onReachBottom</td> <td>是</td></tr> <tr><td style="text-align:left;">onResize</td> <td>是</td></tr> <tr><td style="text-align:left;">onTabItemTap</td> <td>是</td></tr></tbody></table> <h4 id="组件配置"><a href="#组件配置" class="header-anchor">#</a> 组件配置</h4> <table><thead><tr><th style="text-align:left;">配置项</th> <th>支持度</th></tr></thead> <tbody><tr><td style="text-align:left;">properties</td> <td>部分支持，observer不支持，请使用watch代替</td></tr> <tr><td style="text-align:left;">data</td> <td>支持</td></tr> <tr><td style="text-align:left;">watch</td> <td>支持</td></tr> <tr><td style="text-align:left;">computed</td> <td>支持</td></tr> <tr><td style="text-align:left;">relations</td> <td>支持</td></tr> <tr><td style="text-align:left;">methods</td> <td>支持</td></tr> <tr><td style="text-align:left;">mixins</td> <td>支持</td></tr> <tr><td style="text-align:left;">pageLifetimes</td> <td>支持</td></tr> <tr><td style="text-align:left;">observers</td> <td>不支持，请使用watch代替</td></tr> <tr><td style="text-align:left;">behaviors</td> <td>不支持，请使用mixins代替</td></tr></tbody></table> <h4 id="组件api"><a href="#组件api" class="header-anchor">#</a> 组件API</h4> <table><thead><tr><th style="text-align:left;">api名称</th> <th>支持度</th></tr></thead> <tbody><tr><td style="text-align:left;">triggerEvent</td> <td>支持</td></tr> <tr><td style="text-align:left;">$nextTick</td> <td>支持</td></tr> <tr><td style="text-align:left;">createSelectorQuery/selectComponent</td> <td>支持</td></tr></tbody></table> <h4 id="全局api"><a href="#全局api" class="header-anchor">#</a> 全局API</h4> <table><thead><tr><th style="text-align:left;">api名称</th> <th>支持度</th></tr></thead> <tbody><tr><td style="text-align:left;">navigateTo</td> <td>支持</td></tr> <tr><td style="text-align:left;">navigateBack</td> <td>支持</td></tr> <tr><td style="text-align:left;">redirectTo</td> <td>支持</td></tr> <tr><td style="text-align:left;">request</td> <td>支持</td></tr> <tr><td style="text-align:left;">connectSocket</td> <td>支持</td></tr> <tr><td style="text-align:left;">SocketTask</td> <td>支持</td></tr> <tr><td style="text-align:left;">EventChannel</td> <td>支持</td></tr> <tr><td style="text-align:left;">createSelectorQuery</td> <td>支持</td></tr> <tr><td style="text-align:left;">base64ToArrayBuffer</td> <td>支持</td></tr> <tr><td style="text-align:left;">arrayBufferToBase64</td> <td>支持</td></tr> <tr><td style="text-align:left;">nextTick</td> <td>支持</td></tr> <tr><td style="text-align:left;">set</td> <td>支持</td></tr> <tr><td style="text-align:left;">setNavigationBarTitle</td> <td>支持</td></tr> <tr><td style="text-align:left;">setNavigationBarColor</td> <td>支持</td></tr> <tr><td style="text-align:left;">setStorage</td> <td>支持</td></tr> <tr><td style="text-align:left;">setStorageSync</td> <td>支持</td></tr> <tr><td style="text-align:left;">getStorage</td> <td>支持</td></tr> <tr><td style="text-align:left;">getStorageSync</td> <td>支持</td></tr> <tr><td style="text-align:left;">getStorageInfo</td> <td>支持</td></tr> <tr><td style="text-align:left;">getStorageInfoSync</td> <td>支持</td></tr> <tr><td style="text-align:left;">removeStorage</td> <td>支持</td></tr> <tr><td style="text-align:left;">removeStorageSync</td> <td>支持</td></tr> <tr><td style="text-align:left;">clearStorage</td> <td>支持</td></tr> <tr><td style="text-align:left;">clearStorageSync</td> <td>支持</td></tr> <tr><td style="text-align:left;">getSystemInfo</td> <td>支持</td></tr> <tr><td style="text-align:left;">getSystemInfoSync</td> <td>支持</td></tr> <tr><td style="text-align:left;">showModal</td> <td>支持</td></tr> <tr><td style="text-align:left;">showToast</td> <td>支持</td></tr> <tr><td style="text-align:left;">hideToast</td> <td>支持</td></tr> <tr><td style="text-align:left;">showLoading</td> <td>支持</td></tr> <tr><td style="text-align:left;">hideLoading</td> <td>支持</td></tr> <tr><td style="text-align:left;">onWindowResize</td> <td>支持</td></tr> <tr><td style="text-align:left;">offWindowResize</td> <td>支持</td></tr> <tr><td style="text-align:left;">createAnimation</td> <td>支持</td></tr></tbody></table> <h4 id="json配置"><a href="#json配置" class="header-anchor">#</a> JSON配置</h4> <table><thead><tr><th style="text-align:left;">配置项</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">backgroundColor</td> <td>是</td></tr> <tr><td style="text-align:left;">backgroundTextStyle</td> <td>是</td></tr> <tr><td style="text-align:left;">disableScroll</td> <td>是</td></tr> <tr><td style="text-align:left;">enablePullDownRefresh</td> <td>是</td></tr> <tr><td style="text-align:left;">onReachBottomDistance</td> <td>是</td></tr> <tr><td style="text-align:left;">packages</td> <td>是</td></tr> <tr><td style="text-align:left;">pages</td> <td>是</td></tr> <tr><td style="text-align:left;">navigationBarBackgroundColor</td> <td>是</td></tr> <tr><td style="text-align:left;">navigationBarTextStyle</td> <td>是</td></tr> <tr><td style="text-align:left;">navigationBarTitleText</td> <td>是</td></tr> <tr><td style="text-align:left;">networkTimeout</td> <td>是</td></tr> <tr><td style="text-align:left;">subpackages</td> <td>是</td></tr> <tr><td style="text-align:left;">tabBar</td> <td>是</td></tr> <tr><td style="text-align:left;">usingComponents</td> <td>是</td></tr></tbody></table> <h4 id="拓展能力"><a href="#拓展能力" class="header-anchor">#</a> 拓展能力</h4> <table><thead><tr><th style="text-align:left;">能力</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">fetch</td> <td>是</td></tr> <tr><td style="text-align:left;">i18n</td> <td>是</td></tr></tbody></table> <h4 id="小程序其他原生能力"><a href="#小程序其他原生能力" class="header-anchor">#</a> 小程序其他原生能力</h4> <table><thead><tr><th style="text-align:left;">能力</th> <th>支持度</th></tr></thead> <tbody><tr><td style="text-align:left;">wxs</td> <td>支持</td></tr> <tr><td style="text-align:left;">animation</td> <td>支持组件的animation属性，支持所有animation对象方法(export、step、width、height、rotate、scale、skew、translate等等)</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/async-subpackage.html" class="prev">
+        分包异步化
+      </a></span> <span class="next"><a href="/guide/advance/i18n.html">
+        国际化i18n
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/73.171571e4.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/plugin.html b/docs-vuepress/.vuepress/dist/guide/advance/plugin.html
new file mode 100644
index 0000000000..19aa35df50
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/plugin.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>小程序插件 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/74.3d5cfaba.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" aria-current="page" class="active sidebar-link">小程序插件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="小程序插件"><a href="#小程序插件" class="header-anchor">#</a> 小程序插件</h1> <p>插件，是可被添加到小程序内直接使用的功能组件，是对一组 js 接口、自定义组件或页面的封装，。开发者可以像开发小程序一样开发一个插件，供其他小程序使用。同时，小程序开发者可直接在小程序内使用插件，无需重复开发，但是在使用第三那个插件时，无法看到插件的代码。插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用。</p> <p>开发小程序插件，大致要经过 开通插件功能，填写开发信息，提交审,发布，管理插件使用申请。同时在原生小程序使用插件，要先发出插件申请，等待使用申请通过，插件所有者还可以进行拒绝。
+原生小程序开发插件请移步：</p> <ul><li><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html" target="_blank" rel="noopener noreferrer">微信小程序插件开发<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://opendocs.alipay.com/mini/plugin/create-plugin" target="_blank" rel="noopener noreferrer">支付宝小程序插件开发<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>新建插件类型的项目后，如果创建示例项目，则项目中将包含三个目录：</p> <ul><li>plugin 目录：插件代码目录。</li> <li>miniprogram 目录：放置一个小程序，用于调试插件。</li> <li>doc 目录：用于放置插件开发文档。</li></ul> <p>，插件会同时有多个线上版本，由使用插件的小程序决定具体使用的版本号。</p> <h3 id="如何编写一个插件"><a href="#如何编写一个插件" class="header-anchor">#</a> 如何编写一个插件</h3> <p>推荐使用 mpx 官方脚手架 @mpxjs/cli 创建一个小程序插件项目来快速的进入插件开发阶段，首先全局安装 @mpxjs/cli</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">npm</span> i <span class="token parameter variable">-g</span> @mpxjs/cli
+</code></pre></div><p>然后使用 cli 初始化项目</p> <div class="language-sh extra-class"><pre class="language-sh"><code>mpx create <span class="token operator">&lt;</span>project-name<span class="token operator">&gt;</span>
+? 请选择小程序项目所属平台（目前仅微信下支持跨平台输出） wx
+? 是否需要跨小程序平台 No
+? 是否需要使用小程序云开发能力 No
+? 是否是个插件项目?（不清楚请选 No ！什么是插件项目请看微信官方文档！） Yes
+? 是否需要typescript No
+? 项目描述 A mpx project
+? 请输入小程序的Appid touristappid
+</code></pre></div><p><strong>文件目录</strong></p> <div class="language- extra-class"><pre class="language-text"><code>  src
+  |-- miniprogram // 目录：放置一个小程序，用于调试插件。
+  |   --pages
+  |   --app.mpx // 引入插件调试
+  |-- plugin // 目录：插件代码目录
+  |   --components // 插件组件
+  |     -- list.mpx // 插件提供的列表组件
+  |   --plugin.json // 插件配置文件
+</code></pre></div><p>我们在 plugin/components/list.mpx 中开发插件中的列表组件，开发完成后，在plugin.json中我们向使用者小程序开放的所有自定义组件、页面和 js 接口，格式如下：</p> <p><strong>代码示例：</strong></p> <div class="language-html extra-class"><pre class="language-html"><code>{
+  &quot;publicComponents&quot;: {
+    &quot;list&quot;: &quot;./components/list&quot; // 使用mpx 中的webpack 路径引入规范
+  },
+  &quot;pages&quot;: {
+    &quot;hello-page&quot;: &quot;./pages/hello-page&quot;
+  }
+}
+</code></pre></div><p>运行 <strong>npm run build/serve</strong> 构建小程序产物，在 dist 文件夹下，生成最终的小程序插件产物，使用微信开发者工具，打开代码片段菜单栏，选择插件模式，打开 dist 文件夹。</p> <p>我们可以像小程序一样预览和上传，但插件没有体验版，同时我们通常将 miniprogram 下的代码当做使用插件的小程序代码，来进行插件的调试和测试。</p> <p>在开发完插件之后，我们可以上传插件代码，在小程序管理后台进行提交发布审核，审核通过后，就可以提供给第三方小程序使用我们的插件了。</p> <p>使用 mpx 开发插件的优势相似于使用 mpx 开发小程序项目，可以使用 mpx 的各种增强特性以及跨平台输出的特性，提高开发效率和插件性能。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/ability-compatible.html" class="prev">
+        原生能力兼容
+      </a></span> <span class="next"><a href="/guide/advance/custom-output-path.html">
+        自定义路径
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/74.3d5cfaba.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/progressive.html b/docs-vuepress/.vuepress/dist/guide/advance/progressive.html
new file mode 100644
index 0000000000..7dc46cdf63
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/progressive.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>原生渐进迁移 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/75.093d716c.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" aria-current="page" class="active sidebar-link">原生渐进迁移</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/progressive.html#原生接入" class="sidebar-link">原生接入</a></li><li class="sidebar-sub-header"><a href="/guide/advance/progressive.html#原生page支持" class="sidebar-link">原生page支持</a></li><li class="sidebar-sub-header"><a href="/guide/advance/progressive.html#原生导出" class="sidebar-link">原生导出</a></li></ul></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="原生渐进迁移"><a href="#原生渐进迁移" class="header-anchor">#</a> 原生渐进迁移</h1> <p><strong>已有项目</strong> 期望接入 Mpx，可根据项目或人力情况选择如何迁移，Mpx 不要求用户一次性用上框架的所有东西。</p> <ol><li>项目初始期：可以考虑一次性转为 Mpx，此时迁移成本比较低</li> <li>项目成熟期：若人力有限，可选择逐步将原生小程序转为Mpx，而且 <strong><code>不需要对原有代码做全局重写</code></strong>。可参考此demo：<a href="https://github.com/didi/mpx/tree/master/examples/mpx-progressive" target="_blank" rel="noopener noreferrer">Mpx渐进接入demo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。
+<ul><li>可以保持原有代码不变，新的组件、页面期望使用 Mpx 某些特性时才引入 Mpx。（推荐新模块引 Mpx，老模块逐步迁移 Mpx）</li> <li>用 Mpx 编写新的页面、组件，再局部导出对应的页面、组件，反向应用到现有的原生小程序项目中。见<a href="#%E5%AF%BC%E5%87%BA%E5%8E%9F%E7%94%9F">导出原生</a>一节。(建议优先考虑老项目渐进改为 Mpx，而不是反向 Mpx 输出原生小程序的模式)</li></ul></li></ol> <h2 id="原生接入"><a href="#原生接入" class="header-anchor">#</a> 原生接入</h2> <p>有些时候，我们需要在<code>Mpx</code>工程中使用原生小程序组件:</p> <ul><li>通过<code>npm</code>引用安装第三包</li> <li>将第三方包源码拷贝到本地<code>src</code>目录下</li></ul> <blockquote><p>注：Mpx并不限制第三方包的格式。开发者可以自己参考小程序官方的<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/trdparty.html" target="_blank" rel="noopener noreferrer">开发第三方自定义组件<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <h3 id="原理"><a href="#原理" class="header-anchor">#</a> 原理</h3> <p>根据<code>unsingComponents</code>中设定的路径，<code>Mpx</code>会去查找包入口的js文件。然后提取入口文件所在的<strong>目录</strong>中的<code>js</code> <code>json</code> <code>wxss</code> <code>wxml</code>进行编译</p> <p>编译带来的好处是，常规的拷贝操作，会造成组件内部的依赖缺失，以及冗余代码被打包。而执行了编译，使得<code>Mpx</code>可以精确的收集依赖，这表现在：</p> <ul><li><code>js</code>文件中的依赖也会被打包，没有被加载的依赖库不会打包，减小体积</li> <li><code>json</code>文件的<code>usingComponents</code>会被解析，因此原生组件内部可以再引用其他原生组件，甚至是mpx组件</li> <li><code>wxss</code>中引用外部样式</li> <li><code>wxml</code>中的图片资源会被打包</li></ul> <blockquote><p>例如:使用第三方组件库时，很多组件可能并未使用，如果按照官方给出的组件库使用方式，会将整个组件库放进项目。<br>
+而采用Mpx这种方式则只会引入使用了的组件，所以如果你喜欢vant的按钮，iview的输入框，ColorUI的布局，欢迎尝试mpx。<br>
+（本段内容具有时效性，未来微信可能会有优化，毕竟一开始微信连npm都不支持）</p></blockquote> <h3 id="例子"><a href="#例子" class="header-anchor">#</a> 例子</h3> <p><strong>文件目录</strong></p> <div class="language- extra-class"><pre class="language-text"><code>node_modules
+|-- npm-a-wx-component // npm安装
+|   --package.json
+|   --src
+|     --index.js
+|     --index.json
+|     --index.wxss
+|     --index.wxml
+|-- npm-b-wx-component // npm安装
+|   --package.json
+|   --src
+|     --index.js
+|     --index.json
+|     --index.wxss
+|     --index.wxml
+component
+│-- container.mpx 
+│-- com-a.mpx 
+|-- src-wx-component // 手动拷贝
+|  --index.js
+|  --index.json
+|  --index.wxss
+|  --index.wxml
+
+</code></pre></div><p><strong>container.mpx</strong></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- mpx组件 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>com-a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>com-a</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- npm安装的原生组件 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>npm-a-wx-component</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>npm-a-wx-component</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- 手动拷贝到工程的原生组件 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>src-wx-component</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>src-wx-component</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;com-a&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./com-a&quot;</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;npm-a-wx-component&quot;</span><span class="token operator">:</span> <span class="token string">&quot;npm-a-wx-component&quot;</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;src-wx-component&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./src-wx-component&quot;</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>node_modules/npm-a-wx-component/src/index.wxml</strong></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>this is a native component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- 原生组件内部使用原生组件 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>npm-b-wx-component</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>npm-b-wx-component</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><strong>node_modules/npm-a-wx-component/src/index.json</strong></p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
+  <span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;npm-b-wx-component&quot;</span><span class="token operator">:</span> <span class="token string">&quot;npm-b-wx-component&quot;</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="原生page支持"><a href="#原生page支持" class="header-anchor">#</a> 原生page支持</h2> <p>原生自定义组件的支持已经基本能保证第三方 UI 库和 Mpx 的完美结合，但如果是用户存在已经开发好的小程序，在后续的迭代中发现了 Mpx 想使用，就需要用户手工将4个文件变成 Mpx 文件，这不够友好。</p> <p>Mpx 提供了对原生页面的支持，允许项目中存在原生小程序文件（wxml,js,json,wxss）和 Mpx 文件，两者可以混合使用，通过 webpack 的构建将两者完美混合在一起生成最终的 dist。</p> <p>使用方式和组件相似。</p> <h2 id="原生导出"><a href="#原生导出" class="header-anchor">#</a> 原生导出</h2> <p>通过导出原生能力，你可以将一个 Mpx 项目融回到原生小程序项目中。有两种做法：</p> <ul><li>一是局部导出部分页面、组件</li> <li>二是完整导出一个 Mpx 项目。</li></ul> <h3 id="导出部分页面-组件"><a href="#导出部分页面-组件" class="header-anchor">#</a> 导出部分页面/组件</h3> <p>使用 Mpx 开发的页面/组件也可以局部导出为纯粹的普通的原生小程序页面/组件，整合到已有的原生小程序中。</p> <ol><li>修改 webpack config 中 entry 一项，将 app 改为对应的页面/组件即可。</li></ol> <p>在路径后追加 ?isPage 来声明独立页面构建，构建产物为该页面的独立原生代码,在路径后追加 ?isComponent 来声明独立组件构建，构建产物为该组件的独立原生代码。</p> <p>请参考下面的例子，<code>注意resolve时候最后的query不可以省略，一定要按正确的类型声明这是一个组件or页面。</code></p> <p>例子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// </span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseWebpackConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'main-compile'</span><span class="token punctuation">,</span>
+  <span class="token comment">// entry point of our application</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 此处以mpx脚手架生成的项目为例</span>
+    
+    <span class="token comment">// before</span>
+    <span class="token comment">// app: resolveSrc('app.mpx')</span>
+    
+    <span class="token comment">// after，这里&quot;pages/dindex&quot;代表将原页面导出到output目录下的pages目录，文件名改为dindex.*</span>
+    <span class="token string-property property">'pages/dindex'</span><span class="token operator">:</span> <span class="token function">resolveSrc</span><span class="token punctuation">(</span><span class="token string">'./pages/index.mpx?isPage'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// ?后标识导出类型</span>
+    <span class="token string-property property">'components/dlist'</span><span class="token operator">:</span> <span class="token function">resolveSrc</span><span class="token punctuation">(</span><span class="token string">'./components/list.mpx?isComponent'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><ol start="2"><li>执行 webpack 打包命令</li> <li>拷贝打包后 dist 里所有文件到原生微信小程序项目根目录即可正常工作。</li></ol> <h3 id="完整导出"><a href="#完整导出" class="header-anchor">#</a> 完整导出</h3> <p>举例：假如我们使用 Mpx 开发了一个完整的项目，这个项目可能包含多个页面，这些页面组合完成一个完整的功能。一般可能是公共需求，比如登录/用户中心等公共模块</p> <p>如果其它接入方想复用这一公共模块，考虑有以下两种情形</p> <ul><li>接入方也是 Mpx 框架开发的项目，直接迁移</li> <li>接入方是原生开发，这时我们希望能将整个项目完整导出成原生，并让接入方顺利使用。</li></ul> <blockquote><p>其实观察下 Mpx 项目的打包结构，结构是非常简单的，页面/组件都很规矩地放在对应文件夹里的，所以删掉app.json/app.js/app.wxss/project.config.json几个文件后直接整个拷贝即可。</p></blockquote> <p>完整导出整个项目的做法可以是这样：</p> <ol><li><p>确认页面路径不要冲突，一般这种公共模块项目，路径上就不要占据<code>/pages/index/index</code>，页面路径Mpx是不会修改的，所以定一个<code>/pages/{模块名}/{页面名}</code>就好。</p></li> <li><p>app.*的内容都要删掉的，所以全局样式都应该写在独立的文件中（wxss），全局配置有什么特殊的要告知接入方（json），因为App.js会被舍弃，所以入口js要抽出来(js)。</p></li> <li><p>如果有要导出的入口文件，需要给output增加配置：</p></li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.conf</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">app</span><span class="token operator">:</span> <span class="token function">resolveSrc</span><span class="token punctuation">(</span><span class="token string">'app.mpx'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">index</span><span class="token operator">:</span> <span class="token function">resolveSrc</span><span class="token punctuation">(</span><span class="token string">'index.js'</span><span class="token punctuation">)</span> <span class="token comment">// 导出的入口文件，若没有可不写</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">libraryTarget</span><span class="token operator">:</span> <span class="token string">'commonjs2'</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">libraryExport</span><span class="token operator">:</span> <span class="token string">'default'</span> <span class="token comment">// 若export default导出需要写这个,module.exports可省略</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// ... 略</span>
+<span class="token punctuation">}</span>
+</code></pre></div><ol start="4"><li>整个复制进<strong>接入方</strong>的项目里，注册对应的页面，然后就可以正常使用了！</li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/image-process.html" class="prev">
+        图像资源处理
+      </a></span> <span class="next"><a href="/guide/advance/ability-compatible.html">
+        原生能力兼容
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/75.093d716c.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/provide-inject.html b/docs-vuepress/.vuepress/dist/guide/advance/provide-inject.html
new file mode 100644
index 0000000000..b6d04c03a9
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/provide-inject.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>依赖注入（Provide/Inject） | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/76.50d84c61.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" aria-current="page" class="active sidebar-link">依赖注入（Provide/Inject）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/provide-inject.html#适用场景" class="sidebar-link">适用场景</a></li><li class="sidebar-sub-header"><a href="/guide/advance/provide-inject.html#provide-提供" class="sidebar-link">Provide 提供</a></li><li class="sidebar-sub-header"><a href="/guide/advance/provide-inject.html#inject-注入" class="sidebar-link">Inject 注入</a></li><li class="sidebar-sub-header"><a href="/guide/advance/provide-inject.html#避免注入名潜在冲突" class="sidebar-link">避免注入名潜在冲突</a></li><li class="sidebar-sub-header"><a href="/guide/advance/provide-inject.html#ts-类型支持" class="sidebar-link">TS 类型支持</a></li><li class="sidebar-sub-header"><a href="/guide/advance/provide-inject.html#跨端差异" class="sidebar-link">跨端差异</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="依赖注入-provide-inject"><a href="#依赖注入-provide-inject" class="header-anchor">#</a> 依赖注入（Provide/Inject）</h1> <h2 id="适用场景"><a href="#适用场景" class="header-anchor">#</a> 适用场景</h2> <p>通常情况下，从父组件向子组件传递数据时，我们会使用 props 向下传递。如果在一颗组件层级嵌套很深的组件树中，某个深层的子组件依赖一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链路逐级传递下去，这就是 <strong>prop 逐级透传（prop-drilling）</strong> 问题。</p> <p>使用 <code>provide</code> 和 <code>inject</code> 可以帮助我们解决这一麻烦问题：一个父组件相对于其所有的后代组件，会作为<strong>依赖提供者</strong>。任何后代的组件树，无论层级有多深，都可以<strong>注入</strong>由父组件提供给整条链路的依赖。</p> <p><img src="https://s3-gz01.didistatic.com/packages-mait/img/bLipGWmlcm1732166788438.png" alt="组件间 provide-inject 示意图"></p> <h2 id="provide-提供"><a href="#provide-提供" class="header-anchor">#</a> Provide 提供</h2> <h3 id="组合式语法"><a href="#组合式语法" class="header-anchor">#</a> 组合式语法</h3> <p>在组合式语法中，需要使用到 <code>provide()</code> 函数，<code>provide()</code> 函数接收两个必填参数：</p> <ol><li>第一个参数表示<strong>注入名</strong>，是一个字符串或者 <code>Symbol</code>。后代组件会用注入名来查找期望注入的值，一个组件可以多次调用 <code>provide()</code>，使用不同的注入名，注入不同的依赖值。使用 <code>Symbol</code> 作为注入名时，只能使用组合式语法而非选项式语法。</li> <li>第二个参数表示<strong>提供值</strong>，值可以是任意类型，包括响应式的状态，比如一个 <code>ref</code>、<code>reactive</code> 或者 <code>computed</code> 计算值。</li></ol> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token operator">&lt;</span>script setup<span class="token operator">&gt;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> computed<span class="token punctuation">,</span> provide<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token comment">// 静态数据</span>
+<span class="token function">provide</span><span class="token punctuation">(</span><span class="token comment">/* 注入名 */</span> <span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token comment">/* 值 */</span> <span class="token string">'hello!'</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 使用 Symbol 作为注入名</span>
+<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token function">provide</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token string">'hello!'</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 响应式数据</span>
+<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> double <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
+<span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">'count'</span><span class="token punctuation">,</span> count<span class="token punctuation">)</span>
+<span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">'double'</span><span class="token punctuation">,</span> double<span class="token punctuation">)</span>
+
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><h3 id="选项式语法"><a href="#选项式语法" class="header-anchor">#</a> 选项式语法</h3> <p>选项式语法的 <code>setup()</code> 中，用法和组合式 API 一致。另外针对选项式语法，我们也提供了 <code>provide</code> 选项，它是<strong>一个对象或返回一个对象的函数</strong>。</p> <p>对于 <code>provide</code> 对象上的每一个属性，后代组件会用其 key 为注入名查找期望注入的值，属性的值就是要提供的数据。</p> <p>如果我们需要提供依赖当前组件实例的状态 (比如在 <code>data</code> 属性中定义的数据)，那么需要使用函数形式的 <code>provide</code> 选项。需要注意的是，这 <strong>并不会</strong> 使注入保持响应性，如果需要保证注入方和供给方之间的响应性链接，我们需要使用 <code>computed()</code> 函数提供一个计算属性。</p> <div class="language-ts extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-ts"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  data<span class="token operator">:</span> <span class="token punctuation">{</span>
+    count<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 1. 静态数据可以选择直接使用对象形式</span>
+  provide<span class="token operator">:</span> <span class="token punctuation">{</span>
+    message<span class="token operator">:</span> <span class="token string">'hello'</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 2. 选择使用函数的形式，可以访问到 `this`</span>
+  <span class="token function">provide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      count<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count
+      <span class="token comment">// 显式提供一个计算属性</span>
+      message<span class="token operator">:</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><h3 id="应用级顶层-provide"><a href="#应用级顶层-provide" class="header-anchor">#</a> 应用级顶层 provide</h3> <p>前面介绍的是在一个组件中提供依赖，我们还可以在整个应用层面提供依赖，这样整个应用中所有组件都可以使用。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// 应用层 provide</span>
+  <span class="token function">provide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">'appMessage'</span><span class="token operator">:</span> <span class="token string">'provide from App scope!'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="inject-注入"><a href="#inject-注入" class="header-anchor">#</a> Inject 注入</h2> <h3 id="组合式语法"><a href="#组合式语法" class="header-anchor">#</a> 组合式语法</h3> <p><code>inject()</code> 函数最多接收三个参数：</p> <ul><li>第一个参数必填，表示<strong>注入名</strong>，字符串类型。</li> <li>第二个参数可选，表示<strong>默认值</strong>。
+<ul><li>如果在注入一个值时不确定是否有提供者，那么应该声明一个默认值。如果既没有提供者也没有默认值，则会抛出一个运行时警告。</li></ul></li> <li>第三个参数可选，表示<strong>是否将默认值视为工厂函数</strong>，布尔类型。
+<ul><li>某些场景下，默认值可能需要通过调用一个函数或初始化一个类来生成，或者某些非基础类型数据创建开销比较大，请使用工厂函数来创建默认值。</li></ul></li></ul> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token operator">&lt;</span>script setup<span class="token operator">&gt;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> inject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token comment">// 注入 message 依赖</span>
+<span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">)</span>
+<span class="token comment">// 创建默认值</span>
+<span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token string">'default value'</span><span class="token punctuation">)</span>
+<span class="token comment">// 使用工厂函数创建默认值</span>
+<span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'key'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">new</span> <span class="token class-name">ExpensiveClass</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>如果提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值。这使得注入方能够通过 ref 对象和提供方保持响应性链接。</p> <h3 id="选项式语法"><a href="#选项式语法" class="header-anchor">#</a> 选项式语法</h3> <p>选项式语法的 <code>setup()</code> 中，用法和组合式 API 一致。另外针对选项式语法，我们也提供了 <code>inject</code> 选项，它是<strong>一个数组或一个对象</strong>。</p> <ol><li><strong>数组</strong>形式使用。数组中的每一项对应一个注入名，注入的属性会以同名的 key 暴露到组件实例上。如下示例中，注入名 <code>&quot;message&quot;</code> 在注入后以 <code>this.message</code> 的形式暴露。另外，<code>inject</code> 会在组件自身的状态<strong>之前</strong>被解析，意味着你可以在 <code>data()</code> 中访问到注入的属性。</li></ol> <div class="language-ts extra-class"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br></div><pre class="language-ts"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// 数组形式使用 `inject` 选项</span>
+  inject<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token string">'count'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 可以在 `data()` 中访问到注入的属性</span>
+      fullMessage<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">,</span>
+      fullCount<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><ol start="2"><li><strong>对象</strong>形式使用。相比数组形式，对象形式支持注入<strong>别名</strong>和<strong>默认值</strong>。如下示例，通过 <code>from</code> 属性指定原注入名，通过 <code>default</code> 属性指定默认值。</li></ol> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  inject<span class="token operator">:</span> <span class="token punctuation">{</span>
+    myCount<span class="token operator">:</span> <span class="token string">'count'</span><span class="token punctuation">,</span> <span class="token comment">// 按注入名 'count' 注入</span>
+    message<span class="token operator">:</span> <span class="token punctuation">{</span>
+      from<span class="token operator">:</span> <span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token comment">// 'message' 是原注入名，当与原注入名同名时，这个属性是可选的</span>
+      <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'default value'</span> <span class="token comment">// 默认值</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    user<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 与原注入名 'user' 同名</span>
+      <span class="token function-variable function">default</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Wang'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 使用工厂函数创建默认值</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><h2 id="避免注入名潜在冲突"><a href="#避免注入名潜在冲突" class="header-anchor">#</a> 避免注入名潜在冲突</h2> <p>如果你正在构建大型的应用，包含非常多的依赖提供，那么随处定义的注入名容易存在潜在的同名冲突。在 Mpx 实现中，同名的注入名会覆盖之前已有的注入名对应的提供值。</p> <p>针对大型应用的最佳实践，我们通常推荐在一个单独的文件中导出这些注入名，可以结合业务模块功能来统一注入名的命名和管理规范。<em>以下示例仅供参考，具体实现请依据自身实际场景确定。</em></p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">/** 推荐创建一个单独的文件来管理和导出注入名 */</span>
+
+<span class="token comment">// 1. 使用枚举类型</span>
+<span class="token keyword">export</span> <span class="token keyword">const</span> InjectionKeys <span class="token operator">=</span> <span class="token punctuation">{</span>
+  user<span class="token operator">:</span> <span class="token string">'user'</span><span class="token punctuation">,</span>
+  auth<span class="token operator">:</span> <span class="token string">'auth'</span><span class="token punctuation">,</span>
+  product<span class="token operator">:</span> <span class="token string">'product'</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// 2. 按业务模块功能划分命名，不容易命名冲突，可读性高</span>
+<span class="token keyword">export</span> <span class="token keyword">const</span> InjectionKeys <span class="token operator">=</span> <span class="token punctuation">{</span>
+  user<span class="token operator">:</span> <span class="token punctuation">{</span>
+    service<span class="token operator">:</span> <span class="token string">'user:service'</span><span class="token punctuation">,</span>
+    store<span class="token operator">:</span> <span class="token string">'user:store'</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  auth<span class="token operator">:</span> <span class="token punctuation">{</span>
+    service<span class="token operator">:</span> <span class="token string">'auth:service'</span><span class="token punctuation">,</span>
+    token<span class="token operator">:</span> <span class="token string">'auth:token'</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  product<span class="token operator">:</span> <span class="token punctuation">{</span>
+    list<span class="token operator">:</span> <span class="token string">'product:list'</span><span class="token punctuation">,</span>
+    details<span class="token operator">:</span> <span class="token string">'product:details'</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// 3. 使用 Symbol 创建唯一注入名，或再结合命名空间</span>
+<span class="token keyword">export</span> <span class="token keyword">const</span> InjectionKeys <span class="token operator">=</span> <span class="token punctuation">{</span>
+  user<span class="token operator">:</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+  auth<span class="token operator">:</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'auth'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+  product<span class="token operator">:</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'product'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// 4. 自行实现类似 Symbol polyfill 的命名生成函数</span>
+<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createInjectionKey</span> <span class="token operator">=</span> <span class="token punctuation">(</span>module<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">module</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
+<span class="token keyword">export</span> <span class="token keyword">const</span> InjectionKeys <span class="token operator">=</span> <span class="token punctuation">{</span>
+  user<span class="token operator">:</span> <span class="token function">createInjectionKey</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">,</span> <span class="token string">'service'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+  auth<span class="token operator">:</span> <span class="token function">createInjectionKey</span><span class="token punctuation">(</span><span class="token string">'auth'</span><span class="token punctuation">,</span> <span class="token string">'token'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+  product<span class="token operator">:</span> <span class="token function">createInjectionKey</span><span class="token punctuation">(</span><span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token string">'list'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="ts-类型支持"><a href="#ts-类型支持" class="header-anchor">#</a> TS 类型支持</h2> <p>直接使用字符串注入 key 时，注入值的类型默认推导会是 <code>unknown</code>，需要通过泛型参数显式声明。因为无法保证运行时一定存在这个 provide，所以推导类型也可能是 <code>undefined</code>。当声明一个默认值后，这个 <code>undefined</code> 类型就可以成功被移除。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token operator">&lt;</span>script setup lang<span class="token operator">=</span><span class="token string">&quot;ts&quot;</span><span class="token operator">&gt;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> inject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token comment">// 类型：unknown</span>
+<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token generic-function"><span class="token function">inject</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token comment">// 类型：string | undefined</span>
+<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token generic-function"><span class="token function">inject</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'default value'</span><span class="token punctuation">)</span> <span class="token comment">// 类型：string ✅</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+</code></pre></div><p>当然，如果你已经确定注入名肯定被提供了，也可以强制断言。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token builtin">string</span>
+</code></pre></div><p>如果使用 <code>Symbol</code> 作为注入名，可以使用我们提供的 <code>InjectionKey</code> 泛型接口，使用它对注入名进行注解或者断言后，可以用来在不同组件之间同步注入值的类型。建议将注入 key 放在单独文件，这样方便在多个组件中导入使用。</p> <div class="language-ts extra-class"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-ts"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> provide<span class="token punctuation">,</span> inject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> InjectionKey <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">export</span> <span class="token keyword">const</span> key<span class="token operator">:</span> InjectionKey<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 类型注解</span>
+<span class="token comment">// const key = Symbol() as InjectionKey&lt;string&gt; // 类型断言写法等效</span>
+
+<span class="token function">provide</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token comment">// 若默认值是非字符串则会 TS 类型报错</span>
+
+<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token comment">// ✅ foo 的类型：string | undefined</span>
+<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token string">'default value'</span><span class="token punctuation">)</span> <span class="token comment">// ✅ foo 的类型：string</span>
+<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// ❌ 默认值是非字符串则会 TS 类型报错</span>
+</code></pre></div><h2 id="跨端差异"><a href="#跨端差异" class="header-anchor">#</a> 跨端差异</h2> <ul><li>Mpx 输出 Web 端后，使用规则与 Vue 一致，<code>provide/inject</code> 的生效范围严格遵行父子组件关系，只有父组件可以成功向子孙组件提供依赖。</li> <li>Mpx 输出小程序端会略有不同，由于小程序原生框架限制，暂时无法在子组件获取真实渲染时的父组件引用关系，所以不能像 Vue 那样基于父组件原型继承来实现 <code>provide</code>。在 Mpx 底层实现中，我们将组件层的 <code>provide</code> 挂载在所属页面实例上，相当于将组件 scope 提升到页面 scope，可以理解成一种“降级模拟”。当然，这并不影响父组件向子孙组件 <code>provide</code> 的能力，只是会额外存在“<strong>副作用</strong>”：同一页面中的组件可以向页面中其他所有在其之后渲染子组件提供依赖。比如同一页面下的组件 A 可以向后渲染的兄弟组件 B 的子孙组件提供数据，这在 Web 端是不允许的。因此，针对小程序端可能出现的“副作用”需要开发者自行保证，可以结合上述注入名的管理优化来规避。</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/ssr.html" class="prev">
+        SSR
+      </a></span> <span class="next"><a href="/guide/composition-api/composition-api.html">
+        组合式 API
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/76.50d84c61.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/resource-resolve.html b/docs-vuepress/.vuepress/dist/guide/advance/resource-resolve.html
new file mode 100644
index 0000000000..449adbb2ab
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/resource-resolve.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>资源路径获取 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/77.7bc0f013.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="资源路径获取"><a href="#资源路径获取" class="header-anchor">#</a> 资源路径获取</h1> <p>Mpx在构建时，如果引用的页面不存在于当前 app.mpx 所在的上下文中，例如存在于 npm 包中，为避免和本地声明的其他 page 路径冲突，Mpx 会对页面路径进行 hash 化处理；
+处理组件路径时也会添加 hash 防止路径名冲突，hash 化处理后最终的文件名是 name+hash+ext 的格式；对于图片等资源路径输出也会进行 hash 化处理。</p> <p>开发者经常会面临以下问题：</p> <ul><li>希望获取 hash 化之后的页面/组件/图片路径</li> <li>在页面路径变化时(分包名更改或页面名修改)，需要手动修改散落在代码中各处写死的资源路径</li></ul> <h2 id="resolve"><a href="#resolve" class="header-anchor">#</a> ?resolve</h2> <p>为了解决以上开发者痛点，Mpx 框架提供了资源路径自动获取能力，只需要在资源引用路径后加上?resolve，
+Mpx 在编译时会生成一个资源路径处理模块，该模块暴露出资源对应的真实输出路径，从而可以实现在页面/组件/图片路径变化时正确获取输出路径，并避免写死资源路径。</p> <p>获取并使用页面路径</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.json 中注册分包，此处仅列出 packages 语法示例</span>
+<span class="token punctuation">{</span>
+    <span class="token literal-property property">packages</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token string">'@someNpm/app.mpx?root=someNpm'</span>
+    <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// import 语法获取并使用页面路径</span>
+<span class="token keyword">import</span> subPackageIndexPage <span class="token keyword">from</span> <span class="token string">'@someNpm/subpackage/pages/index.mpx?resolve'</span>
+mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">url</span><span class="token operator">:</span> subPackageIndexPage
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// require 语法获取并使用页面路径</span>
+mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@someNpm/subpackage/pages/index.mpx?resolve'</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>获取并使用组件资源路径</p> <blockquote><p>我们在使用小程序 relations 语法时，需要获取组件路径，这时就可使用 ?resolve 语法</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> someComponentItem <span class="token keyword">from</span> <span class="token string">'./some-component-item?resolve'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">relations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token punctuation">[</span>someComponentItem<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'child'</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>获取并使用图像资源路径</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{someStyle}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+    <span class="token keyword">import</span> iconPath <span class="token keyword">from</span> <span class="token string">'../assets/icon.png?resolve'</span>
+    
+    <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token function">someStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+                <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">background-image url(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>iconPath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span>
+            <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/77.7bc0f013.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/size-report.html b/docs-vuepress/.vuepress/dist/guide/advance/size-report.html
new file mode 100644
index 0000000000..9246a7aa13
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/size-report.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>包体积分析 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/78.e2ded2d4.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" aria-current="page" class="active sidebar-link">包体积分析</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/size-report.html#与-webpack-bundle-analyzer-的区别" class="sidebar-link">与 webpack-bundle-analyzer 的区别</a></li><li class="sidebar-sub-header"><a href="/guide/advance/size-report.html#使用方法" class="sidebar-link">使用方法</a></li><li class="sidebar-sub-header"><a href="/guide/advance/size-report.html#业务实践" class="sidebar-link">业务实践</a></li><li class="sidebar-sub-header"><a href="/guide/advance/size-report.html#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="包体积分析"><a href="#包体积分析" class="header-anchor">#</a> 包体积分析</h1> <p>目前业内主流小程序平台都对小程序的代码包设置了严格的体积限制，微信是单包 2MB，总包 16MB，支付宝是单包 2MB，总包 8MB；包体积作为有限的资源，在小程序业务开发中异常重要，特别对于像滴滴出行这样的大型复杂业务。</p> <p>Mpx 在包体积控制上做了很多工作，主要包括：</p> <ul><li><a href="/guide/advance/subpackage.html#分包">完善的分包支持</a></li> <li><a href="/guide/advance/npm.html">基于依赖声明的按需构建</a></li> <li><a href="/guide/advance/image-process.html">图像资源处理</a></li> <li><a href="/guide/basic/css.html#公共样式复用">公共样式复用</a></li></ul> <p>此外由于 Mpx 的编译构建完全基于 webpack，也能够直接复用webpack生态自带的代码压缩，模块复用，tree shaking，side effects 等能力对代码体积进行优化。</p> <p>但是系统能做的工作终究有限，在一些人为不规范操作的影响下，最终输出的项目依然可能存在大量优化空间，比如在业务中不会被调用但无法被 tree shaking / side effects 移除的代码，因为 npm 依赖版本不统一造成的重复依赖，未经压缩的图像静态资源等，在大型项目中，这些问题想要被发现会非常困难，因此我们非常需要一个体积分析工具来管控项目体积和发现隐藏的体积问题。</p> <h2 id="与-webpack-bundle-analyzer-的区别"><a href="#与-webpack-bundle-analyzer-的区别" class="header-anchor">#</a> 与 webpack-bundle-analyzer 的区别</h2> <p><code>webpack-bundle-analyzer</code> 提供了非常完善的体积分析和可视化展示能力，但是在 Mpx 构建输出小程序场景下，其所提供的能力还是有所缺失：</p> <ul><li>只能对 js 资源进行模块体积分析，而小程序的输出中包含了大量的非 js 静态资源，如 wxss / wxml / json 等，这些资源的体积都不会被统计分析；</li> <li>没有针对某个分包进行体积分析的能力，由于小程序中存在对单一分包的体积限制，我们的体积往往会集中在主包和主要业务分包中，以分包维度进行体积分析的能力非常必要；</li> <li>无法以特定的输入范围为维度进行体积的统计分析，这个能力诉求更多地出现在跨团队合作的复杂小程序当中，如滴滴出行。在这种场景下，接入合作的各方会更加关注己方引入的体积，并进行针对性地优化。</li></ul> <p>由于上述原因，我们提供了<code>@mpxjs/size-report</code>插件提供包体积分析能力，弥补了 <code>webpack-bundle-analyzer</code> 的能力缺失，为业务提供了便捷准确的包体积管控优化抓手。</p> <h2 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h2> <h4 id="安装插件"><a href="#安装插件" class="header-anchor">#</a> 安装插件</h4> <div class="language- extra-class"><pre class="language-text"><code>npm i @mpxjs/size-report --save-dev
+</code></pre></div><h4 id="配置插件"><a href="#配置插件" class="header-anchor">#</a> 配置插件</h4> <p>在项目 webpack.config 文件中配置使用 <code>@mpxjs/size-report</code> 插件即可使用，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> MpxSizeReportPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/size-report'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token keyword">new</span> <span class="token class-name">MpxSizeReportPlugin</span><span class="token punctuation">(</span>
+          <span class="token punctuation">{</span>
+              <span class="token comment">// 本地可视化服务相关配置</span>
+              <span class="token literal-property property">server</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                  <span class="token literal-property property">enable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否启动本地服务，非必填，默认 true</span>
+                  <span class="token literal-property property">autoOpenBrowser</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否自动打开可视化平台页面，非必填，默认 true</span>
+                  <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 本地服务端口，非必填，默认 0(随机端口)</span>
+                  <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">'127.0.0.1'</span><span class="token punctuation">,</span> <span class="token comment">// 本地服务host，非必填</span>
+              <span class="token punctuation">}</span><span class="token punctuation">,</span>
+              <span class="token comment">// 体积报告生成后输出的文件地址名，路径相对为 dist/wx 或者 dist/ali</span>
+              <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">'../report.json'</span><span class="token punctuation">,</span>
+              <span class="token comment">// 配置阈值，此处代表总包体积阈值为 16MB，分包体积阈值为 2MB，超出将会触发编译报错提醒，该报错不阻断构建</span>
+              <span class="token literal-property property">threshold</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                  <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token string">'16MB'</span><span class="token punctuation">,</span>
+                  <span class="token literal-property property">packages</span><span class="token operator">:</span> <span class="token string">'2MB'</span>
+              <span class="token punctuation">}</span><span class="token punctuation">,</span>
+              <span class="token comment">// 配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息</span>
+              <span class="token literal-property property">groups</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+                  <span class="token punctuation">{</span>
+                      <span class="token comment">// 分组名称</span>
+                      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'vant'</span><span class="token punctuation">,</span>
+                      <span class="token comment">// 配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry，如下所示的分组配置将计算项目中引入的 vant 组件带来的体积占用</span>
+                      <span class="token literal-property property">entryRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token string">'@vant/weapp'</span>
+                      <span class="token punctuation">}</span>
+                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+                  <span class="token punctuation">{</span>
+                      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'pageGroup'</span><span class="token punctuation">,</span>
+                      <span class="token comment">// 每个分组中可分别配置阈值，如果不配置则表示</span>
+                      <span class="token literal-property property">threshold</span><span class="token operator">:</span> <span class="token string">'500KB'</span><span class="token punctuation">,</span>
+                      <span class="token literal-property property">entryRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'src/pages/index'</span><span class="token punctuation">,</span> <span class="token string">'src/pages/user'</span><span class="token punctuation">]</span>
+                      <span class="token punctuation">}</span>
+                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+                  <span class="token punctuation">{</span>
+                      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'someSdk'</span><span class="token punctuation">,</span>
+                      <span class="token literal-property property">entryRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@somegroup/someSdk/index'</span><span class="token punctuation">,</span> <span class="token string">'@somegroup/someSdk2/index'</span><span class="token punctuation">]</span>
+                      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+                      <span class="token comment">// 有的时候你可能希望计算纯 js 入口引入的体积（不包含组件和页面），这种情况下需要使用 noEntryRules</span>
+                      <span class="token literal-property property">noEntryRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token string">'src/lib/sdk.js'</span>
+                      <span class="token punctuation">}</span>
+                  <span class="token punctuation">}</span>
+              <span class="token punctuation">]</span><span class="token punctuation">,</span>
+              <span class="token comment">// 是否收集页面维度体积详情，默认 false</span>
+              <span class="token literal-property property">reportPages</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+              <span class="token comment">// 是否收集资源维度体积详情，默认 false</span>
+              <span class="token literal-property property">reportAssets</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+              <span class="token comment">// 是否收集冗余资源，默认 false</span>
+              <span class="token literal-property property">reportRedundance</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+              <span class="token comment">// 展示某些分包资源的引用来源信息，默认为 []</span>
+              <span class="token literal-property property">showEntrysPackages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'main'</span><span class="token punctuation">]</span>
+          <span class="token punctuation">}</span>
+      <span class="token punctuation">)</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>参考上述示例进行配置后，构建代码后，dist 目录下会产出 report.json 文件，里边是项目的具体体积信息，关于输入 json 的简单示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code>{
+    // 项目体积概要，大部分情况下，我们只需要看这部分就足够了
+    &quot;sizeSummary&quot;: {
+        // 分组体积概要，与上述配置文件中的 groups 对应
+        &quot;groups&quot;: [
+            {
+                &quot;name&quot;: &quot;vant&quot;,
+                // 只有该分组包含的模块体积
+                &quot;selfSize&quot;: &quot;164.75KiB&quot;,
+                &quot;selfSizeInfo&quot;: {
+                  // 该分组所占 shansong
+                  &quot;shansong&quot;: &quot;164.75KiB&quot;
+                },
+                &quot;sharedSize&quot;: &quot;885.68KiB&quot;,
+                &quot;sharedSizeInfo&quot;: {
+                  &quot;main&quot;: &quot;885.68KiB&quot;
+                }
+            },
+        ],
+        // 项目各个分包以及主包体积概要
+        &quot;sizeInfo&quot;: {
+            &quot;main&quot;: &quot;1000KiB&quot;,
+            &quot;fenbao1&quot;: &quot;200kiB&quot;
+        },
+        // 项目总体积
+        &quot;totalSize&quot;: &quot;13468.85KiB&quot;,
+        // 项目静态资源总体积
+        &quot;staticSize&quot;: &quot;4880.58KiB&quot;,
+        // 项目chunk 文件总体积
+        &quot;chunkSize&quot;: &quot;8587.70KiB&quot;,
+        // 非依赖项体积大小
+        &quot;copySize&quot;: &quot;1KiB&quot;
+    },
+    // 分组资源详细体积
+    &quot;groupsSizeInfo&quot;: [
+        {
+            &quot;name&quot;: &quot;groupOne&quot;,
+            // group 自身包含的 module 详情列表
+            &quot;selfEntryModules&quot;: [],
+            // group 与其他group 共有的 module 详情列表
+            &quot;sharedEntryModules&quot;: [],
+            // 自身包含 module 体积
+            &quot;selfSize&quot;: &quot;&quot;,
+            // 自身包含 module 体积详情
+            &quot;selfSizeInfo&quot;: {
+                &quot;main&quot;: {},
+                &quot;homepage&quot;: {}
+            },
+            // 与其他 group 共有 module 体积
+            &quot;sharedSize&quot;: &quot;&quot;,
+            // 与其他 group 共有 module 体积详情
+            &quot;sharedSizeInfo&quot;: {
+                &quot;main&quot;: {},
+                &quot;homepage&quot;: {}
+            },
+
+        }
+    ],
+    // 项目资源详细体积报告
+    &quot;assetsSizeInfo&quot;: {
+        &quot;assets&quot;: [{
+            // 资源类型
+            &quot;type&quot;: &quot;chunk&quot;,
+            &quot;name&quot;: &quot;test&quot;,
+            // 分包名
+            &quot;packageName&quot;: &quot;main&quot;,
+            &quot;size&quot;: &quot;&quot;,
+            &quot;modules&quot;: []
+        }]
+    }
+}
+</code></pre></div><p>与此同时，如果你开启了本地可视化平台服务，可以直接通过可视化平台查看项目体积构成。默认开启自动打开平台网页或者手动打开后，整体页面展示如下图：</p> <p><a href="https://mpxjs.cn" target="_blank" rel="noopener noreferrer"><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/feat1.png" alt="size-report"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>可视化平台中包含三部分功能，第一个体积分析如上图所示，主要是展示整体项目的体积总览，以及 group 体积列表和分包体积列表。</p> <p>第二个功能是体积详情模块，在该模块中，可以最小颗粒度的查看包体积构成，通过 table 表格的层层展开可看到每个 group 中包含的分包，点击分包可看到该分包包含的静态资源和 js 模块详细列表，同时聚合模式可将分散的模块整合为具体的npm包名，方便宏观查看。此外为了方便用户定向查看某个特定资源的分布情况，列表上方可进行资源路径/名称搜索，该搜索支持模糊匹配，搜索结果为该资源在项目中 group 和 分包的分布情况。</p> <p><a href="https://mpxjs.cn" target="_blank" rel="noopener noreferrer"><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/feat2.png" alt="size-report"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>第三个功能为体积对比功能，这里主要进行项目不同版本之间的体积大小变化比较，体积对比依赖插件生成的json文件，通过该功能，可具体的分析出包体积具体增大的group，分包，以及模块，给包体积优化提供定向目标。</p> <p><a href="https://mpxjs.cn" target="_blank" rel="noopener noreferrer"><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/feat3.png" alt="size-report"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="业务实践"><a href="#业务实践" class="header-anchor">#</a> 业务实践</h2> <p>目前 sizeReport 工具在滴滴出行小程序, 花小猪, 青桔骑行, 特惠出行小程序以及一部分外部小程序中使用。</p> <p>在滴滴出行小程序中，配置使用 @mpxjs/size-report 插件后使包体积管控和优化更加工程化：</p> <ul><li><p>在 sizeReport 检测结果文件中，通过对 groupsSizeInfo 和 assetsSizeInfo 中assets 与 module 体积分析，我们发现了部分体积较大图片文件和css资源，通过将图片存 CDN 和删除冗余文件；</p></li> <li><p>基于各小程序平台对小程序总包，主包，分包有大小限制的原则，给各接入方配置了主包和首页分包体积大小占比阈值，在构建时检测到包体积超过阈值时，抛出 error 阻断构建，开发者可通过 size-report.json 中详细的包体积分析准确的找到体积变动点。</p></li></ul> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>Mpx sizeReport 工具对小程序体积计算有更细微(模块级别)的体积展示。 更加适合小程序开发场景的包体积分析。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/i18n.html" class="prev">
+        国际化i18n
+      </a></span> <span class="next"><a href="/guide/advance/image-process.html">
+        图像资源处理
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/78.e2ded2d4.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/ssr.html b/docs-vuepress/.vuepress/dist/guide/advance/ssr.html
new file mode 100644
index 0000000000..809c77cb83
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/ssr.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>SSR | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/79.f7eeb76b.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" aria-current="page" class="active sidebar-link">SSR</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/ssr.html#配置使用-ssr" class="sidebar-link">配置使用 SSR</a></li><li class="sidebar-sub-header"><a href="/guide/advance/ssr.html#ssr-生命周期" class="sidebar-link">SSR 生命周期</a></li><li class="sidebar-sub-header"><a href="/guide/advance/ssr.html#其他注意事项" class="sidebar-link">其他注意事项</a></li></ul></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="ssr"><a href="#ssr" class="header-anchor">#</a> SSR</h1> <p>近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，但过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 2.9 版本中，我们对 Mpx 输出 web 流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整支持了基于 Vue 和 Pinia 的 SSR 技术方案。</p> <h2 id="配置使用-ssr"><a href="#配置使用-ssr" class="header-anchor">#</a> 配置使用 SSR</h2> <p>在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。</p> <p><img src="https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85" alt="Vue SSR流程"></p> <p>Mpx SSR 核心基于 Vue SSR 实现，大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：</p> <h3 id="构建server-client-bundle"><a href="#构建server-client-bundle" class="header-anchor">#</a> 构建server/client bundle</h3> <p>SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。
+在 Vue 中，我们需要提供 <code>entry-server.js</code> 和 <code>entry-client.js</code> 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 <code>app.mpx</code> 作为统一构建入口，无需区分 server 和 client。</p> <h4 id="服务端构建配置"><a href="#服务端构建配置" class="header-anchor">#</a> 服务端构建配置</h4> <p>服务端配置中除了将 entry 制定为 <code>app.mpx</code> 及其它基础配置外，最重要的是安装 <code>vue-server-renderer</code> 包中提供的  <code>server-plugin</code> 插件，该插件能够构建产出 <code>vue-ssr-server-bundle.json</code> 文件供 <code>renderer</code> 后续消费。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.server.config.js</span>
+<span class="token keyword">const</span> VueSSRServerPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer/server-plugin'</span><span class="token punctuation">)</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 将 entry 指向项目的 app.mpx 文件</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./app.mpx'</span><span class="token punctuation">,</span>
+  <span class="token comment">// ...</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+   <span class="token comment">// 产出 `vue-ssr-server-bundle.json`</span>
+    <span class="token keyword">new</span> <span class="token class-name">VueSSRServerPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#server-config" target="_blank" rel="noopener noreferrer">Vue SSR的服务端配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="客户端构建配置"><a href="#客户端构建配置" class="header-anchor">#</a> 客户端构建配置</h4> <p>类似服务端构建配置，在客户端构建中我们需要使用 <code>vue-server-renderer</code> 包中 <code>client-plugin</code> 插件来帮助我们生成客户端环境的资源清单 <code>vue-ssr-client-manifest.json</code>，并供 <code>renderer</code> 后续消费。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.client.config.js</span>
+<span class="token keyword">const</span> VueSSRClientPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer/client-plugin'</span><span class="token punctuation">)</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 将 entry 指向项目的 app.mpx 文件</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./app.mpx'</span><span class="token punctuation">,</span>
+  <span class="token comment">// ...</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token comment">// 产出 `vue-ssr-client-manifest.json`。</span>
+    <span class="token keyword">new</span> <span class="token class-name">VueSSRClientPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#client-config" target="_blank" rel="noopener noreferrer">Vue SSR的客户端配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="准备页面模版"><a href="#准备页面模版" class="header-anchor">#</a> 准备页面模版</h3> <p>SSR 渲染中，我们创建 <code>renderer</code> 需要一个页面模板，简单的示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Hello<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--vue-ssr-outlet--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 <code>&lt;!--vue-ssr-outlet--&gt;</code>注释，标记 SSR 渲染产物的插入位置，如使用 <code>@mpxjs/cli</code> 脚手架创建 SSR 项目，该模版已经内置于脚手架中。</p> <h3 id="集成启动-ssr-服务"><a href="#集成启动-ssr-服务" class="header-anchor">#</a> 集成启动 SSR 服务</h3> <p>当我们准备好页面模版和双端构建产物后，我们就可以创建 <code>renderer</code> 并与 Node 服务进行集成，启动 SSR 服务，下面以 <code>express</code> 为例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//server.js</span>
+<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> createBundleRenderer <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer'</span><span class="token punctuation">)</span>
+<span class="token comment">// 通过 vue-server-renderer/server-plugin 生成的文件</span>
+<span class="token keyword">const</span> serverBundle <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../dist/server/vue-ssr-server-bundle.json'</span><span class="token punctuation">)</span>
+<span class="token comment">// 通过 vue-server-renderer/client-plugin 生成的文件</span>
+<span class="token keyword">const</span> clientManifest <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../dist/client/vue-ssr-client-manifest.json'</span><span class="token punctuation">)</span>
+ <span class="token comment">// 页面模版文件</span>
+<span class="token keyword">const</span> template <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token string">'../src/index.template.html'</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span>
+<span class="token comment">// 创建 renderer 渲染器</span>
+<span class="token keyword">const</span> renderer <span class="token operator">=</span> <span class="token function">createBundleRenderer</span><span class="token punctuation">(</span>serverBundle<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">runInNewContext</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+    template<span class="token punctuation">,</span>
+    clientManifest<span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// 注册启动 SSR 服务</span>
+app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> req<span class="token punctuation">.</span>url <span class="token punctuation">}</span>
+  renderer<span class="token punctuation">.</span><span class="token function">renderToString</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> html</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  	<span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  	  res<span class="token punctuation">.</span><span class="token function">status</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'Internal Server Error'</span><span class="token punctuation">)</span>
+      <span class="token keyword">return</span>
+    <span class="token punctuation">}</span>
+  	res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8080</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="ssr-生命周期"><a href="#ssr-生命周期" class="header-anchor">#</a> SSR 生命周期</h2> <p>在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是<code>onAppInit</code>、<code>serverPrefetch</code> 和 <code>onSSRAppCreated</code>，以统一服务端与客户端的构建入口，下面展开介绍：</p> <h3 id="onappinit"><a href="#onappinit" class="header-anchor">#</a> onAppInit</h3> <blockquote><p>该生命周期仅可在 App 中使用</p></blockquote> <p>在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，<code>onAppInit</code> 生命周期会在应用创建 <code>new Vue(...)</code> 前被调用，其执行的返回结果会被合并到创建应用的 <code>options</code> 中</p> <p>很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 <code>@mpxjs/pinia</code> 作为全局状态管理工具，我们可以在 <code>onAppInit</code> 中返回全新的 <code>pinia</code> 示例避免产生跨请求状态污染，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
+<span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
+
+<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token function">onAppInit</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      pinia
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><blockquote><p>SSR 中仅支持使用 <code>@mpxjs/pinia</code> 作为状态管理工具，<code>@mpxjs/store</code> 暂不支持</p></blockquote> <h3 id="serverprefetch"><a href="#serverprefetch" class="header-anchor">#</a> serverPrefetch</h3> <blockquote><p>该生命周期可在 App/Page/Component 中使用，只在服务端渲染时执行</p></blockquote> <p>当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：</p> <p>选项式 API：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> useStore <span class="token keyword">from</span> <span class="token string">'../store/index'</span>
+
+<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">//...</span>
+  <span class="token function">serverPrefetch</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query
+    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$pinia<span class="token punctuation">)</span>
+    <span class="token comment">// return the promise from the action, fetch data and update state</span>
+    <span class="token keyword">return</span> store<span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>组合式 API：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onServerPrefetch<span class="token punctuation">,</span> getCurrentInstance<span class="token punctuation">,</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> useStore <span class="token keyword">from</span> <span class="token string">'../store/index'</span>
+
+<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">userStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token function">onServerPrefetch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token function">getCurrentInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>proxy<span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query
+      <span class="token comment">// return the promise from the action, fetch data and update state</span>
+      <span class="token keyword">return</span> store<span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>关于数据预拉取更详细的说明可以查看<a href="https://v2.ssr.vuejs.org/guide/data.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="onssrappcreated"><a href="#onssrappcreated" class="header-anchor">#</a> onSSRAppCreated</h3> <blockquote><p>该生命周期仅可在 App 中使用，只在服务端渲染时执行</p></blockquote> <p>在 Vue SSR 项目中，我们会在 <code>entry-server.js</code> 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 <code>app</code>。</p> <p>在 Mpx SSR 中，我们将这部分逻辑整合在 <code>onSSRAppCreated</code> 中执行，该生命周期执行时用户可以从参数中获取应用实例 <code>app</code>、路由实例 <code>router</code>、数据管理实例 <code>pinia</code> 和 SSR 上下文 <code>context</code>，在完成必要的操作后，该生命周期需要返回一个 <code>resolve(app)</code> 的 promise。</p> <p>通常我们会在 <code>onSSRAppCreated</code> 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
+<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token comment">// ...,</span>
+    <span class="token function">onSSRAppCreated</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> pinia<span class="token punctuation">,</span> router<span class="token punctuation">,</span> app<span class="token punctuation">,</span> context <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token comment">// 设置服务端路由路径</span>
+        router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
+        router<span class="token punctuation">.</span><span class="token function">onReady</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          <span class="token comment">// 应用完成渲染时执行</span>
+          context<span class="token punctuation">.</span><span class="token function-variable function">rendered</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+            <span class="token comment">// 将服务端渲染后得到的 pinia.state 同步到 context.state 中，</span>
+            <span class="token comment">// context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`</span>
+            <span class="token comment">// 注入到 HTML 中，并在客户端运行时再读取同步</span>
+            context<span class="token punctuation">.</span>state <span class="token operator">=</span> pinia<span class="token punctuation">.</span>state<span class="token punctuation">.</span>value
+          <span class="token punctuation">}</span>
+          <span class="token comment">// 返回应用程序实例</span>
+          <span class="token function">resolve</span><span class="token punctuation">(</span>app<span class="token punctuation">)</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> reject<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>上述示例代码等价于 Vue 中的 <code>entry-server.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// entry-server.js</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./app'</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token parameter">context</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> app<span class="token punctuation">,</span> router<span class="token punctuation">,</span> store <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
+    router<span class="token punctuation">.</span><span class="token function">onReady</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token comment">// This `rendered` hook is called when the app has finished rendering</span>
+      context<span class="token punctuation">.</span><span class="token function-variable function">rendered</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token comment">// After the app is rendered, our store is now</span>
+        <span class="token comment">// filled with the state from our components.</span>
+        <span class="token comment">// When we attach the state to the context, and the `template` option</span>
+        <span class="token comment">// is used for the renderer, the state will automatically be</span>
+        <span class="token comment">// serialized and injected into the HTML as `window.__INITIAL_STATE__`.</span>
+        context<span class="token punctuation">.</span>state <span class="token operator">=</span> store<span class="token punctuation">.</span>state
+      <span class="token punctuation">}</span>
+      <span class="token function">resolve</span><span class="token punctuation">(</span>app<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> reject<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。</p> <h2 id="其他注意事项"><a href="#其他注意事项" class="header-anchor">#</a> 其他注意事项</h2> <ol><li><p>Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。</p></li> <li><p>在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。</p></li> <li><p>由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 <code>mpx.config.webRouteConfig</code> 将路由模式设置成 <code>history</code> 模式。</p></li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/utility-first-css.html" class="prev">
+        使用原子类
+      </a></span> <span class="next"><a href="/guide/advance/provide-inject.html">
+        依赖注入（Provide/Inject）
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/79.f7eeb76b.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/store.html b/docs-vuepress/.vuepress/dist/guide/advance/store.html
new file mode 100644
index 0000000000..c8a3cea770
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/store.html
@@ -0,0 +1,599 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>状态管理（store） | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/80.41418749.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" aria-current="page" class="active sidebar-link">状态管理（store）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/store.html#介绍" class="sidebar-link">介绍</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#state" class="sidebar-link">State</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#getter" class="sidebar-link">Getter</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#mutation" class="sidebar-link">Mutation</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#action" class="sidebar-link">Action</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#modules" class="sidebar-link">Modules</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#多实例-store" class="sidebar-link">多实例 store</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#在-typescript-中使用-store" class="sidebar-link">在 Typescript 中使用 store</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#use-store-in-composition-api" class="sidebar-link">在组合式 API 中使用 store</a></li></ul></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="状态管理-store"><a href="#状态管理-store" class="header-anchor">#</a> 状态管理（store）</h1> <p>Mpx 参考 vuex 设计实现了外部状态管理系统（store），其中的概念与 api 与 vuex 保持一致，为了更好地支持状态模块管理和跨团队合作场景，我们提出多实例 store 作为 vuex 中 modules 的替代方案，该方案在模块拆分及合并上的灵活性远高于 modules。</p> <h2 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h2> <p><code>Store</code> 是一个全局状态管理容器，能够轻松实现复杂场景下的组件通信需求，store 与简单的全局状态对象主要有以下两点不同：</p> <ol><li><p>Store 中存放的状态是响应式的。当用户将 store 中的状态注入到组件以后，若 store 中状态发生变化，那么对应的组件也会得到更新。</p></li> <li><p>你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径是显式地提交变更（commit mutation），这种方式能使整个应用中的状态变更变得可回朔可追踪，同时也更加安全。</p></li></ol> <h3 id="创建-store"><a href="#创建-store" class="header-anchor">#</a> 创建 store</h3> <p>让我们来创建一个简单 store。创建过程直截了当，仅需要提供一个初始 state 对象和一些 mutation 方法，并调用 Mpx 暴露的 <code>createStore</code> 方法进行创建：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> store
+</code></pre></div><p>现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token comment">// 1</span>
+</code></pre></div><p>接下来，我们将会更深入地探讨一些 store 的核心概念。让我们先从 <a href="#state">State</a> 开始。</p> <h2 id="state"><a href="#state" class="header-anchor">#</a> State</h2> <p>State 存放了 store 中的原始状态数据，可以通过 <code>store.state</code> 进行访问。</p> <h3 id="在组件中获取-state"><a href="#在组件中获取-state" class="header-anchor">#</a> 在组件中获取 state</h3> <p>Mpx 在小程序组件中实现了数据响应，而刚才提到 store 中的状态也是响应式的，组件中获取 store 状态最简单的方法就是建立一个计算属性，在计算属性中访问 store 中需要的状态数据并返回：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// store.js</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">,</span> createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">count</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>count
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>当 store.state.count 发生变化时, 组件中访问了 count 计算属性的 watcher 将得到响应。</p> <blockquote><p>于 vuex 中的不同的地方在于，vuex 奉行<code>单一状态树</code>，一个应用当中只存在一个 store 示例，用户能够在组件中通过<code>this.$store</code>隐式地访问到当前应用的 store；而 Mpx 当中为了追求灵活便捷的状态模块化管理及跨团队合作的能力，支持了多实例 store，用户需要显式地引入 store 实例，并通过计算属性将其注入到组件当中。</p></blockquote> <h3 id="mapstate-辅助函数"><a href="#mapstate-辅助函数" class="header-anchor">#</a> MapState 辅助函数</h3> <p>当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 <code>mapState</code> 辅助函数帮助我们生成计算属性</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../store'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token comment">// 箭头函数可使代码更简练</span>
+    <span class="token function-variable function">count</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>count<span class="token punctuation">,</span>
+
+    <span class="token comment">// 传字符串参数 'count' 等同于 state =&gt; state.count</span>
+    <span class="token literal-property property">countAlias</span><span class="token operator">:</span> <span class="token string">'count'</span><span class="token punctuation">,</span>
+
+    <span class="token comment">// 为了能够使用 `this` 获取局部状态，必须使用常规函数</span>
+    <span class="token function">countPlusLocalState</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>localCount
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../store'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+    <span class="token comment">// 映射 this.count 为 store.state.count</span>
+    <span class="token string">'count'</span>
+  <span class="token punctuation">]</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="对象展开运算符"><a href="#对象展开运算符" class="header-anchor">#</a> 对象展开运算符</h3> <p>MapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了<a href="https://github.com/sebmarkbage/ecmascript-rest-spread" target="_blank" rel="noopener noreferrer">对象展开运算符<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，我们可以极大地简化写法：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../store'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">localComputed</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token comment">// 使用对象展开运算符将 mapState 返回的对象合并到计算属性中</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+      <span class="token string">'count'</span><span class="token punctuation">,</span>
+      <span class="token comment">// ...</span>
+    <span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><blockquote><p>使用 store 并不意味着你需要将所有的状态放入 store。如果有些状态严格属于单个组件，最好将其放到组件内部的 data 当中。</p></blockquote> <h2 id="getter"><a href="#getter" class="header-anchor">#</a> Getter</h2> <p>有时候我们需要从 state 中派生出一些状态，例如经过过滤的列表：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">doneTodos</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">todo</span> <span class="token operator">=&gt;</span> todo<span class="token punctuation">.</span>done<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它，无论哪种方式都不是很理想。</p> <p>这个时候我们可以在 store 中定义 <code>getter</code> 来完成这个功能，getter 可以简单认为是 store 中的计算属性。同计算属性一样，getter 的返回值会根据它的依赖被缓存起来，只有当它的依赖发生变化时才会被重新计算。</p> <p>Getter 接受 state 作为第一个参数：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">todos</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'sth1'</span><span class="token punctuation">,</span> <span class="token literal-property property">done</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'sth2'</span><span class="token punctuation">,</span> <span class="token literal-property property">done</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function-variable function">doneTodos</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> state<span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">todo</span> <span class="token operator">=&gt;</span> todo<span class="token punctuation">.</span>done<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> store
+</code></pre></div><p>定义好的 getter 可以通过 <code>store.getters</code> 访问：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodos <span class="token comment">// -&gt; [{ id: 1, text: '...', done: true }]</span>
+</code></pre></div><p>Getter 也可以接受其他 getters 作为第二个参数, rootState作为第三个参数，rootState是模块化中引入的概念，之后会详细介绍：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token function-variable function">doneTodosCount</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> getters<span class="token punctuation">.</span>doneTodos<span class="token punctuation">.</span>length
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodosCount <span class="token comment">// -&gt; 1</span>
+</code></pre></div><p>我们采用与state类似的方法将其注入到组件中进行访问：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token function">doneTodosCount</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodosCount
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="mapgetters-辅助函数"><a href="#mapgetters-辅助函数" class="header-anchor">#</a> MapGetters 辅助函数</h3> <p><code>MapGetters</code> 的作用与使用方法同上面提到的 <code>mapState</code> 高度类似，唯一的区别在于 mapGetters 用于映射 store 中的 getter：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../store'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 使用对象展开运算符将 getter 混入 computed 对象中</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+      <span class="token string">'doneTodosCount'</span><span class="token punctuation">,</span>
+      <span class="token string">'anotherGetter'</span><span class="token punctuation">,</span>
+      <span class="token comment">// ...</span>
+    <span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>如果你想将一个 getter 在组件中映射为另一个名字，使用对象形式：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// 映射 this.doneCount 为 store.getters.doneTodosCount</span>
+  <span class="token literal-property property">doneCount</span><span class="token operator">:</span> <span class="token string">'doneTodosCount'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="mutation"><a href="#mutation" class="header-anchor">#</a> Mutation</h2> <p>更改 store 中的状态的唯一方法是提交 mutation。Mutation 非常类似于事件：每个 mutation 都有一个字符串的<strong>类型（type）</strong> 和 一个<strong>回调函数（handler）</strong>。这个回调函数就是我们实际进行状态更改的地方，它接受 state 作为第一个参数：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 变更状态</span>
+      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> store
+</code></pre></div><p>当你需要触发某个 mutation 时，你需要使用对应的 <code>type</code> 调用 <code>store.commit</code> 方法，就像触发某个事件一样：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="提交载荷（payload）"><a href="#提交载荷（payload）" class="header-anchor">#</a> 提交载荷（Payload）</h3> <p>你可以向 <code>store.commit</code> 传入额外的参数，作为 mutation 的<strong>载荷（payload）</strong>：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// ...</span>
+<span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    state<span class="token punctuation">.</span>count <span class="token operator">+=</span> n
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span>
+</code></pre></div><p>在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且增强 mutation 的可读性：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// ...</span>
+<span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> payload</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    state<span class="token punctuation">.</span>count <span class="token operator">+=</span> payload<span class="token punctuation">.</span>amount
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">amount</span><span class="token operator">:</span> <span class="token number">10</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="mutation-必须是同步函数"><a href="#mutation-必须是同步函数" class="header-anchor">#</a> Mutation 必须是同步函数</h3> <p>一条重要的原则就是要记住 <strong>mutation 必须是同步函数</strong></p> <h3 id="在组件中提交-mutation"><a href="#在组件中提交-mutation" class="header-anchor">#</a> 在组件中提交 Mutation</h3> <p>你可以在组件中使用 <code>store.commit('increment')</code> 提交 mutation，或者使用 <code>store.mapMutations</code> 辅助函数将组件中名为 <code>increment</code> 的 <code>method</code> 映射为 <code>store.commit('increment')</code> 调用。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../store'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+      <span class="token comment">// 将 this.increment() 映射为 store.commit('increment')</span>
+      <span class="token string">'increment'</span><span class="token punctuation">,</span> 
+       <span class="token comment">// mapMutations 也支持载荷：将 this.incrementBy(amount) 映射为 store.commit('incrementBy', amount)</span>
+      <span class="token string">'incrementBy'</span>
+    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// mapMutations同样支持传入对象形式的参数进行别名映射</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token comment">// 将 this.add() 映射为 store.commit('increment')</span>
+      <span class="token literal-property property">add</span><span class="token operator">:</span> <span class="token string">'increment'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="action"><a href="#action" class="header-anchor">#</a> Action</h2> <p>Action 类似于 mutation，不同在于：</p> <ul><li>Action 不能直接变更状态，但是可以提交 mutation 进行状态变更</li> <li>Action 可以包含任意异步操作</li></ul> <p>让我们来创建一个简单的 action：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> store
+</code></pre></div><p>Action 函数接受一个 <code>context</code> 对象，因此你可以调用 <code>context.commit</code> 提交一个 mutation，调用 <code>context.dispatch</code> 触发其他的 action 调用，或者通过 <code>context.rootState</code>、<code>context.state</code> 和 <code>context.getters</code> 来获取全局state、局部state 和 全局 getters。</p> <p>实践中，我们会经常用到 ES2015 的<a href="https://github.com/lukehoban/es6features#destructuring" target="_blank" rel="noopener noreferrer">参数解构<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>来简化代码：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="调用-action"><a href="#调用-action" class="header-anchor">#</a> 调用 action</h3> <p>Action 可以通过 <code>store.dispatch</code> 方法进行调用：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
+</code></pre></div><p>乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 <strong>mutation 必须同步执行</strong>这个限制么？Action 就不受约束！我们可以在 action 内部执行<strong>异步</strong>操作：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token function">incrementAsync</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>Action 同样支持载荷：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 调用载荷</span>
+store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'incrementAsync'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">amount</span><span class="token operator">:</span> <span class="token number">10</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>来看一个更加实际的购物车示例，涉及到<strong>调用异步 API</strong> 和<strong>提交多个 mutation</strong>：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token function">checkout</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit<span class="token punctuation">,</span> state <span class="token punctuation">}</span><span class="token punctuation">,</span> products</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 把当前购物车的物品备份起来</span>
+    <span class="token keyword">const</span> savedCartItems <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>state<span class="token punctuation">.</span>cart<span class="token punctuation">.</span>added<span class="token punctuation">]</span>
+    <span class="token comment">// 发出结账请求，然后乐观地清空购物车</span>
+    <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span><span class="token constant">CHECKOUT_REQUEST</span><span class="token punctuation">)</span>
+    <span class="token comment">// 购物 API 接受一个成功回调和一个失败回调</span>
+    shop<span class="token punctuation">.</span><span class="token function">buyProducts</span><span class="token punctuation">(</span>
+      products<span class="token punctuation">,</span>
+      <span class="token comment">// 成功操作</span>
+      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span><span class="token constant">CHECKOUT_SUCCESS</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+      <span class="token comment">// 失败操作</span>
+      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span><span class="token constant">CHECKOUT_FAILURE</span><span class="token punctuation">,</span> savedCartItems<span class="token punctuation">)</span>
+    <span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>注意我们进行了一系列异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）。</p> <h3 id="在组件中调用-action"><a href="#在组件中调用-action" class="header-anchor">#</a> 在组件中调用 Action</h3> <p>你可以在组件中使用 <code>store.dispatch('increment')</code> 进行 action 调用，或者使用 <code>store.mapActions</code> 辅助函数将组件中名为 <code>increment</code> 的 <code>method</code> 映射为 <code>store.dispatch('increment')</code>：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../store'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+      <span class="token comment">// 将 this.increment() 映射为 store.dispatch('increment')</span>
+      <span class="token string">'increment'</span><span class="token punctuation">,</span> 
+      <span class="token comment">// mapActions 也支持载荷：将 this.incrementBy(amount) 映射为 store.dispatch('incrementBy', amount)</span>
+      <span class="token string">'incrementBy'</span>
+    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// mapActions 同样支持传入对象形式的参数进行别名映射</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token comment">// 将 this.add() 映射为 store.dispatch('increment')</span>
+      <span class="token literal-property property">add</span><span class="token operator">:</span> <span class="token string">'increment'</span> 
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="组合-action"><a href="#组合-action" class="header-anchor">#</a> 组合 Action</h3> <p>Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？</p> <p>在 Mpx 中，action 永远返回一个 Promise，你可以在定义 action 手动返回一个 Promise，即使你没有这样做，框架也会对你 action 的返回值进行 <code>Promise.resolve(returned)</code> 包装，确保你可以使用 Promise 的方式处理多个 action 之间的异步组合：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token function">actionA</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'someMutation'</span><span class="token punctuation">)</span>
+        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>现在你可以通过 <code>then</code> 方法获取 <code>actionA</code> 执行完毕的时机：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'actionA'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>在另外一个 action 中也可以通过这种方式进行一系列异步调用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token function">actionB</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'actionA'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'someOtherMutation'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>如果我们利用 <a href="https://tc39.github.io/ecmascript-asyncawait/" target="_blank" rel="noopener noreferrer">async / await<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，我们能够更方便地对一系列异步操作进行组合：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 假设 getData() 和 getOtherData() 返回的是 Promise</span>
+
+<span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token keyword">async</span> <span class="token function">actionA</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'gotData'</span><span class="token punctuation">,</span> <span class="token keyword">await</span> <span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token keyword">async</span> <span class="token function">actionB</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">await</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'actionA'</span><span class="token punctuation">)</span> <span class="token comment">// 等待 actionA 完成</span>
+    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'gotOtherData'</span><span class="token punctuation">,</span> <span class="token keyword">await</span> <span class="token function">getOtherData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="modules"><a href="#modules" class="header-anchor">#</a> Modules</h2> <blockquote><p>Mpx 虽然支持了 modules，但并不推荐使用。在 Mpx 中，我们更推荐使用[多实例模式](#多实例 store)进行对应用状态进行模块划分</p></blockquote> <p>在 Mpx 中，modules 的设计与 vuex 中基本保持一致，在 createStore 中将子模块配置传入 modules 配置项中即可使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">const</span> moduleB <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    moduleA<span class="token punctuation">,</span>
+    moduleB
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>moduleA <span class="token comment">// -&gt; moduleA 的状态</span>
+store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>moduleB <span class="token comment">// -&gt; moduleB 的状态</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> store
+</code></pre></div><blockquote><p>Mpx 并未实现 vuex 中的命名空间，除 state 外的所有属性（getters / mutations / actions）将被平铺展开到根 store 的对应空间下。在多实例 store 中，我们的实现方式则与命名空间高度相似。</p></blockquote> <h3 id="模块的局部状态"><a href="#模块的局部状态" class="header-anchor">#</a> 模块的局部状态</h3> <p>对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 这里的 state 对象是模块的局部状态</span>
+      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">doubleCount</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>对于模块内部的 action，局部状态通过 <code>context.state</code> 访问，根状态则通过 <code>context.rootState</code> 访问：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">incrementIfOddOnRootSum</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> state<span class="token punctuation">,</span> commit<span class="token punctuation">,</span> rootState <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count <span class="token operator">+</span> rootState<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>对于模块内部的 getter，根状态能通过第三个参数访问：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token comment">// ...</span>
+  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">sumWithRootCount</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">+</span> rootState<span class="token punctuation">.</span>count
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="模块在组件中的引入方式"><a href="#模块在组件中的引入方式" class="header-anchor">#</a> 模块在组件中的引入方式</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token number">1</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token function-variable function">getName</span><span class="token operator">:</span> <span class="token parameter">s</span> <span class="token operator">=&gt;</span> s<span class="token punctuation">.</span>name
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">b</span><span class="token operator">:</span> moduleB
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// 我们支持了多种方式引入子模块中的 state</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 通过函数引入</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token function-variable function">nameA</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>a<span class="token punctuation">.</span>name
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// 通过路径字符串引入</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">nameA2</span><span class="token operator">:</span> <span class="token string">'a.name'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// 通过传入模块路径引入</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// 对于 getters / mutations / actions，由于我们没有实现 namespace，子模块当中定义的 getters / mutations / actions 都能在根空间下直接访问，正常调用映射方法即可</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token string">'getName'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="多实例-store"><a href="#多实例-store" class="header-anchor">#</a> 多实例 store</h2> <p>在 Mpx 中，我们允许在一个应用下创建多个 store 实例，进行模块化分布式的数据管理，同时提供了 deps 声明模块依赖的机制，让用户自由组合多个 store 实例并基于这些已有的 store 创建新的继承 store。在实际业务使用中，我们发现多实例模式的灵活性远高于 module，更加适合跨团队合作当中的数据管理。</p> <p>使用多实例 store 的方式非常简单，你只需要多次调用 <code>createStore</code> api 创建出多个 store 示例，并分别将其注入到组件中即可使用，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> storeA <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">countA</span><span class="token operator">:</span> <span class="token number">0</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">incrementA</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      state<span class="token punctuation">.</span>countA<span class="token operator">++</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">const</span> storeB <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">countB</span><span class="token operator">:</span> <span class="token number">0</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">incrementB</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      state<span class="token punctuation">.</span>countB<span class="token operator">++</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+    <span class="token operator">...</span>storeA<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'countA'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token operator">...</span>storeB<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'countB'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+    <span class="token operator">...</span>storeA<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'incrementA'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token operator">...</span>storeB<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'incrementB'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><blockquote><p>可以看到 Mpx 中的 map 辅助方法都挂载在 store 实例上，正是为了支持多实例 store 的实现</p></blockquote> <h3 id="合并继承多实例-store"><a href="#合并继承多实例-store" class="header-anchor">#</a> 合并继承多实例 store</h3> <p>在实际的跨团队业务当中，我们既希望不同团队间的数据管理尽量解耦，也希望一些共同的部分能够复用，这就要求我们的 store 实例可以以某种方式组合起来使用，我们提供了 deps 能来实现多实例 store 的合并与继承。</p> <p>承接上面的示例，我们基于 storeA 和 storeB 创建一个新的 storeC，在 storeC 当中可以定义自身的独立状态，也能基于 storeA 和 storeB 进行状态衍生：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> storeA <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">countA</span><span class="token operator">:</span> <span class="token number">0</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">incrementA</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      state<span class="token punctuation">.</span>countA<span class="token operator">++</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">const</span> storeB <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">countB</span><span class="token operator">:</span> <span class="token number">0</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">incrementB</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      state<span class="token punctuation">.</span>countB<span class="token operator">++</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">const</span> storeC <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">countC</span><span class="token operator">:</span> <span class="token number">0</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">abc</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 此处 state.storeA 指向了原始的 storeA.state</span>
+      <span class="token keyword">return</span> state<span class="token punctuation">.</span>storeA<span class="token punctuation">.</span>countA <span class="token operator">+</span> state<span class="token punctuation">.</span>storeB<span class="token punctuation">.</span>countB <span class="token operator">+</span> state<span class="token punctuation">.</span>countC
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">incrementC</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      state<span class="token punctuation">.</span>countC<span class="token operator">++</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">incrementB</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// storeC内部也可以通过命名空间路径的方式提交 storeB 的 mutation</span>
+      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'storeB.incrementB'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 此处 deps 声明了 storeC 的依赖，依赖中的 state / getters / mutations / actions 都会以 deps 中的 key 为命名空间存放在 storeC 对应的域下</span>
+  <span class="token literal-property property">deps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    storeA<span class="token punctuation">,</span>
+    storeB
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 通过继承合并得到的 storeC，我们可以完整访问其依赖 storeA / storeB</span>
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+    <span class="token comment">// 使用路径字符串或函数映射，可以看出和 modules 中 mapState 的方式非常类似</span>
+    <span class="token operator">...</span>storeC<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">countA</span><span class="token operator">:</span> <span class="token string">'storeA.countA'</span><span class="token punctuation">,</span>
+      <span class="token function-variable function">countA2</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>storeA<span class="token punctuation">.</span>countA
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// 传入命名空间参数映射 storeB 中的 countB</span>
+    <span class="token operator">...</span>storeC<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">'storeB'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'countB'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// 映射基于 storeA/B/C 衍生得到的 getters</span>
+    <span class="token operator">...</span>storeC<span class="token punctuation">.</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'abc'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+    <span class="token comment">// mutation不支持函数映射</span>
+    <span class="token comment">// 下面代码以三种方式分别映射了increment、incrementB和incrementC</span>
+    <span class="token operator">...</span>storeC<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">incrementA</span><span class="token operator">:</span> <span class="token string">'storeA.incrementA'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token operator">...</span>storeC<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token string">'storeB'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'incrementB'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token operator">...</span>storeC<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'incrementC'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><blockquote><p>简单来讲，作为 deps 的 store 会以注册在 deps 中的 key 值作为命名空间，将其原始的 state / getters / mutations / actions 存放在新生成 store 对应的域下，便于新 store 对其进行访问并衍生出新的数据或操作，如上述示例中，storeA.state 会存放在 storeC.state.storeA 中，对于 getters / mutations / actions 亦然。</p></blockquote> <h2 id="在-typescript-中使用-store"><a href="#在-typescript-中使用-store" class="header-anchor">#</a> 在 Typescript 中使用 store</h2> <p>Mpx 自 2.2 版本开始支持 Typescript，为了更好地支持 store 中的类型推导，我们针对 Typescript 环境提供了变种的 store api <code>createStoreWithThis</code> 进行 store 创建，该 api 最主要的变化在于定义 getters，mutations 和 actions 时，自身的 state，getters 等属性不再通过参数传入，而是会挂载到函数的执行上下文 <code>this</code> 当中，通过 this.state 或 this.getters 的方式进行访问，简单的使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">aa</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">bb</span><span class="token operator">:</span> <span class="token number">2</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">cc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 使用 this.state 访问 state</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>aa <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bb
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">doSth3</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 使用 this.getters 访问 getter</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>getters<span class="token punctuation">.</span>cc<span class="token punctuation">)</span>
+      <span class="token keyword">return</span> <span class="token boolean">false</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>详细的使用方式及推导规则请查看 <a href="/guide/tool/ts.html">Typescript 支持</a>章节。</p> <h2 id="use-store-in-composition-api"><a href="#use-store-in-composition-api" class="header-anchor">#</a> 在组合式 API 中使用 store </h2> <p>Mpx 自 2.8 版本完整支持了组合式 API 的开发方式，虽然在组合式 API 中我们首推使用 <a href="/guide/advance/pinia.html">pinia</a> 作为外部状态管理方案，不过旧的 store 在组合式 API 中仍然可以使用，我们提供了新的 <code>mapStateToRefs</code> 和 <code>mapGettersToRefs</code> 便于用户在组合式 API 中访问 <code>state</code> 和 <code>getters</code>，而对于 <code>mutations</code> 和 <code>actions</code>，用户可以直接调用 store 实例上的 <code>commit</code> 和 <code>dispatch</code> 方法进行调用，或者使用原有的 <code>map*</code> API 进行映射访问，简单使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage<span class="token punctuation">,</span> createStoreWithThis<span class="token punctuation">,</span> watchEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">123</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">doubleCount</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">addCount</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token operator">++</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">subCount</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token operator">--</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> count <span class="token punctuation">}</span> <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">mapStateToRefs</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'count'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> doubleCount <span class="token punctuation">}</span> <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">mapGettersToRefs</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'doubleCount'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> addCount <span class="token punctuation">}</span> <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'addCount'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+
+    <span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">,</span> doubleCount<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      count<span class="token punctuation">,</span>
+      doubleCount<span class="token punctuation">,</span>
+      addCount<span class="token punctuation">,</span>
+      <span class="token function">subCount</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token comment">// 两种方式均可以进行 mutations 调用，actions 同理</span>
+        store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'subCount'</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/option-chain.html" class="prev">
+        模版内可选链表达式
+      </a></span> <span class="next"><a href="/guide/advance/pinia.html">
+        状态管理（pinia）
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/80.41418749.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/subpackage.html b/docs-vuepress/.vuepress/dist/guide/advance/subpackage.html
new file mode 100644
index 0000000000..79df9e595e
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/subpackage.html
@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>使用分包 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/81.16e2cc83.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" aria-current="page" class="active sidebar-link">使用分包</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/subpackage.html#原生语法注册分包" class="sidebar-link">原生语法注册分包</a></li><li class="sidebar-sub-header"><a href="/guide/advance/subpackage.html#packages-语法注册分包" class="sidebar-link">packages 语法注册分包</a></li><li class="sidebar-sub-header"><a href="/guide/advance/subpackage.html#独立分包" class="sidebar-link">独立分包</a></li><li class="sidebar-sub-header"><a href="/guide/advance/subpackage.html#分包预下载" class="sidebar-link">分包预下载</a></li><li class="sidebar-sub-header"><a href="/guide/advance/subpackage.html#分包注意事项" class="sidebar-link">分包注意事项</a></li></ul></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用分包"><a href="#使用分包" class="header-anchor">#</a> 使用分包</h1> <p>作为一个对 performance 极度重视的框架，分包作为提升小程序体验的重要能力，框架对各种类型的分包能力进行了完善支持。</p> <blockquote><p>分包是小程序平台提供的原生能力，mpx是对该能力做了部分加强，目前各大主流小程序平台都已支持分包，且框架在可能的情况下进行了抹平。</p></blockquote> <blockquote><p>使用分包一定要记得阅读下面的<a href="#%E5%88%86%E5%8C%85%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9">分包注意事项</a></p></blockquote> <h2 id="原生语法注册分包"><a href="#原生语法注册分包" class="header-anchor">#</a> 原生语法注册分包</h2> <p>Mpx 支持小程序原生语法注册分包，并且在框架层面对不同平台的的差异进行了抹平，我们以微信小程序原生语法注册分包为例。</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
+  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token string">&quot;pages/index/index&quot;</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token property">&quot;subPackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">{</span>
+      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span><span class="token punctuation">,</span>
+      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token string">&quot;pages/other/other&quot;</span><span class="token punctuation">,</span>
+        <span class="token string">&quot;pages/other/other2&quot;</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="packages-语法注册分包"><a href="#packages-语法注册分包" class="header-anchor">#</a> packages 语法注册分包</h2> <p>Mpx 提供 packages 语法来对小程序的主包页面和分包划分能力进行增强，使用 packages 语法可以灵活的对业务进行拆分，允许以 npm 包的形式进行
+主包页面和分包注册，且分包名和页面路径可自定义，十分有利于大型多团队开发的项目维护。</p> <h3 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h3> <p>Mpx 拓展了 app.json 的语法，新增了 packages 域，用来声明依赖的 packages，packages 可嵌套依赖。</p> <h4 id="注册主包页面"><a href="#注册主包页面" class="header-anchor">#</a> 注册主包页面</h4> <p>首先我们介绍下 packages 注册主包页面的用法，在 packages 中直接配置资源路径，Mpx 会去读取该资源中 json 区块中的 pages 属性，合并到主包页面配置中。</p> <div class="language-html extra-class"><pre class="language-html"><code>// @file src/app.mpx
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;./pages/index/index&quot;</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;{npmPackage || relativePathToPackage}/index&quot;</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+// @file src/packages/index.mpx
+// 注意确保页面路径的唯一性
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;./pages/other/other&quot;</span><span class="token punctuation">,</span>
+      <span class="token string">&quot;./pages/other/other2&quot;</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>打包结果：dist/app.json</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
+  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token string">&quot;pages/index/index&quot;</span><span class="token punctuation">,</span>
+    <span class="token string">&quot;pages/other/other&quot;</span><span class="token punctuation">,</span>
+    <span class="token string">&quot;pages/other/other2&quot;</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h4 id="注册分包"><a href="#注册分包" class="header-anchor">#</a> 注册分包</h4> <p>Mpx 会将 packages 域下的路径带 root 为 key 的 query 解析注册为分包，使用 packages 语法注册分包，只需要在 packages 中配置资源路径添加 <code>root=xxx</code>，root的值即为分包名。</p> <div class="language-html extra-class"><pre class="language-html"><code>// @file src/app.mpx
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;./pages/index/index&quot;</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;{npmPackage || relativePathToPackage}/index?root=test&quot;</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+// @file src/packages/index.mpx (子包的入口文件)
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;./pages/other/other&quot;</span><span class="token punctuation">,</span>
+      <span class="token string">&quot;./pages/other/other2&quot;</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>打包结果：dist/app.json</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
+  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token string">&quot;pages/index/index&quot;</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token property">&quot;subPackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">{</span>
+      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span><span class="token punctuation">,</span>
+      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token string">&quot;pages/other/other&quot;</span><span class="token punctuation">,</span>
+        <span class="token string">&quot;pages/other/other2&quot;</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>由上可见，经过我们的编译过程，packages 中注册的页面可按照原始的路径被合并入主包页面或注册为分包，
+这样开发者可以不用考虑自己在被依赖时页面路径是怎么样的，也可以直接将调试用的app.mpx作为依赖入口直接暴露出去，
+对于主app的开发者来说也不需要了解依赖内部的细节，只需要在packages中声明自己所需的依赖即可。</p> <h3 id="注意事项"><a href="#注意事项" class="header-anchor">#</a> 注意事项</h3> <ul><li>依赖的开发者在自己的入口 app.mpx 中注册页面时对于本地页面一定要使用相对路径进行注册，否则在主app中进行编译时会找不到对应的页面</li> <li>不管是用 json 还是 mpx 格式定义 package 入口，编译时永远只会解析 json 且只会关注 json 中的 pages 和 packages 域，其余所有东西在主app编译时都会被忽略</li> <li>由于我们是将 packages 中注册的页面按照原始的路径合并到主 app 当中，有可能会出现路径名冲突。<br>
+这种情况下编译会报出响应错误提示用户解决冲突，为了避免这种情况的发生，依赖的提供者最好将自己内部的页面放置在能够描述依赖特性的子文件夹下。</li></ul> <p>例如一个包叫login，建议包内页面文件目录为：</p> <div class="language- extra-class"><pre class="language-text"><code>project
+│   app.mpx  
+└───pages
+    └───login
+        │   page1.mpx
+        │   page2.mpx
+        │   ...
+</code></pre></div><h2 id="独立分包"><a href="#独立分包" class="header-anchor">#</a> 独立分包</h2> <p>Mpx目前已支持独立分包构建，使用 <a href="#packages">packages</a> 语法声明分包时只需要在后面添加 <code>independent=true</code> query 即可，同时也支持原生语法声明。
+如下方示例声明 packageA 分包为独立分包</p> <p><strong>示例：</strong></p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token comment">// src/app.mpx 文件中 json 块</span>
+
+<span class="token comment">// Mpx packages 方式</span>
+<span class="token punctuation">{</span>
+  <span class="token property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token string">&quot;packageA/app.mpx?root=packageA&amp;independent=true&quot;</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token comment">// 微信原生方式</span>
+<span class="token punctuation">{</span>
+  <span class="token property">&quot;subpackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">{</span>
+      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;packageA&quot;</span><span class="token punctuation">,</span>
+      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token string">&quot;pages/index&quot;</span>
+      <span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token property">&quot;independent&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>需要注意的是，由于独立分包可以独立于主包和其他分包运行，从独立分包页面进入小程序时，主包中的相应初始化逻辑并不会执行，如果独立分包中多个页面需要某种通用初始化逻辑时就无法优雅的实现，
+Mpx框架针对独立分包场景提供了独立分包初始化逻辑执行能力。</p> <p>对于使用 packages 方式声明的独立分包，默认将 .mpx 文件自身的 script 块作为初始化逻辑执行。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--src/packagesA/app.mpx，packageA 独立分包入口文件--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">usePromise</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> 
+<span class="token keyword">if</span> <span class="token punctuation">(</span>isIndependent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// do some in independent package</span>
+<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+    <span class="token comment">// do some not independent package</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token punctuation">{</span>
+  <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token string">&quot;./pages/index&quot;</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>上方代码中 独立分包 packageA 的入口文件 app.mpx 中的 script block 代码会默认在独立分包初始化时执行，Mpx 同时提供了全局变量 <code>isIndependent</code> 标识当前代码执行环境是否为独立分包来进行特定逻辑区分</p> <p>如果你不想走这个默认的初始化逻辑执行规则，想自定义一个 js 文件存储当前独立分包的初始化逻辑，我们支持 independent 配置项直接配置为初始化逻辑文件地址</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token comment">// src/app.mpx 文件中 json 块</span>
+<span class="token comment">// Mpx packages 方式</span>
+<span class="token punctuation">{</span>
+  <span class="token property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token string">&quot;packageA/app.mpx?root=packageA&amp;independent=./common&quot;</span> <span class="token comment">// 路径上下文为 packageA 文件夹</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token comment">// 微信原生方式</span>
+<span class="token punctuation">{</span>
+  <span class="token property">&quot;subpackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">{</span>
+      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;packageA&quot;</span><span class="token punctuation">,</span>
+      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token string">&quot;pages/index&quot;</span>
+      <span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token property">&quot;independent&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./common&quot;</span> <span class="token comment">// 路径上下文为 packageA 文件夹</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/pacakgeA/common.js</span>
+<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">usePromise</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token keyword">if</span> <span class="token punctuation">(</span>isIndependent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// do some in independent package</span>
+<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+    <span class="token comment">// do some not independent package</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>注意上方配置 independent 为初始化逻辑文件地址时，路径相对地址上下文为 packageA</p> <h2 id="分包预下载"><a href="#分包预下载" class="header-anchor">#</a> 分包预下载</h2> <p>分包预下载是在 json中 新增一个 preloadRule 字段，mpx 打包时候会原封不动把这个部分放到 app.json 中，所以只需要按照 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html" target="_blank" rel="noopener noreferrer">微信小程序官方文档 - 分包预下载<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 或者 <a href="https://opendocs.alipay.com/mini/framework/subpackages" target="_blank" rel="noopener noreferrer">支付宝小程序官方文档 - 分包预下载<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置即可。</p> <p><strong>示例：</strong></p> <div class="language-html extra-class"><pre class="language-html"><code>// @file src/app.mpx
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;./pages/index/index&quot;</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;{npmPackage || relativePathToPackage}/index?root=xxx&quot;</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;preloadRule&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;pages/index&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token string-property property">&quot;network&quot;</span><span class="token operator">:</span> <span class="token string">&quot;all&quot;</span><span class="token punctuation">,</span>
+        <span class="token string-property property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;important&quot;</span><span class="token punctuation">]</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token string-property property">&quot;sub1/index&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token string-property property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;hello&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;sub3&quot;</span><span class="token punctuation">]</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+// @file src/packages/index.mpx (子包的入口文件)
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;./pages/other/other&quot;</span><span class="token punctuation">,</span>
+      <span class="token string">&quot;./pages/other/other2&quot;</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>打包结果：dist/app.json</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
+  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token string">&quot;pages/index/index&quot;</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token property">&quot;subPackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">{</span>
+      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;xxx&quot;</span><span class="token punctuation">,</span>
+      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token string">&quot;pages/other/other&quot;</span><span class="token punctuation">,</span>
+        <span class="token string">&quot;pages/other/other2&quot;</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token property">&quot;preloadRule&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;pages/index&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token property">&quot;network&quot;</span><span class="token operator">:</span> <span class="token string">&quot;all&quot;</span><span class="token punctuation">,</span>
+      <span class="token property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;important&quot;</span><span class="token punctuation">]</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;sub1/index&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;hello&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;sub3&quot;</span><span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>  
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="分包注意事项"><a href="#分包注意事项" class="header-anchor">#</a> 分包注意事项</h2> <p>当我们使用分包加载时，依赖包内的跳转路径需注意，比如要跳转到other2页面</p> <ul><li>不用分包时会是：/pages/other/other2</li> <li>使用分包后应为：/test/pages/other/other2</li></ul> <p>即前面会多?root={rootKey}的rootKey这一层</p> <p>为了解决这个问题，有三种方案：</p> <ul><li><p>import的时候在最后加'?resolve', 例如: <code>import testPagePath from '../pages/testPage.mpx?resolve'</code> , 编译时就会把它处理成正确的完整的绝对路径。</p></li> <li><p>使用相对路径跳转。</p></li> <li><p>定死使用的分包路径名，直接写/{rootKey}/pages/xxx （极度不推荐，尤其在分包可能被多方引用的情况时）</p></li></ul> <p>这里我们建议使用第一种方式。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/npm.html" class="prev">
+        使用npm
+      </a></span> <span class="next"><a href="/guide/advance/async-subpackage.html">
+        分包异步化
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/81.16e2cc83.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/utility-first-css.html b/docs-vuepress/.vuepress/dist/guide/advance/utility-first-css.html
new file mode 100644
index 0000000000..7fc7a64234
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/advance/utility-first-css.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>使用原子类 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/82.56c0d7c1.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" aria-current="page" class="active sidebar-link">使用原子类</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/utility-first-css.html#compile-config" class="sidebar-link">原子类环境配置</a></li><li class="sidebar-sub-header"><a href="/guide/advance/utility-first-css.html#config-supports" class="sidebar-link">功能支持范围</a></li><li class="sidebar-sub-header"><a href="/guide/advance/utility-first-css.html#utility-supports" class="sidebar-link">工具类可用范围</a></li><li class="sidebar-sub-header"><a href="/guide/advance/utility-first-css.html#attentions" class="sidebar-link">小程序原子类使用注意点</a></li></ul></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用原子类"><a href="#使用原子类" class="header-anchor">#</a> 使用原子类</h1> <p>原子类(utility-first CSS)是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，我们耳熟能详的有<a href="https://github.com/" target="_blank" rel="noopener noreferrer">Github<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<a href="https://openai.com/" target="_blank" rel="noopener noreferrer">OpenAI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<a href="https://top10.netflix.com/" target="_blank" rel="noopener noreferrer">Netflix<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+和<a href="https://www.jpl.nasa.gov/" target="_blank" rel="noopener noreferrer">NASA官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+等。使用原子类离不开原子类框架的支持，常用的原子类框架有 <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwindcss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://windicss.org/" target="_blank" rel="noopener noreferrer">Windicss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+和 <a href="https://unocss.dev/" target="_blank" rel="noopener noreferrer">Unocss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等，而在 <strong>Mpx2.9</strong> 以后，我们在框架中内置了基于 unocss
+的原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx
+页面/组件模板中直接使用一些预定义的基础样式类，诸如flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：</p> <div class="language-html extra-class"><pre class="language-html"><code>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-base text-black font-semibold mb-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+          Erin Lindford
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-gray-500 font-medium pb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+          Product Engineer
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span>
+          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+          Message
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/Or3aaN-mmxV8pK-LmEVPm_demo.png" alt="utility-css-demo"></p> <p>相较于传统的自定义类编写样式的方式，使用原子类能给你带来以下这些好处：</p> <ul><li><strong>不用再烦恼于为自定义类取类名</strong>，传统样式开发中，我们仅仅是为某个元素定义样式就需要绞尽脑汁发明一些抽象的类名，还得提防类名冲突，使用原子类可以完全将你从这种琐碎无趣的工作中解放；</li> <li><strong>停止css体积的无序增长</strong>，传统样式开发中，css体积会随着你的迭代不断增长，而在原子类中，一切样式都可以复用，你几乎不需要编写新的css；</li> <li><strong>让调整样式变得更加安全</strong>，传统css是全局的，当你修改某个样式时无法保障其不会破坏其他地方的样式，而你在模板中使用的原子类是本地的，你完全不用担心修改它会影响其他地方。</li></ul> <p>而相较于使用内联样式，原子类也有一些重要的优势：</p> <ul><li><strong>约束下的设计</strong>，使用内联样式时，里面的每一个数值都是魔法数字(magic number)
+，而通过原子工具类，你可以选择一些符合预定义设计规范的样式，便于构筑具有视觉一致性的UI；</li> <li><strong>响应式设计</strong>，你无法在内联样式中使用媒体查询，然而通过原子类框架中提供的响应式工具，你可以轻而易举地构建出响应式界面；</li> <li><strong>Hover、focus和其他状态</strong>，使用内联样式无法定义特定状态下的样式，如hover和focus，通过原子类框架的状态变量能力，我们可以轻松为这些状态定义样式。</li></ul> <p>看到这里相信你已经迫不及待地想要在 Mpx 中体验原子类开发了吧，可以根据下面的指南开启你的原子类之旅。</p> <h2 id="compile-config"><a href="#compile-config" class="header-anchor">#</a> 原子类环境配置 </h2> <p>如果你想在新项目中使用原子类，可以使用最新版本的 <code>@mpxjs/cli</code> 创建项目，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用 unocss 的原子类，关于可使用的工具类可参考 <a href="https://unocss.dev/interactive/" target="_blank" rel="noopener noreferrer">unocss 交互示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>及本指南下方的<a href="#%E5%B7%A5%E5%85%B7%E7%B1%BB%E6%94%AF%E6%8C%81%E8%8C%83%E5%9B%B4">工具类支持范围</a>。</p> <blockquote><p>与 web 中使用 unocss 不同，在 Mpx 中使用 unocss 不需要显式引入虚拟模块 <code>import 'uno.css'</code> 来承载生成的样式内容，这是由于在
+Mpx 中，我们充分考虑到小程序分包架构的特殊性和主包体积的重要性，结合 Mpx
+强大的分包构建能力，对生成的原子工具类的使用情况进行分析，将其自动注入到合适的主包或者分包中，来达到全局体积分配的最优（在没有内容冗余的情况下尽可能输出到分包）。</p></blockquote> <p>对于使用 <code>@mpxjs/cli@3.0</code> 新版脚手架创建的项目，可以在项目初始化时选择<code>需要使用原子类</code>
+选项，或在已有项目下执行<code>mpx add @mpxjs/vue-cli-plugin-mpx-utility-first-css</code>以激活原子类相关编译配置。</p> <p>对于使用旧版脚手架创建的项目，可以通过修改项目编译配置以激活原子类支持：</p> <ol><li>安装相关依赖：</li></ol> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token punctuation">{</span>
+  <span class="token comment">//...</span>
+  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;@mpxjs/unocss-base&quot;</span><span class="token operator">:</span> <span class="token string">'^2.9.0'</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/unocss-plugin&quot;</span><span class="token operator">:</span> <span class="token string">'^2.9.0'</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><ol start="2"><li>新建uno.config.js，基础配置内容如下：</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'unocss'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> presetMpx <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/unocss-base'</span><span class="token punctuation">)</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token function">presetMpx</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><ol start="3"><li>注册<code>MpxUnocssPlugin</code>，在<code>build/getPlugins</code>中添加如下代码：</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> MpxUnocssPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/unocss-plugin'</span><span class="token punctuation">)</span>
+<span class="token comment">// ...</span>
+plugins<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">MpxUnocssPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+</code></pre></div><p>即可在项目模版中使用基于<code>unocss</code>的原子类功能，<code>unocss</code>默认的preset兼容<code>tailwindcss</code>/<code>windicss</code>
+，可以通过查阅<a href="https://tailwindcss.com/docs/installation" target="_blank" rel="noopener noreferrer">tailwindcss文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://windicss.org/utilities/general/colors.html" target="_blank" rel="noopener noreferrer">windicss文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>或<a href="https://unocss.dev/interactive/" target="_blank" rel="noopener noreferrer">unocss可交互文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>进行探索使用。</p> <p>关于<code>uno.config.js</code>可用配置项及<code>@mpxjs/unocss-plugin</code>及<code>@mpxjs/unocss-base</code>的配置项请参考<a href="/api/compile.html#mpxunocssplugin-配置">API文档</a></p> <h3 id="vscode插件支持"><a href="#vscode插件支持" class="header-anchor">#</a> vscode插件支持</h3> <p>推荐使用unocss官方插件https://unocss.dev/integrations/vscode
+mpx文件则需要在unocss.config.js添加如下参数才能生效</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'unocss'</span><span class="token punctuation">)</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.mpx($|\?)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="config-supports"><a href="#config-supports" class="header-anchor">#</a> 功能支持范围 </h2> <p>我们支持了<code>unocss</code>大部分的配置项及功能，并针对小程序技术规范提供了一些额外的功能支持，如分包输出和样式隔离等功能，以下为详细功能支持范围。</p> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Load Config</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">支持windi默认的全部配置文件路径，并支持在plugin options中手动传入配置对象或配置文件路径</td></tr> <tr><td style="text-align:left;">Rules</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Shortcuts</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Theme</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Variants</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Extractors</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Transformers</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">内建支持variant groups、directives和alias，不支持自定义transformers</td></tr> <tr><td style="text-align:left;">Preflights</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">支持内建和自定义preflight配置</td></tr> <tr><td style="text-align:left;">Presets</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Safelist</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">支持全局配置和模版注释语法局部配置声明safelist</td></tr> <tr><td style="text-align:left;">Value Auto-infer</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Variant Groups</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Directives</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Alias</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Attributify Mode</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序模版不支持不识别的自定义属性</td></tr> <tr><td style="text-align:left;">Responsive Design</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Dark Mode</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Important Prefix</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Layers Ordering</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">分包输出/公共样式抽离</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">可通过设置<code>@mpxjs/unocss-plugin</code>配置项<code>minCount</code>决定公共样式范围</td></tr> <tr><td style="text-align:left;">组件分包异步/组件样式隔离</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">可通过全局配置和模版注释语法局部配置<code>styleIsolation='isolated'</code>支持相关场景的原子类使用</td></tr> <tr><td style="text-align:left;">Rpx样式单位</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">小程序类名特殊字符转义</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">静态类名和动态类名均以支持</td></tr> <tr><td style="text-align:left;">跨平台输出</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">支持输出Mpx已支持的所有小程序平台及Web</td></tr></tbody></table> <h2 id="utility-supports"><a href="#utility-supports" class="header-anchor">#</a> 工具类可用范围 </h2> <p>经过我们的详细测试，大部分<code>unocss</code>
+提供的工具类都能在小程序环境下正常工作，但是也有部分工具类由于小程序底层环境差异无法正常运行，以下是详细的测试结果，参考<a href="https://windicss.org/utilities/general/colors.html" target="_blank" rel="noopener noreferrer">windicss文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+进行分类组织。</p> <h3 id="general"><a href="#general" class="header-anchor">#</a> General</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Colors</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Typography</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">不支持子项：Font Variant Numeric Tab Size</td></tr> <tr><td style="text-align:left;">SVG</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持svg标签</td></tr> <tr><td style="text-align:left;">Variants</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">不支持子项：Child Selectors，因为小程序不支持*选择器</td></tr></tbody></table> <h3 id="accessibility"><a href="#accessibility" class="header-anchor">#</a> Accessibility</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Screen Readers</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="animations"><a href="#animations" class="header-anchor">#</a> Animations</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Animation</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Transforms</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Transitions</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="backgrounds"><a href="#backgrounds" class="header-anchor">#</a> Backgrounds</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Background Attachment</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Clip</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Color</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Opacity</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">需要和Background Color一起使用</td></tr> <tr><td style="text-align:left;">Background Position</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Repeat</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Size</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Origin</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Gradient Direction</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Gradient From</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Gradient Via</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Gradient To</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Blend Mode</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="behaviors"><a href="#behaviors" class="header-anchor">#</a> Behaviors</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Box Decoration Break</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Image Rendering</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">image-render-edge 真机不支持</td></tr> <tr><td style="text-align:left;">Listings</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Overflow</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Overscroll Behavior</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Placeholder</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">微信小程序 input 需要通过 placeholder-style 设置 placeholder 样式</td></tr></tbody></table> <h3 id="borders"><a href="#borders" class="header-anchor">#</a> Borders</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Border Radius</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Border Width</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Border Color</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Border Opacity</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Border Style</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Divider Width</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的css选择器</td></tr> <tr><td style="text-align:left;">Divider Color</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的css选择器</td></tr> <tr><td style="text-align:left;">Divider Opacity</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的css选择器</td></tr> <tr><td style="text-align:left;">Divider Style</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的css选择器</td></tr> <tr><td style="text-align:left;">Outline</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Outline Solid</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Outline Dotted</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Ring Width</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Ring Color</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Ring Opacity</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Ring Offset Width</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Ring Offset Color</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="effects"><a href="#effects" class="header-anchor">#</a> Effects</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Box Shadow</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Opacity</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Mix Blend Mode</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="filters"><a href="#filters" class="header-anchor">#</a> Filters</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Filter</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Backdrop Filter</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="interactivity"><a href="#interactivity" class="header-anchor">#</a> Interactivity</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Accent Color</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Appearance</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Cursor</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Caret</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Pointer Events</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Resize</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Scroll Behavior</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Touch Action</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">User Select</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Will Change</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr></tbody></table> <h3 id="layout"><a href="#layout" class="header-anchor">#</a> Layout</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Columns</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Container</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Display</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Flex</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Grid</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Positioning</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">小程序图片设置object-fit 无效，可使用mode代替</td></tr> <tr><td style="text-align:left;">Sizing</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Spacing</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">Space Between小程序不支持生成的css选择器</td></tr> <tr><td style="text-align:left;">Tables</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">小程序不支持部分table样式</td></tr></tbody></table> <h2 id="attentions"><a href="#attentions" class="header-anchor">#</a> 小程序原子类使用注意点 </h2> <p>小程序由于底层环境差异，我们在支持和使用原子类时有一些特殊的注意点。</p> <h3 id="escape"><a href="#escape" class="header-anchor">#</a> 特殊字符转义 </h3> <p>基于<code>unocss</code>的原子类支持<code>value auto-infer</code>（值自动推导），可以在模版中根据相关规则书写灵活的自定义值原子类，如<code>p-5px bg-[hsl(211.7,81.9%,69.6%)]</code>等，针对原子类中出现的<code>[</code> <code>(</code> <code>,</code>等特殊字符，在web中会通过转义字符<code>\</code>进行转义，由于小程序环境下不支持css选择器中出现<code>\</code>转义字符，我们内置支持了一套不带<code>\</code>的转义规则对这些特殊字符进行转义，同时替换模版和css文件中的类名，内建的默认转义规则如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> escapeMap <span class="token operator">=</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">'('</span><span class="token operator">:</span> <span class="token string">'_pl_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">')'</span><span class="token operator">:</span> <span class="token string">'_pr_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'['</span><span class="token operator">:</span> <span class="token string">'_bl_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">']'</span><span class="token operator">:</span> <span class="token string">'_br_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'{'</span><span class="token operator">:</span> <span class="token string">'_cl_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'}'</span><span class="token operator">:</span> <span class="token string">'_cr_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'#'</span><span class="token operator">:</span> <span class="token string">'_h_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'!'</span><span class="token operator">:</span> <span class="token string">'_i_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'/'</span><span class="token operator">:</span> <span class="token string">'_s_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'.'</span><span class="token operator">:</span> <span class="token string">'_d_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">':'</span><span class="token operator">:</span> <span class="token string">'_c_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">','</span><span class="token operator">:</span> <span class="token string">'_2c_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'%'</span><span class="token operator">:</span> <span class="token string">'_p_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'\''</span><span class="token operator">:</span> <span class="token string">'_q_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'&quot;'</span><span class="token operator">:</span> <span class="token string">'_dq_'</span><span class="token punctuation">,</span>
+    <span class="token string-property property">'+'</span><span class="token operator">:</span> <span class="token string">'_a_'</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">$</span><span class="token operator">:</span> <span class="token string">'_si_'</span><span class="token punctuation">,</span>
+    <span class="token comment">// unknown用于兜底不在上述范围中未知的转义字符</span>
+    <span class="token literal-property property">unknown</span><span class="token operator">:</span> <span class="token string">'_u_'</span>
+  <span class="token punctuation">}</span>
+</code></pre></div><p>与此同时，用户也可以通过传递<code>@mpxjs/unocss-plugin</code>的<a href="/api/compile.html#escapeMap"><code>escapeMap</code>配置项</a>来覆盖内建的转义规则。</p> <h3 id="subpackage"><a href="#subpackage" class="header-anchor">#</a> 原子类分包输出 </h3> <p>在web中，原子类会被全部打包输出单个样式文件，一般会放置在顶层样式表中以供全局访问，但在小程序中这种全量的输出策略并不是最优的，主要原因在于小程序中可供全局访问的主包体积存在<strong>2M大小限制</strong>，主包体积十分紧缺珍贵，Mpx在构建输出时遵循着分包优先的原则，尽可能充分利用分包体积从而减少对主包体积的占用，再进行原子类产物输出时，我们也遵循了相同的原则。</p> <p>在Mpx中，我们在收集原子类时同时记录了每个原子类的引用分包，在收集结束后根据每个原子类的分包引用数量决定该原子类应该输出到主包还是分包当中，我们在<code>@mpxjs/unocss-plugin</code>中提供了<a href="/api/compile.html#minCount"><code>minCount</code>配置项</a>来决定分包的输出规则，该配置项的默认值为2，即当一个原子类被2个或以上分包引用时，会被作为公共原子类抽取到主包中，否则输出到所属分包中，这也是全局最优的策略。当我们想要让原子类输出产物更少地占用主包体积时，我们也可以将<code>minCount</code>值调大，让原子类抽取到主包的条件更加苛刻，不过这样也会伴随着原子类分包冗余的增加。</p> <p><code>unocss.config.js</code>配置中定义的<code>safelist</code>原子类默认会输出到主包，为了组件局部使用的<code>safelist</code>有输出到分包的机会，我们在模版中提供了<a href="/api/compile.html#commentConfig"><code>注释配置</code></a>（comments config），灵感来源于<code>webpack</code>中的魔法注释（magic comments），用户可以在组件模版中通过<code>注释配置</code>声明当前组件所需的<code>safelist</code>，对应的原子类也会根据上述的规则输出到主包或分包中，使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- mpx_config_safelist: 'text-red-500 bg-blue-500' --&gt;</span>
+    <span class="token comment">&lt;!-- 动态样式中可以使用text-red-500和bg-blue-500原子类 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{classObj}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- ... --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="style-isolation"><a href="#style-isolation" class="header-anchor">#</a> 样式隔离与组件分包异步 </h3> <p>在小程序中，自定义组件的样式默认是隔离的，web中通过全局样式访问原子类的方式不再生效，不过由于小程序提供了<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB" target="_blank" rel="noopener noreferrer">样式隔离配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，我们可以将该组件样式隔离配置调整为<code>apply-shared</code>来获取页面或app中定义的原子类，但是当我们在使用传统类名和原子类混合开发或者迁移原子类的过程中，我们往往希望保留原本自定义组件的样式隔离。</p> <p>针对这种情况，我们在<code>@mpxjs/unocss-plugin</code>中提供了<a href="/api/compile.html#styleIsolation"><code>styleIsolation</code>配置项</a>，可选设置为<code>isolated</code>|<code>apply-shared</code>，当设置为<code>isolated</code>时每个组件都会通过<code>@import</code>独立引用主包或者分包的原子类样式文件，因此不会受到样式隔离的影响；当设置为<code>apply-shared</code>时，只有app和分包页面会引用对应的原子类样式文件，自定义组件需要通过配置样式隔离为<code>apply-shared</code>使原子类生效。</p> <p>在组件分包异步的情况下对应组件即使将样式隔离配置为<code>apply-shared</code>的情况下，<code>@mpxjs/unocss-plugin</code>也需要将<code>styleIsolation</code>设置为<code>isolated</code>才能正常工作，原因在于组件分包异步的情况下，组件被其他分包的页面所引用渲染，由于上述原子类样式分包输出的规则，其他分包的页面中可能并不包含当前组件所需的原子类，只有在<code>isolated</code>模式下由组件自身引用所需的原子类样式才能保证正常work，类似于<code>safelist</code>，我们也提供了<a href="/api/compile.html#commentConfig"><code>注释配置</code></a>的方式对组件的<code>styleIsolation</code>模式进行局部配置，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- mpx_config_styleIsolation: 'isolated' --&gt;</span>
+    <span class="token comment">&lt;!-- 当前组件会直接引用对应主包或分包的原子类样式 --&gt;</span>
+     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>@dark:(text-white bg-dark-500)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- ... --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/custom-output-path.html" class="prev">
+        自定义路径
+      </a></span> <span class="next"><a href="/guide/advance/ssr.html">
+        SSR
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/82.56c0d7c1.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/class-style-binding.html b/docs-vuepress/.vuepress/dist/guide/basic/class-style-binding.html
new file mode 100644
index 0000000000..b8db15d7b5
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/class-style-binding.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>类名样式绑定 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/83.ea65d6b1.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" aria-current="page" class="active sidebar-link">类名样式绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/class-style-binding.html#类名绑定" class="sidebar-link">类名绑定</a></li><li class="sidebar-sub-header"><a href="/guide/basic/class-style-binding.html#样式绑定" class="sidebar-link">样式绑定</a></li></ul></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="类名样式绑定"><a href="#类名样式绑定" class="header-anchor">#</a> 类名样式绑定</h1> <p>Mpx利用wxs完整实现了Vue中的类名样式绑定，性能优良且没有任何使用限制（很多小程序框架基于字符串解析来实现该能力，只支持在模板上写简单的字面量，大大限制了使用场景）</p> <h2 id="类名绑定"><a href="#类名绑定" class="header-anchor">#</a> 类名绑定</h2> <p>类名绑定的增强指令是wx:class，可以与普通的class属性同时存在，在视图渲染中进行合成。</p> <h3 id="对象语法"><a href="#对象语法" class="header-anchor">#</a> 对象语法</h3> <p>wx:class中传入对象，key值为类名，value值控制该类名是否生效。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!--支持传入对象字面量，此处视图的class=&quot;outer active&quot;--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ {active:active, disabled:disabled} }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--直接直接传入对象数据，此处视图的class=&quot;inner selected&quot;--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{innerClass}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">disable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">innerClass</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="数组语法"><a href="#数组语法" class="header-anchor">#</a> 数组语法</h3> <p>wx:class中传入字符串数组，字符串为类名。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!--支持传入数组字面量，此处视图的class=&quot;outer active danger&quot;--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ ['active', 'danger'] }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--直接直接传入数组数据，此处视图的class=&quot;inner selected&quot;--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{innerClass}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">innerClass</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'selected'</span><span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="样式绑定"><a href="#样式绑定" class="header-anchor">#</a> 样式绑定</h2> <p>样式的增强指令是wx:style，可以与普通的style属性同时存在，在视图渲染中进行合成。</p> <h3 id="对象语法"><a href="#对象语法" class="header-anchor">#</a> 对象语法</h3> <p>wx:style中传入用样式对象，带有横杠的样式名可以用驼峰写法来代替</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!--支持传入对象字面量，模板会显得杂乱，此处视图的style=&quot;color:red;font-size:16px;font-weight:bold;&quot;--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ {fontSize:'16px', fontWeight:'bold'} }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--更好的方式是直接传入对象数据，此处视图的style=&quot;color:blue;font-size:14px;&quot;--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{innerStyle}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">innerStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'14px'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="数组语法"><a href="#数组语法" class="header-anchor">#</a> 数组语法</h3> <p>wx:style同样支持传入数组将多个样式合成应用到视图上</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!--此处视图的style=&quot;color:blue;font-size:14px;background-color:red;&quot;--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ [baseStyle, activeStyle] }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">baseStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'14px'</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">activeStyle</span><span class="token operator">:</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'red'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/reactive.html" class="prev">
+        数据响应
+      </a></span> <span class="next"><a href="/guide/basic/conditional-render.html">
+        条件渲染
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/83.ea65d6b1.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/component.html b/docs-vuepress/.vuepress/dist/guide/basic/component.html
new file mode 100644
index 0000000000..6b1f590c6b
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/component.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>自定义组件 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/84.d50d3d09.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" aria-current="page" class="active sidebar-link">自定义组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/component.html#动态组件" class="sidebar-link">动态组件</a></li><li class="sidebar-sub-header"><a href="/guide/basic/component.html#slot" class="sidebar-link">slot</a></li></ul></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="自定义组件"><a href="#自定义组件" class="header-anchor">#</a> 自定义组件</h1> <p>Mpx中的自定义组件完全基于小程序原生的自定义组件支持，与此同时，Mpx提供的数据响应和模板增强等一系列增强能力都能在自定义组件中使用。</p> <p>原生自定义组件的规范详情查看<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="动态组件"><a href="#动态组件" class="header-anchor">#</a> 动态组件</h2> <p>Mpx中提供了使用方法类似于 Vue 的动态组件能力，这是一个基于 wx:if 实现的语法。通过对 <code>is</code> 属性进行动态绑定，可以实现在同一个挂载点切换多个组件，前提需要动态切换的组件已经在全局或者组件中完成注册。
+使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!-- current为组件名称字符串，可选范围为局部注册的自定义组件和全局注册的自定义组件 --&gt;</span>
+  <span class="token comment">&lt;!-- 当 `current`改变时，组件也会跟着切换  --&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{current}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">current</span><span class="token operator">:</span> <span class="token string">'test'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>current <span class="token operator">=</span> <span class="token string">'list'</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/list&quot;</span><span class="token punctuation">,</span>
+      <span class="token string-property property">&quot;test&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/test&quot;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="slot"><a href="#slot" class="header-anchor">#</a> slot</h2> <p>在组件中使用slot（插槽）可以使我们封装的组件更具有可扩展性，Mpx完全支持原生插槽的使用。</p> <p>简单示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 组件模板 --&gt;</span>
+<span class="token comment">&lt;!-- components/mySlot.mpx --&gt;</span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>这是组件模板<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slot1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slot2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>下面是引入 <code>mySlot</code> 组件的页面</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- index.mpx --&gt;</span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-slot</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slot1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是slot1中的内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slot2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是slot2中的内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-slot</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">multipleSlots</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 启用多slot支持</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;my-slot&quot;</span><span class="token operator">:</span> <span class="token string">&quot;components/mySlot&quot;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>更多详情可查看<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/two-way-binding.html" class="prev">
+        双向绑定
+      </a></span> <span class="next"><a href="/guide/basic/refs.html">
+        获取组件实例/节点信息
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/84.d50d3d09.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/conditional-render.html b/docs-vuepress/.vuepress/dist/guide/basic/conditional-render.html
new file mode 100644
index 0000000000..0bf8e876a2
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/conditional-render.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>条件渲染 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/85.1eed1486.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" aria-current="page" class="active sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="条件渲染"><a href="#条件渲染" class="header-anchor">#</a> 条件渲染</h1> <p>Mpx中的条件渲染与原生小程序中完全一致，详情可以查看<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>简单示例如下:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- 通过 wx:if 的语法来控制需要渲染的元素 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ score &gt; 90 }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> A <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ score &gt; 60 }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> B <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span> C <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+
+    <span class="token comment">&lt;!-- 通过 wx:show 来控制元素的显示隐藏--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ score &gt; 90 }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> very good! <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">score</span><span class="token operator">:</span> <span class="token number">80</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/class-style-binding.html" class="prev">
+        类名样式绑定
+      </a></span> <span class="next"><a href="/guide/basic/list-render.html">
+        列表渲染
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/85.1eed1486.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/css.html b/docs-vuepress/.vuepress/dist/guide/basic/css.html
new file mode 100644
index 0000000000..d862ed1e58
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/css.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>CSS 处理 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/86.1ab04b8d.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" aria-current="page" class="active sidebar-link">CSS 处理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/css.html#css-预编译" class="sidebar-link">CSS 预编译</a></li><li class="sidebar-sub-header"><a href="/guide/basic/css.html#公共样式复用" class="sidebar-link">公共样式复用</a></li><li class="sidebar-sub-header"><a href="/guide/basic/css.html#css-压缩" class="sidebar-link">CSS 压缩</a></li></ul></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-处理"><a href="#css-处理" class="header-anchor">#</a> CSS 处理</h1> <h2 id="css-预编译"><a href="#css-预编译" class="header-anchor">#</a> CSS 预编译</h2> <p>Mpx 支持 CSS 预编译处理，你可以通过在 style 标签上设置 <code>lang</code> 属性，来指定使用的 CSS 预处理器，此外需要在对应的 webpack 配置文件中
+加入对应的 loader 配置</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 使用 stylus --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+  .nav
+    width 100px
+    height 80px
+    color #f90
+    &amp;<span class="token punctuation">:</span>hover
+      background-color #f40
+      color #fff
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+
+// getRules 配置文件
+rules: [
+    {
+        test: /\.styl(us)?$/,
+        use: [
+            MpxWebpackPlugin.wxssLoader(),
+            'stylus-loader'
+        ]
+    }
+]
+</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 使用 sass  --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+  <span class="token selector">.nav</span> <span class="token punctuation">{</span>
+    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+    <span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
+    <span class="token selector">color: #f90
+    &amp;:hover</span> <span class="token punctuation">{</span>
+      <span class="token property">background-color</span><span class="token punctuation">:</span> #f40<span class="token punctuation">;</span>
+      <span class="token property">color</span><span class="token punctuation">:</span> #fff
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+
+// getRules 配置文件
+rules: [
+    {
+        test: /\.scss$/,
+        use: [
+            'css-loader',
+            'sass-loader'
+        ]
+    }
+]
+</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 使用 less --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+  <span class="token selector">.size</span> <span class="token punctuation">{</span>
+    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+    <span class="token property">height</span><span class="token punctuation">:</span> 80px
+  <span class="token punctuation">}</span>
+  <span class="token selector">.nav</span> <span class="token punctuation">{</span>
+    .<span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token property">color</span><span class="token punctuation">:</span> #f90<span class="token punctuation">;</span>
+    <span class="token selector">&amp;:hover</span> <span class="token punctuation">{</span>
+      <span class="token property">background-color</span><span class="token punctuation">:</span> #f40<span class="token punctuation">;</span>
+      <span class="token property">color</span><span class="token punctuation">:</span> #fff
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+
+// getRules 配置文件
+rules: [
+    {
+        test: /\.less$/,
+        use: [
+            'css-loader',
+            'less-loader'
+        ]
+    }
+]
+
+</code></pre></div><h2 id="公共样式复用"><a href="#公共样式复用" class="header-anchor">#</a> 公共样式复用</h2> <p>为了达到最大限度的样式复用，Mpx 提供了以下两种方式实现公共样式抽离，但是最终打包的效果有所区别。</p> <div class="language-styl extra-class"><pre class="language-styl"><code><span class="token selector"><span class="token comment">// styles/mixin.styl</span>
+.header-styl</span>
+  <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">%</span></span>
+  <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">px</span></span>
+  <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#f00</span></span>
+</code></pre></div><h3 id="style-src-复用"><a href="#style-src-复用" class="header-anchor">#</a> style src 复用</h3> <p>通过给 style 标签添加 src 属性引入外部样式，最终公共样式代码只会打包一份。</p> <div class="language-template extra-class"><pre class="language-text"><code>&lt;!-- index.mpx --&gt;
+&lt;style lang=&quot;stylus&quot; src=&quot;../styles/common.styl&quot;&gt;&lt;/style&gt;
+</code></pre></div><div class="language-template extra-class"><pre class="language-text"><code>&lt;!-- list.mpx --&gt;
+&lt;style lang=&quot;stylus&quot; src=&quot;../styles/common.styl&quot;&gt;&lt;/style&gt;
+</code></pre></div><p>Mpx 将 common.styl 中的代码经过 loader 编译后生成一份单独的 wxss 文件，这样既实现了样式抽离，又能节省打包后的代码体积。</p> <h3 id="import-复用"><a href="#import-复用" class="header-anchor">#</a> @import 复用</h3> <p>如果指定 style 标签的 lang 属性并且使用 @import 导入样式，那么这个文件经过对应的 loader 处理之后的内容会重复打包到引用它的文件目录下，并不会抽离成单独的文件，这样无形中增加了代码体积。</p> <div class="language-template extra-class"><pre class="language-text"><code>&lt;!-- index.mpx --&gt;
+&lt;style lang=&quot;stylus&quot;&gt;
+  @import &quot;../styles/mixin.styl&quot;
+&lt;/style&gt;
+</code></pre></div><div class="language-template extra-class"><pre class="language-text"><code>&lt;!-- list.mpx --&gt;
+&lt;style lang=&quot;less&quot;&gt;
+  @import &quot;../styles/mixin.less&quot;;
+&lt;/style&gt;
+</code></pre></div><p>如果导入的是一份 css 文件，则最终打包后的效果与 style src 一致。</p> <div class="language-styl extra-class"><pre class="language-styl"><code><span class="token selector"><span class="token comment">// styles/mixin.css</span>
+.header-css <span class="token punctuation">{</span></span>
+  <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">;</span></span>
+  <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span></span>
+  <span class="token property-declaration"><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#f00</span><span class="token punctuation">;</span></span>
+<span class="token punctuation">}</span>
+</code></pre></div><div class="language-template extra-class"><pre class="language-text"><code>&lt;!-- index.mpx --&gt;
+&lt;style&gt;
+  @import &quot;../styles/mixin.css&quot;;
+&lt;/style&gt;
+</code></pre></div><div class="language-template extra-class"><pre class="language-text"><code>&lt;!-- list.mpx --&gt;
+&lt;style&gt;
+  @import &quot;../styles/mixin.css&quot;;
+&lt;/style&gt;
+</code></pre></div><p>对于多个页面或组件公用的样式，建议使用 style src 形式引入，避免一份样式被内联打成多份，同时还能使用 less、scss 等提升编码效率。</p> <h2 id="css-压缩"><a href="#css-压缩" class="header-anchor">#</a> CSS 压缩</h2> <p>在 production 模式下，框架默认会使用 <a href="https://www.cssnano.cn/" target="_blank" rel="noopener noreferrer"><code>cssnano</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 对 css 内容进行压缩。</p> <p>框架默认内置 cssnano 的 default 预设，默认配置为：</p> <div class="language-js extra-class"><pre class="language-js"><code>cssnanoConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">preset</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'cssnano-preset-default'</span><span class="token punctuation">,</span> minimizeOptions<span class="token punctuation">.</span>optimisation <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>以上配置为框架内置，开发者无需手动配置。</p> <p>如果你想要使用 cssnano advanced 预设，则需要在 wxssLoader 中传入配置开启</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
+  <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(wxss|acss|css|qss|ttss|jxss|ddss)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+  <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxssLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">minimize</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">advanced</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 使用 cssnano advanced preset</span>
+        <span class="token literal-property property">optimisation</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token string-property property">'autoprefixer'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+          <span class="token string-property property">'discardUnused'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+          <span class="token string-property property">'mergeIdents'</span><span class="token operator">:</span> <span class="token boolean">true</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
+</code></pre></div><p>同时也需要安装 advanced 依赖：</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-D</span> cssnano-preset-advanced
+</code></pre></div><p>optimisation 配置可以点击<a href="https://www.cssnano.cn/docs/what-are-optimisations/" target="_blank" rel="noopener noreferrer">详情<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>查看更多配置项。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/template.html" class="prev">
+        模板语法
+      </a></span> <span class="next"><a href="/guide/basic/reactive.html">
+        数据响应
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/86.1ab04b8d.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/event.html b/docs-vuepress/.vuepress/dist/guide/basic/event.html
new file mode 100644
index 0000000000..2ad5251974
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/event.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>事件处理 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/87.392384e7.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" aria-current="page" class="active sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="事件处理"><a href="#事件处理" class="header-anchor">#</a> 事件处理</h1> <p>Mpx在事件处理上基于原生小程序，支持原生小程序的全部事件处理技术规范，在此基础上新增了事件处理内联传参的增强机制。</p> <p>原生小程序事件处理详情请参考<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>增强的内联传参能力对于传递参数的个数和类型没有特殊限制，可以传递各种字面量，可以传递组件数据，甚至可以传递for中的item和index，
+当内联事件处理器中需要访问原始事件对象时，可以传递<code>$event</code>特殊关键字作为参数，在事件处理器的对应参数位置即可获取。</p> <p>示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--原生小程序语法，通过dataset进行传参--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">data-name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--Mpx增强语法，模板内联传参，方便简洁--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTapInline('b')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--参数支持传递字面量和组件数据--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTapInline(name)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--参数同样支持传递for作用域下的item/index--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{names}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTapInline(item)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--需要使用原始事件对象时可以传递$event特殊关键字--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTapInlineWithEvent('g', $event)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>g<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'c'</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">names</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">,</span> <span class="token string">'f'</span><span class="token punctuation">]</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">handleTap</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'name:'</span><span class="token punctuation">,</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token comment">// 直接通过参数获取数据，直观方便</span>
+      <span class="token function">handleTapInline</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'name:'</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token function">handleTapInlineWithEvent</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'name:'</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'event:'</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/list-render.html" class="prev">
+        列表渲染
+      </a></span> <span class="next"><a href="/guide/basic/two-way-binding.html">
+        双向绑定
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/87.392384e7.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/ide.html b/docs-vuepress/.vuepress/dist/guide/basic/ide.html
new file mode 100644
index 0000000000..1a6dc86a12
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/ide.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>IDE 高亮配置 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/33.936d018e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" aria-current="page" class="active sidebar-link">IDE 高亮配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/ide.html#intellij" class="sidebar-link">IntelliJ</a></li><li class="sidebar-sub-header"><a href="/guide/basic/ide.html#vscode" class="sidebar-link">vscode</a></li></ul></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="ide-高亮配置"><a href="#ide-高亮配置" class="header-anchor">#</a> IDE 高亮配置</h1> <ul><li><a href="/guide/basic/ide.html#IntelliJ">IntelliJ</a></li> <li><a href="/guide/basic/ide.html#vscode">vscode</a></li></ul> <h2 id="intellij"><a href="#intellij" class="header-anchor">#</a> IntelliJ</h2> <p>如果使用 IntelliJ 系 IDE 开发，可将<code>.mpx</code>后缀文件关联到<code>vue</code>模板类型，按<code>vue</code>模板解析。</p> <p><img src="/assets/img/start-tips2.7d8836f8.png" alt="关联文件类型"></p> <p>但会报一个<code>warning</code>提示有重复的<code>script</code>标签，关闭该警告即可。</p> <p><img src="/assets/img/start-tips1.3b76ac97.png" alt="关闭警告"></p> <h2 id="vscode"><a href="#vscode" class="header-anchor">#</a> vscode</h2> <blockquote><p><a href="https://github.com/mpx-ecology/vscode-mpx" target="_blank" rel="noopener noreferrer">git地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，有任何vscode插件的问题和需求可在仓库中提issue</p></blockquote> <blockquote><p>下载</p></blockquote> <ol><li><p><a href="https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx" target="_blank" rel="noopener noreferrer">下载地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>也可直接在vscode扩展处搜索mpx即可下载</p></li></ol> <blockquote><p>使用</p></blockquote> <h3 id="插件功能介绍"><a href="#插件功能介绍" class="header-anchor">#</a> 插件功能介绍</h3> <ul><li>高亮</li> <li>emmet</li> <li>跳转定义</li> <li>自动补全</li> <li>eslint</li> <li>格式化</li></ul> <p><a href="https://gift-static.hongyibo.com.cn/static/kfpub/3227/vscodes.mp4" target="_blank" rel="noopener noreferrer">视频介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="高亮"><a href="#高亮" class="header-anchor">#</a> 高亮</h4> <p>  与其他语言插件无异，提供相应代码的高亮，因为Mpx分为四个模块，所以每个模块都有相应的语法高亮，还包括注释快捷键，也区分了相应模块，比如<code>&lt;template&gt;</code>中使用的是html的高亮，且注释是<code>&lt;!-- --&gt;</code>,而<code>&lt;script&gt;</code>中就是<code>js</code>的高亮，注释是<code>//</code></p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/codelight.jpeg" alt="image"></p> <h4 id="emmet"><a href="#emmet" class="header-anchor">#</a> emmet</h4> <p>  早在使用sublime时就在使用emmet插件，以提高写HTML的效率。</p> <p>  比如键入多个<code>&lt;view&gt;</code>标签：<code>view*n</code>。</p> <p>  比如一些标签的快速键入，配合<code>tab</code>或者<code>Enter</code>键快速键入</p> <p>  不仅仅是<code>&lt;template&gt;</code>模块，css，scss，less，stylus，sass模块也有相应的快捷指令</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200258.gif" alt="image"> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200331.gif" alt="image"></p> <p>提示组件标签</p> <p>我们可以像编写 html 一样，只要输入对应的单词就会出现对应的标签，比如输入的是 view ，然后按下 tab 键，即可输入 <code>&lt;view&gt;&lt;/view&gt;</code> 标签。</p> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi1_v2.png" width="500" alt="图片名称"> <p>组件指令提示</p> <p>指令的提示类似于 vue 文件一样，只要输入对应的指令前缀就会出现对应的完整指令，比如输入的是 wx ，然后按下 tab 键，就可以输入 wx:if=&quot;&quot; 指令。</p> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi2_v2.png" width="500" alt="图片名称"> <p>组件属性提示</p> <p>微信小程序的每个组件都有一些属性选项，在编写组件的时候输入前缀就会出现完整的属性，并且包含了属性的说明和属性的类型。</p> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi3_v2.png" width="500" alt="图片名称"> <p>组件事件提示</p> <p>给组件绑定事件，也是只需要输入事件的前缀，就会出现完整的事件列表，然后按下 tab 键，即可输入 bindtap=&quot;&quot; 类似的事件。</p> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi4_v2.png" width="500" alt="图片名称"> <h4 id="跳转定义"><a href="#跳转定义" class="header-anchor">#</a> 跳转定义</h4> <p>  command + 鼠标左键 查看定义位置，也可以在当前文件查看内容，决定是否跳转</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200848.gif" alt="image"></p> <h4 id="自动补全"><a href="#自动补全" class="header-anchor">#</a> 自动补全</h4> <p>  毕竟Mpx是个小程序的框架，对于微信和支付宝的api快速补全snippets没有怎么能行，可在<code>&lt;script&gt;</code>中通过键入部分文字插入相应的代码块</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-201858.gif" alt="image"></p> <h4 id="eslint"><a href="#eslint" class="header-anchor">#</a> eslint</h4> <p>  eslint这块要分两部分来讲，一部分是插件实现了按照模块区分的简单的eslint，另一部分是要配合eslint的vscode插件，配置.eslintrc高阶的eslint检测。</p> <p>部分一可通过配置开关</p> <p><code>&lt;template&gt;</code>是通过我们自己实现的eslint插件<code>eslint-plugin-mpx</code>，通过调eslint提供的引擎api，返回eslint校验的结果，我们再进行展示。</p> <p><code>&lt;script&gt;</code>中是通过调用typescript提供的检测js代码的api来进行检测，返回
+的校验结果也是不太符合语法的，基础的检测，不会过于苛刻</p> <p><code>&lt;style&gt;</code>中会根据lang的设定进行相应的检测，此检测是vscode官方提供的库
+<code>vscode-css-languageservice</code></p> <p><code>&lt;json&gt;</code>模块同tempalte，用到了一个eslint插件<code>eslint-plugin-jsonc</code>来检测json的部分</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/vscodeseting.png" alt="image"></p> <p>部分二可参照此<a href="https://github.com/mpx-ecology/vscode-mpx/issues/35" target="_blank" rel="noopener noreferrer">链接<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>配置</p> <h4 id="代码格式化"><a href="#代码格式化" class="header-anchor">#</a> 代码格式化</h4> <p>支持代码格式化 JavaScript  (ts)· JSON · CSS (less/scss/stylus) · WXML，通过鼠标右键选择代码格式化文档。</p> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/format_v2.png" width="500" alt="图片名称"> <p>默认每个区块都是调用 Prettier 这个库来完成格式化的，当然也可以在设置中切换成使用其他库。</p> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/format2_v3.png" width="500" alt="图片名称"> <p>如果切换成 none 将会禁用格式化。</p> <p>Prettier 支持从项目根目录读取 .prettierrc 配置文件。配置选项可以参考 <a href="https://prettier.io/docs/en/configuration.html" target="_blank" rel="noopener noreferrer">官方<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 文档。.prettierrc 文件可以使用 JSON 语法编写，比如下面这样：</p> <div class="language- extra-class"><pre class="language-text"><code>{
+  &quot;tabWidth&quot;: 4,
+  &quot;semi&quot;: false,
+  &quot;singleQuote&quot;: true
+}
+</code></pre></div><p>注意：由于 Prettier 这个库不支持格式化 stylus 语法，所以 stylus 的格式化使用另外一个 stylus-supremacy 库，配置 stylus 格式化规则只能在编辑器的 settings 中配置。</p> <div class="language- extra-class"><pre class="language-text"><code>&quot;mpx.format.defaultFormatterOptions&quot;: {
+  &quot;stylus-supremacy&quot;: {
+    &quot;insertColons&quot;: false, // 不使用括号
+    &quot;insertSemicolons&quot;: false, // 不使用冒号
+    &quot;insertBraces&quot;: false, // 不使用分号
+    &quot;insertNewLineAroundImports&quot;: true, // import之后插入空行
+    &quot;insertNewLineAroundBlocks&quot;: false // 每个块不添加空行
+  }
+}
+</code></pre></div><p>总结一下，配置格式化有两种方式，一种是使用 .prettierrc 文件的形式配置，另一种是在编辑器的 settings 中自行配置，通过 mpx.format.defaultFormatterOptions 选项。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/single-file.html" class="prev">
+        单文件开发
+      </a></span> <span class="next"><a href="/guide/basic/template.html">
+        模板语法
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/33.936d018e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/intro.html b/docs-vuepress/.vuepress/dist/guide/basic/intro.html
new file mode 100644
index 0000000000..f96f40a674
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/intro.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>介绍 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/88.a95133cd.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" aria-current="page" class="active sidebar-link">介绍</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/intro.html#mpx是什么？" class="sidebar-link">Mpx是什么？</a></li><li class="sidebar-sub-header"><a href="/guide/basic/intro.html#mpx提供了哪些能力？" class="sidebar-link">Mpx提供了哪些能力？</a></li><li class="sidebar-sub-header"><a href="/guide/basic/intro.html#对比其他小程序框架" class="sidebar-link">对比其他小程序框架</a></li></ul></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h1> <h2 id="mpx是什么？"><a href="#mpx是什么？" class="header-anchor">#</a> Mpx是什么？</h2> <p>Mpx是一款致力于提高小程序开发体验和开发效率的增强型小程序框架，通过Mpx，我们能够高效优雅地开发出具有极致性能的优质小程序应用，并将其输出到各大小程序平台和web平台中运行。</p> <p>Mpx的核心设计理念在于增强，这意味着Mpx是对小程序原生开发标准的补强和扩充，同时也兼容了原生开发标准。Mpx的一个设计理念在于尽可能地依赖小程序原生的自有能力，如路由系统，自定义组件，事件系统和slot等能力，因此用户在使用Mpx开发小程序时，需要对原生小程序开发有一定程度的掌握。所幸小程序开发本身并不困难，我们也会在本文档中对必要的原生小程序开发知识进行一定程度地说明。</p> <p>微信小程序作为小程序的开山鼻祖，具有最完善的生态和最全面的特性支持，后来的所有小程序平台在技术方案和代码语法上都与微信小程序高度相似，Mpx目前完善支持了以微信小程序增强语法为base的跨平台输出能力，本文档在介绍原生小程序开发相关的部分时也会以微信小程序为例。</p> <p>最后，Mpx是一个开发框架，不是组件库，这一点经常会有开发者搞混。Mpx兼容业内已有的小程序组件库，如vant/iview等，我们之后也会开源内部基于Mpx开发的跨端组件库。</p> <h2 id="mpx提供了哪些能力？"><a href="#mpx提供了哪些能力？" class="header-anchor">#</a> Mpx提供了哪些能力？</h2> <h3 id="单文件开发-sfc"><a href="#单文件开发-sfc" class="header-anchor">#</a> 单文件开发(SFC)</h3> <p>Mpx使用类似Vue的单文件开发模式，小程序原本的template/js/style/json都可以写在单个的.mpx文件中，清晰便捷。</p> <h3 id="数据响应"><a href="#数据响应" class="header-anchor">#</a> 数据响应</h3> <p>数据响应是Mpx提供的核心增强能力，该能力主要受Vue的启发，主要包含数据赋值响应，watch api和computed计算属性等能力，关于该能力更详细的介绍可以查看<a href="/guide/basic/reactive.html">这里</a></p> <h3 id="增强的模板语法"><a href="#增强的模板语法" class="header-anchor">#</a> 增强的模板语法</h3> <p>同样受到Vue的启发，Mpx提供了很多增强模板语法便于开发者方便快捷地进行视图开发，主要包含以下：</p> <ul><li><a href="/guide/basic/class-style-binding.html#样式绑定">wx:style动态样式</a></li> <li><a href="/guide/basic/class-style-binding.html#类名绑定">wx:class动态类名</a></li> <li><a href="/guide/basic/two-way-binding.html">wx:model双向绑定</a></li> <li><a href="/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性">wx:model-prop双向绑定属性</a></li> <li><a href="/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性">wx:model-event双向绑定事件</a></li> <li><a href="/guide/basic/two-way-binding.html#更改双向绑定事件数据路径">wx:model-value-path双向绑定数据路径</a></li> <li><a href="/guide/basic/two-way-binding.html#双向绑定过滤器">wx:model-filter双向绑定过滤器</a></li> <li><a href="/guide/basic/refs.html">wx:ref获取实例</a></li> <li><a href="/guide/basic/conditional-render.html">wx:show隐藏显示</a></li> <li><a href="/guide/basic/component.html#动态组件">component动态组件</a></li> <li><a href="/guide/basic/event.html">事件处理内联传参</a></li> <li><a href="/guide/basic/conditional-render.html">模板条件编译</a></li></ul> <h3 id="极致性能"><a href="#极致性能" class="header-anchor">#</a> 极致性能</h3> <p>Mpx在性能上做到了极致，我们在框架中通过模板数据依赖收集进行了深度的setData优化，做到了程序上的最优，让用户能够专注于业务开发；</p> <p>其次，Mpx的编译构建完全基于依赖收集，支持按需进行的npm构建，能够自动根据用户的分包配置抽离共用模块，确保用户最终产出项目的包体积最优；</p> <p>最后，Mpx的运行时框架部分仅占用51KB；</p> <p>Mpx和业内其他框架的运行时性能对比可以参考<a href="https://github.com/hiyuki/mp-framework-benchmark/blob/master/README.md" target="_blank" rel="noopener noreferrer">这篇文章<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="状态管理"><a href="#状态管理" class="header-anchor">#</a> 状态管理</h3> <p>Mpx借鉴Vuex的设计实现一套与框架搭配使用的状态管理(store)工具，除了支持Vuex中已有的特性外，我们还创新地提出了一种多实例store的跨团队状态管理模式，我们在业务中实际使用后普遍认为该设计比原有的modules更加灵活方便，更多详情可以<a href="/guide/advance/store.html">查看这里</a></p> <h3 id="编译构建"><a href="#编译构建" class="header-anchor">#</a> 编译构建</h3> <p>Mpx的编译构建以webpack为基础，针对小程序项目结构深度定制开发了一个webpack插件和一系列loaders，整个构建过程完全基于依赖收集按需打包，兼容大部分webpack自身能力及生态，此外Mpx的编译构建还支持以下能力：</p> <ul><li><a href="/guide/advance/npm.html">npm构建</a></li> <li><a href="/guide/advance/subpackage.html#分包">分包构建</a></li> <li><a href="/guide/advance/subpackage.html">包体积优化</a></li> <li><a href="/guide/advance/progressive.html#原生接入">原生组件支持</a></li> <li><a href="/guide/advance/ability-compatible.html">原生能力兼容(custom-tab-bar/workers/云开发等)</a></li> <li><a href="/guide/advance/plugin.html">小程序插件</a></li> <li><a href="/guide/basic/template.html#模板预编译">模板预编译</a></li> <li><a href="/guide/basic/css.html">css预编译</a></li> <li><a href="/guide/advance/image-process.html">静态资源处理</a></li></ul> <h3 id="跨平台能力"><a href="#跨平台能力" class="header-anchor">#</a> 跨平台能力</h3> <p>Mpx支持全部小程序平台(微信，支付宝，百度，头条，qq)的增强开发，同时支持将一份基于微信增强的业务源码输出到全部的小程序平台和web平台中运行，也即将支持输出快应用的能力，更多详情请<a href="/guide/advance/platform.html">查看这里</a></p> <h3 id="完善的周边能力"><a href="#完善的周边能力" class="header-anchor">#</a> 完善的周边能力</h3> <p>除了上述的核心能力外，Mpx还提供了丰富的周边能力支持，主要包括以下能力：</p> <ul><li><a href="/guide/extend/fetch.html">网络请求</a></li> <li><a href="/guide/extend/mock.html">数据mock</a></li> <li><a href="/guide/extend/api-proxy.html">api增强抹平</a></li> <li><a href="/api/extend.html#webview-bridge">webview抹平</a></li> <li><a href="/guide/tool/ts.html">Typescript支持</a></li> <li><a href="/guide/advance/i18n.html">I18n国际化</a></li> <li><a href="/guide/tool/unit-test.html">单元测试</a></li> <li><a href="/guide/tool/e2e-test.html">E2E测试</a></li></ul> <p>Mpx具有以下功能特性：</p> <ul><li>数据响应 (赋值响应 / <a href="/guide/basic/reactive.html">watch</a> / <a href="/guide/basic/reactive.html">computed</a>)</li> <li>增强模板语法 (<a href="/guide/basic/component.html#动态组件">动态组件</a> / <a href="/guide/basic/class-style-binding.html">样式绑定 / 类名绑定 </a> / <a href="/guide/basic/event.html">内联事件函数</a> / <a href="/guide/basic/two-way-binding.html">双向绑定</a> / <a href="/guide/basic/refs.html">refs</a>)</li> <li>极致性能 (<a href="/guide/understand/runtime.html">运行时性能优化</a> / <a href="/guide/advance/subpackage.html#分包">包体积优化</a> / 框架运行时体积14KB)</li> <li><a href="/guide/understand/compile.html">高效强大的编译构建</a> (基于webpack / 兼容webpack生态 / 兼容原生小程序 / 完善支持npm场景下的分包输出 / 高效调试)</li> <li><a href="/guide/basic/single-file.html">单文件组件开发</a></li> <li><a href="/guide/advance/progressive.html">渐进接入 / 原生组件支持</a></li> <li><a href="/guide/advance/store.html">状态管理</a> (Vuex规范 / 支持多实例Store)</li> <li>跨团队开发 (<a href="/guide/advance/subpackage.html#packages">packages</a>)</li> <li>逻辑复用 (<a href="/guide/advance/mixin.html">mixins</a>)</li> <li><a href="/guide/extend/">周边能力支持</a> (fetch / api增强 / mock / webview-bridge)</li> <li>脚手架支持</li> <li><a href="/guide/advance/platform.html#多平台支持">多平台增强</a> (支持在微信、支付宝、百度、qq、头条小程序平台中进行增强开发)</li> <li><a href="/guide/advance/platform.html#跨平台编译">跨平台编译</a> (支持以微信为base，将一套代码转换输出到支付宝、百度、qq、头条小程序平台和<a href="/guide/advance/platform.html#跨平台输出web">web平台</a>中运行)</li> <li><a href="/guide/tool/ts.html">TypeScript支持</a> (基于ThisType实现了完善的类型推导)</li> <li><a href="/guide/tool/i18n.html">I18n国际化</a></li> <li>单元测试支持 (即将到来)</li> <li>快应用输出 (即将到来)</li></ul> <h2 id="对比其他小程序框架"><a href="#对比其他小程序框架" class="header-anchor">#</a> 对比其他小程序框架</h2> <p>目前业内的小程序框架主要分为两类，一类是以uniapp，taro2为代表的静态编译型框架，这类框架以静态编译为主要手段，将React和Vue开发的业务源码转换到小程序环境中进行适配运行。这类框架的主要优点在于web项目迁移方便，跨端能力较强。但是由于React/Vue等web框架的DSL与小程序本身存在较大差距，无法完善支持原web框架的全部能力，开发的时候容易踩坑。</p> <p>另一类是以kbone，taro3为代表的运行时框架，这类框架利用小程序本身提供的动态渲染能力，在小程序中模拟出web的运行时环境，让React/Vue等框架直接在上层运行。这类框架的优点在于web项目迁移方便，且在web框架语法能力的支持上比静态编译型的框架要强很多，开发时遇到的坑也会少很多。但是由于模拟的web运行时环境带来了巨大的性能开销，这类框架并不适合用于大型复杂的小程序开发。</p> <p>不同于上面两类框架，Mpx以小程序本身的DSL为基础，通过编译和运行时手段结合对其进行了一系列拓展增强，没有复杂庞大的转译和环境抹平，在提升用户开发体验和效率的同时，既能保障开发的稳定和可预期性，又能保障接近原生的良好性能，非常适合开发大型复杂的小程序应用。</p> <p>在跨端方面，Mpx重点保障跨小程序平台的跨端能力，由于各家小程序标准具有很强的相似性，Mpx在进行跨端输出时，以静态编译为主要手段，辅以灵活便捷的条件编译，保障了跨端输出的性能和可用性。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/start.html" class="prev">
+        快速开始
+      </a></span> <span class="next"><a href="/guide/basic/single-file.html">
+        单文件开发
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/88.a95133cd.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/list-render.html b/docs-vuepress/.vuepress/dist/guide/basic/list-render.html
new file mode 100644
index 0000000000..def7b0a120
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/list-render.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>列表渲染 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/89.213efaae.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" aria-current="page" class="active sidebar-link">列表渲染</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/list-render.html#特殊处理" class="sidebar-link">特殊处理</a></li></ul></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="列表渲染"><a href="#列表渲染" class="header-anchor">#</a> 列表渲染</h1> <p>Mpx中的列表渲染与原生小程序中完全一致，详情可以查看<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <blockquote><p>值得注意的是wx:key与Vue中的key属性的区别，不能使用数据绑定，只能传递普通字符串将数组item中的对应属性作为key，或者传入保留关键字*this将item本身作为key</p></blockquote> <p>下面是简单示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!-- 使用数组中元素的 id属性/保留关键字*this 作为key值  --&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{titleList}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- item 默认代表数组的当前项 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{item.id}}: {{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">titleList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'A'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'C'</span> <span class="token punctuation">}</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="特殊处理"><a href="#特殊处理" class="header-anchor">#</a> 特殊处理</h2> <p>当列表中一些需要特殊二次处理的数据，可参考下列两种方式</p> <h3 id="computed方式"><a href="#computed方式" class="header-anchor">#</a> computed方式</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!-- 使用数组中元素的 id属性/保留关键字*this 作为key值  --&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{refactorTitleList}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- item 默认代表数组的当前项 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{item.id}}: {{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- bad方式 不可用computed或methods中方法处理 --&gt;</span>
+    <span class="token comment">&lt;!-- &lt;view&gt;{{item.id}}: {{format(item.name)}}&lt;/view&gt; --&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">titleList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'A'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'C'</span> <span class="token punctuation">}</span>
+      <span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">nameMap</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token string-property property">'1'</span><span class="token operator">:</span> <span class="token string">'mpx'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">refactorTitleList</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>titleList<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          <span class="token comment">// 列表中需要特殊处理的数据可在computed中处理好再渲染</span>
+          item<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>nameMap<span class="token punctuation">[</span>item<span class="token punctuation">.</span>id<span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>nameMap<span class="token punctuation">[</span>item<span class="token punctuation">.</span>id<span class="token punctuation">]</span> <span class="token operator">:</span> item<span class="token punctuation">.</span>name
+          <span class="token keyword">return</span> item
+        <span class="token punctuation">}</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="wxs方式"><a href="#wxs方式" class="header-anchor">#</a> wxs方式</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>wxs</span> <span class="token attr-name">module</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>foo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    var formatName = function (item, nameMap) {
+      // 这里区别string和number
+      var id = ''+item.id
+      if(nameMap[id]){
+        return nameMap[id];
+      }
+      return item.name;
+    }
+    module.exports = {
+      formatName: formatName
+    };
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>wxs</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!-- 使用数组中元素的 id属性/保留关键字*this 作为key值  --&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{titleList}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- item 默认代表数组的当前项 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{item.id}}: {{foo.formatName(item, nameMap)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">titleList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'A'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'C'</span> <span class="token punctuation">}</span>
+      <span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">nameMap</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token string-property property">'1'</span><span class="token operator">:</span> <span class="token string">'mpx'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/conditional-render.html" class="prev">
+        条件渲染
+      </a></span> <span class="next"><a href="/guide/basic/event.html">
+        事件处理
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/89.213efaae.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/option-chain.html b/docs-vuepress/.vuepress/dist/guide/basic/option-chain.html
new file mode 100644
index 0000000000..f70ea3b9b0
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/option-chain.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>模版内可选链表达式 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/90.ef03688f.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" aria-current="page" class="active sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="模版内可选链表达式"><a href="#模版内可选链表达式" class="header-anchor">#</a> 模版内可选链表达式</h1> <p>Mpx提供了在模版中使用可选链<code>?.</code>访问变量属性的能力，用法/能力和JS的可选链基本一致，可以在任意被<code>{{}}</code>所包裹的模版语法内使用。</p> <blockquote><p>实现原理是在编译时将使用<code>?.</code>的部分转化为<code>wxs</code>函数调用，运行时通过<code>wxs</code>访问变量属性，模拟出可选链的效果。</p></blockquote> <p>使用示例：</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ a?.b }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ a?.c + a?.d }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ a?.d || [] }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ a?.d ? 'a' : 'b' }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ a?.g[e?.d] }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+    <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">123</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">g</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+                <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">321</span>
+            <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">e</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token string">'d'</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/refs.html" class="prev">
+        获取组件实例/节点信息
+      </a></span> <span class="next"><a href="/guide/advance/store.html">
+        状态管理（store）
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/90.ef03688f.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/reactive.html b/docs-vuepress/.vuepress/dist/guide/basic/reactive.html
new file mode 100644
index 0000000000..71fe87fcb3
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/reactive.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>数据响应 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/91.43930d52.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" aria-current="page" class="active sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="数据响应"><a href="#数据响应" class="header-anchor">#</a> 数据响应</h1> <p>Vue中最为开发者们所津津乐道的特性就是其数据响应特性，Vue中的数据响应特性主要包含：响应数据赋值、watch观察数据和computed计算属性，该能力让我们能够以非常直观简洁的方式建立起数据与数据之间/数据与视图之间的绑定依赖关系，大幅提升复杂webapp的开发体验和开发效率。</p> <p>受此启发，Mpx通过增强的方式在小程序开发中提供了完整的数据响应特性，在2.5.x版本前，Mpx通过mobx实现内部和核心数据响应，在2.5.x版本之后，从数据响应性能、完整度和运行时包体积等多方面角度考虑，我们借鉴了Vue2的设计，在内部自行维护了一套精简高效的数据响应系统，全面移除了对于mobx的依赖。</p> <p>在新的响应系统中，所有的使用方法和使用限制都和Vue保持一致，关于数据响应的原理和使用限制可以参考<a href="https://cn.vuejs.org/v2/guide/reactivity.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>下面是一个小程序数据响应的简单示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>Num: {{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>Minus num: {{mnum}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>Num plus: {{nump}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{info.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{info.age}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{info.age}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token comment">// data中定义的数据会在初始化时进行数据响应处理</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">info</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token comment">// 配置中直接定义watch</span>
+    <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">num</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token comment">// 定义计算属性，模板中可以直接访问</span>
+    <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">mnum</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token operator">-</span><span class="token keyword">this</span><span class="token punctuation">.</span>num
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">nump</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>num <span class="token operator">+</span> <span class="token number">1</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token comment">// 支持计算属性的setter</span>
+        <span class="token function">set</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token keyword">this</span><span class="token punctuation">.</span>num <span class="token operator">=</span> val <span class="token operator">-</span> <span class="token number">1</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">onReady</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 使用实例方法定义watch，可以传递追踪函数更加灵活</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>nump <span class="token operator">-</span> <span class="token keyword">this</span><span class="token punctuation">.</span>mnum
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+      <span class="token comment">// 每隔一秒进行一次更新，相关watcher会被触发，视图也会发生更新</span>
+      <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>num<span class="token operator">++</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
+      <span class="token comment">// 使用$set新增响应属性，视图同样能够得到更新</span>
+      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/css.html" class="prev">
+        CSS 处理
+      </a></span> <span class="next"><a href="/guide/basic/class-style-binding.html">
+        类名样式绑定
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/91.43930d52.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/refs.html b/docs-vuepress/.vuepress/dist/guide/basic/refs.html
new file mode 100644
index 0000000000..1ce9cdb5d7
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/refs.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>获取组件实例/节点信息 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/92.ae5e9611.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" aria-current="page" class="active sidebar-link">获取组件实例/节点信息</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/refs.html#在列表渲染中使用wx-ref" class="sidebar-link">在列表渲染中使用wx:ref</a></li></ul></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="获取组件实例-节点信息"><a href="#获取组件实例-节点信息" class="header-anchor">#</a> 获取组件实例/节点信息</h1> <p>微信小程序中原生提供了<code>selectComponent/SelectorQuery.select</code>方法获取自定义组件实例和wxml节点信息，但是该api使用起来不太方便，并且不具备平台无关性，我们提供了增强指令<code>wx:ref</code>用于获取组件实例及节点信息，该指令的使用方式同vue中的ref类似，在模板中声明了<code>wx:ref</code>后，在组件ready后用户可以通过<code>this.$refs</code>获取对应的组件实例或节点查询对象(NodeRefs)，调用响应的组件方法或者获取视图节点信息。</p> <blockquote><p><code>wx:ref</code>其实也是模板编译和运行时注入结合实现的语法糖，本质还是通过原生小程序平台提供的能力进行获取，其实现的主要意义在于抹平跨平台差异以及提升用户的使用体验。</p></blockquote> <p>简单的使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      <span class="token comment">&lt;!-- my-header 为一个组件，组件内部定义了一个 show 方法 --&gt;</span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-header</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>myHeader<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-header</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+    <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token function">ready</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token comment">// 通过 this.$refs 获取view的节点查询对象</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">fields</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token comment">// res 就是我们要拿到的节点大小</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+        <span class="token comment">// 通过 this.$refs 可直接获取组件实例</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>myHeader<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span>  <span class="token comment">// 拿到组件实例，调用组件内部的方法</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="在列表渲染中使用-wx-ref"><a href="#在列表渲染中使用-wx-ref" class="header-anchor">#</a> 在列表渲染中使用<code>wx:ref</code></h2> <p>在列表渲染中定义的<code>wx:ref</code>存在多个实例/节点，Mpx会在模板编译中判断某个<code>wx:ref</code>是否存在于列表渲染<code>wx:for</code>中，是的情况下在注入<code>this.$refs</code>时会通过<code>selectAllComponents/SelectQuery.selectAll</code>方法获取组件实例数组或数组节点查询对象，确保开发者能拿到列表渲染中所有的组件实例/节点信息。</p> <p>使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- list 组件 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{listData}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.name}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!-- view 节点 --&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{listData}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">listData</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'B'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'C'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 通过 this.$refs.list 获取的是组件实例的数组</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token comment">// 对每一个组件实例的操作...</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+      <span class="token comment">// 通过 this.$refs.test 获取的是节点查询对象，通过相关的方法操作节点</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>test<span class="token punctuation">.</span><span class="token function">fields</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token comment">// 此处拿到的 res 是一个数组，包含了列表渲染中的所有节点的大小信息</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/component.html" class="prev">
+        自定义组件
+      </a></span> <span class="next"><a href="/guide/basic/option-chain.html">
+        模版内可选链表达式
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/92.ae5e9611.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/single-file.html b/docs-vuepress/.vuepress/dist/guide/basic/single-file.html
new file mode 100644
index 0000000000..4b872a020a
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/single-file.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>单文件开发 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/93.3cdab647.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" aria-current="page" class="active sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="单文件开发"><a href="#单文件开发" class="header-anchor">#</a> 单文件开发</h1> <p>小程序规范中每个页面和组件都是由四个文件描述组成的，wxml/js/wxss/json，分别描述了组件/页面的视图模板，执行逻辑，样式和配置，由于这四个部分彼此之间存在相关性，比如模板中的组件需要在json中注册，数据需要在js中定义，这种离散的文件结构在实际开发的时候体验并不理想；受Vue单文件开发的启发，Mpx也提供了类似的单文件开发模式，拓展名为.mpx。</p> <p>从下面的简单例子可以看出，.mpx中的四个区块分别对应了原生规范中的四个文件，Mpx在执行编译构建时会通过内置的<code>mpx-loader</code>收集依赖，并将.mpx的文件转换输出为原生规范中的四个文件。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--对应wxml文件--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token comment">&lt;!--对应js文件--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token function">onLoad</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">onReady</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+<span class="token comment">&lt;!--对应wxss文件--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+<span class="token comment">&lt;!--对应json文件--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/list&quot;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/intro.html" class="prev">
+        介绍
+      </a></span> <span class="next"><a href="/guide/basic/ide.html">
+        IDE 高亮配置
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/93.3cdab647.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/start.html b/docs-vuepress/.vuepress/dist/guide/basic/start.html
new file mode 100644
index 0000000000..6aadde0f98
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/start.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>快速开始 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/94.72df7b53.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" aria-current="page" class="active sidebar-link">快速开始</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/start.html#安装脚手架" class="sidebar-link">安装脚手架</a></li><li class="sidebar-sub-header"><a href="/guide/basic/start.html#创建项目安装依赖" class="sidebar-link">创建项目安装依赖</a></li><li class="sidebar-sub-header"><a href="/guide/basic/start.html#编译构建" class="sidebar-link">编译构建</a></li><li class="sidebar-sub-header"><a href="/guide/basic/start.html#预览调试" class="sidebar-link">预览调试</a></li><li class="sidebar-sub-header"><a href="/guide/basic/start.html#开始code" class="sidebar-link">开始code</a></li><li class="sidebar-sub-header"><a href="/guide/basic/start.html#跨平台输出" class="sidebar-link">跨平台输出</a></li></ul></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="快速开始"><a href="#快速开始" class="header-anchor">#</a> 快速开始</h1> <h2 id="安装脚手架"><a href="#安装脚手架" class="header-anchor">#</a> 安装脚手架</h2> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> i <span class="token parameter variable">-g</span> @mpxjs/cli
+</code></pre></div><blockquote><p>@mpxjs/cli文档 https://github.com/mpx-ecology/mpx-cli</p></blockquote> <h2 id="创建项目安装依赖"><a href="#创建项目安装依赖" class="header-anchor">#</a> 创建项目安装依赖</h2> <p>在当前目录下创建mpx项目。</p> <div class="language-shell extra-class"><pre class="language-shell"><code>mpx create mpx-project
+</code></pre></div><p>也可以使用npx在不全局安装脚手架情况下创建项目。</p> <div class="language-shell extra-class"><pre class="language-shell"><code>npx @mpxjs/cli create mpx-project
+</code></pre></div><p>执行命令后会弹出一系列问题进行项目初始配置，根据自身需求进行选择，完成后进入项目目录进行依赖安装。</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> <span class="token function">install</span>
+</code></pre></div><blockquote><p>创建<code>插件项目</code>由于微信限制必须填写插件的<code>AppID</code>，创建<code>普通项目</code>无强制要求。</p></blockquote> <h2 id="编译构建"><a href="#编译构建" class="header-anchor">#</a> 编译构建</h2> <p>使用npm script执行mpx的编译构建，在开发模式下我们执行serve命令，将项目源码构建输出到<code>dist/${平台目录}</code>下，并且监听源码的改动进行重新编译。</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> run serve
+</code></pre></div><h2 id="预览调试"><a href="#预览调试" class="header-anchor">#</a> 预览调试</h2> <p>使用小程序开发者工具打开dist下对应平台的目录，对你的小程序进行预览、调试，详情可参考<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html" target="_blank" rel="noopener noreferrer">小程序开发指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <blockquote><p>开启小程序开发者工具的watch选项，配合mpx本身的watch，能够得到很好的开发调试体验。</p></blockquote> <h2 id="开始code"><a href="#开始code" class="header-anchor">#</a> 开始code</h2> <p>在Mpx中，我们使用<code>@mpxjs/core</code>提供的createApp、createPage和createComponent函数（分别对应原生小程序中的App、Page和Component）来创建App、页面和组件，我们下面根据脚手架创建出的初始项目目录，进行简单的介绍。</p> <p>进入src/app.mpx，我们可以看到里面的结构和.vue文件非常类似，三个区块分别对应了小程序中的js/wxss/json文件。</p> <p>js区块中调用createApp用于注册小程序，传入的配置可以参考<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html" target="_blank" rel="noopener noreferrer">小程序App构造器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，由于app.js是小程序全局最早执行的js模块，一般mpx插件安装等初始化操作也在这里进行。</p> <p>style区块对应app.wxss定义了全局样式，可以自由使用sass/less/stylus等css预编译语言。</p> <p>json区块完全支持小程序原生的<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html" target="_blank" rel="noopener noreferrer">app.json配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，还额外支持了<a href="/guide/advance/subpackage.html#packages">packages多人合作</a>等增强特性。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
+
+  mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">usePromise</span><span class="token operator">:</span> <span class="token boolean">true</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  
+  <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token function">onLaunch</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+  .bold
+    font-weight bold
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;./pages/index&quot;</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>进入src/pages/index.mpx，可以看到同样是.vue风格的单文件结构，比起上面的app.mpx多了一个template区块，用于定义页面模板，除了支持小程序本身的全部模块语法和指令外，mpx还参考vue提供了大量<a href="/api/directives.html">模板增强指令</a>，便于用户更快速高效地进行界面开发。</p> <p>在js中调用createPage创建页面时，除了支持原本小程序支持的<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html" target="_blank" rel="noopener noreferrer">Page配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>外，我们还支持以<a href="/guide/basic/reactive.html">数据响应</a>为核心的一系列增强能力。</p> <p>在json中，我们同样支持原生的<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html" target="_blank" rel="noopener noreferrer">页面json配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，此外，我们能够直接在<code>usingComponents</code>中填写npm地址引用npm包中的组件，mpx组件和原生小程序组件均可引用，无需调用开发者工具npm编译，且能够通过依赖收集按需进行打包。</p> <blockquote><p>为了保障增强能力的完整性，在支持的平台中Mpx优先使用Component构造器创建页面，支持全部Component生命周期；在某些特殊情况下，你可以在<a href="/api/compile.html#forceusepagector">@mpxjs/webpack-plugin</a>中传入forceUsePageCtor:true配置来禁用掉这个行为。</p></blockquote> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token function">onLoad</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">onReady</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/list&quot;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>最后，我们进入src/components/list.mpx文件，可以看到其构成与页面文件十分相似，对于组件，Mpx提供了和页面完全一致的增强能力</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{listData}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">listData</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'手机'</span><span class="token punctuation">,</span> <span class="token string">'电视'</span><span class="token punctuation">,</span> <span class="token string">'电脑'</span><span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+  .list
+    background-color red
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>更多用法可以查看我们的官方实例：<a href="https://github.com/didi/mpx/tree/master/examples/" target="_blank" rel="noopener noreferrer">https://github.com/didi/mpx/tree/master/examples/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="跨平台输出"><a href="#跨平台输出" class="header-anchor">#</a> 跨平台输出</h2> <p>如果你选择的base平台为微信，mpx提供了强大的跨平台输出能力，能够将你的小程序源码输出到目前业内的全部小程序平台(微信/支付宝/百度/头条/QQ)中和web平台中运行。</p> <p>执行以下命令进行跨平台输出</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> run build:cross
+</code></pre></div><p>关于跨平台能力的更多详情请查看<a href="/guide/advance/platform.html">这里</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/guide/basic/intro.html">
+        介绍
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/94.72df7b53.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/template.html b/docs-vuepress/.vuepress/dist/guide/basic/template.html
new file mode 100644
index 0000000000..975c328298
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/template.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>模板语法 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/95.c8e36604.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" aria-current="page" class="active sidebar-link">模板语法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/template.html#模板预编译" class="sidebar-link">模板预编译</a></li></ul></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="模板语法"><a href="#模板语法" class="header-anchor">#</a> 模板语法</h1> <p>Mpx中的模板语法以小程序模板语法为基础，支持小程序的全部模板语法，同时提供了一系列增强的模板指令及语法。</p> <p>小程序原生模板语法请参考<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Mpx提供的增强指令语法如下：</p> <ul><li><a href="/guide/basic/class-style-binding.html#样式绑定">wx:style动态样式</a></li> <li><a href="/guide/basic/class-style-binding.html#类名绑定">wx:class动态类名</a></li> <li><a href="/guide/basic/two-way-binding.html">wx:model双向绑定</a></li> <li><a href="/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性">wx:model-prop双向绑定属性</a></li> <li><a href="/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性">wx:model-event双向绑定事件</a></li> <li><a href="/guide/basic/two-way-binding.html#更改双向绑定事件数据路径">wx:model-value-path双向绑定数据路径</a></li> <li><a href="/guide/basic/two-way-binding.html#双向绑定过滤器">wx:model-filter双向绑定过滤器</a></li> <li><a href="/guide/basic/refs.html">wx:ref获取实例</a></li> <li><a href="/guide/basic/conditional-render.html">wx:show隐藏显示</a></li> <li><a href="/guide/basic/component.html#动态组件">component动态组件</a></li> <li><a href="/guide/basic/event.html">事件处理内联传参</a></li> <li><a href="/guide/basic/template.html" aria-current="page" class="router-link-exact-active router-link-active">模板条件编译</a></li></ul> <p>下面是使用了模板增强语法的一个简单实例，许多在原生小程序上很繁琐的模板描述在增强语法的帮助下变得清晰简洁：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!--动态样式--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{dynamicStyle}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--数据绑定--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{title}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--计算属性数据绑定--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{reversedTitle}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      <span class="token comment">&lt;!--循环渲染，动态类名，事件处理内联传参--&gt;</span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{list}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ {active:item.active} }}<span class="token punctuation">&quot;</span></span>
+            <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap(index)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{item.content}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+        <span class="token comment">&lt;!--循环内部双向数据绑定--&gt;</span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{list[index].content}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--自定义组件获取实例，双向绑定，自定义双向绑定属性及事件--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom-input</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ci<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{customInfo}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>change<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+    <span class="token comment">&lt;!--动态组件，is传入组件名字符串，可使用的组件需要在json中注册，全局注册也生效--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{current}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--显示/隐藏dom--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{showBottom}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      <span class="token comment">&lt;!--模板条件编译，__mpx_mode__为框架注入的环境变量，条件判断为false的模板不会生成到dist--&gt;</span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'wx'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>wx env<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'ali'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>ali env<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 动态样式和类名也可以使用computed返回</span>
+      <span class="token literal-property property">dynamicStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'16px'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'hello world'</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span>
+          <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'全军出击'</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">false</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">{</span>
+          <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'猥琐发育，别浪'</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">false</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">customInfo</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'test content'</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">current</span><span class="token operator">:</span> <span class="token string">'com-a'</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">showBottom</span><span class="token operator">:</span> <span class="token boolean">false</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token function">reversedTitle</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">handleTap</span> <span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 处理函数直接通过参数获取当前点击的index，清晰简洁</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>active <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>active
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;custom-input&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/custom-input&quot;</span><span class="token punctuation">,</span>
+      <span class="token string-property property">&quot;com-a&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/com-a&quot;</span><span class="token punctuation">,</span>
+      <span class="token string-property property">&quot;com-b&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/com-b&quot;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="模板预编译"><a href="#模板预编译" class="header-anchor">#</a> 模板预编译</h2> <p>Mpx还支持开发者使用插值语法与小程序不冲突第三方的模板引擎语法来编写template，如pug：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pug<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  view(class=&quot;list&quot;)
+    view(class=&quot;list-item&quot;) red
+    view(class=&quot;list-item&quot;) blue
+    view(class=&quot;list-item&quot;) green
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/ide.html" class="prev">
+        IDE 高亮配置
+      </a></span> <span class="next"><a href="/guide/basic/css.html">
+        CSS 处理
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/95.c8e36604.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/two-way-binding.html b/docs-vuepress/.vuepress/dist/guide/basic/two-way-binding.html
new file mode 100644
index 0000000000..6f45b2eeeb
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/basic/two-way-binding.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>双向绑定 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/96.1ebdc00d.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" aria-current="page" class="active sidebar-link">双向绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/two-way-binding.html#对自定义组件使用" class="sidebar-link">对自定义组件使用</a></li><li class="sidebar-sub-header"><a href="/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性" class="sidebar-link">更改双向绑定的监听事件及数据属性</a></li><li class="sidebar-sub-header"><a href="/guide/basic/two-way-binding.html#更改双向绑定事件数据路径" class="sidebar-link">更改双向绑定事件数据路径</a></li><li class="sidebar-sub-header"><a href="/guide/basic/two-way-binding.html#双向绑定过滤器" class="sidebar-link">双向绑定过滤器</a></li></ul></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="双向绑定"><a href="#双向绑定" class="header-anchor">#</a> 双向绑定</h1> <p>Mpx针对表单组件提供了<code>wx:model</code>双向绑定指令，类似于<code>v-model</code>，该指令是一个语法糖指令，监听了组件抛出的输入事件并对绑定的数据进行更新，默认情况下会监听表单组件的<code>input</code>事件，并将<code>event.detail.value</code>中的数据更新到组件的<code>value</code>属性上。</p> <p>简单实用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{message}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+  <span class="token comment">&lt;!--view中的文案会随着用户对输入框进行输入而实时更新--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="对自定义组件使用"><a href="#对自定义组件使用" class="header-anchor">#</a> 对自定义组件使用</h2> <p>对自定义组件使用双向绑定时用法与原生小程序组件完全一致</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{message}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+  <span class="token comment">&lt;!--此处的文案会随着输入框输入实时更新--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="更改双向绑定的监听事件及数据属性"><a href="#更改双向绑定的监听事件及数据属性" class="header-anchor">#</a> 更改双向绑定的监听事件及数据属性</h2> <p>如前文所述，<code>wx:model</code>指令默认监听组件抛出的<code>input</code>事件，并将声明的数据绑定到组件的<code>value</code>属性上，该行为在一些原生组件和自定义组件上并不成立，因为这些组件可能不存在<code>input</code>事件或<code>value</code>属性。对此，我们提供了<code>wx:model-event</code>和<code>wx:model-prop</code>指令来修改双向绑定的监听事件和数据属性，使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!--原生组件picker中没有input事件，通过wx:model-event指令将双向绑定监听事件改为change事件--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>picker</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selector<span class="token punctuation">&quot;</span></span> <span class="token attr-name">range</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{countryRange}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{country}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>change<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+      当前选择: {{country}}
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>picker</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!--通过wx:model-event和wx:model-prop将该自定义组件的双向绑定监听事件和数据属性修改为customInput/customValue--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom-input</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{message}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customValue<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="更改双向绑定事件数据路径"><a href="#更改双向绑定事件数据路径" class="header-anchor">#</a> 更改双向绑定事件数据路径</h2> <p>Mpx中双向绑定默认使用event对象中的<code>event.detail.value</code>作为用户输入来更新组件数据，该行为在一些原生组件和自定义组件中也不成立，例如vant中的field输入框组件，用户的输入直接存储在<code>event.detail</code>当中，当然用户也可以将其存放在detail中的其他数据路径下，对此，我们提供了<code>wx:model-value-path</code>指令让用户声明在事件当中应该访问的数据路径。</p> <p>由于小程序triggerEvent的Api设计，事件的用户数据都只能存放在<code>event.detail</code>中，因此<code>wx:model-value-path</code>的值都是相对于<code>event.detail</code>的数据路径，我们支持两种形式进行声明：</p> <ul><li>一种是点语法，如传入<code>current.value</code>时框架会从<code>event.detail.current.value</code>中取值作为用户输入，为空字符串时<code>wx:model-value-path=&quot;&quot;</code>代表直接使用<code>event.detail</code>作为用户输入；</li> <li>第二种是数组字面量的JSON字符串，如<code>[&quot;current&quot;, &quot;value&quot;]</code>与上面的<code>current.value</code>等价，传入<code>[]</code>时与上面的空字符串等价。</li></ul> <p>使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!--wx:model-value-path传入[]直接使用event.detail作为用户输入，使vant-field中双向绑定能够生效--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-field</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{username}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-value-path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户名<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入用户名<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="双向绑定过滤器"><a href="#双向绑定过滤器" class="header-anchor">#</a> 双向绑定过滤器</h2> <p>用户可以使用<code>wx:model-filter</code>指令定义双向绑定过滤器，在修改数据之前对用户输入进行过滤，来实现特定的效果，框架内置了<code>trim</code>过滤器对用户输入进行trim操作，传入其他字符串时会使用当前组件中的同名方法作为自定义过滤器，使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!--以下示例中，用户输入的首尾空格将被过滤--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{message}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>trim<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/basic/event.html" class="prev">
+        事件处理
+      </a></span> <span class="next"><a href="/guide/basic/component.html">
+        自定义组件
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/96.1ebdc00d.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/composition-api/composition-api.html b/docs-vuepress/.vuepress/dist/guide/composition-api/composition-api.html
new file mode 100644
index 0000000000..7f655aade1
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/composition-api/composition-api.html
@@ -0,0 +1,527 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>组合式 API | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/97.fa1ed9e7.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" aria-current="page" class="active sidebar-link">组合式 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#什么是组合式-api" class="sidebar-link">什么是组合式 API</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#组合式-api-基础" class="sidebar-link">组合式 API 基础</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#setup" class="sidebar-link">Setup</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#lifecycle-hooks" class="sidebar-link">生命周期钩子</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#template-ref" class="sidebar-link">模板引用</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#script-setup" class="sidebar-link">&lt;script setup&gt;</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#组合式-api-与-vue3-中的区别" class="sidebar-link">组合式 API 与 Vue3 中的区别</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#组合式-api-周边生态能力的使用" class="sidebar-link">组合式 API 周边生态能力的使用</a></li></ul></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="组合式-api"><a href="#组合式-api" class="header-anchor">#</a> 组合式 API</h1> <h2 id="什么是组合式-api"><a href="#什么是组合式-api" class="header-anchor">#</a> 什么是组合式 API</h2> <p>组合式 API 是 Vue3 中包含的最重要的特性之一，主要由 <code>setup</code> 函数及一系列响应式 API 及生命周期钩子函数组成，与传统的选项式 API 相比，组合式 API 具备以下优势：</p> <ul><li>更好的逻辑复用，通过函数包装复用逻辑，显式引入调用，方便简洁且符合直觉，规避消除了 mixins 复用中存在的缺陷；</li> <li>更灵活的代码组织，相比于选项式 API 提前规定了代码的组织方式，组合式 API 在这方面几乎没有做任何限制与规定，更加灵活自由，在功能复杂的庞大组件中，我们能够通过组合式 API 让我们的功能代码更加内聚且有条理，不过这也会对开发者自身的代码规范意识提出更高要求；</li> <li>更方便的类型推导，虽然基于 <code>this</code> 的选项式 API 通过 <code>ThisType</code> 也能在一定程度上实现 TS 类型推导，但推导和实现成本较高，同时仍然无法完美覆盖一些复杂场景（如嵌套 mixins 等）；而组合式 API 以本地变量和函数为基础，本身就是类型友好的，我们在类型方面几乎不需要做什么额外的工作就能享受到完美的类型推导。</li></ul> <p>同时与 React Hooks 相比，组合式 API 中的 <code>setup</code> 函数只在初始化时单次执行，在数据响应能力的加持下大大降低了理解与使用成本，基于以上原因，我们决定为 Mpx 添加组合式 API 能力，让用户能够用组合式 API 方式进行小程序开发。</p> <p>更多关于组合式 API 的说明可以查看 <a href="https://vuejs.org/guide/extras/composition-api-faq.html" target="_blank" rel="noopener noreferrer">Vue3 官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>Mpx 是一个小程序优先的增强型跨端框架，因此我们在为 Mpx 设计实现组合式 API 的过程中，并不追求与 Vue3 中的组合式 API 完全一致，我们更多是借鉴 Vue3 中组合式 API 的设计思想，将其与目前 Mpx 及小程序中的开发模式结合起来，而非完全照搬其实现。因此在 Mpx 中一些具体的 API 设计实现会与 Vue3 存在差异，我们会在后续相关的文档中进行标注说明，如果你想查看 Mpx 与 Vue3 在组合式 API 中的差异，可以跳转到<a href="#%E7%BB%84%E5%90%88%E5%BC%8F-API-%E4%B8%8E-Vue3-%E4%B8%AD%E7%9A%84%E5%8C%BA%E5%88%AB">这里</a>查看。</p> <h2 id="组合式-api-基础"><a href="#组合式-api-基础" class="header-anchor">#</a> 组合式 API 基础</h2> <h3 id="setup-函数"><a href="#setup-函数" class="header-anchor">#</a> setup 函数</h3> <p>同 Vue3 一样，在 Mpx 当中 <code>setup</code> 函数是组合式 API 的基础，我们可以在 <code>createPage</code> 和 <code>createComponent</code> 中声明 <code>setup</code> 函数。</p> <p><code>setup</code> 函数接收 <code>props</code> 和 <code>context</code> 两个参数，其中 <code>context</code> 参数与 Vue3 中存在差别，详情可以查看<a href="#Setup">这里</a>。</p> <p>我们参考 Vue3 中的示例实现一个小程序版本，可以看到它和 Vue3 中的实现基本一致，包含以下功能：</p> <ul><li>仓库列表</li> <li>更新仓库列表的函数</li> <li>返回列表和函数，以便其他组件选项可以对它们进行访问</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> fetchUserRepositories <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/repositories'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">user</span><span class="token operator">:</span> String
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">let</span> repositories <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+    <span class="token keyword">const</span> <span class="token function-variable function">getUserRepositories</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      repositories <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserRepositories</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>user<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      repositories<span class="token punctuation">,</span> <span class="token comment">// 返回的数据，可以在其他选项式 API 中通过 this 访问或在模板上直接访问</span>
+      getUserRepositories <span class="token comment">// 返回的函数，它的行为与将其定义在 methods 选项中的行为相同</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>目前 <code>repositories</code> 是个非响应式变量，用户层面将无法感知它的变化，仓库列表将始终为空。</p> <h3 id="带-ref-的响应式变量"><a href="#带-ref-的响应式变量" class="header-anchor">#</a> 带 <code>ref</code> 的响应式变量</h3> <p>同 Vue3 一致，我们可以通过 <code>ref</code> 函数为任意一个变量创建响应式引用，<code>ref</code> 接收参数并将其包裹在一个带有 <code>value</code> property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> counter <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>counter<span class="token punctuation">)</span> <span class="token comment">// { value: 0 }</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>counter<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 0</span>
+
+counter<span class="token punctuation">.</span>value<span class="token operator">++</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>counter<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 1</span>
+</code></pre></div><p>回到我们的示例中，我们通过 <code>ref</code> 创建一个响应式的 <code>repositories</code> 变量：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> fetchUserRepositories <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/repositories'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">user</span><span class="token operator">:</span> String
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">let</span> repositories <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> <span class="token function-variable function">getUserRepositories</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      repositories<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserRepositories</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>user<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      repositories<span class="token punctuation">,</span>
+      getUserRepositories
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>通过 <code>ref</code> 包裹以后，我们每次调用 <code>getUserRepositories</code> 更新 <code>repositories</code> 的值都能被外部的 <code>watch</code> 观测到，并且触发视图的更新。</p> <h3 id="在-setup-中注册生命周期钩子"><a href="#在-setup-中注册生命周期钩子" class="header-anchor">#</a> 在 <code>setup</code> 中注册生命周期钩子</h3> <p>为了完整实现选项式 API 中的能力，我们需要支持在 <code>setup</code> 中注册生命周期钩子，同 Vue3 类似，我们也提供了一系列生命周期钩子的注册函数，这些函数都以 <code>on</code> 开头，不过由于 Mpx 的跨平台特性，我们不可能针对不同的平台提供不同的生命周期钩子函数，因此我们提供了一份抹平跨平台差异后统一的生命周期钩子，与小程序原生生命周期的映射关系可查看<a href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90">这里</a>。</p> <p>我们希望在组件挂载时调用 <code>getUserRepositories</code>，可以使用 <code>onMounted</code> 钩子来实现，注意这里不是 <code>onReady</code>，不过它确实对应于微信小程序中组件的 <code>ready</code> 钩子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> fetchUserRepositories <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/repositories'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">user</span><span class="token operator">:</span> String
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">let</span> repositories <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> <span class="token function-variable function">getUserRepositories</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      repositories<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserRepositories</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>user<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+    
+    <span class="token comment">// 在组件挂载时（微信小程序中相当于ready）调用 getUserRepositories</span>
+    <span class="token function">onMounted</span><span class="token punctuation">(</span>getUserRepositories<span class="token punctuation">)</span> 
+
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      repositories<span class="token punctuation">,</span>
+      getUserRepositories
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="watch-响应式更改"><a href="#watch-响应式更改" class="header-anchor">#</a> <code>watch</code> 响应式更改</h3> <p>现在我们需要对 <code>user</code> prop 的变化做出响应，可以使用新的 <code>watch</code> API，该 API 接受 3 个参数：</p> <ul><li>一个想要侦听的响应式引用或 getter 函数</li> <li>一个回调</li> <li>可选的配置选项</li></ul> <p>简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> watch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> counter <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+<span class="token function">watch</span><span class="token punctuation">(</span>counter<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">newValue<span class="token punctuation">,</span> oldValue</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'The new counter value is: '</span> <span class="token operator">+</span> counter<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>当 <code>counter</code> 被修改时，例如 <code>counter.value = 5</code>，侦听将触发并执行回调打印 <code>The new counter value is:5</code>。</p> <p>回到我们的示例中，当 <code>user</code> prop 发生变化时调用 <code>getUserRepositories</code> 更新仓库列表：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> fetchUserRepositories <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/repositories'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">user</span><span class="token operator">:</span> String
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 使用 `toRefs` 创建对 `props` 中的 `user` property 的响应式引用</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> user <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
+    
+    <span class="token keyword">let</span> repositories <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> <span class="token function-variable function">getUserRepositories</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 更新 `prop.user` 到 `user.value` 访问引用值</span>
+      repositories<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserRepositories</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+    
+    <span class="token function">onMounted</span><span class="token punctuation">(</span>getUserRepositories<span class="token punctuation">)</span> 
+    
+    <span class="token comment">// 在 user prop 的响应式引用上设置一个侦听器</span>
+    <span class="token function">watch</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> getUserRepositories<span class="token punctuation">)</span>
+
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      repositories<span class="token punctuation">,</span>
+      getUserRepositories
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>你可能已经注意到在我们的 setup 的顶部使用了 toRefs。这是为了确保我们的侦听器能够根据 user prop 的变化做出反应。</p> <h3 id="独立的-computed-属性"><a href="#独立的-computed-属性" class="header-anchor">#</a> 独立的 <code>computed</code> 属性</h3> <p>与 <code>ref</code> 和 <code>watch</code> 类似，也可以使用从 Mpx 导入的 <code>computed</code> 函数创建计算属性，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> counter <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> twiceTheCounter <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> counter<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
+
+counter<span class="token punctuation">.</span>value<span class="token operator">++</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>counter<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 1</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>twiceTheCounter<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 2</span>
+</code></pre></div><p>这里我们给 <code>computed</code> 函数传递了第一个参数，它是一个类似 getter 的回调函数，输出的是一个只读的响应式引用。为了访问新创建的计算变量的 value，我们需要像 <code>ref</code> 一样使用 <code>.value</code> property。</p> <p>回到我们的示例，我们通过 <code>computed</code> 为仓库列表实现搜索功能：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> toRefs<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> fetchUserRepositories <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/repositories'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">user</span><span class="token operator">:</span> String
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> user <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
+    
+    <span class="token keyword">let</span> repositories <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> <span class="token function-variable function">getUserRepositories</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      repositories<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserRepositories</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+    
+    <span class="token function">onMounted</span><span class="token punctuation">(</span>getUserRepositories<span class="token punctuation">)</span> 
+    
+    <span class="token function">watch</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> getUserRepositories<span class="token punctuation">)</span>
+    
+    <span class="token keyword">const</span> searchQuery <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> repositoriesMatchingSearchQuery <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> repositories<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>
+        <span class="token parameter">repository</span> <span class="token operator">=&gt;</span> repository<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>searchQuery<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+      <span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      repositories<span class="token punctuation">,</span>
+      getUserRepositories<span class="token punctuation">,</span>
+      searchQuery<span class="token punctuation">,</span>
+      repositoriesMatchingSearchQuery
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>可以看到目前我们的 <code>setup</code> 函数已经相当庞大了，在不进行任何封装的情况下我们很可能在 <code>setup</code> 中写出流水账式的代码，可维护性很差，这也是为什么组合式 API 会对开发者的代码风格提出更高的要求，下面我们来拆解目前已经实现的功能，将它们提取到独立的组合函数中，先从创建 <code>useUserRepositories</code> 函数开始：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/composables/useUserRepositories.js</span>
+
+<span class="token keyword">import</span> <span class="token punctuation">{</span> fetchUserRepositories <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/repositories'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> onMounted<span class="token punctuation">,</span> watch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">useUserRepositories</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> repositories <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> <span class="token function-variable function">getUserRepositories</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    repositories<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserRepositories</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+
+  <span class="token function">onMounted</span><span class="token punctuation">(</span>getUserRepositories<span class="token punctuation">)</span>
+  <span class="token function">watch</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> getUserRepositories<span class="token punctuation">)</span>
+
+  <span class="token keyword">return</span> <span class="token punctuation">{</span>
+    repositories<span class="token punctuation">,</span>
+    getUserRepositories
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+
+</code></pre></div><p>然后是搜索功能：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/composables/useRepositoryNameSearch.js</span>
+
+<span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">useRepositoryNameSearch</span><span class="token punctuation">(</span><span class="token parameter">repositories</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> searchQuery <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> repositoriesMatchingSearchQuery <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> repositories<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">repository</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> repository<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>searchQuery<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+  <span class="token keyword">return</span> <span class="token punctuation">{</span>
+    searchQuery<span class="token punctuation">,</span>
+    repositoriesMatchingSearchQuery
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>现在我们有了两个单独的功能模块，接下来就可以开始在组件中使用它们了:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> useUserRepositories <span class="token keyword">from</span> <span class="token string">'@/composables/useUserRepositories'</span>
+<span class="token keyword">import</span> useRepositoryNameSearch <span class="token keyword">from</span> <span class="token string">'@/composables/useRepositoryNameSearch'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">user</span><span class="token operator">:</span> String
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> user <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
+    
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> repositories<span class="token punctuation">,</span> getUserRepositories <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useUserRepositories</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span>
+    
+    <span class="token keyword">const</span> <span class="token punctuation">{</span>
+      searchQuery<span class="token punctuation">,</span>
+      repositoriesMatchingSearchQuery
+    <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useRepositoryNameSearch</span><span class="token punctuation">(</span>repositories<span class="token punctuation">)</span>
+
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      <span class="token comment">// 因为我们并不关心未经过滤的仓库</span>
+      <span class="token comment">// 我们可以在 `repositories` 名称下暴露过滤后的结果</span>
+      <span class="token literal-property property">repositories</span><span class="token operator">:</span> repositoriesMatchingSearchQuery<span class="token punctuation">,</span>
+      getUserRepositories<span class="token punctuation">,</span>
+      searchQuery<span class="token punctuation">,</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>现在我们使用组合式 API 完成了仓库列表组件的开发，它看上去相当清晰且易于维护。想要了解更多组合式 API 的信息，请继续查看本页接下来的章节，想要了解新的响应式 API 的使用，请跳转查看<a href="/guide/composition-api/reactive-api.html">响应式 API</a>章节。</p> <h2 id="setup"><a href="#setup" class="header-anchor">#</a> Setup</h2> <p><code>setup</code> 函数在组件创建时执行，返回组件所需的数据和方法，是组合式 API 的核心。</p> <blockquote><p>注意，<code>setup</code> 函数不可被混入，所有定义在 <code>mixin</code> 中的 <code>setup</code> 都将被丢弃。</p></blockquote> <h3 id="参数"><a href="#参数" class="header-anchor">#</a> 参数</h3> <p><code>setup</code> 函数接受两个参数，分别是 <code>props</code> 和 <code>context</code>。</p> <h4 id="props"><a href="#props" class="header-anchor">#</a> Props</h4> <p><code>setup</code> 函数的第一个参数 <code>props</code> 和 Vue3 中完全一致，就是包含当前组件 props 的响应式数据，当父组件更新某个 prop 时，该数据也将被更新。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">title</span><span class="token operator">:</span> String
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>title<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><blockquote><p>Warning: <code>props</code> 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。</p></blockquote> <p>如果需要解构 prop，可以在 <code>setup</code> 函数中使用 <code>toRefs</code> 函数将其转换一个包含 ref 数据的纯对象：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">title</span><span class="token operator">:</span> String
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> title <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
+    <span class="token comment">// `title` 是一个 ref</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>title<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>如果 <code>title</code> 是可选的 prop，则传入的 <code>props</code> 中可能没有 <code>title</code> 。在这种情况下，<code>toRefs</code> 将不会为 <code>title</code> 创建一个 ref 。你需要使用 <code>toRef</code> 替代它：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> toRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">title</span><span class="token operator">:</span> String
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> title <span class="token operator">=</span> <span class="token function">toRef</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> <span class="token string">'title'</span><span class="token punctuation">)</span>
+    <span class="token comment">// `title` 是一个 ref</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>title<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="context"><a href="#context" class="header-anchor">#</a> Context</h4> <p>由于小程序与 web 基础技术规范的差异，Mpx 中 <code>setup</code> 的第二个参数 <code>context</code> 与 Vue3 中完全不同，<code>context</code> 包含的属性如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 触发事件，等价于 this.triggerEvent</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>triggerEvent<span class="token punctuation">)</span>
+    <span class="token comment">// 获取 NodesRef/组件实例，等价于 this.$refs</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>refs<span class="token punctuation">)</span>
+    <span class="token comment">// 字节小程序中异步获取组件实例，等价于 this.$asyncRefs</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>asyncRefs<span class="token punctuation">)</span>
+    <span class="token comment">// 获取组件实例，等价于 this.selectComponent，可用 this.$refs 替代</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>selectComponent<span class="token punctuation">)</span>
+    <span class="token comment">// 批量获取组件实例，等价于 this.selectAllComponents，可用 $refs 替代</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>selectAllComponents<span class="token punctuation">)</span>
+    <span class="token comment">// 获取 SelectorQuery 对象实例查询元素布局信息，等价于 this.createSelectorQuery，可用 $refs 替代</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>createSelectorQuery<span class="token punctuation">)</span>
+    <span class="token comment">// 获取 IntersectionObserver 对象实例查询视图相交信息，等价于 this.createIntersectionObserver</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>createIntersectionObserver<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><code>context</code> 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 <code>context</code> 使用 ES6 解构。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> <span class="token punctuation">{</span> triggerEvent<span class="token punctuation">,</span> refs <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p><code>refs</code> 是有状态的对象，它会随组件本身的更新而更新。这意味着你应该避免对其进行解构，并始终以 refs.x 的方式访问 NodesRef 或组件实例。与 props 不同，refs 是非响应式的。如果你打算根据 refs 的更改应用副作用，那么应该在 onUpdated 生命周期钩子中执行此操作。</p> <h3 id="访问组件的-property"><a href="#访问组件的-property" class="header-anchor">#</a> 访问组件的 property</h3> <p>除了 <code>props</code> 和 <code>context</code> 中包含的内容，执行 <code>setup</code> 时将<strong>无法访问</strong>部分组件选项，包括：</p> <ul><li>data</li> <li>computed</li></ul> <h3 id="结合模板使用"><a href="#结合模板使用" class="header-anchor">#</a> 结合模板使用</h3> <p>如果 <code>setup</code> 返回一个对象，那么该对象的 property 可以在模板中访问到：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ collectionName }}: {{ readersNumber }} {{ book.title }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">collectionName</span><span class="token operator">:</span> String
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> readersNumber <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+      <span class="token keyword">const</span> book <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Mpx'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+      <span class="token comment">// 暴露给 template</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        readersNumber<span class="token punctuation">,</span>
+        book
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="使用-this"><a href="#使用-this" class="header-anchor">#</a> 使用 <code>this</code></h3> <p><strong>在 <code>setup()</code> 内部，<code>this</code> 不是当前组件的引用</strong>，因为 <code>setup()</code> 是在解析其它组件选项之前被调用的，所以 <code>setup()</code> 内部的 <code>this</code> 的行为与其它选项中的 <code>this</code> 完全不同。这使得 <code>setup()</code>  在和其它选项式 API 一起使用时可能会导致混淆。</p> <blockquote><p>Mpx 的组合式 API 设计极力避免了用户需要在 <code>setup()</code> 中访问 <code>this</code> 的场景，不过在一些例外情况下，用户仍然可以通过 <code>getCurrentInstance()</code> 的方式获取到当前组件实例，注意该函数必须在 <code>setup()</code> 或生命周期钩子中同步调用。</p></blockquote> <h2 id="lifecycle-hooks"><a href="#lifecycle-hooks" class="header-anchor">#</a> 生命周期钩子 </h2> <p>组合式 API 中，我们通过 <code>on${Hookname}(fn)</code> 的方式注册访问生命周期钩子。</p> <p>Mpx 作为一个跨端小程序框架，需要兼容不同小程序平台不同的生命周期，在选项式 API 中，我们在框架中内置了一套统一的生命周期，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异，如微信小程序的 <code>attached</code> 钩子和支付宝小程序的 <code>onInit</code> 钩子，在组合式 API 中，我们基于框架内置的生命周期暴露了一套统一的生命周期钩子函数，下表展示了框架内置生命周期/组合式 API 生命周期函数与不同小程序平台原生生命周期的对应关系：</p> <h4 id="组件生命周期"><a href="#组件生命周期" class="header-anchor">#</a> 组件生命周期</h4> <table><thead><tr><th style="text-align:left;">框架内置生命周期</th> <th style="text-align:left;">Hook inside <code>setup</code></th> <th style="text-align:left;">微信原生</th> <th style="text-align:left;">支付宝原生</th></tr></thead> <tbody><tr><td style="text-align:left;">BEFORECREATE</td> <td style="text-align:left;"><code>null</code></td> <td style="text-align:left;">attached（数据响应初始化前）</td> <td style="text-align:left;">onInit（数据响应初始化前）</td></tr> <tr><td style="text-align:left;">CREATED</td> <td style="text-align:left;"><code>null</code></td> <td style="text-align:left;">attached（数据响应初始化后）</td> <td style="text-align:left;">onInit（数据响应初始化后）</td></tr> <tr><td style="text-align:left;">BEFOREMOUNT</td> <td style="text-align:left;">onBeforeMount</td> <td style="text-align:left;">ready（<code>MOUNTED</code> 执行前）</td> <td style="text-align:left;">didMount（<code>MOUNTED</code> 执行前）</td></tr> <tr><td style="text-align:left;">MOUNTED</td> <td style="text-align:left;">onMounted</td> <td style="text-align:left;">ready（<code>BEFOREMOUNT</code> 执行后）</td> <td style="text-align:left;">didMount（<code>BEFOREMOUNT</code> 执行后）</td></tr> <tr><td style="text-align:left;">BEFOREUPDATE</td> <td style="text-align:left;">onBeforeUpdate</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> 执行前）</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> 执行前）</td></tr> <tr><td style="text-align:left;">UPDATED</td> <td style="text-align:left;">onUpdated</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> callback）</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> callback）</td></tr> <tr><td style="text-align:left;">BEFOREUNMOUNT</td> <td style="text-align:left;">onBeforeUnmount</td> <td style="text-align:left;">detached（数据响应销毁前）</td> <td style="text-align:left;">didUnmount（数据响应销毁前）</td></tr> <tr><td style="text-align:left;">UNMOUNTED</td> <td style="text-align:left;">onUnmounted</td> <td style="text-align:left;">detached（数据响应销毁后）</td> <td style="text-align:left;">didUnmount（数据响应销毁后）</td></tr></tbody></table> <blockquote><p>同 Vue3 一样，组合式 API 中没有提供 <code>BEFORECREATE</code> 和 <code>CREATED</code> 对应的生命周期钩子函数，用户可以直接在 <code>setup</code> 中编写相关逻辑。</p></blockquote> <blockquote><p>除支付宝外的小程序平台支持使用Component构建页面，在页面中使用组件生命周期钩子与在组件中完全一致，并且框架在支付宝环境也进行了抹平实现。</p></blockquote> <h4 id="页面生命周期"><a href="#页面生命周期" class="header-anchor">#</a> 页面生命周期</h4> <table><thead><tr><th style="text-align:left;">框架内置生命周期</th> <th style="text-align:left;">Hook inside <code>setup</code></th> <th style="text-align:left;">微信原生</th> <th style="text-align:left;">支付宝原生</th></tr></thead> <tbody><tr><td style="text-align:left;">ONLOAD</td> <td style="text-align:left;">onLoad</td> <td style="text-align:left;">onLoad</td> <td style="text-align:left;">onLoad</td></tr> <tr><td style="text-align:left;">ONSHOW</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">onShow</td></tr> <tr><td style="text-align:left;">ONHIDE</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">onHide</td></tr> <tr><td style="text-align:left;">ONRESIZE</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">events.onResize</td></tr></tbody></table> <h4 id="组件中访问页面生命周期"><a href="#组件中访问页面生命周期" class="header-anchor">#</a> 组件中访问页面生命周期</h4> <table><thead><tr><th style="text-align:left;">框架内置生命周期</th> <th style="text-align:left;">Hook inside <code>setup</code></th> <th style="text-align:left;">微信原生</th> <th style="text-align:left;">支付宝原生</th></tr></thead> <tbody><tr><td style="text-align:left;">ONSHOW</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">pageLifetimes.show</td> <td style="text-align:left;"><code>null</code>（框架抹平实现）</td></tr> <tr><td style="text-align:left;">ONHIDE</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">pageLifetimes.hide</td> <td style="text-align:left;"><code>null</code>（框架抹平实现）</td></tr> <tr><td style="text-align:left;">ONRESIZE</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">pageLifetimes.resize</td> <td style="text-align:left;"><code>null</code>（框架抹平实现）</td></tr></tbody></table> <p>下面是简单的使用示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> onMounted<span class="token punctuation">,</span> onUnmounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// mounted</span>
+    <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Component mounted.'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token comment">// unmounted</span>
+    <span class="token function">onUnmounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Component unmounted.'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="框架内置生命周期"><a href="#框架内置生命周期" class="header-anchor">#</a> 框架内置生命周期</h3> <p>从上面可以看到我们在框架内部内置了一套统一的生命周期来抹平不同平台生命周期的差异，由于存在数据响应机制，这套内置生命周期与小程序原生的生命周期不完全一一对应，反而与 Vue 的生命周期更加相似，在过去的版本中，我们没有显式地暴露出 <code>BEFORECREATE</code> 这这类框架内置的生命周期，更多都在框架内部使用，但是在组合式 API 版本中，为了使选项式 API 的生命周期能力与之对齐，我们将框架内置的生命周期显式导出，让用户在选项式 API 开发环境下也能正常使用这些能力，简单使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> <span class="token constant">BEFORECREATE</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token punctuation">[</span><span class="token constant">BEFORECREATE</span><span class="token punctuation">]</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'beforeCreate exec.'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 原生的 created 会被映射为框架内部的 CREATED 执行，此处逻辑在 BEFORECREATE 后执行</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'created exec.'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="具有副作用的页面事件"><a href="#具有副作用的页面事件" class="header-anchor">#</a> 具有副作用的页面事件</h3> <p>在小程序中，一些页面事件的注册存在副作用，即该页面事件注册与否会产生实质性的影响，比如微信中的 <code>onShareAppMessage</code> 和 <code>onPageScroll</code>，前者在不注册时会禁用当前页面的分享功能，而后者在注册时会带来视图与逻辑层之间的线程通信开销，对于这部分页面事件，我们无法通过<code>预注册 -&gt; 驱动</code>方式提供组合式 API 的注册方式，用户可以通过选项式 API 的方式来注册使用，通过 <code>this</code> 访问组合式 API <code>setup</code> 函数的返回。</p> <p>然而这种使用方式显然不够优雅，我们考虑是否可以通过一些非常规的方式提供这类副作用页面事件的组合式 API 注册支持，例如，借助编译手段。我们在运行时提供了副作用页面事件的注册函数，并在编译时通过 <code>babel</code> 插件的方式解析识别到当前页面中存在这些特殊注册函数的调用时，通过框架已有的<code>编译 -&gt; 运行时注入</code>的方式将事件驱动逻辑添加到当前页面当中，以提供相对优雅的副作用页面事件在组合式 API 中的注册方式，同时不产生非预期的副作用影响。</p> <p>我们需要先修改 <code>babel</code> 配置添加 <code>@mpxjs/babel-plugin-inject-page-events</code> 插件：</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token comment">// babel.config.json</span>
+<span class="token punctuation">{</span>
+ <span class="token property">&quot;plugins&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">[</span>
+      <span class="token string">&quot;@babel/transform-runtime&quot;</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token property">&quot;corejs&quot;</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+        <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^7.10.4&quot;</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token string">&quot;@mpxjs/babel-plugin-inject-page-events&quot;</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>然后就能想普通生命周期一样使用组合式 API 进行页面事件注册，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onShareAppMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+
+    <span class="token function">onShareAppMessage</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'页面分享'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      count
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>目前我们通过这种方式支持的页面事件如下：</p> <table><thead><tr><th style="text-align:left;">页面事件</th> <th style="text-align:left;">Hook inside <code>setup</code></th> <th style="text-align:left;">平台支持</th></tr></thead> <tbody><tr><td style="text-align:left;">onPullDownRefresh</td> <td style="text-align:left;">onPullDownRefresh</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onReachBottom</td> <td style="text-align:left;">onReachBottom</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onPageScroll</td> <td style="text-align:left;">onPageScroll</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onShareAppMessage</td> <td style="text-align:left;">onShareAppMessage</td> <td style="text-align:left;">全小程序平台</td></tr> <tr><td style="text-align:left;">onTabItemTap</td> <td style="text-align:left;">onTabItemTap</td> <td style="text-align:left;">微信/支付宝/百度/QQ</td></tr> <tr><td style="text-align:left;">onAddToFavorites</td> <td style="text-align:left;">onAddToFavorites</td> <td style="text-align:left;">微信 / QQ</td></tr> <tr><td style="text-align:left;">onShareTimeline</td> <td style="text-align:left;">onShareTimeline</td> <td style="text-align:left;">微信</td></tr> <tr><td style="text-align:left;">onSaveExitState</td> <td style="text-align:left;">onSaveExitState</td> <td style="text-align:left;">微信</td></tr></tbody></table> <blockquote><p>特别注意，由于静态编译分析实现方式的限制，这类页面事件的组合式 API 使用需要满足页面事件注册函数的调用和 <code>createPage</code> 的调用位于同一个 js 文件当中。</p></blockquote> <h2 id="template-ref"><a href="#template-ref" class="header-anchor">#</a> 模板引用 </h2> <p>在 Vue3 的组合式 API 中，我们可以在 <code>setup</code> 函数中使用 <code>ref()</code> 创建引用数据获取模板中绑定了 <code>ref</code> 属性的组件或 DOM 节点，优雅地将<strong>响应式引用</strong>和<strong>模板引用</strong>进行了关联统一，但在 Mpx 中，受限于小程序的技术限制，我们无法在低性能损耗下实现相同的设计，因此我们在 setup 的 context 参数中提供了 refs 对象，结合模板中的<code>wx:ref</code>指令使用，与选项式 API 中的 $refs 保持一致。</p> <p>下面是组合式 API 中进行模板引用的使用示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleHello<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hello<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{showWorld}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>world<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>world<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{list}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted<span class="token punctuation">,</span> nextTick <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> <span class="token punctuation">{</span> refs <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> showWorld <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
+      <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'手机'</span><span class="token punctuation">,</span> <span class="token string">'电视'</span><span class="token punctuation">,</span> <span class="token string">'电脑'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+
+      <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token comment">// 最早在 onMounted 中才能访问refs，对于节点返回 NodesRef 对象，对于组件返回组件实例</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello ref:'</span><span class="token punctuation">,</span> refs<span class="token punctuation">.</span>hello<span class="token punctuation">)</span>
+        <span class="token comment">// 在循环中定义 wx:ref，对应的 refs 返回数组</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'list ref:'</span><span class="token punctuation">,</span> refs<span class="token punctuation">.</span>list<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+      <span class="token keyword">const</span> <span class="token function-variable function">handleHello</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        showWorld<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span>
+        <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          <span class="token comment">// 数据变更后要在 nextTick 中访问更新后的视图数据</span>
+          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'world ref:'</span><span class="token punctuation">,</span> refs<span class="token punctuation">.</span>world<span class="token punctuation">)</span>
+        <span class="token punctuation">}</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+      
+      <span class="token comment">// 暴露给 template</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        showWorld<span class="token punctuation">,</span>
+        handleHello<span class="token punctuation">,</span>
+        list
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="script-setup"><a href="#script-setup" class="header-anchor">#</a> <code>&lt;script setup&gt;</code></h2> <p>和 Vue 类似，<code>&lt;script setup&gt;</code> 是在 Mpx 单文件组件中使用组合式 API 时的编译时语法糖。不过受小程序底层技术限制，在 Mpx 中 <code>&lt;script setup&gt;</code> 无法完整提供其在 Vue 中所具备的相关优势，我们提供了这个语法能力，但不作为默认的推荐选项。</p> <h3 id="基本语法"><a href="#基本语法" class="header-anchor">#</a> 基本语法</h3> <p>启用该语法需要在 <code>&lt;script&gt;</code> 代码块上添加 <code>setup</code> attribute:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello Mpx script setup'</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p><code>&lt;script&gt;</code> 里边的代码会被编译成组件 <code>setup()</code> 函数的内容。</p> <h3 id="顶层的绑定会被暴露给模版"><a href="#顶层的绑定会被暴露给模版" class="header-anchor">#</a> 顶层的绑定会被暴露给模版</h3> <blockquote><p>从 v2.8.19 开始，顶层绑定自动暴露给模板的能力被取消，构建时会强制用户通过 <code>defineExpose</code> 手动声明需要暴露给模板的数据或方法。</p></blockquote> <p>和 Vue 一样，当使用 <code>&lt;script setup&gt;</code> 时，任何在 <code>&lt;script setup&gt;</code> 声明的顶层的绑定（包括变量，函数声明，以及 import 导入的内容） 都能在模版中直接使用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+    <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token keyword">function</span> <span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>msg: {{msg}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">ontap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>log<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>import 导入的内容，除了从 <code>@mpxjs/core</code> 中导入的变量或方法，其他模块导入的属性和方法全部都会暴露给模版。这意味着我们可以直接在模版中使用引入的相关方法，而不需要通过 <code>methods</code> 选项来暴露：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">ontap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clickTrigger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">import</span> <span class="token punctuation">{</span> clickTrigger <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./utils'</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><blockquote><p>注意项：如果你 <code>script setup</code> 中有较多对象或方法的声明和引入，比如全局 store 这种十分复杂的对象，走默认逻辑暴露给模版会造成性能问题，因此需要使用 <code>defineExpose</code> 来手动定义暴露给模版的数据和方法。</p></blockquote> <h3 id="响应式"><a href="#响应式" class="header-anchor">#</a> 响应式</h3> <p>和 Vue 中一样，响应式状态需要明确使用响应性 API 来创建。和 <code>setup()</code> 函数的返回值一样，ref 在模版中使用的时候会自动解包：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">ontap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addCount<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+    <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+    <span class="token keyword">function</span> <span class="token function">addCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        count<span class="token punctuation">.</span>value<span class="token operator">++</span>
+    <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="defineprops"><a href="#defineprops" class="header-anchor">#</a> <code>defineProps()</code></h3> <p>和 Vue 类似，为了在声明小程序组件 <code>properties</code> 选项时获得完整的类型推导支持，在 <code>&lt;script setup&gt;</code> 中，我们需要使用 <code>defineProps</code> API，它默认在 <code>&lt;script setup&gt;</code> 中可用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">testA</span><span class="token operator">:</span> String
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><ul><li><code>defineProps</code> 是只能在 <code>&lt;script setup&gt;</code> 中使用的<strong>编译宏</strong>，不需要手动导入，会跟随 <code>&lt;script setup&gt;</code> 的处理过程一同被编译掉。</li> <li><code>defineProps</code> 接收与小程序 <code>properties</code> 选项相同的值。</li> <li>传入到 <code>defineProps</code> 的选项会从 setup 中提升到模块的作用域。因此传入的选项不能引用在 setup 作用域中声明的局部变量，否则会导致编译错误，不过可以引入导入的绑定。</li></ul> <h3 id="defineexpose"><a href="#defineexpose" class="header-anchor">#</a> <code>defineExpose()</code></h3> <p>在 <code>&lt;script setup&gt;</code> 中定义暴露给模版的变量和方法，在 Mpx <code>&lt;script setup&gt;</code> 中属于<strong>强制要求</strong>，若不使用该编译宏，则会构建报错。</p> <p>Mpx 中的 defineExpose 和 Vue3 中的不尽相同，在 Vue3 中，使用 <code>&lt;scrip setup&gt;</code> 的组件默认是关闭的-即通过模版引用或者 <code>$parent</code> 链获取到的组件实例中不会暴露任何在<code>&lt;script setup&gt;</code> 中声明的绑定。</p> <p>在 Mpx 中，<code>&lt;script setup&gt;</code> 中的声明绑定都会挂载到组件实例中，都可以通过组件实例来访问，Mpx <code>defineExpose</code> 更大的作用是假如你在 <code>&lt;scrip setup&gt;</code> 中引入了一些 store 实例，这些 store 实例默认会挂载到组件实例中，会导致后续的响应式处理以及组件更新速度变慢，这里我们通过强制使用
+<code>defineExpose</code> 来规避掉这个问题。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'black'</span><span class="token punctuation">)</span>
+    <span class="token function">defineExpose</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        name
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--正确渲染 black--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token comment">&lt;!--找不到对应变量，无内容--&gt;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="defineoptions"><a href="#defineoptions" class="header-anchor">#</a> <code>defineOptions()</code></h3> <p>此编译宏相较于 Vue 是 Mpx 中独有的，主要是当开发者想在 <code>&lt;script setup&gt;</code> 中使用一些微信小程序中特有的选项式，例如 relations、moved 等，可以使用该编译宏进行定义。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token function">defineOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">pageLifetimes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token comment">// 组件所在页面的生命周期函数</span>
+            <span class="token function-variable function">resize</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><ul><li><code>defineOptions</code> 是只能在 <code>&lt;script setup&gt;</code> 中使用的<strong>编译宏</strong>，不需要手动导入，会跟随 <code>&lt;script setup&gt;</code> 的处理过程一同被编译掉。</li> <li><code>defineOptions</code> 无返回值。</li> <li><code>defineOptions</code> 中的选项会无脑提升至组件或页面构造器的选项之中，因此不可引用 setup 中的局部变量。</li></ul> <h3 id="usecontext"><a href="#usecontext" class="header-anchor">#</a> <code>useContext()</code></h3> <p>在 <code>&lt;script setup&gt;</code> 中，当我们想要使用 <code>context</code> 时，可以使用 <code>useContext()</code> 来获 <code>context</code> 对象。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+    <span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token function">useContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token comment">// 获取 NodesRef/组件实例，等价于 this.$refs</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>refs<span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="针对-typescript-的功能"><a href="#针对-typescript-的功能" class="header-anchor">#</a> 针对 TypeScript 的功能</h3> <h4 id="类型-props-的声明"><a href="#类型-props-的声明" class="header-anchor">#</a> 类型 props 的声明</h4> <p>props 可以通过给 <code>defineProps</code> 传递纯类型函数的方式来声明：</p> <div class="language-ts extra-class"><pre class="language-ts"><code>    <span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token generic-function"><span class="token function">defineProps</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token punctuation">{</span>
+        foo<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
+        bar<span class="token operator">:</span> <span class="token builtin">number</span>
+    <span class="token punctuation">}</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+
+    <span class="token comment">// 构建转换为</span>
+    <span class="token punctuation">{</span>
+        properties<span class="token operator">:</span> <span class="token punctuation">{</span>
+            foo<span class="token operator">:</span> <span class="token punctuation">{</span>
+                type<span class="token operator">:</span> String
+            <span class="token punctuation">}</span><span class="token punctuation">,</span>
+            bar<span class="token operator">:</span> <span class="token punctuation">{</span>
+                type<span class="token operator">:</span> Number
+            <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+</code></pre></div><ul><li><code>defineProps</code> 要么使用运行时声明，要么使用类型声明。同时使用两种方式会导致编译报错。</li> <li>小程序中 <code>defineProps</code> 类型声明若有 optional 不会生效，因为小程序的 props 只要声明则一定会存在</li> <li>类型声明参数必须是一下内容之一，以确保正确的静态分析：
+<ul><li>类型字面量</li> <li>在同一文件中的接口或者类型字面量的引用</li></ul></li></ul> <h4 id="使用类型声明时的默认-props-值"><a href="#使用类型声明时的默认-props-值" class="header-anchor">#</a> 使用类型声明时的默认 props 值</h4> <p>和 Vue3 一样，针对类型的 <code>defineProps</code> 声明的不足，它无法给 props 提供默认值。为了解决这个问题，我们也支持了 <code>withDefaults</code> 编译宏：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
+  msg<span class="token operator">:</span> <span class="token builtin">string</span>
+  labels<span class="token operator">:</span> <span class="token builtin">string</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">withDefaults</span><span class="token punctuation">(</span><span class="token generic-function"><span class="token function">defineProps</span><span class="token generic class-name"><span class="token operator">&lt;</span>Props<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  msg<span class="token operator">:</span> <span class="token string">'hello'</span><span class="token punctuation">,</span>
+  labels<span class="token operator">:</span> <span class="token string">'world'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>上边代码会被编译为等价的运行时 props 的 <code>value</code> 选项。</p> <ul><li>小程序 properties 定义中的 optionalTypes 和 observer 字段，无法使用 TypeScript 类型声明的方式定义，如果需要定义这两个字段，目前需要使用运行时的方式来定义。</li></ul> <h3 id="限制"><a href="#限制" class="header-anchor">#</a> 限制</h3> <p>由于模块执行语义的差异，<code>&lt;script setup&gt;</code> 中的代码依赖单文件组件的上下文，如果将其移动到外部的 <code>.js</code> 或者 <code>.ts</code> 的时候，对于开发者可工具来说都十分混乱。因此 <code>&lt;script setup&gt;</code> 不能和 <code>src</code> attribute 一起使用。</p> <h2 id="组合式-api-与-vue3-中的区别"><a href="#组合式-api-与-vue3-中的区别" class="header-anchor">#</a> 组合式 API 与 Vue3 中的区别</h2> <p>下面我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：</p> <ul><li><code>setup</code> 的 <code>context</code> 参数不同，详见<a href="#Context">这里</a></li> <li><code>setup</code> 不支持返回<strong>渲染函数</strong></li> <li><code>setup</code> 不能是异步函数</li> <li><code>&lt;script setup&gt;</code> 提供的宏方法不同，详见<a href="#script-setup">这里</a></li> <li><code>&lt;script setup&gt;</code> 不支持 <code>import</code> 快捷引入组件</li> <li><code>&lt;script setup&gt;</code> 必须使用 <a href="#defineprops">defineExpose</a></li> <li>支持的生命周期钩子不同，详见<a href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90">这里</a></li> <li>模板引用的方式不同，详见<a href="#%E6%A8%A1%E6%9D%BF%E5%BC%95%E7%94%A8">这里</a></li></ul> <h2 id="组合式-api-周边生态能力的使用"><a href="#组合式-api-周边生态能力的使用" class="header-anchor">#</a> 组合式 API 周边生态能力的使用</h2> <p>我们对 Mpx 提供的周边生态能力也都进行了组合式 API 适配升级，详情如下：</p> <ul><li><code>store</code> 在组合式 API 中使用，详见<a href="/guide/advance/store.html#use-store-in-composition-api">这里</a></li> <li><code>pinia</code> 在组合式 API 中使用，详见<a href="/guide/advance/pinia.html">这里</a></li> <li><code>fetch</code> 在组合式 API 中使用，详见<a href="/guide/extend/fetch.md/#composition-api-usage">这里</a></li> <li><code>i18n</code> 在组合式 API 中使用，详见<a href="/guide/advance/i18n.html#composition-api-usage">这里</a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/advance/provide-inject.html" class="prev">
+        依赖注入（Provide/Inject）
+      </a></span> <span class="next"><a href="/guide/composition-api/reactive-api.html">
+        响应式 API
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/97.fa1ed9e7.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/composition-api/reactive-api.html b/docs-vuepress/.vuepress/dist/guide/composition-api/reactive-api.html
new file mode 100644
index 0000000000..2cdf69c97a
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/composition-api/reactive-api.html
@@ -0,0 +1,386 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>响应式 API | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/98.939cb6ef.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" aria-current="page" class="active sidebar-link">响应式 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#创建响应式对象" class="sidebar-link">创建响应式对象</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#use-ref-create-reactive-value" class="sidebar-link">使用ref()创建独立的响应式值</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#响应式对象解构" class="sidebar-link">响应式对象解构</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#计算值" class="sidebar-link">计算值</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#watcheffect" class="sidebar-link">watchEffect</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#watch" class="sidebar-link">watch</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#响应式-api-与-vue3-中的区别" class="sidebar-link">响应式 API 与 Vue3 中的区别</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="响应式-api"><a href="#响应式-api" class="header-anchor">#</a> 响应式 API</h1> <p>在 Mpx 中，为了支持<a href="/guide/composition-api/composition-api.html">组合式 API</a> 的使用，我们参考 Vue3 提供了相关的响应式 API，但由于 <code>proxy</code> 目前仍然存在浏览器兼容性问题，我们在底层还是基于 <code>Object.defineProperty</code> 实现的数据响应，因此相较于 Vue3 提供的 API 存在一些删减，同时也存在与 Vue2 一样的数据响应<a href="https://v2.cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" target="_blank" rel="noopener noreferrer">使用限制<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="创建响应式对象"><a href="#创建响应式对象" class="header-anchor">#</a> 创建响应式对象</h2> <p>在 Mpx 中，我们可以使用 <code>reactive</code> 方法将一个 JavaScript 对象<strong>深度转换</strong>为响应式对象，当对象内数据发生变化时能够被系统感知，相当于 Vue2 中的 <code>observable</code>，需要注意的是在 Mpx 中 <code>reactive()</code> 是将传入的对象进行响应性转化后返回原对象，而在 Vue3 中则会基于 <code>proxy</code> API 返回传入对象的响应式代理。</p> <p>目前 <code>reactive</code> 仅支持传入基础对象类型，包括纯对象和数组，暂不支持 <code>Map</code> 和 <code>Set</code> 这样的集合类型。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token comment">// 响应式对象</span>
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>你可以在<a href="/api/reactivity-api/basic-reactivity.html">响应式基础 API</a> 章节中了解更多关于 <code>reactive</code> 的信息。</p> <h2 id="use-ref-create-reactive-value"><a href="#use-ref-create-reactive-value" class="header-anchor">#</a> 使用<code>ref()</code>创建独立的响应式值 </h2> <p>上面提到 <code>reactive</code> 只能传入对象类型数据，当我们想将一个原始数据类型的值（如数字、字符串、布尔值）变成响应式时，我们不得不先将其包装为一个对象，使用起来较为繁琐，新的 <code>ref</code> 方法能够让我们便捷地达成上述目标：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token comment">// 响应式值</span>
+<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+</code></pre></div><p><code>ref()</code> 会返回一个可变的响应式对象，该对象作为一个<strong>响应式引用</strong>通过 <code>value</code> 属性维护着传入的内部值：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 0</span>
+
+count<span class="token punctuation">.</span>value<span class="token operator">++</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 1</span>
+</code></pre></div><h3 id="ref-解包"><a href="#ref-解包" class="header-anchor">#</a> Ref 解包</h3> <p>当 <code>ref</code> 作为渲染上下文 (从 <code>setup()</code> 中返回的对象) 上的 property 返回并可以在模板中被访问时，它将自动浅层次解包内部值。只有访问嵌套的 ref 时需要在模板中添加 <code>.value</code>：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ count }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ nested.count.value }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+   
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        count<span class="token punctuation">,</span>
+        <span class="token literal-property property">nested</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          count
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="访问响应式对象"><a href="#访问响应式对象" class="header-anchor">#</a> 访问响应式对象</h3> <p>当 <code>ref</code> 作为响应式对象的 property 被访问或更改时，为使其行为类似于普通 property，它会自动解包内部值：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  count
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token comment">// 0</span>
+
+state<span class="token punctuation">.</span>count <span class="token operator">=</span> <span class="token number">1</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 1</span>
+</code></pre></div><p>如果将新的 ref 赋值给现有 ref 的 property，将会替换旧的 ref：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> otherCount <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
+
+state<span class="token punctuation">.</span>count <span class="token operator">=</span> otherCount
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token comment">// 2</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 1</span>
+</code></pre></div><p>Ref 解包仅发生在被响应式 <code>Object</code> 嵌套的时候。当从 <code>Array</code> 访问 ref 时，不会进行解包：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'Hello world'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+<span class="token comment">// 这里需要 .value</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+</code></pre></div><h2 id="响应式对象解构"><a href="#响应式对象解构" class="header-anchor">#</a> 响应式对象解构</h2> <p>当我们想使用大型响应式对象的一些 property 时，可能很想使用 <strong>ES6 解构</strong>来获取我们想要的 property：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> people <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'hiyuki'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">26</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">'male'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">city</span><span class="token operator">:</span> <span class="token string">'Beijing'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">let</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age <span class="token punctuation">}</span> <span class="token operator">=</span> people
+</code></pre></div><p>遗憾的是，使用解构的两个 property 的响应性都会丢失。对于这种情况，我们需要将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> people <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'hiyuki'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">26</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">'male'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">city</span><span class="token operator">:</span> <span class="token string">'Beijing'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">let</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span>
+age<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token number">30</span> <span class="token comment">// age 现在是个 ref，我们需要使用 .value 进行访问，对其进行修改也将直接作用在原响应式对象中</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>people<span class="token punctuation">.</span>age<span class="token punctuation">)</span> <span class="token comment">// 30</span>
+</code></pre></div><p>你可以在<a href="/api/reactivity-api/refs-api.html">Refs API</a> 章节中了解更多关于 <code>refs</code> 的信息。</p> <h2 id="计算值"><a href="#计算值" class="header-anchor">#</a> 计算值</h2> <p>有时我们需要依赖于其他状态的状态——在 选项式 API 中，这是用组件计算属性处理的，在新的组合式 API 中，我们可以使用 <code>computed</code> 函数直接创建计算值：它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> plusOne <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>plusOne<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 2</span>
+
+plusOne<span class="token punctuation">.</span>value<span class="token operator">++</span> <span class="token comment">// error</span>
+</code></pre></div><p>或者，可以使用一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> plusOne <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
+  <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token parameter">val</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    count<span class="token punctuation">.</span>value <span class="token operator">=</span> val <span class="token operator">-</span> <span class="token number">1</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+plusOne<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token number">1</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 0</span>
+</code></pre></div><h2 id="watcheffect"><a href="#watcheffect" class="header-anchor">#</a> <code>watchEffect</code></h2> <p>为了根据响应式状态自动应用和重新应用副作用，我们可以使用 <code>watchEffect</code> 函数。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+
+<span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
+<span class="token comment">// -&gt; logs 0</span>
+
+<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  count<span class="token punctuation">.</span>value<span class="token operator">++</span>
+  <span class="token comment">// -&gt; logs 1</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="停止侦听"><a href="#停止侦听" class="header-anchor">#</a> 停止侦听</h3> <p>当 <code>watchEffect</code> 在组件的 <a href="/guide/composition-api/composition-api.html#Setup">setup()</a> 函数或<a href="/guide/composition-api/composition-api.html#生命周期钩子">生命周期钩子</a>被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。</p> <p>在一些情况下，也可以显式调用返回值以停止侦听：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> stop <span class="token operator">=</span> <span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token comment">/* ... */</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// later</span>
+<span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="清除副作用"><a href="#清除副作用" class="header-anchor">#</a> 清除副作用</h3> <p>有时副作用函数会执行一些异步的副作用，这些响应需要在其失效时清除 (即完成之前状态已改变了) 。所以侦听副作用传入的函数可以接收一个 <code>onInvalidate</code> 函数作入参，用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发：</p> <ul><li>副作用即将重新执行时</li> <li>侦听器被停止 (如果在 <code>setup()</code> 或生命周期钩子函数中使用了 <code>watchEffect</code>，则在组件卸载时)</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token parameter">onInvalidate</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> token <span class="token operator">=</span> <span class="token function">performAsyncOperation</span><span class="token punctuation">(</span>id<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+  <span class="token function">onInvalidate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token comment">// id has changed or watcher is stopped.</span>
+    <span class="token comment">// invalidate previously pending async operation</span>
+    token<span class="token punctuation">.</span><span class="token function">cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>之所以是通过传入一个函数去注册失效回调，而不是从回调返回它，是因为返回值对于异步错误处理很重要。</p> <p>在执行数据请求时，副作用函数往往是一个异步函数：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span>
+<span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token parameter">onInvalidate</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token function">onInvalidate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token comment">/* ... */</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 在Promise解析之前注册清除函数</span>
+  data<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchData</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>我们知道异步函数都会隐式地返回一个 Promise，但是清理函数必须要在 Promise 被 resolve 之前被注册。</p> <h3 id="副作用刷新时机"><a href="#副作用刷新时机" class="header-anchor">#</a> 副作用刷新时机</h3> <p>默认情况下，数据发生变更时，关联的副作用会被推入异步队列中，进行异步刷新，这样可以避免同一个“tick” 中多个状态改变导致的不必要的重复调用。在核心的具体实现中，组件的 <code>render</code> 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时，默认情况下，会在所有的组件 <code>render</code> 前执行：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ count }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> watchEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+
+    <span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      count
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>在这个例子中：</p> <ul><li><code>count</code> 会在初始运行时同步打印出来</li> <li>更改 <code>count</code> 时，将在组件<strong>更新前</strong>执行副作用。</li></ul> <p>如果需要在组件更新(例如：当与<a href="/guide/composition-api/composition-api.html#模板引用">模板引用</a>一起)后重新运行侦听器副作用，我们可以传递带有 <code>flush</code> 选项的附加 <code>options</code> 对象 (默认为 <code>'pre'</code>)：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 在组件更新后触发，这样你就可以访问更新的 DOM。</span>
+<span class="token comment">// 注意：这也将推迟副作用的初始运行，直到组件的首次渲染完成。</span>
+<span class="token function">watchEffect</span><span class="token punctuation">(</span>
+  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token comment">/* 访问视图 */</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">{</span>
+    <span class="token literal-property property">flush</span><span class="token operator">:</span> <span class="token string">'post'</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">)</span>
+</code></pre></div><p><code>flush</code> 选项还接受 <code>sync</code>，这将强制效果始终同步触发。然而，这是低效的，应该很少需要。</p> <p>与此同时，我们还提供了 <code>watchPostEffect</code> 和 <code>watchSyncEffect</code> 别名用来让代码意图更加明显。</p> <h2 id="watch"><a href="#watch" class="header-anchor">#</a> <code>watch</code></h2> <p><code>watch</code> API 相当于选项式 API 中的 <code>watch property</code>。<code>watch</code> 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况下，它也是惰性的，即只有当被侦听的源发生变化时才执行回调。</p> <ul><li>与 <a href="#watcheffect">watchEffect</a> 比较，<code>watch</code> 允许我们：
+<ul><li>懒执行副作用；</li> <li>更具体地说明什么状态应该触发侦听器重新运行；</li> <li>访问侦听状态变化前后的值。</li></ul></li></ul> <h3 id="侦听单个数据源"><a href="#侦听单个数据源" class="header-anchor">#</a> 侦听单个数据源</h3> <p>侦听器数据源可以是返回值的 getter 函数，也可以直接是 <code>ref</code>：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 侦听一个 getter</span>
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token function">watch</span><span class="token punctuation">(</span>
+  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>count<span class="token punctuation">,</span>
+  <span class="token punctuation">(</span><span class="token parameter">count<span class="token punctuation">,</span> prevCount</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token comment">/* ... */</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">)</span>
+
+<span class="token comment">// 直接侦听ref</span>
+<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+<span class="token function">watch</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">count<span class="token punctuation">,</span> prevCount</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token comment">/* ... */</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="侦听多个数据源"><a href="#侦听多个数据源" class="header-anchor">#</a> 侦听多个数据源</h3> <p>侦听器还可以使用数组同时侦听多个源：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> firstName <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> lastName <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
+
+<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">[</span>firstName<span class="token punctuation">,</span> lastName<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">newValues<span class="token punctuation">,</span> prevValues</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newValues<span class="token punctuation">,</span> prevValues<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+firstName<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'John'</span> <span class="token comment">// logs: [&quot;John&quot;, &quot;&quot;] [&quot;&quot;, &quot;&quot;]</span>
+lastName<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'Smith'</span> <span class="token comment">// logs: [&quot;John&quot;, &quot;Smith&quot;] [&quot;John&quot;, &quot;&quot;]</span>
+</code></pre></div><p>尽管如此，如果你在同一个函数里同时改变这些被侦听的来源，侦听器仍只会执行一次：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> firstName <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> lastName <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
+  
+    <span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">[</span>firstName<span class="token punctuation">,</span> lastName<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">newValues<span class="token punctuation">,</span> prevValues</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newValues<span class="token punctuation">,</span> prevValues<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  
+    <span class="token keyword">const</span> <span class="token function-variable function">changeValues</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      firstName<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'John'</span>
+      lastName<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'Smith'</span>
+      <span class="token comment">// 打印 [&quot;John&quot;, &quot;Smith&quot;] [&quot;&quot;, &quot;&quot;]</span>
+    <span class="token punctuation">}</span>
+  
+    <span class="token keyword">return</span> <span class="token punctuation">{</span> changeValues <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>注意多个同步更改只会触发一次侦听器。</p> <p>通过更改设置 <code>flush: 'sync'</code>，我们可以为每个更改都强制触发侦听器，尽管这通常是不推荐的。或者，可以用 <a href="/api/global-api.html#nexttick">nextTick</a> 等待侦听器在下一步改变之前运行。例如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">changeValues</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  firstName<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'John'</span> <span class="token comment">// 打印 [&quot;John&quot;, &quot;&quot;] [&quot;&quot;, &quot;&quot;]</span>
+  <span class="token keyword">await</span> <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  lastName<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'Smith'</span> <span class="token comment">// 打印 [&quot;John&quot;, &quot;Smith&quot;] [&quot;John&quot;, &quot;&quot;]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="侦听响应式对象"><a href="#侦听响应式对象" class="header-anchor">#</a> 侦听响应式对象</h3> <p>为了侦听深度嵌套的对象或数组中 property 变化，我们需要将 <code>deep</code> 选项设置为 true：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> 
+  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token punctuation">{</span> 
+    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">watch</span><span class="token punctuation">(</span>
+  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">,</span>
+  <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> prevState</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'not deep'</span><span class="token punctuation">,</span> state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">,</span> prevState<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">)</span>
+
+<span class="token function">watch</span><span class="token punctuation">(</span>
+  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">,</span>
+  <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> prevState</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'deep'</span><span class="token punctuation">,</span> state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">,</span> prevState<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">{</span> <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
+<span class="token punctuation">)</span>
+
+state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'Alex'</span> <span class="token comment">// 日志: &quot;deep&quot; &quot;Alex&quot; &quot;Alex&quot;</span>
+</code></pre></div><p>然而，侦听一个响应式对象或数组将始终返回该对象的引用。为了完全侦听深度嵌套的对象和数组，可能需要对值进行深拷贝。这可以通过诸如 <code>lodash.cloneDeep</code> 这样的实用工具来实现：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> _ <span class="token keyword">from</span> <span class="token string">'lodash'</span>
+
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">watch</span><span class="token punctuation">(</span>
+  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> _<span class="token punctuation">.</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">,</span>
+  <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> prevState</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">,</span> prevState<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">)</span>
+
+state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'Alex'</span> <span class="token comment">// 日志: &quot;Alex&quot; &quot;&quot;</span>
+</code></pre></div><p>我们也可以直接给 <code>watch()</code> 传入一个响应式对象，这种情况下会隐式地强制开启 <code>deep</code> 选项，确保嵌套的深层变更能够被监听到：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> 
+  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token punctuation">{</span> 
+    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">watch</span><span class="token punctuation">(</span>
+  state<span class="token punctuation">,</span>
+  <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> prevState</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'implicit deep'</span><span class="token punctuation">,</span> state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">,</span> prevState<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">)</span>
+
+state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'Alex'</span> <span class="token comment">// 日志: &quot;implicit deep&quot; &quot;Alex&quot; &quot;Alex&quot;</span>
+</code></pre></div><blockquote><p>需要注意的是，在侦听使用 <code>reactive()</code> 创建的响应式对象时，受数据响应限制影响，在改变数组或使用 <code>set()</code> 新增对象属性时，存在和 Vue3 中表现不一致的情况，详情查看<a href="#%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E9%99%90%E5%88%B6%E5%B8%A6%E6%9D%A5%E7%9A%84%E5%B7%AE%E5%BC%82">这里</a></p></blockquote> <h3 id="立即回调的侦听器"><a href="#立即回调的侦听器" class="header-anchor">#</a> 立即回调的侦听器</h3> <p>同选项式 <code>watch</code> 一致，我们也可以通过传递 <code>immediate</code> 选项让侦听回调立即执行：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> 
+  <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">watch</span><span class="token punctuation">(</span>
+  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>count<span class="token punctuation">,</span>
+  <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> oldValue</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'immediate'</span><span class="token punctuation">,</span> value<span class="token punctuation">,</span> oldValue<span class="token punctuation">)</span> <span class="token comment">// 日志: &quot;immediate&quot; 0 undefined</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">{</span> <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
+<span class="token punctuation">)</span>
+</code></pre></div><h3 id="与-watcheffect-共享的行为"><a href="#与-watcheffect-共享的行为" class="header-anchor">#</a> 与 watchEffect 共享的行为</h3> <p><code>watch</code> 与 <code>watchEffect</code> 共享<a href="#%E5%81%9C%E6%AD%A2%E4%BE%A6%E5%90%AC">停止侦听</a>，<a href="#%E6%B8%85%E9%99%A4%E5%89%AF%E4%BD%9C%E7%94%A8">清除副作用</a> (相应地 <code>onInvalidate</code> 会作为回调的第三个参数传入)、<a href="#%E5%89%AF%E4%BD%9C%E7%94%A8%E5%88%B7%E6%96%B0%E6%97%B6%E6%9C%BA">副作用刷新时机</a>行为。</p> <h2 id="响应式-api-与-vue3-中的区别"><a href="#响应式-api-与-vue3-中的区别" class="header-anchor">#</a> 响应式 API 与 Vue3 中的区别</h2> <p>下面我们来总结一下 Mpx 中响应式 API 与 Vue3 中的区别：</p> <ul><li>不支持 <code>raw</code> 相关 API（<code>markRaw</code> 除外，我们提供了该 API 用于跳过部分数据的响应式转换）</li> <li>不支持 <code>readonly</code> 相关 API</li> <li>不支持 <code>watchEffect</code>、<code>watch</code>、<code>computed</code> 的调试选项</li> <li>不支持对 <code>map</code>、<code>set</code> 等集合类型进行响应式转换</li> <li>受到 <code>Object.defineProperty</code> 实现带来的数据响应限制影响</li></ul> <h3 id="数据响应限制带来的差异"><a href="#数据响应限制带来的差异" class="header-anchor">#</a> 数据响应限制带来的差异</h3> <p>同 Vue2 一致，Mpx 无法感知到对象 property 的添加或移除，我们暴露了 <code>set</code> 和 <code>del</code> API 来让用户显式地进行相关操作：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set<span class="token punctuation">,</span> del <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// {&quot;count&quot;:0}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token string">'hello'</span><span class="token punctuation">,</span> <span class="token string">'world'</span><span class="token punctuation">)</span> <span class="token comment">// {&quot;count&quot;:0,&quot;hello&quot;:&quot;world&quot;}</span>
+
+<span class="token function">del</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token string">'count'</span><span class="token punctuation">)</span> <span class="token comment">// {&quot;hello&quot;:&quot;world&quot;}</span>
+</code></pre></div><p>同样，我们需要使用 <code>set</code> 或数组原型方法对数组进行修改：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+
+<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [0,1,2,3]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// [0,3,2,3]</span>
+
+state<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// [0,3,2,3,4]</span>
+</code></pre></div><p>可能你已经注意到，上面两个示例当中我们都使用了 <code>ref()</code> 进行响应式数据创建，这是有原因的，在新的响应式 API 模式下，我们使用 <code>reactive()</code> 创建的响应式数据在上述情况下仍然无法绕过 Vue2 设计中的数据响应限制，即使你使用了 <code>set</code> 或数组原型方法：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+
+<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [0,1,2,3]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发 watchEffect</span>
+
+state<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发 watchEffect</span>
+</code></pre></div><p>对于对象和在模板中使用也是同理：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addCount2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{state.count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{state.count2}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+        <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+      <span class="token keyword">const</span> <span class="token function-variable function">addCount2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token string">'count2'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发视图更新</span>
+      <span class="token punctuation">}</span>
+
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        state<span class="token punctuation">,</span>
+        addCount2
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>为什么会产生这个现象呢？原因在于：基于 <code>Object.defineProperty</code> 实现的数据响应系统中，我们会对对象的每个已有属性创建了一个 <code>Dep</code> 对象，在对该属性进行 <code>get</code> 访问时通过这个对象将其与依赖它的观察者 <code>ReactiveEffect</code> 关联起来，并在 <code>set</code> 操作时触发关联 <code>ReactiveEffect</code> 的更新，这是我们大家都知道的数据响应的基本原理。但是对于新增/删除对象属性和修改数组的场景，我们无法事先定义当前不存在属性的 <code>get/set</code> (当然这在 <code>proxy</code> 当中是可行的)，因此我们会把对象或者数组本身作为一个数据依赖创建 <code>Dep</code> 对象，<strong>通过父级访问</strong>该数据时定义的 <code>get/set</code> 将其关联到对应的 <code>ReactiveEffect</code>，并在对数据进行新增/删除属性或数组操作时通过数据本身持有的 <code>Dep</code> 对象触发关联 <code>ReactiveEffect</code> 的更新，如下图所示：</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/ReactiveEffect.png" alt="数据响应原理"></p> <p>需要注意的是，<strong>通过父级访问</strong>是建立 <code>Dep</code> 与 <code>ReactiveEffect</code> 关联关系的先决条件，在选项式 API 中，我们访问组件的响应式数据都需要通过 <code>this</code> 进行访问，相当于这些数据都存在 <code>this</code> 这个必要的<strong>父级</strong>，因此我们在使用 <code>$set/$delete</code> 进行对对象进行新增/删除属性或对数组进行修改时都能得到符合预期的结果，唯一的限制在于不能新增/删除根级数据属性，原因就在于 <code>this</code> 不存在访问它的父级。</p> <p>但是在组合式 API 中，我们不需要通过 <code>this</code> 访问响应式数据，因此通过 <code>reactive()</code> 创建的响应式数据本身就是根级数据，我们自然无法通过上述方式感知到根级数据自身的变化（在 Vue3 中，基于 <code>proxy</code> 提供的强大能力响应式系统能够精确地感知到数据属性，甚至是当前不存在属性的访问与修改，不需要为数据自身建立 <code>Dep</code> 对象，自然也不存在相关问题）。</p> <p>在这种情况下，我们就需要用 <code>ref()</code> 创建响应式数据，因为 <code>ref</code> 创建了一个包装对象，我们永远需要通过 <code>.value</code> 来访问其持有的数据（不管是显式访问还是隐式自动解包），这样就能保证 <code>ref</code> 数据自身的变化能够被响应式系统感知，因此也不会遇到上面描述的问题。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/composition-api/composition-api.html" class="prev">
+        组合式 API
+      </a></span> <span class="next"><a href="/guide/tool/ts.html">
+        使用TypeScript开发小程序
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/98.939cb6ef.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/extend/api-proxy.html b/docs-vuepress/.vuepress/dist/guide/extend/api-proxy.html
new file mode 100644
index 0000000000..3dc598d21e
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/extend/api-proxy.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Api代理 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/99.96c5a70e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable router-link-active open"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" aria-current="page" class="active sidebar-link">Api代理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/extend/api-proxy.html#usage" class="sidebar-link">Usage</a></li><li class="sidebar-sub-header"><a href="/guide/extend/api-proxy.html#options" class="sidebar-link">Options</a></li><li class="sidebar-sub-header"><a href="/guide/extend/api-proxy.html#example" class="sidebar-link">example</a></li></ul></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="api代理"><a href="#api代理" class="header-anchor">#</a> Api代理</h1> <blockquote><p>convert API at each end 各个平台之间 api 进行转换，目前已支持微信转支付宝、微信转web</p></blockquote> <h2 id="usage"><a href="#usage" class="header-anchor">#</a> Usage</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 使用 mpx 生态</span>
+
+<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> options<span class="token punctuation">)</span>
+</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 脱离 Mpx 单独使用</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> getProxy <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
+<span class="token comment">// proxy 即为target 实例</span>
+<span class="token keyword">const</span> proxy <span class="token operator">=</span> <span class="token function">getProxy</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span>
+
+proxy<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/pages/test'</span><span class="token punctuation">,</span>
+  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="options"><a href="#options" class="header-anchor">#</a> Options</h2> <table><thead><tr><th>参数名称</th> <th>类型</th> <th>含义</th> <th>是否必填</th> <th>默认值</th> <th>备注</th></tr></thead> <tbody><tr><td>platform</td> <td>Object</td> <td>各平台之间的转换</td> <td>否</td> <td>{ from:'', to:'' }</td> <td>使用 mpx 脚手架配置会自动进行转换，无需配置</td></tr> <tr><td>exclude</td> <td>Array(String)</td> <td>跨平台时不需要转换的 api</td> <td>-</td> <td></td> <td></td></tr> <tr><td>usePromise</td> <td>Boolean</td> <td>是否将 api 转化为 promise 格式使用</td> <td>否</td> <td>false</td> <td>-</td></tr> <tr><td>whiteList</td> <td>Array(String)</td> <td>强行转化为 promise 格式的 api</td> <td>否</td> <td>[]</td> <td>需要 usePromise 设为 true</td></tr> <tr><td>blackList</td> <td>Array(String)</td> <td>强制不变成 promise 格式的 api</td> <td>否</td> <td>[]</td> <td>-</td></tr> <tr><td>fallbackMap</td> <td>Object</td> <td>对于不支持的API，允许配置一个映射表，接管不存在的API</td> <td>否</td> <td>{}</td> <td>-</td></tr></tbody></table> <h2 id="example"><a href="#example" class="header-anchor">#</a> example</h2> <h3 id="普通形式"><a href="#普通形式" class="header-anchor">#</a> 普通形式</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'showToast'</span><span class="token punctuation">]</span> <span class="token comment">// showToast 将不会被转换为目标平台</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'标题'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'这是一个弹窗'</span><span class="token punctuation">,</span>
+  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>cancel<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'用户点击取消'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="使用promise形式"><a href="#使用promise形式" class="header-anchor">#</a> 使用promise形式</h3> <blockquote><p>开启usePromise时所有的异步api将返回promise，但是小程序中存在一些异步api本身的返回值是具有意义的，如uploadFile会返回一个uploadTask对象用于后续监听上传进度或者取消上传，在对api进行promise化之后我们会将原始的返回值挂载到promise.__returned属性上，便于开发者访问使用</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">usePromise</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">showActionSheet</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">itemList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>tapIndex<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/extend/fetch.html" class="prev">
+        网络请求
+      </a></span> <span class="next"><a href="/guide/extend/mock.html">
+        数据 Mock
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/99.96c5a70e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/extend/fetch.html b/docs-vuepress/.vuepress/dist/guide/extend/fetch.html
new file mode 100644
index 0000000000..7d412bec01
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/extend/fetch.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>网络请求 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/100.f31ffd06.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable router-link-active open"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" aria-current="page" class="active sidebar-link">网络请求</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#使用说明" class="sidebar-link">使用说明</a></li><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#导出说明" class="sidebar-link">导出说明</a></li><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#请求拦截器" class="sidebar-link">请求拦截器</a></li><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#请求中断" class="sidebar-link">请求中断</a></li><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#设置请求参数" class="sidebar-link">设置请求参数</a></li><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#设置请求-timeout" class="sidebar-link">设置请求 timeout</a></li><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#composition-api-usage" class="sidebar-link">在组合式 API 中使用</a></li></ul></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="网络请求"><a href="#网络请求" class="header-anchor">#</a> 网络请求</h1> <p>Mpx 提供了网络请求库 fetch，抹平了微信，阿里等平台请求参数及响应数据的差异；同时支持请求拦截器，请求取消等</p> <h2 id="使用说明"><a href="#使用说明" class="header-anchor">#</a> 使用说明</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> mpxFetch <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>mpxFetch<span class="token punctuation">)</span>
+<span class="token comment">// 第一种访问形式</span>
+mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+	<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+	<span class="token function">onLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+		<span class="token comment">// 第二种访问形式</span>
+		<span class="token keyword">this</span><span class="token punctuation">.</span>$xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://test.com'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+	<span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="导出说明"><a href="#导出说明" class="header-anchor">#</a> 导出说明</h2> <p>mpx-fetch提供了一个实例 <strong>xfetch</strong> ，该实例包含以下api</p> <ul><li>fetch(config)， 正常的promisify风格的请求方法</li> <li>CancelToken，实例属性，用于创建一个取消请求的凭证。</li> <li>interceptors，实例属性，用于添加拦截器，包含两个属性，request &amp; response</li></ul> <h2 id="请求拦截器"><a href="#请求拦截器" class="header-anchor">#</a> 请求拦截器</h2> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span>
+	<span class="token comment">// 也可以返回promise</span>
+	<span class="token keyword">return</span> config
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
+	<span class="token comment">// 也可以返回promise</span>
+	<span class="token keyword">return</span> res
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="请求中断"><a href="#请求中断" class="header-anchor">#</a> 请求中断</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> cancelToken <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span>CancelToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+	<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">cancelToken</span><span class="token operator">:</span> cancelToken<span class="token punctuation">.</span>token
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+cancelToken<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token string">'手动取消请求'</span><span class="token punctuation">)</span> <span class="token comment">// 执行后请求中断，返回abort fail</span>
+</code></pre></div><h2 id="设置请求参数"><a href="#设置请求参数" class="header-anchor">#</a> 设置请求参数</h2> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+	<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
+	<span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+	<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
+	<span class="token comment">// params 参数等价于 url query</span>
+	<span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">10</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token comment">// 设置参数序列化方式，等价于header = {'content-type': 'application/x-www-form-urlencoded'}</span>
+	<span class="token literal-property property">emulateJSON</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="设置请求-timeout"><a href="#设置请求-timeout" class="header-anchor">#</a> 设置请求 timeout</h2> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+	<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">timeout</span><span class="token operator">:</span> <span class="token number">10000</span> <span class="token comment">// 超时时间</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="composition-api-usage"><a href="#composition-api-usage" class="header-anchor">#</a> 在组合式 API 中使用 </h2> <p>在组合式 API 中我们提供了 <a href="/api/extend.html#usefetch">useFetch</a> 方法来访问 <code>xfetch</code> 实例对象</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
+<span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> useFetch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token function">useFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+          <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+              <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">10</span>
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+              <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">emulateJSON</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">usePre</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">cacheInvalidationTime</span><span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
+          <span class="token literal-property property">ignorePreParamKeys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'timestamp'</span><span class="token punctuation">]</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>   
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/tool/e2e-test.html" class="prev">
+        E2E自动化测试
+      </a></span> <span class="next"><a href="/guide/extend/api-proxy.html">
+        Api代理
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/100.f31ffd06.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/extend/index.html b/docs-vuepress/.vuepress/dist/guide/extend/index.html
new file mode 100644
index 0000000000..ce8aee8acf
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/extend/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>扩展mpx | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/101.283d0363.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" aria-current="page" class="sidebar-heading clickable router-link-exact-active router-link-active"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="扩展mpx"><a href="#扩展mpx" class="header-anchor">#</a> 扩展mpx</h1> <h2 id="开发插件"><a href="#开发插件" class="header-anchor">#</a> 开发插件</h2> <p>mpx支持使用mpx.use使用插件来进行扩展。插件本身需要提供一个install方法或本身是一个function，该函数接收一个proxyMPX。插件将采用直接在proxyMPX挂载新api属性或在prototype上挂属性。需要注意的是，一定要在app创建之前进行mpx.use。</p> <p>简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">install</span><span class="token punctuation">(</span><span class="token parameter">proxyMPX</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  proxyMPX<span class="token punctuation">.</span><span class="token function-variable function">newApi</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'is new api'</span><span class="token punctuation">)</span>
+  proxyMPX
+    <span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token function">onLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app onLaunch'</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'app'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token function">onShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'page onShow'</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'page'</span><span class="token punctuation">)</span> <span class="token comment">// proxyMPX.injectMixins === proxyMPX.mixin</span>
+
+    <span class="token comment">//  注意：proxyMPX.prototype上挂载的属性都将挂载到组件实例（page实例、app实例上，可以直接通过this访问）, 可以看mixin中的case</span>
+    proxyMPX<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">testHello</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="目前已有插件"><a href="#目前已有插件" class="header-anchor">#</a> 目前已有插件</h2> <ul><li><p>网络请求库fetch: @mpxjs/fetch <a href="#fetch">详细介绍</a> <a href="https://github.com/didi/mpx/tree/master/packages/fetch" target="_blank" rel="noopener noreferrer">源码地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>小程序API转换及promisify：@mpxjs/api-proxy <a href="#api-proxy">详细介绍</a> <a href="https://github.com/didi/mpx/tree/master/packages/api-proxy" target="_blank" rel="noopener noreferrer">源码地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>mock数据：@mpxjs/mock <a href="#mock">详细介绍</a> <a href="https://github.com/didi/mpx/tree/master/packages/mock" target="_blank" rel="noopener noreferrer">源码地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/101.283d0363.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/extend/mock.html b/docs-vuepress/.vuepress/dist/guide/extend/mock.html
new file mode 100644
index 0000000000..322e2bd0c4
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/extend/mock.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>数据 Mock | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/102.094a0a16.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable router-link-active open"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" aria-current="page" class="active sidebar-link">数据 Mock</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/extend/mock.html#安装" class="sidebar-link">安装</a></li><li class="sidebar-sub-header"><a href="/guide/extend/mock.html#使用说明" class="sidebar-link">使用说明</a></li><li class="sidebar-sub-header"><a href="/guide/extend/mock.html#mock-入参" class="sidebar-link">Mock 入参</a></li><li class="sidebar-sub-header"><a href="/guide/extend/mock.html#mock-规则示例" class="sidebar-link">Mock 规则示例</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="数据-mock"><a href="#数据-mock" class="header-anchor">#</a> 数据 Mock</h1> <h2 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h2> <p>Mpx 提供了对请求响应数据进行拦截的 mock 插件，可通过如下命令进行安装：</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">npm</span> i @mpxjs/mock
+</code></pre></div><h2 id="使用说明"><a href="#使用说明" class="header-anchor">#</a> 使用说明</h2> <p>新建 mock 文件目录及文件(例如：<code>src/mock/index.js</code> )：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/mock/index.js</span>
+<span class="token keyword">import</span> mock <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/mock&quot;</span><span class="token punctuation">;</span>
+<span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+  <span class="token punctuation">{</span>
+    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;http://api.example.com&quot;</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">rule</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;list|1-10&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span>
+          <span class="token string-property property">&quot;id|+1&quot;</span><span class="token operator">:</span> <span class="token number">1</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><p>在入口文件( <code>app.mpx</code> )中引入：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token string">&quot;mock/index&quot;</span><span class="token punctuation">;</span> <span class="token comment">// 引入mock即可</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+<span class="token comment">&lt;!-- 其他配置 --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;./pages/index&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token string-property property">&quot;window&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;backgroundTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;light&quot;</span><span class="token punctuation">,</span>
+      <span class="token string-property property">&quot;navigationBarBackgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#fff&quot;</span><span class="token punctuation">,</span>
+      <span class="token string-property property">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;WeChat&quot;</span><span class="token punctuation">,</span>
+      <span class="token string-property property">&quot;navigationBarTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;black&quot;</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><blockquote><p>由于 mock 为全局自动代理，执行<code>@mpxjs/mock</code>所暴露的方法之后会立即拦截小程序的原生请求，如果需要根据不同环境变量等去控制是否使用 mock 数据，可以参考如下方法：</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/mock/index.js</span>
+<span class="token keyword">import</span> mock <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/mock&quot;</span><span class="token punctuation">;</span>
+<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+  <span class="token punctuation">{</span>
+    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;http://api.example.com&quot;</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">rule</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;list|1-10&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{</span>
+          <span class="token string-property property">&quot;id|+1&quot;</span><span class="token operator">:</span> <span class="token number">1</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- app.mpx --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> mockSetup <span class="token keyword">from</span> <span class="token string">&quot;mock/index&quot;</span><span class="token punctuation">;</span>
+  <span class="token comment">// 当为开发环境时才启用mock</span>
+  process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">&quot;development&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token function">mockSetup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="mock-入参"><a href="#mock-入参" class="header-anchor">#</a> Mock 入参</h2> <p><code>@mpxjs/mock</code> 所暴露的函数仅接收一个类型为 <code>mockRequstList</code> 的参数，该类型定义如下：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">mockItem</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+  url<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
+  rule<span class="token operator">:</span> object
+<span class="token punctuation">}</span>
+<span class="token keyword">type</span> <span class="token class-name">mockRequstList</span> <span class="token operator">=</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>mockItem<span class="token operator">&gt;</span>
+
+<span class="token comment">//示例:</span>
+<span class="token keyword">let</span> mockList<span class="token operator">:</span> mockRequstList <span class="token operator">=</span> <span class="token punctuation">[</span>
+  <span class="token punctuation">{</span>
+    url<span class="token operator">:</span> <span class="token string">&quot;http://api.example.com&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 请求触发后匹配到该链接时其响应数据会被mock拦截</span>
+    rule<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// mock生成返回数据的规则</span>
+      <span class="token string-property property">'number|1-10'</span><span class="token operator">:</span> <span class="token number">1</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">]</span>
+</code></pre></div><h2 id="mock-规则示例"><a href="#mock-规则示例" class="header-anchor">#</a> Mock 规则示例</h2> <ul><li>基本类型数据生成</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mock <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/mock&quot;</span><span class="token punctuation">;</span>
+<span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+  <span class="token punctuation">{</span>
+    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;http://api.example.com&quot;</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">rule</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;number|1-10&quot;</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 随机生成1-10中的任意整数</span>
+      <span class="token string-property property">&quot;string|6&quot;</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[0-9a-f]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 值支持正则表达式,随机生成6位的16进制值</span>
+      <span class="token string-property property">&quot;boolean|1&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 随机生成一个布尔值,值为 true 的概率是 1/2</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// 请求 http://api.example.com 后返回值为:</span>
+<span class="token comment">// {</span>
+<span class="token comment">//   number: 2,</span>
+<span class="token comment">//   string: &quot;e1e6dc&quot;,</span>
+<span class="token comment">//   boolean: false</span>
+<span class="token comment">// }</span>
+</code></pre></div><ul><li>生成随机长度id自增的列表</li></ul> <details class="custom-block details"><summary>查看示例</summary> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mock <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/mock&quot;</span><span class="token punctuation">;</span>
+<span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+  <span class="token punctuation">{</span>
+    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;http://api.example.com&quot;</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">rule</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;list|2-5&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// 生成长度范围在2-5的数组</span>
+        <span class="token punctuation">{</span>
+          <span class="token string-property property">&quot;id|+1&quot;</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token comment">// id每次自增1</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// 请求 http://api.example.com 后返回</span>
+<span class="token comment">// {</span>
+<span class="token comment">//   &quot;list&quot;: [{</span>
+<span class="token comment">//     &quot;id&quot;: 0</span>
+<span class="token comment">//   },{</span>
+<span class="token comment">//     &quot;id&quot;: 1</span>
+<span class="token comment">//   },{</span>
+<span class="token comment">//     &quot;id&quot;: 2</span>
+<span class="token comment">//   }]</span>
+<span class="token comment">// }</span>
+</code></pre></div></details> <ul><li>pick对象中的随机个值</li></ul> <details class="custom-block details"><summary>查看示例</summary> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mock <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/mock&quot;</span><span class="token punctuation">;</span>
+<span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+  <span class="token punctuation">{</span>
+    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;http://api.example.com&quot;</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">rule</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token string-property property">&quot;object|2&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 随机选取object中的两条数据作为返回</span>
+        <span class="token string-property property">&quot;310000&quot;</span><span class="token operator">:</span> <span class="token string">&quot;上海市&quot;</span><span class="token punctuation">,</span>
+        <span class="token string-property property">&quot;320000&quot;</span><span class="token operator">:</span> <span class="token string">&quot;江苏省&quot;</span><span class="token punctuation">,</span>
+        <span class="token string-property property">&quot;330000&quot;</span><span class="token operator">:</span> <span class="token string">&quot;浙江省&quot;</span><span class="token punctuation">,</span>
+        <span class="token string-property property">&quot;340000&quot;</span><span class="token operator">:</span> <span class="token string">&quot;安徽省&quot;</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// 请求 http://api.example.com 后返回</span>
+<span class="token comment">// {</span>
+<span class="token comment">//   &quot;object&quot;: {</span>
+<span class="token comment">//     &quot;330000&quot;: &quot;浙江省&quot;,</span>
+<span class="token comment">//     &quot;340000&quot;: &quot;安徽省&quot;</span>
+<span class="token comment">//   }</span>
+<span class="token comment">// }</span>
+</code></pre></div></details> <p>更多生成规则可查阅 <a href="https://github.com/nuysoft/Mock/wiki/Syntax-Specification" target="_blank" rel="noopener noreferrer">Mock官方文档-Syntax Specification<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>更多示例可查看 <a href="http://mockjs.com/examples.html" target="_blank" rel="noopener noreferrer">Mock示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>由于小程序环境的局限性，mockjs 依赖 eval 函数实现的相关能力(如：占位符)无法正确运行</p></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/extend/api-proxy.html" class="prev">
+        Api代理
+      </a></span> <span class="next"><a href="/guide/understand/runtime.html">
+        Mpx运行时增强原理
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/102.094a0a16.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/migrate/2.7.html b/docs-vuepress/.vuepress/dist/guide/migrate/2.7.html
new file mode 100644
index 0000000000..c374438e70
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/migrate/2.7.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>从旧版本迁移至 2.7 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/103.b34f6752.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" aria-current="page" class="active sidebar-link">从旧版本迁移至 2.7</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/migrate/2.7.html#依赖升级" class="sidebar-link">依赖升级</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.7.html#开启持久化缓存" class="sidebar-link">开启持久化缓存</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.7.html#修改rules" class="sidebar-link">修改rules</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.7.html#entry配置修改" class="sidebar-link">entry配置修改</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.7.html#mpxwebpackplugin配置变更" class="sidebar-link">MpxWebpackPlugin配置变更</a></li></ul></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="从旧版本迁移至-2-7"><a href="#从旧版本迁移至-2-7" class="header-anchor">#</a> 从旧版本迁移至 2.7</h1> <p>自 2.7 版本开始，Mpx 将编译构建流程基于 Webpack5 进行了<strong>全面的重构</strong>，优化解决了老的编译流程中存在的大量历史遗留问题，安全完整地支持了基于文件系统的持久化缓存，大幅提升了 Mpx 想的编译构建速度，以滴滴出行小程序为例，无缓存场景下相较 2.6 版本提速约 180%，有缓存场景下提速约 <strong>10</strong> 倍。</p> <p>与此同时，Mpx 2.7 版本还带来了 rules 复用，完善的单元测试支持，独立分包构建，分包异步化等众多新特性。直接通过 @mpxjs/cli 创建的新项目就能够直接使用这些新特性，如果你对于编译构建没有太多定制化诉求，我们也推荐使用 @mpxjs/cli 新建项目，并将老项目中的 src 目录 copy 覆盖至新项目的方式进行迁移，这是一种成本最低的迁移方式。</p> <p>如果你的老项目中已经对编译构建进行了高度的定制，本文将提供详细的迁移工作指引。</p> <h2 id="依赖升级"><a href="#依赖升级" class="header-anchor">#</a> 依赖升级</h2> <p>将下面列出的相关依赖升级至对应版本，如果有其他自行引入的 loader 也确保将其升级至 webpack5 兼容的版本：</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token punctuation">{</span>
+  <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;@mpxjs/api-proxy&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.7.1&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/core&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.7.1&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/fetch&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.7.1&quot;</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;@mpxjs/webpack-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.7.1&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;webpack&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^5.64.4&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;webpack-merge&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^5.8.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;terser-webpack-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^5.2.5&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;copy-webpack-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^9.0.1&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;webpack-bundle-analyzer&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^4.5.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;ts-loader&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^9.2.6&quot;</span><span class="token punctuation">,</span>
+    <span class="token comment">// eslint相关配置，按需安装</span>
+    <span class="token property">&quot;eslint&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^7.32.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;eslint-config-standard&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^16.0.3&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;eslint-plugin-html&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^6.2.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;eslint-plugin-import&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.25.2&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;eslint-plugin-node&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^11.1.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;eslint-plugin-promise&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^5.1.1&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;eslint-webpack-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.1.0&quot;</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="开启持久化缓存"><a href="#开启持久化缓存" class="header-anchor">#</a> 开启持久化缓存</h2> <p>在 webpack 配置中添加以下配置项：</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">cache</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'filesystem'</span><span class="token punctuation">,</span>
+    <span class="token comment">// 声明构建配置，注意如果声明某个文件夹为构建配置，需要在文件夹下放置空的package.json文件，避免构建依赖收集时将主项目的依赖项视为构建依赖</span>
+    <span class="token literal-property property">buildDependencies</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">build</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'build/'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'config/'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">cacheDirectory</span><span class="token operator">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'.cache/'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">snapshot</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 如果希望修改node_modules下的文件时对应的缓存可以失效，可以将此处的配置改为 managedPaths: []</span>
+    <span class="token literal-property property">managedPaths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="修改rules"><a href="#修改rules" class="header-anchor">#</a> 修改rules</h2> <p>在 2.7 版本中，我们优化了 .mpx 文件中各个 block 应用 loader 的规则。</p> <p>在之前的版本中，我们基本上使用内置的规则对 .mpx 中的 block 应用 loaders，如：对 &lt;script&gt; 应用 babel-loader，对 &lt;style lang=&quot;stylus&quot;&gt; 应用 stylus-loader。这种方式的弊端主要在于用户无法便捷地自定义 block 的 loaders 应用规则，比如传入特定的 loaders 配置。</p> <p>在 2.7 版本中，我们支持了构建时读取用户在 module.rules 中配置的规则来对 block 进行 loaders 应用， 例如：对于 &lt;style lang=&quot;stylus&quot;&gt; 我们会对其应用用户在 rules 中对于 .stylus 文件 配置的 loaders，当用户没有在 block 中声明 lang 属性时，我们也会兜底使用不同区块默认的 lang 来进行 rules 匹配。</p> <p>因此，相较于过去的版本，我们需要在 rules 中添加一些规则使得 .mpx 文件中的各类 block 都能得到正确的处理。</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token comment">// 新版本中rules规则对.mpx文件中的区块同样生效，在旧版本中.mpx文件中script会走内置的babel转义，但是新版当中只有在include范围内的.mpx文件才会走babel，但由于新版本中.mpx文件中的script会采用.mpx.js的格式来匹配rules，因此我们可以用如下include条件让其保持与旧版本一致的表现。</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.mpx\.js</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/@mpxjs'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token comment">// 如使用ts编码则需要添加本条rule</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.ts$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+          <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
+          <span class="token punctuation">{</span>
+            <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">'ts-loader'</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+              <span class="token literal-property property">appendTsSuffixTo</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(mpx|vue)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">]</span>
+            <span class="token punctuation">}</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">]</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token comment">// 处理json区块</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.json$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">resourceQuery</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">asScript</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'javascript/auto'</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token comment">// 处理wxs</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(wxs|qs|sjs|qjs|jds|dds|filter\.js)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+          MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxsPreLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+        <span class="token punctuation">]</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">enforce</span><span class="token operator">:</span> <span class="token string">'pre'</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token comment">// 处理图像资源</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+          MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">urlLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span>
+          <span class="token punctuation">}</span><span class="token punctuation">)</span>
+        <span class="token punctuation">]</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token comment">// 下面的rules输出小程序时需配置，如输出web需要修改为vue的相关rules，具体逻辑可以参考脚手架项目中build/getRules.js</span>
+      <span class="token comment">// mpx主loader</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.mpx$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">loader</span><span class="token punctuation">(</span>currentMpxLoaderConf<span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token comment">// 如使用sass/less等其他预编译语言，自行修改test规则并用sass/less-loader替换stylus-loader</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl(us)?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+          MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxssLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+          <span class="token string">'stylus-loader'</span>
+        <span class="token punctuation">]</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token comment">// 处理未使用预编译语言的style区块和独立样式文件</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(wxss|acss|css|qss|ttss|jxss|ddss)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxssLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token comment">// 处理未使用预编译语言的template区块和独立模板文件</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(wxml|axml|swan|qml|ttml|qxml|jxml|ddml)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxmlLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="entry配置修改"><a href="#entry配置修改" class="header-anchor">#</a> entry配置修改</h2> <p>如果进行常规的小程序输出，无需关注。如进行插件输出或独立输出组件/页面等特殊场景，mpx 提供了辅助方法来生成对应的 entry request，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span><span class="token punctuation">{</span>
+    <span class="token comment">// 输出plugin</span>
+    <span class="token literal-property property">plugin</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">getPluginEntry</span><span class="token punctuation">(</span><span class="token string">'./plugin.json'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// 独立输出组件，相当于./list.mpx?isComponent，不过为了保障后续该配置不受框架内部query变动影响，建议使用辅助方法</span>
+    <span class="token literal-property property">list</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">getComponentEntry</span><span class="token punctuation">(</span><span class="token string">'./list.mpx'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// 独立输出页面，相当于./index.mpx?isPage</span>
+    <span class="token literal-property property">index</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">getPageEntry</span><span class="token punctuation">(</span><span class="token string">'./index.mpx'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="mpxwebpackplugin配置变更"><a href="#mpxwebpackplugin配置变更" class="header-anchor">#</a> MpxWebpackPlugin配置变更</h2> <ul><li>移除了forceDisableInject配置</li> <li>nativeOptions更名为nativeConfig</li></ul> <p>上述的内容中只列举了一些和 mpx 高度相关的配置项变更，如果你的项目使用了特定的插件或者loader，请确保将其升级至兼容 webpack5 的版本。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/migrate/2.8.html" class="prev">
+        从 2.7 升级至 2.8
+      </a></span> <span class="next"><a href="/guide/migrate/mpx-cli-3.html">
+        mpx-cli v2 迁移到 v3
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/103.b34f6752.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/migrate/2.8.html b/docs-vuepress/.vuepress/dist/guide/migrate/2.8.html
new file mode 100644
index 0000000000..b88fd302bf
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/migrate/2.8.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>从 2.7 升级至 2.8 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/104.78f6358e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" aria-current="page" class="active sidebar-link">从 2.7 升级至 2.8</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/migrate/2.8.html#依赖升级" class="sidebar-link">依赖升级</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.8.html#编译配置变更" class="sidebar-link">编译配置变更</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.8.html#运行时破坏性变化" class="sidebar-link">运行时破坏性变化</a></li></ul></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="从-2-7-升级至-2-8"><a href="#从-2-7-升级至-2-8" class="header-anchor">#</a> 从 2.7 升级至 2.8</h1> <p>不同于 2.7 版本对于编译构建进行的大幅度变动升级，Mpx@2.8 版本升级的核心在于运行时支持组合式 API 能力，并尽可能追求向前兼容，以降低用户的升级成本。我们默认脚手架生成的全新项目已经适配了 2.8 版本的全部变更，如果你需要将旧项目从 2.7 升级至 2.8 版本，下面是详细的升级指引。</p> <h2 id="依赖升级"><a href="#依赖升级" class="header-anchor">#</a> 依赖升级</h2> <p>请按照下方列表升级或新增相关依赖：</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token punctuation">{</span>
+  <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;@mpxjs/api-proxy&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/core&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/store&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/pinia&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/utils&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/fetch&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token comment">// 这部分依赖为输出 web 专用，如项目无需输出 web 可以省略</span>
+    <span class="token property">&quot;vue&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.7.10&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;vue-demi&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^0.13.11&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;vue-i18n&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^8.27.2&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;vue-i18n-bridge&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^9.2.2&quot;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;@mpxjs/webpack-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/size-report&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/babel-plugin-inject-page-events&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="编译配置变更"><a href="#编译配置变更" class="header-anchor">#</a> 编译配置变更</h2> <p>在编译配置方面，用户几乎不用进行任何改变，唯一的例外是当用户想要通过组合式 API 的方式注册具有副作用的页面事件时，需要在 <code>babel</code> 配置中添加 <code>@mpxjs/babel-plugin-inject-page-events</code> 插件，如下所示：</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token comment">// babel.config.json</span>
+<span class="token punctuation">{</span>
+ <span class="token property">&quot;plugins&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">[</span>
+      <span class="token string">&quot;@babel/transform-runtime&quot;</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token property">&quot;corejs&quot;</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+        <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^7.10.4&quot;</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token string">&quot;@mpxjs/babel-plugin-inject-page-events&quot;</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>关于副作用页面事件的更多详情查看<a href="/guide/composition-api/composition-api.html#具有副作用的页面事件">这里</a>。</p> <h2 id="运行时破坏性变化"><a href="#运行时破坏性变化" class="header-anchor">#</a> 运行时破坏性变化</h2> <p>在 2.8 开发过程中，我们修正了过去版本中存在的不合理的设计与实现，在运行时带来了少许破坏性改变，详情如下：</p> <ul><li>框架过往提供的组件增强生命周期 <code>pageShow/pageHide</code> 与微信原生提供的 <code>pageLifetimes.show/hide</code> 完全对齐，不再提供组件初始挂载时必定执行 <code>pageShow</code> 的保障（因为组件可能在后台页面进行挂载），相关初始化逻辑一定不要放置在 <code>pageShow</code> 当中；</li> <li>取消了框架过去提供的基于内部生命周期实现的非标准增强生命周期，如 <code>beforeCreate/onBeforeCreate</code> 等，直接将内部生命周期变量导出提供给用户使用，详情查看<a href="/guide/composition-api/composition-api.html#框架内置生命周期">这里</a>；</li> <li>为了优化 tree shaking，作为框架运行时 <code>default export</code> 的 <code>Mpx</code> 对象不再挂载 <code>createComponent/createStore</code> 等运行时方法，一律通过 <code>named export</code> 提供，<code>Mpx</code> 对象上仅保留 <code>set/use</code> 等全局 API；</li> <li>使用 I18n 能力时，为了与新版 vue-i18n 保持对齐，<code>this.$i18n</code> 对象指向全局作用域，如需创建局部作用域需要使用组合式 API <code>useI18n</code> 的方式进行创建。</li> <li><code>watch</code> API 不再接受第二个参数为带有 <code>handler</code> 属性的对象形式（该参数形式只应存在于 <code>watch</code> option 中），第二个参数必须为回调函数，与 <a href="https://vuejs.org/api/reactivity-core.html#watch" target="_blank" rel="noopener noreferrer">Vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 对齐。</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/migrate/2.9.html" class="prev">
+        从 2.8 升级至 2.9
+      </a></span> <span class="next"><a href="/guide/migrate/2.7.html">
+        从旧版本迁移至 2.7
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/104.78f6358e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/migrate/2.9.html b/docs-vuepress/.vuepress/dist/guide/migrate/2.9.html
new file mode 100644
index 0000000000..e11caac560
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/migrate/2.9.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>从 2.8 升级至 2.9 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/105.eb6680fc.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" aria-current="page" class="active sidebar-link">从 2.8 升级至 2.9</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/migrate/2.9.html#依赖升级" class="sidebar-link">依赖升级</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.9.html#使用原子类" class="sidebar-link">使用原子类</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.9.html#使用ssr" class="sidebar-link">使用SSR</a></li></ul></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="从-2-8-升级至-2-9"><a href="#从-2-8-升级至-2-9" class="header-anchor">#</a> 从 2.8 升级至 2.9</h1> <p>Mpx 2.9 版本不包含破坏性变更，主要新增了原子类支持、输出 web 支持 SSR 和构建产物体积优化三项核心特性，更详细的介绍查看<a href="/articles/2.9-release.html">这里</a></p> <h2 id="依赖升级"><a href="#依赖升级" class="header-anchor">#</a> 依赖升级</h2> <p>如果你从既有项目中进行升级，仅需将 @mpxjs 下的依赖升级至 2.9 即可</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token punctuation">{</span>
+  <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;@mpxjs/api-proxy&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/core&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/store&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/pinia&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/utils&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/fetch&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;@mpxjs/webpack-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/size-report&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/babel-plugin-inject-page-events&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token comment">// 如需使用原子类，加入以下依赖</span>
+    <span class="token property">&quot;@mpxjs/unocss-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/unocss-base&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token comment">// 如需使用SSR，加入以下依赖</span>
+    <span class="token property">&quot;axios&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^1.6.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;express&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^4.18.2&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;serve-favicon&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.5.0&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;vue-server-renderer&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.7.14&quot;</span><span class="token punctuation">,</span>
+    <span class="token comment">// ...</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="使用原子类"><a href="#使用原子类" class="header-anchor">#</a> 使用原子类</h2> <p>详情查看<a href="/guide/advance/utility-first-css.html">这里</a></p> <h2 id="使用ssr"><a href="#使用ssr" class="header-anchor">#</a> 使用SSR</h2> <p>详情查看<a href="/guide/advance/ssr.html">这里</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/understand/compile.html" class="prev">
+        Mpx编译构建原理
+      </a></span> <span class="next"><a href="/guide/migrate/2.8.html">
+        从 2.7 升级至 2.8
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/105.eb6680fc.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/migrate/mpx-cli-3.html b/docs-vuepress/.vuepress/dist/guide/migrate/mpx-cli-3.html
new file mode 100644
index 0000000000..efbd718296
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/migrate/mpx-cli-3.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>mpx-cli v2 迁移到 v3 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/106.471f03cf.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" aria-current="page" class="active sidebar-link">mpx-cli v2 迁移到 v3</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/migrate/mpx-cli-3.html#升级-mpxjs-cli" class="sidebar-link">升级@mpxjs/cli</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/mpx-cli-3.html#配置迁移" class="sidebar-link">配置迁移</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/mpx-cli-3.html#新增自定义配置-修改已有配置参数" class="sidebar-link">新增自定义配置/修改已有配置参数</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/mpx-cli-3.html#编译后钩子" class="sidebar-link">编译后钩子</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/mpx-cli-3.html#项目结构变化" class="sidebar-link">项目结构变化</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/mpx-cli-3.html#more" class="sidebar-link">More</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx-cli-v2-迁移到-v3"><a href="#mpx-cli-v2-迁移到-v3" class="header-anchor">#</a> mpx-cli v2 迁移到 v3</h1> <h2 id="升级-mpxjs-cli"><a href="#升级-mpxjs-cli" class="header-anchor">#</a> 升级<code>@mpxjs/cli</code></h2> <div class="language- extra-class"><pre class="language-text"><code>npm install @mpxjs/cli@3.x -g
+</code></pre></div><h2 id="配置迁移"><a href="#配置迁移" class="header-anchor">#</a> 配置迁移</h2> <blockquote><p>v3 兼容了 v2 的所有配置，如果没有特殊修改，则不需要进行配置迁移。</p></blockquote> <ul><li><code>config/devServer.js</code>迁移到<code>vue.config.js</code>下的<code>devServer</code></li> <li><code>config/mpxPlugin.conf.js</code>迁移到<code>vue.config.js</code>下的<code>pluginOptions.mpx.plugin</code></li> <li><code>config/mpxLoader.conf.js</code>迁移到<code>vue.config.js</code>下的<code>pluginOptions.mpx.loader</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token comment">// 这里等同于`@mpxjs/webpack-plugin`的参数</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token comment">// 这里等同于`mpx-loader`参数</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// dev服务配置</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="新增自定义配置-修改已有配置参数"><a href="#新增自定义配置-修改已有配置参数" class="header-anchor">#</a> 新增自定义配置/修改已有配置参数</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
+<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'newPlugin'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>newPlugin<span class="token punctuation">,</span> <span class="token punctuation">[</span>params<span class="token punctuation">]</span><span class="token punctuation">)</span>
+    <span class="token comment">// 使用mpx inspect 可以根据注释来查看插件命名</span>
+    config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'mpx-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">args</span> <span class="token operator">=&gt;</span> newArgs<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 或者也可以通过configureWebpack配置,这里返回的配置会通过webpack-merge合并到内部配置中</span>
+  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token keyword">return</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Plugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><ul><li><a href="https://github.com/neutrinojs/webpack-chain" target="_blank" rel="noopener noreferrer">webpack-chain<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/survivejs/webpack-merge" target="_blank" rel="noopener noreferrer">webpack-merge<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="编译后钩子"><a href="#编译后钩子" class="header-anchor">#</a> 编译后钩子</h2> <p>由于 webpack 配置都内置到了插件里，所以编译后的钩子无法像 2.x 一样直接在<code>webpack</code>脚本里添加。</p> <p>这里有两个方案来解决上述问题</p> <ol><li><code>webpack</code>插件</li> <li>新建一个<code>mpx-cli</code>插件</li></ol> <p>例如我们新建一个<code>vue-cli-plugin-mpx-build-upload</code>插件,用来在构建完成后上传图片到<code>cdn</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// index.js</span>
+module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">api<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">function</span> <span class="token function">runServiceCommand</span><span class="token punctuation">(</span><span class="token parameter">api<span class="token punctuation">,</span> command<span class="token punctuation">,</span> <span class="token operator">...</span>args</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+    <span class="token keyword">const</span> <span class="token punctuation">{</span> fn <span class="token punctuation">}</span> <span class="token operator">=</span> api<span class="token punctuation">.</span>service<span class="token punctuation">.</span>commands<span class="token punctuation">[</span>command<span class="token punctuation">]</span>
+    <span class="token keyword">return</span> fn <span class="token operator">&amp;&amp;</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+  <span class="token comment">// 注册一个新的命令</span>
+  api<span class="token punctuation">.</span><span class="token function">registerCommand</span><span class="token punctuation">(</span><span class="token string">'build:upload'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">deploy</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 运行原有的build命令，build会返回一个promise来表示构建完成</span>
+    <span class="token keyword">return</span> <span class="token function">runServiceCommand</span><span class="token punctuation">(</span>api<span class="token punctuation">,</span> <span class="token string">'build'</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
+      <span class="token comment">// do something</span>
+      <span class="token function">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>然后在我们的项目里安装该插件并运行<code>npx mpx-cli-service build:upload</code>即可。</p> <h2 id="项目结构变化"><a href="#项目结构变化" class="header-anchor">#</a> 项目结构变化</h2> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/filetree.jpg" alt="项目结构变化"></p> <p>v3 版本相对于 v2 版本的目录结构更加清晰。</p> <ul><li>移除了<code>config/build</code>的配置目录，将其统一到了插件配置当中，可以通过<code>vue.config.js</code>修改。</li> <li><code>index.html</code>移动到<code>public</code>目录下。</li> <li>增加<code>jsconfig.json</code>,让类型提示更加友好。</li></ul> <h2 id="more"><a href="#more" class="header-anchor">#</a> More</h2> <p>v3 版本相对于 v2 版本的整体架构相差较大，v3 版本主要基于<code>vue-cli</code>架构，主要有以下优势。</p> <h3 id="_1-插件化"><a href="#_1-插件化" class="header-anchor">#</a> 1. 插件化</h3> <p>v3 版本的配置依靠插件化，将 v2 版本的文件配置整合到了各个自定义插件中。</p> <ul><li>vue-cli-plugin-mpx-eslint eslint 配置</li> <li>vue-cli-plugin-mpx-mp 小程序构建配置以及命令</li> <li>vue-cli-plugin-mpx-plugin-mode 插件配置</li> <li>vue-cli-plugin-mpx-typescript ts 配置</li> <li>vue-cli-plugin-mpx-web web 构建配置以及命令</li></ul> <p>除此之外，也可以使用统一的<code>vue.config.js</code>来自定义配置，或者将配置抽离到插件当中，来进行统一的管理。</p> <h3 id="_2-模板"><a href="#_2-模板" class="header-anchor">#</a> 2. 模板</h3> <p>v3 版本的模板也可以通过插件进行自定义生成，同时不依赖于 github，在国内网络下不会有生成模板时网络错误的问题。</p> <h3 id="_3-调试"><a href="#_3-调试" class="header-anchor">#</a> 3. 调试</h3> <p>v3 版本可以通过<code>mpx inspect:mp/web</code>来直接调试相关配置，可以更直观的发现配置错误。</p> <h3 id="_4-插件管理"><a href="#_4-插件管理" class="header-anchor">#</a> 4. 插件管理</h3> <p>使用<code>mpx invoke</code>/<code>mpx add</code>/<code>mpx upgrade</code>来管理插件，可以更细粒度的控制相关配置的更新。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/migrate/2.7.html" class="prev">
+        从旧版本迁移至 2.7
+      </a></span> <!----></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/106.471f03cf.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/platform/index.html b/docs-vuepress/.vuepress/dist/guide/platform/index.html
new file mode 100644
index 0000000000..43b6e08b46
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/platform/index.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>跨端输出基础 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/107.63fd18fd.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="跨端输出基础"><a href="#跨端输出基础" class="header-anchor">#</a> 跨端输出基础</h1> <p>Mpx以微信增强DSL为基础，支持跨端输出至多端小程序、web和客户端，包括支付宝、百度、抖音、京东、QQ等多端小程序平台，基于Vue的web平台，和基于react-native的ios、android及鸿蒙平台。</p> <h2 id="跨端输出配置"><a href="#跨端输出配置" class="header-anchor">#</a> 跨端输出配置</h2> <p>配置mpx进行跨端输出十分简单，找到项目构建的webpack配置，在@mpxjs/webpack-plugin的配置参数中设置mode和srcMode参数即可。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">MpxwebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token comment">// mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt|jd|web|ios|android|harmony)</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'ali'</span><span class="token punctuation">,</span>
+  <span class="token comment">// srcMode为mpx编译的源码平台，目前仅支持wx   </span>
+  <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>对于使用 @mpxjs/cli 创建的项目，可以通过在 <code>npm script</code> 当中定义 <code>targets</code> 来设置编译的目标平台，多个平台标识以<code>,</code>分隔。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 项目 package.json</span>
+<span class="token punctuation">{</span>
+  <span class="token string-property property">&quot;script&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">&quot;build:cross&quot;</span><span class="token operator">:</span> <span class="token string">&quot;mpx-cli-service build --targets=wx,ali,ios,android&quot;</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h2 id="跨端条件编译"><a href="#跨端条件编译" class="header-anchor">#</a> 跨端条件编译</h2> <p>Mpx跨端输出时在框架内针对不同平台的差异进行了大量的转换抹平工作，但框架能做的工作始终是有限的，对于框架无法抹平的部分我们会在编译和运行时进行报错提示，同时提供了完善的跨平台条件编译机制，便于用户自行进行差异化处理，该能力也能够用于实现区分平台进行业务逻辑实现。</p> <p>Mpx中我们支持了三种维度的条件编译，分别是文件维度，区块维度和代码维度，其中，文件维度和区块维度主要用于处理一些大块的平台差异性逻辑，而代码维度主要用于处理一些局部简单的平台差异。</p> <h3 id="文件维度条件编译"><a href="#文件维度条件编译" class="header-anchor">#</a> 文件维度条件编译</h3> <p>文件维度条件编译简单的来说就是文件为维度进行跨平台差异代码的编写，例如在微信-&gt;支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，这时你可以在相同的位置新建一个map.ali.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的mode来加载对应模块，当mode为ali时，会优先加载map.ali.mpx，反之则会加载map.mpx。</p> <p>文件维度条件编译能够与webpack alias结合使用，对于npm包的文件我们并不方便在原本的文件位置创建.ali的条件编译文件，但我们可以通过webpack alias在相同位置创建一个<code>虚拟的</code>.ali文件，并将其指向项目中的其他文件位置。</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// 对于npm包中的文件依赖</span>
+  <span class="token keyword">import</span> npmModule <span class="token keyword">from</span> <span class="token string">'somePackage/lib/index'</span>
+
+  <span class="token comment">// 配置以下alias后，当mode为ali时，会优先加载项目目录中定义的projectRoot/somePackage/lib/index文件</span>
+  <span class="token comment">// vue.config.js</span>
+  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token string-property property">'somePackage/lib/index.ali'</span><span class="token operator">:</span> <span class="token string">'projectRoot/somePackage/lib/index'</span>
+          <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="区块维度条件编译"><a href="#区块维度条件编译" class="header-anchor">#</a> 区块维度条件编译</h3> <p>在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加<code>mode</code>属性定义该区块的目标平台即可，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--编译mode为ali时使用如下区块--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+<span class="token comment">&lt;!--该区块中的所有代码需采用支付宝的技术标准进行编写--&gt;</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>支付宝环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token comment">&lt;!--其他编译mode时使用如下区块--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>其他环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="代码维度条件编译"><a href="#代码维度条件编译" class="header-anchor">#</a> 代码维度条件编译</h3> <p>如果只有局部的代码存在跨平台差异，mpx同样支持在代码内使用if/else进行局部条件编译，用户可以在js代码和template插值中访问<code>__mpx_mode__</code>获取当前编译mode，进行平台差异逻辑编写，js代码中使用示例如下。</p> <p>除了 <code>__mpx_mode__</code> 这个默认插值以外，有别的环境变量需要的话可以在mpx.plugin.conf.js里通过defs进行配置。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span><span class="token punctuation">(</span>__mpx_mode__ <span class="token operator">===</span> <span class="token string">'ali'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 执行支付宝环境相关逻辑</span>
+<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 执行其他环境相关逻辑</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>template代码中使用示例如下</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--此处的__mpx_mode__不需要在组件中声明数据，编译时会基于当前编译mode进行替换--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'ali'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>支付宝环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span>其他环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>JSON中的条件编译（注意，这个依赖JSON的动态方案，得通过name=&quot;json&quot;这种方式来编写，其实写的是js代码，最终module.exports导出一个可json化的对象即可）：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token keyword">const</span> pages <span class="token operator">=</span> __mpx_mode__ <span class="token operator">===</span> <span class="token string">'wx'</span> <span class="token operator">?</span> <span class="token punctuation">[</span>
+  <span class="token string">'main/xxx'</span><span class="token punctuation">,</span>
+  <span class="token string">'sub/xxx'</span>
+<span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token punctuation">[</span>
+  <span class="token string">'test/xxx'</span>
+<span class="token punctuation">]</span> <span class="token comment">// 可以为不同环境动态书写配置</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">usingComponents</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">aComponents</span><span class="token operator">:</span> <span class="token string">'../xxxxx'</span> <span class="token comment">// 可以打注释 xxx组件</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>样式的条件编译：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*
+  @mpx-if (__mpx_env__ === 'someEvn')
+*/</span>
+  <span class="token comment">/* @mpx-if (__mpx_mode__ === 'wx') */</span>
+  <span class="token selector">.backColor</span> <span class="token punctuation">{</span>
+    <span class="token property">background</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+  <span class="token comment">/*
+    @mpx-elif (__mpx_mode__ === 'qq')
+  */</span>
+  <span class="token selector">.backColor</span> <span class="token punctuation">{</span>
+    <span class="token property">background</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+  <span class="token comment">/* @mpx-endif */</span>
+
+  <span class="token comment">/* @mpx-if (__mpx_mode__ === 'swan') */</span>
+  <span class="token selector">.backColor</span> <span class="token punctuation">{</span>
+    <span class="token property">background</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+  <span class="token comment">/* @mpx-endif */</span>
+  <span class="token selector">.textSize</span> <span class="token punctuation">{</span>
+    <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+<span class="token comment">/*
+  @mpx-else
+*/</span>
+<span class="token selector">.backColor</span> <span class="token punctuation">{</span>
+  <span class="token comment">/* @mpx-if (__mpx_mode__ === 'swan') */</span>
+  <span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
+  <span class="token comment">/* @mpx-else */</span>
+  <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
+  <span class="token comment">/* @mpx-endif */</span>
+<span class="token punctuation">}</span>
+<span class="token comment">/*
+  @mpx-endif
+*/</span>
+</code></pre></div><h3 id="属性维度条件编译"><a href="#属性维度条件编译" class="header-anchor">#</a> 属性维度条件编译</h3> <p>属性维度条件编译允许用户在组件上使用 <code>@</code> 和 <code>|</code> 符号来指定某个节点或属性只在某些平台下有效。</p> <p>对于同一个 button 组件，微信小程序支持 <code>open-type=&quot;getUserInfo&quot;</code>，但是支付宝小程序支持 <code>open-type=&quot;getAuthorize&quot;</code>。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。</p> <p>比如业务中需要通过 button 按钮获取用户信息，虽然可以使用代码维度条件编译来解决，但是增加了很多代码量：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
+  <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'wx' || __mpx_mode__ === 'swan'}}<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">bindgetuserinfo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  获取用户信息
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
+  <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'ali'}}<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAuthorize<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  获取用户信息
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>而用属性维度的编译则方便很多：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
+  <span class="token attr-name">open-type@wx|swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">bindgetuserinfo@wx|swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">open-type@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAuthorize<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">scope@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span>
+  <span class="token attr-name">onTap@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  获取用户信息
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>属性维度的编译也可以对整个节点进行条件编译，例如只想在支付宝小程序中输出某个节点：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span><span class="token punctuation">&gt;</span></span>this is view<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>需要注意使用上述用法时，节点自身在构建时框架不会对节点属性进行平台语法转换，但对于其子节点，框架并不会继承父级节点 mode，会进行正常跨平台语法转换。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--错误示例--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+// srcMode 为 wx 跨端输出 ali 结果为
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>上述示例为错误写法，假如srcMode为微信小程序，用上述写法构建输出支付宝小程序时，父节点 bindtap 不会被转为 onTap，在支付宝平台执行时事件会无响应。</p> <p>正确写法如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--正确示例--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+// 输出 ali 产物
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>有时开发者期望使用 @ali 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--srcMode为 wx，输出 ali 时，bindtap 会被正常转换为 onTap--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@_ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。</p> <p>有时候我们不仅需要对节点属性进行条件编译，可能还需要对节点标签进行条件编译。</p> <p>为此，我们支持了一个特殊属性 <code>mpxTagName</code>，如果节点存在这个属性，我们会在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">mpxTagName@swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>will be cover-view in swan<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="use-env"><a href="#use-env" class="header-anchor">#</a> 通过 env 实现自定义目标环境的条件编译 </h3> <p>Mpx 支持在以上四种条件编译的基础上，通过自定义 env 的形式实现在不同环境下编译产出不同的代码。</p> <p>实例化 MpxWebpackPlugin 的时候，传入配置 env。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span> <span class="token comment">// srcMode为mpx编译的源码平台，目前仅支持wx</span>
+      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token string">&quot;didi&quot;</span> <span class="token comment">// env为mpx编译的目标环境，需自定义</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="文件维度条件编译-2"><a href="#文件维度条件编译-2" class="header-anchor">#</a> 文件维度条件编译</h4> <p>微信转支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，而且这个地图组件在不同的目标环境中也有很大的差异，这时你可以在相同的位置新建一个 map.ali.didi.mpx 或 map.ali.qingju.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的 mode 和 env 来加载对应模块，当 mode 为 ali，env 为 didi 时，会优先加载 map.ali.didi.mpx、map.ali.mpx，如果没有定义 env，则会优先加载 map.ali.mpx，反之则会加载 map.mpx。</p> <h4 id="区块维度条件编译-2"><a href="#区块维度条件编译-2" class="header-anchor">#</a> 区块维度条件编译</h4> <p>在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加<code>mode</code>或<code>env</code>属性定义该区块的目标平台即可，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--编译mode为ali且env为didi时使用如下区块，优先级最高是4--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span> <span class="token attr-name">env</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>didi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token comment">&lt;!--编译mode为ali时使用如下区块，优先级是3--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token comment">&lt;!--编译env为didi时使用如下区块，优先级是2--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">env</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>didi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token comment">&lt;!--其他环境，优先级是1--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>注意，如果多个相同的区块写相同的 mode 和 env，默认会用最后一个，如：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块会被忽略<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>默认会用这个区块<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h4 id="代码维度条件编译-2"><a href="#代码维度条件编译-2" class="header-anchor">#</a> 代码维度条件编译</h4> <p>如果在 MpxWebpackPlugin 插件初始化时自定义了 env，你可以访问<code>__mpx_env__</code>获取当前编译env，进行环境差异逻辑编写。使用方法与<code>__mpx_mode__</code>相同。</p> <h4 id="属性维度条件编译-2"><a href="#属性维度条件编译-2" class="header-anchor">#</a> 属性维度条件编译</h4> <p>env 属性维度条件编译与 mode 的用法大致相同，使用 <code>:</code> 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 <code>attr@mode:env:env|mode:env</code>，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 <code>:</code> 前缀，形如 <code>attr@:env</code>。</p> <p>对于同一个 button 组件，微信小程序支持 <code>open-type=&quot;getUserInfo&quot;</code>，但是支付宝小程序支持 <code>open-type=&quot;getAuthorize&quot;</code>。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。</p> <p>如果当前编译的目标平台是 wx，以下写法 open-type 属性将被忽略</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@swan:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>如果当前 env 不是 didi，以下写法 open-type 属性也会被忽略</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>如果只想在 mode 为 wx 且 env 为 didi 或 qingju 的环境下使用 open-type 属性，则可以这样写：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@wx:</span><span class="token namespace">didi:</span>qingju</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>env 属性维度的编译同样支持对整个节点或者节点标签名进行条件编译：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">@:</span>didi</span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">mpxTagName@:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap--&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">@:</span>didi</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">bindtap@:</span>didi</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h2 id="环境api跨端抹平"><a href="#环境api跨端抹平" class="header-anchor">#</a> 环境API跨端抹平</h2> <h2 id="webview环境跨端抹平"><a href="#webview环境跨端抹平" class="header-anchor">#</a> Webview环境跨端抹平</h2></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/107.63fd18fd.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/platform/miniprogram.html b/docs-vuepress/.vuepress/dist/guide/platform/miniprogram.html
new file mode 100644
index 0000000000..2e04c6e315
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/platform/miniprogram.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/108.614260e9.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/108.614260e9.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/platform/rn.html b/docs-vuepress/.vuepress/dist/guide/platform/rn.html
new file mode 100644
index 0000000000..d804f30d1b
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/platform/rn.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>跨端输出RN | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/109.3da50cc1.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="跨端输出rn"><a href="#跨端输出rn" class="header-anchor">#</a> 跨端输出RN</h1> <p>大致介绍</p> <h2 id="跨端样式定义"><a href="#跨端样式定义" class="header-anchor">#</a> 跨端样式定义</h2> <h3 id="css选择器"><a href="#css选择器" class="header-anchor">#</a> CSS选择器</h3> <h3 id="样式单位"><a href="#样式单位" class="header-anchor">#</a> 样式单位</h3> <h3 id="文本样式继承"><a href="#文本样式继承" class="header-anchor">#</a> 文本样式继承</h3> <h3 id="简写样式属性"><a href="#简写样式属性" class="header-anchor">#</a> 简写样式属性</h3> <h3 id="css函数"><a href="#css函数" class="header-anchor">#</a> CSS函数</h3> <h3 id="使用原子类"><a href="#使用原子类" class="header-anchor">#</a> 使用原子类</h3> <h2 id="混合编写rn代码"><a href="#混合编写rn代码" class="header-anchor">#</a> 混合编写RN代码</h2> <h3 id="使用rn组件"><a href="#使用rn组件" class="header-anchor">#</a> 使用RN组件</h3> <h3 id="使用react-hooks"><a href="#使用react-hooks" class="header-anchor">#</a> 使用React hooks</h3> <h2 id="能力支持范围"><a href="#能力支持范围" class="header-anchor">#</a> 能力支持范围</h2> <h3 id="模版语法"><a href="#模版语法" class="header-anchor">#</a> 模版语法</h3> <h4 id="事件处理"><a href="#事件处理" class="header-anchor">#</a> 事件处理</h4> <p>目前 Mpx 输出 React Native 的事件编写遵循小程序的事件编写规范，支持事件的冒泡及捕获</p> <p>普通事件绑定</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view bindtap<span class="token operator">=</span><span class="token string">&quot;handleTap&quot;</span><span class="token operator">&gt;</span>
+    Click here<span class="token operator">!</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+</code></pre></div><p>绑定并阻止事件冒泡</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view catchtap<span class="token operator">=</span><span class="token string">&quot;handleTap&quot;</span><span class="token operator">&gt;</span>
+    Click here<span class="token operator">!</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+</code></pre></div><p>事件捕获</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view capture<span class="token operator">-</span>bind<span class="token operator">:</span>touchstart<span class="token operator">=</span><span class="token string">&quot;handleTap1&quot;</span><span class="token operator">&gt;</span>
+  outer view
+  <span class="token operator">&lt;</span>view capture<span class="token operator">-</span>bind<span class="token operator">:</span>touchstart<span class="token operator">=</span><span class="token string">&quot;handleTap2&quot;</span><span class="token operator">&gt;</span>
+    inner view
+  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+</code></pre></div><p>中断捕获阶段和取消冒泡阶段</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view capture<span class="token operator">-</span>catch<span class="token operator">:</span>touchstart<span class="token operator">=</span><span class="token string">&quot;handleTap1&quot;</span><span class="token operator">&gt;</span>
+  outer view
+<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+
+</code></pre></div><p>在此基础上也新增了事件处理内联传参的增强机制。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token comment">&lt;!--Mpx增强语法，模板内联传参，方便简洁--&gt;</span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTapInline('b')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token comment">// 直接通过参数获取数据，直观方便</span>
+  <span class="token keyword">const</span> <span class="token function-variable function">handleTapInline</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'name:'</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+  <span class="token comment">// ...</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>除此之外，Mpx 也支持了动态事件绑定</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token comment">&lt;!--动态事件绑定--&gt;</span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{items}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap_{{index}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  {{item}}
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Item 1'</span><span class="token punctuation">,</span> <span class="token string">'Item 2'</span><span class="token punctuation">,</span> <span class="token string">'Item 3'</span><span class="token punctuation">,</span> <span class="token string">'Item 4'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_0</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+
+  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_1</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+
+  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 3'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+
+  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_3</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 4'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>注意事项</p> <ol><li>当同一个元素上同时绑定了 catchtap 和 bindtap 事件时，两个事件都会被触发执行。但是是否阻止事件冒泡的行为,会以模板上第一个绑定的事件标识符为准。
+如果第一个绑定的是 catchtap，那么不管后面绑定的是什么,都会阻止事件冒泡。如果第一个绑定的是 bindtap，则不会阻止事件冒泡。</li> <li>当同一个元素上绑定了 capture-bind:tap 和 bindtap 事件时，事件的执行时机会根据模板上第一个绑定事件的标识符来决定。如果第一个绑定的是 capture-bind:tap，则事件会在捕获阶段触发，如果第一个绑定的是 bindtap，则事件会在冒泡阶段触发。</li> <li>当使用了事件委托想获取 e.target.dataset 时，只有点击到文本节点才能获取到，点击其他区域无效。建议直接将事件绑定到事件触发的元素上，使用 e.currentTarget 来获取 dataset 等数据。</li> <li>如果元素上设置了 opacity: 0 的样式，会导致 ios 事件无法响应。</li></ol> <h3 id="基础组件"><a href="#基础组件" class="header-anchor">#</a> 基础组件</h3> <p>目前 Mpx 输出 React Native 仅支持以下组件，文档中未提及的组件以及组件属性即为不支持，具体使用范围可参考如下文档</p> <p>RN环境基础组件通用属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>enable-offset</td> <td>Boolean</td> <td>false</td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr> <tr><td>enable-var</td> <td>Boolean</td> <td>true</td> <td>默认支持使用 css variable，若想关闭该功能可设置为 false</td></tr> <tr><td>parent-font-size</td> <td>Number</td> <td></td> <td>父组件字体大小，主要用于百分比计算的场景，如 font-size: 100%</td></tr> <tr><td>parent-width</td> <td>Number</td> <td></td> <td>父组件宽度，主要用于百分比计算的场景，如 width: calc(100% - 20px)，需要在外部传递父组件的宽度</td></tr> <tr><td>parent-height</td> <td>Number</td> <td></td> <td>父组件高度，主要用于百分比计算的场景，如 height: calc(100% - 20px),需要在外部传递父组件的高度</td></tr></tbody></table> <h4 id="view"><a href="#view" class="header-anchor">#</a> view</h4> <p>视图容器。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>hover-class</td> <td>string</td> <td></td> <td>指定按下去的样式类。</td></tr> <tr><td>hover-start-time</td> <td>number</td> <td>50</td> <td>按住后多久出现点击态，单位毫秒</td></tr> <tr><td>hover-stay-time</td> <td>number</td> <td>400</td> <td>手指松开后点击态保留时间，单位毫秒</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td>false</td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindtap</td> <td>点击的时候触发</td></tr></tbody></table> <h4 id="scroll-view"><a href="#scroll-view" class="header-anchor">#</a> scroll-view</h4> <p>可滚动视图区域。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>scroll-x</td> <td>Boolean</td> <td><code>false</code></td> <td>允许横向滚动动</td></tr> <tr><td>scroll-y</td> <td>Boolean</td> <td><code>false</code></td> <td>允许纵向滚动</td></tr> <tr><td>upper-threshold</td> <td>Number</td> <td><code>50</code></td> <td>距顶部/左边多远时(单位 px),触发 scrolltoupper 事件</td></tr> <tr><td>lower-threshold</td> <td>Number</td> <td><code>50</code></td> <td>距底部/右边多远时(单位 px),触发 scrolltolower 事件</td></tr> <tr><td>scroll-top</td> <td>Number</td> <td><code>0</code></td> <td>设置纵向滚动条位置</td></tr> <tr><td>scroll-left</td> <td>Number</td> <td><code>0</code></td> <td>设置横向滚动条位置</td></tr> <tr><td>scroll-with-animation</td> <td>Boolean</td> <td><code>false</code></td> <td>在设置滚动条位置时使用动画过渡</td></tr> <tr><td>enable-back-to-top</td> <td>Boolean</td> <td><code>false</code></td> <td>点击状态栏的时候视图会滚动到顶部</td></tr> <tr><td>enhanced</td> <td>Boolean</td> <td><code>false</code></td> <td>scroll-view 组件功能增强</td></tr> <tr><td>refresher-enabled</td> <td>Boolean</td> <td><code>false</code></td> <td>开启自定义下拉刷新</td></tr> <tr><td>scroll-anchoring</td> <td>Boolean</td> <td><code>false</code></td> <td>开启滚动区域滚动锚点</td></tr> <tr><td>scroll-into-view</td> <td>Boolean</td> <td><code>false</code></td> <td>值应为某子元素id（id不能以数字开头）</td></tr> <tr><td>refresher-default-style</td> <td>String</td> <td><code>'black'</code></td> <td>设置下拉刷新默认样式,支持 <code>black</code>、<code>white</code>、<code>none</code>，仅安卓支持</td></tr> <tr><td>refresher-background</td> <td>String</td> <td><code>'#fff'</code></td> <td>设置自定义下拉刷新背景颜色，仅安卓支持</td></tr> <tr><td>refresher-triggered</td> <td>Boolean</td> <td><code>false</code></td> <td>设置当前下拉刷新状态,true 表示已触发</td></tr> <tr><td>paging-enabled</td> <td>Number</td> <td><code>false</code></td> <td>分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置</td></tr> <tr><td>show-scrollbar</td> <td>Number</td> <td><code>true</code></td> <td>滚动条显隐控制 (同时开启 enhanced 属性后生效)</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr> <tr><td>enable-trigger-intersection-observer</td> <td>Boolean</td> <td>[]</td> <td>是否开启intersection-observer</td></tr> <tr><td>simultaneous-handlers</td> <td>Array<object></object></td> <td>[]</td> <td>主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件</td></tr> <tr><td>wait-for</td> <td>Array<object></object></td> <td>[]</td> <td>主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>binddragstart</td> <td>滑动开始事件，同时开启 enhanced 属性后生效</td></tr> <tr><td>binddragging</td> <td>滑动事件，同时开启 enhanced 属性后生效</td></tr> <tr><td>binddragend</td> <td>滑动结束事件，同时开启 enhanced 属性后生效</td></tr> <tr><td>bindscrolltoupper</td> <td>滚动到顶部/左边触发</td></tr> <tr><td>bindscrolltolower</td> <td>滚动到底部/右边触发</td></tr> <tr><td>bindscroll</td> <td>滚动时触发</td></tr> <tr><td>bindrefresherrefresh</td> <td>自定义下拉刷新被触发</td></tr></tbody></table> <p>注意事项</p> <ol><li>目前不支持自定义下拉刷新节点，使用 slot=&quot;refresher&quot; 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来</li> <li>若使用 scroll-into-view 属性，需要 id 对应的组件节点添加 wx:ref 标记，否则无法正常滚动</li> <li>simultaneous-handlers 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture]</li> <li>wait-for  为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail]</li></ol> <h4 id="swiper"><a href="#swiper" class="header-anchor">#</a> swiper</h4> <p>滑块视图容器。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>indicator-dots</td> <td>Boolean</td> <td><code>false</code></td> <td>是否显示面板指示点</td></tr> <tr><td>indicator-color</td> <td>color</td> <td><code>rgba(0, 0, 0, .3)</code></td> <td>指示点颜色</td></tr> <tr><td>indicator-active-color</td> <td>color</td> <td><code>#000000</code></td> <td>当前选中的指示点颜色</td></tr> <tr><td>autoplay</td> <td>Boolean</td> <td><code>false</code></td> <td>是否自动切换</td></tr> <tr><td>current</td> <td>Number</td> <td><code>0</code></td> <td>当前所在滑块的 index</td></tr> <tr><td>interval</td> <td>Number</td> <td><code>5000</code></td> <td>自动切换时间间隔</td></tr> <tr><td>duration</td> <td>Number</td> <td><code>500</code></td> <td>滑动动画时长</td></tr> <tr><td>circular</td> <td>Boolean</td> <td><code>false</code></td> <td>是否采用衔接滑动</td></tr> <tr><td>vertical</td> <td>Boolean</td> <td><code>false</code></td> <td>滑动方向是否为纵向</td></tr> <tr><td>previous-margin</td> <td>String</td> <td><code>0</code></td> <td>前边距，可用于露出前一项的一小部分，接受px</td></tr> <tr><td>next-margin</td> <td>String</td> <td><code>0</code></td> <td>后边距，可用于露出后一项的一小部分，接受px</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr> <tr><td>easing-function</td> <td>String</td> <td><code>linear</code></td> <td>支持 linear、easeInCubic、easeOutCubic、easeInOutCubic</td></tr> <tr><td>bindchange</td> <td>eventhandle</td> <td>无</td> <td>current 改变时会触发 change 事件，event.detail = {current, source}</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>current 改变时会触发 change 事件，event.detail = {current, source}</td></tr></tbody></table> <h4 id="swiper-item"><a href="#swiper-item" class="header-anchor">#</a> swiper-item</h4> <ol><li>仅可放置在swiper组件中，宽高自动设置为100%。</li></ol> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>item-id</td> <td>string</td> <td><code>无</code></td> <td>该 swiper-item 的标识符</td></tr></tbody></table> <h4 id="movable-area"><a href="#movable-area" class="header-anchor">#</a> movable-area</h4> <p>movable-view的可移动区域。</p> <p>注意事项</p> <ol><li>movable-area不支持设置 scale-area，缩放手势生效区域仅在 movable-view 内</li></ol> <h4 id="movable-view"><a href="#movable-view" class="header-anchor">#</a> movable-view</h4> <p>可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>direction</td> <td>String</td> <td>none</td> <td>目前支持 all、vertical、horizontal、none｜</td></tr> <tr><td>inertia</td> <td>boolean</td> <td>false</td> <td>movable-view是否带有惯性｜</td></tr> <tr><td>out-of-bounds</td> <td>boolean</td> <td>false</td> <td>超过可移动区域后，movable-view是否还可以移动｜</td></tr> <tr><td>x</td> <td>Number</td> <td></td> <td>定义x轴方向的偏移</td></tr> <tr><td>y</td> <td>Number</td> <td></td> <td>定义y轴方向的偏移</td></tr> <tr><td>friction</td> <td>Number</td> <td>7</td> <td>摩擦系数</td></tr> <tr><td>disabled</td> <td>boolean</td> <td>false</td> <td>是否禁用</td></tr> <tr><td>animation</td> <td>boolean</td> <td>true</td> <td>是否使用动画</td></tr> <tr><td>simultaneous-handlers</td> <td>Array<object></object></td> <td>[]</td> <td>主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件</td></tr> <tr><td>wait-for</td> <td>Array<object></object></td> <td>[]</td> <td>主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>拖动过程中触发的事件，event.detail = {x, y, source}</td></tr> <tr><td>bindscale</td> <td>缩放过程中触发的事件，event.detail = {x, y, scale}</td></tr> <tr><td>htouchmove</td> <td>初次手指触摸后移动为横向的移动时触发</td></tr> <tr><td>vtouchmove</td> <td>初次手指触摸后移动为纵向的移动时触发</td></tr></tbody></table> <p>注意事项</p> <ol><li>simultaneous-handlers 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture]</li> <li>wait-for  为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail]</li></ol> <h4 id="root-portal"><a href="#root-portal" class="header-anchor">#</a> root-portal</h4> <p>使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。
+属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody></tbody></table> <p>| enable   | boolean           |   true	     | 是否从页面中脱离出来	｜</p> <p>注意事项</p> <ol><li>style 样式不支持中使用百分比计算、css variable</li></ol> <h4 id="cover-view"><a href="#cover-view" class="header-anchor">#</a> cover-view</h4> <p>视图容器。
+功能同 view 组件</p> <h4 id="cover-image"><a href="#cover-image" class="header-anchor">#</a> cover-image</h4> <p>视图容器。
+功能同 image 组件</p> <h4 id="icon"><a href="#icon" class="header-anchor">#</a> icon</h4> <p>图标组件</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>type</td> <td>String</td> <td></td> <td>icon 的类型，有效值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear</td></tr> <tr><td>size</td> <td>String | Number</td> <td>23</td> <td>icon 的大小</td></tr> <tr><td>color</td> <td>String</td> <td></td> <td>icon 的颜色，同 css 的 color</td></tr></tbody></table> <h4 id="text"><a href="#text" class="header-anchor">#</a> text</h4> <p>文本。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>user-select</td> <td>boolean</td> <td><code>false</code></td> <td>文本是否可选。</td></tr> <tr><td>disable-default-style</td> <td>boolean</td> <td><code>false</code></td> <td>会内置默认样式，比如fontSize为16。设置<code>true</code>可以禁止默认的内置样式。</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td>false</td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindtap</td> <td>点击的时候触发</td></tr></tbody></table> <p>注意事项</p> <ol><li>未包裹 text 标签的文本，会自动包裹 text 标签。</li> <li>text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段</li></ol> <h4 id="button"><a href="#button" class="header-anchor">#</a> button</h4> <p>按钮。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>size</td> <td>String</td> <td><code>default</code></td> <td>按钮的大小</td></tr> <tr><td>type</td> <td>String</td> <td><code>default</code></td> <td>按钮的样式类型</td></tr> <tr><td>plain</td> <td>Boolean</td> <td><code>false</code></td> <td>按钮是否镂空，背景色透明</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr> <tr><td>loading</td> <td>Boolean</td> <td><code>false</code></td> <td>名称前是否带 loading 图标</td></tr> <tr><td>open-type</td> <td>String</td> <td></td> <td>微信开放能力，当前仅支持 <code>share</code></td></tr> <tr><td>hover-class</td> <td>String</td> <td></td> <td>指定按钮按下去的样式类。当 hover-class=&quot;none&quot; 时，没有点击态效果</td></tr> <tr><td>hover-start-time</td> <td>Number</td> <td><code>20</code></td> <td>按住后多久出现点击态，单位毫秒</td></tr> <tr><td>hover-stay-time</td> <td>Number</td> <td><code>70</code></td> <td>手指松开后点击态保留时间，单位毫秒</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <h4 id="label"><a href="#label" class="header-anchor">#</a> label</h4> <p>用来改进表单组件的可用性</p> <p>注意事项</p> <ol><li>当前不支持使用 for 属性找到对应 id，仅支持将控件放在该标签内，目前可以绑定的空间有：checkbox、radio、switch。</li></ol> <h4 id="checkbox"><a href="#checkbox" class="header-anchor">#</a> checkbox</h4> <p>多选项目</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td>false</td> <td>是否禁用</td></tr> <tr><td>checked</td> <td>Boolean</td> <td>false</td> <td>当前是否选中，可用来设置默认选中</td></tr> <tr><td>color</td> <td>String</td> <td>#09BB07</td> <td>checkbox的颜色，同css的color</td></tr></tbody></table> <h4 id="checkbox-group"><a href="#checkbox-group" class="header-anchor">#</a> checkbox-group</h4> <p>多项选择器，内部由多个checkbox组成。</p> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }</td></tr></tbody></table> <h4 id="radio"><a href="#radio" class="header-anchor">#</a> radio</h4> <p>单选项目</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>radio 标识，当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td>false</td> <td>是否禁用</td></tr> <tr><td>checked</td> <td>Boolean</td> <td>false</td> <td>当前是否选中，可用来设置默认选中</td></tr> <tr><td>color</td> <td>String</td> <td>#09BB07</td> <td>checkbox 的颜色，同 css 的 color</td></tr></tbody></table> <h4 id="radio-group"><a href="#radio-group" class="header-anchor">#</a> radio-group</h4> <p>单项选择器，内部由多个 radio 组成</p> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>radio-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 radio 的 value 的数组 ] }</td></tr></tbody></table> <h4 id="form"><a href="#form" class="header-anchor">#</a> form</h4> <p>表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。</p> <p>当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。</p> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindsubmit</td> <td>携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} }</td></tr> <tr><td>bindreset</td> <td>表单重置时会触发 reset 事件</td></tr></tbody></table> <h4 id="input"><a href="#input" class="header-anchor">#</a> input</h4> <p>输入框。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>输入框的初始内容</td></tr> <tr><td>type</td> <td>String</td> <td><code>text</code></td> <td>input 的类型，不支持 <code>safe-password</code>、<code>nickname</code></td></tr> <tr><td>password</td> <td>Boolean</td> <td><code>false</code></td> <td>是否是密码类型</td></tr> <tr><td>placeholder</td> <td>String</td> <td></td> <td>输入框为空时占位符</td></tr> <tr><td>placeholder-class</td> <td>String</td> <td></td> <td>指定 placeholder 的样式类，仅支持 color 属性</td></tr> <tr><td>placeholder-style</td> <td>String</td> <td></td> <td>指定 placeholder 的样式，仅支持 color 属性</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr> <tr><td>maxlength</td> <td>Number</td> <td><code>140</code></td> <td>最大输入长度，设置为 -1 的时候不限制最大长度</td></tr> <tr><td>auto-focus</td> <td>Boolean</td> <td><code>false</code></td> <td>(即将废弃，请直接使用 focus )自动聚焦，拉起键盘</td></tr> <tr><td>focus</td> <td>Boolean</td> <td><code>false</code></td> <td>获取焦点</td></tr> <tr><td>confirm-type</td> <td>String</td> <td><code>done</code></td> <td>设置键盘右下角按钮的文字，仅在 type='text' 时生效</td></tr> <tr><td>confirm-hold</td> <td>Boolean</td> <td><code>false</code></td> <td>点击键盘右下角按钮时是否保持键盘不收起</td></tr> <tr><td>cursor</td> <td>Number</td> <td></td> <td>指定 focus 时的光标位置</td></tr> <tr><td>cursor-color</td> <td>String</td> <td></td> <td>光标颜色</td></tr> <tr><td>selection-start</td> <td>Number</td> <td><code>-1</code></td> <td>光标起始位置，自动聚集时有效，需与 selection-end 搭配使用</td></tr> <tr><td>selection-end</td> <td>Number</td> <td><code>-1</code></td> <td>光标结束位置，自动聚集时有效，需与 selection-start 搭配使用</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindinput</td> <td>键盘输入时触发，event.detail = { value, cursor }，不支持 <code>keyCode</code></td></tr> <tr><td>bindfocus</td> <td>输入框聚焦时触发，event.detail = { value }，不支持 <code>height</code></td></tr> <tr><td>bindblur</td> <td>输入框失去焦点时触发，event.detail = { value }，不支持 <code>encryptedValue</code>、<code>encryptError</code></td></tr> <tr><td>bindconfirm</td> <td>点击完成按钮时触发，event.detail = { value }</td></tr> <tr><td>bind:selectionchange</td> <td>选区改变事件, event.detail = { selectionStart, selectionEnd }</td></tr></tbody></table> <p>方法</p> <p>可通过 <code>ref</code> 方式调用以下组件实例方法</p> <table><thead><tr><th>方法名</th> <th>说明</th></tr></thead> <tbody><tr><td>focus</td> <td>使输入框得到焦点</td></tr> <tr><td>blur</td> <td>使输入框失去焦点</td></tr> <tr><td>clear</td> <td>清空输入框的内容</td></tr> <tr><td>isFocused</td> <td>返回值表明当前输入框是否获得了焦点</td></tr></tbody></table> <h4 id="textarea"><a href="#textarea" class="header-anchor">#</a> textarea</h4> <p>多行输入框。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>输入框内容</td></tr> <tr><td>type</td> <td>String</td> <td><code>text</code></td> <td>input 的类型，不支持 <code>safe-password</code>、<code>nickname</code></td></tr> <tr><td>placeholder</td> <td>String</td> <td></td> <td>输入框为空时占位符</td></tr> <tr><td>placeholder-class</td> <td>String</td> <td></td> <td>指定 placeholder 的样式类，仅支持 color 属性</td></tr> <tr><td>placeholder-style</td> <td>String</td> <td></td> <td>指定 placeholder 的样式，仅支持 color 属性</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr> <tr><td>maxlength</td> <td>Number</td> <td><code>140</code></td> <td>最大输入长度，设置为 -1 的时候不限制最大长度</td></tr> <tr><td>auto-focus</td> <td>Boolean</td> <td><code>false</code></td> <td>(即将废弃，请直接使用 focus )自动聚焦，拉起键盘</td></tr> <tr><td>focus</td> <td>Boolean</td> <td><code>false</code></td> <td>获取焦点</td></tr> <tr><td>auto-height</td> <td>Boolean</td> <td><code>false</code></td> <td>是否自动增高，设置 auto-height 时，style.height不生效</td></tr> <tr><td>confirm-type</td> <td>String</td> <td><code>done</code></td> <td>设置键盘右下角按钮的文字，不支持 <code>return</code></td></tr> <tr><td>confirm-hold</td> <td>Boolean</td> <td><code>false</code></td> <td>点击键盘右下角按钮时是否保持键盘不收起</td></tr> <tr><td>cursor</td> <td>Number</td> <td></td> <td>指定 focus 时的光标位置</td></tr> <tr><td>cursor-color</td> <td>String</td> <td></td> <td>光标颜色</td></tr> <tr><td>selection-start</td> <td>Number</td> <td><code>-1</code></td> <td>光标起始位置，自动聚集时有效，需与 selection-end 搭配使用</td></tr> <tr><td>selection-end</td> <td>Number</td> <td><code>-1</code></td> <td>光标结束位置，自动聚集时有效，需与 selection-start 搭配使用</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindinput</td> <td>键盘输入时触发，event.detail = { value, cursor }，不支持 <code>keyCode</code></td></tr> <tr><td>bindfocus</td> <td>输入框聚焦时触发，event.detail = { value }，不支持 <code>height</code></td></tr> <tr><td>bindblur</td> <td>输入框失去焦点时触发，event.detail = { value }，不支持 <code>encryptedValue</code>、<code>encryptError</code></td></tr> <tr><td>bindconfirm</td> <td>点击完成按钮时触发，event.detail = { value }</td></tr> <tr><td>bindlinechange</td> <td>输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 <code>heightRpx</code></td></tr> <tr><td>bind:selectionchange</td> <td>选区改变事件, {selectionStart, selectionEnd}</td></tr></tbody></table> <p>方法</p> <p>可通过 <code>ref</code> 方式调用以下组件实例方法</p> <table><thead><tr><th>方法名</th> <th>说明</th></tr></thead> <tbody><tr><td>focus</td> <td>使输入框得到焦点</td></tr> <tr><td>blur</td> <td>使输入框失去焦点</td></tr> <tr><td>clear</td> <td>清空输入框的内容</td></tr> <tr><td>isFocused</td> <td>返回值表明当前输入框是否获得了焦点</td></tr></tbody></table> <h4 id="picker-view"><a href="#picker-view" class="header-anchor">#</a> picker-view</h4> <p>嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>Array[number]</td> <td><code>false</code></td> <td>数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }</td></tr></tbody></table> <h4 id="picker-view-column"><a href="#picker-view-column" class="header-anchor">#</a> picker-view-column</h4> <p>滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致</p> <h4 id="picker"><a href="#picker" class="header-anchor">#</a> picker</h4> <p>从底部弹起的滚动选择器。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>mode</td> <td>string</td> <td><code>selector</code></td> <td>选择器类型</td></tr> <tr><td>disabled</td> <td>boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr></tbody></table> <p>公共事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindcancel</td> <td>取消选择时触发</td></tr> <tr><td>bindchange</td> <td>滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）</td></tr></tbody></table> <h5 id="普通选择器-mode-selector"><a href="#普通选择器-mode-selector" class="header-anchor">#</a> 普通选择器：mode = selector</h5> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>range</td> <td>array[object]/array</td> <td><code>[]</code></td> <td>mode 为 selector 或 multiSelector 时，range 有效</td></tr> <tr><td>range-key</td> <td>string</td> <td><code>false</code></td> <td>当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容</td></tr> <tr><td>value</td> <td>number</td> <td>0</td> <td>表示选择了 range 中的第几个（下标从 0 开始）</td></tr></tbody></table> <h5 id="多列选择器-mode-multiselector"><a href="#多列选择器-mode-multiselector" class="header-anchor">#</a> 多列选择器：mode = multiSelector</h5> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>range</td> <td>array[object]/array</td> <td><code>[]</code></td> <td>mode 为 selector 或 multiSelector 时，range 有效</td></tr> <tr><td>range-key</td> <td>string</td> <td><code>false</code></td> <td>当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容</td></tr> <tr><td>value</td> <td>array</td> <td><code>[]</code></td> <td>表示选择了 range 中的第几个（下标从 0 开始）</td></tr> <tr><td>bindcolumnchange</td> <td></td> <td></td> <td>列改变时触发</td></tr></tbody></table> <h5 id="多列选择器-时间选择器-mode-time"><a href="#多列选择器-时间选择器-mode-time" class="header-anchor">#</a> 多列选择器：时间选择器：mode = time</h5> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>string</td> <td><code>[]</code></td> <td>表示选中的时间，格式为&quot;hh:mm&quot;</td></tr> <tr><td>start</td> <td>string</td> <td><code>false</code></td> <td>表示有效时间范围的开始，字符串格式为&quot;hh:mm&quot;</td></tr> <tr><td>end</td> <td>string</td> <td><code>[]</code></td> <td>表示有效时间范围的结束，字符串格式为&quot;hh:mm&quot;</td></tr></tbody></table> <h5 id="多列选择器-时间选择器-mode-date"><a href="#多列选择器-时间选择器-mode-date" class="header-anchor">#</a> 多列选择器：时间选择器：mode = date</h5> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>string</td> <td><code>当天</code></td> <td>表示选中的日期，格式为&quot;YYYY-MM-DD&quot;</td></tr> <tr><td>start</td> <td>string</td> <td><code>false</code></td> <td>表示有效日期范围的开始，字符串格式为&quot;YYYY-MM-DD&quot;</td></tr> <tr><td>end</td> <td>string</td> <td><code>[]</code></td> <td>表示有效日期范围的结束，字符串格式为&quot;YYYY-MM-DD&quot;</td></tr> <tr><td>fields</td> <td>string</td> <td><code>day</code></td> <td>有效值 year,month,day，表示选择器的粒度</td></tr></tbody></table> <h5 id="fields-有效值"><a href="#fields-有效值" class="header-anchor">#</a> fields 有效值：</h5> <table><thead><tr><th>属性名</th> <th>说明</th></tr></thead> <tbody><tr><td>year</td> <td>选择器粒度为年</td></tr> <tr><td>month</td> <td>选择器粒度为月份</td></tr> <tr><td>day</td> <td>选择器粒度为天</td></tr></tbody></table> <h5 id="省市区选择器-mode-region"><a href="#省市区选择器-mode-region" class="header-anchor">#</a> 省市区选择器：mode = region</h5> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>array</td> <td><code>[]</code></td> <td>表示选中的省市区，默认选中每一列的第一个值</td></tr> <tr><td>custom-item</td> <td>string</td> <td></td> <td>可为每一列的顶部添加一个自定义的项</td></tr> <tr><td>level</td> <td>string</td> <td><code>region</code></td> <td>选择器层级</td></tr></tbody></table> <h5 id="level-有效值"><a href="#level-有效值" class="header-anchor">#</a> level 有效值：</h5> <table><thead><tr><th>属性名</th> <th>说明</th></tr></thead> <tbody><tr><td>province</td> <td>选省级选择器</td></tr> <tr><td>city</td> <td>市级选择器</td></tr> <tr><td>region</td> <td>区级选择器</td></tr></tbody></table> <h4 id="image"><a href="#image" class="header-anchor">#</a> image</h4> <p>图片。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>src</td> <td>String</td> <td><code>false</code></td> <td>图片资源地址，支持本地图片资源及 base64 格式数据，暂不支持 svg 格式</td></tr> <tr><td>mode</td> <td>String</td> <td><code>scaleToFill</code></td> <td>图片裁剪、缩放的模式，适配微信 image 所有 mode 格式</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>binderror</td> <td>当错误发生时触发，event.detail = { errMsg }</td></tr> <tr><td>bindload</td> <td>当图片载入完毕时触发，event.detail = { height, width }</td></tr></tbody></table> <p>注意事项</p> <ol><li>image 组件默认宽度320px、高度240px</li> <li>image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分</li></ol> <h4 id="canvas"><a href="#canvas" class="header-anchor">#</a> canvas</h4> <p>画布。</p> <p>事件</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>说明</th></tr></thead> <tbody><tr><td>bindtouchstart</td> <td>eventhandle</td> <td>手指触摸动作开始</td></tr> <tr><td>bindtouchmove</td> <td>eventhandle</td> <td>手指触摸后移动</td></tr> <tr><td>bindtouchend</td> <td>eventhandle</td> <td>手指触摸动作结束</td></tr> <tr><td>bindtouchcancel</td> <td>eventhandle</td> <td>手指触摸动作被打断</td></tr> <tr><td>bindlongtap</td> <td>eventhandle</td> <td>手指长按 300ms 之后触发</td></tr> <tr><td>binderror</td> <td>eventhandle</td> <td>当发生错误时触发 error 事件， detail = {errMsg}</td></tr></tbody></table> <p>API</p> <table><thead><tr><th>方法名</th> <th>说明</th></tr></thead> <tbody><tr><td>createImage</td> <td>创建一个图片对象。 仅支持在 2D Canvas 中使用</td></tr> <tr><td>createImageData</td> <td>创建一个 ImageData 对象。仅支持在 2D Canvas 中使用</td></tr> <tr><td>getContext</td> <td>该方法返回 Canvas 的绘图上下文。仅支持在 2D Canvas 中使用</td></tr> <tr><td>toDataURL</td> <td>返回一个包含图片展示的 data URI</td></tr></tbody></table> <p>注意事项</p> <ol><li>canvas 组件目前仅支持 2D 类型，不支持 webgl</li> <li>通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，具体接口可以参考 (HTML Canvas 2D Context)[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D] 定义的属性、方法</li> <li>canvas 的实现主要借助于 PostMessage 方式与 webview 容器通信进行绘制，所以对于严格依赖方法执行时机的场景，如调用 drawImage 绘图，再通过 getImageData 获取图片数据的场景，调用时需要使用 await 等方式来保证方法的执行时机</li> <li>通过 Canvas.createImage 画图，图片的链接不能有特殊字符，安卓手机可能会 load 失败</li></ol> <h5 id="web-view"><a href="#web-view" class="header-anchor">#</a> web-view</h5> <p>承载网页的容器。会自动铺满整个RN页面</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>src</td> <td>String</td> <td></td> <td>webview 指向网页的链接，如果需要对跳转的URL设定白名单可跳转，需要在业务跳转之前出来该逻辑</td></tr> <tr><td>bindmessage</td> <td>EventHandler</td> <td></td> <td>网页向RN通过 postMessage 传递数据</td></tr> <tr><td>bindload</td> <td>EventHandler</td> <td></td> <td>网页加载成功时候触发此事件</td></tr> <tr><td>binderror</td> <td>EventHandler</td> <td></td> <td>网页加载失败的时候触发此事件</td></tr></tbody></table> <p>注意事项</p> <ol><li>web-view网页中可使用@mpxjs/webview-bridge@2.9.68提供的接口返回RN页面或与RN页面通信，具体使用细节可以参见<a href="#WebviewAPI">Webview API</a></li></ol> <h4 id="自定义组件"><a href="#自定义组件" class="header-anchor">#</a> 自定义组件</h4> <h4 id="样式规则"><a href="#样式规则" class="header-anchor">#</a> 样式规则</h4> <h4 id="应用能力"><a href="#应用能力" class="header-anchor">#</a> 应用能力</h4> <h4 id="环境api"><a href="#环境api" class="header-anchor">#</a> 环境API</h4> <p>在RN环境中也提供了一部分常用api能力，方法名与使用方式与小程序相同，可能对于某个api提供的能力会比微信小程序提供的能力少一些，以下是使用说明：</p> <h5 id="使用说明"><a href="#使用说明" class="header-anchor">#</a> 使用说明</h5> <p>如果全量引入api-proxy这种情况下，需要如下配置</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 全量引入api-proxy</span>
+<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@didi/mpxjs-api-proxy'</span>
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">usePromise</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>需要在mpx项目中需要配置externals</p> <div class="language- extra-class"><pre class="language-text"><code>externals: {
+  ...
+  '@react-native-async-storage/async-storage': '@react-native-async-storage/async-storage',
+  '@react-native-clipboard/clipboard': '@react-native-clipboard/clipboard',
+  '@react-native-community/netinfo': '@react-native-community/netinfo',
+  'react-native-device-info': 'react-native-device-info',
+  'react-native-safe-area-context': 'react-native-safe-area-context',
+  'react-native-reanimated': 'react-native-reanimated',
+  'react-native-get-location': 'react-native-get-location',
+  'react-native-haptic-feedback': 'react-native-haptic-feedback'
+},
+</code></pre></div><p>如果引用单独的api-proxy方法这种情况，需要根据下表说明是否用到一下方法，来确定是否需要配置externals，配置参考上面示例</p> <table><thead><tr><th>api方法</th> <th>依赖的react-native三方库</th></tr></thead> <tbody><tr><td>showActionSheet</td> <td>react-native-reanimated</td></tr> <tr><td>getNetworkType、<br>offNetworkStatusChange、<br>onNetworkStatusChange</td> <td>@react-native-community/netinfo</td></tr> <tr><td>getLocation、<br>openLocation、<br>chooseLocation</td> <td>react-native-get-location</td></tr> <tr><td>setStorage、<br> setStorageSync、<br>getStorage、<br> getStorageSync、<br>getStorageInfo、<br>getStorageInfoSync、<br>removeStorage，<br>removeStorageSync，<br>clearStorage，<br>clearStorageSync</td> <td>@react-native-async-storage/async-storage</td></tr> <tr><td>getSystemInfo、<br>getSystemInfoSync、<br>getDeviceInfo、<br>getWindowInfo、<br>getLaunchOptionsSync、<br>getEnterOptionsSync</td> <td>react-native-device-info</td></tr> <tr><td>getWindowInfo、<br>getLaunchOptionsSync、<br>getEnterOptionsSync</td> <td>react-native-safe-area-context</td></tr> <tr><td>vibrateShort、<br> vibrateLong</td> <td>react-native-haptic-feedback</td></tr></tbody></table> <p>在RN 项目中，如果是以全量引入api-proxy的方法需要在RN环境中执行以下所有的命令，如果只是使用单个api的能力，可以参考上表来判断安装对应的包</p> <div class="language- extra-class"><pre class="language-text"><code>// 安装api-proxy下所用到的依赖 如果
+npm i @react-native-async-storage/async-storage
+npm i @react-native-clipboard/clipboard
+npm i @react-native-community/netinfo
+npm i react-native-safe-area-context
+npm i react-native-device-info
+npm i react-native-reanimated
+npm i react-native-haptic-feedback
+ios项目需要执行如下命令
+cd ios
+pod install
+
+npm i react-native-get-location
+</code></pre></div><p>android下需要做如下配置：
+安装react-native-get-location包后，需要在AndroidManifest.xml中定义位置权限，<a href="https://www.npmjs.com/package/react-native-get-location" target="_blank" rel="noopener noreferrer">参考文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language- extra-class"><pre class="language-text"><code>&lt;!-- Define ACCESS_FINE_LOCATION if you will use enableHighAccuracy=true  --&gt;
+&lt;uses-permission android:name=&quot;android.permission.ACCESS_FINE_LOCATION&quot;/&gt;
+
+&lt;!-- Define ACCESS_COARSE_LOCATION if you will use enableHighAccuracy=false  --&gt;
+&lt;uses-permission android:name=&quot;android.permission.ACCESS_COARSE_LOCATION&quot;/&gt;
+
+</code></pre></div><p>安装react-native-haptic-feedback包后需要在安卓中配置，<a href="https://github.com/mkuczera/react-native-haptic-feedback" target="_blank" rel="noopener noreferrer">配置参考文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+打开 android/app/src/main/java/[...]/MainApplication.java. 在文件的顶部添加以下导入下面的代码片段</p> <div class="language- extra-class"><pre class="language-text"><code>import com.mkuczera.RNReactNativeHapticFeedbackPackage;
+</code></pre></div><p>修改设置,将下面的配置添加到android/settings.gradle文件中</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>include <span class="token string">':react-native-haptic-feedback'</span>
+<span class="token function">project</span><span class="token punctuation">(</span><span class="token string">':react-native-haptic-feedback'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>projectDir <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">File</span><span class="token punctuation">(</span>rootProject<span class="token punctuation">.</span>projectDir<span class="token punctuation">,</span> <span class="token string">'../node_modules/react-native-haptic-feedback/android'</span><span class="token punctuation">)</span>
+</code></pre></div><p>react-native-reanimated在mpx和RN项目都要安装，安装好包后需要在babel.config.json文件中做如下配置，并且RN环境中使用的react-native-reanimated与mpx项目中安装的react-native-reanimated版本要一致：
+<a href="https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/" target="_blank" rel="noopener noreferrer">配置参考文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token operator">...</span> <span class="token comment">// don't add it here :)</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token operator">...</span>
+      <span class="token string">'react-native-reanimated/plugin'</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre></div> <h4 id="webview-api"><a href="#webview-api" class="header-anchor">#</a> Webview API</h4> <p>对于web-view组件打开的网页，想要跟RN通信，或者跳转到RN页面，提供了以下能力</p> <table><thead><tr><th>方法名</th> <th>说明</th></tr></thead> <tbody><tr><td>navigateTo</td> <td>保留当前webview页面，跳转RN页面</td></tr> <tr><td>navigateBack</td> <td>关闭当前页面，返回上一页或多级RN页面</td></tr> <tr><td>switchTab</td> <td>跳转到RN的 tabBar 页面</td></tr> <tr><td>reLaunch</td> <td>关闭所有页面，打开到应用内的某个RN页面</td></tr> <tr><td>redirectTo</td> <td>关闭当前页面，跳转到应用内的某个RN页面</td></tr> <tr><td>getEnv</td> <td>获取当前环境</td></tr> <tr><td>postMessage</td> <td>向RN发送消息，实时触发组件的message事件</td></tr> <tr><td>invoke</td> <td>开放一个webview页面和web页面互通消息的能力</td></tr></tbody></table> <h5 id="webview-bridge示例代码"><a href="#webview-bridge示例代码" class="header-anchor">#</a> webview-bridge示例代码</h5> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> webviewBridge <span class="token keyword">from</span> <span class="token string">'@mpxjs/webview-bridge'</span>
+webviewBridge<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'RN地址'</span><span class="token punctuation">,</span>
+  <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'跳转成功'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h5 id="invoke示例代码"><a href="#invoke示例代码" class="header-anchor">#</a> invoke示例代码</h5> <p>RN环境中挂载getTime的逻辑</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token operator">...</span>
+<span class="token comment">// 普通方法</span>
+mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>webviewConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">apiImplementations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function-variable function">getTime</span><span class="token operator">:</span>  <span class="token punctuation">(</span><span class="token parameter">options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> <span class="token punctuation">{</span> params <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">=</span> options
+      <span class="token keyword">return</span> <span class="token punctuation">{</span>
+        <span class="token literal-property property">text</span><span class="token operator">:</span> params<span class="token punctuation">.</span>text<span class="token punctuation">,</span>
+        <span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token string">'2024-12-24'</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+<span class="token comment">// 或者promise</span>
+mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>webviewConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">apiImplementations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function-variable function">getTime</span><span class="token operator">:</span>  <span class="token punctuation">(</span><span class="token parameter">options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token keyword">const</span> <span class="token punctuation">{</span> params <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">=</span> options
+        <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>text<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+            <span class="token literal-property property">text</span><span class="token operator">:</span> params<span class="token punctuation">.</span>text<span class="token punctuation">,</span>
+            <span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token string">'2024-12-24'</span>
+          <span class="token punctuation">}</span><span class="token punctuation">)</span>
+        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'没有传text参数'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+<span class="token operator">...</span>
+</code></pre></div><p>web中通信的逻辑</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> webviewBridge <span class="token keyword">from</span> <span class="token string">'@mpxjs/webview-bridge'</span>
+webviewBridge<span class="token punctuation">.</span><span class="token function">invoke</span><span class="token punctuation">(</span><span class="token string">'getTime'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'我是入参'</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'接收到的消息：'</span><span class="token punctuation">,</span> res<span class="token punctuation">.</span>time<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h4 id="其他使用限制"><a href="#其他使用限制" class="header-anchor">#</a> 其他使用限制</h4> <p>如事件的target等</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/109.3da50cc1.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/platform/web.html b/docs-vuepress/.vuepress/dist/guide/platform/web.html
new file mode 100644
index 0000000000..d6ebdac7d9
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/platform/web.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/110.f74ff3a3.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/110.f74ff3a3.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/tool/e2e-test.html b/docs-vuepress/.vuepress/dist/guide/tool/e2e-test.html
new file mode 100644
index 0000000000..fce599e788
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/tool/e2e-test.html
@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>E2E自动化测试 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/111.51932e54.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" aria-current="page" class="active sidebar-link">E2E自动化测试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/tool/e2e-test.html#mpx-cli-脚手架集成e2e" class="sidebar-link">@mpx/cli 脚手架集成E2E</a></li><li class="sidebar-sub-header"><a href="/guide/tool/e2e-test.html#mpxjs-e2e-scripts" class="sidebar-link">@mpxjs/e2e-scripts</a></li><li class="sidebar-sub-header"><a href="/guide/tool/e2e-test.html#e2e可视化报告平台" class="sidebar-link">E2E可视化报告平台</a></li><li class="sidebar-sub-header"><a href="/guide/tool/e2e-test.html#e2e录制-自动化生成case" class="sidebar-link">E2E录制+自动化生成case</a></li><li class="sidebar-sub-header"><a href="/guide/tool/e2e-test.html#增强api" class="sidebar-link">增强API</a></li><li class="sidebar-sub-header"><a href="/guide/tool/e2e-test.html#sop" class="sidebar-link">SOP</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="e2e自动化测试"><a href="#e2e自动化测试" class="header-anchor">#</a> E2E自动化测试</h1> <p>微信小程序的官方文档推荐 <a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html" target="_blank" rel="noopener noreferrer">miniprogram-automator<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，其与小程序IDE的关系，正如 Google 与 UiAutomator、selenium 与 webdriver 一样；它是最契合小程序的。</p> <p>虽然微信小程序提供了 automator + ide 的 E2E 的解决方案，但该项目维护频率低且 case 编写效率低、API 不够友好等问题，因此基于微信提供的能力&amp; Mpx 生态我们产出了相对完善的小程序E2E自动化测试增强方案，此外还提供了可扩展的开箱即用的E2E基础设施。</p> <p>小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。</p> <blockquote><p>如果你之前使用过 Selenium WebDriver 或者 Puppeteer，那你可以很容易快速上手。小程序自动化 SDK 与它们的工作原理是类似的，主要区别在于控制对象由浏览器换成了小程序。</p></blockquote> <h2 id="mpx-cli-脚手架集成e2e"><a href="#mpx-cli-脚手架集成e2e" class="header-anchor">#</a> @mpx/cli 脚手架集成E2E</h2> <p>当使用 @mpxjs/cli 初始化 Mpx 项目的时候，交互式命令行里面新增了 E2E 选项，当选择了此选项，项目将会初始化 E2E 配置，完成相关内容的生成。</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/mpxtemplate_v2.png" alt=""></p> <p>关于 E2E 的模板文件如下：</p> <div class="language- extra-class"><pre class="language-text"><code># 忽略部分文件夹
+vue-project
+├─ .e2erc.js # E2E配置
+├─ src
+│  ├─ app.mpx
+│  ├─ pages
+│  │  └─ index.png
+│  └─ components
+│     └─ list.mpx
+├─ test
+│  └─ e2e # case目录
+│     └─ list.spec.js # 示例文件
+├─ jest-e2e.config.js # Jest配置
+└─ package.json
+</code></pre></div><p>这里罗列了 E2E 项目中约定(或推荐)的目录结构，在项目开发中，请遵照这个目录结构组织代码。</p> <h3 id="文件说明"><a href="#文件说明" class="header-anchor">#</a> 文件说明</h3> <p><strong>package.json</strong></p> <p>使用自动化测试，我们要做的第一件事就是安装 @mpxjs/e2e 和 @mpxjs/e2e-scripts，然后我们需要在 package.json 中定义两个自动化测试的脚本 test 和 testServer。</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
+  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;@mpxjs/e2e&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0.0.13&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;@mpxjs/e2e-scripts&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0.0.12&quot;</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span>
+  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;test&quot;</span><span class="token operator">:</span> <span class="token string">&quot;e2e-runner&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;testServer&quot;</span><span class="token operator">:</span> <span class="token string">&quot;e2e-runner --preview&quot;</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。</p> <p><strong>.e2erc.js</strong></p> <p>E2E 配置文件，包含 E2E 内置功能和插件的配置。可以在这里扩展运行时的能力，比如修改运行时是否自动保存页面快照。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> PluginReport <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/e2e/report-server/server.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">recordsDir</span><span class="token operator">:</span> <span class="token string">'dist/wx/minitest'</span><span class="token punctuation">,</span> <span class="token comment">// 录制 json 文件的存储目录</span>
+  <span class="token literal-property property">connectFirst</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 优先使用 automator.connect，默认 automator.launch 优先</span>
+  <span class="token literal-property property">defaultWaitFor</span><span class="token operator">:</span> <span class="token number">5000</span><span class="token punctuation">,</span> <span class="token comment">// 默认 waitFor 时长</span>
+  <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 测试报告服务器配置</span>
+    <span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8886</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">jestTimeout</span><span class="token operator">:</span> <span class="token number">990000</span><span class="token punctuation">,</span> <span class="token comment">// jestTimeout</span>
+  <span class="token literal-property property">jsonCaseCpDir</span><span class="token operator">:</span> <span class="token string">'test/e2e/e2e-json'</span><span class="token punctuation">,</span> <span class="token comment">// 从 minitest 目录复制 json 文件到该目录下</span>
+  <span class="token literal-property property">needRealMachine</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否需要真机</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">PluginReport</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 自定义测试报告的插件</span>
+  <span class="token literal-property property">projectPath</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./dist/wx'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">sequence</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// e2e 的 case 的执行顺序</span>
+    <span class="token comment">// 'minitest-1'</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">testSuitsDir</span><span class="token operator">:</span> <span class="token string">'test/e2e/'</span><span class="token punctuation">,</span> <span class="token comment">// e2e 的 case 存放目录</span>
+  <span class="token literal-property property">useTS</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// e2e 的 case 是否为 TS 语法</span>
+  <span class="token literal-property property">wsEndpoint</span><span class="token operator">:</span> <span class="token string">'ws://localhost:9420'</span><span class="token punctuation">,</span> <span class="token comment">// automator.connect 的 wsEndpoint</span>
+  <span class="token literal-property property">timeoutSave</span><span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> <span class="token comment">// 定时截图默认开启，设置为 false 即可关闭</span>
+  <span class="token literal-property property">cacheDirectory</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./node_modules/@mpxjs/e2e/report-server/cache'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 配置截图数据的保存目录</span>
+  <span class="token literal-property property">tapSave</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 点击截图默认开启，设置为 false 即可关闭</span>
+  <span class="token literal-property property">routeUpdateSave</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 路由切换截图默认开启，设置为 false 即可关闭</span>
+  <span class="token literal-property property">routeTime</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token comment">// 路由切换 300ms 后再截图</span>
+  <span class="token literal-property property">watchResponse</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/api/list'</span><span class="token punctuation">,</span> <span class="token function">handler</span> <span class="token punctuation">(</span><span class="token parameter">newRes<span class="token punctuation">,</span> oldRes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 配置接口请求截图</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>我们提供了丰富的配置化选项，满足各种场景运行。</p> <table><thead><tr><th>参数</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>projectPath</td> <td>String</td> <td>./dist/wx</td> <td>小程序代码路径，Mpx 框架的 wx 输出目录</td></tr> <tr><td>testSuitsDir</td> <td>String</td> <td>test/e2e/suits/</td> <td>e2e 的 case 存放目录</td></tr> <tr><td>sequence</td> <td>string[ ]</td> <td>[ ]</td> <td>用例运行的顺序</td></tr> <tr><td>recordsDir</td> <td>String</td> <td>dist/wx/minitest</td> <td>录制 json 文件的存储目录</td></tr> <tr><td>connectFirst</td> <td>Boolean</td> <td>false</td> <td>优先使用 automator 的 connect 方法</td></tr> <tr><td>wsEndpoint</td> <td>String</td> <td>ws://localhost:9420</td> <td>使用 connect 方式时的 wsEndpoint 选项</td></tr> <tr><td>defaultWaitFor</td> <td>Number</td> <td>15000</td> <td>默认 waitFor 时长</td></tr> <tr><td>useTS</td> <td>Boolean</td> <td>false</td> <td>用例是否为 TS 语法</td></tr> <tr><td>jestTimeout</td> <td>Number</td> <td>990000</td> <td>默认测试超时时间</td></tr> <tr><td>jsonCaseCpDir</td> <td>String</td> <td>test/e2e-json</td> <td>从 minitest 目录复制 json 文件到该目录下</td></tr> <tr><td>needRealMachine</td> <td>Boolean</td> <td>false</td> <td>是否需要真机回放</td></tr> <tr><td>devServer</td> <td>Object</td> <td>null</td> <td>测试报告服务器配置</td></tr> <tr><td>plugins</td> <td>Array</td> <td>[ ]</td> <td>自定义测试报告的插件</td></tr> <tr><td>timeoutSave</td> <td>Number</td> <td>3000</td> <td>定时3000ms保存页面快照</td></tr> <tr><td>cacheDirectory</td> <td>String</td> <td>report-server/cache</td> <td>页面快照的保存目录</td></tr> <tr><td>tapSave</td> <td>Boolean</td> <td>true</td> <td>点击时候保存页面快照</td></tr> <tr><td>routeUpdateSave</td> <td>Boolean</td> <td>true</td> <td>路由切换时候保存页面快照</td></tr> <tr><td>routeTime</td> <td>Number</td> <td>300</td> <td>路由切换300ms后保存页面快照</td></tr> <tr><td>watchResponse</td> <td>Object</td> <td>null</td> <td>监听接口请求保存页面快照</td></tr></tbody></table> <p><strong>e2e</strong></p> <p>e2e 目录，所有的 case 文件存放在此目录下，默认会创建一个演示 demo 文件，也就是 list.spec.js 文件，约定 e2e 下所有的 .spec.js 结尾的作为自动化测试的文件，使用 Typescript 编写测试文件的时候, 需要将文件名改成 .spec.ts 格式，然后 tsconfig.json 加上 &quot;esModuleInterop&quot;: true。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
+ * @file e2e test example
+ * 首先开启工具安全设置中的 CLI/HTTP 调用功能
+ * docs of miniprogram-automator: https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html
+ */</span>
+<span class="token keyword">import</span> automator <span class="token keyword">from</span> <span class="token string">'@mpxjs/e2e'</span>
+
+<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'index'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">let</span> miniProgram
+  <span class="token keyword">let</span> page
+
+  <span class="token function">beforeAll</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">try</span> <span class="token punctuation">{</span>
+      miniProgram <span class="token operator">=</span> <span class="token keyword">await</span> automator<span class="token punctuation">.</span><span class="token function">connect</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">wsEndpoint</span><span class="token operator">:</span> <span class="token string">'ws://localhost:9420'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      miniProgram <span class="token operator">=</span> <span class="token keyword">await</span> automator<span class="token punctuation">.</span><span class="token function">launch</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">projectPath</span><span class="token operator">:</span> <span class="token string">'./dist/wx'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+    page <span class="token operator">=</span> <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">reLaunch</span><span class="token punctuation">(</span><span class="token string">'/pages/index'</span><span class="token punctuation">)</span>
+    <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">waitFor</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">30000</span><span class="token punctuation">)</span>
+
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'desc'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> desc <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">,</span> <span class="token string">'components/list2271575d/index'</span><span class="token punctuation">)</span>
+    <span class="token comment">// 断言页面标签</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>desc<span class="token punctuation">.</span>tagName<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'view'</span><span class="token punctuation">)</span>
+    <span class="token comment">// 断言文字内容</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span><span class="token keyword">await</span> desc<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toContain</span><span class="token punctuation">(</span><span class="token string">'手机'</span><span class="token punctuation">)</span>
+    <span class="token comment">// 保存页面快照</span>
+    <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">screenshot</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'test/e2e/screenshot/homePage.png'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+  <span class="token function">afterAll</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>如果你已经熟悉了 Jest，你应该很适应 Jest 的断言 API。</p> <p><strong>jest-e2e.config.js</strong></p> <p>Jest 配置文件，这些选项可让你控制 Jest 的行为，你可以了解 Jest 的默认选项，以便在必要时扩展它们：</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">preset</span><span class="token operator">:</span> <span class="token string">'ts-jest'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">testEnvironment</span><span class="token operator">:</span> <span class="token string">'node'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">testTimeout</span><span class="token operator">:</span> <span class="token number">1000000000</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">maxWorkers</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">reporters</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token string">'default'</span><span class="token punctuation">,</span>
+    <span class="token punctuation">[</span><span class="token string">'&lt;rootDir&gt;/node_modules/@mpxjs/e2e/report-server/report.js'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 自定义测试报告</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>除了 Jest 提供的默认测试报告器外，我们还可以自定义测试报告。框架 @mpxjs/e2e 内部提供了可视化测试报告平台，需要配置 reporters 字段。</p> <p>目前对于@mpx/cli@3.*版本也会陆续完成E2E的相关支持。</p> <h2 id="mpxjs-e2e-scripts"><a href="#mpxjs-e2e-scripts" class="header-anchor">#</a> @mpxjs/e2e-scripts</h2> <p>默认情况下，Jest 将会递归的找到整个工程里所有 .spec.js 或 .test.js 扩展名的文件。 Jest 支持并行运行 test ，特别是在 ci 场景，将会极大减少 test 消耗时间。配置 --maxWorkers 参数表示的是 Jest 会开启多少个线程去完成所有的测试任务，默认值是 50% * os.cpus().length，相关的文档可见：<a href="https://jestjs.io/docs/cli#--maxworkersnumstring" target="_blank" rel="noopener noreferrer">链接<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>合理的设置 maxWorkers 会使得运行变快，依赖的是并行跑用例，但是在自动化测试环境下，用例通过脚本操控模拟器或真机环境，多个用例不能同时操控一个环境，否则会相互干扰，就好比 JS 只能是单线程执行一样。</p> <p>因为用例只能一个一个的执行，一个完整的项目自然会包含很多用例，但是一次只能执行一个用例的话，我们需要人工的操作很多次，才能全部执行完。为了跑一个遍就把所有的用例都执行完的话，我们会想到写一个脚本通过遍历的方式依次执行，这就是 @mpxjs/e2e-scripts 设计的初衷。</p> <p>使用 @mpxjs/e2e-scripts 内部提供的命令脚本，执行 npx e2e-runner 将会按照 sequence 的定义的顺序依次执行用例文件。</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">sequence</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// 测试用例的执行顺序</span>
+    <span class="token string">'minitest-1'</span><span class="token punctuation">,</span>
+    <span class="token string">'minitest-2'</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>上面代码表示会先执行 minitest-1.spec.js 文件，然后再执行 minitest-2.spec.js 文件。</p> <h2 id="e2e可视化报告平台"><a href="#e2e可视化报告平台" class="header-anchor">#</a> E2E可视化报告平台</h2> <p>E2E内置的 Jest 默认支持输出 HTML 的报告，因其只支持对测试结果数据的简单展示，故我们希望在其基础上，不仅针对报告查看的广度和颗粒度进行细化，还将对自动化测试过程中涉及到的痛点实现功能上的增强。</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/baogao-2.jpeg" alt=""></p> <p>E2E可视化报告平台是一个运行在本地环境，统合了用例管理、测试报告、页面快照和错误日志的平台。支持对通过 WechatDevTools 录制回放功能录制出的 case 进行自定义增强的能力，同时提供执行 E2E 测试过程中产出的页面快照和错误日志等信息进行快捷、直观地查看的功能。</p> <p>目前支持多种交互动作保存快照（点击、输入、滑动等），我们还在页面快照方面做了增强，提供了快照标记的功能，可以完善测试报告，增强排查手段，当点击元素后，页面快照上会自动标记出点击的区域或者元素。</p> <h2 id="e2e录制-自动化生成case"><a href="#e2e录制-自动化生成case" class="header-anchor">#</a> E2E录制+自动化生成case</h2> <p>微信推出了官方的录制回放能力。通过微信开发者工具可以录制用户的操作过程，期间可以进行简单断言，录制结束后支持回放。但是经过实际使用发现录制回放存在下列不足：</p> <ol><li>录制结果结果以 json 形式存在于 dist 目录，难以扩展、难维护；</li> <li>仅支持 data快照、wxml快照、检查元素、检查路径四种简单断言，难以满足复杂业务场景的细粒度断言诉求；</li> <li>因等待时长、接口响应时机、组件更新时机等难以和录制时对应，录制结果回放失败频率高、不稳定；</li></ol> <p>我们通过基于微信原生的录制进行增强的方案。使用录制的便捷性降低手写流程的成本，再通过 sdk 的能力对录制所得 Case 进行增强。</p> <p>这样，我们通过分析录制 JSON 文件，把 JSON 中的每一条进行分析转换，最终得到 spec 的 JS 代码文件，通过这种方式，可以大幅度降低获取元素、触发事件等常规 Case 的编写。</p> <p>JSON to Spec 本质只是录制结果的一种呈现，而这种转换的目的在于通过扩展强化录制 Case，弥补录制的能力有限。</p> <p>为了方便我们进行扩展，首先需要对录制所得的 JSON 文件进行语义化的分析。这么做的意义在于把录制的操作步骤和 JSON 的数据关联起来，而关联步骤和数据又可以增强可读性为用户在某一个步骤之后进行扩展增加了极大的便利性。</p> <p>上一个部分已经论证过把录制和SDK增强接合起来的可行性，但是上面一系列的操作都是通过脚本的形式呈现的，这对于我们前面的降低门槛来说仍然是繁琐的。最起码对于不会写代码的的人来说，还是不够理想。接下来就是探索如何更直观、更高效的方式把这种方案落地。</p> <p>我们设计了 Mpx-E2E 的工作台，当然这些也都集成到了 Mpx-E2E 的可视化平台中，下面我们看看这些具体的可视化的工作。</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/gencae.png" alt=""></p> <p>分析 JSON 操作步骤后，我们把依据 JSON 生成的 Spec 同样做了可视化处理，起初的时候我们只是做了 Spec 代码的 highlight，并没有支持编辑。但是考虑到所见即所得的效率，我们又在此支持了 WEB-IDE。在生成 Spec 代码后，即可在线进行编辑，最终通过我们的@mpxjs/e2e SDK核心能力，完成了保存spec文件。</p> <h2 id="增强api"><a href="#增强api" class="header-anchor">#</a> 增强API</h2> <blockquote><p>@mpxjs/e2e</p></blockquote> <p>小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。</p> <p>然而在我们使用过程中发现原始小程序官网提供的sdk存在能力的不足和缺失，或者说无法满足我们复杂的业务流程，针对这一系列的能力的缺失，我们开发了针对e2e的增强型api，来满足我们的整个自动化流程所需的功能</p> <p>1、获取页面中的DOM元素 $ 方法 ：</p> <p>SDK 中重写 page 和 element 的 <code>$</code> 方法。之所以这么处理是因为原生的 <code>$</code> 方法存在自定义组件中的元素不能稳定获取的问题，而这个问题的根源在于微信小程序会以某种规则为元素拼接组件或者父组件的名字作为真实类名，而这种规则并不固定。</p> <p>目前增强后的 <code>$</code> 方法支持两个参数，第一个为选择器，第二个是自定义组件名。第二个参数不传时其行为和原生 <code>$</code> 方法一致。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span>className<span class="token operator">:</span> string<span class="token punctuation">,</span> componentsName<span class="token operator">?</span><span class="token operator">:</span> string<span class="token punctuation">)</span><span class="token operator">:</span> Promise<span class="token operator">&lt;</span>Element <span class="token operator">|</span> any<span class="token operator">&gt;</span>
+ 
+<span class="token keyword">const</span> confirmbtn <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'confirm-btn'</span><span class="token punctuation">,</span> <span class="token string">'homepage/components/confirmef91faba/confirm'</span><span class="token punctuation">)</span>
+ 
+<span class="token keyword">const</span> confirmbtn2 <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.confirm-btn'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> view <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'view'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> id <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#id'</span><span class="token punctuation">)</span>
+</code></pre></div><p>获取自定义组件中的元素需要以渲染结果为准，通常第二个参数是传入组件的 <code>is</code> 属性。注意弹窗类似的组件往往会存在动画所以需要异步获取。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 页面的渲染结果</span>
+<span class="token operator">&lt;</span>base<span class="token operator">-</span>dialog is<span class="token operator">=</span><span class="token string">&quot;homepage/components/dialogd2d0cea6/index&quot;</span><span class="token operator">&gt;</span>
+  #shadow<span class="token operator">-</span>root
+    <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;wrapper&quot;</span><span class="token operator">&gt;</span>
+      <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;cancel-btn&quot;</span><span class="token operator">&gt;</span>确认<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+      <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;confirm-btn&quot;</span><span class="token operator">&gt;</span>取消<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+    <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>base<span class="token operator">-</span>dialog<span class="token operator">&gt;</span>
+
+<span class="token comment">// 对应获取元素的方法</span>
+<span class="token keyword">const</span> cancelbtn <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'cancel-btn'</span><span class="token punctuation">,</span> <span class="token string">'homepage/components/dialogd2d0cea6/index'</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> confirmbtn <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'confirm-btn'</span><span class="token punctuation">,</span> <span class="token string">'homepage/components/dialogd2d0cea6/index'</span><span class="token punctuation">)</span>
+</code></pre></div><p>2、增强 wait/ waitAll</p> <p>automator 中原生支持 <code>wait</code> 方法，表示等待时长或者等待终止的断言函数。但是经过实际测试发现，使用指定的等待时间并不可靠，其运行受限于硬件条件。</p> <p>经过增强的 <code>wait</code> 方法可以支持： 路由到指定页面， 指定组件渲染，指定组件更新，指定接口发起， 指定接口响应后；</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">wait</span><span class="token punctuation">(</span>path<span class="token operator">:</span> string<span class="token punctuation">,</span> type<span class="token operator">?</span><span class="token operator">:</span> string<span class="token punctuation">)</span><span class="token operator">:</span> Promise<span class="token operator">&lt;</span>string <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
+ 
+<span class="token keyword">const</span> miniProgram <span class="token operator">=</span> <span class="token keyword">await</span> Automator<span class="token punctuation">.</span><span class="token function">launch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">projectPath</span><span class="token operator">:</span> <span class="token string">'./dist/wx'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 页面</span>
+page <span class="token operator">=</span> <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">reLaunch</span><span class="token punctuation">(</span><span class="token string">'/pages/index/index'</span><span class="token punctuation">)</span>
+<span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">wait</span><span class="token punctuation">(</span><span class="token string">'pages/index/index'</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 组件</span>
+<span class="token keyword">const</span> suggest1 <span class="token operator">=</span> <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">wait</span><span class="token punctuation">(</span><span class="token string">'suggest/components/suggestcaafe3e4/suggest'</span><span class="token punctuation">,</span> <span class="token string">'component'</span><span class="token punctuation">)</span>
+ 
+<span class="token comment">// 组件更新</span>
+<span class="token keyword">const</span> suggest2 <span class="token operator">=</span> <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">wait</span><span class="token punctuation">(</span><span class="token string">'suggest/components/suggestcaafe3e4/suggest'</span><span class="token punctuation">,</span> <span class="token string">'componentUpdate'</span><span class="token punctuation">)</span>
+ 
+<span class="token comment">// 请求</span>
+<span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">wait</span><span class="token punctuation">(</span><span class="token string">'https://xxxx.xxx/xxx'</span><span class="token punctuation">,</span> <span class="token string">'request'</span><span class="token punctuation">)</span>
+ 
+<span class="token comment">// 返回结果</span>
+<span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">wait</span><span class="token punctuation">(</span><span class="token string">'https://xxxx.xxx/xxx'</span><span class="token punctuation">,</span> <span class="token string">'response'</span><span class="token punctuation">)</span>
+<span class="token function">expect</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>options<span class="token punctuation">.</span>data<span class="token punctuation">.</span>errno<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> data <span class="token operator">=</span> response<span class="token punctuation">.</span>options<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data
+<span class="token function">expect</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
+</code></pre></div><p>3、新增 mock 能力</p> <p>考虑到进行 e2e 测试时有些场景需要 mock 数据，所以 SDK 结合 mpx-fetch 的 <code>setProxy</code> 能力提供了静态资源文件 mock、手动设置接口响应结果的能力。</p> <p>前置：如果需要使用 mock 需要使用支持 <code>setProxy</code> 的 mpx-fetch 版本；此外还需要在 createApp 的时候传入 <code>setProxy</code> 属性，其配置与 mpx-fetch 的 <code>setProxy</code> 方法的配置相同，示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+	<span class="token literal-property property">setProxy</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+  	<span class="token punctuation">{</span>
+    	<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      	<span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">'some-domain.com'</span><span class="token punctuation">,</span>
+      	<span class="token literal-property property">protocol</span><span class="token operator">:</span> <span class="token string">'https:'</span>
+    	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+    	<span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      	<span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">'localhost'</span><span class="token punctuation">,</span>
+      	<span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8887</span><span class="token punctuation">,</span>
+      	<span class="token literal-property property">protocol</span><span class="token operator">:</span> <span class="token string">'http:'</span>
+    	<span class="token punctuation">}</span>
+  	<span class="token punctuation">}</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token comment">// otherApp props</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>3.1 初始化 mock：initMock</p> <p>当传入 <code>staticDir</code> 时会优先匹配该目录下的静 json 文件作为指定接口的响应结果。</p> <p>接口与文件名的映射规则：将域名后的 path 中的分隔符 <code>/</code> 替换为 <code>-</code>，示例：</p> <ul><li>接口名称：<code>api/pGetIndexInfo</code></li> <li>json 文件名称：<code>api-pGetIndexInfo.json</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">interface</span> <span class="token class-name">E2eMockConfig</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">staticDir</span><span class="token operator">:</span> string <span class="token comment">// 本地文件目录：</span>
+<span class="token punctuation">}</span>
+
+Automator<span class="token punctuation">.</span><span class="token function">initMock</span><span class="token punctuation">(</span>mockCfg<span class="token operator">:</span> E2eMockConfig<span class="token punctuation">)</span><span class="token operator">:</span> Promise<span class="token operator">&lt;</span>MiniProgram<span class="token operator">&gt;</span>
+</code></pre></div><p>3.2 <code>setMock</code> 方法，除了上面的静态资源文件，mock 内置了一个 Map 列表，因此可以按需的设置某一接口的响应结果。</p> <div class="language-js extra-class"><pre class="language-js"><code>Automator<span class="token punctuation">.</span><span class="token function">setMock</span> <span class="token punctuation">(</span>path<span class="token operator">:</span>string<span class="token punctuation">,</span> <span class="token literal-property property">response</span><span class="token operator">:</span>any<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
+ 
+<span class="token comment">// 示例：</span>
+<span class="token keyword">let</span> un <span class="token operator">=</span> Automator<span class="token punctuation">.</span><span class="token function">setMock</span><span class="token punctuation">(</span><span class="token string">'https://some-domain.com/api/pGetIndexInfo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">errno</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">errmsg</span><span class="token operator">:</span> <span class="token string">'mock-index-info'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ 
+<span class="token comment">// 需要取消时可以调用 un，注意这一步骤非必须！！</span>
+<span class="token function">un</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><p>3.3 <code>removeMockFromMap</code> 从 mock 内置的 Map 列表中移除指定 path 对应的的 mock 数据。</p> <div class="language-js extra-class"><pre class="language-js"><code>Automator<span class="token punctuation">.</span><span class="token function">removeMockFromMap</span> <span class="token punctuation">(</span>path<span class="token operator">:</span>string<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
+</code></pre></div><h2 id="sop"><a href="#sop" class="header-anchor">#</a> SOP</h2> <p><strong>一、环境要求</strong></p> <p>1.1 微信环境
+安装 Node.js 并且版本大于 8.0
+基础库版本为 2.7.3 及以上
+开发者工具版本为 1.02.1907232 及以上
+ 
+1.2 Mpx 环境
+Mpx-E2E 很多能力基于 Mpx 增强的，最低版本要求如下：
+@mpxjs/core &gt;= 2.7.2
+@mpxjs/api-proxy &gt;= 2.7.1
+@mpxjs/webpack-plugin &gt;= 2.7.8</p> <p><strong>二、新建项目</strong></p> <p>2.1 安装 @mpxjs/cli 脚手架</p> <div class="language-js extra-class"><pre class="language-js"><code>$ npm install <span class="token operator">-</span>g @mpxjs<span class="token operator">/</span>cli
+</code></pre></div><p>2.2 初始化项目选择 E2E 测试，执行以下命令执行初始化项目</p> <div class="language-js extra-class"><pre class="language-js"><code>$ mpx init some<span class="token operator">-</span>proj
+</code></pre></div><p>执行该命令后稍等片刻，等模板下载完成 Terminal 会输出以下提示，当输出到 ”是否需要 E2E 测试“时输入 “yes“ ，脚手架内置了 E2E 需要的依赖和简单的测试用例。待脚手架初始化完成后，你的新项目就已经拥有了开箱即用的E2E能力。</p> <p><strong>三、已有项目</strong></p> <p>3.1 安装 E2E sdk、runner</p> <div class="language-js extra-class"><pre class="language-js"><code>npm i @mpxjs<span class="token operator">/</span>e2e  @mpxjs<span class="token operator">/</span>e2e<span class="token operator">-</span>scripts <span class="token operator">--</span>save<span class="token operator">-</span>dev
+</code></pre></div><p>3.2 创建 .e2erc 配置文件</p> <blockquote><p>在项目的源文件目录下创建名为 .e2erc.js 的配置文件，以下为 e2erc 各选项及其含义，建议直接复制到项目中</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> PluginReport <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/e2e/report-server/server.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// E2E 报告插件</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">recordsDir</span><span class="token operator">:</span> <span class="token string">'dist/wx/minitest'</span><span class="token punctuation">,</span> <span class="token comment">// 录制 json 文件的存储目录</span>
+  <span class="token literal-property property">connectFirst</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 优先使用 automator.connect，默认 automator.launch 优先</span>
+  <span class="token literal-property property">wsEndpoint</span><span class="token operator">:</span> <span class="token string">'ws://localhost:9420'</span><span class="token punctuation">,</span> <span class="token comment">// automator.connect 的 wsEndpoint 选项，用于 connectFirst 时链接到模拟器服务</span>
+  <span class="token literal-property property">defaultWaitFor</span><span class="token operator">:</span> <span class="token number">15000</span><span class="token punctuation">,</span> <span class="token comment">// 默认 waitFor 时长</span>
+  <span class="token literal-property property">useTS</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否启用 TS , 该特性暂不支持，</span>
+  <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">jestTimeout</span><span class="token operator">:</span> <span class="token number">990000</span><span class="token punctuation">,</span> <span class="token comment">// jestTimeout</span>
+  <span class="token literal-property property">jsonCaseCpDir</span><span class="token operator">:</span> <span class="token string">'test/e2e-json'</span><span class="token punctuation">,</span> <span class="token comment">// 从 minitest 目录复制 json 文件到该目录下</span>
+  <span class="token literal-property property">needRealMachine</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否需要真机</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">PluginReport</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> 
+  <span class="token literal-property property">projectPath</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./dist/wx'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 小程序代码路径，Mpx 框架的 wx 输出目录</span>
+  <span class="token literal-property property">testSuitsDir</span><span class="token operator">:</span> <span class="token string">'test/e2e/suits/'</span><span class="token punctuation">,</span> <span class="token comment">// e2e 的 case 存放目录</span>
+  <span class="token literal-property property">sequence</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// E2E case，runner 将会按照这个数组顺序执行其中的 case 文件，</span>
+    <span class="token string">'minitest-20'</span><span class="token punctuation">,</span> <span class="token comment">// 不需要写 .spec.js 这个扩展名</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">reportsDir</span><span class="token operator">:</span> <span class="token string">'test/reports'</span> <span class="token comment">// 报告输出目录</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p><strong>四、获取 Case</strong></p> <p>4.1 录制 JSON Case</p> <p>录制 case 是依托于微信开发者工具已有的能力，操作流程如下：</p> <ol><li>启动录制
+启动微信开发者工具 -&gt; 工具 -&gt; 自动化测试</li> <li>创建用例
+选择【开始录制】按钮
+【用例名】会成为录制 JSON case 的文件名，比如上图中录制结束后会得到一个名为
+minitest-3.json 的 JSON 文件；我们推荐您采用更语义化的测试用例名称，便于后续的 CASE 管理。
+【结束录制】后，开发者工具会在小程序的代目录（Mpx 的产物输出目录，如 dist/wx）下新增 minitest/ 目录，该目录是微信开发者工具自动创建的，用于存放录制 JSON case。例如上面的例子中，录制结束后该目录下就应该有 名为 minitest-3.json 的 文件。</li></ol> <p>4.2 生成 Spec Case</p> <p>启动 Mpx-E2E 平台服务，首先在项目的 package.json 中加入以下 npm script：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
+  <span class="token string-property property">&quot;e2eServe&quot;</span><span class="token operator">:</span> <span class="token string">&quot;npx e2e-runner --preview&quot;</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
+</code></pre></div><p>在小程序项目录下通过命令行启动 Mpx-E2E 平台服务:</p> <div class="language-js extra-class"><pre class="language-js"><code>npm run e2eServe
+</code></pre></div><p>平台服务已经成功启动！打开 Mpx-E2E 的可视化平台:
+选择【用例管理】，加载录制的 JSON Case，点击可视化平台上的 【JSON 导入】按钮。界面中间是对当前 JSON 文件的语义化解析，最后侧是包含自动生成代码的 Web IDE。点击中间的语义化解析会联动右侧 WebIDE 代码跳转到对应的区域。</p> <p>4.3 可视化扩展 Spec Case</p> <ol><li><p>新增
+鼠标悬浮在中间语义化区域中每一条的左侧的绿色按钮时，就会出现一个扩展菜单，在弹出框中填写相关信息，点击【保存】即可新增一条操作</p></li> <li><p>编辑
+通过可视化的方式扩展的操作可以编辑，录制的操作不能编辑；</p></li></ol> <p>4.4 保存 Spec case</p> <p>在完成上述操作后，点击 Web-IDE 下面的 【保存】即可.</p> <p>点击保存后， Web-IDE 中的内容将会被写入到 .e2erc.js 的 testSuitsDir 字段指定的目录中。当文件写入成功后，被保存的 spec 文件名会被自动写入到剪贴板中。</p> <p>另外，生成这份 Case 的 JSON 文件也会被复制到 .e2erc.js 的 jsonCaseCpDir 目录下，之所以保存 JSON 文件主要是做备份，你可以不关心这个 json 的文件内容，但是我们建议你随着 spec 代码已经提交到版本库；
+ 
+经过保存后，我们就得到了 minitest-3.spec.js Case 文件。</p> <p><strong>五、修改 .e2erc.js sequence</strong></p> <p>5.1 sequence 数组
+经过前面的获取 Case 后步骤后，我们已经得到了 minitest-3.spec.js Case 文件。在正式运行前，我们需要把这个 minitest-3.spec.js Case 加入到 .e2erc.js 的 sequence 字段数组中。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">sequence</span><span class="token operator">:</span> <span class="token punctuation">[</span> 
+  <span class="token string">'minitest-3'</span><span class="token punctuation">,</span> <span class="token comment">// 不用写 .spec.js </span>
+<span class="token punctuation">]</span>
+</code></pre></div><p>5.2 为什么手动维护？
+之所以需要手动维护这个数组，是因为微信的 automator 不能并发运行，进而 E2E 的 Case 无法并发运行；又或者某几个 spec 间是有联系的， 这种情况下只能把顺序交给人工维护。</p> <p><strong>六、运行 e2e</strong></p> <p>6.1 新增 npm scripts
+修改项目的 package.json 中 scripts 字段，向其中加入 &quot;test:e2e&quot;:&quot;npx e2e-runner&quot; 命令</p> <p>6.2 运行 E2E 测试命令</p> <div class="language-js extra-class"><pre class="language-js"><code>npm run test<span class="token operator">:</span>e2e
+</code></pre></div><p>6.3 在真机中运行 E2E</p> <ol><li>真机运行 E2E 相当于微信开发者工具的【真机调试】，首先需要确保你的 Mpx 构建输出产物是 prod 模式下的产物；</li> <li>修改 .e2erc.js 中的 needRealMachine 字段为 true，再执行 npm run test:e2e 命令；
+静等微信开发者工具完成真机调试二维码的构建完成，待完成后用真机扫描二维码即可开始；</li></ol> <blockquote><p>注：目前因为微信 automator 的限制，包括 wait 接口请求等能力暂时在真机上不能支持，这些问题目前已经反馈到微信，有进展我们会及时更新！</p></blockquote> <p><strong>七、测试报告</strong></p> <p>在 .e2erc.js 中配置 report-plugin（详情见.e2erc.js 配置文件部分） 即可在所有 spec 运行结束后自动打开浏览器并呈现测试结果，测试结果包含以下三部分:</p> <p>1） Jest 数据
+2） 自动截图：
+截图分析：在 Mpx-E2E 平台下，点击【截图】Tab 即可，截图以 spec 文件为维度展示，目前包含三种自动时机的截图：定时、点击时、路由发生时，默认全部展示。
+截图筛选：通过操作 timeout/tap/router 的复选框即可实现分类查看，另外在点击时的自动截图还会对点击位置进行标记；
+3）JSError 分析
+如果运行过程中小程序抛出 JS 异常，此时会触发 Mpx-E2E 的收集动作，同时会抓取报错瞬间的截图</p> <p>未来可视化平台会持续集成更多功能，可以涵盖业务稳定，数据稳定(埋点测试)和性能数据，持续更新...</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/tool/unit-test.html" class="prev">
+        单元测试
+      </a></span> <span class="next"><a href="/guide/extend/fetch.html">
+        网络请求
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/111.51932e54.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/tool/ts.html b/docs-vuepress/.vuepress/dist/guide/tool/ts.html
new file mode 100644
index 0000000000..bcc732ee83
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/tool/ts.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>使用TypeScript开发小程序 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/112.da7bd3e7.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" aria-current="page" class="active sidebar-link">使用TypeScript开发小程序</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/tool/ts.html#什么是typescript" class="sidebar-link">什么是TypeScript</a></li><li class="sidebar-sub-header"><a href="/guide/tool/ts.html#typescript优势" class="sidebar-link">TypeScript优势</a></li><li class="sidebar-sub-header"><a href="/guide/tool/ts.html#使用方式" class="sidebar-link">使用方式</a></li><li class="sidebar-sub-header"><a href="/guide/tool/ts.html#类型推导及注意事项" class="sidebar-link">类型推导及注意事项</a></li></ul></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用typescript开发小程序"><a href="#使用typescript开发小程序" class="header-anchor">#</a> 使用TypeScript开发小程序</h1> <h2 id="什么是typescript"><a href="#什么是typescript" class="header-anchor">#</a> 什么是TypeScript</h2> <p>TypeScript 是一个开源的编程语言，通过在 JavaScript（世界上最常用的语言之一） 的基础上添加静态类型定义构建而成。</p> <p>类型提供了一种描述对象形状的方法。可以帮助提供更好的文档，还可以让 TypeScript 验证你的代码可以正常工作。</p> <p>在 TypeScript 中，不是每个地方都需要标注类型，因为类型推断允许您无需编写额外的代码即可获得大量功能。</p> <h2 id="typescript优势"><a href="#typescript优势" class="header-anchor">#</a> TypeScript优势</h2> <ol><li><p>静态类型检查
+静态类型检查可以避免很多不必要类型的错误，在编译阶段提前发现问题；</p></li> <li><p>强大的类型推断能力
+除了类型声明外，<code>TypeScript</code> 提供了强大的类型推断能力，该能力能够大大减少我们需要编写的类型声明，有效地减少我们使用 <code>TypeScript</code> 的额外压力；</p></li> <li><p>IDE 智能提示
+目前主流的 IDE 都对 <code>TypeScript</code> 提供了良好的支持，基于 <code>TypeScript</code> 的类型系统提供友好准确的编码提示与错误检查。</p></li></ol> <h2 id="使用方式"><a href="#使用方式" class="header-anchor">#</a> 使用方式</h2> <h3 id="编写ts前的准备工作"><a href="#编写ts前的准备工作" class="header-anchor">#</a> 编写ts前的准备工作</h3> <p>由于对 store 做类型推导使用了最新的 <code>TypeScript</code> 特性，因此需要将编辑器的 <code>TypeScript</code> 版本升级至 <strong>4.1.3</strong> 及以上版本。以下是 VSCode 配置示例：</p> <ol><li><p>更新项目中的TypeScript为 4.1.3 及以上版本。</p></li> <li><p>在VSCode中打开一个 .js/.ts/.tsx 后缀的文件，使用 <code>Shift+Command+P</code> 唤出 VSCode 命令行，输入 <code>TypeScript</code> ，选择 <code>Select TypeScript Version</code>，选择使用工作区版本，将版本切换至 4.1.3 及以上版本。</p></li></ol> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/select-ts-version.png" style="border-radius:6px;"> <ol start="3"><li>在 VSCode 编辑器中安装 mpx 插件，来支持在.mpx单文件中编写 ts 时的代码提示和实时报错等优秀体验。</li></ol> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>使用 @typescript/eslint-plugin 对 ts 代码进行检查，当在.mpx文件中使用全局类型时，eslint 会抛出 no-undef 错误，可以关闭相关 eslint 规则校验</p></div> <h3 id="mpx中编写ts（推荐）"><a href="#mpx中编写ts（推荐）" class="header-anchor">#</a> .mpx中编写ts（推荐）</h3> <p>目前 Mpx 已经支持在.mpx文件的 script 标签中编写 ts 代码，需要在 script 标签上添加 <code>lang=&quot;ts&quot;</code> 属性，在编译时会自动这部分 script 中的内容进行 ts 类型检查。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+<span class="token comment">// 内联编写ts代码</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>当然，由于大部分IDE对 ts 的语法支持都只对 .ts 和 .d.ts 文件生效，因此 Mpx 也支持创建一个 .ts 文件进行 ts 代码编写，在.mpx文件中，通过 src 的方式引入。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./index.ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="为-ts文件添加loader"><a href="#为-ts文件添加loader" class="header-anchor">#</a> 为.ts文件添加loader</h3> <p>在 Webpack 配置中添加如下 rules 以配置 ts-loader</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
+  <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.ts$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+  <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
+    <span class="token string">'ts-loader'</span>
+  <span class="token punctuation">]</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="编写tsconfig-json文件"><a href="#编写tsconfig-json文件" class="header-anchor">#</a> 编写tsconfig.json文件</h3> <p>对相关配置不熟悉的同学可以直接采用下面配置，能够最大限度发挥 Mpx 中强大的 ts 类型推导能力</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
+  <span class="token property">&quot;compilerOptions&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token property">&quot;target&quot;</span><span class="token operator">:</span> <span class="token string">&quot;es6&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;allowJs&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;noImplicitThis&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;noImplicitAny&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;strictNullChecks&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;moduleResolution&quot;</span><span class="token operator">:</span> <span class="token string">&quot;node&quot;</span><span class="token punctuation">,</span>
+    <span class="token property">&quot;lib&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token string">&quot;dom&quot;</span><span class="token punctuation">,</span>
+      <span class="token string">&quot;es6&quot;</span><span class="token punctuation">,</span>
+      <span class="token string">&quot;dom.iterable&quot;</span>
+    <span class="token punctuation">]</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="增强类型"><a href="#增强类型" class="header-anchor">#</a> 增强类型</h3> <p>如果需要增加 Mpx 的属性和选项，可以自定义声明 <code>TypeScript</code> 补充现有的类型。</p> <p>例如，首先创建一个 types.d.ts 文件</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// types.d.ts</span>
+
+<span class="token keyword">import</span> <span class="token punctuation">{</span> Mpx <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token keyword">declare</span> <span class="token keyword">module</span> <span class="token string">'@mpxjs/core'</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 声明为 Mpx 补充的属性</span>
+  <span class="token keyword">interface</span> <span class="token class-name">Mpx</span> <span class="token punctuation">{</span>
+    $myProperty<span class="token operator">:</span> <span class="token builtin">string</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p>之后在任意文件只需引用一次 types.d.ts 声明文件即可，例如在 app.mpx 中引用</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// app.mpx</span>
+
+<span class="token comment">/// &lt;reference path=&quot;./types.d.ts&quot; /&gt;</span>
+<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+mpx<span class="token punctuation">.</span>$myProperty <span class="token operator">=</span> <span class="token string">'my-property'</span>
+</code></pre></div><h2 id="类型推导及注意事项"><a href="#类型推导及注意事项" class="header-anchor">#</a> 类型推导及注意事项</h2> <p>Mpx 基于泛型函数提供了非常方便用户使用的反向类型推导能力，简单来说，就是用户可以用非常接近于 js 的方式调用 Mpx 提供的 api ，就能够获得大量基于用户输入参数反向推导得到的类型提示及检查。但是由于 ts 本身的能力限制，我们在 Mpx 的运行时中添加了少量辅助函数和变种api，便于用户最大程度地享受反向类型推导带来的便利性，简单的使用示例如下：</p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> getMixin<span class="token punctuation">,</span> createStoreWithThis<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+<span class="token comment">// createStoreWithThis作为createStore的变种方法，主要变化在于定义getters，mutations和actions时，</span>
+<span class="token comment">// 获取自身的state，getters等属性不再通过参数传入，而是通过this.state或者this.getters等属性进行访问，</span>
+<span class="token comment">// 由于TS的能力限制，getters/mutations/actions只有使用对象字面量的方式直接传入createStoreWithThis时</span>
+<span class="token comment">// 才能正确推导出this的类型，当需要将getters/mutations/actions拆解为对象编写时，</span>
+<span class="token comment">// 需要用户显式地声明this类型，无法直接推导得出。</span>
+
+<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  state<span class="token operator">:</span> <span class="token punctuation">{</span>
+    aa<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+    bb<span class="token operator">:</span> <span class="token number">2</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  getters<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">cc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>aa <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bb
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  actions<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">doSth3</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>getters<span class="token punctuation">.</span>cc<span class="token punctuation">)</span>
+      <span class="token keyword">return</span> <span class="token boolean">false</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  data<span class="token operator">:</span> <span class="token punctuation">{</span>
+    a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+    b<span class="token operator">:</span> <span class="token string">'2'</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  computed<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">c</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>b
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">d</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token comment">// data, mixin, computed中定义的数据能够被推导到this中</span>
+      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>aaa <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>c
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token comment">// 从store上map过来的计算属性或者方法同样能够被推导到this中</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'aa'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  mixins<span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token comment">// 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin</span>
+    <span class="token function">getMixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      computed<span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token function">aaa</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token keyword">return</span> <span class="token number">123</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+        <span class="token function">doSth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>aaa<span class="token punctuation">)</span>
+          <span class="token keyword">return</span> <span class="token boolean">false</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token function">doSth2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token operator">++</span>
+      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>d<span class="token punctuation">)</span>
+      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>aa<span class="token punctuation">)</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doSth3</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'doSth3'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h3 id="getmixin"><a href="#getmixin" class="header-anchor">#</a> getMixin</h3> <p>为 ts 项目提供的反向推导 mixin 的辅助函数，getMixin 接收一个对象作为参数，使用 mixins 时，支持嵌套 mixin。具体用法见<a href="/api/global-api.html#getmixin">getMixin</a>。</p> <h3 id="createstorewiththis"><a href="#createstorewiththis" class="header-anchor">#</a> createStoreWithThis</h3> <p>为了在 ts 项目中更好的支持 store 的类型推导，提供了 createStoreWithThis 进行 store 的创建，createStoreWithThis 接收一个 options 对象作为参数。通过 createStoreWithThis 创建 store 时，使用<code>this.state</code>，<code>this.getters</code>，<code>this.commit</code>, <code>this.dispatch</code>对自身的相关属性进行获取。具体用法见<a href="/api/store-api.html#createstorewiththis">createStoreWithThis</a>。</p> <h3 id="createstatewiththis"><a href="#createstatewiththis" class="header-anchor">#</a> createStateWithThis</h3> <p>创建一个 state，支持 state 类型推导的辅助函数，具体用法见<a href="/api/store-api.html#createstatewiththis">createStateWithThis</a></p> <h3 id="creategetterswiththis"><a href="#creategetterswiththis" class="header-anchor">#</a> createGettersWithThis</h3> <p>创建一个 getters，支持 getters 类型推导的辅助函数，具体用法见<a href="/api/store-api.html#creategetterswiththis">createGettersWithThis</a></p> <h3 id="createmutationswiththis"><a href="#createmutationswiththis" class="header-anchor">#</a> createMutationsWithThis</h3> <p>创建一个 mutations，支持 mutations 类型推导的辅助函数，具体用法见<a href="/api/store-api.html#createmutationswiththis">createMutationsWithThis</a></p> <h3 id="createactionswiththis"><a href="#createactionswiththis" class="header-anchor">#</a> createActionsWithThis</h3> <p>创建一个 actions，支持 actions 类型推导的辅助函数，具体用法见<a href="/api/store-api.html#createactionswiththis">createActionsWithThis</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/composition-api/reactive-api.html" class="prev">
+        响应式 API
+      </a></span> <span class="next"><a href="/guide/tool/unit-test.html">
+        单元测试
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/112.da7bd3e7.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/tool/unit-test.html b/docs-vuepress/.vuepress/dist/guide/tool/unit-test.html
new file mode 100644
index 0000000000..ab9f9a8676
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/tool/unit-test.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>单元测试 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/113.caaf11a3.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" aria-current="page" class="active sidebar-link">单元测试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/tool/unit-test.html#安装依赖" class="sidebar-link">安装依赖</a></li><li class="sidebar-sub-header"><a href="/guide/tool/unit-test.html#jest-相关配置" class="sidebar-link">jest 相关配置</a></li><li class="sidebar-sub-header"><a href="/guide/tool/unit-test.html#简单的断言" class="sidebar-link">简单的断言</a></li><li class="sidebar-sub-header"><a href="/guide/tool/unit-test.html#编写可被测试的组件" class="sidebar-link">编写可被测试的组件</a></li><li class="sidebar-sub-header"><a href="/guide/tool/unit-test.html#断言异步更新" class="sidebar-link">断言异步更新</a></li></ul></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="单元测试"><a href="#单元测试" class="header-anchor">#</a> 单元测试</h1> <p>Mpx 框架提供了 jest 转换器 mpx-jest，结合微信小程序提供的 <a href="https://github.com/wechat-miniprogram/miniprogram-simulate" target="_blank" rel="noopener noreferrer">miniprogram-simulate<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 来进行单元测试的工作。</p> <blockquote><p>因为目前仅微信提供了仿真工具，暂时只支持微信小程序平台的单元测试。如果需要 E2E 测试，则和框架无关了，可参考微信的<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/" target="_blank" rel="noopener noreferrer">小程序自动化<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></blockquote> <p>如果是初始化项目，单元测试相关的项目依赖和配置可以通过 @mpx/cli 创建项目时选择使用单元测试选项自动生成，如果时旧项目需要使用，可以按照下方步骤安装依赖和添加配置。</p> <h2 id="安装依赖"><a href="#安装依赖" class="header-anchor">#</a> 安装依赖</h2> <div class="language-html extra-class"><pre class="language-html"><code>npm i -D @mpxjs/mpx-jest @mpxjs/miniprogram-simulate jest babel-jest
+
+// 如果项目使用了ts，则还需要安装
+npm i -D ts-jest
+</code></pre></div><h2 id="jest-相关配置"><a href="#jest-相关配置" class="header-anchor">#</a> jest 相关配置</h2> <p>首先在项目根目录创建 jest.config.js 配置文件，并加入以下关键配置</p> <div class="language-html extra-class"><pre class="language-html"><code>  testEnvironment: 'jsdom', // 使用 jsdom 环境
+  transform: {
+    '^.+\\.js$': '<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rootDir</span><span class="token punctuation">&gt;</span></span>/node_modules/babel-jest',
+    '^.+\\.mpx$': '<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rootDir</span><span class="token punctuation">&gt;</span></span>/node_modules/@mpxjs/mpx-jest',
+    '^.+\\.ts$': '<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rootDir</span><span class="token punctuation">&gt;</span></span>/node_modules/ts-jest' // 如果没使用 ts 可不用添加
+  },
+  setupFiles: ['<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rootDir</span><span class="token punctuation">&gt;</span></span>/test/setup'], // test 文件夹下声明 setup，路径可以随意定义，可以为每一个单测添加相应的配置
+  transformIgnorePatterns: ['node_modules/(?!(@mpxjs))'], // 定义node_modules 中需要进行 transform 的内容
+
+</code></pre></div><h2 id="简单的断言"><a href="#简单的断言" class="header-anchor">#</a> 简单的断言</h2> <p>暂时进行一个简单的组件单元测试书写，对于复杂组件以及通用测试逻辑的总结我们会在后续进行发布。</p> <p>示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'hello!'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token function">attached</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">this</span><span class="token punctuation">.</span>message <span class="token operator">=</span> <span class="token string">'bye!'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>对应的 hello-world.spec.js</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> simulate <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/miniprogram-simulate'</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 这里是一些 Jasmine 2.0 的测试，你也可以使用你喜欢的任何断言库或测试工具。</span>
+<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'MyComponent'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">let</span> id
+  <span class="token function">beforeAll</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    id <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">loadMpx</span><span class="token punctuation">(</span><span class="token string">'&lt;rootDir&gt;/src/components/hello-world.mpx'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+  <span class="token comment">// 检查 mount 中的组件实例</span>
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'correctly sets the message when component attached'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> comp <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
+    <span class="token keyword">const</span> instance <span class="token operator">=</span> comp<span class="token punctuation">.</span>instance
+    
+    <span class="token comment">// Mpx提供的数据响应是发生在组件挂载时的，未挂载前只能通过实例上的data访问数据</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>instance<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'hello!'</span><span class="token punctuation">)</span>
+    
+    <span class="token keyword">const</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'parent-wrapper'</span><span class="token punctuation">)</span> <span class="token comment">// 创建容器节点</span>
+    comp<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span> <span class="token comment">// 将组件插入到容器节点中，会触发 attached 生命周期</span>
+    <span class="token comment">// 挂载后则可以直接通过实例访问</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>instance<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'bye!'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+  <span class="token comment">// 创建一个实例并检查渲染输出</span>
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'renders the correct message'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> comp <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
+    <span class="token keyword">const</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'parent-wrapper'</span><span class="token punctuation">)</span> <span class="token comment">// 创建容器节点</span>
+    comp<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span> <span class="token comment">// 挂载组件到容器节点</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'&lt;wx-view&gt;bye!&lt;/wx-view&gt;'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="编写可被测试的组件"><a href="#编写可被测试的组件" class="header-anchor">#</a> 编写可被测试的组件</h2> <p>很多组件的渲染输出由它的 props 决定。事实上，如果一个组件的渲染输出完全取决于它的 props，那么它会让测试变得简单，就好像断言不同参数的纯函数的返回值。看下面这个例子：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ msg }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+    <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> String <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>你可以在不同的 properties 中，通过 simulate.render 的第二个参数控制组件的输出：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> simulate <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/miniprogram-simulate'</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 省略辅助方法</span>
+<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'MyComponent'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'renders correctly with different props'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token keyword">const</span> id <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">loadMpx</span><span class="token punctuation">(</span><span class="token string">'&lt;rootDir&gt;/src/components/hello-world.mpx'</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> comp1 <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'hello'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> parent1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'parent-wrapper'</span><span class="token punctuation">)</span>
+    comp1<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent1<span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp1<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'&lt;wx-view&gt;hello&lt;/wx-view&gt;'</span><span class="token punctuation">)</span>
+    
+    <span class="token keyword">const</span> comp2 <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'bye'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token keyword">const</span> parent2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'parent-wrapper'</span><span class="token punctuation">)</span>
+    comp2<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent2<span class="token punctuation">)</span>
+    <span class="token function">expect</span><span class="token punctuation">(</span>comp2<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'&lt;wx-view&gt;bye&lt;/wx-view&gt;'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h2 id="断言异步更新"><a href="#断言异步更新" class="header-anchor">#</a> 断言异步更新</h2> <p>小程序视图层的更新是异步的，一些依赖视图更新结果的断言必须 await simulate.sleep() 或者 await comp.instance.$nextTick() 后进行：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> simulate <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/miniprogram-simulate'</span><span class="token punctuation">)</span>
+
+<span class="token comment">// 省略辅助方法</span>
+<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'updates the rendered message when vm.message updates'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+  <span class="token keyword">const</span> id <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">loadMpx</span><span class="token punctuation">(</span><span class="token string">'&lt;rootDir&gt;/src/components/hello-world.mpx'</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> comp <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
+  <span class="token keyword">const</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'parent-wrapper'</span><span class="token punctuation">)</span>
+  comp<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span>
+  comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>msg <span class="token operator">=</span> <span class="token string">'foo'</span>
+  <span class="token keyword">await</span> simulate<span class="token punctuation">.</span><span class="token function">sleep</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span>
+  <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'&lt;wx-view&gt;foo&lt;/wx-view&gt;'</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><p>更深入的 Mpx 单元测试的内容将在以后持续更新……</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/tool/ts.html" class="prev">
+        使用TypeScript开发小程序
+      </a></span> <span class="next"><a href="/guide/tool/e2e-test.html">
+        E2E自动化测试
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/113.caaf11a3.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/understand/compile.html b/docs-vuepress/.vuepress/dist/guide/understand/compile.html
new file mode 100644
index 0000000000..a234b49880
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/understand/compile.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx编译构建原理 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/114.16cda7ac.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" aria-current="page" class="active sidebar-link">Mpx编译构建原理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/understand/compile.html#分包处理" class="sidebar-link">分包处理</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx编译构建原理"><a href="#mpx编译构建原理" class="header-anchor">#</a> Mpx编译构建原理</h1> <p>我们希望使用目前设计最强大、生态最完善的编译构建工具Webpack来实现小程序的编译构建，让用户得到web开发中先进强大的工程化开发体验。使用过Webpack的同学都知道，通常来说Webpack都是将项目中使用到的一系列碎片化模块打包为一个或几个bundle，而小程序所需要的文件结构是非常离散化的，如何调解这两者的矛盾成为了我们最大的难题。一种非常直观简单的思路在于遍历整个src目录，将其中的每一个.mpx文件都作为一个entry加入到Webpack中进行处理，这样做的问题主要有两个：</p> <ol><li>src目录中用不到的.mpx文件也会被编译输出，最终也会被小程序打包进项目包中，无意义地增加了包体积；</li> <li>对于node_modules下的.mpx文件，我们不认为遍历node_modules是一个好的选择。</li></ol> <p>最终我们采用了一种基于依赖分析和动态添加entry的方式来进行实现，用户在Webpack配置中只需要配置一个入口文件app.mpx，loader在解析到json时会解析json中pages域和usingComponents域中声明的路径，通过动态添加entry的方式将这些文件添加到Webpack的构建系统当中（注意这里是添加entry而不是添加依赖，因为只有entry能生成独立的文件，满足小程序的离散化文件结构），并递归执行这个过程，直到整个项目中所有用到的.mpx文件都加入进来，在输出前，我们借助了CommonsChunkPlugin/SplitChunksPlugin的能力将复用的模块抽取到一个外部的bundle中，确保最终生成的包中不包含重复模块。我们提供了一个Webpack插件和一个.mpx文件对应的loader来实现上述操作，用户只需要将其添加到Webpack配置中就可以以打包web项目的方式正常打包小程序，没有任何的前置和后置操作，支持Webpack本身的完整生态。</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/mpx-liucheng.002.jpeg" alt="Mpx编译构建机制流程示意图"></p> <p><em>Mpx编译构建机制流程示意图</em></p> <h2 id="分包处理"><a href="#分包处理" class="header-anchor">#</a> 分包处理</h2> <p>构建时对于非JS资源，是所有的包串行处理，资源map会精确记录每个包中引用了哪些资源。</p> <p>在主包的处理过程中，将主包页面中引用的所有非js资源(组件、外部样式、外部模板、wxs，图像媒体等)都记录下来，在处理分包时，对分包内引用的非js资源都进行检查，如果被主包引用过则输出到主包中，否则标记为分包only的资源输出到分包目录下。</p> <p>由于主包和分包限制相同，一般情况下分包体积远小于主包体积
+，而微信小程序的体积限制策略主要卡主包体积不得超过2M，因此，Mpx设定的是主包体积优先策略，即尽可能减小主包体积，为此，会将分包资源尽可能打到分包去。</p> <p>组件和静态资源的输出规则如下：</p> <ol><li>主包引用的资源输出至主包</li> <li>分包引用且主包引用过的资源输出至主包，不在当前分包重复输出</li> <li>分包引用且无其他包引用的资源输出至当前分包</li> <li>分包引用且其他分包也引用过的资源，重复输出至当前分包</li> <li>当用户通过packageName query显式指定了资源的所属包时，输出至指定的包</li></ol> <p>如此复杂的分包策略也完全是为了尽可能良好地支持处理分包引用npm资源，因此不管在主包还是分包中，使用Mpx框架开发小程序，可以享受最舒适最自然最好用的npm机制。</p> <p>而小程序原生的分包是不具备这个能力，只能引用自己分包下的资源，同时大部分基于web技术而来的转译型框架应该也都是不会考虑这个部分的。</p> <p>甚至如果出现这种场景：同一个组件在A分包和B分包中都有使用，但未在主包使用，会将这个组件分别放入A分包和B分包而不是主包。（是否需要这样可自行斟酌，如果不希望出现这种情况，可在主包中引入一次该组件就会被收到主包去，全局就这一份了）</p> <p>总结一下：</p> <p>对于组件，若同时被多个分包引用，主包未引用，会有多份分包存在于各分包中。一旦被主包使用，就仅有一份存在于主包中。</p> <p>对于资源（例如纯JS模块），若被主包使用，会被收集到主包里。若被多个分包使用，会被收集进主包的bundle里。若仅被某分包使用，就会在分包的bundle.js里（视模块大小及引用次数也可能被内联到某个组件JS里）。</p> <p>进阶用户有更花式的需求可通过packageName query来显式指定输出。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/understand/runtime.html" class="prev">
+        Mpx运行时增强原理
+      </a></span> <span class="next"><a href="/guide/migrate/2.9.html">
+        从 2.8 升级至 2.9
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/114.16cda7ac.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/understand/runtime.html b/docs-vuepress/.vuepress/dist/guide/understand/runtime.html
new file mode 100644
index 0000000000..ae5408c4ff
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/guide/understand/runtime.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx运行时增强原理 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/115.88124b12.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" aria-current="page" class="active sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx运行时增强原理"><a href="#mpx运行时增强原理" class="header-anchor">#</a> Mpx运行时增强原理</h1> <p>数据响应作为Vue最核心的特性，在我们的日常开发中被大量使用，能够极大地提高前端开发体验和效率，我们在框架设计初期最早考虑的就是如何将数据响应特性加入到小程序开发中。在数据响应的实现上，我们引入了MobX，一个实现了纯粹数据响应能力的知名开源项目。借助MobX和mixins，我们在小程序组件创建初期建立了一个响应式数据管理系统，该系统观察着小程序组件中的所有数据(data/props/computed)并基于数据的变更驱动视图的渲染(setData)及用户注册的watch回调，实现了Vue中的数据响应编程体验。与此同时，我们基于MobX封装实现了一个Vuex规范的数据管理store，能够方便地注入组件进行全局数据管理。为了提高跨团队开发的体验，我们对store添加了多实例可合并的特性，不同团队维护自己的store，在需要时能够合并他人或者公共的store生成新的store实例，我们认为这是一种比Vuex中modules更加灵活便捷的跨团队数据管理模式</p> <p>作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：</p> <ol><li>尽可能减少setData调用的频次</li> <li>尽可能减少单次setData传输的数据</li></ol> <p>为了实现以上两个优化方向，我们做了以下几项工作：</p> <ul><li>将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；</li> <li>将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。</li></ul> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/runtime.jpeg" alt="Mpx数据响应机制流程示意图"></p> <p><em>Mpx数据响应机制流程示意图</em></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+      ←
+      <a href="/guide/extend/mock.html" class="prev">
+        数据 Mock
+      </a></span> <span class="next"><a href="/guide/understand/compile.html">
+        Mpx编译构建原理
+      </a>
+      →
+    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/115.88124b12.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/index.html b/docs-vuepress/.vuepress/dist/index.html
new file mode 100644
index 0000000000..d44770cb87
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/5.12d049b6.js" as="script"><link rel="preload" href="/assets/js/2.314c65b9.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container" data-v-13a300a6><header class="header" data-v-3ad594c3 data-v-13a300a6><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div style="position:relative;overflow:hidden;min-width:950px;background:#f5f5f5;" data-v-2d48710e data-v-13a300a6><div class="one-section__img1" data-v-2d48710e></div> <div class="one-section__img2" data-v-2d48710e></div> <section class="one-section" data-v-2d48710e><div class="one-section__inner one-section__content" data-v-2d48710e><div style="display: inline-block;" data-v-2d48710e><h2 class="one-section__title" data-v-2d48710e>增强型跨端小程序框架</h2> <p class="one-section__desc" data-v-2d48710e>
+            良好的开发体验，极致的应用性能，完整的原生兼容，一份源码跨端输出所有小程序平台及Web。
+          </p> <button class="one-section__btn one-section__enter" data-v-2d48710e><a href="/guide/basic/start.html" class="white-link" data-v-2d48710e>
+              快速进入
+            </a></button> <button class="one-section__btn one-section__github" data-v-2d48710e><a href="https://github.com/didi/mpx" target="_blank" class="blue-link" data-v-2d48710e>
+              Github
+            </a></button></div></div> <div class="one-section__inner" data-v-2d48710e></div></section> <section class="two-section" data-v-2d48710e><ul class="row" data-v-2d48710e><li class="two-section__item" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/PsrcQ_igBl/texing_icon_you.png" alt="svg" loading="lazy" width="80" height="80" data-v-2d48710e> <p class="two-section__title" data-v-2d48710e>高性能</p> <p class="two-section__desc" data-v-2d48710e>Mpx高度关注小程序性能与包体积，深度整合了运行时性能优化与包体积分析优化能力，让开发者在大部分场景下只需专注于业务开发，就能生产出媲美甚至超出原生的高性能小程序应用。</p> <div class="two-section__line" data-v-2d48710e></div></li><li class="two-section__item" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/N7sc6TZnja/texing_icon_gao.png" alt="svg" loading="lazy" width="80" height="80" data-v-2d48710e> <p class="two-section__title" data-v-2d48710e>优体验</p> <p class="two-section__desc" data-v-2d48710e>以增强的方式将Vue中优良的开发特性引入到小程序开发中，如数据响应、组合式api等，配合强大的工程化能力，大大提升了小程序开发的体验与效率，同时保障了框架开发的可维护性与可预期性。</p> <div class="two-section__line" data-v-2d48710e></div></li><li class="two-section__item" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/bJMx84lznm/texing_icon_kua.png" alt="svg" loading="lazy" width="80" height="80" data-v-2d48710e> <p class="two-section__title" data-v-2d48710e>跨平台</p> <p class="two-section__desc" data-v-2d48710e>Mpx专注解决小程序跨端问题，通过静态转译与运行时适配结合，将一份源码跨端输出到所有开放的小程序平台和web环境下运行，同时最大限度减少跨端带来的性能与包体积损失。</p> <div class="two-section__line" data-v-2d48710e></div></li></ul></section> <section class="three-section" style="background-image:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/todomvc_bg_v3.png);" data-v-2d48710e><div class="three-section__inner" data-v-2d48710e><div data-v-2d48710e><div class="three-section__todo" data-v-2d48710e><div class="three-section__phone" data-v-2d48710e><img width="410" height="712" src="https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png" alt="phone" loading="lazy" data-v-2d48710e></div> <div class="three-section__iframe" data-v-2d48710e><iframe title="todo示例" scrolling="no" width="325" height="617" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/index.html" frameborder="0" data-v-2d48710e></iframe></div></div></div> <div class="three-section__mvc" data-v-2d48710e><div data-v-2d48710e><span class="dot-inner" style="background: #fff; margin: 0 auto;" data-v-2d48710e></span> <p class="white-text title" data-v-2d48710e>示例项目</p> <p class="white-text desc" data-v-2d48710e>
+              扫码体验Mpx版本的
+              <a href="https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC" class="target-link" data-v-2d48710e>todoMVC</a>
+              在各个小程序平台和web中的一致表现 ，更多示例项目可点击
+              <a href="https://github.com/didi/mpx/tree/master/examples" class="target-link" data-v-2d48710e>这里</a>
+              进入查看。
+            </p></div> <div class="code-list" data-v-76bf3aa2 data-v-2d48710e><div class="code-list__item" data-v-76bf3aa2><img width="150" height="170" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/wx-qrcode.jpg" alt="code" loading="lazy" data-v-76bf3aa2></div><div class="code-list__item" data-v-76bf3aa2><img width="150" height="170" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/ali-qrcode.jpg" alt="code" loading="lazy" data-v-76bf3aa2></div></div></div></div></section> <section class="section four-section" data-v-2d48710e><div class="grow four-section__bg" style="background-image:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/jizhi_bg_v3.png);" data-v-2d48710e></div> <div class="four-section__inner" data-v-2d48710e><div class="grow" style="position: relative;" data-v-2d48710e><img width="412" src="https://dpubstatic.udache.com/static/dpubimg/jvACYsEQfm/jizhi_pic.png" alt="svg" loading="lazy" data-v-2d48710e></div> <div class="four-section__text grow" data-v-2d48710e><div style="margin-left: 86px;" data-v-2d48710e><div data-v-2d48710e><span class="dot-inner" data-v-2d48710e></span> <p class="title" data-v-2d48710e>极致性能</p> <p class="desc" data-v-2d48710e>
+                得益于增强的设计思路，Mpx在运行时没有复杂的封装抹平逻辑，而是专注于实现数据响应，setData优化和Composition api等关键增强能力，压缩后体积占用仅为60KB；配合编译构建中灵活强大的包体积分析优化能力，Mpx在性能与包体积方面做到了业内最优。
+              </p></div> <button class="btn" data-v-2d48710e><a href="/guide/basic/start.html" class="white-link" data-v-2d48710e>
+                点击进入
+              </a></button></div></div></div></section> <section class="section five-section" data-v-2d48710e><div class="grow five-section__bg" style="background-image:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/jianjin_bg_v3.png);" data-v-2d48710e></div> <div class="five-section__inner" data-v-2d48710e><div class="five-section__text grow" data-v-2d48710e><div style="margin-right: 86px;" data-v-2d48710e><div data-v-2d48710e><span class="dot-inner" data-v-2d48710e></span> <p class="title" data-v-2d48710e>渐进迁移</p> <p class="desc" data-v-2d48710e>
+                同样得益于增强的设计思路，Mpx能够完整兼容小程序原生技术规范，并以较低的成本进行持续跟进；借助框架提供的渐进迁移能力，小程序开发者可以方便地在Mpx项目中使用已有的原生开发生态，如组件库，统计工具等，同时也能将Mpx开发的组件输出到原生小程序项目中使用。
+              </p></div> <button class="btn" data-v-2d48710e><a href="/guide/basic/start.html" class="white-link" data-v-2d48710e>
+                点击进入
+              </a></button></div></div> <div class="grow" style="position: relative; display: flex; justify-content: flex-end;" data-v-2d48710e><img width="412" src="https://dpubstatic.udache.com/static/dpubimg/k5Ft6oWF6F/jianjin_pic.png" alt="svg" loading="lazy" data-v-2d48710e></div></div></section> <section class="six-section" style="background-image:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/kaifa_bg_v3.png);" data-v-2d48710e><div class="six-section__inner" data-v-2d48710e><div style="text-align: center;" data-v-2d48710e><span class="dot-inner" style="background: #fff; margin: 0 auto;" data-v-2d48710e></span></div> <p class="title six-section__title" data-v-2d48710e>开发生态</p> <ul class="row six-section__row" data-v-2d48710e><li data-v-2d48710e><a href="/guide/basic/start.html" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/K4XYVLjBLH/kaifa_icon_1.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/core</div> <div data-v-2d48710e>运行时核心</div></div></a></li><li data-v-2d48710e><a href="/guide/basic/start.html" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/2k0jC-ZkFX/kaifa_icon_2.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/webpack-plugin</div> <div data-v-2d48710e>编译核心</div></div></a></li><li data-v-2d48710e><a href="/guide/basic/start.html" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/ug3MOMmXaz/kaifa_icon_3.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/cli</div> <div data-v-2d48710e>脚手架工具</div></div></a></li></ul><ul class="row six-section__row" data-v-2d48710e><li data-v-2d48710e><a href="/api/extend.html#mpx-fetch" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/L6kO_akb2G/kaifa_icon_4.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/fetch</div> <div data-v-2d48710e>网络请求库</div></div></a></li><li data-v-2d48710e><a href="/api/extend.html#api-proxy" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/oZGOmLr5f3/kaifa_icon_5.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/api-proxy api</div> <div data-v-2d48710e>增强调用</div></div></a></li><li data-v-2d48710e><a href="/api/extend.html#webview-bridge" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/trdVxyR_5_/kaifa_icon_6.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/webview-bridge web</div> <div data-v-2d48710e>页面桥接</div></div></a></li></ul><ul class="row six-section__row" data-v-2d48710e><li data-v-2d48710e><a href="https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/PczNH3wywM/kaifa_icon_7.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/vscode-plugin ide</div> <div data-v-2d48710e>插件</div></div></a></li><li data-v-2d48710e><a href="https://github.com/mpx-ecology/mpx-es-check" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/qXb0ZEY4xN/kaifa_icon_8.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/es-check</div> <div data-v-2d48710e>高级语法检查</div></div></a></li><li data-v-2d48710e><a href="/guide/advance/size-report.html" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/2pa_xoKoeL/kaifa_icon_9.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/size-report</div> <div data-v-2d48710e>包体积分析工具</div></div></a></li></ul></div></section> <section class="seven-section" data-v-2d48710e><span class="dot-inner" data-v-2d48710e></span> <p class="title" data-v-2d48710e>成功案例</p> <div class="row seven-section__wrap" data-v-2d48710e><div class="grow" data-v-2d48710e><p class="seven-section__title" data-v-2d48710e>
+            滴滴出行
+          </p> <p class="seven-section__desc" data-v-2d48710e></p></div> <div class="grow seven-section__center" style="background-image:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/anli_bg_v3.png);" data-v-2d48710e><div class="seven-section_phone" data-v-2d48710e><img width="213" height="433" src="https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png" alt="phone" loading="lazy" data-v-2d48710e></div> <div class="seven-section__inner" data-v-2d48710e><div class="swiper-img" data-v-60490726 data-v-2d48710e><div class="swiper-img__list" style="transform:translate3d(0px, 0, 0);" data-v-60490726><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/shunfengche_demo_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/qingju_demo_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/guangchuang_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/jinlong_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/siji_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/jiayou_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/jieshu_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/yiqin_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/yangche_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/zhibo_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/ai_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/shudian_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/wuyuan_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/daka_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/xueersi_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/canshi_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/qintong_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/peixun_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/jixie_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/shenyi_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/dache_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/chenxin_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/xiaoer_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/shangchen_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/dida_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/hantong_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/chongdian_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/weiping_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/weiping_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/weiping_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div></div></div></div></div> <div class="grow" data-v-2d48710e></div></div> <div class="swiper-container" data-v-5724bcdd data-v-2d48710e><div class="swiper-button" data-v-5724bcdd><img src="https://dpubstatic.udache.com/static/dpubimg/0cgzDC8Apn/anli_icon_left.png" width="50" height="50" alt="left" loading="lazy" class="swiper-img swiper-disable" data-v-5724bcdd></div> <div class="swiper" data-v-5724bcdd><div class="swiper-list active" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/bcca3d10-01b7-4c08-951a-22418b2443d6.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>滴滴出行</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/pIM3h2vyj2/qingju.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>青桔单车</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/neOI_G6deQ/shunfengche.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>滴滴顺风车</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/708d5579-81f0-480e-96b3-5f49e8022273.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>出行广场</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/69a08787-d3a1-4c51-b182-0fcb96960b56.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>滴滴公交</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/8c25bec8-938e-452d-96f9-5e524092a8ee.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>滴滴金融</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/8fdd04ed-a74b-4b87-be6e-652550fb843f.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>滴滴外卖</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/d3b62a33-7dbd-45ea-a4aa-f30ad61965f2.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>司机招募</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/988099b3-9930-4c54-abd7-75e70134d649.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>小桔加油</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/79573ef6-2a66-462e-8cc7-63eb983168f8.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>番薯借阅</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/8932c3c2-b6da-4da2-8661-5554fe2bd4a3.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>疫查查应用</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/b6507fca-1e1f-4922-9240-d0f172bea6de.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>小桔养车</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/40fd646b-10d0-4383-a576-e1d425a8c05d.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>学而思直播课</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/6833dbdb-1dc8-4929-bd41-6d71069b0714.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>小猴启蒙课</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/8627f48d-cf64-4511-8b2f-ede8e54186a7.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>科创书店</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/421bf49b-a9cb-4d54-90d7-e21b80ab21b3.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>在武院</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/46ee136b-0791-4069-98b0-35566d5ef394.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>三股绳Lite</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/eab48487-5ca2-4368-9080-a6b843097e67.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>学而思优选课</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/lY7eYSppkW/68747470733a2f2f73686978682e636f6d2f73686571752f696d672f7172636f64655f322e37343664373562342e706e67.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>食享会</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/58cdbcc5-1f00-4da9-89c6-e638b2f77b19.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>青铜安全医生</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/a9d60600-40c0-4b66-934e-3bb176d3f07a.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>青铜安全培训</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/0a816842-dda4-4e30-8c14-e951fb1a8131.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>视穹云机械</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/7f1b5f22-d765-4142-862a-999c1ed9d10f.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>店有生意通</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/JzHnEyu8VT/aaa.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>花小猪打车</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/37222642-c508-4a67-8cbc-036a66985bfc.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>橙心优选</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/nB6-p3WzIQ/xiaoeryabiao.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>小二押镖</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/nY2bg3A1L_/shunxin.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>顺鑫官方微商城</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/DO3m0Iflq1/didachuxing.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>嘀嗒出行</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/86cd89be-de29-48ad-8cb0-72c432446e7b.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>汉行通Pro</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/47fe83e5-c41a-4245-b910-60ed6493d87e.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>滴滴出行(支付宝)</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/fa1a524b-da97-4df3-9412-8c988f50b6ae.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>小桔充电(支付宝)</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/2a150b0a-e23d-4e91-98fe-e862410be911.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>唯品会QQ</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/56273723-ba98-4ceb-9672-075a5ab9f2da.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>唯品会(百度)</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/88f898a0-2f3b-44c5-b7ce-c1a8aec25299.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>唯品会(字节)</div></div></div></div></div> <div class="swiper-button" data-v-5724bcdd><img src="https://dpubstatic.udache.com/static/dpubimg/QhD6ulEP7k/anli_icon_right.png" width="50" height="50" alt="right" loading="lazy" class="swiper-img" data-v-5724bcdd></div></div></section></div> <div class="footer-container" data-v-f9ca297c data-v-13a300a6><footer class="footer" data-v-f9ca297c><ul class="footer__list" data-v-f9ca297c><li class="grow" data-v-f9ca297c><img width="180" src="https://dpubstatic.udache.com/static/dpubimg/T1R-u2N8nn/footer_logo.png" alt="logo" data-v-f9ca297c></li> <li class="grow" data-v-f9ca297c><ul class="footer-inner" data-v-f9ca297c><li class="footer__wrap" data-v-f9ca297c><span class="footer__text footer__title" data-v-f9ca297c>资源</span></li> <li class="footer__wrap" data-v-f9ca297c><a href="https://github.com/didi/mpx/issues/385" target="_blank" class="footer__text" data-v-f9ca297c>案例收集</a></li></ul></li> <li class="grow" data-v-f9ca297c><ul class="footer-inner" data-v-f9ca297c><li class="footer__wrap" data-v-f9ca297c><span class="footer__text footer__title" data-v-f9ca297c>社区</span></li> <li class="footer__wrap" data-v-f9ca297c><div class="popover" data-v-8bac5638 data-v-f9ca297c><div class="popover__content" data-v-8bac5638><span target="_blank" class="footer__text" data-v-8bac5638 data-v-f9ca297c>微信群</span></div> <div class="popover__top" style="display:none;" data-v-8bac5638><div class="popover__content" data-v-8bac5638><div class="popover__inner" data-v-8bac5638><img width="300" src="https://dpubstatic.udache.com/static/dpubimg/6DN0ebkbjgI2P9QjJr8jr_WechatIMG3.jpeg" alt="code" loading="lazy" data-v-8bac5638> <!----></div> <div class="popover__arrow" data-v-8bac5638></div></div></div></div></li><li class="footer__wrap" data-v-f9ca297c><div class="popover" data-v-8bac5638 data-v-f9ca297c><div class="popover__content" data-v-8bac5638><span target="_blank" class="footer__text" data-v-8bac5638 data-v-f9ca297c>QQ群</span></div> <div class="popover__top" style="display:none;" data-v-8bac5638><div class="popover__content" data-v-8bac5638><div class="popover__inner" data-v-8bac5638><img width="300" src="https://dpubstatic.udache.com/static/dpubimg/etX-gKWeUb/temp_qrcode_share_374632411.png" alt="code" loading="lazy" data-v-8bac5638> <!----></div> <div class="popover__arrow" data-v-8bac5638></div></div></div></div></li></ul></li> <li class="grow" data-v-f9ca297c><ul class="footer-inner" data-v-f9ca297c><li class="footer__wrap" data-v-f9ca297c><span class="footer__text footer__title" data-v-f9ca297c>帮助</span></li> <li class="footer__wrap" data-v-f9ca297c><a href="https://github.com/didi/mpx/issues" target="_blank" class="footer__text" data-v-f9ca297c>反馈问题</a></li></ul></li> <li class="grow" data-v-f9ca297c><ul class="footer-inner" data-v-f9ca297c><li class="footer__wrap" data-v-f9ca297c><span class="footer__text footer__title" data-v-f9ca297c>更多</span></li> <li class="footer__wrap" data-v-f9ca297c><a href="https://juejin.cn/user/4195392101298510" target="_blank" class="footer__text" data-v-f9ca297c>滴滴前端技术</a></li></ul></li></ul></footer> <div class="copyright" data-v-f9ca297c><div data-v-f9ca297c>备案号：<a href="https://beian.miit.gov.cn/" data-v-f9ca297c>蜀ICP备15023364号-2</a></div> <div data-v-f9ca297c>Copyright 2020 滴滴出行</div></div></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/5.12d049b6.js" defer></script><script src="/assets/js/2.314c65b9.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/logo.png b/docs-vuepress/.vuepress/dist/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5e0693f74a5f2fbf80a8f7b7c73684a83f687b0
GIT binary patch
literal 13635
zcmdtIWl)^m6FoRUu#lj^9TGgad(hw(+-2}ExWf<#Awh#X1b252Zo%Dc2=4CxhrG4F
z+TG9lX{mxKo|@-M-@biLpY9*ZiqfxN61@b0K(A#!N~nTB@P{A}+zS+V;K}tz8W`|_
zYX4E&2?RpJdH#h1C8ZF6Kreq=iHj>MTSA;6PL>dR3K?;63VTP0xs@##1ahA*iL>~m
zHb>U|bhUgA|K%&nN7NS7aa4*HBxTPUENqG|n5G|<D;NW)dGS6;{QidSPsfWV+T;J-
zg!m29EV7xha(Y0P(T7c+RjlRWtJdb4WoSv$A>_biSom)74va8Lb_`}m9RT%3GQij<
zA5*enZ_rQpj6{);>iyshe=?qh1P6ma3EodWQb!2zAp71pmS~w(DDi7!&r%TR2fQDr
zaVZ5dh!4>(1-}pW5+n}?qLF*UjtJ5~0x@~0I=%$Cz5!_^;w-)d6<4FSq5%)}<Ut^A
z6w%C+n^SqvE;48phRTi$;=}{Z$_1LxgWh9;nh~j5G5s_^APz@IJXAQ#Ubx@v2P@v}
zPk$40Phn>q>VgjVAP@y&uoD>jk^LH~6fVK%@r?~MDsehW05U?L;F=5RP-jv|#^LKX
zq5S<eBqrk|nyK&g$3!zq5mxW0*trwm=s)pF2e^#x4$(}8Z?aC~W&cX#-%ofjD2}`i
zPKCX4V1-1TNjm(9PN7vy;OK9dt5{RBf&bK~N0>E`LW!ZV#767JknAVo5-0WspFfsT
zCRRFuj39eF=cMq0J+N&+jpj$v01K+hPJ>59VarR86xosWAW4NAiGo&)7h;$aqA%<z
zUXrw9k^CkUgL|_hhYNU0h}j@)T|Ux(gEm@boKLXew;fXN*zy;&pD`&NiPzmn<REwu
zN-}584`zh=Y6OaTHJu(;zg!him_PlH$vZ!DR?$6;FRE!g8EYWWu_&C2(HC?AKU6LM
z_q_g$?*1$<J`hNVk-Y7M$Mi#S6h)UaLM#pxqx)7;jx%6PPV$wA7m4;4>Tri-Jv`4U
z_hLZrC>p{s(Kq8aJ(w>jshq$5*rxdQozNtJmrAdT7*&kwC&61n8A*05`b-H8ioHma
z>=*RX=oB@5EPaG9D#zD5Vq{c4eVC{Cr-<FkL<3?MDo)Nc1CkG;_MGUc5$2g8W8T%E
zrO>zx^=*}Etd{S~qDL7m+cwTG5JH11*r@;DZJ5Amy^Zq+8#&tIYJ80~QP&ch_IELI
zD>vAGeMu<&o6UhF<^3=YesD-Hs(pw<k$tlLW<8M}bt$PE@=OqMk5BK!iKjbpGjdvx
zQisKQ{3_Z>&b9Tu)jjxL=pN)7BT7+@iuZy?jE*w#r=*tRti-IiB}FxMBg(^9EUL(S
z@oGv>Eb1TLnf_WI7Zn6$n??6&&@n|K^WTa`QPU^Hh($$BN6N}bf83H;%8t)wV-K*E
zx}=bf3WR}S?_uIFywmrmAdk?@4;8=MRo3aWV`^g9Wra4`H&Hi*Vr98<8`ZK3Om>N^
z2`_jr7-}MJ6LV#%auG-Wj>S|DRd-fv%!|)^@u%7;UghMC;+_wk>)gJ(<+!Eg%1ufo
zQc}pT)hQ7xQ7O?qDB;&$l3!Bt`Qq8?S#T?Jp}PwqF#E<w?bmKmZ1Rb9nAMYjnn?aN
za@fZ(k}w4#Y0grsSJv2ELtFuzfk}u-$XqN|mmF-ls2qOuMx_>HCI;r{<tR*OcoDJP
z4CbV!E|uSEIBQaBu&d*&)h$yecEP5$PTUdijUmSAMk^N3#9Wafh|X<w*u-w0i_%@b
zkp6<EfPT}*rVn>%m-wXNia!-=hq+T}Qu7*l^=+0cm)<pcxv=cDCJrYZ^69g-Sl<5F
zi8xmlvS}e`+4Mxdu-gsWCf*L(9z1v3GaQGS{^maB>SLcZwqG{t`)RfPnT~tW*uDK2
zS2|>)H`0E9_aMcXS}04II%f<nOEHVh6m7$O!=>kSkCFl%jb8MtXi}QbG@ZHMa;p?H
z6Q&b|*{PEqh9u0J{_y`1PSQ=FO@gpO*vYF$Yge^lx|7<171_GCTFkY@mCZJi<?A|N
z-Ghq8&tW=ES|P=Z#gMsQ+@;(m$wJ)v9LF4s79TA>4Q*HC%-zoYotvJ!oU1sX+Mk}|
znrlh5;^zSWtxY85Xj^ESmD|Ud6LB4NMsd>G8eKn*&#KA#UD0t;inByNYgMCGH6dU@
zyyd*rGK`^@z+9!zU0>bc?d0MV+ce#T-jLXs)2QBfVXwVNcSv)n?$+GYc4vK6b(k)s
zC-jDlR`Bt>`r^-};5r}gpozw9v3S*OOK8ir0dliv3*U0V@?DFUPpJ2`u)6SwkAin#
z>r^YtL-Bp(efVw5Mcq~WUHat{!75fc`!6m`v{$H1FZW-KzY4}+!0^PgB}pOF!xto3
z$F3C2=6XX;MArDeIw)@h=h)h#)7Z|Kv2(uDYOP{zb8UpWm>P!lzG`gFxT<c%m%Z0E
z+*wiWt;8u+owRUR<#!#D3mZ;KeuhS>Tgg!IKfwv%TITy5v(yz?4v!AH>twyUJ&YR*
z*poPa-%ZkZ%fFImlG#^CN~~tzk*c(-<Za*!Oo;lan##`3V|h5-fN-Yw7k9WxWX0rh
z{ALDkoB1abZ=JFaC3LO-lee|WZscUy{YPJ1=-aS(jYMuH6wH0>X1v>%ZYV+HE#q?I
zhUV_z7_(RAo?yEX66~ArvXYQ4xOK;qrsC0JA8qm~>M9J22s!L`ulcf5CQ~?66|8Ej
zeIna4b3z);xGTl9k4z%E1@JKjJ2$5qJ|5mLnj^|lsx5xfVSp-MZhCB~!+dn2%3(0o
zu$=K6o_KARh5CK4ul?i5pu-^I;DQE0iB?l4Bxhv+q3EZ&Rnfdgaxt@(P&tj6!jR6u
z{C-VaNtK~y<zeS-*Ts9pTSS|ew@{Ruj8f$iWrNwOcBjr(atD!M=>Fn%wZm1<kz_~a
zUiW2pPPZWsD!2Yq|5{#UdJm6<?cw5jBlt+8Lt|(9Zo#{DD#kJf7Jm*&Z)tHrwvZkR
z#}L3jY}VM-YlPr~;~h02+7jAlb`wjwZqWDmu`5N#WtRDqMT=TD4iWZBR|YFB7kB4Z
zxJP%DhRsjyUw$HlssB~aK}JPBLvQ7cvCrSII2@^&YMknxT0xh?xSH;ote$C{nkE|)
zsLVkxQJa2En(B6bS@GL+=%V%lnP~QPckf#L>2;BzDzpJgbuY0XbJ%~YW}e5O#G!=G
zMHMzk6qGEX&@$9Nq;JtNTwUW{oANkyIMZnnHms2{!C$v2xar+~bAon*FQo%6fiRmJ
z>_c>CFRxX{bD9pu4pQSgSqxjSy*E{Z40{8M3^Yd!&gxzN@?UvQyq+Nr<I%TEdmP%V
zn@BB94XazU<63cTTN>vo+Viecy6P7A;#Ru2xzyqS8Ez@PJGml1|FgH_L*dPOt$cdC
zl+`S48Zjf-E<*1);I4Bkf22Kiq|wH6-gud|hqm8zBY1hU;rrofPsH)*nqT?Y|1tAC
zXKir)LvMSPc)NI=;gAp4vCgIEzQURa=cCHa^yxu?h|g0qUkaz-vErlMeVM|M%QE@n
z>V3xNx7M&Z%i-<W-b^L_bZcQJ5jSs{`%_2Te$DlnN{GgaPHPYp%AUp{%)Bvp0|NO0
zTrv{wc*Ypy$qqW>21$O-q(%UN*vIzZX!!e}TR+HNgFvOAsS*&X4JdO4^r;p;p$?u^
z2QJeaZrvNs#Zgu0DQWQ)Z7(W|H4doN+56sy3N-d|Rd?k2T5IC^y3QK3k0rXdEy05f
zG9p2oZChZY>}gv#hC!WSP<WLi6kP?jPHTYRQkZ^JRRDqPXh9&SG7#uK90dAW2hiAP
z5NMYPSP&uzgzGd!dZP#e(LcyYeE8%(zrW-mI_a|hbi!9}{6g|;`<;<s1$I-N*}}e~
zM)c&{+7jorUTgCTg-xu9Rqg7SSY|`5A|cF)4tqA661>9qy2(1-PJ+rR(h_e-L`xHI
z9@-yoZ$1n0nhT#LdWeui5591ukK8>xHj9+qcrOQy?>I96>uin=rUE`B2!TJDuYf-)
zNFWd<K)6BQ+5hj)DF%T5{`cIE4lt@{3>>h}|2=<x@&EPwe*^w|{{I~C|Er1qw{kz&
zJ<L^<QL|*}UZ!AlM>WUO^agFCCp>21OY9WcT{i}_Rv?vXW_W*=_>p%#-kAhMk#(25
zh`#OSL{2Q^o!_UvZqJKX=3Z6UD5W9ol6li{ej4V#m5}UtuAk-QXMg}$M04Y4tIl>z
zO^Dj_yB=eWOD&?DW=(BvKg>Oe^fLSO^;Ah1m8NXE-zdg<9&-NVIT2u_hH0TJw=yu=
z*3Av7&&VvaoXYE>iJdQj54m=~-d+~Ad#qW=9iBMNqP+d}HAo^+vEKL3cUlWtGy|S@
zP?m-Bu`M!@(8cJ#btO-D&CHcS3e6lQ6c32NVelLG#CRPw?YXuWZCxz3#T*H2w<BCP
zmO4JRM<A93N}Ki!A3-@%|9$nK!K2DqJn)fzaelhi@+O&U%UbC4U^?!0r)dS^Fe_Q=
zPt3{I&`CR{2Dm^jqdz=?29qy;W{?z&h+o&qckGl$cOjb$esR5AiDkvTaE``tP5KrY
z%4#n4eLg)69<YsmcG%&=_?gouhK%^rg_@a4hBDE0mWQQ`wx_C6RhWq;W9*(3?Q8V#
zU&(;0$=5A9cP5<o=As!WNxn<Bo4X7&GrTHw+0vzTMKSn0_-)ZesVw8=^J4B)a}{oH
zM(nVg3k~!i@*aX1-d<Bx4e@XN#%q`J(n(htdEK0f{=9_Jj86>sBGLTrMuw3^g$+62
z_9*olmqXHK)us7_Ppxa2SqiXBGE$<8;l6&^Mr6Qw>y_>8M+flJ(a~OGHPjXs+8F5F
z#C5LOPi!ru4ktE=@GgI%b)*csL$nKq^2(En9z9<b{5^8wv#7N?*__d~xFLb7QiG;t
z1@gzmwa@A4Wta`_u`eatx3lYi8aTfO&fg(q!LHGFnpzF9tg1snSLDH@X;9>{rBH~k
zw+_vqHZg!!J~%YX5U@!o@sKC1J$=bLV0EhYzUE#Ww={)b-vDYp{W#<wznk61yRnMu
z{PKBBmK@c@8{1pIRyHb4T{Wjc|D3XgU1GgctD4UWGMmIi2PIVaR(c=H{KsToT_6HO
zzv&PYe?C!O-jA>(0V^R>Zx4m5AP}%i>B~2yjqZxDj#p~Pw!khIS$>ki0mj586f8el
zw@^hShi_hLw)xziYv=pDAk)@nh%z!nr9iov!|`-`l&%p0FyqJFEs-XAaMJeOeM?ho
z{r=uj<NXMa`jMgMIa>SRal@B7r9F<|*5{x?_VaP}Jh`VkL=UQ%=QL+?)61abvbJ&v
z5xnbaHOZUB|1H$=jhWaHpA-&oaY5&EhS;43z6v(6HlloprMK};;qA8`#fPHC+P?)&
z+><q2A$raM0o2oBimHr+`)I)NjG!K2)ta2#{}RoZF&EPCum&bkw2)3O=fw@Cy~I6&
z2r@cm1m-`85O7eBizFEQTNNIU+3K0n5MDFYVC&=I(nUAv{l=zr+v2Ad!(;40QsEsW
zg;)B|5zuUHIemrObfCq5W^>+OVa2=dED3t)Fhpr8S+EM`YI_=r=n37tMFwmhD##~r
zbIV38Q7RYIc{0uj<+T!Wif!ZbKDnp%3f@=DK)zchWMlQ3m0<P-jMx{Fp6)r<;o;+n
z)`In`q}8~6d?q<bm-+6AdtNtsfF}iFgWd4`7V&bH*F33BwYwVw*zDX6;h5=7X5Rh7
zy+rAlIBx8q;b7bT6PL}?U;PVpDttvh*@qAJ=fZFqdN+XML>8!Y1_=vXIkYogOt94A
z+s)rbKe26HUtSenq8PB-IAbhMX0gNzJ#X|N{z@^y@o5CHY-Y-4CfV)q;iS#iw{^Xt
zbKwO`^yI8Vl__L3>3O60eb)zNy`dyDjxGEo;rN=Z>gxJg%5)6L%zqXizO0J-Kz7EC
z-Y-4q9Ro`^L4Wl19mEr!Vx-c86_%7#z1ONNEG=Lw@D_Km$?B8DBE@WE^VRW_9YVwa
zwMy@tFOlyFxRJYCuMJGsaz`@quJ?S<rM(W(gNI|d$eR)Il<oqRx`K{nS_R)-G_rN3
zr=&8uBhDQ15}h6KN6JwE=5>4p?5BC^oc>DC{)*Ip=HwUjlZ~Rmo3lmo34^OoZOQe+
zaDH?f-D#<J*T=>I5~Zd&O9czw{J#w9@jq{H&T};)*Y`btW9eU9Oe4oC#cD`GAewhh
zE|F~#jZW~q3wqN%f}(Qg6o~**>DlW(-}&rmS1SANT<0Q5O(8&}3=d{DCA--;CW8>r
z(a`Zc7PVco@%f@Q2AaX#n84m`j3MTlyymNi?k)rI`er!M7x14oIh}SNywFJ=?+2kj
z^i~2ygeC}ZmC12nom;#uBl#A{i#;_<4aLxnu+j(7Fex=Xz2Y(Vxe)!3?x?ghyQ(?8
z>qJyk)P{zJ$`bmSv>l~KCp|qqTiasb-d$<xmQ2UQyqVEh<l1p=TwK(P;5<!9N$Kbi
z`@uL9I5fNI?V+Fe<XTa{caaz$P9i{gs!$}kQMWe+S3=p^V6d1lD!kA;f)4&3`pWJn
ze`@KkU%x|MwwqVwWM^xYXz;Bdz(~NQ1}H%0zF6<@<HrxX+u*1u?CActCmuT&o>^mb
zC-Jh-T%D5IU%y0$+vF!%TF#?*A8OjtR}?nZ>wGWO<!p+|dEUE(Q13fW%#8`Xku?;k
zv2Xi5()++qLlJ5@u6=WJ!~FCoDT%0PYPVH4esCy>Yj3u~l=*3Pc2=v!fMqKw%5Tbg
zsm1H6_VdE&*%=0zAOR*OtK}#~ytGA*sug!~jvz}&cjhMs79Wy#?L5L4lWMAISyEXZ
z8(};qrly;VzrPZrF0gRVpD&Wcsuo~sMGS->$oYImDVHtK<Kef`vS)Gp;T;nb^YNab
zc~G7vy4xgU;H|Qbjx{U6VdGxu{k`{$FoK+df{U^B{;%fd=J9dWer#h;&&Dp=gvdzB
zc1E#G`Mf314VNm_+?UJAmP0iyR}0=dp`igZf|!K8K4Nx`j*f31GZt(5)Kyi*z%u>j
zRhyfe3Tc9KX6y~DqXc16J4a30+S=GKqvWB>{i+dJK{7f%KJ8oQk1;#>v{B^E8*vW)
zZtuiJ3SO4jU4}U&E_z*u1RTLGDU^@`J`7_B{xPpQH)XQ73YV9W=^q(!n^NHC;n6Ib
zk|h~@i$Xa5B3JGm4UM^(nY$z-Hs=6c>;OLW3W{_-!SEv2+GSU``WDFYA0(V9BcWs$
zzedYmfuHUc%-Ch_Z7KtbHHzAeeuWDzi=CdHs;a8$or09I#+q+;i?Ab9T-?M5`uijI
zxu&7F>Z!~e91}Kn799qH#u=21hTi;dc|TH?|7x7BkD8E$q;=)00LYY%b%@{hAUe#1
zC#Rti_v+}^xJX5>`nV`yPq`j0FBrEice0bC<KjvGcm&^sC8t!@SO}gPrYGFuhX+%9
zi){LCGI$b)>WU{#E(6bF*}(Nw6*Z|qDF@=8ZNS0sxSZ?LJm7fgsTmlgwHs~ww#v)P
z$M_~W8yjZ~BI|22;q9=b{P`n)gK_b0KyQ2z(snYo<Jpduaa6bENm_i>Lk%@v9U%)Q
zk~unhzc@DLrVWJ3E~WjklgYiPz?T=EE$8AI`U1Ga=2Z>eLp?UKa&l*xTyMU!Kb6h<
z3LX6Y>fVlKJUd;unuK@6|JTdwwLUv+i__>RDmt1v2$}NTyLTQQ9-o428?5KR!0p-0
zWI52o6&8##J@@pnwl19EBFGFC14uzyG7j;CG)zpnj`thB?$i)Egm0CyU1;V%c-#ZS
zSOvSOfn^0+JNApt@9*3GSc#pr<&Gz5IBzh_oA4Nnd6)SId_MZML{CtJj#U&Uh9W$}
zZo6ky#yg2w168>XHF#|2)Q7+#!L5RKa`^fiQD3Ub2;1i$sN)|$7fYM_VuAH+XMe(>
z{e6-;7Tb2o&sgEvf<aR}Ixl7dB_}LfZjtNq;v6Y^-QzntIu0?ctXHm7ZmEwP@lN^z
zI-eIbvq3pf-`&-vYoXYp1Pt-yqA)`J+EKV8?`|ap8%N3M!j(+hD1HgGSw%xb<7y&L
zF)!LzOl@Wvv!?B9?6oonJ9{?yCy5w`_=YO;WlRyVZ7O?)_1YBl!q^?xWE?6abByGV
z;uo)JqGbkzUYl`2U#2$JG{LX}4a$@h72~e^n#y_202dpqvxwL2#{@6Rm1wZ&UVlno
z7K6y-+qu4aI*ut+cSYN}K-;fi^KDFzlG+n^g%rTqQhOK267WJ+R#q>{6IjLDH1ox|
zZc6=Au@W`G)8=5h4OgtSB;1g#ySuv|dMK0@y5D@5$|!$-VQ>NLO811Blppc18fPRH
zUG%r(cYt2y%kmDKkha*kI9K};gPov0OHQI4X)G-8TXt2RE>-}<(I`(vefHh9Hk|}*
zz9}_UNHc{^T-AFiA@Ci60>e3yhf3!&=z$Bp?!iwwN8Z|!A*)w7jvttO?GUIJ_n3xy
z$0W_|bKcMw$ogyFR{WFElIVyCip)_mtDKk6(6}Zr^WUwlCM#oRSK94gU%!4GM86kw
z*`3T`fy*ITKF0yPl9@1RKF$1X+MqcrL2yV&Srjo4YTw!A1Glfqm6l?_xqD(Kf~+u~
zX~j)>7F(Gg*Fje?{>fU@2}7wiTDSAAB)BO8X=ecl5$o&gdcxr!ZXdq3@DDf(DkKe=
z7fsDSW=mAE6#^3x5)v|d1dq1jrNk(Gn4cMH8ed2WZ~N*P3xk>MxVhMq8?fp}0`O58
zct+(ViK34ZcDdG_MgmWQgIVkF=NuH9gtT*}_joM<Ob|FA<k_-p$!WLT+yLNDWwMF3
zc4CpRY}t%lb7je#ZR`Gb^5h|!lhzXeKMfiSS%8elQ~FY`);_H*eRQN$tSBkS+p~w-
zko1=-goL96^6OhJ9sCSBoVgo(f3?z=xn_^57Z6500<hqz85Il5Q5!i<quE+Y_=I)M
z+}xb-G|CV58CKUAJA++ne|)jYG&HuA8QG_nHgeaI5h|only2i19ewtx?@OrJc~jPC
zFJCSSP0ejmyJVBIoJNC9-=_H-Of}(Pf*Zl}EVPPA?m?@8toi%Je_@jJZ6^)~E=re8
zk$-84s^%7luwKCkFb4koao$_M;!YmgG&OZ{a>~&we;V)hF3~6|qDgd9mXi85@(PG+
z&hu4H<m7C&<$dpdRSN_`YLO=EWX@bri4Kz1qAlG`cK@a!jUUm5%0bWba&j6j81)Pq
z#zpe4PY&|B247_7<lKxa8v>Yyi1eb^-N9F)el&plo_N1;NF!(IK-@3uUOaf+;zdz{
z0c|NWB(Cf51zFzA-qP*QPEtPgya^dW@9gsOQ6tumd{shhY-0+0qyTG^asC90!cY5D
z@RgZus35mJUA^goaZ+~kmJQ=I%FDcdRAwQemZ~amIXOAPT}EU(Qnrm;X*=NDu*+6h
zHZciP72^{VcRCfq=_V3ueV6hZsw{%Zc3h_}=-XCXN1z_tOKuk=@}}Yzw44oIQ%24J
zUD;?pDF*_!QY&=qAB<dmyTt}KGJEVkxUG1E0H%gba2QY1xOtz33TLq+Ey{9qM(kt<
zC~428irQT%UisAP8V&&99M43@#5fKSkc>HjM@yF><<D>Hdp9clVzzDUa6TdoWAALZ
zk6u=XfLTRVbv%-u3@PACM(gR?lof@5z(Ty;{Wt_k5unQ-zQ8f!jbNbRdWQT3=_VgS
zG;%t@;(pZk{(v>V=08{&UH=#?WpFJB-=9Ku{>f6(oH?@>9UU#1&y^{!c^(qREhHj+
zO!-@gfd!pOU@s~{^}kFU?ND-}1FR2LLU5(^8?>sKXZ#!olbpXw#LgZ7(s}2->pk;4
zdE5too|((#E&nmpo_3tW2okBRj#xb_y3lTuNJnYW?^!-PNJm1xhWb<SbQ_)#BPr}_
zwI}}g9iwfUfoWEU!?f~YL>2C%shqTWsof?w{b@)CMYpQ#?6B!8pQw^Qds7gL%Brdy
zy^aKcfXB#gW?HBsUq;|IV16nYUhCFq3(+Tm7ZiLOmC?F={ra>QRbgL|!osd3epYLz
zaWORX6(l9?Ao{HQJG<Q*Jfcd~YapDulmJ17Q9uN~KFDx2_d2Na0p9B4_Ahe$Gq4*x
z-`(Tg(bCl#b{pqOqe6(ciwj9+sMqU#@}}dRPdTdFv}jn;#COoS2Fl;h93e7V`rBnL
zYK9uX@A}P5fcKqj4nC4FaS|!m*_GD4;y<~h6qX=Vl5O_6H^orGYsS2N-1E-PY2ARf
z*^iRSs8Cx8{#;1KUize^wLOh5@8IBoogP`2op`zNrfLen$_<`2*~WLq#eiF#ZvgNg
z7k<C#6WJ*rfMdn&7g3?bM5;YrE+EMMvWxMO^)xe2T7s}4E=v~d>8oh?nLHBh!_qpz
zNrw8;e!bK>>S2SObCgcMk>T$d$Izx;lRamCrKJ)a9GuN&`H(To^P45q@9e6hUjs|E
z?wys5{Q3ehom<}>W=&|`1pJ5YX}%vg34UA5+ScCR-vbGP+X(&Hepd<*WIe+3V-LQ_
z^hAV=27Y^e*mj&a`6sqWlKE>|5b>>#&tcc+c*91wgYW&Ootah)ei-FiOn4zV#l`!(
z0&?{~dm*z@Srre(n`&sl-CQr;m5Yh&TXI{jJo+68s3O2HkA^dxT`$tev4M>AA@Q;9
zPbirJHI}raW96J}+*9$+CGDC2$l>8?qbpuWw|Ui^E%#1{T;4?g8mX+EogKge<#j?d
ziiU=VbBh4}u)H|O@m@MS(d`g$B>?=FFN)w4gr1%*fBq0c1_K1(3^Q0Ni;XCZ-Egq<
zfdZ=MtpuZ^KGWv|S6-HS>(p2_;picnf)|x@8K!{n6B-`;rU7$uD15CuZ?fcx5Pnf4
zzxNy41i>yNMXDn0nPC_Z*Qp}n&oi|IjXPfGT;w#{-3Vuf#{WQ>Db^Acq4;eGFe$zT
z_VW#fKryWBQ$~Q#Zjy_2Vn(N|Y+9I^eXs3mikDSTh@IL9`ug?72(wgtTpZ0c5Kcqi
zNOisD{^O%}EcRVcdF5)s$>y5~s{xK&G-jfpg_iq;?-#K#>l*fAdJH?Pp9u*GNlCJu
zfFu)eMgKA|n#xa%vMp$>gZbnz%uH7;&2y30>94#FqKeeZI}G*a##?=W!%E@1p2itC
zVR)O>YFlCZM^Eh@QL&sHx&Y)8e22{{B(y}mV#7*Mtii9I8JavbJ%`7nJ+(Ma<w(hS
ziO%Z{trp9u-?o%vSW#Y@|JX?})c02OdvjNl+t`kCC8;HtJyDSB-GX_Q(A|EOV;aH7
zm=jO*ppEWWh`RdBcRiF#(Wx)=6|PTDoaGw|E*x%9Be&Dq9|F-^hI=TjT>^76?_Q#z
z2{n}zber@K3}i+Ej0}7+f8o!<0B8*8iop%eDujVzCpS02Tj-E1kKa`RpS9PQnjAv~
z$<q>t%=wrkJ^?uyd!i+S1mVoxdB}l3%SDkgo#Nv3UR(UFI^7#Uh-=fV36g?WQut#2
z!|iB*?bO@dyh01$bn@uA+1XuH7(w6Jg}0B#1~$t!(F{<wg1%}jyLNBFSsbi17qtfG
z!tdbcMn9SO{Dg*A%-I6OQX}9K5HSA4ThR=-M+1Ttpc8X(p$Sda734j&%di30P0Gtg
z_2%2zX9Z3IJ58x9mC6}pY$$1CG%tYmW&#QHjEr*Myj%!hA+@_<QV-OB>s(`PZT{Ou
zpOMZp`=E}T+cl3+HkOZWDEQQuM)eIOo;LwDH<vxrPfSdFbrIWEU0v<(4_~6eIMO*d
zG7@i#ajY1*Rz;N=s;Q$}zLR|9`qBU;=qSQ&pL8^`?Y{o+&w|WQ^MI}{2~?yq0LX!?
zPj%ig?&nWsWo3#jTw6I=S%9LMdAS33Pc38-6YMQ9H?sn0eOkw2ydG*JMEY92Prf^2
zEZpixc_+V@)Pm1Fh2)wC6E%vsh{7sKNzP1_e?Bem;Dt!eqAK|6eOz)bKAo(bIZZWb
zV=f?lqv|1jr1*f7Cw9`+x*nO)BK`F|7Z;V8n!3}ZqJ9J1mV&P(E+*!WT*tP{%c2ue
znw>3?H-TDTMWB+ayGu-DsMT25`eEC}Ho5ZwLowLF)wiwSKY`GeTtom+G;80ohe@67
z7L@_VS$}Ca_E-TJiMT`~IUyl`X0HW&t_lPY`~&Qt(a~9BmJ+&xKj<c0{-;j@WE~y4
z`GtPI*2rb%@#e9oN@<_*k-`^=7~<$PI5eanBjd1UVQyhD=n5+E!~XX}BcHIUzfmSs
zFYv)_JXA3c$2vtoC3o-feEDx>SsP9>X1IK)-S$L@1w(S-6^qbqcSyitwj^q)j}n4r
z%RUcaw50&$uSP_~#6@G4&ittwMN`%_20Hi#jiA&ab2%j?7G`F=t;n}3xgoX5ZVxAA
zlK%MqE_xCdbohD<xxtkuNwas<L1U#a0E#ta?sNqqGhl-kw;LZHCm{EsFC&v&NHg!6
z<Blbi*LN8A?72QA3hJbEq}1ES_huU7qINw{v=~Us?8G0Ls2+XDqj#LGz&3ai7_z>&
zY#1_N+XIprHie=0XmPD}MG(veOdU?&xPG0y0kF8<a2?mXScqkH-T3d(R5s=VQ#(3w
z=OBCq?Z!qx0{SriN+ow9t}PClpQ#GNwl9oDrm@i#pDcZt1q92gOGxgQj6sfwgvuB3
zef|9>i9R6U_Djw}qUa|2%`2?-@(gY90pl$$<rxse!j*i>td)jO4mdfSKPv?QbikEX
zlxK5m>u$DXg_zbD3%uCZ>~yqSvxms?wXkB%V%@9$=qz2J`QYpfmy`P~4NY!Nj?4Yg
zQj0aK1fbk7Y%QTSG6C_fZUR_kXWj8`5};<j1Hy1Jcm6uQirvG@rU^c$E9BnfT}#K0
z3JM2C{E_A?wAb8#<`x^fnXF$|cElqSv-2}9ZW_4rK&X^p{yL3W1FoDdaJ{p31qwuf
zJkQKOZ|T0>CqPZ_Hv4VlQSs~|xux5Ljo_68VFtL&*X`*;#)>EJl<c6{=MbsP!0&&!
z_ZAVz$BylXBAbcAdMr8FC-IleSP8Pd5dm)n=+ir4>8iQ?qB{j_aA`?CY~uYwD<)th
zg>9b<!}6Gw>+p*e8%1B~vjB~v7TLV?#KeAOLuWNb#c%*xPl-7=H~@-}V+iV(n_;0D
zaGoh`iBtDL1TvG0ZL(<xta0cO2eQbGh5oxROaQ#&56*$)78?hLp4|ED&_GLzZj)#C
z;`Y*YFA`j!K%-`5MXw@7VPP}OqVs5OlMLhlM41Q?i%Y%KhD-lf`AABw3+i_3*&@ux
zml*ZI?PHt37sb3L=kJZu8kl_p1E&?J3KEHo)}L*3tM7-BoNB1>#dOPWf5&JAwe@nB
z*49octvvXKbSegX9kaZzn0V@c0B!qUh6QKe_dJo!=Zslquh92f#BtCJ=q(gJ-Pqi;
z22jQOsTGuOn<ja=yN`^O?J;bT-zOlU28yXDE0>%0hLZ}ozIpS86|ihfS{n1o!F}b3
z(fmZ{WE*yg#*R`t9d!+0Rl51p#MMCi`{8951aX-C+XmVpi0+d@)r(bz@v<*ov5{<K
za|l!Mm&tDj^m-lxaOa9vaGNo$zXhc>R^)kyTMU1BFTk9V=>WeiyyHgGXs&hAH(M4J
z6$NO8nV}ek&tiCEVUFbX`y^s7WRgY}9gU#L{c@3NFF+foR(K=omM~=gBVDSRCBk_~
z<g70gP!$Eq6Veo7ZVXA#d)ILx8vlb-WK+_|N*m%>1$^^;-<3n>ab-B?FloG&p+A2n
zt!qf{<#uQ}Z+<JTN+dpQmed5U9L>`@W6|Lv({^)8UJssa%Z`w9k<3epBaR}H&81TC
z@ilCW=m=JNy4=Y#0|H^p3F3lmn|7Pbc_Mpkog~297`CXrOB}t7r|gm#{f47_g<_eD
ziGEG&WUoy8UdXe+0Y7exMs6@_Jg5MeA;NjyRnh|JLTz(Tb*UHXoH`)V`1Ev^6NWnd
zG_X(3X35e(5f2jW0NtCHfhDbLfjLD<NxHyg%1whqCjWjCEdIH=jwTkuJL4Idi}s5e
z5M2O(diyxOzrWAi#&Ft~hLn?&W6-$rRz+&fo;Q@GjL+pZv@g&IL-_!zY=d#0bZHM;
zzX6J0Y%d6Yb9tD-#fFB40uslecSp{ku3X|xvx69piquJO8{TK0BkX2O^c8#`Hum35
z;WyDvK^%;a9}tl2amfe~*9#?09G#p5crW?`0nG2Z`-%f@EILnLdDv+g0urJAWUs01
zj^>j-O_GPge9v@vP^su`10VAuMX}EZqMfU4R)SZ{Ttd3rbWYX(ATh<HEju58#G9&*
zEJE)8AaUr9Xn5QZp?)6$=?A2rIbGo(GF458-6oZ80{7x|7z>j}ONPpJMwY_bBk~2C
zVh(<KM<7ri+dP`8;hL~PsE?8U=3{1I(d6wH0*G94a?#fk06Fhk_=W@Kf3jKL(L23+
z;`8lbICVKZ*3==JtVJvUWL<R5X~EhnaU>8z{kbC3gIUTU#zjli<m4y7b3C$N{a{Z$
zR$L1*w0kl*mU}oB8hfqsrPYDC+X92B;M)I?*iS5@T&HAQM8*Ef_a`9VkR^@+Nzlib
z$Sg?f!p&tPhGg3$4%Kk@<n=gVVtAa-C#Ro^B$z4ExlA&wnK?e~LclbeFjybdv({ea
zZ&v}s#-I%edQe~dZQx^jFAdO26Ya>G8nI8$?|ed{&qu+&!y|2rL5Tf_<8<;X&CL-H
zy+(|cwVigkv$~IXR^N<ANYBWrT!~uFd5c<+jg2D1%BUqIhX=VU2JpKF>K9gy@&f<V
z0{RowTHx(1R0ViR!n}zFCfcLpG1<s6ryv~<qu^RDiGw0qEd%J^A3oi$;E-Mb?2_T(
z@WpspKfosF9?%uol{nxf6EBi$eJ?lb{0(<;-L48EP)`q>7VXU;!zYmKX}An`GoG$z
z<%$-MUa(p`I^`<)&AWm9YvYmKx)q#z)v`wBdwFjRtl{&U&U9bTLzGkj3X}+@9e|Nh
zJgmEjuoH#ZC0+aA0zN)|WG)$V6ER^iOk}A29)K!cTjg$j75|jtr5$fGrLl@!{ziAv
z7vn6|WmDEwRaHV>(}!B&M@ayzf_XFgud?Kw<OVx(Ad>)AwGQiwPd($f4*f8_W*s;C
z3j)j!08Df(kb7FwM9QO!-yTqu_K$4o-V_zBEJ5?dV0()N8e|E@pHa_n4!YXvw70Z`
zJ>6h$Zf|WICn~o$dcw})ut)bU>^$|3<^x3+>-<{q)u(d+tzIfC(p~?_VWUUpi5DhY
z!pOr@S6nQ=e#DhL#7_UkRd!`r{^X(U^B`aV#5Otgd#c^@*H|5CkHn34e=nMTl*5Bs
z2jUG`4;D>5IH0MkxQiP-AE>qnfJ|UN<Fnxu*_P^aX)?Z`l&{VGhPdSOXR4XQ@5TW$
zZRHdnvVf#ehvX9IeGr+m-LQWC;*8}#un9{#6H_vJ&f1;@Ec=iD3A2$Q>&|iy=S#%8
zB(BWvK&{q2C`IJn<Em9$Y^F%I1{O%0l|_a7vfJ<1@r5ZFps!Hj_wl&U{?)E^Y=15Y
zqTL@vSFV>lVKy6V4SVvgHL8d_&NO+V`+~P6+6UhrO<vh3J^bc+F6e46Sn!?hCb=P&
zO&Tsboc$@ddV)d!5ZDiPj%6XTB=W^YJi4sC{jWk>SUX&6v{N{(kr8x@PC5xykxDvs
zEQ?+yW8)Jpj_3=VST7g()OsQ>hoC9^T+!{ds{=5(C$VZvqI9@?^d}%iBO@Z|T|T{5
zxx?=s`F@NB6qpq`4HGKv9=P)YLdb!7{psoS{Dnx&5q=}HI>W@7(`~nu;U?r8;*|~$
zzYL%%fopnS1=Tv70Na$3629r3Ir6!#SasnO0PmJ;lr{ZLUn1xG!|U$93cm2%tV7Hj
zY<L8!pVVl`5hPwWVKx4mu&)a}BEnT!$*<p&Id4toWBJEx&3}o4&ZOs}JvT)JP3h+w
z0(V%=DWtE4_gA{>7)QYXdK<SY!<(bf6n3iYy1u|^ONauHeNK2r{#VW4u;(=xFmT#+
z1}bL+MA*%z-Fcm20(EJSdO#4W;OKaOmt<}X4ygfxN9Emlc;Rzpyrx;C?Wsh28w*1=
z$8n6qD&V%)b!{aaW#{1%=oYD9@oNKk<96Sc^NZ&qw%<7P@OrQZyM6DdB8ZlDS-5rZ
zNs!(e*73m&#o${R$=w$6)ZI23&=Eyl5WGPf{};yB?aO5^*D<?t&rpy|ZbFpeZU|$I
z3>hm>7Obdqhlq16JvThORb3gaH|pOD!%vndZD^er&fVI||Fl%{p+*(ZcE(3n)2Q%s
zhnCrEyv6l(IfUSWR~Da$=Xd^ia$Q}^WaNz@AtDuP-B;5vO}<N?o?ywR^94F|3}I9?
zKrnA~!$I(Su06X#%I=PfAd)L9?rReTok&-1YslfRLwvou%-ZEHAQtbnal!vJnq)y-
z_r1NAXxjH||4!Z=rrC!8%`0o$V}uBHSk1NyxL{pt^l=uTO{eF*VoD)<Yo*k2Mk~;D
z<?ZNNnJj!Cn}Kt*%clifcVT!#?-h*Bot9<ue5fJ%w${GJ{d)j-QO#%o67M+TS)<70
zmF$1Y?ghp!kc-UJa4EfqmMt%f{cF3KdC+j>k8g={gUzBw7BNu#hIX&tV673=`O3vW
zpD!v!Y<iz$OJ0WObn6fhn1N{qi|<ymM%wP<SJlA@ch}!}>6afvXSzxWAN^KyT2B5f
zYeqm7kl~(tdah?Mnx2jik=pm@WuRBtKip(5U6d@#(kI-SSHZ2T#}*62q!|(aI+wJH
zhFj17%a`7Tk>(_)$5EZcx8k`S9jrY_GP^cS-1MaZtwuG@IDn_@Waj>jLzFWtYcaxU
z_y&|Fm~?qZR+M(z8G-hNp6i{8FGP`OPqsFufEpm>#VGXLt<^|%SK`JL6!Ak(=wGkI
zaL7LHS|nr!>FZ|_j`yNDcnvRo%TpCa$^-v(UZvJnTp#I*+{qsACZ@-+yT%L$AlvJ@
zKh10$;x^+wI(p6&4nTI80AHLyeeR^N`JA!p!eO<ZDs$T;<V(<YAn=HKaN$1_xHekL
zViPd|^dhO`iVvp<)d7uS&w*3(&-eQFZw(QHFr(>LP@`rV4cM-w3xDp>vU}zYygm}J
z<WiRr%YS6usm6tBMpmNU95@^}ILEm{{*RlQZ$zjEL?mFc1=dyx29M9gy$mpVV$sdR
zuE@b0^y4;zN<kcR0zN4&eNomf`J`!Qf|YfSDy(qMcdbirP#S2YqhOS6ce8i_0xdtF
h`2GK;W%2O{bYNU{>YHeN0`ymcWF!?OO2v%){|_THq09gP

literal 0
HcmV?d00001

diff --git a/docs-vuepress/.vuepress/dist/manifest.webmanifest b/docs-vuepress/.vuepress/dist/manifest.webmanifest
new file mode 100644
index 0000000000..dcc89dfc8b
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/manifest.webmanifest
@@ -0,0 +1,15 @@
+{
+    "name": "Mpx",
+    "short_name": "Mpx",
+    "icons": [
+        {
+            "src": "https://dpubstatic.udache.com/static/dpubimg/1ESVodfAED/logo.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/index.html",
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/rn-api.html b/docs-vuepress/.vuepress/dist/rn-api.html
new file mode 100644
index 0000000000..ff2acf3a1a
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/rn-api.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>API支持列表 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/116.4a116234.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container no-sidebar"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="api支持列表"><a href="#api支持列表" class="header-anchor">#</a> API支持列表</h1> <p>mpx转RN的对标微信api目前支持及部分的api转换，目前支持的能力可以参考下表：</p> <table><thead><tr><th>支持方法</th></tr></thead> <tbody><tr><td>getSystemInfo</td></tr> <tr><td>getSystemInfoSync</td></tr> <tr><td>getDeviceInfo</td></tr> <tr><td>getWindowInfo</td></tr> <tr><td>request</td></tr> <tr><td>setStorage</td></tr> <tr><td>removeStorage</td></tr> <tr><td>removeStorageSync</td></tr> <tr><td>getStorage</td></tr> <tr><td>getStorageInfo</td></tr> <tr><td>clearStorage</td></tr> <tr><td>clearStorageSync</td></tr> <tr><td>setClipboardData</td></tr> <tr><td>getClipboardData</td></tr> <tr><td>makePhoneCall</td></tr> <tr><td>onWindowResize</td></tr> <tr><td>offWindowResize</td></tr> <tr><td>arrayBufferToBase64</td></tr> <tr><td>base64ToArrayBuffer</td></tr> <tr><td>connectSocket</td></tr> <tr><td>getNetworkType</td></tr> <tr><td>onNetworkStatusChange</td></tr> <tr><td>offNetworkStatusChange</td></tr></tbody></table> <h1 id="使用说明"><a href="#使用说明" class="header-anchor">#</a> 使用说明</h1> <p>对于一些api-proxy中没有提供的能力，用户可以搭配mpx对象方式传入custom使用即可示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> showModal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@test/showModal'</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">custom</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">ios</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      showModal
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">android</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+      showModal
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+mpx<span class="token punctuation">.</span><span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'标题'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'这是一个弹窗'</span><span class="token punctuation">,</span>
+  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'弹框展示成功'</span><span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+</code></pre></div><h1 id="api抹平差异详情"><a href="#api抹平差异详情" class="header-anchor">#</a> API抹平差异详情</h1> <p>对于一些微信独有的返回结果，或者RN目前不能支持的入参/返回结果，在下面会有详细说明：</p> <h3 id="getsysteminfo-getsysteminfosync"><a href="#getsysteminfo-getsysteminfosync" class="header-anchor">#</a> getSystemInfo/getSystemInfoSync</h3> <table><thead><tr><th>不支持返回值</th></tr></thead> <tbody><tr><td>language</td></tr> <tr><td>version</td></tr> <tr><td>SDKVersion</td></tr> <tr><td>benchmarkLevel</td></tr> <tr><td>albumAuthorized</td></tr> <tr><td>cameraAuthorized</td></tr> <tr><td>locationAuthorized</td></tr> <tr><td>microphoneAuthorized</td></tr> <tr><td>notificationAuthorized</td></tr> <tr><td>phoneCalendarAuthorized</td></tr> <tr><td>host</td></tr> <tr><td>enableDebug</td></tr> <tr><td>notificationAlertAuthorized</td></tr> <tr><td>notificationBadgeAuthorized</td></tr> <tr><td>notificationSoundAuthorized</td></tr> <tr><td>bluetoothEnabled</td></tr> <tr><td>locationEnabled</td></tr> <tr><td>wifiEnabled</td></tr> <tr><td>locationReducedAccuracy</td></tr> <tr><td>theme</td></tr></tbody></table> <h3 id="getdeviceinfo"><a href="#getdeviceinfo" class="header-anchor">#</a> getDeviceInfo</h3> <table><thead><tr><th>不支持返回值</th></tr></thead> <tbody><tr><td>benchmarkLevel</td></tr> <tr><td>abi</td></tr> <tr><td>cpuType</td></tr></tbody></table> <h3 id="getwindowinfo"><a href="#getwindowinfo" class="header-anchor">#</a> getWindowInfo</h3> <table><thead><tr><th>不支持返回值</th></tr></thead> <tbody><tr><td>screenTop</td></tr></tbody></table> <h3 id="request"><a href="#request" class="header-anchor">#</a> request</h3> <table><thead><tr><th>不支持入参</th></tr></thead> <tbody><tr><td>useHighPerformanceMode</td></tr> <tr><td>enableHttp2</td></tr> <tr><td>enableProfile</td></tr> <tr><td>enableQuic</td></tr> <tr><td>enableCache</td></tr> <tr><td>enableHttpDNS</td></tr> <tr><td>httpDNSServiceId</td></tr> <tr><td>enableChunked</td></tr> <tr><td>forceCellularNetwork</td></tr> <tr><td>redirect</td></tr></tbody></table> <table><thead><tr><th>不支持返回值</th></tr></thead> <tbody><tr><td>cookies</td></tr> <tr><td>profile</td></tr> <tr><td>exception</td></tr></tbody></table> <h3 id="setstorage-getstorage"><a href="#setstorage-getstorage" class="header-anchor">#</a> setStorage/getStorage</h3> <table><thead><tr><th>不支持入参</th></tr></thead> <tbody><tr><td>encrypt</td></tr></tbody></table> <h3 id="getstorageinfo"><a href="#getstorageinfo" class="header-anchor">#</a> getStorageInfo</h3> <table><thead><tr><th>不支持返回值</th></tr></thead> <tbody><tr><td>currentSize</td></tr> <tr><td>limitSize</td></tr></tbody></table> <h3 id="connectsocket"><a href="#connectsocket" class="header-anchor">#</a> connectSocket</h3> <table><thead><tr><th>不支持入参</th></tr></thead> <tbody><tr><td>tcpNoDelay</td></tr> <tr><td>perMessageDeflate</td></tr> <tr><td>timeout</td></tr> <tr><td>forceCellularNetwork</td></tr></tbody></table> <h3 id="getnetworktype"><a href="#getnetworktype" class="header-anchor">#</a> getNetworkType</h3> <table><thead><tr><th>不支持返回值</th></tr></thead> <tbody><tr><td>signalStrength</td></tr> <tr><td>hasSystemProxy</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/116.4a116234.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/rn-component.html b/docs-vuepress/.vuepress/dist/rn-component.html
new file mode 100644
index 0000000000..71bec22783
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/rn-component.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>RN 自定义组件支持 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/117.e45c1b95.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container no-sidebar"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="rn-自定义组件支持"><a href="#rn-自定义组件支持" class="header-anchor">#</a> RN 自定义组件支持</h1> <p>创建自定义组件在 RN 环境下部分实例方法、属性存在兼容性问题不支持，
+此文档以微信小程序为参照，会详细列出各方法、属性的支持度。</p> <h2 id="参数"><a href="#参数" class="header-anchor">#</a> 参数</h2> <h3 id="组件定义属性说明"><a href="#组件定义属性说明" class="header-anchor">#</a> 组件定义属性说明</h3> <table><thead><tr><th>属性</th> <th>类型</th> <th>RN 是否支持</th> <th>描述</th></tr></thead> <tbody><tr><td>properties</td> <td>Object Map</td> <td>是</td> <td>组件的对外属性，是属性名到属性设置的映射表</td></tr> <tr><td>data</td> <td>Object</td> <td>是</td> <td>组件的内部数据，和 <code>properties</code> 一同用于组件的模板渲染</td></tr> <tr><td>observers</td> <td>Object</td> <td>是</td> <td>组件数据字段监听器，用于监听 <code>properties</code> 和 <code>data</code> 的变化</td></tr> <tr><td>methods</td> <td>Object</td> <td>是</td> <td>组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用</td></tr> <tr><td>behaviors</td> <td>String Array</td> <td>否</td> <td>输出 RN 不支持</td></tr> <tr><td>created</td> <td>Function</td> <td>是</td> <td>组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 <code>setData</code></td></tr> <tr><td>attached</td> <td>Function</td> <td>是</td> <td>组件生命周期函数-在组件实例进入页面节点树时执行</td></tr> <tr><td>ready</td> <td>Function</td> <td>是</td> <td>组件生命周期函数-在组件布局完成后执行</td></tr> <tr><td>moved</td> <td>Function</td> <td>否</td> <td>RN 不支持，组件生命周期函数-在组件实例被移动到节点树另一个位置时执行</td></tr> <tr><td>detached</td> <td>Function</td> <td>是</td> <td>组件生命周期函数-在组件实例被从页面节点树移除时执行</td></tr> <tr><td>relations</td> <td>Object</td> <td>否</td> <td>输出 RN 不支持</td></tr> <tr><td>externalClasses</td> <td>String Array</td> <td>否</td> <td>输出 RN 不支持</td></tr> <tr><td>options</td> <td>Object Map</td> <td>否</td> <td>输出 RN 不支持，一些选项，诸如 multipleSlots、virtualHost、pureDataPattern，这些功能输出 RN 不支持</td></tr> <tr><td>lifetimes</td> <td>Object</td> <td>是</td> <td>组件生命周期声明对象</td></tr> <tr><td>pageLifetimes</td> <td>Object</td> <td>是</td> <td>组件所在页面的生命周期声明对象</td></tr></tbody></table> <h3 id="组件实例属性与方法"><a href="#组件实例属性与方法" class="header-anchor">#</a> 组件实例属性与方法</h3> <p>生成的组件实例可以在组件的方法、生命周期函数中通过 this 访问。组件包含一些通用属性和方法。</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>RN 是否支持</th> <th>描述</th></tr></thead> <tbody><tr><td>is</td> <td>String</td> <td>否</td> <td>输出 RN 暂不支持，未来支持, 组件的文件路径</td></tr> <tr><td>id</td> <td>String</td> <td>是</td> <td>节点id</td></tr> <tr><td>dataset</td> <td>String</td> <td>是</td> <td>节点dataset</td></tr> <tr><td>data</td> <td>Object</td> <td>否</td> <td>组件数据，通过 this 直接访问</td></tr> <tr><td>properties</td> <td>Object</td> <td>否</td> <td>组件props，通过 this 直接访问</td></tr> <tr><td>router</td> <td>Object</td> <td>否</td> <td>输出 RN 暂不支持</td></tr> <tr><td>pageRouter</td> <td>Object</td> <td>否</td> <td>输出 RN 暂不支持</td></tr> <tr><td>renderer</td> <td>string</td> <td>否</td> <td>输出 RN 暂不支持</td></tr></tbody></table> <p>微信小程序原生方法</p> <table><thead><tr><th>方法名</th> <th>RN是否支持</th> <th>参数</th> <th>描述</th></tr></thead> <tbody><tr><td>setData</td> <td>是</td> <td>Object newData</td> <td>设置data并执行视图层渲染</td></tr> <tr><td>hasBehavior</td> <td>否</td> <td>Object behavior</td> <td>检查组件是否具有 behavior</td></tr> <tr><td>triggerEvent</td> <td>是</td> <td>String name, Object detail, Object options</td> <td>触发事件</td></tr> <tr><td>createSelectorQuery</td> <td>否</td> <td></td> <td>输出 RN 暂不支持，未来支持，建议使用 ref</td></tr> <tr><td>createIntersectionObserver</td> <td>否</td> <td></td> <td>输出 RN 暂不支持</td></tr> <tr><td>selectComponent</td> <td>否</td> <td>String selector</td> <td>输出 RN 暂不支持，未来支持，建议使用 ref</td></tr> <tr><td>selectAllComponents</td> <td>否</td> <td>String selector</td> <td>输出 RN 暂不支持，未来支持，建议使用 ref</td></tr> <tr><td>selectOwnerComponent</td> <td>否</td> <td></td> <td>输出 RN 不支持</td></tr> <tr><td>getRelationNodes</td> <td>否</td> <td>String relationKey</td> <td>输出 RN 不支持</td></tr> <tr><td>groupSetData</td> <td>否</td> <td>Function callback</td> <td>输出 RN 不支持</td></tr> <tr><td>getTabBar</td> <td>否</td> <td></td> <td>输出 RN 不支持</td></tr> <tr><td>getPageId</td> <td>否</td> <td></td> <td>输出 RN 不支持</td></tr> <tr><td>animate</td> <td>否</td> <td>String selector, Array keyframes, ...</td> <td>输出 RN 不支持</td></tr> <tr><td>clearAnimation</td> <td>否</td> <td>String selector, Object options, ...</td> <td>输出 RN 不支持</td></tr></tbody></table> <p>Mpx 框架增强实例方法</p> <table><thead><tr><th>方法名</th> <th>RN是否支持</th> <th>描述</th></tr></thead> <tbody><tr><td>$set</td> <td>是</td> <td>向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新</td></tr> <tr><td>$watch</td> <td>是</td> <td>观察 Mpx 实例上的一个表达式或者一个函数计算结果的变化</td></tr> <tr><td>$delete</td> <td>是</td> <td>删除对象属性，如果该对象是响应式的，那么该方法可以触发观察器更新（视图更新</td></tr> <tr><td>$refs</td> <td>是</td> <td>一个对象，持有注册过 ref的所有 DOM 元素和组件实例，调用响应的组件方法或者获取视图节点信息。</td></tr> <tr><td>$asyncRefs</td> <td>否</td> <td>输出 RN 不支持</td></tr> <tr><td>$forceUpdate</td> <td>是</td> <td>用于强制刷新视图，不常用，通常建议使用响应式数据驱动视图更新</td></tr> <tr><td>$nextTick</td> <td>是</td> <td>在下次 DOM 更新循环结束之后执行延迟回调函数，用于等待 Mpx 完成状态更新和 DOM 更新后再执行某些操作</td></tr> <tr><td>$i18n</td> <td>否</td> <td>输出 RN 暂不支持，国际化功能访问器，用于获取多语言字符串资源</td></tr> <tr><td>$rawOptions</td> <td>是</td> <td>访问组件原始选项对象</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/117.e45c1b95.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/rn-style.html b/docs-vuepress/.vuepress/dist/rn-style.html
new file mode 100644
index 0000000000..10589cd7ff
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/rn-style.html
@@ -0,0 +1,331 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx转RN样式使用指南 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/118.9cbac09e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container no-sidebar"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx转rn样式使用指南"><a href="#mpx转rn样式使用指南" class="header-anchor">#</a> Mpx转RN样式使用指南</h1> <p>RN 的样式的支持基本为 web 样式的一个子集，同时还有一些属性并未与 web 对齐，因此跨平台输出 RN 时，为了保障多端输出样式一致，可参考本文针对样式在RN上的支持情况来进行样式编写。</p> <h2 id="样式编写限制"><a href="#样式编写限制" class="header-anchor">#</a> 样式编写限制</h2> <h3 id="选择器"><a href="#选择器" class="header-anchor">#</a> 选择器</h3> <p>RN 环境下仅支持以下类名选择器，不支持逗号之外的组合选择器。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 支持 */</span>
+<span class="token selector">.classname</span> <span class="token punctuation">{</span>
+  <span class="token property">color</span><span class="token punctuation">:</span> red
+<span class="token punctuation">}</span>
+<span class="token selector">.classA, .classB</span> <span class="token punctuation">{</span>
+    <span class="token property">color</span><span class="token punctuation">:</span> red
+<span class="token punctuation">}</span>
+</code></pre></div><h3 id="布局"><a href="#布局" class="header-anchor">#</a> 布局</h3> <p>在 RN 中布局方式有限制，像 block inline inline-block 和 fixed 等都不支持，支持的布局方式如下：</p> <h4 id="flex"><a href="#flex" class="header-anchor">#</a> flex</h4> <p>在RN中，常规的组件元素可以用过 flex 布局来实现，<a href="https://reactnative.dev/docs/layout-props#flex" target="_blank" rel="noopener noreferrer">参考文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p><strong>注</strong>：RN中view标签的主轴是column，和css不一致，使用mpx开发设置<code>dispay:flex</code>时，会默认的主轴方向是row。</p> <h4 id="relative-absolute"><a href="#relative-absolute" class="header-anchor">#</a> relative/absolute</h4> <p>在 RN 中 position 仅支持 relative（默认）和 absolute，可<a href="https://reactnative.dev/docs/layout-props#position" target="_blank" rel="noopener noreferrer">参考文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="样式单位"><a href="#样式单位" class="header-anchor">#</a> 样式单位</h3> <h4 id="number-类型值"><a href="#number-类型值" class="header-anchor">#</a> number 类型值</h4> <p>RN 环境中，number 数值型单位支持 px rpx % 三种，web 下的 vw em rem 等不支持。</p> <h4 id="color-类型值"><a href="#color-类型值" class="header-anchor">#</a> color 类型值</h4> <p>RN 环境支持大部分 css 中 color 定义方式，仅少量不支持，详情参考 RN 文档 https://reactnative.dev/docs/colors</p> <h2 id="组件样式规则"><a href="#组件样式规则" class="header-anchor">#</a> 组件样式规则</h2> <p>在web和RN下组件的渲染会存在一些差异的地方，比如默认样式不一致、继承的关系不一致等。框架针对这些不一致进行了抹平工作，但是仍旧存在一些使用限制，具体参考以下组件节点的介绍。</p> <h3 id="text"><a href="#text" class="header-anchor">#</a> text</h3> <p>RN中，文本节点需要通过Text组件来创建文本节点。文本节点需要给Text组件来设定<a href="https://reactnative.dev/docs/text-style-props" target="_blank" rel="noopener noreferrer">属性<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>来调整文本的外观。</p> <p>Web/小程序中，文本节点可以通过div/view节点进行直接包裹，在div/view标签上设定对应文本样式即可。不需单独包裹text节点。</p> <p>框架抹平了此部分的差异，但仍因受限于RN内text的样式<a href="https://reactnative.dev/docs/text#limited-style-inheritance" target="_blank" rel="noopener noreferrer">继承原则的限制<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，通过在祖先节点来设置文本节点的样式仍旧无法生效。具体例子说明如下</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是文本<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+
+.wrapper {
+    font-size: 20px;
+}
+.content {
+    text-align: right;
+}
+/** 以上例子中
+web渲染效果: 字体的大小为20px，文字居右 
+转RN之后渲染效果: 字体大小为默认大小，文字居右
+*/
+
+</code></pre></div><p><strong>限制与使用说明</strong></p> <ol><li>无法通过设置祖先节点的样式来修改文本节点的样式，只可通过修改直接包裹文本的节点来修改文本的样式。</li> <li>框架处理将文本节点样式的默认值与web进行了对齐，如果需要按照RN的默认值来进行渲染，可设置<code>disable-default-style</code>为<code>true</code></li></ol> <h3 id="view"><a href="#view" class="header-anchor">#</a> view</h3> <p>background、background-image、background-size、background-repeat仅在view标签下支持，background-color在其他标签上也支持。</p> <p><strong>各属性支持的类型</strong></p> <ul><li>background - 仅支持 background-image | background-color | background-size | background-repeat，每个属性支持情况，可参考下面的介绍。</li> <li>background-image - 仅支持 &lt;url()&gt;。</li> <li>background-size - 支持px|rpx|%，也支持枚举值 contain|cover|auto； 不支持两个以上的值进行设置。</li> <li>backgroundno-repeat - 仅支持值为no-repeat。</li> <li>backfround-color - 参考<a href="https://reactnative.dev/docs/colors" target="_blank" rel="noopener noreferrer">Color<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p><strong>支持的语法</strong></p> <div class="language-css extra-class"><pre class="language-css"><code>
+<span class="token comment">/** 1. background **/</span>
+<span class="token comment">/* 支持 */</span>
+<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg&quot;</span><span class="token punctuation">)</span></span> pink contain no-repeat<span class="token punctuation">;</span>
+<span class="token property">background</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
+<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg&quot;</span><span class="token punctuation">)</span></span> pink<span class="token punctuation">;</span>
+
+<span class="token comment">/* 不支持 */</span>
+<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+
+<span class="token comment">/** 2. background-image **/</span>
+<span class="token comment">/* 支持 */</span>
+<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg&quot;</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
+<span class="token comment">/* 不支持 */</span>
+<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+
+<span class="token comment">/** 3. background-size **/</span>
+<span class="token comment">/* 支持 */</span>
+<span class="token property">background-size</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
+<span class="token property">background-size</span><span class="token punctuation">:</span> 50% 25%<span class="token punctuation">;</span>
+<span class="token property">background-size</span><span class="token punctuation">:</span> contain<span class="token punctuation">;</span>
+<span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
+<span class="token property">background-size</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
+<span class="token property">background-size</span><span class="token punctuation">:</span> 20px auto<span class="token punctuation">;</span>
+
+/ * 不支持 * /
+<span class="token property">background-size</span><span class="token punctuation">:</span> 50%<span class="token punctuation">,</span> 25%<span class="token punctuation">,</span> 25%<span class="token punctuation">;</span>
+
+
+<span class="token comment">/** 4. background-repeat **/</span>
+<span class="token comment">/* 支持 */</span>
+<span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
+
+<span class="token comment">/* 不支持 */</span>
+<span class="token property">background-repeat</span><span class="token punctuation">:</span> repeat<span class="token punctuation">;</span>
+
+
+<span class="token comment">/** 5. background-color **/</span>
+<span class="token property">background-repeat</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
+</code></pre></div><h2 id="样式参考"><a href="#样式参考" class="header-anchor">#</a> 样式参考</h2> <h3 id="layout-style"><a href="#layout-style" class="header-anchor">#</a> Layout Style</h3> <h4 id="position"><a href="#position" class="header-anchor">#</a> position</h4> <p>设置元素的定位样式
+<strong>值支持类型</strong>
+enum: absolute, relative， 默认relative。</p> <h5 id="语法"><a href="#语法" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
+<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
+
+</code></pre></div><h4 id="top-right-left-bottom"><a href="#top-right-left-bottom" class="header-anchor">#</a> top|right|left|bottom</h4> <p>设置元素的不同方向的偏移量</p> <h5 id="值支持类型"><a href="#值支持类型" class="header-anchor">#</a> 值支持类型</h5> <p>number: px,rpx,%</p> <h5 id="语法-2"><a href="#语法-2" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
+<span class="token property">top</span><span class="token punctuation">:</span> 10rpx<span class="token punctuation">;</span>
+<span class="token property">top</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
+</code></pre></div><h4 id="z-index"><a href="#z-index" class="header-anchor">#</a> z-index</h4> <p>控制着元素的堆叠覆盖顺序。</p> <h5 id="值支持类型-2"><a href="#值支持类型-2" class="header-anchor">#</a> 值支持类型</h5> <p>number</p> <h5 id="语法-3"><a href="#语法-3" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
+</code></pre></div><h4 id="display"><a href="#display" class="header-anchor">#</a> display</h4> <p>设置元素的布局方式。</p> <h5 id="值支持类型-3"><a href="#值支持类型-3" class="header-anchor">#</a> 值支持类型</h5> <p>flex/none</p> <h5 id="语法-4"><a href="#语法-4" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 默认 */</span> 
+<span class="token property">display</span><span class="token punctuation">:</span>flex
+<span class="token comment">/* 隐藏 */</span>
+<span class="token property">display</span><span class="token punctuation">:</span>none
+</code></pre></div><h4 id="align-content"><a href="#align-content" class="header-anchor">#</a> align-content</h4> <p>设置多根轴线的对齐方式。</p> <h5 id="值支持类型-4"><a href="#值支持类型-4" class="header-anchor">#</a> 值支持类型</h5> <p>enum: flex-start, flex-end, center, stretch, space-between, space-around, space-evenly</p> <h5 id="语法-5"><a href="#语法-5" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
+<span class="token property">align-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
+<span class="token property">align-content</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span>
+<span class="token property">align-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
+<span class="token property">align-content</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
+<span class="token property">align-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
+<span class="token property">align-content</span><span class="token punctuation">:</span> space-around<span class="token punctuation">;</span>
+<span class="token property">align-content</span><span class="token punctuation">:</span> space-evenly<span class="token punctuation">;</span>
+
+<span class="token comment">/** 不支持 **/</span>
+<span class="token property">align-content</span><span class="token punctuation">:</span> safe center<span class="token punctuation">;</span>
+<span class="token property">align-content</span><span class="token punctuation">:</span> unsafe center<span class="token punctuation">;</span>
+</code></pre></div><h4 id="align-items"><a href="#align-items" class="header-anchor">#</a> align-items</h4> <p>设置单根轴线上的子元素的对齐方式。默认会是交叉轴上的。</p> <h5 id="值支持类型-5"><a href="#值支持类型-5" class="header-anchor">#</a> 值支持类型</h5> <p>enum: flex-start, flex-end, center, stretch, baseline</p> <h5 id="语法-6"><a href="#语法-6" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
+<span class="token property">align-items</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
+<span class="token property">align-items</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span>
+<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
+<span class="token property">align-items</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
+<span class="token property">align-items</span><span class="token punctuation">:</span> baseline<span class="token punctuation">;</span>
+
+<span class="token comment">/** 不支持 **/</span>
+<span class="token property">align-items</span><span class="token punctuation">:</span> first baseline<span class="token punctuation">;</span>
+<span class="token property">align-items</span><span class="token punctuation">:</span> last baseline<span class="token punctuation">;</span>
+</code></pre></div><h4 id="align-self"><a href="#align-self" class="header-anchor">#</a> align-self</h4> <p>设置单个子元素在单根轴线上的对齐方式</p> <h5 id="值支持类型-6"><a href="#值支持类型-6" class="header-anchor">#</a> 值支持类型</h5> <p>enum: auto, flex-start, flex-end, center, stretch, baseline</p> <h5 id="语法-7"><a href="#语法-7" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
+<span class="token property">align-self</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
+<span class="token property">align-self</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
+<span class="token property">align-self</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span>
+<span class="token property">align-self</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
+<span class="token property">align-self</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
+<span class="token property">align-self</span><span class="token punctuation">:</span> baseline<span class="token punctuation">;</span>
+
+<span class="token comment">/** 不支持 **/</span>
+<span class="token property">align-self</span><span class="token punctuation">:</span> first baseline<span class="token punctuation">;</span>
+<span class="token property">align-self</span><span class="token punctuation">:</span> last baseline<span class="token punctuation">;</span>
+</code></pre></div><h4 id="flex-2"><a href="#flex-2" class="header-anchor">#</a> flex</h4> <p>仅支持 flex-grow | flex-shrink | flex-basis 这种顺序，值以空格分隔按顺序赋值</p> <h5 id="值支持类型-7"><a href="#值支持类型-7" class="header-anchor">#</a> 值支持类型</h5> <p>flex: number number px/rpx</p> <h5 id="语法-8"><a href="#语法-8" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 简写 **/</span>
+<span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
+<span class="token comment">/* flex-grow | flex-shrink | flex-basis */</span>
+<span class="token property">flex</span><span class="token punctuation">:</span> 0 1 1<span class="token punctuation">;</span>
+</code></pre></div><h4 id="flex-grow"><a href="#flex-grow" class="header-anchor">#</a> flex-grow</h4> <p>设置子盒子的放大比例</p> <h5 id="值支持类型-8"><a href="#值支持类型-8" class="header-anchor">#</a> 值支持类型</h5> <p>number</p> <h5 id="语法-9"><a href="#语法-9" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
+</code></pre></div><h4 id="flex-shrink"><a href="#flex-shrink" class="header-anchor">#</a> flex-shrink</h4> <p>设置子盒子的缩放比例。</p> <h5 id="值支持类型-9"><a href="#值支持类型-9" class="header-anchor">#</a> 值支持类型</h5> <p>number</p> <h5 id="语法-10"><a href="#语法-10" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">flex-shrink</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
+</code></pre></div><h4 id="flex-basis"><a href="#flex-basis" class="header-anchor">#</a> flex-basis</h4> <p>设置在分配多余空间之前，子盒子的初始主轴尺寸。</p> <h5 id="值支持类型-10"><a href="#值支持类型-10" class="header-anchor">#</a> 值支持类型</h5> <p>number px|rpx|%</p> <h5 id="语法-11"><a href="#语法-11" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">flex-shrink</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
+<span class="token property">flex-shrink</span><span class="token punctuation">:</span> 10rpx<span class="token punctuation">;</span>
+<span class="token property">flex-shrink</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span>
+</code></pre></div><h4 id="flex-direction"><a href="#flex-direction" class="header-anchor">#</a> flex-direction</h4> <p>设置主轴的方向。</p> <h5 id="值支持类型-11"><a href="#值支持类型-11" class="header-anchor">#</a> 值支持类型</h5> <p>enum: row, row-reverse, column, column-reverse</p> <h5 id="语法-12"><a href="#语法-12" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span>
+<span class="token property">flex-direction</span><span class="token punctuation">:</span> row-reverse<span class="token punctuation">;</span>
+<span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
+<span class="token property">flex-direction</span><span class="token punctuation">:</span> column-reverse<span class="token punctuation">;</span>
+
+</code></pre></div><h4 id="flex-wrap"><a href="#flex-wrap" class="header-anchor">#</a> flex-wrap</h4> <p>设置元素是否换行。当值为wrap时，alignItems：center不生效。</p> <h5 id="值支持类型-12"><a href="#值支持类型-12" class="header-anchor">#</a> 值支持类型</h5> <p>enum: wrap, nowrap, wrap-reverse</p> <h5 id="语法-13"><a href="#语法-13" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
+<span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
+<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap-reverse<span class="token punctuation">;</span>
+</code></pre></div><h4 id="flex-flow"><a href="#flex-flow" class="header-anchor">#</a> flex-flow</h4> <p>是flex-direction flex-wrap 缩写，仅支持 flex-flow: flex-direction flex-wrap 这种顺序，值以空格分隔按顺序赋值</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* flex-direction */</span>
+<span class="token property">flex-flow</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span>
+<span class="token comment">/* flex-direction|  flex-wrap*/</span>
+<span class="token property">flex-flow</span><span class="token punctuation">:</span> row nowrap<span class="token punctuation">;</span>
+</code></pre></div><h3 id="view-style"><a href="#view-style" class="header-anchor">#</a> View Style</h3> <h4 id="margin"><a href="#margin" class="header-anchor">#</a> margin</h4> <p>margin 是 margin-top|margin-right|margin-left|margin-bottom 的缩写模式, 目前仅支持四种缩写模式。</p> <h5 id="值支持类型-13"><a href="#值支持类型-13" class="header-anchor">#</a> 值支持类型</h5> <p>string: 'auto'
+number: rpx，px, %</p> <h5 id="语法-14"><a href="#语法-14" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* all */</span>
+<span class="token property">margin</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
+
+<span class="token comment">/* top and bottom | left and right */</span>
+<span class="token property">margin</span><span class="token punctuation">:</span> 5% auto<span class="token punctuation">;</span>
+
+<span class="token comment">/* top | left and right | bottom */</span>
+<span class="token property">margin</span><span class="token punctuation">:</span> 1rpx auto 2rpx<span class="token punctuation">;</span>
+
+<span class="token comment">/* top | right | bottom | left */</span>
+<span class="token property">margin</span><span class="token punctuation">:</span> 1rpx 2rpx 2rpx <span class="token punctuation">;</span>
+</code></pre></div><h4 id="margin-top-margin-bottom-margin-right-margin-left"><a href="#margin-top-margin-bottom-margin-right-margin-left" class="header-anchor">#</a> margin-top|margin-bottom|margin-right|margin-left</h4> <h5 id="值支持类型-14"><a href="#值支持类型-14" class="header-anchor">#</a> 值支持类型</h5> <p>number: rpx，px, %</p> <h5 id="语法-15"><a href="#语法-15" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">margin-top</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
+<span class="token property">margin-top</span><span class="token punctuation">:</span> 2rpx<span class="token punctuation">;</span>
+<span class="token property">margin-top</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
+</code></pre></div><h4 id="padding"><a href="#padding" class="header-anchor">#</a> padding</h4> <p>padding是padding-left、padding-right、padding-left、padding-bottom的缩写模式, 目前仅支持四种缩写模式。</p> <h5 id="值支持类型-15"><a href="#值支持类型-15" class="header-anchor">#</a> 值支持类型</h5> <p>string: 'auto'
+number: rpx，px, %</p> <h5 id="语法-16"><a href="#语法-16" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* all */</span>
+<span class="token property">padding</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
+
+<span class="token comment">/* top and bottom | left and right */</span>
+<span class="token property">padding</span><span class="token punctuation">:</span> 5% 10%<span class="token punctuation">;</span>
+
+<span class="token comment">/* top | left and right | bottom */</span>
+<span class="token property">padding</span><span class="token punctuation">:</span> 1rpx 0 2rpx<span class="token punctuation">;</span>
+
+<span class="token comment">/* top | right | bottom | left */</span>
+<span class="token property">padding</span><span class="token punctuation">:</span> 1rpx 2rpx 2rpx <span class="token punctuation">;</span>
+</code></pre></div><h4 id="padding-top-padding-bottom-padding-left-padding-right"><a href="#padding-top-padding-bottom-padding-left-padding-right" class="header-anchor">#</a> padding-top|padding-bottom|padding-left|padding-right</h4> <h5 id="值支持类型-16"><a href="#值支持类型-16" class="header-anchor">#</a> 值支持类型</h5> <p>number: rpx，px, %</p> <h5 id="语法-17"><a href="#语法-17" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** padding-top **/</span>
+<span class="token property">padding-top</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
+<span class="token property">padding-top</span><span class="token punctuation">:</span> 2rpx<span class="token punctuation">;</span>
+<span class="token property">padding-top</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
+</code></pre></div><h4 id="border"><a href="#border" class="header-anchor">#</a> border</h4> <p>border 是 border-width|border-style|border-color 的缩写模式, 目前仅支持 width | style | color 这种排序，值以空格分隔按顺序赋值</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* width | style | color */</span>
+<span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span>
+<span class="token property">border</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
+<span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span>
+<span class="token property">border</span><span class="token punctuation">:</span> 1px double pink<span class="token punctuation">;</span>
+</code></pre></div><h4 id="border-color"><a href="#border-color" class="header-anchor">#</a> border-color</h4> <p>设置边框的颜色, 目前只支持统一设置，不支持缩写。</p> <h5 id="值支持类型-17"><a href="#值支持类型-17" class="header-anchor">#</a> 值支持类型</h5> <p>color: 参考<a href="https://reactnative.dev/docs/colors" target="_blank" rel="noopener noreferrer">Color<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="语法-18"><a href="#语法-18" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* all border */</span>
+<span class="token comment">/** 支持 **/</span>
+<span class="token property">border-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
+</code></pre></div><h4 id="border-style"><a href="#border-style" class="header-anchor">#</a> border-style</h4> <p>设置边框的样式, 目前只支持统一设置，不支持缩写。</p> <h5 id="值支持类型-18"><a href="#值支持类型-18" class="header-anchor">#</a> 值支持类型</h5> <p>enum: solid|dotted|dashed</p> <h5 id="语法-19"><a href="#语法-19" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
+<span class="token comment">/* all border */</span>
+<span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token string">'solid'</span><span class="token punctuation">;</span>
+<span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token string">'dotted'</span><span class="token punctuation">;</span>
+<span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token string">'dashed'</span><span class="token punctuation">;</span>
+
+<span class="token comment">/** 不支持 **/</span>
+<span class="token property">border-style</span><span class="token punctuation">:</span> double<span class="token punctuation">;</span>
+<span class="token property">border-style</span><span class="token punctuation">:</span> groove<span class="token punctuation">;</span>
+<span class="token property">border-style</span><span class="token punctuation">:</span> ridge<span class="token punctuation">;</span>
+<span class="token property">border-style</span><span class="token punctuation">:</span> dotted solid<span class="token punctuation">;</span>
+<span class="token property">border-style</span><span class="token punctuation">:</span> hidden double dashed<span class="token punctuation">;</span>
+<span class="token property">border-style</span><span class="token punctuation">:</span> none solid dotted dashed<span class="token punctuation">;</span>
+</code></pre></div><h4 id="border-width"><a href="#border-width" class="header-anchor">#</a> border-width</h4> <p>设置边框的宽度，目前只支持统一设置，不支持缩写。</p> <h5 id="值支持类型-19"><a href="#值支持类型-19" class="header-anchor">#</a> 值支持类型</h5> <p>number: px rpx %</p> <h5 id="语法-20"><a href="#语法-20" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* all border */</span>
+<span class="token property">border-width</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
+</code></pre></div><h4 id="border-top-color-border-bottom-color-border-left-color-border-right-color"><a href="#border-top-color-border-bottom-color-border-left-color-border-right-color" class="header-anchor">#</a> border-top-color|border-bottom-color|border-left-color|border-right-color</h4> <p>设置各边框的颜色</p> <h5 id="值支持类型-20"><a href="#值支持类型-20" class="header-anchor">#</a> 值支持类型</h5> <p>color: 参考<a href="https://reactnative.dev/docs/colors" target="_blank" rel="noopener noreferrer">Color<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="语法-21"><a href="#语法-21" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-top-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
+</code></pre></div><h4 id="border-top-width-border-bottom-width-border-left-width-border-right-width"><a href="#border-top-width-border-bottom-width-border-left-width-border-right-width" class="header-anchor">#</a> border-top-width|border-bottom-width|border-left-width|border-right-width</h4> <p>设置各边框的宽度</p> <h5 id="值支持类型-21"><a href="#值支持类型-21" class="header-anchor">#</a> 值支持类型</h5> <p>number: px rpx</p> <h5 id="语法-22"><a href="#语法-22" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-top-width</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
+</code></pre></div><h4 id="border-radius"><a href="#border-radius" class="header-anchor">#</a> border-radius</h4> <p>设置border的圆角格式，支持一种缩写方式</p> <h5 id="值支持类型-22"><a href="#值支持类型-22" class="header-anchor">#</a> 值支持类型</h5> <p>仅支持 border-radius 0px|border-radius 0px 0px 0px 0px（值以空格分隔按顺序赋值）
+number: px rpx %</p> <h5 id="语法-23"><a href="#语法-23" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* all */</span>
+<span class="token property">border-radius</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
+<span class="token comment">/* top-left | top-right | bottom-right | bottom-left */</span>
+<span class="token property">border-radius</span><span class="token punctuation">:</span> 10px 10px 10px 0<span class="token punctuation">;</span>
+</code></pre></div><h4 id="border-bottom-left-radius-border-bottom-right-radius-border-top-left-radius-border-top-right-radius"><a href="#border-bottom-left-radius-border-bottom-right-radius-border-top-left-radius-border-top-right-radius" class="header-anchor">#</a> border-bottom-left-radius|border-bottom-right-radius|border-top-left-radius|border-top-right-radius</h4> <h5 id="值支持类型-23"><a href="#值支持类型-23" class="header-anchor">#</a> 值支持类型</h5> <p>number: px rpx %</p> <h5 id="语法-24"><a href="#语法-24" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
+</code></pre></div><h3 id="text-style"><a href="#text-style" class="header-anchor">#</a> Text Style</h3> <h4 id="color"><a href="#color" class="header-anchor">#</a> color</h4> <h5 id="值支持类型-24"><a href="#值支持类型-24" class="header-anchor">#</a> 值支持类型</h5> <p>color: 参考<a href="https://reactnative.dev/docs/colors" target="_blank" rel="noopener noreferrer">Color<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="语法-25"><a href="#语法-25" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>
+<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
+<span class="token property">color</span><span class="token punctuation">:</span> #fafafa<span class="token punctuation">;</span>
+<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 99<span class="token punctuation">,</span> 71<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span>
+</code></pre></div><h4 id="font-family"><a href="#font-family" class="header-anchor">#</a> font-family</h4> <p>可设置系统字体，引入字体文件，暂时不支持。</p> <h5 id="值支持类型-25"><a href="#值支持类型-25" class="header-anchor">#</a> 值支持类型</h5> <p>string</p> <h5 id="语法-26"><a href="#语法-26" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;PingFangSC-Regular&quot;</span>
+</code></pre></div><h4 id="font-size"><a href="#font-size" class="header-anchor">#</a> font-size</h4> <p>可设置字体的大小</p> <h5 id="值支持类型-26"><a href="#值支持类型-26" class="header-anchor">#</a> 值支持类型</h5> <p>number: px,rpx</p> <h5 id="语法-27"><a href="#语法-27" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
+<span class="token property">font-size</span><span class="token punctuation">:</span> 12rpx<span class="token punctuation">;</span>
+</code></pre></div><h4 id="font-style"><a href="#font-style" class="header-anchor">#</a> font-style</h4> <p>设置文本的字体样式。</p> <h5 id="值支持类型-27"><a href="#值支持类型-27" class="header-anchor">#</a> 值支持类型</h5> <p>enum: normal，italic</p> <h5 id="语法-28"><a href="#语法-28" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span>
+<span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
+</code></pre></div><h4 id="font-weight"><a href="#font-weight" class="header-anchor">#</a> font-weight</h4> <p>设置文字的权重。</p> <h5 id="值支持类型-28"><a href="#值支持类型-28" class="header-anchor">#</a> 值支持类型</h5> <p>enum: 100，200，300，400，500，600，800，900,normal,bold</p> <h5 id="语法-29"><a href="#语法-29" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">font-weight</span><span class="token punctuation">:</span> 100<span class="token punctuation">;</span>
+<span class="token property">font-weight</span><span class="token punctuation">:</span> 200<span class="token punctuation">;</span>
+<span class="token property">font-weight</span><span class="token punctuation">:</span> 300<span class="token punctuation">;</span>
+<span class="token property">font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span>
+<span class="token property">font-weight</span><span class="token punctuation">:</span> 500<span class="token punctuation">;</span>
+<span class="token property">font-weight</span><span class="token punctuation">:</span> 600<span class="token punctuation">;</span>
+<span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span>
+<span class="token property">font-weight</span><span class="token punctuation">:</span> 800<span class="token punctuation">;</span>
+<span class="token property">font-weight</span><span class="token punctuation">:</span> 900<span class="token punctuation">;</span>
+
+<span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
+<span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
+</code></pre></div><h4 id="font-variant"><a href="#font-variant" class="header-anchor">#</a> font-variant</h4> <p>设置文本的字体变体</p> <h5 id="值支持类型-29"><a href="#值支持类型-29" class="header-anchor">#</a> 值支持类型</h5> <p>enum: small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums</p> <h5 id="语法-30"><a href="#语法-30" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">font-variant</span><span class="token punctuation">:</span> small-caps<span class="token punctuation">;</span>
+<span class="token property">font-variant</span><span class="token punctuation">:</span> oldstyle-nums<span class="token punctuation">;</span>
+<span class="token property">font-variant</span><span class="token punctuation">:</span> lining-nums<span class="token punctuation">;</span>
+<span class="token property">font-variant</span><span class="token punctuation">:</span> tabular-nums<span class="token punctuation">;</span>
+<span class="token property">font-variant</span><span class="token punctuation">:</span> lining-nums<span class="token punctuation">;</span>
+<span class="token property">font-variant</span><span class="token punctuation">:</span> proportional-nums<span class="token punctuation">;</span>
+</code></pre></div><h4 id="letter-spacing"><a href="#letter-spacing" class="header-anchor">#</a> letter-spacing</h4> <p>定义字符之间的间距</p> <h5 id="值支持类型-30"><a href="#值支持类型-30" class="header-anchor">#</a> 值支持类型</h5> <p>px,rpx</p> <h5 id="语法-31"><a href="#语法-31" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">letter-spacing</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
+<span class="token property">letter-spacing</span><span class="token punctuation">:</span> 2rpx<span class="token punctuation">;</span>
+</code></pre></div><h4 id="line-height"><a href="#line-height" class="header-anchor">#</a> line-height</h4> <p>设置行高。</p> <h5 id="值支持类型-31"><a href="#值支持类型-31" class="header-anchor">#</a> 值支持类型</h5> <p>px,rpx,%</p> <h5 id="语法-32"><a href="#语法-32" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">line-height</span><span class="token punctuation">:</span> 16px
+<span class="token property">line-height</span><span class="token punctuation">:</span> 16rpx
+<span class="token property">line-height</span><span class="token punctuation">:</span> 100%
+<span class="token property">line-height</span><span class="token punctuation">:</span> 1
+</code></pre></div><h4 id="text-align"><a href="#text-align" class="header-anchor">#</a> text-align</h4> <p>设置文本的水平对齐方式。</p> <h5 id="值支持类型-32"><a href="#值支持类型-32" class="header-anchor">#</a> 值支持类型</h5> <p>enum: left, right, center, justify</p> <h5 id="语法-33"><a href="#语法-33" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
+<span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
+<span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
+<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
+<span class="token property">text-align</span><span class="token punctuation">:</span> justify<span class="token punctuation">;</span>
+
+<span class="token comment">/** 不支持 **/</span>
+<span class="token property">text-align</span><span class="token punctuation">:</span> match-parent<span class="token punctuation">;</span>
+<span class="token property">text-align</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
+<span class="token property">text-align</span><span class="token punctuation">:</span> justify-all<span class="token punctuation">;</span>
+</code></pre></div><h4 id="text-decoration-line"><a href="#text-decoration-line" class="header-anchor">#</a> text-decoration-line</h4> <p>设置文本的装饰线样式。</p> <h5 id="值支持类型-33"><a href="#值支持类型-33" class="header-anchor">#</a> 值支持类型</h5> <p>enum: none, underline, line-through, underline line-through</p> <h5 id="语法-34"><a href="#语法-34" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
+<span class="token property">text-decoration-line</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
+<span class="token property">text-decoration-line</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
+<span class="token property">text-decoration-line</span><span class="token punctuation">:</span> line-through<span class="token punctuation">;</span>
+<span class="token property">text-decoration-line</span><span class="token punctuation">:</span> underline line-through<span class="token punctuation">;</span>
+
+<span class="token comment">/** 不支持 **/</span>
+<span class="token property">text-decoration-line</span><span class="token punctuation">:</span> overline<span class="token punctuation">;</span>
+</code></pre></div><h4 id="text-transform"><a href="#text-transform" class="header-anchor">#</a> text-transform</h4> <p>设置文本的大小写转换。</p> <h5 id="值支持类型-34"><a href="#值支持类型-34" class="header-anchor">#</a> 值支持类型</h5> <p>enum: none, uppercase, lowercase, capitalize</p> <h5 id="语法-35"><a href="#语法-35" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
+<span class="token property">text-transform</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
+<span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span>
+<span class="token property">text-transform</span><span class="token punctuation">:</span> lowercase<span class="token punctuation">;</span>
+<span class="token property">text-transform</span><span class="token punctuation">:</span> capitalize<span class="token punctuation">;</span>
+
+<span class="token comment">/** 不支持 **/</span>
+<span class="token property">text-transform</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
+<span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span>
+<span class="token property">text-transform</span><span class="token punctuation">:</span> lowercase<span class="token punctuation">;</span>
+<span class="token property">text-transform</span><span class="token punctuation">:</span> capitalize<span class="token punctuation">;</span>
+</code></pre></div><h4 id="text-shadow"><a href="#text-shadow" class="header-anchor">#</a> text-shadow</h4> <p>设置文本阴影</p> <h5 id="值支持类型-35"><a href="#值支持类型-35" class="header-anchor">#</a> 值支持类型</h5> <p>仅支持 offset-x | offset-y | blur-radius | color 排序，值以空格分隔按顺序赋值</p> <h5 id="语法-36"><a href="#语法-36" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">text-shadow</span><span class="token punctuation">:</span> 1rpx 3rpx 0 #2E0C02<span class="token punctuation">;</span>
+</code></pre></div><h3 id="background-style"><a href="#background-style" class="header-anchor">#</a> Background Style</h3> <p>背景相关的属性</p> <h4 id="background-color"><a href="#background-color" class="header-anchor">#</a> background-color</h4> <p>表示背景色，可以在任何标签上使用。</p> <h5 id="值支持类型-36"><a href="#值支持类型-36" class="header-anchor">#</a> 值支持类型</h5> <p>color: 参考<a href="https://reactnative.dev/docs/colors" target="_blank" rel="noopener noreferrer">Color<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="语法-37"><a href="#语法-37" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* all border */</span>
+<span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
+</code></pre></div><h4 id="background-image"><a href="#background-image" class="header-anchor">#</a> background-image</h4> <p>表示背景图，只能在view上使用</p> <h5 id="值支持类型-37"><a href="#值支持类型-37" class="header-anchor">#</a> 值支持类型</h5> <p>仅支持 &lt;url()&gt;</p> <h5 id="语法-38"><a href="#语法-38" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg&quot;</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
+
+<span class="token comment">/* 不支持 */</span>
+<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><h4 id="background-size"><a href="#background-size" class="header-anchor">#</a> background-size</h4> <p>表示背景大小，只能在view上使用</p> <h5 id="值支持类型-38"><a href="#值支持类型-38" class="header-anchor">#</a> 值支持类型</h5> <p>number 支持 px|rpx|%，枚举值支持 contain|cover|auto；
+支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto；
+支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度；
+不支持逗号分隔的多个值：设置多重背景!!!</p> <h5 id="语法-39"><a href="#语法-39" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 支持 */</span>
+<span class="token property">background-size</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
+<span class="token property">background-size</span><span class="token punctuation">:</span> 50% 25%<span class="token punctuation">;</span>
+<span class="token property">background-size</span><span class="token punctuation">:</span> contain<span class="token punctuation">;</span>
+<span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
+<span class="token property">background-size</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
+<span class="token property">background-size</span><span class="token punctuation">:</span> 20px auto<span class="token punctuation">;</span>
+
+/ * 不支持 * /
+<span class="token property">background-size</span><span class="token punctuation">:</span> 50%<span class="token punctuation">,</span> 25%<span class="token punctuation">,</span> 25%<span class="token punctuation">;</span>
+</code></pre></div><h4 id="background-repeat"><a href="#background-repeat" class="header-anchor">#</a> background-repeat</h4> <p>表示背景图是否重复，只能在view上使用</p> <h5 id="值支持类型-39"><a href="#值支持类型-39" class="header-anchor">#</a> 值支持类型</h5> <p>enum: no-repeat</p> <h5 id="语法-40"><a href="#语法-40" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
+
+<span class="token comment">/* 不支持 */</span>
+<span class="token property">background-repeat</span><span class="token punctuation">:</span> repeat<span class="token punctuation">;</span> 
+</code></pre></div><h4 id="background"><a href="#background" class="header-anchor">#</a> background</h4> <p>表示背景的组合属性，只能在view上使用</p> <h5 id="值支持类型-40"><a href="#值支持类型-40" class="header-anchor">#</a> 值支持类型</h5> <p>仅支持 background-image | background-color | background-size | background-repeat，具体每个属性的支持情况参见上面具体属性支持的文档</p> <h5 id="语法-41"><a href="#语法-41" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 支持 */</span>
+<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg&quot;</span><span class="token punctuation">)</span></span> pink no-repeat<span class="token punctuation">;</span>
+<span class="token property">background</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
+<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg&quot;</span><span class="token punctuation">)</span></span> pink<span class="token punctuation">;</span>
+
+<span class="token comment">/* 不支持 */</span>
+<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><h3 id="shadow-style"><a href="#shadow-style" class="header-anchor">#</a> Shadow Style</h3> <h4 id="box-shadow"><a href="#box-shadow" class="header-anchor">#</a> box-shadow</h4> <p>此属性是阴影颜色、阴影的偏移量</p> <h5 id="值支持类型-41"><a href="#值支持类型-41" class="header-anchor">#</a> 值支持类型</h5> <p>仅支持 offset-x | offset-y | blur-radius | color 排序，值以空格分隔按顺序赋值</p> <h5 id="语法-42"><a href="#语法-42" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* offset-x | offset-y | blur-radius | color */</span>
+<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 1px 3px <span class="token function">rgba</span><span class="token punctuation">(</span>139<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.32<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><h2 id="附录"><a href="#附录" class="header-anchor">#</a> 附录</h2> <h3 id="rn-不支持的属性"><a href="#rn-不支持的属性" class="header-anchor">#</a> RN 不支持的属性</h3> <p>若设置以下不支持的属性会被 mpx 编译处理时丢弃，有编译 error 提示</p> <table><thead><tr><th>描述</th> <th>不支持的属性</th></tr></thead> <tbody><tr><td>双端都不支持</td> <td>box-sizing white-space text-overflow animation transition</td></tr> <tr><td>ios 不支持</td> <td>vertical-align</td></tr> <tr><td>android 不支持</td> <td>text-decoration-style text-decoration-color shadow-offset shadow-opacity shadow-radius</td></tr></tbody></table> <h3 id="rn-支持的枚举值"><a href="#rn-支持的枚举值" class="header-anchor">#</a> RN 支持的枚举值</h3> <p>RN 支持的枚举值映射如下表，其他不支持的枚举值会被 mpx 编译处理时丢弃，设置无效</p> <table><thead><tr><th>prop</th> <th>value 枚举</th></tr></thead> <tbody><tr><td>overflow</td> <td>visible hidden scroll</td></tr> <tr><td>border-style</td> <td>solid dotted dashed</td></tr> <tr><td>display</td> <td>flex none</td></tr> <tr><td>pointer-events</td> <td>auto none</td></tr> <tr><td>position</td> <td>relative absolute</td></tr> <tr><td>vertical-align</td> <td>auto top bottom center</td></tr> <tr><td>font-variant</td> <td>small-caps oldstyle-nums lining-nums tabular-nums proportional-nums</td></tr> <tr><td>text-align</td> <td>left right center justify</td></tr> <tr><td>font-style</td> <td>normal italic</td></tr> <tr><td>font-weight</td> <td>normal bold 100-900</td></tr> <tr><td>text-decoration-line</td> <td>none underline line-through 'underline line-through'</td></tr> <tr><td>text-transform</td> <td>none uppercase lowercase capitalize</td></tr> <tr><td>user-select</td> <td>auto text none contain all</td></tr> <tr><td>align-content</td> <td>flex-start flex-end none center stretch space-between space-around</td></tr> <tr><td>align-items</td> <td>flex-start flex-end center stretch baseline</td></tr> <tr><td>align-self</td> <td>auto flex-start flex-end center stretch baseline</td></tr> <tr><td>justify-content</td> <td>flex-start flex-end center space-between space-around space-evenly none</td></tr> <tr><td>background-repeat</td> <td>no-repeat</td></tr></tbody></table> <h3 id="缩写支持"><a href="#缩写支持" class="header-anchor">#</a> 缩写支持</h3> <p>RN 仅支持部分常用的缩写形式，具体参加下表：</p> <table><thead><tr><th>缩写属性</th> <th>支持的缩写格式</th> <th>备注</th></tr></thead> <tbody><tr><td>text-decoration</td> <td>仅支持 text-decoration-line text-decoration-style text-decoration-color</td> <td>顺序固定，值以空格分隔后按按顺序赋值</td></tr> <tr><td>margin</td> <td>margin: 0;margin: 0 auto;margin: 0 auto 10px;margin: 0 10px 10px 20px;</td> <td>-</td></tr> <tr><td>padding</td> <td>padding: 0;padding: 0 auto;padding: 0 auto 10px;padding: 0 10px 10px 20px;</td> <td>-</td></tr> <tr><td>text-shadow</td> <td>仅支持 offset-x offset-y blur-radius color 排序</td> <td>顺序固定，值以空格分隔后按按顺序赋值</td></tr> <tr><td>border</td> <td>仅支持 border-width border-style border-color</td> <td>顺序固定，值以空格分隔后按按顺序赋值</td></tr> <tr><td>box-shadow</td> <td>仅支持 offset-x offset-y blur-radius color</td> <td>顺序固定，值以空格分隔后按按顺序赋值</td></tr> <tr><td>flex</td> <td>仅支持 flex-grow flex-shrink flex-basis</td> <td>顺序固定，值以空格分隔后按按顺序赋值</td></tr> <tr><td>flex-flow</td> <td>仅支持 flex-direction flex-wrap</td> <td>顺序固定，值以空格分隔后按按顺序赋值</td></tr> <tr><td>border-radius</td> <td>支持 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius</td> <td>顺序固定，值以空格分隔后按按顺序赋值；当设置 border-radius: 0 相当于同时设置了4个方向</td></tr> <tr><td>background</td> <td>仅支持 background-image  background-color background-repeat</td> <td>顺序不固定，具体每个属性的支持情况参见上面具体属性支持的文档；</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/118.9cbac09e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/rn-template.html b/docs-vuepress/.vuepress/dist/rn-template.html
new file mode 100644
index 0000000000..4881256db1
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/rn-template.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Mpx转RN模版使用指南 | Mpx框架</title>
+    <meta name="generator" content="VuePress 1.9.10">
+    <link rel="icon" href="/favicon.ico">
+    <script type="text/javascript">(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
+    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
+    
+    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/119.312e4c21.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
+    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container no-sidebar"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
+          指南
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
+          API
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
+          文章
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
+          更新记录
+          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
+          GitHub
+          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
+  指南
+</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
+  API
+</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
+  文章
+</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  更新记录
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
+  Github
+  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx转rn模版使用指南"><a href="#mpx转rn模版使用指南" class="header-anchor">#</a> Mpx转RN模版使用指南</h1> <h2 id="模版指令"><a href="#模版指令" class="header-anchor">#</a> 模版指令</h2> <p>目前 Mpx 输出 React Native 仅支持以下指令，具体使用范围可参考如下文档</p> <table><thead><tr><th>指令名</th> <th>说明</th></tr></thead> <tbody><tr><td>wx:if</td> <td>根据表达式的值的来有条件地渲染元素</td></tr> <tr><td>wx:elif</td> <td>根据表达式的值的来有条件地渲染元素，前一兄弟元素必须有 wx:if 或 wx:elif</td></tr> <tr><td>wx:else</td> <td>不需要表达式，前一兄弟元素必须有 wx:if 或 wx:elif</td></tr> <tr><td>wx:show</td> <td>根据表达式的值的来有条件地渲染元素，与 wx:if 所不同的是不会移除节点，而是设置节点的 style 为 display: none</td></tr> <tr><td>wx:style</td> <td>动态绑定 style 样式</td></tr> <tr><td>wx:class</td> <td>动态绑定 class 样式</td></tr> <tr><td>wx:for</td> <td>在组件上使用 wx:for 绑定一个数组，即可使数组中各项的数据重复渲染该组件</td></tr> <tr><td>wx:for-item</td> <td>指定数组当前元素的变量名</td></tr> <tr><td>wx:for-index</td> <td>指定数组当前下标的变量名</td></tr> <tr><td>wx:key</td> <td>指定列表中项目的唯一的标识符</td></tr> <tr><td>wx:ref</td> <td>获取节点信息</td></tr> <tr><td>mpxTagName</td> <td>动态转换标签</td></tr> <tr><td>component</td> <td>使用 component is 动态切换组件</td></tr> <tr><td>@mode</td> <td>使用 @ 符号来指定某个节点或属性只在某些平台下有效</td></tr> <tr><td>@_mode</td> <td>隐式属性条件编译，仅控制节点的展示，保留节点属性的平台转换能力</td></tr> <tr><td>@env</td> <td>自定义 env 目标应用，来实现在不同应用下编译产出不同的代码</td></tr></tbody></table> <h2 id="事件编写"><a href="#事件编写" class="header-anchor">#</a> 事件编写</h2> <p>目前 Mpx 输出 React Native 的事件编写遵循小程序的事件编写规范，支持事件的冒泡及捕获</p> <p>普通事件绑定</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view bindtap<span class="token operator">=</span><span class="token string">&quot;handleTap&quot;</span><span class="token operator">&gt;</span>
+    Click here<span class="token operator">!</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+</code></pre></div><p>绑定并阻止事件冒泡</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view catchtap<span class="token operator">=</span><span class="token string">&quot;handleTap&quot;</span><span class="token operator">&gt;</span>
+    Click here<span class="token operator">!</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+</code></pre></div><p>事件捕获</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view capture<span class="token operator">-</span>bind<span class="token operator">:</span>touchstart<span class="token operator">=</span><span class="token string">&quot;handleTap1&quot;</span><span class="token operator">&gt;</span>
+  outer view
+  <span class="token operator">&lt;</span>view capture<span class="token operator">-</span>bind<span class="token operator">:</span>touchstart<span class="token operator">=</span><span class="token string">&quot;handleTap2&quot;</span><span class="token operator">&gt;</span>
+    inner view
+  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+</code></pre></div><p>中断捕获阶段和取消冒泡阶段</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view capture<span class="token operator">-</span>catch<span class="token operator">:</span>touchstart<span class="token operator">=</span><span class="token string">&quot;handleTap1&quot;</span><span class="token operator">&gt;</span>
+  outer view
+<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
+
+</code></pre></div><p>在此基础上也新增了事件处理内联传参的增强机制。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token comment">&lt;!--Mpx增强语法，模板内联传参，方便简洁--&gt;</span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTapInline('b')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token comment">// 直接通过参数获取数据，直观方便</span>
+  <span class="token keyword">const</span> <span class="token function-variable function">handleTapInline</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'name:'</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span>
+  <span class="token punctuation">}</span>
+  <span class="token comment">// ...</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>除此之外，Mpx 也支持了动态事件绑定</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token comment">&lt;!--动态事件绑定--&gt;</span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{items}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap_{{index}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
+  {{item}}
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
+
+  <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Item 1'</span><span class="token punctuation">,</span> <span class="token string">'Item 2'</span><span class="token punctuation">,</span> <span class="token string">'Item 3'</span><span class="token punctuation">,</span> <span class="token string">'Item 4'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
+  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_0</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+
+  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_1</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+
+  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 3'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+
+  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_3</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 4'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><p>注意事项：</p> <p>当同一个元素上同时绑定了 catchtap 和 bindtap 事件时:</p> <p>两个事件都会被触发执行。
+但是是否阻止事件冒泡的行为,会以模板上第一个绑定的事件标识符为准。
+如果第一个绑定的是 catchtap，那么不管后面绑定的是什么,都会阻止事件冒泡。
+如果第一个绑定的是 bindtap，则不会阻止事件冒泡。</p> <p>同理,如果同一个元素上绑定了 capture-bind:tap 和 bindtap:</p> <p>事件的执行时机会根据模板上第一个绑定事件的标识符来决定:
+如果第一个绑定的是 capture-bind:tap，则事件会在捕获阶段触发。
+如果第一个绑定的是 bindtap，则事件会在冒泡阶段触发。</p> <h2 id="基础组件"><a href="#基础组件" class="header-anchor">#</a> 基础组件</h2> <p>目前 Mpx 输出 React Native 仅支持以下组件，具体使用范围可参考如下文档</p> <h3 id="view"><a href="#view" class="header-anchor">#</a> view</h3> <p>视图容器。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>hover-class</td> <td>string</td> <td></td> <td>指定按下去的样式类。</td></tr> <tr><td>hover-start-time</td> <td>number</td> <td>50</td> <td>按住后多久出现点击态，单位毫秒</td></tr> <tr><td>hover-stay-time</td> <td>number</td> <td>400</td> <td>手指松开后点击态保留时间，单位毫秒</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td>false</td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindtap</td> <td>点击的时候触发</td></tr></tbody></table> <h3 id="text"><a href="#text" class="header-anchor">#</a> text</h3> <p>文本。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>user-select</td> <td>boolean</td> <td><code>false</code></td> <td>文本是否可选。</td></tr> <tr><td>disable-default-style</td> <td>boolean</td> <td><code>false</code></td> <td>会内置默认样式，比如fontSize为16。设置<code>true</code>可以禁止默认的内置样式。</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td>false</td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindtap</td> <td>点击的时候触发</td></tr></tbody></table> <p>注意事项</p> <ol><li>未包裹 text 标签的文本，会自动包裹 text 标签。</li> <li>text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段</li></ol> <h3 id="image"><a href="#image" class="header-anchor">#</a> image</h3> <p>图片。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>src</td> <td>String</td> <td><code>false</code></td> <td>图片资源地址，支持本地图片资源及 base64 格式数据，暂不支持 svg 格式</td></tr> <tr><td>mode</td> <td>String</td> <td><code>scaleToFill</code></td> <td>图片裁剪、缩放的模式，适配微信 image 所有 mode 格式</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>binderror</td> <td>当错误发生时触发，event.detail = { errMsg }</td></tr> <tr><td>bindload</td> <td>当图片载入完毕时触发，event.detail = { height, width }</td></tr></tbody></table> <p>注意事项</p> <ol><li>image 组件默认宽度320px、高度240px</li> <li>image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分</li></ol> <h3 id="input"><a href="#input" class="header-anchor">#</a> input</h3> <p>输入框。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>输入框的初始内容</td></tr> <tr><td>type</td> <td>String</td> <td><code>text</code></td> <td>input 的类型，不支持 <code>safe-password</code>、<code>nickname</code></td></tr> <tr><td>password</td> <td>Boolean</td> <td><code>false</code></td> <td>是否是密码类型</td></tr> <tr><td>placeholder</td> <td>String</td> <td></td> <td>输入框为空时占位符</td></tr> <tr><td>placeholder-class</td> <td>String</td> <td></td> <td>指定 placeholder 的样式类，仅支持 color 属性</td></tr> <tr><td>placeholder-style</td> <td>String</td> <td></td> <td>指定 placeholder 的样式，仅支持 color 属性</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr> <tr><td>maxlength</td> <td>Number</td> <td><code>140</code></td> <td>最大输入长度，设置为 -1 的时候不限制最大长度</td></tr> <tr><td>auto-focus</td> <td>Boolean</td> <td><code>false</code></td> <td>(即将废弃，请直接使用 focus )自动聚焦，拉起键盘</td></tr> <tr><td>focus</td> <td>Boolean</td> <td><code>false</code></td> <td>获取焦点</td></tr> <tr><td>confirm-type</td> <td>String</td> <td><code>done</code></td> <td>设置键盘右下角按钮的文字，仅在 type='text' 时生效</td></tr> <tr><td>confirm-hold</td> <td>Boolean</td> <td><code>false</code></td> <td>点击键盘右下角按钮时是否保持键盘不收起</td></tr> <tr><td>cursor</td> <td>Number</td> <td></td> <td>指定 focus 时的光标位置</td></tr> <tr><td>cursor-color</td> <td>String</td> <td></td> <td>光标颜色</td></tr> <tr><td>selection-start</td> <td>Number</td> <td><code>-1</code></td> <td>光标起始位置，自动聚集时有效，需与 selection-end 搭配使用</td></tr> <tr><td>selection-end</td> <td>Number</td> <td><code>-1</code></td> <td>光标结束位置，自动聚集时有效，需与 selection-start 搭配使用</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindinput</td> <td>键盘输入时触发，event.detail = { value, cursor }，不支持 <code>keyCode</code></td></tr> <tr><td>bindfocus</td> <td>输入框聚焦时触发，event.detail = { value }，不支持 <code>height</code></td></tr> <tr><td>bindblur</td> <td>输入框失去焦点时触发，event.detail = { value }，不支持 <code>encryptedValue</code>、<code>encryptError</code></td></tr> <tr><td>bindconfirm</td> <td>点击完成按钮时触发，event.detail = { value }</td></tr> <tr><td>bind:selectionchange</td> <td>选区改变事件, event.detail = { selectionStart, selectionEnd }</td></tr></tbody></table> <p>方法</p> <p>可通过 <code>ref</code> 方式调用以下组件实例方法</p> <table><thead><tr><th>方法名</th> <th>说明</th></tr></thead> <tbody><tr><td>focus</td> <td>使输入框得到焦点</td></tr> <tr><td>blur</td> <td>使输入框失去焦点</td></tr> <tr><td>clear</td> <td>清空输入框的内容</td></tr> <tr><td>isFocused</td> <td>返回值表明当前输入框是否获得了焦点</td></tr></tbody></table> <h3 id="textarea"><a href="#textarea" class="header-anchor">#</a> textarea</h3> <p>多行输入框。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>输入框内容</td></tr> <tr><td>type</td> <td>String</td> <td><code>text</code></td> <td>input 的类型，不支持 <code>safe-password</code>、<code>nickname</code></td></tr> <tr><td>placeholder</td> <td>String</td> <td></td> <td>输入框为空时占位符</td></tr> <tr><td>placeholder-class</td> <td>String</td> <td></td> <td>指定 placeholder 的样式类，仅支持 color 属性</td></tr> <tr><td>placeholder-style</td> <td>String</td> <td></td> <td>指定 placeholder 的样式，仅支持 color 属性</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr> <tr><td>maxlength</td> <td>Number</td> <td><code>140</code></td> <td>最大输入长度，设置为 -1 的时候不限制最大长度</td></tr> <tr><td>auto-focus</td> <td>Boolean</td> <td><code>false</code></td> <td>(即将废弃，请直接使用 focus )自动聚焦，拉起键盘</td></tr> <tr><td>focus</td> <td>Boolean</td> <td><code>false</code></td> <td>获取焦点</td></tr> <tr><td>auto-height</td> <td>Boolean</td> <td><code>false</code></td> <td>是否自动增高，设置 auto-height 时，style.height不生效</td></tr> <tr><td>confirm-type</td> <td>String</td> <td><code>done</code></td> <td>设置键盘右下角按钮的文字，不支持 <code>return</code></td></tr> <tr><td>confirm-hold</td> <td>Boolean</td> <td><code>false</code></td> <td>点击键盘右下角按钮时是否保持键盘不收起</td></tr> <tr><td>cursor</td> <td>Number</td> <td></td> <td>指定 focus 时的光标位置</td></tr> <tr><td>cursor-color</td> <td>String</td> <td></td> <td>光标颜色</td></tr> <tr><td>selection-start</td> <td>Number</td> <td><code>-1</code></td> <td>光标起始位置，自动聚集时有效，需与 selection-end 搭配使用</td></tr> <tr><td>selection-end</td> <td>Number</td> <td><code>-1</code></td> <td>光标结束位置，自动聚集时有效，需与 selection-start 搭配使用</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindinput</td> <td>键盘输入时触发，event.detail = { value, cursor }，不支持 <code>keyCode</code></td></tr> <tr><td>bindfocus</td> <td>输入框聚焦时触发，event.detail = { value }，不支持 <code>height</code></td></tr> <tr><td>bindblur</td> <td>输入框失去焦点时触发，event.detail = { value }，不支持 <code>encryptedValue</code>、<code>encryptError</code></td></tr> <tr><td>bindconfirm</td> <td>点击完成按钮时触发，event.detail = { value }</td></tr> <tr><td>bindlinechange</td> <td>输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 <code>heightRpx</code></td></tr> <tr><td>bind:selectionchange</td> <td>选区改变事件, {selectionStart, selectionEnd}</td></tr></tbody></table> <p>方法</p> <p>可通过 <code>ref</code> 方式调用以下组件实例方法</p> <table><thead><tr><th>方法名</th> <th>说明</th></tr></thead> <tbody><tr><td>focus</td> <td>使输入框得到焦点</td></tr> <tr><td>blur</td> <td>使输入框失去焦点</td></tr> <tr><td>clear</td> <td>清空输入框的内容</td></tr> <tr><td>isFocused</td> <td>返回值表明当前输入框是否获得了焦点</td></tr></tbody></table> <h3 id="button"><a href="#button" class="header-anchor">#</a> button</h3> <p>按钮。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>size</td> <td>String</td> <td><code>default</code></td> <td>按钮的大小</td></tr> <tr><td>type</td> <td>String</td> <td><code>default</code></td> <td>按钮的样式类型</td></tr> <tr><td>plain</td> <td>Boolean</td> <td><code>false</code></td> <td>按钮是否镂空，背景色透明</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr> <tr><td>loading</td> <td>Boolean</td> <td><code>false</code></td> <td>名称前是否带 loading 图标</td></tr> <tr><td>open-type</td> <td>String</td> <td></td> <td>微信开放能力，当前仅支持 <code>share</code></td></tr> <tr><td>hover-class</td> <td>String</td> <td></td> <td>指定按钮按下去的样式类。当 hover-class=&quot;none&quot; 时，没有点击态效果</td></tr> <tr><td>hover-start-time</td> <td>Number</td> <td><code>20</code></td> <td>按住后多久出现点击态，单位毫秒</td></tr> <tr><td>hover-stay-time</td> <td>Number</td> <td><code>70</code></td> <td>手指松开后点击态保留时间，单位毫秒</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <h3 id="scroll-view"><a href="#scroll-view" class="header-anchor">#</a> scroll-view</h3> <p>可滚动视图区域。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>scroll-x</td> <td>Boolean</td> <td><code>false</code></td> <td>允许横向滚动动</td></tr> <tr><td>scroll-y</td> <td>Boolean</td> <td><code>false</code></td> <td>允许纵向滚动</td></tr> <tr><td>upper-threshold</td> <td>Number</td> <td><code>50</code></td> <td>距顶部/左边多远时(单位 px),触发 scrolltoupper 事件</td></tr> <tr><td>lower-threshold</td> <td>Number</td> <td><code>50</code></td> <td>距底部/右边多远时(单位 px),触发 scrolltolower 事件</td></tr> <tr><td>scroll-top</td> <td>Number</td> <td><code>0</code></td> <td>设置纵向滚动条位置</td></tr> <tr><td>scroll-left</td> <td>Number</td> <td><code>0</code></td> <td>设置横向滚动条位置</td></tr> <tr><td>scroll-with-animation</td> <td>Boolean</td> <td><code>false</code></td> <td>在设置滚动条位置时使用动画过渡</td></tr> <tr><td>enable-back-to-top</td> <td>Boolean</td> <td><code>false</code></td> <td>点击状态栏的时候视图会滚动到顶部</td></tr> <tr><td>enhanced</td> <td>Boolean</td> <td><code>false</code></td> <td>scroll-view 组件功能增强</td></tr> <tr><td>refresher-enabled</td> <td>Boolean</td> <td><code>false</code></td> <td>开启自定义下拉刷新</td></tr> <tr><td>scroll-anchoring</td> <td>Boolean</td> <td><code>false</code></td> <td>开启滚动区域滚动锚点</td></tr> <tr><td>refresher-default-style</td> <td>String</td> <td><code>'black'</code></td> <td>设置下拉刷新默认样式,支持 <code>black</code>、<code>white</code>、<code>none</code>，仅安卓支持</td></tr> <tr><td>refresher-background</td> <td>String</td> <td><code>'#fff'</code></td> <td>设置自定义下拉刷新背景颜色，仅安卓支持</td></tr> <tr><td>refresher-triggered</td> <td>Boolean</td> <td><code>false</code></td> <td>设置当前下拉刷新状态,true 表示已触发</td></tr> <tr><td>paging-enabled</td> <td>Number</td> <td><code>false</code></td> <td>分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置</td></tr> <tr><td>show-scrollbar</td> <td>Number</td> <td><code>true</code></td> <td>滚动条显隐控制 (同时开启 enhanced 属性后生效)</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>binddragstart</td> <td>滑动开始事件，同时开启 enhanced 属性后生效</td></tr> <tr><td>binddragging</td> <td>滑动事件，同时开启 enhanced 属性后生效</td></tr> <tr><td>binddragend</td> <td>滑动结束事件，同时开启 enhanced 属性后生效</td></tr> <tr><td>bindscrolltoupper</td> <td>滚动到顶部/左边触发</td></tr> <tr><td>bindscrolltolower</td> <td>滚动到底部/右边触发</td></tr> <tr><td>bindscroll</td> <td>滚动时触发</td></tr> <tr><td>bindrefresherrefresh</td> <td>自定义下拉刷新被触发</td></tr></tbody></table> <p>注意事项</p> <ol><li>目前不支持自定义下拉刷新节点，使用 slot=&quot;refresher&quot; 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来</li></ol> <h3 id="swiper"><a href="#swiper" class="header-anchor">#</a> swiper</h3> <p>滑块视图容器。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>indicator-dots</td> <td>Boolean</td> <td><code>false</code></td> <td>是否显示面板指示点</td></tr> <tr><td>indicator-color</td> <td>color</td> <td><code>rgba(0, 0, 0, .3)</code></td> <td>指示点颜色</td></tr> <tr><td>indicator-active-color</td> <td>color</td> <td><code>#000000</code></td> <td>当前选中的指示点颜色</td></tr> <tr><td>autoplay</td> <td>Boolean</td> <td><code>false</code></td> <td>是否自动切换</td></tr> <tr><td>current</td> <td>Number</td> <td><code>0</code></td> <td>当前所在滑块的 index</td></tr> <tr><td>interval</td> <td>Number</td> <td><code>5000</code></td> <td>自动切换时间间隔</td></tr> <tr><td>duration</td> <td>Number</td> <td><code>500</code></td> <td>滑动动画时长</td></tr> <tr><td>circular</td> <td>Boolean</td> <td><code>false</code></td> <td>是否采用衔接滑动</td></tr> <tr><td>vertical</td> <td>Boolean</td> <td><code>false</code></td> <td>滑动方向是否为纵向</td></tr> <tr><td>previous-margin</td> <td>String</td> <td><code>0</code></td> <td>前边距，可用于露出前一项的一小部分，接受px</td></tr> <tr><td>next-margin</td> <td>String</td> <td><code>0</code></td> <td>后边距，可用于露出后一项的一小部分，接受px</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>current 改变时会触发 change 事件，event.detail = {current, source}</td></tr></tbody></table> <h3 id="swiper-item"><a href="#swiper-item" class="header-anchor">#</a> swiper-item</h3> <ol><li>仅可放置在swiper组件中，宽高自动设置为100%。</li></ol> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>item-id</td> <td>string</td> <td><code>无</code></td> <td>该 swiper-item 的标识符</td></tr></tbody></table> <h3 id="checkbox"><a href="#checkbox" class="header-anchor">#</a> checkbox</h3> <p>多选项目</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td>false</td> <td>是否禁用</td></tr> <tr><td>checked</td> <td>Boolean</td> <td>false</td> <td>当前是否选中，可用来设置默认选中</td></tr> <tr><td>color</td> <td>String</td> <td>#09BB07</td> <td>checkbox的颜色，同css的color</td></tr></tbody></table> <h3 id="checkbox-group"><a href="#checkbox-group" class="header-anchor">#</a> checkbox-group</h3> <p>多项选择器，内部由多个checkbox组成。</p> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }</td></tr></tbody></table> <h3 id="radio"><a href="#radio" class="header-anchor">#</a> radio</h3> <p>单选项目</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>radio 标识，当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td>false</td> <td>是否禁用</td></tr> <tr><td>checked</td> <td>Boolean</td> <td>false</td> <td>当前是否选中，可用来设置默认选中</td></tr> <tr><td>color</td> <td>String</td> <td>#09BB07</td> <td>checkbox 的颜色，同 css 的 color</td></tr></tbody></table> <h3 id="radio-group"><a href="#radio-group" class="header-anchor">#</a> radio-group</h3> <p>单项选择器，内部由多个 radio 组成</p> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>radio-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 radio 的 value 的数组 ] }</td></tr></tbody></table> <h3 id="label"><a href="#label" class="header-anchor">#</a> label</h3> <p>用来改进表单组件的可用性</p> <p>注意事项</p> <ol><li>当前不支持使用 for 属性找到对应 id，仅支持将控件放在该标签内，目前可以绑定的空间有：checkbox、radio、switch。</li></ol> <h3 id="icon"><a href="#icon" class="header-anchor">#</a> icon</h3> <p>图标组件</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>type</td> <td>String</td> <td></td> <td>icon 的类型，有效值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear</td></tr> <tr><td>size</td> <td>String | Number</td> <td>23</td> <td>icon 的大小</td></tr> <tr><td>color</td> <td>String</td> <td></td> <td>icon 的颜色，同 css 的 color</td></tr></tbody></table> <h3 id="movable-area"><a href="#movable-area" class="header-anchor">#</a> movable-area</h3> <p>movable-view的可移动区域。</p> <p>注意事项</p> <ol><li>movable-area不支持设置 scale-area，缩放手势生效区域仅在 movable-view 内</li></ol> <h3 id="movable-view"><a href="#movable-view" class="header-anchor">#</a> movable-view</h3> <p>可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>direction</td> <td>String</td> <td>none</td> <td>目前支持 all、vertical、horizontal、none｜</td></tr> <tr><td>x</td> <td>Number</td> <td></td> <td>定义x轴方向的偏移</td></tr> <tr><td>y</td> <td>Number</td> <td></td> <td>定义y轴方向的偏移</td></tr> <tr><td>friction</td> <td>Number</td> <td>7</td> <td>摩擦系数</td></tr> <tr><td>disabled</td> <td>boolean</td> <td>false</td> <td>是否禁用</td></tr> <tr><td>scale</td> <td>boolean</td> <td>false</td> <td>是否支持双指缩放</td></tr> <tr><td>scale-min</td> <td>Number</td> <td>0.1</td> <td>定义缩放倍数最小值</td></tr> <tr><td>scale-max</td> <td>Number</td> <td>10</td> <td>定义缩放倍数最大值</td></tr> <tr><td>scale-value</td> <td>Number</td> <td>1</td> <td>定义缩放倍数，取值范围为 0.1 - 10</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>拖动过程中触发的事件，event.detail = {x, y, source}</td></tr> <tr><td>bindscale</td> <td>缩放过程中触发的事件，event.detail = {x, y, scale}</td></tr> <tr><td>htouchmove</td> <td>初次手指触摸后移动为横向的移动时触发</td></tr> <tr><td>vtouchmove</td> <td>初次手指触摸后移动为纵向的移动时触发</td></tr></tbody></table> <h3 id="form"><a href="#form" class="header-anchor">#</a> form</h3> <p>表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。</p> <p>当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。</p> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindsubmit</td> <td>携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} }</td></tr> <tr><td>bindreset</td> <td>表单重置时会触发 reset 事件</td></tr></tbody></table> <h3 id="cover-view"><a href="#cover-view" class="header-anchor">#</a> cover-view</h3> <p>视图容器。
+功能同 view 组件</p> <h3 id="cover-image"><a href="#cover-image" class="header-anchor">#</a> cover-image</h3> <p>视图容器。
+功能同 image 组件
+| bindchange      | 滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）|</p> <h3 id="picker-view"><a href="#picker-view" class="header-anchor">#</a> picker-view</h3> <p>嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>Array[number]</td> <td><code>false</code></td> <td>数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }</td></tr></tbody></table> <h3 id="picker-view-column"><a href="#picker-view-column" class="header-anchor">#</a> picker-view-column</h3> <p>滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致</p> <h3 id="picker"><a href="#picker" class="header-anchor">#</a> picker</h3> <p>从底部弹起的滚动选择器。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>mode</td> <td>string</td> <td><code>selector</code></td> <td>选择器类型</td></tr> <tr><td>disabled</td> <td>boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr></tbody></table> <p>公共事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindcancel</td> <td>取消选择时触发</td></tr> <tr><td>bindchange</td> <td>滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）</td></tr></tbody></table> <h4 id="普通选择器-mode-selector"><a href="#普通选择器-mode-selector" class="header-anchor">#</a> 普通选择器：mode = selector</h4> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>range</td> <td>array[object]/array</td> <td><code>[]</code></td> <td>mode 为 selector 或 multiSelector 时，range 有效</td></tr> <tr><td>range-key</td> <td>string</td> <td><code>false</code></td> <td>当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容</td></tr> <tr><td>value</td> <td>number</td> <td>0</td> <td>表示选择了 range 中的第几个（下标从 0 开始）</td></tr></tbody></table> <h4 id="多列选择器-mode-multiselector"><a href="#多列选择器-mode-multiselector" class="header-anchor">#</a> 多列选择器：mode = multiSelector</h4> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>range</td> <td>array[object]/array</td> <td><code>[]</code></td> <td>mode 为 selector 或 multiSelector 时，range 有效</td></tr> <tr><td>range-key</td> <td>string</td> <td><code>false</code></td> <td>当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容</td></tr> <tr><td>value</td> <td>array</td> <td><code>[]</code></td> <td>表示选择了 range 中的第几个（下标从 0 开始）</td></tr> <tr><td>bindcolumnchange</td> <td></td> <td></td> <td>列改变时触发</td></tr></tbody></table> <h4 id="多列选择器-时间选择器-mode-time"><a href="#多列选择器-时间选择器-mode-time" class="header-anchor">#</a> 多列选择器：时间选择器：mode = time</h4> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>string</td> <td><code>[]</code></td> <td>表示选中的时间，格式为&quot;hh:mm&quot;</td></tr> <tr><td>start</td> <td>string</td> <td><code>false</code></td> <td>表示有效时间范围的开始，字符串格式为&quot;hh:mm&quot;</td></tr> <tr><td>end</td> <td>string</td> <td><code>[]</code></td> <td>表示有效时间范围的结束，字符串格式为&quot;hh:mm&quot;</td></tr></tbody></table> <h4 id="多列选择器-时间选择器-mode-date"><a href="#多列选择器-时间选择器-mode-date" class="header-anchor">#</a> 多列选择器：时间选择器：mode = date</h4> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>string</td> <td><code>当天</code></td> <td>表示选中的日期，格式为&quot;YYYY-MM-DD&quot;</td></tr> <tr><td>start</td> <td>string</td> <td><code>false</code></td> <td>表示有效日期范围的开始，字符串格式为&quot;YYYY-MM-DD&quot;</td></tr> <tr><td>end</td> <td>string</td> <td><code>[]</code></td> <td>表示有效日期范围的结束，字符串格式为&quot;YYYY-MM-DD&quot;</td></tr> <tr><td>fields</td> <td>string</td> <td><code>day</code></td> <td>有效值 year,month,day，表示选择器的粒度</td></tr></tbody></table> <h4 id="fields-有效值"><a href="#fields-有效值" class="header-anchor">#</a> fields 有效值：</h4> <table><thead><tr><th>属性名</th> <th>说明</th></tr></thead> <tbody><tr><td>year</td> <td>选择器粒度为年</td></tr> <tr><td>month</td> <td>选择器粒度为月份</td></tr> <tr><td>day</td> <td>选择器粒度为天</td></tr></tbody></table> <h3 id="省市区选择器：mode-region"><a href="#省市区选择器：mode-region" class="header-anchor">#</a> 省市区选择器：mode = region</h3> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>array</td> <td><code>[]</code></td> <td>表示选中的省市区，默认选中每一列的第一个值</td></tr> <tr><td>custom-item</td> <td>string</td> <td></td> <td>可为每一列的顶部添加一个自定义的项</td></tr> <tr><td>level</td> <td>string</td> <td><code>region</code></td> <td>选择器层级</td></tr></tbody></table> <h4 id="level-有效值"><a href="#level-有效值" class="header-anchor">#</a> level 有效值：</h4> <table><thead><tr><th>属性名</th> <th>说明</th></tr></thead> <tbody><tr><td>province</td> <td>选省级选择器</td></tr> <tr><td>city</td> <td>市级选择器</td></tr> <tr><td>region</td> <td>区级选择器</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
+    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/119.312e4c21.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
+  </body>
+</html>
diff --git a/docs-vuepress/.vuepress/dist/service-worker.js b/docs-vuepress/.vuepress/dist/service-worker.js
new file mode 100644
index 0000000000..3fcd8056f9
--- /dev/null
+++ b/docs-vuepress/.vuepress/dist/service-worker.js
@@ -0,0 +1,901 @@
+/**
+ * Welcome to your Workbox-powered service worker!
+ *
+ * You'll need to register this file in your web app and you should
+ * disable HTTP caching for this file too.
+ * See https://goo.gl/nhQhGp
+ *
+ * The rest of the code is auto-generated. Please don't update this file
+ * directly; instead, make changes to your Workbox build configuration
+ * and re-run your build process.
+ * See https://goo.gl/2aRDsh
+ */
+
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
+
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [
+  {
+    "url": "404.html",
+    "revision": "5b00337f21832bd4573ba6c98bedacb4"
+  },
+  {
+    "url": "api/ApiIndex.html",
+    "revision": "f5736e201b8355b58c4a3127475e6757"
+  },
+  {
+    "url": "api/app-config.html",
+    "revision": "73b3f4c261fc6ad75418f21d0f696b62"
+  },
+  {
+    "url": "api/builtIn.html",
+    "revision": "e854e0ad752129084b0de9d2a9b692fd"
+  },
+  {
+    "url": "api/compile.html",
+    "revision": "5eb3d7fe5d6193c15061bcca578def13"
+  },
+  {
+    "url": "api/composition-api.html",
+    "revision": "70dccb11a976b0321ae6c6df8cbccf83"
+  },
+  {
+    "url": "api/directives.html",
+    "revision": "39ac7af3ed7a9131d4dad8bbda934d5e"
+  },
+  {
+    "url": "api/extend.html",
+    "revision": "67026f94a9c9fb2b42094426f6157048"
+  },
+  {
+    "url": "api/global-api.html",
+    "revision": "33d7c25d85ca74401645e05f2e5990f1"
+  },
+  {
+    "url": "api/index.html",
+    "revision": "a0bb36716602184632c2781156f0256e"
+  },
+  {
+    "url": "api/instance-api.html",
+    "revision": "2999969ec01f4b0893d81a7c810e05f7"
+  },
+  {
+    "url": "api/optional-api.html",
+    "revision": "52cf38d179e9e86b426fe9c31b758659"
+  },
+  {
+    "url": "api/reactivity-api.html",
+    "revision": "a580e6086de61b32a4442ff42d8e6caa"
+  },
+  {
+    "url": "api/store-api.html",
+    "revision": "fc79ec11f5b437574ee9c0d3f0b51a36"
+  },
+  {
+    "url": "articles/1.0.html",
+    "revision": "c7408bac5c637d07a68bd9f1e0579d47"
+  },
+  {
+    "url": "articles/2.0.html",
+    "revision": "89411f8727853b0ad8db88d46d2f92d0"
+  },
+  {
+    "url": "articles/2.7-release.html",
+    "revision": "36f589577d67385b01da5b910e5e4f43"
+  },
+  {
+    "url": "articles/2.8-release-alter.html",
+    "revision": "c7c41c65d2fcc7577004ce04712d5e46"
+  },
+  {
+    "url": "articles/2.8-release.html",
+    "revision": "c968dd0160e52f569d8a35f6978c22cb"
+  },
+  {
+    "url": "articles/2.9-release-alter.html",
+    "revision": "842d2cf8a91c896bf46ff406a900951e"
+  },
+  {
+    "url": "articles/2.9-release.html",
+    "revision": "7714799727658659001df91df0ab765d"
+  },
+  {
+    "url": "articles/index.html",
+    "revision": "28e08a2249444d784e1b13e59cb8e0ba"
+  },
+  {
+    "url": "articles/mpx-cli-next.html",
+    "revision": "9edaa671d20c5721ade80295c5487d9a"
+  },
+  {
+    "url": "articles/mpx-cube-ui.html",
+    "revision": "339facb42ee86b3f21cbf22195f0ea7c"
+  },
+  {
+    "url": "articles/mpx1.html",
+    "revision": "b09e8d522bf61190a9b2cf2c77b1c9e9"
+  },
+  {
+    "url": "articles/mpx2.html",
+    "revision": "628254e250ec236cfc816e2f6dcd3098"
+  },
+  {
+    "url": "articles/performance.html",
+    "revision": "62339e70fe8371692b301f390ece7791"
+  },
+  {
+    "url": "articles/size-control.html",
+    "revision": "8256646d0a2da95674f4f7deab424781"
+  },
+  {
+    "url": "articles/ts-derivation.html",
+    "revision": "15a7473ded3bb895564dce5ebb866f76"
+  },
+  {
+    "url": "articles/unit-test.html",
+    "revision": "2b5854814775bb3f12b5f87cd3807433"
+  },
+  {
+    "url": "assets/css/0.styles.f22478ca.css",
+    "revision": "20c20b6924c0d21c3946c0c2f73e3852"
+  },
+  {
+    "url": "assets/img/search.83621669.svg",
+    "revision": "83621669651b9a3d4bf64d1a670ad856"
+  },
+  {
+    "url": "assets/img/start-tips1.3b76ac97.png",
+    "revision": "3b76ac977e543ae853c79f5fb4bf648d"
+  },
+  {
+    "url": "assets/img/start-tips2.7d8836f8.png",
+    "revision": "7d8836f8026aa7e1813ec450276d21ad"
+  },
+  {
+    "url": "assets/js/1.4f7abe8f.js",
+    "revision": "12b0c0887ef86bb29d29e515a8254df4"
+  },
+  {
+    "url": "assets/js/10.0192acce.js",
+    "revision": "2e489bb3c3e4db7eb021df8227a78d17"
+  },
+  {
+    "url": "assets/js/100.f31ffd06.js",
+    "revision": "5204b3c7795a10953cdf3e4715daaeec"
+  },
+  {
+    "url": "assets/js/101.283d0363.js",
+    "revision": "a02fdbbcd800637e2e923ae5ce3f526f"
+  },
+  {
+    "url": "assets/js/102.094a0a16.js",
+    "revision": "c6084875d5966ca473c712a0c8eb8592"
+  },
+  {
+    "url": "assets/js/103.b34f6752.js",
+    "revision": "385380e54f276b92c30b8c769eb3500f"
+  },
+  {
+    "url": "assets/js/104.78f6358e.js",
+    "revision": "eeeb9573bb2e751a7efcf7b866d559a4"
+  },
+  {
+    "url": "assets/js/105.eb6680fc.js",
+    "revision": "fbbf2d50f5f790400258587ca7d319ab"
+  },
+  {
+    "url": "assets/js/106.471f03cf.js",
+    "revision": "3a2b07fdde55595e53ee58f20d93fb35"
+  },
+  {
+    "url": "assets/js/107.63fd18fd.js",
+    "revision": "8e1580b610cbe287488f9dc6a17c21a0"
+  },
+  {
+    "url": "assets/js/108.614260e9.js",
+    "revision": "960d17597536a94c9f465c1f183470ad"
+  },
+  {
+    "url": "assets/js/109.3da50cc1.js",
+    "revision": "85bb938489ee7bdb469106adf4520d52"
+  },
+  {
+    "url": "assets/js/11.d7a8d045.js",
+    "revision": "9bc45c1f6e30baa42b6f61119767b063"
+  },
+  {
+    "url": "assets/js/110.f74ff3a3.js",
+    "revision": "8b75f04fbf04424cc6c55c9f2dbec4a7"
+  },
+  {
+    "url": "assets/js/111.51932e54.js",
+    "revision": "08920579c78da19f6afbc656719be751"
+  },
+  {
+    "url": "assets/js/112.da7bd3e7.js",
+    "revision": "fe8d576cf790411d588601fae4414b03"
+  },
+  {
+    "url": "assets/js/113.caaf11a3.js",
+    "revision": "414f18602138c0fb69fb8e493d5659dd"
+  },
+  {
+    "url": "assets/js/114.16cda7ac.js",
+    "revision": "a50fb0cd876585fa9a81503bfee109f9"
+  },
+  {
+    "url": "assets/js/115.88124b12.js",
+    "revision": "3440d45dc5afd506ea94fd2159c1b733"
+  },
+  {
+    "url": "assets/js/116.4a116234.js",
+    "revision": "77eb5727ecdf8abd544ab6180852ab0a"
+  },
+  {
+    "url": "assets/js/117.e45c1b95.js",
+    "revision": "22697b9821bf9d90ef8542c9f525bc4f"
+  },
+  {
+    "url": "assets/js/118.9cbac09e.js",
+    "revision": "2ee13a56a4d9163596caa0d4c599d268"
+  },
+  {
+    "url": "assets/js/119.312e4c21.js",
+    "revision": "00e5ef4ca7025684be01fd3aefee9bdc"
+  },
+  {
+    "url": "assets/js/12.4d7217be.js",
+    "revision": "cf2ee26c47e0f0d7ee3f2bda3d92cf40"
+  },
+  {
+    "url": "assets/js/120.7a6b4035.js",
+    "revision": "7967e6835f248a74746ab0aa147c5177"
+  },
+  {
+    "url": "assets/js/14.7377c68f.js",
+    "revision": "b7514f8cb2d06cdaf18d71594d346192"
+  },
+  {
+    "url": "assets/js/15.6f885a83.js",
+    "revision": "40c60e1604dfac53cae641e598daf156"
+  },
+  {
+    "url": "assets/js/16.974f551e.js",
+    "revision": "df88e248621a7536527b6a547143dc57"
+  },
+  {
+    "url": "assets/js/17.e94e6745.js",
+    "revision": "afe65725c62091da4210e3c489f993f6"
+  },
+  {
+    "url": "assets/js/18.b1f7a4a2.js",
+    "revision": "2746cf3eaba809a8792ab8e911b6e6b1"
+  },
+  {
+    "url": "assets/js/19.62186e92.js",
+    "revision": "2e5228047eaba20f8fcc067431adb2a4"
+  },
+  {
+    "url": "assets/js/2.314c65b9.js",
+    "revision": "b8cf0e72859eb5f0e3fb7f67d27ef340"
+  },
+  {
+    "url": "assets/js/20.e9cd4de3.js",
+    "revision": "0045f2d19fe78531ce98e2db9aa6bdd5"
+  },
+  {
+    "url": "assets/js/21.217f8fa9.js",
+    "revision": "bd130990daa769d2fb63d19c19c31932"
+  },
+  {
+    "url": "assets/js/22.4cd3344f.js",
+    "revision": "db69d7654880d9f1c64373d171c787b6"
+  },
+  {
+    "url": "assets/js/23.365f9a87.js",
+    "revision": "cd54b4361286190f19e5c3067303c425"
+  },
+  {
+    "url": "assets/js/24.17777a13.js",
+    "revision": "eb0f29a4f257f591178f6201882b8298"
+  },
+  {
+    "url": "assets/js/25.889c07d7.js",
+    "revision": "5a964529d1992e5ecbe2f545980ee947"
+  },
+  {
+    "url": "assets/js/26.3aa9f276.js",
+    "revision": "03b8f1eb7e4dbebe65672c17914db693"
+  },
+  {
+    "url": "assets/js/27.1a35170a.js",
+    "revision": "7d5ed813bbe766a1748a0f21ee5569d8"
+  },
+  {
+    "url": "assets/js/28.3670fa46.js",
+    "revision": "6e3c125eaf27c095cad1d77637e4e80f"
+  },
+  {
+    "url": "assets/js/29.a911e510.js",
+    "revision": "363f3beef26a3abf2161c7e1278cfcae"
+  },
+  {
+    "url": "assets/js/3.145e69cd.js",
+    "revision": "1a153ade78a92885e52f897ec87c1c3e"
+  },
+  {
+    "url": "assets/js/30.04d1a7ea.js",
+    "revision": "578f318e24529539c775d12d5436fca8"
+  },
+  {
+    "url": "assets/js/31.ec06bf2f.js",
+    "revision": "00a3a86bdd7caad32fa0eec96cf4698a"
+  },
+  {
+    "url": "assets/js/32.f29d2cd1.js",
+    "revision": "7d811f0e993fbee6e7c7d6800f830839"
+  },
+  {
+    "url": "assets/js/33.936d018e.js",
+    "revision": "2714336439729f02460fbcd2af4a7c5c"
+  },
+  {
+    "url": "assets/js/34.f494d685.js",
+    "revision": "3f1099fca4eff5ef8e62348425a3e7ff"
+  },
+  {
+    "url": "assets/js/35.c3ed1ff7.js",
+    "revision": "8f836b9e9e2107c4c281203b190ef9a8"
+  },
+  {
+    "url": "assets/js/36.d2c9afa9.js",
+    "revision": "fe308138cfddd6e5819569d6609a7672"
+  },
+  {
+    "url": "assets/js/37.4e1eee2c.js",
+    "revision": "0efac40e5dd0e3fc8e94f0b8cda4f0b2"
+  },
+  {
+    "url": "assets/js/38.7826170e.js",
+    "revision": "8e5e62243cab1c2f356d0f77ffac4b04"
+  },
+  {
+    "url": "assets/js/39.094ffa40.js",
+    "revision": "4342737cae50042277b76721d79315d2"
+  },
+  {
+    "url": "assets/js/4.9489102c.js",
+    "revision": "c5f4723242bd00da0724a4737e1cb142"
+  },
+  {
+    "url": "assets/js/40.10d90636.js",
+    "revision": "76033b573e4da1b2cd491c8794b35af7"
+  },
+  {
+    "url": "assets/js/41.8351af86.js",
+    "revision": "16e3ded52f241dfcedb215d3e784ffd2"
+  },
+  {
+    "url": "assets/js/42.53972f6c.js",
+    "revision": "f59a9f585a6b06d80cebcdb81772acd0"
+  },
+  {
+    "url": "assets/js/43.e2b432ea.js",
+    "revision": "f0fb7f9acf7bfd42c8777fa0532a4f7c"
+  },
+  {
+    "url": "assets/js/44.e4242a1f.js",
+    "revision": "397c66f6b7866718983234d014f94e60"
+  },
+  {
+    "url": "assets/js/45.392413aa.js",
+    "revision": "51fcb57964dd90d24c02593411a478cd"
+  },
+  {
+    "url": "assets/js/46.22f9a9c6.js",
+    "revision": "d8f80568057ee4169e8f145ed42a28d8"
+  },
+  {
+    "url": "assets/js/47.2bd2cecc.js",
+    "revision": "09684550aea02b1058ea119724a2fed1"
+  },
+  {
+    "url": "assets/js/48.55792a30.js",
+    "revision": "6900523d21b183f5a8aae5e2799674cc"
+  },
+  {
+    "url": "assets/js/49.cde94a79.js",
+    "revision": "3c992f7d6d21537ae32091b611215346"
+  },
+  {
+    "url": "assets/js/5.12d049b6.js",
+    "revision": "d489c45818dd2315c2c97a3437acd6cf"
+  },
+  {
+    "url": "assets/js/50.42e34e52.js",
+    "revision": "1831c8d5de17eeed779edb5f28385671"
+  },
+  {
+    "url": "assets/js/51.90dfa84e.js",
+    "revision": "531ac61e50a863e5bb409b2f893c4240"
+  },
+  {
+    "url": "assets/js/52.10bb0251.js",
+    "revision": "79eb24907253da0d7120ae9dcf34c73f"
+  },
+  {
+    "url": "assets/js/53.7207ffc5.js",
+    "revision": "53164733a3c1e6f29a4ca6719591b70b"
+  },
+  {
+    "url": "assets/js/54.af3d3dcd.js",
+    "revision": "f175b1f13236f10b690d5e86b9bb368d"
+  },
+  {
+    "url": "assets/js/55.2d6ae2e1.js",
+    "revision": "eb8dd3e8ff4c57ed143c9778ec15bd4b"
+  },
+  {
+    "url": "assets/js/56.9aec9a9e.js",
+    "revision": "5ebf6c52558f0709c076b202a55b9fa3"
+  },
+  {
+    "url": "assets/js/57.9d9ddcbd.js",
+    "revision": "99117ec556700247d528c7acd29c203b"
+  },
+  {
+    "url": "assets/js/58.50eb3b91.js",
+    "revision": "e7f565c15f3cab12bf1eedf0659fd523"
+  },
+  {
+    "url": "assets/js/59.27106fbb.js",
+    "revision": "f485b2d1b0a56c26176ea8f44f9e2738"
+  },
+  {
+    "url": "assets/js/6.6ea91b28.js",
+    "revision": "5fac1ead0dd12855a5d8976740456131"
+  },
+  {
+    "url": "assets/js/60.a47e5279.js",
+    "revision": "f6f5d7dc973878332b5b1d0157f92135"
+  },
+  {
+    "url": "assets/js/61.74ebd7d9.js",
+    "revision": "ae27832c8fa41953cc04725e0d5001d0"
+  },
+  {
+    "url": "assets/js/62.4bf212f9.js",
+    "revision": "2ae416136507b54b6c19f00f94ea9dd4"
+  },
+  {
+    "url": "assets/js/63.b54aca3e.js",
+    "revision": "80860c2eb8c0374ffd19206c3653a451"
+  },
+  {
+    "url": "assets/js/64.399e72b8.js",
+    "revision": "d9f80db9175e32d06a3ea1077135f0e4"
+  },
+  {
+    "url": "assets/js/65.a8c627d3.js",
+    "revision": "779b4c30258b0bd6aad23a1436bc1b92"
+  },
+  {
+    "url": "assets/js/66.7f19cc4b.js",
+    "revision": "2e79a49876a6073bd459a1575199269d"
+  },
+  {
+    "url": "assets/js/67.e57db97e.js",
+    "revision": "78a67eab42f946943b9651d089a4ef56"
+  },
+  {
+    "url": "assets/js/68.ebe4213c.js",
+    "revision": "93e3246379979219b4af948dba1bc71a"
+  },
+  {
+    "url": "assets/js/69.2d309866.js",
+    "revision": "f5dc40ff8ea229a2fa6ac697fcf42475"
+  },
+  {
+    "url": "assets/js/7.01e4e942.js",
+    "revision": "e4797b632e362ecd096a64375e7003ae"
+  },
+  {
+    "url": "assets/js/70.60ae83e6.js",
+    "revision": "acba0df2ef73d360ec4686677942d0a4"
+  },
+  {
+    "url": "assets/js/71.188d7bca.js",
+    "revision": "cf49e628f26e54631f9a3fcb3f909fbc"
+  },
+  {
+    "url": "assets/js/72.3f7bfd0d.js",
+    "revision": "8b3a18399033b6fbc07696b31226998a"
+  },
+  {
+    "url": "assets/js/73.171571e4.js",
+    "revision": "4152daed0ad6a65b39b3f20c0ba648ca"
+  },
+  {
+    "url": "assets/js/74.3d5cfaba.js",
+    "revision": "0fbea56200387d87caa90abc9f1c807d"
+  },
+  {
+    "url": "assets/js/75.093d716c.js",
+    "revision": "0abd2acf22923e75799377e678b91077"
+  },
+  {
+    "url": "assets/js/76.50d84c61.js",
+    "revision": "c299d111edbf4d3c46c44c9374a3e4f3"
+  },
+  {
+    "url": "assets/js/77.7bc0f013.js",
+    "revision": "6d86d8510f2fb24917c56fcd00333e12"
+  },
+  {
+    "url": "assets/js/78.e2ded2d4.js",
+    "revision": "4058b878e45344934acd21b46e02795f"
+  },
+  {
+    "url": "assets/js/79.f7eeb76b.js",
+    "revision": "8e9491e599a437e2d5affbbfbd58559c"
+  },
+  {
+    "url": "assets/js/8.ba7f6ace.js",
+    "revision": "3db41c27492ef5d04cfe98f3ba38c493"
+  },
+  {
+    "url": "assets/js/80.41418749.js",
+    "revision": "76617f3118e34b77c5ce0cddcebd6ec4"
+  },
+  {
+    "url": "assets/js/81.16e2cc83.js",
+    "revision": "2ad3cec1add1ede3456c3c89a27f2a07"
+  },
+  {
+    "url": "assets/js/82.56c0d7c1.js",
+    "revision": "5ef8ed46677490c1264882fe0c1eade8"
+  },
+  {
+    "url": "assets/js/83.ea65d6b1.js",
+    "revision": "2629982f8da068c64b96af5cb7cc0170"
+  },
+  {
+    "url": "assets/js/84.d50d3d09.js",
+    "revision": "cdc0e25e4f147f635e4c04c409f99935"
+  },
+  {
+    "url": "assets/js/85.1eed1486.js",
+    "revision": "99a6b518c198712eba4adb916001461c"
+  },
+  {
+    "url": "assets/js/86.1ab04b8d.js",
+    "revision": "9218ab6fe0cc3e0d0cc9465ae1f04957"
+  },
+  {
+    "url": "assets/js/87.392384e7.js",
+    "revision": "b247ed9b2da1e82b477313aa886db306"
+  },
+  {
+    "url": "assets/js/88.a95133cd.js",
+    "revision": "4036de5ef3a7b6e9a318942ba6faf560"
+  },
+  {
+    "url": "assets/js/89.213efaae.js",
+    "revision": "fa74c388f721c266e3ae5f6edbb4bd85"
+  },
+  {
+    "url": "assets/js/9.26319460.js",
+    "revision": "b5a027c58f63f184432e7851068830a1"
+  },
+  {
+    "url": "assets/js/90.ef03688f.js",
+    "revision": "58920a350be92626cfd2cf15e640fd3d"
+  },
+  {
+    "url": "assets/js/91.43930d52.js",
+    "revision": "bff38c73ab05c14ddc5da88e4ba036e1"
+  },
+  {
+    "url": "assets/js/92.ae5e9611.js",
+    "revision": "b3faf9fd83b537307278864b0e5464ec"
+  },
+  {
+    "url": "assets/js/93.3cdab647.js",
+    "revision": "f66789e02a5ffd1afc485242e108c860"
+  },
+  {
+    "url": "assets/js/94.72df7b53.js",
+    "revision": "bd73044a9f346ca23782d615da42d4a4"
+  },
+  {
+    "url": "assets/js/95.c8e36604.js",
+    "revision": "e40ad2a5dfe1e25c058962cf86660287"
+  },
+  {
+    "url": "assets/js/96.1ebdc00d.js",
+    "revision": "2c67b7841bd6c48f9af68c6d95c8ffe4"
+  },
+  {
+    "url": "assets/js/97.fa1ed9e7.js",
+    "revision": "7e054747dd126fecc7e9d670794002b1"
+  },
+  {
+    "url": "assets/js/98.939cb6ef.js",
+    "revision": "56b3178533a666894baddadd8ab9bc06"
+  },
+  {
+    "url": "assets/js/99.96c5a70e.js",
+    "revision": "0cbc93b6dce3419f25775487b0d1407a"
+  },
+  {
+    "url": "assets/js/app.84c88b57.js",
+    "revision": "1067055bba375603bb5781924201a8a5"
+  },
+  {
+    "url": "baidu_verify_codeva-GYcT5ujCTB.html",
+    "revision": "05e79aba57b6dbeeb58f6aadc23f0074"
+  },
+  {
+    "url": "desc.html",
+    "revision": "f46e5deaa0b32c74a5465f7e57401fcd"
+  },
+  {
+    "url": "guide/advance/ability-compatible.html",
+    "revision": "3b8afd343db4d74cc203261e4141a4af"
+  },
+  {
+    "url": "guide/advance/async-subpackage.html",
+    "revision": "bc5eb1b9ec36b9d874620ec322f4d323"
+  },
+  {
+    "url": "guide/advance/custom-output-path.html",
+    "revision": "72a926d622c483691ffc39f9aa346f2d"
+  },
+  {
+    "url": "guide/advance/dll-plugin.html",
+    "revision": "e8d95670c94231a0a5d0c9ac40d23795"
+  },
+  {
+    "url": "guide/advance/i18n.html",
+    "revision": "f81fab30016db6683dc67d7f87ca65dd"
+  },
+  {
+    "url": "guide/advance/image-process.html",
+    "revision": "4c139d9d8d72efe3136d29bb862e4fe4"
+  },
+  {
+    "url": "guide/advance/mixin.html",
+    "revision": "5989556c2b6a6285617fcb2775e0b403"
+  },
+  {
+    "url": "guide/advance/npm.html",
+    "revision": "acc08a0cd161d56e73c5ea141affc99c"
+  },
+  {
+    "url": "guide/advance/pinia.html",
+    "revision": "2359fa01373e8bfb92e81ff3b275d5a8"
+  },
+  {
+    "url": "guide/advance/platform.html",
+    "revision": "83cd97f6ec8954c086b2b0361fc608c8"
+  },
+  {
+    "url": "guide/advance/plugin.html",
+    "revision": "7aecc3bfede3b13de6afc7a20e25e8af"
+  },
+  {
+    "url": "guide/advance/progressive.html",
+    "revision": "13fd4ea947dd5e9c0b3c4cb2ffff6ef4"
+  },
+  {
+    "url": "guide/advance/provide-inject.html",
+    "revision": "94f05629f5f4c9b7c9808d87e957eea8"
+  },
+  {
+    "url": "guide/advance/resource-resolve.html",
+    "revision": "cf43ecea0f34b0087d6ea2310d68d903"
+  },
+  {
+    "url": "guide/advance/size-report.html",
+    "revision": "e9b31045eeb57a567487eb0cec8c1a55"
+  },
+  {
+    "url": "guide/advance/ssr.html",
+    "revision": "a9a2ab6192f90ecf01f14e5e23ca3afc"
+  },
+  {
+    "url": "guide/advance/store.html",
+    "revision": "21fef840c6de0b5e61c831a76077e497"
+  },
+  {
+    "url": "guide/advance/subpackage.html",
+    "revision": "b43e2e4c902b2e4d10b58d5b8406b880"
+  },
+  {
+    "url": "guide/advance/utility-first-css.html",
+    "revision": "203f30c86d031caab57667d23d874a8c"
+  },
+  {
+    "url": "guide/basic/class-style-binding.html",
+    "revision": "b8f5d12016d754c0504aab2e06a8dda2"
+  },
+  {
+    "url": "guide/basic/component.html",
+    "revision": "c8e7cf6524386db839da0964dde4530a"
+  },
+  {
+    "url": "guide/basic/conditional-render.html",
+    "revision": "458a0e675d9fc7e4f4ed3a3d7cb10d2f"
+  },
+  {
+    "url": "guide/basic/css.html",
+    "revision": "a60840e3e0ab988469dd9701b8d9740f"
+  },
+  {
+    "url": "guide/basic/event.html",
+    "revision": "34a29012d67135507b22853092744b7a"
+  },
+  {
+    "url": "guide/basic/ide.html",
+    "revision": "84d9ce263667bac51aa966600d81f452"
+  },
+  {
+    "url": "guide/basic/intro.html",
+    "revision": "3564335cfab7690662f7e6981e28384c"
+  },
+  {
+    "url": "guide/basic/list-render.html",
+    "revision": "81564ae12132bfdeee22556dc29cf2aa"
+  },
+  {
+    "url": "guide/basic/option-chain.html",
+    "revision": "b8af0aca729f041f5d32e1df83383f8c"
+  },
+  {
+    "url": "guide/basic/reactive.html",
+    "revision": "fa1199d698f37cd18ab5e1cbd1fcde85"
+  },
+  {
+    "url": "guide/basic/refs.html",
+    "revision": "1ad3afc97da4858d06e82df08d4715ef"
+  },
+  {
+    "url": "guide/basic/single-file.html",
+    "revision": "82003549b10795b0c603a66854e2a89f"
+  },
+  {
+    "url": "guide/basic/start.html",
+    "revision": "06f28accbba57fc3d2696c3303a17ca0"
+  },
+  {
+    "url": "guide/basic/template.html",
+    "revision": "ac4adffc987166bd6b014e4874f9807b"
+  },
+  {
+    "url": "guide/basic/two-way-binding.html",
+    "revision": "9f94591106431eae092285cc63bf73b3"
+  },
+  {
+    "url": "guide/composition-api/composition-api.html",
+    "revision": "f372f2e4334ed4580d06f8fdfd741e9a"
+  },
+  {
+    "url": "guide/composition-api/reactive-api.html",
+    "revision": "a8f594693bbd5ae4af7644ea13f697fb"
+  },
+  {
+    "url": "guide/extend/api-proxy.html",
+    "revision": "13330ecd6678b2e40e034d8ad425029c"
+  },
+  {
+    "url": "guide/extend/fetch.html",
+    "revision": "6a54e8095f85d420cd97707a5d3684c7"
+  },
+  {
+    "url": "guide/extend/index.html",
+    "revision": "258dede7e9407b44d9998bf7fe1fd3b0"
+  },
+  {
+    "url": "guide/extend/mock.html",
+    "revision": "2951d26e9b525fb4c94afabf4ac9924f"
+  },
+  {
+    "url": "guide/migrate/2.7.html",
+    "revision": "fc84b08b7d29082e1dbb1999d900a704"
+  },
+  {
+    "url": "guide/migrate/2.8.html",
+    "revision": "28587490b791a1b8ba35c7d92f12a6de"
+  },
+  {
+    "url": "guide/migrate/2.9.html",
+    "revision": "658e207bc34b8a18cb8ed68442c62712"
+  },
+  {
+    "url": "guide/migrate/mpx-cli-3.html",
+    "revision": "f91fdb6ac9c54c8c865d19637c7ee591"
+  },
+  {
+    "url": "guide/platform/index.html",
+    "revision": "b0af12d7eaf7882a8aea01d8202c4d02"
+  },
+  {
+    "url": "guide/platform/miniprogram.html",
+    "revision": "2b5ed743d1a4eeab70f2b4f8051eefba"
+  },
+  {
+    "url": "guide/platform/rn.html",
+    "revision": "cb10026541b586deac1fc9c234328e78"
+  },
+  {
+    "url": "guide/platform/web.html",
+    "revision": "e99c298705c937e4965c229cd7e4a2b9"
+  },
+  {
+    "url": "guide/tool/e2e-test.html",
+    "revision": "858693cd05b55bc582f420643ef9e514"
+  },
+  {
+    "url": "guide/tool/ts.html",
+    "revision": "a1b3d19233cad159d0bd946a2ea3eb41"
+  },
+  {
+    "url": "guide/tool/unit-test.html",
+    "revision": "bf791feac87c5709dfb9e3fd326c99fd"
+  },
+  {
+    "url": "guide/understand/compile.html",
+    "revision": "6e9a16d929784bcdbe34ca2564c47a18"
+  },
+  {
+    "url": "guide/understand/runtime.html",
+    "revision": "c7008c7a29fefb544fb600bd71677b7a"
+  },
+  {
+    "url": "index.html",
+    "revision": "51c2b45fb4b6fac444845411d55acbca"
+  },
+  {
+    "url": "logo.png",
+    "revision": "b362e51deb26ea4ff1d0daa6da1e7c44"
+  },
+  {
+    "url": "rn-api.html",
+    "revision": "41b9df161419f392a9a40e6b7b162ae3"
+  },
+  {
+    "url": "rn-component.html",
+    "revision": "e0533defbccf789f8f8e2c15ae3ebd22"
+  },
+  {
+    "url": "rn-style.html",
+    "revision": "163003bbcbe6b7665c2f420daee35296"
+  },
+  {
+    "url": "rn-template.html",
+    "revision": "71cca96a9f67d8ddb84cb284342b8329"
+  }
+].concat(self.__precacheManifest || []);
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+addEventListener('message', event => {
+  const replyPort = event.ports[0]
+  const message = event.data
+  if (replyPort && message && message.type === 'skip-waiting') {
+    event.waitUntil(
+      self.skipWaiting().then(
+        () => replyPort.postMessage({ error: null }),
+        error => replyPort.postMessage({ error })
+      )
+    )
+  }
+})
diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js
index 42ba425801..73c4f70d4b 100644
--- a/packages/core/src/platform/patch/getDefaultOptions.ios.js
+++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js
@@ -46,15 +46,19 @@ function createEffect (proxy, components) {
     if (tagName === 'block') return Fragment
     // 从父组件传递的 genericComponents 中获取 moduleId
     if (proxy.target.__props.genericComponents && proxy.target.__props.generic) {
-    const genericKey = Object.keys(proxy.target.__props.generic)[0]
-    const actualComponentName = proxy.target.__props.generic[genericKey]
-
-    if (tagName === actualComponentName) {
-      // 通过 moduleId 从全局获取组件定义
-      const moduleId = proxy.target.__props.genericComponents[actualComponentName]
-      return global.__mpxOptionsMap[moduleId]
+      const genericKeys = Object.keys(proxy.target.__props.generic)
+      for (const genericKey of genericKeys) {
+        const actualComponentName = proxy.target.__props.generic[genericKey]
+        if (tagName === actualComponentName) {
+          // 通过 moduleId 从全局获取组件定义
+          const moduleId =
+            proxy.target.__props.genericComponents[actualComponentName]
+          if (moduleId) {
+            return global.__mpxOptionsMap[moduleId]
+          }
+        }
+      }
     }
-  }
     return components[tagName] || getByPath(ReactNative, tagName)
   }
   const innerCreateElement = (type, ...rest) => {
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index 5d8145d5d4..a2f5c7165d 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2474,30 +2474,41 @@ function processComponentGenericsReact (el, options) {
   }
 
   // 处理父组件中使用 generic 组件的情况
-  const attrsToAdd = []
+  const genericConfig = {} // 用一个对象收集所有的 generic 配置
+  const genericComponentsConfig = {} // 收集所有组件的 moduleId
   el.attrsList.forEach(attr => {
     const match = attr.name.match(genericRE)
     if (match) {
       const key = match[1]
       const componentName = attr.value
-      // 传递 generic 配置
-      attrsToAdd.push({
-        name: 'generic',
-        value: { [key]: componentName }
-      })
+      // 将每个 generic 配置添加到同一个对象中
+      genericConfig[key] = componentName
 
       // 从 usingComponentsInfo 中获取组件的 moduleId
       if (usingComponentsInfo[componentName]) {
         const { mid } = usingComponentsInfo[componentName]
-        // 传递组件的 moduleId 给子组件
-        attrsToAdd.push({
-          name: 'genericComponents',
-          value: { [componentName]: mid }
-        })
+        // 收集组件的 moduleId
+        genericComponentsConfig[componentName] = mid
       }
     }
   })
-  el.attrsList = el.attrsList.concat(attrsToAdd)
+  // 只有在有 generic 配置时才添加属性
+  if (Object.keys(genericConfig).length) {
+    const attrsToAdd = [
+      {
+        name: 'generic',
+        value: genericConfig
+      }
+    ]
+    // 只有在有 moduleId 时才添加 genericComponents 属性
+    if (Object.keys(genericComponentsConfig).length) {
+      attrsToAdd.push({
+        name: 'genericComponents',
+        value: genericComponentsConfig
+      })
+    }
+    el.attrsList = el.attrsList.concat(attrsToAdd)
+  }
 }
 
 function processShow (el, options, root) {

From 1243a2ec9b3287e277320d67a25d830b1ec78e69 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 10 Feb 2025 20:45:18 +0800
Subject: [PATCH 012/126] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4vuepress?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs-vuepress/.vuepress/dist/404.html         |   25 -
 .../.vuepress/dist/api/ApiIndex.html          |   23 -
 .../.vuepress/dist/api/app-config.html        |  116 --
 docs-vuepress/.vuepress/dist/api/builtIn.html |   56 -
 docs-vuepress/.vuepress/dist/api/compile.html | 1214 -----------------
 .../.vuepress/dist/api/composition-api.html   |  117 --
 .../.vuepress/dist/api/directives.html        |  434 ------
 docs-vuepress/.vuepress/dist/api/extend.html  |  365 -----
 .../.vuepress/dist/api/global-api.html        |  253 ----
 docs-vuepress/.vuepress/dist/api/index.html   |   43 -
 .../.vuepress/dist/api/instance-api.html      |  265 ----
 .../.vuepress/dist/api/optional-api.html      |   51 -
 .../.vuepress/dist/api/reactivity-api.html    |  544 --------
 .../.vuepress/dist/api/store-api.html         |  229 ----
 .../.vuepress/dist/articles/1.0.html          |   54 -
 .../.vuepress/dist/articles/2.0.html          |   58 -
 .../.vuepress/dist/articles/2.7-release.html  |   63 -
 .../dist/articles/2.8-release-alter.html      |  174 ---
 .../.vuepress/dist/articles/2.8-release.html  |  182 ---
 .../dist/articles/2.9-release-alter.html      |  277 ----
 .../.vuepress/dist/articles/2.9-release.html  |  285 ----
 .../.vuepress/dist/articles/index.html        |   43 -
 .../.vuepress/dist/articles/mpx-cli-next.html |  137 --
 .../.vuepress/dist/articles/mpx-cube-ui.html  |   56 -
 .../.vuepress/dist/articles/mpx1.html         |   55 -
 .../.vuepress/dist/articles/mpx2.html         |  740 ----------
 .../.vuepress/dist/articles/performance.html  |   60 -
 .../.vuepress/dist/articles/size-control.html |   51 -
 .../dist/articles/ts-derivation.html          |  273 ----
 .../.vuepress/dist/articles/unit-test.html    |  461 -------
 .../dist/assets/css/0.styles.f22478ca.css     |    3 -
 .../dist/assets/img/search.83621669.svg       |    1 -
 .../dist/assets/img/start-tips1.3b76ac97.png  |  Bin 39681 -> 0 bytes
 .../dist/assets/img/start-tips2.7d8836f8.png  |  Bin 51539 -> 0 bytes
 .../.vuepress/dist/assets/js/1.4f7abe8f.js    |    1 -
 .../.vuepress/dist/assets/js/10.0192acce.js   |    1 -
 .../.vuepress/dist/assets/js/100.f31ffd06.js  |    1 -
 .../.vuepress/dist/assets/js/101.283d0363.js  |    1 -
 .../.vuepress/dist/assets/js/102.094a0a16.js  |    1 -
 .../.vuepress/dist/assets/js/103.b34f6752.js  |    1 -
 .../.vuepress/dist/assets/js/104.78f6358e.js  |    1 -
 .../.vuepress/dist/assets/js/105.eb6680fc.js  |    1 -
 .../.vuepress/dist/assets/js/106.471f03cf.js  |    1 -
 .../.vuepress/dist/assets/js/107.63fd18fd.js  |    1 -
 .../.vuepress/dist/assets/js/108.614260e9.js  |    1 -
 .../.vuepress/dist/assets/js/109.3da50cc1.js  |    1 -
 .../.vuepress/dist/assets/js/11.d7a8d045.js   |    1 -
 .../.vuepress/dist/assets/js/110.f74ff3a3.js  |    1 -
 .../.vuepress/dist/assets/js/111.51932e54.js  |    1 -
 .../.vuepress/dist/assets/js/112.da7bd3e7.js  |    1 -
 .../.vuepress/dist/assets/js/113.caaf11a3.js  |    1 -
 .../.vuepress/dist/assets/js/114.16cda7ac.js  |    1 -
 .../.vuepress/dist/assets/js/115.88124b12.js  |    1 -
 .../.vuepress/dist/assets/js/116.4a116234.js  |    1 -
 .../.vuepress/dist/assets/js/117.e45c1b95.js  |    1 -
 .../.vuepress/dist/assets/js/118.9cbac09e.js  |    1 -
 .../.vuepress/dist/assets/js/119.312e4c21.js  |    1 -
 .../.vuepress/dist/assets/js/12.4d7217be.js   |    1 -
 .../.vuepress/dist/assets/js/120.7a6b4035.js  |    1 -
 .../.vuepress/dist/assets/js/14.7377c68f.js   |    1 -
 .../.vuepress/dist/assets/js/15.6f885a83.js   |    1 -
 .../.vuepress/dist/assets/js/16.974f551e.js   |    1 -
 .../.vuepress/dist/assets/js/17.e94e6745.js   |    1 -
 .../.vuepress/dist/assets/js/18.b1f7a4a2.js   |    1 -
 .../.vuepress/dist/assets/js/19.62186e92.js   |    1 -
 .../.vuepress/dist/assets/js/2.314c65b9.js    |    1 -
 .../.vuepress/dist/assets/js/20.e9cd4de3.js   |    1 -
 .../.vuepress/dist/assets/js/21.217f8fa9.js   |    1 -
 .../.vuepress/dist/assets/js/22.4cd3344f.js   |    1 -
 .../.vuepress/dist/assets/js/23.365f9a87.js   |    1 -
 .../.vuepress/dist/assets/js/24.17777a13.js   |    1 -
 .../.vuepress/dist/assets/js/25.889c07d7.js   |    1 -
 .../.vuepress/dist/assets/js/26.3aa9f276.js   |    1 -
 .../.vuepress/dist/assets/js/27.1a35170a.js   |    1 -
 .../.vuepress/dist/assets/js/28.3670fa46.js   |    1 -
 .../.vuepress/dist/assets/js/29.a911e510.js   |    1 -
 .../.vuepress/dist/assets/js/3.145e69cd.js    |    1 -
 .../.vuepress/dist/assets/js/30.04d1a7ea.js   |    1 -
 .../.vuepress/dist/assets/js/31.ec06bf2f.js   |    1 -
 .../.vuepress/dist/assets/js/32.f29d2cd1.js   |    1 -
 .../.vuepress/dist/assets/js/33.936d018e.js   |    1 -
 .../.vuepress/dist/assets/js/34.f494d685.js   |    1 -
 .../.vuepress/dist/assets/js/35.c3ed1ff7.js   |    1 -
 .../.vuepress/dist/assets/js/36.d2c9afa9.js   |    1 -
 .../.vuepress/dist/assets/js/37.4e1eee2c.js   |    1 -
 .../.vuepress/dist/assets/js/38.7826170e.js   |    1 -
 .../.vuepress/dist/assets/js/39.094ffa40.js   |    1 -
 .../.vuepress/dist/assets/js/4.9489102c.js    |    1 -
 .../.vuepress/dist/assets/js/40.10d90636.js   |    1 -
 .../.vuepress/dist/assets/js/41.8351af86.js   |    1 -
 .../.vuepress/dist/assets/js/42.53972f6c.js   |    1 -
 .../.vuepress/dist/assets/js/43.e2b432ea.js   |    1 -
 .../.vuepress/dist/assets/js/44.e4242a1f.js   |    1 -
 .../.vuepress/dist/assets/js/45.392413aa.js   |    1 -
 .../.vuepress/dist/assets/js/46.22f9a9c6.js   |    1 -
 .../.vuepress/dist/assets/js/47.2bd2cecc.js   |    1 -
 .../.vuepress/dist/assets/js/48.55792a30.js   |    1 -
 .../.vuepress/dist/assets/js/49.cde94a79.js   |    1 -
 .../.vuepress/dist/assets/js/5.12d049b6.js    |    1 -
 .../.vuepress/dist/assets/js/50.42e34e52.js   |    1 -
 .../.vuepress/dist/assets/js/51.90dfa84e.js   |    1 -
 .../.vuepress/dist/assets/js/52.10bb0251.js   |    1 -
 .../.vuepress/dist/assets/js/53.7207ffc5.js   |    1 -
 .../.vuepress/dist/assets/js/54.af3d3dcd.js   |    1 -
 .../.vuepress/dist/assets/js/55.2d6ae2e1.js   |    1 -
 .../.vuepress/dist/assets/js/56.9aec9a9e.js   |    1 -
 .../.vuepress/dist/assets/js/57.9d9ddcbd.js   |    1 -
 .../.vuepress/dist/assets/js/58.50eb3b91.js   |    1 -
 .../.vuepress/dist/assets/js/59.27106fbb.js   |    1 -
 .../.vuepress/dist/assets/js/6.6ea91b28.js    |    1 -
 .../.vuepress/dist/assets/js/60.a47e5279.js   |    1 -
 .../.vuepress/dist/assets/js/61.74ebd7d9.js   |    1 -
 .../.vuepress/dist/assets/js/62.4bf212f9.js   |    1 -
 .../.vuepress/dist/assets/js/63.b54aca3e.js   |    1 -
 .../.vuepress/dist/assets/js/64.399e72b8.js   |    1 -
 .../.vuepress/dist/assets/js/65.a8c627d3.js   |    1 -
 .../.vuepress/dist/assets/js/66.7f19cc4b.js   |    1 -
 .../.vuepress/dist/assets/js/67.e57db97e.js   |    1 -
 .../.vuepress/dist/assets/js/68.ebe4213c.js   |    1 -
 .../.vuepress/dist/assets/js/69.2d309866.js   |    1 -
 .../.vuepress/dist/assets/js/7.01e4e942.js    |    1 -
 .../.vuepress/dist/assets/js/70.60ae83e6.js   |    1 -
 .../.vuepress/dist/assets/js/71.188d7bca.js   |    1 -
 .../.vuepress/dist/assets/js/72.3f7bfd0d.js   |    1 -
 .../.vuepress/dist/assets/js/73.171571e4.js   |    1 -
 .../.vuepress/dist/assets/js/74.3d5cfaba.js   |    1 -
 .../.vuepress/dist/assets/js/75.093d716c.js   |    1 -
 .../.vuepress/dist/assets/js/76.50d84c61.js   |    1 -
 .../.vuepress/dist/assets/js/77.7bc0f013.js   |    1 -
 .../.vuepress/dist/assets/js/78.e2ded2d4.js   |    1 -
 .../.vuepress/dist/assets/js/79.f7eeb76b.js   |    1 -
 .../.vuepress/dist/assets/js/8.ba7f6ace.js    |    1 -
 .../.vuepress/dist/assets/js/80.41418749.js   |    1 -
 .../.vuepress/dist/assets/js/81.16e2cc83.js   |    1 -
 .../.vuepress/dist/assets/js/82.56c0d7c1.js   |    1 -
 .../.vuepress/dist/assets/js/83.ea65d6b1.js   |    1 -
 .../.vuepress/dist/assets/js/84.d50d3d09.js   |    1 -
 .../.vuepress/dist/assets/js/85.1eed1486.js   |    1 -
 .../.vuepress/dist/assets/js/86.1ab04b8d.js   |    1 -
 .../.vuepress/dist/assets/js/87.392384e7.js   |    1 -
 .../.vuepress/dist/assets/js/88.a95133cd.js   |    1 -
 .../.vuepress/dist/assets/js/89.213efaae.js   |    1 -
 .../.vuepress/dist/assets/js/9.26319460.js    |    1 -
 .../.vuepress/dist/assets/js/90.ef03688f.js   |    1 -
 .../.vuepress/dist/assets/js/91.43930d52.js   |    1 -
 .../.vuepress/dist/assets/js/92.ae5e9611.js   |    1 -
 .../.vuepress/dist/assets/js/93.3cdab647.js   |    1 -
 .../.vuepress/dist/assets/js/94.72df7b53.js   |    1 -
 .../.vuepress/dist/assets/js/95.c8e36604.js   |    1 -
 .../.vuepress/dist/assets/js/96.1ebdc00d.js   |    1 -
 .../.vuepress/dist/assets/js/97.fa1ed9e7.js   |    1 -
 .../.vuepress/dist/assets/js/98.939cb6ef.js   |    1 -
 .../.vuepress/dist/assets/js/99.96c5a70e.js   |    1 -
 .../.vuepress/dist/assets/js/app.84c88b57.js  |   18 -
 .../dist/baidu_verify_codeva-GYcT5ujCTB.html  |    1 -
 docs-vuepress/.vuepress/dist/desc.html        |   49 -
 docs-vuepress/.vuepress/dist/favicon.ico      |  Bin 9662 -> 0 bytes
 .../guide/advance/ability-compatible.html     |   87 --
 .../dist/guide/advance/async-subpackage.html  |  110 --
 .../guide/advance/custom-output-path.html     |  101 --
 .../dist/guide/advance/dll-plugin.html        |  126 --
 .../.vuepress/dist/guide/advance/i18n.html    |  276 ----
 .../dist/guide/advance/image-process.html     |  175 ---
 .../.vuepress/dist/guide/advance/mixin.html   |  115 --
 .../.vuepress/dist/guide/advance/npm.html     |  144 --
 .../.vuepress/dist/guide/advance/pinia.html   |  191 ---
 .../dist/guide/advance/platform.html          |  300 ----
 .../.vuepress/dist/guide/advance/plugin.html  |   77 --
 .../dist/guide/advance/progressive.html       |  135 --
 .../dist/guide/advance/provide-inject.html    |  200 ---
 .../dist/guide/advance/resource-resolve.html  |   88 --
 .../dist/guide/advance/size-report.html       |  188 ---
 .../.vuepress/dist/guide/advance/ssr.html     |  190 ---
 .../.vuepress/dist/guide/advance/store.html   |  599 --------
 .../dist/guide/advance/subpackage.html        |  264 ----
 .../dist/guide/advance/utility-first-css.html |  139 --
 .../dist/guide/basic/class-style-binding.html |  131 --
 .../.vuepress/dist/guide/basic/component.html |  117 --
 .../dist/guide/basic/conditional-render.html  |   72 -
 .../.vuepress/dist/guide/basic/css.html       |  173 ---
 .../.vuepress/dist/guide/basic/event.html     |   90 --
 .../.vuepress/dist/guide/basic/ide.html       |   67 -
 .../.vuepress/dist/guide/basic/intro.html     |   51 -
 .../dist/guide/basic/list-render.html         |  144 --
 .../dist/guide/basic/option-chain.html        |   76 --
 .../.vuepress/dist/guide/basic/reactive.html  |  111 --
 .../.vuepress/dist/guide/basic/refs.html      |  106 --
 .../dist/guide/basic/single-file.html         |   77 --
 .../.vuepress/dist/guide/basic/start.html     |  132 --
 .../.vuepress/dist/guide/basic/template.html  |  137 --
 .../dist/guide/basic/two-way-binding.html     |   81 --
 .../composition-api/composition-api.html      |  527 -------
 .../guide/composition-api/reactive-api.html   |  386 ------
 .../dist/guide/extend/api-proxy.html          |  100 --
 .../.vuepress/dist/guide/extend/fetch.html    |  139 --
 .../.vuepress/dist/guide/extend/index.html    |   62 -
 .../.vuepress/dist/guide/extend/mock.html     |  177 ---
 .../.vuepress/dist/guide/migrate/2.7.html     |  172 ---
 .../.vuepress/dist/guide/migrate/2.8.html     |   85 --
 .../.vuepress/dist/guide/migrate/2.9.html     |   76 --
 .../dist/guide/migrate/mpx-cli-3.html         |   97 --
 .../.vuepress/dist/guide/platform/index.html  |  225 ---
 .../dist/guide/platform/miniprogram.html      |   43 -
 .../.vuepress/dist/guide/platform/rn.html     |  198 ---
 .../.vuepress/dist/guide/platform/web.html    |   43 -
 .../.vuepress/dist/guide/tool/e2e-test.html   |  297 ----
 .../.vuepress/dist/guide/tool/ts.html         |  164 ---
 .../.vuepress/dist/guide/tool/unit-test.html  |  149 --
 .../dist/guide/understand/compile.html        |   52 -
 .../dist/guide/understand/runtime.html        |   51 -
 docs-vuepress/.vuepress/dist/index.html       |   55 -
 docs-vuepress/.vuepress/dist/logo.png         |  Bin 13635 -> 0 bytes
 .../.vuepress/dist/manifest.webmanifest       |   15 -
 docs-vuepress/.vuepress/dist/rn-api.html      |   65 -
 .../.vuepress/dist/rn-component.html          |   44 -
 docs-vuepress/.vuepress/dist/rn-style.html    |  331 -----
 docs-vuepress/.vuepress/dist/rn-template.html |  104 --
 .../.vuepress/dist/service-worker.js          |  901 ------------
 218 files changed, 16523 deletions(-)
 delete mode 100644 docs-vuepress/.vuepress/dist/404.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/ApiIndex.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/app-config.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/builtIn.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/compile.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/composition-api.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/directives.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/extend.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/global-api.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/index.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/instance-api.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/optional-api.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/reactivity-api.html
 delete mode 100644 docs-vuepress/.vuepress/dist/api/store-api.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/1.0.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/2.0.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/2.7-release.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/2.8-release-alter.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/2.8-release.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/2.9-release-alter.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/2.9-release.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/index.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/mpx-cli-next.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/mpx-cube-ui.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/mpx1.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/mpx2.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/performance.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/size-control.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/ts-derivation.html
 delete mode 100644 docs-vuepress/.vuepress/dist/articles/unit-test.html
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/css/0.styles.f22478ca.css
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/img/search.83621669.svg
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/img/start-tips1.3b76ac97.png
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/img/start-tips2.7d8836f8.png
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/1.4f7abe8f.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/10.0192acce.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/100.f31ffd06.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/101.283d0363.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/102.094a0a16.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/103.b34f6752.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/104.78f6358e.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/105.eb6680fc.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/106.471f03cf.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/107.63fd18fd.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/108.614260e9.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/109.3da50cc1.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/11.d7a8d045.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/110.f74ff3a3.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/111.51932e54.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/112.da7bd3e7.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/113.caaf11a3.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/114.16cda7ac.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/115.88124b12.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/116.4a116234.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/117.e45c1b95.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/118.9cbac09e.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/119.312e4c21.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/12.4d7217be.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/120.7a6b4035.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/14.7377c68f.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/15.6f885a83.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/16.974f551e.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/17.e94e6745.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/18.b1f7a4a2.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/19.62186e92.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/2.314c65b9.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/20.e9cd4de3.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/21.217f8fa9.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/22.4cd3344f.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/23.365f9a87.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/24.17777a13.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/25.889c07d7.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/26.3aa9f276.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/27.1a35170a.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/28.3670fa46.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/29.a911e510.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/3.145e69cd.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/30.04d1a7ea.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/31.ec06bf2f.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/32.f29d2cd1.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/33.936d018e.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/34.f494d685.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/35.c3ed1ff7.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/36.d2c9afa9.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/37.4e1eee2c.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/38.7826170e.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/39.094ffa40.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/4.9489102c.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/40.10d90636.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/41.8351af86.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/42.53972f6c.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/43.e2b432ea.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/44.e4242a1f.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/45.392413aa.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/46.22f9a9c6.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/47.2bd2cecc.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/48.55792a30.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/49.cde94a79.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/5.12d049b6.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/50.42e34e52.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/51.90dfa84e.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/52.10bb0251.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/53.7207ffc5.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/54.af3d3dcd.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/55.2d6ae2e1.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/56.9aec9a9e.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/57.9d9ddcbd.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/58.50eb3b91.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/59.27106fbb.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/6.6ea91b28.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/60.a47e5279.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/61.74ebd7d9.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/62.4bf212f9.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/63.b54aca3e.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/64.399e72b8.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/65.a8c627d3.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/66.7f19cc4b.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/67.e57db97e.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/68.ebe4213c.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/69.2d309866.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/7.01e4e942.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/70.60ae83e6.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/71.188d7bca.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/72.3f7bfd0d.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/73.171571e4.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/74.3d5cfaba.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/75.093d716c.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/76.50d84c61.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/77.7bc0f013.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/78.e2ded2d4.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/79.f7eeb76b.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/8.ba7f6ace.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/80.41418749.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/81.16e2cc83.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/82.56c0d7c1.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/83.ea65d6b1.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/84.d50d3d09.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/85.1eed1486.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/86.1ab04b8d.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/87.392384e7.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/88.a95133cd.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/89.213efaae.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/9.26319460.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/90.ef03688f.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/91.43930d52.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/92.ae5e9611.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/93.3cdab647.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/94.72df7b53.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/95.c8e36604.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/96.1ebdc00d.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/97.fa1ed9e7.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/98.939cb6ef.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/99.96c5a70e.js
 delete mode 100644 docs-vuepress/.vuepress/dist/assets/js/app.84c88b57.js
 delete mode 100644 docs-vuepress/.vuepress/dist/baidu_verify_codeva-GYcT5ujCTB.html
 delete mode 100644 docs-vuepress/.vuepress/dist/desc.html
 delete mode 100644 docs-vuepress/.vuepress/dist/favicon.ico
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/ability-compatible.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/async-subpackage.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/custom-output-path.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/dll-plugin.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/i18n.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/image-process.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/mixin.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/npm.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/pinia.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/platform.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/plugin.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/progressive.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/provide-inject.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/resource-resolve.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/size-report.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/ssr.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/store.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/subpackage.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/advance/utility-first-css.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/class-style-binding.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/component.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/conditional-render.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/css.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/event.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/ide.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/intro.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/list-render.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/option-chain.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/reactive.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/refs.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/single-file.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/start.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/template.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/basic/two-way-binding.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/composition-api/composition-api.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/composition-api/reactive-api.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/extend/api-proxy.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/extend/fetch.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/extend/index.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/extend/mock.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/migrate/2.7.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/migrate/2.8.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/migrate/2.9.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/migrate/mpx-cli-3.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/platform/index.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/platform/miniprogram.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/platform/rn.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/platform/web.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/tool/e2e-test.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/tool/ts.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/tool/unit-test.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/understand/compile.html
 delete mode 100644 docs-vuepress/.vuepress/dist/guide/understand/runtime.html
 delete mode 100644 docs-vuepress/.vuepress/dist/index.html
 delete mode 100644 docs-vuepress/.vuepress/dist/logo.png
 delete mode 100644 docs-vuepress/.vuepress/dist/manifest.webmanifest
 delete mode 100644 docs-vuepress/.vuepress/dist/rn-api.html
 delete mode 100644 docs-vuepress/.vuepress/dist/rn-component.html
 delete mode 100644 docs-vuepress/.vuepress/dist/rn-style.html
 delete mode 100644 docs-vuepress/.vuepress/dist/rn-template.html
 delete mode 100644 docs-vuepress/.vuepress/dist/service-worker.js

diff --git a/docs-vuepress/.vuepress/dist/404.html b/docs-vuepress/.vuepress/dist/404.html
deleted file mode 100644
index a33a589c95..0000000000
--- a/docs-vuepress/.vuepress/dist/404.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/12.4d7217be.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>That's a Four-Oh-Four.</blockquote> <a href="/" class="router-link-active">
-      Take me home.
-    </a></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/12.4d7217be.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/ApiIndex.html b/docs-vuepress/.vuepress/dist/api/ApiIndex.html
deleted file mode 100644
index 4f5bdb4a1f..0000000000
--- a/docs-vuepress/.vuepress/dist/api/ApiIndex.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div id="api-index" data-v-a2f64316><div class="header" data-v-a2f64316><h1 data-v-a2f64316>API 参考</h1> <div class="api-filter" data-v-a2f64316><label for="api-filter" data-v-a2f64316>过滤</label> <input type="search" placeholder="Enter keyword" id="api-filter" value="" data-v-a2f64316></div></div> <div class="api-section" data-v-a2f64316><h2 id="全局配置" data-v-a2f64316>全局配置</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><!----> <ul data-v-a2f64316><li data-v-a2f64316><a href="app-config.html#usestrictdiff" data-v-a2f64316>useStrictDiff</a></li><li data-v-a2f64316><a href="app-config.html#ignorewarning" data-v-a2f64316>ignoreWarning</a></li><li data-v-a2f64316><a href="app-config.html#ignoreproxywhitelist" data-v-a2f64316>ignoreProxyWhiteList</a></li><li data-v-a2f64316><a href="app-config.html#observeclassinstance" data-v-a2f64316>observeClassInstance</a></li><li data-v-a2f64316><a href="app-config.html#proxyeventhandler" data-v-a2f64316>proxyEventHandler</a></li><li data-v-a2f64316><a href="app-config.html#setdatahandler" data-v-a2f64316>setDataHandler</a></li><li data-v-a2f64316><a href="app-config.html#forceflushsync" data-v-a2f64316>forceFlushSync</a></li><li data-v-a2f64316><a href="app-config.html#webrouteconfig" data-v-a2f64316>webRouteConfig</a></li><li data-v-a2f64316><a href="app-config.html#webconfig" data-v-a2f64316>webConfig</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="全局-api" data-v-a2f64316>全局 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>全局对象 Mpx</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="global-api.html#mixin" data-v-a2f64316>mixin</a></li><li data-v-a2f64316><a href="global-api.html#injectmixins" data-v-a2f64316>injectMixins</a></li><li data-v-a2f64316><a href="global-api.html#observable" data-v-a2f64316>observable</a></li><li data-v-a2f64316><a href="global-api.html#set" data-v-a2f64316>set</a></li><li data-v-a2f64316><a href="global-api.html#delete" data-v-a2f64316>delete</a></li><li data-v-a2f64316><a href="global-api.html#use" data-v-a2f64316>use</a></li><li data-v-a2f64316><a href="global-api.html#watch" data-v-a2f64316>watch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>基础 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="global-api.html#createapp" data-v-a2f64316>createApp</a></li><li data-v-a2f64316><a href="global-api.html#createpage" data-v-a2f64316>createPage</a></li><li data-v-a2f64316><a href="global-api.html#createcomponent" data-v-a2f64316>createComponent</a></li><li data-v-a2f64316><a href="global-api.html#nexttick" data-v-a2f64316>nextTick</a></li><li data-v-a2f64316><a href="global-api.html#topureobject" data-v-a2f64316>toPureObject</a></li><li data-v-a2f64316><a href="global-api.html#getmixin" data-v-a2f64316>getMixin</a></li><li data-v-a2f64316><a href="global-api.html#implement" data-v-a2f64316>implement</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>内建生命周期变量</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="global-api.html#beforecreate" data-v-a2f64316>BEFORECREATE</a></li><li data-v-a2f64316><a href="global-api.html#created" data-v-a2f64316>CREATED</a></li><li data-v-a2f64316><a href="global-api.html#beforemount" data-v-a2f64316>BEFOREMOUNT</a></li><li data-v-a2f64316><a href="global-api.html#mounted" data-v-a2f64316>MOUNTED</a></li><li data-v-a2f64316><a href="global-api.html#beforeupdate" data-v-a2f64316>BEFOREUPDATE</a></li><li data-v-a2f64316><a href="global-api.html#updated" data-v-a2f64316>UPDATED</a></li><li data-v-a2f64316><a href="global-api.html#beforeunmount" data-v-a2f64316>BEFOREUNMOUNT</a></li><li data-v-a2f64316><a href="global-api.html#unmounted" data-v-a2f64316>UNMOUNTED</a></li><li data-v-a2f64316><a href="global-api.html#onload" data-v-a2f64316>ONLOAD</a></li><li data-v-a2f64316><a href="global-api.html#onshow" data-v-a2f64316>ONSHOW</a></li><li data-v-a2f64316><a href="global-api.html#onhide" data-v-a2f64316>ONHIDE</a></li><li data-v-a2f64316><a href="global-api.html#onresize" data-v-a2f64316>ONRESIZE</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Store API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="store-api.html#createstore" data-v-a2f64316>createStore</a></li><li data-v-a2f64316><a href="store-api.html#createstorewiththis" data-v-a2f64316>createStoreWithThis</a></li><li data-v-a2f64316><a href="store-api.html#createstatewiththis" data-v-a2f64316>createStateWithThis</a></li><li data-v-a2f64316><a href="store-api.html#creategetterswiththis" data-v-a2f64316>createGettersWithThis</a></li><li data-v-a2f64316><a href="store-api.html#createmutationswiththis" data-v-a2f64316>createMutationsWithThis</a></li><li data-v-a2f64316><a href="store-api.html#createactionswiththis" data-v-a2f64316>createActionsWithThis</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="响应式-api" data-v-a2f64316>响应式 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>响应式基础 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#set" data-v-a2f64316>set</a></li><li data-v-a2f64316><a href="reactivity-api.html#del" data-v-a2f64316>del</a></li><li data-v-a2f64316><a href="reactivity-api.html#reactive" data-v-a2f64316>reactive</a></li><li data-v-a2f64316><a href="reactivity-api.html#isreactive" data-v-a2f64316>isReactive</a></li><li data-v-a2f64316><a href="reactivity-api.html#markraw" data-v-a2f64316>markRaw</a></li><li data-v-a2f64316><a href="reactivity-api.html#shallowreactive" data-v-a2f64316>shallowReactive</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Refs</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#ref" data-v-a2f64316>ref</a></li><li data-v-a2f64316><a href="reactivity-api.html#unref" data-v-a2f64316>unref</a></li><li data-v-a2f64316><a href="reactivity-api.html#toref" data-v-a2f64316>toRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#torefs" data-v-a2f64316>toRefs</a></li><li data-v-a2f64316><a href="reactivity-api.html#isref" data-v-a2f64316>isRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#customref" data-v-a2f64316>customRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#shallowref" data-v-a2f64316>shallowRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#triggerref" data-v-a2f64316>triggerRef</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Computed 与 Watch</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#computed" data-v-a2f64316>computed</a></li><li data-v-a2f64316><a href="reactivity-api.html#watcheffect" data-v-a2f64316>watchEffect</a></li><li data-v-a2f64316><a href="reactivity-api.html#watchsynceffect" data-v-a2f64316>watchSyncEffect</a></li><li data-v-a2f64316><a href="reactivity-api.html#watchposteffect" data-v-a2f64316>watchPostEffect</a></li><li data-v-a2f64316><a href="reactivity-api.html#watch" data-v-a2f64316>watch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Effect 作用域 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#effectscope" data-v-a2f64316>effectScope</a></li><li data-v-a2f64316><a href="reactivity-api.html#getcurrentscope" data-v-a2f64316>getCurrentScope</a></li><li data-v-a2f64316><a href="reactivity-api.html#onscopedispose" data-v-a2f64316>onScopeDispose</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="组合式-api" data-v-a2f64316>组合式 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>生命周期钩子</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="composition-api.html#onbeforemount" data-v-a2f64316>onBeforeMount</a></li><li data-v-a2f64316><a href="composition-api.html#onmounted" data-v-a2f64316>onMounted</a></li><li data-v-a2f64316><a href="composition-api.html#onbeforeupdate" data-v-a2f64316>onBeforeUpdate</a></li><li data-v-a2f64316><a href="composition-api.html#onupdated" data-v-a2f64316>onUpdated</a></li><li data-v-a2f64316><a href="composition-api.html#onbeforeunmount" data-v-a2f64316>onBeforeUnmount</a></li><li data-v-a2f64316><a href="composition-api.html#onunmount" data-v-a2f64316>onUnmount</a></li><li data-v-a2f64316><a href="composition-api.html#onload" data-v-a2f64316>onLoad</a></li><li data-v-a2f64316><a href="composition-api.html#onshow" data-v-a2f64316>onShow</a></li><li data-v-a2f64316><a href="composition-api.html#onhide" data-v-a2f64316>onHide</a></li><li data-v-a2f64316><a href="composition-api.html#onresize" data-v-a2f64316>onResize</a></li><li data-v-a2f64316><a href="composition-api.html#onpulldownrefresh" data-v-a2f64316>onPullDownRefresh</a></li><li data-v-a2f64316><a href="composition-api.html#onreachbottom" data-v-a2f64316>onReachBottom</a></li><li data-v-a2f64316><a href="composition-api.html#onshareappmessage" data-v-a2f64316>onShareAppMessage</a></li><li data-v-a2f64316><a href="composition-api.html#onsharetimeline" data-v-a2f64316>onShareTimeline</a></li><li data-v-a2f64316><a href="composition-api.html#onaddtofavorites" data-v-a2f64316>onAddToFavorites</a></li><li data-v-a2f64316><a href="composition-api.html#onpagescroll" data-v-a2f64316>onPageScroll</a></li><li data-v-a2f64316><a href="composition-api.html#ontabitemtap" data-v-a2f64316>onTabItemTap</a></li><li data-v-a2f64316><a href="composition-api.html#onsaveexitstate" data-v-a2f64316>onSaveExitState</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>其他</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="composition-api.html#setup" data-v-a2f64316>setup</a></li><li data-v-a2f64316><a href="composition-api.html#getcurrentinstance" data-v-a2f64316>getCurrentInstance</a></li><li data-v-a2f64316><a href="composition-api.html#usei18n" data-v-a2f64316>useI18n</a></li><li data-v-a2f64316><a href="composition-api.html#usefetch" data-v-a2f64316>useFetch</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="选项式-api" data-v-a2f64316>选项式 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>实例 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="instance-api.html#set" data-v-a2f64316>$set</a></li><li data-v-a2f64316><a href="instance-api.html#watch" data-v-a2f64316>$watch</a></li><li data-v-a2f64316><a href="instance-api.html#delete" data-v-a2f64316>$delete</a></li><li data-v-a2f64316><a href="instance-api.html#refs" data-v-a2f64316>$refs</a></li><li data-v-a2f64316><a href="instance-api.html#asyncrefs" data-v-a2f64316>$asyncRefs</a></li><li data-v-a2f64316><a href="instance-api.html#forceupdate" data-v-a2f64316>$forceUpdate</a></li><li data-v-a2f64316><a href="instance-api.html#nexttick" data-v-a2f64316>$nextTick</a></li><li data-v-a2f64316><a href="instance-api.html#i18n" data-v-a2f64316>$i18n</a></li><li data-v-a2f64316><a href="instance-api.html#rawoptions" data-v-a2f64316>$rawOptions</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="内置相关" data-v-a2f64316>内置相关</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>模版指令 (1)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="directives.html#wx-if" data-v-a2f64316>wx:if</a></li><li data-v-a2f64316><a href="directives.html#wx-elif" data-v-a2f64316>wx:elif</a></li><li data-v-a2f64316><a href="directives.html#wx-else" data-v-a2f64316>wx:else</a></li><li data-v-a2f64316><a href="directives.html#wx-for" data-v-a2f64316>wx:for</a></li><li data-v-a2f64316><a href="directives.html#wx-for-index" data-v-a2f64316>wx:for-index</a></li><li data-v-a2f64316><a href="directives.html#wx-for-item" data-v-a2f64316>wx:for-item</a></li><li data-v-a2f64316><a href="directives.html#wx-key" data-v-a2f64316>wx:key</a></li><li data-v-a2f64316><a href="directives.html#wx-class" data-v-a2f64316>wx:class</a></li><li data-v-a2f64316><a href="directives.html#wx-style" data-v-a2f64316>wx:style</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>模版指令 (2)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="directives.html#wx-model" data-v-a2f64316>wx:model</a></li><li data-v-a2f64316><a href="directives.html#wx-model-prop" data-v-a2f64316>wx:model-prop</a></li><li data-v-a2f64316><a href="directives.html#wx-model-event" data-v-a2f64316>wx:model-event</a></li><li data-v-a2f64316><a href="directives.html#wx-model-value-path" data-v-a2f64316>wx:model-value-path</a></li><li data-v-a2f64316><a href="directives.html#wx-model-filter" data-v-a2f64316>wx:model-filter</a></li><li data-v-a2f64316><a href="directives.html#wx-ref" data-v-a2f64316>wx:ref</a></li><li data-v-a2f64316><a href="directives.html#wx-show" data-v-a2f64316>wx:show</a></li><li data-v-a2f64316><a href="directives.html#bind" data-v-a2f64316>bind</a></li><li data-v-a2f64316><a href="directives.html#catch" data-v-a2f64316>catch</a></li><li data-v-a2f64316><a href="directives.html#capture-bind" data-v-a2f64316>capture-bind</a></li><li data-v-a2f64316><a href="directives.html#capture-catch" data-v-a2f64316>capture-catch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>内建组件</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="builtIn.html#component" data-v-a2f64316>component</a></li><li data-v-a2f64316><a href="builtIn.html#slot" data-v-a2f64316>slot</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="编译构建" data-v-a2f64316>编译构建</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>webpack 配置</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#output-publicpath" data-v-a2f64316>output.publicPath</a></li><li data-v-a2f64316><a href="compile.html#output-filename" data-v-a2f64316>output.filename</a></li><li data-v-a2f64316><a href="compile.html#node-global" data-v-a2f64316>node.global</a></li><li data-v-a2f64316><a href="compile.html#rule-resourcequery" data-v-a2f64316>rule.resourceQuery</a></li><li data-v-a2f64316><a href="compile.html#resolve-extensions" data-v-a2f64316>resolve.extensions</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>MpxWebpackPlugin options (1)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#mode" data-v-a2f64316>mode</a></li><li data-v-a2f64316><a href="compile.html#srcmode" data-v-a2f64316>srcMode</a></li><li data-v-a2f64316><a href="compile.html#moderules" data-v-a2f64316>modeRules</a></li><li data-v-a2f64316><a href="compile.html#externalclasses" data-v-a2f64316>externalClasses</a></li><li data-v-a2f64316><a href="compile.html#resolvemode" data-v-a2f64316>resolveMode</a></li><li data-v-a2f64316><a href="compile.html#projectroot" data-v-a2f64316>projectRoot</a></li><li data-v-a2f64316><a href="compile.html#writemode" data-v-a2f64316>writeMode</a></li><li data-v-a2f64316><a href="compile.html#autoscoperules" data-v-a2f64316>autoScopeRules</a></li><li data-v-a2f64316><a href="compile.html#catch" data-v-a2f64316>catch</a></li><li data-v-a2f64316><a href="compile.html#forcedisableproxyctor" data-v-a2f64316>forceDisableProxyCtor</a></li><li data-v-a2f64316><a href="compile.html#transmpxrules" data-v-a2f64316>transMpxRules</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>MpxWebpackPlugin options (2)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#forceproxyeventrules" data-v-a2f64316>forceProxyEventRules</a></li><li data-v-a2f64316><a href="compile.html#autosplit" data-v-a2f64316>autoSplit</a></li><li data-v-a2f64316><a href="compile.html#defs" data-v-a2f64316>defs</a></li><li data-v-a2f64316><a href="compile.html#attributes" data-v-a2f64316>attributes</a></li><li data-v-a2f64316><a href="compile.html#externals" data-v-a2f64316>externals</a></li><li data-v-a2f64316><a href="compile.html#mininpmpackage" data-v-a2f64316>miniNpmPackage</a></li><li data-v-a2f64316><a href="compile.html#forceusepagector" data-v-a2f64316>forceUsePageCtor</a></li><li data-v-a2f64316><a href="compile.html#transrpxrules" data-v-a2f64316>transRpxRules</a></li><li data-v-a2f64316><a href="compile.html#postcssinlineconfig" data-v-a2f64316>postcssInlineConfig</a></li><li data-v-a2f64316><a href="compile.html#decodehtmltext" data-v-a2f64316>decodeHTMLText</a></li><li data-v-a2f64316><a href="compile.html#nativeconfig" data-v-a2f64316>nativeConfig</a></li><li data-v-a2f64316><a href="compile.html#webconfig" data-v-a2f64316>webConfig</a></li><li data-v-a2f64316><a href="compile.html#i18n" data-v-a2f64316>i18n</a></li><li data-v-a2f64316><a href="compile.html#auditresource" data-v-a2f64316>auditResource</a></li><li data-v-a2f64316><a href="compile.html#subpackagemodulesrules" data-v-a2f64316>subpackageModulesRules</a></li><li data-v-a2f64316><a href="compile.html#generatebuildmap" data-v-a2f64316>generateBuildMap</a></li><li data-v-a2f64316><a href="compile.html#autovirtualhostrules" data-v-a2f64316>autoVirtualHostRules</a></li><li data-v-a2f64316><a href="compile.html#partialcompilerules" data-v-a2f64316>partialCompileRules</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>MpxWebpackPlugin static methods</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-loader" data-v-a2f64316>MpxWebpackPlugin.loader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-pluginloader" data-v-a2f64316>MpxWebpackPlugin.pluginLoader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-wxspreloader" data-v-a2f64316>MpxWebpackPlugin.wxsPreLoader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-fileloader" data-v-a2f64316>MpxWebpackPlugin.fileLoader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-urlloader" data-v-a2f64316>MpxWebpackPlugin.urlLoader</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Request query</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#resolve" data-v-a2f64316>?resolve</a></li><li data-v-a2f64316><a href="compile.html#root" data-v-a2f64316>?root</a></li><li data-v-a2f64316><a href="compile.html#fallback" data-v-a2f64316>?fallback</a></li><li data-v-a2f64316><a href="compile.html#uselocal" data-v-a2f64316>?useLocal</a></li><li data-v-a2f64316><a href="compile.html#isstyle" data-v-a2f64316>?isStyle</a></li><li data-v-a2f64316><a href="compile.html#ispage" data-v-a2f64316>?isPage</a></li><li data-v-a2f64316><a href="compile.html#iscomponent" data-v-a2f64316>?isComponent</a></li><li data-v-a2f64316><a href="compile.html#async" data-v-a2f64316>?async</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="周边拓展" data-v-a2f64316>周边拓展</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>@mpxjs/fetch</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="extend.html#fetch" data-v-a2f64316>fetch</a></li><li data-v-a2f64316><a href="extend.html#canceltoken" data-v-a2f64316>CancelToken</a></li><li data-v-a2f64316><a href="extend.html#xfetch" data-v-a2f64316>XFetch</a></li><li data-v-a2f64316><a href="extend.html#interceptors" data-v-a2f64316>interceptors</a></li><li data-v-a2f64316><a href="extend.html#proxy" data-v-a2f64316>proxy 代理</a></li><li data-v-a2f64316><a href="extend.html#usefetch" data-v-a2f64316>useFetch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>其他</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="extend.html#api-proxy" data-v-a2f64316>api-proxy</a></li><li data-v-a2f64316><a href="extend.html#webview-bridge" data-v-a2f64316>webview-bridge</a></li><li data-v-a2f64316><a href="extend.html#size-report" data-v-a2f64316>size-report</a></li><li data-v-a2f64316><a href="extend.html#i18n" data-v-a2f64316>i18n</a></li></ul></div></div></div> <!----></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/app-config.html b/docs-vuepress/.vuepress/dist/api/app-config.html
deleted file mode 100644
index 15e02d6edd..0000000000
--- a/docs-vuepress/.vuepress/dist/api/app-config.html
+++ /dev/null
@@ -1,116 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>全局配置 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/36.d2c9afa9.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" aria-current="page" class="active sidebar-link">全局配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/app-config.html#usestrictdiff" class="sidebar-link">useStrictDiff</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#ignorewarning" class="sidebar-link">ignoreWarning</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#ignoreproxywhitelist" class="sidebar-link">ignoreProxyWhiteList</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#observeclassinstance" class="sidebar-link">observeClassInstance</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#proxyeventhandler" class="sidebar-link">proxyEventHandler</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#setdatahandler" class="sidebar-link">setDataHandler</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#forceflushsync" class="sidebar-link">forceFlushSync</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#errorhandler" class="sidebar-link">errorHandler</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#webrouteconfig" class="sidebar-link">webRouteConfig</a></li><li class="sidebar-sub-header"><a href="/api/app-config.html#webconfig" class="sidebar-link">webConfig</a></li></ul></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="全局配置"><a href="#全局配置" class="header-anchor">#</a> 全局配置</h1> <p><code>Mpx.config</code> 是一个对象，包含 Mpx 的全局配置。可以在启动应用之前修改下列 property：</p> <h2 id="usestrictdiff"><a href="#usestrictdiff" class="header-anchor">#</a> useStrictDiff</h2> <p><code>boolean = false</code></p> <p>每次有数据变更时，是否使用严格的 diff 算法。如果项目中有大数据集的渲染建议使用，可以提升效率。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>useStrictDiff <span class="token operator">=</span> <span class="token boolean">true</span>
-</code></pre></div><blockquote><p>注意：由于微信小程序的bug，同时使用<code>useStrictDiff</code>和增强指令<code>wx:style</code>时，要注意更改数据的方式。如下所示：</p></blockquote> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 入口文件</span>
-<span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>useStrictDiff <span class="token operator">=</span> <span class="token boolean">true</span>
-
-<span class="token comment">// 页面page文件</span>
-<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
-  <span class="token operator">&lt;</span>view<span class="token operator">&gt;</span>
-    <span class="token operator">&lt;</span>view wx<span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{{style}}&quot;</span><span class="token operator">&gt;</span>test<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
-
-<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'18px'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">onLoad</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">// 当useStrictDiff设置true时，需要用setData的方式设置整个style对象</span>
-          <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'18px'</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span><span class="token punctuation">)</span>
-        <span class="token comment">// this.style.color = 'blue' // 当useStrictDiff设置true时，不能使用这种方式，style不会生效</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><h2 id="ignorewarning"><a href="#ignorewarning" class="header-anchor">#</a> ignoreWarning</h2> <p><code>boolean = false</code></p> <p>是否忽略运行时的 warning 信息，默认不忽略。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>ignoreWarning <span class="token operator">=</span> <span class="token boolean">true</span>
-</code></pre></div><h2 id="ignoreproxywhitelist"><a href="#ignoreproxywhitelist" class="header-anchor">#</a> ignoreProxyWhiteList</h2> <p><code>Array&lt;string&gt; = ['id']</code></p> <p>Mpx 实例上的 key（包括data、computed、methods）如果有重名冲突，在<code>ignoreProxyWhiteList</code>配置中的属性会被最新的覆盖；而不在<code>ignoreProxyWhiteList</code>配置中的属性，不会被覆盖。</p> <blockquote><p>只要有重名冲突均会有报错提示。</p></blockquote> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>ignoreConflictWhiteList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'id'</span><span class="token punctuation">,</span> <span class="token string">'test'</span><span class="token punctuation">]</span>
-</code></pre></div><h2 id="observeclassinstance"><a href="#observeclassinstance" class="header-anchor">#</a> observeClassInstance</h2> <p><code>boolean = false</code></p> <p>当需要对 class 对象的数据进行响应性转化，需要开启该选项。</p> <h2 id="proxyeventhandler"><a href="#proxyeventhandler" class="header-anchor">#</a> proxyEventHandler</h2> <p><code>Function</code></p> <p>需要代理的事件的钩子方法，该钩子方法仅对内联传参事件或 <a href="/api/compile.html#forceproxyeventrules">forceProxyEventRules</a> 规则匹配的事件生效。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token function-variable function">proxyEventHandler</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 入参为 event 事件对象</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="setdatahandler"><a href="#setdatahandler" class="header-anchor">#</a> setDataHandler</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">setDataHandler</span><span class="token punctuation">(</span>data<span class="token operator">:</span> object<span class="token punctuation">,</span> target<span class="token operator">:</span> ComponentIns<span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span>
-</code></pre></div><p>页面/组件状态更新时，使用该方法可以对 setData 调用进行监听，可以用来统计 setData 调用次数和数据量的统计，方法的入参是 setData 传输的 data 和当前组件实例。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token function-variable function">setDataHandler</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> comp</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'setData trigger'</span><span class="token punctuation">,</span> data<span class="token punctuation">,</span> comp<span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="forceflushsync"><a href="#forceflushsync" class="header-anchor">#</a> forceFlushSync</h2> <p><code>boolean = false</code></p> <p>Mpx 中更改响应性状态时，最终页面的更新并不是同步立即生效的，而是由 Mpx 将它们缓存在一个队列中， 异步等到下一个 tick 一起执行，如果想将所有队列的执行改为同步执行，我们可以通过该配置来实现。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>forceFlushSync <span class="token operator">=</span> <span class="token boolean">true</span>
-</code></pre></div><h2 id="errorhandler"><a href="#errorhandler" class="header-anchor">#</a> errorHandler</h2> <p><code>Function</code></p> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token function-variable function">errorHandler</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">errmsg<span class="token punctuation">,</span> location<span class="token punctuation">,</span> error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token comment">// errmsg: 框架内部运行报错的报错归类信息，例如当执行一个watch方法报错时，会是 &quot;Unhandled error occurs during execution of watch callback!&quot;</span>
-  <span class="token comment">// location: 具体报错的代码路径，可选项，不一定存在</span>
-  <span class="token comment">// error: 具体的错误堆栈，可选项，不一定存在</span>
-  <span class="token comment">// handle error</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>Mpx 框架运行时报错捕获感知处理函数。</p> <ul><li>Mpx 框架生命周期执行错误；</li> <li>Mpx 中的 computed、watch 等内置方法执行报错；</li> <li>Mpx 框架的运行时的检测报错，例如存在目标平台不支持的属性，入参出参类型错误等；</li></ul> <p>同时被捕获的错误会通过 console.error 输出。</p> <h2 id="webrouteconfig"><a href="#webrouteconfig" class="header-anchor">#</a> webRouteConfig</h2> <p>Mpx 通过 config 暴露出 webRouteConfig 配置项，在 web 环境可以对路由进行配置。
-此配置后续将被废弃，请使用 webConfig 进行配置</p> <ul><li><strong>用法</strong>:</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>webRouteConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'history'</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="webconfig"><a href="#webconfig" class="header-anchor">#</a> webConfig</h2> <p>web 环境下的一些配置，如路由模式，页面切换动画效果等</p> <ul><li><strong>用法</strong>:</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 修改路由模式</span>
-mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>webConfig<span class="token punctuation">.</span>routeConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'history'</span>
-<span class="token punctuation">}</span>
-<span class="token comment">// 禁用页面切换动画</span>
-mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>webConfig<span class="token punctuation">.</span>disablePageTransition <span class="token operator">=</span> <span class="token boolean">true</span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/api/global-api.html">
-        全局 API
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/36.d2c9afa9.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/builtIn.html b/docs-vuepress/.vuepress/dist/api/builtIn.html
deleted file mode 100644
index 440c70c028..0000000000
--- a/docs-vuepress/.vuepress/dist/api/builtIn.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>内建组件 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/37.4e1eee2c.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" aria-current="page" class="active sidebar-link">内建组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/builtIn.html#component" class="sidebar-link">component</a></li><li class="sidebar-sub-header"><a href="/api/builtIn.html#slot" class="sidebar-link">slot</a></li></ul></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="内建组件"><a href="#内建组件" class="header-anchor">#</a> 内建组件</h1> <h2 id="component"><a href="#component" class="header-anchor">#</a> component</h2> <ul><li><p>is <code>string</code> : 动态渲染组件，通过改变<code>is</code>的值，来渲染不同的组件</p></li> <li><p>range <code>string</code> : 使用 range 来指定可能渲染的组件，不传递时则为 全局注册 + usingComponents 中注册的所有组件，存在多个组件时使用逗号 <code>,</code> 分隔</p></li></ul> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token comment">&lt;!-- ComponentName 是在全局或者组件中完成注册的组件名称 --&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ComponentName}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
-
-  <span class="token comment">&lt;!-- 只会展示 compA 或者 compB 组件 --&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ComponentName}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">range</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>compA,compB<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>参考</strong>：<a href="/guide/basic/component.html#动态组件">动态组件</a></p> <h2 id="slot"><a href="#slot" class="header-anchor">#</a> slot</h2> <ul><li>name <code>string</code> : 用于命名插槽</li></ul> <p><code>&lt;slot&gt;</code> 元素作为组件模板中的内容分发插槽，<code>&lt;slot&gt;</code>元素自身将被替换。</p> <p>详细用法，可参考下面的链接。</p> <p><strong>参考</strong>：<a href="/guide/basic/component.html#slot">slot</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/api/compile.html" class="prev">
-        编译构建
-      </a></span> <span class="next"><a href="/api/reactivity-api.html">
-        响应式 API
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/37.4e1eee2c.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/compile.html b/docs-vuepress/.vuepress/dist/api/compile.html
deleted file mode 100644
index 58c276a54b..0000000000
--- a/docs-vuepress/.vuepress/dist/api/compile.html
+++ /dev/null
@@ -1,1214 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>编译构建 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/38.7826170e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" aria-current="page" class="active sidebar-link">编译构建</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#类型定义" class="sidebar-link">类型定义</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#rules" class="sidebar-link">Rules</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin" class="sidebar-link">MpxWebpackPlugin</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#mode" class="sidebar-link">mode</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#srcmode" class="sidebar-link">srcMode</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#moderules" class="sidebar-link">modeRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#externalclasses" class="sidebar-link">externalClasses</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#resolvemode" class="sidebar-link">resolveMode</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#projectroot" class="sidebar-link">projectRoot</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#writemode" class="sidebar-link">writeMode</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#autoscoperules" class="sidebar-link">autoScopeRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#forcedisableproxyctor" class="sidebar-link">forceDisableProxyCtor</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#transmpxrules" class="sidebar-link">transMpxRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#forceproxyeventrules" class="sidebar-link">forceProxyEventRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#defs" class="sidebar-link">defs</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#attributes" class="sidebar-link">attributes</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#externals" class="sidebar-link">externals</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mininpmpackage" class="sidebar-link">miniNpmPackage</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#forceusepagector" class="sidebar-link">forceUsePageCtor</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#transrpxrules" class="sidebar-link">transRpxRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#postcssinlineconfig" class="sidebar-link">postcssInlineConfig</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#decodehtmltext" class="sidebar-link">decodeHTMLText</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#nativeconfig" class="sidebar-link">nativeConfig</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#webconfig" class="sidebar-link">webConfig</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#i18n" class="sidebar-link">i18n</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#auditresource" class="sidebar-link">auditResource</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#subpackagemodulesrules" class="sidebar-link">subpackageModulesRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#generatebuildmap" class="sidebar-link">generateBuildMap</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#autovirtualhostrules" class="sidebar-link">autoVirtualHostRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#partialcompilerules" class="sidebar-link">partialCompileRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#optimizerenderrules" class="sidebar-link">optimizeRenderRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#asyncsubpackagerules" class="sidebar-link">asyncSubpackageRules</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#retryrequireasync" class="sidebar-link">retryRequireAsync</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#disablerequireasync" class="sidebar-link">disableRequireAsync</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#optimizesize" class="sidebar-link">optimizeSize</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-static-methods" class="sidebar-link">MpxWebpackPlugin static methods</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-loader" class="sidebar-link">MpxWebpackPlugin.loader</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-pluginloader" class="sidebar-link">MpxWebpackPlugin.pluginLoader</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-wxspreloader" class="sidebar-link">MpxWebpackPlugin.wxsPreLoader</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-fileloader" class="sidebar-link">MpxWebpackPlugin.fileLoader</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-urlloader" class="sidebar-link">MpxWebpackPlugin.urlLoader</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-getpageentry" class="sidebar-link">MpxWebpackPlugin.getPageEntry</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-getcomponententry" class="sidebar-link">MpxWebpackPlugin.getComponentEntry</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxwebpackplugin-getnativeentry" class="sidebar-link">MpxWebpackPlugin.getNativeEntry</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxunocssplugin" class="sidebar-link">MpxUnocssPlugin</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#unofile" class="sidebar-link">unoFile</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#mincount" class="sidebar-link">minCount</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#styleisolation" class="sidebar-link">styleIsolation</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#scan" class="sidebar-link">scan</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#escapemap" class="sidebar-link">escapeMap</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#root" class="sidebar-link">root</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#transformcss" class="sidebar-link">transformCSS</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#transformgroups" class="sidebar-link">transformGroups</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#config" class="sidebar-link">config</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#configfiles" class="sidebar-link">configFiles</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#commentconfig" class="sidebar-link">commentConfig</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/compile.html#mpxunocssbase" class="sidebar-link">MpxUnocssBase</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#basefontsize" class="sidebar-link">baseFontSize</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#preflight" class="sidebar-link">preflight</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#dark" class="sidebar-link">dark</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#attributifypseudo" class="sidebar-link">attributifyPseudo</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#variableprefix" class="sidebar-link">variablePrefix</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/compile.html#request-query" class="sidebar-link">Request query</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/compile.html#resolve" class="sidebar-link">?resolve</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#root" class="sidebar-link">?root</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#fallback" class="sidebar-link">?fallback</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#uselocal" class="sidebar-link">?useLocal</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#isstyle" class="sidebar-link">?isStyle</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#ispage" class="sidebar-link">?isPage</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#iscomponent" class="sidebar-link">?isComponent</a></li><li class="sidebar-sub-header"><a href="/api/compile.html#async" class="sidebar-link">?async</a></li></ul></li></ul></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="编译构建"><a href="#编译构建" class="header-anchor">#</a> 编译构建</h1> <p>对于使用 <code>@mpxjs/cli@3.x</code> 脚手架初始化的项目而言，编译构建相关的配置统一收敛至项目根目录下的 <code>vue.config.js</code> 进行配置。一个新项目初始化的 <code>vue.config.js</code> 如下图，相较于 <code>@mpxjs/cli@2.x</code> 版本，在新的初始化项目当中原有的编译构建配置都收敛至 cli 插件当中进行管理和维护，同时还对外暴露相关的接口或者 api 使得开发者能自定义修改 cli 插件当中默认的配置。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token comment">// mpx webpack plugin options</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token comment">// @mpxjs/unocss-plugin 相关的配置</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>对于使用 <code>@mpxjs/cli@2.x</code> 脚手架初始化的项目，编译构建配置涉及到 mpx 插件相关的配置主要是在 <code>config</code> 目录下 <code>mpxPlugin.conf.js</code>，涉及到 webpack 本身的配置主要是在 <code>build</code> 目录下。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// config/mpxPlugin.conf.js</span>
-module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">return</span> <span class="token punctuation">{</span>
-    <span class="token comment">// mpx webpack plugin options</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="类型定义"><a href="#类型定义" class="header-anchor">#</a> 类型定义</h2> <p>为了便于对编译配置的数据类型进行准确地描述，我们在这里对一些常用的配置类型进行定义</p> <h3 id="rules"><a href="#rules" class="header-anchor">#</a> Rules</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">Condition</span> <span class="token operator">=</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>resourcePath<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span> <span class="token operator">|</span> RegExp
-
-<span class="token keyword">interface</span> <span class="token class-name">Rules</span> <span class="token punctuation">{</span>
-  include<span class="token operator">?</span><span class="token operator">:</span> Condition <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>Condition<span class="token operator">&gt;</span>
-  exclude<span class="token operator">?</span><span class="token operator">:</span> Condition <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>Condition<span class="token operator">&gt;</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="mpxwebpackplugin"><a href="#mpxwebpackplugin" class="header-anchor">#</a> MpxWebpackPlugin</h2> <p>Mpx 编译构建跨平台小程序和 web 的 webpack 主插件，安装示例如下：</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @mpxjs/webpack-plugin
-<span class="token function">pnpm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @mpxjs/webpack-plugin
-<span class="token function">yarn</span> <span class="token function">add</span> <span class="token parameter variable">-D</span> @mpxjs/webpack-plugin
-</code></pre></div><p>使用示例如下：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token comment">// mpx webpack plugin options</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>MpxWebpackPlugin支持传入以下配置：</p> <h3 id="mode"><a href="#mode" class="header-anchor">#</a> mode</h3> <p><code>'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'jd' | 'dd' | 'qa' | 'web' = 'wx'</code></p> <p>mode 为 Mpx 编译的目标平台， 目前支持的有微信小程序(wx)\支付宝小程序(ali)\百度小程序(swan)\头条小程序(tt)\QQ 小程序(qq)\京东小程序(jd)\滴滴小程序(dd)\快应用(qa)\H5 页面(web)。</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在 @mpxjs/cli@3.x 版本当中，通过在 <code>npm script</code> 当中定义 <code>targets</code> 来设置目标平台</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 项目 package.json</span>
-<span class="token punctuation">{</span>
-  <span class="token string-property property">&quot;script&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;build:cross&quot;</span><span class="token operator">:</span> <span class="token string">&quot;mpx-cli-service build --targets=wx,ali&quot;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div></div> <h3 id="srcmode"><a href="#srcmode" class="header-anchor">#</a> srcMode</h3> <p><code>'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'jd' | 'dd' | 'qa' = 'wx'</code></p> <p>默认和 <a href="#mode">mode</a> 一致。，当 srcMode 和 mode 不一致时，会读取相应的配置对项目进行编译和运行时的转换。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span> <span class="token comment">// 根据项目初始化所选平台来设定</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>暂时只支持微信为源 mode 做跨平台，为其他时，mode 必须和 srcMode 保持一致。</p></div> <h3 id="moderules"><a href="#moderules" class="header-anchor">#</a> modeRules</h3> <p><code>{ [key: string]: Rules }</code></p> <p>批量指定文件mode，用于条件编译场景下使用某些单小程序平台的库时批量标记这些文件的mode为对应平台，而不再走转换规则。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">modeRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">ali</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/vant-aliapp'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="externalclasses"><a href="#externalclasses" class="header-anchor">#</a> externalClasses</h3> <p><code>Array&lt;string&gt;</code></p> <p>定义若干个外部样式类，这些将会覆盖元素原有的样式。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">externalClasses</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'custom-class'</span><span class="token punctuation">,</span> <span class="token string">'i-class'</span><span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>抹平支付宝和微信之间的差异，当使用了微信 <strong>externalClasses</strong> 语法时，跨端输出需要在 @mpxjs/webpack-plugin 的配置中添加此配置来辅助框架进行转换。</p></div> <h3 id="resolvemode"><a href="#resolvemode" class="header-anchor">#</a> resolveMode</h3> <p><code>'webpack' | 'native' = 'webpack'</code></p> <p>指定resolveMode，默认webpack，更便于引入npm包中的页面/组件等资源。若想编写时和原生保持一致或兼容已有原生项目，可设为native，此时需要提供<a href="#projectroot">projectRoot</a>以指定项目根目录，且使用npm资源时需在前面加<code>~</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">resolveMode</span><span class="token operator">:</span> <span class="token string">'webpack'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="projectroot"><a href="#projectroot" class="header-anchor">#</a> projectRoot</h3> <p><code>string</code></p> <p>当resolveMode为native时需通过该字段指定项目根目录。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-         <span class="token literal-property property">resolveMode</span><span class="token operator">:</span> <span class="token string">'native'</span><span class="token punctuation">,</span>
-         <span class="token literal-property property">projectRoot</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../src'</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="writemode"><a href="#writemode" class="header-anchor">#</a> writeMode</h3> <p><code>'full' | 'change' = 'change'</code></p> <p>webpack 的输出默认是全量输出，而小程序开发者工具不关心文件是否真正发生了变化。设置为 change 时，Mpx 在 watch 模式下将内部 diff 一次，只会对内容发生变化的文件进行写入，以提升小程序开发者工具编译性能。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-         <span class="token literal-property property">writeMode</span><span class="token operator">:</span> <span class="token string">'change'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="autoscoperules"><a href="#autoscoperules" class="header-anchor">#</a> autoScopeRules</h3> <p><a href="#rules"><code>Rules</code></a></p> <p>是否需要对样式加 scope ，目前只有支付宝小程序平台没有样式隔离，因此该部分内容也只对支付宝小程序平台生效。提供 include 和 exclude 以精确控制对哪些文件进行样式隔离，哪些不隔离，和webpack的rules规则相同。也可以通过在 style 代码块上声明 scoped 进行。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-         <span class="token literal-property property">autoScopeRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-           <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'../src'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-           <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'../node_modules/vant-aliapp'</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token comment">// 比如一些组件库本来就是为支付宝小程序编写的，应该已经考虑过样式隔离，就不需要再添加</span>
-         <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="forcedisableproxyctor"><a href="#forcedisableproxyctor" class="header-anchor">#</a> forceDisableProxyCtor</h3> <p><code>boolean = false</code></p> <p>用于控制在跨平台输出时对实例构造函数（<code>App</code> | <code>Page</code> | <code>Component</code> | <code>Behavior</code>）进行代理替换以抹平平台差异。当配置 <code>forceDisableProxyCtor</code> 为 true 时，会强行取消平台差异抹平逻辑，开发时需针对输出到不同平台进行条件判断。</p> <h3 id="transmpxrules"><a href="#transmpxrules" class="header-anchor">#</a> transMpxRules</h3> <p><a href="#rules"><code>Rules</code></a></p> <p>是否转换 wx / my 等全局对象为 Mpx 对象，</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">transMpxRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token function-variable function">include</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@mpxjs'</span><span class="token punctuation">]</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="forceproxyeventrules"><a href="#forceproxyeventrules" class="header-anchor">#</a> forceProxyEventRules</h3> <p><a href="#rules"><code>Rules</code></a></p> <p>强制代理规则内配置的事件。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">forceProxyEventRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'bindtap'</span><span class="token punctuation">]</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="defs"><a href="#defs" class="header-anchor">#</a> defs</h3> <p><code>object</code></p> <p>给模板、js、json、style中定义一些全局常量。一般用于区分平台/环境。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">defs</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">__env__</span><span class="token operator">:</span> <span class="token string">'mini'</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>在模板中使用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{__env__}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>在js中使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> env <span class="token operator">=</span> __env__<span class="token punctuation">;</span>
-</code></pre></div><p>在style中使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/* @mpx-if (__env__ === 'mini') */</span>
-<span class="token punctuation">.</span>color <span class="token punctuation">{</span>
-  <span class="token literal-property property">background</span><span class="token operator">:</span> red<span class="token punctuation">;</span>
-<span class="token punctuation">}</span>
-<span class="token comment">/* @mpx-endif */</span>
-</code></pre></div><p>在json中使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script name<span class="token operator">=</span><span class="token string">'json'</span><span class="token operator">&gt;</span>
-  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;a&quot;</span><span class="token operator">:</span> __env__
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><blockquote><p>注意：这里定义之后使用的时候是按照全局变量来使用，而非按照<code>process.env.KEY</code>这样的形式</p></blockquote> <h3 id="attributes"><a href="#attributes" class="header-anchor">#</a> attributes</h3> <p><code>Array&lt;string&gt; = ['image:src', 'audio:src', 'video:src', 'cover-image:src', 'import:src', 'include:src']</code></p> <p><code>Mpx</code> 提供了可以给自定义标签设置资源的功能，配置该属性后，即可在目标标签中使用 <code>:src</code> 加载相应资源文件</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'customTag:src'</span><span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>customTag</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>https://www....../avator.png'<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>customTag</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>该属性可通过 <code>MpxWebpackPlugin</code> 配置，也可以通过配置 <code>WxmlLoader</code>，后者优先级高。</p></div> <h3 id="externals"><a href="#externals" class="header-anchor">#</a> externals</h3> <p><code>Array&lt;string&gt;</code></p> <p>目前仅支持微信小程序 weui 组件库通过 useExtendedLib 扩展库的方式引入，这种方式引入的组件将不会计入代码包大小。配置 externals 选项，Mpx 将不会解析 weui 组件的路径并打包。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">externals</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'weui'</span><span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token comment">// app.mpx json部分</span>
-  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;useExtendedLib&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;weui&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 在 page 中使用 weui 组件 --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'wx'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mp-icon</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>play<span class="token punctuation">&quot;</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>black<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{25}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>showDialog<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mp-icon</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mp-dialog</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span> <span class="token attr-name">show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{dialogShow}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindbuttontap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tapDialogButton<span class="token punctuation">&quot;</span></span> <span class="token attr-name">buttons</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{buttons}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>test content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mp-dialog</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span><span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">dialogShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">showOneButtonDialog</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">buttons</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'取消'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'确定'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">tapDialogButton</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>dialogShow <span class="token operator">=</span> <span class="token boolean">false</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>showOneButtonDialog <span class="token operator">=</span> <span class="token boolean">false</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token function">showDialog</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>dialogShow <span class="token operator">=</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">const</span> wxComponents <span class="token operator">=</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;mp-icon&quot;</span><span class="token operator">:</span> <span class="token string">&quot;weui-miniprogram/icon/icon&quot;</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;mp-dialog&quot;</span><span class="token operator">:</span> <span class="token string">&quot;weui-miniprogram/dialog/dialog&quot;</span>
-  <span class="token punctuation">}</span>
-  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> __mpx_mode__ <span class="token operator">===</span> <span class="token string">'wx'</span>
-      <span class="token operator">?</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> wxComponents<span class="token punctuation">)</span>
-      <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>参考</strong>：<a href="https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html" target="_blank">weui组件库</a></p> <h3 id="mininpmpackage"><a href="#mininpmpackage" class="header-anchor">#</a> miniNpmPackage</h3> <p><code>Array&lt;string&gt;</code></p> <p>微信小程序官方提供了<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html" target="_blank" rel="noopener noreferrer">发布小程序 npm 包的约束<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。
-部分小程序npm包，如<a href="https://vant-contrib.gitee.io/vant-weapp/#/quickstart" target="_blank" rel="noopener noreferrer">vant组件库<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>官方文档使用说明，引用资源并不会包含miniprogram所指定的目录
-如 &quot;@vant/weapp/button/index&quot;，导致 <code>Mpx</code> 解析路径失败。
-<code>Mpx</code>为解决这个问题，提供miniNpmPackage字段供用户配置需要解析的小程序npm包。miniNpmPackage对应的数组值为npm包对应的package.json中的name字段。
-<code>Mpx</code>解析规则如下:</p> <ol><li>如package.json中有miniprogram字段，则会默认拼接miniprogram对应的值到资源路径中</li> <li>如package.json中无miniprogram字段，但配置了miniNpmPackage，则默认会拼接miniprogram_dist目录</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">miniNpmPackage</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@vant/weapp'</span><span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="forceusepagector"><a href="#forceusepagector" class="header-anchor">#</a> forceUsePageCtor</h3> <p><code>Boolean = false</code></p> <p>为了获取更丰富的生命周期来进行更加完善的增强处理，在非支付宝小程序环境下，<code>Mpx</code> 默认会使用 <code>Conponent</code> 构造器来创建页面。将该值设置为 <code>true</code> 时，会强制使用 <code>Page</code> 构造器创建页面。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">forceUsePageCtor</span><span class="token operator">:</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="transrpxrules"><a href="#transrpxrules" class="header-anchor">#</a> transRpxRules</h3> <p><code>Array&lt;object&gt; | object</code></p> <ul><li><code>option.mode</code> 可选值有 none/only/all，分别是不启用/只对注释内容启用/只对非注释内容启用</li> <li><code>option.designWidth</code> 设计稿宽度，默认值就是750，可根据需要修改</li> <li><code>option.include</code> 同webpack的include规则</li> <li><code>option.exclude</code> 同webpack的exclude规则</li> <li><code>option.comment</code> rpx注释，建议使用 'use px'/'use rpx'，当 mode 为 all 时默认值为 use px，mode 为 only 时默认值为 'use rpx'</li></ul> <p>为了处理某些IDE中不支持<code>rpx</code>单位的问题，Mpx 提供了一个将 px 转换为 rpx 的功能。支持通过注释控制行级、块级的是否转换，支持局部使用，支持不同依赖分别使用不用的转换规则等灵活的能力。<code>transRpxRules</code>可以是一个对象，也可以是多个这种对象组成的数组。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">transRpxRules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-          <span class="token punctuation">{</span>
-            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'only'</span><span class="token punctuation">,</span> <span class="token comment">// 只对注释为'use rpx'的块儿启用转换rpx</span>
-            <span class="token literal-property property">comment</span><span class="token operator">:</span> <span class="token string">'use rpx'</span><span class="token punctuation">,</span> <span class="token comment">// mode为'only'时，默认值为'use rpx'</span>
-            <span class="token literal-property property">include</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">exclude</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'lib'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">designWidth</span><span class="token operator">:</span> <span class="token number">750</span>
-          <span class="token punctuation">}</span><span class="token punctuation">,</span>
-          <span class="token punctuation">{</span>
-            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span> <span class="token comment">// 所有样式都启用转换rpx，除了注释为'use px'的样式不转换</span>
-            <span class="token literal-property property">comment</span><span class="token operator">:</span> <span class="token string">'use px'</span><span class="token punctuation">,</span> <span class="token comment">// mode为'all'时，默认值为'use px'</span>
-            <span class="token literal-property property">include</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/@didi/mpx-sec-guard'</span><span class="token punctuation">)</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="应用场景及相应配置"><a href="#应用场景及相应配置" class="header-anchor">#</a> 应用场景及相应配置</h4> <p>接下来我们来看下一些应用场景及如何配置。如果是用脚手架生成的项目，在<code>mpx.plugin.conf.js</code>里找到<code>transRpxRules</code>，应该已经有预设的<code>transRpxRules</code>选项，按例修改即可。</p> <p>三种场景分别是 <a href="#%E5%9C%BA%E6%99%AF%E4%B8%80">普通使用</a> ， <a href="#%E5%9C%BA%E6%99%AF%E4%BA%8C">只对某些特殊样式转换</a> ， <a href="#%E5%9C%BA%E6%99%AF%E4%B8%89">不同路径分别配置规则</a></p> <h4 id="场景一"><a href="#场景一" class="header-anchor">#</a> 场景一</h4> <p>设计师给的稿是2倍图，分辨率750px。或者更高倍图。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">transRpxRules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
-          <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">designWidth</span><span class="token operator">:</span> <span class="token number">750</span> <span class="token comment">// 如果是其他倍，修改此值为设计稿的宽度即可</span>
-        <span class="token punctuation">}</span><span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="场景二"><a href="#场景二" class="header-anchor">#</a> 场景二</h4> <p>大部分样式都用px下，某些元素期望用rpx。或者反过来。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">transRpxRules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
-          <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'only'</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">comment</span><span class="token operator">:</span> <span class="token string">'use rpx'</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">designWidth</span><span class="token operator">:</span> <span class="token number">750</span> <span class="token comment">// 设计稿宽度</span>
-        <span class="token punctuation">}</span><span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>mpx的rpx注释能帮助你仅为部分类或者部分样式启用rpx转换，细节请看下方附录。</p> <h4 id="场景三"><a href="#场景三" class="header-anchor">#</a> 场景三</h4> <p>使用了第三方组件，它的设计宽度和主项目不一致，期望能设置不同的转换规则</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">transRpxRules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-          <span class="token punctuation">{</span>
-            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'only'</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">designWidth</span><span class="token operator">:</span> <span class="token number">750</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">comment</span><span class="token operator">:</span> <span class="token string">'use rpx'</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span>
-          <span class="token punctuation">}</span><span class="token punctuation">,</span>
-          <span class="token punctuation">{</span>
-            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">designWidth</span><span class="token operator">:</span> <span class="token number">1280</span><span class="token punctuation">,</span> <span class="token comment">// 对iview单独使用一个不同的designWidth</span>
-            <span class="token literal-property property">include</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/iview-weapp'</span><span class="token punctuation">)</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><blockquote><p>注意事项：转换规则是不可以对一个文件做多次转换的，会出错，所以一旦被一个规则命中后就不会再次命中另一个规则，include 和 exclude 的编写需要注意先后顺序，就比如上面这个配置，如果第一个规则 include 的是 '/' 即整个项目，iview-weapp 里的样式就无法命中第二条规则了。</p></blockquote> <h4 id="transrpxrules附录"><a href="#transrpxrules附录" class="header-anchor">#</a> transRpxRules附录</h4> <ul><li><strong>designWidth</strong></li></ul> <p>设计稿宽度，单位为<code>px</code>。默认值为<code>750px</code>。</p> <p><code>mpx</code>会基于小程序标准的屏幕宽度<code>baseWidth 750rpx</code>，与<code>option.designWidth</code>计算出一个转换比例<code>transRatio</code>。</p> <p>转换比例的计算方式为<code>transRatio = (baseWidth / designWidth)</code>，精度为小数点后2位四舍五入。</p> <p>所有生效的<code>rpx注释样式</code>中的px会乘上<code>transRatio</code>得出最终的 rpx 值。</p> <p>例如：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 转换前：designWidth = 1280 */</span>
-<span class="token selector">.btn</span> <span class="token punctuation">{</span>
-  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
-  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">/* 转换后: transRatio = 0.59 */</span>
-<span class="token selector">.btn</span> <span class="token punctuation">{</span>
-  <span class="token property">width</span><span class="token punctuation">:</span> 118rpx<span class="token punctuation">;</span>
-  <span class="token property">height</span><span class="token punctuation">:</span> 59rpx<span class="token punctuation">;</span>
-<span class="token punctuation">}</span>
-</code></pre></div><ul><li><strong>comment: rpx 注释样式</strong></li></ul> <p>根据<code>rpx注释</code>的位置，<code>mpx</code>会将<code>一段css规则</code>或者<code>一条css声明</code>视为<code>rpx注释样式</code>。</p> <p>开发者可以声明一段 rpx 注释样式，提示编译器是否转换这段 css 中的 px。</p> <p>例如：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
-  <span class="token comment">/* use rpx */</span>
-  <span class="token selector">.not-translate-a</span> <span class="token punctuation">{</span>
-    <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
-    <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-  <span class="token selector">.not-translate-b</span> <span class="token punctuation">{</span>
-    <span class="token comment">/* use rpx */</span>
-    <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
-    <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-  <span class="token selector">.translate-a</span> <span class="token punctuation">{</span>
-    <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
-    <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-  <span class="token selector">.translate-b</span> <span class="token punctuation">{</span>
-    <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
-    <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><blockquote><p>第一个注释位于一个<code>选择器</code>前，是一个<code>css规则注释</code>，整个规则都会被视为<code>rpx注释样式</code></p></blockquote> <blockquote><p>第二个注释位于一个<code>css声明</code>前，是一个<code>css声明注释</code>，只有<code>font-size: 100px</code>会被视为<code>rpx注释样式</code></p></blockquote> <blockquote><p><code>transRpx = only</code>模式下，只有两部分<code>rpx注释样式</code>会转rpx。</p></blockquote> <h3 id="postcssinlineconfig"><a href="#postcssinlineconfig" class="header-anchor">#</a> postcssInlineConfig</h3> <p><code>{options? : PostcssOptions, plugins? : PostcssPlugin[], mpxPrePlugins? : PostcssPlugin[], ignoreConfigFile : Boolean}</code></p> <p>使用类似于 postcss.config.js 的语法书写 postcss 的配置文件。用于定义 Mpx 对于组件/页面样式进行 postcss 处理时的配置， ignoreConfigFile 传递为 true 时会忽略项目中的 postcss 配置文件 。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">postcssInlineConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-            <span class="token comment">// require('postcss-import'),</span>
-            <span class="token comment">// require('postcss-preset-env'),</span>
-            <span class="token comment">// require('cssnano'),</span>
-            <span class="token comment">// require('autoprefixer')</span>
-          <span class="token punctuation">]</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>注意</strong>：默认添加的 postcss 插件均会在<code>mpx的内置插件</code>（例如如rpx插件等）之后处理。如需使配置的插件优先于内置插件，可以在 <code>postcssInlineConfig</code> 中添加 <code>mpxPrePlugins</code> 配置：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">postcssInlineConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-            <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-import'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-            <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-preset-env'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-          <span class="token punctuation">]</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">mpxPrePlugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-            <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'cssnano'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-            <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'autoprefixer'</span><span class="token punctuation">)</span>
-          <span class="token punctuation">]</span>
-          <span class="token comment">// 以下写法同理</span>
-          <span class="token comment">// mpxPrePlugins: {</span>
-          <span class="token comment">//   'cssnano': {},</span>
-          <span class="token comment">//   'autoprefixer': {}</span>
-          <span class="token comment">// }</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><code>postcss.config.js</code> 中配置同理：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// postcss.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-import'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-preset-env'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-  <span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mpxPrePlugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'cssnano'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'autoprefixer'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-
-</code></pre></div><p>在上面这个例子当中，postcss 插件处理的最终顺序为：<code>cssnano</code> -&gt; <code>autoprefixer</code> -&gt; <code>mpx内置插件</code> -&gt; <code>postcss-import</code> -&gt; <code>postcss-preset-env</code></p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>注意：在 <code>mpxPrePlugins</code> 中配置的 postcss 插件如果不通过 mpx 进行处理，那么将不会生效。</p></div> <h3 id="decodehtmltext"><a href="#decodehtmltext" class="header-anchor">#</a> decodeHTMLText</h3> <p><code>boolean = false</code></p> <p>设置为 true 时在模板编译时对模板中的 text 内容进行 decode</p> <h3 id="nativeconfig"><a href="#nativeconfig" class="header-anchor">#</a> nativeConfig</h3> <p><code>{cssLangs: string[]}</code></p> <p>为原生多文件写法添加css预处理语言支持，用于优先搜索预编译器后缀的文件，按 cssLangs 中的声明顺序查找。默认按照 css , less , stylus ,  scss , sass 的顺序</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">nativeConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">cssLangs</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'css'</span><span class="token punctuation">,</span> <span class="token string">'less'</span><span class="token punctuation">,</span> <span class="token string">'stylus'</span><span class="token punctuation">,</span> <span class="token string">'scss'</span><span class="token punctuation">,</span> <span class="token string">'sass'</span><span class="token punctuation">]</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="webconfig"><a href="#webconfig" class="header-anchor">#</a> webConfig</h3> <p><code>{transRpxFn(match:string, $1:number): string}</code></p> <p>transRpxFn 配置用于自定义输出 web 时对于 rpx 样式单位的转换逻辑，常见的方式有转换为 vw 或转换为 rem</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">webConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token function-variable function">transRpxFn</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">match<span class="token punctuation">,</span> $1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            <span class="token keyword">if</span> <span class="token punctuation">(</span>$1 <span class="token operator">===</span> <span class="token string">'0'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> $1
-            <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>$1 <span class="token operator">*</span> <span class="token operator">+</span><span class="token punctuation">(</span><span class="token number">100</span> <span class="token operator">/</span> <span class="token number">750</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">vw</span><span class="token template-punctuation string">`</span></span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="i18n"><a href="#i18n" class="header-anchor">#</a> i18n</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token string-property property">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-              <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} world'</span>
-              <span class="token punctuation">}</span>
-            <span class="token punctuation">}</span><span class="token punctuation">,</span>
-            <span class="token string-property property">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-              <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} 世界'</span>
-              <span class="token punctuation">}</span>
-            <span class="token punctuation">}</span>
-          <span class="token punctuation">}</span><span class="token punctuation">,</span>
-          <span class="token comment">// messagesPath: path.resolve(__dirname, '../src/i18n.js')</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>Mpx 支持国际化，底层实现依赖类<code>wxs</code>能力，通过指定语言标识和语言包，可实现多语言之间的动态切换。可配置项包括locale、messages、messagesPath。</p> <h4 id="i18n-locale"><a href="#i18n-locale" class="header-anchor">#</a> i18n.locale</h4> <p><code>string</code></p> <p>通过配置 locale 属性，可指定语言标识，默认值为 'zh-CN'</p> <h4 id="i18n-messages"><a href="#i18n-messages" class="header-anchor">#</a> i18n.messages</h4> <p><code>object</code></p> <p>通过配置 messages 属性，可以指定项目语言包，Mpx 会依据语言包对象定义进行转换，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-  <span class="token string-property property">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">'title'</span><span class="token operator">:</span> <span class="token string">'DiDi Chuxing'</span><span class="token punctuation">,</span>
-      <span class="token string-property property">'subTitle'</span><span class="token operator">:</span> <span class="token string">'Make travel better'</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token string-property property">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">'title'</span><span class="token operator">:</span> <span class="token string">'滴滴出行'</span><span class="token punctuation">,</span>
-      <span class="token string-property property">'subTitle'</span><span class="token operator">:</span> <span class="token string">'让出行更美好'</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h4 id="i18n-messagespath"><a href="#i18n-messagespath" class="header-anchor">#</a> i18n.messagesPath</h4> <p><code>string</code></p> <p>为便于开发，Mpx 还支持配置语言包资源路径 messagesPath 来代替 messages 属性，Mpx 会从该路径下的 js 文件导出语言包对象。如果同时配置 messages 和 messagesPath 属性，Mpx 会优先设定 messages 为 i18n 语言包资源。</p> <p>详细介绍及使用见<a href="/guide/tool/i18n.html">工具-国际化i18n</a>一节。</p> <h3 id="auditresource"><a href="#auditresource" class="header-anchor">#</a> auditResource</h3> <p><code>'component' | boolean = false</code></p> <p>检查资源输出情况，如果置为true，则会提示有哪些资源被同时输出到了多个分包，可以检查是否应该放进主包以消减体积，设置为 <code>'component'</code> 的话，则只检查组件资源是否被输出到多个分包。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">auditResource</span><span class="token operator">:</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="subpackagemodulesrules"><a href="#subpackagemodulesrules" class="header-anchor">#</a> subpackageModulesRules</h3> <p><code>object</code></p> <p>是否将多分包共用的模块分别输出到各自分包中，匹配规则为include匹配到且未被exclude匹配到的资源</p> <p>依据微信小程序的分包策略，多个分包使用到的 js 模块会打入主包当中，但在大型分包较多的项目中，该策略极易将大量的模块打入主包，从而使主包体积大小超出2M限制，该配置项提供给开发者自主抉择，可将部分模块冗余输出至多个分包，从而控制主包体积不超限</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">subpackageModulesRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@someNpm/name/src/api/*.js'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@someNpm/name/src/api/module.js'</span><span class="token punctuation">]</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><blockquote><p>tips: 该功能是将模块分别放入多个分包，模块状态不可复用，使用前要依据模块功能做好评估，例如全局store就不适用该功能</p></blockquote> <h3 id="generatebuildmap"><a href="#generatebuildmap" class="header-anchor">#</a> generateBuildMap</h3> <p><code>boolean = false</code></p> <p>是否生成构建结果与源码之间的映射文件。用于单元测试等场景。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">generateBuildMap</span><span class="token operator">:</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>参考</strong>：<a href="/guide/tool/unit-test.html">单元测试</a></p> <h3 id="autovirtualhostrules"><a href="#autovirtualhostrules" class="header-anchor">#</a> autoVirtualHostRules</h3> <p><a href="#rules"><code>Rules</code></a>
-批量配置是否虚拟化组件节点，对应微信中<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html" target="_blank" rel="noopener noreferrer"><code>VirtualHost</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 。默认不开启，开启后也将抹平支付宝小程序中的表现差异。提供 include 和 exclude 以精确控制对哪些文件开启VirtualHost，哪些不开启。和webpack的rules规则相同。</p> <p>默认情况下，自定义组件本身的那个节点是一个“普通”的节点，使用时可以在这个节点上设置 <code>class</code> 、<code>style</code> 、动画、 flex 布局等，就如同普通的 view 组件节点一样。但有些时候，自定义组件并不希望这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定。这种情况下，可以将这个自定义组件设置为“虚拟的”。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">autoVirtualHostRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'../src'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'../components/other'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>注意：</strong> 建议使用<code>autoVirtualHostRules</code>配置项，不要使用微信组件内部的 options virtualHost 配置，因为组件内部的 options virtualHost 在跨平台输出时无法进行兼容抹平处理。</p> <h3 id="partialcompilerules"><a href="#partialcompilerules" class="header-anchor">#</a> partialCompileRules</h3> <p><code>{ include: string | RegExp | Function | Array&lt;string | RegExp | Function&gt; }</code></p> <p>在大型的小程序开发当中，全量打包页面耗时非常长，往往在<code>开发过程</code>中仅仅只需用到几个 pages 而已，该配置项支持打包指定的小程序页面。</p> <p><strong>注意：</strong> @mpxjs/webpack-plugin@2.9.41版本之前该配置为 partialCompile。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token comment">// include 可以是正则、字符串、函数、数组</span>
-        <span class="token literal-property property">partialCompileRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token string">'/project/pages'</span><span class="token punctuation">,</span> <span class="token comment">// 文件路径包含 '/project/pages' 的页面都会被打包</span>
-          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">pages\/internal</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 文件路径能与正则匹配上的页面都会被打包</span>
-          <span class="token function">include</span> <span class="token punctuation">(</span><span class="token parameter">pageResourcePath</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            <span class="token comment">// pageResourcePath 是小程序页面所在系统的文件路径</span>
-            <span class="token keyword">return</span> pageResourcePath<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'pages'</span><span class="token punctuation">)</span> <span class="token comment">// 文件路径包含 'pages' 的页面都会被打包</span>
-          <span class="token punctuation">}</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-            <span class="token string">'/project/pages'</span><span class="token punctuation">,</span>
-            <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">pages\/internal</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-            <span class="token punctuation">(</span><span class="token parameter">pageResourcePath</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> pageResourcePath<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'pages'</span><span class="token punctuation">)</span>
-          <span class="token punctuation">]</span> <span class="token comment">// 满足任意条件的页面都会被打包</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>该特性只能用于<strong>开发环境</strong>，默认情况下会阻止所有页面(<strong>入口 app.mpx 除外</strong>)的打包。</p></div> <h3 id="optimizerenderrules"><a href="#optimizerenderrules" class="header-anchor">#</a> optimizeRenderRules</h3> <p><a href="#rules"><code>Rules</code></a></p> <p>render 函数中可能会存在一些重复变量，该配置可消除 render 函数中的重复变量，进而减少包体积。不配置该参数，则不会消除重复变量。</p> <p>同时框架 render 函数优化提供了两个等级，使用 level 字段来进行控制，默认为 level = 1</p> <ul><li>level = 1时，框架生成 render 函数中完成保留 template 中的计算逻辑，setData 传输量保持了最优。</li> <li>level = 2时，框架生成 render 函数中仅保留所有 template 中使用到的响应性变量，无任何计算逻辑保留，render 函数体积达最小状态，但 setData 传输量相对于 level=1 会有所增加。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">optimizeRenderRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span>
-          <span class="token punctuation">]</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">level</span><span class="token operator">:</span> <span class="token number">1</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="asyncsubpackagerules"><a href="#asyncsubpackagerules" class="header-anchor">#</a> asyncSubpackageRules</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">Condition</span> <span class="token operator">=</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">Function</span> <span class="token operator">|</span> RegExp
-
-<span class="token keyword">interface</span> <span class="token class-name">AsyncSubpackageRules</span> <span class="token punctuation">{</span>
-  include<span class="token operator">:</span> Condition <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>Condition<span class="token operator">&gt;</span>
-  exclude<span class="token operator">?</span><span class="token operator">:</span> Condition <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>Condition<span class="token operator">&gt;</span>
-  root<span class="token operator">:</span> <span class="token builtin">string</span>
-  placeholder<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> resource<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><ul><li>include: 同 webpack include 规则</li> <li>exclude: 同 webpack exclude 规则</li> <li>root: 匹配规则的组件或js模块的输出分包名</li> <li>placeholder: 匹配规则的组件所配置的componentPlaceholder，可支持配置原生组件和自定义组件，原生组件可直接以string类型配置，自定义组件需要配置对象，name 为该自定义组件名, resource 为自定义组件的路径，路径可为绝对路径和相对于项目目录的相对路径</li></ul> <p>异步分包场景下批量设置组件或 js 模块的异步分包，提升资源异步分包输出的灵活性。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token comment">// include 可以是正则、字符串、函数、数组</span>
-        <span class="token literal-property property">asyncSubpackageRules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-          <span class="token punctuation">{</span>
-            <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token string">'/project/pages'</span><span class="token punctuation">,</span> <span class="token comment">// 文件路径包含 '/project/pages' 的组件或者 require.async 异步引用的js 模块都会被打包至sub1分包</span>
-            <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">'sub1'</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">'view'</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <ul><li>该配置匹配的组件，若使用方在引用路径已设置?root或componentPlaceholder，则以引用路径中的?root或componentPlaceholder为最高优先级</li> <li>若placeholder配置使用自定义组件，注意一定要配置 placeholder 中的 resource 字段</li> <li>本功能只会对使用require.async异步引用的js模块生效，若引用路径中已配置?root，则以路径中?root优先</li></ul></div> <h3 id="retryrequireasync"><a href="#retryrequireasync" class="header-anchor">#</a> retryRequireAsync</h3> <p><code>boolean = false</code></p> <p>开启时在处理<code>require.async</code>时会添加单次重试逻辑</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">retryRequireAsync</span><span class="token operator">:</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="disablerequireasync"><a href="#disablerequireasync" class="header-anchor">#</a> disableRequireAsync</h3> <p><code>boolean = false</code></p> <p>Mpx 框架在输出 微信小程序、支付宝小程序、字节小程序、Web 平台时，默认支持分包异步化能力，但若在某些场景下需要关闭该能力，可配置该项。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">disableRequireAsync</span><span class="token operator">:</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="optimizesize"><a href="#optimizesize" class="header-anchor">#</a> optimizeSize</h3> <p><code>boolean = false</code></p> <p>开启后可优化编译配置减少构建产物体积</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">optimizeSize</span><span class="token operator">:</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="mpxwebpackplugin-static-methods"><a href="#mpxwebpackplugin-static-methods" class="header-anchor">#</a> MpxWebpackPlugin static methods</h2> <p><code>MpxWebpackPlugin</code> 通过静态方法暴露了以下五个内置 loader，详情如下：</p> <h3 id="mpxwebpackplugin-loader"><a href="#mpxwebpackplugin-loader" class="header-anchor">#</a> MpxWebpackPlugin.loader</h3> <p><code>MpxWebpackPlugin</code> 所提供的最主要 loader，用于处理 <code>.mpx</code> 文件，根据不同的<a href="#mode">目标平台</a>将 <code>.mpx</code> 文件输出为不同的结果。</p> <blockquote><p>在微信环境下 <code>todo.mpx</code> 被loader处理后的文件为：<code>todo.wxml</code>、<code>todo.wxss</code>、<code>todo.js</code>、<code>todo.json</code></p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token punctuation">{</span>
-        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.mpx$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-        <span class="token literal-property property">use</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">loader</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span>
-</code></pre></div><h3 id="mpxwebpackplugin-pluginloader"><a href="#mpxwebpackplugin-pluginloader" class="header-anchor">#</a> MpxWebpackPlugin.pluginLoader</h3> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>该 loader 仅在开发<strong>小程序插件</strong>时使用，可在使用 Mpx 脚手架进行项目初始化时选择进行组件开发来生成对应的配置文件。</p></div> <p><code>MpxWebpackPlugin.pluginLoader</code> 用于根据开发者编写的<code>plugin.json</code>文件内容，将特定的小程序组件、页面以及 js 文件进行构建，最终以小程序插件的形式输出。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-          <span class="token punctuation">{</span>
-            <span class="token literal-property property">resource</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src/plugin/plugin.json'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 小程序插件的plugin.json的绝对路径</span>
-            <span class="token literal-property property">use</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">pluginLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>更多细节请查阅 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html" target="_blank" rel="noopener noreferrer">小程序插件开发<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="mpxwebpackplugin-wxspreloader"><a href="#mpxwebpackplugin-wxspreloader" class="header-anchor">#</a> MpxWebpackPlugin.wxsPreLoader</h3> <p>加载并解析 <code>wxs</code> 脚本文件，并针对不同平台，做了差异化处理；同时可支持处理内联<code>wxs</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-          <span class="token punctuation">{</span>
-            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(wxs|qs|sjs|filter\.js)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-            <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxsPreLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">enforce</span><span class="token operator">:</span> <span class="token string">'pre'</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="mpxwebpackplugin-fileloader"><a href="#mpxwebpackplugin-fileloader" class="header-anchor">#</a> MpxWebpackPlugin.fileLoader</h3> <p>提供图像资源的处理，生成对应图像文件，输出到输出目录并返回 public URL。如果是分包资源，则会输出到相应的分包资源文件目录中。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-          <span class="token punctuation">{</span>
-            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-            <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">fileLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-              <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span>
-            <span class="token punctuation">}</span><span class="token punctuation">)</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>选项</strong>：</p> <ul><li><code>name</code> : 自定义输出文件名模板</li></ul> <h3 id="mpxwebpackplugin-urlloader"><a href="#mpxwebpackplugin-urlloader" class="header-anchor">#</a> MpxWebpackPlugin.urlLoader</h3> <p>微信小程序对于图像资源存在一些限制，<code>MpxWebpackPlugin.urlLoader</code> 针对这些差异做了相关处理，开发者可以使用web应用开发的方式进行图像资源的引入，<code>MpxWebpackPlugin.urlLoader</code> 可根据图像资源的不同引入方式，支持 CDN 或者 Base64 的方式进行处理。更多细节请查阅<a href="/guide/advance/image-process.html">图像资源处理</a>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-          <span class="token punctuation">{</span>
-            <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-            <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">urlLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-              <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
-              <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token number">2048</span><span class="token punctuation">,</span>
-            <span class="token punctuation">}</span><span class="token punctuation">)</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>选项</strong>:</p> <ul><li><code>name</code> :  自定义输出文件名模板</li> <li><code>mimetype</code> : 指定文件的 MIME 类型</li> <li><code>limit</code> : 对内联文件作为数据 URL 的字节数限制</li> <li><code>publicPath</code> : 自定义 public 目录</li> <li><code>fallback</code> : 文件字节数大于限制时，为文件指定加载程序</li></ul> <h3 id="mpxwebpackplugin-getpageentry"><a href="#mpxwebpackplugin-getpageentry" class="header-anchor">#</a> MpxWebpackPlugin.getPageEntry</h3> <p>在 webpack config entry 入口文件配置中，你可以使用该方法获取独立构建页面路径，构建产物为该页面的独立原生代码，
-你可以提供该页面给其他小程序使用。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">getPageEntry</span><span class="token punctuation">(</span><span class="token string">'./index.mpx'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="mpxwebpackplugin-getcomponententry"><a href="#mpxwebpackplugin-getcomponententry" class="header-anchor">#</a> MpxWebpackPlugin.getComponentEntry</h3> <p>在 webpack config entry 入口文件配置中，你可以使用该方法获取独立构建组件路径，构建产物为该组件的独立原生代码，
-你可以提供该组件给其他小程序使用。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">getComponentEntry</span><span class="token punctuation">(</span><span class="token string">'./components/list.mpx'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="mpxwebpackplugin-getnativeentry"><a href="#mpxwebpackplugin-getnativeentry" class="header-anchor">#</a> MpxWebpackPlugin.getNativeEntry</h3> <p>在 webpack config entry 入口文件配置中，你可以使用该方法获取原生小程序入口文件路径。如果你不想将原生的小程序入口文件整合为 <code>app.mpx</code> 文件，则可以使用该方法直接使用原有的小程序入口文件进行编译。见<a href="%5B1330%5D(https://github.com/didi/mpx/issues/1330)">#1330</a>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 将 app 入口由默认的 app.mpx 更改为 app.js</span>
-    config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">getNativeEntry</span><span class="token punctuation">(</span><span class="token string">'./src/app.js'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="mpxunocssplugin"><a href="#mpxunocssplugin" class="header-anchor">#</a> MpxUnocssPlugin</h2> <p>Mpx 编译 unocss 原子类的 webpack 主插件</p> <p>如果在使用 <code>@mpxjs/cli@3.x</code> 创建项目时选择了 unocss，会自动安装 MpxUnocssPlugin ，直接在 mpx.unocss 配置项中传入相关配置即可</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token comment">// @mpxjs/unocss-plugin 相关的配置</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>如果创建项目时未选 unocss，需手动安装，安装示例如下：</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @mpxjs/unocss-plugin
-<span class="token function">pnpm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @mpxjs/unocss-plugin
-<span class="token function">yarn</span> <span class="token function">add</span> <span class="token parameter variable">-D</span> @mpxjs/unocss-plugin
-</code></pre></div><p>使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// vue.config.js</span>
-  <span class="token keyword">const</span> MpxUnocssPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/unocss-plugin'</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-
-  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">configureWebpack</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token keyword">new</span> <span class="token class-name">MpxUnocssPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-          <span class="token comment">// @mpxjs/unocss-plugin 相关的配置</span>
-        <span class="token punctuation">}</span><span class="token punctuation">)</span>
-      <span class="token punctuation">]</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>插件支持配置如下：</p> <h3 id="unofile"><a href="#unofile" class="header-anchor">#</a> unoFile</h3> <p><code>string = 'styles/uno'</code></p> <p>生成主包或分包通用样式存储的相对路径</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">unoFile</span><span class="token operator">:</span> <span class="token string">'styles/uno'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>则会把通用样式存储到下面目录</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// 主包</span>
-  dist<span class="token operator">/</span>wx<span class="token operator">/</span>styles<span class="token operator">/</span>uno<span class="token punctuation">.</span>wxss
-  <span class="token comment">// 分包</span>
-  dist<span class="token operator">/</span>wx<span class="token operator">/</span><span class="token keyword">package</span><span class="token operator">/</span>styles<span class="token operator">/</span>uno<span class="token punctuation">.</span>wxss
-</code></pre></div><h3 id="mincount"><a href="#mincount" class="header-anchor">#</a> minCount</h3> <p><code>number = 2</code></p> <p>使用到某个原子类的最小分包个数，比如设置为2的话一个原子类只有超过2个分包使用才会输出到主包</p> <blockquote><p>主要是用来控制主包占用的，数值越大分包的原子类就有更大可能性不占用主包</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">minCount</span><span class="token operator">:</span> <span class="token number">2</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code>  <span class="token comment">&lt;!-- minCount=2 --&gt;</span>
-  <span class="token comment">&lt;!-- a分包 --&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-black color-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!-- b分包 --&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-black<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>unocss将把生成的<code>bg-black</code>样式打包到主包</p> <h3 id="styleisolation"><a href="#styleisolation" class="header-anchor">#</a> styleIsolation</h3> <p><code>string = 'isolated'</code></p> <p>需要和微信小程序的styleIsolation配合使用，比如小程序使用样式隔离的话，这里需要对应配置为isolated，这样的话每个组件会独立引用对应的原子类文件，配置为'apply-shared'的话只有父级页面和app会建立引用，然后通过配合微信的apply-shared的方式获取父级上定义的原子类</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">styleIsolation</span><span class="token operator">:</span> <span class="token string">'isolated'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="scan"><a href="#scan" class="header-anchor">#</a> scan</h3> <div class="language-ts extra-class"><pre class="language-ts"><code>  <span class="token keyword">interface</span> <span class="token class-name">Scan</span> <span class="token punctuation">{</span>
-    include<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
-    exclude<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-</code></pre></div><p>配置需要扫描的文件目录</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">scan</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'src/**/*'</span><span class="token punctuation">]</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="escapemap"><a href="#escapemap" class="header-anchor">#</a> escapeMap</h3> <p><code>object</code></p> <p>针对原子类中出现的<code>[</code> <code>(</code> <code>,</code>等特殊字符，在web中会通过转义字符<code>\</code>进行转义，由于小程序环境下不支持css选择器中出现<code>\</code>转义字符，我们内置支持了一套不带<code>\</code>的转义规则对这些特殊字符进行转义，同时替换模版和css文件中的类名，内建的默认转义规则，可自定义转译规则</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">escapeMap</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token string-property property">':'</span><span class="token operator">:</span> <span class="token string">'_d_'</span><span class="token punctuation">,</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code>  &lt;view class=<span class="token string">&quot;dark:text-green-400&quot;</span>/&gt;
-</code></pre></div><p>将会转化为</p> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">.dark .dark_d_text-green-400</span><span class="token punctuation">{</span><span class="token property">--un-text-opacity</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>74<span class="token punctuation">,</span>222<span class="token punctuation">,</span>128<span class="token punctuation">,</span><span class="token function">var</span><span class="token punctuation">(</span>--un-text-opacity<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
-</code></pre></div><h3 id="root"><a href="#root" class="header-anchor">#</a> root</h3> <p><code>string = process.cwd()</code></p> <p>文件根目录</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">root</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token function">cwd</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="transformcss"><a href="#transformcss" class="header-anchor">#</a> transformCSS</h3> <p><code>boolean = true</code></p> <p>转化css指令为常规css</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">transformCSS</span><span class="token operator">:</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">.custom-div</span> <span class="token punctuation">{</span>
-    <span class="token atrule"><span class="token rule">@apply</span> text-center my-0 font-medium<span class="token punctuation">;</span></span>
-  <span class="token punctuation">}</span>
-</code></pre></div><p>将会转化为</p> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">.custom-div</span> <span class="token punctuation">{</span>
-    <span class="token property">margin-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
-    <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
-    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
-    <span class="token property">font-weight</span><span class="token punctuation">:</span> 500<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-</code></pre></div><h3 id="transformgroups"><a href="#transformgroups" class="header-anchor">#</a> transformGroups</h3> <p><code>boolean = true</code></p> <p>转化Variant group</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">transformGroups</span><span class="token operator">:</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg:(p-2 m-2 text-red-600)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>将会转化为</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lg:p-2 lg:m-2 lg:text-red-600<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="config"><a href="#config" class="header-anchor">#</a> config</h3> <p><code>UserConfig | string</code></p> <p>config可以传配置对象也可以传一个配置文件路径</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-            <span class="token punctuation">[</span><span class="token string">'m-1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token string">'10rpx'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-          <span class="token punctuation">]</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="configfiles"><a href="#configfiles" class="header-anchor">#</a> configFiles</h3> <p><code>LoadConfigSource[]</code></p> <div class="language-ts extra-class"><pre class="language-ts"><code>  <span class="token keyword">interface</span> <span class="token class-name">LoadConfigSource<span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
-      files<span class="token operator">:</span> Arrayable<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
-      <span class="token comment">/**
-       * @default ['mts', 'cts', 'ts', 'mjs', 'cjs', 'js', 'json', '']
-      */</span>
-      extensions<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
-      <span class="token comment">/**
-       * Loader for loading config,
-      *
-      * @default 'auto'
-      */</span>
-      parser<span class="token operator">?</span><span class="token operator">:</span> BuiltinParsers <span class="token operator">|</span> CustomParser<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token string">'auto'</span><span class="token punctuation">;</span>
-      <span class="token comment">/**
-       * Rewrite the config object,
-      * return nullish value to bypassing loading the file
-      */</span>
-      rewrite<span class="token operator">?</span><span class="token operator">:</span> <span class="token operator">&lt;</span><span class="token constant">F</span> <span class="token operator">=</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>obj<span class="token operator">:</span> <span class="token constant">F</span><span class="token punctuation">,</span> filepath<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token constant">T</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
-      <span class="token comment">/**
-       * Transform the source code before loading,
-      * return nullish value to skip transformation
-      */</span>
-      transform<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>code<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> filepath<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
-      <span class="token comment">/**
-       * Skip this source if error occurred on loading
-      *
-      * @default false
-      */</span>
-      skipOnError<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-</code></pre></div><p>configFiles的话是传递额外的配置文件数组，比如不想用uno.config作为配置文件的话可以在这里面配</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">unocss</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">configFiles</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-          <span class="token punctuation">{</span>
-            <span class="token literal-property property">files</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-              <span class="token string">'uno2.config.js'</span>
-            <span class="token punctuation">]</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="commentconfig"><a href="#commentconfig" class="header-anchor">#</a> commentConfig</h3> <p>我们还支持了commentConfig进行组件局部配置，目前支持safelist和styleIsolation，safelist可以用空格分隔写多个</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- mpx_config_styleIsolation: 'isolated' --&gt;</span>
-    <span class="token comment">&lt;!-- mpx_config_safelist: 'text-red-500 bg-black' --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>mpx-unocss<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="mpxunocssbase"><a href="#mpxunocssbase" class="header-anchor">#</a> MpxUnocssBase</h2> <p>Mpx 内置的 unocss preset，继承自 <code>@unocss/preset-uno</code>，并额外提供小程序原子类的预设样式，安装示例如下：</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @mpxjs/unocss-base
-<span class="token function">pnpm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @mpxjs/unocss-base
-<span class="token function">yarn</span> <span class="token function">add</span> <span class="token parameter variable">-D</span> @mpxjs/unocss-base
-</code></pre></div><p>使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// uno.config.js</span>
-  <span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'unocss'</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> presetMpx <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/unocss-base'</span><span class="token punctuation">)</span>
-
-  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token function">presetMpx</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token comment">// ...</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token comment">// unocss的config，具体配置参考https://unocss.dev/config/</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>支持的配置项如下：</p> <h3 id="basefontsize"><a href="#basefontsize" class="header-anchor">#</a> baseFontSize</h3> <p><code>number = 37.5</code></p> <p>同比换算1rem = 37.5rpx适配小程序</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// uno.config.js</span>
-  <span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'unocss'</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> presetMpx <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/unocss-base'</span><span class="token punctuation">)</span>
-
-  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token function">presetMpx</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">baseFontSize</span><span class="token operator">:</span> <span class="token number">37.5</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="preflight"><a href="#preflight" class="header-anchor">#</a> preflight</h3> <p><code>boolean = true</code></p> <p>是否生成预设样式</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// uno.config.js</span>
-  <span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'unocss'</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> presetMpx <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/unocss-base'</span><span class="token punctuation">)</span>
-
-  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token function">presetMpx</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">preflight</span><span class="token operator">:</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>将添加预设样式在主包</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">page</span><span class="token punctuation">{</span><span class="token property">--un-rotate</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-rotate-x</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-rotate-y</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-rotate-z</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-scale-x</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">--un-scale-y</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">--un-scale-z</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">--un-skew-x</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-skew-y</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-translate-x</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-translate-y</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-translate-z</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-pan-x</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-pan-y</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-pinch-zoom</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-scroll-snap-strictness</span><span class="token punctuation">:</span>proximity<span class="token punctuation">;</span><span class="token property">--un-ordinal</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-slashed-zero</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-numeric-figure</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-numeric-spacing</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-numeric-fraction</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-border-spacing-x</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-border-spacing-y</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token property">--un-ring-offset-shadow</span><span class="token punctuation">:</span>0 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token property">--un-ring-shadow</span><span class="token punctuation">:</span>0 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token property">--un-shadow-inset</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-shadow</span><span class="token punctuation">:</span>0 0 <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token property">--un-ring-inset</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-ring-offset-width</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span><span class="token property">--un-ring-offset-color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span><span class="token property">--un-ring-width</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span><span class="token property">--un-ring-color</span><span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>147<span class="token punctuation">,</span>197<span class="token punctuation">,</span>253<span class="token punctuation">,</span>0.5<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token property">--un-blur</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-brightness</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-contrast</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-drop-shadow</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-grayscale</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-hue-rotate</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-invert</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-saturate</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-sepia</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-blur</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-brightness</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-contrast</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-grayscale</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-hue-rotate</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-invert</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-opacity</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-saturate</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token property">--un-backdrop-sepia</span><span class="token punctuation">:</span> <span class="token punctuation">;</span><span class="token punctuation">}</span>
-</code></pre></div><h3 id="dark"><a href="#dark" class="header-anchor">#</a> dark</h3> <p><code>class | media | DarkModeSelectors = 'class'</code></p> <div class="language-ts extra-class"><pre class="language-ts"><code>  <span class="token keyword">interface</span> <span class="token class-name">DarkModeSelectors</span> <span class="token punctuation">{</span>
-    <span class="token comment">/**
-     * light variant的选择器.
-     *
-     * @default '.light'
-     */</span>
-    light<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
-
-    <span class="token comment">/**
-     * dark variant的选择器
-     *
-     * @default '.dark'
-     */</span>
-    dark<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
-  <span class="token punctuation">}</span>
-</code></pre></div><p>默认情况下，此预设使用dark:variant生成基于类的dark模式。</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark:text-green-400<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
-</code></pre></div><p>我们将生成</p> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">.dark .dark_c_text-green-400</span><span class="token punctuation">{</span><span class="token property">--un-text-opacity</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>74<span class="token punctuation">,</span>222<span class="token punctuation">,</span>128<span class="token punctuation">,</span><span class="token function">var</span><span class="token punctuation">(</span>--un-text-opacity<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
-</code></pre></div><p>要选择基于媒体查询的dark模式，您可以使用@dark:variant</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>@dark:text-green-400<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
-</code></pre></div><p>我们将生成</p> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
-    <span class="token selector">._u_dark_c_text-green-400</span><span class="token punctuation">{</span><span class="token property">--un-text-opacity</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>74<span class="token punctuation">,</span>222<span class="token punctuation">,</span>128<span class="token punctuation">,</span><span class="token function">var</span><span class="token punctuation">(</span>--un-text-opacity<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</code></pre></div><p>或者使用针对dark:variant的配置进行全局设置</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token function">presetMpx</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">dark</span><span class="token operator">:</span> <span class="token string">&quot;media&quot;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="attributifypseudo"><a href="#attributifypseudo" class="header-anchor">#</a> attributifyPseudo</h3> <p><code>boolean = false</code></p> <p>将伪选择器生成为[group='']，而不是.group。只支持<code>group</code>|<code>peer</code>|<code>parent</code>|<code>previous</code>
-如果attributifyPseudo为true的话，</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>group-hover:opacity-100<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>上面template将生成</p> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">[group=&quot;&quot;]:hover .group-hover_c_opacity-100</span><span class="token punctuation">{</span><span class="token property">opacity</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token punctuation">}</span>
-</code></pre></div><p>为false则生成</p> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">.group:hover .group-hover_c_opacity-100</span><span class="token punctuation">{</span><span class="token property">opacity</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token punctuation">}</span>
-</code></pre></div><h3 id="variableprefix"><a href="#variableprefix" class="header-anchor">#</a> variablePrefix</h3> <p><code>string = 'un-'</code></p> <p>CSS变量的前缀</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token function">presetMpx</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">variablePrefix</span><span class="token operator">:</span> <span class="token string">'un-'</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code>  <span class="token selector">.bg-red-500</span><span class="token punctuation">{</span><span class="token property">--un-bg-opacity</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>239<span class="token punctuation">,</span>68<span class="token punctuation">,</span>68<span class="token punctuation">,</span><span class="token function">var</span><span class="token punctuation">(</span>--un-bg-opacity<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
-</code></pre></div><h2 id="request-query"><a href="#request-query" class="header-anchor">#</a> Request query</h2> <p>Mpx中允许用户在request中传递特定query执行特定逻辑，目前已支持的query如下：</p> <h3 id="resolve"><a href="#resolve" class="header-anchor">#</a> ?resolve</h3> <p>用于获取资源最终被输出的正确路径。</p> <p>Mpx 在处理页面路径时会把对应的分包名作为 root 加在路径前。处理组件路径时会添加 hash，防止路径名冲突。直接写资源相对路径可能与最终输出的资源路径不符。</p> <p>编写代码时使用 import 引入页面地址后加上 <code>?resolve</code>，这个地址在编译时会被处理成正确的绝对路径，即资源的最终输出位置。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> subPackageIndexPage <span class="token keyword">from</span> <span class="token string">'../subpackage/pages/index.mpx?resolve'</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">url</span><span class="token operator">:</span> subPackageIndexPage
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="root"><a href="#root" class="header-anchor">#</a> ?root</h3> <ol><li>声明分包别名</li></ol> <p>指定分包别名，Mpx 项目在编译构建后会输出该别名的分包，外部小程序或 H5 页面跳转时，可直接配置该分包别名下的资源路径。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 可在项目app.mpx中进行配置</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">packages</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token string">'@packagePath/src/app.mpx?root=test'</span><span class="token punctuation">,</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">// 使用</span>
-wx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">url</span> <span class="token operator">:</span> <span class="token string">'/test/homepage/index'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><ol start="2"><li>声明组件所属异步分包</li></ol> <p>微信小程序新增 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html" target="_blank" rel="noopener noreferrer">分包异步化特性<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> ，使跨分包的组件可以等待对应分包下载后异步使用, 在mpx中使用需通过?root声明组件所属异步分包即可使用，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--/packageA/pages/index.mpx--&gt;</span>
-// 这里在分包packageA中即可异步使用分包packageB中的hello组件
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;hello&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../../packageB/components/hello?root=packageB&quot;</span><span class="token punctuation">,</span>
-      <span class="token string-property property">&quot;simple-hello&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/hello&quot;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;componentPlaceholder&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;hello&quot;</span><span class="token operator">:</span> <span class="token string">&quot;simple-hello&quot;</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="fallback"><a href="#fallback" class="header-anchor">#</a> ?fallback</h3> <p><code>boolean</code></p> <p>对于使用<code>MpxWebpackPlugin.urlLoader</code>的文件，如果在引用资源的末尾加上<code>?fallback=true</code>，则使用配置的自定义loader。图片的引入和处理详见<a href="/guide/advance/image-process.html">图像资源处理</a>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">urlLoader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com/'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">fallback</span><span class="token operator">:</span> <span class="token string">'file-loader'</span> <span class="token comment">// 自定义fallback为true时使用的loader</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* png资源引入 */</span>
-<span class="token selector">&lt;style&gt;
-  .logo2</span> <span class="token punctuation">{</span>
-    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'./images/logo.png?fallback=true'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/* 设置fallback=true，则使用如上方所配置的file-loader */</span>
-  <span class="token punctuation">}</span>
-&lt;/style&gt;
-</code></pre></div><h3 id="uselocal"><a href="#uselocal" class="header-anchor">#</a> ?useLocal</h3> <p><code>boolean</code></p> <p>静态资源存放有两种方式：本地、远程（配置 publicPath ）。useLocal 是用于在配置了 publicPath 时声明部分资源输出到本地。比如配置了通用的 CDN 策略，但如网络兜底资源需要强制走本地存储，可在引用资源的末尾加上<code>?useLocal=true</code></p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 单个图片资源设置为存储到本地 */</span>
-<span class="token selector">&lt;style&gt;
-  .logo2</span> <span class="token punctuation">{</span>
-    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'./images/logo.png?useLocal=true'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-&lt;/style&gt;
-</code></pre></div><h3 id="isstyle"><a href="#isstyle" class="header-anchor">#</a> ?isStyle</h3> <p><code>boolean</code></p> <p>isStyle 是在非 style 模块中编写样式时，声明这部分引用的静态资源按照 style 环境来处理。如在 javascript 中 require 了一个图像资源，然后模版 template style 属性中进行引用， 则 require 资源时可选择配置<code>?isStyle=true</code></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- isStyle 案例一：引用 javascript 中的数据 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token punctuation">{</span><span class="token punctuation">{</span>testStyle<span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>测试<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- isStyle 案例二：设置资源按照style处理规则处理。style处理规则为: 默认走base64，除非同时配置了 publicPath 和 fallback --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../images/car.jpg?isStyle=true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- 普通非style模式，默认走 fallback 或者 file-loader 解析，输出到 publicPath 或者 本地img目录下 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../images/car.jpg<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/* 将 script 中的图像资源标识为 style 资源 */</span>
-<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token keyword">const</span> backCar <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../images/car.jpg?isStyle=true'</span><span class="token punctuation">)</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">testStyle</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">background-image : url(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>backCar<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">); width:100px; height: 100px</span><span class="token template-punctuation string">`</span></span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><h3 id="ispage"><a href="#ispage" class="header-anchor">#</a> ?isPage</h3> <p><code>boolean</code></p> <p>在 webpack config entry 入口文件配置中，你可以在路径后追加 ?isPage 来声明独立页面构建，构建产物为该页面的独立原生代码，
-你可以提供该页面给其他小程序使用。此外，独立页面构建也可以通过MpxWebpackPlugin.getPageEntry生成，推荐使用<a href="#mpxwebpackplugin-getpageentry">此方法。</a></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'../src/pages/index.mpx?isPage'</span><span class="token punctuation">)</span>
-    <span class="token comment">// 或者</span>
-    <span class="token comment">// config.entry('index').add(MpxWebpackPlugin.getPageEntry('./index.mpx'))</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>对于使用 <code>@mpxjs/cli@2.x</code> 脚手架初始化的项目，配置 entry 的方式如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// build/getWebpackConf.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">index</span><span class="token operator">:</span> <span class="token string">'../src/pages/index.mpx?isPage'</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div></div> <h3 id="iscomponent"><a href="#iscomponent" class="header-anchor">#</a> ?isComponent</h3> <p><code>boolean</code></p> <p>在 webpack config entry 入口文件配置中，你可以在路径后追加 ?isComponent 来声明独立组件构建，构建产物为该组件的独立原生代码，
-你可以提供该组件给其他小程序使用。
-此外，独立组件构建也可以通过MpxWebpackPlugin.getComponentEntry生成，推荐使用<a href="#mpxwebpackplugin-getcomponententry">此方法。</a>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> MpxWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'../src/components/list.mpx?isComponent'</span><span class="token punctuation">)</span>
-    <span class="token comment">// 或者</span>
-    <span class="token comment">// config.entry('index').add(MpxWebpackPlugin.getComponentEntry('./components/list.mpx'))</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="async"><a href="#async" class="header-anchor">#</a> ?async</h3> <p><code>boolean | string</code></p> <p>输出 H5 时 Vue Router 的路由懒加载功能，Mpx框架默认会对分包开启路由懒加载功能并将分包所有页面都打入同一个Chunk
-，如果你希望对于部分主包页面或者分包页面配置路由懒加载并想自定义Chunk Name，则可以使用该功能。</p> <div class="language-html extra-class"><pre class="language-html"><code>// app.mpx 
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;./pages/index?async&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 主包页面配置路由懒加载，Chunk Name 为随机数字</span>
-      <span class="token string">&quot;./pages/index2?async=app_pages2&quot;</span>，<span class="token comment">// 主包页面配置路由懒加载，Chunk Name 自定义为 app_pages2</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;./packages/sub1/app.mpx?root=sub1&quot;</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-// packages/sub1/app.mpx
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;./pages/index?async=sub1_pages_index&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 分包中页面设置路由懒加载并设置自定义Chunk Name</span>
-      <span class="token string">&quot;./pages/index2?async=sub2_pages_index2&quot;</span> <span class="token comment">// 分包中页面设置路由懒加载并设置自定义Chunk Name</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/api/directives.html" class="prev">
-        模板指令
-      </a></span> <span class="next"><a href="/api/builtIn.html">
-        内建组件
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/38.7826170e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/composition-api.html b/docs-vuepress/.vuepress/dist/api/composition-api.html
deleted file mode 100644
index 3236d17230..0000000000
--- a/docs-vuepress/.vuepress/dist/api/composition-api.html
+++ /dev/null
@@ -1,117 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>组合式 API | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/39.094ffa40.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" aria-current="page" class="active sidebar-link">组合式 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/composition-api.html#setup" class="sidebar-link">setup</a></li><li class="sidebar-sub-header"><a href="/api/composition-api.html#生命周期钩子" class="sidebar-link">生命周期钩子</a></li><li class="sidebar-sub-header"><a href="/api/composition-api.html#getcurrentinstance" class="sidebar-link">getCurrentInstance</a></li><li class="sidebar-sub-header"><a href="/api/composition-api.html#usei18n" class="sidebar-link">useI18n</a></li><li class="sidebar-sub-header"><a href="/api/composition-api.html#usefetch" class="sidebar-link">useFetch</a></li></ul></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="组合式-api"><a href="#组合式-api" class="header-anchor">#</a> 组合式 API</h1> <h2 id="setup"><a href="#setup" class="header-anchor">#</a> setup</h2> <p>一个组件选项，在组件被创建之前，props 被解析之后执行。是组合式 API 的入口。</p> <ul><li><strong>参数</strong>：
-<ul><li><code>{Data} props</code></li> <li><code>{SetupContext} context</code></li></ul></li></ul> <p>该 <strong>props</strong> 对象仅包含显性声明的 properties。并且所有声明了的prop，不论父组件是否向其传递，
-都将出现在 <strong>props</strong> 对象中。其中未被传入的可选的 prop 的值会是默认值或 undefined。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token literal-property property">type</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
-            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">lastLeaf</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token comment">// 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种</span>
-            <span class="token literal-property property">type</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
-            <span class="token literal-property property">optionalTypes</span><span class="token operator">:</span> <span class="token punctuation">[</span>String<span class="token punctuation">,</span> Object<span class="token punctuation">]</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">0</span>
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>min<span class="token punctuation">)</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>lastLeaf<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><ul><li><strong>类型声明</strong>：</li></ul> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">interface</span> <span class="token class-name">SetupContext</span> <span class="token punctuation">{</span>
-    <span class="token function">triggerEvent</span><span class="token punctuation">(</span>
-       name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
-       detail<span class="token operator">?</span><span class="token operator">:</span> object<span class="token punctuation">,</span> <span class="token comment">// detail对象，提供给事件监听函数</span>
-       options<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-         bubbles<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
-         composed<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
-         capturePhase<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
-       <span class="token punctuation">}</span>
-    <span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-    refs<span class="token operator">:</span> ObjectOf<span class="token operator">&lt;</span>NodesRef <span class="token operator">&amp;</span> ComponentIns<span class="token operator">&gt;</span>
-    asyncRefs<span class="token operator">:</span> ObjectOf<span class="token operator">&lt;</span><span class="token builtin">Promise</span><span class="token operator">&lt;</span>NodesRef <span class="token operator">&amp;</span> ComponentIns<span class="token operator">&gt;&gt;</span> <span class="token comment">// 字节小程序特有</span>
-    <span class="token function-variable function">nextTick</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token function-variable function">fn</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
-    <span class="token function-variable function">forceUpdate</span><span class="token operator">:</span> <span class="token punctuation">(</span>params<span class="token operator">?</span><span class="token operator">:</span> object<span class="token punctuation">,</span> callback<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
-    <span class="token function">selectComponent</span><span class="token punctuation">(</span>selector<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> ComponentIns
-    <span class="token function">selectAllComponents</span><span class="token punctuation">(</span>selector<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> ComponentIns<span class="token punctuation">[</span><span class="token punctuation">]</span>
-    <span class="token function">createSelectorQuery</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> SelectorQuery
-    <span class="token function">createIntersectionObserver</span><span class="token punctuation">(</span>
-      options<span class="token operator">:</span> <span class="token punctuation">{</span>
-        thresholds<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token builtin">number</span><span class="token operator">&gt;</span>
-        initialRatio<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span>
-        observeAll<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">)</span><span class="token operator">:</span> IntersectionObserver<span class="token punctuation">}</span>
-
-<span class="token keyword">function</span> <span class="token function">setup</span><span class="token punctuation">(</span>props<span class="token operator">:</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> context<span class="token operator">:</span> SetupContext<span class="token punctuation">)</span><span class="token operator">:</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span>
-</code></pre></div><h2 id="生命周期钩子"><a href="#生命周期钩子" class="header-anchor">#</a> 生命周期钩子</h2> <p>可以通过直接导入 on* 函数来注册生命周期钩子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onMounted<span class="token punctuation">,</span> onUpdated<span class="token punctuation">,</span> onUnmounted<span class="token punctuation">,</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'mounted!'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token function">onUpdated</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'updated!'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token function">onUnmounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'unmounted!'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>这些生命周期钩子注册函数只能在 setup() 期间同步使用，因为它们依赖于内部的全局状态来定位当前活动的实例 (此时正在调用其 setup() 的组件实例)。
-在没有当前活动实例的情况下，调用它们将会出错。</p> <p>组件实例的上下文也是在生命周期钩子的同步执行期间设置的，因此，在生命周期钩子内同步创建的侦听器和计算属性也会在组件卸载时自动删除。</p> <p>新版本的生命周期钩子我们基本上和 Vue 中的生命周期钩子对齐，相较于之前还是有部分生命周期钩子的改动。</p> <h3 id="onbeforemount"><a href="#onbeforemount" class="header-anchor">#</a> onBeforeMount</h3> <p><code>Function</code></p> <p>在组件布局完成后执行，refs 相关的前置工作在该钩子中执行。</p> <h3 id="onmounted"><a href="#onmounted" class="header-anchor">#</a> onMounted</h3> <p><code>Function</code></p> <p>在组件布局完成后执行，refs 可以直接获取。</p> <h3 id="onbeforeupdate"><a href="#onbeforeupdate" class="header-anchor">#</a> onBeforeUpdate</h3> <p><code>Function</code></p> <p>在数据发生改变后，组件/页面更新之前被调用。这里适合在现有组件/页面将要被更新之前访问它，
-比如移除某个手动添加的监听器，或者获取某个元素更新前的高度。</p> <h3 id="onupdated"><a href="#onupdated" class="header-anchor">#</a> onUpdated</h3> <p><code>Function</code></p> <p>在数据更改导致的页面/组件重新渲染和更新完毕之后被调用。</p> <p>注意，onUpdated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等待整个视图都渲染完毕，可以在 onUpdated 内部使用 nextTick。</p> <h3 id="onbeforeunmount"><a href="#onbeforeunmount" class="header-anchor">#</a> onBeforeUnmount</h3> <p><code>Function</code></p> <p>在卸载组件/页面实例之前调用。在这个阶段，实例仍然是完全正常的。</p> <h3 id="onunmount"><a href="#onunmount" class="header-anchor">#</a> onUnmount</h3> <p><code>Function</code></p> <p>卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除。</p> <h3 id="onload"><a href="#onload" class="header-anchor">#</a> onLoad</h3> <p><code>Function</code></p> <p>小程序页面 onLoad 事件，监听页面加载。</p> <h3 id="onshow"><a href="#onshow" class="header-anchor">#</a> onShow</h3> <p><code>Function</code></p> <p>小程序页面 onShow 事件，监听页面展示。</p> <h3 id="onhide"><a href="#onhide" class="header-anchor">#</a> onHide</h3> <p><code>Function</code>
-小程序页面 onHide 事件，监听页面隐藏。</p> <h3 id="onresize"><a href="#onresize" class="header-anchor">#</a> onResize</h3> <p><code>Function</code></p> <p>小程序页面 onResize 事件，页面尺寸改变时触发。</p> <h3 id="onpulldownrefresh"><a href="#onpulldownrefresh" class="header-anchor">#</a> onPullDownRefresh</h3> <p><code>Function</code></p> <p>小程序监听用户下拉刷新事件。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPullDownRefresh" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="onreachbottom"><a href="#onreachbottom" class="header-anchor">#</a> onReachBottom</h3> <p><code>Function</code></p> <p>小程序监听用户上拉触底事件。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onReachBottom" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="onshareappmessage"><a href="#onshareappmessage" class="header-anchor">#</a> onShareAppMessage</h3> <p><code>Function</code></p> <p>小程序监听用户点击页面内转发按钮（button 组件 open-type=&quot;share&quot;）或右上角菜单“转发”按钮的行为，并自定义转发内容。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="onsharetimeline"><a href="#onsharetimeline" class="header-anchor">#</a> onShareTimeline</h3> <p><code>Function</code></p> <p>小程序监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>注意：</strong> 仅微信小程序支持</p> <h3 id="onaddtofavorites"><a href="#onaddtofavorites" class="header-anchor">#</a> onAddToFavorites</h3> <p><code>Function</code></p> <p>小程序监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onAddToFavorites-Object-object" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>注意：</strong> 仅微信小程序支持</p> <h3 id="onpagescroll"><a href="#onpagescroll" class="header-anchor">#</a> onPageScroll</h3> <p><code>Function</code></p> <p>小程序监听用户滑动页面事件。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPageScroll-Object-object" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="ontabitemtap"><a href="#ontabitemtap" class="header-anchor">#</a> onTabItemTap</h3> <p><code>Function</code></p> <p>点击 tab 时触发。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onTabItemTap-Object-object" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="onsaveexitstate"><a href="#onsaveexitstate" class="header-anchor">#</a> onSaveExitState</h3> <p><code>Function</code></p> <p>每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用，可以进行退出状态的保存。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onSaveExitState" target="_blank" rel="noopener noreferrer">详细介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>注意：</strong> 仅微信小程序支持</p> <h3 id="onserverprefetch"><a href="#onserverprefetch" class="header-anchor">#</a> onServerPrefetch</h3> <ul><li><strong>类型：</strong> <code>Function</code></li> <li><strong>详细：</strong></li></ul> <p>SSR渲染定制钩子，在服务端渲染期间被调用，可以实现在服务端进行数据预取。</p> <p><strong>注意：</strong> 仅 web 环境支持</p> <h2 id="getcurrentinstance"><a href="#getcurrentinstance" class="header-anchor">#</a> getCurrentInstance</h2> <p>getCurrentInstance 支持访问内部组件实例。</p> <ul><li><strong>注意：</strong></li></ul> <p>getCurrentInstance 只暴露给高阶使用场景，典型的比如在库中。强烈反对在应用的代码中使用 getCurrentInstance。请不要把它当作在组合式 API 中获取 this 的替代方案来使用。</p> <p>getCurrentInstance 只能在 setup 或生命周期钩子中调用。</p> <h2 id="usei18n"><a href="#usei18n" class="header-anchor">#</a> useI18n</h2> <p>点击<a href="/api/extend.html#usei18n">查看详情</a></p> <h2 id="usefetch"><a href="#usefetch" class="header-anchor">#</a> useFetch</h2> <p>点击<a href="/api/extend.html#usefetch">查看详情</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/api/reactivity-api.html" class="prev">
-        响应式 API
-      </a></span> <span class="next"><a href="/api/optional-api.html">
-        选项式 API
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/39.094ffa40.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/directives.html b/docs-vuepress/.vuepress/dist/api/directives.html
deleted file mode 100644
index 655df54106..0000000000
--- a/docs-vuepress/.vuepress/dist/api/directives.html
+++ /dev/null
@@ -1,434 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>模板指令 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/40.10d90636.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" aria-current="page" class="active sidebar-link">模板指令</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/directives.html#wx-if" class="sidebar-link">wx:if</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-elif" class="sidebar-link">wx:elif</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-else" class="sidebar-link">wx:else</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-for" class="sidebar-link">wx:for</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-for-index" class="sidebar-link">wx:for-index</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-for-item" class="sidebar-link">wx:for-item</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-key" class="sidebar-link">wx:key</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-class" class="sidebar-link">wx:class</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-style" class="sidebar-link">wx:style</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-model" class="sidebar-link">wx:model</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-model-prop" class="sidebar-link">wx:model-prop</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-model-event" class="sidebar-link">wx:model-event</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-model-value-path" class="sidebar-link">wx:model-value-path</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-model-filter" class="sidebar-link">wx:model-filter</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-ref" class="sidebar-link">wx:ref</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#wx-show" class="sidebar-link">wx:show</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#bind" class="sidebar-link">bind</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#catch" class="sidebar-link">catch</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#capture-bind" class="sidebar-link">capture-bind</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#capture-catch" class="sidebar-link">capture-catch</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#mode" class="sidebar-link">@mode</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#mode" class="sidebar-link">@_mode</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#env" class="sidebar-link">@env</a></li><li class="sidebar-sub-header"><a href="/api/directives.html#mpxtagname" class="sidebar-link">mpxTagName</a></li></ul></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="模板指令"><a href="#模板指令" class="header-anchor">#</a> 模板指令</h1> <h2 id="wx-if"><a href="#wx-if" class="header-anchor">#</a> wx:if</h2> <p><code>any</code></p> <p>根据表达式的值的 <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy" target="_blank" rel="noopener noreferrer">truthiness<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 <strong>注意：如果元素是 <code>&lt;block/&gt;</code>, 注意它并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性</strong>。</p> <div class="custom-block danger"><p class="custom-block-title">DANGER</p> <p>当和 <code>wx:if</code> 一起使用时，<code>wx:for</code> 的优先级比 <code>wx:if</code> 更高。详见列<a href="/guide/basic/list-render.html">表渲染教程</a></p></div> <p><strong>参考：</strong> <a href="/guide/basic/conditional-render.html">条件渲染 - wx:if</a></p> <h2 id="wx-elif"><a href="#wx-elif" class="header-anchor">#</a> wx:elif</h2> <p><code>any</code></p> <p>前一兄弟元素必须有 <code>wx:if</code> 或 <code>wx:elif</code>。表示 <code>wx:if</code> 的“ <code>wx:elif</code> 块”，可以链式调用。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{type === 'A'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  A
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{type === 'B'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  B
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{type === 'C'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  C
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span>
-  Not A/B/C
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/conditional-render.html">条件渲染 - wx:elif</a></p> <h2 id="wx-else"><a href="#wx-else" class="header-anchor">#</a> wx:else</h2> <p>不需要表达式，前一兄弟元素必须有 <code>wx:if</code> 或 <code>wx:elif</code></p> <p>为 <code>wx:if</code> 或者 <code>wx:elif</code> 添加 <code>wx:else</code> 块</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{type === 'A'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  A
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span>
-  Not A
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/conditional-render.html">条件渲染 - wx:else</a></p> <h2 id="wx-for"><a href="#wx-for" class="header-anchor">#</a> wx:for</h2> <p><code>Array | Object | number | string</code></p> <p>在组件上使用 <code>wx:for</code> 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 <code>index</code>，数组当前项的变量名默认为 <code>item</code></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{array}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  {{ index }}: {{ item.message }}
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-
-// 0: foo
-// 1: bar
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">array</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'foo'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'bar'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><code>wx:for</code> 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 <code>attribute key</code> 来提供一个排序提示：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{array}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  {{ item.text }}
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-
-// foo
-// bar
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">array</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'foo'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'bar'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><div class="custom-block danger"><p class="custom-block-title">DANGER</p> <p>当和 <code>wx:if</code> 一起使用时，<code>wx:for</code> 的优先级比 <code>wx:if</code> 更高。详见列<a href="/guide/basic/list-render.html">表渲染教程</a></p></div> <p><code>wx:for</code> 的详细用法可以通过以下链接查看教程详细说明。</p> <p><strong>参考：</strong> <a href="/guide/basic/list-render.html">列表渲染 - wx:for</a></p> <h2 id="wx-for-index"><a href="#wx-for-index" class="header-anchor">#</a> wx:for-index</h2> <p><code>string</code></p> <p>使用 wx:for-index 可以指定数组当前下标的变量名：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{array}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>idx<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  {{ idx }}: {{ item.text }}
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-
-// 0: foo
-// 1: bar
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">array</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'foo'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'bar'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/list-render.html">列表渲染 - wx:for-index</a></p> <h2 id="wx-for-item"><a href="#wx-for-item" class="header-anchor">#</a> wx:for-item</h2> <p><code>string</code></p> <p>使用 wx:for-item 可以指定数组当前元素的变量名：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for-item</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>i<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for-item</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>j<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{i &lt;= j}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-      {{i}} * {{j}} = {{i * j}}
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/list-render.html">列表渲染 - wx:for-item</a></p> <h2 id="wx-key"><a href="#wx-key" class="header-anchor">#</a> wx:key</h2> <p><code>number | string</code></p> <p>如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用 wx:key 来指定列表中项目的唯一的标识符。
-<strong>注意：如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略</strong>。</p> <p>有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。</p> <p>常见的用例是结合 <code>wx:for</code>：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{array}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  {{ item.text }}
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/list-render.html">列表渲染 - wx:for</a></p> <h2 id="wx-class"><a href="#wx-class" class="header-anchor">#</a> wx:class</h2> <p>绑定HTML Class: 类似vue的class绑定</p> <p>#对象用法</p> <p>我们可以传给 <code>wx:class</code> 一个对象，以动态地切换 class：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ {active: isActive} }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  这是一段测试文字
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>你可以在对象中传入更多字段来动态切换多个 class。此外，<code>wx:class</code> 指令也可以与普通的 class attribute 共存。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>static<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ {active: isActive, text-danger: hasError} }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  这是一段测试文字
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
-  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-     <span class="token literal-property property">isActive</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-     <span class="token literal-property property">hasError</span><span class="token operator">:</span> <span class="token boolean">false</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>渲染为：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>static active<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  这是一段测试文字
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>注意：由于微信的限制，<code>wx:class</code> 中的 key 值不能使用引号（如: { 'my-class-name': xx }）</strong></p> <p>绑定的数据对象不必内联定义在模板里：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ classObject }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  这是一段测试文字
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
-  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">classObject</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-        <span class="token string-property property">'text-danger'</span><span class="token operator">:</span> <span class="token boolean">false</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>我们也可以在这里绑定一个返回对象的计算属性。</p> <p>如果你也想根据条件切换列表中的 class，可以用三元表达式：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ isActive ? 'active' : '' }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  这是一段测试文字
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>#数组用法</p> <p>我们可以把一个数组传给 <code>wx:class</code>，以应用一个 class 列表：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{[activeClass, errorClass]}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  这是一段测试文字
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
-  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">activeClass</span><span class="token operator">:</span> <span class="token string">'active'</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">errorClass</span><span class="token operator">:</span> <span class="token string">'text-danger'</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>渲染为：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active text-danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  这是一段测试文字
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/class-style-binding.html#类名绑定">类名样式绑定 - 类名绑定</a></p> <h2 id="wx-style"><a href="#wx-style" class="header-anchor">#</a> wx:style</h2> <p><code>wx:style</code> 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 来命名：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>color: {{activeColor}}; font-size: {{fontSize}}px; fontWeight: bold<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  这是一段测试文字
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
-  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">activeColor</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">30</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>直接绑定到一个样式对象通常更好，这会让模板更清晰：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{styleObject}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  这是一段测试文字
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
-  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">styleObject</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">'bold'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>同样的，对象语法常常结合返回对象的计算属性使用。</p> <p><code>wx:style</code> 的数组语法可以将多个样式对象应用到同一个元素上</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{[baseStyles, overridingStyles]}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  这是一段测试文字
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/class-style-binding.html#样式绑定">类名样式绑定 - 样式绑定</a></p> <h2 id="wx-model"><a href="#wx-model" class="header-anchor">#</a> wx:model</h2> <p>除了小程序原生指令之外，mpx 基于input事件提供了一个指令 wx:model, 用于双向绑定。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{val}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{test.val}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{test['val']}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">val</span><span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">val</span><span class="token operator">:</span> <span class="token string">'xxx'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>wx:model并不会影响相关的事件处理函数，比如像下面这样：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{inputValue}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindinput</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
-</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/two-way-binding.html">双向绑定</a></p> <h2 id="wx-model-prop"><a href="#wx-model-prop" class="header-anchor">#</a> wx:model-prop</h2> <p>wx:model 默认使用 <code>value</code> 属性传值，使用 <code>wx:model-prop</code> 定义 wx:model 指令对应的属性；</p> <h2 id="wx-model-event"><a href="#wx-model-event" class="header-anchor">#</a> wx:model-event</h2> <p>wx:model 默认监听 <code>input</code> 事件，可以使用 <code>wx:model-event</code> 定义 wx:model 指令对应的事件；</p> <p>父组件</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>customCheck</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{checked}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkedProp<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkedChange<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>customCheck</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span>createPage<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">checked</span><span class="token operator">:</span> <span class="token boolean">true</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;customCheck&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./customCheck&quot;</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-</code></pre></div><p>子组件：(customCheck.mpx)</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewProps<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{checkedProp}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
-  <span class="token selector">.viewProps</span> <span class="token punctuation">{</span>
-    width 100px
-    height 100px
-    color #000
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">checkedProp</span><span class="token operator">:</span> Boolean
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">handleTap</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token comment">// 这里第二个参数为自定义事件的detail，需要以下面的形式传递值以保持与原生组件对齐</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">triggerEvent</span><span class="token punctuation">(</span><span class="token string">'checkedChange'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>checkedProp
-        <span class="token punctuation">}</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>如示例，当子组件被点击时，父组件的checked数据会发生变化</p> <blockquote><p>注意：由于微信限制，如果事件名使用横线分割（'checked-change'）,将不可以再使用该特性</p></blockquote> <h2 id="wx-model-value-path"><a href="#wx-model-value-path" class="header-anchor">#</a> wx:model-value-path</h2> <p>指定 wx:model 双向绑定时的取值路径；
-并非所有的组件都会按微信的标注格式 <code>event.detail.value</code> 来传值，例如 vant 的 input 组件，值是通过抛出 <code>event.detail</code> 本身传递的，这时我们可以使用 <code>wx:model-value-path=&quot;[]&quot;</code> 重新指定取值路径。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>vant-field</span> <span class="token attr-name"><span class="token namespace">wx:</span>model-value-path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[]<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{a}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>vant-field</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="wx-model-filter"><a href="#wx-model-filter" class="header-anchor">#</a> wx:model-filter</h2> <p>在使用 <code>wx:model</code> 时我们可能需要像 Vue 的 <code>.trim</code> 、<code>.lazy</code> 这样的修饰符来对双向数据绑定的数据进行过滤和修饰；Mpx 通过增强指令 <code>wx:model-filter</code> 可以实现这一功能；
-该指令可以绑定内建的 filter 或者自定义的 filter 方法，该方法接收过滤前的值，返回过滤操作后的值。</p> <p>例如我们希望拿到的 input 元素中的数据是经过 trim 的。示例：</p> <blockquote><p>当然，Mpx 已经内置了 trim 过滤器；可以通过 wx:model-filter=&quot;trim&quot; 直接使用；</p></blockquote> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-page<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-       <span class="token comment">&lt;!-- wx:model-filter 过滤wx:model 的值--&gt;</span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>trimSpace<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{filterData}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token punctuation">&gt;</span></span>{{filterData.length}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">filterData</span><span class="token operator">:</span> <span class="token string">'model-filter'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">trimSpace</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// wx:model-filter 绑定的 filter 方法</span>
-      <span class="token keyword">return</span> <span class="token keyword">typeof</span> val <span class="token operator">===</span> <span class="token string">'string'</span> <span class="token operator">&amp;&amp;</span> val<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>filter 方法除可以是和 <code>methods</code> 平级的方法，还可以是 <code>methods</code> 中的方法。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>  
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">filterData</span><span class="token operator">:</span> <span class="token string">'model-filter'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">trimSpace</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token comment">// wx:model-filter 支持将过滤器方法定义成 methods 中的方法</span>
-        <span class="token keyword">return</span> <span class="token keyword">typeof</span> val <span class="token operator">===</span> <span class="token string">'string'</span> <span class="token operator">&amp;&amp;</span> val<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="wx-ref"><a href="#wx-ref" class="header-anchor">#</a> wx:ref</h2> <p><code>string</code></p> <p>Mpx提供了 <code>wx:ref=xxx</code> 来更方便获取 WXML 节点信息的对象。在JS里只需要通过this.$refs.xxx 即可获取节点。</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tref<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    123
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>tref<span class="token punctuation">.</span><span class="token function">fields</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
-        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/refs.html">获取组件实例 - wx:ref</a></p> <h2 id="wx-show"><a href="#wx-show" class="header-anchor">#</a> wx:show</h2> <p><code>boolean</code></p> <p>与 <code>wx:if</code> 所不同的是<strong>不会移除节点</strong>，而是设置节点的 <code>style</code> 为 <code>display: none</code>。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{show}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  123
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="bind"><a href="#bind" class="header-anchor">#</a> bind</h2> <p><code>string</code></p> <p>让 <code>bind + (:?) + eventType</code> 作为属性值</p> <p>比如：<code>bindtap</code></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tapTest<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> Click me! <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tapTest1(testVal, $event)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> Click me! <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">tapTest</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Clicked!'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">tapTest1</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> event<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>Mpx做了增强的<strong>内联传参</strong>能力以及具体有哪些事件<strong>类型</strong>参考下方</p> <p><strong>参考：</strong> <a href="/guide/basic/event.html">事件处理 - bind</a></p> <h2 id="catch"><a href="#catch" class="header-anchor">#</a> catch</h2> <p><code>string</code></p> <p>让 <code>catch + (:?) + eventType</code> 作为属性值</p> <p>除 <code>bind</code> 外，也可以用 <code>catch</code> 来绑定事件。与 <code>bind</code> 不同，<code>catch</code> 会阻止事件向上冒泡。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  outer view
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>middle<span class="token punctuation">&quot;</span></span> <span class="token attr-name">catchtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    middle view
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-      inner view
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">handleTap1</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'outer'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">handleTap2</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'middle'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">handleTap3</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'inner'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token comment">// 通过几个操作看出被catchtap的middle view阻止了向上冒泡</span>
-<span class="token comment">// click outer</span>
-<span class="token comment">// outer</span>
-
-<span class="token comment">// click middle</span>
-<span class="token comment">// middle</span>
-
-<span class="token comment">// click inner</span>
-<span class="token comment">// inner</span>
-<span class="token comment">// middle</span>
-</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/event.html">事件处理 - catch</a></p> <h2 id="capture-bind"><a href="#capture-bind" class="header-anchor">#</a> capture-bind</h2> <p><code>string</code></p> <p>让 <code>capture-bind + (:?) + eventType</code> 作为属性值</p> <p>capture-bind要在bind之前执行，是因为事件是先捕获后冒泡，<strong>注意：仅触摸类事件支持捕获阶段</strong></p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap1<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">capture-bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    outer view
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap3<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">capture-bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-      inner view
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>点击inner view的调用顺序是(handleTap)2、4、3、1</p> <p><strong>参考：</strong> <a href="/guide/basic/event.html">事件处理 - capture-bind</a></p> <h2 id="capture-catch"><a href="#capture-catch" class="header-anchor">#</a> capture-catch</h2> <p><code>string</code></p> <p>让 <code>capture-catch + (:?) + eventType</code> 作为属性值</p> <p>capture-catch中断捕获阶段和取消冒泡阶段</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap1<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">capture-catch:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  outer view
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap3<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">capture-bind:</span>touchstart</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    inner view
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>点击inner view仅执行handleTap2</p> <p><strong>参考：</strong> <a href="/guide/basic/event.html">事件处理 - capture-catch</a></p> <h2 id="mode"><a href="#mode" class="header-anchor">#</a> @mode</h2> <p><code>type mode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'</code></p> <p>跨平台输出场景下，Mpx 框架允许用户在组件上使用 @ 和 | 符号来指定某个节点或属性只在某些平台下有效。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
-  <span class="token attr-name">open-type@wx|swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">bindgetuserinfo@wx|swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">open-type@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAuthorize<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">scope@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">onTap@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  获取用户信息
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>在上方示例中，开发者可以便捷的设置在支付宝小程序与微信和百度小程序等平台分别生效的 open-type 属性，
-以及事件绑定或其他属性。假设当前 srcMode 为 wx，目标平台为 ali，则输出产物为：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
-  <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAuthorize<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  获取用户信息
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>同时，该指令也可以作用在单个节点上，但需要注意的是，该指令作用在单个节点时，节点仅在目标平台输出，同时节点自身属性不会进行跨平台语法转换，不过其子节点不受影响。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--当srcMode为wx，跨平台输出ali时--&gt;</span>
-<span class="token comment">&lt;!--错误写法--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{flag}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token comment">&lt;!--正确写法--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{flag}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="mode"><a href="#mode" class="header-anchor">#</a> @_mode</h2> <p><code>type _mode = '_wx' | '_ali' | '_qq' | '_swan' | '_tt' | '_web' | '_qa'</code></p> <p>有时开发者期望使用 @mode 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--srcMode为 wx，输出 ali 时，bindtap 会被正常转换为 onTap--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@_ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。</p> <h2 id="env"><a href="#env" class="header-anchor">#</a> @env</h2> <p><code>string</code></p> <p>跨平台输出场景下，除了 mode 平台场景值，Mpx 框架还提供自定义 env 目标应用，来实现在不同应用下编译产出不同的代码。</p> <p>关于 env 的详细介绍可以点击<a href="/guide/advance/platform.html#use-env">查看</a></p> <p>跨平台输出使用 env 与 mode 一样支持文件纬度、区块纬度、节点纬度、属性纬度等条件编译，这里我们仅介绍下节点和属性纬度的指令模式使用，env 与 mode 可以组合使用。</p> <p>env 属性维度条件编译与 mode 的用法大致相同，使用 : 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 attr@mode:env:env|mode:env，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 : 前缀，形如 attr@:env。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--open-type 属性仅在百度平台且应用 env 为 didi 时保留--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@swan:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-<span class="token comment">&lt;!--open-type 属性在应用 env 为 didi 的任意小程序平台保留--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-<span class="token comment">&lt;!--open-type 属性在微信平台且应用 env 为 didi 或 qingju 时保留--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@wx:</span><span class="token namespace">didi:</span>qingju</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>env 也可在单个节点上进行条件编译：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--整个节点在应用 env 为 didi时进行保留--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">@:</span>didi</span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>需要注意的时，如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">@:</span>didi</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">bindtap@:</span>didi</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="mpxtagname"><a href="#mpxtagname" class="header-anchor">#</a> mpxTagName</h2> <p><code>string</code></p> <p>跨平台输出时，有时开发者不仅需要对节点属性进行条件编译，可能还需对节点标签进行条件编译。</p> <p>为此，Mpx 框架支持了一个特殊属性 mpxTagName，如果节点存在这个属性，在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">mpxTagName@swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>will be cover-view in swan<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/api/store-api.html" class="prev">
-        Store API
-      </a></span> <span class="next"><a href="/api/compile.html">
-        编译构建
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/40.10d90636.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/extend.html b/docs-vuepress/.vuepress/dist/api/extend.html
deleted file mode 100644
index e6fef447fb..0000000000
--- a/docs-vuepress/.vuepress/dist/api/extend.html
+++ /dev/null
@@ -1,365 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>周边拓展 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/41.8351af86.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" aria-current="page" class="active sidebar-link">周边拓展</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/extend.html#mpx-fetch" class="sidebar-link">mpx-fetch</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/extend.html#fetch-config" class="sidebar-link">fetch(config)</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#canceltoken" class="sidebar-link">CancelToken</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#xfetch" class="sidebar-link">XFetch</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#interceptors" class="sidebar-link">interceptors</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#proxy" class="sidebar-link">proxy 代理</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#usefetch" class="sidebar-link">useFetch</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/extend.html#api-proxy" class="sidebar-link">api-proxy</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#webview-bridge" class="sidebar-link">webview-bridge</a></li><li class="sidebar-sub-header"><a href="/api/extend.html#size-report" class="sidebar-link">size-report</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/extend.html#插件配置项" class="sidebar-link">插件配置项</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/extend.html#i18n" class="sidebar-link">i18n</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/extend.html#usei18n" class="sidebar-link">useI18n</a></li></ul></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="周边拓展"><a href="#周边拓展" class="header-anchor">#</a> 周边拓展</h1> <h2 id="mpx-fetch"><a href="#mpx-fetch" class="header-anchor">#</a> mpx-fetch</h2> <p>mpx-fetch提供了一个实例<strong>xfetch</strong> ，该实例包含以下api</p> <h3 id="fetch-config"><a href="#fetch-config" class="header-anchor">#</a> fetch(config)</h3> <blockquote><p>正常的promisify风格的请求方法</p></blockquote> <ul><li><p><code>{Object} config</code></p> <p>config 可指定以下属性：</p> <ul><li><p><strong>url</strong></p> <p><code>string</code></p> <p>设置请求url</p></li> <li><p><strong>method</strong></p> <p><code>string</code></p> <p>设置请求方式，默认为GET</p></li> <li><p><strong>data</strong></p> <p><code>object</code></p> <p>设置请求参数</p></li> <li><p><strong>params</strong></p> <p><code>object</code></p> <p>设置请求参数，参数会以 Query String 的形式进行传递</p></li> <li><p><strong>header</strong></p> <p><code>object</code></p> <p>设置请求的 header，header 中不能设置 Referer。
-<code>content-type</code> 默认为 <code>application/json</code></p></li> <li><p><strong>timeout</strong></p> <p><code>number</code></p> <p>单位为毫秒。若不传，默认读取app.json文件中__networkTimeout属性。 对于超时的处理可在 catch 方法中进行</p></li> <li><p><strong>emulateJSON</strong></p> <p><code>boolean</code></p> <p>设置为 true 时，等价于 header = {'content-type': 'application/x-www-form-urlencoded'}</p></li> <li><p><strong>usePre</strong></p> <p><code>boolean</code></p> <p>预请求开关，若设置为 true，则两次请求间隔在有效期内且请求参数和请求方式对比一致的情况下，会返回上一次的请求结果</p></li> <li><p><strong>cacheInvalidationTime</strong></p> <p><code>number</code></p> <p>预请求缓存有效时长，单位 ms，默认为 5000ms。当两次请求时间间隔超过设置时长后再发起二次请求时，上一次的请求缓存会失效然后重新发起请求</p></li> <li><p><strong>ignorePreParamKeys</strong></p> <p><code>array</code> | <code>string</code></p> <p>在判断缓存请求是否可用对比前后两次请求参数时，默认对比的是 options 传入的所有参数（包括 params 和 data ）。但在具体业务场景下某些参数不一致时的缓存结果依旧可使用（比如参数中带有时间戳），所以提供 ignorePreParamKeys 来设置对比参数过程中可忽略的参数的 key，支持字符串数组和字符串（字符串传多个 key 时使用英文逗号分隔）类型。
-配置后在进行参数对比时，不会对比在 ignorePreParamKeys 设置的参数。</p></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> mpxFetch <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>mpxFetch<span class="token punctuation">)</span>
-<span class="token comment">// 第一种访问形式</span>
-mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">10</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">'content-type'</span><span class="token operator">:</span> <span class="token string">'application/x-www-form-urlencoded'</span><span class="token punctuation">,</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">emulateJSON</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">usePre</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">cacheInvalidationTime</span><span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">ignorePreParamKeys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'timestamp'</span><span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-	<span class="token function">onLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-		<span class="token comment">// 第二种访问形式</span>
-		<span class="token keyword">this</span><span class="token punctuation">.</span>$xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://test.com'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-	<span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="canceltoken"><a href="#canceltoken" class="header-anchor">#</a> CancelToken</h3> <p>命名导出，用于创建一个取消请求的凭证。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> CancelToken <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
-<span class="token keyword">const</span> cancelToken <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">CancelToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-	<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-		<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
-	<span class="token punctuation">}</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">cancelToken</span><span class="token operator">:</span> cancelToken<span class="token punctuation">.</span>token
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-cancelToken<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token string">'手动取消请求'</span><span class="token punctuation">)</span> <span class="token comment">// 执行后请求中断，返回abort fail</span>
-</code></pre></div><h3 id="xfetch"><a href="#xfetch" class="header-anchor">#</a> XFetch</h3> <p>命名导出，用于创建一个新的mpx-fetch实例进行独立使用</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">interface</span> <span class="token class-name">FetchOptions</span><span class="token punctuation">{</span>
-    useQueue<span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token comment">// 是否开启队列功能</span>
-    proxy<span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token comment">// 是否开启代理功能</span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> XFetch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
-<span class="token keyword">const</span> newFetch <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XFetch</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span> <span class="token comment">// 生成新的mpx-fetch实例</span>
-</code></pre></div><h3 id="interceptors"><a href="#interceptors" class="header-anchor">#</a> interceptors</h3> <blockquote><p>实例属性，用于添加拦截器，包含两个属性，request &amp; response</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span>
-    <span class="token comment">// 也可以返回promise</span>
-    <span class="token keyword">return</span> config
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
-    <span class="token comment">// 也可以返回promise</span>
-    <span class="token keyword">return</span> res
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="proxy"><a href="#proxy" class="header-anchor">#</a> proxy 代理</h3> <h4 id="setproxy"><a href="#setproxy" class="header-anchor">#</a> setProxy</h4> <blockquote><p>配置代理项，可以传入一个数组或者一个对象，请求会按设置的规则进行代理</p></blockquote> <ul><li><p><strong>参数：</strong></p> <p><code>{Array | Object}</code></p> <ul><li><p><strong>test</strong></p> <p><code>object</code></p> <ul><li><p>url</p> <p><code>string</code></p> <p>全路径匹配，规则可以参考<a href="https://www.npmjs.com/package/path-to-regexp" target="_blank" rel="noopener noreferrer">path-to-regexp<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，也可参考下面的简单示例。</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>如果设置了此项，则 protocol、host、port、path 规则不再生效。此项支持 path-to-regexp 匹配，protocol、host、port、path 为全等匹配。</p></div></li> <li><p>protocol</p> <p><code>string</code></p> <p>待匹配的协议头</p></li> <li><p>host</p> <p><code>string</code></p> <p>不包含端口的 host</p></li> <li><p>port</p> <p><code>string</code></p> <p>待匹配的端口</p></li> <li><p>path</p> <p><code>string</code></p> <p>待匹配的路径</p></li> <li><p>params</p> <p><code>object</code></p> <p>同时匹配请求中的 <code>params</code> 和 <code>query</code></p></li> <li><p>data</p> <p><code>object</code></p> <p>匹配请求中的 <code>data</code></p></li> <li><p>header</p> <p><code>object</code></p> <p>匹配请求中的 <code>header</code></p></li> <li><p>method</p> <p><code>Method | Method[]</code></p> <p>匹配请求方法，不区分大小写，可以传一个方法，也可以传一个方法数组</p></li> <li><p>custom</p> <p><code>function</code></p> <p>自定义匹配规则，参数会注入原始请求配置，结果需返回 <code>true</code> 或 <code>false</code></p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>如果设置了此项，匹配结果以此项为准，以上规则均不再生效。</p></div></li></ul></li> <li><p><strong>proxy</strong></p> <p><code>object</code></p> <ul><li><p>url</p> <p><code>string</code></p> <p>代理的 url</p></li> <li><p>protocol</p> <p><code>string</code></p> <p>修改原请求的协议头</p></li> <li><p>host</p> <p><code>string</code></p> <p>代理的 host，不包含端口号</p></li> <li><p>port</p> <p><code>string</code></p> <p>修改端口号</p></li> <li><p>path</p> <p><code>string</code></p> <p>修改原请求路径</p></li> <li><p>params</p> <p><code>object</code></p> <p>合并原请求的 params</p></li> <li><p>data</p> <p><code>object</code></p> <p>合并原请求的 data</p></li> <li><p>header</p> <p><code>object</code></p> <p>合并原请求的 header</p></li> <li><p>method</p> <p><code>Method</code></p> <p>替换原请求的方法</p></li> <li><p>custom</p> <p><code>function</code></p> <p>自定义代理规则，会注入两个参数，第一个是上一个匹配规则处理后的请求配置，第二个是 match 的参数对象，结果需返回要修改的请求配置对象。</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>如果设置了此项，最终代理配置将以此项为准，其他配置规则均不再生效。</p></div></li></ul></li> <li><p><strong>waterfall</strong></p> <p><code>boolean</code></p> <p>默认为 <code>false</code>，为 <code>false</code> 时，命中当前规则处理完就直接返回；为 <code>true</code> 时，命中当前匹配规则处理完成后将结果传递给下面命中匹配规则继续处理。</p></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">setProxy</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 此项匹配之后，会按下面 proxy 配置的修改请求配置</span>
-		<span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token string-property property">'content-type'</span><span class="token operator">:</span> <span class="token string">'application/x-www-form-urlencoded'</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token literal-property property">test1</span><span class="token operator">:</span> <span class="token string">'abc'</span>
-        <span class="token punctuation">}</span>
-	<span class="token punctuation">}</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-		<span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-			<span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token string">'env test'</span>
-		<span class="token punctuation">}</span><span class="token punctuation">,</span>
-		<span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-			<span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token literal-property property">test2</span><span class="token operator">:</span> <span class="token string">'cba'</span>
-        <span class="token punctuation">}</span>
-	<span class="token punctuation">}</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">waterfall</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 为 true 时会将此次修改后的请求配置继续传递给下面的规则处理</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token comment">// 可以分别单独匹配 protocol、host、port、path；代理规则同样</span>
-        <span class="token literal-property property">protocol</span><span class="token operator">:</span> <span class="token string">'http:'</span><span class="token punctuation">,</span>
-		<span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">'mock.didi.com'</span><span class="token punctuation">,</span>
-		<span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
-		<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/mock/test'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">'test.didi.com'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8888</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">waterfall</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 自定义匹配规则</span>
-        <span class="token function">custom</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// config 为原始的请求配置</span>
-            <span class="token comment">// 自定义匹配逻辑</span>
-			<span class="token keyword">if</span> <span class="token punctuation">(</span>xxx<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-				<span class="token keyword">return</span> <span class="token boolean">true</span>
-			<span class="token punctuation">}</span>
-			<span class="token keyword">return</span> <span class="token boolean">false</span>
-		<span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 自定义代理配置</span>
-        <span class="token function">custom</span> <span class="token punctuation">(</span><span class="token parameter">config<span class="token punctuation">,</span> params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-			<span class="token comment">// config 为上面匹配后修改过的请求配置</span>
-            <span class="token comment">// params 为 match 后的参数对象</span>
-            <span class="token comment">// 返回需要修改的请求配置对象</span>
-			<span class="token keyword">return</span> <span class="token punctuation">{</span>
-                <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                    <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span>
-                <span class="token punctuation">}</span><span class="token punctuation">,</span>
-				<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-					<span class="token literal-property property">test3</span><span class="token operator">:</span> <span class="token string">'aaa'</span>
-				<span class="token punctuation">}</span>
-			<span class="token punctuation">}</span>
-		<span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">waterfall</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token comment">// : 可以匹配目标项，并将 match 结果返回到代理 custom 函数中</span>
-        <span class="token comment">// :和?都属于保留符号，若不想做匹配时需用 '\\' 转义</span>
-        <span class="token comment">// (.*)为全匹配</span>
-        <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">':protocol\\://mock.didi.com/mock/:id/oneapi/router/forum/api/v1/(.*)'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'post'</span><span class="token punctuation">]</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'https://127.0.0.1:8080/go/into/$id/api/v2/abcd'</span> <span class="token comment">// '$'项在代理生效后会替换匹配规则中的':'项</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">waterfall</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// false 时不会继续匹配后面的规则</span>
-<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="prependproxy"><a href="#prependproxy" class="header-anchor">#</a> prependProxy</h4> <blockquote><p>向前追加代理规则</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">prependProxy</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-	<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">waterfall</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="appendproxy"><a href="#appendproxy" class="header-anchor">#</a> appendProxy</h4> <blockquote><p>向后追加代理规则</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">appendProxy</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-	<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">waterfall</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="getproxy"><a href="#getproxy" class="header-anchor">#</a> getProxy</h4> <blockquote><p>查看已有的代理配置</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">getProxy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="clearproxy"><a href="#clearproxy" class="header-anchor">#</a> clearProxy</h4> <blockquote><p>解除所有的代理配置</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">clearProxy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="usefetch"><a href="#usefetch" class="header-anchor">#</a> useFetch</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token function">useFetch</span><span class="token punctuation">(</span>options<span class="token operator">?</span><span class="token operator">:</span> FetchOptions<span class="token punctuation">)</span><span class="token operator">:</span>xfetch
-</code></pre></div><p>在组合式 API 中使用，用来获取 <code>@mpxjs/fetch</code> 插件的 xfetch 实例，等用于 <code>mpx.xfetch</code>。 关于 xfetch 实例的详细介绍，请点击<a href="/api/extend.html#mpx-fetch">查看</a></p> <p>此外该方法可选择传入 <code>options</code> 参数，若传入参数，则会创建一个新的 XFetch 实例返回，若不传入参数，则默认将全局 <code>xfetch</code> 实例返回。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
-<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> mpxFetch <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>mpxFetch<span class="token punctuation">)</span>
-
-<span class="token comment">// script-setup.mpx</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> useFetch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
-<span class="token function">useFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">10</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">emulateJSON</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">usePre</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">cacheInvalidationTime</span><span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">ignorePreParamKeys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'timestamp'</span><span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><ul><li><strong>注意：</strong> options 参数同 <a href="/api/extend.html#XFetch">XFetch</a> 章节。</li></ul> <h2 id="api-proxy"><a href="#api-proxy" class="header-anchor">#</a> api-proxy</h2> <p>Mpx目前已经支持的API转换列表，供参考</p> <table><thead><tr><th>方法/平台</th> <th style="text-align:center;">wx</th> <th style="text-align:center;">ali</th> <th style="text-align:center;">web</th> <th style="text-align:center;">RN</th></tr></thead> <tbody><tr><td>getSystemInfo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>getSystemInfoSync</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>nextTick</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>showToast</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>hideToast</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>showModal</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>showLoading</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>hideLoading</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>showActionSheet</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>showNavigationBarLoading</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>hideNavigationBarLoading</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>setNavigationBarTitle</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>setNavigationBarColor</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>request</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>downloadFile</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td></tr> <tr><td>uploadFile</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>setStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>setStorageSync</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>removeStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>removeStorageSync</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>getStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>getStorageSync</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>getStorageInfo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>getStorageInfoSync</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>clearStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>clearStorageSync</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>saveImageToPhotosAlbum</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>previewImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>compressImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>chooseImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>getLocation</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>saveFile</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>removeSavedFile</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>getSavedFileList</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>getSavedFileInfo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>addPhoneContact</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>setClipboardData</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td></tr> <tr><td>getClipboardData</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td></tr> <tr><td>setScreenBrightness</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>getScreenBrightness</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>makePhoneCall</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td></tr> <tr><td>stopAccelerometer</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>startAccelerometer</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>stopCompass</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>startCompass</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>stopGyroscope</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>startGyroscope</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>scanCode</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>login</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>checkSession</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>getUserInfo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>requestPayment</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>createCanvasContext</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>canvasToTempFilePath</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>canvasPutImageData</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>canvasGetImageData</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td></tr> <tr><td>createSelectorQuery</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td></tr> <tr><td>onWindowResize</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>offWindowResize</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>arrayBufferToBase64</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>base64ToArrayBuffer</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>connectSocket</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>getNetworkType</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>onNetworkStatusChange</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr> <tr><td>offNetworkStatusChange</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td></tr></tbody></table> <h2 id="webview-bridge"><a href="#webview-bridge" class="header-anchor">#</a> webview-bridge</h2> <p>Mpx 支持小程序跨平台后，多个平台的小程序里都提供了 webview 组件，webview 打开的 H5 页面可以通过小程序提供的 API 来与小程序通信以及调用一些小程序的能力，但是各家小程序对于 webview 提供的API是不一样的。</p> <p>比如微信的 webview 打开的 H5 页面里是通过调用 wx.miniProgram.navigateTo 来跳转到原生小程序页面的，而在支付宝是通过调用 my.navigateTo 来实现跳转的，那么我们开发 H5 时候为了让 H5 能适应各家小程序平台就需要写多份对应逻辑。</p> <p>为解决这个问题，Mpx 提供了抹平平台差异的bridge库：@mpxjs/webview-bridge。</p> <p><strong>安装：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>npm install @mpxjs<span class="token operator">/</span>webview<span class="token operator">-</span>bridge
-</code></pre></div><p><strong>使用：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/webview-bridge'</span>
-mpx<span class="token punctuation">.</span><span class="token function">navigateBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-mpx<span class="token punctuation">.</span>env <span class="token comment">// 输出：wx/qq/ali/baidu/tt</span>
-mpx<span class="token punctuation">.</span><span class="token function">checkJSApi</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>cdn地址引用：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 开发环境版本，方便调试 <span class="token operator">--</span><span class="token operator">&gt;</span>
-<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">&quot;https://dpubstatic.udache.com/static/dpubimg/D2JeLyT0_Y/2.2.43.webviewbridge.js&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-
-<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 生产环境版本，压缩了体积 <span class="token operator">--</span><span class="token operator">&gt;</span>
-<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">&quot;https://dpubstatic.udache.com/static/dpubimg/PRg145LZ-i/2.2.43.webviewbridge.min.js&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-
-
-<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 同时支持 <span class="token constant">ES</span> Module 引入的 <span class="token operator">--</span><span class="token operator">&gt;</span>
-<span class="token comment">// index.html</span>
-<span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;module&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;https://dpubstatic.udache.com/static/dpubimg/6MQOo-ocI4/2.2.43.webviewbridge.esm.browser.min.js&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-<span class="token comment">// main.js</span>
-<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">&quot;https://dpubstatic.udache.com/static/dpubimg/6MQOo-ocI4/2.2.43.webviewbridge.esm.browser.min.js&quot;</span>
-
-<span class="token comment">//ES Module 开发版本地址： https://dpubstatic.udache.com/static/dpubimg/cdhpNhmWmJ/2.2.43.webviewbridge.esm.browser.js</span>
-</code></pre></div><p><strong>基础方法提供：</strong></p> <table><thead><tr><th>方法/平台</th> <th style="text-align:center;">wx</th> <th style="text-align:center;">qq</th> <th style="text-align:center;">ali</th> <th style="text-align:center;">baidu</th> <th style="text-align:right;">tt</th></tr></thead> <tbody><tr><td>navigateTo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>navigateBack</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>switchTab</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>reLaunch</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>redirectTo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>getEnv</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>postMessage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>getLoadError</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">✅</td></tr> <tr><td>onMessage</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr></tbody></table> <p><strong>扩展方法提供：</strong></p> <table><thead><tr><th>方法/平台</th> <th style="text-align:center;">wx</th> <th style="text-align:center;">qq</th> <th style="text-align:center;">ali</th> <th style="text-align:center;">baidu</th> <th style="text-align:right;">tt</th></tr></thead> <tbody><tr><td>checkJSApi</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>chooseImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">❌</td></tr> <tr><td>previewImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">❌</td></tr> <tr><td>uploadImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>downloadImage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>getLocalImgData</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>startRecord</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>stopRecord</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>onVoiceRecordEnd</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>playVoice</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>pauseVoice</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>stopVoice</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>onVoicePlayEnd</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>uploadVoice</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>downloadVoice</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>translateVoice</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>getNetworkType</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">❌</td></tr> <tr><td>openLocation</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">❌</td></tr> <tr><td>getLocation</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:right;">❌</td></tr> <tr><td>stopSearchBeacons</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>onSearchBeacons</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>scanQRCode</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>chooseCard</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>addCard</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>openCard</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr> <tr><td>alert</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>showLoading</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>hideLoading</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>setStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>getStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>removeStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>clearStorage</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>getStorageInfo</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>startShare</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>tradePay</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:center;"></td> <td style="text-align:right;"></td></tr> <tr><td>onMessage</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">❌</td> <td style="text-align:center;">✅</td> <td style="text-align:center;">❌</td> <td style="text-align:right;">❌</td></tr></tbody></table> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>这个库仅提供给 H5 使用，请勿在小程序环境引入</p></div> <h2 id="size-report"><a href="#size-report" class="header-anchor">#</a> size-report</h2> <p>Mpx框架项目包体积可以进行分组、分包、页面、冗余Npm包等维度的分析和对比，详细<a href="/advance/size-report.html">请见</a></p> <h3 id="插件配置项"><a href="#插件配置项" class="header-anchor">#</a> 插件配置项</h3> <ul><li><p><strong>server</strong></p> <p><code>object</code></p> <p>本地可视化服务相关配置</p></li> <li><p><strong>filename</strong></p> <p><code>string</code></p> <p>构建生成的包体积详细输出文件地址</p></li> <li><p><strong>threshold</strong></p> <p><code>object</code></p> <p>配置项目总体积和分包体积阈值，包含两个字段，size 为项目总体积阈值，packages 为分包体积阈值</p> <div class="language-html extra-class"><pre class="language-html"><code>{
-   size: '16MB', // 项目总包体积限额 16M
-   packages: '2MB' // 项目每个分包体积限额 2M
-}
-</code></pre></div></li> <li><p><strong>groups</strong></p> <p><code>Array&lt;object&gt;</code></p> <p>配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息</p> <ul><li><p>name</p> <p><code>string</code></p> <p>分组名称</p></li> <li><p>threshold</p> <p><code>string | object</code></p> <p>分组相关体积阈值，若不配置则该分组不校验体积阈值，同时也支持对分组中占各分包体积阈值</p> <div class="language-html extra-class"><pre class="language-html"><code>// 分组体积限额 500KB
-threshold: '500KB'
-// 或者如下方，分组体积限额500KB，分组占主包体积限额160KB
-threshold: {
-  size: '500KB',
-  packages: {
-    main: '160KB'
-  }
-}
-</code></pre></div></li> <li><p>entryRules</p> <p><code>object</code></p> <p>配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry</p> <ul><li>include: 包含符合条件的入口文件，默认为空数组，规则数组中支持函数、正则、字符串</li> <li>exclude: 剔除符合条件的入口文件，默认为空数组，规则数组中支持函数、正则、字符串</li></ul> <div class="language-html extra-class"><pre class="language-html"><code>include: [/@someGroup\/some-npm-package/],
-exclude: [/@someGroup\/some-two-pack/]
-</code></pre></div></li> <li><p>noEntryRules</p> <p><code>object</code></p> <p>配置计算分组中纯 js 入口引入的体积（不包含组件和页面）</p> <ul><li>include: 包含符合条件的 js 文件，默认为空数组，规则数组中支持函数、正则、字符串</li> <li>exclude: 剔除符合条件的 js 文件，默认为空数组，规则数组中支持函数、正则、字符串</li></ul> <div class="language-html extra-class"><pre class="language-html"><code>include: [/@someGroup\/some-npm-package/],
-exclude: [/@someGroup\/some-two-pack/]
-</code></pre></div></li></ul></li> <li><p><strong>reportPages</strong></p> <p><code>boolean</code></p> <p>是否收集页面维度体积详情，默认 false</p></li> <li><p><strong>reportAssets</strong></p> <p><code>boolean</code></p> <p>是否收集资源维度体积详情，默认 false</p></li> <li><p><strong>reportRedundance</strong></p> <p><code>boolean</code></p> <p>是否收集冗余资源，默认 false</p></li> <li><p><strong>showEntrysPackages</strong></p> <p><code>Array&lt;string&gt;</code></p> <p>展示某些分包资源的引用来源信息，例如 ['main'] 为查看主包资源的引用来源信息，默认为 []</p></li></ul> <p>配置使用示例：</p> <div class="language-html extra-class"><pre class="language-html"><code>{
-  // 本地可视化服务相关配置
-  server: {
-    enable: true, // 是否启动本地服务，非必填，默认 true
-    autoOpenBrowser: true, // 是否自动打开可视化平台页面，非必填，默认 true
-    port: 0, // 本地服务端口，非必填，默认 0(随机端口)
-    host: '127.0.0.1', // 本地服务host，非必填
-  },
-  // 体积报告生成后输出的文件地址名，路径相对为 dist/wx 或者 dist/ali
-  filename: '../report.json',
-  // 配置阈值，此处代表总包体积阈值为 16MB，分包体积阈值为 2MB，超出将会触发编译报错提醒，该报错不阻断构建
-  threshold: {
-    size: '16MB',
-    packages: '2MB'
-  },
-  // 配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息
-  groups: [
-    {
-      // 分组名称
-      name: 'vant',
-      // 配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry，如下所示的分组配置将计算项目中引入的 vant 组件带来的体积占用
-      entryRules: {
-        include: '@vant/weapp'
-      }
-    },
-    {
-      name: 'pageGroup',
-      // 每个分组中可分别配置阈值，如果不配置则表示
-      threshold: '500KB',
-      entryRules: {
-        include: ['src/pages/index', 'src/pages/user']
-      }
-    },
-    {
-      name: 'someSdk',
-      entryRules: {
-        include: ['@somegroup/someSdk/index', '@somegroup/someSdk2/index']
-      },
-      // 有的时候你可能希望计算纯 js 入口引入的体积（不包含组件和页面），这种情况下需要使用 noEntryRules
-      noEntryRules: {
-        include: 'src/lib/sdk.js'
-      }
-    }
-  ],
-  // 是否收集页面维度体积详情，默认 false
-  reportPages: true,
-  // 是否收集资源维度体积详情，默认 false
-  reportAssets: true,
-  // 是否收集冗余资源，默认 false
-  reportRedundance: true,
-  // 展示某些分包资源的引用来源信息，默认为 []
-  showEntrysPackages: ['main']
-}
-</code></pre></div><h2 id="i18n"><a href="#i18n" class="header-anchor">#</a> i18n</h2> <h3 id="usei18n"><a href="#usei18n" class="header-anchor">#</a> useI18n</h3> <p>组合式 API 中使用，用来获取 i18n 实例。</p> <p><strong>参数选项</strong></p> <hr> <h4 id="locale"><a href="#locale" class="header-anchor">#</a> locale</h4> <p><code>Locale</code></p> <p>设置语言环境</p> <p><strong>注意：</strong> 只传 locale，不传 messages 属性时不起作用</p> <h4 id="fallbacklocale"><a href="#fallbacklocale" class="header-anchor">#</a> fallbackLocale</h4> <p><code>Locale</code></p> <p>预设的语言环境，找不到语言环境时进行回退。</p> <h4 id="messages"><a href="#messages" class="header-anchor">#</a> messages</h4> <p><code>LocaleMessages</code></p> <p>本地化的语言环境信息。</p> <p><strong>返回实例属性和方法</strong></p> <hr> <h4 id="locale-2"><a href="#locale-2" class="header-anchor">#</a> locale</h4> <p><code>WritableComputedRef&lt;Locale&gt;</code></p> <p>可响应性的 ref 对象，表示当前 i18n 实例所使用的 locale。</p> <p>修改 ref 值会对局部或者全局语言集的 locale 进行更改，并触发翻译方法重新执行。</p> <h4 id="fallbackroot"><a href="#fallbackroot" class="header-anchor">#</a> fallbackRoot</h4> <p><code>boolean</code></p> <p>本地化失败时是否回归到全局作用域。</p> <h4 id="getlocalemessage-locale"><a href="#getlocalemessage-locale" class="header-anchor">#</a> getLocaleMessage( locale )</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">getLocaleMessage</span> <span class="token punctuation">(</span>locale<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> LocaleMessageObject
-</code></pre></div><p>获取语言环境的 <code>locale</code> 信息。</p> <h4 id="setlocalemessage-locale-message"><a href="#setlocalemessage-locale-message" class="header-anchor">#</a> setLocaleMessage( locale, message )</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">setLocaleMessage</span><span class="token punctuation">(</span>locale<span class="token operator">:</span> Locale<span class="token punctuation">,</span> messages<span class="token operator">:</span> LocaleMessageObject<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><p>设置语言环境的 <code>locale</code> 信息。</p> <h4 id="mergelocalemessage-locale-message"><a href="#mergelocalemessage-locale-message" class="header-anchor">#</a> mergeLocaleMessage( locale, message )</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">mergeLocaleMessage</span><span class="token punctuation">(</span>locale<span class="token operator">:</span> Locale<span class="token punctuation">,</span> messages<span class="token operator">:</span> LocaleMessageObject<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><p>将语言环境信息 <code>locale</code> 合并到已注册的语言环境信息中。</p> <h4 id="messages-2"><a href="#messages-2" class="header-anchor">#</a> messages</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">readonly</span> messages<span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span><span class="token punctuation">{</span>
-   <span class="token punctuation">[</span><span class="token constant">K</span> <span class="token keyword">in</span> <span class="token keyword">keyof</span> Messages<span class="token punctuation">]</span><span class="token operator">:</span> Messages<span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
-</code></pre></div><ul><li><strong>只读</strong></li></ul> <p>局部或者全局的语言环境信息。</p> <h4 id="isglobal"><a href="#isglobal" class="header-anchor">#</a> isGlobal</h4> <p><code>boolean</code></p> <p>是否是全局 i18n 实例。</p> <h4 id="t"><a href="#t" class="header-anchor">#</a> t</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">t</span><span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> choice<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> values<span class="token operator">:</span> <span class="token builtin">Array</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> TranslateResult
-</code></pre></div><p>文案翻译函数</p> <p>根据传入的 key 以及当前 locale 环境获取对应文案，文案来源是全局作用域还是本地作用域取决于 <code>useI18n</code> 执行时是否传入对应的 <code>messages、locale</code> 等值。</p> <p><strong>choice 参数可选</strong> ，当传入 choice 时，t 函数的表现为使用复数进行翻译，和老版本中的 tc 函数表现一致。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('car', 1)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('car', 2)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('apple', 0)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('apple', 1)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('apple', 10, {count: 10})}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token comment">// 语言环境信息如下：</span>
-  <span class="token keyword">const</span> messages <span class="token operator">=</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">en</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">car</span><span class="token operator">:</span> <span class="token string">'car | cars'</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">apple</span><span class="token operator">:</span> <span class="token string">'no apples | one apple | {count} apples'</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>输入如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>car<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>cars<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>no apples<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>one apple<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>10 apples<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>关于复数的更多信息可以点击<a href="https://kazupon.github.io/vue-i18n/zh/guide/pluralization.html#%E5%A4%8D%E6%95%B0" target="_blank" rel="noopener noreferrer">查看<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>values 参数可选</strong> ，如果需要对文案信息即逆行格式化处理，则需要传入 values。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  // 模版输出 hello world
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('message.hello', { msg: 'hello'})}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> useI18n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/core&quot;</span>
-
-  <span class="token keyword">const</span> messages <span class="token operator">=</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">en</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} world'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-  
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-        <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-          <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-              <span class="token string-property property">'en-US'</span><span class="token operator">:</span> en
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span><span class="token punctuation">)</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>t<span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h4 id="te"><a href="#te" class="header-anchor">#</a> te</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">te</span><span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
-</code></pre></div><p>检查 key 是否存在。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/api/optional-api.html" class="prev">
-        选项式 API
-      </a></span> <!----></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/41.8351af86.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/global-api.html b/docs-vuepress/.vuepress/dist/api/global-api.html
deleted file mode 100644
index 2fc002be47..0000000000
--- a/docs-vuepress/.vuepress/dist/api/global-api.html
+++ /dev/null
@@ -1,253 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>全局 API | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/42.53972f6c.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" aria-current="page" class="active sidebar-link">全局 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/global-api.html#global-mpx" class="sidebar-link">全局对象 Mpx</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#createapp" class="sidebar-link">createApp</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#createpage" class="sidebar-link">createPage</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#createcomponent" class="sidebar-link">createComponent</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#nexttick" class="sidebar-link">nextTick</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#topureobject" class="sidebar-link">toPureObject</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#getmixin" class="sidebar-link">getMixin</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#implement" class="sidebar-link">implement</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#built-in-lifecycle-variable" class="sidebar-link">内建生命周期变量</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#响应式-api" class="sidebar-link">响应式 API</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#组合式-api" class="sidebar-link">组合式 API</a></li><li class="sidebar-sub-header"><a href="/api/global-api.html#store-api" class="sidebar-link">store API</a></li></ul></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="全局-api"><a href="#全局-api" class="header-anchor">#</a> 全局 API</h1> <h2 id="global-mpx"><a href="#global-mpx" class="header-anchor">#</a> 全局对象 Mpx </h2> <p><code>@mpxjs/core</code> 默认导出 mpx 全局实例对象，通过该实例对象我们可以访问部分应用实例 API</p> <h3 id="mixin"><a href="#mixin" class="header-anchor">#</a> mixin</h3> <p>全局注入mixin方法接收两个参数：mpx.mixin(mixins, options)</p> <ul><li>第一个参数是要混入的mixins，接收类型 <code>MixinObject|MixinObject[]</code></li> <li>第二个参数是为全局混入配置，形如<code>{types:string|string[], stage:number}</code>，其中<code>types</code>用于控制mixin注入的范围，可选值有<code>'app'|'page'|'component'</code>；<code>stage</code>用于控制注入mixin的插入顺序，当stage为负数时，注入的mixin会被插入到构造函数配置中的<code>options.mixins</code>之前，数值越小约靠前，反之当stage为正数时，注入的mixin会被插入到<code>options.mixins</code>之后，数值越大越靠后。</li></ul> <blockquote><p>所有mixin中生命周期的执行均先于构造函数配置中直接声明的生命周期，mixin之间的执行顺序则遵从于其在<code>options.mixins</code>数组中的顺序</p></blockquote> <blockquote><p>options的默认值为<code>{types: ['app','page','component'], stage: -1}</code>，不传stage时，全局注入mixin的声明周期默认在<code>options.mixins</code>之前执行</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token comment">// 只在page中混入</span>
-mpx<span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function-variable function">getData</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">types</span><span class="token operator">:</span><span class="token string">'page'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 默认混入，在app|page|component中都会混入</span>
-mpx<span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-  <span class="token punctuation">{</span>
-    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function-variable function">getData</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token punctuation">{</span>
-    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function-variable function">setData</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">]</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 只在component中混入，且执行顺序在options.mixins之后</span>
-mpx<span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">attached</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'com attached'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">types</span><span class="token operator">:</span> <span class="token string">'component'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">stage</span><span class="token operator">:</span> <span class="token number">100</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="injectmixins"><a href="#injectmixins" class="header-anchor">#</a> injectMixins</h3> <p>该方法是 <code>mpx.mixin</code> 方法的别名，<code>mpx.injectMixins({})</code> 等同于 <code>mpx.mixin({})</code></p> <h3 id="observable"><a href="#observable" class="header-anchor">#</a> observable</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">observable</span><span class="token punctuation">(</span>options<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token operator">:</span> Mpx
-</code></pre></div><p>用于创建响应式数据。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token comment">// 直接通过 mpx 对象访问</span>
-<span class="token keyword">const</span> b <span class="token operator">=</span> mpx<span class="token punctuation">.</span><span class="token function">observable</span><span class="token punctuation">(</span>object<span class="token punctuation">)</span>
-</code></pre></div><ul><li><strong>注意：</strong>
-Mpx 2.8 版本后该 API 等同于 <code>reactive</code>，同时不再支持具名导出方式，建议直接使用 <code>reactive</code> 替代，请<a href="/api/reactivity-api/basic-reactivity.html#reactive">点击</a>查看。</li></ul> <h3 id="set"><a href="#set" class="header-anchor">#</a> set</h3> <p>用于对一个响应式对象新增属性，会<code>触发订阅者更新操作</code>。<a href="/api/global-api.html#set">查看详情</a></p> <h3 id="delete"><a href="#delete" class="header-anchor">#</a> delete</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token keyword">delete</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Object<span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><p>用于对一个响应式对象删除属性，会<code>触发订阅者更新操作</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-mpx<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">)</span>
-</code></pre></div><ul><li><strong>注意：</strong> <code>mpx.delete</code> 也可以使用具名导出的 <code>del</code>。<a href="/api/global-api.html#del">查看详情</a></li></ul> <h3 id="use"><a href="#use" class="header-anchor">#</a> use</h3> <blockquote><p>用于安装外部扩展, 支持多参数
-方法接收两个参数：mpx.use(plugin, options)</p></blockquote> <ul><li>第一个参数是要安装的外部扩展</li> <li>第二个参数是对象，如果第二个参数是一个包含（prefix or postfix）的option， 那么将会对插件扩展的属性添加前缀或后缀</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> test <span class="token keyword">from</span> <span class="token string">'./test'</span>
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>test<span class="token punctuation">)</span>
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>test<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'mpx'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'otherparams'</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="watch"><a href="#watch" class="header-anchor">#</a> watch</h3> <p>watch 可以通过全局实例访问，也可以使用具名导出的方式，二者逻辑相同，我们推荐使用具名导出的方式。<a href="/api/reactivity-api/computed-watch-api.html#watch">查看详情</a></p> <h2 id="createapp"><a href="#createapp" class="header-anchor">#</a> createApp</h2> <blockquote><p>注册一个小程序，接受一个 Object 类型的参数</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createApp<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">onLaunch</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Launch'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">onShow</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Page show'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token comment">//全局变量 可通过getApp()访问</span>
-  <span class="token literal-property property">globalDataA</span><span class="token operator">:</span> <span class="token string">'I am global dataA'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">globalDataB</span><span class="token operator">:</span> <span class="token string">'I am global dataB'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token comment">// 或者</span>
-<span class="token function">createApp</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span>
-</code></pre></div><h2 id="createpage"><a href="#createpage" class="header-anchor">#</a> createPage</h2> <blockquote><p>类微信小程序（微信、百度、头条等）内部使用<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html" target="_blank" rel="noopener noreferrer">Component的方式创建页面<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，所以除了支持页面的生命周期之外还同时支持组件的一切特性。当使用 Component 创建页面时，页面生命周期需要写在 methods 内部（微信小程序原生规则），mpx 进行了统一封装转换，页面生命周期都写在最外层即可</p></blockquote> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createPage</span><span class="token punctuation">(</span>options<span class="token operator">:</span> object<span class="token punctuation">,</span> config<span class="token operator">?</span><span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><ul><li><p>options:</p> <p>具体形式除了 computed、watch 这类 Mpx 扩展特性之外，其他的属性都参照原生小程序的官方文档即可。</p></li> <li><p>config:</p> <p>如果希望标识一个组件是最纯粹的原生组件，不用数据响应等能力，可通过 config.isNative 传 true 声明。
-如果有需要复写/改写最终调用的创建页面的构造器，可以通过 config 对象的 customCtor 提供。</p> <ul><li><strong>注意:</strong>
-mpx本身是用 component 来创建页面的，如果传page可能在初始化时候生命周期不正常导致取props有一点问题</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createPage<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">test2</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>test <span class="token operator">+</span> <span class="token number">1</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">test</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> old</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> old<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">onShow</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>test<span class="token operator">++</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="createcomponent"><a href="#createcomponent" class="header-anchor">#</a> createComponent</h2> <blockquote><p>创建自定义组件，接受两个Object类型的参数。</p></blockquote> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createComponent</span><span class="token punctuation">(</span>options<span class="token operator">:</span> object<span class="token punctuation">,</span> config<span class="token operator">?</span><span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">prop</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">type</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
-      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">10</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">test2</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>test <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>prop
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">test</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> old</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> old<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">prop</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">handler</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> old</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> old<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否首次执行一次</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="nexttick"><a href="#nexttick" class="header-anchor">#</a> nextTick</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">nextTick</span><span class="token punctuation">(</span>callback<span class="token operator">:</span> <span class="token builtin">Function</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><p>当我们在 Mpx 中更改响应性状态时，最终页面的更新并不是同步立即生效的，而是由 Mpx 将它们缓存在一个队列中， 等到下一个 tick 一起执行，
-从而保证了组件/页面无论发生多少状态改变，都仅执行一次更新，从而减少 <code>setData</code> 调用次数。</p> <p><code>nextTick()</code> 可以在状态改变后立即调用，可以传递一个函数作为参数，在等待页面/组件更新完成后，函数参数会触发执行。</p> <div class="language-js extra-class"><pre class="language-js"><code>     <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> nextTick<span class="token punctuation">,</span> ref<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-     <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-       <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-         <span class="token keyword">const</span> showChild <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
-         <span class="token comment">// DOM 还没有更新</span>
-         <span class="token function">setTimeOut</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-            showChild<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span>
-         <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span>
-         <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-           context<span class="token punctuation">.</span>refs<span class="token punctuation">[</span><span class="token string">'child'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-         <span class="token punctuation">}</span><span class="token punctuation">)</span>
-         <span class="token keyword">return</span> <span class="token punctuation">{</span>
-           showChild
-         <span class="token punctuation">}</span>
-       <span class="token punctuation">}</span>
-     <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="topureobject"><a href="#topureobject" class="header-anchor">#</a> toPureObject</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">toPureObject</span><span class="token punctuation">(</span>options<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token operator">:</span> object
-</code></pre></div><p>业务拿到的数据可能是响应式数据实例（包含了些其他属性），使用<code>toPureObject</code>方法可以将响应式的数据转化成纯 js 对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>toPureObject<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">const</span> pureObject <span class="token operator">=</span> <span class="token function">toPureObject</span><span class="token punctuation">(</span>object<span class="token punctuation">)</span>
-</code></pre></div><h2 id="getmixin"><a href="#getmixin" class="header-anchor">#</a> getMixin</h2> <p>专为ts项目提供的反向推导辅助方法，该函数接收类型为 <code>Object</code> ,会将传入的嵌套mixins对象拉平成一个扁平的mixin对象</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> getMixin<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token comment">// 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin</span>
-<span class="token keyword">const</span> mixin <span class="token operator">=</span> <span class="token function">getMixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">getMixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">value1</span><span class="token operator">:</span> <span class="token number">2</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">lifetimes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">attached</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value1<span class="token punctuation">,</span> <span class="token string">'attached'</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">getMixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">value2</span><span class="token operator">:</span> <span class="token number">6</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value1 <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value2 <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>outsideVal<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token comment">/*
-mixin值
-{
-  data: {value2: 6, value1: 2},
-  created: ƒ created(),
-  attached: ƒ attached()
-}
-*/</span>
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">outsideVal</span><span class="token operator">:</span> <span class="token number">20</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span>mixin<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">/*
-以上执行输出：
-28
-2 &quot;attached&quot;
-*/</span>
-</code></pre></div><h2 id="implement"><a href="#implement" class="header-anchor">#</a> implement</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">implement</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> options<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token operator">:</span> object
-</code></pre></div><ul><li><code>{Object} options</code> <ul><li><code>{Array} modes</code>：需要取消的平台</li> <li><code>{Boolean} remove</code>：是否将此能力直接移除</li> <li><code>{Function} processor</code>：设置成功的回调函数</li></ul></li></ul> <p>以微信为 base 将代码转换输出到其他平台时（如支付宝、web 平台等），会存在一些无法进行模拟的跨平台差异，会在运行时进行检测并报错指出，例如微信转支付宝时使用 moved 生命周期等。使用<code>implement</code>方法可以取消这种报错。您可以使用 mixin 自行实现跨平台差异，然后使用 implement 取消报错。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>implement<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">if</span> <span class="token punctuation">(</span>__mpx_mode__ <span class="token operator">===</span> <span class="token string">'web'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> <span class="token function-variable function">processor</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token punctuation">}</span>
-  <span class="token function">implement</span><span class="token punctuation">(</span><span class="token string">'onShareAppMessage'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">modes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'web'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 需要取消的平台，可配置多个</span>
-    <span class="token literal-property property">remove</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否将此能力直接移除</span>
-    processor <span class="token comment">// 设置成功的回调函数</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="built-in-lifecycle-variable"><a href="#built-in-lifecycle-variable" class="header-anchor">#</a> 内建生命周期变量 </h2> <p>Mpx 在运行时自身有着一套内建生命周期，当开发者想使用内建生命周期时，可以通过内建生命周期变量进行对应生命周期的注册，
-需要注意的是，这部分内建生命周期变量<strong>只能用于选项式 API 中</strong>。</p> <h3 id="beforecreate"><a href="#beforecreate" class="header-anchor">#</a> BEFORECREATE</h3> <p><code>string</code></p> <p>在组件实例刚刚被创建时执行，在实例初始化之后、进行数据侦听和 data 初始化之前同步调用，注意此时不能调用 setData。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> <span class="token constant">BEFORECREATE</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/core&quot;</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token punctuation">[</span><span class="token constant">BEFORECREATE</span><span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'beforecreate trigger'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="created"><a href="#created" class="header-anchor">#</a> CREATED</h3> <p><code>string</code></p> <p>在组件实例刚刚被创建时执行。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、事件/侦听器的回调函数。
-然而，挂载阶段还没开始，注意此时不能调用 setData。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> <span class="token constant">CREATED</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/core&quot;</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token punctuation">[</span><span class="token constant">CREATED</span><span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'beforecreate trigger'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="beforemount"><a href="#beforemount" class="header-anchor">#</a> BEFOREMOUNT</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onbeforemount">onBeforeMount</a></p> <h3 id="mounted"><a href="#mounted" class="header-anchor">#</a> MOUNTED</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onmounted">onMounted</a></p> <h3 id="beforeupdate"><a href="#beforeupdate" class="header-anchor">#</a> BEFOREUPDATE</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onbeforeupdate">onBeforeUpdate</a></p> <h3 id="updated"><a href="#updated" class="header-anchor">#</a> UPDATED</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onupdated">onUpdated</a></p> <h3 id="serverprefetch"><a href="#serverprefetch" class="header-anchor">#</a> SERVERPREFETCH</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onServerPrefetch">onServerPrefetch</a></p> <h3 id="beforeunmount"><a href="#beforeunmount" class="header-anchor">#</a> BEFOREUNMOUNT</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onbeforeunmount">onBeforeUnmount</a></p> <h3 id="unmounted"><a href="#unmounted" class="header-anchor">#</a> UNMOUNTED</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onunmounted">onUnmounted</a></p> <h3 id="onload"><a href="#onload" class="header-anchor">#</a> ONLOAD</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onload">onLoad</a></p> <h3 id="onshow"><a href="#onshow" class="header-anchor">#</a> ONSHOW</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onshow">onShow</a></p> <h3 id="onhide"><a href="#onhide" class="header-anchor">#</a> ONHIDE</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onhide">onHide</a></p> <h3 id="onresize"><a href="#onresize" class="header-anchor">#</a> ONRESIZE</h3> <p>选项式 API 中使用，作用同<a href="/api/composition-api.html#onresize">onResize</a></p> <h2 id="响应式-api"><a href="#响应式-api" class="header-anchor">#</a> 响应式 API</h2> <p>详情请<a href="/api/reactivity-api/basic-reactivity.html">移步</a></p> <h2 id="组合式-api"><a href="#组合式-api" class="header-anchor">#</a> 组合式 API</h2> <p>详情请<a href="/api/composition-api.html">移步</a></p> <h2 id="store-api"><a href="#store-api" class="header-anchor">#</a> store API</h2> <p>详情请<a href="/api/store-api.html">移步</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/api/app-config.html" class="prev">
-        全局配置
-      </a></span> <span class="next"><a href="/api/instance-api.html">
-        实例 API
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/42.53972f6c.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/index.html b/docs-vuepress/.vuepress/dist/api/index.html
deleted file mode 100644
index 2e07eecb72..0000000000
--- a/docs-vuepress/.vuepress/dist/api/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/23.365f9a87.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><div id="api-index" data-v-a2f64316><div class="header" data-v-a2f64316><h1 data-v-a2f64316>API 参考</h1> <div class="api-filter" data-v-a2f64316><label for="api-filter" data-v-a2f64316>过滤</label> <input type="search" placeholder="Enter keyword" id="api-filter" value="" data-v-a2f64316></div></div> <div class="api-section" data-v-a2f64316><h2 id="全局配置" data-v-a2f64316>全局配置</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><!----> <ul data-v-a2f64316><li data-v-a2f64316><a href="app-config.html#usestrictdiff" data-v-a2f64316>useStrictDiff</a></li><li data-v-a2f64316><a href="app-config.html#ignorewarning" data-v-a2f64316>ignoreWarning</a></li><li data-v-a2f64316><a href="app-config.html#ignoreproxywhitelist" data-v-a2f64316>ignoreProxyWhiteList</a></li><li data-v-a2f64316><a href="app-config.html#observeclassinstance" data-v-a2f64316>observeClassInstance</a></li><li data-v-a2f64316><a href="app-config.html#proxyeventhandler" data-v-a2f64316>proxyEventHandler</a></li><li data-v-a2f64316><a href="app-config.html#setdatahandler" data-v-a2f64316>setDataHandler</a></li><li data-v-a2f64316><a href="app-config.html#forceflushsync" data-v-a2f64316>forceFlushSync</a></li><li data-v-a2f64316><a href="app-config.html#webrouteconfig" data-v-a2f64316>webRouteConfig</a></li><li data-v-a2f64316><a href="app-config.html#webconfig" data-v-a2f64316>webConfig</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="全局-api" data-v-a2f64316>全局 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>全局对象 Mpx</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="global-api.html#mixin" data-v-a2f64316>mixin</a></li><li data-v-a2f64316><a href="global-api.html#injectmixins" data-v-a2f64316>injectMixins</a></li><li data-v-a2f64316><a href="global-api.html#observable" data-v-a2f64316>observable</a></li><li data-v-a2f64316><a href="global-api.html#set" data-v-a2f64316>set</a></li><li data-v-a2f64316><a href="global-api.html#delete" data-v-a2f64316>delete</a></li><li data-v-a2f64316><a href="global-api.html#use" data-v-a2f64316>use</a></li><li data-v-a2f64316><a href="global-api.html#watch" data-v-a2f64316>watch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>基础 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="global-api.html#createapp" data-v-a2f64316>createApp</a></li><li data-v-a2f64316><a href="global-api.html#createpage" data-v-a2f64316>createPage</a></li><li data-v-a2f64316><a href="global-api.html#createcomponent" data-v-a2f64316>createComponent</a></li><li data-v-a2f64316><a href="global-api.html#nexttick" data-v-a2f64316>nextTick</a></li><li data-v-a2f64316><a href="global-api.html#topureobject" data-v-a2f64316>toPureObject</a></li><li data-v-a2f64316><a href="global-api.html#getmixin" data-v-a2f64316>getMixin</a></li><li data-v-a2f64316><a href="global-api.html#implement" data-v-a2f64316>implement</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>内建生命周期变量</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="global-api.html#beforecreate" data-v-a2f64316>BEFORECREATE</a></li><li data-v-a2f64316><a href="global-api.html#created" data-v-a2f64316>CREATED</a></li><li data-v-a2f64316><a href="global-api.html#beforemount" data-v-a2f64316>BEFOREMOUNT</a></li><li data-v-a2f64316><a href="global-api.html#mounted" data-v-a2f64316>MOUNTED</a></li><li data-v-a2f64316><a href="global-api.html#beforeupdate" data-v-a2f64316>BEFOREUPDATE</a></li><li data-v-a2f64316><a href="global-api.html#updated" data-v-a2f64316>UPDATED</a></li><li data-v-a2f64316><a href="global-api.html#beforeunmount" data-v-a2f64316>BEFOREUNMOUNT</a></li><li data-v-a2f64316><a href="global-api.html#unmounted" data-v-a2f64316>UNMOUNTED</a></li><li data-v-a2f64316><a href="global-api.html#onload" data-v-a2f64316>ONLOAD</a></li><li data-v-a2f64316><a href="global-api.html#onshow" data-v-a2f64316>ONSHOW</a></li><li data-v-a2f64316><a href="global-api.html#onhide" data-v-a2f64316>ONHIDE</a></li><li data-v-a2f64316><a href="global-api.html#onresize" data-v-a2f64316>ONRESIZE</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Store API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="store-api.html#createstore" data-v-a2f64316>createStore</a></li><li data-v-a2f64316><a href="store-api.html#createstorewiththis" data-v-a2f64316>createStoreWithThis</a></li><li data-v-a2f64316><a href="store-api.html#createstatewiththis" data-v-a2f64316>createStateWithThis</a></li><li data-v-a2f64316><a href="store-api.html#creategetterswiththis" data-v-a2f64316>createGettersWithThis</a></li><li data-v-a2f64316><a href="store-api.html#createmutationswiththis" data-v-a2f64316>createMutationsWithThis</a></li><li data-v-a2f64316><a href="store-api.html#createactionswiththis" data-v-a2f64316>createActionsWithThis</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="响应式-api" data-v-a2f64316>响应式 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>响应式基础 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#set" data-v-a2f64316>set</a></li><li data-v-a2f64316><a href="reactivity-api.html#del" data-v-a2f64316>del</a></li><li data-v-a2f64316><a href="reactivity-api.html#reactive" data-v-a2f64316>reactive</a></li><li data-v-a2f64316><a href="reactivity-api.html#isreactive" data-v-a2f64316>isReactive</a></li><li data-v-a2f64316><a href="reactivity-api.html#markraw" data-v-a2f64316>markRaw</a></li><li data-v-a2f64316><a href="reactivity-api.html#shallowreactive" data-v-a2f64316>shallowReactive</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Refs</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#ref" data-v-a2f64316>ref</a></li><li data-v-a2f64316><a href="reactivity-api.html#unref" data-v-a2f64316>unref</a></li><li data-v-a2f64316><a href="reactivity-api.html#toref" data-v-a2f64316>toRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#torefs" data-v-a2f64316>toRefs</a></li><li data-v-a2f64316><a href="reactivity-api.html#isref" data-v-a2f64316>isRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#customref" data-v-a2f64316>customRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#shallowref" data-v-a2f64316>shallowRef</a></li><li data-v-a2f64316><a href="reactivity-api.html#triggerref" data-v-a2f64316>triggerRef</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Computed 与 Watch</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#computed" data-v-a2f64316>computed</a></li><li data-v-a2f64316><a href="reactivity-api.html#watcheffect" data-v-a2f64316>watchEffect</a></li><li data-v-a2f64316><a href="reactivity-api.html#watchsynceffect" data-v-a2f64316>watchSyncEffect</a></li><li data-v-a2f64316><a href="reactivity-api.html#watchposteffect" data-v-a2f64316>watchPostEffect</a></li><li data-v-a2f64316><a href="reactivity-api.html#watch" data-v-a2f64316>watch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Effect 作用域 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="reactivity-api.html#effectscope" data-v-a2f64316>effectScope</a></li><li data-v-a2f64316><a href="reactivity-api.html#getcurrentscope" data-v-a2f64316>getCurrentScope</a></li><li data-v-a2f64316><a href="reactivity-api.html#onscopedispose" data-v-a2f64316>onScopeDispose</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="组合式-api" data-v-a2f64316>组合式 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>生命周期钩子</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="composition-api.html#onbeforemount" data-v-a2f64316>onBeforeMount</a></li><li data-v-a2f64316><a href="composition-api.html#onmounted" data-v-a2f64316>onMounted</a></li><li data-v-a2f64316><a href="composition-api.html#onbeforeupdate" data-v-a2f64316>onBeforeUpdate</a></li><li data-v-a2f64316><a href="composition-api.html#onupdated" data-v-a2f64316>onUpdated</a></li><li data-v-a2f64316><a href="composition-api.html#onbeforeunmount" data-v-a2f64316>onBeforeUnmount</a></li><li data-v-a2f64316><a href="composition-api.html#onunmount" data-v-a2f64316>onUnmount</a></li><li data-v-a2f64316><a href="composition-api.html#onload" data-v-a2f64316>onLoad</a></li><li data-v-a2f64316><a href="composition-api.html#onshow" data-v-a2f64316>onShow</a></li><li data-v-a2f64316><a href="composition-api.html#onhide" data-v-a2f64316>onHide</a></li><li data-v-a2f64316><a href="composition-api.html#onresize" data-v-a2f64316>onResize</a></li><li data-v-a2f64316><a href="composition-api.html#onpulldownrefresh" data-v-a2f64316>onPullDownRefresh</a></li><li data-v-a2f64316><a href="composition-api.html#onreachbottom" data-v-a2f64316>onReachBottom</a></li><li data-v-a2f64316><a href="composition-api.html#onshareappmessage" data-v-a2f64316>onShareAppMessage</a></li><li data-v-a2f64316><a href="composition-api.html#onsharetimeline" data-v-a2f64316>onShareTimeline</a></li><li data-v-a2f64316><a href="composition-api.html#onaddtofavorites" data-v-a2f64316>onAddToFavorites</a></li><li data-v-a2f64316><a href="composition-api.html#onpagescroll" data-v-a2f64316>onPageScroll</a></li><li data-v-a2f64316><a href="composition-api.html#ontabitemtap" data-v-a2f64316>onTabItemTap</a></li><li data-v-a2f64316><a href="composition-api.html#onsaveexitstate" data-v-a2f64316>onSaveExitState</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>其他</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="composition-api.html#setup" data-v-a2f64316>setup</a></li><li data-v-a2f64316><a href="composition-api.html#getcurrentinstance" data-v-a2f64316>getCurrentInstance</a></li><li data-v-a2f64316><a href="composition-api.html#usei18n" data-v-a2f64316>useI18n</a></li><li data-v-a2f64316><a href="composition-api.html#usefetch" data-v-a2f64316>useFetch</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="选项式-api" data-v-a2f64316>选项式 API</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>实例 API</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="instance-api.html#set" data-v-a2f64316>$set</a></li><li data-v-a2f64316><a href="instance-api.html#watch" data-v-a2f64316>$watch</a></li><li data-v-a2f64316><a href="instance-api.html#delete" data-v-a2f64316>$delete</a></li><li data-v-a2f64316><a href="instance-api.html#refs" data-v-a2f64316>$refs</a></li><li data-v-a2f64316><a href="instance-api.html#asyncrefs" data-v-a2f64316>$asyncRefs</a></li><li data-v-a2f64316><a href="instance-api.html#forceupdate" data-v-a2f64316>$forceUpdate</a></li><li data-v-a2f64316><a href="instance-api.html#nexttick" data-v-a2f64316>$nextTick</a></li><li data-v-a2f64316><a href="instance-api.html#i18n" data-v-a2f64316>$i18n</a></li><li data-v-a2f64316><a href="instance-api.html#rawoptions" data-v-a2f64316>$rawOptions</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="内置相关" data-v-a2f64316>内置相关</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>模版指令 (1)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="directives.html#wx-if" data-v-a2f64316>wx:if</a></li><li data-v-a2f64316><a href="directives.html#wx-elif" data-v-a2f64316>wx:elif</a></li><li data-v-a2f64316><a href="directives.html#wx-else" data-v-a2f64316>wx:else</a></li><li data-v-a2f64316><a href="directives.html#wx-for" data-v-a2f64316>wx:for</a></li><li data-v-a2f64316><a href="directives.html#wx-for-index" data-v-a2f64316>wx:for-index</a></li><li data-v-a2f64316><a href="directives.html#wx-for-item" data-v-a2f64316>wx:for-item</a></li><li data-v-a2f64316><a href="directives.html#wx-key" data-v-a2f64316>wx:key</a></li><li data-v-a2f64316><a href="directives.html#wx-class" data-v-a2f64316>wx:class</a></li><li data-v-a2f64316><a href="directives.html#wx-style" data-v-a2f64316>wx:style</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>模版指令 (2)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="directives.html#wx-model" data-v-a2f64316>wx:model</a></li><li data-v-a2f64316><a href="directives.html#wx-model-prop" data-v-a2f64316>wx:model-prop</a></li><li data-v-a2f64316><a href="directives.html#wx-model-event" data-v-a2f64316>wx:model-event</a></li><li data-v-a2f64316><a href="directives.html#wx-model-value-path" data-v-a2f64316>wx:model-value-path</a></li><li data-v-a2f64316><a href="directives.html#wx-model-filter" data-v-a2f64316>wx:model-filter</a></li><li data-v-a2f64316><a href="directives.html#wx-ref" data-v-a2f64316>wx:ref</a></li><li data-v-a2f64316><a href="directives.html#wx-show" data-v-a2f64316>wx:show</a></li><li data-v-a2f64316><a href="directives.html#bind" data-v-a2f64316>bind</a></li><li data-v-a2f64316><a href="directives.html#catch" data-v-a2f64316>catch</a></li><li data-v-a2f64316><a href="directives.html#capture-bind" data-v-a2f64316>capture-bind</a></li><li data-v-a2f64316><a href="directives.html#capture-catch" data-v-a2f64316>capture-catch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>内建组件</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="builtIn.html#component" data-v-a2f64316>component</a></li><li data-v-a2f64316><a href="builtIn.html#slot" data-v-a2f64316>slot</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="编译构建" data-v-a2f64316>编译构建</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>webpack 配置</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#output-publicpath" data-v-a2f64316>output.publicPath</a></li><li data-v-a2f64316><a href="compile.html#output-filename" data-v-a2f64316>output.filename</a></li><li data-v-a2f64316><a href="compile.html#node-global" data-v-a2f64316>node.global</a></li><li data-v-a2f64316><a href="compile.html#rule-resourcequery" data-v-a2f64316>rule.resourceQuery</a></li><li data-v-a2f64316><a href="compile.html#resolve-extensions" data-v-a2f64316>resolve.extensions</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>MpxWebpackPlugin options (1)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#mode" data-v-a2f64316>mode</a></li><li data-v-a2f64316><a href="compile.html#srcmode" data-v-a2f64316>srcMode</a></li><li data-v-a2f64316><a href="compile.html#moderules" data-v-a2f64316>modeRules</a></li><li data-v-a2f64316><a href="compile.html#externalclasses" data-v-a2f64316>externalClasses</a></li><li data-v-a2f64316><a href="compile.html#resolvemode" data-v-a2f64316>resolveMode</a></li><li data-v-a2f64316><a href="compile.html#projectroot" data-v-a2f64316>projectRoot</a></li><li data-v-a2f64316><a href="compile.html#writemode" data-v-a2f64316>writeMode</a></li><li data-v-a2f64316><a href="compile.html#autoscoperules" data-v-a2f64316>autoScopeRules</a></li><li data-v-a2f64316><a href="compile.html#catch" data-v-a2f64316>catch</a></li><li data-v-a2f64316><a href="compile.html#forcedisableproxyctor" data-v-a2f64316>forceDisableProxyCtor</a></li><li data-v-a2f64316><a href="compile.html#transmpxrules" data-v-a2f64316>transMpxRules</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>MpxWebpackPlugin options (2)</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#forceproxyeventrules" data-v-a2f64316>forceProxyEventRules</a></li><li data-v-a2f64316><a href="compile.html#autosplit" data-v-a2f64316>autoSplit</a></li><li data-v-a2f64316><a href="compile.html#defs" data-v-a2f64316>defs</a></li><li data-v-a2f64316><a href="compile.html#attributes" data-v-a2f64316>attributes</a></li><li data-v-a2f64316><a href="compile.html#externals" data-v-a2f64316>externals</a></li><li data-v-a2f64316><a href="compile.html#mininpmpackage" data-v-a2f64316>miniNpmPackage</a></li><li data-v-a2f64316><a href="compile.html#forceusepagector" data-v-a2f64316>forceUsePageCtor</a></li><li data-v-a2f64316><a href="compile.html#transrpxrules" data-v-a2f64316>transRpxRules</a></li><li data-v-a2f64316><a href="compile.html#postcssinlineconfig" data-v-a2f64316>postcssInlineConfig</a></li><li data-v-a2f64316><a href="compile.html#decodehtmltext" data-v-a2f64316>decodeHTMLText</a></li><li data-v-a2f64316><a href="compile.html#nativeconfig" data-v-a2f64316>nativeConfig</a></li><li data-v-a2f64316><a href="compile.html#webconfig" data-v-a2f64316>webConfig</a></li><li data-v-a2f64316><a href="compile.html#i18n" data-v-a2f64316>i18n</a></li><li data-v-a2f64316><a href="compile.html#auditresource" data-v-a2f64316>auditResource</a></li><li data-v-a2f64316><a href="compile.html#subpackagemodulesrules" data-v-a2f64316>subpackageModulesRules</a></li><li data-v-a2f64316><a href="compile.html#generatebuildmap" data-v-a2f64316>generateBuildMap</a></li><li data-v-a2f64316><a href="compile.html#autovirtualhostrules" data-v-a2f64316>autoVirtualHostRules</a></li><li data-v-a2f64316><a href="compile.html#partialcompilerules" data-v-a2f64316>partialCompileRules</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>MpxWebpackPlugin static methods</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-loader" data-v-a2f64316>MpxWebpackPlugin.loader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-pluginloader" data-v-a2f64316>MpxWebpackPlugin.pluginLoader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-wxspreloader" data-v-a2f64316>MpxWebpackPlugin.wxsPreLoader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-fileloader" data-v-a2f64316>MpxWebpackPlugin.fileLoader</a></li><li data-v-a2f64316><a href="compile.html#mpxwebpackplugin-urlloader" data-v-a2f64316>MpxWebpackPlugin.urlLoader</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>Request query</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="compile.html#resolve" data-v-a2f64316>?resolve</a></li><li data-v-a2f64316><a href="compile.html#root" data-v-a2f64316>?root</a></li><li data-v-a2f64316><a href="compile.html#fallback" data-v-a2f64316>?fallback</a></li><li data-v-a2f64316><a href="compile.html#uselocal" data-v-a2f64316>?useLocal</a></li><li data-v-a2f64316><a href="compile.html#isstyle" data-v-a2f64316>?isStyle</a></li><li data-v-a2f64316><a href="compile.html#ispage" data-v-a2f64316>?isPage</a></li><li data-v-a2f64316><a href="compile.html#iscomponent" data-v-a2f64316>?isComponent</a></li><li data-v-a2f64316><a href="compile.html#async" data-v-a2f64316>?async</a></li></ul></div></div></div><div class="api-section" data-v-a2f64316><h2 id="周边拓展" data-v-a2f64316>周边拓展</h2> <div class="api-groups" data-v-a2f64316><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>@mpxjs/fetch</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="extend.html#fetch" data-v-a2f64316>fetch</a></li><li data-v-a2f64316><a href="extend.html#canceltoken" data-v-a2f64316>CancelToken</a></li><li data-v-a2f64316><a href="extend.html#xfetch" data-v-a2f64316>XFetch</a></li><li data-v-a2f64316><a href="extend.html#interceptors" data-v-a2f64316>interceptors</a></li><li data-v-a2f64316><a href="extend.html#proxy" data-v-a2f64316>proxy 代理</a></li><li data-v-a2f64316><a href="extend.html#usefetch" data-v-a2f64316>useFetch</a></li></ul></div><div class="api-group" data-v-a2f64316><h3 data-v-a2f64316>其他</h3> <ul data-v-a2f64316><li data-v-a2f64316><a href="extend.html#api-proxy" data-v-a2f64316>api-proxy</a></li><li data-v-a2f64316><a href="extend.html#webview-bridge" data-v-a2f64316>webview-bridge</a></li><li data-v-a2f64316><a href="extend.html#size-report" data-v-a2f64316>size-report</a></li><li data-v-a2f64316><a href="extend.html#i18n" data-v-a2f64316>i18n</a></li></ul></div></div></div> <!----></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/23.365f9a87.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/instance-api.html b/docs-vuepress/.vuepress/dist/api/instance-api.html
deleted file mode 100644
index a6c757cb2c..0000000000
--- a/docs-vuepress/.vuepress/dist/api/instance-api.html
+++ /dev/null
@@ -1,265 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>实例 API | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/43.e2b432ea.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" aria-current="page" class="active sidebar-link">实例 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/instance-api.html#set" class="sidebar-link">$set</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#watch" class="sidebar-link">$watch</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#delete" class="sidebar-link">$delete</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#refs" class="sidebar-link">$refs</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#asyncrefs" class="sidebar-link">$asyncRefs</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#forceupdate" class="sidebar-link">$forceUpdate</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#nexttick" class="sidebar-link">$nextTick</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#i18n" class="sidebar-link">$i18n</a></li><li class="sidebar-sub-header"><a href="/api/instance-api.html#rawoptions" class="sidebar-link">$rawOptions</a></li></ul></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="实例-api"><a href="#实例-api" class="header-anchor">#</a> 实例 API</h1> <h2 id="set"><a href="#set" class="header-anchor">#</a> $set</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">$set</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Object <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token punctuation">,</span> property<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><p>这是全局 <code>mpx.set</code> 的别名。向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
-它必须用于向响应式对象上添加新 property，因为 Mpx 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')</p> <ul><li><strong>参考</strong>：<a href="/api/global-api.html#set">mpx.set</a></li></ul> <h2 id="watch"><a href="#watch" class="header-anchor">#</a> $watch</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">$watch</span><span class="token punctuation">(</span>expOrFn<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">Function</span><span class="token punctuation">,</span> callback<span class="token operator">:</span> <span class="token builtin">Function</span> <span class="token operator">|</span> Object<span class="token punctuation">,</span> options<span class="token operator">?</span><span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Function</span>
-</code></pre></div><p>观察 Mpx 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 键路径</span>
-<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'a.b.c'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">newVal<span class="token punctuation">,</span> oldVal</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 做点什么</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 函数</span>
-<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span>
-  <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 表达式 `this.a + this.b` 每次得出一个不同的结果时</span>
-    <span class="token comment">// 处理函数都会被调用。</span>
-    <span class="token comment">// 这就像监听一个未被定义的计算属性</span>
-    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>b
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">newVal<span class="token punctuation">,</span> oldVal</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 做点什么</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">)</span>
-</code></pre></div><p><code>this.$watch</code> 返回一个取消观察函数，用来停止触发回调：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> unwatch <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> cb<span class="token punctuation">)</span>
-<span class="token comment">// 之后取消观察</span>
-<span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-</code></pre></div><ul><li><code>options.deep</code></li></ul> <p>为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'someObject'</span><span class="token punctuation">,</span> callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token keyword">this</span><span class="token punctuation">.</span>someObject<span class="token punctuation">.</span>nestedValue <span class="token operator">=</span> <span class="token number">123</span>
-<span class="token comment">// callback is fired</span>
-</code></pre></div><ul><li><code>options.deep</code></li></ul> <p>在选项参数中指定 <code>immediate: true</code> 将立即以表达式的当前值触发回调：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token comment">// 立即以 `a` 的当前值触发回调</span>
-</code></pre></div><p>注意在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 这会导致报错</span>
-<span class="token keyword">var</span> unwatch <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span>
-  <span class="token string">'value'</span><span class="token punctuation">,</span>
-  <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token punctuation">{</span> <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
-<span class="token punctuation">)</span>
-</code></pre></div><p>如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> unwatch <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span>
-  <span class="token string">'value'</span><span class="token punctuation">,</span>
-  <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>unwatch<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token punctuation">{</span> <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
-<span class="token punctuation">)</span>
-</code></pre></div><ul><li><code>options.pausable</code></li></ul> <p>可在选项参数中指定 pausable: true 来声明一个可被暂停的 Watcher 实例，配置好之后可以通过 this.$getPausableWatchers() 来获取当前组件或者页面下定义的所有可被暂停的 Watcher 实例，
-然后根据具体是业务场景通过 watcher.pause() 或者 watcher.resume() 来暂停或者恢复 watch 的监听。
-比如说在小程序页面 hide 时不需要监听的 watch 可以配置为 pausable: true，在页面 hide 时调用 watcher.pause() 暂停监听，在页面 show 时调用 watcher.resume() 来恢复监听。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'someObject'</span><span class="token punctuation">,</span> callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">pausable</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">const</span> isHide <span class="token operator">=</span> <span class="token boolean">false</span>
-<span class="token keyword">const</span> watchers <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$getPausableWatchers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-<span class="token keyword">if</span> <span class="token punctuation">(</span>watchers <span class="token operator">&amp;&amp;</span> watchers<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> watchers<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> watcher <span class="token operator">=</span> watchers<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
-    isHide <span class="token operator">&amp;&amp;</span> watcher<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token operator">!</span>isHide <span class="token operator">&amp;&amp;</span> watcher<span class="token punctuation">.</span><span class="token function">resume</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><ul><li><code>options.name</code></li></ul> <p>为了方便获取用户定义的 Watcher 实例，可在选项参数增加配置 name 来设置当前 Watcher 实例的名称，配置 name 后可通过 this.$getWatcherByName(name) 在组件或页面中获取到命名为 name 的 Watcher 实例（注意当存在多个 name 相同 watch 时，this.$getWatcherByName 获取的最后一个使用该 name
-创建的 Watcher 实例，所以为了避免混淆，请不要在多个 watch 中配置同一个 name。）</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'someObject'</span><span class="token punctuation">,</span> callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'someObject'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">const</span> someObjectWatch <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$getWatcherByName</span><span class="token punctuation">(</span><span class="token string">'someObject'</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>参考</strong>：<a href="/api/global-api.html#watch">mpx.watch</a></p> <h2 id="delete"><a href="#delete" class="header-anchor">#</a> $delete</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> $<span class="token keyword">delete</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Object<span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><p>删除对象属性，如果该对象是响应式的，那么该方法可以触发观察器更新（视图更新 | watch回调）</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">info</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'a'</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token string">'info'</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 当删除属性之后会执行</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">attached</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 删除name属性</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>$<span class="token keyword">delete</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>参考：</strong> <a href="/api/global-api.html#delete">Mpx.delete</a></p> <h2 id="refs"><a href="#refs" class="header-anchor">#</a> $refs</h2> <p><code>Object</code></p> <p>一个对象，持有注册过 <a href="/api/directives.html#wx-ref">ref</a>的所有 DOM 元素和组件实例，调用响应的组件方法或者获取视图节点信息。</p> <p>以获取组件为例，模版中引用child子组件</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>child</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>childDom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>child</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>javascript 中可以调用组件的方法</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-<span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-  <span class="token comment">// 调用child中的方法</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>childDom<span class="token punctuation">.</span><span class="token function">childMethods</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token comment">// 获取child中的data</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>childDom<span class="token punctuation">.</span>data
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>参考：</strong> <a href="/guide/basic/refs.html">组件 ref</a></p> <h2 id="asyncrefs"><a href="#asyncrefs" class="header-anchor">#</a> $asyncRefs</h2> <p><strong>仅字节小程序可用</strong>，因为字节小程序 <code>selectComponent</code> 和 <code>selectAllComponents</code> 方法为异步方法，因此使用 $refs 同步获取组件实例并不保证能够拿到正确的组件实例，需使用异步 <code>$asyncRefs</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">ready</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>__mpx_mode__ <span class="token operator">===</span> <span class="token string">'tt'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>$asyncRefs<span class="token punctuation">.</span>mlist<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token keyword">const</span> data <span class="token operator">=</span> res<span class="token punctuation">.</span>data
-        <span class="token comment">//......</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="forceupdate"><a href="#forceupdate" class="header-anchor">#</a> $forceUpdate</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">$forceUpdate</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Object<span class="token punctuation">,</span> callback<span class="token operator">:</span> <span class="token builtin">Function</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><p>用于强制刷新视图，正常情况下只有<code>发生了变化的数据</code>才会被发送到视图层进行渲染。强制更新时，会将某些数据强制发送到视图层渲染，无论是否发生了变化</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">info</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'a'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">100</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">attached</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 虽然不会修改age的值，但仍会触发重新渲染，并且会将age发送到视图层</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$forceUpdate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">100</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'视图更新后执行'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-    <span class="token comment">// 也可用于正常的数据修改，key支持Path，数组可以使用'array[index]'：value的形式</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$forceUpdate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token string-property property">'info.name'</span><span class="token operator">:</span> <span class="token string">'b'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'视图更新后执行'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="nexttick"><a href="#nexttick" class="header-anchor">#</a> $nextTick</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">$nextTick</span><span class="token punctuation">(</span>callback<span class="token operator">:</span> <span class="token builtin">Function</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><p>将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。<strong>注意：<code>callback</code>中<code>this</code>并不是绑定当前实例，你可以使用箭头函数避免this指向问题</strong>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">info</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token number">1</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">attached</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 修改数据</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token number">2</span>
-    <span class="token comment">// DOM 还没有更新</span>
-
-    <span class="token comment">// this.$nextTick(function() {</span>
-    <span class="token comment">//   // DOM 现在更新了</span>
-    <span class="token comment">//   console.log('会在由name变化引起的视图更新之后执行')</span>
-    <span class="token comment">//   this.doSomthing() // 报错</span>
-    <span class="token comment">// })</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token comment">// DOM 现在更新了</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'会在由name变化引起的视图更新之后执行'</span><span class="token punctuation">)</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doSomthing</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="i18n"><a href="#i18n" class="header-anchor">#</a> $i18n</h2> <p>组件中直接调用$i18n的方法，比如：$t，$tc，$te，$d，$n</p> <p>首先在<code>mpx.plugin.conf.js</code>中配置i18n</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-
-  <span class="token comment">//...</span>
-
-  <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span><span class="token punctuation">,</span>
-    <span class="token comment">// messages既可以通过对象字面量传入，也可以通过messagesPath指定一个js模块路径，在该模块中定义配置并导出，dateTimeFormats/dateTimeFormatsPath和numberFormats/numberFormatsPath同理</span>
-    <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} world'</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token string-property property">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} 世界'</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>组件中直接使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
-  <span class="token operator">&lt;</span>view<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'message.hello'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
-
-<span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'message.hello'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'hello'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$te</span><span class="token punctuation">(</span><span class="token string">'message.hello'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> 
-    <span class="token comment">//...</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="rawoptions"><a href="#rawoptions" class="header-anchor">#</a> $rawOptions</h2> <p><code>Object</code></p> <p>获取组件或页面构造器的构造参数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/core&quot;</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">ready</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$rawOptions<span class="token punctuation">)</span>
-    <span class="token comment">/**
-     * attached
-     * detached
-     * methods
-     * mpxConvertMode
-     * mpxCustomKeysForBlend
-     * mpxFileResource
-     * ready
-     * setup
-     * ...其他构造参数
-     */</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/api/global-api.html" class="prev">
-        全局 API
-      </a></span> <span class="next"><a href="/api/store-api.html">
-        Store API
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/43.e2b432ea.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/optional-api.html b/docs-vuepress/.vuepress/dist/api/optional-api.html
deleted file mode 100644
index 08662a27ca..0000000000
--- a/docs-vuepress/.vuepress/dist/api/optional-api.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>选项式 API | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/44.e4242a1f.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" aria-current="page" class="active sidebar-link">选项式 API</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="选项式-api"><a href="#选项式-api" class="header-anchor">#</a> 选项式 API</h1> <h3 id="onappinit"><a href="#onappinit" class="header-anchor">#</a> onAppInit</h3> <ul><li><strong>类型：</strong> <code>Function</code></li> <li><strong>详细：</strong></li></ul> <p>通过 createApp 注册一个应用期间被调用，输出 web 时 SSR渲染模式下，需要在此钩子中生成 pinia 的实例并返回。</p> <h3 id="onssrappcreated"><a href="#onssrappcreated" class="header-anchor">#</a> onSSRAppCreated</h3> <ul><li><strong>类型：</strong> <code>Function</code></li> <li><strong>详细：</strong></li></ul> <p>SSR渲染定制钩子，在服务端渲染期间被调用，可以在这个钩子中可以去返回应用程序实例，以及完成服务器端路由匹配，store 的状态挂载等。类 Vue 的 server entry 中的功能。</p> <p><strong>注意：</strong> 仅 web 环境支持</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/api/composition-api.html" class="prev">
-        组合式 API
-      </a></span> <span class="next"><a href="/api/extend.html">
-        周边拓展
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/44.e4242a1f.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/reactivity-api.html b/docs-vuepress/.vuepress/dist/api/reactivity-api.html
deleted file mode 100644
index 59d7bdaac4..0000000000
--- a/docs-vuepress/.vuepress/dist/api/reactivity-api.html
+++ /dev/null
@@ -1,544 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>响应式 API | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/45.392413aa.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" class="sidebar-link">Store API</a></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" aria-current="page" class="active sidebar-link">响应式 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#响应式基础-api" class="sidebar-link">响应式基础 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#reactive" class="sidebar-link">reactive</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#isreactive" class="sidebar-link">isReactive</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#markraw" class="sidebar-link">markRaw</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#shallowreactive" class="sidebar-link">shallowReactive</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#set" class="sidebar-link">set</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#del" class="sidebar-link">del</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#computed-与-watch" class="sidebar-link">Computed 与 Watch</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#computed" class="sidebar-link">computed</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#watcheffect" class="sidebar-link">watchEffect</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#watchsynceffect" class="sidebar-link">watchSyncEffect</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#watchposteffect" class="sidebar-link">watchPostEffect</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#watch" class="sidebar-link">watch</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#effect-作用域-api" class="sidebar-link">Effect 作用域 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#effectscope" class="sidebar-link">effectScope</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#getcurrentscope" class="sidebar-link">getCurrentScope</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#onscopedispose" class="sidebar-link">onScopeDispose</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#refs" class="sidebar-link">Refs</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#ref" class="sidebar-link">ref</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#unref" class="sidebar-link">unref</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#toref" class="sidebar-link">toRef</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#torefs" class="sidebar-link">toRefs</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#isref" class="sidebar-link">isRef</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#customref" class="sidebar-link">customRef</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#shallowref" class="sidebar-link">shallowRef</a></li><li class="sidebar-sub-header"><a href="/api/reactivity-api.html#triggerref" class="sidebar-link">triggerRef</a></li></ul></li></ul></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="响应式-api"><a href="#响应式-api" class="header-anchor">#</a> 响应式 API</h1> <h2 id="响应式基础-api"><a href="#响应式基础-api" class="header-anchor">#</a> 响应式基础 API</h2> <h3 id="reactive"><a href="#reactive" class="header-anchor">#</a> reactive</h3> <p>将对象处理为响应性对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-obj<span class="token punctuation">.</span>count<span class="token operator">++</span>
-</code></pre></div><p>响应式转换是“深层”的：它会影响到所有嵌套的 property。一个响应式对象也将深层地解包任何 ref property，同时保持响应性。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> count <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// ref 会被解包</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>count <span class="token operator">===</span> count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// true</span>
-
-<span class="token comment">// 它会更新 `obj.count`</span>
-count<span class="token punctuation">.</span>value<span class="token operator">++</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 2</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token comment">// 2</span>
-</code></pre></div><p>当将 <code>ref</code> 分配给 <code>reactive</code> property 时，ref 将被自动解包。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-obj<span class="token punctuation">.</span>count <span class="token operator">=</span> count
-
-<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token comment">// 1</span>
-<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>count <span class="token operator">===</span> count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// true</span>
-</code></pre></div><p>当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> refArr <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-    refArr
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 无需.vlaue</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>refArr<span class="token punctuation">)</span>
-<span class="token comment">// 这里需要.value</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>refArr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-</code></pre></div><p>当需要给响应式对象新增属性时，需要使用set，并且新增属性的响应式对象需要为 ref 或者做为其他响应性对象的key</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> stateRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> stateRefWrap <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
-    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// 不生效</span>
-        <span class="token function">set</span><span class="token punctuation">(</span>stateRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// 生效</span>
-        <span class="token function">set</span><span class="token punctuation">(</span>stateRefWrap<span class="token punctuation">.</span>data<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// 生效</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">return</span> <span class="token punctuation">{</span>
-    state<span class="token punctuation">,</span>
-    stateRef<span class="token punctuation">,</span>
-    stateRefWrap
-<span class="token punctuation">}</span>
-</code></pre></div><h3 id="isreactive"><a href="#isreactive" class="header-anchor">#</a> isReactive</h3> <p>检查对象是否是由 reactive 创建的响应式对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> isReactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-        <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-            <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
-        <span class="token punctuation">}</span><span class="token punctuation">)</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isReactive</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// -&gt; true</span>
-        <span class="token keyword">return</span> <span class="token punctuation">{</span>
-            state
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="markraw"><a href="#markraw" class="header-anchor">#</a> markRaw</h3> <p>标记一个对象，使其永远不会被抓换为响应性对象，并返回对象本身</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> markRaw<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> isReactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">markRaw</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    foo
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isReactive</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>foo<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// -&gt; false</span>
-</code></pre></div><p><strong>注意：</strong></p> <p>如果将标记对象内部的未标记对象添加进响应性对象，然后再次访问该响应性对象，就会得到该原始对象的可响应性对象</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> markRaw<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> isReactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">markRaw</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">nested</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">const</span> bar <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">nested</span><span class="token operator">:</span> foo<span class="token punctuation">.</span>nested
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span>nested <span class="token operator">===</span> bar<span class="token punctuation">.</span>nested<span class="token punctuation">)</span> <span class="token comment">// -&gt; true</span>
-</code></pre></div><h3 id="shallowreactive"><a href="#shallowreactive" class="header-anchor">#</a> shallowReactive</h3> <p>reactive() 的浅层作用形式，只跟踪自身 property 的响应性，但不执行嵌套对象的深层响应式转换(返回原始值)</p> <p><strong>注意：</strong></p> <p>和 reactive() 不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的 property 是响应式的。property 的值会被原样存储和暴露，这也意味着值为 ref 的 property 不会被自动解包了。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> shallowReactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">shallowReactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">nested</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">bar</span><span class="token operator">:</span> <span class="token number">2</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">head</span><span class="token operator">:</span> count  
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 更改状态自身的属性是响应式的</span>
-state<span class="token punctuation">.</span>foo<span class="token operator">++</span>
-
-<span class="token comment">// ...但下层嵌套对象不会被转为响应式</span>
-<span class="token function">isReactive</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>nested<span class="token punctuation">)</span> <span class="token comment">// false</span>
-
-<span class="token comment">// 不是响应式的</span>
-state<span class="token punctuation">.</span>nested<span class="token punctuation">.</span>bar<span class="token operator">++</span>
-
-<span class="token comment">// ref 属性不会解包</span>
-state<span class="token punctuation">.</span>head<span class="token punctuation">.</span>value 
-</code></pre></div><h3 id="set"><a href="#set" class="header-anchor">#</a> set</h3> <p>用于对一个响应式对象新增属性，会<code>触发订阅者更新操作</code></p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">set</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Object <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token punctuation">,</span> property<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> set<span class="token punctuation">,</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token comment">// 具名导出使用</span>
-<span class="token function">set</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">)</span> <span class="token comment">// age 改变后会触发订阅者视图更新</span>
-</code></pre></div><h3 id="del"><a href="#del" class="header-anchor">#</a> del</h3> <p>用于对一个响应式对象删除属性，会<code>触发订阅者更新操作</code></p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">del</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Object <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token punctuation">,</span> property<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>del<span class="token punctuation">,</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token function">del</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="computed-与-watch"><a href="#computed-与-watch" class="header-anchor">#</a> Computed 与 Watch</h2> <h3 id="computed"><a href="#computed" class="header-anchor">#</a> computed</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 只读形式</span>
-<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">computed</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>
-    <span class="token function-variable function">getter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">T</span>
-<span class="token punctuation">)</span><span class="token operator">:</span> Readonly<span class="token operator">&lt;</span>Ref<span class="token operator">&lt;</span>Readonly<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;&gt;&gt;</span>
-
-<span class="token comment">// 可写形式</span>
-<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">computed</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>
-    options<span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">T</span>
-        <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
-    <span class="token punctuation">}</span>
-<span class="token punctuation">)</span><span class="token operator">:</span> Ref<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
-</code></pre></div><p>接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> plusOne <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
-
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>plusOne<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 2</span>
-
-plusOne<span class="token punctuation">.</span>value<span class="token operator">++</span> <span class="token comment">// 错误</span>
-</code></pre></div><p>或者接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> plusOne <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
-  <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token parameter">val</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    count<span class="token punctuation">.</span>value <span class="token operator">=</span> val <span class="token operator">-</span> <span class="token number">1</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-plusOne<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token number">1</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 0</span>
-</code></pre></div><h3 id="watcheffect"><a href="#watcheffect" class="header-anchor">#</a> watchEffect</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">watchEffect</span><span class="token punctuation">(</span>
-  <span class="token function-variable function">effect</span><span class="token operator">:</span> <span class="token punctuation">(</span>onInvalidate<span class="token operator">:</span> InvalidateCbRegistrator<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
-  options<span class="token operator">?</span><span class="token operator">:</span> WatchEffectOptions
-<span class="token punctuation">)</span><span class="token operator">:</span> StopHandle
-
-<span class="token keyword">interface</span> <span class="token class-name">WatchEffectOptions</span> <span class="token punctuation">{</span>
-    flush<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'pre'</span> <span class="token operator">|</span> <span class="token string">'post'</span> <span class="token operator">|</span> <span class="token string">'sync'</span> <span class="token comment">// 默认：'pre'</span>
-<span class="token punctuation">}</span>
-
-<span class="token keyword">type</span> <span class="token class-name">InvalidateCbRegistrator</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function-variable function">invalidate</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
-
-<span class="token keyword">type</span> <span class="token class-name">StopHandle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
-</code></pre></div><p>立即执行传入的函数，同时对其依赖进行响应式追踪，并在其依赖变更时重新运行该函数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-
-<span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
-<span class="token comment">// -&gt; logs 0</span>
-
-<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  count<span class="token punctuation">.</span>value<span class="token operator">++</span>
-  <span class="token comment">// -&gt; logs 1</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
-</code></pre></div><ul><li>停止侦听</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> stop <span class="token operator">=</span> <span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token comment">/* ... */</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// later</span>
-<span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-</code></pre></div><ul><li>清除副作用</li></ul> <p>侦听副作用传入的函数可以接收一个函数作入参，用来注册清理回调，清理回调会在该副作用下一次执行前被调用，
-可以用来清理无效的副作用，例如等待中的异步请求</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">onCleanup</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> <span class="token punctuation">{</span> response<span class="token punctuation">,</span> cancel <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">doAsyncWork</span><span class="token punctuation">(</span>id<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-  <span class="token comment">// `cancel` 会在 `id` 更改时调用</span>
-  <span class="token comment">// 以便取消之前未完成的请求</span>
-  <span class="token function">onCleanup</span><span class="token punctuation">(</span>cancel<span class="token punctuation">)</span>
-  data<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> response
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><ul><li>副作用刷新时机</li></ul> <p>响应式系统会进行副作用函数缓存，并异步地刷新执行他们</p> <p>组件的 update 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时，默认情况下，会在所有的组件 update 前执行，
-在watchEffect的第二个参数中，我们可以传入flush来进行副作用刷新时机调整</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 默认为 pre</span>
-<span class="token function">watchEffect</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">flush</span><span class="token operator">:</span> <span class="token string">'pre'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 侦听器回调中能访问被更新之后的DOM</span>
-<span class="token comment">// 注意：这也将推迟副作用的初始运行，直到组件的首次渲染完成。</span>
-<span class="token function">watchEffect</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">flush</span><span class="token operator">:</span> <span class="token string">'post'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 强制同步触发, 十分低效</span>
-<span class="token function">watchEffect</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">flush</span><span class="token operator">:</span> <span class="token string">'sync'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="watchsynceffect"><a href="#watchsynceffect" class="header-anchor">#</a> watchSyncEffect</h3> <p>watchEffect 的别名，带有 flush: 'sync' 选项。</p> <h3 id="watchposteffect"><a href="#watchposteffect" class="header-anchor">#</a> watchPostEffect</h3> <p>watchEffect 的别名，带有 flush: 'post' 选项。</p> <h3 id="watch"><a href="#watch" class="header-anchor">#</a> watch</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 侦听单一源</span>
-<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">watch</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>
-    source<span class="token operator">:</span> WatcherSource<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
-    <span class="token function-variable function">callback</span><span class="token operator">:</span> <span class="token punctuation">(</span>
-        value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span>
-        oldValue<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span>
-        onInvalidate<span class="token operator">:</span> InvalidateCbRegistrator
-    <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
-    options<span class="token operator">?</span><span class="token operator">:</span> WatchOptions
-<span class="token punctuation">)</span><span class="token operator">:</span> StopHandle
-
-<span class="token comment">// 侦听多个源</span>
-
-<span class="token keyword">type</span> <span class="token class-name">WatcherSource<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> Ref<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">T</span><span class="token punctuation">)</span>
-
-<span class="token keyword">type</span> <span class="token class-name">InvalidateCbRegistrator</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function-variable function">invalidate</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
-
-<span class="token keyword">type</span> <span class="token class-name">StopHandle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
-
-<span class="token keyword">interface</span> <span class="token class-name">WatchOptions</span> <span class="token keyword">extends</span> <span class="token class-name">WatchEffectOptions</span> <span class="token punctuation">{</span>
-    immediate<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token comment">// 默认：false</span>
-    deep<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token comment">// 默认：false</span>
-    immediateAsync<span class="token operator">:</span> <span class="token builtin">boolean</span> <span class="token comment">// 默认：false</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>该 API 与选项式 API 中的 watch 基本等效，watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下
-是惰性的——即回调仅在侦听源发生变化时被调用。</p> <p>与 watchEffect 比较，watch 允许我们：</p> <ul><li>懒执行副作用；</li> <li>更具体地说明什么状态应该触发侦听器重新运行；</li> <li>访问侦听状态变化前后的值。</li></ul> <h4 id="侦听单一源"><a href="#侦听单一源" class="header-anchor">#</a> 侦听单一源</h4> <p>watch 可以侦听一个具有返回值的 getter，也可以直接是一个 ref</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 侦听一个 getter</span>
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token function">watch</span><span class="token punctuation">(</span>
-  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>count<span class="token punctuation">,</span>
-  <span class="token punctuation">(</span><span class="token parameter">count<span class="token punctuation">,</span> prevCount</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token comment">/* ... */</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">)</span>
-
-<span class="token comment">// 直接侦听ref</span>
-<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-<span class="token function">watch</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">count<span class="token punctuation">,</span> prevCount</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token comment">/* ... */</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="侦听多个源"><a href="#侦听多个源" class="header-anchor">#</a> 侦听多个源</h4> <p>还可以使用数组的形式同时侦听多个数据源：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> watch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">[</span>aRef<span class="token punctuation">,</span> bRef<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>prevA<span class="token punctuation">,</span> prevB<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token comment">/* ... */</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="与-watcheffect-相同的行为"><a href="#与-watcheffect-相同的行为" class="header-anchor">#</a> 与 watchEffect 相同的行为</h4> <p><strong>watch</strong> 与 <strong>watchEffect</strong> 在手动停止侦听、清除副作用、副作用刷新时机方面有相同的行为。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> watch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">let</span> unwatch <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">return</span> a<span class="token punctuation">.</span>value <span class="token operator">+</span> b<span class="token punctuation">.</span>value
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">newVal<span class="token punctuation">,</span> oldVal</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 做点什么</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 调用返回值unwatch可以取消观察</span>
-<span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="watch-选项"><a href="#watch-选项" class="header-anchor">#</a> watch 选项</h4> <ul><li><p><strong>选项</strong>：deep</p> <p>为了发现对象内部值的变化，可以在选项参数中指定 deep: true。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>watch<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>someObject
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 回调函数</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token keyword">this</span><span class="token punctuation">.</span>someObject<span class="token punctuation">.</span>nestedValue <span class="token operator">=</span> <span class="token number">123</span>
-<span class="token comment">// callback is fired</span>
-</code></pre></div></li> <li><p><strong>选项</strong>：once</p> <p>在选项参数中指定 <code>once: true</code> 该回调方法只会执行一次，后续的改变将不会触发回调；<br>
-该参数也可以是函数，若函数返回值为 <code>true</code> 时，则后续的改变将不会触发回调</p> <div class="language-JavaScript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>watch<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 该回调函数只会执行一次</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">once</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 当 once 是函数时</span>
-<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a
- <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> newVal</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 当 val 等于2时，this.a 的后续改变将不会被监听</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token function-variable function">once</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> oldVal</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>val <span class="token operator">==</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token boolean">true</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div></li> <li><p><strong>选项</strong>：immediate</p> <p>在选项参数中指定 <code>immediate: true</code> 将立即以表达式的当前值触发回调。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>watch<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 回调函数</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token comment">// 立即以 `this.a` 的当前值触发回调</span>
-</code></pre></div><p>注意在带有 immediate 选项时，你不能在第一次回调时取消侦听。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>watch<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">var</span> unwatch <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 这会导致报错！</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-</code></pre></div><p>如果你仍然希望在回调内部调用取消侦听的函数，你应该先检查其可用性。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>watch<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">var</span> unwatch <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">if</span> <span class="token punctuation">(</span>unwatch<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 请先检查其可用性！</span>
-    <span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-</code></pre></div></li></ul> <h2 id="effect-作用域-api"><a href="#effect-作用域-api" class="header-anchor">#</a> Effect 作用域 API</h2> <h3 id="effectscope"><a href="#effectscope" class="header-anchor">#</a> effectScope</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">effectScope</span><span class="token punctuation">(</span>detached<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span><span class="token operator">:</span> EffectScope
-
-<span class="token keyword">interface</span> <span class="token class-name">EffectScope</span> <span class="token punctuation">{</span>
-    <span class="token generic-function"><span class="token function">run</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token function-variable function">fn</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">T</span> <span class="token operator">|</span> <span class="token keyword">undefined</span>
-    <span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-    <span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-    <span class="token function">resume</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>创建一个 effect 作用域对象，捕获在其内部创建的响应性副作用(例如计算属性或监听器)，可以对这些副作用进行批量处理</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> effectScope <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> scope <span class="token operator">=</span> <span class="token function">effectScope</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-scope<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> doubled <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> counter<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
-    
-    <span class="token function">watch</span><span class="token punctuation">(</span>doubled<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>doubled<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
-    
-    <span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Count: '</span><span class="token punctuation">,</span> doubled<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-scope<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-</code></pre></div><p>需要注意的是，effectScope 接受一个 detached 参数，默认为false，该参数来表示当前作用域是否和父级作用域进行分离，若 detached 为 true，
-当前 effectScope 则不会被父级作用域收集。</p> <ul><li>暂停侦听</li></ul> <p>Mpx 提供了 pause 方法可以将整个作用域中的响应性副作用批量暂停侦听。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> effectScope<span class="token punctuation">,</span> onHide <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">const</span> scope <span class="token operator">=</span> <span class="token function">effectScope</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-scope<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> doubled <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> counter<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
-
-    <span class="token function">watch</span><span class="token punctuation">(</span>doubled<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>doubled<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
-
-    <span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Count: '</span><span class="token punctuation">,</span> doubled<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">onHide</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    scope<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><ul><li>恢复侦听</li></ul> <p>被暂停的作用域可以使用 resume 方法来恢复侦听。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>onShow<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token comment">// ......</span>
-
-<span class="token function">onShow</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    scope<span class="token punctuation">.</span><span class="token function">resume</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="getcurrentscope"><a href="#getcurrentscope" class="header-anchor">#</a> getCurrentScope</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">getCurrentScope</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> EffectScope <span class="token operator">|</span> <span class="token keyword">undefined</span>
-</code></pre></div><p>返回当前活跃的 effect 作用域。</p> <h3 id="onscopedispose"><a href="#onscopedispose" class="header-anchor">#</a> onScopeDispose</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">onScopeDispose</span><span class="token punctuation">(</span><span class="token function-variable function">fn</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><p>在当前活跃的 effect 作用域上注册一个处理回调。该回调会在相关的 effect 作用域结束之后被调用。</p> <h2 id="refs"><a href="#refs" class="header-anchor">#</a> Refs</h2> <h3 id="ref"><a href="#ref" class="header-anchor">#</a> ref</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">interface</span> <span class="token class-name">Ref<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
-    value<span class="token operator">:</span> <span class="token constant">T</span>
-<span class="token punctuation">}</span>
-<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">ref</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> Ref<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
-</code></pre></div><p>接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的 property .value。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 0</span>
-
-count<span class="token punctuation">.</span>value<span class="token operator">++</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 1</span>
-</code></pre></div><p><strong>注意事项：</strong></p> <p>1.所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。</p> <p>2.如果将一个对象赋值给 ref，那么这个对象将被 reactive 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-    foo
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token comment">// 获取count</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">.</span>count<span class="token punctuation">)</span>
-<span class="token comment">// 获取foo</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">.</span>foo<span class="token punctuation">)</span>
-</code></pre></div><h3 id="unref"><a href="#unref" class="header-anchor">#</a> unref</h3> <p>如果参数是一个 ref，则返回内部值，否则返回参数本身，是 <code>val = isRef(ref) ? ref.value : ref</code> 的语法糖函数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> unref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">unref</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span>
-
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// -&gt; true</span>
-</code></pre></div><h3 id="toref"><a href="#toref" class="header-anchor">#</a> toRef</h3> <p>用于为响应式对象上的property 创建 ref。创建的 ref 与其源 property 保持同步：改变源 property
-将更新 ref，改变 ref 也将更新 property。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">f</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">const</span> stateRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">black</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">white</span><span class="token operator">:</span> <span class="token number">2</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">const</span> fooRef <span class="token operator">=</span> <span class="token function">toRef</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token string">'f'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> blackRef <span class="token operator">=</span> <span class="token function">toRef</span><span class="token punctuation">(</span>stateRef<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token string">'black'</span><span class="token punctuation">)</span> 
-
-<span class="token comment">// 更改ref的值更新属性</span>
-fooRef<span class="token punctuation">.</span>value<span class="token operator">++</span>
-blackRef<span class="token punctuation">.</span>value<span class="token operator">++</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>f<span class="token punctuation">)</span> <span class="token comment">// 2</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>stateRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>black<span class="token punctuation">)</span> <span class="token comment">// 2</span>
-
-<span class="token comment">// 更改property的值更新ref</span>
-state<span class="token punctuation">.</span>f<span class="token operator">++</span>
-stateRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>black<span class="token operator">++</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>fooRef<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 3</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>blackRef<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 3</span>
-</code></pre></div><p><strong>注意：</strong></p> <p>即使源 property 当前不存在，toRef() 也会返回一个可用的 ref，而 toRefs 则不会，这在处理可选properties的时候
-非常有用</p> <h3 id="torefs"><a href="#torefs" class="header-anchor">#</a> toRefs</h3> <p>将一个响应式对象转换为一个普通对象，这个普通对象的每个 property 都是指向源对象相应 property 的 ref。每个单独的 ref 都是 <code>toRef</code> 创建的</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">black</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">white</span><span class="token operator">:</span> <span class="token number">2</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">const</span> stateAsRefs <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span>
-
-state<span class="token punctuation">.</span>black<span class="token operator">++</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>stateAsRefs<span class="token punctuation">.</span>black<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 2</span>
-
-stateAsRefs<span class="token punctuation">.</span>black<span class="token punctuation">.</span>value<span class="token operator">++</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>black<span class="token punctuation">)</span> <span class="token comment">// 3</span>
-</code></pre></div><p>toRefs 在使用组合式函数中的响应式对象时有很大作用，使用它，对响应式对象进行解构将不会失去响应性</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">useFeatX</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">black</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">white</span><span class="token operator">:</span> <span class="token number">2</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    
-    <span class="token comment">// 在返回时都转为 ref</span>
-    <span class="token keyword">return</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">// 解构而不会失去响应性</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span>black<span class="token punctuation">,</span> white<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useFeatX</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>注意：</strong></p> <ul><li>toRefs 在调用时只会为源对象上可以列举出的 property 创建 ref。如果要为可能还不存在的 property
-创建 ref，请改用 <code>toRef</code></li></ul> <h3 id="isref"><a href="#isref" class="header-anchor">#</a> isRef</h3> <p>检查某个值是否为 ref，返回true/false。</p> <h3 id="customref"><a href="#customref" class="header-anchor">#</a> customRef</h3> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">customRef</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>factory<span class="token operator">:</span> CustomRefFactory<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token operator">:</span> Ref<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
-
-<span class="token keyword">type</span> <span class="token class-name">CustomRefFactory<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span>
-    <span class="token function-variable function">track</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
-    <span class="token function-variable function">trigger</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
-<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token constant">T</span><span class="token punctuation">,</span>
-    <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>创建一个自定义 ref，可对其进行依赖项跟踪和更新触发显示控制。需要一个工厂函数，该函数接收 <code>track</code> 和 <code>trigger</code>
-做为参数，并且应该返回一个带有 <code>get</code> 和 <code>set</code> 的对象。</p> <p>同时，<code>track()</code> 应该在 get() 方法中调用，<code>trigger()</code> 应该在 <code>set()</code> 中调用。不过这里具体何时调用、
-是否调用都将由用户自己来控制</p> <p>示例：创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">useDebouncedRef</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> delay <span class="token operator">=</span> <span class="token number">200</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">let</span> timeout
-  <span class="token keyword">return</span> <span class="token function">customRef</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">track<span class="token punctuation">,</span> trigger</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-        <span class="token keyword">return</span> value
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token function">set</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token function">clearTimeout</span><span class="token punctuation">(</span>timeout<span class="token punctuation">)</span>
-        timeout <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-          value <span class="token operator">=</span> newValue
-          <span class="token function">trigger</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> delay<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">// text 的每次改变都只在最近一次set后的200ms后调用</span>
-<span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token function">useDebouncedRef</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="shallowref"><a href="#shallowref" class="header-anchor">#</a> shallowRef</h3> <p><code>ref()</code> 的浅层作用形式，创建一个仅跟踪自身 <code>.value</code> 变化的 ref，其他值不做任何处理都为非响应式</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">shallowRef</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 不会触发更改</span>
-state<span class="token punctuation">.</span>value<span class="token punctuation">.</span>count<span class="token operator">++</span>
-
-<span class="token comment">// 会触发更改</span>
-state<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">black</span><span class="token operator">:</span> <span class="token number">1</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p><strong>注意：</strong>
-shallowRef 的内部值将会被原样存储和暴露，不会被深层递归转为响应性， 只有对 <code>.value</code> 的访问是响应式的</p> <p>常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。</p> <h3 id="triggerref"><a href="#triggerref" class="header-anchor">#</a> triggerRef</h3> <p>强制触发依赖于一个浅层 <code>ref</code> 的副作用，这通常在对浅引用的内部值进行深度变更后使用。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> shallow <span class="token operator">=</span> <span class="token function">shallowRef</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">greet</span><span class="token operator">:</span> <span class="token string">'Hello, world'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 触发该副作用第一次应该会打印 &quot;Hello, world&quot;</span>
-<span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>shallow<span class="token punctuation">.</span>value<span class="token punctuation">.</span>greet<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 这次变更不应触发副作用，因为这个 ref 是浅层的</span>
-shallow<span class="token punctuation">.</span>value<span class="token punctuation">.</span>greet <span class="token operator">=</span> <span class="token string">'Hello, universe'</span>
-
-<span class="token comment">// 手动执行该 shallowRef 关联的副作用，打印 &quot;Hello, universe&quot;</span>
-<span class="token function">triggerRef</span><span class="token punctuation">(</span>shallow<span class="token punctuation">)</span>
-
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/api/builtIn.html" class="prev">
-        内建组件
-      </a></span> <span class="next"><a href="/api/composition-api.html">
-        组合式 API
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/45.392413aa.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/api/store-api.html b/docs-vuepress/.vuepress/dist/api/store-api.html
deleted file mode 100644
index 0a22caf8e0..0000000000
--- a/docs-vuepress/.vuepress/dist/api/store-api.html
+++ /dev/null
@@ -1,229 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Store API | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/46.22f9a9c6.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/api/app-config.html" class="sidebar-link">全局配置</a></li><li><a href="/api/global-api.html" class="sidebar-link">全局 API</a></li><li><a href="/api/instance-api.html" class="sidebar-link">实例 API</a></li><li><a href="/api/store-api.html" aria-current="page" class="active sidebar-link">Store API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/store-api.html#createstore" class="sidebar-link">createStore</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api/store-api.html#store-实例属性" class="sidebar-link">Store 实例属性</a></li><li class="sidebar-sub-header"><a href="/api/store-api.html#store-实例方法" class="sidebar-link">Store 实例方法</a></li></ul></li><li class="sidebar-sub-header"><a href="/api/store-api.html#createstorewiththis" class="sidebar-link">createStoreWithThis</a></li><li class="sidebar-sub-header"><a href="/api/store-api.html#createstatewiththis" class="sidebar-link">createStateWithThis</a></li><li class="sidebar-sub-header"><a href="/api/store-api.html#creategetterswiththis" class="sidebar-link">createGettersWithThis</a></li><li class="sidebar-sub-header"><a href="/api/store-api.html#createmutationswiththis" class="sidebar-link">createMutationsWithThis</a></li><li class="sidebar-sub-header"><a href="/api/store-api.html#createactionswiththis" class="sidebar-link">createActionsWithThis</a></li></ul></li><li><a href="/api/directives.html" class="sidebar-link">模板指令</a></li><li><a href="/api/compile.html" class="sidebar-link">编译构建</a></li><li><a href="/api/builtIn.html" class="sidebar-link">内建组件</a></li><li><a href="/api/reactivity-api.html" class="sidebar-link">响应式 API</a></li><li><a href="/api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/api/optional-api.html" class="sidebar-link">选项式 API</a></li><li><a href="/api/extend.html" class="sidebar-link">周边拓展</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="store-api"><a href="#store-api" class="header-anchor">#</a> Store API</h1> <p><strong>注意：</strong> 以下 API 在 <strong>2.8</strong> 版本后无法通过全局应用实例 <code>mpx</code> 访问。若项目中有类似 mpx.createStore 的用法，在升级到 <strong>2.8</strong> 版本后请进行修改。</p> <h2 id="createstore"><a href="#createstore" class="header-anchor">#</a> createStore</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createStore</span><span class="token punctuation">(</span>options<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Store
-</code></pre></div><blockquote><p>创建一个全局状态管理容器，实现复杂场景下的组件通信需求</p></blockquote> <ul><li><p><code>options</code></p> <p>options 可指定以下属性：</p> <ul><li><p><strong>state</strong>: <code>Object</code></p> <p>store的根 state 对象。</p> <p><a href="/guide/advance/store.html#state">详细介绍</a></p></li> <li><p><strong>mutations</strong>: <code>{ [type: string]: Function }</code></p> <p>在 store 上注册 mutation，处理函数总是接受 state 作为第一个参数（如果定义在模块中，则为模块的局部状态），payload 作为第二个参数（可选）。</p> <p><a href="/guide/advance/store.html#mutation">详细介绍</a></p></li> <li><p><strong>actions</strong>: <code>{ [type: string]: Function }</code></p> <p>在 store 上注册 action。处理函数总是接受 context 作为第一个参数，payload 作为第二个参数（可选）。</p> <p>context 对象包含以下属性：
-<code>js { state, // 等同于 `store.state` commit, // 等同于 `store.commit` dispatch, // 等同于 `store.dispatch` getters // 等同于 `store.getters` }</code>
-同时如果有第二个参数 payload 的话也能够接收。</p> <p><a href="/guide/advance/store.html#action">详细介绍</a></p></li> <li><p><strong>getters</strong>：<code>{[key: string]: Function }</code></p> <p>在 store 上注册 getter，getter 方法接受以下参数：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
-  state<span class="token punctuation">,</span>     <span class="token comment">// 如果在模块中定义则为模块的局部状态</span>
-  getters   <span class="token comment">// 等同于 store.getters</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>注册的 getter 暴露为 store.getters。</p> <p><a href="/guide/advance/store.html#getter">详细介绍</a></p></li> <li><p><strong>modules</strong>：<code>Object</code></p> <p>包含了子模块的对象，会被合并到 store，大概长这样：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
-  <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    state<span class="token punctuation">,</span>
-    mutations<span class="token punctuation">,</span>
-    actions<span class="token operator">?</span><span class="token punctuation">,</span>
-    getters<span class="token operator">?</span><span class="token punctuation">,</span>
-    modules<span class="token operator">?</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token comment">// ...</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>与根模块的选项一样，每个模块也包含 state 和 mutations 选项。模块的状态使用 key 关联到 store 的根状态。模块的 mutation 和 getter 只会接收 module 的局部状态作为第一个参数，而不是根状态，并且模块 action 的 context.state 同样指向局部状态。</p> <p><a href="/guide/advance/store.html#modules">详细介绍</a></p></li> <li><p><strong>deps</strong>：<code>Object</code></p> <p>包含了当前store依赖的第三方store：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
-  <span class="token literal-property property">store1</span><span class="token operator">:</span> storeA<span class="token punctuation">,</span>
-  <span class="token literal-property property">store2</span><span class="token operator">:</span> storeB
-<span class="token punctuation">}</span>
-</code></pre></div><p><a href="/guide/advance/store.html#modules">详细介绍</a></p></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">const</span> store1 <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token operator">...</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> store2 <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>options <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="store-实例属性"><a href="#store-实例属性" class="header-anchor">#</a> <strong>Store 实例属性</strong></h3> <ul><li><strong>state</strong>：<code>Object</code>
-根状态。</li> <li><strong>getters</strong>：<code>Object</code>
-暴露出注册的 getter。</li></ul> <h3 id="store-实例方法"><a href="#store-实例方法" class="header-anchor">#</a> <strong>Store 实例方法</strong></h3> <ul><li>commit</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">commit</span><span class="token punctuation">(</span>type<span class="token operator">:</span> string<span class="token punctuation">,</span> payload<span class="token operator">?</span><span class="token operator">:</span> any<span class="token punctuation">,</span> options<span class="token operator">?</span><span class="token operator">:</span> Object<span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token function">commit</span><span class="token punctuation">(</span>mutation<span class="token operator">:</span> Object<span class="token punctuation">,</span> options<span class="token operator">?</span><span class="token operator">:</span> Object<span class="token punctuation">)</span>
-</code></pre></div><p>提交 mutation。<a href="/guide/advance/store.html#mutation">详细介绍</a></p> <ul><li>dispatch</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">dispatch</span><span class="token punctuation">(</span>type<span class="token operator">:</span> string<span class="token punctuation">,</span> payload<span class="token operator">?</span><span class="token operator">:</span> any<span class="token punctuation">,</span> options<span class="token operator">?</span><span class="token operator">:</span> Object<span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token function">dispatch</span><span class="token punctuation">(</span>action<span class="token operator">:</span> Object<span class="token punctuation">,</span> options<span class="token operator">?</span><span class="token operator">:</span> Object<span class="token punctuation">)</span>
-</code></pre></div><p>分发 action。返回一个Promise。<a href="/guide/advance/store.html#action">详细介绍</a></p> <ul><li>mapState</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">mapState</span><span class="token punctuation">(</span>map<span class="token operator">:</span> Array<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
-</code></pre></div><p>为组件创建计算属性以返回 store 中的状态。<a href="/guide/advance/store.html#state">详细介绍</a></p> <ul><li>mapGetters</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">mapGetters</span><span class="token punctuation">(</span>map<span class="token operator">:</span> Array<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
-</code></pre></div><p>为组件创建计算属性以返回 getter 的返回值。<a href="/guide/advance/store.html#getter">详细介绍</a></p> <ul><li>mapActions</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">mapActions</span><span class="token punctuation">(</span>map<span class="token operator">:</span> Array<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
-</code></pre></div><p>创建组件方法分发 action。<a href="/guide/advance/store.html#action">详细介绍</a></p> <ul><li>mapMutations</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">mapMutations</span><span class="token punctuation">(</span>map<span class="token operator">:</span> Array<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
-</code></pre></div><p>创建组件方法提交 mutation。<a href="/guide/advance/store.html#mutation">详细介绍</a></p> <ul><li>mapStateToRefs</li></ul> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token function">mapStateToRefs</span><span class="token punctuation">(</span>maps<span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p><strong>组合式 API 特有</strong>，在组合式 API 场景下解构访问 getter 并保持 getter 响应性，可以使用该方法。<a href="/guide/advance/store.html#use-store-in-composition-api">详细介绍</a></p> <ul><li>mapGettersToRefs</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">mapGettersToRefs</span><span class="token punctuation">(</span>maps<span class="token operator">:</span> Array<span class="token operator">&lt;</span>string<span class="token operator">&gt;</span> <span class="token operator">|</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token punctuation">[</span>key<span class="token operator">:</span> string<span class="token punctuation">]</span><span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span>any<span class="token operator">&gt;</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p><strong>组合式 API 特有</strong>，在组合式 API 场景下需解构访问 state 并保持 state 响应性，可以使用该方法。<a href="/guide/advance/store.html#use-store-in-composition-api">详细介绍</a></p> <h2 id="createstorewiththis"><a href="#createstorewiththis" class="header-anchor">#</a> createStoreWithThis</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span>store<span class="token operator">:</span> Store<span class="token punctuation">)</span><span class="token operator">:</span> Store
-</code></pre></div><blockquote><p>createStoreWithThis 为 createStore 的变种方法，主要为了在 <code>Typescript</code> 环境中，可以更好地支持 store 中的类型推导。<br>
-其主要变化在于定义 getters， mutations 和 actions 时，
-自身的 state，getters 等属性不再通过参数传入，而是会挂载到函数的执行上下文 this 当中，通过 this.state 或 this.getters 的方式进行访问。
-由于TS的能力限制，getters/mutations/actions 只有使用对象字面量的方式直接传入 createStoreWithThis 时
-才能正确推导出 this 的类型，当需要将 getters/mutations/actions 拆解为对象编写时，需要用户显式地声明 this 类型，无法直接推导得出。</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code>
-<span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> getMixin<span class="token punctuation">,</span> createStoreWithThis<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">aa</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">bb</span><span class="token operator">:</span> <span class="token number">2</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">cc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>aa <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bb
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">doSth3</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>getters<span class="token punctuation">.</span>cc<span class="token punctuation">)</span>
-      <span class="token keyword">return</span> <span class="token boolean">false</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token string">'2'</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">c</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>b
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">d</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// data, mixin, computed中定义的数据能够被推导到this中</span>
-      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>aaa <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>c
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token comment">// 从store上map过来的计算属性或者方法同样能够被推导到this中</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'aa'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token comment">// 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin</span>
-    <span class="token function">getMixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token function">aaa</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token keyword">return</span> <span class="token number">123</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token function">doSth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>aaa<span class="token punctuation">)</span>
-          <span class="token keyword">return</span> <span class="token boolean">false</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">doSth2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token operator">++</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>d<span class="token punctuation">)</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>aa<span class="token punctuation">)</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doSth3</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'doSth3'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="createstatewiththis"><a href="#createstatewiththis" class="header-anchor">#</a> createStateWithThis</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createStateWithThis</span><span class="token punctuation">(</span>state<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
-</code></pre></div><blockquote><p>createStateWithThis 为创建 state 提供了类型推导，对于基本类型可以由 TypeScript 自行推导，使用其他类型时，推荐使用 as 进行约束</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createStateWithThis <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">export</span> type StatusType <span class="token operator">=</span> <span class="token string">'start'</span> <span class="token operator">|</span> <span class="token string">'running'</span> <span class="token operator">|</span> <span class="token string">'stop'</span>
-
-<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createStateWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">'running'</span> <span class="token keyword">as</span> StatusType
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="creategetterswiththis"><a href="#creategetterswiththis" class="header-anchor">#</a> createGettersWithThis</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createGettersWithThis</span><span class="token punctuation">(</span>getters<span class="token operator">:</span> Object<span class="token punctuation">,</span> options<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span>Object
-</code></pre></div><ul><li><p>getters</p> <p>需要定义的 getters 对象。</p></li> <li><p>options（可选参数）</p> <p>在 options 中可以传入 state，getters，deps。由于 getter 的类型推论需要基于 state，所以导出 getters 时，需要将 state 进行传入。deps 是作为一个扩展存在，getters 可以通过 deps 中传入的其他 store 来获取值，当 store 没有其他需要依赖的 deps 时可以不传。createMutationsWithThis 和 createActionsWithThis 同理。</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createGettersWithThis<span class="token punctuation">,</span> createStoreWithThis <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createGettersWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">isStart</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token string">'start'</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">getNum</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>base<span class="token punctuation">.</span>test <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>getters<span class="token punctuation">.</span>base<span class="token punctuation">.</span>getTest
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  state<span class="token punctuation">,</span>
-  <span class="token literal-property property">deps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">testNum</span><span class="token operator">:</span> <span class="token number">0</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token function">getTest</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>testNum <span class="token operator">*</span> <span class="token number">2</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="createmutationswiththis"><a href="#createmutationswiththis" class="header-anchor">#</a> createMutationsWithThis</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createMutationsWithThis</span><span class="token punctuation">(</span>mutations<span class="token operator">:</span> Object<span class="token punctuation">,</span> options<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
-</code></pre></div><ul><li><p>mutations</p> <p>需要定义的 mutations 对象。</p></li> <li><p>options（可选参数）</p> <p>在 options 中可以传入 state，deps。</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createMutationsWithThis <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createMutationsWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setCurrentStatus</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">payload</span><span class="token operator">:</span> StatusType</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>status <span class="token operator">=</span> payload
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> state <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="createactionswiththis"><a href="#createactionswiththis" class="header-anchor">#</a> createActionsWithThis</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">function</span> <span class="token function">createActionsWithThis</span><span class="token punctuation">(</span>actions<span class="token operator">:</span> Object<span class="token punctuation">,</span> options<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> Object
-</code></pre></div><ul><li><p>actions</p> <p>需要定义的 actions 对象。</p></li> <li><p>options（可选参数）</p> <p>由于action 可以同时调用 getters、mutations，所以需要将这些都传入，以便进行类型推导。因此 options 可以传入 state、getters、mutations、deps。</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createActionsWithThis <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> state<span class="token punctuation">,</span> <span class="token punctuation">{</span> StatusType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./state'</span>
-<span class="token keyword">import</span> getters <span class="token keyword">from</span> <span class="token string">'./getters'</span>
-<span class="token keyword">import</span> mutations <span class="token keyword">from</span> <span class="token string">'./mutations'</span>
-
-<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createActionsWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">testActions</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">payload</span><span class="token operator">:</span> StatusType</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setCurrentStatus'</span><span class="token punctuation">,</span> payload<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  state<span class="token punctuation">,</span>
-  getters<span class="token punctuation">,</span>
-  mutations
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/api/instance-api.html" class="prev">
-        实例 API
-      </a></span> <span class="next"><a href="/api/directives.html">
-        模板指令
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/46.22f9a9c6.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/1.0.html b/docs-vuepress/.vuepress/dist/articles/1.0.html
deleted file mode 100644
index b344feb20d..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/1.0.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>滴滴开源小程序框架Mpx | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/47.2bd2cecc.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" aria-current="page" class="active sidebar-link">滴滴开源小程序框架Mpx</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/1.0.html#设计思路" class="sidebar-link">设计思路</a></li><li class="sidebar-sub-header"><a href="/articles/1.0.html#技术实现" class="sidebar-link">技术实现</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/1.0.html#数据响应与性能优化" class="sidebar-link">数据响应与性能优化</a></li><li class="sidebar-sub-header"><a href="/articles/1.0.html#编译构建" class="sidebar-link">编译构建</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/1.0.html#结语" class="sidebar-link">结语</a></li></ul></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="滴滴开源小程序框架mpx"><a href="#滴滴开源小程序框架mpx" class="header-anchor">#</a> 滴滴开源小程序框架Mpx</h1> <blockquote><p>作者：<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">hiyuki<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p>Mpx是一款致力于提高小程序开发体验的增强型小程序框架，通过Mpx，我们能够以最先进的web开发体验(Vue + Webpack)来开发生产性能深度优化的小程序，Mpx具有以下一些优秀特性：</p> <ul><li>数据响应特性(watch/computed)</li> <li>增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等)</li> <li>深度性能优化(原生自定义组件/基于依赖收集和数据变化的setData)</li> <li>Webpack编译(npm/循环依赖/Babel/ESLint/css预编译/代码优化等)</li> <li>单文件组件开发</li> <li>状态管理(Vuex规范/多实例/可合并)</li> <li>跨团队合作(packages)</li> <li>逻辑复用能力(mixins)</li> <li>脚手架支持</li> <li>小程序自身规范的完全支持</li> <li>支付宝小程序的支持</li></ul> <h2 id="设计思路"><a href="#设计思路" class="header-anchor">#</a> 设计思路</h2> <p>目前业界主流的小程序框架主要有WePY，mpvue和Taro，这三者都是将其他的语法规范转译为小程序语法规范，我们称其为转译型框架。不同于上述三者，Mpx是一款基于小程序语法规范的增强型框架，我们使用Vue中优秀的语法特性增强了小程序，而不是让用户直接使用vue语法来开发小程序，之所以采用这种设计主要是基于如下考虑：</p> <ul><li>转译型框架无法支持源框架的所有语法特性(如Vue模板中的动态特性或React中动态生成的jsx)，用户在使用源框架语法进行开发时可能会遇到不可预期的错误，具有不确定性</li> <li>小程序本身的技术规范在不断地更新进步，许多新的技术规范在转译型框架中无法支持或需要很高的支持成本，而对于增强型框架来说只要新的技术规范不与增强特性冲突，就能够直接支持</li></ul> <h2 id="技术实现"><a href="#技术实现" class="header-anchor">#</a> 技术实现</h2> <p>小程序刚推出时不支持自定义组件，无法进行组件化开发，当时最早的小程序框架WePY做的核心工作就是支持了小程序的组件化开发，后来的mpvue也基于Vue做了类似的工作。由于当时的小程序本身不支持自定义组件，WePY和mpvue的组件化支持都是基于编译做的组件化封装，用户编写的组件模板会被编译为Page中模板的一部分，在组件中定义的数据会被编译为Page中的数据，对组件进行数据更新也会基于路径映射调用Page.setData。这个方案在当时的技术条件下确实是一个唯一解，但该方案在复杂的小程序应用中会存在明显性能问题，原因在于该方案中页面的数据量会很大，而且每个组件的局部更新实际上都会成为页面级别的全局更新，在组件较多的页面中容易引发性能问题。在小程序自定义组件推出后，我们通过性能测试确认了该方案解决了上述组件封装方案中的性能问题。由于自定义组件在当时是一个最新的技术标准，业内的小程序框架都未支持，而我们本身的业务又有复杂小程序的开发需求，于是我们就基于小程序自定义组件规范启动了Mpx框架的设计与开发</p> <p><em>Page与Component setData性能对照</em></p> <table><thead><tr><th></th> <th>Component</th> <th>Page</th></tr></thead> <tbody><tr><td>局部更新</td> <td>1975ms</td> <td>7186ms</td></tr> <tr><td>全局更新</td> <td>6210ms</td> <td>24612ms</td></tr></tbody></table> <blockquote><p>性能衡量标准说明：
-局部更新：文档中存在1000个节点，其中一个节点更新1000次的耗时；
-全局更新：文档中存在5个节点，5个节点独立更新1000次的耗时
-以上数据在iphone7微信小程序环境下测试得出</p></blockquote> <h3 id="数据响应与性能优化"><a href="#数据响应与性能优化" class="header-anchor">#</a> 数据响应与性能优化</h3> <p>数据响应作为Vue最核心的特性，在我们的日常开发中被大量使用，能够极大地提高前端开发体验和效率，我们在框架设计初期最早考虑的就是如何将数据响应特性加入到小程序开发中。在数据响应的实现上，我们引入了MobX，一个实现了纯粹数据响应能力的知名开源项目。借助MobX和mixins，我们在小程序组件创建初期建立了一个响应式数据管理系统，该系统观察着小程序组件中的所有数据(data/props/computed)并基于数据的变更驱动视图的渲染(setData)及用户注册的watch回调，实现了Vue中的数据响应编程体验。与此同时，我们基于MobX封装实现了一个Vuex规范的数据管理store，能够方便地注入组件进行全局数据管理。为了提高跨团队开发的体验，我们对store添加了多实例可合并的特性，不同团队维护自己的store，在需要时能够合并他人或者公共的store生成新的store实例，我们认为这是一种比Vuex中modules更加灵活便捷的跨团队数据管理模式</p> <p>作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：</p> <ol><li>尽可能减少setData调用的频次</li> <li>尽可能减少单次setData传输的数据</li></ol> <p>为了实现以上两个优化方向，我们做了以下几项工作：</p> <ul><li>将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；</li> <li>将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。
-基于以上优化，我们大大减少了小程序setData的调用频次和传递数据量，与初版Mpx中track全量数据的方案相比提升显著。</li></ul> <p><em>Mpx setData优化效果</em></p> <table><thead><tr><th></th> <th>旧版mpx</th> <th>新版mpx</th></tr></thead> <tbody><tr><td>setData次数</td> <td>164</td> <td>88</td></tr> <tr><td>setData数据量</td> <td>370kB</td> <td>38kB</td></tr></tbody></table> <blockquote><p>以上数据由较复杂小程序在固定交互流程后统计得出</p></blockquote> <p><img src="https://dpubstatic.udache.com/static/dpubimg/4cb54489-b99d-4560-97aa-68f756730131.jpeg" alt="Mpx数据响应机制流程示意图"> <em>Mpx数据响应机制流程示意图</em></p> <h3 id="编译构建"><a href="#编译构建" class="header-anchor">#</a> 编译构建</h3> <p>我们希望使用目前设计最强大、生态最完善的编译构建工具Webpack来实现小程序的编译构建，让用户得到web开发中先进强大的工程化开发体验。使用过Webpack的同学都知道，通常来说Webpack都是将项目中使用到的一系列碎片化模块打包为一个或几个bundle，而小程序所需要的文件结构是非常离散化的，如何调解这两者的矛盾成为了我们最大的难题。一种非常直观简单的思路在于遍历整个src目录，将其中的每一个.mpx文件都作为一个entry加入到Webpack中进行处理，这样做的问题主要有两个：</p> <ol><li>src目录中用不到的.mpx文件也会被编译输出，最终也会被小程序打包进项目包中，无意义地增加了包体积；</li> <li>对于node_modules下的.mpx文件，我们不认为遍历node_modules是一个好的选择。</li></ol> <p>最终我们采用了一种基于依赖分析和动态添加entry的方式来进行实现，用户在Webpack配置中只需要配置一个入口文件app.mpx，loader在解析到json时会解析json中pages域和usingComponents域中声明的路径，通过动态添加entry的方式将这些文件添加到Webpack的构建系统当中（注意这里是添加entry而不是添加依赖，因为只有entry能生成独立的文件，满足小程序的离散化文件结构），并递归执行这个过程，直到整个项目中所有用到的.mpx文件都加入进来，在输出前，我们借助了CommonsChunkPlugin/SplitChunksPlugin的能力将复用的模块抽取到一个外部的bundle中，确保最终生成的包中不包含重复模块。我们提供了一个Webpack插件和一个.mpx文件对应的loader来实现上述操作，用户只需要将其添加到Webpack配置中就可以以打包web项目的方式正常打包小程序，没有任何的前置和后置操作，支持Webpack本身的完整生态。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/ce6d470c-0a4c-486e-a2f5-ad225c289832.jpeg" alt="Mpx编译构建机制流程示意图"> <em>Mpx编译构建机制流程示意图</em></p> <h1 id="现状和未来"><a href="#现状和未来" class="header-anchor">#</a> 现状和未来</h1> <p>目前Mpx框架已经在滴滴内部大量使用，支撑了滴滴出行、青桔单车、街兔电单车、营销、车服等业务在小程序上的实现，线上运行稳定，收到了大量的好评反馈。未来我们在对框架进行持续迭代优化的同时会持续跟进微信和支付宝最新的技术标准，同时也会将在更多的小程序平台上进行适配。由于我们的设计初衷和专注点在于增强小程序开发体验，Mpx并没有进行跨H5甚至是跨Native的支持，但现实业务当中确实存在这样的诉求，未来我们会在Mpx的基础上对跨端进行一定的尝试，与此同时我们依然会持续维护升级Mpx，原因在于跨端意味着灵活性受限及能力的缺失，我们希望能给用户提供第二种选择。</p> <p><em>Mpx与业内主流小程序框架异同对比</em></p> <table><thead><tr><th></th> <th>WePY</th> <th>mpvue</th> <th>Taro</th> <th>Mpx</th></tr></thead> <tbody><tr><td>代码规范</td> <td>自定义</td> <td>Vue</td> <td>React</td> <td>小程序+</td></tr> <tr><td>组件化实现</td> <td>Page封装</td> <td>Page封装</td> <td>Component</td> <td>Component</td></tr> <tr><td>数据响应</td> <td>脏值检查</td> <td>Vue</td> <td>无</td> <td>Mobx</td></tr> <tr><td>状态管理</td> <td>Redux</td> <td>Vuex</td> <td>Redux</td> <td>类Vuex</td></tr></tbody></table> <h2 id="结语"><a href="#结语" class="header-anchor">#</a> 结语</h2> <p>如果你注重开发体验和产品性能，专注于小程序开发，那Mpx会是一个很好的选择。最后感谢开源社区源源不断涌现出的优秀项目，给我们提供了无限的启发和巨大的技术帮助。</p> <p>Github: <a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer">https://github.com/didi/mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
-使用文档: <a href="https://mpxjs.cn/" target="_blank" rel="noopener noreferrer">https://mpxjs.cn/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
-用户交流群:
-<img src="https://dpubstatic.udache.com/static/dpubimg/at_XEnlFb0/WechatIMG1.jpeg" alt="微信"></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/articles/2.0.html">
-        Mpx发布2.0，完美支持跨平台开发
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/47.2bd2cecc.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/2.0.html b/docs-vuepress/.vuepress/dist/articles/2.0.html
deleted file mode 100644
index 9482e8fab6..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/2.0.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>滴滴小程序框架Mpx发布2.0，支持小程序跨平台开发，可直接转换已有微信小程序 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/48.55792a30.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" aria-current="page" class="active sidebar-link">Mpx发布2.0，完美支持跨平台开发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/2.0.html#跨平台开发" class="sidebar-link">跨平台开发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/2.0.html#设计理念" class="sidebar-link">设计理念</a></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#使用方法" class="sidebar-link">使用方法</a></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#差异抹平" class="sidebar-link">差异抹平</a></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#条件编译" class="sidebar-link">条件编译</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#性能优化" class="sidebar-link">性能优化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/2.0.html#setdata优化" class="sidebar-link">setData优化</a></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#包体积优化" class="sidebar-link">包体积优化</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#渐进迁移" class="sidebar-link">渐进迁移</a></li><li class="sidebar-sub-header"><a href="/articles/2.0.html#未来规划" class="sidebar-link">未来规划</a></li></ul></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="滴滴小程序框架mpx发布2-0-支持小程序跨平台开发-可直接转换已有微信小程序"><a href="#滴滴小程序框架mpx发布2-0-支持小程序跨平台开发-可直接转换已有微信小程序" class="header-anchor">#</a> 滴滴小程序框架Mpx发布2.0，支持小程序跨平台开发，可直接转换已有微信小程序</h1> <blockquote><p>作者：<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">hiyuki<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p>Mpx是一款致力于提高小程序开发体验和效率的增强型小程序框架，目前在滴滴公司内部支撑了包括滴滴出行小程序，滴滴出行广场小程序，青桔单车，黑马电单车，小桔养车，小桔加油在内的小程序生态；自去年11月开源以来，Mpx也吸纳了众多外部开发者的加入，基于Mpx开发了开走吧，好免街，花忆等小程序。</p> <p>长期以来，Mpx优秀的开发体验和强大的稳定性得到了内外开发者的一致认可和好评，这非常符合Mpx的设计初衷。但是在各大厂商陆续推出自己的小程序平台，且各家的技术标准都不统一的今天，单纯地提高某一个平台的开发体验已经不能满足广大小程序开发者们的诉求，<code>一套代码在多小程序平台运行</code>已经成为一个现实上的刚需。为了解决这个小程序开发的痛点，Mpx发布了2.0版本，适配了目前业内已经发布的所有小程序平台(微信、支付宝、百度、头条、qq)，并且提供了直接将现有微信小程序编译输出到其他平台运行的能力。</p> <p>Mpx2.0版本新增的主要特性主要包含：</p> <ul><li>完整支持了目前业内已发布的所有小程序平台(微信，支付宝，百度，qq，头条)；</li> <li>Mpx小程序跨平台开发，支持将已有的Mpx微信项目编译输出到其他已支持的小程序平台中运行，<a href="/guide/advance/platform.html">点击查看详情</a>；</li> <li>小程序原生组件跨平台编译，支持将已有的微信原生组件编译输出到其他已支持的小程序平台中运行；</li> <li>深度分包优化，编译过程中进行精准分包资源判断，所有分包only的资源(组件、js、外部样式、外部模板、wxs，图像媒体等)都会精确输出到分包目录中；</li> <li>render函数中完整支持wxs模块，<a href="/guide/understand/runtime.html">关于render函数点击查看详情</a>；</li> <li>支持了模板引入，内联wxs，自定义tabbar，独立分包，workers，云开发等原生能力，进一步完善原生兼容性。</li></ul> <p>同业内主流的小程序跨端框架相比，Mpx更专注于小程序开发本身，在小程序开发中具备以下优势：</p> <ul><li>基于小程序自身的技术标准进行增强，没有进行过重的DSL转换，开发时遇到的坑会更少；</li> <li>完全兼容原生小程序技术规范，0成本迁移原生小程序项目;</li> <li>跨平台开发以跨小程序平台为目标，大部分差异抹平工作在编译阶段进行，大大减少运行时适配层增加的包体积；</li> <li>支持业内微信小程序组件库(如vant、iView等)直接转换到其他小程序平台运行;</li> <li>非常重视小程序性能，提供了深度的setData和包体积优化。</li></ul> <p>关于Mpx更详细的介绍可以查看<a href="https://mpxjs.cn/" target="_blank" rel="noopener noreferrer">官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>和<a href="/articles/1.0.html">这篇文章</a>。</p> <p>Github：<a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer">https://github.com/didi/mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="跨平台开发"><a href="#跨平台开发" class="header-anchor">#</a> 跨平台开发</h2> <p>作为2.0版本的核心能力，Mpx的跨平台开发能力允许用户直接将已有小程序项目编译输出到其他已支持的小程序平台中运行。微信小程序作为小程序概念的提出者，有着最广泛的生态覆盖，因此我们优先支持了将微信小程序编译为其他平台小程序的能力。基于这个能力，用户不仅能跨平台编译微信Mpx项目，甚至能够将微信的原生自定义组件也编译到其他小程序平台进行运行，这意味着我们的跨平台项目能够直接使用一些社区内已有的UI组件库生态(如vant、iView等)，极大地提高了跨平台开发的适用范围。</p> <h3 id="设计理念"><a href="#设计理念" class="header-anchor">#</a> 设计理念</h3> <p>Mpx框架的核心设计理念在于增强，增强是指在小程序已有的原生能力基础上做加法，拓展小程序的开发能力，提高小程序的开发体验和效率。这个设计理念使Mpx给开发者带来了更强的确定性和可预期性，更低的学习上手和调试成本。基于这个理念，Mpx在不同的小程序平台中进行了差异性的增强适配，并参考各个平台的模板指令风格提供了不同的增强模板指令集，让用户在各小程序平台中都可以以增强的方式去最大限度地使用平台自有的原生能力。</p> <p>我们在对Mpx提供跨平台能力的支持时也遵循了增强的核心设计理念。简单来讲，Mpx的跨平台能力是在多平台能力的基础上，在编译和运行时增加了一层转换层，将源平台的代码转换为目标平台的代码之后，再按照既有的目标平台的处理逻辑进行增强，同时我们也提供了一套完善的条件编译机制，让用户自行实现少数框架无法转换的部分。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/38652040-2fbf-435b-aeff-563666c4021c.png" alt="Mpx跨平台开发流程示意图"></p> <p><em>Mpx跨平台开发流程示意图</em></p> <p>Mpx跨平台能力设计思路明显区别于业内已有的其他小程序跨平台框架，主要差异在于：</p> <ul><li>Mpx以小程序本身的DSL作为基准，而没有使用web框架(React,Vue)的DSL；</li> <li>Mpx主要通过编译和运行时转换的方式处理平台差异，没有提供额外的差异抹平层(基础组件库等)。</li></ul> <p>之所以采用这种设计，主要基于以下原因：</p> <ul><li>Mpx主要以跨小程序平台为目标，目前各大小程序平台的技术规范具有一定相似性，绝大部分平台差异能够通过编译和运行时手段抹平，同时省去的差异抹平层也能够进一步减少框架运行时体积；</li> <li>使用小程序本身的DSL作为基准允许用户直接在已有项目中使用跨平台能力，对于原生小程序项目或组件也能够使用该能力进行跨平台输出；</li> <li>结合完善的条件编译支持，该方案能够在满足用户跨平台需求的同时仍然允许用户最大限度地使用各个小程序平台提供的能力，完全延续了Mpx增强的核心设计理念。</li></ul> <h3 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h3> <p>Mpx跨平台开发的使用方式非常简单，用户只需在MpxWebpackPlugin创建时传入mode和srcMode参数指定源平台和目标平台，当srcMode和mode不一致时，框架会读取相应的配置对项目进行编译和运行时转换。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 微信转支付宝</span>
-<span class="token keyword">new</span> <span class="token class-name">MpxWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// mode指定目标平台，可选值有(wx|ali|swan|qq|tt)</span>
-  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'ali'</span><span class="token punctuation">,</span>
-  <span class="token comment">// srcMode指定源码平台，默认值同目标平台一致</span>
-  <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="差异抹平"><a href="#差异抹平" class="header-anchor">#</a> 差异抹平</h3> <p>目前各大厂商的小程序技术规范在宏观层面上大致保持一致，但是技术细节方面存在很多差异，大致划分为以下几个部分：</p> <ul><li>模板语法/基础组件差异</li> <li>json配置差异</li> <li>wxs语法差异</li> <li>页面/组件对象差异</li> <li>api调用差异</li> <li>webview bridge差异</li></ul> <p>其中，对于模板语法/基础组件、json配置和wxs中的静态差异，我们主要通过编译手段进行转换处理，对于这部分差异中无法转换的部分会在编译阶段报错指出；而对于页面/组件对象、api调用和webview bridge中js运行时的差异，我们主要通过运行时手段进行处理，对应的无法转换部分也会在运行时中报错指出。</p> <p>值得注意的是，我们在跨平台转换中做的工作不仅是对可转换的技术标准进行转换映射，对于一些目标平台中不存在的能力，我们也尽可能地通过编译和运行时手段提供了模拟和支持，最大限度地减少用户在跨平台开发中需要付出的额外工作量。以差异性最大但现实场景也最多的微信转支付宝为例，Mpx模拟提供了许多微信中支持但支付宝中未支持的能力：</p> <ul><li>组件自定义事件</li> <li>组件间关系</li> <li>获取子组件实例</li> <li>observers/property observer</li> <li>内联wxs</li> <li>外部样式类</li></ul> <p>对于原生自定义组件的跨平台转换，我们会对其进行简单的运行时注入，使其能够使用Mpx框架提供的运行时转换能力。</p> <h3 id="条件编译"><a href="#条件编译" class="header-anchor">#</a> 条件编译</h3> <p>对于框架无法抹平的差异部分，会在编译和运行时报错指出，对于这部分错误，我们提供了完善的条件编译机制让用户能够自行编写目标平台的patch进行修复，该能力也能用于实现具有平台差异性的业务逻辑。</p> <p>上文中提到Mpx通过读取用户传入的mode和srcMode来决定是否以及如何对项目进行转换，mode和srcMode分别代表整个项目构建的目标平台和源平台，条件编译能够让用户在项目中创建声明了自身平台属性(localSrcMode)的文件和代码块。在项目构建中，框架会优先加载带有localSrcMode声明且localSrcMode与项目目标平台匹配(localSrcMode===mode)的文件和代码块，这部分文件和代码块需要完全依照自身声明的平台标准进行编写，Mpx不会对其进行任何编译和运行时的跨平台转换。</p> <p>Mpx提供了三种维度的条件编译，分别是文件维度，区块维度和代码维度，用户可以根据平台差异的覆盖范围灵活选择使用。</p> <h2 id="性能优化"><a href="#性能优化" class="header-anchor">#</a> 性能优化</h2> <p>Mpx框架专注于小程序开发，在性能优化方面我们做过很多尝试和努力，主要集中在两个方面：</p> <ul><li>运行时的setData优化</li> <li>编译构建时的包体积优化</li></ul> <h3 id="setdata优化"><a href="#setdata优化" class="header-anchor">#</a> setData优化</h3> <p>数据响应是Mpx运行时增强的核心能力，该能力让用户在小程序开发中能够像Vue中一样使用watch和computed特性，并且用直接赋值的方式操作数据驱动视图更新，而不需要手动调用setData方法，换言之框架接管了小程序中的setData调用。</p> <p>通过各大小程序平台的设计原理和性能优化建议可以得知，setData对于小程序的性能表现非常重要，而setData优化的两大方向在于：</p> <ul><li>尽可能减少setData调用的频次</li> <li>尽可能减少单次setData传输的数据</li></ul> <p>为了实现setData的优化，我们在模板编译过程中对于每个组件的模板都生成了一个渲染函数(render function)，该函数模拟模板的渲染逻辑，在每次执行时访问当次渲染所需的数据，并将当次访问过的数据路径记录下来作为函数返回值返回。</p> <p>在运行时，框架会在每个组件创建时创建一个render watcher，该watcher追踪渲染函数，当渲染依赖数据发生变更时异步执行渲染函数，在render watcher回调中得到渲染函数返回的数据路径，基于这些路径与上一次的缓存数据进行diff比对，过滤掉未发生变化的数据后得到最小必要数据，最后调用setData将最小必要数据发送到真实的小程序渲染层更新视图。</p> <p>基于这个机制，当数据发生变更时，只有当前渲染依赖的那部分数据发生变更才会异步地触发render watcher的执行，而每次执行后也只有实际发生变更的那部分数据会被setData发送到渲染层。这样用户就能自由地根据业务需求来操作数据，无需关注setData的调用优化，框架能够自动进行程序上最优的setData调用，在提升用户开发体验的同时也提升了程序性能。</p> <p>在1.x版本中，渲染函数内无法执行wxs的逻辑，对于含有wxs的组件有可能降级到全量设置数据的模式，在2.0版本中，我们将wxs模块转译处理为js可执行的代码后注入到js bundle中，含有wxs的渲染函数也能够正常访问并执行wxs逻辑。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/9ead35f1-693f-44f4-beb3-f98555ab6861.png" alt="setData优化示意图"></p> <p><em>setData优化示意图</em></p> <h3 id="包体积优化"><a href="#包体积优化" class="header-anchor">#</a> 包体积优化</h3> <p>类似于运行时对于setData的接管，Mpx在编译阶段接管了项目的资源管理。得益于webpack强大的插件机制，Mpx开发了一个深度定制的webpack插件，基于webpack完成小程序的打包构建工作。用户在使用Mpx开发小程序时可以不受限制地使用npm依赖、最新的es特性和css预处理器等现代web开发能力。与此同时，Mpx在包体积优化上也做了很多工作，让用户专注于业务开发而无需花费过多精力进行包体积管理，我们所做的优化工作如下：</p> <ul><li>打包构建工作完全基于依赖分析，任何没有被引用的资源都不会出现在dist当中；</li> <li>对于npm组件和页面的构建也完全基于依赖分析按需打包，不会copy整个miniprogram_dist目录，也不需要执行构建npm，使用体验和包体积均优于微信小程序自身的npm支持方案；</li> <li>基于webpack提供的能力进行公共模块抽取和代码压缩等优化工作；</li> <li>完善的分包支持，对所有资源进行从属分析，将所有分包only的资源都输出到分包目录中。</li></ul> <p>分包作为微信小程序中优化包体积的核心手段(类似于异步按需加载)，Mpx对其进行了完善的支持。为了精确地标记出分包only的资源，我们在构建时将主包和分包的依赖收集步骤拆分开来串行处理，先处理主包，再处理分包。在主包的处理过程中，将主包页面中引用的所有非js资源(组件、外部样式、外部模板、wxs，图像媒体等)都记录下来，在处理分包时，对分包内引用的非js资源都进行检查，如果被主包引用过则输出到主包中，否则标记为分包only的资源输出到分包目录下。</p> <p>对于js模块资源，我们在脚手架中生成的构建配置中提供了辅助函数，便于用户进行分包bundle的配置，经过该配置后，分包only的公用模块会被打入分包bundle输出到分包目录下，其余的公共模块会正常打入主bundle中。</p> <p>在跨平台开发中，我们建议用户使用Mpx提供的<a href="/guide/advance/subpackage.html#packages">packages</a>来定义分包，这样在转换到不支持分包的小程序平台时会自动降级为同步包进行处理。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/3121ca4e-1b47-43bc-992a-b351c4a03da4.png" alt="分包构建示意图"></p> <p><em>分包构建示意图</em></p> <h2 id="渐进迁移"><a href="#渐进迁移" class="header-anchor">#</a> 渐进迁移</h2> <p>Mpx提供了良好的渐进迁移支持，对于使用原生或其他小程序框架的开发者来说，采用渐进迁移的方式逐步引入Mpx进行开发成本并不大。</p> <p>在2.0版本中我们进一步完善了Mpx的原生兼容性，跟进支持了各个小程序平台最新的技术能力，如自定义tabbar，独立分包，分包预加载，workers，云开发等能力，同时补齐了一些1.x版本遗漏的支持。得益于此，对于使用原生小程序开发的开发者来说，迁移Mpx的成本几乎为0，用户只需将对应页面组件的构造函数替换为Mpx提供的createPage/createCompnent，即可使用Mpx提供的各种增强能力。</p> <p>对于使用其他框架的开发者，Mpx也提供了局部构建的机制，允许用户将特定的页面和组件单独构建输出为原生组件，用户只需手动或者编写脚本输出的原生组件整合进原有项目中即可。</p> <h2 id="未来规划"><a href="#未来规划" class="header-anchor">#</a> 未来规划</h2> <p>作为滴滴公司内部小程序生态的基础设施，我们会对Mpx框架进行长期的维护更新，确保能在第一时间支持各个小程序平台最新的技术特性。与此同时，我们也会进一步完善框架的基础能力，目前已排上日程待支持能力包括：</p> <ul><li>i18n</li> <li>ts支持</li> <li>单元测试支持</li></ul> <p>在跨平台能力方面，我们也会根据社区的反馈和建议，以及小程序的标准化进程，对其进行持续的完善与更新。</p> <p>最后，如果你专注小程序开发，关注开发体验和产品性能，那Mpx会是你最好的选择。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/articles/1.0.html" class="prev">
-        滴滴开源小程序框架Mpx
-      </a></span> <span class="next"><a href="/articles/performance.html">
-        小程序框架运行时性能大测评
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/48.55792a30.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/2.7-release.html b/docs-vuepress/.vuepress/dist/articles/2.7-release.html
deleted file mode 100644
index f6ff6af0d1..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/2.7-release.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx2.7 版本正式发布，大幅提升编译构建速度 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/49.cde94a79.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" aria-current="page" class="active sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/2.7-release.html#编译构建提速" class="sidebar-link">编译构建提速</a></li><li class="sidebar-sub-header"><a href="/articles/2.7-release.html#分包输出能力增强" class="sidebar-link">分包输出能力增强</a></li><li class="sidebar-sub-header"><a href="/articles/2.7-release.html#单元测试支持" class="sidebar-link">单元测试支持</a></li><li class="sidebar-sub-header"><a href="/articles/2.7-release.html#module-rules复用" class="sidebar-link">Module.rules复用</a></li><li class="sidebar-sub-header"><a href="/articles/2.7-release.html#即将到来的新特性" class="sidebar-link">即将到来的新特性</a></li><li class="sidebar-sub-header"><a href="/articles/2.7-release.html#未来规划" class="sidebar-link">未来规划</a></li></ul></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx2-7-版本正式发布-大幅提升编译构建速度"><a href="#mpx2-7-版本正式发布-大幅提升编译构建速度" class="header-anchor">#</a> Mpx2.7 版本正式发布，大幅提升编译构建速度</h1> <blockquote><p>作者：<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">hiyuki<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p><a href="https://www.mpxjs.cn/" target="_blank" rel="noopener noreferrer">Mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>是一款开源的增强型跨端小程序框架，它具有良好的开发体验，极致的应用性能和一份源码同构输出所有小程序平台及web环境的跨端能力。近期，我们发布了框架最新的2.7版本，基于<code>webpack5</code>彻底重构了框架的核心编译构建流程，利用持久化缓存大幅提升了编译构建速度，最高提升可达10倍。除此之外，<code>Mpx2.7</code>版本还带来了一系列重要的功能更新，包括分包输出能力增强，完善的单元测试支持和用户Rules应用等，下面会对这些新特性进行逐个展开介绍。</p> <h2 id="编译构建提速"><a href="#编译构建提速" class="header-anchor">#</a> 编译构建提速</h2> <p>随着小程序生态的日渐发展壮大，各类线上小程序业务体量和复杂度的不断升级，小程序的包体积从最开始的2M以内膨胀到20M甚至30M，已经远远不复当初的&quot;<strong>小</strong>&quot;程序之名。随着小程序项目大小的不断增加，采用框架进行小程序开发的开发者们往往都会面临一个问题，即框架的编译耗时过长，Mpx也不例外。</p> <p>以团队负责的小程序项目为例，该项目目前的总包体积已经超过25M，包含近30000个JS模块，400多个页面和3000多个组件，在本地进行一次完整构建需要等待15分钟，CI环境下甚至需要近半个小时，远远超出能够忍受的范围，对小程序开发体验和开发效率造成了极大的影响。虽然旧版本中的watch模式能够在很大程度上缓解我们在开发调试过程中面临的编译耗时问题，但我们在日常开发中，仍然有很多场景无法使用watch模式（首次构建/CI环境/需真机预览等），基于内存缓存的watch模式也无法长期运行。对于这个问题，我们在过去也做了很多技术尝试，如支持watch:prod模式，局部编译，多线程编译，DLL预编译等等，但是整体尝试下来这些方案要么收效有限要么适用面不足，都没能探索到一个能从根本上解决问题的方案。</p> <p>直到2020年底，<code>webpack5</code>正式发布，基于文件系统持久化缓存能力的出现，让我们看到了该问题的解决之道。由于webpack5相较于webpack4有着非常多的升级改动，而Mpx的编译构建在过去版本中也存在着各种历史遗留问题，我们花了较长的时间吃透webpack5的源码以及重新思考Mpx中存在的不合理设计。经过3个多月的开发，我们彻底重构了Mpx的核心编译构建流程，使其能够<strong>完整安全地</strong>利用webpack5持久化缓存能力进行构建提速，同时也彻底解决了旧版Mpx中存在的历史遗留问题，在去年10月完成了beta版的开发与发布，并在业务中进行了初步的落地尝试。之后又经过2个多月的业务回归测试和框架功能补全，我们在beta版的基础上又迭代修复了近30个patch版本，在业务上完成了充分的回归测试，让我们确信目前的新版本已经达到了能够release的阶段。</p> <blockquote><p>为什么不是<code>Vite</code></p> <p>聊起编译提速，可能大部分人首先想到的是Vite，诚然Vite是一个极富创造力的技术方案，但是在小程序场景下，却不一定是最合适的方案，这主要源于Vite最核心的设计利用了现代浏览器原生支持的ESM，而目前没有任何一家的小程序环境能够原生支持ESM，这就使得Vite最核心的按需编译能力无法得到发挥，而Vite使用esbuild带来的编译速度提升，在webpack环境中也可以选择esbuild-loader提供的能力来替换babel/terser，而且目前esbuild提供的编译能力成熟度还远不能和babel/terser相比，再加上Mpx的编译构建流程很大程度上依赖了webpack提供的能力，从成本和收益上考虑采用webpack5对于我们来说无疑是更好的方案。</p></blockquote> <p>以团队负责的小程序项目为例，我们来看一下Mpx2.7版本带来的编译提速效果：相较于旧版长达15分钟的构建耗时，在无缓存环境下，新版的构建耗时约为8分钟，速度提升了近1倍；而在有缓存环境下，新版构建耗时可以缩短至80s，速度提升了<strong>10倍以上</strong>！随着我们对CI流程的持久化缓存改造完成，可以确保在日常的大部分构建场景都会在有缓存的环境下进行。</p> <h2 id="分包输出能力增强"><a href="#分包输出能力增强" class="header-anchor">#</a> 分包输出能力增强</h2> <p>在Mpx2.7版本中，我们对小程序分包能力的支持进行了进一步的完善增强。</p> <h3 id="独立分包初始化模块"><a href="#独立分包初始化模块" class="header-anchor">#</a> 独立分包初始化模块</h3> <p>在过去的版本中，我们对独立分包进行过专门的构建支持，以满足独立分包资源独占的要求。不过在使用独立分包进行业务开发时，往往会面临的一个棘手问题在于初始化逻辑无处安放。这是由于独立分包没有app.js，而在小程序中，组件的js逻辑会早于页面js执行，具体的执行顺序又和组件的嵌套关系有关，因此我们无法找到一个确定的代码位置来存放独立分包的初始化逻辑。</p> <p>在Mpx2.7版本中，我们针对独立分包新增了一个全新的增强特性，让用户能够声明独立分包的初始化模块，该模块将会在独立分包启动时全局最先执行，其实现思路大致如下：在构建时为独立分包中所有的组件和页面都添加模块引用，指向用户声明的初始化模块，这样在独立分包启动时，不管哪个组件/页面的js最先执行，都能保障这个初始化模块最先执行，同时由于模块缓存的存在，后续的组件/页面执行时，该模块也不会被重复执行。</p> <p>该特性的详细使用方式可以参考我们的<a href="https://www.mpxjs.cn/guide/advance/subpackage.html#%E7%8B%AC%E7%AB%8B%E5%88%86%E5%8C%85" target="_blank" rel="noopener noreferrer">文档说明<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="分包异步化"><a href="#分包异步化" class="header-anchor">#</a> 分包异步化</h3> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html" target="_blank" rel="noopener noreferrer">分包异步化<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>是微信小程序在去年下半年提出的全新技术特性，该特性打破了传统分包只能引用自身和主包资源的规则限制，通过相关配置和声明，允许分包异步地引用其他分包内的资源，对于复杂小程序的包体积和加载性能优化具有极其重要的意义。</p> <p>在过去，受限于小程序分包资源引用规则，Mpx在编译构建时对于跨分包共用的资源有两种处理策略，其一是将其输出到主包当中，让多个分包都能够通过主包访问，这种策略下可以达到总包体积最优，但是往往会对主包体积造成过大的压力。当主包超出2m限制时，我们就需要采用第二种策略，将这部分跨分包共用的资源冗余地输出到各自的分包中，消除其对于主包体积的占用。在实际的Mpx编译构建当中，这两种策略是同时存在的，具体什么时候采用哪种策略是根据资源类型和用户配置来决定的。</p> <p>由于分包异步化技术打破了传统分包资源引用规则的限制，理想情况下我们可以做到主包不超限的同时总包无冗余，不过该技术目前也存在一些不足：一是跨平台支持度不佳，只有微信支持，不过据我们了解支付宝目前也在跟进中；二是对交互和体验会带来一些影响，同时存在业务改造成本，但这依然不妨碍该技术成为大型小程序优化包体积和加载性能的最优路径。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/c7ac0180-6914-46c6-aaed-c1d3cface8e1.jpeg" alt="分包异步化资源引用"></p> <p>我们在Mpx2.7版本中对分包异步化中最常用的<code>跨分包自定义组件引用</code>进行了完整支持，与原生小程序不同，Mpx中资源的分包归属不由源码位置决定，而是由资源引用关系决定，因此在跨分包资源引用的场景下，用户需要声明引用的资源属于哪个分包，简单使用示例如下：</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token punctuation">{</span>
-  <span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 通过root query声明组件所属的分包，与packages语法下使用root query声明package所属分包的语义保持一致</span>
-    <span class="token property">&quot;button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../subPackageA/components/button?root=subPackageA&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../subPackageB/components/full-list?root=subPackageB&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;simple-list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/simple-list&quot;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token property">&quot;componentPlaceholder&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;view&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;simple-list&quot;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>详细使用方式可参考<a href="https://www.mpxjs.cn/guide/advance/async-subpackage.html#%E5%88%86%E5%8C%85%E5%BC%82%E6%AD%A5%E5%8C%96" target="_blank" rel="noopener noreferrer">文档说明<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>对于另一项<code>跨分包JS代码引用</code>能力的使用支持，我们目前也正在探索规划中，预计能在今年Q1内完成开发支持。</p> <h2 id="单元测试支持"><a href="#单元测试支持" class="header-anchor">#</a> 单元测试支持</h2> <p>Mpx自从20年开始就对单元测试有了初步的支持，但过去的单测方案在设计上存在一些缺陷，可用性不高，业务落地困难，在Mpx2.7版本中，我们设计了一套全新的技术方案，克服了原有方案中存在的所有问题，在可用性上得到了质的飞跃，新旧方案的对比如下：</p> <p>旧方案：通过Mpx编译构建预先将完整的项目源码构建输出为原生小程序格式，再通过jest + miniprogram-simulate加载构建产出的原生小程序组件来执行测试case。该方案的优点在于编译流程统一，方案实现成本较低，缺点在于执行任何case都需要执行完整的构建流程，耗时较长；而且由于构建本身不基于jest进行，也无法使用jest提供的模块mock功能。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/31756195-2734-4300-8ab4-8b1b7a7d8c8f.jpeg" alt="旧版单测方案"></p> <p>新方案：我们fork了miniprogram-simulate仓库对其扩展了load mpx组件的能力，在资源加载的transform过程中通过mpx-jest插件将mpx组件编译为原生小程序组件，再将内容传递给miniprogram-simulate执行渲染并运行测试case。该方案中模块加载完全基于jest并能够实现组件的按需编译，完美规避旧方案中存在的问题，缺点在于编译流程基于jest api重构，与mpx基于webpack的编译流程独立，存在额外的维护成本，后续我们会将通用的编译逻辑抽离维护，在webpack和jest两侧复用。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/5486308b-b844-402e-802f-f9cc08a07259.jpeg" alt="新版单测方案"></p> <p>关于单元测试更详细的使用指南可参考<a href="https://www.mpxjs.cn/guide/tool/unit-test.html" target="_blank" rel="noopener noreferrer">文档说明<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>随着单测方案的完善，我们今年也会推动单元测试在小程序业务中全面落地，更好地保障代码质量与业务稳定。</p> <h2 id="module-rules复用"><a href="#module-rules复用" class="header-anchor">#</a> Module.rules复用</h2> <p>Mpx的单文件支持很大程度上参考了<code>vue-loader</code>的设计，在vue-loader@15版本前，对于单文件组件中各个区块(block)的loaders应用逻辑默认内置在loader当中，如需对某些区块进行自定义配置，需要向loader的options中传递额外的loader应用规则，无法复用webpack配置的<code>module.rules</code>中已经定义好的规则，这往往会导致我们需要在loader options和module.rules中维护重复的loader规则，同样的问题也存在于旧版的<code>mpx-loader</code>中。</p> <p>在vue-loader@15版本发布之后，其通过克隆用户原始的rules的方式实现了module.rules的复用，用户不再需要往loader options中传递冗余的loaders规则，本次全新Mpx2.7版本也支持了该特性，我们使用了webpack提供的<code>matchResource</code>能力实现了module.rules的复用，该方案相较于clone rules的方式实现起来更加简洁优雅。</p> <p>以上就是Mpx2.7版本的核心更新内容，目前使用脚手架工具创建的项目默认都会使用2.7版本，过往项目如需迁移升级可以查看<a href="https://www.mpxjs.cn/guide/migrate/2.7.html" target="_blank" rel="noopener noreferrer">这篇指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="即将到来的新特性"><a href="#即将到来的新特性" class="header-anchor">#</a> 即将到来的新特性</h2> <p>以上就是我们本次Mpx2.7版本带来的全部特性，后续我们也有计划撰写一系列文章对其中的技术细节进行更加深入的分析与介绍，除了上面介绍到的特性外，我们还有一系列特性处于即将发布的状态：</p> <ul><li><a href="https://github.com/didi/mpx/pull/919" target="_blank" rel="noopener noreferrer">组件维度运行时渲染方案<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/didi/mpx/pull/924" target="_blank" rel="noopener noreferrer">页面局部构建能力<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>E2E自动化测试能力</li> <li>基于Vite构建输出web应用</li> <li>跨端输出快手小程序</li> <li>@mpxjs/fetch提供接口mock能力</li></ul> <h2 id="未来规划"><a href="#未来规划" class="header-anchor">#</a> 未来规划</h2> <p>未来，我们的工作重心将重新回到运行时，重点致力于<code>composition api</code>编码规范支持和数据响应系统的升级，在保障性能和包体积方面优势的同时，带给开发者用户与时俱进的开发体验。</p> <p>在跨端方面，我们与<a href="https://github.com/didi/Hummer" target="_blank" rel="noopener noreferrer">移动端跨端框架Hummer<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>进行了合作，初步探索了Mpx基于Hummer输出为移动端原生应用的可行性，目前整体流程已经基本跑通，待后续能力逐步完善和业务充分落地后，就会在开源版本中发布。</p> <p>与此同时，<code>Mpx-cube-ui</code>小程序跨端组件库也在持续地开发完善中，目前业务落地效果良好，预计会在今年下半年正式开源。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/articles/ts-derivation.html" class="prev">
-        Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导
-      </a></span> <span class="next"><a href="/articles/2.8-release.html">
-        Mpx2.8 版本正式发布，使用组合式 API 开发小程序
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/49.cde94a79.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/2.8-release-alter.html b/docs-vuepress/.vuepress/dist/articles/2.8-release-alter.html
deleted file mode 100644
index 3d0f341bd0..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/2.8-release-alter.html
+++ /dev/null
@@ -1,174 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>通过 Mpx 使用组合式 API 进行小程序开发 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/50.42e34e52.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="通过-mpx-使用组合式-api-进行小程序开发"><a href="#通过-mpx-使用组合式-api-进行小程序开发" class="header-anchor">#</a> 通过 Mpx 使用组合式 API 进行小程序开发</h1> <p>滴滴开源小程序跨端框架 <a href="https://www.mpxjs.cn/" target="_blank" rel="noopener noreferrer">Mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 自18年立项开源以来，如今已经进入第五个年头，期间 Mpx 在有效支持了公司内外小程序业务开发的同时，也因其高性能、优体验、跨平台的特性获得了开发者用户的一致好评。</p> <p>为了不辜负开发者用户对我们的信赖，更好地支持小程序业务开发，一方面我们对 Mpx 的稳定版本进行着高频的维护迭代，快速响应处理开发者用户在框架使用过程中遇到的问题；另一方面我们持续跟进探索业内最新动态，力求带给用户更好的开发体验与更强大的开发能力。继我们在 <a href="https://mpxjs.cn/guide/migrate/2.7.html" target="_blank" rel="noopener noreferrer">2.7 版本<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>中对 Mpx 的编译系统进行 Webpack5 适配 ，完整支持持久化缓存并大幅提升编译速度后，在 <a href="https://mpxjs.cn/guide/migrate/2.8.html" target="_blank" rel="noopener noreferrer">2.8 版本<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>中，我们对 Mpx 的框架运行时也进行了重构改造，完整支持 Vue3 中的组合式 API 开发范式，让用户能够使用时下最热门的开发方式进行小程序业务开发。</p> <p>我们先来简单感受一下组合式 API 的使用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ collectionName }}: {{ book.title }}({{ readersNumber }})<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addReaders<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>addReaders<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">collectionName</span><span class="token operator">:</span> String
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> readersNumber <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-      <span class="token keyword">const</span> book <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Mpx'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-      <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Component mounted.'</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-      <span class="token comment">// 暴露给 template</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        readersNumber<span class="token punctuation">,</span>
-        book<span class="token punctuation">,</span>
-        <span class="token function">addReaders</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          readersNumber<span class="token punctuation">.</span>value<span class="token operator">++</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>可以看出和 Vue3 组合式 API 的使用是高度类似的，利用框架导出的一系列响应式 API 和 生命周期钩子函数在 <code>setup</code> 中编写业务逻辑，并将模板依赖的数据与方法作为返回值返回，与传统的选项式 API 相比，组合式 API 具备以下优势：</p> <ul><li>更好的逻辑复用，通过函数包装复用逻辑，显式引入调用，方便简洁且符合直觉，规避消除了 mixins 复用中存在的缺陷；</li> <li>更灵活的代码组织，相比于选项式 API 提前规定了代码的组织方式，组合式 API 在这方面几乎没有做任何限制与规定，更加灵活自由，在功能复杂的庞大组件中，我们能够通过组合式 API 让我们的功能代码更加内聚且有条理，不过这也会对开发者自身的代码规范意识提出更高要求；</li> <li>更好的类型推导，虽然基于 <code>this</code> 的选项式 API 通过 <code>ThisType</code> 类型体操的方式也能在一定程度上实现 TS 类型推导，但推导和实现成本较高，同时仍然无法完美覆盖一些复杂场景（如嵌套 mixins 等）；而组合式 API 以本地变量和函数为基础，本身就是类型友好的，我们在类型方面几乎不需要做什么额外的工作就能享受到完美的类型推导。</li></ul> <p>同时与 React Hooks 相比，组合式 API 中的 <code>setup</code> 函数只在初始化时单次执行，在数据响应能力的加持下大大降低了理解与使用成本，基于以上原因，我们决定为 Mpx 添加组合式 API 能力，让用户能够用组合式 API 方式进行小程序开发。</p> <h2 id="组合式-api-实现"><a href="#组合式-api-实现" class="header-anchor">#</a> 组合式 API 实现</h2> <p>从上面的简单示例中可以看出，抛开响应式 API 和生命周期注册模式的变化，组合式 API 的实现要点在于动态添加模板依赖的数据和方法，这也是我们在小程序中实现组合式 API 可能遇到的核心技术卡点。</p> <p>对于动态添加模板依赖数据，我们在过去的实践中已经充分证明了其可行性，事实上，从 Mpx 最初的版本开始，我们就充分利用了这项能力来实现我们对计算属性和 <code>dataFn</code> （类似于 Vue 使用函数定义 <code>data</code>）的支持，这项能力的关键在于存在合适的生命周期用于动态添加初始化数据，这里对于初始化数据的定义是能够影响组件树的初始渲染，举个简单的例子：存在一对父子组件 parent/child，parent 使用 <code>props</code> 向 child 传递数据，当我们在 parent 初始创建时使用 <code>setData</code> 动态添加 <code>props</code> 数据，同时 child 在初始创建时能够通过 <code>props</code> 正确获取到这部分的数据时，我们就可以将这部分动态添加的数据视作初始化数据，这是我们在小程序中实现完备数据响应支持的基础。</p> <p>幸运的是，目前业内所有主流小程序平台（微信/支付宝/百度/字节/QQ）都支持了上述能力，微信从一开始就支持在 <code>attached</code> 生命周期中调用 <code>setData</code> 函数动态添加初始化数据，在上述的父子 <code>props</code> 传递场景中，也能够在子组件的 <code>attached</code> 中正确获取这部分数据，支付宝和字节小程序一开始并不支持该能力，不过支付宝在 <code>component2</code> 组件系统重构后，字节在橙心合作项目中与我们沟通后，都成功支持了该能力。</p> <p>而对于动态返回的方法，最简单能想到的方案就是直接挂载到组件实例上，经过我们的完整测试，上述业内主流小程序平台都支持使用这种方式动态添加方法，基于以上事实，我们非常确定组合式 API 能够在小程序环境中顺利实现，下图简要展示了 Mpx 支持组合式 API 的初始化流程：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/0bxxw8bB9PJxXLeiMQ__6_composition-api-init.png" alt="composition-api-init"></p> <h3 id="生命周期钩子函数"><a href="#生命周期钩子函数" class="header-anchor">#</a> 生命周期钩子函数</h3> <p>在组合式 API 中，<code>setup</code> 函数只有在组件创建时初始化单次执行，因此需要提供一系列生命周期钩子函数来代替选项式 API 中的生命周期钩子选项，由于小程序原生只支持选项式的生命周期注册方式，我们通过<code>预注册 -&gt; 驱动</code>的方式来实现 <code>setup</code> 中函数式注册生命周期钩子的语法糖，简单来讲就是使用选项式 <code>mixins</code> 的方式提前注册所有需要的生命周期钩子，在选项式生命周期钩子执行时驱动对应在 <code>setup</code> 中使用生命周期钩子函数注册的代码逻辑执行，如下图所示：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/2nmOjxvubyk6H32yP5cFc_composition-api-hook.png" alt="composition-api-hook"></p> <p>作为跨端小程序框架，Mpx 需要兼容不同小程序平台不同的生命周期，在选项式 API 中，我们在框架中内置了一套统一的生命周期，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异，如微信小程序的 <code>attached</code> 钩子和支付宝小程序的 <code>onInit</code> 钩子，在组合式 API 中，我们沿用了同样的逻辑，设计了一套与框架内置生命周期对应的生命周期钩子函数，以相同的方式进行驱动，因此这些生命周期钩子函数天然具备了跨平台特性，下表显示了在组件 / 页面中框架生命周期与原生平台生命周期的对应关系：</p> <table><thead><tr><th style="text-align:left;">框架内置生命周期</th> <th style="text-align:left;">Hooks in <code>setup</code></th> <th style="text-align:left;">微信原生</th> <th style="text-align:left;">支付宝原生</th></tr></thead> <tbody><tr><td style="text-align:left;">BEFORECREATE</td> <td style="text-align:left;"><code>null</code></td> <td style="text-align:left;">attached（数据响应初始化前）</td> <td style="text-align:left;">onInit（数据响应初始化前）</td></tr> <tr><td style="text-align:left;">CREATED</td> <td style="text-align:left;"><code>null</code></td> <td style="text-align:left;">attached（数据响应初始化后）</td> <td style="text-align:left;">onInit（数据响应初始化后）</td></tr> <tr><td style="text-align:left;">BEFOREMOUNT</td> <td style="text-align:left;">onBeforeMount</td> <td style="text-align:left;">ready（<code>MOUNTED</code> 执行前）</td> <td style="text-align:left;">didMount（<code>MOUNTED</code> 执行前）</td></tr> <tr><td style="text-align:left;">MOUNTED</td> <td style="text-align:left;">onMounted</td> <td style="text-align:left;">ready（<code>BEFOREMOUNT</code> 执行后）</td> <td style="text-align:left;">didMount（<code>BEFOREMOUNT</code> 执行后）</td></tr> <tr><td style="text-align:left;">BEFOREUPDATE</td> <td style="text-align:left;">onBeforeUpdate</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> 执行前）</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> 执行前）</td></tr> <tr><td style="text-align:left;">UPDATED</td> <td style="text-align:left;">onUpdated</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> callback）</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> callback）</td></tr> <tr><td style="text-align:left;">BEFOREUNMOUNT</td> <td style="text-align:left;">onBeforeUnmount</td> <td style="text-align:left;">detached（数据响应销毁前）</td> <td style="text-align:left;">didUnmount（数据响应销毁前）</td></tr> <tr><td style="text-align:left;">UNMOUNTED</td> <td style="text-align:left;">onUnmounted</td> <td style="text-align:left;">detached（数据响应销毁后）</td> <td style="text-align:left;">didUnmount（数据响应销毁后）</td></tr> <tr><td style="text-align:left;">ONLOAD</td> <td style="text-align:left;">onLoad</td> <td style="text-align:left;">onLoad</td> <td style="text-align:left;">onLoad</td></tr> <tr><td style="text-align:left;">ONSHOW</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">onShow</td></tr> <tr><td style="text-align:left;">ONHIDE</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">onHide</td></tr> <tr><td style="text-align:left;">ONRESIZE</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">events.onResize</td></tr></tbody></table> <blockquote><p>同 Vue3 一样，Mpx 在组合式 API 中没有提供 <code>BEFORECREATE</code> 和 <code>CREATED</code> 对应的生命周期钩子函数，用户可以直接在 <code>setup</code> 中编写相关逻辑。</p></blockquote> <h4 id="具有副作用的页面事件"><a href="#具有副作用的页面事件" class="header-anchor">#</a> 具有副作用的页面事件</h4> <p>在小程序中，一些页面事件的注册存在副作用，即该页面事件注册与否会产生实质性的影响，比如微信中的 <code>onShareAppMessage</code> 和 <code>onPageScroll</code>，前者在不注册时会禁用当前页面的分享功能，而后者在注册时会带来视图与逻辑层之间的线程通信开销，对于这部分页面事件，我们无法通过<code>预注册 -&gt; 驱动</code>方式提供组合式 API 的注册方式，用户可以通过选项式 API 的方式来注册使用，通过 <code>this</code> 访问组合式 API <code>setup</code> 函数的返回。</p> <p>然而这种使用方式显然不够优雅，我们考虑是否可以通过一些非常规的方式提供这类副作用页面事件的组合式 API 注册支持，例如，借助编译手段。我们在运行时提供了副作用页面事件的注册函数，并在编译时通过 <code>babel</code> 插件的方式解析识别到当前页面中存在这些特殊注册函数的调用时，通过框架已有的<code>编译 -&gt; 运行时注入</code>的方式将事件驱动逻辑添加到当前页面当中，以提供相对优雅的副作用页面事件在组合式 API 中的注册方式，同时不产生非预期的副作用影响，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onShareAppMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-
-    <span class="token function">onShareAppMessage</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'页面分享'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      count
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>目前我们通过这种方式支持的页面事件如下：</p> <table><thead><tr><th style="text-align:left;">页面事件</th> <th style="text-align:left;">Hooks in <code>setup</code></th> <th style="text-align:left;">平台支持</th></tr></thead> <tbody><tr><td style="text-align:left;">onPullDownRefresh</td> <td style="text-align:left;">onPullDownRefresh</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onReachBottom</td> <td style="text-align:left;">onReachBottom</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onPageScroll</td> <td style="text-align:left;">onPageScroll</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onShareAppMessage</td> <td style="text-align:left;">onShareAppMessage</td> <td style="text-align:left;">全小程序平台</td></tr> <tr><td style="text-align:left;">onTabItemTap</td> <td style="text-align:left;">onTabItemTap</td> <td style="text-align:left;">微信/支付宝/百度/QQ</td></tr> <tr><td style="text-align:left;">onAddToFavorites</td> <td style="text-align:left;">onAddToFavorites</td> <td style="text-align:left;">微信 / QQ</td></tr> <tr><td style="text-align:left;">onShareTimeline</td> <td style="text-align:left;">onShareTimeline</td> <td style="text-align:left;">微信</td></tr> <tr><td style="text-align:left;">onSaveExitState</td> <td style="text-align:left;">onSaveExitState</td> <td style="text-align:left;">微信</td></tr></tbody></table> <blockquote><p><strong>特别注意</strong>，由于静态编译分析实现方式的限制，这类页面事件的组合式 API 使用需要满足页面事件注册函数（如<code>onShareAppMessage</code>）的调用和 <code>createPage</code> 的调用位于同一个 js 文件当中。</p></blockquote> <p>关于生命周期钩子函数的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="script-setup"><a href="#script-setup" class="header-anchor">#</a> <code>&lt;script setup&gt;</code></h3> <p>同 Vue3 一样，我们在 <code>.mpx</code> 单文件组件 / 页面中实现了 <code>&lt;script setup&gt;</code> 的组合式 API 编译语法糖，相较于常规的写法，<code>&lt;script setup&gt;</code> 具备以下优势：</p> <ul><li>更少的样板内容，更简洁的代码</li> <li>能够使用纯 TypeScript 声明 props 类型</li> <li>更好的 IDE 类型推导性能</li></ul> <p>简单使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
-
-  <span class="token keyword">function</span> <span class="token function">log</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>msg: {{msg}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">ontap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>log<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>可以看到使用方式与 Vue3 基本一致，不过由于 Mpx 的组合式 API 设计实现与 Vue3 存在差异，对应 <code>&lt;script setup&gt;</code> 也与 Vue3 中存在一些差异：</p> <ul><li>不支持 <code>import</code> 快捷注册组件</li> <li>没有 <code>defineEmits()</code> 编译宏</li> <li>没有 <code>useSlots()</code> 和 <code>useAttrs()</code> 运行时函数</li> <li>以编译宏的形式提供了 <code>useContext()</code>，获取 <code>setup</code> 函数的第二个参数 <code>context</code></li> <li><code>defineExpose()</code> 编译宏的作用与 Vue3 中有所差别，能够限定模板中能访问的变量范围</li></ul> <blockquote><p><strong>特别注意</strong>，受小程序底层技术限制，我们在 Mpx 的实现中无法像 Vue3 那样将模板编译的渲染函数和 <code>&lt;script setup&gt;</code> 放置到同一作用域下进行变量访问，而是通过静态编译分析提取出 <code>&lt;script setup&gt;</code> 的顶层作用域变量，再以上文中提到的动态添加数据与方法的方式将其设置到模板当中，如果 <code>&lt;script setup&gt;</code> 中声明了较多顶层作用域变量，它们并不一定都会被模板访问，就会带来无效的性能开销，因此我们强烈建议使用 <code>defineExpose()</code> 限定模板中能访问的变量范围，你可以把它等同于 <code>setup</code> 函数中的 <code>return</code>。</p></blockquote> <p>关于 <code>&lt;script setup&gt;</code> 的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="组合式-api-与-vue3-中的差异"><a href="#组合式-api-与-vue3-中的差异" class="header-anchor">#</a> 组合式 API 与 Vue3 中的差异</h3> <p>我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：</p> <ul><li><code>setup</code> 的 <code>context</code> 参数不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#context" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><code>setup</code> 不支持返回<strong>渲染函数</strong></li> <li><code>setup</code> 不能是异步函数</li> <li><code>&lt;script setup&gt;</code> 提供的宏方法不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><code>&lt;script setup&gt;</code> 不支持 <code>import</code> 快捷注册组件</li> <li>支持的生命周期钩子不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>模板引用的方式不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#template-ref" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>关于组合式 API 的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/composition-api.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="响应式-api-实现"><a href="#响应式-api-实现" class="header-anchor">#</a> 响应式 API 实现</h2> <p>组合式 API 的正常工作离不开响应式 API 的支持，下面我们来聊聊 Mpx 中响应式 API 的设计实现。我们知道 Vue3 中响应式 API 基于 <code>proxy</code> 进行了重构实现，但是目前 <code>proxy</code> 的浏览器兼容占比仍然无法达到我们对于线上可用性的要求，因此在 Mpx 中，我们仍然基于 <code>Object.defineProperty</code> 进行核心数据响应能力的实现，同时借鉴了 Vue3 中优秀的代码设计与实现，如 <code>reactiveEffect</code> 和 <code>effectScope</code> 等，尽可能实现与 Vue3 中响应式 API 能力对齐。</p> <p>说到这里，很多同学可能会想到 <code>@vue/composition-api</code> 这个库，该库提供的关键能力正是基于 Vue2 的数据响应系统模拟实现 Vue3 中的响应式 API，我们在前期也对 <code>@vue/composition-api</code> 在 Mpx 中的复用进行了非常有价值的探索尝试。不过最终我们还是决定在 Mpx 的运行时框架中进行独立实现，原因主要在于：<code>@vue/composition-api</code> 是作为一个 Vue2 插件存在，无法直接侵入 Vue2 源码，导致部分能力无法实现或会带来额外的性能开销，例如 <code>flush: 'post'</code> 和 <code>ref</code> 自动解包等。我们也看到在最新的 Vue2.7 版本中，也是在运行时框架里重新实现了这部分内容，以规避上述问题。</p> <p>下图展示了 Mpx 中响应式 API 核心模块依赖关系：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/4ySdEqTRhc_DRWWCJWrhJ_composition-api-reactive.png" alt="composition-api-reactive"></p> <h3 id="数据响应限制带来的差异"><a href="#数据响应限制带来的差异" class="header-anchor">#</a> 数据响应限制带来的差异</h3> <p>由于 <code>Object.defineProperty</code> 的能力限制，Mpx 存在和 Vue2 一致的数据响应限制，无法感知到对象 property 的添加和删除以及数组的索引赋值，与 Vue2 一致，我们暴露了 <code>set</code> 和 <code>del</code> API 来让用户显式地进行相关操作。除此之外，由于使用方式发生了变化，我们在使用 <code>reactive</code> API 创建响应式数据时，还会遇到新的限制，我们来看一下代码示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-
-<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [0,1,2,3]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发 watchEffect</span>
-
-state<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发 watchEffect</span>
-</code></pre></div><p>可以看出，即使我们使用了 <code>set</code> API 和数组原型方法对数组进行修改，我们仍然无法监听到数据变化。</p> <blockquote><p>相同的限制在使用 <code>Object.defineProperty</code> 的 Vue2.7 中也同样存在。</p></blockquote> <p>为什么会存在这个限制呢？原因在于：基于 <code>Object.defineProperty</code> 实现的数据响应系统中，我们会对对象的每个已有属性创建了一个 <code>Dep</code> 对象，在对该属性进行 <code>get</code> 访问时通过这个对象将其与依赖它的观察者 <code>ReactiveEffect</code> 关联起来，并在 <code>set</code> 操作时触发关联 <code>ReactiveEffect</code> 的更新，这是我们大家都知道的数据响应的基本原理。但是对于新增/删除对象属性和修改数组的场景，我们无法事先定义当前不存在属性的 <code>get/set</code> (当然这在 <code>proxy</code> 当中是可行的)，因此我们会把对象或者数组本身作为一个数据依赖创建 <code>Dep</code> 对象，<strong>通过父级访问</strong>该数据时定义的 <code>get/set</code> 将其关联到对应的 <code>ReactiveEffect</code>，并在对数据进行新增/删除属性或数组操作时通过数据本身持有的 <code>Dep</code> 对象触发关联 <code>ReactiveEffect</code> 的更新，如下图所示：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/XkI9cQBsLy_7np-T3rt56_composition-api-reactive2.png" alt="数据响应原理"></p> <p>需要注意的是，<strong>通过父级访问</strong>是建立 <code>Dep</code> 与 <code>ReactiveEffect</code> 关联关系的先决条件，在选项式 API 中，我们访问组件的响应式数据都需要通过 <code>this</code> 进行访问，相当于这些数据都存在 <code>this</code> 这个必要的<strong>父级</strong>，因此我们在使用 <code>$set/$delete</code> 进行对对象进行新增/删除属性或对数组进行修改时都能得到符合预期的结果，唯一的限制在于不能新增/删除根级数据属性，原因就在于 <code>this</code> 不存在访问它的父级。</p> <p>但是在组合式 API 中，我们不需要通过 <code>this</code> 访问响应式数据，因此通过 <code>reactive()</code> 创建的响应式数据本身就是根级数据，我们自然无法通过上述方式感知到根级数据自身的变化（在 Vue3 中，基于 <code>proxy</code> 提供的强大能力响应式系统能够精确地感知到数据属性，甚至是当前不存在属性的访问与修改，不需要为数据自身建立 <code>Dep</code> 对象，自然也不存在相关问题）。</p> <p>在这种情况下，我们就需要用 <code>ref()</code> 创建响应式数据，因为 <code>ref</code> 创建了一个包装对象，我们永远需要通过 <code>.value</code> 来访问其持有的数据（不管是显式访问还是隐式自动解包），这样就能保证 <code>ref</code> 数据自身的变化能够被响应式系统感知，因此也不会遇到上面描述的问题，如下所示：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-
-<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [0,1,2,3]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// [0,3,2,3]</span>
-
-state<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// [0,3,2,3,4]</span>
-</code></pre></div><h3 id="响应式-api-与-vue3-中的区别"><a href="#响应式-api-与-vue3-中的区别" class="header-anchor">#</a> 响应式 API 与 Vue3 中的区别</h3> <p>我们来总结一下 Mpx 中响应式 API 与 Vue3 中的区别：</p> <ul><li>不支持 <code>raw</code> 相关 API（<code>markRaw</code> 除外，我们提供了该 API 用于跳过部分数据的响应式转换）</li> <li>不支持 <code>readonly</code> 相关 API</li> <li>不支持 <code>watchEffect</code>、<code>watch</code>、<code>computed</code> 的调试选项</li> <li>不支持对 <code>map</code>、<code>set</code> 等集合类型进行响应式转换</li> <li>受到 <code>Object.defineProperty</code> 实现带来的数据响应限制影响</li></ul> <p>关于响应式 API 的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/reactive-api.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="生态周边适配"><a href="#生态周边适配" class="header-anchor">#</a> 生态周边适配</h2> <p>除了 Mpx 运行时核心提供了组合式 API 支持外，我们对 Mpx 的周边生态能力也都进行了组合式 API 适配支持，包括 <code>store</code>、<code>i18n</code>、<code>fetch</code> 等。</p> <h3 id="pinia-store-支持"><a href="#pinia-store-支持" class="header-anchor">#</a> Pinia store 支持</h3> <p>Pinia 是基于组合式 API 设计的全新数据管理方案，目前已经取代 Vuex 成为 Vue3 官方推荐的 store，我们在研究了 pinia 的设计实现后，对其简练优雅的设计思想及其与组合式 API 的高度适配非常满意（特别是在使用 <code>setup</code> 函数创建 store 时，使用心智与编写组件完全一致，可以将其视作是没有视图的组件）。因此我们 fork 了 pinia 的源码仓库，基于 Mpx 提供的数据响应能力对其进行了适配改造，使其在 Mpx 环境下也能正常运行，目前相关代码维护在 <code>@mpxjs/pinia</code> 中，在组合式 API 中的简单使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> computed<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
-
-<span class="token comment">// 使用组合式 API 创建 pinia store 的使用心智与 setup 函数完全一致，强烈推荐</span>
-<span class="token keyword">const</span> useSetupStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'setup'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> doubleCount <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
-
-  <span class="token keyword">function</span> <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    count<span class="token punctuation">.</span>value<span class="token operator">++</span>
-  <span class="token punctuation">}</span>
-
-  <span class="token keyword">return</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> doubleCount<span class="token punctuation">,</span> increment <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useSetupStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token comment">// store 同 props 类似是一个 reactive 对象，解构数据需使用 toRefs 以保持数据响应性</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> doubleCount <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>store<span class="token punctuation">)</span>
-    <span class="token comment">// 方法可以直接解构</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> increment <span class="token punctuation">}</span> <span class="token operator">=</span> store
-  
-    <span class="token keyword">return</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> doubleCount<span class="token punctuation">,</span> increment <span class="token punctuation">}</span>
-    <span class="token comment">//</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>Mpx 中通过 <code>createStore</code> 创建的类 Vuex store 在组合式 API 中仍然可以使用，我们可以在 <code>setup</code> 函数中引用 store 实例进行<a href="https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api" target="_blank" rel="noopener noreferrer">数据读取与方法调用<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，不过整体使用体验与 pinia store 存在较大差距，我们还是推荐在组合式 API 开发中优先使用 pinia store 作为数据管理方案。</p> <h3 id="i18n-支持"><a href="#i18n-支持" class="header-anchor">#</a> I18n 支持</h3> <p>传统选项式 API 中，我们使用 <code>this.$t</code> 方法在组件内调用翻译函数，但在组合式 API 中我们无法访问 <code>this</code>，为此我们参考了 Vue I18n 最新的 9.x 版本，该版本针对 Vue3 及组合式 API 进行了重构适配，提供了全新的 <code>useI18n</code> API，简单使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('message.hello')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeLocale<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>change locale<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// useI18n 不传参数时指向全局 i18n 对象，也可以传递 locale 和 messages 配置创建局部 i18n 对象</span>
-      <span class="token keyword">const</span> <span class="token punctuation">{</span> t<span class="token punctuation">,</span> locale <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-
-      <span class="token keyword">function</span> <span class="token function">changeLocale</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        locale<span class="token punctuation">.</span>value <span class="token operator">=</span> locale<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">'zh-CN'</span> <span class="token operator">?</span> <span class="token string">'en-US'</span> <span class="token operator">:</span> <span class="token string">'zh-CN'</span>
-      <span class="token punctuation">}</span>
-      <span class="token comment">// 返回的翻译方法名必须为 t，不能进行重命名</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span> t<span class="token punctuation">,</span> changeLocale <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><blockquote><p>上面示例代码看上去像是我们在模板上直接调用 setup() 返回的 t 翻译方法，但是熟悉小程序开发的同学都知道在小程序架构下这是不可能的，示例中的写法其实由框架通过编译 + 运行时手段实现的语法糖，我们会在模板编译时定向扫描 t/te/tm 等 i18n 方法，将其转换为计算属性注入到运行时当中，这就意味着如果我们对翻译方法进行重命名，模板编译时无法识别出 i18n 方法调用，自然也就无法正常运行。</p></blockquote> <p>Mpx 中 i18n 提供了两种实现模式，分别是 wxs 和 computed，可以使用编译选项中的 <code>i18n.isComputed</code> 进行切换，两种方式各有优劣，其中：</p> <ul><li>wxs 模式的优势在于逻辑层和视图层独立维护语言集，无额外运行时性能开销，且使用没有任何限制；劣势同样源于语言集同时存在于逻辑层（js）和视图层（wxs）当中，这部分的包体积占用翻倍；</li> <li>computed 模式的优势在于语言集只存在于逻辑层中，无额外包体积占用，且可以通过动态添加语言集的方式进一步减少包体积占用；劣势则是会产生额外的运行时性能开销，且使用上存在限制，模板调用时无法直接访问 <code>wx:for</code> 中的 <code>item</code> 和 <code>index</code>。</li></ul> <p>在组合式 API 中模板上使用 <code>useI18n()</code> 返回的翻译函数 <code>t/te/tm</code> 时，为了完整实现 <code>useI18n</code> API的功能，会强制使用 computed 模式进行实现，这也意味着该用法会受到 computed 模式使用限制的影响。不过当你不需要使用 <code>useI18n</code> 接受 <code>messages</code> 参数创建局部语言集作用域功能时，你也完全可以在模板中继续使用原有的 <code>$t/$tc/$te/$tm</code> 方法，这些方法受编译选项 <code>i18n.isComputed</code> 的影响，同时指向全局语言集作用域。</p> <p>更多关于生态周边的组合式 API 使用指南可以点击下方链接查看详情：</p> <ul><li><a href="https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api" target="_blank" rel="noopener noreferrer">store<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://mpxjs.cn/guide/advance/i18n.html#composition-api-usage" target="_blank" rel="noopener noreferrer">i18n<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://mpxjs.cn/guide/extend/fetch.html#composition-api-usage" target="_blank" rel="noopener noreferrer">fetch<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="输出-web-适配"><a href="#输出-web-适配" class="header-anchor">#</a> 输出 web 适配</h2> <p>跨端输出 web 作为 Mpx 的一大核心特性，在业务中存在广泛使用，同时也是我们设计实现任何框架新特性需要优先考虑的事项。在本次组合式 API 支持中，我们从设计之初就考虑了跨端输出 web 的适配支持，保障使用 Mpx 组合式 API 开发的业务代码都能在 web 环境中正常运行。</p> <p>我们输出 web 的整体技术方向在于尽可能复用 Vue 已有的生态能力，为了实现这个目标，我们需要提供尽可能与 Vue 保持一致的 API 设计，以降低抹平适配成本。在输出 web 时，核心组合式 API 基于 Vue2.7 版本中的已有能力进行适配提供，简单举个例子：对于 <code>import { ref } from 'mpxjs/core'</code> 这行语句，在小程序中会指向 Mpx 内部维护的 <code>ref</code> 实现，而在输出 web 时会指向 Vue 中维护的 <code>ref</code> 实现，两者的实现虽然不仅相同，但只要保障对外函数签名一致，对于开发者用户来说就无感知。</p> <p>我们借助了 Mpx 强大的条件编译能力进行上述实现，对运行时导出根据输出平台进行重定向，这样还能保障跨端输出产物干净简洁，仅包含当前输出环境下必要的逻辑，如下图所示：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/E0FojaPKOxZOa5h5OEPQk_composition-api-web.png" alt="composition-api-web"></p> <p>同理，我们也采用了类似的方式实现了组合式 API 周边能力对于输出 web 的适配支持，如pinia store 使用 pinia 原始版本进行适配实现，而 i18n 能力则是使用 vue-i18n@8.x + vue-i18n-bridge 进行适配实现。</p> <h2 id="性能表现"><a href="#性能表现" class="header-anchor">#</a> 性能表现</h2> <p>性能是 Mpx 一直以来的核心关注点，我们对组合式 API 的最终实现版本进行了一系列性能评估测试，我们使用组合式 API 版本对业务中的评价组件进行了重构，评价组件属于我们业务中交互及功能相对比较复杂的组件，源码行数约 1000 行，组件数据 27 项，组件方法 18 个，我们在测试项目中对选项式 API 和组合式 API 两个版本实现的组件进行了一系列测试。</p> <h3 id="组件初始化耗时"><a href="#组件初始化耗时" class="header-anchor">#</a> 组件初始化耗时</h3> <p>由于组合式 API 改变了原有的组件初始化流程，我们对组件的初始化耗时进行了重点测试，测试口径如下：</p> <ul><li>耗时计算以挂载组件为起点，以组件 <code>ready</code> 执行为终点</li> <li>测试结果为10次手工测试排除最大最小值后求均值</li> <li>IOS 测试机型为 iPhone 13 pro max，安卓测试机型为 OPPO R9</li></ul> <p>结果显示两个版本的组件初始化耗时大抵持平，不分优劣。</p> <table><thead><tr><th></th> <th>IOS</th> <th>安卓</th></tr></thead> <tbody><tr><td>选项式 API</td> <td>42.5ms</td> <td>366.6ms</td></tr> <tr><td>组合式 API</td> <td>42.4ms</td> <td>370.1ms</td></tr></tbody></table> <h3 id="组件-js-体积"><a href="#组件-js-体积" class="header-anchor">#</a> 组件 JS 体积</h3> <p>在构建产物体积方面，由于组合式 API 的写法对于 JS 代码压缩更加有利，同样的逻辑实现下，组合式 API 版本的组件构建压缩后 JS 体积略胜一筹。</p> <table><thead><tr><th></th> <th>组件 JS 体积</th></tr></thead> <tbody><tr><td>选项式 API</td> <td>15.67KB</td></tr> <tr><td>组合式 API</td> <td>13.60KB</td></tr></tbody></table> <h3 id="框架运行时体积"><a href="#框架运行时体积" class="header-anchor">#</a> 框架运行时体积</h3> <p>在 Mpx2.8 版本中，我们在框架运行时中新增了组合式 API 相关实现，不过通过优化运行时导出，使其对 tree shaking 更加友好，我们的框架运行时体积在实际构建产物中没有产生太大增长。</p> <table><thead><tr><th></th> <th>框架运行时体积</th></tr></thead> <tbody><tr><td>选项式 API</td> <td>51.66KB</td></tr> <tr><td>组合式 API</td> <td>57.47KB</td></tr></tbody></table> <p>综上所述，组合式 API 版本的运行时性能与选项式 API 大抵持平，在包体积占用方面，新版框架运行时体积占用略有提升，不过由于组合式 API 开发模式对代码压缩更友好，加上组合式 API 更易进行逻辑复用的特点，我们预计在实际业务项目中，组合式 API 的包体积占用会更小。</p> <h2 id="破坏性改变"><a href="#破坏性改变" class="header-anchor">#</a> 破坏性改变</h2> <p>Mpx 组合式 API 版本完全兼容原有的选项式 API 开发方式，不过我们在运行时重构过程中依然带来了少量的破坏性改变，详情如下：</p> <ul><li>框架过往提供的组件增强生命周期 <code>pageShow/pageHide</code> 与微信原生提供的 <code>pageLifetimes.show/hide</code> 完全对齐，不再提供组件初始挂载时必定执行 <code>pageShow</code> 的保障（因为组件可能在后台页面进行挂载），相关初始化逻辑一定不要放置在 <code>pageShow</code> 当中；</li> <li>取消了框架过去提供的基于内部生命周期实现的非标准增强生命周期，如 <code>beforeCreate/onBeforeCreate</code> 等，直接将内部生命周期变量导出提供给用户使用，详情查看<a href="https://mpxjs.cn/api/global-api.html#built-in-lifecycle-variable" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>;</li> <li>为了优化 tree shaking，作为框架运行时 <code>default export</code> 的 <code>Mpx</code> 对象不再挂载 <code>createComponent/createStore</code> 等运行时方法，一律通过 <code>named export</code> 提供，<code>Mpx</code> 对象上仅保留 <code>set/use</code> 等全局 API，详情查看<a href="https://mpxjs.cn/api/global-api.html#global-mpx" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>；</li> <li>使用 I18n 能力时，为了与新版 vue-i18n 保持对齐，<code>this.$i18n</code> 对象指向全局作用域，如需创建局部作用域需要使用组合式 API <code>useI18n</code> 的方式进行创建。</li> <li><code>watch</code> API 不再接受第二个参数为带有 <code>handler</code> 属性的对象形式（该参数形式只应存在于 <code>watch</code> option 中），第二个参数必须为回调函数，与 <a href="https://vuejs.org/api/reactivity-core.html#watch" target="_blank" rel="noopener noreferrer">Vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 对齐。</li></ul> <p>更详细的迁移指南请点击查看<a href="https://mpxjs.cn/guide/migrate/2.8.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="未来规划"><a href="#未来规划" class="header-anchor">#</a> 未来规划</h2> <p>目前 Mpx2.8 版本已经在以滴滴出行小程序和花小猪小程序为代表的集团小程序业务中稳定全面落地，并在新的业务迭代中大范围使用了组合式 API，使用反馈良好，在社区内也产出了多个成功案例。</p> <p>在完成持久化构建缓存和组合式 API 两个重大技术升级后，我们未来的技术规划如下：</p> <ul><li>组合式 API 工具库 @mpxjs/use</li> <li>内置原子类支持</li> <li>输出 web 支持 SSR</li> <li>输出 web 支持使用 Vite 构建</li> <li>跨端输出 Hummer 合入主干正式 release</li> <li>优化运行时 render 函数，降低包体积占用</li> <li>跨端库 @mpxjs/cube-ui 开源</li></ul> <p>最后，再次感谢所有参与 Mpx 组合式 API 技术建设的同学们，也欢迎社区同学一同加入 Mpx 项目开源共建。</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/50.42e34e52.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/2.8-release.html b/docs-vuepress/.vuepress/dist/articles/2.8-release.html
deleted file mode 100644
index 6bc81b2c74..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/2.8-release.html
+++ /dev/null
@@ -1,182 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx2.8 版本正式发布，使用组合式 API 开发小程序 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/51.90dfa84e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" aria-current="page" class="active sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#组合式-api-实现" class="sidebar-link">组合式 API 实现</a></li><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#响应式-api-实现" class="sidebar-link">响应式 API 实现</a></li><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#生态周边适配" class="sidebar-link">生态周边适配</a></li><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#输出-web-适配" class="sidebar-link">输出 web 适配</a></li><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#性能表现" class="sidebar-link">性能表现</a></li><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#破坏性改变" class="sidebar-link">破坏性改变</a></li><li class="sidebar-sub-header"><a href="/articles/2.8-release.html#未来规划" class="sidebar-link">未来规划</a></li></ul></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx2-8-版本正式发布-使用组合式-api-开发小程序"><a href="#mpx2-8-版本正式发布-使用组合式-api-开发小程序" class="header-anchor">#</a> Mpx2.8 版本正式发布，使用组合式 API 开发小程序</h1> <blockquote><p>作者：<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">hiyuki<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p>小程序跨端开发框架 <a href="https://www.mpxjs.cn/" target="_blank" rel="noopener noreferrer">Mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 自18年立项开源以来，如今已经走过了第四个年头，其高性能、优体验、跨平台的特性收获了公司内外开发者用户的一致好评。</p> <p>为了不辜负开发者用户对我们的信赖，更好地支持集团小程序业务开发，一方面我们对 Mpx 的稳定版本进行着高频的维护迭代，快速响应处理集团内外开发者用户在框架开发使用过程中遇到的问题；另一方面我们持续跟进探索业内最新动态，力争将更新更好的开发能力与体验带给小程序开发者用户。继年初我们在 <a href="https://mpxjs.cn/guide/migrate/2.7.html" target="_blank" rel="noopener noreferrer">2.7 版本<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>中对 Mpx 的编译系统进行重构适配 Webpack5，基于持久化缓存大幅提升编译速度后，在最新的 <a href="https://mpxjs.cn/guide/migrate/2.8.html" target="_blank" rel="noopener noreferrer">2.8 版本<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>中，我们对 Mpx 的运行时框架也进行了大量重构改造工作，完整支持了 Vue3 提出的组合式 API 开发范式，让用户能够使用当下最热门的开发方式进行小程序开发，我们先来简单感受一下组合式 API 的使用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ collectionName }}: {{ book.title }}({{ readersNumber }})<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addReaders<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>addReaders<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">collectionName</span><span class="token operator">:</span> String
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> readersNumber <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-      <span class="token keyword">const</span> book <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Mpx'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-      <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Component mounted.'</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-      <span class="token comment">// 暴露给 template</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        readersNumber<span class="token punctuation">,</span>
-        book<span class="token punctuation">,</span>
-        <span class="token function">addReaders</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          readersNumber<span class="token punctuation">.</span>value<span class="token operator">++</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>可以看出和 Vue3 组合式 API 的使用是高度类似的，利用框架导出的一系列响应式 API 和 生命周期钩子函数在 <code>setup</code> 中编写业务逻辑，并将模板依赖的数据与方法作为返回值返回，与传统的选项式 API 相比，组合式 API 具备以下优势：</p> <ul><li>更好的逻辑复用，通过函数包装复用逻辑，显式引入调用，方便简洁且符合直觉，规避消除了 mixins 复用中存在的缺陷；</li> <li>更灵活的代码组织，相比于选项式 API 提前规定了代码的组织方式，组合式 API 在这方面几乎没有做任何限制与规定，更加灵活自由，在功能复杂的庞大组件中，我们能够通过组合式 API 让我们的功能代码更加内聚且有条理，不过这也会对开发者自身的代码规范意识提出更高要求；</li> <li>更好的类型推导，虽然基于 <code>this</code> 的选项式 API 通过 <code>ThisType</code> 类型体操的方式也能在一定程度上实现 TS 类型推导，但推导和实现成本较高，同时仍然无法完美覆盖一些复杂场景（如嵌套 mixins 等）；而组合式 API 以本地变量和函数为基础，本身就是类型友好的，我们在类型方面几乎不需要做什么额外的工作就能享受到完美的类型推导。</li></ul> <p>同时与 React Hooks 相比，组合式 API 中的 <code>setup</code> 函数只在初始化时单次执行，在数据响应能力的加持下大大降低了理解与使用成本，基于以上原因，我们决定为 Mpx 添加组合式 API 能力，让用户能够用组合式 API 方式进行小程序开发。</p> <h2 id="组合式-api-实现"><a href="#组合式-api-实现" class="header-anchor">#</a> 组合式 API 实现</h2> <p>从上面的简单示例中可以看出，抛开响应式 API 和生命周期注册模式的变化，组合式 API 的实现要点在于动态添加模板依赖的数据和方法，这也是我们在小程序中实现组合式 API 可能遇到的核心技术卡点。</p> <p>对于动态添加模板依赖数据，我们在过去的实践中已经充分证明了其可行性，事实上，从 Mpx 最初的版本开始，我们就充分利用了这项能力来实现我们对计算属性和 <code>dataFn</code> （类似于 Vue 使用函数定义 <code>data</code>）的支持，这项能力的关键在于存在合适的生命周期用于动态添加初始化数据，这里对于初始化数据的定义是能够影响组件树的初始渲染，举个简单的例子：存在一对父子组件 parent/child，parent 使用 <code>props</code> 向 child 传递数据，当我们在 parent 初始创建时使用 <code>setData</code> 动态添加 <code>props</code> 数据，同时 child 在初始创建时能够通过 <code>props</code> 正确获取到这部分的数据时，我们就可以将这部分动态添加的数据视作初始化数据，这是我们在小程序中实现完备数据响应支持的基础。</p> <p>幸运的是，目前业内所有主流小程序平台（微信/支付宝/百度/字节/QQ）都支持了上述能力，微信从一开始就支持在 <code>attached</code> 生命周期中调用 <code>setData</code> 函数动态添加初始化数据，在上述的父子 <code>props</code> 传递场景中，也能够在子组件的 <code>attached</code> 中正确获取这部分数据，支付宝和字节小程序一开始并不支持该能力，不过支付宝在 <code>component2</code> 组件系统重构后，字节在橙心合作项目中与我们沟通后，都成功支持了该能力。</p> <p>而对于动态返回的方法，最简单能想到的方案就是直接挂载到组件实例上，经过我们的完整测试，上述业内主流小程序平台都支持使用这种方式动态添加方法，基于以上事实，我们非常确定组合式 API 能够在小程序环境中顺利实现，下图简要展示了 Mpx 支持组合式 API 的初始化流程：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/0bxxw8bB9PJxXLeiMQ__6_composition-api-init.png" alt="composition-api-init"></p> <h3 id="生命周期钩子函数"><a href="#生命周期钩子函数" class="header-anchor">#</a> 生命周期钩子函数</h3> <p>在组合式 API 中，<code>setup</code> 函数只有在组件创建时初始化单次执行，因此需要提供一系列生命周期钩子函数来代替选项式 API 中的生命周期钩子选项，由于小程序原生只支持选项式的生命周期注册方式，我们通过<code>预注册 -&gt; 驱动</code>的方式来实现 <code>setup</code> 中函数式注册生命周期钩子的语法糖，简单来讲就是使用选项式 <code>mixins</code> 的方式提前注册所有需要的生命周期钩子，在选项式生命周期钩子执行时驱动对应在 <code>setup</code> 中使用生命周期钩子函数注册的代码逻辑执行，如下图所示：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/2nmOjxvubyk6H32yP5cFc_composition-api-hook.png" alt="composition-api-hook"></p> <p>作为跨端小程序框架，Mpx 需要兼容不同小程序平台不同的生命周期，在选项式 API 中，我们在框架中内置了一套统一的生命周期，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异，如微信小程序的 <code>attached</code> 钩子和支付宝小程序的 <code>onInit</code> 钩子，在组合式 API 中，我们沿用了同样的逻辑，设计了一套与框架内置生命周期对应的生命周期钩子函数，以相同的方式进行驱动，因此这些生命周期钩子函数天然具备了跨平台特性，下表显示了在组件 / 页面中框架生命周期与原生平台生命周期的对应关系：</p> <table><thead><tr><th style="text-align:left;">框架内置生命周期</th> <th style="text-align:left;">Hooks in <code>setup</code></th> <th style="text-align:left;">微信原生</th> <th style="text-align:left;">支付宝原生</th></tr></thead> <tbody><tr><td style="text-align:left;">BEFORECREATE</td> <td style="text-align:left;"><code>null</code></td> <td style="text-align:left;">attached（数据响应初始化前）</td> <td style="text-align:left;">onInit（数据响应初始化前）</td></tr> <tr><td style="text-align:left;">CREATED</td> <td style="text-align:left;"><code>null</code></td> <td style="text-align:left;">attached（数据响应初始化后）</td> <td style="text-align:left;">onInit（数据响应初始化后）</td></tr> <tr><td style="text-align:left;">BEFOREMOUNT</td> <td style="text-align:left;">onBeforeMount</td> <td style="text-align:left;">ready（<code>MOUNTED</code> 执行前）</td> <td style="text-align:left;">didMount（<code>MOUNTED</code> 执行前）</td></tr> <tr><td style="text-align:left;">MOUNTED</td> <td style="text-align:left;">onMounted</td> <td style="text-align:left;">ready（<code>BEFOREMOUNT</code> 执行后）</td> <td style="text-align:left;">didMount（<code>BEFOREMOUNT</code> 执行后）</td></tr> <tr><td style="text-align:left;">BEFOREUPDATE</td> <td style="text-align:left;">onBeforeUpdate</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> 执行前）</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> 执行前）</td></tr> <tr><td style="text-align:left;">UPDATED</td> <td style="text-align:left;">onUpdated</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> callback）</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> callback）</td></tr> <tr><td style="text-align:left;">BEFOREUNMOUNT</td> <td style="text-align:left;">onBeforeUnmount</td> <td style="text-align:left;">detached（数据响应销毁前）</td> <td style="text-align:left;">didUnmount（数据响应销毁前）</td></tr> <tr><td style="text-align:left;">UNMOUNTED</td> <td style="text-align:left;">onUnmounted</td> <td style="text-align:left;">detached（数据响应销毁后）</td> <td style="text-align:left;">didUnmount（数据响应销毁后）</td></tr> <tr><td style="text-align:left;">ONLOAD</td> <td style="text-align:left;">onLoad</td> <td style="text-align:left;">onLoad</td> <td style="text-align:left;">onLoad</td></tr> <tr><td style="text-align:left;">ONSHOW</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">onShow</td></tr> <tr><td style="text-align:left;">ONHIDE</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">onHide</td></tr> <tr><td style="text-align:left;">ONRESIZE</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">events.onResize</td></tr></tbody></table> <blockquote><p>同 Vue3 一样，Mpx 在组合式 API 中没有提供 <code>BEFORECREATE</code> 和 <code>CREATED</code> 对应的生命周期钩子函数，用户可以直接在 <code>setup</code> 中编写相关逻辑。</p></blockquote> <h4 id="具有副作用的页面事件"><a href="#具有副作用的页面事件" class="header-anchor">#</a> 具有副作用的页面事件</h4> <p>在小程序中，一些页面事件的注册存在副作用，即该页面事件注册与否会产生实质性的影响，比如微信中的 <code>onShareAppMessage</code> 和 <code>onPageScroll</code>，前者在不注册时会禁用当前页面的分享功能，而后者在注册时会带来视图与逻辑层之间的线程通信开销，对于这部分页面事件，我们无法通过<code>预注册 -&gt; 驱动</code>方式提供组合式 API 的注册方式，用户可以通过选项式 API 的方式来注册使用，通过 <code>this</code> 访问组合式 API <code>setup</code> 函数的返回。</p> <p>然而这种使用方式显然不够优雅，我们考虑是否可以通过一些非常规的方式提供这类副作用页面事件的组合式 API 注册支持，例如，借助编译手段。我们在运行时提供了副作用页面事件的注册函数，并在编译时通过 <code>babel</code> 插件的方式解析识别到当前页面中存在这些特殊注册函数的调用时，通过框架已有的<code>编译 -&gt; 运行时注入</code>的方式将事件驱动逻辑添加到当前页面当中，以提供相对优雅的副作用页面事件在组合式 API 中的注册方式，同时不产生非预期的副作用影响，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onShareAppMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-
-    <span class="token function">onShareAppMessage</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'页面分享'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      count
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>目前我们通过这种方式支持的页面事件如下：</p> <table><thead><tr><th style="text-align:left;">页面事件</th> <th style="text-align:left;">Hooks in <code>setup</code></th> <th style="text-align:left;">平台支持</th></tr></thead> <tbody><tr><td style="text-align:left;">onPullDownRefresh</td> <td style="text-align:left;">onPullDownRefresh</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onReachBottom</td> <td style="text-align:left;">onReachBottom</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onPageScroll</td> <td style="text-align:left;">onPageScroll</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onShareAppMessage</td> <td style="text-align:left;">onShareAppMessage</td> <td style="text-align:left;">全小程序平台</td></tr> <tr><td style="text-align:left;">onTabItemTap</td> <td style="text-align:left;">onTabItemTap</td> <td style="text-align:left;">微信/支付宝/百度/QQ</td></tr> <tr><td style="text-align:left;">onAddToFavorites</td> <td style="text-align:left;">onAddToFavorites</td> <td style="text-align:left;">微信 / QQ</td></tr> <tr><td style="text-align:left;">onShareTimeline</td> <td style="text-align:left;">onShareTimeline</td> <td style="text-align:left;">微信</td></tr> <tr><td style="text-align:left;">onSaveExitState</td> <td style="text-align:left;">onSaveExitState</td> <td style="text-align:left;">微信</td></tr></tbody></table> <blockquote><p><strong>特别注意</strong>，由于静态编译分析实现方式的限制，这类页面事件的组合式 API 使用需要满足页面事件注册函数（如<code>onShareAppMessage</code>）的调用和 <code>createPage</code> 的调用位于同一个 js 文件当中。</p></blockquote> <p>关于生命周期钩子函数的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="script-setup"><a href="#script-setup" class="header-anchor">#</a> <code>&lt;script setup&gt;</code></h3> <p>同 Vue3 一样，我们在 <code>.mpx</code> 单文件组件 / 页面中实现了 <code>&lt;script setup&gt;</code> 的组合式 API 编译语法糖，相较于常规的写法，<code>&lt;script setup&gt;</code> 具备以下优势：</p> <ul><li>更少的样板内容，更简洁的代码</li> <li>能够使用纯 TypeScript 声明 props 类型</li> <li>更好的 IDE 类型推导性能</li></ul> <p>简单使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
-
-  <span class="token keyword">function</span> <span class="token function">log</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>msg: {{msg}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">ontap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>log<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>可以看到使用方式与 Vue3 基本一致，不过由于 Mpx 的组合式 API 设计实现与 Vue3 存在差异，对应 <code>&lt;script setup&gt;</code> 也与 Vue3 中存在一些差异：</p> <ul><li>不支持 <code>import</code> 快捷注册组件</li> <li>没有 <code>defineEmits()</code> 编译宏</li> <li>没有 <code>useSlots()</code> 和 <code>useAttrs()</code> 运行时函数</li> <li>以编译宏的形式提供了 <code>useContext()</code>，获取 <code>setup</code> 函数的第二个参数 <code>context</code></li> <li><code>defineExpose()</code> 编译宏的作用与 Vue3 中有所差别，能够限定模板中能访问的变量范围</li></ul> <blockquote><p><strong>特别注意</strong>，受小程序底层技术限制，我们在 Mpx 的实现中无法像 Vue3 那样将模板编译的渲染函数和 <code>&lt;script setup&gt;</code> 放置到同一作用域下进行变量访问，而是通过静态编译分析提取出 <code>&lt;script setup&gt;</code> 的顶层作用域变量，再以上文中提到的动态添加数据与方法的方式将其设置到模板当中，如果 <code>&lt;script setup&gt;</code> 中声明了较多顶层作用域变量，它们并不一定都会被模板访问，就会带来无效的性能开销，因此我们强烈建议使用 <code>defineExpose()</code> 限定模板中能访问的变量范围，你可以把它等同于 <code>setup</code> 函数中的 <code>return</code>。</p></blockquote> <p>关于 <code>&lt;script setup&gt;</code> 的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="组合式-api-与-vue3-中的差异"><a href="#组合式-api-与-vue3-中的差异" class="header-anchor">#</a> 组合式 API 与 Vue3 中的差异</h3> <p>我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：</p> <ul><li><code>setup</code> 的 <code>context</code> 参数不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#context" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><code>setup</code> 不支持返回<strong>渲染函数</strong></li> <li><code>setup</code> 不能是异步函数</li> <li><code>&lt;script setup&gt;</code> 提供的宏方法不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><code>&lt;script setup&gt;</code> 不支持 <code>import</code> 快捷注册组件</li> <li>支持的生命周期钩子不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>模板引用的方式不同，详见<a href="https://mpxjs.cn/guide/composition-api/composition-api.html#template-ref" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>关于组合式 API 的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/composition-api.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="响应式-api-实现"><a href="#响应式-api-实现" class="header-anchor">#</a> 响应式 API 实现</h2> <p>组合式 API 的正常工作离不开响应式 API 的支持，下面我们来聊聊 Mpx 中响应式 API 的设计实现。我们知道 Vue3 中响应式 API 基于 <code>proxy</code> 进行了重构实现，但是目前 <code>proxy</code> 的浏览器兼容占比仍然无法达到我们对于线上可用性的要求，因此在 Mpx 中，我们仍然基于 <code>Object.defineProperty</code> 进行核心数据响应能力的实现，同时借鉴了 Vue3 中优秀的代码设计与实现，如 <code>reactiveEffect</code> 和 <code>effectScope</code> 等，尽可能实现与 Vue3 中响应式 API 能力对齐。</p> <p>说到这里，很多同学可能会想到 <code>@vue/composition-api</code> 这个库，该库提供的关键能力正是基于 Vue2 的数据响应系统模拟实现 Vue3 中的响应式 API，我们在前期也对 <code>@vue/composition-api</code> 在 Mpx 中的复用进行了非常有价值的探索尝试。不过最终我们还是决定在 Mpx 的运行时框架中进行独立实现，原因主要在于：<code>@vue/composition-api</code> 是作为一个 Vue2 插件存在，无法直接侵入 Vue2 源码，导致部分能力无法实现或会带来额外的性能开销，例如 <code>flush: 'post'</code> 和 <code>ref</code> 自动解包等。我们也看到在最新的 Vue2.7 版本中，也是在运行时框架里重新实现了这部分内容，以规避上述问题。</p> <p>下图展示了 Mpx 中响应式 API 核心模块依赖关系：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/4ySdEqTRhc_DRWWCJWrhJ_composition-api-reactive.png" alt="composition-api-reactive"></p> <h3 id="数据响应限制带来的差异"><a href="#数据响应限制带来的差异" class="header-anchor">#</a> 数据响应限制带来的差异</h3> <p>由于 <code>Object.defineProperty</code> 的能力限制，Mpx 存在和 Vue2 一致的数据响应限制，无法感知到对象 property 的添加和删除以及数组的索引赋值，与 Vue2 一致，我们暴露了 <code>set</code> 和 <code>del</code> API 来让用户显式地进行相关操作。除此之外，由于使用方式发生了变化，我们在使用 <code>reactive</code> API 创建响应式数据时，还会遇到新的限制，我们来看一下代码示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-
-<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [0,1,2,3]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发 watchEffect</span>
-
-state<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发 watchEffect</span>
-</code></pre></div><p>可以看出，即使我们使用了 <code>set</code> API 和数组原型方法对数组进行修改，我们仍然无法监听到数据变化。</p> <blockquote><p>相同的限制在使用 <code>Object.defineProperty</code> 的 Vue2.7 中也同样存在。</p></blockquote> <p>为什么会存在这个限制呢？原因在于：基于 <code>Object.defineProperty</code> 实现的数据响应系统中，我们会对对象的每个已有属性创建了一个 <code>Dep</code> 对象，在对该属性进行 <code>get</code> 访问时通过这个对象将其与依赖它的观察者 <code>ReactiveEffect</code> 关联起来，并在 <code>set</code> 操作时触发关联 <code>ReactiveEffect</code> 的更新，这是我们大家都知道的数据响应的基本原理。但是对于新增/删除对象属性和修改数组的场景，我们无法事先定义当前不存在属性的 <code>get/set</code> (当然这在 <code>proxy</code> 当中是可行的)，因此我们会把对象或者数组本身作为一个数据依赖创建 <code>Dep</code> 对象，<strong>通过父级访问</strong>该数据时定义的 <code>get/set</code> 将其关联到对应的 <code>ReactiveEffect</code>，并在对数据进行新增/删除属性或数组操作时通过数据本身持有的 <code>Dep</code> 对象触发关联 <code>ReactiveEffect</code> 的更新，如下图所示：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/XkI9cQBsLy_7np-T3rt56_composition-api-reactive2.png" alt="数据响应原理"></p> <p>需要注意的是，<strong>通过父级访问</strong>是建立 <code>Dep</code> 与 <code>ReactiveEffect</code> 关联关系的先决条件，在选项式 API 中，我们访问组件的响应式数据都需要通过 <code>this</code> 进行访问，相当于这些数据都存在 <code>this</code> 这个必要的<strong>父级</strong>，因此我们在使用 <code>$set/$delete</code> 进行对对象进行新增/删除属性或对数组进行修改时都能得到符合预期的结果，唯一的限制在于不能新增/删除根级数据属性，原因就在于 <code>this</code> 不存在访问它的父级。</p> <p>但是在组合式 API 中，我们不需要通过 <code>this</code> 访问响应式数据，因此通过 <code>reactive()</code> 创建的响应式数据本身就是根级数据，我们自然无法通过上述方式感知到根级数据自身的变化（在 Vue3 中，基于 <code>proxy</code> 提供的强大能力响应式系统能够精确地感知到数据属性，甚至是当前不存在属性的访问与修改，不需要为数据自身建立 <code>Dep</code> 对象，自然也不存在相关问题）。</p> <p>在这种情况下，我们就需要用 <code>ref()</code> 创建响应式数据，因为 <code>ref</code> 创建了一个包装对象，我们永远需要通过 <code>.value</code> 来访问其持有的数据（不管是显式访问还是隐式自动解包），这样就能保证 <code>ref</code> 数据自身的变化能够被响应式系统感知，因此也不会遇到上面描述的问题，如下所示：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-
-<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [0,1,2,3]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// [0,3,2,3]</span>
-
-state<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// [0,3,2,3,4]</span>
-</code></pre></div><h3 id="响应式-api-与-vue3-中的区别"><a href="#响应式-api-与-vue3-中的区别" class="header-anchor">#</a> 响应式 API 与 Vue3 中的区别</h3> <p>我们来总结一下 Mpx 中响应式 API 与 Vue3 中的区别：</p> <ul><li>不支持 <code>raw</code> 相关 API（<code>markRaw</code> 除外，我们提供了该 API 用于跳过部分数据的响应式转换）</li> <li>不支持 <code>readonly</code> 相关 API</li> <li>不支持 <code>watchEffect</code>、<code>watch</code>、<code>computed</code> 的调试选项</li> <li>不支持对 <code>map</code>、<code>set</code> 等集合类型进行响应式转换</li> <li>受到 <code>Object.defineProperty</code> 实现带来的数据响应限制影响</li></ul> <p>关于响应式 API 的更多信息可以查看<a href="https://mpxjs.cn/guide/composition-api/reactive-api.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="生态周边适配"><a href="#生态周边适配" class="header-anchor">#</a> 生态周边适配</h2> <p>除了 Mpx 运行时核心提供了组合式 API 支持外，我们对 Mpx 的周边生态能力也都进行了组合式 API 适配支持，包括 <code>store</code>、<code>i18n</code>、<code>fetch</code> 等。</p> <h3 id="pinia-store-支持"><a href="#pinia-store-支持" class="header-anchor">#</a> Pinia store 支持</h3> <p>Pinia 是基于组合式 API 设计的全新数据管理方案，目前已经取代 Vuex 成为 Vue3 官方推荐的 store，我们在研究了 pinia 的设计实现后，对其简练优雅的设计思想及其与组合式 API 的高度适配非常满意（特别是在使用 <code>setup</code> 函数创建 store 时，使用心智与编写组件完全一致，可以将其视作是没有视图的组件）。因此我们 fork 了 pinia 的源码仓库，基于 Mpx 提供的数据响应能力对其进行了适配改造，使其在 Mpx 环境下也能正常运行，目前相关代码维护在 <code>@mpxjs/pinia</code> 中，在组合式 API 中的简单使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> computed<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
-
-<span class="token comment">// 使用组合式 API 创建 pinia store 的使用心智与 setup 函数完全一致，强烈推荐</span>
-<span class="token keyword">const</span> useSetupStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'setup'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> doubleCount <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
-
-  <span class="token keyword">function</span> <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    count<span class="token punctuation">.</span>value<span class="token operator">++</span>
-  <span class="token punctuation">}</span>
-
-  <span class="token keyword">return</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> doubleCount<span class="token punctuation">,</span> increment <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useSetupStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token comment">// store 同 props 类似是一个 reactive 对象，解构数据需使用 toRefs 以保持数据响应性</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> doubleCount <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>store<span class="token punctuation">)</span>
-    <span class="token comment">// 方法可以直接解构</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> increment <span class="token punctuation">}</span> <span class="token operator">=</span> store
-  
-    <span class="token keyword">return</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> doubleCount<span class="token punctuation">,</span> increment <span class="token punctuation">}</span>
-    <span class="token comment">//</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>Mpx 中通过 <code>createStore</code> 创建的类 Vuex store 在组合式 API 中仍然可以使用，我们可以在 <code>setup</code> 函数中引用 store 实例进行<a href="https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api" target="_blank" rel="noopener noreferrer">数据读取与方法调用<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，不过整体使用体验与 pinia store 存在较大差距，我们还是推荐在组合式 API 开发中优先使用 pinia store 作为数据管理方案。</p> <h3 id="i18n-支持"><a href="#i18n-支持" class="header-anchor">#</a> I18n 支持</h3> <p>传统选项式 API 中，我们使用 <code>this.$t</code> 方法在组件内调用翻译函数，但在组合式 API 中我们无法访问 <code>this</code>，为此我们参考了 Vue I18n 最新的 9.x 版本，该版本针对 Vue3 及组合式 API 进行了重构适配，提供了全新的 <code>useI18n</code> API，简单使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('message.hello')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeLocale<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>change locale<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// useI18n 不传参数时指向全局 i18n 对象，也可以传递 locale 和 messages 配置创建局部 i18n 对象</span>
-      <span class="token keyword">const</span> <span class="token punctuation">{</span> t<span class="token punctuation">,</span> locale <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-
-      <span class="token keyword">function</span> <span class="token function">changeLocale</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        locale<span class="token punctuation">.</span>value <span class="token operator">=</span> locale<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">'zh-CN'</span> <span class="token operator">?</span> <span class="token string">'en-US'</span> <span class="token operator">:</span> <span class="token string">'zh-CN'</span>
-      <span class="token punctuation">}</span>
-      <span class="token comment">// 返回的翻译方法名必须为 t，不能进行重命名</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span> t<span class="token punctuation">,</span> changeLocale <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><blockquote><p>上面示例代码看上去像是我们在模板上直接调用 setup() 返回的 t 翻译方法，但是熟悉小程序开发的同学都知道在小程序架构下这是不可能的，示例中的写法其实由框架通过编译 + 运行时手段实现的语法糖，我们会在模板编译时定向扫描 t/te/tm 等 i18n 方法，将其转换为计算属性注入到运行时当中，这就意味着如果我们对翻译方法进行重命名，模板编译时无法识别出 i18n 方法调用，自然也就无法正常运行。</p></blockquote> <p>Mpx 中 i18n 提供了两种实现模式，分别是 wxs 和 computed，可以使用编译选项中的 <code>i18n.isComputed</code> 进行切换，两种方式各有优劣，其中：</p> <ul><li>wxs 模式的优势在于逻辑层和视图层独立维护语言集，无额外运行时性能开销，且使用没有任何限制；劣势同样源于语言集同时存在于逻辑层（js）和视图层（wxs）当中，这部分的包体积占用翻倍；</li> <li>computed 模式的优势在于语言集只存在于逻辑层中，无额外包体积占用，且可以通过动态添加语言集的方式进一步减少包体积占用；劣势则是会产生额外的运行时性能开销，且使用上存在限制，模板调用时无法直接访问 <code>wx:for</code> 中的 <code>item</code> 和 <code>index</code>。</li></ul> <p>在组合式 API 中模板上使用 <code>useI18n()</code> 返回的翻译函数 <code>t/te/tm</code> 时，为了完整实现 <code>useI18n</code> API的功能，会强制使用 computed 模式进行实现，这也意味着该用法会受到 computed 模式使用限制的影响。不过当你不需要使用 <code>useI18n</code> 接受 <code>messages</code> 参数创建局部语言集作用域功能时，你也完全可以在模板中继续使用原有的 <code>$t/$tc/$te/$tm</code> 方法，这些方法受编译选项 <code>i18n.isComputed</code> 的影响，同时指向全局语言集作用域。</p> <p>更多关于生态周边的组合式 API 使用指南可以点击下方链接查看详情：</p> <ul><li><a href="https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api" target="_blank" rel="noopener noreferrer">store<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://mpxjs.cn/guide/advance/i18n.html#composition-api-usage" target="_blank" rel="noopener noreferrer">i18n<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://mpxjs.cn/guide/extend/fetch.html#composition-api-usage" target="_blank" rel="noopener noreferrer">fetch<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="输出-web-适配"><a href="#输出-web-适配" class="header-anchor">#</a> 输出 web 适配</h2> <p>跨端输出 web 作为 Mpx 的一大核心特性，在业务中存在广泛使用，同时也是我们设计实现任何框架新特性需要优先考虑的事项。在本次组合式 API 支持中，我们从设计之初就考虑了跨端输出 web 的适配支持，保障使用 Mpx 组合式 API 开发的业务代码都能在 web 环境中正常运行。</p> <p>我们输出 web 的整体技术方向在于尽可能复用 Vue 已有的生态能力，为了实现这个目标，我们需要提供尽可能与 Vue 保持一致的 API 设计，以降低抹平适配成本。在输出 web 时，核心组合式 API 基于 Vue2.7 版本中的已有能力进行适配提供，简单举个例子：对于 <code>import { ref } from 'mpxjs/core'</code> 这行语句，在小程序中会指向 Mpx 内部维护的 <code>ref</code> 实现，而在输出 web 时会指向 Vue 中维护的 <code>ref</code> 实现，两者的实现虽然不仅相同，但只要保障对外函数签名一致，对于开发者用户来说就无感知。</p> <p>我们借助了 Mpx 强大的条件编译能力进行上述实现，对运行时导出根据输出平台进行重定向，这样还能保障跨端输出产物干净简洁，仅包含当前输出环境下必要的逻辑，如下图所示：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/E0FojaPKOxZOa5h5OEPQk_composition-api-web.png" alt="composition-api-web"></p> <p>同理，我们也采用了类似的方式实现了组合式 API 周边能力对于输出 web 的适配支持，如pinia store 使用 pinia 原始版本进行适配实现，而 i18n 能力则是使用 vue-i18n@8.x + vue-i18n-bridge 进行适配实现。</p> <h2 id="性能表现"><a href="#性能表现" class="header-anchor">#</a> 性能表现</h2> <p>性能是 Mpx 一直以来的核心关注点，我们对组合式 API 的最终实现版本进行了一系列性能评估测试，我们使用组合式 API 版本对业务中的评价组件进行了重构，评价组件属于我们业务中交互及功能相对比较复杂的组件，源码行数约 1000 行，组件数据 27 项，组件方法 18 个，我们在测试项目中对选项式 API 和组合式 API 两个版本实现的组件进行了一系列测试。</p> <h3 id="组件初始化耗时"><a href="#组件初始化耗时" class="header-anchor">#</a> 组件初始化耗时</h3> <p>由于组合式 API 改变了原有的组件初始化流程，我们对组件的初始化耗时进行了重点测试，测试口径如下：</p> <ul><li>耗时计算以挂载组件为起点，以组件 <code>ready</code> 执行为终点</li> <li>测试结果为10次手工测试排除最大最小值后求均值</li> <li>IOS 测试机型为 iPhone 13 pro max，安卓测试机型为 OPPO R9</li></ul> <p>结果显示两个版本的组件初始化耗时大抵持平，不分优劣。</p> <table><thead><tr><th></th> <th>IOS</th> <th>安卓</th></tr></thead> <tbody><tr><td>选项式 API</td> <td>42.5ms</td> <td>366.6ms</td></tr> <tr><td>组合式 API</td> <td>42.4ms</td> <td>370.1ms</td></tr></tbody></table> <h3 id="组件-js-体积"><a href="#组件-js-体积" class="header-anchor">#</a> 组件 JS 体积</h3> <p>在构建产物体积方面，由于组合式 API 的写法对于 JS 代码压缩更加有利，同样的逻辑实现下，组合式 API 版本的组件构建压缩后 JS 体积略胜一筹。</p> <table><thead><tr><th></th> <th>组件 JS 体积</th></tr></thead> <tbody><tr><td>选项式 API</td> <td>15.67KB</td></tr> <tr><td>组合式 API</td> <td>13.60KB</td></tr></tbody></table> <h3 id="框架运行时体积"><a href="#框架运行时体积" class="header-anchor">#</a> 框架运行时体积</h3> <p>在 Mpx2.8 版本中，我们在框架运行时中新增了组合式 API 相关实现，不过通过优化运行时导出，使其对 tree shaking 更加友好，我们的框架运行时体积在实际构建产物中没有产生太大增长。</p> <table><thead><tr><th></th> <th>框架运行时体积</th></tr></thead> <tbody><tr><td>选项式 API</td> <td>51.66KB</td></tr> <tr><td>组合式 API</td> <td>57.47KB</td></tr></tbody></table> <p>综上所述，组合式 API 版本的运行时性能与选项式 API 大抵持平，在包体积占用方面，新版框架运行时体积占用略有提升，不过由于组合式 API 开发模式对代码压缩更友好，加上组合式 API 更易进行逻辑复用的特点，我们预计在实际业务项目中，组合式 API 的包体积占用会更小。</p> <h2 id="破坏性改变"><a href="#破坏性改变" class="header-anchor">#</a> 破坏性改变</h2> <p>Mpx 组合式 API 版本完全兼容原有的选项式 API 开发方式，不过我们在运行时重构过程中依然带来了少量的破坏性改变，详情如下：</p> <ul><li>框架过往提供的组件增强生命周期 <code>pageShow/pageHide</code> 与微信原生提供的 <code>pageLifetimes.show/hide</code> 完全对齐，不再提供组件初始挂载时必定执行 <code>pageShow</code> 的保障（因为组件可能在后台页面进行挂载），相关初始化逻辑一定不要放置在 <code>pageShow</code> 当中；</li> <li>取消了框架过去提供的基于内部生命周期实现的非标准增强生命周期，如 <code>beforeCreate/onBeforeCreate</code> 等，直接将内部生命周期变量导出提供给用户使用，详情查看<a href="https://mpxjs.cn/api/global-api.html#built-in-lifecycle-variable" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>;</li> <li>为了优化 tree shaking，作为框架运行时 <code>default export</code> 的 <code>Mpx</code> 对象不再挂载 <code>createComponent/createStore</code> 等运行时方法，一律通过 <code>named export</code> 提供，<code>Mpx</code> 对象上仅保留 <code>set/use</code> 等全局 API，详情查看<a href="https://mpxjs.cn/api/global-api.html#global-mpx" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>；</li> <li>使用 I18n 能力时，为了与新版 vue-i18n 保持对齐，<code>this.$i18n</code> 对象指向全局作用域，如需创建局部作用域需要使用组合式 API <code>useI18n</code> 的方式进行创建。</li> <li><code>watch</code> API 不再接受第二个参数为带有 <code>handler</code> 属性的对象形式（该参数形式只应存在于 <code>watch</code> option 中），第二个参数必须为回调函数，与 <a href="https://vuejs.org/api/reactivity-core.html#watch" target="_blank" rel="noopener noreferrer">Vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 对齐。</li></ul> <p>更详细的迁移指南请点击查看<a href="https://mpxjs.cn/guide/migrate/2.8.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="未来规划"><a href="#未来规划" class="header-anchor">#</a> 未来规划</h2> <p>在完成编译持久化缓存和组合式 API 支持后，我们已经完成了去年规划中最大的两个技术升级，后续我们的技术规划如下：</p> <ul><li>支持使用 Vite 进行 web 构建</li> <li>完善 Mpx 跨端输出 Hummer 并正式 release</li> <li>优化运行时 render 函数，降低包体积占用</li> <li>内置支持原子类使用</li> <li>Mpx-cube-ui 正式开源</li></ul> <p>最后，再次感谢所有参与 Mpx 组合式 API 技术建设的同学们，也欢迎社区同学加入 Mpx 项目开源共建。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/articles/2.7-release.html" class="prev">
-        Mpx2.7 版本正式发布，大幅提升编译构建速度
-      </a></span> <span class="next"><a href="/articles/2.9-release.html">
-        Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/51.90dfa84e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/2.9-release-alter.html b/docs-vuepress/.vuepress/dist/articles/2.9-release-alter.html
deleted file mode 100644
index 8cbd7936d3..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/2.9-release-alter.html
+++ /dev/null
@@ -1,277 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/52.10bb0251.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化"><a href="#mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化" class="header-anchor">#</a> Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</h1> <blockquote><p>作者：<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">董宏平<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer">Mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 是滴滴开源的一款增强型跨端小程序框架，自2018年立项开源以来如今已经进入第六个年头，在这六年间，Mpx 根植于业务，与业务共同成长，针对小程序业务开发中遇到的各类痛点问题提出了解决方案，并在集团内部建设了完善的小程序跨端开发生态。目前，Mpx 已经覆盖支持了集团内部全量小程序业务开发，成为了集团小程序开发的统一技术标准，并在今年年初被评选为集团内首个开源精品项目。</p> <p>随着小程序业务的发展演进，性能和包体积的重要性愈发凸显，Mpx从设计之初就非常重视性能和包体积的优化，本次的 <strong>Mpx2.9</strong> 版本更新带来的三大核心特性——原子类、SSR 和包体积优化也都与性能和包体积息息相关，下面我们逐个展开介绍。</p> <h2 id="原子类支持"><a href="#原子类支持" class="header-anchor">#</a> 原子类支持</h2> <p>原子类(utility-first CSS)是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，比较知名的有 <a href="https://github.com/" target="_blank" rel="noopener noreferrer">Github<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<a href="https://openai.com/" target="_blank" rel="noopener noreferrer">OpenAI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<a href="https://top10.netflix.com/" target="_blank" rel="noopener noreferrer">Netflix<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://www.jpl.nasa.gov/" target="_blank" rel="noopener noreferrer">NASA官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等。使用原子类离不开原子类框架的支持，常用的原子类框架有 <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwindcss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://windicss.org/" target="_blank" rel="noopener noreferrer">Windicss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://unocss.dev/" target="_blank" rel="noopener noreferrer">Unocss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等。</p> <p>在 Mpx2.9 版本中，我们在框架中内置了基于 <code>unocss</code> 的原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx 页面/组件模板中直接使用一些预定义的基础样式类，诸如 flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-base text-black font-semibold mb-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-          Erin Lindford
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-gray-500 font-medium pb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-          Product Engineer
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span>
-          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-          Message
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/Or3aaN-mmxV8pK-LmEVPm_demo.png" alt="utility-css-demo"></p> <p>相较于传统的自定义类编写样式的方式，使用原子类能给你带来以下这些好处：</p> <ul><li><strong>不用再烦恼于为自定义类取类名</strong>，传统样式开发中，我们仅仅是为某个元素定义样式就需要绞尽脑汁发明一些抽象的类名，还得提防类名冲突，使用原子类可以完全将你从这种琐碎无趣的工作中解放；</li> <li><strong>停止 css 体积的无序增长</strong>，传统样式开发中，css 体积会随着你的迭代不断增长，而在原子类中，一切样式都可以复用，你几乎不需要编写新的 css；</li> <li><strong>让调整样式变得更加安全</strong>，传统 css 是全局的，当你修改某个样式时无法保障其不会破坏其他地方的样式，而你在模板中使用的原子类是本地的，你完全不用担心修改它会影响其他地方。</li></ul> <p>而相较于使用内联样式，原子类也有一些重要的优势：</p> <ul><li><strong>约束下的设计</strong>，使用内联样式时，里面的每一个数值都是魔法数字（magic number）
-，而通过原子工具类，你可以选择一些符合预定义设计规范的样式，便于构筑具有视觉一致性的UI；</li> <li><strong>响应式设计</strong>，你无法在内联样式中使用媒体查询，然而通过原子类框架中提供的响应式工具，你可以轻而易举地构建出响应式界面；</li> <li><strong>Hover、focus 和其他状态</strong>，使用内联样式无法定义特定状态下的样式，如 hover 和 focus，通过原子类框架的状态变量能力，我们可以轻松为这些状态定义样式。</li></ul> <p>看到这里相信你已经迫不及待地想要在 Mpx 中体验原子类开发了吧，使用最新版本的 <code>@mpxjs/cli</code> 脚手架创建项目时，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用 <code>unocss</code> 的原子类，可使用的工具类可以参考 <a href="https://unocss.dev/interactive/" target="_blank" rel="noopener noreferrer">unocss 交互示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，在已有项目中开启原子类支持可以参考<a href="https://mpxjs.cn/guide/advance/utility-first-css.html#compile-config" target="_blank" rel="noopener noreferrer">配置指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="小程序原子类使用注意事项"><a href="#小程序原子类使用注意事项" class="header-anchor">#</a> 小程序原子类使用注意事项</h3> <p>小程序和 web 环境对于 css 的支持存在底层差异，小程序内也存在大量自身独有的技术特性，Mpx 在支持原子类时针对这些环境特异性进行了抹平和适配，在框架的支持下，我们实现了大部分（超过90%）原子类功能和工具类在小程序环境下正常使用，并额外支持了原子类产物的分包输出和样式隔离下的原子类使用，详情如下：</p> <h4 id="特殊字符转义"><a href="#特殊字符转义" class="header-anchor">#</a> 特殊字符转义</h4> <p>基于 <code>unocss</code> 的原子类支持 <code>value auto-infer</code>（值自动推导），可以在模版中根据相关规则书写灵活的自定义值原子类，如 <code>p-5px bg-[hsl(211.7,81.9%,69.6%)]</code> 等，针对原子类中出现的 <code>[</code> <code>(</code> <code>,</code> 等特殊字符，在 web 中会通过转义字符 <code>\</code> 进行转义，由于小程序环境下不支持 css 选择器中出现 <code>\</code> 转义字符，我们内置支持了一套不带 <code>\</code> 的转义规则对这些特殊字符进行转义，同时替换模版和 css 文件中的类名，内建的默认转义规则如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> escapeMap <span class="token operator">=</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">'('</span><span class="token operator">:</span> <span class="token string">'_pl_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">')'</span><span class="token operator">:</span> <span class="token string">'_pr_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'['</span><span class="token operator">:</span> <span class="token string">'_bl_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">']'</span><span class="token operator">:</span> <span class="token string">'_br_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'{'</span><span class="token operator">:</span> <span class="token string">'_cl_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'}'</span><span class="token operator">:</span> <span class="token string">'_cr_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'#'</span><span class="token operator">:</span> <span class="token string">'_h_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'!'</span><span class="token operator">:</span> <span class="token string">'_i_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'/'</span><span class="token operator">:</span> <span class="token string">'_s_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'.'</span><span class="token operator">:</span> <span class="token string">'_d_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">':'</span><span class="token operator">:</span> <span class="token string">'_c_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">','</span><span class="token operator">:</span> <span class="token string">'_2c_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'%'</span><span class="token operator">:</span> <span class="token string">'_p_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'\''</span><span class="token operator">:</span> <span class="token string">'_q_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'&quot;'</span><span class="token operator">:</span> <span class="token string">'_dq_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'+'</span><span class="token operator">:</span> <span class="token string">'_a_'</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">$</span><span class="token operator">:</span> <span class="token string">'_si_'</span><span class="token punctuation">,</span>
-    <span class="token comment">// unknown用于兜底不在上述范围中未知的转义字符</span>
-    <span class="token literal-property property">unknown</span><span class="token operator">:</span> <span class="token string">'_u_'</span>
-  <span class="token punctuation">}</span>
-</code></pre></div><p>与此同时，用户也可以通过传递 <code>@mpxjs/unocss-plugin</code> 的 <a href="https://mpxjs.cn/api/compile.html#escapeMap" target="_blank" rel="noopener noreferrer">escapeMap<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项来覆盖内建的转义规则。</p> <h4 id="原子类分包输出"><a href="#原子类分包输出" class="header-anchor">#</a> 原子类分包输出</h4> <p>在 web 中，原子类会被全部打包输出单个样式文件，一般会放置在顶层样式表中以供全局访问，但在小程序中这种全量的输出策略并不是最优的，主要原因在于小程序中可供全局访问的主包体积存在 <strong>2M 大小限制</strong>，主包体积十分紧缺珍贵，Mpx 在构建输出时遵循着分包优先的原则，尽可能充分利用分包体积从而减少对主包体积的占用，再进行原子类产物输出时，我们也遵循了相同的原则。</p> <p>在Mpx中，我们在收集原子类时同时记录了每个原子类的引用分包，在收集结束后根据每个原子类的分包引用数量决定该原子类应该输出到主包还是分包当中，我们在 <code>@mpxjs/unocss-plugin</code> 中提供了 <a href="https://mpxjs.cn/api/compile.html#minCount" target="_blank" rel="noopener noreferrer">minCount<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项来决定分包的输出规则，该配置项的默认值为2，即当一个原子类被2个或以上分包引用时，会被作为公共原子类抽取到主包中，否则输出到所属分包中，这也是全局最优的策略。当我们想要让原子类输出产物更少地占用主包体积时，我们也可以将<code>minCount</code>值调大，让原子类抽取到主包的条件更加苛刻，不过这样也会伴随着原子类分包冗余的增加。</p> <p><code>unocss.config.js</code> 配置中定义的 <code>safelist</code> 原子类默认会输出到主包，为了组件局部使用的 <code>safelist</code> 有输出到分包的机会，我们在模版中提供了<a href="https://mpxjs.cn/api/compile.html#commentConfig" target="_blank" rel="noopener noreferrer">注释配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（comments config），灵感来源于 <code>webpack</code> 中的魔法注释（magic comments），用户可以在组件模版中通过<code>注释配置</code>声明当前组件所需的 <code>safelist</code>，对应的原子类也会根据上述的规则输出到主包或分包中，使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- mpx_config_safelist: 'text-red-500 bg-blue-500' --&gt;</span>
-    <span class="token comment">&lt;!-- 动态样式中可以使用text-red-500和bg-blue-500原子类 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{classObj}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- ... --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h4 id="样式隔离与组件分包异步"><a href="#样式隔离与组件分包异步" class="header-anchor">#</a> 样式隔离与组件分包异步</h4> <p>在小程序中，自定义组件的样式默认是隔离的，web 中通过全局样式访问原子类的方式不再生效，不过由于小程序提供了<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB" target="_blank" rel="noopener noreferrer">样式隔离配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，我们可以将该组件样式隔离配置调整为 <code>apply-shared</code> 来获取页面或 app 中定义的原子类，但是当我们在使用传统类名和原子类混合开发或者迁移原子类的过程中，我们往往希望保留原本自定义组件的样式隔离。</p> <p>针对这种情况，我们在 <code>@mpxjs/unocss-plugin</code> 中提供了 <a href="https://mpxjs.cn/api/compile.html#styleIsolation" target="_blank" rel="noopener noreferrer">styleIsolation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项，可选设置为 <code>isolated</code>|<code>apply-shared</code>，当设置为 <code>isolated</code> 时每个组件都会通过 <code>@import</code> 独立引用主包或者分包的原子类样式文件，因此不会受到样式隔离的影响；当设置为 <code>apply-shared</code> 时，只有 app 和分包页面会引用对应的原子类样式文件，自定义组件需要通过配置样式隔离为 <code>apply-shared</code> 使原子类生效。</p> <p>在组件分包异步的情况下对应组件即使将样式隔离配置为 <code>apply-shared</code> 的情况下，<code>@mpxjs/unocss-plugin</code> 也需要将  <code>styleIsolation</code> 设置为 <code>isolated</code> 才能正常工作，原因在于组件分包异步的情况下，组件被其他分包的页面所引用渲染，由于上述原子类样式分包输出的规则，其他分包的页面中可能并不包含当前组件所需的原子类，只有在 <code>isolated</code> 模式下由组件自身引用所需的原子类样式才能保证正常工作，类似于 <code>safelist</code>，我们也提供了<a href="https://mpxjs.cn/api/compile.html#commentConfig" target="_blank" rel="noopener noreferrer">注释配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的方式对组件的 <code>styleIsolation</code> 模式进行局部配置，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- mpx_config_styleIsolation: 'isolated' --&gt;</span>
-    <span class="token comment">&lt;!-- 当前组件会直接引用对应主包或分包的原子类样式 --&gt;</span>
-     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>@dark:(text-white bg-dark-500)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- ... --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="原子类使用参考文档"><a href="#原子类使用参考文档" class="header-anchor">#</a> 原子类使用参考文档</h3> <p>Mpx 中使用原子类的详细参考文档如下：</p> <ul><li><a href="https://mpxjs.cn/guide/advance/utility-first-css.html" target="_blank" rel="noopener noreferrer">原子类使用指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://mpxjs.cn/api/compile.html#MpxUnocssPlugin" target="_blank" rel="noopener noreferrer">原子类 API 参考<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="输出-web-支持-ssr"><a href="#输出-web-支持-ssr" class="header-anchor">#</a> 输出 web 支持 SSR</h2> <p>近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，各类SSR框架层出不穷，未来进一步提升性能表现，在 SSR 的基础上还演进出 <a href="https://docs.astro.build/en/concepts/islands/" target="_blank" rel="noopener noreferrer">islands architecture<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://qwik.builder.io/docs/concepts/resumable/" target="_blank" rel="noopener noreferrer">0 hydration<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等更加精细复杂的理念和架构。</p> <p>近两年随着团队对于前端性能的重视，SSR/SSG 技术也在团队业务中逐步推广落地，并在首屏性能方面取得了显著的收效。但由于过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 Mpx2.9 版本中，我们对 web 输出流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整实现了基于 Vue 和 Pinia 的 SSR 技术方案。</p> <h3 id="配置使用-ssr"><a href="#配置使用-ssr" class="header-anchor">#</a> 配置使用 SSR</h3> <p>在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。</p> <p><img src="https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85" alt="Vue SSR流程"></p> <p>Mpx SSR 核心基于 Vue SSR 实现，大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：</p> <h4 id="构建server-client-bundle"><a href="#构建server-client-bundle" class="header-anchor">#</a> 构建server/client bundle</h4> <p>SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。
-在 Vue 中，我们需要提供 <code>entry-server.js</code> 和 <code>entry-client.js</code> 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 <code>app.mpx</code> 作为统一构建入口，无需区分 server 和 client。</p> <h5 id="服务端构建配置"><a href="#服务端构建配置" class="header-anchor">#</a> 服务端构建配置</h5> <p>服务端配置中除了将 entry 制定为 <code>app.mpx</code> 及其它基础配置外，最重要的是安装 <code>vue-server-renderer</code> 包中提供的  <code>server-plugin</code> 插件，该插件能够构建产出 <code>vue-ssr-server-bundle.json</code> 文件供 <code>renderer</code> 后续消费。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.server.config.js</span>
-<span class="token keyword">const</span> VueSSRServerPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer/server-plugin'</span><span class="token punctuation">)</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 将 entry 指向项目的 app.mpx 文件</span>
-  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./app.mpx'</span><span class="token punctuation">,</span>
-  <span class="token comment">// ...</span>
-  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-   <span class="token comment">// 产出 `vue-ssr-server-bundle.json`</span>
-    <span class="token keyword">new</span> <span class="token class-name">VueSSRServerPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#server-config" target="_blank" rel="noopener noreferrer">Vue SSR的服务端配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="客户端构建配置"><a href="#客户端构建配置" class="header-anchor">#</a> 客户端构建配置</h5> <p>类似服务端构建配置，在客户端构建中我们需要使用 <code>vue-server-renderer</code> 包中 <code>client-plugin</code> 插件来帮助我们生成客户端环境的资源清单 <code>vue-ssr-client-manifest.json</code>，并供 <code>renderer</code> 后续消费。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.client.config.js</span>
-<span class="token keyword">const</span> VueSSRClientPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer/client-plugin'</span><span class="token punctuation">)</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 将 entry 指向项目的 app.mpx 文件</span>
-  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./app.mpx'</span><span class="token punctuation">,</span>
-  <span class="token comment">// ...</span>
-  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token comment">// 产出 `vue-ssr-client-manifest.json`。</span>
-    <span class="token keyword">new</span> <span class="token class-name">VueSSRClientPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#client-config" target="_blank" rel="noopener noreferrer">Vue SSR的客户端配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="准备页面模版"><a href="#准备页面模版" class="header-anchor">#</a> 准备页面模版</h4> <p>SSR 渲染中，我们创建 <code>renderer</code> 需要一个页面模板，简单的示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Hello<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--vue-ssr-outlet--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 <code>&lt;!--vue-ssr-outlet--&gt;</code>注释，标记 SSR 渲染产物的插入位置，如使用 <code>@mpxjs/cli</code> 脚手架创建 SSR 项目，该模版已经内置于脚手架中。</p> <h4 id="集成启动-ssr-服务"><a href="#集成启动-ssr-服务" class="header-anchor">#</a> 集成启动 SSR 服务</h4> <p>当我们准备好页面模版和双端构建产物后，我们就可以创建 <code>renderer</code> 并与 Node 服务进行集成，启动 SSR 服务，下面以 <code>express</code> 为例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//server.js</span>
-<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> createBundleRenderer <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer'</span><span class="token punctuation">)</span>
-<span class="token comment">// 通过 vue-server-renderer/server-plugin 生成的文件</span>
-<span class="token keyword">const</span> serverBundle <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../dist/server/vue-ssr-server-bundle.json'</span><span class="token punctuation">)</span>
-<span class="token comment">// 通过 vue-server-renderer/client-plugin 生成的文件</span>
-<span class="token keyword">const</span> clientManifest <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../dist/client/vue-ssr-client-manifest.json'</span><span class="token punctuation">)</span>
- <span class="token comment">// 页面模版文件</span>
-<span class="token keyword">const</span> template <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token string">'../src/index.template.html'</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span>
-<span class="token comment">// 创建 renderer 渲染器</span>
-<span class="token keyword">const</span> renderer <span class="token operator">=</span> <span class="token function">createBundleRenderer</span><span class="token punctuation">(</span>serverBundle<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">runInNewContext</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
-    template<span class="token punctuation">,</span>
-    clientManifest<span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token comment">// 注册启动 SSR 服务</span>
-app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> req<span class="token punctuation">.</span>url <span class="token punctuation">}</span>
-  renderer<span class="token punctuation">.</span><span class="token function">renderToString</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> html</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  	<span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  	  res<span class="token punctuation">.</span><span class="token function">status</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'Internal Server Error'</span><span class="token punctuation">)</span>
-      <span class="token keyword">return</span>
-    <span class="token punctuation">}</span>
-  	res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8080</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="ssr-生命周期"><a href="#ssr-生命周期" class="header-anchor">#</a> SSR 生命周期</h3> <p>在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是<code>onAppInit</code>、<code>serverPrefetch</code> 和 <code>onSSRAppCreated</code>，以统一服务端与客户端的构建入口，下面展开介绍：</p> <h4 id="onappinit"><a href="#onappinit" class="header-anchor">#</a> onAppInit</h4> <p>在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，<code>onAppInit</code> 生命周期会在应用创建 <code>new Vue(...)</code> 前被调用，其执行的返回结果会被合并到创建应用的 <code>options</code> 中</p> <p>很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 <code>@mpxjs/pinia</code> 作为全局状态管理工具，我们可以在 <code>onAppInit</code> 中返回全新的 <code>pinia</code> 示例避免产生跨请求状态污染，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
-<span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
-
-<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-  <span class="token function">onAppInit</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      pinia
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="serverprefetch"><a href="#serverprefetch" class="header-anchor">#</a> serverPrefetch</h4> <p>当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：</p> <p>选项式 API：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> useStore <span class="token keyword">from</span> <span class="token string">'../store/index'</span>
-
-<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">//...</span>
-  <span class="token function">serverPrefetch</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query
-    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$pinia<span class="token punctuation">)</span>
-    <span class="token comment">// return the promise from the action, fetch data and update state</span>
-    <span class="token keyword">return</span> store<span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>组合式 API：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onServerPrefetch<span class="token punctuation">,</span> getCurrentInstance<span class="token punctuation">,</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> useStore <span class="token keyword">from</span> <span class="token string">'../store/index'</span>
-
-<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">userStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token function">onServerPrefetch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token function">getCurrentInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>proxy<span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query
-      <span class="token comment">// return the promise from the action, fetch data and update state</span>
-      <span class="token keyword">return</span> store<span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>关于数据预拉取更详细的说明可以查看<a href="https://v2.ssr.vuejs.org/guide/data.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h4 id="onssrappcreated"><a href="#onssrappcreated" class="header-anchor">#</a> onSSRAppCreated</h4> <p>在 Vue SSR 项目中，我们会在 <code>entry-server.js</code> 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 <code>app</code>。</p> <p>在 Mpx SSR 中，我们将这部分逻辑整合在 <code>onSSRAppCreated</code> 中执行，该生命周期执行时用户可以从参数中获取应用实例 <code>app</code>、路由实例 <code>router</code>、数据管理实例 <code>pinia</code> 和 SSR 上下文 <code>context</code>，在完成必要的操作后，该生命周期需要返回一个 <code>resolve(app)</code> 的 promise。</p> <p>通常我们会在 <code>onSSRAppCreated</code> 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
-<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token comment">// ...,</span>
-    <span class="token function">onSSRAppCreated</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> pinia<span class="token punctuation">,</span> router<span class="token punctuation">,</span> app<span class="token punctuation">,</span> context <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token comment">// 设置服务端路由路径</span>
-        router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
-        router<span class="token punctuation">.</span><span class="token function">onReady</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-          <span class="token comment">// 应用完成渲染时执行</span>
-          context<span class="token punctuation">.</span><span class="token function-variable function">rendered</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-            <span class="token comment">// 将服务端渲染后得到的 pinia.state 同步到 context.state 中，</span>
-            <span class="token comment">// context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`</span>
-            <span class="token comment">// 注入到 HTML 中，并在客户端运行时再读取同步</span>
-            context<span class="token punctuation">.</span>state <span class="token operator">=</span> pinia<span class="token punctuation">.</span>state<span class="token punctuation">.</span>value
-          <span class="token punctuation">}</span>
-          <span class="token comment">// 返回应用程序实例</span>
-          <span class="token function">resolve</span><span class="token punctuation">(</span>app<span class="token punctuation">)</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> reject<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。</p> <h3 id="其他注意事项"><a href="#其他注意事项" class="header-anchor">#</a> 其他注意事项</h3> <ol><li><p>Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。</p></li> <li><p>在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。</p></li> <li><p>由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 <code>mpx.config.webRouteConfig</code> 将路由模式设置成 <code>history</code> 模式。</p></li></ol> <h2 id="包体积优化"><a href="#包体积优化" class="header-anchor">#</a> 包体积优化</h2> <p>近几年来随着集团超级 App 战略的推进，滴滴出行主小程序中集成了越来越多的业务线，主小程序的包体积也随之呈现爆炸式增长，到今天主小程序里已经集成了集团内大部分核心业务，但其总包体积也从 21 年的 12MB 增长至触达微信上限 30MB，成为一个页面数量400+，组件数量3600+，JS模块数40000+的“大程序”。在此期间，我们通过统一技术框架、分包异步改造和低效页面下线/改造等技术手段，对主小包体积进行一轮又一轮优化，并沉淀了分包异步构建、包体积分析管控和冗余包检测等一系列技术能力，累计优化总包体积超过 <strong>8MB</strong>。</p> <p>Mpx 在设计之初就考虑了包体积问题，完整继承了 webpack 已有的代码优化能力，如公共模块抽离、tree shaking、混淆压缩等。除此之外，我们还设计开发了业内最完善的分包构建流程，完整支持基于配置声明和依赖分析的普通分包、独立分包及分包异步化的构建输出，极大地缓解了复杂小程序中的主包和总包体积过大的问题。在 Mpx2.9 版本中，我们针对复杂小程序页面组件和 JS 模块众多的特点，对构建产物进行了针对性地优化，进一步降低了构建产物体积，当前版本在主小程序中实测能够在不做任何业务改造的情况下节省了约 <strong>2MB</strong> 总包体积，收效显著，主要优化项如下：</p> <h3 id="模版代码优化"><a href="#模版代码优化" class="header-anchor">#</a> 模版代码优化</h3> <p>Mpx 基于 webpack 进行打包构建，并基于小程序原生 commonjs 支持进行适配改造，以实现 webpack 构建产物在小程序环境下运行，为了将构建产物中的模块和 chunk 链接到一起，webpack 和 mpx 会在构建产物生成一些模版代码进行相关工作，下面是一个页面 js 中包含的模版代码示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> self <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-self<span class="token punctuation">.</span>webpackChunkmpx_test_2_8 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../bundle.js'</span><span class="token punctuation">)</span>
-<span class="token punctuation">(</span>self<span class="token punctuation">.</span>webpackChunkmpx_test_2_8 <span class="token operator">=</span> self<span class="token punctuation">.</span>webpackChunkmpx_test_2_8 <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">405</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token number">1307</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> e<span class="token punctuation">,</span> o</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token number">4236</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token comment">// ...</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">var</span> e
-  e <span class="token operator">=</span> <span class="token number">1307</span><span class="token punctuation">,</span> <span class="token function">t</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span>s <span class="token operator">=</span> e<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-</code></pre></div><p>可以看出模版代码主要由 chunk 链接代码，chunk id，模块 id 和模块包装函数组成，对于中小项目来说，这些模版代码一般不会占用太多体积，但是在滴滴出行主小程序这样的大体量项目下，这部分体积就变得不可忽视，<code>@mpxjs/size-report</code> 的分析结果显示，生产模式下主小程序中模版代码占用体积约为 1.2MB，相当于一个中等复杂度业务的占用体积。</p> <p>我们对模版代码的生成逻辑和生成产物进行分析，发现 webpack 生产模式的默认配置中，很多配置项并不是体积最优的选项，一个典型的例子在于模块/chunk id：为了保障生成产物的内容稳定，来尽可能提升浏览器的缓存利用率，webpack 默认的模块/chunk id 采用 <code>deterministic</code> 模式进行生成，该模式下模块 id 为模块源路径的定长数字 hash，比项目模块总数长 1 位。由于在小程序中代码包按照版本的维度进行全量管理，保证文件局部的内容稳定在小程序环境下无正向意义，这就有了优化空间，我们可以简单将模块/chunk id 的生成逻辑改为数字自增，在主小程序中就能节省出上百 KB 总包体积。</p> <p>类似的可优化点还存在于 chunk 链接代码和模块包装函数当中，我们在 <code>@mpxjs/webpack-plugin@2.9</code> 版本中提供了一个新的配置项 <a href="https://mpxjs.cn/api/compile.html#optimizesize" target="_blank" rel="noopener noreferrer">optimizeSize<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，其中整合了一系列模版代码体积优化配置，开启后就能自动优化构建产物中的模版代码体积，在主小程序中，我们开启 <code>optimizeSize</code> 后可以减少总包体积约 <strong>540KB</strong>，效果非常显著，下面是上述示例在开启 <code>optimizeSize</code> 后的产物对比：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> g <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-g<span class="token punctuation">.</span>c <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../bundle.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>g<span class="token punctuation">.</span>c <span class="token operator">=</span> g<span class="token punctuation">.</span>c <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token number">448</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> e<span class="token punctuation">,</span> o</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token number">463</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-  <span class="token punctuation">}</span>
-  <span class="token comment">// ...</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">var</span> e
-  e <span class="token operator">=</span> <span class="token number">448</span><span class="token punctuation">,</span> <span class="token function">t</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span>s <span class="token operator">=</span> e<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="空模块移除"><a href="#空模块移除" class="header-anchor">#</a> 空模块移除</h3> <p>Mpx 在处理 <code>.mpx</code> 单文件时会将其分拆为 <code>template/js/style/json</code> 四个新模块来进行分别处理，其中 <code>template/style/json</code> 部分的内容会在处理后通过内置的 <code>extractor</code> 抽取输出为静态文件，抽取之后原本分拆出来的模块就会以空模块的形式残留在构建产物中（template 模块在抽取后还需要保留 render 函数和 refs 等信息所以不会成为空模块），如下所示：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/***/</span> <span class="token number">533</span><span class="token operator">:</span>
-<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">__unused_webpack_module<span class="token punctuation">,</span> __unused_webpack_exports<span class="token punctuation">,</span> __webpack_require__</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-<span class="token comment">// ...</span>
-<span class="token comment">/* template */</span>
-<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">535</span><span class="token punctuation">)</span>
-<span class="token comment">/* styles */</span>
-<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">536</span><span class="token punctuation">)</span>
-<span class="token comment">/* json */</span>
-<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">537</span><span class="token punctuation">)</span>
-<span class="token comment">/* script */</span>
-<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">534</span><span class="token punctuation">)</span>
-<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-<span class="token comment">/***/</span> <span class="token number">536</span><span class="token operator">:</span>
-<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-<span class="token comment">/***/</span> <span class="token number">537</span><span class="token operator">:</span>
-<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>从上面示例中可以看出 <code>536/537</code> 模块的定义和引用都是完全不必要的，但由于 webpack 本身对于空模块没有进行识别和优化的手段，在过去的版本中这些空模块代码会占用我们一部分总包体积。在 Mpx2.9 版本中，我们定义了全新的依赖类型 <code>CommonjsExtractDependency</code> 对于这类可能被抽取成为空模块的 <code>request</code> 进行识别处理，当模块内容在完成抽取后为空时，自动将其从模块图中移除，并在产物生成时不再生成其引用代码。该项优化措施内置开启，升级后自动生效，可减少主小程序总包体积约 <strong>232KB</strong>。</p> <h3 id="render函数优化"><a href="#render函数优化" class="header-anchor">#</a> Render函数优化</h3> <p>Render 函数是 Mpx 运行时 <code>setData</code> 优化的一项核心设计，我们在模版编译时将用户模版转换为简易的 render 函数，该函数执行时能够完全模拟视图渲染的数据访问过程，正确地收集当前视图的数据依赖，避免将视图不需要的数据通过 <code>setData</code> 发送到视图中。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/ZQ6p8Rs2m7QCumOll3nmd.jpg" alt="render函数"></p> <p>虽然我们生成的简化版 render 函数仅保留了数据访问逻辑，在代码体积上并不算大，但是仍然存在着一定的优化空间，我们来看下面这个例子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>a
-  <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">)</span><span class="token punctuation">{</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>a
-    <span class="token keyword">this</span><span class="token punctuation">.</span>b
-    <span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">.</span>a
-    <span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">.</span>b
-    <span class="token keyword">this</span><span class="token punctuation">.</span>d
-  <span class="token punctuation">}</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>b
-<span class="token punctuation">}</span>
-</code></pre></div><p>可以看出 <code>if block</code> 下存在着大量冗余不必要的数据访问，例如 <code>this.a</code> 和 <code>this.b</code> 在父级 <code>block</code> 中已经进行过访问，<code>this.c.a</code> 和 <code>this.c.b</code> 由于在 <code>if condition</code> 中进行过 <code>this.c</code> 的访问也不再必要（render函数执行时会对模版依赖数据进行深度diff，父路径访问后子路径就无需再进行访问），上述 render 函数可以优化为：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>a
-  <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">)</span><span class="token punctuation">{</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>d
-  <span class="token punctuation">}</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>b
-<span class="token punctuation">}</span>
-</code></pre></div><p>在 Mpx2.9 版本中，我们通过两轮 <code>ast</code> 遍历（<code>2 pass ast travese</code>）的方式实现了这个优化，在第一轮遍历中，我们收集了数据访问信息并按照 <code>block</code> 结构存储在 <code>blockVisitTree</code> 中，第二轮遍历时依据 <code>blockVisitTree</code> 中的信息对不必要的数据访问进行剪枝优化。</p> <p>除此之外，我们也大幅优化了 render 函数中的数据收集代码，有效地降低了 render 函数的体积占用。</p> <p>该优化目前没有默认开启，可以通过 <code>@mpxjs/webpack-plugin</code> 中的 <a href="https://mpxjs.cn/api/compile.html#optimizerenderrules" target="_blank" rel="noopener noreferrer">optimizeRenderRules<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项配置生效范围进行开启，
-全量开启后在主小程序中实测可节省总包体积约 <strong>1507KB</strong>。</p> <h2 id="未来规划"><a href="#未来规划" class="header-anchor">#</a> 未来规划</h2> <p>在未来，我们对 Mpx 构建产物还有进一步的优化方案可以探索实施，主要分为两个方向：</p> <ul><li>编译注入代码优化，在功能不变的情况下简化编译注入的代码，对于 render 函数也有一种运行时有损的方案（略微增大运行时开销）可以尝试</li> <li>模版和JSON压缩，对模版和JSON中的组件名及组件路径进行短哈希压缩，缺点是丢失dist产物的可读性，可能需要对其提供 sourceMap 支持</li></ul> <p>除此之外，我们近期的框架升级计划还包括：</p> <ul><li>局部运行时渲染增强</li> <li>数据响应升级为 proxy 实现，输出 web 升级为 vue3</li> <li>支付宝 2.0 基础库适配优化</li> <li>微信 skyline 适配优化</li> <li>输出 Hummer 能力完善</li></ul> <p>在构建提速方面，我们也会在以下方向进行探索：</p> <ul><li>输出 web 支持 vite 构建</li> <li>基于模块联邦的分布式构建</li> <li>基于 Rust 的高性能构建探索</li></ul> <p>最后，特别感谢@徐伟东、@闫宇和@朱志恒对于 2.9 版本功能开发的突出贡献，也欢迎大家使用 Mpx 进行小程序跨端开发并加入社区共建。</p> <p>Github：https://github.com/didi/mpx</p> <p>官网/文档：https://mpxjs.cn/</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/52.10bb0251.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/2.9-release.html b/docs-vuepress/.vuepress/dist/articles/2.9-release.html
deleted file mode 100644
index f17db1933f..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/2.9-release.html
+++ /dev/null
@@ -1,285 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/53.7207ffc5.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" aria-current="page" class="active sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/2.9-release.html#原子类支持" class="sidebar-link">原子类支持</a></li><li class="sidebar-sub-header"><a href="/articles/2.9-release.html#输出-web-支持-ssr" class="sidebar-link">输出 web 支持 SSR</a></li><li class="sidebar-sub-header"><a href="/articles/2.9-release.html#包体积优化" class="sidebar-link">包体积优化</a></li><li class="sidebar-sub-header"><a href="/articles/2.9-release.html#未来规划" class="sidebar-link">未来规划</a></li></ul></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化"><a href="#mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化" class="header-anchor">#</a> Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</h1> <blockquote><p>作者：<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">hiyuki<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer">Mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 是滴滴开源的一款增强型跨端小程序框架，自2018年立项开源以来如今已经进入第六个年头，在这六年间，Mpx 根植于业务，与业务共同成长，针对小程序业务开发中遇到的各类痛点问题提出了解决方案，并在集团内部建设了完善的小程序跨端开发生态。目前，Mpx 已经覆盖支持了集团内部全量小程序业务开发，成为了集团小程序开发的统一技术标准。</p> <p>随着小程序业务的发展演进，性能和包体积的重要性愈发凸显，Mpx从设计之初就非常重视性能和包体积的优化，本次的 <strong>Mpx2.9</strong> 版本更新带来的三大核心特性——原子类、SSR 和包体积优化也都与性能和包体积息息相关，下面我们逐个展开介绍。</p> <h2 id="原子类支持"><a href="#原子类支持" class="header-anchor">#</a> 原子类支持</h2> <p>原子类(utility-first CSS)是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，比较知名的有 <a href="https://github.com/" target="_blank" rel="noopener noreferrer">Github<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<a href="https://openai.com/" target="_blank" rel="noopener noreferrer">OpenAI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<a href="https://top10.netflix.com/" target="_blank" rel="noopener noreferrer">Netflix<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://www.jpl.nasa.gov/" target="_blank" rel="noopener noreferrer">NASA官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等。使用原子类离不开原子类框架的支持，常用的原子类框架有 <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwindcss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://windicss.org/" target="_blank" rel="noopener noreferrer">Windicss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://unocss.dev/" target="_blank" rel="noopener noreferrer">Unocss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等。</p> <p>在 Mpx2.9 版本中，我们在框架中内置了原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx 页面/组件模板中直接使用一些预定义的基础样式类，诸如 flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：</p> <div class="language-html extra-class"><pre class="language-html"><code>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-base text-black font-semibold mb-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-          Erin Lindford
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-gray-500 font-medium pb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-          Product Engineer
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-          Message
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/Or3aaN-mmxV8pK-LmEVPm_demo.png" alt="utility-css-demo"></p> <p>相较于传统的自定义类编写样式的方式，使用原子类能给你带来以下这些好处：</p> <ul><li><strong>不用再烦恼于为自定义类取类名</strong>，传统样式开发中，我们仅仅是为某个元素定义样式就需要绞尽脑汁发明一些抽象的类名，还得提防类名冲突，使用原子类可以完全将你从这种琐碎无趣的工作中解放；</li> <li><strong>停止 css 体积的无序增长</strong>，传统样式开发中，css 体积会随着你的迭代不断增长，而在原子类中，一切样式都可以复用，你几乎不需要编写新的 css；</li> <li><strong>让调整样式变得更加安全</strong>，传统 css 是全局的，当你修改某个样式时无法保障其不会破坏其他地方的样式，而你在模板中使用的原子类是本地的，你完全不用担心修改它会影响其他地方。</li></ul> <p>而相较于使用内联样式，原子类也有一些重要的优势：</p> <ul><li><strong>约束下的设计</strong>，使用内联样式时，里面的每一个数值都是魔法数字（magic number）
-，而通过原子工具类，你可以选择一些符合预定义设计规范的样式，便于构筑具有视觉一致性的UI；</li> <li><strong>响应式设计</strong>，你无法在内联样式中使用媒体查询，然而通过原子类框架中提供的响应式工具，你可以轻而易举地构建出响应式界面；</li> <li><strong>Hover、focus 和其他状态</strong>，使用内联样式无法定义特定状态下的样式，如 hover 和 focus，通过原子类框架的状态变量能力，我们可以轻松为这些状态定义样式。</li></ul> <p>看到这里相信你已经迫不及待地想要在 Mpx 中体验原子类开发了吧，使用最新版本的 <code>@mpxjs/cli</code> 脚手架创建项目时，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用原子类，可使用的工具类可以参考 <a href="https://unocss.dev/interactive/" target="_blank" rel="noopener noreferrer">交互示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，在已有项目中开启原子类支持可以参考<a href="https://mpxjs.cn/guide/advance/utility-first-css.html#compile-config" target="_blank" rel="noopener noreferrer">配置指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="小程序原子类使用注意事项"><a href="#小程序原子类使用注意事项" class="header-anchor">#</a> 小程序原子类使用注意事项</h3> <p>小程序和 web 环境对于 css 的支持存在底层差异，小程序内也存在大量自身独有的技术特性，Mpx 在支持原子类时针对这些环境特异性进行了抹平和适配，在框架的支持下，我们实现了大部分（超过90%）原子类功能和工具类在小程序环境下正常使用，并额外支持了原子类产物的分包输出和样式隔离下的原子类使用，详情如下：</p> <h4 id="特殊字符转义"><a href="#特殊字符转义" class="header-anchor">#</a> 特殊字符转义</h4> <p>现代原子类框架支持 <code>value auto-infer</code>（值自动推导），可以在模版中根据相关规则书写灵活的自定义值原子类，如 <code>p-5px bg-[hsl(211.7,81.9%,69.6%)]</code> 等，针对原子类中出现的 <code>[</code> <code>(</code> <code>,</code> 等特殊字符，在 web 中会通过转义字符 <code>\</code> 进行转义，由于小程序环境下不支持 css 选择器中出现 <code>\</code> 转义字符，我们内置支持了一套不带 <code>\</code> 的转义规则对这些特殊字符进行转义，同时替换模版和 css 文件中的类名，内建的默认转义规则如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> escapeMap <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token string-property property">'('</span><span class="token operator">:</span> <span class="token string">'_pl_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">')'</span><span class="token operator">:</span> <span class="token string">'_pr_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">'['</span><span class="token operator">:</span> <span class="token string">'_bl_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">']'</span><span class="token operator">:</span> <span class="token string">'_br_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">'{'</span><span class="token operator">:</span> <span class="token string">'_cl_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">'}'</span><span class="token operator">:</span> <span class="token string">'_cr_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">'#'</span><span class="token operator">:</span> <span class="token string">'_h_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">'!'</span><span class="token operator">:</span> <span class="token string">'_i_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">'/'</span><span class="token operator">:</span> <span class="token string">'_s_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">'.'</span><span class="token operator">:</span> <span class="token string">'_d_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">':'</span><span class="token operator">:</span> <span class="token string">'_c_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">','</span><span class="token operator">:</span> <span class="token string">'_2c_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">'%'</span><span class="token operator">:</span> <span class="token string">'_p_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">'\''</span><span class="token operator">:</span> <span class="token string">'_q_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">'&quot;'</span><span class="token operator">:</span> <span class="token string">'_dq_'</span><span class="token punctuation">,</span>
-  <span class="token string-property property">'+'</span><span class="token operator">:</span> <span class="token string">'_a_'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">$</span><span class="token operator">:</span> <span class="token string">'_si_'</span><span class="token punctuation">,</span>
-  <span class="token comment">// unknown用于兜底不在上述范围中未知的转义字符</span>
-  <span class="token literal-property property">unknown</span><span class="token operator">:</span> <span class="token string">'_u_'</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>与此同时，用户也可以通过传递 <code>@mpxjs/unocss-plugin</code> 的 <a href="https://mpxjs.cn/api/compile.html#escapeMap" target="_blank" rel="noopener noreferrer">escapeMap<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项来覆盖内建的转义规则。</p> <h4 id="原子类分包输出"><a href="#原子类分包输出" class="header-anchor">#</a> 原子类分包输出</h4> <p>在 web 中，原子类会被全部打包输出单个样式文件，一般会放置在顶层样式表中以供全局访问，但在小程序中这种全量的输出策略并不是最优的，主要原因在于小程序中可供全局访问的主包体积存在 <strong>2M 大小限制</strong>，主包体积十分紧缺珍贵，Mpx 在构建输出时遵循着分包优先的原则，尽可能充分利用分包体积从而减少对主包体积的占用，再进行原子类产物输出时，我们也遵循了相同的原则。</p> <p>在Mpx中，我们在收集原子类时同时记录了每个原子类的引用分包，在收集结束后根据每个原子类的分包引用数量决定该原子类应该输出到主包还是分包当中，我们在 <code>@mpxjs/unocss-plugin</code> 中提供了 <a href="https://mpxjs.cn/api/compile.html#minCount" target="_blank" rel="noopener noreferrer">minCount<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项来决定分包的输出规则，该配置项的默认值为2，即当一个原子类被2个或以上分包引用时，会被作为公共原子类抽取到主包中，否则输出到所属分包中，这也是全局最优的策略。当我们想要让原子类输出产物更少地占用主包体积时，我们也可以将<code>minCount</code>值调大，让原子类抽取到主包的条件更加苛刻，不过这样也会伴随着原子类分包冗余的增加。</p> <p><code>unocss.config.js</code> 配置中定义的 <code>safelist</code> 原子类默认会输出到主包，为了组件局部使用的 <code>safelist</code> 有输出到分包的机会，我们在模版中提供了<a href="https://mpxjs.cn/api/compile.html#commentConfig" target="_blank" rel="noopener noreferrer">注释配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（comments config），灵感来源于 <code>webpack</code> 中的魔法注释（magic comments），用户可以在组件模版中通过<code>注释配置</code>声明当前组件所需的 <code>safelist</code>，对应的原子类也会根据上述的规则输出到主包或分包中，使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!-- mpx_config_safelist: 'text-red-500 bg-blue-500' --&gt;</span>
-  <span class="token comment">&lt;!-- 动态样式中可以使用text-red-500和bg-blue-500原子类 --&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{classObj}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!-- ... --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h4 id="样式隔离与组件分包异步"><a href="#样式隔离与组件分包异步" class="header-anchor">#</a> 样式隔离与组件分包异步</h4> <p>在小程序中，自定义组件的样式默认是隔离的，web 中通过全局样式访问原子类的方式不再生效，不过由于小程序提供了<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB" target="_blank" rel="noopener noreferrer">样式隔离配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，我们可以将该组件样式隔离配置调整为 <code>apply-shared</code> 来获取页面或 app 中定义的原子类，但是当我们在使用传统类名和原子类混合开发或者迁移原子类的过程中，我们往往希望保留原本自定义组件的样式隔离。</p> <p>针对这种情况，我们在 <code>@mpxjs/unocss-plugin</code> 中提供了 <a href="https://mpxjs.cn/api/compile.html#styleIsolation" target="_blank" rel="noopener noreferrer">styleIsolation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项，可选设置为 <code>isolated</code>|<code>apply-shared</code>，当设置为 <code>isolated</code> 时每个组件都会通过 <code>@import</code> 独立引用主包或者分包的原子类样式文件，因此不会受到样式隔离的影响；当设置为 <code>apply-shared</code> 时，只有 app 和分包页面会引用对应的原子类样式文件，自定义组件需要通过配置样式隔离为 <code>apply-shared</code> 使原子类生效。</p> <p>在组件分包异步的情况下对应组件即使将样式隔离配置为 <code>apply-shared</code> 的情况下，<code>@mpxjs/unocss-plugin</code> 也需要将  <code>styleIsolation</code> 设置为 <code>isolated</code> 才能正常工作，原因在于组件分包异步的情况下，组件被其他分包的页面所引用渲染，由于上述原子类样式分包输出的规则，其他分包的页面中可能并不包含当前组件所需的原子类，只有在 <code>isolated</code> 模式下由组件自身引用所需的原子类样式才能保证正常工作，类似于 <code>safelist</code>，我们也提供了<a href="https://mpxjs.cn/api/compile.html#commentConfig" target="_blank" rel="noopener noreferrer">注释配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的方式对组件的 <code>styleIsolation</code> 模式进行局部配置，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!-- mpx_config_styleIsolation: 'isolated' --&gt;</span>
-  <span class="token comment">&lt;!-- 当前组件会直接引用对应主包或分包的原子类样式 --&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>@dark:(text-white bg-dark-500)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- ... --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="原子类使用参考文档"><a href="#原子类使用参考文档" class="header-anchor">#</a> 原子类使用参考文档</h3> <p>Mpx 中使用原子类的详细参考文档如下：</p> <ul><li><a href="https://mpxjs.cn/guide/advance/utility-first-css.html" target="_blank" rel="noopener noreferrer">原子类使用指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://mpxjs.cn/api/compile.html#MpxUnocssPlugin" target="_blank" rel="noopener noreferrer">原子类 API 参考<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="输出-web-支持-ssr"><a href="#输出-web-支持-ssr" class="header-anchor">#</a> 输出 web 支持 SSR</h2> <p>近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，各类SSR框架层出不穷，未来进一步提升性能表现，在 SSR 的基础上还演进出 <a href="https://docs.astro.build/en/concepts/islands/" target="_blank" rel="noopener noreferrer">islands architecture<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://qwik.builder.io/docs/concepts/resumable/" target="_blank" rel="noopener noreferrer">0 hydration<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等更加精细复杂的理念和架构。</p> <p>近两年随着团队对于前端性能的重视，SSR/SSG 技术也在团队业务中逐步推广落地，并在首屏性能方面取得了显著的收效。但由于过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 Mpx2.9 版本中，我们对 web 输出流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整实现了 SSR 技术方案。</p> <h3 id="配置使用-ssr"><a href="#配置使用-ssr" class="header-anchor">#</a> 配置使用 SSR</h3> <p>在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。</p> <p><img src="https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85" alt="Vue SSR流程"></p> <p>Mpx SSR 实现的大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：</p> <h4 id="构建server-client-bundle"><a href="#构建server-client-bundle" class="header-anchor">#</a> 构建server/client bundle</h4> <p>SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。
-在 Vue 中，我们需要提供 <code>entry-server.js</code> 和 <code>entry-client.js</code> 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 <code>app.mpx</code> 作为统一构建入口，无需区分 server 和 client。</p> <h5 id="服务端构建配置"><a href="#服务端构建配置" class="header-anchor">#</a> 服务端构建配置</h5> <p>服务端配置中除了将 entry 制定为 <code>app.mpx</code> 及其它基础配置外，最重要的是安装 <code>vue-server-renderer</code> 包中提供的  <code>server-plugin</code> 插件，该插件能够构建产出 <code>vue-ssr-server-bundle.json</code> 文件供 <code>renderer</code> 后续消费。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.server.config.js</span>
-<span class="token keyword">const</span> VueSSRServerPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer/server-plugin'</span><span class="token punctuation">)</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 将 entry 指向项目的 app.mpx 文件</span>
-  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./app.mpx'</span><span class="token punctuation">,</span>
-  <span class="token comment">// ...</span>
-  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-   <span class="token comment">// 产出 `vue-ssr-server-bundle.json`</span>
-    <span class="token keyword">new</span> <span class="token class-name">VueSSRServerPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#server-config" target="_blank" rel="noopener noreferrer">Vue SSR的服务端配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="客户端构建配置"><a href="#客户端构建配置" class="header-anchor">#</a> 客户端构建配置</h5> <p>类似服务端构建配置，在客户端构建中我们需要使用 <code>vue-server-renderer</code> 包中 <code>client-plugin</code> 插件来帮助我们生成客户端环境的资源清单 <code>vue-ssr-client-manifest.json</code>，并供 <code>renderer</code> 后续消费。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.client.config.js</span>
-<span class="token keyword">const</span> VueSSRClientPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer/client-plugin'</span><span class="token punctuation">)</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 将 entry 指向项目的 app.mpx 文件</span>
-  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./app.mpx'</span><span class="token punctuation">,</span>
-  <span class="token comment">// ...</span>
-  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token comment">// 产出 `vue-ssr-client-manifest.json`。</span>
-    <span class="token keyword">new</span> <span class="token class-name">VueSSRClientPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#client-config" target="_blank" rel="noopener noreferrer">Vue SSR的客户端配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="准备页面模版"><a href="#准备页面模版" class="header-anchor">#</a> 准备页面模版</h4> <p>SSR 渲染中，我们创建 <code>renderer</code> 需要一个页面模板，简单的示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Hello<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--vue-ssr-outlet--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 <code>&lt;!--vue-ssr-outlet--&gt;</code>注释，标记 SSR 渲染产物的插入位置，如使用 <code>@mpxjs/cli</code> 脚手架创建 SSR 项目，该模版已经内置于脚手架中。</p> <h4 id="集成启动-ssr-服务"><a href="#集成启动-ssr-服务" class="header-anchor">#</a> 集成启动 SSR 服务</h4> <p>当我们准备好页面模版和双端构建产物后，我们就可以创建 <code>renderer</code> 并与 Node 服务进行集成，启动 SSR 服务，下面以 <code>express</code> 为例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//server.js</span>
-<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> createBundleRenderer <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer'</span><span class="token punctuation">)</span>
-<span class="token comment">// 通过 vue-server-renderer/server-plugin 生成的文件</span>
-<span class="token keyword">const</span> serverBundle <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../dist/server/vue-ssr-server-bundle.json'</span><span class="token punctuation">)</span>
-<span class="token comment">// 通过 vue-server-renderer/client-plugin 生成的文件</span>
-<span class="token keyword">const</span> clientManifest <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../dist/client/vue-ssr-client-manifest.json'</span><span class="token punctuation">)</span>
- <span class="token comment">// 页面模版文件</span>
-<span class="token keyword">const</span> template <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token string">'../src/index.template.html'</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span>
-<span class="token comment">// 创建 renderer 渲染器</span>
-<span class="token keyword">const</span> renderer <span class="token operator">=</span> <span class="token function">createBundleRenderer</span><span class="token punctuation">(</span>serverBundle<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">runInNewContext</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
-    template<span class="token punctuation">,</span>
-    clientManifest<span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token comment">// 注册启动 SSR 服务</span>
-app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> req<span class="token punctuation">.</span>url <span class="token punctuation">}</span>
-  renderer<span class="token punctuation">.</span><span class="token function">renderToString</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> html</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      res<span class="token punctuation">.</span><span class="token function">status</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'Internal Server Error'</span><span class="token punctuation">)</span>
-      <span class="token keyword">return</span>
-    <span class="token punctuation">}</span>
-    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8080</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="ssr-生命周期"><a href="#ssr-生命周期" class="header-anchor">#</a> SSR 生命周期</h3> <p>在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是<code>onAppInit</code>、<code>serverPrefetch</code> 和 <code>onSSRAppCreated</code>，以统一服务端与客户端的构建入口，下面展开介绍：</p> <h4 id="onappinit"><a href="#onappinit" class="header-anchor">#</a> onAppInit</h4> <p>在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，<code>onAppInit</code> 生命周期会在应用创建 <code>new Vue(...)</code> 前被调用，其执行的返回结果会被合并到创建应用的 <code>options</code> 中</p> <p>很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 <code>@mpxjs/pinia</code> 作为全局状态管理工具，我们可以在 <code>onAppInit</code> 中返回全新的 <code>pinia</code> 示例避免产生跨请求状态污染，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
-<span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
-
-<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-  <span class="token function">onAppInit</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      pinia
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="serverprefetch"><a href="#serverprefetch" class="header-anchor">#</a> serverPrefetch</h4> <p>当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：</p> <p>选项式 API：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> useStore <span class="token keyword">from</span> <span class="token string">'../store/index'</span>
-
-<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">//...</span>
-  <span class="token function">serverPrefetch</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query
-    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$pinia<span class="token punctuation">)</span>
-    <span class="token comment">// return the promise from the action, fetch data and update state</span>
-    <span class="token keyword">return</span> store<span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>组合式 API：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onServerPrefetch<span class="token punctuation">,</span> getCurrentInstance<span class="token punctuation">,</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> useStore <span class="token keyword">from</span> <span class="token string">'../store/index'</span>
-
-<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">userStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token function">onServerPrefetch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token function">getCurrentInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>proxy<span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query
-      <span class="token comment">// return the promise from the action, fetch data and update state</span>
-      <span class="token keyword">return</span> store<span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>关于数据预拉取更详细的说明可以查看<a href="https://v2.ssr.vuejs.org/guide/data.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h4 id="onssrappcreated"><a href="#onssrappcreated" class="header-anchor">#</a> onSSRAppCreated</h4> <p>在 Vue SSR 项目中，我们会在 <code>entry-server.js</code> 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 <code>app</code>。</p> <p>在 Mpx SSR 中，我们将这部分逻辑整合在 <code>onSSRAppCreated</code> 中执行，该生命周期执行时用户可以从参数中获取应用实例 <code>app</code>、路由实例 <code>router</code>、数据管理实例 <code>pinia</code> 和 SSR 上下文 <code>context</code>，在完成必要的操作后，该生命周期需要返回一个 <code>resolve(app)</code> 的 promise。</p> <p>通常我们会在 <code>onSSRAppCreated</code> 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
-<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token comment">// ...,</span>
-    <span class="token function">onSSRAppCreated</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> pinia<span class="token punctuation">,</span> router<span class="token punctuation">,</span> app<span class="token punctuation">,</span> context <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token comment">// 设置服务端路由路径</span>
-        router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
-        router<span class="token punctuation">.</span><span class="token function">onReady</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-          <span class="token comment">// 应用完成渲染时执行</span>
-          context<span class="token punctuation">.</span><span class="token function-variable function">rendered</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-            <span class="token comment">// 将服务端渲染后得到的 pinia.state 同步到 context.state 中，</span>
-            <span class="token comment">// context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`</span>
-            <span class="token comment">// 注入到 HTML 中，并在客户端运行时再读取同步</span>
-            context<span class="token punctuation">.</span>state <span class="token operator">=</span> pinia<span class="token punctuation">.</span>state<span class="token punctuation">.</span>value
-          <span class="token punctuation">}</span>
-          <span class="token comment">// 返回应用程序实例</span>
-          <span class="token function">resolve</span><span class="token punctuation">(</span>app<span class="token punctuation">)</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> reject<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。</p> <h3 id="其他注意事项"><a href="#其他注意事项" class="header-anchor">#</a> 其他注意事项</h3> <ol><li><p>Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。</p></li> <li><p>在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。</p></li> <li><p>由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 <code>mpx.config.webRouteConfig</code> 将路由模式设置成 <code>history</code> 模式。</p></li></ol> <h2 id="包体积优化"><a href="#包体积优化" class="header-anchor">#</a> 包体积优化</h2> <p>近几年来随着小程序的商业成功和用户增长，各大互联网公司都在加大对小程序业务的投入，小程序的体量和复杂性都在快速增长，在这样的背景下，小程序的包体积大小成为了制约小程序业务迭代发展的一大限制，同时过大的包体积也会显著影响小程序的性能表现。</p> <p>Mpx 在设计之初就考虑了包体积问题，完整继承了 webpack 已有的代码优化能力，如公共模块抽离、tree shaking、混淆压缩等。除此之外，我们还设计开发了业内最完善的分包构建流程，完整支持基于配置声明和依赖分析的普通分包、独立分包及分包异步化的构建输出，极大地缓解了复杂小程序中的主包和总包体积过大的问题。在 Mpx2.9 版本中，我们针对复杂小程序页面组件和 JS 模块众多的特点，对构建产物进行了针对性地优化，进一步降低了构建产物体积，主要优化项如下：</p> <h3 id="模版代码优化"><a href="#模版代码优化" class="header-anchor">#</a> 模版代码优化</h3> <p>Mpx 通过 webpack 进行打包构建，并对小程序原生 commonjs 支持进行适配改造，以实现 webpack 构建产物在小程序环境下运行，为了将构建产物中的模块和 chunk 链接到一起，webpack 和 mpx 会在构建产物生成一些模版代码进行相关工作，下面是一个页面 js 中包含的模版代码示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> self <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-self<span class="token punctuation">.</span>webpackChunkmpx_test_2_8 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../bundle.js'</span><span class="token punctuation">)</span>
-<span class="token punctuation">(</span>self<span class="token punctuation">.</span>webpackChunkmpx_test_2_8 <span class="token operator">=</span> self<span class="token punctuation">.</span>webpackChunkmpx_test_2_8 <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">405</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token number">1307</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> e<span class="token punctuation">,</span> o</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token number">4236</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token comment">// ...</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">var</span> e
-  e <span class="token operator">=</span> <span class="token number">1307</span><span class="token punctuation">,</span> <span class="token function">t</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span>s <span class="token operator">=</span> e<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-</code></pre></div><p>可以看出模版代码主要由 chunk 链接代码，chunk id，模块 id 和模块包装函数组成，对于中小项目来说，这些模版代码一般不会占用太多体积，但是在复杂大体量小程序中众多模块的叠加效应下，这部分体积就变得不可忽视。</p> <p>我们对模版代码的生成逻辑和生成产物进行分析，发现 webpack 生产模式的默认配置中，很多配置项并不是体积最优的选项，一个典型的例子在于模块/chunk id：为了保障生成产物的内容稳定，来尽可能提升浏览器的缓存利用率，webpack 默认的模块/chunk id 采用 <code>deterministic</code> 模式进行生成，该模式下模块 id 为模块源路径的定长数字 hash，比项目模块总数长 1 位。由于在小程序中代码包按照版本的维度进行全量管理，保证文件局部的内容稳定在小程序环境下无正向意义，这就有了优化空间，我们可以简单将模块/chunk id 的生成逻辑改为数字自增，在主小程序中就能节省出上百 KB 总包体积。</p> <p>类似的可优化点还存在于 chunk 链接代码和模块包装函数当中，我们在 <code>@mpxjs/webpack-plugin@2.9</code> 版本中提供了一个新的配置项 <a href="https://mpxjs.cn/api/compile.html#optimizesize" target="_blank" rel="noopener noreferrer">optimizeSize<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，其中整合了一系列模版代码体积优化配置，开启后就能自动优化构建产物中的模版代码体积，在实际业务中，我们开启 <code>optimizeSize</code> 后可以减少总包体积约 <strong>1.6%</strong>，效果非常显著，下面是上述示例在开启 <code>optimizeSize</code> 后的产物对比：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> g <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-g<span class="token punctuation">.</span>c <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../bundle.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>g<span class="token punctuation">.</span>c <span class="token operator">=</span> g<span class="token punctuation">.</span>c <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token number">448</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t<span class="token punctuation">,</span> e<span class="token punctuation">,</span> o</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token number">463</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-  <span class="token punctuation">}</span>
-  <span class="token comment">// ...</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">t</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">var</span> e
-  e <span class="token operator">=</span> <span class="token number">448</span><span class="token punctuation">,</span> <span class="token function">t</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span>s <span class="token operator">=</span> e<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="空模块移除"><a href="#空模块移除" class="header-anchor">#</a> 空模块移除</h3> <p>Mpx 在处理 <code>.mpx</code> 单文件时会将其分拆为 <code>template/js/style/json</code> 四个新模块来进行分别处理，其中 <code>template/style/json</code> 部分的内容会在处理后通过内置的 <code>extractor</code> 抽取输出为静态文件，抽取之后原本分拆出来的模块就会以空模块的形式残留在构建产物中（template 模块在抽取后还需要保留 render 函数和 refs 等信息所以不会成为空模块），如下所示：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/***/</span> <span class="token number">533</span><span class="token operator">:</span>
-<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">__unused_webpack_module<span class="token punctuation">,</span> __unused_webpack_exports<span class="token punctuation">,</span> __webpack_require__</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-<span class="token comment">// ...</span>
-<span class="token comment">/* template */</span>
-<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">535</span><span class="token punctuation">)</span>
-<span class="token comment">/* styles */</span>
-<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">536</span><span class="token punctuation">)</span>
-<span class="token comment">/* json */</span>
-<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">537</span><span class="token punctuation">)</span>
-<span class="token comment">/* script */</span>
-<span class="token function">__webpack_require__</span><span class="token punctuation">(</span><span class="token number">534</span><span class="token punctuation">)</span>
-<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-<span class="token comment">/***/</span> <span class="token number">536</span><span class="token operator">:</span>
-<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-<span class="token comment">/***/</span> <span class="token number">537</span><span class="token operator">:</span>
-<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>从上面示例中可以看出 <code>536/537</code> 模块的定义和引用都是完全不必要的，但由于 webpack 本身对于空模块没有进行识别和优化的手段，在过去的版本中这些空模块代码会占用我们一部分总包体积。在 Mpx2.9 版本中，我们定义了全新的依赖类型 <code>CommonjsExtractDependency</code> 对于这类可能被抽取成为空模块的 <code>request</code> 进行识别处理，当模块内容在完成抽取后为空时，自动将其从模块图中移除，并在产物生成时不再生成其引用代码。该项优化措施内置开启，升级后自动生效，在实际业务中可减少总包体积约 <strong>0.7%</strong>。</p> <h3 id="render函数优化"><a href="#render函数优化" class="header-anchor">#</a> Render函数优化</h3> <p>Render 函数是 Mpx 运行时 <code>setData</code> 优化的一项核心设计，我们在模版编译时将用户模版转换为简易的 render 函数，该函数执行时能够完全模拟视图渲染的数据访问过程，正确地收集当前视图的数据依赖，避免将视图不需要的数据通过 <code>setData</code> 发送到视图中。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/ZQ6p8Rs2m7QCumOll3nmd.jpg" alt="render函数"></p> <p>虽然我们生成的简化版 render 函数仅保留了数据访问逻辑，在代码体积上并不算大，但是仍然存在着一定的优化空间，我们来看下面这个例子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>a
-  <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">)</span><span class="token punctuation">{</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>a
-    <span class="token keyword">this</span><span class="token punctuation">.</span>b
-    <span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">.</span>a
-    <span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">.</span>b
-    <span class="token keyword">this</span><span class="token punctuation">.</span>d
-  <span class="token punctuation">}</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>b
-<span class="token punctuation">}</span>
-</code></pre></div><p>可以看出 <code>if block</code> 下存在着大量冗余不必要的数据访问，例如 <code>this.a</code> 和 <code>this.b</code> 在父级 <code>block</code> 中已经进行过访问，<code>this.c.a</code> 和 <code>this.c.b</code> 由于在 <code>if condition</code> 中进行过 <code>this.c</code> 的访问也不再必要（render函数执行时会对模版依赖数据进行深度diff，父路径访问后子路径就无需再进行访问），上述 render 函数可以优化为：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>a
-  <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>c<span class="token punctuation">)</span><span class="token punctuation">{</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>d
-  <span class="token punctuation">}</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>b
-<span class="token punctuation">}</span>
-</code></pre></div><p>在 Mpx2.9 版本中，我们通过两轮 <code>ast</code> 遍历（<code>2 pass ast travese</code>）的方式实现了这个优化，在第一轮遍历中，我们收集了数据访问信息并按照 <code>block</code> 结构存储在 <code>blockVisitTree</code> 中，第二轮遍历时依据 <code>blockVisitTree</code> 中的信息对不必要的数据访问进行剪枝优化。</p> <p>除此之外，我们也大幅优化了 render 函数中的数据收集代码，有效地降低了 render 函数的体积占用。</p> <p>该优化目前没有默认开启，可以通过 <code>@mpxjs/webpack-plugin</code> 中的 <a href="https://mpxjs.cn/api/compile.html#optimizerenderrules" target="_blank" rel="noopener noreferrer">optimizeRenderRules<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置项配置生效范围进行开启，全量开启后在实际业务中可节省总包体积约 <strong>5%</strong>。</p> <h2 id="未来规划"><a href="#未来规划" class="header-anchor">#</a> 未来规划</h2> <p>在未来，我们对 Mpx 构建产物还有进一步的优化方案可以探索实施，主要分为两个方向：</p> <ul><li>编译注入代码优化，在功能不变的情况下简化编译注入的代码，对于 render 函数也有一种运行时有损的方案（略微增大运行时开销）可以尝试</li> <li>模版和JSON压缩，对模版和JSON中的组件名及组件路径进行短哈希压缩，缺点是丢失dist产物的可读性，可能需要对其提供 sourceMap 支持</li></ul> <p>除此之外，我们近期的框架升级计划还包括：</p> <ul><li>局部运行时渲染增强</li> <li>数据响应升级为 proxy 实现，输出 web 升级为 vue3</li> <li>支付宝 2.0 基础库适配优化</li> <li>微信 skyline 适配优化</li> <li>输出 Hummer 能力完善</li></ul> <p>在构建提速方面，我们也会在以下方向进行探索：</p> <ul><li>输出 web 支持 vite 构建</li> <li>基于模块联邦的分布式构建</li> <li>基于 Rust 的高性能构建探索</li></ul> <p>最后，特别感谢@<a href="https://github.com/pagnkelly" target="_blank" rel="noopener noreferrer">pagnkelly<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、@<a href="https://github.com/yandadaFreedom" target="_blank" rel="noopener noreferrer">yandadaFreedom<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>和
-@<a href="https://github.com/zhuzhh" target="_blank" rel="noopener noreferrer">zhuzhh<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>对于 2.9 版本功能开发的突出贡献，也欢迎大家使用 Mpx 进行小程序跨端开发并加入社区共建。</p> <p>Github：https://github.com/didi/mpx</p> <p>官网/文档：https://mpxjs.cn/</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/articles/2.8-release.html" class="prev">
-        Mpx2.8 版本正式发布，使用组合式 API 开发小程序
-      </a></span> <span class="next"><a href="/articles/mpx-cube-ui.html">
-        小程序跨端组件库 Mpx-cube-ui 开源啦
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/53.7207ffc5.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/index.html b/docs-vuepress/.vuepress/dist/articles/index.html
deleted file mode 100644
index 091d29837f..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx框架相关文章 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/54.af3d3dcd.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx框架相关文章"><a href="#mpx框架相关文章" class="header-anchor">#</a> Mpx框架相关文章</h1> <ul><li><a href="/articles/1.0.html">滴滴开源小程序框架Mpx</a></li> <li><a href="/articles/2.0.html">Mpx发布2.0，完美支持跨平台开发</a></li> <li><a href="/articles/performance.html">小程序框架运行时性能大测评</a></li> <li><a href="/articles/mpx1.html">Mpx框架初体验</a></li> <li><a href="/articles/mpx2.html">Mpx框架技术揭秘</a></li> <li><a href="/articles/size-control.html">基于Mpx框架做体积优化</a></li> <li><a href="/articles/ts-derivation.html">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li> <li><a href="/articles/2.7-release.html">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li> <li><a href="/articles/2.8-release.html">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li> <li><a href="/articles/mpx-cli-next.html">Mpx-cli 插件化改造</a></li> <li><a href="/articles/unit-test.html">Mpx 小程序单元测试能力建设与实践</a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/54.af3d3dcd.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/mpx-cli-next.html b/docs-vuepress/.vuepress/dist/articles/mpx-cli-next.html
deleted file mode 100644
index 0d3e732cba..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/mpx-cli-next.html
+++ /dev/null
@@ -1,137 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>@mpxjs/cli 插件化改造 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/55.2d6ae2e1.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" aria-current="page" class="active sidebar-link">Mpx-cli 插件化改造</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx-cli-next.html#背景-现状" class="sidebar-link">背景 &amp; 现状</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cli-next.html#mpxjs-cli-2-x-自身的痛点" class="sidebar-link">mpxjs/cli@2.x 自身的痛点</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cli-next.html#插件化改造方案" class="sidebar-link">插件化改造方案</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cli-next.html#没有银弹" class="sidebar-link">没有银弹</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cli-next.html#如何开发一个基于-mpx-的业务脚手架插件" class="sidebar-link">如何开发一个基于 mpx 的业务脚手架插件</a></li></ul></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpxjs-cli-插件化改造"><a href="#mpxjs-cli-插件化改造" class="header-anchor">#</a> @mpxjs/cli 插件化改造</h1> <p><a href="https://github.com/mpx-ecology/mpx-cli" target="_blank" rel="noopener noreferrer">@mxpjs/cli 地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="背景-现状"><a href="#背景-现状" class="header-anchor">#</a> 背景 &amp; 现状</h2> <p>Mpx 脚手架 <code>@mpxjs/cli</code> 作为 Mpx 生态当中比较重要的一部分，是使用 Mpx 进行小程序开发的入口。</p> <p><code>@mpxjs/cli@2.x</code> 版本整体是基于模板配置的方式完成项目的初始化，整个的工作流是：</p> <ol><li><p>下载一份存放于远端的 mpx 项目原始模板（mpx-template）</p></li> <li><p>根据用户的 prompts 选项完成用户选项的注入，并初始化最终的项目文件</p></li></ol> <p>完成项目的初始化后，除了一些基础配置文件外，整个项目的文件主要包含了如下的结构：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">--</span> mpx<span class="token operator">-</span>project
- <span class="token operator">|</span><span class="token operator">--</span> src <span class="token comment">// 项目源码</span>
- <span class="token operator">|</span><span class="token operator">--</span> config <span class="token comment">// 项目配置文件</span>
-   <span class="token operator">|</span><span class="token operator">--</span> index<span class="token punctuation">.</span>js <span class="token comment">// 配置入口文件</span>
-   <span class="token operator">|</span><span class="token operator">--</span> mpxLoader<span class="token punctuation">.</span>conf<span class="token punctuation">.</span>js <span class="token comment">// mpx-loader 配置</span>
-   <span class="token operator">|</span><span class="token operator">--</span> mpxPlugin<span class="token punctuation">.</span>conf<span class="token punctuation">.</span>js <span class="token comment">// mpx webpack-plugin 配置</span>
-   <span class="token operator">|</span><span class="token operator">--</span> user<span class="token punctuation">.</span>conf<span class="token punctuation">.</span>js <span class="token comment">// 用户的 prompts 选择信息</span>
- <span class="token operator">|</span><span class="token operator">--</span> build <span class="token comment">// 编译构建配置</span>
-   <span class="token operator">|</span><span class="token operator">--</span> build<span class="token punctuation">.</span>js <span class="token comment">// 构建编译脚本</span>
-   <span class="token operator">|</span><span class="token operator">--</span> getPlugins<span class="token punctuation">.</span>js <span class="token comment">// webpack plugins </span>
-   <span class="token operator">|</span><span class="token operator">--</span> getRules<span class="token punctuation">.</span>js <span class="token comment">// webpack module rules</span>
-   <span class="token operator">|</span><span class="token operator">--</span> getWebpackConf<span class="token punctuation">.</span>js <span class="token comment">// webpack 配置生成辅助函数</span>
-   <span class="token operator">|</span><span class="token operator">--</span> utils<span class="token punctuation">.</span>js <span class="token comment">// 工具函数</span>
-   <span class="token operator">|</span><span class="token operator">--</span> webpack<span class="token punctuation">.</span>base<span class="token punctuation">.</span>conf<span class="token punctuation">.</span>js <span class="token comment">// webpack 基础配置</span>
-</code></pre></div><p>在初始化的项目当中，有关项目的所有配置文件，编译构建代码是全部暴露给开发者的，开发者可以对这些文件进行修改来满足自己实际的项目开发需要。同时还可以基于这一套原始的模板文件二次拓展为满足自己业务场景的模板。</p> <p><strong>基于远程模板初始化项目的方式最大的一个好处就是将项目所有的底层配置完全暴露给开发者，开发者可以任意去修改对应的配置。</strong></p> <h2 id="mpxjs-cli-2-x-自身的痛点"><a href="#mpxjs-cli-2-x-自身的痛点" class="header-anchor">#</a> <code>mpxjs/cli@2.x</code> 自身的痛点</h2> <p>目前 <code>@mpxjs/cli@2.x</code> 采用这种基于模板的方式面临着两方面的痛点：</p> <ol><li>对于 <code>@mpxjs/cli</code> 的使用者而言：</li></ol> <ul><li><p>模板和业务项目割裂：远程模板没有严格的版本控制，用户无法感知到远程模板的更新变化；</p></li> <li><p>项目升级困难：对于用户来说没有一个很好的方式完成升级工作，基本只能通过 copy 代码的方式，将 <code>mpx-template</code> 更新后的内容复制一份到自己的项目当中；或者是通过脚手架重新创建一个新的项目，将老的代码迁移到新项目当中；</p></li> <li><p>项目结构臃肿：从项目结构角度来说没法做到按需，初始化代码臃肿。Mpx 支持了小程序跨平台、跨端、小程序插件等等相关的开发，不同的编译构建配置都需要全部生成，在运行时阶段才能决定是否启动对应的功能；</p></li> <li><p>跨 Web 构建能力弱：在基于 Mpx 的跨 Web 场景构建中有关 <code>web</code> 侧的编译构建的配置是比较初级的，像 <code>MPA 多页应用</code> 等比较常用的功能是需要用户重新去手动搭建一套的；</p></li> <li><p>可拓展性差，基于目前的模板拉取的方式无法满足多样化的业务需求场景迭代；</p></li></ul> <ol start="2"><li>对于 <code>@mpxjs/cli</code> 的开发者而言：</li></ol> <ul><li>分支场景多，功能模块耦合度高：脚手架的所有功能全部集合到一个大的模板当中。各部分的能力都是耦合在一起，为了满足不同项目的实际开发需要，代码里面需要写比较多的 <code>if...else...</code> 判断逻辑来决定要开启哪些功能，生成哪部分的模板；</li> <li>长期可维护性差，开发心智负担重；</li></ul> <p><strong>针对以上问题，通过调研业内一些优秀的脚手架工具，发现 <code>@vue/cli</code> 插件化的架构设计能很好的去解决我们以上所遇到的问题。核心思路是将 <code>@vue/cli</code> 作为 <code>@mpxjs/cli</code> 底层的引擎，收敛 Mpx 对于核心依赖管理、模板、构建配置的能力，充分利用 <code>@vue/cli</code> 提供的插件机制去构建、拓展上层的插件集。</strong></p> <h3 id="有关-vue-cli"><a href="#有关-vue-cli" class="header-anchor">#</a> 有关 <code>@vue/cli</code></h3> <p>简单介绍下 <code>@vue/cli</code> 的插件化架构：</p> <p><code>@vue/cli@3.x</code> 相较于 <code>2.x</code> 版本相比，整个 <code>@vue/cli</code> 的架构发生了非常大的变化，从基于模板的脚手架迭代为基于插件化的脚手架。简单的概述下整个插件化的构架就是：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/zfUXzzdOptIviAJ15AgSn_cli-3.png" alt="mpx-cli-3"></p> <ul><li><p>@vue/cli 提供 vue cli 命令，负责偏好设置，生成模板、<code>vue-cli-plugin</code> 插件依赖管理的工作，例如 <code>vue create &lt;projectName&gt;</code>、<code>vue add &lt;pluginName&gt;</code>；</p></li> <li><p>@vue/cli-service 作为 @vue/cli 整个插件系统当中的内部核心插件，提供了 npm script 注册服务，内置了部分 webpack 配置的同时，又提供了 <code>vue-cli-plugin</code> 插件的导入、加载以及 webpack 配置更新服务等。</p></li></ul> <p>以上是 <code>@vue/cli</code> 生态当中最为核心的两部分内容，二者分工明确，各司其职。</p> <p>此外在 <code>@vue/cli</code> 生态当中非常重要的一个点就是 <code>vue-cli-plugin</code> 插件，每个插件主要完成模板生成及生产编译构建配置。根据 <code>@vue/cli</code> 设计的规范，开发一个 <code>vue-cli-plugin</code> 需要遵照<strong>相关的约定</strong>来进行开发：</p> <ul><li><p>@vue/cli <strong>约定</strong>插件如果要生成模板，那么需要提供 <code>generator</code> 入口文件；</p></li> <li><p>@vue/cli-service <strong>约定</strong>插件的 <code>webpack</code> 配置更新需要放到插件的入口文件当中来完成，同时插件的命名也需要包含 <code>vue-cli-plugin</code> 前缀，因为 @vue/cli-service 是依据命名来加载相关的插件的；</p></li></ul> <h2 id="插件化改造方案"><a href="#插件化改造方案" class="header-anchor">#</a> 插件化改造方案</h2> <p>一张图了解下插件化改造之后的 <code>@mpxjs/cli</code> 的架构设计：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/hNaL_GUMzUVLOsyY5quGE_cli-2.png" alt="mpx-cli-2"></p> <h3 id="底层能力"><a href="#底层能力" class="header-anchor">#</a> 底层能力</h3> <p>将 <code>@vue/cli</code>、<code>@vue/cli-service</code> 分别作为 <code>@mpx/cli</code>和 <code>@mpx/cli-service</code> 的底层能力，即利用插件化的架构设计，同时还非常灵活的满足了 Mpx 做差异化场景迭代的定制化改造。上层的插件满足 <code>vue-cli-plugin</code> 插件开发的规范，最终底层的能力还是依托于 <code>@vue/cli</code> 和 <code>@vue/cli-service</code> 进行工作。</p> <h3 id="上层插件拆分"><a href="#上层插件拆分" class="header-anchor">#</a> 上层插件拆分</h3> <p>将原本大而全的模板进行插件化拆分，从 Mpx 所要解决的问题以及设计思路来考虑，站在跨平台的角度：</p> <ol><li>web 开发</li></ol> <ul><li>基于 <code>wx</code> 的跨 <code>web</code> 开发；</li></ul> <ol start="2"><li>小程序开发</li></ol> <ul><li>基于 <code>wx</code> 的跨平台(<code>ali</code>、<code>swan</code>，<code>tt</code>，<code>dd</code>)的小程序开发；</li> <li>使用云函数的微信小程序开发；</li> <li>微信小程序的插件模式的开发；</li></ul> <p>一个项目可能只需要某一种开发模式，例如仅仅是微信小程序的插件模式开发，也有可能是小程序和web平台混合开发等等，不同的开发模式对应了：</p> <ol><li><p><strong>不同的目录结构</strong>；</p></li> <li><p><strong>不同的编译构建配置</strong></p></li></ol> <hr> <p>基于这样一种现状以及 <code>@mpxjs/cli</code> 所要解决的问题，从跨平台的角度出发将功能进行了拆分，最终拆解为如下的9个插件：</p> <ul><li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（mpx 基础开发插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-mp" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-mp<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（mpx 小程序平台开发插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-web" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-web<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（mpx 跨 web 平台开发插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-cloud-func" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-cloud-func<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（微信小程序云函数开发插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-plugin-mode" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-plugin-mode<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（微信小程序插件模式开发插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-eslint" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-eslint<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（mpx eslint 插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-unit-test" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-unit-test<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（小程序单元测试插件）</p></li> <li><p><a href="https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-typescript" target="_blank" rel="noopener noreferrer">vue-cli-plugin-mpx-typescript<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（mpx typescript 插件）</p></li></ul> <p>这些拆解出来的插件都将和功能相关的<strong>项目模板</strong>以及<strong>编译构建</strong>配置进行了收敛。</p> <p>项目模板的生成不用说，借助 <code>@vue/cli</code> 的 <code>Generator API</code> 按需去生成项目开发所需要的模板，例如项目需要使用 <code>eslint</code> 的功能，那么在生成项目的时候会生成对应 <code>vue-cli-plugin-mpx-eslint</code> 所提供的模板文件，如果不需要使用，项目当中最终也不会出现和 <code>eslint</code> 相关的文件配置。</p> <p>重点说下编译构建的配置是如何进行拆解的：</p> <p><strong>在 <code>@vue/cli@3.x</code> 基于插件的架构设计当中，决定是否要使用某个插件的依据就是判断这个插件是否被你的项目所安装</strong>和基于模板的构架相比最大的区别就是：基于模板的架构在最终生成的模板配置里需要保存一些环境配置文件，以供编译构建的运行时来判断是否启用某些功能。但是基于插件的架构基本上是不再需要这些环境配置文件的，因为你如果要使用一个插件的功能，只需要安装它即可。</p> <p>因此依照这样的设计规范，我们将：</p> <ul><li><p><code>eslint</code></p></li> <li><p><code>unit-test</code></p></li> <li><p><code>typescript</code></p></li></ul> <p>这些非常独立的功能都单独抽离成了可拔插的插件，安装即启用。</p> <p>以上功能有个特点就是和平台是完全解耦的，所以在拆解的过程中可以拆的比较彻底。但是由于 <code>mpx</code> 项目的特殊性，即要支持基于 <code>wx</code> 小程序的跨端以及 <code>web</code> 开发，同时还要支持小程序的云函数、小程序插件模式的开发，且不同开发模式的编译构建配置都有些差异。可以用如下的集合图来表示他们之间的关系：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/3bgI4GSZ09ai4G1C3TDtr_cli-4.png" alt="mpx-cli-4"></p> <p>不同插件进行组合使用来满足不同场景下的使用。</p> <p>在不同平台开发模式下是有 <code>mpx</code> 编译构建的基础配置的，这个是和平台没有太多关系，因此将这部分的配置单独抽离为一个插件：<code>vue-cli-plugin-mpx</code>，<strong>同时这个插件也被置为了 <code>@mpxjs/cli</code> 的 <code>preset</code> 预设插件，不管任何项目开发模式下，这个插件都会被默认的安装</strong>。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue-cli-plugin-mpx</span>
-module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">api<span class="token punctuation">,</span> options<span class="token punctuation">,</span> webpackConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  webpackConfig<span class="token punctuation">.</span>module
-    <span class="token punctuation">.</span><span class="token function">rule</span><span class="token punctuation">(</span><span class="token string">'json'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.json$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">resourceQuery</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">asScript</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string">'javascript/auto'</span><span class="token punctuation">)</span>
-
-  webpackConfig<span class="token punctuation">.</span>module
-    <span class="token punctuation">.</span><span class="token function">rule</span><span class="token punctuation">(</span><span class="token string">'wxs-pre-loader'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(wxs|qs|sjs|filter\.js)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">pre</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token string">'mpx-wxs-pre-loader'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">loader</span><span class="token punctuation">(</span>MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxsPreLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>loader<span class="token punctuation">)</span>
-
-  <span class="token keyword">const</span> transpileDepRegex <span class="token operator">=</span> <span class="token function">genTranspileDepRegex</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span>transpileDependencies <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  webpackConfig<span class="token punctuation">.</span>module
-    <span class="token punctuation">.</span><span class="token function">rule</span><span class="token punctuation">(</span><span class="token string">'js'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span>include
-    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">filepath</span> <span class="token operator">=&gt;</span> transpileDepRegex <span class="token operator">&amp;&amp;</span> transpileDepRegex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>filepath<span class="token punctuation">)</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">filepath</span> <span class="token operator">=&gt;</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.mpx\.js</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>filepath<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 处理 mpx 转 web 的情况，vue-loader 会将 script block fake 出一个 .mpx.js 路径，用以 loader 的匹配</span>
-    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/@mpxjs'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token string">'babel-loader'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">loader</span><span class="token punctuation">(</span><span class="token string">'babel-loader'</span><span class="token punctuation">)</span>
-
-  <span class="token keyword">const</span> transpileDepRegex <span class="token operator">=</span> <span class="token function">genTranspileDepRegex</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span>transpileDependencies<span class="token punctuation">)</span>
-  webpackConfig<span class="token punctuation">.</span>module
-    <span class="token punctuation">.</span><span class="token function">rule</span><span class="token punctuation">(</span><span class="token string">'js'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span>include
-      <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">filepath</span> <span class="token operator">=&gt;</span> transpileDepRegex <span class="token operator">&amp;&amp;</span> transpileDepRegex<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>filepath<span class="token punctuation">)</span><span class="token punctuation">)</span>
-      <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-      <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/@mpxjs'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-      <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-        <span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token string">'babel-loader'</span><span class="token punctuation">)</span>
-      <span class="token punctuation">.</span><span class="token function">loader</span><span class="token punctuation">(</span><span class="token string">'babel-loader'</span><span class="token punctuation">)</span>
-
-  webpackConfig<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>extensions
-    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'.mpx'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'.wxml'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'.ts'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'.js'</span><span class="token punctuation">)</span>
-
-  webpackConfig<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>modules<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'node_modules'</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>在小程序的开发模式下，<code>vue-cli-plugin-mpx-mp</code> 会在 <code>vue-cli-plugin-mpx</code> 的基础上去拓展 <code>webpack</code> 配置以满足小程序的编译构建。</p> <p>在跨 web 的开发模式下，<code>vue-cli-plugin-mpx-web</code> 会在 <code>vue-cli-plugin-mpx</code> 和 <code>@vue/cli</code> 的基础上去拓展配置以满足 web 侧的开发编译构建。</p> <h3 id="web-平台编译构建能力增强"><a href="#web-平台编译构建能力增强" class="header-anchor">#</a> Web 平台编译构建能力增强</h3> <p>在 <code>@mpxjs/cli@2.x</code> 版本当中有关 <code>web</code> 侧的编译构建的配置是比较初级的，像 <code>热更新</code>、<code>MPA 多页应用</code> 等比较常用的功能是需要用户重新去手动搭建一套的。而 <code>@vue/cli@3.x</code> 即为 <code>vue</code> 项目而生，提供了非常完备的 <code>web</code> 应用的编译构建打包配置。</p> <p><strong>所以 <code>@mpxjs/cli@next</code> 版本里面做了一项非常重要的工作就是复用 <code>@vue/cli</code> 的能力，弥补 <code>mpx</code> 项目在跨 <code>web</code> 项目编译构建的不足。</strong></p> <p>因此关于 <code>mpx</code> 跨 <code>web</code> 编译构建的部分也单独抽离为一个插件：<code>vue-cli-plugin-mpx-web</code>，这个插件所做的工作就是在 <code>@vue/cli</code> 提供的 <code>web</code> 编译构建的能力上去适配 <code>mpx</code> 项目。这样也就完成了 <code>mpx</code> 跨 <code>web</code> 项目编译构建能力的增强。</p> <p><strong>这也意味着 <code>@vue/cli</code> 所提供的能力基本上在 mpx 跨 web 项目当中都可使用。</strong></p> <h3 id="项目配置拓展能力"><a href="#项目配置拓展能力" class="header-anchor">#</a> 项目配置拓展能力</h3> <p>在 <code>@mpxjs/cli@2.x</code> 版本的项目如果要进行配置拓展，基本需要进行以下2个步骤：</p> <ol><li><p>对 <code>config</code> 文件夹下的相关的配置文件进行修改；</p></li> <li><p>对 <code>build</code> 文件夹下的编译构建配置文件进行修改；</p></li></ol> <p>这也是在文章一开始的时候就提到的基于模板的大而全的文件组织方式。</p> <p>而在 <code>@mpxjs/cli@next</code> 版本当中，将项目的配置拓展全部收敛至 <code>vue.config.js</code> 文件当中去完成，同时减少了开发者需要了解项目结构的心智负担。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token comment">// mpx-plugin 相关的配置</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token comment">// mpx-loader 相关的配置</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 自定义的 webpack 配置</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h3 id="改造后的目录结构"><a href="#改造后的目录结构" class="header-anchor">#</a> 改造后的目录结构</h3> <p>在第一章节展示了目前 <code>@mpxjs/cli@2.x</code> 初始化项目的结构和现状。经过这次的插件化的改造后，项目的结构变得更为简洁，开发者只需要关注 <code>src</code> 源码目录以及 <code>vue.config.js</code> 配置文件即可：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">--</span> mpx<span class="token operator">-</span>project
- <span class="token operator">|</span><span class="token operator">--</span>src
- <span class="token operator">|</span><span class="token operator">--</span>vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>js 
-</code></pre></div><h2 id="没有银弹"><a href="#没有银弹" class="header-anchor">#</a> 没有银弹</h2> <p>虽然基于 <code>@vue/cli</code> 插件的架构模式完成了 <code>@mpxjs/cli@3.x</code> 的插件化改造升级。但是由于 <code>mpx</code> 项目开发的一些特殊性，不同插件之间的协同工作是有一些约定的。</p> <p>例如 <code>@vue/cli-service</code> 内置了一些 <code>webpack</code> 的配置，因为 <code>@vue/cli</code> 是专门针对 <code>web</code>应用的，这些配置会在所有的编译构建流程当中生效，不过这些配置当中有些对于小程序的开发来说是不需要的。</p> <p>那么针对这种情况，为了避免不同模式下的 <code>webpack</code> 配置相互污染。<code>web</code> 侧的编译构建还是基于 <code>@vue/cli</code> 提供的能力去适配 <code>mpx</code> 的 <code>web</code> 开发。而小程序侧的编译构建配置是通过 <code>@vue/cli-service</code> 内部暴露出来的一些方法去跳过一些对于小程序开发来说不需要的 <code>webpack</code> 配置来最终满足小程序的构建配置。</p> <p>因此在各插件的开发当中，需要暴露该插件所应用的平台：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>export<span class="token punctuation">.</span>platform <span class="token operator">=</span> <span class="token string">'mp'</span>  <span class="token comment">// 可选值： 'web'</span>
-</code></pre></div><p>这样在实际的构建过程当中通过平台的标识来决定对应哪些插件会生效。</p> <h2 id="如何开发一个基于-mpx-的业务脚手架插件"><a href="#如何开发一个基于-mpx-的业务脚手架插件" class="header-anchor">#</a> 如何开发一个基于 mpx 的业务脚手架插件</h2> <p>具体参阅<a href="https://github.com/mpx-ecology/mpx-cli/blob/master/PLUGIN_GUIDE.md" target="_blank" rel="noopener noreferrer">文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/articles/mpx-cube-ui.html" class="prev">
-        小程序跨端组件库 Mpx-cube-ui 开源啦
-      </a></span> <span class="next"><a href="/articles/unit-test.html">
-        Mpx 小程序单元测试能力建设与实践
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/55.2d6ae2e1.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/mpx-cube-ui.html b/docs-vuepress/.vuepress/dist/articles/mpx-cube-ui.html
deleted file mode 100644
index 6c43a1c96d..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/mpx-cube-ui.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>小程序跨端组件库 Mpx-cube-ui 开源啦 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/56.9aec9a9e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" aria-current="page" class="active sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx-cube-ui.html#业务现状" class="sidebar-link">业务现状</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cube-ui.html#mpx-技术生态" class="sidebar-link">Mpx 技术生态</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cube-ui.html#组件库自身的维护" class="sidebar-link">组件库自身的维护</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cube-ui.html#mpx-组件体系" class="sidebar-link">Mpx 组件体系</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cube-ui.html#mpx-cube-ui-组件设计" class="sidebar-link">Mpx-cube-ui 组件设计</a></li><li class="sidebar-sub-header"><a href="/articles/mpx-cube-ui.html#未来的规划" class="sidebar-link">未来的规划</a></li></ul></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="小程序跨端组件库-mpx-cube-ui-开源啦"><a href="#小程序跨端组件库-mpx-cube-ui-开源啦" class="header-anchor">#</a> 小程序跨端组件库 Mpx-cube-ui 开源啦</h1> <blockquote><p>作者：<a href="https://github.com/CommanderXL" target="_blank" rel="noopener noreferrer">CommanderXL<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p>Mpx-cube-ui 是一款基于 <a href="https://www.mpxjs.cn/" target="_blank" rel="noopener noreferrer">Mpx 小程序框架<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 的移动端基础组件库，一份源码可以跨端输出所有小程序平台及 Web，同时具备良好的拓展能力和可定制化的能力来帮助你快速构建 Mpx 应用项目。</p> <p>Mpx-cube-ui 提供了灵活配置的主题定制能力，在组件设计开发阶段对表现层的结构和样式进行抽离，利用预编译器和 CSS 变量的能力，提供细粒度（颜色、字体、圆角、阴影等）的样式定制能力，你的项目可以按需使用主题的编译方案还是运行时方案来满足不同样式风格的业务场景开发。</p> <p>Mpx-cube-ui 提供了开箱即用的跨端输出能力，源码基于 Mpx 小程序框架进行开发，依托于 Mpx 提供的<a href="https://mpxjs.cn/articles/2.0.html#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E5%BC%80%E5%8F%91" target="_blank" rel="noopener noreferrer">跨平台能力<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>即基于微信小程序跨平台编译输出为支付宝、百度、QQ、头条等目标平台的小程序代码，同时还可以输出到 Web。</p> <p>接下来会通过这篇文章去分享一下 Mpx-cube-ui 是如何诞生的。</p> <h2 id="业务现状"><a href="#业务现状" class="header-anchor">#</a> 业务现状</h2> <h3 id="集团产品的迭代"><a href="#集团产品的迭代" class="header-anchor">#</a> 集团产品的迭代</h3> <p>越来越多的业务产品开始借助小程序的渠道来拓展产品的推广和使用，不同的技术团队承接的不同业务产品方向的需求。在滴滴所有的小程序产品当中，滴滴出行小程序作为最大的C端流量入口，承接了不同业务产品流量分发。在具体到小程序产品的研发环节，不同业务的小程序都被集成到了滴滴出行小程序当中，一同打包上线并发布。
-当然在这种跨业务、技术部门的产品研发当中，不同的技术团队都会有自身配套的基础能力建设。就拿小程序的组件库来说，每个独立的业务产品都会依据对应的交互设计规范来搭建一套满足自身业务述求的基础组件用以提高日常的业务开发效率，例如按钮、半浮层弹窗、Toast、Dialog、表单等等。</p> <h3 id="团队内的业务迭代"><a href="#团队内的业务迭代" class="header-anchor">#</a> 团队内的业务迭代</h3> <p>除了跨业务产品研发的场景外，在同一个技术团队内部也可能会承接来自不同业务产品方向的需求，这些不同业务产品同样也会有独立发展迭代的述求。由于业务场景的约束，团队内部同样也会面临如何做基础能力的沉淀和复用的议题，在节省研发资源的同时去提升业务项目交付的质量和效率。
-</p><hr><p></p> <p>那么在不同的业务产品发展初期，为了快速交付产品的功能保障上线时间，研发侧会尽量利用之前已有的基础能力来快速搭建产品功能。就拿小程序组件库的复用来说，常见的方式有：</p> <ul><li>直接侵入到原有的组件代码当中进行 Hard Code，不同的业务产品依赖同一份组件代码，利用一些 if/else 或者条件编译等手段来使得原有的组件在满足最新的业务述求的同时，还要确保不会影响到原有的业务使用；</li> <li>Fork 一份原有组件库的代码，在此基础上单独迭代维护，做到和原有组件的彻底隔离而不会造成污染；</li></ul> <p>对于第一种方案来说：组件本身因为增量的差异化需求使得组件本身的维护成本变高，同时对于差异化的代码处理难免在编译打包环节出现代码冗余问题，也就是原本不属于当前业务产品的代码实现也被一同打包；
-对于第二种方案来说：组件库维护的数量变多，使得后续的组件迭代和更新需要修改多处代码；</p> <p>此外，在小程序的场景下还面临着包体积等平台规范的硬性约束，特别是对于像滴滴出行小程序这种体量大的小程序来说，众多小程序业务产品被集成到同一个小程序当中，包体积也是日常研发过程中重点关注的一个指标。模块或组件的可复用性好、可拓展性强也意味着不需要重复去开发同一份功能相同代码，随之代码包体积也不会因重复实现相同功能而增速过快。</p> <h2 id="mpx-技术生态"><a href="#mpx-技术生态" class="header-anchor">#</a> Mpx 技术生态</h2> <p>在 Mpx 整个技术生态当中，组件体系目前是不完备的。</p> <p>在我们目前使用 Mpx 去搭建实际的业务产品的过程中，我们基于小程序平台的基础组件去搭建了特定业务场景的基础业务组件，因为业务场景、功能和代码实现等各方面的原因，这些业务场景的基础组件是没法开放给社区的 Mpx 开发者来使用的。因此对于社区来说，要么只能同样基于平台的基础组件去开发上层基础组件，或者是使用第三方的原生小程序组件库，不管哪种方式对于社区的开发者而言，都有不少的上手和开发成本。</p> <p>因此在社区当中也有比较强的述求，期望 Mpx 能提供更为基础通用的组件来更好的支持上层的业务开发。</p> <h2 id="组件库自身的维护"><a href="#组件库自身的维护" class="header-anchor">#</a> 组件库自身的维护</h2> <ul><li>文档示例一体化</li></ul> <p>不管是我们内部维护的业务组件库还是之前我们开源的基于 Vue 的 Web 组件库 <a href="https://didi.github.io/cube-ui/#/zh-CN" target="_blank" rel="noopener noreferrer">Cube-ui<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，组件本身的文档示例也是在组件库迭代过程中也是比较占用时间精力的，在示例和文档方面往往需要重复写多份文案，还要确保它们之间是同步更新的。那么针对组件库自身的维护，如何尽量减少组件库本身的维护成本也是我们需要深入思考的一部分工作。</p> <p>以上这些问题促使我们重新思考整个 Mpx 组件体系的构建和发展。</p> <h2 id="mpx-组件体系"><a href="#mpx-组件体系" class="header-anchor">#</a> Mpx 组件体系</h2> <p>经过业务的长期迭代和验证，Mpx-cube-ui 作为 Mpx 技术生态当中组件体系的基础设施：脱离于业务的基础组件库，同时又要有良好的拓展能力和可定制化的能力来更好的支持上层业务。</p> <p><img src="https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_6wEnx7fVXGlK8hILtuYa" alt="组件分层设计">
-在整个组件体系的搭建过程中，我们依据组件的特性将组件拆分为如下几种类型：</p> <ul><li>业务组件一般来源于某一个具体的产品功能，用以解决特定问题域，更加强调关注点分离，代码的维护成本；</li> <li>基础业务组件一般来源于某一类的业务产品，在特定的业务背景下抽象的比较通用的，较少糅合业务逻辑，介于基础组件和业务组件之间，强调解决效率，可复用性，可维护性；</li> <li>基础组件一般来源于我们设计交互元语言，用以定义业务产品和用户的交互、反馈，更加强调一致性，效率，可复用性；</li></ul> <p>底层的基础组件（可组合性、可拓展性、稳定性）是为了更好的服务于上层的（基础）业务组件。</p> <p>从底层的基础组件到业务组件（由下至上），组件的业务属性越来越强，所要解决的问题域更加聚焦，更贴合具体的问题和场景，同时它们的可复用性也随之降低。</p> <h2 id="mpx-cube-ui-组件设计"><a href="#mpx-cube-ui-组件设计" class="header-anchor">#</a> Mpx-cube-ui 组件设计</h2> <p>这里通过乘客交易、司机运营两个不同业务方向的组件来举例说明 Mpx-cube-ui 在组件的设计和开发当中所做的一些思考。
-在这两个业务场景当中都有 Modal 半浮层组件，不过在司乘业务不同的设计规范约束下，组件间的差异还是比较大的。</p> <p><img src="https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_1EABWsPUeVHTim2iwTUf" alt="mpx-cube-ui-modal"></p> <p>那么为了解决上文当中组件库在跨业务产品的的可复用性、可拓展性的问题，核心所遵循的原则是：</p> <p><strong>弱化不同业务场景的设计规范（去业务），回归到组件本身的行为（逻辑）、结构和样式（表现）：</strong></p> <ul><li>行为，组件所特有的行为方法：展示（show），隐藏（hide），关闭（close）；</li> <li>结构，方便组件间的重新组合：头部区，标题区，内容区，底部操作区；</li> <li>样式，方便业务场景的主题定制：颜色、字号、圆角、边距等；</li></ul> <p><img src="https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_ceWLvE8RbZIIduHHTdtu" alt="组件设计原则"></p> <p>对于 Mpx-cube-ui 组件的主题定制有个简单的逻辑关系：</p> <ul><li>全局基础样式变量：提供了基本色值、字号等，会影响到所有组件的展示；</li> <li>组件样式变量：对于基本的色值、字号等继承于全局基础变量，涉及到组件自身的结构、样式变量会单独定义；</li> <li>组件渲染样式：直接依赖组件样式变量；</li></ul> <p><img src="https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_b4uBKbP8yIwdip7pBZAq" alt="mpx-cube-ui-modal"></p> <p>通过定制<a href="https://www.mpxjs.cn/mpx-cube-ui/guide/design-tokens.html" target="_blank" rel="noopener noreferrer">全局基础样式变量<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>和<a href="https://www.mpxjs.cn/mpx-cube-ui/components/base/button.html#css-variable" target="_blank" rel="noopener noreferrer">组件样式变量<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>都能达到定制主题的目的，有关主题定制的功能具体参见<a href="https://www.mpxjs.cn/mpx-cube-ui/guide/theme.html" target="_blank" rel="noopener noreferrer">文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>在 Mpx-cube-ui 实现的定制主题的方案当中是利用预编译器和 Css Varaibles 的能力来提供细粒度的样式定制能力：</p> <p><img src="https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_3ZVcQITsryAG4k96hFrH" alt="业务架构图"></p> <ul><li>利用预编译器可编程的能力，在编译阶段就可以完成主题能力的定制，当你的业务项目作为独立应用迭代，可以只利用预编译器的能力，从而使得你的 css 代码体积尽可能的小；</li> <li>利用 Css Varaibles 的能力，可以解决更为复杂的场景，例如同一个组件在巨型应用当中，在不同业务场景页面需要有不同的主题样式；</li></ul> <p>在<a href="https://www.mpxjs.cn/mpx-cube-ui/guide/intro.html" target="_blank" rel="noopener noreferrer">官网示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>当中可以直接体验主题切换功能。</p> <h2 id="未来的规划"><a href="#未来的规划" class="header-anchor">#</a> 未来的规划</h2> <ol><li>开源更多我们内部所沉淀出的基础组件，去满足多样化的业务场景开发；</li> <li>将文档示例一体化的能力独立打包开源，用以组件库的快速建站以及降低文档、示例代码的维护成本。</li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/articles/2.9-release.html" class="prev">
-        Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化
-      </a></span> <span class="next"><a href="/articles/mpx-cli-next.html">
-        Mpx-cli 插件化改造
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/56.9aec9a9e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/mpx1.html b/docs-vuepress/.vuepress/dist/articles/mpx1.html
deleted file mode 100644
index 7aea0fe8b3..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/mpx1.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>小程序开发者，为什么你应该尝试下MPX | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/57.9d9ddcbd.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" aria-current="page" class="active sidebar-link">Mpx框架初体验</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx1.html#背景" class="sidebar-link">背景</a></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#优势" class="sidebar-link">优势</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx1.html#原生兼容" class="sidebar-link">原生兼容</a></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#第三方组件库" class="sidebar-link">第三方组件库</a></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#按需引用" class="sidebar-link">按需引用</a></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#跨小程序平台" class="sidebar-link">跨小程序平台</a></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#能力增强" class="sidebar-link">能力增强</a></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#性能优势" class="sidebar-link">性能优势</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/mpx1.html#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="小程序开发者-为什么你应该尝试下mpx"><a href="#小程序开发者-为什么你应该尝试下mpx" class="header-anchor">#</a> 小程序开发者，为什么你应该尝试下MPX</h1> <blockquote><p>作者：<a href="https://github.com/sky-admin" target="_blank" rel="noopener noreferrer">sky-admin<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <blockquote><p>MPX框架是滴滴出行推出的一款专注小程序开发的增强型框架。本篇文章将从使用角度谈谈MPX的优势与好处。如果嫌内容太长，优势部分每个小节都有简单的一句话总结，可以快速阅读。如果想了解更多设计细节，可以阅读 <a href="/articles/2.0.html">前一篇文章 - MPX2.0发布</a>。</p></blockquote> <h2 id="背景"><a href="#背景" class="header-anchor">#</a> 背景</h2> <p>在小程序逐渐火热的今天，越来越多的开发者需要进行小程序的开发。原生小程序的开发有诸多不便，开发者又需要在众多的小程序框架中做出抉择。</p> <p>那么今天，我们要给大家安利一款小程序框架：MPX</p> <h2 id="优势"><a href="#优势" class="header-anchor">#</a> 优势</h2> <p>之所以建议开发者们考虑使用MPX框架来开发小程序，是因为MPX框架具有一些别的框架所没有的优点。</p> <p>MPX立足原生小程序，在保证坑少的同时做了很多能力增强，提供了数据响应、模板增强、性能优化、跨平台开发等能力，以提升用户的开发体验及效率。</p> <p>接下来会从 原生兼容 -&gt; 第三方组件支持 -&gt; 按需构建 -&gt; 跨平台编译 -&gt; 能力增强 -&gt; 独特性能优势 六个点来逐一讲述。</p> <h3 id="原生兼容"><a href="#原生兼容" class="header-anchor">#</a> 原生兼容</h3> <blockquote><p>MPX完全兼容原生，坑少。渐进接入简单。</p></blockquote> <p>从语法风格上，我们可以看到目前市面上流行的小程序框架基本是基于web框架（taro/nanachi - react，uniapp/megalo/mpvue - vue）或者是一套全新（chameleon）/ 半全新（wepy）的标准。</p> <p>使用了这些框架，你所写的代码，并不是小程序代码。而是react/vue或者另一套代码。而这些代码源码到小程序代码，需要经过一次全面的转换，这个转换可能会引入一些未知的问题，产生一些坑。</p> <p>同时随着时间，小程序自身会逐步迭代，做出更多的功能特性，提供更好的组件、方法。而一些框架可能会受限于精力或框架节奏，没有办法第一时间跟进，甚至框架慢慢疏于维护而无法使用。</p> <p>而MPX选择的是，<strong>全面拥抱原生</strong>。</p> <p>口说无凭，我们来看个典型的MPX组件长什么样。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/3877c653-d180-4fe7-8661-457b9de1bd82.png" alt="mpx组件示例"></p> <p>乍一看好像和vue没什么区别，也就多了个json块，template里写的是小程序的标签。</p> <p>由于这一块全是符合微信小程序原生语法，我们是不会做任何转换的，所以你写什么就是什么。（如果使用了MPX的增强特性，还是会进行一些必要的转换的，后续我们也会出文章详细解释MPX的增强是如何实现的，相对来说，我们的转换比较轻量、透明、易理解）</p> <p>当微信出了新的能力、新的标签、新的生命周期钩子，使用MPX框架来编写的小程序只需要直接用起来就行。</p> <p>所以，使用MPX框架，你可以轻易地使用 <strong><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html" target="_blank" rel="noopener noreferrer">自定义组件的relations<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> 来搞定组件间关系，使用 <strong><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/" target="_blank" rel="noopener noreferrer">wxs<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> 来更好地构建页面。</p> <p>MPX几乎支持原生的每一个特性，在 .mpx 文件里，模板部分写的是原生小程序的模板语法，脚本部分写的是原生小程序的脚本语法，json部分写的是原生小程序的配置信息。用MPX，你才是真的在开发小程序。</p> <p>目前很多原生小程序开发者可能想尝试下框架，老项目接入框架，选MPX肯定是最简单的了。口说无凭，我们搞了个demo来给大家打个样：在我们GitHub项目中有examples文件夹，里面的 <a href="https://github.com/didi/mpx/tree/master/examples/mpx-progressive" target="_blank" rel="noopener noreferrer">原生项目渐进接入MPX示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 。</p> <h3 id="第三方组件库"><a href="#第三方组件库" class="header-anchor">#</a> 第三方组件库</h3> <blockquote><p>MPX提供了完备的第三方组件库支持</p></blockquote> <p>上面说了MPX对原生的极致兼容，能让你想到什么？对，就是对第三方组件库的完美支持。</p> <p>支持第三方组件库的重要性大家都知道，所以这个能力大部分框架都支持了。但是支持和完美支持还是有区别的。据简单观察，taro/mpvue/uniapp对于第三方组件库的支持都是以复制的形式进行的，也就是和微信小程序本来的行为很像。</p> <p>那么MPX是怎么支持第三方组件库的呢，这里有个demo：也在我们的GitHub里的examples文件夹下，<a href="https://github.com/didi/mpx/tree/master/examples/mpx-useuilib" target="_blank" rel="noopener noreferrer">MPX使用第三方组件库示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> ，核心代码见下图：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/9ecdd898-f7e5-48cc-89c2-bfc7ce3a03f9.png" alt="MPX使用第三方组件库代码示例"></p> <p>乍一眼看不太出来有什么特别的？没用过别的框架引第三方组件，简单找了找其他框架好像也没提供相应的demo，用过的朋友可以自行对比下。</p> <p>在MPX里使用第三方组件库，仅需要***像web项目一样npm安装即可，并不需要复制文件***。然后在json里直接写包名就会去node_modules下面查找了。再配合webpack alias可以做到更简单、更语义化。</p> <p>然而这还没有结束~</p> <p>细心的朋友会发现，这段示例代码中既有vant的组件，也有iview的组件，如果按照微信的规范，这些组件库会通过miniprogram字段指定自己的构建文件生成目录，开发者工具会把这个目录完全拷贝到最终发布的代码里去，我们就会有两个巨大的组件库占据宝贵的空间。</p> <p>我们当然是希望用多少引多少，而不是一股脑全引进去，对，于是MPX提供了按需引用的能力，在下一章<a href="#%E6%8C%89%E9%9C%80%E5%BC%95%E7%94%A8">按需引用</a>细讲。</p> <p>以及，组件库目前很少有跨小程序平台的组件库啊，如果我用了vant，支付宝、QQ里没有vant怎么办？也许这是别的框架不怎么推荐使用第三方库的原因，而MPX里，我们帮你把别人的组件库也转了，细节看下下章<a href="#%E8%B7%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B9%B3%E5%8F%B0">跨小程序平台</a></p> <h3 id="按需引用"><a href="#按需引用" class="header-anchor">#</a> 按需引用</h3> <blockquote><p>通过webpack依赖分析收集，使用第三方组件库或者拆分开发大型项目时MPX能保证构建的代码全是要用到的代码</p></blockquote> <p>原生小程序本身的编译是遍历项目文件夹里所有的JS，包装成一个AMD包，也就是说项目文件夹里所有的文件，不论是否被使用，都会占用包体积并上传。</p> <p>同时，原生微信小程序的npm支持是基于文件夹复制的，第三方包通过声明miniprogram字段指定要拷贝的文件夹，不论使用还是未使用的资源（模板/js/样式/图片），全会被复制到项目文件夹中。</p> <p>而我们提供了@mpxjs/webpack-plugin插件，借助webpack生态，解析.mpx文件的json部分或原生的json文件将依赖作为新的入口添加子编译。基于依赖收集，而不是文件遍历。</p> <p>带来的好处就是：如果你喜欢vant的按钮，iview的输入框，wux的布局，欢迎尝试MPX，让你能同时使用多个UI框架的同时不用担心应用的体积爆炸。</p> <p>同理，面对一个大型项目，我们可以拆成不同的部分，由不同的团队完成后发npm包，在一个主项目中引入即可，具体内容可以看文档<a href="/guide/advance/subpackage.html#packages">packages</a>一节。</p> <p>收集依赖的细节可以查阅文档<a href="/guide/understand/compile.html">编译构建</a>一节。</p> <h3 id="跨小程序平台"><a href="#跨小程序平台" class="header-anchor">#</a> 跨小程序平台</h3> <blockquote><p>MPX的跨平台方法能带着第三方组件库一起跨小程序平台，同时提供了充足完善的条件编译能力。</p></blockquote> <p>在 MPX 1.0 时代，MPX框架是专注提升微信小程序的开发体验，虽然也提供了支付宝版，但代码完全要另写。</p> <p>而随着越来越多的 super app 提供了小程序能力，目前至少有5种体系的小程序（微信、支付宝系列、百度系列、头条系列、QQ），如果每一个平台都需要维护一份代码，工程师人数明显不够用了，所以跨小程序平台的能力也是 MPX 2.0 的主打特性。</p> <p>我们的跨平台的方法就是转换。都是小程序，语法基本一样，配置、钩子的差异在MPX运行时里提供了抹平。</p> <p>而除此之外最大的区别也就是模板上的标签和指令。所以我们实现了一套转换的架子，再编写一份转换规则，即可完成微信小程序到支付宝、百度、头条小程序的转换。</p> <p>采用这种转换的模式，非常方便用户理解我们是如何把微信小程序转换成支付宝、百度等小程序平台的。而且只要用户有需求，可以补齐任一套小程序转换其他平台的规则，就可以完成以某个小程序为标准为基础来编写小程序代码以及进一步转换成别的平台的能力。</p> <p>再结合前面一直在说的我们对原生小程序的支持，就可以撞出一点不一样的东西，比如，前文提到的第三方组件库跨小程序平台。</p> <p>对，我们能帮你把针对微信编写的ui组件库在支付宝、百度上运行起来，带着组件库一起跨小程序平台。</p> <p>那么一定会有这样一个问题，就算MPX对原生的支持再怎么牛逼，有的基础能力只有微信平台有，别的平台没有，MPX的转换还能无中生有吗？</p> <p>当然不能，其实这个问题对于所有的跨端框架都是一个问题，所以跨端最核心的问题是，如何搞定差异化部分。</p> <p>MPX提供了丰富的条件编译能力，可以以文件为维度差别构建，可以以代码块为维度，也可以以代码维度进行差别构建。</p> <p>而且MPX的差异化构建能力也是完全基于webpack实现的，所以上面提到的第三方组件库如果确实存在转换不了的地方，比如vant的picker组件使用内联wxs写了一个小方法叫isSimple在模板里调用了，但是这个方法的写法在百度小程序的filter脚本（filter可以理解为百度小程序的wxs）里不支持，因为百度的filter要求必须导出一个对象包裹方法。</p> <p>最好的解决办法当然是给vant-weapp提pr帮他们解决一下这个问题，但时间可能会比较慢，所以在MPX里，可以利用webpack的alias能力：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/7f90593b-65b4-40d0-bd93-6396e8a18e64.png" alt="通过alias解决第三方组件的跨平台问题"></p> <p>当尝试构建百度小程序时，会优先去查找pick/index.swan.wxml，再被alias到一个src下的文件，自己修改一下第三方包里有一些小问题的部分即可。</p> <p>关于跨平台的条件编译，更多具体信息可以<a href="/guide/advance/platform.html#跨平台编译">查阅我们的官方文档 - 跨平台编译</a></p> <h3 id="能力增强"><a href="#能力增强" class="header-anchor">#</a> 能力增强</h3> <blockquote><p>通过数据响应、编译时预处理提供了computed/watch，完备的样式类型绑定，双向数据绑定，动态组件等一系列方便开发者更好开发小程序的能力增强</p></blockquote> <p>能力增强应该是一个框架提供的最核心最重要的能力了，而MPX也确实在这里下了很大的力气，提供了多且好用的能力增强，不过受限于此处的篇幅，就只简单介绍，细节大家还是<a href="/guide/basic/template.html">查阅我们的文档</a>的好。</p> <p>别的框架由于往往基于react/vue的，会给个列表写明不支持哪些能力，用户写的时候习惯使然，往往用了后可能才反应过来哦这个不支持。MPX则是原生的小程序语法写着难受时候突然想起MPX有这个能力。</p> <p>列一下MPX增强的能力：</p> <ul><li>模板上的增强
-<ul><li>样式类名绑定</li> <li>内联事件传参</li> <li>动态组件</li> <li>双向绑定</li> <li>节点获取ref</li></ul></li> <li>JS里的增强
-<ul><li>数据响应</li> <li>setData优化</li> <li>ES6+</li></ul></li> <li>样式上的增强
-<ul><li>预处理支持</li> <li>rpx转换</li></ul></li> <li>JSON里的增强
-<ul><li>packages</li> <li>分包资源优化</li></ul></li></ul> <p>MPX最显著的能力是数据响应，它衍生出computed/watch，以及双向数据绑定等。这个能力和Vue比较像，不同的是在MPX里是由mobx提供的数据响应能力。</p> <p>而同样是数据响应，我们做了一些不一样的优化。</p> <h3 id="性能优势"><a href="#性能优势" class="header-anchor">#</a> 性能优势</h3> <blockquote><p>通过对模板的解析抽象出访问的数据以保证在提供了数据响应能力的同时不至于劣化性能。</p></blockquote> <p>mpvue/wepy/megalo等框架也提供了数据响应的能力，但是数据响应在小程序领域有个较大的问题，微信开发指南里明确提到要注意setData的调用频次和数据量的大小。</p> <p>而数据响应最基本的做法就是数据变了就去set数据，这会极大劣化小程序的性能表现。</p> <p>而MPX通过对模板进行解析，抽象出对应的render函数，在调用setData发送数据前执行render函数找到真正需要发送的数据。</p> <p>效果如图：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/9399b75c-5c81-4584-89b6-5e7f2c2ba7ba.png" alt="小程序性能分析"></p> <p>小程序开发者工具的audits面板能辅助用户分析出可能需要优化的点。正如前文所说，MPX在红框部分，尤其是红框里的第三条，不将模板上未使用的数据发送到渲染层上做了极大的优化。</p> <p>只要不出现渲染函数执行失败（会有warning在console里提示，同时兜底逻辑会进行全量setData以保证程序仍可正常运行），使用MPX开发的小程序就永远不用担心发送了模板未使用的数据。</p> <p>虽然只是一个小小的TODO MVC示例，但是这个优化和应用的规模没关系，而且同时大家可以尝试别家的小demo对比看看。</p> <p>这个优化的细节可以看<a href="/articles/2.0.html">前一篇文章</a>，或者我们的文档<a href="/guide/understand/runtime.html">MPX运行机制 - 数据响应与性能优化</a></p> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>与目前市面上的诸多框架相比，MPX希望以原生小程序为基础，全面拥抱原生小程序，在原生小程序的基础上做增强，通过尽可能少的转换实现尽可能多的能力增强，在提升小程序开发体验的同时，保证不因转换或框架的问题产生过多的坑。</p> <p>MPX框架的目标用户是对小程序质量有较高要求的开发者，如果你是原生小程序开发者，或者厌倦了解决某些以web框架DSL语法为基础的转换框架造成的坑，欢迎尝试MPX框架。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/articles/performance.html" class="prev">
-        小程序框架运行时性能大测评
-      </a></span> <span class="next"><a href="/articles/mpx2.html">
-        Mpx框架技术揭秘
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/57.9d9ddcbd.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/mpx2.html b/docs-vuepress/.vuepress/dist/articles/mpx2.html
deleted file mode 100644
index be760c89ba..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/mpx2.html
+++ /dev/null
@@ -1,740 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx 小程序框架技术揭秘 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/58.50eb3b91.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" aria-current="page" class="active sidebar-link">Mpx框架技术揭秘</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx2.html#编译环节" class="sidebar-link">编译环节</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx2.html#动态入口编译" class="sidebar-link">动态入口编译</a></li><li class="sidebar-sub-header"><a href="/articles/mpx2.html#render-function" class="sidebar-link">Render Function</a></li><li class="sidebar-sub-header"><a href="/articles/mpx2.html#wxs-module" class="sidebar-link">Wxs Module</a></li><li class="sidebar-sub-header"><a href="/articles/mpx2.html#template-script-style-json-模块单文件的生成" class="sidebar-link">template/script/style/json 模块单文件的生成</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/mpx2.html#运行时环节" class="sidebar-link">运行时环节</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx2.html#响应式系统" class="sidebar-link">响应式系统</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/mpx2.html#性能优化" class="sidebar-link">性能优化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/mpx2.html#尽可能的减少-setdata-传输的数据" class="sidebar-link">尽可能的减少 setData 传输的数据</a></li><li class="sidebar-sub-header"><a href="/articles/mpx2.html#尽可能的减少-setdata-的调用频次" class="sidebar-link">尽可能的减少 setData 的调用频次</a></li></ul></li></ul></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx-小程序框架技术揭秘"><a href="#mpx-小程序框架技术揭秘" class="header-anchor">#</a> Mpx 小程序框架技术揭秘</h1> <blockquote><p>作者：<a href="https://github.com/CommanderXL" target="_blank" rel="noopener noreferrer">CommanderXL<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p>与目前业内的几个小程序框架相比较而言，mpx 开发设计的出发点就是基于原生的小程序去做功能增强。所以从开发框架的角度来说，是没有任何“包袱”，围绕着原生小程序这个 core 去做不同功能的 patch 工作，使得开发小程序的体验更好。</p> <p>于是我挑了一些我非常感兴趣的点去学习了下 mpx 在相关功能上的设计与实现。</p> <h2 id="编译环节"><a href="#编译环节" class="header-anchor">#</a> 编译环节</h2> <h3 id="动态入口编译"><a href="#动态入口编译" class="header-anchor">#</a> 动态入口编译</h3> <p>不同于 web 规范，我们都知道小程序每个 page/component 需要被最终在 webview 上渲染出来的内容是需要包含这几个独立的文件的：js/json/wxml/wxss。为了提升小程序的开发体验，mpx 参考 vue 的 SFC(single file component)的设计思路，采用单文件的代码组织方式进行开发。既然采用这种方式去组织代码的话，那么模板、逻辑代码、json配置文件、style样式等都放到了同一个文件当中。那么 mpx 需要做的一个工作就是如何将 SFC 在代码编译后拆分为 js/json/wxml/wxss 以满足小程序技术规范。熟悉 vue 生态的同学都知道，vue-loader 里面就做了这样一个编译转化工作。具体有关 vue-loader 的工作流程可以参见我写的<a href="https://github.com/CommanderXL/Biu-blog/issues/33" target="_blank" rel="noopener noreferrer">文章<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>这里会遇到这样一个问题，就是在 vue 当中，如果你要引入一个页面/组件的话，直接通过<code>import</code>语法去引入对应的 vue 文件即可。但是在小程序的标准规范里面，它有自己一套组件系统，即如果你在某个页面/组件里面想要使用另外一个组件，那么需要在你的 json 配置文件当中去声明<code>usingComponents</code>这个字段，对应的值为这个组件的路径。</p> <p>在 vue 里面 import 一个 vue 文件，那么这个文件会被当做一个 dependency 去加入到 webpack 的编译流程当中。但是 mpx 是保持小程序原有的功能，去进行功能的增强。因此一个 mpx 文件当中如果需要引入其他页面/组件，那么就是遵照小程序的组件规范需要在<code>usingComponents</code>定义好<code>组件名:路径</code>即可，<strong>mpx 提供的 webpack 插件来完成确定依赖关系，同时将被引入的页面/组件加入到编译构建的环节当中</strong>。</p> <p>接下来就来看下具体的实现，mpx webpack-plugin 暴露出来的插件上也提供了静态方法去使用 loader。这个 loader 的作用和 vue-loader 的作用类似，首先就是拿到 mpx 原始的文件后转化一个 js 文本的文件。例如一个 list.mpx 文件里面有关 json 的配置会被编译为：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=json&amp;index=0!../../node_modules/@mpxjs/webpack-plugin/lib/json-compiler/index?root=!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=json&amp;index=0!./list.mpx&quot;</span><span class="token punctuation">)</span>
-</code></pre></div><p>这样可以清楚的看到 list.mpx 这个文件首先 selector(抽离<code>list.mpx</code>当中有关 json 的配置，并传入到 json-compiler 当中) ---&gt;&gt;&gt; json-compiler(对 json 配置进行处理，添加动态入口等) ---&gt;&gt;&gt; extractor(利用 child compiler 单独生成 json 配置文件)</p> <p>其中动态添加入口的处理流程是在 json-compiler 当中去完成的。例如在你的 <code>page/home.mpx</code> 文件当中的 json 配置中使用了 局部组件 <code>components/list.mpx</code>:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;application/json&quot;</span><span class="token operator">&gt;</span>
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/list&quot;</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>在 json-compiler 当中：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">...</span>
-
-<span class="token keyword">const</span> <span class="token function-variable function">addEntrySafely</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">resource<span class="token punctuation">,</span> name<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 如果loader已经回调，就不再添加entry</span>
-  <span class="token keyword">if</span> <span class="token punctuation">(</span>callbacked<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token comment">// 使用 webpack 提供的 SingleEntryPlugin 插件创建一个单文件的入口依赖(即这个 component)</span>
-  <span class="token keyword">const</span> dep <span class="token operator">=</span> SingleEntryPlugin<span class="token punctuation">.</span><span class="token function">createDependency</span><span class="token punctuation">(</span>resource<span class="token punctuation">,</span> name<span class="token punctuation">)</span>
-  entryDeps<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>dep<span class="token punctuation">)</span>
-  <span class="token comment">// compilation.addEntry 方法开始将这个需要被编译的 component 作为依赖添加到 webpack 的构建流程当中</span>
-  <span class="token comment">// 这里可以看到的是整个动态添加入口文件的过程是深度优先的</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>_compilation<span class="token punctuation">.</span><span class="token function">addEntry</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>_compiler<span class="token punctuation">.</span>context<span class="token punctuation">,</span> dep<span class="token punctuation">,</span> name<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> module</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    entryDeps<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>dep<span class="token punctuation">)</span>
-    <span class="token function">checkEntryDeps</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token function">callback</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> module<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-
-<span class="token keyword">const</span> <span class="token function-variable function">processComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">component<span class="token punctuation">,</span> context<span class="token punctuation">,</span> rewritePath<span class="token punctuation">,</span> componentPath<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token operator">...</span>
-  <span class="token comment">// 调用 loaderContext 上提供的 resolve 方法去解析这个 component path 完整的路径，以及这个 component 所属的 package 相关的信息(例如 package.json 等)</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> component<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> rawResult<span class="token punctuation">,</span> info</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token operator">...</span>
-    componentPath <span class="token operator">=</span> componentPath <span class="token operator">||</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>subPackageRoot<span class="token punctuation">,</span> <span class="token string">'components'</span><span class="token punctuation">,</span> componentName <span class="token operator">+</span> <span class="token function">hash</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">,</span> componentName<span class="token punctuation">)</span>
-    <span class="token operator">...</span>
-    <span class="token comment">// component path 解析完之后，调用 addEntrySafely 开始在 webpack 构建流程中动态添加入口</span>
-    <span class="token function">addEntrySafely</span><span class="token punctuation">(</span>rawResult<span class="token punctuation">,</span> componentPath<span class="token punctuation">,</span> callback<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-
-<span class="token keyword">if</span> <span class="token punctuation">(</span>isApp<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token operator">...</span>
-<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-  <span class="token keyword">if</span> <span class="token punctuation">(</span>json<span class="token punctuation">.</span>usingComponents<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// async.forEachOf 流程控制依次调用 processComponent 方法</span>
-    async<span class="token punctuation">.</span><span class="token function">forEachOf</span><span class="token punctuation">(</span>json<span class="token punctuation">.</span>usingComponents<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">component<span class="token punctuation">,</span> name<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token function">processComponent</span><span class="token punctuation">(</span>component<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">path</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        json<span class="token punctuation">.</span>usingComponents<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> path
-      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-  <span class="token operator">...</span>
-<span class="token punctuation">}</span>
-<span class="token operator">...</span>
-</code></pre></div><p>这里需要解释说明下有关 webpack 提供的 SingleEntryPlugin 插件。这个插件是 webpack 提供的一个内置插件，当这个插件被挂载到 webpack 的编译流程的过程中是，会绑定<code>compiler.hooks.make.tapAsync</code>hook，当这个 hook 触发后会调用这个插件上的 SingleEntryPlugin.createDependency 静态方法去创建一个入口依赖，然后调用<code>compilation.addEntry</code>将这个依赖加入到编译的流程当中，这个是单入口文件的编译流程的最开始的一个步骤(具体可以参见 <a href="https://github.com/webpack/webpack/blob/master/lib/SingleEntryPlugin.js" target="_blank" rel="noopener noreferrer">Webpack SingleEntryPlugin 源码<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)。</p> <p>Mpx 正是利用了 webpack 提供的这样一种能力，在遵照小程序的自定义组件的规范的前提下，解析 mpx json 配置文件的过程中，手动的调用 SingleEntryPlugin 相关的方法去完成动态入口的添加工作。这样也就串联起了所有的 mpx 文件的编译工作。</p> <h3 id="render-function"><a href="#render-function" class="header-anchor">#</a> Render Function</h3> <p>Render Function 这块的内容我觉得是 Mpx 设计上的一大亮点内容。Mpx 引入 Render Function 主要解决的问题是性能优化方向相关的，因为小程序的架构设计，逻辑层和渲染层是2个独立的。</p> <p>这里直接引用 Mpx 有关 Render Function 对于性能优化相关开发工作的描述：</p> <blockquote><p>作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：</p></blockquote> <blockquote><ul><li>尽可能减少setData调用的频次</li> <li>尽可能减少单次setData传输的数据
-为了实现以上两个优化方向，我们做了以下几项工作：</li></ul></blockquote> <blockquote><p>将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；</p></blockquote> <blockquote><p>将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。</p></blockquote> <p>接下来我们看下 Mpx 是如何实现 Render Function 的。这里我们从一个简单的 demo 来说起：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>Computed reversed message: &quot;{{ reversedMessage }}&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>the c string {{ demoObj.a.b.c }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ { active: isActive } }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/core&quot;</span><span class="token punctuation">;</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">isActive</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'messages'</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">demoObj</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token string">'c'</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token function">reversedMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><code>.mpx</code> 文件经过 loader 编译转换的过程中。对于 template 模块的处理和 vue 类似，首先将 template 转化为 AST，然后再将 AST 转化为 code 的过程中做相关转化的工作，最终得到我们需要的 template 模板代码。</p> <p>在<code>packages/webpack-plugin/lib/template-compiler.js</code>模板处理 loader 当中:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">let</span> renderResult <span class="token operator">=</span> <span class="token function">bindThis</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">global.currentInject = {
-    moduleId: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span>moduleId<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">,
-    render: function () {
-      var __seen = [];
-      var renderData = {};
-      </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>compiler<span class="token punctuation">.</span><span class="token function">genNode</span><span class="token punctuation">(</span>ast<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">return renderData;
-    }
-};\n</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">needCollect</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">ignoreMap</span><span class="token operator">:</span> meta<span class="token punctuation">.</span>wxsModuleMap
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>在 render 方法内部，创建 renderData 局部变量，调用<code>compiler.genNode(ast)</code>方法完成 Render Function 核心代码的生成工作，最终将这个 renderData 返回。例如在上面给出来的 demo 实例当中，通过<code>compiler.genNode(ast)</code>方法最终生成的代码为：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">(</span><span class="token punctuation">(</span>mpxShow<span class="token punctuation">)</span><span class="token operator">||</span><span class="token punctuation">(</span>mpxShow<span class="token punctuation">)</span><span class="token operator">===</span><span class="token keyword">undefined</span><span class="token operator">?</span><span class="token string">''</span><span class="token operator">:</span><span class="token string">'display:none;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token punctuation">(</span> isActive <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-<span class="token punctuation">}</span>
-<span class="token string">&quot;Computed reversed message: \&quot;&quot;</span><span class="token operator">+</span><span class="token punctuation">(</span> reversedMessage <span class="token punctuation">)</span><span class="token operator">+</span><span class="token string">&quot;\&quot;&quot;</span><span class="token punctuation">;</span>
-<span class="token string">&quot;the c string &quot;</span><span class="token operator">+</span><span class="token punctuation">(</span> demoObj<span class="token punctuation">.</span>a<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">(</span>__injectHelper<span class="token punctuation">.</span><span class="token function">transformClass</span><span class="token punctuation">(</span><span class="token string">&quot;list&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span><span class="token literal-property property">active</span><span class="token operator">:</span> isActive<span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><p>mpx 文件当中的 template 模块被初步处理成上面的代码后，可以看到这是一段可执行的 js 代码。那么这段 js 代码到底是用作何处呢？可以看到<code>compiler.genNode</code>方法是被包裹至<code>bindThis</code>方法当中的。即这段 js 代码还会被<code>bindThis</code>方法做进一步的处理。打开 bind-this.js 文件可以看到内部的实现其实就是一个 babel 的 transform plugin。在处理上面这段 js 代码的 AST 的过程中，通过这个插件对 js 代码做进一步的处理。最终这段 js 代码处理后的结果是：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">/* mpx inject */</span> global<span class="token punctuation">.</span>currentInject <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">moduleId</span><span class="token operator">:</span> <span class="token string">&quot;2271575d&quot;</span><span class="token punctuation">,</span>
-  <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">var</span> __seen <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
-    <span class="token keyword">var</span> renderData <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
-    <span class="token punctuation">(</span>renderData<span class="token punctuation">[</span><span class="token string">&quot;mpxShow&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>mpxShow<span class="token punctuation">,</span> <span class="token string">&quot;mpxShow&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>mpxShow<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">(</span>renderData<span class="token punctuation">[</span><span class="token string">&quot;mpxShow&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>mpxShow<span class="token punctuation">,</span> <span class="token string">&quot;mpxShow&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>mpxShow<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token keyword">undefined</span> <span class="token operator">?</span> <span class="token string">''</span> <span class="token operator">:</span> <span class="token string">'display:none;'</span><span class="token punctuation">;</span>
-    <span class="token string">&quot;Computed reversed message: \&quot;&quot;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>renderData<span class="token punctuation">[</span><span class="token string">&quot;reversedMessage&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>reversedMessage<span class="token punctuation">,</span> <span class="token string">&quot;reversedMessage&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>reversedMessage<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;\&quot;&quot;</span><span class="token punctuation">;</span>
-    <span class="token string">&quot;the c string &quot;</span> <span class="token operator">+</span> <span class="token punctuation">(</span>renderData<span class="token punctuation">[</span><span class="token string">&quot;demoObj.a.b.c&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>demoObj<span class="token punctuation">.</span>a<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c<span class="token punctuation">,</span> <span class="token string">&quot;demoObj&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">__get</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">__get</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">__get</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>demoObj<span class="token punctuation">,</span> <span class="token string">&quot;a&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">&quot;b&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">&quot;c&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">__get</span><span class="token punctuation">(</span>__injectHelper<span class="token punctuation">,</span> <span class="token string">&quot;transformClass&quot;</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token string">&quot;list&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token punctuation">(</span>renderData<span class="token punctuation">[</span><span class="token string">&quot;isActive&quot;</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>isActive<span class="token punctuation">,</span> <span class="token string">&quot;isActive&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isActive<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token keyword">return</span> renderData<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span>
-</code></pre></div><p>bindThis 方法对于 js 代码的转化规则就是：</p> <ol><li>一个变量的访问形式，改造成 this.xxx 的形式；</li> <li>对象属性的访问形式，改造成 this.__get(object, property) 的形式(this.__get方法为运行时 mpx runtime 提供的方法)</li></ol> <p>这里的 this 为 mpx 构造的一个代理对象，在你业务代码当中调用 createComponent/createPage 方法传入的配置项，例如 data，都会通过这个代理对象转化为响应式的数据。</p> <p>需要注意的是不管哪种数据形式的改造，最终需要达到的效果就是确保在 Render Function 执行的过程当中，这些被模板使用到的数据能被正常的访问到，在访问的阶段中，这些被访问到的数据即被加入到 mpx 构建的整个响应式的系统当中。</p> <p>只要在 template 当中使用到的 data 数据(包括衍生的 computed 数据)，最终都会被 renderData 所记录，而记录的数据形式是例如：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>renderData<span class="token punctuation">[</span><span class="token string">'xxx'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>xxx<span class="token punctuation">,</span> <span class="token string">'xxx'</span><span class="token punctuation">]</span> <span class="token comment">// 数组的形式，第一项为这个数据实际的值，第二项为这个数据的 firstKey(主要用以数据 diff 的工作)</span>
-</code></pre></div><p>以上就是 mpx 生成 Render Function 的整个过程。总结下 Render Function 所做的工作：</p> <ol><li>执行 render 函数，将渲染模板使用到的数据加入到响应式的系统当中；</li> <li>返回 renderData 用以接下来的数据 diff 以及调用小程序的 setData 方法来完成视图的更新</li></ol> <h3 id="wxs-module"><a href="#wxs-module" class="header-anchor">#</a> Wxs Module</h3> <p>Wxs 是小程序自己推出的一套脚本语言。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html" target="_blank" rel="noopener noreferrer">官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>给出的示例，wxs 模块必须要声明式的被 wxml 引用。和 js 在 jsCore 当中去运行不同的是 wxs 是在渲染线程当中去运行的。因此 wxs 的执行便少了一次从 jsCore 执行的线程和渲染线程的通讯，从这个角度来说是对代码执行效率和性能上的比较大的一个优化手段。</p> <p>有关官方提到的有关 wxs 的运行效率的问题还有待论证：</p> <blockquote><p>“在 android 设备中，小程序里的 wxs 与 js 运行效率无差异，而在 ios 设备中，小程序里的 wxs 会比 js 快 2~20倍。”</p></blockquote> <p>因为 mpx 是对小程序做渐进增强，因此 wxs 的使用方式和原生的小程序保持一致。在你的<code>.mpx</code>文件当中的 template block 内通过路径直接去引入 wxs 模块即可使用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>wxs</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../wxs/components/list.wxs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">module</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ list.FOO }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// wxs/components/list.wxs</span>
-<span class="token keyword">const</span> Foo <span class="token operator">=</span> <span class="token string">'This is from list wxs module'</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  Foo
-<span class="token punctuation">}</span>
-</code></pre></div><p>在 template 模块经过 template-compiler 处理的过程中。模板编译器 compiler 在解析模板的 AST 过程中会针对 wxs 标签缓存一份 wxs 模块的映射表：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">{</span>
-  <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">wxsModuleMap</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token string">'../wxs/components/list.wxs'</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>当 compiler 对 template 模板解析完后，template-compiler 接下来就开始处理 wxs 模块相关的内容：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// template-compiler/index.js</span>
-
-module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">raw</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token operator">...</span>
-
-  <span class="token keyword">const</span> <span class="token function-variable function">addDependency</span> <span class="token operator">=</span> <span class="token parameter">dep</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> resourceIdent <span class="token operator">=</span> dep<span class="token punctuation">.</span><span class="token function">getResourceIdentifier</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>resourceIdent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> factory <span class="token operator">=</span> compilation<span class="token punctuation">.</span>dependencyFactories<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>dep<span class="token punctuation">.</span>constructor<span class="token punctuation">)</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span>factory <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">No module factory available for dependency type: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dep<span class="token punctuation">.</span>constructor<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-      <span class="token keyword">let</span> innerMap <span class="token operator">=</span> dependencies<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>factory<span class="token punctuation">)</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span>innerMap <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        dependencies<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>factory<span class="token punctuation">,</span> <span class="token punctuation">(</span>innerMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-      <span class="token keyword">let</span> list <span class="token operator">=</span> innerMap<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>resourceIdent<span class="token punctuation">)</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span>list <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> innerMap<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>resourceIdent<span class="token punctuation">,</span> <span class="token punctuation">(</span>list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-      list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>dep<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-
-  <span class="token comment">// 如果有 wxsModuleMap 即为 wxs module 依赖的话，那么下面会调用 compilation.addModuleDependencies 方法</span>
-  <span class="token comment">// 将 wxsModule 作为 issuer 的依赖再次进行编译，最终也会被打包进输出的模块代码当中</span>
-  <span class="token comment">// 需要注意的就是 wxs module 不仅要被注入到 bundle 里的 render 函数当中，同时也会通过 wxs-loader 处理，单独输出一份可运行的 wxs js 文件供 wxml 引入使用</span>
-  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> module <span class="token keyword">in</span> meta<span class="token punctuation">.</span>wxsModuleMap<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    isSync <span class="token operator">=</span> <span class="token boolean">false</span>
-    <span class="token keyword">let</span> src <span class="token operator">=</span> meta<span class="token punctuation">.</span>wxsModuleMap<span class="token punctuation">[</span>module<span class="token punctuation">]</span>
-    <span class="token keyword">const</span> expression <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">require(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>src<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span>
-    <span class="token keyword">const</span> deps <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
-    <span class="token comment">// parser 为 js 的编译器</span>
-    parser<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>expression<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">current</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 需要注意的是这里需要部署 addDependency 接口，因为通过 parse.parse 对代码进行编译的时候，会调用这个接口来获取 require(${JSON.stringify(src)}) 编译产生的依赖模块</span>
-        <span class="token function-variable function">addDependency</span><span class="token operator">:</span> <span class="token parameter">dep</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-          dep<span class="token punctuation">.</span>userRequest <span class="token operator">=</span> module
-          deps<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>dep<span class="token punctuation">)</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">module</span><span class="token operator">:</span> issuer
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    issuer<span class="token punctuation">.</span><span class="token function">addVariable</span><span class="token punctuation">(</span>module<span class="token punctuation">,</span> expression<span class="token punctuation">,</span> deps<span class="token punctuation">)</span> <span class="token comment">// 给 issuer module 添加 variable 依赖</span>
-    <span class="token function">iterationOfArrayCallback</span><span class="token punctuation">(</span>deps<span class="token punctuation">,</span> addDependency<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-
-  <span class="token comment">// 如果没有 wxs module 的处理，那么 template-compiler 即为同步任务，否则为异步任务</span>
-  <span class="token keyword">if</span> <span class="token punctuation">(</span>isSync<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> result
-  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> callback <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">async</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-
-    <span class="token keyword">const</span> sortedDependencies <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
-    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> pair1 <span class="token keyword">of</span> dependencies<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> pair2 <span class="token keyword">of</span> pair1<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        sortedDependencies<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-          <span class="token literal-property property">factory</span><span class="token operator">:</span> pair1<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">dependencies</span><span class="token operator">:</span> pair2<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
-        <span class="token punctuation">}</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-
-    <span class="token comment">// 调用 compilation.addModuleDependencies 方法，将 wxs module 作为 issuer module 的依赖加入到编译流程中</span>
-    compilation<span class="token punctuation">.</span><span class="token function">addModuleDependencies</span><span class="token punctuation">(</span>
-      issuer<span class="token punctuation">,</span>
-      sortedDependencies<span class="token punctuation">,</span>
-      compilation<span class="token punctuation">.</span>bail<span class="token punctuation">,</span>
-      <span class="token keyword">null</span><span class="token punctuation">,</span>
-      <span class="token boolean">true</span><span class="token punctuation">,</span>
-      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> result<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h3 id="template-script-style-json-模块单文件的生成"><a href="#template-script-style-json-模块单文件的生成" class="header-anchor">#</a> template/script/style/json 模块单文件的生成</h3> <p>不同于 Vue 借助 webpack 是将 Vue 单文件最终打包成单独的 js chunk 文件。而小程序的规范是每个页面/组件需要对应的 wxml/js/wxss/json 4个文件。因为 mpx 使用单文件的方式去组织代码，所以在编译环节所需要做的工作之一就是将 mpx 单文件当中不同 block 的内容拆解到对应文件类型当中。在动态入口编译的小节里面我们了解到 mpx 会分析每个 mpx 文件的引用依赖，从而去给这个文件创建一个 entry 依赖(SingleEntryPlugin)并加入到 webpack 的编译流程当中。我们还是继续看下 mpx loader 对于 mpx 单文件初步编译转化后的内容：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">/* script */</span>
-<span class="token keyword">export</span> <span class="token operator">*</span> <span class="token keyword">from</span> <span class="token string">&quot;!!babel-loader!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=script&amp;index=0!./list.mpx&quot;</span>
-
-<span class="token comment">/* styles */</span>
-<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=styles&amp;index=0!../../node_modules/@mpxjs/webpack-plugin/lib/wxss/loader?root=&amp;importLoaders=1&amp;extract=true!../../node_modules/@mpxjs/webpack-plugin/lib/style-compiler/index?{\&quot;id\&quot;:\&quot;2271575d\&quot;,\&quot;scoped\&quot;:false,\&quot;sourceMap\&quot;:false,\&quot;transRpx\&quot;:{\&quot;mode\&quot;:\&quot;only\&quot;,\&quot;comment\&quot;:\&quot;use rpx\&quot;,\&quot;include\&quot;:\&quot;/Users/XRene/demo/mpx-demo-source/src\&quot;}}!stylus-loader!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=styles&amp;index=0!./list.mpx&quot;</span><span class="token punctuation">)</span>
-
-<span class="token comment">/* json */</span>
-<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=json&amp;index=0!../../node_modules/@mpxjs/webpack-plugin/lib/json-compiler/index?root=!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=json&amp;index=0!./list.mpx&quot;</span><span class="token punctuation">)</span>
-
-<span class="token comment">/* template */</span>
-<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=template&amp;index=0!../../node_modules/@mpxjs/webpack-plugin/lib/wxml/wxml-loader?root=!../../node_modules/@mpxjs/webpack-plugin/lib/template-compiler/index?{\&quot;usingComponents\&quot;:[],\&quot;hasScoped\&quot;:false,\&quot;isNative\&quot;:false,\&quot;moduleId\&quot;:\&quot;2271575d\&quot;}!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=template&amp;index=0!./list.mpx&quot;</span><span class="token punctuation">)</span>
-</code></pre></div><p>接下来可以看下 styles/json/template 这3个 block 的处理流程是什么样。</p> <p>首先来看下 json block 的处理流程：<code>list.mpx -&gt; json-compiler -&gt; extractor</code>。第一个阶段 list.mpx 文件经由 json-compiler 的处理流程在前面的章节已经讲过，主要就是分析依赖增加动态入口的编译过程。当所有的依赖分析完后，调用 json-compiler loader 的异步回调函数：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// lib/json-compiler/index.js</span>
-
-module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-
-  <span class="token operator">...</span>
-  <span class="token keyword">const</span> nativeCallback <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">async</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token operator">...</span>
-
-  <span class="token keyword">let</span> callbacked <span class="token operator">=</span> <span class="token boolean">false</span>
-  <span class="token keyword">const</span> <span class="token function-variable function">callback</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> processOutput</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token function">checkEntryDeps</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      callbacked <span class="token operator">=</span> <span class="token boolean">true</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">nativeCallback</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
-      <span class="token keyword">let</span> output <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">var json = </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>json<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;\n</span><span class="token template-punctuation string">`</span></span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span>processOutput<span class="token punctuation">)</span> output <span class="token operator">=</span> <span class="token function">processOutput</span><span class="token punctuation">(</span>output<span class="token punctuation">)</span>
-      output <span class="token operator">+=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">module.exports = JSON.stringify(json, null, 2);\n</span><span class="token template-punctuation string">`</span></span>
-      <span class="token function">nativeCallback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> output<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>这里我们可以看到经由 json-compiler 处理后，通过<code>nativeCallback</code>方法传入下一个 loader 的文本内容形如：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> json <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/components/list397512ea/list&quot;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>json<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span>
-</code></pre></div><p>即这段文本内容会传递到下一个 loader 内部进行处理，即 extractor。接下来我们来看下 extractor 里面主要是实现了哪些功能：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// lib/extractor.js</span>
-
-module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token operator">...</span>
-  <span class="token keyword">const</span> contentLoader <span class="token operator">=</span> normalize<span class="token punctuation">.</span><span class="token function">lib</span><span class="token punctuation">(</span><span class="token string">'content-loader'</span><span class="token punctuation">)</span>
-  <span class="token keyword">let</span> request <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">!!</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>contentLoader<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">?</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>resource<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token comment">// 构建一个新的 resource，且这个 resource 只需要经过 content-loader</span>
-  <span class="token keyword">let</span> resultSource <span class="token operator">=</span> defaultResultSource
-  <span class="token keyword">const</span> childFilename <span class="token operator">=</span> <span class="token string">'extractor-filename'</span>
-  <span class="token keyword">const</span> outputOptions <span class="token operator">=</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">filename</span><span class="token operator">:</span> childFilename
-  <span class="token punctuation">}</span>
-  <span class="token comment">// 创建一个 child compiler</span>
-  <span class="token keyword">const</span> childCompiler <span class="token operator">=</span> mainCompilation<span class="token punctuation">.</span><span class="token function">createChildCompiler</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span> outputOptions<span class="token punctuation">,</span> <span class="token punctuation">[</span>
-    <span class="token keyword">new</span> <span class="token class-name">NodeTemplatePlugin</span><span class="token punctuation">(</span>outputOptions<span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token keyword">new</span> <span class="token class-name">LibraryTemplatePlugin</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'commonjs2'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 最终输出的 chunk 内容遵循 commonjs 规范的可执行的模块代码 module.exports = (function(modules) {})([modules])</span>
-    <span class="token keyword">new</span> <span class="token class-name">NodeTargetPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token keyword">new</span> <span class="token class-name">SingleEntryPlugin</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>context<span class="token punctuation">,</span> request<span class="token punctuation">,</span> resourcePath<span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token keyword">new</span> <span class="token class-name">LimitChunkCountPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">maxChunks</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">]</span><span class="token punctuation">)</span>
-
-  <span class="token operator">...</span>
-  childCompiler<span class="token punctuation">.</span>hooks<span class="token punctuation">.</span>thisCompilation<span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token string">'MpxWebpackPlugin '</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">compilation</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 创建 loaderContext 时触发的 hook，在这个 hook 触发的时候，将原本从 json-compiler 传递过来的 content 内容挂载至 loaderContext.__mpx__ 属性上面以供接下来的 content -loader 来进行使用</span>
-    compilation<span class="token punctuation">.</span>hooks<span class="token punctuation">.</span>normalModuleLoader<span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token string">'MpxWebpackPlugin'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">loaderContext<span class="token punctuation">,</span> module</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 传递编译结果，子编译器进入content-loader后直接输出</span>
-      loaderContext<span class="token punctuation">.</span>__mpx__ <span class="token operator">=</span> <span class="token punctuation">{</span>
-        content<span class="token punctuation">,</span>
-        <span class="token literal-property property">fileDependencies</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getDependencies</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">contextDependencies</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getContextDependencies</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-  <span class="token keyword">let</span> source
-
-  childCompiler<span class="token punctuation">.</span>hooks<span class="token punctuation">.</span>afterCompile<span class="token punctuation">.</span><span class="token function">tapAsync</span><span class="token punctuation">(</span><span class="token string">'MpxWebpackPlugin'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">compilation<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 这里 afterCompile 产出的 assets 的代码当中是包含 webpack runtime bootstrap 的代码，不过需要注意的是这个 source 模块的产出形式</span>
-    <span class="token comment">// 因为使用了 new LibraryTemplatePlugin(null, 'commonjs2') 等插件。所以产出的 source 是可以在 node 环境下执行的 module</span>
-    <span class="token comment">// 因为在 loaderContext 上部署了 exec 方法，即可以直接执行 commonjs 规范的 module 代码，这样就最终完成了 mpx 单文件当中不同模块的抽离工作</span>
-    source <span class="token operator">=</span> compilation<span class="token punctuation">.</span>assets<span class="token punctuation">[</span>childFilename<span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> compilation<span class="token punctuation">.</span>assets<span class="token punctuation">[</span>childFilename<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">source</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-
-    <span class="token comment">// Remove all chunk assets</span>
-    compilation<span class="token punctuation">.</span>chunks<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">chunk</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      chunk<span class="token punctuation">.</span>files<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token keyword">delete</span> compilation<span class="token punctuation">.</span>assets<span class="token punctuation">[</span>file<span class="token punctuation">]</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-    <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-  childCompiler<span class="token punctuation">.</span><span class="token function">runAsChild</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> entries<span class="token punctuation">,</span> compilation</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token operator">...</span>
-    <span class="token keyword">try</span> <span class="token punctuation">{</span>
-      <span class="token comment">// exec 是 loaderContext 上提供的一个方法，在其内部会构建原生的 node.js module，并执行这个 module 的代码</span>
-      <span class="token comment">// 执行这个 module 代码后获取的内容就是通过 module.exports 导出的内容</span>
-      <span class="token keyword">let</span> text <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>source<span class="token punctuation">,</span> request<span class="token punctuation">)</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        text <span class="token operator">=</span> text<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-          <span class="token keyword">return</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
-        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-
-      <span class="token keyword">let</span> extracted <span class="token operator">=</span> <span class="token function">extract</span><span class="token punctuation">(</span>text<span class="token punctuation">,</span> options<span class="token punctuation">.</span>type<span class="token punctuation">,</span> resourcePath<span class="token punctuation">,</span> <span class="token operator">+</span>options<span class="token punctuation">.</span>index<span class="token punctuation">,</span> selfResourcePath<span class="token punctuation">)</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span>extracted<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        resultSource <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">module.exports = __webpack_public_path__ + </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>extracted<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;</span><span class="token template-punctuation string">`</span></span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token function">nativeCallback</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>resultSource<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token function">nativeCallback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> resultSource<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-      <span class="token function">nativeCallback</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>稍微总结下上面的处理流程：</p> <ol><li>构建一个以当前模块路径及 content-loader 的 resource 路径</li> <li>以这个 resource 路径作为入口模块，创建一个 childCompiler</li> <li>childCompiler 启动后，创建 loaderContext 的过程中，将 content 文本内容挂载至 loaderContext.<strong>mpx</strong> 上，这样在 content-loader 在处理入口模块的时候仅仅就是取出这个 content 文本内容并返回。实际上这个入口模块经过 loader 的过程不会做任何的处理工作，仅仅是将父 compilation 传入的 content 返回出去。</li> <li>loader 处理模块的环节结束后，进入到 module.build 阶段，这个阶段对 content 内容没有太多的处理</li> <li>createAssets 阶段，输出 chunk。</li> <li>将输出的 chunk 构建为一个原生的 node.js 模块并执行，获取从这个 chunk 导出的内容。也就是模块通过<code>module.exports</code>导出的内容。</li></ol> <p>所以上面的示例 demo 最终会输出一个 json 文件，里面包含的内容即为：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">{</span>
-  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/components/list397512ea/list&quot;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="运行时环节"><a href="#运行时环节" class="header-anchor">#</a> 运行时环节</h2> <p>以上几个章节主要是分析了几个 Mpx 在编译构建环节所做的工作。接下来我们来看下 Mpx 在运行时环节做了哪些工作。</p> <h3 id="响应式系统"><a href="#响应式系统" class="header-anchor">#</a> 响应式系统</h3> <p>小程序也是通过数据去驱动视图的渲染，需要手动的调用<code>setData</code>去完成这样一个动作。同时小程序的视图层也提供了用户交互的响应事件系统，在 js 代码中可以去注册相关的事件回调并在回调中去更改相关数据的值。Mpx 使用 Mobx 作为响应式数据工具并引入到小程序当中，使得小程序也有一套完成的响应式的系统，让小程序的开发有了更好的体验。</p> <p>还是从组件的角度开始分析 mpx 的整个响应式的系统。每次通过<code>createComponent</code>方法去创建一个新的组件，这个方法将原生的小程序创造组件的方法<code>Component</code>做了一层代理，例如在 attched 的生命周期钩子函数内部会注入一个 mixin：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// attached 生命周期钩子 mixin</span>
-
-<span class="token function">attached</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 提供代理对象需要的api</span>
-  <span class="token function">transformApiForProxy</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> currentInject<span class="token punctuation">)</span>
-  <span class="token comment">// 缓存options</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>$rawOptions <span class="token operator">=</span> rawOptions <span class="token comment">// 原始的，没有剔除 customKeys 的 options 配置</span>
-  <span class="token comment">// 创建proxy对象</span>
-  <span class="token keyword">const</span> mpxProxy <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MPXProxy</span><span class="token punctuation">(</span>rawOptions<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span> <span class="token comment">// 将当前实例代理到 MPXProxy 这个代理对象上面去</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>$mpxProxy <span class="token operator">=</span> mpxProxy <span class="token comment">// 在小程序实例上绑定 $mpxProxy 的实例</span>
-  <span class="token comment">// 组件监听视图数据更新, attached之后才能拿到properties</span>
-  <span class="token keyword">this</span><span class="token punctuation">.</span>$mpxProxy<span class="token punctuation">.</span><span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>在这个方法内部首先调用<code>transformApiForProxy</code>方法对组件实例上下文<code>this</code>做一层代理工作，在 context 上下文上去重置小程序的 setData 方法，同时拓展 context 相关的属性内容：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">transformApiForProxy</span> <span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> currentInject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> rawSetData <span class="token operator">=</span> context<span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token comment">// setData 绑定对应的 context 上下文</span>
-  Object<span class="token punctuation">.</span><span class="token function">defineProperties</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">setData</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 重置 context 的 setData 方法</span>
-      <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$mpxProxy<span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$mpxProxy<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">true</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">__getInitialData</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> context<span class="token punctuation">.</span>data
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">false</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">__render</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 小程序原生的 setData 方法</span>
-      <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> rawSetData
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">false</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token comment">// context 绑定注入的render函数</span>
-  <span class="token keyword">if</span> <span class="token punctuation">(</span>currentInject<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>currentInject<span class="token punctuation">.</span>render<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 编译过程中生成的 render 函数</span>
-      Object<span class="token punctuation">.</span><span class="token function">defineProperties</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">__injectedRender</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            <span class="token keyword">return</span> currentInject<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
-          <span class="token punctuation">}</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">false</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>currentInject<span class="token punctuation">.</span>getRefsData<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      Object<span class="token punctuation">.</span><span class="token function">defineProperties</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">__getRefsData</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            <span class="token keyword">return</span> currentInject<span class="token punctuation">.</span>getRefsData
-          <span class="token punctuation">}</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">configurable</span><span class="token operator">:</span> <span class="token boolean">false</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>接下来实例化一个 mpxProxy 实例并挂载至 context 上下文的 $mpxProxy 属性上，并调用 mpxProxy 的 created 方法完成这个代理对象的初始化的工作。在 created 方法内部主要是完成了以下的几个工作：</p> <ol><li>initApi，在组件实例 this 上挂载<code>$watch</code>,<code>$forceUpdate</code>,<code>$updated</code>,<code>$nextTick</code>等方法，这样在你的业务代码当中即可直接访问实例上部署好的这些方法；</li> <li>initData</li> <li>initComputed，将 computed 计算属性字段全部代理至组件实例 this 上；</li> <li>通过 Mobx observable 方法将 data 数据转化为响应式的数据；</li> <li>initWatch，初始化所有的 watcher 实例；</li> <li>initRender，初始化一个 renderWatcher 实例；</li></ol> <p>这里我们具体的来看下 initRender 方法内部是如何进行工作的：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">MPXProxy</span> <span class="token punctuation">{</span>
-  <span class="token operator">...</span>
-  <span class="token function">initRender</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">let</span> renderWatcher
-    <span class="token keyword">let</span> renderExcutedFailed <span class="token operator">=</span> <span class="token boolean">false</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>target<span class="token punctuation">.</span>__injectedRender<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// webpack 注入的有关这个 page/component 的 renderFunction</span>
-      renderWatcher <span class="token operator">=</span> <span class="token function">watch</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>target<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token keyword">if</span> <span class="token punctuation">(</span>renderExcutedFailed<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-          <span class="token keyword">try</span> <span class="token punctuation">{</span>
-            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">__injectedRender</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 执行 renderFunction，获取渲染所需的响应式数据</span>
-          <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            <span class="token operator">...</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-        <span class="token function-variable function">handler</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">ret</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-          <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>renderExcutedFailed<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">renderWithData</span><span class="token punctuation">(</span>ret<span class="token punctuation">)</span> <span class="token comment">// 渲染页面</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">forceCallback</span><span class="token operator">:</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-  <span class="token operator">...</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>在 initRender 方法内部非常清楚的看到，首先判断这个 page/component 是否具有 renderFunction，如果有的话那么就直接实例化一个 renderWatcher：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Watcher</span> <span class="token punctuation">{</span>
-  <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> expr<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>destroyed <span class="token operator">=</span> <span class="token boolean">false</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">get</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token function">type</span><span class="token punctuation">(</span>expr<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'String'</span> <span class="token operator">?</span> <span class="token function">getByPath</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> expr<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">expr</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-    <span class="token keyword">const</span> callbackType <span class="token operator">=</span> <span class="token function">type</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>callbackType <span class="token operator">===</span> <span class="token string">'Object'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      options <span class="token operator">=</span> callback
-      callback <span class="token operator">=</span> <span class="token keyword">null</span>
-    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>callbackType <span class="token operator">===</span> <span class="token string">'String'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      callback <span class="token operator">=</span> context<span class="token punctuation">[</span>callback<span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>callback <span class="token operator">=</span> <span class="token keyword">typeof</span> callback <span class="token operator">===</span> <span class="token string">'function'</span> <span class="token operator">?</span> <span class="token function">action</span><span class="token punctuation">(</span><span class="token function">callback</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">null</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>options <span class="token operator">=</span> options <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token operator">++</span>uid
-    <span class="token comment">// 创建一个新的 reaction</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>reaction <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Reaction</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">mpx-watcher-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token comment">// 在调用 getValue 函数的时候，实际上是调用 reaction.track 方法，这个方法内部会自动执行 effect 函数，即执行 this.update() 方法，这样便会出发一次模板当中的 render 函数来完成依赖的收集</span>
-    <span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>immediateAsync<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 放置到一个队列里面去执行</span>
-      <span class="token function">queueWatcher</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// 立即执行 callback</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token operator">=</span> value
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>immediate<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>callback <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-
-  <span class="token function">getValue</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">let</span> value
-    <span class="token keyword">this</span><span class="token punctuation">.</span>reaction<span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 获取注入的 render 函数执行后返回的 renderData 的值，在执行 render 函数的过程中，就会访问响应式数据的值</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>deep<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">const</span> valueType <span class="token operator">=</span> <span class="token function">type</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
-        <span class="token comment">// 某些情况下，最外层是非isObservable 对象，比如同时观察多个属性时</span>
-        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isObservable</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>valueType <span class="token operator">===</span> <span class="token string">'Array'</span> <span class="token operator">||</span> valueType <span class="token operator">===</span> <span class="token string">'Object'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token keyword">if</span> <span class="token punctuation">(</span>valueType <span class="token operator">===</span> <span class="token string">'Array'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            value <span class="token operator">=</span> value<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token function">toJS</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-          <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-            <span class="token keyword">const</span> newValue <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-            Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-              newValue<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">toJS</span><span class="token punctuation">(</span>value<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
-            <span class="token punctuation">}</span><span class="token punctuation">)</span>
-            value <span class="token operator">=</span> newValue
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-          value <span class="token operator">=</span> <span class="token function">toJS</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isObservableArray</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        value<span class="token punctuation">.</span><span class="token function">peek</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isObservableObject</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token function">keys</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token keyword">return</span> value
-  <span class="token punctuation">}</span>
-
-  <span class="token function">update</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>sync<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-      <span class="token function">queueWatcher</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-
-  <span class="token function">run</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> immediateAsync <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">'value'</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> oldValue <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value
-    <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 重新获取新的 renderData 的值</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>immediateAsync <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token operator">!==</span> oldValue <span class="token operator">||</span> <span class="token function">isObject</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>forceCallback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        immediateAsync <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">,</span> oldValue<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-
-  <span class="token function">destroy</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>destroyed <span class="token operator">=</span> <span class="token boolean">true</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>reaction<span class="token punctuation">.</span><span class="token function">getDisposer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>Watcher 观察者核心实现的工作流程就是：</p> <ol><li>构建一个 Reaction 实例；</li> <li>调用 getValue 方法，即 reaction.track，在这个方法内部执行过程中会调用 renderFunction，这样在 renderFunction 方法的执行过程中便会访问到渲染所需要的响应式的数据并完成依赖收集；</li> <li>根据 immediateAsync 配置来决定回调是放到下一帧还是立即执行；</li> <li>当响应式数据发生变化的时候，执行 reaction 实例当中的回调函数，即<code>this.update()</code>方法来完成页面的重新渲染。</li></ol> <p>mpx 在构建这个响应式的系统当中，主要有2个大的环节，其一为在构建编译的过程中，将 template 模块转化为 renderFunction，提供了渲染模板时所需响应式数据的访问机制，并将 renderFunction 注入到运行时代码当中，其二就是在运行环节，mpx 通过构建一个小程序实例的代理对象，将小程序实例上的数据访问全部代理至 MPXProxy 实例上，而 MPXProxy 实例即 mpx 基于 Mobx 去构建的一套响应式数据对象，首先将 data 数据转化为响应式数据，其次提供了 computed 计算属性，watch 方法等一系列增强的拓展属性/方法，虽然在你的业务代码当中 page/component 实例 this 都是小程序提供的，但是最终经过代理机制，实际上访问的是 MPXProxy 所提供的增强功能，所以 mpx 也是通过这样一个代理对象去接管了小程序的实例。需要特别指出的是，mpx 将小程序官方提供的 setData 方法同样收敛至内部，这也是响应式系统提供的基础能力，即开发者只需要关注业务开发，而有关小程序渲染运行在 mpx 内部去帮你完成。</p> <h2 id="性能优化"><a href="#性能优化" class="header-anchor">#</a> 性能优化</h2> <p>由于小程序的双线程的架构设计，逻辑层和视图层之间需要桥接 native bridge。如果要完成视图层的更新，那么逻辑层需要调用 setData 方法，数据经由 native bridge，再到渲染层，这个工程流程为：</p> <blockquote><p>小程序逻辑层调用宿主环境的 setData 方法；</p></blockquote> <blockquote><p>逻辑层执行 JSON.stringify 将待传输数据转换成字符串并拼接到特定的JS脚本，并通过evaluateJavascript 执行脚本将数据传输到渲染层；</p></blockquote> <blockquote><p>渲染层接收到后， WebView JS 线程会对脚本进行编译，得到待更新数据后进入渲染队列等待 WebView 线程空闲时进行页面渲染；</p></blockquote> <blockquote><p>WebView 线程开始执行渲染时，待更新数据会合并到视图层保留的原始 data 数据，并将新数据套用在WXML片段中得到新的虚拟节点树。经过新虚拟节点树与当前节点树的 diff 对比，将差异部分更新到UI视图。同时，将新的节点树替换旧节点树，用于下一次重渲染。</p></blockquote> <p><a href="https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&amp;mid=2651232791&amp;idx=1&amp;sn=4b83b66d376b1331a992d242cb2a0f17&amp;chksm=bd4943938a3eca853a687765397517cc0ab9cfe4c711705e8fd821bbea8a1ab3c115c8c2fc65&amp;scene=21#wechat_redirect" target="_blank" rel="noopener noreferrer">文章来源<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>而 setData 作为逻辑层和视图层之间通讯的核心接口，那么对于这个接口的使用遵照一些准则将有助于性能方面的提升。</p> <h3 id="尽可能的减少-setdata-传输的数据"><a href="#尽可能的减少-setdata-传输的数据" class="header-anchor">#</a> 尽可能的减少 setData 传输的数据</h3> <p>Mpx 在这个方面所做的工作之一就是基于数据路径的 diff。这也是官方所推荐的 setData 的方式。每次响应式数据发生了变化，调用 setData 方法的时候确保传递的数据都为 diff 过后的最小数据集，这样来减少 setData 传输的数据。</p> <p>接下来我们就来看下这个优化手段的具体实现思路，首先还是从一个简单的 demo 来看：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">obj</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">2</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-  <span class="token function">onShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>obj<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token string">'d'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>在示例 demo 当中，声明了一个 obj 对象(这个对象里面的内容在模块当中被使用到了)。然后经过 200ms 后，手动修改 obj.a 的值，因为对于 c 字段来说它的值没有发生改变，而 d 字段发生了改变。因此在 setData 方法当中也应该只更新 obj.a.d 的值，即：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token string">'obj.a.d'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">)</span>
-</code></pre></div><p>因为 mpx 是整体接管了小程序当中有关调用 setData 方法并驱动视图更新的机制。所以当你在改变某些数据的时候，mpx 会帮你完成数据的 diff 工作，以保证每次调用 setData 方法时，传入的是最小的更新数据集。</p> <p>这里也简单的分析下 mpx 是如何去实现这样的功能的。在上文的编译构建阶段有分析到 mpx 生成的 Render Function，这个 Render Function 每次执行的时候会返回一个 renderData，而这个 renderData 即用以接下来进行 setData 驱动视图渲染的原始数据。renderData 的数据组织形式是模板当中使用到的数据路径作为 key 键值，对应的值使用一个数组组织，数组第一项为数据的访问路径(可获取到对应渲染数据)，第二项为数据路径的第一个键值，例如在 demo 示例当中的 renderData 数据如下：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>renderData<span class="token punctuation">[</span><span class="token string">'obj.a.c'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">.</span>c<span class="token punctuation">,</span> <span class="token string">'obj'</span><span class="token punctuation">]</span>
-renderData<span class="token punctuation">[</span><span class="token string">'obj.a.d'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>obj<span class="token punctuation">.</span>a<span class="token punctuation">.</span>d<span class="token punctuation">,</span> <span class="token string">'obj'</span><span class="token punctuation">]</span>
-</code></pre></div><p>当页面第一次渲染，或者是响应式输出发生变化的时候，Render Function 都会被执行一次用以获取最新的 renderData 来进行接下来的页面渲染过程。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// src/core/proxy.js</span>
-
-<span class="token keyword">class</span> <span class="token class-name">MPXProxy</span> <span class="token punctuation">{</span>
-  <span class="token operator">...</span>
-  <span class="token function">renderWithData</span><span class="token punctuation">(</span><span class="token parameter">rawRenderData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// rawRenderData 即为 Render Function 执行后获取的初始化 renderData</span>
-    <span class="token keyword">const</span> renderData <span class="token operator">=</span> <span class="token function">preprocessRenderData</span><span class="token punctuation">(</span>rawRenderData<span class="token punctuation">)</span> <span class="token comment">// renderData 数据的预处理</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>miniRenderData<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 最小数据渲染集，页面/组件初次渲染的时候使用 miniRenderData 进行渲染，初次渲染的时候是没有数据需要进行 diff 的</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>miniRenderData <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> renderData<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 遍历数据访问路径</span>
-        <span class="token keyword">if</span> <span class="token punctuation">(</span>renderData<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token keyword">let</span> item <span class="token operator">=</span> renderData<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
-          <span class="token keyword">let</span> data <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
-          <span class="token keyword">let</span> firstKey <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token comment">// 某个字段 path 的第一个 key 值</span>
-          <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>localKeys<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>firstKey<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            <span class="token keyword">this</span><span class="token punctuation">.</span>miniRenderData<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">diffAndCloneA</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">.</span>clone
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doRender</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>miniRenderData<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// 非初次渲染使用 processRenderData 进行数据的处理，主要是需要进行数据的 diff 取值工作，并更新 miniRenderData 的值</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doRender</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">processRenderData</span><span class="token punctuation">(</span>renderData<span class="token punctuation">)</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-
-  <span class="token function">processRenderData</span><span class="token punctuation">(</span><span class="token parameter">renderData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> renderData<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span>renderData<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">let</span> item <span class="token operator">=</span> renderData<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
-        <span class="token keyword">let</span> data <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
-        <span class="token keyword">let</span> firstKey <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
-        <span class="token keyword">let</span> <span class="token punctuation">{</span> clone<span class="token punctuation">,</span> diff <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">diffAndCloneA</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>miniRenderData<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 开始数据 diff</span>
-        <span class="token comment">// firstKey 必须是为响应式数据的 key，且这个发生变化的 key 为 forceUpdateKey 或者是在 diff 阶段发现确实出现了 diff 的情况</span>
-        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>localKeys<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>firstKey<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">checkInForceUpdateKeys</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token operator">||</span> diff<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token keyword">this</span><span class="token punctuation">.</span>miniRenderData<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> result<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> clone
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-    <span class="token keyword">return</span> result
-  <span class="token punctuation">}</span>
-  <span class="token operator">...</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">// src/helper/utils.js</span>
-
-<span class="token comment">// 如果 renderData 里面即包含对某个 key 的访问，同时还有对这个 key 的子节点访问的话，那么需要剔除这个子节点</span>
-<span class="token comment">/**
- * process renderData, remove sub node if visit parent node already
- * @param {Object} renderData
- * @return {Object} processedRenderData
- */</span>
-<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">preprocessRenderData</span> <span class="token punctuation">(</span><span class="token parameter">renderData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token comment">// method for get key path array</span>
-  <span class="token keyword">const</span> <span class="token function-variable function">processKeyPathMap</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">keyPathMap</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">let</span> keyPath <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>keyPathMap<span class="token punctuation">)</span>
-    <span class="token keyword">return</span> keyPath<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">keyA</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> keyPath<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">keyB</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token keyword">if</span> <span class="token punctuation">(</span>keyA<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span>keyB<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> keyA <span class="token operator">!==</span> keyB<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token keyword">let</span> nextChar <span class="token operator">=</span> keyA<span class="token punctuation">[</span>keyB<span class="token punctuation">.</span>length<span class="token punctuation">]</span>
-          <span class="token keyword">if</span> <span class="token punctuation">(</span>nextChar <span class="token operator">===</span> <span class="token string">'.'</span> <span class="token operator">||</span> nextChar <span class="token operator">===</span> <span class="token string">'['</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            <span class="token keyword">return</span> <span class="token boolean">false</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-        <span class="token keyword">return</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-
-  <span class="token keyword">const</span> processedRenderData <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-  <span class="token keyword">const</span> renderDataFinalKey <span class="token operator">=</span> <span class="token function">processKeyPathMap</span><span class="token punctuation">(</span>renderData<span class="token punctuation">)</span> <span class="token comment">// 获取最终需要被渲染的数据的 key</span>
-  Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>renderData<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>renderDataFinalKey<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      processedRenderData<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> renderData<span class="token punctuation">[</span>item<span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token keyword">return</span> processedRenderData
-<span class="token punctuation">}</span>
-</code></pre></div><p>其中在 processRenderData 方法内部调用了 diffAndCloneA 方法去完成数据的 diff 工作。在这个方法内部判断新、旧值是否发生变化，返回的 diff 字段即表示是否发生了变化，clone 为 diffAndCloneA 接受到的第一个数据的深拷贝值。</p> <p>这里大致的描述下相关流程：</p> <ol><li>响应式的数据发生了变化，触发 Render Function 重新执行，获取最新的 renderData；</li> <li>renderData 的预处理，主要是用以剔除通过路径访问时同时有父、子路径情况下的子路径的 key；</li> <li>判断是否存在 miniRenderData 最小数据渲染集，如果没有那么 Mpx 完成 miniRenderData 最小渲染数据集的收集，如果有那么使用处理后的 renderData 和 miniRenderData 进行数据的 diff 工作(diffAndCloneA)，并更新最新的 miniRenderData 的值；</li> <li>调用 doRender 方法，进入到 setData 阶段</li></ol> <p>相关参阅文档：</p> <ul><li><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#Page.prototype.setData(Object%20data,%20Function%20callback)" target="_blank" rel="noopener noreferrer">Page<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="尽可能的减少-setdata-的调用频次"><a href="#尽可能的减少-setdata-的调用频次" class="header-anchor">#</a> 尽可能的减少 setData 的调用频次</h3> <p>每次调用 setData 方法都会完成一次从逻辑层 -&gt; native bridge -&gt; 视图层的通讯，并完成页面的更新。因此频繁的调用 setData 方法势必也会造成视图的多次渲染，用户的交互受阻。所以对于 setData 方法另外一个优化角度就是尽可能的减少 setData 的调用频次，将多个同步的 setData 操作合并到一次调用当中。接下来就来看下 mpx 在这方面是如何做优化的。</p> <p>还是先来看一个简单的 demo:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'hello'</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">obj</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">2</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">obj</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">handler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>msg <span class="token operator">=</span> <span class="token string">'world'</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">onShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>obj<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token string">'d'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>在示例 demo 当中，msg 和 obj 都作为模板依赖的数据，这个组件开始展示后的 200ms，更新 obj.a 的值，同时 obj 被 watch，当 obj 发生改变后，更新 msg 的值。这里的逻辑处理顺序是：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>obj<span class="token punctuation">.</span>a 变化 <span class="token operator">-</span><span class="token operator">&gt;</span> 将 renderWatch 加入到执行队列 <span class="token operator">-</span><span class="token operator">&gt;</span> 触发 obj watch <span class="token operator">-</span><span class="token operator">&gt;</span> 将 obj watch 加入到执行队列 <span class="token operator">-</span><span class="token operator">&gt;</span> 将执行队列放到下一帧执行 <span class="token operator">-</span><span class="token operator">&gt;</span> 按照 watch id 从小到大依次执行 watch<span class="token punctuation">.</span>run <span class="token operator">-</span><span class="token operator">&gt;</span> setData <span class="token function">方法调用一次</span><span class="token punctuation">(</span>即 renderWatch 回调<span class="token punctuation">)</span>，统一更新 obj<span class="token punctuation">.</span>a 及 msg <span class="token operator">-</span><span class="token operator">&gt;</span> 视图重新渲染
-</code></pre></div><p>接下来就来具体看下这个流程：由于 obj 作为模板渲染的依赖数据，自然会被这个组件的 renderWatch 作为依赖而被收集。当 obj 的值发生变化后，首先触发 reaction 的回调，即 <code>this.update()</code> 方法，如果是个同步的 watch，那么立即调用 <code>this.run()</code> 方法，即 watcher 监听的回调方法，否则就通过 <code>queueWatcher(this)</code> 方法将这个 watcher 加入到执行队列：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// src/core/watcher.js</span>
-<span class="token keyword">export</span> <span class="token keyword">default</span> Watcher <span class="token punctuation">{</span>
-  <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> expr<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token operator">...</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token operator">++</span>uid
-    <span class="token keyword">this</span><span class="token punctuation">.</span>reaction <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Reaction</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">mpx-watcher-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token operator">...</span>
-  <span class="token punctuation">}</span>
-
-  <span class="token function">update</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>sync<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-      <span class="token function">queueWatcher</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>而在 queueWatcher 方法中，lockTask 维护了一个异步锁，即将 flushQueue 当成微任务统一放到下一帧去执行。所以在 flushQueue 开始执行之前，还会有同步的代码将 watcher 加入到执行队列当中，当 flushQueue 开始执行的时候，依照 watcher.id 升序依次执行，这样去确保 renderWatcher 在执行前，其他所有的 watcher 回调都执行完了，即执行 renderWatcher 的回调的时候获取到的 renderData 都是最新的，然后再去进行 setData 的操作，完成页面的更新。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// src/core/queueWatcher.js</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> asyncLock <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../helper/utils'</span>
-<span class="token keyword">const</span> queue <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
-<span class="token keyword">const</span> idsMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-<span class="token keyword">let</span> flushing <span class="token operator">=</span> <span class="token boolean">false</span>
-<span class="token keyword">let</span> curIndex <span class="token operator">=</span> <span class="token number">0</span>
-<span class="token keyword">const</span> lockTask <span class="token operator">=</span> <span class="token function">asyncLock</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">queueWatcher</span> <span class="token punctuation">(</span><span class="token parameter">watcher</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>watcher<span class="token punctuation">.</span>id <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> watcher <span class="token operator">===</span> <span class="token string">'function'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    watcher <span class="token operator">=</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">Infinity</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">run</span><span class="token operator">:</span> watcher
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>idsMap<span class="token punctuation">[</span>watcher<span class="token punctuation">.</span>id<span class="token punctuation">]</span> <span class="token operator">||</span> watcher<span class="token punctuation">.</span>id <span class="token operator">===</span> <span class="token number">Infinity</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    idsMap<span class="token punctuation">[</span>watcher<span class="token punctuation">.</span>id<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">true</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>flushing<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      queue<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>watcher<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> i <span class="token operator">=</span> queue<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span>
-      <span class="token keyword">while</span> <span class="token punctuation">(</span>i <span class="token operator">&gt;</span> curIndex <span class="token operator">&amp;&amp;</span> watcher<span class="token punctuation">.</span>id <span class="token operator">&lt;</span> queue<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        i<span class="token operator">--</span>
-      <span class="token punctuation">}</span>
-      queue<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> watcher<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-    <span class="token function">lockTask</span><span class="token punctuation">(</span>flushQueue<span class="token punctuation">,</span> resetQueue<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-
-<span class="token keyword">function</span> <span class="token function">flushQueue</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  flushing <span class="token operator">=</span> <span class="token boolean">true</span>
-  queue<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a<span class="token punctuation">.</span>id <span class="token operator">-</span> b<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
-  <span class="token keyword">for</span> <span class="token punctuation">(</span>curIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> curIndex <span class="token operator">&lt;</span> queue<span class="token punctuation">.</span>length<span class="token punctuation">;</span> curIndex<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> watcher <span class="token operator">=</span> queue<span class="token punctuation">[</span>curIndex<span class="token punctuation">]</span>
-    idsMap<span class="token punctuation">[</span>watcher<span class="token punctuation">.</span>id<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">null</span>
-    watcher<span class="token punctuation">.</span>destroyed <span class="token operator">||</span> watcher<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-  <span class="token function">resetQueue</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-
-<span class="token keyword">function</span> <span class="token function">resetQueue</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  flushing <span class="token operator">=</span> <span class="token boolean">false</span>
-  curIndex <span class="token operator">=</span> queue<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">0</span>
-<span class="token punctuation">}</span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/articles/mpx1.html" class="prev">
-        Mpx框架初体验
-      </a></span> <span class="next"><a href="/articles/size-control.html">
-        基于Mpx的小程序体积优化
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/58.50eb3b91.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/performance.html b/docs-vuepress/.vuepress/dist/articles/performance.html
deleted file mode 100644
index 6dc9f5e7a6..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/performance.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>小程序框架运行时性能大测评 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/59.27106fbb.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" aria-current="page" class="active sidebar-link">小程序框架运行时性能大测评</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/performance.html#测试方案" class="sidebar-link">测试方案</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/performance.html#动态测试场景" class="sidebar-link">动态测试场景</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#静态测试场景" class="sidebar-link">静态测试场景</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/performance.html#测试流程及数据" class="sidebar-link">测试流程及数据</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/performance.html#框架运行时体积" class="sidebar-link">框架运行时体积</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#页面渲染耗时-动态测试" class="sidebar-link">页面渲染耗时(动态测试)</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#页面更新耗时-无后台数据" class="sidebar-link">页面更新耗时(无后台数据)</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#页面更新耗时-有后台数据" class="sidebar-link">页面更新耗时(有后台数据)</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#页面更新耗时-大数据量场景" class="sidebar-link">页面更新耗时(大数据量场景)</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#局部更新耗时" class="sidebar-link">局部更新耗时</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#setdata调用" class="sidebar-link">setData调用</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#页面渲染耗时-静态测试" class="sidebar-link">页面渲染耗时(静态测试)</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/performance.html#结论" class="sidebar-link">结论</a></li><li class="sidebar-sub-header"><a href="/articles/performance.html#一点私货" class="sidebar-link">一点私货</a></li></ul></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="小程序框架运行时性能大测评"><a href="#小程序框架运行时性能大测评" class="header-anchor">#</a> 小程序框架运行时性能大测评</h1> <blockquote><p>作者：董宏平(<a href="https://github.com/hiyuki" target="_blank" rel="noopener noreferrer">hiyuki<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)，滴滴出行小程序负责人，mpx框架负责人及核心作者</p></blockquote> <p>随着小程序在商业上的巨大成功，小程序开发在国内前端领域越来越受到重视，为了方便广大开发者更好地进行小程序开发，各类小程序框架也层出不穷，呈现出百花齐放的态势。但是到目前为止，业内一直没有出现一份全面、详细、客观、公正的小程序框架测评报告，为小程序开发者在技术选型时提供参考。于是我便筹划推出一系列文章，对业内流行的小程序框架进行一次全方位的、客观公正的测评，本文是系列文章的第一篇——运行时性能篇。</p> <p>在本文中，我们会对下列框架进行运行时性能测试(排名不分先后):</p> <ul><li>wepy2(https://github.com/Tencent/wepy) @2.0.0-alpha.20</li> <li>uniapp(https://github.com/dcloudio/uni-app) @2.0.0-26120200226001</li> <li>mpx(https://github.com/didi/mpx) @2.5.3</li> <li>chameleon(https://github.com/didi/chameleon) @1.0.5</li> <li>mpvue(https://github.com/Meituan-Dianping/mpvue) @2.0.6</li> <li>kbone(https://github.com/Tencent/kbone) @0.8.3</li> <li>taro next(https://github.com/NervJS/taro) @3.0.0-alpha.5</li></ul> <p>其中对于kbone和taro next均以vue作为业务框架进行测试。</p> <p>运行时性能的测试内容包括以下几个维度：</p> <ul><li>框架运行时体积</li> <li>页面渲染耗时</li> <li>页面更新耗时</li> <li>局部更新耗时</li> <li>setData调用次数</li> <li>setData发送数据大小</li></ul> <p>框架性能测试demo全部存放于https://github.com/hiyuki/mp-framework-benchmark 中，欢迎广大开发者进行验证纠错及补全；</p> <h2 id="测试方案"><a href="#测试方案" class="header-anchor">#</a> 测试方案</h2> <p>为了使测试结果真实有效，我基于常见的业务场景构建了两种测试场景，分别是动态测试场景和静态测试场景。</p> <h3 id="动态测试场景"><a href="#动态测试场景" class="header-anchor">#</a> 动态测试场景</h3> <p>动态测试中，视图基于数据动态渲染，静态节点较少，视图更新耗时和setData调用情况是该测试场景中的主要测试点。</p> <p>动态测试demo模拟了实际业务中常见的长列表+多tab场景，该demo中存在两份优惠券列表数据，一份为可用券数据，另一份为不可用券数据，其中同一时刻视图中只会渲染展示其中一份数据，可以在上方的操作区模拟对列表数据的各种操作及视图展示切换(切tab)。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/PWsGL0GkuQ/dynamic.jpeg" width="300px"></p> <p><em>动态测试demo</em></p> <p>在动态测试中，我在外部通过函数代理的方式在初始化之前将App、Page和Component构造器进行代理，通过mixin的方式在Page的onLoad和Component的created钩子中注入setData拦截逻辑，对所有页面和组件的setData调用进行监听，并统计小程序的视图更新耗时及setData调用情况。该测试方式能够做到对框架代码的零侵入，能够跟踪到小程序全量的setData行为并进行独立的耗时计算，具有很强的普适性，代码具体实现可以查看https://github.com/hiyuki/mp-framework-benchmark/blob/master/utils/proxy.js</p> <h3 id="静态测试场景"><a href="#静态测试场景" class="header-anchor">#</a> 静态测试场景</h3> <p>静态测试模拟业务中静态页面的场景，如运营活动和文章等页面，页面内具备大量的静态节点，而没有数据动态渲染，初始ready耗时是该场景下测试的重心。</p> <p>静态测试demo使用了我去年发表的一篇技术文章的html代码进行小程序适配构建，其中包含大量静态节点及文本内容。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/5TOToHvunN/static.jpeg" width="300px"></p> <p><em>静态测试demo</em></p> <h2 id="测试流程及数据"><a href="#测试流程及数据" class="header-anchor">#</a> 测试流程及数据</h2> <blockquote><p>以下所有耗时类的测试数据均为微信小程序中真机进行5次测试计算平均值得出，单位均为ms。Ios测试环境为手机型号iPhone 11，系统版本13.3.1，微信版本7.0.12，安卓测试环境为手机型号小米9，系统版本Android10，微信版本7.0.12。</p></blockquote> <blockquote><p>为了使数据展示不过于混乱复杂，文章中所列的数据以Ios的测试结果为主，安卓测试结论与Ios相符，整体耗时比Ios高3~4倍左右，所有的原始测试数据存放在https://github.com/hiyuki/mp-framework-benchmark/blob/master/rawData.csv</p></blockquote> <blockquote><p>由于transform-runtime引入的core-js会对框架的运行时体积和运行耗时带来一定影响，且不是所有的框架都会在编译时开启transform-runtime，为了对齐测试环境，下述测试均在transform-runtime关闭时进行。</p></blockquote> <h3 id="框架运行时体积"><a href="#框架运行时体积" class="header-anchor">#</a> 框架运行时体积</h3> <p>由于不是所有框架都能够使用<code>webpack-bundle-analyzer</code>得到精确的包体积占用，这里我通过将各框架生成的demo项目体积减去native编写的demo项目体积作为框架的运行时体积。</p> <table><thead><tr><th></th> <th>demo总体积(KB)</th> <th>框架运行时体积(KB)</th></tr></thead> <tbody><tr><td>native</td> <td>27</td> <td>0</td></tr> <tr><td>wepy2</td> <td>66</td> <td>39</td></tr> <tr><td>uniapp</td> <td>114</td> <td>87</td></tr> <tr><td>mpx</td> <td>78</td> <td>51</td></tr> <tr><td>chameleon</td> <td>136</td> <td>109</td></tr> <tr><td>mpvue</td> <td>103</td> <td>76</td></tr> <tr><td>kbone</td> <td>395</td> <td>368</td></tr> <tr><td>taro next</td> <td>183</td> <td>156</td></tr></tbody></table> <p>该项测试的结论为：<br>
-native &gt; wepy2 &gt; mpx &gt; mpvue &gt; uniapp &gt; chameleon &gt; taro next &gt; kbone</p> <p>结论分析：</p> <ul><li>wepy2和mpx在框架运行时体积上控制得最好；</li> <li>taro next和kbone由于动态渲染的特性，在dist中会生成递归渲染模板/组件，所以占用体积较大。</li></ul> <h3 id="页面渲染耗时-动态测试"><a href="#页面渲染耗时-动态测试" class="header-anchor">#</a> 页面渲染耗时(动态测试)</h3> <p>我们使用<code>刷新页面</code>操作触发页面重新加载，对于大部分框架来说，页面渲染耗时是从触发刷新操作到页面执行onReady的耗时，但是对于像kbone和taro next这样的动态渲染框架，页面执行onReady并不代表视图真正渲染完成，为此，我们设定了一个特殊规则，在页面onReady触发的1000ms内，在没有任何操作的情况下出现setData回调时，以最后触发的setData回调作为页面渲染完成时机来计算真实的页面渲染耗时，测试结果如下：</p> <table><thead><tr><th></th> <th>页面渲染耗时</th></tr></thead> <tbody><tr><td>native</td> <td>60.8</td></tr> <tr><td>wepy2</td> <td>64</td></tr> <tr><td>uniapp</td> <td>56.4</td></tr> <tr><td>mpx</td> <td>52.6</td></tr> <tr><td>chameleon</td> <td>56.4</td></tr> <tr><td>mpvue</td> <td>117.8</td></tr> <tr><td>kbone</td> <td>98.6</td></tr> <tr><td>taro next</td> <td>89.6</td></tr></tbody></table> <blockquote><p>该项测试的耗时并不等同于真实的渲染耗时，由于小程序自身没有提供performance api，真实渲染耗时无法通过js准确测试得出，不过从得出的数据来看该项数据依然具备一定的参考意义。</p></blockquote> <p>该项测试的结论为：<br>
-mpx ≈ chameleon ≈ uniapp ≈ native ≈ wepy2 &gt; taro next ≈ kbone ≈ mpvue</p> <p>结论分析：</p> <ul><li>由于mpvue全量在页面进行渲染，kbone和taro next采用了动态渲染技术，页面渲染耗时较长，其余框架并无太大区别。</li></ul> <h3 id="页面更新耗时-无后台数据"><a href="#页面更新耗时-无后台数据" class="header-anchor">#</a> 页面更新耗时(无后台数据)</h3> <p>这里后台数据的定义为data中存在但当前页面渲染中未使用到的数据，在这个demo场景下即为不可用券的数据，当前会在不可用券为0的情况下，对可用券列表进行各种操作，并统计更新耗时。</p> <p>更新耗时的计算方式是从数据操作事件触发开始到对应的setData回调完成的耗时</p> <blockquote><p>mpvue中使用了当前时间戳(new Date)作为超时依据对setData进行了超时时间为50ms的节流操作，该方式存在严重问题，当vue内单次渲染同步流程执行耗时超过50ms时，后续组件patch触发的setData会突破这个节流限制，以50ms每次的频率对setData进行高频无效调用。在该性能测试demo中，当优惠券数量超过500时，界面就会完全卡死。为了顺利跑完整个测试流程，我对该问题进行了简单修复，使用setTimeout重写了节流部分，确保在vue单次渲染流程同步执行完毕后才会调用setData发送合并数据，之后mpvue的所有性能测试都是基于这个patch版本来进行的，该patch版本存放在https://github.com/hiyuki/mp-framework-benchmark/blob/master/frameworks/mpvue/runtime/patch/index.js</p></blockquote> <blockquote><p>理论上来讲native的性能在进行优化的前提下一定是所有框架的天花板，但是在日常业务开发中我们可能无法对每一次setData都进行优化，以下性能测试中所有的native数据均采用修改数据后全量发送的形式来实现。</p></blockquote> <p>第一项测试我们使用<code>新增可用券(100)</code>操作将可用券数量由0逐级递增到1000：</p> <table><thead><tr><th></th> <th>100</th> <th>200</th> <th>300</th> <th>400</th> <th>500</th> <th>600</th> <th>700</th> <th>800</th> <th>900</th> <th>1000</th></tr></thead> <tbody><tr><td>native</td> <td>84.6</td> <td>69.8</td> <td>71.6</td> <td>75</td> <td>77.2</td> <td>78.8</td> <td>82.8</td> <td>93.2</td> <td>93.4</td> <td>105.4</td></tr> <tr><td>wepy2</td> <td>118.4</td> <td>168.6</td> <td>204.6</td> <td>246.4</td> <td>288.6</td> <td>347.8</td> <td>389.2</td> <td>434.2</td> <td>496</td> <td>539</td></tr> <tr><td>uniapp</td> <td>121.2</td> <td>100</td> <td>96</td> <td>98.2</td> <td>97.8</td> <td>99.6</td> <td>104</td> <td>102.4</td> <td>109.4</td> <td>107.6</td></tr> <tr><td>mpx</td> <td>110.4</td> <td>87.2</td> <td>82.2</td> <td>83</td> <td>80.6</td> <td>79.6</td> <td>86.6</td> <td>90.6</td> <td>89.2</td> <td>96.4</td></tr> <tr><td>chameleon</td> <td>116.8</td> <td>115.4</td> <td>117</td> <td>119.6</td> <td>122</td> <td>125.2</td> <td>133.8</td> <td>133.2</td> <td>144.8</td> <td>145.6</td></tr> <tr><td>mpvue</td> <td>112.8</td> <td>121.2</td> <td>140</td> <td>169</td> <td>198.8</td> <td>234.2</td> <td>278.8</td> <td>318.4</td> <td>361.4</td> <td>408.2</td></tr> <tr><td>kbone</td> <td>556.4</td> <td>762.4</td> <td>991.6</td> <td>1220.6</td> <td>1468.8</td> <td>1689.6</td> <td>1933.2</td> <td>2150.4</td> <td>2389</td> <td>2620.6</td></tr> <tr><td>taro next</td> <td>470</td> <td>604.6</td> <td>759.6</td> <td>902.4</td> <td>1056.2</td> <td>1228</td> <td>1393.4</td> <td>1536.2</td> <td>1707.8</td> <td>1867.2</td></tr></tbody></table> <p>然后我们按顺序逐项点击<code>删除可用券(all)</code> &gt; <code>新增可用券(1000)</code> &gt; <code>更新可用券(1)</code> &gt; <code>更新可用券(all)</code> &gt; <code>删除可用券(1)</code>：</p> <table><thead><tr><th></th> <th>delete(all)</th> <th>add(1000)</th> <th>update(1)</th> <th>update(all)</th> <th>delete(1)</th></tr></thead> <tbody><tr><td>native</td> <td>32.8</td> <td>295.6</td> <td>92.2</td> <td>92.2</td> <td>83</td></tr> <tr><td>wepy2</td> <td>56.8</td> <td>726.4</td> <td>49.2</td> <td>535</td> <td>530.8</td></tr> <tr><td>uniapp</td> <td>43.6</td> <td>584.4</td> <td>54.8</td> <td>144.8</td> <td>131.2</td></tr> <tr><td>mpx</td> <td>41.8</td> <td>489.6</td> <td>52.6</td> <td>169.4</td> <td>165.6</td></tr> <tr><td>chameleon</td> <td>39</td> <td>765.6</td> <td>95.6</td> <td>237.8</td> <td>144.8</td></tr> <tr><td>mpvue</td> <td>103.6</td> <td>669.4</td> <td>404.4</td> <td>414.8</td> <td>433.6</td></tr> <tr><td>kbone</td> <td>120.2</td> <td>4978</td> <td>2356.4</td> <td>2419.4</td> <td>2357</td></tr> <tr><td>taro next</td> <td>126.6</td> <td>3930.6</td> <td>1607.8</td> <td>1788.6</td> <td>2318.2</td></tr></tbody></table> <blockquote><p>该项测试中初期我update(all)的逻辑是循环对每个列表项进行更新，形如<code>listData.forEach((item)=&gt;{item.count++})</code>，发现在chameleon框架中执行界面会完全卡死，追踪发现chameleon框架中没有对setData进行异步合并处理，而是在数据变动时直接同步发送，这样在数据量为1000的场景下用该方式进行更新会高频触发1000次setData，导致界面卡死；对此，我在chameleon框架的测试demo中，将update(all)的逻辑调整为深clone产生一份更新后的listData，再将其整体赋值到this.listData当中，以确保该项测试能够正常进行。</p></blockquote> <p>该项测试的结论为：<br>
-native &gt; mpx ≈ uniapp &gt; chameleon &gt; mpvue &gt; wepy2 &gt; taro next &gt; kbone</p> <p>结论分析：</p> <ul><li>mpx和uniapp在框架内部进行了完善的diff优化，随着数据量的增加，两个框架的新增耗时没有显著上升；</li> <li>wepy2会在数据变更时对props数据也进行setData，在该场景下造成了大量的无效性能损耗，导致性能表现不佳；</li> <li>kbone和taro next采用了动态渲染方案，每次新增更新时会发送大量描述dom结构的数据，与此同时动态递归渲染的耗时也远大于常规的静态模板渲染，使得这两个框架在所有的更新场景下耗时都远大于其他框架。</li></ul> <h3 id="页面更新耗时-有后台数据"><a href="#页面更新耗时-有后台数据" class="header-anchor">#</a> 页面更新耗时(有后台数据)</h3> <p>刷新页面后我们使用<code>新增不可用券(1000)</code>创建后台数据，观察该操作是否会触发setData并统计耗时</p> <table><thead><tr><th></th> <th>back add(1000)</th></tr></thead> <tbody><tr><td>native</td> <td>45.2</td></tr> <tr><td>wepy2</td> <td>174.6</td></tr> <tr><td>uniapp</td> <td>89.4</td></tr> <tr><td>mpx</td> <td>0</td></tr> <tr><td>chameleon</td> <td>142.6</td></tr> <tr><td>mpvue</td> <td>134</td></tr> <tr><td>kbone</td> <td>0</td></tr> <tr><td>taro next</td> <td>0</td></tr></tbody></table> <blockquote><p>mpx进行setData优化时inspired by vue，使用了编译时生成的渲染函数跟踪模板数据依赖，在后台数据变更时不会进行setData调用，而kbone和taro next采用了动态渲染技术模拟了web底层环境，在上层完整地运行了vue框架，也达到了同样的效果。</p></blockquote> <p>然后我们执行和上面无后台数据时相同的操作进行耗时统计，首先是递增100：</p> <table><thead><tr><th></th> <th>100</th> <th>200</th> <th>300</th> <th>400</th> <th>500</th> <th>600</th> <th>700</th> <th>800</th> <th>900</th> <th>1000</th></tr></thead> <tbody><tr><td>native</td> <td>88</td> <td>69.8</td> <td>71.2</td> <td>80.8</td> <td>79.4</td> <td>84.4</td> <td>89.8</td> <td>93.2</td> <td>99.6</td> <td>108</td></tr> <tr><td>wepy2</td> <td>121</td> <td>173.4</td> <td>213.6</td> <td>250</td> <td>298</td> <td>345.6</td> <td>383</td> <td>434.8</td> <td>476.8</td> <td>535.6</td></tr> <tr><td>uniapp</td> <td>135.4</td> <td>112.4</td> <td>110.6</td> <td>106.4</td> <td>109.6</td> <td>107.2</td> <td>114.4</td> <td>116</td> <td>118.8</td> <td>117.4</td></tr> <tr><td>mpx</td> <td>112.6</td> <td>86.2</td> <td>84.6</td> <td>86.8</td> <td>90</td> <td>87.2</td> <td>91.2</td> <td>88.8</td> <td>92.4</td> <td>93.4</td></tr> <tr><td>chameleon</td> <td>178.4</td> <td>178.2</td> <td>186.4</td> <td>184.6</td> <td>192.6</td> <td>203.8</td> <td>210</td> <td>217.6</td> <td>232.6</td> <td>236.8</td></tr> <tr><td>mpvue</td> <td>139</td> <td>151</td> <td>173.4</td> <td>194</td> <td>231.4</td> <td>258.8</td> <td>303.4</td> <td>340.4</td> <td>384.6</td> <td>429.4</td></tr> <tr><td>kbone</td> <td>559.8</td> <td>746.6</td> <td>980.6</td> <td>1226.8</td> <td>1450.6</td> <td>1705.4</td> <td>1927.2</td> <td>2154.8</td> <td>2367.8</td> <td>2617</td></tr> <tr><td>taro next</td> <td>482.6</td> <td>626.2</td> <td>755</td> <td>909.6</td> <td>1085</td> <td>1233.2</td> <td>1384</td> <td>1568.6</td> <td>1740.6</td> <td>1883.8</td></tr></tbody></table> <p>然后按下表操作顺序逐项点击统计</p> <table><thead><tr><th></th> <th>delete(all)</th> <th>add(1000)</th> <th>update(1)</th> <th>update(all)</th> <th>delete(1)</th></tr></thead> <tbody><tr><td>native</td> <td>43.4</td> <td>299.8</td> <td>89.2</td> <td>89</td> <td>87.2</td></tr> <tr><td>wepy2</td> <td>43.2</td> <td>762.4</td> <td>50</td> <td>533</td> <td>522.4</td></tr> <tr><td>uniapp</td> <td>57.8</td> <td>589.8</td> <td>62.6</td> <td>160.6</td> <td>154.4</td></tr> <tr><td>mpx</td> <td>45.8</td> <td>490.8</td> <td>52.8</td> <td>167</td> <td>166</td></tr> <tr><td>chameleon</td> <td>93.8</td> <td>837</td> <td>184.6</td> <td>318</td> <td>220.8</td></tr> <tr><td>mpvue</td> <td>124.8</td> <td>696.2</td> <td>423.4</td> <td>419</td> <td>430.6</td></tr> <tr><td>kbone</td> <td>121.4</td> <td>4978.2</td> <td>2331.2</td> <td>2448.4</td> <td>2348</td></tr> <tr><td>taro next</td> <td>129.8</td> <td>3947.2</td> <td>1610.4</td> <td>1813.8</td> <td>2290.2</td></tr></tbody></table> <p>该项测试的结论为：<br>
-native &gt; mpx &gt; uniapp &gt; chameleon &gt; mpvue &gt; wepy2 &gt; taro next &gt; kbone</p> <p>结论分析：</p> <ul><li>具备模板数据跟踪能力的三个框架mpx，kbone和taro next在有后台数据场景下耗时并没有显著增加；</li> <li>wepy2当中的diff精度不足，耗时也没有产生明显变化；</li> <li>其余框架由于每次更新都会对后台数据进行deep diff，耗时都产生了一定提升。</li></ul> <h3 id="页面更新耗时-大数据量场景"><a href="#页面更新耗时-大数据量场景" class="header-anchor">#</a> 页面更新耗时(大数据量场景)</h3> <blockquote><p>由于mpvue和taro next的渲染全部在页面中进行，而kbone的渲染方案会额外新增大量的自定义组件，这三个框架都会在优惠券数量达到2000时崩溃白屏，我们排除了这三个框架对其余框架进行大数据量场景下的页面更新耗时测试</p></blockquote> <p>首先还是在无后台数据场景下使用<code>新增可用券(1000)</code>将可用券数量递增至5000：</p> <table><thead><tr><th></th> <th>1000</th> <th>2000</th> <th>3000</th> <th>4000</th> <th>5000</th></tr></thead> <tbody><tr><td>native</td> <td>332.6</td> <td>350</td> <td>412.6</td> <td>498.2</td> <td>569.4</td></tr> <tr><td>wepy2</td> <td>970.2</td> <td>1531.4</td> <td>2015.2</td> <td>2890.6</td> <td>3364.2</td></tr> <tr><td>uniapp</td> <td>655.2</td> <td>593.4</td> <td>655</td> <td>675.6</td> <td>718.8</td></tr> <tr><td>mpx</td> <td>532.2</td> <td>496</td> <td>548.6</td> <td>564</td> <td>601.8</td></tr> <tr><td>chameleon</td> <td>805.4</td> <td>839.6</td> <td>952.8</td> <td>1086.6</td> <td>1291.8</td></tr></tbody></table> <p>然后点击<code>新增不可用券(5000)</code>将后台数据量增加至5000，再测试可用券数量递增至5000的耗时：</p> <table><thead><tr><th></th> <th>back add(5000)</th></tr></thead> <tbody><tr><td>native</td> <td>117.4</td></tr> <tr><td>wepy2</td> <td>511.6</td></tr> <tr><td>uniapp</td> <td>285</td></tr> <tr><td>mpx</td> <td>0</td></tr> <tr><td>chameleon</td> <td>824</td></tr></tbody></table> <table><thead><tr><th></th> <th>1000</th> <th>2000</th> <th>3000</th> <th>4000</th> <th>5000</th></tr></thead> <tbody><tr><td>native</td> <td>349.8</td> <td>348.4</td> <td>430.4</td> <td>497</td> <td>594.8</td></tr> <tr><td>wepy2</td> <td>1128</td> <td>1872</td> <td>2470.4</td> <td>3263.4</td> <td>4075.8</td></tr> <tr><td>uniapp</td> <td>715</td> <td>666.8</td> <td>709.2</td> <td>755.6</td> <td>810.2</td></tr> <tr><td>mpx</td> <td>538.8</td> <td>501.8</td> <td>562.6</td> <td>573.6</td> <td>595.2</td></tr> <tr><td>chameleon</td> <td>1509.2</td> <td>1672.4</td> <td>1951.8</td> <td>2232.4</td> <td>2586.2</td></tr></tbody></table> <p>该项测试的结论为：<br>
-native &gt; mpx &gt; uniapp &gt; chameleon &gt; wepy2</p> <p>结论分析：</p> <ul><li>在大数据量场景下，框架之间基础性能的差异会变得更加明显，mpx和uniapp依然保持了接近原生的良好性能表现，而chameleon和wepy2则产生了比较显著的性能劣化。</li></ul> <h3 id="局部更新耗时"><a href="#局部更新耗时" class="header-anchor">#</a> 局部更新耗时</h3> <p>我们在可用券数量为1000的情况下，点击任意一张可用券触发选中状态，以测试局部更新性能</p> <table><thead><tr><th></th> <th>toggleSelect(ms)</th></tr></thead> <tbody><tr><td>native</td> <td>2</td></tr> <tr><td>wepy2</td> <td>2.6</td></tr> <tr><td>uniapp</td> <td>2.8</td></tr> <tr><td>mpx</td> <td>2.2</td></tr> <tr><td>chameleon</td> <td>2</td></tr> <tr><td>mpvue</td> <td>289.6</td></tr> <tr><td>kbone</td> <td>2440.8</td></tr> <tr><td>taro next</td> <td>1975</td></tr></tbody></table> <p>该项测试的结论为：<br>
-native ≈ chameleon ≈ mpx ≈ wepy2 ≈ uniapp &gt; mpvue &gt; taro next &gt; kbone</p> <p>结论分析：</p> <ul><li>可以看出所有使用了原生自定义组件进行组件化实现的框架局部更新耗时都极低，这足以证明小程序原生自定义组件的优秀性和重要性；</li> <li>mpvue由于使用了页面更新，局部更新耗时显著增加；</li> <li>kbone和taro next由于递归动态渲染的性能开销巨大，导致局部更新耗时同样巨大。</li></ul> <h3 id="setdata调用"><a href="#setdata调用" class="header-anchor">#</a> setData调用</h3> <p>我们将<code>proxySetData</code>的count和size选项设置为true，开启setData的次数和体积统计，重新构建后按照以下流程执行系列操作，并统计setData的调用次数和发送数据的体积。</p> <p>操作流程如下：</p> <ol><li>100逐级递增可用券(0-&gt;500)</li> <li>切换至不可用券</li> <li>新增不可用券(1000)</li> <li>100逐级递增可用券(500-&gt;1000)</li> <li>更新可用券(all)</li> <li>切换至可用券</li></ol> <p>操作完成后我们使用<code>getCount</code>和<code>getSize</code>方法获取累积的setData调用次数和数据体积，其中数据体积计算方式为JSON.stringify后按照utf-8编码方式进行体积计算，统计结果为：</p> <table><thead><tr><th></th> <th>count</th> <th>size(KB)</th></tr></thead> <tbody><tr><td>native</td> <td>14</td> <td>803</td></tr> <tr><td>wepy2</td> <td>3514</td> <td>1124</td></tr> <tr><td>mpvue</td> <td>16</td> <td>2127</td></tr> <tr><td>uniapp</td> <td>14</td> <td>274</td></tr> <tr><td>mpx</td> <td>8</td> <td>261</td></tr> <tr><td>chameleon</td> <td>2515</td> <td>319</td></tr> <tr><td>kbone</td> <td>22</td> <td>10572</td></tr> <tr><td>taro next</td> <td>9</td> <td>2321</td></tr></tbody></table> <p>该项测试的结论为：<br>
-mpx &gt; uniapp &gt; native &gt; chameleon &gt; wepy2 &gt; taro next &gt; mpvue &gt; kbone</p> <p>结论分析：</p> <ul><li>mpx框架成功实现了理论上setData的最优；</li> <li>uniapp由于缺失模板追踪能力紧随其后；</li> <li>chameleon由于组件每次创建时都会进行一次不必要的setData，产生了大量无效setData调用，但是数据的发送本身经过diff，在数据发送量上表现不错；</li> <li>wepy2的组件会在数据更新时调用setData发送已经更新过的props数据，因此也产生了大量无效调用，且diff精度不足，发送的数据量也较大；</li> <li>taro next由于上层完全基于vue，在数据发送次数上控制到了9次，但由于需要发送大量的dom描述信息，数据发送量较大；</li> <li>mpvue由于使用较长的数据路径描述数据对应的组件，也产生了较大的数据发送量；</li> <li>kbone对于setData的调用控制得不是很好，在上层运行vue的情况依然进行了22次数据发送，且发送的数据量巨大，在此流程中达到了惊人的10MB。</li></ul> <h3 id="页面渲染耗时-静态测试"><a href="#页面渲染耗时-静态测试" class="header-anchor">#</a> 页面渲染耗时(静态测试)</h3> <p>此处的页面渲染耗时与前面描述的动态测试场景中相同，测试结果如下：</p> <table><thead><tr><th></th> <th>页面渲染耗时</th></tr></thead> <tbody><tr><td>native</td> <td>70.4</td></tr> <tr><td>wepy2</td> <td>86.6</td></tr> <tr><td>mpvue</td> <td>115.2</td></tr> <tr><td>uniapp</td> <td>69.6</td></tr> <tr><td>mpx</td> <td>66.6</td></tr> <tr><td>chameleon</td> <td>65</td></tr> <tr><td>kbone</td> <td>144.2</td></tr> <tr><td>taro next</td> <td>119.8</td></tr></tbody></table> <p>该项测试的结论为：<br>
-chameleon ≈ mpx ≈ uniapp ≈ native &gt; wepy2 &gt; mpvue ≈ taro next &gt; kbone</p> <p>结论分析：</p> <ul><li>除了kbone和taro next采用动态渲染耗时增加，mpvue使用页面模板渲染性能稍差，其余框架的静态页面渲染表现都和原生差不多。</li></ul> <h2 id="结论"><a href="#结论" class="header-anchor">#</a> 结论</h2> <p>综合上述测试数据，我们得到最终的小程序框架运行时性能排名为：<br>
-mpx &gt; uniapp &gt; chameleon &gt; wepy2 &gt; mpvue &gt; taro next &gt; kbone</p> <h2 id="一点私货"><a href="#一点私货" class="header-anchor">#</a> 一点私货</h2> <p>虽然kbone和taro next采用了动态渲染技术在性能表现上并不尽如人意，但是我依然认为这是很棒的技术方案。虽然本文从头到位都在进行性能测试和对比，但性能并不是框架的全部，开发效率和高可用性仍然是框架的重心，开发效率相信是所有框架设计的初衷，但是高可用性却在很大程度被忽视。从这个角度来说，kbone和taro next是非常成功的，不同于过去的转译思路，这种从抹平底层渲染环境的做法能够使上层web框架完整运行，在框架可用性上带来非常大的提升，非常适合于运营类简单小程序的迁移和开发。</p> <p>我主导开发的mpx框架(https://github.com/didi/mpx) 选择了另一条道路解决可用性问题，那就是基于小程序原生语法能力进行增强，这样既能避免转译web框架时带来的不确定性和不稳定性，同时也能带来非常接近于原生的性能表现，对于复杂业务小程序的开发者来说，非常推荐使用。在跨端输出方面，mpx目前能够完善支持业内全部小程序平台和web平台的同构输出，滴滴内部最重要最复杂的小程序——滴滴出行小程序完全基于mpx进行开发，并利用框架提供的跨端能力对微信和支付宝入口进行同步业务迭代，大大提升了业务开发效率。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/articles/2.0.html" class="prev">
-        Mpx发布2.0，完美支持跨平台开发
-      </a></span> <span class="next"><a href="/articles/mpx1.html">
-        Mpx框架初体验
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/59.27106fbb.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/size-control.html b/docs-vuepress/.vuepress/dist/articles/size-control.html
deleted file mode 100644
index f1c5d9cae9..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/size-control.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>滴滴出行小程序体积优化实践 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/60.a47e5279.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" aria-current="page" class="active sidebar-link">基于Mpx的小程序体积优化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/size-control.html#概述" class="sidebar-link">概述</a></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#背景" class="sidebar-link">背景</a></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#体积控制" class="sidebar-link">体积控制</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/size-control.html#基础优化手段" class="sidebar-link">基础优化手段</a></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#分析体积" class="sidebar-link">分析体积</a></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#配置分包" class="sidebar-link">配置分包</a></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#分包资源精细化管理" class="sidebar-link">分包资源精细化管理</a></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#封面方案" class="sidebar-link">封面方案</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/size-control.html#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="滴滴出行小程序体积优化实践"><a href="#滴滴出行小程序体积优化实践" class="header-anchor">#</a> 滴滴出行小程序体积优化实践</h1> <blockquote><p>作者：<a href="http://github.com/sky-admin" target="_blank" rel="noopener noreferrer">sky-admin<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <h2 id="概述"><a href="#概述" class="header-anchor">#</a> 概述</h2> <p>2019年下半年，为了将微信钱包/支付宝九宫格入口的滴滴出行迁移为小程序，团队对小程序进行了大量的功能升级与补全。在整个过程中也遇到并克服了一系列问题和挑战，其中包体积问题尤为突出。接下来全面介绍一下滴滴出行小程序在体积控制方面做的努力与沉淀。</p> <h2 id="背景"><a href="#背景" class="header-anchor">#</a> 背景</h2> <p>微信对小程序包体积的要求是总体积不得超过12M，主包及单个分包体积不得超过2M。支付宝对于小程序包体积的计算方式虽和微信略有区别，不过整体也大同小异。</p> <p>18年至19年初时，滴滴出行小程序里承载的业务只有网约车，且业务需求较少，在主包内都能够搞定。而在下半年时，为了将微信钱包/支付宝九宫格入口迁移至小程序，小程序开始新增诸如公交/代驾/车服/单车/顺风车等众多业务线，同时网约车的业务需求也要做全面的补齐，业务量和代码量一起爆炸式增长。</p> <p>滴滴出行包含了丰富多样的出行业务，包含了快车/专车/出租车/豪华车/拼车/单车/代驾/顺风车/公交/车生活等众多业务线。整个滴滴出行小程序的最重要，使用最高频的页面是首页与订单详情页，首页中承载了各个业务线的需求表达，各个业务线的订单详情页则承载了具体的出行订单展示逻辑。此外还有各种功能页面比如个人中心，营销页面，设置，历史行程。</p> <p>按照滴滴出行的产品逻辑，所有业务线的需求表达逻辑都在首页承载，为了良好的切换体验，在首页采用了单页顶导的方案进行业务线展示。即每个业务线在首页中提供一个需求表达组件，当用户切换顶导业务线后，切换出对应的业务线组件。</p> <p>在这种设计下，所有的业务线的需求表达逻辑都集中在首页这个单一页面中，导致在业务迭代过程中，承载首页的主包体积迅速增长，很快触碰了小程序平台的单包2M上限，对后续的业务迭代与发展带来巨大阻碍。因此，对于包体积的控制是我们在小程序开发过程中面临的一大难题。</p> <h2 id="体积控制"><a href="#体积控制" class="header-anchor">#</a> 体积控制</h2> <p>下面我们将介绍滴滴出行小程序开发迭代过程中，我们对于小程序包体积进行的一系列优化控制实践。</p> <h3 id="基础优化手段"><a href="#基础优化手段" class="header-anchor">#</a> 基础优化手段</h3> <p>对于小程序来说，基础的包体积优化手段包括：资源压缩/去除代码冗余/资源CDN化/异步加载</p> <p>在web开发中，webpack提供了大量的代码优化能力，包括依赖分析、模块去重、代码压缩、tree shaking、side effects等，这些能力可以方便地完成资源压缩和去除代码冗余的工作。滴滴出行小程序基于滴滴开源的小程序框架Mpx( https://github.com/didi/mpx )进行开发，Mpx框架的编译构建完全基于webpack，兼容webpack内部生态，天然可以使用上述能力对包体积进行优化。</p> <p>小程序中支持部分静态资源（如图像视频等）使用CDN地址加载，我们会尽可能将相关的资源压缩后放到CDN上，避免这部分资源对包体积的占用。</p> <p>小程序场景下无法像web当中通过script标签便捷地进行异步加载，但是小程序平台后期纷纷支持了分包加载的方案来实现该能力，由于分包加载是小程序特有的技术规范，webpack无法直接支持，因此Mpx框架专门针对该技术规范进行了良好的适配支持，关于该能力的应用我们会在后文详细阐述。</p> <p>除此之外，Mpx框架还针对小程序场景进行了许多包体积优化的适配工作，如尽可能减少框架运行时包体积占用（压缩后占用56Kb），对引用到的页面/组件按需进行打包构建，声明公共样式进行样式复用，分包内公共模块抽取等。</p> <p>在Mpx框架的这些能力的支持下，基本不需要额外配置就能构建出一个经过初步优化的小程序包。</p> <blockquote><p>微信开发者工具选项里也有类似的&quot;上传代码时自动压缩混淆&quot;可勾选，但在开发者工具中上传代码时计算体积是直接计算的当前项目代码的体积，并不会依据压缩后的体积。因此，如果你使用原生小程序进行开发，你的source代码极有可能进行进一步的压缩以节省空间。</p></blockquote> <h3 id="分析体积"><a href="#分析体积" class="header-anchor">#</a> 分析体积</h3> <p>虽然框架已经提供了很多在体积控制方面的优化，但是随着业务迭代我们发现主包体积依然偏大。</p> <p>在遇到主包体积偏大后，我们需要弄明白，主包里有哪些东西？它们为什么这么大？</p> <p>使用原生小程序或者其他非基于webpack的框架进行开发的同学遇到这个问题后，可能只能去看硬盘上的文件大小。这样一来，各个模块的大小占比可能并不直观。而我们则可以借助 webpack-bundle-analyzer 这样一个webpack插件去做辅助分析。</p> <p>比如这是一个使用Mpx框架编写的demo，通过 <code>npm run build --report</code> 就可以看到这样一个界面：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/3e488293-959e-4617-8187-69fdb532e9ab.jpg" alt="体积分析图"></p> <p>可以看到这个demo工程由 moment / lodash / socket-weapp / core-js 等第三方库组成。各个库的大小，相互依赖关系也能清晰地看出。</p> <p>对于滴滴出行小程序也是能看到类似的图，能看到整个项目到底是由哪些代码组成。</p> <p>另外，滴滴出行前端开发一直是采用“源码编译”的，可以让整个项目里公共的依赖可以实现仅有一份，一起共用。简而言之，也有助于减少项目代码体积。<a href="https://github.com/DDFE/DDFE-blog/issues/23" target="_blank" rel="noopener noreferrer">相关资料：https://github.com/DDFE/DDFE-blog/issues/23 <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>要完美发挥源码编译的效果，需要上下游一起建立整套源码编译生态，比如主项目的依赖方在声明公用依赖时，就应该用peerDep或者devDep来声明一些公有依赖，这些共有依赖应该在主项目中统一声明，避免因版本不同装出两份公共依赖，那样反而会增大体积。由于滴滴出行小程序涉及业务线及团队众多，部分团队可能并不知道这个事情，因此代码里实际是可能出现上述劣化场景。而依照分析图，可以容易地发现这种问题，并推动相关团队清除这些重复依赖。</p> <p>同时，我们依照体积分析图，对其中体积较大的文件重点分析，进行了一轮业务代码梳理和精简，删除了一些无用代码，精简了websocket的消息体描述文件等。</p> <h3 id="配置分包"><a href="#配置分包" class="header-anchor">#</a> 配置分包</h3> <p>分包是小程序给出的类似web异步引入的一个方案，把一些初始进入时不需要的页面可以放进分包里，跳转到对应页面时才去下载分包，将这些页面及其附属资源放到分包里可以有效减少主包体积。</p> <p>Mpx框架早期对分包规范进行了初步支持，资源访问规则保持和微信一致，主要根据资源存放的目录判断应该输出到主包还是分包。有这个能力后，我们把行程页抽到了分包，大概抽出了200多K左右的空间。</p> <p>有了行程页的成功拆分后，我们开始对所有的非首页代码进行分包操作，比如起终点选择和个人中心。以及部分业务线的接入是通过npm的方式接入，我们也尽可能将这些业务线的所有非首页的代码放到了分包。</p> <p>这里还有个题外话，得益于mpx早期设计了packages形式的业务组合方案，可以很方便地让业务独立开发，又能及其方便地整合。而后发现微信的分包的json配置设计和packages很像，就在这个基础上支持了微信的分包，用户侧仅需在原来的packages基础上加一个query标记这个分包的名字即可。</p> <p>拆除各个分包后，整个项目结构大概如图：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/0562f94d-3929-42b8-a389-854e14983373.png" alt="分包一期结构图"></p> <p>初阶的分包工作进行完毕后，总计从主包里拆了差不多400K的空间到分包里。</p> <h3 id="分包资源精细化管理"><a href="#分包资源精细化管理" class="header-anchor">#</a> 分包资源精细化管理</h3> <p>上面提到，Mpx框架初期的分包处理规则是完全按照微信的方式，把在分包路径下的资源收集到分包里。而npm管理的资源因为都在node_modules目录下，不属于任何分包路径，则会被全部收集进主包。</p> <p>比如之前我们有行程页分包，行程页自有的状态管理store整个都在行程页分包的路径下，就会被收集到行程页分包中。而行程页还用到了封装好的didi-socket库，这个库是公共的npm包，即使它只在行程页分包里被使用，但由于它本身路径是在node_modules下的，那么就会将其收集进主包里。</p> <p>因为早期的一些设计，行程页的资源和首页是分割开的，都比较独立地存在于各自的路径下，一期的分包处理的大头也主要是行程页，它刚好契合了Mpx初期对分包处理上的特点，因此能较好地收集进行程页分包里。</p> <p>随着业务迭代，后续大量业务线的接入都是通过npm进行的，就会有大量npm包资源，他们都在node_modules目录下，因此全部会被收集进主包。</p> <p>所以Mpx框架进行了一系列改造：</p> <ol><li>在构建的依赖收集过程中，我们会对收集到的依赖打上标记，记录它是被哪些分包引入的。一旦它只有一个分包引入，它就会被输出到这个分包中。</li> <li>我们会根据用户定义的分包配置，自动在 SplitChunksPlugin 中生成各个分包的 cacheGroups ，把分包中的复用模块抽取到分包下的bundle中。</li> <li>对于组件和静态资源，如果他们被多个分包所引用且未在主包中引用，为了确保主包体积最优，这些资源将产生多份副本分别输出到对应分包中，而不会占用主包体积。</li></ol> <p>这样一来，<em><strong>不管分包中引用的资源原本在什么位置，最终输出时都会尽可能将其输出到dist的分包目录下，避免占用主包空间</strong></em>。</p> <p>这个改动完成后项目结构看似和之前一样，但得益于Mpx处理分包资源能力的升级，我们得以将业务线分包中引用的npm资源成功输出到其所在的分包目录下。</p> <h3 id="封面方案"><a href="#封面方案" class="header-anchor">#</a> 封面方案</h3> <p>再后来滴滴出行小程序需要替换微信/支付宝里原有的WebApp入口，小程序接入的业务线迅速增加，包体积迅速增长。</p> <p>这个部分体积增长的主要原因前面提到过，所有的业务线都要接入到主页来展示。这也是由于业务特点决定的，滴滴出行提供了丰富的出行产品线，包括快车/专车/出租车/豪华车/拼车/单车/代驾/顺风行车等产品，用户是可能需要反复切换挑选的。这个过程还要保留起终点车型之类的信息，必须是一个页面内切换组件加一整套非常复杂的大型状态管理才能比较流畅顺滑地实现。而不能像一些电商/信息平台，将不同的功能拆分到不同页面，让用户通过首页的菜单进入子页面再进行操作，首页只承载入口，只有较少的业务逻辑，分包处理起来就会容易很多。</p> <p>因此各个业务线都要提供首页组件进行接入。这个组件会在首页被用到，所以无论如何也拆不到分包里。最终，整个首页主包部分的体积可以分成两个部分：基础库和业务代码。两者的体积占比大概是公共依赖基础库占1M左右，业务代码占1M左右。</p> <p>这么庞大的基础库体积主要是由于滴滴出行的业务线及业务团队众多，各方均有一些自己的基础依赖。比如网约车依赖的长链接通信pb数据描述文件，地图会依的大数计算库，顺风车依赖的CML框架运行时、代驾依赖的通信网关库，以及公用的组件库和polyfill等。</p> <p>所以滴滴出行小程序面对的问题在当时已经无法用纯技术方案在短期内快速解决问题了，于是我们做了一个工程架构调整，可以叫封面页方案，解决了主包问题。</p> <p>封面方案简单讲，就是做一个带滴滴出行Logo的封面作为启动页面，而页面一旦加载，立刻跳转另一个页面，这个页面真正承载业务，且它被放在分包里。</p> <p>这个操作的意义在于，主包里就只剩下了所有方都要依赖的基础框架/库等，而业务全被抽离到了分包里。</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/0f0ed782-8f67-4601-bc83-a8a343e1050b.png" alt="封面方案结构图"></p> <p>这是封面方案完成后项目的结构图，之前很大块的首页业务逻辑被抽出到首页分包中了。</p> <p>这样一个挪移的操作的结果是我们可以有2M的主包空间来乘放基础的公共的库，有一个2M左右的分包来乘放前面提到的滴滴出行的集成了各种业务的“大主页”。而当时拆下来差不多有1.2M的主包，800K+的业务主分包。</p> <p>这个改造最优秀的一点在于，后续的业务迭代产生的体积增长几乎全是在业务主分包里，剩下的1.1M+空间留给业务迭代还是比较充裕的。而主包的体积在理想条件下是可以长久保持不变的，就不会因为业务需求的不断开发反复导致主包体积临近超标，不再需要为主包体积感到焦虑。</p> <p>当然，可以看到，这个方案本身是没有消减任何体积的，只是把位置变换了一下。除此之外，这个封面页方案其实也存在一些缺陷，比如首屏业务的展示会变慢，因为要加载的内容会变多，不过小程序本身有较好的缓存资源的能力，因此还算可以接受。</p> <p>相比于因体积问题卡住需求迭代以及产品线的接入，目前这个方案至少能解决有无问题。我们开发团队后续也会持续跟进关注体积问题，看是否会有产品方案变更或者小程序本身给出一些解决方案来进一步优化这个部分。</p> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>Mpx框架在包体积控制上做了大量工作，对于npm场景下的小程序分包进行了非常完善的支持。</p> <p>滴滴出行小程序团队在框架支持的基础上，通过梳理业务依赖，充分利用分包，调整交互方案等一系列手段，在不阻碍业务发展的前提下，将庞大复杂的滴滴出行小程序包体积控制在平台限制范围内。</p> <p>希望本文能给在包体积上遇到问题的小程序开发者们带来一些启发，欢迎留言交流。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/articles/mpx2.html" class="prev">
-        Mpx框架技术揭秘
-      </a></span> <span class="next"><a href="/articles/ts-derivation.html">
-        Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/60.a47e5279.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/ts-derivation.html b/docs-vuepress/.vuepress/dist/articles/ts-derivation.html
deleted file mode 100644
index 37ba492785..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/ts-derivation.html
+++ /dev/null
@@ -1,273 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>使用Typescript新特性Template Literal Types完善链式key的类型推导 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/61.74ebd7d9.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" aria-current="page" class="active sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#前言" class="sidebar-link">前言</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#特性" class="sidebar-link">特性</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#可以用来做什么" class="sidebar-link">可以用来做什么</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#getvaluebypath使用ts实现" class="sidebar-link">getValueByPath使用TS实现</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#单层推导" class="sidebar-link">单层推导</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#多层推导" class="sidebar-link">多层推导</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#深层次actions的dispatch函数ts实现" class="sidebar-link">深层次Actions的dispatch函数TS实现</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#结尾" class="sidebar-link">结尾</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#题外话：uniontointersection" class="sidebar-link">题外话：UnionToIntersection</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#distributive-conditional-types" class="sidebar-link">Distributive conditional types</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#type-inference-in-conditional-types" class="sidebar-link">Type inference in conditional types</a></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#uniontointersection-原理探究" class="sidebar-link">UnionToIntersection 原理探究</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/ts-derivation.html#参考资料汇总" class="sidebar-link">参考资料汇总</a></li></ul></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" class="sidebar-link">Mpx 小程序单元测试能力建设与实践</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用typescript新特性template-literal-types完善链式key的类型推导"><a href="#使用typescript新特性template-literal-types完善链式key的类型推导" class="header-anchor">#</a> 使用Typescript新特性Template Literal Types完善链式key的类型推导</h1> <blockquote><p>作者：<a href="https://github.com/anotherso1a" target="_blank" rel="noopener noreferrer">anotherso1a<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <h2 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h2> <p>在<strong>Mpx框架</strong>中我们采用了类似 <code>Vuex</code> 的数据仓库设计，这使得小程序的数据也可以在框架中得到<strong>统一的管理</strong>。但由于设计上的原因，这一部分在TS推导的实现上变得异常艰难，其中有一个明显的问题就是<strong>链式key</strong>的推导：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 一段 mpx-store 代码实例</span>
-
-<span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// other options ...</span>
-  actions<span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">someAction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 下面这一个dispatch语句如何得到正确的推导？result的类型如何获取？</span>
-      <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'deeperActions.anotherAction'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
-      <span class="token keyword">return</span> result
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  deps<span class="token operator">:</span> <span class="token punctuation">{</span>
-    deeperActions<span class="token operator">:</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      actions<span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token function">anotherAction</span><span class="token punctuation">(</span>payload<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token comment">// do something</span>
-          <span class="token keyword">return</span> <span class="token string">'result'</span> <span class="token operator">+</span> payload
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// other deps ...</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>我们该如何获取 <code>this.dispatch('deeperActions.anotherAction', 1)</code> 的返回值？如何针对dispatch后续的参数类型做限制？这几乎是不可能解决的问题。</p> <p>好消息是，在 2020.09.19，typescript团队release了一个<a href="https://github.com/microsoft/TypeScript/releases/tag/v4.1-beta" target="_blank" rel="noopener noreferrer">beta版本<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。这个版本新推出了一个特性：<strong>模板字符串类型（Template Literal Types）</strong>。</p> <p>这让<strong>链式key</strong>的推导出现了曙光，不久后，我们开始尝试完善 <code>mpx-store</code> 的推导，此篇文章也是基于我们实践中所做的一些工作总结而来。</p> <h2 id="特性"><a href="#特性" class="header-anchor">#</a> 特性</h2> <p>这里可以直接看<a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html" target="_blank" rel="noopener noreferrer">官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>例子，可以十分直观的感受到其特性：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">Color</span> <span class="token operator">=</span> <span class="token string">&quot;red&quot;</span> <span class="token operator">|</span> <span class="token string">&quot;blue&quot;</span><span class="token punctuation">;</span>
-<span class="token keyword">type</span> <span class="token class-name">Quantity</span> <span class="token operator">=</span> <span class="token string">&quot;one&quot;</span> <span class="token operator">|</span> <span class="token string">&quot;two&quot;</span><span class="token punctuation">;</span>
-
-<span class="token keyword">type</span> <span class="token class-name">SeussFish</span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>Quantity <span class="token operator">|</span> Color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> fish</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
-<span class="token comment">//   ^ = type SeussFish = &quot;one fish&quot; | &quot;two fish&quot; | &quot;red fish&quot; | &quot;blue fish&quot;</span>
-</code></pre></div><p>根据例子得知：模板字符串的使用方式几乎和ES6的字符串模板一致，可以做字符串的拼接，当接收字面量联合类型时，会做matrix操作，返回所有可能的拼接后的字面量联合类型。</p> <p>另一个例子：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token operator">=</span> <span class="token string">'1'</span> <span class="token operator">|</span> <span class="token string">'2'</span>
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">B</span></span> <span class="token operator">=</span> <span class="token string">'a'</span> <span class="token operator">|</span> <span class="token string">'b'</span>
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token operator">=</span> <span class="token string">'C'</span> <span class="token operator">|</span> <span class="token string">'D'</span>
-
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">D</span></span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">A</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">B</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">C</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
-<span class="token comment">// type D = &quot;1aC&quot; | &quot;1aD&quot; | &quot;1bC&quot; | &quot;1bD&quot; | &quot;2aC&quot; | &quot;2aD&quot; | &quot;2bC&quot; | &quot;2bD&quot;</span>
-</code></pre></div><h2 id="可以用来做什么"><a href="#可以用来做什么" class="header-anchor">#</a> 可以用来做什么</h2> <p>这个新特性的出现使得在js中常用的链式key取值，调用等，都能够使用ts进行完整的推导。</p> <p><strong>第一个问题：</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token parameter">object<span class="token punctuation">,</span> prop</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  prop <span class="token operator">=</span> prop <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">;</span>
-  <span class="token keyword">const</span> paths <span class="token operator">=</span> prop<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token keyword">let</span> current <span class="token operator">=</span> object<span class="token punctuation">;</span>
-  <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
-  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> j <span class="token operator">=</span> paths<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> j<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> path <span class="token operator">=</span> paths<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>current<span class="token punctuation">)</span> <span class="token keyword">break</span><span class="token punctuation">;</span>
-
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> j <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      result <span class="token operator">=</span> current<span class="token punctuation">[</span>path<span class="token punctuation">]</span><span class="token punctuation">;</span>
-      <span class="token keyword">break</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    current <span class="token operator">=</span> current<span class="token punctuation">[</span>path<span class="token punctuation">]</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-  <span class="token keyword">return</span> result<span class="token punctuation">;</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">// 调用例子</span>
-<span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
-<span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a.b'</span><span class="token punctuation">)</span> <span class="token comment">// { c: 1 }</span>
-</code></pre></div><p><strong>如何将以上 getValueByPath 函数使用ts改写，使该函数的调用具有完备的类型推断？</strong></p> <p><strong>第二个问题：</strong></p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">simpleActions</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token function">actionOne</span><span class="token punctuation">(</span>payload<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token builtin">number</span><span class="token operator">&gt;</span>
-  <span class="token function">actionTwo</span><span class="token punctuation">(</span>payload<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token builtin">boolean</span><span class="token operator">&gt;</span>
-<span class="token punctuation">}</span>
-
-<span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">dispatch</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token keyword">keyof</span> simpleActions<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>type<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">)</span><span class="token operator">:</span> ReturnType<span class="token operator">&lt;</span>simpleActions<span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
-
-<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'actionOne'</span><span class="token punctuation">)</span>
-<span class="token comment">// function dispatch&lt;&quot;actionOne&quot;&gt;(type: &quot;actionOne&quot;): Promise&lt;number&gt;</span>
-</code></pre></div><p><strong>我们很容易为上面的 <code>simpleActions</code> 编写出其对应的 <code>dispatch</code> 函数，并具备完整推导，但针对下面这种深层次的actions，如何为其编写dispatch函数？</strong></p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token function">someAction</span><span class="token punctuation">(</span>payload<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> payload
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  deeperActions<span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">anotherAction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// do something</span>
-      <span class="token keyword">return</span> <span class="token string">'result'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    otherActions<span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">finalAction</span><span class="token punctuation">(</span>payload<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> <span class="token operator">!</span>payload
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-
-<span class="token keyword">type</span> <span class="token class-name">Actions</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> actions
-
-<span class="token comment">// 编写一个 dispatch 方法，使得：</span>
-<span class="token comment">// let result = dispatch('deeperActions.anotherAction') // 返回类型为： Promise&lt;string&gt;</span>
-<span class="token comment">// let final = dispatch('deeperActions.otherActions.finalAction', 'hello world') // 返回类型为：Promise&lt;boolean&gt;</span>
-</code></pre></div><p>在typescript发布4.1之前，这几乎是不可能完成的任务，但是4.1的发布使我们能够对这一部分的缺失做一些类型补全。</p> <p>接下来我们围绕上面两个问题分别进行实现。</p> <h2 id="getvaluebypath使用ts实现"><a href="#getvaluebypath使用ts实现" class="header-anchor">#</a> getValueByPath使用TS实现</h2> <p>需要使 <code>getValueByPath({ a: { b: { c: 1 } } }, 'a.b')</code> 获得完整的推导，我们首先需要能拿到两个参数的完整类型，这在ts中是十分容易的。第二步则是对两个参数的类型做映射处理，最好使得第一个参数输入完成之后，第二个参数直接能具备完整推导。</p> <h3 id="单层推导"><a href="#单层推导" class="header-anchor">#</a> 单层推导</h3> <p>我们可以先尝试着实现对单层对象取值的类型推导：</p> <p>首先能得到一个大致的函数结构，接受两个参数，返回一个值</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span>object<span class="token operator">:</span> Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span>
-</code></pre></div><p>上面这种写法是拿不到参数类型的，为了能正确拿到参数的类型，我们使用范型来填充参数 <code>object</code>：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">getValueByPath</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;&gt;</span></span></span><span class="token punctuation">(</span>object<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span>
-</code></pre></div><p>可以直接在编辑器上面尝试一下(我使用的是vscode)，很明显可以看到，我们正确的拿到了第一个参数的类型：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/5a1f9aef-c5ff-4109-980a-85216b62e291.png" alt="xx"></p> <p>能取到参数的类型对象，就能使用关键字 <code>keyof</code> 获取对象的每一个key，接下来我们把候选key值限定给参数prop，然后把对应的返回值结果填充到函数的结果当中，这里我们引入第二个范型 <code>K</code>。尝试调用之后，我们发现结果都符合预期。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">getValueByPath</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token keyword">keyof</span> <span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>object<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span>
-
-<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">)</span> <span class="token comment">// number</span>
-<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">)</span> <span class="token comment">// string</span>
-<span class="token keyword">let</span> c <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">)</span> <span class="token comment">// Argument of type '&quot;c&quot;' is not assignable to parameter of type '&quot;a&quot; | &quot;b&quot;'.ts(2345)</span>
-</code></pre></div><h3 id="多层推导"><a href="#多层推导" class="header-anchor">#</a> 多层推导</h3> <p>仅仅是单层推导的结构依然是无法满足我们对于 <code>getValueByPath({ a: { b: { c: 1 } } }, 'a.b')</code> 推导的需求：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a.b'</span><span class="token punctuation">)</span> 
-<span class="token comment">// Argument of type '&quot;a.b&quot;' is not assignable to parameter of type '&quot;a&quot;'.ts(2345)</span>
-</code></pre></div><p>可以看到，第二个候选参数的类型仅有 <code>&quot;a&quot;</code>，而我们按正常期望来讲，<code>getValueByPath</code>的第一个参数传入 <code>{ a: { b: { c: 1 } } }</code> 之后，第二个候选参数类型应该为： <code>&quot;a&quot; | &quot;a.b&quot; | &quot;a.b.c&quot;</code> 。</p> <p>接下来我们使用4.1的新特性，将对象： <code>{ a: { b: { c: 1 } } }</code> 与其链式key： <code>&quot;a&quot; | &quot;a.b&quot; | &quot;a.b.c&quot;</code> 一一对应起来。</p> <p>工欲善其事，必先利其器。我们先封装好两个工具函数：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 取出对象的所有除了 symbol 以外的key</span>
-<span class="token keyword">type</span> <span class="token class-name">StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> Exclude<span class="token operator">&lt;</span><span class="token keyword">keyof</span> <span class="token constant">T</span><span class="token punctuation">,</span> <span class="token builtin">symbol</span><span class="token operator">&gt;</span>
-
-<span class="token comment">// 将字符串用 . 进行拼接</span>
-<span class="token keyword">type</span> <span class="token class-name">CombineStringKey<span class="token operator">&lt;</span><span class="token constant">H</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">,</span> <span class="token constant">L</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">H</span> <span class="token keyword">extends</span> <span class="token string">''</span> <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">L</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">H</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">L</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
-</code></pre></div><p>我们知道，<code>symbol</code> 类型是没办法放在<strong>模板字符串</strong>中的，所以对key进行拼接之前，需要过滤掉所有 <code>symbol</code> 类型的key。而 <code>StringKeyof</code> 函数，就是用来过滤对象中所有不符合<strong>模板字符串</strong>类型的key的方法。其实际用法与 <code>keyof</code> 相同，只是返回值能用于<strong>模板字符串</strong>。</p> <p><code>CombineStringKey</code> 则是对两个key进行拼接，拼接的结果自然就是我们需要的链式key格式。</p> <p>调用例子：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">const</span> symbol1 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token number">1</span><span class="token operator">:</span> <span class="token builtin">string</span>
-  a<span class="token operator">:</span> <span class="token builtin">string</span>
-  <span class="token punctuation">[</span>symbol1<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">string</span>
-<span class="token punctuation">}</span>
-
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">K</span></span> <span class="token operator">=</span> StringKeyof<span class="token operator">&lt;</span><span class="token constant">A</span><span class="token operator">&gt;</span> <span class="token comment">// 1 | 'a'</span>
-
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">B</span></span> <span class="token operator">=</span> CombineStringKey<span class="token operator">&lt;</span><span class="token string">''</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token operator">&gt;</span>         <span class="token comment">// &quot;a&quot;</span>
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token operator">=</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">B</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token operator">&gt;</span>          <span class="token comment">// &quot;a.b&quot;</span>
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">D</span></span> <span class="token operator">=</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">C</span><span class="token punctuation">,</span> <span class="token string">'c1'</span> <span class="token operator">|</span> <span class="token string">'c2'</span><span class="token operator">&gt;</span>  <span class="token comment">// &quot;a.b.c1&quot; | &quot;a.b.c2&quot;</span>
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">E</span></span> <span class="token operator">=</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">D</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token operator">&gt;</span>          <span class="token comment">// &quot;a.b.c1.d&quot; | &quot;a.b.c2.d&quot;</span>
-</code></pre></div><p>我们现在以下面这个对象类型为例，取出该对象所有符合要求的链式key：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">deepObj</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
-  a<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
-  b<span class="token operator">:</span> <span class="token punctuation">{</span>
-    c<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
-    d<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
-    e<span class="token operator">:</span> <span class="token punctuation">{</span>
-      f<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
-      g<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>思路：遍历对象的所有key，同时对key对应的值进行判断，如果是一个更深层次的对象，则保留外层的key，对更深层对象递归处理，把后续递归出的key都和上一层中保留的key进行拼接。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">P</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token string">''</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token punctuation">[</span><span class="token constant">K</span> <span class="token keyword">in</span> StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span> <span class="token operator">?</span> ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token punctuation">,</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;&gt;</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token punctuation">[</span>_ <span class="token keyword">in</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">[</span>StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span>
-</code></pre></div><p>我们将 <code>ChainKeys</code> 函数拆开来看，首先是它的参数，接受两个类型参数，第一个是类型T，第二个则是用于拼接的<strong>前缀字符串</strong>，其值可选。我们使用 <code>in</code> 语法遍历 <code>T</code> 的所有 key 值，也就是 <code>[K in StringKeyof&lt;T&gt;]</code>，这里我们使用了前面封装好的方法 <code>StringKeyof</code> 来代替 <code>keyof</code> 关键字。对对应的 key 的值，也就是 <code>T[K]</code>，我们使用 <code>extends</code> 进行前置判断，如果 <code>T[K]</code> 是一个<strong>复杂类型</strong>，我们则将当前的字符串前缀 <code>P</code> 和当前的 <code>K</code> 进行拼接，递归调用 <code>ChainKeys</code> 函数进行处理。如果 <code>T[K]</code> 为<strong>基本类型</strong>，我们直接使用 <code>Record</code> 方法组装拼接好的key（<code>CombineStringKey&lt;P, K&gt;</code>）和value（<code>T[K]</code>），为了方便在编辑器里面查看结果，这里将<code>Record&lt;CombineStringKey&lt;P, K&gt;, T[K]&gt;</code> 替换为 <code>{ [_ in CombineStringKey&lt;P, K&gt;]:T[K] }</code>。最后将所有结果打平成联合类型，也就是最后的一个取值操作：<code>{...}[StringKeyof&lt;T&gt;]</code>，这和 <code>[1,2,3][number] // 3 | 1 | 2</code> 的处理方式一致。</p> <p>接下来我们在编辑器中查看一下调用结果：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/36f16bdc-4754-4387-bdac-bf3710a3ea56.png" alt="img"></p> <p>如红框中所示，发现链式key已经和其类型一一对应起来了。</p> <p>但是这还有一些问题：</p> <p>一、<code>&quot;b&quot;</code> 以及 <code>&quot;b.e&quot;</code> 没有出现在枚举当中。</p> <p>二、返回结果是一个<strong>联合类型</strong>，如何把这个结果运用到函数当中呢？</p> <p>第一个问题其实很好解决，当我们在递归处理的同时，将当前的链式key与对应值也进行处理就可以，即：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">P</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token string">''</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token punctuation">[</span><span class="token constant">K</span> <span class="token keyword">in</span> StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span>
-    <span class="token operator">?</span> Record<span class="token operator">&lt;</span>CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span> <span class="token operator">&amp;</span> ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token punctuation">,</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;&gt;</span> 
-    <span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token punctuation">[</span>_ <span class="token keyword">in</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">[</span>StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span>
-</code></pre></div><p>同样为了方便编辑器中查看结果我们把 <code>Record&lt;CombineStringKey&lt;P, K&gt;, T[K]&gt;</code> 替换成 <code>{ [_ in CombineStringKey&lt;P, K&gt;]:T[K] }</code>：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/d0bb4b70-f355-4d41-8430-031ac4a44136.png" alt="img"></p> <p>可以看到 <code>b</code> 以及 <code>&quot;b.e&quot;</code> 这样的key都被取出来并放到了结果当中。其实这里还是有一些问题，如果你实际去代码编辑器里面查看结果的话，会发现有很多重复的 <code>b</code> ，这是因为后续使用交叉类型进行拼接的 <code>ChainKeys</code> 的返回值是一个联合类型，如此一来，<code>b</code> 会被分配到联合类型的<strong>每一项</strong>上，在后面我们会解决这个问题。</p> <p>第二个问题是结果为联合类型，我们如何才能将其运用至函数当中呢？</p> <p>大家都知道，对联合类型使用 <code>keyof</code> 操作，返回的类型为 <code>never</code>，即无法取出联合类型的所有key值：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span> <span class="token operator">|</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">K</span></span> <span class="token operator">=</span> <span class="token keyword">keyof</span> <span class="token constant">T</span> <span class="token comment">// never</span>
-<span class="token comment">// 如何使K的类型为 a ｜ b 呢？</span>
-</code></pre></div><p>这里我们引入另一个工具函数：<code>UnionToIntersection</code>，顾名思义，该函数的作用就是将联合类型转换为交叉类型，至于<strong>为什么</strong>它能将联合类型转换为交叉类型，我们后面会讲：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">UnionToIntersection<span class="token operator">&lt;</span><span class="token constant">U</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token constant">U</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">any</span></span> <span class="token operator">?</span> <span class="token punctuation">(</span>k<span class="token operator">:</span> <span class="token constant">U</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span> <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">)</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>k<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">I</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token constant">I</span> <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">;</span>
-</code></pre></div><p>我们将其运用到ChainKeys的推导当中去：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">P</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token string">''</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> UnionToIntersection<span class="token operator">&lt;</span><span class="token punctuation">{</span>
-  <span class="token punctuation">[</span><span class="token constant">K</span> <span class="token keyword">in</span> StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span>
-    <span class="token operator">?</span> Record<span class="token operator">&lt;</span>CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span> <span class="token operator">&amp;</span> ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token punctuation">,</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;&gt;</span> 
-    <span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token punctuation">[</span>_ <span class="token keyword">in</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">[</span>StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
-</code></pre></div><p>再经过一些润色得到一个比较精简的函数：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">P</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token string">''</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> UnionToIntersection<span class="token operator">&lt;</span><span class="token punctuation">{</span>
-  <span class="token punctuation">[</span><span class="token constant">K</span> <span class="token keyword">in</span> StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span> Record<span class="token operator">&lt;</span>CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span> <span class="token operator">&amp;</span> <span class="token punctuation">(</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span> <span class="token operator">?</span> ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token punctuation">,</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;&gt;</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">[</span>StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
-</code></pre></div><p>尝试调用该方法最终得到的结果为：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/f7b952df-6668-434e-b26c-e43345a0f4b4.png" alt="img"></p> <p>最终，我们以此为基础，编写 <code>getValueByPath</code> 函数的定义：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">getValueByPath</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token keyword">keyof</span> ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;&gt;</span></span></span><span class="token punctuation">(</span>object<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">)</span><span class="token operator">:</span> ChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span>
-
-<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">)</span>     <span class="token comment">// { b: { c: number } }</span>
-<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a.b'</span><span class="token punctuation">)</span>   <span class="token comment">// { c: number }</span>
-<span class="token keyword">let</span> c <span class="token operator">=</span> <span class="token function">getValueByPath</span><span class="token punctuation">(</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a.b.c'</span><span class="token punctuation">)</span> <span class="token comment">// number</span>
-</code></pre></div><p>到此，我们算是完成了 <code>getValueByPath</code> 函数的类型定义以及推导。</p> <h2 id="深层次actions的dispatch函数ts实现"><a href="#深层次actions的dispatch函数ts实现" class="header-anchor">#</a> 深层次Actions的dispatch函数TS实现</h2> <p>其实在推导 <code>getValueByPath</code> 的过程中，我们已经基本上完成了所有实现该 <code>dispatch</code> 所需要的条件，与 <code>getValueByPath</code> 不同的是，我们只需要遍历出函数所对应的链式key即可，改写一下 <code>ChainKeys</code> 方法：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">interface</span> <span class="token class-name">DeeperActions</span> <span class="token punctuation">{</span>
-  <span class="token punctuation">[</span>k<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">|</span> DeeperActions
-<span class="token punctuation">}</span>
-<span class="token keyword">type</span> <span class="token class-name">ActionChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">P</span> <span class="token keyword">extends</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">=</span> <span class="token string">''</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> UnionToIntersection<span class="token operator">&lt;</span><span class="token punctuation">{</span>
-  <span class="token punctuation">[</span><span class="token constant">K</span> <span class="token keyword">in</span> StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token class-name">DeeperActions</span>
-    <span class="token operator">?</span> ActionChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token punctuation">,</span> CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;&gt;</span>
-    <span class="token operator">:</span> Record<span class="token operator">&lt;</span>CombineStringKey<span class="token operator">&lt;</span><span class="token constant">P</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
-<span class="token punctuation">}</span><span class="token punctuation">[</span>StringKeyof<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
-</code></pre></div><p>我们除去了对对象的混入，同时将判断类型改为了 <code>DeeperActions</code> ，以此来判断该 <code>action</code> 对象是否有更深层次的actions。</p> <p>调用结果：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/812f50b2-a148-4065-9f87-a9b010502c6d.png" alt="img"></p> <p>再看我们最开始提出的问题：</p> <blockquote><p>编写一个 dispatch 方法，使得：</p> <p><code>let result = dispatch('deeperActions.anotherAction') // 返回类型为： Promise&lt;string&gt;</code></p> <p><code>let final = dispatch('deeperActions.otherActions.finalAction', 'hello world') // 返回类型为：Promise&lt;boolean&gt;</code></p></blockquote> <p>我们开始定义 <code>dispatch</code> 方法：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">dispatch</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token keyword">keyof</span> ChainingActions<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token operator">:</span> Parameters<span class="token operator">&lt;</span>ChainingActions<span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token operator">:</span> ReturnType<span class="token operator">&lt;</span>ChainingActions<span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
-</code></pre></div><p>这里我们分别使用了 <code>Parameters</code> 和 <code>ReturnType</code> 函数来获取对应 <code>action</code> 的参数以及返回值，用来填充至 <code>dispatch</code> 方法中，实际编写调用代码：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/c6165376-d374-4ede-9bd2-0c99ca336337.png" alt=""></p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/9447cd1a-04b6-4972-80a1-13f28de2b0cc.png" alt=""></p> <p>考虑到我们的 <code>actions</code> 无论如何都会返回一个 <code>Promise</code>，上述定义其实还是稍微有一些问题，但是改动起来也很方便，只需要在 <code>ReturnType</code> 外层使用 <code>Promise</code> 包装一下就可以了：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">Promisify<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span></span> <span class="token operator">?</span> <span class="token constant">T</span> <span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
-
-<span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">dispatch</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token keyword">keyof</span> ChainingActions<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token operator">:</span> Parameters<span class="token operator">&lt;</span>ChainingActions<span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token operator">:</span> Promisify<span class="token operator">&lt;</span>ReturnType<span class="token operator">&lt;</span>ChainingActions<span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">]</span><span class="token operator">&gt;&gt;</span>
-
-<span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'deeperActions.anotherAction'</span><span class="token punctuation">)</span> <span class="token comment">// Promise&lt;string&gt;</span>
-<span class="token keyword">let</span> final <span class="token operator">=</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'deeperActions.otherActions.finalAction'</span><span class="token punctuation">,</span> <span class="token string">'hello world'</span><span class="token punctuation">)</span> <span class="token comment">// Promise&lt;boolean&gt;</span>
-</code></pre></div><p>至此，我们 <code>dispatch</code> 的TS实现也已经完成。</p> <p>最终结果：</p> <p><img src="http://cdn.qiniu.archerk.com.cn/QQ20210128-162139-HD.gif" alt=""></p> <ul><li>若图片加载失败请访问： http://cdn.qiniu.archerk.com.cn/QQ20210128-162139-HD.gif</li></ul> <h2 id="结尾"><a href="#结尾" class="header-anchor">#</a> 结尾</h2> <p>其实 <code>getValueByPath</code> 这一部分的内容是有一些缺陷的，因为TS本身<strong>限制了递归的次数</strong>，当数据层级达到一定程度时，上文的推导会失效。在Mpx的建设中我们还对此做了一些优化，尽可能的<strong>减少</strong>了递归次数。</p> <p>这里也给出<strong>另一个方案</strong>做链式key推导，这种方式<strong>性能</strong>上会好很多，因为不用解析出所有的链式key，而是根据链式key<strong>反向解析</strong>前面的对象，因此该方案可以解析出正确的类型，但是会丧失一部分代码提示：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">CutChainKeys<span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token builtin">string</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">infer</span> <span class="token constant">A</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">infer</span> <span class="token constant">B</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token constant">A</span><span class="token punctuation">,</span> <span class="token constant">B</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token builtin">never</span><span class="token punctuation">]</span>
-
-<span class="token keyword">type</span> <span class="token class-name">GetValueByPath<span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token builtin">string</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> CutChainKeys<span class="token operator">&lt;</span><span class="token constant">K</span><span class="token operator">&gt;</span> <span class="token keyword">extends</span> <span class="token punctuation">[</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">never</span><span class="token punctuation">]</span>
-  <span class="token operator">?</span> <span class="token constant">T</span><span class="token punctuation">[</span>CutChainKeys<span class="token operator">&lt;</span><span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
-  <span class="token operator">:</span> GetValueByPath<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">[</span>CutChainKeys<span class="token operator">&lt;</span><span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> CutChainKeys<span class="token operator">&lt;</span><span class="token constant">K</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">&gt;</span>
-
-<span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">test</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> Record<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token builtin">string</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>o<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> k<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">)</span><span class="token operator">:</span> GetValueByPath<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> <span class="token constant">K</span><span class="token operator">&gt;</span>
-
-<span class="token keyword">let</span> s <span class="token operator">=</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  a<span class="token operator">:</span> <span class="token punctuation">{</span>
-    b<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-    c<span class="token operator">:</span> <span class="token punctuation">{</span>
-      d<span class="token operator">:</span> <span class="token punctuation">{</span>
-        e<span class="token operator">:</span> <span class="token punctuation">{</span>
-          f<span class="token operator">:</span> <span class="token string">'f'</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'a.c.d.e.f'</span><span class="token punctuation">)</span> <span class="token comment">// string</span>
-</code></pre></div><p>通过这一系列的处理，我们基本完成了 <code>mpx-store</code> 的类型推导，包括对应的<strong>辅助函数</strong>等。这也使得我们能够在项目中更好的使用TS进行开发。在最新的滴滴出行小程序更新中，我们已经开始使用TS全量进行开发，目前看来开发体验还不错，后期也会逐步将旧的代码重构为TS。我们后续也会持续维护和迭代框架，也欢迎有兴趣的朋友来一起<a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer">共建<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>有写的不好的地方请多包含，也欢迎大家批评指正。</p> <h2 id="题外话：uniontointersection"><a href="#题外话：uniontointersection" class="header-anchor">#</a> 题外话：UnionToIntersection</h2> <p>上面提到的，我们使用工具函数 <code>UnionToIntersection</code> 将联合类型转换为交叉类型。而 <code>UnionToIntersection</code> 又是如何将<strong>联合类型转换为交叉类型</strong>的呢？</p> <p>在 <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html" target="_blank" rel="noopener noreferrer">Conditional Types<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 中有提到一些点：</p> <h3 id="distributive-conditional-types"><a href="#distributive-conditional-types" class="header-anchor">#</a> Distributive conditional types</h3> <blockquote><p>Conditional types in which the checked type is a naked type parameter are called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation. For example, an instantiation of <code>T extends U ? X : Y</code> with the type argument <code>A | B | C</code> for <code>T</code> is resolved as <code>(A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)</code>.</p></blockquote> <p>即在<strong>执行</strong> <code>extends</code> <strong>语句时</strong>，如果 <code>extends</code> 左侧为<strong>联合类型</strong>，则会被分配成<strong>对应数量个</strong>子条件判断语句，最终<strong>联合</strong>每个子语句的结果。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">|</span> <span class="token string">'2'</span> <span class="token operator">|</span> <span class="token number">3</span>
-
-<span class="token keyword">type</span> <span class="token class-name">IsNumber<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">number</span></span> <span class="token operator">?</span> <span class="token constant">T</span> <span class="token operator">:</span> <span class="token builtin">never</span>
-
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">B</span></span> <span class="token operator">=</span> IsNumber<span class="token operator">&lt;</span><span class="token constant">A</span><span class="token operator">&gt;</span> <span class="token comment">// 1 | 3</span>
-</code></pre></div><h3 id="type-inference-in-conditional-types"><a href="#type-inference-in-conditional-types" class="header-anchor">#</a> Type inference in conditional types</h3> <blockquote><p>Within the <code>extends</code> clause of a conditional type, it is now possible to have <code>infer</code> declarations that introduce a type variable to be inferred. Such inferred type variables may be referenced in the true branch of the conditional type. It is possible to have multiple <code>infer</code> locations for the same type variable.</p></blockquote> <p>在条件判断语句中，可以使用 <code>infer</code> 关键字做类型推断，同一个候选值能有<strong>多个</strong>推断位置。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">ReturnType<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">infer</span> <span class="token constant">R</span> <span class="token operator">?</span> <span class="token constant">R</span> <span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
-</code></pre></div><p><strong>正位推断</strong>的结果会被推导为<strong>联合</strong>类型：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">Foo<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">U</span><span class="token punctuation">;</span> b<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">U</span> <span class="token punctuation">}</span> <span class="token operator">?</span> <span class="token constant">U</span> <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">;</span>
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T10</span></span> <span class="token operator">=</span> Foo<span class="token operator">&lt;</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> b<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token comment">// string</span>
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T11</span></span> <span class="token operator">=</span> Foo<span class="token operator">&lt;</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> b<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token comment">// string | number</span>
-</code></pre></div><p><strong>逆变位置推断</strong>的结果会被处理成<strong>交叉</strong>类型：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">Bar<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">{</span> <span class="token function-variable function">a</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">U</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token function-variable function">b</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">U</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span> <span class="token punctuation">}</span>
-  <span class="token operator">?</span> <span class="token constant">U</span>
-  <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">;</span>
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T20</span></span> <span class="token operator">=</span> Bar<span class="token operator">&lt;</span><span class="token punctuation">{</span> <span class="token function-variable function">a</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token function-variable function">b</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span> <span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token comment">// string</span>
-<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T21</span></span> <span class="token operator">=</span> Bar<span class="token operator">&lt;</span><span class="token punctuation">{</span> <span class="token function-variable function">a</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token function-variable function">b</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span> <span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token comment">// string &amp; number</span>
-</code></pre></div><p><strong>注意</strong>：这里是<code>ts-2.8</code>发布时的文档以及例子，现在来说是不存在 <code>string &amp; number</code> 类型的，如果实际编写这段代码的话会发现 <code>T21</code> 的值为 <code>never</code>，因为不可能存在一个值既为 <code>string</code> 又为 <code>number</code>。逆变与协变的一些概念可以参考一下<a href="https://zh.wikipedia.org/wiki/%E5%8D%8F%E5%8F%98%E4%B8%8E%E9%80%86%E5%8F%98" target="_blank" rel="noopener noreferrer">逆变与协变<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="uniontointersection-原理探究"><a href="#uniontointersection-原理探究" class="header-anchor">#</a> UnionToIntersection 原理探究</h3> <p>有了以上两个信息之后，我们再来看看 <code>UnionToIntersection</code> 的实现，为了方便阅读我们做一些折行：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">UnionToIntersection<span class="token operator">&lt;</span><span class="token constant">U</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span>
-    <span class="token constant">U</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">any</span></span> 
-      <span class="token operator">?</span> <span class="token punctuation">(</span>k<span class="token operator">:</span> <span class="token constant">U</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
-      <span class="token operator">:</span> <span class="token builtin">never</span>
-  <span class="token punctuation">)</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>k<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">I</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">)</span> 
-    <span class="token operator">?</span> <span class="token constant">I</span>
-    <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">;</span>
-</code></pre></div><p>发现实际上 <code>UnionToIntersection</code> 分为两步：</p> <p>1、将联合类型的<strong>每一项</strong>填充至 函数类型 <code>(k: U) =&gt; void</code> 的参数 <code>k</code> 中。</p> <p>2、使用 <code>infer</code> 关键字在<strong>逆变位</strong>对 <code>(k: U) =&gt; void</code> 做推导，将参数的类型推入结果 <code>I</code> 中，组成<strong>交叉</strong>类型。</p> <p>拆分看实现：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 联合类型推入函数参数</span>
-<span class="token keyword">type</span> <span class="token class-name">UnionToFunction<span class="token operator">&lt;</span><span class="token constant">U</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token constant">U</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">any</span></span> <span class="token operator">?</span> <span class="token punctuation">(</span>k<span class="token operator">:</span> <span class="token constant">U</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span> <span class="token operator">:</span> <span class="token builtin">never</span>
-<span class="token comment">// 对函数逆变推导，将参数推导为交叉类型</span>
-<span class="token keyword">type</span> <span class="token class-name">FunctionsToIntersection<span class="token operator">&lt;</span><span class="token constant">F</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token constant">F</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token punctuation">[</span><span class="token punctuation">(</span>k<span class="token operator">:</span> <span class="token keyword">infer</span> <span class="token constant">I</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token constant">I</span> <span class="token operator">:</span> <span class="token builtin">never</span>
-
-<span class="token keyword">type</span> <span class="token class-name">Union</span> <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span> <span class="token operator">|</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
-
-<span class="token keyword">type</span> <span class="token class-name">Fun</span> <span class="token operator">=</span> UnionToFunction<span class="token operator">&lt;</span>Union<span class="token operator">&gt;</span> <span class="token comment">// ((k: { a: number }) =&gt; void) | ((k: { b: string }) =&gt; void)</span>
-
-<span class="token keyword">type</span> <span class="token class-name">Intersection</span> <span class="token operator">=</span> FunctionsToIntersection<span class="token operator">&lt;</span>Fun<span class="token operator">&gt;</span> <span class="token comment">// { a: number } &amp; { b: string }</span>
-</code></pre></div><p>可以注意到我们拆分开来了 <code>UnionToIntersection</code> 后并不是完全按照原有写法去写的，在 <code>FunctionsToIntersection</code> 函数中，我们使用了<code>[]</code>将类型给包裹起来，这是为了<strong>避免</strong>第一个特性（Distributive conditional types）的影响，如果不做包裹，则 <code>extends</code> 左侧为联合类型，被分配成若干个子句后，同一位置的 <code>infer</code> 就会被分别执行，无法合成为交叉类型。而使用<code>[]</code>进行包裹之后则避免了这个影响，<code>extends</code> 左侧不再是一个联合类型，而是一个数组类型。</p> <h2 id="参考资料汇总"><a href="#参考资料汇总" class="header-anchor">#</a> 参考资料汇总</h2> <ul><li><a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html" target="_blank" rel="noopener noreferrer">Template Literal Types<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html" target="_blank" rel="noopener noreferrer">Conditional Types<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://zh.wikipedia.org/wiki/%E5%8D%8F%E5%8F%98%E4%B8%8E%E9%80%86%E5%8F%98" target="_blank" rel="noopener noreferrer">逆变与协变 Covariance and contravariance<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/microsoft/TypeScript/issues/30188" target="_blank" rel="noopener noreferrer">TS递归上限<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/didi/mpx/pull/631" target="_blank" rel="noopener noreferrer">Mpx中的实现（前期）<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/articles/size-control.html" class="prev">
-        基于Mpx的小程序体积优化
-      </a></span> <span class="next"><a href="/articles/2.7-release.html">
-        Mpx2.7 版本正式发布，大幅提升编译构建速度
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/61.74ebd7d9.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/articles/unit-test.html b/docs-vuepress/.vuepress/dist/articles/unit-test.html
deleted file mode 100644
index cc828c450b..0000000000
--- a/docs-vuepress/.vuepress/dist/articles/unit-test.html
+++ /dev/null
@@ -1,461 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx 小程序单元测试能力建设与实践 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/62.4bf212f9.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/articles/1.0.html" class="sidebar-link">滴滴开源小程序框架Mpx</a></li><li><a href="/articles/2.0.html" class="sidebar-link">Mpx发布2.0，完美支持跨平台开发</a></li><li><a href="/articles/performance.html" class="sidebar-link">小程序框架运行时性能大测评</a></li><li><a href="/articles/mpx1.html" class="sidebar-link">Mpx框架初体验</a></li><li><a href="/articles/mpx2.html" class="sidebar-link">Mpx框架技术揭秘</a></li><li><a href="/articles/size-control.html" class="sidebar-link">基于Mpx的小程序体积优化</a></li><li><a href="/articles/ts-derivation.html" class="sidebar-link">Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导</a></li><li><a href="/articles/2.7-release.html" class="sidebar-link">Mpx2.7 版本正式发布，大幅提升编译构建速度</a></li><li><a href="/articles/2.8-release.html" class="sidebar-link">Mpx2.8 版本正式发布，使用组合式 API 开发小程序</a></li><li><a href="/articles/2.9-release.html" class="sidebar-link">Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化</a></li><li><a href="/articles/mpx-cube-ui.html" class="sidebar-link">小程序跨端组件库 Mpx-cube-ui 开源啦</a></li><li><a href="/articles/mpx-cli-next.html" class="sidebar-link">Mpx-cli 插件化改造</a></li><li><a href="/articles/unit-test.html" aria-current="page" class="active sidebar-link">Mpx 小程序单元测试能力建设与实践</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/unit-test.html#什么是单元测试" class="sidebar-link">什么是单元测试</a></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#前端单元测试" class="sidebar-link">前端单元测试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/unit-test.html#前端单元测试工具" class="sidebar-link">前端单元测试工具</a></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#测试断言库" class="sidebar-link">测试断言库</a></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#jest-框架简介" class="sidebar-link">Jest 框架简介</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#小程序单元测试" class="sidebar-link">小程序单元测试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/unit-test.html#与-web-应用的不同" class="sidebar-link">与 web 应用的不同</a></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#小程序单测框架整体流程" class="sidebar-link">小程序单测框架整体流程</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#mpx-框架单元测试" class="sidebar-link">Mpx 框架单元测试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/articles/unit-test.html#初期版本" class="sidebar-link">初期版本</a></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#优化版本" class="sidebar-link">优化版本</a></li></ul></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#mpx组件单元测试实战" class="sidebar-link">Mpx组件单元测试实战</a></li><li class="sidebar-sub-header"><a href="/articles/unit-test.html#结语" class="sidebar-link">结语</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx-小程序单元测试能力建设与实践"><a href="#mpx-小程序单元测试能力建设与实践" class="header-anchor">#</a> Mpx 小程序单元测试能力建设与实践</h1> <blockquote><p>作者：<a href="https://github.com/Blackgan3" target="_blank" rel="noopener noreferrer">Blackgan3<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <h2 id="什么是单元测试"><a href="#什么是单元测试" class="header-anchor">#</a> 什么是单元测试</h2> <p>In computer programming, unit testing is a software testing method by which individual units of source code—sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures—are tested to determine whether they are fit for use wikipedia</p> <p>对一个函数，模块，类进行运行结果正确性检验的工作就是单元测试，此外每个单元测试的对象应该是一个最简单的组件/函数。</p> <p>那写单测又能给我们哪些收益呢？</p> <ul><li>大幅提高项目代码可维护性</li> <li>覆盖率到达一定指标后可大幅提高研发效率</li> <li>让你的代码零线上bug锐减，上线不再提心吊胆</li> <li>改进设计，促进重构</li></ul> <p>此外，单测高覆盖率的项目也会给公司节省大量支出：
-<img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1640872105786-b7b230b4-7f65-4a0f-8dbf-e8ba89f61837.png" alt="unit-test-money.png">
-据微软统计单测效益结果，如上图展示，绝大多数bug都是在coding阶段产生，并且随着需求开发进度的推进，修复bug的成本会随指数级增长，当我们在unit test阶段发现并修复这个bug是能给公司带来巨大收益的。</p> <p>下方介绍两种常见的项目单元测试规范：</p> <ul><li>TDD (Test driven development)</li></ul> <blockquote><p>测试驱动开发，在书写业务代码之前，先根据需求进行单元功能测试用例书写</p></blockquote> <p>这里驱动开发的不是简单的测试用例，是能够持续验证、重构并且对需求功能极致细化的测试用例</p> <ul><li>BDD (Behavior driven development)</li></ul> <blockquote><p>行为驱动开发，通过具有辨识力的测试用例驱动项目开发团队所有人，使用自然语言来描述功能，一般和 TDD 相结合，针对行为进行测试，让开发者在写单测时从专注代码实现转为业务行为，能使单测更加场景化和智能化</p></blockquote> <p>单元测试的书写初期必定伴随着大量精力与时间的消耗，但长期持续维护的业务在搭建并完善好整个单元测试体系后，可大大提高项目稳定性和研发效率</p> <h2 id="前端单元测试"><a href="#前端单元测试" class="header-anchor">#</a> 前端单元测试</h2> <h3 id="前端单元测试工具"><a href="#前端单元测试工具" class="header-anchor">#</a> 前端单元测试工具</h3> <p>前端单元测试目前有很多框架和工具，我们下方列出三个较为流行的框架和工具库进行介绍</p> <ul><li>Mocha: 功能丰富的 javascript 测试框架(不包括断言和仿真环境，快照测试需额外配置)，可以运行在node.js和浏览器中</li> <li>Jasmine：Behavior-Drive development(BDD)风格的测试框架，在业内较为流行,功能很全面，自带asssert、mock功能</li> <li>Jest：一个功能全面的 javascript 测试框架，基于Jasmine 做了大量新特性(例如并行执行、源代码改动感知等)，开箱即用，适用于绝大多数 js 项目</li></ul> <h3 id="测试断言库"><a href="#测试断言库" class="header-anchor">#</a> 测试断言库</h3> <p>在单测运行框架中，我们需要断言库来进行方法返回和实例状态的正确性验证</p> <ul><li>should: BDD风格断言                    (true).should.be.ok</li> <li>expect: expect()样式断言              expect(true).toBe(true)</li> <li>assert: Node.js 内置断言模块       assert(true === true)</li> <li>chai: expect()，assert()和should风格的断言都支持，全能型选手</li></ul> <p>在众多前端单元测试框架中，Jest 目前凭借零配置，高性能，且对于断言，快照，覆盖率等都有很好的集成，是目前较为流行的一个单测框架</p> <h3 id="jest-框架简介"><a href="#jest-框架简介" class="header-anchor">#</a> Jest 框架简介</h3> <p>简单来看下 Jest 框架的特点以及大致的运行原理</p> <p><strong>Jest 的整体框架特点大概归纳总结为以下几点:</strong></p> <ul><li>在操作系统上高效的进行文件搜索以及相互依赖关系匹配</li> <li>单测并行执行，运行效率高</li> <li>内置断言库、覆盖率、快照测试等功能，开箱可用</li> <li>使用 vm 来进行沙盒环境运行，单测之间相互隔离</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1639153318989-0e6ac9ed-75a3-4874-8a48-5370db55891d.png#averageHue=%23464a4d&amp;clientId=uf375a834-bd4b-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=579&amp;id=u7fb4026f&amp;margin=%5Bobject%20Object%5D&amp;name=image.png&amp;originHeight=2014&amp;originWidth=777&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=495531&amp;status=done&amp;style=none&amp;taskId=u6e39efb8-e12a-49b0-b8ce-ade9b63fd2c&amp;title=&amp;width=223.5" alt="image.png">
-打开 Jest pacakges，可以看到大概有50多个包，我们根据这些不同的包来将整个 jest 运行流程整体串起来</p> <p><strong>第一步 jest-cli 读取相关配置</strong>
-当我们执行 jest 命令时，先去执行 jest-cli 中的 run 方法，再调用 jest-core 中的 runCli 方法，其中通过 jest-config 提供的 readConfigs 来读取 Jest 相关配置，返回全局配置(globalConfig)和局部配置(configs)</p> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1640502186276-2a1c2976-58a5-4fd9-91db-c5df8265fc7f.png#clientId=u3d4e127e-cc05-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=161&amp;id=uc6c948fd&amp;margin=%5Bobject%20Object%5D&amp;name=unit-test-jest-step1.png&amp;originHeight=177&amp;originWidth=808&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=23884&amp;status=done&amp;style=none&amp;taskId=ub778d79f-2480-411f-97c3-d13aed04965&amp;title=&amp;width=735" alt="unit-test-jest-step1.png"></p> <p><strong>第二步 文件静态分析</strong>
-使用 jest-haste-map 来进行项目中所有文件的检索以及生成文件之间的相互依赖关系，在 jest-core 中的 _run10000 方法中执行 buildContextsAndHasteMaps，返回 contexts 和 hasteMapInstances，contexts 中的 hasteFs 存储的就是文件及依赖关系。</p> <p>**jest-haste-map **检索的过程中借助 jest-worker 来根据当前cpu核数并行的进行文件检索，借助 fb-watch-man/crawler 对整体文件变动做实时监听，做到只执行有改动的单元测试文件，实现单测缓存效果。</p> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1640524931986-a0ee9e99-151b-464e-96f3-c5d403a258f5.png#clientId=u059512e6-4582-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=555&amp;id=u042b30bc&amp;margin=%5Bobject%20Object%5D&amp;name=unit-test-jest-haste.png&amp;originHeight=1109&amp;originWidth=2131&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=188410&amp;status=done&amp;style=none&amp;taskId=u0c46aead-c2c6-4bd4-a90a-cf1e8cce042&amp;title=&amp;width=1065.5" alt="unit-test-jest-haste.png">
-下方看一个简单的jest-haste-map使用示例</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> JestHasteMap <span class="token keyword">from</span> <span class="token string">'jest-haste-map'</span><span class="token punctuation">;</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span>cpus<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'os'</span><span class="token punctuation">;</span>
-
-<span class="token keyword">const</span> hasteMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">JestHasteMap<span class="token punctuation">.</span>default</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">extensions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'js'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">maxWorkers</span><span class="token operator">:</span> <span class="token function">cpus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">,</span>
-  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">platforms</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
-<span class="token keyword">const</span> <span class="token punctuation">{</span>hasteFS<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> hasteMap<span class="token punctuation">.</span><span class="token function">build</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token keyword">const</span> testFiles <span class="token operator">=</span> hasteFS<span class="token punctuation">.</span><span class="token function">getAllFiles</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>testFiles<span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token comment">// ['/path/to/tests/list1.spec.js', '/path/to/tests/list2.spec.js', …]</span>
-</code></pre></div><p><strong>第三步 单测检索和排序</strong>
-经过第一步和第二步，我们拿到了 <strong>配置对象 configs</strong>，以及<strong>文件Map HasteContext</strong>，接下来通过 SearchSource 对象检索出所有的单元测试到一个数组中，检索出单元测试文件后，在正式执行之前，我们需要先对当前拿到的所有单测进行权重优先级排序。</p> <p>单测排序的工作是由 jest Sequencer 完成的，默认排序优先级为 failed (上次失败的先运行)&gt; duration(耗时长的先运行) &gt; size(文件体积大的先运行)，当然这里我们也可以自定义customSequencer来覆盖 jest 默认的排序规则，jest 排序规则如下。</p> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1640525025246-045963f5-1df6-411c-9257-74359f05e235.png#clientId=u059512e6-4582-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=802&amp;id=u61d4057e&amp;margin=%5Bobject%20Object%5D&amp;name=unit-test-jest-scquencer.png&amp;originHeight=1603&amp;originWidth=2726&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=292495&amp;status=done&amp;style=none&amp;taskId=udcf49166-d29d-4ba5-97b4-f942d8b9fe4&amp;title=&amp;width=1363" alt="unit-test-jest-scquencer.png"></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>		<span class="token keyword">return</span> tests<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">testA<span class="token punctuation">,</span> testB</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span>failedA <span class="token operator">!==</span> failedB<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> failedA <span class="token operator">?</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>hasTimeA <span class="token operator">!=</span> <span class="token punctuation">(</span>testB<span class="token punctuation">.</span>duration <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token comment">// If only one of two tests has timing information, run it last</span>
-        <span class="token keyword">return</span> hasTimeA <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>testA<span class="token punctuation">.</span>duration <span class="token operator">!=</span> <span class="token keyword">null</span> <span class="token operator">&amp;&amp;</span> testB<span class="token punctuation">.</span>duration <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> testA<span class="token punctuation">.</span>duration <span class="token operator">&lt;</span> testB<span class="token punctuation">.</span>duration <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> <span class="token function">fileSize</span><span class="token punctuation">(</span>testA<span class="token punctuation">)</span> <span class="token operator">&lt;</span> <span class="token function">fileSize</span><span class="token punctuation">(</span>testB<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><p><strong>第四步 开始执行</strong>
-在经过第三步之后，我们拿到了经过排序后的单测文件，接下来开始进入到执行步骤，执行单测时的整个调度工作是 jest/core 中的 TestScheduler 来完成，例如 scheduler 会推算是串行执行还是并行执行，推算单测执行完的大概时间，覆盖率报告的生成等，scheduler 会调用 jest-runner 中的 runTests 方法去触发单测执行</p> <p>如果需要并行执行，runTest 方法触发 jest-worker 创建多个child process 子进程来支持 parallel 执行</p> <p>单元测试中全局方法和全局变量，比如 test() describe() it() 等是由 jest-cirucs(jest-jasmine) 提供并注入global中</p> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1640527878045-b379169e-e180-4226-884d-2da6b90321ec.png#clientId=u059512e6-4582-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;id=u4114c79f&amp;margin=%5Bobject%20Object%5D&amp;name=unit-test-jest-run-test.png&amp;originHeight=2878&amp;originWidth=3480&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=683293&amp;status=done&amp;style=none&amp;taskId=ue36536e2-f975-4782-8f78-6d5203e2ae6&amp;title=" alt="unit-test-jest-run-test.png">
-最终单测的运行是由 jest-runtime 中创建的 vm 虚拟机隔离执行，vm 作用域中dom环境是由 jest-environment-jsdom 提供，此外 jest-runtime 中还包括了 transformer 能力以及mock功能的具体实现等，这部分功能在接下来的Mpx框架单元测试实现章节我们会去详细介绍它。</p> <p><strong>第五步 处理返回结果</strong>
-此外 jest-runner中提供了一套类似于 redux 的数据流机制和eventEmitter来管理维护单测状态以及单测执行结果，在jest-runner 中进行事件触发，在TestScheduler 中进行事件监听并对执行结果进行各种处理和序列化，
-最后在 jest-core 中的runJest方法中进行执行结果的终端输出/文件输出等一系列处理。</p> <h2 id="小程序单元测试"><a href="#小程序单元测试" class="header-anchor">#</a> 小程序单元测试</h2> <h3 id="与-web-应用的不同"><a href="#与-web-应用的不同" class="header-anchor">#</a> 与 web 应用的不同</h3> <p>上个章节讲完前端单测简介，以及jest单测框架的大概运行原理后，接下来我们看下单元测试在小程序场景下与web场景的不同</p> <p>首先小程序本身是双线程分离的机制，但目前并没有这种独特的运行环境用来执行单元测试，这里需要借助小程序官方提供的 miniprogram-simulate 工具集，来将整体运行机制调整为单线程模拟运行，并利用 dom 环境来进行小程序组件的注册渲染以及整个自定义组件树的搭建</p> <p>小程序的单元测试执行依赖 js 运行环境和 dom 环境，这里我们选择 jest 框架来提供对应的环境</p> <p>下方是一个简单的微信小程序官方提供的单元测试demo，具体关于miniprogram-simulate 的更多API的使用可以去官方文档查看 <a href="https://github.com/wechat-miniprogram/miniprogram-simulate" target="_blank" rel="noopener noreferrer">https://github.com/wechat-miniprogram/miniprogram-simulate<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> simulate <span class="token keyword">from</span> <span class="token string">'miniprogram-simulate'</span>
-<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'comp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> id <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./comp'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 注册自定义组件，返回组件 id</span>
-    <span class="token keyword">const</span> comp <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token comment">// 使用 id 渲染自定义组件，返回组件封装实例</span>
-
-    <span class="token keyword">const</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'parent-wrapper'</span><span class="token punctuation">)</span> <span class="token comment">// 创建容器节点</span>
-    comp<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span> <span class="token comment">// 将组件插入到容器节点中，会触发 attached 生命周期</span>
-
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'&lt;div&gt;123&lt;/div&gt;'</span><span class="token punctuation">)</span> <span class="token comment">// 判断组件渲染结果</span>
-    <span class="token comment">// 执行其他的一些测试逻辑</span>
-
-    comp<span class="token punctuation">.</span><span class="token function">detach</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 将组件从容器节点中移除，会触发 detached 生命周期</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>此外对于小程序工具集的整体运行流程，在下方章节进行了简要总结。</p> <h3 id="小程序单测框架整体流程"><a href="#小程序单测框架整体流程" class="header-anchor">#</a> 小程序单测框架整体流程</h3> <p>小程序单元测试中微信官方提供的相关库有 miniprogram-simulate、j-component 和 miniprogram-exparser等</p> <ul><li>miniprogram-simulate: 小程序自定义组件测试工具集，进行小程序内置组件的注册以及模拟微信原生api的注入</li> <li>j-component: 仿小程序组件系统，可以让小程序自定义组件跑在 web 端。</li> <li>miniprogram-exparser：微信小程序官方的组件系统模块，exparser 的组件模型和 WebComponents标准中的 Shadow DOM 高度相似，基于 Shadow DOM 原型，可在纯 JS 环境运行，维护整个组件的节点树相关的信息，包括属性、事件等。</li> <li>miniprogram-compiler:  wcc、wcsc 官方编译器的 node 封装版，用于编译 wxml、wxss 文件</li></ul> <p>开发者在使用的时候经常用的的两个方法就是 simulate.load 和 simulate.render 方法，那这里我们就从这两个方法为入口进行整个流程的总结
-<strong>1.miniprogramSimulate.load(path)</strong> <img src="https://cdn.nlark.com/yuque/0/2022/png/116604/1645371259515-600e82a3-5a16-4b50-90d2-4de16b3a6e13.png#clientId=u8f88ae50-6693-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=2179&amp;id=u91907731&amp;margin=%5Bobject%20Object%5D&amp;name=%E5%B0%8F%E7%A8%8B%E5%BA%8F-load.png&amp;originHeight=2179&amp;originWidth=3100&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=655139&amp;status=done&amp;style=none&amp;taskId=uffad3560-8564-4372-bf2f-ceded0ad196&amp;title=&amp;width=3100" alt="小程序-load.png"></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">let</span> nowLoad
-<span class="token comment">// miniprogram-simulate</span>
-<span class="token keyword">function</span> <span class="token function">load</span><span class="token punctuation">(</span><span class="token parameter">path<span class="token punctuation">,</span> definition</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-  <span class="token comment">// 省略部分判断</span>
-  <span class="token keyword">const</span> id <span class="token operator">=</span> <span class="token function">register</span><span class="token punctuation">(</span>componentPath<span class="token punctuation">,</span> tagName<span class="token punctuation">,</span> cache<span class="token punctuation">,</span> hasRegisterCache<span class="token punctuation">)</span>
-  cache<span class="token punctuation">.</span>needRunJsList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token comment">// nowLoad 用于执行用户代码调用 Component 构造器时注入额外的参数给 j-component</span>
-    nowLoad <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
-    <span class="token comment">// require('xxx.js')</span>
-    _<span class="token punctuation">.</span><span class="token function">runJs</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-	<span class="token keyword">return</span> id
-<span class="token punctuation">}</span>
-<span class="token keyword">function</span> <span class="token function">register</span><span class="token punctuation">(</span><span class="token parameter">componentPath<span class="token punctuation">,</span> tagName<span class="token punctuation">,</span> cache<span class="token punctuation">,</span> hasRegisterCache</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 随机生成，不重复</span>
-  <span class="token keyword">const</span> id <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> component <span class="token operator">=</span> <span class="token punctuation">{</span>
-    id<span class="token punctuation">,</span>
-    <span class="token literal-property property">path</span><span class="token operator">:</span> componentPath<span class="token punctuation">,</span>
-    tagName<span class="token punctuation">,</span>
-    <span class="token literal-property property">json</span><span class="token operator">:</span> _<span class="token punctuation">.</span><span class="token function">readJson</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>componentPath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.json</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-   	<span class="token literal-property property">wxml</span><span class="token operator">:</span> compile<span class="token punctuation">.</span><span class="token function">getWxml</span><span class="token punctuation">(</span>componentPath<span class="token punctuation">,</span> cache<span class="token punctuation">.</span>options<span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">wxss</span><span class="token operator">:</span> wxss<span class="token punctuation">.</span><span class="token function">getContent</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>componentPath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.wxss</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-  <span class="token comment">// 存入需要执行的自定义组件 js</span>
-  cache<span class="token punctuation">.</span>needRunJsList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span>componentPath<span class="token punctuation">,</span> component<span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token keyword">return</span> component<span class="token punctuation">.</span>id
-<span class="token punctuation">}</span>
-global<span class="token punctuation">.</span><span class="token function-variable function">Component</span> <span class="token operator">=</span> <span class="token parameter">options</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-	<span class="token keyword">const</span> component <span class="token operator">=</span> nowLoad
-  jComponent<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span>definition<span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-
-<span class="token keyword">function</span> <span class="token function">register</span><span class="token punctuation">(</span><span class="token parameter">definition <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> componentManager <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ComponentManager</span><span class="token punctuation">(</span>definition<span class="token punctuation">)</span>
-    <span class="token keyword">return</span> componentManager<span class="token punctuation">.</span>id
-<span class="token punctuation">}</span>
-
-<span class="token comment">// ComponentManager 方法</span>
-<span class="token keyword">class</span> <span class="token class-name">ComponentManager</span> <span class="token punctuation">{</span>
-    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">definition</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token comment">// ......</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>exparserDef <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">registerToExparser</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-        _<span class="token punctuation">.</span><span class="token function">cache</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">registerToExparser</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token operator">...</span>
-        <span class="token keyword">const</span> exparserDef <span class="token operator">=</span> <span class="token punctuation">{</span>
-            <span class="token literal-property property">is</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">,</span>
-            using<span class="token punctuation">,</span>
-            <span class="token literal-property property">generics</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// TODO</span>
-            <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                <span class="token literal-property property">func</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>generateFunc<span class="token punctuation">,</span>
-                <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">,</span>
-            <span class="token punctuation">}</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">properties</span><span class="token operator">:</span> definition<span class="token punctuation">.</span>properties<span class="token punctuation">,</span>
-            <span class="token literal-property property">data</span><span class="token operator">:</span> definition<span class="token punctuation">.</span>data<span class="token punctuation">,</span>
-            <span class="token literal-property property">methods</span><span class="token operator">:</span> definition<span class="token punctuation">.</span>methods<span class="token punctuation">,</span>
-            <span class="token operator">...</span>
-        <span class="token punctuation">}</span>
-        <span class="token comment">// miniprogram-exparser</span>
-        <span class="token keyword">return</span> exparser<span class="token punctuation">.</span><span class="token function">registerElement</span><span class="token punctuation">(</span>exparserDef<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-
-</code></pre></div><p><strong>2.miniprogramSimulate.render(id)</strong></p> <p><img src="https://cdn.nlark.com/yuque/0/2022/png/116604/1645372791716-b3faf038-ff6f-4309-9a91-270bcfda4aa7.png#clientId=u8f88ae50-6693-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=2069&amp;id=u272fdda2&amp;margin=%5Bobject%20Object%5D&amp;name=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-render.png&amp;originHeight=2069&amp;originWidth=3131&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=668246&amp;status=done&amp;style=none&amp;taskId=u0ed961d2-5859-4c1b-ac1b-79595d39e8e&amp;title=&amp;width=3131" alt="微信小程序-render.png">
-miniprogram-simulate中render方法会调用j-component create，根据id从缓存对象中获取componentManager，进行组件实例创建</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>  <span class="token comment">/**
-   * 创建组件实例
-   */</span>
-  <span class="token function">create</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> properties</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> componentManager <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">cache</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
-
-    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>componentManager<span class="token punctuation">)</span> <span class="token keyword">return</span>
-
-    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">RootComponent</span><span class="token punctuation">(</span>componentManager<span class="token punctuation">,</span> properties<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-</code></pre></div><p>RootComponent 构造函数中使用之前的 _exparserDef 对象进行真实dom节点创建，生成 _exparserNode</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">RootComponent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span><span class="token punctuation">{</span>
-	<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">componentManager<span class="token punctuation">,</span> properties</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  	<span class="token operator">...</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span>_exparserNode <span class="token operator">=</span> exparser<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span>tagName <span class="token operator">||</span> id<span class="token punctuation">,</span> exparserDef<span class="token punctuation">)</span> <span class="token comment">// create exparser node and render</span>
-		<span class="token operator">...</span>
-    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_bindEvent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// touchstart，touchemove blur 等事件绑定</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>新生成的 rootComponent 实例继承Component对象，定义了许多我们单测中需要用到的组件方法</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
-	<span class="token keyword">get</span> <span class="token function">dom</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">...</span>
-  <span class="token keyword">get</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">...</span><span class="token punctuation">.</span>
-  <span class="token keyword">get</span> instance <span class="token operator">...</span>
-  dispatchEvent <span class="token operator">...</span>
-  addEventListener <span class="token operator">...</span>
-  removeEventListener <span class="token operator">...</span>
-  querySelector <span class="token operator">...</span>
-  setData <span class="token operator">...</span>
-  triggerLifeTime <span class="token operator">...</span>
-  triggerPageLifeTime <span class="token operator">...</span>
-  toJSON<span class="token operator">...</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>当然中间还有很多细节实现，比如模版渲染 j-component/template/compile，组件更新 j-component/render 等，感兴趣的话可以详细去看下里边具体的实现，这里我们暂且按下不表。至此，我们拿到了 component 实例，并可以进行正常的组件状态获取以及更新，然后在Jest框架中去断言组件的各种属性以及方法执行后的预期。</p> <h2 id="mpx-框架单元测试"><a href="#mpx-框架单元测试" class="header-anchor">#</a> Mpx 框架单元测试</h2> <p>经过上方 Jest 框架讲解以及小程序单元测试流程分析后，接下来看下在Mpx框架中的单测能力支持实现</p> <h3 id="初期版本"><a href="#初期版本" class="header-anchor">#</a> 初期版本</h3> <p>Mpx框架的初期单测架构，是将Mpx框架开发的小程序项目，先构建编译为源码，再使用 miniprogram-simulate + j-component + jest 对构建后的小程序原生代码运行单元测试
-<img src="https://cdn.nlark.com/yuque/0/2021/png/116604/1640786157277-5f92065d-c87e-46ed-b57e-4692b3d78a36.png#clientId=uc72cd25a-bebe-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=485&amp;id=uf9a7caa5&amp;margin=%5Bobject%20Object%5D&amp;name=mpx-old-unit-test-architecture.png&amp;originHeight=969&amp;originWidth=3076&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=744497&amp;status=done&amp;style=none&amp;taskId=uf25026f4-fd27-4116-bcb5-ffbe7357910&amp;title=&amp;width=1538" alt="mpx-old-unit-test-architecture.png">
-该方案执行任何case都需要执行完整的构建流程，而且预构建已经完成了所有的模块收集，无法使用jest提供的模块mock功能，导致业务使用成本很高，落地困难。</p> <h3 id="优化版本"><a href="#优化版本" class="header-anchor">#</a> 优化版本</h3> <p>经过调研，Jest 本身支持代码转换功能</p> <blockquote><p>Jest在项目中以JavaScript的代码形式运行，但是如果使用一些Node.js不支持的，却可以开箱即用的语法(如JSX，TypeScript中的类型，Vue模板等)那你就需要将代码转换为纯JavaScript，转换的工作就是transformer</p></blockquote> <p>这里我们就可以通过Jest提供的转换能力编写mpx-jest转换器，实现在Jest模块加载过程中实时地将当前的Mpx组件编译转换为原生小程序组件，再交由miniprogram-simulate加载运行测试case。</p> <p>该方案中模块加载完全基于Jest并能实现按需编译，完美规避旧方案中存在的缺陷，缺点在于编译构建流程基于Jest api重构，与Mpx自身基于Webpack的构建流程独立存在，带来额外维护成本，这一问题我们通过将通用的编译转换逻辑抽离出来统一维护，在Webpack和Jest两侧复用，从而解决了改问题。同时在实现这个方案的过程中也做了一部分对应库的改动，将会在下方介绍。</p> <p>首先来看下 jest-runtime 中 transform 的整体流程。</p> <ul><li>runTest 方法调用 runtime.requireModule(path)，传入对应的单测文件地址</li> <li>判断是否是mock module，如果是则直接走 requireMock方法，否则继续往下进行</li> <li>定义 localModule</li> <li>调用 this._loadModule</li> <li>_createRequireImplementation(module, options) 赋值给module.require</li> <li>transformFile 处理对应的文件</li> <li>createScriptFromCode(transformdCode)</li> <li>getVmContext  使用 vm 创建沙盒环境</li> <li>在沙盒环境执行对应的 jest 单测代码</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2022/png/116604/1645251815753-ba8529bb-c63f-477f-bb2a-60182bf5f390.png#clientId=u3600a0a4-27fc-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=811&amp;id=u9a266c8b&amp;margin=%5Bobject%20Object%5D&amp;name=jest-runtime1.png&amp;originHeight=3242&amp;originWidth=4075&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=1246325&amp;status=done&amp;style=none&amp;taskId=uae1603dd-c05f-443b-977e-849426edf0d&amp;title=&amp;width=1019" alt="jest-runtime1.png">
-其中关键节点的代码如下</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>			<span class="token comment">// 自定义 localModule</span>
-			<span class="token keyword">const</span> localModule <span class="token operator">=</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">exports</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">filename</span><span class="token operator">:</span> modulePath<span class="token punctuation">,</span>
-        <span class="token literal-property property">id</span><span class="token operator">:</span> modulePath<span class="token punctuation">,</span>
-        <span class="token literal-property property">loaded</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token function">path</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">dirname</span><span class="token punctuation">(</span>modulePath<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">;</span>
-      <span class="token comment">// 自定义 module.require</span>
-			Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>module<span class="token punctuation">,</span> <span class="token string">'require'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-        <span class="token comment">// rquireModuleOrMock || rquireInternalModule</span>
-      	<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_createRequireImplementation</span><span class="token punctuation">(</span>module<span class="token punctuation">,</span> options<span class="token punctuation">)</span>
-    	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
-			<span class="token comment">// transformCode</span>
-			<span class="token keyword">const</span> transformedCode <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">transformFile</span><span class="token punctuation">(</span>filename<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span>
-			
-			<span class="token comment">// createScriptFromCode</span>
-			<span class="token keyword">const</span> script <span class="token operator">=</span> vm<span class="token punctuation">.</span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string">'({&quot;'</span> <span class="token operator">+</span> <span class="token constant">EVAL_RESULT_VARIABLE</span> <span class="token operator">+</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&quot;:function(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>args<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">){</span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span> transformedCode <span class="token operator">+</span> <span class="token string">'\n}});'</span><span class="token punctuation">;</span><span class="token punctuation">)</span>
-			<span class="token keyword">const</span> vmContext <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_environment<span class="token punctuation">.</span><span class="token function">getVmContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      runScript <span class="token operator">=</span> script<span class="token punctuation">.</span><span class="token function">runInContext</span><span class="token punctuation">(</span>vmContext<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-        filename
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-			compiledFunction <span class="token operator">=</span> runScript<span class="token punctuation">[</span><span class="token constant">EVAL_RESULT_VARIABLE</span><span class="token punctuation">]</span>
-      <span class="token function">compiledFunction</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>
-        module<span class="token punctuation">.</span>exports<span class="token punctuation">,</span>
-        module<span class="token punctuation">,</span> <span class="token comment">// module object</span>
-        module<span class="token punctuation">.</span>exports<span class="token punctuation">,</span> <span class="token comment">// module exports</span>
-        module<span class="token punctuation">.</span>require<span class="token punctuation">,</span> <span class="token comment">// require implementation</span>
-        module<span class="token punctuation">.</span>path<span class="token punctuation">,</span> <span class="token comment">// __dirname</span>
-        module<span class="token punctuation">.</span>filename<span class="token punctuation">,</span> <span class="token comment">// __filename</span>
-        <span class="token comment">// @ts-expect-error</span>
-        <span class="token operator">...</span>lastArgs<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>notEmpty<span class="token punctuation">)</span><span class="token punctuation">,</span>
-      <span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><p>上方是整个 jest-runtime 中对于require module 时transform的整体流程。在Jest的这一能力之上，我们基于 @mpxjs/webpack-plugin 开发了 mpx-jest transformer，实现将 Mpx 单文件组件转换输出为对应的小程序原生代码。
-<img src="https://cdn.nlark.com/yuque/0/2022/png/116604/1645264785364-2db4095b-0344-4fa8-8d56-bfeb28c0f78d.png#clientId=uec723a90-39b3-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=1588&amp;id=ubbef4532&amp;margin=%5Bobject%20Object%5D&amp;name=%E6%94%B9%E8%89%AF%E6%96%B9%E6%A1%8801.png&amp;originHeight=1588&amp;originWidth=3007&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=368757&amp;status=done&amp;style=none&amp;taskId=u8c2c10f8-f83f-4765-b312-bb75081e05c&amp;title=&amp;width=3007" alt="改良方案01.png">
-在完成代码转换后，对应的 script 代码做为String存在于内存中，无法直接使用 Jest 环境的 require 加载执行，为此我们参考上述 jest-runtime 中的 loadModule方法实现了requireFromString方法，核心还是使用node vm 模块来进行 script 代码的执行，同时将jsdom-environment 和 Jest global 对象合并做为 vmContext</p> <p><img src="https://cdn.nlark.com/yuque/0/2022/png/116604/1645269513406-df59853a-086d-4d5f-87a5-cb003d556ce9.png#clientId=uec723a90-39b3-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=802&amp;id=u2da3911b&amp;margin=%5Bobject%20Object%5D&amp;name=%E6%94%B9%E9%80%A0%E6%96%B9%E6%A1%882.png&amp;originHeight=802&amp;originWidth=1970&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=125179&amp;status=done&amp;style=none&amp;taskId=u182d9b94-f659-4d25-80d5-d9d01fdbaac&amp;title=&amp;width=1970" alt="改造方案2.png">
-至此，我们的整体单测方案就大致完成，通过 mpx-jest 转换组件，再交由 miniprogram-simulate 来渲染组件实例，从而完成对组件状态的断言，在实际测试的过程中，还遇到了以下问题进行解决。</p> <p>1.Mpx框架的文件纬度的条件编译支持
-Mpx框架的跨平台输出部分支持对文件进行平台和应用的条件编译引用</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 文件列表</span>
-example<span class="token punctuation">.</span>wx<span class="token punctuation">.</span>mpx
-example<span class="token punctuation">.</span>ali<span class="token punctuation">.</span>mpx
-
-<span class="token comment">// 代码使用</span>
-<span class="token punctuation">{</span>
-	<span class="token literal-property property">example</span><span class="token operator">:</span> <span class="token string">'../src/example'</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>这里我们需要在Jest运行时环境中提供该功能，借助Jest本身提供的 resolver 自定义能力，让我们可以对请求的文件进行自定义resolve功能，这里我们使用Mpx中现有的resolve plugin 和 enhanced-resolve来自定义resolve方法进行文件条件编译的支持。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> CachedInputFileSystem<span class="token punctuation">,</span> ResolverFactory <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'enhanced-resolve'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> AddModePlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/webpack-plugin/lib/resolver/AddModePlugin'</span><span class="token punctuation">)</span>
-
-module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">request<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> addModePlugin <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AddModePlugin</span><span class="token punctuation">(</span><span class="token string">'before-file'</span><span class="token punctuation">,</span> <span class="token string">'wx'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token function-variable function">include</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token boolean">true</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'file'</span><span class="token punctuation">)</span>
-  <span class="token comment">// create a resolver</span>
-  <span class="token keyword">const</span> myResolver <span class="token operator">=</span> ResolverFactory<span class="token punctuation">.</span><span class="token function">createResolver</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token operator">...</span>
-    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>addModePlugin<span class="token punctuation">]</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token keyword">let</span> result <span class="token operator">=</span> myResolver<span class="token punctuation">.</span><span class="token function">resolveSync</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> options<span class="token punctuation">.</span>basedir<span class="token punctuation">,</span> request<span class="token punctuation">)</span>
-	<span class="token keyword">return</span> result<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'?'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>2.miniprogram-simulate 定制化方法
-在小程序单元测试的章节中，我们介绍了小程序相关库的运行机制，miniprogram-simulate提供的 load 方法默认只解析渲染原生组件，我们的Mpx组件，mpx-jest 转换器无法和miniprogram-simulate进行关联，所以这里我们选择fork miniprogram-simulate 仓库，自定义了loadMpx和registerMpx方法。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 使用</span>
-<span class="token keyword">import</span> simulate <span class="token keyword">from</span> <span class="token string">'@mpxjs/miniprogram-simulate'</span>
-<span class="token keyword">const</span> id <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">loadMpx</span><span class="token punctuation">(</span><span class="token string">'src/components/list.mpx'</span><span class="token punctuation">)</span>
-
-<span class="token comment">//@mpxjs/miniprogram-simulate 中 loadMpx 实现简单描述</span>
-<span class="token keyword">function</span> <span class="token function">loadMpx</span><span class="token punctuation">(</span><span class="token parameter">path<span class="token punctuation">,</span> tagName<span class="token punctuation">,</span> options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-	<span class="token comment">// ...省略一部分校验逻辑</span>
-  <span class="token comment">// .mpx 结尾文件会经过 mpx-jest 进行转换，输出 wxml,wxss,json,script</span>
-  <span class="token keyword">const</span> componentContent <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span>componentPath<span class="token punctuation">)</span>
-  id <span class="token operator">=</span> <span class="token function">registerMpx</span><span class="token punctuation">(</span>componentPath<span class="token punctuation">,</span> tagName<span class="token punctuation">,</span> cache<span class="token punctuation">,</span> hasRegisterCache<span class="token punctuation">,</span> componentContent<span class="token punctuation">)</span>
-  <span class="token comment">//....</span>
-  <span class="token keyword">return</span> id
-<span class="token punctuation">}</span>
-<span class="token keyword">function</span> <span class="token function">registerMpx</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-  <span class="token comment">// 部分 require('xx/xx.json') 等修改为直接赋值</span>
-<span class="token punctuation">}</span>
-
-</code></pre></div><p>对于组件/页面在存在大量组件引用的情况下，mock引用组件可大大提升单测的运行速度，原有miniprogram-simulate框架并没有提供mock功能，所以这里我们也自定义了mockComponent和clearMockComponent方法。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 代码在 @mpxjs/miniprogram-simulate 中</span>
-<span class="token keyword">let</span> mockComponentMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-
-<span class="token keyword">function</span> <span class="token function">registerMpx</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-	<span class="token comment">// 判断是否是mock的组件</span>
-  <span class="token keyword">if</span> <span class="token punctuation">(</span>mockComponentMap<span class="token punctuation">[</span>tagName<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    componentPath <span class="token operator">=</span> mockComponentMap<span class="token punctuation">[</span>tagName<span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-<span class="token comment">/**
- * mock usingComponents中的组件
- * @param compName
- * @param compDefinition
- */</span>
-<span class="token keyword">function</span> <span class="token function">mockComponent</span><span class="token punctuation">(</span><span class="token parameter">compName<span class="token punctuation">,</span> compDefinition</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  mockComponentMap<span class="token punctuation">[</span>compName<span class="token punctuation">]</span> <span class="token operator">=</span> compDefinition
-<span class="token punctuation">}</span>
-<span class="token comment">/**
- * 清除 component mock 数据
- */</span>
-<span class="token keyword">function</span> <span class="token function">clearMockComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  mockComponentMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">// 单测中使用时</span>
-simulate<span class="token punctuation">.</span><span class="token function">mockComponent</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'&lt;view&gt;component list&lt;/view&gt;'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>3.封装定制test-utils工具集
-书写单测的过程中我们会有很多重复工作，比如创建挂载组件、代理接口、模拟多个组件、断言多个数据等，这里我们将这些共性的方法抽离封装成了 test-utils</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">/**
- * 创建渲染并挂载自定义组件
- * @param {组件基于所在项目的相对路径,例如'src/subpackage/gulfstream/components/bottom/bottom.mpx'} compPath
- * @returns 用于测试的自定义组件
- */</span>
-<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">createCompAndAttach</span> <span class="token punctuation">(</span><span class="token parameter">compPath<span class="token punctuation">,</span> renderProps <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> id <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">loadMpx</span><span class="token punctuation">(</span>compPath<span class="token punctuation">)</span>
-  <span class="token keyword">let</span> comp <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> renderProps<span class="token punctuation">)</span>
-  <span class="token keyword">const</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span>
-  comp<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span>
-  <span class="token keyword">return</span> comp
-<span class="token punctuation">}</span>
-
-<span class="token comment">/**
- * 借助xfetch构造mock请求
- * @param {待模拟url} mockUrl
- * @param {mock数据文件路径} mockFilePath
- */</span>
-<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">proxyFetch</span> <span class="token punctuation">(</span><span class="token parameter">mockUrl<span class="token punctuation">,</span> mockUrlData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">let</span> mockData
-  mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span>fetch <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span> <span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span>options<span class="token punctuation">.</span>url<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>mockUrl<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> mockUrlData <span class="token operator">===</span> <span class="token string">'string'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          mockData <span class="token operator">=</span> <span class="token function">getMockContent</span><span class="token punctuation">(</span>mockUrlData<span class="token punctuation">)</span>
-        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-          mockData <span class="token operator">=</span> mockUrlData
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-      <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">errno</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">data</span><span class="token operator">:</span> mockData
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-<span class="token operator">...</span><span class="token operator">...</span>
-</code></pre></div><p>至此，Mpx框架的单元测试方案整体上就完备了，整体上的方案架构如下图所示
-<img src="https://cdn.nlark.com/yuque/0/2022/png/116604/1645448762294-8e4cb0ab-bc09-4688-9360-ab4d67776af1.png#clientId=uc67aedb9-b0af-4&amp;crop=0&amp;crop=0&amp;crop=1&amp;crop=1&amp;from=paste&amp;height=1164&amp;id=u19264b9b&amp;margin=%5Bobject%20Object%5D&amp;name=Mpx%E5%8D%95%E6%B5%8B%E6%9E%B6%E6%9E%84%E5%9B%BE.png&amp;originHeight=2327&amp;originWidth=3335&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=7199152&amp;status=done&amp;style=none&amp;taskId=uc2ecd51a-8419-46f1-a52a-1c9a8868ce1&amp;title=&amp;width=1667.5" alt="Mpx单测架构图.png"></p> <h2 id="mpx组件单元测试实战"><a href="#mpx组件单元测试实战" class="header-anchor">#</a> Mpx组件单元测试实战</h2> <p>在上方介绍过整体的jest框架流程以及Mpx框架单元测试架构后，接下来我们着手进行 Mpx 框架开发的小程序组件的单元测试用例书写实战</p> <p>使用 @mpxjs/cli 创建模版项目时选择使用单元测试，<strong>会自动生成有单测能力的模版项目</strong>，和普通 Jest + miniprogram-simulate 搭建的原生小程序单测项目不同的是，transform 中添加了 Mpx 文件的处理，这里jest.config.js其他配置就不过多列出，可通过新创建项目进行查看。</p> <div class="language-json extra-class"><pre class="language-json"><code>	transform<span class="token operator">:</span> <span class="token punctuation">{</span>
-    '^.+\\.js$'<span class="token operator">:</span> '&lt;rootDir&gt;/node_modules/babel-jest'<span class="token punctuation">,</span>
-    '^.+\\.mpx$'<span class="token operator">:</span> '&lt;rootDir&gt;/node_modules/@mpxjs/mpx-jest'
-  <span class="token punctuation">}</span>
-</code></pre></div><p>首先我们列出一个组件示例，具体项目可点击链接查看:
-<a href="https://github.com/Blackgan3/mpx-unit-test-demo" target="_blank" rel="noopener noreferrer">https://github.com/Blackgan3/mpx-unit-test-demo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>首先对于组件单测的书写，我们希望有一套固定的规范，即所写的不同组件的单测能有一个相同的格式和顺序，这里我们建议的顺序为</p> <ul><li>组件初始化断言</li> <li>组件初始化各种形态断言</li> <li>组件变化- data|computed|watch变化断言</li> <li>组件变化- 事件触发断言</li> <li>组件销毁断言</li></ul> <p>根据上方组件功能，首先我们建议对组件usingComponents 引入的组件进行模拟注册，这样可以节省组件渲染挂载的时间</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>	<span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 进行usingComponents 组件 mock</span>
-    testUtils<span class="token punctuation">.</span><span class="token function">mockComponents</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-      <span class="token string">'list'</span>
-    <span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>1.我们首先需要对组件初始化成功后进行各种组件形态预期，即组件初始化断言</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>	<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'test component init correctly'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> comp <span class="token operator">=</span> testUtils<span class="token punctuation">.</span><span class="token function">createCompAndAttach</span><span class="token punctuation">(</span>compPath<span class="token punctuation">)</span>
-    <span class="token keyword">const</span> insData <span class="token operator">=</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data
-    testUtils<span class="token punctuation">.</span><span class="token function">checkExpectedData</span><span class="token punctuation">(</span>insData<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">someClassShowOne</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">someClassShowTwo</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">someClassShowTwoFlag</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">listData2</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;手机&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;电视&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;电脑&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">compStatus</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">timeDeferFlag</span><span class="token operator">:</span> <span class="token boolean">false</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> domHTML <span class="token operator">=</span> comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML
-    <span class="token comment">// 进行组件初始化dom快照测试</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>domHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>上方我们使用工具方法创建并挂载生成组件实例，然后对组件data中key值和value进行预期断言，最后对组件初始化生成的HTML进行快照测试</p> <p>2.组件初始化各种形态断言
-当组件的初始化数据源有多种形态，比如你的组件初始化数据是由接口或者其他重要的props传递过来决定的，那这里我们可以对不同的数据源组件的不同表现进行断言</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>	<span class="token function">it</span> <span class="token punctuation">(</span><span class="token string">'test comp different data'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 进行唯一数据源请求的接口代理</span>
-    <span class="token function">proxyFetch</span><span class="token punctuation">(</span><span class="token string">'api/somePackage/getCompData'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">1</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> comp <span class="token operator">=</span> testUtils<span class="token punctuation">.</span><span class="token function">createCompAndAttach</span><span class="token punctuation">(</span>compPath<span class="token punctuation">)</span>
-    <span class="token comment">// 目前 status 为 1，再次改变数据源代理</span>
-    <span class="token function">proxyFetch</span><span class="token punctuation">(</span><span class="token string">'api/somePackage/getCompData'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">2</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token keyword">await</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span><span class="token function">fetchCompData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token keyword">await</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data<span class="token punctuation">.</span>compStatus<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data<span class="token punctuation">.</span>compData<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-		<span class="token comment">// 再次改变数据源代理，修改源数据</span>
-    <span class="token function">proxyFetch</span><span class="token punctuation">(</span><span class="token string">'api/somePackage/getCompData'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">3</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token keyword">await</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span><span class="token function">fetchCompData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token keyword">await</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data<span class="token punctuation">.</span>compStatus<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data<span class="token punctuation">.</span>compData<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>3.组件变化- props|data|computed|watch变化断言
-接下来我们需要对组件自身的 props|data|computed|watch 等属性变化时所触发的组件相应变化做出各种预期。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>	<span class="token comment">// 组件 props 改变后组件的各种形态预期</span>
-	<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'test props different values correspond to different performance'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 传入初始渲染 props</span>
-    <span class="token keyword">const</span> successContent <span class="token operator">=</span> <span class="token string">'some successContent'</span>
-    <span class="token keyword">const</span> comp <span class="token operator">=</span> testUtils<span class="token punctuation">.</span><span class="token function">createCompAndAttach</span><span class="token punctuation">(</span>compPath<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      successContent
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> childComp <span class="token operator">=</span> comp<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.successContent'</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>childComp<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeDefined</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data<span class="token punctuation">.</span>successContent<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span>successContent<span class="token punctuation">)</span>
-    <span class="token comment">// 对最终的HTML进行快照测试</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>childComp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-	<span class="token comment">// 当组件data中的someClassShowOne改变之后需要做的哪些预期</span>
-	<span class="token comment">// 当组件computed中的someCompShow改变之后需要做的预期</span>
-	<span class="token comment">// ......</span>
-	
-</code></pre></div><p>4.组件必不可少的会有方法，这里我们对示例组件的方法调用进行预期</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>	<span class="token function">it</span> <span class="token punctuation">(</span><span class="token string">'test someClassShowTwoFlag tap event trigger'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> comp <span class="token operator">=</span> testUtils<span class="token punctuation">.</span><span class="token function">createComp</span><span class="token punctuation">(</span>compPath<span class="token punctuation">)</span>
-    <span class="token keyword">const</span> fetchCompDataSpy <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">spyOn</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">,</span> <span class="token string">'fetchCompData'</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> changeSomeClassShowTwoFlagSpy <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">spyOn</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">,</span> <span class="token string">'changeSomeClassShowTwoFlag'</span><span class="token punctuation">)</span>
-    <span class="token function">proxyFetch</span><span class="token punctuation">(</span><span class="token string">'api/somePackage/getCompData'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token number">1</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    comp<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span>
-    <span class="token keyword">const</span> compData <span class="token operator">=</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data
-    <span class="token keyword">const</span> changeFlagViewComp <span class="token operator">=</span> comp<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.changeFlagClass'</span><span class="token punctuation">)</span>
-
-    <span class="token comment">// dispatchEvent 为异步</span>
-    changeFlagViewComp<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span><span class="token string">'tap'</span><span class="token punctuation">)</span>
-    <span class="token keyword">await</span> testUtils<span class="token punctuation">.</span><span class="token function">sleep</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-
-    <span class="token function">expect</span><span class="token punctuation">(</span>changeSomeClassShowTwoFlagSpy<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeCalledWith</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>fetchCompDataSpy<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHaveBeenCalledTimes</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>compData<span class="token punctuation">.</span>someClassShowTwo<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>someClassShowTwoFlag<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 此处注意 非template中使用过到的data，获取更新后的值，从instance中获取</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>	
-
-	<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'test someTimeDeferAction tap event trigger'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    jest<span class="token punctuation">.</span><span class="token function">useFakeTimers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    jest<span class="token punctuation">.</span><span class="token function">spyOn</span><span class="token punctuation">(</span>global<span class="token punctuation">,</span> <span class="token string">'setTimeout'</span><span class="token punctuation">)</span>
-
-    <span class="token keyword">const</span> comp <span class="token operator">=</span> testUtils<span class="token punctuation">.</span><span class="token function">createCompAndAttach</span><span class="token punctuation">(</span>compPath<span class="token punctuation">)</span>
-    <span class="token keyword">const</span> compData <span class="token operator">=</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>data
-    <span class="token keyword">const</span> someTimeDeferActionSpy <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token function">spyOn</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>instance<span class="token punctuation">,</span> <span class="token string">'someTimeDeferAction'</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> childComp <span class="token operator">=</span> comp<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.someTimeDeferActionClass'</span><span class="token punctuation">)</span>
-    childComp<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span><span class="token string">'tap'</span><span class="token punctuation">)</span>
-
-    <span class="token comment">// comp.instance.someTimeDeferAction()</span>
-    <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-
-    jest<span class="token punctuation">.</span><span class="token function">runAllTimers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token keyword">await</span> comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-
-    <span class="token function">expect</span><span class="token punctuation">(</span>compData<span class="token punctuation">.</span>timeDeferFlag<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>someTimeDeferActionSpy<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHaveBeenCalledTimes</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    jest<span class="token punctuation">.</span><span class="token function">useRealTimers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>以上，我们对当前的示例组件完成了整体内容的单元测试书写，完整版单测文件可点击链接查看
-<a href="https://github.com/Blackgan3/mpx-unit-test-demo/blob/master/test/components/example.spec.js" target="_blank" rel="noopener noreferrer">https://github.com/Blackgan3/mpx-unit-test-demo/blob/master/test/components/example.spec.js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="结语"><a href="#结语" class="header-anchor">#</a> 结语</h2> <p>通篇文章我们依次进行了前端常用单测框架简介，jest框架原理总结，小程序单元测试内部执行流程，最后介绍Mpx框架中单测能力的支持实现以及Mpx组件单测实战。</p> <p>学习到了jest不仅仅是一个单元测试框架，你甚至可以使用它的各个工具库自己创建一个单元测试框架；以及感受到小程序场景下单元测试的差异化；Mpx框架层面也做了诸多改造来支撑单测功能的落地。</p> <p>后续我们还会继续跟进推动业务中落地TDD规范，复杂逻辑组件中各种功能场景单测用例规范的补充等问题，持续在小程序单测方向深耕并有更好的规范总结产出。</p> <p>参考文章：</p> <ul><li><a href="https://jestjs.io/" target="_blank" rel="noopener noreferrer">https://jestjs.io<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://jestjs.io/docs/architecture" target="_blank" rel="noopener noreferrer">https://jestjs.io/docs/architecture<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://medium.com/code-for-cause/jest-architecture-9870bbfcda44" target="_blank" rel="noopener noreferrer">https://medium.com/code-for-cause/jest-architecture-9870bbfcda44<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/articles/mpx-cli-next.html" class="prev">
-        Mpx-cli 插件化改造
-      </a></span> <!----></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/62.4bf212f9.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/assets/css/0.styles.f22478ca.css b/docs-vuepress/.vuepress/dist/assets/css/0.styles.f22478ca.css
deleted file mode 100644
index e0aefebd3c..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/css/0.styles.f22478ca.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;height:2rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#3eaf7c}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:2rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#3eaf7c}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}
-
-/*! @docsearch/css 3.8.2 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,0.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,0.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,0.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,0.3);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 1px 1px 0 rgba(3,4,9,0.30196078431372547);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,0.5),0 -4px 8px 0 rgba(0,0,0,0.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 2px;position:relative;top:-1px;width:20px}.DocSearch-Button-Key--pressed{box-shadow:var(--docsearch-key-pressed-shadow);transform:translate3d(0,1px,0)}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::-moz-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:2px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;width:20px}.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.logo[data-v-3ad594c3]{background-image:url(https://dpubstatic.udache.com/static/dpubimg/imdk1FF2QF/logo_color.png);background-size:135px 35px;background-repeat:no-repeat;font-size:0;width:135px;height:35px;margin-right:50px}.nav[data-v-3ad594c3]{margin-left:50px}.header-menu[data-v-3ad594c3],.row[data-v-3ad594c3]{display:flex;align-items:center}.header-menu[data-v-3ad594c3]{width:100%;justify-content:space-between;z-index:101;position:fixed;left:0;top:0;line-height:60px;padding:0 16px;box-sizing:border-box;background:#f6f6f6}.header-menu-icon[data-v-3ad594c3]{display:inline-block;padding-left:12px}.head-container[data-v-3ad594c3]{width:100%;height:3.5rem;display:flex;align-items:center;line-height:2.2rem;z-index:100;position:fixed;left:0;top:0;-webkit-backdrop-filter:saturate(180%) blur(1rem);backdrop-filter:saturate(180%) blur(1rem);background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 8px #f0f1f2;padding:.5rem 3rem}.nav-link[data-v-3ad594c3]{color:#3a495d;display:flex;align-items:center;width:100%;justify-content:space-between}a.router-link-active[data-v-3ad594c3]{color:#3eaf7c;border-bottom:2px solid #46bd87;margin-bottom:-2px}.banner[data-v-3ad594c3]{position:absolute;right:0;top:0}.searchBox-wrapper[data-v-3ad594c3]{position:absolute;right:150px;z-index:2}.header__line[data-v-3ad594c3]{height:33px;opacity:.1;border:1px solid #3a495d}.header-container[data-v-3ad594c3]{position:absolute;width:100%}.header-nav[data-v-3ad594c3]{position:relative;z-index:5}.head-mask[data-v-3ad594c3]{width:100vw;height:100vh;position:fixed;left:0;top:0;z-index:9}@media (max-width:719px){.head-container[data-v-3ad594c3]{width:100vw;max-height:100vh;background:#fff;align-items:start;padding:16px 0;height:auto;top:60px;transform:translateY(-100%);transition:transform .3s}.row[data-v-3ad594c3]{flex-direction:column;align-items:start;width:100%}.nav[data-v-3ad594c3]{width:100%;height:60px;line-height:60px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;margin:0}}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#3eaf7c}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:16px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#3eaf7c}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;-webkit-user-select:none;user-select:none;opacity:0}a.header-anchor:focus,a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}.navbar .site-name{display:none!important}a{word-break:break-all}:root{--vt-c-white:#fff;--vt-c-white-soft:#f9f9f9;--vt-c-white-mute:#f1f1f1;--vt-c-black:#1a1a1a;--vt-c-black-pure:#000;--vt-c-black-soft:#242424;--vt-c-black-mute:#2f2f2f;--vt-c-indigo:#213547;--vt-c-indigo-soft:#476582;--vt-c-indigo-light:#aac8e4;--vt-c-gray:#8e8e8e;--vt-c-gray-light-1:#aeaeae;--vt-c-gray-light-2:#c7c7c7;--vt-c-gray-light-3:#d1d1d1;--vt-c-gray-light-4:#e5e5e5;--vt-c-gray-light-5:#f2f2f2;--vt-c-gray-dark-1:#636363;--vt-c-gray-dark-2:#484848;--vt-c-gray-dark-3:#3a3a3a;--vt-c-gray-dark-4:#282828;--vt-c-gray-dark-5:#202020;--vt-c-divider-light-1:rgba(60,60,60,0.29);--vt-c-divider-light-2:rgba(60,60,60,0.12);--vt-c-divider-dark-1:rgba(84,84,84,0.65);--vt-c-divider-dark-2:rgba(84,84,84,0.48);--vt-c-text-light-1:var(--vt-c-indigo);--vt-c-text-light-2:rgba(60,60,60,0.7);--vt-c-text-light-3:rgba(60,60,60,0.33);--vt-c-text-light-4:rgba(60,60,60,0.18);--vt-c-text-light-code:var(--vt-c-indigo-soft);--vt-c-text-dark-1:hsla(0,0%,100%,0.87);--vt-c-text-dark-2:hsla(0,0%,92.2%,0.6);--vt-c-text-dark-3:hsla(0,0%,92.2%,0.38);--vt-c-text-dark-4:hsla(0,0%,92.2%,0.18);--vt-c-text-dark-code:var(--vt-c-indigo-light);--vt-c-green:#42b883;--vt-c-green-light:#42d392;--vt-c-green-lighter:#35eb9a;--vt-c-green-dark:#33a06f;--vt-c-green-darker:#155f3e;--vt-c-blue:#3b8eed;--vt-c-blue-light:#549ced;--vt-c-blue-lighter:#50a2ff;--vt-c-blue-dark:#3468a3;--vt-c-blue-darker:#255489;--vt-c-yellow:#ffc517;--vt-c-yellow-light:#ffe417;--vt-c-yellow-lighter:#ffff17;--vt-c-yellow-dark:#e0ad15;--vt-c-yellow-darker:#bc9112;--vt-c-red:#ed3c50;--vt-c-red-light:#f43771;--vt-c-red-lighter:#fd1d7c;--vt-c-red-dark:#cd2d3f;--vt-c-red-darker:#ab2131;--vt-c-purple:#de41e0;--vt-c-purple-light:#e936eb;--vt-c-purple-lighter:#f616f8;--vt-c-purple-dark:#823c83;--vt-c-purple-darker:#602960;--c-brand:#3eaf7c;--c-bg:#fff;--c-bg-light:#f3f4f5;--c-bg-lighter:#eee;--c-text:#2c3e50;--c-text-light:#3a5169;--c-text-quote:#999;--c-border-dark:#dfe2e5;--vt-c-bg:var(--vt-c-white);--vt-c-bg-soft:var(--vt-c-white-soft);--vt-c-bg-mute:var(--vt-c-white-mute);--vt-c-divider:var(--vt-c-divider-light-1);--vt-c-divider-light:var(--vt-c-divider-light-2);--vt-c-divider-inverse:var(--vt-c-divider-dark-1);--vt-c-divider-inverse-light:var(--vt-c-divider-dark-2);--vt-c-text-1:var(--vt-c-text-light-1);--vt-c-text-2:var(--vt-c-text-light-2);--vt-c-text-3:var(--vt-c-text-light-3);--vt-c-text-4:var(--vt-c-text-light-4);--vt-c-text-code:var(--vt-c-text-light-code);--vt-c-text-inverse-1:var(--vt-c-text-dark-1);--vt-c-text-inverse-2:var(--vt-c-text-dark-2);--vt-c-text-inverse-3:var(--vt-c-text-dark-3);--vt-c-text-inverse-4:var(--vt-c-text-dark-4);--vt-c-brand:var(--vt-c-green);--vt-c-brand-light:var(--vt-c-green-light);--vt-c-brand-dark:var(--vt-c-green-dark);--vt-c-brand-highlight:var(--vt-c-brand-dark)}:root .DocSearch{--docsearch-primary-color:var(--c-brand);--docsearch-text-color:var(--c-text);--docsearch-highlight-color:var(--c-brand);--docsearch-muted-color:var(--c-text-quote);--docsearch-container-background:rgba(9,10,17,0.8);--docsearch-modal-background:var(--c-bg-light);--docsearch-searchbox-background:var(--c-bg-lighter);--docsearch-searchbox-focus-background:var(--c-bg);--docsearch-searchbox-shadow:inset 0 0 0 2px var(--c-brand);--docsearch-hit-color:var(--c-text-light);--docsearch-hit-active-color:var(--c-bg);--docsearch-hit-background:var(--c-bg);--docsearch-hit-shadow:0 1px 3px 0 var(--c-border-dark);--docsearch-footer-background:var(--c-bg)}@media (max-width:719px){:root{--c-bg-lighter:none}}#nprogress{pointer-events:none}#nprogress .bar{background:#3eaf7c;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #3eaf7c,0 0 5px #3eaf7c;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#3eaf7c transparent transparent #3eaf7c;border-style:solid;border-width:2px;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.go-to-top[data-v-5cf0f4c0]{cursor:pointer;position:fixed;bottom:2rem;right:2.5rem;width:2rem;color:#3eaf7c;z-index:1}.go-to-top[data-v-5cf0f4c0]:hover{color:#72cda4}@media (max-width:959px){.go-to-top[data-v-5cf0f4c0]{display:none}}.fade-enter-active[data-v-5cf0f4c0],.fade-leave-active[data-v-5cf0f4c0]{transition:opacity .3s}.fade-enter[data-v-5cf0f4c0],.fade-leave-to[data-v-5cf0f4c0]{opacity:0}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}[data-v-ae3bb0ce]::-webkit-scrollbar{display:none}.swiper-container[data-v-ae3bb0ce]{position:relative;width:100%;height:152px;overflow:hidden}.swiper[data-v-ae3bb0ce]{height:100%;white-space:nowrap;transform:translateX(0);display:inline-block}.swiper-list[data-v-ae3bb0ce]{width:100%;display:inline-block}.swiper-dot[data-v-ae3bb0ce]{position:absolute;left:50%;bottom:12px;display:flex;padding:0;z-index:3;transform:translate3d(-50%,0,0)}.swiper-icon[data-v-ae3bb0ce]{list-style:none;width:6px;height:6px;border-radius:50%;background:#efefef;margin:0 3px}.active[data-v-ae3bb0ce]{background:#00bd81}.active[data-v-a2c0041c]{border:2px solid #00bd81!important}.m-banner[data-v-a2c0041c]{display:flex;flex-direction:column;align-items:center;height:468px;background-image:linear-gradient(0deg,#50be97 4%,#31bc7f 83%)}.m-banner .m-title[data-v-a2c0041c]{font-family:PingFangSC-Medium;font-size:26px;color:#fff;letter-spacing:0;text-align:justify;font-weight:500;margin-top:120px}.m-banner .m-subtitle[data-v-a2c0041c]{font-family:PingFangSC-Regular;font-size:13px;color:#fff;letter-spacing:0;text-align:center;line-height:22px;font-weight:400;margin:10px 30px 0}.m-banner .m-banner-btn-wrapper[data-v-a2c0041c]{display:flex;flex-direction:row;justify-content:center;align-content:center;padding-top:30px}.m-banner .m-banner-btn-wrapper .m-banner-btn[data-v-a2c0041c]{width:104px;height:36px;border-radius:4px;text-align:center;line-height:36px}.m-banner .m-banner-btn-wrapper .m-banner-btn-enter[data-v-a2c0041c]{background:#fff;border:0 solid #efefef;margin-right:15px}.m-banner .m-banner-btn-wrapper .m-banner-btn-jump[data-v-a2c0041c]{border:1px solid #fff;margin-left:15px;color:#fff;box-sizing:border-box}.m-banner .m-banner-btn-wrapper .white-link[data-v-a2c0041c]{color:#fff}.m-banner .m-banner-bg[data-v-a2c0041c]{width:375px;height:202px;background-image:url(https://dpubstatic.udache.com/static/dpubimg/A0HNx-AsoO/y_pic_banner.png);background-size:cover;margin-top:35px}.m-advantages[data-v-a2c0041c]{display:flex;justify-content:space-between;align-items:center;padding:20px 16px;background:#fff}.m-advantages .m-advan-section[data-v-a2c0041c]{width:100px;height:78px;background:#fff;box-shadow:0 11px 32px 0 rgba(49,188,127,.06),0 3px 10px 0 rgba(49,188,127,.04);border-radius:4px;text-align:center;list-style:none}.m-advantages .m-advan-section .m-advan-section-img[data-v-a2c0041c]{margin-top:10px}.m-advantages .m-advan-section .m-advan-section-title[data-v-a2c0041c]{margin-top:4px;font-family:PingFangSC-Regular;font-size:15px;color:#3a495d;letter-spacing:0;text-align:center;line-height:22px;font-weight:400}.m-example-swiper[data-v-a2c0041c]{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border-radius:4px}.m-example-name[data-v-a2c0041c]{width:166px;height:60px;margin:6px;border:2px solid #ededed;box-shadow:0 11px 32px 0 rgba(49,188,127,.06),0 4px 10px 0 rgba(49,188,127,.04);border-radius:4px;display:flex;align-items:center;justify-content:center;background:#fff}.m-example-wrapper[data-v-a2c0041c],.m-feature-wrapper[data-v-a2c0041c],.m-util-wrapper[data-v-a2c0041c],.mdemo-wrapper[data-v-a2c0041c]{display:flex;flex-direction:column;align-items:center;background:#f7f7f7}.m-example-wrapper .m-example-title[data-v-a2c0041c],.m-example-wrapper .m-feature-title[data-v-a2c0041c],.m-example-wrapper .m-util-title[data-v-a2c0041c],.m-example-wrapper .mdemo-title[data-v-a2c0041c],.m-feature-wrapper .m-example-title[data-v-a2c0041c],.m-feature-wrapper .m-feature-title[data-v-a2c0041c],.m-feature-wrapper .m-util-title[data-v-a2c0041c],.m-feature-wrapper .mdemo-title[data-v-a2c0041c],.m-util-wrapper .m-example-title[data-v-a2c0041c],.m-util-wrapper .m-feature-title[data-v-a2c0041c],.m-util-wrapper .m-util-title[data-v-a2c0041c],.m-util-wrapper .mdemo-title[data-v-a2c0041c],.mdemo-wrapper .m-example-title[data-v-a2c0041c],.mdemo-wrapper .m-feature-title[data-v-a2c0041c],.mdemo-wrapper .m-util-title[data-v-a2c0041c],.mdemo-wrapper .mdemo-title[data-v-a2c0041c]{font-family:PingFangSC-Medium;font-size:24px;color:#3a495d;letter-spacing:0;text-align:justify;font-weight:500;margin-top:50px;margin-bottom:20px}.m-example-wrapper .m-feature-subtitle[data-v-a2c0041c],.m-example-wrapper .mdemo-subtitle[data-v-a2c0041c],.m-feature-wrapper .m-feature-subtitle[data-v-a2c0041c],.m-feature-wrapper .mdemo-subtitle[data-v-a2c0041c],.m-util-wrapper .m-feature-subtitle[data-v-a2c0041c],.m-util-wrapper .mdemo-subtitle[data-v-a2c0041c],.mdemo-wrapper .m-feature-subtitle[data-v-a2c0041c],.mdemo-wrapper .mdemo-subtitle[data-v-a2c0041c]{font-family:PingFangSC-Regular;font-size:13px;color:#394e5e;letter-spacing:0;text-align:center;line-height:22px;font-weight:400;padding:0 30px}.m-example-wrapper .m-feature-btn[data-v-a2c0041c],.m-example-wrapper .mdemo-btn[data-v-a2c0041c],.m-feature-wrapper .m-feature-btn[data-v-a2c0041c],.m-feature-wrapper .mdemo-btn[data-v-a2c0041c],.m-util-wrapper .m-feature-btn[data-v-a2c0041c],.m-util-wrapper .mdemo-btn[data-v-a2c0041c],.mdemo-wrapper .m-feature-btn[data-v-a2c0041c],.mdemo-wrapper .mdemo-btn[data-v-a2c0041c]{width:104px;height:36px;background:#00bd81;border:0 solid #efefef;border-radius:4px;margin-top:30px;font-family:PingFangSC-Medium;font-size:15px;color:#fff;letter-spacing:0;text-align:center;line-height:36px;font-weight:500}.m-example-wrapper .mdemo-icon-wrapper[data-v-a2c0041c],.m-feature-wrapper .mdemo-icon-wrapper[data-v-a2c0041c],.m-util-wrapper .mdemo-icon-wrapper[data-v-a2c0041c],.mdemo-wrapper .mdemo-icon-wrapper[data-v-a2c0041c]{margin:10px 0 40px;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;align-content:space-around}.m-example-wrapper .mdemo-icon-wrapper .mdemo-icon-card[data-v-a2c0041c],.m-feature-wrapper .mdemo-icon-wrapper .mdemo-icon-card[data-v-a2c0041c],.m-util-wrapper .mdemo-icon-wrapper .mdemo-icon-card[data-v-a2c0041c],.mdemo-wrapper .mdemo-icon-wrapper .mdemo-icon-card[data-v-a2c0041c]{width:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:30px}.m-example-wrapper .m-feature-pic[data-v-a2c0041c],.m-feature-wrapper .m-feature-pic[data-v-a2c0041c],.m-util-wrapper .m-feature-pic[data-v-a2c0041c],.mdemo-wrapper .m-feature-pic[data-v-a2c0041c]{margin-top:40px}.m-example-wrapper .six-section__row[data-v-a2c0041c],.m-feature-wrapper .six-section__row[data-v-a2c0041c],.m-util-wrapper .six-section__row[data-v-a2c0041c],.mdemo-wrapper .six-section__row[data-v-a2c0041c]{margin:0 0 10px;flex-wrap:wrap;justify-content:center;padding:0 16px;width:100%;box-sizing:border-box}.m-example-wrapper .six-section__row .six-section__item[data-v-a2c0041c],.m-feature-wrapper .six-section__row .six-section__item[data-v-a2c0041c],.m-util-wrapper .six-section__row .six-section__item[data-v-a2c0041c],.mdemo-wrapper .six-section__row .six-section__item[data-v-a2c0041c]{align-items:center;background:#fff;border:0 solid #efefef;border-radius:4px;height:72px;display:flex;padding:11px 0 11px 24px;box-sizing:border-box;box-shadow:0 11px 32px 0 rgba(49,188,127,.06),0 4px 10px 0 rgba(49,188,127,.04)}.m-example-wrapper .six-section__row .six-section__icon[data-v-a2c0041c],.m-feature-wrapper .six-section__row .six-section__icon[data-v-a2c0041c],.m-util-wrapper .six-section__row .six-section__icon[data-v-a2c0041c],.mdemo-wrapper .six-section__row .six-section__icon[data-v-a2c0041c]{margin-right:9px}.m-example-wrapper .six-section__row .six-section__list[data-v-a2c0041c],.m-feature-wrapper .six-section__row .six-section__list[data-v-a2c0041c],.m-util-wrapper .six-section__row .six-section__list[data-v-a2c0041c],.mdemo-wrapper .six-section__row .six-section__list[data-v-a2c0041c]{display:flex;flex-direction:column;justify-content:space-between;color:#3a495d;margin-left:10px;font-family:PingFangSC-Medium}.m-example-wrapper .six-section__row .six-section__bold[data-v-a2c0041c],.m-feature-wrapper .six-section__row .six-section__bold[data-v-a2c0041c],.m-util-wrapper .six-section__row .six-section__bold[data-v-a2c0041c],.mdemo-wrapper .six-section__row .six-section__bold[data-v-a2c0041c]{font-size:15px;margin-right:9px;margin-bottom:4px}.m-example-wrapper .six-section__row .six-section__subtitle[data-v-a2c0041c],.m-feature-wrapper .six-section__row .six-section__subtitle[data-v-a2c0041c],.m-util-wrapper .six-section__row .six-section__subtitle[data-v-a2c0041c],.mdemo-wrapper .six-section__row .six-section__subtitle[data-v-a2c0041c]{font-size:13px}.m-example-wrapper .m-example-phone[data-v-a2c0041c],.m-feature-wrapper .m-example-phone[data-v-a2c0041c],.m-util-wrapper .m-example-phone[data-v-a2c0041c],.mdemo-wrapper .m-example-phone[data-v-a2c0041c]{width:100%;display:flex;justify-content:center;position:relative;height:450px;align-items:center}.m-example-wrapper .m-example-phone .m-example-img-contain[data-v-a2c0041c],.m-feature-wrapper .m-example-phone .m-example-img-contain[data-v-a2c0041c],.m-util-wrapper .m-example-phone .m-example-img-contain[data-v-a2c0041c],.mdemo-wrapper .m-example-phone .m-example-img-contain[data-v-a2c0041c]{position:absolute;top:0;left:50%;transform:translate3d(-50%,0,0);width:100%;width:190px;height:390px;background:url(https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png) no-repeat 50%;background-size:contain;padding:12px}.m-feature-wrapper[data-v-a2c0041c]{background:#fff;padding-bottom:50px}.m-example-wrapper[data-v-a2c0041c]{background:#fff}.m-util-wrapper[data-v-a2c0041c]{padding-bottom:20px}[data-v-5724bcdd]::-webkit-scrollbar{display:none}.swiper-container[data-v-5724bcdd]{max-width:1190px;display:flex;margin:0 auto}.swiper-container .swiper-button[data-v-5724bcdd]{width:140px;margin-top:80px;transform:filter .3s}.swiper-container .swiper-img[data-v-5724bcdd]{cursor:pointer}.swiper-container .swiper-disable[data-v-5724bcdd]{cursor:not-allowed;filter:grayscale(100%)}.swiper[data-v-5724bcdd]{flex:1;position:relative;overflow-y:hidden;overflow-x:scroll;white-space:nowrap;height:300px}.swiper .swiper-list[data-v-5724bcdd]{display:inline-block;padding:24px;border-radius:10px;margin-top:20px;position:relative;transition:none 0s ease 0s;transform:scale(1)}.swiper .swiper-list.active[data-v-5724bcdd]{transition:transform .3s;transform:scale(1.5)}.swiper .swiper-item[data-v-5724bcdd]{width:136px;height:136px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer}.swiper-list[data-v-5724bcdd]:first-child{padding-left:50px}.swiper-list[data-v-5724bcdd]:last-child{padding-right:50px}.swiper-img[data-v-60490726]{width:188px;height:408px;height:100%;white-space:nowrap;overflow:hidden;border-radius:20px}.swiper-img .swiper-img__wrap[data-v-60490726]{display:inline-block}.swiper-img .swiper-img__list[data-v-60490726]{transform:translateZ(0);transition:transform .3s}.fade-enter-active[data-v-8bac5638],.fade-leave-active[data-v-8bac5638]{transition:all .3s}.fade-enter[data-v-8bac5638],.fade-leave-to[data-v-8bac5638]{opacity:0}.popover[data-v-8bac5638]{position:relative;display:inline-block}.popover .popover__top[data-v-8bac5638]{position:absolute;width:300px;height:300px;background:#fff;left:-150px;top:-350px;border-radius:4px}.popover .popover__content[data-v-8bac5638]{position:relative;width:100%;height:100%}.popover .popover__arrow[data-v-8bac5638]{position:absolute;left:50%;margin-left:-5px;bottom:-5px;width:6px;height:6px;background:#fff;transform:rotate(45deg);border-bottom:1px solid #ededed;border-right:1px solid #ededed;z-index:6}.popover .popover__inner[data-v-8bac5638]{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;position:relative;z-index:4;background:#fff;border-radius:4px;border:1px solid #ededed}.popover .popover__content[data-v-8bac5638]{display:inline-block}.fade-enter-active[data-v-76bf3aa2],.fade-leave-active[data-v-76bf3aa2]{transition:all .3s}.fade-enter[data-v-76bf3aa2],.fade-leave-to[data-v-76bf3aa2]{opacity:0}.code-list[data-v-76bf3aa2]{margin-top:40px;display:flex}.code-list .code-list__item[data-v-76bf3aa2]{margin-right:62px;width:150px;height:170px;cursor:pointer}.code-list .code-list__inner[data-v-76bf3aa2]{position:relative}.code-list .code-list__big[data-v-76bf3aa2]{position:absolute;left:0;top:0;transform:scale(1.5)}ul li[data-v-2d48710e]{list-style:none}section[data-v-2d48710e]{position:relative;z-index:2}.row[data-v-2d48710e]{display:flex;align-items:center}.header[data-v-2d48710e]{padding:40px 0 0 30px;position:relative}.title[data-v-2d48710e]{font-size:30px;margin-bottom:20px;font-weight:500}.desc[data-v-2d48710e]{font-size:14px;line-height:22px;margin-bottom:40px}.btn[data-v-2d48710e]{width:116px;height:40px;background-image:linear-gradient(-58deg,#50be97 30%,#31bc7f 79%);box-shadow:-3px 12px 35px 0 rgba(49,188,127,.2);border-radius:4px;border:none;font-size:14px}.one-section__content[data-v-2d48710e]{display:flex;justify-content:flex-end}.one-section[data-v-2d48710e]{padding-top:181px;position:relative;display:flex}.one-section__img1[data-v-2d48710e]{position:absolute;top:0;left:45%;width:100%;height:100%;background:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/banner_bg_v3.png) no-repeat 0 0;background-size:auto 680px}.one-section__img2[data-v-2d48710e]{position:absolute;top:20;left:53%;width:100%;height:100%;background:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/banner_pic_v3.png) no-repeat 0 0;background-size:auto 550px}.one-section__inner[data-v-2d48710e]{flex:1}.one-section__title[data-v-2d48710e]{margin-bottom:20px;font-size:40px;font-weight:500;border-bottom:none}.one-section__desc[data-v-2d48710e]{width:450px;line-height:30px;margin-bottom:70px}.one-section__btn[data-v-2d48710e]{width:162px;height:52px;border-radius:4px;border:none;font-size:20px}.one-section__enter[data-v-2d48710e]{background-image:linear-gradient(-58deg,#50be97 30%,#31bc7f 79%);box-shadow:-3px 12px 35px 0 rgba(49,188,127,.2)}.one-section__github[data-v-2d48710e]{margin-left:30px;background:#fff;border:0 solid #efefef;box-shadow:-3px 12px 35px 0 rgba(49,188,127,.2)}.white-link[data-v-2d48710e]{color:#fff}.blue-link[data-v-2d48710e],.white-link[data-v-2d48710e]{font-weight:600;display:flex;align-items:center;justify-content:center}.blue-link[data-v-2d48710e]{color:#31bc7f;width:100%;height:100%}.target-link[data-v-2d48710e]{color:#fff;font-weight:600;text-decoration:underline}.two-section[data-v-2d48710e]{padding-top:240px;display:flex;justify-content:center}.two-section__item[data-v-2d48710e]{width:280px;padding:40px 18px;box-sizing:border-box;background:#fff;border:0 solid #efefef;box-shadow:0 51px 145px 0 rgba(49,188,127,.1),0 11px 32px 0 rgba(49,188,127,.06),0 3px 10px 0 rgba(49,188,127,.04);border-radius:4px;margin:0 10px;text-align:center;list-style:none;position:relative;overflow:hidden}.two-section__item[data-v-2d48710e]:nth-child(2){position:relative;top:54px}.two-section__line[data-v-2d48710e]{height:8px;width:100%;position:absolute;left:0;bottom:0;opacity:.6;background-image:linear-gradient(-58deg,#50be97 30%,#31bc7f 79%)}.two-section__title[data-v-2d48710e]{font-size:20px;margin:33px 0 21px}.two-section__desc[data-v-2d48710e]{font-size:14px;line-height:22px}.three-section[data-v-2d48710e]{margin-top:183px;display:flex;background-repeat:no-repeat;background-size:auto 100%;background-position:50%;height:713px;align-items:center;position:relative}.three-section__inner[data-v-2d48710e]{width:1190px;margin:0 auto;display:flex;align-items:center;box-sizing:border-box;padding:0 40px}.three-section__mvc[data-v-2d48710e]{margin-left:60px}.three-section__todo[data-v-2d48710e]{position:relative}.three-section__phone[data-v-2d48710e]{position:absolute;left:0;top:0}.three-section__iframe[data-v-2d48710e]{position:relative;left:20px;top:20px;border-radius:44px;background:#fff;overflow:hidden;box-shadow:0 80px 252px 0 rgba(49,188,127,.12),0 36px 76px 0 rgba(49,188,127,.08),0 15px 31px 0 rgba(49,188,127,.06),0 5px 11px 0 rgba(49,188,127,.04)}.iframe_wrapper[data-v-2d48710e],.three-section__iframe[data-v-2d48710e]{display:flex;align-items:center;justify-content:center;width:375px;height:672px}.white-text[data-v-2d48710e]{color:#fff}.three-section__btn[data-v-2d48710e]{background:#fff}.section[data-v-2d48710e]{display:flex;align-items:center;height:520px;box-sizing:border-box;margin-top:183px;position:relative;justify-content:center}.grow[data-v-2d48710e]{flex:1}.four-section__bg[data-v-2d48710e]{background-repeat:no-repeat;background-size:auto 600px;height:600px;width:100%;text-align:center;position:absolute;right:50%;background-position:100% 0}.four-section__inner[data-v-2d48710e]{display:flex;width:1190px;align-items:center;padding:0 40px;box-sizing:border-box}.five-section__bg[data-v-2d48710e]{background-repeat:no-repeat;background-size:auto 600px;height:600px;width:100%;text-align:center;position:absolute;left:50%;background-position:0 0}.five-section__inner[data-v-2d48710e]{display:flex;width:1190px;align-items:center;padding:0 40px;box-sizing:border-box}.six-section[data-v-2d48710e]{margin-top:140px;display:flex;align-items:center;justify-content:center;background-repeat:no-repeat;background-size:auto 100%;background-position:50%;height:694px}.six-section__inner[data-v-2d48710e]{margin-bottom:50px}.six-section__item[data-v-2d48710e]{background:#fff;border:0 solid #a4a4a4;border-radius:4px;width:290px;height:80px;display:flex;padding:17px 0 17px 17px;box-sizing:border-box}.six-section__step[data-v-2d48710e]{margin-right:20px}.six-section__row[data-v-2d48710e]{margin-bottom:20px;flex-wrap:wrap;justify-content:center}.six-section__list[data-v-2d48710e]{display:flex;flex-direction:column;justify-content:space-between;font-size:14px;color:#3a495d}.six-section__bold[data-v-2d48710e]{font-size:16px;font-weight:500;white-space:nowrap}.six-section__title[data-v-2d48710e]{margin-bottom:50px;text-align:center;color:#fff}.six-section__icon[data-v-2d48710e]{margin-right:9px}.seven-section[data-v-2d48710e]{margin-top:113px;text-align:center;background:#f5f5f5}.seven-section__center[data-v-2d48710e]{width:402px;height:100%;background-repeat:no-repeat;background-size:contain;background-position:50%;display:flex;justify-content:center;position:relative}.seven-section__inner[data-v-2d48710e]{padding:14px;box-shadow:0 43px 86px 0 rgba(49,188,127,.07),0 7px 21px 0 rgba(49,188,127,.04),0 2px 6px 0 rgba(49,188,127,.03);border-radius:30px}.seven-section__wrap[data-v-2d48710e]{height:433px;margin-top:40px;margin-bottom:40px}.seven-section_phone[data-v-2d48710e]{position:absolute;top:0;left:50%;transform:translate3d(-50%,0,0)}.seven-section__title[data-v-2d48710e]{text-align:right;font-size:20px;font-weight:600}.seven-section__desc[data-v-2d48710e]{margin-top:41px;text-align:left;font-size:14px;line-height:23px}.dot[data-v-2d48710e]{width:100%}.dot-inner[data-v-2d48710e]{background:#31bc7f;border-radius:4px;width:34px;height:10px;display:inline-block}ul li[data-v-f9ca297c]{list-style:none}.footer-container[data-v-f9ca297c]{display:flex;flex-direction:column;justify-content:flex-end;height:466px;background:url(https://dpubstatic.udache.com/static/dpubimg/cSRXkZjG5W/footer_bg.png) no-repeat 50%;background-size:auto 100%;margin-top:60px}.footer[data-v-f9ca297c]{display:flex;text-align:center;max-width:1280px;margin:0 auto;width:100%}.footer__list[data-v-f9ca297c]{margin-bottom:80px;display:flex;flex:1;text-align:left}.footer__wrap[data-v-f9ca297c]{margin-bottom:14px;color:#fff;text-align:left;height:28px;position:relative}.footer__text[data-v-f9ca297c]{font-size:14px;color:#fff;display:inline-block;text-align:left;height:28px}.footer__title[data-v-f9ca297c]{font-size:20px;font-weight:500}.copyright[data-v-f9ca297c]{font-size:12px;color:#fff;background:#3a495d;text-align:center;line-height:30px;padding:10px 0}.grow[data-v-f9ca297c]{flex:1}.footer__img[data-v-f9ca297c]{position:absolute;left:0;top:0;display:none}@media (max-width:750px){.footer__list[data-v-f9ca297c]{margin-bottom:16px}.footer__text[data-v-f9ca297c]{font-size:12px}.footer__title[data-v-f9ca297c]{font-size:12px;color:#979797}.footer__wrap[data-v-f9ca297c]{margin-bottom:0}.footer-container[data-v-f9ca297c]{background:#606d7c;height:auto;margin-top:0}.footer-inner[data-v-f9ca297c]{padding-left:6px}}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#3eaf7c;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #389d70}.home .hero .action-button:hover{background-color:#4abf8a}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#767676}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}.page{padding-bottom:2rem;display:block}.dropdown-enter,.dropdown-leave-to{height:0!important}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.badge[data-v-59f00772]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-59f00772],.badge.tip[data-v-59f00772],.badge[data-v-59f00772]{background-color:#42b983}.badge.error[data-v-59f00772]{background-color:#da5961}.badge.warn[data-v-59f00772],.badge.warning[data-v-59f00772],.badge.yellow[data-v-59f00772]{background-color:#e7c000}.badge+.badge[data-v-59f00772]{margin-left:5px}.theme-code-block[data-v-488b05bd]{display:none}.theme-code-block__active[data-v-488b05bd]{display:block}.theme-code-block>pre[data-v-488b05bd]{background-color:orange}.theme-code-group__nav[data-v-131b8180]{margin-bottom:-35px;background-color:#282c34;padding-bottom:22px;border-top-left-radius:6px;border-top-right-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__ul[data-v-131b8180]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__nav-tab[data-v-131b8180]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:hsla(0,0%,100%,.9);font-weight:600}.theme-code-group__nav-tab-active[data-v-131b8180]{border-bottom:1px solid #42b983}.pre-blank[data-v-131b8180]{color:#42b983}.swiper-item[data-v-f19c6420]{width:100%}img[data-v-f19c6420]{display:block;width:100%;height:100%}#api-index[data-v-a2f64316]{max-width:1024px;margin:0 auto;padding:64px 32px}a[data-v-a2f64316]{text-decoration:none}h1[data-v-a2f64316],h2[data-v-a2f64316],h3[data-v-a2f64316]{font-weight:600;line-height:1}h1[data-v-a2f64316],h2[data-v-a2f64316]{letter-spacing:-.02em}h1[data-v-a2f64316]{font-size:38px}ul[data-v-a2f64316]{list-style:none;margin:0;padding:0}h2[data-v-a2f64316]{font-size:24px;color:var(--vt-c-text-1);margin:36px 0;transition:color .5s;padding-top:36px;border-top:1px solid var(--vt-c-divider-light);border-bottom:none}h3[data-v-a2f64316]{letter-spacing:-.01em;color:var(--vt-c-green);font-size:18px;margin-bottom:1em;transition:color .5s}.api-section[data-v-a2f64316]{margin-bottom:64px}.api-groups a[data-v-a2f64316]{font-size:15px;font-weight:500;line-height:2;color:var(--vt-c-text-code);transition:color .5s}.dark api-groups a[data-v-a2f64316]{font-weight:400}.api-groups a[data-v-a2f64316]:hover{color:var(--vt-c-green);transition:none}.api-group[data-v-a2f64316]{-moz-column-break-inside:avoid;break-inside:avoid;overflow:auto;margin-bottom:20px;background-color:var(--vt-c-bg-soft);border-radius:8px;padding:28px 26px;transition:background-color .5s}.header[data-v-a2f64316]{display:flex;align-items:center;justify-content:space-between}.api-filter[data-v-a2f64316]{display:flex;align-items:center;justify-content:flex-start;gap:1rem}.api-filter input[data-v-a2f64316]{border:1px solid var(--vt-c-divider);border-radius:8px;padding:6px 12px}.api-filter[data-v-a2f64316]:focus{border-color:var(--vt-c-green-light)}.no-match[data-v-a2f64316]{font-size:1.2em;color:var(--vt-c-text-3);text-align:center;margin-top:36px;padding-top:36px;border-top:1px solid var(--vt-c-divider-light)}@media (max-width:768px){#api-index[data-v-a2f64316]{padding:42px 24px}h1[data-v-a2f64316]{font-size:32px;margin-bottom:24px}h2[data-v-a2f64316]{font-size:22px;margin:42px 0 32px;padding-top:32px}.api-groups a[data-v-a2f64316]{font-size:14px}.header[data-v-a2f64316]{display:block}}@media (min-width:768px){.api-groups[data-v-a2f64316]{-moz-columns:2;column-count:2}}@media (min-width:1024px){.api-groups[data-v-a2f64316]{-moz-columns:3;column-count:3}}.sw-update-popup[data-v-613ca22e]{position:fixed;right:1em;bottom:1em;padding:1em;border:1px solid #3eaf7c;border-radius:3px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.5);text-align:center;z-index:3}.sw-update-popup>button[data-v-613ca22e]{margin-top:.5em;padding:.25em 2em}.sw-update-popup-enter-active[data-v-613ca22e],.sw-update-popup-leave-active[data-v-613ca22e]{transition:opacity .3s,transform .3s}.sw-update-popup-enter[data-v-613ca22e],.sw-update-popup-leave-to[data-v-613ca22e]{opacity:0;transform:translateY(50%) scale(.5)}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#3eaf7c;border-left-color:#3eaf7c}.sidebar-heading.clickable:hover{color:#3eaf7c}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#3eaf7c}a.sidebar-link.active{font-weight:600;color:#3eaf7c;border-left-color:#3eaf7c}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title,.dropdown-wrapper .mobile-dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50}.dropdown-wrapper .dropdown-title:hover,.dropdown-wrapper .mobile-dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow,.dropdown-wrapper .mobile-dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .mobile-dropdown-title{display:none;font-weight:600}.dropdown-wrapper .mobile-dropdown-title font-size inherit:hover{color:#3eaf7c}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:1rem 1.5rem .45rem 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#3eaf7c}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #3eaf7c;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{display:none}.dropdown-wrapper .mobile-dropdown-title{display:block}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid;border-color:#ddd #ddd #ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#3eaf7c}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #46bd87}}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar>.sidebar-links{padding:1rem 0}}.test{width:200px;height:200px;background:red}
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/img/search.83621669.svg b/docs-vuepress/.vuepress/dist/assets/img/search.83621669.svg
deleted file mode 100644
index 03d83913e8..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/img/search.83621669.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
diff --git a/docs-vuepress/.vuepress/dist/assets/img/start-tips1.3b76ac97.png b/docs-vuepress/.vuepress/dist/assets/img/start-tips1.3b76ac97.png
deleted file mode 100644
index 6b037f53b8e4129bed96e17654b47caaca1a6979..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 39681
zcmeFZXFycTvM{>HIS0ugSu#qJC?HvK&XPfL&J3uaWB~yI0VN|zat6scCk4qOISg@t
zVdfj%ce~x^-gEB#-uvE<_ulEDXKK~zuCA&MtGcQe@XzoSfKXXpNghB#0suwC2Y{~v
z59ItDYym)372p5>024rZ;Q*i_AVd*>3XuT-`5p3~804ULD1X98>_2Y8_W=<Ndsi=4
zPkUE4hI>4GfQXEeD(Vjki1ZU?`3VwE)5d&>2dYrFL$TiML1aSUYq+OMva;qHTI%vj
zkK}$bh5OCI&CLm!5CEKAygalNWEcz#jTkW25ZoXG*Z>;9Xkq2)Cat0I=m*U|e}B^d
z^>se`lXqZ>`v<LG=>Hi&WNqVVg%Dl?QQXqn)5;kE*C6tsm79kb0HA~-@Jzm5Za?5W
z1Wf9IU=RT}{DAHLfQNs;mVdx2Kg;N7$s)>}BGij(Vc}s10JsP=z~EzLhoFPYfPnd2
ztQ}ks@Q-#St?VtV5%4Pn%;oIt`U7r3!0eX4(Xsmtwy?1LMbpB<?ic)rEQp$jh95e3
zx;a_+|GfA=`Q_~7jnLQ6#Dw_9wf9ieLj02d(3_*H$}iZ(Qce9&yaPg_KVf@sMcqGP
zD^FR3F8`=&ZShd$PuRst?MHwAq-pCQuk<JE;H9MVC+y*>^^3lZr=0emcnc2%^dEJ-
z9d)JugzasVe$foD*U|qI@8h7S_9yJ=sQrtF0DIYAcn@!_Up(7-$p4bj*%MLoKiaZ)
zQ2JHg%U%aD*Z$z&%Hl8HY&;Eq@nCK9Q0~t%HZHoq_;>S?`9<H&>F2orsRtV;g<p72
zAMIaty*zY&;oZD6e(C3lh4PQF^|LPU5Rd~NAwCR%25=Yg;Rl3&tOi~-eu(i10J5%b
z{vHl?_FfFqh#6$VpyXo3!^Loyk6#1;e$2-oWdPvh^UryPM2`6v&I-ZDT}#BxvA=Ln
zq5z<o3;+m4{=(hC003eHzLUku+r#H4xu44lVuoV_1OO>O3D5yd06V~q;7$k-10Ena
zRtD4o9l#JU1FQghz!~rWe1RY!42S@tfmc8>kPc)6xj+$622=s{Knu_T^a4Y`I4}b&
z04u--unQak=fE`*5)uXy9uf%>B@#Un3lb;NT_h1CNhCR>M@U*ohDeW*?2ufLype*C
zo*_jeB_gFGy+<lWszho;>OdMmnn3!3w2HKibc}R`jDn1dOo~j4%!<s5EP^bJtb(kA
zY>I4$?2a6O{2VzB`3-Uoaw&2hatHDd@(l6{@-Ffj3V?!xLXL79g&Rc#MHWRJ#R$a~
z#RDY-B?=`4B?qM(r3s}EWeQ~lWe?>N6&;lXl>wC-RSZ=TRTtF?)g3hiH3l^uwFtEi
zwHtK`brtmp6^4d~MuWzQCW@wnW`Jgg=8G1AmV#D*R*TkyHiNc-c8-pYPL9roE{v{-
zZixN_JrF$xJrlhG{S*2G`a1d<1_lNt1}BCDhB}4?h8IQzMjA#bMmxqN#s&ri69<zX
z^Dd@5rV*wK=2OfR%nz7tn3I^BnAcc@SS(ngSn62TSpHb?Sb11YSYuclSl8G@*lgGm
z*gDuxu*0z5V3%X}V1LCv!NI{{#JP{7iQ|A1it`5NBThfgD$XS?F)jzLEUpQzH*Oqm
zA?_#KFSsXoczCRM5Acleyzt`iit)Pemhd3>B=|h|O8D0JAp8vcI{Zoe0|G1p76NGk
zGlBqu6oP7kF@ilpEJ9X7SwaiK5W)<?M#4G5Ga?cqej;@uXQCLQ4@3h*Tf`W|ti*D}
z*2K?=bBVi%*GW)Fm`G$vtVo`b<dO7{Y>=XpvXLs0J|T@JEh8NzJt89}6Cl$g^CQb3
zYb9GDM<Hh=S0Z;Jk0-AppC!M#MSDy7md&lmTjjSVZ(UGOQ#_!sp@^cWpqQb!qGX_y
zqjaQ9psc4{q(Y_QpwguBrOKk}q1vM+r52;MqK=}jqMoNgrs1H`q6wtQr5UC<qot!&
zpmn27qwS*Iqa&w#K=*|1HC-FsHa!WwB)tRuYx;Kj9R@N6X$B{THw@hjN4IHiE8h0L
z{r>jo?Q2FhMqS3Ij1`QFOxR2!Otws~nL3${nCY2SnS+>1nCDrrSVUOtSyEa0ST0!E
zSoK+7u-3C~u~D!ou?4V|uzh96W0zugXU}1uzJq>8<c{N=%sb;8$Q*(k_8b`;W1PsG
zLYxkqnVb_`Xk7QXT)1+$=D2aWrMZ2$OSo5g$ax;|Jmsn9IpAgHHR4U+?c;^<3GzAd
z<?$`>6Z0$cKjm-YKfcRx*XnM@-RXOH_vG(^?ls&43vde92xJL-79<f=6?`GsDR?6!
zEaV|nF0?JoEc{sbt?--(sfdP1j7a}|wEHsmLHAqkUy2HedWlwv9*S{`If{J{+Y)CJ
zw-L`1UzcE%u#k8!u_DPJ`B?Iu<cid7DGR9_skH}853C;)JlK@JBmG3WRQf=MPsT&0
zR^~!hR5n=l(?gVp3J;?mj>-|s>B^<cEy**=+sT*6A1Meb1S)(|L{n5zOi-LtqE)g|
zDpopD7FG^c?pDE7(N;-US$o9s$m3CyDzd7wYLe<#H5N4&wR&|xT}eGjeNlr=!(F3U
z6J1k7Geh&c7Qa@IR-ZPBwz>8P?Q<O&op_xEU3Oh>-A+9MJrliRy$k(^`ic502D}Er
z21ABah7N`eMi@qVMg>M^#&X8V#v3MrCJ`pHrfjBurUPbFW=>|U<^<*z=GBkU9_v5;
z@EB^LZjobgW~pTP*7C?o)+*I%*ZP6=YwK+r37bTlO<M`uMB6Pp3A-e_ZF?#E6#G2~
zS%-87@Ds%+*-tJU)g22R;ZFKa70#H>kDVJ`h+Q0Ax?Sm9{ah#9INc)LR@_D1liiOz
zR6GhikvvU38@xynhR?7!yLY(vs*j{kh7ZJ7&$rr-$j`-Z*q_5c(tk5RJ|I63HP9-s
zGw60uSkP*)bnyESq!7!HP7o95IcOtPA+#tAJIpa`<SF0N#HXjv^q)07r+ps!d_7zt
zyd(lY!Xskth1iSim#8ltUXDiIi%g4zMOjA;M)O6dL_=e&Vg_URW8cKW<80$b<Avh0
zUZKBoc{Q6Ll~9yOlo*h>o}`*o_nP5#)a%n^^W=dPft2i2>{Rd6l{b&xG^8=7y-I_o
z+o#WD$YfN!rFk3q_9D|db295eR(UpUc69dDJBN3l-z&VY%VEt)$wklg$^D+Em)Dms
zl3!dvRS;cpQ|MB-QlwSXT`XK&{DI~}d<k-icgc3CN$Ggm!?K2Q?(+8)<Q35$fsfuF
zcPbxO&Q_^Zbyka1m)Ee=ysagvjjBVc^RGLqx36DmFl?A;RBr5S5^Jh$=4mc$x!sb{
zO4b_RhTZnO4c;Eme)h@j(_V*N$9kuE=R%i3*L1gL_h^qwPk*m`Z&#mmUwgkqf6IXA
zK;xjuVEvHLP~EWLaP5fTNbRW5Xx*6bSi|`J@ums!iMC0p$&RUqQ@ztl(?c_AGZVAA
zv!CZo=2kvif8P4y^aVWcGk?7h`W5YK)FR<x$`Z{|&hnk*iWQ-i*42lr!)w}W3+q<v
zyWc#&K{uX%$NQeLNxxaVb$6>}TYh_d$9QLB*KPNDFJhl)|Lp<$LCxWV!{H-?qYbbJ
z7=9dcLU~enDsb9)rg64(?tFfI5e1=y6kUp3_Fd^;ZC?9AF`#d5?%XuNRA67>&TzP!
zg@?sYTL1;|jckk9l^hoW0G=TLkc<NWw(%eK^3M`Tf7tj4_{TowNB)ui0sh0L{&`0T
z017_=fF9yP`vCyFMZj#K2%7})tAV)Ic>o~ayZ0*te<V-adv||ANI3NXfR+M>pCIf+
zj5`2uGY5xX*TdmA1qi!-9soX_|6!;9C{0)j0Pp7b)%0a%Y8Cz<^xHT56F`KC#Eu+<
zg2V_Q6Ct4xA;G%=dIaxi2*U)C{w#}xjDm`Wj)94Vje{sqO9&t%p`ak6qM)Ju*jyn6
zBklvJL}<jf`K8fGG%YX~-AV6;CA`OElBw(<)0#M9zGvz26bqaD76m003o9G@9S#9O
zAz_jGqOuR=<P{W^l(ltq_4E-YnU%GTt)0EY6HhO1A74NJfM?IcBVN3Wj7m&;ot%>T
zCM`WDH!r`Su&DS$Rdr2mU427iQ)gFqPj6rUz~JQ6^vvws=P&cCYwO=OzHe@A?|_d_
zPS4ISAeUD^<U#^a{t)YzWd9%+5kf9xR8$mHj306#A^RdS3K1&WZGLoOX-y0ZcM`_C
zVVI;c3GXXAu$b;?9g$gjOkk5U3#_t$e~9)|vj3T2Pya7T_Dit8<XQk^0py<v1sNFy
z4Fv@S4IK@U&@mC#7CJg6Hs;TS{T~VUXTtxH2!16vf(R0V1}Z8l2I7wp2MdSre>=e!
z5mqxhd>+6>L2QtTP>292;6@9Q3C3!{T8)?~TQ@A<Om^O%7#p;4Gv<zS`%v09M|K>S
z3BFh}jmzP!s70N24jY=UA(9Udd~U7l7L0RGe|(uZh$qN%wK`vpA!-LpZ*4K-AX4M*
zYUL<)H9>EiWhF#xePQUZa><b8IqGV;k^Q2~1$$A?!0BLFkWcX0p(}mKa_UffHk6iN
zs~x+22DJB~eZFmMesMW#ZlkK6<?Qh2dhU`wa9i}Ot~%dv=iK=X@B28v0ob<>lptA?
z-uG+V%4^>Z_6n~B_!{FmJ`4{R;)XnaK)If;kT2_+yX_MomrZEUMMD(-FjA&si<8ce
zhap`rf>-j6NdxvEr3%f*E<(&P3CG>lKpy9@%~Ex?n$#+Y%YMire)Ge*gYRjju5XnX
z)cI-fnqL!QGPu7|+}<^r>j6cwtu8;eo?VHwYfjgxtCN?yliVd_OtY$M7$>@xUC<|>
zj~D2cBlM+`kmeN@YN7(A2(1L?Ye?ZL0mQ(JG?@JULt%}<RPuvmFXhm3YMRyLH1*lW
z%B88#W1pdV<CjaUSDWYFpglOS?$M?WHdZ}7Z9HB|x>gC&telZM&j*p`J2dk?nFY(|
z2R`@GSh;esy{H&BWiqdut;yiF9jJB%q52Xf-3;i6!Xny5PM1To2@eHt+kx!pvYm_x
zJf`{>!w)nyqm#B9_1eIb4D}OUCERpFj7y!ED=`7g%0wV(GYq_7*X668{i%#V=vcov
zAsjIDcb8gdf!3R}O|7-n*PhianKor^E=X)$+qHURJ4x0Af4rKTp>NGJ|2u9RL;rj%
zK=R9>N#O!P89kyP(#%cuQhZ(D+@15TT?GUZ@CG?u<nCvk4I*evAdnAe|4rooIi2iw
ziW`EZ)`XHlYZ>u)_5rrJc@R~i1IdYC?%L_Dy&;b^7D6TZMJMFZ`@3doi0&|x_CBhA
zFbCDH*j?fZUG69zavA@`Q%+7o%ExSDSFdMaJrp5g6BJ|j4%sG{%jCZIcd;!=L8w&v
z_8#+$ct%E`O>?7ulxfPx8su++-S2TVQ7HR)R`^lxFcaRdAc2C8da}dL#)u(ihP<vd
zMdREx=lTgEiEcqJ5=pR!ZwJvR-m>UGsx}#|Kbk)@oou^pKWW<MKoFfDwr|9E`CQro
zmGe9Mm%cOtITxKXj6%WuAbv2D1B@Y6D`Ij?YlfS<bj@|&R9%<F;?-c!W*hSdVzvHB
zt_tR6mrwP!%W^lMt`Jt29f@VA@EL?|fS@-X(?Mw7COfM3wW{*>r6t2fuJW?g=zWYQ
z0=tZj)rQp1jbCUlFh4Wam%1g6W%uDplf-OkrHQ>}O?^-9YdNP6QE;Fo!!9MSq*%k4
zdvx5*{bVjql4!T-FiKpyXnWbNbqcCgx3<CKEulQX!2j^0<gPKBV);a_hD@`(=PPpu
zik%?YqXmt*mV4{Ys7rFLY%gos1#uL#88DsS*I-t?{=9zInC7)}hayKu6OPWp33TqV
ze$%qiTlva9Ai2Fa`$avK-1i1=E41=#0X~!Hmu&Uvlst-rkqjw<$q&OLI<@hpX>=-s
zERJZ}=$pX8=kKEi2i+a-4xxfg^1G~@SZ5VyLHrkY9ugfqme!CaTcuL(q9<}{YMo}R
zscvnY7BC$3mQc|1sh>Ou?|RYLHZU;sa)MDKZ{zLe##WHriaO!q?yV)33EP@mU`O)w
z*0<WJM9Pn=$UPLqI8tN=jU9`E3mq7aYrZ8aUBajwA?*#C`t615<=F{4c;J%Nt%>#7
zIUNVal#S9^(z=Ggv6`F%zu25!7nBds;R5jw&_0y(#OrmoP%eQ?VPj{VMWZL+0q)|O
zr-1{^Q8fM)8^(RiVOIV4Jr86aSYq|~xkk2Ntiu5^lWj?kY1pUq-VBMAYqFI0!G+z<
zE{QDI-Z+nwYCc%v8gvtdv1^B(>7A_lMlu|Yh81q>8M(Jlg<tniJW0=gKCTkXmOg@a
zB{0?B+&)`c5@~>O$wyq6zkF7BwsDzk;}z^!xSJwc8(vpjV8Sw!|J6a@Zf{4T;#U_v
zEfI!iubv>*%H7c*fu{1b)qP>LIo|e~Giqb|+=ixklCfk`j3oQ*hHq<iu+PB`gLC6A
zTLnei>jEbbOXr5<=V1G5i?h6YC5WY#-sz%Td;i63d>y?Jumk&YsDL2*8gV-pfeih}
zI`8l+_OnidtCt$p5#@gnLV=HOfL0sZ1VCeLNpK)^5(M6n`iE=Cn#hvA!MfIHH-Mp~
z>WIV1E@_<VkVpH_nj_x1n+AqL_q}<8f_q{(pJ|sK;^G=he{z@y2UY~Kp#ky#aNVYH
zd|Gk2Ds=-hhY2gB=7Ywt;K1QA8~`^(cU9`AdhWo1f2i`mL4p^*!{1l30uDrchfKf$
z$t!gjiV_^?EBa5Ek_`f0WjK&U0tc2i5KmSw{{VgHQ8o+?@WKJ=oTI&4|7PXiTKQx2
z{C{t(s2|tl!U3)VI@pu!n*xs3o~Tm!?=#TPbJSrJUSp5q{4VI@L<;E?#?`bAg5BW&
z-Uv7s7JQlwMMta=@jAXz_3FKEg39Wyl$M&~obz`Z;xG62&1t6f7a8C{Ip|tUs{}RW
zC6iEaIHK+{xB?bj6Awj8Mby>&M}&UQw4O;(xot3lq5r<9=HRomY<oD+<qLI$1KG|@
zZ~(~$F@2{&|A?6Zdy{&+`))Tcb+iZvsNlfnf+8IFWC((s(f=n*kf|I^(fzdZc&IR_
zxBc>bQtF7@944Xg_e=9znhG5F|K{}HI{j~l^uNdHA2SL*0ePlOA$*UZm6W-n(pE<*
zm+C6FJBu027S^It;K$S<YJGQ0tIK&q?%ewI6GW8y;6Nu)iJ68d#x6f7+rlm7BwJWg
z=YuAA4x@d=4TODqBfO^HZI0)llDlm*T)DksDUSLI?Nq^rEB7-|yz)+Y=BVGj@|h5N
zh>8ZJx(p&OVdKTAxZvF^AY)MPgbyaRR&7?g?V0svHwH3V;%ebg^mV}@RsMXIjgw}d
z{<XCx)L2*uX@Asxj+V0l+!x0c<Ze}HwzS<zPb7ou>+Ali@@wxqRIboqIH29j|CR98
z$S%>xoG5leO*vBFf0}g{#a)`?NG@z8jf3f*L3dKklD+KIWj&<^?qCecUPLlczud#n
z+yPO!tF{80A2<(Qf##%cGCvqaUFXrCjlluCCp#sT{1WObyy0H-R6&}PEn;hq=5-Ep
zoNm_9fqe~mJVPh)gI%a79Tk>ff{qcU9?9F2;@qocC~8M(ndP=w=Xe%pCdLaz+--~@
zGFTLwiEfH0f+u#NEv_G+Vqm$#XfK0zS;xbQL_B2aOy6(IzKVH~>wbdoIQ|ZDQnr0{
zkiEu@(G@@*>1%m>OGwC>uu)0hu}{+4vOi#jP<m4^T-DiSId(82weeK{nIu(^ggF7^
z!PYZ1u=+wRt&C86V|60`T{&0IaKE%?c;SBE;-2d#OCK3`hA=@utERGD=~WdkTV#XI
zJB;o;e{>xIY3!FqK47_Ax`mQtvJ)~%$5|IF=v77_KUG!}9eKcAw!fbj$Kv=hiw%`4
zmkHlkoOTi1<1tUrn@#5D*(GE~F}3fcyq%iuQqz=3?pWd<{lYoE-DP&efb71O!lbh=
zNPW!w)8sa5YW6pT)k?cDws&ITW(mT9G;y0z2>N+BOSknO36`FS#Ct?|uxRvAqT1C5
z`MY*kpl#8i&VoLA#S;~@`??(W_%YS_kuMo6APL`Rl<^-hL!v0()V;}R(GQx<{&FRs
znwMwvJRrZ*=+jnxsypA~6WCEAB6^NWb5TJySDR5m<QNdq9#E7@6?6PmvGOUQc&R}+
zY9hKiCEKnNTRt2pyR{4Yq_r`-JX>*Ezh*t>xIThBBt2^x%=~dm(AckHZ&LR9^GXAy
z0YVH1OwQ~zKx8%CUAMAgHx<S*>vA@t`pm?%?K`$mPFQCSubhqs*@G1T%@CsmN__O<
zMUbicS`8SlaDML5_`xA}-y85=7I!oKH=EIW<KF_Jc2{mPy{=<L(c*gvV?9pfsJ>DK
z8a6EAj|`Xbd6Yc+w377HC(Mk0C7a%n4mn9LNg)C&uF{GpTR5w9!7_t7%Gst1*G)~K
z)>|XU39Q>zX;+q?pODoj59^Y<!`kIsQ+`fo8#GM!4q-9a7UTqrfsV~@inixr7a*7d
z9H<k^)IN7lQa%!p<V`idJHY)~zf+{tCS}ekyW>31R%87pU-NLO9I<(*7WbKQOc#2#
z_F2#rB=b}(tu$ot==&W$g+rCQ7#-IwXOv9h9zM%87%%r*?!qW*CcPGJdpp(n3hNyS
zcnrBtR7I_E@7+tq#5&(KP3?}Kmp{>(sr}r7W9Q)L`k@b3YTkBXXxa!>ZrJJi<tOJ)
z#P{myLSKk2tJcDSu$zE5@*S}rsj7n3clP?};Spu$*Eb@c*uqM`)rYs7<6K9-u&ml=
z`@ZUa_DQ@jS`yb!y;J^By%l_xHY<?EodO#v%af%V)prkz4uSR-dU6zrQ0#^oX0brP
zYrMptM-#WMbhC;Bzh#su<2acPK4y5oG~7Xe!t#Kv?vA)Ic)44WcY@bzXoN|nws|In
zrM>;>vhz&;3u<A0OAM5^1O*smycvaOZ~z6&A>InAfJlYyr?+>GA^Djbfw^D2fQ@{>
z4C3X!mJLK5o!ukD9w7}+#baI5r@RwGSGzd@8x`AMpUmhX<c+qOlB!KrzP`7A%%54X
z=`(&)Sr6_L9NLkhZ_zK#>kZ~rQHjpvP^EKxxsqU;GXEf#r_<z?YWtmDboHUBTTC}O
zP&>M)I>s(F(GLcQ{w^<n%zEj}9~*YzJl3`xWS7pGnb}@u1G8sX|1s>DVCqN0|C8aT
zTigC+R+V7&3NmZzH^yYZ0*T_Jw65h?mo%TBNRy2}Pf%zNSX+U7St|*)95Yr?VUmc8
zy@`m@QjJ(}Fx?X$zI-DgjRPBb0_wa0bA=E#9OcI)6&PeJsDJ!wy6|aYhzpg_BMPQ>
zKE^{Luv2*G0d1$B>@0Nk&Dgx)o!t!Alp}jc1*5NhdTlo4RGu0ne2cGlH}P)y3Q@w-
zy97_Jr+THT37)Y`oFT1>Db;-0pWjZ|@h^8t9jr=}OS<hmOXhnVH$LT_(5qN6_A);O
zOUsWoH&F<;G%rFAgW>6YRJw@PKGmD|Fb0QoiMm))9})#er}IdG*%FqqWQNBpqkY3e
zu9k`x7jgXh`&6;1TXuUDVneQaZj$IVQ3vPH*3w(9c)0^qCa)NmXaO!2b{dkedYP~=
z+I5pB0SiX<DRocTD<5au>-!56b@t1<;VW5;yPF6`6iU8LbwDn`={Lgoiq%<(tJpyU
z&7G|ga3xaBGyZC*<cM~bKcMGlr^nfPuQp68k0?>}n1kh;<E{7OQct-{;XsYejJGse
zZP+uXgif0iy;YUlIE{)TC=91(XPY&&#N4Lk-<z7qeNy=StA;-Ie<H_5e#gX|C>D08
z{e+HdMv&cgrODuYhXAK;hUsxAVN@s$8nBKbs4h3hBcNo<-$UCi%>Sk!;;|v~qi4^a
zVlu=$#g}7o^AQjv!2e>reIc5aUCg~lSc9E!#jc)3vl=GF$up`T5itAy$R@dQ`rCA^
ztSfr@_#K<jev{FR2vWXYQIFu84^@!)bzvf<0z-+sUE*j@YRsvD(N3X{mLXP&N@D@J
zMUV>3=_yU6^+@?b=DSLjit`qz>}F~h;+vAwwR2bdZ~!%c8tjL^w07L}sD65A$xJ4d
zCrj2+#7K(oZG>3HM~(Yqnv-SfN2|`Bp1ws&uGV$OCbv>%5;ZqObML&YQ&>V%Q<PkE
zOjRe}ao?$%ugWvCsljpnSj^v|oWZw}<;!bAv>%n?N<KQF?rLY@V1w3;=c2`Iaomi-
z-B4-yMKiWLR219gVrmSAvBf?=e@TlL|J;k+<v?4b&7sVCDt4o$1P7&NbMsEi<M;Hw
z%v9gJ@Q4KWA3HdBFvuGkDEF%q6+0zkh=(1<2Q)gbU0?g}=R5kb8VBC9+UPIUT)jWK
z$9I3Th%sYT^~s#v+?;MxjK6Xc5Y?Q@OU)5OGWadje_Or@3I{ZsjjxV{%7O^&iU#a>
zGD@(V%44>s#L=jP!^AtWU6`MW5`yq&Q0Yh}Y{GeMW@GeHwKD?kgt}{D-m8#nzyZdm
zpX`{k8j1+wc-I46KYm#->~N|^i(s*!beOVg93p3<z5nS$x<b@}Kne55#L@XHcAI-L
zJVbALZUe;425xS5@fAohcgliDik9YObHqAmUM(-mF_nttAyahm<Ku6l22X$5Y|p!8
zj<1?}WixZKuswt_e5~p;G2BeUy3AbXp@K{Mnd$8`MsEc|%`Bw_yBdKR(HRv&e2kI-
z&+U&0hA}ZD_~)xhdOc<N$>*Kl3dNGhvQ+ghnM8H-FR8dP6Jm-r>}yw?ZNqE=+vkc4
z30{bEHK~<(dCPh|j>CvBSam9V^SO)X2!-T0VHATQD|u6Ju04jww0vrh{OQsGY3L`W
z$1f{0`}J|D-Ne5oWu5hF>yv!^vDSo>YCb^wEz`p%Av~qh-ri11b!ls3rZM`Lx&fTi
zA|v$s!TK<e9UN$ng$aNhciK;`rEZ|E;L@EthWL9Eu(=t~<~isZvb?Tv-c|w!q^c2a
zv0lWsc{C@Qp;-V_duD!llMRCjLndx2KEQ!7L@??C+}>MVl+(}iFQ~Iu;Z!SJo9iOB
z>R%9UzI9M6{rpu06o#;2LDW!3(I~E`|2JAM_Sbq7(?O7ezxY|qb2}@oXzRaeF8?Xk
zL4k^+{k%i|<D!>1_xM);4CZX*`?7Bu|0Y)aZ|V|MvuCYK+dp8k&yS3165$x^dWtFj
zRDy%!U$b7~?CcrnPMiN$UHpVkCr*%SukW2MC3Cj4lDn%!-m%f5{P+k7;!uok^6QnS
z1PsrnsSxz)|2Y?#a^%uJ2*<}?eV6+;z1nHYy)sRg`c1p`zxAr&w5Ihf+pw8hEk0LU
zsq=~U-lFPzm3AzVJL;?%a^z&4Ic?h*H=c0d%Y1%OMUylfFo6T-KBYT*I?AM)a*s9s
z+S)ii<Swg$9DJ)cevx8Gf^Wc%Sp*6#9$4IcKq;V?y|543qIQJ?!Kw(aEBkeD#SMxx
zqT`F(AsZ<7*vq8q=i$J(&@${Q0}jM#o?n|^p)VkYnl=bL2n^@cz?KnSod*k`>m66v
zeTBahL%AC@^*4g_t_Yj!opbxmnJ^rnd51g5slI>Seu`HQ2igh{KB3paZF8`&I>bnw
zUWR&v{=ckweY!xFj}coA<F1K@8nIJWm_-WE8aQA-*<kSLKPyUX`=iyDf-zW(z^CDy
z@*P42S1&D^=U#Dg7>TGaX>c!k-F1oxHT5dET)lQvtEaiY)i%Ua=O$x|ezUeQK)#D9
zrCjp2mE`ZM$`pjBt@!4x7cb`SJbf$!IFJ0;VFHKTfd^Ci7BncRQ$||$0J9?bgH1z&
zBHb5en+UDaEsAj4NBhiP%q}9Q17{V=?oE{gw`{#(l9fkhnQM3UTd;~$i?*NT4rjQ1
z+0bp^$*m?c?<=l8YVYJ-&!*d2qQW-fES?@!uxGm5kX&YG+KpOqR8g4~495SqWM4nE
zeSsTGnYg4EIVikj+ArO4AU4yppk-b0{(Nqqq+lB+d{mYiD^L=R)A8;JLE+F%wn!%V
zpdFpU8~uZZ&W!-%J~FnbHXNvUSc`eSA;joJNtHl7?rK3dFfEJnYxz2H2{hcV<1*S#
zLZl+HRPe^}QBAg5WqTG5XMudyB8zu~<qOX5jIYX`O)*6sw77zOdtkydygcRQ-)pB1
znWOZk*0W@v(6Q)ZScrTpVp~q{C7rKoL%2VAXZL1Cgnil(OKi%E=_`ak5)Qo3GV?2Z
zP=B<s6i%LGgSXgL%`#kp(j01tJaAo=`^uxI!R4(k0euiD#G%lBel|77VNPhiAmLmZ
zZ7^d_81EiCr`Ql-t?8G}8t2e})A<l<@Mcf;Ex%*fm2vYxnZWLO?6P{4KVFgjgbrbh
z`{?4bnPXZzxIM<(l!ul?dydzolpDO!!QCBCwSV1y$0?|_RZORsxT+b}UY@~!!g2#L
zKO!iFF+r)1cp_IM9JQ(@A~K8ZJq_jQ#7Y{WV-gdlHun^09=R=AtoSm$FD!<NL+pIP
z0a6i?^hdejQ__ts4M|#Qs1uh+(AH*ajt_=v`aJ$L*q5G~;LX^xKy9lJkY^grbvAPL
z`Ax~|7L;E@i=Ai-6B0VU7ga<BJ!%>UGt893f!Z*PeOq5)8ob<#w8aa*-Kn@_&1XB;
zFqO0EG$muX8*^xlWPb}p@Msn4ykc-mS!kB-cKtNn&itK&mMUkfMQSD!%uS59nV(Sl
zD85Y|^>vPgOA+2aDrhdWKiQg{tJ>jLx2<=*XG$$N2psm?_Np!BQleB=ytV@`#~xHX
zo^}zJEmHD!{7zxx*r?L82`c@(P}K|vqAA7#MxS+OG1f-RF3ssQMQ~zKIeIBA>QNdW
zia(~|r2F<bos_l=v~zek?vc0`Y`O{u!n3f!sZl`!^;tyI;<OF{sbhkrbNJg{&TTsn
zC;8vf9UkMxH}9IT^)91An54&RxIvwI9@|OgO5*nx_F9h#QbP1&53S;40{OPbXmGPB
zr&}D?@vOA#XKN)~j=#gEZXO+qr7^+*_v&OQzi#azsb5l$FqZF{s@kS@I)5$In%=9T
zQ`7F1;5&i$9V*Ulg1a`2wnC!(^gENrjuzA)HZ;wGI3pDPl`jpw&LgfgjK1BEzewd{
z6Z0)!-?~rF8!~nk;6Pu4mz7KtVN;b3BlBoh!CXt0b>4q#M_ba*9m42$-uEb4t_n=|
z-qi|Syuqp|nMmku=sUho7_TsZS!KWM?gU4LZuckk4ki4|OI!y$Se!LU>|)0XsGA9T
zNt+&rpgz~;tK&hVu2<J^pgRB)lD*1Jq7Ft|{5oFolIf{qtKI|`FY4Vp$efQ$BJ`N?
zy0e1a!$!@6gdzU#9AWe`(0hd=`ODjFEH%})^)6S_rT7Rk57y;~eQy@Xm<l`-z-DFZ
z^tX1G)XxtZgNts`p7oq(q}d*S1`!`xJv-p&&0Sxn-Z?fL`QUhQq2;hw;WTN|KY~-C
zAY;tYb={R6knZ)>$gveMp^u>|B`nNyUUQo;P}tc)+0n%(bD|2t>l-GS^aY)%mPcHL
zua^0Qhq&5Xxf=}`DVbxV6ajC+?Dh7DY-}jE#XG;m-G}5Ub|$dV)+o-B-Z&M@vc{pW
zT<VROqgI_XgjoB>TxOi$hm77Y3|eAL)p+u8+!;=INDqkHsK39Wlcn<<ed6rcYsLen
zF}DMw*9R8MwkU0UHBsVlMX`4-?Y73h7qeDCnyzH-7?S-BcD$i^Uuhu_*8aV1eOE$u
z^+k9arC)aEIY*penPYcjO}bbl+55>!Ib9S-D^C}C{>=(OOQ{!<#7#+BV4;fD>oJO@
zowhrTQ_MPzX{xUowb~rtwAng&re3<qyDzUVRFFclu8yZPTW1b=cutRU<{fyL{TVPl
za)h{)A0G=PL^b9^c6-yA=X^!wTZ8QcuWvQ@l{3pHFC>o2+Pr}SekX@|@AfKgoUgcp
zzK9PVs_!n{m}R|~%(`<#-`W0xjv9<!jIi<`5yq-Mrg!Ir6OH%f>kak&;~CxzFdckL
z7)1+uX5_JJ)YB8~;JG};lJUsp5gsQ+%pRW&yP9x9hm+k>^_@;`m+KJo&EmU`h1uWX
zfC@uS6vqHIdrs)j{Fje4<u9YCs-#j=f?%aL)vgq(FnPMWOK~QWr;@{+Z@SHyUlS9h
zL#RHA;cm8C62w;v_Kpj;S)--vL(KF@9v5EUz9*#vEU~SXZy(JrIaaMkjC>gwb@L-T
zJ`9H{1+Q{H;r3Nk{MHc88pHMObvIZ*^;N!_Ok<yf`)P3t%UYR2M|%I9K*L&!JMNLC
zjjd`uk-#Ij(!$#Y>shUyla-n2mmw^LR#T-RWDue6qqLTry{gXnPkalyRMToU?HUru
zaO0UR%@^fMS3MiwoGnD{tRL0CXdyaUFsq(fnpY?8DWer!GQH0;V?@|3M_Rs;(||M_
zCJjRti|0Ga?vaq~yb?E}?M*1$^{Mk^JsvmjK5#Cl01UB3t!dvSJ3W0M7+vfK2h3-=
zcuKwR(d-8nXBru%slS;+!zSvOC&74U{=Sbi`Oqaj#1TfYLS=LVLa1dWgl!7O3{ecy
z=kyDh<)l_sghXo?M-Pb+VUnMpyDRI75LPF=-H+iPqH9SqlUk>LdIXUasc=18t}<LQ
zG&M2ClNog6OtY)C(W~bp-Y~pCj%_F=LxBc?b9WT9t_5G(wKcXSO5GXO%4pETvha4m
zx3o6P4irDwj`P)mB#@nm`@qO2oc2}U&L(uG3@>TEeL7XroO%ygQr`Bq0-z&sT5oeP
zznrGwSOJ>5x)Br~t=WJBuLLV@g47Wvr<`GOAulwn479rjx<TfsQm?9MM|Vi2Qj15g
zTqzUf#WsP2P-m2R9Xws*OsV5-QMSSE8wQ-Q64l+)kI5jMd9CLOd2CU@H18hMj7vi4
zTLlM8=aH^P_uD75?x9gF-)Q0<91{>i60f_fK97VX^m<*31yVpiKHxWI?dDDlu@p@R
z+d}hx1=RyH)3Hsp=+g+b+fS8RP6egJrel@mMi1QKAZMvBT<V}X=6^WzHGSt4>U<Rx
zCP5tBPAj!?X>uBm9VAp!Gh37C*m+f3-k7^9)RgDI4a>~taa8f~C)!V!9niuS@r?Nv
z$7jm6_obXSqP>=}HTmrJ<MhbqpZn|Ng^`9GgN!X+bK1F#WA)?pXdP|#(h5A$TzWE_
zVBh2tX%$SDS>W)IKh8K~E1k`OP6-F4pC!@-9VnMSS%Z~;^76}OV+&M1^f}VLnlVCm
zoIrhm+F{2Z2>@8gE}wR@96;vTP=Z%8?G>p|`s{?6_;5PZ$slcv7iZ=a`6K(`H?8IG
zZMnY5^eSKvxU#(w|0*@ucj1Tnag;BpYmF}9oxPdRj8`_EiNr{F?Qms98qv#M-F|*x
z?Dpd~^E7YkO|W;)vSY4#KbE=QMCThl(HAB(HC>i<k?R?*8>Ph|_t6;w%!hCq&Q8k-
zdfHf%dX^ZPz@+EoO<or<)+u6wUXgj0Dw52;43+mqL{5=knkw^{3PTa9ja@MI4{1LV
zk1ulNhT^OdL<Y2X>}F#*oD)?Ik;T2YtdjG_1<TmzzfNV}QS8F|0DNymzj@1B1{D>|
zxY6=sjp~$8UcnR9t5LB;Y06(ZN_>=%xnu@dVn>X41jP4A5t_EW54OnJ7S$^&?wwFC
zn(yFUz!u$itKh0a<!T}RfG<j9D4N=nsh~fOaD{u*lBhIHtEL;!s;=0z2!YFIDDC)P
zU?X3K30t-K7e5(T06{<yBx+N0SBNV_YHDg0>bgRY<5#lAjtB^_2?@>1XHyFVguFy}
zroK=DFHO?YE?n;_Zrw^ASeJBOZ+|vNhfzCoa3Dw`x?Sb4OC`}5p+uq)r-bBf$I7P8
z6``Jy1@)BgTSu>VE#D15JYsD?1TUS}>RM}(Z3sml6p^4Y<70ltx;*k<rxj#_Y?hg;
z2YEYVD7IF$Jsl;nJsRYm+QS|~d1ok#j6x{CpXVN?TIfvIe&hlN`jtv{eA}oYj;onM
z3*8|!V6I4yy7{_i1Pf>%?_nOye6t^S#eF}3*<%6<tmEtqVce!d4_{X`Ryvv)`ucgn
zM1|@yfg;An<Qd`DV{)w6_X9)TpUR^(AU$ibGKc!DiA$q*1T%)Hw}TqKqNb`-yp+dz
zMG6N9@1OU$xAB0vvUukXT4W`{%QGd`DOuu1Oc@<062~HG`?=KA@Fjpk&bsWgsvB)m
zrzG>)Ll{!~N(m)T&7x7D1P86rF?l^v-`!LsgSPe1p)Il5g2q)<yzkA^d5xxYoCakf
z6R3(V$m*hX-%R*=u}|4z&i2jR(F-NoGJOjei=)7~cFeS&dJ_3ZrCx4E1yR+Gv?crI
z=Dd#pulxSE@%Hg1#by?JVgswU>&hEF);d!qV_g;VI%-$;=f~%l89`syeMa5uX{(JB
z{pi*W6I@wd$>9p6JdYN;doaRb9kNfI2wc8R$X1&fA)q!_a$*P!^lJ1&D=~Y{3Sy#G
zyk79Ek69O47tAg8n_YCtnjBn`P<V9A{r-+uxNmEdGcgc@oz*%<Ywrtd10A84-2}C-
zgfEAd)%bdY@k{HJr{3JQ3C~*&*IW8p-h&hokT6E07t)xsrAJ3QRld&?Q(x6GxS_F^
zY6U1-ens2!fqwe7mO&7EFfD4bJ*&^}U*MPP_fpaN6Fp<Gc`9H{^DHLIk>jFUUo_%P
zlg&&EF0mo2k_=hGqe9Q34xE~-1;2gmqJy}QDE1NtPBrsO6eBn=*9`}*P<7LcJP^Z(
zY7W-MhVV%+zO!qG(n9cZf{e#21Vx}G0ws(0`x|Qm`Pot_2b54Qw_iUd5R=Db8qY?Z
zD?J^NGHj`waE&Xpa^+;!m*-_0)fHJH@!ZF#A9-sfvaOWA+tmA#_m*OF;`kFniL$<w
z&nFB?XbG)x=#H$fr~>Mt!HA%i+4=Gn3+H?r#&$aQ>HM1(zY3Qua{4dF3laDUuWgb>
z9_s}4xh%hzK=Ugvg9G%4gKQ?;?WfAxr>(w*6R7Kottn&s9OSYjq+Fy2G;#6-?gyeI
zay3)|*{V?KC|dPZXnK3(e$LVNVs9bChm8I_bfh5GyE}I?LO)sh(a_;@Zi;2{K8Ws`
zy~=MZpL#-aU!m$)=*{_=73<0Iu~25q>8FmKLt@Bv_Yz0S){d|o_rbi7qx}#jQlwk6
zZZy%3yubLBRm^(^C-$5u>wk1b{%|1B!>1uUQS22O>)7lS!8Zu|?pyU1=wK1FE&h7H
zeK>7!a5GHP+~2RHGexwgA`D8qa{W${&QZ9>8>c_SaB~`^Zq>a3FTZY$PaehRQbSK6
zHiQOBb9AcL)RO*i*5@juCPmo2cv?KI%zVSv--Vd3ig)>D3K0n*CZOp3;B(>wZ67<B
zp4Zt2@j|3FF1CV{<bvO?5j>MbJ95d-wGSvuYia@WMxqM67<=V3DO*9I_bs!-m(G9G
z@uA<nmF#4}=@5dn@c2mmuHo3CQPdoHlrc+uX*0LzxGz>}f;>s4pp}p+MKwIL8>tmI
zaLk=eplKfD7q}uEc6-*FQ&s!nwfEbm;X0woA%8F0+qxK7w58U_EzlDY?Pan7dns%v
zk>mTFxf4IFlOB@KkSu2wV(Q3T>smA&@uxh^p403DOw8DtAF@{=3(#@p4C9OXP1qyI
zWYlRz3?1oY3lW&!=x8)zcvi@RErquJZX}cbyn1kc<(LS~iJ7B5Rxu09G#du_T4xmd
z2L?nJ0sks<{8xtz2FrUMzLz7_L;K|oGOuqxek?TELECLyAI7>``?7-}_s%z@?0k)!
zP=SBpyyLtZ#U+*w`kTWp_ixU+<TN>QoPU@2<-Gi_^iix<f+JJ6sa}6Pkrq1ql^h^}
zRkuwToN9eE`MYP7eVRM0f2yp5?u34PAZjQl^Xa#_Tf~cxE=V#*H<?dwIH=g)Nz0LH
zApMh!0iXGE;*L)Vnrc66jn|r}VExz}Eyh}(kdxqxOCw4sFWs@3Z#VIPTEj1?Td$79
z!Dl{yT1cN5D?g0QJ90w{)8~Ot3Mw)d<%-_dB?&NjMR38$I?h5ik)gw6ZnVl!B%QFX
zc=2T<^$XNEcN1O5FA$K~v{jU;lxkz6(w7vWs9SD(p()rpG_R1D@k2Gg<DH6uUec3^
zORtX+eenwo%gf|oU#*OqSqvGiq<LDAxo|RiK!7sYunbXxDw9oJ8yz~OGM>H2W~JKl
zdJFwJDAj(^x=Z*Jp8!=$D@w(p?kY39y_=VAKDcnNjcM9KI1#JhjxYONW&V>&yu`2g
z>f+d2rII|5E|sI=qwg91f@MQHyu}hw&;ELK=E_T#@{YF0i%Q~2X2x=OoCYMbi08^#
zvEax^&qjBuZ(_^IaL<wwMRha(fUVU4^BL>=oG8m53+2C@g+K29)0vnThJ$pQqqUz>
zDn-uV3nG>yVU39ASRq_cA8Pc_$m<LdVHrcI!_RPFZR;OyYuue3lDgbwySb)^no@Hi
z&O(-EU+jUv-g;3$ZPgeoU;qw;^ud8!@_!Z6%?agpLWF^`szA$?aG+=6_j0=S?{JL&
zqT}^@!5JfV<bOB!|1)Ju!DkUMg4ml(K`G3kHKib?wSC6k8$mT^o2L3GJ*9C_3GR*}
zek*#&5rA7+@%Dq_pQjt{QW`4ZmflAt>SvhCXYsa55W6?qCb*kLHPhngZnH`&I;B1(
z(6WGdpF`x~<ei&u&)-o;_?hLRFcl+AqA&3<70DN{{W(}ts~?%YLqJ_|j#*!^eSMOF
zX-{U7asPy3a|AvuCKJQT$>ax7PJgNXsOU6$pJn?)uxxKS{fi)nVn?HbRHD{~YYA9-
z`r|~!Tr{f)9bG%FyNYAdZ)3hU9b(QKgF2;FqMfDWT92NSJPAm<CNWX{-WTmK`Y?`M
zwNzh3Dvj(2Z#lljyU4_7(Hs)5*_7S`9r8^%aG<)?D}39QMNKS5dlM4AzL4>}IlDVO
zX@t7w<@aN!lBPXd?dGTY8_XaAT22D%OQU00dj*rfs<7wIK2Dbz8Mv?W5M?`6l=Kzr
z`w}H*_mCtp0W})egg52)?xT?ztQs~9tY!Kiz4$~GRn`Y(oHL`M@_o5qlbK{Pyj!%O
z#F#5`g2|yMR!!L}O0uwCB(Ab1X3BqR?5uY{E2%&%Sf$R`Ig0tXmv2D@83}{3AHBw#
zp3ZMsKXKGq+q}IgN$v6Z2+MHHc+;sDOI4{<%l(TIjhc$@?dr#lb$O${ssTT}hy{=u
zaWcELj0ytCJ=tJJZo0r|2kXR*1FDUL^B40_g&0DBjj2L#qgG;OW@LZ3KDDZ~r+d##
ziP`etppPXjPKo(gsp!sBw5C$H{M!s;gsGwT;IC-oKR;Bd^Xsg+PA%DmqSS6SY;-2s
zG%8Z2)w2UcQ0pAbmZVO8#GS*rXtpF0xAa+RQEMcj;bP_Ol@(k6?shzZ=~mY5qm;@O
zoJB2K;vHu>Z)%4FB^CcL)hwO3do@TAs2Al9<Z)s>S(ISAXR6i9X51s0TimYR4);@*
zG+KQc`k2PUOnlF?5J!}xJV8Ih<yUM5N2PVynCnyGf<^OwiO#pQgfB*(bb5tS42DK^
zZN@j#Jbnufb^mV02VP2D!xBgnh$k>`VC>P{G;q$*6kk7dnSb{NvPw`q>ev0gA7NG2
zobg^>XZ#U)FDwR)eO>+$cW<j~oDfIL+qojo$BTWP(k3>`<x;kuB4AxJHO{0?M`3}K
zIc)94@n+i~g&wa=fI66Ud5t`kE|csqDv{hlrgz_NqkgC%Xoy5u?SXj0uG;*UtDsYa
z7#)$VJk91O2)}j@y#V46;g0#qh47Dq0=d`fT8JQiWBZR7e(-H@z1-yKA-?el+l$eJ
zqVim3jX^GFuZ_gdw^@RUTv!}rKBC!jh=_bu4eHXQWUJJUmOI>+P=SRY+^s)PApAx6
zgMcoH$Hm{2DD{`jGgRz2sfZV&{wp06O*}AZz4=Qg@xQeoC?AEq@z0yoxWx<li-o_*
zrkNAk82G!e^z#9!(3_E;2Ns^hlA;YQ|Aw%KO-;9N9=QHEIiX|!j>qh`Yc09pk}(cx
zyx}qC=Nv^o18kw9v(8>-Bn|boV6vEthnQWjl(um005H@jB-&Cs?3s-ke^<d*@pQiL
zSs!YlD_R<(pj423Ut&Ij&Ju8p5cjxa;s>>#dGx9YR}>JK`0VjH&Ut4t!Zx*<o2#pB
zs^w+fF+JLym=bmHMd;HmN?l)S&-=gXAb#!`s8nCn*Uzj`S=@($QQyiuWPfCI(898U
zr`@Y}L9(5i;+A2Hy)B+kkCFTM&ZYXJt2rE_dAi18h^O`o{Yf@HlTRL)TMFJ5U+LDG
z-4Y8vuo;?3sNs5XDkteMziu+u35bWXACdy<=Mfp9SW??~;~wf?E9e`a?akd?@Q>tu
zy_c~rmQeTBM%^utUir#+y)V}F_SES<IZg-atxko82OWl;`|||Bc}aaif%-$>A(~t-
zH5&Z8_>MDUN7L+j=K@x?^}da3M{T@hkzJ+ojLMT=Se!F!dDJN6Tof571}Gnd#_sns
z9mb!>-@goCFR$(jpnrBIb}PdSOq#B{@+!wTKYEe!77&43{*G9Q;(XM<T*frx_Lq7w
zwf*Mm%)UdHb&<Zsb&A9EnWL|}j^&1<bI;Tl7<xJ)ZHefHH5)`EuHteN%(&U_D9IsW
zKIMfIx*0JhiC;j*rZC(C?{-v(ux!);&KQY_bn!y(XiAbpTr89G*XULoZw)B!xAle!
z&I%Psro`0Fk#vz`bortz{RpFRA7+d&M|09)!1}wf#tMNla1EJg)pJ*yr8y|If+Tv&
zhlyAvqr=+$<EBR`XyFC1E;M~ak7<*A$xM!AzFEgViZAn#<T~n&U;XS%)n{a?Wn4>)
z7DpRq#T3EaavX>out|FXqx1_Gpx@_)vBQDqj$_B5?=<x=AH?f0OZ2S6h~RU5pneHG
z(a8I~Yr8ml#cNA0@Zr&7(`El6jlWGhc#r-`l!x-$3Y`7&rjYc@be(8##>@S-bjPdh
zZ$ZU!WQQPxdHBqWmlTq|bJ2ZE+ekLAH?eb^i!10Hl;rVMPQd9Mx(MeSMlFSt_=jno
z)n>L^QQ_DwrAsfnCPFYEyGBzM)06CFTJDX+9=ohl<FAM+v%Y+9SvQ@q8y7^MDrb%I
z(ZGi&Su<RbV=G?t5@^1Xu4sYrLUQPFx5>xl)}pT=6*2Ah5o=;(`VoQ~()D!_kE*MX
zg;!!CP)W>D9Yss$XY++}MX)Cm!fDAKe4<YdykAE^AfFzit$h+=d`X9|64$-Paet%`
zKgBH2u>`T~Ju5IJ)ijq37Wt1S5E6Xu&y5g!#RrfbEl#KC`HOW$aR;=PbT65nbd{%s
zatPN9J>RQW8rM%bY&bdNI1c&-r{57jKw+M9Sl^{b+g@VKTKJUyd_L}tsQ5rVUY4%$
z(;YE>U1&g7^~ysxB{1W_Aanhz4sY%l4=cx|K9m|@Gv*M857K4J@4lvUDBhwvh^lO>
zEHwGd^|jY7e2oBhaC8r%ry8t@3ATF)qkx1$s=M{?aV{DQF18ig@Hm&Je`AdHU((g}
z$V=6DgY)Xau4!HFQR?aw$HK0U+k1%)O$FIc%y{?N9A6fuSthvTr7+ja?D#Utth0qB
zj6AeH97F_NQ!kTQ^2c7<R}^!%V66~P3>5NY=F=18nX#%8d!*h~vkRMe!+(#M{87Q(
zcf3-*wccQ;0K^bfJYTiVDp=px{?swhXL^#->gl9mYS3JQLY<cvB~fA?%|0R=q>DJ^
zW6XB-zRBerR_}Of*OTnAuHIf#U)S7JmqNiymW4%2simu>^V*W{6CXpuIM`eldjCiv
z3~E7^RZ<MGoE;qNriwP2FI@1Zw0;;#WFqr1H?$+t<AT_ElLGsmnK#&SKwudgLa!DX
z%~IBuOPn<Qye(N;Dp{D*_-flj>&GOn6Bj}_1^?UkHvYMpQNJ(9&K%BNQB}bIJXt=(
zY_O|MjHrM6S?~P;+9Z1oipoAV+Q?JM*Nb!XU(K(#5O25&jt)t%$%FC6UTh+QzH?}=
ztK}!e<XN@)*HP&gVP-E9`bVr?rrNh|6Wp92jx<r13w!rn+=5+6K~<^Cr5f5VCJ=i&
z2Lt>epG-I)jR`tTYlke}&#UxoJfnDXmHY<r1h4b%IcR{bA&yib{ELyfzv`2t)H*ns
zQ=hSC*nb)vcEfNz^BS4=y+OT=I4fm~I4kAd`%kJ>Ef#{tW$3TJyTXL!_r+jO5&!yO
z`5p+|wC-yHat9qE-rDP)Xj;FHMx6Pghp|Q@efeF2+}}BMZ~i5O{i6F#52ERKI6xv7
zx>xV8d`kENc9{VOVker_5FxhbQWwL^P?v_klqcZwms~lYe2i-juP|ldKoH`|+`IJ~
zlO`^^@dvy&ryxkW@LwE07UTY1T(94m{4dpP|B*K3cX5S(V{wl9FM(r!^{&7_bPV<H
z9PY;cCb9f44!JOFeit|PcOL)Gb;*tojCa~;KfF|Q=Teyuz0Ve9oIIZCq+Cj81~yAa
zVfa;XA@6^c_uWxVZ`-=DVL?DadY29YO7DnB2?z+%TU2`Q5K4%G^bP`2BVB5w_ujj7
z=@6Q9LJcjx-yZkuv)$+JbMATX-8bGC@BNXHF#<_e)|zv!HRt@kZ$+y#GT<j{zTb}7
z@H9&P%fS*pRg#hZt6$Eqg-b1vfI{B;F~?Mj_D+E@iqwBtcfe~BHgR5`@X7SbQn>-X
z{u)&-K?hWm5ky`(uqAF{W#)#4H~ZPoUv^~NexLwm4;Hx_tqf)gV)6USZ+DEbOW1kw
zHoaQ2{j`^?u$l2a`86)8EA>?%STnYJO;S*ncns=^A_(!~$mz{8cMG~vFw7SoW_Nwk
z^kwF%x{=R=yJj@AR{nqa;n5M`Bvei~%ZM$XYrWs2oeY4JBr2-itb;R7F8}_z@8~_)
z<{&%uA8Y-KF@DB<*|Vn*BNsOG^-UEHIaR37Ey-t344502BnhGEtgk0*+lQx<J3nPS
zt6o@0_l>ZgVED^PEPFx}s?We2Gwb#wl_EJahc$bAFz=ALFonUeVd#3x0Edp)Wo^TV
znVnl$b;rDfu)xupEpLa@d+k4B!>?|oJu}s*=z>yub|7IbV1+ncGqNJZz9$@~td*bs
z1cJR&J-vIU@Q;DiATd%Gu%Do3D<{}%N`OyoBJPJ}$j*&h3hoSF^s@~mV;@ZR59tXu
zkf8mOEKh2}gIuiaXavEJcsfF2-p3h(j3aN>zy1lz+@4=4`sR?*Ne=k8<(Id)WBQ|+
znRO}cB5EOJu|eiv1p6;Xfj<obuCG`F|C_5$Eo&zR2mC!;{qd75W*)(Re*1kBPO#-7
zyjcMzfAcY41czQHMifkan=)LS2WCmZ3d(&Lr|15kDH9p_BynzTC$}w(uFa@0yLM8<
zyEb*VgvPXkoN4F)9GsZeT>*d|Rdgg&IAEk0lq&No)EI}+jQVV34S;?X6>b%B@t>d4
zk0cmQ>aMEMJD-Ol1behF^6OK@<#@DO!>({k?Lo8EHM0~Vxms$6s=G`4Nnl0+3%Io<
zR$32M17}(zeUxft!~6a{8+o%A(SgfJVg4?VXunFuEtG2`J>k`3=p^cP;oxBm)@X^I
zr2M#8FNaet0$`_81R|DH$e<p>ig?%b>PKv{92n$m92gb!ovj)0p;Y5CJNbE*;JdnE
z%M)O`s^=wL14N#rHfcc}t4!e{F){rw(?9tHvwpt%Up@W+y8H?Ko42L@BG>yua+mh<
z`ov`89f=zkoS2A(Dls|ctXwHK{I~UCrtcVE(e>W1x%%uYy+61~h%wS?iS75dyaAvd
z6wrWH3e(a|^Aj4Sih59GjlLNxzN0w)a4%w~)UBDSZ-^&82(@=XL)Ylrg5;}tp;n^T
zZQnE871FV<@zSf!7%v0#&Yc|j664~qB+jsiXhS^k5~@<<CNi(6a1%J7G`H3H9JU;d
zx>w2&Djzg}<Cy=0qb>gj62P0I2tIfbaWz_?))R4Inyk+%KMrTy>h+hsMc(j+g~|xD
z9L~Gopq?*xMNJ#(1a>Sd^qf-In021-+U<cM#u>H^G78U}&C(6Mhii6_s4rfsi!rNE
z$rdag4db{CgZ!16nwl5Q)+W$7`5utoGDD=aS=tfI?l@uZB!GU1yF83|sdTK4S2D<8
zSjH`gUVD0LQQ+N9$J1-Js;TL9luabGB@?ZPJJ5{gL<yvuOE#v~V=m;2iP?RT2lr*W
zuigtLiye?>5#|p_gW4Ti4bKUTdzlqt!rl&>eH#~->yPFiS!=q_o>fA;-*kE>($Ue$
zuXAN=i4C0PpWjPe-_1Otw7HsjcBq(k_%ShpbE9)mW2h67sC>MEHFGdISA#k&G5et+
zu0k;0Qym*itrNP18B#Euocr?e?4_T^yh1)&OSDj0kk2NYEqR<-a=u!W{7@%Y$Q-i-
z^K3hbURPV!g%zIne4B2io65^wktXLzHB=fbyN3^z<eB*4#Xyp#Hkx&7R!3pu%(l9G
z`=I*ZG=E$$+OB6lCuMsXK$XMXSN`5u`h~>sZ@=c9t+kQ@O9NyBNEZ;N`=jvP8OaOR
z#=Gc@fG3jyW8PWd!T8kUb#F!Q7w6u1edcd2krjzr<&8wSn6aNA#$KRcUJ1Ws4R3gh
zd1=$%zi(jB{D%CouY(g^FqyAix0|H1J&$+n588VTd{DjiRDw}4$sFA|IR}>&8w<6^
zzQ$kHn2e2vl!Z18DHrP<oTY@X=;TaCZuLB_?zoeGmW(!>{~*lFeJxHsBP4r~MYUF9
zrdaEOyu1C=lm=Qgh0VY*3sbrwS_`{_YZf=(p^JABETPR={vgic_EsQ{_PJJ<NM5?-
znUCz%^qGMNSKfi5zJidziRZ&EHUW5o1J(Z}{?$sy(-Wr|GiEajd=ZmwqtN4SRHM3&
zgrVKD`Uk4I<OqO({d)@*0Jt3?-tW6Zh@7imAVKm-y}pRuY)&T8_^1Q?jHp2eLnX}u
zB+_}>uXdz}u{=fk3Zt@WlM8zjPo%wiBuwgI%E`5LaS2)iXxm0jJ+{2S>zNAvdWnIY
z(U*kR%vy0m1H&=B%uP8?TO8kvQOL^oVz*5=2LpG#BsQ->jjbdndGz~IWtytB-yQHU
z?az9@rewLkSabh?E2?1Q?8d&O2ldtzY{ngzkC0FK%7!4@&6`!bnniU=DACQ@-t&I7
z4XYFxvHS!YGfqDDo5mlKOO^>fqMHthV|;<bbs@YT)}HHz1>pWHCkRz@3Om0t8^fIw
zxxJ}=oW_Mye%fNnkbwJ$1QS1UePJB|-)Kc{BM8F`kJvt+gFCx+6dB_d`J$uyQjXYo
zJu+BK$;ib9W|TjtH!~@-EcM8ZkfEJGvR3x)og9`GGOAP#3LTSFtyDK2F#V&xwm4H3
z#%OoOL`w;PTv<4MDb=e8*JC=nKO{qJ{BN1F3~ZR-Yz;u{lq;%2oPDv?KS5jDIvU@<
zB&c0t;B%5^w{!Ez{}xt9$KJmI`gQ<nk@eb?nD}0f^w^;|k=j_@8z59c0|rRqCLX`g
z2vsYC@O9la$HgxUFYlVW;6-nz=I8xD|Imt$F)u08QnI=p(@DuXpqL(c1@eg~G~BA8
z91`HovS;_9Kuj7nI%GOTxXtzYoVxFTr`K^mf-_o@n@PR{;^U5V{3gMD!Pht*-%jcg
zf2<mzb^bi=qywu-GSo@+virJbI6Y5E&hCr%gQfUIigT{;F#yHYWo5V7cPgohv0K99
zZ55FVvE^G2M--Gkdi1q7mfk0O|0U~z)2BV<#bizV%Ebsms0Avb%|mJK<AKjm;SAwZ
zef+HF!PVEM8a@Pcc;hsNw3KdmGgOs_$c)=DRh7TDHTpQMBos}a9z|-t-?UyOMC)vt
z?`4Dz_`r|Au}H)Z$km;n*WGXv<iUO3@V!`x!jD;R)zy^I>pPtp#xr>o!3ku9h&2oe
zsyeap2zlzwf}0IwoV8Gh0-7bL&IreUs%2nLuRgZFmDoo!Fy&i5Yquc=DG0;W1!und
zu5TB9#kuE=y-fAXmbXu$$kp(7KGCh#TVPr77@8!=_I5(3{g#iv8D^nozsuO8`6lqY
z2*DXbH*QJNcX%8a0BJUs25jPqazRsE)||KGW-=$+<Q!=3h&q4RiDZepw{@z#lza>t
zQy<=j>-_{ppLd5P0ca3i<nZn?^!gkg8decEwK5O@BS}mHS9@A$f~c-$c4^u5k=-Ap
zi_oRtvkTeb`|c6~!#~r*4bWby(zDPdb+gIKTXc=qdv~Q<Osi4fOZ6MeXc6bUcI;u!
zp80Ux!&0(_8P2ii-i9-G<t2^<)>3AFplQR(@Lnm#w27#M?Uc1lQBhd_h-~FT^Qk^E
z<&oci{;0RnBXVYs_xWtn_D>K2R&n>diz9RXsPeS2>cBv2Q5MimtG81|n^%`qk66pB
z)JmI(ebYD2mWs@?mYFZlWH5KAL>f~31hsgx4HwuPDZP@dFD<R3lNKA_mwS-q|5VQ8
z&LmYR#hJ7k#&6-%g&Yb7<DcJ_=dULudsAV~bxqEJayq`!X1#QE|NGAMv>m7M&QNbU
z%riX*xn&%dEye&s2DToragr8EqUAFASe9zOKic*=-Q9St;s&)A;uPCx9}n3~$JQeF
zH&O}EwgIL!;pOQNi{qkI{zTN2b_N&E9e<Z=3^zm9g4a0Kk(6G_-!7zC+Augs&XuC7
zW6mr_pSNMlFS3I3kvqqqg=Q<mZ+P{-x-C#n6%91pHKKuS5A^Rmh))JD*dYG!L!6(W
z?vMzqFyxxnhKcvhrEsUv7TBwe@+{ng`8Z|4N+zT!(yDY<h~=g%vi$g~S|!)I#N}X8
z1FIMJo?w6%UhbxdK*F(SFPz2bbVNe1FA(ZRw@fHZyhuynMM)ZFyEby%bC6~ba{Fa}
z)sxP?TMKO45Zwz)z{pGreuAbOu^;6ibWn+H>xBlEmm>PZWV*P14wRW+qkDQ($X}H$
z9Q}aydp6*iLX$N$)Uufia+p-}yDPSP@wm<`9UQzVQXZ)rDYJ2DlvHYZ%th@bHCKF{
z!vJ&yLDwnf!0YiQ34)^6{N96}wl7<=f_w+5q6}}K@MJml^cx#}Uno(qG26#EBp2Mt
zF@JGFNAM~9_J9!5YP^AYgGM5;y-xF(!lWX4?sa8Fm0b7^CRBX$eW)=!UphMBEm(-5
z#f61%Ln|h?r&p|m?MTb92}?JzY43qx<4;ovW-Yus_#0dDcX-nOOmQ!-ppRG<yl`bS
zaa#;#v`{bF_G%hR^fF0x<fdGLz+!1nzP*8*DSKnYs|hcha28CA@gkw(cblE%V(^pl
zUBa7>uM&{YhkBxN#krVMyAG&To{b->uv&@0+5?hrM{M60(`(w$f|6gb$7W^CUXE%C
zJg)EW+aeUo0Mt=BuV~1E84s^EMC`?1JQ}10I`bS$#ZFF(o7-={8O%bAm8|S{v}~$l
z<E_9wC3#;}FBlqC7YA`Mwn}DC(E=%p)n05a+0g7k741}uEWIz2A%xGDqZmzawm<39
z*039Ks>MSvv}<SKo&q)8Kt+^c8T>Zxwjp_BC!=vb$6cPU09)}HyU01={Njo4u1h_x
zZ2jKWSq7#?aov_*J=OS}5;y48{XFl@6DeuQPn5#jhH|KFjusj!jOXHf$&XEk0;|Xw
z`Lm#^_~mo)k&ZjhD0@$b?7>|fw?NCuOB#HQ0M%y&E7L>b3iLwPQ?;_qJ;p1Bxx#X0
zAfKL^k)Xx0uKdt@Ekvu^?`-}(!>1tUI?XMHVq~^A#l{2)1V3%0NKg0Mb`ig6BA%X{
zMuMS97-@HPkd84u)P#IZ9G@c}4e{OLo0Z+vMMDAz!paLF`f)uAlYGa;EhMZ7FC5yS
zi3aDz^mO;2Vu{r~!<9!P7hS=1c9$-{O@&^V1a^3CYG-3g`*ocrl+oD)tN~V24QvH9
z`N&DPze1LM9;&0ym0KVH0VI@Yqc3uKdUAXd+|=#Soh}mJNFK=!<Ip~NE!6?KCfu=?
z)5;ydgL&23IIX$u<btBK%FV0}wIrNr8!F8Ufo{Kvo;mfDa$p-|yvTTvqK;ho3A%X^
z97<Wd&rf_*3VpR0j<9mGb6B)1SIWZJ4(eHiZMTrGeUzmTc==uXdxP?PQW4qJCmth<
zgRPpy4QQ`KeGA+1#1})~Rm2bD_V_Pe>=TX$adwj%e9>E>T8??I!KQnHEw?&&-VU+b
zG&@634;jq2^%KbMt%dU|(Y9h8*Y|43;!wg2vDX8OUKZp<?8h}d`W)rsF>za&r=|+5
z^BsV%y!|_m;&(p9Z_odfQ-R0aL9M7&T9RCn8G6d`4jL9=591hWT*MiMuL0rbWcatL
zX)DwSD=RK}xh{G5YNA4GdydS0?k4%W6nzaQHnwuN={U(%Z+Lrk_CtT>$5{gL?C=nw
zL5x%x;&fB;^04tjiFVJ|Lh@i7e!dRW1h;-5hb2e#GqCSbUX^F9VL(%}U`g^%U&se<
z!OQ#&Oal;Cvw$qpsx&>~h!kj{e1-=6?H#>k7{Oe~cev&E^~99+II>f8%ODAnzi68Y
zlx{7R;~Ms!4GY!-C~?5JfiedKW<kS@Y5xo`;}mIItO{Q$u^h+nmj}fzBtj~yr1&^K
z%`-$K({L1FDgmQNoCqu2z2Hx~%(hYNu*u%I+SN70YUL@+?DyQJ{8>NaPtfB#9?PL1
z39w1RbB=R%jJ9K?DBqEO^vX$0IkIM=>o_Z<qsD75pCcbqQS3M}+_~C#K{usxafHC0
zL9om<1`G?SrKnqKYtM#Vl%A1OsDtVJGG)yf4oqJ5lHZ7uFa<5&r8zp`qa|pd{UJd;
z#y^PBI)FB)qf^t;<Q}-WMHL7*Y&{{E5l}o*Hx*mnA?OfyQUrKc7#M96i6AMVg@;{m
z-HRwOH$v&h+GTGZGALf-APl`)DP(=G^?LAX$51yt&iW$pk;k-g(Q)iq;kM@wi-6ou
z3YI*D<5M2pTyf{zjcKP(eu8cZ!~iHK0O|A_buuX9A13v)2OtAS0Nfzcx=={8h)pXn
z99-N~QWcZ7b7Nmcq4*-Zx+cp>disp4ueQ=c6OV8K;+-U(7|ZhJaRWt}ui9Q^U|Bx-
z8=nJ>6oVqF49>QR`^^s`D7Pai^|@rnDdh)_SdH(mRN!Asdx;M#olk%(;_^20WF7K9
zmCaX98thId&f_JOGz6@e{W`l5zgnJm673Z)QS{AVZ#L*iy9AXFAWovK$oI86N#k7D
zVl@digLtb`RQg1<4D?V<<tq|*v`pm|hUoZX$uJ)W8?sE%M!Bus%Bxafm}Tm^EwOI_
zFLr&NT}S<^YSleukH^BcV1u6f&F4L0(-vh0G4;q@?uQPaLR&)JXJOoS;#2j7<s%Z}
zK*mT392Qecfx^AwZ`JyLoLJ<D(E@jXHyv7~otpxh(;BJUowj+~G>(+lveArFY{afM
zW=oNO+>~A5-E{@<F|n!2hxzMe)DV@C2!AgAKrd-j+t5SL-jGf5g6$$3n`{*Gy;?C9
z4r_~hwvf8QNI5EtWe9Gw=%hGdMXtics-g_j8ReM!2V3mdLf3}PO)JP&>A^pEjMm|x
zKS!ZK2p$FQ^m(?H!voyaE=_)}?ecrc>^^PBpqO^=2&mR#KnnrYCWW)BH$hwnhmDoq
z&}yYWc2%ohky^ZnKC+Zh(}<3If0SObIh;do5&7YQ`!a1&GEi60Z+XvPdmYV;;7UCh
z6j7mWNMI;zfqh9JwQ!<bh-Gx}Z6`|<rg|g#x{!(Fs2pj*my$VGhcw>K+G2mzN3}!>
zk=@QZ&pdN()Ptm*`u^j5{-dF0IeC#|U|AO;qdWWveBJgUjOVk`ai)Ew3tLX?Y=$d%
zc|W5>J%KDNvN-A{efVu^g1|cB1qjuJG1}%Ns7{nRRD$Z8jor9F(#t27chP$6y{x|d
zRr`x_Q!+IN@3bR64Q=hyn8p!2Pnk;*wz2b6KP`i2e+lW+XW+KWw_rjVo>|yoY@8(@
zJMa2CY?4~!tUoa{oRue!V<qj2{Ghh=ERXQn7e;i`^;GtVUro7D-i7uSMtX5Hl?C&D
zq1P(J%Kbvr%)-vL*pM~i<piUrg+#{$T1G7B7`g(T{Fv$xqbIW4H0V!poRh8tg~%Fk
z%iDN&zNoDg6g)mlX0y+EJg2kq<O5+fBzEETXF#}-tRDt>sHUtfDsxmZC_7rd%{nzv
zTmND0(|)a1t?q73MVQ6%uBYx4;#1?VA$&Y$@kQj1ub6N>z2)H|W>4r&59($D$TSpO
zYVrD((16t;Wh;Wfn+k($j~kzgXxRn?#azO6a;<nNr;(+zoQ0tWos?p2UGaB@{CnPt
znQ?s6K>DZR?cHp<BzT$%!Rt56vJ}}t60QqO`E5mAvC4eZ#c;p~pX1ALz03-CP5y$b
z+(63sK_8oALhQCzFTTx}x*OXtJH@2gC;U;op|GrSR`<Nq#N~`ON%Gfm|9O|;KYPDd
z+nS2&+Xg4_g1uQV-CM!t=Wgg~9a~pwIWnBydlckGnvAtwnHl1Vei@T|^$CO-D)JMg
z5V9l?;(?_OAL!etSg^3+?C4Sy$tyaB3vIonT(ypV3@zHCQHq&Jk?*`7&uCXzSr=Ot
zgEiQh@N`*gTPhyS?Z`mZRzf&kAbXzrr@em;s&ao?f5rHw)CXwNHrhaMCbXc>)^>sQ
zQTa#|*Dk+Jq06J;_^8(<;a2g{_Sddezg2EJBsoI(&=S;9elgI~#xNgrY<i*+%3!%J
zj$zr;j1D4Kj=fA}55RZ=vZOml{A+pcH%6I!PZCwOrqz?QRuz>^Jg0lpCIvs`mqVUU
zZNh}h%aO;16BmPhcE5(yKW*k`*Onv$oFi@lL^v&f=UaFcN!gY}&35Fju&9hTvTID?
z;$Y^wo`#&8&8Pexj|=belto*uB4^NO;Q^6Yuv)AZw4z}fpZ8zPL9GZ!&ZSI`<PREV
z+D&{xtaoYXe;H4U27>=~!ubE<EwmpB(_=r6r0(lH^EU~WAGretMNi8yQaPn^lzus!
ztSfwbFoz4jyrYX55bG+rsO64h!3&7sA0C6i6L#%a-vqV4jb$%4C>Sup-WSE9Eg={p
zJ0PnW6RM-m)Xzy~uIgr_?o0E%=0ngsdf(SD=eTBtZ>feYX?%4VAe6Wv!}nH&tOrTe
z{5c44KH3%(j&Whls@u7W2tzGZ^EoPQE)b_w^S|2lpSEaMXRR&72A3)zJA#%Vy?oOF
z9Q?-NKLN#y|Husgb;pT5(aJp<H9N)j_I1~WLP<%o&#mQq9u(oR8VNpMy2U^uG0$*Z
zMApK+%usJ^#iWW1EgydK4^$DYlBI3?oJx6F)NnW}*Ma33=d#{)F>pQGSyHAi%#2%=
zgKAUx%W}qAzwcTL?i)Siw0pkqUz#(c?cVeWJ4Do8ho9y49??>g%i&B}J)(;l=^)W{
z8IQ0ioNG1m(8+nv#dyC9vP<&PUJ*`;^k}ad<=)xeF61gQNyOzh_7QY74$_XJe~`@j
z2u$Z9_AL>15yxX0WW%A;vPm>>KU9&yM?(i)_5>7pySq8h+5D!;Z;c#GV@nX9H^sQ^
zVO!Ntkaop^m}O_S{7v#haT(?WpiO0tbYqSxGMubGWnN6Hin`n9Q5re_WG#2KbgK-{
z?Nxc=xzb3HZDHZTYVQN?hs-$MrZ1l^rCKqEapANXK15&V)tQmbot5K4)NT!w3YiN=
z_pd}cCNRcSk~1b&8ZFV1SR|^S(WDg2>8?)*AK0K$p9h`5wmu83HBy}vgiuQWikwyF
z%t<z!Gb=h5RjQe=FSt*pJ_F|k@D`3`3W?s0epfV31J?9XVWn=<rOc~u&85c3nse|;
z=w14S*ADH5Bfu(MQf%9m71|yTFTT-pVALYyxb^Z4Lzi7uef;Mwj>Pm&A*5PvS`$2m
zhJ7cbL{H43Ww~}bb4`UA5wA3Uq<?t-n-nPMuO7dM>f~Df&b7&BuO%ilz~7nc)GMi}
zfkiP$DBtcdvKJy3R{}7HOo=xyF5ycNz>#etsP_a|0)S`zgE<?CTr3jrFmYxIXzkz>
z?B8Yaoa72~6%(5XFgIdnkEK-Nu&~|jJ`qpC682xidN-m0U_Z(nh+3sjfn*1H;Q$D%
zC!!NMe!x+WSK$Xch*@r|{DI_XD9eH3F61I;Ykn`zob~{yWQR)v$&1{d1`;|XcOgqP
zh=q-u1F2E>&9kTvSPR(ZPf(OZ^02ok6!CP}-!~09qB&C5K6j(Ae0JtB!Q<$kpxS4o
ztBf(7!mIf|Xeo{w@955IV~pAp{iE!>nsdU3Jp)Mqk7#}pGcE4Wsc>2pyz0$vWU%`z
zuJ#-Wfk4OXVK=PQQ&X)jB8tlzr`*~+NI%H=9TMC#SdWp&a>`YK+wk{kX%V<k$Zm45
zQTo4fRS^yMIM64~Y41J1e*Zfr@oe^asq%FveLBJ!mUzBTWT%-bvD5k7Hy<{*rkCcR
z{CV(|`Pi%)YdPWjZ?js|jiX&yvZs*y60x+D{KbpS3usjRQ*%qlM_!u|rFW^8de5r{
zg*tc#bt?<JJkctF)=MKt^Awix$Hne4Z&FuR<(ogO@|FitMkeQW$apo%KrUp&Y)<R_
zIOcwWaOWG_t0g!5aP_8?r)?{?i;t))fh8iD+;oJ-O?OP?S&lrXi{9PVl64F6-r)PN
zV?zBg8Go$H0E+E7QH2>EXe6SrV6lm+n0|}I7i;d0xFmzZ16D0R@^erPBKUh5VDYk$
z>B=@XdsiBT;aq`wty5anX)ie1Cbg0!$fnLFFT0TM*=;WDn6nu)ekVg-c~x~1+_bH|
zjrM%$o>2uSnlJl0n{?>J-)vkbgtMrk$~Gklm9V`jrZw<Uy|ev=rJFh%d;v&oqbV28
z@N`BIbB$eRolTH3yoq<^n4?VtWxe@Fa|(1RJ7SGxhI;k2Gp~(KYV}0VlJ6#VjW!5l
zLUcyAj|%lVC{pIqEQqA=+A2x8`5ff442ZjDh({xvXp>lkyO9azUw(oDGeVEUkzcd=
ztsrrFRypmfJwHL}UmW*6!BZ!*b~*9U5-EU`Mo^J6<6eDdXt^*S6eWP_o6)~SbPGx7
zM2ITbOQ=15%vS8>jAj%8^f+ll%b$2=J%3Y{v@OW22#vrI`jni0@3H#p`%?|Z>G{})
zsl1RGwasIQ0d~R=C<5djO0F$qkFauMBD<aaa&2?uF|8ulf+?TDFK`PLH_0ic+Qc{a
z{7Ar5k!t({?V#7iYoEz$);hL5+r}$g4H?k38F_l^ZTw|!yfZJpmW1LwJ-yRpe`}3O
ztN(#o4l0g^WF<{eNvoDqTzvZu;?_`nyBe(0u)Y@Y(h@=|rct1;J7<~7H^!Ay9ES1%
zbJ^;kzz;I~-Z~2AvVT8s^^MYMpz-obS{z4O<yzGE&NQ2HO>uxJ9Ih(4*^c+~<SjgU
zukF>E3KG-m;Zs8d3w6J8PPwCBs8gh4y?ePUc=7=%>ywzf&Ek?b29G-I$VIn8#*eHx
zJ+;xUS)RG;0Ldq}h|3WAq-%d!l85RbQcmos0LY^QzggB~Ca&fd%otj}5{lZ%w#ZD$
zq$baNt^KuWIeEfYRd)n!M2qXFnq6Z-ZUYFTk`MaY?_=_mfU8MpUp1dU!vHdUyRQN|
zb!+Az&%dfjPVI!2v?WXxE$`4fx-O$*!pnca34Ves3ng0wrlL2GhoQj-YBhS*b~I<$
z@l{t1+?82CQNW3Se3IFnCDm$Cmm}srN}0KUiYXw+%;savh>iM)U{*`n=h0a3`fLt{
z-{^-OiI-X_8WB{kLSm&AXm{k9z-79Ra(TL6{Pw}?MOk|s73xjIe~ywh@gWJJ57X|b
z59=~n{Pt7G)ED~rme<(2D_0v&i6$EtAAOTt0|Fow9LpSmQRE{4ZZ89M0(IFSBzbxn
zFjuV!z>%T`?%a6#@P9kV{#QXAC{q3MeRMxTYL5~9-1YE%mQr|&&S&`G1Xk!L=(m#C
zuOZ%$SB4f%<|KJ~qOt>2S{P|JWQk6*PLSB=$98}EMH#<tDOMfk8CV8<pgbe7ehC!n
zmVGbfTi|>Rz{b&)+W!-D+w?uaD1cy=fEpf9Qv2oGq5TiwZEpYo^4hFq4dfyco=c{(
z8b9}+rZZ0wML?j)otpTeVxRbqF5`L6ZMu8ts)d+v(TQkPee(FA?{y|D(nQaa)6aAv
z7YRcj7Df12w%OF9z4L(`N!;ulE(28UW+yJuz<Mx@1&S#y_Ch~AF`&+1`RE8{0nQe=
zVu|Pt4qvvVyiepcpI-0_RTRwTR1R3LckEp_+*d8swBZIO?7y5o&-q{H&wc*y6Zi)M
z`Yh+z;aeR8(%hTRw<A)oJLmZ$oy;ow>ku^h;P&ks1XT|kG;`xni*%mGQE}u7rJvst
zC-9a<eT%AE8etjFcBuJ^+8Su=9GAcysgn_}e9wQoocgh|dyFlmSYG9gQP;Qmm?Lqw
zCUX=#NI>~MW4-^}j^cwDN<%cA6NnC-g6VAF=wz2SO`J2Xs&oz3{=_2^T~LtoAF8ss
zHg9;>C2zx9`p|%Ns5OX^3QEv4jC0<Y9XozLUWvcrI-Q{7T9%y8o_~Y3MRaq@OBiS=
z>ZwH4NecS5K>ewiz76srEd8Ih7a#k`#|nTH91dV}u?KV2O9*nzC%uS!R`H2}W%TJp
z13UKv(5x)}fRG`wUaA1v+MY`9Y2mVMdhpUy@`%$xw981`F)OHf!BM#2)G%)346<UE
zpbYdp4Ss?KfHm9{=V<k&MRWVnwj%bzl@>WD2OoT&RJdExm>5`6q&^tU*gW-piSb@_
zm&6;iS&QM#;R~TeWWb}w(p}CYmJ;XpE+p@lZt1N>pOG~s+*v5FmbxiKyextY_p&IG
z{ko}pd3k8w)l)jF_|QK>lnm!BPqmP^tV*HggqRL0f+$cf@W`|NrQTh+<AgbbcSjxj
z4ykMP&n>!Lum$lyu=}TD$Jlbf=$p<m7Uy#EDg!QX)1@5>pl?rUOh<NX-jM1Vpc9??
z`y6U2q)sV?Tb9u}G)&cdV-3CwU1EBRRm>$38l$i4t1A;%?z`&e>67g(%6(Ga6YBUz
z3dpmMM=cFf{GhO|kq9c9`~JN@<y)(0CR|XTmF}wN68Wx%^DdF4W~5Z+yo&fvU`)aO
zdcOm^-V3Sjo{YOhBlgR#{26|0fYTv2(OaRXg}B_CXBVOfb*NpFhe|7g#A51E_v&W6
zMbY4z9g8i3x@<_#>+|;I&UlO~Z>Vd*tkWW*HHEh&Mi<v{>VxhBk3_>Z{@b<`u3^T#
zc`f5_aTv4RR-nCR{6Nnr=mL%eIKlgvbYVTEq#iwUwXxaj0_(INi#g0(1?(p!1(ZF;
zUjb_$krr{cp%m)uw{C6*r@OmGW9YghwnR3_&&6W}`%NgQ-)qPctZ+PnrMyU~3wH#%
zb}w4~378E}oKPM$Zp{?y^HBeJU!Oe)|2AW4OYKpW#S0IEgAl(@Q!)?5wwZzI`SY!&
z%M9Te@C^orYel?<db+Bcx^42sGBA;cAmZl*plhG6iL)tO;uMbd|Mjt5q!yo9z0sTY
zBm(PWY3UDXBsd2Sa8msIueAZ*z^#9W<@>+#KR?G#JI}da0Ec*a`0f-?&8D67FuOPd
zut44u7wkvGmz|dhfMX#X&Z90)j%peQu*a&{-Vw>QVcPTK#znbfLtrP8hy=>OfQ{a%
zm!X~fWOsT(TYYmJkWCjopOpL4hwGH>9a8wUOle!>JBj*e3Z>yMvp%x_Ow@E8VHsCn
zd+fsKr9T`fBxwSGIS+kM)lV?`;uORj?5bYHb|yoR;s%mJ-B=@)l#SupBQb(Mee|#6
z=Ge&}3_#q;E{kujm?J$GC<LmhV&04tUmL0|ZlI<Lwo;{^g!DS%OI`N?U%z_=zkaW@
ziSU9wMs2S%05s;@&#he75VsF|)~oIhPPkr@<Qdq|DPFrnf0s#*j4mc|&nS82Vko3_
zYMa|%+#tsGjJvbfXh{3+s{oPQq5ApfDHU`5?(PV@pCFTU#KAhj<vC<8<4=S2{s3KC
zIB9jtyLh(ek62j0;H3TV*=J`&KYC+TBdI@;X+KlZ|6XjAiG<<I<H_j$?xITF%Tz3&
z0p$a~Ha*>)HJD{tWAdr45<42LvsC>X-(tC@Qjcs(#%73*+h+#UihPLjDvjfTx)n9v
zHHfd-*_un;KQK@e!1lDC_iGsLCh2Zw=eiyqNb)q691fly24F9d7|nuIys7}1fHub;
zS$z3HsdJ*Gc7Zg;R}!Bv3&eqZLsuJsG|wU%BRhz4^@HVjvDNM!ezg+xP<QHeb7Ly~
zS{W5@AM2YGdrOw|{<cwUm;PHXQH=W{EiF_}rD}{%F(21%d)87aUCQ01LdqmNtIf5z
zplHQl=AQ8#6Nb>e#~W+kh33>+v&b^%B0Uc*GT^=54XzvGI)-SUe0PB{BvamjRRdzA
zvT6PoBW3-?93h?<w?(a1$b&fyWm`?ahwQzhimJp7gCFx&)zhpaoVw;k^l_%VpE>s{
z6uDN`Lw!RsFbs>_L2DS#B|zPCAU<O=Lnq?pNC9KR=sk(#&+WVq4!Az(xExdvKJ(Ec
z9zH0j7lj$Dd!B#wD1z~MRBo+U8QA0o_oBHi>kA9YF)q_NJoVe-6A}-98Pq@c$Qi@Z
zyw4%x_Qn+T>iaBRiyGU~*IW;+aC?(#^}<R-$Qeij<L^6PiRyiQIsUMYq<*F$j)+K>
zKMl-yo&}>W2i%NzpuMM_B0M>Jr*2-uG2+iIDEY^7YHV;+p7R1`D6w?HfY@|_r(AAj
zT*ha^2Qwv4w&5)iTlKtH7(GCrw89d51WT4ao<G=;bR;Mo!@8Z6{HxDp#rCzr2dgf-
zBr3H|=jVDP|H*o2eaZNJ0CZ=wkTtj`aG3mOPGOiHvDGJdaUL<_``<TKt<M)iHRZ*a
zfJM*g$>_PcdG!+DDwx-SfiY>Ora~YP4|w6uSp~Jmu1VRRT+o`5E}qOGB}bR7i*QkY
z=QK%=yGdw@HdT<ZshrQ)2yR$A?$TPRmm%eCe$oIX-E*#E82|a%;mo1Ex|NnvUYOV9
z-aky+{yeG71ChqqJGX|6^w~qNBp(xR5ifi50?Kbd&#cG-LWx?%j}@y(&TVEHr~tzf
zXijcSBp0ix#dvRC40ZfcqWNNSz6V_T2tOoxrFBq!X8(V5R~SFV2BVSNN-BTQYb`C|
zf8*^U*9kD8WOk=$?t0qTpP(;C@HNzV!d97982pca$~b@Z3fMRPgWL;b0)TCyARYuq
zG{}n!h?966(qbw#D`Pf0EpxWl#D&a6=XF#@lyt7_m5)Bx*ys+r7-=|KCCm9G|3*|E
z3sFq*z%Ft=GO4ageX$)b;PyAbJqzlXIA4VD{M*EJP2Ic@wD<v*u<^m^>e~6+g8>1=
zYwqJ9L0E+CVCkBxS79S}{E0)y6J4hZY4q%zpUtA){5{Cbk2t@(nuN0o$N4LfFK>m|
zv_v&^QWqOOaF(PkaC$K=5}j3NszcWK_%<26B2_r((G`iK2pD&ub8odZKTAzn&AaVr
zwvf(;f*BmIeUA!ggE1r{P_yi5XYR`vZ8}J+oW8RWlu8GJ=0bUt|2BW2+J-p$+0r&g
zR$<?u3GTv`62Z41YB?%G`AvNwStjb7nu|3{+oWL_wR64{%dM<T+|YR#m@~^>&~~++
z^qX_L*U)8dE|C8H2Wvaxmqp?aBOr3zco`-F)%@r>t&D)Du9ibph=qj}Dv$sTBj24?
zc>_-5&0wXK=$)32$#_*)Gb}IQ*z3*<wr$0vzn#<sw4h&~kFnLcFNK6;HXzz`L*t*!
zB#p%ut(xhjr@dGVF;>ucI)CyN1c+kJ|2mAqnQjyZYvEd*RTV?6iU3JuO+oQ;(K3s_
zz7LO3*Tb@iVCb#PIAY|*^#OhAptz$(-XHxcD3*xw6bmuAyx;T<#u$Rq6mz+<cpoWe
zkrSU7bFk69vzHRyuo6{4y9FP{<W$5L%uS}yFUR$ES4Bzm?f(Q7n7e-6?_FBu2tDbC
z!pd_(xviPTtQQ+od+wgbbd;2V!<E-)S(`RvbR?$|5q~FKXP}C1aB29vp1S`8C7pkl
zz;CPU+w?a3CP9yu47@PN6(~lfsI6%=nA|d}O<0YwJTw>pHw|9<Tp+Tq$W|wnJKO#y
z2M`_@1<+IJ+>GIX2D^SV%umxsQA3vX<P`^7^NsKK<c#{QRNDI(2}A9-nTCG^?P<6R
zvS}z?3>v4`<*Ps*SoUpZh4glWUTvY}dG`5mU<MWcGNN5qd2m~%zVyJUbb#<T-bXEY
z2Y{MGJ$}=;*4A*Sau%V5_2#Zl&6R;p9B1eJArbJ4qX1FmzVB}_pXmf>hpGanu)+2d
z-br)h!?NlL<W72Vaop-E%JnvtYH4k4ag&BdH)HBMb+!4;dkTB~PGXL-3MHjqP2MzL
zCyM+nf&T}$4gTj*0m$2ND6w9OyHePUF~IXfcFanK4EcXGl3#6=58n0~*h7L~KO{#z
z8V}I0zGGdEj>bPc{?Atad%(H*`yBKdq#)biftmu}CUu}0>Xnt1GT}l?^(pu7;}B~|
zFMx1BR97HCnEfXa>5X2y7qN`xC(}#oezrZ^hqO1;8xAI|x-Njy1APV{iZ-18OE4?g
zR?snpnk4jv5AF9kDwEeHo=ONW^$2GZl6e54z0n@irI6e$AUxx%+|<=DVcaRiAoriF
z{5@c+^Zbsu&fm}2x(Z|)|4J$8pD8H)JFnmTg<SmKg3X5s?6<bxgZe*5+m@qDMh-1Z
zUwsk#=B`HhiS&w0TiV$B6}`}R_R3E-QW^JX-*bB@7GOf!Dnh;t=57v8@)S4rsb)GP
zKdZQ}n2_Y~X7wTm1ajx!tIy8*vc4&zZJ=mf30_fn=qknNj#qvhRqc4Cd5KQ*GCo4g
zE=S4T=?x0^+`XJADPA#GBU`9L-@lj2A*TO%MtKc95x#dt&<(z+2yYfuxdr7`8pX2C
zVO(q)%MR;#6emn-;uOWd>F%^Ds0n;D0+r<1iM<b>>&(3n#W-cRVOd1j4Rqlx;sTkR
z4^xlH?(WSpD)dZT;kqhPNgt4_CS-Xks5H)RL;Es9bJ&i#v_3FSXE7@Jsfrr8yx7T6
zp^|h*>f^Cgtug-I&5A?;zl-SvT4&|yDc(3q`qyO07YD)dq{hgRL-?KqDoM+3@CdS}
z@_A{G)<<{Mj(F+^w~M8ipj|<G2IB!w!b(z?!|GMjC!cS04ZxIvE8J0$Oabq`d$SuN
zh|JT*hh@#or3X1|W`2U6P_4K*g&N27yW=5(>r`?KbvH;T>Syc6LZ97Y0?!(<`m4l!
z5YP~oWL=7B*Bm>#bZaAG8mRv=v!Mo%M`i%fy^rEO+~}u_F%hp46JFUAy1HEe;bD&r
ztaApBKb5RI3xG^WF#kw>xW^yRs!<&SR^n+d!_eKeu}xIRfeUesIS!K$+A^50ag3*A
zdWrAV&#w798yK|=y1Ag{%X{6v=&7*F<#d(G`_XClN>|{0uDCn})FZuCvZ1>jHC!>w
zewkL46}n#4v)6fR<PKn4>``H}=!tsGVst?8VLdbKrqVb!r}K33Y21+VI_}Q-<kP3W
zb>i}pfr5WyXWA22FkII~A`b&uw8Mvb8e+U`>cqLq-3rR$?eZB*@}}!}<=?B``&5zs
znY)(Je?#btGu$76U&LoaUtSAbh=XF?HH%(-@<q`Jmob|C7dT{hw<K%3S7R1*x<i*Z
z;@C8(Xx`#D>0*$5ZdE%5Dm+6>c6TlLQk<>An-}eh$ksQnpcvb(_nS0&bRW1>P1vqZ
zN2+;tKHPIuAvxs;+o*!MA#34`ZG=ecEsob0nHzGC5J`^~S(EJSPYE{+^0qKV^wV;D
zU~oM6wyf2_^g%)#ldv?hl)rwYM~hp2IPMz%YF6wPURT7<bP%)lki9}%y}$g`1|@%s
z!t8L=oa{eT+R7i*$)WHBwQS%jqdPW7f~KxD;buAsh&ZO^8AZ45wR$Voxxoo^F}tQp
zKeA<Q<gC+If)oRPF(#&*c+FBZ-GY<4pk!XRnP`qYT9s1a>mZ}tYhzRLLB}gNTL9v|
zfqV{%RNE^=1Wb)Nb2=%OSYRi_B3y24g_b;e_f?}qLhZdgHCPN0yL+LEGEm(?sErlv
zBpwZeFS=(hCPGBX_r2dHh&qjkX=eK^A@7?vF!;7bxbq)&yWLps78~Z7>9(DY>_0H+
zTD!i_+b+~OrvwoB;W6jkNnVAV+gP&^8mhejf2}qWk@5il)xG|SfI8Kj?;XQRd_Kp*
zjIZ5p*T~mii+*>Pwnm6w0<l-yQd2<s#A-^P?Te-TM*PrBVf$9R-dpz<j_h(|Wnoe;
z@ARxBr8>QbJl=%d6Ej0Xq+wsIv`Y9h`^CQq@_emuoPHnjNP+mrt!0onI|rN=x;mmF
zqJa!_xn(_>5(;)<PvbH3erkv69xMVXPWsUfl@QErZ_Cwq1-JE|pc~lm&Jj+a%5)dH
z+tzSnxSaF0^`q%l)Rvgz3__ePTvPA06Md6OH*5B@+t(`SXs%<_CP)%n*TcW6ym9QO
zkj}687}L&YL51XKi<ctT_HSk{!coTaYDfj-+U>tj%M}<t64A3OlX9TbbHg4=yWTr5
z;*e^f!>k|qp|3&xFE$iXUsj*LNHq^VdOBTNcIKS#;MRy-f*)LPDa6HjL;M<%O=Fmx
z#qVC+OB{tfQyt<WIN{_O{u}`{A;!h|IABKg7%MY6p_!XE#jOT5R@1(0P?Rs%gy%YO
zuFR}C#{k!FgnO7I1TkJJy~-grc^y;x4JbRMEB(J;DEm8K_&4xzv4xo%+&(Vuv3T3Q
znYBZ%oAupf)^0HkkAF>uQ@YZIxQQt?N;Dm^)8Jg<>FSt!O8EF$oUq~FvWhpbY=ho6
zxq96eE?1@*U(ts@x0BTb`5qy&%BFh>9!R0ciP~!>g5p(%vJ#X(A4sjp+rHMnK}r~)
zc{A3Q=Ss6sXC5@B$@_XenyVDJ-EWF3Lm~&MXxsxJP@c#}bvWGlF2iMN(;kqtpA5RP
zJSu1f9D!5(3z0{|Yb~08&1lvg<%2=Mlb5+h;)tY_RA(icEtif3-q7G<ZhryIMD7lB
z&UY2b$pVwn^k4%&uB&p_HwwRQKYWT~@0v2>U|^VHmH|LX&SaBNqPzDoJ}sg)&&(q9
zIj>#AtB&#t(8*$8lHEzck)nFJl5PbQHzfDjTKcoSnq^>e=}^k12JZNl2D-8#nwDwR
z%CTj{i^}Ral`_TbBFwNbBj>{eo-3f3&fZ|t*hSjgmS?bukd;0D*}$(OX4Oi(+eAs8
zlMJasbzR?M>`C|?jjt3(K7Kl2GNuUMgzw|4Y@QuSKnlAqcu~SO6j*Vt^}^`+ZCO>^
zt#gU(RNE~h(;Y$QE-^F&0J^r+>{%1`q7WFl)kyAuj4}UrBZ~V2Cp1#MzH6saaCaZ4
z@WSBr3+YUYDStnkpCH1`Fd8y1DzosxZ6db7dd#Wzj%L)Yx6is$Zw<)z(+qFR*dZ4H
zutQhyxR$2{2FPXh<=XkQ#%Or<R9Yt)(b)m%KN`P}K$Ta!)eg2_y)X%1H3^n_sL&2F
zm{fZ#E6ft3+rWTvSj4rGr1~zk&|4^mF?g*gE<IS~TEor5yj|o~;r<}*sjn@8baSpo
zYz(#r{^^u_pP2X%*=~0Yqo}l3H#O*6_MxJ(xITCaoM_dBWS9%}s;$*)yXMXynofrg
z?ZERI)4DyQ7Uly;nlS#S+H&FlqQ`@4uPUYL{Xs}n`{RCZO&3@8|0^}{KhassO<<nc
zGn{iN4on3bWVatWhF{Coyz<f4C)0Q1HZdS>S!<DNDdI5@N2)f>Iqa?$m=X!5k+y+l
z+UmcvhjtM+nk)@cu8$b%e~0>D=WL#@t_*KzScE@`r!VQGGCt5xdGMI~yJbywtaoBj
zygPr&*7FjTyJ1v$+V|vL=-<;tx);{YQ$wfKs{D6V(Ks0{;w4>CV9uEVbU}vod!0{_
z)X>)=;dqW^YF~FOn~SVmdrd2*{Mr<AM8VdCTB_HoZzPJ*MiyUVvRCFXgwQ~zV5XAy
z`jHTc+&f!}F-|OrxtHJ0OCFq1<2gFNx<7;r71K^!f+p}MwU12~eotvzz8^}?TT8Y?
z-XWBJ&>_J!${1~RX?wN`PJb*4cH)Q&LiDkMjbgbEh}Tm+CWK`;=qvi&y`+j}!0wzK
z84kRbGD<`41`Xd{?mz@t)|$yFOZz=K1F`&bR^DXQdn@75iEh*B!MA4&^pyzPi8xMO
z_Y_uzh!dpf<*c;=Ri%S1o061&{3wqg#UR@>zv@^`^{-~wSz+@;gO+3OEs<-yeJZph
zk*p;u^PugoIB&#RH01@)Lmp_2q|;qdS7-u>fOv;X&C{Fh|GMo0prwe||7f;IbI%7{
a0?p;miHTny0XBdAufF5I<2Crt$^QXRr|zHt

diff --git a/docs-vuepress/.vuepress/dist/assets/img/start-tips2.7d8836f8.png b/docs-vuepress/.vuepress/dist/assets/img/start-tips2.7d8836f8.png
deleted file mode 100644
index 7297ca2ee43cc1c617d16ae5d49bc16e63bcfb44..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 51539
zcmeFZbwE^aw?Ddv?gph>q@}y1L@DVMX_4+6K?P|61!)114(T4cL%O@984wt1<~RDj
zU*Gq<_ndRj{oQ;1xc8oCc=mku+Rt8lt!F>6)_R@+F@snEh#o1aDghu60H`280Adx8
zRrIm90e~k@01f~EumDh)J%ENp$RYq0G6Mk0XOzDvD43s7|H7d6zb+yU08vdlXAft0
zJ7*UL0iFkdsJ!YEv|k*M={IKm4T&abqh@1)3bdV9*q`=c@<E6-yq~HH3g(*H8cM2<
z6@Lqbw_)Mp@)Csz034k>+_aVD84L`K7%<n6(x3o106M^AVd?H7r>Xh)7tg=GfAjxy
zIG_40J21}ui`O6We+>{@S-V>zmDfZTe{SV&>4?Nt$lPz~;^qMWsIQQ8W^WIdU-%0W
zler-UMB=(%*!FLD@E3mmH@xz@jE=Sfvdm9p_2OArxY+^#9+C_&cv;#a`QR}i@dGC-
zdnY9R^;~I7I}0l${#CzRj*ia1a1#>WfBsK=Z2t*cSUms3)55~`5B{4j$UBh_erWIR
z^3uZh_sRd02gjG5$ol%7n2|?3J2w?=<Tu5ydUJ4A`-7dHt84s4w?}I97q;_M(ftcs
zx+@^-@^ANASv*wx3p>43|Mk9q^R%&7QvD0td#LLCh25OB|M0hVSA6;x-NFrt{(i5g
zgRb0P*v?w@4^KZk9sR%PUiNzGe_?lrr+;Mdvs3s(ck|T#BeRX0(jOfi-H~_x{aJSQ
zs(;FR*y$kq+TY~2wD^Z?*6s#>WU#V+sQ6bIYbV`5^1FD*|KacQ@^`!cT@ThTmH*J)
zy`KKL*TYTc58cH>^H2S}uz2*VZT-F%cnBy0kC7h+Koj6ce)s^9U!#GCwGXmA0)T?E
zi?5r#t(^yh9I^*lGpIUQ@^CTmKj0GufM5ObR~Y~}o%!9*KonU2pjjg2;D3(1IPwqL
ziwFQ{BnJQ@(SOj`F#&)CNpEMh^mOz3&F=TGg6!cq03kpIPy%!SGjJc^MoK3PNC2`(
zi5~$PfDT{?m;si69pDJK0p36W5DbI@k-&T4Bai}Q0y#iFPy$o{wLlZl26O`hz;|F0
zm<LvXO<)f=2F`(N5D0_`!UvIpC_(ffRuCtMA0!Hr1}TCbgS0`0pl2XkkQ2xg6aab+
ziUh@jQb1Xt0?;>5J*W-T2O0&<f>uF0pcBv)3MvX73K<G5$~_cb6j2m86g3nb6jKyi
z6ju~Kls70bD4$TWQHoJ&P})!iP$p4UQ1(#HPytk2R0>o^RBlvJR0UKGR3lUyR5#Qh
z)Ckl>)NIsJ)CSZZ)N#}m)P2-TGz>ISGzK(oGzl~nG+i`HG*`4Bv?#O`w0yK0v`(~f
zv{kfYG&njwIt@A}x;VNjx&gW^x;J_#dLsH)^lJ1j^hxwh^m7ah3<?Z33=s?!3`2|;
z82%Vh80i>g7_Ati80#2kn3$N9n4FkWm>QTCm>!s+n8}#Mm=Me{%uP%f7A_V&7C)8}
zmJyZ{RtQ!iRv}gk))>|{)-^T}HY>I`wg$Epwl8)p_8061>=Eou>}woi95x&&937k&
zIKeoda7uBya29Y*adB~(aK&)7aP4tl;eNs`$L+;k#l6HM!Q;SFz%#+~#EZep!)wKx
z#XH5v$G?X!i*JPQfggikfZu_?gbyPiCEy`YC9om@6QmN<5R4HV5@Hjw63P*p5&97(
z5>^t95bhIU6Wt?HAhI9|B1$EyCz>WYBPJ#0Bi0~xB#t63B<>^rL4rwgk3^BgisTJR
z4oL^eIw>kCGpPcpCFyI@FQi?hn`9VdY-FlrFUTUvO2~%Ej>$>L1<CcueaKVEo5@!w
zP$}+Fs8YP7h^45Yn4-A4LwiT=j`f}JJEeEV?p)lZzAJmz`fkMCvb&RauP7NP6)7Dk
z<0xw>7pc&wIH<I!ys0v%x~TT4$*3i$EvX}@E2!saP-r-4v}ycla%cu=&S>dqm1$jQ
zlW99>_vt9;Wa(beeV}Wh+o30=m!`L;|3D9+-(?_YkYjks@QI<5;h2$zQH9ZyF^h4S
z@tTQ^NtY>vsf=ln8HZVv*@pQ8b35}f3q8vdmH?I_mN`~zR#8?v)+E**){A>=_w?_D
z-K)L#gY7PxDw`i$5!=Fj{QENZUGHb#pJ2ye7iD)~PiOzmfx;ogVaJimF~W($Da>il
zna(-Nh0Z0$<;0cEHO-C3EywM}UBtc0L&5WyCxoY#=a83$*N8Wcw}%)0K<L5C2VWk{
z^O5j9;tSzx;5*^x;J4&Y<)0A17f=!a3)Bff1vv$+1v3O^gh+*+2!#o?3*8Ef2)hZF
z3h#)ph&&TX6PXqz6V()r673a37n2tQi#3T|iVKT-h*yXoNpMRzNEAx^kYtmzmi!{Q
zF2y8eA(bVyBF!NEO!~9*iVUNSg-o{0nk=)dmF!p9Z8>(i7jngNhw=~P-Q=s~FBHTT
z0u@>xqCQl981Zmekwj5fF-37niAl*;sYvNqSxDJmxm5*SMNK76Wm=V1)l#)U_4tv<
zqrgX<YItf-)l$^f9&<c)d))8@<;kNb2~QT(S=F7?Yc&83RgDCVMNKwMSItH(3@uHq
zRIM#-KJ5VQo~NWw&7T%NJ=c-fiPf3cy|3%3+pb5bXQEf2ccK4KKVE;ufY%_<V8D>d
z(B81l2-8T<=&RA0v7+%u<4qGGlTec>Q#Ml{(>^mQvzKPg=7i=J=9SOTpXom<e0F1@
zVUcZd_FVOO+Vf*e1<NGMJu6wO4^}(YQr7X-+cr`*@isqfrEC*yckE>B67BZw73@>&
zp)XWkWWKm?&~V6eK)lp{S>}l4_{_21iNwjlsneOx*~fX*h0`U}WyMw8^`q;to0{8K
zcaXcOdz}Xv((oDdyzlwebJa`QE7c3;t><0oL+s<^Gw93V8}7U9r{tIGkLGXb-yXmi
z5FD@?C>NL&1PXc{)DC6_zX5N)Qht>mj1%k-JQVUEBtGQlYyH;^Z)o4Vdb9pk`E5}s
zL8x2kbeKd~<~y`^_V0$n1;UfV;Sp95{gDqM6C-b;ETj6P`Jz8XBVue~hGT_eGu~so
zcX~e+Cli++PaN+Tzn<_Uq2>d_hlme9Kbn8+OB77ZOu|X>Oj`N$_)}dnOY-~Vn-sg0
z$yE8&vNW2s@U)9`tMsu9*^JUm+RVtztIzhIXR?&DYO?QTC+1+}c;#$;(fiVqE1FyI
zmFjEc*V{a&yp??I{LTWAf`USt!q_5|BG00oVw2+UB@avLO1Vq3$|%Yr%Ykyw^4)LG
zzD-rARkT-%R+d(=R;5*wR!7u;YJ6*sYwc=R>I~~f>mSv(H%K&8H}W**H8D1&Hj_8U
zw&1k9X+c2zAZM*Et@~}ZZR_pk?eiT59TS~eox@#fUA^5(-5ou0J&<0h-ljhBzWRRA
z{@MZIfto>~!RjHQq3U7b;hGVVk-G0<-y23HM_a~Z#@faoj(1O}P7F+{PmWIMPR&f4
zOs~vX&HR{sISZZhn!BEVwSc}5u}HL-xJ0v*z0AH`wj#XJy!vo;aP8^Z{JQ1(-iG_e
z&E}ge{H?@o`t5=r{6Cs@ly<)F8t-oIx$Ir<haM0gq#fQrtU8iC8ay^Q-h{eA5hqcn
zl&5(=1%I}mX`U^eJDy)(M8GIv`In-XJy-fy+t=PVm^Ytp*>4-*YVZYwBLd-K;b!sM
z7C=QFQEZT2$w?jn;2Qz}>30CYG5(vq{JR9`Z#F&>|MF9Q<zMMv@ZW6e-&ceIAg>hw
z^pGb{WdR@!iP>HuZ4%_SCh}ZI7C;dY_>+OZC3hPE{@)0MTMGc_i3r3g(oV!=2Y}mY
z1me0Dfw=vOwCm>pp!NK3cKWZ<M8yE`d74jMUw*P$`EQK=>4<0rh_OKLQ7}<KOaKZo
z2$dLw=mhAIvZEsn6J+|UEC>Y^4IKj$3mXR)S)iH-KmnnmqM)IoqyKWQK!M2X02(nm
z2_v5z2C0?>CX*`}e{ftD7PI`fHgfIJV-|tuZXwt>6nE}YQnB7+yU)%cC?qT*DkiS*
zP*F))MfK5B9bG+rq)BFJWo=_?XaB<8!_&*#$Jg)mo4281@4_SE6Fz)QO!}0ZlAZG<
z_iJ8$L19H@Rdr2mU427)M`u@ePj6rU*!aZc)bz~k-0Ir;#^%=ckDXoU$?4Ct^9$JJ
z)i1q30P5e=`lH#u=tYdw3k3}g6%F&3ULX{2WJV=MLucf}Ad%C;v~VS5;t$3mlaI^#
z)`rb2pnXjK+-($xf<<tZ75YoH-<ti`6bt#^((I37|Ilk5PykSVCsY&^RCH8SRCEk<
zWWvBgT3Z+xSU6a}6VBfg-tR>4D-r%l2qY5_k_Q?Z8Yc3O2p1cd=>Kv;EF!IDM#LO|
zhl+HNiBX9G8Q|6tni-XK3=ZYJQ5N^j9s=nMi}daj-;v&L)$ax$x3t_x0Cu;H*Xq2S
zV%NO0>nD6Wjn1hD>1StmqC9*8OjnB#0KqWapi!>+>cHdKkC}68j20yX@Kz3rd$4Q?
zABh|omLA{k*;t>ZJe9%!cp|BMwro#Ww45{mNr$Y){vgDJOhO9v;nU|qQwZSXWEnrH
zBdE6dptNTp2oL%}`oVEm*t->t`(}(>$-{lb5#rmkA0l4sL(wlA<NMpq8K1R!0|FEl
zji_F-t<2x{OtxQF`2;Yp77-G(!k<+s)L%JyKR=wgu(|i8CDhfEb+W;CKpHon;ej=^
zo4_kK;80wD!s7BaEikXk8f=!gMhTgO*Bb9;wr?fz!kjL_xYSq5?|8cwy!1~l_oU^;
zKnDELGZHQYvQlA>z%i1Jm?2GU1wPrUcmtMqIq!-tGnYR!xo!lR97GAE<{y@l_8IVN
zsiH?dm`{ibex>0)RRo(?c-@^rJ`o_`&KT}&2{JG3Q6h+rwb8WebiWq!mx&l&Y9`Da
z3WQ9)xYdWHRcy8_OnKeB4Ddt%_-s(iYyE@eIZa>c%5#lM<&E|0#&28Kw%}EBZy0^|
zcc1BYKj#SU@9njt@uLap@yukNBb5c@m!}8-hki}tJZT2rMwrk@|Kj>#kh)BBt+efG
zCA6$ok~FJr1%k7)L|OB`zeel*$hd#w9j~57KB1EvG348lDK<|UfqX;&tFdhX<Osm1
zr8*qGxP9(5KIc3Ht_(_SnRB$944OSso|oGDaBXpxa}YMwQU?zght&9wo{#u#O3wt^
zA?cq9$__Gq239WBYt+yi{UV|kUE4O(zq}}Yio7KjNd$J`|CZ0I|6%gqSSQmTeDb<8
zi7cTGFw53Co8-WAf2=Z_K>0(5=K-@;(b_T`*ue-uFX&u++VH$%&rE-fJ}kvKGQjp;
z^BN()G2#9XN9G9X##9@gN>%2|5X@*(ENg(zdF?KcHqbl?DWTtcK3Q)K<{b)361m}n
z&bNziCca8KX%4L{HR^B^JX3WtV`Q#+SQV$F-)~6#p?_Y-#h`RG6?MJr6;H8{S~C+|
zZF=0%stK#6mid4vYktc(lk=8IY6e5aJHMA@CB)a~1|3fvUVQ$XnwI2Ru4dFCbou`A
zJF}IVNq{5YFv*F)jSw{?V7tv6J3uj8Qni@7NH{6i#J;9hW-cXtuYa7Wr%BEYu9!_O
zYbI#u+o}gr(lr#JG&G!@ht_U1J8uxHs<LffnV*7Pcj+i$2ib}%C3noA=bsa=LQ7B=
z1%(>|cYU=OFK4r?<8>pr-a3Tgk_N8GGUx}gb(y1emCXD2U+Y@6G}fy1P6@`Vz=s&T
zR8w@GQgzFV3=iJ<JZ$KG+7li`;gh(A03J<Md50dZ(URaZZDCA$;&VK3?6dl4{p~W>
zq!A-VapPGLd#{vm=5e=*;E;F6sRnv;XvyjTKDP8=*{A3#Z@xy3{^5B(@qK*eT1?jw
zHotHqbtz%f3k2{A9ynOQc6cgv0B%PBWea}OVL?1F>MpktjIe^sG2_n4k3KeU`cP}S
zQW!aSQ;D6>;tmyV4;}Ilz?(8v1dthf;|XbRu{aj#FekB_dk2|jt}-kUL;&Rq{JSY%
zb68TpL@$2iHR*ArBxXMuwG!(&0?bp#k=M@%FZb@;{#?F!;&YkEOssCN8OC3`do!&j
z(1`o!L-wMwEdl@q<srUrf>-NX1i>RM2}p6rz|dWpe>sOu)nH^gJMjhVTOUz9BR{th
zYdZ&~19H$C#6Elpv_=k&L(m*};Lpq(3?z$Kt$!ux_tTjnM=(j`10e$lp!>(k&$7!^
znOnFyTtv&qi{s=l(EMNT`45?}{X0w)S7&&6wkHw5@xn5d%=R*}-dgQtU}yCIavqSi
zxnq9X4!*vD+&IPZK0*K)qzGVn69KGyn9+v(j~xF~AOGKJAANAW-<^*Bd=d;>ROEi6
zLH)#Pvj(r~<%3p&FT@?7<*f4_!D(jl&4sIJICbi}^3C;*3=ALH!RWq@TzdrAN8H^o
z4rJpRByh~#$GjE3D2v`n0z(f7ua9mLBR;G<h6vcs&>t@%04fBqJ+Ff7bcWzxo$g;L
z0j7$U{SjNXb29&jOaE?RntZY3^Vk~^a5v=gd`#w;!W=H8{BKXq?`SD=5ZDCfAjgem
zXc;`PD)t6F>F<Njzai*%O=$JMPR_JL03F^p4#*MJkr_GgAxEwC3GlyCCZV2WZlC{0
z(*J+gDPk1nt*Yr97b|Vl$8gpCHf)!3hg-SR=%NFH3)7Osb)=Fjp3Uu=Tz+3EH8c?w
z&`bGAWML=x^-w^cz3aL0hfL~_4CTTMtQ$o?o7d|IfW}9@>mY!yNR1+sodqahLh(D^
zou{6@dv;OUuyg3%mcAT)!@9aR^6ttk$yeORYEMsZe4$XWh0|d+c#-nSPPHm(+OfuC
zj}vDKyDPKcGE=)N_1xPM{Gyj4D7@^3Jxe$uEwYkMBT{v3Qr_XxOp5EgIP){G#NGv1
zNY~`E37xk#wHp<W`A&)a0^Q%cHx3km%CjTx6KN@u0sqyk^Zn8H!T3B~1_W?cNYzO8
ze1>~-W}fP#(1)M+J7{OuKhQqcg`YRu*nj>V>0u9Z{uPR%b|bPw+JTqB8`Xj_W4&Wy
z17a+h?wZKqp{Gjb2y$YySMZHbTqaChJ+sW`x?_%~<W8n_AlMmi^w4^dx)&9{Ujgs+
z1d+q8#ybd>q?mBtoi~!yt50N98k#4@`f<;uSsFgwGpJOx>52#`RNdx`@)SBD3=^7%
z;5l4*zuPBfsUK&HSrhs|@^<Z6>jUjCQ86ycQ_Z&eu(Q%#zYj(SWnqHcoCXmGyg|#h
zHai|;1q%ui{g?WE1Xvq-B-2UL<{faXb<d%lJmfnBF3NBM*p4w`SNHb(B?jp4m>a<&
zHOk|C_cx;ChxnDbSPfe|`Xq}i>PvZbU{6*YH9F{cr`B6y28^qwbIU`p7(U67CQ~xi
z==R<H@JeADJB{vRk6F-|8As-z8aJ-e_?W|W;3GL_M<z<1k_{4PH`W2?XCk&~9t;~9
zMkDJQ;l=w+sut(8(mpp&yrxf*Exa836IsH!M?MKx(CO6d6Q2!xc}-uzz<nu8>^rvs
z#<zPvCBQ^MBf?j@iH#IVYjr|W&h1bI;k@THV-LTv)QQE|JZIq`P??hwmDHz(TCRq^
zKJNZuH|mos6m3oW@I2g}#q6<q>g1gK;G4AA_iiAJ8cDfp1z4l`7;n}2xW_!_kOfn$
z7Nqu7?$De<dvSDK6meVY&Nyns$*&gQ^Avg!ek7@1tcWM#-6-+}XW;J1sOB>Xz8^Va
zY$<*Sz&tN$jn`viuNtZzY;E!72OZ;BB=^@!he0>`CDx%*raI;+5!dFsuBT+Xp>>5b
zQ=S92UTXR+&lEpa3BNClE{v1Sl0}`2F^u)HVN1}F+c5_PaDIl3uf=>^T_!cUtyHf!
ze$8UMB-O>}Wu79ecb9<<KM>P)MTWrmM)CMO6hc^aK<*s0B$uia_?&$VOAQ~2c{_`V
zMsp@Td1C&m$+_@G0;*UR>7nvD<77~Un1?(?V2e@VeN<SE>xdEfb(3e24|7)>tVcBz
z+nM>aJb_ct9HOVRYH0kbhhAj+;aPQ~48$0R)Blq0((yQAxd%=QbIgVL;Rf<w=*Q}%
zoc~~C>2ZDllw-Por00mb*jsA4UK?q17zq`o(yK^1%D2BNQl&~RG3)o)h|Kq~vSA?Z
zPdkwk9S(|wR(4C%o8#a6l=v+cw`9V_M%Y5qJGwz9?M?^p*Y9;#rv@2furQHm#)^ta
z#qlZ$YLo*S@c=qABZWj;FRq~xxirE@$$4OJ$R1p2VbmY_DyBF5hd*SZ^GK7J-6&<Q
ze)p}K|KV}|`r7Q+H+R%vpoxZ;<t9sGs_uv|041U8yN|iSn9!TZ$51LWRmo5ir8Gwj
zBauruST@MytjqUFS*%c`2FUD2BIYhZYM@V28Kd55=esOfy~SE5V5LC%Y(IkvR{0sm
zxnh&IGQ@PXb!0wm+MzW1GPKY7l696*%n_QubECYMq#K|eb7g#p03<3HoxOOsVemIW
zv@rCny%gK9vTf)WJ$_iB@h1<MS--Nq88#)xqZV=lKvfDGHKTgW4qT!9&XXD|ReMTr
zM61F7L&*ID*1B2*plo9@<o1P2u7A_*%X{S@&O47_myWBvAee;GcfkQEHQn!1&@Ybi
zGmzP@iSnbWPOELhQxXt@wfZ8NInpkNye`L5dq1;gU%S&j2Vbz`))1)v`IsXpggBv<
zGx#T<oqoj9gmm=wWZxF2!Xaf%KYp6emL6#xn*?#ROiPal4!AueGF0=WdGfN$&^CqQ
z9>0oAYsXTHMVZfW?Ez>FjP+w6&)!e{6Yq0XZ3zTW`JoP%{j&DmthT&3yS3;=85YYo
zE?>5kM>oUQ_$TvEI<q4<dU5V&zxt1|3}Ot%^EGtM-)q^K`QcLGqs+0a>}G|iQTX&E
zc>5fD4O?DUK5s#W5@jlpzEC&Pnj6mk`2KK+{vc2v4*un{MZ*Qb4!e-kYnj^{XK3;6
z{R-Sl<!f_Yq%Adz0FKtd(e!gyWjF8<1OTSKaS)H-3fccp*+()o3WBT8%r9><;cyYy
z=xtdc0vOpx02fe5cV&KdFVFw>(_h4Qapv^CGqh}b4q|j4XRB6Ld~cc}^H1{G{gdK`
z6Q4<BQCUX&X$HUl6Zv22qs-UZH*Y~G_lCq+{nH{%p;ot&lI|;J=9H5El=p7&Ai0w2
z3TPswI?y8UtEp6Ct|M!1r_Ul;?`Xq@m9+s1KY?8ZZiVxIZ$-=eqoOC-S>tW_A8pQ@
zak+s79%o0Qw<mie&He8PpalW++5a4Xz|O;NFW_og`WBtT*%6#+pOJ<F@P8wtBF14n
zE#bE*9wm1Sp^4ut)^P2dip^C%^(MU11WD5KjXd@oxx1HgIrlYUZ4Lb+V_c45l2x$5
ztDX1r#<WVZqEf9wJAI}G8|s5U5kRE4Mn@oXCkA1dQB+d7b<+fM0H4U0r=&^r!Sn|i
z3mC6+%zPq^%fEY^ExPAx&=5!2ZpDSX{z=(aoKl~+D;}EQOOcanGGOZsTBP~jsLVu{
ztf!47qo7V@w3gUN|5=7gQsj%nGG4U|{tpof5t0CD;R9#dsx`H@wK06Ot#wguQPi$I
zfuA!RFqL6^#~0d9P?eL~YlA&YK+c;}+FQ=|mNt~ILF$%$Y%F{|%&3%Q5sm@MYq*qU
zJTE;ZihQfdJsNzrJ?y6xl1Sdmx%9+SiyfKvgiG_lAm-&2V<m@M<6MqaKLmFi5Ax!k
z*QtO&UmmX{Vq(^amU^q3l$n}eO2CC}zI||N<UKV%*2w#r8G--^g+QNwjQJRyI#qry
zxoH?P8QPd%z-nXQ<=e<mv5Zl|5O~}SV>>SGX<utQ$V<HZsd0cdv3h4*>{IEAR}Zz(
zJNKEE6>$XM*J24}>sr3EcTQoX+q^Jm9bJ=-k<Q&*b;6~O4KN6Xr;)U-ocECT$5O%C
zJOoxhP8})5D@hM*_iY@=bX1DYAB@ixx+H8>!mAO0&;=Sx68H33-g4#jNNFC7b)^U#
zmJ&5R$2;rkPm6o4Vv@T!F_v6IK@IUpY&53#RDC8RzJ6wohMYC7Tj5w^Hv+8Pm1_>%
z;wKK3`Kmbi3CUVouk)A4D_l>YRW>bt&U8MDKPN|1JE?-pRZ>8hbGau?U+?nmFGhcH
zt^F!moLqhDwYD{OzOGdtzt%<~VNYdi8_aYaNlp3z_lDsa!DM#i7DNp>f?bx?MV1<S
zR^H0=-EPmeaKproPv+so4n^Dy29YDgin%6=<XsDK1E{uMMw^y_%RC}VC}(X_MS1Nb
zZ<e_IQ}LM}rOG)ncNTn6lbKtxbjN0)3Fpr@h~gQI>sH-r(SkrPVmwu!r)oh7vfPdz
z*Agf5<T@rWwD;CKe{5ZOu%Tz^6Wggl-icpmdiQYq&QtdE^8puvhou6cF1`!C7x{0f
zs+Z65E@heu`XpvO5WogxD6nTTCANJTeb4A1Ci>3nGkR>}uT6qI&HkbBxcPvT<oQB{
zYH(HdhwXxcOlan6ZAUX^+l3J%)Z?<M@m56pniAxkL7CG=FR|Di!7?J#`235<u$#2Y
zRDi=eAyK6Dv}faxtRa!b>9((A4K1ZNY3Rk?(c@`J%e4{GE_BGd>eOa+PUkZRSBd_D
zZhlk}ftcGDfoa9aU_%MA4mZWR59Y6?Zx8?~a^?<B@$3#i9#JZf-J0+`1^YUXxmL`X
z22+MVYsu_?kD68yT>F_)if~X|<L%QnnJS8eRh7e_nFg<Kw)82MCl@5WJsSg-XzK-K
zLSr}H>!yT{1MetJI~TuXVfn;Z7cUBTs?%k_yXY}H%k*AzCSKlszvn$yGTEKuT-o0c
z?`=OmAoiq!w9ZlLfzN@loRIz;*v#DZ&E$@_?T@m~yF5)6tIo7``qTPPmF)vTs-9|s
zHMNzIBOR$?A8fRNl}ZA>y^)j~1(?inPsbcZJw=>_t8IZ#fKea*SmaLA+J+NpRUGa!
zYS?3qw!J7v8HU{@QD`Z|?xoN&(F>}N-x!;UQtNGEnX~5hl@#y5MWBgAxgFWNewzoA
zZ(AhmSnJ}}O(EW!Z1lX&>XRSE)rBh$V8&OcyN+Ucfyk-fe5z*-0T4GauQ=2D<n){?
zC?`uQWX~HeL_)nfhP)r5FcRO+m43%q!ybO(zD(3Y93Xu>5_}fzCWU6S<m2a0v?kG5
z-*oozyBbXymut7%-BUsht?xG>a4x7$<<g>R@lw-VJl0{_f{M{9*)y&@FB4EJew^N!
z3@vQlsM1kFfBNXi(Nv3yvNYFc)>2Hfe^9P%!^(3jSKFQ?V+vg;Q2)$w$C>Vi9|m5D
zC43<*H2&H4wQ;689c|}{4S75t*O-;CG0nQGsAwsqYYFXmb2+?)!Kc<>j91dqGg~!p
zetxHY%YxA`E7l_hx}}Yw4y-(b?m&f>Af?N*M)tLHABVcWX8xL<`UIL>Y~j9HENnMu
zIOCPjk!UU<`|3R@uPg3HtMUVGJXWVxnh#K0_R9g+w6&^@z~4=A@iKvuwWL|2=tk}s
zvZ^0E-z`2>kgZW@^yApx`+-6A!uuv(zu_|6-Z0T#Ocn~%ypjNmK<=uGTGH9Jb7Nl?
zuNc~{n<|!%PkIvPMEf?*O0aKK*En+_YU$d$x|5V<`;v$4tM4}-f6h!R*q|7e(Bl^E
z%JaH684_{7h~<8E1n?`f|B0AoKK_S0oNgKsUcK@JXS|C}@cWHe&=GA-o-cY+G%=|C
z(W<I;+bdB?EBai2jqo7cos*q!eXA1q=1(TROp&Ta%<J1hy|*x#3=E%#ZJOqI$=wwj
z^6`EnDTe^C@*=7-Nqy;Gzy}&axBC|>2Twi;FV4KQy*o@e)+|519#cYUKkZ%P7zobZ
zJt{EJ5bEFyrG!iy)ea;^*R?I=YCI?4#OBO(-qXD@htqXLR)VLMuja4nmB7L9`^NKF
zT%Pz6npG_#49jv7w}}h0dC4+qCrWR<7#GvO5MQ|KK3zHg#=6HMK9z7UnKpAiQ^z<_
zSd}n&(;_x$E9_KSGsA4n4`<(#FqUuOg;#vn*X1SqY>D2|m5FNKBRZcl%abM1#a9L)
zgmrDWwux-H?uif*N$R`-|C|{g-JIj8T&u(+&A{^83Vqc#ePVSd=SO+~`pNmhdW(b5
z&}{$$STVk`DN(*U$lC$$$)g@W?bLkYH<wYAyK@zoU&FUN;?_R4cMxGl$T&%v>Q^9H
z_!c;1CNGw;9U;%%+nH`?NwD@jAJ6NcnI_>hF~wT{piIHUu%YsqG&lpBlJcNR<DD5P
zbh9RB6#<YbSmynhihL$GK)u)a$%{KhQZ9OdPsOmNcK9n_6a9zMxo)H>o6fU`Y&$jK
zmgfWb^rqs){Jx>QRSYpp4}uM`<*uVb+*}sQXr_(9dJQ*@ZgkV;<CXLM=VJF@_5?YY
zVK2wFMr4~OxM^q0oNN*fo^p@R?>~%KjF8p`VXXKaj*xrFAg%8%H}eJi<+%p!!6au3
z=hU#S#fcZiP}zq8AGnB;W*XrpTP5}~R8@`KMm+|Q<Mo9F`x<YrsS(;A;j8h7YleeA
zjIaR@!$&+iD>ogOfcf!7k1-*kz3sz_u``vI+)f$0W1>O@&z{@po-#MY-~T@NcG{;^
ziIOuzHU9!4GosOP^+PXnI`0ym3l1|!OEs9NDhMzSw712`B46msqYjPKN)#oL+hTfY
zjl-hQ_Dn^uwROnqh8yOY1MBEWIj_yPpKJN%n)}3_OfN-2siI=RH#PZn2ao(dEwDFa
z_rsj3Dive&EZVjsy1?Ozw&~o(6n8pC01df>*R3@m?pus{XM;|TK|j^5MW}96lDfo4
zdyayzXu(LGM_W6Tx8ms1EBMrDdD^90oT};q-hcq&_|??FM&RV#Ir9!M{xZNe#_Iv=
zoLlf|Kwf;LH@^R7hvpmC{X*Sd*5J$fyX2iO%rOHra$#=HL__Y@EQvMcOA7`)oI)EE
z)6`xnJLUJJJy|eW<<NrFkEgrXC1rAqcC>f4pa&b1EcQl$xx=|HxMSp$u0JiNr7w!^
znTmu5i7ogfv}@ZXQB3cFUG34+N^T2eW>DIye8X+(Ob-iDooq}tYc^8C+0E4l&LBIt
zFLbE9Aeq~FtG6Bx;B-G^@I7y-^%6QYUu+=&rHT}|QdNCz3?*~SL)nN5IcAKG6E)(V
zN5d5`d+=IhI?qx2<H)ZL)3p>{%P&$r61x{4MxTFGX^&F!-qhKY6Q$++blek;++9HZ
z+9Yg$*$zHCo?AYAn_>P5iu4E?ye)0`dd#YKq|u-yd2fR5`ee@;|FD`65;3T{)}&dG
zWA6Sw;@arcr5B<kcS@pR5j8onyFL$vTpE1xLJq>X;B*8~MCoVV76{fK-4{}m(pNjJ
zwzEy??klBrDotEWH&F_es=vfG9Tf4}X5c?ssg30J5T5MnN}J}BbM_R@q$zf04B5z!
zQPvKA;9bBV#(~8GG7ZgyDz{5h9$&mZED_8pfF;S7*Q?lGD|C@pjcf2}aT)XROuFn<
z_psp~7<basZb1n{2@-s511>6!jps(v^;YaR8D?-xQXD}WIvv*i8;Pj*!u+eZuOKk`
z&+Cr7w~hz^^GuYG=0<p;3H`cRLub5<$MVzsh_i!);Q7hh#Tu1G;%_lAjqfv1_0#pM
zZWLkP9M_!*W?^3A8Vw<w#+g;&yv`|bm5Nl!cc!DJ7L>!ZX$dhtWz<pa0^6J-U#D<y
z+P;*Pw9Ts#Yw6V@JMjp+%+U%0Si8TBbhjnHAYJa)2;f~Iv0g-V%Lv>Txts~cL|Ot$
z*D{xzY_~V`H;RC6c8N36U(e76FSj9pPOX0~CrfTuWQ_Etw?AZF9D|``|6EWL-H2oA
zAAG3)sTk<L<8hdX2^der{W8sUocm?+uqOzBRi-`joU{r7j27u)Eq+l{b?X}Vwq2$F
zL#C^QNAUQtlCY!bgYaBUBMTjSBM|xNaXgUU8vKsbi$GM;%T{Rk<{?b^IIlyTpyB1u
zqIZW)qTJSo!H|T5N1b<67juj~3HZsggRpn8+P0!S)(4T600ckCRw1_}>8u1&+S8$<
zKNBPg(>>m652Bh1uy=f6JAPJ~#}+m|l5hdGdveOhcmku85q2GGASCvoUnvb^i+-ko
zH6#Gz=E`HcmiN44?tpq>oA6C1u6KZ5YpiUJcW)DJl`pW`&v~Q_qh67qCwCYxeSO}{
zL|%TvlyS1p#p_XTh3iO@&^OIc`ONz$iZX}@MyfK^!om_n(*Q;Bu`Z_T@8=BHljk7~
zh^*%yL<UIFYhuK<lByqF>>$nPn>M*>kASC&{`x&&bUSHGsAqa+SjpzMTFCgp5!IMJ
zzf@KHAwJ#KW!?OZ$+pm1wd=>puKTkyNb@6GKH~mol>aRM2mZg|<V=3@gw7q{ZYwiG
z1^9=2bKdHcq__9R1LP<w1ba(IW~KY5x0WOWMz&tsuYDrmOH*2Ga8bfGopGEsfzEO6
znBUzoCoBn~+l_X1{bK4s;!9^_oO;IxDt>s9v9z=}ym38ih9SGoa?^M255C-hywBDu
zSJJ<i-7E;pY!kk^cwKGmOwcA(6K?NFk?Y9a#F3Ps%v@D0yFl+&PMv189v5tSSh7wZ
za-n|}5c^dl(ALrIB9>%_N;h;<QTj;{wT`|Om-460UJg-t^@p`rNNbw^;1+D|dRjt$
zP_`EPMm#oxb?T@|@|?o2CW*Uwvn02qQPDnNmrTPdW(9ra0a}5!I(8Xx#$4wUhMFhe
zLnUyti^xaNg5MK}ztWhBcP<xfj8s(kyX-mp=Lq1m56q~;^n!!Favs^ES#RFb+akk_
z8ETg}KuSc|UnP`h50D)*9xngtUUt^C6y)Z_yjSb*Y(8V>=Ld~ABZq*b6SBaJWw<Zz
z#(k9k7jQ&HO#ao$zu9|xTX>S6MU6PRqhiJw%;e-0^jcelU`b&W{?x=c@hR$rN@ub7
zb*%{(V>L6a$vVjmKkV^75=gkHoS1ApqJ}l<jz1d}3bZ-7ep1U>Gv^Ra$Hl(l$Q>i$
z=T&M{Rs7S@Tq|~XeBZVq)~~DKesa&J8;(u6%Wz48uW#@(!k~m}B^NRKRe==q8etE|
z1X--Bt7>hZ70(P%SjH<okP<s9Wm@l&W@~iVZkRl}=lGauF{v&tx;6F?+ih9Ye04F+
ztJpu%_kb;aYF9Ya?o&=qNO5r<8j&v=-RB7*KGl~`U+!hWg4Y}UBO~hq6!X7aXccSs
z@@y`%*gYs5YGk>;La<nrJ&KGYK$OO+_e78Gr62$^e^q)--%SzM>KyAweT{6)o7=VI
zn?IkvSbGd9e9@3m8^}{oY&sC=D>j($cuV!}Pf8n>Gy-(Z><D{Q?*(K(MkCWw1pd?f
zCvvCp)%4H$+Hh&t!`{q8!VBcK9C>oDxv8xa3uk-M5l*W&id>!d`&wy^L2Ppc8W)(?
zeFz{6=gM|vIrOK<_;`<(hzR{$3QYoTZ$+*irKL5&yF1<s&lM=H2SQLb!-iZbylEh~
zTn|59@#_1t&5BqD9gynfaXI<ehBa}n(UY4<m4)qFHTfiYymiTs+&%2%_<5*kIX7o&
zZo-=Tf!9?s443AG>CD-xl4@CflUl)#764{nG~fV?9|~!4Y0e+hESN@*)zSuhzV<)B
zj=^SXp&dV?RZwY;)E+C%t!R987-MIe6G!;Ch#ieStBm)JPhzS4L6LYs)%YW+#l+HU
zuj-m<{c&;fw8Mj}Z%EI`Ir4%DY_aSVHzh=Goy2u0Ul^MduL=-sM{I9K7_j=VDbU2l
z7Z*S1?+C$?48aeK<&A7I_Fs>ELlwAG9Vk_rWt*$vPL{-9<vws;d%F=~5a#?LU=Vx7
zPhX;FHh^y;n~oQ9ygkGHQc~+SIiSE>;`Zy5uD7pABD$5f2!5*EPL%$P1e`l?h<7Mm
z?<V1T92_sLm)+7*0aI8R!H2~@Iu46?8Iv36bJg|ptrMNVZKge0$anlO)FHdU;BRTq
z-1s@DdGT+!rWlSp?N>qeypbLUN*hhy7hK#d6^0>qKh7L3SPuB6hDln|L?gYQvdagX
zQzKXK(%5)%!%rMh39YCFLNDO$*J@2k8WRU!sv2G$#Iwic#8Hoae8q697#Ivj`p7lO
zt5BPo{kbS3E~;#^P9e%tDlf$(9tu(`?wR=H<&W#!X~A=_q*gjm3sky#O@?%~G}pCo
z?_{Rp8|2>oG0|a0W31f4p}O+Zpr@|@$&><42|u`fkW~qCsi36nl0NgSz&&fv%g?c<
z(mQWKE^mpX+(c5nyk9?GnSqmd8EtyTProe_HIm)KR6$)SV{QIveN9um!%?lE-Vj5m
z0?EUg^5Aj|RbyANA1>7!nN&i1_zJ4WX6e?sxgk9{#*g2!WypT(wL*CiFTsmO+DIMa
zq7D=<{2U)RLjX(@LenG25VAl|@r}Tml>DMImtaxjCwd912y9y9es4-S8mdl)*RRcu
z?5T=o0yvLfs+GV})t2!uPkxduBe#j=_6;sWBDeNMCA|*};Pl7zZ>o9URNg4mf6q<Q
z9_KDyyS|^?Zcgr@m2Wvjf>yg6u8Yy$>OuWhSGj+47HmF!X`&Uq-%z<F&bdzr(}QDW
zsPW<x;tV<QHVHRWI+)wlF;NFQY$eY0^qpLkPGP3iqPd{?dB19*-j(J(UJglBIH7W+
zqBYyyKG5f89ZwZtf2Gt|!z_LG(r(N}ew_i6n_469h90gMcgG`T@0ZyydO}Nnu5wJ+
zu2)wzWv&+YETerVMKH|3kwa`PMKH#Y)hGT3Gbd3eN#Tms%A`MU=n`f*lm}v83JVfd
zKaknS78=eH{y?!MwGVNqdG{!q4TJB&iY?>2T=3rZ^97BBjWHpEs=DfWu1!;EU#h!@
zI1j?V$l@{tJS)c(9kSJ*ZBTAsB=C3M547pt;K?l6Q@9qEm}Mo2lu%5O@UVEx)$^LE
zn}s>{t9s<|MQg+D^jpupWdgMv<K590YwK#)kFQM(WUXTCzI;g5p;+0d*zo9<Q@0PC
zz7%rV1V@^?*Pg-s=vlPPwd^y<V6J5vD-bf7u<i13A&*Illm5}eBO<AHbS5RWfvvGz
zl0#t(cv1T4H_wi1(pQHxRO?26Ui(wis`qM88<}djI}6i(Xu$nwn6ncSV~m-_6vhoH
zMTS~w(lr>7>ucfv-rAZBVhYC73|`5oUoBzlE;saPRIi#49C}Kz@3azQfffb!X5h)Q
z8|h!fAkdIAlT-9_{I!VDGYY9P%UiwMq<ZH~6Z02?nR`h?6E!u^ha(b%XV!6YjF?)P
zP3lTI`Y8eT5I}t9s>U_;9Qem%DTbkShJJ>(J<Iz<o9Ai*bgC>TszR)}i;Hh3^rr-*
zst57t#4Ml3#N;u448>yj$yAusFut#7J(zMB^d>+#<hpx_qxM+6w%CC?dudOrgG*q?
zb$&LR-K~gxYjIE&q`7f8>|4T3sx(&Rh^jp%$V*^`bfxLZcBVQ8>ylG8wbuks*S$M<
zR&S@Qe+nI|=dK^oIuLP}maR!Wx+3#@&vKFQDC_&C0mgHFLWK#PS}?IBIH>JNQmx>z
zg3`L@LJvOnA~j)ZA)U?{X55g)qlD<Blv|krsBn?A!xcF55{@}_x-*CIZ6%X#*2K=u
zY@uV#kbAq?e#4h^Fz%yM+5rm}j?(7vRJTDy(c01L7L@98XlSzSYGX5P6T7psP)iAS
zXKB&_1Nw)eHR+%qCzm5xD>uP}5jR>+NznPdJ8?XP221F5af*Ebho`TcGsVOf)3%D2
zVaS-^*Cc}Q0*9npqrm#7v`w`nk}vcRS5=ue4|e9s<Wu!7gH(euW8<FYr}}x{Ag9*S
zMG+~D_3otO>-G%h%r-N^?{w|k8a_)7J&p0^LRRl&62D2yzcQem?GrmN!`83neyTm?
z%rfEWUtd<b*?pN8mm62}3d1m*4f*qHKV7Oi#oU6llpn~s-H=g{OcV5fmj4k%th%yZ
zzVTOpUn5<r;@y3n$Ki0K59urOlhKqdtVyHHNBgXrkZ?&V?J!iB0~JGIg1?+Yc|u=A
zW`X{Q4gQ963Qh)7CnVlIHCx)Lr79^+-K=Z_1uF<_+qnyVyMeH;x@W*>eTpoyjCek(
z6eu31Gz8_lS653eooY{b((_)+?;2;a5M?-29-tjEdXv6VWm#|5E-St<UM-;*Uk$PM
zY5=4eV!APX9rr2ch0AajA#;{dStkR}m6qE?+1N5a32J566gf#MO=EveyuCK!5L|V=
zL6I+1cb$ls)Y3HhruVR0Uq0H~_zs2sYt6dTpOX)(6NUoM_b3-a?hR|Qv%IQn+t7`q
z_1k5)jMTCBq!nD`p6p5;VN!HuSgAZ<IAn-x3TP#LZMI$<AOL&L(<G2>C;qimNQR=v
zRw&g}&WU?HV%M4TVxDEO4*fYw2zKj;kypWS<?0G@l7*)i?4|_e(v>*m4LKGXf8jUj
zkZgIX;ZR$V;j;KnkbCU3c6b*7gnvnlz6_!mKb|=$BfF7@Vum+8<&DVsSk-rvTl1FN
z%7e(5B}luoB)!YaN?2nkA)~I;iI>RXdtgHEM5*O9iYjf(Y??1SPe4~J<_2NiAu6!3
zUE(E8b^J9w-)Hx_LqvEw<qbtUjLAq9?`guznEuVL?G|2#78Ak232nw@Z_J6gswkk`
z!wIz-Y938oY{8lPV}PFdeHE+OQ@ol5)b}oOonMPHHDF*Ev;C=Y*$v+?xZQs3G^;E$
zrq=&9{tbE6^}`I=wqB4xE#>yzZr?pUt^n|QiLk?bx=g3|+orj=p@H0q!f_f)k2k^w
z>rojF?mZB^>R4dTZhHDuQPQZo*gYV=y<5zfHD{hCMnx0z=mFU_>U)RWu>kzz3zg&2
z$Th-ns@&TqIJ2#Tu|HOhC4QBYr3fjdc)>H5qCV89NoR25_DsgI?{-awG;}C5`8L{e
zjaGiCgD2qKVJ>o0sSg(T!-Kmo(_+HdgoYQ*m(6{d&ezmpE0xN-w#2|Ztiux~32!My
zQG?C0gYaOrPbWPkoH5=7$bFqzxJ}`N<%QgLGRXHdh>8aeb)vE<7@&qJgzfb2GFWTk
zk5tBRd&mc7Yf}Y<H%xk>zaJ!jzf6nb;rDG76*Y3c1si=BH=jP6=@`2STrVN$5^TQH
z>6e&kOLtIiy!3=jt!`tLxIHQ%p-VHi%Z%;qXCKeVP6q>{Ig(luR2stc(R<XJN`3t?
z1is|EbG+@JWL8aHWC%ggMD88Vo$kjOcX&Er%O;al74TTGJeVVvbza+adr?|&Y~FPh
z_RcdBjAf_Ko;PE9`;p{)Ytn|~0DlvMghTBffh)y&l;#}d?ADW{0gjAmNUfPiEb&2U
zqo~9t*eb@>Dr+kJMQuMA_j2c8QRZ-0CAM;RWB25`LgufI<`1gP4>&VxW;s|$FGsdI
zzu__EY`eXsxsUeDqoi3G8QPAlDtdR|i7(l~ReNF|(PCvQ;`(x#9?#F&JoWIjZBKs%
zX1LxM&8sz)GcH>(W|OhBrI&$*EmS@j_i7AfU!YY}4NTx-r>(K1F>-|*n~06`2Cl9l
zD6az^LihGK*C?PApFIU*`|rruCkzp1<WqZjWvYL~kBtp*{kkjS*OIx0i?sO_=<PEk
zlJyL~jSsraK9{h9&NYg*U<N3}YK<44nM%EU4rz#(%oU*+*^qqg#j3?)>G<k>S=G0@
zG*G>2jkk9igdp!clD;)ecse2%EUK$BrX0L$t?O-dNR(nueB%%L3*&W;VTb0mXSJ8n
zwT*D3qs~0|9LoD{#V!M1?@%~owRD|R@>Oof@i-54IDwc&-&s-8k`OdBuMpo^bLz-R
z2t7L6IIQk{|F?3EUTQD-_bLo7ZtfG)iiH7;u<#tyopb#w^;u7~I9n&n3~bGX%**E^
zG*S5oV88z9L0j<=d4LEsFQkM40_90RSMv|2BKJ&WfAtZ$kLo1-T$EP#cxgg7_};Tw
zpM*{$2See^LQ`W}q4a}*`gF<AgriT#LGsI;N&-tcQ`HB~o!-dJb{JXGxn8a8iEBz9
z&tqP@lekC_gjCpl<$Oz~C5!&=WO~H(UoQLovTU$TI;Y}PfOWBfPski~(Vek-{46VE
zfClEE`#7z8xA@kF^pD*i7h}`&%XDFtUv5OkBxRq$JoEefF^q@gMLJ0R6#2wlVZ`v+
zgRtZNWtB!)*y@0zzw-<Wq}EX3wmr88AKoX5Iaf$`7M{BKB<)~2>}-$vZnfH?@Yd3B
zfUkQW?iY;=rD+ECk(X4xW#6(JpzxYyqIIZEt^3QhrJtrd(>2-y)-=R;olw;+CZ$Wz
z^H#CFP>jzLEq4P%%8z%-g$FMNvO5a6Hxx7zSGPP2rCrKXg@VJ`-(Q;X&kkARB;CkR
zBcuPtS&mX*TyXLUI{BG$R1@*>m7%14mYpB(xgeaZzCx$zT4$WnvOf9wdzJWavUh@X
zqKIQuH>Mr)Z&+bQDLcpe;{GftP6c^$Ns-s8b8GBd249Q|Si`x$H>CG|uj^Z}a#trO
zD{+Dx%M2zf_0@idg_a6u1|_l=3RPwItKzANDV?M!f+8@x$6AS0hFu(XMhIZ~t#gy`
z`T_*d&gtNoYhUZK6Nejlpkz9JC!l6PC*C$*5wPW?T0cyKs;wP`y_95I32&0fJ*4oG
zW^Yk>ojypq|NTAoQPjF%b2f74MalGK7*7qn2D}l_r%0yv=09oxe;Nh<5nL(@0R$q=
z&GCQi@2@QSrp3>8{rYwT0epWONO~+|STR<0M5fGB;E=my(gjre7ibHe$`6HhWPW02
zNJBN3_!CCh6Qsv^k#hSrE8m!B;0ZsrO`;w>kEQ%7W|6QAsPCeiU_>^hp;CIO%3m#$
z5@u{trR2yh*!jVPf|SLpX0$iS;*gAkg!XvoB&s*rOjZVEsW~kvi7>DGc&;kSLX}2k
zhm!3@<y*}`3=pG|2672wrpff!8%}IaXu7vNhX7t&^Cn$GD)$$gC#5ew&2;boETgWj
zYG|obQ@d}r=1V{!I??!T4>@kDd+**i&f1yliIx;Aeqn}_c+$VN*3)qnSn_e-_zf?6
zguXYQI3IHuwQ5`MhJNwFjn#2z=GU2>skw~WHM^WiF6SKhgi2H*(Of@^$J@b};X{m(
zrlN?;iqj5hmhpo*<o*ZM#+qQh2GwVAL{=--p8$TJV(~X;kaPq<4Y!H?S-Wca;|XuK
zIZlAc+D?E)j#`PSiAm%ti#|ooXm(^Tt6WuX2Wgn+-i?@)3m!>;&hhnL!mj+>UVl=1
zjy&oMr)!PbPUDf0SYDUmpmUipN&R5mB2MbXN4pZ-;!A2p;p!y!-y>ChRfsL~mdCg!
z>Fe@q^CGHL?QNugh%PfqdlcQIxLQX1qlHr3r!i7@tO{1l6R#7yzh9on0Tr)zQ$JK-
z=qd4}2)YMzT`R-+;U^QjtTlerBph$tCG<w?ajjnImSz--$1GDN5%qhyttM~HaZlQN
zJH^$;hA$6E(X*4OL@0MYKEv0}@;-$O8XF%<M^!;D+S3&@YDTL$X*Cqbe{$;~ef@~R
z+`f2rG~Wol<cXq$yAq)*{7Rza3MR0|+`R#Ncd4}RCVAmo)2uo;y$neM?VJ>7bu;eo
zF(DRfei?CvKPr_Si)II`xxRhrtz=djqIrFP<pHH0ExxT5xvl4|BV0v8*BKcSshkPW
zg<>jBb9qKOsPGV16Os%R_cUvQoOb)k%X>(y8}MS!i+)7Xs&y<=;x*LQ)KfG#L0Hc!
zy1eb3#lQ3sJ6E$D3M=9Hk~|#ti>{|Edz+ul&g!(B3+W?pbMp=YM<altOoKfLam(E$
zSdtceF&=I;)}-NHWH^xbMZ3qFCX}zdDkfFwIobpK_daC;Q2I_ORHIRhM6T@wY38QM
zMJt^A^Jxh_I^A%>w+ztWnG|Rt`_nKERgc<L=M#mr()qI+XZXvjfle?boUSEKICFJC
z;sfcfU*L@k_uKR|J*bhGS6Bf4)}y7^d;8b!Y0<pvcU}i@mpU|*g&mX~u1^Z3(i#cY
zt7LO9#_OjDvooJw4>D4YxJcaeDGHX{`hnv~y~nTikdH9yS@Z6IU`uD(uX;@KI<icc
zR2NM*#<0W-)^gX}jbmX<-I7R7mTO(FJ5AT`zCy-#LaM>|U3l%=n$wVKW*gm;DSGa4
zdx>zuL>fRzVme9dX>W=1ULG<I6LB8%dnNYdF*2}O@gFTt5F)<+H9w_rM!uua2~~==
zF^xxmj`~#r`H##fft3qjLJ;XMk+W#2xpK&%Ab;U0UzpFD918$qEZ;G;3Vlwy8<rC2
z-WKiE);0tfd$n;LLT@169O?v1vpaJ|$l=y<Z9Kaybhz60_QR)n2jo6BJepUe60RAp
zQMMV?N(ex1+N18xRYtnIJt=M0*4uUMo;2%Mlxr3Cb^=C$VABSN>G}yL>;J{tTSrCt
zwq3(02q+~Wol19i2}%nHNSD$B3@Kd-(j|j{v`Xhl*8tMpB^^WekOK_!`!4VIz3cs+
z=YHO`zVDA&ti`M~=auKVkA3XDPp}rKnNO&);kP$mM$*}8Y}{OXxe*{%axC@dQjZHl
ztGwSbsMBx!5@{w2XB$3EMw3W-Rp>->GyRwdFk3HwaFjnT5;KU?I+{JEiAeJpF)gN&
z&ejsqeLZ_|Xhtn#pwrl5kX%8jCDeyMa=+%2fP_27gQm|IWzp<EO@S-;_CM0Xe`w?X
z3u^di8N;83fEw4OhK9%3OvwO3#Y;BG8N&42&_wOq{V<>vjIr@?2F4oPAh)b_hig!<
zV=kMZG<o2Zp(RwCkWt&UfazPNI&dH(v~Oawmmqa{G_V3qO&%2z_eoX_)H63YogZz>
zO0b>1XtC;TrEH#XDl1=&-yiH6mi~QBXTeE5Cx%&1g+m6cCnZQbWAC5Mkcq!Aw35f|
z>JxK4-?OMHo0UnOwRd}`TXZ>sSxut8O;XKo6gv$?V=tZ?uE}TnGL!gh!S;1v=<zA%
zT7qngc^hA^Z7J_cC%ag<NUPl5V&Z#?mRXM^cAsOANK{<zq|11Yrq5)Lcl9z#yb@8D
zA6SI+)}G+DndZqpbxjJ-etp_s+q3-|^S&>OvPg9SismFdYCVqO7n<p3psvo8_4Ltb
zvQ%zuT#Y-=*XI#bX`lNDC)_@U5OQtWi=<h%PHxY>*t@K|$7JGL@R{QyVL<X*?`O0*
zO-h0)TP?V#x3gMZ*vJoc<IKBGmtL29BTONf_v#guMh<>thG?pLEW<KfoM9{RD{*b4
zJJ(QaR2u=q#g4yRcq^q3O^<S?-{$g1zHt3LGfjz_71_0!L#MZ-Oiz;nR>`Fp-dehy
ze()(T7t%Z#{Zt^!bP}Ez^w}X@@qpqm7q8Y|*yx8|Q+1%4c)rKT-2Eh=5&IYlfubDY
zbOt)LGoC!|H+$%=doFG)Lvh@OyOo2^7Uo3e4udFp#A5nl5K~f@*kOr6Gs(tcpUoTe
zDtK<*ANpcZ8+x$=sNQ))G)ye^O@Lbm)!i$%>KJqMGlNE<6h%hk%7o(x*SBBQHAS27
zDA<_f#ii^frYoz|r|2sPN`35Kw>>%jPy@wx%odqKJ#=$=m!R$#D0_7JK2Bphvtp;O
zLn*56{`ZlC_=Z)a^s+Rfwx=nZEyJt@Y%VfiZ($!SVQ~BX>~m{pf<tZ*vaqYEv01XB
z+}r!|Qn}&G&YM)&_qQp@izodH*=cYx=_Zq#Wxy<qGYq|$W6*P0COj#xk2pqY`LFGw
z)IADzgBW~P{hO;O4nMc08|J1GhunLF`^Xg=TRy1pJJPO$o&j;0THs^7*eepA5Oi6s
z<!V!VYd&*om|NUMs2<YE#whz7np2|{jTRac)_9>dSxXan#Fsu+zS{7`^ab5lPnE<_
z*RKKK-H#sxOl#<Q5oWa)TZQ0q^G@HQka}H~t{CRMrI)cZyhN^D(|QJ9%B#`kR~L)v
zn*A0x=r-N#AJH6<z?=U!ecAu?7x1$Ez5Nb&1P;)&fX-X~q(=haF0xY5@oI2RN5_m9
zsmO{$pb7FZ84eNU+}U$4E0e&Ym#5?09hi8P*0Y<tj~%0cIF8#G^8~uv+3evH8VZN!
zrQZ-rqmH!ki3-aBh0JlG4w&`g-3H^Zd#izd`yKO#+Y#2|tJ9X#-92fSQI`!rKlIa%
zOXm%IOA3VyCQee}Z0-kYY1g!w8PDt)x@e=Ov*=Q^Sv?xWrRwckJxnN;1rc8P#c>Wm
z=0!{Pot1sc+7Yv0<Zm)-g3K_+&(Bu@ro@92%*8f|x<EJ6sDbKMF7A98)O`pCJD9qb
z?;*S*)~2e!K70DZ_Pow4aV&Kh+(kp1{Wg~Qs$7fsvxC%ApEXLBRKbODoU9&oQ$jyK
z1$zrZwiym-C(ADm-N%e#%#^l>3#C*YtL!YEE`|(~6ZIK>gfy^`>HLN9x^3EpWlBUU
zjgPlbDlgp*#O!rpYpE)yt4C?HsA-_jsjW!%{eL9${*ZnDH-w(~+R0@5tmJY;$)0FR
z$}Fj7wUIJQ*D=Fq^QWnXGZa{BH%IiDp0W&or}mbldDeg;8c(J1@pr-U-me-pf+0G}
z^G4~SL4I%fSKq!pGqFL6nLBgU@4HN$3B`_xtEuIs9Ib=~e?PRKklV=KTe<86tTMe8
zbUV3<VEsj(xC&AYp4-csH=qtU5-aRYCcK#JfEW~aY4`=CcFO%b<%Ja$HZAX#qWv?*
z;@grpNl90gy@@^{>}#{N?C<1h-4=&RO8B4PFk;|5=W+_VH=(AHIj7`8`!ZjH%MfUu
zlc0o8s1<(zHl7^AsQ~$PM-}Ju9cQMRXc9;>Z@<MbjRo#+OvX(7Gjp3C0V0UrNO-gv
zjhg>QnXZ}2xSiOug&v#4`_<SiudNZWh^dce*v0F`FpW|qHQ&R$M2B>`<SYo4vG~X4
za63;M_ge*<2yTN`SFWArHcI3>wCL`<Fo~jLE{NQ?tls=ppOx6`iMq(|cm*#K%E;NG
zfpu7^@iEFGyz~S$e$G46?;9kAmMcCZJMPem^rEiF_%WO(oNC;bb}5hlbCkB#;ATjj
zw8qNLV2~g;>7!XhSS#+n;C`xpkZ8!(#KfpZsxDrkuR)SoFKL+#Pr8`TT)o(E|H7hy
z-r7nG`oYPw9Y3P*)hWL77!cnUEc=L^94<B%Dey!pFEVoK{tF20hAT&X@DtcW-@ro9
znT4akJZQ`mFHm7%c~T>NVsHJW6|??Kkj|H<uD2V^Nr~}5x&br^)w;!;T#K%~3p#gA
zZ|jtjvD2%pK^lqllwM{S@$!OQUV2?g`i9jtG+GXlKp9I(?hV^@pXjbT)qB@jDgD0j
z>pGK8B}a4>i(An|8Ozf!9g5pnHo_&=TRaSrqpQPa7M;d5>Dh&aOS>+GOO7OpkM>9!
zv+UxA{OhWe>z%2t9&1VLZ#Qknp-3r0YoXZ4cOo2CFiHCm#~CG_OCgTL=m=Sz`mdtT
zjxceUZF5b60j9mrc^2KwH?v`!&_P7(km{C$y)(-JB8!W?;tBM$|4zU6Yz;NM7ejN%
z;{8}zsh#l+xdj%?N;Gxdu|+}nC+uV{Ql@O;SKQMi{NJ|8&+iM;8DbM<@@n{X_>BIc
zxdQG%m7%8QhQ`V+Yx~>^KWqEbCnU79o`EoYP9-`qLkOh|=*m#9PqZRwx|+;3sN?EV
z0}FO%r~@J^)m`PPaoHzJRbp<30u~J6bq;&G9PEE#m<8u)@aVV$LX*xMDT4{o6>ON4
zi|0DcuqIr$W%50q8LuvO)+2RaroGqPjn}Pu@q(JFbOI~TL?1EqV+os<8pJp(L;|i2
z_OvZ!lIQ%%T=VLUWYwnMh9}g*A}Z*?l(a>e<FkF^lZ97xZlIg6&``-2phq1#>%`Bv
z9^S|7q@|ajD(GNUK=GW!xA~UYFW;YKnXXkSf7Ukn_Wc{jNJQFUmh!W$r%5%gzjsZE
zy7=&R&;--pPBxSGEgVEY7fpQy^LKms`dBih5Z}$PA*-YepnEyg0RlMDE-3Hs#-@ut
z5IlD7_Y2JpZ!!8x^!<0I3GojIr(Wkj-^iW@T(ZQT#{@owT{vAq^fjqkN!p6(H*?7^
zwU@<iCNZ&@dwREMJ}^QAV)gxY@B9MF+p=JTlNS5+`#0CLWKXn>ss1Ofg5i&s?eAi;
z|368qn3E0y&i!@1@WYFiws#QpqI%m=BJ8bL<sZ(9`gdA0>xjeI^V#?N;+}LbG#l$`
z8+wz4e>N#yQ_&cGz+uWJu)#14(}wt97)(-!*CR3vXQl0O9V@lm3YJ_n6!|a%(+60R
z71VLPUg~Q~w-j#Ct~JH+k@;YDh>rWTc50n$+;C?Tr7RrW#Ec5(fR_Zj^c9n?d_Rkx
zpLW3My6qkoz=PUmFBT`<YG<uBZ};&I1&>S!)RxuNiwNhQrQy3X`3e5SVkmzDtwVXP
zS>Pv-S?o7OgxexCW*XP2oM@RRU-B@$jG=jnWvjfb!k75*$}b&o>5}_s{X%1(q*O9a
z^i&6k48KsVYldvSIsFkX%)a^TZTy~A5RnAVhi4+r&`q?(R%nvN{wOMK)z3M(#8FJn
zYJz*KHRl1WfeB=RSv>zOQ_nxcF+*ab78bRd&Qv?0$T^^FNyIn{3wSooG8w?J9(lw#
z4L;wW<A$f|jz`mE7$_VR?HC#MvIP)N(r%OO1__)DJ)|#$yHFU3#X}kECoJnUs(<%^
zD|9rfmwHKkTb&<29lQs5II7l^v>9X^BsaUq&Xv1CK6yOREuvKS#YpvOlpXuBuF5xo
z=g4`(`wyu`2y~&98#O1{acf{Hg&AoUDWhd%)@pRm&6dh$jY*8ZdsmH=IzPdw^N#EZ
zYwox#8A@`Ju_e{87Ck|<jyKGKRUTx{&hwiyGNpq<NC>mR_Z!DA3{PQ?eV~-R4lywJ
zo1z%8Np{H+(RmzpncBn_;atPvNm?Rb_Ufw2bkRhULNg_pkJz<js4^_Dzt;wfcJgHV
z1DXbz-7(w4rmP{la{Fu#0mu?+%+;MI+PyDb55}+SrS7AKNLwW^S>rwb$lCiO_%5yh
z&QgYKPma8Xh|pe^vDyOv<>h7l4F4jGJC%#pU3RsD)SK2rTG?4I%^%K2wmGf3$Xo`L
zhJyd40`Nbn{z&iI(WijouPKhElRBmOUGbi%#-r}M4z{oAf=b=$Sl48c-0q!-U$@=z
zo7?{&2=AT5bhZkp%Qza1ou@Wt=uWbQY9@X^vvmB*%d_d^{NTkW<<l6?#OJ0zyFEmW
zmBURIOwIb<)kYP3=4zdK5dV9snU)ZMhCA3GFqjuwK{7Ew(U7hAhpMZSSjA834&*CE
zrmk;=p6u3YkuNVBIn>?6>euzZH<oIvHZw7O_^Psww#a_6-;S0)urT`iwgb)Ba#9$1
zzCr@prl1CQc@&L^IXNZE4vEY5lsq~b(iyk6k+<`9uNJ8x;#~Od`-tOhBq5%tBz|^5
zjFeQ1!X6C`F8$WlT8Q!!HM6DPtDGep5UuB2`$Tm1O$H&tGNvG*veziJsq*2>4+%*s
z9j1+!^iCxaGG5f@T*2W$E?<BYTwO(2U9@&eTB;lbdNNL+r2kb_G8eBPo2*vn*YOL|
z4_cT^>2EGTvUL{8=>3HmczPAs?=Oth6|2=K%an)a5660$txLJ^1%IxF5HW^o&(75W
zzYC-BudtWoxe7lLF+hAuJzaDd9~BIY3hOG49GCOB{q{X)h#>Q_LT&I@E9vC99D!j1
z?y^q_yvwWJqrb>li&GV^n>n)dKF6t?*JGjUjOy$~eYFz6V%By|zPs<Tw=xUX$`p}d
z(i^vpUofan88EU^O|(^tOP9db{`FR{Op<y8TH`7HK8~&3oVkXY#*uIyC*sH&RN=f4
zyz-z&fNdaA*7RN&nijm?K;ZGK^<mYC#%$Muqcq4bB^5-N<FYM5ym#8H>?%gSxU3Sj
z(P>RL*dt!fe6VyQ6%@Sjis?OU`Y#N=v$pT6enFuX4&ycR`dJ>n)O2NI9j6$6tI0Un
zr7OGXDarix(>yHI$*HcYx%R({;o@%z#rMr8Z>4=AEGE&cJH{g6g`VKTWmAFdWsa<;
zUm`Oez;(zfKTc8aqA>G!TgAtv<>3jDS2{k?XX@EABV<z*e48rpFU>Y_>4R=lV9opY
zHQik~{^S&F5gS;{=3F!Ik6Sp1bq0qSYZh7+W?_Rhd0e_I=CoU;X1yQ_^4yPAyR4PE
zb3wQYdxEkj5?HT+7d?pDr}=di`7#w`MqGr)L=%DwWlKCt85tTTO|euPu(<ueA=eqt
z@%~T1AKT4$lRpi!{v0Ml(0q8Y+ogu!j7k4M^|foR%B{A#05HXJhNvE3Yv@92U<7N!
z7-l}fJ?Z8j(Bw@p4X+V())bJ=n~?4_TP^7{Y`iDVB`R<_&QE{}A4OH@!}dByckFOd
zf9$+eL(PJB4{c;^XKh(6mr7SsR?-EIih)|XYLIx{wvC?4llcRk;s@8&@ByyFC6|s?
zVuW4SUl^pzjyK$1iT3FlEx(l@SA#G+6+P?EFSazQSez`$sD5!Pv$lF8TL5T9;1k@X
zufArVS6|y!8M3=(-Dn6;yuyB5yXZEAplePBNG?G)^$Zs|q}+xG&B`De=Q>+Y@rfSE
zf1<L2{}_q?*V_M|3Bf0?ag0ik$30D3sq|500Qpx(Y~@6%dCV|)1vviQ7G$LK0+oAY
zd8W^A!EAanE_~eOxcr^Mr_yf8lr(x#n3x}TB=u;9G0i5+)}}lOB)8^g;Ph`MI(BI`
ztiiSzwDCS7Not*vgM9QpD;nviTb*4LmuC)aV!Ww3;a}lY?lgecPD|t?Yktw7b(2%Q
zPRkFKNnG{HShZDb*T$Z83@kYFBXzJW`V=oCLmgxnK8%&r#3b1DDGYxDpPl=8|B>69
zohnTKPBaICEsWRvtkXEFCrvoiu@+WNe{l{j#FvRPsYUe09@P3LJT}@-{kdmgs^OkW
z^3a+-zP+k*jCx>FSjN!=M4>c!#5cq!6yuYv^WmK5CoNIAZIiH*cDufA2oV<X@3AYw
z@S5ePvqxTcxjK!hPFp+9X$uqtu>*p^Gqm{i<~Sm`g+A~ezn7`iAiu+ly!04~M*9kD
zrL+YJ5Ux`-ZMK&5MTOtQ#1VRri-yvCYs>2)t#+}ux7CM|TxN*hJ?+6KKh;i#!X=nk
zj11o;M_@hnBUb!uI-SrJ^fat|nNDYydYn0)q`E<XdG3siKj`&s{HnNw#J&z_nGM03
zB$D5gTC!xU`j!qn&yj`C^>lHKUumoh^2=4rxZ}syI06HMY0tr35gCV5$Nk1u)MT?N
zlU0FHl(bjb4SQa49nCw%C%XS-#EmX5ko`2zaJ6#HBm1ulp`&Co87Y4^OQ$l{3y*$g
zhui{HR~+O01qFnav7%+))-twtyqt(vscMY`ruT!oilC6jB`LImm)yk}4m#HO#&1w9
z!Dy@&S9rRo)}b|kF|%wOx}wpx+^cr0NwtO|2q18B78w}>`DZq<O)oh$T`Kn>#EA8N
zjSz?EryQ<mfXB<FvL&3e`RY%Ww!<kj>-`<)a<ewyhZPb$e%ox##uP3KXTFaq>f45V
zdGQy<HSp=3{0k!*>VL9X=1orvLnze}8``-%>!3}xb-UWInktgkAN^1hhi8E(i23f5
zexyz(q}>#~>>nAD8f7DeiCTQ8inU$mcz6mWIyJT7Oy1FiGSe7bdDfv?4_B62BSvLK
zyKj{>dc-tG{Vk4nXNRu$&QuWD-wDcFuG6=;m`}f{+7bTj%{+(|`dpgr%FpEo*F{!(
zy4Zj`N*zdE6jZfT)$SAH6)sxeZ4VeARW`i31C85oOjIXZpRV{+_=0KLQ;B!$_Nj|*
z^>c;0nO@bO_&Q98O7w7zUNA&t3ryG|uqbYPqqQFO(;9z1vvhg7nKU4OTDg)6-&i{C
z_8L1GWiFZz^F6=Sp1E{bK5Bas1m>BWHi`DY4R`~ecDgZ>ZPhvoOdzOjM&{ZSEZNWa
zC7+9m<){0QoJ4N$T@A7akgRm?uZYm+h;<FKspiN}@*VRCFO*%^jhh`roz1e-68hg<
zLGw_$Cl>22A?JKZRcZC_Em<KoASU0jer5vxCCY5}rMyo+cUbiL;pLzm27Er0)oL95
zaYs7O-BxpvL%n{GTlSojxj4^^`*))hm3a}Cr4`~sH2299m{8wcPL19M++Q>wkB6^x
zb4P7`s9jZlQuU}Nb*=cc1(rj~!{U1=LbGEHc~EPs-cdHQ!(U0ljMam4&+p!R9ZcDO
zUBji*nD3L*d;9ZYKIIj*R9f`A?5)>WNsZppb>i9|8pSU!a;SWWx`QxU>nC9b);uh*
zFlR>VbgoF-u&8_RbR3^W>&IS|?UW+N<U#lDvh9#=d|gJh7Ej7+YtJQ}DtXGIf@{_B
zG?KBMD1Ye)syOHH<ypc+`->;zv_LxANmXucDfN@~S11jBly*YqlB`NW%E-RD+0iXu
z1M2SQ7|JZ)thWdhVj@+fsbgqsxS^mVSXPD$ADc-DW$2Q_Tap2wOvU@=C<Diq+P<hX
zzqROwzESDf$x{?5GK(RsZA}E-@fk#Le<@r@emlm9a4M_3E88`4Bj}`H$RpFkOgg6u
zcoEo*Qi2J&&2^o=wA?|;nD163Vpm@>#Dxt+^etpYdz@@Xz!8@7O98G+&aL#Rvs1}k
z*GWkG!r8Ud{^KhK+OOzmHHkwmeE6RiX=+?*Gt2vXY;l4~Xz?4a8)#?#!U(-ch@>Z+
zp4F>UZd$lZAy#)g^__iP!zYTFu>AJ!s1TF2HF>hl&L!3_ul_R-JZfcVE}J8k<>}~5
zet2IXLU7<iBVqn?wxA%>Rk-Hts%>L2lD7lQ+i|2tY3dVltCZ3{FAk4$I)vEqz<7If
zO#FooA4z!%@e!Wl?o<i}(&ZD7nzVT<+BD3PZW+u#OpfxKS~HGYBl=QjbDmsCA!{|1
z-?TNhgs_H7Y_#w^Q(7&3R+;qFkc84MGxMTQqbNYXVS?g$j$T`!2-B%zWeY0<_v!)1
z)>|lMh(LE>)Y|b}#=2;EiG#6b@e^w6x^&a@tmceniFZv4iPXyc4a8)&`ueUzOuZx6
zif%UszgD8tm!tS1Ysw#1a9iFg%^0ncyy8(MrF<s%knIiQMpuQn^cYNP?aK3_801oq
z=jiV^2=?T<vl$i+>UO-Fvnb3-mvxB0T`x1J^Mg3lukULm4Ai9_mYGwIzKM%X)03HU
zJ2afHONE<x-Dv2VfS|{$n_JnQ5T)K%)dJF9&|*)9PzI87=%e5caBwc=d2$F%>N{xy
zVOP_~&r;MqKaV7~DpBQPCXPOXwKf;|XeZ4y=Nr3MSJ(VFxDAlXtQGI2!}HKpLu=_>
zWeWlJfb6!vFl5`1H^GQE!5wT+z`p}U%jTf;{6)ydf&Pd;HxLw&EQ<s(vRQ-oTluc7
zuH?`vh@5|)hjY=yGQsG;;6LTudg)wIE}HSu2#D3;3`780;um+`-G5<l2W<lgkN!W8
z`6RfDeo$_EQ>#@D6&YNCY}-s&1m=6Dp5QgoS-?F6d>FLQoC*IvJk<6_0y1>Y4uvYd
z>II}OL>DU*sLETwK+o(mih2fA7N{Fw;R76H-9WhNznrq(!4&Y1e?7^k=w=`jH$~0^
zIPL^0Ac<DX0=NJcs6aVniQK;(LrZ$J+&Ym>&e>_<3IqD3+-!iwY41@mDiJPs5(TIX
z&VWw>(Dfx#{`Vs=sMc0S$sbgsgWlW%yis4o&2bFc@D4~2f=Ju_>vb&p_t7sM0GcgQ
zCM9@uASWRB`Z2({A%X`P8i6~b{7<Lh4cjGXqQ=aw#~8>j=lR}L8TicVndZIcSSJC!
zG6F!7MTO(G!+(n+Cm>BfC#z-T)<=>~R#Xu8Lf2+;Sq`XNL~vK|HFlqLZT7Az-`dsj
zb>a$_LL*yg>Sr$R!qsox09etag!r)BwaVbI#$FO0M=J7u{CwnlIm&iMWRz-W{y=vT
zRBtk=t^RApwkpczHKc<skt`{J4|E+N?wqR&U~EEZ>cRCT>dEIh&t=I{rk_qTXB$2E
z4YB!j9m7GqISuPNy#)B6fV=+z--5Mz=(%RzF9b3e%<%C!f!#Lcg^!s*A3ug!KL54q
zNBF?<+l2lu@Hm^rnI5fNxa>DxWQ~TSWb#05BmrD`KF(kg0#O=AzC$Y36nXbJPl{2-
zqz(Mv%gy|v8}9s$DahiJ<F)OG8ivR1xyB;3e_=#y)~ggmI*`<KDB*VO7KVYp{FEB&
zS|$C}x7F$o1M(U?3B*AZH+Og4k+F&!s-9emn<2P5VLzWUzP0*!PDYpyCn9&0bfT7p
zmMxqAo`(;FfR<GzF)<%?ef;?Aoc2+&8o&ob_Y1#H&ARO0>^B}W5O_Mq@I}1do#iRF
z_nM`y*1#^$Eg6Ce_QY%~c9m5<h6%==Wk--rp_DRi<p8C2Xjc<mMRlOdy6~;u6!!WO
z-SWy1DdqG@tnLP<Pd{7AR;%U7Ul?%#7Hcol<p><b{47m_%S?Q;MXV;7F=KD&f0T3r
z0VDDRhb0cFmMc2o*~Et%58XYIwm$rJ4>S?UTN~!O3Ch{LGmKOlSedmrlP#H)##!UT
z^=VU>b$Tb*yUr7=5r~y$c&(4ceA+4&fE47G6LpoB@hz<k5Jq~sx!BH6H#RmSNF9Xw
zJt(JG8p9wUJw=$;&wl5CmTwJTHa2p;ShhMKEV}5FyTooZdeU&m4r_3A=wxY(tXUVi
zC>B|4c}*)v4z>&Pt&EYgJ><roBZ+nu=ABkPMg<>vnGHAWZo9vTK6F{XIM!var{R-p
zR=hF0ju%v2x();;hO9D=ml!HIOf!&ZE*;AME*8?D)WI*KV^(?82%aLbaj%dU!VFRS
z{`^*fR}_Q4q>KL7s==3;Pt<j#V3KyQudsH7YcUgN?5XR$USrL>d&WR;H<tc<`DP7X
zop?dw6FYG|ON{>Qd|Tk|{_jZ0bX9r-kd5WhMvA4os*I{^Ex|uT?nT9wDiNB0VSLU?
zxC?0i3nQ1jHG0zJNVs{&6HkAE8=unuCiFlVyVYK>-+6qLcplMD!?7PiOFYxObpNU+
zn|1o>__;6sEGfeg>$LenugfE;oPCQQCt{Rus}5wGWO+#-8FS3j<+fS#vg%O{eifqH
zt`7ae$HAv|jXpW%W?mQ6^K#E79xOb0jzJ+^`3ufGD`GgG8WzO38$_f<W9r~lZh6u!
zu1J*%ZhxJN&DcoO6XarQ3)`FR0)%>i_>6=8Z{o9c125TMyc&V6X6r#(q2KXE9*I1$
zEUQTXWc+QxLYq4$tgHgsvAH%|z_fVVw!Ym<C%4WJ4k-S1Qv~PDbMw*7%pVn&_uSga
zN(M5F;#YX3QNQR$7QJN*;$-<z9L@EJ?AkSUPw!b6$g^-6W{~(iB?Ss{t?s9MpO)3h
zFAmO)#m9%pN%XX=cRF0PZ-|aJ#O0qFST<5UGI74gRBy}+lV5M9!V;^JfraUX^gsGO
z-^uCv##Nc|3Mwe=pQxz7U#Q3442>w&slKX%SvmK!RPGN(2;mG5vrCnF9!y`ZEPJ1M
zFW!kDV-UA%D{*DDJ`-T`c|Ho$xz<7uc3R%TSDy7Wo2;Oj#JeB6r$i8I>vjou-v>8D
z(J+pa$zSy3&1RbDo`LNy<JybQHISY_ZQ<Q=l6ekio|U0b;f!U8Do@0hLa+&fY((qV
z&wpy@4VBt3$B~S@)h1Q>Cd3%ntd1eiB!LlKS+IiKHzK8@r-@l}7E|9a@oj!`1uk+G
zKQ<kQzk)nTe&ky8-M`k}@o3??*~GxV{Hn3J@9g2!W%U=+CaIQ-(=$Inky&ncG1>#A
z0`_=FpULoCEf+fonHW>_^}JMh{})ExqKmEI9b_q+y@Ann&Z@t?EXIWf<cgwcMS6`5
zdD3LL6KGgJYJDEg<@=OV^KfBMoDtk3bqP&9;FI<*>6oQ9r4UPeI&V(nBJko~CP|T!
zt0M<YZ=KAt+#^Jsu_p}&eGN5FjY^Yd?}(@_wy&8<T$1_=Lo6u6MDcsCEP1bFe7!L5
zq?uo-*WuY-Q1)I<P4K4+2E4!m^0vy^jWPJRO>L;g1ge0Gq~nxMNoDz<W9Qq~28mUE
z4C+<sU_?#_nlobky`N|PhH_7OcABr<R-V;h{NT_s>jKle__Z3|wLQfEDywpz&Nn#+
zO?DaHqIgc>4-$V$W^yJ)*9ZH;mpF;tN=z2#x`u0{XO@jq_CFY5jM8z9bh?eaP%}Nr
z*Fh(u?fdy+%q;7h&%}y9+v+B8Wr6|gL~?Jv-AztWD?8%2eTCkKJovFs-5Jo7gdyHv
z)t$_-)TDmY8CX(DXZs2!stNP7ythZ>Wd9cih#^Aqs9feaHbBlz*uW26Sc1jh=}p#T
zHrESwVN2x-OIJw~lN87GC!J{HlUw8dgO>mdLaT*lO+c!P05A%e>v~B6`9p<6fK_7A
zshWuKG+&sJ6q}2Gf8cU`+X1&9sJr8~<-$AZupV|Ur{xJvu)w=8Q&yckVw%pM0K?=;
z?NbdN|28xlvUu%2C@flc%6w1Rb09}YQ&pM;NJ!;+d6E<1w3(z+H7(6RFkJh+ep0w`
zc~1<Y6xO{oufdaxv7uHOfo12yJiA4WEbZcM*WYG7!H5&ox;xW{UW`(Jydk?c8LA-9
zdkf6E3YC3vI|Bo_a@q#G0)2EM8WW}9%ZMvzp-AnPqw`F)O3_9mBu6rnZ=ZME40>s>
zv^6>gB|%vtJu6T=NuBj4Kr3h;@FW<E=Gs_Rfld{4{gsQ_t9-wAd`^@O<fm#NI}HQy
zAxk=d5ATBEQ9zgk0C^wU0*F}70=XWH5IL|}X0t}>u}>803<C)v^j9c3-3W?~hP_4D
zX?*lT+o?=?G=PQw?c(O5Nrr>bL2U>C)T}!KKN#5wV78{5_rcdpNp~s$5*7}+0w%cZ
zVa5MAxNvaSI{*qVX*J2AJ_i?5wrwQ<%AIS{xgzKvTw47HmqJl)a>(@m^IpeF*r9HV
zuap5qNp!(Pff~PE0mO#@pa+m?iX(tb0s17K4WKoZ|Ic$Lj`#!jJ!N+QP$`ejv-}Gq
zUCtjs!dkXJV0Qm{Uclq{Z%44sznOD(RJg=|R*{>EwK!8g4n{>COc}%iT0^5hMa3*y
zJO`!0@PCf4L|csxoVv{gDg&IG#2B>w-7$dQ|EH@8jQ-Dy3dAz&2m}u^v;fD<R;_Ig
z6d3<<3x$LKZF~f!`{?zR?h&x$Ff;5a@m=R$wV_}B)5HHKO%y_D(~!*gky_RIZAl59
zkiaSi4s+7j8_)RwG3J05CylhkB}TzJ=Ov$9n4>bwGQ@Y8e6oHdt4WejskCExV);#S
z9Z<p;PSCf;CtDH4JFGxG(L+>1<<dGWC{0AxwM)}WUDu&B{`pr3#wu;nFw*;%Eb(+J
zgA(}tI}d0}*ydE6H_v9~;YKPKPp*@rs+FF0va@R6A|Y4K{LX?&FtGeHx!9E_o{^DV
zw4u1#9%!+ohWCbT)l)3fn(5W%)R+?Eug?ziR3;>C9-Hz@Z#FP};8{j-A;B)+D!w4T
zv`7k5hwKr@DHx%4i7h-n5?7ILv#2gVLZpni<tArX%vzjUE5FIPm_&^u4(%25_L2aP
zTo*Z{-^yW^cCv)@i3_V27eD2L${xqP7$_l9y)#HSRio;JZbEsjMStMQl=+qiZHMa1
zcSo3y+a#XCPwUP;xHk^p20z>h5=1b>oG&R1m=SVFD;LhI(i)J4xp7ZMF>^2_^ReF3
zk$<Gshp{?Pl&;|k1Sz85u{f>(#@<s|@gJ?_H77)&0g9|?K4^;6PIZbXo|-70<@L3h
z(`8HVjUn%{sQNAT=j}U^Gp5T=kbxB@b1T1n{NS45y<Jgxrk!@eS4m4Ig4HRH7824$
z87|&pW>e%77i9r~Yg^H-pxQfNzzw4_5wfEd3K+{b`y1!v3Lh(tx|*NO>09?i%DWe$
z@J&>V7+d7Ib=c)ZDT~i>qEFI`)b`fDI04+f_J8eQ1k6v_1t+!RXEQ#V@xB<K!MrGD
zNYQKAv6#3I_?(qEKgFM9{A3yc{Ua%@=EDA2-LwnOH?zua;mBNxj?%~2S~6V!VpN!V
z1H_a3y;0dRxdzkT@e<st4;Q13?%WKU;ys|F7=aKsEcCQri63c>3Az&anEr*~8Vt+1
zc??yoM1&_3CKT@ag+s3R3VS`M`%>@ocWl(D>e9G3x9VmSiEO~P%@n02XV4~&i=AYn
z11)Li=Cya#>nr#B*UT8Ss;aAO;&JnCttXsJjNVugIpw!aANEUM^dFz`0wI+?c)j|@
z@vC-Y(5XfR*X5UAU4=r!G2$1g&*P-vuc&RpTC*I#=Wx!Eiww`GJ`#WgRHz;WI`)VF
zlgy!+@s;k}W?+>s>s;1CKo3vssvXsS^wz*W+)N3f)(@`V88M}GtY@Frw_rNX7{%TJ
zKREt%D^J{jFr77L40+wj8L}l;&3GVY!u=^e7a_9ky4#A6II4xOL`tHFEjkPL$S*}*
zO=VU;^8B)gdyzk6UMzDc{q<aRMDsyFQ7a3AdXN03YOmh%W<mg8C~D)(D$d~T%YY-j
zM`|Ak1$x!ILe~>We9U)`1H?*9cRdE0%?|T@(o!oZi>au#v0L<Lj8|rwf*$pjZ3hBg
zSzwB7`*<na3^auvB3*!&_V=YMc{4&bC7T5z{`TwAf=okW&Bw^M<PtIX$+1nbaAwlz
z-mw}eF;cf%ay#NZ&Gk7H6DeoxxDeCqy0y3U{0Ym~-@ySJ1kEZPr=#)ru4A;2q3~gj
z{6L{DzqnG(W9D$K#-soU2HgU|peVNL_QxHLbc=)lkMEr<tugC7%39GNY6Eru#vl5L
zt!F=#F)DkRPaVFbdz-Zlp4RqF%mf2mU)E?|O%91FUuZ2)V1TYz=eX~B=|V^)%V4!j
zxY(%?Pp^~=!=qrypEnep$FcKwK-E|S<W1C0iukh4n0@V;1O>@|dG%V9iTk7}ph3b_
zOGZ|+b=I>*n>j&eikEi=l)l+D0sC0!imBEfHTW5W+n1^3{f%6_%~$|kDbhmyXFOMy
zhm*I#!s5WpzzbY5p-TC8kl+1S39q#H^qSOG+${>1w(PgP?W&!DWNaW|COb%ptUl6{
zj>5QM8pY<}_Pr*KG3KDUpEj{;`<a}8p#a8P+HAMsK)ZE3|C~q*x}5e_o@qYbb1p}A
z7ya%ERsrcs&@L+(ssH^0RV!)=#ySZR1lW--*bJ;EGBf3@nNO^cs$_RI)pNg?#Ljgd
z12Y@rS3#om!ZpwwJs~P{mc}_Lp_AS3cH7Buh+j}{Zgv!3(FqwYsA~)t_9<vqDR?{h
zl!Tr89_?dSCFjO9hH&?a+&o~zvs;3`lZ(1$y1tf%#M~4Q!ne4GH9c6L?*D4LHO~>>
z3j*wR)owB~<rU^j!yZI)n;>Uq%aaYUlsRWzM!Le-v)E}71ZykX?TbAzL5VOPllLRu
zCIzA$zFPt{?<DaF#Y;jAOjm&Wxz)OEvb-|0vVlI^OCU!{p6JzH#R-GOI;!o1PojGX
zrYrJhDM%g;s#Bh(*~l7^;K-V<WNhv&&VF-{BS7)26Gf(%&qkkr<yC5~7zANWm@Z#;
zGsR&>TGqt=AY;xtYn|M|)(8lLCqx5N`_kRwe0HuIUDyz?cb^GawtijIt&@@^wq$~W
zrsRxGVV6rJIRogHBFdAUU?T(+Z8lWS97^f+w94e;sQH7Jd^W-RE~hl7e;kPsvhf+6
zt#q^J!4c*U8zvsK<lWRBhB`dtUKmq!FJ=`JNC>#|wfJ(^9?unnY+NI{4>G6LFzM8{
zn47J;Nt%;<-V`Ix{0=YZR2^w`-<m6=vJ#7S)gS@@Biie_Z|AkAE6`nMf#2G<`!}ho
zbNCAmo6klL>}2-L{JWPq5h@>iQVpA@AN=gHaLC&FO=RlAMs?&rp&d{hY$msQw|Q1!
zdw2)nD9j^?dG;S=L;p#L{3j~mf6KN2Xpug@wLY@W)vRj%aMi|VBQCm0GP9J6P#)*A
zvRZgvG>0>b3ZoK46<1FWtNL%aBi){=;?K;qXuMQW>cv*M4BjB^ZzX-ojW%%}IATtU
zwT5UJSK`D<8-aiHuMGmxK|Gvh3y0+E@|ez>A7knANc$<bTV&-PAUi-<+B@Du8$$Ok
zLGB71UTFG(hc}P9TPBasx8r#f=1mMzgp<kNSo8dE3lVLII8(l629a(Pf}xv_0vX*y
zz_>DMSD<JIww-YuWvovGe`d6et(!2xsHYr}dEgNT5LvR}(t<a`YZDat-?LC3gfe}7
z7l4P=N_tj8k$@+lT?Q7Pa@!NcJ9WVGzD3!%rLnr|>9=t8C@LndE45;$`z<X}Z@iaz
z5atCFt@-8VOEp`ppNBn|!-gbI2c4}TX;L0n?rx?Rrb$|D(E~i1CLo=WwR!O^_71W4
zJ(~tS4^3k~`1B3m7ZYKiK@J)=R<}%hF6=kQiHFxgOw#Dq-nvs!*6CFNqBSlakzr?c
zRM7?Arx&igmr<rfHGHa-ITxYQVita08Q=EP2h>>;3QbqIF$F1~`YK@Ft$%|f${+&m
z-)xVX|11MP3=0vgrJg0K_mkr)Y<;6S_9%SCM*}>|I0M{Z6_qdZm--%kvxfL#-~f8F
zfiunKl+M>7>LwXp9Lze!s>G=wW#u8bM+En|v<<l5-`;5kSA*&%mWD$Xo+<q)G1=M3
z0QI;0tnfcwI0b+UXUP>0L#Ufy(Eg7EJ|Cm<Q7%wDl^V=Y%-by1Q76NIkWjiRMM269
zrE{CNxN^oA#s3<rVEou&zPv{LLG8x4Qe#J6Y>80+FC02Y*=TMG2Id5=nyN}~cXa^?
z=Ip#2<M96*YoyDqG>YM*E#bgZL%B;(bJS&{%#rx{Hx&!77o{7hP@GtU{=XxY*802b
zAbuZ<U*wVnS?iSB1`VgiqLEK^nE0Am=J<o$K8`r1m@6fo$w;lI9-OUe;QVTeugvfF
zpqtM5GM-{Tu$lKpDx@bbRsb$?QWry>z*-F=ieyQl6Uo<WfMDQ9QHk5Wc7I6cwvrz>
zjZnXgIN@zx1uH90<TgT%jt2}ox!<{0ab<N|TVg-C6gkOGy!$-gQan2}Sa4n9EIU+k
z=4%9OBWPpR<tq4`F0iEdxTxgt`vE-<QW3PO!DKLvQZ6EoR)x^v^vx@Mi^mFIP0D;(
zS+$V>m-6U--^z((`UavFt)@@)C{``qd2FP?Jozi8aG9nmrfRNz>9aMByXFByxh1l5
zeKZ{Ak*k`&*CbFw&5X#p_x2?RS$Y@{WGVF}+2-{^&(^Zm$t-AHD{h$rHhD4FB73Xf
z8fb~TUONsY;XAk!RGBlfj*NJB+tSwjJ6bcyA*`-#7Daz2t1qkpI3&vNoZlfAR-xf2
zrnN&&Rp(m6T8(GygJz~iUnVM!9^N-({DL2@;EG2=S&X?bBK>eJ0ms1)yJg*i+RS2M
z-u@UwU6DhpqjLD(nl{P^8++9FLhDI@)k$`#%X-3NW37@!M|z%0a`)X?DT26Ml8hw=
zU%q;~qwsDfHj&Nj2go?LRSN=S$e{XwLwa6{(nD%o=Vxy|<_Y2$h2nqi1U>RU<><Is
zx$$P1AL#Xj20WPr3kSY<eKNf{17+S;PEs?Ap;0F<-Fjz}fOY-h8zw%E$80<~e6_c$
zG*EL;MN%%qv*^0x9zi#3;Ly1_UjxzCN2ko9N^tl`XfE*k>jfJ!nV>h)7LcxpZYg#J
znaJC0VZX9bfV<9r^vZnfW_AFuA+QIw={EVF4C)1b4;HJ8qz5KPTV9TTi__uq*1M*R
z>u$BgcK0!M*KcVnC*}gg*rV)Yt$051S`>!%^n4Zv8B!VkF*6Ne>rDh;`?85^4ZJ2H
zRI^)Vh%Z?dTn-!QFx$~&7mp(L^c77E^bq-yXz_!mON<x;{<T%f;6-BmC*o1?F<yYi
zSdEDsrtxAqN^7k&PDwqgoQmlS&(;ceM|Y%U155HReFly`)-se4vhdyd3ej#5=>+dl
zEjxDwb92hx-aMYngyf;&ddR}YOYMfry`ip&<nup*%+!mqyyQRag5c3DYm@}?Re<+e
z@MA})7r3xemp+S#VK-HkbW!?+Y~oXCzv#^Xp_ATTdj83g;<ZDuL(yd`g|f*P4^!Tl
z9VBvBlr!Dy$EBRjLwdtM$>NT~IC6a~)WhFT&{Z5;x6~^qS8Ta6^YdH2_BDLINV<sc
zQNIR_mcxH<J9TjMbjn#+LWJY^>BNy!S;aR9$MgA;k(VhGy!>W#?HG^69=W$HwUq|v
zXvy<Hf~Wt&7}SCxZso$VW!lDQx@MZR9Unv+wF`Dt3%@2|e*ZD^)j%F?vVyqmmu;jj
z;=UXaG@3!>U15!?TaGB7u>8}GfwwDLk^OQ31&bb;2Kl=Tq%a(uk0$an<<1ur(ep<%
z{&+EtM&Cn>2EQ&Z-)=O9QFy7XoqB|ZIC{TE!q=J)u@;qFcszaI7oGR>tXEE=s`N#o
z7MGhu`s0#4Hcvc$y~Plo0jM(*V3)UB^!nh<b#VJF;0qKD{$N3FX=_xYm@o*gB5$tI
zCYJLaW_`=FgrY$-Gda6+IV`M-MIED9E}OYHa3XnX9phy8mO-oGlr!SF));+nsOY|a
zz|89Ww&x&6iP9dEeu0y~R8`*?i_F!oYOXsY!|po_JtA2fp**6*Yw$}nb8bW^uerpQ
zAC<urL^6aW7t_o5!1#n}!UD>hO|aZ8DMH*nbIFa>=t&E{yLvRy;;Wik7$C0$Jd9@-
zNaa#fAGTZliHWt^eXs(0{%Cyeu`)p{2lpqYcQF<4&y)}xJab@E-#aVyN#P|+^kOHd
zv@F44^Gg~z>+fxQmJbBKnDH-%17-42h8e&rKG7TD6ic1t1KHPm-vD7hM0X26B<(qs
zDq6JEUls_>No8J#xxgtRg|l3G+~<(sk7G6Bxs&hj3SIe4tetUMuej%qGpFj#&+0d!
z@S87?>eIHZLu61y3Sc05`QPc`|24ef|BI_D2K+(`A(xOhp3!4`R9EC_0GZe=sE@`Z
ztLc8_oXQ)dBMQeL>yx&oyFJG7QGWyIEIt)>{ZtIN@k;n+()*y(oST!ip1Juhj5&k3
zNN<&0;!hE21uof3@h&emTGn{5aJ(e!F4z|^_F}WWfAJx~C}ZYKPYxUi2Nes|o)j5e
zF!}z-<T`Ot1-jA0pSU5msC{Md?a+|jn1he613>N|4s&Pow!&+=%i>iq3tFf!BtXJN
zWF$vs5s$8=A2Oi<;p{_Ht5YUoV0{>-U*~t#@DE0Du7qFJOVSslzj1VwZYmRM2gx9#
zwLuP(Pf5%<RT~Z8R)s{2opQl*OC0R9(Z9t!Xn<6>;alae%id|3$17P2)gvD1E3F8i
zc&(Lyz+WTCzq>K}UkWX$sa;2HwytEv^`F*B#uGhpZ#A)a4fYTly8;vaT7H0dzf6W8
zs0g1CosVmUGT+#=3{Bugy`Ns8R%Q;%(`9|mNa6!0OF#(E^`9hlP>4#B`gn0%5GbMt
z%vCAGqtw4=@YTS-vt`0#4L&XG&u@OKCQpwWV$$@2%vz7MzG!@q&du<-5|hPM%dff|
z3GJq5Spdpva;SIlC(AuvJ70xrjEAo`KB!>0{eG0D>pcG#hC$oKe7BNg@V+B3g?mql
zxX|oa5Xv$@JByuHt20eCq<%*%vF5S8)iDd*dU`)hX*Isf;Dz^Esc)VIaH#D$3-pW#
z>_(QX!<M{BMY5<jky#;2zkRD*_|7W-*!L{N?de4k5n<o57dri>m($2b1zBLDB$Yja
z3W+097gq%!b0I{~C+Crv^5x$d>l(dDZp=ZB^kugy{Trvg<+PqIH%n4MIc^l=eEW7#
zcremq7tbOBO?vXFZ_Hi@*<^%LcFWHz7LEj4)>;349=a)5x9$#i83;19ZPqaP6@=A-
zz;0gWBbn#Tl`ULXZ+=$ha`wdj%{tl7Xw#vE7$UJvaSY6UXxw=Mg-_}8=q&;~L)c_4
zFc+BCU6H(GmMtR-*J>=)mz6@)rHLH&WI<OJ)Qcdqd~`!4lLC7akLPT!q-WGJD>A%+
zCx0Ut*xRD9+zD7<{_GhNc(HU90y8P@UE|R_>YH2Cav|#iv(&annHCY$TX8TF3_Ra1
zf)>>710^>Dtw}qYYwGCeT-{$Bs^9;QlAFT!!B<F+Ft5B5emZh9Ei0yxd&pgN1LF8<
zzX|RTRbKbq)su4IOQT?0c0PvQvsXtn&oMlHQIh=#kG}gjY*zbcmyNtYUAI-2uyI3E
zWPuFDp}+!&!W(Qyv&U~#GjsL0CxNzJ^~n&G^)tl>ADBW232gU+o*==Td(`?_YtWyI
zL_`aYiHkA)8}=JtyT2+(fdxK3#rVmGo-G`uPK`yGm6>XJmh2nUyDxTL`WmZ8QNkn$
zHtV!FJ`+v?VNrS%UB)LFqk&3miyd{tO?Fb{lQi$7&nV~lv#@b!^%Nva|F&SH-$s6^
z{}Z(%2fGRF&LM(Pf&Jk!44Nmfc{bED1Q3H%EPU3-#=~tjVDshLTHK@BW%%^M*|Bv>
zmd?k@0vT4ah%8hM*>Fr>tou34(tVt%Bm8`wy_|_XOm*aX1#}LmuhbAwpw&QuT)#O2
zt7|vJ_iP2rIO+RR&$Av@Qbkhk$vhO_H>zuUjPkd-%&GKA(*Cfl!umCTv1CF;;H;7W
zvPkH6!X>UaXK}M|^xI|dW(7@qL+?U_^fw<z(<6D|s^phRd-ZiZK~=*oFAW|+tUM^M
zMrRXGbD9LY?M(w@kh&}v$%DHT#NFUP53sc8<GslaL@#Dj&7m|Nqy3WdS4OrC<_}T<
z`M@hH7DW&WveRq6B^|yD#mQm&VmlJhkx_R%Dpi>|leLn7@(A{~D_TZIyw2X&8lBtp
zFE&<DrDUP3dz0AC1odOWPKMsu>q45n{_M2#!83<KTA&c=4<w@s$Kd(X@MsR(#g+5g
zHiS4yalEJCtX7_Uz~C)I$kp#?U^MFqB{t7ew`j}JZhre@(2Ys$R$0C=N}Mi2-bl|?
zU*EdF;2cOhEcy)9pSlnWt4PSM?&bFA!_+imR%K3B_;~rr)CuFAUZl*&Ur>&6ToJJT
zJWI&@seP{LnvRkl)y67jd`;HP{n`rxW8CsulR<k5CpQ3mkGPg}-Afu(8*2XNj*t-P
ziiv^lrGD<N4Tv8k(1GS3dr#?FCMN#f${PH9Ohk*+;q%UoG^=A&!nmHYzSW$v$DQN-
zzh@ED2T1is9Po<7G{DYV!nU;dUN=?wtk+mprQAx=p{iC%bL9J>Qlzo@@*MifNs~9X
z@dxB)79@-OCtDzk%^!EKG}PC$BHy>+6vkEX@)&oog}6o^*(|ueVQ+u_j~@Qa#NN#s
z5BGQfs7-MdxXw}U7<<3SMO#$GMV5Cv#7A&Yt@dZVK>HK$<s8fD1dft+C<af56-)I>
z`n6xXNDEEZ*o$1LIOCB6W&&*W>m8(7rZuE9UgEs$#HfOTRMu2_s=Ouc3_pe@G$fld
zDekf{gFLH9lNVofqL1eus4ka*9W%rNbCU|5?lVy<6!5;?P5?$VL~r5?Bk0}e@$;C>
z5B!K|;&?xby`;4k3I5(N&G&<z_m(F0)bl|U6{9r1f;I0pRw%EMyMT#)B@!cO?8-yg
zzl4F<xrtTC1-E+HX@yaJn@XVm`{}jxTSCWj8NU5%wyWUIZ2$P>;MwH>N0&9NCuYA=
z_0wfG#s)B%@?o)MM6L>}(ZkJ?o-_}XT5D65ta(eUm7Wh%&97SHCrdNDXom&?xY>nj
z9>s^4H*viAq@F*&yFSJ;Rl*Z$##x^nek};2Yv@~V!O<9FL6)CHbjlJ5rUkq__5eD{
zue!7K9IrwSqy+k(n%PKi9E#|>xa^~;9GH^<S{b@;wV`zoXQ)t*JrK<CLkQ<|0TiW)
z7a9x3TFp)?+q>QFxstRk&%+JiAO_3wJ#_H$iVkH}Dfh(vrjOydOzI7{z%~25{9Em5
zTRmi6LF_@|BT=FNT3Vgfwpp*X=WbQAH{)_srGSL|A3M4HCxYwm-~BVR<ZnGR_Wb|V
zLt}ob_l9Js_X7qk#6j}^?ZIzygF#r`tDN!~LQwC7L)g!yw%n;c+zK~7ebO9EWP^40
zz;b!_>c*p&{5zPZbdXvthEtF{UjB<KC4MQPJT37=YgOHpFwn|G-e^$4Y%2C0BJ_ND
zc+(wyz6qGTdegJ(zP-uh%zw``v`2oW^~C#AtvVl4EkGU1V6@Qw<^jyrRAjy5hoifC
z+ixA!Dzz~4`=OZ|tNM?E_L5G4z!{|q*(=U76c5_2Yh011s~8J+LiOpRl5Z)t(m*Uo
zlCi-Jc5{9guZWD~)&wi~pFt_`d_UMcecak;f~0NY8iIdvZMuw_xlxrV5i5b_i%l}|
zN&ZhfcILO~#~0&v>uq%QXu4@n7m~dh1HS`TAa$`+*_z3h%B0_>!JUwh;!&ZqFCFJ(
zQyj1W|N09<(70aY=5KAlO-Zgjb(i}{%pMXDuyvwx=PprH(#y>JsU)h^_qO=2y26q;
zVvF!bmk#xXgE5iH-PBEG*$-OB)+P&EUr?LA8ehpU@lNLH&k*G9DrA)v-Nv9L&Z*OH
zyQm5-cFq7Q;Q2eM(=2C0AG<EUGB=F^khg*M=+-s(31Fg8I7$U!;#ht*p%WCEX@yM4
z(jvvWAU=*=BtAjlr!MQ$=4NzkX{}T5k*K~QEe;{}&spUmOR}a0@A7_w(tE>E)QR><
zNay)Alsw;DZbO4s8qYmK2sz0o%Un*w5P90-ZjKpMDIkb26~+IBcN{@LcENKT8pO~7
zLsQp{1;oiq^U&9c-18I?Z!{zaavv)btUMB9Lo{(IG2JKEprLvjV>unVi=9Lfghfp&
z^St-_U1yf<S>8l?;YjHzOVC0DIi^a!`=8(Op<lgO8+HWxe;?8I$eZXJmo9qDlLQo3
z+657jeX}QloK|&X6J*O|&;*&S@I%?&R;yYakNi5|$N$sbc}7K*rF$P0K_#PPBqK^x
zD1uNxgCa>pP>B+hoO2E(NhBu$iKPU|l;liF778em<RC>31r)J>qWT_trn~LwnR(}Z
z?_KYjb=Q1g@#WMxXP>k8K6^jU^Z)(HZ_9zldJ}UGY(AA_`L%}M{K%H|C(FPCJM|}?
zdaK79VCOFIE6~!={dnc4H(4zeIzJQ9=md>3Ur`&US_1t>s?qbVq|&#pNg5CwN2T7^
zNS}Z9<^oS<;*V+#YhK%@4}D&d8dJsU0?bp@Uu^__{Vd#@M_gyp9JSkQlq-ao=qST`
z8+KV15UtekdU=ML+az5NSKgPt?DzQ-n7_FVV-zC8_}mw?!=1PtjYqt&IV(6+g>N>5
zo*JHp2;*19R&mwG{titePDbpH17gqqO6vbB&Hq_`BFj@<qnFed#6$w77n=D@HW`J^
zF3Rp+7$BDVTf+dY+^5P0Fa1_8Um5RIG>M+bU;XqvN`NCSkc+psi{K(*ywABuNgZ~J
zmKHTsUqUbHipBc1(5#(YOv?B$AyeYU(e0l5b}#NSF(IUB-ET)E6;;)wdl0c*C5gWB
zfi9BzeY(XQ6mdQt$c=Fl|EZ-PvkF`5D1J30i22pGKuv*`<Zm1GbVS4Wf5D;9KjKjS
zc_!jD!(TEHy7at-fxW$+1n0WB_OA^H&r}x`>dsc@T6lrz9N?~lUl8njaumtLJdRxA
z;6N9BMo5&eNzN>p;=?f^JNw{U4$F#89PkACR>jykC&d}VpenO*%lhUb?-TbFGtsZp
z)|&$zOyGc*gmt_`{*TH1_=Iy9ysD&?4_MJ24T-SE7V$~aNb|jOU;K_|8o(=e`&{W}
zWihiK?fP?3YATzPDiv)jhH5;?ynYi`U9K04w2><~i&j|7115C0NlIi@>+1u;&MSTJ
z&{TX*qbc!GD)zdG_HEIEW@xup2ZASc>ftwIl?RSSgt!^M4WQViO9u2+(01GHy7$TQ
zg8K5LvY@F&aP(?NdET_k^Mjd;nUFR;qn{3kKZ+}Iymg9;OJt+!(8?iQ-EMq=>QmPW
zH5?I5Lqw@eu{=ZcFIyh&k019ejE9%`EWnx8#V>n6P-OBbOI%;{k!FQZY6Gj4K<Co2
z{&hv-@Fm`*QYgeXnR-HB)iEh9#oTf*U4fpB&Y8HUj?EMke{)IBU0;T6Eb^mE!SmxN
zheP>Umo2d=_v5?$zD<p`r?m?-8)9%KA>d1R85UZ3#v$dCSmDDiIX&%lj$1Qcr8*54
zCsM#xdtF%qMv)b!02;njoiRB091HL8s0SG`H;y{+41JiS9$blg{}}Fise3A5Dq2cg
zO5s}j-xDU%d>|?*oVx!>-%#zEO**eqPc}H6z-hE%HLJyGS82CFm5<JYtKw?B^1AXt
zK9H*YhmtdnzfM_CN4hDM02N!Tvvjmo<`bY^NDG&Y<9k=}p&7#h6#q>cg>Kt}5oAor
zQ!af<FNme%F77jtU9ZUA)#!1Wu*b*hKNCpn?;7o7_dt%<=i+}R2q92YxVI#WJ8<ZR
zw8j8p)|DcERs6NjsX4FZt`*!;h~>OcRZ;cHo7wo=QDO71SG>6k#e3H*!smZttf^1@
zdfG5e!!%xZDg0I0mU}?LmUYPAIpr(B;^eohviy3cTLGdp6mNlAtFLhGp9!vj^MGu1
z$*~ajG2zHlnO_h3{c=||{`EGT`}aOG<Ofm(5TQfMFr|O5n(DvvOVw1V;K!QU+KSrn
zts$*IPaUu`CylGyUD98mOEj)aRyQ6lxDIZ!knb#g9qaG|d?^8zoGzp)#Z)V4&Pm7I
zt^Li@Sf_ZAK#98yB|b<3Pj+9BuWu6mQ9`kf&Xi8OxikA$^VklTJ=*D3s;k|vCD@Z|
z)R`KvVVLtcjycb?r?pf`yj)Eghe?`Ik#(KV!l93qR@Gc!h1Sk%gI3fAy@!+ys@Ln{
zB5!e$itt)kzLbm=wxRFHNwyK{2cjR}Y;GCU09AN-$9`SIb2Kv7ap0Z9AQU~w=0P=l
z2UooYXx-(t-YK=v8-R97%9Dt_>C?}9GBA&^?mPi7$>lQaLz@RaU-;3L0*_EPIcwuy
zMw`Vr#!-rWb@U=7axqjb@NDZy?N1|$DcTTEt`@7^eV^(P5BmJMwT#W!QJVOC+2#Ss
znRKoVNs3)0rc#(bBewC;?JrYGJ)hPoh?`V`mf{^CyNs!g2GuruG9PwWLvTVU2#Fqc
zxU1P5Ua%pVrmM<5QXg5tasLfL%%)Rs-yO2Vz2@fx1f5FbpRj&A%|l1`chI9Df>~}#
zqG6ebs%a5ct!qQbC6pkIZqjX7oy6vQAhHWm2f|8i8tTNMRS`|XQXj&!COyK8YI?6l
zLhp?hb)jS_TSvFa3tXct;}tLKPSeNR9*4h^z3JEG$jqF6P?)Yibuu)UnUgmMxTRLg
zBoF$s0ty79Arp*UP4IZ=z_t+J{%u@e2M8ThJA!GP`ve(8YE3ce#^0i(Wn1;0H767p
zSxV}!4q=m9VO*&$J=;slhpQ+}*d0OY#}@=~3z<r=Ot1iku04~w8qogPn*lgd01U0)
zAE!5HnrLqEs)#I7*V$<#-h1@=N(A^x{;Ywu_+-c8k#^Y|i^P?<Oq~Ei&Uoi9mk4hy
z1gxob8HkNxfTDEKqpPKONV3rPXwLG+XBOg}J-OnkRd)<<H?vSHuE*2s)I|*Miui~6
z;~s29g%VLDa}pXyF2r2+6aly>KBy>&!t0s+CN%-AAumx19^r0wpU_iYgj33usM_<l
z)d#fuB$K0YcEwY<nI*8fSvi*0GK34?`#a8|R<>p?E$g>-Jb|y2)@1fZtY_$Bg9lHk
zq`M|_g&S=KbrGido0mW5|J4BW46m>!w6TJRgr*#jCAV(BhEFC>3cQXHK!5E!Rj{tl
zJB$jfR3o(Ks7`rtiCfVH-*oq!GCkK==h0*7s*%y5TMxn}fI`T?JVH}Pr**#U3d~rP
z>tbVcn-RRmKrUkX&6b(b-Kjw2>*FwHYA??4CF^Y3j4g7N7C_4$`}aN>{}{#iKjpQ3
z+;uAS5E!FMkZmCT8^Su_ZGk(v_cMY27>@UV=B(>11z=M^olfI$M+f!re*B>Z9x*Jt
zGQ@g%2%lFxG)w_>aIt_5JP=sA(xkvT@y_A+h_#M*6e!r1I-OAb!^u^N!Ytgt?xUkr
zeV}40Dh|@#UPl4~Q-Ff=EOlQf7`pq+mni^>O$QWbCyx`Oe2Ew--=4j7)t(@GSy+RC
zH@$m|<HESLw_ftS?mZ;ja1oD8;Cc`;#mXb`jO+Bu@&Uz_3=XBNuaz-n((M{ZMx?`1
z@@tJcuE#yXk$1J2slLGAXg34CP9s{bodsWcjQE?c+@p)h>Ww}Tsy-%U83^{*O54o1
zNHOD!q`^Tgyxu_SDs+}`43v+vTj0}iy9I)fd+Loc+2p}hUFpP%^^}QHm}>~*KRkK$
zYK1HP3KoW5zqZ8c5UQ86nGI{4RCdujfpIS*vy=2SHJ$RFtu8eT&s6vrPRbf_?r9;~
z03E)@_}b*lndiNZaSE3_OvbK!=kD4W;Uq`*8?>88aCe+6>{!GRq6wW52?0r_1g1cu
z4yQT1>Cfn^H-c_vo;6zgWHqE9kP|5=Ac&3}<PSNQ_%hvA@R@F+PU+<hLkwVU#gZ#M
z)+$Bu#=AMU$n%NTK;>~&kvP1LYKG6?A&aj37m_dUiAcS;f9mt0Ssy;@P?7Mg9nr4P
zO6u3DD)Hg7K9aB+j(0QBDr%I>bE`KhIRhhKL(2D&$NQo9GZ<FmEcqh@nIn6IhP1-v
zK(JT9CU7OHQF>>k!`n8szo>Y6qXu4A8!v7rICNRF<?#cjl*P!NlFD>r<3Kqu>yE=b
zy#2;b@*9UnA@Lxs-4&g{1?5w<kqF;<w@<ZE3s$~}#N)7Nbpf69>#xLVx@0(dP<3Zf
z3pR5}Vl_=eM`Q5-+Pz9l*YFM^VbW);sub5)QlYMmg+d`ebmW^qbXlVhMLTWZOlAOX
zxf<jB>bhZ}6jb<}ksY<vJDxE1Ox?vmsg|pJ<#n1GrWg3nb@&4Pu2l?w1smd#Jz*7R
zMO%K)&V`iHpxcMM8>LNlt%A#W(>A_{V_Tzzr^J0JC7PH<d%TOHXLGKJz9b`c4x%P7
z(nS~8J{Xk0KEr1_HDh!Ff6@W}`wtMNVWjZecw0QPhwZ_e-u{D!4bxCOG-ty5b#2N0
zx5wol2mLjO`3v~UwErTjei3ea+l+OyNd)i54tPx3;IBc<)}VW96lbSKJ4GXabJbra
zhgiRV!+WJ!$rP;#ob`EH6ZKNF*zx_%enqf${#dH#9$uydGVQQpl;N2jm`z&HL#e!{
zXd070&#a(qLj5*v@ZgRwJ5Yd%Rlz;U!CD|sg${E^#AfYhPQjxj4ffg+{Z4TQFoiK0
zz|AV*M&7rmmqwJ*%^y=AR&SfynVsJMQ0--`dec#bYJ{qbzLer~DmpI&XY~Oaea50{
zC%j7%M$1O>Hmr^ELwKO0L^rG6k?7fbh5bpfT-3$-#-^Ra+M~nwmqu?Df1HmurauQV
zInzhmUuL*&b6lvZ-~gS41EwuXXOD!mAsdQ7ih8#Q9xO{`d*CN~FIiE*qmV(NHr&!I
zs#kVHE=k;Sr0eU^?WsAM9AJwBR?J>INkoS2pT0AV?wy`U)2^-!H>gmgGB<m>B*I4U
z5vBainDNj~2;~s!woPd@OFgu;0(}TqQ{fA8amce=4Lq6aInT;2#_;J*v*HzWNNZ54
zMO35WJSzcK`_Ybcda`pbsHn&<%f`x{-K*-7{nMU90FsiVG@h@y<XpF{J9DssSKloM
zIT=X7>R0y!NDh6l5rsC@sbbkSEbo#H9Ywmq)cg*l{x721ovF)RkICsT#NWQmoPt%w
z5L$`reH*ILod}zlun2gUTS1e!Ajj^-DNk;2LFl^8l)VhdS2m`dQLN$6r%z>zq|Us)
zIlgCTa%W1_cE{_{fMjlOII^MFIOERrR}%HeS=vuKRUe@yq6bY|F(z(#`WJ`ycZa*!
z6MEvd%%~AWS`SsiYOfxt^IImkyW`;{l&EYs$j0|1&#uT$42s^4TejRorZ!6zr29>X
z%Uo96ON0Gp+Fkznr^btmjKr<7Z`6RGbE{;%mV->+Vej#d7pr+cc&^eb^HDD*1B<-w
zSvsYJEz4S)qbzQGcsN|03DR**X$fcGmKUI%SyWmSVtUoaZuHuao-|JXB&GvOyg}kM
zuco=6ku29ROp8Qo=<4brNV}Z{?<rV0EWLjd_xcID$x%7kU2#7!uqec`dQqxO9{VSs
z`7eZx`coltJdavu&(}5B_>}n1cC2_PKq?UK9lAd~Xba{Hs<jx+D8_MD`$@xmFBc(D
zx7bF8RZ?d*`-)pp2D64O%POVCk0ZATJ?NK9tszuE!kh}ngtFr$8P4%EB$J#;a*II=
zb4R4d(j1y4(=&yFU6<b{FVGw|Es#m>b$(vYr2jO+xP2<k7I@K&>s$H#{OEb5rEcWI
zZ-C+3<jmZRn?oz=(U?Q|DNt&pPq_*`4|Xf?ENp9?jC{NX%U5s$xm2}Zy{|Ry`wgTi
zTtU>DNX&VcjX>>2_6`qFIBy={<v^-kBe{oUoN56J4uUS$nd@Fj<jsu;s`{yo(q>Sw
z8RW@(9Rg&~9cPdh^T%$S&Il7LvnHWzsvuI@EzTZ_ZOTXI1p0}LLj3tXdD`6lSu1q5
zm+)N%S{*4RCF!C`S-MHa<x1=3_iFA4zkLBjZ_UJkN>&5NH%66PfKwan8;}4e_UBY9
zkqMxUXWW(2@P-Tt;IeJ?EmAAIGN0Vox=iZS@6Bjxbg7vgnI-$?!%%S2W#*x6{Wm0F
z_e}&J*Gsi6%7U4yN5s;Xcm{mcFc$LgijjREWd|XFrNQV72hK^|3AU82q4_U?BfMR-
z*N)r;x;xcOu`Ve0fE)u)O`8UvWHl0{5nG-sZ#-1p?ZvJkBJ=mOog}0kDHzlmAV$FU
zi~A@6C>BQG=B6F%VQuP6tIe$H*Q~u?gg$Z$K^&KfWKEN{n}$8_rgu70%|}|#+srlU
zW3IN;ue^E?QNE!$8Y$-3BE3{nu4Z11-2+g^iSeG}q#X6<vkSPi13NhcPDgoVCkWE<
zT+f=u>p3KOM-j5e8$4&HtT+QEejt=k3_aR}U|gT`16IVg6~NBE95Po1zy$`&k$CTJ
zV9D79<YN_DI{?4o{~f=C{5*1u568gJYU+4@U?T*N!h;~z){wm;@iUwQ2DV0ljih%t
z#t1dBCjLy2e*jrQou+J7YDfKWQ1<B)AnpOJgKsZDqF6EXx99dyM&1+$EHE6-$VED-
zSkGW)?Z|O%{Ndr4Sbw<!|3gis8S-a|$%MB#*`noO)cBDR;Ms3EoMPt|6c0ZF5fxb%
z$Xw^o1dQq(IKIJw<k_GzMIh}iOE-=5t^{NUvYLM8ZI5fKN4WOHpDXa?^sSsPH&<Yf
z-f0Jdm2w;Ulj`k|H;lCJ>#L(s1}Z%mfuR94n(0E+EPHS$d&ScG)1m?Q^UV&KD~8od
zxphg)T(t(6ii&)<e(_t<4}8L5X9Wd7q-uKZ2=KcvD?l|9Sr4^|59du=v5>a&xIOdd
zsWmd1vrbO1mdt2R_V6Gz)cxqf6@O>Fw^y0#BtftG1h;1``K&7pJmZW|-9_oEhAmyP
z%eI@dc%U`I$ec+TX&Tq(DNvco(HOYAJXpH&3onb#EbQ_XhA;DSFNxF{BnqLEsZiWm
zA7GQsgtMND@O)6`4-){7W@ZFqd7ELAC4TDFMhjzMOsIF*oFqp@CkHF;sNAf|Kt3B2
z+tIQtG4yeizT-=0{e;oRy{Fi)1+<G+`B+s9wY7MCQYt}Jed?BWCRt;Qp!`(qN_ybk
zl@i}Q(`KHL4-K`$_%RonNPoAs2L|mLi)34hGtc9?^Gk9tG>dfNVo@GoF-xwDfd+mh
zrN{k>S4b#@J-a)c1~EbcABUr9X1K49_MG?&jTJOKy4Ilv+7K|n10D>+dH2?mu`rCJ
znjiQnp8qR(8M8S}!>Q@4bGz4_(3#la$i!83iBd(auLlM`8c^*qp&KJYrD?7;bkv~o
zFXNrM(@8uRm{WK58^*W-Rr8l?Eno0nZ@c?c;K+j|NJ0Xs7y4r-bk)RYUm*5;k?LNZ
zG*$EAEmjI(4(S0#a{sL7x<cBG+aSm=zg5I<z0EAE(dNe!1OBnUy_D}-#g^}jOX|}B
z$nPT~Wm3m;2tQ-LDNsf7-H9`b+f_nB!i><-I^^vv`v{C<cz>n7zCHthFe=O{nhfxk
zD$BIS{5r~rPhzz3{z7$`H40t^`~J6v*{bSC6qbs`3y~KP%N#xV9XcN*`Y*L~So|;m
zKX|tN`9A({M(97D0J8C%L`-;J)onR^_E(^-5nC4JgNC9%4v?5X%pJczL)j5;_#Vcu
z_fU_o6J8}MdwiOP$BSbJ|M1H{wHje)wSdH)06TRjcm@!+|9vJZ)Qf6AqLe?P1{E`O
z>Lf|DV)}gZ7_cFV!YyFXEs2Ia_py5uUuw+(k$Cmn;lUKp)59|E4s=Q5`?pD+8n3v_
zbU$-)#>Lu<+kr1+&rNgZMg@;u?alzSQvK+Fgb-3?RI}>qT0WZ8CmGMdS#J%XA~w4Z
z4@I7zM3ZYo-JkL+!CPXy`Nn1ENq1Ior{ZV$WB|9Eji*GCLy#4axitv3{saP`YM?k=
z-Vp+jx`LqxbC+@Dr@(Pso@X?htUIqgUGRQs_@4<>zkg8xT#ZGj?8*dudmoN7V8swu
z$Q~c7Zv%&Oux>P8JvKWM0&qMh|NN2wr^Xzzw+o#U`h`=&vy0d=0ys7M+Mgh;4D-n2
zLx<BdAmm1;h-1%W240^zFvAc1On?FUI!iAw=Pt=M8~uXgQC~`)h97fwt-_3ff=H1z
z=-%es(TNdWFa~=Md>06ye4mJbIv><3(Cejvhzha?;tT(URkH&{2-QJ$6=Mbs0WsVk
z8uh0pQ~HPickvc~4A}*EJoB<iM$SMLS`2GeQ_vqC<=;MLwnGbG`oDFy3mgqVhgu>0
z%}d{zL$V4!#D8kq-?UtA6N&eKata*(oyZf6*YyKlPdwN^{E*_$ZTn->e|Vh$dFVfH
z^KUxvzt7v0{iD!(Yyf0~q_S~mB+qOpb-TO}cqbA!bo;UTr+)P+(`N`W`JV|?8Y47@
zw#+K(f3)3Z_GYx22t$83WbM4pc^^X;eBM&LTD<$4Pptq)bl=31n%I3M^>ndF@kz?`
zzz6hu8@<@B7FLSf<W6te(5#;cOw{L9)3{Yz+(4Z=Tjo0HfAL$>rst&R+O=8MS9|j0
zlYVenL+XV6FyfseCtIR0lg+oNHa2D!VP3C;Gxs%^;fh9GVwLpA&Bp%Dg%{J!_Ugz$
zVQ~wh@<_(2Ip`8zecL=*H4ktf#KpiID#<R$4asn0T^;~chfnpMH8tf;Wm-YeZ|t*|
z+He6-rZL3lsW>E2-I;bPD>(`S0VLYut*<Q`>1?=)tdl(ikG6L22joaa@ZM*L=4|0)
zN{fVMls398*r26d(|}a#)d}89!4v@5=o6*<ra<I*B4Pk+q%s9m=~j&Dw`<jxjOZ1`
z>!B^2q^`E~rc66a+y#$3NLW9CsN)G-1S4Sk@NZBR*sDf~h<pQG{pXg-Mc5ZYvtOpw
zB6JPW>~|4-VB2g@T@P}Xej>4|C<^(V?NI#9RYsnW<sp+nv~e}vHfYGN#DAE96r~<3
zV&c6CG$*J9max^RhLYN7K%DkzuG?fNfQwRCECfJa#HPXN<%<+=F`xHo-1oX<L`OjL
zIYt{tN3<Mw=;F9XO6Za<v8&Lw5CjB7w+(1$ro~sC;vreXz3f~WXR?HFDc|U}R<SW{
zC@I*+&f+SP^SKolm$hy*i+@`t-*7Xvuke7Vn#dy=(BMli(F{2>hu2E8{;M}dwF+d#
z3Y4YjsTI4tXo7B7hO7ED&*U~WKCFvY!%*tCbL^FwN+cou;$F5Qk?H2u9M}X5IZ>^r
zuX;iDOno;WNq3FZ`*XT!?#cw`pg$2?PwK;Ev4kvxc01cGWLZ!~=`uf|w$YQs>VnHD
zT^SJjQvn&{sbu8d<9SD!2cHiH(&mvt_n%-5TrbDA&CeH+L6FHr4s7Z@R~Nk$Vv=8p
zTVN{;ue&WYr1)L~(^*+2b-TD6Hk?9*m2Whrc-RUx#(ucxs?ps79u)zSR1P0vNSn(%
zC*>DtUwhmpWnMt^Pg|s$FsziA&hv>vHVpia^5T`gsu@T@w2iWG`qD`&^UcZE@wvQf
zno%-ytxncqH`aX1+z$t9QsB~y0=o&(<DZL>k;(3Kk`_URNO?60<!pV){`iOU*@%Ek
zdkk-b+0xIpyd*lj!Z0<F(XpAV_?c#W@BKR^uu0S1`?j~An4=q%(2-hpqYb4-R-=>B
zTiH%dFHDsKXO%PN-()sW#uq`2d2@;8kU;4$a)*N)vE+cj!LP3Q@jSDk2$`h}bAwS^
zrJ<T-3}2_AAo~S((~dAN8ptWGpK7hN#*kql3SaTppWmCWtFl3R_-&@XPkMF=ic?vq
z(vWqlIv;ccmykKF-Kz(vf1I*(N>j2uBQ!o$JVd{q-LlMLihe{ze=gqH^P`o&I3_dH
z)OCi=5dNuBXxU5aNVq+1FJtQ2t9~!!P&#VL4g!Shjo9j|VhS6jiIVfyZmZpho$Nir
zvy3iTF4fkt6^m;UMT3+H<Tw_j2*9S!%B2>qa}+ox2x~AX4MwW&>-&PHeRy4C`Vrii
zLz$AxI;ZnKyBq{`=k5y4ULq_U_ryfH>T7hFmxE}0{ZE)_r6}qzsuJ?_G^EP>#G205
zJ`Rl7R^+4lApy~baa#vf&`xf9;9Zh4R1Xtj4aWN@-xaEOW&nJl=a;o*;A3WZqnNl=
zL&2d&_IYGz^Yv4~=o-e(I<oed{IoEC^@<s=aSnSUJcEufJ<|9UxiZGP&MDt$W@<{$
z;5h<BYu!y~zu8S)#xH+M;;~NrPwQTVZdv-V<A4f8{x|pW-~FERh6R5sD6r6enRPD@
z^5sz%z8P4M3`Q7v<B?FhN@S4#owRnz&RDky{UVnO_rb8_Wpd`rl<{(gx7Q*U6Czmy
zO1PtE4~M)SjYNCu#ymgAkucN*0RSf#zJptU-8;(W0Dw6=Nl@gY9LLwo!qfEb-kj0@
zn2)vR%YJjx!CUJowlHB-u)h^*K1YieS@Y-mx_=k7vmNFuXJ;cp@a9_oM*Xz<75NX<
zEayXv8&Ag?b+IPjYzHmJ)OYqxG%>c#G<;`8-tw)lW%pstm!T_baje9PizeS9Si@@=
z4RRR$Q&4;eRek;3rtq7lnGy^2av>Qsj<k=7F2uYe-;cm(n(D-X?|BwExH~MISN^Qp
z7C9}HlXqc-Rs2Hg>9o1f1&vM+W+0fOIKIe^&PUk>uh_4d9To%1mDhY*W!HMLQ8kuo
zu}T}Y6Eoj<)sy0<w9g)T-!LIt*(PoUxigbY3f0X?Gh7Oh$5KOJsqKp@uo(t^uO_~E
zo>yF0)gqi+Lfh_~wG3m-lL}SSTDJ&o%7<~Kg#>ARI_P^Svp2TpBwv_9eEYmkAA6=6
zU9pm(9tJCT<?5{sJa3WGL%K0E(LHJ08Y5s9G3!~W<&jo%bo4bIDbX85H)=qx>gYG+
z)+ujYYqPuI(Z(XPXqQk&bZsTh(18D`p1p4H)nx~44S={ls%+HLv#r9$*Z6!KN&GZq
zjo9?!+aEJ<Lpy|&OY&uWN7VcT^ilwl1BAf8Q*s7me*q#v@Hd*b&nywLtGrM=G3%a;
z!zm{nuy_Ts#INAHlDz-?r!fcFKn&=8Aq2||>6I<N1KC?P!jb?`maMG0Ijky(;up*k
zD}Y)0P6GO^Ljn6hJz?a@6(DR8(1mOJ&lUgpLjLnq|G)N}AFu@fqZY{jZ8sUyv0=%7
z)kcPb7ALdgD~7)_%#XV(6Fy57KP{IJ-jkgQ>Mf&*Gd-I%)tb%Jd2Ui$oGrC`oT@@w
zk3NGKh3!_+9CStCE`GBifiqeq;i;1!hPFB>cwF3@o)(_Dz;FB+b+5v<aFPAt?M~+|
zP`5uVmg3Q9<x1+vj1~U&XffyDNFT@BVbiCn?mgA|L<*t&%7j<b_a0qcuBxBH;Ne87
zT55;zZ?H3OsK7tNCs{Y;=FXgrXo=l!>g(O4mdMuJ+Uh#@?13`Z{`uyT9b^cOW`S<B
zQeRC{jrdWh-caST63il2rG$Td3#B-2>Uix!%@zMuhPyL6bHR<0$=>R3(2Y#uA+Sxb
z_6rk+c%KwnrJ6E_B$uOr3r@_gpP82)WYw#ez?mTLa#GcMfD#E{tBdW_$qm$gZF;Ah
zfw!lPv{-^IXdpbg`I8NVaMnoAv$L%&!onpFTLzlAihlB?hEMQ_S~=;W!E>Txv4YhH
zeC>FCun^{|A>~?-%7m9>rCg5P7MCsJbVzB|-<IO7JALkzni}Xa&q=CE2JFnuW*@v2
zezW8uP%8cY{NMfK`&uQfHgA)?Qj9?`?-C3rD^n|TKYs7`fsToQ{@F_kW5-+K#)@x$
zSOZwC4=C6b&g%cvU=nUc^}r=Wi;XnXTkH1)1HjJw!Oq!-rv(;*!9Bw;pYTtH9{Rcu
zq@+}f*fWqsVR`d-I6Vx5QZaS-Z$J<bsI1m5vESOXr{3zcsL2GQ<Hc@n#09;k=L`y8
zQ4skA-?>r58pDHyWV53A_UmjcYfoj<H&$=(MILsq)Mz|j1D0ejigW;OpUztEA>OWC
zDrF(^I4O={naLpFn3FK`&Q$3|tzkDZI;G(fQ9Bv^FE|Y||AhOW6%Q2xZ!;*}-2)G@
z?N8OrHVr?)4$m_I+I1`O!%4fZ&``FT5!z+K%PW3GTDme{`Az(X&N))jvhoIWsH#0c
zXrD}O;2OgR8}{+=`7;XgVK5o0$*l72(EduDozqAC+mXRNcKzJ4K1-LUtBLNe^@()I
zT)~J3ZV8}qiWY|^?wO{7@rq#0_Y&OPAsI}>ffr0!s?aCm9S-NP_cV5@V4?FPLZCiI
zvPYBa`tOW&a~Pv#y{;)NMxybH>6Ev<(;ea0d>wMIS#uADKvHRGMQS%6O?|AW_@pj8
zpO}US?7MdJ_yMZ7BL?ijH2IxUvvZES1j(Ki&KvgIdhff2<X`-g{oT&}A99U<vCI8G
zyJI{RZw6t^3(TxOTGw~X93&?2-6P!V=2FuBNE0o=Od<EVm|=4Z9e>N-*fW0Kqq9Hv
zUa3=^^18_MGjH1HRf_wVJV1y?i(SUA8|a-l<vmBPM1j@$^g8{h7~ZhVrbujPc*0QR
z*(j#78w(GEE!`&xZ;?aEip#Is(?o1hSI`OSthl=j57i?6xktwOQ_XS%+4<K~9=0>X
zV8ueK8hHoNQe&Str54pGDevn%)0~gH(`BD@uOtK+rY*2WN!GmCUv)*_7*%8D9`T5}
z-Becx?F*)&j8;y67cbpjn0Ie3d{<w9=jktTeKdDnc&Du7e6~F5<}T3@n{QG4UD4~+
zP>9#XzP{YbiZ=5=<r%7!m-6zjor$i|vY8%9<Z)%j<Q<%x-^Ig=5+Jtg_<Q<(^$_kA
zI{r)>JCVqMTMR9ZmyhfBMx*rgMnyL&@@<lb*Tog&Q|!&WaweOIR=B>oGvo~K`{`>5
zf{Jc!lj_VZwh!4MAEJpFI-b_n)K;dTOS3G^Bj@8rif-+*?cOXWQvx6;FR$<^st+F6
z>C_Hw<~8n?!Mme!0H4!Ia*^;P0pjQBbC+CCLnW=fYJR#u5pa&6GKlqNH*+e}g&X0#
z2bswQ>$gCuemP^xwuM9QvMs2JZY%IVz5c$8z@mW7?fn(dGqkGO2*_uxvQKYPRjR>#
zic7da@xeZ?qk_hV+kfbu13_9}?Xq+PU^l`=`)Rn$G%_C%0HVu%4ddElE-!=J#E6D?
z-LP)11Fn-1aR>%Yak`C5g8uG*S(RZB9`>v7kJtM3uVv9+`*i>u@ugoiR{t;mf1da+
DPj#Nk

diff --git a/docs-vuepress/.vuepress/dist/assets/js/1.4f7abe8f.js b/docs-vuepress/.vuepress/dist/assets/js/1.4f7abe8f.js
deleted file mode 100644
index 9af842699f..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/1.4f7abe8f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[1,4,15,16,20,31,34],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return a})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return h})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return f})),n.d(e,"c",(function(){return m})),n.d(e,"j",(function(){return g}));n(69),n(10),n(19),n(48),n(30);const i=/#.*$/,r=/\.(md|html)$/,s=/\/$/,a=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function l(t){return a.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function p(t){if(l(t))return t;const e=t.match(i),n=e?e[0]:"",r=o(t);return s.test(r)?t:r+".html"+n}function h(t,e){const n=decodeURIComponent(t.hash),r=function(t){const e=t.match(i);if(e)return e[0]}(e);if(r&&n!==r)return!1;return o(t.path)===o(e)}function d(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const r=e.split("/");n&&r[r.length-1]||r.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t<s.length;t++){const e=s[t];".."===e?r.pop():"."!==e&&r.push(e)}""!==r[0]&&r.unshift("");return r.join("/")}(e,n));const i=o(e);for(let e=0;e<t.length;e++)if(o(t[e].regularPath)===i)return Object.assign({},t[e],{type:"page",path:p(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function f(t,e,n,i){const{pages:r,themeConfig:s}=n,a=i&&s.locales&&s.locales[i]||s;if("auto"===(t.frontmatter.sidebar||a.sidebar||s.sidebar))return b(t);const o=a.sidebar||s.sidebar;if(o){const{base:n,config:i}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,o);return"auto"===i?b(t):i?i.map(t=>function t(e,n,i,r=1){if("string"==typeof e)return d(n,e,i);if(Array.isArray(e))return Object.assign(d(n,e[0],i),{title:e[1]});{const s=e.children||[];return 0===s.length&&e.path?Object.assign(d(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:s.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(t,r,n)):[]}return[]}function b(t){const e=m(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},291:function(t,e,n){},293:function(t,e,n){"use strict";n.r(e);n(10),n(47);var i=n(290),r={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},s=n(4),a=Object(s.a)(r,(function(){var t=this,e=t._self._c;return t.isInternal?e("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?e("OutboundLink"):t._e()],1)}),[],!1,null,null,null);e.default=a.exports},294:function(t,e,n){"use strict";n(291)},296:function(t,e,n){"use strict";n.r(e);var i={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},r=(n(294),n(4)),s=Object(r.a)(i,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},297:function(t,e,n){},300:function(t,e,n){},304:function(t,e,n){"use strict";n(297)},306:function(t,e,n){},311:function(t,e,n){},312:function(t,e,n){"use strict";n(313)},313:function(t,e,n){"use strict";var i=n(14),r=n(49),s=n(11),a=n(5),o=n(26);i({target:"Iterator",proto:!0,real:!0},{find:function(t){a(this),s(t);var e=o(this),n=0;return r(e,(function(e,i){if(t(e,n++))return i(e)}),{IS_RECORD:!0,INTERRUPTED:!0}).result}})},314:function(t,e,n){"use strict";n(300)},322:function(t,e,n){"use strict";n.r(e);var i=n(293),r=n(296),s=n(127),a=n.n(s),o={name:"DropdownLink",components:{NavLink:i.default,DropdownTransition:r.default},props:{item:{required:!0}},data:()=>({open:!1}),computed:{dropdownAriaLabel(){return this.item.ariaLabel||this.item.text}},watch:{$route(){this.open=!1}},methods:{setOpen(t){this.open=t},isLastItemOfArray:(t,e)=>a()(e)===t,handleDropdown(){0===event.detail&&this.setOpen(!this.open)}}},l=(n(304),n(4)),u=Object(l.a)(o,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow down"})]),t._v(" "),e("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,i){return e("li",{key:n.link||i,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v("\n          "+t._s(n.text)+"\n        ")]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(i){return e("li",{key:i.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:i},on:{focusout:function(e){t.isLastItemOfArray(i,n.items)&&t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0):e("NavLink",{attrs:{item:n},on:{focusout:function(e){t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=u.exports},325:function(t,e,n){"use strict";n.r(e);n(10),n(47);var i=n(338),r=n(327),s=n(290);function a(t,e){if("group"===e.type){const n=e.path&&Object(s.e)(t,e.path),i=e.children.some(e=>"group"===e.type?a(t,e):"page"===e.type&&Object(s.e)(t,e.path));return n||i}return!1}var o={name:"SidebarLinks",components:{SidebarGroup:i.default,SidebarLink:r.default},props:["items","depth","sidebarDepth","initialOpenGroupIndex"],data(){return{openGroupIndex:this.initialOpenGroupIndex||0}},watch:{$route(){this.refreshIndex()}},created(){this.refreshIndex()},methods:{refreshIndex(){const t=function(t,e){for(let n=0;n<e.length;n++){const i=e[n];if(a(t,i))return n}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(s.e)(this.$route,t.regularPath)}}},l=n(4),u=Object(l.a)(o,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(n,i){return e("li",{key:i},["group"===n.type?e("SidebarGroup",{attrs:{item:n,open:i===t.openGroupIndex,collapsable:n.collapsable||n.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(i)}}}):e("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:n}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=u.exports},327:function(t,e,n){"use strict";n.r(e);n(10),n(312),n(30),n(47);var i=n(290);function r(t,e,n,i,r){const s={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:i,"sidebar-link":!0}};return r>2&&(s.style={"padding-left":r+"rem"}),t("RouterLink",s,n)}function s(t,e,n,a,o,l=1){return!e||l>o?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const u=Object(i.e)(a,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[r(t,n+"#"+e.slug,e.title,u,e.level-1),s(t,e.children,n,a,o,l+1)])}))}var a={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:a,$themeConfig:o,$themeLocaleConfig:l},props:{item:u,sidebarDepth:c}}){const p=Object(i.e)(a,u.path),h="auto"===u.type?p||u.children.some(t=>Object(i.e)(a,u.basePath+"#"+t.slug)):p,d="external"===u.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,u.path,u.title||u.path):r(t,u.path,u.title||u.path,h),f=[e.frontmatter.sidebarDepth,c,l.sidebarDepth,o.sidebarDepth,1].find(t=>void 0!==t),b=l.displayAllHeaders||o.displayAllHeaders;if("auto"===u.type)return[d,s(t,u.children,u.basePath,a,f)];if((h||b)&&u.headers&&!i.d.test(u.path)){return[d,s(t,Object(i.c)(u.headers),u.path,a,f)]}return d}},o=(n(314),n(4)),l=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=l.exports},329:function(t,e,n){"use strict";n(306)},331:function(t,e,n){"use strict";n(311)},338:function(t,e,n){"use strict";n.r(e);var i=n(290),r={name:"SidebarGroup",components:{DropdownTransition:n(296).default},props:["item","open","collapsable","depth"],beforeCreate(){this.$options.components.SidebarLinks=n(325).default},methods:{isActive:i.e}},s=(n(331),n(4)),a=Object(s.a)(r,(function(){var t=this,e=t._self._c;return e("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?e("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):e("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),e("DropdownTransition",[t.open||!t.collapsable?e("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,"initial-open-group-index":t.item.initialOpenGroupIndex,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null);e.default=a.exports},339:function(t,e,n){},349:function(t,e,n){"use strict";n.r(e);n(10),n(30),n(47);var i=n(322),r=n(290),s={name:"NavLinks",components:{NavLink:n(293).default,DropdownLink:i.default},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,i=this.$site.themeConfig.locales||{},r={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(t).map(r=>{const s=t[r],a=i[r]&&i[r].label||s.lang;let o;return s.lang===this.$lang?o=e:(o=e.replace(this.$localeConfig.path,r),n.some(t=>t.path===o)||(o=r)),{text:a,link:o}})};return[...this.userNav,r]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(r.j)(t),{items:(t.items||[]).map(r.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;return t?/^https?:/.test(t)?t:"https://github.com/"+t:null},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n<e.length;n++){const i=e[n];if(new RegExp(i,"i").test(t))return i}return"Source"}}},a=(n(329),n(4)),o=Object(a.a)(s,(function(){var t=this,e=t._self._c;return t.userLinks.length||t.repoLink?e("nav",{staticClass:"nav-links"},[t._l(t.userLinks,(function(t){return e("div",{key:t.link,staticClass:"nav-item"},["links"===t.type?e("DropdownLink",{attrs:{item:t}}):e("NavLink",{attrs:{item:t}})],1)})),t._v(" "),t.repoLink?e("a",{staticClass:"repo-link",attrs:{href:t.repoLink,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n    "+t._s(t.repoLabel)+"\n    "),e("OutboundLink")],1):t._e()],2):t._e()}),[],!1,null,null,null);e.default=o.exports},358:function(t,e,n){"use strict";n(339)},369:function(t,e,n){"use strict";n.r(e);var i=n(325),r=n(349),s={name:"Sidebar",components:{SidebarLinks:i.default,NavLinks:r.default},props:["items"]},a=(n(358),n(4)),o=Object(a.a)(s,(function(){var t=this._self._c;return t("aside",{staticClass:"sidebar"},[t("NavLinks"),this._v(" "),this._t("top"),this._v(" "),t("SidebarLinks",{attrs:{depth:0,items:this.items}}),this._v(" "),this._t("bottom")],2)}),[],!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/10.0192acce.js b/docs-vuepress/.vuepress/dist/assets/js/10.0192acce.js
deleted file mode 100644
index 20af63f321..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/10.0192acce.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{343:function(e,t,a){},362:function(e,t,a){"use strict";a(343)},375:function(e,t,a){"use strict";a.r(t);a(10),a(19),a(48),a(30);var o={name:"CodeGroup",data:()=>({codeTabs:[],activeCodeTabIndex:-1}),watch:{activeCodeTabIndex(e){this.activateCodeTab(e)}},mounted(){this.loadTabs()},methods:{changeCodeTab(e){this.activeCodeTabIndex=e},loadTabs(){this.codeTabs=(this.$slots.default||[]).filter(e=>Boolean(e.componentOptions)).map((e,t)=>(""===e.componentOptions.propsData.active&&(this.activeCodeTabIndex=t),{title:e.componentOptions.propsData.title,elm:e.elm})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab(e){this.codeTabs.forEach(e=>{e.elm&&e.elm.classList.remove("theme-code-block__active")}),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},s=(a(362),a(4)),c=Object(s.a)(o,(function(){var e=this,t=e._self._c;return t("ClientOnly",[t("div",{staticClass:"theme-code-group"},[t("div",{staticClass:"theme-code-group__nav"},[t("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(a,o){return t("li",{key:a.title,staticClass:"theme-code-group__li"},[t("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v("\n            "+e._s(a.title)+"\n          ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?t("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"131b8180",null);t.default=c.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/100.f31ffd06.js b/docs-vuepress/.vuepress/dist/assets/js/100.f31ffd06.js
deleted file mode 100644
index 0b6c6e453d..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/100.f31ffd06.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{447:function(t,s,a){"use strict";a.r(s);var n=a(4),r=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"网络请求"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#网络请求"}},[t._v("#")]),t._v(" 网络请求")]),t._v(" "),s("p",[t._v("Mpx 提供了网络请求库 fetch，抹平了微信，阿里等平台请求参数及响应数据的差异；同时支持请求拦截器，请求取消等")]),t._v(" "),s("h2",{attrs:{id:"使用说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用说明"}},[t._v("#")]),t._v(" 使用说明")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpxFetch "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mpxFetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第一种访问形式")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLaunch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第二种访问形式")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://test.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"导出说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#导出说明"}},[t._v("#")]),t._v(" 导出说明")]),t._v(" "),s("p",[t._v("mpx-fetch提供了一个实例 "),s("strong",[t._v("xfetch")]),t._v(" ，该实例包含以下api")]),t._v(" "),s("ul",[s("li",[t._v("fetch(config)， 正常的promisify风格的请求方法")]),t._v(" "),s("li",[t._v("CancelToken，实例属性，用于创建一个取消请求的凭证。")]),t._v(" "),s("li",[t._v("interceptors，实例属性，用于添加拦截器，包含两个属性，request & response")])]),t._v(" "),s("h2",{attrs:{id:"请求拦截器"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#请求拦截器"}},[t._v("#")]),t._v(" 请求拦截器")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("interceptors"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以返回promise")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" config\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("interceptors"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以返回promise")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" res\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"请求中断"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#请求中断"}},[t._v("#")]),t._v(" 请求中断")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cancelToken "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("CancelToken")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cancelToken")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" cancelToken"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("token\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ncancelToken"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手动取消请求'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行后请求中断，返回abort fail")]),t._v("\n")])])]),s("h2",{attrs:{id:"设置请求参数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#设置请求参数"}},[t._v("#")]),t._v(" 设置请求参数")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'POST'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// params 参数等价于 url query")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置参数序列化方式，等价于header = {'content-type': 'application/x-www-form-urlencoded'}")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("emulateJSON")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"设置请求-timeout"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#设置请求-timeout"}},[t._v("#")]),t._v(" 设置请求 timeout")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'POST'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("timeout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10000")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 超时时间")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"composition-api-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#composition-api-usage"}},[t._v("#")]),t._v(" 在组合式 API 中使用 ")]),t._v(" "),s("p",[t._v("在组合式 API 中我们提供了 "),s("RouterLink",{attrs:{to:"/api/extend.html#usefetch"}},[t._v("useFetch")]),t._v(" 方法来访问 "),s("code",[t._v("xfetch")]),t._v(" 实例对象")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" useFetch "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useFetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'POST'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("emulateJSON")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePre")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheInvalidationTime")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ignorePreParamKeys")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'timestamp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("   \n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n")])])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/101.283d0363.js b/docs-vuepress/.vuepress/dist/assets/js/101.283d0363.js
deleted file mode 100644
index ffc2ca40be..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/101.283d0363.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{449:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"扩展mpx"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#扩展mpx"}},[t._v("#")]),t._v(" 扩展mpx")]),t._v(" "),s("h2",{attrs:{id:"开发插件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开发插件"}},[t._v("#")]),t._v(" 开发插件")]),t._v(" "),s("p",[t._v("mpx支持使用mpx.use使用插件来进行扩展。插件本身需要提供一个install方法或本身是一个function，该函数接收一个proxyMPX。插件将采用直接在proxyMPX挂载新api属性或在prototype上挂属性。需要注意的是，一定要在app创建之前进行mpx.use。")]),t._v(" "),s("p",[t._v("简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("proxyMPX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  proxyMPX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("newApi")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'is new api'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  proxyMPX\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLaunch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'app onLaunch'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'app'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'page onShow'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'page'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// proxyMPX.injectMixins === proxyMPX.mixin")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//  注意：proxyMPX.prototype上挂载的属性都将挂载到组件实例（page实例、app实例上，可以直接通过this访问）, 可以看mixin中的case")]),t._v("\n    proxyMPX"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("testHello")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"目前已有插件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#目前已有插件"}},[t._v("#")]),t._v(" 目前已有插件")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("网络请求库fetch: @mpxjs/fetch "),s("a",{attrs:{href:"#fetch"}},[t._v("详细介绍")]),t._v(" "),s("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/packages/fetch",target:"_blank",rel:"noopener noreferrer"}},[t._v("源码地址"),s("OutboundLink")],1)])]),t._v(" "),s("li",[s("p",[t._v("小程序API转换及promisify：@mpxjs/api-proxy "),s("a",{attrs:{href:"#api-proxy"}},[t._v("详细介绍")]),t._v(" "),s("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/packages/api-proxy",target:"_blank",rel:"noopener noreferrer"}},[t._v("源码地址"),s("OutboundLink")],1)])]),t._v(" "),s("li",[s("p",[t._v("mock数据：@mpxjs/mock "),s("a",{attrs:{href:"#mock"}},[t._v("详细介绍")]),t._v(" "),s("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/packages/mock",target:"_blank",rel:"noopener noreferrer"}},[t._v("源码地址"),s("OutboundLink")],1)])])])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/102.094a0a16.js b/docs-vuepress/.vuepress/dist/assets/js/102.094a0a16.js
deleted file mode 100644
index 317d5c68b3..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/102.094a0a16.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{448:function(t,s,a){"use strict";a.r(s);var n=a(4),r=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"数据-mock"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#数据-mock"}},[t._v("#")]),t._v(" 数据 Mock")]),t._v(" "),s("h2",{attrs:{id:"安装"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装"}},[t._v("#")]),t._v(" 安装")]),t._v(" "),s("p",[t._v("Mpx 提供了对请求响应数据进行拦截的 mock 插件，可通过如下命令进行安装：")]),t._v(" "),s("div",{staticClass:"language-sh extra-class"},[s("pre",{pre:!0,attrs:{class:"language-sh"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" i @mpxjs/mock\n")])])]),s("h2",{attrs:{id:"使用说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用说明"}},[t._v("#")]),t._v(" 使用说明")]),t._v(" "),s("p",[t._v("新建 mock 文件目录及文件(例如："),s("code",[t._v("src/mock/index.js")]),t._v(" )：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/mock/index.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mock "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/mock"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://api.example.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list|1-10"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"id|+1"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("在入口文件( "),s("code",[t._v("app.mpx")]),t._v(" )中引入：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/javascript"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mock/index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 引入mock即可")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 其他配置 --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"window"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"backgroundTextStyle"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"light"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"navigationBarBackgroundColor"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#fff"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"navigationBarTitleText"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"WeChat"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"navigationBarTextStyle"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"black"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("由于 mock 为全局自动代理，执行"),s("code",[t._v("@mpxjs/mock")]),t._v("所暴露的方法之后会立即拦截小程序的原生请求，如果需要根据不同环境变量等去控制是否使用 mock 数据，可以参考如下方法：")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/mock/index.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mock "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/mock"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://api.example.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list|1-10"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"id|+1"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- app.mpx --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/javascript"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mockSetup "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mock/index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当为开发环境时才启用mock")]),t._v("\n  process"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("env"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("NODE_ENV")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"development"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mockSetup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"mock-入参"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mock-入参"}},[t._v("#")]),t._v(" Mock 入参")]),t._v(" "),s("p",[s("code",[t._v("@mpxjs/mock")]),t._v(" 所暴露的函数仅接收一个类型为 "),s("code",[t._v("mockRequstList")]),t._v(" 的参数，该类型定义如下：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("mockItem")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  url"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  rule"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("mockRequstList")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("mockItem"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//示例:")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mockList"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" mockRequstList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    url"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://api.example.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请求触发后匹配到该链接时其响应数据会被mock拦截")]),t._v("\n    rule"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mock生成返回数据的规则")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'number|1-10'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("h2",{attrs:{id:"mock-规则示例"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mock-规则示例"}},[t._v("#")]),t._v(" Mock 规则示例")]),t._v(" "),s("ul",[s("li",[t._v("基本类型数据生成")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mock "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/mock"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://api.example.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"number|1-10"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 随机生成1-10中的任意整数")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"string|6"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("[0-9a-f]")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 值支持正则表达式,随机生成6位的16进制值")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"boolean|1"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 随机生成一个布尔值,值为 true 的概率是 1/2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请求 http://api.example.com 后返回值为:")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   number: 2,")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//   string: "e1e6dc",')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   boolean: false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// }")]),t._v("\n")])])]),s("ul",[s("li",[t._v("生成随机长度id自增的列表")])]),t._v(" "),s("details",{staticClass:"custom-block details"},[s("summary",[t._v("查看示例")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mock "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/mock"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://api.example.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list|2-5"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 生成长度范围在2-5的数组")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"id|+1"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// id每次自增1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请求 http://api.example.com 后返回")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//   "list": [{')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//     "id": 0')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   },{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//     "id": 1')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   },{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//     "id": 2')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   }]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// }")]),t._v("\n")])])])]),t._v(" "),s("ul",[s("li",[t._v("pick对象中的随机个值")])]),t._v(" "),s("details",{staticClass:"custom-block details"},[s("summary",[t._v("查看示例")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mock "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/mock"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"http://api.example.com"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"object|2"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 随机选取object中的两条数据作为返回")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"310000"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"上海市"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"320000"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"江苏省"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"330000"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"浙江省"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"340000"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"安徽省"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请求 http://api.example.com 后返回")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//   "object": {')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//     "330000": "浙江省",')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//     "340000": "安徽省"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   }")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// }")]),t._v("\n")])])])]),t._v(" "),s("p",[t._v("更多生成规则可查阅 "),s("a",{attrs:{href:"https://github.com/nuysoft/Mock/wiki/Syntax-Specification",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mock官方文档-Syntax Specification"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("更多示例可查看 "),s("a",{attrs:{href:"http://mockjs.com/examples.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mock示例"),s("OutboundLink")],1)]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("由于小程序环境的局限性，mockjs 依赖 eval 函数实现的相关能力(如：占位符)无法正确运行")])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/103.b34f6752.js b/docs-vuepress/.vuepress/dist/assets/js/103.b34f6752.js
deleted file mode 100644
index 927c61ed86..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/103.b34f6752.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{451:function(t,s,a){"use strict";a.r(s);var e=a(4),n=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"从旧版本迁移至-2-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#从旧版本迁移至-2-7"}},[t._v("#")]),t._v(" 从旧版本迁移至 2.7")]),t._v(" "),s("p",[t._v("自 2.7 版本开始，Mpx 将编译构建流程基于 Webpack5 进行了"),s("strong",[t._v("全面的重构")]),t._v("，优化解决了老的编译流程中存在的大量历史遗留问题，安全完整地支持了基于文件系统的持久化缓存，大幅提升了 Mpx 想的编译构建速度，以滴滴出行小程序为例，无缓存场景下相较 2.6 版本提速约 180%，有缓存场景下提速约 "),s("strong",[t._v("10")]),t._v(" 倍。")]),t._v(" "),s("p",[t._v("与此同时，Mpx 2.7 版本还带来了 rules 复用，完善的单元测试支持，独立分包构建，分包异步化等众多新特性。直接通过 @mpxjs/cli 创建的新项目就能够直接使用这些新特性，如果你对于编译构建没有太多定制化诉求，我们也推荐使用 @mpxjs/cli 新建项目，并将老项目中的 src 目录 copy 覆盖至新项目的方式进行迁移，这是一种成本最低的迁移方式。")]),t._v(" "),s("p",[t._v("如果你的老项目中已经对编译构建进行了高度的定制，本文将提供详细的迁移工作指引。")]),t._v(" "),s("h2",{attrs:{id:"依赖升级"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#依赖升级"}},[t._v("#")]),t._v(" 依赖升级")]),t._v(" "),s("p",[t._v("将下面列出的相关依赖升级至对应版本，如果有其他自行引入的 loader 也确保将其升级至 webpack5 兼容的版本：")]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"dependencies"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/api-proxy"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.7.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/core"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.7.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/fetch"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.7.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"devDependencies"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/webpack-plugin"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.7.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"webpack"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^5.64.4"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"webpack-merge"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^5.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"terser-webpack-plugin"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^5.2.5"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"copy-webpack-plugin"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^9.0.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"webpack-bundle-analyzer"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^4.5.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"ts-loader"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^9.2.6"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// eslint相关配置，按需安装")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^7.32.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint-config-standard"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^16.0.3"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint-plugin-html"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^6.2.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint-plugin-import"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.25.2"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint-plugin-node"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^11.1.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint-plugin-promise"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^5.1.1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"eslint-webpack-plugin"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^3.1.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"开启持久化缓存"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开启持久化缓存"}},[t._v("#")]),t._v(" 开启持久化缓存")]),t._v(" "),s("p",[t._v("在 webpack 配置中添加以下配置项：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cache")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'filesystem'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 声明构建配置，注意如果声明某个文件夹为构建配置，需要在文件夹下放置空的package.json文件，避免构建依赖收集时将主项目的依赖项视为构建依赖")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("buildDependencies")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'build/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'config/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheDirectory")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.cache/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("snapshot")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果希望修改node_modules下的文件时对应的缓存可以失效，可以将此处的配置改为 managedPaths: []")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("managedPaths")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"修改rules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#修改rules"}},[t._v("#")]),t._v(" 修改rules")]),t._v(" "),s("p",[t._v("在 2.7 版本中，我们优化了 .mpx 文件中各个 block 应用 loader 的规则。")]),t._v(" "),s("p",[t._v('在之前的版本中，我们基本上使用内置的规则对 .mpx 中的 block 应用 loaders，如：对 <script> 应用 babel-loader，对 <style lang="stylus"> 应用 stylus-loader。这种方式的弊端主要在于用户无法便捷地自定义 block 的 loaders 应用规则，比如传入特定的 loaders 配置。')]),t._v(" "),s("p",[t._v('在 2.7 版本中，我们支持了构建时读取用户在 module.rules 中配置的规则来对 block 进行 loaders 应用， 例如：对于 <style lang="stylus"> 我们会对其应用用户在 rules 中对于 .stylus 文件 配置的 loaders，当用户没有在 block 中声明 lang 属性时，我们也会兜底使用不同区块默认的 lang 来进行 rules 匹配。')]),t._v(" "),s("p",[t._v("因此，相较于过去的版本，我们需要在 rules 中添加一些规则使得 .mpx 文件中的各类 block 都能得到正确的处理。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 新版本中rules规则对.mpx文件中的区块同样生效，在旧版本中.mpx文件中script会走内置的babel转义，但是新版当中只有在include范围内的.mpx文件才会走babel，但由于新版本中.mpx文件中的script会采用.mpx.js的格式来匹配rules，因此我们可以用如下include条件让其保持与旧版本一致的表现。")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.js$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.mpx\\.js")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/@mpxjs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如使用ts编码则需要添加本条rule")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.ts$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ts-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("options")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("appendTsSuffixTo")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(mpx|vue)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理json区块")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.json$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resourceQuery")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("asScript")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'javascript/auto'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理wxs")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(wxs|qs|sjs|qjs|jds|dds|filter\\.js)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wxsPreLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("enforce")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pre'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理图像资源")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 下面的rules输出小程序时需配置，如输出web需要修改为vue的相关rules，具体逻辑可以参考脚手架项目中build/getRules.js")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx主loader")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.mpx$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("currentMpxLoaderConf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如使用sass/less等其他预编译语言，自行修改test规则并用sass/less-loader替换stylus-loader")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.styl(us)?$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wxssLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'stylus-loader'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理未使用预编译语言的style区块和独立样式文件")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(wxss|acss|css|qss|ttss|jxss|ddss)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wxssLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理未使用预编译语言的template区块和独立模板文件")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(wxml|axml|swan|qml|ttml|qxml|jxml|ddml)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wxmlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"entry配置修改"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#entry配置修改"}},[t._v("#")]),t._v(" entry配置修改")]),t._v(" "),s("p",[t._v("如果进行常规的小程序输出，无需关注。如进行插件输出或独立输出组件/页面等特殊场景，mpx 提供了辅助方法来生成对应的 entry request，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 输出plugin")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPluginEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./plugin.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 独立输出组件，相当于./list.mpx?isComponent，不过为了保障后续该配置不受框架内部query变动影响，建议使用辅助方法")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getComponentEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./list.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 独立输出页面，相当于./index.mpx?isPage")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("index")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPageEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./index.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"mpxwebpackplugin配置变更"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin配置变更"}},[t._v("#")]),t._v(" MpxWebpackPlugin配置变更")]),t._v(" "),s("ul",[s("li",[t._v("移除了forceDisableInject配置")]),t._v(" "),s("li",[t._v("nativeOptions更名为nativeConfig")])]),t._v(" "),s("p",[t._v("上述的内容中只列举了一些和 mpx 高度相关的配置项变更，如果你的项目使用了特定的插件或者loader，请确保将其升级至兼容 webpack5 的版本。")])])}),[],!1,null,null,null);s.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/104.78f6358e.js b/docs-vuepress/.vuepress/dist/assets/js/104.78f6358e.js
deleted file mode 100644
index 4959c786f5..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/104.78f6358e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{450:function(t,s,a){"use strict";a.r(s);var e=a(4),n=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"从-2-7-升级至-2-8"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#从-2-7-升级至-2-8"}},[t._v("#")]),t._v(" 从 2.7 升级至 2.8")]),t._v(" "),s("p",[t._v("不同于 2.7 版本对于编译构建进行的大幅度变动升级，Mpx@2.8 版本升级的核心在于运行时支持组合式 API 能力，并尽可能追求向前兼容，以降低用户的升级成本。我们默认脚手架生成的全新项目已经适配了 2.8 版本的全部变更，如果你需要将旧项目从 2.7 升级至 2.8 版本，下面是详细的升级指引。")]),t._v(" "),s("h2",{attrs:{id:"依赖升级"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#依赖升级"}},[t._v("#")]),t._v(" 依赖升级")]),t._v(" "),s("p",[t._v("请按照下方列表升级或新增相关依赖：")]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"dependencies"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/api-proxy"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/core"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/store"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/pinia"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/utils"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/fetch"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这部分依赖为输出 web 专用，如项目无需输出 web 可以省略")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"vue"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.7.10"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"vue-demi"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^0.13.11"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"vue-i18n"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^8.27.2"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"vue-i18n-bridge"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^9.2.2"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"devDependencies"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/webpack-plugin"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/size-report"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/babel-plugin-inject-page-events"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.8.0"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"编译配置变更"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编译配置变更"}},[t._v("#")]),t._v(" 编译配置变更")]),t._v(" "),s("p",[t._v("在编译配置方面，用户几乎不用进行任何改变，唯一的例外是当用户想要通过组合式 API 的方式注册具有副作用的页面事件时，需要在 "),s("code",[t._v("babel")]),t._v(" 配置中添加 "),s("code",[t._v("@mpxjs/babel-plugin-inject-page-events")]),t._v(" 插件，如下所示：")]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// babel.config.json")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"plugins"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@babel/transform-runtime"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"corejs"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"version"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^7.10.4"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/babel-plugin-inject-page-events"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("关于副作用页面事件的更多详情查看"),s("RouterLink",{attrs:{to:"/guide/composition-api/composition-api.html#具有副作用的页面事件"}},[t._v("这里")]),t._v("。")],1),t._v(" "),s("h2",{attrs:{id:"运行时破坏性变化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#运行时破坏性变化"}},[t._v("#")]),t._v(" 运行时破坏性变化")]),t._v(" "),s("p",[t._v("在 2.8 开发过程中，我们修正了过去版本中存在的不合理的设计与实现，在运行时带来了少许破坏性改变，详情如下：")]),t._v(" "),s("ul",[s("li",[t._v("框架过往提供的组件增强生命周期 "),s("code",[t._v("pageShow/pageHide")]),t._v(" 与微信原生提供的 "),s("code",[t._v("pageLifetimes.show/hide")]),t._v(" 完全对齐，不再提供组件初始挂载时必定执行 "),s("code",[t._v("pageShow")]),t._v(" 的保障（因为组件可能在后台页面进行挂载），相关初始化逻辑一定不要放置在 "),s("code",[t._v("pageShow")]),t._v(" 当中；")]),t._v(" "),s("li",[t._v("取消了框架过去提供的基于内部生命周期实现的非标准增强生命周期，如 "),s("code",[t._v("beforeCreate/onBeforeCreate")]),t._v(" 等，直接将内部生命周期变量导出提供给用户使用，详情查看"),s("RouterLink",{attrs:{to:"/guide/composition-api/composition-api.html#框架内置生命周期"}},[t._v("这里")]),t._v("；")],1),t._v(" "),s("li",[t._v("为了优化 tree shaking，作为框架运行时 "),s("code",[t._v("default export")]),t._v(" 的 "),s("code",[t._v("Mpx")]),t._v(" 对象不再挂载 "),s("code",[t._v("createComponent/createStore")]),t._v(" 等运行时方法，一律通过 "),s("code",[t._v("named export")]),t._v(" 提供，"),s("code",[t._v("Mpx")]),t._v(" 对象上仅保留 "),s("code",[t._v("set/use")]),t._v(" 等全局 API；")]),t._v(" "),s("li",[t._v("使用 I18n 能力时，为了与新版 vue-i18n 保持对齐，"),s("code",[t._v("this.$i18n")]),t._v(" 对象指向全局作用域，如需创建局部作用域需要使用组合式 API "),s("code",[t._v("useI18n")]),t._v(" 的方式进行创建。")]),t._v(" "),s("li",[s("code",[t._v("watch")]),t._v(" API 不再接受第二个参数为带有 "),s("code",[t._v("handler")]),t._v(" 属性的对象形式（该参数形式只应存在于 "),s("code",[t._v("watch")]),t._v(" option 中），第二个参数必须为回调函数，与 "),s("a",{attrs:{href:"https://vuejs.org/api/reactivity-core.html#watch",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue"),s("OutboundLink")],1),t._v(" 对齐。")])])])}),[],!1,null,null,null);s.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/105.eb6680fc.js b/docs-vuepress/.vuepress/dist/assets/js/105.eb6680fc.js
deleted file mode 100644
index 9abb8d8427..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/105.eb6680fc.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{455:function(s,t,a){"use strict";a.r(t);var r=a(4),n=Object(r.a)({},(function(){var s=this,t=s._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h1",{attrs:{id:"从-2-8-升级至-2-9"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#从-2-8-升级至-2-9"}},[s._v("#")]),s._v(" 从 2.8 升级至 2.9")]),s._v(" "),t("p",[s._v("Mpx 2.9 版本不包含破坏性变更，主要新增了原子类支持、输出 web 支持 SSR 和构建产物体积优化三项核心特性，更详细的介绍查看"),t("RouterLink",{attrs:{to:"/articles/2.9-release.html"}},[s._v("这里")])],1),s._v(" "),t("h2",{attrs:{id:"依赖升级"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#依赖升级"}},[s._v("#")]),s._v(" 依赖升级")]),s._v(" "),t("p",[s._v("如果你从既有项目中进行升级，仅需将 @mpxjs 下的依赖升级至 2.9 即可")]),s._v(" "),t("div",{staticClass:"language-json5 extra-class"},[t("pre",{pre:!0,attrs:{class:"language-json5"}},[t("code",[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"dependencies"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/api-proxy"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/core"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/store"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/pinia"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/utils"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/fetch"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// ...")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"devDependencies"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/webpack-plugin"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/size-report"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/babel-plugin-inject-page-events"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 如需使用原子类，加入以下依赖")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/unocss-plugin"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"@mpxjs/unocss-base"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.9.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 如需使用SSR，加入以下依赖")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"axios"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^1.6.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"express"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^4.18.2"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"serve-favicon"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.5.0"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v('"vue-server-renderer"')]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"^2.7.14"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// ...")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("h2",{attrs:{id:"使用原子类"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#使用原子类"}},[s._v("#")]),s._v(" 使用原子类")]),s._v(" "),t("p",[s._v("详情查看"),t("RouterLink",{attrs:{to:"/guide/advance/utility-first-css.html"}},[s._v("这里")])],1),s._v(" "),t("h2",{attrs:{id:"使用ssr"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#使用ssr"}},[s._v("#")]),s._v(" 使用SSR")]),s._v(" "),t("p",[s._v("详情查看"),t("RouterLink",{attrs:{to:"/guide/advance/ssr.html"}},[s._v("这里")])],1)])}),[],!1,null,null,null);t.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/106.471f03cf.js b/docs-vuepress/.vuepress/dist/assets/js/106.471f03cf.js
deleted file mode 100644
index 32e0a093bc..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/106.471f03cf.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{454:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"mpx-cli-v2-迁移到-v3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx-cli-v2-迁移到-v3"}},[t._v("#")]),t._v(" mpx-cli v2 迁移到 v3")]),t._v(" "),s("h2",{attrs:{id:"升级-mpxjs-cli"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#升级-mpxjs-cli"}},[t._v("#")]),t._v(" 升级"),s("code",[t._v("@mpxjs/cli")])]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("npm install @mpxjs/cli@3.x -g\n")])])]),s("h2",{attrs:{id:"配置迁移"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置迁移"}},[t._v("#")]),t._v(" 配置迁移")]),t._v(" "),s("blockquote",[s("p",[t._v("v3 兼容了 v2 的所有配置，如果没有特殊修改，则不需要进行配置迁移。")])]),t._v(" "),s("ul",[s("li",[s("code",[t._v("config/devServer.js")]),t._v("迁移到"),s("code",[t._v("vue.config.js")]),t._v("下的"),s("code",[t._v("devServer")])]),t._v(" "),s("li",[s("code",[t._v("config/mpxPlugin.conf.js")]),t._v("迁移到"),s("code",[t._v("vue.config.js")]),t._v("下的"),s("code",[t._v("pluginOptions.mpx.plugin")])]),t._v(" "),s("li",[s("code",[t._v("config/mpxLoader.conf.js")]),t._v("迁移到"),s("code",[t._v("vue.config.js")]),t._v("下的"),s("code",[t._v("pluginOptions.mpx.loader")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里等同于`@mpxjs/webpack-plugin`的参数")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里等同于`mpx-loader`参数")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("devServer")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// dev服务配置")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"新增自定义配置-修改已有配置参数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#新增自定义配置-修改已有配置参数"}},[t._v("#")]),t._v(" 新增自定义配置/修改已有配置参数")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'newPlugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("params"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用mpx inspect 可以根据注释来查看插件命名")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mpx-webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("tap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("args")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" newArgs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者也可以通过configureWebpack配置,这里返回的配置会通过webpack-merge合并到内部配置中")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Plugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[s("a",{attrs:{href:"https://github.com/neutrinojs/webpack-chain",target:"_blank",rel:"noopener noreferrer"}},[t._v("webpack-chain"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://github.com/survivejs/webpack-merge",target:"_blank",rel:"noopener noreferrer"}},[t._v("webpack-merge"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"编译后钩子"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编译后钩子"}},[t._v("#")]),t._v(" 编译后钩子")]),t._v(" "),s("p",[t._v("由于 webpack 配置都内置到了插件里，所以编译后的钩子无法像 2.x 一样直接在"),s("code",[t._v("webpack")]),t._v("脚本里添加。")]),t._v(" "),s("p",[t._v("这里有两个方案来解决上述问题")]),t._v(" "),s("ol",[s("li",[s("code",[t._v("webpack")]),t._v("插件")]),t._v(" "),s("li",[t._v("新建一个"),s("code",[t._v("mpx-cli")]),t._v("插件")])]),t._v(" "),s("p",[t._v("例如我们新建一个"),s("code",[t._v("vue-cli-plugin-mpx-build-upload")]),t._v("插件,用来在构建完成后上传图片到"),s("code",[t._v("cdn")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// index.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runServiceCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fn "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("service"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("command"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" fn "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fn")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注册一个新的命令")]),t._v("\n  api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'build:upload'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("deploy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 运行原有的build命令，build会返回一个promise来表示构建完成")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runServiceCommand")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'build'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do something")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("uploadFile")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("然后在我们的项目里安装该插件并运行"),s("code",[t._v("npx mpx-cli-service build:upload")]),t._v("即可。")]),t._v(" "),s("h2",{attrs:{id:"项目结构变化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#项目结构变化"}},[t._v("#")]),t._v(" 项目结构变化")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/filetree.jpg",alt:"项目结构变化"}})]),t._v(" "),s("p",[t._v("v3 版本相对于 v2 版本的目录结构更加清晰。")]),t._v(" "),s("ul",[s("li",[t._v("移除了"),s("code",[t._v("config/build")]),t._v("的配置目录，将其统一到了插件配置当中，可以通过"),s("code",[t._v("vue.config.js")]),t._v("修改。")]),t._v(" "),s("li",[s("code",[t._v("index.html")]),t._v("移动到"),s("code",[t._v("public")]),t._v("目录下。")]),t._v(" "),s("li",[t._v("增加"),s("code",[t._v("jsconfig.json")]),t._v(",让类型提示更加友好。")])]),t._v(" "),s("h2",{attrs:{id:"more"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#more"}},[t._v("#")]),t._v(" More")]),t._v(" "),s("p",[t._v("v3 版本相对于 v2 版本的整体架构相差较大，v3 版本主要基于"),s("code",[t._v("vue-cli")]),t._v("架构，主要有以下优势。")]),t._v(" "),s("h3",{attrs:{id:"_1-插件化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-插件化"}},[t._v("#")]),t._v(" 1. 插件化")]),t._v(" "),s("p",[t._v("v3 版本的配置依靠插件化，将 v2 版本的文件配置整合到了各个自定义插件中。")]),t._v(" "),s("ul",[s("li",[t._v("vue-cli-plugin-mpx-eslint eslint 配置")]),t._v(" "),s("li",[t._v("vue-cli-plugin-mpx-mp 小程序构建配置以及命令")]),t._v(" "),s("li",[t._v("vue-cli-plugin-mpx-plugin-mode 插件配置")]),t._v(" "),s("li",[t._v("vue-cli-plugin-mpx-typescript ts 配置")]),t._v(" "),s("li",[t._v("vue-cli-plugin-mpx-web web 构建配置以及命令")])]),t._v(" "),s("p",[t._v("除此之外，也可以使用统一的"),s("code",[t._v("vue.config.js")]),t._v("来自定义配置，或者将配置抽离到插件当中，来进行统一的管理。")]),t._v(" "),s("h3",{attrs:{id:"_2-模板"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-模板"}},[t._v("#")]),t._v(" 2. 模板")]),t._v(" "),s("p",[t._v("v3 版本的模板也可以通过插件进行自定义生成，同时不依赖于 github，在国内网络下不会有生成模板时网络错误的问题。")]),t._v(" "),s("h3",{attrs:{id:"_3-调试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-调试"}},[t._v("#")]),t._v(" 3. 调试")]),t._v(" "),s("p",[t._v("v3 版本可以通过"),s("code",[t._v("mpx inspect:mp/web")]),t._v("来直接调试相关配置，可以更直观的发现配置错误。")]),t._v(" "),s("h3",{attrs:{id:"_4-插件管理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_4-插件管理"}},[t._v("#")]),t._v(" 4. 插件管理")]),t._v(" "),s("p",[t._v("使用"),s("code",[t._v("mpx invoke")]),t._v("/"),s("code",[t._v("mpx add")]),t._v("/"),s("code",[t._v("mpx upgrade")]),t._v("来管理插件，可以更细粒度的控制相关配置的更新。")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/107.63fd18fd.js b/docs-vuepress/.vuepress/dist/assets/js/107.63fd18fd.js
deleted file mode 100644
index 64f39abf57..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/107.63fd18fd.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{456:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"跨端输出基础"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨端输出基础"}},[t._v("#")]),t._v(" 跨端输出基础")]),t._v(" "),a("p",[t._v("Mpx以微信增强DSL为基础，支持跨端输出至多端小程序、web和客户端，包括支付宝、百度、抖音、京东、QQ等多端小程序平台，基于Vue的web平台，和基于react-native的ios、android及鸿蒙平台。")]),t._v(" "),a("h2",{attrs:{id:"跨端输出配置"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨端输出配置"}},[t._v("#")]),t._v(" 跨端输出配置")]),t._v(" "),a("p",[t._v("配置mpx进行跨端输出十分简单，找到项目构建的webpack配置，在@mpxjs/webpack-plugin的配置参数中设置mode和srcMode参数即可。")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MpxwebpackPlugin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt|jd|web|ios|android|harmony)")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// srcMode为mpx编译的源码平台，目前仅支持wx   ")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("对于使用 @mpxjs/cli 创建的项目，可以通过在 "),a("code",[t._v("npm script")]),t._v(" 当中定义 "),a("code",[t._v("targets")]),t._v(" 来设置编译的目标平台，多个平台标识以"),a("code",[t._v(",")]),t._v("分隔。")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 项目 package.json")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"script"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"build:cross"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpx-cli-service build --targets=wx,ali,ios,android"')]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"跨端条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨端条件编译"}},[t._v("#")]),t._v(" 跨端条件编译")]),t._v(" "),a("p",[t._v("Mpx跨端输出时在框架内针对不同平台的差异进行了大量的转换抹平工作，但框架能做的工作始终是有限的，对于框架无法抹平的部分我们会在编译和运行时进行报错提示，同时提供了完善的跨平台条件编译机制，便于用户自行进行差异化处理，该能力也能够用于实现区分平台进行业务逻辑实现。")]),t._v(" "),a("p",[t._v("Mpx中我们支持了三种维度的条件编译，分别是文件维度，区块维度和代码维度，其中，文件维度和区块维度主要用于处理一些大块的平台差异性逻辑，而代码维度主要用于处理一些局部简单的平台差异。")]),t._v(" "),a("h3",{attrs:{id:"文件维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文件维度条件编译"}},[t._v("#")]),t._v(" 文件维度条件编译")]),t._v(" "),a("p",[t._v("文件维度条件编译简单的来说就是文件为维度进行跨平台差异代码的编写，例如在微信->支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，这时你可以在相同的位置新建一个map.ali.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的mode来加载对应模块，当mode为ali时，会优先加载map.ali.mpx，反之则会加载map.mpx。")]),t._v(" "),a("p",[t._v("文件维度条件编译能够与webpack alias结合使用，对于npm包的文件我们并不方便在原本的文件位置创建.ali的条件编译文件，但我们可以通过webpack alias在相同位置创建一个"),a("code",[t._v("虚拟的")]),t._v(".ali文件，并将其指向项目中的其他文件位置。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对于npm包中的文件依赖")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" npmModule "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'somePackage/lib/index'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置以下alias后，当mode为ali时，会优先加载项目目录中定义的projectRoot/somePackage/lib/index文件")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n  module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resolve")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("alias")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'somePackage/lib/index.ali'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'projectRoot/somePackage/lib/index'")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"区块维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#区块维度条件编译"}},[t._v("#")]),t._v(" 区块维度条件编译")]),t._v(" "),a("p",[t._v("在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加"),a("code",[t._v("mode")]),t._v("属性定义该区块的目标平台即可，示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译mode为ali时使用如下区块--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--该区块中的所有代码需采用支付宝的技术标准进行编写--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("支付宝环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--其他编译mode时使用如下区块--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("其他环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"代码维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#代码维度条件编译"}},[t._v("#")]),t._v(" 代码维度条件编译")]),t._v(" "),a("p",[t._v("如果只有局部的代码存在跨平台差异，mpx同样支持在代码内使用if/else进行局部条件编译，用户可以在js代码和template插值中访问"),a("code",[t._v("__mpx_mode__")]),t._v("获取当前编译mode，进行平台差异逻辑编写，js代码中使用示例如下。")]),t._v(" "),a("p",[t._v("除了 "),a("code",[t._v("__mpx_mode__")]),t._v(" 这个默认插值以外，有别的环境变量需要的话可以在mpx.plugin.conf.js里通过defs进行配置。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__mpx_mode__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行支付宝环境相关逻辑")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行其他环境相关逻辑")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("template代码中使用示例如下")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--此处的__mpx_mode__不需要在组件中声明数据，编译时会基于当前编译mode进行替换--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'ali'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("支付宝环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("else")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("其他环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v('JSON中的条件编译（注意，这个依赖JSON的动态方案，得通过name="json"这种方式来编写，其实写的是js代码，最终module.exports导出一个可json化的对象即可）：')]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" __mpx_mode__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'main/xxx'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sub/xxx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/xxx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以为不同环境动态书写配置")]),t._v("\nmodule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usingComponents")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("aComponents")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../xxxxx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以打注释 xxx组件")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("样式的条件编译：")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n  @mpx-if (__mpx_env__ === 'someEvn')\n*/")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__mpx_mode__ === 'wx') */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" green"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n    @mpx-elif (__mpx_mode__ === 'qq')\n  */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" black"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__mpx_mode__ === 'swan') */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cyan"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".textSize")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 18px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n  @mpx-else\n*/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__mpx_mode__ === 'swan') */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" blue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-else */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n  @mpx-endif\n*/")]),t._v("\n")])])]),a("h3",{attrs:{id:"属性维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#属性维度条件编译"}},[t._v("#")]),t._v(" 属性维度条件编译")]),t._v(" "),a("p",[t._v("属性维度条件编译允许用户在组件上使用 "),a("code",[t._v("@")]),t._v(" 和 "),a("code",[t._v("|")]),t._v(" 符号来指定某个节点或属性只在某些平台下有效。")]),t._v(" "),a("p",[t._v("对于同一个 button 组件，微信小程序支持 "),a("code",[t._v('open-type="getUserInfo"')]),t._v("，但是支付宝小程序支持 "),a("code",[t._v('open-type="getAuthorize"')]),t._v("。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。")]),t._v(" "),a("p",[t._v("比如业务中需要通过 button 按钮获取用户信息，虽然可以使用代码维度条件编译来解决，但是增加了很多代码量：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'wx' || __mpx_mode__ === 'swan'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindgetuserinfo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("elif")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'ali'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getAuthorize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scope")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("userInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("而用属性维度的编译则方便很多：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type@wx|swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindgetuserinfo@wx|swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getAuthorize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scope@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("userInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("属性维度的编译也可以对整个节点进行条件编译，例如只想在支付宝小程序中输出某个节点：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is view"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("需要注意使用上述用法时，节点自身在构建时框架不会对节点属性进行平台语法转换，但对于其子节点，框架并不会继承父级节点 mode，会进行正常跨平台语法转换。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--错误示例--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n// srcMode 为 wx 跨端输出 ali 结果为\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("上述示例为错误写法，假如srcMode为微信小程序，用上述写法构建输出支付宝小程序时，父节点 bindtap 不会被转为 onTap，在支付宝平台执行时事件会无响应。")]),t._v(" "),a("p",[t._v("正确写法如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--正确示例--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n// 输出 ali 产物\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("有时开发者期望使用 @ali 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--srcMode为 wx，输出 ali 时，bindtap 会被正常转换为 onTap--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@_ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。")]),t._v(" "),a("p",[t._v("有时候我们不仅需要对节点属性进行条件编译，可能还需要对节点标签进行条件编译。")]),t._v(" "),a("p",[t._v("为此，我们支持了一个特殊属性 "),a("code",[t._v("mpxTagName")]),t._v("，如果节点存在这个属性，我们会在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mpxTagName@swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cover-view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("will be cover-view in swan"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"use-env"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-env"}},[t._v("#")]),t._v(" 通过 env 实现自定义目标环境的条件编译 ")]),t._v(" "),a("p",[t._v("Mpx 支持在以上四种条件编译的基础上，通过自定义 env 的形式实现在不同环境下编译产出不同的代码。")]),t._v(" "),a("p",[t._v("实例化 MpxWebpackPlugin 的时候，传入配置 env。")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// srcMode为mpx编译的源码平台，目前仅支持wx")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("env")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"didi"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// env为mpx编译的目标环境，需自定义")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"文件维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文件维度条件编译-2"}},[t._v("#")]),t._v(" 文件维度条件编译")]),t._v(" "),a("p",[t._v("微信转支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，而且这个地图组件在不同的目标环境中也有很大的差异，这时你可以在相同的位置新建一个 map.ali.didi.mpx 或 map.ali.qingju.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的 mode 和 env 来加载对应模块，当 mode 为 ali，env 为 didi 时，会优先加载 map.ali.didi.mpx、map.ali.mpx，如果没有定义 env，则会优先加载 map.ali.mpx，反之则会加载 map.mpx。")]),t._v(" "),a("h4",{attrs:{id:"区块维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#区块维度条件编译-2"}},[t._v("#")]),t._v(" 区块维度条件编译")]),t._v(" "),a("p",[t._v("在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加"),a("code",[t._v("mode")]),t._v("或"),a("code",[t._v("env")]),t._v("属性定义该区块的目标平台即可，示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译mode为ali且env为didi时使用如下区块，优先级最高是4--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("env")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("didi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译mode为ali时使用如下区块，优先级是3--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译env为didi时使用如下区块，优先级是2--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("env")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("didi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--其他环境，优先级是1--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("注意，如果多个相同的区块写相同的 mode 和 env，默认会用最后一个，如：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块会被忽略"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("默认会用这个区块"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h4",{attrs:{id:"代码维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#代码维度条件编译-2"}},[t._v("#")]),t._v(" 代码维度条件编译")]),t._v(" "),a("p",[t._v("如果在 MpxWebpackPlugin 插件初始化时自定义了 env，你可以访问"),a("code",[t._v("__mpx_env__")]),t._v("获取当前编译env，进行环境差异逻辑编写。使用方法与"),a("code",[t._v("__mpx_mode__")]),t._v("相同。")]),t._v(" "),a("h4",{attrs:{id:"属性维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#属性维度条件编译-2"}},[t._v("#")]),t._v(" 属性维度条件编译")]),t._v(" "),a("p",[t._v("env 属性维度条件编译与 mode 的用法大致相同，使用 "),a("code",[t._v(":")]),t._v(" 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 "),a("code",[t._v("attr@mode:env:env|mode:env")]),t._v("，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 "),a("code",[t._v(":")]),t._v(" 前缀，形如 "),a("code",[t._v("attr@:env")]),t._v("。")]),t._v(" "),a("p",[t._v("对于同一个 button 组件，微信小程序支持 "),a("code",[t._v('open-type="getUserInfo"')]),t._v("，但是支付宝小程序支持 "),a("code",[t._v('open-type="getAuthorize"')]),t._v("。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。")]),t._v(" "),a("p",[t._v("如果当前编译的目标平台是 wx，以下写法 open-type 属性将被忽略")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@swan:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如果当前 env 不是 didi，以下写法 open-type 属性也会被忽略")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如果只想在 mode 为 wx 且 env 为 didi 或 qingju 的环境下使用 open-type 属性，则可以这样写：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@wx:")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("didi:")]),t._v("qingju")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("env 属性维度的编译同样支持对整个节点或者节点标签名进行条件编译：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mpxTagName@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cover-view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("@:")]),t._v("didi")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bindtap@:")]),t._v("didi")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"环境api跨端抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#环境api跨端抹平"}},[t._v("#")]),t._v(" 环境API跨端抹平")]),t._v(" "),a("h2",{attrs:{id:"webview环境跨端抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#webview环境跨端抹平"}},[t._v("#")]),t._v(" Webview环境跨端抹平")])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/108.614260e9.js b/docs-vuepress/.vuepress/dist/assets/js/108.614260e9.js
deleted file mode 100644
index a3df5ba269..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/108.614260e9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{452:function(t,n,s){"use strict";s.r(n);var e=s(4),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/109.3da50cc1.js b/docs-vuepress/.vuepress/dist/assets/js/109.3da50cc1.js
deleted file mode 100644
index bbeab7669e..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/109.3da50cc1.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[109],{458:function(t,a,v){"use strict";v.r(a);var e=v(4),_=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"跨端输出rn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨端输出rn"}},[t._v("#")]),t._v(" 跨端输出RN")]),t._v(" "),a("p",[t._v("大致介绍")]),t._v(" "),a("h2",{attrs:{id:"跨端样式定义"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨端样式定义"}},[t._v("#")]),t._v(" 跨端样式定义")]),t._v(" "),a("h3",{attrs:{id:"css选择器"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#css选择器"}},[t._v("#")]),t._v(" CSS选择器")]),t._v(" "),a("h3",{attrs:{id:"样式单位"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#样式单位"}},[t._v("#")]),t._v(" 样式单位")]),t._v(" "),a("h3",{attrs:{id:"文本样式继承"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文本样式继承"}},[t._v("#")]),t._v(" 文本样式继承")]),t._v(" "),a("h3",{attrs:{id:"简写样式属性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#简写样式属性"}},[t._v("#")]),t._v(" 简写样式属性")]),t._v(" "),a("h3",{attrs:{id:"css函数"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#css函数"}},[t._v("#")]),t._v(" CSS函数")]),t._v(" "),a("h3",{attrs:{id:"使用原子类"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用原子类"}},[t._v("#")]),t._v(" 使用原子类")]),t._v(" "),a("h2",{attrs:{id:"混合编写rn代码"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#混合编写rn代码"}},[t._v("#")]),t._v(" 混合编写RN代码")]),t._v(" "),a("h3",{attrs:{id:"使用rn组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用rn组件"}},[t._v("#")]),t._v(" 使用RN组件")]),t._v(" "),a("h3",{attrs:{id:"使用react-hooks"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用react-hooks"}},[t._v("#")]),t._v(" 使用React hooks")]),t._v(" "),a("h2",{attrs:{id:"能力支持范围"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#能力支持范围"}},[t._v("#")]),t._v(" 能力支持范围")]),t._v(" "),a("h3",{attrs:{id:"模版语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#模版语法"}},[t._v("#")]),t._v(" 模版语法")]),t._v(" "),a("h4",{attrs:{id:"事件处理"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#事件处理"}},[t._v("#")]),t._v(" 事件处理")]),t._v(" "),a("p",[t._v("目前 Mpx 输出 React Native 的事件编写遵循小程序的事件编写规范，支持事件的冒泡及捕获")]),t._v(" "),a("p",[t._v("普通事件绑定")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view bindtap"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    Click here"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("绑定并阻止事件冒泡")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view catchtap"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    Click here"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("事件捕获")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view capture"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("bind"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("touchstart"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap1"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  outer view\n  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view capture"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("bind"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("touchstart"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap2"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    inner view\n  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("中断捕获阶段和取消冒泡阶段")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view capture"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("catch"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("touchstart"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap1"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  outer view\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n")])])]),a("p",[t._v("在此基础上也新增了事件处理内联传参的增强机制。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--Mpx增强语法，模板内联传参，方便简洁--\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTapInline('b')"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("b"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接通过参数获取数据，直观方便")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTapInline")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("除此之外，Mpx 也支持了动态事件绑定")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--动态事件绑定--\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{items}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap_{{index}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{item}}\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" data "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 3'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 4'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_0")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_2")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 3'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 4'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("当同一个元素上同时绑定了 catchtap 和 bindtap 事件时，两个事件都会被触发执行。但是是否阻止事件冒泡的行为,会以模板上第一个绑定的事件标识符为准。\n如果第一个绑定的是 catchtap，那么不管后面绑定的是什么,都会阻止事件冒泡。如果第一个绑定的是 bindtap，则不会阻止事件冒泡。")]),t._v(" "),a("li",[t._v("当同一个元素上绑定了 capture-bind:tap 和 bindtap 事件时，事件的执行时机会根据模板上第一个绑定事件的标识符来决定。如果第一个绑定的是 capture-bind:tap，则事件会在捕获阶段触发，如果第一个绑定的是 bindtap，则事件会在冒泡阶段触发。")]),t._v(" "),a("li",[t._v("当使用了事件委托想获取 e.target.dataset 时，只有点击到文本节点才能获取到，点击其他区域无效。建议直接将事件绑定到事件触发的元素上，使用 e.currentTarget 来获取 dataset 等数据。")]),t._v(" "),a("li",[t._v("如果元素上设置了 opacity: 0 的样式，会导致 ios 事件无法响应。")])]),t._v(" "),a("h3",{attrs:{id:"基础组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#基础组件"}},[t._v("#")]),t._v(" 基础组件")]),t._v(" "),a("p",[t._v("目前 Mpx 输出 React Native 仅支持以下组件，文档中未提及的组件以及组件属性即为不支持，具体使用范围可参考如下文档")]),t._v(" "),a("p",[t._v("RN环境基础组件通用属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])]),t._v(" "),a("tr",[a("td",[t._v("enable-var")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("true")]),t._v(" "),a("td",[t._v("默认支持使用 css variable，若想关闭该功能可设置为 false")])]),t._v(" "),a("tr",[a("td",[t._v("parent-font-size")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("父组件字体大小，主要用于百分比计算的场景，如 font-size: 100%")])]),t._v(" "),a("tr",[a("td",[t._v("parent-width")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("父组件宽度，主要用于百分比计算的场景，如 width: calc(100% - 20px)，需要在外部传递父组件的宽度")])]),t._v(" "),a("tr",[a("td",[t._v("parent-height")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("父组件高度，主要用于百分比计算的场景，如 height: calc(100% - 20px),需要在外部传递父组件的高度")])])])]),t._v(" "),a("h4",{attrs:{id:"view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#view"}},[t._v("#")]),t._v(" view")]),t._v(" "),a("p",[t._v("视图容器。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("hover-class")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定按下去的样式类。")])]),t._v(" "),a("tr",[a("td",[t._v("hover-start-time")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("50")]),t._v(" "),a("td",[t._v("按住后多久出现点击态，单位毫秒")])]),t._v(" "),a("tr",[a("td",[t._v("hover-stay-time")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("400")]),t._v(" "),a("td",[t._v("手指松开后点击态保留时间，单位毫秒")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindtap")]),t._v(" "),a("td",[t._v("点击的时候触发")])])])]),t._v(" "),a("h4",{attrs:{id:"scroll-view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scroll-view"}},[t._v("#")]),t._v(" scroll-view")]),t._v(" "),a("p",[t._v("可滚动视图区域。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("scroll-x")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("允许横向滚动动")])]),t._v(" "),a("tr",[a("td",[t._v("scroll-y")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("允许纵向滚动")])]),t._v(" "),a("tr",[a("td",[t._v("upper-threshold")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("50")])]),t._v(" "),a("td",[t._v("距顶部/左边多远时(单位 px),触发 scrolltoupper 事件")])]),t._v(" "),a("tr",[a("td",[t._v("lower-threshold")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("50")])]),t._v(" "),a("td",[t._v("距底部/右边多远时(单位 px),触发 scrolltolower 事件")])]),t._v(" "),a("tr",[a("td",[t._v("scroll-top")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("0")])]),t._v(" "),a("td",[t._v("设置纵向滚动条位置")])]),t._v(" "),a("tr",[a("td",[t._v("scroll-left")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("0")])]),t._v(" "),a("td",[t._v("设置横向滚动条位置")])]),t._v(" "),a("tr",[a("td",[t._v("scroll-with-animation")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("在设置滚动条位置时使用动画过渡")])]),t._v(" "),a("tr",[a("td",[t._v("enable-back-to-top")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("点击状态栏的时候视图会滚动到顶部")])]),t._v(" "),a("tr",[a("td",[t._v("enhanced")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("scroll-view 组件功能增强")])]),t._v(" "),a("tr",[a("td",[t._v("refresher-enabled")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("开启自定义下拉刷新")])]),t._v(" "),a("tr",[a("td",[t._v("scroll-anchoring")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("开启滚动区域滚动锚点")])]),t._v(" "),a("tr",[a("td",[t._v("scroll-into-view")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("值应为某子元素id（id不能以数字开头）")])]),t._v(" "),a("tr",[a("td",[t._v("refresher-default-style")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("'black'")])]),t._v(" "),a("td",[t._v("设置下拉刷新默认样式,支持 "),a("code",[t._v("black")]),t._v("、"),a("code",[t._v("white")]),t._v("、"),a("code",[t._v("none")]),t._v("，仅安卓支持")])]),t._v(" "),a("tr",[a("td",[t._v("refresher-background")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("'#fff'")])]),t._v(" "),a("td",[t._v("设置自定义下拉刷新背景颜色，仅安卓支持")])]),t._v(" "),a("tr",[a("td",[t._v("refresher-triggered")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置当前下拉刷新状态,true 表示已触发")])]),t._v(" "),a("tr",[a("td",[t._v("paging-enabled")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置")])]),t._v(" "),a("tr",[a("td",[t._v("show-scrollbar")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("true")])]),t._v(" "),a("td",[t._v("滚动条显隐控制 (同时开启 enhanced 属性后生效)")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])]),t._v(" "),a("tr",[a("td",[t._v("enable-trigger-intersection-observer")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("是否开启intersection-observer")])]),t._v(" "),a("tr",[a("td",[t._v("simultaneous-handlers")]),t._v(" "),a("td",[t._v("Array"),a("object")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件")])]),t._v(" "),a("tr",[a("td",[t._v("wait-for")]),t._v(" "),a("td",[t._v("Array"),a("object")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("binddragstart")]),t._v(" "),a("td",[t._v("滑动开始事件，同时开启 enhanced 属性后生效")])]),t._v(" "),a("tr",[a("td",[t._v("binddragging")]),t._v(" "),a("td",[t._v("滑动事件，同时开启 enhanced 属性后生效")])]),t._v(" "),a("tr",[a("td",[t._v("binddragend")]),t._v(" "),a("td",[t._v("滑动结束事件，同时开启 enhanced 属性后生效")])]),t._v(" "),a("tr",[a("td",[t._v("bindscrolltoupper")]),t._v(" "),a("td",[t._v("滚动到顶部/左边触发")])]),t._v(" "),a("tr",[a("td",[t._v("bindscrolltolower")]),t._v(" "),a("td",[t._v("滚动到底部/右边触发")])]),t._v(" "),a("tr",[a("td",[t._v("bindscroll")]),t._v(" "),a("td",[t._v("滚动时触发")])]),t._v(" "),a("tr",[a("td",[t._v("bindrefresherrefresh")]),t._v(" "),a("td",[t._v("自定义下拉刷新被触发")])])])]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v('目前不支持自定义下拉刷新节点，使用 slot="refresher" 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来')]),t._v(" "),a("li",[t._v("若使用 scroll-into-view 属性，需要 id 对应的组件节点添加 wx:ref 标记，否则无法正常滚动")]),t._v(" "),a("li",[t._v("simultaneous-handlers 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture]")]),t._v(" "),a("li",[t._v("wait-for  为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail]")])]),t._v(" "),a("h4",{attrs:{id:"swiper"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#swiper"}},[t._v("#")]),t._v(" swiper")]),t._v(" "),a("p",[t._v("滑块视图容器。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("indicator-dots")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否显示面板指示点")])]),t._v(" "),a("tr",[a("td",[t._v("indicator-color")]),t._v(" "),a("td",[t._v("color")]),t._v(" "),a("td",[a("code",[t._v("rgba(0, 0, 0, .3)")])]),t._v(" "),a("td",[t._v("指示点颜色")])]),t._v(" "),a("tr",[a("td",[t._v("indicator-active-color")]),t._v(" "),a("td",[t._v("color")]),t._v(" "),a("td",[a("code",[t._v("#000000")])]),t._v(" "),a("td",[t._v("当前选中的指示点颜色")])]),t._v(" "),a("tr",[a("td",[t._v("autoplay")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否自动切换")])]),t._v(" "),a("tr",[a("td",[t._v("current")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("0")])]),t._v(" "),a("td",[t._v("当前所在滑块的 index")])]),t._v(" "),a("tr",[a("td",[t._v("interval")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("5000")])]),t._v(" "),a("td",[t._v("自动切换时间间隔")])]),t._v(" "),a("tr",[a("td",[t._v("duration")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("500")])]),t._v(" "),a("td",[t._v("滑动动画时长")])]),t._v(" "),a("tr",[a("td",[t._v("circular")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否采用衔接滑动")])]),t._v(" "),a("tr",[a("td",[t._v("vertical")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("滑动方向是否为纵向")])]),t._v(" "),a("tr",[a("td",[t._v("previous-margin")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("0")])]),t._v(" "),a("td",[t._v("前边距，可用于露出前一项的一小部分，接受px")])]),t._v(" "),a("tr",[a("td",[t._v("next-margin")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("0")])]),t._v(" "),a("td",[t._v("后边距，可用于露出后一项的一小部分，接受px")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])]),t._v(" "),a("tr",[a("td",[t._v("easing-function")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("linear")])]),t._v(" "),a("td",[t._v("支持 linear、easeInCubic、easeOutCubic、easeInOutCubic")])]),t._v(" "),a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("无")]),t._v(" "),a("td",[t._v("current 改变时会触发 change 事件，event.detail = {current, source}")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("current 改变时会触发 change 事件，event.detail = {current, source}")])])])]),t._v(" "),a("h4",{attrs:{id:"swiper-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#swiper-item"}},[t._v("#")]),t._v(" swiper-item")]),t._v(" "),a("ol",[a("li",[t._v("仅可放置在swiper组件中，宽高自动设置为100%。")])]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("item-id")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("无")])]),t._v(" "),a("td",[t._v("该 swiper-item 的标识符")])])])]),t._v(" "),a("h4",{attrs:{id:"movable-area"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#movable-area"}},[t._v("#")]),t._v(" movable-area")]),t._v(" "),a("p",[t._v("movable-view的可移动区域。")]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("movable-area不支持设置 scale-area，缩放手势生效区域仅在 movable-view 内")])]),t._v(" "),a("h4",{attrs:{id:"movable-view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#movable-view"}},[t._v("#")]),t._v(" movable-view")]),t._v(" "),a("p",[t._v("可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("direction")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("none")]),t._v(" "),a("td",[t._v("目前支持 all、vertical、horizontal、none｜")])]),t._v(" "),a("tr",[a("td",[t._v("inertia")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("movable-view是否带有惯性｜")])]),t._v(" "),a("tr",[a("td",[t._v("out-of-bounds")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("超过可移动区域后，movable-view是否还可以移动｜")])]),t._v(" "),a("tr",[a("td",[t._v("x")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("定义x轴方向的偏移")])]),t._v(" "),a("tr",[a("td",[t._v("y")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("定义y轴方向的偏移")])]),t._v(" "),a("tr",[a("td",[t._v("friction")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("7")]),t._v(" "),a("td",[t._v("摩擦系数")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("是否禁用")])]),t._v(" "),a("tr",[a("td",[t._v("animation")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("true")]),t._v(" "),a("td",[t._v("是否使用动画")])]),t._v(" "),a("tr",[a("td",[t._v("simultaneous-handlers")]),t._v(" "),a("td",[t._v("Array"),a("object")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件")])]),t._v(" "),a("tr",[a("td",[t._v("wait-for")]),t._v(" "),a("td",[t._v("Array"),a("object")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("拖动过程中触发的事件，event.detail = {x, y, source}")])]),t._v(" "),a("tr",[a("td",[t._v("bindscale")]),t._v(" "),a("td",[t._v("缩放过程中触发的事件，event.detail = {x, y, scale}")])]),t._v(" "),a("tr",[a("td",[t._v("htouchmove")]),t._v(" "),a("td",[t._v("初次手指触摸后移动为横向的移动时触发")])]),t._v(" "),a("tr",[a("td",[t._v("vtouchmove")]),t._v(" "),a("td",[t._v("初次手指触摸后移动为纵向的移动时触发")])])])]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("simultaneous-handlers 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture]")]),t._v(" "),a("li",[t._v("wait-for  为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail]")])]),t._v(" "),a("h4",{attrs:{id:"root-portal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#root-portal"}},[t._v("#")]),t._v(" root-portal")]),t._v(" "),a("p",[t._v("使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。\n属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody")]),t._v(" "),a("p",[t._v("| enable   | boolean           |   true\t     | 是否从页面中脱离出来\t｜")]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("style 样式不支持中使用百分比计算、css variable")])]),t._v(" "),a("h4",{attrs:{id:"cover-view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cover-view"}},[t._v("#")]),t._v(" cover-view")]),t._v(" "),a("p",[t._v("视图容器。\n功能同 view 组件")]),t._v(" "),a("h4",{attrs:{id:"cover-image"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cover-image"}},[t._v("#")]),t._v(" cover-image")]),t._v(" "),a("p",[t._v("视图容器。\n功能同 image 组件")]),t._v(" "),a("h4",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon"}},[t._v("#")]),t._v(" icon")]),t._v(" "),a("p",[t._v("图标组件")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("icon 的类型，有效值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear")])]),t._v(" "),a("tr",[a("td",[t._v("size")]),t._v(" "),a("td",[t._v("String | Number")]),t._v(" "),a("td",[t._v("23")]),t._v(" "),a("td",[t._v("icon 的大小")])]),t._v(" "),a("tr",[a("td",[t._v("color")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("icon 的颜色，同 css 的 color")])])])]),t._v(" "),a("h4",{attrs:{id:"text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text"}},[t._v("#")]),t._v(" text")]),t._v(" "),a("p",[t._v("文本。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("user-select")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("文本是否可选。")])]),t._v(" "),a("tr",[a("td",[t._v("disable-default-style")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("会内置默认样式，比如fontSize为16。设置"),a("code",[t._v("true")]),t._v("可以禁止默认的内置样式。")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindtap")]),t._v(" "),a("td",[t._v("点击的时候触发")])])])]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("未包裹 text 标签的文本，会自动包裹 text 标签。")]),t._v(" "),a("li",[t._v("text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段")])]),t._v(" "),a("h4",{attrs:{id:"button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button"}},[t._v("#")]),t._v(" button")]),t._v(" "),a("p",[t._v("按钮。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("size")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("default")])]),t._v(" "),a("td",[t._v("按钮的大小")])]),t._v(" "),a("tr",[a("td",[t._v("type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("default")])]),t._v(" "),a("td",[t._v("按钮的样式类型")])]),t._v(" "),a("tr",[a("td",[t._v("plain")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("按钮是否镂空，背景色透明")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否禁用")])]),t._v(" "),a("tr",[a("td",[t._v("loading")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("名称前是否带 loading 图标")])]),t._v(" "),a("tr",[a("td",[t._v("open-type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("微信开放能力，当前仅支持 "),a("code",[t._v("share")])])]),t._v(" "),a("tr",[a("td",[t._v("hover-class")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v('指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果')])]),t._v(" "),a("tr",[a("td",[t._v("hover-start-time")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("20")])]),t._v(" "),a("td",[t._v("按住后多久出现点击态，单位毫秒")])]),t._v(" "),a("tr",[a("td",[t._v("hover-stay-time")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("70")])]),t._v(" "),a("td",[t._v("手指松开后点击态保留时间，单位毫秒")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),a("h4",{attrs:{id:"label"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#label"}},[t._v("#")]),t._v(" label")]),t._v(" "),a("p",[t._v("用来改进表单组件的可用性")]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("当前不支持使用 for 属性找到对应 id，仅支持将控件放在该标签内，目前可以绑定的空间有：checkbox、radio、switch。")])]),t._v(" "),a("h4",{attrs:{id:"checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox"}},[t._v("#")]),t._v(" checkbox")]),t._v(" "),a("p",[t._v("多选项目")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("是否禁用")])]),t._v(" "),a("tr",[a("td",[t._v("checked")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("当前是否选中，可用来设置默认选中")])]),t._v(" "),a("tr",[a("td",[t._v("color")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("#09BB07")]),t._v(" "),a("td",[t._v("checkbox的颜色，同css的color")])])])]),t._v(" "),a("h4",{attrs:{id:"checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group"}},[t._v("#")]),t._v(" checkbox-group")]),t._v(" "),a("p",[t._v("多项选择器，内部由多个checkbox组成。")]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }")])])])]),t._v(" "),a("h4",{attrs:{id:"radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio"}},[t._v("#")]),t._v(" radio")]),t._v(" "),a("p",[t._v("单选项目")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("radio 标识，当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("是否禁用")])]),t._v(" "),a("tr",[a("td",[t._v("checked")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("false")]),t._v(" "),a("td",[t._v("当前是否选中，可用来设置默认选中")])]),t._v(" "),a("tr",[a("td",[t._v("color")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("#09BB07")]),t._v(" "),a("td",[t._v("checkbox 的颜色，同 css 的 color")])])])]),t._v(" "),a("h4",{attrs:{id:"radio-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group"}},[t._v("#")]),t._v(" radio-group")]),t._v(" "),a("p",[t._v("单项选择器，内部由多个 radio 组成")]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("radio-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 radio 的 value 的数组 ] }")])])])]),t._v(" "),a("h4",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form"}},[t._v("#")]),t._v(" form")]),t._v(" "),a("p",[t._v("表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。")]),t._v(" "),a("p",[t._v("当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。")]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindsubmit")]),t._v(" "),a("td",[t._v("携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} }")])]),t._v(" "),a("tr",[a("td",[t._v("bindreset")]),t._v(" "),a("td",[t._v("表单重置时会触发 reset 事件")])])])]),t._v(" "),a("h4",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[t._v("#")]),t._v(" input")]),t._v(" "),a("p",[t._v("输入框。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("输入框的初始内容")])]),t._v(" "),a("tr",[a("td",[t._v("type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("text")])]),t._v(" "),a("td",[t._v("input 的类型，不支持 "),a("code",[t._v("safe-password")]),t._v("、"),a("code",[t._v("nickname")])])]),t._v(" "),a("tr",[a("td",[t._v("password")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否是密码类型")])]),t._v(" "),a("tr",[a("td",[t._v("placeholder")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("输入框为空时占位符")])]),t._v(" "),a("tr",[a("td",[t._v("placeholder-class")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定 placeholder 的样式类，仅支持 color 属性")])]),t._v(" "),a("tr",[a("td",[t._v("placeholder-style")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定 placeholder 的样式，仅支持 color 属性")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否禁用")])]),t._v(" "),a("tr",[a("td",[t._v("maxlength")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("140")])]),t._v(" "),a("td",[t._v("最大输入长度，设置为 -1 的时候不限制最大长度")])]),t._v(" "),a("tr",[a("td",[t._v("auto-focus")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("(即将废弃，请直接使用 focus )自动聚焦，拉起键盘")])]),t._v(" "),a("tr",[a("td",[t._v("focus")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("获取焦点")])]),t._v(" "),a("tr",[a("td",[t._v("confirm-type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("done")])]),t._v(" "),a("td",[t._v("设置键盘右下角按钮的文字，仅在 type='text' 时生效")])]),t._v(" "),a("tr",[a("td",[t._v("confirm-hold")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("点击键盘右下角按钮时是否保持键盘不收起")])]),t._v(" "),a("tr",[a("td",[t._v("cursor")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定 focus 时的光标位置")])]),t._v(" "),a("tr",[a("td",[t._v("cursor-color")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("光标颜色")])]),t._v(" "),a("tr",[a("td",[t._v("selection-start")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("-1")])]),t._v(" "),a("td",[t._v("光标起始位置，自动聚集时有效，需与 selection-end 搭配使用")])]),t._v(" "),a("tr",[a("td",[t._v("selection-end")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("-1")])]),t._v(" "),a("td",[t._v("光标结束位置，自动聚集时有效，需与 selection-start 搭配使用")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindinput")]),t._v(" "),a("td",[t._v("键盘输入时触发，event.detail = { value, cursor }，不支持 "),a("code",[t._v("keyCode")])])]),t._v(" "),a("tr",[a("td",[t._v("bindfocus")]),t._v(" "),a("td",[t._v("输入框聚焦时触发，event.detail = { value }，不支持 "),a("code",[t._v("height")])])]),t._v(" "),a("tr",[a("td",[t._v("bindblur")]),t._v(" "),a("td",[t._v("输入框失去焦点时触发，event.detail = { value }，不支持 "),a("code",[t._v("encryptedValue")]),t._v("、"),a("code",[t._v("encryptError")])])]),t._v(" "),a("tr",[a("td",[t._v("bindconfirm")]),t._v(" "),a("td",[t._v("点击完成按钮时触发，event.detail = { value }")])]),t._v(" "),a("tr",[a("td",[t._v("bind:selectionchange")]),t._v(" "),a("td",[t._v("选区改变事件, event.detail = { selectionStart, selectionEnd }")])])])]),t._v(" "),a("p",[t._v("方法")]),t._v(" "),a("p",[t._v("可通过 "),a("code",[t._v("ref")]),t._v(" 方式调用以下组件实例方法")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("方法名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("focus")]),t._v(" "),a("td",[t._v("使输入框得到焦点")])]),t._v(" "),a("tr",[a("td",[t._v("blur")]),t._v(" "),a("td",[t._v("使输入框失去焦点")])]),t._v(" "),a("tr",[a("td",[t._v("clear")]),t._v(" "),a("td",[t._v("清空输入框的内容")])]),t._v(" "),a("tr",[a("td",[t._v("isFocused")]),t._v(" "),a("td",[t._v("返回值表明当前输入框是否获得了焦点")])])])]),t._v(" "),a("h4",{attrs:{id:"textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea"}},[t._v("#")]),t._v(" textarea")]),t._v(" "),a("p",[t._v("多行输入框。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("输入框内容")])]),t._v(" "),a("tr",[a("td",[t._v("type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("text")])]),t._v(" "),a("td",[t._v("input 的类型，不支持 "),a("code",[t._v("safe-password")]),t._v("、"),a("code",[t._v("nickname")])])]),t._v(" "),a("tr",[a("td",[t._v("placeholder")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("输入框为空时占位符")])]),t._v(" "),a("tr",[a("td",[t._v("placeholder-class")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定 placeholder 的样式类，仅支持 color 属性")])]),t._v(" "),a("tr",[a("td",[t._v("placeholder-style")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定 placeholder 的样式，仅支持 color 属性")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否禁用")])]),t._v(" "),a("tr",[a("td",[t._v("maxlength")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("140")])]),t._v(" "),a("td",[t._v("最大输入长度，设置为 -1 的时候不限制最大长度")])]),t._v(" "),a("tr",[a("td",[t._v("auto-focus")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("(即将废弃，请直接使用 focus )自动聚焦，拉起键盘")])]),t._v(" "),a("tr",[a("td",[t._v("focus")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("获取焦点")])]),t._v(" "),a("tr",[a("td",[t._v("auto-height")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否自动增高，设置 auto-height 时，style.height不生效")])]),t._v(" "),a("tr",[a("td",[t._v("confirm-type")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("done")])]),t._v(" "),a("td",[t._v("设置键盘右下角按钮的文字，不支持 "),a("code",[t._v("return")])])]),t._v(" "),a("tr",[a("td",[t._v("confirm-hold")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("点击键盘右下角按钮时是否保持键盘不收起")])]),t._v(" "),a("tr",[a("td",[t._v("cursor")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("指定 focus 时的光标位置")])]),t._v(" "),a("tr",[a("td",[t._v("cursor-color")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("光标颜色")])]),t._v(" "),a("tr",[a("td",[t._v("selection-start")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("-1")])]),t._v(" "),a("td",[t._v("光标起始位置，自动聚集时有效，需与 selection-end 搭配使用")])]),t._v(" "),a("tr",[a("td",[t._v("selection-end")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("-1")])]),t._v(" "),a("td",[t._v("光标结束位置，自动聚集时有效，需与 selection-start 搭配使用")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindinput")]),t._v(" "),a("td",[t._v("键盘输入时触发，event.detail = { value, cursor }，不支持 "),a("code",[t._v("keyCode")])])]),t._v(" "),a("tr",[a("td",[t._v("bindfocus")]),t._v(" "),a("td",[t._v("输入框聚焦时触发，event.detail = { value }，不支持 "),a("code",[t._v("height")])])]),t._v(" "),a("tr",[a("td",[t._v("bindblur")]),t._v(" "),a("td",[t._v("输入框失去焦点时触发，event.detail = { value }，不支持 "),a("code",[t._v("encryptedValue")]),t._v("、"),a("code",[t._v("encryptError")])])]),t._v(" "),a("tr",[a("td",[t._v("bindconfirm")]),t._v(" "),a("td",[t._v("点击完成按钮时触发，event.detail = { value }")])]),t._v(" "),a("tr",[a("td",[t._v("bindlinechange")]),t._v(" "),a("td",[t._v("输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 "),a("code",[t._v("heightRpx")])])]),t._v(" "),a("tr",[a("td",[t._v("bind:selectionchange")]),t._v(" "),a("td",[t._v("选区改变事件, {selectionStart, selectionEnd}")])])])]),t._v(" "),a("p",[t._v("方法")]),t._v(" "),a("p",[t._v("可通过 "),a("code",[t._v("ref")]),t._v(" 方式调用以下组件实例方法")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("方法名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("focus")]),t._v(" "),a("td",[t._v("使输入框得到焦点")])]),t._v(" "),a("tr",[a("td",[t._v("blur")]),t._v(" "),a("td",[t._v("使输入框失去焦点")])]),t._v(" "),a("tr",[a("td",[t._v("clear")]),t._v(" "),a("td",[t._v("清空输入框的内容")])]),t._v(" "),a("tr",[a("td",[t._v("isFocused")]),t._v(" "),a("td",[t._v("返回值表明当前输入框是否获得了焦点")])])])]),t._v(" "),a("h4",{attrs:{id:"picker-view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-view"}},[t._v("#")]),t._v(" picker-view")]),t._v(" "),a("p",[t._v("嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("Array[number]")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }")])])])]),t._v(" "),a("h4",{attrs:{id:"picker-view-column"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-view-column"}},[t._v("#")]),t._v(" picker-view-column")]),t._v(" "),a("p",[t._v("滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致")]),t._v(" "),a("h4",{attrs:{id:"picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker"}},[t._v("#")]),t._v(" picker")]),t._v(" "),a("p",[t._v("从底部弹起的滚动选择器。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("mode")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("selector")])]),t._v(" "),a("td",[t._v("选择器类型")])]),t._v(" "),a("tr",[a("td",[t._v("disabled")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("是否禁用")])])])]),t._v(" "),a("p",[t._v("公共事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindcancel")]),t._v(" "),a("td",[t._v("取消选择时触发")])]),t._v(" "),a("tr",[a("td",[t._v("bindchange")]),t._v(" "),a("td",[t._v("滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）")])])])]),t._v(" "),a("h5",{attrs:{id:"普通选择器-mode-selector"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#普通选择器-mode-selector"}},[t._v("#")]),t._v(" 普通选择器：mode = selector")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("range")]),t._v(" "),a("td",[t._v("array[object]/array")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v("mode 为 selector 或 multiSelector 时，range 有效")])]),t._v(" "),a("tr",[a("td",[t._v("range-key")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容")])]),t._v(" "),a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("0")]),t._v(" "),a("td",[t._v("表示选择了 range 中的第几个（下标从 0 开始）")])])])]),t._v(" "),a("h5",{attrs:{id:"多列选择器-mode-multiselector"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#多列选择器-mode-multiselector"}},[t._v("#")]),t._v(" 多列选择器：mode = multiSelector")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("range")]),t._v(" "),a("td",[t._v("array[object]/array")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v("mode 为 selector 或 multiSelector 时，range 有效")])]),t._v(" "),a("tr",[a("td",[t._v("range-key")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容")])]),t._v(" "),a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("array")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v("表示选择了 range 中的第几个（下标从 0 开始）")])]),t._v(" "),a("tr",[a("td",[t._v("bindcolumnchange")]),t._v(" "),a("td"),t._v(" "),a("td"),t._v(" "),a("td",[t._v("列改变时触发")])])])]),t._v(" "),a("h5",{attrs:{id:"多列选择器-时间选择器-mode-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#多列选择器-时间选择器-mode-time"}},[t._v("#")]),t._v(" 多列选择器：时间选择器：mode = time")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v('表示选中的时间，格式为"hh:mm"')])]),t._v(" "),a("tr",[a("td",[t._v("start")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v('表示有效时间范围的开始，字符串格式为"hh:mm"')])]),t._v(" "),a("tr",[a("td",[t._v("end")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v('表示有效时间范围的结束，字符串格式为"hh:mm"')])])])]),t._v(" "),a("h5",{attrs:{id:"多列选择器-时间选择器-mode-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#多列选择器-时间选择器-mode-date"}},[t._v("#")]),t._v(" 多列选择器：时间选择器：mode = date")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("当天")])]),t._v(" "),a("td",[t._v('表示选中的日期，格式为"YYYY-MM-DD"')])]),t._v(" "),a("tr",[a("td",[t._v("start")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v('表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"')])]),t._v(" "),a("tr",[a("td",[t._v("end")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v('表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"')])]),t._v(" "),a("tr",[a("td",[t._v("fields")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("day")])]),t._v(" "),a("td",[t._v("有效值 year,month,day，表示选择器的粒度")])])])]),t._v(" "),a("h5",{attrs:{id:"fields-有效值"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fields-有效值"}},[t._v("#")]),t._v(" fields 有效值：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("year")]),t._v(" "),a("td",[t._v("选择器粒度为年")])]),t._v(" "),a("tr",[a("td",[t._v("month")]),t._v(" "),a("td",[t._v("选择器粒度为月份")])]),t._v(" "),a("tr",[a("td",[t._v("day")]),t._v(" "),a("td",[t._v("选择器粒度为天")])])])]),t._v(" "),a("h5",{attrs:{id:"省市区选择器-mode-region"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#省市区选择器-mode-region"}},[t._v("#")]),t._v(" 省市区选择器：mode = region")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("value")]),t._v(" "),a("td",[t._v("array")]),t._v(" "),a("td",[a("code",[t._v("[]")])]),t._v(" "),a("td",[t._v("表示选中的省市区，默认选中每一列的第一个值")])]),t._v(" "),a("tr",[a("td",[t._v("custom-item")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("可为每一列的顶部添加一个自定义的项")])]),t._v(" "),a("tr",[a("td",[t._v("level")]),t._v(" "),a("td",[t._v("string")]),t._v(" "),a("td",[a("code",[t._v("region")])]),t._v(" "),a("td",[t._v("选择器层级")])])])]),t._v(" "),a("h5",{attrs:{id:"level-有效值"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#level-有效值"}},[t._v("#")]),t._v(" level 有效值：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("province")]),t._v(" "),a("td",[t._v("选省级选择器")])]),t._v(" "),a("tr",[a("td",[t._v("city")]),t._v(" "),a("td",[t._v("市级选择器")])]),t._v(" "),a("tr",[a("td",[t._v("region")]),t._v(" "),a("td",[t._v("区级选择器")])])])]),t._v(" "),a("h4",{attrs:{id:"image"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#image"}},[t._v("#")]),t._v(" image")]),t._v(" "),a("p",[t._v("图片。")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("src")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("图片资源地址，支持本地图片资源及 base64 格式数据，暂不支持 svg 格式")])]),t._v(" "),a("tr",[a("td",[t._v("mode")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[a("code",[t._v("scaleToFill")])]),t._v(" "),a("td",[t._v("图片裁剪、缩放的模式，适配微信 image 所有 mode 格式")])]),t._v(" "),a("tr",[a("td",[t._v("enable-offset")]),t._v(" "),a("td",[t._v("Number")]),t._v(" "),a("td",[a("code",[t._v("false")])]),t._v(" "),a("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("事件名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("binderror")]),t._v(" "),a("td",[t._v("当错误发生时触发，event.detail = { errMsg }")])]),t._v(" "),a("tr",[a("td",[t._v("bindload")]),t._v(" "),a("td",[t._v("当图片载入完毕时触发，event.detail = { height, width }")])])])]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("image 组件默认宽度320px、高度240px")]),t._v(" "),a("li",[t._v("image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分")])]),t._v(" "),a("h4",{attrs:{id:"canvas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#canvas"}},[t._v("#")]),t._v(" canvas")]),t._v(" "),a("p",[t._v("画布。")]),t._v(" "),a("p",[t._v("事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("bindtouchstart")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("手指触摸动作开始")])]),t._v(" "),a("tr",[a("td",[t._v("bindtouchmove")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("手指触摸后移动")])]),t._v(" "),a("tr",[a("td",[t._v("bindtouchend")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("手指触摸动作结束")])]),t._v(" "),a("tr",[a("td",[t._v("bindtouchcancel")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("手指触摸动作被打断")])]),t._v(" "),a("tr",[a("td",[t._v("bindlongtap")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("手指长按 300ms 之后触发")])]),t._v(" "),a("tr",[a("td",[t._v("binderror")]),t._v(" "),a("td",[t._v("eventhandle")]),t._v(" "),a("td",[t._v("当发生错误时触发 error 事件， detail = {errMsg}")])])])]),t._v(" "),a("p",[t._v("API")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("方法名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("createImage")]),t._v(" "),a("td",[t._v("创建一个图片对象。 仅支持在 2D Canvas 中使用")])]),t._v(" "),a("tr",[a("td",[t._v("createImageData")]),t._v(" "),a("td",[t._v("创建一个 ImageData 对象。仅支持在 2D Canvas 中使用")])]),t._v(" "),a("tr",[a("td",[t._v("getContext")]),t._v(" "),a("td",[t._v("该方法返回 Canvas 的绘图上下文。仅支持在 2D Canvas 中使用")])]),t._v(" "),a("tr",[a("td",[t._v("toDataURL")]),t._v(" "),a("td",[t._v("返回一个包含图片展示的 data URI")])])])]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("canvas 组件目前仅支持 2D 类型，不支持 webgl")]),t._v(" "),a("li",[t._v("通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，具体接口可以参考 (HTML Canvas 2D Context)[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D] 定义的属性、方法")]),t._v(" "),a("li",[t._v("canvas 的实现主要借助于 PostMessage 方式与 webview 容器通信进行绘制，所以对于严格依赖方法执行时机的场景，如调用 drawImage 绘图，再通过 getImageData 获取图片数据的场景，调用时需要使用 await 等方式来保证方法的执行时机")]),t._v(" "),a("li",[t._v("通过 Canvas.createImage 画图，图片的链接不能有特殊字符，安卓手机可能会 load 失败")])]),t._v(" "),a("h5",{attrs:{id:"web-view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#web-view"}},[t._v("#")]),t._v(" web-view")]),t._v(" "),a("p",[t._v("承载网页的容器。会自动铺满整个RN页面")]),t._v(" "),a("p",[t._v("属性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性名")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("src")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("webview 指向网页的链接，如果需要对跳转的URL设定白名单可跳转，需要在业务跳转之前出来该逻辑")])]),t._v(" "),a("tr",[a("td",[t._v("bindmessage")]),t._v(" "),a("td",[t._v("EventHandler")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("网页向RN通过 postMessage 传递数据")])]),t._v(" "),a("tr",[a("td",[t._v("bindload")]),t._v(" "),a("td",[t._v("EventHandler")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("网页加载成功时候触发此事件")])]),t._v(" "),a("tr",[a("td",[t._v("binderror")]),t._v(" "),a("td",[t._v("EventHandler")]),t._v(" "),a("td"),t._v(" "),a("td",[t._v("网页加载失败的时候触发此事件")])])])]),t._v(" "),a("p",[t._v("注意事项")]),t._v(" "),a("ol",[a("li",[t._v("web-view网页中可使用@mpxjs/webview-bridge@2.9.68提供的接口返回RN页面或与RN页面通信，具体使用细节可以参见"),a("a",{attrs:{href:"#WebviewAPI"}},[t._v("Webview API")])])]),t._v(" "),a("h4",{attrs:{id:"自定义组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#自定义组件"}},[t._v("#")]),t._v(" 自定义组件")]),t._v(" "),a("h4",{attrs:{id:"样式规则"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#样式规则"}},[t._v("#")]),t._v(" 样式规则")]),t._v(" "),a("h4",{attrs:{id:"应用能力"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#应用能力"}},[t._v("#")]),t._v(" 应用能力")]),t._v(" "),a("h4",{attrs:{id:"环境api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#环境api"}},[t._v("#")]),t._v(" 环境API")]),t._v(" "),a("p",[t._v("在RN环境中也提供了一部分常用api能力，方法名与使用方式与小程序相同，可能对于某个api提供的能力会比微信小程序提供的能力少一些，以下是使用说明：")]),t._v(" "),a("h5",{attrs:{id:"使用说明"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用说明"}},[t._v("#")]),t._v(" 使用说明")]),t._v(" "),a("p",[t._v("如果全量引入api-proxy这种情况下，需要如下配置")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 全量引入api-proxy")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@didi/mpxjs-api-proxy'")]),t._v("\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePromise")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("需要在mpx项目中需要配置externals")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("externals: {\n  ...\n  '@react-native-async-storage/async-storage': '@react-native-async-storage/async-storage',\n  '@react-native-clipboard/clipboard': '@react-native-clipboard/clipboard',\n  '@react-native-community/netinfo': '@react-native-community/netinfo',\n  'react-native-device-info': 'react-native-device-info',\n  'react-native-safe-area-context': 'react-native-safe-area-context',\n  'react-native-reanimated': 'react-native-reanimated',\n  'react-native-get-location': 'react-native-get-location',\n  'react-native-haptic-feedback': 'react-native-haptic-feedback'\n},\n")])])]),a("p",[t._v("如果引用单独的api-proxy方法这种情况，需要根据下表说明是否用到一下方法，来确定是否需要配置externals，配置参考上面示例")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("api方法")]),t._v(" "),a("th",[t._v("依赖的react-native三方库")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("showActionSheet")]),t._v(" "),a("td",[t._v("react-native-reanimated")])]),t._v(" "),a("tr",[a("td",[t._v("getNetworkType、"),a("br"),t._v("offNetworkStatusChange、"),a("br"),t._v("onNetworkStatusChange")]),t._v(" "),a("td",[t._v("@react-native-community/netinfo")])]),t._v(" "),a("tr",[a("td",[t._v("getLocation、"),a("br"),t._v("openLocation、"),a("br"),t._v("chooseLocation")]),t._v(" "),a("td",[t._v("react-native-get-location")])]),t._v(" "),a("tr",[a("td",[t._v("setStorage、"),a("br"),t._v(" setStorageSync、"),a("br"),t._v("getStorage、"),a("br"),t._v(" getStorageSync、"),a("br"),t._v("getStorageInfo、"),a("br"),t._v("getStorageInfoSync、"),a("br"),t._v("removeStorage，"),a("br"),t._v("removeStorageSync，"),a("br"),t._v("clearStorage，"),a("br"),t._v("clearStorageSync")]),t._v(" "),a("td",[t._v("@react-native-async-storage/async-storage")])]),t._v(" "),a("tr",[a("td",[t._v("getSystemInfo、"),a("br"),t._v("getSystemInfoSync、"),a("br"),t._v("getDeviceInfo、"),a("br"),t._v("getWindowInfo、"),a("br"),t._v("getLaunchOptionsSync、"),a("br"),t._v("getEnterOptionsSync")]),t._v(" "),a("td",[t._v("react-native-device-info")])]),t._v(" "),a("tr",[a("td",[t._v("getWindowInfo、"),a("br"),t._v("getLaunchOptionsSync、"),a("br"),t._v("getEnterOptionsSync")]),t._v(" "),a("td",[t._v("react-native-safe-area-context")])]),t._v(" "),a("tr",[a("td",[t._v("vibrateShort、"),a("br"),t._v(" vibrateLong")]),t._v(" "),a("td",[t._v("react-native-haptic-feedback")])])])]),t._v(" "),a("p",[t._v("在RN 项目中，如果是以全量引入api-proxy的方法需要在RN环境中执行以下所有的命令，如果只是使用单个api的能力，可以参考上表来判断安装对应的包")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("// 安装api-proxy下所用到的依赖 如果\nnpm i @react-native-async-storage/async-storage\nnpm i @react-native-clipboard/clipboard\nnpm i @react-native-community/netinfo\nnpm i react-native-safe-area-context\nnpm i react-native-device-info\nnpm i react-native-reanimated\nnpm i react-native-haptic-feedback\nios项目需要执行如下命令\ncd ios\npod install\n\nnpm i react-native-get-location\n")])])]),a("p",[t._v("android下需要做如下配置：\n安装react-native-get-location包后，需要在AndroidManifest.xml中定义位置权限，"),a("a",{attrs:{href:"https://www.npmjs.com/package/react-native-get-location",target:"_blank",rel:"noopener noreferrer"}},[t._v("参考文档"),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v('\x3c!-- Define ACCESS_FINE_LOCATION if you will use enableHighAccuracy=true  --\x3e\n<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>\n\n\x3c!-- Define ACCESS_COARSE_LOCATION if you will use enableHighAccuracy=false  --\x3e\n<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>\n\n')])])]),a("p",[t._v("安装react-native-haptic-feedback包后需要在安卓中配置，"),a("a",{attrs:{href:"https://github.com/mkuczera/react-native-haptic-feedback",target:"_blank",rel:"noopener noreferrer"}},[t._v("配置参考文档"),a("OutboundLink")],1),t._v("\n打开 android/app/src/main/java/[...]/MainApplication.java. 在文件的顶部添加以下导入下面的代码片段")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("import com.mkuczera.RNReactNativeHapticFeedbackPackage;\n")])])]),a("p",[t._v("修改设置,将下面的配置添加到android/settings.gradle文件中")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("include "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("':react-native-haptic-feedback'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("project")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("':react-native-haptic-feedback'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("projectDir "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("File")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rootProject"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("projectDir"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../node_modules/react-native-haptic-feedback/android'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("react-native-reanimated在mpx和RN项目都要安装，安装好包后需要在babel.config.json文件中做如下配置，并且RN环境中使用的react-native-reanimated与mpx项目中安装的react-native-reanimated版本要一致：\n"),a("a",{attrs:{href:"https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/",target:"_blank",rel:"noopener noreferrer"}},[t._v("配置参考文档"),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("presets")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// don't add it here :)")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'react-native-reanimated/plugin'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),t._v(" "),a("h4",{attrs:{id:"webview-api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#webview-api"}},[t._v("#")]),t._v(" Webview API")]),t._v(" "),a("p",[t._v("对于web-view组件打开的网页，想要跟RN通信，或者跳转到RN页面，提供了以下能力")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("方法名")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("navigateTo")]),t._v(" "),a("td",[t._v("保留当前webview页面，跳转RN页面")])]),t._v(" "),a("tr",[a("td",[t._v("navigateBack")]),t._v(" "),a("td",[t._v("关闭当前页面，返回上一页或多级RN页面")])]),t._v(" "),a("tr",[a("td",[t._v("switchTab")]),t._v(" "),a("td",[t._v("跳转到RN的 tabBar 页面")])]),t._v(" "),a("tr",[a("td",[t._v("reLaunch")]),t._v(" "),a("td",[t._v("关闭所有页面，打开到应用内的某个RN页面")])]),t._v(" "),a("tr",[a("td",[t._v("redirectTo")]),t._v(" "),a("td",[t._v("关闭当前页面，跳转到应用内的某个RN页面")])]),t._v(" "),a("tr",[a("td",[t._v("getEnv")]),t._v(" "),a("td",[t._v("获取当前环境")])]),t._v(" "),a("tr",[a("td",[t._v("postMessage")]),t._v(" "),a("td",[t._v("向RN发送消息，实时触发组件的message事件")])]),t._v(" "),a("tr",[a("td",[t._v("invoke")]),t._v(" "),a("td",[t._v("开放一个webview页面和web页面互通消息的能力")])])])]),t._v(" "),a("h5",{attrs:{id:"webview-bridge示例代码"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#webview-bridge示例代码"}},[t._v("#")]),t._v(" webview-bridge示例代码")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" webviewBridge "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webview-bridge'")]),t._v("\nwebviewBridge"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'RN地址'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("success")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'跳转成功'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h5",{attrs:{id:"invoke示例代码"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#invoke示例代码"}},[t._v("#")]),t._v(" invoke示例代码")]),t._v(" "),a("p",[t._v("RN环境中挂载getTime的逻辑")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 普通方法")]),t._v("\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webviewConfig "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("apiImplementations")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getTime")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("options "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" params "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" options\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" params"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("time")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2024-12-24'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者promise")]),t._v("\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webviewConfig "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("apiImplementations")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getTime")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("options "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" params "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" options\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("params"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" params"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("time")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2024-12-24'")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("reject")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Error")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'没有传text参数'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("web中通信的逻辑")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" webviewBridge "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webview-bridge'")]),t._v("\nwebviewBridge"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("invoke")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'getTime'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'我是入参'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("success")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'接收到的消息：'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("time"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"其他使用限制"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#其他使用限制"}},[t._v("#")]),t._v(" 其他使用限制")]),t._v(" "),a("p",[t._v("如事件的target等")])])}),[],!1,null,null,null);a.default=_.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/11.d7a8d045.js b/docs-vuepress/.vuepress/dist/assets/js/11.d7a8d045.js
deleted file mode 100644
index 3866f0026e..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/11.d7a8d045.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{371:function(n,o,l){"use strict";l.r(o);var u=l(4),e=Object(u.a)({},void 0,void 0,!1,null,null,null);o.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/110.f74ff3a3.js b/docs-vuepress/.vuepress/dist/assets/js/110.f74ff3a3.js
deleted file mode 100644
index 6ee8853189..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/110.f74ff3a3.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[110],{453:function(t,n,s){"use strict";s.r(n);var e=s(4),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/111.51932e54.js b/docs-vuepress/.vuepress/dist/assets/js/111.51932e54.js
deleted file mode 100644
index 091d34ac78..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/111.51932e54.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[111],{457:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"e2e自动化测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#e2e自动化测试"}},[t._v("#")]),t._v(" E2E自动化测试")]),t._v(" "),s("p",[t._v("微信小程序的官方文档推荐 "),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("miniprogram-automator"),s("OutboundLink")],1),t._v("，其与小程序IDE的关系，正如 Google 与 UiAutomator、selenium 与 webdriver 一样；它是最契合小程序的。")]),t._v(" "),s("p",[t._v("虽然微信小程序提供了 automator + ide 的 E2E 的解决方案，但该项目维护频率低且 case 编写效率低、API 不够友好等问题，因此基于微信提供的能力& Mpx 生态我们产出了相对完善的小程序E2E自动化测试增强方案，此外还提供了可扩展的开箱即用的E2E基础设施。")]),t._v(" "),s("p",[t._v("小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。")]),t._v(" "),s("blockquote",[s("p",[t._v("如果你之前使用过 Selenium WebDriver 或者 Puppeteer，那你可以很容易快速上手。小程序自动化 SDK 与它们的工作原理是类似的，主要区别在于控制对象由浏览器换成了小程序。")])]),t._v(" "),s("h2",{attrs:{id:"mpx-cli-脚手架集成e2e"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx-cli-脚手架集成e2e"}},[t._v("#")]),t._v(" @mpx/cli 脚手架集成E2E")]),t._v(" "),s("p",[t._v("当使用 @mpxjs/cli 初始化 Mpx 项目的时候，交互式命令行里面新增了 E2E 选项，当选择了此选项，项目将会初始化 E2E 配置，完成相关内容的生成。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/mpxtemplate_v2.png",alt:""}})]),t._v(" "),s("p",[t._v("关于 E2E 的模板文件如下：")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("# 忽略部分文件夹\nvue-project\n├─ .e2erc.js # E2E配置\n├─ src\n│  ├─ app.mpx\n│  ├─ pages\n│  │  └─ index.png\n│  └─ components\n│     └─ list.mpx\n├─ test\n│  └─ e2e # case目录\n│     └─ list.spec.js # 示例文件\n├─ jest-e2e.config.js # Jest配置\n└─ package.json\n")])])]),s("p",[t._v("这里罗列了 E2E 项目中约定(或推荐)的目录结构，在项目开发中，请遵照这个目录结构组织代码。")]),t._v(" "),s("h3",{attrs:{id:"文件说明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#文件说明"}},[t._v("#")]),t._v(" 文件说明")]),t._v(" "),s("p",[s("strong",[t._v("package.json")])]),t._v(" "),s("p",[t._v("使用自动化测试，我们要做的第一件事就是安装 @mpxjs/e2e 和 @mpxjs/e2e-scripts，然后我们需要在 package.json 中定义两个自动化测试的脚本 test 和 testServer。")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"devDependencies"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/e2e"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.0.13"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/e2e-scripts"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0.0.12"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"scripts"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"test"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"e2e-runner"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"testServer"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"e2e-runner --preview"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。")]),t._v(" "),s("p",[s("strong",[t._v(".e2erc.js")])]),t._v(" "),s("p",[t._v("E2E 配置文件，包含 E2E 内置功能和插件的配置。可以在这里扩展运行时的能力，比如修改运行时是否自动保存页面快照。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'path'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" PluginReport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/e2e/report-server/server.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("recordsDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'dist/wx/minitest'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 录制 json 文件的存储目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("connectFirst")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 优先使用 automator.connect，默认 automator.launch 优先")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("defaultWaitFor")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("5000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认 waitFor 时长")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("devServer")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 测试报告服务器配置")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("open")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("port")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8886")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("jestTimeout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("990000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// jestTimeout")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("jsonCaseCpDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/e2e/e2e-json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 从 minitest 目录复制 json 文件到该目录下")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("needRealMachine")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否需要真机")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PluginReport")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义测试报告的插件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("projectPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./dist/wx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("sequence")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// e2e 的 case 的执行顺序")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 'minitest-1'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("testSuitsDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/e2e/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// e2e 的 case 存放目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("useTS")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// e2e 的 case 是否为 TS 语法")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("wsEndpoint")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ws://localhost:9420'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// automator.connect 的 wsEndpoint")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("timeoutSave")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 定时截图默认开启，设置为 false 即可关闭")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheDirectory")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./node_modules/@mpxjs/e2e/report-server/cache'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置截图数据的保存目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("tapSave")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 点击截图默认开启，设置为 false 即可关闭")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("routeUpdateSave")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 路由切换截图默认开启，设置为 false 即可关闭")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("routeTime")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("300")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 路由切换 300ms 后再截图")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watchResponse")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/api/list'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handler")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newRes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldRes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置接口请求截图")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("我们提供了丰富的配置化选项，满足各种场景运行。")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("参数")]),t._v(" "),s("th",[t._v("类型")]),t._v(" "),s("th",[t._v("默认值")]),t._v(" "),s("th",[t._v("说明")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("projectPath")]),t._v(" "),s("td",[t._v("String")]),t._v(" "),s("td",[t._v("./dist/wx")]),t._v(" "),s("td",[t._v("小程序代码路径，Mpx 框架的 wx 输出目录")])]),t._v(" "),s("tr",[s("td",[t._v("testSuitsDir")]),t._v(" "),s("td",[t._v("String")]),t._v(" "),s("td",[t._v("test/e2e/suits/")]),t._v(" "),s("td",[t._v("e2e 的 case 存放目录")])]),t._v(" "),s("tr",[s("td",[t._v("sequence")]),t._v(" "),s("td",[t._v("string[ ]")]),t._v(" "),s("td",[t._v("[ ]")]),t._v(" "),s("td",[t._v("用例运行的顺序")])]),t._v(" "),s("tr",[s("td",[t._v("recordsDir")]),t._v(" "),s("td",[t._v("String")]),t._v(" "),s("td",[t._v("dist/wx/minitest")]),t._v(" "),s("td",[t._v("录制 json 文件的存储目录")])]),t._v(" "),s("tr",[s("td",[t._v("connectFirst")]),t._v(" "),s("td",[t._v("Boolean")]),t._v(" "),s("td",[t._v("false")]),t._v(" "),s("td",[t._v("优先使用 automator 的 connect 方法")])]),t._v(" "),s("tr",[s("td",[t._v("wsEndpoint")]),t._v(" "),s("td",[t._v("String")]),t._v(" "),s("td",[t._v("ws://localhost:9420")]),t._v(" "),s("td",[t._v("使用 connect 方式时的 wsEndpoint 选项")])]),t._v(" "),s("tr",[s("td",[t._v("defaultWaitFor")]),t._v(" "),s("td",[t._v("Number")]),t._v(" "),s("td",[t._v("15000")]),t._v(" "),s("td",[t._v("默认 waitFor 时长")])]),t._v(" "),s("tr",[s("td",[t._v("useTS")]),t._v(" "),s("td",[t._v("Boolean")]),t._v(" "),s("td",[t._v("false")]),t._v(" "),s("td",[t._v("用例是否为 TS 语法")])]),t._v(" "),s("tr",[s("td",[t._v("jestTimeout")]),t._v(" "),s("td",[t._v("Number")]),t._v(" "),s("td",[t._v("990000")]),t._v(" "),s("td",[t._v("默认测试超时时间")])]),t._v(" "),s("tr",[s("td",[t._v("jsonCaseCpDir")]),t._v(" "),s("td",[t._v("String")]),t._v(" "),s("td",[t._v("test/e2e-json")]),t._v(" "),s("td",[t._v("从 minitest 目录复制 json 文件到该目录下")])]),t._v(" "),s("tr",[s("td",[t._v("needRealMachine")]),t._v(" "),s("td",[t._v("Boolean")]),t._v(" "),s("td",[t._v("false")]),t._v(" "),s("td",[t._v("是否需要真机回放")])]),t._v(" "),s("tr",[s("td",[t._v("devServer")]),t._v(" "),s("td",[t._v("Object")]),t._v(" "),s("td",[t._v("null")]),t._v(" "),s("td",[t._v("测试报告服务器配置")])]),t._v(" "),s("tr",[s("td",[t._v("plugins")]),t._v(" "),s("td",[t._v("Array")]),t._v(" "),s("td",[t._v("[ ]")]),t._v(" "),s("td",[t._v("自定义测试报告的插件")])]),t._v(" "),s("tr",[s("td",[t._v("timeoutSave")]),t._v(" "),s("td",[t._v("Number")]),t._v(" "),s("td",[t._v("3000")]),t._v(" "),s("td",[t._v("定时3000ms保存页面快照")])]),t._v(" "),s("tr",[s("td",[t._v("cacheDirectory")]),t._v(" "),s("td",[t._v("String")]),t._v(" "),s("td",[t._v("report-server/cache")]),t._v(" "),s("td",[t._v("页面快照的保存目录")])]),t._v(" "),s("tr",[s("td",[t._v("tapSave")]),t._v(" "),s("td",[t._v("Boolean")]),t._v(" "),s("td",[t._v("true")]),t._v(" "),s("td",[t._v("点击时候保存页面快照")])]),t._v(" "),s("tr",[s("td",[t._v("routeUpdateSave")]),t._v(" "),s("td",[t._v("Boolean")]),t._v(" "),s("td",[t._v("true")]),t._v(" "),s("td",[t._v("路由切换时候保存页面快照")])]),t._v(" "),s("tr",[s("td",[t._v("routeTime")]),t._v(" "),s("td",[t._v("Number")]),t._v(" "),s("td",[t._v("300")]),t._v(" "),s("td",[t._v("路由切换300ms后保存页面快照")])]),t._v(" "),s("tr",[s("td",[t._v("watchResponse")]),t._v(" "),s("td",[t._v("Object")]),t._v(" "),s("td",[t._v("null")]),t._v(" "),s("td",[t._v("监听接口请求保存页面快照")])])])]),t._v(" "),s("p",[s("strong",[t._v("e2e")])]),t._v(" "),s("p",[t._v('e2e 目录，所有的 case 文件存放在此目录下，默认会创建一个演示 demo 文件，也就是 list.spec.js 文件，约定 e2e 下所有的 .spec.js 结尾的作为自动化测试的文件，使用 Typescript 编写测试文件的时候, 需要将文件名改成 .spec.ts 格式，然后 tsconfig.json 加上 "esModuleInterop": true。')]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * @file e2e test example\n * 首先开启工具安全设置中的 CLI/HTTP 调用功能\n * docs of miniprogram-automator: https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" automator "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/e2e'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("describe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" miniProgram\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" page\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("beforeAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      miniProgram "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" automator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("connect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("wsEndpoint")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ws://localhost:9420'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("catch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      miniProgram "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" automator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("launch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("projectPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./dist/wx'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    page "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reLaunch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/pages/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("waitFor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("30000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'desc'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" desc "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'list'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components/list2271575d/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 断言页面标签")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'view'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 断言文字内容")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" desc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toContain")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手机'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 保存页面快照")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("screenshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/e2e/screenshot/homePage.png'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("afterAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("close")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果你已经熟悉了 Jest，你应该很适应 Jest 的断言 API。")]),t._v(" "),s("p",[s("strong",[t._v("jest-e2e.config.js")])]),t._v(" "),s("p",[t._v("Jest 配置文件，这些选项可让你控制 Jest 的行为，你可以了解 Jest 的默认选项，以便在必要时扩展它们：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("preset")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ts-jest'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("testEnvironment")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("testTimeout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000000000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("maxWorkers")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("reporters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<rootDir>/node_modules/@mpxjs/e2e/report-server/report.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义测试报告")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("除了 Jest 提供的默认测试报告器外，我们还可以自定义测试报告。框架 @mpxjs/e2e 内部提供了可视化测试报告平台，需要配置 reporters 字段。")]),t._v(" "),s("p",[t._v("目前对于@mpx/cli@3.*版本也会陆续完成E2E的相关支持。")]),t._v(" "),s("h2",{attrs:{id:"mpxjs-e2e-scripts"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxjs-e2e-scripts"}},[t._v("#")]),t._v(" @mpxjs/e2e-scripts")]),t._v(" "),s("p",[t._v("默认情况下，Jest 将会递归的找到整个工程里所有 .spec.js 或 .test.js 扩展名的文件。 Jest 支持并行运行 test ，特别是在 ci 场景，将会极大减少 test 消耗时间。配置 --maxWorkers 参数表示的是 Jest 会开启多少个线程去完成所有的测试任务，默认值是 50% * os.cpus().length，相关的文档可见："),s("a",{attrs:{href:"https://jestjs.io/docs/cli#--maxworkersnumstring",target:"_blank",rel:"noopener noreferrer"}},[t._v("链接"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("p",[t._v("合理的设置 maxWorkers 会使得运行变快，依赖的是并行跑用例，但是在自动化测试环境下，用例通过脚本操控模拟器或真机环境，多个用例不能同时操控一个环境，否则会相互干扰，就好比 JS 只能是单线程执行一样。")]),t._v(" "),s("p",[t._v("因为用例只能一个一个的执行，一个完整的项目自然会包含很多用例，但是一次只能执行一个用例的话，我们需要人工的操作很多次，才能全部执行完。为了跑一个遍就把所有的用例都执行完的话，我们会想到写一个脚本通过遍历的方式依次执行，这就是 @mpxjs/e2e-scripts 设计的初衷。")]),t._v(" "),s("p",[t._v("使用 @mpxjs/e2e-scripts 内部提供的命令脚本，执行 npx e2e-runner 将会按照 sequence 的定义的顺序依次执行用例文件。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("sequence")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 测试用例的执行顺序")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'minitest-1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'minitest-2'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("上面代码表示会先执行 minitest-1.spec.js 文件，然后再执行 minitest-2.spec.js 文件。")]),t._v(" "),s("h2",{attrs:{id:"e2e可视化报告平台"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#e2e可视化报告平台"}},[t._v("#")]),t._v(" E2E可视化报告平台")]),t._v(" "),s("p",[t._v("E2E内置的 Jest 默认支持输出 HTML 的报告，因其只支持对测试结果数据的简单展示，故我们希望在其基础上，不仅针对报告查看的广度和颗粒度进行细化，还将对自动化测试过程中涉及到的痛点实现功能上的增强。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/baogao-2.jpeg",alt:""}})]),t._v(" "),s("p",[t._v("E2E可视化报告平台是一个运行在本地环境，统合了用例管理、测试报告、页面快照和错误日志的平台。支持对通过 WechatDevTools 录制回放功能录制出的 case 进行自定义增强的能力，同时提供执行 E2E 测试过程中产出的页面快照和错误日志等信息进行快捷、直观地查看的功能。")]),t._v(" "),s("p",[t._v("目前支持多种交互动作保存快照（点击、输入、滑动等），我们还在页面快照方面做了增强，提供了快照标记的功能，可以完善测试报告，增强排查手段，当点击元素后，页面快照上会自动标记出点击的区域或者元素。")]),t._v(" "),s("h2",{attrs:{id:"e2e录制-自动化生成case"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#e2e录制-自动化生成case"}},[t._v("#")]),t._v(" E2E录制+自动化生成case")]),t._v(" "),s("p",[t._v("微信推出了官方的录制回放能力。通过微信开发者工具可以录制用户的操作过程，期间可以进行简单断言，录制结束后支持回放。但是经过实际使用发现录制回放存在下列不足：")]),t._v(" "),s("ol",[s("li",[t._v("录制结果结果以 json 形式存在于 dist 目录，难以扩展、难维护；")]),t._v(" "),s("li",[t._v("仅支持 data快照、wxml快照、检查元素、检查路径四种简单断言，难以满足复杂业务场景的细粒度断言诉求；")]),t._v(" "),s("li",[t._v("因等待时长、接口响应时机、组件更新时机等难以和录制时对应，录制结果回放失败频率高、不稳定；")])]),t._v(" "),s("p",[t._v("我们通过基于微信原生的录制进行增强的方案。使用录制的便捷性降低手写流程的成本，再通过 sdk 的能力对录制所得 Case 进行增强。")]),t._v(" "),s("p",[t._v("这样，我们通过分析录制 JSON 文件，把 JSON 中的每一条进行分析转换，最终得到 spec 的 JS 代码文件，通过这种方式，可以大幅度降低获取元素、触发事件等常规 Case 的编写。")]),t._v(" "),s("p",[t._v("JSON to Spec 本质只是录制结果的一种呈现，而这种转换的目的在于通过扩展强化录制 Case，弥补录制的能力有限。")]),t._v(" "),s("p",[t._v("为了方便我们进行扩展，首先需要对录制所得的 JSON 文件进行语义化的分析。这么做的意义在于把录制的操作步骤和 JSON 的数据关联起来，而关联步骤和数据又可以增强可读性为用户在某一个步骤之后进行扩展增加了极大的便利性。")]),t._v(" "),s("p",[t._v("上一个部分已经论证过把录制和SDK增强接合起来的可行性，但是上面一系列的操作都是通过脚本的形式呈现的，这对于我们前面的降低门槛来说仍然是繁琐的。最起码对于不会写代码的的人来说，还是不够理想。接下来就是探索如何更直观、更高效的方式把这种方案落地。")]),t._v(" "),s("p",[t._v("我们设计了 Mpx-E2E 的工作台，当然这些也都集成到了 Mpx-E2E 的可视化平台中，下面我们看看这些具体的可视化的工作。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/gencae.png",alt:""}})]),t._v(" "),s("p",[t._v("分析 JSON 操作步骤后，我们把依据 JSON 生成的 Spec 同样做了可视化处理，起初的时候我们只是做了 Spec 代码的 highlight，并没有支持编辑。但是考虑到所见即所得的效率，我们又在此支持了 WEB-IDE。在生成 Spec 代码后，即可在线进行编辑，最终通过我们的@mpxjs/e2e SDK核心能力，完成了保存spec文件。")]),t._v(" "),s("h2",{attrs:{id:"增强api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#增强api"}},[t._v("#")]),t._v(" 增强API")]),t._v(" "),s("blockquote",[s("p",[t._v("@mpxjs/e2e")])]),t._v(" "),s("p",[t._v("小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。")]),t._v(" "),s("p",[t._v("然而在我们使用过程中发现原始小程序官网提供的sdk存在能力的不足和缺失，或者说无法满足我们复杂的业务流程，针对这一系列的能力的缺失，我们开发了针对e2e的增强型api，来满足我们的整个自动化流程所需的功能")]),t._v(" "),s("p",[t._v("1、获取页面中的DOM元素 $ 方法 ：")]),t._v(" "),s("p",[t._v("SDK 中重写 page 和 element 的 "),s("code",[t._v("$")]),t._v(" 方法。之所以这么处理是因为原生的 "),s("code",[t._v("$")]),t._v(" 方法存在自定义组件中的元素不能稳定获取的问题，而这个问题的根源在于微信小程序会以某种规则为元素拼接组件或者父组件的名字作为真实类名，而这种规则并不固定。")]),t._v(" "),s("p",[t._v("目前增强后的 "),s("code",[t._v("$")]),t._v(" 方法支持两个参数，第一个为选择器，第二个是自定义组件名。第二个参数不传时其行为和原生 "),s("code",[t._v("$")]),t._v(" 方法一致。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("className"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" componentsName"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Promise"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Element "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" any"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" confirmbtn "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'confirm-btn'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'homepage/components/confirmef91faba/confirm'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" confirmbtn2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.confirm-btn'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" view "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'view'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#id'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("获取自定义组件中的元素需要以渲染结果为准，通常第二个参数是传入组件的 "),s("code",[t._v("is")]),t._v(" 属性。注意弹窗类似的组件往往会存在动画所以需要异步获取。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 页面的渲染结果")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("base"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("dialog is"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"homepage/components/dialogd2d0cea6/index"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  #shadow"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("root\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wrapper"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"cancel-btn"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("确认"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"confirm-btn"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("取消"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("base"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("dialog"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对应获取元素的方法")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cancelbtn "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cancel-btn'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'homepage/components/dialogd2d0cea6/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" confirmbtn "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" page"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'confirm-btn'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'homepage/components/dialogd2d0cea6/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("2、增强 wait/ waitAll")]),t._v(" "),s("p",[t._v("automator 中原生支持 "),s("code",[t._v("wait")]),t._v(" 方法，表示等待时长或者等待终止的断言函数。但是经过实际测试发现，使用指定的等待时间并不可靠，其运行受限于硬件条件。")]),t._v(" "),s("p",[t._v("经过增强的 "),s("code",[t._v("wait")]),t._v(" 方法可以支持： 路由到指定页面， 指定组件渲染，指定组件更新，指定接口发起， 指定接口响应后；")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Promise"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("string "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" miniProgram "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" Automator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("launch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("projectPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./dist/wx'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 页面")]),t._v("\npage "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reLaunch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/pages/index/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pages/index/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 组件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" suggest1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'suggest/components/suggestcaafe3e4/suggest'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'component'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 组件更新")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" suggest2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'suggest/components/suggestcaafe3e4/suggest'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'componentUpdate'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请求")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" request "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://xxxx.xxx/xxx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'request'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回结果")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" response "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" miniProgram"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wait")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://xxxx.xxx/xxx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'response'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("errno"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("status"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("3、新增 mock 能力")]),t._v(" "),s("p",[t._v("考虑到进行 e2e 测试时有些场景需要 mock 数据，所以 SDK 结合 mpx-fetch 的 "),s("code",[t._v("setProxy")]),t._v(" 能力提供了静态资源文件 mock、手动设置接口响应结果的能力。")]),t._v(" "),s("p",[t._v("前置：如果需要使用 mock 需要使用支持 "),s("code",[t._v("setProxy")]),t._v(" 的 mpx-fetch 版本；此外还需要在 createApp 的时候传入 "),s("code",[t._v("setProxy")]),t._v(" 属性，其配置与 mpx-fetch 的 "),s("code",[t._v("setProxy")]),t._v(" 方法的配置相同，示例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("setProxy")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  \t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("host")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-domain.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("protocol")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https:'")]),t._v("\n    \t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("host")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'localhost'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("port")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8887")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("protocol")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http:'")]),t._v("\n    \t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  \t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// otherApp props")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("3.1 初始化 mock：initMock")]),t._v(" "),s("p",[t._v("当传入 "),s("code",[t._v("staticDir")]),t._v(" 时会优先匹配该目录下的静 json 文件作为指定接口的响应结果。")]),t._v(" "),s("p",[t._v("接口与文件名的映射规则：将域名后的 path 中的分隔符 "),s("code",[t._v("/")]),t._v(" 替换为 "),s("code",[t._v("-")]),t._v("，示例：")]),t._v(" "),s("ul",[s("li",[t._v("接口名称："),s("code",[t._v("api/pGetIndexInfo")])]),t._v(" "),s("li",[t._v("json 文件名称："),s("code",[t._v("api-pGetIndexInfo.json")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("E2eMockConfig")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("staticDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 本地文件目录：")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\nAutomator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initMock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mockCfg"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" E2eMockConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Promise"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("MiniProgram"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("3.2 "),s("code",[t._v("setMock")]),t._v(" 方法，除了上面的静态资源文件，mock 内置了一个 Map 列表，因此可以按需的设置某一接口的响应结果。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("Automator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setMock")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("response")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("any"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 示例：")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" un "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Automator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setMock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://some-domain.com/api/pGetIndexInfo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("errno")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("errmsg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mock-index-info'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 需要取消时可以调用 un，注意这一步骤非必须！！")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("un")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("3.3 "),s("code",[t._v("removeMockFromMap")]),t._v(" 从 mock 内置的 Map 列表中移除指定 path 对应的的 mock 数据。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("Automator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeMockFromMap")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("h2",{attrs:{id:"sop"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#sop"}},[t._v("#")]),t._v(" SOP")]),t._v(" "),s("p",[s("strong",[t._v("一、环境要求")])]),t._v(" "),s("p",[t._v("1.1 微信环境\n安装 Node.js 并且版本大于 8.0\n基础库版本为 2.7.3 及以上\n开发者工具版本为 1.02.1907232 及以上\n \n1.2 Mpx 环境\nMpx-E2E 很多能力基于 Mpx 增强的，最低版本要求如下：\n@mpxjs/core >= 2.7.2\n@mpxjs/api-proxy >= 2.7.1\n@mpxjs/webpack-plugin >= 2.7.8")]),t._v(" "),s("p",[s("strong",[t._v("二、新建项目")])]),t._v(" "),s("p",[t._v("2.1 安装 @mpxjs/cli 脚手架")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("$ npm install "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("g @mpxjs"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("cli\n")])])]),s("p",[t._v("2.2 初始化项目选择 E2E 测试，执行以下命令执行初始化项目")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("$ mpx init some"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("proj\n")])])]),s("p",[t._v("执行该命令后稍等片刻，等模板下载完成 Terminal 会输出以下提示，当输出到 ”是否需要 E2E 测试“时输入 “yes“ ，脚手架内置了 E2E 需要的依赖和简单的测试用例。待脚手架初始化完成后，你的新项目就已经拥有了开箱即用的E2E能力。")]),t._v(" "),s("p",[s("strong",[t._v("三、已有项目")])]),t._v(" "),s("p",[t._v("3.1 安装 E2E sdk、runner")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("npm i @mpxjs"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("e2e  @mpxjs"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("e2e"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("scripts "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("save"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("dev\n")])])]),s("p",[t._v("3.2 创建 .e2erc 配置文件")]),t._v(" "),s("blockquote",[s("p",[t._v("在项目的源文件目录下创建名为 .e2erc.js 的配置文件，以下为 e2erc 各选项及其含义，建议直接复制到项目中")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'path'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" PluginReport "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/e2e/report-server/server.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E2E 报告插件")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("recordsDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'dist/wx/minitest'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 录制 json 文件的存储目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("connectFirst")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 优先使用 automator.connect，默认 automator.launch 优先")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("wsEndpoint")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ws://localhost:9420'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// automator.connect 的 wsEndpoint 选项，用于 connectFirst 时链接到模拟器服务")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("defaultWaitFor")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("15000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认 waitFor 时长")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("useTS")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否启用 TS , 该特性暂不支持，")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("devServer")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("open")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("jestTimeout")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("990000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// jestTimeout")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("jsonCaseCpDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/e2e-json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 从 minitest 目录复制 json 文件到该目录下")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("needRealMachine")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否需要真机")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("PluginReport")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("projectPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./dist/wx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 小程序代码路径，Mpx 框架的 wx 输出目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("testSuitsDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/e2e/suits/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// e2e 的 case 存放目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("sequence")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// E2E case，runner 将会按照这个数组顺序执行其中的 case 文件，")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'minitest-20'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不需要写 .spec.js 这个扩展名")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("reportsDir")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/reports'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 报告输出目录")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("四、获取 Case")])]),t._v(" "),s("p",[t._v("4.1 录制 JSON Case")]),t._v(" "),s("p",[t._v("录制 case 是依托于微信开发者工具已有的能力，操作流程如下：")]),t._v(" "),s("ol",[s("li",[t._v("启动录制\n启动微信开发者工具 -> 工具 -> 自动化测试")]),t._v(" "),s("li",[t._v("创建用例\n选择【开始录制】按钮\n【用例名】会成为录制 JSON case 的文件名，比如上图中录制结束后会得到一个名为\nminitest-3.json 的 JSON 文件；我们推荐您采用更语义化的测试用例名称，便于后续的 CASE 管理。\n【结束录制】后，开发者工具会在小程序的代目录（Mpx 的产物输出目录，如 dist/wx）下新增 minitest/ 目录，该目录是微信开发者工具自动创建的，用于存放录制 JSON case。例如上面的例子中，录制结束后该目录下就应该有 名为 minitest-3.json 的 文件。")])]),t._v(" "),s("p",[t._v("4.2 生成 Spec Case")]),t._v(" "),s("p",[t._v("启动 Mpx-E2E 平台服务，首先在项目的 package.json 中加入以下 npm script：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"e2eServe"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"npx e2e-runner --preview"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("在小程序项目录下通过命令行启动 Mpx-E2E 平台服务:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("npm run e2eServe\n")])])]),s("p",[t._v("平台服务已经成功启动！打开 Mpx-E2E 的可视化平台:\n选择【用例管理】，加载录制的 JSON Case，点击可视化平台上的 【JSON 导入】按钮。界面中间是对当前 JSON 文件的语义化解析，最后侧是包含自动生成代码的 Web IDE。点击中间的语义化解析会联动右侧 WebIDE 代码跳转到对应的区域。")]),t._v(" "),s("p",[t._v("4.3 可视化扩展 Spec Case")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("新增\n鼠标悬浮在中间语义化区域中每一条的左侧的绿色按钮时，就会出现一个扩展菜单，在弹出框中填写相关信息，点击【保存】即可新增一条操作")])]),t._v(" "),s("li",[s("p",[t._v("编辑\n通过可视化的方式扩展的操作可以编辑，录制的操作不能编辑；")])])]),t._v(" "),s("p",[t._v("4.4 保存 Spec case")]),t._v(" "),s("p",[t._v("在完成上述操作后，点击 Web-IDE 下面的 【保存】即可.")]),t._v(" "),s("p",[t._v("点击保存后， Web-IDE 中的内容将会被写入到 .e2erc.js 的 testSuitsDir 字段指定的目录中。当文件写入成功后，被保存的 spec 文件名会被自动写入到剪贴板中。")]),t._v(" "),s("p",[t._v("另外，生成这份 Case 的 JSON 文件也会被复制到 .e2erc.js 的 jsonCaseCpDir 目录下，之所以保存 JSON 文件主要是做备份，你可以不关心这个 json 的文件内容，但是我们建议你随着 spec 代码已经提交到版本库；\n \n经过保存后，我们就得到了 minitest-3.spec.js Case 文件。")]),t._v(" "),s("p",[s("strong",[t._v("五、修改 .e2erc.js sequence")])]),t._v(" "),s("p",[t._v("5.1 sequence 数组\n经过前面的获取 Case 后步骤后，我们已经得到了 minitest-3.spec.js Case 文件。在正式运行前，我们需要把这个 minitest-3.spec.js Case 加入到 .e2erc.js 的 sequence 字段数组中。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("sequence")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" \n  "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'minitest-3'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不用写 .spec.js ")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("5.2 为什么手动维护？\n之所以需要手动维护这个数组，是因为微信的 automator 不能并发运行，进而 E2E 的 Case 无法并发运行；又或者某几个 spec 间是有联系的， 这种情况下只能把顺序交给人工维护。")]),t._v(" "),s("p",[s("strong",[t._v("六、运行 e2e")])]),t._v(" "),s("p",[t._v('6.1 新增 npm scripts\n修改项目的 package.json 中 scripts 字段，向其中加入 "test:e2e":"npx e2e-runner" 命令')]),t._v(" "),s("p",[t._v("6.2 运行 E2E 测试命令")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("npm run test"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("e2e\n")])])]),s("p",[t._v("6.3 在真机中运行 E2E")]),t._v(" "),s("ol",[s("li",[t._v("真机运行 E2E 相当于微信开发者工具的【真机调试】，首先需要确保你的 Mpx 构建输出产物是 prod 模式下的产物；")]),t._v(" "),s("li",[t._v("修改 .e2erc.js 中的 needRealMachine 字段为 true，再执行 npm run test:e2e 命令；\n静等微信开发者工具完成真机调试二维码的构建完成，待完成后用真机扫描二维码即可开始；")])]),t._v(" "),s("blockquote",[s("p",[t._v("注：目前因为微信 automator 的限制，包括 wait 接口请求等能力暂时在真机上不能支持，这些问题目前已经反馈到微信，有进展我们会及时更新！")])]),t._v(" "),s("p",[s("strong",[t._v("七、测试报告")])]),t._v(" "),s("p",[t._v("在 .e2erc.js 中配置 report-plugin（详情见.e2erc.js 配置文件部分） 即可在所有 spec 运行结束后自动打开浏览器并呈现测试结果，测试结果包含以下三部分:")]),t._v(" "),s("p",[t._v("1） Jest 数据\n2） 自动截图：\n截图分析：在 Mpx-E2E 平台下，点击【截图】Tab 即可，截图以 spec 文件为维度展示，目前包含三种自动时机的截图：定时、点击时、路由发生时，默认全部展示。\n截图筛选：通过操作 timeout/tap/router 的复选框即可实现分类查看，另外在点击时的自动截图还会对点击位置进行标记；\n3）JSError 分析\n如果运行过程中小程序抛出 JS 异常，此时会触发 Mpx-E2E 的收集动作，同时会抓取报错瞬间的截图")]),t._v(" "),s("p",[t._v("未来可视化平台会持续集成更多功能，可以涵盖业务稳定，数据稳定(埋点测试)和性能数据，持续更新...")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/112.da7bd3e7.js b/docs-vuepress/.vuepress/dist/assets/js/112.da7bd3e7.js
deleted file mode 100644
index 59814a2ea2..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/112.da7bd3e7.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[112],{461:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"使用typescript开发小程序"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用typescript开发小程序"}},[t._v("#")]),t._v(" 使用TypeScript开发小程序")]),t._v(" "),s("h2",{attrs:{id:"什么是typescript"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#什么是typescript"}},[t._v("#")]),t._v(" 什么是TypeScript")]),t._v(" "),s("p",[t._v("TypeScript 是一个开源的编程语言，通过在 JavaScript（世界上最常用的语言之一） 的基础上添加静态类型定义构建而成。")]),t._v(" "),s("p",[t._v("类型提供了一种描述对象形状的方法。可以帮助提供更好的文档，还可以让 TypeScript 验证你的代码可以正常工作。")]),t._v(" "),s("p",[t._v("在 TypeScript 中，不是每个地方都需要标注类型，因为类型推断允许您无需编写额外的代码即可获得大量功能。")]),t._v(" "),s("h2",{attrs:{id:"typescript优势"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#typescript优势"}},[t._v("#")]),t._v(" TypeScript优势")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("静态类型检查\n静态类型检查可以避免很多不必要类型的错误，在编译阶段提前发现问题；")])]),t._v(" "),s("li",[s("p",[t._v("强大的类型推断能力\n除了类型声明外，"),s("code",[t._v("TypeScript")]),t._v(" 提供了强大的类型推断能力，该能力能够大大减少我们需要编写的类型声明，有效地减少我们使用 "),s("code",[t._v("TypeScript")]),t._v(" 的额外压力；")])]),t._v(" "),s("li",[s("p",[t._v("IDE 智能提示\n目前主流的 IDE 都对 "),s("code",[t._v("TypeScript")]),t._v(" 提供了良好的支持，基于 "),s("code",[t._v("TypeScript")]),t._v(" 的类型系统提供友好准确的编码提示与错误检查。")])])]),t._v(" "),s("h2",{attrs:{id:"使用方式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用方式"}},[t._v("#")]),t._v(" 使用方式")]),t._v(" "),s("h3",{attrs:{id:"编写ts前的准备工作"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编写ts前的准备工作"}},[t._v("#")]),t._v(" 编写ts前的准备工作")]),t._v(" "),s("p",[t._v("由于对 store 做类型推导使用了最新的 "),s("code",[t._v("TypeScript")]),t._v(" 特性，因此需要将编辑器的 "),s("code",[t._v("TypeScript")]),t._v(" 版本升级至 "),s("strong",[t._v("4.1.3")]),t._v(" 及以上版本。以下是 VSCode 配置示例：")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("更新项目中的TypeScript为 4.1.3 及以上版本。")])]),t._v(" "),s("li",[s("p",[t._v("在VSCode中打开一个 .js/.ts/.tsx 后缀的文件，使用 "),s("code",[t._v("Shift+Command+P")]),t._v(" 唤出 VSCode 命令行，输入 "),s("code",[t._v("TypeScript")]),t._v(" ，选择 "),s("code",[t._v("Select TypeScript Version")]),t._v("，选择使用工作区版本，将版本切换至 4.1.3 及以上版本。")])])]),t._v(" "),s("img",{staticStyle:{"border-radius":"6px"},attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/select-ts-version.png"}}),t._v(" "),s("ol",{attrs:{start:"3"}},[s("li",[t._v("在 VSCode 编辑器中安装 mpx 插件，来支持在.mpx单文件中编写 ts 时的代码提示和实时报错等优秀体验。")])]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("使用 @typescript/eslint-plugin 对 ts 代码进行检查，当在.mpx文件中使用全局类型时，eslint 会抛出 no-undef 错误，可以关闭相关 eslint 规则校验")])]),t._v(" "),s("h3",{attrs:{id:"mpx中编写ts（推荐）"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx中编写ts（推荐）"}},[t._v("#")]),t._v(" .mpx中编写ts（推荐）")]),t._v(" "),s("p",[t._v("目前 Mpx 已经支持在.mpx文件的 script 标签中编写 ts 代码，需要在 script 标签上添加 "),s("code",[t._v('lang="ts"')]),t._v(" 属性，在编译时会自动这部分 script 中的内容进行 ts 类型检查。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 内联编写ts代码")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("当然，由于大部分IDE对 ts 的语法支持都只对 .ts 和 .d.ts 文件生效，因此 Mpx 也支持创建一个 .ts 文件进行 ts 代码编写，在.mpx文件中，通过 src 的方式引入。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("./index.ts"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}}),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"为-ts文件添加loader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#为-ts文件添加loader"}},[t._v("#")]),t._v(" 为.ts文件添加loader")]),t._v(" "),s("p",[t._v("在 Webpack 配置中添加如下 rules 以配置 ts-loader")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.ts$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ts-loader'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"编写tsconfig-json文件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编写tsconfig-json文件"}},[t._v("#")]),t._v(" 编写tsconfig.json文件")]),t._v(" "),s("p",[t._v("对相关配置不熟悉的同学可以直接采用下面配置，能够最大限度发挥 Mpx 中强大的 ts 类型推导能力")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"compilerOptions"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"target"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"es6"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"allowJs"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"noImplicitThis"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"noImplicitAny"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"strictNullChecks"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"moduleResolution"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"node"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"lib"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dom"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"es6"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dom.iterable"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"增强类型"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#增强类型"}},[t._v("#")]),t._v(" 增强类型")]),t._v(" "),s("p",[t._v("如果需要增加 Mpx 的属性和选项，可以自定义声明 "),s("code",[t._v("TypeScript")]),t._v(" 补充现有的类型。")]),t._v(" "),s("p",[t._v("例如，首先创建一个 types.d.ts 文件")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// types.d.ts")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" Mpx "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("module")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 声明为 Mpx 补充的属性")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Mpx")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    $myProperty"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("之后在任意文件只需引用一次 types.d.ts 声明文件即可，例如在 app.mpx 中引用")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('/// <reference path="./types.d.ts" />')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$myProperty "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'my-property'")]),t._v("\n")])])]),s("h2",{attrs:{id:"类型推导及注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#类型推导及注意事项"}},[t._v("#")]),t._v(" 类型推导及注意事项")]),t._v(" "),s("p",[t._v("Mpx 基于泛型函数提供了非常方便用户使用的反向类型推导能力，简单来说，就是用户可以用非常接近于 js 的方式调用 Mpx 提供的 api ，就能够获得大量基于用户输入参数反向推导得到的类型提示及检查。但是由于 ts 本身的能力限制，我们在 Mpx 的运行时中添加了少量辅助函数和变种api，便于用户最大程度地享受反向类型推导带来的便利性，简单的使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-typescript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-typescript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getMixin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createStoreWithThis"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// createStoreWithThis作为createStore的变种方法，主要变化在于定义getters，mutations和actions时，")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取自身的state，getters等属性不再通过参数传入，而是通过this.state或者this.getters等属性进行访问，")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 由于TS的能力限制，getters/mutations/actions只有使用对象字面量的方式直接传入createStoreWithThis时")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 才能正确推导出this的类型，当需要将getters/mutations/actions拆解为对象编写时，")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 需要用户显式地声明this类型，无法直接推导得出。")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  state"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    aa"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    bb"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  getters"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aa "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bb\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  actions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  computed"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// data, mixin, computed中定义的数据能够被推导到this中")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 从store上map过来的计算属性或者方法同样能够被推导到this中")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'aa'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  mixins"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      computed"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("aaa")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("123")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      methods"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  methods"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'doSth3'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"getmixin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getmixin"}},[t._v("#")]),t._v(" getMixin")]),t._v(" "),s("p",[t._v("为 ts 项目提供的反向推导 mixin 的辅助函数，getMixin 接收一个对象作为参数，使用 mixins 时，支持嵌套 mixin。具体用法见"),s("RouterLink",{attrs:{to:"/api/global-api.html#getmixin"}},[t._v("getMixin")]),t._v("。")],1),t._v(" "),s("h3",{attrs:{id:"createstorewiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createstorewiththis"}},[t._v("#")]),t._v(" createStoreWithThis")]),t._v(" "),s("p",[t._v("为了在 ts 项目中更好的支持 store 的类型推导，提供了 createStoreWithThis 进行 store 的创建，createStoreWithThis 接收一个 options 对象作为参数。通过 createStoreWithThis 创建 store 时，使用"),s("code",[t._v("this.state")]),t._v("，"),s("code",[t._v("this.getters")]),t._v("，"),s("code",[t._v("this.commit")]),t._v(", "),s("code",[t._v("this.dispatch")]),t._v("对自身的相关属性进行获取。具体用法见"),s("RouterLink",{attrs:{to:"/api/store-api.html#createstorewiththis"}},[t._v("createStoreWithThis")]),t._v("。")],1),t._v(" "),s("h3",{attrs:{id:"createstatewiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createstatewiththis"}},[t._v("#")]),t._v(" createStateWithThis")]),t._v(" "),s("p",[t._v("创建一个 state，支持 state 类型推导的辅助函数，具体用法见"),s("RouterLink",{attrs:{to:"/api/store-api.html#createstatewiththis"}},[t._v("createStateWithThis")])],1),t._v(" "),s("h3",{attrs:{id:"creategetterswiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#creategetterswiththis"}},[t._v("#")]),t._v(" createGettersWithThis")]),t._v(" "),s("p",[t._v("创建一个 getters，支持 getters 类型推导的辅助函数，具体用法见"),s("RouterLink",{attrs:{to:"/api/store-api.html#creategetterswiththis"}},[t._v("createGettersWithThis")])],1),t._v(" "),s("h3",{attrs:{id:"createmutationswiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createmutationswiththis"}},[t._v("#")]),t._v(" createMutationsWithThis")]),t._v(" "),s("p",[t._v("创建一个 mutations，支持 mutations 类型推导的辅助函数，具体用法见"),s("RouterLink",{attrs:{to:"/api/store-api.html#createmutationswiththis"}},[t._v("createMutationsWithThis")])],1),t._v(" "),s("h3",{attrs:{id:"createactionswiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createactionswiththis"}},[t._v("#")]),t._v(" createActionsWithThis")]),t._v(" "),s("p",[t._v("创建一个 actions，支持 actions 类型推导的辅助函数，具体用法见"),s("RouterLink",{attrs:{to:"/api/store-api.html#createactionswiththis"}},[t._v("createActionsWithThis")])],1)])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/113.caaf11a3.js b/docs-vuepress/.vuepress/dist/assets/js/113.caaf11a3.js
deleted file mode 100644
index 23d537d00a..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/113.caaf11a3.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[113],{459:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"单元测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#单元测试"}},[t._v("#")]),t._v(" 单元测试")]),t._v(" "),s("p",[t._v("Mpx 框架提供了 jest 转换器 mpx-jest，结合微信小程序提供的 "),s("a",{attrs:{href:"https://github.com/wechat-miniprogram/miniprogram-simulate",target:"_blank",rel:"noopener noreferrer"}},[t._v("miniprogram-simulate"),s("OutboundLink")],1),t._v(" 来进行单元测试的工作。")]),t._v(" "),s("blockquote",[s("p",[t._v("因为目前仅微信提供了仿真工具，暂时只支持微信小程序平台的单元测试。如果需要 E2E 测试，则和框架无关了，可参考微信的"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/",target:"_blank",rel:"noopener noreferrer"}},[t._v("小程序自动化"),s("OutboundLink")],1),t._v("。")])]),t._v(" "),s("p",[t._v("如果是初始化项目，单元测试相关的项目依赖和配置可以通过 @mpx/cli 创建项目时选择使用单元测试选项自动生成，如果时旧项目需要使用，可以按照下方步骤安装依赖和添加配置。")]),t._v(" "),s("h2",{attrs:{id:"安装依赖"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装依赖"}},[t._v("#")]),t._v(" 安装依赖")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("npm i -D @mpxjs/mpx-jest @mpxjs/miniprogram-simulate jest babel-jest\n\n// 如果项目使用了ts，则还需要安装\nnpm i -D ts-jest\n")])])]),s("h2",{attrs:{id:"jest-相关配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#jest-相关配置"}},[t._v("#")]),t._v(" jest 相关配置")]),t._v(" "),s("p",[t._v("首先在项目根目录创建 jest.config.js 配置文件，并加入以下关键配置")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  testEnvironment: 'jsdom', // 使用 jsdom 环境\n  transform: {\n    '^.+\\\\.js$': '"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("rootDir")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("/node_modules/babel-jest',\n    '^.+\\\\.mpx$': '"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("rootDir")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("/node_modules/@mpxjs/mpx-jest',\n    '^.+\\\\.ts$': '"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("rootDir")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("/node_modules/ts-jest' // 如果没使用 ts 可不用添加\n  },\n  setupFiles: ['"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("rootDir")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("/test/setup'], // test 文件夹下声明 setup，路径可以随意定义，可以为每一个单测添加相应的配置\n  transformIgnorePatterns: ['node_modules/(?!(@mpxjs))'], // 定义node_modules 中需要进行 transform 的内容\n\n")])])]),s("h2",{attrs:{id:"简单的断言"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#简单的断言"}},[t._v("#")]),t._v(" 简单的断言")]),t._v(" "),s("p",[t._v("暂时进行一个简单的组件单元测试书写，对于复杂组件以及通用测试逻辑的总结我们会在后续进行发布。")]),t._v(" "),s("p",[t._v("示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ message }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello!'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bye!'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("对应的 hello-world.spec.js")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" simulate "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/miniprogram-simulate'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里是一些 Jasmine 2.0 的测试，你也可以使用你喜欢的任何断言库或测试工具。")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("describe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MyComponent'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" id\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("beforeAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<rootDir>/src/components/hello-world.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 检查 mount 中的组件实例")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'correctly sets the message when component attached'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" instance "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance\n    \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Mpx提供的数据响应是发生在组件挂载时的，未挂载前只能通过实例上的data访问数据")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello!'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parent-wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建容器节点")]),t._v("\n    comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将组件插入到容器节点中，会触发 attached 生命周期")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 挂载后则可以直接通过实例访问")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bye!'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建一个实例并检查渲染输出")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'renders the correct message'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parent-wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建容器节点")]),t._v("\n    comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 挂载组件到容器节点")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<wx-view>bye!</wx-view>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"编写可被测试的组件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编写可被测试的组件"}},[t._v("#")]),t._v(" 编写可被测试的组件")]),t._v(" "),s("p",[t._v("很多组件的渲染输出由它的 props 决定。事实上，如果一个组件的渲染输出完全取决于它的 props，那么它会让测试变得简单，就好像断言不同参数的纯函数的返回值。看下面这个例子：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ msg }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("msg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("你可以在不同的 properties 中，通过 simulate.render 的第二个参数控制组件的输出：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" simulate "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/miniprogram-simulate'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 省略辅助方法")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("describe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MyComponent'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'renders correctly with different props'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<rootDir>/src/components/hello-world.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("msg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parent-wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    comp1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<wx-view>hello</wx-view>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("msg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bye'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parent-wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    comp2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<wx-view>bye</wx-view>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"断言异步更新"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#断言异步更新"}},[t._v("#")]),t._v(" 断言异步更新")]),t._v(" "),s("p",[t._v("小程序视图层的更新是异步的，一些依赖视图更新结果的断言必须 await simulate.sleep() 或者 await comp.instance.$nextTick() 后进行：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" simulate "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/miniprogram-simulate'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 省略辅助方法")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'updates the rendered message when vm.message updates'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<rootDir>/src/components/hello-world.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parent-wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("msg "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sleep")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<wx-view>foo</wx-view>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更深入的 Mpx 单元测试的内容将在以后持续更新……")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/114.16cda7ac.js b/docs-vuepress/.vuepress/dist/assets/js/114.16cda7ac.js
deleted file mode 100644
index b2aa6d052b..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/114.16cda7ac.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[114],{463:function(p,e,_){"use strict";_.r(e);var v=_(4),t=Object(v.a)({},(function(){var p=this,e=p._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":p.$parent.slotKey}},[e("h1",{attrs:{id:"mpx编译构建原理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mpx编译构建原理"}},[p._v("#")]),p._v(" Mpx编译构建原理")]),p._v(" "),e("p",[p._v("我们希望使用目前设计最强大、生态最完善的编译构建工具Webpack来实现小程序的编译构建，让用户得到web开发中先进强大的工程化开发体验。使用过Webpack的同学都知道，通常来说Webpack都是将项目中使用到的一系列碎片化模块打包为一个或几个bundle，而小程序所需要的文件结构是非常离散化的，如何调解这两者的矛盾成为了我们最大的难题。一种非常直观简单的思路在于遍历整个src目录，将其中的每一个.mpx文件都作为一个entry加入到Webpack中进行处理，这样做的问题主要有两个：")]),p._v(" "),e("ol",[e("li",[p._v("src目录中用不到的.mpx文件也会被编译输出，最终也会被小程序打包进项目包中，无意义地增加了包体积；")]),p._v(" "),e("li",[p._v("对于node_modules下的.mpx文件，我们不认为遍历node_modules是一个好的选择。")])]),p._v(" "),e("p",[p._v("最终我们采用了一种基于依赖分析和动态添加entry的方式来进行实现，用户在Webpack配置中只需要配置一个入口文件app.mpx，loader在解析到json时会解析json中pages域和usingComponents域中声明的路径，通过动态添加entry的方式将这些文件添加到Webpack的构建系统当中（注意这里是添加entry而不是添加依赖，因为只有entry能生成独立的文件，满足小程序的离散化文件结构），并递归执行这个过程，直到整个项目中所有用到的.mpx文件都加入进来，在输出前，我们借助了CommonsChunkPlugin/SplitChunksPlugin的能力将复用的模块抽取到一个外部的bundle中，确保最终生成的包中不包含重复模块。我们提供了一个Webpack插件和一个.mpx文件对应的loader来实现上述操作，用户只需要将其添加到Webpack配置中就可以以打包web项目的方式正常打包小程序，没有任何的前置和后置操作，支持Webpack本身的完整生态。")]),p._v(" "),e("p",[e("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/mpx-liucheng.002.jpeg",alt:"Mpx编译构建机制流程示意图"}})]),p._v(" "),e("p",[e("em",[p._v("Mpx编译构建机制流程示意图")])]),p._v(" "),e("h2",{attrs:{id:"分包处理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#分包处理"}},[p._v("#")]),p._v(" 分包处理")]),p._v(" "),e("p",[p._v("构建时对于非JS资源，是所有的包串行处理，资源map会精确记录每个包中引用了哪些资源。")]),p._v(" "),e("p",[p._v("在主包的处理过程中，将主包页面中引用的所有非js资源(组件、外部样式、外部模板、wxs，图像媒体等)都记录下来，在处理分包时，对分包内引用的非js资源都进行检查，如果被主包引用过则输出到主包中，否则标记为分包only的资源输出到分包目录下。")]),p._v(" "),e("p",[p._v("由于主包和分包限制相同，一般情况下分包体积远小于主包体积\n，而微信小程序的体积限制策略主要卡主包体积不得超过2M，因此，Mpx设定的是主包体积优先策略，即尽可能减小主包体积，为此，会将分包资源尽可能打到分包去。")]),p._v(" "),e("p",[p._v("组件和静态资源的输出规则如下：")]),p._v(" "),e("ol",[e("li",[p._v("主包引用的资源输出至主包")]),p._v(" "),e("li",[p._v("分包引用且主包引用过的资源输出至主包，不在当前分包重复输出")]),p._v(" "),e("li",[p._v("分包引用且无其他包引用的资源输出至当前分包")]),p._v(" "),e("li",[p._v("分包引用且其他分包也引用过的资源，重复输出至当前分包")]),p._v(" "),e("li",[p._v("当用户通过packageName query显式指定了资源的所属包时，输出至指定的包")])]),p._v(" "),e("p",[p._v("如此复杂的分包策略也完全是为了尽可能良好地支持处理分包引用npm资源，因此不管在主包还是分包中，使用Mpx框架开发小程序，可以享受最舒适最自然最好用的npm机制。")]),p._v(" "),e("p",[p._v("而小程序原生的分包是不具备这个能力，只能引用自己分包下的资源，同时大部分基于web技术而来的转译型框架应该也都是不会考虑这个部分的。")]),p._v(" "),e("p",[p._v("甚至如果出现这种场景：同一个组件在A分包和B分包中都有使用，但未在主包使用，会将这个组件分别放入A分包和B分包而不是主包。（是否需要这样可自行斟酌，如果不希望出现这种情况，可在主包中引入一次该组件就会被收到主包去，全局就这一份了）")]),p._v(" "),e("p",[p._v("总结一下：")]),p._v(" "),e("p",[p._v("对于组件，若同时被多个分包引用，主包未引用，会有多份分包存在于各分包中。一旦被主包使用，就仅有一份存在于主包中。")]),p._v(" "),e("p",[p._v("对于资源（例如纯JS模块），若被主包使用，会被收集到主包里。若被多个分包使用，会被收集进主包的bundle里。若仅被某分包使用，就会在分包的bundle.js里（视模块大小及引用次数也可能被内联到某个组件JS里）。")]),p._v(" "),e("p",[p._v("进阶用户有更花式的需求可通过packageName query来显式指定输出。")])])}),[],!1,null,null,null);e.default=t.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/115.88124b12.js b/docs-vuepress/.vuepress/dist/assets/js/115.88124b12.js
deleted file mode 100644
index 51335b93ae..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/115.88124b12.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{460:function(t,e,a){"use strict";a.r(e);var s=a(4),r=Object(s.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"mpx运行时增强原理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mpx运行时增强原理"}},[t._v("#")]),t._v(" Mpx运行时增强原理")]),t._v(" "),e("p",[t._v("数据响应作为Vue最核心的特性，在我们的日常开发中被大量使用，能够极大地提高前端开发体验和效率，我们在框架设计初期最早考虑的就是如何将数据响应特性加入到小程序开发中。在数据响应的实现上，我们引入了MobX，一个实现了纯粹数据响应能力的知名开源项目。借助MobX和mixins，我们在小程序组件创建初期建立了一个响应式数据管理系统，该系统观察着小程序组件中的所有数据(data/props/computed)并基于数据的变更驱动视图的渲染(setData)及用户注册的watch回调，实现了Vue中的数据响应编程体验。与此同时，我们基于MobX封装实现了一个Vuex规范的数据管理store，能够方便地注入组件进行全局数据管理。为了提高跨团队开发的体验，我们对store添加了多实例可合并的特性，不同团队维护自己的store，在需要时能够合并他人或者公共的store生成新的store实例，我们认为这是一种比Vuex中modules更加灵活便捷的跨团队数据管理模式")]),t._v(" "),e("p",[t._v("作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：")]),t._v(" "),e("ol",[e("li",[t._v("尽可能减少setData调用的频次")]),t._v(" "),e("li",[t._v("尽可能减少单次setData传输的数据")])]),t._v(" "),e("p",[t._v("为了实现以上两个优化方向，我们做了以下几项工作：")]),t._v(" "),e("ul",[e("li",[t._v("将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；")]),t._v(" "),e("li",[t._v("将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。")])]),t._v(" "),e("p",[e("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/runtime.jpeg",alt:"Mpx数据响应机制流程示意图"}})]),t._v(" "),e("p",[e("em",[t._v("Mpx数据响应机制流程示意图")])])])}),[],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/116.4a116234.js b/docs-vuepress/.vuepress/dist/assets/js/116.4a116234.js
deleted file mode 100644
index cd64dc2f87..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/116.4a116234.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[116],{466:function(t,a,e){"use strict";e.r(a);var r=e(4),s=Object(r.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"api支持列表"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#api支持列表"}},[t._v("#")]),t._v(" API支持列表")]),t._v(" "),a("p",[t._v("mpx转RN的对标微信api目前支持及部分的api转换，目前支持的能力可以参考下表：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("支持方法")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("getSystemInfo")])]),t._v(" "),a("tr",[a("td",[t._v("getSystemInfoSync")])]),t._v(" "),a("tr",[a("td",[t._v("getDeviceInfo")])]),t._v(" "),a("tr",[a("td",[t._v("getWindowInfo")])]),t._v(" "),a("tr",[a("td",[t._v("request")])]),t._v(" "),a("tr",[a("td",[t._v("setStorage")])]),t._v(" "),a("tr",[a("td",[t._v("removeStorage")])]),t._v(" "),a("tr",[a("td",[t._v("removeStorageSync")])]),t._v(" "),a("tr",[a("td",[t._v("getStorage")])]),t._v(" "),a("tr",[a("td",[t._v("getStorageInfo")])]),t._v(" "),a("tr",[a("td",[t._v("clearStorage")])]),t._v(" "),a("tr",[a("td",[t._v("clearStorageSync")])]),t._v(" "),a("tr",[a("td",[t._v("setClipboardData")])]),t._v(" "),a("tr",[a("td",[t._v("getClipboardData")])]),t._v(" "),a("tr",[a("td",[t._v("makePhoneCall")])]),t._v(" "),a("tr",[a("td",[t._v("onWindowResize")])]),t._v(" "),a("tr",[a("td",[t._v("offWindowResize")])]),t._v(" "),a("tr",[a("td",[t._v("arrayBufferToBase64")])]),t._v(" "),a("tr",[a("td",[t._v("base64ToArrayBuffer")])]),t._v(" "),a("tr",[a("td",[t._v("connectSocket")])]),t._v(" "),a("tr",[a("td",[t._v("getNetworkType")])]),t._v(" "),a("tr",[a("td",[t._v("onNetworkStatusChange")])]),t._v(" "),a("tr",[a("td",[t._v("offNetworkStatusChange")])])])]),t._v(" "),a("h1",{attrs:{id:"使用说明"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用说明"}},[t._v("#")]),t._v(" 使用说明")]),t._v(" "),a("p",[t._v("对于一些api-proxy中没有提供的能力，用户可以搭配mpx对象方式传入custom使用即可示例如下：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" showModal "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@test/showModal'")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("custom")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ios")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      showModal\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("android")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      showModal\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showModal")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'标题'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'这是一个弹窗'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'弹框展示成功'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h1",{attrs:{id:"api抹平差异详情"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#api抹平差异详情"}},[t._v("#")]),t._v(" API抹平差异详情")]),t._v(" "),a("p",[t._v("对于一些微信独有的返回结果，或者RN目前不能支持的入参/返回结果，在下面会有详细说明：")]),t._v(" "),a("h3",{attrs:{id:"getsysteminfo-getsysteminfosync"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getsysteminfo-getsysteminfosync"}},[t._v("#")]),t._v(" getSystemInfo/getSystemInfoSync")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("language")])]),t._v(" "),a("tr",[a("td",[t._v("version")])]),t._v(" "),a("tr",[a("td",[t._v("SDKVersion")])]),t._v(" "),a("tr",[a("td",[t._v("benchmarkLevel")])]),t._v(" "),a("tr",[a("td",[t._v("albumAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("cameraAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("locationAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("microphoneAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("notificationAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("phoneCalendarAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("host")])]),t._v(" "),a("tr",[a("td",[t._v("enableDebug")])]),t._v(" "),a("tr",[a("td",[t._v("notificationAlertAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("notificationBadgeAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("notificationSoundAuthorized")])]),t._v(" "),a("tr",[a("td",[t._v("bluetoothEnabled")])]),t._v(" "),a("tr",[a("td",[t._v("locationEnabled")])]),t._v(" "),a("tr",[a("td",[t._v("wifiEnabled")])]),t._v(" "),a("tr",[a("td",[t._v("locationReducedAccuracy")])]),t._v(" "),a("tr",[a("td",[t._v("theme")])])])]),t._v(" "),a("h3",{attrs:{id:"getdeviceinfo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getdeviceinfo"}},[t._v("#")]),t._v(" getDeviceInfo")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("benchmarkLevel")])]),t._v(" "),a("tr",[a("td",[t._v("abi")])]),t._v(" "),a("tr",[a("td",[t._v("cpuType")])])])]),t._v(" "),a("h3",{attrs:{id:"getwindowinfo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getwindowinfo"}},[t._v("#")]),t._v(" getWindowInfo")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("screenTop")])])])]),t._v(" "),a("h3",{attrs:{id:"request"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#request"}},[t._v("#")]),t._v(" request")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持入参")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("useHighPerformanceMode")])]),t._v(" "),a("tr",[a("td",[t._v("enableHttp2")])]),t._v(" "),a("tr",[a("td",[t._v("enableProfile")])]),t._v(" "),a("tr",[a("td",[t._v("enableQuic")])]),t._v(" "),a("tr",[a("td",[t._v("enableCache")])]),t._v(" "),a("tr",[a("td",[t._v("enableHttpDNS")])]),t._v(" "),a("tr",[a("td",[t._v("httpDNSServiceId")])]),t._v(" "),a("tr",[a("td",[t._v("enableChunked")])]),t._v(" "),a("tr",[a("td",[t._v("forceCellularNetwork")])]),t._v(" "),a("tr",[a("td",[t._v("redirect")])])])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("cookies")])]),t._v(" "),a("tr",[a("td",[t._v("profile")])]),t._v(" "),a("tr",[a("td",[t._v("exception")])])])]),t._v(" "),a("h3",{attrs:{id:"setstorage-getstorage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setstorage-getstorage"}},[t._v("#")]),t._v(" setStorage/getStorage")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持入参")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("encrypt")])])])]),t._v(" "),a("h3",{attrs:{id:"getstorageinfo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getstorageinfo"}},[t._v("#")]),t._v(" getStorageInfo")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("currentSize")])]),t._v(" "),a("tr",[a("td",[t._v("limitSize")])])])]),t._v(" "),a("h3",{attrs:{id:"connectsocket"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#connectsocket"}},[t._v("#")]),t._v(" connectSocket")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持入参")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("tcpNoDelay")])]),t._v(" "),a("tr",[a("td",[t._v("perMessageDeflate")])]),t._v(" "),a("tr",[a("td",[t._v("timeout")])]),t._v(" "),a("tr",[a("td",[t._v("forceCellularNetwork")])])])]),t._v(" "),a("h3",{attrs:{id:"getnetworktype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getnetworktype"}},[t._v("#")]),t._v(" getNetworkType")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("不支持返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("signalStrength")])]),t._v(" "),a("tr",[a("td",[t._v("hasSystemProxy")])])])])])}),[],!1,null,null,null);a.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/117.e45c1b95.js b/docs-vuepress/.vuepress/dist/assets/js/117.e45c1b95.js
deleted file mode 100644
index 3b3f338209..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/117.e45c1b95.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[117],{462:function(v,t,_){"use strict";_.r(t);var d=_(4),e=Object(d.a)({},(function(){var v=this,t=v._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":v.$parent.slotKey}},[t("h1",{attrs:{id:"rn-自定义组件支持"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rn-自定义组件支持"}},[v._v("#")]),v._v(" RN 自定义组件支持")]),v._v(" "),t("p",[v._v("创建自定义组件在 RN 环境下部分实例方法、属性存在兼容性问题不支持，\n此文档以微信小程序为参照，会详细列出各方法、属性的支持度。")]),v._v(" "),t("h2",{attrs:{id:"参数"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#参数"}},[v._v("#")]),v._v(" 参数")]),v._v(" "),t("h3",{attrs:{id:"组件定义属性说明"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#组件定义属性说明"}},[v._v("#")]),v._v(" 组件定义属性说明")]),v._v(" "),t("table",[t("thead",[t("tr",[t("th",[v._v("属性")]),v._v(" "),t("th",[v._v("类型")]),v._v(" "),t("th",[v._v("RN 是否支持")]),v._v(" "),t("th",[v._v("描述")])])]),v._v(" "),t("tbody",[t("tr",[t("td",[v._v("properties")]),v._v(" "),t("td",[v._v("Object Map")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件的对外属性，是属性名到属性设置的映射表")])]),v._v(" "),t("tr",[t("td",[v._v("data")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件的内部数据，和 "),t("code",[v._v("properties")]),v._v(" 一同用于组件的模板渲染")])]),v._v(" "),t("tr",[t("td",[v._v("observers")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件数据字段监听器，用于监听 "),t("code",[v._v("properties")]),v._v(" 和 "),t("code",[v._v("data")]),v._v(" 的变化")])]),v._v(" "),t("tr",[t("td",[v._v("methods")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用")])]),v._v(" "),t("tr",[t("td",[v._v("behaviors")]),v._v(" "),t("td",[v._v("String Array")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("created")]),v._v(" "),t("td",[v._v("Function")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 "),t("code",[v._v("setData")])])]),v._v(" "),t("tr",[t("td",[v._v("attached")]),v._v(" "),t("td",[v._v("Function")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件生命周期函数-在组件实例进入页面节点树时执行")])]),v._v(" "),t("tr",[t("td",[v._v("ready")]),v._v(" "),t("td",[v._v("Function")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件生命周期函数-在组件布局完成后执行")])]),v._v(" "),t("tr",[t("td",[v._v("moved")]),v._v(" "),t("td",[v._v("Function")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("RN 不支持，组件生命周期函数-在组件实例被移动到节点树另一个位置时执行")])]),v._v(" "),t("tr",[t("td",[v._v("detached")]),v._v(" "),t("td",[v._v("Function")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件生命周期函数-在组件实例被从页面节点树移除时执行")])]),v._v(" "),t("tr",[t("td",[v._v("relations")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("externalClasses")]),v._v(" "),t("td",[v._v("String Array")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("options")]),v._v(" "),t("td",[v._v("Object Map")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 不支持，一些选项，诸如 multipleSlots、virtualHost、pureDataPattern，这些功能输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("lifetimes")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件生命周期声明对象")])]),v._v(" "),t("tr",[t("td",[v._v("pageLifetimes")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("组件所在页面的生命周期声明对象")])])])]),v._v(" "),t("h3",{attrs:{id:"组件实例属性与方法"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#组件实例属性与方法"}},[v._v("#")]),v._v(" 组件实例属性与方法")]),v._v(" "),t("p",[v._v("生成的组件实例可以在组件的方法、生命周期函数中通过 this 访问。组件包含一些通用属性和方法。")]),v._v(" "),t("table",[t("thead",[t("tr",[t("th",[v._v("属性名")]),v._v(" "),t("th",[v._v("类型")]),v._v(" "),t("th",[v._v("RN 是否支持")]),v._v(" "),t("th",[v._v("描述")])])]),v._v(" "),t("tbody",[t("tr",[t("td",[v._v("is")]),v._v(" "),t("td",[v._v("String")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持，未来支持, 组件的文件路径")])]),v._v(" "),t("tr",[t("td",[v._v("id")]),v._v(" "),t("td",[v._v("String")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("节点id")])]),v._v(" "),t("tr",[t("td",[v._v("dataset")]),v._v(" "),t("td",[v._v("String")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("节点dataset")])]),v._v(" "),t("tr",[t("td",[v._v("data")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("组件数据，通过 this 直接访问")])]),v._v(" "),t("tr",[t("td",[v._v("properties")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("组件props，通过 this 直接访问")])]),v._v(" "),t("tr",[t("td",[v._v("router")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持")])]),v._v(" "),t("tr",[t("td",[v._v("pageRouter")]),v._v(" "),t("td",[v._v("Object")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持")])]),v._v(" "),t("tr",[t("td",[v._v("renderer")]),v._v(" "),t("td",[v._v("string")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持")])])])]),v._v(" "),t("p",[v._v("微信小程序原生方法")]),v._v(" "),t("table",[t("thead",[t("tr",[t("th",[v._v("方法名")]),v._v(" "),t("th",[v._v("RN是否支持")]),v._v(" "),t("th",[v._v("参数")]),v._v(" "),t("th",[v._v("描述")])])]),v._v(" "),t("tbody",[t("tr",[t("td",[v._v("setData")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("Object newData")]),v._v(" "),t("td",[v._v("设置data并执行视图层渲染")])]),v._v(" "),t("tr",[t("td",[v._v("hasBehavior")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("Object behavior")]),v._v(" "),t("td",[v._v("检查组件是否具有 behavior")])]),v._v(" "),t("tr",[t("td",[v._v("triggerEvent")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("String name, Object detail, Object options")]),v._v(" "),t("td",[v._v("触发事件")])]),v._v(" "),t("tr",[t("td",[v._v("createSelectorQuery")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td"),v._v(" "),t("td",[v._v("输出 RN 暂不支持，未来支持，建议使用 ref")])]),v._v(" "),t("tr",[t("td",[v._v("createIntersectionObserver")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td"),v._v(" "),t("td",[v._v("输出 RN 暂不支持")])]),v._v(" "),t("tr",[t("td",[v._v("selectComponent")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("String selector")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持，未来支持，建议使用 ref")])]),v._v(" "),t("tr",[t("td",[v._v("selectAllComponents")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("String selector")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持，未来支持，建议使用 ref")])]),v._v(" "),t("tr",[t("td",[v._v("selectOwnerComponent")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td"),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("getRelationNodes")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("String relationKey")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("groupSetData")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("Function callback")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("getTabBar")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td"),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("getPageId")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td"),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("animate")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("String selector, Array keyframes, ...")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("clearAnimation")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("String selector, Object options, ...")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])])])]),v._v(" "),t("p",[v._v("Mpx 框架增强实例方法")]),v._v(" "),t("table",[t("thead",[t("tr",[t("th",[v._v("方法名")]),v._v(" "),t("th",[v._v("RN是否支持")]),v._v(" "),t("th",[v._v("描述")])])]),v._v(" "),t("tbody",[t("tr",[t("td",[v._v("$set")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新")])]),v._v(" "),t("tr",[t("td",[v._v("$watch")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("观察 Mpx 实例上的一个表达式或者一个函数计算结果的变化")])]),v._v(" "),t("tr",[t("td",[v._v("$delete")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("删除对象属性，如果该对象是响应式的，那么该方法可以触发观察器更新（视图更新")])]),v._v(" "),t("tr",[t("td",[v._v("$refs")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("一个对象，持有注册过 ref的所有 DOM 元素和组件实例，调用响应的组件方法或者获取视图节点信息。")])]),v._v(" "),t("tr",[t("td",[v._v("$asyncRefs")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 不支持")])]),v._v(" "),t("tr",[t("td",[v._v("$forceUpdate")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("用于强制刷新视图，不常用，通常建议使用响应式数据驱动视图更新")])]),v._v(" "),t("tr",[t("td",[v._v("$nextTick")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("在下次 DOM 更新循环结束之后执行延迟回调函数，用于等待 Mpx 完成状态更新和 DOM 更新后再执行某些操作")])]),v._v(" "),t("tr",[t("td",[v._v("$i18n")]),v._v(" "),t("td",[v._v("否")]),v._v(" "),t("td",[v._v("输出 RN 暂不支持，国际化功能访问器，用于获取多语言字符串资源")])]),v._v(" "),t("tr",[t("td",[v._v("$rawOptions")]),v._v(" "),t("td",[v._v("是")]),v._v(" "),t("td",[v._v("访问组件原始选项对象")])])])])])}),[],!1,null,null,null);t.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/118.9cbac09e.js b/docs-vuepress/.vuepress/dist/assets/js/118.9cbac09e.js
deleted file mode 100644
index 76b64985be..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/118.9cbac09e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[118],{467:function(t,a,s){"use strict";s.r(a);var r=s(4),n=Object(r.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"mpx转rn样式使用指南"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mpx转rn样式使用指南"}},[t._v("#")]),t._v(" Mpx转RN样式使用指南")]),t._v(" "),a("p",[t._v("RN 的样式的支持基本为 web 样式的一个子集，同时还有一些属性并未与 web 对齐，因此跨平台输出 RN 时，为了保障多端输出样式一致，可参考本文针对样式在RN上的支持情况来进行样式编写。")]),t._v(" "),a("h2",{attrs:{id:"样式编写限制"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#样式编写限制"}},[t._v("#")]),t._v(" 样式编写限制")]),t._v(" "),a("h3",{attrs:{id:"选择器"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#选择器"}},[t._v("#")]),t._v(" 选择器")]),t._v(" "),a("p",[t._v("RN 环境下仅支持以下类名选择器，不支持逗号之外的组合选择器。")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".classname")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".classA, .classB")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h3",{attrs:{id:"布局"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#布局"}},[t._v("#")]),t._v(" 布局")]),t._v(" "),a("p",[t._v("在 RN 中布局方式有限制，像 block inline inline-block 和 fixed 等都不支持，支持的布局方式如下：")]),t._v(" "),a("h4",{attrs:{id:"flex"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex"}},[t._v("#")]),t._v(" flex")]),t._v(" "),a("p",[t._v("在RN中，常规的组件元素可以用过 flex 布局来实现，"),a("a",{attrs:{href:"https://reactnative.dev/docs/layout-props#flex",target:"_blank",rel:"noopener noreferrer"}},[t._v("参考文档"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("p",[a("strong",[t._v("注")]),t._v("：RN中view标签的主轴是column，和css不一致，使用mpx开发设置"),a("code",[t._v("dispay:flex")]),t._v("时，会默认的主轴方向是row。")]),t._v(" "),a("h4",{attrs:{id:"relative-absolute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#relative-absolute"}},[t._v("#")]),t._v(" relative/absolute")]),t._v(" "),a("p",[t._v("在 RN 中 position 仅支持 relative（默认）和 absolute，可"),a("a",{attrs:{href:"https://reactnative.dev/docs/layout-props#position",target:"_blank",rel:"noopener noreferrer"}},[t._v("参考文档"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h3",{attrs:{id:"样式单位"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#样式单位"}},[t._v("#")]),t._v(" 样式单位")]),t._v(" "),a("h4",{attrs:{id:"number-类型值"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#number-类型值"}},[t._v("#")]),t._v(" number 类型值")]),t._v(" "),a("p",[t._v("RN 环境中，number 数值型单位支持 px rpx % 三种，web 下的 vw em rem 等不支持。")]),t._v(" "),a("h4",{attrs:{id:"color-类型值"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-类型值"}},[t._v("#")]),t._v(" color 类型值")]),t._v(" "),a("p",[t._v("RN 环境支持大部分 css 中 color 定义方式，仅少量不支持，详情参考 RN 文档 https://reactnative.dev/docs/colors")]),t._v(" "),a("h2",{attrs:{id:"组件样式规则"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件样式规则"}},[t._v("#")]),t._v(" 组件样式规则")]),t._v(" "),a("p",[t._v("在web和RN下组件的渲染会存在一些差异的地方，比如默认样式不一致、继承的关系不一致等。框架针对这些不一致进行了抹平工作，但是仍旧存在一些使用限制，具体参考以下组件节点的介绍。")]),t._v(" "),a("h3",{attrs:{id:"text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text"}},[t._v("#")]),t._v(" text")]),t._v(" "),a("p",[t._v("RN中，文本节点需要通过Text组件来创建文本节点。文本节点需要给Text组件来设定"),a("a",{attrs:{href:"https://reactnative.dev/docs/text-style-props",target:"_blank",rel:"noopener noreferrer"}},[t._v("属性"),a("OutboundLink")],1),t._v("来调整文本的外观。")]),t._v(" "),a("p",[t._v("Web/小程序中，文本节点可以通过div/view节点进行直接包裹，在div/view标签上设定对应文本样式即可。不需单独包裹text节点。")]),t._v(" "),a("p",[t._v("框架抹平了此部分的差异，但仍因受限于RN内text的样式"),a("a",{attrs:{href:"https://reactnative.dev/docs/text#limited-style-inheritance",target:"_blank",rel:"noopener noreferrer"}},[t._v("继承原则的限制"),a("OutboundLink")],1),t._v("，通过在祖先节点来设置文本节点的样式仍旧无法生效。具体例子说明如下")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrapper"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我是文本"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n.wrapper {\n    font-size: 20px;\n}\n.content {\n    text-align: right;\n}\n/** 以上例子中\nweb渲染效果: 字体的大小为20px，文字居右 \n转RN之后渲染效果: 字体大小为默认大小，文字居右\n*/\n\n")])])]),a("p",[a("strong",[t._v("限制与使用说明")])]),t._v(" "),a("ol",[a("li",[t._v("无法通过设置祖先节点的样式来修改文本节点的样式，只可通过修改直接包裹文本的节点来修改文本的样式。")]),t._v(" "),a("li",[t._v("框架处理将文本节点样式的默认值与web进行了对齐，如果需要按照RN的默认值来进行渲染，可设置"),a("code",[t._v("disable-default-style")]),t._v("为"),a("code",[t._v("true")])])]),t._v(" "),a("h3",{attrs:{id:"view"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#view"}},[t._v("#")]),t._v(" view")]),t._v(" "),a("p",[t._v("background、background-image、background-size、background-repeat仅在view标签下支持，background-color在其他标签上也支持。")]),t._v(" "),a("p",[a("strong",[t._v("各属性支持的类型")])]),t._v(" "),a("ul",[a("li",[t._v("background - 仅支持 background-image | background-color | background-size | background-repeat，每个属性支持情况，可参考下面的介绍。")]),t._v(" "),a("li",[t._v("background-image - 仅支持 <url()>。")]),t._v(" "),a("li",[t._v("background-size - 支持px|rpx|%，也支持枚举值 contain|cover|auto； 不支持两个以上的值进行设置。")]),t._v(" "),a("li",[t._v("backgroundno-repeat - 仅支持值为no-repeat。")]),t._v(" "),a("li",[t._v("backfround-color - 参考"),a("a",{attrs:{href:"https://reactnative.dev/docs/colors",target:"_blank",rel:"noopener noreferrer"}},[t._v("Color"),a("OutboundLink")],1)])]),t._v(" "),a("p",[a("strong",[t._v("支持的语法")])]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 1. background **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token url"}},[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" pink contain no-repeat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token url"}},[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" pink"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("linear-gradient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 2. background-image **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token url"}},[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("linear-gradient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 3. background-size **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50% 25%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" contain"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cover"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20px auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n/ * 不支持 * /\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 25%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 25%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 4. background-repeat **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-repeat")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" no-repeat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-repeat")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" repeat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 5. background-color **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-repeat")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"样式参考"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#样式参考"}},[t._v("#")]),t._v(" 样式参考")]),t._v(" "),a("h3",{attrs:{id:"layout-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-style"}},[t._v("#")]),t._v(" Layout Style")]),t._v(" "),a("h4",{attrs:{id:"position"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#position"}},[t._v("#")]),t._v(" position")]),t._v(" "),a("p",[t._v("设置元素的定位样式\n"),a("strong",[t._v("值支持类型")]),t._v("\nenum: absolute, relative， 默认relative。")]),t._v(" "),a("h5",{attrs:{id:"语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" absolute"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" relative"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n")])])]),a("h4",{attrs:{id:"top-right-left-bottom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#top-right-left-bottom"}},[t._v("#")]),t._v(" top|right|left|bottom")]),t._v(" "),a("p",[t._v("设置元素的不同方向的偏移量")]),t._v(" "),a("h5",{attrs:{id:"值支持类型"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: px,rpx,%")]),t._v(" "),a("h5",{attrs:{id:"语法-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-2"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"z-index"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#z-index"}},[t._v("#")]),t._v(" z-index")]),t._v(" "),a("p",[t._v("控制着元素的堆叠覆盖顺序。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-2"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number")]),t._v(" "),a("h5",{attrs:{id:"语法-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-3"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("z-index")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"display"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#display"}},[t._v("#")]),t._v(" display")]),t._v(" "),a("p",[t._v("设置元素的布局方式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-3"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("flex/none")]),t._v(" "),a("h5",{attrs:{id:"语法-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-4"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 默认 */")]),t._v(" \n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("flex\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 隐藏 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("none\n")])])]),a("h4",{attrs:{id:"align-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#align-content"}},[t._v("#")]),t._v(" align-content")]),t._v(" "),a("p",[t._v("设置多根轴线的对齐方式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-4"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: flex-start, flex-end, center, stretch, space-between, space-around, space-evenly")]),t._v(" "),a("h5",{attrs:{id:"语法-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-5"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-start"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-end"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" stretch"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" space-between"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" space-around"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" space-evenly"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" safe center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-content")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" unsafe center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"align-items"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#align-items"}},[t._v("#")]),t._v(" align-items")]),t._v(" "),a("p",[t._v("设置单根轴线上的子元素的对齐方式。默认会是交叉轴上的。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-5"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: flex-start, flex-end, center, stretch, baseline")]),t._v(" "),a("h5",{attrs:{id:"语法-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-6"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-start"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-end"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" stretch"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" baseline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" first baseline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" last baseline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"align-self"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#align-self"}},[t._v("#")]),t._v(" align-self")]),t._v(" "),a("p",[t._v("设置单个子元素在单根轴线上的对齐方式")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-6"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: auto, flex-start, flex-end, center, stretch, baseline")]),t._v(" "),a("h5",{attrs:{id:"语法-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-7"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-start"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex-end"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" stretch"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" baseline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" first baseline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" last baseline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"flex-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-2"}},[t._v("#")]),t._v(" flex")]),t._v(" "),a("p",[t._v("仅支持 flex-grow | flex-shrink | flex-basis 这种顺序，值以空格分隔按顺序赋值")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-7"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("flex: number number px/rpx")]),t._v(" "),a("h5",{attrs:{id:"语法-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-8"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 简写 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* flex-grow | flex-shrink | flex-basis */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 1 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"flex-grow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-grow"}},[t._v("#")]),t._v(" flex-grow")]),t._v(" "),a("p",[t._v("设置子盒子的放大比例")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-8"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number")]),t._v(" "),a("h5",{attrs:{id:"语法-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-9"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-grow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"flex-shrink"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-shrink"}},[t._v("#")]),t._v(" flex-shrink")]),t._v(" "),a("p",[t._v("设置子盒子的缩放比例。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-9"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number")]),t._v(" "),a("h5",{attrs:{id:"语法-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-10"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-shrink")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"flex-basis"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-basis"}},[t._v("#")]),t._v(" flex-basis")]),t._v(" "),a("p",[t._v("设置在分配多余空间之前，子盒子的初始主轴尺寸。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-10"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number px|rpx|%")]),t._v(" "),a("h5",{attrs:{id:"语法-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-11"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-shrink")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-shrink")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-shrink")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"flex-direction"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-direction"}},[t._v("#")]),t._v(" flex-direction")]),t._v(" "),a("p",[t._v("设置主轴的方向。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-11"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: row, row-reverse, column, column-reverse")]),t._v(" "),a("h5",{attrs:{id:"语法-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-12"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" row"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" row-reverse"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" column"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" column-reverse"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n")])])]),a("h4",{attrs:{id:"flex-wrap"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-wrap"}},[t._v("#")]),t._v(" flex-wrap")]),t._v(" "),a("p",[t._v("设置元素是否换行。当值为wrap时，alignItems：center不生效。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-12"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: wrap, nowrap, wrap-reverse")]),t._v(" "),a("h5",{attrs:{id:"语法-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-13"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-wrap")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" wrap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-wrap")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" nowrap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-wrap")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" wrap-reverse"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"flex-flow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#flex-flow"}},[t._v("#")]),t._v(" flex-flow")]),t._v(" "),a("p",[t._v("是flex-direction flex-wrap 缩写，仅支持 flex-flow: flex-direction flex-wrap 这种顺序，值以空格分隔按顺序赋值")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* flex-direction */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-flow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" row"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* flex-direction|  flex-wrap*/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-flow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" row nowrap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"view-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#view-style"}},[t._v("#")]),t._v(" View Style")]),t._v(" "),a("h4",{attrs:{id:"margin"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#margin"}},[t._v("#")]),t._v(" margin")]),t._v(" "),a("p",[t._v("margin 是 margin-top|margin-right|margin-left|margin-bottom 的缩写模式, 目前仅支持四种缩写模式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-13"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("string: 'auto'\nnumber: rpx，px, %")]),t._v(" "),a("h5",{attrs:{id:"语法-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-14"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top and bottom | left and right */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 5% auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top | left and right | bottom */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1rpx auto 2rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top | right | bottom | left */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1rpx 2rpx 2rpx "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"margin-top-margin-bottom-margin-right-margin-left"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#margin-top-margin-bottom-margin-right-margin-left"}},[t._v("#")]),t._v(" margin-top|margin-bottom|margin-right|margin-left")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-14"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: rpx，px, %")]),t._v(" "),a("h5",{attrs:{id:"语法-15"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-15"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"padding"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#padding"}},[t._v("#")]),t._v(" padding")]),t._v(" "),a("p",[t._v("padding是padding-left、padding-right、padding-left、padding-bottom的缩写模式, 目前仅支持四种缩写模式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-15"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-15"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("string: 'auto'\nnumber: rpx，px, %")]),t._v(" "),a("h5",{attrs:{id:"语法-16"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-16"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top and bottom | left and right */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 5% 10%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top | left and right | bottom */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1rpx 0 2rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top | right | bottom | left */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1rpx 2rpx 2rpx "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"padding-top-padding-bottom-padding-left-padding-right"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#padding-top-padding-bottom-padding-left-padding-right"}},[t._v("#")]),t._v(" padding-top|padding-bottom|padding-left|padding-right")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-16"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-16"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: rpx，px, %")]),t._v(" "),a("h5",{attrs:{id:"语法-17"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-17"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** padding-top **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding-top")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border"}},[t._v("#")]),t._v(" border")]),t._v(" "),a("p",[t._v("border 是 border-width|border-style|border-color 的缩写模式, 目前仅支持 width | style | color 这种排序，值以空格分隔按顺序赋值")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* width | style | color */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px double pink"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-color"}},[t._v("#")]),t._v(" border-color")]),t._v(" "),a("p",[t._v("设置边框的颜色, 目前只支持统一设置，不支持缩写。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-17"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-17"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("color: 参考"),a("a",{attrs:{href:"https://reactnative.dev/docs/colors",target:"_blank",rel:"noopener noreferrer"}},[t._v("Color"),a("OutboundLink")],1)]),t._v(" "),a("h5",{attrs:{id:"语法-18"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-18"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all border */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-style"}},[t._v("#")]),t._v(" border-style")]),t._v(" "),a("p",[t._v("设置边框的样式, 目前只支持统一设置，不支持缩写。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-18"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-18"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: solid|dotted|dashed")]),t._v(" "),a("h5",{attrs:{id:"语法-19"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-19"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all border */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'solid'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'dotted'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'dashed'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" double"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" groove"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" ridge"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dotted solid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" hidden double dashed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none solid dotted dashed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-width"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-width"}},[t._v("#")]),t._v(" border-width")]),t._v(" "),a("p",[t._v("设置边框的宽度，目前只支持统一设置，不支持缩写。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-19"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-19"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: px rpx %")]),t._v(" "),a("h5",{attrs:{id:"语法-20"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-20"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all border */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-top-color-border-bottom-color-border-left-color-border-right-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-top-color-border-bottom-color-border-left-color-border-right-color"}},[t._v("#")]),t._v(" border-top-color|border-bottom-color|border-left-color|border-right-color")]),t._v(" "),a("p",[t._v("设置各边框的颜色")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-20"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-20"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("color: 参考"),a("a",{attrs:{href:"https://reactnative.dev/docs/colors",target:"_blank",rel:"noopener noreferrer"}},[t._v("Color"),a("OutboundLink")],1)]),t._v(" "),a("h5",{attrs:{id:"语法-21"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-21"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-top-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-top-width-border-bottom-width-border-left-width-border-right-width"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-top-width-border-bottom-width-border-left-width-border-right-width"}},[t._v("#")]),t._v(" border-top-width|border-bottom-width|border-left-width|border-right-width")]),t._v(" "),a("p",[t._v("设置各边框的宽度")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-21"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-21"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: px rpx")]),t._v(" "),a("h5",{attrs:{id:"语法-22"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-22"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-top-width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-radius"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-radius"}},[t._v("#")]),t._v(" border-radius")]),t._v(" "),a("p",[t._v("设置border的圆角格式，支持一种缩写方式")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-22"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-22"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("仅支持 border-radius 0px|border-radius 0px 0px 0px 0px（值以空格分隔按顺序赋值）\nnumber: px rpx %")]),t._v(" "),a("h5",{attrs:{id:"语法-23"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-23"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* top-left | top-right | bottom-right | bottom-left */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px 10px 10px 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"border-bottom-left-radius-border-bottom-right-radius-border-top-left-radius-border-top-right-radius"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-bottom-left-radius-border-bottom-right-radius-border-top-left-radius-border-top-right-radius"}},[t._v("#")]),t._v(" border-bottom-left-radius|border-bottom-right-radius|border-top-left-radius|border-top-right-radius")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-23"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-23"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: px rpx %")]),t._v(" "),a("h5",{attrs:{id:"语法-24"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-24"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-bottom-left-radius")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"text-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-style"}},[t._v("#")]),t._v(" Text Style")]),t._v(" "),a("h4",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color"}},[t._v("#")]),t._v(" color")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-24"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-24"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("color: 参考"),a("a",{attrs:{href:"https://reactnative.dev/docs/colors",target:"_blank",rel:"noopener noreferrer"}},[t._v("Color"),a("OutboundLink")],1)]),t._v(" "),a("h5",{attrs:{id:"语法-25"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-25"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" orange"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fafafa"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgb")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 99"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 71"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"font-family"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family"}},[t._v("#")]),t._v(" font-family")]),t._v(" "),a("p",[t._v("可设置系统字体，引入字体文件，暂时不支持。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-25"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-25"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("string")]),t._v(" "),a("h5",{attrs:{id:"语法-26"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-26"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-family")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"PingFangSC-Regular"')]),t._v("\n")])])]),a("h4",{attrs:{id:"font-size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-size"}},[t._v("#")]),t._v(" font-size")]),t._v(" "),a("p",[t._v("可设置字体的大小")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-26"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-26"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number: px,rpx")]),t._v(" "),a("h5",{attrs:{id:"语法-27"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-27"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 12px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 12rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"font-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-style"}},[t._v("#")]),t._v(" font-style")]),t._v(" "),a("p",[t._v("设置文本的字体样式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-27"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-27"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: normal，italic")]),t._v(" "),a("h5",{attrs:{id:"语法-28"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-28"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" italic"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" normal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"font-weight"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-weight"}},[t._v("#")]),t._v(" font-weight")]),t._v(" "),a("p",[t._v("设置文字的权重。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-28"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-28"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: 100，200，300，400，500，600，800，900,normal,bold")]),t._v(" "),a("h5",{attrs:{id:"语法-29"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-29"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 200"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 300"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 400"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 500"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 600"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 700"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 800"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 900"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" normal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bold"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"font-variant"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-variant"}},[t._v("#")]),t._v(" font-variant")]),t._v(" "),a("p",[t._v("设置文本的字体变体")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-29"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-29"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums")]),t._v(" "),a("h5",{attrs:{id:"语法-30"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-30"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" small-caps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" oldstyle-nums"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" lining-nums"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" tabular-nums"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" lining-nums"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-variant")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" proportional-nums"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"letter-spacing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#letter-spacing"}},[t._v("#")]),t._v(" letter-spacing")]),t._v(" "),a("p",[t._v("定义字符之间的间距")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-30"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-30"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("px,rpx")]),t._v(" "),a("h5",{attrs:{id:"语法-31"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-31"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("letter-spacing")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("letter-spacing")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2rpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"line-height"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#line-height"}},[t._v("#")]),t._v(" line-height")]),t._v(" "),a("p",[t._v("设置行高。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-31"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-31"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("px,rpx,%")]),t._v(" "),a("h5",{attrs:{id:"语法-32"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-32"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("line-height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 16px\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("line-height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 16rpx\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("line-height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("line-height")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1\n")])])]),a("h4",{attrs:{id:"text-align"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-align"}},[t._v("#")]),t._v(" text-align")]),t._v(" "),a("p",[t._v("设置文本的水平对齐方式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-32"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-32"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: left, right, center, justify")]),t._v(" "),a("h5",{attrs:{id:"语法-33"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-33"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" left"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" right"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" justify"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" match-parent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" justify-all"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"text-decoration-line"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-decoration-line"}},[t._v("#")]),t._v(" text-decoration-line")]),t._v(" "),a("p",[t._v("设置文本的装饰线样式。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-33"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-33"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: none, underline, line-through, underline line-through")]),t._v(" "),a("h5",{attrs:{id:"语法-34"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-34"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-decoration-line")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-decoration-line")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" underline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-decoration-line")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" line-through"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-decoration-line")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" underline line-through"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-decoration-line")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" overline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"text-transform"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-transform"}},[t._v("#")]),t._v(" text-transform")]),t._v(" "),a("p",[t._v("设置文本的大小写转换。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-34"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-34"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: none, uppercase, lowercase, capitalize")]),t._v(" "),a("h5",{attrs:{id:"语法-35"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-35"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" uppercase"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" lowercase"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" capitalize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 不支持 **/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" uppercase"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" lowercase"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-transform")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" capitalize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"text-shadow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#text-shadow"}},[t._v("#")]),t._v(" text-shadow")]),t._v(" "),a("p",[t._v("设置文本阴影")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-35"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-35"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("仅支持 offset-x | offset-y | blur-radius | color 排序，值以空格分隔按顺序赋值")]),t._v(" "),a("h5",{attrs:{id:"语法-36"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-36"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1rpx 3rpx 0 #2E0C02"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"background-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background-style"}},[t._v("#")]),t._v(" Background Style")]),t._v(" "),a("p",[t._v("背景相关的属性")]),t._v(" "),a("h4",{attrs:{id:"background-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background-color"}},[t._v("#")]),t._v(" background-color")]),t._v(" "),a("p",[t._v("表示背景色，可以在任何标签上使用。")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-36"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-36"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("color: 参考"),a("a",{attrs:{href:"https://reactnative.dev/docs/colors",target:"_blank",rel:"noopener noreferrer"}},[t._v("Color"),a("OutboundLink")],1)]),t._v(" "),a("h5",{attrs:{id:"语法-37"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-37"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* all border */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"background-image"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background-image"}},[t._v("#")]),t._v(" background-image")]),t._v(" "),a("p",[t._v("表示背景图，只能在view上使用")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-37"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-37"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("仅支持 <url()>")]),t._v(" "),a("h5",{attrs:{id:"语法-38"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-38"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token url"}},[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("linear-gradient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"background-size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background-size"}},[t._v("#")]),t._v(" background-size")]),t._v(" "),a("p",[t._v("表示背景大小，只能在view上使用")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-38"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-38"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("number 支持 px|rpx|%，枚举值支持 contain|cover|auto；\n支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto；\n支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度；\n不支持逗号分隔的多个值：设置多重背景!!!")]),t._v(" "),a("h5",{attrs:{id:"语法-39"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-39"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50% 25%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" contain"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cover"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20px auto"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n/ * 不支持 * /\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 25%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 25%"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h4",{attrs:{id:"background-repeat"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background-repeat"}},[t._v("#")]),t._v(" background-repeat")]),t._v(" "),a("p",[t._v("表示背景图是否重复，只能在view上使用")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-39"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-39"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("enum: no-repeat")]),t._v(" "),a("h5",{attrs:{id:"语法-40"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-40"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-repeat")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" no-repeat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-repeat")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" repeat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n")])])]),a("h4",{attrs:{id:"background"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#background"}},[t._v("#")]),t._v(" background")]),t._v(" "),a("p",[t._v("表示背景的组合属性，只能在view上使用")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-40"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-40"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("仅支持 background-image | background-color | background-size | background-repeat，具体每个属性的支持情况参见上面具体属性支持的文档")]),t._v(" "),a("h5",{attrs:{id:"语法-41"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-41"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token url"}},[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" pink no-repeat"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token url"}},[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" pink"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 不支持 */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("linear-gradient")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 255"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0.5"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"shadow-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shadow-style"}},[t._v("#")]),t._v(" Shadow Style")]),t._v(" "),a("h4",{attrs:{id:"box-shadow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#box-shadow"}},[t._v("#")]),t._v(" box-shadow")]),t._v(" "),a("p",[t._v("此属性是阴影颜色、阴影的偏移量")]),t._v(" "),a("h5",{attrs:{id:"值支持类型-41"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#值支持类型-41"}},[t._v("#")]),t._v(" 值支持类型")]),t._v(" "),a("p",[t._v("仅支持 offset-x | offset-y | blur-radius | color 排序，值以空格分隔按顺序赋值")]),t._v(" "),a("h5",{attrs:{id:"语法-42"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#语法-42"}},[t._v("#")]),t._v(" 语法")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* offset-x | offset-y | blur-radius | color */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 1px 3px "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("139"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0.32"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"附录"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#附录"}},[t._v("#")]),t._v(" 附录")]),t._v(" "),a("h3",{attrs:{id:"rn-不支持的属性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rn-不支持的属性"}},[t._v("#")]),t._v(" RN 不支持的属性")]),t._v(" "),a("p",[t._v("若设置以下不支持的属性会被 mpx 编译处理时丢弃，有编译 error 提示")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("描述")]),t._v(" "),a("th",[t._v("不支持的属性")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("双端都不支持")]),t._v(" "),a("td",[t._v("box-sizing white-space text-overflow animation transition")])]),t._v(" "),a("tr",[a("td",[t._v("ios 不支持")]),t._v(" "),a("td",[t._v("vertical-align")])]),t._v(" "),a("tr",[a("td",[t._v("android 不支持")]),t._v(" "),a("td",[t._v("text-decoration-style text-decoration-color shadow-offset shadow-opacity shadow-radius")])])])]),t._v(" "),a("h3",{attrs:{id:"rn-支持的枚举值"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rn-支持的枚举值"}},[t._v("#")]),t._v(" RN 支持的枚举值")]),t._v(" "),a("p",[t._v("RN 支持的枚举值映射如下表，其他不支持的枚举值会被 mpx 编译处理时丢弃，设置无效")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("prop")]),t._v(" "),a("th",[t._v("value 枚举")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("overflow")]),t._v(" "),a("td",[t._v("visible hidden scroll")])]),t._v(" "),a("tr",[a("td",[t._v("border-style")]),t._v(" "),a("td",[t._v("solid dotted dashed")])]),t._v(" "),a("tr",[a("td",[t._v("display")]),t._v(" "),a("td",[t._v("flex none")])]),t._v(" "),a("tr",[a("td",[t._v("pointer-events")]),t._v(" "),a("td",[t._v("auto none")])]),t._v(" "),a("tr",[a("td",[t._v("position")]),t._v(" "),a("td",[t._v("relative absolute")])]),t._v(" "),a("tr",[a("td",[t._v("vertical-align")]),t._v(" "),a("td",[t._v("auto top bottom center")])]),t._v(" "),a("tr",[a("td",[t._v("font-variant")]),t._v(" "),a("td",[t._v("small-caps oldstyle-nums lining-nums tabular-nums proportional-nums")])]),t._v(" "),a("tr",[a("td",[t._v("text-align")]),t._v(" "),a("td",[t._v("left right center justify")])]),t._v(" "),a("tr",[a("td",[t._v("font-style")]),t._v(" "),a("td",[t._v("normal italic")])]),t._v(" "),a("tr",[a("td",[t._v("font-weight")]),t._v(" "),a("td",[t._v("normal bold 100-900")])]),t._v(" "),a("tr",[a("td",[t._v("text-decoration-line")]),t._v(" "),a("td",[t._v("none underline line-through 'underline line-through'")])]),t._v(" "),a("tr",[a("td",[t._v("text-transform")]),t._v(" "),a("td",[t._v("none uppercase lowercase capitalize")])]),t._v(" "),a("tr",[a("td",[t._v("user-select")]),t._v(" "),a("td",[t._v("auto text none contain all")])]),t._v(" "),a("tr",[a("td",[t._v("align-content")]),t._v(" "),a("td",[t._v("flex-start flex-end none center stretch space-between space-around")])]),t._v(" "),a("tr",[a("td",[t._v("align-items")]),t._v(" "),a("td",[t._v("flex-start flex-end center stretch baseline")])]),t._v(" "),a("tr",[a("td",[t._v("align-self")]),t._v(" "),a("td",[t._v("auto flex-start flex-end center stretch baseline")])]),t._v(" "),a("tr",[a("td",[t._v("justify-content")]),t._v(" "),a("td",[t._v("flex-start flex-end center space-between space-around space-evenly none")])]),t._v(" "),a("tr",[a("td",[t._v("background-repeat")]),t._v(" "),a("td",[t._v("no-repeat")])])])]),t._v(" "),a("h3",{attrs:{id:"缩写支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#缩写支持"}},[t._v("#")]),t._v(" 缩写支持")]),t._v(" "),a("p",[t._v("RN 仅支持部分常用的缩写形式，具体参加下表：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("缩写属性")]),t._v(" "),a("th",[t._v("支持的缩写格式")]),t._v(" "),a("th",[t._v("备注")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("text-decoration")]),t._v(" "),a("td",[t._v("仅支持 text-decoration-line text-decoration-style text-decoration-color")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值")])]),t._v(" "),a("tr",[a("td",[t._v("margin")]),t._v(" "),a("td",[t._v("margin: 0;margin: 0 auto;margin: 0 auto 10px;margin: 0 10px 10px 20px;")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("padding")]),t._v(" "),a("td",[t._v("padding: 0;padding: 0 auto;padding: 0 auto 10px;padding: 0 10px 10px 20px;")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("text-shadow")]),t._v(" "),a("td",[t._v("仅支持 offset-x offset-y blur-radius color 排序")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值")])]),t._v(" "),a("tr",[a("td",[t._v("border")]),t._v(" "),a("td",[t._v("仅支持 border-width border-style border-color")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值")])]),t._v(" "),a("tr",[a("td",[t._v("box-shadow")]),t._v(" "),a("td",[t._v("仅支持 offset-x offset-y blur-radius color")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值")])]),t._v(" "),a("tr",[a("td",[t._v("flex")]),t._v(" "),a("td",[t._v("仅支持 flex-grow flex-shrink flex-basis")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值")])]),t._v(" "),a("tr",[a("td",[t._v("flex-flow")]),t._v(" "),a("td",[t._v("仅支持 flex-direction flex-wrap")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值")])]),t._v(" "),a("tr",[a("td",[t._v("border-radius")]),t._v(" "),a("td",[t._v("支持 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius")]),t._v(" "),a("td",[t._v("顺序固定，值以空格分隔后按按顺序赋值；当设置 border-radius: 0 相当于同时设置了4个方向")])]),t._v(" "),a("tr",[a("td",[t._v("background")]),t._v(" "),a("td",[t._v("仅支持 background-image  background-color background-repeat")]),t._v(" "),a("td",[t._v("顺序不固定，具体每个属性的支持情况参见上面具体属性支持的文档；")])])])])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/119.312e4c21.js b/docs-vuepress/.vuepress/dist/assets/js/119.312e4c21.js
deleted file mode 100644
index 5177fdf955..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/119.312e4c21.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[119],{468:function(t,v,_){"use strict";_.r(v);var e=_(4),a=Object(e.a)({},(function(){var t=this,v=t._self._c;return v("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[v("h1",{attrs:{id:"mpx转rn模版使用指南"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#mpx转rn模版使用指南"}},[t._v("#")]),t._v(" Mpx转RN模版使用指南")]),t._v(" "),v("h2",{attrs:{id:"模版指令"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#模版指令"}},[t._v("#")]),t._v(" 模版指令")]),t._v(" "),v("p",[t._v("目前 Mpx 输出 React Native 仅支持以下指令，具体使用范围可参考如下文档")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("指令名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("wx:if")]),t._v(" "),v("td",[t._v("根据表达式的值的来有条件地渲染元素")])]),t._v(" "),v("tr",[v("td",[t._v("wx:elif")]),t._v(" "),v("td",[t._v("根据表达式的值的来有条件地渲染元素，前一兄弟元素必须有 wx:if 或 wx:elif")])]),t._v(" "),v("tr",[v("td",[t._v("wx:else")]),t._v(" "),v("td",[t._v("不需要表达式，前一兄弟元素必须有 wx:if 或 wx:elif")])]),t._v(" "),v("tr",[v("td",[t._v("wx:show")]),t._v(" "),v("td",[t._v("根据表达式的值的来有条件地渲染元素，与 wx:if 所不同的是不会移除节点，而是设置节点的 style 为 display: none")])]),t._v(" "),v("tr",[v("td",[t._v("wx:style")]),t._v(" "),v("td",[t._v("动态绑定 style 样式")])]),t._v(" "),v("tr",[v("td",[t._v("wx:class")]),t._v(" "),v("td",[t._v("动态绑定 class 样式")])]),t._v(" "),v("tr",[v("td",[t._v("wx:for")]),t._v(" "),v("td",[t._v("在组件上使用 wx:for 绑定一个数组，即可使数组中各项的数据重复渲染该组件")])]),t._v(" "),v("tr",[v("td",[t._v("wx:for-item")]),t._v(" "),v("td",[t._v("指定数组当前元素的变量名")])]),t._v(" "),v("tr",[v("td",[t._v("wx:for-index")]),t._v(" "),v("td",[t._v("指定数组当前下标的变量名")])]),t._v(" "),v("tr",[v("td",[t._v("wx:key")]),t._v(" "),v("td",[t._v("指定列表中项目的唯一的标识符")])]),t._v(" "),v("tr",[v("td",[t._v("wx:ref")]),t._v(" "),v("td",[t._v("获取节点信息")])]),t._v(" "),v("tr",[v("td",[t._v("mpxTagName")]),t._v(" "),v("td",[t._v("动态转换标签")])]),t._v(" "),v("tr",[v("td",[t._v("component")]),t._v(" "),v("td",[t._v("使用 component is 动态切换组件")])]),t._v(" "),v("tr",[v("td",[t._v("@mode")]),t._v(" "),v("td",[t._v("使用 @ 符号来指定某个节点或属性只在某些平台下有效")])]),t._v(" "),v("tr",[v("td",[t._v("@_mode")]),t._v(" "),v("td",[t._v("隐式属性条件编译，仅控制节点的展示，保留节点属性的平台转换能力")])]),t._v(" "),v("tr",[v("td",[t._v("@env")]),t._v(" "),v("td",[t._v("自定义 env 目标应用，来实现在不同应用下编译产出不同的代码")])])])]),t._v(" "),v("h2",{attrs:{id:"事件编写"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#事件编写"}},[t._v("#")]),t._v(" 事件编写")]),t._v(" "),v("p",[t._v("目前 Mpx 输出 React Native 的事件编写遵循小程序的事件编写规范，支持事件的冒泡及捕获")]),t._v(" "),v("p",[t._v("普通事件绑定")]),t._v(" "),v("div",{staticClass:"language-js extra-class"},[v("pre",{pre:!0,attrs:{class:"language-js"}},[v("code",[v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view bindtap"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap"')]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    Click here"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("\n"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),v("p",[t._v("绑定并阻止事件冒泡")]),t._v(" "),v("div",{staticClass:"language-js extra-class"},[v("pre",{pre:!0,attrs:{class:"language-js"}},[v("code",[v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view catchtap"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap"')]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    Click here"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("\n"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),v("p",[t._v("事件捕获")]),t._v(" "),v("div",{staticClass:"language-js extra-class"},[v("pre",{pre:!0,attrs:{class:"language-js"}},[v("code",[v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view capture"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("bind"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("touchstart"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap1"')]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  outer view\n  "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view capture"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("bind"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("touchstart"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap2"')]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    inner view\n  "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),v("p",[t._v("中断捕获阶段和取消冒泡阶段")]),t._v(" "),v("div",{staticClass:"language-js extra-class"},[v("pre",{pre:!0,attrs:{class:"language-js"}},[v("code",[v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view capture"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("catch"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("touchstart"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handleTap1"')]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  outer view\n"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n")])])]),v("p",[t._v("在此基础上也新增了事件处理内联传参的增强机制。")]),t._v(" "),v("div",{staticClass:"language-html extra-class"},[v("pre",{pre:!0,attrs:{class:"language-html"}},[v("code",[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--Mpx增强语法，模板内联传参，方便简洁--\x3e")]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),v("span",{pre:!0,attrs:{class:"token attr-value"}},[v("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTapInline('b')"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("b"),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),v("span",{pre:!0,attrs:{class:"token script"}},[v("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),v("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接通过参数获取数据，直观方便")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTapInline")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("name")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),v("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name:'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n")])]),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),v("p",[t._v("除此之外，Mpx 也支持了动态事件绑定")]),t._v(" "),v("div",{staticClass:"language-html extra-class"},[v("pre",{pre:!0,attrs:{class:"language-html"}},[v("code",[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--动态事件绑定--\x3e")]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token attr-name"}},[v("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),v("span",{pre:!0,attrs:{class:"token attr-value"}},[v("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{items}}"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),v("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),v("span",{pre:!0,attrs:{class:"token attr-value"}},[v("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap_{{index}}"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{item}}\n"),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),v("span",{pre:!0,attrs:{class:"token script"}},[v("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" data "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 1'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 2'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 3'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Item 4'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_0")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),v("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 1'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_1")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),v("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 2'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_2")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),v("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 3'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),v("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleTap_3")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),v("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),v("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tapped on item 4'")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token tag"}},[v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),v("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),v("p",[t._v("注意事项：")]),t._v(" "),v("p",[t._v("当同一个元素上同时绑定了 catchtap 和 bindtap 事件时:")]),t._v(" "),v("p",[t._v("两个事件都会被触发执行。\n但是是否阻止事件冒泡的行为,会以模板上第一个绑定的事件标识符为准。\n如果第一个绑定的是 catchtap，那么不管后面绑定的是什么,都会阻止事件冒泡。\n如果第一个绑定的是 bindtap，则不会阻止事件冒泡。")]),t._v(" "),v("p",[t._v("同理,如果同一个元素上绑定了 capture-bind:tap 和 bindtap:")]),t._v(" "),v("p",[t._v("事件的执行时机会根据模板上第一个绑定事件的标识符来决定:\n如果第一个绑定的是 capture-bind:tap，则事件会在捕获阶段触发。\n如果第一个绑定的是 bindtap，则事件会在冒泡阶段触发。")]),t._v(" "),v("h2",{attrs:{id:"基础组件"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#基础组件"}},[t._v("#")]),t._v(" 基础组件")]),t._v(" "),v("p",[t._v("目前 Mpx 输出 React Native 仅支持以下组件，具体使用范围可参考如下文档")]),t._v(" "),v("h3",{attrs:{id:"view"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#view"}},[t._v("#")]),t._v(" view")]),t._v(" "),v("p",[t._v("视图容器。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("hover-class")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定按下去的样式类。")])]),t._v(" "),v("tr",[v("td",[t._v("hover-start-time")]),t._v(" "),v("td",[t._v("number")]),t._v(" "),v("td",[t._v("50")]),t._v(" "),v("td",[t._v("按住后多久出现点击态，单位毫秒")])]),t._v(" "),v("tr",[v("td",[t._v("hover-stay-time")]),t._v(" "),v("td",[t._v("number")]),t._v(" "),v("td",[t._v("400")]),t._v(" "),v("td",[t._v("手指松开后点击态保留时间，单位毫秒")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindtap")]),t._v(" "),v("td",[t._v("点击的时候触发")])])])]),t._v(" "),v("h3",{attrs:{id:"text"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#text"}},[t._v("#")]),t._v(" text")]),t._v(" "),v("p",[t._v("文本。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("user-select")]),t._v(" "),v("td",[t._v("boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("文本是否可选。")])]),t._v(" "),v("tr",[v("td",[t._v("disable-default-style")]),t._v(" "),v("td",[t._v("boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("会内置默认样式，比如fontSize为16。设置"),v("code",[t._v("true")]),t._v("可以禁止默认的内置样式。")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindtap")]),t._v(" "),v("td",[t._v("点击的时候触发")])])])]),t._v(" "),v("p",[t._v("注意事项")]),t._v(" "),v("ol",[v("li",[t._v("未包裹 text 标签的文本，会自动包裹 text 标签。")]),t._v(" "),v("li",[t._v("text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段")])]),t._v(" "),v("h3",{attrs:{id:"image"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#image"}},[t._v("#")]),t._v(" image")]),t._v(" "),v("p",[t._v("图片。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("src")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("图片资源地址，支持本地图片资源及 base64 格式数据，暂不支持 svg 格式")])]),t._v(" "),v("tr",[v("td",[t._v("mode")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("scaleToFill")])]),t._v(" "),v("td",[t._v("图片裁剪、缩放的模式，适配微信 image 所有 mode 格式")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("binderror")]),t._v(" "),v("td",[t._v("当错误发生时触发，event.detail = { errMsg }")])]),t._v(" "),v("tr",[v("td",[t._v("bindload")]),t._v(" "),v("td",[t._v("当图片载入完毕时触发，event.detail = { height, width }")])])])]),t._v(" "),v("p",[t._v("注意事项")]),t._v(" "),v("ol",[v("li",[t._v("image 组件默认宽度320px、高度240px")]),t._v(" "),v("li",[t._v("image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分")])]),t._v(" "),v("h3",{attrs:{id:"input"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[t._v("#")]),t._v(" input")]),t._v(" "),v("p",[t._v("输入框。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("输入框的初始内容")])]),t._v(" "),v("tr",[v("td",[t._v("type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("text")])]),t._v(" "),v("td",[t._v("input 的类型，不支持 "),v("code",[t._v("safe-password")]),t._v("、"),v("code",[t._v("nickname")])])]),t._v(" "),v("tr",[v("td",[t._v("password")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否是密码类型")])]),t._v(" "),v("tr",[v("td",[t._v("placeholder")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("输入框为空时占位符")])]),t._v(" "),v("tr",[v("td",[t._v("placeholder-class")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定 placeholder 的样式类，仅支持 color 属性")])]),t._v(" "),v("tr",[v("td",[t._v("placeholder-style")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定 placeholder 的样式，仅支持 color 属性")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否禁用")])]),t._v(" "),v("tr",[v("td",[t._v("maxlength")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("140")])]),t._v(" "),v("td",[t._v("最大输入长度，设置为 -1 的时候不限制最大长度")])]),t._v(" "),v("tr",[v("td",[t._v("auto-focus")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("(即将废弃，请直接使用 focus )自动聚焦，拉起键盘")])]),t._v(" "),v("tr",[v("td",[t._v("focus")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("获取焦点")])]),t._v(" "),v("tr",[v("td",[t._v("confirm-type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("done")])]),t._v(" "),v("td",[t._v("设置键盘右下角按钮的文字，仅在 type='text' 时生效")])]),t._v(" "),v("tr",[v("td",[t._v("confirm-hold")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("点击键盘右下角按钮时是否保持键盘不收起")])]),t._v(" "),v("tr",[v("td",[t._v("cursor")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定 focus 时的光标位置")])]),t._v(" "),v("tr",[v("td",[t._v("cursor-color")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("光标颜色")])]),t._v(" "),v("tr",[v("td",[t._v("selection-start")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("-1")])]),t._v(" "),v("td",[t._v("光标起始位置，自动聚集时有效，需与 selection-end 搭配使用")])]),t._v(" "),v("tr",[v("td",[t._v("selection-end")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("-1")])]),t._v(" "),v("td",[t._v("光标结束位置，自动聚集时有效，需与 selection-start 搭配使用")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindinput")]),t._v(" "),v("td",[t._v("键盘输入时触发，event.detail = { value, cursor }，不支持 "),v("code",[t._v("keyCode")])])]),t._v(" "),v("tr",[v("td",[t._v("bindfocus")]),t._v(" "),v("td",[t._v("输入框聚焦时触发，event.detail = { value }，不支持 "),v("code",[t._v("height")])])]),t._v(" "),v("tr",[v("td",[t._v("bindblur")]),t._v(" "),v("td",[t._v("输入框失去焦点时触发，event.detail = { value }，不支持 "),v("code",[t._v("encryptedValue")]),t._v("、"),v("code",[t._v("encryptError")])])]),t._v(" "),v("tr",[v("td",[t._v("bindconfirm")]),t._v(" "),v("td",[t._v("点击完成按钮时触发，event.detail = { value }")])]),t._v(" "),v("tr",[v("td",[t._v("bind:selectionchange")]),t._v(" "),v("td",[t._v("选区改变事件, event.detail = { selectionStart, selectionEnd }")])])])]),t._v(" "),v("p",[t._v("方法")]),t._v(" "),v("p",[t._v("可通过 "),v("code",[t._v("ref")]),t._v(" 方式调用以下组件实例方法")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("方法名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("focus")]),t._v(" "),v("td",[t._v("使输入框得到焦点")])]),t._v(" "),v("tr",[v("td",[t._v("blur")]),t._v(" "),v("td",[t._v("使输入框失去焦点")])]),t._v(" "),v("tr",[v("td",[t._v("clear")]),t._v(" "),v("td",[t._v("清空输入框的内容")])]),t._v(" "),v("tr",[v("td",[t._v("isFocused")]),t._v(" "),v("td",[t._v("返回值表明当前输入框是否获得了焦点")])])])]),t._v(" "),v("h3",{attrs:{id:"textarea"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#textarea"}},[t._v("#")]),t._v(" textarea")]),t._v(" "),v("p",[t._v("多行输入框。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("输入框内容")])]),t._v(" "),v("tr",[v("td",[t._v("type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("text")])]),t._v(" "),v("td",[t._v("input 的类型，不支持 "),v("code",[t._v("safe-password")]),t._v("、"),v("code",[t._v("nickname")])])]),t._v(" "),v("tr",[v("td",[t._v("placeholder")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("输入框为空时占位符")])]),t._v(" "),v("tr",[v("td",[t._v("placeholder-class")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定 placeholder 的样式类，仅支持 color 属性")])]),t._v(" "),v("tr",[v("td",[t._v("placeholder-style")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定 placeholder 的样式，仅支持 color 属性")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否禁用")])]),t._v(" "),v("tr",[v("td",[t._v("maxlength")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("140")])]),t._v(" "),v("td",[t._v("最大输入长度，设置为 -1 的时候不限制最大长度")])]),t._v(" "),v("tr",[v("td",[t._v("auto-focus")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("(即将废弃，请直接使用 focus )自动聚焦，拉起键盘")])]),t._v(" "),v("tr",[v("td",[t._v("focus")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("获取焦点")])]),t._v(" "),v("tr",[v("td",[t._v("auto-height")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否自动增高，设置 auto-height 时，style.height不生效")])]),t._v(" "),v("tr",[v("td",[t._v("confirm-type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("done")])]),t._v(" "),v("td",[t._v("设置键盘右下角按钮的文字，不支持 "),v("code",[t._v("return")])])]),t._v(" "),v("tr",[v("td",[t._v("confirm-hold")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("点击键盘右下角按钮时是否保持键盘不收起")])]),t._v(" "),v("tr",[v("td",[t._v("cursor")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("指定 focus 时的光标位置")])]),t._v(" "),v("tr",[v("td",[t._v("cursor-color")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("光标颜色")])]),t._v(" "),v("tr",[v("td",[t._v("selection-start")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("-1")])]),t._v(" "),v("td",[t._v("光标起始位置，自动聚集时有效，需与 selection-end 搭配使用")])]),t._v(" "),v("tr",[v("td",[t._v("selection-end")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("-1")])]),t._v(" "),v("td",[t._v("光标结束位置，自动聚集时有效，需与 selection-start 搭配使用")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindinput")]),t._v(" "),v("td",[t._v("键盘输入时触发，event.detail = { value, cursor }，不支持 "),v("code",[t._v("keyCode")])])]),t._v(" "),v("tr",[v("td",[t._v("bindfocus")]),t._v(" "),v("td",[t._v("输入框聚焦时触发，event.detail = { value }，不支持 "),v("code",[t._v("height")])])]),t._v(" "),v("tr",[v("td",[t._v("bindblur")]),t._v(" "),v("td",[t._v("输入框失去焦点时触发，event.detail = { value }，不支持 "),v("code",[t._v("encryptedValue")]),t._v("、"),v("code",[t._v("encryptError")])])]),t._v(" "),v("tr",[v("td",[t._v("bindconfirm")]),t._v(" "),v("td",[t._v("点击完成按钮时触发，event.detail = { value }")])]),t._v(" "),v("tr",[v("td",[t._v("bindlinechange")]),t._v(" "),v("td",[t._v("输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 "),v("code",[t._v("heightRpx")])])]),t._v(" "),v("tr",[v("td",[t._v("bind:selectionchange")]),t._v(" "),v("td",[t._v("选区改变事件, {selectionStart, selectionEnd}")])])])]),t._v(" "),v("p",[t._v("方法")]),t._v(" "),v("p",[t._v("可通过 "),v("code",[t._v("ref")]),t._v(" 方式调用以下组件实例方法")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("方法名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("focus")]),t._v(" "),v("td",[t._v("使输入框得到焦点")])]),t._v(" "),v("tr",[v("td",[t._v("blur")]),t._v(" "),v("td",[t._v("使输入框失去焦点")])]),t._v(" "),v("tr",[v("td",[t._v("clear")]),t._v(" "),v("td",[t._v("清空输入框的内容")])]),t._v(" "),v("tr",[v("td",[t._v("isFocused")]),t._v(" "),v("td",[t._v("返回值表明当前输入框是否获得了焦点")])])])]),t._v(" "),v("h3",{attrs:{id:"button"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#button"}},[t._v("#")]),t._v(" button")]),t._v(" "),v("p",[t._v("按钮。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("size")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("default")])]),t._v(" "),v("td",[t._v("按钮的大小")])]),t._v(" "),v("tr",[v("td",[t._v("type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("default")])]),t._v(" "),v("td",[t._v("按钮的样式类型")])]),t._v(" "),v("tr",[v("td",[t._v("plain")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("按钮是否镂空，背景色透明")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否禁用")])]),t._v(" "),v("tr",[v("td",[t._v("loading")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("名称前是否带 loading 图标")])]),t._v(" "),v("tr",[v("td",[t._v("open-type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("微信开放能力，当前仅支持 "),v("code",[t._v("share")])])]),t._v(" "),v("tr",[v("td",[t._v("hover-class")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v('指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果')])]),t._v(" "),v("tr",[v("td",[t._v("hover-start-time")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("20")])]),t._v(" "),v("td",[t._v("按住后多久出现点击态，单位毫秒")])]),t._v(" "),v("tr",[v("td",[t._v("hover-stay-time")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("70")])]),t._v(" "),v("td",[t._v("手指松开后点击态保留时间，单位毫秒")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("h3",{attrs:{id:"scroll-view"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#scroll-view"}},[t._v("#")]),t._v(" scroll-view")]),t._v(" "),v("p",[t._v("可滚动视图区域。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("scroll-x")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("允许横向滚动动")])]),t._v(" "),v("tr",[v("td",[t._v("scroll-y")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("允许纵向滚动")])]),t._v(" "),v("tr",[v("td",[t._v("upper-threshold")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("50")])]),t._v(" "),v("td",[t._v("距顶部/左边多远时(单位 px),触发 scrolltoupper 事件")])]),t._v(" "),v("tr",[v("td",[t._v("lower-threshold")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("50")])]),t._v(" "),v("td",[t._v("距底部/右边多远时(单位 px),触发 scrolltolower 事件")])]),t._v(" "),v("tr",[v("td",[t._v("scroll-top")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("0")])]),t._v(" "),v("td",[t._v("设置纵向滚动条位置")])]),t._v(" "),v("tr",[v("td",[t._v("scroll-left")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("0")])]),t._v(" "),v("td",[t._v("设置横向滚动条位置")])]),t._v(" "),v("tr",[v("td",[t._v("scroll-with-animation")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("在设置滚动条位置时使用动画过渡")])]),t._v(" "),v("tr",[v("td",[t._v("enable-back-to-top")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("点击状态栏的时候视图会滚动到顶部")])]),t._v(" "),v("tr",[v("td",[t._v("enhanced")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("scroll-view 组件功能增强")])]),t._v(" "),v("tr",[v("td",[t._v("refresher-enabled")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("开启自定义下拉刷新")])]),t._v(" "),v("tr",[v("td",[t._v("scroll-anchoring")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("开启滚动区域滚动锚点")])]),t._v(" "),v("tr",[v("td",[t._v("refresher-default-style")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("'black'")])]),t._v(" "),v("td",[t._v("设置下拉刷新默认样式,支持 "),v("code",[t._v("black")]),t._v("、"),v("code",[t._v("white")]),t._v("、"),v("code",[t._v("none")]),t._v("，仅安卓支持")])]),t._v(" "),v("tr",[v("td",[t._v("refresher-background")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("'#fff'")])]),t._v(" "),v("td",[t._v("设置自定义下拉刷新背景颜色，仅安卓支持")])]),t._v(" "),v("tr",[v("td",[t._v("refresher-triggered")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置当前下拉刷新状态,true 表示已触发")])]),t._v(" "),v("tr",[v("td",[t._v("paging-enabled")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置")])]),t._v(" "),v("tr",[v("td",[t._v("show-scrollbar")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("true")])]),t._v(" "),v("td",[t._v("滚动条显隐控制 (同时开启 enhanced 属性后生效)")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("binddragstart")]),t._v(" "),v("td",[t._v("滑动开始事件，同时开启 enhanced 属性后生效")])]),t._v(" "),v("tr",[v("td",[t._v("binddragging")]),t._v(" "),v("td",[t._v("滑动事件，同时开启 enhanced 属性后生效")])]),t._v(" "),v("tr",[v("td",[t._v("binddragend")]),t._v(" "),v("td",[t._v("滑动结束事件，同时开启 enhanced 属性后生效")])]),t._v(" "),v("tr",[v("td",[t._v("bindscrolltoupper")]),t._v(" "),v("td",[t._v("滚动到顶部/左边触发")])]),t._v(" "),v("tr",[v("td",[t._v("bindscrolltolower")]),t._v(" "),v("td",[t._v("滚动到底部/右边触发")])]),t._v(" "),v("tr",[v("td",[t._v("bindscroll")]),t._v(" "),v("td",[t._v("滚动时触发")])]),t._v(" "),v("tr",[v("td",[t._v("bindrefresherrefresh")]),t._v(" "),v("td",[t._v("自定义下拉刷新被触发")])])])]),t._v(" "),v("p",[t._v("注意事项")]),t._v(" "),v("ol",[v("li",[t._v('目前不支持自定义下拉刷新节点，使用 slot="refresher" 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来')])]),t._v(" "),v("h3",{attrs:{id:"swiper"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#swiper"}},[t._v("#")]),t._v(" swiper")]),t._v(" "),v("p",[t._v("滑块视图容器。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("indicator-dots")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否显示面板指示点")])]),t._v(" "),v("tr",[v("td",[t._v("indicator-color")]),t._v(" "),v("td",[t._v("color")]),t._v(" "),v("td",[v("code",[t._v("rgba(0, 0, 0, .3)")])]),t._v(" "),v("td",[t._v("指示点颜色")])]),t._v(" "),v("tr",[v("td",[t._v("indicator-active-color")]),t._v(" "),v("td",[t._v("color")]),t._v(" "),v("td",[v("code",[t._v("#000000")])]),t._v(" "),v("td",[t._v("当前选中的指示点颜色")])]),t._v(" "),v("tr",[v("td",[t._v("autoplay")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否自动切换")])]),t._v(" "),v("tr",[v("td",[t._v("current")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("0")])]),t._v(" "),v("td",[t._v("当前所在滑块的 index")])]),t._v(" "),v("tr",[v("td",[t._v("interval")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("5000")])]),t._v(" "),v("td",[t._v("自动切换时间间隔")])]),t._v(" "),v("tr",[v("td",[t._v("duration")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("500")])]),t._v(" "),v("td",[t._v("滑动动画时长")])]),t._v(" "),v("tr",[v("td",[t._v("circular")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否采用衔接滑动")])]),t._v(" "),v("tr",[v("td",[t._v("vertical")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("滑动方向是否为纵向")])]),t._v(" "),v("tr",[v("td",[t._v("previous-margin")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("0")])]),t._v(" "),v("td",[t._v("前边距，可用于露出前一项的一小部分，接受px")])]),t._v(" "),v("tr",[v("td",[t._v("next-margin")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[v("code",[t._v("0")])]),t._v(" "),v("td",[t._v("后边距，可用于露出后一项的一小部分，接受px")])]),t._v(" "),v("tr",[v("td",[t._v("enable-offset")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindchange")]),t._v(" "),v("td",[t._v("current 改变时会触发 change 事件，event.detail = {current, source}")])])])]),t._v(" "),v("h3",{attrs:{id:"swiper-item"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#swiper-item"}},[t._v("#")]),t._v(" swiper-item")]),t._v(" "),v("ol",[v("li",[t._v("仅可放置在swiper组件中，宽高自动设置为100%。")])]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("item-id")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("无")])]),t._v(" "),v("td",[t._v("该 swiper-item 的标识符")])])])]),t._v(" "),v("h3",{attrs:{id:"checkbox"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#checkbox"}},[t._v("#")]),t._v(" checkbox")]),t._v(" "),v("p",[t._v("多选项目")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("是否禁用")])]),t._v(" "),v("tr",[v("td",[t._v("checked")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("当前是否选中，可用来设置默认选中")])]),t._v(" "),v("tr",[v("td",[t._v("color")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[t._v("#09BB07")]),t._v(" "),v("td",[t._v("checkbox的颜色，同css的color")])])])]),t._v(" "),v("h3",{attrs:{id:"checkbox-group"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group"}},[t._v("#")]),t._v(" checkbox-group")]),t._v(" "),v("p",[t._v("多项选择器，内部由多个checkbox组成。")]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindchange")]),t._v(" "),v("td",[t._v("checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }")])])])]),t._v(" "),v("h3",{attrs:{id:"radio"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#radio"}},[t._v("#")]),t._v(" radio")]),t._v(" "),v("p",[t._v("单选项目")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("radio 标识，当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("是否禁用")])]),t._v(" "),v("tr",[v("td",[t._v("checked")]),t._v(" "),v("td",[t._v("Boolean")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("当前是否选中，可用来设置默认选中")])]),t._v(" "),v("tr",[v("td",[t._v("color")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[t._v("#09BB07")]),t._v(" "),v("td",[t._v("checkbox 的颜色，同 css 的 color")])])])]),t._v(" "),v("h3",{attrs:{id:"radio-group"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#radio-group"}},[t._v("#")]),t._v(" radio-group")]),t._v(" "),v("p",[t._v("单项选择器，内部由多个 radio 组成")]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindchange")]),t._v(" "),v("td",[t._v("radio-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 radio 的 value 的数组 ] }")])])])]),t._v(" "),v("h3",{attrs:{id:"label"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#label"}},[t._v("#")]),t._v(" label")]),t._v(" "),v("p",[t._v("用来改进表单组件的可用性")]),t._v(" "),v("p",[t._v("注意事项")]),t._v(" "),v("ol",[v("li",[t._v("当前不支持使用 for 属性找到对应 id，仅支持将控件放在该标签内，目前可以绑定的空间有：checkbox、radio、switch。")])]),t._v(" "),v("h3",{attrs:{id:"icon"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#icon"}},[t._v("#")]),t._v(" icon")]),t._v(" "),v("p",[t._v("图标组件")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("type")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("icon 的类型，有效值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear")])]),t._v(" "),v("tr",[v("td",[t._v("size")]),t._v(" "),v("td",[t._v("String | Number")]),t._v(" "),v("td",[t._v("23")]),t._v(" "),v("td",[t._v("icon 的大小")])]),t._v(" "),v("tr",[v("td",[t._v("color")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("icon 的颜色，同 css 的 color")])])])]),t._v(" "),v("h3",{attrs:{id:"movable-area"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#movable-area"}},[t._v("#")]),t._v(" movable-area")]),t._v(" "),v("p",[t._v("movable-view的可移动区域。")]),t._v(" "),v("p",[t._v("注意事项")]),t._v(" "),v("ol",[v("li",[t._v("movable-area不支持设置 scale-area，缩放手势生效区域仅在 movable-view 内")])]),t._v(" "),v("h3",{attrs:{id:"movable-view"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#movable-view"}},[t._v("#")]),t._v(" movable-view")]),t._v(" "),v("p",[t._v("可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("direction")]),t._v(" "),v("td",[t._v("String")]),t._v(" "),v("td",[t._v("none")]),t._v(" "),v("td",[t._v("目前支持 all、vertical、horizontal、none｜")])]),t._v(" "),v("tr",[v("td",[t._v("x")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("定义x轴方向的偏移")])]),t._v(" "),v("tr",[v("td",[t._v("y")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("定义y轴方向的偏移")])]),t._v(" "),v("tr",[v("td",[t._v("friction")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[t._v("7")]),t._v(" "),v("td",[t._v("摩擦系数")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("boolean")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("是否禁用")])]),t._v(" "),v("tr",[v("td",[t._v("scale")]),t._v(" "),v("td",[t._v("boolean")]),t._v(" "),v("td",[t._v("false")]),t._v(" "),v("td",[t._v("是否支持双指缩放")])]),t._v(" "),v("tr",[v("td",[t._v("scale-min")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[t._v("0.1")]),t._v(" "),v("td",[t._v("定义缩放倍数最小值")])]),t._v(" "),v("tr",[v("td",[t._v("scale-max")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[t._v("10")]),t._v(" "),v("td",[t._v("定义缩放倍数最大值")])]),t._v(" "),v("tr",[v("td",[t._v("scale-value")]),t._v(" "),v("td",[t._v("Number")]),t._v(" "),v("td",[t._v("1")]),t._v(" "),v("td",[t._v("定义缩放倍数，取值范围为 0.1 - 10")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindchange")]),t._v(" "),v("td",[t._v("拖动过程中触发的事件，event.detail = {x, y, source}")])]),t._v(" "),v("tr",[v("td",[t._v("bindscale")]),t._v(" "),v("td",[t._v("缩放过程中触发的事件，event.detail = {x, y, scale}")])]),t._v(" "),v("tr",[v("td",[t._v("htouchmove")]),t._v(" "),v("td",[t._v("初次手指触摸后移动为横向的移动时触发")])]),t._v(" "),v("tr",[v("td",[t._v("vtouchmove")]),t._v(" "),v("td",[t._v("初次手指触摸后移动为纵向的移动时触发")])])])]),t._v(" "),v("h3",{attrs:{id:"form"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#form"}},[t._v("#")]),t._v(" form")]),t._v(" "),v("p",[t._v("表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。")]),t._v(" "),v("p",[t._v("当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。")]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindsubmit")]),t._v(" "),v("td",[t._v("携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} }")])]),t._v(" "),v("tr",[v("td",[t._v("bindreset")]),t._v(" "),v("td",[t._v("表单重置时会触发 reset 事件")])])])]),t._v(" "),v("h3",{attrs:{id:"cover-view"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#cover-view"}},[t._v("#")]),t._v(" cover-view")]),t._v(" "),v("p",[t._v("视图容器。\n功能同 view 组件")]),t._v(" "),v("h3",{attrs:{id:"cover-image"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#cover-image"}},[t._v("#")]),t._v(" cover-image")]),t._v(" "),v("p",[t._v("视图容器。\n功能同 image 组件\n| bindchange      | 滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）|")]),t._v(" "),v("h3",{attrs:{id:"picker-view"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#picker-view"}},[t._v("#")]),t._v(" picker-view")]),t._v(" "),v("p",[t._v("嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("Array[number]")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。")])])])]),t._v(" "),v("p",[t._v("事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindchange")]),t._v(" "),v("td",[t._v("checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }")])])])]),t._v(" "),v("h3",{attrs:{id:"picker-view-column"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#picker-view-column"}},[t._v("#")]),t._v(" picker-view-column")]),t._v(" "),v("p",[t._v("滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致")]),t._v(" "),v("h3",{attrs:{id:"picker"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#picker"}},[t._v("#")]),t._v(" picker")]),t._v(" "),v("p",[t._v("从底部弹起的滚动选择器。")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("mode")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("selector")])]),t._v(" "),v("td",[t._v("选择器类型")])]),t._v(" "),v("tr",[v("td",[t._v("disabled")]),t._v(" "),v("td",[t._v("boolean")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("是否禁用")])])])]),t._v(" "),v("p",[t._v("公共事件")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("事件名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("bindcancel")]),t._v(" "),v("td",[t._v("取消选择时触发")])]),t._v(" "),v("tr",[v("td",[t._v("bindchange")]),t._v(" "),v("td",[t._v("滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）")])])])]),t._v(" "),v("h4",{attrs:{id:"普通选择器-mode-selector"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#普通选择器-mode-selector"}},[t._v("#")]),t._v(" 普通选择器：mode = selector")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("range")]),t._v(" "),v("td",[t._v("array[object]/array")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v("mode 为 selector 或 multiSelector 时，range 有效")])]),t._v(" "),v("tr",[v("td",[t._v("range-key")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容")])]),t._v(" "),v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("number")]),t._v(" "),v("td",[t._v("0")]),t._v(" "),v("td",[t._v("表示选择了 range 中的第几个（下标从 0 开始）")])])])]),t._v(" "),v("h4",{attrs:{id:"多列选择器-mode-multiselector"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#多列选择器-mode-multiselector"}},[t._v("#")]),t._v(" 多列选择器：mode = multiSelector")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("range")]),t._v(" "),v("td",[t._v("array[object]/array")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v("mode 为 selector 或 multiSelector 时，range 有效")])]),t._v(" "),v("tr",[v("td",[t._v("range-key")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v("当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容")])]),t._v(" "),v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("array")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v("表示选择了 range 中的第几个（下标从 0 开始）")])]),t._v(" "),v("tr",[v("td",[t._v("bindcolumnchange")]),t._v(" "),v("td"),t._v(" "),v("td"),t._v(" "),v("td",[t._v("列改变时触发")])])])]),t._v(" "),v("h4",{attrs:{id:"多列选择器-时间选择器-mode-time"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#多列选择器-时间选择器-mode-time"}},[t._v("#")]),t._v(" 多列选择器：时间选择器：mode = time")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v('表示选中的时间，格式为"hh:mm"')])]),t._v(" "),v("tr",[v("td",[t._v("start")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v('表示有效时间范围的开始，字符串格式为"hh:mm"')])]),t._v(" "),v("tr",[v("td",[t._v("end")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v('表示有效时间范围的结束，字符串格式为"hh:mm"')])])])]),t._v(" "),v("h4",{attrs:{id:"多列选择器-时间选择器-mode-date"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#多列选择器-时间选择器-mode-date"}},[t._v("#")]),t._v(" 多列选择器：时间选择器：mode = date")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("当天")])]),t._v(" "),v("td",[t._v('表示选中的日期，格式为"YYYY-MM-DD"')])]),t._v(" "),v("tr",[v("td",[t._v("start")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("false")])]),t._v(" "),v("td",[t._v('表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"')])]),t._v(" "),v("tr",[v("td",[t._v("end")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v('表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"')])]),t._v(" "),v("tr",[v("td",[t._v("fields")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("day")])]),t._v(" "),v("td",[t._v("有效值 year,month,day，表示选择器的粒度")])])])]),t._v(" "),v("h4",{attrs:{id:"fields-有效值"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#fields-有效值"}},[t._v("#")]),t._v(" fields 有效值：")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("year")]),t._v(" "),v("td",[t._v("选择器粒度为年")])]),t._v(" "),v("tr",[v("td",[t._v("month")]),t._v(" "),v("td",[t._v("选择器粒度为月份")])]),t._v(" "),v("tr",[v("td",[t._v("day")]),t._v(" "),v("td",[t._v("选择器粒度为天")])])])]),t._v(" "),v("h3",{attrs:{id:"省市区选择器：mode-region"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#省市区选择器：mode-region"}},[t._v("#")]),t._v(" 省市区选择器：mode = region")]),t._v(" "),v("p",[t._v("属性")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("类型")]),t._v(" "),v("th",[t._v("默认值")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("value")]),t._v(" "),v("td",[t._v("array")]),t._v(" "),v("td",[v("code",[t._v("[]")])]),t._v(" "),v("td",[t._v("表示选中的省市区，默认选中每一列的第一个值")])]),t._v(" "),v("tr",[v("td",[t._v("custom-item")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td"),t._v(" "),v("td",[t._v("可为每一列的顶部添加一个自定义的项")])]),t._v(" "),v("tr",[v("td",[t._v("level")]),t._v(" "),v("td",[t._v("string")]),t._v(" "),v("td",[v("code",[t._v("region")])]),t._v(" "),v("td",[t._v("选择器层级")])])])]),t._v(" "),v("h4",{attrs:{id:"level-有效值"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#level-有效值"}},[t._v("#")]),t._v(" level 有效值：")]),t._v(" "),v("table",[v("thead",[v("tr",[v("th",[t._v("属性名")]),t._v(" "),v("th",[t._v("说明")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("province")]),t._v(" "),v("td",[t._v("选省级选择器")])]),t._v(" "),v("tr",[v("td",[t._v("city")]),t._v(" "),v("td",[t._v("市级选择器")])]),t._v(" "),v("tr",[v("td",[t._v("region")]),t._v(" "),v("td",[t._v("区级选择器")])])])])])}),[],!1,null,null,null);v.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/12.4d7217be.js b/docs-vuepress/.vuepress/dist/assets/js/12.4d7217be.js
deleted file mode 100644
index 31955d11a9..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/12.4d7217be.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{376:function(t,e,s){"use strict";s.r(e);const o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."];var n={methods:{getMsg:()=>o[Math.floor(Math.random()*o.length)]}},h=s(4),i=Object(h.a)(n,(function(){var t=this._self._c;return t("div",{staticClass:"theme-container"},[t("div",{staticClass:"theme-default-content"},[t("h1",[this._v("404")]),this._v(" "),t("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),t("RouterLink",{attrs:{to:"/"}},[this._v("\n      Take me home.\n    ")])],1)])}),[],!1,null,null,null);e.default=i.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/120.7a6b4035.js b/docs-vuepress/.vuepress/dist/assets/js/120.7a6b4035.js
deleted file mode 100644
index 7bcb88f145..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/120.7a6b4035.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[120],{372:function(n,e,t){"use strict";t.r(e),t.d(e,"register",(function(){return o})),t.d(e,"unregister",(function(){return c}));var r;function o(n,e){void 0===e&&(e={});var t=e.registrationOptions;void 0===t&&(t={}),delete e.registrationOptions;var o=function(n){for(var t=[],r=arguments.length-1;r-- >0;)t[r]=arguments[r+1];e&&e[n]&&e[n].apply(e,t)};"serviceWorker"in navigator&&r.then((function(){Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/))?(!function(n,e,t){fetch(n).then((function(r){404===r.status?(e("error",new Error("Service worker not found at "+n)),c()):-1===r.headers.get("content-type").indexOf("javascript")?(e("error",new Error("Expected "+n+" to have javascript content-type, but received "+r.headers.get("content-type"))),c()):a(n,e,t)})).catch((function(n){return i(e,n)}))}(n,o,t),navigator.serviceWorker.ready.then((function(n){o("ready",n)})).catch((function(n){return i(o,n)}))):(a(n,o,t),navigator.serviceWorker.ready.then((function(n){o("ready",n)})).catch((function(n){return i(o,n)})))}))}function i(n,e){navigator.onLine||n("offline"),n("error",e)}function a(n,e,t){navigator.serviceWorker.register(n,t).then((function(n){e("registered",n),n.waiting?e("updated",n):n.onupdatefound=function(){e("updatefound",n);var t=n.installing;t.onstatechange=function(){"installed"===t.state&&(navigator.serviceWorker.controller?e("updated",n):e("cached",n))}}})).catch((function(n){return i(e,n)}))}function c(){"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(n){n.unregister()})).catch((function(n){return i(emit,n)}))}"undefined"!=typeof window&&(r="undefined"!=typeof Promise?new Promise((function(n){return window.addEventListener("load",n)})):{then:function(n){return window.addEventListener("load",n)}})}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/14.7377c68f.js b/docs-vuepress/.vuepress/dist/assets/js/14.7377c68f.js
deleted file mode 100644
index 2d1ca55dd8..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/14.7377c68f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[14,19,22],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return u})),n.d(e,"g",(function(){return c})),n.d(e,"h",(function(){return l})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return h})),n.d(e,"c",(function(){return v})),n.d(e,"j",(function(){return m}));n(69),n(10),n(19),n(48),n(30);const r=/#.*$/,i=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(r,"").replace(i,"")}function u(t){return s.test(t)}function c(t){return/^mailto:/.test(t)}function l(t){return/^tel:/.test(t)}function p(t){if(u(t))return t;const e=t.match(r),n=e?e[0]:"",i=o(t);return a.test(i)?t:i+".html"+n}function f(t,e){const n=decodeURIComponent(t.hash),i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function d(t,e,n){if(u(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;t<a.length;t++){const e=a[t];".."===e?i.pop():"."!==e&&i.push(e)}""!==i[0]&&i.unshift("");return i.join("/")}(e,n));const r=o(e);for(let e=0;e<t.length;e++)if(o(t[e].regularPath)===r)return Object.assign({},t[e],{type:"page",path:p(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function h(t,e,n,r){const{pages:i,themeConfig:a}=n,s=r&&a.locales&&a.locales[r]||a;if("auto"===(t.frontmatter.sidebar||s.sidebar||a.sidebar))return g(t);const o=s.sidebar||a.sidebar;if(o){const{base:n,config:r}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,o);return"auto"===r?g(t):r?r.map(t=>function t(e,n,r,i=1){if("string"==typeof e)return d(n,e,r);if(Array.isArray(e))return Object.assign(d(n,e[0],r),{title:e[1]});{const a=e.children||[];return 0===a.length&&e.path?Object.assign(d(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(t,i,n)):[]}return[]}function g(t){const e=v(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function v(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},295:function(t,e){t.exports=function(t){return null==t}},298:function(t,e,n){},299:function(t,e,n){},307:function(t,e,n){"use strict";n(298)},308:function(t,e,n){var r=n(27),i=n(15),a=n(22);t.exports=function(t){return"string"==typeof t||!i(t)&&a(t)&&"[object String]"==r(t)}},309:function(t,e,n){"use strict";n(299)},310:function(t,e,n){},323:function(t,e,n){"use strict";n.r(e);var r=n(295),i=n.n(r),a=n(290),s={name:"PageEdit",computed:{lastUpdated(){return this.$page.lastUpdated},lastUpdatedText(){return"string"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:"string"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:"Last Updated"},editLink(){const t=i()(this.$page.frontmatter.editLink)?this.$site.themeConfig.editLinks:this.$page.frontmatter.editLink,{repo:e,docsDir:n="",docsBranch:r="master",docsRepo:a=e}=this.$site.themeConfig;return t&&a&&this.$page.relativePath?this.createEditLink(e,a,n,r,this.$page.relativePath):null},editLinkText(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||"Edit this page"}},methods:{createEditLink(t,e,n,r,i){if(/bitbucket.org/.test(e)){return e.replace(a.a,"")+"/src"+`/${r}/`+(n?n.replace(a.a,"")+"/":"")+i+`?mode=edit&spa=0&at=${r}&fileviewer=file-view-default`}if(/gitlab.com/.test(e)){return e.replace(a.a,"")+"/-/edit"+`/${r}/`+(n?n.replace(a.a,"")+"/":"")+i}return(a.i.test(e)?e:"https://github.com/"+e).replace(a.a,"")+"/edit"+`/${r}/`+(n?n.replace(a.a,"")+"/":"")+i}}},o=(n(307),n(4)),u=Object(o.a)(s,(function(){var t=this,e=t._self._c;return e("footer",{staticClass:"page-edit"},[t.editLink?e("div",{staticClass:"edit-link"},[e("a",{attrs:{href:t.editLink,target:"_blank",rel:"noopener noreferrer"}},[t._v(t._s(t.editLinkText))]),t._v(" "),e("OutboundLink")],1):t._e(),t._v(" "),t.lastUpdated?e("div",{staticClass:"last-updated"},[e("span",{staticClass:"prefix"},[t._v(t._s(t.lastUpdatedText)+":")]),t._v(" "),e("span",{staticClass:"time"},[t._v(t._s(t.lastUpdated))])]):t._e()])}),[],!1,null,null,null);e.default=u.exports},324:function(t,e,n){"use strict";n.r(e);n(69);var r=n(290),i=n(308),a=n.n(i),s=n(295),o=n.n(s),u={name:"PageNav",props:["sidebarItems"],computed:{prev(){return l(c.PREV,this)},next(){return l(c.NEXT,this)}}};const c={NEXT:{resolveLink:function(t,e){return p(t,e,1)},getThemeLinkConfig:({nextLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.next},PREV:{resolveLink:function(t,e){return p(t,e,-1)},getThemeLinkConfig:({prevLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.prev}};function l(t,{$themeConfig:e,$page:n,$route:i,$site:s,sidebarItems:u}){const{resolveLink:c,getThemeLinkConfig:l,getPageLinkConfig:p}=t,f=l(e),d=p(n),h=o()(d)?f:d;return!1===h?void 0:a()(h)?Object(r.k)(s.pages,h,i.path):c(n,u)}function p(t,e,n){const r=[];!function t(e,n){for(let r=0,i=e.length;r<i;r++)"group"===e[r].type?t(e[r].children||[],n):n.push(e[r])}(e,r);for(let e=0;e<r.length;e++){const i=r[e];if("page"===i.type&&i.path===decodeURIComponent(t.path))return r[e+n]}}var f=u,d=(n(309),n(4)),h=Object(d.a)(f,(function(){var t=this,e=t._self._c;return t.prev||t.next?e("div",{staticClass:"page-nav"},[e("p",{staticClass:"inner"},[t.prev?e("span",{staticClass:"prev"},[t._v("\n      ←\n      "),"external"===t.prev.type?e("a",{staticClass:"prev",attrs:{href:t.prev.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n\n        "),e("OutboundLink")],1):e("RouterLink",{staticClass:"prev",attrs:{to:t.prev.path}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n      ")])],1):t._e(),t._v(" "),t.next?e("span",{staticClass:"next"},["external"===t.next.type?e("a",{attrs:{href:t.next.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n\n        "),e("OutboundLink")],1):e("RouterLink",{attrs:{to:t.next.path}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n      ")]),t._v("\n      →\n    ")],1):t._e()])]):t._e()}),[],!1,null,null,null);e.default=h.exports},330:function(t,e,n){"use strict";n(310)},350:function(t,e,n){"use strict";n.r(e);var r=n(323),i=n(324),a={components:{PageEdit:r.default,PageNav:i.default},props:["sidebarItems"]},s=(n(330),n(4)),o=Object(s.a)(a,(function(){var t=this._self._c;return t("main",{staticClass:"page"},[this._t("top"),this._v(" "),t("Content",{staticClass:"theme-default-content"}),this._v(" "),t("PageEdit"),this._v(" "),t("PageNav",this._b({},"PageNav",{sidebarItems:this.sidebarItems},!1)),this._v(" "),this._t("bottom")],2)}),[],!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/15.6f885a83.js b/docs-vuepress/.vuepress/dist/assets/js/15.6f885a83.js
deleted file mode 100644
index d169bb8c06..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/15.6f885a83.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[15,16,31,34],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return a})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return h})),n.d(e,"k",(function(){return f})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return b})),n.d(e,"j",(function(){return g}));n(69),n(10),n(19),n(48),n(30);const i=/#.*$/,r=/\.(md|html)$/,s=/\/$/,a=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function l(t){return a.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function p(t){if(l(t))return t;const e=t.match(i),n=e?e[0]:"",r=o(t);return s.test(r)?t:r+".html"+n}function h(t,e){const n=decodeURIComponent(t.hash),r=function(t){const e=t.match(i);if(e)return e[0]}(e);if(r&&n!==r)return!1;return o(t.path)===o(e)}function f(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const r=e.split("/");n&&r[r.length-1]||r.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t<s.length;t++){const e=s[t];".."===e?r.pop():"."!==e&&r.push(e)}""!==r[0]&&r.unshift("");return r.join("/")}(e,n));const i=o(e);for(let e=0;e<t.length;e++)if(o(t[e].regularPath)===i)return Object.assign({},t[e],{type:"page",path:p(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function d(t,e,n,i){const{pages:r,themeConfig:s}=n,a=i&&s.locales&&s.locales[i]||s;if("auto"===(t.frontmatter.sidebar||a.sidebar||s.sidebar))return m(t);const o=a.sidebar||s.sidebar;if(o){const{base:n,config:i}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,o);return"auto"===i?m(t):i?i.map(t=>function t(e,n,i,r=1){if("string"==typeof e)return f(n,e,i);if(Array.isArray(e))return Object.assign(f(n,e[0],i),{title:e[1]});{const s=e.children||[];return 0===s.length&&e.path?Object.assign(f(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:s.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(t,r,n)):[]}return[]}function m(t){const e=b(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function b(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},291:function(t,e,n){},293:function(t,e,n){"use strict";n.r(e);n(10),n(47);var i=n(290),r={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},s=n(4),a=Object(s.a)(r,(function(){var t=this,e=t._self._c;return t.isInternal?e("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?e("OutboundLink"):t._e()],1)}),[],!1,null,null,null);e.default=a.exports},294:function(t,e,n){"use strict";n(291)},296:function(t,e,n){"use strict";n.r(e);var i={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},r=(n(294),n(4)),s=Object(r.a)(i,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},297:function(t,e,n){},304:function(t,e,n){"use strict";n(297)},306:function(t,e,n){},322:function(t,e,n){"use strict";n.r(e);var i=n(293),r=n(296),s=n(127),a=n.n(s),o={name:"DropdownLink",components:{NavLink:i.default,DropdownTransition:r.default},props:{item:{required:!0}},data:()=>({open:!1}),computed:{dropdownAriaLabel(){return this.item.ariaLabel||this.item.text}},watch:{$route(){this.open=!1}},methods:{setOpen(t){this.open=t},isLastItemOfArray:(t,e)=>a()(e)===t,handleDropdown(){0===event.detail&&this.setOpen(!this.open)}}},l=(n(304),n(4)),u=Object(l.a)(o,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow down"})]),t._v(" "),e("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,i){return e("li",{key:n.link||i,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v("\n          "+t._s(n.text)+"\n        ")]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(i){return e("li",{key:i.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:i},on:{focusout:function(e){t.isLastItemOfArray(i,n.items)&&t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0):e("NavLink",{attrs:{item:n},on:{focusout:function(e){t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=u.exports},329:function(t,e,n){"use strict";n(306)},349:function(t,e,n){"use strict";n.r(e);n(10),n(30),n(47);var i=n(322),r=n(290),s={name:"NavLinks",components:{NavLink:n(293).default,DropdownLink:i.default},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,i=this.$site.themeConfig.locales||{},r={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(t).map(r=>{const s=t[r],a=i[r]&&i[r].label||s.lang;let o;return s.lang===this.$lang?o=e:(o=e.replace(this.$localeConfig.path,r),n.some(t=>t.path===o)||(o=r)),{text:a,link:o}})};return[...this.userNav,r]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(r.j)(t),{items:(t.items||[]).map(r.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;return t?/^https?:/.test(t)?t:"https://github.com/"+t:null},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n<e.length;n++){const i=e[n];if(new RegExp(i,"i").test(t))return i}return"Source"}}},a=(n(329),n(4)),o=Object(a.a)(s,(function(){var t=this,e=t._self._c;return t.userLinks.length||t.repoLink?e("nav",{staticClass:"nav-links"},[t._l(t.userLinks,(function(t){return e("div",{key:t.link,staticClass:"nav-item"},["links"===t.type?e("DropdownLink",{attrs:{item:t}}):e("NavLink",{attrs:{item:t}})],1)})),t._v(" "),t.repoLink?e("a",{staticClass:"repo-link",attrs:{href:t.repoLink,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n    "+t._s(t.repoLabel)+"\n    "),e("OutboundLink")],1):t._e()],2):t._e()}),[],!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/16.974f551e.js b/docs-vuepress/.vuepress/dist/assets/js/16.974f551e.js
deleted file mode 100644
index 49aa880ad2..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/16.974f551e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[16,31,34],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return o})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return h})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return b})),n.d(e,"j",(function(){return g}));n(69),n(10),n(19),n(48),n(30);const i=/#.*$/,r=/\.(md|html)$/,s=/\/$/,o=/^[a-z]+:/i;function a(t){return decodeURI(t).replace(i,"").replace(r,"")}function l(t){return o.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function p(t){if(l(t))return t;const e=t.match(i),n=e?e[0]:"",r=a(t);return s.test(r)?t:r+".html"+n}function f(t,e){const n=decodeURIComponent(t.hash),r=function(t){const e=t.match(i);if(e)return e[0]}(e);if(r&&n!==r)return!1;return a(t.path)===a(e)}function h(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const r=e.split("/");n&&r[r.length-1]||r.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t<s.length;t++){const e=s[t];".."===e?r.pop():"."!==e&&r.push(e)}""!==r[0]&&r.unshift("");return r.join("/")}(e,n));const i=a(e);for(let e=0;e<t.length;e++)if(a(t[e].regularPath)===i)return Object.assign({},t[e],{type:"page",path:p(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function d(t,e,n,i){const{pages:r,themeConfig:s}=n,o=i&&s.locales&&s.locales[i]||s;if("auto"===(t.frontmatter.sidebar||o.sidebar||s.sidebar))return m(t);const a=o.sidebar||s.sidebar;if(a){const{base:n,config:i}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,a);return"auto"===i?m(t):i?i.map(t=>function t(e,n,i,r=1){if("string"==typeof e)return h(n,e,i);if(Array.isArray(e))return Object.assign(h(n,e[0],i),{title:e[1]});{const s=e.children||[];return 0===s.length&&e.path?Object.assign(h(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:s.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(t,r,n)):[]}return[]}function m(t){const e=b(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function b(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function g(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},291:function(t,e,n){},293:function(t,e,n){"use strict";n.r(e);n(10),n(47);var i=n(290),r={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},s=n(4),o=Object(s.a)(r,(function(){var t=this,e=t._self._c;return t.isInternal?e("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?e("OutboundLink"):t._e()],1)}),[],!1,null,null,null);e.default=o.exports},294:function(t,e,n){"use strict";n(291)},296:function(t,e,n){"use strict";n.r(e);var i={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},r=(n(294),n(4)),s=Object(r.a)(i,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},297:function(t,e,n){},304:function(t,e,n){"use strict";n(297)},322:function(t,e,n){"use strict";n.r(e);var i=n(293),r=n(296),s=n(127),o=n.n(s),a={name:"DropdownLink",components:{NavLink:i.default,DropdownTransition:r.default},props:{item:{required:!0}},data:()=>({open:!1}),computed:{dropdownAriaLabel(){return this.item.ariaLabel||this.item.text}},watch:{$route(){this.open=!1}},methods:{setOpen(t){this.open=t},isLastItemOfArray:(t,e)=>o()(e)===t,handleDropdown(){0===event.detail&&this.setOpen(!this.open)}}},l=(n(304),n(4)),u=Object(l.a)(a,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow down"})]),t._v(" "),e("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,i){return e("li",{key:n.link||i,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v("\n          "+t._s(n.text)+"\n        ")]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(i){return e("li",{key:i.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:i},on:{focusout:function(e){t.isLastItemOfArray(i,n.items)&&t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0):e("NavLink",{attrs:{item:n},on:{focusout:function(e){t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null);e.default=u.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/17.e94e6745.js b/docs-vuepress/.vuepress/dist/assets/js/17.e94e6745.js
deleted file mode 100644
index 41e3c15915..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/17.e94e6745.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[17,25],{292:function(t,e,s){},302:function(t,e,s){"use strict";s(292)},303:function(t,e,s){"use strict";s.r(e);var i={props:{code:{type:String,default:""},title:{type:String,default:""}},data:()=>({isShow:!1,isClick:!1}),methods:{handleEnter(){this.isShow=!0},handleLeave(){this.isShow=!1},handleToggle(){this.isClick=!this.isClick,this.isShow=this.isClick}}},a=(s(302),s(4)),o=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"popover"},[e("div",{staticClass:"popover__content",on:{click:t.handleToggle,mouseenter:t.handleEnter,mouseleave:t.handleLeave}},[t._t("default")],2),t._v(" "),e("div",{directives:[{name:"show",rawName:"v-show",value:t.isShow,expression:"isShow"}],staticClass:"popover__top"},[e("div",{staticClass:"popover__content"},[e("div",{staticClass:"popover__inner"},[t.code?e("img",{attrs:{width:"300",src:t.code,alt:"code",loading:"lazy"}}):t._e(),t._v(" "),t.title?e("div",[t._v(t._s(t.title))]):t._e()]),t._v(" "),e("div",{staticClass:"popover__arrow"})])])])}),[],!1,null,"8bac5638",null);e.default=o.exports},315:function(t,e,s){},332:function(t,e,s){"use strict";s(315)},351:function(t,e,s){"use strict";s.r(e);var i={components:{Popover:s(303).default},props:{dataList:{type:Array,default:()=>[]}},data:()=>({current:-1}),methods:{handleEnter(t){this.current=t},handleLeave(){this.current=-1}}},a=(s(332),s(4)),o=Object(a.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"code-list"},this._l(this.dataList,(function(e,s){return t("div",{key:s,staticClass:"code-list__item"},[t("img",{attrs:{width:"150",height:"170",src:e.code,alt:"code",loading:"lazy"}})])})),0)}),[],!1,null,"76bf3aa2",null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/18.b1f7a4a2.js b/docs-vuepress/.vuepress/dist/assets/js/18.b1f7a4a2.js
deleted file mode 100644
index b16793c50a..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/18.b1f7a4a2.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[18,24],{301:function(t,e,s){},316:function(t,e,s){"use strict";s(301)},317:function(t,e,s){},326:function(t,e,s){"use strict";s.r(e);var i={props:{dataList:{type:Array,default:()=>[]},height:{type:Number,default:152},autoPlay:{type:Boolean,default:!0},currentIndex:{type:Number,default:0},dot:{type:Boolean,default:!1}},data:()=>({msg:"",current:0,resut:[],allWidth:0,timer:0,prevCls:"swiper-disable",nextCls:"",offsetWidth:0,isMove:!1,timeout:0}),computed:{getStyle(){return`height: ${this.height}px;`},getMode(){return this.isMove?"transition: transform 0s;":"transition: transform 0.3s;"},getWidth(){return`width: ${this.offsetWidth}px;`}},mounted(){this.$nextTick(()=>{const t=this.$refs.container;this.offsetWidth=t.offsetWidth,this.autoPlay&&this.animationScroll(),window.addEventListener("resize",()=>{this.offsetWidth=t.offsetWidth},!1)}),this.touchInfo={clientX:0,clientY:0,moveX:0}},watch:{current(t){this.prevCls=0===t?"swiper-disable":"",t===this.dataList.length-1?this.nextCls="swiper-disable":this.nextCls=""}},methods:{animationScroll(){clearInterval(this.timer),this.timer=setInterval(()=>{this.handleNext()},3e3)},handlePrev(t){const e=this.$refs.wrapper;this.current--,-1===this.current&&(this.current=0),e.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,"off"!==t&&this.$emit("change",this.current)},handleNext(t){const e=this.$refs.wrapper;e&&(this.current++,this.current===this.dataList.length&&(this.current=0),e.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,"off"!==t&&this.$emit("change",this.current))},handleSelect(t){clearInterval(this.timer),clearTimeout(this.timeout),this.current=t;this.$refs.wrapper.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,this.autoPlay&&(this.timeout=setTimeout(()=>{this.animationScroll()},3e3))},handleStart(t){clearInterval(this.timer),clearTimeout(this.timeout);const e=t.touches[0];this.touchInfo={clientX:e.clientX},this.isMove=!0},handleMove(t){const e=this.$refs.wrapper,s=t.touches[0].clientX-this.touchInfo.clientX,i=this.current*this.offsetWidth-s;e.style.transform=`translateX(${-i}px)`,this.touchInfo.moveX=s},handleEnd(){this.isMove=!1;const t=this.touchInfo.moveX||0;let e=0;e=Math.abs(t)<20?0:t<0?this.current===this.dataList.length-1?0:1:0===this.current?0:-1;const s=this.$refs.wrapper;switch(e){case 0:s.style.transform=`translateX(${-this.current*this.offsetWidth}px)`;break;case 1:this.handleNext();break;case-1:this.handlePrev()}this.touchInfo={},this.autoPlay&&(this.timeout=setTimeout(()=>{this.animationScroll()},3e3))}}},a=(s(316),s(4)),n=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("div",{ref:"container",staticClass:"swiper-container",style:t.getStyle},[e("div",{ref:"wrapper",staticClass:"swiper",style:t.getMode,on:{touchstart:t.handleStart,touchmove:t.handleMove,touchend:t.handleEnd}},t._l(t.dataList,(function(s,i){return e("div",{key:i,ref:"list",refInFor:!0,staticClass:"swiper-list",style:t.getWidth},[t._t("default",null,{item:s})],2)})),0),t._v(" "),t.dot?e("ul",{staticClass:"swiper-dot"},t._l(t.dataList,(function(s,i){return e("li",{key:i,staticClass:"swiper-icon",class:{active:t.current===i}})})),0):t._e()])}),[],!1,null,"ae3bb0ce",null);e.default=n.exports},333:function(t,e,s){"use strict";s(317)},352:function(t,e,s){"use strict";s.r(e);s(69);var i={components:{MobileSwiper:s(326).default},data:()=>({currentIndex:0,pageIndex:0,tempIndex:0}),computed:{list(){return this.$page.frontmatter.sixSection.details},multiList(){const t=this.$page.frontmatter.sevenSection.details,e=[];let s=[];for(let i=0;i<t.length;i++)i%4==0&&(s.length&&e.push(s),s=[]),s.push(t[i]);return s.length&&e.push(s),e},mvcList(){return this.$page.frontmatter.threeSection.list},dataList(){return this.$page.frontmatter.sevenSection.details}},methods:{handleChange(t){this.currentIndex=t>3?t%4:t,t>2&&(t%4==0&&t>this.tempIndex&&(this.$refs.multiPage.handleNext("off"),this.currentIndex=0),(t+1)%4==0&&t<this.tempIndex&&(this.$refs.multiPage.handlePrev("off"),this.currentIndex=3)),this.tempIndex=t},handleSelect(t){let e=4*this.pageIndex+t;this.tempIndex=e,this.currentIndex=t,this.$refs.multiImg.handleSelect(e)},handlePage(t){this.pageIndex=t,this.handleSelect(0)}}},a=(s(333),s(4)),n=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"m-banner-wrapper"},[e("div",{staticClass:"m-banner"},[e("div",{staticClass:"m-title"},[t._v(t._s(t.$page.frontmatter.heroText))]),t._v(" "),e("div",{staticClass:"m-subtitle"},[t._v("\n      "+t._s(t.$page.frontmatter.tagline)+"\n    ")]),t._v(" "),e("div",{staticClass:"m-banner-btn-wrapper"},[e("button",{staticClass:"m-banner-btn m-banner-btn-enter"},[e("a",{staticStyle:{"font-size":"15px"},attrs:{href:t.$page.frontmatter.actionLink}},[t._v("\n          "+t._s(t.$page.frontmatter.actionText)+"\n        ")])]),t._v(" "),e("div",{staticClass:"m-banner-btn m-banner-btn-jump"},[e("a",{staticClass:"white-link",attrs:{href:t.$page.frontmatter.githubLink}},[t._v("\n          "+t._s(t.$page.frontmatter.githubText)+"\n        ")])])]),t._v(" "),e("div",{staticClass:"m-banner-bg"})]),t._v(" "),e("div",{staticClass:"m-advantages"},t._l(t.$page.frontmatter.features,(function(s,i){return e("li",{key:i,staticClass:"m-advan-section"},[e("img",{staticClass:"m-advan-section-img",attrs:{src:s.micon,loading:"lazy",width:"34",height:"34"}}),t._v(" "),e("p",{staticClass:"m-advan-section-title"},[t._v(t._s(s.title))])])})),0),t._v(" "),e("div",{staticClass:"mdemo-wrapper"},[e("div",{staticClass:"mdemo-title"},[t._v(t._s(t.$page.frontmatter.threeSection.title))]),t._v(" "),t._m(0),t._v(" "),e("div",{staticClass:"mdemo-icon-wrapper"},t._l(t.mvcList,(function(t,s){return e("div",{key:s,staticStyle:{margin:"0 6px"}},[e("img",{attrs:{width:"130",height:"150",src:t.code,alt:"code",loading:"lazy"}})])})),0)]),t._v(" "),e("div",{staticClass:"m-feature-wrapper"},[e("div",{staticClass:"m-feature-title"},[t._v("\n      "+t._s(t.$page.frontmatter.fourSection.title)+"\n    ")]),t._v(" "),e("div",{staticClass:"m-feature-subtitle"},[t._v("\n      "+t._s(t.$page.frontmatter.fourSection.details)+"\n    ")]),t._v(" "),e("a",{staticClass:"m-feature-btn",attrs:{href:t.$page.frontmatter.fourSection.actionLink}},[t._v("\n      "+t._s(t.$page.frontmatter.fourSection.actionText)+"\n    ")]),t._v(" "),e("img",{staticClass:"m-feature-pic",attrs:{width:"100%",height:"309px",src:t.$page.frontmatter.fourSection.mimg,alt:"platform",loading:"lazy"}}),t._v(" "),e("div",{staticClass:"m-feature-title"},[t._v("\n      "+t._s(t.$page.frontmatter.fiveSection.title)+"\n    ")]),t._v(" "),e("div",{staticClass:"m-feature-subtitle"},[t._v("\n      "+t._s(t.$page.frontmatter.fiveSection.details)+"\n    ")]),t._v(" "),e("a",{staticClass:"m-feature-btn",attrs:{href:t.$page.frontmatter.fourSection.actionLink}},[t._v("\n      "+t._s(t.$page.frontmatter.fiveSection.actionText)+"\n    ")]),t._v(" "),e("img",{staticClass:"m-feature-pic",attrs:{width:"100%",height:"309px",src:t.$page.frontmatter.fiveSection.mimg,alt:"platform",loading:"lazy"}})]),t._v(" "),e("div",{staticClass:"m-util-wrapper"},[e("div",{staticClass:"m-util-title"},[t._v(t._s(t.$page.frontmatter.sixSection.title))]),t._v(" "),t._l(t.list,(function(s,i){return e("ul",{key:i,staticClass:"row six-section__row"},[e("a",{staticClass:"six-section__item six-section__step",attrs:{href:s.actionLink}},[e("img",{staticClass:"six-section__icon",attrs:{src:s.icon,alt:"svg",loading:"lazy",width:"50",height:"50"}}),t._v(" "),e("div",{staticClass:"six-section__list"},[e("div",{staticClass:"six-section__bold"},[t._v(t._s(s.title))]),t._v(" "),e("div",{staticClass:"six-section__subtitle"},[t._v(t._s(s.details))])])])])}))],2),t._v(" "),e("div",{staticClass:"m-example-wrapper"},[e("div",{staticClass:"m-example-title"},[t._v(t._s(t.$page.frontmatter.sevenSection.title))]),t._v(" "),e("div",{staticClass:"m-example-phone"},[e("img",{attrs:{width:"318",height:"318",src:"https://dpubstatic.udache.com/static/dpubimg/xxjYvzgJdt/y_bg_phone.png",alt:"phone"}}),t._v(" "),e("div",{staticClass:"m-example-img-contain"},[e("mobile-swiper",{ref:"multiImg",attrs:{height:390,dataList:t.dataList},on:{change:t.handleChange},scopedSlots:t._u([{key:"default",fn:function(t){return[e("div",{staticClass:"m-example-swiper"},[e("img",{staticStyle:{"border-radius":"20px"},attrs:{width:"180",src:t.item.demo,alt:"demo"}})])]}}])})],1)]),t._v(" "),e("mobile-swiper",{ref:"multiPage",attrs:{height:200,dot:!0,autoPlay:!1,dataList:t.multiList},on:{change:t.handlePage},scopedSlots:t._u([{key:"default",fn:function(s){return[e("div",{staticClass:"m-example-swiper"},t._l(s.item,(function(s,i){return e("div",{key:i,staticClass:"m-example-name",class:{active:t.currentIndex===i},on:{click:function(e){return t.handleSelect(i)}}},[t._v("\n              "+t._s(s.title)+"\n            ")])})),0)]}}])})],1)])}),[function(){var t=this._self._c;return t("p",{staticClass:"mdemo-subtitle"},[this._v("\n      扫码体验Mpx版本的\n      "),t("a",{staticClass:"target-link",attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC"}},[this._v("todoMVC")]),this._v("\n      在各个小程序平台和web中的一致表现 ，更多示例项目可点击\n      "),t("a",{staticClass:"target-link",attrs:{href:"https://github.com/didi/mpx/tree/master/examples"}},[this._v("这里")]),this._v("\n      进入查看。\n    ")])}],!1,null,"a2c0041c",null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/19.62186e92.js b/docs-vuepress/.vuepress/dist/assets/js/19.62186e92.js
deleted file mode 100644
index 0d4cb8914c..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/19.62186e92.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{290:function(t,n,e){"use strict";e.d(n,"d",(function(){return r})),e.d(n,"a",(function(){return o})),e.d(n,"i",(function(){return a})),e.d(n,"f",(function(){return u})),e.d(n,"g",(function(){return c})),e.d(n,"h",(function(){return p})),e.d(n,"b",(function(){return l})),e.d(n,"e",(function(){return f})),e.d(n,"k",(function(){return h})),e.d(n,"l",(function(){return d})),e.d(n,"c",(function(){return v})),e.d(n,"j",(function(){return b}));e(69),e(10),e(19),e(48),e(30);const r=/#.*$/,i=/\.(md|html)$/,o=/\/$/,a=/^[a-z]+:/i;function s(t){return decodeURI(t).replace(r,"").replace(i,"")}function u(t){return a.test(t)}function c(t){return/^mailto:/.test(t)}function p(t){return/^tel:/.test(t)}function l(t){if(u(t))return t;const n=t.match(r),e=n?n[0]:"",i=s(t);return o.test(i)?t:i+".html"+e}function f(t,n){const e=decodeURIComponent(t.hash),i=function(t){const n=t.match(r);if(n)return n[0]}(n);if(i&&e!==i)return!1;return s(t.path)===s(n)}function h(t,n,e){if(u(n))return{type:"external",path:n};e&&(n=function(t,n,e){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return n+t;const i=n.split("/");e&&i[i.length-1]||i.pop();const o=t.replace(/^\//,"").split("/");for(let t=0;t<o.length;t++){const n=o[t];".."===n?i.pop():"."!==n&&i.push(n)}""!==i[0]&&i.unshift("");return i.join("/")}(n,e));const r=s(n);for(let n=0;n<t.length;n++)if(s(t[n].regularPath)===r)return Object.assign({},t[n],{type:"page",path:l(t[n].path)});return console.error(`[vuepress] No matching page found for sidebar item "${n}"`),{}}function d(t,n,e,r){const{pages:i,themeConfig:o}=e,a=r&&o.locales&&o.locales[r]||o;if("auto"===(t.frontmatter.sidebar||a.sidebar||o.sidebar))return g(t);const s=a.sidebar||o.sidebar;if(s){const{base:e,config:r}=function(t,n){if(Array.isArray(n))return{base:"/",config:n};for(const r in n)if(0===(e=t,/(\.html|\/)$/.test(e)?e:e+"/").indexOf(encodeURI(r)))return{base:r,config:n[r]};var e;return{}}(n,s);return"auto"===r?g(t):r?r.map(t=>function t(n,e,r,i=1){if("string"==typeof n)return h(e,n,r);if(Array.isArray(n))return Object.assign(h(e,n[0],r),{title:n[1]});{const o=n.children||[];return 0===o.length&&n.path?Object.assign(h(e,n.path,r),{title:n.title}):{type:"group",path:n.path,title:n.title,sidebarDepth:n.sidebarDepth,initialOpenGroupIndex:n.initialOpenGroupIndex,children:o.map(n=>t(n,e,r,i+1)),collapsable:!1!==n.collapsable}}}(t,i,e)):[]}return[]}function g(t){const n=v(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:n.map(n=>({type:"auto",title:n.title,basePath:t.path,path:t.path+"#"+n.slug,children:n.children||[]}))}]}function v(t){let n;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?n=t:n&&(n.children||(n.children=[])).push(t)}),t.filter(t=>2===t.level)}function b(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},295:function(t,n){t.exports=function(t){return null==t}},299:function(t,n,e){},308:function(t,n,e){var r=e(27),i=e(15),o=e(22);t.exports=function(t){return"string"==typeof t||!i(t)&&o(t)&&"[object String]"==r(t)}},309:function(t,n,e){"use strict";e(299)},324:function(t,n,e){"use strict";e.r(n);e(69);var r=e(290),i=e(308),o=e.n(i),a=e(295),s=e.n(a),u={name:"PageNav",props:["sidebarItems"],computed:{prev(){return p(c.PREV,this)},next(){return p(c.NEXT,this)}}};const c={NEXT:{resolveLink:function(t,n){return l(t,n,1)},getThemeLinkConfig:({nextLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.next},PREV:{resolveLink:function(t,n){return l(t,n,-1)},getThemeLinkConfig:({prevLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.prev}};function p(t,{$themeConfig:n,$page:e,$route:i,$site:a,sidebarItems:u}){const{resolveLink:c,getThemeLinkConfig:p,getPageLinkConfig:l}=t,f=p(n),h=l(e),d=s()(h)?f:h;return!1===d?void 0:o()(d)?Object(r.k)(a.pages,d,i.path):c(e,u)}function l(t,n,e){const r=[];!function t(n,e){for(let r=0,i=n.length;r<i;r++)"group"===n[r].type?t(n[r].children||[],e):e.push(n[r])}(n,r);for(let n=0;n<r.length;n++){const i=r[n];if("page"===i.type&&i.path===decodeURIComponent(t.path))return r[n+e]}}var f=u,h=(e(309),e(4)),d=Object(h.a)(f,(function(){var t=this,n=t._self._c;return t.prev||t.next?n("div",{staticClass:"page-nav"},[n("p",{staticClass:"inner"},[t.prev?n("span",{staticClass:"prev"},[t._v("\n      ←\n      "),"external"===t.prev.type?n("a",{staticClass:"prev",attrs:{href:t.prev.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n\n        "),n("OutboundLink")],1):n("RouterLink",{staticClass:"prev",attrs:{to:t.prev.path}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n      ")])],1):t._e(),t._v(" "),t.next?n("span",{staticClass:"next"},["external"===t.next.type?n("a",{attrs:{href:t.next.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n\n        "),n("OutboundLink")],1):n("RouterLink",{attrs:{to:t.next.path}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n      ")]),t._v("\n      →\n    ")],1):t._e()])]):t._e()}),[],!1,null,null,null);n.default=d.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/2.314c65b9.js b/docs-vuepress/.vuepress/dist/assets/js/2.314c65b9.js
deleted file mode 100644
index 2486bb7ec5..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/2.314c65b9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[2,17,25,27,28],{292:function(t,s,i){},302:function(t,s,i){"use strict";i(292)},303:function(t,s,i){"use strict";i.r(s);var e={props:{code:{type:String,default:""},title:{type:String,default:""}},data:()=>({isShow:!1,isClick:!1}),methods:{handleEnter(){this.isShow=!0},handleLeave(){this.isShow=!1},handleToggle(){this.isClick=!this.isClick,this.isShow=this.isClick}}},a=(i(302),i(4)),n=Object(a.a)(e,(function(){var t=this,s=t._self._c;return s("div",{staticClass:"popover"},[s("div",{staticClass:"popover__content",on:{click:t.handleToggle,mouseenter:t.handleEnter,mouseleave:t.handleLeave}},[t._t("default")],2),t._v(" "),s("div",{directives:[{name:"show",rawName:"v-show",value:t.isShow,expression:"isShow"}],staticClass:"popover__top"},[s("div",{staticClass:"popover__content"},[s("div",{staticClass:"popover__inner"},[t.code?s("img",{attrs:{width:"300",src:t.code,alt:"code",loading:"lazy"}}):t._e(),t._v(" "),t.title?s("div",[t._v(t._s(t.title))]):t._e()]),t._v(" "),s("div",{staticClass:"popover__arrow"})])])])}),[],!1,null,"8bac5638",null);s.default=n.exports},315:function(t,s,i){},318:function(t,s,i){},319:function(t,s,i){},332:function(t,s,i){"use strict";i(315)},334:function(t,s,i){"use strict";i(318)},335:function(t,s,i){"use strict";i(319)},346:function(t,s,i){},351:function(t,s,i){"use strict";i.r(s);var e={components:{Popover:i(303).default},props:{dataList:{type:Array,default:()=>[]}},data:()=>({current:-1}),methods:{handleEnter(t){this.current=t},handleLeave(){this.current=-1}}},a=(i(332),i(4)),n=Object(a.a)(e,(function(){var t=this._self._c;return t("div",{staticClass:"code-list"},this._l(this.dataList,(function(s,i){return t("div",{key:i,staticClass:"code-list__item"},[t("img",{attrs:{width:"150",height:"170",src:s.code,alt:"code",loading:"lazy"}})])})),0)}),[],!1,null,"76bf3aa2",null);s.default=n.exports},353:function(t,s,i){"use strict";i.r(s);i(69);var e={props:{dataList:{type:Array,default:()=>[]}},data:()=>({msg:"",current:0,resut:[],allWidth:0,timer:0}),mounted(){this.$nextTick(()=>{const t=this.$refs.list;if(!t.length)return;const s=[];let i=0;for(let e=0;e<t.length;e++){const a=t[e];i+=a.offsetWidth,s.push({width:a.offsetWidth,left:a.offsetLeft})}this.wrapper=this.$refs.wrapper,this.resut=s,this.allWidth=i,this.handleClick(0)})},computed:{leftButtonDisabled(){return 0===this.current?"swiper-disable":""},rightButtonDisabled(){return this.current===this.dataList.length-1?"swiper-disable":""}},methods:{handlePrev(){this.current-1>-1&&(clearInterval(this.timer),this.handleClick(this.current-1))},handleNext(){this.current+1<this.dataList.length&&(clearInterval(this.timer),this.handleClick(this.current+1))},handleClick(t){this.current=t,this.$emit("change",t)},handleEnd(){const t=Math.floor(this.resut[this.current].left)-this.wrapper.scrollLeft,s=this.wrapper.scrollLeft,i=Math.floor(this.wrapper.offsetWidth/2)-Math.floor(this.resut[this.current].width/2),e=this.allWidth-this.wrapper.offsetWidth;let a=s+(t-i);a<0&&(a=0),a>e&&(a=e),this.allWidth>this.wrapper.offsetWidth&&s!==a&&this.animationScroll(a)},animationScroll(t){const s=this.allWidth-this.wrapper.offsetWidth,i=this.wrapper.scrollLeft,e=Math.floor(Math.abs((i-t)/200*20));let a=0;clearInterval(this.timer),this.timer=setInterval(()=>{if(a&&this.wrapper.scrollLeft!==a)return clearInterval(this.timer);if(t>i){const i=this.wrapper.scrollLeft+e;i>t||i>=s?(clearInterval(this.timer),this.wrapper.scrollLeft=t):(this.wrapper.scrollLeft=i,a=i)}else{const s=this.wrapper.scrollLeft-e;s<t||s<=0?(clearInterval(this.timer),this.wrapper.scrollLeft=t):(this.wrapper.scrollLeft=s,a=s)}},20)}}},a=(i(334),i(4)),n=Object(a.a)(e,(function(){var t=this,s=t._self._c;return s("div",{staticClass:"swiper-container"},[s("div",{staticClass:"swiper-button"},[s("img",{staticClass:"swiper-img",class:t.leftButtonDisabled,attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/0cgzDC8Apn/anli_icon_left.png",width:"50",height:"50",alt:"left",loading:"lazy"},on:{click:t.handlePrev}})]),t._v(" "),s("div",{ref:"wrapper",staticClass:"swiper"},t._l(t.dataList,(function(i,e){return s("div",{key:e,ref:"list",refInFor:!0,class:["swiper-list",t.current===e?"active":""],on:{click:function(s){return t.handleClick(e)},transitionend:t.handleEnd}},[s("div",{staticClass:"swiper-item"},[s("div",[s("div",[s("img",{attrs:{width:"80",height:"80",src:i.img,alt:"二维码",loading:"lazy"}})]),t._v(" "),s("div",[t._v(t._s(i.title))])])])])})),0),t._v(" "),s("div",{staticClass:"swiper-button"},[s("img",{staticClass:"swiper-img",class:t.rightButtonDisabled,attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/QhD6ulEP7k/anli_icon_right.png",width:"50",height:"50",alt:"right",loading:"lazy"},on:{click:t.handleNext}})])])}),[],!1,null,"5724bcdd",null);s.default=n.exports},354:function(t,s,i){"use strict";i.r(s);var e={props:{dataList:{type:Array,default:()=>[]},currentIndex:{type:Number,default:0}},data:()=>({translateX:0}),computed:{getStyle(){return{transform:`translate3d(${188*-this.currentIndex}px, 0, 0)`}}},watch:{currentIndex(t){}}},a=(i(335),i(4)),n=Object(a.a)(e,(function(){var t=this._self._c;return t("div",{staticClass:"swiper-img"},[t("div",{staticClass:"swiper-img__list",style:this.getStyle},this._l(this.dataList,(function(s,i){return t("div",{key:i,staticClass:"swiper-img__wrap"},[t("img",{attrs:{width:"188",height:"410",src:s.demo,alt:"img",loading:"lazy"}})])})),0)])}),[],!1,null,"60490726",null);s.default=n.exports},365:function(t,s,i){"use strict";i(346)},370:function(t,s,i){"use strict";i.r(s);i(69);var e=i(353),a=i(354),n=i(351),r={data:()=>({currentIndex:0}),computed:{list(){let t=[],s=this.$page.frontmatter.sixSection.details,i=[],e=0;for(;e<s.length;)e%3==0&&(i=[],t.push(i)),i.push(s[e]),e++;return t},dataList(){return this.$page.frontmatter.sevenSection.details},mvcList(){return this.$page.frontmatter.threeSection.list},currentTitle(){return this.dataList[this.currentIndex].title}},components:{Swiper:e.default,SwiperImg:a.default,CodeList:n.default},methods:{handleChange(t){this.currentIndex=t}}},c=(i(365),i(4)),l=Object(c.a)(r,(function(){var t=this,s=t._self._c;return s("div",{staticStyle:{position:"relative",overflow:"hidden","min-width":"950px",background:"#f5f5f5"}},[s("div",{staticClass:"one-section__img1"}),t._v(" "),s("div",{staticClass:"one-section__img2"}),t._v(" "),s("section",{staticClass:"one-section"},[s("div",{staticClass:"one-section__inner one-section__content"},[s("div",{staticStyle:{display:"inline-block"}},[s("h2",{staticClass:"one-section__title"},[t._v(t._s(t.$page.frontmatter.heroText))]),t._v(" "),s("p",{staticClass:"one-section__desc"},[t._v("\n            "+t._s(t.$page.frontmatter.tagline)+"\n          ")]),t._v(" "),s("button",{staticClass:"one-section__btn one-section__enter"},[s("a",{staticClass:"white-link",attrs:{href:t.$page.frontmatter.actionLink}},[t._v("\n              "+t._s(t.$page.frontmatter.actionText)+"\n            ")])]),t._v(" "),s("button",{staticClass:"one-section__btn one-section__github"},[s("a",{staticClass:"blue-link",attrs:{href:t.$page.frontmatter.githubLink,target:"_blank"}},[t._v("\n              "+t._s(t.$page.frontmatter.githubText)+"\n            ")])])])]),t._v(" "),s("div",{staticClass:"one-section__inner"})]),t._v(" "),s("section",{staticClass:"two-section"},[s("ul",{staticClass:"row"},t._l(t.$page.frontmatter.features,(function(i,e){return s("li",{key:e,staticClass:"two-section__item"},[s("img",{attrs:{src:i.icon,alt:"svg",loading:"lazy",width:"80",height:"80"}}),t._v(" "),s("p",{staticClass:"two-section__title"},[t._v(t._s(i.title))]),t._v(" "),s("p",{staticClass:"two-section__desc"},[t._v(t._s(i.details))]),t._v(" "),s("div",{staticClass:"two-section__line"})])})),0)]),t._v(" "),s("section",{staticClass:"three-section",style:{backgroundImage:`url(${t.$page.frontmatter.threeSection.bg})`}},[s("div",{staticClass:"three-section__inner"},[t._m(0),t._v(" "),s("div",{staticClass:"three-section__mvc"},[s("div",[s("span",{staticClass:"dot-inner",staticStyle:{background:"#fff",margin:"0 auto"}}),t._v(" "),s("p",{staticClass:"white-text title"},[t._v(t._s(t.$page.frontmatter.threeSection.title))]),t._v(" "),t._m(1)]),t._v(" "),s("code-list",{attrs:{dataList:t.mvcList}})],1)])]),t._v(" "),s("section",{staticClass:"section four-section"},[s("div",{staticClass:"grow four-section__bg",style:{backgroundImage:`url(${t.$page.frontmatter.fourSection.bg})`}}),t._v(" "),s("div",{staticClass:"four-section__inner"},[s("div",{staticClass:"grow",staticStyle:{position:"relative"}},[s("img",{attrs:{width:"412",src:t.$page.frontmatter.fourSection.img,alt:"svg",loading:"lazy"}})]),t._v(" "),s("div",{staticClass:"four-section__text grow"},[s("div",{staticStyle:{"margin-left":"86px"}},[s("div",[s("span",{staticClass:"dot-inner"}),t._v(" "),s("p",{staticClass:"title"},[t._v(t._s(t.$page.frontmatter.fourSection.title))]),t._v(" "),s("p",{staticClass:"desc"},[t._v("\n                "+t._s(t.$page.frontmatter.fourSection.details)+"\n              ")])]),t._v(" "),s("button",{staticClass:"btn"},[s("a",{staticClass:"white-link",attrs:{href:t.$page.frontmatter.fourSection.actionLink}},[t._v("\n                "+t._s(t.$page.frontmatter.fourSection.actionText)+"\n              ")])])])])])]),t._v(" "),s("section",{staticClass:"section five-section"},[s("div",{staticClass:"grow five-section__bg",style:{backgroundImage:`url(${t.$page.frontmatter.fiveSection.bg})`}}),t._v(" "),s("div",{staticClass:"five-section__inner"},[s("div",{staticClass:"five-section__text grow"},[s("div",{staticStyle:{"margin-right":"86px"}},[s("div",[s("span",{staticClass:"dot-inner"}),t._v(" "),s("p",{staticClass:"title"},[t._v(t._s(t.$page.frontmatter.fiveSection.title))]),t._v(" "),s("p",{staticClass:"desc"},[t._v("\n                "+t._s(t.$page.frontmatter.fiveSection.details)+"\n              ")])]),t._v(" "),s("button",{staticClass:"btn"},[s("a",{staticClass:"white-link",attrs:{href:t.$page.frontmatter.fiveSection.actionLink}},[t._v("\n                "+t._s(t.$page.frontmatter.fiveSection.actionText)+"\n              ")])])])]),t._v(" "),s("div",{staticClass:"grow",staticStyle:{position:"relative",display:"flex","justify-content":"flex-end"}},[s("img",{attrs:{width:"412",src:t.$page.frontmatter.fiveSection.img,alt:"svg",loading:"lazy"}})])])]),t._v(" "),s("section",{staticClass:"six-section",style:{backgroundImage:`url(${t.$page.frontmatter.sixSection.bg})`}},[s("div",{staticClass:"six-section__inner"},[t._m(2),t._v(" "),s("p",{staticClass:"title six-section__title"},[t._v(t._s(t.$page.frontmatter.sixSection.title))]),t._v(" "),t._l(t.list,(function(i,e){return s("ul",{key:e,staticClass:"row six-section__row"},t._l(i,(function(i,e){return s("li",{key:e},[s("a",{staticClass:"six-section__item six-section__step",attrs:{href:i.actionLink}},[s("div",{staticClass:"six-section__icon"},[s("img",{attrs:{src:i.icon,alt:"svg",loading:"lazy",width:"50",height:"50"}})]),t._v(" "),s("div",{staticClass:"six-section__list"},[s("div",{staticClass:"six-section__bold"},[t._v(t._s(i.title))]),t._v(" "),s("div",[t._v(t._s(i.details))])])])])})),0)}))],2)]),t._v(" "),s("section",{staticClass:"seven-section"},[s("span",{staticClass:"dot-inner"}),t._v(" "),s("p",{staticClass:"title"},[t._v(t._s(t.$page.frontmatter.sevenSection.title))]),t._v(" "),s("div",{staticClass:"row seven-section__wrap"},[s("div",{staticClass:"grow"},[s("p",{staticClass:"seven-section__title"},[t._v("\n            "+t._s(t.currentTitle)+"\n          ")]),t._v(" "),s("p",{staticClass:"seven-section__desc"})]),t._v(" "),s("div",{staticClass:"grow seven-section__center",style:{backgroundImage:`url(${t.$page.frontmatter.sevenSection.bg})`}},[t._m(3),t._v(" "),s("div",{staticClass:"seven-section__inner"},[s("swiper-img",{attrs:{dataList:t.dataList,currentIndex:t.currentIndex}})],1)]),t._v(" "),s("div",{staticClass:"grow"})]),t._v(" "),s("swiper",{attrs:{dataList:t.dataList},on:{change:t.handleChange}})],1)])}),[function(){var t=this._self._c;return t("div",[t("div",{staticClass:"three-section__todo"},[t("div",{staticClass:"three-section__phone"},[t("img",{attrs:{width:"410",height:"712",src:"https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png",alt:"phone",loading:"lazy"}})]),this._v(" "),t("div",{staticClass:"three-section__iframe"},[t("iframe",{attrs:{title:"todo示例",scrolling:"no",width:"325",height:"617",src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/index.html",frameborder:"0"}})])])])},function(){var t=this._self._c;return t("p",{staticClass:"white-text desc"},[this._v("\n              扫码体验Mpx版本的\n              "),t("a",{staticClass:"target-link",attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC"}},[this._v("todoMVC")]),this._v("\n              在各个小程序平台和web中的一致表现 ，更多示例项目可点击\n              "),t("a",{staticClass:"target-link",attrs:{href:"https://github.com/didi/mpx/tree/master/examples"}},[this._v("这里")]),this._v("\n              进入查看。\n            ")])},function(){var t=this._self._c;return t("div",{staticStyle:{"text-align":"center"}},[t("span",{staticClass:"dot-inner",staticStyle:{background:"#fff",margin:"0 auto"}})])},function(){var t=this._self._c;return t("div",{staticClass:"seven-section_phone"},[t("img",{attrs:{width:"213",height:"433",src:"https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png",alt:"phone",loading:"lazy"}})])}],!1,null,"2d48710e",null);s.default=l.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/20.e9cd4de3.js b/docs-vuepress/.vuepress/dist/assets/js/20.e9cd4de3.js
deleted file mode 100644
index e44ef72709..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/20.e9cd4de3.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return o})),n.d(e,"g",(function(){return c})),n.d(e,"h",(function(){return l})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return h})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return m}));n(69),n(10),n(19),n(48),n(30);const r=/#.*$/,i=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function u(t){return decodeURI(t).replace(r,"").replace(i,"")}function o(t){return s.test(t)}function c(t){return/^mailto:/.test(t)}function l(t){return/^tel:/.test(t)}function p(t){if(o(t))return t;const e=t.match(r),n=e?e[0]:"",i=u(t);return a.test(i)?t:i+".html"+n}function f(t,e){const n=decodeURIComponent(t.hash),i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return u(t.path)===u(e)}function d(t,e,n){if(o(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;t<a.length;t++){const e=a[t];".."===e?i.pop():"."!==e&&i.push(e)}""!==i[0]&&i.unshift("");return i.join("/")}(e,n));const r=u(e);for(let e=0;e<t.length;e++)if(u(t[e].regularPath)===r)return Object.assign({},t[e],{type:"page",path:p(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function h(t,e,n,r){const{pages:i,themeConfig:a}=n,s=r&&a.locales&&a.locales[r]||a;if("auto"===(t.frontmatter.sidebar||s.sidebar||a.sidebar))return b(t);const u=s.sidebar||a.sidebar;if(u){const{base:n,config:r}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,u);return"auto"===r?b(t):r?r.map(t=>function t(e,n,r,i=1){if("string"==typeof e)return d(n,e,r);if(Array.isArray(e))return Object.assign(d(n,e[0],r),{title:e[1]});{const a=e.children||[];return 0===a.length&&e.path?Object.assign(d(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(t,i,n)):[]}return[]}function b(t){const e=g(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function g(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},300:function(t,e,n){},312:function(t,e,n){"use strict";n(313)},313:function(t,e,n){"use strict";var r=n(14),i=n(49),a=n(11),s=n(5),u=n(26);r({target:"Iterator",proto:!0,real:!0},{find:function(t){s(this),a(t);var e=u(this),n=0;return i(e,(function(e,r){if(t(e,n++))return r(e)}),{IS_RECORD:!0,INTERRUPTED:!0}).result}})},314:function(t,e,n){"use strict";n(300)},327:function(t,e,n){"use strict";n.r(e);n(10),n(312),n(30),n(47);var r=n(290);function i(t,e,n,r,i){const a={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:r,"sidebar-link":!0}};return i>2&&(a.style={"padding-left":i+"rem"}),t("RouterLink",a,n)}function a(t,e,n,s,u,o=1){return!e||o>u?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const c=Object(r.e)(s,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[i(t,n+"#"+e.slug,e.title,c,e.level-1),a(t,e.children,n,s,u,o+1)])}))}var s={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:s,$themeConfig:u,$themeLocaleConfig:o},props:{item:c,sidebarDepth:l}}){const p=Object(r.e)(s,c.path),f="auto"===c.type?p||c.children.some(t=>Object(r.e)(s,c.basePath+"#"+t.slug)):p,d="external"===c.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,c.path,c.title||c.path):i(t,c.path,c.title||c.path,f),h=[e.frontmatter.sidebarDepth,l,o.sidebarDepth,u.sidebarDepth,1].find(t=>void 0!==t),b=o.displayAllHeaders||u.displayAllHeaders;if("auto"===c.type)return[d,a(t,c.children,c.basePath,s,h)];if((f||b)&&c.headers&&!r.d.test(c.path)){return[d,a(t,Object(r.c)(c.headers),c.path,s,h)]}return d}},u=(n(314),n(4)),o=Object(u.a)(s,void 0,void 0,!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/21.217f8fa9.js b/docs-vuepress/.vuepress/dist/assets/js/21.217f8fa9.js
deleted file mode 100644
index cc9c7ea89c..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/21.217f8fa9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[21,34],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return f})),n.d(e,"e",(function(){return h})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return p})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return b}));n(69),n(10),n(19),n(48),n(30);const i=/#.*$/,r=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function l(t){return s.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function f(t){if(l(t))return t;const e=t.match(i),n=e?e[0]:"",r=o(t);return a.test(r)?t:r+".html"+n}function h(t,e){const n=decodeURIComponent(t.hash),r=function(t){const e=t.match(i);if(e)return e[0]}(e);if(r&&n!==r)return!1;return o(t.path)===o(e)}function d(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const r=e.split("/");n&&r[r.length-1]||r.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;t<a.length;t++){const e=a[t];".."===e?r.pop():"."!==e&&r.push(e)}""!==r[0]&&r.unshift("");return r.join("/")}(e,n));const i=o(e);for(let e=0;e<t.length;e++)if(o(t[e].regularPath)===i)return Object.assign({},t[e],{type:"page",path:f(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function p(t,e,n,i){const{pages:r,themeConfig:a}=n,s=i&&a.locales&&a.locales[i]||a;if("auto"===(t.frontmatter.sidebar||s.sidebar||a.sidebar))return m(t);const o=s.sidebar||a.sidebar;if(o){const{base:n,config:i}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,o);return"auto"===i?m(t):i?i.map(t=>function t(e,n,i,r=1){if("string"==typeof e)return d(n,e,i);if(Array.isArray(e))return Object.assign(d(n,e[0],i),{title:e[1]});{const a=e.children||[];return 0===a.length&&e.path?Object.assign(d(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(t,r,n)):[]}return[]}function m(t){const e=g(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function g(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function b(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},293:function(t,e,n){"use strict";n.r(e);n(10),n(47);var i=n(290),r={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(i.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},a=n(4),s=Object(a.a)(r,(function(){var t=this,e=t._self._c;return t.isInternal?e("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?e("OutboundLink"):t._e()],1)}),[],!1,null,null,null);e.default=s.exports},305:function(t,e,n){},328:function(t,e,n){"use strict";n(305)},348:function(t,e,n){"use strict";n.r(e);var i={name:"Home",components:{NavLink:n(293).default},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},r=(n(328),n(4)),a=Object(r.a)(i,(function(){var t=this,e=t._self._c;return e("main",{staticClass:"home",attrs:{"aria-labelledby":null!==t.data.heroText?"main-title":null}},[e("header",{staticClass:"hero"},[t.data.heroImage?e("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?e("h1",{attrs:{id:"main-title"}},[t._v("\n      "+t._s(t.data.heroText||t.$title||"Hello")+"\n    ")]):t._e(),t._v(" "),null!==t.data.tagline?e("p",{staticClass:"description"},[t._v("\n      "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n    ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?e("p",{staticClass:"action"},[e("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?e("div",{staticClass:"features"},t._l(t.data.features,(function(n,i){return e("div",{key:i,staticClass:"feature"},[e("h2",[t._v(t._s(n.title))]),t._v(" "),e("p",[t._v(t._s(n.details))])])})),0):t._e(),t._v(" "),e("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?e("div",{staticClass:"footer"},[t._v("\n    "+t._s(t.data.footer)+"\n  ")]):e("Content",{staticClass:"footer",attrs:{"slot-key":"footer"}})],1)}),[],!1,null,null,null);e.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/22.4cd3344f.js b/docs-vuepress/.vuepress/dist/assets/js/22.4cd3344f.js
deleted file mode 100644
index 183c6a3cb9..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/22.4cd3344f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return c})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return l})),n.d(e,"b",(function(){return d})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return f})),n.d(e,"l",(function(){return h})),n.d(e,"c",(function(){return m})),n.d(e,"j",(function(){return b}));n(69),n(10),n(19),n(48),n(30);const i=/#.*$/,r=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function c(t){return s.test(t)}function u(t){return/^mailto:/.test(t)}function l(t){return/^tel:/.test(t)}function d(t){if(c(t))return t;const e=t.match(i),n=e?e[0]:"",r=o(t);return a.test(r)?t:r+".html"+n}function p(t,e){const n=decodeURIComponent(t.hash),r=function(t){const e=t.match(i);if(e)return e[0]}(e);if(r&&n!==r)return!1;return o(t.path)===o(e)}function f(t,e,n){if(c(e))return{type:"external",path:e};n&&(e=function(t,e,n){const i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;const r=e.split("/");n&&r[r.length-1]||r.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;t<a.length;t++){const e=a[t];".."===e?r.pop():"."!==e&&r.push(e)}""!==r[0]&&r.unshift("");return r.join("/")}(e,n));const i=o(e);for(let e=0;e<t.length;e++)if(o(t[e].regularPath)===i)return Object.assign({},t[e],{type:"page",path:d(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function h(t,e,n,i){const{pages:r,themeConfig:a}=n,s=i&&a.locales&&a.locales[i]||a;if("auto"===(t.frontmatter.sidebar||s.sidebar||a.sidebar))return g(t);const o=s.sidebar||a.sidebar;if(o){const{base:n,config:i}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const i in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(i)))return{base:i,config:e[i]};var n;return{}}(e,o);return"auto"===i?g(t):i?i.map(t=>function t(e,n,i,r=1){if("string"==typeof e)return f(n,e,i);if(Array.isArray(e))return Object.assign(f(n,e[0],i),{title:e[1]});{const a=e.children||[];return 0===a.length&&e.path?Object.assign(f(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map(e=>t(e,n,i,r+1)),collapsable:!1!==e.collapsable}}}(t,r,n)):[]}return[]}function g(t){const e=m(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function b(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},295:function(t,e){t.exports=function(t){return null==t}},298:function(t,e,n){},307:function(t,e,n){"use strict";n(298)},323:function(t,e,n){"use strict";n.r(e);var i=n(295),r=n.n(i),a=n(290),s={name:"PageEdit",computed:{lastUpdated(){return this.$page.lastUpdated},lastUpdatedText(){return"string"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:"string"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:"Last Updated"},editLink(){const t=r()(this.$page.frontmatter.editLink)?this.$site.themeConfig.editLinks:this.$page.frontmatter.editLink,{repo:e,docsDir:n="",docsBranch:i="master",docsRepo:a=e}=this.$site.themeConfig;return t&&a&&this.$page.relativePath?this.createEditLink(e,a,n,i,this.$page.relativePath):null},editLinkText(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||"Edit this page"}},methods:{createEditLink(t,e,n,i,r){if(/bitbucket.org/.test(e)){return e.replace(a.a,"")+"/src"+`/${i}/`+(n?n.replace(a.a,"")+"/":"")+r+`?mode=edit&spa=0&at=${i}&fileviewer=file-view-default`}if(/gitlab.com/.test(e)){return e.replace(a.a,"")+"/-/edit"+`/${i}/`+(n?n.replace(a.a,"")+"/":"")+r}return(a.i.test(e)?e:"https://github.com/"+e).replace(a.a,"")+"/edit"+`/${i}/`+(n?n.replace(a.a,"")+"/":"")+r}}},o=(n(307),n(4)),c=Object(o.a)(s,(function(){var t=this,e=t._self._c;return e("footer",{staticClass:"page-edit"},[t.editLink?e("div",{staticClass:"edit-link"},[e("a",{attrs:{href:t.editLink,target:"_blank",rel:"noopener noreferrer"}},[t._v(t._s(t.editLinkText))]),t._v(" "),e("OutboundLink")],1):t._e(),t._v(" "),t.lastUpdated?e("div",{staticClass:"last-updated"},[e("span",{staticClass:"prefix"},[t._v(t._s(t.lastUpdatedText)+":")]),t._v(" "),e("span",{staticClass:"time"},[t._v(t._s(t.lastUpdated))])]):t._e()])}),[],!1,null,null,null);e.default=c.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/23.365f9a87.js b/docs-vuepress/.vuepress/dist/assets/js/23.365f9a87.js
deleted file mode 100644
index 342300a185..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/23.365f9a87.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[23,29],{321:function(e,t,o){},337:function(e,t,o){"use strict";o(321)},356:function(e,t,o){"use strict";o.r(t);o(10),o(19),o(30);const a=[{text:"全局配置",items:[{link:"app-config",text:"",headers:[{text:"useStrictDiff",anchor:"#useStrictDiff"},{text:"ignoreWarning",anchor:"#ignoreWarning"},{text:"ignoreProxyWhiteList",anchor:"#ignoreProxyWhiteList"},{text:"observeClassInstance",anchor:"#observeClassInstance"},{text:"proxyEventHandler",anchor:"#proxyEventHandler"},{text:"setDataHandler",anchor:"#setDataHandler"},{text:"forceFlushSync",anchor:"#forceFlushSync"},{text:"webRouteConfig",anchor:"#webRouteConfig"},{text:"webConfig",anchor:"#webConfig"}]}]},{text:"全局 API",items:[{link:"global-api",text:"全局对象 Mpx",headers:[{text:"mixin",anchor:"#mixin"},{text:"injectMixins",anchor:"#injectMixins"},{text:"observable",anchor:"#observable"},{text:"set",anchor:"#set"},{text:"delete",anchor:"#delete"},{text:"use",anchor:"#use"},{text:"watch",anchor:"#watch"}]},{link:"global-api",text:"基础 API",headers:[{text:"createApp",anchor:"#createApp"},{text:"createPage",anchor:"#createPage"},{text:"createComponent",anchor:"#createComponent"},{text:"nextTick",anchor:"#nextTick"},{text:"toPureObject",anchor:"#toPureObject"},{text:"getMixin",anchor:"#getMixin"},{text:"implement",anchor:"#implement"}]},{link:"global-api",text:"内建生命周期变量",headers:[{text:"BEFORECREATE",anchor:"#BEFORECREATE"},{text:"CREATED",anchor:"#CREATED"},{text:"BEFOREMOUNT",anchor:"#BEFOREMOUNT"},{text:"MOUNTED",anchor:"#MOUNTED"},{text:"BEFOREUPDATE",anchor:"#BEFOREUPDATE"},{text:"UPDATED",anchor:"#UPDATED"},{text:"BEFOREUNMOUNT",anchor:"#BEFOREUNMOUNT"},{text:"UNMOUNTED",anchor:"#UNMOUNTED"},{text:"ONLOAD",anchor:"#ONLOAD"},{text:"ONSHOW",anchor:"#ONSHOW"},{text:"ONHIDE",anchor:"#ONHIDE"},{text:"ONRESIZE",anchor:"#ONRESIZE"}]},{link:"store-api",text:"Store API",headers:[{text:"createStore",anchor:"#createStore"},{text:"createStoreWithThis",anchor:"#createStoreWithThis"},{text:"createStateWithThis",anchor:"#createStateWithThis"},{text:"createGettersWithThis",anchor:"#createGettersWithThis"},{text:"createMutationsWithThis",anchor:"#createMutationsWithThis"},{text:"createActionsWithThis",anchor:"#createActionsWithThis"}]}]},{text:"响应式 API",items:[{link:"reactivity-api",text:"响应式基础 API",headers:[{text:"set",anchor:"#set"},{text:"del",anchor:"#del"},{text:"reactive",anchor:"#reactive"},{text:"isReactive",anchor:"#isReactive"},{text:"markRaw",anchor:"#markRaw"},{text:"shallowReactive",anchor:"#shallowReactive"}]},{link:"reactivity-api",text:"Refs",headers:[{text:"ref",anchor:"#ref"},{text:"unref",anchor:"#unref"},{text:"toRef",anchor:"#toRef"},{text:"toRefs",anchor:"#toRefs"},{text:"isRef",anchor:"#isRef"},{text:"customRef",anchor:"#customRef"},{text:"shallowRef",anchor:"#shallowRef"},{text:"triggerRef",anchor:"#triggerRef"}]},{link:"reactivity-api",text:"Computed 与 Watch",headers:[{text:"computed",anchor:"#computed"},{text:"watchEffect",anchor:"#watchEffect"},{text:"watchSyncEffect",anchor:"#watchSyncEffect"},{text:"watchPostEffect",anchor:"#watchPostEffect"},{text:"watch",anchor:"#watch"}]},{link:"reactivity-api",text:"Effect 作用域 API",headers:[{text:"effectScope",anchor:"#effectScope"},{text:"getCurrentScope",anchor:"#getCurrentScope"},{text:"onScopeDispose",anchor:"#onScopeDispose"}]}]},{text:"组合式 API",items:[{link:"composition-api",text:"生命周期钩子",headers:[{text:"onBeforeMount",anchor:"#onBeforeMount"},{text:"onMounted",anchor:"#onMounted"},{text:"onBeforeUpdate",anchor:"#onBeforeUpdate"},{text:"onUpdated",anchor:"#onUpdated"},{text:"onBeforeUnmount",anchor:"#onBeforeUnmount"},{text:"onUnmount",anchor:"#onUnmount"},{text:"onLoad",anchor:"#onLoad"},{text:"onShow",anchor:"#onShow"},{text:"onHide",anchor:"#onHide"},{text:"onResize",anchor:"#onResize"},{text:"onPullDownRefresh",anchor:"#onPullDownRefresh"},{text:"onReachBottom",anchor:"#onReachBottom"},{text:"onShareAppMessage",anchor:"#onShareAppMessage"},{text:"onShareTimeline",anchor:"#onShareTimeline"},{text:"onAddToFavorites",anchor:"#onAddToFavorites"},{text:"onPageScroll",anchor:"#onPageScroll"},{text:"onTabItemTap",anchor:"#onTabItemTap"},{text:"onSaveExitState",anchor:"#onSaveExitState"}]},{link:"composition-api",text:"其他",headers:[{text:"setup",anchor:"#setup"},{text:"getCurrentInstance",anchor:"#getCurrentInstance"},{text:"useI18n",anchor:"#useI18n"},{text:"useFetch",anchor:"#useFetch"}]}]},{text:"选项式 API",items:[{link:"instance-api",text:"实例 API",headers:[{text:"$set",anchor:"#$set"},{text:"$watch",anchor:"#$watch"},{text:"$delete",anchor:"#$delete"},{text:"$refs",anchor:"#$refs"},{text:"$asyncRefs",anchor:"#$asyncRefs"},{text:"$forceUpdate",anchor:"#$forceUpdate"},{text:"$nextTick",anchor:"#$nextTick"},{text:"$i18n",anchor:"#$i18n"},{text:"$rawOptions",anchor:"#$rawOptions"}]}]},{text:"内置相关",items:[{link:"directives",text:"模版指令 (1)",headers:[{text:"wx:if",anchor:"#wx-if"},{text:"wx:elif",anchor:"#wx-elif"},{text:"wx:else",anchor:"#wx-else"},{text:"wx:for",anchor:"#wx-for"},{text:"wx:for-index",anchor:"#wx-for-index"},{text:"wx:for-item",anchor:"#wx-for-item"},{text:"wx:key",anchor:"#wx-key"},{text:"wx:class",anchor:"#wx-class"},{text:"wx:style",anchor:"#wx-style"}]},{link:"directives",text:"模版指令 (2)",headers:[{text:"wx:model",anchor:"#wx-model"},{text:"wx:model-prop",anchor:"#wx-model-prop"},{text:"wx:model-event",anchor:"#wx-model-event"},{text:"wx:model-value-path",anchor:"#wx-model-value-path"},{text:"wx:model-filter",anchor:"#wx-model-filter"},{text:"wx:ref",anchor:"#wx-ref"},{text:"wx:show",anchor:"#wx-show"},{text:"bind",anchor:"#bind"},{text:"catch",anchor:"#catch"},{text:"capture-bind",anchor:"#capture-bind"},{text:"capture-catch",anchor:"#capture-catch"}]},{link:"builtIn",text:"内建组件",headers:[{text:"component",anchor:"#component"},{text:"slot",anchor:"#slot"}]}]},{text:"编译构建",items:[{link:"compile",text:"webpack 配置",headers:[{text:"output.publicPath",anchor:"#output-publicPath"},{text:"output.filename",anchor:"#output-filename"},{text:"node.global",anchor:"#node-global"},{text:"rule.resourceQuery",anchor:"#rule-resourceQuery"},{text:"resolve.extensions",anchor:"#resolve-extensions"}]},{link:"compile",text:"MpxWebpackPlugin options (1)",headers:[{text:"mode",anchor:"#mode"},{text:"srcMode",anchor:"#srcMode"},{text:"modeRules",anchor:"#modeRules"},{text:"externalClasses",anchor:"#externalClasses"},{text:"resolveMode",anchor:"#resolveMode"},{text:"projectRoot",anchor:"#projectRoot"},{text:"writeMode",anchor:"#writeMode"},{text:"autoScopeRules",anchor:"#autoScopeRules"},{text:"catch",anchor:"#catch"},{text:"forceDisableProxyCtor",anchor:"#forceDisableProxyCtor"},{text:"transMpxRules",anchor:"#transMpxRules"}]},{link:"compile",text:"MpxWebpackPlugin options (2)",headers:[{text:"forceProxyEventRules",anchor:"#forceProxyEventRules"},{text:"autoSplit",anchor:"#autoSplit"},{text:"defs",anchor:"#defs"},{text:"attributes",anchor:"#attributes"},{text:"externals",anchor:"#externals"},{text:"miniNpmPackage",anchor:"#miniNpmPackage"},{text:"forceUsePageCtor",anchor:"#forceUsePageCtor"},{text:"transRpxRules",anchor:"#transRpxRules"},{text:"postcssInlineConfig",anchor:"#postcssInlineConfig"},{text:"decodeHTMLText",anchor:"#decodeHTMLText"},{text:"nativeConfig",anchor:"#nativeConfig"},{text:"webConfig",anchor:"#webConfig"},{text:"i18n",anchor:"#i18n"},{text:"auditResource",anchor:"#auditResource"},{text:"subpackageModulesRules",anchor:"#subpackageModulesRules"},{text:"generateBuildMap",anchor:"#generateBuildMap"},{text:"autoVirtualHostRules",anchor:"#autoVirtualHostRules"},{text:"partialCompileRules",anchor:"#partialCompileRules"}]},{link:"compile",text:"MpxWebpackPlugin static methods",headers:[{text:"MpxWebpackPlugin.loader",anchor:"#mpxwebpackplugin-loader"},{text:"MpxWebpackPlugin.pluginLoader",anchor:"#mpxwebpackplugin-pluginloader"},{text:"MpxWebpackPlugin.wxsPreLoader",anchor:"#mpxwebpackplugin-wxspreloader"},{text:"MpxWebpackPlugin.fileLoader",anchor:"#mpxwebpackplugin-fileloader"},{text:"MpxWebpackPlugin.urlLoader",anchor:"#mpxwebpackplugin-urlloader"}]},{link:"compile",text:"Request query",headers:[{text:"?resolve",anchor:"#resolve"},{text:"?root",anchor:"#root"},{text:"?fallback",anchor:"#fallback"},{text:"?useLocal",anchor:"#useLocal"},{text:"?isStyle",anchor:"#isStyle"},{text:"?isPage",anchor:"#isPage"},{text:"?isComponent",anchor:"#isComponent"},{text:"?async",anchor:"#async"}]}]},{text:"周边拓展",items:[{link:"extend",text:"@mpxjs/fetch",headers:[{text:"fetch",anchor:"#fetch"},{text:"CancelToken",anchor:"#CancelToken"},{text:"XFetch",anchor:"#XFetch"},{text:"interceptors",anchor:"#interceptors"},{text:"proxy 代理",anchor:"#proxy"},{text:"useFetch",anchor:"#useFetch"}]},{link:"extend",text:"其他",headers:[{text:"api-proxy",anchor:"#api-proxy"},{text:"webview-bridge",anchor:"#webview-bridge"},{text:"size-report",anchor:"#size-report"},{text:"i18n",anchor:"#i18n"}]}]}],n=e=>e.toLowerCase().replace(/-/g," ");var r={data:()=>({query:""}),computed:{filtered(){const e=n(this.query),t=t=>n(t).includes(e);return a.map(e=>{if(t(e.text))return e;const o=e.items.map(e=>{if(t(e.text))return e;const o=e.headers.filter(({text:e,anchor:o})=>t(e)||t(o));return o.length?{text:e.text,link:e.link,headers:o}:null}).filter(e=>e);return o.length?{text:e.text,items:o}:null}).filter(e=>e)}},methods:{slugify:e=>e.replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g,"-").replace(/\-{2,}/g,"-").replace(/^\-+|\-+$/g,"").replace(/^(\d)/,"_$1").toLowerCase()}},c=(o(337),o(4)),i=Object(c.a)(r,(function(){var e=this,t=e._self._c;return t("div",{attrs:{id:"api-index"}},[t("div",{staticClass:"header"},[t("h1",[e._v("API 参考")]),e._v(" "),t("div",{staticClass:"api-filter"},[t("label",{attrs:{for:"api-filter"}},[e._v("过滤")]),e._v(" "),t("input",{directives:[{name:"model",rawName:"v-model",value:e.query,expression:"query"}],attrs:{type:"search",placeholder:"Enter keyword",id:"api-filter"},domProps:{value:e.query},on:{input:function(t){t.target.composing||(e.query=t.target.value)}}})])]),e._v(" "),e._l(e.filtered,(function(o){return t("div",{key:o.text,staticClass:"api-section"},[t("h2",{attrs:{id:e.slugify(o.text)}},[e._v(e._s(o.text))]),e._v(" "),t("div",{staticClass:"api-groups"},e._l(o.items,(function(o){return t("div",{key:o.text,staticClass:"api-group"},[o.text?t("h3",[e._v(e._s(o.text))]):e._e(),e._v(" "),t("ul",e._l(o.headers,(function(a){return t("li",{key:a.anchor},[t("a",{attrs:{href:o.link+".html#"+e.slugify(a.anchor)}},[e._v(e._s(a.text))])])})),0)])})),0)])})),e._v(" "),e.filtered.length?e._e():t("div",{staticClass:"no-match"},[e._v('\n    没有匹配到 API "'+e._s(e.query)+'"\n  ')])],2)}),[],!1,null,"a2f64316",null);t.default=i.exports},380:function(e,t,o){"use strict";o.r(t);var a={components:{ApiIndex:o(356).default}},n=o(4),r=Object(n.a)(a,(function(){var e=this._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("ApiIndex")],1)}),[],!1,null,null,null);t.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/24.17777a13.js b/docs-vuepress/.vuepress/dist/assets/js/24.17777a13.js
deleted file mode 100644
index eb011a519d..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/24.17777a13.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{301:function(t,e,s){},316:function(t,e,s){"use strict";s(301)},326:function(t,e,s){"use strict";s.r(e);var i={props:{dataList:{type:Array,default:()=>[]},height:{type:Number,default:152},autoPlay:{type:Boolean,default:!0},currentIndex:{type:Number,default:0},dot:{type:Boolean,default:!1}},data:()=>({msg:"",current:0,resut:[],allWidth:0,timer:0,prevCls:"swiper-disable",nextCls:"",offsetWidth:0,isMove:!1,timeout:0}),computed:{getStyle(){return`height: ${this.height}px;`},getMode(){return this.isMove?"transition: transform 0s;":"transition: transform 0.3s;"},getWidth(){return`width: ${this.offsetWidth}px;`}},mounted(){this.$nextTick(()=>{const t=this.$refs.container;this.offsetWidth=t.offsetWidth,this.autoPlay&&this.animationScroll(),window.addEventListener("resize",()=>{this.offsetWidth=t.offsetWidth},!1)}),this.touchInfo={clientX:0,clientY:0,moveX:0}},watch:{current(t){this.prevCls=0===t?"swiper-disable":"",t===this.dataList.length-1?this.nextCls="swiper-disable":this.nextCls=""}},methods:{animationScroll(){clearInterval(this.timer),this.timer=setInterval(()=>{this.handleNext()},3e3)},handlePrev(t){const e=this.$refs.wrapper;this.current--,-1===this.current&&(this.current=0),e.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,"off"!==t&&this.$emit("change",this.current)},handleNext(t){const e=this.$refs.wrapper;e&&(this.current++,this.current===this.dataList.length&&(this.current=0),e.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,"off"!==t&&this.$emit("change",this.current))},handleSelect(t){clearInterval(this.timer),clearTimeout(this.timeout),this.current=t;this.$refs.wrapper.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,this.autoPlay&&(this.timeout=setTimeout(()=>{this.animationScroll()},3e3))},handleStart(t){clearInterval(this.timer),clearTimeout(this.timeout);const e=t.touches[0];this.touchInfo={clientX:e.clientX},this.isMove=!0},handleMove(t){const e=this.$refs.wrapper,s=t.touches[0].clientX-this.touchInfo.clientX,i=this.current*this.offsetWidth-s;e.style.transform=`translateX(${-i}px)`,this.touchInfo.moveX=s},handleEnd(){this.isMove=!1;const t=this.touchInfo.moveX||0;let e=0;e=Math.abs(t)<20?0:t<0?this.current===this.dataList.length-1?0:1:0===this.current?0:-1;const s=this.$refs.wrapper;switch(e){case 0:s.style.transform=`translateX(${-this.current*this.offsetWidth}px)`;break;case 1:this.handleNext();break;case-1:this.handlePrev()}this.touchInfo={},this.autoPlay&&(this.timeout=setTimeout(()=>{this.animationScroll()},3e3))}}},r=(s(316),s(4)),n=Object(r.a)(i,(function(){var t=this,e=t._self._c;return e("div",{ref:"container",staticClass:"swiper-container",style:t.getStyle},[e("div",{ref:"wrapper",staticClass:"swiper",style:t.getMode,on:{touchstart:t.handleStart,touchmove:t.handleMove,touchend:t.handleEnd}},t._l(t.dataList,(function(s,i){return e("div",{key:i,ref:"list",refInFor:!0,staticClass:"swiper-list",style:t.getWidth},[t._t("default",null,{item:s})],2)})),0),t._v(" "),t.dot?e("ul",{staticClass:"swiper-dot"},t._l(t.dataList,(function(s,i){return e("li",{key:i,staticClass:"swiper-icon",class:{active:t.current===i}})})),0):t._e()])}),[],!1,null,"ae3bb0ce",null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/25.889c07d7.js b/docs-vuepress/.vuepress/dist/assets/js/25.889c07d7.js
deleted file mode 100644
index b0841c13a2..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/25.889c07d7.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{292:function(e,t,s){},302:function(e,t,s){"use strict";s(292)},303:function(e,t,s){"use strict";s.r(t);var i={props:{code:{type:String,default:""},title:{type:String,default:""}},data:()=>({isShow:!1,isClick:!1}),methods:{handleEnter(){this.isShow=!0},handleLeave(){this.isShow=!1},handleToggle(){this.isClick=!this.isClick,this.isShow=this.isClick}}},o=(s(302),s(4)),a=Object(o.a)(i,(function(){var e=this,t=e._self._c;return t("div",{staticClass:"popover"},[t("div",{staticClass:"popover__content",on:{click:e.handleToggle,mouseenter:e.handleEnter,mouseleave:e.handleLeave}},[e._t("default")],2),e._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:e.isShow,expression:"isShow"}],staticClass:"popover__top"},[t("div",{staticClass:"popover__content"},[t("div",{staticClass:"popover__inner"},[e.code?t("img",{attrs:{width:"300",src:e.code,alt:"code",loading:"lazy"}}):e._e(),e._v(" "),e.title?t("div",[e._v(e._s(e.title))]):e._e()]),e._v(" "),t("div",{staticClass:"popover__arrow"})])])])}),[],!1,null,"8bac5638",null);t.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/26.3aa9f276.js b/docs-vuepress/.vuepress/dist/assets/js/26.3aa9f276.js
deleted file mode 100644
index 789a4b118a..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/26.3aa9f276.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{345:function(t,n,s){},364:function(t,n,s){"use strict";s(345)},378:function(t,n,s){"use strict";s.r(n);var i={},c=(s(364),s(4)),e=Object(c.a)(i,(function(){return(0,this._self._c)("div",{staticClass:"swiper-item"},[this._t("default")],2)}),[],!1,null,"f19c6420",null);n.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/27.1a35170a.js b/docs-vuepress/.vuepress/dist/assets/js/27.1a35170a.js
deleted file mode 100644
index b4e745b3c9..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/27.1a35170a.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{318:function(t,i,s){},334:function(t,i,s){"use strict";s(318)},353:function(t,i,s){"use strict";s.r(i);s(69);var e={props:{dataList:{type:Array,default:()=>[]}},data:()=>({msg:"",current:0,resut:[],allWidth:0,timer:0}),mounted(){this.$nextTick(()=>{const t=this.$refs.list;if(!t.length)return;const i=[];let s=0;for(let e=0;e<t.length;e++){const r=t[e];s+=r.offsetWidth,i.push({width:r.offsetWidth,left:r.offsetLeft})}this.wrapper=this.$refs.wrapper,this.resut=i,this.allWidth=s,this.handleClick(0)})},computed:{leftButtonDisabled(){return 0===this.current?"swiper-disable":""},rightButtonDisabled(){return this.current===this.dataList.length-1?"swiper-disable":""}},methods:{handlePrev(){this.current-1>-1&&(clearInterval(this.timer),this.handleClick(this.current-1))},handleNext(){this.current+1<this.dataList.length&&(clearInterval(this.timer),this.handleClick(this.current+1))},handleClick(t){this.current=t,this.$emit("change",t)},handleEnd(){const t=Math.floor(this.resut[this.current].left)-this.wrapper.scrollLeft,i=this.wrapper.scrollLeft,s=Math.floor(this.wrapper.offsetWidth/2)-Math.floor(this.resut[this.current].width/2),e=this.allWidth-this.wrapper.offsetWidth;let r=i+(t-s);r<0&&(r=0),r>e&&(r=e),this.allWidth>this.wrapper.offsetWidth&&i!==r&&this.animationScroll(r)},animationScroll(t){const i=this.allWidth-this.wrapper.offsetWidth,s=this.wrapper.scrollLeft,e=Math.floor(Math.abs((s-t)/200*20));let r=0;clearInterval(this.timer),this.timer=setInterval(()=>{if(r&&this.wrapper.scrollLeft!==r)return clearInterval(this.timer);if(t>s){const s=this.wrapper.scrollLeft+e;s>t||s>=i?(clearInterval(this.timer),this.wrapper.scrollLeft=t):(this.wrapper.scrollLeft=s,r=s)}else{const i=this.wrapper.scrollLeft-e;i<t||i<=0?(clearInterval(this.timer),this.wrapper.scrollLeft=t):(this.wrapper.scrollLeft=i,r=i)}},20)}}},r=(s(334),s(4)),l=Object(r.a)(e,(function(){var t=this,i=t._self._c;return i("div",{staticClass:"swiper-container"},[i("div",{staticClass:"swiper-button"},[i("img",{staticClass:"swiper-img",class:t.leftButtonDisabled,attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/0cgzDC8Apn/anli_icon_left.png",width:"50",height:"50",alt:"left",loading:"lazy"},on:{click:t.handlePrev}})]),t._v(" "),i("div",{ref:"wrapper",staticClass:"swiper"},t._l(t.dataList,(function(s,e){return i("div",{key:e,ref:"list",refInFor:!0,class:["swiper-list",t.current===e?"active":""],on:{click:function(i){return t.handleClick(e)},transitionend:t.handleEnd}},[i("div",{staticClass:"swiper-item"},[i("div",[i("div",[i("img",{attrs:{width:"80",height:"80",src:s.img,alt:"二维码",loading:"lazy"}})]),t._v(" "),i("div",[t._v(t._s(s.title))])])])])})),0),t._v(" "),i("div",{staticClass:"swiper-button"},[i("img",{staticClass:"swiper-img",class:t.rightButtonDisabled,attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/QhD6ulEP7k/anli_icon_right.png",width:"50",height:"50",alt:"right",loading:"lazy"},on:{click:t.handleNext}})])])}),[],!1,null,"5724bcdd",null);i.default=l.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/28.3670fa46.js b/docs-vuepress/.vuepress/dist/assets/js/28.3670fa46.js
deleted file mode 100644
index 2463d8a3a7..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/28.3670fa46.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{319:function(t,e,s){},335:function(t,e,s){"use strict";s(319)},354:function(t,e,s){"use strict";s.r(e);var i={props:{dataList:{type:Array,default:()=>[]},currentIndex:{type:Number,default:0}},data:()=>({translateX:0}),computed:{getStyle(){return{transform:`translate3d(${188*-this.currentIndex}px, 0, 0)`}}},watch:{currentIndex(t){}}},a=(s(335),s(4)),r=Object(a.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"swiper-img"},[t("div",{staticClass:"swiper-img__list",style:this.getStyle},this._l(this.dataList,(function(e,s){return t("div",{key:s,staticClass:"swiper-img__wrap"},[t("img",{attrs:{width:"188",height:"410",src:e.demo,alt:"img",loading:"lazy"}})])})),0)])}),[],!1,null,"60490726",null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/29.a911e510.js b/docs-vuepress/.vuepress/dist/assets/js/29.a911e510.js
deleted file mode 100644
index 1749087cce..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/29.a911e510.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{321:function(e,t,o){},337:function(e,t,o){"use strict";o(321)},356:function(e,t,o){"use strict";o.r(t);o(10),o(19),o(30);const a=[{text:"全局配置",items:[{link:"app-config",text:"",headers:[{text:"useStrictDiff",anchor:"#useStrictDiff"},{text:"ignoreWarning",anchor:"#ignoreWarning"},{text:"ignoreProxyWhiteList",anchor:"#ignoreProxyWhiteList"},{text:"observeClassInstance",anchor:"#observeClassInstance"},{text:"proxyEventHandler",anchor:"#proxyEventHandler"},{text:"setDataHandler",anchor:"#setDataHandler"},{text:"forceFlushSync",anchor:"#forceFlushSync"},{text:"webRouteConfig",anchor:"#webRouteConfig"},{text:"webConfig",anchor:"#webConfig"}]}]},{text:"全局 API",items:[{link:"global-api",text:"全局对象 Mpx",headers:[{text:"mixin",anchor:"#mixin"},{text:"injectMixins",anchor:"#injectMixins"},{text:"observable",anchor:"#observable"},{text:"set",anchor:"#set"},{text:"delete",anchor:"#delete"},{text:"use",anchor:"#use"},{text:"watch",anchor:"#watch"}]},{link:"global-api",text:"基础 API",headers:[{text:"createApp",anchor:"#createApp"},{text:"createPage",anchor:"#createPage"},{text:"createComponent",anchor:"#createComponent"},{text:"nextTick",anchor:"#nextTick"},{text:"toPureObject",anchor:"#toPureObject"},{text:"getMixin",anchor:"#getMixin"},{text:"implement",anchor:"#implement"}]},{link:"global-api",text:"内建生命周期变量",headers:[{text:"BEFORECREATE",anchor:"#BEFORECREATE"},{text:"CREATED",anchor:"#CREATED"},{text:"BEFOREMOUNT",anchor:"#BEFOREMOUNT"},{text:"MOUNTED",anchor:"#MOUNTED"},{text:"BEFOREUPDATE",anchor:"#BEFOREUPDATE"},{text:"UPDATED",anchor:"#UPDATED"},{text:"BEFOREUNMOUNT",anchor:"#BEFOREUNMOUNT"},{text:"UNMOUNTED",anchor:"#UNMOUNTED"},{text:"ONLOAD",anchor:"#ONLOAD"},{text:"ONSHOW",anchor:"#ONSHOW"},{text:"ONHIDE",anchor:"#ONHIDE"},{text:"ONRESIZE",anchor:"#ONRESIZE"}]},{link:"store-api",text:"Store API",headers:[{text:"createStore",anchor:"#createStore"},{text:"createStoreWithThis",anchor:"#createStoreWithThis"},{text:"createStateWithThis",anchor:"#createStateWithThis"},{text:"createGettersWithThis",anchor:"#createGettersWithThis"},{text:"createMutationsWithThis",anchor:"#createMutationsWithThis"},{text:"createActionsWithThis",anchor:"#createActionsWithThis"}]}]},{text:"响应式 API",items:[{link:"reactivity-api",text:"响应式基础 API",headers:[{text:"set",anchor:"#set"},{text:"del",anchor:"#del"},{text:"reactive",anchor:"#reactive"},{text:"isReactive",anchor:"#isReactive"},{text:"markRaw",anchor:"#markRaw"},{text:"shallowReactive",anchor:"#shallowReactive"}]},{link:"reactivity-api",text:"Refs",headers:[{text:"ref",anchor:"#ref"},{text:"unref",anchor:"#unref"},{text:"toRef",anchor:"#toRef"},{text:"toRefs",anchor:"#toRefs"},{text:"isRef",anchor:"#isRef"},{text:"customRef",anchor:"#customRef"},{text:"shallowRef",anchor:"#shallowRef"},{text:"triggerRef",anchor:"#triggerRef"}]},{link:"reactivity-api",text:"Computed 与 Watch",headers:[{text:"computed",anchor:"#computed"},{text:"watchEffect",anchor:"#watchEffect"},{text:"watchSyncEffect",anchor:"#watchSyncEffect"},{text:"watchPostEffect",anchor:"#watchPostEffect"},{text:"watch",anchor:"#watch"}]},{link:"reactivity-api",text:"Effect 作用域 API",headers:[{text:"effectScope",anchor:"#effectScope"},{text:"getCurrentScope",anchor:"#getCurrentScope"},{text:"onScopeDispose",anchor:"#onScopeDispose"}]}]},{text:"组合式 API",items:[{link:"composition-api",text:"生命周期钩子",headers:[{text:"onBeforeMount",anchor:"#onBeforeMount"},{text:"onMounted",anchor:"#onMounted"},{text:"onBeforeUpdate",anchor:"#onBeforeUpdate"},{text:"onUpdated",anchor:"#onUpdated"},{text:"onBeforeUnmount",anchor:"#onBeforeUnmount"},{text:"onUnmount",anchor:"#onUnmount"},{text:"onLoad",anchor:"#onLoad"},{text:"onShow",anchor:"#onShow"},{text:"onHide",anchor:"#onHide"},{text:"onResize",anchor:"#onResize"},{text:"onPullDownRefresh",anchor:"#onPullDownRefresh"},{text:"onReachBottom",anchor:"#onReachBottom"},{text:"onShareAppMessage",anchor:"#onShareAppMessage"},{text:"onShareTimeline",anchor:"#onShareTimeline"},{text:"onAddToFavorites",anchor:"#onAddToFavorites"},{text:"onPageScroll",anchor:"#onPageScroll"},{text:"onTabItemTap",anchor:"#onTabItemTap"},{text:"onSaveExitState",anchor:"#onSaveExitState"}]},{link:"composition-api",text:"其他",headers:[{text:"setup",anchor:"#setup"},{text:"getCurrentInstance",anchor:"#getCurrentInstance"},{text:"useI18n",anchor:"#useI18n"},{text:"useFetch",anchor:"#useFetch"}]}]},{text:"选项式 API",items:[{link:"instance-api",text:"实例 API",headers:[{text:"$set",anchor:"#$set"},{text:"$watch",anchor:"#$watch"},{text:"$delete",anchor:"#$delete"},{text:"$refs",anchor:"#$refs"},{text:"$asyncRefs",anchor:"#$asyncRefs"},{text:"$forceUpdate",anchor:"#$forceUpdate"},{text:"$nextTick",anchor:"#$nextTick"},{text:"$i18n",anchor:"#$i18n"},{text:"$rawOptions",anchor:"#$rawOptions"}]}]},{text:"内置相关",items:[{link:"directives",text:"模版指令 (1)",headers:[{text:"wx:if",anchor:"#wx-if"},{text:"wx:elif",anchor:"#wx-elif"},{text:"wx:else",anchor:"#wx-else"},{text:"wx:for",anchor:"#wx-for"},{text:"wx:for-index",anchor:"#wx-for-index"},{text:"wx:for-item",anchor:"#wx-for-item"},{text:"wx:key",anchor:"#wx-key"},{text:"wx:class",anchor:"#wx-class"},{text:"wx:style",anchor:"#wx-style"}]},{link:"directives",text:"模版指令 (2)",headers:[{text:"wx:model",anchor:"#wx-model"},{text:"wx:model-prop",anchor:"#wx-model-prop"},{text:"wx:model-event",anchor:"#wx-model-event"},{text:"wx:model-value-path",anchor:"#wx-model-value-path"},{text:"wx:model-filter",anchor:"#wx-model-filter"},{text:"wx:ref",anchor:"#wx-ref"},{text:"wx:show",anchor:"#wx-show"},{text:"bind",anchor:"#bind"},{text:"catch",anchor:"#catch"},{text:"capture-bind",anchor:"#capture-bind"},{text:"capture-catch",anchor:"#capture-catch"}]},{link:"builtIn",text:"内建组件",headers:[{text:"component",anchor:"#component"},{text:"slot",anchor:"#slot"}]}]},{text:"编译构建",items:[{link:"compile",text:"webpack 配置",headers:[{text:"output.publicPath",anchor:"#output-publicPath"},{text:"output.filename",anchor:"#output-filename"},{text:"node.global",anchor:"#node-global"},{text:"rule.resourceQuery",anchor:"#rule-resourceQuery"},{text:"resolve.extensions",anchor:"#resolve-extensions"}]},{link:"compile",text:"MpxWebpackPlugin options (1)",headers:[{text:"mode",anchor:"#mode"},{text:"srcMode",anchor:"#srcMode"},{text:"modeRules",anchor:"#modeRules"},{text:"externalClasses",anchor:"#externalClasses"},{text:"resolveMode",anchor:"#resolveMode"},{text:"projectRoot",anchor:"#projectRoot"},{text:"writeMode",anchor:"#writeMode"},{text:"autoScopeRules",anchor:"#autoScopeRules"},{text:"catch",anchor:"#catch"},{text:"forceDisableProxyCtor",anchor:"#forceDisableProxyCtor"},{text:"transMpxRules",anchor:"#transMpxRules"}]},{link:"compile",text:"MpxWebpackPlugin options (2)",headers:[{text:"forceProxyEventRules",anchor:"#forceProxyEventRules"},{text:"autoSplit",anchor:"#autoSplit"},{text:"defs",anchor:"#defs"},{text:"attributes",anchor:"#attributes"},{text:"externals",anchor:"#externals"},{text:"miniNpmPackage",anchor:"#miniNpmPackage"},{text:"forceUsePageCtor",anchor:"#forceUsePageCtor"},{text:"transRpxRules",anchor:"#transRpxRules"},{text:"postcssInlineConfig",anchor:"#postcssInlineConfig"},{text:"decodeHTMLText",anchor:"#decodeHTMLText"},{text:"nativeConfig",anchor:"#nativeConfig"},{text:"webConfig",anchor:"#webConfig"},{text:"i18n",anchor:"#i18n"},{text:"auditResource",anchor:"#auditResource"},{text:"subpackageModulesRules",anchor:"#subpackageModulesRules"},{text:"generateBuildMap",anchor:"#generateBuildMap"},{text:"autoVirtualHostRules",anchor:"#autoVirtualHostRules"},{text:"partialCompileRules",anchor:"#partialCompileRules"}]},{link:"compile",text:"MpxWebpackPlugin static methods",headers:[{text:"MpxWebpackPlugin.loader",anchor:"#mpxwebpackplugin-loader"},{text:"MpxWebpackPlugin.pluginLoader",anchor:"#mpxwebpackplugin-pluginloader"},{text:"MpxWebpackPlugin.wxsPreLoader",anchor:"#mpxwebpackplugin-wxspreloader"},{text:"MpxWebpackPlugin.fileLoader",anchor:"#mpxwebpackplugin-fileloader"},{text:"MpxWebpackPlugin.urlLoader",anchor:"#mpxwebpackplugin-urlloader"}]},{link:"compile",text:"Request query",headers:[{text:"?resolve",anchor:"#resolve"},{text:"?root",anchor:"#root"},{text:"?fallback",anchor:"#fallback"},{text:"?useLocal",anchor:"#useLocal"},{text:"?isStyle",anchor:"#isStyle"},{text:"?isPage",anchor:"#isPage"},{text:"?isComponent",anchor:"#isComponent"},{text:"?async",anchor:"#async"}]}]},{text:"周边拓展",items:[{link:"extend",text:"@mpxjs/fetch",headers:[{text:"fetch",anchor:"#fetch"},{text:"CancelToken",anchor:"#CancelToken"},{text:"XFetch",anchor:"#XFetch"},{text:"interceptors",anchor:"#interceptors"},{text:"proxy 代理",anchor:"#proxy"},{text:"useFetch",anchor:"#useFetch"}]},{link:"extend",text:"其他",headers:[{text:"api-proxy",anchor:"#api-proxy"},{text:"webview-bridge",anchor:"#webview-bridge"},{text:"size-report",anchor:"#size-report"},{text:"i18n",anchor:"#i18n"}]}]}],r=e=>e.toLowerCase().replace(/-/g," ");var n={data:()=>({query:""}),computed:{filtered(){const e=r(this.query),t=t=>r(t).includes(e);return a.map(e=>{if(t(e.text))return e;const o=e.items.map(e=>{if(t(e.text))return e;const o=e.headers.filter(({text:e,anchor:o})=>t(e)||t(o));return o.length?{text:e.text,link:e.link,headers:o}:null}).filter(e=>e);return o.length?{text:e.text,items:o}:null}).filter(e=>e)}},methods:{slugify:e=>e.replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g,"-").replace(/\-{2,}/g,"-").replace(/^\-+|\-+$/g,"").replace(/^(\d)/,"_$1").toLowerCase()}},c=(o(337),o(4)),i=Object(c.a)(n,(function(){var e=this,t=e._self._c;return t("div",{attrs:{id:"api-index"}},[t("div",{staticClass:"header"},[t("h1",[e._v("API 参考")]),e._v(" "),t("div",{staticClass:"api-filter"},[t("label",{attrs:{for:"api-filter"}},[e._v("过滤")]),e._v(" "),t("input",{directives:[{name:"model",rawName:"v-model",value:e.query,expression:"query"}],attrs:{type:"search",placeholder:"Enter keyword",id:"api-filter"},domProps:{value:e.query},on:{input:function(t){t.target.composing||(e.query=t.target.value)}}})])]),e._v(" "),e._l(e.filtered,(function(o){return t("div",{key:o.text,staticClass:"api-section"},[t("h2",{attrs:{id:e.slugify(o.text)}},[e._v(e._s(o.text))]),e._v(" "),t("div",{staticClass:"api-groups"},e._l(o.items,(function(o){return t("div",{key:o.text,staticClass:"api-group"},[o.text?t("h3",[e._v(e._s(o.text))]):e._e(),e._v(" "),t("ul",e._l(o.headers,(function(a){return t("li",{key:a.anchor},[t("a",{attrs:{href:o.link+".html#"+e.slugify(a.anchor)}},[e._v(e._s(a.text))])])})),0)])})),0)])})),e._v(" "),e.filtered.length?e._e():t("div",{staticClass:"no-match"},[e._v('\n    没有匹配到 API "'+e._s(e.query)+'"\n  ')])],2)}),[],!1,null,"a2f64316",null);t.default=i.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/3.145e69cd.js b/docs-vuepress/.vuepress/dist/assets/js/3.145e69cd.js
deleted file mode 100644
index 91b85b185d..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/3.145e69cd.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{295:function(t,e){t.exports=function(t){return null==t}},298:function(t,e,a){},299:function(t,e,a){},305:function(t,e,a){},307:function(t,e,a){"use strict";a(298)},308:function(t,e,a){var n=a(27),s=a(15),i=a(22);t.exports=function(t){return"string"==typeof t||!s(t)&&i(t)&&"[object String]"==n(t)}},309:function(t,e,a){"use strict";a(299)},310:function(t,e,a){},323:function(t,e,a){"use strict";a.r(e);var n=a(295),s=a.n(n),i=a(290),r={name:"PageEdit",computed:{lastUpdated(){return this.$page.lastUpdated},lastUpdatedText(){return"string"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:"string"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:"Last Updated"},editLink(){const t=s()(this.$page.frontmatter.editLink)?this.$site.themeConfig.editLinks:this.$page.frontmatter.editLink,{repo:e,docsDir:a="",docsBranch:n="master",docsRepo:i=e}=this.$site.themeConfig;return t&&i&&this.$page.relativePath?this.createEditLink(e,i,a,n,this.$page.relativePath):null},editLinkText(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||"Edit this page"}},methods:{createEditLink(t,e,a,n,s){if(/bitbucket.org/.test(e)){return e.replace(i.a,"")+"/src"+`/${n}/`+(a?a.replace(i.a,"")+"/":"")+s+`?mode=edit&spa=0&at=${n}&fileviewer=file-view-default`}if(/gitlab.com/.test(e)){return e.replace(i.a,"")+"/-/edit"+`/${n}/`+(a?a.replace(i.a,"")+"/":"")+s}return(i.i.test(e)?e:"https://github.com/"+e).replace(i.a,"")+"/edit"+`/${n}/`+(a?a.replace(i.a,"")+"/":"")+s}}},o=(a(307),a(4)),l=Object(o.a)(r,(function(){var t=this,e=t._self._c;return e("footer",{staticClass:"page-edit"},[t.editLink?e("div",{staticClass:"edit-link"},[e("a",{attrs:{href:t.editLink,target:"_blank",rel:"noopener noreferrer"}},[t._v(t._s(t.editLinkText))]),t._v(" "),e("OutboundLink")],1):t._e(),t._v(" "),t.lastUpdated?e("div",{staticClass:"last-updated"},[e("span",{staticClass:"prefix"},[t._v(t._s(t.lastUpdatedText)+":")]),t._v(" "),e("span",{staticClass:"time"},[t._v(t._s(t.lastUpdated))])]):t._e()])}),[],!1,null,null,null);e.default=l.exports},324:function(t,e,a){"use strict";a.r(e);a(69);var n=a(290),s=a(308),i=a.n(s),r=a(295),o=a.n(r),l={name:"PageNav",props:["sidebarItems"],computed:{prev(){return u(c.PREV,this)},next(){return u(c.NEXT,this)}}};const c={NEXT:{resolveLink:function(t,e){return d(t,e,1)},getThemeLinkConfig:({nextLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.next},PREV:{resolveLink:function(t,e){return d(t,e,-1)},getThemeLinkConfig:({prevLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.prev}};function u(t,{$themeConfig:e,$page:a,$route:s,$site:r,sidebarItems:l}){const{resolveLink:c,getThemeLinkConfig:u,getPageLinkConfig:d}=t,h=u(e),p=d(a),f=o()(p)?h:p;return!1===f?void 0:i()(f)?Object(n.k)(r.pages,f,s.path):c(a,l)}function d(t,e,a){const n=[];!function t(e,a){for(let n=0,s=e.length;n<s;n++)"group"===e[n].type?t(e[n].children||[],a):a.push(e[n])}(e,n);for(let e=0;e<n.length;e++){const s=n[e];if("page"===s.type&&s.path===decodeURIComponent(t.path))return n[e+a]}}var h=l,p=(a(309),a(4)),f=Object(p.a)(h,(function(){var t=this,e=t._self._c;return t.prev||t.next?e("div",{staticClass:"page-nav"},[e("p",{staticClass:"inner"},[t.prev?e("span",{staticClass:"prev"},[t._v("\n      ←\n      "),"external"===t.prev.type?e("a",{staticClass:"prev",attrs:{href:t.prev.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n\n        "),e("OutboundLink")],1):e("RouterLink",{staticClass:"prev",attrs:{to:t.prev.path}},[t._v("\n        "+t._s(t.prev.title||t.prev.path)+"\n      ")])],1):t._e(),t._v(" "),t.next?e("span",{staticClass:"next"},["external"===t.next.type?e("a",{attrs:{href:t.next.path,target:"_blank",rel:"noopener noreferrer"}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n\n        "),e("OutboundLink")],1):e("RouterLink",{attrs:{to:t.next.path}},[t._v("\n        "+t._s(t.next.title||t.next.path)+"\n      ")]),t._v("\n      →\n    ")],1):t._e()])]):t._e()}),[],!1,null,null,null);e.default=f.exports},328:function(t,e,a){"use strict";a(305)},330:function(t,e,a){"use strict";a(310)},348:function(t,e,a){"use strict";a.r(e);var n={name:"Home",components:{NavLink:a(293).default},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},s=(a(328),a(4)),i=Object(s.a)(n,(function(){var t=this,e=t._self._c;return e("main",{staticClass:"home",attrs:{"aria-labelledby":null!==t.data.heroText?"main-title":null}},[e("header",{staticClass:"hero"},[t.data.heroImage?e("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?e("h1",{attrs:{id:"main-title"}},[t._v("\n      "+t._s(t.data.heroText||t.$title||"Hello")+"\n    ")]):t._e(),t._v(" "),null!==t.data.tagline?e("p",{staticClass:"description"},[t._v("\n      "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n    ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?e("p",{staticClass:"action"},[e("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?e("div",{staticClass:"features"},t._l(t.data.features,(function(a,n){return e("div",{key:n,staticClass:"feature"},[e("h2",[t._v(t._s(a.title))]),t._v(" "),e("p",[t._v(t._s(a.details))])])})),0):t._e(),t._v(" "),e("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?e("div",{staticClass:"footer"},[t._v("\n    "+t._s(t.data.footer)+"\n  ")]):e("Content",{staticClass:"footer",attrs:{"slot-key":"footer"}})],1)}),[],!1,null,null,null);e.default=i.exports},350:function(t,e,a){"use strict";a.r(e);var n=a(323),s=a(324),i={components:{PageEdit:n.default,PageNav:s.default},props:["sidebarItems"]},r=(a(330),a(4)),o=Object(r.a)(i,(function(){var t=this._self._c;return t("main",{staticClass:"page"},[this._t("top"),this._v(" "),t("Content",{staticClass:"theme-default-content"}),this._v(" "),t("PageEdit"),this._v(" "),t("PageNav",this._b({},"PageNav",{sidebarItems:this.sidebarItems},!1)),this._v(" "),this._t("bottom")],2)}),[],!1,null,null,null);e.default=o.exports},357:function(t,e,a){"use strict";var n=a(348),s=a(70),i=a(350),r=a(369),o=a(290),l={name:"Layout",components:{Home:n.default,Page:i.default,Sidebar:r.default,Navbar:s.default},data:()=>({isSidebarOpen:!1}),computed:{shouldShowNavbar(){const{themeConfig:t}=this.$site,{frontmatter:e}=this.$page;return!1!==e.navbar&&!1!==t.navbar&&(this.$title||t.logo||t.repo||t.nav||this.$themeLocaleConfig.nav)},shouldShowSidebar(){const{frontmatter:t}=this.$page;return!t.home&&!1!==t.sidebar&&this.sidebarItems.length},sidebarItems(){return Object(o.l)(this.$page,this.$page.regularPath,this.$site,this.$localePath)},pageClasses(){const t=this.$page.frontmatter.pageClass;return[{"no-navbar":!this.shouldShowNavbar,"sidebar-open":this.isSidebarOpen,"no-sidebar":!this.shouldShowSidebar},t]}},mounted(){this.$router.afterEach(()=>{this.isSidebarOpen=!1})},methods:{toggleSidebar(t){this.isSidebarOpen="boolean"==typeof t?t:!this.isSidebarOpen,this.$emit("toggle-sidebar",this.isSidebarOpen)},onTouchStart(t){this.touchStart={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}},onTouchEnd(t){const e=t.changedTouches[0].clientX-this.touchStart.x,a=t.changedTouches[0].clientY-this.touchStart.y;Math.abs(e)>Math.abs(a)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}},c=a(4),u=Object(c.a)(l,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?e("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),e("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),e("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("sidebar-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("sidebar-bottom")]},proxy:!0}],null,!0)}),t._v(" "),t.$page.frontmatter.home?e("Home"):e("Page",{attrs:{"sidebar-items":t.sidebarItems},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("page-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("page-bottom")]},proxy:!0}],null,!0)})],1)}),[],!1,null,null,null);e.a=u.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/30.04d1a7ea.js b/docs-vuepress/.vuepress/dist/assets/js/30.04d1a7ea.js
deleted file mode 100644
index cdc93a389c..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/30.04d1a7ea.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{347:function(t,e,n){},368:function(t,e,n){"use strict";n(347)},373:function(t,e,n){"use strict";n.r(e);var s=n(25),a=n(0);const o={"/":{message:"New content is available.",buttonText:"Refresh"},"/zh/":{message:"发现新内容可用",buttonText:"刷新"},"/ru/":{message:"Доступен новый контент.",buttonText:"Обновить"},"/uk/":{message:"Доступний новий контент.",buttonText:"Оновити"},"/ja/":{message:"新しいコンテンツがあります。",buttonText:"更新する"},"/es/":{message:"Hay nuevo contenido disponible.",buttonText:"Actualizar"}};var u={name:"SWUpdatePopup",data:()=>({rawPopupConfig:{message:"文档有更新啦！",buttonText:"刷新"},updateEvent:null}),computed:{popupConfig(){return Object(a.g)(this,this.rawPopupConfig)},enabled(){return Boolean(this.popupConfig&&this.updateEvent)},message(){const t=this.popupConfig;return t&&t.message||o["/"].message},buttonText(){const t=this.popupConfig;return t&&t.buttonText||o["/"].buttonText}},created(){s.a.$on("sw-updated",this.onSWUpdated),!0==={message:"文档有更新啦！",buttonText:"刷新"}&&(this.rawPopupConfig=o)},methods:{onSWUpdated(t){this.updateEvent=t},reload(){this.updateEvent&&(this.updateEvent.skipWaiting().then(()=>{location.reload(!0)}),this.updateEvent=null)}}},p=(n(368),n(4)),i=Object(p.a)(u,(function(){var t=this,e=t._self._c;return e("transition",{attrs:{name:"sw-update-popup"}},[t._t("default",(function(){return[t.enabled?e("div",{staticClass:"sw-update-popup"},[t._v("\n      "+t._s(t.message)+"\n\n      "),e("br"),t._v(" "),e("button",{on:{click:t.reload}},[t._v("\n        "+t._s(t.buttonText)+"\n      ")])]):t._e()]}),{reload:t.reload,enabled:t.enabled,message:t.message,buttonText:t.buttonText})],2)}),[],!1,null,"613ca22e",null);e.default=i.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/31.ec06bf2f.js b/docs-vuepress/.vuepress/dist/assets/js/31.ec06bf2f.js
deleted file mode 100644
index bf7dfff393..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/31.ec06bf2f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{291:function(t,e,n){},294:function(t,e,n){"use strict";n(291)},296:function(t,e,n){"use strict";n.r(e);var s={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},i=(n(294),n(4)),o=Object(i.a)(s,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/32.f29d2cd1.js b/docs-vuepress/.vuepress/dist/assets/js/32.f29d2cd1.js
deleted file mode 100644
index 8084abd33f..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/32.f29d2cd1.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{340:function(t,c,n){},359:function(t,c,n){"use strict";n(340)},381:function(t,c,n){"use strict";n.r(c);n(359);var i=n(4),s=Object(i.a)({},(function(){var t=this,c=t._self._c;return c("div",{staticClass:"sidebar-button",on:{click:function(c){return t.$emit("toggle-sidebar")}}},[c("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[c("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null);c.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/33.936d018e.js b/docs-vuepress/.vuepress/dist/assets/js/33.936d018e.js
deleted file mode 100644
index de335fa687..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/33.936d018e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{366:function(t,s,e){t.exports=e.p+"assets/img/start-tips2.7d8836f8.png"},367:function(t,s,e){t.exports=e.p+"assets/img/start-tips1.3b76ac97.png"},435:function(t,s,e){"use strict";e.r(s);var i=e(4),a=Object(i.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"ide-高亮配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ide-高亮配置"}},[t._v("#")]),t._v(" IDE 高亮配置")]),t._v(" "),s("ul",[s("li",[s("RouterLink",{attrs:{to:"/guide/basic/ide.html#IntelliJ"}},[t._v("IntelliJ")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/ide.html#vscode"}},[t._v("vscode")])],1)]),t._v(" "),s("h2",{attrs:{id:"intellij"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#intellij"}},[t._v("#")]),t._v(" IntelliJ")]),t._v(" "),s("p",[t._v("如果使用 IntelliJ 系 IDE 开发，可将"),s("code",[t._v(".mpx")]),t._v("后缀文件关联到"),s("code",[t._v("vue")]),t._v("模板类型，按"),s("code",[t._v("vue")]),t._v("模板解析。")]),t._v(" "),s("p",[s("img",{attrs:{src:e(366),alt:"关联文件类型"}})]),t._v(" "),s("p",[t._v("但会报一个"),s("code",[t._v("warning")]),t._v("提示有重复的"),s("code",[t._v("script")]),t._v("标签，关闭该警告即可。")]),t._v(" "),s("p",[s("img",{attrs:{src:e(367),alt:"关闭警告"}})]),t._v(" "),s("h2",{attrs:{id:"vscode"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#vscode"}},[t._v("#")]),t._v(" vscode")]),t._v(" "),s("blockquote",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/vscode-mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("git地址"),s("OutboundLink")],1),t._v("，有任何vscode插件的问题和需求可在仓库中提issue")])]),t._v(" "),s("blockquote",[s("p",[t._v("下载")])]),t._v(" "),s("ol",[s("li",[s("p",[s("a",{attrs:{href:"https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("下载地址"),s("OutboundLink")],1)])]),t._v(" "),s("li",[s("p",[t._v("也可直接在vscode扩展处搜索mpx即可下载")])])]),t._v(" "),s("blockquote",[s("p",[t._v("使用")])]),t._v(" "),s("h3",{attrs:{id:"插件功能介绍"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#插件功能介绍"}},[t._v("#")]),t._v(" 插件功能介绍")]),t._v(" "),s("ul",[s("li",[t._v("高亮")]),t._v(" "),s("li",[t._v("emmet")]),t._v(" "),s("li",[t._v("跳转定义")]),t._v(" "),s("li",[t._v("自动补全")]),t._v(" "),s("li",[t._v("eslint")]),t._v(" "),s("li",[t._v("格式化")])]),t._v(" "),s("p",[s("a",{attrs:{href:"https://gift-static.hongyibo.com.cn/static/kfpub/3227/vscodes.mp4",target:"_blank",rel:"noopener noreferrer"}},[t._v("视频介绍"),s("OutboundLink")],1)]),t._v(" "),s("h4",{attrs:{id:"高亮"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#高亮"}},[t._v("#")]),t._v(" 高亮")]),t._v(" "),s("p",[t._v("  与其他语言插件无异，提供相应代码的高亮，因为Mpx分为四个模块，所以每个模块都有相应的语法高亮，还包括注释快捷键，也区分了相应模块，比如"),s("code",[t._v("<template>")]),t._v("中使用的是html的高亮，且注释是"),s("code",[t._v("\x3c!-- --\x3e")]),t._v(",而"),s("code",[t._v("<script>")]),t._v("中就是"),s("code",[t._v("js")]),t._v("的高亮，注释是"),s("code",[t._v("//")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/codelight.jpeg",alt:"image"}})]),t._v(" "),s("h4",{attrs:{id:"emmet"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#emmet"}},[t._v("#")]),t._v(" emmet")]),t._v(" "),s("p",[t._v("  早在使用sublime时就在使用emmet插件，以提高写HTML的效率。")]),t._v(" "),s("p",[t._v("  比如键入多个"),s("code",[t._v("<view>")]),t._v("标签："),s("code",[t._v("view*n")]),t._v("。")]),t._v(" "),s("p",[t._v("  比如一些标签的快速键入，配合"),s("code",[t._v("tab")]),t._v("或者"),s("code",[t._v("Enter")]),t._v("键快速键入")]),t._v(" "),s("p",[t._v("  不仅仅是"),s("code",[t._v("<template>")]),t._v("模块，css，scss，less，stylus，sass模块也有相应的快捷指令")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200258.gif",alt:"image"}}),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200331.gif",alt:"image"}})]),t._v(" "),s("p",[t._v("提示组件标签")]),t._v(" "),s("p",[t._v("我们可以像编写 html 一样，只要输入对应的单词就会出现对应的标签，比如输入的是 view ，然后按下 tab 键，即可输入 "),s("code",[t._v("<view></view>")]),t._v(" 标签。")]),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi1_v2.png",width:"500",alt:"图片名称"}}),t._v(" "),s("p",[t._v("组件指令提示")]),t._v(" "),s("p",[t._v('指令的提示类似于 vue 文件一样，只要输入对应的指令前缀就会出现对应的完整指令，比如输入的是 wx ，然后按下 tab 键，就可以输入 wx:if="" 指令。')]),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi2_v2.png",width:"500",alt:"图片名称"}}),t._v(" "),s("p",[t._v("组件属性提示")]),t._v(" "),s("p",[t._v("微信小程序的每个组件都有一些属性选项，在编写组件的时候输入前缀就会出现完整的属性，并且包含了属性的说明和属性的类型。")]),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi3_v2.png",width:"500",alt:"图片名称"}}),t._v(" "),s("p",[t._v("组件事件提示")]),t._v(" "),s("p",[t._v('给组件绑定事件，也是只需要输入事件的前缀，就会出现完整的事件列表，然后按下 tab 键，即可输入 bindtap="" 类似的事件。')]),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi4_v2.png",width:"500",alt:"图片名称"}}),t._v(" "),s("h4",{attrs:{id:"跳转定义"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#跳转定义"}},[t._v("#")]),t._v(" 跳转定义")]),t._v(" "),s("p",[t._v("  command + 鼠标左键 查看定义位置，也可以在当前文件查看内容，决定是否跳转")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200848.gif",alt:"image"}})]),t._v(" "),s("h4",{attrs:{id:"自动补全"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#自动补全"}},[t._v("#")]),t._v(" 自动补全")]),t._v(" "),s("p",[t._v("  毕竟Mpx是个小程序的框架，对于微信和支付宝的api快速补全snippets没有怎么能行，可在"),s("code",[t._v("<script>")]),t._v("中通过键入部分文字插入相应的代码块")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-201858.gif",alt:"image"}})]),t._v(" "),s("h4",{attrs:{id:"eslint"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#eslint"}},[t._v("#")]),t._v(" eslint")]),t._v(" "),s("p",[t._v("  eslint这块要分两部分来讲，一部分是插件实现了按照模块区分的简单的eslint，另一部分是要配合eslint的vscode插件，配置.eslintrc高阶的eslint检测。")]),t._v(" "),s("p",[t._v("部分一可通过配置开关")]),t._v(" "),s("p",[s("code",[t._v("<template>")]),t._v("是通过我们自己实现的eslint插件"),s("code",[t._v("eslint-plugin-mpx")]),t._v("，通过调eslint提供的引擎api，返回eslint校验的结果，我们再进行展示。")]),t._v(" "),s("p",[s("code",[t._v("<script>")]),t._v("中是通过调用typescript提供的检测js代码的api来进行检测，返回\n的校验结果也是不太符合语法的，基础的检测，不会过于苛刻")]),t._v(" "),s("p",[s("code",[t._v("<style>")]),t._v("中会根据lang的设定进行相应的检测，此检测是vscode官方提供的库\n"),s("code",[t._v("vscode-css-languageservice")])]),t._v(" "),s("p",[s("code",[t._v("<json>")]),t._v("模块同tempalte，用到了一个eslint插件"),s("code",[t._v("eslint-plugin-jsonc")]),t._v("来检测json的部分")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/vscodeseting.png",alt:"image"}})]),t._v(" "),s("p",[t._v("部分二可参照此"),s("a",{attrs:{href:"https://github.com/mpx-ecology/vscode-mpx/issues/35",target:"_blank",rel:"noopener noreferrer"}},[t._v("链接"),s("OutboundLink")],1),t._v("配置")]),t._v(" "),s("h4",{attrs:{id:"代码格式化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#代码格式化"}},[t._v("#")]),t._v(" 代码格式化")]),t._v(" "),s("p",[t._v("支持代码格式化 JavaScript  (ts)· JSON · CSS (less/scss/stylus) · WXML，通过鼠标右键选择代码格式化文档。")]),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/format_v2.png",width:"500",alt:"图片名称"}}),t._v(" "),s("p",[t._v("默认每个区块都是调用 Prettier 这个库来完成格式化的，当然也可以在设置中切换成使用其他库。")]),t._v(" "),s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/format2_v3.png",width:"500",alt:"图片名称"}}),t._v(" "),s("p",[t._v("如果切换成 none 将会禁用格式化。")]),t._v(" "),s("p",[t._v("Prettier 支持从项目根目录读取 .prettierrc 配置文件。配置选项可以参考 "),s("a",{attrs:{href:"https://prettier.io/docs/en/configuration.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("官方"),s("OutboundLink")],1),t._v(" 文档。.prettierrc 文件可以使用 JSON 语法编写，比如下面这样：")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('{\n  "tabWidth": 4,\n  "semi": false,\n  "singleQuote": true\n}\n')])])]),s("p",[t._v("注意：由于 Prettier 这个库不支持格式化 stylus 语法，所以 stylus 的格式化使用另外一个 stylus-supremacy 库，配置 stylus 格式化规则只能在编辑器的 settings 中配置。")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('"mpx.format.defaultFormatterOptions": {\n  "stylus-supremacy": {\n    "insertColons": false, // 不使用括号\n    "insertSemicolons": false, // 不使用冒号\n    "insertBraces": false, // 不使用分号\n    "insertNewLineAroundImports": true, // import之后插入空行\n    "insertNewLineAroundBlocks": false // 每个块不添加空行\n  }\n}\n')])])]),s("p",[t._v("总结一下，配置格式化有两种方式，一种是使用 .prettierrc 文件的形式配置，另一种是在编辑器的 settings 中自行配置，通过 mpx.format.defaultFormatterOptions 选项。")])])}),[],!1,null,null,null);s.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/34.f494d685.js b/docs-vuepress/.vuepress/dist/assets/js/34.f494d685.js
deleted file mode 100644
index 3739ab3bf3..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/34.f494d685.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{290:function(t,n,e){"use strict";e.d(n,"d",(function(){return r})),e.d(n,"a",(function(){return s})),e.d(n,"i",(function(){return u})),e.d(n,"f",(function(){return a})),e.d(n,"g",(function(){return l})),e.d(n,"h",(function(){return c})),e.d(n,"b",(function(){return f})),e.d(n,"e",(function(){return h})),e.d(n,"k",(function(){return p})),e.d(n,"l",(function(){return d})),e.d(n,"c",(function(){return b})),e.d(n,"j",(function(){return m}));e(69),e(10),e(19),e(48),e(30);const r=/#.*$/,i=/\.(md|html)$/,s=/\/$/,u=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(r,"").replace(i,"")}function a(t){return u.test(t)}function l(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function f(t){if(a(t))return t;const n=t.match(r),e=n?n[0]:"",i=o(t);return s.test(i)?t:i+".html"+e}function h(t,n){const e=decodeURIComponent(t.hash),i=function(t){const n=t.match(r);if(n)return n[0]}(n);if(i&&e!==i)return!1;return o(t.path)===o(n)}function p(t,n,e){if(a(n))return{type:"external",path:n};e&&(n=function(t,n,e){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return n+t;const i=n.split("/");e&&i[i.length-1]||i.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t<s.length;t++){const n=s[t];".."===n?i.pop():"."!==n&&i.push(n)}""!==i[0]&&i.unshift("");return i.join("/")}(n,e));const r=o(n);for(let n=0;n<t.length;n++)if(o(t[n].regularPath)===r)return Object.assign({},t[n],{type:"page",path:f(t[n].path)});return console.error(`[vuepress] No matching page found for sidebar item "${n}"`),{}}function d(t,n,e,r){const{pages:i,themeConfig:s}=e,u=r&&s.locales&&s.locales[r]||s;if("auto"===(t.frontmatter.sidebar||u.sidebar||s.sidebar))return g(t);const o=u.sidebar||s.sidebar;if(o){const{base:e,config:r}=function(t,n){if(Array.isArray(n))return{base:"/",config:n};for(const r in n)if(0===(e=t,/(\.html|\/)$/.test(e)?e:e+"/").indexOf(encodeURI(r)))return{base:r,config:n[r]};var e;return{}}(n,o);return"auto"===r?g(t):r?r.map(t=>function t(n,e,r,i=1){if("string"==typeof n)return p(e,n,r);if(Array.isArray(n))return Object.assign(p(e,n[0],r),{title:n[1]});{const s=n.children||[];return 0===s.length&&n.path?Object.assign(p(e,n.path,r),{title:n.title}):{type:"group",path:n.path,title:n.title,sidebarDepth:n.sidebarDepth,initialOpenGroupIndex:n.initialOpenGroupIndex,children:s.map(n=>t(n,e,r,i+1)),collapsable:!1!==n.collapsable}}}(t,i,e)):[]}return[]}function g(t){const n=b(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:n.map(n=>({type:"auto",title:n.title,basePath:t.path,path:t.path+"#"+n.slug,children:n.children||[]}))}]}function b(t){let n;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?n=t:n&&(n.children||(n.children=[])).push(t)}),t.filter(t=>2===t.level)}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},293:function(t,n,e){"use strict";e.r(n);e(10),e(47);var r=e(290),i={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(r.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(r.g)(this.link)||Object(r.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(r.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(r.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},s=e(4),u=Object(s.a)(i,(function(){var t=this,n=t._self._c;return t.isInternal?n("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(n){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):n("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?n("OutboundLink"):t._e()],1)}),[],!1,null,null,null);n.default=u.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/35.c3ed1ff7.js b/docs-vuepress/.vuepress/dist/assets/js/35.c3ed1ff7.js
deleted file mode 100644
index 40ee107240..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/35.c3ed1ff7.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{385:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"安装使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装使用"}},[t._v("#")]),t._v(" 安装使用")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 安装mpx命令行工具")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-g")]),t._v(" @mpxjs/cli\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 初始化项目")]),t._v("\nmpx create "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("project-name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# 进入项目目录")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token builtin class-name"}},[t._v("cd")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("project-name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# development")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" run serve\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# production")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" run build\n")])])]),s("p",[t._v("使用小程序开发者工具打开项目文件夹下dist中对应平台的文件夹即可预览效果。")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/36.d2c9afa9.js b/docs-vuepress/.vuepress/dist/assets/js/36.d2c9afa9.js
deleted file mode 100644
index 0598587d4b..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/36.d2c9afa9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{384:function(t,s,a){"use strict";a.r(s);var n=a(4),r=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"全局配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#全局配置"}},[t._v("#")]),t._v(" 全局配置")]),t._v(" "),s("p",[s("code",[t._v("Mpx.config")]),t._v(" 是一个对象，包含 Mpx 的全局配置。可以在启动应用之前修改下列 property：")]),t._v(" "),s("h2",{attrs:{id:"usestrictdiff"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#usestrictdiff"}},[t._v("#")]),t._v(" useStrictDiff")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("每次有数据变更时，是否使用严格的 diff 算法。如果项目中有大数据集的渲染建议使用，可以提升效率。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("useStrictDiff "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注意：由于微信小程序的bug，同时使用"),s("code",[t._v("useStrictDiff")]),t._v("和增强指令"),s("code",[t._v("wx:style")]),t._v("时，要注意更改数据的方式。如下所示：")])]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 入口文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("useStrictDiff "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 页面page文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("template"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view wx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("style"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{{style}}"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("test"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("template"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'18px'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLoad")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当useStrictDiff设置true时，需要用setData的方式设置整个style对象")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'18px'")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this.style.color = 'blue' // 当useStrictDiff设置true时，不能使用这种方式，style不会生效")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("h2",{attrs:{id:"ignorewarning"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ignorewarning"}},[t._v("#")]),t._v(" ignoreWarning")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("是否忽略运行时的 warning 信息，默认不忽略。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ignoreWarning "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n")])])]),s("h2",{attrs:{id:"ignoreproxywhitelist"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ignoreproxywhitelist"}},[t._v("#")]),t._v(" ignoreProxyWhiteList")]),t._v(" "),s("p",[s("code",[t._v("Array<string> = ['id']")])]),t._v(" "),s("p",[t._v("Mpx 实例上的 key（包括data、computed、methods）如果有重名冲突，在"),s("code",[t._v("ignoreProxyWhiteList")]),t._v("配置中的属性会被最新的覆盖；而不在"),s("code",[t._v("ignoreProxyWhiteList")]),t._v("配置中的属性，不会被覆盖。")]),t._v(" "),s("blockquote",[s("p",[t._v("只要有重名冲突均会有报错提示。")])]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ignoreConflictWhiteList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'id'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("h2",{attrs:{id:"observeclassinstance"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#observeclassinstance"}},[t._v("#")]),t._v(" observeClassInstance")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("当需要对 class 对象的数据进行响应性转化，需要开启该选项。")]),t._v(" "),s("h2",{attrs:{id:"proxyeventhandler"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#proxyeventhandler"}},[t._v("#")]),t._v(" proxyEventHandler")]),t._v(" "),s("p",[s("code",[t._v("Function")])]),t._v(" "),s("p",[t._v("需要代理的事件的钩子方法，该钩子方法仅对内联传参事件或 "),s("RouterLink",{attrs:{to:"/api/compile.html#forceproxyeventrules"}},[t._v("forceProxyEventRules")]),t._v(" 规则匹配的事件生效。")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("proxyEventHandler")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 入参为 event 事件对象")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"setdatahandler"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setdatahandler"}},[t._v("#")]),t._v(" setDataHandler")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setDataHandler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ComponentIns"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),t._v("\n")])])]),s("p",[t._v("页面/组件状态更新时，使用该方法可以对 setData 调用进行监听，可以用来统计 setData 调用次数和数据量的统计，方法的入参是 setData 传输的 data 和当前组件实例。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("setDataHandler")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" comp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setData trigger'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"forceflushsync"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#forceflushsync"}},[t._v("#")]),t._v(" forceFlushSync")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("Mpx 中更改响应性状态时，最终页面的更新并不是同步立即生效的，而是由 Mpx 将它们缓存在一个队列中， 异步等到下一个 tick 一起执行，如果想将所有队列的执行改为同步执行，我们可以通过该配置来实现。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("forceFlushSync "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n")])])]),s("h2",{attrs:{id:"errorhandler"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#errorhandler"}},[t._v("#")]),t._v(" errorHandler")]),t._v(" "),s("p",[s("code",[t._v("Function")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("errorHandler")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("errmsg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" location"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" error")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// errmsg: 框架内部运行报错的报错归类信息，例如当执行一个watch方法报错时，会是 "Unhandled error occurs during execution of watch callback!"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// location: 具体报错的代码路径，可选项，不一定存在")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// error: 具体的错误堆栈，可选项，不一定存在")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// handle error")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Mpx 框架运行时报错捕获感知处理函数。")]),t._v(" "),s("ul",[s("li",[t._v("Mpx 框架生命周期执行错误；")]),t._v(" "),s("li",[t._v("Mpx 中的 computed、watch 等内置方法执行报错；")]),t._v(" "),s("li",[t._v("Mpx 框架的运行时的检测报错，例如存在目标平台不支持的属性，入参出参类型错误等；")])]),t._v(" "),s("p",[t._v("同时被捕获的错误会通过 console.error 输出。")]),t._v(" "),s("h2",{attrs:{id:"webrouteconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#webrouteconfig"}},[t._v("#")]),t._v(" webRouteConfig")]),t._v(" "),s("p",[t._v("Mpx 通过 config 暴露出 webRouteConfig 配置项，在 web 环境可以对路由进行配置。\n此配置后续将被废弃，请使用 webConfig 进行配置")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("用法")]),t._v(":")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webRouteConfig "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'history'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"webconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#webconfig"}},[t._v("#")]),t._v(" webConfig")]),t._v(" "),s("p",[t._v("web 环境下的一些配置，如路由模式，页面切换动画效果等")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("用法")]),t._v(":")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 修改路由模式")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("routeConfig "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'history'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 禁用页面切换动画")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("disablePageTransition "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/37.4e1eee2c.js b/docs-vuepress/.vuepress/dist/assets/js/37.4e1eee2c.js
deleted file mode 100644
index 1f98c5adce..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/37.4e1eee2c.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{383:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"内建组件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#内建组件"}},[t._v("#")]),t._v(" 内建组件")]),t._v(" "),s("h2",{attrs:{id:"component"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#component"}},[t._v("#")]),t._v(" component")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("is "),s("code",[t._v("string")]),t._v(" : 动态渲染组件，通过改变"),s("code",[t._v("is")]),t._v("的值，来渲染不同的组件")])]),t._v(" "),s("li",[s("p",[t._v("range "),s("code",[t._v("string")]),t._v(" : 使用 range 来指定可能渲染的组件，不传递时则为 全局注册 + usingComponents 中注册的所有组件，存在多个组件时使用逗号 "),s("code",[t._v(",")]),t._v(" 分隔")])])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ComponentName 是在全局或者组件中完成注册的组件名称 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("component")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("is")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ComponentName}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 只会展示 compA 或者 compB 组件 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("component")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("is")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ComponentName}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("range")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("compA,compB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("strong",[t._v("参考")]),t._v("："),s("RouterLink",{attrs:{to:"/guide/basic/component.html#动态组件"}},[t._v("动态组件")])],1),t._v(" "),s("h2",{attrs:{id:"slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[t._v("#")]),t._v(" slot")]),t._v(" "),s("ul",[s("li",[t._v("name "),s("code",[t._v("string")]),t._v(" : 用于命名插槽")])]),t._v(" "),s("p",[s("code",[t._v("<slot>")]),t._v(" 元素作为组件模板中的内容分发插槽，"),s("code",[t._v("<slot>")]),t._v("元素自身将被替换。")]),t._v(" "),s("p",[t._v("详细用法，可参考下面的链接。")]),t._v(" "),s("p",[s("strong",[t._v("参考")]),t._v("："),s("RouterLink",{attrs:{to:"/guide/basic/component.html#slot"}},[t._v("slot")])],1)])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/38.7826170e.js b/docs-vuepress/.vuepress/dist/assets/js/38.7826170e.js
deleted file mode 100644
index 31d5badf90..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/38.7826170e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{386:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"编译构建"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编译构建"}},[t._v("#")]),t._v(" 编译构建")]),t._v(" "),s("p",[t._v("对于使用 "),s("code",[t._v("@mpxjs/cli@3.x")]),t._v(" 脚手架初始化的项目而言，编译构建相关的配置统一收敛至项目根目录下的 "),s("code",[t._v("vue.config.js")]),t._v(" 进行配置。一个新项目初始化的 "),s("code",[t._v("vue.config.js")]),t._v(" 如下图，相较于 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 版本，在新的初始化项目当中原有的编译构建配置都收敛至 cli 插件当中进行管理和维护，同时还对外暴露相关的接口或者 api 使得开发者能自定义修改 cli 插件当中默认的配置。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx webpack plugin options")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// @mpxjs/unocss-plugin 相关的配置")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("对于使用 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 脚手架初始化的项目，编译构建配置涉及到 mpx 插件相关的配置主要是在 "),s("code",[t._v("config")]),t._v(" 目录下 "),s("code",[t._v("mpxPlugin.conf.js")]),t._v("，涉及到 webpack 本身的配置主要是在 "),s("code",[t._v("build")]),t._v(" 目录下。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// config/mpxPlugin.conf.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx webpack plugin options")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"类型定义"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#类型定义"}},[t._v("#")]),t._v(" 类型定义")]),t._v(" "),s("p",[t._v("为了便于对编译配置的数据类型进行准确地描述，我们在这里对一些常用的配置类型进行定义")]),t._v(" "),s("h3",{attrs:{id:"rules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#rules"}},[t._v("#")]),t._v(" Rules")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Condition")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resourcePath"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" RegExp\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Rules")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  include"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Condition "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Condition"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  exclude"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Condition "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Condition"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"mpxwebpackplugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin"}},[t._v("#")]),t._v(" MpxWebpackPlugin")]),t._v(" "),s("p",[t._v("Mpx 编译构建跨平台小程序和 web 的 webpack 主插件，安装示例如下：")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/webpack-plugin\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pnpm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/webpack-plugin\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("yarn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/webpack-plugin\n")])])]),s("p",[t._v("使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx webpack plugin options")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("MpxWebpackPlugin支持传入以下配置：")]),t._v(" "),s("h3",{attrs:{id:"mode"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mode"}},[t._v("#")]),t._v(" mode")]),t._v(" "),s("p",[s("code",[t._v("'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'jd' | 'dd' | 'qa' | 'web' = 'wx'")])]),t._v(" "),s("p",[t._v("mode 为 Mpx 编译的目标平台， 目前支持的有微信小程序(wx)\\支付宝小程序(ali)\\百度小程序(swan)\\头条小程序(tt)\\QQ 小程序(qq)\\京东小程序(jd)\\滴滴小程序(dd)\\快应用(qa)\\H5 页面(web)。")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("在 @mpxjs/cli@3.x 版本当中，通过在 "),s("code",[t._v("npm script")]),t._v(" 当中定义 "),s("code",[t._v("targets")]),t._v(" 来设置目标平台")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 项目 package.json")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"script"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"build:cross"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpx-cli-service build --targets=wx,ali"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),s("h3",{attrs:{id:"srcmode"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#srcmode"}},[t._v("#")]),t._v(" srcMode")]),t._v(" "),s("p",[s("code",[t._v("'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'jd' | 'dd' | 'qa' = 'wx'")])]),t._v(" "),s("p",[t._v("默认和 "),s("a",{attrs:{href:"#mode"}},[t._v("mode")]),t._v(" 一致。，当 srcMode 和 mode 不一致时，会读取相应的配置对项目进行编译和运行时的转换。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据项目初始化所选平台来设定")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("暂时只支持微信为源 mode 做跨平台，为其他时，mode 必须和 srcMode 保持一致。")])]),t._v(" "),s("h3",{attrs:{id:"moderules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#moderules"}},[t._v("#")]),t._v(" modeRules")]),t._v(" "),s("p",[s("code",[t._v("{ [key: string]: Rules }")])]),t._v(" "),s("p",[t._v("批量指定文件mode，用于条件编译场景下使用某些单小程序平台的库时批量标记这些文件的mode为对应平台，而不再走转换规则。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modeRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ali")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/vant-aliapp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"externalclasses"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#externalclasses"}},[t._v("#")]),t._v(" externalClasses")]),t._v(" "),s("p",[s("code",[t._v("Array<string>")])]),t._v(" "),s("p",[t._v("定义若干个外部样式类，这些将会覆盖元素原有的样式。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("externalClasses")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'custom-class'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'i-class'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("抹平支付宝和微信之间的差异，当使用了微信 "),s("strong",[t._v("externalClasses")]),t._v(" 语法时，跨端输出需要在 @mpxjs/webpack-plugin 的配置中添加此配置来辅助框架进行转换。")])]),t._v(" "),s("h3",{attrs:{id:"resolvemode"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#resolvemode"}},[t._v("#")]),t._v(" resolveMode")]),t._v(" "),s("p",[s("code",[t._v("'webpack' | 'native' = 'webpack'")])]),t._v(" "),s("p",[t._v("指定resolveMode，默认webpack，更便于引入npm包中的页面/组件等资源。若想编写时和原生保持一致或兼容已有原生项目，可设为native，此时需要提供"),s("a",{attrs:{href:"#projectroot"}},[t._v("projectRoot")]),t._v("以指定项目根目录，且使用npm资源时需在前面加"),s("code",[t._v("~")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resolveMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'webpack'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"projectroot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#projectroot"}},[t._v("#")]),t._v(" projectRoot")]),t._v(" "),s("p",[s("code",[t._v("string")])]),t._v(" "),s("p",[t._v("当resolveMode为native时需通过该字段指定项目根目录。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resolveMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'native'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("projectRoot")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"writemode"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#writemode"}},[t._v("#")]),t._v(" writeMode")]),t._v(" "),s("p",[s("code",[t._v("'full' | 'change' = 'change'")])]),t._v(" "),s("p",[t._v("webpack 的输出默认是全量输出，而小程序开发者工具不关心文件是否真正发生了变化。设置为 change 时，Mpx 在 watch 模式下将内部 diff 一次，只会对内容发生变化的文件进行写入，以提升小程序开发者工具编译性能。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("writeMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'change'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"autoscoperules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#autoscoperules"}},[t._v("#")]),t._v(" autoScopeRules")]),t._v(" "),s("p",[s("a",{attrs:{href:"#rules"}},[s("code",[t._v("Rules")])])]),t._v(" "),s("p",[t._v("是否需要对样式加 scope ，目前只有支付宝小程序平台没有样式隔离，因此该部分内容也只对支付宝小程序平台生效。提供 include 和 exclude 以精确控制对哪些文件进行样式隔离，哪些不隔离，和webpack的rules规则相同。也可以通过在 style 代码块上声明 scoped 进行。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("autoScopeRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n           "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n           "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exclude")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../node_modules/vant-aliapp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 比如一些组件库本来就是为支付宝小程序编写的，应该已经考虑过样式隔离，就不需要再添加")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"forcedisableproxyctor"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#forcedisableproxyctor"}},[t._v("#")]),t._v(" forceDisableProxyCtor")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("用于控制在跨平台输出时对实例构造函数（"),s("code",[t._v("App")]),t._v(" | "),s("code",[t._v("Page")]),t._v(" | "),s("code",[t._v("Component")]),t._v(" | "),s("code",[t._v("Behavior")]),t._v("）进行代理替换以抹平平台差异。当配置 "),s("code",[t._v("forceDisableProxyCtor")]),t._v(" 为 true 时，会强行取消平台差异抹平逻辑，开发时需针对输出到不同平台进行条件判断。")]),t._v(" "),s("h3",{attrs:{id:"transmpxrules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#transmpxrules"}},[t._v("#")]),t._v(" transMpxRules")]),t._v(" "),s("p",[s("a",{attrs:{href:"#rules"}},[s("code",[t._v("Rules")])])]),t._v(" "),s("p",[t._v("是否转换 wx / my 等全局对象为 Mpx 对象，")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transMpxRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exclude")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"forceproxyeventrules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#forceproxyeventrules"}},[t._v("#")]),t._v(" forceProxyEventRules")]),t._v(" "),s("p",[s("a",{attrs:{href:"#rules"}},[s("code",[t._v("Rules")])])]),t._v(" "),s("p",[t._v("强制代理规则内配置的事件。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("forceProxyEventRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bindtap'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"defs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#defs"}},[t._v("#")]),t._v(" defs")]),t._v(" "),s("p",[s("code",[t._v("object")])]),t._v(" "),s("p",[t._v("给模板、js、json、style中定义一些全局常量。一般用于区分平台/环境。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("defs")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("__env__")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mini'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在模板中使用：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{__env__}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("在js中使用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" env "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" __env__"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("在style中使用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__env__ === 'mini') */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("color "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" red"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n")])])]),s("p",[t._v("在json中使用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'json'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"component"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"a"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" __env__\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注意：这里定义之后使用的时候是按照全局变量来使用，而非按照"),s("code",[t._v("process.env.KEY")]),t._v("这样的形式")])]),t._v(" "),s("h3",{attrs:{id:"attributes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributes"}},[t._v("#")]),t._v(" attributes")]),t._v(" "),s("p",[s("code",[t._v("Array<string> = ['image:src', 'audio:src', 'video:src', 'cover-image:src', 'import:src', 'include:src']")])]),t._v(" "),s("p",[s("code",[t._v("Mpx")]),t._v(" 提供了可以给自定义标签设置资源的功能，配置该属性后，即可在目标标签中使用 "),s("code",[t._v(":src")]),t._v(" 加载相应资源文件")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("attributes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'customTag:src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("customTag")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("https://www....../avator.png'"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("customTag")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("该属性可通过 "),s("code",[t._v("MpxWebpackPlugin")]),t._v(" 配置，也可以通过配置 "),s("code",[t._v("WxmlLoader")]),t._v("，后者优先级高。")])]),t._v(" "),s("h3",{attrs:{id:"externals"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#externals"}},[t._v("#")]),t._v(" externals")]),t._v(" "),s("p",[s("code",[t._v("Array<string>")])]),t._v(" "),s("p",[t._v("目前仅支持微信小程序 weui 组件库通过 useExtendedLib 扩展库的方式引入，这种方式引入的组件将不会计入代码包大小。配置 externals 选项，Mpx 将不会解析 weui 组件的路径并打包。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("externals")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'weui'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx json部分")]),t._v("\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"useExtendedLib"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"weui"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 在 page 中使用 weui 组件 --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'wx'}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mp-icon")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("play"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("size")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{25}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("showDialog"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("mp-icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("mp-dialog")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("test"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("show")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{dialogShow}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindbuttontap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tapDialogButton"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("buttons")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{buttons}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test content"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("mp-dialog")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dialogShow")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("showOneButtonDialog")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("buttons")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'取消'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'确定'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("tapDialogButton")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dialogShow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("showOneButtonDialog "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("showDialog")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dialogShow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" wxComponents "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"mp-icon"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"weui-miniprogram/icon/icon"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"mp-dialog"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"weui-miniprogram/dialog/dialog"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" __mpx_mode__ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("assign")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" wxComponents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("strong",[t._v("参考")]),t._v("："),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html",target:"_blank"}},[t._v("weui组件库")])]),t._v(" "),s("h3",{attrs:{id:"mininpmpackage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mininpmpackage"}},[t._v("#")]),t._v(" miniNpmPackage")]),t._v(" "),s("p",[s("code",[t._v("Array<string>")])]),t._v(" "),s("p",[t._v("微信小程序官方提供了"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("发布小程序 npm 包的约束"),s("OutboundLink")],1),t._v("。\n部分小程序npm包，如"),s("a",{attrs:{href:"https://vant-contrib.gitee.io/vant-weapp/#/quickstart",target:"_blank",rel:"noopener noreferrer"}},[t._v("vant组件库"),s("OutboundLink")],1),t._v('官方文档使用说明，引用资源并不会包含miniprogram所指定的目录\n如 "@vant/weapp/button/index"，导致 '),s("code",[t._v("Mpx")]),t._v(" 解析路径失败。\n"),s("code",[t._v("Mpx")]),t._v("为解决这个问题，提供miniNpmPackage字段供用户配置需要解析的小程序npm包。miniNpmPackage对应的数组值为npm包对应的package.json中的name字段。\n"),s("code",[t._v("Mpx")]),t._v("解析规则如下:")]),t._v(" "),s("ol",[s("li",[t._v("如package.json中有miniprogram字段，则会默认拼接miniprogram对应的值到资源路径中")]),t._v(" "),s("li",[t._v("如package.json中无miniprogram字段，但配置了miniNpmPackage，则默认会拼接miniprogram_dist目录")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("miniNpmPackage")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vant/weapp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"forceusepagector"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#forceusepagector"}},[t._v("#")]),t._v(" forceUsePageCtor")]),t._v(" "),s("p",[s("code",[t._v("Boolean = false")])]),t._v(" "),s("p",[t._v("为了获取更丰富的生命周期来进行更加完善的增强处理，在非支付宝小程序环境下，"),s("code",[t._v("Mpx")]),t._v(" 默认会使用 "),s("code",[t._v("Conponent")]),t._v(" 构造器来创建页面。将该值设置为 "),s("code",[t._v("true")]),t._v(" 时，会强制使用 "),s("code",[t._v("Page")]),t._v(" 构造器创建页面。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("forceUsePageCtor")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"transrpxrules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#transrpxrules"}},[t._v("#")]),t._v(" transRpxRules")]),t._v(" "),s("p",[s("code",[t._v("Array<object> | object")])]),t._v(" "),s("ul",[s("li",[s("code",[t._v("option.mode")]),t._v(" 可选值有 none/only/all，分别是不启用/只对注释内容启用/只对非注释内容启用")]),t._v(" "),s("li",[s("code",[t._v("option.designWidth")]),t._v(" 设计稿宽度，默认值就是750，可根据需要修改")]),t._v(" "),s("li",[s("code",[t._v("option.include")]),t._v(" 同webpack的include规则")]),t._v(" "),s("li",[s("code",[t._v("option.exclude")]),t._v(" 同webpack的exclude规则")]),t._v(" "),s("li",[s("code",[t._v("option.comment")]),t._v(" rpx注释，建议使用 'use px'/'use rpx'，当 mode 为 all 时默认值为 use px，mode 为 only 时默认值为 'use rpx'")])]),t._v(" "),s("p",[t._v("为了处理某些IDE中不支持"),s("code",[t._v("rpx")]),t._v("单位的问题，Mpx 提供了一个将 px 转换为 rpx 的功能。支持通过注释控制行级、块级的是否转换，支持局部使用，支持不同依赖分别使用不用的转换规则等灵活的能力。"),s("code",[t._v("transRpxRules")]),t._v("可以是一个对象，也可以是多个这种对象组成的数组。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'path'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transRpxRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'only'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 只对注释为'use rpx'的块儿启用转换rpx")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("comment")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'use rpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mode为'only'时，默认值为'use rpx'")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exclude")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'lib'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("designWidth")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("750")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'all'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 所有样式都启用转换rpx，除了注释为'use px'的样式不转换")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("comment")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'use px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mode为'all'时，默认值为'use px'")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/@didi/mpx-sec-guard'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"应用场景及相应配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#应用场景及相应配置"}},[t._v("#")]),t._v(" 应用场景及相应配置")]),t._v(" "),s("p",[t._v("接下来我们来看下一些应用场景及如何配置。如果是用脚手架生成的项目，在"),s("code",[t._v("mpx.plugin.conf.js")]),t._v("里找到"),s("code",[t._v("transRpxRules")]),t._v("，应该已经有预设的"),s("code",[t._v("transRpxRules")]),t._v("选项，按例修改即可。")]),t._v(" "),s("p",[t._v("三种场景分别是 "),s("a",{attrs:{href:"#%E5%9C%BA%E6%99%AF%E4%B8%80"}},[t._v("普通使用")]),t._v(" ， "),s("a",{attrs:{href:"#%E5%9C%BA%E6%99%AF%E4%BA%8C"}},[t._v("只对某些特殊样式转换")]),t._v(" ， "),s("a",{attrs:{href:"#%E5%9C%BA%E6%99%AF%E4%B8%89"}},[t._v("不同路径分别配置规则")])]),t._v(" "),s("h4",{attrs:{id:"场景一"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#场景一"}},[t._v("#")]),t._v(" 场景一")]),t._v(" "),s("p",[t._v("设计师给的稿是2倍图，分辨率750px。或者更高倍图。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transRpxRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'all'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("designWidth")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("750")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果是其他倍，修改此值为设计稿的宽度即可")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"场景二"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#场景二"}},[t._v("#")]),t._v(" 场景二")]),t._v(" "),s("p",[t._v("大部分样式都用px下，某些元素期望用rpx。或者反过来。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transRpxRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'only'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("comment")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'use rpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("designWidth")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("750")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设计稿宽度")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("mpx的rpx注释能帮助你仅为部分类或者部分样式启用rpx转换，细节请看下方附录。")]),t._v(" "),s("h4",{attrs:{id:"场景三"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#场景三"}},[t._v("#")]),t._v(" 场景三")]),t._v(" "),s("p",[t._v("使用了第三方组件，它的设计宽度和主项目不一致，期望能设置不同的转换规则")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'path'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transRpxRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'only'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("designWidth")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("750")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("comment")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'use rpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'all'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("designWidth")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1280")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对iview单独使用一个不同的designWidth")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/iview-weapp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注意事项：转换规则是不可以对一个文件做多次转换的，会出错，所以一旦被一个规则命中后就不会再次命中另一个规则，include 和 exclude 的编写需要注意先后顺序，就比如上面这个配置，如果第一个规则 include 的是 '/' 即整个项目，iview-weapp 里的样式就无法命中第二条规则了。")])]),t._v(" "),s("h4",{attrs:{id:"transrpxrules附录"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#transrpxrules附录"}},[t._v("#")]),t._v(" transRpxRules附录")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("designWidth")])])]),t._v(" "),s("p",[t._v("设计稿宽度，单位为"),s("code",[t._v("px")]),t._v("。默认值为"),s("code",[t._v("750px")]),t._v("。")]),t._v(" "),s("p",[s("code",[t._v("mpx")]),t._v("会基于小程序标准的屏幕宽度"),s("code",[t._v("baseWidth 750rpx")]),t._v("，与"),s("code",[t._v("option.designWidth")]),t._v("计算出一个转换比例"),s("code",[t._v("transRatio")]),t._v("。")]),t._v(" "),s("p",[t._v("转换比例的计算方式为"),s("code",[t._v("transRatio = (baseWidth / designWidth)")]),t._v("，精度为小数点后2位四舍五入。")]),t._v(" "),s("p",[t._v("所有生效的"),s("code",[t._v("rpx注释样式")]),t._v("中的px会乘上"),s("code",[t._v("transRatio")]),t._v("得出最终的 rpx 值。")]),t._v(" "),s("p",[t._v("例如：")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 转换前：designWidth = 1280 */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".btn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 200px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 转换后: transRatio = 0.59 */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".btn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 118rpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 59rpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[s("strong",[t._v("comment: rpx 注释样式")])])]),t._v(" "),s("p",[t._v("根据"),s("code",[t._v("rpx注释")]),t._v("的位置，"),s("code",[t._v("mpx")]),t._v("会将"),s("code",[t._v("一段css规则")]),t._v("或者"),s("code",[t._v("一条css声明")]),t._v("视为"),s("code",[t._v("rpx注释样式")]),t._v("。")]),t._v(" "),s("p",[t._v("开发者可以声明一段 rpx 注释样式，提示编译器是否转换这段 css 中的 px。")]),t._v(" "),s("p",[t._v("例如：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("css"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* use rpx */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".not-translate-a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".not-translate-b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* use rpx */")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".translate-a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".translate-b")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("第一个注释位于一个"),s("code",[t._v("选择器")]),t._v("前，是一个"),s("code",[t._v("css规则注释")]),t._v("，整个规则都会被视为"),s("code",[t._v("rpx注释样式")])])]),t._v(" "),s("blockquote",[s("p",[t._v("第二个注释位于一个"),s("code",[t._v("css声明")]),t._v("前，是一个"),s("code",[t._v("css声明注释")]),t._v("，只有"),s("code",[t._v("font-size: 100px")]),t._v("会被视为"),s("code",[t._v("rpx注释样式")])])]),t._v(" "),s("blockquote",[s("p",[s("code",[t._v("transRpx = only")]),t._v("模式下，只有两部分"),s("code",[t._v("rpx注释样式")]),t._v("会转rpx。")])]),t._v(" "),s("h3",{attrs:{id:"postcssinlineconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#postcssinlineconfig"}},[t._v("#")]),t._v(" postcssInlineConfig")]),t._v(" "),s("p",[s("code",[t._v("{options? : PostcssOptions, plugins? : PostcssPlugin[], mpxPrePlugins? : PostcssPlugin[], ignoreConfigFile : Boolean}")])]),t._v(" "),s("p",[t._v("使用类似于 postcss.config.js 的语法书写 postcss 的配置文件。用于定义 Mpx 对于组件/页面样式进行 postcss 处理时的配置， ignoreConfigFile 传递为 true 时会忽略项目中的 postcss 配置文件 。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("postcssInlineConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require('postcss-import'),")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require('postcss-preset-env'),")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require('cssnano'),")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require('autoprefixer')")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意")]),t._v("：默认添加的 postcss 插件均会在"),s("code",[t._v("mpx的内置插件")]),t._v("（例如如rpx插件等）之后处理。如需使配置的插件优先于内置插件，可以在 "),s("code",[t._v("postcssInlineConfig")]),t._v(" 中添加 "),s("code",[t._v("mpxPrePlugins")]),t._v(" 配置：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("postcssInlineConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'postcss-import'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'postcss-preset-env'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpxPrePlugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cssnano'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'autoprefixer'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 以下写法同理")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpxPrePlugins: {")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   'cssnano': {},")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   'autoprefixer': {}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// }")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("code",[t._v("postcss.config.js")]),t._v(" 中配置同理：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// postcss.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'postcss-import'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'postcss-preset-env'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpxPrePlugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cssnano'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'autoprefixer'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[t._v("在上面这个例子当中，postcss 插件处理的最终顺序为："),s("code",[t._v("cssnano")]),t._v(" -> "),s("code",[t._v("autoprefixer")]),t._v(" -> "),s("code",[t._v("mpx内置插件")]),t._v(" -> "),s("code",[t._v("postcss-import")]),t._v(" -> "),s("code",[t._v("postcss-preset-env")])]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("注意：在 "),s("code",[t._v("mpxPrePlugins")]),t._v(" 中配置的 postcss 插件如果不通过 mpx 进行处理，那么将不会生效。")])]),t._v(" "),s("h3",{attrs:{id:"decodehtmltext"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#decodehtmltext"}},[t._v("#")]),t._v(" decodeHTMLText")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("设置为 true 时在模板编译时对模板中的 text 内容进行 decode")]),t._v(" "),s("h3",{attrs:{id:"nativeconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#nativeconfig"}},[t._v("#")]),t._v(" nativeConfig")]),t._v(" "),s("p",[s("code",[t._v("{cssLangs: string[]}")])]),t._v(" "),s("p",[t._v("为原生多文件写法添加css预处理语言支持，用于优先搜索预编译器后缀的文件，按 cssLangs 中的声明顺序查找。默认按照 css , less , stylus ,  scss , sass 的顺序")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nativeConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cssLangs")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'css'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'less'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'stylus'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'scss'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sass'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"webconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#webconfig"}},[t._v("#")]),t._v(" webConfig")]),t._v(" "),s("p",[s("code",[t._v("{transRpxFn(match:string, $1:number): string}")])]),t._v(" "),s("p",[t._v("transRpxFn 配置用于自定义输出 web 时对于 rpx 样式单位的转换逻辑，常见的方式有转换为 vw 或转换为 rem")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("webConfig")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("transRpxFn")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("match"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" $1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("$1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'0'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" $1\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("$1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("750")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toFixed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("vw")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"i18n"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#i18n"}},[t._v("#")]),t._v(" i18n")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} world'")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'zh-CN'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} 世界'")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// messagesPath: path.resolve(__dirname, '../src/i18n.js')")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("Mpx 支持国际化，底层实现依赖类"),s("code",[t._v("wxs")]),t._v("能力，通过指定语言标识和语言包，可实现多语言之间的动态切换。可配置项包括locale、messages、messagesPath。")]),t._v(" "),s("h4",{attrs:{id:"i18n-locale"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#i18n-locale"}},[t._v("#")]),t._v(" i18n.locale")]),t._v(" "),s("p",[s("code",[t._v("string")])]),t._v(" "),s("p",[t._v("通过配置 locale 属性，可指定语言标识，默认值为 'zh-CN'")]),t._v(" "),s("h4",{attrs:{id:"i18n-messages"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#i18n-messages"}},[t._v("#")]),t._v(" i18n.messages")]),t._v(" "),s("p",[s("code",[t._v("object")])]),t._v(" "),s("p",[t._v("通过配置 messages 属性，可以指定项目语言包，Mpx 会依据语言包对象定义进行转换，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'title'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'DiDi Chuxing'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'subTitle'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Make travel better'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'zh-CN'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'title'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'滴滴出行'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'subTitle'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'让出行更美好'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h4",{attrs:{id:"i18n-messagespath"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#i18n-messagespath"}},[t._v("#")]),t._v(" i18n.messagesPath")]),t._v(" "),s("p",[s("code",[t._v("string")])]),t._v(" "),s("p",[t._v("为便于开发，Mpx 还支持配置语言包资源路径 messagesPath 来代替 messages 属性，Mpx 会从该路径下的 js 文件导出语言包对象。如果同时配置 messages 和 messagesPath 属性，Mpx 会优先设定 messages 为 i18n 语言包资源。")]),t._v(" "),s("p",[t._v("详细介绍及使用见"),s("RouterLink",{attrs:{to:"/guide/tool/i18n.html"}},[t._v("工具-国际化i18n")]),t._v("一节。")],1),t._v(" "),s("h3",{attrs:{id:"auditresource"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#auditresource"}},[t._v("#")]),t._v(" auditResource")]),t._v(" "),s("p",[s("code",[t._v("'component' | boolean = false")])]),t._v(" "),s("p",[t._v("检查资源输出情况，如果置为true，则会提示有哪些资源被同时输出到了多个分包，可以检查是否应该放进主包以消减体积，设置为 "),s("code",[t._v("'component'")]),t._v(" 的话，则只检查组件资源是否被输出到多个分包。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("auditResource")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"subpackagemodulesrules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#subpackagemodulesrules"}},[t._v("#")]),t._v(" subpackageModulesRules")]),t._v(" "),s("p",[s("code",[t._v("object")])]),t._v(" "),s("p",[t._v("是否将多分包共用的模块分别输出到各自分包中，匹配规则为include匹配到且未被exclude匹配到的资源")]),t._v(" "),s("p",[t._v("依据微信小程序的分包策略，多个分包使用到的 js 模块会打入主包当中，但在大型分包较多的项目中，该策略极易将大量的模块打入主包，从而使主包体积大小超出2M限制，该配置项提供给开发者自主抉择，可将部分模块冗余输出至多个分包，从而控制主包体积不超限")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("subpackageModulesRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@someNpm/name/src/api/*.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exclude")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@someNpm/name/src/api/module.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("tips: 该功能是将模块分别放入多个分包，模块状态不可复用，使用前要依据模块功能做好评估，例如全局store就不适用该功能")])]),t._v(" "),s("h3",{attrs:{id:"generatebuildmap"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#generatebuildmap"}},[t._v("#")]),t._v(" generateBuildMap")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("是否生成构建结果与源码之间的映射文件。用于单元测试等场景。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("generateBuildMap")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("参考")]),t._v("："),s("RouterLink",{attrs:{to:"/guide/tool/unit-test.html"}},[t._v("单元测试")])],1),t._v(" "),s("h3",{attrs:{id:"autovirtualhostrules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#autovirtualhostrules"}},[t._v("#")]),t._v(" autoVirtualHostRules")]),t._v(" "),s("p",[s("a",{attrs:{href:"#rules"}},[s("code",[t._v("Rules")])]),t._v("\n批量配置是否虚拟化组件节点，对应微信中"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html",target:"_blank",rel:"noopener noreferrer"}},[s("code",[t._v("VirtualHost")]),s("OutboundLink")],1),t._v(" 。默认不开启，开启后也将抹平支付宝小程序中的表现差异。提供 include 和 exclude 以精确控制对哪些文件开启VirtualHost，哪些不开启。和webpack的rules规则相同。")]),t._v(" "),s("p",[t._v("默认情况下，自定义组件本身的那个节点是一个“普通”的节点，使用时可以在这个节点上设置 "),s("code",[t._v("class")]),t._v(" 、"),s("code",[t._v("style")]),t._v(" 、动画、 flex 布局等，就如同普通的 view 组件节点一样。但有些时候，自定义组件并不希望这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定。这种情况下，可以将这个自定义组件设置为“虚拟的”。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("autoVirtualHostRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exclude")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../components/other'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")]),t._v(" 建议使用"),s("code",[t._v("autoVirtualHostRules")]),t._v("配置项，不要使用微信组件内部的 options virtualHost 配置，因为组件内部的 options virtualHost 在跨平台输出时无法进行兼容抹平处理。")]),t._v(" "),s("h3",{attrs:{id:"partialcompilerules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#partialcompilerules"}},[t._v("#")]),t._v(" partialCompileRules")]),t._v(" "),s("p",[s("code",[t._v("{ include: string | RegExp | Function | Array<string | RegExp | Function> }")])]),t._v(" "),s("p",[t._v("在大型的小程序开发当中，全量打包页面耗时非常长，往往在"),s("code",[t._v("开发过程")]),t._v("中仅仅只需用到几个 pages 而已，该配置项支持打包指定的小程序页面。")]),t._v(" "),s("p",[s("strong",[t._v("注意：")]),t._v(" @mpxjs/webpack-plugin@2.9.41版本之前该配置为 partialCompile。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// include 可以是正则、字符串、函数、数组")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("partialCompileRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/project/pages'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 文件路径包含 '/project/pages' 的页面都会被打包")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("pages\\/internal")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 文件路径能与正则匹配上的页面都会被打包")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("include")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("pageResourcePath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// pageResourcePath 是小程序页面所在系统的文件路径")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" pageResourcePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pages'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 文件路径包含 'pages' 的页面都会被打包")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/project/pages'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("pages\\/internal")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("pageResourcePath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" pageResourcePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pages'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 满足任意条件的页面都会被打包")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("该特性只能用于"),s("strong",[t._v("开发环境")]),t._v("，默认情况下会阻止所有页面("),s("strong",[t._v("入口 app.mpx 除外")]),t._v(")的打包。")])]),t._v(" "),s("h3",{attrs:{id:"optimizerenderrules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#optimizerenderrules"}},[t._v("#")]),t._v(" optimizeRenderRules")]),t._v(" "),s("p",[s("a",{attrs:{href:"#rules"}},[s("code",[t._v("Rules")])])]),t._v(" "),s("p",[t._v("render 函数中可能会存在一些重复变量，该配置可消除 render 函数中的重复变量，进而减少包体积。不配置该参数，则不会消除重复变量。")]),t._v(" "),s("p",[t._v("同时框架 render 函数优化提供了两个等级，使用 level 字段来进行控制，默认为 level = 1")]),t._v(" "),s("ul",[s("li",[t._v("level = 1时，框架生成 render 函数中完成保留 template 中的计算逻辑，setData 传输量保持了最优。")]),t._v(" "),s("li",[t._v("level = 2时，框架生成 render 函数中仅保留所有 template 中使用到的响应性变量，无任何计算逻辑保留，render 函数体积达最小状态，但 setData 传输量相对于 level=1 会有所增加。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("optimizeRenderRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("level")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"asyncsubpackagerules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#asyncsubpackagerules"}},[t._v("#")]),t._v(" asyncSubpackageRules")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Condition")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" RegExp\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AsyncSubpackageRules")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  include"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Condition "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Condition"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  exclude"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Condition "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Condition"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  root"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n  placeholder"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resource"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[t._v("include: 同 webpack include 规则")]),t._v(" "),s("li",[t._v("exclude: 同 webpack exclude 规则")]),t._v(" "),s("li",[t._v("root: 匹配规则的组件或js模块的输出分包名")]),t._v(" "),s("li",[t._v("placeholder: 匹配规则的组件所配置的componentPlaceholder，可支持配置原生组件和自定义组件，原生组件可直接以string类型配置，自定义组件需要配置对象，name 为该自定义组件名, resource 为自定义组件的路径，路径可为绝对路径和相对于项目目录的相对路径")])]),t._v(" "),s("p",[t._v("异步分包场景下批量设置组件或 js 模块的异步分包，提升资源异步分包输出的灵活性。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// include 可以是正则、字符串、函数、数组")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("asyncSubpackageRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/project/pages'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 文件路径包含 '/project/pages' 的组件或者 require.async 异步引用的js 模块都会被打包至sub1分包")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("root")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sub1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("placeholder")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'view'")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("ul",[s("li",[t._v("该配置匹配的组件，若使用方在引用路径已设置?root或componentPlaceholder，则以引用路径中的?root或componentPlaceholder为最高优先级")]),t._v(" "),s("li",[t._v("若placeholder配置使用自定义组件，注意一定要配置 placeholder 中的 resource 字段")]),t._v(" "),s("li",[t._v("本功能只会对使用require.async异步引用的js模块生效，若引用路径中已配置?root，则以路径中?root优先")])])]),t._v(" "),s("h3",{attrs:{id:"retryrequireasync"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#retryrequireasync"}},[t._v("#")]),t._v(" retryRequireAsync")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("开启时在处理"),s("code",[t._v("require.async")]),t._v("时会添加单次重试逻辑")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("retryRequireAsync")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"disablerequireasync"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disablerequireasync"}},[t._v("#")]),t._v(" disableRequireAsync")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("Mpx 框架在输出 微信小程序、支付宝小程序、字节小程序、Web 平台时，默认支持分包异步化能力，但若在某些场景下需要关闭该能力，可配置该项。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("disableRequireAsync")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"optimizesize"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#optimizesize"}},[t._v("#")]),t._v(" optimizeSize")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("开启后可优化编译配置减少构建产物体积")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("optimizeSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"mpxwebpackplugin-static-methods"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-static-methods"}},[t._v("#")]),t._v(" MpxWebpackPlugin static methods")]),t._v(" "),s("p",[s("code",[t._v("MpxWebpackPlugin")]),t._v(" 通过静态方法暴露了以下五个内置 loader，详情如下：")]),t._v(" "),s("h3",{attrs:{id:"mpxwebpackplugin-loader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-loader"}},[t._v("#")]),t._v(" MpxWebpackPlugin.loader")]),t._v(" "),s("p",[s("code",[t._v("MpxWebpackPlugin")]),t._v(" 所提供的最主要 loader，用于处理 "),s("code",[t._v(".mpx")]),t._v(" 文件，根据不同的"),s("a",{attrs:{href:"#mode"}},[t._v("目标平台")]),t._v("将 "),s("code",[t._v(".mpx")]),t._v(" 文件输出为不同的结果。")]),t._v(" "),s("blockquote",[s("p",[t._v("在微信环境下 "),s("code",[t._v("todo.mpx")]),t._v(" 被loader处理后的文件为："),s("code",[t._v("todo.wxml")]),t._v("、"),s("code",[t._v("todo.wxss")]),t._v("、"),s("code",[t._v("todo.js")]),t._v("、"),s("code",[t._v("todo.json")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.mpx$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"mpxwebpackplugin-pluginloader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-pluginloader"}},[t._v("#")]),t._v(" MpxWebpackPlugin.pluginLoader")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("该 loader 仅在开发"),s("strong",[t._v("小程序插件")]),t._v("时使用，可在使用 Mpx 脚手架进行项目初始化时选择进行组件开发来生成对应的配置文件。")])]),t._v(" "),s("p",[s("code",[t._v("MpxWebpackPlugin.pluginLoader")]),t._v(" 用于根据开发者编写的"),s("code",[t._v("plugin.json")]),t._v("文件内容，将特定的小程序组件、页面以及 js 文件进行构建，最终以小程序插件的形式输出。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resource")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/plugin/plugin.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 小程序插件的plugin.json的绝对路径")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pluginLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更多细节请查阅 "),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("小程序插件开发"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"mpxwebpackplugin-wxspreloader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-wxspreloader"}},[t._v("#")]),t._v(" MpxWebpackPlugin.wxsPreLoader")]),t._v(" "),s("p",[t._v("加载并解析 "),s("code",[t._v("wxs")]),t._v(" 脚本文件，并针对不同平台，做了差异化处理；同时可支持处理内联"),s("code",[t._v("wxs")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(wxs|qs|sjs|filter\\.js)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wxsPreLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("enforce")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pre'")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"mpxwebpackplugin-fileloader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-fileloader"}},[t._v("#")]),t._v(" MpxWebpackPlugin.fileLoader")]),t._v(" "),s("p",[t._v("提供图像资源的处理，生成对应图像文件，输出到输出目录并返回 public URL。如果是分包资源，则会输出到相应的分包资源文件目录中。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fileLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("选项")]),t._v("：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("name")]),t._v(" : 自定义输出文件名模板")])]),t._v(" "),s("h3",{attrs:{id:"mpxwebpackplugin-urlloader"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-urlloader"}},[t._v("#")]),t._v(" MpxWebpackPlugin.urlLoader")]),t._v(" "),s("p",[t._v("微信小程序对于图像资源存在一些限制，"),s("code",[t._v("MpxWebpackPlugin.urlLoader")]),t._v(" 针对这些差异做了相关处理，开发者可以使用web应用开发的方式进行图像资源的引入，"),s("code",[t._v("MpxWebpackPlugin.urlLoader")]),t._v(" 可根据图像资源的不同引入方式，支持 CDN 或者 Base64 的方式进行处理。更多细节请查阅"),s("RouterLink",{attrs:{to:"/guide/advance/image-process.html"}},[t._v("图像资源处理")]),t._v("。")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2048")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("选项")]),t._v(":")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("name")]),t._v(" :  自定义输出文件名模板")]),t._v(" "),s("li",[s("code",[t._v("mimetype")]),t._v(" : 指定文件的 MIME 类型")]),t._v(" "),s("li",[s("code",[t._v("limit")]),t._v(" : 对内联文件作为数据 URL 的字节数限制")]),t._v(" "),s("li",[s("code",[t._v("publicPath")]),t._v(" : 自定义 public 目录")]),t._v(" "),s("li",[s("code",[t._v("fallback")]),t._v(" : 文件字节数大于限制时，为文件指定加载程序")])]),t._v(" "),s("h3",{attrs:{id:"mpxwebpackplugin-getpageentry"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-getpageentry"}},[t._v("#")]),t._v(" MpxWebpackPlugin.getPageEntry")]),t._v(" "),s("p",[t._v("在 webpack config entry 入口文件配置中，你可以使用该方法获取独立构建页面路径，构建产物为该页面的独立原生代码，\n你可以提供该页面给其他小程序使用。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPageEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./index.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"mpxwebpackplugin-getcomponententry"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-getcomponententry"}},[t._v("#")]),t._v(" MpxWebpackPlugin.getComponentEntry")]),t._v(" "),s("p",[t._v("在 webpack config entry 入口文件配置中，你可以使用该方法获取独立构建组件路径，构建产物为该组件的独立原生代码，\n你可以提供该组件给其他小程序使用。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getComponentEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./components/list.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"mpxwebpackplugin-getnativeentry"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxwebpackplugin-getnativeentry"}},[t._v("#")]),t._v(" MpxWebpackPlugin.getNativeEntry")]),t._v(" "),s("p",[t._v("在 webpack config entry 入口文件配置中，你可以使用该方法获取原生小程序入口文件路径。如果你不想将原生的小程序入口文件整合为 "),s("code",[t._v("app.mpx")]),t._v(" 文件，则可以使用该方法直接使用原有的小程序入口文件进行编译。见"),s("a",{attrs:{href:"%5B1330%5D(https://github.com/didi/mpx/issues/1330)"}},[t._v("#1330")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 app 入口由默认的 app.mpx 更改为 app.js")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'app'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getNativeEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./src/app.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"mpxunocssplugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxunocssplugin"}},[t._v("#")]),t._v(" MpxUnocssPlugin")]),t._v(" "),s("p",[t._v("Mpx 编译 unocss 原子类的 webpack 主插件")]),t._v(" "),s("p",[t._v("如果在使用 "),s("code",[t._v("@mpxjs/cli@3.x")]),t._v(" 创建项目时选择了 unocss，会自动安装 MpxUnocssPlugin ，直接在 mpx.unocss 配置项中传入相关配置即可")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// @mpxjs/unocss-plugin 相关的配置")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果创建项目时未选 unocss，需手动安装，安装示例如下：")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/unocss-plugin\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pnpm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/unocss-plugin\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("yarn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/unocss-plugin\n")])])]),s("p",[t._v("使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxUnocssPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/unocss-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MpxUnocssPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// @mpxjs/unocss-plugin 相关的配置")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("插件支持配置如下：")]),t._v(" "),s("h3",{attrs:{id:"unofile"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#unofile"}},[t._v("#")]),t._v(" unoFile")]),t._v(" "),s("p",[s("code",[t._v("string = 'styles/uno'")])]),t._v(" "),s("p",[t._v("生成主包或分包通用样式存储的相对路径")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unoFile")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'styles/uno'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("则会把通用样式存储到下面目录")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 主包")]),t._v("\n  dist"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("wx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("styles"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("uno"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wxss\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 分包")]),t._v("\n  dist"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("wx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("package")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("styles"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("uno"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wxss\n")])])]),s("h3",{attrs:{id:"mincount"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mincount"}},[t._v("#")]),t._v(" minCount")]),t._v(" "),s("p",[s("code",[t._v("number = 2")])]),t._v(" "),s("p",[t._v("使用到某个原子类的最小分包个数，比如设置为2的话一个原子类只有超过2个分包使用才会输出到主包")]),t._v(" "),s("blockquote",[s("p",[t._v("主要是用来控制主包占用的，数值越大分包的原子类就有更大可能性不占用主包")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("minCount")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- minCount=2 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- a分包 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bg-black color-white"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- b分包 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bg-black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("unocss将把生成的"),s("code",[t._v("bg-black")]),t._v("样式打包到主包")]),t._v(" "),s("h3",{attrs:{id:"styleisolation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#styleisolation"}},[t._v("#")]),t._v(" styleIsolation")]),t._v(" "),s("p",[s("code",[t._v("string = 'isolated'")])]),t._v(" "),s("p",[t._v("需要和微信小程序的styleIsolation配合使用，比如小程序使用样式隔离的话，这里需要对应配置为isolated，这样的话每个组件会独立引用对应的原子类文件，配置为'apply-shared'的话只有父级页面和app会建立引用，然后通过配合微信的apply-shared的方式获取父级上定义的原子类")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("styleIsolation")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'isolated'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"scan"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#scan"}},[t._v("#")]),t._v(" scan")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Scan")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    include"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    exclude"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("配置需要扫描的文件目录")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("scan")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/**/*'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"escapemap"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#escapemap"}},[t._v("#")]),t._v(" escapeMap")]),t._v(" "),s("p",[s("code",[t._v("object")])]),t._v(" "),s("p",[t._v("针对原子类中出现的"),s("code",[t._v("[")]),t._v(" "),s("code",[t._v("(")]),t._v(" "),s("code",[t._v(",")]),t._v("等特殊字符，在web中会通过转义字符"),s("code",[t._v("\\")]),t._v("进行转义，由于小程序环境下不支持css选择器中出现"),s("code",[t._v("\\")]),t._v("转义字符，我们内置支持了一套不带"),s("code",[t._v("\\")]),t._v("的转义规则对这些特殊字符进行转义，同时替换模版和css文件中的类名，内建的默认转义规则，可自定义转译规则")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("escapeMap")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("':'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_d_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  <view class="),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dark:text-green-400"')]),t._v("/>\n")])])]),s("p",[t._v("将会转化为")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".dark .dark_d_text-green-400")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-text-opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("74"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("222"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("128"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("--un-text-opacity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"root"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#root"}},[t._v("#")]),t._v(" root")]),t._v(" "),s("p",[s("code",[t._v("string = process.cwd()")])]),t._v(" "),s("p",[t._v("文件根目录")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("root")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" process"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cwd")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"transformcss"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#transformcss"}},[t._v("#")]),t._v(" transformCSS")]),t._v(" "),s("p",[s("code",[t._v("boolean = true")])]),t._v(" "),s("p",[t._v("转化css指令为常规css")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transformCSS")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".custom-div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token atrule"}},[s("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@apply")]),t._v(" text-center my-0 font-medium"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("将会转化为")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".custom-div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-bottom")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 500"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"transformgroups"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#transformgroups"}},[t._v("#")]),t._v(" transformGroups")]),t._v(" "),s("p",[s("code",[t._v("boolean = true")])]),t._v(" "),s("p",[t._v("转化Variant group")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("transformGroups")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("lg:(p-2 m-2 text-red-600)"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("将会转化为")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("lg:p-2 lg:m-2 lg:text-red-600"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"config"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#config"}},[t._v("#")]),t._v(" config")]),t._v(" "),s("p",[s("code",[t._v("UserConfig | string")])]),t._v(" "),s("p",[t._v("config可以传配置对象也可以传一个配置文件路径")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'m-1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'10rpx'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"configfiles"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#configfiles"}},[t._v("#")]),t._v(" configFiles")]),t._v(" "),s("p",[s("code",[t._v("LoadConfigSource[]")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LoadConfigSource"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      files"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Arrayable"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n       * @default ['mts', 'cts', 'ts', 'mjs', 'cjs', 'js', 'json', '']\n      */")]),t._v("\n      extensions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n       * Loader for loading config,\n      *\n      * @default 'auto'\n      */")]),t._v("\n      parser"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" BuiltinParsers "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" CustomParser"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auto'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n       * Rewrite the config object,\n      * return nullish value to bypassing loading the file\n      */")]),t._v("\n      rewrite"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("F")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("F")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" filepath"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n       * Transform the source code before loading,\n      * return nullish value to skip transformation\n      */")]),t._v("\n      transform"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("code"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" filepath"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n       * Skip this source if error occurred on loading\n      *\n      * @default false\n      */")]),t._v("\n      skipOnError"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("configFiles的话是传递额外的配置文件数组，比如不想用uno.config作为配置文件的话可以在这里面配")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unocss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configFiles")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("files")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'uno2.config.js'")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"commentconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#commentconfig"}},[t._v("#")]),t._v(" commentConfig")]),t._v(" "),s("p",[t._v("我们还支持了commentConfig进行组件局部配置，目前支持safelist和styleIsolation，safelist可以用空格分隔写多个")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_styleIsolation: 'isolated' --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_safelist: 'text-red-500 bg-black' --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("mpx-unocss"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"mpxunocssbase"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxunocssbase"}},[t._v("#")]),t._v(" MpxUnocssBase")]),t._v(" "),s("p",[t._v("Mpx 内置的 unocss preset，继承自 "),s("code",[t._v("@unocss/preset-uno")]),t._v("，并额外提供小程序原子类的预设样式，安装示例如下：")]),t._v(" "),s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/unocss-base\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pnpm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/unocss-base\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("yarn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-D")]),t._v(" @mpxjs/unocss-base\n")])])]),s("p",[t._v("使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// uno.config.js")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unocss'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" presetMpx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/unocss-base'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("presets")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("presetMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unocss的config，具体配置参考https://unocss.dev/config/")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("支持的配置项如下：")]),t._v(" "),s("h3",{attrs:{id:"basefontsize"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basefontsize"}},[t._v("#")]),t._v(" baseFontSize")]),t._v(" "),s("p",[s("code",[t._v("number = 37.5")])]),t._v(" "),s("p",[t._v("同比换算1rem = 37.5rpx适配小程序")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// uno.config.js")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unocss'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" presetMpx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/unocss-base'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("presets")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("presetMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("baseFontSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("37.5")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"preflight"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#preflight"}},[t._v("#")]),t._v(" preflight")]),t._v(" "),s("p",[s("code",[t._v("boolean = true")])]),t._v(" "),s("p",[t._v("是否生成预设样式")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// uno.config.js")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unocss'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" presetMpx "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/unocss-base'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("presets")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("presetMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("preflight")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("将添加预设样式在主包")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("page")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-rotate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-rotate-x")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-rotate-y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-rotate-z")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-scale-x")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-scale-y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-scale-z")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-skew-x")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-skew-y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-translate-x")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-translate-y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-translate-z")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-pan-x")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-pan-y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-pinch-zoom")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-scroll-snap-strictness")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("proximity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ordinal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-slashed-zero")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-numeric-figure")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-numeric-spacing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-numeric-fraction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-border-spacing-x")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-border-spacing-y")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-offset-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0 0 "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0 0 "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-shadow-inset")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0 0 "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-inset")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-offset-width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-offset-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("#fff"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("0px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-ring-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("147"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("197"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("253"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("0.5"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-blur")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-brightness")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-contrast")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-drop-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-grayscale")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-hue-rotate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-invert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-saturate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-sepia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-blur")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-brightness")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-contrast")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-grayscale")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-hue-rotate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-invert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-saturate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-backdrop-sepia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"dark"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dark"}},[t._v("#")]),t._v(" dark")]),t._v(" "),s("p",[s("code",[t._v("class | media | DarkModeSelectors = 'class'")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DarkModeSelectors")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n     * light variant的选择器.\n     *\n     * @default '.light'\n     */")]),t._v("\n    light"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n     * dark variant的选择器\n     *\n     * @default '.dark'\n     */")]),t._v("\n    dark"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("默认情况下，此预设使用dark:variant生成基于类的dark模式。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dark:text-green-400"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("p",[t._v("我们将生成")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".dark .dark_c_text-green-400")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-text-opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("74"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("222"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("128"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("--un-text-opacity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("要选择基于媒体查询的dark模式，您可以使用@dark:variant")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("@dark:text-green-400"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("p",[t._v("我们将生成")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token atrule"}},[s("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@media")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("prefers-color-scheme")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dark"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("._u_dark_c_text-green-400")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-text-opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("74"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("222"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("128"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("--un-text-opacity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("或者使用针对dark:variant的配置进行全局设置")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("presetMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dark")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"media"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"attributifypseudo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#attributifypseudo"}},[t._v("#")]),t._v(" attributifyPseudo")]),t._v(" "),s("p",[s("code",[t._v("boolean = false")])]),t._v(" "),s("p",[t._v("将伪选择器生成为[group='']，而不是.group。只支持"),s("code",[t._v("group")]),t._v("|"),s("code",[t._v("peer")]),t._v("|"),s("code",[t._v("parent")]),t._v("|"),s("code",[t._v("previous")]),t._v("\n如果attributifyPseudo为true的话，")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("group"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("group-hover:opacity-100"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("上面template将生成")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[group=""]:hover .group-hover_c_opacity-100')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("为false则生成")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".group:hover .group-hover_c_opacity-100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"variableprefix"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#variableprefix"}},[t._v("#")]),t._v(" variablePrefix")]),t._v(" "),s("p",[s("code",[t._v("string = 'un-'")])]),t._v(" "),s("p",[t._v("CSS变量的前缀")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("presetMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("variablePrefix")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'un-'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".bg-red-500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--un-bg-opacity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgba")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("239"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("68"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("68"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("var")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("--un-bg-opacity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"request-query"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#request-query"}},[t._v("#")]),t._v(" Request query")]),t._v(" "),s("p",[t._v("Mpx中允许用户在request中传递特定query执行特定逻辑，目前已支持的query如下：")]),t._v(" "),s("h3",{attrs:{id:"resolve"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#resolve"}},[t._v("#")]),t._v(" ?resolve")]),t._v(" "),s("p",[t._v("用于获取资源最终被输出的正确路径。")]),t._v(" "),s("p",[t._v("Mpx 在处理页面路径时会把对应的分包名作为 root 加在路径前。处理组件路径时会添加 hash，防止路径名冲突。直接写资源相对路径可能与最终输出的资源路径不符。")]),t._v(" "),s("p",[t._v("编写代码时使用 import 引入页面地址后加上 "),s("code",[t._v("?resolve")]),t._v("，这个地址在编译时会被处理成正确的绝对路径，即资源的最终输出位置。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" subPackageIndexPage "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../subpackage/pages/index.mpx?resolve'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" subPackageIndexPage\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"root"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#root"}},[t._v("#")]),t._v(" ?root")]),t._v(" "),s("ol",[s("li",[t._v("声明分包别名")])]),t._v(" "),s("p",[t._v("指定分包别名，Mpx 项目在编译构建后会输出该别名的分包，外部小程序或 H5 页面跳转时，可直接配置该分包别名下的资源路径。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可在项目app.mpx中进行配置")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("packages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@packagePath/src/app.mpx?root=test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用")]),t._v("\nwx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/test/homepage/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ol",{attrs:{start:"2"}},[s("li",[t._v("声明组件所属异步分包")])]),t._v(" "),s("p",[t._v("微信小程序新增 "),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("分包异步化特性"),s("OutboundLink")],1),t._v(" ，使跨分包的组件可以等待对应分包下载后异步使用, 在mpx中使用需通过?root声明组件所属异步分包即可使用，示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--/packageA/pages/index.mpx--\x3e")]),t._v("\n// 这里在分包packageA中即可异步使用分包packageB中的hello组件\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"hello"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../../packageB/components/hello?root=packageB"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"simple-hello"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/hello"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"componentPlaceholder"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"hello"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"simple-hello"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"fallback"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#fallback"}},[t._v("#")]),t._v(" ?fallback")]),t._v(" "),s("p",[s("code",[t._v("boolean")])]),t._v(" "),s("p",[t._v("对于使用"),s("code",[t._v("MpxWebpackPlugin.urlLoader")]),t._v("的文件，如果在引用资源的末尾加上"),s("code",[t._v("?fallback=true")]),t._v("，则使用配置的自定义loader。图片的引入和处理详见"),s("RouterLink",{attrs:{to:"/guide/advance/image-process.html"}},[t._v("图像资源处理")]),t._v("。")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fallback")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'file-loader'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义fallback为true时使用的loader")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* png资源引入 */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("<style>\n  .logo2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v("'./images/logo.png?fallback=true'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 设置fallback=true，则使用如上方所配置的file-loader */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n</style>\n")])])]),s("h3",{attrs:{id:"uselocal"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#uselocal"}},[t._v("#")]),t._v(" ?useLocal")]),t._v(" "),s("p",[s("code",[t._v("boolean")])]),t._v(" "),s("p",[t._v("静态资源存放有两种方式：本地、远程（配置 publicPath ）。useLocal 是用于在配置了 publicPath 时声明部分资源输出到本地。比如配置了通用的 CDN 策略，但如网络兜底资源需要强制走本地存储，可在引用资源的末尾加上"),s("code",[t._v("?useLocal=true")])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 单个图片资源设置为存储到本地 */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("<style>\n  .logo2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v("'./images/logo.png?useLocal=true'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n</style>\n")])])]),s("h3",{attrs:{id:"isstyle"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#isstyle"}},[t._v("#")]),t._v(" ?isStyle")]),t._v(" "),s("p",[s("code",[t._v("boolean")])]),t._v(" "),s("p",[t._v("isStyle 是在非 style 模块中编写样式时，声明这部分引用的静态资源按照 style 环境来处理。如在 javascript 中 require 了一个图像资源，然后模版 template style 属性中进行引用， 则 require 资源时可选择配置"),s("code",[t._v("?isStyle=true")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- isStyle 案例一：引用 javascript 中的数据 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("testStyle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("测试"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- isStyle 案例二：设置资源按照style处理规则处理。style处理规则为: 默认走base64，除非同时配置了 publicPath 和 fallback --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("image")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("../images/car.jpg?isStyle=true"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 普通非style模式，默认走 fallback 或者 file-loader 解析，输出到 publicPath 或者 本地img目录下 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("image")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("../images/car.jpg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 将 script 中的图像资源标识为 style 资源 */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" backCar "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../images/car.jpg?isStyle=true'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("testStyle")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("background-image : url(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("backCar"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("); width:100px; height: 100px")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("h3",{attrs:{id:"ispage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ispage"}},[t._v("#")]),t._v(" ?isPage")]),t._v(" "),s("p",[s("code",[t._v("boolean")])]),t._v(" "),s("p",[t._v("在 webpack config entry 入口文件配置中，你可以在路径后追加 ?isPage 来声明独立页面构建，构建产物为该页面的独立原生代码，\n你可以提供该页面给其他小程序使用。此外，独立页面构建也可以通过MpxWebpackPlugin.getPageEntry生成，推荐使用"),s("a",{attrs:{href:"#mpxwebpackplugin-getpageentry"}},[t._v("此方法。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/pages/index.mpx?isPage'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// config.entry('index').add(MpxWebpackPlugin.getPageEntry('./index.mpx'))")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("对于使用 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 脚手架初始化的项目，配置 entry 的方式如下")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// build/getWebpackConf.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("index")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/pages/index.mpx?isPage'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])]),t._v(" "),s("h3",{attrs:{id:"iscomponent"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#iscomponent"}},[t._v("#")]),t._v(" ?isComponent")]),t._v(" "),s("p",[s("code",[t._v("boolean")])]),t._v(" "),s("p",[t._v("在 webpack config entry 入口文件配置中，你可以在路径后追加 ?isComponent 来声明独立组件构建，构建产物为该组件的独立原生代码，\n你可以提供该组件给其他小程序使用。\n此外，独立组件构建也可以通过MpxWebpackPlugin.getComponentEntry生成，推荐使用"),s("a",{attrs:{href:"#mpxwebpackplugin-getcomponententry"}},[t._v("此方法。")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxWebpackPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/components/list.mpx?isComponent'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// config.entry('index').add(MpxWebpackPlugin.getComponentEntry('./components/list.mpx'))")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"async"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#async"}},[t._v("#")]),t._v(" ?async")]),t._v(" "),s("p",[s("code",[t._v("boolean | string")])]),t._v(" "),s("p",[t._v("输出 H5 时 Vue Router 的路由懒加载功能，Mpx框架默认会对分包开启路由懒加载功能并将分包所有页面都打入同一个Chunk\n，如果你希望对于部分主包页面或者分包页面配置路由懒加载并想自定义Chunk Name，则可以使用该功能。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("// app.mpx \n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index?async"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 主包页面配置路由懒加载，Chunk Name 为随机数字")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index2?async=app_pages2"')]),t._v("，"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 主包页面配置路由懒加载，Chunk Name 自定义为 app_pages2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./packages/sub1/app.mpx?root=sub1"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// packages/sub1/app.mpx\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index?async=sub1_pages_index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 分包中页面设置路由懒加载并设置自定义Chunk Name")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index2?async=sub2_pages_index2"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 分包中页面设置路由懒加载并设置自定义Chunk Name")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/39.094ffa40.js b/docs-vuepress/.vuepress/dist/assets/js/39.094ffa40.js
deleted file mode 100644
index 89a42a7159..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/39.094ffa40.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{388:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"组合式-api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api"}},[t._v("#")]),t._v(" 组合式 API")]),t._v(" "),a("h2",{attrs:{id:"setup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setup"}},[t._v("#")]),t._v(" setup")]),t._v(" "),a("p",[t._v("一个组件选项，在组件被创建之前，props 被解析之后执行。是组合式 API 的入口。")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("参数")]),t._v("：\n"),a("ul",[a("li",[a("code",[t._v("{Data} props")])]),t._v(" "),a("li",[a("code",[t._v("{SetupContext} context")])])])])]),t._v(" "),a("p",[t._v("该 "),a("strong",[t._v("props")]),t._v(" 对象仅包含显性声明的 properties。并且所有声明了的prop，不论父组件是否向其传递，\n都将出现在 "),a("strong",[t._v("props")]),t._v(" 对象中。其中未被传入的可选的 prop 的值会是默认值或 undefined。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("min")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Number"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("lastLeaf")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Number"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("optionalTypes")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("String"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" Object"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("min"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lastLeaf"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("ul",[a("li",[a("strong",[t._v("类型声明")]),t._v("：")])]),t._v(" "),a("div",{staticClass:"language-ts extra-class"},[a("pre",{pre:!0,attrs:{class:"language-ts"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SetupContext")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("triggerEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n       name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n       detail"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// detail对象，提供给事件监听函数")]),t._v("\n       options"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         bubbles"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v("\n         composed"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v("\n         capturePhase"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v("\n       "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n    refs"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ObjectOf"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("NodesRef "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" ComponentIns"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n    asyncRefs"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ObjectOf"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("NodesRef "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" ComponentIns"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 字节小程序特有")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("nextTick")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("fn")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("forceUpdate")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("params"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("selectComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selector"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ComponentIns\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("selectAllComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selector"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ComponentIns"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createSelectorQuery")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" SelectorQuery\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createIntersectionObserver")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n      options"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        thresholds"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n        initialRatio"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v("\n        observeAll"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" IntersectionObserver"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Record"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" SetupContext"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Record"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("h2",{attrs:{id:"生命周期钩子"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#生命周期钩子"}},[t._v("#")]),t._v(" 生命周期钩子")]),t._v(" "),a("p",[t._v("可以通过直接导入 on* 函数来注册生命周期钩子：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" onMounted"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onUpdated"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onUnmounted"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createComponent "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mounted!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onUpdated")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'updated!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onUnmounted")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unmounted!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("这些生命周期钩子注册函数只能在 setup() 期间同步使用，因为它们依赖于内部的全局状态来定位当前活动的实例 (此时正在调用其 setup() 的组件实例)。\n在没有当前活动实例的情况下，调用它们将会出错。")]),t._v(" "),a("p",[t._v("组件实例的上下文也是在生命周期钩子的同步执行期间设置的，因此，在生命周期钩子内同步创建的侦听器和计算属性也会在组件卸载时自动删除。")]),t._v(" "),a("p",[t._v("新版本的生命周期钩子我们基本上和 Vue 中的生命周期钩子对齐，相较于之前还是有部分生命周期钩子的改动。")]),t._v(" "),a("h3",{attrs:{id:"onbeforemount"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onbeforemount"}},[t._v("#")]),t._v(" onBeforeMount")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("在组件布局完成后执行，refs 相关的前置工作在该钩子中执行。")]),t._v(" "),a("h3",{attrs:{id:"onmounted"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onmounted"}},[t._v("#")]),t._v(" onMounted")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("在组件布局完成后执行，refs 可以直接获取。")]),t._v(" "),a("h3",{attrs:{id:"onbeforeupdate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onbeforeupdate"}},[t._v("#")]),t._v(" onBeforeUpdate")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("在数据发生改变后，组件/页面更新之前被调用。这里适合在现有组件/页面将要被更新之前访问它，\n比如移除某个手动添加的监听器，或者获取某个元素更新前的高度。")]),t._v(" "),a("h3",{attrs:{id:"onupdated"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onupdated"}},[t._v("#")]),t._v(" onUpdated")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("在数据更改导致的页面/组件重新渲染和更新完毕之后被调用。")]),t._v(" "),a("p",[t._v("注意，onUpdated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等待整个视图都渲染完毕，可以在 onUpdated 内部使用 nextTick。")]),t._v(" "),a("h3",{attrs:{id:"onbeforeunmount"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onbeforeunmount"}},[t._v("#")]),t._v(" onBeforeUnmount")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("在卸载组件/页面实例之前调用。在这个阶段，实例仍然是完全正常的。")]),t._v(" "),a("h3",{attrs:{id:"onunmount"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onunmount"}},[t._v("#")]),t._v(" onUnmount")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除。")]),t._v(" "),a("h3",{attrs:{id:"onload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onload"}},[t._v("#")]),t._v(" onLoad")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序页面 onLoad 事件，监听页面加载。")]),t._v(" "),a("h3",{attrs:{id:"onshow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onshow"}},[t._v("#")]),t._v(" onShow")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序页面 onShow 事件，监听页面展示。")]),t._v(" "),a("h3",{attrs:{id:"onhide"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onhide"}},[t._v("#")]),t._v(" onHide")]),t._v(" "),a("p",[a("code",[t._v("Function")]),t._v("\n小程序页面 onHide 事件，监听页面隐藏。")]),t._v(" "),a("h3",{attrs:{id:"onresize"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onresize"}},[t._v("#")]),t._v(" onResize")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序页面 onResize 事件，页面尺寸改变时触发。")]),t._v(" "),a("h3",{attrs:{id:"onpulldownrefresh"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onpulldownrefresh"}},[t._v("#")]),t._v(" onPullDownRefresh")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序监听用户下拉刷新事件。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPullDownRefresh",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"onreachbottom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onreachbottom"}},[t._v("#")]),t._v(" onReachBottom")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序监听用户上拉触底事件。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onReachBottom",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"onshareappmessage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onshareappmessage"}},[t._v("#")]),t._v(" onShareAppMessage")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v('小程序监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。'),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"onsharetimeline"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onsharetimeline"}},[t._v("#")]),t._v(" onShareTimeline")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("strong",[t._v("注意：")]),t._v(" 仅微信小程序支持")]),t._v(" "),a("h3",{attrs:{id:"onaddtofavorites"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onaddtofavorites"}},[t._v("#")]),t._v(" onAddToFavorites")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onAddToFavorites-Object-object",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("strong",[t._v("注意：")]),t._v(" 仅微信小程序支持")]),t._v(" "),a("h3",{attrs:{id:"onpagescroll"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onpagescroll"}},[t._v("#")]),t._v(" onPageScroll")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("小程序监听用户滑动页面事件。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPageScroll-Object-object",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"ontabitemtap"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ontabitemtap"}},[t._v("#")]),t._v(" onTabItemTap")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("点击 tab 时触发。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onTabItemTap-Object-object",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"onsaveexitstate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onsaveexitstate"}},[t._v("#")]),t._v(" onSaveExitState")]),t._v(" "),a("p",[a("code",[t._v("Function")])]),t._v(" "),a("p",[t._v("每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用，可以进行退出状态的保存。"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onSaveExitState",target:"_blank",rel:"noopener noreferrer"}},[t._v("详细介绍"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("strong",[t._v("注意：")]),t._v(" 仅微信小程序支持")]),t._v(" "),a("h3",{attrs:{id:"onserverprefetch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onserverprefetch"}},[t._v("#")]),t._v(" onServerPrefetch")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("类型：")]),t._v(" "),a("code",[t._v("Function")])]),t._v(" "),a("li",[a("strong",[t._v("详细：")])])]),t._v(" "),a("p",[t._v("SSR渲染定制钩子，在服务端渲染期间被调用，可以实现在服务端进行数据预取。")]),t._v(" "),a("p",[a("strong",[t._v("注意：")]),t._v(" 仅 web 环境支持")]),t._v(" "),a("h2",{attrs:{id:"getcurrentinstance"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcurrentinstance"}},[t._v("#")]),t._v(" getCurrentInstance")]),t._v(" "),a("p",[t._v("getCurrentInstance 支持访问内部组件实例。")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("注意：")])])]),t._v(" "),a("p",[t._v("getCurrentInstance 只暴露给高阶使用场景，典型的比如在库中。强烈反对在应用的代码中使用 getCurrentInstance。请不要把它当作在组合式 API 中获取 this 的替代方案来使用。")]),t._v(" "),a("p",[t._v("getCurrentInstance 只能在 setup 或生命周期钩子中调用。")]),t._v(" "),a("h2",{attrs:{id:"usei18n"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usei18n"}},[t._v("#")]),t._v(" useI18n")]),t._v(" "),a("p",[t._v("点击"),a("RouterLink",{attrs:{to:"/api/extend.html#usei18n"}},[t._v("查看详情")])],1),t._v(" "),a("h2",{attrs:{id:"usefetch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usefetch"}},[t._v("#")]),t._v(" useFetch")]),t._v(" "),a("p",[t._v("点击"),a("RouterLink",{attrs:{to:"/api/extend.html#usefetch"}},[t._v("查看详情")])],1)])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/4.9489102c.js b/docs-vuepress/.vuepress/dist/assets/js/4.9489102c.js
deleted file mode 100644
index 4cb83cc712..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/4.9489102c.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[4,20,31],{290:function(t,e,n){"use strict";n.d(e,"d",(function(){return r})),n.d(e,"a",(function(){return s})),n.d(e,"i",(function(){return a})),n.d(e,"f",(function(){return u})),n.d(e,"g",(function(){return l})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return p})),n.d(e,"e",(function(){return d})),n.d(e,"k",(function(){return h})),n.d(e,"l",(function(){return f})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return m}));n(69),n(10),n(19),n(48),n(30);const r=/#.*$/,i=/\.(md|html)$/,s=/\/$/,a=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(r,"").replace(i,"")}function u(t){return a.test(t)}function l(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function p(t){if(u(t))return t;const e=t.match(r),n=e?e[0]:"",i=o(t);return s.test(i)?t:i+".html"+n}function d(t,e){const n=decodeURIComponent(t.hash),i=function(t){const e=t.match(r);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function h(t,e,n){if(u(e))return{type:"external",path:e};n&&(e=function(t,e,n){const r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const s=t.replace(/^\//,"").split("/");for(let t=0;t<s.length;t++){const e=s[t];".."===e?i.pop():"."!==e&&i.push(e)}""!==i[0]&&i.unshift("");return i.join("/")}(e,n));const r=o(e);for(let e=0;e<t.length;e++)if(o(t[e].regularPath)===r)return Object.assign({},t[e],{type:"page",path:p(t[e].path)});return console.error(`[vuepress] No matching page found for sidebar item "${e}"`),{}}function f(t,e,n,r){const{pages:i,themeConfig:s}=n,a=r&&s.locales&&s.locales[r]||s;if("auto"===(t.frontmatter.sidebar||a.sidebar||s.sidebar))return b(t);const o=a.sidebar||s.sidebar;if(o){const{base:n,config:r}=function(t,e){if(Array.isArray(e))return{base:"/",config:e};for(const r in e)if(0===(n=t,/(\.html|\/)$/.test(n)?n:n+"/").indexOf(encodeURI(r)))return{base:r,config:e[r]};var n;return{}}(e,o);return"auto"===r?b(t):r?r.map(t=>function t(e,n,r,i=1){if("string"==typeof e)return h(n,e,r);if(Array.isArray(e))return Object.assign(h(n,e[0],r),{title:e[1]});{const s=e.children||[];return 0===s.length&&e.path?Object.assign(h(n,e.path,r),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:s.map(e=>t(e,n,r,i+1)),collapsable:!1!==e.collapsable}}}(t,i,n)):[]}return[]}function b(t){const e=g(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function g(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},291:function(t,e,n){},294:function(t,e,n){"use strict";n(291)},296:function(t,e,n){"use strict";n.r(e);var r={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},i=(n(294),n(4)),s=Object(i.a)(r,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.default=s.exports},300:function(t,e,n){},311:function(t,e,n){},312:function(t,e,n){"use strict";n(313)},313:function(t,e,n){"use strict";var r=n(14),i=n(49),s=n(11),a=n(5),o=n(26);r({target:"Iterator",proto:!0,real:!0},{find:function(t){a(this),s(t);var e=o(this),n=0;return i(e,(function(e,r){if(t(e,n++))return r(e)}),{IS_RECORD:!0,INTERRUPTED:!0}).result}})},314:function(t,e,n){"use strict";n(300)},325:function(t,e,n){"use strict";n.r(e);n(10),n(47);var r=n(338),i=n(327),s=n(290);function a(t,e){if("group"===e.type){const n=e.path&&Object(s.e)(t,e.path),r=e.children.some(e=>"group"===e.type?a(t,e):"page"===e.type&&Object(s.e)(t,e.path));return n||r}return!1}var o={name:"SidebarLinks",components:{SidebarGroup:r.default,SidebarLink:i.default},props:["items","depth","sidebarDepth","initialOpenGroupIndex"],data(){return{openGroupIndex:this.initialOpenGroupIndex||0}},watch:{$route(){this.refreshIndex()}},created(){this.refreshIndex()},methods:{refreshIndex(){const t=function(t,e){for(let n=0;n<e.length;n++){const r=e[n];if(a(t,r))return n}return-1}(this.$route,this.items);t>-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(s.e)(this.$route,t.regularPath)}}},u=n(4),l=Object(u.a)(o,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(n,r){return e("li",{key:r},["group"===n.type?e("SidebarGroup",{attrs:{item:n,open:r===t.openGroupIndex,collapsable:n.collapsable||n.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(r)}}}):e("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:n}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=l.exports},327:function(t,e,n){"use strict";n.r(e);n(10),n(312),n(30),n(47);var r=n(290);function i(t,e,n,r,i){const s={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:r,"sidebar-link":!0}};return i>2&&(s.style={"padding-left":i+"rem"}),t("RouterLink",s,n)}function s(t,e,n,a,o,u=1){return!e||u>o?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const l=Object(r.e)(a,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[i(t,n+"#"+e.slug,e.title,l,e.level-1),s(t,e.children,n,a,o,u+1)])}))}var a={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:a,$themeConfig:o,$themeLocaleConfig:u},props:{item:l,sidebarDepth:c}}){const p=Object(r.e)(a,l.path),d="auto"===l.type?p||l.children.some(t=>Object(r.e)(a,l.basePath+"#"+t.slug)):p,h="external"===l.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,l.path,l.title||l.path):i(t,l.path,l.title||l.path,d),f=[e.frontmatter.sidebarDepth,c,u.sidebarDepth,o.sidebarDepth,1].find(t=>void 0!==t),b=u.displayAllHeaders||o.displayAllHeaders;if("auto"===l.type)return[h,s(t,l.children,l.basePath,a,f)];if((d||b)&&l.headers&&!r.d.test(l.path)){return[h,s(t,Object(r.c)(l.headers),l.path,a,f)]}return h}},o=(n(314),n(4)),u=Object(o.a)(a,void 0,void 0,!1,null,null,null);e.default=u.exports},331:function(t,e,n){"use strict";n(311)},338:function(t,e,n){"use strict";n.r(e);var r=n(290),i={name:"SidebarGroup",components:{DropdownTransition:n(296).default},props:["item","open","collapsable","depth"],beforeCreate(){this.$options.components.SidebarLinks=n(325).default},methods:{isActive:r.e}},s=(n(331),n(4)),a=Object(s.a)(i,(function(){var t=this,e=t._self._c;return e("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?e("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):e("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),e("DropdownTransition",[t.open||!t.collapsable?e("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,"initial-open-group-index":t.item.initialOpenGroupIndex,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null);e.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/40.10d90636.js b/docs-vuepress/.vuepress/dist/assets/js/40.10d90636.js
deleted file mode 100644
index 597926bdd8..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/40.10d90636.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{387:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"模板指令"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#模板指令"}},[t._v("#")]),t._v(" 模板指令")]),t._v(" "),a("h2",{attrs:{id:"wx-if"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-if"}},[t._v("#")]),t._v(" wx:if")]),t._v(" "),a("p",[a("code",[t._v("any")])]),t._v(" "),a("p",[t._v("根据表达式的值的 "),a("a",{attrs:{href:"https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy",target:"_blank",rel:"noopener noreferrer"}},[t._v("truthiness"),a("OutboundLink")],1),t._v(" 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 "),a("strong",[t._v("注意：如果元素是 "),a("code",[t._v("<block/>")]),t._v(", 注意它并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性")]),t._v("。")]),t._v(" "),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[t._v("DANGER")]),t._v(" "),a("p",[t._v("当和 "),a("code",[t._v("wx:if")]),t._v(" 一起使用时，"),a("code",[t._v("wx:for")]),t._v(" 的优先级比 "),a("code",[t._v("wx:if")]),t._v(" 更高。详见列"),a("RouterLink",{attrs:{to:"/guide/basic/list-render.html"}},[t._v("表渲染教程")])],1)]),t._v(" "),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/conditional-render.html"}},[t._v("条件渲染 - wx:if")])],1),t._v(" "),a("h2",{attrs:{id:"wx-elif"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-elif"}},[t._v("#")]),t._v(" wx:elif")]),t._v(" "),a("p",[a("code",[t._v("any")])]),t._v(" "),a("p",[t._v("前一兄弟元素必须有 "),a("code",[t._v("wx:if")]),t._v(" 或 "),a("code",[t._v("wx:elif")]),t._v("。表示 "),a("code",[t._v("wx:if")]),t._v(" 的“ "),a("code",[t._v("wx:elif")]),t._v(" 块”，可以链式调用。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{type === 'A'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  A\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("elif")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{type === 'B'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  B\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("elif")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{type === 'C'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  C\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("else")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  Not A/B/C\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/conditional-render.html"}},[t._v("条件渲染 - wx:elif")])],1),t._v(" "),a("h2",{attrs:{id:"wx-else"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-else"}},[t._v("#")]),t._v(" wx:else")]),t._v(" "),a("p",[t._v("不需要表达式，前一兄弟元素必须有 "),a("code",[t._v("wx:if")]),t._v(" 或 "),a("code",[t._v("wx:elif")])]),t._v(" "),a("p",[t._v("为 "),a("code",[t._v("wx:if")]),t._v(" 或者 "),a("code",[t._v("wx:elif")]),t._v(" 添加 "),a("code",[t._v("wx:else")]),t._v(" 块")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{type === 'A'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  A\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("else")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  Not A\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/conditional-render.html"}},[t._v("条件渲染 - wx:else")])],1),t._v(" "),a("h2",{attrs:{id:"wx-for"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-for"}},[t._v("#")]),t._v(" wx:for")]),t._v(" "),a("p",[a("code",[t._v("Array | Object | number | string")])]),t._v(" "),a("p",[t._v("在组件上使用 "),a("code",[t._v("wx:for")]),t._v(" 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 "),a("code",[t._v("index")]),t._v("，数组当前项的变量名默认为 "),a("code",[t._v("item")])]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{ index }}: {{ item.message }}\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// 0: foo\n// 1: bar\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("array")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bar'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[a("code",[t._v("wx:for")]),t._v(" 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 "),a("code",[t._v("attribute key")]),t._v(" 来提供一个排序提示：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{ item.text }}\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// foo\n// bar\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("array")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bar'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[t._v("DANGER")]),t._v(" "),a("p",[t._v("当和 "),a("code",[t._v("wx:if")]),t._v(" 一起使用时，"),a("code",[t._v("wx:for")]),t._v(" 的优先级比 "),a("code",[t._v("wx:if")]),t._v(" 更高。详见列"),a("RouterLink",{attrs:{to:"/guide/basic/list-render.html"}},[t._v("表渲染教程")])],1)]),t._v(" "),a("p",[a("code",[t._v("wx:for")]),t._v(" 的详细用法可以通过以下链接查看教程详细说明。")]),t._v(" "),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/list-render.html"}},[t._v("列表渲染 - wx:for")])],1),t._v(" "),a("h2",{attrs:{id:"wx-for-index"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-for-index"}},[t._v("#")]),t._v(" wx:for-index")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("使用 wx:for-index 可以指定数组当前下标的变量名：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for-index")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("idx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{ idx }}: {{ item.text }}\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// 0: foo\n// 1: bar\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("array")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bar'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/list-render.html"}},[t._v("列表渲染 - wx:for-index")])],1),t._v(" "),a("h2",{attrs:{id:"wx-for-item"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-for-item"}},[t._v("#")]),t._v(" wx:for-item")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("使用 wx:for-item 可以指定数组当前元素的变量名：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for-item")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for-item")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("j"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{i <= j}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      {{i}} * {{j}} = {{i * j}}\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/list-render.html"}},[t._v("列表渲染 - wx:for-item")])],1),t._v(" "),a("h2",{attrs:{id:"wx-key"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-key"}},[t._v("#")]),t._v(" wx:key")]),t._v(" "),a("p",[a("code",[t._v("number | string")])]),t._v(" "),a("p",[t._v("如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用 wx:key 来指定列表中项目的唯一的标识符。\n"),a("strong",[t._v("注意：如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略")]),t._v("。")]),t._v(" "),a("p",[t._v("有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。")]),t._v(" "),a("p",[t._v("常见的用例是结合 "),a("code",[t._v("wx:for")]),t._v("：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {{ item.text }}\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/list-render.html"}},[t._v("列表渲染 - wx:for")])],1),t._v(" "),a("h2",{attrs:{id:"wx-class"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-class"}},[t._v("#")]),t._v(" wx:class")]),t._v(" "),a("p",[t._v("绑定HTML Class: 类似vue的class绑定")]),t._v(" "),a("p",[t._v("#对象用法")]),t._v(" "),a("p",[t._v("我们可以传给 "),a("code",[t._v("wx:class")]),t._v(" 一个对象，以动态地切换 class：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ {active: isActive} }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("你可以在对象中传入更多字段来动态切换多个 class。此外，"),a("code",[t._v("wx:class")]),t._v(" 指令也可以与普通的 class attribute 共存。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("static"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ {active: isActive, text-danger: hasError} }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("isActive")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hasError")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("渲染为：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("static active"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("注意：由于微信的限制，"),a("code",[t._v("wx:class")]),t._v(" 中的 key 值不能使用引号（如: { 'my-class-name': xx }）")])]),t._v(" "),a("p",[t._v("绑定的数据对象不必内联定义在模板里：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ classObject }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("classObject")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'text-danger'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("我们也可以在这里绑定一个返回对象的计算属性。")]),t._v(" "),a("p",[t._v("如果你也想根据条件切换列表中的 class，可以用三元表达式：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ isActive ? 'active' : '' }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("#数组用法")]),t._v(" "),a("p",[t._v("我们可以把一个数组传给 "),a("code",[t._v("wx:class")]),t._v("，以应用一个 class 列表：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{[activeClass, errorClass]}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("activeClass")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'active'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("errorClass")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'text-danger'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("渲染为：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("active text-danger"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html#类名绑定"}},[t._v("类名样式绑定 - 类名绑定")])],1),t._v(" "),a("h2",{attrs:{id:"wx-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-style"}},[t._v("#")]),t._v(" wx:style")]),t._v(" "),a("p",[a("code",[t._v("wx:style")]),t._v(" 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 来命名：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("color: {{activeColor}}; font-size: {{fontSize}}px; fontWeight: bold"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("activeColor")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontSize")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("30")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("直接绑定到一个样式对象通常更好，这会让模板更清晰：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{styleObject}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("styleObject")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontWeight")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),a("p",[t._v("同样的，对象语法常常结合返回对象的计算属性使用。")]),t._v(" "),a("p",[a("code",[t._v("wx:style")]),t._v(" 的数组语法可以将多个样式对象应用到同一个元素上")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{[baseStyles, overridingStyles]}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  这是一段测试文字\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html#样式绑定"}},[t._v("类名样式绑定 - 样式绑定")])],1),t._v(" "),a("h2",{attrs:{id:"wx-model"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-model"}},[t._v("#")]),t._v(" wx:model")]),t._v(" "),a("p",[t._v("除了小程序原生指令之外，mpx 基于input事件提供了一个指令 wx:model, 用于双向绑定。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{val}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{test.val}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{test['val']}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("wx:model并不会影响相关的事件处理函数，比如像下面这样：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{inputValue}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindinput")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleInput"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html"}},[t._v("双向绑定")])],1),t._v(" "),a("h2",{attrs:{id:"wx-model-prop"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-model-prop"}},[t._v("#")]),t._v(" wx:model-prop")]),t._v(" "),a("p",[t._v("wx:model 默认使用 "),a("code",[t._v("value")]),t._v(" 属性传值，使用 "),a("code",[t._v("wx:model-prop")]),t._v(" 定义 wx:model 指令对应的属性；")]),t._v(" "),a("h2",{attrs:{id:"wx-model-event"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-model-event"}},[t._v("#")]),t._v(" wx:model-event")]),t._v(" "),a("p",[t._v("wx:model 默认监听 "),a("code",[t._v("input")]),t._v(" 事件，可以使用 "),a("code",[t._v("wx:model-event")]),t._v(" 定义 wx:model 指令对应的事件；")]),t._v(" "),a("p",[t._v("父组件")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("customCheck")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{checked}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-prop")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("checkedProp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-event")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("checkedChange"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("customCheck")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createPage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("checked")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"customCheck"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./customCheck"')]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),a("p",[t._v("子组件：(customCheck.mpx)")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("viewProps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{checkedProp}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylus"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token style"}},[a("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".viewProps")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    width 100px\n    height 100px\n    color #000\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("checkedProp")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Boolean\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTap")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里第二个参数为自定义事件的detail，需要以下面的形式传递值以保持与原生组件对齐")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("triggerEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'checkedChange'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("checkedProp\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如示例，当子组件被点击时，父组件的checked数据会发生变化")]),t._v(" "),a("blockquote",[a("p",[t._v("注意：由于微信限制，如果事件名使用横线分割（'checked-change'）,将不可以再使用该特性")])]),t._v(" "),a("h2",{attrs:{id:"wx-model-value-path"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-model-value-path"}},[t._v("#")]),t._v(" wx:model-value-path")]),t._v(" "),a("p",[t._v("指定 wx:model 双向绑定时的取值路径；\n并非所有的组件都会按微信的标注格式 "),a("code",[t._v("event.detail.value")]),t._v(" 来传值，例如 vant 的 input 组件，值是通过抛出 "),a("code",[t._v("event.detail")]),t._v(" 本身传递的，这时我们可以使用 "),a("code",[t._v('wx:model-value-path="[]"')]),t._v(" 重新指定取值路径。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("vant-field")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-value-path")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("[]"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{a}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("vant-field")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"wx-model-filter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-model-filter"}},[t._v("#")]),t._v(" wx:model-filter")]),t._v(" "),a("p",[t._v("在使用 "),a("code",[t._v("wx:model")]),t._v(" 时我们可能需要像 Vue 的 "),a("code",[t._v(".trim")]),t._v(" 、"),a("code",[t._v(".lazy")]),t._v(" 这样的修饰符来对双向数据绑定的数据进行过滤和修饰；Mpx 通过增强指令 "),a("code",[t._v("wx:model-filter")]),t._v(" 可以实现这一功能；\n该指令可以绑定内建的 filter 或者自定义的 filter 方法，该方法接收过滤前的值，返回过滤操作后的值。")]),t._v(" "),a("p",[t._v("例如我们希望拿到的 input 元素中的数据是经过 trim 的。示例：")]),t._v(" "),a("blockquote",[a("p",[t._v('当然，Mpx 已经内置了 trim 过滤器；可以通过 wx:model-filter="trim" 直接使用；')])]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cover-page"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n       "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- wx:model-filter 过滤wx:model 的值--\x3e")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-filter")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("trimSpace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{filterData}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{filterData.length}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("filterData")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'model-filter'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trimSpace")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wx:model-filter 绑定的 filter 方法")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" val "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'string'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" val"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trim")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("filter 方法除可以是和 "),a("code",[t._v("methods")]),t._v(" 平级的方法，还可以是 "),a("code",[t._v("methods")]),t._v(" 中的方法。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("..."),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("  \n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("filterData")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'model-filter'")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trimSpace")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wx:model-filter 支持将过滤器方法定义成 methods 中的方法")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" val "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'string'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" val"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trim")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"wx-ref"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-ref"}},[t._v("#")]),t._v(" wx:ref")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("Mpx提供了 "),a("code",[t._v("wx:ref=xxx")]),t._v(" 来更方便获取 WXML 节点信息的对象。在JS里只需要通过this.$refs.xxx 即可获取节点。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[t._v("  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    123\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("fields")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("size")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  ")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/refs.html"}},[t._v("获取组件实例 - wx:ref")])],1),t._v(" "),a("h2",{attrs:{id:"wx-show"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wx-show"}},[t._v("#")]),t._v(" wx:show")]),t._v(" "),a("p",[a("code",[t._v("boolean")])]),t._v(" "),a("p",[t._v("与 "),a("code",[t._v("wx:if")]),t._v(" 所不同的是"),a("strong",[t._v("不会移除节点")]),t._v("，而是设置节点的 "),a("code",[t._v("style")]),t._v(" 为 "),a("code",[t._v("display: none")]),t._v("。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("show")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{show}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  123\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("show")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h2",{attrs:{id:"bind"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bind"}},[t._v("#")]),t._v(" bind")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("让 "),a("code",[t._v("bind + (:?) + eventType")]),t._v(" 作为属性值")]),t._v(" "),a("p",[t._v("比如："),a("code",[t._v("bindtap")])]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tapTest"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" Click me! "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bind:")]),t._v("tap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tapTest1(testVal, $event)"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" Click me! "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("tapTest")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Clicked!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("tapTest1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Mpx做了增强的"),a("strong",[t._v("内联传参")]),t._v("能力以及具体有哪些事件"),a("strong",[t._v("类型")]),t._v("参考下方")]),t._v(" "),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("事件处理 - bind")])],1),t._v(" "),a("h2",{attrs:{id:"catch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#catch"}},[t._v("#")]),t._v(" catch")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("让 "),a("code",[t._v("catch + (:?) + eventType")]),t._v(" 作为属性值")]),t._v(" "),a("p",[t._v("除 "),a("code",[t._v("bind")]),t._v(" 外，也可以用 "),a("code",[t._v("catch")]),t._v(" 来绑定事件。与 "),a("code",[t._v("bind")]),t._v(" 不同，"),a("code",[t._v("catch")]),t._v(" 会阻止事件向上冒泡。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("outer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  outer view\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("middle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("catchtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    middle view\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("inner"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      inner view\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Page")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTap1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'outer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTap2")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'middle'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTap3")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'inner'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过几个操作看出被catchtap的middle view阻止了向上冒泡")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// click outer")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// outer")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// click middle")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// middle")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// click inner")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// inner")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// middle")]),t._v("\n")])])]),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("事件处理 - catch")])],1),t._v(" "),a("h2",{attrs:{id:"capture-bind"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#capture-bind"}},[t._v("#")]),t._v(" capture-bind")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("让 "),a("code",[t._v("capture-bind + (:?) + eventType")]),t._v(" 作为属性值")]),t._v(" "),a("p",[t._v("capture-bind要在bind之前执行，是因为事件是先捕获后冒泡，"),a("strong",[t._v("注意：仅触摸类事件支持捕获阶段")])]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[t._v("  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("outer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("capture-bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    outer view\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("inner"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("capture-bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      inner view\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("点击inner view的调用顺序是(handleTap)2、4、3、1")]),t._v(" "),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("事件处理 - capture-bind")])],1),t._v(" "),a("h2",{attrs:{id:"capture-catch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#capture-catch"}},[t._v("#")]),t._v(" capture-catch")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("让 "),a("code",[t._v("capture-catch + (:?) + eventType")]),t._v(" 作为属性值")]),t._v(" "),a("p",[t._v("capture-catch中断捕获阶段和取消冒泡阶段")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("outer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("capture-catch:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  outer view\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("inner"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("capture-bind:")]),t._v("touchstart")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    inner view\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("点击inner view仅执行handleTap2")]),t._v(" "),a("p",[a("strong",[t._v("参考：")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("事件处理 - capture-catch")])],1),t._v(" "),a("h2",{attrs:{id:"mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mode"}},[t._v("#")]),t._v(" @mode")]),t._v(" "),a("p",[a("code",[t._v("type mode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'")])]),t._v(" "),a("p",[t._v("跨平台输出场景下，Mpx 框架允许用户在组件上使用 @ 和 | 符号来指定某个节点或属性只在某些平台下有效。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type@wx|swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindgetuserinfo@wx|swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getAuthorize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scope@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("userInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("在上方示例中，开发者可以便捷的设置在支付宝小程序与微信和百度小程序等平台分别生效的 open-type 属性，\n以及事件绑定或其他属性。假设当前 srcMode 为 wx，目标平台为 ali，则输出产物为：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getAuthorize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scope")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("userInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("同时，该指令也可以作用在单个节点上，但需要注意的是，该指令作用在单个节点时，节点仅在目标平台输出，同时节点自身属性不会进行跨平台语法转换，不过其子节点不受影响。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--当srcMode为wx，跨平台输出ali时--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--错误写法--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{flag}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("text"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--正确写法--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{flag}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("text"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mode"}},[t._v("#")]),t._v(" @_mode")]),t._v(" "),a("p",[a("code",[t._v("type _mode = '_wx' | '_ali' | '_qq' | '_swan' | '_tt' | '_web' | '_qa'")])]),t._v(" "),a("p",[t._v("有时开发者期望使用 @mode 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--srcMode为 wx，输出 ali 时，bindtap 会被正常转换为 onTap--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@_ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。")]),t._v(" "),a("h2",{attrs:{id:"env"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#env"}},[t._v("#")]),t._v(" @env")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("跨平台输出场景下，除了 mode 平台场景值，Mpx 框架还提供自定义 env 目标应用，来实现在不同应用下编译产出不同的代码。")]),t._v(" "),a("p",[t._v("关于 env 的详细介绍可以点击"),a("RouterLink",{attrs:{to:"/guide/advance/platform.html#use-env"}},[t._v("查看")])],1),t._v(" "),a("p",[t._v("跨平台输出使用 env 与 mode 一样支持文件纬度、区块纬度、节点纬度、属性纬度等条件编译，这里我们仅介绍下节点和属性纬度的指令模式使用，env 与 mode 可以组合使用。")]),t._v(" "),a("p",[t._v("env 属性维度条件编译与 mode 的用法大致相同，使用 : 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 attr@mode:env:env|mode:env，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 : 前缀，形如 attr@:env。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--open-type 属性仅在百度平台且应用 env 为 didi 时保留--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@swan:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--open-type 属性在应用 env 为 didi 的任意小程序平台保留--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--open-type 属性在微信平台且应用 env 为 didi 或 qingju 时保留--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@wx:")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("didi:")]),t._v("qingju")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("env 也可在单个节点上进行条件编译：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--整个节点在应用 env 为 didi时进行保留--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("需要注意的时，如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("@:")]),t._v("didi")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bindtap@:")]),t._v("didi")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"mpxtagname"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mpxtagname"}},[t._v("#")]),t._v(" mpxTagName")]),t._v(" "),a("p",[a("code",[t._v("string")])]),t._v(" "),a("p",[t._v("跨平台输出时，有时开发者不仅需要对节点属性进行条件编译，可能还需对节点标签进行条件编译。")]),t._v(" "),a("p",[t._v("为此，Mpx 框架支持了一个特殊属性 mpxTagName，如果节点存在这个属性，在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mpxTagName@swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cover-view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("will be cover-view in swan"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/41.8351af86.js b/docs-vuepress/.vuepress/dist/assets/js/41.8351af86.js
deleted file mode 100644
index 4fe0c51f14..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/41.8351af86.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{389:function(t,e,a){"use strict";a.r(e);var s=a(4),n=Object(s.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"周边拓展"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#周边拓展"}},[t._v("#")]),t._v(" 周边拓展")]),t._v(" "),e("h2",{attrs:{id:"mpx-fetch"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mpx-fetch"}},[t._v("#")]),t._v(" mpx-fetch")]),t._v(" "),e("p",[t._v("mpx-fetch提供了一个实例"),e("strong",[t._v("xfetch")]),t._v(" ，该实例包含以下api")]),t._v(" "),e("h3",{attrs:{id:"fetch-config"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fetch-config"}},[t._v("#")]),t._v(" fetch(config)")]),t._v(" "),e("blockquote",[e("p",[t._v("正常的promisify风格的请求方法")])]),t._v(" "),e("ul",[e("li",[e("p",[e("code",[t._v("{Object} config")])]),t._v(" "),e("p",[t._v("config 可指定以下属性：")]),t._v(" "),e("ul",[e("li",[e("p",[e("strong",[t._v("url")])]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("设置请求url")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("method")])]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("设置请求方式，默认为GET")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("data")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("设置请求参数")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("params")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("设置请求参数，参数会以 Query String 的形式进行传递")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("header")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("设置请求的 header，header 中不能设置 Referer。\n"),e("code",[t._v("content-type")]),t._v(" 默认为 "),e("code",[t._v("application/json")])])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("timeout")])]),t._v(" "),e("p",[e("code",[t._v("number")])]),t._v(" "),e("p",[t._v("单位为毫秒。若不传，默认读取app.json文件中__networkTimeout属性。 对于超时的处理可在 catch 方法中进行")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("emulateJSON")])]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("设置为 true 时，等价于 header = {'content-type': 'application/x-www-form-urlencoded'}")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("usePre")])]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("预请求开关，若设置为 true，则两次请求间隔在有效期内且请求参数和请求方式对比一致的情况下，会返回上一次的请求结果")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("cacheInvalidationTime")])]),t._v(" "),e("p",[e("code",[t._v("number")])]),t._v(" "),e("p",[t._v("预请求缓存有效时长，单位 ms，默认为 5000ms。当两次请求时间间隔超过设置时长后再发起二次请求时，上一次的请求缓存会失效然后重新发起请求")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("ignorePreParamKeys")])]),t._v(" "),e("p",[e("code",[t._v("array")]),t._v(" | "),e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("在判断缓存请求是否可用对比前后两次请求参数时，默认对比的是 options 传入的所有参数（包括 params 和 data ）。但在具体业务场景下某些参数不一致时的缓存结果依旧可使用（比如参数中带有时间戳），所以提供 ignorePreParamKeys 来设置对比参数过程中可忽略的参数的 key，支持字符串数组和字符串（字符串传多个 key 时使用英文逗号分隔）类型。\n配置后在进行参数对比时，不会对比在 ignorePreParamKeys 设置的参数。")])])])])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpxFetch "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mpxFetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第一种访问形式")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'POST'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("header")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'content-type'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'application/x-www-form-urlencoded'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("emulateJSON")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePre")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheInvalidationTime")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3000")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ignorePreParamKeys")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'timestamp'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tconsole"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLaunch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第二种访问形式")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://test.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h3",{attrs:{id:"canceltoken"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#canceltoken"}},[t._v("#")]),t._v(" CancelToken")]),t._v(" "),e("p",[t._v("命名导出，用于创建一个取消请求的凭证。")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" CancelToken "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cancelToken "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CancelToken")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cancelToken")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" cancelToken"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("token\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ncancelToken"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手动取消请求'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行后请求中断，返回abort fail")]),t._v("\n")])])]),e("h3",{attrs:{id:"xfetch"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#xfetch"}},[t._v("#")]),t._v(" XFetch")]),t._v(" "),e("p",[t._v("命名导出，用于创建一个新的mpx-fetch实例进行独立使用")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FetchOptions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    useQueue"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否开启队列功能")]),t._v("\n    proxy"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否开启代理功能")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" XFetch "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newFetch "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("XFetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 生成新的mpx-fetch实例")]),t._v("\n")])])]),e("h3",{attrs:{id:"interceptors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#interceptors"}},[t._v("#")]),t._v(" interceptors")]),t._v(" "),e("blockquote",[e("p",[t._v("实例属性，用于添加拦截器，包含两个属性，request & response")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("mpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("interceptors"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("request"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("config"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以返回promise")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" config\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("interceptors"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以返回promise")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" res\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h3",{attrs:{id:"proxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#proxy"}},[t._v("#")]),t._v(" proxy 代理")]),t._v(" "),e("h4",{attrs:{id:"setproxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setproxy"}},[t._v("#")]),t._v(" setProxy")]),t._v(" "),e("blockquote",[e("p",[t._v("配置代理项，可以传入一个数组或者一个对象，请求会按设置的规则进行代理")])]),t._v(" "),e("ul",[e("li",[e("p",[e("strong",[t._v("参数：")])]),t._v(" "),e("p",[e("code",[t._v("{Array | Object}")])]),t._v(" "),e("ul",[e("li",[e("p",[e("strong",[t._v("test")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("ul",[e("li",[e("p",[t._v("url")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("全路径匹配，规则可以参考"),e("a",{attrs:{href:"https://www.npmjs.com/package/path-to-regexp",target:"_blank",rel:"noopener noreferrer"}},[t._v("path-to-regexp"),e("OutboundLink")],1),t._v("，也可参考下面的简单示例。")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),e("p",[t._v("如果设置了此项，则 protocol、host、port、path 规则不再生效。此项支持 path-to-regexp 匹配，protocol、host、port、path 为全等匹配。")])])]),t._v(" "),e("li",[e("p",[t._v("protocol")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("待匹配的协议头")])]),t._v(" "),e("li",[e("p",[t._v("host")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("不包含端口的 host")])]),t._v(" "),e("li",[e("p",[t._v("port")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("待匹配的端口")])]),t._v(" "),e("li",[e("p",[t._v("path")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("待匹配的路径")])]),t._v(" "),e("li",[e("p",[t._v("params")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("同时匹配请求中的 "),e("code",[t._v("params")]),t._v(" 和 "),e("code",[t._v("query")])])]),t._v(" "),e("li",[e("p",[t._v("data")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("匹配请求中的 "),e("code",[t._v("data")])])]),t._v(" "),e("li",[e("p",[t._v("header")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("匹配请求中的 "),e("code",[t._v("header")])])]),t._v(" "),e("li",[e("p",[t._v("method")]),t._v(" "),e("p",[e("code",[t._v("Method | Method[]")])]),t._v(" "),e("p",[t._v("匹配请求方法，不区分大小写，可以传一个方法，也可以传一个方法数组")])]),t._v(" "),e("li",[e("p",[t._v("custom")]),t._v(" "),e("p",[e("code",[t._v("function")])]),t._v(" "),e("p",[t._v("自定义匹配规则，参数会注入原始请求配置，结果需返回 "),e("code",[t._v("true")]),t._v(" 或 "),e("code",[t._v("false")])]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),e("p",[t._v("如果设置了此项，匹配结果以此项为准，以上规则均不再生效。")])])])])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("proxy")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("ul",[e("li",[e("p",[t._v("url")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("代理的 url")])]),t._v(" "),e("li",[e("p",[t._v("protocol")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("修改原请求的协议头")])]),t._v(" "),e("li",[e("p",[t._v("host")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("代理的 host，不包含端口号")])]),t._v(" "),e("li",[e("p",[t._v("port")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("修改端口号")])]),t._v(" "),e("li",[e("p",[t._v("path")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("修改原请求路径")])]),t._v(" "),e("li",[e("p",[t._v("params")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("合并原请求的 params")])]),t._v(" "),e("li",[e("p",[t._v("data")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("合并原请求的 data")])]),t._v(" "),e("li",[e("p",[t._v("header")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("合并原请求的 header")])]),t._v(" "),e("li",[e("p",[t._v("method")]),t._v(" "),e("p",[e("code",[t._v("Method")])]),t._v(" "),e("p",[t._v("替换原请求的方法")])]),t._v(" "),e("li",[e("p",[t._v("custom")]),t._v(" "),e("p",[e("code",[t._v("function")])]),t._v(" "),e("p",[t._v("自定义代理规则，会注入两个参数，第一个是上一个匹配规则处理后的请求配置，第二个是 match 的参数对象，结果需返回要修改的请求配置对象。")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),e("p",[t._v("如果设置了此项，最终代理配置将以此项为准，其他配置规则均不再生效。")])])])])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("waterfall")])]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("默认为 "),e("code",[t._v("false")]),t._v("，为 "),e("code",[t._v("false")]),t._v(" 时，命中当前规则处理完就直接返回；为 "),e("code",[t._v("true")]),t._v(" 时，命中当前匹配规则处理完成后将结果传递给下面命中匹配规则继续处理。")])])])])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("mpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("setProxy")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此项匹配之后，会按下面 proxy 配置的修改请求配置")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("header")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'content-type'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'application/x-www-form-urlencoded'")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'get'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test1")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'abc'")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("header")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("env")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'env test'")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test2")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cba'")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("waterfall")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 为 true 时会将此次修改后的请求配置继续传递给下面的规则处理")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以分别单独匹配 protocol、host、port、path；代理规则同样")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("protocol")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http:'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("host")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mock.didi.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("port")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/mock/test'")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("host")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test.didi.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("port")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("8888")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("waterfall")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义匹配规则")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("custom")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// config 为原始的请求配置")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义匹配逻辑")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("xxx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义代理配置")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("custom")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" params")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// config 为上面匹配后修改过的请求配置")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// params 为 match 后的参数对象")]),t._v("\n            "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回需要修改的请求配置对象")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v("\n                "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test3")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'aaa'")]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("waterfall")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// : 可以匹配目标项，并将 match 结果返回到代理 custom 函数中")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// :和?都属于保留符号，若不想做匹配时需用 '\\\\' 转义")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// (.*)为全匹配")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("':protocol\\\\://mock.didi.com/mock/:id/oneapi/router/forum/api/v1/(.*)'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'get'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'post'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://127.0.0.1:8080/go/into/$id/api/v2/abcd'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// '$'项在代理生效后会替换匹配规则中的':'项")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("waterfall")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// false 时不会继续匹配后面的规则")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h4",{attrs:{id:"prependproxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#prependproxy"}},[t._v("#")]),t._v(" prependProxy")]),t._v(" "),e("blockquote",[e("p",[t._v("向前追加代理规则")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("mpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("prependProxy")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("waterfall")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h4",{attrs:{id:"appendproxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#appendproxy"}},[t._v("#")]),t._v(" appendProxy")]),t._v(" "),e("blockquote",[e("p",[t._v("向后追加代理规则")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("mpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("appendProxy")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("proxy")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("waterfall")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h4",{attrs:{id:"getproxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getproxy"}},[t._v("#")]),t._v(" getProxy")]),t._v(" "),e("blockquote",[e("p",[t._v("查看已有的代理配置")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getProxy")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h4",{attrs:{id:"clearproxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#clearproxy"}},[t._v("#")]),t._v(" clearProxy")]),t._v(" "),e("blockquote",[e("p",[t._v("解除所有的代理配置")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("mpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearProxy")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h3",{attrs:{id:"usefetch"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#usefetch"}},[t._v("#")]),t._v(" useFetch")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("useFetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" FetchOptions"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("xfetch\n")])])]),e("p",[t._v("在组合式 API 中使用，用来获取 "),e("code",[t._v("@mpxjs/fetch")]),t._v(" 插件的 xfetch 实例，等用于 "),e("code",[t._v("mpx.xfetch")]),t._v("。 关于 xfetch 实例的详细介绍，请点击"),e("RouterLink",{attrs:{to:"/api/extend.html#mpx-fetch"}},[t._v("查看")])],1),t._v(" "),e("p",[t._v("此外该方法可选择传入 "),e("code",[t._v("options")]),t._v(" 参数，若传入参数，则会创建一个新的 XFetch 实例返回，若不传入参数，则默认将全局 "),e("code",[t._v("xfetch")]),t._v(" 实例返回。")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpxFetch "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mpxFetch"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// script-setup.mpx")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" useFetch "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/fetch'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("useFetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://xxx.com'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'POST'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("params")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("emulateJSON")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePre")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheInvalidationTime")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("3000")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ignorePreParamKeys")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'timestamp'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("ul",[e("li",[e("strong",[t._v("注意：")]),t._v(" options 参数同 "),e("RouterLink",{attrs:{to:"/api/extend.html#XFetch"}},[t._v("XFetch")]),t._v(" 章节。")],1)]),t._v(" "),e("h2",{attrs:{id:"api-proxy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-proxy"}},[t._v("#")]),t._v(" api-proxy")]),t._v(" "),e("p",[t._v("Mpx目前已经支持的API转换列表，供参考")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("方法/平台")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("wx")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("ali")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("web")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("RN")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("getSystemInfo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getSystemInfoSync")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("nextTick")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("showToast")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("hideToast")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("showModal")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("showLoading")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("hideLoading")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("showActionSheet")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("showNavigationBarLoading")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("hideNavigationBarLoading")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("setNavigationBarTitle")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("setNavigationBarColor")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("request")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("downloadFile")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("uploadFile")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("setStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("setStorageSync")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("removeStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("removeStorageSync")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getStorageSync")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getStorageInfo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getStorageInfoSync")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("clearStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("clearStorageSync")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("saveImageToPhotosAlbum")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("previewImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("compressImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("chooseImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getLocation")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("saveFile")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("removeSavedFile")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getSavedFileList")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getSavedFileInfo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("addPhoneContact")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("setClipboardData")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getClipboardData")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("setScreenBrightness")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getScreenBrightness")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("makePhoneCall")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("stopAccelerometer")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("startAccelerometer")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("stopCompass")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("startCompass")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("stopGyroscope")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("startGyroscope")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("scanCode")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("login")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("checkSession")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getUserInfo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("requestPayment")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("createCanvasContext")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("canvasToTempFilePath")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("canvasPutImageData")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("canvasGetImageData")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("createSelectorQuery")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("onWindowResize")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("offWindowResize")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("arrayBufferToBase64")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("base64ToArrayBuffer")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("connectSocket")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getNetworkType")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("onNetworkStatusChange")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("offNetworkStatusChange")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")])])])]),t._v(" "),e("h2",{attrs:{id:"webview-bridge"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#webview-bridge"}},[t._v("#")]),t._v(" webview-bridge")]),t._v(" "),e("p",[t._v("Mpx 支持小程序跨平台后，多个平台的小程序里都提供了 webview 组件，webview 打开的 H5 页面可以通过小程序提供的 API 来与小程序通信以及调用一些小程序的能力，但是各家小程序对于 webview 提供的API是不一样的。")]),t._v(" "),e("p",[t._v("比如微信的 webview 打开的 H5 页面里是通过调用 wx.miniProgram.navigateTo 来跳转到原生小程序页面的，而在支付宝是通过调用 my.navigateTo 来实现跳转的，那么我们开发 H5 时候为了让 H5 能适应各家小程序平台就需要写多份对应逻辑。")]),t._v(" "),e("p",[t._v("为解决这个问题，Mpx 提供了抹平平台差异的bridge库：@mpxjs/webview-bridge。")]),t._v(" "),e("p",[e("strong",[t._v("安装：")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("npm install @mpxjs"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("webview"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("bridge\n")])])]),e("p",[e("strong",[t._v("使用：")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webview-bridge'")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateBack")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("env "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 输出：wx/qq/ali/baidu/tt")]),t._v("\nmpx"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkJSApi")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("p",[e("strong",[t._v("cdn地址引用：")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" 开发环境版本，方便调试 "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://dpubstatic.udache.com/static/dpubimg/D2JeLyT0_Y/2.2.43.webviewbridge.js"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" 生产环境版本，压缩了体积 "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://dpubstatic.udache.com/static/dpubimg/PRg145LZ-i/2.2.43.webviewbridge.min.js"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" 同时支持 "),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ES")]),t._v(" Module 引入的 "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// index.html")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"module"')]),t._v(" src"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://dpubstatic.udache.com/static/dpubimg/6MQOo-ocI4/2.2.43.webviewbridge.esm.browser.min.js"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// main.js")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://dpubstatic.udache.com/static/dpubimg/6MQOo-ocI4/2.2.43.webviewbridge.esm.browser.min.js"')]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//ES Module 开发版本地址： https://dpubstatic.udache.com/static/dpubimg/cdhpNhmWmJ/2.2.43.webviewbridge.esm.browser.js")]),t._v("\n")])])]),e("p",[e("strong",[t._v("基础方法提供：")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("方法/平台")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("wx")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("qq")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("ali")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("baidu")]),t._v(" "),e("th",{staticStyle:{"text-align":"right"}},[t._v("tt")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("navigateTo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("navigateBack")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("switchTab")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("reLaunch")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("redirectTo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getEnv")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("postMessage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("getLoadError")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("✅")])]),t._v(" "),e("tr",[e("td",[t._v("onMessage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])])])]),t._v(" "),e("p",[e("strong",[t._v("扩展方法提供：")])]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("方法/平台")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("wx")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("qq")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("ali")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("baidu")]),t._v(" "),e("th",{staticStyle:{"text-align":"right"}},[t._v("tt")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("checkJSApi")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("chooseImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("previewImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("uploadImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("downloadImage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getLocalImgData")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("startRecord")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("stopRecord")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("onVoiceRecordEnd")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("playVoice")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("pauseVoice")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("stopVoice")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("onVoicePlayEnd")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("uploadVoice")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("downloadVoice")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("translateVoice")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getNetworkType")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("openLocation")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("getLocation")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("stopSearchBeacons")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("onSearchBeacons")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("scanQRCode")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("chooseCard")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("addCard")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("openCard")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])]),t._v(" "),e("tr",[e("td",[t._v("alert")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("showLoading")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("hideLoading")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("setStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("getStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("removeStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("clearStorage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("getStorageInfo")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("startShare")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("tradePay")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}}),t._v(" "),e("td",{staticStyle:{"text-align":"right"}})]),t._v(" "),e("tr",[e("td",[t._v("onMessage")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("✅")]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[t._v("❌")]),t._v(" "),e("td",{staticStyle:{"text-align":"right"}},[t._v("❌")])])])]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),e("p",[t._v("这个库仅提供给 H5 使用，请勿在小程序环境引入")])]),t._v(" "),e("h2",{attrs:{id:"size-report"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#size-report"}},[t._v("#")]),t._v(" size-report")]),t._v(" "),e("p",[t._v("Mpx框架项目包体积可以进行分组、分包、页面、冗余Npm包等维度的分析和对比，详细"),e("RouterLink",{attrs:{to:"/advance/size-report.html"}},[t._v("请见")])],1),t._v(" "),e("h3",{attrs:{id:"插件配置项"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#插件配置项"}},[t._v("#")]),t._v(" 插件配置项")]),t._v(" "),e("ul",[e("li",[e("p",[e("strong",[t._v("server")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("本地可视化服务相关配置")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("filename")])]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("构建生成的包体积详细输出文件地址")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("threshold")])]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("配置项目总体积和分包体积阈值，包含两个字段，size 为项目总体积阈值，packages 为分包体积阈值")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("{\n   size: '16MB', // 项目总包体积限额 16M\n   packages: '2MB' // 项目每个分包体积限额 2M\n}\n")])])])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("groups")])]),t._v(" "),e("p",[e("code",[t._v("Array<object>")])]),t._v(" "),e("p",[t._v("配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息")]),t._v(" "),e("ul",[e("li",[e("p",[t._v("name")]),t._v(" "),e("p",[e("code",[t._v("string")])]),t._v(" "),e("p",[t._v("分组名称")])]),t._v(" "),e("li",[e("p",[t._v("threshold")]),t._v(" "),e("p",[e("code",[t._v("string | object")])]),t._v(" "),e("p",[t._v("分组相关体积阈值，若不配置则该分组不校验体积阈值，同时也支持对分组中占各分包体积阈值")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("// 分组体积限额 500KB\nthreshold: '500KB'\n// 或者如下方，分组体积限额500KB，分组占主包体积限额160KB\nthreshold: {\n  size: '500KB',\n  packages: {\n    main: '160KB'\n  }\n}\n")])])])]),t._v(" "),e("li",[e("p",[t._v("entryRules")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry")]),t._v(" "),e("ul",[e("li",[t._v("include: 包含符合条件的入口文件，默认为空数组，规则数组中支持函数、正则、字符串")]),t._v(" "),e("li",[t._v("exclude: 剔除符合条件的入口文件，默认为空数组，规则数组中支持函数、正则、字符串")])]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("include: [/@someGroup\\/some-npm-package/],\nexclude: [/@someGroup\\/some-two-pack/]\n")])])])]),t._v(" "),e("li",[e("p",[t._v("noEntryRules")]),t._v(" "),e("p",[e("code",[t._v("object")])]),t._v(" "),e("p",[t._v("配置计算分组中纯 js 入口引入的体积（不包含组件和页面）")]),t._v(" "),e("ul",[e("li",[t._v("include: 包含符合条件的 js 文件，默认为空数组，规则数组中支持函数、正则、字符串")]),t._v(" "),e("li",[t._v("exclude: 剔除符合条件的 js 文件，默认为空数组，规则数组中支持函数、正则、字符串")])]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("include: [/@someGroup\\/some-npm-package/],\nexclude: [/@someGroup\\/some-two-pack/]\n")])])])])])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("reportPages")])]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("是否收集页面维度体积详情，默认 false")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("reportAssets")])]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("是否收集资源维度体积详情，默认 false")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("reportRedundance")])]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("是否收集冗余资源，默认 false")])]),t._v(" "),e("li",[e("p",[e("strong",[t._v("showEntrysPackages")])]),t._v(" "),e("p",[e("code",[t._v("Array<string>")])]),t._v(" "),e("p",[t._v("展示某些分包资源的引用来源信息，例如 ['main'] 为查看主包资源的引用来源信息，默认为 []")])])]),t._v(" "),e("p",[t._v("配置使用示例：")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("{\n  // 本地可视化服务相关配置\n  server: {\n    enable: true, // 是否启动本地服务，非必填，默认 true\n    autoOpenBrowser: true, // 是否自动打开可视化平台页面，非必填，默认 true\n    port: 0, // 本地服务端口，非必填，默认 0(随机端口)\n    host: '127.0.0.1', // 本地服务host，非必填\n  },\n  // 体积报告生成后输出的文件地址名，路径相对为 dist/wx 或者 dist/ali\n  filename: '../report.json',\n  // 配置阈值，此处代表总包体积阈值为 16MB，分包体积阈值为 2MB，超出将会触发编译报错提醒，该报错不阻断构建\n  threshold: {\n    size: '16MB',\n    packages: '2MB'\n  },\n  // 配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息\n  groups: [\n    {\n      // 分组名称\n      name: 'vant',\n      // 配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry，如下所示的分组配置将计算项目中引入的 vant 组件带来的体积占用\n      entryRules: {\n        include: '@vant/weapp'\n      }\n    },\n    {\n      name: 'pageGroup',\n      // 每个分组中可分别配置阈值，如果不配置则表示\n      threshold: '500KB',\n      entryRules: {\n        include: ['src/pages/index', 'src/pages/user']\n      }\n    },\n    {\n      name: 'someSdk',\n      entryRules: {\n        include: ['@somegroup/someSdk/index', '@somegroup/someSdk2/index']\n      },\n      // 有的时候你可能希望计算纯 js 入口引入的体积（不包含组件和页面），这种情况下需要使用 noEntryRules\n      noEntryRules: {\n        include: 'src/lib/sdk.js'\n      }\n    }\n  ],\n  // 是否收集页面维度体积详情，默认 false\n  reportPages: true,\n  // 是否收集资源维度体积详情，默认 false\n  reportAssets: true,\n  // 是否收集冗余资源，默认 false\n  reportRedundance: true,\n  // 展示某些分包资源的引用来源信息，默认为 []\n  showEntrysPackages: ['main']\n}\n")])])]),e("h2",{attrs:{id:"i18n"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#i18n"}},[t._v("#")]),t._v(" i18n")]),t._v(" "),e("h3",{attrs:{id:"usei18n"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#usei18n"}},[t._v("#")]),t._v(" useI18n")]),t._v(" "),e("p",[t._v("组合式 API 中使用，用来获取 i18n 实例。")]),t._v(" "),e("p",[e("strong",[t._v("参数选项")])]),t._v(" "),e("hr"),t._v(" "),e("h4",{attrs:{id:"locale"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#locale"}},[t._v("#")]),t._v(" locale")]),t._v(" "),e("p",[e("code",[t._v("Locale")])]),t._v(" "),e("p",[t._v("设置语言环境")]),t._v(" "),e("p",[e("strong",[t._v("注意：")]),t._v(" 只传 locale，不传 messages 属性时不起作用")]),t._v(" "),e("h4",{attrs:{id:"fallbacklocale"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fallbacklocale"}},[t._v("#")]),t._v(" fallbackLocale")]),t._v(" "),e("p",[e("code",[t._v("Locale")])]),t._v(" "),e("p",[t._v("预设的语言环境，找不到语言环境时进行回退。")]),t._v(" "),e("h4",{attrs:{id:"messages"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#messages"}},[t._v("#")]),t._v(" messages")]),t._v(" "),e("p",[e("code",[t._v("LocaleMessages")])]),t._v(" "),e("p",[t._v("本地化的语言环境信息。")]),t._v(" "),e("p",[e("strong",[t._v("返回实例属性和方法")])]),t._v(" "),e("hr"),t._v(" "),e("h4",{attrs:{id:"locale-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#locale-2"}},[t._v("#")]),t._v(" locale")]),t._v(" "),e("p",[e("code",[t._v("WritableComputedRef<Locale>")])]),t._v(" "),e("p",[t._v("可响应性的 ref 对象，表示当前 i18n 实例所使用的 locale。")]),t._v(" "),e("p",[t._v("修改 ref 值会对局部或者全局语言集的 locale 进行更改，并触发翻译方法重新执行。")]),t._v(" "),e("h4",{attrs:{id:"fallbackroot"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#fallbackroot"}},[t._v("#")]),t._v(" fallbackRoot")]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("本地化失败时是否回归到全局作用域。")]),t._v(" "),e("h4",{attrs:{id:"getlocalemessage-locale"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getlocalemessage-locale"}},[t._v("#")]),t._v(" getLocaleMessage( locale )")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getLocaleMessage")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("locale"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" LocaleMessageObject\n")])])]),e("p",[t._v("获取语言环境的 "),e("code",[t._v("locale")]),t._v(" 信息。")]),t._v(" "),e("h4",{attrs:{id:"setlocalemessage-locale-message"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setlocalemessage-locale-message"}},[t._v("#")]),t._v(" setLocaleMessage( locale, message )")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("setLocaleMessage")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("locale"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Locale"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" messages"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" LocaleMessageObject"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),e("p",[t._v("设置语言环境的 "),e("code",[t._v("locale")]),t._v(" 信息。")]),t._v(" "),e("h4",{attrs:{id:"mergelocalemessage-locale-message"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mergelocalemessage-locale-message"}},[t._v("#")]),t._v(" mergeLocaleMessage( locale, message )")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("mergeLocaleMessage")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("locale"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Locale"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" messages"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" LocaleMessageObject"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),e("p",[t._v("将语言环境信息 "),e("code",[t._v("locale")]),t._v(" 合并到已注册的语言环境信息中。")]),t._v(" "),e("h4",{attrs:{id:"messages-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#messages-2"}},[t._v("#")]),t._v(" messages")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("readonly")]),t._v(" messages"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ComputedRef"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" Messages"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Messages"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("ul",[e("li",[e("strong",[t._v("只读")])])]),t._v(" "),e("p",[t._v("局部或者全局的语言环境信息。")]),t._v(" "),e("h4",{attrs:{id:"isglobal"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#isglobal"}},[t._v("#")]),t._v(" isGlobal")]),t._v(" "),e("p",[e("code",[t._v("boolean")])]),t._v(" "),e("p",[t._v("是否是全局 i18n 实例。")]),t._v(" "),e("h4",{attrs:{id:"t"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#t"}},[t._v("#")]),t._v(" t")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" choice"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" values"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" TranslateResult\n")])])]),e("p",[t._v("文案翻译函数")]),t._v(" "),e("p",[t._v("根据传入的 key 以及当前 locale 环境获取对应文案，文案来源是全局作用域还是本地作用域取决于 "),e("code",[t._v("useI18n")]),t._v(" 执行时是否传入对应的 "),e("code",[t._v("messages、locale")]),t._v(" 等值。")]),t._v(" "),e("p",[e("strong",[t._v("choice 参数可选")]),t._v(" ，当传入 choice 时，t 函数的表现为使用复数进行翻译，和老版本中的 tc 函数表现一致。")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('car', 1)}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('car', 2)}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('apple', 0)}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('apple', 1)}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('apple', 10, {count: 10})}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 语言环境信息如下：")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("car")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'car | cars'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("apple")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'no apples | one apple | {count} apples'")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("输入如下：")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("car"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("cars"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("no apples"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("one apple"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("10 apples"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("关于复数的更多信息可以点击"),e("a",{attrs:{href:"https://kazupon.github.io/vue-i18n/zh/guide/pluralization.html#%E5%A4%8D%E6%95%B0",target:"_blank",rel:"noopener noreferrer"}},[t._v("查看"),e("OutboundLink")],1)]),t._v(" "),e("p",[e("strong",[t._v("values 参数可选")]),t._v(" ，如果需要对文案信息即逆行格式化处理，则需要传入 values。")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  // 模版输出 hello world\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('message.hello', { msg: 'hello'})}}"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}},[e("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/core"')]),t._v("\n\n  "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} world'")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  \n  "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" en\n          "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("h4",{attrs:{id:"te"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#te"}},[t._v("#")]),t._v(" te")]),t._v(" "),e("div",{staticClass:"language-ts extra-class"},[e("pre",{pre:!0,attrs:{class:"language-ts"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("te")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v("\n")])])]),e("p",[t._v("检查 key 是否存在。")])])}),[],!1,null,null,null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/42.53972f6c.js b/docs-vuepress/.vuepress/dist/assets/js/42.53972f6c.js
deleted file mode 100644
index a49607cd4a..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/42.53972f6c.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{390:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"全局-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#全局-api"}},[t._v("#")]),t._v(" 全局 API")]),t._v(" "),s("h2",{attrs:{id:"global-mpx"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#global-mpx"}},[t._v("#")]),t._v(" 全局对象 Mpx ")]),t._v(" "),s("p",[s("code",[t._v("@mpxjs/core")]),t._v(" 默认导出 mpx 全局实例对象，通过该实例对象我们可以访问部分应用实例 API")]),t._v(" "),s("h3",{attrs:{id:"mixin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mixin"}},[t._v("#")]),t._v(" mixin")]),t._v(" "),s("p",[t._v("全局注入mixin方法接收两个参数：mpx.mixin(mixins, options)")]),t._v(" "),s("ul",[s("li",[t._v("第一个参数是要混入的mixins，接收类型 "),s("code",[t._v("MixinObject|MixinObject[]")])]),t._v(" "),s("li",[t._v("第二个参数是为全局混入配置，形如"),s("code",[t._v("{types:string|string[], stage:number}")]),t._v("，其中"),s("code",[t._v("types")]),t._v("用于控制mixin注入的范围，可选值有"),s("code",[t._v("'app'|'page'|'component'")]),t._v("；"),s("code",[t._v("stage")]),t._v("用于控制注入mixin的插入顺序，当stage为负数时，注入的mixin会被插入到构造函数配置中的"),s("code",[t._v("options.mixins")]),t._v("之前，数值越小约靠前，反之当stage为正数时，注入的mixin会被插入到"),s("code",[t._v("options.mixins")]),t._v("之后，数值越大越靠后。")])]),t._v(" "),s("blockquote",[s("p",[t._v("所有mixin中生命周期的执行均先于构造函数配置中直接声明的生命周期，mixin之间的执行顺序则遵从于其在"),s("code",[t._v("options.mixins")]),t._v("数组中的顺序")])]),t._v(" "),s("blockquote",[s("p",[t._v("options的默认值为"),s("code",[t._v("{types: ['app','page','component'], stage: -1}")]),t._v("，不传stage时，全局注入mixin的声明周期默认在"),s("code",[t._v("options.mixins")]),t._v("之前执行")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 只在page中混入")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("types")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'page'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认混入，在app|page|component中都会混入")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("setData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 只在component中混入，且执行顺序在options.mixins之后")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'com attached'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("types")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'component'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("stage")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"injectmixins"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#injectmixins"}},[t._v("#")]),t._v(" injectMixins")]),t._v(" "),s("p",[t._v("该方法是 "),s("code",[t._v("mpx.mixin")]),t._v(" 方法的别名，"),s("code",[t._v("mpx.injectMixins({})")]),t._v(" 等同于 "),s("code",[t._v("mpx.mixin({})")])]),t._v(" "),s("h3",{attrs:{id:"observable"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#observable"}},[t._v("#")]),t._v(" observable")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("observable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Mpx\n")])])]),s("p",[t._v("用于创建响应式数据。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接通过 mpx 对象访问")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" b "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("observable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[s("strong",[t._v("注意：")]),t._v("\nMpx 2.8 版本后该 API 等同于 "),s("code",[t._v("reactive")]),t._v("，同时不再支持具名导出方式，建议直接使用 "),s("code",[t._v("reactive")]),t._v(" 替代，请"),s("RouterLink",{attrs:{to:"/api/reactivity-api/basic-reactivity.html#reactive"}},[t._v("点击")]),t._v("查看。")],1)]),t._v(" "),s("h3",{attrs:{id:"set"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#set"}},[t._v("#")]),t._v(" set")]),t._v(" "),s("p",[t._v("用于对一个响应式对象新增属性，会"),s("code",[t._v("触发订阅者更新操作")]),t._v("。"),s("RouterLink",{attrs:{to:"/api/global-api.html#set"}},[t._v("查看详情")])],1),t._v(" "),s("h3",{attrs:{id:"delete"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#delete"}},[t._v("#")]),t._v(" delete")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("delete")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("用于对一个响应式对象删除属性，会"),s("code",[t._v("触发订阅者更新操作")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" person "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delete")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("person"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'age'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[s("strong",[t._v("注意：")]),t._v(" "),s("code",[t._v("mpx.delete")]),t._v(" 也可以使用具名导出的 "),s("code",[t._v("del")]),t._v("。"),s("RouterLink",{attrs:{to:"/api/global-api.html#del"}},[t._v("查看详情")])],1)]),t._v(" "),s("h3",{attrs:{id:"use"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#use"}},[t._v("#")]),t._v(" use")]),t._v(" "),s("blockquote",[s("p",[t._v("用于安装外部扩展, 支持多参数\n方法接收两个参数：mpx.use(plugin, options)")])]),t._v(" "),s("ul",[s("li",[t._v("第一个参数是要安装的外部扩展")]),t._v(" "),s("li",[t._v("第二个参数是对象，如果第二个参数是一个包含（prefix or postfix）的option， 那么将会对插件扩展的属性添加前缀或后缀")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" test "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./test'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("test"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("test"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("prefix")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'otherparams'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"watch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watch"}},[t._v("#")]),t._v(" watch")]),t._v(" "),s("p",[t._v("watch 可以通过全局实例访问，也可以使用具名导出的方式，二者逻辑相同，我们推荐使用具名导出的方式。"),s("RouterLink",{attrs:{to:"/api/reactivity-api/computed-watch-api.html#watch"}},[t._v("查看详情")])],1),t._v(" "),s("h2",{attrs:{id:"createapp"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createapp"}},[t._v("#")]),t._v(" createApp")]),t._v(" "),s("blockquote",[s("p",[t._v("注册一个小程序，接受一个 Object 类型的参数")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createApp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLaunch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Launch'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShow")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Page show'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//全局变量 可通过getApp()访问")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("globalDataA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'I am global dataA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("globalDataB")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'I am global dataB'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"createpage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createpage"}},[t._v("#")]),t._v(" createPage")]),t._v(" "),s("blockquote",[s("p",[t._v("类微信小程序（微信、百度、头条等）内部使用"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Component的方式创建页面"),s("OutboundLink")],1),t._v("，所以除了支持页面的生命周期之外还同时支持组件的一切特性。当使用 Component 创建页面时，页面生命周期需要写在 methods 内部（微信小程序原生规则），mpx 进行了统一封装转换，页面生命周期都写在最外层即可")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("ul",[s("li",[s("p",[t._v("options:")]),t._v(" "),s("p",[t._v("具体形式除了 computed、watch 这类 Mpx 扩展特性之外，其他的属性都参照原生小程序的官方文档即可。")])]),t._v(" "),s("li",[s("p",[t._v("config:")]),t._v(" "),s("p",[t._v("如果希望标识一个组件是最纯粹的原生组件，不用数据响应等能力，可通过 config.isNative 传 true 声明。\n如果有需要复写/改写最终调用的创建页面的构造器，可以通过 config 对象的 customCtor 提供。")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("注意:")]),t._v("\nmpx本身是用 component 来创建页面的，如果传page可能在初始化时候生命周期不正常导致取props有一点问题")])])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createPage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("test "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShow")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("test"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"createcomponent"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createcomponent"}},[t._v("#")]),t._v(" createComponent")]),t._v(" "),s("blockquote",[s("p",[t._v("创建自定义组件，接受两个Object类型的参数。")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("prop")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Number"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("test "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prop\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("prop")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handler")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" old"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否首次执行一次")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"nexttick"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#nexttick"}},[t._v("#")]),t._v(" nextTick")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("当我们在 Mpx 中更改响应性状态时，最终页面的更新并不是同步立即生效的，而是由 Mpx 将它们缓存在一个队列中， 等到下一个 tick 一起执行，\n从而保证了组件/页面无论发生多少状态改变，都仅执行一次更新，从而减少 "),s("code",[t._v("setData")]),t._v(" 调用次数。")]),t._v(" "),s("p",[s("code",[t._v("nextTick()")]),t._v(" 可以在状态改变后立即调用，可以传递一个函数作为参数，在等待页面/组件更新完成后，函数参数会触发执行。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("     "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" nextTick"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n     "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n       "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" showChild "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// DOM 还没有更新")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeOut")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            showChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n           context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'child'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("showToast")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n           showChild\n         "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n       "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n     "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"topureobject"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#topureobject"}},[t._v("#")]),t._v(" toPureObject")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toPureObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object\n")])])]),s("p",[t._v("业务拿到的数据可能是响应式数据实例（包含了些其他属性），使用"),s("code",[t._v("toPureObject")]),t._v("方法可以将响应式的数据转化成纯 js 对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("toPureObject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pureObject "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toPureObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"getmixin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getmixin"}},[t._v("#")]),t._v(" getMixin")]),t._v(" "),s("p",[t._v("专为ts项目提供的反向推导辅助方法，该函数接收类型为 "),s("code",[t._v("Object")]),t._v(" ,会将传入的嵌套mixins对象拉平成一个扁平的mixin对象")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getMixin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" mixin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mixins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value1")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("lifetimes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'attached'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mixins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("6")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("outsideVal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\nmixin值\n{\n  data: {value2: 6, value1: 2},\n  created: ƒ created(),\n  attached: ƒ attached()\n}\n*/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("outsideVal")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("20")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mixins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mixin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('/*\n以上执行输出：\n28\n2 "attached"\n*/')]),t._v("\n")])])]),s("h2",{attrs:{id:"implement"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#implement"}},[t._v("#")]),t._v(" implement")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("implement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" object\n")])])]),s("ul",[s("li",[s("code",[t._v("{Object} options")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("{Array} modes")]),t._v("：需要取消的平台")]),t._v(" "),s("li",[s("code",[t._v("{Boolean} remove")]),t._v("：是否将此能力直接移除")]),t._v(" "),s("li",[s("code",[t._v("{Function} processor")]),t._v("：设置成功的回调函数")])])])]),t._v(" "),s("p",[t._v("以微信为 base 将代码转换输出到其他平台时（如支付宝、web 平台等），会存在一些无法进行模拟的跨平台差异，会在运行时进行检测并报错指出，例如微信转支付宝时使用 moved 生命周期等。使用"),s("code",[t._v("implement")]),t._v("方法可以取消这种报错。您可以使用 mixin 自行实现跨平台差异，然后使用 implement 取消报错。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("implement"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__mpx_mode__ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'web'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("processor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("implement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'onShareAppMessage'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'web'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 需要取消的平台，可配置多个")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("remove")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否将此能力直接移除")]),t._v("\n    processor "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置成功的回调函数")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"built-in-lifecycle-variable"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#built-in-lifecycle-variable"}},[t._v("#")]),t._v(" 内建生命周期变量 ")]),t._v(" "),s("p",[t._v("Mpx 在运行时自身有着一套内建生命周期，当开发者想使用内建生命周期时，可以通过内建生命周期变量进行对应生命周期的注册，\n需要注意的是，这部分内建生命周期变量"),s("strong",[t._v("只能用于选项式 API 中")]),t._v("。")]),t._v(" "),s("h3",{attrs:{id:"beforecreate"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#beforecreate"}},[t._v("#")]),t._v(" BEFORECREATE")]),t._v(" "),s("p",[s("code",[t._v("string")])]),t._v(" "),s("p",[t._v("在组件实例刚刚被创建时执行，在实例初始化之后、进行数据侦听和 data 初始化之前同步调用，注意此时不能调用 setData。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("BEFORECREATE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/core"')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("BEFORECREATE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'beforecreate trigger'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"created"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#created"}},[t._v("#")]),t._v(" CREATED")]),t._v(" "),s("p",[s("code",[t._v("string")])]),t._v(" "),s("p",[t._v("在组件实例刚刚被创建时执行。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、事件/侦听器的回调函数。\n然而，挂载阶段还没开始，注意此时不能调用 setData。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("CREATED")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/core"')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("CREATED")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'beforecreate trigger'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"beforemount"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#beforemount"}},[t._v("#")]),t._v(" BEFOREMOUNT")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onbeforemount"}},[t._v("onBeforeMount")])],1),t._v(" "),s("h3",{attrs:{id:"mounted"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mounted"}},[t._v("#")]),t._v(" MOUNTED")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onmounted"}},[t._v("onMounted")])],1),t._v(" "),s("h3",{attrs:{id:"beforeupdate"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#beforeupdate"}},[t._v("#")]),t._v(" BEFOREUPDATE")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onbeforeupdate"}},[t._v("onBeforeUpdate")])],1),t._v(" "),s("h3",{attrs:{id:"updated"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#updated"}},[t._v("#")]),t._v(" UPDATED")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onupdated"}},[t._v("onUpdated")])],1),t._v(" "),s("h3",{attrs:{id:"serverprefetch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#serverprefetch"}},[t._v("#")]),t._v(" SERVERPREFETCH")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onServerPrefetch"}},[t._v("onServerPrefetch")])],1),t._v(" "),s("h3",{attrs:{id:"beforeunmount"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#beforeunmount"}},[t._v("#")]),t._v(" BEFOREUNMOUNT")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onbeforeunmount"}},[t._v("onBeforeUnmount")])],1),t._v(" "),s("h3",{attrs:{id:"unmounted"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#unmounted"}},[t._v("#")]),t._v(" UNMOUNTED")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onunmounted"}},[t._v("onUnmounted")])],1),t._v(" "),s("h3",{attrs:{id:"onload"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onload"}},[t._v("#")]),t._v(" ONLOAD")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onload"}},[t._v("onLoad")])],1),t._v(" "),s("h3",{attrs:{id:"onshow"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onshow"}},[t._v("#")]),t._v(" ONSHOW")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onshow"}},[t._v("onShow")])],1),t._v(" "),s("h3",{attrs:{id:"onhide"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onhide"}},[t._v("#")]),t._v(" ONHIDE")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onhide"}},[t._v("onHide")])],1),t._v(" "),s("h3",{attrs:{id:"onresize"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onresize"}},[t._v("#")]),t._v(" ONRESIZE")]),t._v(" "),s("p",[t._v("选项式 API 中使用，作用同"),s("RouterLink",{attrs:{to:"/api/composition-api.html#onresize"}},[t._v("onResize")])],1),t._v(" "),s("h2",{attrs:{id:"响应式-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api"}},[t._v("#")]),t._v(" 响应式 API")]),t._v(" "),s("p",[t._v("详情请"),s("RouterLink",{attrs:{to:"/api/reactivity-api/basic-reactivity.html"}},[t._v("移步")])],1),t._v(" "),s("h2",{attrs:{id:"组合式-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api"}},[t._v("#")]),t._v(" 组合式 API")]),t._v(" "),s("p",[t._v("详情请"),s("RouterLink",{attrs:{to:"/api/composition-api.html"}},[t._v("移步")])],1),t._v(" "),s("h2",{attrs:{id:"store-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store-api"}},[t._v("#")]),t._v(" store API")]),t._v(" "),s("p",[t._v("详情请"),s("RouterLink",{attrs:{to:"/api/store-api.html"}},[t._v("移步")])],1)])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/43.e2b432ea.js b/docs-vuepress/.vuepress/dist/assets/js/43.e2b432ea.js
deleted file mode 100644
index a7b839c8b9..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/43.e2b432ea.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{391:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"实例-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#实例-api"}},[t._v("#")]),t._v(" 实例 API")]),t._v(" "),s("h2",{attrs:{id:"set"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#set"}},[t._v("#")]),t._v(" $set")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" property"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("这是全局 "),s("code",[t._v("mpx.set")]),t._v(" 的别名。向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。\n它必须用于向响应式对象上添加新 property，因为 Mpx 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("参考")]),t._v("："),s("RouterLink",{attrs:{to:"/api/global-api.html#set"}},[t._v("mpx.set")])],1)]),t._v(" "),s("h2",{attrs:{id:"watch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watch"}},[t._v("#")]),t._v(" $watch")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("expOrFn"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),t._v("\n")])])]),s("p",[t._v("观察 Mpx 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 键路径")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.b.c'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newVal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldVal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 做点什么")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 函数")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 表达式 `this.a + this.b` 每次得出一个不同的结果时")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理函数都会被调用。")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这就像监听一个未被定义的计算属性")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newVal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldVal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 做点什么")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("code",[t._v("this.$watch")]),t._v(" 返回一个取消观察函数，用来停止触发回调：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" unwatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cb"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 之后取消观察")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("options.deep")])])]),t._v(" "),s("p",[t._v("为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someObject'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("deep")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("someObject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nestedValue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("123")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// callback is fired")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("options.deep")])])]),t._v(" "),s("p",[t._v("在选项参数中指定 "),s("code",[t._v("immediate: true")]),t._v(" 将立即以表达式的当前值触发回调：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 立即以 `a` 的当前值触发回调")]),t._v("\n")])])]),s("p",[t._v("注意在带有 immediate 选项时，你不能在第一次回调时取消侦听给定的 property。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这会导致报错")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" unwatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSomething")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" unwatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSomething")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("unwatch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("options.pausable")])])]),t._v(" "),s("p",[t._v("可在选项参数中指定 pausable: true 来声明一个可被暂停的 Watcher 实例，配置好之后可以通过 this.$getPausableWatchers() 来获取当前组件或者页面下定义的所有可被暂停的 Watcher 实例，\n然后根据具体是业务场景通过 watcher.pause() 或者 watcher.resume() 来暂停或者恢复 watch 的监听。\n比如说在小程序页面 hide 时不需要监听的 watch 可以配置为 pausable: true，在页面 hide 时调用 watcher.pause() 暂停监听，在页面 show 时调用 watcher.resume() 来恢复监听。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someObject'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pausable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" isHide "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" watchers "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$getPausableWatchers")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("watchers "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" watchers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" watchers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" watcher "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" watchers"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    isHide "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pause")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("isHide "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resume")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("options.name")])])]),t._v(" "),s("p",[t._v("为了方便获取用户定义的 Watcher 实例，可在选项参数增加配置 name 来设置当前 Watcher 实例的名称，配置 name 后可通过 this.$getWatcherByName(name) 在组件或页面中获取到命名为 name 的 Watcher 实例（注意当存在多个 name 相同 watch 时，this.$getWatcherByName 获取的最后一个使用该 name\n创建的 Watcher 实例，所以为了避免混淆，请不要在多个 watch 中配置同一个 name。）")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someObject'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someObject'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" someObjectWatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$getWatcherByName")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someObject'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("参考")]),t._v("："),s("RouterLink",{attrs:{to:"/api/global-api.html#watch"}},[t._v("mpx.watch")])],1),t._v(" "),s("h2",{attrs:{id:"delete"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#delete"}},[t._v("#")]),t._v(" $delete")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" $"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("delete")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("删除对象属性，如果该对象是响应式的，那么该方法可以触发观察器更新（视图更新 | watch回调）")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("info")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'info'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当删除属性之后会执行")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 删除name属性")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("delete")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("参考：")]),t._v(" "),s("RouterLink",{attrs:{to:"/api/global-api.html#delete"}},[t._v("Mpx.delete")])],1),t._v(" "),s("h2",{attrs:{id:"refs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#refs"}},[t._v("#")]),t._v(" $refs")]),t._v(" "),s("p",[s("code",[t._v("Object")])]),t._v(" "),s("p",[t._v("一个对象，持有注册过 "),s("RouterLink",{attrs:{to:"/api/directives.html#wx-ref"}},[t._v("ref")]),t._v("的所有 DOM 元素和组件实例，调用响应的组件方法或者获取视图节点信息。")],1),t._v(" "),s("p",[t._v("以获取组件为例，模版中引用child子组件")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("child")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("childDom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("child")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("javascript 中可以调用组件的方法")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用child中的方法")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("childDom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("childMethods")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取child中的data")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("childDom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("参考：")]),t._v(" "),s("RouterLink",{attrs:{to:"/guide/basic/refs.html"}},[t._v("组件 ref")])],1),t._v(" "),s("h2",{attrs:{id:"asyncrefs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#asyncrefs"}},[t._v("#")]),t._v(" $asyncRefs")]),t._v(" "),s("p",[s("strong",[t._v("仅字节小程序可用")]),t._v("，因为字节小程序 "),s("code",[t._v("selectComponent")]),t._v(" 和 "),s("code",[t._v("selectAllComponents")]),t._v(" 方法为异步方法，因此使用 $refs 同步获取组件实例并不保证能够拿到正确的组件实例，需使用异步 "),s("code",[t._v("$asyncRefs")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__mpx_mode__ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tt'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$asyncRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mlist"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//......")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"forceupdate"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#forceupdate"}},[t._v("#")]),t._v(" $forceUpdate")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$forceUpdate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("用于强制刷新视图，正常情况下只有"),s("code",[t._v("发生了变化的数据")]),t._v("才会被发送到视图层进行渲染。强制更新时，会将某些数据强制发送到视图层渲染，无论是否发生了变化")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("info")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 虽然不会修改age的值，但仍会触发重新渲染，并且会将age发送到视图层")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$forceUpdate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'视图更新后执行'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可用于正常的数据修改，key支持Path，数组可以使用'array[index]'：value的形式")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$forceUpdate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'info.name'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'b'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'视图更新后执行'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"nexttick"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#nexttick"}},[t._v("#")]),t._v(" $nextTick")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。"),s("strong",[t._v("注意："),s("code",[t._v("callback")]),t._v("中"),s("code",[t._v("this")]),t._v("并不是绑定当前实例，你可以使用箭头函数避免this指向问题")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("info")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 修改数据")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// DOM 还没有更新")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this.$nextTick(function() {")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   // DOM 现在更新了")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   console.log('会在由name变化引起的视图更新之后执行')")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//   this.doSomthing() // 报错")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// })")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// DOM 现在更新了")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'会在由name变化引起的视图更新之后执行'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSomthing")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"i18n"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#i18n"}},[t._v("#")]),t._v(" $i18n")]),t._v(" "),s("p",[t._v("组件中直接调用$i18n的方法，比如：$t，$tc，$te，$d，$n")]),t._v(" "),s("p",[t._v("首先在"),s("code",[t._v("mpx.plugin.conf.js")]),t._v("中配置i18n")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//...")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// messages既可以通过对象字面量传入，也可以通过messagesPath指定一个js模块路径，在该模块中定义配置并导出，dateTimeFormats/dateTimeFormatsPath和numberFormats/numberFormatsPath同理")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} world'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'zh-CN'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} 世界'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("组件中直接使用")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("template"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message.hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("view"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("template"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message.hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("msg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$te")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message.hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"rawoptions"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#rawoptions"}},[t._v("#")]),t._v(" $rawOptions")]),t._v(" "),s("p",[s("code",[t._v("Object")])]),t._v(" "),s("p",[t._v("获取组件或页面构造器的构造参数。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/core"')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$rawOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n     * attached\n     * detached\n     * methods\n     * mpxConvertMode\n     * mpxCustomKeysForBlend\n     * mpxFileResource\n     * ready\n     * setup\n     * ...其他构造参数\n     */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/44.e4242a1f.js b/docs-vuepress/.vuepress/dist/assets/js/44.e4242a1f.js
deleted file mode 100644
index 530e2a4eb6..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/44.e4242a1f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{392:function(t,r,a){"use strict";a.r(r);var s=a(4),e=Object(s.a)({},(function(){var t=this,r=t._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"选项式-api"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#选项式-api"}},[t._v("#")]),t._v(" 选项式 API")]),t._v(" "),r("h3",{attrs:{id:"onappinit"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#onappinit"}},[t._v("#")]),t._v(" onAppInit")]),t._v(" "),r("ul",[r("li",[r("strong",[t._v("类型：")]),t._v(" "),r("code",[t._v("Function")])]),t._v(" "),r("li",[r("strong",[t._v("详细：")])])]),t._v(" "),r("p",[t._v("通过 createApp 注册一个应用期间被调用，输出 web 时 SSR渲染模式下，需要在此钩子中生成 pinia 的实例并返回。")]),t._v(" "),r("h3",{attrs:{id:"onssrappcreated"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#onssrappcreated"}},[t._v("#")]),t._v(" onSSRAppCreated")]),t._v(" "),r("ul",[r("li",[r("strong",[t._v("类型：")]),t._v(" "),r("code",[t._v("Function")])]),t._v(" "),r("li",[r("strong",[t._v("详细：")])])]),t._v(" "),r("p",[t._v("SSR渲染定制钩子，在服务端渲染期间被调用，可以在这个钩子中可以去返回应用程序实例，以及完成服务器端路由匹配，store 的状态挂载等。类 Vue 的 server entry 中的功能。")]),t._v(" "),r("p",[r("strong",[t._v("注意：")]),t._v(" 仅 web 环境支持")])])}),[],!1,null,null,null);r.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/45.392413aa.js b/docs-vuepress/.vuepress/dist/assets/js/45.392413aa.js
deleted file mode 100644
index c156d3829d..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/45.392413aa.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{394:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"响应式-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api"}},[t._v("#")]),t._v(" 响应式 API")]),t._v(" "),s("h2",{attrs:{id:"响应式基础-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式基础-api"}},[t._v("#")]),t._v(" 响应式基础 API")]),t._v(" "),s("h3",{attrs:{id:"reactive"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#reactive"}},[t._v("#")]),t._v(" reactive")]),t._v(" "),s("p",[t._v("将对象处理为响应性对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nobj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n")])])]),s("p",[t._v("响应式转换是“深层”的：它会影响到所有嵌套的 property。一个响应式对象也将深层地解包任何 ref property，同时保持响应性。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ref 会被解包")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// true")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 它会更新 `obj.count`")]),t._v("\ncount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\n")])])]),s("p",[t._v("当将 "),s("code",[t._v("ref")]),t._v(" 分配给 "),s("code",[t._v("reactive")]),t._v(" property 时，ref 将被自动解包。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nobj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" count\n\n"),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("console")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// true")]),t._v("\n")])])]),s("p",[t._v("当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" refArr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    refArr\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 无需.vlaue")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("refArr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里需要.value")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("refArr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("当需要给响应式对象新增属性时，需要使用set，并且新增属性的响应式对象需要为 ref 或者做为其他响应性对象的key")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stateRef "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stateRefWrap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLoad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不生效")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("stateRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 生效")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("stateRefWrap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 生效")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    stateRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    stateRefWrap\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"isreactive"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#isreactive"}},[t._v("#")]),t._v(" isReactive")]),t._v(" "),s("p",[t._v("检查对象是否是由 reactive 创建的响应式对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" isReactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isReactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> true")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            state\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"markraw"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#markraw"}},[t._v("#")]),t._v(" markRaw")]),t._v(" "),s("p",[t._v("标记一个对象，使其永远不会被抓换为响应性对象，并返回对象本身")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" markRaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" isReactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("markRaw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    foo\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isReactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("foo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> false")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")])]),t._v(" "),s("p",[t._v("如果将标记对象内部的未标记对象添加进响应性对象，然后再次访问该响应性对象，就会得到该原始对象的可响应性对象")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" markRaw"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" isReactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("markRaw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nested")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" bar "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nested")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" foo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nested\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("foo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nested "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" bar"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nested"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> true")]),t._v("\n")])])]),s("h3",{attrs:{id:"shallowreactive"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#shallowreactive"}},[t._v("#")]),t._v(" shallowReactive")]),t._v(" "),s("p",[t._v("reactive() 的浅层作用形式，只跟踪自身 property 的响应性，但不执行嵌套对象的深层响应式转换(返回原始值)")]),t._v(" "),s("p",[s("strong",[t._v("注意：")])]),t._v(" "),s("p",[t._v("和 reactive() 不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的 property 是响应式的。property 的值会被原样存储和暴露，这也意味着值为 ref 的 property 不会被自动解包了。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" shallowReactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shallowReactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("foo")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nested")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("bar")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("head")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" count  \n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更改状态自身的属性是响应式的")]),t._v("\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("foo"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...但下层嵌套对象不会被转为响应式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isReactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nested"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// false")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不是响应式的")]),t._v("\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nested"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bar"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ref 属性不会解包")]),t._v("\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("head"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value \n")])])]),s("h3",{attrs:{id:"set"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#set"}},[t._v("#")]),t._v(" set")]),t._v(" "),s("p",[t._v("用于对一个响应式对象新增属性，会"),s("code",[t._v("触发订阅者更新操作")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" property"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" set"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" person "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 具名导出使用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("person"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'age'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("17")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// age 改变后会触发订阅者视图更新")]),t._v("\n")])])]),s("h3",{attrs:{id:"del"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#del"}},[t._v("#")]),t._v(" del")]),t._v(" "),s("p",[t._v("用于对一个响应式对象删除属性，会"),s("code",[t._v("触发订阅者更新操作")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("del")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" property"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("del"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" person "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("del")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("person"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'age'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"computed-与-watch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#computed-与-watch"}},[t._v("#")]),t._v(" Computed 与 Watch")]),t._v(" "),s("h3",{attrs:{id:"computed"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#computed"}},[t._v("#")]),t._v(" computed")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 只读形式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getter")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Readonly"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Ref"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Readonly"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>>")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可写形式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Ref"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" plusOne "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("plusOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\n\nplusOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 错误")]),t._v("\n")])])]),s("p",[t._v("或者接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" plusOne "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" val "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nplusOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0")]),t._v("\n")])])]),s("h3",{attrs:{id:"watcheffect"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watcheffect"}},[t._v("#")]),t._v(" watchEffect")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("effect")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("onInvalidate"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" InvalidateCbRegistrator"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" WatchEffectOptions\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" StopHandle\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WatchEffectOptions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    flush"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pre'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'post'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sync'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认：'pre'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InvalidateCbRegistrator")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("invalidate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StopHandle")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("立即执行传入的函数，同时对其依赖进行响应式追踪，并在其依赖变更时重新运行该函数。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> logs 0")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> logs 1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[t._v("停止侦听")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// later")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[t._v("清除副作用")])]),t._v(" "),s("p",[t._v("侦听副作用传入的函数可以接收一个函数作入参，用来注册清理回调，清理回调会在该副作用下一次执行前被调用，\n可以用来清理无效的副作用，例如等待中的异步请求")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("onCleanup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" response"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cancel "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doAsyncWork")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// `cancel` 会在 `id` 更改时调用")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 以便取消之前未完成的请求")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onCleanup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cancel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" response\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[t._v("副作用刷新时机")])]),t._v(" "),s("p",[t._v("响应式系统会进行副作用函数缓存，并异步地刷新执行他们")]),t._v(" "),s("p",[t._v("组件的 update 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时，默认情况下，会在所有的组件 update 前执行，\n在watchEffect的第二个参数中，我们可以传入flush来进行副作用刷新时机调整")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认为 pre")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("flush")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pre'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 侦听器回调中能访问被更新之后的DOM")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注意：这也将推迟副作用的初始运行，直到组件的首次渲染完成。")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("flush")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'post'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 强制同步触发, 十分低效")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("flush")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sync'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"watchsynceffect"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watchsynceffect"}},[t._v("#")]),t._v(" watchSyncEffect")]),t._v(" "),s("p",[t._v("watchEffect 的别名，带有 flush: 'sync' 选项。")]),t._v(" "),s("h3",{attrs:{id:"watchposteffect"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watchposteffect"}},[t._v("#")]),t._v(" watchPostEffect")]),t._v(" "),s("p",[t._v("watchEffect 的别名，带有 flush: 'post' 选项。")]),t._v(" "),s("h3",{attrs:{id:"watch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watch"}},[t._v("#")]),t._v(" watch")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 侦听单一源")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    source"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" WatcherSource"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        oldValue"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        onInvalidate"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" InvalidateCbRegistrator\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" WatchOptions\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" StopHandle\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 侦听多个源")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WatcherSource"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Ref"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("InvalidateCbRegistrator")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("invalidate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StopHandle")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WatchOptions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("WatchEffectOptions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    immediate"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认：false")]),t._v("\n    deep"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认：false")]),t._v("\n    immediateAsync"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认：false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("该 API 与选项式 API 中的 watch 基本等效，watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下\n是惰性的——即回调仅在侦听源发生变化时被调用。")]),t._v(" "),s("p",[t._v("与 watchEffect 比较，watch 允许我们：")]),t._v(" "),s("ul",[s("li",[t._v("懒执行副作用；")]),t._v(" "),s("li",[t._v("更具体地说明什么状态应该触发侦听器重新运行；")]),t._v(" "),s("li",[t._v("访问侦听状态变化前后的值。")])]),t._v(" "),s("h4",{attrs:{id:"侦听单一源"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#侦听单一源"}},[t._v("#")]),t._v(" 侦听单一源")]),t._v(" "),s("p",[t._v("watch 可以侦听一个具有返回值的 getter，也可以直接是一个 ref")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 侦听一个 getter")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevCount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接侦听ref")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevCount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"侦听多个源"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#侦听多个源"}},[t._v("#")]),t._v(" 侦听多个源")]),t._v(" "),s("p",[t._v("还可以使用数组的形式同时侦听多个数据源：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" watch "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("aRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" bRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("prevA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"与-watcheffect-相同的行为"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#与-watcheffect-相同的行为"}},[t._v("#")]),t._v(" 与 watchEffect 相同的行为")]),t._v(" "),s("p",[s("strong",[t._v("watch")]),t._v(" 与 "),s("strong",[t._v("watchEffect")]),t._v(" 在手动停止侦听、清除副作用、副作用刷新时机方面有相同的行为。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" watch "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" unwatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newVal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldVal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 做点什么")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用返回值unwatch可以取消观察")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"watch-选项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watch-选项"}},[t._v("#")]),t._v(" watch 选项")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("选项")]),t._v("：deep")]),t._v(" "),s("p",[t._v("为了发现对象内部值的变化，可以在选项参数中指定 deep: true。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("someObject\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 回调函数")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("deep")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("someObject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nestedValue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("123")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// callback is fired")]),t._v("\n")])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("选项")]),t._v("：once")]),t._v(" "),s("p",[t._v("在选项参数中指定 "),s("code",[t._v("once: true")]),t._v(" 该回调方法只会执行一次，后续的改变将不会触发回调；"),s("br"),t._v("\n该参数也可以是函数，若函数返回值为 "),s("code",[t._v("true")]),t._v(" 时，则后续的改变将不会触发回调")]),t._v(" "),s("div",{staticClass:"language-JavaScript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 该回调函数只会执行一次")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("once")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当 once 是函数时")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" newVal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当 val 等于2时，this.a 的后续改变将不会被监听")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("once")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldVal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("选项")]),t._v("：immediate")]),t._v(" "),s("p",[t._v("在选项参数中指定 "),s("code",[t._v("immediate: true")]),t._v(" 将立即以表达式的当前值触发回调。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 回调函数")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 立即以 `this.a` 的当前值触发回调")]),t._v("\n")])])]),s("p",[t._v("注意在带有 immediate 选项时，你不能在第一次回调时取消侦听。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" unwatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这会导致报错！")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n")])])]),s("p",[t._v("如果你仍然希望在回调内部调用取消侦听的函数，你应该先检查其可用性。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" unwatch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("unwatch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请先检查其可用性！")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unwatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n")])])])])]),t._v(" "),s("h2",{attrs:{id:"effect-作用域-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#effect-作用域-api"}},[t._v("#")]),t._v(" Effect 作用域 API")]),t._v(" "),s("h3",{attrs:{id:"effectscope"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#effectscope"}},[t._v("#")]),t._v(" effectScope")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("effectScope")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("detached"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" EffectScope\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("EffectScope")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("fn")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pause")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resume")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("创建一个 effect 作用域对象，捕获在其内部创建的响应性副作用(例如计算属性或监听器)，可以对这些副作用进行批量处理")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" effectScope "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" scope "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("effectScope")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nscope"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" doubled "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("doubled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("doubled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Count: '")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nscope"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("需要注意的是，effectScope 接受一个 detached 参数，默认为false，该参数来表示当前作用域是否和父级作用域进行分离，若 detached 为 true，\n当前 effectScope 则不会被父级作用域收集。")]),t._v(" "),s("ul",[s("li",[t._v("暂停侦听")])]),t._v(" "),s("p",[t._v("Mpx 提供了 pause 方法可以将整个作用域中的响应性副作用批量暂停侦听。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" effectScope"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onHide "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" scope "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("effectScope")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nscope"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" doubled "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("doubled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("doubled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Count: '")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onHide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    scope"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pause")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[t._v("恢复侦听")])]),t._v(" "),s("p",[t._v("被暂停的作用域可以使用 resume 方法来恢复侦听。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("onShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ......")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    scope"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resume")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"getcurrentscope"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getcurrentscope"}},[t._v("#")]),t._v(" getCurrentScope")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getCurrentScope")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" EffectScope "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),t._v("\n")])])]),s("p",[t._v("返回当前活跃的 effect 作用域。")]),t._v(" "),s("h3",{attrs:{id:"onscopedispose"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onscopedispose"}},[t._v("#")]),t._v(" onScopeDispose")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onScopeDispose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("fn")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n")])])]),s("p",[t._v("在当前活跃的 effect 作用域上注册一个处理回调。该回调会在相关的 effect 作用域结束之后被调用。")]),t._v(" "),s("h2",{attrs:{id:"refs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#refs"}},[t._v("#")]),t._v(" Refs")]),t._v(" "),s("h3",{attrs:{id:"ref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ref"}},[t._v("#")]),t._v(" ref")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Ref"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Ref"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的 property .value。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0")]),t._v("\n\ncount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意事项：")])]),t._v(" "),s("p",[t._v("1.所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。")]),t._v(" "),s("p",[t._v("2.如果将一个对象赋值给 ref，那么这个对象将被 reactive 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    foo\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取count")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取foo")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("foo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"unref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#unref"}},[t._v("#")]),t._v(" unref")]),t._v(" "),s("p",[t._v("如果参数是一个 ref，则返回内部值，否则返回参数本身，是 "),s("code",[t._v("val = isRef(ref) ? ref.value : ref")]),t._v(" 的语法糖函数。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" unref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("unref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> true")]),t._v("\n")])])]),s("h3",{attrs:{id:"toref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#toref"}},[t._v("#")]),t._v(" toRef")]),t._v(" "),s("p",[t._v("用于为响应式对象上的property 创建 ref。创建的 ref 与其源 property 保持同步：改变源 property\n将更新 ref，改变 ref 也将更新 property。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("f")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stateRef "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("black")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("white")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" fooRef "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'f'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blackRef "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("stateRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'black'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更改ref的值更新属性")]),t._v("\nfooRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nblackRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("f"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("stateRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更改property的值更新ref")]),t._v("\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("f"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nstateRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fooRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("blackRef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")])]),t._v(" "),s("p",[t._v("即使源 property 当前不存在，toRef() 也会返回一个可用的 ref，而 toRefs 则不会，这在处理可选properties的时候\n非常有用")]),t._v(" "),s("h3",{attrs:{id:"torefs"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#torefs"}},[t._v("#")]),t._v(" toRefs")]),t._v(" "),s("p",[t._v("将一个响应式对象转换为一个普通对象，这个普通对象的每个 property 都是指向源对象相应 property 的 ref。每个单独的 ref 都是 "),s("code",[t._v("toRef")]),t._v(" 创建的")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("black")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("white")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stateAsRefs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("stateAsRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\n\nstateAsRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3")]),t._v("\n")])])]),s("p",[t._v("toRefs 在使用组合式函数中的响应式对象时有很大作用，使用它，对响应式对象进行解构将不会失去响应性")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useFeatX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("black")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("white")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在返回时都转为 ref")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 解构而不会失去响应性")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" white"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useFeatX")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")])]),t._v(" "),s("ul",[s("li",[t._v("toRefs 在调用时只会为源对象上可以列举出的 property 创建 ref。如果要为可能还不存在的 property\n创建 ref，请改用 "),s("code",[t._v("toRef")])])]),t._v(" "),s("h3",{attrs:{id:"isref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#isref"}},[t._v("#")]),t._v(" isRef")]),t._v(" "),s("p",[t._v("检查某个值是否为 ref，返回true/false。")]),t._v(" "),s("h3",{attrs:{id:"customref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#customref"}},[t._v("#")]),t._v(" customRef")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("customRef")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("factory"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" CustomRefFactory"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Ref"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomRefFactory"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("track")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("trigger")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("创建一个自定义 ref，可对其进行依赖项跟踪和更新触发显示控制。需要一个工厂函数，该函数接收 "),s("code",[t._v("track")]),t._v(" 和 "),s("code",[t._v("trigger")]),t._v("\n做为参数，并且应该返回一个带有 "),s("code",[t._v("get")]),t._v(" 和 "),s("code",[t._v("set")]),t._v(" 的对象。")]),t._v(" "),s("p",[t._v("同时，"),s("code",[t._v("track()")]),t._v(" 应该在 get() 方法中调用，"),s("code",[t._v("trigger()")]),t._v(" 应该在 "),s("code",[t._v("set()")]),t._v(" 中调用。不过这里具体何时调用、\n是否调用都将由用户自己来控制")]),t._v(" "),s("p",[t._v("示例：创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useDebouncedRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" delay "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" timeout\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("customRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("track"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" trigger")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("track")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" value\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("timeout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        timeout "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" newValue\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("trigger")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" delay"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// text 的每次改变都只在最近一次set后的200ms后调用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" text "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useDebouncedRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"shallowref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#shallowref"}},[t._v("#")]),t._v(" shallowRef")]),t._v(" "),s("p",[s("code",[t._v("ref()")]),t._v(" 的浅层作用形式，创建一个仅跟踪自身 "),s("code",[t._v(".value")]),t._v(" 变化的 ref，其他值不做任何处理都为非响应式")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shallowRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发更改")]),t._v("\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 会触发更改")]),t._v("\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("black")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")]),t._v("\nshallowRef 的内部值将会被原样存储和暴露，不会被深层递归转为响应性， 只有对 "),s("code",[t._v(".value")]),t._v(" 的访问是响应式的")]),t._v(" "),s("p",[t._v("常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。")]),t._v(" "),s("h3",{attrs:{id:"triggerref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#triggerref"}},[t._v("#")]),t._v(" triggerRef")]),t._v(" "),s("p",[t._v("强制触发依赖于一个浅层 "),s("code",[t._v("ref")]),t._v(" 的副作用，这通常在对浅引用的内部值进行深度变更后使用。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" shallow "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("shallowRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("greet")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello, world'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 触发该副作用第一次应该会打印 "Hello, world"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("shallow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("greet"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这次变更不应触发副作用，因为这个 ref 是浅层的")]),t._v("\nshallow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("greet "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello, universe'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 手动执行该 shallowRef 关联的副作用，打印 "Hello, universe"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("triggerRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("shallow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/46.22f9a9c6.js b/docs-vuepress/.vuepress/dist/assets/js/46.22f9a9c6.js
deleted file mode 100644
index 875578b2d1..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/46.22f9a9c6.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{395:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"store-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store-api"}},[t._v("#")]),t._v(" Store API")]),t._v(" "),s("p",[s("strong",[t._v("注意：")]),t._v(" 以下 API 在 "),s("strong",[t._v("2.8")]),t._v(" 版本后无法通过全局应用实例 "),s("code",[t._v("mpx")]),t._v(" 访问。若项目中有类似 mpx.createStore 的用法，在升级到 "),s("strong",[t._v("2.8")]),t._v(" 版本后请进行修改。")]),t._v(" "),s("h2",{attrs:{id:"createstore"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createstore"}},[t._v("#")]),t._v(" createStore")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Store\n")])])]),s("blockquote",[s("p",[t._v("创建一个全局状态管理容器，实现复杂场景下的组件通信需求")])]),t._v(" "),s("ul",[s("li",[s("p",[s("code",[t._v("options")])]),t._v(" "),s("p",[t._v("options 可指定以下属性：")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("state")]),t._v(": "),s("code",[t._v("Object")])]),t._v(" "),s("p",[t._v("store的根 state 对象。")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/guide/advance/store.html#state"}},[t._v("详细介绍")])],1)]),t._v(" "),s("li",[s("p",[s("strong",[t._v("mutations")]),t._v(": "),s("code",[t._v("{ [type: string]: Function }")])]),t._v(" "),s("p",[t._v("在 store 上注册 mutation，处理函数总是接受 state 作为第一个参数（如果定义在模块中，则为模块的局部状态），payload 作为第二个参数（可选）。")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/guide/advance/store.html#mutation"}},[t._v("详细介绍")])],1)]),t._v(" "),s("li",[s("p",[s("strong",[t._v("actions")]),t._v(": "),s("code",[t._v("{ [type: string]: Function }")])]),t._v(" "),s("p",[t._v("在 store 上注册 action。处理函数总是接受 context 作为第一个参数，payload 作为第二个参数（可选）。")]),t._v(" "),s("p",[t._v("context 对象包含以下属性：\n"),s("code",[t._v("js { state, // 等同于 `store.state` commit, // 等同于 `store.commit` dispatch, // 等同于 `store.dispatch` getters // 等同于 `store.getters` }")]),t._v("\n同时如果有第二个参数 payload 的话也能够接收。")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/guide/advance/store.html#action"}},[t._v("详细介绍")])],1)]),t._v(" "),s("li",[s("p",[s("strong",[t._v("getters")]),t._v("："),s("code",[t._v("{[key: string]: Function }")])]),t._v(" "),s("p",[t._v("在 store 上注册 getter，getter 方法接受以下参数：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("     "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果在模块中定义则为模块的局部状态")]),t._v("\n  getters   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 等同于 store.getters")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("注册的 getter 暴露为 store.getters。")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/guide/advance/store.html#getter"}},[t._v("详细介绍")])],1)]),t._v(" "),s("li",[s("p",[s("strong",[t._v("modules")]),t._v("："),s("code",[t._v("Object")])]),t._v(" "),s("p",[t._v("包含了子模块的对象，会被合并到 store，大概长这样：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("key")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    mutations"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    actions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    getters"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    modules"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("与根模块的选项一样，每个模块也包含 state 和 mutations 选项。模块的状态使用 key 关联到 store 的根状态。模块的 mutation 和 getter 只会接收 module 的局部状态作为第一个参数，而不是根状态，并且模块 action 的 context.state 同样指向局部状态。")]),t._v(" "),s("p",[s("RouterLink",{attrs:{to:"/guide/advance/store.html#modules"}},[t._v("详细介绍")])],1)]),t._v(" "),s("li",[s("p",[s("strong",[t._v("deps")]),t._v("："),s("code",[t._v("Object")])]),t._v(" "),s("p",[t._v("包含了当前store依赖的第三方store：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("store1")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" storeA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("store2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" storeB\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("RouterLink",{attrs:{to:"/guide/advance/store.html#modules"}},[t._v("详细介绍")])],1)])])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("options "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"store-实例属性"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store-实例属性"}},[t._v("#")]),t._v(" "),s("strong",[t._v("Store 实例属性")])]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("state")]),t._v("："),s("code",[t._v("Object")]),t._v("\n根状态。")]),t._v(" "),s("li",[s("strong",[t._v("getters")]),t._v("："),s("code",[t._v("Object")]),t._v("\n暴露出注册的 getter。")])]),t._v(" "),s("h3",{attrs:{id:"store-实例方法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store-实例方法"}},[t._v("#")]),t._v(" "),s("strong",[t._v("Store 实例方法")])]),t._v(" "),s("ul",[s("li",[t._v("commit")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" any"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mutation"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("提交 mutation。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#mutation"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("dispatch")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" any"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("action"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("分发 action。返回一个Promise。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#action"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("mapState")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("map"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("p",[t._v("为组件创建计算属性以返回 store 中的状态。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#state"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("mapGetters")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGetters")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("map"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("p",[t._v("为组件创建计算属性以返回 getter 的返回值。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#getter"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("mapActions")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("map"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("p",[t._v("创建组件方法分发 action。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#action"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("mapMutations")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("map"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("p",[t._v("创建组件方法提交 mutation。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#mutation"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("mapStateToRefs")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapStateToRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("maps"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Array")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ComputedRef"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("组合式 API 特有")]),t._v("，在组合式 API 场景下解构访问 getter 并保持 getter 响应性，可以使用该方法。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#use-store-in-composition-api"}},[t._v("详细介绍")])],1),t._v(" "),s("ul",[s("li",[t._v("mapGettersToRefs")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGettersToRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("maps"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Array"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("string"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" string"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ComputedRef"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("any"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("strong",[t._v("组合式 API 特有")]),t._v("，在组合式 API 场景下需解构访问 state 并保持 state 响应性，可以使用该方法。"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#use-store-in-composition-api"}},[t._v("详细介绍")])],1),t._v(" "),s("h2",{attrs:{id:"createstorewiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createstorewiththis"}},[t._v("#")]),t._v(" createStoreWithThis")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Store\n")])])]),s("blockquote",[s("p",[t._v("createStoreWithThis 为 createStore 的变种方法，主要为了在 "),s("code",[t._v("Typescript")]),t._v(" 环境中，可以更好地支持 store 中的类型推导。"),s("br"),t._v("\n其主要变化在于定义 getters， mutations 和 actions 时，\n自身的 state，getters 等属性不再通过参数传入，而是会挂载到函数的执行上下文 this 当中，通过 this.state 或 this.getters 的方式进行访问。\n由于TS的能力限制，getters/mutations/actions 只有使用对象字面量的方式直接传入 createStoreWithThis 时\n才能正确推导出 this 的类型，当需要将 getters/mutations/actions 拆解为对象编写时，需要用户显式地声明 this 类型，无法直接推导得出。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getMixin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createStoreWithThis"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("aa")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("bb")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aa "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bb\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("d")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// data, mixin, computed中定义的数据能够被推导到this中")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 从store上map过来的计算属性或者方法同样能够被推导到this中")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'aa'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mixins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("aaa")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("123")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aaa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aa"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'doSth3'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"createstatewiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createstatewiththis"}},[t._v("#")]),t._v(" createStateWithThis")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStateWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("blockquote",[s("p",[t._v("createStateWithThis 为创建 state 提供了类型推导，对于基本类型可以由 TypeScript 自行推导，使用其他类型时，推荐使用 as 进行约束")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createStateWithThis "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" type StatusType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'start'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'running'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'stop'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStateWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'running'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" StatusType\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"creategetterswiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#creategetterswiththis"}},[t._v("#")]),t._v(" createGettersWithThis")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createGettersWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("Object\n")])])]),s("ul",[s("li",[s("p",[t._v("getters")]),t._v(" "),s("p",[t._v("需要定义的 getters 对象。")])]),t._v(" "),s("li",[s("p",[t._v("options（可选参数）")]),t._v(" "),s("p",[t._v("在 options 中可以传入 state，getters，deps。由于 getter 的类型推论需要基于 state，所以导出 getters 时，需要将 state 进行传入。deps 是作为一个扩展存在，getters 可以通过 deps 中传入的其他 store 来获取值，当 store 没有其他需要依赖的 deps 时可以不传。createMutationsWithThis 和 createActionsWithThis 同理。")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createGettersWithThis"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createStoreWithThis "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createGettersWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isStart")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("status "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'start'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getNum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("base"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("test "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("base"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getTest\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("deps")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("base")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("testNum")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getTest")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("testNum "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"createmutationswiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createmutationswiththis"}},[t._v("#")]),t._v(" createMutationsWithThis")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createMutationsWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mutations"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("ul",[s("li",[s("p",[t._v("mutations")]),t._v(" "),s("p",[t._v("需要定义的 mutations 对象。")])]),t._v(" "),s("li",[s("p",[t._v("options（可选参数）")]),t._v(" "),s("p",[t._v("在 options 中可以传入 state，deps。")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createMutationsWithThis "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createMutationsWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setCurrentStatus")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("payload")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" StatusType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("status "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" payload\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"createactionswiththis"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#createactionswiththis"}},[t._v("#")]),t._v(" createActionsWithThis")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createActionsWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("actions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Object\n")])])]),s("ul",[s("li",[s("p",[t._v("actions")]),t._v(" "),s("p",[t._v("需要定义的 actions 对象。")])]),t._v(" "),s("li",[s("p",[t._v("options（可选参数）")]),t._v(" "),s("p",[t._v("由于action 可以同时调用 getters、mutations，所以需要将这些都传入，以便进行类型推导。因此 options 可以传入 state、getters、mutations、deps。")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createActionsWithThis "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" StatusType "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./state'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" getters "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./getters'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mutations "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./mutations'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createActionsWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("testActions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("payload")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" StatusType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" Promise"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setCurrentStatus'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  mutations\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/47.2bd2cecc.js b/docs-vuepress/.vuepress/dist/assets/js/47.2bd2cecc.js
deleted file mode 100644
index 01a3b3a970..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/47.2bd2cecc.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{393:function(t,v,_){"use strict";_.r(v);var e=_(4),a=Object(e.a)({},(function(){var t=this,v=t._self._c;return v("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[v("h1",{attrs:{id:"滴滴开源小程序框架mpx"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#滴滴开源小程序框架mpx"}},[t._v("#")]),t._v(" 滴滴开源小程序框架Mpx")]),t._v(" "),v("blockquote",[v("p",[t._v("作者："),v("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[t._v("hiyuki"),v("OutboundLink")],1)])]),t._v(" "),v("p",[t._v("Mpx是一款致力于提高小程序开发体验的增强型小程序框架，通过Mpx，我们能够以最先进的web开发体验(Vue + Webpack)来开发生产性能深度优化的小程序，Mpx具有以下一些优秀特性：")]),t._v(" "),v("ul",[v("li",[t._v("数据响应特性(watch/computed)")]),t._v(" "),v("li",[t._v("增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等)")]),t._v(" "),v("li",[t._v("深度性能优化(原生自定义组件/基于依赖收集和数据变化的setData)")]),t._v(" "),v("li",[t._v("Webpack编译(npm/循环依赖/Babel/ESLint/css预编译/代码优化等)")]),t._v(" "),v("li",[t._v("单文件组件开发")]),t._v(" "),v("li",[t._v("状态管理(Vuex规范/多实例/可合并)")]),t._v(" "),v("li",[t._v("跨团队合作(packages)")]),t._v(" "),v("li",[t._v("逻辑复用能力(mixins)")]),t._v(" "),v("li",[t._v("脚手架支持")]),t._v(" "),v("li",[t._v("小程序自身规范的完全支持")]),t._v(" "),v("li",[t._v("支付宝小程序的支持")])]),t._v(" "),v("h2",{attrs:{id:"设计思路"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#设计思路"}},[t._v("#")]),t._v(" 设计思路")]),t._v(" "),v("p",[t._v("目前业界主流的小程序框架主要有WePY，mpvue和Taro，这三者都是将其他的语法规范转译为小程序语法规范，我们称其为转译型框架。不同于上述三者，Mpx是一款基于小程序语法规范的增强型框架，我们使用Vue中优秀的语法特性增强了小程序，而不是让用户直接使用vue语法来开发小程序，之所以采用这种设计主要是基于如下考虑：")]),t._v(" "),v("ul",[v("li",[t._v("转译型框架无法支持源框架的所有语法特性(如Vue模板中的动态特性或React中动态生成的jsx)，用户在使用源框架语法进行开发时可能会遇到不可预期的错误，具有不确定性")]),t._v(" "),v("li",[t._v("小程序本身的技术规范在不断地更新进步，许多新的技术规范在转译型框架中无法支持或需要很高的支持成本，而对于增强型框架来说只要新的技术规范不与增强特性冲突，就能够直接支持")])]),t._v(" "),v("h2",{attrs:{id:"技术实现"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#技术实现"}},[t._v("#")]),t._v(" 技术实现")]),t._v(" "),v("p",[t._v("小程序刚推出时不支持自定义组件，无法进行组件化开发，当时最早的小程序框架WePY做的核心工作就是支持了小程序的组件化开发，后来的mpvue也基于Vue做了类似的工作。由于当时的小程序本身不支持自定义组件，WePY和mpvue的组件化支持都是基于编译做的组件化封装，用户编写的组件模板会被编译为Page中模板的一部分，在组件中定义的数据会被编译为Page中的数据，对组件进行数据更新也会基于路径映射调用Page.setData。这个方案在当时的技术条件下确实是一个唯一解，但该方案在复杂的小程序应用中会存在明显性能问题，原因在于该方案中页面的数据量会很大，而且每个组件的局部更新实际上都会成为页面级别的全局更新，在组件较多的页面中容易引发性能问题。在小程序自定义组件推出后，我们通过性能测试确认了该方案解决了上述组件封装方案中的性能问题。由于自定义组件在当时是一个最新的技术标准，业内的小程序框架都未支持，而我们本身的业务又有复杂小程序的开发需求，于是我们就基于小程序自定义组件规范启动了Mpx框架的设计与开发")]),t._v(" "),v("p",[v("em",[t._v("Page与Component setData性能对照")])]),t._v(" "),v("table",[v("thead",[v("tr",[v("th"),t._v(" "),v("th",[t._v("Component")]),t._v(" "),v("th",[t._v("Page")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("局部更新")]),t._v(" "),v("td",[t._v("1975ms")]),t._v(" "),v("td",[t._v("7186ms")])]),t._v(" "),v("tr",[v("td",[t._v("全局更新")]),t._v(" "),v("td",[t._v("6210ms")]),t._v(" "),v("td",[t._v("24612ms")])])])]),t._v(" "),v("blockquote",[v("p",[t._v("性能衡量标准说明：\n局部更新：文档中存在1000个节点，其中一个节点更新1000次的耗时；\n全局更新：文档中存在5个节点，5个节点独立更新1000次的耗时\n以上数据在iphone7微信小程序环境下测试得出")])]),t._v(" "),v("h3",{attrs:{id:"数据响应与性能优化"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#数据响应与性能优化"}},[t._v("#")]),t._v(" 数据响应与性能优化")]),t._v(" "),v("p",[t._v("数据响应作为Vue最核心的特性，在我们的日常开发中被大量使用，能够极大地提高前端开发体验和效率，我们在框架设计初期最早考虑的就是如何将数据响应特性加入到小程序开发中。在数据响应的实现上，我们引入了MobX，一个实现了纯粹数据响应能力的知名开源项目。借助MobX和mixins，我们在小程序组件创建初期建立了一个响应式数据管理系统，该系统观察着小程序组件中的所有数据(data/props/computed)并基于数据的变更驱动视图的渲染(setData)及用户注册的watch回调，实现了Vue中的数据响应编程体验。与此同时，我们基于MobX封装实现了一个Vuex规范的数据管理store，能够方便地注入组件进行全局数据管理。为了提高跨团队开发的体验，我们对store添加了多实例可合并的特性，不同团队维护自己的store，在需要时能够合并他人或者公共的store生成新的store实例，我们认为这是一种比Vuex中modules更加灵活便捷的跨团队数据管理模式")]),t._v(" "),v("p",[t._v("作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：")]),t._v(" "),v("ol",[v("li",[t._v("尽可能减少setData调用的频次")]),t._v(" "),v("li",[t._v("尽可能减少单次setData传输的数据")])]),t._v(" "),v("p",[t._v("为了实现以上两个优化方向，我们做了以下几项工作：")]),t._v(" "),v("ul",[v("li",[t._v("将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；")]),t._v(" "),v("li",[t._v("将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。\n基于以上优化，我们大大减少了小程序setData的调用频次和传递数据量，与初版Mpx中track全量数据的方案相比提升显著。")])]),t._v(" "),v("p",[v("em",[t._v("Mpx setData优化效果")])]),t._v(" "),v("table",[v("thead",[v("tr",[v("th"),t._v(" "),v("th",[t._v("旧版mpx")]),t._v(" "),v("th",[t._v("新版mpx")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("setData次数")]),t._v(" "),v("td",[t._v("164")]),t._v(" "),v("td",[t._v("88")])]),t._v(" "),v("tr",[v("td",[t._v("setData数据量")]),t._v(" "),v("td",[t._v("370kB")]),t._v(" "),v("td",[t._v("38kB")])])])]),t._v(" "),v("blockquote",[v("p",[t._v("以上数据由较复杂小程序在固定交互流程后统计得出")])]),t._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/4cb54489-b99d-4560-97aa-68f756730131.jpeg",alt:"Mpx数据响应机制流程示意图"}}),t._v(" "),v("em",[t._v("Mpx数据响应机制流程示意图")])]),t._v(" "),v("h3",{attrs:{id:"编译构建"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#编译构建"}},[t._v("#")]),t._v(" 编译构建")]),t._v(" "),v("p",[t._v("我们希望使用目前设计最强大、生态最完善的编译构建工具Webpack来实现小程序的编译构建，让用户得到web开发中先进强大的工程化开发体验。使用过Webpack的同学都知道，通常来说Webpack都是将项目中使用到的一系列碎片化模块打包为一个或几个bundle，而小程序所需要的文件结构是非常离散化的，如何调解这两者的矛盾成为了我们最大的难题。一种非常直观简单的思路在于遍历整个src目录，将其中的每一个.mpx文件都作为一个entry加入到Webpack中进行处理，这样做的问题主要有两个：")]),t._v(" "),v("ol",[v("li",[t._v("src目录中用不到的.mpx文件也会被编译输出，最终也会被小程序打包进项目包中，无意义地增加了包体积；")]),t._v(" "),v("li",[t._v("对于node_modules下的.mpx文件，我们不认为遍历node_modules是一个好的选择。")])]),t._v(" "),v("p",[t._v("最终我们采用了一种基于依赖分析和动态添加entry的方式来进行实现，用户在Webpack配置中只需要配置一个入口文件app.mpx，loader在解析到json时会解析json中pages域和usingComponents域中声明的路径，通过动态添加entry的方式将这些文件添加到Webpack的构建系统当中（注意这里是添加entry而不是添加依赖，因为只有entry能生成独立的文件，满足小程序的离散化文件结构），并递归执行这个过程，直到整个项目中所有用到的.mpx文件都加入进来，在输出前，我们借助了CommonsChunkPlugin/SplitChunksPlugin的能力将复用的模块抽取到一个外部的bundle中，确保最终生成的包中不包含重复模块。我们提供了一个Webpack插件和一个.mpx文件对应的loader来实现上述操作，用户只需要将其添加到Webpack配置中就可以以打包web项目的方式正常打包小程序，没有任何的前置和后置操作，支持Webpack本身的完整生态。")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/ce6d470c-0a4c-486e-a2f5-ad225c289832.jpeg",alt:"Mpx编译构建机制流程示意图"}}),t._v(" "),v("em",[t._v("Mpx编译构建机制流程示意图")])]),t._v(" "),v("h1",{attrs:{id:"现状和未来"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#现状和未来"}},[t._v("#")]),t._v(" 现状和未来")]),t._v(" "),v("p",[t._v("目前Mpx框架已经在滴滴内部大量使用，支撑了滴滴出行、青桔单车、街兔电单车、营销、车服等业务在小程序上的实现，线上运行稳定，收到了大量的好评反馈。未来我们在对框架进行持续迭代优化的同时会持续跟进微信和支付宝最新的技术标准，同时也会将在更多的小程序平台上进行适配。由于我们的设计初衷和专注点在于增强小程序开发体验，Mpx并没有进行跨H5甚至是跨Native的支持，但现实业务当中确实存在这样的诉求，未来我们会在Mpx的基础上对跨端进行一定的尝试，与此同时我们依然会持续维护升级Mpx，原因在于跨端意味着灵活性受限及能力的缺失，我们希望能给用户提供第二种选择。")]),t._v(" "),v("p",[v("em",[t._v("Mpx与业内主流小程序框架异同对比")])]),t._v(" "),v("table",[v("thead",[v("tr",[v("th"),t._v(" "),v("th",[t._v("WePY")]),t._v(" "),v("th",[t._v("mpvue")]),t._v(" "),v("th",[t._v("Taro")]),t._v(" "),v("th",[t._v("Mpx")])])]),t._v(" "),v("tbody",[v("tr",[v("td",[t._v("代码规范")]),t._v(" "),v("td",[t._v("自定义")]),t._v(" "),v("td",[t._v("Vue")]),t._v(" "),v("td",[t._v("React")]),t._v(" "),v("td",[t._v("小程序+")])]),t._v(" "),v("tr",[v("td",[t._v("组件化实现")]),t._v(" "),v("td",[t._v("Page封装")]),t._v(" "),v("td",[t._v("Page封装")]),t._v(" "),v("td",[t._v("Component")]),t._v(" "),v("td",[t._v("Component")])]),t._v(" "),v("tr",[v("td",[t._v("数据响应")]),t._v(" "),v("td",[t._v("脏值检查")]),t._v(" "),v("td",[t._v("Vue")]),t._v(" "),v("td",[t._v("无")]),t._v(" "),v("td",[t._v("Mobx")])]),t._v(" "),v("tr",[v("td",[t._v("状态管理")]),t._v(" "),v("td",[t._v("Redux")]),t._v(" "),v("td",[t._v("Vuex")]),t._v(" "),v("td",[t._v("Redux")]),t._v(" "),v("td",[t._v("类Vuex")])])])]),t._v(" "),v("h2",{attrs:{id:"结语"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#结语"}},[t._v("#")]),t._v(" 结语")]),t._v(" "),v("p",[t._v("如果你注重开发体验和产品性能，专注于小程序开发，那Mpx会是一个很好的选择。最后感谢开源社区源源不断涌现出的优秀项目，给我们提供了无限的启发和巨大的技术帮助。")]),t._v(" "),v("p",[t._v("Github: "),v("a",{attrs:{href:"https://github.com/didi/mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/didi/mpx"),v("OutboundLink")],1),t._v("\n使用文档: "),v("a",{attrs:{href:"https://mpxjs.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://mpxjs.cn/"),v("OutboundLink")],1),t._v("\n用户交流群:\n"),v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/at_XEnlFb0/WechatIMG1.jpeg",alt:"微信"}})])])}),[],!1,null,null,null);v.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/48.55792a30.js b/docs-vuepress/.vuepress/dist/assets/js/48.55792a30.js
deleted file mode 100644
index e0193a93c3..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/48.55792a30.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{396:function(t,a,v){"use strict";v.r(a);var _=v(4),e=Object(_.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"滴滴小程序框架mpx发布2-0-支持小程序跨平台开发-可直接转换已有微信小程序"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#滴滴小程序框架mpx发布2-0-支持小程序跨平台开发-可直接转换已有微信小程序"}},[t._v("#")]),t._v(" 滴滴小程序框架Mpx发布2.0，支持小程序跨平台开发，可直接转换已有微信小程序")]),t._v(" "),a("blockquote",[a("p",[t._v("作者："),a("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[t._v("hiyuki"),a("OutboundLink")],1)])]),t._v(" "),a("p",[t._v("Mpx是一款致力于提高小程序开发体验和效率的增强型小程序框架，目前在滴滴公司内部支撑了包括滴滴出行小程序，滴滴出行广场小程序，青桔单车，黑马电单车，小桔养车，小桔加油在内的小程序生态；自去年11月开源以来，Mpx也吸纳了众多外部开发者的加入，基于Mpx开发了开走吧，好免街，花忆等小程序。")]),t._v(" "),a("p",[t._v("长期以来，Mpx优秀的开发体验和强大的稳定性得到了内外开发者的一致认可和好评，这非常符合Mpx的设计初衷。但是在各大厂商陆续推出自己的小程序平台，且各家的技术标准都不统一的今天，单纯地提高某一个平台的开发体验已经不能满足广大小程序开发者们的诉求，"),a("code",[t._v("一套代码在多小程序平台运行")]),t._v("已经成为一个现实上的刚需。为了解决这个小程序开发的痛点，Mpx发布了2.0版本，适配了目前业内已经发布的所有小程序平台(微信、支付宝、百度、头条、qq)，并且提供了直接将现有微信小程序编译输出到其他平台运行的能力。")]),t._v(" "),a("p",[t._v("Mpx2.0版本新增的主要特性主要包含：")]),t._v(" "),a("ul",[a("li",[t._v("完整支持了目前业内已发布的所有小程序平台(微信，支付宝，百度，qq，头条)；")]),t._v(" "),a("li",[t._v("Mpx小程序跨平台开发，支持将已有的Mpx微信项目编译输出到其他已支持的小程序平台中运行，"),a("RouterLink",{attrs:{to:"/guide/advance/platform.html"}},[t._v("点击查看详情")]),t._v("；")],1),t._v(" "),a("li",[t._v("小程序原生组件跨平台编译，支持将已有的微信原生组件编译输出到其他已支持的小程序平台中运行；")]),t._v(" "),a("li",[t._v("深度分包优化，编译过程中进行精准分包资源判断，所有分包only的资源(组件、js、外部样式、外部模板、wxs，图像媒体等)都会精确输出到分包目录中；")]),t._v(" "),a("li",[t._v("render函数中完整支持wxs模块，"),a("RouterLink",{attrs:{to:"/guide/understand/runtime.html"}},[t._v("关于render函数点击查看详情")]),t._v("；")],1),t._v(" "),a("li",[t._v("支持了模板引入，内联wxs，自定义tabbar，独立分包，workers，云开发等原生能力，进一步完善原生兼容性。")])]),t._v(" "),a("p",[t._v("同业内主流的小程序跨端框架相比，Mpx更专注于小程序开发本身，在小程序开发中具备以下优势：")]),t._v(" "),a("ul",[a("li",[t._v("基于小程序自身的技术标准进行增强，没有进行过重的DSL转换，开发时遇到的坑会更少；")]),t._v(" "),a("li",[t._v("完全兼容原生小程序技术规范，0成本迁移原生小程序项目;")]),t._v(" "),a("li",[t._v("跨平台开发以跨小程序平台为目标，大部分差异抹平工作在编译阶段进行，大大减少运行时适配层增加的包体积；")]),t._v(" "),a("li",[t._v("支持业内微信小程序组件库(如vant、iView等)直接转换到其他小程序平台运行;")]),t._v(" "),a("li",[t._v("非常重视小程序性能，提供了深度的setData和包体积优化。")])]),t._v(" "),a("p",[t._v("关于Mpx更详细的介绍可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("官方文档"),a("OutboundLink")],1),t._v("和"),a("RouterLink",{attrs:{to:"/articles/1.0.html"}},[t._v("这篇文章")]),t._v("。")],1),t._v(" "),a("p",[t._v("Github："),a("a",{attrs:{href:"https://github.com/didi/mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/didi/mpx"),a("OutboundLink")],1)]),t._v(" "),a("h2",{attrs:{id:"跨平台开发"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨平台开发"}},[t._v("#")]),t._v(" 跨平台开发")]),t._v(" "),a("p",[t._v("作为2.0版本的核心能力，Mpx的跨平台开发能力允许用户直接将已有小程序项目编译输出到其他已支持的小程序平台中运行。微信小程序作为小程序概念的提出者，有着最广泛的生态覆盖，因此我们优先支持了将微信小程序编译为其他平台小程序的能力。基于这个能力，用户不仅能跨平台编译微信Mpx项目，甚至能够将微信的原生自定义组件也编译到其他小程序平台进行运行，这意味着我们的跨平台项目能够直接使用一些社区内已有的UI组件库生态(如vant、iView等)，极大地提高了跨平台开发的适用范围。")]),t._v(" "),a("h3",{attrs:{id:"设计理念"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#设计理念"}},[t._v("#")]),t._v(" 设计理念")]),t._v(" "),a("p",[t._v("Mpx框架的核心设计理念在于增强，增强是指在小程序已有的原生能力基础上做加法，拓展小程序的开发能力，提高小程序的开发体验和效率。这个设计理念使Mpx给开发者带来了更强的确定性和可预期性，更低的学习上手和调试成本。基于这个理念，Mpx在不同的小程序平台中进行了差异性的增强适配，并参考各个平台的模板指令风格提供了不同的增强模板指令集，让用户在各小程序平台中都可以以增强的方式去最大限度地使用平台自有的原生能力。")]),t._v(" "),a("p",[t._v("我们在对Mpx提供跨平台能力的支持时也遵循了增强的核心设计理念。简单来讲，Mpx的跨平台能力是在多平台能力的基础上，在编译和运行时增加了一层转换层，将源平台的代码转换为目标平台的代码之后，再按照既有的目标平台的处理逻辑进行增强，同时我们也提供了一套完善的条件编译机制，让用户自行实现少数框架无法转换的部分。")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/38652040-2fbf-435b-aeff-563666c4021c.png",alt:"Mpx跨平台开发流程示意图"}})]),t._v(" "),a("p",[a("em",[t._v("Mpx跨平台开发流程示意图")])]),t._v(" "),a("p",[t._v("Mpx跨平台能力设计思路明显区别于业内已有的其他小程序跨平台框架，主要差异在于：")]),t._v(" "),a("ul",[a("li",[t._v("Mpx以小程序本身的DSL作为基准，而没有使用web框架(React,Vue)的DSL；")]),t._v(" "),a("li",[t._v("Mpx主要通过编译和运行时转换的方式处理平台差异，没有提供额外的差异抹平层(基础组件库等)。")])]),t._v(" "),a("p",[t._v("之所以采用这种设计，主要基于以下原因：")]),t._v(" "),a("ul",[a("li",[t._v("Mpx主要以跨小程序平台为目标，目前各大小程序平台的技术规范具有一定相似性，绝大部分平台差异能够通过编译和运行时手段抹平，同时省去的差异抹平层也能够进一步减少框架运行时体积；")]),t._v(" "),a("li",[t._v("使用小程序本身的DSL作为基准允许用户直接在已有项目中使用跨平台能力，对于原生小程序项目或组件也能够使用该能力进行跨平台输出；")]),t._v(" "),a("li",[t._v("结合完善的条件编译支持，该方案能够在满足用户跨平台需求的同时仍然允许用户最大限度地使用各个小程序平台提供的能力，完全延续了Mpx增强的核心设计理念。")])]),t._v(" "),a("h3",{attrs:{id:"使用方法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用方法"}},[t._v("#")]),t._v(" 使用方法")]),t._v(" "),a("p",[t._v("Mpx跨平台开发的使用方式非常简单，用户只需在MpxWebpackPlugin创建时传入mode和srcMode参数指定源平台和目标平台，当srcMode和mode不一致时，框架会读取相应的配置对项目进行编译和运行时转换。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 微信转支付宝")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MpxWebpackPlugin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mode指定目标平台，可选值有(wx|ali|swan|qq|tt)")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// srcMode指定源码平台，默认值同目标平台一致")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#差异抹平"}},[t._v("#")]),t._v(" 差异抹平")]),t._v(" "),a("p",[t._v("目前各大厂商的小程序技术规范在宏观层面上大致保持一致，但是技术细节方面存在很多差异，大致划分为以下几个部分：")]),t._v(" "),a("ul",[a("li",[t._v("模板语法/基础组件差异")]),t._v(" "),a("li",[t._v("json配置差异")]),t._v(" "),a("li",[t._v("wxs语法差异")]),t._v(" "),a("li",[t._v("页面/组件对象差异")]),t._v(" "),a("li",[t._v("api调用差异")]),t._v(" "),a("li",[t._v("webview bridge差异")])]),t._v(" "),a("p",[t._v("其中，对于模板语法/基础组件、json配置和wxs中的静态差异，我们主要通过编译手段进行转换处理，对于这部分差异中无法转换的部分会在编译阶段报错指出；而对于页面/组件对象、api调用和webview bridge中js运行时的差异，我们主要通过运行时手段进行处理，对应的无法转换部分也会在运行时中报错指出。")]),t._v(" "),a("p",[t._v("值得注意的是，我们在跨平台转换中做的工作不仅是对可转换的技术标准进行转换映射，对于一些目标平台中不存在的能力，我们也尽可能地通过编译和运行时手段提供了模拟和支持，最大限度地减少用户在跨平台开发中需要付出的额外工作量。以差异性最大但现实场景也最多的微信转支付宝为例，Mpx模拟提供了许多微信中支持但支付宝中未支持的能力：")]),t._v(" "),a("ul",[a("li",[t._v("组件自定义事件")]),t._v(" "),a("li",[t._v("组件间关系")]),t._v(" "),a("li",[t._v("获取子组件实例")]),t._v(" "),a("li",[t._v("observers/property observer")]),t._v(" "),a("li",[t._v("内联wxs")]),t._v(" "),a("li",[t._v("外部样式类")])]),t._v(" "),a("p",[t._v("对于原生自定义组件的跨平台转换，我们会对其进行简单的运行时注入，使其能够使用Mpx框架提供的运行时转换能力。")]),t._v(" "),a("h3",{attrs:{id:"条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#条件编译"}},[t._v("#")]),t._v(" 条件编译")]),t._v(" "),a("p",[t._v("对于框架无法抹平的差异部分，会在编译和运行时报错指出，对于这部分错误，我们提供了完善的条件编译机制让用户能够自行编写目标平台的patch进行修复，该能力也能用于实现具有平台差异性的业务逻辑。")]),t._v(" "),a("p",[t._v("上文中提到Mpx通过读取用户传入的mode和srcMode来决定是否以及如何对项目进行转换，mode和srcMode分别代表整个项目构建的目标平台和源平台，条件编译能够让用户在项目中创建声明了自身平台属性(localSrcMode)的文件和代码块。在项目构建中，框架会优先加载带有localSrcMode声明且localSrcMode与项目目标平台匹配(localSrcMode===mode)的文件和代码块，这部分文件和代码块需要完全依照自身声明的平台标准进行编写，Mpx不会对其进行任何编译和运行时的跨平台转换。")]),t._v(" "),a("p",[t._v("Mpx提供了三种维度的条件编译，分别是文件维度，区块维度和代码维度，用户可以根据平台差异的覆盖范围灵活选择使用。")]),t._v(" "),a("h2",{attrs:{id:"性能优化"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#性能优化"}},[t._v("#")]),t._v(" 性能优化")]),t._v(" "),a("p",[t._v("Mpx框架专注于小程序开发，在性能优化方面我们做过很多尝试和努力，主要集中在两个方面：")]),t._v(" "),a("ul",[a("li",[t._v("运行时的setData优化")]),t._v(" "),a("li",[t._v("编译构建时的包体积优化")])]),t._v(" "),a("h3",{attrs:{id:"setdata优化"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setdata优化"}},[t._v("#")]),t._v(" setData优化")]),t._v(" "),a("p",[t._v("数据响应是Mpx运行时增强的核心能力，该能力让用户在小程序开发中能够像Vue中一样使用watch和computed特性，并且用直接赋值的方式操作数据驱动视图更新，而不需要手动调用setData方法，换言之框架接管了小程序中的setData调用。")]),t._v(" "),a("p",[t._v("通过各大小程序平台的设计原理和性能优化建议可以得知，setData对于小程序的性能表现非常重要，而setData优化的两大方向在于：")]),t._v(" "),a("ul",[a("li",[t._v("尽可能减少setData调用的频次")]),t._v(" "),a("li",[t._v("尽可能减少单次setData传输的数据")])]),t._v(" "),a("p",[t._v("为了实现setData的优化，我们在模板编译过程中对于每个组件的模板都生成了一个渲染函数(render function)，该函数模拟模板的渲染逻辑，在每次执行时访问当次渲染所需的数据，并将当次访问过的数据路径记录下来作为函数返回值返回。")]),t._v(" "),a("p",[t._v("在运行时，框架会在每个组件创建时创建一个render watcher，该watcher追踪渲染函数，当渲染依赖数据发生变更时异步执行渲染函数，在render watcher回调中得到渲染函数返回的数据路径，基于这些路径与上一次的缓存数据进行diff比对，过滤掉未发生变化的数据后得到最小必要数据，最后调用setData将最小必要数据发送到真实的小程序渲染层更新视图。")]),t._v(" "),a("p",[t._v("基于这个机制，当数据发生变更时，只有当前渲染依赖的那部分数据发生变更才会异步地触发render watcher的执行，而每次执行后也只有实际发生变更的那部分数据会被setData发送到渲染层。这样用户就能自由地根据业务需求来操作数据，无需关注setData的调用优化，框架能够自动进行程序上最优的setData调用，在提升用户开发体验的同时也提升了程序性能。")]),t._v(" "),a("p",[t._v("在1.x版本中，渲染函数内无法执行wxs的逻辑，对于含有wxs的组件有可能降级到全量设置数据的模式，在2.0版本中，我们将wxs模块转译处理为js可执行的代码后注入到js bundle中，含有wxs的渲染函数也能够正常访问并执行wxs逻辑。")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/9ead35f1-693f-44f4-beb3-f98555ab6861.png",alt:"setData优化示意图"}})]),t._v(" "),a("p",[a("em",[t._v("setData优化示意图")])]),t._v(" "),a("h3",{attrs:{id:"包体积优化"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#包体积优化"}},[t._v("#")]),t._v(" 包体积优化")]),t._v(" "),a("p",[t._v("类似于运行时对于setData的接管，Mpx在编译阶段接管了项目的资源管理。得益于webpack强大的插件机制，Mpx开发了一个深度定制的webpack插件，基于webpack完成小程序的打包构建工作。用户在使用Mpx开发小程序时可以不受限制地使用npm依赖、最新的es特性和css预处理器等现代web开发能力。与此同时，Mpx在包体积优化上也做了很多工作，让用户专注于业务开发而无需花费过多精力进行包体积管理，我们所做的优化工作如下：")]),t._v(" "),a("ul",[a("li",[t._v("打包构建工作完全基于依赖分析，任何没有被引用的资源都不会出现在dist当中；")]),t._v(" "),a("li",[t._v("对于npm组件和页面的构建也完全基于依赖分析按需打包，不会copy整个miniprogram_dist目录，也不需要执行构建npm，使用体验和包体积均优于微信小程序自身的npm支持方案；")]),t._v(" "),a("li",[t._v("基于webpack提供的能力进行公共模块抽取和代码压缩等优化工作；")]),t._v(" "),a("li",[t._v("完善的分包支持，对所有资源进行从属分析，将所有分包only的资源都输出到分包目录中。")])]),t._v(" "),a("p",[t._v("分包作为微信小程序中优化包体积的核心手段(类似于异步按需加载)，Mpx对其进行了完善的支持。为了精确地标记出分包only的资源，我们在构建时将主包和分包的依赖收集步骤拆分开来串行处理，先处理主包，再处理分包。在主包的处理过程中，将主包页面中引用的所有非js资源(组件、外部样式、外部模板、wxs，图像媒体等)都记录下来，在处理分包时，对分包内引用的非js资源都进行检查，如果被主包引用过则输出到主包中，否则标记为分包only的资源输出到分包目录下。")]),t._v(" "),a("p",[t._v("对于js模块资源，我们在脚手架中生成的构建配置中提供了辅助函数，便于用户进行分包bundle的配置，经过该配置后，分包only的公用模块会被打入分包bundle输出到分包目录下，其余的公共模块会正常打入主bundle中。")]),t._v(" "),a("p",[t._v("在跨平台开发中，我们建议用户使用Mpx提供的"),a("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#packages"}},[t._v("packages")]),t._v("来定义分包，这样在转换到不支持分包的小程序平台时会自动降级为同步包进行处理。")],1),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/3121ca4e-1b47-43bc-992a-b351c4a03da4.png",alt:"分包构建示意图"}})]),t._v(" "),a("p",[a("em",[t._v("分包构建示意图")])]),t._v(" "),a("h2",{attrs:{id:"渐进迁移"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#渐进迁移"}},[t._v("#")]),t._v(" 渐进迁移")]),t._v(" "),a("p",[t._v("Mpx提供了良好的渐进迁移支持，对于使用原生或其他小程序框架的开发者来说，采用渐进迁移的方式逐步引入Mpx进行开发成本并不大。")]),t._v(" "),a("p",[t._v("在2.0版本中我们进一步完善了Mpx的原生兼容性，跟进支持了各个小程序平台最新的技术能力，如自定义tabbar，独立分包，分包预加载，workers，云开发等能力，同时补齐了一些1.x版本遗漏的支持。得益于此，对于使用原生小程序开发的开发者来说，迁移Mpx的成本几乎为0，用户只需将对应页面组件的构造函数替换为Mpx提供的createPage/createCompnent，即可使用Mpx提供的各种增强能力。")]),t._v(" "),a("p",[t._v("对于使用其他框架的开发者，Mpx也提供了局部构建的机制，允许用户将特定的页面和组件单独构建输出为原生组件，用户只需手动或者编写脚本输出的原生组件整合进原有项目中即可。")]),t._v(" "),a("h2",{attrs:{id:"未来规划"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#未来规划"}},[t._v("#")]),t._v(" 未来规划")]),t._v(" "),a("p",[t._v("作为滴滴公司内部小程序生态的基础设施，我们会对Mpx框架进行长期的维护更新，确保能在第一时间支持各个小程序平台最新的技术特性。与此同时，我们也会进一步完善框架的基础能力，目前已排上日程待支持能力包括：")]),t._v(" "),a("ul",[a("li",[t._v("i18n")]),t._v(" "),a("li",[t._v("ts支持")]),t._v(" "),a("li",[t._v("单元测试支持")])]),t._v(" "),a("p",[t._v("在跨平台能力方面，我们也会根据社区的反馈和建议，以及小程序的标准化进程，对其进行持续的完善与更新。")]),t._v(" "),a("p",[t._v("最后，如果你专注小程序开发，关注开发体验和产品性能，那Mpx会是你最好的选择。")])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/49.cde94a79.js b/docs-vuepress/.vuepress/dist/assets/js/49.cde94a79.js
deleted file mode 100644
index c058eaf38c..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/49.cde94a79.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{397:function(t,e,a){"use strict";a.r(e);var r=a(4),s=Object(r.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"mpx2-7-版本正式发布-大幅提升编译构建速度"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mpx2-7-版本正式发布-大幅提升编译构建速度"}},[t._v("#")]),t._v(" Mpx2.7 版本正式发布，大幅提升编译构建速度")]),t._v(" "),e("blockquote",[e("p",[t._v("作者："),e("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[t._v("hiyuki"),e("OutboundLink")],1)])]),t._v(" "),e("p",[e("a",{attrs:{href:"https://www.mpxjs.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx"),e("OutboundLink")],1),t._v("是一款开源的增强型跨端小程序框架，它具有良好的开发体验，极致的应用性能和一份源码同构输出所有小程序平台及web环境的跨端能力。近期，我们发布了框架最新的2.7版本，基于"),e("code",[t._v("webpack5")]),t._v("彻底重构了框架的核心编译构建流程，利用持久化缓存大幅提升了编译构建速度，最高提升可达10倍。除此之外，"),e("code",[t._v("Mpx2.7")]),t._v("版本还带来了一系列重要的功能更新，包括分包输出能力增强，完善的单元测试支持和用户Rules应用等，下面会对这些新特性进行逐个展开介绍。")]),t._v(" "),e("h2",{attrs:{id:"编译构建提速"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#编译构建提速"}},[t._v("#")]),t._v(" 编译构建提速")]),t._v(" "),e("p",[t._v('随着小程序生态的日渐发展壮大，各类线上小程序业务体量和复杂度的不断升级，小程序的包体积从最开始的2M以内膨胀到20M甚至30M，已经远远不复当初的"'),e("strong",[t._v("小")]),t._v('"程序之名。随着小程序项目大小的不断增加，采用框架进行小程序开发的开发者们往往都会面临一个问题，即框架的编译耗时过长，Mpx也不例外。')]),t._v(" "),e("p",[t._v("以团队负责的小程序项目为例，该项目目前的总包体积已经超过25M，包含近30000个JS模块，400多个页面和3000多个组件，在本地进行一次完整构建需要等待15分钟，CI环境下甚至需要近半个小时，远远超出能够忍受的范围，对小程序开发体验和开发效率造成了极大的影响。虽然旧版本中的watch模式能够在很大程度上缓解我们在开发调试过程中面临的编译耗时问题，但我们在日常开发中，仍然有很多场景无法使用watch模式（首次构建/CI环境/需真机预览等），基于内存缓存的watch模式也无法长期运行。对于这个问题，我们在过去也做了很多技术尝试，如支持watch:prod模式，局部编译，多线程编译，DLL预编译等等，但是整体尝试下来这些方案要么收效有限要么适用面不足，都没能探索到一个能从根本上解决问题的方案。")]),t._v(" "),e("p",[t._v("直到2020年底，"),e("code",[t._v("webpack5")]),t._v("正式发布，基于文件系统持久化缓存能力的出现，让我们看到了该问题的解决之道。由于webpack5相较于webpack4有着非常多的升级改动，而Mpx的编译构建在过去版本中也存在着各种历史遗留问题，我们花了较长的时间吃透webpack5的源码以及重新思考Mpx中存在的不合理设计。经过3个多月的开发，我们彻底重构了Mpx的核心编译构建流程，使其能够"),e("strong",[t._v("完整安全地")]),t._v("利用webpack5持久化缓存能力进行构建提速，同时也彻底解决了旧版Mpx中存在的历史遗留问题，在去年10月完成了beta版的开发与发布，并在业务中进行了初步的落地尝试。之后又经过2个多月的业务回归测试和框架功能补全，我们在beta版的基础上又迭代修复了近30个patch版本，在业务上完成了充分的回归测试，让我们确信目前的新版本已经达到了能够release的阶段。")]),t._v(" "),e("blockquote",[e("p",[t._v("为什么不是"),e("code",[t._v("Vite")])]),t._v(" "),e("p",[t._v("聊起编译提速，可能大部分人首先想到的是Vite，诚然Vite是一个极富创造力的技术方案，但是在小程序场景下，却不一定是最合适的方案，这主要源于Vite最核心的设计利用了现代浏览器原生支持的ESM，而目前没有任何一家的小程序环境能够原生支持ESM，这就使得Vite最核心的按需编译能力无法得到发挥，而Vite使用esbuild带来的编译速度提升，在webpack环境中也可以选择esbuild-loader提供的能力来替换babel/terser，而且目前esbuild提供的编译能力成熟度还远不能和babel/terser相比，再加上Mpx的编译构建流程很大程度上依赖了webpack提供的能力，从成本和收益上考虑采用webpack5对于我们来说无疑是更好的方案。")])]),t._v(" "),e("p",[t._v("以团队负责的小程序项目为例，我们来看一下Mpx2.7版本带来的编译提速效果：相较于旧版长达15分钟的构建耗时，在无缓存环境下，新版的构建耗时约为8分钟，速度提升了近1倍；而在有缓存环境下，新版构建耗时可以缩短至80s，速度提升了"),e("strong",[t._v("10倍以上")]),t._v("！随着我们对CI流程的持久化缓存改造完成，可以确保在日常的大部分构建场景都会在有缓存的环境下进行。")]),t._v(" "),e("h2",{attrs:{id:"分包输出能力增强"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#分包输出能力增强"}},[t._v("#")]),t._v(" 分包输出能力增强")]),t._v(" "),e("p",[t._v("在Mpx2.7版本中，我们对小程序分包能力的支持进行了进一步的完善增强。")]),t._v(" "),e("h3",{attrs:{id:"独立分包初始化模块"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#独立分包初始化模块"}},[t._v("#")]),t._v(" 独立分包初始化模块")]),t._v(" "),e("p",[t._v("在过去的版本中，我们对独立分包进行过专门的构建支持，以满足独立分包资源独占的要求。不过在使用独立分包进行业务开发时，往往会面临的一个棘手问题在于初始化逻辑无处安放。这是由于独立分包没有app.js，而在小程序中，组件的js逻辑会早于页面js执行，具体的执行顺序又和组件的嵌套关系有关，因此我们无法找到一个确定的代码位置来存放独立分包的初始化逻辑。")]),t._v(" "),e("p",[t._v("在Mpx2.7版本中，我们针对独立分包新增了一个全新的增强特性，让用户能够声明独立分包的初始化模块，该模块将会在独立分包启动时全局最先执行，其实现思路大致如下：在构建时为独立分包中所有的组件和页面都添加模块引用，指向用户声明的初始化模块，这样在独立分包启动时，不管哪个组件/页面的js最先执行，都能保障这个初始化模块最先执行，同时由于模块缓存的存在，后续的组件/页面执行时，该模块也不会被重复执行。")]),t._v(" "),e("p",[t._v("该特性的详细使用方式可以参考我们的"),e("a",{attrs:{href:"https://www.mpxjs.cn/guide/advance/subpackage.html#%E7%8B%AC%E7%AB%8B%E5%88%86%E5%8C%85",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档说明"),e("OutboundLink")],1)]),t._v(" "),e("h3",{attrs:{id:"分包异步化"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#分包异步化"}},[t._v("#")]),t._v(" 分包异步化")]),t._v(" "),e("p",[e("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("分包异步化"),e("OutboundLink")],1),t._v("是微信小程序在去年下半年提出的全新技术特性，该特性打破了传统分包只能引用自身和主包资源的规则限制，通过相关配置和声明，允许分包异步地引用其他分包内的资源，对于复杂小程序的包体积和加载性能优化具有极其重要的意义。")]),t._v(" "),e("p",[t._v("在过去，受限于小程序分包资源引用规则，Mpx在编译构建时对于跨分包共用的资源有两种处理策略，其一是将其输出到主包当中，让多个分包都能够通过主包访问，这种策略下可以达到总包体积最优，但是往往会对主包体积造成过大的压力。当主包超出2m限制时，我们就需要采用第二种策略，将这部分跨分包共用的资源冗余地输出到各自的分包中，消除其对于主包体积的占用。在实际的Mpx编译构建当中，这两种策略是同时存在的，具体什么时候采用哪种策略是根据资源类型和用户配置来决定的。")]),t._v(" "),e("p",[t._v("由于分包异步化技术打破了传统分包资源引用规则的限制，理想情况下我们可以做到主包不超限的同时总包无冗余，不过该技术目前也存在一些不足：一是跨平台支持度不佳，只有微信支持，不过据我们了解支付宝目前也在跟进中；二是对交互和体验会带来一些影响，同时存在业务改造成本，但这依然不妨碍该技术成为大型小程序优化包体积和加载性能的最优路径。")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/c7ac0180-6914-46c6-aaed-c1d3cface8e1.jpeg",alt:"分包异步化资源引用"}})]),t._v(" "),e("p",[t._v("我们在Mpx2.7版本中对分包异步化中最常用的"),e("code",[t._v("跨分包自定义组件引用")]),t._v("进行了完整支持，与原生小程序不同，Mpx中资源的分包归属不由源码位置决定，而是由资源引用关系决定，因此在跨分包资源引用的场景下，用户需要声明引用的资源属于哪个分包，简单使用示例如下：")]),t._v(" "),e("div",{staticClass:"language-json5 extra-class"},[e("pre",{pre:!0,attrs:{class:"language-json5"}},[e("code",[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"usingComponents"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过root query声明组件所属的分包，与packages语法下使用root query声明package所属分包的语义保持一致")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"button"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../subPackageA/components/button?root=subPackageA"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"list"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../subPackageB/components/full-list?root=subPackageB"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"simple-list"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/simple-list"')]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"componentPlaceholder"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"button"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"view"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"list"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"simple-list"')]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("详细使用方式可参考"),e("a",{attrs:{href:"https://www.mpxjs.cn/guide/advance/async-subpackage.html#%E5%88%86%E5%8C%85%E5%BC%82%E6%AD%A5%E5%8C%96",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档说明"),e("OutboundLink")],1)]),t._v(" "),e("p",[t._v("对于另一项"),e("code",[t._v("跨分包JS代码引用")]),t._v("能力的使用支持，我们目前也正在探索规划中，预计能在今年Q1内完成开发支持。")]),t._v(" "),e("h2",{attrs:{id:"单元测试支持"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#单元测试支持"}},[t._v("#")]),t._v(" 单元测试支持")]),t._v(" "),e("p",[t._v("Mpx自从20年开始就对单元测试有了初步的支持，但过去的单测方案在设计上存在一些缺陷，可用性不高，业务落地困难，在Mpx2.7版本中，我们设计了一套全新的技术方案，克服了原有方案中存在的所有问题，在可用性上得到了质的飞跃，新旧方案的对比如下：")]),t._v(" "),e("p",[t._v("旧方案：通过Mpx编译构建预先将完整的项目源码构建输出为原生小程序格式，再通过jest + miniprogram-simulate加载构建产出的原生小程序组件来执行测试case。该方案的优点在于编译流程统一，方案实现成本较低，缺点在于执行任何case都需要执行完整的构建流程，耗时较长；而且由于构建本身不基于jest进行，也无法使用jest提供的模块mock功能。")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/31756195-2734-4300-8ab4-8b1b7a7d8c8f.jpeg",alt:"旧版单测方案"}})]),t._v(" "),e("p",[t._v("新方案：我们fork了miniprogram-simulate仓库对其扩展了load mpx组件的能力，在资源加载的transform过程中通过mpx-jest插件将mpx组件编译为原生小程序组件，再将内容传递给miniprogram-simulate执行渲染并运行测试case。该方案中模块加载完全基于jest并能够实现组件的按需编译，完美规避旧方案中存在的问题，缺点在于编译流程基于jest api重构，与mpx基于webpack的编译流程独立，存在额外的维护成本，后续我们会将通用的编译逻辑抽离维护，在webpack和jest两侧复用。")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/5486308b-b844-402e-802f-f9cc08a07259.jpeg",alt:"新版单测方案"}})]),t._v(" "),e("p",[t._v("关于单元测试更详细的使用指南可参考"),e("a",{attrs:{href:"https://www.mpxjs.cn/guide/tool/unit-test.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档说明"),e("OutboundLink")],1)]),t._v(" "),e("p",[t._v("随着单测方案的完善，我们今年也会推动单元测试在小程序业务中全面落地，更好地保障代码质量与业务稳定。")]),t._v(" "),e("h2",{attrs:{id:"module-rules复用"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#module-rules复用"}},[t._v("#")]),t._v(" Module.rules复用")]),t._v(" "),e("p",[t._v("Mpx的单文件支持很大程度上参考了"),e("code",[t._v("vue-loader")]),t._v("的设计，在vue-loader@15版本前，对于单文件组件中各个区块(block)的loaders应用逻辑默认内置在loader当中，如需对某些区块进行自定义配置，需要向loader的options中传递额外的loader应用规则，无法复用webpack配置的"),e("code",[t._v("module.rules")]),t._v("中已经定义好的规则，这往往会导致我们需要在loader options和module.rules中维护重复的loader规则，同样的问题也存在于旧版的"),e("code",[t._v("mpx-loader")]),t._v("中。")]),t._v(" "),e("p",[t._v("在vue-loader@15版本发布之后，其通过克隆用户原始的rules的方式实现了module.rules的复用，用户不再需要往loader options中传递冗余的loaders规则，本次全新Mpx2.7版本也支持了该特性，我们使用了webpack提供的"),e("code",[t._v("matchResource")]),t._v("能力实现了module.rules的复用，该方案相较于clone rules的方式实现起来更加简洁优雅。")]),t._v(" "),e("p",[t._v("以上就是Mpx2.7版本的核心更新内容，目前使用脚手架工具创建的项目默认都会使用2.7版本，过往项目如需迁移升级可以查看"),e("a",{attrs:{href:"https://www.mpxjs.cn/guide/migrate/2.7.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这篇指南"),e("OutboundLink")],1),t._v("。")]),t._v(" "),e("h2",{attrs:{id:"即将到来的新特性"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#即将到来的新特性"}},[t._v("#")]),t._v(" 即将到来的新特性")]),t._v(" "),e("p",[t._v("以上就是我们本次Mpx2.7版本带来的全部特性，后续我们也有计划撰写一系列文章对其中的技术细节进行更加深入的分析与介绍，除了上面介绍到的特性外，我们还有一系列特性处于即将发布的状态：")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"https://github.com/didi/mpx/pull/919",target:"_blank",rel:"noopener noreferrer"}},[t._v("组件维度运行时渲染方案"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("a",{attrs:{href:"https://github.com/didi/mpx/pull/924",target:"_blank",rel:"noopener noreferrer"}},[t._v("页面局部构建能力"),e("OutboundLink")],1)]),t._v(" "),e("li",[t._v("E2E自动化测试能力")]),t._v(" "),e("li",[t._v("基于Vite构建输出web应用")]),t._v(" "),e("li",[t._v("跨端输出快手小程序")]),t._v(" "),e("li",[t._v("@mpxjs/fetch提供接口mock能力")])]),t._v(" "),e("h2",{attrs:{id:"未来规划"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#未来规划"}},[t._v("#")]),t._v(" 未来规划")]),t._v(" "),e("p",[t._v("未来，我们的工作重心将重新回到运行时，重点致力于"),e("code",[t._v("composition api")]),t._v("编码规范支持和数据响应系统的升级，在保障性能和包体积方面优势的同时，带给开发者用户与时俱进的开发体验。")]),t._v(" "),e("p",[t._v("在跨端方面，我们与"),e("a",{attrs:{href:"https://github.com/didi/Hummer",target:"_blank",rel:"noopener noreferrer"}},[t._v("移动端跨端框架Hummer"),e("OutboundLink")],1),t._v("进行了合作，初步探索了Mpx基于Hummer输出为移动端原生应用的可行性，目前整体流程已经基本跑通，待后续能力逐步完善和业务充分落地后，就会在开源版本中发布。")]),t._v(" "),e("p",[t._v("与此同时，"),e("code",[t._v("Mpx-cube-ui")]),t._v("小程序跨端组件库也在持续地开发完善中，目前业务落地效果良好，预计会在今年下半年正式开源。")])])}),[],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/5.12d049b6.js b/docs-vuepress/.vuepress/dist/assets/js/5.12d049b6.js
deleted file mode 100644
index 7f7e3b41d2..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/5.12d049b6.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[5,18,24],{301:function(t,e,s){},316:function(t,e,s){"use strict";s(301)},317:function(t,e,s){},320:function(t,e,s){},326:function(t,e,s){"use strict";s.r(e);var i={props:{dataList:{type:Array,default:()=>[]},height:{type:Number,default:152},autoPlay:{type:Boolean,default:!0},currentIndex:{type:Number,default:0},dot:{type:Boolean,default:!1}},data:()=>({msg:"",current:0,resut:[],allWidth:0,timer:0,prevCls:"swiper-disable",nextCls:"",offsetWidth:0,isMove:!1,timeout:0}),computed:{getStyle(){return`height: ${this.height}px;`},getMode(){return this.isMove?"transition: transform 0s;":"transition: transform 0.3s;"},getWidth(){return`width: ${this.offsetWidth}px;`}},mounted(){this.$nextTick(()=>{const t=this.$refs.container;this.offsetWidth=t.offsetWidth,this.autoPlay&&this.animationScroll(),window.addEventListener("resize",()=>{this.offsetWidth=t.offsetWidth},!1)}),this.touchInfo={clientX:0,clientY:0,moveX:0}},watch:{current(t){this.prevCls=0===t?"swiper-disable":"",t===this.dataList.length-1?this.nextCls="swiper-disable":this.nextCls=""}},methods:{animationScroll(){clearInterval(this.timer),this.timer=setInterval(()=>{this.handleNext()},3e3)},handlePrev(t){const e=this.$refs.wrapper;this.current--,-1===this.current&&(this.current=0),e.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,"off"!==t&&this.$emit("change",this.current)},handleNext(t){const e=this.$refs.wrapper;e&&(this.current++,this.current===this.dataList.length&&(this.current=0),e.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,"off"!==t&&this.$emit("change",this.current))},handleSelect(t){clearInterval(this.timer),clearTimeout(this.timeout),this.current=t;this.$refs.wrapper.style.transform=`translateX(${-this.current*this.offsetWidth}px)`,this.autoPlay&&(this.timeout=setTimeout(()=>{this.animationScroll()},3e3))},handleStart(t){clearInterval(this.timer),clearTimeout(this.timeout);const e=t.touches[0];this.touchInfo={clientX:e.clientX},this.isMove=!0},handleMove(t){const e=this.$refs.wrapper,s=t.touches[0].clientX-this.touchInfo.clientX,i=this.current*this.offsetWidth-s;e.style.transform=`translateX(${-i}px)`,this.touchInfo.moveX=s},handleEnd(){this.isMove=!1;const t=this.touchInfo.moveX||0;let e=0;e=Math.abs(t)<20?0:t<0?this.current===this.dataList.length-1?0:1:0===this.current?0:-1;const s=this.$refs.wrapper;switch(e){case 0:s.style.transform=`translateX(${-this.current*this.offsetWidth}px)`;break;case 1:this.handleNext();break;case-1:this.handlePrev()}this.touchInfo={},this.autoPlay&&(this.timeout=setTimeout(()=>{this.animationScroll()},3e3))}}},a=(s(316),s(4)),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("div",{ref:"container",staticClass:"swiper-container",style:t.getStyle},[e("div",{ref:"wrapper",staticClass:"swiper",style:t.getMode,on:{touchstart:t.handleStart,touchmove:t.handleMove,touchend:t.handleEnd}},t._l(t.dataList,(function(s,i){return e("div",{key:i,ref:"list",refInFor:!0,staticClass:"swiper-list",style:t.getWidth},[t._t("default",null,{item:s})],2)})),0),t._v(" "),t.dot?e("ul",{staticClass:"swiper-dot"},t._l(t.dataList,(function(s,i){return e("li",{key:i,staticClass:"swiper-icon",class:{active:t.current===i}})})),0):t._e()])}),[],!1,null,"ae3bb0ce",null);e.default=r.exports},333:function(t,e,s){"use strict";s(317)},336:function(t,e,s){"use strict";s(320)},352:function(t,e,s){"use strict";s.r(e);s(69);var i={components:{MobileSwiper:s(326).default},data:()=>({currentIndex:0,pageIndex:0,tempIndex:0}),computed:{list(){return this.$page.frontmatter.sixSection.details},multiList(){const t=this.$page.frontmatter.sevenSection.details,e=[];let s=[];for(let i=0;i<t.length;i++)i%4==0&&(s.length&&e.push(s),s=[]),s.push(t[i]);return s.length&&e.push(s),e},mvcList(){return this.$page.frontmatter.threeSection.list},dataList(){return this.$page.frontmatter.sevenSection.details}},methods:{handleChange(t){this.currentIndex=t>3?t%4:t,t>2&&(t%4==0&&t>this.tempIndex&&(this.$refs.multiPage.handleNext("off"),this.currentIndex=0),(t+1)%4==0&&t<this.tempIndex&&(this.$refs.multiPage.handlePrev("off"),this.currentIndex=3)),this.tempIndex=t},handleSelect(t){let e=4*this.pageIndex+t;this.tempIndex=e,this.currentIndex=t,this.$refs.multiImg.handleSelect(e)},handlePage(t){this.pageIndex=t,this.handleSelect(0)}}},a=(s(333),s(4)),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"m-banner-wrapper"},[e("div",{staticClass:"m-banner"},[e("div",{staticClass:"m-title"},[t._v(t._s(t.$page.frontmatter.heroText))]),t._v(" "),e("div",{staticClass:"m-subtitle"},[t._v("\n      "+t._s(t.$page.frontmatter.tagline)+"\n    ")]),t._v(" "),e("div",{staticClass:"m-banner-btn-wrapper"},[e("button",{staticClass:"m-banner-btn m-banner-btn-enter"},[e("a",{staticStyle:{"font-size":"15px"},attrs:{href:t.$page.frontmatter.actionLink}},[t._v("\n          "+t._s(t.$page.frontmatter.actionText)+"\n        ")])]),t._v(" "),e("div",{staticClass:"m-banner-btn m-banner-btn-jump"},[e("a",{staticClass:"white-link",attrs:{href:t.$page.frontmatter.githubLink}},[t._v("\n          "+t._s(t.$page.frontmatter.githubText)+"\n        ")])])]),t._v(" "),e("div",{staticClass:"m-banner-bg"})]),t._v(" "),e("div",{staticClass:"m-advantages"},t._l(t.$page.frontmatter.features,(function(s,i){return e("li",{key:i,staticClass:"m-advan-section"},[e("img",{staticClass:"m-advan-section-img",attrs:{src:s.micon,loading:"lazy",width:"34",height:"34"}}),t._v(" "),e("p",{staticClass:"m-advan-section-title"},[t._v(t._s(s.title))])])})),0),t._v(" "),e("div",{staticClass:"mdemo-wrapper"},[e("div",{staticClass:"mdemo-title"},[t._v(t._s(t.$page.frontmatter.threeSection.title))]),t._v(" "),t._m(0),t._v(" "),e("div",{staticClass:"mdemo-icon-wrapper"},t._l(t.mvcList,(function(t,s){return e("div",{key:s,staticStyle:{margin:"0 6px"}},[e("img",{attrs:{width:"130",height:"150",src:t.code,alt:"code",loading:"lazy"}})])})),0)]),t._v(" "),e("div",{staticClass:"m-feature-wrapper"},[e("div",{staticClass:"m-feature-title"},[t._v("\n      "+t._s(t.$page.frontmatter.fourSection.title)+"\n    ")]),t._v(" "),e("div",{staticClass:"m-feature-subtitle"},[t._v("\n      "+t._s(t.$page.frontmatter.fourSection.details)+"\n    ")]),t._v(" "),e("a",{staticClass:"m-feature-btn",attrs:{href:t.$page.frontmatter.fourSection.actionLink}},[t._v("\n      "+t._s(t.$page.frontmatter.fourSection.actionText)+"\n    ")]),t._v(" "),e("img",{staticClass:"m-feature-pic",attrs:{width:"100%",height:"309px",src:t.$page.frontmatter.fourSection.mimg,alt:"platform",loading:"lazy"}}),t._v(" "),e("div",{staticClass:"m-feature-title"},[t._v("\n      "+t._s(t.$page.frontmatter.fiveSection.title)+"\n    ")]),t._v(" "),e("div",{staticClass:"m-feature-subtitle"},[t._v("\n      "+t._s(t.$page.frontmatter.fiveSection.details)+"\n    ")]),t._v(" "),e("a",{staticClass:"m-feature-btn",attrs:{href:t.$page.frontmatter.fourSection.actionLink}},[t._v("\n      "+t._s(t.$page.frontmatter.fiveSection.actionText)+"\n    ")]),t._v(" "),e("img",{staticClass:"m-feature-pic",attrs:{width:"100%",height:"309px",src:t.$page.frontmatter.fiveSection.mimg,alt:"platform",loading:"lazy"}})]),t._v(" "),e("div",{staticClass:"m-util-wrapper"},[e("div",{staticClass:"m-util-title"},[t._v(t._s(t.$page.frontmatter.sixSection.title))]),t._v(" "),t._l(t.list,(function(s,i){return e("ul",{key:i,staticClass:"row six-section__row"},[e("a",{staticClass:"six-section__item six-section__step",attrs:{href:s.actionLink}},[e("img",{staticClass:"six-section__icon",attrs:{src:s.icon,alt:"svg",loading:"lazy",width:"50",height:"50"}}),t._v(" "),e("div",{staticClass:"six-section__list"},[e("div",{staticClass:"six-section__bold"},[t._v(t._s(s.title))]),t._v(" "),e("div",{staticClass:"six-section__subtitle"},[t._v(t._s(s.details))])])])])}))],2),t._v(" "),e("div",{staticClass:"m-example-wrapper"},[e("div",{staticClass:"m-example-title"},[t._v(t._s(t.$page.frontmatter.sevenSection.title))]),t._v(" "),e("div",{staticClass:"m-example-phone"},[e("img",{attrs:{width:"318",height:"318",src:"https://dpubstatic.udache.com/static/dpubimg/xxjYvzgJdt/y_bg_phone.png",alt:"phone"}}),t._v(" "),e("div",{staticClass:"m-example-img-contain"},[e("mobile-swiper",{ref:"multiImg",attrs:{height:390,dataList:t.dataList},on:{change:t.handleChange},scopedSlots:t._u([{key:"default",fn:function(t){return[e("div",{staticClass:"m-example-swiper"},[e("img",{staticStyle:{"border-radius":"20px"},attrs:{width:"180",src:t.item.demo,alt:"demo"}})])]}}])})],1)]),t._v(" "),e("mobile-swiper",{ref:"multiPage",attrs:{height:200,dot:!0,autoPlay:!1,dataList:t.multiList},on:{change:t.handlePage},scopedSlots:t._u([{key:"default",fn:function(s){return[e("div",{staticClass:"m-example-swiper"},t._l(s.item,(function(s,i){return e("div",{key:i,staticClass:"m-example-name",class:{active:t.currentIndex===i},on:{click:function(e){return t.handleSelect(i)}}},[t._v("\n              "+t._s(s.title)+"\n            ")])})),0)]}}])})],1)])}),[function(){var t=this._self._c;return t("p",{staticClass:"mdemo-subtitle"},[this._v("\n      扫码体验Mpx版本的\n      "),t("a",{staticClass:"target-link",attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC"}},[this._v("todoMVC")]),this._v("\n      在各个小程序平台和web中的一致表现 ，更多示例项目可点击\n      "),t("a",{staticClass:"target-link",attrs:{href:"https://github.com/didi/mpx/tree/master/examples"}},[this._v("这里")]),this._v("\n      进入查看。\n    ")])}],!1,null,"a2c0041c",null);e.default=r.exports},355:function(t,e,s){"use strict";s.r(e);var i={data:()=>({smallMode:!1}),components:{Popover:s(303).default},mounted(){const t=()=>{document.documentElement.clientWidth<719?this.smallMode=!0:this.smallMode=!1};t(),window.addEventListener("resize",t,!1)}},a=(s(336),s(4)),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"footer-container"},[e("footer",{staticClass:"footer"},[e("ul",{staticClass:"footer__list"},[t.smallMode?t._e():e("li",{staticClass:"grow"},[e("img",{attrs:{width:"180",src:"https://dpubstatic.udache.com/static/dpubimg/T1R-u2N8nn/footer_logo.png",alt:"logo"}})]),t._v(" "),e("li",{staticClass:"grow"},[e("ul",{staticClass:"footer-inner"},[e("li",{staticClass:"footer__wrap"},[e("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.resourcesList.title))])]),t._v(" "),t._l(t.$page.frontmatter.resourcesList.details,(function(s,i){return e("li",{key:i,staticClass:"footer__wrap"},[e("a",{staticClass:"footer__text",attrs:{href:s.actionLink,target:"_blank"}},[t._v(t._s(s.title))])])}))],2)]),t._v(" "),e("li",{staticClass:"grow"},[e("ul",{staticClass:"footer-inner"},[e("li",{staticClass:"footer__wrap"},[e("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.communityList.title))])]),t._v(" "),t._l(t.$page.frontmatter.communityList.details,(function(s,i){return e("li",{key:i,staticClass:"footer__wrap"},[s.img?e("popover",{attrs:{code:s.img}},[e("span",{staticClass:"footer__text",attrs:{target:"_blank"}},[t._v(t._s(s.title))])]):e("a",{staticClass:"footer__text",attrs:{href:s.img||s.actionLink,target:"_blank"}},[t._v(t._s(s.title))])],1)}))],2)]),t._v(" "),e("li",{staticClass:"grow"},[e("ul",{staticClass:"footer-inner"},[e("li",{staticClass:"footer__wrap"},[e("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.helpList.title))])]),t._v(" "),t._l(t.$page.frontmatter.helpList.details,(function(s,i){return e("li",{key:i,staticClass:"footer__wrap"},[e("a",{staticClass:"footer__text",attrs:{href:s.actionLink,target:"_blank"}},[t._v(t._s(s.title))])])}))],2)]),t._v(" "),e("li",{staticClass:"grow"},[e("ul",{staticClass:"footer-inner"},[e("li",{staticClass:"footer__wrap"},[e("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.moreList.title))])]),t._v(" "),t._l(t.$page.frontmatter.moreList.details,(function(s,i){return e("li",{key:i,staticClass:"footer__wrap"},[e("a",{staticClass:"footer__text",attrs:{href:s.actionLink,target:"_blank"}},[t._v(t._s(s.title))])])}))],2)])])]),t._v(" "),t._m(0)])}),[function(){var t=this._self._c;return t("div",{staticClass:"copyright"},[t("div",[this._v("备案号："),t("a",{attrs:{href:"https://beian.miit.gov.cn/"}},[this._v("蜀ICP备15023364号-2")])]),this._v(" "),t("div",[this._v("Copyright 2020 滴滴出行")])])}],!1,null,"f9ca297c",null);e.default=r.exports},379:function(t,e,s){"use strict";s.r(e);var i=s(70),a=s(352),r=s(370),n=s(355),o=s(357),l={components:{Navbar:i.default,Content:r.default,Footer:n.default,ParentLayout:o.a,MobileView:a.default},data:()=>({smallMode:!1}),mounted(){const t=()=>{document.documentElement.clientWidth<719?this.smallMode=!0:this.smallMode=!1};t(),window.addEventListener("resize",t,!1)},methods:{toggleSidebar(t){this.isSidebarOpen="boolean"==typeof t?t:!this.isSidebarOpen,this.$emit("toggle-sidebar",this.isSidebarOpen)}}},c=s(4),h=Object(c.a)(l,(function(){var t=this._self._c;return t("div",{staticClass:"container"},[t("Navbar"),this._v(" "),this.smallMode?t("mobile-view"):t("Content"),this._v(" "),t("Footer")],1)}),[],!1,null,"13a300a6",null);e.default=h.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/50.42e34e52.js b/docs-vuepress/.vuepress/dist/assets/js/50.42e34e52.js
deleted file mode 100644
index d88337835e..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/50.42e34e52.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{400:function(t,a,s){"use strict";s.r(a);var e=s(4),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"通过-mpx-使用组合式-api-进行小程序开发"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#通过-mpx-使用组合式-api-进行小程序开发"}},[t._v("#")]),t._v(" 通过 Mpx 使用组合式 API 进行小程序开发")]),t._v(" "),a("p",[t._v("滴滴开源小程序跨端框架 "),a("a",{attrs:{href:"https://www.mpxjs.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx"),a("OutboundLink")],1),t._v(" 自18年立项开源以来，如今已经进入第五个年头，期间 Mpx 在有效支持了公司内外小程序业务开发的同时，也因其高性能、优体验、跨平台的特性获得了开发者用户的一致好评。")]),t._v(" "),a("p",[t._v("为了不辜负开发者用户对我们的信赖，更好地支持小程序业务开发，一方面我们对 Mpx 的稳定版本进行着高频的维护迭代，快速响应处理开发者用户在框架使用过程中遇到的问题；另一方面我们持续跟进探索业内最新动态，力求带给用户更好的开发体验与更强大的开发能力。继我们在 "),a("a",{attrs:{href:"https://mpxjs.cn/guide/migrate/2.7.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("2.7 版本"),a("OutboundLink")],1),t._v("中对 Mpx 的编译系统进行 Webpack5 适配 ，完整支持持久化缓存并大幅提升编译速度后，在 "),a("a",{attrs:{href:"https://mpxjs.cn/guide/migrate/2.8.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("2.8 版本"),a("OutboundLink")],1),t._v("中，我们对 Mpx 的框架运行时也进行了重构改造，完整支持 Vue3 中的组合式 API 开发范式，让用户能够使用时下最热门的开发方式进行小程序业务开发。")]),t._v(" "),a("p",[t._v("我们先来简单感受一下组合式 API 的使用：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ collectionName }}: {{ book.title }}({{ readersNumber }})"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addReaders"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("addReaders"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("collectionName")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" readersNumber "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" book "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Mpx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Component mounted.'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 暴露给 template")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        readersNumber"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        book"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addReaders")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          readersNumber"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("可以看出和 Vue3 组合式 API 的使用是高度类似的，利用框架导出的一系列响应式 API 和 生命周期钩子函数在 "),a("code",[t._v("setup")]),t._v(" 中编写业务逻辑，并将模板依赖的数据与方法作为返回值返回，与传统的选项式 API 相比，组合式 API 具备以下优势：")]),t._v(" "),a("ul",[a("li",[t._v("更好的逻辑复用，通过函数包装复用逻辑，显式引入调用，方便简洁且符合直觉，规避消除了 mixins 复用中存在的缺陷；")]),t._v(" "),a("li",[t._v("更灵活的代码组织，相比于选项式 API 提前规定了代码的组织方式，组合式 API 在这方面几乎没有做任何限制与规定，更加灵活自由，在功能复杂的庞大组件中，我们能够通过组合式 API 让我们的功能代码更加内聚且有条理，不过这也会对开发者自身的代码规范意识提出更高要求；")]),t._v(" "),a("li",[t._v("更好的类型推导，虽然基于 "),a("code",[t._v("this")]),t._v(" 的选项式 API 通过 "),a("code",[t._v("ThisType")]),t._v(" 类型体操的方式也能在一定程度上实现 TS 类型推导，但推导和实现成本较高，同时仍然无法完美覆盖一些复杂场景（如嵌套 mixins 等）；而组合式 API 以本地变量和函数为基础，本身就是类型友好的，我们在类型方面几乎不需要做什么额外的工作就能享受到完美的类型推导。")])]),t._v(" "),a("p",[t._v("同时与 React Hooks 相比，组合式 API 中的 "),a("code",[t._v("setup")]),t._v(" 函数只在初始化时单次执行，在数据响应能力的加持下大大降低了理解与使用成本，基于以上原因，我们决定为 Mpx 添加组合式 API 能力，让用户能够用组合式 API 方式进行小程序开发。")]),t._v(" "),a("h2",{attrs:{id:"组合式-api-实现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-实现"}},[t._v("#")]),t._v(" 组合式 API 实现")]),t._v(" "),a("p",[t._v("从上面的简单示例中可以看出，抛开响应式 API 和生命周期注册模式的变化，组合式 API 的实现要点在于动态添加模板依赖的数据和方法，这也是我们在小程序中实现组合式 API 可能遇到的核心技术卡点。")]),t._v(" "),a("p",[t._v("对于动态添加模板依赖数据，我们在过去的实践中已经充分证明了其可行性，事实上，从 Mpx 最初的版本开始，我们就充分利用了这项能力来实现我们对计算属性和 "),a("code",[t._v("dataFn")]),t._v(" （类似于 Vue 使用函数定义 "),a("code",[t._v("data")]),t._v("）的支持，这项能力的关键在于存在合适的生命周期用于动态添加初始化数据，这里对于初始化数据的定义是能够影响组件树的初始渲染，举个简单的例子：存在一对父子组件 parent/child，parent 使用 "),a("code",[t._v("props")]),t._v(" 向 child 传递数据，当我们在 parent 初始创建时使用 "),a("code",[t._v("setData")]),t._v(" 动态添加 "),a("code",[t._v("props")]),t._v(" 数据，同时 child 在初始创建时能够通过 "),a("code",[t._v("props")]),t._v(" 正确获取到这部分的数据时，我们就可以将这部分动态添加的数据视作初始化数据，这是我们在小程序中实现完备数据响应支持的基础。")]),t._v(" "),a("p",[t._v("幸运的是，目前业内所有主流小程序平台（微信/支付宝/百度/字节/QQ）都支持了上述能力，微信从一开始就支持在 "),a("code",[t._v("attached")]),t._v(" 生命周期中调用 "),a("code",[t._v("setData")]),t._v(" 函数动态添加初始化数据，在上述的父子 "),a("code",[t._v("props")]),t._v(" 传递场景中，也能够在子组件的 "),a("code",[t._v("attached")]),t._v(" 中正确获取这部分数据，支付宝和字节小程序一开始并不支持该能力，不过支付宝在 "),a("code",[t._v("component2")]),t._v(" 组件系统重构后，字节在橙心合作项目中与我们沟通后，都成功支持了该能力。")]),t._v(" "),a("p",[t._v("而对于动态返回的方法，最简单能想到的方案就是直接挂载到组件实例上，经过我们的完整测试，上述业内主流小程序平台都支持使用这种方式动态添加方法，基于以上事实，我们非常确定组合式 API 能够在小程序环境中顺利实现，下图简要展示了 Mpx 支持组合式 API 的初始化流程：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/0bxxw8bB9PJxXLeiMQ__6_composition-api-init.png",alt:"composition-api-init"}})]),t._v(" "),a("h3",{attrs:{id:"生命周期钩子函数"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#生命周期钩子函数"}},[t._v("#")]),t._v(" 生命周期钩子函数")]),t._v(" "),a("p",[t._v("在组合式 API 中，"),a("code",[t._v("setup")]),t._v(" 函数只有在组件创建时初始化单次执行，因此需要提供一系列生命周期钩子函数来代替选项式 API 中的生命周期钩子选项，由于小程序原生只支持选项式的生命周期注册方式，我们通过"),a("code",[t._v("预注册 -> 驱动")]),t._v("的方式来实现 "),a("code",[t._v("setup")]),t._v(" 中函数式注册生命周期钩子的语法糖，简单来讲就是使用选项式 "),a("code",[t._v("mixins")]),t._v(" 的方式提前注册所有需要的生命周期钩子，在选项式生命周期钩子执行时驱动对应在 "),a("code",[t._v("setup")]),t._v(" 中使用生命周期钩子函数注册的代码逻辑执行，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/2nmOjxvubyk6H32yP5cFc_composition-api-hook.png",alt:"composition-api-hook"}})]),t._v(" "),a("p",[t._v("作为跨端小程序框架，Mpx 需要兼容不同小程序平台不同的生命周期，在选项式 API 中，我们在框架中内置了一套统一的生命周期，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异，如微信小程序的 "),a("code",[t._v("attached")]),t._v(" 钩子和支付宝小程序的 "),a("code",[t._v("onInit")]),t._v(" 钩子，在组合式 API 中，我们沿用了同样的逻辑，设计了一套与框架内置生命周期对应的生命周期钩子函数，以相同的方式进行驱动，因此这些生命周期钩子函数天然具备了跨平台特性，下表显示了在组件 / 页面中框架生命周期与原生平台生命周期的对应关系：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("框架内置生命周期")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("Hooks in "),a("code",[t._v("setup")])]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("微信原生")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("支付宝原生")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFORECREATE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")])]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("attached（数据响应初始化前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onInit（数据响应初始化前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("CREATED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")])]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("attached（数据响应初始化后）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onInit（数据响应初始化后）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREMOUNT")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeMount")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("ready（"),a("code",[t._v("MOUNTED")]),t._v(" 执行前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didMount（"),a("code",[t._v("MOUNTED")]),t._v(" 执行前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("MOUNTED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onMounted")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("ready（"),a("code",[t._v("BEFOREMOUNT")]),t._v(" 执行后）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didMount（"),a("code",[t._v("BEFOREMOUNT")]),t._v(" 执行后）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREUPDATE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeUpdate")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" 执行前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" 执行前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("UPDATED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onUpdated")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" callback）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" callback）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREUNMOUNT")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeUnmount")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("detached（数据响应销毁前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didUnmount（数据响应销毁前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("UNMOUNTED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onUnmounted")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("detached（数据响应销毁后）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didUnmount（数据响应销毁后）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONLOAD")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONSHOW")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONHIDE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONRESIZE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("events.onResize")])])])]),t._v(" "),a("blockquote",[a("p",[t._v("同 Vue3 一样，Mpx 在组合式 API 中没有提供 "),a("code",[t._v("BEFORECREATE")]),t._v(" 和 "),a("code",[t._v("CREATED")]),t._v(" 对应的生命周期钩子函数，用户可以直接在 "),a("code",[t._v("setup")]),t._v(" 中编写相关逻辑。")])]),t._v(" "),a("h4",{attrs:{id:"具有副作用的页面事件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#具有副作用的页面事件"}},[t._v("#")]),t._v(" 具有副作用的页面事件")]),t._v(" "),a("p",[t._v("在小程序中，一些页面事件的注册存在副作用，即该页面事件注册与否会产生实质性的影响，比如微信中的 "),a("code",[t._v("onShareAppMessage")]),t._v(" 和 "),a("code",[t._v("onPageScroll")]),t._v("，前者在不注册时会禁用当前页面的分享功能，而后者在注册时会带来视图与逻辑层之间的线程通信开销，对于这部分页面事件，我们无法通过"),a("code",[t._v("预注册 -> 驱动")]),t._v("方式提供组合式 API 的注册方式，用户可以通过选项式 API 的方式来注册使用，通过 "),a("code",[t._v("this")]),t._v(" 访问组合式 API "),a("code",[t._v("setup")]),t._v(" 函数的返回。")]),t._v(" "),a("p",[t._v("然而这种使用方式显然不够优雅，我们考虑是否可以通过一些非常规的方式提供这类副作用页面事件的组合式 API 注册支持，例如，借助编译手段。我们在运行时提供了副作用页面事件的注册函数，并在编译时通过 "),a("code",[t._v("babel")]),t._v(" 插件的方式解析识别到当前页面中存在这些特殊注册函数的调用时，通过框架已有的"),a("code",[t._v("编译 -> 运行时注入")]),t._v("的方式将事件驱动逻辑添加到当前页面当中，以提供相对优雅的副作用页面事件在组合式 API 中的注册方式，同时不产生非预期的副作用影响，简单示例如下：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onShareAppMessage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShareAppMessage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'页面分享'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      count\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("目前我们通过这种方式支持的页面事件如下：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("页面事件")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("Hooks in "),a("code",[t._v("setup")])]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("平台支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareAppMessage")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareAppMessage")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信/支付宝/百度/QQ")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onAddToFavorites")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onAddToFavorites")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信 / QQ")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareTimeline")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareTimeline")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onSaveExitState")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onSaveExitState")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信")])])])]),t._v(" "),a("blockquote",[a("p",[a("strong",[t._v("特别注意")]),t._v("，由于静态编译分析实现方式的限制，这类页面事件的组合式 API 使用需要满足页面事件注册函数（如"),a("code",[t._v("onShareAppMessage")]),t._v("）的调用和 "),a("code",[t._v("createPage")]),t._v(" 的调用位于同一个 js 文件当中。")])]),t._v(" "),a("p",[t._v("关于生命周期钩子函数的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h3",{attrs:{id:"script-setup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#script-setup"}},[t._v("#")]),t._v(" "),a("code",[t._v("<script setup>")])]),t._v(" "),a("p",[t._v("同 Vue3 一样，我们在 "),a("code",[t._v(".mpx")]),t._v(" 单文件组件 / 页面中实现了 "),a("code",[t._v("<script setup>")]),t._v(" 的组合式 API 编译语法糖，相较于常规的写法，"),a("code",[t._v("<script setup>")]),t._v(" 具备以下优势：")]),t._v(" "),a("ul",[a("li",[t._v("更少的样板内容，更简洁的代码")]),t._v(" "),a("li",[t._v("能够使用纯 TypeScript 声明 props 类型")]),t._v(" "),a("li",[t._v("更好的 IDE 类型推导性能")])]),t._v(" "),a("p",[t._v("简单使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" msg "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("msg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("msg: {{msg}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ontap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("log"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("可以看到使用方式与 Vue3 基本一致，不过由于 Mpx 的组合式 API 设计实现与 Vue3 存在差异，对应 "),a("code",[t._v("<script setup>")]),t._v(" 也与 Vue3 中存在一些差异：")]),t._v(" "),a("ul",[a("li",[t._v("不支持 "),a("code",[t._v("import")]),t._v(" 快捷注册组件")]),t._v(" "),a("li",[t._v("没有 "),a("code",[t._v("defineEmits()")]),t._v(" 编译宏")]),t._v(" "),a("li",[t._v("没有 "),a("code",[t._v("useSlots()")]),t._v(" 和 "),a("code",[t._v("useAttrs()")]),t._v(" 运行时函数")]),t._v(" "),a("li",[t._v("以编译宏的形式提供了 "),a("code",[t._v("useContext()")]),t._v("，获取 "),a("code",[t._v("setup")]),t._v(" 函数的第二个参数 "),a("code",[t._v("context")])]),t._v(" "),a("li",[a("code",[t._v("defineExpose()")]),t._v(" 编译宏的作用与 Vue3 中有所差别，能够限定模板中能访问的变量范围")])]),t._v(" "),a("blockquote",[a("p",[a("strong",[t._v("特别注意")]),t._v("，受小程序底层技术限制，我们在 Mpx 的实现中无法像 Vue3 那样将模板编译的渲染函数和 "),a("code",[t._v("<script setup>")]),t._v(" 放置到同一作用域下进行变量访问，而是通过静态编译分析提取出 "),a("code",[t._v("<script setup>")]),t._v(" 的顶层作用域变量，再以上文中提到的动态添加数据与方法的方式将其设置到模板当中，如果 "),a("code",[t._v("<script setup>")]),t._v(" 中声明了较多顶层作用域变量，它们并不一定都会被模板访问，就会带来无效的性能开销，因此我们强烈建议使用 "),a("code",[t._v("defineExpose()")]),t._v(" 限定模板中能访问的变量范围，你可以把它等同于 "),a("code",[t._v("setup")]),t._v(" 函数中的 "),a("code",[t._v("return")]),t._v("。")])]),t._v(" "),a("p",[t._v("关于 "),a("code",[t._v("<script setup>")]),t._v(" 的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h3",{attrs:{id:"组合式-api-与-vue3-中的差异"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-与-vue3-中的差异"}},[t._v("#")]),t._v(" 组合式 API 与 Vue3 中的差异")]),t._v(" "),a("p",[t._v("我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("setup")]),t._v(" 的 "),a("code",[t._v("context")]),t._v(" 参数不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#context",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("code",[t._v("setup")]),t._v(" 不支持返回"),a("strong",[t._v("渲染函数")])]),t._v(" "),a("li",[a("code",[t._v("setup")]),t._v(" 不能是异步函数")]),t._v(" "),a("li",[a("code",[t._v("<script setup>")]),t._v(" 提供的宏方法不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("code",[t._v("<script setup>")]),t._v(" 不支持 "),a("code",[t._v("import")]),t._v(" 快捷注册组件")]),t._v(" "),a("li",[t._v("支持的生命周期钩子不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("li",[t._v("模板引用的方式不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#template-ref",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)])]),t._v(" "),a("p",[t._v("关于组合式 API 的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"响应式-api-实现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api-实现"}},[t._v("#")]),t._v(" 响应式 API 实现")]),t._v(" "),a("p",[t._v("组合式 API 的正常工作离不开响应式 API 的支持，下面我们来聊聊 Mpx 中响应式 API 的设计实现。我们知道 Vue3 中响应式 API 基于 "),a("code",[t._v("proxy")]),t._v(" 进行了重构实现，但是目前 "),a("code",[t._v("proxy")]),t._v(" 的浏览器兼容占比仍然无法达到我们对于线上可用性的要求，因此在 Mpx 中，我们仍然基于 "),a("code",[t._v("Object.defineProperty")]),t._v(" 进行核心数据响应能力的实现，同时借鉴了 Vue3 中优秀的代码设计与实现，如 "),a("code",[t._v("reactiveEffect")]),t._v(" 和 "),a("code",[t._v("effectScope")]),t._v(" 等，尽可能实现与 Vue3 中响应式 API 能力对齐。")]),t._v(" "),a("p",[t._v("说到这里，很多同学可能会想到 "),a("code",[t._v("@vue/composition-api")]),t._v(" 这个库，该库提供的关键能力正是基于 Vue2 的数据响应系统模拟实现 Vue3 中的响应式 API，我们在前期也对 "),a("code",[t._v("@vue/composition-api")]),t._v(" 在 Mpx 中的复用进行了非常有价值的探索尝试。不过最终我们还是决定在 Mpx 的运行时框架中进行独立实现，原因主要在于："),a("code",[t._v("@vue/composition-api")]),t._v(" 是作为一个 Vue2 插件存在，无法直接侵入 Vue2 源码，导致部分能力无法实现或会带来额外的性能开销，例如 "),a("code",[t._v("flush: 'post'")]),t._v(" 和 "),a("code",[t._v("ref")]),t._v(" 自动解包等。我们也看到在最新的 Vue2.7 版本中，也是在运行时框架里重新实现了这部分内容，以规避上述问题。")]),t._v(" "),a("p",[t._v("下图展示了 Mpx 中响应式 API 核心模块依赖关系：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/4ySdEqTRhc_DRWWCJWrhJ_composition-api-reactive.png",alt:"composition-api-reactive"}})]),t._v(" "),a("h3",{attrs:{id:"数据响应限制带来的差异"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#数据响应限制带来的差异"}},[t._v("#")]),t._v(" 数据响应限制带来的差异")]),t._v(" "),a("p",[t._v("由于 "),a("code",[t._v("Object.defineProperty")]),t._v(" 的能力限制，Mpx 存在和 Vue2 一致的数据响应限制，无法感知到对象 property 的添加和删除以及数组的索引赋值，与 Vue2 一致，我们暴露了 "),a("code",[t._v("set")]),t._v(" 和 "),a("code",[t._v("del")]),t._v(" API 来让用户显式地进行相关操作。除此之外，由于使用方式发生了变化，我们在使用 "),a("code",[t._v("reactive")]),t._v(" API 创建响应式数据时，还会遇到新的限制，我们来看一下代码示例：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,1,2,3]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发 watchEffect")]),t._v("\n\nstate"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发 watchEffect")]),t._v("\n")])])]),a("p",[t._v("可以看出，即使我们使用了 "),a("code",[t._v("set")]),t._v(" API 和数组原型方法对数组进行修改，我们仍然无法监听到数据变化。")]),t._v(" "),a("blockquote",[a("p",[t._v("相同的限制在使用 "),a("code",[t._v("Object.defineProperty")]),t._v(" 的 Vue2.7 中也同样存在。")])]),t._v(" "),a("p",[t._v("为什么会存在这个限制呢？原因在于：基于 "),a("code",[t._v("Object.defineProperty")]),t._v(" 实现的数据响应系统中，我们会对对象的每个已有属性创建了一个 "),a("code",[t._v("Dep")]),t._v(" 对象，在对该属性进行 "),a("code",[t._v("get")]),t._v(" 访问时通过这个对象将其与依赖它的观察者 "),a("code",[t._v("ReactiveEffect")]),t._v(" 关联起来，并在 "),a("code",[t._v("set")]),t._v(" 操作时触发关联 "),a("code",[t._v("ReactiveEffect")]),t._v(" 的更新，这是我们大家都知道的数据响应的基本原理。但是对于新增/删除对象属性和修改数组的场景，我们无法事先定义当前不存在属性的 "),a("code",[t._v("get/set")]),t._v(" (当然这在 "),a("code",[t._v("proxy")]),t._v(" 当中是可行的)，因此我们会把对象或者数组本身作为一个数据依赖创建 "),a("code",[t._v("Dep")]),t._v(" 对象，"),a("strong",[t._v("通过父级访问")]),t._v("该数据时定义的 "),a("code",[t._v("get/set")]),t._v(" 将其关联到对应的 "),a("code",[t._v("ReactiveEffect")]),t._v("，并在对数据进行新增/删除属性或数组操作时通过数据本身持有的 "),a("code",[t._v("Dep")]),t._v(" 对象触发关联 "),a("code",[t._v("ReactiveEffect")]),t._v(" 的更新，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/XkI9cQBsLy_7np-T3rt56_composition-api-reactive2.png",alt:"数据响应原理"}})]),t._v(" "),a("p",[t._v("需要注意的是，"),a("strong",[t._v("通过父级访问")]),t._v("是建立 "),a("code",[t._v("Dep")]),t._v(" 与 "),a("code",[t._v("ReactiveEffect")]),t._v(" 关联关系的先决条件，在选项式 API 中，我们访问组件的响应式数据都需要通过 "),a("code",[t._v("this")]),t._v(" 进行访问，相当于这些数据都存在 "),a("code",[t._v("this")]),t._v(" 这个必要的"),a("strong",[t._v("父级")]),t._v("，因此我们在使用 "),a("code",[t._v("$set/$delete")]),t._v(" 进行对对象进行新增/删除属性或对数组进行修改时都能得到符合预期的结果，唯一的限制在于不能新增/删除根级数据属性，原因就在于 "),a("code",[t._v("this")]),t._v(" 不存在访问它的父级。")]),t._v(" "),a("p",[t._v("但是在组合式 API 中，我们不需要通过 "),a("code",[t._v("this")]),t._v(" 访问响应式数据，因此通过 "),a("code",[t._v("reactive()")]),t._v(" 创建的响应式数据本身就是根级数据，我们自然无法通过上述方式感知到根级数据自身的变化（在 Vue3 中，基于 "),a("code",[t._v("proxy")]),t._v(" 提供的强大能力响应式系统能够精确地感知到数据属性，甚至是当前不存在属性的访问与修改，不需要为数据自身建立 "),a("code",[t._v("Dep")]),t._v(" 对象，自然也不存在相关问题）。")]),t._v(" "),a("p",[t._v("在这种情况下，我们就需要用 "),a("code",[t._v("ref()")]),t._v(" 创建响应式数据，因为 "),a("code",[t._v("ref")]),t._v(" 创建了一个包装对象，我们永远需要通过 "),a("code",[t._v(".value")]),t._v(" 来访问其持有的数据（不管是显式访问还是隐式自动解包），这样就能保证 "),a("code",[t._v("ref")]),t._v(" 数据自身的变化能够被响应式系统感知，因此也不会遇到上面描述的问题，如下所示：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,1,2,3]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,3,2,3]")]),t._v("\n\nstate"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,3,2,3,4]")]),t._v("\n")])])]),a("h3",{attrs:{id:"响应式-api-与-vue3-中的区别"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api-与-vue3-中的区别"}},[t._v("#")]),t._v(" 响应式 API 与 Vue3 中的区别")]),t._v(" "),a("p",[t._v("我们来总结一下 Mpx 中响应式 API 与 Vue3 中的区别：")]),t._v(" "),a("ul",[a("li",[t._v("不支持 "),a("code",[t._v("raw")]),t._v(" 相关 API（"),a("code",[t._v("markRaw")]),t._v(" 除外，我们提供了该 API 用于跳过部分数据的响应式转换）")]),t._v(" "),a("li",[t._v("不支持 "),a("code",[t._v("readonly")]),t._v(" 相关 API")]),t._v(" "),a("li",[t._v("不支持 "),a("code",[t._v("watchEffect")]),t._v("、"),a("code",[t._v("watch")]),t._v("、"),a("code",[t._v("computed")]),t._v(" 的调试选项")]),t._v(" "),a("li",[t._v("不支持对 "),a("code",[t._v("map")]),t._v("、"),a("code",[t._v("set")]),t._v(" 等集合类型进行响应式转换")]),t._v(" "),a("li",[t._v("受到 "),a("code",[t._v("Object.defineProperty")]),t._v(" 实现带来的数据响应限制影响")])]),t._v(" "),a("p",[t._v("关于响应式 API 的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/reactive-api.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"生态周边适配"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#生态周边适配"}},[t._v("#")]),t._v(" 生态周边适配")]),t._v(" "),a("p",[t._v("除了 Mpx 运行时核心提供了组合式 API 支持外，我们对 Mpx 的周边生态能力也都进行了组合式 API 适配支持，包括 "),a("code",[t._v("store")]),t._v("、"),a("code",[t._v("i18n")]),t._v("、"),a("code",[t._v("fetch")]),t._v(" 等。")]),t._v(" "),a("h3",{attrs:{id:"pinia-store-支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pinia-store-支持"}},[t._v("#")]),t._v(" Pinia store 支持")]),t._v(" "),a("p",[t._v("Pinia 是基于组合式 API 设计的全新数据管理方案，目前已经取代 Vuex 成为 Vue3 官方推荐的 store，我们在研究了 pinia 的设计实现后，对其简练优雅的设计思想及其与组合式 API 的高度适配非常满意（特别是在使用 "),a("code",[t._v("setup")]),t._v(" 函数创建 store 时，使用心智与编写组件完全一致，可以将其视作是没有视图的组件）。因此我们 fork 了 pinia 的源码仓库，基于 Mpx 提供的数据响应能力对其进行了适配改造，使其在 Mpx 环境下也能正常运行，目前相关代码维护在 "),a("code",[t._v("@mpxjs/pinia")]),t._v(" 中，在组合式 API 中的简单使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineStore "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用组合式 API 创建 pinia store 的使用心智与 setup 函数完全一致，强烈推荐")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" useSetupStore "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineStore")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setup'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" doubleCount "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" increment "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("useSetupStore")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// store 同 props 类似是一个 reactive 对象，解构数据需使用 toRefs 以保持数据响应性")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("store"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 方法可以直接解构")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" increment "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store\n  \n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" increment "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Mpx 中通过 "),a("code",[t._v("createStore")]),t._v(" 创建的类 Vuex store 在组合式 API 中仍然可以使用，我们可以在 "),a("code",[t._v("setup")]),t._v(" 函数中引用 store 实例进行"),a("a",{attrs:{href:"https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api",target:"_blank",rel:"noopener noreferrer"}},[t._v("数据读取与方法调用"),a("OutboundLink")],1),t._v("，不过整体使用体验与 pinia store 存在较大差距，我们还是推荐在组合式 API 开发中优先使用 pinia store 作为数据管理方案。")]),t._v(" "),a("h3",{attrs:{id:"i18n-支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#i18n-支持"}},[t._v("#")]),t._v(" I18n 支持")]),t._v(" "),a("p",[t._v("传统选项式 API 中，我们使用 "),a("code",[t._v("this.$t")]),t._v(" 方法在组件内调用翻译函数，但在组合式 API 中我们无法访问 "),a("code",[t._v("this")]),t._v("，为此我们参考了 Vue I18n 最新的 9.x 版本，该版本针对 Vue3 及组合式 API 进行了重构适配，提供了全新的 "),a("code",[t._v("useI18n")]),t._v(" API，简单使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('message.hello')}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("changeLocale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("change locale"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// useI18n 不传参数时指向全局 i18n 对象，也可以传递 locale 和 messages 配置创建局部 i18n 对象")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" locale "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("changeLocale")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回的翻译方法名必须为 t，不能进行重命名")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" changeLocale "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("blockquote",[a("p",[t._v("上面示例代码看上去像是我们在模板上直接调用 setup() 返回的 t 翻译方法，但是熟悉小程序开发的同学都知道在小程序架构下这是不可能的，示例中的写法其实由框架通过编译 + 运行时手段实现的语法糖，我们会在模板编译时定向扫描 t/te/tm 等 i18n 方法，将其转换为计算属性注入到运行时当中，这就意味着如果我们对翻译方法进行重命名，模板编译时无法识别出 i18n 方法调用，自然也就无法正常运行。")])]),t._v(" "),a("p",[t._v("Mpx 中 i18n 提供了两种实现模式，分别是 wxs 和 computed，可以使用编译选项中的 "),a("code",[t._v("i18n.isComputed")]),t._v(" 进行切换，两种方式各有优劣，其中：")]),t._v(" "),a("ul",[a("li",[t._v("wxs 模式的优势在于逻辑层和视图层独立维护语言集，无额外运行时性能开销，且使用没有任何限制；劣势同样源于语言集同时存在于逻辑层（js）和视图层（wxs）当中，这部分的包体积占用翻倍；")]),t._v(" "),a("li",[t._v("computed 模式的优势在于语言集只存在于逻辑层中，无额外包体积占用，且可以通过动态添加语言集的方式进一步减少包体积占用；劣势则是会产生额外的运行时性能开销，且使用上存在限制，模板调用时无法直接访问 "),a("code",[t._v("wx:for")]),t._v(" 中的 "),a("code",[t._v("item")]),t._v(" 和 "),a("code",[t._v("index")]),t._v("。")])]),t._v(" "),a("p",[t._v("在组合式 API 中模板上使用 "),a("code",[t._v("useI18n()")]),t._v(" 返回的翻译函数 "),a("code",[t._v("t/te/tm")]),t._v(" 时，为了完整实现 "),a("code",[t._v("useI18n")]),t._v(" API的功能，会强制使用 computed 模式进行实现，这也意味着该用法会受到 computed 模式使用限制的影响。不过当你不需要使用 "),a("code",[t._v("useI18n")]),t._v(" 接受 "),a("code",[t._v("messages")]),t._v(" 参数创建局部语言集作用域功能时，你也完全可以在模板中继续使用原有的 "),a("code",[t._v("$t/$tc/$te/$tm")]),t._v(" 方法，这些方法受编译选项 "),a("code",[t._v("i18n.isComputed")]),t._v(" 的影响，同时指向全局语言集作用域。")]),t._v(" "),a("p",[t._v("更多关于生态周边的组合式 API 使用指南可以点击下方链接查看详情：")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api",target:"_blank",rel:"noopener noreferrer"}},[t._v("store"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://mpxjs.cn/guide/advance/i18n.html#composition-api-usage",target:"_blank",rel:"noopener noreferrer"}},[t._v("i18n"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://mpxjs.cn/guide/extend/fetch.html#composition-api-usage",target:"_blank",rel:"noopener noreferrer"}},[t._v("fetch"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"输出-web-适配"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#输出-web-适配"}},[t._v("#")]),t._v(" 输出 web 适配")]),t._v(" "),a("p",[t._v("跨端输出 web 作为 Mpx 的一大核心特性，在业务中存在广泛使用，同时也是我们设计实现任何框架新特性需要优先考虑的事项。在本次组合式 API 支持中，我们从设计之初就考虑了跨端输出 web 的适配支持，保障使用 Mpx 组合式 API 开发的业务代码都能在 web 环境中正常运行。")]),t._v(" "),a("p",[t._v("我们输出 web 的整体技术方向在于尽可能复用 Vue 已有的生态能力，为了实现这个目标，我们需要提供尽可能与 Vue 保持一致的 API 设计，以降低抹平适配成本。在输出 web 时，核心组合式 API 基于 Vue2.7 版本中的已有能力进行适配提供，简单举个例子：对于 "),a("code",[t._v("import { ref } from 'mpxjs/core'")]),t._v(" 这行语句，在小程序中会指向 Mpx 内部维护的 "),a("code",[t._v("ref")]),t._v(" 实现，而在输出 web 时会指向 Vue 中维护的 "),a("code",[t._v("ref")]),t._v(" 实现，两者的实现虽然不仅相同，但只要保障对外函数签名一致，对于开发者用户来说就无感知。")]),t._v(" "),a("p",[t._v("我们借助了 Mpx 强大的条件编译能力进行上述实现，对运行时导出根据输出平台进行重定向，这样还能保障跨端输出产物干净简洁，仅包含当前输出环境下必要的逻辑，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/E0FojaPKOxZOa5h5OEPQk_composition-api-web.png",alt:"composition-api-web"}})]),t._v(" "),a("p",[t._v("同理，我们也采用了类似的方式实现了组合式 API 周边能力对于输出 web 的适配支持，如pinia store 使用 pinia 原始版本进行适配实现，而 i18n 能力则是使用 vue-i18n@8.x + vue-i18n-bridge 进行适配实现。")]),t._v(" "),a("h2",{attrs:{id:"性能表现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#性能表现"}},[t._v("#")]),t._v(" 性能表现")]),t._v(" "),a("p",[t._v("性能是 Mpx 一直以来的核心关注点，我们对组合式 API 的最终实现版本进行了一系列性能评估测试，我们使用组合式 API 版本对业务中的评价组件进行了重构，评价组件属于我们业务中交互及功能相对比较复杂的组件，源码行数约 1000 行，组件数据 27 项，组件方法 18 个，我们在测试项目中对选项式 API 和组合式 API 两个版本实现的组件进行了一系列测试。")]),t._v(" "),a("h3",{attrs:{id:"组件初始化耗时"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件初始化耗时"}},[t._v("#")]),t._v(" 组件初始化耗时")]),t._v(" "),a("p",[t._v("由于组合式 API 改变了原有的组件初始化流程，我们对组件的初始化耗时进行了重点测试，测试口径如下：")]),t._v(" "),a("ul",[a("li",[t._v("耗时计算以挂载组件为起点，以组件 "),a("code",[t._v("ready")]),t._v(" 执行为终点")]),t._v(" "),a("li",[t._v("测试结果为10次手工测试排除最大最小值后求均值")]),t._v(" "),a("li",[t._v("IOS 测试机型为 iPhone 13 pro max，安卓测试机型为 OPPO R9")])]),t._v(" "),a("p",[t._v("结果显示两个版本的组件初始化耗时大抵持平，不分优劣。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th"),t._v(" "),a("th",[t._v("IOS")]),t._v(" "),a("th",[t._v("安卓")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("选项式 API")]),t._v(" "),a("td",[t._v("42.5ms")]),t._v(" "),a("td",[t._v("366.6ms")])]),t._v(" "),a("tr",[a("td",[t._v("组合式 API")]),t._v(" "),a("td",[t._v("42.4ms")]),t._v(" "),a("td",[t._v("370.1ms")])])])]),t._v(" "),a("h3",{attrs:{id:"组件-js-体积"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件-js-体积"}},[t._v("#")]),t._v(" 组件 JS 体积")]),t._v(" "),a("p",[t._v("在构建产物体积方面，由于组合式 API 的写法对于 JS 代码压缩更加有利，同样的逻辑实现下，组合式 API 版本的组件构建压缩后 JS 体积略胜一筹。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th"),t._v(" "),a("th",[t._v("组件 JS 体积")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("选项式 API")]),t._v(" "),a("td",[t._v("15.67KB")])]),t._v(" "),a("tr",[a("td",[t._v("组合式 API")]),t._v(" "),a("td",[t._v("13.60KB")])])])]),t._v(" "),a("h3",{attrs:{id:"框架运行时体积"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#框架运行时体积"}},[t._v("#")]),t._v(" 框架运行时体积")]),t._v(" "),a("p",[t._v("在 Mpx2.8 版本中，我们在框架运行时中新增了组合式 API 相关实现，不过通过优化运行时导出，使其对 tree shaking 更加友好，我们的框架运行时体积在实际构建产物中没有产生太大增长。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th"),t._v(" "),a("th",[t._v("框架运行时体积")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("选项式 API")]),t._v(" "),a("td",[t._v("51.66KB")])]),t._v(" "),a("tr",[a("td",[t._v("组合式 API")]),t._v(" "),a("td",[t._v("57.47KB")])])])]),t._v(" "),a("p",[t._v("综上所述，组合式 API 版本的运行时性能与选项式 API 大抵持平，在包体积占用方面，新版框架运行时体积占用略有提升，不过由于组合式 API 开发模式对代码压缩更友好，加上组合式 API 更易进行逻辑复用的特点，我们预计在实际业务项目中，组合式 API 的包体积占用会更小。")]),t._v(" "),a("h2",{attrs:{id:"破坏性改变"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#破坏性改变"}},[t._v("#")]),t._v(" 破坏性改变")]),t._v(" "),a("p",[t._v("Mpx 组合式 API 版本完全兼容原有的选项式 API 开发方式，不过我们在运行时重构过程中依然带来了少量的破坏性改变，详情如下：")]),t._v(" "),a("ul",[a("li",[t._v("框架过往提供的组件增强生命周期 "),a("code",[t._v("pageShow/pageHide")]),t._v(" 与微信原生提供的 "),a("code",[t._v("pageLifetimes.show/hide")]),t._v(" 完全对齐，不再提供组件初始挂载时必定执行 "),a("code",[t._v("pageShow")]),t._v(" 的保障（因为组件可能在后台页面进行挂载），相关初始化逻辑一定不要放置在 "),a("code",[t._v("pageShow")]),t._v(" 当中；")]),t._v(" "),a("li",[t._v("取消了框架过去提供的基于内部生命周期实现的非标准增强生命周期，如 "),a("code",[t._v("beforeCreate/onBeforeCreate")]),t._v(" 等，直接将内部生命周期变量导出提供给用户使用，详情查看"),a("a",{attrs:{href:"https://mpxjs.cn/api/global-api.html#built-in-lifecycle-variable",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v(";")]),t._v(" "),a("li",[t._v("为了优化 tree shaking，作为框架运行时 "),a("code",[t._v("default export")]),t._v(" 的 "),a("code",[t._v("Mpx")]),t._v(" 对象不再挂载 "),a("code",[t._v("createComponent/createStore")]),t._v(" 等运行时方法，一律通过 "),a("code",[t._v("named export")]),t._v(" 提供，"),a("code",[t._v("Mpx")]),t._v(" 对象上仅保留 "),a("code",[t._v("set/use")]),t._v(" 等全局 API，详情查看"),a("a",{attrs:{href:"https://mpxjs.cn/api/global-api.html#global-mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("；")]),t._v(" "),a("li",[t._v("使用 I18n 能力时，为了与新版 vue-i18n 保持对齐，"),a("code",[t._v("this.$i18n")]),t._v(" 对象指向全局作用域，如需创建局部作用域需要使用组合式 API "),a("code",[t._v("useI18n")]),t._v(" 的方式进行创建。")]),t._v(" "),a("li",[a("code",[t._v("watch")]),t._v(" API 不再接受第二个参数为带有 "),a("code",[t._v("handler")]),t._v(" 属性的对象形式（该参数形式只应存在于 "),a("code",[t._v("watch")]),t._v(" option 中），第二个参数必须为回调函数，与 "),a("a",{attrs:{href:"https://vuejs.org/api/reactivity-core.html#watch",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue"),a("OutboundLink")],1),t._v(" 对齐。")])]),t._v(" "),a("p",[t._v("更详细的迁移指南请点击查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/migrate/2.8.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"未来规划"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#未来规划"}},[t._v("#")]),t._v(" 未来规划")]),t._v(" "),a("p",[t._v("目前 Mpx2.8 版本已经在以滴滴出行小程序和花小猪小程序为代表的集团小程序业务中稳定全面落地，并在新的业务迭代中大范围使用了组合式 API，使用反馈良好，在社区内也产出了多个成功案例。")]),t._v(" "),a("p",[t._v("在完成持久化构建缓存和组合式 API 两个重大技术升级后，我们未来的技术规划如下：")]),t._v(" "),a("ul",[a("li",[t._v("组合式 API 工具库 @mpxjs/use")]),t._v(" "),a("li",[t._v("内置原子类支持")]),t._v(" "),a("li",[t._v("输出 web 支持 SSR")]),t._v(" "),a("li",[t._v("输出 web 支持使用 Vite 构建")]),t._v(" "),a("li",[t._v("跨端输出 Hummer 合入主干正式 release")]),t._v(" "),a("li",[t._v("优化运行时 render 函数，降低包体积占用")]),t._v(" "),a("li",[t._v("跨端库 @mpxjs/cube-ui 开源")])]),t._v(" "),a("p",[t._v("最后，再次感谢所有参与 Mpx 组合式 API 技术建设的同学们，也欢迎社区同学一同加入 Mpx 项目开源共建。")])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/51.90dfa84e.js b/docs-vuepress/.vuepress/dist/assets/js/51.90dfa84e.js
deleted file mode 100644
index de06ba1e2c..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/51.90dfa84e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{398:function(t,a,s){"use strict";s.r(a);var e=s(4),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"mpx2-8-版本正式发布-使用组合式-api-开发小程序"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mpx2-8-版本正式发布-使用组合式-api-开发小程序"}},[t._v("#")]),t._v(" Mpx2.8 版本正式发布，使用组合式 API 开发小程序")]),t._v(" "),a("blockquote",[a("p",[t._v("作者："),a("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[t._v("hiyuki"),a("OutboundLink")],1)])]),t._v(" "),a("p",[t._v("小程序跨端开发框架 "),a("a",{attrs:{href:"https://www.mpxjs.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx"),a("OutboundLink")],1),t._v(" 自18年立项开源以来，如今已经走过了第四个年头，其高性能、优体验、跨平台的特性收获了公司内外开发者用户的一致好评。")]),t._v(" "),a("p",[t._v("为了不辜负开发者用户对我们的信赖，更好地支持集团小程序业务开发，一方面我们对 Mpx 的稳定版本进行着高频的维护迭代，快速响应处理集团内外开发者用户在框架开发使用过程中遇到的问题；另一方面我们持续跟进探索业内最新动态，力争将更新更好的开发能力与体验带给小程序开发者用户。继年初我们在 "),a("a",{attrs:{href:"https://mpxjs.cn/guide/migrate/2.7.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("2.7 版本"),a("OutboundLink")],1),t._v("中对 Mpx 的编译系统进行重构适配 Webpack5，基于持久化缓存大幅提升编译速度后，在最新的 "),a("a",{attrs:{href:"https://mpxjs.cn/guide/migrate/2.8.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("2.8 版本"),a("OutboundLink")],1),t._v("中，我们对 Mpx 的运行时框架也进行了大量重构改造工作，完整支持了 Vue3 提出的组合式 API 开发范式，让用户能够使用当下最热门的开发方式进行小程序开发，我们先来简单感受一下组合式 API 的使用：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ collectionName }}: {{ book.title }}({{ readersNumber }})"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addReaders"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("addReaders"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("collectionName")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" readersNumber "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" book "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Mpx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Component mounted.'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 暴露给 template")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        readersNumber"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        book"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addReaders")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          readersNumber"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("可以看出和 Vue3 组合式 API 的使用是高度类似的，利用框架导出的一系列响应式 API 和 生命周期钩子函数在 "),a("code",[t._v("setup")]),t._v(" 中编写业务逻辑，并将模板依赖的数据与方法作为返回值返回，与传统的选项式 API 相比，组合式 API 具备以下优势：")]),t._v(" "),a("ul",[a("li",[t._v("更好的逻辑复用，通过函数包装复用逻辑，显式引入调用，方便简洁且符合直觉，规避消除了 mixins 复用中存在的缺陷；")]),t._v(" "),a("li",[t._v("更灵活的代码组织，相比于选项式 API 提前规定了代码的组织方式，组合式 API 在这方面几乎没有做任何限制与规定，更加灵活自由，在功能复杂的庞大组件中，我们能够通过组合式 API 让我们的功能代码更加内聚且有条理，不过这也会对开发者自身的代码规范意识提出更高要求；")]),t._v(" "),a("li",[t._v("更好的类型推导，虽然基于 "),a("code",[t._v("this")]),t._v(" 的选项式 API 通过 "),a("code",[t._v("ThisType")]),t._v(" 类型体操的方式也能在一定程度上实现 TS 类型推导，但推导和实现成本较高，同时仍然无法完美覆盖一些复杂场景（如嵌套 mixins 等）；而组合式 API 以本地变量和函数为基础，本身就是类型友好的，我们在类型方面几乎不需要做什么额外的工作就能享受到完美的类型推导。")])]),t._v(" "),a("p",[t._v("同时与 React Hooks 相比，组合式 API 中的 "),a("code",[t._v("setup")]),t._v(" 函数只在初始化时单次执行，在数据响应能力的加持下大大降低了理解与使用成本，基于以上原因，我们决定为 Mpx 添加组合式 API 能力，让用户能够用组合式 API 方式进行小程序开发。")]),t._v(" "),a("h2",{attrs:{id:"组合式-api-实现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-实现"}},[t._v("#")]),t._v(" 组合式 API 实现")]),t._v(" "),a("p",[t._v("从上面的简单示例中可以看出，抛开响应式 API 和生命周期注册模式的变化，组合式 API 的实现要点在于动态添加模板依赖的数据和方法，这也是我们在小程序中实现组合式 API 可能遇到的核心技术卡点。")]),t._v(" "),a("p",[t._v("对于动态添加模板依赖数据，我们在过去的实践中已经充分证明了其可行性，事实上，从 Mpx 最初的版本开始，我们就充分利用了这项能力来实现我们对计算属性和 "),a("code",[t._v("dataFn")]),t._v(" （类似于 Vue 使用函数定义 "),a("code",[t._v("data")]),t._v("）的支持，这项能力的关键在于存在合适的生命周期用于动态添加初始化数据，这里对于初始化数据的定义是能够影响组件树的初始渲染，举个简单的例子：存在一对父子组件 parent/child，parent 使用 "),a("code",[t._v("props")]),t._v(" 向 child 传递数据，当我们在 parent 初始创建时使用 "),a("code",[t._v("setData")]),t._v(" 动态添加 "),a("code",[t._v("props")]),t._v(" 数据，同时 child 在初始创建时能够通过 "),a("code",[t._v("props")]),t._v(" 正确获取到这部分的数据时，我们就可以将这部分动态添加的数据视作初始化数据，这是我们在小程序中实现完备数据响应支持的基础。")]),t._v(" "),a("p",[t._v("幸运的是，目前业内所有主流小程序平台（微信/支付宝/百度/字节/QQ）都支持了上述能力，微信从一开始就支持在 "),a("code",[t._v("attached")]),t._v(" 生命周期中调用 "),a("code",[t._v("setData")]),t._v(" 函数动态添加初始化数据，在上述的父子 "),a("code",[t._v("props")]),t._v(" 传递场景中，也能够在子组件的 "),a("code",[t._v("attached")]),t._v(" 中正确获取这部分数据，支付宝和字节小程序一开始并不支持该能力，不过支付宝在 "),a("code",[t._v("component2")]),t._v(" 组件系统重构后，字节在橙心合作项目中与我们沟通后，都成功支持了该能力。")]),t._v(" "),a("p",[t._v("而对于动态返回的方法，最简单能想到的方案就是直接挂载到组件实例上，经过我们的完整测试，上述业内主流小程序平台都支持使用这种方式动态添加方法，基于以上事实，我们非常确定组合式 API 能够在小程序环境中顺利实现，下图简要展示了 Mpx 支持组合式 API 的初始化流程：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/0bxxw8bB9PJxXLeiMQ__6_composition-api-init.png",alt:"composition-api-init"}})]),t._v(" "),a("h3",{attrs:{id:"生命周期钩子函数"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#生命周期钩子函数"}},[t._v("#")]),t._v(" 生命周期钩子函数")]),t._v(" "),a("p",[t._v("在组合式 API 中，"),a("code",[t._v("setup")]),t._v(" 函数只有在组件创建时初始化单次执行，因此需要提供一系列生命周期钩子函数来代替选项式 API 中的生命周期钩子选项，由于小程序原生只支持选项式的生命周期注册方式，我们通过"),a("code",[t._v("预注册 -> 驱动")]),t._v("的方式来实现 "),a("code",[t._v("setup")]),t._v(" 中函数式注册生命周期钩子的语法糖，简单来讲就是使用选项式 "),a("code",[t._v("mixins")]),t._v(" 的方式提前注册所有需要的生命周期钩子，在选项式生命周期钩子执行时驱动对应在 "),a("code",[t._v("setup")]),t._v(" 中使用生命周期钩子函数注册的代码逻辑执行，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/2nmOjxvubyk6H32yP5cFc_composition-api-hook.png",alt:"composition-api-hook"}})]),t._v(" "),a("p",[t._v("作为跨端小程序框架，Mpx 需要兼容不同小程序平台不同的生命周期，在选项式 API 中，我们在框架中内置了一套统一的生命周期，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异，如微信小程序的 "),a("code",[t._v("attached")]),t._v(" 钩子和支付宝小程序的 "),a("code",[t._v("onInit")]),t._v(" 钩子，在组合式 API 中，我们沿用了同样的逻辑，设计了一套与框架内置生命周期对应的生命周期钩子函数，以相同的方式进行驱动，因此这些生命周期钩子函数天然具备了跨平台特性，下表显示了在组件 / 页面中框架生命周期与原生平台生命周期的对应关系：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("框架内置生命周期")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("Hooks in "),a("code",[t._v("setup")])]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("微信原生")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("支付宝原生")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFORECREATE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")])]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("attached（数据响应初始化前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onInit（数据响应初始化前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("CREATED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")])]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("attached（数据响应初始化后）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onInit（数据响应初始化后）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREMOUNT")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeMount")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("ready（"),a("code",[t._v("MOUNTED")]),t._v(" 执行前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didMount（"),a("code",[t._v("MOUNTED")]),t._v(" 执行前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("MOUNTED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onMounted")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("ready（"),a("code",[t._v("BEFOREMOUNT")]),t._v(" 执行后）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didMount（"),a("code",[t._v("BEFOREMOUNT")]),t._v(" 执行后）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREUPDATE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeUpdate")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" 执行前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" 执行前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("UPDATED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onUpdated")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" callback）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[a("code",[t._v("null")]),t._v("（"),a("code",[t._v("setData")]),t._v(" callback）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREUNMOUNT")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeUnmount")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("detached（数据响应销毁前）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didUnmount（数据响应销毁前）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("UNMOUNTED")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onUnmounted")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("detached（数据响应销毁后）")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("didUnmount（数据响应销毁后）")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONLOAD")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONSHOW")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONHIDE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("ONRESIZE")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("events.onResize")])])])]),t._v(" "),a("blockquote",[a("p",[t._v("同 Vue3 一样，Mpx 在组合式 API 中没有提供 "),a("code",[t._v("BEFORECREATE")]),t._v(" 和 "),a("code",[t._v("CREATED")]),t._v(" 对应的生命周期钩子函数，用户可以直接在 "),a("code",[t._v("setup")]),t._v(" 中编写相关逻辑。")])]),t._v(" "),a("h4",{attrs:{id:"具有副作用的页面事件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#具有副作用的页面事件"}},[t._v("#")]),t._v(" 具有副作用的页面事件")]),t._v(" "),a("p",[t._v("在小程序中，一些页面事件的注册存在副作用，即该页面事件注册与否会产生实质性的影响，比如微信中的 "),a("code",[t._v("onShareAppMessage")]),t._v(" 和 "),a("code",[t._v("onPageScroll")]),t._v("，前者在不注册时会禁用当前页面的分享功能，而后者在注册时会带来视图与逻辑层之间的线程通信开销，对于这部分页面事件，我们无法通过"),a("code",[t._v("预注册 -> 驱动")]),t._v("方式提供组合式 API 的注册方式，用户可以通过选项式 API 的方式来注册使用，通过 "),a("code",[t._v("this")]),t._v(" 访问组合式 API "),a("code",[t._v("setup")]),t._v(" 函数的返回。")]),t._v(" "),a("p",[t._v("然而这种使用方式显然不够优雅，我们考虑是否可以通过一些非常规的方式提供这类副作用页面事件的组合式 API 注册支持，例如，借助编译手段。我们在运行时提供了副作用页面事件的注册函数，并在编译时通过 "),a("code",[t._v("babel")]),t._v(" 插件的方式解析识别到当前页面中存在这些特殊注册函数的调用时，通过框架已有的"),a("code",[t._v("编译 -> 运行时注入")]),t._v("的方式将事件驱动逻辑添加到当前页面当中，以提供相对优雅的副作用页面事件在组合式 API 中的注册方式，同时不产生非预期的副作用影响，简单示例如下：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onShareAppMessage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShareAppMessage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'页面分享'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      count\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("目前我们通过这种方式支持的页面事件如下：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("页面事件")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("Hooks in "),a("code",[t._v("setup")])]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("平台支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareAppMessage")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareAppMessage")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信/支付宝/百度/QQ")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onAddToFavorites")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onAddToFavorites")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信 / QQ")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareTimeline")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onShareTimeline")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onSaveExitState")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("onSaveExitState")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("微信")])])])]),t._v(" "),a("blockquote",[a("p",[a("strong",[t._v("特别注意")]),t._v("，由于静态编译分析实现方式的限制，这类页面事件的组合式 API 使用需要满足页面事件注册函数（如"),a("code",[t._v("onShareAppMessage")]),t._v("）的调用和 "),a("code",[t._v("createPage")]),t._v(" 的调用位于同一个 js 文件当中。")])]),t._v(" "),a("p",[t._v("关于生命周期钩子函数的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h3",{attrs:{id:"script-setup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#script-setup"}},[t._v("#")]),t._v(" "),a("code",[t._v("<script setup>")])]),t._v(" "),a("p",[t._v("同 Vue3 一样，我们在 "),a("code",[t._v(".mpx")]),t._v(" 单文件组件 / 页面中实现了 "),a("code",[t._v("<script setup>")]),t._v(" 的组合式 API 编译语法糖，相较于常规的写法，"),a("code",[t._v("<script setup>")]),t._v(" 具备以下优势：")]),t._v(" "),a("ul",[a("li",[t._v("更少的样板内容，更简洁的代码")]),t._v(" "),a("li",[t._v("能够使用纯 TypeScript 声明 props 类型")]),t._v(" "),a("li",[t._v("更好的 IDE 类型推导性能")])]),t._v(" "),a("p",[t._v("简单使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" msg "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("msg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("msg: {{msg}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ontap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("log"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("可以看到使用方式与 Vue3 基本一致，不过由于 Mpx 的组合式 API 设计实现与 Vue3 存在差异，对应 "),a("code",[t._v("<script setup>")]),t._v(" 也与 Vue3 中存在一些差异：")]),t._v(" "),a("ul",[a("li",[t._v("不支持 "),a("code",[t._v("import")]),t._v(" 快捷注册组件")]),t._v(" "),a("li",[t._v("没有 "),a("code",[t._v("defineEmits()")]),t._v(" 编译宏")]),t._v(" "),a("li",[t._v("没有 "),a("code",[t._v("useSlots()")]),t._v(" 和 "),a("code",[t._v("useAttrs()")]),t._v(" 运行时函数")]),t._v(" "),a("li",[t._v("以编译宏的形式提供了 "),a("code",[t._v("useContext()")]),t._v("，获取 "),a("code",[t._v("setup")]),t._v(" 函数的第二个参数 "),a("code",[t._v("context")])]),t._v(" "),a("li",[a("code",[t._v("defineExpose()")]),t._v(" 编译宏的作用与 Vue3 中有所差别，能够限定模板中能访问的变量范围")])]),t._v(" "),a("blockquote",[a("p",[a("strong",[t._v("特别注意")]),t._v("，受小程序底层技术限制，我们在 Mpx 的实现中无法像 Vue3 那样将模板编译的渲染函数和 "),a("code",[t._v("<script setup>")]),t._v(" 放置到同一作用域下进行变量访问，而是通过静态编译分析提取出 "),a("code",[t._v("<script setup>")]),t._v(" 的顶层作用域变量，再以上文中提到的动态添加数据与方法的方式将其设置到模板当中，如果 "),a("code",[t._v("<script setup>")]),t._v(" 中声明了较多顶层作用域变量，它们并不一定都会被模板访问，就会带来无效的性能开销，因此我们强烈建议使用 "),a("code",[t._v("defineExpose()")]),t._v(" 限定模板中能访问的变量范围，你可以把它等同于 "),a("code",[t._v("setup")]),t._v(" 函数中的 "),a("code",[t._v("return")]),t._v("。")])]),t._v(" "),a("p",[t._v("关于 "),a("code",[t._v("<script setup>")]),t._v(" 的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h3",{attrs:{id:"组合式-api-与-vue3-中的差异"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-与-vue3-中的差异"}},[t._v("#")]),t._v(" 组合式 API 与 Vue3 中的差异")]),t._v(" "),a("p",[t._v("我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("setup")]),t._v(" 的 "),a("code",[t._v("context")]),t._v(" 参数不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#context",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("code",[t._v("setup")]),t._v(" 不支持返回"),a("strong",[t._v("渲染函数")])]),t._v(" "),a("li",[a("code",[t._v("setup")]),t._v(" 不能是异步函数")]),t._v(" "),a("li",[a("code",[t._v("<script setup>")]),t._v(" 提供的宏方法不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#script-setup",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("code",[t._v("<script setup>")]),t._v(" 不支持 "),a("code",[t._v("import")]),t._v(" 快捷注册组件")]),t._v(" "),a("li",[t._v("支持的生命周期钩子不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#lifecycle-hooks",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("li",[t._v("模板引用的方式不同，详见"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html#template-ref",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)])]),t._v(" "),a("p",[t._v("关于组合式 API 的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/composition-api.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"响应式-api-实现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api-实现"}},[t._v("#")]),t._v(" 响应式 API 实现")]),t._v(" "),a("p",[t._v("组合式 API 的正常工作离不开响应式 API 的支持，下面我们来聊聊 Mpx 中响应式 API 的设计实现。我们知道 Vue3 中响应式 API 基于 "),a("code",[t._v("proxy")]),t._v(" 进行了重构实现，但是目前 "),a("code",[t._v("proxy")]),t._v(" 的浏览器兼容占比仍然无法达到我们对于线上可用性的要求，因此在 Mpx 中，我们仍然基于 "),a("code",[t._v("Object.defineProperty")]),t._v(" 进行核心数据响应能力的实现，同时借鉴了 Vue3 中优秀的代码设计与实现，如 "),a("code",[t._v("reactiveEffect")]),t._v(" 和 "),a("code",[t._v("effectScope")]),t._v(" 等，尽可能实现与 Vue3 中响应式 API 能力对齐。")]),t._v(" "),a("p",[t._v("说到这里，很多同学可能会想到 "),a("code",[t._v("@vue/composition-api")]),t._v(" 这个库，该库提供的关键能力正是基于 Vue2 的数据响应系统模拟实现 Vue3 中的响应式 API，我们在前期也对 "),a("code",[t._v("@vue/composition-api")]),t._v(" 在 Mpx 中的复用进行了非常有价值的探索尝试。不过最终我们还是决定在 Mpx 的运行时框架中进行独立实现，原因主要在于："),a("code",[t._v("@vue/composition-api")]),t._v(" 是作为一个 Vue2 插件存在，无法直接侵入 Vue2 源码，导致部分能力无法实现或会带来额外的性能开销，例如 "),a("code",[t._v("flush: 'post'")]),t._v(" 和 "),a("code",[t._v("ref")]),t._v(" 自动解包等。我们也看到在最新的 Vue2.7 版本中，也是在运行时框架里重新实现了这部分内容，以规避上述问题。")]),t._v(" "),a("p",[t._v("下图展示了 Mpx 中响应式 API 核心模块依赖关系：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/4ySdEqTRhc_DRWWCJWrhJ_composition-api-reactive.png",alt:"composition-api-reactive"}})]),t._v(" "),a("h3",{attrs:{id:"数据响应限制带来的差异"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#数据响应限制带来的差异"}},[t._v("#")]),t._v(" 数据响应限制带来的差异")]),t._v(" "),a("p",[t._v("由于 "),a("code",[t._v("Object.defineProperty")]),t._v(" 的能力限制，Mpx 存在和 Vue2 一致的数据响应限制，无法感知到对象 property 的添加和删除以及数组的索引赋值，与 Vue2 一致，我们暴露了 "),a("code",[t._v("set")]),t._v(" 和 "),a("code",[t._v("del")]),t._v(" API 来让用户显式地进行相关操作。除此之外，由于使用方式发生了变化，我们在使用 "),a("code",[t._v("reactive")]),t._v(" API 创建响应式数据时，还会遇到新的限制，我们来看一下代码示例：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,1,2,3]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发 watchEffect")]),t._v("\n\nstate"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发 watchEffect")]),t._v("\n")])])]),a("p",[t._v("可以看出，即使我们使用了 "),a("code",[t._v("set")]),t._v(" API 和数组原型方法对数组进行修改，我们仍然无法监听到数据变化。")]),t._v(" "),a("blockquote",[a("p",[t._v("相同的限制在使用 "),a("code",[t._v("Object.defineProperty")]),t._v(" 的 Vue2.7 中也同样存在。")])]),t._v(" "),a("p",[t._v("为什么会存在这个限制呢？原因在于：基于 "),a("code",[t._v("Object.defineProperty")]),t._v(" 实现的数据响应系统中，我们会对对象的每个已有属性创建了一个 "),a("code",[t._v("Dep")]),t._v(" 对象，在对该属性进行 "),a("code",[t._v("get")]),t._v(" 访问时通过这个对象将其与依赖它的观察者 "),a("code",[t._v("ReactiveEffect")]),t._v(" 关联起来，并在 "),a("code",[t._v("set")]),t._v(" 操作时触发关联 "),a("code",[t._v("ReactiveEffect")]),t._v(" 的更新，这是我们大家都知道的数据响应的基本原理。但是对于新增/删除对象属性和修改数组的场景，我们无法事先定义当前不存在属性的 "),a("code",[t._v("get/set")]),t._v(" (当然这在 "),a("code",[t._v("proxy")]),t._v(" 当中是可行的)，因此我们会把对象或者数组本身作为一个数据依赖创建 "),a("code",[t._v("Dep")]),t._v(" 对象，"),a("strong",[t._v("通过父级访问")]),t._v("该数据时定义的 "),a("code",[t._v("get/set")]),t._v(" 将其关联到对应的 "),a("code",[t._v("ReactiveEffect")]),t._v("，并在对数据进行新增/删除属性或数组操作时通过数据本身持有的 "),a("code",[t._v("Dep")]),t._v(" 对象触发关联 "),a("code",[t._v("ReactiveEffect")]),t._v(" 的更新，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/XkI9cQBsLy_7np-T3rt56_composition-api-reactive2.png",alt:"数据响应原理"}})]),t._v(" "),a("p",[t._v("需要注意的是，"),a("strong",[t._v("通过父级访问")]),t._v("是建立 "),a("code",[t._v("Dep")]),t._v(" 与 "),a("code",[t._v("ReactiveEffect")]),t._v(" 关联关系的先决条件，在选项式 API 中，我们访问组件的响应式数据都需要通过 "),a("code",[t._v("this")]),t._v(" 进行访问，相当于这些数据都存在 "),a("code",[t._v("this")]),t._v(" 这个必要的"),a("strong",[t._v("父级")]),t._v("，因此我们在使用 "),a("code",[t._v("$set/$delete")]),t._v(" 进行对对象进行新增/删除属性或对数组进行修改时都能得到符合预期的结果，唯一的限制在于不能新增/删除根级数据属性，原因就在于 "),a("code",[t._v("this")]),t._v(" 不存在访问它的父级。")]),t._v(" "),a("p",[t._v("但是在组合式 API 中，我们不需要通过 "),a("code",[t._v("this")]),t._v(" 访问响应式数据，因此通过 "),a("code",[t._v("reactive()")]),t._v(" 创建的响应式数据本身就是根级数据，我们自然无法通过上述方式感知到根级数据自身的变化（在 Vue3 中，基于 "),a("code",[t._v("proxy")]),t._v(" 提供的强大能力响应式系统能够精确地感知到数据属性，甚至是当前不存在属性的访问与修改，不需要为数据自身建立 "),a("code",[t._v("Dep")]),t._v(" 对象，自然也不存在相关问题）。")]),t._v(" "),a("p",[t._v("在这种情况下，我们就需要用 "),a("code",[t._v("ref()")]),t._v(" 创建响应式数据，因为 "),a("code",[t._v("ref")]),t._v(" 创建了一个包装对象，我们永远需要通过 "),a("code",[t._v(".value")]),t._v(" 来访问其持有的数据（不管是显式访问还是隐式自动解包），这样就能保证 "),a("code",[t._v("ref")]),t._v(" 数据自身的变化能够被响应式系统感知，因此也不会遇到上面描述的问题，如下所示：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,1,2,3]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,3,2,3]")]),t._v("\n\nstate"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,3,2,3,4]")]),t._v("\n")])])]),a("h3",{attrs:{id:"响应式-api-与-vue3-中的区别"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api-与-vue3-中的区别"}},[t._v("#")]),t._v(" 响应式 API 与 Vue3 中的区别")]),t._v(" "),a("p",[t._v("我们来总结一下 Mpx 中响应式 API 与 Vue3 中的区别：")]),t._v(" "),a("ul",[a("li",[t._v("不支持 "),a("code",[t._v("raw")]),t._v(" 相关 API（"),a("code",[t._v("markRaw")]),t._v(" 除外，我们提供了该 API 用于跳过部分数据的响应式转换）")]),t._v(" "),a("li",[t._v("不支持 "),a("code",[t._v("readonly")]),t._v(" 相关 API")]),t._v(" "),a("li",[t._v("不支持 "),a("code",[t._v("watchEffect")]),t._v("、"),a("code",[t._v("watch")]),t._v("、"),a("code",[t._v("computed")]),t._v(" 的调试选项")]),t._v(" "),a("li",[t._v("不支持对 "),a("code",[t._v("map")]),t._v("、"),a("code",[t._v("set")]),t._v(" 等集合类型进行响应式转换")]),t._v(" "),a("li",[t._v("受到 "),a("code",[t._v("Object.defineProperty")]),t._v(" 实现带来的数据响应限制影响")])]),t._v(" "),a("p",[t._v("关于响应式 API 的更多信息可以查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/composition-api/reactive-api.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"生态周边适配"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#生态周边适配"}},[t._v("#")]),t._v(" 生态周边适配")]),t._v(" "),a("p",[t._v("除了 Mpx 运行时核心提供了组合式 API 支持外，我们对 Mpx 的周边生态能力也都进行了组合式 API 适配支持，包括 "),a("code",[t._v("store")]),t._v("、"),a("code",[t._v("i18n")]),t._v("、"),a("code",[t._v("fetch")]),t._v(" 等。")]),t._v(" "),a("h3",{attrs:{id:"pinia-store-支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pinia-store-支持"}},[t._v("#")]),t._v(" Pinia store 支持")]),t._v(" "),a("p",[t._v("Pinia 是基于组合式 API 设计的全新数据管理方案，目前已经取代 Vuex 成为 Vue3 官方推荐的 store，我们在研究了 pinia 的设计实现后，对其简练优雅的设计思想及其与组合式 API 的高度适配非常满意（特别是在使用 "),a("code",[t._v("setup")]),t._v(" 函数创建 store 时，使用心智与编写组件完全一致，可以将其视作是没有视图的组件）。因此我们 fork 了 pinia 的源码仓库，基于 Mpx 提供的数据响应能力对其进行了适配改造，使其在 Mpx 环境下也能正常运行，目前相关代码维护在 "),a("code",[t._v("@mpxjs/pinia")]),t._v(" 中，在组合式 API 中的简单使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineStore "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用组合式 API 创建 pinia store 的使用心智与 setup 函数完全一致，强烈推荐")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" useSetupStore "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineStore")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setup'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" doubleCount "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" increment "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("useSetupStore")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// store 同 props 类似是一个 reactive 对象，解构数据需使用 toRefs 以保持数据响应性")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("store"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 方法可以直接解构")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" increment "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store\n  \n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" increment "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Mpx 中通过 "),a("code",[t._v("createStore")]),t._v(" 创建的类 Vuex store 在组合式 API 中仍然可以使用，我们可以在 "),a("code",[t._v("setup")]),t._v(" 函数中引用 store 实例进行"),a("a",{attrs:{href:"https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api",target:"_blank",rel:"noopener noreferrer"}},[t._v("数据读取与方法调用"),a("OutboundLink")],1),t._v("，不过整体使用体验与 pinia store 存在较大差距，我们还是推荐在组合式 API 开发中优先使用 pinia store 作为数据管理方案。")]),t._v(" "),a("h3",{attrs:{id:"i18n-支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#i18n-支持"}},[t._v("#")]),t._v(" I18n 支持")]),t._v(" "),a("p",[t._v("传统选项式 API 中，我们使用 "),a("code",[t._v("this.$t")]),t._v(" 方法在组件内调用翻译函数，但在组合式 API 中我们无法访问 "),a("code",[t._v("this")]),t._v("，为此我们参考了 Vue I18n 最新的 9.x 版本，该版本针对 Vue3 及组合式 API 进行了重构适配，提供了全新的 "),a("code",[t._v("useI18n")]),t._v(" API，简单使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('message.hello')}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("changeLocale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("change locale"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// useI18n 不传参数时指向全局 i18n 对象，也可以传递 locale 和 messages 配置创建局部 i18n 对象")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" locale "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("changeLocale")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回的翻译方法名必须为 t，不能进行重命名")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" changeLocale "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("blockquote",[a("p",[t._v("上面示例代码看上去像是我们在模板上直接调用 setup() 返回的 t 翻译方法，但是熟悉小程序开发的同学都知道在小程序架构下这是不可能的，示例中的写法其实由框架通过编译 + 运行时手段实现的语法糖，我们会在模板编译时定向扫描 t/te/tm 等 i18n 方法，将其转换为计算属性注入到运行时当中，这就意味着如果我们对翻译方法进行重命名，模板编译时无法识别出 i18n 方法调用，自然也就无法正常运行。")])]),t._v(" "),a("p",[t._v("Mpx 中 i18n 提供了两种实现模式，分别是 wxs 和 computed，可以使用编译选项中的 "),a("code",[t._v("i18n.isComputed")]),t._v(" 进行切换，两种方式各有优劣，其中：")]),t._v(" "),a("ul",[a("li",[t._v("wxs 模式的优势在于逻辑层和视图层独立维护语言集，无额外运行时性能开销，且使用没有任何限制；劣势同样源于语言集同时存在于逻辑层（js）和视图层（wxs）当中，这部分的包体积占用翻倍；")]),t._v(" "),a("li",[t._v("computed 模式的优势在于语言集只存在于逻辑层中，无额外包体积占用，且可以通过动态添加语言集的方式进一步减少包体积占用；劣势则是会产生额外的运行时性能开销，且使用上存在限制，模板调用时无法直接访问 "),a("code",[t._v("wx:for")]),t._v(" 中的 "),a("code",[t._v("item")]),t._v(" 和 "),a("code",[t._v("index")]),t._v("。")])]),t._v(" "),a("p",[t._v("在组合式 API 中模板上使用 "),a("code",[t._v("useI18n()")]),t._v(" 返回的翻译函数 "),a("code",[t._v("t/te/tm")]),t._v(" 时，为了完整实现 "),a("code",[t._v("useI18n")]),t._v(" API的功能，会强制使用 computed 模式进行实现，这也意味着该用法会受到 computed 模式使用限制的影响。不过当你不需要使用 "),a("code",[t._v("useI18n")]),t._v(" 接受 "),a("code",[t._v("messages")]),t._v(" 参数创建局部语言集作用域功能时，你也完全可以在模板中继续使用原有的 "),a("code",[t._v("$t/$tc/$te/$tm")]),t._v(" 方法，这些方法受编译选项 "),a("code",[t._v("i18n.isComputed")]),t._v(" 的影响，同时指向全局语言集作用域。")]),t._v(" "),a("p",[t._v("更多关于生态周边的组合式 API 使用指南可以点击下方链接查看详情：")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://mpxjs.cn/guide/advance/store.html#use-store-in-composition-api",target:"_blank",rel:"noopener noreferrer"}},[t._v("store"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://mpxjs.cn/guide/advance/i18n.html#composition-api-usage",target:"_blank",rel:"noopener noreferrer"}},[t._v("i18n"),a("OutboundLink")],1)]),t._v(" "),a("li",[a("a",{attrs:{href:"https://mpxjs.cn/guide/extend/fetch.html#composition-api-usage",target:"_blank",rel:"noopener noreferrer"}},[t._v("fetch"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"输出-web-适配"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#输出-web-适配"}},[t._v("#")]),t._v(" 输出 web 适配")]),t._v(" "),a("p",[t._v("跨端输出 web 作为 Mpx 的一大核心特性，在业务中存在广泛使用，同时也是我们设计实现任何框架新特性需要优先考虑的事项。在本次组合式 API 支持中，我们从设计之初就考虑了跨端输出 web 的适配支持，保障使用 Mpx 组合式 API 开发的业务代码都能在 web 环境中正常运行。")]),t._v(" "),a("p",[t._v("我们输出 web 的整体技术方向在于尽可能复用 Vue 已有的生态能力，为了实现这个目标，我们需要提供尽可能与 Vue 保持一致的 API 设计，以降低抹平适配成本。在输出 web 时，核心组合式 API 基于 Vue2.7 版本中的已有能力进行适配提供，简单举个例子：对于 "),a("code",[t._v("import { ref } from 'mpxjs/core'")]),t._v(" 这行语句，在小程序中会指向 Mpx 内部维护的 "),a("code",[t._v("ref")]),t._v(" 实现，而在输出 web 时会指向 Vue 中维护的 "),a("code",[t._v("ref")]),t._v(" 实现，两者的实现虽然不仅相同，但只要保障对外函数签名一致，对于开发者用户来说就无感知。")]),t._v(" "),a("p",[t._v("我们借助了 Mpx 强大的条件编译能力进行上述实现，对运行时导出根据输出平台进行重定向，这样还能保障跨端输出产物干净简洁，仅包含当前输出环境下必要的逻辑，如下图所示：")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/E0FojaPKOxZOa5h5OEPQk_composition-api-web.png",alt:"composition-api-web"}})]),t._v(" "),a("p",[t._v("同理，我们也采用了类似的方式实现了组合式 API 周边能力对于输出 web 的适配支持，如pinia store 使用 pinia 原始版本进行适配实现，而 i18n 能力则是使用 vue-i18n@8.x + vue-i18n-bridge 进行适配实现。")]),t._v(" "),a("h2",{attrs:{id:"性能表现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#性能表现"}},[t._v("#")]),t._v(" 性能表现")]),t._v(" "),a("p",[t._v("性能是 Mpx 一直以来的核心关注点，我们对组合式 API 的最终实现版本进行了一系列性能评估测试，我们使用组合式 API 版本对业务中的评价组件进行了重构，评价组件属于我们业务中交互及功能相对比较复杂的组件，源码行数约 1000 行，组件数据 27 项，组件方法 18 个，我们在测试项目中对选项式 API 和组合式 API 两个版本实现的组件进行了一系列测试。")]),t._v(" "),a("h3",{attrs:{id:"组件初始化耗时"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件初始化耗时"}},[t._v("#")]),t._v(" 组件初始化耗时")]),t._v(" "),a("p",[t._v("由于组合式 API 改变了原有的组件初始化流程，我们对组件的初始化耗时进行了重点测试，测试口径如下：")]),t._v(" "),a("ul",[a("li",[t._v("耗时计算以挂载组件为起点，以组件 "),a("code",[t._v("ready")]),t._v(" 执行为终点")]),t._v(" "),a("li",[t._v("测试结果为10次手工测试排除最大最小值后求均值")]),t._v(" "),a("li",[t._v("IOS 测试机型为 iPhone 13 pro max，安卓测试机型为 OPPO R9")])]),t._v(" "),a("p",[t._v("结果显示两个版本的组件初始化耗时大抵持平，不分优劣。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th"),t._v(" "),a("th",[t._v("IOS")]),t._v(" "),a("th",[t._v("安卓")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("选项式 API")]),t._v(" "),a("td",[t._v("42.5ms")]),t._v(" "),a("td",[t._v("366.6ms")])]),t._v(" "),a("tr",[a("td",[t._v("组合式 API")]),t._v(" "),a("td",[t._v("42.4ms")]),t._v(" "),a("td",[t._v("370.1ms")])])])]),t._v(" "),a("h3",{attrs:{id:"组件-js-体积"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件-js-体积"}},[t._v("#")]),t._v(" 组件 JS 体积")]),t._v(" "),a("p",[t._v("在构建产物体积方面，由于组合式 API 的写法对于 JS 代码压缩更加有利，同样的逻辑实现下，组合式 API 版本的组件构建压缩后 JS 体积略胜一筹。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th"),t._v(" "),a("th",[t._v("组件 JS 体积")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("选项式 API")]),t._v(" "),a("td",[t._v("15.67KB")])]),t._v(" "),a("tr",[a("td",[t._v("组合式 API")]),t._v(" "),a("td",[t._v("13.60KB")])])])]),t._v(" "),a("h3",{attrs:{id:"框架运行时体积"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#框架运行时体积"}},[t._v("#")]),t._v(" 框架运行时体积")]),t._v(" "),a("p",[t._v("在 Mpx2.8 版本中，我们在框架运行时中新增了组合式 API 相关实现，不过通过优化运行时导出，使其对 tree shaking 更加友好，我们的框架运行时体积在实际构建产物中没有产生太大增长。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th"),t._v(" "),a("th",[t._v("框架运行时体积")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("选项式 API")]),t._v(" "),a("td",[t._v("51.66KB")])]),t._v(" "),a("tr",[a("td",[t._v("组合式 API")]),t._v(" "),a("td",[t._v("57.47KB")])])])]),t._v(" "),a("p",[t._v("综上所述，组合式 API 版本的运行时性能与选项式 API 大抵持平，在包体积占用方面，新版框架运行时体积占用略有提升，不过由于组合式 API 开发模式对代码压缩更友好，加上组合式 API 更易进行逻辑复用的特点，我们预计在实际业务项目中，组合式 API 的包体积占用会更小。")]),t._v(" "),a("h2",{attrs:{id:"破坏性改变"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#破坏性改变"}},[t._v("#")]),t._v(" 破坏性改变")]),t._v(" "),a("p",[t._v("Mpx 组合式 API 版本完全兼容原有的选项式 API 开发方式，不过我们在运行时重构过程中依然带来了少量的破坏性改变，详情如下：")]),t._v(" "),a("ul",[a("li",[t._v("框架过往提供的组件增强生命周期 "),a("code",[t._v("pageShow/pageHide")]),t._v(" 与微信原生提供的 "),a("code",[t._v("pageLifetimes.show/hide")]),t._v(" 完全对齐，不再提供组件初始挂载时必定执行 "),a("code",[t._v("pageShow")]),t._v(" 的保障（因为组件可能在后台页面进行挂载），相关初始化逻辑一定不要放置在 "),a("code",[t._v("pageShow")]),t._v(" 当中；")]),t._v(" "),a("li",[t._v("取消了框架过去提供的基于内部生命周期实现的非标准增强生命周期，如 "),a("code",[t._v("beforeCreate/onBeforeCreate")]),t._v(" 等，直接将内部生命周期变量导出提供给用户使用，详情查看"),a("a",{attrs:{href:"https://mpxjs.cn/api/global-api.html#built-in-lifecycle-variable",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v(";")]),t._v(" "),a("li",[t._v("为了优化 tree shaking，作为框架运行时 "),a("code",[t._v("default export")]),t._v(" 的 "),a("code",[t._v("Mpx")]),t._v(" 对象不再挂载 "),a("code",[t._v("createComponent/createStore")]),t._v(" 等运行时方法，一律通过 "),a("code",[t._v("named export")]),t._v(" 提供，"),a("code",[t._v("Mpx")]),t._v(" 对象上仅保留 "),a("code",[t._v("set/use")]),t._v(" 等全局 API，详情查看"),a("a",{attrs:{href:"https://mpxjs.cn/api/global-api.html#global-mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("；")]),t._v(" "),a("li",[t._v("使用 I18n 能力时，为了与新版 vue-i18n 保持对齐，"),a("code",[t._v("this.$i18n")]),t._v(" 对象指向全局作用域，如需创建局部作用域需要使用组合式 API "),a("code",[t._v("useI18n")]),t._v(" 的方式进行创建。")]),t._v(" "),a("li",[a("code",[t._v("watch")]),t._v(" API 不再接受第二个参数为带有 "),a("code",[t._v("handler")]),t._v(" 属性的对象形式（该参数形式只应存在于 "),a("code",[t._v("watch")]),t._v(" option 中），第二个参数必须为回调函数，与 "),a("a",{attrs:{href:"https://vuejs.org/api/reactivity-core.html#watch",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue"),a("OutboundLink")],1),t._v(" 对齐。")])]),t._v(" "),a("p",[t._v("更详细的迁移指南请点击查看"),a("a",{attrs:{href:"https://mpxjs.cn/guide/migrate/2.8.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"未来规划"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#未来规划"}},[t._v("#")]),t._v(" 未来规划")]),t._v(" "),a("p",[t._v("在完成编译持久化缓存和组合式 API 支持后，我们已经完成了去年规划中最大的两个技术升级，后续我们的技术规划如下：")]),t._v(" "),a("ul",[a("li",[t._v("支持使用 Vite 进行 web 构建")]),t._v(" "),a("li",[t._v("完善 Mpx 跨端输出 Hummer 并正式 release")]),t._v(" "),a("li",[t._v("优化运行时 render 函数，降低包体积占用")]),t._v(" "),a("li",[t._v("内置支持原子类使用")]),t._v(" "),a("li",[t._v("Mpx-cube-ui 正式开源")])]),t._v(" "),a("p",[t._v("最后，再次感谢所有参与 Mpx 组合式 API 技术建设的同学们，也欢迎社区同学加入 Mpx 项目开源共建。")])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/52.10bb0251.js b/docs-vuepress/.vuepress/dist/assets/js/52.10bb0251.js
deleted file mode 100644
index ac6607c0a1..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/52.10bb0251.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{401:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化"}},[t._v("#")]),t._v(" Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化")]),t._v(" "),s("blockquote",[s("p",[t._v("作者："),s("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[t._v("董宏平"),s("OutboundLink")],1)])]),t._v(" "),s("p",[s("a",{attrs:{href:"https://github.com/didi/mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx"),s("OutboundLink")],1),t._v(" 是滴滴开源的一款增强型跨端小程序框架，自2018年立项开源以来如今已经进入第六个年头，在这六年间，Mpx 根植于业务，与业务共同成长，针对小程序业务开发中遇到的各类痛点问题提出了解决方案，并在集团内部建设了完善的小程序跨端开发生态。目前，Mpx 已经覆盖支持了集团内部全量小程序业务开发，成为了集团小程序开发的统一技术标准，并在今年年初被评选为集团内首个开源精品项目。")]),t._v(" "),s("p",[t._v("随着小程序业务的发展演进，性能和包体积的重要性愈发凸显，Mpx从设计之初就非常重视性能和包体积的优化，本次的 "),s("strong",[t._v("Mpx2.9")]),t._v(" 版本更新带来的三大核心特性——原子类、SSR 和包体积优化也都与性能和包体积息息相关，下面我们逐个展开介绍。")]),t._v(" "),s("h2",{attrs:{id:"原子类支持"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原子类支持"}},[t._v("#")]),t._v(" 原子类支持")]),t._v(" "),s("p",[t._v("原子类(utility-first CSS)是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，比较知名的有 "),s("a",{attrs:{href:"https://github.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github"),s("OutboundLink")],1),t._v("，"),s("a",{attrs:{href:"https://openai.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("OpenAI"),s("OutboundLink")],1),t._v("，"),s("a",{attrs:{href:"https://top10.netflix.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Netflix"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://www.jpl.nasa.gov/",target:"_blank",rel:"noopener noreferrer"}},[t._v("NASA官网"),s("OutboundLink")],1),t._v(" 等。使用原子类离不开原子类框架的支持，常用的原子类框架有 "),s("a",{attrs:{href:"https://tailwindcss.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Tailwindcss"),s("OutboundLink")],1),t._v("、"),s("a",{attrs:{href:"https://windicss.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Windicss"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://unocss.dev/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Unocss"),s("OutboundLink")],1),t._v(" 等。")]),t._v(" "),s("p",[t._v("在 Mpx2.9 版本中，我们在框架中内置了基于 "),s("code",[t._v("unocss")]),t._v(" 的原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx 页面/组件模板中直接使用一些预定义的基础样式类，诸如 flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("flex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-base text-black font-semibold mb-2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Erin Lindford\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-gray-500 font-medium pb-3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Product Engineer\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Message\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/Or3aaN-mmxV8pK-LmEVPm_demo.png",alt:"utility-css-demo"}})]),t._v(" "),s("p",[t._v("相较于传统的自定义类编写样式的方式，使用原子类能给你带来以下这些好处：")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("不用再烦恼于为自定义类取类名")]),t._v("，传统样式开发中，我们仅仅是为某个元素定义样式就需要绞尽脑汁发明一些抽象的类名，还得提防类名冲突，使用原子类可以完全将你从这种琐碎无趣的工作中解放；")]),t._v(" "),s("li",[s("strong",[t._v("停止 css 体积的无序增长")]),t._v("，传统样式开发中，css 体积会随着你的迭代不断增长，而在原子类中，一切样式都可以复用，你几乎不需要编写新的 css；")]),t._v(" "),s("li",[s("strong",[t._v("让调整样式变得更加安全")]),t._v("，传统 css 是全局的，当你修改某个样式时无法保障其不会破坏其他地方的样式，而你在模板中使用的原子类是本地的，你完全不用担心修改它会影响其他地方。")])]),t._v(" "),s("p",[t._v("而相较于使用内联样式，原子类也有一些重要的优势：")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("约束下的设计")]),t._v("，使用内联样式时，里面的每一个数值都是魔法数字（magic number）\n，而通过原子工具类，你可以选择一些符合预定义设计规范的样式，便于构筑具有视觉一致性的UI；")]),t._v(" "),s("li",[s("strong",[t._v("响应式设计")]),t._v("，你无法在内联样式中使用媒体查询，然而通过原子类框架中提供的响应式工具，你可以轻而易举地构建出响应式界面；")]),t._v(" "),s("li",[s("strong",[t._v("Hover、focus 和其他状态")]),t._v("，使用内联样式无法定义特定状态下的样式，如 hover 和 focus，通过原子类框架的状态变量能力，我们可以轻松为这些状态定义样式。")])]),t._v(" "),s("p",[t._v("看到这里相信你已经迫不及待地想要在 Mpx 中体验原子类开发了吧，使用最新版本的 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 脚手架创建项目时，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用 "),s("code",[t._v("unocss")]),t._v(" 的原子类，可使用的工具类可以参考 "),s("a",{attrs:{href:"https://unocss.dev/interactive/",target:"_blank",rel:"noopener noreferrer"}},[t._v("unocss 交互示例"),s("OutboundLink")],1),t._v("，在已有项目中开启原子类支持可以参考"),s("a",{attrs:{href:"https://mpxjs.cn/guide/advance/utility-first-css.html#compile-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("配置指南"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"小程序原子类使用注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#小程序原子类使用注意事项"}},[t._v("#")]),t._v(" 小程序原子类使用注意事项")]),t._v(" "),s("p",[t._v("小程序和 web 环境对于 css 的支持存在底层差异，小程序内也存在大量自身独有的技术特性，Mpx 在支持原子类时针对这些环境特异性进行了抹平和适配，在框架的支持下，我们实现了大部分（超过90%）原子类功能和工具类在小程序环境下正常使用，并额外支持了原子类产物的分包输出和样式隔离下的原子类使用，详情如下：")]),t._v(" "),s("h4",{attrs:{id:"特殊字符转义"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#特殊字符转义"}},[t._v("#")]),t._v(" 特殊字符转义")]),t._v(" "),s("p",[t._v("基于 "),s("code",[t._v("unocss")]),t._v(" 的原子类支持 "),s("code",[t._v("value auto-infer")]),t._v("（值自动推导），可以在模版中根据相关规则书写灵活的自定义值原子类，如 "),s("code",[t._v("p-5px bg-[hsl(211.7,81.9%,69.6%)]")]),t._v(" 等，针对原子类中出现的 "),s("code",[t._v("[")]),t._v(" "),s("code",[t._v("(")]),t._v(" "),s("code",[t._v(",")]),t._v(" 等特殊字符，在 web 中会通过转义字符 "),s("code",[t._v("\\")]),t._v(" 进行转义，由于小程序环境下不支持 css 选择器中出现 "),s("code",[t._v("\\")]),t._v(" 转义字符，我们内置支持了一套不带 "),s("code",[t._v("\\")]),t._v(" 的转义规则对这些特殊字符进行转义，同时替换模版和 css 文件中的类名，内建的默认转义规则如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" escapeMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'('")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_pl_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("')'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_pr_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'['")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_bl_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("']'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_br_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'{'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_cl_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'}'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_cr_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'#'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_h_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'!'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_i_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'/'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_s_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'.'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_d_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("':'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_c_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("','")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_2c_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'%'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_p_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'\\''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_q_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'\"'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_dq_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'+'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_a_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_si_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unknown用于兜底不在上述范围中未知的转义字符")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unknown")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_u_'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("与此同时，用户也可以通过传递 "),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 的 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#escapeMap",target:"_blank",rel:"noopener noreferrer"}},[t._v("escapeMap"),s("OutboundLink")],1),t._v(" 配置项来覆盖内建的转义规则。")]),t._v(" "),s("h4",{attrs:{id:"原子类分包输出"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原子类分包输出"}},[t._v("#")]),t._v(" 原子类分包输出")]),t._v(" "),s("p",[t._v("在 web 中，原子类会被全部打包输出单个样式文件，一般会放置在顶层样式表中以供全局访问，但在小程序中这种全量的输出策略并不是最优的，主要原因在于小程序中可供全局访问的主包体积存在 "),s("strong",[t._v("2M 大小限制")]),t._v("，主包体积十分紧缺珍贵，Mpx 在构建输出时遵循着分包优先的原则，尽可能充分利用分包体积从而减少对主包体积的占用，再进行原子类产物输出时，我们也遵循了相同的原则。")]),t._v(" "),s("p",[t._v("在Mpx中，我们在收集原子类时同时记录了每个原子类的引用分包，在收集结束后根据每个原子类的分包引用数量决定该原子类应该输出到主包还是分包当中，我们在 "),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 中提供了 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#minCount",target:"_blank",rel:"noopener noreferrer"}},[t._v("minCount"),s("OutboundLink")],1),t._v(" 配置项来决定分包的输出规则，该配置项的默认值为2，即当一个原子类被2个或以上分包引用时，会被作为公共原子类抽取到主包中，否则输出到所属分包中，这也是全局最优的策略。当我们想要让原子类输出产物更少地占用主包体积时，我们也可以将"),s("code",[t._v("minCount")]),t._v("值调大，让原子类抽取到主包的条件更加苛刻，不过这样也会伴随着原子类分包冗余的增加。")]),t._v(" "),s("p",[s("code",[t._v("unocss.config.js")]),t._v(" 配置中定义的 "),s("code",[t._v("safelist")]),t._v(" 原子类默认会输出到主包，为了组件局部使用的 "),s("code",[t._v("safelist")]),t._v(" 有输出到分包的机会，我们在模版中提供了"),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#commentConfig",target:"_blank",rel:"noopener noreferrer"}},[t._v("注释配置"),s("OutboundLink")],1),t._v("（comments config），灵感来源于 "),s("code",[t._v("webpack")]),t._v(" 中的魔法注释（magic comments），用户可以在组件模版中通过"),s("code",[t._v("注释配置")]),t._v("声明当前组件所需的 "),s("code",[t._v("safelist")]),t._v("，对应的原子类也会根据上述的规则输出到主包或分包中，使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_safelist: 'text-red-500 bg-blue-500' --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 动态样式中可以使用text-red-500和bg-blue-500原子类 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{classObj}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h4",{attrs:{id:"样式隔离与组件分包异步"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#样式隔离与组件分包异步"}},[t._v("#")]),t._v(" 样式隔离与组件分包异步")]),t._v(" "),s("p",[t._v("在小程序中，自定义组件的样式默认是隔离的，web 中通过全局样式访问原子类的方式不再生效，不过由于小程序提供了"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB",target:"_blank",rel:"noopener noreferrer"}},[t._v("样式隔离配置"),s("OutboundLink")],1),t._v("，我们可以将该组件样式隔离配置调整为 "),s("code",[t._v("apply-shared")]),t._v(" 来获取页面或 app 中定义的原子类，但是当我们在使用传统类名和原子类混合开发或者迁移原子类的过程中，我们往往希望保留原本自定义组件的样式隔离。")]),t._v(" "),s("p",[t._v("针对这种情况，我们在 "),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 中提供了 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#styleIsolation",target:"_blank",rel:"noopener noreferrer"}},[t._v("styleIsolation"),s("OutboundLink")],1),t._v(" 配置项，可选设置为 "),s("code",[t._v("isolated")]),t._v("|"),s("code",[t._v("apply-shared")]),t._v("，当设置为 "),s("code",[t._v("isolated")]),t._v(" 时每个组件都会通过 "),s("code",[t._v("@import")]),t._v(" 独立引用主包或者分包的原子类样式文件，因此不会受到样式隔离的影响；当设置为 "),s("code",[t._v("apply-shared")]),t._v(" 时，只有 app 和分包页面会引用对应的原子类样式文件，自定义组件需要通过配置样式隔离为 "),s("code",[t._v("apply-shared")]),t._v(" 使原子类生效。")]),t._v(" "),s("p",[t._v("在组件分包异步的情况下对应组件即使将样式隔离配置为 "),s("code",[t._v("apply-shared")]),t._v(" 的情况下，"),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 也需要将  "),s("code",[t._v("styleIsolation")]),t._v(" 设置为 "),s("code",[t._v("isolated")]),t._v(" 才能正常工作，原因在于组件分包异步的情况下，组件被其他分包的页面所引用渲染，由于上述原子类样式分包输出的规则，其他分包的页面中可能并不包含当前组件所需的原子类，只有在 "),s("code",[t._v("isolated")]),t._v(" 模式下由组件自身引用所需的原子类样式才能保证正常工作，类似于 "),s("code",[t._v("safelist")]),t._v("，我们也提供了"),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#commentConfig",target:"_blank",rel:"noopener noreferrer"}},[t._v("注释配置"),s("OutboundLink")],1),t._v("的方式对组件的 "),s("code",[t._v("styleIsolation")]),t._v(" 模式进行局部配置，示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_styleIsolation: 'isolated' --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 当前组件会直接引用对应主包或分包的原子类样式 --\x3e")]),t._v("\n     "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("@dark:(text-white bg-dark-500)"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"原子类使用参考文档"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原子类使用参考文档"}},[t._v("#")]),t._v(" 原子类使用参考文档")]),t._v(" "),s("p",[t._v("Mpx 中使用原子类的详细参考文档如下：")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://mpxjs.cn/guide/advance/utility-first-css.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("原子类使用指南"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#MpxUnocssPlugin",target:"_blank",rel:"noopener noreferrer"}},[t._v("原子类 API 参考"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"输出-web-支持-ssr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#输出-web-支持-ssr"}},[t._v("#")]),t._v(" 输出 web 支持 SSR")]),t._v(" "),s("p",[t._v("近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，各类SSR框架层出不穷，未来进一步提升性能表现，在 SSR 的基础上还演进出 "),s("a",{attrs:{href:"https://docs.astro.build/en/concepts/islands/",target:"_blank",rel:"noopener noreferrer"}},[t._v("islands architecture"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://qwik.builder.io/docs/concepts/resumable/",target:"_blank",rel:"noopener noreferrer"}},[t._v("0 hydration"),s("OutboundLink")],1),t._v(" 等更加精细复杂的理念和架构。")]),t._v(" "),s("p",[t._v("近两年随着团队对于前端性能的重视，SSR/SSG 技术也在团队业务中逐步推广落地，并在首屏性能方面取得了显著的收效。但由于过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 Mpx2.9 版本中，我们对 web 输出流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整实现了基于 Vue 和 Pinia 的 SSR 技术方案。")]),t._v(" "),s("h3",{attrs:{id:"配置使用-ssr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置使用-ssr"}},[t._v("#")]),t._v(" 配置使用 SSR")]),t._v(" "),s("p",[t._v("在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85",alt:"Vue SSR流程"}})]),t._v(" "),s("p",[t._v("Mpx SSR 核心基于 Vue SSR 实现，大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：")]),t._v(" "),s("h4",{attrs:{id:"构建server-client-bundle"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#构建server-client-bundle"}},[t._v("#")]),t._v(" 构建server/client bundle")]),t._v(" "),s("p",[t._v("SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。\n在 Vue 中，我们需要提供 "),s("code",[t._v("entry-server.js")]),t._v(" 和 "),s("code",[t._v("entry-client.js")]),t._v(" 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 "),s("code",[t._v("app.mpx")]),t._v(" 作为统一构建入口，无需区分 server 和 client。")]),t._v(" "),s("h5",{attrs:{id:"服务端构建配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#服务端构建配置"}},[t._v("#")]),t._v(" 服务端构建配置")]),t._v(" "),s("p",[t._v("服务端配置中除了将 entry 制定为 "),s("code",[t._v("app.mpx")]),t._v(" 及其它基础配置外，最重要的是安装 "),s("code",[t._v("vue-server-renderer")]),t._v(" 包中提供的  "),s("code",[t._v("server-plugin")]),t._v(" 插件，该插件能够构建产出 "),s("code",[t._v("vue-ssr-server-bundle.json")]),t._v(" 文件供 "),s("code",[t._v("renderer")]),t._v(" 后续消费。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.server.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" VueSSRServerPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer/server-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 entry 指向项目的 app.mpx 文件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 产出 `vue-ssr-server-bundle.json`")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueSSRServerPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更加详细的配置说明可参考 "),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/build-config.html#server-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue SSR的服务端配置"),s("OutboundLink")],1)]),t._v(" "),s("h5",{attrs:{id:"客户端构建配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#客户端构建配置"}},[t._v("#")]),t._v(" 客户端构建配置")]),t._v(" "),s("p",[t._v("类似服务端构建配置，在客户端构建中我们需要使用 "),s("code",[t._v("vue-server-renderer")]),t._v(" 包中 "),s("code",[t._v("client-plugin")]),t._v(" 插件来帮助我们生成客户端环境的资源清单 "),s("code",[t._v("vue-ssr-client-manifest.json")]),t._v("，并供 "),s("code",[t._v("renderer")]),t._v(" 后续消费。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.client.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" VueSSRClientPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer/client-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 entry 指向项目的 app.mpx 文件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 产出 `vue-ssr-client-manifest.json`。")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueSSRClientPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更加详细的配置说明可参考 "),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/build-config.html#client-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue SSR的客户端配置"),s("OutboundLink")],1)]),t._v(" "),s("h4",{attrs:{id:"准备页面模版"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#准备页面模版"}},[t._v("#")]),t._v(" 准备页面模版")]),t._v(" "),s("p",[t._v("SSR 渲染中，我们创建 "),s("code",[t._v("renderer")]),t._v(" 需要一个页面模板，简单的示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token doctype"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<!")]),s("span",{pre:!0,attrs:{class:"token doctype-tag"}},[t._v("DOCTYPE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token name"}},[t._v("html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("en"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Hello"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--vue-ssr-outlet--\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 "),s("code",[t._v("\x3c!--vue-ssr-outlet--\x3e")]),t._v("注释，标记 SSR 渲染产物的插入位置，如使用 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 脚手架创建 SSR 项目，该模版已经内置于脚手架中。")]),t._v(" "),s("h4",{attrs:{id:"集成启动-ssr-服务"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#集成启动-ssr-服务"}},[t._v("#")]),t._v(" 集成启动 SSR 服务")]),t._v(" "),s("p",[t._v("当我们准备好页面模版和双端构建产物后，我们就可以创建 "),s("code",[t._v("renderer")]),t._v(" 并与 Node 服务进行集成，启动 SSR 服务，下面以 "),s("code",[t._v("express")]),t._v(" 为例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//server.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" app "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'express'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createBundleRenderer "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 vue-server-renderer/server-plugin 生成的文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" serverBundle "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../dist/server/vue-ssr-server-bundle.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 vue-server-renderer/client-plugin 生成的文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" clientManifest "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../dist/client/vue-ssr-client-manifest.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 页面模版文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" template "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("readFileSync")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/index.template.html'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'utf-8'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建 renderer 渲染器")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" renderer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createBundleRenderer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("serverBundle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("runInNewContext")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    template"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    clientManifest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注册启动 SSR 服务")]),t._v("\napp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'*'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("req"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" req"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  renderer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("renderToString")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  \t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  \t  res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Internal Server Error'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  \tres"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("html"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\napp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("listen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8080")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"ssr-生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ssr-生命周期"}},[t._v("#")]),t._v(" SSR 生命周期")]),t._v(" "),s("p",[t._v("在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是"),s("code",[t._v("onAppInit")]),t._v("、"),s("code",[t._v("serverPrefetch")]),t._v(" 和 "),s("code",[t._v("onSSRAppCreated")]),t._v("，以统一服务端与客户端的构建入口，下面展开介绍：")]),t._v(" "),s("h4",{attrs:{id:"onappinit"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onappinit"}},[t._v("#")]),t._v(" onAppInit")]),t._v(" "),s("p",[t._v("在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，"),s("code",[t._v("onAppInit")]),t._v(" 生命周期会在应用创建 "),s("code",[t._v("new Vue(...)")]),t._v(" 前被调用，其执行的返回结果会被合并到创建应用的 "),s("code",[t._v("options")]),t._v(" 中")]),t._v(" "),s("p",[t._v("很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 "),s("code",[t._v("@mpxjs/pinia")]),t._v(" 作为全局状态管理工具，我们可以在 "),s("code",[t._v("onAppInit")]),t._v(" 中返回全新的 "),s("code",[t._v("pinia")]),t._v(" 示例避免产生跨请求状态污染，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPinia "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onAppInit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pinia "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPinia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      pinia\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"serverprefetch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#serverprefetch"}},[t._v("#")]),t._v(" serverPrefetch")]),t._v(" "),s("p",[t._v("当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：")]),t._v(" "),s("p",[t._v("选项式 API：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useStore "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store/index'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("serverPrefetch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" query "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("query\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the promise from the action, fetch data and update state")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("query"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("组合式 API：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" onServerPrefetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getCurrentInstance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useStore "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store/index'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("userStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onServerPrefetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" query "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getCurrentInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("proxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("query\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the promise from the action, fetch data and update state")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("query"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("关于数据预拉取更详细的说明可以查看"),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/data.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("h4",{attrs:{id:"onssrappcreated"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onssrappcreated"}},[t._v("#")]),t._v(" onSSRAppCreated")]),t._v(" "),s("p",[t._v("在 Vue SSR 项目中，我们会在 "),s("code",[t._v("entry-server.js")]),t._v(" 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 "),s("code",[t._v("app")]),t._v("。")]),t._v(" "),s("p",[t._v("在 Mpx SSR 中，我们将这部分逻辑整合在 "),s("code",[t._v("onSSRAppCreated")]),t._v(" 中执行，该生命周期执行时用户可以从参数中获取应用实例 "),s("code",[t._v("app")]),t._v("、路由实例 "),s("code",[t._v("router")]),t._v("、数据管理实例 "),s("code",[t._v("pinia")]),t._v(" 和 SSR 上下文 "),s("code",[t._v("context")]),t._v("，在完成必要的操作后，该生命周期需要返回一个 "),s("code",[t._v("resolve(app)")]),t._v(" 的 promise。")]),t._v(" "),s("p",[t._v("通常我们会在 "),s("code",[t._v("onSSRAppCreated")]),t._v(" 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...,")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onSSRAppCreated")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置服务端路由路径")]),t._v("\n        router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 应用完成渲染时执行")]),t._v("\n          context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("rendered")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将服务端渲染后得到的 pinia.state 同步到 context.state 中，")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注入到 HTML 中，并在客户端运行时再读取同步")]),t._v("\n            context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回应用程序实例")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。")]),t._v(" "),s("h3",{attrs:{id:"其他注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#其他注意事项"}},[t._v("#")]),t._v(" 其他注意事项")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。")])]),t._v(" "),s("li",[s("p",[t._v("在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。")])]),t._v(" "),s("li",[s("p",[t._v("由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 "),s("code",[t._v("mpx.config.webRouteConfig")]),t._v(" 将路由模式设置成 "),s("code",[t._v("history")]),t._v(" 模式。")])])]),t._v(" "),s("h2",{attrs:{id:"包体积优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#包体积优化"}},[t._v("#")]),t._v(" 包体积优化")]),t._v(" "),s("p",[t._v("近几年来随着集团超级 App 战略的推进，滴滴出行主小程序中集成了越来越多的业务线，主小程序的包体积也随之呈现爆炸式增长，到今天主小程序里已经集成了集团内大部分核心业务，但其总包体积也从 21 年的 12MB 增长至触达微信上限 30MB，成为一个页面数量400+，组件数量3600+，JS模块数40000+的“大程序”。在此期间，我们通过统一技术框架、分包异步改造和低效页面下线/改造等技术手段，对主小包体积进行一轮又一轮优化，并沉淀了分包异步构建、包体积分析管控和冗余包检测等一系列技术能力，累计优化总包体积超过 "),s("strong",[t._v("8MB")]),t._v("。")]),t._v(" "),s("p",[t._v("Mpx 在设计之初就考虑了包体积问题，完整继承了 webpack 已有的代码优化能力，如公共模块抽离、tree shaking、混淆压缩等。除此之外，我们还设计开发了业内最完善的分包构建流程，完整支持基于配置声明和依赖分析的普通分包、独立分包及分包异步化的构建输出，极大地缓解了复杂小程序中的主包和总包体积过大的问题。在 Mpx2.9 版本中，我们针对复杂小程序页面组件和 JS 模块众多的特点，对构建产物进行了针对性地优化，进一步降低了构建产物体积，当前版本在主小程序中实测能够在不做任何业务改造的情况下节省了约 "),s("strong",[t._v("2MB")]),t._v(" 总包体积，收效显著，主要优化项如下：")]),t._v(" "),s("h3",{attrs:{id:"模版代码优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模版代码优化"}},[t._v("#")]),t._v(" 模版代码优化")]),t._v(" "),s("p",[t._v("Mpx 基于 webpack 进行打包构建，并基于小程序原生 commonjs 支持进行适配改造，以实现 webpack 构建产物在小程序环境下运行，为了将构建产物中的模块和 chunk 链接到一起，webpack 和 mpx 会在构建产物生成一些模版代码进行相关工作，下面是一个页面 js 中包含的模版代码示例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" self "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nself"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackChunkmpx_test_2_8 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../bundle.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("self"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackChunkmpx_test_2_8 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" self"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackChunkmpx_test_2_8 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("405")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1307")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" o")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4236")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" e\n  e "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1307")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("s "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("可以看出模版代码主要由 chunk 链接代码，chunk id，模块 id 和模块包装函数组成，对于中小项目来说，这些模版代码一般不会占用太多体积，但是在滴滴出行主小程序这样的大体量项目下，这部分体积就变得不可忽视，"),s("code",[t._v("@mpxjs/size-report")]),t._v(" 的分析结果显示，生产模式下主小程序中模版代码占用体积约为 1.2MB，相当于一个中等复杂度业务的占用体积。")]),t._v(" "),s("p",[t._v("我们对模版代码的生成逻辑和生成产物进行分析，发现 webpack 生产模式的默认配置中，很多配置项并不是体积最优的选项，一个典型的例子在于模块/chunk id：为了保障生成产物的内容稳定，来尽可能提升浏览器的缓存利用率，webpack 默认的模块/chunk id 采用 "),s("code",[t._v("deterministic")]),t._v(" 模式进行生成，该模式下模块 id 为模块源路径的定长数字 hash，比项目模块总数长 1 位。由于在小程序中代码包按照版本的维度进行全量管理，保证文件局部的内容稳定在小程序环境下无正向意义，这就有了优化空间，我们可以简单将模块/chunk id 的生成逻辑改为数字自增，在主小程序中就能节省出上百 KB 总包体积。")]),t._v(" "),s("p",[t._v("类似的可优化点还存在于 chunk 链接代码和模块包装函数当中，我们在 "),s("code",[t._v("@mpxjs/webpack-plugin@2.9")]),t._v(" 版本中提供了一个新的配置项 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#optimizesize",target:"_blank",rel:"noopener noreferrer"}},[t._v("optimizeSize"),s("OutboundLink")],1),t._v("，其中整合了一系列模版代码体积优化配置，开启后就能自动优化构建产物中的模版代码体积，在主小程序中，我们开启 "),s("code",[t._v("optimizeSize")]),t._v(" 后可以减少总包体积约 "),s("strong",[t._v("540KB")]),t._v("，效果非常显著，下面是上述示例在开启 "),s("code",[t._v("optimizeSize")]),t._v(" 后的产物对比：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" g "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\ng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../bundle.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("448")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" o")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("463")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" e\n  e "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("448")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("s "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"空模块移除"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#空模块移除"}},[t._v("#")]),t._v(" 空模块移除")]),t._v(" "),s("p",[t._v("Mpx 在处理 "),s("code",[t._v(".mpx")]),t._v(" 单文件时会将其分拆为 "),s("code",[t._v("template/js/style/json")]),t._v(" 四个新模块来进行分别处理，其中 "),s("code",[t._v("template/style/json")]),t._v(" 部分的内容会在处理后通过内置的 "),s("code",[t._v("extractor")]),t._v(" 抽取输出为静态文件，抽取之后原本分拆出来的模块就会以空模块的形式残留在构建产物中（template 模块在抽取后还需要保留 render 函数和 refs 等信息所以不会成为空模块），如下所示：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("533")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("__unused_webpack_module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" __unused_webpack_exports"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" __webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* template */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("535")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("536")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* json */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("537")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* script */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("534")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("536")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("537")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("从上面示例中可以看出 "),s("code",[t._v("536/537")]),t._v(" 模块的定义和引用都是完全不必要的，但由于 webpack 本身对于空模块没有进行识别和优化的手段，在过去的版本中这些空模块代码会占用我们一部分总包体积。在 Mpx2.9 版本中，我们定义了全新的依赖类型 "),s("code",[t._v("CommonjsExtractDependency")]),t._v(" 对于这类可能被抽取成为空模块的 "),s("code",[t._v("request")]),t._v(" 进行识别处理，当模块内容在完成抽取后为空时，自动将其从模块图中移除，并在产物生成时不再生成其引用代码。该项优化措施内置开启，升级后自动生效，可减少主小程序总包体积约 "),s("strong",[t._v("232KB")]),t._v("。")]),t._v(" "),s("h3",{attrs:{id:"render函数优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#render函数优化"}},[t._v("#")]),t._v(" Render函数优化")]),t._v(" "),s("p",[t._v("Render 函数是 Mpx 运行时 "),s("code",[t._v("setData")]),t._v(" 优化的一项核心设计，我们在模版编译时将用户模版转换为简易的 render 函数，该函数执行时能够完全模拟视图渲染的数据访问过程，正确地收集当前视图的数据依赖，避免将视图不需要的数据通过 "),s("code",[t._v("setData")]),t._v(" 发送到视图中。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/ZQ6p8Rs2m7QCumOll3nmd.jpg",alt:"render函数"}})]),t._v(" "),s("p",[t._v("虽然我们生成的简化版 render 函数仅保留了数据访问逻辑，在代码体积上并不算大，但是仍然存在着一定的优化空间，我们来看下面这个例子：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("可以看出 "),s("code",[t._v("if block")]),t._v(" 下存在着大量冗余不必要的数据访问，例如 "),s("code",[t._v("this.a")]),t._v(" 和 "),s("code",[t._v("this.b")]),t._v(" 在父级 "),s("code",[t._v("block")]),t._v(" 中已经进行过访问，"),s("code",[t._v("this.c.a")]),t._v(" 和 "),s("code",[t._v("this.c.b")]),t._v(" 由于在 "),s("code",[t._v("if condition")]),t._v(" 中进行过 "),s("code",[t._v("this.c")]),t._v(" 的访问也不再必要（render函数执行时会对模版依赖数据进行深度diff，父路径访问后子路径就无需再进行访问），上述 render 函数可以优化为：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在 Mpx2.9 版本中，我们通过两轮 "),s("code",[t._v("ast")]),t._v(" 遍历（"),s("code",[t._v("2 pass ast travese")]),t._v("）的方式实现了这个优化，在第一轮遍历中，我们收集了数据访问信息并按照 "),s("code",[t._v("block")]),t._v(" 结构存储在 "),s("code",[t._v("blockVisitTree")]),t._v(" 中，第二轮遍历时依据 "),s("code",[t._v("blockVisitTree")]),t._v(" 中的信息对不必要的数据访问进行剪枝优化。")]),t._v(" "),s("p",[t._v("除此之外，我们也大幅优化了 render 函数中的数据收集代码，有效地降低了 render 函数的体积占用。")]),t._v(" "),s("p",[t._v("该优化目前没有默认开启，可以通过 "),s("code",[t._v("@mpxjs/webpack-plugin")]),t._v(" 中的 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#optimizerenderrules",target:"_blank",rel:"noopener noreferrer"}},[t._v("optimizeRenderRules"),s("OutboundLink")],1),t._v(" 配置项配置生效范围进行开启，\n全量开启后在主小程序中实测可节省总包体积约 "),s("strong",[t._v("1507KB")]),t._v("。")]),t._v(" "),s("h2",{attrs:{id:"未来规划"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#未来规划"}},[t._v("#")]),t._v(" 未来规划")]),t._v(" "),s("p",[t._v("在未来，我们对 Mpx 构建产物还有进一步的优化方案可以探索实施，主要分为两个方向：")]),t._v(" "),s("ul",[s("li",[t._v("编译注入代码优化，在功能不变的情况下简化编译注入的代码，对于 render 函数也有一种运行时有损的方案（略微增大运行时开销）可以尝试")]),t._v(" "),s("li",[t._v("模版和JSON压缩，对模版和JSON中的组件名及组件路径进行短哈希压缩，缺点是丢失dist产物的可读性，可能需要对其提供 sourceMap 支持")])]),t._v(" "),s("p",[t._v("除此之外，我们近期的框架升级计划还包括：")]),t._v(" "),s("ul",[s("li",[t._v("局部运行时渲染增强")]),t._v(" "),s("li",[t._v("数据响应升级为 proxy 实现，输出 web 升级为 vue3")]),t._v(" "),s("li",[t._v("支付宝 2.0 基础库适配优化")]),t._v(" "),s("li",[t._v("微信 skyline 适配优化")]),t._v(" "),s("li",[t._v("输出 Hummer 能力完善")])]),t._v(" "),s("p",[t._v("在构建提速方面，我们也会在以下方向进行探索：")]),t._v(" "),s("ul",[s("li",[t._v("输出 web 支持 vite 构建")]),t._v(" "),s("li",[t._v("基于模块联邦的分布式构建")]),t._v(" "),s("li",[t._v("基于 Rust 的高性能构建探索")])]),t._v(" "),s("p",[t._v("最后，特别感谢@徐伟东、@闫宇和@朱志恒对于 2.9 版本功能开发的突出贡献，也欢迎大家使用 Mpx 进行小程序跨端开发并加入社区共建。")]),t._v(" "),s("p",[t._v("Github：https://github.com/didi/mpx")]),t._v(" "),s("p",[t._v("官网/文档：https://mpxjs.cn/")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/53.7207ffc5.js b/docs-vuepress/.vuepress/dist/assets/js/53.7207ffc5.js
deleted file mode 100644
index b572c7c4a8..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/53.7207ffc5.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{402:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx2-9-版本正式发布-支持原子类、ssr-和包体积优化"}},[t._v("#")]),t._v(" Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化")]),t._v(" "),s("blockquote",[s("p",[t._v("作者："),s("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[t._v("hiyuki"),s("OutboundLink")],1)])]),t._v(" "),s("p",[s("a",{attrs:{href:"https://github.com/didi/mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx"),s("OutboundLink")],1),t._v(" 是滴滴开源的一款增强型跨端小程序框架，自2018年立项开源以来如今已经进入第六个年头，在这六年间，Mpx 根植于业务，与业务共同成长，针对小程序业务开发中遇到的各类痛点问题提出了解决方案，并在集团内部建设了完善的小程序跨端开发生态。目前，Mpx 已经覆盖支持了集团内部全量小程序业务开发，成为了集团小程序开发的统一技术标准。")]),t._v(" "),s("p",[t._v("随着小程序业务的发展演进，性能和包体积的重要性愈发凸显，Mpx从设计之初就非常重视性能和包体积的优化，本次的 "),s("strong",[t._v("Mpx2.9")]),t._v(" 版本更新带来的三大核心特性——原子类、SSR 和包体积优化也都与性能和包体积息息相关，下面我们逐个展开介绍。")]),t._v(" "),s("h2",{attrs:{id:"原子类支持"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原子类支持"}},[t._v("#")]),t._v(" 原子类支持")]),t._v(" "),s("p",[t._v("原子类(utility-first CSS)是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，比较知名的有 "),s("a",{attrs:{href:"https://github.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github"),s("OutboundLink")],1),t._v("，"),s("a",{attrs:{href:"https://openai.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("OpenAI"),s("OutboundLink")],1),t._v("，"),s("a",{attrs:{href:"https://top10.netflix.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Netflix"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://www.jpl.nasa.gov/",target:"_blank",rel:"noopener noreferrer"}},[t._v("NASA官网"),s("OutboundLink")],1),t._v(" 等。使用原子类离不开原子类框架的支持，常用的原子类框架有 "),s("a",{attrs:{href:"https://tailwindcss.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Tailwindcss"),s("OutboundLink")],1),t._v("、"),s("a",{attrs:{href:"https://windicss.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Windicss"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://unocss.dev/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Unocss"),s("OutboundLink")],1),t._v(" 等。")]),t._v(" "),s("p",[t._v("在 Mpx2.9 版本中，我们在框架中内置了原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx 页面/组件模板中直接使用一些预定义的基础样式类，诸如 flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("flex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-base text-black font-semibold mb-2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Erin Lindford\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-gray-500 font-medium pb-3"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Product Engineer\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Message\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/Or3aaN-mmxV8pK-LmEVPm_demo.png",alt:"utility-css-demo"}})]),t._v(" "),s("p",[t._v("相较于传统的自定义类编写样式的方式，使用原子类能给你带来以下这些好处：")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("不用再烦恼于为自定义类取类名")]),t._v("，传统样式开发中，我们仅仅是为某个元素定义样式就需要绞尽脑汁发明一些抽象的类名，还得提防类名冲突，使用原子类可以完全将你从这种琐碎无趣的工作中解放；")]),t._v(" "),s("li",[s("strong",[t._v("停止 css 体积的无序增长")]),t._v("，传统样式开发中，css 体积会随着你的迭代不断增长，而在原子类中，一切样式都可以复用，你几乎不需要编写新的 css；")]),t._v(" "),s("li",[s("strong",[t._v("让调整样式变得更加安全")]),t._v("，传统 css 是全局的，当你修改某个样式时无法保障其不会破坏其他地方的样式，而你在模板中使用的原子类是本地的，你完全不用担心修改它会影响其他地方。")])]),t._v(" "),s("p",[t._v("而相较于使用内联样式，原子类也有一些重要的优势：")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("约束下的设计")]),t._v("，使用内联样式时，里面的每一个数值都是魔法数字（magic number）\n，而通过原子工具类，你可以选择一些符合预定义设计规范的样式，便于构筑具有视觉一致性的UI；")]),t._v(" "),s("li",[s("strong",[t._v("响应式设计")]),t._v("，你无法在内联样式中使用媒体查询，然而通过原子类框架中提供的响应式工具，你可以轻而易举地构建出响应式界面；")]),t._v(" "),s("li",[s("strong",[t._v("Hover、focus 和其他状态")]),t._v("，使用内联样式无法定义特定状态下的样式，如 hover 和 focus，通过原子类框架的状态变量能力，我们可以轻松为这些状态定义样式。")])]),t._v(" "),s("p",[t._v("看到这里相信你已经迫不及待地想要在 Mpx 中体验原子类开发了吧，使用最新版本的 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 脚手架创建项目时，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用原子类，可使用的工具类可以参考 "),s("a",{attrs:{href:"https://unocss.dev/interactive/",target:"_blank",rel:"noopener noreferrer"}},[t._v("交互示例"),s("OutboundLink")],1),t._v("，在已有项目中开启原子类支持可以参考"),s("a",{attrs:{href:"https://mpxjs.cn/guide/advance/utility-first-css.html#compile-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("配置指南"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"小程序原子类使用注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#小程序原子类使用注意事项"}},[t._v("#")]),t._v(" 小程序原子类使用注意事项")]),t._v(" "),s("p",[t._v("小程序和 web 环境对于 css 的支持存在底层差异，小程序内也存在大量自身独有的技术特性，Mpx 在支持原子类时针对这些环境特异性进行了抹平和适配，在框架的支持下，我们实现了大部分（超过90%）原子类功能和工具类在小程序环境下正常使用，并额外支持了原子类产物的分包输出和样式隔离下的原子类使用，详情如下：")]),t._v(" "),s("h4",{attrs:{id:"特殊字符转义"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#特殊字符转义"}},[t._v("#")]),t._v(" 特殊字符转义")]),t._v(" "),s("p",[t._v("现代原子类框架支持 "),s("code",[t._v("value auto-infer")]),t._v("（值自动推导），可以在模版中根据相关规则书写灵活的自定义值原子类，如 "),s("code",[t._v("p-5px bg-[hsl(211.7,81.9%,69.6%)]")]),t._v(" 等，针对原子类中出现的 "),s("code",[t._v("[")]),t._v(" "),s("code",[t._v("(")]),t._v(" "),s("code",[t._v(",")]),t._v(" 等特殊字符，在 web 中会通过转义字符 "),s("code",[t._v("\\")]),t._v(" 进行转义，由于小程序环境下不支持 css 选择器中出现 "),s("code",[t._v("\\")]),t._v(" 转义字符，我们内置支持了一套不带 "),s("code",[t._v("\\")]),t._v(" 的转义规则对这些特殊字符进行转义，同时替换模版和 css 文件中的类名，内建的默认转义规则如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" escapeMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'('")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_pl_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("')'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_pr_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'['")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_bl_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("']'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_br_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'{'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_cl_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'}'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_cr_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'#'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_h_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'!'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_i_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'/'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_s_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'.'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_d_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("':'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_c_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("','")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_2c_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'%'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_p_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'\\''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_q_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'\"'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_dq_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'+'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_a_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_si_'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unknown用于兜底不在上述范围中未知的转义字符")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unknown")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_u_'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("与此同时，用户也可以通过传递 "),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 的 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#escapeMap",target:"_blank",rel:"noopener noreferrer"}},[t._v("escapeMap"),s("OutboundLink")],1),t._v(" 配置项来覆盖内建的转义规则。")]),t._v(" "),s("h4",{attrs:{id:"原子类分包输出"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原子类分包输出"}},[t._v("#")]),t._v(" 原子类分包输出")]),t._v(" "),s("p",[t._v("在 web 中，原子类会被全部打包输出单个样式文件，一般会放置在顶层样式表中以供全局访问，但在小程序中这种全量的输出策略并不是最优的，主要原因在于小程序中可供全局访问的主包体积存在 "),s("strong",[t._v("2M 大小限制")]),t._v("，主包体积十分紧缺珍贵，Mpx 在构建输出时遵循着分包优先的原则，尽可能充分利用分包体积从而减少对主包体积的占用，再进行原子类产物输出时，我们也遵循了相同的原则。")]),t._v(" "),s("p",[t._v("在Mpx中，我们在收集原子类时同时记录了每个原子类的引用分包，在收集结束后根据每个原子类的分包引用数量决定该原子类应该输出到主包还是分包当中，我们在 "),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 中提供了 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#minCount",target:"_blank",rel:"noopener noreferrer"}},[t._v("minCount"),s("OutboundLink")],1),t._v(" 配置项来决定分包的输出规则，该配置项的默认值为2，即当一个原子类被2个或以上分包引用时，会被作为公共原子类抽取到主包中，否则输出到所属分包中，这也是全局最优的策略。当我们想要让原子类输出产物更少地占用主包体积时，我们也可以将"),s("code",[t._v("minCount")]),t._v("值调大，让原子类抽取到主包的条件更加苛刻，不过这样也会伴随着原子类分包冗余的增加。")]),t._v(" "),s("p",[s("code",[t._v("unocss.config.js")]),t._v(" 配置中定义的 "),s("code",[t._v("safelist")]),t._v(" 原子类默认会输出到主包，为了组件局部使用的 "),s("code",[t._v("safelist")]),t._v(" 有输出到分包的机会，我们在模版中提供了"),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#commentConfig",target:"_blank",rel:"noopener noreferrer"}},[t._v("注释配置"),s("OutboundLink")],1),t._v("（comments config），灵感来源于 "),s("code",[t._v("webpack")]),t._v(" 中的魔法注释（magic comments），用户可以在组件模版中通过"),s("code",[t._v("注释配置")]),t._v("声明当前组件所需的 "),s("code",[t._v("safelist")]),t._v("，对应的原子类也会根据上述的规则输出到主包或分包中，使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_safelist: 'text-red-500 bg-blue-500' --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 动态样式中可以使用text-red-500和bg-blue-500原子类 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{classObj}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h4",{attrs:{id:"样式隔离与组件分包异步"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#样式隔离与组件分包异步"}},[t._v("#")]),t._v(" 样式隔离与组件分包异步")]),t._v(" "),s("p",[t._v("在小程序中，自定义组件的样式默认是隔离的，web 中通过全局样式访问原子类的方式不再生效，不过由于小程序提供了"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB",target:"_blank",rel:"noopener noreferrer"}},[t._v("样式隔离配置"),s("OutboundLink")],1),t._v("，我们可以将该组件样式隔离配置调整为 "),s("code",[t._v("apply-shared")]),t._v(" 来获取页面或 app 中定义的原子类，但是当我们在使用传统类名和原子类混合开发或者迁移原子类的过程中，我们往往希望保留原本自定义组件的样式隔离。")]),t._v(" "),s("p",[t._v("针对这种情况，我们在 "),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 中提供了 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#styleIsolation",target:"_blank",rel:"noopener noreferrer"}},[t._v("styleIsolation"),s("OutboundLink")],1),t._v(" 配置项，可选设置为 "),s("code",[t._v("isolated")]),t._v("|"),s("code",[t._v("apply-shared")]),t._v("，当设置为 "),s("code",[t._v("isolated")]),t._v(" 时每个组件都会通过 "),s("code",[t._v("@import")]),t._v(" 独立引用主包或者分包的原子类样式文件，因此不会受到样式隔离的影响；当设置为 "),s("code",[t._v("apply-shared")]),t._v(" 时，只有 app 和分包页面会引用对应的原子类样式文件，自定义组件需要通过配置样式隔离为 "),s("code",[t._v("apply-shared")]),t._v(" 使原子类生效。")]),t._v(" "),s("p",[t._v("在组件分包异步的情况下对应组件即使将样式隔离配置为 "),s("code",[t._v("apply-shared")]),t._v(" 的情况下，"),s("code",[t._v("@mpxjs/unocss-plugin")]),t._v(" 也需要将  "),s("code",[t._v("styleIsolation")]),t._v(" 设置为 "),s("code",[t._v("isolated")]),t._v(" 才能正常工作，原因在于组件分包异步的情况下，组件被其他分包的页面所引用渲染，由于上述原子类样式分包输出的规则，其他分包的页面中可能并不包含当前组件所需的原子类，只有在 "),s("code",[t._v("isolated")]),t._v(" 模式下由组件自身引用所需的原子类样式才能保证正常工作，类似于 "),s("code",[t._v("safelist")]),t._v("，我们也提供了"),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#commentConfig",target:"_blank",rel:"noopener noreferrer"}},[t._v("注释配置"),s("OutboundLink")],1),t._v("的方式对组件的 "),s("code",[t._v("styleIsolation")]),t._v(" 模式进行局部配置，示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_styleIsolation: 'isolated' --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 当前组件会直接引用对应主包或分包的原子类样式 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("@dark:(text-white bg-dark-500)"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"原子类使用参考文档"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原子类使用参考文档"}},[t._v("#")]),t._v(" 原子类使用参考文档")]),t._v(" "),s("p",[t._v("Mpx 中使用原子类的详细参考文档如下：")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://mpxjs.cn/guide/advance/utility-first-css.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("原子类使用指南"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#MpxUnocssPlugin",target:"_blank",rel:"noopener noreferrer"}},[t._v("原子类 API 参考"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"输出-web-支持-ssr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#输出-web-支持-ssr"}},[t._v("#")]),t._v(" 输出 web 支持 SSR")]),t._v(" "),s("p",[t._v("近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，各类SSR框架层出不穷，未来进一步提升性能表现，在 SSR 的基础上还演进出 "),s("a",{attrs:{href:"https://docs.astro.build/en/concepts/islands/",target:"_blank",rel:"noopener noreferrer"}},[t._v("islands architecture"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://qwik.builder.io/docs/concepts/resumable/",target:"_blank",rel:"noopener noreferrer"}},[t._v("0 hydration"),s("OutboundLink")],1),t._v(" 等更加精细复杂的理念和架构。")]),t._v(" "),s("p",[t._v("近两年随着团队对于前端性能的重视，SSR/SSG 技术也在团队业务中逐步推广落地，并在首屏性能方面取得了显著的收效。但由于过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 Mpx2.9 版本中，我们对 web 输出流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整实现了 SSR 技术方案。")]),t._v(" "),s("h3",{attrs:{id:"配置使用-ssr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置使用-ssr"}},[t._v("#")]),t._v(" 配置使用 SSR")]),t._v(" "),s("p",[t._v("在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85",alt:"Vue SSR流程"}})]),t._v(" "),s("p",[t._v("Mpx SSR 实现的大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：")]),t._v(" "),s("h4",{attrs:{id:"构建server-client-bundle"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#构建server-client-bundle"}},[t._v("#")]),t._v(" 构建server/client bundle")]),t._v(" "),s("p",[t._v("SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。\n在 Vue 中，我们需要提供 "),s("code",[t._v("entry-server.js")]),t._v(" 和 "),s("code",[t._v("entry-client.js")]),t._v(" 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 "),s("code",[t._v("app.mpx")]),t._v(" 作为统一构建入口，无需区分 server 和 client。")]),t._v(" "),s("h5",{attrs:{id:"服务端构建配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#服务端构建配置"}},[t._v("#")]),t._v(" 服务端构建配置")]),t._v(" "),s("p",[t._v("服务端配置中除了将 entry 制定为 "),s("code",[t._v("app.mpx")]),t._v(" 及其它基础配置外，最重要的是安装 "),s("code",[t._v("vue-server-renderer")]),t._v(" 包中提供的  "),s("code",[t._v("server-plugin")]),t._v(" 插件，该插件能够构建产出 "),s("code",[t._v("vue-ssr-server-bundle.json")]),t._v(" 文件供 "),s("code",[t._v("renderer")]),t._v(" 后续消费。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.server.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" VueSSRServerPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer/server-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 entry 指向项目的 app.mpx 文件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 产出 `vue-ssr-server-bundle.json`")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueSSRServerPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更加详细的配置说明可参考 "),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/build-config.html#server-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue SSR的服务端配置"),s("OutboundLink")],1)]),t._v(" "),s("h5",{attrs:{id:"客户端构建配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#客户端构建配置"}},[t._v("#")]),t._v(" 客户端构建配置")]),t._v(" "),s("p",[t._v("类似服务端构建配置，在客户端构建中我们需要使用 "),s("code",[t._v("vue-server-renderer")]),t._v(" 包中 "),s("code",[t._v("client-plugin")]),t._v(" 插件来帮助我们生成客户端环境的资源清单 "),s("code",[t._v("vue-ssr-client-manifest.json")]),t._v("，并供 "),s("code",[t._v("renderer")]),t._v(" 后续消费。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.client.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" VueSSRClientPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer/client-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 entry 指向项目的 app.mpx 文件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 产出 `vue-ssr-client-manifest.json`。")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueSSRClientPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更加详细的配置说明可参考 "),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/build-config.html#client-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue SSR的客户端配置"),s("OutboundLink")],1)]),t._v(" "),s("h4",{attrs:{id:"准备页面模版"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#准备页面模版"}},[t._v("#")]),t._v(" 准备页面模版")]),t._v(" "),s("p",[t._v("SSR 渲染中，我们创建 "),s("code",[t._v("renderer")]),t._v(" 需要一个页面模板，简单的示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token doctype"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<!")]),s("span",{pre:!0,attrs:{class:"token doctype-tag"}},[t._v("DOCTYPE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token name"}},[t._v("html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("en"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Hello"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--vue-ssr-outlet--\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 "),s("code",[t._v("\x3c!--vue-ssr-outlet--\x3e")]),t._v("注释，标记 SSR 渲染产物的插入位置，如使用 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 脚手架创建 SSR 项目，该模版已经内置于脚手架中。")]),t._v(" "),s("h4",{attrs:{id:"集成启动-ssr-服务"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#集成启动-ssr-服务"}},[t._v("#")]),t._v(" 集成启动 SSR 服务")]),t._v(" "),s("p",[t._v("当我们准备好页面模版和双端构建产物后，我们就可以创建 "),s("code",[t._v("renderer")]),t._v(" 并与 Node 服务进行集成，启动 SSR 服务，下面以 "),s("code",[t._v("express")]),t._v(" 为例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//server.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" app "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'express'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createBundleRenderer "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 vue-server-renderer/server-plugin 生成的文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" serverBundle "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../dist/server/vue-ssr-server-bundle.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 vue-server-renderer/client-plugin 生成的文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" clientManifest "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../dist/client/vue-ssr-client-manifest.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 页面模版文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" template "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("readFileSync")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/index.template.html'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'utf-8'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建 renderer 渲染器")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" renderer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createBundleRenderer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("serverBundle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("runInNewContext")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    template"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    clientManifest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注册启动 SSR 服务")]),t._v("\napp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'*'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("req"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" req"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  renderer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("renderToString")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Internal Server Error'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("html"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\napp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("listen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8080")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"ssr-生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ssr-生命周期"}},[t._v("#")]),t._v(" SSR 生命周期")]),t._v(" "),s("p",[t._v("在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是"),s("code",[t._v("onAppInit")]),t._v("、"),s("code",[t._v("serverPrefetch")]),t._v(" 和 "),s("code",[t._v("onSSRAppCreated")]),t._v("，以统一服务端与客户端的构建入口，下面展开介绍：")]),t._v(" "),s("h4",{attrs:{id:"onappinit"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onappinit"}},[t._v("#")]),t._v(" onAppInit")]),t._v(" "),s("p",[t._v("在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，"),s("code",[t._v("onAppInit")]),t._v(" 生命周期会在应用创建 "),s("code",[t._v("new Vue(...)")]),t._v(" 前被调用，其执行的返回结果会被合并到创建应用的 "),s("code",[t._v("options")]),t._v(" 中")]),t._v(" "),s("p",[t._v("很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 "),s("code",[t._v("@mpxjs/pinia")]),t._v(" 作为全局状态管理工具，我们可以在 "),s("code",[t._v("onAppInit")]),t._v(" 中返回全新的 "),s("code",[t._v("pinia")]),t._v(" 示例避免产生跨请求状态污染，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPinia "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onAppInit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pinia "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPinia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      pinia\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"serverprefetch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#serverprefetch"}},[t._v("#")]),t._v(" serverPrefetch")]),t._v(" "),s("p",[t._v("当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：")]),t._v(" "),s("p",[t._v("选项式 API：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useStore "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store/index'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("serverPrefetch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" query "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("query\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the promise from the action, fetch data and update state")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("query"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("组合式 API：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" onServerPrefetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getCurrentInstance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useStore "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store/index'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("userStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onServerPrefetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" query "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getCurrentInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("proxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("query\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the promise from the action, fetch data and update state")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("query"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("关于数据预拉取更详细的说明可以查看"),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/data.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("h4",{attrs:{id:"onssrappcreated"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onssrappcreated"}},[t._v("#")]),t._v(" onSSRAppCreated")]),t._v(" "),s("p",[t._v("在 Vue SSR 项目中，我们会在 "),s("code",[t._v("entry-server.js")]),t._v(" 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 "),s("code",[t._v("app")]),t._v("。")]),t._v(" "),s("p",[t._v("在 Mpx SSR 中，我们将这部分逻辑整合在 "),s("code",[t._v("onSSRAppCreated")]),t._v(" 中执行，该生命周期执行时用户可以从参数中获取应用实例 "),s("code",[t._v("app")]),t._v("、路由实例 "),s("code",[t._v("router")]),t._v("、数据管理实例 "),s("code",[t._v("pinia")]),t._v(" 和 SSR 上下文 "),s("code",[t._v("context")]),t._v("，在完成必要的操作后，该生命周期需要返回一个 "),s("code",[t._v("resolve(app)")]),t._v(" 的 promise。")]),t._v(" "),s("p",[t._v("通常我们会在 "),s("code",[t._v("onSSRAppCreated")]),t._v(" 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...,")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onSSRAppCreated")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置服务端路由路径")]),t._v("\n        router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 应用完成渲染时执行")]),t._v("\n          context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("rendered")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将服务端渲染后得到的 pinia.state 同步到 context.state 中，")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注入到 HTML 中，并在客户端运行时再读取同步")]),t._v("\n            context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回应用程序实例")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。")]),t._v(" "),s("h3",{attrs:{id:"其他注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#其他注意事项"}},[t._v("#")]),t._v(" 其他注意事项")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。")])]),t._v(" "),s("li",[s("p",[t._v("在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。")])]),t._v(" "),s("li",[s("p",[t._v("由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 "),s("code",[t._v("mpx.config.webRouteConfig")]),t._v(" 将路由模式设置成 "),s("code",[t._v("history")]),t._v(" 模式。")])])]),t._v(" "),s("h2",{attrs:{id:"包体积优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#包体积优化"}},[t._v("#")]),t._v(" 包体积优化")]),t._v(" "),s("p",[t._v("近几年来随着小程序的商业成功和用户增长，各大互联网公司都在加大对小程序业务的投入，小程序的体量和复杂性都在快速增长，在这样的背景下，小程序的包体积大小成为了制约小程序业务迭代发展的一大限制，同时过大的包体积也会显著影响小程序的性能表现。")]),t._v(" "),s("p",[t._v("Mpx 在设计之初就考虑了包体积问题，完整继承了 webpack 已有的代码优化能力，如公共模块抽离、tree shaking、混淆压缩等。除此之外，我们还设计开发了业内最完善的分包构建流程，完整支持基于配置声明和依赖分析的普通分包、独立分包及分包异步化的构建输出，极大地缓解了复杂小程序中的主包和总包体积过大的问题。在 Mpx2.9 版本中，我们针对复杂小程序页面组件和 JS 模块众多的特点，对构建产物进行了针对性地优化，进一步降低了构建产物体积，主要优化项如下：")]),t._v(" "),s("h3",{attrs:{id:"模版代码优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模版代码优化"}},[t._v("#")]),t._v(" 模版代码优化")]),t._v(" "),s("p",[t._v("Mpx 通过 webpack 进行打包构建，并对小程序原生 commonjs 支持进行适配改造，以实现 webpack 构建产物在小程序环境下运行，为了将构建产物中的模块和 chunk 链接到一起，webpack 和 mpx 会在构建产物生成一些模版代码进行相关工作，下面是一个页面 js 中包含的模版代码示例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" self "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nself"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackChunkmpx_test_2_8 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../bundle.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("self"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackChunkmpx_test_2_8 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" self"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackChunkmpx_test_2_8 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("405")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1307")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" o")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4236")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" e\n  e "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1307")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("s "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("可以看出模版代码主要由 chunk 链接代码，chunk id，模块 id 和模块包装函数组成，对于中小项目来说，这些模版代码一般不会占用太多体积，但是在复杂大体量小程序中众多模块的叠加效应下，这部分体积就变得不可忽视。")]),t._v(" "),s("p",[t._v("我们对模版代码的生成逻辑和生成产物进行分析，发现 webpack 生产模式的默认配置中，很多配置项并不是体积最优的选项，一个典型的例子在于模块/chunk id：为了保障生成产物的内容稳定，来尽可能提升浏览器的缓存利用率，webpack 默认的模块/chunk id 采用 "),s("code",[t._v("deterministic")]),t._v(" 模式进行生成，该模式下模块 id 为模块源路径的定长数字 hash，比项目模块总数长 1 位。由于在小程序中代码包按照版本的维度进行全量管理，保证文件局部的内容稳定在小程序环境下无正向意义，这就有了优化空间，我们可以简单将模块/chunk id 的生成逻辑改为数字自增，在主小程序中就能节省出上百 KB 总包体积。")]),t._v(" "),s("p",[t._v("类似的可优化点还存在于 chunk 链接代码和模块包装函数当中，我们在 "),s("code",[t._v("@mpxjs/webpack-plugin@2.9")]),t._v(" 版本中提供了一个新的配置项 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#optimizesize",target:"_blank",rel:"noopener noreferrer"}},[t._v("optimizeSize"),s("OutboundLink")],1),t._v("，其中整合了一系列模版代码体积优化配置，开启后就能自动优化构建产物中的模版代码体积，在实际业务中，我们开启 "),s("code",[t._v("optimizeSize")]),t._v(" 后可以减少总包体积约 "),s("strong",[t._v("1.6%")]),t._v("，效果非常显著，下面是上述示例在开启 "),s("code",[t._v("optimizeSize")]),t._v(" 后的产物对比：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" g "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\ng"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../bundle.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" g"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("448")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" o")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("463")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" e\n  e "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("448")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("s "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"空模块移除"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#空模块移除"}},[t._v("#")]),t._v(" 空模块移除")]),t._v(" "),s("p",[t._v("Mpx 在处理 "),s("code",[t._v(".mpx")]),t._v(" 单文件时会将其分拆为 "),s("code",[t._v("template/js/style/json")]),t._v(" 四个新模块来进行分别处理，其中 "),s("code",[t._v("template/style/json")]),t._v(" 部分的内容会在处理后通过内置的 "),s("code",[t._v("extractor")]),t._v(" 抽取输出为静态文件，抽取之后原本分拆出来的模块就会以空模块的形式残留在构建产物中（template 模块在抽取后还需要保留 render 函数和 refs 等信息所以不会成为空模块），如下所示：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("533")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("__unused_webpack_module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" __unused_webpack_exports"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" __webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* template */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("535")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("536")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* json */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("537")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* script */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__webpack_require__")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("534")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("536")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("537")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/***/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("从上面示例中可以看出 "),s("code",[t._v("536/537")]),t._v(" 模块的定义和引用都是完全不必要的，但由于 webpack 本身对于空模块没有进行识别和优化的手段，在过去的版本中这些空模块代码会占用我们一部分总包体积。在 Mpx2.9 版本中，我们定义了全新的依赖类型 "),s("code",[t._v("CommonjsExtractDependency")]),t._v(" 对于这类可能被抽取成为空模块的 "),s("code",[t._v("request")]),t._v(" 进行识别处理，当模块内容在完成抽取后为空时，自动将其从模块图中移除，并在产物生成时不再生成其引用代码。该项优化措施内置开启，升级后自动生效，在实际业务中可减少总包体积约 "),s("strong",[t._v("0.7%")]),t._v("。")]),t._v(" "),s("h3",{attrs:{id:"render函数优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#render函数优化"}},[t._v("#")]),t._v(" Render函数优化")]),t._v(" "),s("p",[t._v("Render 函数是 Mpx 运行时 "),s("code",[t._v("setData")]),t._v(" 优化的一项核心设计，我们在模版编译时将用户模版转换为简易的 render 函数，该函数执行时能够完全模拟视图渲染的数据访问过程，正确地收集当前视图的数据依赖，避免将视图不需要的数据通过 "),s("code",[t._v("setData")]),t._v(" 发送到视图中。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/ZQ6p8Rs2m7QCumOll3nmd.jpg",alt:"render函数"}})]),t._v(" "),s("p",[t._v("虽然我们生成的简化版 render 函数仅保留了数据访问逻辑，在代码体积上并不算大，但是仍然存在着一定的优化空间，我们来看下面这个例子：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("可以看出 "),s("code",[t._v("if block")]),t._v(" 下存在着大量冗余不必要的数据访问，例如 "),s("code",[t._v("this.a")]),t._v(" 和 "),s("code",[t._v("this.b")]),t._v(" 在父级 "),s("code",[t._v("block")]),t._v(" 中已经进行过访问，"),s("code",[t._v("this.c.a")]),t._v(" 和 "),s("code",[t._v("this.c.b")]),t._v(" 由于在 "),s("code",[t._v("if condition")]),t._v(" 中进行过 "),s("code",[t._v("this.c")]),t._v(" 的访问也不再必要（render函数执行时会对模版依赖数据进行深度diff，父路径访问后子路径就无需再进行访问），上述 render 函数可以优化为：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在 Mpx2.9 版本中，我们通过两轮 "),s("code",[t._v("ast")]),t._v(" 遍历（"),s("code",[t._v("2 pass ast travese")]),t._v("）的方式实现了这个优化，在第一轮遍历中，我们收集了数据访问信息并按照 "),s("code",[t._v("block")]),t._v(" 结构存储在 "),s("code",[t._v("blockVisitTree")]),t._v(" 中，第二轮遍历时依据 "),s("code",[t._v("blockVisitTree")]),t._v(" 中的信息对不必要的数据访问进行剪枝优化。")]),t._v(" "),s("p",[t._v("除此之外，我们也大幅优化了 render 函数中的数据收集代码，有效地降低了 render 函数的体积占用。")]),t._v(" "),s("p",[t._v("该优化目前没有默认开启，可以通过 "),s("code",[t._v("@mpxjs/webpack-plugin")]),t._v(" 中的 "),s("a",{attrs:{href:"https://mpxjs.cn/api/compile.html#optimizerenderrules",target:"_blank",rel:"noopener noreferrer"}},[t._v("optimizeRenderRules"),s("OutboundLink")],1),t._v(" 配置项配置生效范围进行开启，全量开启后在实际业务中可节省总包体积约 "),s("strong",[t._v("5%")]),t._v("。")]),t._v(" "),s("h2",{attrs:{id:"未来规划"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#未来规划"}},[t._v("#")]),t._v(" 未来规划")]),t._v(" "),s("p",[t._v("在未来，我们对 Mpx 构建产物还有进一步的优化方案可以探索实施，主要分为两个方向：")]),t._v(" "),s("ul",[s("li",[t._v("编译注入代码优化，在功能不变的情况下简化编译注入的代码，对于 render 函数也有一种运行时有损的方案（略微增大运行时开销）可以尝试")]),t._v(" "),s("li",[t._v("模版和JSON压缩，对模版和JSON中的组件名及组件路径进行短哈希压缩，缺点是丢失dist产物的可读性，可能需要对其提供 sourceMap 支持")])]),t._v(" "),s("p",[t._v("除此之外，我们近期的框架升级计划还包括：")]),t._v(" "),s("ul",[s("li",[t._v("局部运行时渲染增强")]),t._v(" "),s("li",[t._v("数据响应升级为 proxy 实现，输出 web 升级为 vue3")]),t._v(" "),s("li",[t._v("支付宝 2.0 基础库适配优化")]),t._v(" "),s("li",[t._v("微信 skyline 适配优化")]),t._v(" "),s("li",[t._v("输出 Hummer 能力完善")])]),t._v(" "),s("p",[t._v("在构建提速方面，我们也会在以下方向进行探索：")]),t._v(" "),s("ul",[s("li",[t._v("输出 web 支持 vite 构建")]),t._v(" "),s("li",[t._v("基于模块联邦的分布式构建")]),t._v(" "),s("li",[t._v("基于 Rust 的高性能构建探索")])]),t._v(" "),s("p",[t._v("最后，特别感谢@"),s("a",{attrs:{href:"https://github.com/pagnkelly",target:"_blank",rel:"noopener noreferrer"}},[t._v("pagnkelly"),s("OutboundLink")],1),t._v("、@"),s("a",{attrs:{href:"https://github.com/yandadaFreedom",target:"_blank",rel:"noopener noreferrer"}},[t._v("yandadaFreedom"),s("OutboundLink")],1),t._v("和\n@"),s("a",{attrs:{href:"https://github.com/zhuzhh",target:"_blank",rel:"noopener noreferrer"}},[t._v("zhuzhh"),s("OutboundLink")],1),t._v("对于 2.9 版本功能开发的突出贡献，也欢迎大家使用 Mpx 进行小程序跨端开发并加入社区共建。")]),t._v(" "),s("p",[t._v("Github：https://github.com/didi/mpx")]),t._v(" "),s("p",[t._v("官网/文档：https://mpxjs.cn/")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/54.af3d3dcd.js b/docs-vuepress/.vuepress/dist/assets/js/54.af3d3dcd.js
deleted file mode 100644
index 9223e3bf5a..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/54.af3d3dcd.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{399:function(t,r,e){"use strict";e.r(r);var l=e(4),i=Object(l.a)({},(function(){var t=this,r=t._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"mpx框架相关文章"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#mpx框架相关文章"}},[t._v("#")]),t._v(" Mpx框架相关文章")]),t._v(" "),r("ul",[r("li",[r("RouterLink",{attrs:{to:"/articles/1.0.html"}},[t._v("滴滴开源小程序框架Mpx")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/2.0.html"}},[t._v("Mpx发布2.0，完美支持跨平台开发")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/performance.html"}},[t._v("小程序框架运行时性能大测评")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/mpx1.html"}},[t._v("Mpx框架初体验")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/mpx2.html"}},[t._v("Mpx框架技术揭秘")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/size-control.html"}},[t._v("基于Mpx框架做体积优化")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/ts-derivation.html"}},[t._v("Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/2.7-release.html"}},[t._v("Mpx2.7 版本正式发布，大幅提升编译构建速度")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/2.8-release.html"}},[t._v("Mpx2.8 版本正式发布，使用组合式 API 开发小程序")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/mpx-cli-next.html"}},[t._v("Mpx-cli 插件化改造")])],1),t._v(" "),r("li",[r("RouterLink",{attrs:{to:"/articles/unit-test.html"}},[t._v("Mpx 小程序单元测试能力建设与实践")])],1)])])}),[],!1,null,null,null);r.default=i.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/55.2d6ae2e1.js b/docs-vuepress/.vuepress/dist/assets/js/55.2d6ae2e1.js
deleted file mode 100644
index 569840f194..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/55.2d6ae2e1.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{405:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"mpxjs-cli-插件化改造"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxjs-cli-插件化改造"}},[t._v("#")]),t._v(" @mpxjs/cli 插件化改造")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli",target:"_blank",rel:"noopener noreferrer"}},[t._v("@mxpjs/cli 地址"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"背景-现状"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#背景-现状"}},[t._v("#")]),t._v(" 背景 & 现状")]),t._v(" "),s("p",[t._v("Mpx 脚手架 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 作为 Mpx 生态当中比较重要的一部分，是使用 Mpx 进行小程序开发的入口。")]),t._v(" "),s("p",[s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 版本整体是基于模板配置的方式完成项目的初始化，整个的工作流是：")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("下载一份存放于远端的 mpx 项目原始模板（mpx-template）")])]),t._v(" "),s("li",[s("p",[t._v("根据用户的 prompts 选项完成用户选项的注入，并初始化最终的项目文件")])])]),t._v(" "),s("p",[t._v("完成项目的初始化后，除了一些基础配置文件外，整个项目的文件主要包含了如下的结构：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("project\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" src "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 项目源码")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" config "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 项目配置文件")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置入口文件")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" mpxLoader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("conf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx-loader 配置")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" mpxPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("conf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx webpack-plugin 配置")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("conf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 用户的 prompts 选择信息")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" build "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 编译构建配置")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" build"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 构建编译脚本")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" getPlugins"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack plugins ")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" getRules"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack module rules")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" getWebpackConf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack 配置生成辅助函数")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" utils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 工具函数")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" webpack"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("base"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("conf"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack 基础配置")]),t._v("\n")])])]),s("p",[t._v("在初始化的项目当中，有关项目的所有配置文件，编译构建代码是全部暴露给开发者的，开发者可以对这些文件进行修改来满足自己实际的项目开发需要。同时还可以基于这一套原始的模板文件二次拓展为满足自己业务场景的模板。")]),t._v(" "),s("p",[s("strong",[t._v("基于远程模板初始化项目的方式最大的一个好处就是将项目所有的底层配置完全暴露给开发者，开发者可以任意去修改对应的配置。")])]),t._v(" "),s("h2",{attrs:{id:"mpxjs-cli-2-x-自身的痛点"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpxjs-cli-2-x-自身的痛点"}},[t._v("#")]),t._v(" "),s("code",[t._v("mpxjs/cli@2.x")]),t._v(" 自身的痛点")]),t._v(" "),s("p",[t._v("目前 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 采用这种基于模板的方式面临着两方面的痛点：")]),t._v(" "),s("ol",[s("li",[t._v("对于 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 的使用者而言：")])]),t._v(" "),s("ul",[s("li",[s("p",[t._v("模板和业务项目割裂：远程模板没有严格的版本控制，用户无法感知到远程模板的更新变化；")])]),t._v(" "),s("li",[s("p",[t._v("项目升级困难：对于用户来说没有一个很好的方式完成升级工作，基本只能通过 copy 代码的方式，将 "),s("code",[t._v("mpx-template")]),t._v(" 更新后的内容复制一份到自己的项目当中；或者是通过脚手架重新创建一个新的项目，将老的代码迁移到新项目当中；")])]),t._v(" "),s("li",[s("p",[t._v("项目结构臃肿：从项目结构角度来说没法做到按需，初始化代码臃肿。Mpx 支持了小程序跨平台、跨端、小程序插件等等相关的开发，不同的编译构建配置都需要全部生成，在运行时阶段才能决定是否启动对应的功能；")])]),t._v(" "),s("li",[s("p",[t._v("跨 Web 构建能力弱：在基于 Mpx 的跨 Web 场景构建中有关 "),s("code",[t._v("web")]),t._v(" 侧的编译构建的配置是比较初级的，像 "),s("code",[t._v("MPA 多页应用")]),t._v(" 等比较常用的功能是需要用户重新去手动搭建一套的；")])]),t._v(" "),s("li",[s("p",[t._v("可拓展性差，基于目前的模板拉取的方式无法满足多样化的业务需求场景迭代；")])])]),t._v(" "),s("ol",{attrs:{start:"2"}},[s("li",[t._v("对于 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 的开发者而言：")])]),t._v(" "),s("ul",[s("li",[t._v("分支场景多，功能模块耦合度高：脚手架的所有功能全部集合到一个大的模板当中。各部分的能力都是耦合在一起，为了满足不同项目的实际开发需要，代码里面需要写比较多的 "),s("code",[t._v("if...else...")]),t._v(" 判断逻辑来决定要开启哪些功能，生成哪部分的模板；")]),t._v(" "),s("li",[t._v("长期可维护性差，开发心智负担重；")])]),t._v(" "),s("p",[s("strong",[t._v("针对以上问题，通过调研业内一些优秀的脚手架工具，发现 "),s("code",[t._v("@vue/cli")]),t._v(" 插件化的架构设计能很好的去解决我们以上所遇到的问题。核心思路是将 "),s("code",[t._v("@vue/cli")]),t._v(" 作为 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 底层的引擎，收敛 Mpx 对于核心依赖管理、模板、构建配置的能力，充分利用 "),s("code",[t._v("@vue/cli")]),t._v(" 提供的插件机制去构建、拓展上层的插件集。")])]),t._v(" "),s("h3",{attrs:{id:"有关-vue-cli"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#有关-vue-cli"}},[t._v("#")]),t._v(" 有关 "),s("code",[t._v("@vue/cli")])]),t._v(" "),s("p",[t._v("简单介绍下 "),s("code",[t._v("@vue/cli")]),t._v(" 的插件化架构：")]),t._v(" "),s("p",[s("code",[t._v("@vue/cli@3.x")]),t._v(" 相较于 "),s("code",[t._v("2.x")]),t._v(" 版本相比，整个 "),s("code",[t._v("@vue/cli")]),t._v(" 的架构发生了非常大的变化，从基于模板的脚手架迭代为基于插件化的脚手架。简单的概述下整个插件化的构架就是：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/zfUXzzdOptIviAJ15AgSn_cli-3.png",alt:"mpx-cli-3"}})]),t._v(" "),s("ul",[s("li",[s("p",[t._v("@vue/cli 提供 vue cli 命令，负责偏好设置，生成模板、"),s("code",[t._v("vue-cli-plugin")]),t._v(" 插件依赖管理的工作，例如 "),s("code",[t._v("vue create <projectName>")]),t._v("、"),s("code",[t._v("vue add <pluginName>")]),t._v("；")])]),t._v(" "),s("li",[s("p",[t._v("@vue/cli-service 作为 @vue/cli 整个插件系统当中的内部核心插件，提供了 npm script 注册服务，内置了部分 webpack 配置的同时，又提供了 "),s("code",[t._v("vue-cli-plugin")]),t._v(" 插件的导入、加载以及 webpack 配置更新服务等。")])])]),t._v(" "),s("p",[t._v("以上是 "),s("code",[t._v("@vue/cli")]),t._v(" 生态当中最为核心的两部分内容，二者分工明确，各司其职。")]),t._v(" "),s("p",[t._v("此外在 "),s("code",[t._v("@vue/cli")]),t._v(" 生态当中非常重要的一个点就是 "),s("code",[t._v("vue-cli-plugin")]),t._v(" 插件，每个插件主要完成模板生成及生产编译构建配置。根据 "),s("code",[t._v("@vue/cli")]),t._v(" 设计的规范，开发一个 "),s("code",[t._v("vue-cli-plugin")]),t._v(" 需要遵照"),s("strong",[t._v("相关的约定")]),t._v("来进行开发：")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("@vue/cli "),s("strong",[t._v("约定")]),t._v("插件如果要生成模板，那么需要提供 "),s("code",[t._v("generator")]),t._v(" 入口文件；")])]),t._v(" "),s("li",[s("p",[t._v("@vue/cli-service "),s("strong",[t._v("约定")]),t._v("插件的 "),s("code",[t._v("webpack")]),t._v(" 配置更新需要放到插件的入口文件当中来完成，同时插件的命名也需要包含 "),s("code",[t._v("vue-cli-plugin")]),t._v(" 前缀，因为 @vue/cli-service 是依据命名来加载相关的插件的；")])])]),t._v(" "),s("h2",{attrs:{id:"插件化改造方案"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#插件化改造方案"}},[t._v("#")]),t._v(" 插件化改造方案")]),t._v(" "),s("p",[t._v("一张图了解下插件化改造之后的 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 的架构设计：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/hNaL_GUMzUVLOsyY5quGE_cli-2.png",alt:"mpx-cli-2"}})]),t._v(" "),s("h3",{attrs:{id:"底层能力"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#底层能力"}},[t._v("#")]),t._v(" 底层能力")]),t._v(" "),s("p",[t._v("将 "),s("code",[t._v("@vue/cli")]),t._v("、"),s("code",[t._v("@vue/cli-service")]),t._v(" 分别作为 "),s("code",[t._v("@mpx/cli")]),t._v("和 "),s("code",[t._v("@mpx/cli-service")]),t._v(" 的底层能力，即利用插件化的架构设计，同时还非常灵活的满足了 Mpx 做差异化场景迭代的定制化改造。上层的插件满足 "),s("code",[t._v("vue-cli-plugin")]),t._v(" 插件开发的规范，最终底层的能力还是依托于 "),s("code",[t._v("@vue/cli")]),t._v(" 和 "),s("code",[t._v("@vue/cli-service")]),t._v(" 进行工作。")]),t._v(" "),s("h3",{attrs:{id:"上层插件拆分"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#上层插件拆分"}},[t._v("#")]),t._v(" 上层插件拆分")]),t._v(" "),s("p",[t._v("将原本大而全的模板进行插件化拆分，从 Mpx 所要解决的问题以及设计思路来考虑，站在跨平台的角度：")]),t._v(" "),s("ol",[s("li",[t._v("web 开发")])]),t._v(" "),s("ul",[s("li",[t._v("基于 "),s("code",[t._v("wx")]),t._v(" 的跨 "),s("code",[t._v("web")]),t._v(" 开发；")])]),t._v(" "),s("ol",{attrs:{start:"2"}},[s("li",[t._v("小程序开发")])]),t._v(" "),s("ul",[s("li",[t._v("基于 "),s("code",[t._v("wx")]),t._v(" 的跨平台("),s("code",[t._v("ali")]),t._v("、"),s("code",[t._v("swan")]),t._v("，"),s("code",[t._v("tt")]),t._v("，"),s("code",[t._v("dd")]),t._v(")的小程序开发；")]),t._v(" "),s("li",[t._v("使用云函数的微信小程序开发；")]),t._v(" "),s("li",[t._v("微信小程序的插件模式的开发；")])]),t._v(" "),s("p",[t._v("一个项目可能只需要某一种开发模式，例如仅仅是微信小程序的插件模式开发，也有可能是小程序和web平台混合开发等等，不同的开发模式对应了：")]),t._v(" "),s("ol",[s("li",[s("p",[s("strong",[t._v("不同的目录结构")]),t._v("；")])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("不同的编译构建配置")])])])]),t._v(" "),s("hr"),t._v(" "),s("p",[t._v("基于这样一种现状以及 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 所要解决的问题，从跨平台的角度出发将功能进行了拆分，最终拆解为如下的9个插件：")]),t._v(" "),s("ul",[s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx"),s("OutboundLink")],1),t._v("（mpx 基础开发插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-mp",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-mp"),s("OutboundLink")],1),t._v("（mpx 小程序平台开发插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-web",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-web"),s("OutboundLink")],1),t._v("（mpx 跨 web 平台开发插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-cloud-func",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-cloud-func"),s("OutboundLink")],1),t._v("（微信小程序云函数开发插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-plugin-mode",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-plugin-mode"),s("OutboundLink")],1),t._v("（微信小程序插件模式开发插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-eslint",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-eslint"),s("OutboundLink")],1),t._v("（mpx eslint 插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-unit-test",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-unit-test"),s("OutboundLink")],1),t._v("（小程序单元测试插件）")])]),t._v(" "),s("li",[s("p",[s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/tree/master/packages/vue-cli-plugin-mpx-typescript",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-cli-plugin-mpx-typescript"),s("OutboundLink")],1),t._v("（mpx typescript 插件）")])])]),t._v(" "),s("p",[t._v("这些拆解出来的插件都将和功能相关的"),s("strong",[t._v("项目模板")]),t._v("以及"),s("strong",[t._v("编译构建")]),t._v("配置进行了收敛。")]),t._v(" "),s("p",[t._v("项目模板的生成不用说，借助 "),s("code",[t._v("@vue/cli")]),t._v(" 的 "),s("code",[t._v("Generator API")]),t._v(" 按需去生成项目开发所需要的模板，例如项目需要使用 "),s("code",[t._v("eslint")]),t._v(" 的功能，那么在生成项目的时候会生成对应 "),s("code",[t._v("vue-cli-plugin-mpx-eslint")]),t._v(" 所提供的模板文件，如果不需要使用，项目当中最终也不会出现和 "),s("code",[t._v("eslint")]),t._v(" 相关的文件配置。")]),t._v(" "),s("p",[t._v("重点说下编译构建的配置是如何进行拆解的：")]),t._v(" "),s("p",[s("strong",[t._v("在 "),s("code",[t._v("@vue/cli@3.x")]),t._v(" 基于插件的架构设计当中，决定是否要使用某个插件的依据就是判断这个插件是否被你的项目所安装")]),t._v("和基于模板的构架相比最大的区别就是：基于模板的架构在最终生成的模板配置里需要保存一些环境配置文件，以供编译构建的运行时来判断是否启用某些功能。但是基于插件的架构基本上是不再需要这些环境配置文件的，因为你如果要使用一个插件的功能，只需要安装它即可。")]),t._v(" "),s("p",[t._v("因此依照这样的设计规范，我们将：")]),t._v(" "),s("ul",[s("li",[s("p",[s("code",[t._v("eslint")])])]),t._v(" "),s("li",[s("p",[s("code",[t._v("unit-test")])])]),t._v(" "),s("li",[s("p",[s("code",[t._v("typescript")])])])]),t._v(" "),s("p",[t._v("这些非常独立的功能都单独抽离成了可拔插的插件，安装即启用。")]),t._v(" "),s("p",[t._v("以上功能有个特点就是和平台是完全解耦的，所以在拆解的过程中可以拆的比较彻底。但是由于 "),s("code",[t._v("mpx")]),t._v(" 项目的特殊性，即要支持基于 "),s("code",[t._v("wx")]),t._v(" 小程序的跨端以及 "),s("code",[t._v("web")]),t._v(" 开发，同时还要支持小程序的云函数、小程序插件模式的开发，且不同开发模式的编译构建配置都有些差异。可以用如下的集合图来表示他们之间的关系：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/3bgI4GSZ09ai4G1C3TDtr_cli-4.png",alt:"mpx-cli-4"}})]),t._v(" "),s("p",[t._v("不同插件进行组合使用来满足不同场景下的使用。")]),t._v(" "),s("p",[t._v("在不同平台开发模式下是有 "),s("code",[t._v("mpx")]),t._v(" 编译构建的基础配置的，这个是和平台没有太多关系，因此将这部分的配置单独抽离为一个插件："),s("code",[t._v("vue-cli-plugin-mpx")]),t._v("，"),s("strong",[t._v("同时这个插件也被置为了 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 的 "),s("code",[t._v("preset")]),t._v(" 预设插件，不管任何项目开发模式下，这个插件都会被默认的安装")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue-cli-plugin-mpx")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" webpackConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  webpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("module\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.json$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resourceQuery")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("asScript")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'javascript/auto'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  webpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("module\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wxs-pre-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(wxs|qs|sjs|filter\\.js)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("pre")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mpx-wxs-pre-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("wxsPreLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("loader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" transpileDepRegex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("genTranspileDepRegex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("transpileDependencies "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  webpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("module\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.js$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("include\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("filepath")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" transpileDepRegex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" transpileDepRegex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filepath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("filepath")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.mpx\\.js")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filepath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理 mpx 转 web 的情况，vue-loader 会将 script block fake 出一个 .mpx.js 路径，用以 loader 的匹配")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/@mpxjs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" transpileDepRegex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("genTranspileDepRegex")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("transpileDependencies"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  webpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("module\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.js$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("include\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("filepath")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" transpileDepRegex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" transpileDepRegex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filepath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/@mpxjs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("api"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'babel-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  webpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("extensions\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wxml'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.ts'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  webpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("modules"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在小程序的开发模式下，"),s("code",[t._v("vue-cli-plugin-mpx-mp")]),t._v(" 会在 "),s("code",[t._v("vue-cli-plugin-mpx")]),t._v(" 的基础上去拓展 "),s("code",[t._v("webpack")]),t._v(" 配置以满足小程序的编译构建。")]),t._v(" "),s("p",[t._v("在跨 web 的开发模式下，"),s("code",[t._v("vue-cli-plugin-mpx-web")]),t._v(" 会在 "),s("code",[t._v("vue-cli-plugin-mpx")]),t._v(" 和 "),s("code",[t._v("@vue/cli")]),t._v(" 的基础上去拓展配置以满足 web 侧的开发编译构建。")]),t._v(" "),s("h3",{attrs:{id:"web-平台编译构建能力增强"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#web-平台编译构建能力增强"}},[t._v("#")]),t._v(" Web 平台编译构建能力增强")]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 版本当中有关 "),s("code",[t._v("web")]),t._v(" 侧的编译构建的配置是比较初级的，像 "),s("code",[t._v("热更新")]),t._v("、"),s("code",[t._v("MPA 多页应用")]),t._v(" 等比较常用的功能是需要用户重新去手动搭建一套的。而 "),s("code",[t._v("@vue/cli@3.x")]),t._v(" 即为 "),s("code",[t._v("vue")]),t._v(" 项目而生，提供了非常完备的 "),s("code",[t._v("web")]),t._v(" 应用的编译构建打包配置。")]),t._v(" "),s("p",[s("strong",[t._v("所以 "),s("code",[t._v("@mpxjs/cli@next")]),t._v(" 版本里面做了一项非常重要的工作就是复用 "),s("code",[t._v("@vue/cli")]),t._v(" 的能力，弥补 "),s("code",[t._v("mpx")]),t._v(" 项目在跨 "),s("code",[t._v("web")]),t._v(" 项目编译构建的不足。")])]),t._v(" "),s("p",[t._v("因此关于 "),s("code",[t._v("mpx")]),t._v(" 跨 "),s("code",[t._v("web")]),t._v(" 编译构建的部分也单独抽离为一个插件："),s("code",[t._v("vue-cli-plugin-mpx-web")]),t._v("，这个插件所做的工作就是在 "),s("code",[t._v("@vue/cli")]),t._v(" 提供的 "),s("code",[t._v("web")]),t._v(" 编译构建的能力上去适配 "),s("code",[t._v("mpx")]),t._v(" 项目。这样也就完成了 "),s("code",[t._v("mpx")]),t._v(" 跨 "),s("code",[t._v("web")]),t._v(" 项目编译构建能力的增强。")]),t._v(" "),s("p",[s("strong",[t._v("这也意味着 "),s("code",[t._v("@vue/cli")]),t._v(" 所提供的能力基本上在 mpx 跨 web 项目当中都可使用。")])]),t._v(" "),s("h3",{attrs:{id:"项目配置拓展能力"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#项目配置拓展能力"}},[t._v("#")]),t._v(" 项目配置拓展能力")]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 版本的项目如果要进行配置拓展，基本需要进行以下2个步骤：")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("对 "),s("code",[t._v("config")]),t._v(" 文件夹下的相关的配置文件进行修改；")])]),t._v(" "),s("li",[s("p",[t._v("对 "),s("code",[t._v("build")]),t._v(" 文件夹下的编译构建配置文件进行修改；")])])]),t._v(" "),s("p",[t._v("这也是在文章一开始的时候就提到的基于模板的大而全的文件组织方式。")]),t._v(" "),s("p",[t._v("而在 "),s("code",[t._v("@mpxjs/cli@next")]),t._v(" 版本当中，将项目的配置拓展全部收敛至 "),s("code",[t._v("vue.config.js")]),t._v(" 文件当中去完成，同时减少了开发者需要了解项目结构的心智负担。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx-plugin 相关的配置")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx-loader 相关的配置")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("chainWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义的 webpack 配置")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"改造后的目录结构"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#改造后的目录结构"}},[t._v("#")]),t._v(" 改造后的目录结构")]),t._v(" "),s("p",[t._v("在第一章节展示了目前 "),s("code",[t._v("@mpxjs/cli@2.x")]),t._v(" 初始化项目的结构和现状。经过这次的插件化的改造后，项目的结构变得更为简洁，开发者只需要关注 "),s("code",[t._v("src")]),t._v(" 源码目录以及 "),s("code",[t._v("vue.config.js")]),t._v(" 配置文件即可：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("project\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("src\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("vue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("js \n")])])]),s("h2",{attrs:{id:"没有银弹"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#没有银弹"}},[t._v("#")]),t._v(" 没有银弹")]),t._v(" "),s("p",[t._v("虽然基于 "),s("code",[t._v("@vue/cli")]),t._v(" 插件的架构模式完成了 "),s("code",[t._v("@mpxjs/cli@3.x")]),t._v(" 的插件化改造升级。但是由于 "),s("code",[t._v("mpx")]),t._v(" 项目开发的一些特殊性，不同插件之间的协同工作是有一些约定的。")]),t._v(" "),s("p",[t._v("例如 "),s("code",[t._v("@vue/cli-service")]),t._v(" 内置了一些 "),s("code",[t._v("webpack")]),t._v(" 的配置，因为 "),s("code",[t._v("@vue/cli")]),t._v(" 是专门针对 "),s("code",[t._v("web")]),t._v("应用的，这些配置会在所有的编译构建流程当中生效，不过这些配置当中有些对于小程序的开发来说是不需要的。")]),t._v(" "),s("p",[t._v("那么针对这种情况，为了避免不同模式下的 "),s("code",[t._v("webpack")]),t._v(" 配置相互污染。"),s("code",[t._v("web")]),t._v(" 侧的编译构建还是基于 "),s("code",[t._v("@vue/cli")]),t._v(" 提供的能力去适配 "),s("code",[t._v("mpx")]),t._v(" 的 "),s("code",[t._v("web")]),t._v(" 开发。而小程序侧的编译构建配置是通过 "),s("code",[t._v("@vue/cli-service")]),t._v(" 内部暴露出来的一些方法去跳过一些对于小程序开发来说不需要的 "),s("code",[t._v("webpack")]),t._v(" 配置来最终满足小程序的构建配置。")]),t._v(" "),s("p",[t._v("因此在各插件的开发当中，需要暴露该插件所应用的平台：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("export"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("platform "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mp'")]),t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可选值： 'web'")]),t._v("\n")])])]),s("p",[t._v("这样在实际的构建过程当中通过平台的标识来决定对应哪些插件会生效。")]),t._v(" "),s("h2",{attrs:{id:"如何开发一个基于-mpx-的业务脚手架插件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#如何开发一个基于-mpx-的业务脚手架插件"}},[t._v("#")]),t._v(" 如何开发一个基于 mpx 的业务脚手架插件")]),t._v(" "),s("p",[t._v("具体参阅"),s("a",{attrs:{href:"https://github.com/mpx-ecology/mpx-cli/blob/master/PLUGIN_GUIDE.md",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/56.9aec9a9e.js b/docs-vuepress/.vuepress/dist/assets/js/56.9aec9a9e.js
deleted file mode 100644
index c8a673ccb9..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/56.9aec9a9e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{404:function(t,r,e){"use strict";e.r(r);var _=e(4),a=Object(_.a)({},(function(){var t=this,r=t._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"小程序跨端组件库-mpx-cube-ui-开源啦"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#小程序跨端组件库-mpx-cube-ui-开源啦"}},[t._v("#")]),t._v(" 小程序跨端组件库 Mpx-cube-ui 开源啦")]),t._v(" "),r("blockquote",[r("p",[t._v("作者："),r("a",{attrs:{href:"https://github.com/CommanderXL",target:"_blank",rel:"noopener noreferrer"}},[t._v("CommanderXL"),r("OutboundLink")],1)])]),t._v(" "),r("p",[t._v("Mpx-cube-ui 是一款基于 "),r("a",{attrs:{href:"https://www.mpxjs.cn/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx 小程序框架"),r("OutboundLink")],1),t._v(" 的移动端基础组件库，一份源码可以跨端输出所有小程序平台及 Web，同时具备良好的拓展能力和可定制化的能力来帮助你快速构建 Mpx 应用项目。")]),t._v(" "),r("p",[t._v("Mpx-cube-ui 提供了灵活配置的主题定制能力，在组件设计开发阶段对表现层的结构和样式进行抽离，利用预编译器和 CSS 变量的能力，提供细粒度（颜色、字体、圆角、阴影等）的样式定制能力，你的项目可以按需使用主题的编译方案还是运行时方案来满足不同样式风格的业务场景开发。")]),t._v(" "),r("p",[t._v("Mpx-cube-ui 提供了开箱即用的跨端输出能力，源码基于 Mpx 小程序框架进行开发，依托于 Mpx 提供的"),r("a",{attrs:{href:"https://mpxjs.cn/articles/2.0.html#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E5%BC%80%E5%8F%91",target:"_blank",rel:"noopener noreferrer"}},[t._v("跨平台能力"),r("OutboundLink")],1),t._v("即基于微信小程序跨平台编译输出为支付宝、百度、QQ、头条等目标平台的小程序代码，同时还可以输出到 Web。")]),t._v(" "),r("p",[t._v("接下来会通过这篇文章去分享一下 Mpx-cube-ui 是如何诞生的。")]),t._v(" "),r("h2",{attrs:{id:"业务现状"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#业务现状"}},[t._v("#")]),t._v(" 业务现状")]),t._v(" "),r("h3",{attrs:{id:"集团产品的迭代"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#集团产品的迭代"}},[t._v("#")]),t._v(" 集团产品的迭代")]),t._v(" "),r("p",[t._v("越来越多的业务产品开始借助小程序的渠道来拓展产品的推广和使用，不同的技术团队承接的不同业务产品方向的需求。在滴滴所有的小程序产品当中，滴滴出行小程序作为最大的C端流量入口，承接了不同业务产品流量分发。在具体到小程序产品的研发环节，不同业务的小程序都被集成到了滴滴出行小程序当中，一同打包上线并发布。\n当然在这种跨业务、技术部门的产品研发当中，不同的技术团队都会有自身配套的基础能力建设。就拿小程序的组件库来说，每个独立的业务产品都会依据对应的交互设计规范来搭建一套满足自身业务述求的基础组件用以提高日常的业务开发效率，例如按钮、半浮层弹窗、Toast、Dialog、表单等等。")]),t._v(" "),r("h3",{attrs:{id:"团队内的业务迭代"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#团队内的业务迭代"}},[t._v("#")]),t._v(" 团队内的业务迭代")]),t._v(" "),r("p",[t._v("除了跨业务产品研发的场景外，在同一个技术团队内部也可能会承接来自不同业务产品方向的需求，这些不同业务产品同样也会有独立发展迭代的述求。由于业务场景的约束，团队内部同样也会面临如何做基础能力的沉淀和复用的议题，在节省研发资源的同时去提升业务项目交付的质量和效率。\n")]),r("hr"),r("p"),t._v(" "),r("p",[t._v("那么在不同的业务产品发展初期，为了快速交付产品的功能保障上线时间，研发侧会尽量利用之前已有的基础能力来快速搭建产品功能。就拿小程序组件库的复用来说，常见的方式有：")]),t._v(" "),r("ul",[r("li",[t._v("直接侵入到原有的组件代码当中进行 Hard Code，不同的业务产品依赖同一份组件代码，利用一些 if/else 或者条件编译等手段来使得原有的组件在满足最新的业务述求的同时，还要确保不会影响到原有的业务使用；")]),t._v(" "),r("li",[t._v("Fork 一份原有组件库的代码，在此基础上单独迭代维护，做到和原有组件的彻底隔离而不会造成污染；")])]),t._v(" "),r("p",[t._v("对于第一种方案来说：组件本身因为增量的差异化需求使得组件本身的维护成本变高，同时对于差异化的代码处理难免在编译打包环节出现代码冗余问题，也就是原本不属于当前业务产品的代码实现也被一同打包；\n对于第二种方案来说：组件库维护的数量变多，使得后续的组件迭代和更新需要修改多处代码；")]),t._v(" "),r("p",[t._v("此外，在小程序的场景下还面临着包体积等平台规范的硬性约束，特别是对于像滴滴出行小程序这种体量大的小程序来说，众多小程序业务产品被集成到同一个小程序当中，包体积也是日常研发过程中重点关注的一个指标。模块或组件的可复用性好、可拓展性强也意味着不需要重复去开发同一份功能相同代码，随之代码包体积也不会因重复实现相同功能而增速过快。")]),t._v(" "),r("h2",{attrs:{id:"mpx-技术生态"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#mpx-技术生态"}},[t._v("#")]),t._v(" Mpx 技术生态")]),t._v(" "),r("p",[t._v("在 Mpx 整个技术生态当中，组件体系目前是不完备的。")]),t._v(" "),r("p",[t._v("在我们目前使用 Mpx 去搭建实际的业务产品的过程中，我们基于小程序平台的基础组件去搭建了特定业务场景的基础业务组件，因为业务场景、功能和代码实现等各方面的原因，这些业务场景的基础组件是没法开放给社区的 Mpx 开发者来使用的。因此对于社区来说，要么只能同样基于平台的基础组件去开发上层基础组件，或者是使用第三方的原生小程序组件库，不管哪种方式对于社区的开发者而言，都有不少的上手和开发成本。")]),t._v(" "),r("p",[t._v("因此在社区当中也有比较强的述求，期望 Mpx 能提供更为基础通用的组件来更好的支持上层的业务开发。")]),t._v(" "),r("h2",{attrs:{id:"组件库自身的维护"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#组件库自身的维护"}},[t._v("#")]),t._v(" 组件库自身的维护")]),t._v(" "),r("ul",[r("li",[t._v("文档示例一体化")])]),t._v(" "),r("p",[t._v("不管是我们内部维护的业务组件库还是之前我们开源的基于 Vue 的 Web 组件库 "),r("a",{attrs:{href:"https://didi.github.io/cube-ui/#/zh-CN",target:"_blank",rel:"noopener noreferrer"}},[t._v("Cube-ui"),r("OutboundLink")],1),t._v("，组件本身的文档示例也是在组件库迭代过程中也是比较占用时间精力的，在示例和文档方面往往需要重复写多份文案，还要确保它们之间是同步更新的。那么针对组件库自身的维护，如何尽量减少组件库本身的维护成本也是我们需要深入思考的一部分工作。")]),t._v(" "),r("p",[t._v("以上这些问题促使我们重新思考整个 Mpx 组件体系的构建和发展。")]),t._v(" "),r("h2",{attrs:{id:"mpx-组件体系"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#mpx-组件体系"}},[t._v("#")]),t._v(" Mpx 组件体系")]),t._v(" "),r("p",[t._v("经过业务的长期迭代和验证，Mpx-cube-ui 作为 Mpx 技术生态当中组件体系的基础设施：脱离于业务的基础组件库，同时又要有良好的拓展能力和可定制化的能力来更好的支持上层业务。")]),t._v(" "),r("p",[r("img",{attrs:{src:"https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_6wEnx7fVXGlK8hILtuYa",alt:"组件分层设计"}}),t._v("\n在整个组件体系的搭建过程中，我们依据组件的特性将组件拆分为如下几种类型：")]),t._v(" "),r("ul",[r("li",[t._v("业务组件一般来源于某一个具体的产品功能，用以解决特定问题域，更加强调关注点分离，代码的维护成本；")]),t._v(" "),r("li",[t._v("基础业务组件一般来源于某一类的业务产品，在特定的业务背景下抽象的比较通用的，较少糅合业务逻辑，介于基础组件和业务组件之间，强调解决效率，可复用性，可维护性；")]),t._v(" "),r("li",[t._v("基础组件一般来源于我们设计交互元语言，用以定义业务产品和用户的交互、反馈，更加强调一致性，效率，可复用性；")])]),t._v(" "),r("p",[t._v("底层的基础组件（可组合性、可拓展性、稳定性）是为了更好的服务于上层的（基础）业务组件。")]),t._v(" "),r("p",[t._v("从底层的基础组件到业务组件（由下至上），组件的业务属性越来越强，所要解决的问题域更加聚焦，更贴合具体的问题和场景，同时它们的可复用性也随之降低。")]),t._v(" "),r("h2",{attrs:{id:"mpx-cube-ui-组件设计"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#mpx-cube-ui-组件设计"}},[t._v("#")]),t._v(" Mpx-cube-ui 组件设计")]),t._v(" "),r("p",[t._v("这里通过乘客交易、司机运营两个不同业务方向的组件来举例说明 Mpx-cube-ui 在组件的设计和开发当中所做的一些思考。\n在这两个业务场景当中都有 Modal 半浮层组件，不过在司乘业务不同的设计规范约束下，组件间的差异还是比较大的。")]),t._v(" "),r("p",[r("img",{attrs:{src:"https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_1EABWsPUeVHTim2iwTUf",alt:"mpx-cube-ui-modal"}})]),t._v(" "),r("p",[t._v("那么为了解决上文当中组件库在跨业务产品的的可复用性、可拓展性的问题，核心所遵循的原则是：")]),t._v(" "),r("p",[r("strong",[t._v("弱化不同业务场景的设计规范（去业务），回归到组件本身的行为（逻辑）、结构和样式（表现）：")])]),t._v(" "),r("ul",[r("li",[t._v("行为，组件所特有的行为方法：展示（show），隐藏（hide），关闭（close）；")]),t._v(" "),r("li",[t._v("结构，方便组件间的重新组合：头部区，标题区，内容区，底部操作区；")]),t._v(" "),r("li",[t._v("样式，方便业务场景的主题定制：颜色、字号、圆角、边距等；")])]),t._v(" "),r("p",[r("img",{attrs:{src:"https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_ceWLvE8RbZIIduHHTdtu",alt:"组件设计原则"}})]),t._v(" "),r("p",[t._v("对于 Mpx-cube-ui 组件的主题定制有个简单的逻辑关系：")]),t._v(" "),r("ul",[r("li",[t._v("全局基础样式变量：提供了基本色值、字号等，会影响到所有组件的展示；")]),t._v(" "),r("li",[t._v("组件样式变量：对于基本的色值、字号等继承于全局基础变量，涉及到组件自身的结构、样式变量会单独定义；")]),t._v(" "),r("li",[t._v("组件渲染样式：直接依赖组件样式变量；")])]),t._v(" "),r("p",[r("img",{attrs:{src:"https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_b4uBKbP8yIwdip7pBZAq",alt:"mpx-cube-ui-modal"}})]),t._v(" "),r("p",[t._v("通过定制"),r("a",{attrs:{href:"https://www.mpxjs.cn/mpx-cube-ui/guide/design-tokens.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("全局基础样式变量"),r("OutboundLink")],1),t._v("和"),r("a",{attrs:{href:"https://www.mpxjs.cn/mpx-cube-ui/components/base/button.html#css-variable",target:"_blank",rel:"noopener noreferrer"}},[t._v("组件样式变量"),r("OutboundLink")],1),t._v("都能达到定制主题的目的，有关主题定制的功能具体参见"),r("a",{attrs:{href:"https://www.mpxjs.cn/mpx-cube-ui/guide/theme.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档"),r("OutboundLink")],1),t._v("。")]),t._v(" "),r("p",[t._v("在 Mpx-cube-ui 实现的定制主题的方案当中是利用预编译器和 Css Varaibles 的能力来提供细粒度的样式定制能力：")]),t._v(" "),r("p",[r("img",{attrs:{src:"https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_3ZVcQITsryAG4k96hFrH",alt:"业务架构图"}})]),t._v(" "),r("ul",[r("li",[t._v("利用预编译器可编程的能力，在编译阶段就可以完成主题能力的定制，当你的业务项目作为独立应用迭代，可以只利用预编译器的能力，从而使得你的 css 代码体积尽可能的小；")]),t._v(" "),r("li",[t._v("利用 Css Varaibles 的能力，可以解决更为复杂的场景，例如同一个组件在巨型应用当中，在不同业务场景页面需要有不同的主题样式；")])]),t._v(" "),r("p",[t._v("在"),r("a",{attrs:{href:"https://www.mpxjs.cn/mpx-cube-ui/guide/intro.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("官网示例"),r("OutboundLink")],1),t._v("当中可以直接体验主题切换功能。")]),t._v(" "),r("h2",{attrs:{id:"未来的规划"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#未来的规划"}},[t._v("#")]),t._v(" 未来的规划")]),t._v(" "),r("ol",[r("li",[t._v("开源更多我们内部所沉淀出的基础组件，去满足多样化的业务场景开发；")]),t._v(" "),r("li",[t._v("将文档示例一体化的能力独立打包开源，用以组件库的快速建站以及降低文档、示例代码的维护成本。")])])])}),[],!1,null,null,null);r.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/57.9d9ddcbd.js b/docs-vuepress/.vuepress/dist/assets/js/57.9d9ddcbd.js
deleted file mode 100644
index 610cd89b22..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/57.9d9ddcbd.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{403:function(t,v,_){"use strict";_.r(v);var e=_(4),a=Object(e.a)({},(function(){var t=this,v=t._self._c;return v("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[v("h1",{attrs:{id:"小程序开发者-为什么你应该尝试下mpx"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#小程序开发者-为什么你应该尝试下mpx"}},[t._v("#")]),t._v(" 小程序开发者，为什么你应该尝试下MPX")]),t._v(" "),v("blockquote",[v("p",[t._v("作者："),v("a",{attrs:{href:"https://github.com/sky-admin",target:"_blank",rel:"noopener noreferrer"}},[t._v("sky-admin"),v("OutboundLink")],1)])]),t._v(" "),v("blockquote",[v("p",[t._v("MPX框架是滴滴出行推出的一款专注小程序开发的增强型框架。本篇文章将从使用角度谈谈MPX的优势与好处。如果嫌内容太长，优势部分每个小节都有简单的一句话总结，可以快速阅读。如果想了解更多设计细节，可以阅读 "),v("RouterLink",{attrs:{to:"/articles/2.0.html"}},[t._v("前一篇文章 - MPX2.0发布")]),t._v("。")],1)]),t._v(" "),v("h2",{attrs:{id:"背景"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#背景"}},[t._v("#")]),t._v(" 背景")]),t._v(" "),v("p",[t._v("在小程序逐渐火热的今天，越来越多的开发者需要进行小程序的开发。原生小程序的开发有诸多不便，开发者又需要在众多的小程序框架中做出抉择。")]),t._v(" "),v("p",[t._v("那么今天，我们要给大家安利一款小程序框架：MPX")]),t._v(" "),v("h2",{attrs:{id:"优势"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#优势"}},[t._v("#")]),t._v(" 优势")]),t._v(" "),v("p",[t._v("之所以建议开发者们考虑使用MPX框架来开发小程序，是因为MPX框架具有一些别的框架所没有的优点。")]),t._v(" "),v("p",[t._v("MPX立足原生小程序，在保证坑少的同时做了很多能力增强，提供了数据响应、模板增强、性能优化、跨平台开发等能力，以提升用户的开发体验及效率。")]),t._v(" "),v("p",[t._v("接下来会从 原生兼容 -> 第三方组件支持 -> 按需构建 -> 跨平台编译 -> 能力增强 -> 独特性能优势 六个点来逐一讲述。")]),t._v(" "),v("h3",{attrs:{id:"原生兼容"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#原生兼容"}},[t._v("#")]),t._v(" 原生兼容")]),t._v(" "),v("blockquote",[v("p",[t._v("MPX完全兼容原生，坑少。渐进接入简单。")])]),t._v(" "),v("p",[t._v("从语法风格上，我们可以看到目前市面上流行的小程序框架基本是基于web框架（taro/nanachi - react，uniapp/megalo/mpvue - vue）或者是一套全新（chameleon）/ 半全新（wepy）的标准。")]),t._v(" "),v("p",[t._v("使用了这些框架，你所写的代码，并不是小程序代码。而是react/vue或者另一套代码。而这些代码源码到小程序代码，需要经过一次全面的转换，这个转换可能会引入一些未知的问题，产生一些坑。")]),t._v(" "),v("p",[t._v("同时随着时间，小程序自身会逐步迭代，做出更多的功能特性，提供更好的组件、方法。而一些框架可能会受限于精力或框架节奏，没有办法第一时间跟进，甚至框架慢慢疏于维护而无法使用。")]),t._v(" "),v("p",[t._v("而MPX选择的是，"),v("strong",[t._v("全面拥抱原生")]),t._v("。")]),t._v(" "),v("p",[t._v("口说无凭，我们来看个典型的MPX组件长什么样。")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/3877c653-d180-4fe7-8661-457b9de1bd82.png",alt:"mpx组件示例"}})]),t._v(" "),v("p",[t._v("乍一看好像和vue没什么区别，也就多了个json块，template里写的是小程序的标签。")]),t._v(" "),v("p",[t._v("由于这一块全是符合微信小程序原生语法，我们是不会做任何转换的，所以你写什么就是什么。（如果使用了MPX的增强特性，还是会进行一些必要的转换的，后续我们也会出文章详细解释MPX的增强是如何实现的，相对来说，我们的转换比较轻量、透明、易理解）")]),t._v(" "),v("p",[t._v("当微信出了新的能力、新的标签、新的生命周期钩子，使用MPX框架来编写的小程序只需要直接用起来就行。")]),t._v(" "),v("p",[t._v("所以，使用MPX框架，你可以轻易地使用 "),v("strong",[v("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("自定义组件的relations"),v("OutboundLink")],1)]),t._v(" 来搞定组件间关系，使用 "),v("strong",[v("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/",target:"_blank",rel:"noopener noreferrer"}},[t._v("wxs"),v("OutboundLink")],1)]),t._v(" 来更好地构建页面。")]),t._v(" "),v("p",[t._v("MPX几乎支持原生的每一个特性，在 .mpx 文件里，模板部分写的是原生小程序的模板语法，脚本部分写的是原生小程序的脚本语法，json部分写的是原生小程序的配置信息。用MPX，你才是真的在开发小程序。")]),t._v(" "),v("p",[t._v("目前很多原生小程序开发者可能想尝试下框架，老项目接入框架，选MPX肯定是最简单的了。口说无凭，我们搞了个demo来给大家打个样：在我们GitHub项目中有examples文件夹，里面的 "),v("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-progressive",target:"_blank",rel:"noopener noreferrer"}},[t._v("原生项目渐进接入MPX示例"),v("OutboundLink")],1),t._v(" 。")]),t._v(" "),v("h3",{attrs:{id:"第三方组件库"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#第三方组件库"}},[t._v("#")]),t._v(" 第三方组件库")]),t._v(" "),v("blockquote",[v("p",[t._v("MPX提供了完备的第三方组件库支持")])]),t._v(" "),v("p",[t._v("上面说了MPX对原生的极致兼容，能让你想到什么？对，就是对第三方组件库的完美支持。")]),t._v(" "),v("p",[t._v("支持第三方组件库的重要性大家都知道，所以这个能力大部分框架都支持了。但是支持和完美支持还是有区别的。据简单观察，taro/mpvue/uniapp对于第三方组件库的支持都是以复制的形式进行的，也就是和微信小程序本来的行为很像。")]),t._v(" "),v("p",[t._v("那么MPX是怎么支持第三方组件库的呢，这里有个demo：也在我们的GitHub里的examples文件夹下，"),v("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-useuilib",target:"_blank",rel:"noopener noreferrer"}},[t._v("MPX使用第三方组件库示例"),v("OutboundLink")],1),t._v(" ，核心代码见下图：")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/9ecdd898-f7e5-48cc-89c2-bfc7ce3a03f9.png",alt:"MPX使用第三方组件库代码示例"}})]),t._v(" "),v("p",[t._v("乍一眼看不太出来有什么特别的？没用过别的框架引第三方组件，简单找了找其他框架好像也没提供相应的demo，用过的朋友可以自行对比下。")]),t._v(" "),v("p",[t._v("在MPX里使用第三方组件库，仅需要***像web项目一样npm安装即可，并不需要复制文件***。然后在json里直接写包名就会去node_modules下面查找了。再配合webpack alias可以做到更简单、更语义化。")]),t._v(" "),v("p",[t._v("然而这还没有结束~")]),t._v(" "),v("p",[t._v("细心的朋友会发现，这段示例代码中既有vant的组件，也有iview的组件，如果按照微信的规范，这些组件库会通过miniprogram字段指定自己的构建文件生成目录，开发者工具会把这个目录完全拷贝到最终发布的代码里去，我们就会有两个巨大的组件库占据宝贵的空间。")]),t._v(" "),v("p",[t._v("我们当然是希望用多少引多少，而不是一股脑全引进去，对，于是MPX提供了按需引用的能力，在下一章"),v("a",{attrs:{href:"#%E6%8C%89%E9%9C%80%E5%BC%95%E7%94%A8"}},[t._v("按需引用")]),t._v("细讲。")]),t._v(" "),v("p",[t._v("以及，组件库目前很少有跨小程序平台的组件库啊，如果我用了vant，支付宝、QQ里没有vant怎么办？也许这是别的框架不怎么推荐使用第三方库的原因，而MPX里，我们帮你把别人的组件库也转了，细节看下下章"),v("a",{attrs:{href:"#%E8%B7%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B9%B3%E5%8F%B0"}},[t._v("跨小程序平台")])]),t._v(" "),v("h3",{attrs:{id:"按需引用"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#按需引用"}},[t._v("#")]),t._v(" 按需引用")]),t._v(" "),v("blockquote",[v("p",[t._v("通过webpack依赖分析收集，使用第三方组件库或者拆分开发大型项目时MPX能保证构建的代码全是要用到的代码")])]),t._v(" "),v("p",[t._v("原生小程序本身的编译是遍历项目文件夹里所有的JS，包装成一个AMD包，也就是说项目文件夹里所有的文件，不论是否被使用，都会占用包体积并上传。")]),t._v(" "),v("p",[t._v("同时，原生微信小程序的npm支持是基于文件夹复制的，第三方包通过声明miniprogram字段指定要拷贝的文件夹，不论使用还是未使用的资源（模板/js/样式/图片），全会被复制到项目文件夹中。")]),t._v(" "),v("p",[t._v("而我们提供了@mpxjs/webpack-plugin插件，借助webpack生态，解析.mpx文件的json部分或原生的json文件将依赖作为新的入口添加子编译。基于依赖收集，而不是文件遍历。")]),t._v(" "),v("p",[t._v("带来的好处就是：如果你喜欢vant的按钮，iview的输入框，wux的布局，欢迎尝试MPX，让你能同时使用多个UI框架的同时不用担心应用的体积爆炸。")]),t._v(" "),v("p",[t._v("同理，面对一个大型项目，我们可以拆成不同的部分，由不同的团队完成后发npm包，在一个主项目中引入即可，具体内容可以看文档"),v("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#packages"}},[t._v("packages")]),t._v("一节。")],1),t._v(" "),v("p",[t._v("收集依赖的细节可以查阅文档"),v("RouterLink",{attrs:{to:"/guide/understand/compile.html"}},[t._v("编译构建")]),t._v("一节。")],1),t._v(" "),v("h3",{attrs:{id:"跨小程序平台"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#跨小程序平台"}},[t._v("#")]),t._v(" 跨小程序平台")]),t._v(" "),v("blockquote",[v("p",[t._v("MPX的跨平台方法能带着第三方组件库一起跨小程序平台，同时提供了充足完善的条件编译能力。")])]),t._v(" "),v("p",[t._v("在 MPX 1.0 时代，MPX框架是专注提升微信小程序的开发体验，虽然也提供了支付宝版，但代码完全要另写。")]),t._v(" "),v("p",[t._v("而随着越来越多的 super app 提供了小程序能力，目前至少有5种体系的小程序（微信、支付宝系列、百度系列、头条系列、QQ），如果每一个平台都需要维护一份代码，工程师人数明显不够用了，所以跨小程序平台的能力也是 MPX 2.0 的主打特性。")]),t._v(" "),v("p",[t._v("我们的跨平台的方法就是转换。都是小程序，语法基本一样，配置、钩子的差异在MPX运行时里提供了抹平。")]),t._v(" "),v("p",[t._v("而除此之外最大的区别也就是模板上的标签和指令。所以我们实现了一套转换的架子，再编写一份转换规则，即可完成微信小程序到支付宝、百度、头条小程序的转换。")]),t._v(" "),v("p",[t._v("采用这种转换的模式，非常方便用户理解我们是如何把微信小程序转换成支付宝、百度等小程序平台的。而且只要用户有需求，可以补齐任一套小程序转换其他平台的规则，就可以完成以某个小程序为标准为基础来编写小程序代码以及进一步转换成别的平台的能力。")]),t._v(" "),v("p",[t._v("再结合前面一直在说的我们对原生小程序的支持，就可以撞出一点不一样的东西，比如，前文提到的第三方组件库跨小程序平台。")]),t._v(" "),v("p",[t._v("对，我们能帮你把针对微信编写的ui组件库在支付宝、百度上运行起来，带着组件库一起跨小程序平台。")]),t._v(" "),v("p",[t._v("那么一定会有这样一个问题，就算MPX对原生的支持再怎么牛逼，有的基础能力只有微信平台有，别的平台没有，MPX的转换还能无中生有吗？")]),t._v(" "),v("p",[t._v("当然不能，其实这个问题对于所有的跨端框架都是一个问题，所以跨端最核心的问题是，如何搞定差异化部分。")]),t._v(" "),v("p",[t._v("MPX提供了丰富的条件编译能力，可以以文件为维度差别构建，可以以代码块为维度，也可以以代码维度进行差别构建。")]),t._v(" "),v("p",[t._v("而且MPX的差异化构建能力也是完全基于webpack实现的，所以上面提到的第三方组件库如果确实存在转换不了的地方，比如vant的picker组件使用内联wxs写了一个小方法叫isSimple在模板里调用了，但是这个方法的写法在百度小程序的filter脚本（filter可以理解为百度小程序的wxs）里不支持，因为百度的filter要求必须导出一个对象包裹方法。")]),t._v(" "),v("p",[t._v("最好的解决办法当然是给vant-weapp提pr帮他们解决一下这个问题，但时间可能会比较慢，所以在MPX里，可以利用webpack的alias能力：")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/7f90593b-65b4-40d0-bd93-6396e8a18e64.png",alt:"通过alias解决第三方组件的跨平台问题"}})]),t._v(" "),v("p",[t._v("当尝试构建百度小程序时，会优先去查找pick/index.swan.wxml，再被alias到一个src下的文件，自己修改一下第三方包里有一些小问题的部分即可。")]),t._v(" "),v("p",[t._v("关于跨平台的条件编译，更多具体信息可以"),v("RouterLink",{attrs:{to:"/guide/advance/platform.html#跨平台编译"}},[t._v("查阅我们的官方文档 - 跨平台编译")])],1),t._v(" "),v("h3",{attrs:{id:"能力增强"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#能力增强"}},[t._v("#")]),t._v(" 能力增强")]),t._v(" "),v("blockquote",[v("p",[t._v("通过数据响应、编译时预处理提供了computed/watch，完备的样式类型绑定，双向数据绑定，动态组件等一系列方便开发者更好开发小程序的能力增强")])]),t._v(" "),v("p",[t._v("能力增强应该是一个框架提供的最核心最重要的能力了，而MPX也确实在这里下了很大的力气，提供了多且好用的能力增强，不过受限于此处的篇幅，就只简单介绍，细节大家还是"),v("RouterLink",{attrs:{to:"/guide/basic/template.html"}},[t._v("查阅我们的文档")]),t._v("的好。")],1),t._v(" "),v("p",[t._v("别的框架由于往往基于react/vue的，会给个列表写明不支持哪些能力，用户写的时候习惯使然，往往用了后可能才反应过来哦这个不支持。MPX则是原生的小程序语法写着难受时候突然想起MPX有这个能力。")]),t._v(" "),v("p",[t._v("列一下MPX增强的能力：")]),t._v(" "),v("ul",[v("li",[t._v("模板上的增强\n"),v("ul",[v("li",[t._v("样式类名绑定")]),t._v(" "),v("li",[t._v("内联事件传参")]),t._v(" "),v("li",[t._v("动态组件")]),t._v(" "),v("li",[t._v("双向绑定")]),t._v(" "),v("li",[t._v("节点获取ref")])])]),t._v(" "),v("li",[t._v("JS里的增强\n"),v("ul",[v("li",[t._v("数据响应")]),t._v(" "),v("li",[t._v("setData优化")]),t._v(" "),v("li",[t._v("ES6+")])])]),t._v(" "),v("li",[t._v("样式上的增强\n"),v("ul",[v("li",[t._v("预处理支持")]),t._v(" "),v("li",[t._v("rpx转换")])])]),t._v(" "),v("li",[t._v("JSON里的增强\n"),v("ul",[v("li",[t._v("packages")]),t._v(" "),v("li",[t._v("分包资源优化")])])])]),t._v(" "),v("p",[t._v("MPX最显著的能力是数据响应，它衍生出computed/watch，以及双向数据绑定等。这个能力和Vue比较像，不同的是在MPX里是由mobx提供的数据响应能力。")]),t._v(" "),v("p",[t._v("而同样是数据响应，我们做了一些不一样的优化。")]),t._v(" "),v("h3",{attrs:{id:"性能优势"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#性能优势"}},[t._v("#")]),t._v(" 性能优势")]),t._v(" "),v("blockquote",[v("p",[t._v("通过对模板的解析抽象出访问的数据以保证在提供了数据响应能力的同时不至于劣化性能。")])]),t._v(" "),v("p",[t._v("mpvue/wepy/megalo等框架也提供了数据响应的能力，但是数据响应在小程序领域有个较大的问题，微信开发指南里明确提到要注意setData的调用频次和数据量的大小。")]),t._v(" "),v("p",[t._v("而数据响应最基本的做法就是数据变了就去set数据，这会极大劣化小程序的性能表现。")]),t._v(" "),v("p",[t._v("而MPX通过对模板进行解析，抽象出对应的render函数，在调用setData发送数据前执行render函数找到真正需要发送的数据。")]),t._v(" "),v("p",[t._v("效果如图：")]),t._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/9399b75c-5c81-4584-89b6-5e7f2c2ba7ba.png",alt:"小程序性能分析"}})]),t._v(" "),v("p",[t._v("小程序开发者工具的audits面板能辅助用户分析出可能需要优化的点。正如前文所说，MPX在红框部分，尤其是红框里的第三条，不将模板上未使用的数据发送到渲染层上做了极大的优化。")]),t._v(" "),v("p",[t._v("只要不出现渲染函数执行失败（会有warning在console里提示，同时兜底逻辑会进行全量setData以保证程序仍可正常运行），使用MPX开发的小程序就永远不用担心发送了模板未使用的数据。")]),t._v(" "),v("p",[t._v("虽然只是一个小小的TODO MVC示例，但是这个优化和应用的规模没关系，而且同时大家可以尝试别家的小demo对比看看。")]),t._v(" "),v("p",[t._v("这个优化的细节可以看"),v("RouterLink",{attrs:{to:"/articles/2.0.html"}},[t._v("前一篇文章")]),t._v("，或者我们的文档"),v("RouterLink",{attrs:{to:"/guide/understand/runtime.html"}},[t._v("MPX运行机制 - 数据响应与性能优化")])],1),t._v(" "),v("h2",{attrs:{id:"总结"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#总结"}},[t._v("#")]),t._v(" 总结")]),t._v(" "),v("p",[t._v("与目前市面上的诸多框架相比，MPX希望以原生小程序为基础，全面拥抱原生小程序，在原生小程序的基础上做增强，通过尽可能少的转换实现尽可能多的能力增强，在提升小程序开发体验的同时，保证不因转换或框架的问题产生过多的坑。")]),t._v(" "),v("p",[t._v("MPX框架的目标用户是对小程序质量有较高要求的开发者，如果你是原生小程序开发者，或者厌倦了解决某些以web框架DSL语法为基础的转换框架造成的坑，欢迎尝试MPX框架。")])])}),[],!1,null,null,null);v.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/58.50eb3b91.js b/docs-vuepress/.vuepress/dist/assets/js/58.50eb3b91.js
deleted file mode 100644
index 8fb0ab00a7..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/58.50eb3b91.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{406:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"mpx-小程序框架技术揭秘"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx-小程序框架技术揭秘"}},[t._v("#")]),t._v(" Mpx 小程序框架技术揭秘")]),t._v(" "),s("blockquote",[s("p",[t._v("作者："),s("a",{attrs:{href:"https://github.com/CommanderXL",target:"_blank",rel:"noopener noreferrer"}},[t._v("CommanderXL"),s("OutboundLink")],1)])]),t._v(" "),s("p",[t._v("与目前业内的几个小程序框架相比较而言，mpx 开发设计的出发点就是基于原生的小程序去做功能增强。所以从开发框架的角度来说，是没有任何“包袱”，围绕着原生小程序这个 core 去做不同功能的 patch 工作，使得开发小程序的体验更好。")]),t._v(" "),s("p",[t._v("于是我挑了一些我非常感兴趣的点去学习了下 mpx 在相关功能上的设计与实现。")]),t._v(" "),s("h2",{attrs:{id:"编译环节"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编译环节"}},[t._v("#")]),t._v(" 编译环节")]),t._v(" "),s("h3",{attrs:{id:"动态入口编译"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#动态入口编译"}},[t._v("#")]),t._v(" 动态入口编译")]),t._v(" "),s("p",[t._v("不同于 web 规范，我们都知道小程序每个 page/component 需要被最终在 webview 上渲染出来的内容是需要包含这几个独立的文件的：js/json/wxml/wxss。为了提升小程序的开发体验，mpx 参考 vue 的 SFC(single file component)的设计思路，采用单文件的代码组织方式进行开发。既然采用这种方式去组织代码的话，那么模板、逻辑代码、json配置文件、style样式等都放到了同一个文件当中。那么 mpx 需要做的一个工作就是如何将 SFC 在代码编译后拆分为 js/json/wxml/wxss 以满足小程序技术规范。熟悉 vue 生态的同学都知道，vue-loader 里面就做了这样一个编译转化工作。具体有关 vue-loader 的工作流程可以参见我写的"),s("a",{attrs:{href:"https://github.com/CommanderXL/Biu-blog/issues/33",target:"_blank",rel:"noopener noreferrer"}},[t._v("文章"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("p",[t._v("这里会遇到这样一个问题，就是在 vue 当中，如果你要引入一个页面/组件的话，直接通过"),s("code",[t._v("import")]),t._v("语法去引入对应的 vue 文件即可。但是在小程序的标准规范里面，它有自己一套组件系统，即如果你在某个页面/组件里面想要使用另外一个组件，那么需要在你的 json 配置文件当中去声明"),s("code",[t._v("usingComponents")]),t._v("这个字段，对应的值为这个组件的路径。")]),t._v(" "),s("p",[t._v("在 vue 里面 import 一个 vue 文件，那么这个文件会被当做一个 dependency 去加入到 webpack 的编译流程当中。但是 mpx 是保持小程序原有的功能，去进行功能的增强。因此一个 mpx 文件当中如果需要引入其他页面/组件，那么就是遵照小程序的组件规范需要在"),s("code",[t._v("usingComponents")]),t._v("定义好"),s("code",[t._v("组件名:路径")]),t._v("即可，"),s("strong",[t._v("mpx 提供的 webpack 插件来完成确定依赖关系，同时将被引入的页面/组件加入到编译构建的环节当中")]),t._v("。")]),t._v(" "),s("p",[t._v("接下来就来看下具体的实现，mpx webpack-plugin 暴露出来的插件上也提供了静态方法去使用 loader。这个 loader 的作用和 vue-loader 的作用类似，首先就是拿到 mpx 原始的文件后转化一个 js 文本的文件。例如一个 list.mpx 文件里面有关 json 的配置会被编译为：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=json&index=0!../../node_modules/@mpxjs/webpack-plugin/lib/json-compiler/index?root=!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=json&index=0!./list.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("这样可以清楚的看到 list.mpx 这个文件首先 selector(抽离"),s("code",[t._v("list.mpx")]),t._v("当中有关 json 的配置，并传入到 json-compiler 当中) ---\x3e>> json-compiler(对 json 配置进行处理，添加动态入口等) ---\x3e>> extractor(利用 child compiler 单独生成 json 配置文件)")]),t._v(" "),s("p",[t._v("其中动态添加入口的处理流程是在 json-compiler 当中去完成的。例如在你的 "),s("code",[t._v("page/home.mpx")]),t._v(" 文件当中的 json 配置中使用了 局部组件 "),s("code",[t._v("components/list.mpx")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"application/json"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/list"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("在 json-compiler 当中：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("addEntrySafely")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果loader已经回调，就不再添加entry")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callbacked"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 webpack 提供的 SingleEntryPlugin 插件创建一个单文件的入口依赖(即这个 component)")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" dep "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" SingleEntryPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createDependency")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  entryDeps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// compilation.addEntry 方法开始将这个需要被编译的 component 作为依赖添加到 webpack 的构建流程当中")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里可以看到的是整个动态添加入口文件的过程是深度优先的")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addEntry")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_compiler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    entryDeps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("delete")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkEntryDeps")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("processComponent")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rewritePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用 loaderContext 上提供的 resolve 方法去解析这个 component path 完整的路径，以及这个 component 所属的 package 相关的信息(例如 package.json 等)")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" component"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rawResult"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" info")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    componentPath "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" componentPath "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("subPackageRoot"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" componentName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hash")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" componentName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// component path 解析完之后，调用 addEntrySafely 开始在 webpack 构建流程中动态添加入口")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addEntrySafely")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rawResult"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isApp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("usingComponents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// async.forEachOf 流程控制依次调用 processComponent 方法")]),t._v("\n    async"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEachOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("usingComponents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("processComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("usingComponents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" path\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),s("p",[t._v("这里需要解释说明下有关 webpack 提供的 SingleEntryPlugin 插件。这个插件是 webpack 提供的一个内置插件，当这个插件被挂载到 webpack 的编译流程的过程中是，会绑定"),s("code",[t._v("compiler.hooks.make.tapAsync")]),t._v("hook，当这个 hook 触发后会调用这个插件上的 SingleEntryPlugin.createDependency 静态方法去创建一个入口依赖，然后调用"),s("code",[t._v("compilation.addEntry")]),t._v("将这个依赖加入到编译的流程当中，这个是单入口文件的编译流程的最开始的一个步骤(具体可以参见 "),s("a",{attrs:{href:"https://github.com/webpack/webpack/blob/master/lib/SingleEntryPlugin.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Webpack SingleEntryPlugin 源码"),s("OutboundLink")],1),t._v(")。")]),t._v(" "),s("p",[t._v("Mpx 正是利用了 webpack 提供的这样一种能力，在遵照小程序的自定义组件的规范的前提下，解析 mpx json 配置文件的过程中，手动的调用 SingleEntryPlugin 相关的方法去完成动态入口的添加工作。这样也就串联起了所有的 mpx 文件的编译工作。")]),t._v(" "),s("h3",{attrs:{id:"render-function"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#render-function"}},[t._v("#")]),t._v(" Render Function")]),t._v(" "),s("p",[t._v("Render Function 这块的内容我觉得是 Mpx 设计上的一大亮点内容。Mpx 引入 Render Function 主要解决的问题是性能优化方向相关的，因为小程序的架构设计，逻辑层和渲染层是2个独立的。")]),t._v(" "),s("p",[t._v("这里直接引用 Mpx 有关 Render Function 对于性能优化相关开发工作的描述：")]),t._v(" "),s("blockquote",[s("p",[t._v("作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：")])]),t._v(" "),s("blockquote",[s("ul",[s("li",[t._v("尽可能减少setData调用的频次")]),t._v(" "),s("li",[t._v("尽可能减少单次setData传输的数据\n为了实现以上两个优化方向，我们做了以下几项工作：")])])]),t._v(" "),s("blockquote",[s("p",[t._v("将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；")])]),t._v(" "),s("blockquote",[s("p",[t._v("将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。")])]),t._v(" "),s("p",[t._v("接下来我们看下 Mpx 是如何实现 Render Function 的。这里我们从一个简单的 demo 来说起：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('Computed reversed message: "{{ reversedMessage }}"'),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("the c string {{ demoObj.a.b.c }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ { active: isActive } }}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/core"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("isActive")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'messages'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("demoObj")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'c'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reversedMessage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("split")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reverse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("code",[t._v(".mpx")]),t._v(" 文件经过 loader 编译转换的过程中。对于 template 模块的处理和 vue 类似，首先将 template 转化为 AST，然后再将 AST 转化为 code 的过程中做相关转化的工作，最终得到我们需要的 template 模板代码。")]),t._v(" "),s("p",[t._v("在"),s("code",[t._v("packages/webpack-plugin/lib/template-compiler.js")]),t._v("模板处理 loader 当中:")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderResult "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bindThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("global.currentInject = {\n    moduleId: ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("moduleId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(",\n    render: function () {\n      var __seen = [];\n      var renderData = {};\n      ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("compiler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("genNode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ast"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("return renderData;\n    }\n};\\n")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("needCollect")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ignoreMap")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" meta"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wxsModuleMap\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在 render 方法内部，创建 renderData 局部变量，调用"),s("code",[t._v("compiler.genNode(ast)")]),t._v("方法完成 Render Function 核心代码的生成工作，最终将这个 renderData 返回。例如在上面给出来的 demo 实例当中，通过"),s("code",[t._v("compiler.genNode(ast)")]),t._v("方法最终生成的代码为：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mpxShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mpxShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'display:none;'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" isActive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Computed reversed message: \\""')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" reversedMessage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"\\""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"the c string "')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" demoObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__injectHelper"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("transformClass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" isActive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("mpx 文件当中的 template 模块被初步处理成上面的代码后，可以看到这是一段可执行的 js 代码。那么这段 js 代码到底是用作何处呢？可以看到"),s("code",[t._v("compiler.genNode")]),t._v("方法是被包裹至"),s("code",[t._v("bindThis")]),t._v("方法当中的。即这段 js 代码还会被"),s("code",[t._v("bindThis")]),t._v("方法做进一步的处理。打开 bind-this.js 文件可以看到内部的实现其实就是一个 babel 的 transform plugin。在处理上面这段 js 代码的 AST 的过程中，通过这个插件对 js 代码做进一步的处理。最终这段 js 代码处理后的结果是：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* mpx inject */")]),t._v(" global"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentInject "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("moduleId")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"2271575d"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" __seen "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" renderData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpxShow"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mpxShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpxShow"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mpxShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpxShow"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mpxShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpxShow"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mpxShow"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'display:none;'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Computed reversed message: \\""')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"reversedMessage"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("reversedMessage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"reversedMessage"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("reversedMessage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"\\""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"the c string "')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"demoObj.a.b.c"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("demoObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"demoObj"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("demoObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"a"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"b"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"c"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__injectHelper"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"transformClass"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"isActive"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isActive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"isActive"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isActive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("bindThis 方法对于 js 代码的转化规则就是：")]),t._v(" "),s("ol",[s("li",[t._v("一个变量的访问形式，改造成 this.xxx 的形式；")]),t._v(" "),s("li",[t._v("对象属性的访问形式，改造成 this.__get(object, property) 的形式(this.__get方法为运行时 mpx runtime 提供的方法)")])]),t._v(" "),s("p",[t._v("这里的 this 为 mpx 构造的一个代理对象，在你业务代码当中调用 createComponent/createPage 方法传入的配置项，例如 data，都会通过这个代理对象转化为响应式的数据。")]),t._v(" "),s("p",[t._v("需要注意的是不管哪种数据形式的改造，最终需要达到的效果就是确保在 Render Function 执行的过程当中，这些被模板使用到的数据能被正常的访问到，在访问的阶段中，这些被访问到的数据即被加入到 mpx 构建的整个响应式的系统当中。")]),t._v(" "),s("p",[t._v("只要在 template 当中使用到的 data 数据(包括衍生的 computed 数据)，最终都会被 renderData 所记录，而记录的数据形式是例如：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xxx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 数组的形式，第一项为这个数据实际的值，第二项为这个数据的 firstKey(主要用以数据 diff 的工作)")]),t._v("\n")])])]),s("p",[t._v("以上就是 mpx 生成 Render Function 的整个过程。总结下 Render Function 所做的工作：")]),t._v(" "),s("ol",[s("li",[t._v("执行 render 函数，将渲染模板使用到的数据加入到响应式的系统当中；")]),t._v(" "),s("li",[t._v("返回 renderData 用以接下来的数据 diff 以及调用小程序的 setData 方法来完成视图的更新")])]),t._v(" "),s("h3",{attrs:{id:"wxs-module"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#wxs-module"}},[t._v("#")]),t._v(" Wxs Module")]),t._v(" "),s("p",[t._v("Wxs 是小程序自己推出的一套脚本语言。"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("官方文档"),s("OutboundLink")],1),t._v("给出的示例，wxs 模块必须要声明式的被 wxml 引用。和 js 在 jsCore 当中去运行不同的是 wxs 是在渲染线程当中去运行的。因此 wxs 的执行便少了一次从 jsCore 执行的线程和渲染线程的通讯，从这个角度来说是对代码执行效率和性能上的比较大的一个优化手段。")]),t._v(" "),s("p",[t._v("有关官方提到的有关 wxs 的运行效率的问题还有待论证：")]),t._v(" "),s("blockquote",[s("p",[t._v("“在 android 设备中，小程序里的 wxs 与 js 运行效率无差异，而在 ios 设备中，小程序里的 wxs 会比 js 快 2~20倍。”")])]),t._v(" "),s("p",[t._v("因为 mpx 是对小程序做渐进增强，因此 wxs 的使用方式和原生的小程序保持一致。在你的"),s("code",[t._v(".mpx")]),t._v("文件当中的 template block 内通过路径直接去引入 wxs 模块即可使用：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("wxs")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("../wxs/components/list.wxs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ list.FOO }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// wxs/components/list.wxs")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" Foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'This is from list wxs module'")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  Foo\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在 template 模块经过 template-compiler 处理的过程中。模板编译器 compiler 在解析模板的 AST 过程中会针对 wxs 标签缓存一份 wxs 模块的映射表：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("meta")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("wxsModuleMap")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../wxs/components/list.wxs'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("当 compiler 对 template 模板解析完后，template-compiler 接下来就开始处理 wxs 模块相关的内容：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// template-compiler/index.js")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("raw")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("addDependency")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("dep")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" resourceIdent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getResourceIdentifier")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resourceIdent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" factory "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dependencyFactories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("constructor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("factory "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("throw")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Error")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("No module factory available for dependency type: ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("constructor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" innerMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" dependencies"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("factory"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("innerMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        dependencies"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("factory"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("innerMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" list "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" innerMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resourceIdent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("list "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("undefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" innerMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resourceIdent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("list "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果有 wxsModuleMap 即为 wxs module 依赖的话，那么下面会调用 compilation.addModuleDependencies 方法")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 wxsModule 作为 issuer 的依赖再次进行编译，最终也会被打包进输出的模块代码当中")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 需要注意的就是 wxs module 不仅要被注入到 bundle 里的 render 函数当中，同时也会通过 wxs-loader 处理，单独输出一份可运行的 wxs js 文件供 wxml 引入使用")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" module "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" meta"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wxsModuleMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    isSync "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" src "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" meta"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wxsModuleMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" expression "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("require(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("src"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" deps "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// parser 为 js 的编译器")]),t._v("\n    parser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("parse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("expression"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("current")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 需要注意的是这里需要部署 addDependency 接口，因为通过 parse.parse 对代码进行编译的时候，会调用这个接口来获取 require(${JSON.stringify(src)}) 编译产生的依赖模块")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("addDependency")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("dep")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("userRequest "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" module\n          deps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" issuer\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    issuer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addVariable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" expression"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" deps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 给 issuer module 添加 variable 依赖")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("iterationOfArrayCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("deps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" addDependency"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果没有 wxs module 的处理，那么 template-compiler 即为同步任务，否则为异步任务")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isSync"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" callback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" sortedDependencies "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pair1 "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("of")]),t._v(" dependencies"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pair2 "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("of")]),t._v(" pair1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        sortedDependencies"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("factory")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" pair1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dependencies")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" pair2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用 compilation.addModuleDependencies 方法，将 wxs module 作为 issuer module 的依赖加入到编译流程中")]),t._v("\n    compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addModuleDependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n      issuer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      sortedDependencies"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bail"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"template-script-style-json-模块单文件的生成"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#template-script-style-json-模块单文件的生成"}},[t._v("#")]),t._v(" template/script/style/json 模块单文件的生成")]),t._v(" "),s("p",[t._v("不同于 Vue 借助 webpack 是将 Vue 单文件最终打包成单独的 js chunk 文件。而小程序的规范是每个页面/组件需要对应的 wxml/js/wxss/json 4个文件。因为 mpx 使用单文件的方式去组织代码，所以在编译环节所需要做的工作之一就是将 mpx 单文件当中不同 block 的内容拆解到对应文件类型当中。在动态入口编译的小节里面我们了解到 mpx 会分析每个 mpx 文件的引用依赖，从而去给这个文件创建一个 entry 依赖(SingleEntryPlugin)并加入到 webpack 的编译流程当中。我们还是继续看下 mpx loader 对于 mpx 单文件初步编译转化后的内容：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* script */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"!!babel-loader!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=script&index=0!./list.mpx"')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* styles */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=styles&index=0!../../node_modules/@mpxjs/webpack-plugin/lib/wxss/loader?root=&importLoaders=1&extract=true!../../node_modules/@mpxjs/webpack-plugin/lib/style-compiler/index?{\\"id\\":\\"2271575d\\",\\"scoped\\":false,\\"sourceMap\\":false,\\"transRpx\\":{\\"mode\\":\\"only\\",\\"comment\\":\\"use rpx\\",\\"include\\":\\"/Users/XRene/demo/mpx-demo-source/src\\"}}!stylus-loader!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=styles&index=0!./list.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* json */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=json&index=0!../../node_modules/@mpxjs/webpack-plugin/lib/json-compiler/index?root=!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=json&index=0!./list.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* template */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"!!../../node_modules/@mpxjs/webpack-plugin/lib/extractor?type=template&index=0!../../node_modules/@mpxjs/webpack-plugin/lib/wxml/wxml-loader?root=!../../node_modules/@mpxjs/webpack-plugin/lib/template-compiler/index?{\\"usingComponents\\":[],\\"hasScoped\\":false,\\"isNative\\":false,\\"moduleId\\":\\"2271575d\\"}!../../node_modules/@mpxjs/webpack-plugin/lib/selector?type=template&index=0!./list.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("接下来可以看下 styles/json/template 这3个 block 的处理流程是什么样。")]),t._v(" "),s("p",[t._v("首先来看下 json block 的处理流程："),s("code",[t._v("list.mpx -> json-compiler -> extractor")]),t._v("。第一个阶段 list.mpx 文件经由 json-compiler 的处理流程在前面的章节已经讲过，主要就是分析依赖增加动态入口的编译过程。当所有的依赖分析完后，调用 json-compiler loader 的异步回调函数：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib/json-compiler/index.js")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" nativeCallback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" callbacked "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("callback")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" processOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkEntryDeps")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      callbacked "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nativeCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" output "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("var json = ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(";\\n")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("processOutput"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" output "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("processOutput")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      output "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("module.exports = JSON.stringify(json, null, 2);\\n")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nativeCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" output"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这里我们可以看到经由 json-compiler 处理后，通过"),s("code",[t._v("nativeCallback")]),t._v("方法传入下一个 loader 的文本内容形如：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" json "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/list397512ea/list"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("即这段文本内容会传递到下一个 loader 内部进行处理，即 extractor。接下来我们来看下 extractor 里面主要是实现了哪些功能：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// lib/extractor.js")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" contentLoader "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" normalize"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("lib")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'content-loader'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" request "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("!!")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("contentLoader"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("?")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("resource"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 构建一个新的 resource，且这个 resource 只需要经过 content-loader")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" resultSource "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" defaultResultSource\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" childFilename "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'extractor-filename'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" outputOptions "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("filename")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" childFilename\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建一个 child compiler")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" childCompiler "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mainCompilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createChildCompiler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" outputOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NodeTemplatePlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("outputOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LibraryTemplatePlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commonjs2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 最终输出的 chunk 内容遵循 commonjs 规范的可执行的模块代码 module.exports = (function(modules) {})([modules])")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("NodeTargetPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SingleEntryPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resourcePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LimitChunkCountPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("maxChunks")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  childCompiler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hooks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("thisCompilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("tap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MpxWebpackPlugin '")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("compilation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建 loaderContext 时触发的 hook，在这个 hook 触发的时候，将原本从 json-compiler 传递过来的 content 内容挂载至 loaderContext.__mpx__ 属性上面以供接下来的 content -loader 来进行使用")]),t._v("\n    compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hooks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("normalModuleLoader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("tap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MpxWebpackPlugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("loaderContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" module")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 传递编译结果，子编译器进入content-loader后直接输出")]),t._v("\n      loaderContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("__mpx__ "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fileDependencies")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getDependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("contextDependencies")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getContextDependencies")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" source\n\n  childCompiler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hooks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("afterCompile"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("tapAsync")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MpxWebpackPlugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里 afterCompile 产出的 assets 的代码当中是包含 webpack runtime bootstrap 的代码，不过需要注意的是这个 source 模块的产出形式")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 因为使用了 new LibraryTemplatePlugin(null, 'commonjs2') 等插件。所以产出的 source 是可以在 node 环境下执行的 module")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 因为在 loaderContext 上部署了 exec 方法，即可以直接执行 commonjs 规范的 module 代码，这样就最终完成了 mpx 单文件当中不同模块的抽离工作")]),t._v("\n    source "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("assets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("childFilename"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("assets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("childFilename"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("source")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Remove all chunk assets")]),t._v("\n    compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("chunks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("chunk")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      chunk"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("files"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("file")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("delete")]),t._v(" compilation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("assets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("file"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  childCompiler"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runAsChild")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" compilation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// exec 是 loaderContext 上提供的一个方法，在其内部会构建原生的 node.js module，并执行这个 module 的代码")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行这个 module 代码后获取的内容就是通过 module.exports 导出的内容")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" text "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("source"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Array"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isArray")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        text "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'\\n'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" extracted "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("extract")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resourcePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" selfResourcePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("extracted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        resultSource "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("module.exports = __webpack_public_path__ + ")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("extracted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("catch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nativeCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultSource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nativeCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resultSource"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nativeCallback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("稍微总结下上面的处理流程：")]),t._v(" "),s("ol",[s("li",[t._v("构建一个以当前模块路径及 content-loader 的 resource 路径")]),t._v(" "),s("li",[t._v("以这个 resource 路径作为入口模块，创建一个 childCompiler")]),t._v(" "),s("li",[t._v("childCompiler 启动后，创建 loaderContext 的过程中，将 content 文本内容挂载至 loaderContext."),s("strong",[t._v("mpx")]),t._v(" 上，这样在 content-loader 在处理入口模块的时候仅仅就是取出这个 content 文本内容并返回。实际上这个入口模块经过 loader 的过程不会做任何的处理工作，仅仅是将父 compilation 传入的 content 返回出去。")]),t._v(" "),s("li",[t._v("loader 处理模块的环节结束后，进入到 module.build 阶段，这个阶段对 content 内容没有太多的处理")]),t._v(" "),s("li",[t._v("createAssets 阶段，输出 chunk。")]),t._v(" "),s("li",[t._v("将输出的 chunk 构建为一个原生的 node.js 模块并执行，获取从这个 chunk 导出的内容。也就是模块通过"),s("code",[t._v("module.exports")]),t._v("导出的内容。")])]),t._v(" "),s("p",[t._v("所以上面的示例 demo 最终会输出一个 json 文件，里面包含的内容即为：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/list397512ea/list"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"运行时环节"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#运行时环节"}},[t._v("#")]),t._v(" 运行时环节")]),t._v(" "),s("p",[t._v("以上几个章节主要是分析了几个 Mpx 在编译构建环节所做的工作。接下来我们来看下 Mpx 在运行时环节做了哪些工作。")]),t._v(" "),s("h3",{attrs:{id:"响应式系统"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式系统"}},[t._v("#")]),t._v(" 响应式系统")]),t._v(" "),s("p",[t._v("小程序也是通过数据去驱动视图的渲染，需要手动的调用"),s("code",[t._v("setData")]),t._v("去完成这样一个动作。同时小程序的视图层也提供了用户交互的响应事件系统，在 js 代码中可以去注册相关的事件回调并在回调中去更改相关数据的值。Mpx 使用 Mobx 作为响应式数据工具并引入到小程序当中，使得小程序也有一套完成的响应式的系统，让小程序的开发有了更好的体验。")]),t._v(" "),s("p",[t._v("还是从组件的角度开始分析 mpx 的整个响应式的系统。每次通过"),s("code",[t._v("createComponent")]),t._v("方法去创建一个新的组件，这个方法将原生的小程序创造组件的方法"),s("code",[t._v("Component")]),t._v("做了一层代理，例如在 attched 的生命周期钩子函数内部会注入一个 mixin：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// attached 生命周期钩子 mixin")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attached")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 提供代理对象需要的api")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("transformApiForProxy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" currentInject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 缓存options")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$rawOptions "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rawOptions "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 原始的，没有剔除 customKeys 的 options 配置")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建proxy对象")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" mpxProxy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MPXProxy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rawOptions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将当前实例代理到 MPXProxy 这个代理对象上面去")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$mpxProxy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mpxProxy "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在小程序实例上绑定 $mpxProxy 的实例")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 组件监听视图数据更新, attached之后才能拿到properties")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$mpxProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在这个方法内部首先调用"),s("code",[t._v("transformApiForProxy")]),t._v("方法对组件实例上下文"),s("code",[t._v("this")]),t._v("做一层代理工作，在 context 上下文上去重置小程序的 setData 方法，同时拓展 context 相关的属性内容：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("transformApiForProxy")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" currentInject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rawSetData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// setData 绑定对应的 context 上下文")]),t._v("\n  Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProperties")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("setData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 重置 context 的 setData 方法")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$mpxProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$mpxProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configurable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("__getInitialData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configurable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("__render")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 小程序原生的 setData 方法")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" rawSetData\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configurable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// context 绑定注入的render函数")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("currentInject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("currentInject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 编译过程中生成的 render 函数")]),t._v("\n      Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProperties")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("__injectedRender")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" currentInject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configurable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("currentInject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getRefsData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProperties")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("__getRefsData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" currentInject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getRefsData\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("configurable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("接下来实例化一个 mpxProxy 实例并挂载至 context 上下文的 $mpxProxy 属性上，并调用 mpxProxy 的 created 方法完成这个代理对象的初始化的工作。在 created 方法内部主要是完成了以下的几个工作：")]),t._v(" "),s("ol",[s("li",[t._v("initApi，在组件实例 this 上挂载"),s("code",[t._v("$watch")]),t._v(","),s("code",[t._v("$forceUpdate")]),t._v(","),s("code",[t._v("$updated")]),t._v(","),s("code",[t._v("$nextTick")]),t._v("等方法，这样在你的业务代码当中即可直接访问实例上部署好的这些方法；")]),t._v(" "),s("li",[t._v("initData")]),t._v(" "),s("li",[t._v("initComputed，将 computed 计算属性字段全部代理至组件实例 this 上；")]),t._v(" "),s("li",[t._v("通过 Mobx observable 方法将 data 数据转化为响应式的数据；")]),t._v(" "),s("li",[t._v("initWatch，初始化所有的 watcher 实例；")]),t._v(" "),s("li",[t._v("initRender，初始化一个 renderWatcher 实例；")])]),t._v(" "),s("p",[t._v("这里我们具体的来看下 initRender 方法内部是如何进行工作的：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MPXProxy")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("initRender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderWatcher\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" renderExcutedFailed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("__injectedRender"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack 注入的有关这个 page/component 的 renderFunction")]),t._v("\n      renderWatcher "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderExcutedFailed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("try")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("__injectedRender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行 renderFunction，获取渲染所需的响应式数据")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("catch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handler")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("ret")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("renderExcutedFailed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("renderWithData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ret"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 渲染页面")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("forceCallback")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("在 initRender 方法内部非常清楚的看到，首先判断这个 page/component 是否具有 renderFunction，如果有的话那么就直接实例化一个 renderWatcher：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Watcher")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("constructor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" expr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("destroyed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("expr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'String'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" expr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expr")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" callbackType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callbackType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Object'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      options "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" callback\n      callback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("callbackType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'String'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      callback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("callback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" callback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'function'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("bind")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" options "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("uid\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建一个新的 reaction")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("reaction "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Reaction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("mpx-watcher-")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在调用 getValue 函数的时候，实际上是调用 reaction.track 方法，这个方法内部会自动执行 effect 函数，即执行 this.update() 方法，这样便会出发一次模板当中的 render 函数来完成依赖的收集")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("immediateAsync"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 放置到一个队列里面去执行")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("queueWatcher")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 立即执行 callback")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" value\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("immediate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("callback "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValue")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" value\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("reaction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("track")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取注入的 render 函数执行后返回的 renderData 的值，在执行 render 函数的过程中，就会访问响应式数据的值")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("deep"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" valueType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 某些情况下，最外层是非isObservable 对象，比如同时观察多个属性时")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isObservable")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("valueType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Array'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" valueType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Object'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("valueType "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Array'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toJS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newValue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("keys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("key")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              newValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toJS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" newValue\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toJS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isObservableArray")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("peek")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isObservableObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("keys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" value\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sync"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("queueWatcher")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" immediateAsync "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hasOwnProperty")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" oldValue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 重新获取新的 renderData 的值")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("immediateAsync "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!==")]),t._v(" oldValue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isObject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("forceCallback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        immediateAsync "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("callback")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("destroy")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("destroyed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("reaction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getDisposer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Watcher 观察者核心实现的工作流程就是：")]),t._v(" "),s("ol",[s("li",[t._v("构建一个 Reaction 实例；")]),t._v(" "),s("li",[t._v("调用 getValue 方法，即 reaction.track，在这个方法内部执行过程中会调用 renderFunction，这样在 renderFunction 方法的执行过程中便会访问到渲染所需要的响应式的数据并完成依赖收集；")]),t._v(" "),s("li",[t._v("根据 immediateAsync 配置来决定回调是放到下一帧还是立即执行；")]),t._v(" "),s("li",[t._v("当响应式数据发生变化的时候，执行 reaction 实例当中的回调函数，即"),s("code",[t._v("this.update()")]),t._v("方法来完成页面的重新渲染。")])]),t._v(" "),s("p",[t._v("mpx 在构建这个响应式的系统当中，主要有2个大的环节，其一为在构建编译的过程中，将 template 模块转化为 renderFunction，提供了渲染模板时所需响应式数据的访问机制，并将 renderFunction 注入到运行时代码当中，其二就是在运行环节，mpx 通过构建一个小程序实例的代理对象，将小程序实例上的数据访问全部代理至 MPXProxy 实例上，而 MPXProxy 实例即 mpx 基于 Mobx 去构建的一套响应式数据对象，首先将 data 数据转化为响应式数据，其次提供了 computed 计算属性，watch 方法等一系列增强的拓展属性/方法，虽然在你的业务代码当中 page/component 实例 this 都是小程序提供的，但是最终经过代理机制，实际上访问的是 MPXProxy 所提供的增强功能，所以 mpx 也是通过这样一个代理对象去接管了小程序的实例。需要特别指出的是，mpx 将小程序官方提供的 setData 方法同样收敛至内部，这也是响应式系统提供的基础能力，即开发者只需要关注业务开发，而有关小程序渲染运行在 mpx 内部去帮你完成。")]),t._v(" "),s("h2",{attrs:{id:"性能优化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#性能优化"}},[t._v("#")]),t._v(" 性能优化")]),t._v(" "),s("p",[t._v("由于小程序的双线程的架构设计，逻辑层和视图层之间需要桥接 native bridge。如果要完成视图层的更新，那么逻辑层需要调用 setData 方法，数据经由 native bridge，再到渲染层，这个工程流程为：")]),t._v(" "),s("blockquote",[s("p",[t._v("小程序逻辑层调用宿主环境的 setData 方法；")])]),t._v(" "),s("blockquote",[s("p",[t._v("逻辑层执行 JSON.stringify 将待传输数据转换成字符串并拼接到特定的JS脚本，并通过evaluateJavascript 执行脚本将数据传输到渲染层；")])]),t._v(" "),s("blockquote",[s("p",[t._v("渲染层接收到后， WebView JS 线程会对脚本进行编译，得到待更新数据后进入渲染队列等待 WebView 线程空闲时进行页面渲染；")])]),t._v(" "),s("blockquote",[s("p",[t._v("WebView 线程开始执行渲染时，待更新数据会合并到视图层保留的原始 data 数据，并将新数据套用在WXML片段中得到新的虚拟节点树。经过新虚拟节点树与当前节点树的 diff 对比，将差异部分更新到UI视图。同时，将新的节点树替换旧节点树，用于下一次重渲染。")])]),t._v(" "),s("p",[s("a",{attrs:{href:"https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651232791&idx=1&sn=4b83b66d376b1331a992d242cb2a0f17&chksm=bd4943938a3eca853a687765397517cc0ab9cfe4c711705e8fd821bbea8a1ab3c115c8c2fc65&scene=21#wechat_redirect",target:"_blank",rel:"noopener noreferrer"}},[t._v("文章来源"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("而 setData 作为逻辑层和视图层之间通讯的核心接口，那么对于这个接口的使用遵照一些准则将有助于性能方面的提升。")]),t._v(" "),s("h3",{attrs:{id:"尽可能的减少-setdata-传输的数据"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#尽可能的减少-setdata-传输的数据"}},[t._v("#")]),t._v(" 尽可能的减少 setData 传输的数据")]),t._v(" "),s("p",[t._v("Mpx 在这个方面所做的工作之一就是基于数据路径的 diff。这也是官方所推荐的 setData 的方式。每次响应式数据发生了变化，调用 setData 方法的时候确保传递的数据都为 diff 过后的最小数据集，这样来减少 setData 传输的数据。")]),t._v(" "),s("p",[t._v("接下来我们就来看下这个优化手段的具体实现思路，首先还是从一个简单的 demo 来看：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("obj")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("d")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("d")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'d'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("在示例 demo 当中，声明了一个 obj 对象(这个对象里面的内容在模块当中被使用到了)。然后经过 200ms 后，手动修改 obj.a 的值，因为对于 c 字段来说它的值没有发生改变，而 d 字段发生了改变。因此在 setData 方法当中也应该只更新 obj.a.d 的值，即：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'obj.a.d'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'d'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("因为 mpx 是整体接管了小程序当中有关调用 setData 方法并驱动视图更新的机制。所以当你在改变某些数据的时候，mpx 会帮你完成数据的 diff 工作，以保证每次调用 setData 方法时，传入的是最小的更新数据集。")]),t._v(" "),s("p",[t._v("这里也简单的分析下 mpx 是如何去实现这样的功能的。在上文的编译构建阶段有分析到 mpx 生成的 Render Function，这个 Render Function 每次执行的时候会返回一个 renderData，而这个 renderData 即用以接下来进行 setData 驱动视图渲染的原始数据。renderData 的数据组织形式是模板当中使用到的数据路径作为 key 键值，对应的值使用一个数组组织，数组第一项为数据的访问路径(可获取到对应渲染数据)，第二项为数据路径的第一个键值，例如在 demo 示例当中的 renderData 数据如下：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'obj.a.c'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("c"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'obj'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\nrenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'obj.a.d'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("d"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'obj'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("当页面第一次渲染，或者是响应式输出发生变化的时候，Render Function 都会被执行一次用以获取最新的 renderData 来进行接下来的页面渲染过程。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/core/proxy.js")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MPXProxy")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("renderWithData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rawRenderData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// rawRenderData 即为 Render Function 执行后获取的初始化 renderData")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" renderData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("preprocessRenderData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rawRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// renderData 数据的预处理")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("miniRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 最小数据渲染集，页面/组件初次渲染的时候使用 miniRenderData 进行渲染，初次渲染的时候是没有数据需要进行 diff 的")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("miniRenderData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" key "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 遍历数据访问路径")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hasOwnProperty")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" item "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" firstKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 某个字段 path 的第一个 key 值")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("localKeys"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("miniRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("diffAndCloneA")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clone\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doRender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("miniRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 非初次渲染使用 processRenderData 进行数据的处理，主要是需要进行数据的 diff 取值工作，并更新 miniRenderData 的值")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doRender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("processRenderData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("processRenderData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("renderData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" key "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("hasOwnProperty")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" item "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" firstKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" clone"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" diff "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("diffAndCloneA")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("miniRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 开始数据 diff")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// firstKey 必须是为响应式数据的 key，且这个发生变化的 key 为 forceUpdateKey 或者是在 diff 阶段发现确实出现了 diff 的情况")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("localKeys"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("firstKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkInForceUpdateKeys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" diff"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("miniRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" clone\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/helper/utils.js")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果 renderData 里面即包含对某个 key 的访问，同时还有对这个 key 的子节点访问的话，那么需要剔除这个子节点")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * process renderData, remove sub node if visit parent node already\n * @param {Object} renderData\n * @return {Object} processedRenderData\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("preprocessRenderData")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("renderData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// method for get key path array")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("processKeyPathMap")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("keyPathMap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" keyPath "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("keys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keyPathMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" keyPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("keyA")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" keyPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("every")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("keyB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keyA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("startsWith")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keyB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" keyA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!==")]),t._v(" keyB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" nextChar "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" keyA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("keyB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("nextChar "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" nextChar "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'['")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" processedRenderData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" renderDataFinalKey "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("processKeyPathMap")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取最终需要被渲染的数据的 key")]),t._v("\n  Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("keys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("renderDataFinalKey"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexOf")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      processedRenderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" renderData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" processedRenderData\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("其中在 processRenderData 方法内部调用了 diffAndCloneA 方法去完成数据的 diff 工作。在这个方法内部判断新、旧值是否发生变化，返回的 diff 字段即表示是否发生了变化，clone 为 diffAndCloneA 接受到的第一个数据的深拷贝值。")]),t._v(" "),s("p",[t._v("这里大致的描述下相关流程：")]),t._v(" "),s("ol",[s("li",[t._v("响应式的数据发生了变化，触发 Render Function 重新执行，获取最新的 renderData；")]),t._v(" "),s("li",[t._v("renderData 的预处理，主要是用以剔除通过路径访问时同时有父、子路径情况下的子路径的 key；")]),t._v(" "),s("li",[t._v("判断是否存在 miniRenderData 最小数据渲染集，如果没有那么 Mpx 完成 miniRenderData 最小渲染数据集的收集，如果有那么使用处理后的 renderData 和 miniRenderData 进行数据的 diff 工作(diffAndCloneA)，并更新最新的 miniRenderData 的值；")]),t._v(" "),s("li",[t._v("调用 doRender 方法，进入到 setData 阶段")])]),t._v(" "),s("p",[t._v("相关参阅文档：")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#Page.prototype.setData(Object%20data,%20Function%20callback)",target:"_blank",rel:"noopener noreferrer"}},[t._v("Page"),s("OutboundLink")],1)])]),t._v(" "),s("h3",{attrs:{id:"尽可能的减少-setdata-的调用频次"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#尽可能的减少-setdata-的调用频次"}},[t._v("#")]),t._v(" 尽可能的减少 setData 的调用频次")]),t._v(" "),s("p",[t._v("每次调用 setData 方法都会完成一次从逻辑层 -> native bridge -> 视图层的通讯，并完成页面的更新。因此频繁的调用 setData 方法势必也会造成视图的多次渲染，用户的交互受阻。所以对于 setData 方法另外一个优化角度就是尽可能的减少 setData 的调用频次，将多个同步的 setData 操作合并到一次调用当中。接下来就来看下 mpx 在这方面是如何做优化的。")]),t._v(" "),s("p",[t._v("还是先来看一个简单的 demo:")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("msg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("obj")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("d")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("obj")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handler")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("msg "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'world'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("deep")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("d")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'d'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("在示例 demo 当中，msg 和 obj 都作为模板依赖的数据，这个组件开始展示后的 200ms，更新 obj.a 的值，同时 obj 被 watch，当 obj 发生改变后，更新 msg 的值。这里的逻辑处理顺序是：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a 变化 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" 将 renderWatch 加入到执行队列 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" 触发 obj watch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" 将 obj watch 加入到执行队列 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" 将执行队列放到下一帧执行 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" 按照 watch id 从小到大依次执行 watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("run "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" setData "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("方法调用一次")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("即 renderWatch 回调"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("，统一更新 obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a 及 msg "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" 视图重新渲染\n")])])]),s("p",[t._v("接下来就来具体看下这个流程：由于 obj 作为模板渲染的依赖数据，自然会被这个组件的 renderWatch 作为依赖而被收集。当 obj 的值发生变化后，首先触发 reaction 的回调，即 "),s("code",[t._v("this.update()")]),t._v(" 方法，如果是个同步的 watch，那么立即调用 "),s("code",[t._v("this.run()")]),t._v(" 方法，即 watcher 监听的回调方法，否则就通过 "),s("code",[t._v("queueWatcher(this)")]),t._v(" 方法将这个 watcher 加入到执行队列：")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/core/watcher.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" Watcher "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("constructor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" expr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" callback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("uid\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("reaction "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Reaction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("mpx-watcher-")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sync"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("queueWatcher")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("而在 queueWatcher 方法中，lockTask 维护了一个异步锁，即将 flushQueue 当成微任务统一放到下一帧去执行。所以在 flushQueue 开始执行之前，还会有同步的代码将 watcher 加入到执行队列当中，当 flushQueue 开始执行的时候，依照 watcher.id 升序依次执行，这样去确保 renderWatcher 在执行前，其他所有的 watcher 回调都执行完了，即执行 renderWatcher 的回调的时候获取到的 renderData 都是最新的，然后再去进行 setData 的操作，完成页面的更新。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/core/queueWatcher.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" asyncLock "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../helper/utils'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" queue "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" idsMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" flushing "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" curIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" lockTask "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("asyncLock")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("queueWatcher")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("watcher")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" watcher "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'function'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    watcher "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("Infinity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" watcher\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("idsMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("Infinity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    idsMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("flushing"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("while")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" curIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        i"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("splice")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("lockTask")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("flushQueue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resetQueue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("flushQueue")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  flushing "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n  queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sort")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("curIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" curIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" curIndex"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" watcher "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("curIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    idsMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v("\n    watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("destroyed "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" watcher"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resetQueue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resetQueue")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  flushing "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n  curIndex "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" queue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/59.27106fbb.js b/docs-vuepress/.vuepress/dist/assets/js/59.27106fbb.js
deleted file mode 100644
index f5c2aa7158..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/59.27106fbb.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{407:function(v,_,t){"use strict";t.r(_);var d=t(4),e=Object(d.a)({},(function(){var v=this,_=v._self._c;return _("ContentSlotsDistributor",{attrs:{"slot-key":v.$parent.slotKey}},[_("h1",{attrs:{id:"小程序框架运行时性能大测评"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#小程序框架运行时性能大测评"}},[v._v("#")]),v._v(" 小程序框架运行时性能大测评")]),v._v(" "),_("blockquote",[_("p",[v._v("作者：董宏平("),_("a",{attrs:{href:"https://github.com/hiyuki",target:"_blank",rel:"noopener noreferrer"}},[v._v("hiyuki"),_("OutboundLink")],1),v._v(")，滴滴出行小程序负责人，mpx框架负责人及核心作者")])]),v._v(" "),_("p",[v._v("随着小程序在商业上的巨大成功，小程序开发在国内前端领域越来越受到重视，为了方便广大开发者更好地进行小程序开发，各类小程序框架也层出不穷，呈现出百花齐放的态势。但是到目前为止，业内一直没有出现一份全面、详细、客观、公正的小程序框架测评报告，为小程序开发者在技术选型时提供参考。于是我便筹划推出一系列文章，对业内流行的小程序框架进行一次全方位的、客观公正的测评，本文是系列文章的第一篇——运行时性能篇。")]),v._v(" "),_("p",[v._v("在本文中，我们会对下列框架进行运行时性能测试(排名不分先后):")]),v._v(" "),_("ul",[_("li",[v._v("wepy2(https://github.com/Tencent/wepy) @2.0.0-alpha.20")]),v._v(" "),_("li",[v._v("uniapp(https://github.com/dcloudio/uni-app) @2.0.0-26120200226001")]),v._v(" "),_("li",[v._v("mpx(https://github.com/didi/mpx) @2.5.3")]),v._v(" "),_("li",[v._v("chameleon(https://github.com/didi/chameleon) @1.0.5")]),v._v(" "),_("li",[v._v("mpvue(https://github.com/Meituan-Dianping/mpvue) @2.0.6")]),v._v(" "),_("li",[v._v("kbone(https://github.com/Tencent/kbone) @0.8.3")]),v._v(" "),_("li",[v._v("taro next(https://github.com/NervJS/taro) @3.0.0-alpha.5")])]),v._v(" "),_("p",[v._v("其中对于kbone和taro next均以vue作为业务框架进行测试。")]),v._v(" "),_("p",[v._v("运行时性能的测试内容包括以下几个维度：")]),v._v(" "),_("ul",[_("li",[v._v("框架运行时体积")]),v._v(" "),_("li",[v._v("页面渲染耗时")]),v._v(" "),_("li",[v._v("页面更新耗时")]),v._v(" "),_("li",[v._v("局部更新耗时")]),v._v(" "),_("li",[v._v("setData调用次数")]),v._v(" "),_("li",[v._v("setData发送数据大小")])]),v._v(" "),_("p",[v._v("框架性能测试demo全部存放于https://github.com/hiyuki/mp-framework-benchmark 中，欢迎广大开发者进行验证纠错及补全；")]),v._v(" "),_("h2",{attrs:{id:"测试方案"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#测试方案"}},[v._v("#")]),v._v(" 测试方案")]),v._v(" "),_("p",[v._v("为了使测试结果真实有效，我基于常见的业务场景构建了两种测试场景，分别是动态测试场景和静态测试场景。")]),v._v(" "),_("h3",{attrs:{id:"动态测试场景"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#动态测试场景"}},[v._v("#")]),v._v(" 动态测试场景")]),v._v(" "),_("p",[v._v("动态测试中，视图基于数据动态渲染，静态节点较少，视图更新耗时和setData调用情况是该测试场景中的主要测试点。")]),v._v(" "),_("p",[v._v("动态测试demo模拟了实际业务中常见的长列表+多tab场景，该demo中存在两份优惠券列表数据，一份为可用券数据，另一份为不可用券数据，其中同一时刻视图中只会渲染展示其中一份数据，可以在上方的操作区模拟对列表数据的各种操作及视图展示切换(切tab)。")]),v._v(" "),_("p",[_("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/PWsGL0GkuQ/dynamic.jpeg",width:"300px"}})]),v._v(" "),_("p",[_("em",[v._v("动态测试demo")])]),v._v(" "),_("p",[v._v("在动态测试中，我在外部通过函数代理的方式在初始化之前将App、Page和Component构造器进行代理，通过mixin的方式在Page的onLoad和Component的created钩子中注入setData拦截逻辑，对所有页面和组件的setData调用进行监听，并统计小程序的视图更新耗时及setData调用情况。该测试方式能够做到对框架代码的零侵入，能够跟踪到小程序全量的setData行为并进行独立的耗时计算，具有很强的普适性，代码具体实现可以查看https://github.com/hiyuki/mp-framework-benchmark/blob/master/utils/proxy.js")]),v._v(" "),_("h3",{attrs:{id:"静态测试场景"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#静态测试场景"}},[v._v("#")]),v._v(" 静态测试场景")]),v._v(" "),_("p",[v._v("静态测试模拟业务中静态页面的场景，如运营活动和文章等页面，页面内具备大量的静态节点，而没有数据动态渲染，初始ready耗时是该场景下测试的重心。")]),v._v(" "),_("p",[v._v("静态测试demo使用了我去年发表的一篇技术文章的html代码进行小程序适配构建，其中包含大量静态节点及文本内容。")]),v._v(" "),_("p",[_("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/5TOToHvunN/static.jpeg",width:"300px"}})]),v._v(" "),_("p",[_("em",[v._v("静态测试demo")])]),v._v(" "),_("h2",{attrs:{id:"测试流程及数据"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#测试流程及数据"}},[v._v("#")]),v._v(" 测试流程及数据")]),v._v(" "),_("blockquote",[_("p",[v._v("以下所有耗时类的测试数据均为微信小程序中真机进行5次测试计算平均值得出，单位均为ms。Ios测试环境为手机型号iPhone 11，系统版本13.3.1，微信版本7.0.12，安卓测试环境为手机型号小米9，系统版本Android10，微信版本7.0.12。")])]),v._v(" "),_("blockquote",[_("p",[v._v("为了使数据展示不过于混乱复杂，文章中所列的数据以Ios的测试结果为主，安卓测试结论与Ios相符，整体耗时比Ios高3~4倍左右，所有的原始测试数据存放在https://github.com/hiyuki/mp-framework-benchmark/blob/master/rawData.csv")])]),v._v(" "),_("blockquote",[_("p",[v._v("由于transform-runtime引入的core-js会对框架的运行时体积和运行耗时带来一定影响，且不是所有的框架都会在编译时开启transform-runtime，为了对齐测试环境，下述测试均在transform-runtime关闭时进行。")])]),v._v(" "),_("h3",{attrs:{id:"框架运行时体积"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#框架运行时体积"}},[v._v("#")]),v._v(" 框架运行时体积")]),v._v(" "),_("p",[v._v("由于不是所有框架都能够使用"),_("code",[v._v("webpack-bundle-analyzer")]),v._v("得到精确的包体积占用，这里我通过将各框架生成的demo项目体积减去native编写的demo项目体积作为框架的运行时体积。")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("demo总体积(KB)")]),v._v(" "),_("th",[v._v("框架运行时体积(KB)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("27")]),v._v(" "),_("td",[v._v("0")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("66")]),v._v(" "),_("td",[v._v("39")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("114")]),v._v(" "),_("td",[v._v("87")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("78")]),v._v(" "),_("td",[v._v("51")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("136")]),v._v(" "),_("td",[v._v("109")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("103")]),v._v(" "),_("td",[v._v("76")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("395")]),v._v(" "),_("td",[v._v("368")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("183")]),v._v(" "),_("td",[v._v("156")])])])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nnative > wepy2 > mpx > mpvue > uniapp > chameleon > taro next > kbone")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("wepy2和mpx在框架运行时体积上控制得最好；")]),v._v(" "),_("li",[v._v("taro next和kbone由于动态渲染的特性，在dist中会生成递归渲染模板/组件，所以占用体积较大。")])]),v._v(" "),_("h3",{attrs:{id:"页面渲染耗时-动态测试"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#页面渲染耗时-动态测试"}},[v._v("#")]),v._v(" 页面渲染耗时(动态测试)")]),v._v(" "),_("p",[v._v("我们使用"),_("code",[v._v("刷新页面")]),v._v("操作触发页面重新加载，对于大部分框架来说，页面渲染耗时是从触发刷新操作到页面执行onReady的耗时，但是对于像kbone和taro next这样的动态渲染框架，页面执行onReady并不代表视图真正渲染完成，为此，我们设定了一个特殊规则，在页面onReady触发的1000ms内，在没有任何操作的情况下出现setData回调时，以最后触发的setData回调作为页面渲染完成时机来计算真实的页面渲染耗时，测试结果如下：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("页面渲染耗时")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("60.8")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("64")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("56.4")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("52.6")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("56.4")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("117.8")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("98.6")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("89.6")])])])]),v._v(" "),_("blockquote",[_("p",[v._v("该项测试的耗时并不等同于真实的渲染耗时，由于小程序自身没有提供performance api，真实渲染耗时无法通过js准确测试得出，不过从得出的数据来看该项数据依然具备一定的参考意义。")])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nmpx ≈ chameleon ≈ uniapp ≈ native ≈ wepy2 > taro next ≈ kbone ≈ mpvue")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("由于mpvue全量在页面进行渲染，kbone和taro next采用了动态渲染技术，页面渲染耗时较长，其余框架并无太大区别。")])]),v._v(" "),_("h3",{attrs:{id:"页面更新耗时-无后台数据"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#页面更新耗时-无后台数据"}},[v._v("#")]),v._v(" 页面更新耗时(无后台数据)")]),v._v(" "),_("p",[v._v("这里后台数据的定义为data中存在但当前页面渲染中未使用到的数据，在这个demo场景下即为不可用券的数据，当前会在不可用券为0的情况下，对可用券列表进行各种操作，并统计更新耗时。")]),v._v(" "),_("p",[v._v("更新耗时的计算方式是从数据操作事件触发开始到对应的setData回调完成的耗时")]),v._v(" "),_("blockquote",[_("p",[v._v("mpvue中使用了当前时间戳(new Date)作为超时依据对setData进行了超时时间为50ms的节流操作，该方式存在严重问题，当vue内单次渲染同步流程执行耗时超过50ms时，后续组件patch触发的setData会突破这个节流限制，以50ms每次的频率对setData进行高频无效调用。在该性能测试demo中，当优惠券数量超过500时，界面就会完全卡死。为了顺利跑完整个测试流程，我对该问题进行了简单修复，使用setTimeout重写了节流部分，确保在vue单次渲染流程同步执行完毕后才会调用setData发送合并数据，之后mpvue的所有性能测试都是基于这个patch版本来进行的，该patch版本存放在https://github.com/hiyuki/mp-framework-benchmark/blob/master/frameworks/mpvue/runtime/patch/index.js")])]),v._v(" "),_("blockquote",[_("p",[v._v("理论上来讲native的性能在进行优化的前提下一定是所有框架的天花板，但是在日常业务开发中我们可能无法对每一次setData都进行优化，以下性能测试中所有的native数据均采用修改数据后全量发送的形式来实现。")])]),v._v(" "),_("p",[v._v("第一项测试我们使用"),_("code",[v._v("新增可用券(100)")]),v._v("操作将可用券数量由0逐级递增到1000：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("100")]),v._v(" "),_("th",[v._v("200")]),v._v(" "),_("th",[v._v("300")]),v._v(" "),_("th",[v._v("400")]),v._v(" "),_("th",[v._v("500")]),v._v(" "),_("th",[v._v("600")]),v._v(" "),_("th",[v._v("700")]),v._v(" "),_("th",[v._v("800")]),v._v(" "),_("th",[v._v("900")]),v._v(" "),_("th",[v._v("1000")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("84.6")]),v._v(" "),_("td",[v._v("69.8")]),v._v(" "),_("td",[v._v("71.6")]),v._v(" "),_("td",[v._v("75")]),v._v(" "),_("td",[v._v("77.2")]),v._v(" "),_("td",[v._v("78.8")]),v._v(" "),_("td",[v._v("82.8")]),v._v(" "),_("td",[v._v("93.2")]),v._v(" "),_("td",[v._v("93.4")]),v._v(" "),_("td",[v._v("105.4")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("118.4")]),v._v(" "),_("td",[v._v("168.6")]),v._v(" "),_("td",[v._v("204.6")]),v._v(" "),_("td",[v._v("246.4")]),v._v(" "),_("td",[v._v("288.6")]),v._v(" "),_("td",[v._v("347.8")]),v._v(" "),_("td",[v._v("389.2")]),v._v(" "),_("td",[v._v("434.2")]),v._v(" "),_("td",[v._v("496")]),v._v(" "),_("td",[v._v("539")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("121.2")]),v._v(" "),_("td",[v._v("100")]),v._v(" "),_("td",[v._v("96")]),v._v(" "),_("td",[v._v("98.2")]),v._v(" "),_("td",[v._v("97.8")]),v._v(" "),_("td",[v._v("99.6")]),v._v(" "),_("td",[v._v("104")]),v._v(" "),_("td",[v._v("102.4")]),v._v(" "),_("td",[v._v("109.4")]),v._v(" "),_("td",[v._v("107.6")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("110.4")]),v._v(" "),_("td",[v._v("87.2")]),v._v(" "),_("td",[v._v("82.2")]),v._v(" "),_("td",[v._v("83")]),v._v(" "),_("td",[v._v("80.6")]),v._v(" "),_("td",[v._v("79.6")]),v._v(" "),_("td",[v._v("86.6")]),v._v(" "),_("td",[v._v("90.6")]),v._v(" "),_("td",[v._v("89.2")]),v._v(" "),_("td",[v._v("96.4")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("116.8")]),v._v(" "),_("td",[v._v("115.4")]),v._v(" "),_("td",[v._v("117")]),v._v(" "),_("td",[v._v("119.6")]),v._v(" "),_("td",[v._v("122")]),v._v(" "),_("td",[v._v("125.2")]),v._v(" "),_("td",[v._v("133.8")]),v._v(" "),_("td",[v._v("133.2")]),v._v(" "),_("td",[v._v("144.8")]),v._v(" "),_("td",[v._v("145.6")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("112.8")]),v._v(" "),_("td",[v._v("121.2")]),v._v(" "),_("td",[v._v("140")]),v._v(" "),_("td",[v._v("169")]),v._v(" "),_("td",[v._v("198.8")]),v._v(" "),_("td",[v._v("234.2")]),v._v(" "),_("td",[v._v("278.8")]),v._v(" "),_("td",[v._v("318.4")]),v._v(" "),_("td",[v._v("361.4")]),v._v(" "),_("td",[v._v("408.2")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("556.4")]),v._v(" "),_("td",[v._v("762.4")]),v._v(" "),_("td",[v._v("991.6")]),v._v(" "),_("td",[v._v("1220.6")]),v._v(" "),_("td",[v._v("1468.8")]),v._v(" "),_("td",[v._v("1689.6")]),v._v(" "),_("td",[v._v("1933.2")]),v._v(" "),_("td",[v._v("2150.4")]),v._v(" "),_("td",[v._v("2389")]),v._v(" "),_("td",[v._v("2620.6")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("470")]),v._v(" "),_("td",[v._v("604.6")]),v._v(" "),_("td",[v._v("759.6")]),v._v(" "),_("td",[v._v("902.4")]),v._v(" "),_("td",[v._v("1056.2")]),v._v(" "),_("td",[v._v("1228")]),v._v(" "),_("td",[v._v("1393.4")]),v._v(" "),_("td",[v._v("1536.2")]),v._v(" "),_("td",[v._v("1707.8")]),v._v(" "),_("td",[v._v("1867.2")])])])]),v._v(" "),_("p",[v._v("然后我们按顺序逐项点击"),_("code",[v._v("删除可用券(all)")]),v._v(" > "),_("code",[v._v("新增可用券(1000)")]),v._v(" > "),_("code",[v._v("更新可用券(1)")]),v._v(" > "),_("code",[v._v("更新可用券(all)")]),v._v(" > "),_("code",[v._v("删除可用券(1)")]),v._v("：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("delete(all)")]),v._v(" "),_("th",[v._v("add(1000)")]),v._v(" "),_("th",[v._v("update(1)")]),v._v(" "),_("th",[v._v("update(all)")]),v._v(" "),_("th",[v._v("delete(1)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("32.8")]),v._v(" "),_("td",[v._v("295.6")]),v._v(" "),_("td",[v._v("92.2")]),v._v(" "),_("td",[v._v("92.2")]),v._v(" "),_("td",[v._v("83")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("56.8")]),v._v(" "),_("td",[v._v("726.4")]),v._v(" "),_("td",[v._v("49.2")]),v._v(" "),_("td",[v._v("535")]),v._v(" "),_("td",[v._v("530.8")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("43.6")]),v._v(" "),_("td",[v._v("584.4")]),v._v(" "),_("td",[v._v("54.8")]),v._v(" "),_("td",[v._v("144.8")]),v._v(" "),_("td",[v._v("131.2")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("41.8")]),v._v(" "),_("td",[v._v("489.6")]),v._v(" "),_("td",[v._v("52.6")]),v._v(" "),_("td",[v._v("169.4")]),v._v(" "),_("td",[v._v("165.6")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("39")]),v._v(" "),_("td",[v._v("765.6")]),v._v(" "),_("td",[v._v("95.6")]),v._v(" "),_("td",[v._v("237.8")]),v._v(" "),_("td",[v._v("144.8")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("103.6")]),v._v(" "),_("td",[v._v("669.4")]),v._v(" "),_("td",[v._v("404.4")]),v._v(" "),_("td",[v._v("414.8")]),v._v(" "),_("td",[v._v("433.6")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("120.2")]),v._v(" "),_("td",[v._v("4978")]),v._v(" "),_("td",[v._v("2356.4")]),v._v(" "),_("td",[v._v("2419.4")]),v._v(" "),_("td",[v._v("2357")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("126.6")]),v._v(" "),_("td",[v._v("3930.6")]),v._v(" "),_("td",[v._v("1607.8")]),v._v(" "),_("td",[v._v("1788.6")]),v._v(" "),_("td",[v._v("2318.2")])])])]),v._v(" "),_("blockquote",[_("p",[v._v("该项测试中初期我update(all)的逻辑是循环对每个列表项进行更新，形如"),_("code",[v._v("listData.forEach((item)=>{item.count++})")]),v._v("，发现在chameleon框架中执行界面会完全卡死，追踪发现chameleon框架中没有对setData进行异步合并处理，而是在数据变动时直接同步发送，这样在数据量为1000的场景下用该方式进行更新会高频触发1000次setData，导致界面卡死；对此，我在chameleon框架的测试demo中，将update(all)的逻辑调整为深clone产生一份更新后的listData，再将其整体赋值到this.listData当中，以确保该项测试能够正常进行。")])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nnative > mpx ≈ uniapp > chameleon > mpvue > wepy2 > taro next > kbone")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("mpx和uniapp在框架内部进行了完善的diff优化，随着数据量的增加，两个框架的新增耗时没有显著上升；")]),v._v(" "),_("li",[v._v("wepy2会在数据变更时对props数据也进行setData，在该场景下造成了大量的无效性能损耗，导致性能表现不佳；")]),v._v(" "),_("li",[v._v("kbone和taro next采用了动态渲染方案，每次新增更新时会发送大量描述dom结构的数据，与此同时动态递归渲染的耗时也远大于常规的静态模板渲染，使得这两个框架在所有的更新场景下耗时都远大于其他框架。")])]),v._v(" "),_("h3",{attrs:{id:"页面更新耗时-有后台数据"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#页面更新耗时-有后台数据"}},[v._v("#")]),v._v(" 页面更新耗时(有后台数据)")]),v._v(" "),_("p",[v._v("刷新页面后我们使用"),_("code",[v._v("新增不可用券(1000)")]),v._v("创建后台数据，观察该操作是否会触发setData并统计耗时")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("back add(1000)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("45.2")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("174.6")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("89.4")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("0")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("142.6")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("134")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("0")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("0")])])])]),v._v(" "),_("blockquote",[_("p",[v._v("mpx进行setData优化时inspired by vue，使用了编译时生成的渲染函数跟踪模板数据依赖，在后台数据变更时不会进行setData调用，而kbone和taro next采用了动态渲染技术模拟了web底层环境，在上层完整地运行了vue框架，也达到了同样的效果。")])]),v._v(" "),_("p",[v._v("然后我们执行和上面无后台数据时相同的操作进行耗时统计，首先是递增100：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("100")]),v._v(" "),_("th",[v._v("200")]),v._v(" "),_("th",[v._v("300")]),v._v(" "),_("th",[v._v("400")]),v._v(" "),_("th",[v._v("500")]),v._v(" "),_("th",[v._v("600")]),v._v(" "),_("th",[v._v("700")]),v._v(" "),_("th",[v._v("800")]),v._v(" "),_("th",[v._v("900")]),v._v(" "),_("th",[v._v("1000")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("88")]),v._v(" "),_("td",[v._v("69.8")]),v._v(" "),_("td",[v._v("71.2")]),v._v(" "),_("td",[v._v("80.8")]),v._v(" "),_("td",[v._v("79.4")]),v._v(" "),_("td",[v._v("84.4")]),v._v(" "),_("td",[v._v("89.8")]),v._v(" "),_("td",[v._v("93.2")]),v._v(" "),_("td",[v._v("99.6")]),v._v(" "),_("td",[v._v("108")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("121")]),v._v(" "),_("td",[v._v("173.4")]),v._v(" "),_("td",[v._v("213.6")]),v._v(" "),_("td",[v._v("250")]),v._v(" "),_("td",[v._v("298")]),v._v(" "),_("td",[v._v("345.6")]),v._v(" "),_("td",[v._v("383")]),v._v(" "),_("td",[v._v("434.8")]),v._v(" "),_("td",[v._v("476.8")]),v._v(" "),_("td",[v._v("535.6")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("135.4")]),v._v(" "),_("td",[v._v("112.4")]),v._v(" "),_("td",[v._v("110.6")]),v._v(" "),_("td",[v._v("106.4")]),v._v(" "),_("td",[v._v("109.6")]),v._v(" "),_("td",[v._v("107.2")]),v._v(" "),_("td",[v._v("114.4")]),v._v(" "),_("td",[v._v("116")]),v._v(" "),_("td",[v._v("118.8")]),v._v(" "),_("td",[v._v("117.4")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("112.6")]),v._v(" "),_("td",[v._v("86.2")]),v._v(" "),_("td",[v._v("84.6")]),v._v(" "),_("td",[v._v("86.8")]),v._v(" "),_("td",[v._v("90")]),v._v(" "),_("td",[v._v("87.2")]),v._v(" "),_("td",[v._v("91.2")]),v._v(" "),_("td",[v._v("88.8")]),v._v(" "),_("td",[v._v("92.4")]),v._v(" "),_("td",[v._v("93.4")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("178.4")]),v._v(" "),_("td",[v._v("178.2")]),v._v(" "),_("td",[v._v("186.4")]),v._v(" "),_("td",[v._v("184.6")]),v._v(" "),_("td",[v._v("192.6")]),v._v(" "),_("td",[v._v("203.8")]),v._v(" "),_("td",[v._v("210")]),v._v(" "),_("td",[v._v("217.6")]),v._v(" "),_("td",[v._v("232.6")]),v._v(" "),_("td",[v._v("236.8")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("139")]),v._v(" "),_("td",[v._v("151")]),v._v(" "),_("td",[v._v("173.4")]),v._v(" "),_("td",[v._v("194")]),v._v(" "),_("td",[v._v("231.4")]),v._v(" "),_("td",[v._v("258.8")]),v._v(" "),_("td",[v._v("303.4")]),v._v(" "),_("td",[v._v("340.4")]),v._v(" "),_("td",[v._v("384.6")]),v._v(" "),_("td",[v._v("429.4")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("559.8")]),v._v(" "),_("td",[v._v("746.6")]),v._v(" "),_("td",[v._v("980.6")]),v._v(" "),_("td",[v._v("1226.8")]),v._v(" "),_("td",[v._v("1450.6")]),v._v(" "),_("td",[v._v("1705.4")]),v._v(" "),_("td",[v._v("1927.2")]),v._v(" "),_("td",[v._v("2154.8")]),v._v(" "),_("td",[v._v("2367.8")]),v._v(" "),_("td",[v._v("2617")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("482.6")]),v._v(" "),_("td",[v._v("626.2")]),v._v(" "),_("td",[v._v("755")]),v._v(" "),_("td",[v._v("909.6")]),v._v(" "),_("td",[v._v("1085")]),v._v(" "),_("td",[v._v("1233.2")]),v._v(" "),_("td",[v._v("1384")]),v._v(" "),_("td",[v._v("1568.6")]),v._v(" "),_("td",[v._v("1740.6")]),v._v(" "),_("td",[v._v("1883.8")])])])]),v._v(" "),_("p",[v._v("然后按下表操作顺序逐项点击统计")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("delete(all)")]),v._v(" "),_("th",[v._v("add(1000)")]),v._v(" "),_("th",[v._v("update(1)")]),v._v(" "),_("th",[v._v("update(all)")]),v._v(" "),_("th",[v._v("delete(1)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("43.4")]),v._v(" "),_("td",[v._v("299.8")]),v._v(" "),_("td",[v._v("89.2")]),v._v(" "),_("td",[v._v("89")]),v._v(" "),_("td",[v._v("87.2")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("43.2")]),v._v(" "),_("td",[v._v("762.4")]),v._v(" "),_("td",[v._v("50")]),v._v(" "),_("td",[v._v("533")]),v._v(" "),_("td",[v._v("522.4")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("57.8")]),v._v(" "),_("td",[v._v("589.8")]),v._v(" "),_("td",[v._v("62.6")]),v._v(" "),_("td",[v._v("160.6")]),v._v(" "),_("td",[v._v("154.4")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("45.8")]),v._v(" "),_("td",[v._v("490.8")]),v._v(" "),_("td",[v._v("52.8")]),v._v(" "),_("td",[v._v("167")]),v._v(" "),_("td",[v._v("166")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("93.8")]),v._v(" "),_("td",[v._v("837")]),v._v(" "),_("td",[v._v("184.6")]),v._v(" "),_("td",[v._v("318")]),v._v(" "),_("td",[v._v("220.8")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("124.8")]),v._v(" "),_("td",[v._v("696.2")]),v._v(" "),_("td",[v._v("423.4")]),v._v(" "),_("td",[v._v("419")]),v._v(" "),_("td",[v._v("430.6")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("121.4")]),v._v(" "),_("td",[v._v("4978.2")]),v._v(" "),_("td",[v._v("2331.2")]),v._v(" "),_("td",[v._v("2448.4")]),v._v(" "),_("td",[v._v("2348")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("129.8")]),v._v(" "),_("td",[v._v("3947.2")]),v._v(" "),_("td",[v._v("1610.4")]),v._v(" "),_("td",[v._v("1813.8")]),v._v(" "),_("td",[v._v("2290.2")])])])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nnative > mpx > uniapp > chameleon > mpvue > wepy2 > taro next > kbone")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("具备模板数据跟踪能力的三个框架mpx，kbone和taro next在有后台数据场景下耗时并没有显著增加；")]),v._v(" "),_("li",[v._v("wepy2当中的diff精度不足，耗时也没有产生明显变化；")]),v._v(" "),_("li",[v._v("其余框架由于每次更新都会对后台数据进行deep diff，耗时都产生了一定提升。")])]),v._v(" "),_("h3",{attrs:{id:"页面更新耗时-大数据量场景"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#页面更新耗时-大数据量场景"}},[v._v("#")]),v._v(" 页面更新耗时(大数据量场景)")]),v._v(" "),_("blockquote",[_("p",[v._v("由于mpvue和taro next的渲染全部在页面中进行，而kbone的渲染方案会额外新增大量的自定义组件，这三个框架都会在优惠券数量达到2000时崩溃白屏，我们排除了这三个框架对其余框架进行大数据量场景下的页面更新耗时测试")])]),v._v(" "),_("p",[v._v("首先还是在无后台数据场景下使用"),_("code",[v._v("新增可用券(1000)")]),v._v("将可用券数量递增至5000：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("1000")]),v._v(" "),_("th",[v._v("2000")]),v._v(" "),_("th",[v._v("3000")]),v._v(" "),_("th",[v._v("4000")]),v._v(" "),_("th",[v._v("5000")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("332.6")]),v._v(" "),_("td",[v._v("350")]),v._v(" "),_("td",[v._v("412.6")]),v._v(" "),_("td",[v._v("498.2")]),v._v(" "),_("td",[v._v("569.4")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("970.2")]),v._v(" "),_("td",[v._v("1531.4")]),v._v(" "),_("td",[v._v("2015.2")]),v._v(" "),_("td",[v._v("2890.6")]),v._v(" "),_("td",[v._v("3364.2")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("655.2")]),v._v(" "),_("td",[v._v("593.4")]),v._v(" "),_("td",[v._v("655")]),v._v(" "),_("td",[v._v("675.6")]),v._v(" "),_("td",[v._v("718.8")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("532.2")]),v._v(" "),_("td",[v._v("496")]),v._v(" "),_("td",[v._v("548.6")]),v._v(" "),_("td",[v._v("564")]),v._v(" "),_("td",[v._v("601.8")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("805.4")]),v._v(" "),_("td",[v._v("839.6")]),v._v(" "),_("td",[v._v("952.8")]),v._v(" "),_("td",[v._v("1086.6")]),v._v(" "),_("td",[v._v("1291.8")])])])]),v._v(" "),_("p",[v._v("然后点击"),_("code",[v._v("新增不可用券(5000)")]),v._v("将后台数据量增加至5000，再测试可用券数量递增至5000的耗时：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("back add(5000)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("117.4")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("511.6")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("285")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("0")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("824")])])])]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("1000")]),v._v(" "),_("th",[v._v("2000")]),v._v(" "),_("th",[v._v("3000")]),v._v(" "),_("th",[v._v("4000")]),v._v(" "),_("th",[v._v("5000")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("349.8")]),v._v(" "),_("td",[v._v("348.4")]),v._v(" "),_("td",[v._v("430.4")]),v._v(" "),_("td",[v._v("497")]),v._v(" "),_("td",[v._v("594.8")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("1128")]),v._v(" "),_("td",[v._v("1872")]),v._v(" "),_("td",[v._v("2470.4")]),v._v(" "),_("td",[v._v("3263.4")]),v._v(" "),_("td",[v._v("4075.8")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("715")]),v._v(" "),_("td",[v._v("666.8")]),v._v(" "),_("td",[v._v("709.2")]),v._v(" "),_("td",[v._v("755.6")]),v._v(" "),_("td",[v._v("810.2")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("538.8")]),v._v(" "),_("td",[v._v("501.8")]),v._v(" "),_("td",[v._v("562.6")]),v._v(" "),_("td",[v._v("573.6")]),v._v(" "),_("td",[v._v("595.2")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("1509.2")]),v._v(" "),_("td",[v._v("1672.4")]),v._v(" "),_("td",[v._v("1951.8")]),v._v(" "),_("td",[v._v("2232.4")]),v._v(" "),_("td",[v._v("2586.2")])])])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nnative > mpx > uniapp > chameleon > wepy2")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("在大数据量场景下，框架之间基础性能的差异会变得更加明显，mpx和uniapp依然保持了接近原生的良好性能表现，而chameleon和wepy2则产生了比较显著的性能劣化。")])]),v._v(" "),_("h3",{attrs:{id:"局部更新耗时"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#局部更新耗时"}},[v._v("#")]),v._v(" 局部更新耗时")]),v._v(" "),_("p",[v._v("我们在可用券数量为1000的情况下，点击任意一张可用券触发选中状态，以测试局部更新性能")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("toggleSelect(ms)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("2")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("2.6")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("2.8")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("2.2")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("2")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("289.6")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("2440.8")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("1975")])])])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nnative ≈ chameleon ≈ mpx ≈ wepy2 ≈ uniapp > mpvue > taro next > kbone")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("可以看出所有使用了原生自定义组件进行组件化实现的框架局部更新耗时都极低，这足以证明小程序原生自定义组件的优秀性和重要性；")]),v._v(" "),_("li",[v._v("mpvue由于使用了页面更新，局部更新耗时显著增加；")]),v._v(" "),_("li",[v._v("kbone和taro next由于递归动态渲染的性能开销巨大，导致局部更新耗时同样巨大。")])]),v._v(" "),_("h3",{attrs:{id:"setdata调用"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#setdata调用"}},[v._v("#")]),v._v(" setData调用")]),v._v(" "),_("p",[v._v("我们将"),_("code",[v._v("proxySetData")]),v._v("的count和size选项设置为true，开启setData的次数和体积统计，重新构建后按照以下流程执行系列操作，并统计setData的调用次数和发送数据的体积。")]),v._v(" "),_("p",[v._v("操作流程如下：")]),v._v(" "),_("ol",[_("li",[v._v("100逐级递增可用券(0->500)")]),v._v(" "),_("li",[v._v("切换至不可用券")]),v._v(" "),_("li",[v._v("新增不可用券(1000)")]),v._v(" "),_("li",[v._v("100逐级递增可用券(500->1000)")]),v._v(" "),_("li",[v._v("更新可用券(all)")]),v._v(" "),_("li",[v._v("切换至可用券")])]),v._v(" "),_("p",[v._v("操作完成后我们使用"),_("code",[v._v("getCount")]),v._v("和"),_("code",[v._v("getSize")]),v._v("方法获取累积的setData调用次数和数据体积，其中数据体积计算方式为JSON.stringify后按照utf-8编码方式进行体积计算，统计结果为：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("count")]),v._v(" "),_("th",[v._v("size(KB)")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("14")]),v._v(" "),_("td",[v._v("803")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("3514")]),v._v(" "),_("td",[v._v("1124")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("16")]),v._v(" "),_("td",[v._v("2127")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("14")]),v._v(" "),_("td",[v._v("274")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("8")]),v._v(" "),_("td",[v._v("261")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("2515")]),v._v(" "),_("td",[v._v("319")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("22")]),v._v(" "),_("td",[v._v("10572")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("9")]),v._v(" "),_("td",[v._v("2321")])])])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nmpx > uniapp > native > chameleon > wepy2 > taro next > mpvue > kbone")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("mpx框架成功实现了理论上setData的最优；")]),v._v(" "),_("li",[v._v("uniapp由于缺失模板追踪能力紧随其后；")]),v._v(" "),_("li",[v._v("chameleon由于组件每次创建时都会进行一次不必要的setData，产生了大量无效setData调用，但是数据的发送本身经过diff，在数据发送量上表现不错；")]),v._v(" "),_("li",[v._v("wepy2的组件会在数据更新时调用setData发送已经更新过的props数据，因此也产生了大量无效调用，且diff精度不足，发送的数据量也较大；")]),v._v(" "),_("li",[v._v("taro next由于上层完全基于vue，在数据发送次数上控制到了9次，但由于需要发送大量的dom描述信息，数据发送量较大；")]),v._v(" "),_("li",[v._v("mpvue由于使用较长的数据路径描述数据对应的组件，也产生了较大的数据发送量；")]),v._v(" "),_("li",[v._v("kbone对于setData的调用控制得不是很好，在上层运行vue的情况依然进行了22次数据发送，且发送的数据量巨大，在此流程中达到了惊人的10MB。")])]),v._v(" "),_("h3",{attrs:{id:"页面渲染耗时-静态测试"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#页面渲染耗时-静态测试"}},[v._v("#")]),v._v(" 页面渲染耗时(静态测试)")]),v._v(" "),_("p",[v._v("此处的页面渲染耗时与前面描述的动态测试场景中相同，测试结果如下：")]),v._v(" "),_("table",[_("thead",[_("tr",[_("th"),v._v(" "),_("th",[v._v("页面渲染耗时")])])]),v._v(" "),_("tbody",[_("tr",[_("td",[v._v("native")]),v._v(" "),_("td",[v._v("70.4")])]),v._v(" "),_("tr",[_("td",[v._v("wepy2")]),v._v(" "),_("td",[v._v("86.6")])]),v._v(" "),_("tr",[_("td",[v._v("mpvue")]),v._v(" "),_("td",[v._v("115.2")])]),v._v(" "),_("tr",[_("td",[v._v("uniapp")]),v._v(" "),_("td",[v._v("69.6")])]),v._v(" "),_("tr",[_("td",[v._v("mpx")]),v._v(" "),_("td",[v._v("66.6")])]),v._v(" "),_("tr",[_("td",[v._v("chameleon")]),v._v(" "),_("td",[v._v("65")])]),v._v(" "),_("tr",[_("td",[v._v("kbone")]),v._v(" "),_("td",[v._v("144.2")])]),v._v(" "),_("tr",[_("td",[v._v("taro next")]),v._v(" "),_("td",[v._v("119.8")])])])]),v._v(" "),_("p",[v._v("该项测试的结论为："),_("br"),v._v("\nchameleon ≈ mpx ≈ uniapp ≈ native > wepy2 > mpvue ≈ taro next > kbone")]),v._v(" "),_("p",[v._v("结论分析：")]),v._v(" "),_("ul",[_("li",[v._v("除了kbone和taro next采用动态渲染耗时增加，mpvue使用页面模板渲染性能稍差，其余框架的静态页面渲染表现都和原生差不多。")])]),v._v(" "),_("h2",{attrs:{id:"结论"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#结论"}},[v._v("#")]),v._v(" 结论")]),v._v(" "),_("p",[v._v("综合上述测试数据，我们得到最终的小程序框架运行时性能排名为："),_("br"),v._v("\nmpx > uniapp > chameleon > wepy2 > mpvue > taro next > kbone")]),v._v(" "),_("h2",{attrs:{id:"一点私货"}},[_("a",{staticClass:"header-anchor",attrs:{href:"#一点私货"}},[v._v("#")]),v._v(" 一点私货")]),v._v(" "),_("p",[v._v("虽然kbone和taro next采用了动态渲染技术在性能表现上并不尽如人意，但是我依然认为这是很棒的技术方案。虽然本文从头到位都在进行性能测试和对比，但性能并不是框架的全部，开发效率和高可用性仍然是框架的重心，开发效率相信是所有框架设计的初衷，但是高可用性却在很大程度被忽视。从这个角度来说，kbone和taro next是非常成功的，不同于过去的转译思路，这种从抹平底层渲染环境的做法能够使上层web框架完整运行，在框架可用性上带来非常大的提升，非常适合于运营类简单小程序的迁移和开发。")]),v._v(" "),_("p",[v._v("我主导开发的mpx框架(https://github.com/didi/mpx) 选择了另一条道路解决可用性问题，那就是基于小程序原生语法能力进行增强，这样既能避免转译web框架时带来的不确定性和不稳定性，同时也能带来非常接近于原生的性能表现，对于复杂业务小程序的开发者来说，非常推荐使用。在跨端输出方面，mpx目前能够完善支持业内全部小程序平台和web平台的同构输出，滴滴内部最重要最复杂的小程序——滴滴出行小程序完全基于mpx进行开发，并利用框架提供的跨端能力对微信和支付宝入口进行同步业务迭代，大大提升了业务开发效率。")])])}),[],!1,null,null,null);_.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/6.6ea91b28.js b/docs-vuepress/.vuepress/dist/assets/js/6.6ea91b28.js
deleted file mode 100644
index 53453cb701..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/6.6ea91b28.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[6,25],{292:function(t,s,e){},302:function(t,s,e){"use strict";e(292)},303:function(t,s,e){"use strict";e.r(s);var a={props:{code:{type:String,default:""},title:{type:String,default:""}},data:()=>({isShow:!1,isClick:!1}),methods:{handleEnter(){this.isShow=!0},handleLeave(){this.isShow=!1},handleToggle(){this.isClick=!this.isClick,this.isShow=this.isClick}}},i=(e(302),e(4)),o=Object(i.a)(a,(function(){var t=this,s=t._self._c;return s("div",{staticClass:"popover"},[s("div",{staticClass:"popover__content",on:{click:t.handleToggle,mouseenter:t.handleEnter,mouseleave:t.handleLeave}},[t._t("default")],2),t._v(" "),s("div",{directives:[{name:"show",rawName:"v-show",value:t.isShow,expression:"isShow"}],staticClass:"popover__top"},[s("div",{staticClass:"popover__content"},[s("div",{staticClass:"popover__inner"},[t.code?s("img",{attrs:{width:"300",src:t.code,alt:"code",loading:"lazy"}}):t._e(),t._v(" "),t.title?s("div",[t._v(t._s(t.title))]):t._e()]),t._v(" "),s("div",{staticClass:"popover__arrow"})])])])}),[],!1,null,"8bac5638",null);s.default=o.exports},320:function(t,s,e){},336:function(t,s,e){"use strict";e(320)},355:function(t,s,e){"use strict";e.r(s);var a={data:()=>({smallMode:!1}),components:{Popover:e(303).default},mounted(){const t=()=>{document.documentElement.clientWidth<719?this.smallMode=!0:this.smallMode=!1};t(),window.addEventListener("resize",t,!1)}},i=(e(336),e(4)),o=Object(i.a)(a,(function(){var t=this,s=t._self._c;return s("div",{staticClass:"footer-container"},[s("footer",{staticClass:"footer"},[s("ul",{staticClass:"footer__list"},[t.smallMode?t._e():s("li",{staticClass:"grow"},[s("img",{attrs:{width:"180",src:"https://dpubstatic.udache.com/static/dpubimg/T1R-u2N8nn/footer_logo.png",alt:"logo"}})]),t._v(" "),s("li",{staticClass:"grow"},[s("ul",{staticClass:"footer-inner"},[s("li",{staticClass:"footer__wrap"},[s("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.resourcesList.title))])]),t._v(" "),t._l(t.$page.frontmatter.resourcesList.details,(function(e,a){return s("li",{key:a,staticClass:"footer__wrap"},[s("a",{staticClass:"footer__text",attrs:{href:e.actionLink,target:"_blank"}},[t._v(t._s(e.title))])])}))],2)]),t._v(" "),s("li",{staticClass:"grow"},[s("ul",{staticClass:"footer-inner"},[s("li",{staticClass:"footer__wrap"},[s("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.communityList.title))])]),t._v(" "),t._l(t.$page.frontmatter.communityList.details,(function(e,a){return s("li",{key:a,staticClass:"footer__wrap"},[e.img?s("popover",{attrs:{code:e.img}},[s("span",{staticClass:"footer__text",attrs:{target:"_blank"}},[t._v(t._s(e.title))])]):s("a",{staticClass:"footer__text",attrs:{href:e.img||e.actionLink,target:"_blank"}},[t._v(t._s(e.title))])],1)}))],2)]),t._v(" "),s("li",{staticClass:"grow"},[s("ul",{staticClass:"footer-inner"},[s("li",{staticClass:"footer__wrap"},[s("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.helpList.title))])]),t._v(" "),t._l(t.$page.frontmatter.helpList.details,(function(e,a){return s("li",{key:a,staticClass:"footer__wrap"},[s("a",{staticClass:"footer__text",attrs:{href:e.actionLink,target:"_blank"}},[t._v(t._s(e.title))])])}))],2)]),t._v(" "),s("li",{staticClass:"grow"},[s("ul",{staticClass:"footer-inner"},[s("li",{staticClass:"footer__wrap"},[s("span",{staticClass:"footer__text footer__title"},[t._v(t._s(t.$page.frontmatter.moreList.title))])]),t._v(" "),t._l(t.$page.frontmatter.moreList.details,(function(e,a){return s("li",{key:a,staticClass:"footer__wrap"},[s("a",{staticClass:"footer__text",attrs:{href:e.actionLink,target:"_blank"}},[t._v(t._s(e.title))])])}))],2)])])]),t._v(" "),t._m(0)])}),[function(){var t=this._self._c;return t("div",{staticClass:"copyright"},[t("div",[this._v("备案号："),t("a",{attrs:{href:"https://beian.miit.gov.cn/"}},[this._v("蜀ICP备15023364号-2")])]),this._v(" "),t("div",[this._v("Copyright 2020 滴滴出行")])])}],!1,null,"f9ca297c",null);s.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/60.a47e5279.js b/docs-vuepress/.vuepress/dist/assets/js/60.a47e5279.js
deleted file mode 100644
index 57fcdffec7..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/60.a47e5279.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{408:function(_,v,t){"use strict";t.r(v);var a=t(4),p=Object(a.a)({},(function(){var _=this,v=_._self._c;return v("ContentSlotsDistributor",{attrs:{"slot-key":_.$parent.slotKey}},[v("h1",{attrs:{id:"滴滴出行小程序体积优化实践"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#滴滴出行小程序体积优化实践"}},[_._v("#")]),_._v(" 滴滴出行小程序体积优化实践")]),_._v(" "),v("blockquote",[v("p",[_._v("作者："),v("a",{attrs:{href:"http://github.com/sky-admin",target:"_blank",rel:"noopener noreferrer"}},[_._v("sky-admin"),v("OutboundLink")],1)])]),_._v(" "),v("h2",{attrs:{id:"概述"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#概述"}},[_._v("#")]),_._v(" 概述")]),_._v(" "),v("p",[_._v("2019年下半年，为了将微信钱包/支付宝九宫格入口的滴滴出行迁移为小程序，团队对小程序进行了大量的功能升级与补全。在整个过程中也遇到并克服了一系列问题和挑战，其中包体积问题尤为突出。接下来全面介绍一下滴滴出行小程序在体积控制方面做的努力与沉淀。")]),_._v(" "),v("h2",{attrs:{id:"背景"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#背景"}},[_._v("#")]),_._v(" 背景")]),_._v(" "),v("p",[_._v("微信对小程序包体积的要求是总体积不得超过12M，主包及单个分包体积不得超过2M。支付宝对于小程序包体积的计算方式虽和微信略有区别，不过整体也大同小异。")]),_._v(" "),v("p",[_._v("18年至19年初时，滴滴出行小程序里承载的业务只有网约车，且业务需求较少，在主包内都能够搞定。而在下半年时，为了将微信钱包/支付宝九宫格入口迁移至小程序，小程序开始新增诸如公交/代驾/车服/单车/顺风车等众多业务线，同时网约车的业务需求也要做全面的补齐，业务量和代码量一起爆炸式增长。")]),_._v(" "),v("p",[_._v("滴滴出行包含了丰富多样的出行业务，包含了快车/专车/出租车/豪华车/拼车/单车/代驾/顺风车/公交/车生活等众多业务线。整个滴滴出行小程序的最重要，使用最高频的页面是首页与订单详情页，首页中承载了各个业务线的需求表达，各个业务线的订单详情页则承载了具体的出行订单展示逻辑。此外还有各种功能页面比如个人中心，营销页面，设置，历史行程。")]),_._v(" "),v("p",[_._v("按照滴滴出行的产品逻辑，所有业务线的需求表达逻辑都在首页承载，为了良好的切换体验，在首页采用了单页顶导的方案进行业务线展示。即每个业务线在首页中提供一个需求表达组件，当用户切换顶导业务线后，切换出对应的业务线组件。")]),_._v(" "),v("p",[_._v("在这种设计下，所有的业务线的需求表达逻辑都集中在首页这个单一页面中，导致在业务迭代过程中，承载首页的主包体积迅速增长，很快触碰了小程序平台的单包2M上限，对后续的业务迭代与发展带来巨大阻碍。因此，对于包体积的控制是我们在小程序开发过程中面临的一大难题。")]),_._v(" "),v("h2",{attrs:{id:"体积控制"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#体积控制"}},[_._v("#")]),_._v(" 体积控制")]),_._v(" "),v("p",[_._v("下面我们将介绍滴滴出行小程序开发迭代过程中，我们对于小程序包体积进行的一系列优化控制实践。")]),_._v(" "),v("h3",{attrs:{id:"基础优化手段"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#基础优化手段"}},[_._v("#")]),_._v(" 基础优化手段")]),_._v(" "),v("p",[_._v("对于小程序来说，基础的包体积优化手段包括：资源压缩/去除代码冗余/资源CDN化/异步加载")]),_._v(" "),v("p",[_._v("在web开发中，webpack提供了大量的代码优化能力，包括依赖分析、模块去重、代码压缩、tree shaking、side effects等，这些能力可以方便地完成资源压缩和去除代码冗余的工作。滴滴出行小程序基于滴滴开源的小程序框架Mpx( https://github.com/didi/mpx )进行开发，Mpx框架的编译构建完全基于webpack，兼容webpack内部生态，天然可以使用上述能力对包体积进行优化。")]),_._v(" "),v("p",[_._v("小程序中支持部分静态资源（如图像视频等）使用CDN地址加载，我们会尽可能将相关的资源压缩后放到CDN上，避免这部分资源对包体积的占用。")]),_._v(" "),v("p",[_._v("小程序场景下无法像web当中通过script标签便捷地进行异步加载，但是小程序平台后期纷纷支持了分包加载的方案来实现该能力，由于分包加载是小程序特有的技术规范，webpack无法直接支持，因此Mpx框架专门针对该技术规范进行了良好的适配支持，关于该能力的应用我们会在后文详细阐述。")]),_._v(" "),v("p",[_._v("除此之外，Mpx框架还针对小程序场景进行了许多包体积优化的适配工作，如尽可能减少框架运行时包体积占用（压缩后占用56Kb），对引用到的页面/组件按需进行打包构建，声明公共样式进行样式复用，分包内公共模块抽取等。")]),_._v(" "),v("p",[_._v("在Mpx框架的这些能力的支持下，基本不需要额外配置就能构建出一个经过初步优化的小程序包。")]),_._v(" "),v("blockquote",[v("p",[_._v('微信开发者工具选项里也有类似的"上传代码时自动压缩混淆"可勾选，但在开发者工具中上传代码时计算体积是直接计算的当前项目代码的体积，并不会依据压缩后的体积。因此，如果你使用原生小程序进行开发，你的source代码极有可能进行进一步的压缩以节省空间。')])]),_._v(" "),v("h3",{attrs:{id:"分析体积"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#分析体积"}},[_._v("#")]),_._v(" 分析体积")]),_._v(" "),v("p",[_._v("虽然框架已经提供了很多在体积控制方面的优化，但是随着业务迭代我们发现主包体积依然偏大。")]),_._v(" "),v("p",[_._v("在遇到主包体积偏大后，我们需要弄明白，主包里有哪些东西？它们为什么这么大？")]),_._v(" "),v("p",[_._v("使用原生小程序或者其他非基于webpack的框架进行开发的同学遇到这个问题后，可能只能去看硬盘上的文件大小。这样一来，各个模块的大小占比可能并不直观。而我们则可以借助 webpack-bundle-analyzer 这样一个webpack插件去做辅助分析。")]),_._v(" "),v("p",[_._v("比如这是一个使用Mpx框架编写的demo，通过 "),v("code",[_._v("npm run build --report")]),_._v(" 就可以看到这样一个界面：")]),_._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/3e488293-959e-4617-8187-69fdb532e9ab.jpg",alt:"体积分析图"}})]),_._v(" "),v("p",[_._v("可以看到这个demo工程由 moment / lodash / socket-weapp / core-js 等第三方库组成。各个库的大小，相互依赖关系也能清晰地看出。")]),_._v(" "),v("p",[_._v("对于滴滴出行小程序也是能看到类似的图，能看到整个项目到底是由哪些代码组成。")]),_._v(" "),v("p",[_._v("另外，滴滴出行前端开发一直是采用“源码编译”的，可以让整个项目里公共的依赖可以实现仅有一份，一起共用。简而言之，也有助于减少项目代码体积。"),v("a",{attrs:{href:"https://github.com/DDFE/DDFE-blog/issues/23",target:"_blank",rel:"noopener noreferrer"}},[_._v("相关资料：https://github.com/DDFE/DDFE-blog/issues/23 "),v("OutboundLink")],1)]),_._v(" "),v("p",[_._v("要完美发挥源码编译的效果，需要上下游一起建立整套源码编译生态，比如主项目的依赖方在声明公用依赖时，就应该用peerDep或者devDep来声明一些公有依赖，这些共有依赖应该在主项目中统一声明，避免因版本不同装出两份公共依赖，那样反而会增大体积。由于滴滴出行小程序涉及业务线及团队众多，部分团队可能并不知道这个事情，因此代码里实际是可能出现上述劣化场景。而依照分析图，可以容易地发现这种问题，并推动相关团队清除这些重复依赖。")]),_._v(" "),v("p",[_._v("同时，我们依照体积分析图，对其中体积较大的文件重点分析，进行了一轮业务代码梳理和精简，删除了一些无用代码，精简了websocket的消息体描述文件等。")]),_._v(" "),v("h3",{attrs:{id:"配置分包"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#配置分包"}},[_._v("#")]),_._v(" 配置分包")]),_._v(" "),v("p",[_._v("分包是小程序给出的类似web异步引入的一个方案，把一些初始进入时不需要的页面可以放进分包里，跳转到对应页面时才去下载分包，将这些页面及其附属资源放到分包里可以有效减少主包体积。")]),_._v(" "),v("p",[_._v("Mpx框架早期对分包规范进行了初步支持，资源访问规则保持和微信一致，主要根据资源存放的目录判断应该输出到主包还是分包。有这个能力后，我们把行程页抽到了分包，大概抽出了200多K左右的空间。")]),_._v(" "),v("p",[_._v("有了行程页的成功拆分后，我们开始对所有的非首页代码进行分包操作，比如起终点选择和个人中心。以及部分业务线的接入是通过npm的方式接入，我们也尽可能将这些业务线的所有非首页的代码放到了分包。")]),_._v(" "),v("p",[_._v("这里还有个题外话，得益于mpx早期设计了packages形式的业务组合方案，可以很方便地让业务独立开发，又能及其方便地整合。而后发现微信的分包的json配置设计和packages很像，就在这个基础上支持了微信的分包，用户侧仅需在原来的packages基础上加一个query标记这个分包的名字即可。")]),_._v(" "),v("p",[_._v("拆除各个分包后，整个项目结构大概如图：")]),_._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/0562f94d-3929-42b8-a389-854e14983373.png",alt:"分包一期结构图"}})]),_._v(" "),v("p",[_._v("初阶的分包工作进行完毕后，总计从主包里拆了差不多400K的空间到分包里。")]),_._v(" "),v("h3",{attrs:{id:"分包资源精细化管理"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#分包资源精细化管理"}},[_._v("#")]),_._v(" 分包资源精细化管理")]),_._v(" "),v("p",[_._v("上面提到，Mpx框架初期的分包处理规则是完全按照微信的方式，把在分包路径下的资源收集到分包里。而npm管理的资源因为都在node_modules目录下，不属于任何分包路径，则会被全部收集进主包。")]),_._v(" "),v("p",[_._v("比如之前我们有行程页分包，行程页自有的状态管理store整个都在行程页分包的路径下，就会被收集到行程页分包中。而行程页还用到了封装好的didi-socket库，这个库是公共的npm包，即使它只在行程页分包里被使用，但由于它本身路径是在node_modules下的，那么就会将其收集进主包里。")]),_._v(" "),v("p",[_._v("因为早期的一些设计，行程页的资源和首页是分割开的，都比较独立地存在于各自的路径下，一期的分包处理的大头也主要是行程页，它刚好契合了Mpx初期对分包处理上的特点，因此能较好地收集进行程页分包里。")]),_._v(" "),v("p",[_._v("随着业务迭代，后续大量业务线的接入都是通过npm进行的，就会有大量npm包资源，他们都在node_modules目录下，因此全部会被收集进主包。")]),_._v(" "),v("p",[_._v("所以Mpx框架进行了一系列改造：")]),_._v(" "),v("ol",[v("li",[_._v("在构建的依赖收集过程中，我们会对收集到的依赖打上标记，记录它是被哪些分包引入的。一旦它只有一个分包引入，它就会被输出到这个分包中。")]),_._v(" "),v("li",[_._v("我们会根据用户定义的分包配置，自动在 SplitChunksPlugin 中生成各个分包的 cacheGroups ，把分包中的复用模块抽取到分包下的bundle中。")]),_._v(" "),v("li",[_._v("对于组件和静态资源，如果他们被多个分包所引用且未在主包中引用，为了确保主包体积最优，这些资源将产生多份副本分别输出到对应分包中，而不会占用主包体积。")])]),_._v(" "),v("p",[_._v("这样一来，"),v("em",[v("strong",[_._v("不管分包中引用的资源原本在什么位置，最终输出时都会尽可能将其输出到dist的分包目录下，避免占用主包空间")])]),_._v("。")]),_._v(" "),v("p",[_._v("这个改动完成后项目结构看似和之前一样，但得益于Mpx处理分包资源能力的升级，我们得以将业务线分包中引用的npm资源成功输出到其所在的分包目录下。")]),_._v(" "),v("h3",{attrs:{id:"封面方案"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#封面方案"}},[_._v("#")]),_._v(" 封面方案")]),_._v(" "),v("p",[_._v("再后来滴滴出行小程序需要替换微信/支付宝里原有的WebApp入口，小程序接入的业务线迅速增加，包体积迅速增长。")]),_._v(" "),v("p",[_._v("这个部分体积增长的主要原因前面提到过，所有的业务线都要接入到主页来展示。这也是由于业务特点决定的，滴滴出行提供了丰富的出行产品线，包括快车/专车/出租车/豪华车/拼车/单车/代驾/顺风行车等产品，用户是可能需要反复切换挑选的。这个过程还要保留起终点车型之类的信息，必须是一个页面内切换组件加一整套非常复杂的大型状态管理才能比较流畅顺滑地实现。而不能像一些电商/信息平台，将不同的功能拆分到不同页面，让用户通过首页的菜单进入子页面再进行操作，首页只承载入口，只有较少的业务逻辑，分包处理起来就会容易很多。")]),_._v(" "),v("p",[_._v("因此各个业务线都要提供首页组件进行接入。这个组件会在首页被用到，所以无论如何也拆不到分包里。最终，整个首页主包部分的体积可以分成两个部分：基础库和业务代码。两者的体积占比大概是公共依赖基础库占1M左右，业务代码占1M左右。")]),_._v(" "),v("p",[_._v("这么庞大的基础库体积主要是由于滴滴出行的业务线及业务团队众多，各方均有一些自己的基础依赖。比如网约车依赖的长链接通信pb数据描述文件，地图会依的大数计算库，顺风车依赖的CML框架运行时、代驾依赖的通信网关库，以及公用的组件库和polyfill等。")]),_._v(" "),v("p",[_._v("所以滴滴出行小程序面对的问题在当时已经无法用纯技术方案在短期内快速解决问题了，于是我们做了一个工程架构调整，可以叫封面页方案，解决了主包问题。")]),_._v(" "),v("p",[_._v("封面方案简单讲，就是做一个带滴滴出行Logo的封面作为启动页面，而页面一旦加载，立刻跳转另一个页面，这个页面真正承载业务，且它被放在分包里。")]),_._v(" "),v("p",[_._v("这个操作的意义在于，主包里就只剩下了所有方都要依赖的基础框架/库等，而业务全被抽离到了分包里。")]),_._v(" "),v("p",[v("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/0f0ed782-8f67-4601-bc83-a8a343e1050b.png",alt:"封面方案结构图"}})]),_._v(" "),v("p",[_._v("这是封面方案完成后项目的结构图，之前很大块的首页业务逻辑被抽出到首页分包中了。")]),_._v(" "),v("p",[_._v("这样一个挪移的操作的结果是我们可以有2M的主包空间来乘放基础的公共的库，有一个2M左右的分包来乘放前面提到的滴滴出行的集成了各种业务的“大主页”。而当时拆下来差不多有1.2M的主包，800K+的业务主分包。")]),_._v(" "),v("p",[_._v("这个改造最优秀的一点在于，后续的业务迭代产生的体积增长几乎全是在业务主分包里，剩下的1.1M+空间留给业务迭代还是比较充裕的。而主包的体积在理想条件下是可以长久保持不变的，就不会因为业务需求的不断开发反复导致主包体积临近超标，不再需要为主包体积感到焦虑。")]),_._v(" "),v("p",[_._v("当然，可以看到，这个方案本身是没有消减任何体积的，只是把位置变换了一下。除此之外，这个封面页方案其实也存在一些缺陷，比如首屏业务的展示会变慢，因为要加载的内容会变多，不过小程序本身有较好的缓存资源的能力，因此还算可以接受。")]),_._v(" "),v("p",[_._v("相比于因体积问题卡住需求迭代以及产品线的接入，目前这个方案至少能解决有无问题。我们开发团队后续也会持续跟进关注体积问题，看是否会有产品方案变更或者小程序本身给出一些解决方案来进一步优化这个部分。")]),_._v(" "),v("h2",{attrs:{id:"总结"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#总结"}},[_._v("#")]),_._v(" 总结")]),_._v(" "),v("p",[_._v("Mpx框架在包体积控制上做了大量工作，对于npm场景下的小程序分包进行了非常完善的支持。")]),_._v(" "),v("p",[_._v("滴滴出行小程序团队在框架支持的基础上，通过梳理业务依赖，充分利用分包，调整交互方案等一系列手段，在不阻碍业务发展的前提下，将庞大复杂的滴滴出行小程序包体积控制在平台限制范围内。")]),_._v(" "),v("p",[_._v("希望本文能给在包体积上遇到问题的小程序开发者们带来一些启发，欢迎留言交流。")])])}),[],!1,null,null,null);v.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/61.74ebd7d9.js b/docs-vuepress/.vuepress/dist/assets/js/61.74ebd7d9.js
deleted file mode 100644
index 658e6b2d5f..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/61.74ebd7d9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{409:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"使用typescript新特性template-literal-types完善链式key的类型推导"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用typescript新特性template-literal-types完善链式key的类型推导"}},[t._v("#")]),t._v(" 使用Typescript新特性Template Literal Types完善链式key的类型推导")]),t._v(" "),s("blockquote",[s("p",[t._v("作者："),s("a",{attrs:{href:"https://github.com/anotherso1a",target:"_blank",rel:"noopener noreferrer"}},[t._v("anotherso1a"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"前言"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#前言"}},[t._v("#")]),t._v(" 前言")]),t._v(" "),s("p",[t._v("在"),s("strong",[t._v("Mpx框架")]),t._v("中我们采用了类似 "),s("code",[t._v("Vuex")]),t._v(" 的数据仓库设计，这使得小程序的数据也可以在框架中得到"),s("strong",[t._v("统一的管理")]),t._v("。但由于设计上的原因，这一部分在TS推导的实现上变得异常艰难，其中有一个明显的问题就是"),s("strong",[t._v("链式key")]),t._v("的推导：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 一段 mpx-store 代码实例")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// other options ...")]),t._v("\n  actions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("someAction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 下面这一个dispatch语句如何得到正确的推导？result的类型如何获取？")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'deeperActions.anotherAction'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  deps"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    deeperActions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      actions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("anotherAction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do something")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'result'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" payload\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// other deps ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("我们该如何获取 "),s("code",[t._v("this.dispatch('deeperActions.anotherAction', 1)")]),t._v(" 的返回值？如何针对dispatch后续的参数类型做限制？这几乎是不可能解决的问题。")]),t._v(" "),s("p",[t._v("好消息是，在 2020.09.19，typescript团队release了一个"),s("a",{attrs:{href:"https://github.com/microsoft/TypeScript/releases/tag/v4.1-beta",target:"_blank",rel:"noopener noreferrer"}},[t._v("beta版本"),s("OutboundLink")],1),t._v("。这个版本新推出了一个特性："),s("strong",[t._v("模板字符串类型（Template Literal Types）")]),t._v("。")]),t._v(" "),s("p",[t._v("这让"),s("strong",[t._v("链式key")]),t._v("的推导出现了曙光，不久后，我们开始尝试完善 "),s("code",[t._v("mpx-store")]),t._v(" 的推导，此篇文章也是基于我们实践中所做的一些工作总结而来。")]),t._v(" "),s("h2",{attrs:{id:"特性"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#特性"}},[t._v("#")]),t._v(" 特性")]),t._v(" "),s("p",[t._v("这里可以直接看"),s("a",{attrs:{href:"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("官网"),s("OutboundLink")],1),t._v("例子，可以十分直观的感受到其特性：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"red"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"blue"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Quantity")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"one"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"two"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("SeussFish")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("Quantity "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" Color"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(" fish")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('//   ^ = type SeussFish = "one fish" | "two fish" | "red fish" | "blue fish"')]),t._v("\n")])])]),s("p",[t._v("根据例子得知：模板字符串的使用方式几乎和ES6的字符串模板一致，可以做字符串的拼接，当接收字面量联合类型时，会做matrix操作，返回所有可能的拼接后的字面量联合类型。")]),t._v(" "),s("p",[t._v("另一个例子：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'b'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("C")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'D'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("C")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// type D = "1aC" | "1aD" | "1bC" | "1bD" | "2aC" | "2aD" | "2bC" | "2bD"')]),t._v("\n")])])]),s("h2",{attrs:{id:"可以用来做什么"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#可以用来做什么"}},[t._v("#")]),t._v(" 可以用来做什么")]),t._v(" "),s("p",[t._v("这个新特性的出现使得在js中常用的链式key取值，调用等，都能够使用ts进行完整的推导。")]),t._v(" "),s("p",[s("strong",[t._v("第一个问题：")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  prop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" prop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" paths "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" prop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("split")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" current "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" j "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" paths"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" j"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" paths"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("current"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" j "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" current"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("break")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    current "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" current"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用例子")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.b'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// { c: 1 }")]),t._v("\n")])])]),s("p",[s("strong",[t._v("如何将以上 getValueByPath 函数使用ts改写，使该函数的调用具有完备的类型推断？")])]),t._v(" "),s("p",[s("strong",[t._v("第二个问题：")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("simpleActions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionOne")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionTwo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" simpleActions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ReturnType"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("simpleActions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'actionOne'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// function dispatch<"actionOne">(type: "actionOne"): Promise<number>')]),t._v("\n")])])]),s("p",[s("strong",[t._v("我们很容易为上面的 "),s("code",[t._v("simpleActions")]),t._v(" 编写出其对应的 "),s("code",[t._v("dispatch")]),t._v(" 函数，并具备完整推导，但针对下面这种深层次的actions，如何为其编写dispatch函数？")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" actions "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("someAction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" payload\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  deeperActions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("anotherAction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do something")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'result'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    otherActions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("finalAction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("payload"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("payload\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Actions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" actions\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 编写一个 dispatch 方法，使得：")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let result = dispatch('deeperActions.anotherAction') // 返回类型为： Promise<string>")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// let final = dispatch('deeperActions.otherActions.finalAction', 'hello world') // 返回类型为：Promise<boolean>")]),t._v("\n")])])]),s("p",[t._v("在typescript发布4.1之前，这几乎是不可能完成的任务，但是4.1的发布使我们能够对这一部分的缺失做一些类型补全。")]),t._v(" "),s("p",[t._v("接下来我们围绕上面两个问题分别进行实现。")]),t._v(" "),s("h2",{attrs:{id:"getvaluebypath使用ts实现"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getvaluebypath使用ts实现"}},[t._v("#")]),t._v(" getValueByPath使用TS实现")]),t._v(" "),s("p",[t._v("需要使 "),s("code",[t._v("getValueByPath({ a: { b: { c: 1 } } }, 'a.b')")]),t._v(" 获得完整的推导，我们首先需要能拿到两个参数的完整类型，这在ts中是十分容易的。第二步则是对两个参数的类型做映射处理，最好使得第一个参数输入完成之后，第二个参数直接能具备完整推导。")]),t._v(" "),s("h3",{attrs:{id:"单层推导"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#单层推导"}},[t._v("#")]),t._v(" 单层推导")]),t._v(" "),s("p",[t._v("我们可以先尝试着实现对单层对象取值的类型推导：")]),t._v(" "),s("p",[t._v("首先能得到一个大致的函数结构，接受两个参数，返回一个值")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("object"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prop"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),t._v("\n")])])]),s("p",[t._v("上面这种写法是拿不到参数类型的，为了能正确拿到参数的类型，我们使用范型来填充参数 "),s("code",[t._v("object")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("object"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prop"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),t._v("\n")])])]),s("p",[t._v("可以直接在编辑器上面尝试一下(我使用的是vscode)，很明显可以看到，我们正确的拿到了第一个参数的类型：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/5a1f9aef-c5ff-4109-980a-85216b62e291.png",alt:"xx"}})]),t._v(" "),s("p",[t._v("能取到参数的类型对象，就能使用关键字 "),s("code",[t._v("keyof")]),t._v(" 获取对象的每一个key，接下来我们把候选key值限定给参数prop，然后把对应的返回值结果填充到函数的结果当中，这里我们引入第二个范型 "),s("code",[t._v("K")]),t._v("。尝试调用之后，我们发现结果都符合预期。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("object"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prop"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// number")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" b "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'b'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'c'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Argument of type \'"c"\' is not assignable to parameter of type \'"a" | "b"\'.ts(2345)')]),t._v("\n")])])]),s("h3",{attrs:{id:"多层推导"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#多层推导"}},[t._v("#")]),t._v(" 多层推导")]),t._v(" "),s("p",[t._v("仅仅是单层推导的结构依然是无法满足我们对于 "),s("code",[t._v("getValueByPath({ a: { b: { c: 1 } } }, 'a.b')")]),t._v(" 推导的需求：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.b'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Argument of type '\"a.b\"' is not assignable to parameter of type '\"a\"'.ts(2345)")]),t._v("\n")])])]),s("p",[t._v("可以看到，第二个候选参数的类型仅有 "),s("code",[t._v('"a"')]),t._v("，而我们按正常期望来讲，"),s("code",[t._v("getValueByPath")]),t._v("的第一个参数传入 "),s("code",[t._v("{ a: { b: { c: 1 } } }")]),t._v(" 之后，第二个候选参数类型应该为： "),s("code",[t._v('"a" | "a.b" | "a.b.c"')]),t._v(" 。")]),t._v(" "),s("p",[t._v("接下来我们使用4.1的新特性，将对象： "),s("code",[t._v("{ a: { b: { c: 1 } } }")]),t._v(" 与其链式key： "),s("code",[t._v('"a" | "a.b" | "a.b.c"')]),t._v(" 一一对应起来。")]),t._v(" "),s("p",[t._v("工欲善其事，必先利其器。我们先封装好两个工具函数：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 取出对象的所有除了 symbol 以外的key")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Exclude"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("symbol")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将字符串用 . 进行拼接")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("H")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("L")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("H")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("L")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("H")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("L")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n")])])]),s("p",[t._v("我们知道，"),s("code",[t._v("symbol")]),t._v(" 类型是没办法放在"),s("strong",[t._v("模板字符串")]),t._v("中的，所以对key进行拼接之前，需要过滤掉所有 "),s("code",[t._v("symbol")]),t._v(" 类型的key。而 "),s("code",[t._v("StringKeyof")]),t._v(" 函数，就是用来过滤对象中所有不符合"),s("strong",[t._v("模板字符串")]),t._v("类型的key的方法。其实际用法与 "),s("code",[t._v("keyof")]),t._v(" 相同，只是返回值能用于"),s("strong",[t._v("模板字符串")]),t._v("。")]),t._v(" "),s("p",[s("code",[t._v("CombineStringKey")]),t._v(" 则是对两个key进行拼接，拼接的结果自然就是我们需要的链式key格式。")]),t._v(" "),s("p",[t._v("调用例子：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" symbol1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Symbol")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n  a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("symbol1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1 | 'a'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("         "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// "a"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("C")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'b'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// "a.b"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("C")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'c1'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'c2'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// "a.b.c1" | "a.b.c2"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("E")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("D")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'d'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// "a.b.c1.d" | "a.b.c2.d"')]),t._v("\n")])])]),s("p",[t._v("我们现在以下面这个对象类型为例，取出该对象所有符合要求的链式key：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("deepObj")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    c"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    d"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    e"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      f"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      g"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("boolean")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("思路：遍历对象的所有key，同时对key对应的值进行判断，如果是一个更深层次的对象，则保留外层的key，对更深层对象递归处理，把后续递归出的key都和上一层中保留的key进行拼接。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_ "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("我们将 "),s("code",[t._v("ChainKeys")]),t._v(" 函数拆开来看，首先是它的参数，接受两个类型参数，第一个是类型T，第二个则是用于拼接的"),s("strong",[t._v("前缀字符串")]),t._v("，其值可选。我们使用 "),s("code",[t._v("in")]),t._v(" 语法遍历 "),s("code",[t._v("T")]),t._v(" 的所有 key 值，也就是 "),s("code",[t._v("[K in StringKeyof<T>]")]),t._v("，这里我们使用了前面封装好的方法 "),s("code",[t._v("StringKeyof")]),t._v(" 来代替 "),s("code",[t._v("keyof")]),t._v(" 关键字。对对应的 key 的值，也就是 "),s("code",[t._v("T[K]")]),t._v("，我们使用 "),s("code",[t._v("extends")]),t._v(" 进行前置判断，如果 "),s("code",[t._v("T[K]")]),t._v(" 是一个"),s("strong",[t._v("复杂类型")]),t._v("，我们则将当前的字符串前缀 "),s("code",[t._v("P")]),t._v(" 和当前的 "),s("code",[t._v("K")]),t._v(" 进行拼接，递归调用 "),s("code",[t._v("ChainKeys")]),t._v(" 函数进行处理。如果 "),s("code",[t._v("T[K]")]),t._v(" 为"),s("strong",[t._v("基本类型")]),t._v("，我们直接使用 "),s("code",[t._v("Record")]),t._v(" 方法组装拼接好的key（"),s("code",[t._v("CombineStringKey<P, K>")]),t._v("）和value（"),s("code",[t._v("T[K]")]),t._v("），为了方便在编辑器里面查看结果，这里将"),s("code",[t._v("Record<CombineStringKey<P, K>, T[K]>")]),t._v(" 替换为 "),s("code",[t._v("{ [_ in CombineStringKey<P, K>]:T[K] }")]),t._v("。最后将所有结果打平成联合类型，也就是最后的一个取值操作："),s("code",[t._v("{...}[StringKeyof<T>]")]),t._v("，这和 "),s("code",[t._v("[1,2,3][number] // 3 | 1 | 2")]),t._v(" 的处理方式一致。")]),t._v(" "),s("p",[t._v("接下来我们在编辑器中查看一下调用结果：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/36f16bdc-4754-4387-bdac-bf3710a3ea56.png",alt:"img"}})]),t._v(" "),s("p",[t._v("如红框中所示，发现链式key已经和其类型一一对应起来了。")]),t._v(" "),s("p",[t._v("但是这还有一些问题：")]),t._v(" "),s("p",[t._v("一、"),s("code",[t._v('"b"')]),t._v(" 以及 "),s("code",[t._v('"b.e"')]),t._v(" 没有出现在枚举当中。")]),t._v(" "),s("p",[t._v("二、返回结果是一个"),s("strong",[t._v("联合类型")]),t._v("，如何把这个结果运用到函数当中呢？")]),t._v(" "),s("p",[t._v("第一个问题其实很好解决，当我们在递归处理的同时，将当前的链式key与对应值也进行处理就可以，即：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_ "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("同样为了方便编辑器中查看结果我们把 "),s("code",[t._v("Record<CombineStringKey<P, K>, T[K]>")]),t._v(" 替换成 "),s("code",[t._v("{ [_ in CombineStringKey<P, K>]:T[K] }")]),t._v("：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/d0bb4b70-f355-4d41-8430-031ac4a44136.png",alt:"img"}})]),t._v(" "),s("p",[t._v("可以看到 "),s("code",[t._v("b")]),t._v(" 以及 "),s("code",[t._v('"b.e"')]),t._v(" 这样的key都被取出来并放到了结果当中。其实这里还是有一些问题，如果你实际去代码编辑器里面查看结果的话，会发现有很多重复的 "),s("code",[t._v("b")]),t._v(" ，这是因为后续使用交叉类型进行拼接的 "),s("code",[t._v("ChainKeys")]),t._v(" 的返回值是一个联合类型，如此一来，"),s("code",[t._v("b")]),t._v(" 会被分配到联合类型的"),s("strong",[t._v("每一项")]),t._v("上，在后面我们会解决这个问题。")]),t._v(" "),s("p",[t._v("第二个问题是结果为联合类型，我们如何才能将其运用至函数当中呢？")]),t._v(" "),s("p",[t._v("大家都知道，对联合类型使用 "),s("code",[t._v("keyof")]),t._v(" 操作，返回的类型为 "),s("code",[t._v("never")]),t._v("，即无法取出联合类型的所有key值：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// never")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如何使K的类型为 a ｜ b 呢？")]),t._v("\n")])])]),s("p",[t._v("这里我们引入另一个工具函数："),s("code",[t._v("UnionToIntersection")]),t._v("，顾名思义，该函数的作用就是将联合类型转换为交叉类型，至于"),s("strong",[t._v("为什么")]),t._v("它能将联合类型转换为交叉类型，我们后面会讲：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UnionToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("I")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("I")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("我们将其运用到ChainKeys的推导当中去：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UnionToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("_ "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("再经过一些润色得到一个比较精简的函数：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UnionToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("尝试调用该方法最终得到的结果为：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/f7b952df-6668-434e-b26c-e43345a0f4b4.png",alt:"img"}})]),t._v(" "),s("p",[t._v("最终，我们以此为基础，编写 "),s("code",[t._v("getValueByPath")]),t._v(" 函数的定义：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("object"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prop"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" a "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("     "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// { b: { c: number } }")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" b "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.b'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// { c: number }")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" c "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getValueByPath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" c"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.b.c'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// number")]),t._v("\n")])])]),s("p",[t._v("到此，我们算是完成了 "),s("code",[t._v("getValueByPath")]),t._v(" 函数的类型定义以及推导。")]),t._v(" "),s("h2",{attrs:{id:"深层次actions的dispatch函数ts实现"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#深层次actions的dispatch函数ts实现"}},[t._v("#")]),t._v(" 深层次Actions的dispatch函数TS实现")]),t._v(" "),s("p",[t._v("其实在推导 "),s("code",[t._v("getValueByPath")]),t._v(" 的过程中，我们已经基本上完成了所有实现该 "),s("code",[t._v("dispatch")]),t._v(" 所需要的条件，与 "),s("code",[t._v("getValueByPath")]),t._v(" 不同的是，我们只需要遍历出函数所对应的链式key即可，改写一下 "),s("code",[t._v("ChainKeys")]),t._v(" 方法：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeeperActions")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" DeeperActions\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ActionChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UnionToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("DeeperActions")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" ActionChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("CombineStringKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("P")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("StringKeyof"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("我们除去了对对象的混入，同时将判断类型改为了 "),s("code",[t._v("DeeperActions")]),t._v(" ，以此来判断该 "),s("code",[t._v("action")]),t._v(" 对象是否有更深层次的actions。")]),t._v(" "),s("p",[t._v("调用结果：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/812f50b2-a148-4065-9f87-a9b010502c6d.png",alt:"img"}})]),t._v(" "),s("p",[t._v("再看我们最开始提出的问题：")]),t._v(" "),s("blockquote",[s("p",[t._v("编写一个 dispatch 方法，使得：")]),t._v(" "),s("p",[s("code",[t._v("let result = dispatch('deeperActions.anotherAction') // 返回类型为： Promise<string>")])]),t._v(" "),s("p",[s("code",[t._v("let final = dispatch('deeperActions.otherActions.finalAction', 'hello world') // 返回类型为：Promise<boolean>")])])]),t._v(" "),s("p",[t._v("我们开始定义 "),s("code",[t._v("dispatch")]),t._v(" 方法：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" ChainingActions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Parameters"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ChainingActions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" ReturnType"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ChainingActions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("这里我们分别使用了 "),s("code",[t._v("Parameters")]),t._v(" 和 "),s("code",[t._v("ReturnType")]),t._v(" 函数来获取对应 "),s("code",[t._v("action")]),t._v(" 的参数以及返回值，用来填充至 "),s("code",[t._v("dispatch")]),t._v(" 方法中，实际编写调用代码：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/c6165376-d374-4ede-9bd2-0c99ca336337.png",alt:""}})]),t._v(" "),s("p",[s("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/9447cd1a-04b6-4972-80a1-13f28de2b0cc.png",alt:""}})]),t._v(" "),s("p",[t._v("考虑到我们的 "),s("code",[t._v("actions")]),t._v(" 无论如何都会返回一个 "),s("code",[t._v("Promise")]),t._v("，上述定义其实还是稍微有一些问题，但是改动起来也很方便，只需要在 "),s("code",[t._v("ReturnType")]),t._v(" 外层使用 "),s("code",[t._v("Promise")]),t._v(" 包装一下就可以了：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promisify"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("keyof")]),t._v(" ChainingActions"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Parameters"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ChainingActions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Promisify"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ReturnType"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ChainingActions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">>")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'deeperActions.anotherAction'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Promise<string>")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" final "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'deeperActions.otherActions.finalAction'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello world'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Promise<boolean>")]),t._v("\n")])])]),s("p",[t._v("至此，我们 "),s("code",[t._v("dispatch")]),t._v(" 的TS实现也已经完成。")]),t._v(" "),s("p",[t._v("最终结果：")]),t._v(" "),s("p",[s("img",{attrs:{src:"http://cdn.qiniu.archerk.com.cn/QQ20210128-162139-HD.gif",alt:""}})]),t._v(" "),s("ul",[s("li",[t._v("若图片加载失败请访问： http://cdn.qiniu.archerk.com.cn/QQ20210128-162139-HD.gif")])]),t._v(" "),s("h2",{attrs:{id:"结尾"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#结尾"}},[t._v("#")]),t._v(" 结尾")]),t._v(" "),s("p",[t._v("其实 "),s("code",[t._v("getValueByPath")]),t._v(" 这一部分的内容是有一些缺陷的，因为TS本身"),s("strong",[t._v("限制了递归的次数")]),t._v("，当数据层级达到一定程度时，上文的推导会失效。在Mpx的建设中我们还对此做了一些优化，尽可能的"),s("strong",[t._v("减少")]),t._v("了递归次数。")]),t._v(" "),s("p",[t._v("这里也给出"),s("strong",[t._v("另一个方案")]),t._v("做链式key推导，这种方式"),s("strong",[t._v("性能")]),t._v("上会好很多，因为不用解析出所有的链式key，而是根据链式key"),s("strong",[t._v("反向解析")]),t._v("前面的对象，因此该方案可以解析出正确的类型，但是会丧失一部分代码提示：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CutChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("GetValueByPath"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" CutChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("CutChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" GetValueByPath"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("CutChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" CutChainKeys"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("declare")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" Record"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("o"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" GetValueByPath"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("K")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" s "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    c"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      d"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        e"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          f"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'f'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.c.d.e.f'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string")]),t._v("\n")])])]),s("p",[t._v("通过这一系列的处理，我们基本完成了 "),s("code",[t._v("mpx-store")]),t._v(" 的类型推导，包括对应的"),s("strong",[t._v("辅助函数")]),t._v("等。这也使得我们能够在项目中更好的使用TS进行开发。在最新的滴滴出行小程序更新中，我们已经开始使用TS全量进行开发，目前看来开发体验还不错，后期也会逐步将旧的代码重构为TS。我们后续也会持续维护和迭代框架，也欢迎有兴趣的朋友来一起"),s("a",{attrs:{href:"https://github.com/didi/mpx",target:"_blank",rel:"noopener noreferrer"}},[t._v("共建"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("p",[t._v("有写的不好的地方请多包含，也欢迎大家批评指正。")]),t._v(" "),s("h2",{attrs:{id:"题外话：uniontointersection"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#题外话：uniontointersection"}},[t._v("#")]),t._v(" 题外话：UnionToIntersection")]),t._v(" "),s("p",[t._v("上面提到的，我们使用工具函数 "),s("code",[t._v("UnionToIntersection")]),t._v(" 将联合类型转换为交叉类型。而 "),s("code",[t._v("UnionToIntersection")]),t._v(" 又是如何将"),s("strong",[t._v("联合类型转换为交叉类型")]),t._v("的呢？")]),t._v(" "),s("p",[t._v("在 "),s("a",{attrs:{href:"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Conditional Types"),s("OutboundLink")],1),t._v(" 中有提到一些点：")]),t._v(" "),s("h3",{attrs:{id:"distributive-conditional-types"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#distributive-conditional-types"}},[t._v("#")]),t._v(" Distributive conditional types")]),t._v(" "),s("blockquote",[s("p",[t._v("Conditional types in which the checked type is a naked type parameter are called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation. For example, an instantiation of "),s("code",[t._v("T extends U ? X : Y")]),t._v(" with the type argument "),s("code",[t._v("A | B | C")]),t._v(" for "),s("code",[t._v("T")]),t._v(" is resolved as "),s("code",[t._v("(A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)")]),t._v(".")])]),t._v(" "),s("p",[t._v("即在"),s("strong",[t._v("执行")]),t._v(" "),s("code",[t._v("extends")]),t._v(" "),s("strong",[t._v("语句时")]),t._v("，如果 "),s("code",[t._v("extends")]),t._v(" 左侧为"),s("strong",[t._v("联合类型")]),t._v("，则会被分配成"),s("strong",[t._v("对应数量个")]),t._v("子条件判断语句，最终"),s("strong",[t._v("联合")]),t._v("每个子语句的结果。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("IsNumber"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("B")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" IsNumber"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("A")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1 | 3")]),t._v("\n")])])]),s("h3",{attrs:{id:"type-inference-in-conditional-types"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#type-inference-in-conditional-types"}},[t._v("#")]),t._v(" Type inference in conditional types")]),t._v(" "),s("blockquote",[s("p",[t._v("Within the "),s("code",[t._v("extends")]),t._v(" clause of a conditional type, it is now possible to have "),s("code",[t._v("infer")]),t._v(" declarations that introduce a type variable to be inferred. Such inferred type variables may be referenced in the true branch of the conditional type. It is possible to have multiple "),s("code",[t._v("infer")]),t._v(" locations for the same type variable.")])]),t._v(" "),s("p",[t._v("在条件判断语句中，可以使用 "),s("code",[t._v("infer")]),t._v(" 关键字做类型推断，同一个候选值能有"),s("strong",[t._v("多个")]),t._v("推断位置。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ReturnType"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("R")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("R")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[s("strong",[t._v("正位推断")]),t._v("的结果会被推导为"),s("strong",[t._v("联合")]),t._v("类型：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Foo"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T10")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Foo"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T11")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Foo"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string | number")]),t._v("\n")])])]),s("p",[s("strong",[t._v("逆变位置推断")]),t._v("的结果会被处理成"),s("strong",[t._v("交叉")]),t._v("类型：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bar"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T20")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Bar"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("T21")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Bar"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string & number")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意")]),t._v("：这里是"),s("code",[t._v("ts-2.8")]),t._v("发布时的文档以及例子，现在来说是不存在 "),s("code",[t._v("string & number")]),t._v(" 类型的，如果实际编写这段代码的话会发现 "),s("code",[t._v("T21")]),t._v(" 的值为 "),s("code",[t._v("never")]),t._v("，因为不可能存在一个值既为 "),s("code",[t._v("string")]),t._v(" 又为 "),s("code",[t._v("number")]),t._v("。逆变与协变的一些概念可以参考一下"),s("a",{attrs:{href:"https://zh.wikipedia.org/wiki/%E5%8D%8F%E5%8F%98%E4%B8%8E%E9%80%86%E5%8F%98",target:"_blank",rel:"noopener noreferrer"}},[t._v("逆变与协变"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("h3",{attrs:{id:"uniontointersection-原理探究"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#uniontointersection-原理探究"}},[t._v("#")]),t._v(" UnionToIntersection 原理探究")]),t._v(" "),s("p",[t._v("有了以上两个信息之后，我们再来看看 "),s("code",[t._v("UnionToIntersection")]),t._v(" 的实现，为了方便阅读我们做一些折行：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UnionToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")])]),t._v(" \n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("I")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("I")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("发现实际上 "),s("code",[t._v("UnionToIntersection")]),t._v(" 分为两步：")]),t._v(" "),s("p",[t._v("1、将联合类型的"),s("strong",[t._v("每一项")]),t._v("填充至 函数类型 "),s("code",[t._v("(k: U) => void")]),t._v(" 的参数 "),s("code",[t._v("k")]),t._v(" 中。")]),t._v(" "),s("p",[t._v("2、使用 "),s("code",[t._v("infer")]),t._v(" 关键字在"),s("strong",[t._v("逆变位")]),t._v("对 "),s("code",[t._v("(k: U) => void")]),t._v(" 做推导，将参数的类型推入结果 "),s("code",[t._v("I")]),t._v(" 中，组成"),s("strong",[t._v("交叉")]),t._v("类型。")]),t._v(" "),s("p",[t._v("拆分看实现：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 联合类型推入函数参数")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UnionToFunction"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("U")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对函数逆变推导，将参数推导为交叉类型")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FunctionsToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("F")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("F")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("k"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("infer")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("I")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("I")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("never")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Union")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" a"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" b"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Fun")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UnionToFunction"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Union"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ((k: { a: number }) => void) | ((k: { b: string }) => void)")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Intersection")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" FunctionsToIntersection"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Fun"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// { a: number } & { b: string }")]),t._v("\n")])])]),s("p",[t._v("可以注意到我们拆分开来了 "),s("code",[t._v("UnionToIntersection")]),t._v(" 后并不是完全按照原有写法去写的，在 "),s("code",[t._v("FunctionsToIntersection")]),t._v(" 函数中，我们使用了"),s("code",[t._v("[]")]),t._v("将类型给包裹起来，这是为了"),s("strong",[t._v("避免")]),t._v("第一个特性（Distributive conditional types）的影响，如果不做包裹，则 "),s("code",[t._v("extends")]),t._v(" 左侧为联合类型，被分配成若干个子句后，同一位置的 "),s("code",[t._v("infer")]),t._v(" 就会被分别执行，无法合成为交叉类型。而使用"),s("code",[t._v("[]")]),t._v("进行包裹之后则避免了这个影响，"),s("code",[t._v("extends")]),t._v(" 左侧不再是一个联合类型，而是一个数组类型。")]),t._v(" "),s("h2",{attrs:{id:"参考资料汇总"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#参考资料汇总"}},[t._v("#")]),t._v(" 参考资料汇总")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Template Literal Types"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Conditional Types"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://zh.wikipedia.org/wiki/%E5%8D%8F%E5%8F%98%E4%B8%8E%E9%80%86%E5%8F%98",target:"_blank",rel:"noopener noreferrer"}},[t._v("逆变与协变 Covariance and contravariance"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://github.com/microsoft/TypeScript/issues/30188",target:"_blank",rel:"noopener noreferrer"}},[t._v("TS递归上限"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://github.com/didi/mpx/pull/631",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx中的实现（前期）"),s("OutboundLink")],1)])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/62.4bf212f9.js b/docs-vuepress/.vuepress/dist/assets/js/62.4bf212f9.js
deleted file mode 100644
index 08a9a372da..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/62.4bf212f9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[62],{413:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"mpx-小程序单元测试能力建设与实践"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx-小程序单元测试能力建设与实践"}},[t._v("#")]),t._v(" Mpx 小程序单元测试能力建设与实践")]),t._v(" "),s("blockquote",[s("p",[t._v("作者："),s("a",{attrs:{href:"https://github.com/Blackgan3",target:"_blank",rel:"noopener noreferrer"}},[t._v("Blackgan3"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"什么是单元测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#什么是单元测试"}},[t._v("#")]),t._v(" 什么是单元测试")]),t._v(" "),s("p",[t._v("In computer programming, unit testing is a software testing method by which individual units of source code—sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures—are tested to determine whether they are fit for use wikipedia")]),t._v(" "),s("p",[t._v("对一个函数，模块，类进行运行结果正确性检验的工作就是单元测试，此外每个单元测试的对象应该是一个最简单的组件/函数。")]),t._v(" "),s("p",[t._v("那写单测又能给我们哪些收益呢？")]),t._v(" "),s("ul",[s("li",[t._v("大幅提高项目代码可维护性")]),t._v(" "),s("li",[t._v("覆盖率到达一定指标后可大幅提高研发效率")]),t._v(" "),s("li",[t._v("让你的代码零线上bug锐减，上线不再提心吊胆")]),t._v(" "),s("li",[t._v("改进设计，促进重构")])]),t._v(" "),s("p",[t._v("此外，单测高覆盖率的项目也会给公司节省大量支出：\n"),s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1640872105786-b7b230b4-7f65-4a0f-8dbf-e8ba89f61837.png",alt:"unit-test-money.png"}}),t._v("\n据微软统计单测效益结果，如上图展示，绝大多数bug都是在coding阶段产生，并且随着需求开发进度的推进，修复bug的成本会随指数级增长，当我们在unit test阶段发现并修复这个bug是能给公司带来巨大收益的。")]),t._v(" "),s("p",[t._v("下方介绍两种常见的项目单元测试规范：")]),t._v(" "),s("ul",[s("li",[t._v("TDD (Test driven development)")])]),t._v(" "),s("blockquote",[s("p",[t._v("测试驱动开发，在书写业务代码之前，先根据需求进行单元功能测试用例书写")])]),t._v(" "),s("p",[t._v("这里驱动开发的不是简单的测试用例，是能够持续验证、重构并且对需求功能极致细化的测试用例")]),t._v(" "),s("ul",[s("li",[t._v("BDD (Behavior driven development)")])]),t._v(" "),s("blockquote",[s("p",[t._v("行为驱动开发，通过具有辨识力的测试用例驱动项目开发团队所有人，使用自然语言来描述功能，一般和 TDD 相结合，针对行为进行测试，让开发者在写单测时从专注代码实现转为业务行为，能使单测更加场景化和智能化")])]),t._v(" "),s("p",[t._v("单元测试的书写初期必定伴随着大量精力与时间的消耗，但长期持续维护的业务在搭建并完善好整个单元测试体系后，可大大提高项目稳定性和研发效率")]),t._v(" "),s("h2",{attrs:{id:"前端单元测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#前端单元测试"}},[t._v("#")]),t._v(" 前端单元测试")]),t._v(" "),s("h3",{attrs:{id:"前端单元测试工具"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#前端单元测试工具"}},[t._v("#")]),t._v(" 前端单元测试工具")]),t._v(" "),s("p",[t._v("前端单元测试目前有很多框架和工具，我们下方列出三个较为流行的框架和工具库进行介绍")]),t._v(" "),s("ul",[s("li",[t._v("Mocha: 功能丰富的 javascript 测试框架(不包括断言和仿真环境，快照测试需额外配置)，可以运行在node.js和浏览器中")]),t._v(" "),s("li",[t._v("Jasmine：Behavior-Drive development(BDD)风格的测试框架，在业内较为流行,功能很全面，自带asssert、mock功能")]),t._v(" "),s("li",[t._v("Jest：一个功能全面的 javascript 测试框架，基于Jasmine 做了大量新特性(例如并行执行、源代码改动感知等)，开箱即用，适用于绝大多数 js 项目")])]),t._v(" "),s("h3",{attrs:{id:"测试断言库"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#测试断言库"}},[t._v("#")]),t._v(" 测试断言库")]),t._v(" "),s("p",[t._v("在单测运行框架中，我们需要断言库来进行方法返回和实例状态的正确性验证")]),t._v(" "),s("ul",[s("li",[t._v("should: BDD风格断言                    (true).should.be.ok")]),t._v(" "),s("li",[t._v("expect: expect()样式断言              expect(true).toBe(true)")]),t._v(" "),s("li",[t._v("assert: Node.js 内置断言模块       assert(true === true)")]),t._v(" "),s("li",[t._v("chai: expect()，assert()和should风格的断言都支持，全能型选手")])]),t._v(" "),s("p",[t._v("在众多前端单元测试框架中，Jest 目前凭借零配置，高性能，且对于断言，快照，覆盖率等都有很好的集成，是目前较为流行的一个单测框架")]),t._v(" "),s("h3",{attrs:{id:"jest-框架简介"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#jest-框架简介"}},[t._v("#")]),t._v(" Jest 框架简介")]),t._v(" "),s("p",[t._v("简单来看下 Jest 框架的特点以及大致的运行原理")]),t._v(" "),s("p",[s("strong",[t._v("Jest 的整体框架特点大概归纳总结为以下几点:")])]),t._v(" "),s("ul",[s("li",[t._v("在操作系统上高效的进行文件搜索以及相互依赖关系匹配")]),t._v(" "),s("li",[t._v("单测并行执行，运行效率高")]),t._v(" "),s("li",[t._v("内置断言库、覆盖率、快照测试等功能，开箱可用")]),t._v(" "),s("li",[t._v("使用 vm 来进行沙盒环境运行，单测之间相互隔离")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1639153318989-0e6ac9ed-75a3-4874-8a48-5370db55891d.png#averageHue=%23464a4d&clientId=uf375a834-bd4b-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=579&id=u7fb4026f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=2014&originWidth=777&originalType=binary&ratio=1&rotation=0&showTitle=false&size=495531&status=done&style=none&taskId=u6e39efb8-e12a-49b0-b8ce-ade9b63fd2c&title=&width=223.5",alt:"image.png"}}),t._v("\n打开 Jest pacakges，可以看到大概有50多个包，我们根据这些不同的包来将整个 jest 运行流程整体串起来")]),t._v(" "),s("p",[s("strong",[t._v("第一步 jest-cli 读取相关配置")]),t._v("\n当我们执行 jest 命令时，先去执行 jest-cli 中的 run 方法，再调用 jest-core 中的 runCli 方法，其中通过 jest-config 提供的 readConfigs 来读取 Jest 相关配置，返回全局配置(globalConfig)和局部配置(configs)")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1640502186276-2a1c2976-58a5-4fd9-91db-c5df8265fc7f.png#clientId=u3d4e127e-cc05-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=161&id=uc6c948fd&margin=%5Bobject%20Object%5D&name=unit-test-jest-step1.png&originHeight=177&originWidth=808&originalType=binary&ratio=1&rotation=0&showTitle=false&size=23884&status=done&style=none&taskId=ub778d79f-2480-411f-97c3-d13aed04965&title=&width=735",alt:"unit-test-jest-step1.png"}})]),t._v(" "),s("p",[s("strong",[t._v("第二步 文件静态分析")]),t._v("\n使用 jest-haste-map 来进行项目中所有文件的检索以及生成文件之间的相互依赖关系，在 jest-core 中的 _run10000 方法中执行 buildContextsAndHasteMaps，返回 contexts 和 hasteMapInstances，contexts 中的 hasteFs 存储的就是文件及依赖关系。")]),t._v(" "),s("p",[t._v("**jest-haste-map **检索的过程中借助 jest-worker 来根据当前cpu核数并行的进行文件检索，借助 fb-watch-man/crawler 对整体文件变动做实时监听，做到只执行有改动的单元测试文件，实现单测缓存效果。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1640524931986-a0ee9e99-151b-464e-96f3-c5d403a258f5.png#clientId=u059512e6-4582-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=555&id=u042b30bc&margin=%5Bobject%20Object%5D&name=unit-test-jest-haste.png&originHeight=1109&originWidth=2131&originalType=binary&ratio=1&rotation=0&showTitle=false&size=188410&status=done&style=none&taskId=u0c46aead-c2c6-4bd4-a90a-cf1e8cce042&title=&width=1065.5",alt:"unit-test-jest-haste.png"}}),t._v("\n下方看一个简单的jest-haste-map使用示例")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" JestHasteMap "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'jest-haste-map'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("cpus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'os'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" hasteMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("JestHasteMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("default")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("extensions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("maxWorkers")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cpus")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("platforms")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("hasteFS"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" hasteMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("build")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" testFiles "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" hasteFS"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAllFiles")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("testFiles"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ['/path/to/tests/list1.spec.js', '/path/to/tests/list2.spec.js', …]")]),t._v("\n")])])]),s("p",[s("strong",[t._v("第三步 单测检索和排序")]),t._v("\n经过第一步和第二步，我们拿到了 "),s("strong",[t._v("配置对象 configs")]),t._v("，以及"),s("strong",[t._v("文件Map HasteContext")]),t._v("，接下来通过 SearchSource 对象检索出所有的单元测试到一个数组中，检索出单元测试文件后，在正式执行之前，我们需要先对当前拿到的所有单测进行权重优先级排序。")]),t._v(" "),s("p",[t._v("单测排序的工作是由 jest Sequencer 完成的，默认排序优先级为 failed (上次失败的先运行)> duration(耗时长的先运行) > size(文件体积大的先运行)，当然这里我们也可以自定义customSequencer来覆盖 jest 默认的排序规则，jest 排序规则如下。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1640525025246-045963f5-1df6-411c-9257-74359f05e235.png#clientId=u059512e6-4582-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=802&id=u61d4057e&margin=%5Bobject%20Object%5D&name=unit-test-jest-scquencer.png&originHeight=1603&originWidth=2726&originalType=binary&ratio=1&rotation=0&showTitle=false&size=292495&status=done&style=none&taskId=udcf49166-d29d-4ba5-97b4-f942d8b9fe4&title=&width=1363",alt:"unit-test-jest-scquencer.png"}})]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" tests"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sort")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("testA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" testB")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("failedA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!==")]),t._v(" failedB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" failedA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("hasTimeA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("testB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("duration "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If only one of two tests has timing information, run it last")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" hasTimeA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("testA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("duration "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" testB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("duration "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" testA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("duration "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" testB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("duration "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fileSize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("testA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fileSize")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("testB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[s("strong",[t._v("第四步 开始执行")]),t._v("\n在经过第三步之后，我们拿到了经过排序后的单测文件，接下来开始进入到执行步骤，执行单测时的整个调度工作是 jest/core 中的 TestScheduler 来完成，例如 scheduler 会推算是串行执行还是并行执行，推算单测执行完的大概时间，覆盖率报告的生成等，scheduler 会调用 jest-runner 中的 runTests 方法去触发单测执行")]),t._v(" "),s("p",[t._v("如果需要并行执行，runTest 方法触发 jest-worker 创建多个child process 子进程来支持 parallel 执行")]),t._v(" "),s("p",[t._v("单元测试中全局方法和全局变量，比如 test() describe() it() 等是由 jest-cirucs(jest-jasmine) 提供并注入global中")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1640527878045-b379169e-e180-4226-884d-2da6b90321ec.png#clientId=u059512e6-4582-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u4114c79f&margin=%5Bobject%20Object%5D&name=unit-test-jest-run-test.png&originHeight=2878&originWidth=3480&originalType=binary&ratio=1&rotation=0&showTitle=false&size=683293&status=done&style=none&taskId=ue36536e2-f975-4782-8f78-6d5203e2ae6&title=",alt:"unit-test-jest-run-test.png"}}),t._v("\n最终单测的运行是由 jest-runtime 中创建的 vm 虚拟机隔离执行，vm 作用域中dom环境是由 jest-environment-jsdom 提供，此外 jest-runtime 中还包括了 transformer 能力以及mock功能的具体实现等，这部分功能在接下来的Mpx框架单元测试实现章节我们会去详细介绍它。")]),t._v(" "),s("p",[s("strong",[t._v("第五步 处理返回结果")]),t._v("\n此外 jest-runner中提供了一套类似于 redux 的数据流机制和eventEmitter来管理维护单测状态以及单测执行结果，在jest-runner 中进行事件触发，在TestScheduler 中进行事件监听并对执行结果进行各种处理和序列化，\n最后在 jest-core 中的runJest方法中进行执行结果的终端输出/文件输出等一系列处理。")]),t._v(" "),s("h2",{attrs:{id:"小程序单元测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#小程序单元测试"}},[t._v("#")]),t._v(" 小程序单元测试")]),t._v(" "),s("h3",{attrs:{id:"与-web-应用的不同"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#与-web-应用的不同"}},[t._v("#")]),t._v(" 与 web 应用的不同")]),t._v(" "),s("p",[t._v("上个章节讲完前端单测简介，以及jest单测框架的大概运行原理后，接下来我们看下单元测试在小程序场景下与web场景的不同")]),t._v(" "),s("p",[t._v("首先小程序本身是双线程分离的机制，但目前并没有这种独特的运行环境用来执行单元测试，这里需要借助小程序官方提供的 miniprogram-simulate 工具集，来将整体运行机制调整为单线程模拟运行，并利用 dom 环境来进行小程序组件的注册渲染以及整个自定义组件树的搭建")]),t._v(" "),s("p",[t._v("小程序的单元测试执行依赖 js 运行环境和 dom 环境，这里我们选择 jest 框架来提供对应的环境")]),t._v(" "),s("p",[t._v("下方是一个简单的微信小程序官方提供的单元测试demo，具体关于miniprogram-simulate 的更多API的使用可以去官方文档查看 "),s("a",{attrs:{href:"https://github.com/wechat-miniprogram/miniprogram-simulate",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/wechat-miniprogram/miniprogram-simulate"),s("OutboundLink")],1)]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" simulate "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'miniprogram-simulate'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'comp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./comp'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注册自定义组件，返回组件 id")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 id 渲染自定义组件，返回组件封装实例")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'parent-wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建容器节点")]),t._v("\n    comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将组件插入到容器节点中，会触发 attached 生命周期")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<div>123</div>'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 判断组件渲染结果")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行其他的一些测试逻辑")]),t._v("\n\n    comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("detach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将组件从容器节点中移除，会触发 detached 生命周期")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("此外对于小程序工具集的整体运行流程，在下方章节进行了简要总结。")]),t._v(" "),s("h3",{attrs:{id:"小程序单测框架整体流程"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#小程序单测框架整体流程"}},[t._v("#")]),t._v(" 小程序单测框架整体流程")]),t._v(" "),s("p",[t._v("小程序单元测试中微信官方提供的相关库有 miniprogram-simulate、j-component 和 miniprogram-exparser等")]),t._v(" "),s("ul",[s("li",[t._v("miniprogram-simulate: 小程序自定义组件测试工具集，进行小程序内置组件的注册以及模拟微信原生api的注入")]),t._v(" "),s("li",[t._v("j-component: 仿小程序组件系统，可以让小程序自定义组件跑在 web 端。")]),t._v(" "),s("li",[t._v("miniprogram-exparser：微信小程序官方的组件系统模块，exparser 的组件模型和 WebComponents标准中的 Shadow DOM 高度相似，基于 Shadow DOM 原型，可在纯 JS 环境运行，维护整个组件的节点树相关的信息，包括属性、事件等。")]),t._v(" "),s("li",[t._v("miniprogram-compiler:  wcc、wcsc 官方编译器的 node 封装版，用于编译 wxml、wxss 文件")])]),t._v(" "),s("p",[t._v("开发者在使用的时候经常用的的两个方法就是 simulate.load 和 simulate.render 方法，那这里我们就从这两个方法为入口进行整个流程的总结\n"),s("strong",[t._v("1.miniprogramSimulate.load(path)")]),t._v(" "),s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2022/png/116604/1645371259515-600e82a3-5a16-4b50-90d2-4de16b3a6e13.png#clientId=u8f88ae50-6693-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=2179&id=u91907731&margin=%5Bobject%20Object%5D&name=%E5%B0%8F%E7%A8%8B%E5%BA%8F-load.png&originHeight=2179&originWidth=3100&originalType=binary&ratio=1&rotation=0&showTitle=false&size=655139&status=done&style=none&taskId=uffad3560-8564-4372-bf2f-ceded0ad196&title=&width=3100",alt:"小程序-load.png"}})]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" nowLoad\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// miniprogram-simulate")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" definition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 省略部分判断")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("register")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hasRegisterCache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("needRunJsList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// nowLoad 用于执行用户代码调用 Component 构造器时注入额外的参数给 j-component")]),t._v("\n    nowLoad "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require('xxx.js')")]),t._v("\n    _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runJs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" id\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("register")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hasRegisterCache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 随机生成，不重复")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getId")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" component "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("json")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("readJson")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(".json")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("wxml")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" compile"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getWxml")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("wxss")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" wxss"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getContent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(".wxss")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 存入需要执行的自定义组件 js")]),t._v("\n  cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("needRunJsList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" component"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" component"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nglobal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("Component")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("options")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" component "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" nowLoad\n  jComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("register")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("definition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("register")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("definition "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" componentManager "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ComponentManager")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("definition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" componentManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ComponentManager 方法")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ComponentManager")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("constructor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("definition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ......")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exparserDef "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerToExparser")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerToExparser")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" exparserDef "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("is")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            using"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("generics")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// TODO")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("template")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("func")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("generateFunc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" definition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("properties"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" definition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" definition"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("methods"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// miniprogram-exparser")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" exparser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("exparserDef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[s("strong",[t._v("2.miniprogramSimulate.render(id)")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2022/png/116604/1645372791716-b3faf038-ff6f-4309-9a91-270bcfda4aa7.png#clientId=u8f88ae50-6693-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=2069&id=u272fdda2&margin=%5Bobject%20Object%5D&name=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-render.png&originHeight=2069&originWidth=3131&originalType=binary&ratio=1&rotation=0&showTitle=false&size=668246&status=done&style=none&taskId=u0ed961d2-5859-4c1b-ac1b-79595d39e8e&title=&width=3131",alt:"微信小程序-render.png"}}),t._v("\nminiprogram-simulate中render方法会调用j-component create，根据id从缓存对象中获取componentManager，进行组件实例创建")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n   * 创建组件实例\n   */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" properties")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" componentManager "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cache")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("componentManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RootComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("componentManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" properties"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("RootComponent 构造函数中使用之前的 _exparserDef 对象进行真实dom节点创建，生成 _exparserNode")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("RootComponent")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("constructor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("componentManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" properties")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  \t"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_exparserNode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" exparser"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tagName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" exparserDef"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create exparser node and render")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_bindEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// touchstart，touchemove blur 等事件绑定")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("新生成的 rootComponent 实例继承Component对象，定义了许多我们单测中需要用到的组件方法")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Component")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dom")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("get")]),t._v(" instance "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  dispatchEvent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  addEventListener "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  removeEventListener "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  querySelector "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  setData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  triggerLifeTime "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  triggerPageLifeTime "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  toJSON"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("当然中间还有很多细节实现，比如模版渲染 j-component/template/compile，组件更新 j-component/render 等，感兴趣的话可以详细去看下里边具体的实现，这里我们暂且按下不表。至此，我们拿到了 component 实例，并可以进行正常的组件状态获取以及更新，然后在Jest框架中去断言组件的各种属性以及方法执行后的预期。")]),t._v(" "),s("h2",{attrs:{id:"mpx-框架单元测试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx-框架单元测试"}},[t._v("#")]),t._v(" Mpx 框架单元测试")]),t._v(" "),s("p",[t._v("经过上方 Jest 框架讲解以及小程序单元测试流程分析后，接下来看下在Mpx框架中的单测能力支持实现")]),t._v(" "),s("h3",{attrs:{id:"初期版本"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#初期版本"}},[t._v("#")]),t._v(" 初期版本")]),t._v(" "),s("p",[t._v("Mpx框架的初期单测架构，是将Mpx框架开发的小程序项目，先构建编译为源码，再使用 miniprogram-simulate + j-component + jest 对构建后的小程序原生代码运行单元测试\n"),s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2021/png/116604/1640786157277-5f92065d-c87e-46ed-b57e-4692b3d78a36.png#clientId=uc72cd25a-bebe-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=485&id=uf9a7caa5&margin=%5Bobject%20Object%5D&name=mpx-old-unit-test-architecture.png&originHeight=969&originWidth=3076&originalType=binary&ratio=1&rotation=0&showTitle=false&size=744497&status=done&style=none&taskId=uf25026f4-fd27-4116-bcb5-ffbe7357910&title=&width=1538",alt:"mpx-old-unit-test-architecture.png"}}),t._v("\n该方案执行任何case都需要执行完整的构建流程，而且预构建已经完成了所有的模块收集，无法使用jest提供的模块mock功能，导致业务使用成本很高，落地困难。")]),t._v(" "),s("h3",{attrs:{id:"优化版本"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#优化版本"}},[t._v("#")]),t._v(" 优化版本")]),t._v(" "),s("p",[t._v("经过调研，Jest 本身支持代码转换功能")]),t._v(" "),s("blockquote",[s("p",[t._v("Jest在项目中以JavaScript的代码形式运行，但是如果使用一些Node.js不支持的，却可以开箱即用的语法(如JSX，TypeScript中的类型，Vue模板等)那你就需要将代码转换为纯JavaScript，转换的工作就是transformer")])]),t._v(" "),s("p",[t._v("这里我们就可以通过Jest提供的转换能力编写mpx-jest转换器，实现在Jest模块加载过程中实时地将当前的Mpx组件编译转换为原生小程序组件，再交由miniprogram-simulate加载运行测试case。")]),t._v(" "),s("p",[t._v("该方案中模块加载完全基于Jest并能实现按需编译，完美规避旧方案中存在的缺陷，缺点在于编译构建流程基于Jest api重构，与Mpx自身基于Webpack的构建流程独立存在，带来额外维护成本，这一问题我们通过将通用的编译转换逻辑抽离出来统一维护，在Webpack和Jest两侧复用，从而解决了改问题。同时在实现这个方案的过程中也做了一部分对应库的改动，将会在下方介绍。")]),t._v(" "),s("p",[t._v("首先来看下 jest-runtime 中 transform 的整体流程。")]),t._v(" "),s("ul",[s("li",[t._v("runTest 方法调用 runtime.requireModule(path)，传入对应的单测文件地址")]),t._v(" "),s("li",[t._v("判断是否是mock module，如果是则直接走 requireMock方法，否则继续往下进行")]),t._v(" "),s("li",[t._v("定义 localModule")]),t._v(" "),s("li",[t._v("调用 this._loadModule")]),t._v(" "),s("li",[t._v("_createRequireImplementation(module, options) 赋值给module.require")]),t._v(" "),s("li",[t._v("transformFile 处理对应的文件")]),t._v(" "),s("li",[t._v("createScriptFromCode(transformdCode)")]),t._v(" "),s("li",[t._v("getVmContext  使用 vm 创建沙盒环境")]),t._v(" "),s("li",[t._v("在沙盒环境执行对应的 jest 单测代码")])]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2022/png/116604/1645251815753-ba8529bb-c63f-477f-bb2a-60182bf5f390.png#clientId=u3600a0a4-27fc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=811&id=u9a266c8b&margin=%5Bobject%20Object%5D&name=jest-runtime1.png&originHeight=3242&originWidth=4075&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1246325&status=done&style=none&taskId=uae1603dd-c05f-443b-977e-849426edf0d&title=&width=1019",alt:"jest-runtime1.png"}}),t._v("\n其中关键节点的代码如下")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t\t\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义 localModule")]),t._v("\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" localModule "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("children")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exports")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("filename")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" modulePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" modulePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loaded")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dirname")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("modulePath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 自定义 module.require")]),t._v("\n\t\t\tObject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProperty")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'require'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// rquireModuleOrMock || rquireInternalModule")]),t._v("\n      \t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("value")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("_createRequireImplementation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// transformCode")]),t._v("\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" transformedCode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("transformFile")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filename"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t\t\t\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// createScriptFromCode")]),t._v("\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" script "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" vm"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'({\"'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("EVAL_RESULT_VARIABLE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('":function(')]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("','")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("){")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" transformedCode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'\\n}});'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t\t\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" vmContext "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_environment"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getVmContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      runScript "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" script"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runInContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("vmContext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        filename\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t\t\tcompiledFunction "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" runScript"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("EVAL_RESULT_VARIABLE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("compiledFunction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("call")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// module object")]),t._v("\n        module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// module exports")]),t._v("\n        module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("require"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require implementation")]),t._v("\n        module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// __dirname")]),t._v("\n        module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("filename"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// __filename")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// @ts-expect-error")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("lastArgs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("notEmpty"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("上方是整个 jest-runtime 中对于require module 时transform的整体流程。在Jest的这一能力之上，我们基于 @mpxjs/webpack-plugin 开发了 mpx-jest transformer，实现将 Mpx 单文件组件转换输出为对应的小程序原生代码。\n"),s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2022/png/116604/1645264785364-2db4095b-0344-4fa8-8d56-bfeb28c0f78d.png#clientId=uec723a90-39b3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=1588&id=ubbef4532&margin=%5Bobject%20Object%5D&name=%E6%94%B9%E8%89%AF%E6%96%B9%E6%A1%8801.png&originHeight=1588&originWidth=3007&originalType=binary&ratio=1&rotation=0&showTitle=false&size=368757&status=done&style=none&taskId=u8c2c10f8-f83f-4765-b312-bb75081e05c&title=&width=3007",alt:"改良方案01.png"}}),t._v("\n在完成代码转换后，对应的 script 代码做为String存在于内存中，无法直接使用 Jest 环境的 require 加载执行，为此我们参考上述 jest-runtime 中的 loadModule方法实现了requireFromString方法，核心还是使用node vm 模块来进行 script 代码的执行，同时将jsdom-environment 和 Jest global 对象合并做为 vmContext")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2022/png/116604/1645269513406-df59853a-086d-4d5f-87a5-cb003d556ce9.png#clientId=uec723a90-39b3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=802&id=u2da3911b&margin=%5Bobject%20Object%5D&name=%E6%94%B9%E9%80%A0%E6%96%B9%E6%A1%882.png&originHeight=802&originWidth=1970&originalType=binary&ratio=1&rotation=0&showTitle=false&size=125179&status=done&style=none&taskId=u182d9b94-f659-4d25-80d5-d9d01fdbaac&title=&width=1970",alt:"改造方案2.png"}}),t._v("\n至此，我们的整体单测方案就大致完成，通过 mpx-jest 转换组件，再交由 miniprogram-simulate 来渲染组件实例，从而完成对组件状态的断言，在实际测试的过程中，还遇到了以下问题进行解决。")]),t._v(" "),s("p",[t._v("1.Mpx框架的文件纬度的条件编译支持\nMpx框架的跨平台输出部分支持对文件进行平台和应用的条件编译引用")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 文件列表")]),t._v("\nexample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("wx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mpx\nexample"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ali"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mpx\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 代码使用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("example")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/example'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这里我们需要在Jest运行时环境中提供该功能，借助Jest本身提供的 resolver 自定义能力，让我们可以对请求的文件进行自定义resolve功能，这里我们使用Mpx中现有的resolve plugin 和 enhanced-resolve来自定义resolve方法进行文件条件编译的支持。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" CachedInputFileSystem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ResolverFactory "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'enhanced-resolve'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" AddModePlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/webpack-plugin/lib/resolver/AddModePlugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("exports")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" addModePlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("AddModePlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'before-file'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'file'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create a resolver")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" myResolver "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ResolverFactory"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createResolver")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("addModePlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" result "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" myResolver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolveSync")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("basedir"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" request"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("split")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'?'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("2.miniprogram-simulate 定制化方法\n在小程序单元测试的章节中，我们介绍了小程序相关库的运行机制，miniprogram-simulate提供的 load 方法默认只解析渲染原生组件，我们的Mpx组件，mpx-jest 转换器无法和miniprogram-simulate进行关联，所以这里我们选择fork miniprogram-simulate 仓库，自定义了loadMpx和registerMpx方法。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" simulate "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/miniprogram-simulate'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/components/list.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//@mpxjs/miniprogram-simulate 中 loadMpx 实现简单描述")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...省略一部分校验逻辑")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// .mpx 结尾文件会经过 mpx-jest 进行转换，输出 wxml,wxss,json,script")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" componentContent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("componentPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hasRegisterCache"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" componentContent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//....")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" id\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 部分 require('xx/xx.json') 等修改为直接赋值")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[t._v("对于组件/页面在存在大量组件引用的情况下，mock引用组件可大大提升单测的运行速度，原有miniprogram-simulate框架并没有提供mock功能，所以这里我们也自定义了mockComponent和clearMockComponent方法。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 代码在 @mpxjs/miniprogram-simulate 中")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mockComponentMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 判断是否是mock的组件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mockComponentMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    componentPath "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mockComponentMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("tagName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * mock usingComponents中的组件\n * @param compName\n * @param compDefinition\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mockComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("compName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" compDefinition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  mockComponentMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("compName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" compDefinition\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * 清除 component mock 数据\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearMockComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  mockComponentMap "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 单测中使用时")]),t._v("\nsimulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mockComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'list'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("template")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<view>component list</view>'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("3.封装定制test-utils工具集\n书写单测的过程中我们会有很多重复工作，比如创建挂载组件、代理接口、模拟多个组件、断言多个数据等，这里我们将这些共性的方法抽离封装成了 test-utils")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * 创建渲染并挂载自定义组件\n * @param {组件基于所在项目的相对路径,例如'src/subpackage/gulfstream/components/bottom/bottom.mpx'} compPath\n * @returns 用于测试的自定义组件\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createCompAndAttach")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" renderProps "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMpx")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" simulate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" renderProps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" comp\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * 借助xfetch构造mock请求\n * @param {待模拟url} mockUrl\n * @param {mock数据文件路径} mockFilePath\n */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxyFetch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("mockUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mockUrlData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" mockData\n  mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("xfetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fetch "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fn")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("options")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mockUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" mockUrlData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'string'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          mockData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMockContent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mockUrlData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          mockData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" mockUrlData\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("errno")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" mockData\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),s("p",[t._v("至此，Mpx框架的单元测试方案整体上就完备了，整体上的方案架构如下图所示\n"),s("img",{attrs:{src:"https://cdn.nlark.com/yuque/0/2022/png/116604/1645448762294-8e4cb0ab-bc09-4688-9360-ab4d67776af1.png#clientId=uc67aedb9-b0af-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=1164&id=u19264b9b&margin=%5Bobject%20Object%5D&name=Mpx%E5%8D%95%E6%B5%8B%E6%9E%B6%E6%9E%84%E5%9B%BE.png&originHeight=2327&originWidth=3335&originalType=binary&ratio=1&rotation=0&showTitle=false&size=7199152&status=done&style=none&taskId=uc2ecd51a-8419-46f1-a52a-1c9a8868ce1&title=&width=1667.5",alt:"Mpx单测架构图.png"}})]),t._v(" "),s("h2",{attrs:{id:"mpx组件单元测试实战"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx组件单元测试实战"}},[t._v("#")]),t._v(" Mpx组件单元测试实战")]),t._v(" "),s("p",[t._v("在上方介绍过整体的jest框架流程以及Mpx框架单元测试架构后，接下来我们着手进行 Mpx 框架开发的小程序组件的单元测试用例书写实战")]),t._v(" "),s("p",[t._v("使用 @mpxjs/cli 创建模版项目时选择使用单元测试，"),s("strong",[t._v("会自动生成有单测能力的模版项目")]),t._v("，和普通 Jest + miniprogram-simulate 搭建的原生小程序单测项目不同的是，transform 中添加了 Mpx 文件的处理，这里jest.config.js其他配置就不过多列出，可通过新创建项目进行查看。")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[t._v("\ttransform"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    '^.+\\\\.js$'"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" '<rootDir>/node_modules/babel-jest'"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    '^.+\\\\.mpx$'"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" '<rootDir>/node_modules/@mpxjs/mpx-jest'\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("首先我们列出一个组件示例，具体项目可点击链接查看:\n"),s("a",{attrs:{href:"https://github.com/Blackgan3/mpx-unit-test-demo",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/Blackgan3/mpx-unit-test-demo"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("首先对于组件单测的书写，我们希望有一套固定的规范，即所写的不同组件的单测能有一个相同的格式和顺序，这里我们建议的顺序为")]),t._v(" "),s("ul",[s("li",[t._v("组件初始化断言")]),t._v(" "),s("li",[t._v("组件初始化各种形态断言")]),t._v(" "),s("li",[t._v("组件变化- data|computed|watch变化断言")]),t._v(" "),s("li",[t._v("组件变化- 事件触发断言")]),t._v(" "),s("li",[t._v("组件销毁断言")])]),t._v(" "),s("p",[t._v("根据上方组件功能，首先我们建议对组件usingComponents 引入的组件进行模拟注册，这样可以节省组件渲染挂载的时间")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("beforeEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 进行usingComponents 组件 mock")]),t._v("\n    testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mockComponents")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'list'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("1.我们首先需要对组件初始化成功后进行各种组件形态预期，即组件初始化断言")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test component init correctly'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createCompAndAttach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" insData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n    testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkExpectedData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("insData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("someClassShowOne")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("someClassShowTwo")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("someClassShowTwoFlag")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("listData2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"手机"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"电视"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"电脑"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("key")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("compStatus")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("timeDeferFlag")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" domHTML "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 进行组件初始化dom快照测试")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("domHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toMatchSnapshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("上方我们使用工具方法创建并挂载生成组件实例，然后对组件data中key值和value进行预期断言，最后对组件初始化生成的HTML进行快照测试")]),t._v(" "),s("p",[t._v("2.组件初始化各种形态断言\n当组件的初始化数据源有多种形态，比如你的组件初始化数据是由接口或者其他重要的props传递过来决定的，那这里我们可以对不同的数据源组件的不同表现进行断言")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test comp different data'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 进行唯一数据源请求的接口代理")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxyFetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'api/somePackage/getCompData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createCompAndAttach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 目前 status 为 1，再次改变数据源代理")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxyFetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'api/somePackage/getCompData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchCompData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("compStatus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("compData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toEqual")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toMatchSnapshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 再次改变数据源代理，修改源数据")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxyFetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'api/somePackage/getCompData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchCompData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("compStatus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("compData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toEqual")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toMatchSnapshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("3.组件变化- props|data|computed|watch变化断言\n接下来我们需要对组件自身的 props|data|computed|watch 等属性变化时所触发的组件相应变化做出各种预期。")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 组件 props 改变后组件的各种形态预期")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test props different values correspond to different performance'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 传入初始渲染 props")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" successContent "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some successContent'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createCompAndAttach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      successContent\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" childComp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.successContent'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("childComp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBeDefined")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("successContent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBe")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("successContent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对最终的HTML进行快照测试")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("childComp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toMatchSnapshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当组件data中的someClassShowOne改变之后需要做的哪些预期")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当组件computed中的someCompShow改变之后需要做的预期")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ......")]),t._v("\n\t\n")])])]),s("p",[t._v("4.组件必不可少的会有方法，这里我们对示例组件的方法调用进行预期")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test someClassShowTwoFlag tap event trigger'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" fetchCompDataSpy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("spyOn")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fetchCompData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" changeSomeClassShowTwoFlagSpy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("spyOn")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'changeSomeClassShowTwoFlag'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("proxyFetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'api/somePackage/getCompData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("attach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("body"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" compData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" changeFlagViewComp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.changeFlagClass'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// dispatchEvent 为异步")]),t._v("\n    changeFlagViewComp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatchEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tap'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sleep")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("changeSomeClassShowTwoFlagSpy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBeCalledWith")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("fetchCompDataSpy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHaveBeenCalledTimes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("someClassShowTwo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBeTruthy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("someClassShowTwoFlag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBeTruthy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此处注意 非template中使用过到的data，获取更新后的值，从instance中获取")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toMatchSnapshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\t\n\n\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("it")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test someTimeDeferAction tap event trigger'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useFakeTimers")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("spyOn")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("global"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setTimeout'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" comp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" testUtils"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createCompAndAttach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" compData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" someTimeDeferActionSpy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("spyOn")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someTimeDeferAction'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" childComp "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.someTimeDeferActionClass'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    childComp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatchEvent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tap'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// comp.instance.someTimeDeferAction()")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" Promise"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("runAllTimers")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("instance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("compData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timeDeferFlag"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toBeTruthy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("someTimeDeferActionSpy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHaveBeenCalledTimes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("expect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toMatchSnapshot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    jest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useRealTimers")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("以上，我们对当前的示例组件完成了整体内容的单元测试书写，完整版单测文件可点击链接查看\n"),s("a",{attrs:{href:"https://github.com/Blackgan3/mpx-unit-test-demo/blob/master/test/components/example.spec.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/Blackgan3/mpx-unit-test-demo/blob/master/test/components/example.spec.js"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"结语"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#结语"}},[t._v("#")]),t._v(" 结语")]),t._v(" "),s("p",[t._v("通篇文章我们依次进行了前端常用单测框架简介，jest框架原理总结，小程序单元测试内部执行流程，最后介绍Mpx框架中单测能力的支持实现以及Mpx组件单测实战。")]),t._v(" "),s("p",[t._v("学习到了jest不仅仅是一个单元测试框架，你甚至可以使用它的各个工具库自己创建一个单元测试框架；以及感受到小程序场景下单元测试的差异化；Mpx框架层面也做了诸多改造来支撑单测功能的落地。")]),t._v(" "),s("p",[t._v("后续我们还会继续跟进推动业务中落地TDD规范，复杂逻辑组件中各种功能场景单测用例规范的补充等问题，持续在小程序单测方向深耕并有更好的规范总结产出。")]),t._v(" "),s("p",[t._v("参考文章：")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://jestjs.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://jestjs.io"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://jestjs.io/docs/architecture",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://jestjs.io/docs/architecture"),s("OutboundLink")],1)]),t._v(" "),s("li",[s("a",{attrs:{href:"https://medium.com/code-for-cause/jest-architecture-9870bbfcda44",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://medium.com/code-for-cause/jest-architecture-9870bbfcda44"),s("OutboundLink")],1)])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/63.b54aca3e.js b/docs-vuepress/.vuepress/dist/assets/js/63.b54aca3e.js
deleted file mode 100644
index 1eb30bb4c6..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/63.b54aca3e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[63],{411:function(s,t,e){"use strict";e.r(t);var r=e(4),a=Object(r.a)({},(function(){var s=this,t=s._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h1",{attrs:{id:"文档指南"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#文档指南"}},[s._v("#")]),s._v(" 文档指南")]),s._v(" "),t("p",[s._v("该文档使用vuepress生成")]),s._v(" "),t("h2",{attrs:{id:"该项目指南"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#该项目指南"}},[s._v("#")]),s._v(" 该项目指南")]),s._v(" "),t("p",[s._v("已安装依赖vuepress，并已经在package.json中新增写作和部署脚本")]),s._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 写作时")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("npm")]),s._v(" run docs:dev\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 部署时")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("npm")]),s._v(" run docs:build\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# 将在docs-vuepress/.vuepress/dist下生成静态文件，部署到相应服务器即可，部署参考下方链接")]),s._v("\n")])])]),t("h2",{attrs:{id:"编写格式指南"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#编写格式指南"}},[s._v("#")]),s._v(" 编写格式指南")]),s._v(" "),t("ul",[t("li",[s._v("对于引用的文档或资料使用"),t("a",{attrs:{href:""}},[s._v("链接")]),s._v("指明出处")]),s._v(" "),t("li",[s._v("中英文混排时为了阅读体验使用空格对于英文单词进行包裹，在标点符号边缘或句首时可省略该侧空格，例如：这是一个 word 而不是 world。")]),s._v(" "),t("li",[s._v("句首的英文单词首字母大写")]),s._v(" "),t("li",[s._v("Mpx 正确的写法为 "),t("code",[s._v("Mpx")]),s._v("，首字母大写，任何地方都应该这样书写，其余的专业名称参考原始的写法进行书写")]),s._v(" "),t("li",[s._v("除英文段落外，所有标点符号使用中文半角")]),s._v(" "),t("li",[s._v("能使用示例代码描述的部分都"),t("strong",[s._v("尽量添加示例代码")]),s._v("进行说明，show me the code")]),s._v(" "),t("li",[s._v("对于文档内容拓展说明的部分使用>引用的方式进行编写，like this")])]),s._v(" "),t("blockquote",[t("p",[s._v("我们来聊聊人生吧，这个地方你可以不看但没必要")])]),s._v(" "),t("h2",{attrs:{id:"参考"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#参考"}},[s._v("#")]),s._v(" 参考")]),s._v(" "),t("ul",[t("li",[t("a",{attrs:{href:"https://www.vuepress.cn/guide/deploy.html",target:"_blank",rel:"noopener noreferrer"}},[s._v("部署指南"),t("OutboundLink")],1)]),s._v(" "),t("li",[t("a",{attrs:{href:"https://www.vuepress.cn/",target:"_blank",rel:"noopener noreferrer"}},[s._v("Vuepress文档"),t("OutboundLink")],1)])])])}),[],!1,null,null,null);t.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/64.399e72b8.js b/docs-vuepress/.vuepress/dist/assets/js/64.399e72b8.js
deleted file mode 100644
index 37c6052240..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/64.399e72b8.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{410:function(t,s,a){"use strict";a.r(s);var r=a(4),n=Object(r.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"原生能力兼容"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原生能力兼容"}},[t._v("#")]),t._v(" 原生能力兼容")]),t._v(" "),s("h2",{attrs:{id:"custom-tab-bar"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab-bar"}},[t._v("#")]),t._v(" custom-tab-bar")]),t._v(" "),s("p",[t._v("Mpx 支持微信小程序原生自定义 tabbar ，关于自定义 tabbar 的详情请查看"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("在 Mpx 中使用自定义 tabbar ，需要在 app.mpx 的 json 部分的 tabBar 配置里的 "),s("code",[t._v("custom")]),t._v(" 为 true 。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"application/json"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"tabBar"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"custom"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"color"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#000000"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"selectedColor"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#000000"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"backgroundColor"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#000000"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pagePath"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./page/component/index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"text"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"组件"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pagePath"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./page/API/index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"text"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"接口"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("在 src 目录下创建 custom-tab-bar 目录，包含 index.mpx 文件，可以在该 index.mpx 文件中编写自定义 tabbar 的模板、js、样式和 json 部分，同时也支持原生写法。")]),t._v(" "),s("h2",{attrs:{id:"workers"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#workers"}},[t._v("#")]),t._v(" workers")]),t._v(" "),s("p",[t._v("Mpx 完全支持小程序原生的 worker ，需要在 app.mpx 文件中的 json 部分声明 worker 的目录，Mpx 会将其对应目录进行打包，输出到目标代码目录中。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"application/json"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 指定 worker 的目录")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"workers"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"workers"')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("更多详情可查看"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"云开发"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#云开发"}},[t._v("#")]),t._v(" 云开发")]),t._v(" "),s("p",[t._v("Mpx 支持微信小程序提供的原生云开发能力。如果需要在项目中使用云开发的能力，可以通过 Mpx 脚手架工具在初始化项目时选择支持云开发。如果需要支持云开发能力，在项目初始化时需要选择是微信平台下，且不能支持跨平台开发。如下图所示：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/cloud_v2.png",alt:"云开发"}})]),t._v(" "),s("p",[t._v("更多关于云开发相关可查看"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"useextendedlib"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#useextendedlib"}},[t._v("#")]),t._v(" useExtendedLib")]),t._v(" "),s("p",[t._v("Mpx 对于引入扩展库做了相关处理，可以在 app.mpx 中配置使用的扩展库，目前支持 weui 。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"useExtendedLib"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"weui"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("还需要在 Mpx 的配置文件配置 "),s("code",[t._v("externals")]),t._v(" 属性，来指定外部依赖，这样 Mpx 在进行打包时，会将其当做外部依赖进行打包。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("externals")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'weui'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/65.a8c627d3.js b/docs-vuepress/.vuepress/dist/assets/js/65.a8c627d3.js
deleted file mode 100644
index 22c1346ef9..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/65.a8c627d3.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[65],{415:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"分包异步化"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#分包异步化"}},[t._v("#")]),t._v(" 分包异步化")]),t._v(" "),s("blockquote",[s("p",[t._v("在小程序中，不同的分包对应不同的下载单元；因此，除了非独立分包可以依赖主包外，分包之间不能互相使用自定义组件或进行 require。\n「分包异步化」特性将允许通过一些配置和新的接口，使部分跨分包的内容可以等待下载后异步使用，从而一定程度上解决这个限制。")])]),t._v(" "),s("p",[t._v("具体功能介绍和功能目的可 "),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("点击查看"),s("OutboundLink")],1),t._v(", Mpx对于分包异步化功能进行了完整支持。")]),t._v(" "),s("p",[t._v("当前 Mpx 框架默认支持以下平台的分包异步化能力：")]),t._v(" "),s("ul",[s("li",[t._v("微信小程序")]),t._v(" "),s("li",[t._v("支付宝小程序")]),t._v(" "),s("li",[t._v("字节小程序")]),t._v(" "),s("li",[t._v("Web")])]),t._v(" "),s("p",[t._v("在非上述平台，异步分包代码会默认降级。")]),t._v(" "),s("h2",{attrs:{id:"跨分包自定义组件引用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#跨分包自定义组件引用"}},[t._v("#")]),t._v(" 跨分包自定义组件引用")]),t._v(" "),s("blockquote",[s("p",[t._v("一个分包使用其他分包的自定义组件时，由于其他分包还未下载或注入，其他分包的组件处于不可用的状态。通过为其他分包的自定义组件设置 占位组件，\n我们可以先渲染占位组件作为替代，在分包下载完成后再进行替换。")])]),t._v(" "),s("p",[t._v("在 Mpx 中使用跨分包自定义组件引用通过?root声明组件所属异步分包即可使用，示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--/packageA/pages/index.mpx--\x3e")]),t._v("\n// 这里在分包packageA中即可异步使用分包packageB中的hello组件\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"hello"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../../packageB/components/hello?root=packageB"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"simple-hello"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/hello"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"componentPlaceholder"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"hello"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"simple-hello"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("ul",[s("li",[t._v("注意项：目前该能力已在微信、支付宝和Web环境下支持，其他环境下框架将进行自动降级。")])]),t._v(" "),s("h2",{attrs:{id:"跨分包-js-代码引用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#跨分包-js-代码引用"}},[t._v("#")]),t._v(" 跨分包 JS 代码引用")]),t._v(" "),s("blockquote",[s("p",[t._v("一个分包中的代码引用其它分包的代码时，为了不让下载阻塞代码运行，我们需要异步获取引用的结果")])]),t._v(" "),s("p",[t._v("在 Mpx 中跨分包异步引用 JS 代码时，"),s("strong",[t._v("需要在引用的 JS 路径后拼接 JS 模块所在的分包名")]),t._v("，此外由于 "),s("strong",[t._v("require")]),t._v(" 不能传入多个参数的限制，在Mpx中无法使用回调函数的\n风格跨分包 JS 代码引用，只能使用 Promise 风格。")]),t._v(" "),s("p",[t._v("示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// subPackageA/index.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者使用 Promise 风格的调用")]),t._v("\nrequire"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../commonPackage/index.js?root=subPackageB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("pkg")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  pkg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPackageName")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 'common'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ul",[s("li",[t._v("注意项：目前该能力仅微信平台下支持，其他平台下框架将会自动降级")])]),t._v(" "),s("h2",{attrs:{id:"跨分包-store-引用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#跨分包-store-引用"}},[t._v("#")]),t._v(" 跨分包 Store 引用")]),t._v(" "),s("p",[t._v("在 Mpx 中如果想要跨分包异步引用 Store 代码，分为三个步骤")]),t._v(" "),s("ul",[s("li",[t._v("页面或父组件在 "),s("code",[t._v("created")]),t._v(" 钩子加载异步 Store")]),t._v(" "),s("li",[t._v("异步 Store 加载完成后再渲染使用异步 Store 的组件")]),t._v(" "),s("li",[t._v("子组件在框架内部生命周期 "),s("code",[t._v("BEFORECREATE")]),t._v(" 钩子中动态注入 computed 和 methods")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--pages/index/index.mpx--\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("store-list")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{showStoreList}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("store-list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("showStoreList")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      require"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("async")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../subpackages/sub2/store?root=sub2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("store")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("asyncStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sub2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("default\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当异步 Store 加载完成后再渲染使用异步 Store 的组件")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("showStoreList "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 子组件:store-list --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("BEFORECREATE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在 BEFORECREATE 钩子中动态注入 options")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("BEFORECREATE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取异步 Store实例")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" subStore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("asyncStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("sub2\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// computed 中 mapState、mapGetters 替换为 mapStateToInstance、mapGettersToInstance，最后一个参数必须传当前 component 实例 this")]),t._v("\n      subStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapStateToInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pagename'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      subStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGettersToInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pageDataGetter'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// methods 中 mapActions、mapMutations 替换为 mapMutationsToInstance、mapActionsToInstance，最后一个参数必须传当前 component 实例 this")]),t._v("\n      subStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutationsToInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'updatePageData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      subStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActionsToInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'updatePageName'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/66.7f19cc4b.js b/docs-vuepress/.vuepress/dist/assets/js/66.7f19cc4b.js
deleted file mode 100644
index fdb6c91e68..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/66.7f19cc4b.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[66],{412:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"自定义路径"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#自定义路径"}},[t._v("#")]),t._v(" 自定义路径")]),t._v(" "),s("p",[t._v("Mpx在构建时，如果引用的页面不存在于当前 app.mpx 所在的上下文中，例如存在于 npm 包中，为避免和本地声明的其他 page 路径冲突，Mpx 会对页面路径进行 hash 化处理，\n同时处理组件路径时也会添加 hash 防止路径名冲突，hash 化处理后最终的文件名是 name+hash+ext 的格式")]),t._v(" "),s("p",[t._v("与此同时，部分开发者希望能够对最终输出的页面路径和组件路径能够自定义，Mpx 对此也提供了相应的配置和Api来支持用户自定义路径")]),t._v(" "),s("h2",{attrs:{id:"自定义页面路径"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#自定义页面路径"}},[t._v("#")]),t._v(" 自定义页面路径")]),t._v(" "),s("p",[t._v("针对 Mpx 对 json 中非当前上下文的页面路径 hash 化的特性，如果为提升可读性需要避免路径 hash 化，可以使用该特性，具体为在\njson 中配置 pages 时，数组中支持放入 Object，对象中传入两个字段，src 字段表示页面地址，path 字段表示自定义页面路径")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("示例")]),t._v(":")])]),t._v(" "),s("p",[t._v("object风格的页面声明")]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 主包中的声明")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"src"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@someGroup/someNpmPackage/pages/view/index.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/somNpmPackage/index"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注意保持 path 的唯一性")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 分包中的声明")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"subPackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"test"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n           "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"src"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@someGroup/someNpmPackage/pages/view/test.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n           "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"path"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/somNpmPackage/test"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注意保持 path 的唯一性")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("使用声明中配置的页面路径进行跳转")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/pages/somNpmPackage/index'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/test/pages/somNpmPackage/test'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"customoutputpath"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#customoutputpath"}},[t._v("#")]),t._v(" customOutputPath")]),t._v(" "),s("p",[t._v("Mpx 框架 webpack-plugin 也提供了 customOutputPath 方法可以让用户进行页面和组件路径的自定义，\n可使用该方法对"),s("strong",[t._v("非原生组件和非当前文件context的页面")]),t._v("输出路径进行自定义")]),t._v(" "),s("p",[t._v("需要注意的是，该方法需要具有"),s("strong",[t._v("稳定性和唯一性")]),t._v("，即同样的输入不管什么时候执行都要有同样的返回以及不同的的输入一定会得到不同的输出。")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("示例")]),t._v("：")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("customOutputPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" hash"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" resourcePath")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// type: 资源类型(page | component | static)")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// name: 资源原有文件名")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// hash: 8位长度的hash串")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ext: 文件后缀(.js｜ .wxml | .json 等)")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// resourcePath: 资源路径")]),t._v("\n\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 输出示例： pages/testax34dde3/index.js")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("type "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'s'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" hash"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" ext"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("基于上方示例，你可以根据需要进行路径定制化，例如缩短hash、使用012代替文件名等各种自定义路径")])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/67.e57db97e.js b/docs-vuepress/.vuepress/dist/assets/js/67.e57db97e.js
deleted file mode 100644
index 9788731584..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/67.e57db97e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[67],{414:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"使用-dllplugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用-dllplugin"}},[t._v("#")]),t._v(" 使用 DllPlugin")]),t._v(" "),s("h3",{attrs:{id:"相关插件简述"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#相关插件简述"}},[t._v("#")]),t._v(" 相关插件简述")]),t._v(" "),s("h4",{attrs:{id:"dllplugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dllplugin"}},[t._v("#")]),t._v(" DllPlugin")]),t._v(" "),s("blockquote",[s("p",[t._v("DllPlugin 和 DllReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度，这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。并且会生成一个名为 manifest.json的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。")])]),t._v(" "),s("p",[t._v("DllPlugin 用来将我们某些长时间不变更的资源，独立拆分出去，之后项目的每次构建这部分资源都不需要重新编译，而是直接通过 DLLReferencePlugin 引入 dll bundle, 大大的节省了构建时间。")]),t._v(" "),s("p",[t._v("构建生成对应的 dll bundle 和 manifest.json 文件，manifest 文件中是模块 id 与请求路径的关系映射。")]),t._v(" "),s("h4",{attrs:{id:"dllreferenceplugin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dllreferenceplugin"}},[t._v("#")]),t._v(" DllReferencePlugin")]),t._v(" "),s("blockquote",[s("p",[t._v("这个插件是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖")])]),t._v(" "),s("p",[t._v("通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上，之后再在需要的时候通过内置的 "),s("strong",[t._v("webpack_require")]),t._v(" 函数来 require 他们。")]),t._v(" "),s("h3",{attrs:{id:"mpx中-dllplugin-的使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx中-dllplugin-的使用"}},[t._v("#")]),t._v(" Mpx中 DllPlugin 的使用")]),t._v(" "),s("p",[s("strong",[t._v("1.通过 @mpxjs/cli init 生成项目")])]),t._v(" "),s("p",[t._v("初始化选项中选择使用dll功能。")]),t._v(" "),s("p",[s("strong",[t._v("2.在项目中 build/dll.config.js 进行 dll 文件配置")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" path "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'path'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里是一个用法示例")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("file")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'..'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" file "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheGroups")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entries")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/@someNpmGroup/someNpmPkgName/dist/wx/static/js/common.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("root")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'testSomeDllFile'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entryOnly")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("webpackCfg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'none'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不使用任何默认优化选项")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("cacheGroups")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entries")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'node_modules/@someNpmGroup/someNpmPkgName/dist/ali/static/js/common.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("root")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'testSomeDllFile'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entryOnly")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("webpackCfg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'none'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不使用任何默认优化选项")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])]),s("p",[t._v("DllPlugin 的配置项详见"),s("a",{attrs:{href:"https://webpack.docschina.org/plugins/dll-plugin/",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档"),s("OutboundLink")],1),t._v("，Mpx 中相关配置项依据小程序环境做了相关调整。")]),t._v(" "),s("ul",[s("li",[s("p",[s("strong",[t._v("cacheGroups")])]),t._v(" "),s("ul",[s("li",[t._v("类型: "),s("code",[t._v("Array<object>")]),t._v(" "),s("ul",[s("li",[t._v("entries\n"),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("Array")]),t._v("dll")]),t._v(" "),s("p",[t._v("构建入 dll 的文件入口")])])])]),t._v(" "),s("li",[t._v("name\n"),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("String")])]),t._v(" "),s("p",[t._v("生成的 dll 文件名")])])])]),t._v(" "),s("li",[t._v("root\n"),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("String")])]),t._v(" "),s("p",[t._v("生成的 dll 文件夹名")])])])])])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("modes")])]),t._v(" "),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("Array")])]),t._v(" "),s("p",[t._v("构建 dll 产物对应的平台")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置多平台输出，例如：")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 微信平台")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 支付宝平台")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n")])])])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("entryOnly")])]),t._v(" "),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("Boolean")])]),t._v(" "),s("p",[t._v("如果为true，则仅暴露入口")]),t._v(" "),s("p",[t._v("这里建立使用entryOnly: true 配置")]),t._v(" "),s("blockquote",[s("p",[t._v("如果为 false 时，dllPlugin 中的 tree shakeing 功能就不再起作用")])]),t._v(" "),s("p",[t._v("另外如果为false，如果是将分包资源打入dll bundle，会存在将全局方法打入分包 dll 中的可能性，这样主包在使用该方法被映射到 dll bundle 中时，会因为分包未加载而报错")])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("webpackCfg")])]),t._v(" "),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("Object")])]),t._v(" "),s("p",[t._v("构建 dll 时可添加其他的 webpack 配置")])])])]),t._v(" "),s("li",[s("p",[s("strong",[t._v("format")])]),t._v(" "),s("ul",[s("li",[s("p",[t._v("类型: "),s("code",[t._v("Boolean")])]),t._v(" "),s("p",[t._v("生成的 manifest json 文件 是否进行格式化")])])])])]),t._v(" "),s("h3",{attrs:{id:"mpx-中对-dllplugin-配置所做的相关处理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mpx-中对-dllplugin-配置所做的相关处理"}},[t._v("#")]),t._v(" Mpx 中对 DllPlugin 配置所做的相关处理")]),t._v(" "),s("p",[t._v("正常使用 DllPlugin 是单独创建一个 webpack 配置文件，配置文件中加入 DllPlugin，然后运行 webpack 编译构建生成 dll 文件。")]),t._v(" "),s("p",[t._v("考虑到 Mpx 在编译时需要跨平台输出，所以 Mpx 的配置项是 "),s("code",[t._v("Array<object>")]),t._v(" 类型，同时增加了 modes 配置项，可以自主控制输出不同平台版本 dll 文件。")]),t._v(" "),s("p",[t._v("构建生成 dll bundle 的主要逻辑在 buildDll.js 中，通过对 dll.config 中数组的循环处理，生成 webpackCfgs 数组。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("dllConfigs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("dllConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" entries "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getDllEntries")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dllConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cacheGroups"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dllConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("modes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 根据配置的 mode 以及 cacheGroups 生成 entry，结果例如：")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n  *{\n        'somePkgRoot/wx.somePkgName': [\n            '/Users/didi/didiProject/mp-apphome/node_modules/@someNpmGroup/somNpmName/dist/wx/static/js/common.js'\n        ]\n    }\n  **/")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Object"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("keys")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    webpackCfgs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" entries"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("output")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dllPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("filename")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'lib'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dllName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("libraryTarget")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commonjs2'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'production'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("webpack"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DllPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dllPath"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" manifestName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" dllConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("format"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entryOnly")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" dllConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("entryOnly"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" dllName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commonjs2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("context\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dllConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("webpackCfg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("生成的 webpackCfgs 数组配置项，传入 webpack 执行，最终在 dll 文件夹下生成 dll bundle 和 manifest.json 文件")]),t._v(" "),s("p",[t._v("之后在 build.js 中使用 DllReferencePlugin 将编译中的依赖项与 dll bundle 的模块 id 关联起来，这里我们通过多个 DllReferencePlugin 实例来将可能存在的多个 manifest 文件关联引入，具体在项目 build.js 文件中：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("plugins"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("webpack"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DllReferencePlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" config"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//（绝对路径） manifest (或者是内容属性)中请求的上下文")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("manifest")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" manifest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("content "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 请求到模块 id 的映射（默认值为 manifest.content）")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("DllReferencePlugin 的其他配置项详见"),s("a",{attrs:{href:"https://webpack.docschina.org/plugins/dll-plugin/",target:"_blank",rel:"noopener noreferrer"}},[t._v("文档"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"总结"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#总结"}},[t._v("#")]),t._v(" 总结")]),t._v(" "),s("p",[t._v("综上所述，在 Mpx 中使用 dllPlugin 时，只需要进行 build/dll.config.js 文件的配置，然后通过 build:dll 命令生成 dll bundle，之后就可以正常的进行代码的 build 了。不过每次 build 需要检查下项目中使用的 npm 包版本与 dll bundle 中的 npm 包版本是否一致，避免因为包版本的滞后更新导致线上 bug，这里我们后续也会提供相应的包版本比对插件。")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/68.ebe4213c.js b/docs-vuepress/.vuepress/dist/assets/js/68.ebe4213c.js
deleted file mode 100644
index 20199b86b5..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/68.ebe4213c.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[68],{417:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"国际化i18n"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#国际化i18n"}},[t._v("#")]),t._v(" 国际化i18n")]),t._v(" "),s("p",[t._v("Mpx 支持国际化 i18n，使用方式及支持能力与 vue-i18n 非常接近。")]),t._v(" "),s("p",[t._v("Mpx 自带 i18n 能力，无需额外安装插件。由于小程序模板中的 i18n 函数是通过 wxs 编译注入进行实现，我们需要将 i18n 配置传入到 MpxWebpackPlugin 中来使 i18n 生效，这是与 vue-i18n 最大的区别。")]),t._v(" "),s("h2",{attrs:{id:"开启-i18n"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开启-i18n"}},[t._v("#")]),t._v(" 开启 i18n")]),t._v(" "),s("p",[t._v("I18n 配置传入到 MpxWebpackPlugin 选项中即可生效，额外支持 messagesPath 配置，通过模块路径传入语言集，其余配置参考 vue-i18n。")]),t._v(" "),s("p",[t._v("由于小程序的双线程特性，在选项式 API 场景下，默认情况下模板中调用的 i18n 函数由 wxs 实现，而 js 中调用的 i18n 函数由 js 实现，该设计能够将视图层和逻辑层之间的通信开销降至最低，得到最优的性能表现，但是由于 wxs 和 js 之间无法共享数据，在最终的编译产物中语言集会同时存在于 js 和 wxs 当中，对包体积产生负面影响。")]),t._v(" "),s("p",[t._v("为了平衡上述影响，自2.6.56版本之后我们新增了编译配置项 "),s("code",[t._v("i18n.useComputed")]),t._v(" ，改配置项开启的情况下对于模板中的 i18n 调用将不再使用 wxs 实现，而是通过在 computed 进行实现，语言集将只存在于 js 逻辑层当中，对于节省了包体积的同时双线程通信成本也会增加，用时间换空间，具体是否开启可以根据实际项目的使用情况及资源瓶颈由开发者自行决定，\n另外需要注意的是，"),s("strong",[t._v("在 Mpx 组合式 API 场景下 i18n 仅支持通过 computed 实现")]),t._v("。")]),t._v(" "),s("blockquote",[s("p",[t._v("开启 "),s("code",[t._v("i18n.useComputed")]),t._v(" 配置时，由于 computed 技术架构的限制，i18n 函数无法对模板循环渲染中的 "),s("code",[t._v("item")]),t._v(" 或 "),s("code",[t._v("index")]),t._v(" 生效。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// messages既可以通过对象字面量传入，也可以通过messagesPath指定一个js模块路径，在该模块中定义配置并导出，dateTimeFormats/dateTimeFormatsPath和numberFormats/numberFormatsPath同理")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} world'")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'zh-CN'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} 世界'")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("useComputed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认 false,  此开关将模板中的 i18n 函数注入 computed，在包体积空间紧张的情况下可以使用")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// messagesPath: path.resolve(__dirname, '../src/i18n.js')")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"options-api-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#options-api-usage"}},[t._v("#")]),t._v(" 选项式 API 中使用 ")]),t._v(" "),s("p",[t._v("同 vue-i18n，在组件中直接调用翻译函数使用，由于 wxs 执行环境的限制，目前 js 中支持了 vue-i18n 中 $t/$tc/$te 翻译函数，$d/$n 暂不支持，详细使用方法可参考 vue-i18n。")]),t._v(" "),s("p",[t._v("此外类似于 vue-i18n，在组件模板的 Mustache 插值中直接调用翻译函数。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{isMessageExist}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('message.hello', { msg: 'hello' }) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message.hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("msg")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isMessageExist")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$te")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message.hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"composition-api-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#composition-api-usage"}},[t._v("#")]),t._v(" 在组合式 API 中使用 ")]),t._v(" "),s("p",[t._v("在组合式 API setup 中，"),s("code",[t._v("this")]),t._v(" 不是该活跃实例的引用，为了继续使用 i18n 的相关能力，我们需要一个新的方法来替代 "),s("code",[t._v("this")]),t._v("\n，这里 Mpx 提供 "),s("code",[t._v("useI18n")]),t._v(" 方法支持对 i18n 相关功能的使用。")]),t._v(" "),s("h3",{attrs:{id:"开始使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开始使用"}},[t._v("#")]),t._v(" 开始使用")]),t._v(" "),s("p",[t._v("同 vue-i18n, "),s("strong",[t._v("useI18n")]),t._v(" 返回一个 i18n 实例，该实例提供文案翻译 API 例如 "),s("strong",[t._v("t")]),t._v(" 方法，相较于选项式 API 中的翻译方法，在组合式 API 中有部分变化。")]),t._v(" "),s("ol",[s("li",[t._v("翻译方法 $t/t 和 $tc/tc，在组合式 API 中统一使用翻译方法 t")]),t._v(" "),s("li",[t._v("翻译方法 $te/te，在组合式 API 中统一使用 te")]),t._v(" "),s("li",[t._v("翻译方法 $tm/tm，在组合式 API 中统一使用 tm")])]),t._v(" "),s("p",[s("code",[t._v("useI18n")]),t._v(" 方法的执行必须在 "),s("code",[t._v("setup")]),t._v(" 中的顶层。")]),t._v(" "),s("p",[t._v("i18n 同时也支持传入参数，例如 "),s("code",[t._v("locale")]),t._v(" 和 "),s("code",[t._v("fallbackLocale")]),t._v("，\n关于实例的更多信息可移步API章节 "),s("RouterLink",{attrs:{to:"/api/extend.html#usei18n"}},[t._v("查看")])],1),t._v(" "),s("p",[t._v("在不给 "),s("code",[t._v("useI18n")]),t._v(" 传入任何参数时，i18n 实例的上下文将是全局作用域，即翻译函数 "),s("code",[t._v("t")]),t._v(" 引用的文案来源是我们在 "),s("code",[t._v("MpxWebpackPlugin")]),t._v("\n中配置的文案。")]),t._v(" "),s("p",[t._v("通过在 "),s("strong",[t._v("setup")]),t._v(" 中返回翻译函数 "),s("strong",[t._v("t")]),t._v("，我们可以在模版中直接使用它:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('{{t("message.hello")}}'),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 从返回中解构出 t 方法")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      t\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 t 方法返回挂载到渲染实例")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意事项：")])]),t._v(" "),s("p",[t._v("组合式 API 中，Mpx 在编译时对模版进行 ast 遍历分析，检测到对应的翻译函数 t/tc/te 后，将其转换为 computed 方法注入，computed 中调用 setup 中返回的 t 方法进行文案获取，由此引申出来两个注意项：")]),t._v(" "),s("p",[t._v("1.不可对从 "),s("strong",[t._v("useI18n")]),t._v(" 中解构出的 "),s("strong",[t._v("t")]),t._v(" 方法进行重命名，否则模版中将无法正确获取文案。")]),t._v(" "),s("p",[t._v("下方即为错误示例：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t1('message.hello')}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("t")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" t1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                t1\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("2.模版中的 t/tc/te 方法都是使用 computed 实现，由于 computed 技术架构的限制，i18n 函数无法对模板循环渲染中的 "),s("code",[t._v("item")]),t._v(" 或 "),s("code",[t._v("index")]),t._v(" 生效。")]),t._v(" "),s("p",[t._v("例如下方示例将会报错 computed 中找不到 item")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--tc方法使用 computed 实现，最终将无法正确获取item--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{listData}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{tc('message.hello', {msg: item})}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" listData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("tc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                tc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                listData\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"scope"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#scope"}},[t._v("#")]),t._v(" 作用域 ")]),t._v(" "),s("p",[t._v("在 Mpx 组合式 API 中，"),s("code",[t._v("useI18n")]),t._v(" 返回的 i18n 实例默认是指向全局作用域，文案来源即为 "),s("code",[t._v("MpxWebpackPlugin")]),t._v(" 中配置的 messages。")]),t._v(" "),s("p",[t._v("如果需要在组合式 API 中使用本地作用域，需要给 "),s("code",[t._v("useI18n")]),t._v(" 传入响应的配置项，"),s("code",[t._v("useI18n")]),t._v(" 将根据传入的 locale、messages 等配置项来生成一个全新的\ni18n 实例，该实例的文案源即为用户传入的 "),s("code",[t._v("messages")]),t._v("。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--将展示本地作用域中的文案 哈喽--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('message.hello')}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createPage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'哈喽'")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                t\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意事项：")])]),t._v(" "),s("p",[t._v("在给 "),s("code",[t._v("useI18n")]),t._v(" 传参时，若只传入 "),s("code",[t._v("messages")]),t._v(" 属性，则 "),s("code",[t._v("locale")]),t._v(" 会自动 fallback 到全局 locale，修改 "),s("code",[t._v("useI18n")]),t._v(" 返回的 "),s("code",[t._v("locale")]),t._v(" ref 值将改变本地作用域  locale。")]),t._v(" "),s("p",[t._v("若只传入 "),s("code",[t._v("locale")]),t._v(" 属性，不传入 "),s("code",[t._v("messages")]),t._v("，则会自动 fallback 到全局 "),s("code",[t._v("locale")]),t._v(" 和 "),s("code",[t._v("messages")]),t._v("，且修改 "),s("code",[t._v("useI18n")]),t._v(" 返回的 "),s("code",[t._v("locale")]),t._v(" 对"),s("strong",[t._v("全局和本地都不会起作用")]),t._v("，\n因此建议不要单独传入 "),s("code",[t._v("locale")]),t._v(" 属性，若想使用本地 i18n 实例，则必须传入 "),s("code",[t._v("messages")]),t._v(" 属性。")]),t._v(" "),s("p",[t._v("在 Mpx 选项式 API 中，i18n 实例仅有全局 global i18n 实例，所有 i18n 翻译方法 $t/$tc/$te/$tm 的执行上下文都为全局作用域。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{$t('message.hello')}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createPage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLoad")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$i18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n             * locale 全局 locale\n             * fallbackLocale 全局兜底 locale\n             */")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 作用域为 global scope")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$t")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message.name'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"动态变更locale"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#动态变更locale"}},[t._v("#")]),t._v(" 动态变更locale")]),t._v(" "),s("p",[t._v("在 Mpx 组合式 API 中，你可以通过修改 "),s("code",[t._v("useI18n")]),t._v(" 返回的 "),s("code",[t._v("locale")]),t._v(" 来更换局部或全局语言，或者更改 mpx.i18n 中的 locale 属性更换全局语言集，并自动更新视图。")]),t._v(" "),s("ul",[s("li",[t._v("变更全局 locale")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 局部locale变更，生效范围为当前组件内")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" locale"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 全局locale变更，生效范围为项目全局，locale 是一个 ref 变量")]),t._v("\n      locale"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 或者通过mpx.i18n来修改，也能起到全局locale修改作用")]),t._v("\n      mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("i18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("locale "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        t\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("  \n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")]),t._v(" 这里通过 mpx.i18n 修改 locale 时，为和 vue3 保持一直，需要通过 global 属性来获取 locale，同时 locale 也是一个 ref 变量，需要使用 "),s("code",[t._v(".value")]),t._v(" 来修改。")]),t._v(" "),s("ul",[s("li",[t._v("变更局部 locale")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 局部locale变更，生效范围为当前组件内")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" locale"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'zh-CN'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'你好'")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 局部locale变更，生效范围为当前组件/页面，locale 是一个 ref 变量")]),t._v("\n      locale"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-CN'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        t\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("  \n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在选项式 API 中，仅支持修改全局 locale, 不支持修改局部 locale。")]),t._v(" "),s("p",[t._v("在 Vue3 中，选项式 API 中直接修改 this.$i18n.locale 无任何作用，这里为和 Vue3 拉齐建议使用 mpx.i18n 来进行 locale 修改。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 修改全局 locale")]),t._v("\n      mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("i18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("locale "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"动态更新语言集"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#动态更新语言集"}},[t._v("#")]),t._v(" 动态更新语言集")]),t._v(" "),s("p",[t._v("在组合式 API 中默认支持动态更新语言集。")]),t._v(" "),s("p",[t._v("在选项式 API 中，当模板中没有使用 i18n 函数或开启了 "),s("code",[t._v("i18n.useComputed")]),t._v(" 配置时, 可以对语言集进行动态更新。")]),t._v(" "),s("p",[t._v("我们提供了 "),s("code",[t._v("mergeLocaleMessage")]),t._v(" 对语言集进行动态扩展，"),s("code",[t._v("setLocaleMessage")]),t._v(" 对语言集进行覆盖更新。")]),t._v(" "),s("p",[t._v("使用方式如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--2 秒之后展示 哈喽--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('message.hello')}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--1秒之后展示 hello1, 2秒之后展示为 恭喜你--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{t('message.hello1')}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" useI18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mergeLocaleMessage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" setLocaleMessage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 新增一门语言或针对特定语言更新语言集")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mergeLocaleMessage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello1")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setLocaleMessage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'哈喽'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello1")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'恭喜你'")]),t._v("\n                    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" t "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("同理我们在选项式 API 中可以使用 "),s("code",[t._v("mpx.i18n.global.mergeLocaleMessage")]),t._v(", "),s("code",[t._v("mpx.i18n.global.setLocaleMessage")]),t._v(" 方法来动态更新或扩展语言集。")]),t._v(" "),s("h2",{attrs:{id:"平台支持"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#平台支持"}},[t._v("#")]),t._v(" 平台支持")]),t._v(" "),s("p",[t._v("目前支持业内所有小程序平台(微信/支付宝/qq/百度/头条)。")]),t._v(" "),s("p",[t._v("在输出 web 时，构建会自动引入 vue-i18n 并进行安装配置，无需修改任何代码即可按照预期正常工作。")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/69.2d309866.js b/docs-vuepress/.vuepress/dist/assets/js/69.2d309866.js
deleted file mode 100644
index 19f6e5e323..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/69.2d309866.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[69],{416:function(t,s,a){"use strict";a.r(s);var n=a(4),r=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"图像资源处理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#图像资源处理"}},[t._v("#")]),t._v(" 图像资源处理")]),t._v(" "),s("blockquote",[s("p",[t._v("Mpx在小程序开发中提供了很好的图像资源处理能力，让开发者可以愉快地在项目中使用图片。")])]),t._v(" "),s("h2",{attrs:{id:"图像资源引入有三种方式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#图像资源引入有三种方式"}},[t._v("#")]),t._v(" 图像资源引入有三种方式")]),t._v(" "),s("ol",[s("li",[t._v("Template 中通过 image src 指定图像资源\n"),s("ul",[s("li",[t._v("直接指定图像的远程资源地址")]),t._v(" "),s("li",[t._v("资源为本地路径，若配置 publicPath，则 publicPath 与 webpack loader 中配置的 name 进行拼接")])])]),t._v(" "),s("li",[t._v("Style 中通过 src 指定图像资源")]),t._v(" "),s("li",[t._v("Style 中通过 class 指定图像资源")])]),t._v(" "),s("p",[t._v("Wxss文件中只能用 CDN 地址或 Base64, 针对第二、三种方式引入的资源，可以通过配置决定使用 CDN 还是 Base64，且 Mpx 中图像资源处理会优先检查 Base64，具体配置参数如下：")]),t._v(" "),s("ul",[s("li",[t._v("publicPath：资源存放 CDN 地址，可选")]),t._v(" "),s("li",[t._v("limit: 资源大小限制，可根据资源的大小判断走 Base64 还是 CDN， 可选")]),t._v(" "),s("li",[t._v("publicPathScope: 限制输出 CDN 图像资源的范围，可选 styleOnly、all，默认为 styleOnly。（图像引用方式分两大类 Template, Style）")]),t._v(" "),s("li",[t._v("outputPathCDN: 设置 CDN 图像对应的本地相对地址（相对于当前编译输出目录的地址，如 dist,或者 dist/wx），可写脚本将本地图像批量上传到 CDN")])]),t._v(" "),s("h2",{attrs:{id:"base64-图像资源"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#base64-图像资源"}},[t._v("#")]),t._v(" Base64 图像资源")]),t._v(" "),s("p",[t._v("图像转 Base64的两种方式:")]),t._v(" "),s("ul",[s("li",[t._v("未配置 publicPath")]),t._v(" "),s("li",[t._v("配置了 publicPath，且用户未自定义图像处理 fallback query，且未配置 limit 或图像资源未超过 limit 的限制时")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.config.js 配置,未配置 publicPath 必走 Base64")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" webpackConfig "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("@mpxjs/cli 3.x 版本配置如下")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("<style>\n  .logo")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v("'~images/logo.png'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n</style>\n")])])]),s("h2",{attrs:{id:"cdn-图像资源"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cdn-图像资源"}},[t._v("#")]),t._v(" CDN 图像资源")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.config.js 配置")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" webpackConfig "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CDN 地址")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1024'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Base64 的最大长度，超过则走 CDN ")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("@mpxjs/cli 3.x 版本配置如下")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CDN 地址")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1024'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Base64 的最大长度，超过则走 CDN ")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])]),t._v(" "),s("h2",{attrs:{id:"cdn-图像资源输出本地目录，用户自行批量上传到cdn服务器"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cdn-图像资源输出本地目录，用户自行批量上传到cdn服务器"}},[t._v("#")]),t._v(" CDN 图像资源输出本地目录，用户自行批量上传到CDN服务器")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.config.js 配置")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" webpackConfig "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPathScope")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'styleOnly'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("outputPathCDN")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./cdnImages'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("@mpxjs/cli 3.x 版本配置如下")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPathScope")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'styleOnly'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("outputPathCDN")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./cdnImages'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])]),t._v(" "),s("blockquote",[s("p",[t._v("备注:"),s("br"),t._v("\n图像默认编译后会输出到 img 目录下, 当设置 outputPathCDN 后，输出的本地图像地址为 outputPathCDN + img/图像.png"),s("br"),t._v("\nCND 文件地址为 publicPath + img/图像.png，所以当使用脚本上传到 CDN 时，路径要带上 img")])]),t._v(" "),s("h2",{attrs:{id:"用户自定义图像处理方式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#用户自定义图像处理方式"}},[t._v("#")]),t._v(" 用户自定义图像处理方式")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.config.js 配置")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" webpackConfig "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token regex"}},[s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),s("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.(png|jpe?g|gif|svg)$")]),s("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MpxWebpackPlugin"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CDN 地址")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1024'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Base64 的最大长度，超过则走 CDN,")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fallback")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'file-loader'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认走 file-loader")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("@mpxjs/cli 3.x 版本配置如下")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vue/cli-service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("urlLoader")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'img/[name][hash].[ext]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CDN 地址")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("publicPath")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://a.com/'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("limit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'1024'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Base64 的最大长度，超过则走 CDN,")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fallback")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'file-loader'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认走 file-loader")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*不走 Base64 的情况下*/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("<style>\n  .logo2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v("'~images/logo.png?fallback=true'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n</style>\n")])])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/7.01e4e942.js b/docs-vuepress/.vuepress/dist/assets/js/7.01e4e942.js
deleted file mode 100644
index 4c62302242..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/7.01e4e942.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{344:function(n,t,a){},363:function(n,t,a){"use strict";a(344)},377:function(n,t,a){"use strict";a.r(t);var o={components:{ParentLayout:a(357).a}},s=(a(363),a(4)),u=Object(s.a)(o,(function(){var n=this._self._c;return n("div",{staticClass:"container"},[n("ParentLayout")],1)}),[],!1,null,null,null);t.default=u.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/70.60ae83e6.js b/docs-vuepress/.vuepress/dist/assets/js/70.60ae83e6.js
deleted file mode 100644
index cf7f549257..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/70.60ae83e6.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[70],{418:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"使用-mixin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用-mixin"}},[t._v("#")]),t._v(" 使用 mixin")]),t._v(" "),s("p",[t._v("Mpx 提供了一套完善的 mixin 机制，有人可能要问，原生小程序中已经支持了 behaviors，为何我们还需要提供 mixin 呢？主要有以下两点原因：")]),t._v(" "),s("ol",[s("li",[t._v("Behaviors 是平台限度的，只有在部分小程序平台中可以使用，而且内置 behaviors 承载了除了 mixin 外的其他功能，框架提供的 mixin 是一个与平台无关的基础能力；")]),t._v(" "),s("li",[t._v("Behaviors 只有组件支持使用，页面不支持，而且只支持局部声明，框架提供的 mixin 与组件页面无关，且支持全局 mixin 声明。")])]),t._v(" "),s("h2",{attrs:{id:"局部-mixin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#局部-mixin"}},[t._v("#")]),t._v(" 局部 Mixin")]),t._v(" "),s("p",[s("code",[t._v("App")]),t._v("、"),s("code",[t._v("Page")]),t._v("、"),s("code",[t._v("Component")]),t._v(" 接收 mixins 参数,参数格式为[Mixin1(Object),Mixin2(Object)]")]),t._v(" "),s("blockquote",[s("p",[t._v("Mixin 混合实例对象可以像正常的实例对象一样包含选项，相同选项将进行逻辑合并。举例：如果 mixin1 包含一个钩子 ready,而创建组件 Component 也有一个钩子 ready，两个函数将被调用。 Mixin 钩子按照传入顺序(数组顺序)依次调用，并在调用组件自身的钩子之前被调用。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mixin.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'phone'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手机'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'tv'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电视'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'computer'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电脑'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mixins ready:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("phone"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mixins "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../common/mixins'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mixins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("mixins"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手机'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电视'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电脑'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'component ready:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("phone"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("// 输出结果为\nmixins ready: 手机\ncomponent ready: 手机\n")])])]),s("h2",{attrs:{id:"全局-mixin"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#全局-mixin"}},[t._v("#")]),t._v(" 全局 Mixin")]),t._v(" "),s("p",[t._v("Mpx 中可以使用 "),s("code",[t._v("mpx.injectMixins")]),t._v(" 方法配置全局 mixin，能够按照 App / 组件 / 页面维度自由配置，简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 第一个参数为 mixins，可以混入任意配置，第二个参数为混入生效范围，可传递 'app' / 'page' / 'component' 字符串或由其组成的数组")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("injectMixins")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("customData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'123'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'page'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mpx.mixin 为 mpx.injectMixins 的别名，混入单个 mixin 时可以直接传递对象，生效范围可传递字符串")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useCustomData")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("customData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'component'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当未传递生效范围时默认为全局生效，对 app / page / component 都生效")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mixin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("processedCustomData")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("customData "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'321'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/71.188d7bca.js b/docs-vuepress/.vuepress/dist/assets/js/71.188d7bca.js
deleted file mode 100644
index d3764227d2..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/71.188d7bca.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[71],{421:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"使用npm"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用npm"}},[t._v("#")]),t._v(" 使用npm")]),t._v(" "),s("p",[t._v("Mpx项目中用户能够方便自然地引用 npm 资源，像 web 开发中一样")]),t._v(" "),s("p",[t._v("在 Mpx 中使用 npm，通过 Webpack 插件在编译时将引用的 npm 包输出为小程序文件，所以 Mpx 的构建产物不需要在开发工具再次进行 npm 构建。")]),t._v(" "),s("h2",{attrs:{id:"下载npm包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#下载npm包"}},[t._v("#")]),t._v(" 下载npm包")]),t._v(" "),s("p",[t._v("在项目 package.json 所在的目录中执行命令安装项目 npm 包")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("npm install\n")])])]),s("p",[t._v("在项目中安装某个第三方 npm 包")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("npm install mpx"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("ui\n")])])]),s("p",[t._v("如若之前未接触过 npm，请翻阅 "),s("a",{attrs:{href:"https://docs.npmjs.com/about-npm/index.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("官方 npm 文档"),s("OutboundLink")],1),t._v(" 进行学习。")]),t._v(" "),s("h2",{attrs:{id:"引用npm模块"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#引用npm模块"}},[t._v("#")]),t._v(" 引用npm模块")]),t._v(" "),s("p",[t._v("直接使用模块路径引用，可以直接通过 ES6 的 import 语法来引用 JS 文件，并且无需额外执行npm构建")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n")])])]),s("h2",{attrs:{id:"引用npm组件-页面"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#引用npm组件-页面"}},[t._v("#")]),t._v(" 引用npm组件/页面")]),t._v(" "),s("p",[t._v("在页面 script 标签中的 json 对象中使用 usingComponents 引入第三方组件，直接使用模块路径引用")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"application/json"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"mpx-button"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpx-ui/src/components/button"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("在 app.mpx 中的 script 标签中的 pages/packages/subPackages 中都可以声明引用 npm 包页面")]),t._v(" "),s("p",[t._v("示例:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"application/json"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@someGroup/someNpmPackage/pages/view/index.mpx"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("以上这种写法为避免和本地页面路径冲突，Mpx 会将路径进行 hash 化处理，所以使用页面时要在路径后添加 ?resovle 标识符，编译时会被处理成正确的、完整的绝对路径。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" packageIndexPage "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@someGroup/someNpmPackage/pages/view/index.mpx?resolve'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" packageIndexPage\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果你觉得上述引用 npm 包页面的方式太繁琐，我们也提供了另一种 page 声明方式，可以让你自定义页面路径")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 声明")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"src"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@someGroup/someNpmPackage/pages/view/index.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"path"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/somNpmPackage/index"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注意保持 path 的唯一性")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以直接使用你自己声明的 path")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/pages/somNpmPackage/index'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("同理，我们在使用 subPackages 分包时也可以使用 pages 对象的方式")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"subPackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"test"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n       "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"src"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@someGroup/someNpmPackage/pages/view/index.mpx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"path"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/somNpmPackage/index"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注意保持 path 的唯一性")]),t._v("\n       "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/test/pages/somNpmPackage/index'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("同时使用 Mpx 引用npm组件/页面时包体积比原生中的 npm 规范更优，好处有：")]),t._v(" "),s("p",[t._v("Mpx npm构建的优势主要有两点：1. 按需构建；2. 支持分包")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("小程序的 npm 规范场景下，组件库需声明miniprogram_dist目录，执行构建npm命令，将整个miniprogram_dist中的代码copy到项目的miniprogram_npm目录下。而 Mpx 的 npm 包引用，借助 Webpack 强大的构建分析能力，loader 在解析 json 中的 pages 域和 usingComponents 域中的路径时，通过动态创建 entry 的方式把这些文件添加进来，同时按需加载被确切使用的文件，降低包体积，借助  CommonsChunkPlugin/SplitChunksPlugin 的能力将复用的 js 模块抽出到一个外部公用的 bundle 中。")])]),t._v(" "),s("li",[s("p",[t._v("原生小程序的构建中，所有的 npm 模块都会输出到主包中，Mpx 在编译中，还会进行分包处理，对组件和静态资源，根据用户的分包配置，串行对主包和各个分包进行构建，标记出每个组件及静态资源的归属，根据小程序资源访问策略将其输出到主包或者分包中。")])])]),t._v(" "),s("p",[t._v("所以使用 Mpx 框架开发小程序，可以享受最舒适最自然最好用的 npm 机制，详细原理介绍请移步"),s("RouterLink",{attrs:{to:"/guide/understand/compile.html"}},[t._v("Mpx编译构建原理")])],1),t._v(" "),s("h2",{attrs:{id:"兼容原生小程序路径规范"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#兼容原生小程序路径规范"}},[t._v("#")]),t._v(" 兼容原生小程序路径规范")]),t._v(" "),s("p",[t._v("组件或者页面的引入有绝对路径和相对路径，或者引入 npm 第三方包，原生小程序中，我们通过相对路径引入一个组件时")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"component-tag-name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"path/to/the/custom/component"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("这种路径形式在 webpack 路径规范中会被当成 npm 包路径来处理，所以要对原生小程序的路径规范做下兼容。")]),t._v(" "),s("p",[t._v("Mpx 提供了两种路径规范的配置模式可供大家选择，具体的使用方式为：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resolveMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'webpack'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在 MpxWebpackPlugin 插件中设置 resolveMode 项，默认值为 webpack，可选值有 webpack/native，推荐使用 webpack 模式，更舒服一些，配置项为 webpack 时，json 中的 pages/usingComponents 等需要写相对路径，但是也可以直接写 npm 包路径。例如：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"component-tag-name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./path/to/the/custom/component"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 内部组件路径")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"mpx-button"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpx-ui/src/components/button"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// npm 包路径")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v('如果希望使用类似小程序原始那种"绝对路径"，可以将 resolveMode 设置为 native，但是 npm 路径需要在前面加一个~，类似 webpack 的样式引入规范，同时必须配合 projectRoot 参数提供项目根目录地址。')]),t._v(" "),s("p",[t._v("resolveMode 为 native 时的使用示例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resolveMode")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'native'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当resolveMode为native时可通过该字段指定项目根目录")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("projectRoot")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" path"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__dirname"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 项目page.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"mpx-button"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"~mpx-ui/src/components/button"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// npm 包路径")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"component-tag-name"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"path/to/the/custom/component"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 内部组件路径")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/72.3f7bfd0d.js b/docs-vuepress/.vuepress/dist/assets/js/72.3f7bfd0d.js
deleted file mode 100644
index 03b4408131..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/72.3f7bfd0d.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[72],{419:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"状态管理-pinia"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#状态管理-pinia"}},[t._v("#")]),t._v(" 状态管理（pinia）")]),t._v(" "),s("p",[t._v("Mpx 参考 "),s("a",{attrs:{href:"https://pinia.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Pinia"),s("OutboundLink")],1),t._v(" 设计实现了一套外部状态逻辑管理系统（pinia），允许跨页面/组件共享状态，其中的概念与 api 与 Pinia 保持一致，同时支持在 Mpx 组合式 API（Composition API）和选项式 API（Options API）模式下使用。")]),t._v(" "),s("h2",{attrs:{id:"介绍"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#介绍"}},[t._v("#")]),t._v(" 介绍")]),t._v(" "),s("p",[s("code",[t._v("pinia")]),t._v(" 是一个状态管理容器，可支持复杂场景下的组件通信机制，与"),s("code",[t._v("Vuex")]),t._v("状态管理不同之处在于：")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("mutations 不再存在，使用 actions 来支持应用中状态的同步和异步变更。")])]),t._v(" "),s("li",[s("p",[t._v("动态创建 store，使用"),s("code",[t._v("useStore")]),t._v("实现运行时动态创建 store。")])]),t._v(" "),s("li",[s("p",[t._v("扁平架构，不再有 modules 嵌套结构，支持不同 store 之间的交叉组合方式使用。")])])]),t._v(" "),s("h3",{attrs:{id:"创建-pinia"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#创建-pinia"}},[t._v("#")]),t._v(" 创建 pinia")]),t._v(" "),s("p",[t._v("首先在应用中调用"),s("code",[t._v("createPinia")]),t._v("方法来创建全局 pinia 实例。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPinia "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pinia "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPinia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果你的应用想使用 SSR 渲染模式，请将 pinia 的创建放在 "),s("code",[t._v("onAppInit")]),t._v(" 钩子中执行")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPinia "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onAppInit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pinia "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPinia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      pinia\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"创建-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#创建-store"}},[t._v("#")]),t._v(" 创建 store")]),t._v(" "),s("p",[t._v("然后调用"),s("code",[t._v("defineStore")]),t._v("方法，传入 store 唯一标识（id），来创建一个 store，支持 Setup 和 Options 两种风格的 store。")]),t._v(" "),s("h4",{attrs:{id:"setup-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setup-store"}},[t._v("#")]),t._v(" Setup store")]),t._v(" "),s("p",[t._v("与组合式 API 的 setup 函数类似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并返回一个带有我们想暴露出去的属性和方法的对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// setup.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" useSetupStore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setup'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pinia'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" myName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" myName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" increment "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在 Setup Store 中：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("ref()")]),t._v(" 就是 "),s("code",[t._v("state")]),t._v(" 属性")]),t._v(" "),s("li",[s("code",[t._v("computed()")]),t._v(" 就是 "),s("code",[t._v("getters")])]),t._v(" "),s("li",[s("code",[t._v("function()")]),t._v(" 就是 "),s("code",[t._v("actions")])])]),t._v(" "),s("h4",{attrs:{id:"options-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#options-store"}},[t._v("#")]),t._v(" Options store")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" useOptionsStore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'options'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("state")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pinia'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("myName")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$patch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"使用-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用-store"}},[t._v("#")]),t._v(" 使用 store")]),t._v(" "),s("p",[t._v("在选项式 API 中使用，如果你不能使用组合式 API，但你可以使用 "),s("code",[t._v("computed")]),t._v(", "),s("code",[t._v("methods")]),t._v(", '...'，那你可以使用 "),s("code",[t._v("mapState()")]),t._v(", "),s("code",[t._v("mapActions()")]),t._v(" 辅助函数\n来将 "),s("code",[t._v("state")]),t._v(", "),s("code",[t._v("getter")]),t._v(", "),s("code",[t._v("action")]),t._v(" 等映射到你的组件中。")]),t._v(" "),s("p",[t._v("无论是 optionsStore、还是 setupStore，我们都可以在选项式组件中使用，且使用方式并无差异，下方例子我们统一使用 useSetupStore 来作为示范例")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" storeToRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mapState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mapActions "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" useOptionsStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx/options'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" useSetupStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx/setup'")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 选项式API（Options API）风格下通过mapHelper函数使用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以访问组件中的 this.name")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此处与直接从 useSetupStore 中读取的数据相同")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("useSetupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以将state修改别名，例如将name 注册为 otherName")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("useSetupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("otherName")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以写一个函数来获取对 useSetupStore 的访问权")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("double")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("store")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以通过访问 `this` 拿到数据")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("magicValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("double\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在pinia中，getter 也是通过 mapState 来进行映射")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("useSetupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myName'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("useSetupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 也可以将其注册问题 this.setupIncrement 方法")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("useSetupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("setupIncrement")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("strong",[t._v("注意：")]),t._v(" 在 "),s("code",[t._v("pinia")]),t._v(" 中，getter 也是通过 mapState 来进行映射")]),t._v(" "),s("p",[t._v("在组合式API (Setup API) 风格下使用")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" useSetupStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx/setup'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" storeToRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mapState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" mapActions "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" setupStore "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useSetupStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    setupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 作为 store 的一个属性，我们可以直接访问任何 getter(与 state )")]),t._v("\n    setupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("myName "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// pinia")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onIncrementClick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用 action 方法")]),t._v("\n      setupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'New Count:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" setupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      onIncrementClick"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("storeToRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("setupStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注意：在组合式 API（Setup API）模式下，直接解构获取到的 store 数据会失去响应性，需要通过 storeToRefs 方法处理赋予数据响应性。另外"),s("code",[t._v("storeToRefs")]),t._v("方法只会返回 state 或 getter。")])]),t._v(" "),s("h2",{attrs:{id:"使用插件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用插件"}},[t._v("#")]),t._v(" 使用插件")]),t._v(" "),s("p",[t._v("Mpx pinia 支持使用插件扩展当前 store 实例的功能，用法如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// onStoreAction.js，订阅所有store实例的方法")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("onStoreAction")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$onAction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      after"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      onError\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("after")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("name")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("error")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'after'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" args"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onError")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("error")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'onError'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" error"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPinia "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" onStoreAction "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'xxx/onStoreAction'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pinia "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPinia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\npinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("onStoreAction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/73.171571e4.js b/docs-vuepress/.vuepress/dist/assets/js/73.171571e4.js
deleted file mode 100644
index f3c230f734..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/73.171571e4.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[73],{423:function(t,a,s){"use strict";s.r(a);var e=s(4),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"跨平台"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨平台"}},[t._v("#")]),t._v(" 跨平台")]),t._v(" "),a("h2",{attrs:{id:"多平台支持"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#多平台支持"}},[t._v("#")]),t._v(" 多平台支持")]),t._v(" "),a("p",[t._v("Mpx支持在多个小程序平台中进行增强，目前支持的小程序平台包括微信，支付宝，百度，qq和头条，不过自2.0版本后，Mpx支持了以微信增强语法为base的跨平台输出，实现了一套业务源码在多端输出运行的能力，大大提升了多小程序平台业务的开发效率，详情可以查看"),a("a",{attrs:{href:"#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%BC%96%E8%AF%91"}},[t._v("跨平台编译")])]),t._v(" "),a("h3",{attrs:{id:"template增强特性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#template增强特性"}},[t._v("#")]),t._v(" template增强特性")]),t._v(" "),a("p",[t._v("不同平台上的模板增强指令按照平台的指令风格进行设计，文档和代码示例为了方便统一采用微信小程序下的书写方式。")]),t._v(" "),a("p",[t._v("模板增强指令对应表：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("增强指令")]),t._v(" "),a("th",[t._v("微信")]),t._v(" "),a("th",[t._v("支付宝")]),t._v(" "),a("th",[t._v("百度")]),t._v(" "),a("th",[t._v("qq")]),t._v(" "),a("th",[t._v("头条")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("双向绑定")]),t._v(" "),a("td",[t._v("wx:model")]),t._v(" "),a("td",[t._v("a:model")]),t._v(" "),a("td",[t._v("s-model")]),t._v(" "),a("td",[t._v("qq:model")]),t._v(" "),a("td",[t._v("tt:model")])]),t._v(" "),a("tr",[a("td",[t._v("双向绑定辅助属性")]),t._v(" "),a("td",[t._v("wx:model-prop")]),t._v(" "),a("td",[t._v("a:model-prop")]),t._v(" "),a("td",[t._v("s-model-prop")]),t._v(" "),a("td",[t._v("qq:model-prop")]),t._v(" "),a("td",[t._v("tt:model-prop")])]),t._v(" "),a("tr",[a("td",[t._v("双向绑定辅助属性")]),t._v(" "),a("td",[t._v("wx:model-event")]),t._v(" "),a("td",[t._v("a:model-event")]),t._v(" "),a("td",[t._v("s-model-event")]),t._v(" "),a("td",[t._v("qq:model-event")]),t._v(" "),a("td",[t._v("tt:model-event")])]),t._v(" "),a("tr",[a("td",[t._v("双向绑定辅助属性")]),t._v(" "),a("td",[t._v("wx:model-value-path")]),t._v(" "),a("td",[t._v("a:model-value-path")]),t._v(" "),a("td",[t._v("s-model-value-path")]),t._v(" "),a("td",[t._v("qq:model-value-path")]),t._v(" "),a("td",[t._v("tt:model-value-path")])]),t._v(" "),a("tr",[a("td",[t._v("双向绑定辅助属性")]),t._v(" "),a("td",[t._v("wx:model-filter")]),t._v(" "),a("td",[t._v("a:model-filter")]),t._v(" "),a("td",[t._v("s-model-filter")]),t._v(" "),a("td",[t._v("qq:model-filter")]),t._v(" "),a("td",[t._v("tt:model-filter")])]),t._v(" "),a("tr",[a("td",[t._v("动态样式绑定")]),t._v(" "),a("td",[t._v("wx:class")]),t._v(" "),a("td",[t._v("a:class")]),t._v(" "),a("td",[t._v("s-class")]),t._v(" "),a("td",[t._v("qq:class")]),t._v(" "),a("td",[t._v("暂不支持")])]),t._v(" "),a("tr",[a("td",[t._v("动态样式绑定")]),t._v(" "),a("td",[t._v("wx:style")]),t._v(" "),a("td",[t._v("a:style")]),t._v(" "),a("td",[t._v("s-style")]),t._v(" "),a("td",[t._v("qq:style")]),t._v(" "),a("td",[t._v("暂不支持")])]),t._v(" "),a("tr",[a("td",[t._v("获取节点/组件实例")]),t._v(" "),a("td",[t._v("wx:ref")]),t._v(" "),a("td",[t._v("a:ref")]),t._v(" "),a("td",[t._v("s-ref")]),t._v(" "),a("td",[t._v("qq:ref")]),t._v(" "),a("td",[t._v("tt:ref")])]),t._v(" "),a("tr",[a("td",[t._v("显示/隐藏")]),t._v(" "),a("td",[t._v("wx:show")]),t._v(" "),a("td",[t._v("a:show")]),t._v(" "),a("td",[t._v("s-show")]),t._v(" "),a("td",[t._v("qq:show")]),t._v(" "),a("td",[t._v("tt:show")])])])]),t._v(" "),a("h3",{attrs:{id:"script增强特性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#script增强特性"}},[t._v("#")]),t._v(" script增强特性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("增强字段")]),t._v(" "),a("th",[t._v("微信")]),t._v(" "),a("th",[t._v("支付宝")]),t._v(" "),a("th",[t._v("百度")]),t._v(" "),a("th",[t._v("qq")]),t._v(" "),a("th",[t._v("头条")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("computed")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("部分支持，无法作为props传递(待头条修复生命周期执行顺序可完整支持)")])]),t._v(" "),a("tr",[a("td",[t._v("watch")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",[t._v("mixins")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")])])])]),t._v(" "),a("h3",{attrs:{id:"style增强特性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#style增强特性"}},[t._v("#")]),t._v(" style增强特性")]),t._v(" "),a("p",[t._v("无平台差异")]),t._v(" "),a("h3",{attrs:{id:"json增强特性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#json增强特性"}},[t._v("#")]),t._v(" json增强特性")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("增强字段")]),t._v(" "),a("th",[t._v("微信")]),t._v(" "),a("th",[t._v("支付宝")]),t._v(" "),a("th",[t._v("百度")]),t._v(" "),a("th",[t._v("qq")]),t._v(" "),a("th",[t._v("头条")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("packages")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("支持")]),t._v(" "),a("td",[t._v("部分支持，无法分包")])])])]),t._v(" "),a("h2",{attrs:{id:"跨平台输出小程序"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨平台输出小程序"}},[t._v("#")]),t._v(" 跨平台输出小程序")]),t._v(" "),a("p",[t._v("自2.0版本开始，mpx开始支持跨小程序平台编译，不同于常规跨平台框架重新定义一套DSL的方式，mpx支持基于现有平台的源码编译为其他已支持平台的目标代码。跨平台编译能力依赖于mpx的多平台支持，目前mpx已经支持将微信小程序跨平台编译为支付宝、百度、qq和头条小程序。")]),t._v(" "),a("h3",{attrs:{id:"使用方法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用方法"}},[t._v("#")]),t._v(" 使用方法")]),t._v(" "),a("p",[t._v("如果你是使用"),a("code",[t._v("mpx init xxx")]),t._v("新生成的项目，package.json里script部分有"),a("code",[t._v("npm run build:cross")]),t._v("，直接执行"),a("code",[t._v("npm run build:cross")]),t._v("（watch同理），如果仅需构建某几个平台的，可以修改该script，按已有的格式删除或增添某些某些平台")]),t._v(" "),a("p",[t._v("如果你是自行搭建的mpx项目，你只需要进行简单的配置修改，打开项目的webpack配置，找到@mpxjs/webpack-plugin的声明位置，传入mode和srcMode参数即可，示例如下")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MpxwebpackPlugin")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt|jd|web|ios|android)")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// srcMode为mpx编译的源码平台，目前仅支持wx   ")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("使用 @mpxjs/cli 创建的项目，可以通过在 "),a("code",[t._v("npm script")]),t._v(" 当中定义 "),a("code",[t._v("targets")]),t._v(" 来设置编译的目标平台")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 项目 package.json")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"script"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"build:cross"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mpx-cli-service build --targets=wx,ali"')]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h3",{attrs:{id:"跨平台差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨平台差异抹平"}},[t._v("#")]),t._v(" 跨平台差异抹平")]),t._v(" "),a("p",[t._v("为了实现小程序的跨平台编译，我们在编译和运行时做了很多工作以抹平小程序开发中各个方面的跨平台差异")]),t._v(" "),a("h4",{attrs:{id:"模板语法差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#模板语法差异抹平"}},[t._v("#")]),t._v(" 模板语法差异抹平")]),t._v(" "),a("p",[t._v("对于通用指令/事件处理的差异，mpx提供了统一的编译转换抹平操作；而对于平台组件和组件属性的差异，我们也在力所能及的范围内进行了转换抹平，对于平台差异性过大无法转换的部分会在编译阶段报错指出。")]),t._v(" "),a("h4",{attrs:{id:"组件-页面对象差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件-页面对象差异抹平"}},[t._v("#")]),t._v(" 组件/页面对象差异抹平")]),t._v(" "),a("p",[t._v("不同平台间组件/页面对象的差异主要体现在生命周期上，我们在支持多平台能力时已经将不同平台的生命周期映射到mpx框架的一套内部生命周期中，基于这个统一的映射，不同平台的生命周期差异也得到了抹平。")]),t._v(" "),a("p",[t._v("此外，我们还进行了一系列运行时增强来模拟微信平台中提供而其他平台中未提供的能力，例如：")]),t._v(" "),a("ul",[a("li",[t._v("在支付宝组件实例中提供了this.triggerEvent方法模拟微信中的自定义组件事件；")]),t._v(" "),a("li",[t._v("提供了this.selectComponent/this.selectAllComponents方法模拟微信中获取子组件实例的能力；")]),t._v(" "),a("li",[t._v("重写了createSelectorQuery方法抹平了微信/支付宝平台间的使用差异；")]),t._v(" "),a("li",[t._v("转换抹平了微信/支付宝中properties定义的差异；")]),t._v(" "),a("li",[t._v("利用mpx本身的数据响应能力模拟了微信中的observers/property observer能力等;")]),t._v(" "),a("li",[t._v("提供了this.getRelationNodes方法并支持了微信中组件间关系relations的能力")])]),t._v(" "),a("p",[t._v("对于原生小程序组件的转换，还会进行一些额外的抹平，已兼容一些已有的原生组件库，例如：")]),t._v(" "),a("ul",[a("li",[t._v("将支付宝组件中的props数据挂载到this.data中以模拟微信平台中的表现；")]),t._v(" "),a("li",[t._v("利用mpx本身的mixins能力模拟微信中的behaviors能力。")])]),t._v(" "),a("p",[t._v("对于一些无法进行模拟的跨平台差异，会在运行时进行检测并报错指出，例如微信转支付宝时使用moved生命周期等。")]),t._v(" "),a("h4",{attrs:{id:"json配置差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#json配置差异抹平"}},[t._v("#")]),t._v(" json配置差异抹平")]),t._v(" "),a("p",[t._v("类似于模板语法，会在编译阶段进行转换抹平，无法转换的部分会在编译阶段报错指出。")]),t._v(" "),a("h4",{attrs:{id:"api调用差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#api调用差异抹平"}},[t._v("#")]),t._v(" api调用差异抹平")]),t._v(" "),a("p",[t._v("对于api调用，mpx提供了一个api调用代理插件来抹平跨平台api调用的差异，使用时需要在项目中安装使用"),a("code",[t._v("@mpxjs/api-proxy")]),t._v("，可以通过两种方式使用")]),t._v(" "),a("h4",{attrs:{id:"方式一-在调用小程序api时统一使用mpx对象进行调用-示例如下"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#方式一-在调用小程序api时统一使用mpx对象进行调用-示例如下"}},[t._v("#")]),t._v(" 方式一：在调用小程序api时统一使用mpx对象进行调用，示例如下：")]),t._v(" "),a("p",[t._v("安装插件支持options传入，options说明如下：")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数名称")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("含义")]),t._v(" "),a("th",[t._v("是否必填")]),t._v(" "),a("th",[t._v("默认值")]),t._v(" "),a("th",[t._v("备注")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("s",[t._v("platform")])]),t._v(" "),a("td",[a("s",[t._v("Object")])]),t._v(" "),a("td",[a("s",[t._v("各平台之间的转换")])]),t._v(" "),a("td",[a("s",[t._v("否")])]),t._v(" "),a("td",[a("s",[t._v("{ from:'', to:'' }")])]),t._v(" "),a("td",[t._v("已删除")])]),t._v(" "),a("tr",[a("td",[t._v("usePromise")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("是否将 api 转化为 promise 格式使用")]),t._v(" "),a("td",[t._v("-")]),t._v(" "),a("td",[t._v("-")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[a("s",[t._v("exclude")])]),t._v(" "),a("td",[a("s",[t._v("Array(String)")])]),t._v(" "),a("td",[a("s",[t._v("跨平台时不需要转换的 api")])]),t._v(" "),a("td",[t._v("-")]),t._v(" "),a("td",[t._v("-")]),t._v(" "),a("td",[t._v("已删除")])]),t._v(" "),a("tr",[a("td",[t._v("whiteList")]),t._v(" "),a("td",[t._v("Array(String)")]),t._v(" "),a("td",[t._v("强行转化为 promise 格式的 api")]),t._v(" "),a("td",[t._v("否")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("需要 usePromise 设为 true")])]),t._v(" "),a("tr",[a("td",[t._v("blackList")]),t._v(" "),a("td",[t._v("Array(String)")]),t._v(" "),a("td",[t._v("不转换 promise 格式的 api")]),t._v(" "),a("td",[t._v("否")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("需要 usePromise 设为 true")])]),t._v(" "),a("tr",[a("td",[t._v("custom")]),t._v(" "),a("td",[t._v("Object")]),t._v(" "),a("td",[t._v("提供用户在各渠道下自定义api开放能力")]),t._v(" "),a("td",[t._v("否")]),t._v(" "),a("td",[t._v("[]")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h4",{attrs:{id:"普通形式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#普通形式"}},[t._v("#")]),t._v(" 普通形式")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showModal")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'标题'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'这是一个弹窗'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cancel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'用户点击取消'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"使用promise形式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用promise形式"}},[t._v("#")]),t._v(" 使用promise形式")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePromise")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showActionSheet")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("itemList")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tapIndex"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"用户自定义"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#用户自定义"}},[t._v("#")]),t._v(" 用户自定义")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" scanCode "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@test/scanCode'")]),t._v("\n\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("custom")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("web")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      scanCode\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在web下调用的实际是用户自定义部分的scanCode")]),t._v("\nmpx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("scanCode")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("onlyFromCamera")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'scanCode, success'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("fail")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'scanCode, fail'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"方式二-直接在-mpxjs-api-proxy导出想使用的方法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#方式二-直接在-mpxjs-api-proxy导出想使用的方法"}},[t._v("#")]),t._v(" 方式二：直接在"),a("code",[t._v("@mpxjs/api-proxy")]),t._v("导出想使用的方法")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 独立使用 支持treesharking能力")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" showModal "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("showModal")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'标题'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'这是一个弹窗'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'弹框展示成功'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("对于无法转换抹平的api调用会在运行时阶段报错指出。")]),t._v(" "),a("h4",{attrs:{id:"webview-bridge差异抹平"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#webview-bridge差异抹平"}},[t._v("#")]),t._v(" webview bridge差异抹平")]),t._v(" "),a("p",[t._v("Mpx支持小程序跨平台后，多个平台的小程序里都有webview组件，webview打开的页面和小程序可以通过API来通信以及调用一些小程序能力，但是各方webview提供的API是不一样的。")]),t._v(" "),a("p",[t._v("比如微信是用 wx.miniProgram.navigateTo 来跳转到别的小程序页面，而支付宝里是 my.navigateTo ，那么我们开发H5时候为了让H5能适应各家小程序平台就需要写多份对应逻辑。")]),t._v(" "),a("p",[t._v("为解决这个问题，Mpx提供了用于运行在小程序的webview里的H5抹平平台差异的bridge库：@mpxjs/webview-bridge")]),t._v(" "),a("p",[t._v("使用方式很简单，不过注意这个库是给H5用的，不是给小程序用的。在H5项目中引入。")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-webview",target:"_blank",rel:"noopener noreferrer"}},[t._v("使用示例"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("支持script标签引入和npm引入，标签引入的话，全局实例是mpx（npm模块使用下也鼓励import mpx from '@mpxjs/webview-birdge'），使用就例如 mpx.navigateTo ，能保持整个项目风格完全一致。")]),t._v(" "),a("p",[t._v("提供的API如下："),a("code",[t._v("navigateTo, navigateBack, switchTab, reLaunch, redirectTo, getEnv, postMessage, getLoadError")])]),t._v(" "),a("h2",{attrs:{id:"跨平台条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨平台条件编译"}},[t._v("#")]),t._v(" 跨平台条件编译")]),t._v(" "),a("p",[t._v("Mpx跨平台编译的原则在于，"),a("code",[t._v("能转则转，转不了则报错提示")]),t._v("，对于无法抹平差异的部分，我们提供了完善的跨平台条件编译机制便于用户处理因平台差异而无法相互转换的部分，也能够用于实现具有平台差异性的业务逻辑。")]),t._v(" "),a("p",[t._v("mpx中我们支持了三种维度的条件编译，分别是文件维度，区块维度和代码维度，其中，文件维度和区块维度主要用于处理一些大块的平台差异性逻辑，而代码维度主要用于处理一些局部简单的平台差异。")]),t._v(" "),a("h3",{attrs:{id:"文件维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文件维度条件编译"}},[t._v("#")]),t._v(" 文件维度条件编译")]),t._v(" "),a("p",[t._v("文件维度条件编译简单的来说就是文件为维度进行跨平台差异代码的编写，例如在微信->支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，这时你可以在相同的位置新建一个map.ali.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的mode来加载对应模块，当mode为ali时，会优先加载map.ali.mpx，反之则会加载map.mpx。")]),t._v(" "),a("p",[t._v("文件维度条件编译能够与webpack alias结合使用，对于npm包的文件我们并不方便在原本的文件位置创建.ali的条件编译文件，但我们可以通过webpack alias在相同位置创建一个"),a("code",[t._v("虚拟的")]),t._v(".ali文件，并将其指向项目中的其他文件位置。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对于npm包中的文件依赖")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" npmModule "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'somePackage/lib/index'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置以下alias后，当mode为ali时，会优先加载项目目录中定义的projectRoot/somePackage/lib/index文件")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n  module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resolve")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("alias")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'somePackage/lib/index.ali'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'projectRoot/somePackage/lib/index'")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"区块维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#区块维度条件编译"}},[t._v("#")]),t._v(" 区块维度条件编译")]),t._v(" "),a("p",[t._v("在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加"),a("code",[t._v("mode")]),t._v("属性定义该区块的目标平台即可，示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译mode为ali时使用如下区块--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--该区块中的所有代码需采用支付宝的技术标准进行编写--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("支付宝环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--其他编译mode时使用如下区块--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("其他环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"代码维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#代码维度条件编译"}},[t._v("#")]),t._v(" 代码维度条件编译")]),t._v(" "),a("p",[t._v("如果只有局部的代码存在跨平台差异，mpx同样支持在代码内使用if/else进行局部条件编译，用户可以在js代码和template插值中访问"),a("code",[t._v("__mpx_mode__")]),t._v("获取当前编译mode，进行平台差异逻辑编写，js代码中使用示例如下。")]),t._v(" "),a("p",[t._v("除了 "),a("code",[t._v("__mpx_mode__")]),t._v(" 这个默认插值以外，有别的环境变量需要的话可以在mpx.plugin.conf.js里通过defs进行配置。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("__mpx_mode__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ali'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行支付宝环境相关逻辑")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 执行其他环境相关逻辑")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("template代码中使用示例如下")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--此处的__mpx_mode__不需要在组件中声明数据，编译时会基于当前编译mode进行替换--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'ali'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("支付宝环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("else")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("其他环境"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v('JSON中的条件编译（注意，这个依赖JSON的动态方案，得通过name="json"这种方式来编写，其实写的是js代码，最终module.exports导出一个可json化的对象即可）：')]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("json"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" __mpx_mode__ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'main/xxx'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sub/xxx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test/xxx'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以为不同环境动态书写配置")]),t._v("\nmodule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usingComponents")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("aComponents")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../xxxxx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以打注释 xxx组件")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("样式的条件编译：")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n  @mpx-if (__mpx_env__ === 'someEvn')\n*/")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__mpx_mode__ === 'wx') */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" green"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n    @mpx-elif (__mpx_mode__ === 'qq')\n  */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" black"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__mpx_mode__ === 'swan') */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cyan"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".textSize")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 18px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n  @mpx-else\n*/")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".backColor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-if (__mpx_mode__ === 'swan') */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" blue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-else */")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* @mpx-endif */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/*\n  @mpx-endif\n*/")]),t._v("\n")])])]),a("h3",{attrs:{id:"属性维度条件编译"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#属性维度条件编译"}},[t._v("#")]),t._v(" 属性维度条件编译")]),t._v(" "),a("p",[t._v("属性维度条件编译允许用户在组件上使用 "),a("code",[t._v("@")]),t._v(" 和 "),a("code",[t._v("|")]),t._v(" 符号来指定某个节点或属性只在某些平台下有效。")]),t._v(" "),a("p",[t._v("对于同一个 button 组件，微信小程序支持 "),a("code",[t._v('open-type="getUserInfo"')]),t._v("，但是支付宝小程序支持 "),a("code",[t._v('open-type="getAuthorize"')]),t._v("。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。")]),t._v(" "),a("p",[t._v("比如业务中需要通过 button 按钮获取用户信息，虽然可以使用代码维度条件编译来解决，但是增加了很多代码量：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'wx' || __mpx_mode__ === 'swan'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindgetuserinfo")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("elif")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'ali'}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getAuthorize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scope")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("userInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("而用属性维度的编译则方便很多：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type@wx|swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindgetuserinfo@wx|swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("open-type@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getAuthorize"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scope@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("userInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap@ali")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("onTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  获取用户信息\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("属性维度的编译也可以对整个节点进行条件编译，例如只想在支付宝小程序中输出某个节点：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is view"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("需要注意使用上述用法时，节点自身在构建时框架不会对节点属性进行平台语法转换，但对于其子节点，框架并不会继承父级节点 mode，会进行正常跨平台语法转换。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--错误示例--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n// srcMode 为 wx 跨端输出 ali 结果为\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("上述示例为错误写法，假如srcMode为微信小程序，用上述写法构建输出支付宝小程序时，父节点 bindtap 不会被转为 onTap，在支付宝平台执行时事件会无响应。")]),t._v(" "),a("p",[t._v("正确写法如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--正确示例--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n// 输出 ali 产物\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("otherClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("onTap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("tap click"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("有时开发者期望使用 @ali 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--srcMode为 wx，输出 ali 时，bindtap 会被正常转换为 onTap--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@_ali")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。")]),t._v(" "),a("p",[t._v("有时候我们不仅需要对节点属性进行条件编译，可能还需要对节点标签进行条件编译。")]),t._v(" "),a("p",[t._v("为此，我们支持了一个特殊属性 "),a("code",[t._v("mpxTagName")]),t._v("，如果节点存在这个属性，我们会在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mpxTagName@swan")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cover-view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("will be cover-view in swan"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"use-env"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-env"}},[t._v("#")]),t._v(" 通过 env 实现自定义目标环境的条件编译 ")]),t._v(" "),a("p",[t._v("Mpx 支持在以上四种条件编译的基础上，通过自定义 env 的形式实现在不同环境下编译产出不同的代码。")]),t._v(" "),a("p",[t._v("实例化 MpxWebpackPlugin 的时候，传入配置 env。")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\nmodule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluginOptions")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mpx")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("srcMode")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'wx'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// srcMode为mpx编译的源码平台，目前仅支持wx")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugin")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("env")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"didi"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// env为mpx编译的目标环境，需自定义")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"文件维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文件维度条件编译-2"}},[t._v("#")]),t._v(" 文件维度条件编译")]),t._v(" "),a("p",[t._v("微信转支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，而且这个地图组件在不同的目标环境中也有很大的差异，这时你可以在相同的位置新建一个 map.ali.didi.mpx 或 map.ali.qingju.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的 mode 和 env 来加载对应模块，当 mode 为 ali，env 为 didi 时，会优先加载 map.ali.didi.mpx、map.ali.mpx，如果没有定义 env，则会优先加载 map.ali.mpx，反之则会加载 map.mpx。")]),t._v(" "),a("h4",{attrs:{id:"区块维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#区块维度条件编译-2"}},[t._v("#")]),t._v(" 区块维度条件编译")]),t._v(" "),a("p",[t._v("在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加"),a("code",[t._v("mode")]),t._v("或"),a("code",[t._v("env")]),t._v("属性定义该区块的目标平台即可，示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译mode为ali且env为didi时使用如下区块，优先级最高是4--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("env")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("didi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译mode为ali时使用如下区块，优先级是3--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--编译env为didi时使用如下区块，优先级是2--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("env")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("didi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--其他环境，优先级是1--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块中的所有代码需采用支付宝的技术标准进行编写"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("注意，如果多个相同的区块写相同的 mode 和 env，默认会用最后一个，如：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("该区块会被忽略"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ali"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("默认会用这个区块"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h4",{attrs:{id:"代码维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#代码维度条件编译-2"}},[t._v("#")]),t._v(" 代码维度条件编译")]),t._v(" "),a("p",[t._v("如果在 MpxWebpackPlugin 插件初始化时自定义了 env，你可以访问"),a("code",[t._v("__mpx_env__")]),t._v("获取当前编译env，进行环境差异逻辑编写。使用方法与"),a("code",[t._v("__mpx_mode__")]),t._v("相同。")]),t._v(" "),a("h4",{attrs:{id:"属性维度条件编译-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#属性维度条件编译-2"}},[t._v("#")]),t._v(" 属性维度条件编译")]),t._v(" "),a("p",[t._v("env 属性维度条件编译与 mode 的用法大致相同，使用 "),a("code",[t._v(":")]),t._v(" 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 "),a("code",[t._v("attr@mode:env:env|mode:env")]),t._v("，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 "),a("code",[t._v(":")]),t._v(" 前缀，形如 "),a("code",[t._v("attr@:env")]),t._v("。")]),t._v(" "),a("p",[t._v("对于同一个 button 组件，微信小程序支持 "),a("code",[t._v('open-type="getUserInfo"')]),t._v("，但是支付宝小程序支持 "),a("code",[t._v('open-type="getAuthorize"')]),t._v("。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。")]),t._v(" "),a("p",[t._v("如果当前编译的目标平台是 wx，以下写法 open-type 属性将被忽略")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@swan:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如果当前 env 不是 didi，以下写法 open-type 属性也会被忽略")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如果只想在 mode 为 wx 且 env 为 didi 或 qingju 的环境下使用 open-type 属性，则可以这样写：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("open-type@wx:")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("didi:")]),t._v("qingju")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getUserInfo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("获取用户信息"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("env 属性维度的编译同样支持对整个节点或者节点标签名进行条件编译：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("mpxTagName@:")]),t._v("didi")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cover-view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap--\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("@:")]),t._v("didi")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("bindtap@:")]),t._v("didi")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("someClick"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a  view component"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"其他注意事项"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#其他注意事项"}},[t._v("#")]),t._v(" 其他注意事项")]),t._v(" "),a("ul",[a("li",[t._v("当目标平台为支付宝时，需要启用支付宝最新的component2编译才能保障框架正常工作，关于component2"),a("a",{attrs:{href:"https://docs.alipay.com/mini/framework/custom-component-overview",target:"_blank",rel:"noopener noreferrer"}},[t._v("点此查看详情"),a("OutboundLink")],1),t._v("；")]),t._v(" "),a("li",[t._v("跨平台源码中自定义组件的标签名不能使用驼峰形式"),a("code",[t._v("myComponent")]),t._v("，请使用横杠形式"),a("code",[t._v("my-component")]),t._v("来书写；")]),t._v(" "),a("li",[t._v("生成的目标代码中文件名和文件夹名不能带有"),a("code",[t._v("@")]),t._v("符号，目前媒体文件和原生自定义组件在编译时不会修改文件名，需要重点关注。")])]),t._v(" "),a("h2",{attrs:{id:"跨平台输出web"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#跨平台输出web"}},[t._v("#")]),t._v(" 跨平台输出web")]),t._v(" "),a("p",[t._v("从2.3.0版本开始，Mpx开始支持将已有项目跨平台输出web平台中运行的能力，目前输出web能力完备，能够支持直接转换大型复杂项目，我们会持续对输出web的能力进行优化，不断的建全更全面的适用范围和开发体验。")]),t._v(" "),a("h3",{attrs:{id:"技术实现"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#技术实现"}},[t._v("#")]),t._v(" 技术实现")]),t._v(" "),a("p",[t._v("与小程序平台间的差异相比，web平台和小程序平台间的差异要大很多，小程序相当于是基于web技术的上层封装，所以不同于我们跨平台输出其他小程序平台时以编译转换为主的思路，在输出web时，我们更多地采用了封装的方式来抹平组件/Api和底层环境的差异，与当前大部分的跨平台框架相仿。但与当前大部分跨平台框架以web MVVM框架为base输出到小程序上运行的思路不同，我们是以Mpx小程序增强语法为基础输出到web中运行，前面说过小程序本身是基于web技术进行的实现，小程序->web的转换在可行性和兼容性上会好一些。")]),t._v(" "),a("p",[t._v("在具体实现上，Mpx项目输出到web中运行时在组件化和路由层面都是基于Vue生态实现，所以可以将Mpx的跨端输出产物整合到既有的Vue项目中，或者在条件编译中直接使用Vue语法进行web端的实现。")]),t._v(" "),a("h3",{attrs:{id:"使用方法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用方法"}},[t._v("#")]),t._v(" 使用方法")]),t._v(" "),a("p",[t._v("使用@mpxjs/cli创建新项目时选择跨平台并选择输出web后，即可生成可输出web的示例项目，运行"),a("code",[t._v("npm run build:web")]),t._v("，就会在dist/web下输出构建后的web项目，并启动静态服务预览运行。")]),t._v(" "),a("h3",{attrs:{id:"支持范围"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#支持范围"}},[t._v("#")]),t._v(" 支持范围")]),t._v(" "),a("p",[t._v("目前对输出web的通用能力支持已经非常完备，下列表格中显示了当前版本中已支持的能力范围")]),t._v(" "),a("h4",{attrs:{id:"模板指令"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#模板指令"}},[t._v("#")]),t._v(" 模板指令")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("指令名称")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("Mustache数据绑定")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:for")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:for-item")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:for-index")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:key")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:if")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:elif")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:else")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:model")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:model-prop")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:model-event")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:model-value-path")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:model-filter")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:class")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:style")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:ref")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wx:show")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("h4",{attrs:{id:"事件绑定方式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#事件绑定方式"}},[t._v("#")]),t._v(" 事件绑定方式")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("绑定方式")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("bind")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("catch")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("capture-bind")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("capture-catch")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("h4",{attrs:{id:"事件名称"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#事件名称"}},[t._v("#")]),t._v(" 事件名称")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("事件名称")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("tap")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("longpress")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("longtap")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("p",[t._v("web同名事件默认全部支持，已支持组件的特殊事件默认为支持，不支持的情况下会在编译时抛出异常")]),t._v(" "),a("h4",{attrs:{id:"基础组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#基础组件"}},[t._v("#")]),t._v(" 基础组件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("组件名称")]),t._v(" "),a("th",[t._v("是否支持")]),t._v(" "),a("th",[t._v("说明")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("audio")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("block")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("button")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("canvas")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("checkbox")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("checkbox-group")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("cover-view")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("form")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("image")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("input")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("movable-area")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("movable-view")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("navigator")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("picker")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("picker-view")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("progress")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("radio")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("radio-group")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("rich-text")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("scroll-view")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td",[t._v("scroll-view 输出 web 底层滚动依赖 "),a("a",{attrs:{href:"https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("BetterScroll"),a("OutboundLink")],1),t._v(" 实现，支持额外传入以下属性： "),a("br"),a("br"),a("code",[t._v("scroll-options")]),t._v(": object "),a("br"),t._v("可重写 BetterScroll 初始化基本配置"),a("br"),t._v("若出现无法滚动，可尝试手动传入 "),a("code",[t._v("{ observeDOM: true }")]),t._v(" "),a("br"),a("br"),t._v(" "),a("code",[t._v("update-refresh")]),t._v(": boolean "),a("br"),t._v("Vue updated 钩子函数触发时，可用于重新计算 BetterScroll"),a("br"),a("br"),t._v("tips: 当使用下拉刷新相关属性时，由于 Vue 数据响应机制的限制，在 web 侧可能出现下拉组件状态无法复原的问题，可尝试在 "),a("code",[t._v("refresherrefresh")]),t._v(" 事件中，手动将 refresher-triggered 属性值设置为 true")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("swiper")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td",[t._v("swiper 输出 web 底层滚动依赖 "),a("a",{attrs:{href:"https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("BetterScroll"),a("OutboundLink")],1),t._v(" 实现，支持额外传入以下属性： "),a("br"),a("br"),a("code",[t._v("scroll-options")]),t._v(": object "),a("br"),t._v("可重写 BetterScroll 初始化基本配置"),a("br"),t._v("当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 "),a("code",[t._v("{ eventPassthrough: vertical }")]),t._v("，反之可将 eventPassthrough 设置为 "),a("code",[t._v("horizontal")])])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("swiper-item")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("switch")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("slider")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("text")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("textarea")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("video")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("view")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("web-view")]),t._v(" "),a("td",[t._v("是")]),t._v(" "),a("td")])])]),t._v(" "),a("p",[t._v('在项目的app.json 中配置 "style": "v2"启用新版的组件样式，涉及的组件有 button icon radio checkbox switch slider在输出web时也与小程序保持了一致')]),t._v(" "),a("h4",{attrs:{id:"生命周期"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#生命周期"}},[t._v("#")]),t._v(" 生命周期")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("生命周期名称")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onLaunch")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onReady")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onUnload")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onError")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("p",[t._v("onServerPrefetch｜是\ncreated|是\nattached|是\nready|是\ndetached|是\nupdated|是\nserverPrefetch|是")]),t._v(" "),a("h4",{attrs:{id:"应用级事件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#应用级事件"}},[t._v("#")]),t._v(" 应用级事件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("应用级事件名称")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPageNotFound")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("h4",{attrs:{id:"组件配置"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件配置"}},[t._v("#")]),t._v(" 组件配置")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("配置项")]),t._v(" "),a("th",[t._v("支持度")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("properties")]),t._v(" "),a("td",[t._v("部分支持，observer不支持，请使用watch代替")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("data")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("watch")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("computed")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("relations")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("methods")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("mixins")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("pageLifetimes")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("observers")]),t._v(" "),a("td",[t._v("不支持，请使用watch代替")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("behaviors")]),t._v(" "),a("td",[t._v("不支持，请使用mixins代替")])])])]),t._v(" "),a("h4",{attrs:{id:"组件api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#组件api"}},[t._v("#")]),t._v(" 组件API")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("api名称")]),t._v(" "),a("th",[t._v("支持度")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("triggerEvent")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("$nextTick")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("createSelectorQuery/selectComponent")]),t._v(" "),a("td",[t._v("支持")])])])]),t._v(" "),a("h4",{attrs:{id:"全局api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#全局api"}},[t._v("#")]),t._v(" 全局API")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("api名称")]),t._v(" "),a("th",[t._v("支持度")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("navigateTo")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("navigateBack")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("redirectTo")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("request")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("connectSocket")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("SocketTask")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("EventChannel")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("createSelectorQuery")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("base64ToArrayBuffer")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("arrayBufferToBase64")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("nextTick")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("set")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("setNavigationBarTitle")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("setNavigationBarColor")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("setStorage")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("setStorageSync")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("getStorage")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("getStorageSync")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("getStorageInfo")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("getStorageInfoSync")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("removeStorage")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("removeStorageSync")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("clearStorage")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("clearStorageSync")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("getSystemInfo")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("getSystemInfoSync")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("showModal")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("showToast")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("hideToast")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("showLoading")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("hideLoading")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onWindowResize")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("offWindowResize")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("createAnimation")]),t._v(" "),a("td",[t._v("支持")])])])]),t._v(" "),a("h4",{attrs:{id:"json配置"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#json配置"}},[t._v("#")]),t._v(" JSON配置")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("配置项")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("backgroundColor")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("backgroundTextStyle")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("disableScroll")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("enablePullDownRefresh")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottomDistance")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("packages")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("pages")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("navigationBarBackgroundColor")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("navigationBarTextStyle")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("navigationBarTitleText")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("networkTimeout")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("subpackages")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("tabBar")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("usingComponents")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("h4",{attrs:{id:"拓展能力"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#拓展能力"}},[t._v("#")]),t._v(" 拓展能力")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("能力")]),t._v(" "),a("th",[t._v("是否支持")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("fetch")]),t._v(" "),a("td",[t._v("是")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("i18n")]),t._v(" "),a("td",[t._v("是")])])])]),t._v(" "),a("h4",{attrs:{id:"小程序其他原生能力"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#小程序其他原生能力"}},[t._v("#")]),t._v(" 小程序其他原生能力")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("能力")]),t._v(" "),a("th",[t._v("支持度")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("wxs")]),t._v(" "),a("td",[t._v("支持")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("animation")]),t._v(" "),a("td",[t._v("支持组件的animation属性，支持所有animation对象方法(export、step、width、height、rotate、scale、skew、translate等等)")])])])])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/74.3d5cfaba.js b/docs-vuepress/.vuepress/dist/assets/js/74.3d5cfaba.js
deleted file mode 100644
index e4eb2e5f52..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/74.3d5cfaba.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[74],{420:function(s,t,a){"use strict";a.r(t);var n=a(4),e=Object(n.a)({},(function(){var s=this,t=s._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h1",{attrs:{id:"小程序插件"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#小程序插件"}},[s._v("#")]),s._v(" 小程序插件")]),s._v(" "),t("p",[s._v("插件，是可被添加到小程序内直接使用的功能组件，是对一组 js 接口、自定义组件或页面的封装，。开发者可以像开发小程序一样开发一个插件，供其他小程序使用。同时，小程序开发者可直接在小程序内使用插件，无需重复开发，但是在使用第三那个插件时，无法看到插件的代码。插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用。")]),s._v(" "),t("p",[s._v("开发小程序插件，大致要经过 开通插件功能，填写开发信息，提交审,发布，管理插件使用申请。同时在原生小程序使用插件，要先发出插件申请，等待使用申请通过，插件所有者还可以进行拒绝。\n原生小程序开发插件请移步：")]),s._v(" "),t("ul",[t("li",[t("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html",target:"_blank",rel:"noopener noreferrer"}},[s._v("微信小程序插件开发"),t("OutboundLink")],1)]),s._v(" "),t("li",[t("a",{attrs:{href:"https://opendocs.alipay.com/mini/plugin/create-plugin",target:"_blank",rel:"noopener noreferrer"}},[s._v("支付宝小程序插件开发"),t("OutboundLink")],1)])]),s._v(" "),t("p",[s._v("新建插件类型的项目后，如果创建示例项目，则项目中将包含三个目录：")]),s._v(" "),t("ul",[t("li",[s._v("plugin 目录：插件代码目录。")]),s._v(" "),t("li",[s._v("miniprogram 目录：放置一个小程序，用于调试插件。")]),s._v(" "),t("li",[s._v("doc 目录：用于放置插件开发文档。")])]),s._v(" "),t("p",[s._v("，插件会同时有多个线上版本，由使用插件的小程序决定具体使用的版本号。")]),s._v(" "),t("h3",{attrs:{id:"如何编写一个插件"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#如何编写一个插件"}},[s._v("#")]),s._v(" 如何编写一个插件")]),s._v(" "),t("p",[s._v("推荐使用 mpx 官方脚手架 @mpxjs/cli 创建一个小程序插件项目来快速的进入插件开发阶段，首先全局安装 @mpxjs/cli")]),s._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[s._v("npm")]),s._v(" i "),t("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-g")]),s._v(" @mpxjs/cli\n")])])]),t("p",[s._v("然后使用 cli 初始化项目")]),s._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[s._v("mpx create "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("<")]),s._v("project-name"),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(">")]),s._v("\n? 请选择小程序项目所属平台（目前仅微信下支持跨平台输出） wx\n? 是否需要跨小程序平台 No\n? 是否需要使用小程序云开发能力 No\n? 是否是个插件项目?（不清楚请选 No ！什么是插件项目请看微信官方文档！） Yes\n? 是否需要typescript No\n? 项目描述 A mpx project\n? 请输入小程序的Appid touristappid\n")])])]),t("p",[t("strong",[s._v("文件目录")])]),s._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v("  src\n  |-- miniprogram // 目录：放置一个小程序，用于调试插件。\n  |   --pages\n  |   --app.mpx // 引入插件调试\n  |-- plugin // 目录：插件代码目录\n  |   --components // 插件组件\n  |     -- list.mpx // 插件提供的列表组件\n  |   --plugin.json // 插件配置文件\n")])])]),t("p",[s._v("我们在 plugin/components/list.mpx 中开发插件中的列表组件，开发完成后，在plugin.json中我们向使用者小程序开放的所有自定义组件、页面和 js 接口，格式如下：")]),s._v(" "),t("p",[t("strong",[s._v("代码示例：")])]),s._v(" "),t("div",{staticClass:"language-html extra-class"},[t("pre",{pre:!0,attrs:{class:"language-html"}},[t("code",[s._v('{\n  "publicComponents": {\n    "list": "./components/list" // 使用mpx 中的webpack 路径引入规范\n  },\n  "pages": {\n    "hello-page": "./pages/hello-page"\n  }\n}\n')])])]),t("p",[s._v("运行 "),t("strong",[s._v("npm run build/serve")]),s._v(" 构建小程序产物，在 dist 文件夹下，生成最终的小程序插件产物，使用微信开发者工具，打开代码片段菜单栏，选择插件模式，打开 dist 文件夹。")]),s._v(" "),t("p",[s._v("我们可以像小程序一样预览和上传，但插件没有体验版，同时我们通常将 miniprogram 下的代码当做使用插件的小程序代码，来进行插件的调试和测试。")]),s._v(" "),t("p",[s._v("在开发完插件之后，我们可以上传插件代码，在小程序管理后台进行提交发布审核，审核通过后，就可以提供给第三方小程序使用我们的插件了。")]),s._v(" "),t("p",[s._v("使用 mpx 开发插件的优势相似于使用 mpx 开发小程序项目，可以使用 mpx 的各种增强特性以及跨平台输出的特性，提高开发效率和插件性能。")])])}),[],!1,null,null,null);t.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/75.093d716c.js b/docs-vuepress/.vuepress/dist/assets/js/75.093d716c.js
deleted file mode 100644
index 3f59514094..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/75.093d716c.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[75],{464:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"原生渐进迁移"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原生渐进迁移"}},[t._v("#")]),t._v(" 原生渐进迁移")]),t._v(" "),s("p",[s("strong",[t._v("已有项目")]),t._v(" 期望接入 Mpx，可根据项目或人力情况选择如何迁移，Mpx 不要求用户一次性用上框架的所有东西。")]),t._v(" "),s("ol",[s("li",[t._v("项目初始期：可以考虑一次性转为 Mpx，此时迁移成本比较低")]),t._v(" "),s("li",[t._v("项目成熟期：若人力有限，可选择逐步将原生小程序转为Mpx，而且 "),s("strong",[s("code",[t._v("不需要对原有代码做全局重写")])]),t._v("。可参考此demo："),s("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/examples/mpx-progressive",target:"_blank",rel:"noopener noreferrer"}},[t._v("Mpx渐进接入demo"),s("OutboundLink")],1),t._v("。\n"),s("ul",[s("li",[t._v("可以保持原有代码不变，新的组件、页面期望使用 Mpx 某些特性时才引入 Mpx。（推荐新模块引 Mpx，老模块逐步迁移 Mpx）")]),t._v(" "),s("li",[t._v("用 Mpx 编写新的页面、组件，再局部导出对应的页面、组件，反向应用到现有的原生小程序项目中。见"),s("a",{attrs:{href:"#%E5%AF%BC%E5%87%BA%E5%8E%9F%E7%94%9F"}},[t._v("导出原生")]),t._v("一节。(建议优先考虑老项目渐进改为 Mpx，而不是反向 Mpx 输出原生小程序的模式)")])])])]),t._v(" "),s("h2",{attrs:{id:"原生接入"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原生接入"}},[t._v("#")]),t._v(" 原生接入")]),t._v(" "),s("p",[t._v("有些时候，我们需要在"),s("code",[t._v("Mpx")]),t._v("工程中使用原生小程序组件:")]),t._v(" "),s("ul",[s("li",[t._v("通过"),s("code",[t._v("npm")]),t._v("引用安装第三包")]),t._v(" "),s("li",[t._v("将第三方包源码拷贝到本地"),s("code",[t._v("src")]),t._v("目录下")])]),t._v(" "),s("blockquote",[s("p",[t._v("注：Mpx并不限制第三方包的格式。开发者可以自己参考小程序官方的"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/trdparty.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("开发第三方自定义组件"),s("OutboundLink")],1)])]),t._v(" "),s("h3",{attrs:{id:"原理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原理"}},[t._v("#")]),t._v(" 原理")]),t._v(" "),s("p",[t._v("根据"),s("code",[t._v("unsingComponents")]),t._v("中设定的路径，"),s("code",[t._v("Mpx")]),t._v("会去查找包入口的js文件。然后提取入口文件所在的"),s("strong",[t._v("目录")]),t._v("中的"),s("code",[t._v("js")]),t._v(" "),s("code",[t._v("json")]),t._v(" "),s("code",[t._v("wxss")]),t._v(" "),s("code",[t._v("wxml")]),t._v("进行编译")]),t._v(" "),s("p",[t._v("编译带来的好处是，常规的拷贝操作，会造成组件内部的依赖缺失，以及冗余代码被打包。而执行了编译，使得"),s("code",[t._v("Mpx")]),t._v("可以精确的收集依赖，这表现在：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("js")]),t._v("文件中的依赖也会被打包，没有被加载的依赖库不会打包，减小体积")]),t._v(" "),s("li",[s("code",[t._v("json")]),t._v("文件的"),s("code",[t._v("usingComponents")]),t._v("会被解析，因此原生组件内部可以再引用其他原生组件，甚至是mpx组件")]),t._v(" "),s("li",[s("code",[t._v("wxss")]),t._v("中引用外部样式")]),t._v(" "),s("li",[s("code",[t._v("wxml")]),t._v("中的图片资源会被打包")])]),t._v(" "),s("blockquote",[s("p",[t._v("例如:使用第三方组件库时，很多组件可能并未使用，如果按照官方给出的组件库使用方式，会将整个组件库放进项目。"),s("br"),t._v("\n而采用Mpx这种方式则只会引入使用了的组件，所以如果你喜欢vant的按钮，iview的输入框，ColorUI的布局，欢迎尝试mpx。"),s("br"),t._v("\n（本段内容具有时效性，未来微信可能会有优化，毕竟一开始微信连npm都不支持）")])]),t._v(" "),s("h3",{attrs:{id:"例子"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#例子"}},[t._v("#")]),t._v(" 例子")]),t._v(" "),s("p",[s("strong",[t._v("文件目录")])]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("node_modules\n|-- npm-a-wx-component // npm安装\n|   --package.json\n|   --src\n|     --index.js\n|     --index.json\n|     --index.wxss\n|     --index.wxml\n|-- npm-b-wx-component // npm安装\n|   --package.json\n|   --src\n|     --index.js\n|     --index.json\n|     --index.wxss\n|     --index.wxml\ncomponent\n│-- container.mpx \n│-- com-a.mpx \n|-- src-wx-component // 手动拷贝\n|  --index.js\n|  --index.json\n|  --index.wxss\n|  --index.wxml\n\n")])])]),s("p",[s("strong",[t._v("container.mpx")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx组件 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("com-a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("com-a")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- npm安装的原生组件 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("npm-a-wx-component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("npm-a-wx-component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 手动拷贝到工程的原生组件 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("src-wx-component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("src-wx-component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"com-a"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./com-a"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"npm-a-wx-component"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"npm-a-wx-component"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"src-wx-component"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./src-wx-component"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("strong",[t._v("node_modules/npm-a-wx-component/src/index.wxml")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is a native component"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 原生组件内部使用原生组件 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("npm-b-wx-component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("npm-b-wx-component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("strong",[t._v("node_modules/npm-a-wx-component/src/index.json")])]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"npm-b-wx-component"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"npm-b-wx-component"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"原生page支持"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原生page支持"}},[t._v("#")]),t._v(" 原生page支持")]),t._v(" "),s("p",[t._v("原生自定义组件的支持已经基本能保证第三方 UI 库和 Mpx 的完美结合，但如果是用户存在已经开发好的小程序，在后续的迭代中发现了 Mpx 想使用，就需要用户手工将4个文件变成 Mpx 文件，这不够友好。")]),t._v(" "),s("p",[t._v("Mpx 提供了对原生页面的支持，允许项目中存在原生小程序文件（wxml,js,json,wxss）和 Mpx 文件，两者可以混合使用，通过 webpack 的构建将两者完美混合在一起生成最终的 dist。")]),t._v(" "),s("p",[t._v("使用方式和组件相似。")]),t._v(" "),s("h2",{attrs:{id:"原生导出"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原生导出"}},[t._v("#")]),t._v(" 原生导出")]),t._v(" "),s("p",[t._v("通过导出原生能力，你可以将一个 Mpx 项目融回到原生小程序项目中。有两种做法：")]),t._v(" "),s("ul",[s("li",[t._v("一是局部导出部分页面、组件")]),t._v(" "),s("li",[t._v("二是完整导出一个 Mpx 项目。")])]),t._v(" "),s("h3",{attrs:{id:"导出部分页面-组件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#导出部分页面-组件"}},[t._v("#")]),t._v(" 导出部分页面/组件")]),t._v(" "),s("p",[t._v("使用 Mpx 开发的页面/组件也可以局部导出为纯粹的普通的原生小程序页面/组件，整合到已有的原生小程序中。")]),t._v(" "),s("ol",[s("li",[t._v("修改 webpack config 中 entry 一项，将 app 改为对应的页面/组件即可。")])]),t._v(" "),s("p",[t._v("在路径后追加 ?isPage 来声明独立页面构建，构建产物为该页面的独立原生代码,在路径后追加 ?isComponent 来声明独立组件构建，构建产物为该组件的独立原生代码。")]),t._v(" "),s("p",[t._v("请参考下面的例子，"),s("code",[t._v("注意resolve时候最后的query不可以省略，一定要按正确的类型声明这是一个组件or页面。")])]),t._v(" "),s("p",[t._v("例子：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseWebpackConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'main-compile'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// entry point of our application")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此处以mpx脚手架生成的项目为例")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// before")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app: resolveSrc('app.mpx')")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// after，这里"pages/dindex"代表将原页面导出到output目录下的pages目录，文件名改为dindex.*')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'pages/dindex'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolveSrc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./pages/index.mpx?isPage'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ?后标识导出类型")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'components/dlist'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolveSrc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./components/list.mpx?isComponent'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ol",{attrs:{start:"2"}},[s("li",[t._v("执行 webpack 打包命令")]),t._v(" "),s("li",[t._v("拷贝打包后 dist 里所有文件到原生微信小程序项目根目录即可正常工作。")])]),t._v(" "),s("h3",{attrs:{id:"完整导出"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#完整导出"}},[t._v("#")]),t._v(" 完整导出")]),t._v(" "),s("p",[t._v("举例：假如我们使用 Mpx 开发了一个完整的项目，这个项目可能包含多个页面，这些页面组合完成一个完整的功能。一般可能是公共需求，比如登录/用户中心等公共模块")]),t._v(" "),s("p",[t._v("如果其它接入方想复用这一公共模块，考虑有以下两种情形")]),t._v(" "),s("ul",[s("li",[t._v("接入方也是 Mpx 框架开发的项目，直接迁移")]),t._v(" "),s("li",[t._v("接入方是原生开发，这时我们希望能将整个项目完整导出成原生，并让接入方顺利使用。")])]),t._v(" "),s("blockquote",[s("p",[t._v("其实观察下 Mpx 项目的打包结构，结构是非常简单的，页面/组件都很规矩地放在对应文件夹里的，所以删掉app.json/app.js/app.wxss/project.config.json几个文件后直接整个拷贝即可。")])]),t._v(" "),s("p",[t._v("完整导出整个项目的做法可以是这样：")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("确认页面路径不要冲突，一般这种公共模块项目，路径上就不要占据"),s("code",[t._v("/pages/index/index")]),t._v("，页面路径Mpx是不会修改的，所以定一个"),s("code",[t._v("/pages/{模块名}/{页面名}")]),t._v("就好。")])]),t._v(" "),s("li",[s("p",[t._v("app.*的内容都要删掉的，所以全局样式都应该写在独立的文件中（wxss），全局配置有什么特殊的要告知接入方（json），因为App.js会被舍弃，所以入口js要抽出来(js)。")])]),t._v(" "),s("li",[s("p",[t._v("如果有要导出的入口文件，需要给output增加配置：")])])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.conf")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("app")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolveSrc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("index")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolveSrc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'index.js'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 导出的入口文件，若没有可不写")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("output")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("libraryTarget")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commonjs2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("libraryExport")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 若export default导出需要写这个,module.exports可省略")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ... 略")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ol",{attrs:{start:"4"}},[s("li",[t._v("整个复制进"),s("strong",[t._v("接入方")]),t._v("的项目里，注册对应的页面，然后就可以正常使用了！")])])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/76.50d84c61.js b/docs-vuepress/.vuepress/dist/assets/js/76.50d84c61.js
deleted file mode 100644
index 59d46f5a8a..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/76.50d84c61.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[76],{424:function(t,s,a){"use strict";a.r(s);var n=a(4),r=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"依赖注入-provide-inject"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#依赖注入-provide-inject"}},[t._v("#")]),t._v(" 依赖注入（Provide/Inject）")]),t._v(" "),s("h2",{attrs:{id:"适用场景"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#适用场景"}},[t._v("#")]),t._v(" 适用场景")]),t._v(" "),s("p",[t._v("通常情况下，从父组件向子组件传递数据时，我们会使用 props 向下传递。如果在一颗组件层级嵌套很深的组件树中，某个深层的子组件依赖一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链路逐级传递下去，这就是 "),s("strong",[t._v("prop 逐级透传（prop-drilling）")]),t._v(" 问题。")]),t._v(" "),s("p",[t._v("使用 "),s("code",[t._v("provide")]),t._v(" 和 "),s("code",[t._v("inject")]),t._v(" 可以帮助我们解决这一麻烦问题：一个父组件相对于其所有的后代组件，会作为"),s("strong",[t._v("依赖提供者")]),t._v("。任何后代的组件树，无论层级有多深，都可以"),s("strong",[t._v("注入")]),t._v("由父组件提供给整条链路的依赖。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://s3-gz01.didistatic.com/packages-mait/img/bLipGWmlcm1732166788438.png",alt:"组件间 provide-inject 示意图"}})]),t._v(" "),s("h2",{attrs:{id:"provide-提供"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#provide-提供"}},[t._v("#")]),t._v(" Provide 提供")]),t._v(" "),s("h3",{attrs:{id:"组合式语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式语法"}},[t._v("#")]),t._v(" 组合式语法")]),t._v(" "),s("p",[t._v("在组合式语法中，需要使用到 "),s("code",[t._v("provide()")]),t._v(" 函数，"),s("code",[t._v("provide()")]),t._v(" 函数接收两个必填参数：")]),t._v(" "),s("ol",[s("li",[t._v("第一个参数表示"),s("strong",[t._v("注入名")]),t._v("，是一个字符串或者 "),s("code",[t._v("Symbol")]),t._v("。后代组件会用注入名来查找期望注入的值，一个组件可以多次调用 "),s("code",[t._v("provide()")]),t._v("，使用不同的注入名，注入不同的依赖值。使用 "),s("code",[t._v("Symbol")]),t._v(" 作为注入名时，只能使用组合式语法而非选项式语法。")]),t._v(" "),s("li",[t._v("第二个参数表示"),s("strong",[t._v("提供值")]),t._v("，值可以是任意类型，包括响应式的状态，比如一个 "),s("code",[t._v("ref")]),t._v("、"),s("code",[t._v("reactive")]),t._v(" 或者 "),s("code",[t._v("computed")]),t._v(" 计算值。")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script setup"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" computed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" provide"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 静态数据")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 注入名 */")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 值 */")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello!'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 Symbol 作为注入名")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" key "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Symbol")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello!'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 响应式数据")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" double "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'double'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" double"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("h3",{attrs:{id:"选项式语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#选项式语法"}},[t._v("#")]),t._v(" 选项式语法")]),t._v(" "),s("p",[t._v("选项式语法的 "),s("code",[t._v("setup()")]),t._v(" 中，用法和组合式 API 一致。另外针对选项式语法，我们也提供了 "),s("code",[t._v("provide")]),t._v(" 选项，它是"),s("strong",[t._v("一个对象或返回一个对象的函数")]),t._v("。")]),t._v(" "),s("p",[t._v("对于 "),s("code",[t._v("provide")]),t._v(" 对象上的每一个属性，后代组件会用其 key 为注入名查找期望注入的值，属性的值就是要提供的数据。")]),t._v(" "),s("p",[t._v("如果我们需要提供依赖当前组件实例的状态 (比如在 "),s("code",[t._v("data")]),t._v(" 属性中定义的数据)，那么需要使用函数形式的 "),s("code",[t._v("provide")]),t._v(" 选项。需要注意的是，这 "),s("strong",[t._v("并不会")]),t._v(" 使注入保持响应性，如果需要保证注入方和供给方之间的响应性链接，我们需要使用 "),s("code",[t._v("computed()")]),t._v(" 函数提供一个计算属性。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("div",{staticClass:"highlight-lines"},[s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("div",{staticClass:"highlighted"},[t._v(" ")]),s("br"),s("br"),s("br"),s("br"),s("br")]),s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  data"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1. 静态数据可以选择直接使用对象形式")]),t._v("\n  provide"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    message"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2. 选择使用函数的形式，可以访问到 `this`")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 显式提供一个计算属性")]),t._v("\n      message"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("h3",{attrs:{id:"应用级顶层-provide"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#应用级顶层-provide"}},[t._v("#")]),t._v(" 应用级顶层 provide")]),t._v(" "),s("p",[t._v("前面介绍的是在一个组件中提供依赖，我们还可以在整个应用层面提供依赖，这样整个应用中所有组件都可以使用。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 应用层 provide")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'appMessage'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'provide from App scope!'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"inject-注入"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#inject-注入"}},[t._v("#")]),t._v(" Inject 注入")]),t._v(" "),s("h3",{attrs:{id:"组合式语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式语法"}},[t._v("#")]),t._v(" 组合式语法")]),t._v(" "),s("p",[s("code",[t._v("inject()")]),t._v(" 函数最多接收三个参数：")]),t._v(" "),s("ul",[s("li",[t._v("第一个参数必填，表示"),s("strong",[t._v("注入名")]),t._v("，字符串类型。")]),t._v(" "),s("li",[t._v("第二个参数可选，表示"),s("strong",[t._v("默认值")]),t._v("。\n"),s("ul",[s("li",[t._v("如果在注入一个值时不确定是否有提供者，那么应该声明一个默认值。如果既没有提供者也没有默认值，则会抛出一个运行时警告。")])])]),t._v(" "),s("li",[t._v("第三个参数可选，表示"),s("strong",[t._v("是否将默认值视为工厂函数")]),t._v("，布尔类型。\n"),s("ul",[s("li",[t._v("某些场景下，默认值可能需要通过调用一个函数或初始化一个类来生成，或者某些非基础类型数据创建开销比较大，请使用工厂函数来创建默认值。")])])])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script setup"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" inject "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注入 message 依赖")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建默认值")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用工厂函数创建默认值")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'key'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ExpensiveClass")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("如果提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值。这使得注入方能够通过 ref 对象和提供方保持响应性链接。")]),t._v(" "),s("h3",{attrs:{id:"选项式语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#选项式语法"}},[t._v("#")]),t._v(" 选项式语法")]),t._v(" "),s("p",[t._v("选项式语法的 "),s("code",[t._v("setup()")]),t._v(" 中，用法和组合式 API 一致。另外针对选项式语法，我们也提供了 "),s("code",[t._v("inject")]),t._v(" 选项，它是"),s("strong",[t._v("一个数组或一个对象")]),t._v("。")]),t._v(" "),s("ol",[s("li",[s("strong",[t._v("数组")]),t._v("形式使用。数组中的每一项对应一个注入名，注入的属性会以同名的 key 暴露到组件实例上。如下示例中，注入名 "),s("code",[t._v('"message"')]),t._v(" 在注入后以 "),s("code",[t._v("this.message")]),t._v(" 的形式暴露。另外，"),s("code",[t._v("inject")]),t._v(" 会在组件自身的状态"),s("strong",[t._v("之前")]),t._v("被解析，意味着你可以在 "),s("code",[t._v("data()")]),t._v(" 中访问到注入的属性。")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("div",{staticClass:"highlight-lines"},[s("br"),s("br"),s("br"),s("br"),s("br"),s("div",{staticClass:"highlighted"},[t._v(" ")]),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br")]),s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 数组形式使用 `inject` 选项")]),t._v("\n  inject"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 可以在 `data()` 中访问到注入的属性")]),t._v("\n      fullMessage"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      fullCount"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("ol",{attrs:{start:"2"}},[s("li",[s("strong",[t._v("对象")]),t._v("形式使用。相比数组形式，对象形式支持注入"),s("strong",[t._v("别名")]),t._v("和"),s("strong",[t._v("默认值")]),t._v("。如下示例，通过 "),s("code",[t._v("from")]),t._v(" 属性指定原注入名，通过 "),s("code",[t._v("default")]),t._v(" 属性指定默认值。")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  inject"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    myCount"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 按注入名 'count' 注入")]),t._v("\n    message"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      from"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'message'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 'message' 是原注入名，当与原注入名同名时，这个属性是可选的")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default value'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 默认值")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    user"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 与原注入名 'user' 同名")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("default")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Wang'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用工厂函数创建默认值")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("h2",{attrs:{id:"避免注入名潜在冲突"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#避免注入名潜在冲突"}},[t._v("#")]),t._v(" 避免注入名潜在冲突")]),t._v(" "),s("p",[t._v("如果你正在构建大型的应用，包含非常多的依赖提供，那么随处定义的注入名容易存在潜在的同名冲突。在 Mpx 实现中，同名的注入名会覆盖之前已有的注入名对应的提供值。")]),t._v(" "),s("p",[t._v("针对大型应用的最佳实践，我们通常推荐在一个单独的文件中导出这些注入名，可以结合业务模块功能来统一注入名的命名和管理规范。"),s("em",[t._v("以下示例仅供参考，具体实现请依据自身实际场景确定。")])]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/** 推荐创建一个单独的文件来管理和导出注入名 */")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1. 使用枚举类型")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" InjectionKeys "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  user"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'user'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  auth"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auth'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  product"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'product'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2. 按业务模块功能划分命名，不容易命名冲突，可读性高")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" InjectionKeys "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  user"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    service"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'user:service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    store"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'user:store'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  auth"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    service"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auth:service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    token"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auth:token'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  product"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    list"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'product:list'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    details"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'product:details'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3. 使用 Symbol 创建唯一注入名，或再结合命名空间")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" InjectionKeys "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  user"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Symbol")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'user'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  auth"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Symbol")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auth'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  product"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Symbol")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'product'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4. 自行实现类似 Symbol polyfill 的命名生成函数")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("createInjectionKey")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("module"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("module")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" InjectionKeys "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  user"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createInjectionKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'user'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  auth"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createInjectionKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auth'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'token'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  product"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createInjectionKey")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'product'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'list'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"ts-类型支持"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ts-类型支持"}},[t._v("#")]),t._v(" TS 类型支持")]),t._v(" "),s("p",[t._v("直接使用字符串注入 key 时，注入值的类型默认推导会是 "),s("code",[t._v("unknown")]),t._v("，需要通过泛型参数显式声明。因为无法保证运行时一定存在这个 provide，所以推导类型也可能是 "),s("code",[t._v("undefined")]),t._v("。当声明一个默认值后，这个 "),s("code",[t._v("undefined")]),t._v(" 类型就可以成功被移除。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script setup lang"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"ts"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" inject "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 类型：unknown")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 类型：string | undefined")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 类型：string ✅")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),s("p",[t._v("当然，如果你已经确定注入名肯定被提供了，也可以强制断言。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("as")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n")])])]),s("p",[t._v("如果使用 "),s("code",[t._v("Symbol")]),t._v(" 作为注入名，可以使用我们提供的 "),s("code",[t._v("InjectionKey")]),t._v(" 泛型接口，使用它对注入名进行注解或者断言后，可以用来在不同组件之间同步注入值的类型。建议将注入 key 放在单独文件，这样方便在多个组件中导入使用。")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("div",{staticClass:"highlight-lines"},[s("br"),s("br"),s("br"),s("div",{staticClass:"highlighted"},[t._v(" ")]),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br"),s("br")]),s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" provide"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" inject "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" InjectionKey "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" key"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" InjectionKey"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Symbol")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 类型注解")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// const key = Symbol() as InjectionKey<string> // 类型断言写法等效")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("provide")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'foo'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 若默认值是非字符串则会 TS 类型报错")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ✅ foo 的类型：string | undefined")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default value'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ✅ foo 的类型：string")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foo "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("inject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ❌ 默认值是非字符串则会 TS 类型报错")]),t._v("\n")])])]),s("h2",{attrs:{id:"跨端差异"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#跨端差异"}},[t._v("#")]),t._v(" 跨端差异")]),t._v(" "),s("ul",[s("li",[t._v("Mpx 输出 Web 端后，使用规则与 Vue 一致，"),s("code",[t._v("provide/inject")]),t._v(" 的生效范围严格遵行父子组件关系，只有父组件可以成功向子孙组件提供依赖。")]),t._v(" "),s("li",[t._v("Mpx 输出小程序端会略有不同，由于小程序原生框架限制，暂时无法在子组件获取真实渲染时的父组件引用关系，所以不能像 Vue 那样基于父组件原型继承来实现 "),s("code",[t._v("provide")]),t._v("。在 Mpx 底层实现中，我们将组件层的 "),s("code",[t._v("provide")]),t._v(" 挂载在所属页面实例上，相当于将组件 scope 提升到页面 scope，可以理解成一种“降级模拟”。当然，这并不影响父组件向子孙组件 "),s("code",[t._v("provide")]),t._v(" 的能力，只是会额外存在“"),s("strong",[t._v("副作用")]),t._v("”：同一页面中的组件可以向页面中其他所有在其之后渲染子组件提供依赖。比如同一页面下的组件 A 可以向后渲染的兄弟组件 B 的子孙组件提供数据，这在 Web 端是不允许的。因此，针对小程序端可能出现的“副作用”需要开发者自行保证，可以结合上述注入名的管理优化来规避。")])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/77.7bc0f013.js b/docs-vuepress/.vuepress/dist/assets/js/77.7bc0f013.js
deleted file mode 100644
index 499578dcb8..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/77.7bc0f013.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[77],{422:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"资源路径获取"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#资源路径获取"}},[t._v("#")]),t._v(" 资源路径获取")]),t._v(" "),s("p",[t._v("Mpx在构建时，如果引用的页面不存在于当前 app.mpx 所在的上下文中，例如存在于 npm 包中，为避免和本地声明的其他 page 路径冲突，Mpx 会对页面路径进行 hash 化处理；\n处理组件路径时也会添加 hash 防止路径名冲突，hash 化处理后最终的文件名是 name+hash+ext 的格式；对于图片等资源路径输出也会进行 hash 化处理。")]),t._v(" "),s("p",[t._v("开发者经常会面临以下问题：")]),t._v(" "),s("ul",[s("li",[t._v("希望获取 hash 化之后的页面/组件/图片路径")]),t._v(" "),s("li",[t._v("在页面路径变化时(分包名更改或页面名修改)，需要手动修改散落在代码中各处写死的资源路径")])]),t._v(" "),s("h2",{attrs:{id:"resolve"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#resolve"}},[t._v("#")]),t._v(" ?resolve")]),t._v(" "),s("p",[t._v("为了解决以上开发者痛点，Mpx 框架提供了资源路径自动获取能力，只需要在资源引用路径后加上?resolve，\nMpx 在编译时会生成一个资源路径处理模块，该模块暴露出资源对应的真实输出路径，从而可以实现在页面/组件/图片路径变化时正确获取输出路径，并避免写死资源路径。")]),t._v(" "),s("p",[t._v("获取并使用页面路径")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.json 中注册分包，此处仅列出 packages 语法示例")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("packages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@someNpm/app.mpx?root=someNpm'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// import 语法获取并使用页面路径")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" subPackageIndexPage "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@someNpm/subpackage/pages/index.mpx?resolve'")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" subPackageIndexPage\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// require 语法获取并使用页面路径")]),t._v("\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@someNpm/subpackage/pages/index.mpx?resolve'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("获取并使用组件资源路径")]),t._v(" "),s("blockquote",[s("p",[t._v("我们在使用小程序 relations 语法时，需要获取组件路径，这时就可使用 ?resolve 语法")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" someComponentItem "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./some-component-item?resolve'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("relations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("someComponentItem"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'child'")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("获取并使用图像资源路径")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{someStyle}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" iconPath "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../assets/icon.png?resolve'")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("someStyle")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("background-image url(")]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("iconPath"),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/78.e2ded2d4.js b/docs-vuepress/.vuepress/dist/assets/js/78.e2ded2d4.js
deleted file mode 100644
index 1e63812874..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/78.e2ded2d4.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[78],{426:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"包体积分析"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#包体积分析"}},[t._v("#")]),t._v(" 包体积分析")]),t._v(" "),s("p",[t._v("目前业内主流小程序平台都对小程序的代码包设置了严格的体积限制，微信是单包 2MB，总包 16MB，支付宝是单包 2MB，总包 8MB；包体积作为有限的资源，在小程序业务开发中异常重要，特别对于像滴滴出行这样的大型复杂业务。")]),t._v(" "),s("p",[t._v("Mpx 在包体积控制上做了很多工作，主要包括：")]),t._v(" "),s("ul",[s("li",[s("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#分包"}},[t._v("完善的分包支持")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/advance/npm.html"}},[t._v("基于依赖声明的按需构建")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/advance/image-process.html"}},[t._v("图像资源处理")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/css.html#公共样式复用"}},[t._v("公共样式复用")])],1)]),t._v(" "),s("p",[t._v("此外由于 Mpx 的编译构建完全基于 webpack，也能够直接复用webpack生态自带的代码压缩，模块复用，tree shaking，side effects 等能力对代码体积进行优化。")]),t._v(" "),s("p",[t._v("但是系统能做的工作终究有限，在一些人为不规范操作的影响下，最终输出的项目依然可能存在大量优化空间，比如在业务中不会被调用但无法被 tree shaking / side effects 移除的代码，因为 npm 依赖版本不统一造成的重复依赖，未经压缩的图像静态资源等，在大型项目中，这些问题想要被发现会非常困难，因此我们非常需要一个体积分析工具来管控项目体积和发现隐藏的体积问题。")]),t._v(" "),s("h2",{attrs:{id:"与-webpack-bundle-analyzer-的区别"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#与-webpack-bundle-analyzer-的区别"}},[t._v("#")]),t._v(" 与 webpack-bundle-analyzer 的区别")]),t._v(" "),s("p",[s("code",[t._v("webpack-bundle-analyzer")]),t._v(" 提供了非常完善的体积分析和可视化展示能力，但是在 Mpx 构建输出小程序场景下，其所提供的能力还是有所缺失：")]),t._v(" "),s("ul",[s("li",[t._v("只能对 js 资源进行模块体积分析，而小程序的输出中包含了大量的非 js 静态资源，如 wxss / wxml / json 等，这些资源的体积都不会被统计分析；")]),t._v(" "),s("li",[t._v("没有针对某个分包进行体积分析的能力，由于小程序中存在对单一分包的体积限制，我们的体积往往会集中在主包和主要业务分包中，以分包维度进行体积分析的能力非常必要；")]),t._v(" "),s("li",[t._v("无法以特定的输入范围为维度进行体积的统计分析，这个能力诉求更多地出现在跨团队合作的复杂小程序当中，如滴滴出行。在这种场景下，接入合作的各方会更加关注己方引入的体积，并进行针对性地优化。")])]),t._v(" "),s("p",[t._v("由于上述原因，我们提供了"),s("code",[t._v("@mpxjs/size-report")]),t._v("插件提供包体积分析能力，弥补了 "),s("code",[t._v("webpack-bundle-analyzer")]),t._v(" 的能力缺失，为业务提供了便捷准确的包体积管控优化抓手。")]),t._v(" "),s("h2",{attrs:{id:"使用方法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用方法"}},[t._v("#")]),t._v(" 使用方法")]),t._v(" "),s("h4",{attrs:{id:"安装插件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装插件"}},[t._v("#")]),t._v(" 安装插件")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("npm i @mpxjs/size-report --save-dev\n")])])]),s("h4",{attrs:{id:"配置插件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置插件"}},[t._v("#")]),t._v(" 配置插件")]),t._v(" "),s("p",[t._v("在项目 webpack.config 文件中配置使用 "),s("code",[t._v("@mpxjs/size-report")]),t._v(" 插件即可使用，简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// vue.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxSizeReportPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/size-report'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configureWebpack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MpxSizeReportPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 本地可视化服务相关配置")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("server")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("enable")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否启动本地服务，非必填，默认 true")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("autoOpenBrowser")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否自动打开可视化平台页面，非必填，默认 true")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("port")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 本地服务端口，非必填，默认 0(随机端口)")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("host")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'127.0.0.1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 本地服务host，非必填")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 体积报告生成后输出的文件地址名，路径相对为 dist/wx 或者 dist/ali")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("filename")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../report.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置阈值，此处代表总包体积阈值为 16MB，分包体积阈值为 2MB，超出将会触发编译报错提醒，该报错不阻断构建")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("threshold")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("size")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'16MB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("packages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'2MB'")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("groups")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 分组名称")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vant'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry，如下所示的分组配置将计算项目中引入的 vant 组件带来的体积占用")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entryRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@vant/weapp'")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pageGroup'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 每个分组中可分别配置阈值，如果不配置则表示")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("threshold")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'500KB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entryRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/pages/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/pages/user'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someSdk'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entryRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@somegroup/someSdk/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@somegroup/someSdk2/index'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 有的时候你可能希望计算纯 js 入口引入的体积（不包含组件和页面），这种情况下需要使用 noEntryRules")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("noEntryRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'src/lib/sdk.js'")]),t._v("\n                      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n                  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否收集页面维度体积详情，默认 false")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("reportPages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否收集资源维度体积详情，默认 false")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("reportAssets")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 是否收集冗余资源，默认 false")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("reportRedundance")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 展示某些分包资源的引用来源信息，默认为 []")]),t._v("\n              "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("showEntrysPackages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'main'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("参考上述示例进行配置后，构建代码后，dist 目录下会产出 report.json 文件，里边是项目的具体体积信息，关于输入 json 的简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v('{\n    // 项目体积概要，大部分情况下，我们只需要看这部分就足够了\n    "sizeSummary": {\n        // 分组体积概要，与上述配置文件中的 groups 对应\n        "groups": [\n            {\n                "name": "vant",\n                // 只有该分组包含的模块体积\n                "selfSize": "164.75KiB",\n                "selfSizeInfo": {\n                  // 该分组所占 shansong\n                  "shansong": "164.75KiB"\n                },\n                "sharedSize": "885.68KiB",\n                "sharedSizeInfo": {\n                  "main": "885.68KiB"\n                }\n            },\n        ],\n        // 项目各个分包以及主包体积概要\n        "sizeInfo": {\n            "main": "1000KiB",\n            "fenbao1": "200kiB"\n        },\n        // 项目总体积\n        "totalSize": "13468.85KiB",\n        // 项目静态资源总体积\n        "staticSize": "4880.58KiB",\n        // 项目chunk 文件总体积\n        "chunkSize": "8587.70KiB",\n        // 非依赖项体积大小\n        "copySize": "1KiB"\n    },\n    // 分组资源详细体积\n    "groupsSizeInfo": [\n        {\n            "name": "groupOne",\n            // group 自身包含的 module 详情列表\n            "selfEntryModules": [],\n            // group 与其他group 共有的 module 详情列表\n            "sharedEntryModules": [],\n            // 自身包含 module 体积\n            "selfSize": "",\n            // 自身包含 module 体积详情\n            "selfSizeInfo": {\n                "main": {},\n                "homepage": {}\n            },\n            // 与其他 group 共有 module 体积\n            "sharedSize": "",\n            // 与其他 group 共有 module 体积详情\n            "sharedSizeInfo": {\n                "main": {},\n                "homepage": {}\n            },\n\n        }\n    ],\n    // 项目资源详细体积报告\n    "assetsSizeInfo": {\n        "assets": [{\n            // 资源类型\n            "type": "chunk",\n            "name": "test",\n            // 分包名\n            "packageName": "main",\n            "size": "",\n            "modules": []\n        }]\n    }\n}\n')])])]),s("p",[t._v("与此同时，如果你开启了本地可视化平台服务，可以直接通过可视化平台查看项目体积构成。默认开启自动打开平台网页或者手动打开后，整体页面展示如下图：")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://mpxjs.cn",target:"_blank",rel:"noopener noreferrer"}},[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/feat1.png",alt:"size-report"}}),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("可视化平台中包含三部分功能，第一个体积分析如上图所示，主要是展示整体项目的体积总览，以及 group 体积列表和分包体积列表。")]),t._v(" "),s("p",[t._v("第二个功能是体积详情模块，在该模块中，可以最小颗粒度的查看包体积构成，通过 table 表格的层层展开可看到每个 group 中包含的分包，点击分包可看到该分包包含的静态资源和 js 模块详细列表，同时聚合模式可将分散的模块整合为具体的npm包名，方便宏观查看。此外为了方便用户定向查看某个特定资源的分布情况，列表上方可进行资源路径/名称搜索，该搜索支持模糊匹配，搜索结果为该资源在项目中 group 和 分包的分布情况。")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://mpxjs.cn",target:"_blank",rel:"noopener noreferrer"}},[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/feat2.png",alt:"size-report"}}),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("第三个功能为体积对比功能，这里主要进行项目不同版本之间的体积大小变化比较，体积对比依赖插件生成的json文件，通过该功能，可具体的分析出包体积具体增大的group，分包，以及模块，给包体积优化提供定向目标。")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://mpxjs.cn",target:"_blank",rel:"noopener noreferrer"}},[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/feat3.png",alt:"size-report"}}),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"业务实践"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#业务实践"}},[t._v("#")]),t._v(" 业务实践")]),t._v(" "),s("p",[t._v("目前 sizeReport 工具在滴滴出行小程序, 花小猪, 青桔骑行, 特惠出行小程序以及一部分外部小程序中使用。")]),t._v(" "),s("p",[t._v("在滴滴出行小程序中，配置使用 @mpxjs/size-report 插件后使包体积管控和优化更加工程化：")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("在 sizeReport 检测结果文件中，通过对 groupsSizeInfo 和 assetsSizeInfo 中assets 与 module 体积分析，我们发现了部分体积较大图片文件和css资源，通过将图片存 CDN 和删除冗余文件；")])]),t._v(" "),s("li",[s("p",[t._v("基于各小程序平台对小程序总包，主包，分包有大小限制的原则，给各接入方配置了主包和首页分包体积大小占比阈值，在构建时检测到包体积超过阈值时，抛出 error 阻断构建，开发者可通过 size-report.json 中详细的包体积分析准确的找到体积变动点。")])])]),t._v(" "),s("h2",{attrs:{id:"总结"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#总结"}},[t._v("#")]),t._v(" 总结")]),t._v(" "),s("p",[t._v("Mpx sizeReport 工具对小程序体积计算有更细微(模块级别)的体积展示。 更加适合小程序开发场景的包体积分析。")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/79.f7eeb76b.js b/docs-vuepress/.vuepress/dist/assets/js/79.f7eeb76b.js
deleted file mode 100644
index 57ab84eb82..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/79.f7eeb76b.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[79],{425:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"ssr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ssr"}},[t._v("#")]),t._v(" SSR")]),t._v(" "),s("p",[t._v("近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，但过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 2.9 版本中，我们对 Mpx 输出 web 流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整支持了基于 Vue 和 Pinia 的 SSR 技术方案。")]),t._v(" "),s("h2",{attrs:{id:"配置使用-ssr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置使用-ssr"}},[t._v("#")]),t._v(" 配置使用 SSR")]),t._v(" "),s("p",[t._v("在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85",alt:"Vue SSR流程"}})]),t._v(" "),s("p",[t._v("Mpx SSR 核心基于 Vue SSR 实现，大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：")]),t._v(" "),s("h3",{attrs:{id:"构建server-client-bundle"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#构建server-client-bundle"}},[t._v("#")]),t._v(" 构建server/client bundle")]),t._v(" "),s("p",[t._v("SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。\n在 Vue 中，我们需要提供 "),s("code",[t._v("entry-server.js")]),t._v(" 和 "),s("code",[t._v("entry-client.js")]),t._v(" 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 "),s("code",[t._v("app.mpx")]),t._v(" 作为统一构建入口，无需区分 server 和 client。")]),t._v(" "),s("h4",{attrs:{id:"服务端构建配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#服务端构建配置"}},[t._v("#")]),t._v(" 服务端构建配置")]),t._v(" "),s("p",[t._v("服务端配置中除了将 entry 制定为 "),s("code",[t._v("app.mpx")]),t._v(" 及其它基础配置外，最重要的是安装 "),s("code",[t._v("vue-server-renderer")]),t._v(" 包中提供的  "),s("code",[t._v("server-plugin")]),t._v(" 插件，该插件能够构建产出 "),s("code",[t._v("vue-ssr-server-bundle.json")]),t._v(" 文件供 "),s("code",[t._v("renderer")]),t._v(" 后续消费。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.server.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" VueSSRServerPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer/server-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 entry 指向项目的 app.mpx 文件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 产出 `vue-ssr-server-bundle.json`")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueSSRServerPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更加详细的配置说明可参考 "),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/build-config.html#server-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue SSR的服务端配置"),s("OutboundLink")],1)]),t._v(" "),s("h4",{attrs:{id:"客户端构建配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#客户端构建配置"}},[t._v("#")]),t._v(" 客户端构建配置")]),t._v(" "),s("p",[t._v("类似服务端构建配置，在客户端构建中我们需要使用 "),s("code",[t._v("vue-server-renderer")]),t._v(" 包中 "),s("code",[t._v("client-plugin")]),t._v(" 插件来帮助我们生成客户端环境的资源清单 "),s("code",[t._v("vue-ssr-client-manifest.json")]),t._v("，并供 "),s("code",[t._v("renderer")]),t._v(" 后续消费。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// webpack.client.config.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" VueSSRClientPlugin "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer/client-plugin'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("baseConfig"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 entry 指向项目的 app.mpx 文件")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("entry")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app.mpx'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("plugins")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 产出 `vue-ssr-client-manifest.json`。")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueSSRClientPlugin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("更加详细的配置说明可参考 "),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/build-config.html#client-config",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue SSR的客户端配置"),s("OutboundLink")],1)]),t._v(" "),s("h3",{attrs:{id:"准备页面模版"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#准备页面模版"}},[t._v("#")]),t._v(" 准备页面模版")]),t._v(" "),s("p",[t._v("SSR 渲染中，我们创建 "),s("code",[t._v("renderer")]),t._v(" 需要一个页面模板，简单的示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token doctype"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<!")]),s("span",{pre:!0,attrs:{class:"token doctype-tag"}},[t._v("DOCTYPE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token name"}},[t._v("html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("html")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("en"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Hello"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("title")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("head")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--vue-ssr-outlet--\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("body")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 "),s("code",[t._v("\x3c!--vue-ssr-outlet--\x3e")]),t._v("注释，标记 SSR 渲染产物的插入位置，如使用 "),s("code",[t._v("@mpxjs/cli")]),t._v(" 脚手架创建 SSR 项目，该模版已经内置于脚手架中。")]),t._v(" "),s("h3",{attrs:{id:"集成启动-ssr-服务"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#集成启动-ssr-服务"}},[t._v("#")]),t._v(" 集成启动 SSR 服务")]),t._v(" "),s("p",[t._v("当我们准备好页面模版和双端构建产物后，我们就可以创建 "),s("code",[t._v("renderer")]),t._v(" 并与 Node 服务进行集成，启动 SSR 服务，下面以 "),s("code",[t._v("express")]),t._v(" 为例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//server.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" app "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'express'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createBundleRenderer "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-server-renderer'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 vue-server-renderer/server-plugin 生成的文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" serverBundle "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../dist/server/vue-ssr-server-bundle.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 vue-server-renderer/client-plugin 生成的文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" clientManifest "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../dist/client/vue-ssr-client-manifest.json'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 页面模版文件")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" template "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fs'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("readFileSync")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../src/index.template.html'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'utf-8'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 创建 renderer 渲染器")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" renderer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createBundleRenderer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("serverBundle"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("runInNewContext")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    template"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    clientManifest"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注册启动 SSR 服务")]),t._v("\napp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'*'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("req"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" req"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  renderer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("renderToString")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" html")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  \t"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  \t  res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("status")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Internal Server Error'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  \tres"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("html"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\napp"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("listen")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8080")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"ssr-生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ssr-生命周期"}},[t._v("#")]),t._v(" SSR 生命周期")]),t._v(" "),s("p",[t._v("在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是"),s("code",[t._v("onAppInit")]),t._v("、"),s("code",[t._v("serverPrefetch")]),t._v(" 和 "),s("code",[t._v("onSSRAppCreated")]),t._v("，以统一服务端与客户端的构建入口，下面展开介绍：")]),t._v(" "),s("h3",{attrs:{id:"onappinit"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onappinit"}},[t._v("#")]),t._v(" onAppInit")]),t._v(" "),s("blockquote",[s("p",[t._v("该生命周期仅可在 App 中使用")])]),t._v(" "),s("p",[t._v("在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，"),s("code",[t._v("onAppInit")]),t._v(" 生命周期会在应用创建 "),s("code",[t._v("new Vue(...)")]),t._v(" 前被调用，其执行的返回结果会被合并到创建应用的 "),s("code",[t._v("options")]),t._v(" 中")]),t._v(" "),s("p",[t._v("很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 "),s("code",[t._v("@mpxjs/pinia")]),t._v(" 作为全局状态管理工具，我们可以在 "),s("code",[t._v("onAppInit")]),t._v(" 中返回全新的 "),s("code",[t._v("pinia")]),t._v(" 示例避免产生跨请求状态污染，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPinia "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/pinia'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onAppInit")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" pinia "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPinia")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      pinia\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("SSR 中仅支持使用 "),s("code",[t._v("@mpxjs/pinia")]),t._v(" 作为状态管理工具，"),s("code",[t._v("@mpxjs/store")]),t._v(" 暂不支持")])]),t._v(" "),s("h3",{attrs:{id:"serverprefetch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#serverprefetch"}},[t._v("#")]),t._v(" serverPrefetch")]),t._v(" "),s("blockquote",[s("p",[t._v("该生命周期可在 App/Page/Component 中使用，只在服务端渲染时执行")])]),t._v(" "),s("p",[t._v("当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：")]),t._v(" "),s("p",[t._v("选项式 API：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useStore "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store/index'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("serverPrefetch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" query "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("query\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the promise from the action, fetch data and update state")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("query"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("组合式 API：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" onServerPrefetch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getCurrentInstance"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useStore "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store/index'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("userStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onServerPrefetch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" query "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getCurrentInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("proxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$route"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("query\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the promise from the action, fetch data and update state")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("query"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("关于数据预拉取更详细的说明可以查看"),s("a",{attrs:{href:"https://v2.ssr.vuejs.org/guide/data.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("h3",{attrs:{id:"onssrappcreated"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#onssrappcreated"}},[t._v("#")]),t._v(" onSSRAppCreated")]),t._v(" "),s("blockquote",[s("p",[t._v("该生命周期仅可在 App 中使用，只在服务端渲染时执行")])]),t._v(" "),s("p",[t._v("在 Vue SSR 项目中，我们会在 "),s("code",[t._v("entry-server.js")]),t._v(" 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 "),s("code",[t._v("app")]),t._v("。")]),t._v(" "),s("p",[t._v("在 Mpx SSR 中，我们将这部分逻辑整合在 "),s("code",[t._v("onSSRAppCreated")]),t._v(" 中执行，该生命周期执行时用户可以从参数中获取应用实例 "),s("code",[t._v("app")]),t._v("、路由实例 "),s("code",[t._v("router")]),t._v("、数据管理实例 "),s("code",[t._v("pinia")]),t._v(" 和 SSR 上下文 "),s("code",[t._v("context")]),t._v("，在完成必要的操作后，该生命周期需要返回一个 "),s("code",[t._v("resolve(app)")]),t._v(" 的 promise。")]),t._v(" "),s("p",[t._v("通常我们会在 "),s("code",[t._v("onSSRAppCreated")]),t._v(" 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.mpx")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...,")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onSSRAppCreated")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 设置服务端路由路径")]),t._v("\n        router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 应用完成渲染时执行")]),t._v("\n          context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("rendered")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将服务端渲染后得到的 pinia.state 同步到 context.state 中，")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注入到 HTML 中，并在客户端运行时再读取同步")]),t._v("\n            context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" pinia"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value\n          "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回应用程序实例")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("上述示例代码等价于 Vue 中的 "),s("code",[t._v("entry-server.js")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// entry-server.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./app'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    router"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This `rendered` hook is called when the app has finished rendering")]),t._v("\n      context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("rendered")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// After the app is rendered, our store is now")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// filled with the state from our components.")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// When we attach the state to the context, and the `template` option")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// is used for the renderer, the state will automatically be")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// serialized and injected into the HTML as `window.__INITIAL_STATE__`.")]),t._v("\n        context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。")]),t._v(" "),s("h2",{attrs:{id:"其他注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#其他注意事项"}},[t._v("#")]),t._v(" 其他注意事项")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。")])]),t._v(" "),s("li",[s("p",[t._v("在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。")])]),t._v(" "),s("li",[s("p",[t._v("由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 "),s("code",[t._v("mpx.config.webRouteConfig")]),t._v(" 将路由模式设置成 "),s("code",[t._v("history")]),t._v(" 模式。")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/8.ba7f6ace.js b/docs-vuepress/.vuepress/dist/assets/js/8.ba7f6ace.js
deleted file mode 100644
index d3454032bf..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/8.ba7f6ace.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{341:function(t,e,n){},360:function(t,e,n){"use strict";n(341)},382:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:(t,{props:e,slots:n})=>t("span",{class:["badge",e.type],style:{verticalAlign:e.vertical}},e.text||n().default)},p=(n(360),n(4)),l=Object(p.a)(i,void 0,void 0,!1,null,"59f00772",null);e.default=l.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/80.41418749.js b/docs-vuepress/.vuepress/dist/assets/js/80.41418749.js
deleted file mode 100644
index 2362e82125..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/80.41418749.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[80],{427:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"状态管理-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#状态管理-store"}},[t._v("#")]),t._v(" 状态管理（store）")]),t._v(" "),s("p",[t._v("Mpx 参考 vuex 设计实现了外部状态管理系统（store），其中的概念与 api 与 vuex 保持一致，为了更好地支持状态模块管理和跨团队合作场景，我们提出多实例 store 作为 vuex 中 modules 的替代方案，该方案在模块拆分及合并上的灵活性远高于 modules。")]),t._v(" "),s("h2",{attrs:{id:"介绍"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#介绍"}},[t._v("#")]),t._v(" 介绍")]),t._v(" "),s("p",[s("code",[t._v("Store")]),t._v(" 是一个全局状态管理容器，能够轻松实现复杂场景下的组件通信需求，store 与简单的全局状态对象主要有以下两点不同：")]),t._v(" "),s("ol",[s("li",[s("p",[t._v("Store 中存放的状态是响应式的。当用户将 store 中的状态注入到组件以后，若 store 中状态发生变化，那么对应的组件也会得到更新。")])]),t._v(" "),s("li",[s("p",[t._v("你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径是显式地提交变更（commit mutation），这种方式能使整个应用中的状态变更变得可回朔可追踪，同时也更加安全。")])])]),t._v(" "),s("h3",{attrs:{id:"创建-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#创建-store"}},[t._v("#")]),t._v(" 创建 store")]),t._v(" "),s("p",[t._v("让我们来创建一个简单 store。创建过程直截了当，仅需要提供一个初始 state 对象和一些 mutation 方法，并调用 Mpx 暴露的 "),s("code",[t._v("createStore")]),t._v(" 方法进行创建：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" store\n")])])]),s("p",[t._v("现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),s("p",[t._v("接下来，我们将会更深入地探讨一些 store 的核心概念。让我们先从 "),s("a",{attrs:{href:"#state"}},[t._v("State")]),t._v(" 开始。")]),t._v(" "),s("h2",{attrs:{id:"state"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#state"}},[t._v("#")]),t._v(" State")]),t._v(" "),s("p",[t._v("State 存放了 store 中的原始状态数据，可以通过 "),s("code",[t._v("store.state")]),t._v(" 进行访问。")]),t._v(" "),s("h3",{attrs:{id:"在组件中获取-state"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在组件中获取-state"}},[t._v("#")]),t._v(" 在组件中获取 state")]),t._v(" "),s("p",[t._v("Mpx 在小程序组件中实现了数据响应，而刚才提到 store 中的状态也是响应式的，组件中获取 store 状态最简单的方法就是建立一个计算属性，在计算属性中访问 store 中需要的状态数据并返回：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// store.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("count")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("当 store.state.count 发生变化时, 组件中访问了 count 计算属性的 watcher 将得到响应。")]),t._v(" "),s("blockquote",[s("p",[t._v("于 vuex 中的不同的地方在于，vuex 奉行"),s("code",[t._v("单一状态树")]),t._v("，一个应用当中只存在一个 store 示例，用户能够在组件中通过"),s("code",[t._v("this.$store")]),t._v("隐式地访问到当前应用的 store；而 Mpx 当中为了追求灵活便捷的状态模块化管理及跨团队合作的能力，支持了多实例 store，用户需要显式地引入 store 实例，并通过计算属性将其注入到组件当中。")])]),t._v(" "),s("h3",{attrs:{id:"mapstate-辅助函数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mapstate-辅助函数"}},[t._v("#")]),t._v(" MapState 辅助函数")]),t._v(" "),s("p",[t._v("当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 "),s("code",[t._v("mapState")]),t._v(" 辅助函数帮助我们生成计算属性")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 箭头函数可使代码更简练")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 传字符串参数 'count' 等同于 state => state.count")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countAlias")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 为了能够使用 `this` 获取局部状态，必须使用常规函数")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("countPlusLocalState")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("localCount\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 映射 this.count 为 store.state.count")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"对象展开运算符"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#对象展开运算符"}},[t._v("#")]),t._v(" 对象展开运算符")]),t._v(" "),s("p",[t._v("MapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了"),s("a",{attrs:{href:"https://github.com/sebmarkbage/ecmascript-rest-spread",target:"_blank",rel:"noopener noreferrer"}},[t._v("对象展开运算符"),s("OutboundLink")],1),t._v("，我们可以极大地简化写法：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("localComputed")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用对象展开运算符将 mapState 返回的对象合并到计算属性中")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("使用 store 并不意味着你需要将所有的状态放入 store。如果有些状态严格属于单个组件，最好将其放到组件内部的 data 当中。")])]),t._v(" "),s("h2",{attrs:{id:"getter"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getter"}},[t._v("#")]),t._v(" Getter")]),t._v(" "),s("p",[t._v("有时候我们需要从 state 中派生出一些状态，例如经过过滤的列表：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doneTodos")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("todos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("todo")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" todo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("done"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它，无论哪种方式都不是很理想。")]),t._v(" "),s("p",[t._v("这个时候我们可以在 store 中定义 "),s("code",[t._v("getter")]),t._v(" 来完成这个功能，getter 可以简单认为是 store 中的计算属性。同计算属性一样，getter 的返回值会根据它的依赖被缓存起来，只有当它的依赖发生变化时才会被重新计算。")]),t._v(" "),s("p",[t._v("Getter 接受 state 作为第一个参数：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("todos")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sth1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("done")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("text")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sth2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("done")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("doneTodos")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("todos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("todo")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" todo"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("done"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" store\n")])])]),s("p",[t._v("定义好的 getter 可以通过 "),s("code",[t._v("store.getters")]),t._v(" 访问：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doneTodos "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [{ id: 1, text: '...', done: true }]")]),t._v("\n")])])]),s("p",[t._v("Getter 也可以接受其他 getters 作为第二个参数, rootState作为第三个参数，rootState是模块化中引入的概念，之后会详细介绍：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("doneTodosCount")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rootState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doneTodos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doneTodosCount "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 1")]),t._v("\n")])])]),s("p",[t._v("我们采用与state类似的方法将其注入到组件中进行访问：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doneTodosCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doneTodosCount\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"mapgetters-辅助函数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mapgetters-辅助函数"}},[t._v("#")]),t._v(" MapGetters 辅助函数")]),t._v(" "),s("p",[s("code",[t._v("MapGetters")]),t._v(" 的作用与使用方法同上面提到的 "),s("code",[t._v("mapState")]),t._v(" 高度类似，唯一的区别在于 mapGetters 用于映射 store 中的 getter：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用对象展开运算符将 getter 混入 computed 对象中")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGetters")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'doneTodosCount'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'anotherGetter'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果你想将一个 getter 在组件中映射为另一个名字，使用对象形式：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGetters")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 映射 this.doneCount 为 store.getters.doneTodosCount")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("doneCount")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'doneTodosCount'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"mutation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mutation"}},[t._v("#")]),t._v(" Mutation")]),t._v(" "),s("p",[t._v("更改 store 中的状态的唯一方法是提交 mutation。Mutation 非常类似于事件：每个 mutation 都有一个字符串的"),s("strong",[t._v("类型（type）")]),t._v(" 和 一个"),s("strong",[t._v("回调函数（handler）")]),t._v("。这个回调函数就是我们实际进行状态更改的地方，它接受 state 作为第一个参数：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 变更状态")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" store\n")])])]),s("p",[t._v("当你需要触发某个 mutation 时，你需要使用对应的 "),s("code",[t._v("type")]),t._v(" 调用 "),s("code",[t._v("store.commit")]),t._v(" 方法，就像触发某个事件一样：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"提交载荷（payload）"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#提交载荷（payload）"}},[t._v("#")]),t._v(" 提交载荷（Payload）")]),t._v(" "),s("p",[t._v("你可以向 "),s("code",[t._v("store.commit")]),t._v(" 传入额外的参数，作为 mutation 的"),s("strong",[t._v("载荷（payload）")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" n\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且增强 mutation 的可读性：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" payload")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+=")]),t._v(" payload"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("amount\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("amount")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"mutation-必须是同步函数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mutation-必须是同步函数"}},[t._v("#")]),t._v(" Mutation 必须是同步函数")]),t._v(" "),s("p",[t._v("一条重要的原则就是要记住 "),s("strong",[t._v("mutation 必须是同步函数")])]),t._v(" "),s("h3",{attrs:{id:"在组件中提交-mutation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在组件中提交-mutation"}},[t._v("#")]),t._v(" 在组件中提交 Mutation")]),t._v(" "),s("p",[t._v("你可以在组件中使用 "),s("code",[t._v("store.commit('increment')")]),t._v(" 提交 mutation，或者使用 "),s("code",[t._v("store.mapMutations")]),t._v(" 辅助函数将组件中名为 "),s("code",[t._v("increment")]),t._v(" 的 "),s("code",[t._v("method")]),t._v(" 映射为 "),s("code",[t._v("store.commit('increment')")]),t._v(" 调用。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 this.increment() 映射为 store.commit('increment')")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n       "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mapMutations 也支持载荷：将 this.incrementBy(amount) 映射为 store.commit('incrementBy', amount)")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementBy'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mapMutations同样支持传入对象形式的参数进行别名映射")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 this.add() 映射为 store.commit('increment')")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"action"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#action"}},[t._v("#")]),t._v(" Action")]),t._v(" "),s("p",[t._v("Action 类似于 mutation，不同在于：")]),t._v(" "),s("ul",[s("li",[t._v("Action 不能直接变更状态，但是可以提交 mutation 进行状态变更")]),t._v(" "),s("li",[t._v("Action 可以包含任意异步操作")])]),t._v(" "),s("p",[t._v("让我们来创建一个简单的 action：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" store\n")])])]),s("p",[t._v("Action 函数接受一个 "),s("code",[t._v("context")]),t._v(" 对象，因此你可以调用 "),s("code",[t._v("context.commit")]),t._v(" 提交一个 mutation，调用 "),s("code",[t._v("context.dispatch")]),t._v(" 触发其他的 action 调用，或者通过 "),s("code",[t._v("context.rootState")]),t._v("、"),s("code",[t._v("context.state")]),t._v(" 和 "),s("code",[t._v("context.getters")]),t._v(" 来获取全局state、局部state 和 全局 getters。")]),t._v(" "),s("p",[t._v("实践中，我们会经常用到 ES2015 的"),s("a",{attrs:{href:"https://github.com/lukehoban/es6features#destructuring",target:"_blank",rel:"noopener noreferrer"}},[t._v("参数解构"),s("OutboundLink")],1),t._v("来简化代码：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"调用-action"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#调用-action"}},[t._v("#")]),t._v(" 调用 action")]),t._v(" "),s("p",[t._v("Action 可以通过 "),s("code",[t._v("store.dispatch")]),t._v(" 方法进行调用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 "),s("strong",[t._v("mutation 必须同步执行")]),t._v("这个限制么？Action 就不受约束！我们可以在 action 内部执行"),s("strong",[t._v("异步")]),t._v("操作：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementAsync")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Action 同样支持载荷：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 调用载荷")]),t._v("\nstore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementAsync'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("amount")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("来看一个更加实际的购物车示例，涉及到"),s("strong",[t._v("调用异步 API")]),t._v(" 和"),s("strong",[t._v("提交多个 mutation")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("checkout")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" products")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 把当前购物车的物品备份起来")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" savedCartItems "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cart"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("added"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 发出结账请求，然后乐观地清空购物车")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("types"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("CHECKOUT_REQUEST")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 购物 API 接受一个成功回调和一个失败回调")]),t._v("\n    shop"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("buyProducts")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n      products"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 成功操作")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("types"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("CHECKOUT_SUCCESS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 失败操作")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("types"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("CHECKOUT_FAILURE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" savedCartItems"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("注意我们进行了一系列异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）。")]),t._v(" "),s("h3",{attrs:{id:"在组件中调用-action"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在组件中调用-action"}},[t._v("#")]),t._v(" 在组件中调用 Action")]),t._v(" "),s("p",[t._v("你可以在组件中使用 "),s("code",[t._v("store.dispatch('increment')")]),t._v(" 进行 action 调用，或者使用 "),s("code",[t._v("store.mapActions")]),t._v(" 辅助函数将组件中名为 "),s("code",[t._v("increment")]),t._v(" 的 "),s("code",[t._v("method")]),t._v(" 映射为 "),s("code",[t._v("store.dispatch('increment')")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'../store'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 this.increment() 映射为 store.dispatch('increment')")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mapActions 也支持载荷：将 this.incrementBy(amount) 映射为 store.dispatch('incrementBy', amount)")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementBy'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mapActions 同样支持传入对象形式的参数进行别名映射")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapActions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 将 this.add() 映射为 store.dispatch('increment')")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"组合-action"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合-action"}},[t._v("#")]),t._v(" 组合 Action")]),t._v(" "),s("p",[t._v("Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？")]),t._v(" "),s("p",[t._v("在 Mpx 中，action 永远返回一个 Promise，你可以在定义 action 手动返回一个 Promise，即使你没有这样做，框架也会对你 action 的返回值进行 "),s("code",[t._v("Promise.resolve(returned)")]),t._v(" 包装，确保你可以使用 Promise 的方式处理多个 action 之间的异步组合：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionA")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someMutation'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("现在你可以通过 "),s("code",[t._v("then")]),t._v(" 方法获取 "),s("code",[t._v("actionA")]),t._v(" 执行完毕的时机：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'actionA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("在另外一个 action 中也可以通过这种方式进行一系列异步调用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionB")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" dispatch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'actionA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someOtherMutation'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("如果我们利用 "),s("a",{attrs:{href:"https://tc39.github.io/ecmascript-asyncawait/",target:"_blank",rel:"noopener noreferrer"}},[t._v("async / await"),s("OutboundLink")],1),t._v("，我们能够更方便地对一系列异步操作进行组合：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 假设 getData() 和 getOtherData() 返回的是 Promise")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionA")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'gotData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("actionB")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" dispatch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'actionA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 等待 actionA 完成")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'gotOtherData'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getOtherData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"modules"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#modules"}},[t._v("#")]),t._v(" Modules")]),t._v(" "),s("blockquote",[s("p",[t._v("Mpx 虽然支持了 modules，但并不推荐使用。在 Mpx 中，我们更推荐使用[多实例模式](#多实例 store)进行对应用状态进行模块划分")])]),t._v(" "),s("p",[t._v("在 Mpx 中，modules 的设计与 vuex 中基本保持一致，在 createStore 中将子模块配置传入 modules 配置项中即可使用：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createStore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" moduleA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" moduleB "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    moduleA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    moduleB\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nstore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("moduleA "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> moduleA 的状态")]),t._v("\nstore"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("moduleB "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> moduleB 的状态")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" store\n")])])]),s("blockquote",[s("p",[t._v("Mpx 并未实现 vuex 中的命名空间，除 state 外的所有属性（getters / mutations / actions）将被平铺展开到根 store 的对应空间下。在多实例 store 中，我们的实现方式则与命名空间高度相似。")])]),t._v(" "),s("h3",{attrs:{id:"模块的局部状态"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模块的局部状态"}},[t._v("#")]),t._v(" 模块的局部状态")]),t._v(" "),s("p",[t._v("对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" moduleA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("increment")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里的 state 对象是模块的局部状态")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doubleCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("对于模块内部的 action，局部状态通过 "),s("code",[t._v("context.state")]),t._v(" 访问，根状态则通过 "),s("code",[t._v("context.rootState")]),t._v(" 访问：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" moduleA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementIfOddOnRootSum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" commit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rootState "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" rootState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'increment'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("对于模块内部的 getter，根状态能通过第三个参数访问：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" moduleA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("sumWithRootCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rootState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" rootState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"模块在组件中的引入方式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模块在组件中的引入方式"}},[t._v("#")]),t._v(" 模块在组件中的引入方式")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getName")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("s")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" s"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" moduleB\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 我们支持了多种方式引入子模块中的 state")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过函数引入")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("nameA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("a"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过路径字符串引入")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nameA2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a.name'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过传入模块路径引入")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对于 getters / mutations / actions，由于我们没有实现 namespace，子模块当中定义的 getters / mutations / actions 都能在根空间下直接访问，正常调用映射方法即可")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGetters")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'getName'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"多实例-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#多实例-store"}},[t._v("#")]),t._v(" 多实例 store")]),t._v(" "),s("p",[t._v("在 Mpx 中，我们允许在一个应用下创建多个 store 实例，进行模块化分布式的数据管理，同时提供了 deps 声明模块依赖的机制，让用户自由组合多个 store 实例并基于这些已有的 store 创建新的继承 store。在实际业务使用中，我们发现多实例模式的灵活性远高于 module，更加适合跨团队合作当中的数据管理。")]),t._v(" "),s("p",[t._v("使用多实例 store 的方式非常简单，你只需要多次调用 "),s("code",[t._v("createStore")]),t._v(" api 创建出多个 store 示例，并分别将其注入到组件中即可使用，简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storeA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementA")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countA"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storeB "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countB")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementB")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countB"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'countA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'countB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("可以看到 Mpx 中的 map 辅助方法都挂载在 store 实例上，正是为了支持多实例 store 的实现")])]),t._v(" "),s("h3",{attrs:{id:"合并继承多实例-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#合并继承多实例-store"}},[t._v("#")]),t._v(" 合并继承多实例 store")]),t._v(" "),s("p",[t._v("在实际的跨团队业务当中，我们既希望不同团队间的数据管理尽量解耦，也希望一些共同的部分能够复用，这就要求我们的 store 实例可以以某种方式组合起来使用，我们提供了 deps 能来实现多实例 store 的合并与继承。")]),t._v(" "),s("p",[t._v("承接上面的示例，我们基于 storeA 和 storeB 创建一个新的 storeC，在 storeC 当中可以定义自身的独立状态，也能基于 storeA 和 storeB 进行状态衍生：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createStore "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storeA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementA")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countA"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storeB "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countB")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementB")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countB"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storeC "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countC")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("abc")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此处 state.storeA 指向了原始的 storeA.state")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("storeA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countA "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("storeB"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countB "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countC\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementC")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countC"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("incrementB")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" commit "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// storeC内部也可以通过命名空间路径的方式提交 storeB 的 mutation")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeB.incrementB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此处 deps 声明了 storeC 的依赖，依赖中的 state / getters / mutations / actions 都会以 deps 中的 key 为命名空间存放在 storeC 对应的域下")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("deps")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    storeA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    storeB\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过继承合并得到的 storeC，我们可以完整访问其依赖 storeA / storeB")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用路径字符串或函数映射，可以看出和 modules 中 mapState 的方式非常类似")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeC"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("countA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeA.countA'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("countA2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("storeA"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("countA\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 传入命名空间参数映射 storeB 中的 countB")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeC"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'countB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 映射基于 storeA/B/C 衍生得到的 getters")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeC"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGetters")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'abc'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mutation不支持函数映射")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 下面代码以三种方式分别映射了increment、incrementB和incrementC")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeC"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("incrementA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeA.incrementA'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeC"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("storeC"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'incrementC'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("简单来讲，作为 deps 的 store 会以注册在 deps 中的 key 值作为命名空间，将其原始的 state / getters / mutations / actions 存放在新生成 store 对应的域下，便于新 store 对其进行访问并衍生出新的数据或操作，如上述示例中，storeA.state 会存放在 storeC.state.storeA 中，对于 getters / mutations / actions 亦然。")])]),t._v(" "),s("h2",{attrs:{id:"在-typescript-中使用-store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在-typescript-中使用-store"}},[t._v("#")]),t._v(" 在 Typescript 中使用 store")]),t._v(" "),s("p",[t._v("Mpx 自 2.2 版本开始支持 Typescript，为了更好地支持 store 中的类型推导，我们针对 Typescript 环境提供了变种的 store api "),s("code",[t._v("createStoreWithThis")]),t._v(" 进行 store 创建，该 api 最主要的变化在于定义 getters，mutations 和 actions 时，自身的 state，getters 等属性不再通过参数传入，而是会挂载到函数的执行上下文 "),s("code",[t._v("this")]),t._v(" 当中，通过 this.state 或 this.getters 的方式进行访问，简单的使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("aa")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("bb")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 this.state 访问 state")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("aa "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bb\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doSth3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 this.getters 访问 getter")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getters"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("详细的使用方式及推导规则请查看 "),s("RouterLink",{attrs:{to:"/guide/tool/ts.html"}},[t._v("Typescript 支持")]),t._v("章节。")],1),t._v(" "),s("h2",{attrs:{id:"use-store-in-composition-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#use-store-in-composition-api"}},[t._v("#")]),t._v(" 在组合式 API 中使用 store ")]),t._v(" "),s("p",[t._v("Mpx 自 2.8 版本完整支持了组合式 API 的开发方式，虽然在组合式 API 中我们首推使用 "),s("RouterLink",{attrs:{to:"/guide/advance/pinia.html"}},[t._v("pinia")]),t._v(" 作为外部状态管理方案，不过旧的 store 在组合式 API 中仍然可以使用，我们提供了新的 "),s("code",[t._v("mapStateToRefs")]),t._v(" 和 "),s("code",[t._v("mapGettersToRefs")]),t._v(" 便于用户在组合式 API 中访问 "),s("code",[t._v("state")]),t._v(" 和 "),s("code",[t._v("getters")]),t._v("，而对于 "),s("code",[t._v("mutations")]),t._v(" 和 "),s("code",[t._v("actions")]),t._v("，用户可以直接调用 store 实例上的 "),s("code",[t._v("commit")]),t._v(" 和 "),s("code",[t._v("dispatch")]),t._v(" 方法进行调用，或者使用原有的 "),s("code",[t._v("map*")]),t._v(" API 进行映射访问，简单使用示例如下：")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" createStoreWithThis"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchEffect "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" store "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStoreWithThis")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("123")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("getters")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("doubleCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("mutations")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("subCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("--")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapStateToRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" doubleCount "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapGettersToRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'doubleCount'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" addCount "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapMutations")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'addCount'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doubleCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      doubleCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      addCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("subCount")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 两种方式均可以进行 mutations 调用，actions 同理")]),t._v("\n        store"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("commit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'subCount'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/81.16e2cc83.js b/docs-vuepress/.vuepress/dist/assets/js/81.16e2cc83.js
deleted file mode 100644
index 87519aed45..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/81.16e2cc83.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[81],{428:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"使用分包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用分包"}},[t._v("#")]),t._v(" 使用分包")]),t._v(" "),s("p",[t._v("作为一个对 performance 极度重视的框架，分包作为提升小程序体验的重要能力，框架对各种类型的分包能力进行了完善支持。")]),t._v(" "),s("blockquote",[s("p",[t._v("分包是小程序平台提供的原生能力，mpx是对该能力做了部分加强，目前各大主流小程序平台都已支持分包，且框架在可能的情况下进行了抹平。")])]),t._v(" "),s("blockquote",[s("p",[t._v("使用分包一定要记得阅读下面的"),s("a",{attrs:{href:"#%E5%88%86%E5%8C%85%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"}},[t._v("分包注意事项")])])]),t._v(" "),s("h2",{attrs:{id:"原生语法注册分包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#原生语法注册分包"}},[t._v("#")]),t._v(" 原生语法注册分包")]),t._v(" "),s("p",[t._v("Mpx 支持小程序原生语法注册分包，并且在框架层面对不同平台的的差异进行了抹平，我们以微信小程序原生语法注册分包为例。")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index/index"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"subPackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"test"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other2"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"packages-语法注册分包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#packages-语法注册分包"}},[t._v("#")]),t._v(" packages 语法注册分包")]),t._v(" "),s("p",[t._v("Mpx 提供 packages 语法来对小程序的主包页面和分包划分能力进行增强，使用 packages 语法可以灵活的对业务进行拆分，允许以 npm 包的形式进行\n主包页面和分包注册，且分包名和页面路径可自定义，十分有利于大型多团队开发的项目维护。")]),t._v(" "),s("h3",{attrs:{id:"使用方法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用方法"}},[t._v("#")]),t._v(" 使用方法")]),t._v(" "),s("p",[t._v("Mpx 拓展了 app.json 的语法，新增了 packages 域，用来声明依赖的 packages，packages 可嵌套依赖。")]),t._v(" "),s("h4",{attrs:{id:"注册主包页面"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#注册主包页面"}},[t._v("#")]),t._v(" 注册主包页面")]),t._v(" "),s("p",[t._v("首先我们介绍下 packages 注册主包页面的用法，在 packages 中直接配置资源路径，Mpx 会去读取该资源中 json 区块中的 pages 属性，合并到主包页面配置中。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("// @file src/app.mpx\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index/index"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{npmPackage || relativePathToPackage}/index"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// @file src/packages/index.mpx\n// 注意确保页面路径的唯一性\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/other/other2"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("打包结果：dist/app.json")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index/index"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other2"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h4",{attrs:{id:"注册分包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#注册分包"}},[t._v("#")]),t._v(" 注册分包")]),t._v(" "),s("p",[t._v("Mpx 会将 packages 域下的路径带 root 为 key 的 query 解析注册为分包，使用 packages 语法注册分包，只需要在 packages 中配置资源路径添加 "),s("code",[t._v("root=xxx")]),t._v("，root的值即为分包名。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("// @file src/app.mpx\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index/index"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{npmPackage || relativePathToPackage}/index?root=test"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// @file src/packages/index.mpx (子包的入口文件)\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/other/other2"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("打包结果：dist/app.json")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index/index"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"subPackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"test"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other2"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("由上可见，经过我们的编译过程，packages 中注册的页面可按照原始的路径被合并入主包页面或注册为分包，\n这样开发者可以不用考虑自己在被依赖时页面路径是怎么样的，也可以直接将调试用的app.mpx作为依赖入口直接暴露出去，\n对于主app的开发者来说也不需要了解依赖内部的细节，只需要在packages中声明自己所需的依赖即可。")]),t._v(" "),s("h3",{attrs:{id:"注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#注意事项"}},[t._v("#")]),t._v(" 注意事项")]),t._v(" "),s("ul",[s("li",[t._v("依赖的开发者在自己的入口 app.mpx 中注册页面时对于本地页面一定要使用相对路径进行注册，否则在主app中进行编译时会找不到对应的页面")]),t._v(" "),s("li",[t._v("不管是用 json 还是 mpx 格式定义 package 入口，编译时永远只会解析 json 且只会关注 json 中的 pages 和 packages 域，其余所有东西在主app编译时都会被忽略")]),t._v(" "),s("li",[t._v("由于我们是将 packages 中注册的页面按照原始的路径合并到主 app 当中，有可能会出现路径名冲突。"),s("br"),t._v("\n这种情况下编译会报出响应错误提示用户解决冲突，为了避免这种情况的发生，依赖的提供者最好将自己内部的页面放置在能够描述依赖特性的子文件夹下。")])]),t._v(" "),s("p",[t._v("例如一个包叫login，建议包内页面文件目录为：")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("project\n│   app.mpx  \n└───pages\n    └───login\n        │   page1.mpx\n        │   page2.mpx\n        │   ...\n")])])]),s("h2",{attrs:{id:"独立分包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#独立分包"}},[t._v("#")]),t._v(" 独立分包")]),t._v(" "),s("p",[t._v("Mpx目前已支持独立分包构建，使用 "),s("a",{attrs:{href:"#packages"}},[t._v("packages")]),t._v(" 语法声明分包时只需要在后面添加 "),s("code",[t._v("independent=true")]),t._v(" query 即可，同时也支持原生语法声明。\n如下方示例声明 packageA 分包为独立分包")]),t._v(" "),s("p",[s("strong",[t._v("示例：")])]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/app.mpx 文件中 json 块")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Mpx packages 方式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"packageA/app.mpx?root=packageA&independent=true"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 微信原生方式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"subpackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"packageA"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"independent"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("需要注意的是，由于独立分包可以独立于主包和其他分包运行，从独立分包页面进入小程序时，主包中的相应初始化逻辑并不会执行，如果独立分包中多个页面需要某种通用初始化逻辑时就无法优雅的实现，\nMpx框架针对独立分包场景提供了独立分包初始化逻辑执行能力。")]),t._v(" "),s("p",[t._v("对于使用 packages 方式声明的独立分包，默认将 .mpx 文件自身的 script 块作为初始化逻辑执行。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--src/packagesA/app.mpx，packageA 独立分包入口文件--\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePromise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isIndependent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do some in independent package")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do some not independent package")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("上方代码中 独立分包 packageA 的入口文件 app.mpx 中的 script block 代码会默认在独立分包初始化时执行，Mpx 同时提供了全局变量 "),s("code",[t._v("isIndependent")]),t._v(" 标识当前代码执行环境是否为独立分包来进行特定逻辑区分")]),t._v(" "),s("p",[t._v("如果你不想走这个默认的初始化逻辑执行规则，想自定义一个 js 文件存储当前独立分包的初始化逻辑，我们支持 independent 配置项直接配置为初始化逻辑文件地址")]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/app.mpx 文件中 json 块")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Mpx packages 方式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"packageA/app.mpx?root=packageA&independent=./common"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 路径上下文为 packageA 文件夹")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 微信原生方式")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"subpackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"packageA"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"independent"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./common"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 路径上下文为 packageA 文件夹")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/pacakgeA/common.js")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePromise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isIndependent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do some in independent package")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do some not independent package")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("注意上方配置 independent 为初始化逻辑文件地址时，路径相对地址上下文为 packageA")]),t._v(" "),s("h2",{attrs:{id:"分包预下载"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#分包预下载"}},[t._v("#")]),t._v(" 分包预下载")]),t._v(" "),s("p",[t._v("分包预下载是在 json中 新增一个 preloadRule 字段，mpx 打包时候会原封不动把这个部分放到 app.json 中，所以只需要按照 "),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("微信小程序官方文档 - 分包预下载"),s("OutboundLink")],1),t._v(" 或者 "),s("a",{attrs:{href:"https://opendocs.alipay.com/mini/framework/subpackages",target:"_blank",rel:"noopener noreferrer"}},[t._v("支付宝小程序官方文档 - 分包预下载"),s("OutboundLink")],1),t._v(" 配置即可。")]),t._v(" "),s("p",[s("strong",[t._v("示例：")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("// @file src/app.mpx\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index/index"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"{npmPackage || relativePathToPackage}/index?root=xxx"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"preloadRule"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages/index"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"network"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"all"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"important"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"sub1/index"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"hello"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"sub3"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n// @file src/packages/index.mpx (子包的入口文件)\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/other/other2"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("打包结果：dist/app.json")]),t._v(" "),s("div",{staticClass:"language-json extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json"}},[s("code",[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index/index"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"subPackages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"root"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"xxx"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/other/other2"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"preloadRule"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"pages/index"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"network"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"all"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"important"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"sub1/index"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"packages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"hello"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"sub3"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("  \n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"分包注意事项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#分包注意事项"}},[t._v("#")]),t._v(" 分包注意事项")]),t._v(" "),s("p",[t._v("当我们使用分包加载时，依赖包内的跳转路径需注意，比如要跳转到other2页面")]),t._v(" "),s("ul",[s("li",[t._v("不用分包时会是：/pages/other/other2")]),t._v(" "),s("li",[t._v("使用分包后应为：/test/pages/other/other2")])]),t._v(" "),s("p",[t._v("即前面会多?root={rootKey}的rootKey这一层")]),t._v(" "),s("p",[t._v("为了解决这个问题，有三种方案：")]),t._v(" "),s("ul",[s("li",[s("p",[t._v("import的时候在最后加'?resolve', 例如: "),s("code",[t._v("import testPagePath from '../pages/testPage.mpx?resolve'")]),t._v(" , 编译时就会把它处理成正确的完整的绝对路径。")])]),t._v(" "),s("li",[s("p",[t._v("使用相对路径跳转。")])]),t._v(" "),s("li",[s("p",[t._v("定死使用的分包路径名，直接写/{rootKey}/pages/xxx （极度不推荐，尤其在分包可能被多方引用的情况时）")])])]),t._v(" "),s("p",[t._v("这里我们建议使用第一种方式。")])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/82.56c0d7c1.js b/docs-vuepress/.vuepress/dist/assets/js/82.56c0d7c1.js
deleted file mode 100644
index c3846ffefb..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/82.56c0d7c1.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[82],{432:function(t,e,a){"use strict";a.r(e);var s=a(4),n=Object(s.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"使用原子类"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#使用原子类"}},[t._v("#")]),t._v(" 使用原子类")]),t._v(" "),e("p",[t._v("原子类(utility-first CSS)是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，我们耳熟能详的有"),e("a",{attrs:{href:"https://github.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github"),e("OutboundLink")],1),t._v("，"),e("a",{attrs:{href:"https://openai.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("OpenAI"),e("OutboundLink")],1),t._v("，"),e("a",{attrs:{href:"https://top10.netflix.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Netflix"),e("OutboundLink")],1),t._v("\n和"),e("a",{attrs:{href:"https://www.jpl.nasa.gov/",target:"_blank",rel:"noopener noreferrer"}},[t._v("NASA官网"),e("OutboundLink")],1),t._v("\n等。使用原子类离不开原子类框架的支持，常用的原子类框架有 "),e("a",{attrs:{href:"https://tailwindcss.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Tailwindcss"),e("OutboundLink")],1),t._v("、"),e("a",{attrs:{href:"https://windicss.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Windicss"),e("OutboundLink")],1),t._v("\n和 "),e("a",{attrs:{href:"https://unocss.dev/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Unocss"),e("OutboundLink")],1),t._v(" 等，而在 "),e("strong",[t._v("Mpx2.9")]),t._v(" 以后，我们在框架中内置了基于 unocss\n的原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx\n页面/组件模板中直接使用一些预定义的基础样式类，诸如flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("flex"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-base text-black font-semibold mb-2"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Erin Lindford\n        "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-gray-500 font-medium pb-3"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Product Engineer\n        "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v("\n          "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n          Message\n        "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：")]),t._v(" "),e("p",[e("img",{attrs:{src:"https://dpubstatic.udache.com/static/dpubimg/Or3aaN-mmxV8pK-LmEVPm_demo.png",alt:"utility-css-demo"}})]),t._v(" "),e("p",[t._v("相较于传统的自定义类编写样式的方式，使用原子类能给你带来以下这些好处：")]),t._v(" "),e("ul",[e("li",[e("strong",[t._v("不用再烦恼于为自定义类取类名")]),t._v("，传统样式开发中，我们仅仅是为某个元素定义样式就需要绞尽脑汁发明一些抽象的类名，还得提防类名冲突，使用原子类可以完全将你从这种琐碎无趣的工作中解放；")]),t._v(" "),e("li",[e("strong",[t._v("停止css体积的无序增长")]),t._v("，传统样式开发中，css体积会随着你的迭代不断增长，而在原子类中，一切样式都可以复用，你几乎不需要编写新的css；")]),t._v(" "),e("li",[e("strong",[t._v("让调整样式变得更加安全")]),t._v("，传统css是全局的，当你修改某个样式时无法保障其不会破坏其他地方的样式，而你在模板中使用的原子类是本地的，你完全不用担心修改它会影响其他地方。")])]),t._v(" "),e("p",[t._v("而相较于使用内联样式，原子类也有一些重要的优势：")]),t._v(" "),e("ul",[e("li",[e("strong",[t._v("约束下的设计")]),t._v("，使用内联样式时，里面的每一个数值都是魔法数字(magic number)\n，而通过原子工具类，你可以选择一些符合预定义设计规范的样式，便于构筑具有视觉一致性的UI；")]),t._v(" "),e("li",[e("strong",[t._v("响应式设计")]),t._v("，你无法在内联样式中使用媒体查询，然而通过原子类框架中提供的响应式工具，你可以轻而易举地构建出响应式界面；")]),t._v(" "),e("li",[e("strong",[t._v("Hover、focus和其他状态")]),t._v("，使用内联样式无法定义特定状态下的样式，如hover和focus，通过原子类框架的状态变量能力，我们可以轻松为这些状态定义样式。")])]),t._v(" "),e("p",[t._v("看到这里相信你已经迫不及待地想要在 Mpx 中体验原子类开发了吧，可以根据下面的指南开启你的原子类之旅。")]),t._v(" "),e("h2",{attrs:{id:"compile-config"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#compile-config"}},[t._v("#")]),t._v(" 原子类环境配置 ")]),t._v(" "),e("p",[t._v("如果你想在新项目中使用原子类，可以使用最新版本的 "),e("code",[t._v("@mpxjs/cli")]),t._v(" 创建项目，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用 unocss 的原子类，关于可使用的工具类可参考 "),e("a",{attrs:{href:"https://unocss.dev/interactive/",target:"_blank",rel:"noopener noreferrer"}},[t._v("unocss 交互示例"),e("OutboundLink")],1),t._v("及本指南下方的"),e("a",{attrs:{href:"#%E5%B7%A5%E5%85%B7%E7%B1%BB%E6%94%AF%E6%8C%81%E8%8C%83%E5%9B%B4"}},[t._v("工具类支持范围")]),t._v("。")]),t._v(" "),e("blockquote",[e("p",[t._v("与 web 中使用 unocss 不同，在 Mpx 中使用 unocss 不需要显式引入虚拟模块 "),e("code",[t._v("import 'uno.css'")]),t._v(" 来承载生成的样式内容，这是由于在\nMpx 中，我们充分考虑到小程序分包架构的特殊性和主包体积的重要性，结合 Mpx\n强大的分包构建能力，对生成的原子工具类的使用情况进行分析，将其自动注入到合适的主包或者分包中，来达到全局体积分配的最优（在没有内容冗余的情况下尽可能输出到分包）。")])]),t._v(" "),e("p",[t._v("对于使用 "),e("code",[t._v("@mpxjs/cli@3.0")]),t._v(" 新版脚手架创建的项目，可以在项目初始化时选择"),e("code",[t._v("需要使用原子类")]),t._v("\n选项，或在已有项目下执行"),e("code",[t._v("mpx add @mpxjs/vue-cli-plugin-mpx-utility-first-css")]),t._v("以激活原子类相关编译配置。")]),t._v(" "),e("p",[t._v("对于使用旧版脚手架创建的项目，可以通过修改项目编译配置以激活原子类支持：")]),t._v(" "),e("ol",[e("li",[t._v("安装相关依赖：")])]),t._v(" "),e("div",{staticClass:"language-json5 extra-class"},[e("pre",{pre:!0,attrs:{class:"language-json5"}},[e("code",[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//...")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"devDependencies"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/unocss-base"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'^2.9.0'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"@mpxjs/unocss-plugin"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'^2.9.0'")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("ol",{attrs:{start:"2"}},[e("li",[t._v("新建uno.config.js，基础配置内容如下：")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unocss'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" presetMpx "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/unocss-base'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("presets")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("presetMpx")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("ol",{attrs:{start:"3"}},[e("li",[t._v("注册"),e("code",[t._v("MpxUnocssPlugin")]),t._v("，在"),e("code",[t._v("build/getPlugins")]),t._v("中添加如下代码：")])]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MpxUnocssPlugin "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/unocss-plugin'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\nplugins"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MpxUnocssPlugin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("p",[t._v("即可在项目模版中使用基于"),e("code",[t._v("unocss")]),t._v("的原子类功能，"),e("code",[t._v("unocss")]),t._v("默认的preset兼容"),e("code",[t._v("tailwindcss")]),t._v("/"),e("code",[t._v("windicss")]),t._v("\n，可以通过查阅"),e("a",{attrs:{href:"https://tailwindcss.com/docs/installation",target:"_blank",rel:"noopener noreferrer"}},[t._v("tailwindcss文档"),e("OutboundLink")],1),t._v("、"),e("a",{attrs:{href:"https://windicss.org/utilities/general/colors.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("windicss文档"),e("OutboundLink")],1),t._v("或"),e("a",{attrs:{href:"https://unocss.dev/interactive/",target:"_blank",rel:"noopener noreferrer"}},[t._v("unocss可交互文档"),e("OutboundLink")],1),t._v("进行探索使用。")]),t._v(" "),e("p",[t._v("关于"),e("code",[t._v("uno.config.js")]),t._v("可用配置项及"),e("code",[t._v("@mpxjs/unocss-plugin")]),t._v("及"),e("code",[t._v("@mpxjs/unocss-base")]),t._v("的配置项请参考"),e("RouterLink",{attrs:{to:"/api/compile.html#mpxunocssplugin-配置"}},[t._v("API文档")])],1),t._v(" "),e("h3",{attrs:{id:"vscode插件支持"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#vscode插件支持"}},[t._v("#")]),t._v(" vscode插件支持")]),t._v(" "),e("p",[t._v("推荐使用unocss官方插件https://unocss.dev/integrations/vscode\nmpx文件则需要在unocss.config.js添加如下参数才能生效")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" defineConfig "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unocss'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineConfig")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("include")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token regex"}},[e("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),e("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.mpx($|\\?)")]),e("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h2",{attrs:{id:"config-supports"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#config-supports"}},[t._v("#")]),t._v(" 功能支持范围 ")]),t._v(" "),e("p",[t._v("我们支持了"),e("code",[t._v("unocss")]),t._v("大部分的配置项及功能，并针对小程序技术规范提供了一些额外的功能支持，如分包输出和样式隔离等功能，以下为详细功能支持范围。")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Load Config")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持windi默认的全部配置文件路径，并支持在plugin options中手动传入配置对象或配置文件路径")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Rules")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Shortcuts")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Theme")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Variants")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Extractors")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Transformers")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("内建支持variant groups、directives和alias，不支持自定义transformers")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Preflights")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持内建和自定义preflight配置")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Presets")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Safelist")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持全局配置和模版注释语法局部配置声明safelist")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Value Auto-infer")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Variant Groups")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Directives")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Alias")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Attributify Mode")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序模版不支持不识别的自定义属性")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Responsive Design")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Dark Mode")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Important Prefix")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Layers Ordering")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("分包输出/公共样式抽离")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("可通过设置"),e("code",[t._v("@mpxjs/unocss-plugin")]),t._v("配置项"),e("code",[t._v("minCount")]),t._v("决定公共样式范围")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("组件分包异步/组件样式隔离")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("可通过全局配置和模版注释语法局部配置"),e("code",[t._v("styleIsolation='isolated'")]),t._v("支持相关场景的原子类使用")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Rpx样式单位")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序类名特殊字符转义")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("静态类名和动态类名均以支持")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("跨平台输出")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持输出Mpx已支持的所有小程序平台及Web")])])])]),t._v(" "),e("h2",{attrs:{id:"utility-supports"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#utility-supports"}},[t._v("#")]),t._v(" 工具类可用范围 ")]),t._v(" "),e("p",[t._v("经过我们的详细测试，大部分"),e("code",[t._v("unocss")]),t._v("\n提供的工具类都能在小程序环境下正常工作，但是也有部分工具类由于小程序底层环境差异无法正常运行，以下是详细的测试结果，参考"),e("a",{attrs:{href:"https://windicss.org/utilities/general/colors.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("windicss文档"),e("OutboundLink")],1),t._v("\n进行分类组织。")]),t._v(" "),e("h3",{attrs:{id:"general"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#general"}},[t._v("#")]),t._v(" General")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Colors")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Typography")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持子项：Font Variant Numeric Tab Size")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("SVG")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持svg标签")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Variants")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持子项：Child Selectors，因为小程序不支持*选择器")])])])]),t._v(" "),e("h3",{attrs:{id:"accessibility"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#accessibility"}},[t._v("#")]),t._v(" Accessibility")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Screen Readers")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),e("h3",{attrs:{id:"animations"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#animations"}},[t._v("#")]),t._v(" Animations")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Animation")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Transforms")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Transitions")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),e("h3",{attrs:{id:"backgrounds"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#backgrounds"}},[t._v("#")]),t._v(" Backgrounds")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Attachment")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Clip")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Color")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Opacity")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("需要和Background Color一起使用")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Position")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Repeat")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Size")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Origin")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Gradient Direction")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Gradient From")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Gradient Via")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Gradient To")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Background Blend Mode")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),e("h3",{attrs:{id:"behaviors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#behaviors"}},[t._v("#")]),t._v(" Behaviors")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Box Decoration Break")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Image Rendering")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("image-render-edge 真机不支持")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Listings")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Overflow")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Overscroll Behavior")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Placeholder")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("微信小程序 input 需要通过 placeholder-style 设置 placeholder 样式")])])])]),t._v(" "),e("h3",{attrs:{id:"borders"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#borders"}},[t._v("#")]),t._v(" Borders")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Border Radius")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Border Width")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Border Color")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Border Opacity")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Border Style")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Divider Width")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的css选择器")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Divider Color")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的css选择器")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Divider Opacity")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的css选择器")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Divider Style")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的css选择器")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Outline")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Outline Solid")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Outline Dotted")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Ring Width")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Ring Color")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Ring Opacity")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Ring Offset Width")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Ring Offset Color")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),e("h3",{attrs:{id:"effects"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#effects"}},[t._v("#")]),t._v(" Effects")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Box Shadow")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Opacity")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Mix Blend Mode")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),e("h3",{attrs:{id:"filters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#filters"}},[t._v("#")]),t._v(" Filters")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Filter")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Backdrop Filter")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),e("h3",{attrs:{id:"interactivity"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#interactivity"}},[t._v("#")]),t._v(" Interactivity")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Accent Color")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Appearance")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Cursor")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Caret")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Pointer Events")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Resize")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Scroll Behavior")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Touch Action")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("User Select")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Will Change")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("不支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持生成的样式")])])])]),t._v(" "),e("h3",{attrs:{id:"layout"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#layout"}},[t._v("#")]),t._v(" Layout")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",{staticStyle:{"text-align":"left"}},[t._v("功能")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("支持度")]),t._v(" "),e("th",{staticStyle:{"text-align":"left"}},[t._v("备注")])])]),t._v(" "),e("tbody",[e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Columns")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Container")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Display")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Flex")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Grid")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Positioning")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序图片设置object-fit 无效，可使用mode代替")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Sizing")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Spacing")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("Space Between小程序不支持生成的css选择器")])]),t._v(" "),e("tr",[e("td",{staticStyle:{"text-align":"left"}},[t._v("Tables")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("部分支持")]),t._v(" "),e("td",{staticStyle:{"text-align":"left"}},[t._v("小程序不支持部分table样式")])])])]),t._v(" "),e("h2",{attrs:{id:"attentions"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#attentions"}},[t._v("#")]),t._v(" 小程序原子类使用注意点 ")]),t._v(" "),e("p",[t._v("小程序由于底层环境差异，我们在支持和使用原子类时有一些特殊的注意点。")]),t._v(" "),e("h3",{attrs:{id:"escape"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#escape"}},[t._v("#")]),t._v(" 特殊字符转义 ")]),t._v(" "),e("p",[t._v("基于"),e("code",[t._v("unocss")]),t._v("的原子类支持"),e("code",[t._v("value auto-infer")]),t._v("（值自动推导），可以在模版中根据相关规则书写灵活的自定义值原子类，如"),e("code",[t._v("p-5px bg-[hsl(211.7,81.9%,69.6%)]")]),t._v("等，针对原子类中出现的"),e("code",[t._v("[")]),t._v(" "),e("code",[t._v("(")]),t._v(" "),e("code",[t._v(",")]),t._v("等特殊字符，在web中会通过转义字符"),e("code",[t._v("\\")]),t._v("进行转义，由于小程序环境下不支持css选择器中出现"),e("code",[t._v("\\")]),t._v("转义字符，我们内置支持了一套不带"),e("code",[t._v("\\")]),t._v("的转义规则对这些特殊字符进行转义，同时替换模版和css文件中的类名，内建的默认转义规则如下：")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" escapeMap "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'('")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_pl_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("')'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_pr_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'['")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_bl_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("']'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_br_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'{'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_cl_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'}'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_cr_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'#'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_h_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'!'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_i_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'/'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_s_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'.'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_d_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("':'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_c_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("','")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_2c_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'%'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_p_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'\\''")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_q_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'\"'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_dq_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'+'")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_a_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("$")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_si_'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unknown用于兜底不在上述范围中未知的转义字符")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("unknown")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'_u_'")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("p",[t._v("与此同时，用户也可以通过传递"),e("code",[t._v("@mpxjs/unocss-plugin")]),t._v("的"),e("RouterLink",{attrs:{to:"/api/compile.html#escapeMap"}},[e("code",[t._v("escapeMap")]),t._v("配置项")]),t._v("来覆盖内建的转义规则。")],1),t._v(" "),e("h3",{attrs:{id:"subpackage"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#subpackage"}},[t._v("#")]),t._v(" 原子类分包输出 ")]),t._v(" "),e("p",[t._v("在web中，原子类会被全部打包输出单个样式文件，一般会放置在顶层样式表中以供全局访问，但在小程序中这种全量的输出策略并不是最优的，主要原因在于小程序中可供全局访问的主包体积存在"),e("strong",[t._v("2M大小限制")]),t._v("，主包体积十分紧缺珍贵，Mpx在构建输出时遵循着分包优先的原则，尽可能充分利用分包体积从而减少对主包体积的占用，再进行原子类产物输出时，我们也遵循了相同的原则。")]),t._v(" "),e("p",[t._v("在Mpx中，我们在收集原子类时同时记录了每个原子类的引用分包，在收集结束后根据每个原子类的分包引用数量决定该原子类应该输出到主包还是分包当中，我们在"),e("code",[t._v("@mpxjs/unocss-plugin")]),t._v("中提供了"),e("RouterLink",{attrs:{to:"/api/compile.html#minCount"}},[e("code",[t._v("minCount")]),t._v("配置项")]),t._v("来决定分包的输出规则，该配置项的默认值为2，即当一个原子类被2个或以上分包引用时，会被作为公共原子类抽取到主包中，否则输出到所属分包中，这也是全局最优的策略。当我们想要让原子类输出产物更少地占用主包体积时，我们也可以将"),e("code",[t._v("minCount")]),t._v("值调大，让原子类抽取到主包的条件更加苛刻，不过这样也会伴随着原子类分包冗余的增加。")],1),t._v(" "),e("p",[e("code",[t._v("unocss.config.js")]),t._v("配置中定义的"),e("code",[t._v("safelist")]),t._v("原子类默认会输出到主包，为了组件局部使用的"),e("code",[t._v("safelist")]),t._v("有输出到分包的机会，我们在模版中提供了"),e("RouterLink",{attrs:{to:"/api/compile.html#commentConfig"}},[e("code",[t._v("注释配置")])]),t._v("（comments config），灵感来源于"),e("code",[t._v("webpack")]),t._v("中的魔法注释（magic comments），用户可以在组件模版中通过"),e("code",[t._v("注释配置")]),t._v("声明当前组件所需的"),e("code",[t._v("safelist")]),t._v("，对应的原子类也会根据上述的规则输出到主包或分包中，使用示例如下：")],1),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_safelist: 'text-red-500 bg-blue-500' --\x3e")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 动态样式中可以使用text-red-500和bg-blue-500原子类 --\x3e")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[e("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{classObj}}"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("test"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("h3",{attrs:{id:"style-isolation"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#style-isolation"}},[t._v("#")]),t._v(" 样式隔离与组件分包异步 ")]),t._v(" "),e("p",[t._v("在小程序中，自定义组件的样式默认是隔离的，web中通过全局样式访问原子类的方式不再生效，不过由于小程序提供了"),e("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB",target:"_blank",rel:"noopener noreferrer"}},[t._v("样式隔离配置"),e("OutboundLink")],1),t._v("，我们可以将该组件样式隔离配置调整为"),e("code",[t._v("apply-shared")]),t._v("来获取页面或app中定义的原子类，但是当我们在使用传统类名和原子类混合开发或者迁移原子类的过程中，我们往往希望保留原本自定义组件的样式隔离。")]),t._v(" "),e("p",[t._v("针对这种情况，我们在"),e("code",[t._v("@mpxjs/unocss-plugin")]),t._v("中提供了"),e("RouterLink",{attrs:{to:"/api/compile.html#styleIsolation"}},[e("code",[t._v("styleIsolation")]),t._v("配置项")]),t._v("，可选设置为"),e("code",[t._v("isolated")]),t._v("|"),e("code",[t._v("apply-shared")]),t._v("，当设置为"),e("code",[t._v("isolated")]),t._v("时每个组件都会通过"),e("code",[t._v("@import")]),t._v("独立引用主包或者分包的原子类样式文件，因此不会受到样式隔离的影响；当设置为"),e("code",[t._v("apply-shared")]),t._v("时，只有app和分包页面会引用对应的原子类样式文件，自定义组件需要通过配置样式隔离为"),e("code",[t._v("apply-shared")]),t._v("使原子类生效。")],1),t._v(" "),e("p",[t._v("在组件分包异步的情况下对应组件即使将样式隔离配置为"),e("code",[t._v("apply-shared")]),t._v("的情况下，"),e("code",[t._v("@mpxjs/unocss-plugin")]),t._v("也需要将"),e("code",[t._v("styleIsolation")]),t._v("设置为"),e("code",[t._v("isolated")]),t._v("才能正常工作，原因在于组件分包异步的情况下，组件被其他分包的页面所引用渲染，由于上述原子类样式分包输出的规则，其他分包的页面中可能并不包含当前组件所需的原子类，只有在"),e("code",[t._v("isolated")]),t._v("模式下由组件自身引用所需的原子类样式才能保证正常work，类似于"),e("code",[t._v("safelist")]),t._v("，我们也提供了"),e("RouterLink",{attrs:{to:"/api/compile.html#commentConfig"}},[e("code",[t._v("注释配置")])]),t._v("的方式对组件的"),e("code",[t._v("styleIsolation")]),t._v("模式进行局部配置，示例如下：")],1),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- mpx_config_styleIsolation: 'isolated' --\x3e")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 当前组件会直接引用对应主包或分包的原子类样式 --\x3e")]),t._v("\n     "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("@dark:(text-white bg-dark-500)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/83.ea65d6b1.js b/docs-vuepress/.vuepress/dist/assets/js/83.ea65d6b1.js
deleted file mode 100644
index 8e958c5002..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/83.ea65d6b1.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[83],{429:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"类名样式绑定"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#类名样式绑定"}},[t._v("#")]),t._v(" 类名样式绑定")]),t._v(" "),a("p",[t._v("Mpx利用wxs完整实现了Vue中的类名样式绑定，性能优良且没有任何使用限制（很多小程序框架基于字符串解析来实现该能力，只支持在模板上写简单的字面量，大大限制了使用场景）")]),t._v(" "),a("h2",{attrs:{id:"类名绑定"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#类名绑定"}},[t._v("#")]),t._v(" 类名绑定")]),t._v(" "),a("p",[t._v("类名绑定的增强指令是wx:class，可以与普通的class属性同时存在，在视图渲染中进行合成。")]),t._v(" "),a("h3",{attrs:{id:"对象语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#对象语法"}},[t._v("#")]),t._v(" 对象语法")]),t._v(" "),a("p",[t._v("wx:class中传入对象，key值为类名，value值控制该类名是否生效。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--支持传入对象字面量，此处视图的class="outer active"--\x3e')]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("outer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ {active:active, disabled:disabled} }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--直接直接传入对象数据，此处视图的class="inner selected"--\x3e')]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("inner"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{innerClass}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("disable")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("innerClass")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("selected")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"数组语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#数组语法"}},[t._v("#")]),t._v(" 数组语法")]),t._v(" "),a("p",[t._v("wx:class中传入字符串数组，字符串为类名。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--支持传入数组字面量，此处视图的class="outer active danger"--\x3e')]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("outer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ ['active', 'danger'] }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--直接直接传入数组数据，此处视图的class="inner selected"--\x3e')]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("inner"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{innerClass}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("innerClass")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selected'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"样式绑定"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#样式绑定"}},[t._v("#")]),t._v(" 样式绑定")]),t._v(" "),a("p",[t._v("样式的增强指令是wx:style，可以与普通的style属性同时存在，在视图渲染中进行合成。")]),t._v(" "),a("h3",{attrs:{id:"对象语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#对象语法"}},[t._v("#")]),t._v(" 对象语法")]),t._v(" "),a("p",[t._v("wx:style中传入用样式对象，带有横杠的样式名可以用驼峰写法来代替")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--支持传入对象字面量，模板会显得杂乱，此处视图的style="color:red;font-size:16px;font-weight:bold;"--\x3e')]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token special-attr"}},[a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),a("span",{pre:!0,attrs:{class:"token value css language-css"}},[a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ {fontSize:'16px', fontWeight:'bold'} }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--更好的方式是直接传入对象数据，此处视图的style="color:blue;font-size:14px;"--\x3e')]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{innerStyle}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("innerStyle")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontSize")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'14px'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"数组语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#数组语法"}},[t._v("#")]),t._v(" 数组语法")]),t._v(" "),a("p",[t._v("wx:style同样支持传入数组将多个样式合成应用到视图上")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--此处视图的style="color:blue;font-size:14px;background-color:red;"--\x3e')]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ [baseStyle, activeStyle] }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("baseStyle")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontSize")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'14px'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("activeStyle")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("backgroundColor")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/84.d50d3d09.js b/docs-vuepress/.vuepress/dist/assets/js/84.d50d3d09.js
deleted file mode 100644
index 7e7fe28c70..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/84.d50d3d09.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[84],{430:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"自定义组件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#自定义组件"}},[t._v("#")]),t._v(" 自定义组件")]),t._v(" "),s("p",[t._v("Mpx中的自定义组件完全基于小程序原生的自定义组件支持，与此同时，Mpx提供的数据响应和模板增强等一系列增强能力都能在自定义组件中使用。")]),t._v(" "),s("p",[t._v("原生自定义组件的规范详情查看"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"动态组件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#动态组件"}},[t._v("#")]),t._v(" 动态组件")]),t._v(" "),s("p",[t._v("Mpx中提供了使用方法类似于 Vue 的动态组件能力，这是一个基于 wx:if 实现的语法。通过对 "),s("code",[t._v("is")]),t._v(" 属性进行动态绑定，可以实现在同一个挂载点切换多个组件，前提需要动态切换的组件已经在全局或者组件中完成注册。\n使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- current为组件名称字符串，可选范围为局部注册的自定义组件和全局注册的自定义组件 --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 当 `current`改变时，组件也会跟着切换  --\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("component")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("is")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{current}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("current")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("current "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'list'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/list"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"test"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/test"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"slot"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#slot"}},[t._v("#")]),t._v(" slot")]),t._v(" "),s("p",[t._v("在组件中使用slot（插槽）可以使我们封装的组件更具有可扩展性，Mpx完全支持原生插槽的使用。")]),t._v(" "),s("p",[t._v("简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 组件模板 --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- components/mySlot.mpx --\x3e")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("这是组件模板"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("slot")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slot1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("slot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("slot")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slot2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("slot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("下面是引入 "),s("code",[t._v("mySlot")]),t._v(" 组件的页面")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- index.mpx --\x3e")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("my-slot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slot1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我是slot1中的内容"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("slot")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slot2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("我是slot2中的内容"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("my-slot")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("options")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("multipleSlots")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 启用多slot支持")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"my-slot"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"components/mySlot"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("更多详情可查看"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/85.1eed1486.js b/docs-vuepress/.vuepress/dist/assets/js/85.1eed1486.js
deleted file mode 100644
index 7c03988647..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/85.1eed1486.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[85],{431:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"条件渲染"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#条件渲染"}},[t._v("#")]),t._v(" 条件渲染")]),t._v(" "),a("p",[t._v("Mpx中的条件渲染与原生小程序中完全一致，详情可以查看"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("简单示例如下:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 通过 wx:if 的语法来控制需要渲染的元素 --\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ score > 90 }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" A "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("elif")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ score > 60 }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" B "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("else")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" C "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 通过 wx:show 来控制元素的显示隐藏--\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("show")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ score > 90 }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" very good! "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("score")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("80")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/86.1ab04b8d.js b/docs-vuepress/.vuepress/dist/assets/js/86.1ab04b8d.js
deleted file mode 100644
index d6befc16b0..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/86.1ab04b8d.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[86],{436:function(s,t,a){"use strict";a.r(t);var n=a(4),e=Object(n.a)({},(function(){var s=this,t=s._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h1",{attrs:{id:"css-处理"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#css-处理"}},[s._v("#")]),s._v(" CSS 处理")]),s._v(" "),t("h2",{attrs:{id:"css-预编译"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#css-预编译"}},[s._v("#")]),s._v(" CSS 预编译")]),s._v(" "),t("p",[s._v("Mpx 支持 CSS 预编译处理，你可以通过在 style 标签上设置 "),t("code",[s._v("lang")]),s._v(" 属性，来指定使用的 CSS 预处理器，此外需要在对应的 webpack 配置文件中\n加入对应的 loader 配置")]),s._v(" "),t("div",{staticClass:"language-html extra-class"},[t("pre",{pre:!0,attrs:{class:"language-html"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("\x3c!-- 使用 stylus --\x3e")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("<")]),s._v("style")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("lang")]),t("span",{pre:!0,attrs:{class:"token attr-value"}},[t("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("stylus"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),t("span",{pre:!0,attrs:{class:"token style"}},[t("span",{pre:!0,attrs:{class:"token language-css"}},[s._v("\n  .nav\n    width 100px\n    height 80px\n    color #f90\n    &"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v("hover\n      background-color #f40\n      color #fff\n")])]),t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("</")]),s._v("style")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),s._v("\n\n// getRules 配置文件\nrules: [\n    {\n        test: /\\.styl(us)?$/,\n        use: [\n            MpxWebpackPlugin.wxssLoader(),\n            'stylus-loader'\n        ]\n    }\n]\n")])])]),t("div",{staticClass:"language-html extra-class"},[t("pre",{pre:!0,attrs:{class:"language-html"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("\x3c!-- 使用 sass  --\x3e")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("<")]),s._v("style")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("lang")]),t("span",{pre:!0,attrs:{class:"token attr-value"}},[t("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("scss"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),t("span",{pre:!0,attrs:{class:"token style"}},[t("span",{pre:!0,attrs:{class:"token language-css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".nav")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("width")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 100px"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("height")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 80px"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v("color: #f90\n    &:hover")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("background-color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #f40"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #fff\n    "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])]),t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("</")]),s._v("style")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),s._v("\n\n// getRules 配置文件\nrules: [\n    {\n        test: /\\.scss$/,\n        use: [\n            'css-loader',\n            'sass-loader'\n        ]\n    }\n]\n")])])]),t("div",{staticClass:"language-html extra-class"},[t("pre",{pre:!0,attrs:{class:"language-html"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("\x3c!-- 使用 less --\x3e")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("<")]),s._v("style")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token attr-name"}},[s._v("lang")]),t("span",{pre:!0,attrs:{class:"token attr-value"}},[t("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[s._v("=")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')]),s._v("less"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v('"')])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),t("span",{pre:!0,attrs:{class:"token style"}},[t("span",{pre:!0,attrs:{class:"token language-css"}},[s._v("\n  "),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".size")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("width")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 100px"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("height")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" 80px\n  "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".nav")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    ."),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("size")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #f90"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token selector"}},[s._v("&:hover")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("background-color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #f40"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"token property"}},[s._v("color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" #fff\n    "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])]),t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token tag"}},[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("</")]),s._v("style")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(">")])]),s._v("\n\n// getRules 配置文件\nrules: [\n    {\n        test: /\\.less$/,\n        use: [\n            'css-loader',\n            'less-loader'\n        ]\n    }\n]\n\n")])])]),t("h2",{attrs:{id:"公共样式复用"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#公共样式复用"}},[s._v("#")]),s._v(" 公共样式复用")]),s._v(" "),t("p",[s._v("为了达到最大限度的样式复用，Mpx 提供了以下两种方式实现公共样式抽离，但是最终打包的效果有所区别。")]),s._v(" "),t("div",{staticClass:"language-styl extra-class"},[t("pre",{pre:!0,attrs:{class:"language-styl"}},[t("code",[t("span",{pre:!0,attrs:{class:"token selector"}},[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// styles/mixin.styl")]),s._v("\n.header-styl")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("width")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")]),t("span",{pre:!0,attrs:{class:"token unit"}},[s._v("%")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("height")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")]),t("span",{pre:!0,attrs:{class:"token unit"}},[s._v("px")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("background-color")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token hexcode"}},[s._v("#f00")])]),s._v("\n")])])]),t("h3",{attrs:{id:"style-src-复用"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-src-复用"}},[s._v("#")]),s._v(" style src 复用")]),s._v(" "),t("p",[s._v("通过给 style 标签添加 src 属性引入外部样式，最终公共样式代码只会打包一份。")]),s._v(" "),t("div",{staticClass:"language-template extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v('\x3c!-- index.mpx --\x3e\n<style lang="stylus" src="../styles/common.styl"></style>\n')])])]),t("div",{staticClass:"language-template extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v('\x3c!-- list.mpx --\x3e\n<style lang="stylus" src="../styles/common.styl"></style>\n')])])]),t("p",[s._v("Mpx 将 common.styl 中的代码经过 loader 编译后生成一份单独的 wxss 文件，这样既实现了样式抽离，又能节省打包后的代码体积。")]),s._v(" "),t("h3",{attrs:{id:"import-复用"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-复用"}},[s._v("#")]),s._v(" @import 复用")]),s._v(" "),t("p",[s._v("如果指定 style 标签的 lang 属性并且使用 @import 导入样式，那么这个文件经过对应的 loader 处理之后的内容会重复打包到引用它的文件目录下，并不会抽离成单独的文件，这样无形中增加了代码体积。")]),s._v(" "),t("div",{staticClass:"language-template extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v('\x3c!-- index.mpx --\x3e\n<style lang="stylus">\n  @import "../styles/mixin.styl"\n</style>\n')])])]),t("div",{staticClass:"language-template extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v('\x3c!-- list.mpx --\x3e\n<style lang="less">\n  @import "../styles/mixin.less";\n</style>\n')])])]),t("p",[s._v("如果导入的是一份 css 文件，则最终打包后的效果与 style src 一致。")]),s._v(" "),t("div",{staticClass:"language-styl extra-class"},[t("pre",{pre:!0,attrs:{class:"language-styl"}},[t("code",[t("span",{pre:!0,attrs:{class:"token selector"}},[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// styles/mixin.css")]),s._v("\n.header-css "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("width")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")]),t("span",{pre:!0,attrs:{class:"token unit"}},[s._v("%")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("height")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")]),t("span",{pre:!0,attrs:{class:"token unit"}},[s._v("px")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("background-color")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token hexcode"}},[s._v("#f00")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")])]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("div",{staticClass:"language-template extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v('\x3c!-- index.mpx --\x3e\n<style>\n  @import "../styles/mixin.css";\n</style>\n')])])]),t("div",{staticClass:"language-template extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[s._v('\x3c!-- list.mpx --\x3e\n<style>\n  @import "../styles/mixin.css";\n</style>\n')])])]),t("p",[s._v("对于多个页面或组件公用的样式，建议使用 style src 形式引入，避免一份样式被内联打成多份，同时还能使用 less、scss 等提升编码效率。")]),s._v(" "),t("h2",{attrs:{id:"css-压缩"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#css-压缩"}},[s._v("#")]),s._v(" CSS 压缩")]),s._v(" "),t("p",[s._v("在 production 模式下，框架默认会使用 "),t("a",{attrs:{href:"https://www.cssnano.cn/",target:"_blank",rel:"noopener noreferrer"}},[t("code",[s._v("cssnano")]),t("OutboundLink")],1),s._v(" 对 css 内容进行压缩。")]),s._v(" "),t("p",[s._v("框架默认内置 cssnano 的 default 预设，默认配置为：")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[s._v("cssnanoConfig "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[s._v("preset")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),t("span",{pre:!0,attrs:{class:"token string"}},[s._v("'cssnano-preset-default'")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" minimizeOptions"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("optimisation "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("||")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),t("p",[s._v("以上配置为框架内置，开发者无需手动配置。")]),s._v(" "),t("p",[s._v("如果你想要使用 cssnano advanced 预设，则需要在 wxssLoader 中传入配置开启")]),s._v(" "),t("div",{staticClass:"language-js extra-class"},[t("pre",{pre:!0,attrs:{class:"language-js"}},[t("code",[t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[s._v("test")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token regex"}},[t("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[s._v("/")]),t("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[s._v("\\.(wxss|acss|css|qss|ttss|jxss|ddss)$")]),t("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[s._v("/")])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[s._v("use")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),s._v("\n    MpxWebpackPlugin"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("wxssLoader")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[s._v("minimize")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[s._v("advanced")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 使用 cssnano advanced preset")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"token literal-property property"}},[s._v("optimisation")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"token string-property property"}},[s._v("'autoprefixer'")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"token string-property property"}},[s._v("'discardUnused'")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n          "),t("span",{pre:!0,attrs:{class:"token string-property property"}},[s._v("'mergeIdents'")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v(":")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[s._v("true")]),s._v("\n        "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v("\n")])])]),t("p",[s._v("同时也需要安装 advanced 依赖：")]),s._v(" "),t("div",{staticClass:"language-bash extra-class"},[t("pre",{pre:!0,attrs:{class:"language-bash"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[s._v("npm")]),s._v(" i "),t("span",{pre:!0,attrs:{class:"token parameter variable"}},[s._v("-D")]),s._v(" cssnano-preset-advanced\n")])])]),t("p",[s._v("optimisation 配置可以点击"),t("a",{attrs:{href:"https://www.cssnano.cn/docs/what-are-optimisations/",target:"_blank",rel:"noopener noreferrer"}},[s._v("详情"),t("OutboundLink")],1),s._v("查看更多配置项。")])])}),[],!1,null,null,null);t.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/87.392384e7.js b/docs-vuepress/.vuepress/dist/assets/js/87.392384e7.js
deleted file mode 100644
index 7b9836c366..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/87.392384e7.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[87],{433:function(t,a,s){"use strict";s.r(a);var n=s(4),p=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"事件处理"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#事件处理"}},[t._v("#")]),t._v(" 事件处理")]),t._v(" "),a("p",[t._v("Mpx在事件处理上基于原生小程序，支持原生小程序的全部事件处理技术规范，在此基础上新增了事件处理内联传参的增强机制。")]),t._v(" "),a("p",[t._v("原生小程序事件处理详情请参考"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("增强的内联传参能力对于传递参数的个数和类型没有特殊限制，可以传递各种字面量，可以传递组件数据，甚至可以传递for中的item和index，\n当内联事件处理器中需要访问原始事件对象时，可以传递"),a("code",[t._v("$event")]),t._v("特殊关键字作为参数，在事件处理器的对应参数位置即可获取。")]),t._v(" "),a("p",[t._v("示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--原生小程序语法，通过dataset进行传参--\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data-name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("a"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--Mpx增强语法，模板内联传参，方便简洁--\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTapInline('b')"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("b"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--参数支持传递字面量和组件数据--\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTapInline(name)"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--参数同样支持传递for作用域下的item/index--\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{names}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTapInline(item)"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--需要使用原始事件对象时可以传递$event特殊关键字--\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTapInlineWithEvent('g', $event)"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("g"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'c'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("names")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'d'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'e'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'f'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTap")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("e")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dataset"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接通过参数获取数据，直观方便")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTapInline")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTapInlineWithEvent")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'event:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/88.a95133cd.js b/docs-vuepress/.vuepress/dist/assets/js/88.a95133cd.js
deleted file mode 100644
index e4492f8e22..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/88.a95133cd.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[88],{465:function(t,e,a){"use strict";a.r(e);var i=a(4),v=Object(i.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"介绍"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#介绍"}},[t._v("#")]),t._v(" 介绍")]),t._v(" "),e("h2",{attrs:{id:"mpx是什么？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mpx是什么？"}},[t._v("#")]),t._v(" Mpx是什么？")]),t._v(" "),e("p",[t._v("Mpx是一款致力于提高小程序开发体验和开发效率的增强型小程序框架，通过Mpx，我们能够高效优雅地开发出具有极致性能的优质小程序应用，并将其输出到各大小程序平台和web平台中运行。")]),t._v(" "),e("p",[t._v("Mpx的核心设计理念在于增强，这意味着Mpx是对小程序原生开发标准的补强和扩充，同时也兼容了原生开发标准。Mpx的一个设计理念在于尽可能地依赖小程序原生的自有能力，如路由系统，自定义组件，事件系统和slot等能力，因此用户在使用Mpx开发小程序时，需要对原生小程序开发有一定程度的掌握。所幸小程序开发本身并不困难，我们也会在本文档中对必要的原生小程序开发知识进行一定程度地说明。")]),t._v(" "),e("p",[t._v("微信小程序作为小程序的开山鼻祖，具有最完善的生态和最全面的特性支持，后来的所有小程序平台在技术方案和代码语法上都与微信小程序高度相似，Mpx目前完善支持了以微信小程序增强语法为base的跨平台输出能力，本文档在介绍原生小程序开发相关的部分时也会以微信小程序为例。")]),t._v(" "),e("p",[t._v("最后，Mpx是一个开发框架，不是组件库，这一点经常会有开发者搞混。Mpx兼容业内已有的小程序组件库，如vant/iview等，我们之后也会开源内部基于Mpx开发的跨端组件库。")]),t._v(" "),e("h2",{attrs:{id:"mpx提供了哪些能力？"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#mpx提供了哪些能力？"}},[t._v("#")]),t._v(" Mpx提供了哪些能力？")]),t._v(" "),e("h3",{attrs:{id:"单文件开发-sfc"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#单文件开发-sfc"}},[t._v("#")]),t._v(" 单文件开发(SFC)")]),t._v(" "),e("p",[t._v("Mpx使用类似Vue的单文件开发模式，小程序原本的template/js/style/json都可以写在单个的.mpx文件中，清晰便捷。")]),t._v(" "),e("h3",{attrs:{id:"数据响应"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#数据响应"}},[t._v("#")]),t._v(" 数据响应")]),t._v(" "),e("p",[t._v("数据响应是Mpx提供的核心增强能力，该能力主要受Vue的启发，主要包含数据赋值响应，watch api和computed计算属性等能力，关于该能力更详细的介绍可以查看"),e("RouterLink",{attrs:{to:"/guide/basic/reactive.html"}},[t._v("这里")])],1),t._v(" "),e("h3",{attrs:{id:"增强的模板语法"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#增强的模板语法"}},[t._v("#")]),t._v(" 增强的模板语法")]),t._v(" "),e("p",[t._v("同样受到Vue的启发，Mpx提供了很多增强模板语法便于开发者方便快捷地进行视图开发，主要包含以下：")]),t._v(" "),e("ul",[e("li",[e("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html#样式绑定"}},[t._v("wx:style动态样式")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html#类名绑定"}},[t._v("wx:class动态类名")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html"}},[t._v("wx:model双向绑定")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性"}},[t._v("wx:model-prop双向绑定属性")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性"}},[t._v("wx:model-event双向绑定事件")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#更改双向绑定事件数据路径"}},[t._v("wx:model-value-path双向绑定数据路径")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#双向绑定过滤器"}},[t._v("wx:model-filter双向绑定过滤器")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/refs.html"}},[t._v("wx:ref获取实例")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/conditional-render.html"}},[t._v("wx:show隐藏显示")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/component.html#动态组件"}},[t._v("component动态组件")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("事件处理内联传参")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/conditional-render.html"}},[t._v("模板条件编译")])],1)]),t._v(" "),e("h3",{attrs:{id:"极致性能"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#极致性能"}},[t._v("#")]),t._v(" 极致性能")]),t._v(" "),e("p",[t._v("Mpx在性能上做到了极致，我们在框架中通过模板数据依赖收集进行了深度的setData优化，做到了程序上的最优，让用户能够专注于业务开发；")]),t._v(" "),e("p",[t._v("其次，Mpx的编译构建完全基于依赖收集，支持按需进行的npm构建，能够自动根据用户的分包配置抽离共用模块，确保用户最终产出项目的包体积最优；")]),t._v(" "),e("p",[t._v("最后，Mpx的运行时框架部分仅占用51KB；")]),t._v(" "),e("p",[t._v("Mpx和业内其他框架的运行时性能对比可以参考"),e("a",{attrs:{href:"https://github.com/hiyuki/mp-framework-benchmark/blob/master/README.md",target:"_blank",rel:"noopener noreferrer"}},[t._v("这篇文章"),e("OutboundLink")],1)]),t._v(" "),e("h3",{attrs:{id:"状态管理"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#状态管理"}},[t._v("#")]),t._v(" 状态管理")]),t._v(" "),e("p",[t._v("Mpx借鉴Vuex的设计实现一套与框架搭配使用的状态管理(store)工具，除了支持Vuex中已有的特性外，我们还创新地提出了一种多实例store的跨团队状态管理模式，我们在业务中实际使用后普遍认为该设计比原有的modules更加灵活方便，更多详情可以"),e("RouterLink",{attrs:{to:"/guide/advance/store.html"}},[t._v("查看这里")])],1),t._v(" "),e("h3",{attrs:{id:"编译构建"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#编译构建"}},[t._v("#")]),t._v(" 编译构建")]),t._v(" "),e("p",[t._v("Mpx的编译构建以webpack为基础，针对小程序项目结构深度定制开发了一个webpack插件和一系列loaders，整个构建过程完全基于依赖收集按需打包，兼容大部分webpack自身能力及生态，此外Mpx的编译构建还支持以下能力：")]),t._v(" "),e("ul",[e("li",[e("RouterLink",{attrs:{to:"/guide/advance/npm.html"}},[t._v("npm构建")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#分包"}},[t._v("分包构建")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/subpackage.html"}},[t._v("包体积优化")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/progressive.html#原生接入"}},[t._v("原生组件支持")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/ability-compatible.html"}},[t._v("原生能力兼容(custom-tab-bar/workers/云开发等)")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/plugin.html"}},[t._v("小程序插件")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/template.html#模板预编译"}},[t._v("模板预编译")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/css.html"}},[t._v("css预编译")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/image-process.html"}},[t._v("静态资源处理")])],1)]),t._v(" "),e("h3",{attrs:{id:"跨平台能力"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#跨平台能力"}},[t._v("#")]),t._v(" 跨平台能力")]),t._v(" "),e("p",[t._v("Mpx支持全部小程序平台(微信，支付宝，百度，头条，qq)的增强开发，同时支持将一份基于微信增强的业务源码输出到全部的小程序平台和web平台中运行，也即将支持输出快应用的能力，更多详情请"),e("RouterLink",{attrs:{to:"/guide/advance/platform.html"}},[t._v("查看这里")])],1),t._v(" "),e("h3",{attrs:{id:"完善的周边能力"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#完善的周边能力"}},[t._v("#")]),t._v(" 完善的周边能力")]),t._v(" "),e("p",[t._v("除了上述的核心能力外，Mpx还提供了丰富的周边能力支持，主要包括以下能力：")]),t._v(" "),e("ul",[e("li",[e("RouterLink",{attrs:{to:"/guide/extend/fetch.html"}},[t._v("网络请求")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/extend/mock.html"}},[t._v("数据mock")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/extend/api-proxy.html"}},[t._v("api增强抹平")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/api/extend.html#webview-bridge"}},[t._v("webview抹平")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/tool/ts.html"}},[t._v("Typescript支持")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/i18n.html"}},[t._v("I18n国际化")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/tool/unit-test.html"}},[t._v("单元测试")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/tool/e2e-test.html"}},[t._v("E2E测试")])],1)]),t._v(" "),e("p",[t._v("Mpx具有以下功能特性：")]),t._v(" "),e("ul",[e("li",[t._v("数据响应 (赋值响应 / "),e("RouterLink",{attrs:{to:"/guide/basic/reactive.html"}},[t._v("watch")]),t._v(" / "),e("RouterLink",{attrs:{to:"/guide/basic/reactive.html"}},[t._v("computed")]),t._v(")")],1),t._v(" "),e("li",[t._v("增强模板语法 ("),e("RouterLink",{attrs:{to:"/guide/basic/component.html#动态组件"}},[t._v("动态组件")]),t._v(" / "),e("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html"}},[t._v("样式绑定 / 类名绑定 ")]),t._v(" / "),e("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("内联事件函数")]),t._v(" / "),e("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html"}},[t._v("双向绑定")]),t._v(" / "),e("RouterLink",{attrs:{to:"/guide/basic/refs.html"}},[t._v("refs")]),t._v(")")],1),t._v(" "),e("li",[t._v("极致性能 ("),e("RouterLink",{attrs:{to:"/guide/understand/runtime.html"}},[t._v("运行时性能优化")]),t._v(" / "),e("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#分包"}},[t._v("包体积优化")]),t._v(" / 框架运行时体积14KB)")],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/understand/compile.html"}},[t._v("高效强大的编译构建")]),t._v(" (基于webpack / 兼容webpack生态 / 兼容原生小程序 / 完善支持npm场景下的分包输出 / 高效调试)")],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/basic/single-file.html"}},[t._v("单文件组件开发")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/progressive.html"}},[t._v("渐进接入 / 原生组件支持")])],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/store.html"}},[t._v("状态管理")]),t._v(" (Vuex规范 / 支持多实例Store)")],1),t._v(" "),e("li",[t._v("跨团队开发 ("),e("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#packages"}},[t._v("packages")]),t._v(")")],1),t._v(" "),e("li",[t._v("逻辑复用 ("),e("RouterLink",{attrs:{to:"/guide/advance/mixin.html"}},[t._v("mixins")]),t._v(")")],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/extend/"}},[t._v("周边能力支持")]),t._v(" (fetch / api增强 / mock / webview-bridge)")],1),t._v(" "),e("li",[t._v("脚手架支持")]),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/platform.html#多平台支持"}},[t._v("多平台增强")]),t._v(" (支持在微信、支付宝、百度、qq、头条小程序平台中进行增强开发)")],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/advance/platform.html#跨平台编译"}},[t._v("跨平台编译")]),t._v(" (支持以微信为base，将一套代码转换输出到支付宝、百度、qq、头条小程序平台和"),e("RouterLink",{attrs:{to:"/guide/advance/platform.html#跨平台输出web"}},[t._v("web平台")]),t._v("中运行)")],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/tool/ts.html"}},[t._v("TypeScript支持")]),t._v(" (基于ThisType实现了完善的类型推导)")],1),t._v(" "),e("li",[e("RouterLink",{attrs:{to:"/guide/tool/i18n.html"}},[t._v("I18n国际化")])],1),t._v(" "),e("li",[t._v("单元测试支持 (即将到来)")]),t._v(" "),e("li",[t._v("快应用输出 (即将到来)")])]),t._v(" "),e("h2",{attrs:{id:"对比其他小程序框架"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#对比其他小程序框架"}},[t._v("#")]),t._v(" 对比其他小程序框架")]),t._v(" "),e("p",[t._v("目前业内的小程序框架主要分为两类，一类是以uniapp，taro2为代表的静态编译型框架，这类框架以静态编译为主要手段，将React和Vue开发的业务源码转换到小程序环境中进行适配运行。这类框架的主要优点在于web项目迁移方便，跨端能力较强。但是由于React/Vue等web框架的DSL与小程序本身存在较大差距，无法完善支持原web框架的全部能力，开发的时候容易踩坑。")]),t._v(" "),e("p",[t._v("另一类是以kbone，taro3为代表的运行时框架，这类框架利用小程序本身提供的动态渲染能力，在小程序中模拟出web的运行时环境，让React/Vue等框架直接在上层运行。这类框架的优点在于web项目迁移方便，且在web框架语法能力的支持上比静态编译型的框架要强很多，开发时遇到的坑也会少很多。但是由于模拟的web运行时环境带来了巨大的性能开销，这类框架并不适合用于大型复杂的小程序开发。")]),t._v(" "),e("p",[t._v("不同于上面两类框架，Mpx以小程序本身的DSL为基础，通过编译和运行时手段结合对其进行了一系列拓展增强，没有复杂庞大的转译和环境抹平，在提升用户开发体验和效率的同时，既能保障开发的稳定和可预期性，又能保障接近原生的良好性能，非常适合开发大型复杂的小程序应用。")]),t._v(" "),e("p",[t._v("在跨端方面，Mpx重点保障跨小程序平台的跨端能力，由于各家小程序标准具有很强的相似性，Mpx在进行跨端输出时，以静态编译为主要手段，辅以灵活便捷的条件编译，保障了跨端输出的性能和可用性。")])])}),[],!1,null,null,null);e.default=v.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/89.213efaae.js b/docs-vuepress/.vuepress/dist/assets/js/89.213efaae.js
deleted file mode 100644
index 3a35e44ba4..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/89.213efaae.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[89],{434:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"列表渲染"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#列表渲染"}},[t._v("#")]),t._v(" 列表渲染")]),t._v(" "),a("p",[t._v("Mpx中的列表渲染与原生小程序中完全一致，详情可以查看"),a("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),a("OutboundLink")],1)]),t._v(" "),a("blockquote",[a("p",[t._v("值得注意的是wx:key与Vue中的key属性的区别，不能使用数据绑定，只能传递普通字符串将数组item中的对应属性作为key，或者传入保留关键字*this将item本身作为key")])]),t._v(" "),a("p",[t._v("下面是简单示例：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 使用数组中元素的 id属性/保留关键字*this 作为key值  --\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{titleList}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- item 默认代表数组的当前项 --\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item.id}}: {{item.name}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("titleList")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"特殊处理"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#特殊处理"}},[t._v("#")]),t._v(" \b特殊处理")]),t._v(" "),a("p",[t._v("当列表中一些需要特殊二次处理的数据，可参考下列两种方式")]),t._v(" "),a("h3",{attrs:{id:"computed方式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#computed方式"}},[t._v("#")]),t._v(" computed方式")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 使用数组中元素的 id属性/保留关键字*this 作为key值  --\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{refactorTitleList}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- item 默认代表数组的当前项 --\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item.id}}: {{item.name}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- bad方式 不可用computed或methods中方法处理 --\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- <view>{{item.id}}: {{format(item.name)}}</view> --\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("titleList")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nameMap")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'1'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mpx'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("refactorTitleList")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("titleList"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 列表中需要特殊处理的数据可在computed中处理好再渲染")]),t._v("\n          item"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nameMap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("item"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nameMap"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("item"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" item"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name\n          "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" item\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h3",{attrs:{id:"wxs方式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wxs方式"}},[t._v("#")]),t._v(" wxs方式")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("wxs")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("module")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("foo"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    var formatName = function (item, nameMap) {\n      // 这里区别string和number\n      var id = ''+item.id\n      if(nameMap[id]){\n        return nameMap[id];\n      }\n      return item.name;\n    }\n    module.exports = {\n      formatName: formatName\n    };\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("wxs")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 使用数组中元素的 id属性/保留关键字*this 作为key值  --\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{titleList}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- item 默认代表数组的当前项 --\x3e")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item.id}}: {{foo.formatName(item, nameMap)}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("titleList")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nameMap")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'1'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mpx'")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/9.26319460.js b/docs-vuepress/.vuepress/dist/assets/js/9.26319460.js
deleted file mode 100644
index 8754f4cad4..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/9.26319460.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{342:function(t,e,s){},361:function(t,e,s){"use strict";s(342)},374:function(t,e,s){"use strict";s.r(e);var a={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},i=(s(361),s(4)),n=Object(i.a)(a,(function(){return(0,this._self._c)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"488b05bd",null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/90.ef03688f.js b/docs-vuepress/.vuepress/dist/assets/js/90.ef03688f.js
deleted file mode 100644
index c522baa2fe..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/90.ef03688f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[90],{437:function(t,a,s){"use strict";s.r(a);var n=s(4),p=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"模版内可选链表达式"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#模版内可选链表达式"}},[t._v("#")]),t._v(" 模版内可选链表达式")]),t._v(" "),a("p",[t._v("Mpx提供了在模版中使用可选链"),a("code",[t._v("?.")]),t._v("访问变量属性的能力，用法/能力和JS的可选链基本一致，可以在任意被"),a("code",[t._v("{{}}")]),t._v("所包裹的模版语法内使用。")]),t._v(" "),a("blockquote",[a("p",[t._v("实现原理是在编译时将使用"),a("code",[t._v("?.")]),t._v("的部分转化为"),a("code",[t._v("wxs")]),t._v("函数调用，运行时通过"),a("code",[t._v("wxs")]),t._v("访问变量属性，模拟出可选链的效果。")])]),t._v(" "),a("p",[t._v("使用示例：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[t._v("  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ a?.b }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ a?.c + a?.d }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ a?.d || [] }}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ a?.d ? 'a' : 'b' }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ a?.g[e?.d] }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("a")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("b")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("c")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("123")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("g")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("d")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("321")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("e")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("d")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'d'")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  ")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/91.43930d52.js b/docs-vuepress/.vuepress/dist/assets/js/91.43930d52.js
deleted file mode 100644
index cf3773abab..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/91.43930d52.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[91],{439:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"数据响应"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#数据响应"}},[t._v("#")]),t._v(" 数据响应")]),t._v(" "),s("p",[t._v("Vue中最为开发者们所津津乐道的特性就是其数据响应特性，Vue中的数据响应特性主要包含：响应数据赋值、watch观察数据和computed计算属性，该能力让我们能够以非常直观简洁的方式建立起数据与数据之间/数据与视图之间的绑定依赖关系，大幅提升复杂webapp的开发体验和开发效率。")]),t._v(" "),s("p",[t._v("受此启发，Mpx通过增强的方式在小程序开发中提供了完整的数据响应特性，在2.5.x版本前，Mpx通过mobx实现内部和核心数据响应，在2.5.x版本之后，从数据响应性能、完整度和运行时包体积等多方面角度考虑，我们借鉴了Vue2的设计，在内部自行维护了一套精简高效的数据响应系统，全面移除了对于mobx的依赖。")]),t._v(" "),s("p",[t._v("在新的响应系统中，所有的使用方法和使用限制都和Vue保持一致，关于数据响应的原理和使用限制可以参考"),s("a",{attrs:{href:"https://cn.vuejs.org/v2/guide/reactivity.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("下面是一个小程序数据响应的简单示例：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Num: {{num}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Minus num: {{mnum}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Num plus: {{nump}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{info.name}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{info.age}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{info.age}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// data中定义的数据会在初始化时进行数据响应处理")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("num")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("info")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 配置中直接定义watch")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("num")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 定义计算属性，模板中可以直接访问")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mnum")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nump")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 支持计算属性的setter")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" val "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用实例方法定义watch，可以传递追踪函数更加灵活")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nump "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("mnum\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("val"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 每隔一秒进行一次更新，相关watcher会被触发，视图也会发生更新")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setInterval")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用$set新增响应属性，视图同样能够得到更新")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'age'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("23")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/92.ae5e9611.js b/docs-vuepress/.vuepress/dist/assets/js/92.ae5e9611.js
deleted file mode 100644
index a6cf10550a..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/92.ae5e9611.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[92],{438:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"获取组件实例-节点信息"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#获取组件实例-节点信息"}},[t._v("#")]),t._v(" 获取组件实例/节点信息")]),t._v(" "),s("p",[t._v("微信小程序中原生提供了"),s("code",[t._v("selectComponent/SelectorQuery.select")]),t._v("方法获取自定义组件实例和wxml节点信息，但是该api使用起来不太方便，并且不具备平台无关性，我们提供了增强指令"),s("code",[t._v("wx:ref")]),t._v("用于获取组件实例及节点信息，该指令的使用方式同vue中的ref类似，在模板中声明了"),s("code",[t._v("wx:ref")]),t._v("后，在组件ready后用户可以通过"),s("code",[t._v("this.$refs")]),t._v("获取对应的组件实例或节点查询对象(NodeRefs)，调用响应的组件方法或者获取视图节点信息。")]),t._v(" "),s("blockquote",[s("p",[s("code",[t._v("wx:ref")]),t._v("其实也是模板编译和运行时注入结合实现的语法糖，本质还是通过原生小程序平台提供的能力进行获取，其实现的主要意义在于抹平跨平台差异以及提升用户的使用体验。")])]),t._v(" "),s("p",[t._v("简单的使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- my-header 为一个组件，组件内部定义了一个 show 方法 --\x3e")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("my-header")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("myHeader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("my-header")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 this.$refs 获取view的节点查询对象")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fields")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("size")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// res 就是我们要拿到的节点大小")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 this.$refs 可直接获取组件实例")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("myHeader"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("show")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 拿到组件实例，调用组件内部的方法")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  ")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"在列表渲染中使用-wx-ref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在列表渲染中使用-wx-ref"}},[t._v("#")]),t._v(" 在列表渲染中使用"),s("code",[t._v("wx:ref")])]),t._v(" "),s("p",[t._v("在列表渲染中定义的"),s("code",[t._v("wx:ref")]),t._v("存在多个实例/节点，Mpx会在模板编译中判断某个"),s("code",[t._v("wx:ref")]),t._v("是否存在于列表渲染"),s("code",[t._v("wx:for")]),t._v("中，是的情况下在注入"),s("code",[t._v("this.$refs")]),t._v("时会通过"),s("code",[t._v("selectAllComponents/SelectQuery.selectAll")]),t._v("方法获取组件实例数组或数组节点查询对象，确保开发者能拿到列表渲染中所有的组件实例/节点信息。")]),t._v(" "),s("p",[t._v("使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- list 组件 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("list")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{listData}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{item.name}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- view 节点 --\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("test"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{listData}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item.name}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("listData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 this.$refs.list 获取的是组件实例的数组")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对每一个组件实例的操作...")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 通过 this.$refs.test 获取的是节点查询对象，通过相关的方法操作节点")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("test"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fields")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("size")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 此处拿到的 res 是一个数组，包含了列表渲染中的所有节点的大小信息")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/93.3cdab647.js b/docs-vuepress/.vuepress/dist/assets/js/93.3cdab647.js
deleted file mode 100644
index dcaab07949..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/93.3cdab647.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[93],{440:function(t,s,a){"use strict";a.r(s);var n=a(4),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"单文件开发"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#单文件开发"}},[t._v("#")]),t._v(" 单文件开发")]),t._v(" "),s("p",[t._v("小程序规范中每个页面和组件都是由四个文件描述组成的，wxml/js/wxss/json，分别描述了组件/页面的视图模板，执行逻辑，样式和配置，由于这四个部分彼此之间存在相关性，比如模板中的组件需要在json中注册，数据需要在js中定义，这种离散的文件结构在实际开发的时候体验并不理想；受Vue单文件开发的启发，Mpx也提供了类似的单文件开发模式，拓展名为.mpx。")]),t._v(" "),s("p",[t._v("从下面的简单例子可以看出，.mpx中的四个区块分别对应了原生规范中的四个文件，Mpx在执行编译构建时会通过内置的"),s("code",[t._v("mpx-loader")]),t._v("收集依赖，并将.mpx的文件转换输出为原生规范中的四个文件。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--对应wxml文件--\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--对应js文件--\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLoad")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--对应wxss文件--\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--对应json文件--\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/list"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=p.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/94.72df7b53.js b/docs-vuepress/.vuepress/dist/assets/js/94.72df7b53.js
deleted file mode 100644
index eee51c3344..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/94.72df7b53.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[94],{443:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"快速开始"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#快速开始"}},[t._v("#")]),t._v(" 快速开始")]),t._v(" "),s("h2",{attrs:{id:"安装脚手架"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装脚手架"}},[t._v("#")]),t._v(" 安装脚手架")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" i "),s("span",{pre:!0,attrs:{class:"token parameter variable"}},[t._v("-g")]),t._v(" @mpxjs/cli\n")])])]),s("blockquote",[s("p",[t._v("@mpxjs/cli文档 https://github.com/mpx-ecology/mpx-cli")])]),t._v(" "),s("h2",{attrs:{id:"创建项目安装依赖"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#创建项目安装依赖"}},[t._v("#")]),t._v(" 创建项目安装依赖")]),t._v(" "),s("p",[t._v("在当前目录下创建mpx项目。")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("mpx create mpx-project\n")])])]),s("p",[t._v("也可以使用npx在不全局安装脚手架情况下创建项目。")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[t._v("npx @mpxjs/cli create mpx-project\n")])])]),s("p",[t._v("执行命令后会弹出一系列问题进行项目初始配置，根据自身需求进行选择，完成后进入项目目录进行依赖安装。")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("创建"),s("code",[t._v("插件项目")]),t._v("由于微信限制必须填写插件的"),s("code",[t._v("AppID")]),t._v("，创建"),s("code",[t._v("普通项目")]),t._v("无强制要求。")])]),t._v(" "),s("h2",{attrs:{id:"编译构建"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#编译构建"}},[t._v("#")]),t._v(" 编译构建")]),t._v(" "),s("p",[t._v("使用npm script执行mpx的编译构建，在开发模式下我们执行serve命令，将项目源码构建输出到"),s("code",[t._v("dist/${平台目录}")]),t._v("下，并且监听源码的改动进行重新编译。")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" run serve\n")])])]),s("h2",{attrs:{id:"预览调试"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#预览调试"}},[t._v("#")]),t._v(" 预览调试")]),t._v(" "),s("p",[t._v("使用小程序开发者工具打开dist下对应平台的目录，对你的小程序进行预览、调试，详情可参考"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("小程序开发指南"),s("OutboundLink")],1)]),t._v(" "),s("blockquote",[s("p",[t._v("开启小程序开发者工具的watch选项，配合mpx本身的watch，能够得到很好的开发调试体验。")])]),t._v(" "),s("h2",{attrs:{id:"开始code"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开始code"}},[t._v("#")]),t._v(" 开始code")]),t._v(" "),s("p",[t._v("在Mpx中，我们使用"),s("code",[t._v("@mpxjs/core")]),t._v("提供的createApp、createPage和createComponent函数（分别对应原生小程序中的App、Page和Component）来创建App、页面和组件，我们下面根据脚手架创建出的初始项目目录，进行简单的介绍。")]),t._v(" "),s("p",[t._v("进入src/app.mpx，我们可以看到里面的结构和.vue文件非常类似，三个区块分别对应了小程序中的js/wxss/json文件。")]),t._v(" "),s("p",[t._v("js区块中调用createApp用于注册小程序，传入的配置可以参考"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("小程序App构造器"),s("OutboundLink")],1),t._v("，由于app.js是小程序全局最早执行的js模块，一般mpx插件安装等初始化操作也在这里进行。")]),t._v(" "),s("p",[t._v("style区块对应app.wxss定义了全局样式，可以自由使用sass/less/stylus等css预编译语言。")]),t._v(" "),s("p",[t._v("json区块完全支持小程序原生的"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("app.json配置"),s("OutboundLink")],1),t._v("，还额外支持了"),s("RouterLink",{attrs:{to:"/guide/advance/subpackage.html#packages"}},[t._v("packages多人合作")]),t._v("等增强特性。")],1),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createApp "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\n  mpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePromise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  \n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createApp")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLaunch")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n  .bold\n    font-weight bold\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"pages"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./pages/index"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("进入src/pages/index.mpx，可以看到同样是.vue风格的单文件结构，比起上面的app.mpx多了一个template区块，用于定义页面模板，除了支持小程序本身的全部模块语法和指令外，mpx还参考vue提供了大量"),s("RouterLink",{attrs:{to:"/api/directives.html"}},[t._v("模板增强指令")]),t._v("，便于用户更快速高效地进行界面开发。")],1),t._v(" "),s("p",[t._v("在js中调用createPage创建页面时，除了支持原本小程序支持的"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Page配置"),s("OutboundLink")],1),t._v("外，我们还支持以"),s("RouterLink",{attrs:{to:"/guide/basic/reactive.html"}},[t._v("数据响应")]),t._v("为核心的一系列增强能力。")],1),t._v(" "),s("p",[t._v("在json中，我们同样支持原生的"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("页面json配置"),s("OutboundLink")],1),t._v("，此外，我们能够直接在"),s("code",[t._v("usingComponents")]),t._v("中填写npm地址引用npm包中的组件，mpx组件和原生小程序组件均可引用，无需调用开发者工具npm编译，且能够通过依赖收集按需进行打包。")]),t._v(" "),s("blockquote",[s("p",[t._v("为了保障增强能力的完整性，在支持的平台中Mpx优先使用Component构造器创建页面，支持全部Component生命周期；在某些特殊情况下，你可以在"),s("RouterLink",{attrs:{to:"/api/compile.html#forceusepagector"}},[t._v("@mpxjs/webpack-plugin")]),t._v("中传入forceUsePageCtor:true配置来禁用掉这个行为。")],1)]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("list")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onLoad")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onReady")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"list"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/list"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("最后，我们进入src/components/list.mpx文件，可以看到其构成与页面文件十分相似，对于组件，Mpx提供了和页面完全一致的增强能力")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{listData}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("listData")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手机'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电视'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电脑'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylus"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n  .list\n    background-color red\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"component"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("更多用法可以查看我们的官方实例："),s("a",{attrs:{href:"https://github.com/didi/mpx/tree/master/examples/",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/didi/mpx/tree/master/examples/"),s("OutboundLink")],1)]),t._v(" "),s("h2",{attrs:{id:"跨平台输出"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#跨平台输出"}},[t._v("#")]),t._v(" 跨平台输出")]),t._v(" "),s("p",[t._v("如果你选择的base平台为微信，mpx提供了强大的跨平台输出能力，能够将你的小程序源码输出到目前业内的全部小程序平台(微信/支付宝/百度/头条/QQ)中和web平台中运行。")]),t._v(" "),s("p",[t._v("执行以下命令进行跨平台输出")]),t._v(" "),s("div",{staticClass:"language-shell extra-class"},[s("pre",{pre:!0,attrs:{class:"language-shell"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" run build:cross\n")])])]),s("p",[t._v("关于跨平台能力的更多详情请查看"),s("RouterLink",{attrs:{to:"/guide/advance/platform.html"}},[t._v("这里")])],1)])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/95.c8e36604.js b/docs-vuepress/.vuepress/dist/assets/js/95.c8e36604.js
deleted file mode 100644
index d851b55941..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/95.c8e36604.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[95],{442:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"模板语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模板语法"}},[t._v("#")]),t._v(" 模板语法")]),t._v(" "),s("p",[t._v("Mpx中的模板语法以小程序模板语法为基础，支持小程序的全部模板语法，同时提供了一系列增强的模板指令及语法。")]),t._v(" "),s("p",[t._v("小程序原生模板语法请参考"),s("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/",target:"_blank",rel:"noopener noreferrer"}},[t._v("这里"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("Mpx提供的增强指令语法如下：")]),t._v(" "),s("ul",[s("li",[s("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html#样式绑定"}},[t._v("wx:style动态样式")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/class-style-binding.html#类名绑定"}},[t._v("wx:class动态类名")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html"}},[t._v("wx:model双向绑定")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性"}},[t._v("wx:model-prop双向绑定属性")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性"}},[t._v("wx:model-event双向绑定事件")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#更改双向绑定事件数据路径"}},[t._v("wx:model-value-path双向绑定数据路径")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/two-way-binding.html#双向绑定过滤器"}},[t._v("wx:model-filter双向绑定过滤器")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/refs.html"}},[t._v("wx:ref获取实例")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/conditional-render.html"}},[t._v("wx:show隐藏显示")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/component.html#动态组件"}},[t._v("component动态组件")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/event.html"}},[t._v("事件处理内联传参")])],1),t._v(" "),s("li",[s("RouterLink",{attrs:{to:"/guide/basic/template.html"}},[t._v("模板条件编译")])],1)]),t._v(" "),s("p",[t._v("下面是使用了模板增强语法的一个简单实例，许多在原生小程序上很繁琐的模板描述在增强语法的帮助下变得清晰简洁：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--动态样式--\x3e")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{dynamicStyle}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--数据绑定--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{title}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--计算属性数据绑定--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{reversedTitle}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--循环渲染，动态类名，事件处理内联传参--\x3e")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{ {active:item.active} }}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleTap(index)"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item.content}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--循环内部双向数据绑定--\x3e")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list[index].content}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--自定义组件获取实例，双向绑定，自定义双向绑定属性及事件--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("custom-input")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ci"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{customInfo}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-prop")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-event")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("change"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--动态组件，is传入组件名字符串，可使用的组件需要在json中注册，全局注册也生效--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("component")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("is")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{current}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("component")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--显示/隐藏dom--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bottom"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("show")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{showBottom}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--模板条件编译，__mpx_mode__为框架注入的环境变量，条件判断为false的模板不会生成到dist--\x3e")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'wx'}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("wx env"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{__mpx_mode__ === 'ali'}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("ali env"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createPage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 动态样式和类名也可以使用computed返回")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dynamicStyle")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fontSize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'16px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello world'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("list")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'全军出击'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'猥琐发育，别浪'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("active")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("customInfo")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test content'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("current")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'com-a'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("showBottom")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reversedTitle")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("split")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reverse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("handleTap")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("index")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 处理函数直接通过参数获取当前点击的index，清晰简洁")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("active "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("index"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("active\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("application/json"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"usingComponents"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"custom-input"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/custom-input"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"com-a"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/com-a"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v('"com-b"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"../components/com-b"')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"模板预编译"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#模板预编译"}},[t._v("#")]),t._v(" 模板预编译")]),t._v(" "),s("p",[t._v("Mpx还支持开发者使用插值语法与小程序不冲突第三方的模板引擎语法来编写template，如pug：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pug"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('\n  view(class="list")\n    view(class="list-item") red\n    view(class="list-item") blue\n    view(class="list-item") green\n'),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/96.1ebdc00d.js b/docs-vuepress/.vuepress/dist/assets/js/96.1ebdc00d.js
deleted file mode 100644
index 811234c7c1..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/96.1ebdc00d.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[96],{441:function(t,a,s){"use strict";s.r(a);var n=s(4),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"双向绑定"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#双向绑定"}},[t._v("#")]),t._v(" 双向绑定")]),t._v(" "),a("p",[t._v("Mpx针对表单组件提供了"),a("code",[t._v("wx:model")]),t._v("双向绑定指令，类似于"),a("code",[t._v("v-model")]),t._v("，该指令是一个语法糖指令，监听了组件抛出的输入事件并对绑定的数据进行更新，默认情况下会监听表单组件的"),a("code",[t._v("input")]),t._v("事件，并将"),a("code",[t._v("event.detail.value")]),t._v("中的数据更新到组件的"),a("code",[t._v("value")]),t._v("属性上。")]),t._v(" "),a("p",[t._v("简单实用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--view中的文案会随着用户对输入框进行输入而实时更新--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"对自定义组件使用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#对自定义组件使用"}},[t._v("#")]),t._v(" 对自定义组件使用")]),t._v(" "),a("p",[t._v("对自定义组件使用双向绑定时用法与原生小程序组件完全一致")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("custom-input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--此处的文案会随着输入框输入实时更新--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"更改双向绑定的监听事件及数据属性"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#更改双向绑定的监听事件及数据属性"}},[t._v("#")]),t._v(" 更改双向绑定的监听事件及数据属性")]),t._v(" "),a("p",[t._v("如前文所述，"),a("code",[t._v("wx:model")]),t._v("指令默认监听组件抛出的"),a("code",[t._v("input")]),t._v("事件，并将声明的数据绑定到组件的"),a("code",[t._v("value")]),t._v("属性上，该行为在一些原生组件和自定义组件上并不成立，因为这些组件可能不存在"),a("code",[t._v("input")]),t._v("事件或"),a("code",[t._v("value")]),t._v("属性。对此，我们提供了"),a("code",[t._v("wx:model-event")]),t._v("和"),a("code",[t._v("wx:model-prop")]),t._v("指令来修改双向绑定的监听事件和数据属性，使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--原生组件picker中没有input事件，通过wx:model-event指令将双向绑定监听事件改为change事件--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("picker")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("mode")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("selector"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("range")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{countryRange}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{country}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-event")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("change"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("picker"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      当前选择: {{country}}\n    "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("picker")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--通过wx:model-event和wx:model-prop将该自定义组件的双向绑定监听事件和数据属性修改为customInput/customValue--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("custom-input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-event")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("customInput"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-prop")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("customValue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"更改双向绑定事件数据路径"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#更改双向绑定事件数据路径"}},[t._v("#")]),t._v(" 更改双向绑定事件数据路径")]),t._v(" "),a("p",[t._v("Mpx中双向绑定默认使用event对象中的"),a("code",[t._v("event.detail.value")]),t._v("作为用户输入来更新组件数据，该行为在一些原生组件和自定义组件中也不成立，例如vant中的field输入框组件，用户的输入直接存储在"),a("code",[t._v("event.detail")]),t._v("当中，当然用户也可以将其存放在detail中的其他数据路径下，对此，我们提供了"),a("code",[t._v("wx:model-value-path")]),t._v("指令让用户声明在事件当中应该访问的数据路径。")]),t._v(" "),a("p",[t._v("由于小程序triggerEvent的Api设计，事件的用户数据都只能存放在"),a("code",[t._v("event.detail")]),t._v("中，因此"),a("code",[t._v("wx:model-value-path")]),t._v("的值都是相对于"),a("code",[t._v("event.detail")]),t._v("的数据路径，我们支持两种形式进行声明：")]),t._v(" "),a("ul",[a("li",[t._v("一种是点语法，如传入"),a("code",[t._v("current.value")]),t._v("时框架会从"),a("code",[t._v("event.detail.current.value")]),t._v("中取值作为用户输入，为空字符串时"),a("code",[t._v('wx:model-value-path=""')]),t._v("代表直接使用"),a("code",[t._v("event.detail")]),t._v("作为用户输入；")]),t._v(" "),a("li",[t._v("第二种是数组字面量的JSON字符串，如"),a("code",[t._v('["current", "value"]')]),t._v("与上面的"),a("code",[t._v("current.value")]),t._v("等价，传入"),a("code",[t._v("[]")]),t._v("时与上面的空字符串等价。")])]),t._v(" "),a("p",[t._v("使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--wx:model-value-path传入[]直接使用event.detail作为用户输入，使vant-field中双向绑定能够生效--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("van-field")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{username}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-value-path")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("[]"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("label")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("用户名"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("placeholder")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("请输入用户名"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("h2",{attrs:{id:"双向绑定过滤器"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#双向绑定过滤器"}},[t._v("#")]),t._v(" 双向绑定过滤器")]),t._v(" "),a("p",[t._v("用户可以使用"),a("code",[t._v("wx:model-filter")]),t._v("指令定义双向绑定过滤器，在修改数据之前对用户输入进行过滤，来实现特定的效果，框架内置了"),a("code",[t._v("trim")]),t._v("过滤器对用户输入进行trim操作，传入其他字符串时会使用当前组件中的同名方法作为自定义过滤器，使用示例如下：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--以下示例中，用户输入的首尾空格将被过滤--\x3e")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("model-filter")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("trim"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{message}}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/97.fa1ed9e7.js b/docs-vuepress/.vuepress/dist/assets/js/97.fa1ed9e7.js
deleted file mode 100644
index ac67e84306..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/97.fa1ed9e7.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[97],{446:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"组合式-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api"}},[t._v("#")]),t._v(" 组合式 API")]),t._v(" "),s("h2",{attrs:{id:"什么是组合式-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#什么是组合式-api"}},[t._v("#")]),t._v(" 什么是组合式 API")]),t._v(" "),s("p",[t._v("组合式 API 是 Vue3 中包含的最重要的特性之一，主要由 "),s("code",[t._v("setup")]),t._v(" 函数及一系列响应式 API 及生命周期钩子函数组成，与传统的选项式 API 相比，组合式 API 具备以下优势：")]),t._v(" "),s("ul",[s("li",[t._v("更好的逻辑复用，通过函数包装复用逻辑，显式引入调用，方便简洁且符合直觉，规避消除了 mixins 复用中存在的缺陷；")]),t._v(" "),s("li",[t._v("更灵活的代码组织，相比于选项式 API 提前规定了代码的组织方式，组合式 API 在这方面几乎没有做任何限制与规定，更加灵活自由，在功能复杂的庞大组件中，我们能够通过组合式 API 让我们的功能代码更加内聚且有条理，不过这也会对开发者自身的代码规范意识提出更高要求；")]),t._v(" "),s("li",[t._v("更方便的类型推导，虽然基于 "),s("code",[t._v("this")]),t._v(" 的选项式 API 通过 "),s("code",[t._v("ThisType")]),t._v(" 也能在一定程度上实现 TS 类型推导，但推导和实现成本较高，同时仍然无法完美覆盖一些复杂场景（如嵌套 mixins 等）；而组合式 API 以本地变量和函数为基础，本身就是类型友好的，我们在类型方面几乎不需要做什么额外的工作就能享受到完美的类型推导。")])]),t._v(" "),s("p",[t._v("同时与 React Hooks 相比，组合式 API 中的 "),s("code",[t._v("setup")]),t._v(" 函数只在初始化时单次执行，在数据响应能力的加持下大大降低了理解与使用成本，基于以上原因，我们决定为 Mpx 添加组合式 API 能力，让用户能够用组合式 API 方式进行小程序开发。")]),t._v(" "),s("p",[t._v("更多关于组合式 API 的说明可以查看 "),s("a",{attrs:{href:"https://vuejs.org/guide/extras/composition-api-faq.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue3 官方文档"),s("OutboundLink")],1),t._v("。")]),t._v(" "),s("p",[t._v("Mpx 是一个小程序优先的增强型跨端框架，因此我们在为 Mpx 设计实现组合式 API 的过程中，并不追求与 Vue3 中的组合式 API 完全一致，我们更多是借鉴 Vue3 中组合式 API 的设计思想，将其与目前 Mpx 及小程序中的开发模式结合起来，而非完全照搬其实现。因此在 Mpx 中一些具体的 API 设计实现会与 Vue3 存在差异，我们会在后续相关的文档中进行标注说明，如果你想查看 Mpx 与 Vue3 在组合式 API 中的差异，可以跳转到"),s("a",{attrs:{href:"#%E7%BB%84%E5%90%88%E5%BC%8F-API-%E4%B8%8E-Vue3-%E4%B8%AD%E7%9A%84%E5%8C%BA%E5%88%AB"}},[t._v("这里")]),t._v("查看。")]),t._v(" "),s("h2",{attrs:{id:"组合式-api-基础"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-基础"}},[t._v("#")]),t._v(" 组合式 API 基础")]),t._v(" "),s("h3",{attrs:{id:"setup-函数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setup-函数"}},[t._v("#")]),t._v(" setup 函数")]),t._v(" "),s("p",[t._v("同 Vue3 一样，在 Mpx 当中 "),s("code",[t._v("setup")]),t._v(" 函数是组合式 API 的基础，我们可以在 "),s("code",[t._v("createPage")]),t._v(" 和 "),s("code",[t._v("createComponent")]),t._v(" 中声明 "),s("code",[t._v("setup")]),t._v(" 函数。")]),t._v(" "),s("p",[s("code",[t._v("setup")]),t._v(" 函数接收 "),s("code",[t._v("props")]),t._v(" 和 "),s("code",[t._v("context")]),t._v(" 两个参数，其中 "),s("code",[t._v("context")]),t._v(" 参数与 Vue3 中存在差别，详情可以查看"),s("a",{attrs:{href:"#Setup"}},[t._v("这里")]),t._v("。")]),t._v(" "),s("p",[t._v("我们参考 Vue3 中的示例实现一个小程序版本，可以看到它和 Vue3 中的实现基本一致，包含以下功能：")]),t._v(" "),s("ul",[s("li",[t._v("仓库列表")]),t._v(" "),s("li",[t._v("更新仓库列表的函数")]),t._v(" "),s("li",[t._v("返回列表和函数，以便其他组件选项可以对它们进行访问")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fetchUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/api/repositories'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getUserRepositories")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回的数据，可以在其他选项式 API 中通过 this 访问或在模板上直接访问")]),t._v("\n      getUserRepositories "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 返回的函数，它的行为与将其定义在 methods 选项中的行为相同")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("目前 "),s("code",[t._v("repositories")]),t._v(" 是个非响应式变量，用户层面将无法感知它的变化，仓库列表将始终为空。")]),t._v(" "),s("h3",{attrs:{id:"带-ref-的响应式变量"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#带-ref-的响应式变量"}},[t._v("#")]),t._v(" 带 "),s("code",[t._v("ref")]),t._v(" 的响应式变量")]),t._v(" "),s("p",[t._v("同 Vue3 一致，我们可以通过 "),s("code",[t._v("ref")]),t._v(" 函数为任意一个变量创建响应式引用，"),s("code",[t._v("ref")]),t._v(" 接收参数并将其包裹在一个带有 "),s("code",[t._v("value")]),t._v(" property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值，简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" counter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// { value: 0 }")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0")]),t._v("\n\ncounter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),s("p",[t._v("回到我们的示例中，我们通过 "),s("code",[t._v("ref")]),t._v(" 创建一个响应式的 "),s("code",[t._v("repositories")]),t._v(" 变量：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fetchUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/api/repositories'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getUserRepositories")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      getUserRepositories\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("通过 "),s("code",[t._v("ref")]),t._v(" 包裹以后，我们每次调用 "),s("code",[t._v("getUserRepositories")]),t._v(" 更新 "),s("code",[t._v("repositories")]),t._v(" 的值都能被外部的 "),s("code",[t._v("watch")]),t._v(" 观测到，并且触发视图的更新。")]),t._v(" "),s("h3",{attrs:{id:"在-setup-中注册生命周期钩子"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在-setup-中注册生命周期钩子"}},[t._v("#")]),t._v(" 在 "),s("code",[t._v("setup")]),t._v(" 中注册生命周期钩子")]),t._v(" "),s("p",[t._v("为了完整实现选项式 API 中的能力，我们需要支持在 "),s("code",[t._v("setup")]),t._v(" 中注册生命周期钩子，同 Vue3 类似，我们也提供了一系列生命周期钩子的注册函数，这些函数都以 "),s("code",[t._v("on")]),t._v(" 开头，不过由于 Mpx 的跨平台特性，我们不可能针对不同的平台提供不同的生命周期钩子函数，因此我们提供了一份抹平跨平台差异后统一的生命周期钩子，与小程序原生生命周期的映射关系可查看"),s("a",{attrs:{href:"#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90"}},[t._v("这里")]),t._v("。")]),t._v(" "),s("p",[t._v("我们希望在组件挂载时调用 "),s("code",[t._v("getUserRepositories")]),t._v("，可以使用 "),s("code",[t._v("onMounted")]),t._v(" 钩子来实现，注意这里不是 "),s("code",[t._v("onReady")]),t._v("，不过它确实对应于微信小程序中组件的 "),s("code",[t._v("ready")]),t._v(" 钩子：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fetchUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/api/repositories'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getUserRepositories")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在组件挂载时（微信小程序中相当于ready）调用 getUserRepositories")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      getUserRepositories\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"watch-响应式更改"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watch-响应式更改"}},[t._v("#")]),t._v(" "),s("code",[t._v("watch")]),t._v(" 响应式更改")]),t._v(" "),s("p",[t._v("现在我们需要对 "),s("code",[t._v("user")]),t._v(" prop 的变化做出响应，可以使用新的 "),s("code",[t._v("watch")]),t._v(" API，该 API 接受 3 个参数：")]),t._v(" "),s("ul",[s("li",[t._v("一个想要侦听的响应式引用或 getter 函数")]),t._v(" "),s("li",[t._v("一个回调")]),t._v(" "),s("li",[t._v("可选的配置选项")])]),t._v(" "),s("p",[t._v("简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watch "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" counter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'The new counter value is: '")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("当 "),s("code",[t._v("counter")]),t._v(" 被修改时，例如 "),s("code",[t._v("counter.value = 5")]),t._v("，侦听将触发并执行回调打印 "),s("code",[t._v("The new counter value is:5")]),t._v("。")]),t._v(" "),s("p",[t._v("回到我们的示例中，当 "),s("code",[t._v("user")]),t._v(" prop 发生变化时调用 "),s("code",[t._v("getUserRepositories")]),t._v(" 更新仓库列表：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fetchUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/api/repositories'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 `toRefs` 创建对 `props` 中的 `user` property 的响应式引用")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" user "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getUserRepositories")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 更新 `prop.user` 到 `user.value` 访问引用值")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n    \n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在 user prop 的响应式引用上设置一个侦听器")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      getUserRepositories\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("你可能已经注意到在我们的 setup 的顶部使用了 toRefs。这是为了确保我们的侦听器能够根据 user prop 的变化做出反应。")]),t._v(" "),s("h3",{attrs:{id:"独立的-computed-属性"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#独立的-computed-属性"}},[t._v("#")]),t._v(" 独立的 "),s("code",[t._v("computed")]),t._v(" 属性")]),t._v(" "),s("p",[t._v("与 "),s("code",[t._v("ref")]),t._v(" 和 "),s("code",[t._v("watch")]),t._v(" 类似，也可以使用从 Mpx 导入的 "),s("code",[t._v("computed")]),t._v(" 函数创建计算属性，简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" counter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" twiceTheCounter "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("*")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\ncounter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("counter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("twiceTheCounter"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\n")])])]),s("p",[t._v("这里我们给 "),s("code",[t._v("computed")]),t._v(" 函数传递了第一个参数，它是一个类似 getter 的回调函数，输出的是一个只读的响应式引用。为了访问新创建的计算变量的 value，我们需要像 "),s("code",[t._v("ref")]),t._v(" 一样使用 "),s("code",[t._v(".value")]),t._v(" property。")]),t._v(" "),s("p",[t._v("回到我们的示例，我们通过 "),s("code",[t._v("computed")]),t._v(" 为仓库列表实现搜索功能：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fetchUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/api/repositories'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" user "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getUserRepositories")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" \n    \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" searchQuery "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" repositoriesMatchingSearchQuery "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("repository")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" repository"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("searchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      searchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      repositoriesMatchingSearchQuery\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("可以看到目前我们的 "),s("code",[t._v("setup")]),t._v(" 函数已经相当庞大了，在不进行任何封装的情况下我们很可能在 "),s("code",[t._v("setup")]),t._v(" 中写出流水账式的代码，可维护性很差，这也是为什么组合式 API 会对开发者的代码风格提出更高的要求，下面我们来拆解目前已经实现的功能，将它们提取到独立的组合函数中，先从创建 "),s("code",[t._v("useUserRepositories")]),t._v(" 函数开始：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/composables/useUserRepositories.js")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" fetchUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/api/repositories'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watch "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" repositories "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getUserRepositories")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    getUserRepositories\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),s("p",[t._v("然后是搜索功能：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// src/composables/useRepositoryNameSearch.js")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useRepositoryNameSearch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("repositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" searchQuery "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" repositoriesMatchingSearchQuery "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("repository")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" repository"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("searchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    searchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    repositoriesMatchingSearchQuery\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("现在我们有了两个单独的功能模块，接下来就可以开始在组件中使用它们了:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useUserRepositories "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/composables/useUserRepositories'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" useRepositoryNameSearch "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/composables/useRepositoryNameSearch'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("user")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" user "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" getUserRepositories "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useUserRepositories")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("user"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      searchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      repositoriesMatchingSearchQuery\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useRepositoryNameSearch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("repositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 因为我们并不关心未经过滤的仓库")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 我们可以在 `repositories` 名称下暴露过滤后的结果")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("repositories")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" repositoriesMatchingSearchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      getUserRepositories"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      searchQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("现在我们使用组合式 API 完成了仓库列表组件的开发，它看上去相当清晰且易于维护。想要了解更多组合式 API 的信息，请继续查看本页接下来的章节，想要了解新的响应式 API 的使用，请跳转查看"),s("RouterLink",{attrs:{to:"/guide/composition-api/reactive-api.html"}},[t._v("响应式 API")]),t._v("章节。")],1),t._v(" "),s("h2",{attrs:{id:"setup"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setup"}},[t._v("#")]),t._v(" Setup")]),t._v(" "),s("p",[s("code",[t._v("setup")]),t._v(" 函数在组件创建时执行，返回组件所需的数据和方法，是组合式 API 的核心。")]),t._v(" "),s("blockquote",[s("p",[t._v("注意，"),s("code",[t._v("setup")]),t._v(" 函数不可被混入，所有定义在 "),s("code",[t._v("mixin")]),t._v(" 中的 "),s("code",[t._v("setup")]),t._v(" 都将被丢弃。")])]),t._v(" "),s("h3",{attrs:{id:"参数"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#参数"}},[t._v("#")]),t._v(" 参数")]),t._v(" "),s("p",[s("code",[t._v("setup")]),t._v(" 函数接受两个参数，分别是 "),s("code",[t._v("props")]),t._v(" 和 "),s("code",[t._v("context")]),t._v("。")]),t._v(" "),s("h4",{attrs:{id:"props"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[t._v("#")]),t._v(" Props")]),t._v(" "),s("p",[s("code",[t._v("setup")]),t._v(" 函数的第一个参数 "),s("code",[t._v("props")]),t._v(" 和 Vue3 中完全一致，就是包含当前组件 props 的响应式数据，当父组件更新某个 prop 时，该数据也将被更新。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("Warning: "),s("code",[t._v("props")]),t._v(" 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。")])]),t._v(" "),s("p",[t._v("如果需要解构 prop，可以在 "),s("code",[t._v("setup")]),t._v(" 函数中使用 "),s("code",[t._v("toRefs")]),t._v(" 函数将其转换一个包含 ref 数据的纯对象：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// `title` 是一个 ref")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("如果 "),s("code",[t._v("title")]),t._v(" 是可选的 prop，则传入的 "),s("code",[t._v("props")]),t._v(" 中可能没有 "),s("code",[t._v("title")]),t._v(" 。在这种情况下，"),s("code",[t._v("toRefs")]),t._v(" 将不会为 "),s("code",[t._v("title")]),t._v(" 创建一个 ref 。你需要使用 "),s("code",[t._v("toRef")]),t._v(" 替代它：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRef "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" title "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRef")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// `title` 是一个 ref")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h4",{attrs:{id:"context"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#context"}},[t._v("#")]),t._v(" Context")]),t._v(" "),s("p",[t._v("由于小程序与 web 基础技术规范的差异，Mpx 中 "),s("code",[t._v("setup")]),t._v(" 的第二个参数 "),s("code",[t._v("context")]),t._v(" 与 Vue3 中完全不同，"),s("code",[t._v("context")]),t._v(" 包含的属性如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 触发事件，等价于 this.triggerEvent")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("triggerEvent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取 NodesRef/组件实例，等价于 this.$refs")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 字节小程序中异步获取组件实例，等价于 this.$asyncRefs")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("asyncRefs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取组件实例，等价于 this.selectComponent，可用 this.$refs 替代")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("selectComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 批量获取组件实例，等价于 this.selectAllComponents，可用 $refs 替代")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("selectAllComponents"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取 SelectorQuery 对象实例查询元素布局信息，等价于 this.createSelectorQuery，可用 $refs 替代")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("createSelectorQuery"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取 IntersectionObserver 对象实例查询视图相交信息，等价于 this.createIntersectionObserver")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("createIntersectionObserver"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("code",[t._v("context")]),t._v(" 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 "),s("code",[t._v("context")]),t._v(" 使用 ES6 解构。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" triggerEvent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" refs "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("code",[t._v("refs")]),t._v(" 是有状态的对象，它会随组件本身的更新而更新。这意味着你应该避免对其进行解构，并始终以 refs.x 的方式访问 NodesRef 或组件实例。与 props 不同，refs 是非响应式的。如果你打算根据 refs 的更改应用副作用，那么应该在 onUpdated 生命周期钩子中执行此操作。")]),t._v(" "),s("h3",{attrs:{id:"访问组件的-property"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#访问组件的-property"}},[t._v("#")]),t._v(" 访问组件的 property")]),t._v(" "),s("p",[t._v("除了 "),s("code",[t._v("props")]),t._v(" 和 "),s("code",[t._v("context")]),t._v(" 中包含的内容，执行 "),s("code",[t._v("setup")]),t._v(" 时将"),s("strong",[t._v("无法访问")]),t._v("部分组件选项，包括：")]),t._v(" "),s("ul",[s("li",[t._v("data")]),t._v(" "),s("li",[t._v("computed")])]),t._v(" "),s("h3",{attrs:{id:"结合模板使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#结合模板使用"}},[t._v("#")]),t._v(" 结合模板使用")]),t._v(" "),s("p",[t._v("如果 "),s("code",[t._v("setup")]),t._v(" 返回一个对象，那么该对象的 property 可以在模板中访问到：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ collectionName }}: {{ readersNumber }} {{ book.title }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("properties")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("collectionName")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" readersNumber "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" book "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Mpx'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 暴露给 template")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        readersNumber"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        book\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"使用-this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用-this"}},[t._v("#")]),t._v(" 使用 "),s("code",[t._v("this")])]),t._v(" "),s("p",[s("strong",[t._v("在 "),s("code",[t._v("setup()")]),t._v(" 内部，"),s("code",[t._v("this")]),t._v(" 不是当前组件的引用")]),t._v("，因为 "),s("code",[t._v("setup()")]),t._v(" 是在解析其它组件选项之前被调用的，所以 "),s("code",[t._v("setup()")]),t._v(" 内部的 "),s("code",[t._v("this")]),t._v(" 的行为与其它选项中的 "),s("code",[t._v("this")]),t._v(" 完全不同。这使得 "),s("code",[t._v("setup()")]),t._v("  在和其它选项式 API 一起使用时可能会导致混淆。")]),t._v(" "),s("blockquote",[s("p",[t._v("Mpx 的组合式 API 设计极力避免了用户需要在 "),s("code",[t._v("setup()")]),t._v(" 中访问 "),s("code",[t._v("this")]),t._v(" 的场景，不过在一些例外情况下，用户仍然可以通过 "),s("code",[t._v("getCurrentInstance()")]),t._v(" 的方式获取到当前组件实例，注意该函数必须在 "),s("code",[t._v("setup()")]),t._v(" 或生命周期钩子中同步调用。")])]),t._v(" "),s("h2",{attrs:{id:"lifecycle-hooks"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#lifecycle-hooks"}},[t._v("#")]),t._v(" 生命周期钩子 ")]),t._v(" "),s("p",[t._v("组合式 API 中，我们通过 "),s("code",[t._v("on${Hookname}(fn)")]),t._v(" 的方式注册访问生命周期钩子。")]),t._v(" "),s("p",[t._v("Mpx 作为一个跨端小程序框架，需要兼容不同小程序平台不同的生命周期，在选项式 API 中，我们在框架中内置了一套统一的生命周期，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异，如微信小程序的 "),s("code",[t._v("attached")]),t._v(" 钩子和支付宝小程序的 "),s("code",[t._v("onInit")]),t._v(" 钩子，在组合式 API 中，我们基于框架内置的生命周期暴露了一套统一的生命周期钩子函数，下表展示了框架内置生命周期/组合式 API 生命周期函数与不同小程序平台原生生命周期的对应关系：")]),t._v(" "),s("h4",{attrs:{id:"组件生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组件生命周期"}},[t._v("#")]),t._v(" 组件生命周期")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",{staticStyle:{"text-align":"left"}},[t._v("框架内置生命周期")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("Hook inside "),s("code",[t._v("setup")])]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("微信原生")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("支付宝原生")])])]),t._v(" "),s("tbody",[s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("BEFORECREATE")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")])]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("attached（数据响应初始化前）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onInit（数据响应初始化前）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("CREATED")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")])]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("attached（数据响应初始化后）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onInit（数据响应初始化后）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREMOUNT")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeMount")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("ready（"),s("code",[t._v("MOUNTED")]),t._v(" 执行前）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("didMount（"),s("code",[t._v("MOUNTED")]),t._v(" 执行前）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("MOUNTED")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onMounted")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("ready（"),s("code",[t._v("BEFOREMOUNT")]),t._v(" 执行后）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("didMount（"),s("code",[t._v("BEFOREMOUNT")]),t._v(" 执行后）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREUPDATE")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeUpdate")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（"),s("code",[t._v("setData")]),t._v(" 执行前）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（"),s("code",[t._v("setData")]),t._v(" 执行前）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("UPDATED")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onUpdated")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（"),s("code",[t._v("setData")]),t._v(" callback）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（"),s("code",[t._v("setData")]),t._v(" callback）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("BEFOREUNMOUNT")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onBeforeUnmount")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("detached（数据响应销毁前）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("didUnmount（数据响应销毁前）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("UNMOUNTED")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onUnmounted")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("detached（数据响应销毁后）")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("didUnmount（数据响应销毁后）")])])])]),t._v(" "),s("blockquote",[s("p",[t._v("同 Vue3 一样，组合式 API 中没有提供 "),s("code",[t._v("BEFORECREATE")]),t._v(" 和 "),s("code",[t._v("CREATED")]),t._v(" 对应的生命周期钩子函数，用户可以直接在 "),s("code",[t._v("setup")]),t._v(" 中编写相关逻辑。")])]),t._v(" "),s("blockquote",[s("p",[t._v("除支付宝外的小程序平台支持使用Component构建页面，在页面中使用组件生命周期钩子与在组件中完全一致，并且框架在支付宝环境也进行了抹平实现。")])]),t._v(" "),s("h4",{attrs:{id:"页面生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#页面生命周期"}},[t._v("#")]),t._v(" 页面生命周期")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",{staticStyle:{"text-align":"left"}},[t._v("框架内置生命周期")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("Hook inside "),s("code",[t._v("setup")])]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("微信原生")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("支付宝原生")])])]),t._v(" "),s("tbody",[s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONLOAD")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onLoad")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONSHOW")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONHIDE")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONRESIZE")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("events.onResize")])])])]),t._v(" "),s("h4",{attrs:{id:"组件中访问页面生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组件中访问页面生命周期"}},[t._v("#")]),t._v(" 组件中访问页面生命周期")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",{staticStyle:{"text-align":"left"}},[t._v("框架内置生命周期")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("Hook inside "),s("code",[t._v("setup")])]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("微信原生")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("支付宝原生")])])]),t._v(" "),s("tbody",[s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONSHOW")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onShow")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("pageLifetimes.show")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（框架抹平实现）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONHIDE")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onHide")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("pageLifetimes.hide")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（框架抹平实现）")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("ONRESIZE")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onResize")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("pageLifetimes.resize")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[s("code",[t._v("null")]),t._v("（框架抹平实现）")])])])]),t._v(" "),s("p",[t._v("下面是简单的使用示例：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onUnmounted "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// mounted")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Component mounted.'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// unmounted")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onUnmounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Component unmounted.'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"框架内置生命周期"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#框架内置生命周期"}},[t._v("#")]),t._v(" 框架内置生命周期")]),t._v(" "),s("p",[t._v("从上面可以看到我们在框架内部内置了一套统一的生命周期来抹平不同平台生命周期的差异，由于存在数据响应机制，这套内置生命周期与小程序原生的生命周期不完全一一对应，反而与 Vue 的生命周期更加相似，在过去的版本中，我们没有显式地暴露出 "),s("code",[t._v("BEFORECREATE")]),t._v(" 这这类框架内置的生命周期，更多都在框架内部使用，但是在组合式 API 版本中，为了使选项式 API 的生命周期能力与之对齐，我们将框架内置的生命周期显式导出，让用户在选项式 API 开发环境下也能正常使用这些能力，简单使用示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("BEFORECREATE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("BEFORECREATE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'beforeCreate exec.'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 原生的 created 会被映射为框架内部的 CREATED 执行，此处逻辑在 BEFORECREATE 后执行")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'created exec.'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"具有副作用的页面事件"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#具有副作用的页面事件"}},[t._v("#")]),t._v(" 具有副作用的页面事件")]),t._v(" "),s("p",[t._v("在小程序中，一些页面事件的注册存在副作用，即该页面事件注册与否会产生实质性的影响，比如微信中的 "),s("code",[t._v("onShareAppMessage")]),t._v(" 和 "),s("code",[t._v("onPageScroll")]),t._v("，前者在不注册时会禁用当前页面的分享功能，而后者在注册时会带来视图与逻辑层之间的线程通信开销，对于这部分页面事件，我们无法通过"),s("code",[t._v("预注册 -> 驱动")]),t._v("方式提供组合式 API 的注册方式，用户可以通过选项式 API 的方式来注册使用，通过 "),s("code",[t._v("this")]),t._v(" 访问组合式 API "),s("code",[t._v("setup")]),t._v(" 函数的返回。")]),t._v(" "),s("p",[t._v("然而这种使用方式显然不够优雅，我们考虑是否可以通过一些非常规的方式提供这类副作用页面事件的组合式 API 注册支持，例如，借助编译手段。我们在运行时提供了副作用页面事件的注册函数，并在编译时通过 "),s("code",[t._v("babel")]),t._v(" 插件的方式解析识别到当前页面中存在这些特殊注册函数的调用时，通过框架已有的"),s("code",[t._v("编译 -> 运行时注入")]),t._v("的方式将事件驱动逻辑添加到当前页面当中，以提供相对优雅的副作用页面事件在组合式 API 中的注册方式，同时不产生非预期的副作用影响。")]),t._v(" "),s("p",[t._v("我们需要先修改 "),s("code",[t._v("babel")]),t._v(" 配置添加 "),s("code",[t._v("@mpxjs/babel-plugin-inject-page-events")]),t._v(" 插件：")]),t._v(" "),s("div",{staticClass:"language-json5 extra-class"},[s("pre",{pre:!0,attrs:{class:"language-json5"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// babel.config.json")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"plugins"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@babel/transform-runtime"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"corejs"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v('"version"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^7.10.4"')]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@mpxjs/babel-plugin-inject-page-events"')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("然后就能想普通生命周期一样使用组合式 API 进行页面事件注册，简单示例如下：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onShareAppMessage "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onShareAppMessage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'页面分享'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      count\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("目前我们通过这种方式支持的页面事件如下：")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",{staticStyle:{"text-align":"left"}},[t._v("页面事件")]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("Hook inside "),s("code",[t._v("setup")])]),t._v(" "),s("th",{staticStyle:{"text-align":"left"}},[t._v("平台支持")])])]),t._v(" "),s("tbody",[s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onPullDownRefresh")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onReachBottom")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onPageScroll")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台 + web")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onShareAppMessage")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onShareAppMessage")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("全小程序平台")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onTabItemTap")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("微信/支付宝/百度/QQ")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onAddToFavorites")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onAddToFavorites")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("微信 / QQ")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onShareTimeline")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onShareTimeline")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("微信")])]),t._v(" "),s("tr",[s("td",{staticStyle:{"text-align":"left"}},[t._v("onSaveExitState")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("onSaveExitState")]),t._v(" "),s("td",{staticStyle:{"text-align":"left"}},[t._v("微信")])])])]),t._v(" "),s("blockquote",[s("p",[t._v("特别注意，由于静态编译分析实现方式的限制，这类页面事件的组合式 API 使用需要满足页面事件注册函数的调用和 "),s("code",[t._v("createPage")]),t._v(" 的调用位于同一个 js 文件当中。")])]),t._v(" "),s("h2",{attrs:{id:"template-ref"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#template-ref"}},[t._v("#")]),t._v(" 模板引用 ")]),t._v(" "),s("p",[t._v("在 Vue3 的组合式 API 中，我们可以在 "),s("code",[t._v("setup")]),t._v(" 函数中使用 "),s("code",[t._v("ref()")]),t._v(" 创建引用数据获取模板中绑定了 "),s("code",[t._v("ref")]),t._v(" 属性的组件或 DOM 节点，优雅地将"),s("strong",[t._v("响应式引用")]),t._v("和"),s("strong",[t._v("模板引用")]),t._v("进行了关联统一，但在 Mpx 中，受限于小程序的技术限制，我们无法在低性能损耗下实现相同的设计，因此我们在 setup 的 context 参数中提供了 refs 对象，结合模板中的"),s("code",[t._v("wx:ref")]),t._v("指令使用，与选项式 API 中的 $refs 保持一致。")]),t._v(" "),s("p",[t._v("下面是组合式 API 中进行模板引用的使用示例：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleHello"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("hello"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hello"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{showWorld}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("world"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("world"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list}}"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" onMounted"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" nextTick "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" refs "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" showWorld "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" list "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'手机'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电视'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'电脑'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onMounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 最早在 onMounted 中才能访问refs，对于节点返回 NodesRef 对象，对于组件返回组件实例")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello ref:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hello"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在循环中定义 wx:ref，对应的 refs 返回数组")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'list ref:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("list"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handleHello")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        showWorld"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 数据变更后要在 nextTick 中访问更新后的视图数据")]),t._v("\n          console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'world ref:'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("world"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      \n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 暴露给 template")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        showWorld"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        handleHello"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        list\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"script-setup"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#script-setup"}},[t._v("#")]),t._v(" "),s("code",[t._v("<script setup>")])]),t._v(" "),s("p",[t._v("和 Vue 类似，"),s("code",[t._v("<script setup>")]),t._v(" 是在 Mpx 单文件组件中使用组合式 API 时的编译时语法糖。不过受小程序底层技术限制，在 Mpx 中 "),s("code",[t._v("<script setup>")]),t._v(" 无法完整提供其在 Vue 中所具备的相关优势，我们提供了这个语法能力，但不作为默认的推荐选项。")]),t._v(" "),s("h3",{attrs:{id:"基本语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#基本语法"}},[t._v("#")]),t._v(" 基本语法")]),t._v(" "),s("p",[t._v("启用该语法需要在 "),s("code",[t._v("<script>")]),t._v(" 代码块上添加 "),s("code",[t._v("setup")]),t._v(" attribute:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello Mpx script setup'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[s("code",[t._v("<script>")]),t._v(" 里边的代码会被编译成组件 "),s("code",[t._v("setup()")]),t._v(" 函数的内容。")]),t._v(" "),s("h3",{attrs:{id:"顶层的绑定会被暴露给模版"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#顶层的绑定会被暴露给模版"}},[t._v("#")]),t._v(" 顶层的绑定会被暴露给模版")]),t._v(" "),s("blockquote",[s("p",[t._v("从 v2.8.19 开始，顶层绑定自动暴露给模板的能力被取消，构建时会强制用户通过 "),s("code",[t._v("defineExpose")]),t._v(" 手动声明需要暴露给模板的数据或方法。")])]),t._v(" "),s("p",[t._v("和 Vue 一样，当使用 "),s("code",[t._v("<script setup>")]),t._v(" 时，任何在 "),s("code",[t._v("<script setup>")]),t._v(" 声明的顶层的绑定（包括变量，函数声明，以及 import 导入的内容） 都能在模版中直接使用：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" msg "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("msg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("msg: {{msg}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ontap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("log"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("click"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("import 导入的内容，除了从 "),s("code",[t._v("@mpxjs/core")]),t._v(" 中导入的变量或方法，其他模块导入的属性和方法全部都会暴露给模版。这意味着我们可以直接在模版中使用引入的相关方法，而不需要通过 "),s("code",[t._v("methods")]),t._v(" 选项来暴露：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ontap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("clickTrigger"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("click"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" clickTrigger "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./utils'")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("注意项：如果你 "),s("code",[t._v("script setup")]),t._v(" 中有较多对象或方法的声明和引入，比如全局 store 这种十分复杂的对象，走默认逻辑暴露给模版会造成性能问题，因此需要使用 "),s("code",[t._v("defineExpose")]),t._v(" 来手动定义暴露给模版的数据和方法。")])]),t._v(" "),s("h3",{attrs:{id:"响应式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式"}},[t._v("#")]),t._v(" 响应式")]),t._v(" "),s("p",[t._v("和 Vue 中一样，响应式状态需要明确使用响应性 API 来创建。和 "),s("code",[t._v("setup()")]),t._v(" 函数的返回值一样，ref 在模版中使用的时候会自动解包：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ontap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addCount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{count}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addCount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"defineprops"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#defineprops"}},[t._v("#")]),t._v(" "),s("code",[t._v("defineProps()")])]),t._v(" "),s("p",[t._v("和 Vue 类似，为了在声明小程序组件 "),s("code",[t._v("properties")]),t._v(" 选项时获得完整的类型推导支持，在 "),s("code",[t._v("<script setup>")]),t._v(" 中，我们需要使用 "),s("code",[t._v("defineProps")]),t._v(" API，它默认在 "),s("code",[t._v("<script setup>")]),t._v(" 中可用：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" props "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProps")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("testA")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("defineProps")]),t._v(" 是只能在 "),s("code",[t._v("<script setup>")]),t._v(" 中使用的"),s("strong",[t._v("编译宏")]),t._v("，不需要手动导入，会跟随 "),s("code",[t._v("<script setup>")]),t._v(" 的处理过程一同被编译掉。")]),t._v(" "),s("li",[s("code",[t._v("defineProps")]),t._v(" 接收与小程序 "),s("code",[t._v("properties")]),t._v(" 选项相同的值。")]),t._v(" "),s("li",[t._v("传入到 "),s("code",[t._v("defineProps")]),t._v(" 的选项会从 setup 中提升到模块的作用域。因此传入的选项不能引用在 setup 作用域中声明的局部变量，否则会导致编译错误，不过可以引入导入的绑定。")])]),t._v(" "),s("h3",{attrs:{id:"defineexpose"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#defineexpose"}},[t._v("#")]),t._v(" "),s("code",[t._v("defineExpose()")])]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("<script setup>")]),t._v(" 中定义暴露给模版的变量和方法，在 Mpx "),s("code",[t._v("<script setup>")]),t._v(" 中属于"),s("strong",[t._v("强制要求")]),t._v("，若不使用该编译宏，则会构建报错。")]),t._v(" "),s("p",[t._v("Mpx 中的 defineExpose 和 Vue3 中的不尽相同，在 Vue3 中，使用 "),s("code",[t._v("<scrip setup>")]),t._v(" 的组件默认是关闭的-即通过模版引用或者 "),s("code",[t._v("$parent")]),t._v(" 链获取到的组件实例中不会暴露任何在"),s("code",[t._v("<script setup>")]),t._v(" 中声明的绑定。")]),t._v(" "),s("p",[t._v("在 Mpx 中，"),s("code",[t._v("<script setup>")]),t._v(" 中的声明绑定都会挂载到组件实例中，都可以通过组件实例来访问，Mpx "),s("code",[t._v("defineExpose")]),t._v(" 更大的作用是假如你在 "),s("code",[t._v("<scrip setup>")]),t._v(" 中引入了一些 store 实例，这些 store 实例默认会挂载到组件实例中，会导致后续的响应式处理以及组件更新速度变慢，这里我们通过强制使用\n"),s("code",[t._v("defineExpose")]),t._v(" 来规避掉这个问题。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'black'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineExpose")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        name\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--正确渲染 black--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{name}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--找不到对应变量，无内容--\x3e")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{count}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"defineoptions"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#defineoptions"}},[t._v("#")]),t._v(" "),s("code",[t._v("defineOptions()")])]),t._v(" "),s("p",[t._v("此编译宏相较于 Vue 是 Mpx 中独有的，主要是当开发者想在 "),s("code",[t._v("<script setup>")]),t._v(" 中使用一些微信小程序中特有的选项式，例如 relations、moved 等，可以使用该编译宏进行定义。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineOptions")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pageLifetimes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 组件所在页面的生命周期函数")]),t._v("\n            "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("resize")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("defineOptions")]),t._v(" 是只能在 "),s("code",[t._v("<script setup>")]),t._v(" 中使用的"),s("strong",[t._v("编译宏")]),t._v("，不需要手动导入，会跟随 "),s("code",[t._v("<script setup>")]),t._v(" 的处理过程一同被编译掉。")]),t._v(" "),s("li",[s("code",[t._v("defineOptions")]),t._v(" 无返回值。")]),t._v(" "),s("li",[s("code",[t._v("defineOptions")]),t._v(" 中的选项会无脑提升至组件或页面构造器的选项之中，因此不可引用 setup 中的局部变量。")])]),t._v(" "),s("h3",{attrs:{id:"usecontext"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#usecontext"}},[t._v("#")]),t._v(" "),s("code",[t._v("useContext()")])]),t._v(" "),s("p",[t._v("在 "),s("code",[t._v("<script setup>")]),t._v(" 中，当我们想要使用 "),s("code",[t._v("context")]),t._v(" 时，可以使用 "),s("code",[t._v("useContext()")]),t._v(" 来获 "),s("code",[t._v("context")]),t._v(" 对象。")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" context "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("useContext")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取 NodesRef/组件实例，等价于 this.$refs")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"针对-typescript-的功能"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#针对-typescript-的功能"}},[t._v("#")]),t._v(" 针对 TypeScript 的功能")]),t._v(" "),s("h4",{attrs:{id:"类型-props-的声明"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#类型-props-的声明"}},[t._v("#")]),t._v(" 类型 props 的声明")]),t._v(" "),s("p",[t._v("props 可以通过给 "),s("code",[t._v("defineProps")]),t._v(" 传递纯类型函数的方式来声明：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[t._v("    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" props "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProps")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        foo"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        bar"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 构建转换为")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        properties"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            foo"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            bar"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                type"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Number\n            "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[s("code",[t._v("defineProps")]),t._v(" 要么使用运行时声明，要么使用类型声明。同时使用两种方式会导致编译报错。")]),t._v(" "),s("li",[t._v("小程序中 "),s("code",[t._v("defineProps")]),t._v(" 类型声明若有 optional 不会生效，因为小程序的 props 只要声明则一定会存在")]),t._v(" "),s("li",[t._v("类型声明参数必须是一下内容之一，以确保正确的静态分析：\n"),s("ul",[s("li",[t._v("类型字面量")]),t._v(" "),s("li",[t._v("在同一文件中的接口或者类型字面量的引用")])])])]),t._v(" "),s("h4",{attrs:{id:"使用类型声明时的默认-props-值"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用类型声明时的默认-props-值"}},[t._v("#")]),t._v(" 使用类型声明时的默认 props 值")]),t._v(" "),s("p",[t._v("和 Vue3 一样，针对类型的 "),s("code",[t._v("defineProps")]),t._v(" 声明的不足，它无法给 props 提供默认值。为了解决这个问题，我们也支持了 "),s("code",[t._v("withDefaults")]),t._v(" 编译宏：")]),t._v(" "),s("div",{staticClass:"language-ts extra-class"},[s("pre",{pre:!0,attrs:{class:"language-ts"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("interface")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Props")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  msg"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n  labels"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" props "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("withDefaults")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token generic-function"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineProps")]),s("span",{pre:!0,attrs:{class:"token generic class-name"}},[s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("Props"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  msg"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  labels"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'world'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("上边代码会被编译为等价的运行时 props 的 "),s("code",[t._v("value")]),t._v(" 选项。")]),t._v(" "),s("ul",[s("li",[t._v("小程序 properties 定义中的 optionalTypes 和 observer 字段，无法使用 TypeScript 类型声明的方式定义，如果需要定义这两个字段，目前需要使用运行时的方式来定义。")])]),t._v(" "),s("h3",{attrs:{id:"限制"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#限制"}},[t._v("#")]),t._v(" 限制")]),t._v(" "),s("p",[t._v("由于模块执行语义的差异，"),s("code",[t._v("<script setup>")]),t._v(" 中的代码依赖单文件组件的上下文，如果将其移动到外部的 "),s("code",[t._v(".js")]),t._v(" 或者 "),s("code",[t._v(".ts")]),t._v(" 的时候，对于开发者可工具来说都十分混乱。因此 "),s("code",[t._v("<script setup>")]),t._v(" 不能和 "),s("code",[t._v("src")]),t._v(" attribute 一起使用。")]),t._v(" "),s("h2",{attrs:{id:"组合式-api-与-vue3-中的区别"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-与-vue3-中的区别"}},[t._v("#")]),t._v(" 组合式 API 与 Vue3 中的区别")]),t._v(" "),s("p",[t._v("下面我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("setup")]),t._v(" 的 "),s("code",[t._v("context")]),t._v(" 参数不同，详见"),s("a",{attrs:{href:"#Context"}},[t._v("这里")])]),t._v(" "),s("li",[s("code",[t._v("setup")]),t._v(" 不支持返回"),s("strong",[t._v("渲染函数")])]),t._v(" "),s("li",[s("code",[t._v("setup")]),t._v(" 不能是异步函数")]),t._v(" "),s("li",[s("code",[t._v("<script setup>")]),t._v(" 提供的宏方法不同，详见"),s("a",{attrs:{href:"#script-setup"}},[t._v("这里")])]),t._v(" "),s("li",[s("code",[t._v("<script setup>")]),t._v(" 不支持 "),s("code",[t._v("import")]),t._v(" 快捷引入组件")]),t._v(" "),s("li",[s("code",[t._v("<script setup>")]),t._v(" 必须使用 "),s("a",{attrs:{href:"#defineprops"}},[t._v("defineExpose")])]),t._v(" "),s("li",[t._v("支持的生命周期钩子不同，详见"),s("a",{attrs:{href:"#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90"}},[t._v("这里")])]),t._v(" "),s("li",[t._v("模板引用的方式不同，详见"),s("a",{attrs:{href:"#%E6%A8%A1%E6%9D%BF%E5%BC%95%E7%94%A8"}},[t._v("这里")])])]),t._v(" "),s("h2",{attrs:{id:"组合式-api-周边生态能力的使用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#组合式-api-周边生态能力的使用"}},[t._v("#")]),t._v(" 组合式 API 周边生态能力的使用")]),t._v(" "),s("p",[t._v("我们对 Mpx 提供的周边生态能力也都进行了组合式 API 适配升级，详情如下：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("store")]),t._v(" 在组合式 API 中使用，详见"),s("RouterLink",{attrs:{to:"/guide/advance/store.html#use-store-in-composition-api"}},[t._v("这里")])],1),t._v(" "),s("li",[s("code",[t._v("pinia")]),t._v(" 在组合式 API 中使用，详见"),s("RouterLink",{attrs:{to:"/guide/advance/pinia.html"}},[t._v("这里")])],1),t._v(" "),s("li",[s("code",[t._v("fetch")]),t._v(" 在组合式 API 中使用，详见"),s("RouterLink",{attrs:{to:"/guide/extend/fetch.md/#composition-api-usage"}},[t._v("这里")])],1),t._v(" "),s("li",[s("code",[t._v("i18n")]),t._v(" 在组合式 API 中使用，详见"),s("RouterLink",{attrs:{to:"/guide/advance/i18n.html#composition-api-usage"}},[t._v("这里")])],1)])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/98.939cb6ef.js b/docs-vuepress/.vuepress/dist/assets/js/98.939cb6ef.js
deleted file mode 100644
index 21d2b62097..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/98.939cb6ef.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[98],{444:function(t,s,a){"use strict";a.r(s);var n=a(4),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"响应式-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api"}},[t._v("#")]),t._v(" 响应式 API")]),t._v(" "),s("p",[t._v("在 Mpx 中，为了支持"),s("RouterLink",{attrs:{to:"/guide/composition-api/composition-api.html"}},[t._v("组合式 API")]),t._v(" 的使用，我们参考 Vue3 提供了相关的响应式 API，但由于 "),s("code",[t._v("proxy")]),t._v(" 目前仍然存在浏览器兼容性问题，我们在底层还是基于 "),s("code",[t._v("Object.defineProperty")]),t._v(" 实现的数据响应，因此相较于 Vue3 提供的 API 存在一些删减，同时也存在与 Vue2 一样的数据响应"),s("a",{attrs:{href:"https://v2.cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9",target:"_blank",rel:"noopener noreferrer"}},[t._v("使用限制"),s("OutboundLink")],1),t._v("。")],1),t._v(" "),s("h2",{attrs:{id:"创建响应式对象"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#创建响应式对象"}},[t._v("#")]),t._v(" 创建响应式对象")]),t._v(" "),s("p",[t._v("在 Mpx 中，我们可以使用 "),s("code",[t._v("reactive")]),t._v(" 方法将一个 JavaScript 对象"),s("strong",[t._v("深度转换")]),t._v("为响应式对象，当对象内数据发生变化时能够被系统感知，相当于 Vue2 中的 "),s("code",[t._v("observable")]),t._v("，需要注意的是在 Mpx 中 "),s("code",[t._v("reactive()")]),t._v(" 是将传入的对象进行响应性转化后返回原对象，而在 Vue3 中则会基于 "),s("code",[t._v("proxy")]),t._v(" API 返回传入对象的响应式代理。")]),t._v(" "),s("p",[t._v("目前 "),s("code",[t._v("reactive")]),t._v(" 仅支持传入基础对象类型，包括纯对象和数组，暂不支持 "),s("code",[t._v("Map")]),t._v(" 和 "),s("code",[t._v("Set")]),t._v(" 这样的集合类型。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 响应式对象")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("你可以在"),s("RouterLink",{attrs:{to:"/api/reactivity-api/basic-reactivity.html"}},[t._v("响应式基础 API")]),t._v(" 章节中了解更多关于 "),s("code",[t._v("reactive")]),t._v(" 的信息。")],1),t._v(" "),s("h2",{attrs:{id:"use-ref-create-reactive-value"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#use-ref-create-reactive-value"}},[t._v("#")]),t._v(" 使用"),s("code",[t._v("ref()")]),t._v("创建独立的响应式值 ")]),t._v(" "),s("p",[t._v("上面提到 "),s("code",[t._v("reactive")]),t._v(" 只能传入对象类型数据，当我们想将一个原始数据类型的值（如数字、字符串、布尔值）变成响应式时，我们不得不先将其包装为一个对象，使用起来较为繁琐，新的 "),s("code",[t._v("ref")]),t._v(" 方法能够让我们便捷地达成上述目标：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 响应式值")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("code",[t._v("ref()")]),t._v(" 会返回一个可变的响应式对象，该对象作为一个"),s("strong",[t._v("响应式引用")]),t._v("通过 "),s("code",[t._v("value")]),t._v(" 属性维护着传入的内部值：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0")]),t._v("\n\ncount"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),s("h3",{attrs:{id:"ref-解包"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#ref-解包"}},[t._v("#")]),t._v(" Ref 解包")]),t._v(" "),s("p",[t._v("当 "),s("code",[t._v("ref")]),t._v(" 作为渲染上下文 (从 "),s("code",[t._v("setup()")]),t._v(" 中返回的对象) 上的 property 返回并可以在模板中被访问时，它将自动浅层次解包内部值。只有访问嵌套的 ref 时需要在模板中添加 "),s("code",[t._v(".value")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ count }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ nested.count.value }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n   \n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nested")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          count\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"访问响应式对象"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#访问响应式对象"}},[t._v("#")]),t._v(" 访问响应式对象")]),t._v(" "),s("p",[t._v("当 "),s("code",[t._v("ref")]),t._v(" 作为响应式对象的 property 被访问或更改时，为使其行为类似于普通 property，它会自动解包内部值：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  count\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),s("p",[t._v("如果将新的 ref 赋值给现有 ref 的 property，将会替换旧的 ref：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" otherCount "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" otherCount\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),s("p",[t._v("Ref 解包仅发生在被响应式 "),s("code",[t._v("Object")]),t._v(" 嵌套的时候。当从 "),s("code",[t._v("Array")]),t._v(" 访问 ref 时，不会进行解包：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" arr "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello world'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 这里需要 .value")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("arr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"响应式对象解构"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式对象解构"}},[t._v("#")]),t._v(" 响应式对象解构")]),t._v(" "),s("p",[t._v("当我们想使用大型响应式对象的一些 property 时，可能很想使用 "),s("strong",[t._v("ES6 解构")]),t._v("来获取我们想要的 property：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" people "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hiyuki'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("26")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("gender")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'male'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("city")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Beijing'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" age "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" people\n")])])]),s("p",[t._v("遗憾的是，使用解构的两个 property 的响应性都会丢失。对于这种情况，我们需要将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" toRefs "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" people "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hiyuki'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("age")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("26")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("gender")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'male'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("city")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Beijing'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" age "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toRefs")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("people"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("30")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// age 现在是个 ref，我们需要使用 .value 进行访问，对其进行修改也将直接作用在原响应式对象中")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("people"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("age"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 30")]),t._v("\n")])])]),s("p",[t._v("你可以在"),s("RouterLink",{attrs:{to:"/api/reactivity-api/refs-api.html"}},[t._v("Refs API")]),t._v(" 章节中了解更多关于 "),s("code",[t._v("refs")]),t._v(" 的信息。")],1),t._v(" "),s("h2",{attrs:{id:"计算值"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#计算值"}},[t._v("#")]),t._v(" 计算值")]),t._v(" "),s("p",[t._v("有时我们需要依赖于其他状态的状态——在 选项式 API 中，这是用组件计算属性处理的，在新的组合式 API 中，我们可以使用 "),s("code",[t._v("computed")]),t._v(" 函数直接创建计算值：它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" plusOne "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("plusOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2")]),t._v("\n\nplusOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// error")]),t._v("\n")])])]),s("p",[t._v("或者，可以使用一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" computed "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" plusOne "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("computed")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" val "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nplusOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 0")]),t._v("\n")])])]),s("h2",{attrs:{id:"watcheffect"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watcheffect"}},[t._v("#")]),t._v(" "),s("code",[t._v("watchEffect")])]),t._v(" "),s("p",[t._v("为了根据响应式状态自动应用和重新应用副作用，我们可以使用 "),s("code",[t._v("watchEffect")]),t._v(" 函数。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> logs 0")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> logs 1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"停止侦听"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#停止侦听"}},[t._v("#")]),t._v(" 停止侦听")]),t._v(" "),s("p",[t._v("当 "),s("code",[t._v("watchEffect")]),t._v(" 在组件的 "),s("RouterLink",{attrs:{to:"/guide/composition-api/composition-api.html#Setup"}},[t._v("setup()")]),t._v(" 函数或"),s("RouterLink",{attrs:{to:"/guide/composition-api/composition-api.html#生命周期钩子"}},[t._v("生命周期钩子")]),t._v("被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。")],1),t._v(" "),s("p",[t._v("在一些情况下，也可以显式调用返回值以停止侦听：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stop "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// later")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"清除副作用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#清除副作用"}},[t._v("#")]),t._v(" 清除副作用")]),t._v(" "),s("p",[t._v("有时副作用函数会执行一些异步的副作用，这些响应需要在其失效时清除 (即完成之前状态已改变了) 。所以侦听副作用传入的函数可以接收一个 "),s("code",[t._v("onInvalidate")]),t._v(" 函数作入参，用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发：")]),t._v(" "),s("ul",[s("li",[t._v("副作用即将重新执行时")]),t._v(" "),s("li",[t._v("侦听器被停止 (如果在 "),s("code",[t._v("setup()")]),t._v(" 或生命周期钩子函数中使用了 "),s("code",[t._v("watchEffect")]),t._v("，则在组件卸载时)")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("onInvalidate")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" token "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("performAsyncOperation")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onInvalidate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// id has changed or watcher is stopped.")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// invalidate previously pending async operation")]),t._v("\n    token"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cancel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("之所以是通过传入一个函数去注册失效回调，而不是从回调返回它，是因为返回值对于异步错误处理很重要。")]),t._v(" "),s("p",[t._v("在执行数据请求时，副作用函数往往是一个异步函数：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" data "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("onInvalidate")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onInvalidate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在Promise解析之前注册清除函数")]),t._v("\n  data"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("props"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("我们知道异步函数都会隐式地返回一个 Promise，但是清理函数必须要在 Promise 被 resolve 之前被注册。")]),t._v(" "),s("h3",{attrs:{id:"副作用刷新时机"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#副作用刷新时机"}},[t._v("#")]),t._v(" 副作用刷新时机")]),t._v(" "),s("p",[t._v("默认情况下，数据发生变更时，关联的副作用会被推入异步队列中，进行异步刷新，这样可以避免同一个“tick” 中多个状态改变导致的不必要的重复调用。在核心的具体实现中，组件的 "),s("code",[t._v("render")]),t._v(" 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时，默认情况下，会在所有的组件 "),s("code",[t._v("render")]),t._v(" 前执行：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ count }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchEffect "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      count\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("在这个例子中：")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("count")]),t._v(" 会在初始运行时同步打印出来")]),t._v(" "),s("li",[t._v("更改 "),s("code",[t._v("count")]),t._v(" 时，将在组件"),s("strong",[t._v("更新前")]),t._v("执行副作用。")])]),t._v(" "),s("p",[t._v("如果需要在组件更新(例如：当与"),s("RouterLink",{attrs:{to:"/guide/composition-api/composition-api.html#模板引用"}},[t._v("模板引用")]),t._v("一起)后重新运行侦听器副作用，我们可以传递带有 "),s("code",[t._v("flush")]),t._v(" 选项的附加 "),s("code",[t._v("options")]),t._v(" 对象 (默认为 "),s("code",[t._v("'pre'")]),t._v(")：")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 在组件更新后触发，这样你就可以访问更新的 DOM。")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注意：这也将推迟副作用的初始运行，直到组件的首次渲染完成。")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 访问视图 */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("flush")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'post'")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[s("code",[t._v("flush")]),t._v(" 选项还接受 "),s("code",[t._v("sync")]),t._v("，这将强制效果始终同步触发。然而，这是低效的，应该很少需要。")]),t._v(" "),s("p",[t._v("与此同时，我们还提供了 "),s("code",[t._v("watchPostEffect")]),t._v(" 和 "),s("code",[t._v("watchSyncEffect")]),t._v(" 别名用来让代码意图更加明显。")]),t._v(" "),s("h2",{attrs:{id:"watch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#watch"}},[t._v("#")]),t._v(" "),s("code",[t._v("watch")])]),t._v(" "),s("p",[s("code",[t._v("watch")]),t._v(" API 相当于选项式 API 中的 "),s("code",[t._v("watch property")]),t._v("。"),s("code",[t._v("watch")]),t._v(" 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况下，它也是惰性的，即只有当被侦听的源发生变化时才执行回调。")]),t._v(" "),s("ul",[s("li",[t._v("与 "),s("a",{attrs:{href:"#watcheffect"}},[t._v("watchEffect")]),t._v(" 比较，"),s("code",[t._v("watch")]),t._v(" 允许我们：\n"),s("ul",[s("li",[t._v("懒执行副作用；")]),t._v(" "),s("li",[t._v("更具体地说明什么状态应该触发侦听器重新运行；")]),t._v(" "),s("li",[t._v("访问侦听状态变化前后的值。")])])])]),t._v(" "),s("h3",{attrs:{id:"侦听单个数据源"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#侦听单个数据源"}},[t._v("#")]),t._v(" 侦听单个数据源")]),t._v(" "),s("p",[t._v("侦听器数据源可以是返回值的 getter 函数，也可以直接是 "),s("code",[t._v("ref")]),t._v("：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 侦听一个 getter")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevCount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 直接侦听ref")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" count "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevCount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* ... */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"侦听多个数据源"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#侦听多个数据源"}},[t._v("#")]),t._v(" 侦听多个数据源")]),t._v(" "),s("p",[t._v("侦听器还可以使用数组同时侦听多个源：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" firstName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" lastName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("firstName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" lastName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevValues")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nfirstName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'John'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// logs: ["John", ""] ["", ""]')]),t._v("\nlastName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Smith'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// logs: ["John", "Smith"] ["John", ""]')]),t._v("\n")])])]),s("p",[t._v("尽管如此，如果你在同一个函数里同时改变这些被侦听的来源，侦听器仍只会执行一次：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" firstName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" lastName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  \n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("firstName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" lastName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("newValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevValues")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevValues"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("changeValues")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      firstName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'John'")]),t._v("\n      lastName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Smith'")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 打印 ["John", "Smith"] ["", ""]')]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  \n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" changeValues "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("注意多个同步更改只会触发一次侦听器。")]),t._v(" "),s("p",[t._v("通过更改设置 "),s("code",[t._v("flush: 'sync'")]),t._v("，我们可以为每个更改都强制触发侦听器，尽管这通常是不推荐的。或者，可以用 "),s("RouterLink",{attrs:{to:"/api/global-api.html#nexttick"}},[t._v("nextTick")]),t._v(" 等待侦听器在下一步改变之前运行。例如：")],1),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("changeValues")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  firstName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'John'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 打印 ["John", ""] ["", ""]')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("nextTick")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  lastName"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Smith'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 打印 ["John", "Smith"] ["John", ""]')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"侦听响应式对象"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#侦听响应式对象"}},[t._v("#")]),t._v(" 侦听响应式对象")]),t._v(" "),s("p",[t._v("为了侦听深度嵌套的对象或数组中 property 变化，我们需要将 "),s("code",[t._v("deep")]),t._v(" 选项设置为 true：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("attributes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'not deep'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'deep'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("deep")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Alex'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 日志: "deep" "Alex" "Alex"')]),t._v("\n")])])]),s("p",[t._v("然而，侦听一个响应式对象或数组将始终返回该对象的引用。为了完全侦听深度嵌套的对象和数组，可能需要对值进行深拷贝。这可以通过诸如 "),s("code",[t._v("lodash.cloneDeep")]),t._v(" 这样的实用工具来实现：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" _ "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'lodash'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("attributes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" _"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("cloneDeep")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Alex'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 日志: "Alex" ""')]),t._v("\n")])])]),s("p",[t._v("我们也可以直接给 "),s("code",[t._v("watch()")]),t._v(" 传入一个响应式对象，这种情况下会隐式地强制开启 "),s("code",[t._v("deep")]),t._v(" 选项，确保嵌套的深层变更能够被监听到：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("attributes")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'implicit deep'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Alex'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 日志: "implicit deep" "Alex" "Alex"')]),t._v("\n")])])]),s("blockquote",[s("p",[t._v("需要注意的是，在侦听使用 "),s("code",[t._v("reactive()")]),t._v(" 创建的响应式对象时，受数据响应限制影响，在改变数组或使用 "),s("code",[t._v("set()")]),t._v(" 新增对象属性时，存在和 Vue3 中表现不一致的情况，详情查看"),s("a",{attrs:{href:"#%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E9%99%90%E5%88%B6%E5%B8%A6%E6%9D%A5%E7%9A%84%E5%B7%AE%E5%BC%82"}},[t._v("这里")])])]),t._v(" "),s("h3",{attrs:{id:"立即回调的侦听器"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#立即回调的侦听器"}},[t._v("#")]),t._v(" 立即回调的侦听器")]),t._v(" "),s("p",[t._v("同选项式 "),s("code",[t._v("watch")]),t._v(" 一致，我们也可以通过传递 "),s("code",[t._v("immediate")]),t._v(" 选项让侦听回调立即执行：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("count"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'immediate'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" oldValue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// 日志: "immediate" 0 undefined')]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("immediate")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"与-watcheffect-共享的行为"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#与-watcheffect-共享的行为"}},[t._v("#")]),t._v(" 与 watchEffect 共享的行为")]),t._v(" "),s("p",[s("code",[t._v("watch")]),t._v(" 与 "),s("code",[t._v("watchEffect")]),t._v(" 共享"),s("a",{attrs:{href:"#%E5%81%9C%E6%AD%A2%E4%BE%A6%E5%90%AC"}},[t._v("停止侦听")]),t._v("，"),s("a",{attrs:{href:"#%E6%B8%85%E9%99%A4%E5%89%AF%E4%BD%9C%E7%94%A8"}},[t._v("清除副作用")]),t._v(" (相应地 "),s("code",[t._v("onInvalidate")]),t._v(" 会作为回调的第三个参数传入)、"),s("a",{attrs:{href:"#%E5%89%AF%E4%BD%9C%E7%94%A8%E5%88%B7%E6%96%B0%E6%97%B6%E6%9C%BA"}},[t._v("副作用刷新时机")]),t._v("行为。")]),t._v(" "),s("h2",{attrs:{id:"响应式-api-与-vue3-中的区别"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#响应式-api-与-vue3-中的区别"}},[t._v("#")]),t._v(" 响应式 API 与 Vue3 中的区别")]),t._v(" "),s("p",[t._v("下面我们来总结一下 Mpx 中响应式 API 与 Vue3 中的区别：")]),t._v(" "),s("ul",[s("li",[t._v("不支持 "),s("code",[t._v("raw")]),t._v(" 相关 API（"),s("code",[t._v("markRaw")]),t._v(" 除外，我们提供了该 API 用于跳过部分数据的响应式转换）")]),t._v(" "),s("li",[t._v("不支持 "),s("code",[t._v("readonly")]),t._v(" 相关 API")]),t._v(" "),s("li",[t._v("不支持 "),s("code",[t._v("watchEffect")]),t._v("、"),s("code",[t._v("watch")]),t._v("、"),s("code",[t._v("computed")]),t._v(" 的调试选项")]),t._v(" "),s("li",[t._v("不支持对 "),s("code",[t._v("map")]),t._v("、"),s("code",[t._v("set")]),t._v(" 等集合类型进行响应式转换")]),t._v(" "),s("li",[t._v("受到 "),s("code",[t._v("Object.defineProperty")]),t._v(" 实现带来的数据响应限制影响")])]),t._v(" "),s("h3",{attrs:{id:"数据响应限制带来的差异"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#数据响应限制带来的差异"}},[t._v("#")]),t._v(" 数据响应限制带来的差异")]),t._v(" "),s("p",[t._v("同 Vue2 一致，Mpx 无法感知到对象 property 的添加或移除，我们暴露了 "),s("code",[t._v("set")]),t._v(" 和 "),s("code",[t._v("del")]),t._v(" API 来让用户显式地进行相关操作：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" del "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// {"count":0}')]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'world'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// {"count":0,"hello":"world"}')]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("del")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// {"hello":"world"}')]),t._v("\n")])])]),s("p",[t._v("同样，我们需要使用 "),s("code",[t._v("set")]),t._v(" 或数组原型方法对数组进行修改：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ref"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,1,2,3]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,3,2,3]")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,3,2,3,4]")]),t._v("\n")])])]),s("p",[t._v("可能你已经注意到，上面两个示例当中我们都使用了 "),s("code",[t._v("ref()")]),t._v(" 进行响应式数据创建，这是有原因的，在新的响应式 API 模式下，我们使用 "),s("code",[t._v("reactive()")]),t._v(" 创建的响应式数据在上述情况下仍然无法绕过 Vue2 设计中的数据响应限制，即使你使用了 "),s("code",[t._v("set")]),t._v(" 或数组原型方法：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" reactive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" watchSyncEffect"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("watchSyncEffect")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [0,1,2,3]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发 watchEffect")]),t._v("\n\nstate"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发 watchEffect")]),t._v("\n")])])]),s("p",[t._v("对于对象和在模板中使用也是同理：")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addCount2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{state.count}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{state.count2}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createComponent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reactive"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" set "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n  \n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("createComponent")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setup")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" state "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reactive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("count")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("addCount2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'count2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 不会触发视图更新")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        state"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        addCount2\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("p",[t._v("为什么会产生这个现象呢？原因在于：基于 "),s("code",[t._v("Object.defineProperty")]),t._v(" 实现的数据响应系统中，我们会对对象的每个已有属性创建了一个 "),s("code",[t._v("Dep")]),t._v(" 对象，在对该属性进行 "),s("code",[t._v("get")]),t._v(" 访问时通过这个对象将其与依赖它的观察者 "),s("code",[t._v("ReactiveEffect")]),t._v(" 关联起来，并在 "),s("code",[t._v("set")]),t._v(" 操作时触发关联 "),s("code",[t._v("ReactiveEffect")]),t._v(" 的更新，这是我们大家都知道的数据响应的基本原理。但是对于新增/删除对象属性和修改数组的场景，我们无法事先定义当前不存在属性的 "),s("code",[t._v("get/set")]),t._v(" (当然这在 "),s("code",[t._v("proxy")]),t._v(" 当中是可行的)，因此我们会把对象或者数组本身作为一个数据依赖创建 "),s("code",[t._v("Dep")]),t._v(" 对象，"),s("strong",[t._v("通过父级访问")]),t._v("该数据时定义的 "),s("code",[t._v("get/set")]),t._v(" 将其关联到对应的 "),s("code",[t._v("ReactiveEffect")]),t._v("，并在对数据进行新增/删除属性或数组操作时通过数据本身持有的 "),s("code",[t._v("Dep")]),t._v(" 对象触发关联 "),s("code",[t._v("ReactiveEffect")]),t._v(" 的更新，如下图所示：")]),t._v(" "),s("p",[s("img",{attrs:{src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/ReactiveEffect.png",alt:"数据响应原理"}})]),t._v(" "),s("p",[t._v("需要注意的是，"),s("strong",[t._v("通过父级访问")]),t._v("是建立 "),s("code",[t._v("Dep")]),t._v(" 与 "),s("code",[t._v("ReactiveEffect")]),t._v(" 关联关系的先决条件，在选项式 API 中，我们访问组件的响应式数据都需要通过 "),s("code",[t._v("this")]),t._v(" 进行访问，相当于这些数据都存在 "),s("code",[t._v("this")]),t._v(" 这个必要的"),s("strong",[t._v("父级")]),t._v("，因此我们在使用 "),s("code",[t._v("$set/$delete")]),t._v(" 进行对对象进行新增/删除属性或对数组进行修改时都能得到符合预期的结果，唯一的限制在于不能新增/删除根级数据属性，原因就在于 "),s("code",[t._v("this")]),t._v(" 不存在访问它的父级。")]),t._v(" "),s("p",[t._v("但是在组合式 API 中，我们不需要通过 "),s("code",[t._v("this")]),t._v(" 访问响应式数据，因此通过 "),s("code",[t._v("reactive()")]),t._v(" 创建的响应式数据本身就是根级数据，我们自然无法通过上述方式感知到根级数据自身的变化（在 Vue3 中，基于 "),s("code",[t._v("proxy")]),t._v(" 提供的强大能力响应式系统能够精确地感知到数据属性，甚至是当前不存在属性的访问与修改，不需要为数据自身建立 "),s("code",[t._v("Dep")]),t._v(" 对象，自然也不存在相关问题）。")]),t._v(" "),s("p",[t._v("在这种情况下，我们就需要用 "),s("code",[t._v("ref()")]),t._v(" 创建响应式数据，因为 "),s("code",[t._v("ref")]),t._v(" 创建了一个包装对象，我们永远需要通过 "),s("code",[t._v(".value")]),t._v(" 来访问其持有的数据（不管是显式访问还是隐式自动解包），这样就能保证 "),s("code",[t._v("ref")]),t._v(" 数据自身的变化能够被响应式系统感知，因此也不会遇到上面描述的问题。")])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/99.96c5a70e.js b/docs-vuepress/.vuepress/dist/assets/js/99.96c5a70e.js
deleted file mode 100644
index f9de4f098d..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/99.96c5a70e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[99],{445:function(t,s,a){"use strict";a.r(s);var n=a(4),r=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"api代理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#api代理"}},[t._v("#")]),t._v(" Api代理")]),t._v(" "),s("blockquote",[s("p",[t._v("convert API at each end 各个平台之间 api 进行转换，目前已支持微信转支付宝、微信转web")])]),t._v(" "),s("h2",{attrs:{id:"usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#usage"}},[t._v("#")]),t._v(" Usage")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 mpx 生态")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 脱离 Mpx 单独使用")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" getProxy "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// proxy 即为target 实例")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" proxy "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getProxy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nproxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("navigateTo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/pages/test'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"options"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#options"}},[t._v("#")]),t._v(" Options")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("参数名称")]),t._v(" "),s("th",[t._v("类型")]),t._v(" "),s("th",[t._v("含义")]),t._v(" "),s("th",[t._v("是否必填")]),t._v(" "),s("th",[t._v("默认值")]),t._v(" "),s("th",[t._v("备注")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("platform")]),t._v(" "),s("td",[t._v("Object")]),t._v(" "),s("td",[t._v("各平台之间的转换")]),t._v(" "),s("td",[t._v("否")]),t._v(" "),s("td",[t._v("{ from:'', to:'' }")]),t._v(" "),s("td",[t._v("使用 mpx 脚手架配置会自动进行转换，无需配置")])]),t._v(" "),s("tr",[s("td",[t._v("exclude")]),t._v(" "),s("td",[t._v("Array(String)")]),t._v(" "),s("td",[t._v("跨平台时不需要转换的 api")]),t._v(" "),s("td",[t._v("-")]),t._v(" "),s("td"),t._v(" "),s("td")]),t._v(" "),s("tr",[s("td",[t._v("usePromise")]),t._v(" "),s("td",[t._v("Boolean")]),t._v(" "),s("td",[t._v("是否将 api 转化为 promise 格式使用")]),t._v(" "),s("td",[t._v("否")]),t._v(" "),s("td",[t._v("false")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("whiteList")]),t._v(" "),s("td",[t._v("Array(String)")]),t._v(" "),s("td",[t._v("强行转化为 promise 格式的 api")]),t._v(" "),s("td",[t._v("否")]),t._v(" "),s("td",[t._v("[]")]),t._v(" "),s("td",[t._v("需要 usePromise 设为 true")])]),t._v(" "),s("tr",[s("td",[t._v("blackList")]),t._v(" "),s("td",[t._v("Array(String)")]),t._v(" "),s("td",[t._v("强制不变成 promise 格式的 api")]),t._v(" "),s("td",[t._v("否")]),t._v(" "),s("td",[t._v("[]")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("fallbackMap")]),t._v(" "),s("td",[t._v("Object")]),t._v(" "),s("td",[t._v("对于不支持的API，允许配置一个映射表，接管不存在的API")]),t._v(" "),s("td",[t._v("否")]),t._v(" "),s("td",[t._v("{}")]),t._v(" "),s("td",[t._v("-")])])])]),t._v(" "),s("h2",{attrs:{id:"example"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[t._v("#")]),t._v(" example")]),t._v(" "),s("h3",{attrs:{id:"普通形式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#普通形式"}},[t._v("#")]),t._v(" 普通形式")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("exclude")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'showToast'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// showToast 将不会被转换为目标平台")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("showModal")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("title")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'标题'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("content")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'这是一个弹窗'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("success")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cancel"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'用户点击取消'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h3",{attrs:{id:"使用promise形式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用promise形式"}},[t._v("#")]),t._v(" 使用promise形式")]),t._v(" "),s("blockquote",[s("p",[t._v("开启usePromise时所有的异步api将返回promise，但是小程序中存在一些异步api本身的返回值是具有意义的，如uploadFile会返回一个uploadTask对象用于后续监听上传进度或者取消上传，在对api进行promise化之后我们会将原始的返回值挂载到promise.__returned属性上，便于开发者访问使用")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mpx "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" apiProxy "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@mpxjs/api-proxy'")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("apiProxy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("usePromise")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmpx"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("showActionSheet")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("itemList")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'C'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tapIndex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("err")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/assets/js/app.84c88b57.js b/docs-vuepress/.vuepress/dist/assets/js/app.84c88b57.js
deleted file mode 100644
index 3977c40ff5..0000000000
--- a/docs-vuepress/.vuepress/dist/assets/js/app.84c88b57.js
+++ /dev/null
@@ -1,18 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(e){function t(t){for(var r,a,l=t[0],s=t[1],c=t[2],f=0,p=[];f<l.length;f++)a=l[f],Object.prototype.hasOwnProperty.call(i,a)&&i[a]&&p.push(i[a][0]),i[a]=0;for(r in s)Object.prototype.hasOwnProperty.call(s,r)&&(e[r]=s[r]);for(u&&u(t);p.length;)p.shift()();return o.push.apply(o,c||[]),n()}function n(){for(var e,t=0;t<o.length;t++){for(var n=o[t],r=!0,l=1;l<n.length;l++){var s=n[l];0!==i[s]&&(r=!1)}r&&(o.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},i={13:0},o=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.e=function(e){var t=[],n=i[e];if(0!==n)if(n)t.push(n[2]);else{var r=new Promise((function(t,r){n=i[e]=[t,r]}));t.push(n[2]=r);var o,l=document.createElement("script");l.charset="utf-8",l.timeout=120,a.nc&&l.setAttribute("nonce",a.nc),l.src=function(e){return a.p+"assets/js/"+({}[e]||e)+"."+{1:"4f7abe8f",2:"314c65b9",3:"145e69cd",4:"9489102c",5:"12d049b6",6:"6ea91b28",7:"01e4e942",8:"ba7f6ace",9:"26319460",10:"0192acce",11:"d7a8d045",12:"4d7217be",14:"7377c68f",15:"6f885a83",16:"974f551e",17:"e94e6745",18:"b1f7a4a2",19:"62186e92",20:"e9cd4de3",21:"217f8fa9",22:"4cd3344f",23:"365f9a87",24:"17777a13",25:"889c07d7",26:"3aa9f276",27:"1a35170a",28:"3670fa46",29:"a911e510",30:"04d1a7ea",31:"ec06bf2f",32:"f29d2cd1",33:"936d018e",34:"f494d685",35:"c3ed1ff7",36:"d2c9afa9",37:"4e1eee2c",38:"7826170e",39:"094ffa40",40:"10d90636",41:"8351af86",42:"53972f6c",43:"e2b432ea",44:"e4242a1f",45:"392413aa",46:"22f9a9c6",47:"2bd2cecc",48:"55792a30",49:"cde94a79",50:"42e34e52",51:"90dfa84e",52:"10bb0251",53:"7207ffc5",54:"af3d3dcd",55:"2d6ae2e1",56:"9aec9a9e",57:"9d9ddcbd",58:"50eb3b91",59:"27106fbb",60:"a47e5279",61:"74ebd7d9",62:"4bf212f9",63:"b54aca3e",64:"399e72b8",65:"a8c627d3",66:"7f19cc4b",67:"e57db97e",68:"ebe4213c",69:"2d309866",70:"60ae83e6",71:"188d7bca",72:"3f7bfd0d",73:"171571e4",74:"3d5cfaba",75:"093d716c",76:"50d84c61",77:"7bc0f013",78:"e2ded2d4",79:"f7eeb76b",80:"41418749",81:"16e2cc83",82:"56c0d7c1",83:"ea65d6b1",84:"d50d3d09",85:"1eed1486",86:"1ab04b8d",87:"392384e7",88:"a95133cd",89:"213efaae",90:"ef03688f",91:"43930d52",92:"ae5e9611",93:"3cdab647",94:"72df7b53",95:"c8e36604",96:"1ebdc00d",97:"fa1ed9e7",98:"939cb6ef",99:"96c5a70e",100:"f31ffd06",101:"283d0363",102:"094a0a16",103:"b34f6752",104:"78f6358e",105:"eb6680fc",106:"471f03cf",107:"63fd18fd",108:"614260e9",109:"3da50cc1",110:"f74ff3a3",111:"51932e54",112:"da7bd3e7",113:"caaf11a3",114:"16cda7ac",115:"88124b12",116:"4a116234",117:"e45c1b95",118:"9cbac09e",119:"312e4c21",120:"7a6b4035"}[e]+".js"}(e);var s=new Error;o=function(t){l.onerror=l.onload=null,clearTimeout(c);var n=i[e];if(0!==n){if(n){var r=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;s.message="Loading chunk "+e+" failed.\n("+r+": "+o+")",s.name="ChunkLoadError",s.type=r,s.request=o,n[1](s)}i[e]=void 0}};var c=setTimeout((function(){o({type:"timeout",target:l})}),12e4);l.onerror=l.onload=o,document.head.appendChild(l)}return Promise.all(t)},a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/",a.oe=function(e){throw console.error(e),e};var l=window.webpackJsonp=window.webpackJsonp||[],s=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var u=s;o.push([128,0]),n()}([function(e,t,n){"use strict";n.d(t,"d",(function(){return b})),n.d(t,"c",(function(){return y})),n.d(t,"b",(function(){return _})),n.d(t,"e",(function(){return w})),n.d(t,"a",(function(){return x})),n.d(t,"f",(function(){return S})),n.d(t,"g",(function(){return O})),n.d(t,"h",(function(){return j}));n(169),n(69),n(10),n(19),n(30);var r=n(2),i={"components/AlgoliaSearchBox":()=>Promise.resolve().then(n.bind(null,126)),"components/DropdownLink":()=>Promise.all([n.e(0),n.e(16)]).then(n.bind(null,322)),"components/DropdownTransition":()=>Promise.all([n.e(0),n.e(31)]).then(n.bind(null,296)),"components/Home":()=>Promise.all([n.e(0),n.e(21)]).then(n.bind(null,348)),"components/NavLink":()=>n.e(34).then(n.bind(null,293)),"components/NavLinks":()=>Promise.all([n.e(0),n.e(15)]).then(n.bind(null,349)),"components/Navbar":()=>Promise.resolve().then(n.bind(null,70)),"components/Page":()=>Promise.all([n.e(0),n.e(14)]).then(n.bind(null,350)),"components/PageEdit":()=>Promise.all([n.e(0),n.e(22)]).then(n.bind(null,323)),"components/PageNav":()=>Promise.all([n.e(0),n.e(19)]).then(n.bind(null,324)),"components/Sidebar":()=>Promise.all([n.e(0),n.e(1)]).then(n.bind(null,369)),"components/SidebarButton":()=>Promise.all([n.e(0),n.e(32)]).then(n.bind(null,381)),"components/SidebarGroup":()=>Promise.all([n.e(0),n.e(4)]).then(n.bind(null,338)),"components/SidebarLink":()=>Promise.all([n.e(0),n.e(20)]).then(n.bind(null,327)),"components/SidebarLinks":()=>Promise.all([n.e(0),n.e(4)]).then(n.bind(null,325)),"global-components/Badge":()=>Promise.all([n.e(0),n.e(8)]).then(n.bind(null,382)),"global-components/CodeBlock":()=>Promise.all([n.e(0),n.e(9)]).then(n.bind(null,374)),"global-components/CodeGroup":()=>Promise.all([n.e(0),n.e(10)]).then(n.bind(null,375)),"layouts/404":()=>n.e(12).then(n.bind(null,376)),"layouts/Layout":()=>Promise.all([n.e(0),n.e(1),n.e(3),n.e(7)]).then(n.bind(null,377)),NotFound:()=>n.e(12).then(n.bind(null,376)),Layout:()=>Promise.all([n.e(0),n.e(1),n.e(3),n.e(7)]).then(n.bind(null,377)),"components/CodeList":()=>Promise.all([n.e(0),n.e(17)]).then(n.bind(null,351)),"components/MobileSwiper":()=>Promise.all([n.e(0),n.e(24)]).then(n.bind(null,326)),"components/MobileView":()=>Promise.all([n.e(0),n.e(18)]).then(n.bind(null,352)),"components/Popover":()=>Promise.all([n.e(0),n.e(25)]).then(n.bind(null,303)),"components/SlideItem":()=>Promise.all([n.e(0),n.e(26)]).then(n.bind(null,378)),"components/Swiper":()=>Promise.all([n.e(0),n.e(27)]).then(n.bind(null,353)),"components/SwiperImg":()=>Promise.all([n.e(0),n.e(28)]).then(n.bind(null,354)),"global-components/Content":()=>Promise.all([n.e(0),n.e(2)]).then(n.bind(null,370)),"global-components/Footer":()=>Promise.all([n.e(0),n.e(6)]).then(n.bind(null,355)),"global-components/Header":()=>n.e(11).then(n.bind(null,371)),"layouts/GlobalLayout":()=>Promise.resolve().then(n.bind(null,1)),"layouts/HomepageLayout":()=>Promise.all([n.e(0),n.e(1),n.e(3),n.e(2),n.e(5)]).then(n.bind(null,379)),GlobalLayout:()=>Promise.resolve().then(n.bind(null,1)),HomepageLayout:()=>Promise.all([n.e(0),n.e(1),n.e(3),n.e(2),n.e(5)]).then(n.bind(null,379))},o={"v-81665940":()=>n.e(37).then(n.bind(null,383)),"v-78e9c206":()=>n.e(36).then(n.bind(null,384)),"v-1f9c424a":()=>n.e(35).then(n.bind(null,385)),"v-301af225":()=>Promise.all([n.e(0),n.e(29)]).then(n.bind(null,356)),"v-13123160":()=>n.e(38).then(n.bind(null,386)),"v-068ddbda":()=>n.e(40).then(n.bind(null,387)),"v-7560cbe0":()=>n.e(39).then(n.bind(null,388)),"v-33e6cba4":()=>n.e(41).then(n.bind(null,389)),"v-32b77802":()=>n.e(42).then(n.bind(null,390)),"v-6266eb79":()=>Promise.all([n.e(0),n.e(23)]).then(n.bind(null,380)),"v-808ce144":()=>n.e(43).then(n.bind(null,391)),"v-7d2b6e08":()=>n.e(44).then(n.bind(null,392)),"v-4286840a":()=>n.e(47).then(n.bind(null,393)),"v-0c915944":()=>n.e(45).then(n.bind(null,394)),"v-cd129100":()=>n.e(46).then(n.bind(null,395)),"v-b32d8070":()=>n.e(48).then(n.bind(null,396)),"v-ae4cfcf4":()=>n.e(49).then(n.bind(null,397)),"v-27ec3078":()=>n.e(51).then(n.bind(null,398)),"v-6ced36f6":()=>n.e(54).then(n.bind(null,399)),"v-1b4df5b2":()=>n.e(50).then(n.bind(null,400)),"v-16cd1ba0":()=>n.e(52).then(n.bind(null,401)),"v-2f3a4e02":()=>n.e(53).then(n.bind(null,402)),"v-65ac7ae0":()=>n.e(57).then(n.bind(null,403)),"v-29b15788":()=>n.e(56).then(n.bind(null,404)),"v-67f67560":()=>n.e(55).then(n.bind(null,405)),"v-9cda2680":()=>n.e(58).then(n.bind(null,406)),"v-aba0a160":()=>n.e(59).then(n.bind(null,407)),"v-06150180":()=>n.e(60).then(n.bind(null,408)),"v-16a68b26":()=>n.e(61).then(n.bind(null,409)),"v-2df9c8de":()=>n.e(64).then(n.bind(null,410)),"v-770abfaa":()=>n.e(63).then(n.bind(null,411)),"v-419821e2":()=>n.e(66).then(n.bind(null,412)),"v-31f676ba":()=>n.e(62).then(n.bind(null,413)),"v-32741058":()=>n.e(67).then(n.bind(null,414)),"v-27eacdde":()=>n.e(65).then(n.bind(null,415)),"v-43feb580":()=>n.e(69).then(n.bind(null,416)),"v-261b4b10":()=>n.e(68).then(n.bind(null,417)),"v-23021ac0":()=>n.e(70).then(n.bind(null,418)),"v-6a447440":()=>n.e(72).then(n.bind(null,419)),"v-aa3f94b4":()=>n.e(74).then(n.bind(null,420)),"v-298abc80":()=>n.e(71).then(n.bind(null,421)),"v-f6b6871c":()=>n.e(77).then(n.bind(null,422)),"v-c6307034":()=>n.e(73).then(n.bind(null,423)),"v-b7e9c1dc":()=>n.e(76).then(n.bind(null,424)),"v-59734f60":()=>n.e(79).then(n.bind(null,425)),"v-4cc39ac0":()=>n.e(78).then(n.bind(null,426)),"v-04b286c0":()=>n.e(80).then(n.bind(null,427)),"v-25e023c0":()=>n.e(81).then(n.bind(null,428)),"v-ade3a0c0":()=>n.e(83).then(n.bind(null,429)),"v-082a4080":()=>n.e(84).then(n.bind(null,430)),"v-4653082a":()=>n.e(85).then(n.bind(null,431)),"v-eb995c80":()=>n.e(82).then(n.bind(null,432)),"v-4c636240":()=>n.e(87).then(n.bind(null,433)),"v-9217ab80":()=>n.e(89).then(n.bind(null,434)),"v-b77c6940":()=>n.e(33).then(n.bind(null,435)),"v-64d5c000":()=>n.e(86).then(n.bind(null,436)),"v-3f8ff5dc":()=>n.e(90).then(n.bind(null,437)),"v-14d018a4":()=>n.e(92).then(n.bind(null,438)),"v-3e859f72":()=>n.e(91).then(n.bind(null,439)),"v-05fb8080":()=>n.e(93).then(n.bind(null,440)),"v-4db713e0":()=>n.e(96).then(n.bind(null,441)),"v-25ecbea0":()=>n.e(95).then(n.bind(null,442)),"v-fa77fc40":()=>n.e(94).then(n.bind(null,443)),"v-1553266a":()=>n.e(98).then(n.bind(null,444)),"v-4777611a":()=>n.e(99).then(n.bind(null,445)),"v-453e3320":()=>n.e(97).then(n.bind(null,446)),"v-2fa3b31c":()=>n.e(100).then(n.bind(null,447)),"v-670c5b20":()=>n.e(102).then(n.bind(null,448)),"v-4147fde5":()=>n.e(101).then(n.bind(null,449)),"v-41032180":()=>n.e(104).then(n.bind(null,450)),"v-05fd3820":()=>n.e(103).then(n.bind(null,451)),"v-69e59278":()=>n.e(108).then(n.bind(null,452)),"v-4269b2b6":()=>n.e(110).then(n.bind(null,453)),"v-63e1d400":()=>n.e(106).then(n.bind(null,454)),"v-7c090ae0":()=>n.e(105).then(n.bind(null,455)),"v-fbaff41a":()=>n.e(107).then(n.bind(null,456)),"v-2e48a400":()=>n.e(111).then(n.bind(null,457)),"v-f2e08d00":()=>n.e(109).then(n.bind(null,458)),"v-29f7525e":()=>n.e(113).then(n.bind(null,459)),"v-5bf8d898":()=>n.e(115).then(n.bind(null,460)),"v-15dbdb80":()=>n.e(112).then(n.bind(null,461)),"v-ae319f98":()=>n.e(117).then(n.bind(null,462)),"v-0960fc22":()=>n.e(114).then(n.bind(null,463)),"v-c5494280":()=>n.e(75).then(n.bind(null,464)),"v-48addfa0":()=>n.e(88).then(n.bind(null,465)),"v-f625b20c":()=>n.e(116).then(n.bind(null,466)),"v-4f2760cc":()=>n.e(118).then(n.bind(null,467)),"v-16c21d00":()=>n.e(119).then(n.bind(null,468))};function a(e){const t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}const l=/-(\w)/g,s=a(e=>e.replace(l,(e,t)=>t?t.toUpperCase():"")),c=/\B([A-Z])/g,u=a(e=>e.replace(c,"-$1").toLowerCase()),f=a(e=>e.charAt(0).toUpperCase()+e.slice(1));function p(e,t){if(!t)return;if(e(t))return e(t);return t.includes("-")?e(f(s(t))):e(f(t))||e(u(t))}const d=Object.assign({},i,o),h=e=>d[e],v=e=>o[e],m=e=>i[e],g=e=>r.a.component(e);function b(e){return p(v,e)}function y(e){return p(m,e)}function _(e){return p(h,e)}function w(e){return p(g,e)}function x(...e){return Promise.all(e.filter(e=>e).map(async e=>{if(!w(e)&&_(e)){const t=await _(e)();r.a.component(e,t.default)}}))}function S(e,t,n){switch(t){case"components":e[t]||(e[t]={}),Object.assign(e[t],n);break;case"mixins":e[t]||(e[t]=[]),e[t].push(...n);break;default:throw new Error("Unknown option name.")}}function O(e,t){const{$localePath:n}=e;return"object"==typeof t&&t[n]?t[n]:t}function j(e,t){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[e]=t)}},function(e,t,n){"use strict";n.r(t);var r=n(2),i=n(0),o={name:"GlobalLayout",computed:{layout(){const e=this.getLayout();return Object(i.h)("layout",e),r.a.component(e)}},methods:{getLayout(){if(this.$page.path){const e=this.$page.frontmatter.layout;return e&&(this.$vuepress.getLayoutAsyncComponent(e)||this.$vuepress.getVueComponent(e))?e:"Layout"}return"NotFound"}}},a=n(4),l={components:{DefaultGlobalLayout:Object(a.a)(o,(function(){return(0,this._self._c)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports,Navbar:n(70).default},data:()=>({isMobileHeaderOpen:!1}),computed:{isMobile:()=>document.documentElement.clientWidth<720}},s=Object(a.a)(l,(function(){var e=this._self._c;return e("div",{attrs:{id:"vuepress-theme-blog__global-layout"}},[e("div",{staticClass:"content-wrapper"},[e("DefaultGlobalLayout")],1)])}),[],!1,null,null,null);t.default=s.exports},function(e,t,n){"use strict";n.d(t,"a",(function(){return Kn}));
-/*!
- * Vue.js v2.7.16
- * (c) 2014-2023 Evan You
- * Released under the MIT License.
- */
-var r=Object.freeze({}),i=Array.isArray;function o(e){return null==e}function a(e){return null!=e}function l(e){return!0===e}function s(e){return"string"==typeof e||"number"==typeof e||"symbol"==typeof e||"boolean"==typeof e}function c(e){return"function"==typeof e}function u(e){return null!==e&&"object"==typeof e}var f=Object.prototype.toString;function p(e){return"[object Object]"===f.call(e)}function d(e){return"[object RegExp]"===f.call(e)}function h(e){var t=parseFloat(String(e));return t>=0&&Math.floor(t)===t&&isFinite(e)}function v(e){return a(e)&&"function"==typeof e.then&&"function"==typeof e.catch}function m(e){return null==e?"":Array.isArray(e)||p(e)&&e.toString===f?JSON.stringify(e,g,2):String(e)}function g(e,t){return t&&t.__v_isRef?t.value:t}function b(e){var t=parseFloat(e);return isNaN(t)?e:t}function y(e,t){for(var n=Object.create(null),r=e.split(","),i=0;i<r.length;i++)n[r[i]]=!0;return t?function(e){return n[e.toLowerCase()]}:function(e){return n[e]}}y("slot,component",!0);var _=y("key,ref,slot,slot-scope,is");function w(e,t){var n=e.length;if(n){if(t===e[n-1])return void(e.length=n-1);var r=e.indexOf(t);if(r>-1)return e.splice(r,1)}}var x=Object.prototype.hasOwnProperty;function S(e,t){return x.call(e,t)}function O(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}var j=/-(\w)/g,k=O((function(e){return e.replace(j,(function(e,t){return t?t.toUpperCase():""}))})),P=O((function(e){return e.charAt(0).toUpperCase()+e.slice(1)})),E=/\B([A-Z])/g,C=O((function(e){return e.replace(E,"-$1").toLowerCase()}));var I=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n};function A(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function T(e,t){for(var n in t)e[n]=t[n];return e}function L(e){for(var t={},n=0;n<e.length;n++)e[n]&&T(t,e[n]);return t}function D(e,t,n){}var $=function(e,t,n){return!1},R=function(e){return e};function M(e,t){if(e===t)return!0;var n=u(e),r=u(t);if(!n||!r)return!n&&!r&&String(e)===String(t);try{var i=Array.isArray(e),o=Array.isArray(t);if(i&&o)return e.length===t.length&&e.every((function(e,n){return M(e,t[n])}));if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(i||o)return!1;var a=Object.keys(e),l=Object.keys(t);return a.length===l.length&&a.every((function(n){return M(e[n],t[n])}))}catch(e){return!1}}function N(e,t){for(var n=0;n<e.length;n++)if(M(e[n],t))return n;return-1}function U(e){var t=!1;return function(){t||(t=!0,e.apply(this,arguments))}}function q(e,t){return e===t?0===e&&1/e!=1/t:e==e||t==t}var F=["component","directive","filter"],B=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured","serverPrefetch","renderTracked","renderTriggered"],H={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:$,isReservedAttr:$,isUnknownElement:$,getTagNamespace:D,parsePlatformTagName:R,mustUseProp:$,async:!0,_lifecycleHooks:B},z=/a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;function V(e){var t=(e+"").charCodeAt(0);return 36===t||95===t}function W(e,t,n,r){Object.defineProperty(e,t,{value:n,enumerable:!!r,writable:!0,configurable:!0})}var K=new RegExp("[^".concat(z.source,".$_\\d]"));var G="__proto__"in{},J="undefined"!=typeof window,Q=J&&window.navigator.userAgent.toLowerCase(),Z=Q&&/msie|trident/.test(Q),Y=Q&&Q.indexOf("msie 9.0")>0,X=Q&&Q.indexOf("edge/")>0;Q&&Q.indexOf("android");var ee=Q&&/iphone|ipad|ipod|ios/.test(Q);Q&&/chrome\/\d+/.test(Q),Q&&/phantomjs/.test(Q);var te,ne=Q&&Q.match(/firefox\/(\d+)/),re={}.watch,ie=!1;if(J)try{var oe={};Object.defineProperty(oe,"passive",{get:function(){ie=!0}}),window.addEventListener("test-passive",null,oe)}catch(e){}var ae=function(){return void 0===te&&(te=!J&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),te},le=J&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function se(e){return"function"==typeof e&&/native code/.test(e.toString())}var ce,ue="undefined"!=typeof Symbol&&se(Symbol)&&"undefined"!=typeof Reflect&&se(Reflect.ownKeys);ce="undefined"!=typeof Set&&se(Set)?Set:function(){function e(){this.set=Object.create(null)}return e.prototype.has=function(e){return!0===this.set[e]},e.prototype.add=function(e){this.set[e]=!0},e.prototype.clear=function(){this.set=Object.create(null)},e}();var fe=null;function pe(e){void 0===e&&(e=null),e||fe&&fe._scope.off(),fe=e,e&&e._scope.on()}var de=function(){function e(e,t,n,r,i,o,a,l){this.tag=e,this.data=t,this.children=n,this.text=r,this.elm=i,this.ns=void 0,this.context=o,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=t&&t.key,this.componentOptions=a,this.componentInstance=void 0,this.parent=void 0,this.raw=!1,this.isStatic=!1,this.isRootInsert=!0,this.isComment=!1,this.isCloned=!1,this.isOnce=!1,this.asyncFactory=l,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1}return Object.defineProperty(e.prototype,"child",{get:function(){return this.componentInstance},enumerable:!1,configurable:!0}),e}(),he=function(e){void 0===e&&(e="");var t=new de;return t.text=e,t.isComment=!0,t};function ve(e){return new de(void 0,void 0,void 0,String(e))}function me(e){var t=new de(e.tag,e.data,e.children&&e.children.slice(),e.text,e.elm,e.context,e.componentOptions,e.asyncFactory);return t.ns=e.ns,t.isStatic=e.isStatic,t.key=e.key,t.isComment=e.isComment,t.fnContext=e.fnContext,t.fnOptions=e.fnOptions,t.fnScopeId=e.fnScopeId,t.asyncMeta=e.asyncMeta,t.isCloned=!0,t}"function"==typeof SuppressedError&&SuppressedError;var ge=0,be=[],ye=function(){function e(){this._pending=!1,this.id=ge++,this.subs=[]}return e.prototype.addSub=function(e){this.subs.push(e)},e.prototype.removeSub=function(e){this.subs[this.subs.indexOf(e)]=null,this._pending||(this._pending=!0,be.push(this))},e.prototype.depend=function(t){e.target&&e.target.addDep(this)},e.prototype.notify=function(e){var t=this.subs.filter((function(e){return e}));for(var n=0,r=t.length;n<r;n++){0,t[n].update()}},e}();ye.target=null;var _e=[];function we(e){_e.push(e),ye.target=e}function xe(){_e.pop(),ye.target=_e[_e.length-1]}var Se=Array.prototype,Oe=Object.create(Se);["push","pop","shift","unshift","splice","sort","reverse"].forEach((function(e){var t=Se[e];W(Oe,e,(function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];var i,o=t.apply(this,n),a=this.__ob__;switch(e){case"push":case"unshift":i=n;break;case"splice":i=n.slice(2)}return i&&a.observeArray(i),a.dep.notify(),o}))}));var je=Object.getOwnPropertyNames(Oe),ke={},Pe=!0;function Ee(e){Pe=e}var Ce={notify:D,depend:D,addSub:D,removeSub:D},Ie=function(){function e(e,t,n){if(void 0===t&&(t=!1),void 0===n&&(n=!1),this.value=e,this.shallow=t,this.mock=n,this.dep=n?Ce:new ye,this.vmCount=0,W(e,"__ob__",this),i(e)){if(!n)if(G)e.__proto__=Oe;else for(var r=0,o=je.length;r<o;r++){W(e,l=je[r],Oe[l])}t||this.observeArray(e)}else{var a=Object.keys(e);for(r=0;r<a.length;r++){var l;Te(e,l=a[r],ke,void 0,t,n)}}}return e.prototype.observeArray=function(e){for(var t=0,n=e.length;t<n;t++)Ae(e[t],!1,this.mock)},e}();function Ae(e,t,n){return e&&S(e,"__ob__")&&e.__ob__ instanceof Ie?e.__ob__:!Pe||!n&&ae()||!i(e)&&!p(e)||!Object.isExtensible(e)||e.__v_skip||Ue(e)||e instanceof de?void 0:new Ie(e,t,n)}function Te(e,t,n,r,o,a,l){void 0===l&&(l=!1);var s=new ye,c=Object.getOwnPropertyDescriptor(e,t);if(!c||!1!==c.configurable){var u=c&&c.get,f=c&&c.set;u&&!f||n!==ke&&2!==arguments.length||(n=e[t]);var p=o?n&&n.__ob__:Ae(n,!1,a);return Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){var t=u?u.call(e):n;return ye.target&&(s.depend(),p&&(p.dep.depend(),i(t)&&$e(t))),Ue(t)&&!o?t.value:t},set:function(t){var r=u?u.call(e):n;if(q(r,t)){if(f)f.call(e,t);else{if(u)return;if(!o&&Ue(r)&&!Ue(t))return void(r.value=t);n=t}p=o?t&&t.__ob__:Ae(t,!1,a),s.notify()}}}),s}}function Le(e,t,n){if(!Ne(e)){var r=e.__ob__;return i(e)&&h(t)?(e.length=Math.max(e.length,t),e.splice(t,1,n),r&&!r.shallow&&r.mock&&Ae(n,!1,!0),n):t in e&&!(t in Object.prototype)?(e[t]=n,n):e._isVue||r&&r.vmCount?n:r?(Te(r.value,t,n,void 0,r.shallow,r.mock),r.dep.notify(),n):(e[t]=n,n)}}function De(e,t){if(i(e)&&h(t))e.splice(t,1);else{var n=e.__ob__;e._isVue||n&&n.vmCount||Ne(e)||S(e,t)&&(delete e[t],n&&n.dep.notify())}}function $e(e){for(var t=void 0,n=0,r=e.length;n<r;n++)(t=e[n])&&t.__ob__&&t.__ob__.dep.depend(),i(t)&&$e(t)}function Re(e){return Me(e,!0),W(e,"__v_isShallow",!0),e}function Me(e,t){if(!Ne(e)){Ae(e,t,ae());0}}function Ne(e){return!(!e||!e.__v_isReadonly)}function Ue(e){return!(!e||!0!==e.__v_isRef)}function qe(e,t,n){Object.defineProperty(e,n,{enumerable:!0,configurable:!0,get:function(){var e=t[n];if(Ue(e))return e.value;var r=e&&e.__ob__;return r&&r.dep.depend(),e},set:function(e){var r=t[n];Ue(r)&&!Ue(e)?r.value=e:t[n]=e}})}"".concat("watcher"," callback"),"".concat("watcher"," getter"),"".concat("watcher"," cleanup");var Fe;var Be=function(){function e(e){void 0===e&&(e=!1),this.detached=e,this.active=!0,this.effects=[],this.cleanups=[],this.parent=Fe,!e&&Fe&&(this.index=(Fe.scopes||(Fe.scopes=[])).push(this)-1)}return e.prototype.run=function(e){if(this.active){var t=Fe;try{return Fe=this,e()}finally{Fe=t}}else 0},e.prototype.on=function(){Fe=this},e.prototype.off=function(){Fe=this.parent},e.prototype.stop=function(e){if(this.active){var t=void 0,n=void 0;for(t=0,n=this.effects.length;t<n;t++)this.effects[t].teardown();for(t=0,n=this.cleanups.length;t<n;t++)this.cleanups[t]();if(this.scopes)for(t=0,n=this.scopes.length;t<n;t++)this.scopes[t].stop(!0);if(!this.detached&&this.parent&&!e){var r=this.parent.scopes.pop();r&&r!==this&&(this.parent.scopes[this.index]=r,r.index=this.index)}this.parent=void 0,this.active=!1}},e}();function He(e){var t=e._provided,n=e.$parent&&e.$parent._provided;return n===t?e._provided=Object.create(n):t}var ze=O((function(e){var t="&"===e.charAt(0),n="~"===(e=t?e.slice(1):e).charAt(0),r="!"===(e=n?e.slice(1):e).charAt(0);return{name:e=r?e.slice(1):e,once:n,capture:r,passive:t}}));function Ve(e,t){function n(){var e=n.fns;if(!i(e))return Pt(e,null,arguments,t,"v-on handler");for(var r=e.slice(),o=0;o<r.length;o++)Pt(r[o],null,arguments,t,"v-on handler")}return n.fns=e,n}function We(e,t,n,r,i,a){var s,c,u,f;for(s in e)c=e[s],u=t[s],f=ze(s),o(c)||(o(u)?(o(c.fns)&&(c=e[s]=Ve(c,a)),l(f.once)&&(c=e[s]=i(f.name,c,f.capture)),n(f.name,c,f.capture,f.passive,f.params)):c!==u&&(u.fns=c,e[s]=u));for(s in t)o(e[s])&&r((f=ze(s)).name,t[s],f.capture)}function Ke(e,t,n){var r;e instanceof de&&(e=e.data.hook||(e.data.hook={}));var i=e[t];function s(){n.apply(this,arguments),w(r.fns,s)}o(i)?r=Ve([s]):a(i.fns)&&l(i.merged)?(r=i).fns.push(s):r=Ve([i,s]),r.merged=!0,e[t]=r}function Ge(e,t,n,r,i){if(a(t)){if(S(t,n))return e[n]=t[n],i||delete t[n],!0;if(S(t,r))return e[n]=t[r],i||delete t[r],!0}return!1}function Je(e){return s(e)?[ve(e)]:i(e)?function e(t,n){var r,c,u,f,p=[];for(r=0;r<t.length;r++)o(c=t[r])||"boolean"==typeof c||(u=p.length-1,f=p[u],i(c)?c.length>0&&(Qe((c=e(c,"".concat(n||"","_").concat(r)))[0])&&Qe(f)&&(p[u]=ve(f.text+c[0].text),c.shift()),p.push.apply(p,c)):s(c)?Qe(f)?p[u]=ve(f.text+c):""!==c&&p.push(ve(c)):Qe(c)&&Qe(f)?p[u]=ve(f.text+c.text):(l(t._isVList)&&a(c.tag)&&o(c.key)&&a(n)&&(c.key="__vlist".concat(n,"_").concat(r,"__")),p.push(c)));return p}(e):void 0}function Qe(e){return a(e)&&a(e.text)&&!1===e.isComment}function Ze(e,t){var n,r,o,l,s=null;if(i(e)||"string"==typeof e)for(s=new Array(e.length),n=0,r=e.length;n<r;n++)s[n]=t(e[n],n);else if("number"==typeof e)for(s=new Array(e),n=0;n<e;n++)s[n]=t(n+1,n);else if(u(e))if(ue&&e[Symbol.iterator]){s=[];for(var c=e[Symbol.iterator](),f=c.next();!f.done;)s.push(t(f.value,s.length)),f=c.next()}else for(o=Object.keys(e),s=new Array(o.length),n=0,r=o.length;n<r;n++)l=o[n],s[n]=t(e[l],l,n);return a(s)||(s=[]),s._isVList=!0,s}function Ye(e,t,n,r){var i,o=this.$scopedSlots[e];o?(n=n||{},r&&(n=T(T({},r),n)),i=o(n)||(c(t)?t():t)):i=this.$slots[e]||(c(t)?t():t);var a=n&&n.slot;return a?this.$createElement("template",{slot:a},i):i}function Xe(e){return An(this.$options,"filters",e,!0)||R}function et(e,t){return i(e)?-1===e.indexOf(t):e!==t}function tt(e,t,n,r,i){var o=H.keyCodes[t]||n;return i&&r&&!H.keyCodes[t]?et(i,r):o?et(o,e):r?C(r)!==t:void 0===e}function nt(e,t,n,r,o){if(n)if(u(n)){i(n)&&(n=L(n));var a=void 0,l=function(i){if("class"===i||"style"===i||_(i))a=e;else{var l=e.attrs&&e.attrs.type;a=r||H.mustUseProp(t,l,i)?e.domProps||(e.domProps={}):e.attrs||(e.attrs={})}var s=k(i),c=C(i);s in a||c in a||(a[i]=n[i],o&&((e.on||(e.on={}))["update:".concat(i)]=function(e){n[i]=e}))};for(var s in n)l(s)}else;return e}function rt(e,t){var n=this._staticTrees||(this._staticTrees=[]),r=n[e];return r&&!t||ot(r=n[e]=this.$options.staticRenderFns[e].call(this._renderProxy,this._c,this),"__static__".concat(e),!1),r}function it(e,t,n){return ot(e,"__once__".concat(t).concat(n?"_".concat(n):""),!0),e}function ot(e,t,n){if(i(e))for(var r=0;r<e.length;r++)e[r]&&"string"!=typeof e[r]&&at(e[r],"".concat(t,"_").concat(r),n);else at(e,t,n)}function at(e,t,n){e.isStatic=!0,e.key=t,e.isOnce=n}function lt(e,t){if(t)if(p(t)){var n=e.on=e.on?T({},e.on):{};for(var r in t){var i=n[r],o=t[r];n[r]=i?[].concat(i,o):o}}else;return e}function st(e,t,n,r){t=t||{$stable:!n};for(var o=0;o<e.length;o++){var a=e[o];i(a)?st(a,t,n):a&&(a.proxy&&(a.fn.proxy=!0),t[a.key]=a.fn)}return r&&(t.$key=r),t}function ct(e,t){for(var n=0;n<t.length;n+=2){var r=t[n];"string"==typeof r&&r&&(e[t[n]]=t[n+1])}return e}function ut(e,t){return"string"==typeof e?t+e:e}function ft(e){e._o=it,e._n=b,e._s=m,e._l=Ze,e._t=Ye,e._q=M,e._i=N,e._m=rt,e._f=Xe,e._k=tt,e._b=nt,e._v=ve,e._e=he,e._u=st,e._g=lt,e._d=ct,e._p=ut}function pt(e,t){if(!e||!e.length)return{};for(var n={},r=0,i=e.length;r<i;r++){var o=e[r],a=o.data;if(a&&a.attrs&&a.attrs.slot&&delete a.attrs.slot,o.context!==t&&o.fnContext!==t||!a||null==a.slot)(n.default||(n.default=[])).push(o);else{var l=a.slot,s=n[l]||(n[l]=[]);"template"===o.tag?s.push.apply(s,o.children||[]):s.push(o)}}for(var c in n)n[c].every(dt)&&delete n[c];return n}function dt(e){return e.isComment&&!e.asyncFactory||" "===e.text}function ht(e){return e.isComment&&e.asyncFactory}function vt(e,t,n,i){var o,a=Object.keys(n).length>0,l=t?!!t.$stable:!a,s=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(l&&i&&i!==r&&s===i.$key&&!a&&!i.$hasNormal)return i;for(var c in o={},t)t[c]&&"$"!==c[0]&&(o[c]=mt(e,n,c,t[c]))}else o={};for(var u in n)u in o||(o[u]=gt(n,u));return t&&Object.isExtensible(t)&&(t._normalized=o),W(o,"$stable",l),W(o,"$key",s),W(o,"$hasNormal",a),o}function mt(e,t,n,r){var o=function(){var t=fe;pe(e);var n=arguments.length?r.apply(null,arguments):r({}),o=(n=n&&"object"==typeof n&&!i(n)?[n]:Je(n))&&n[0];return pe(t),n&&(!o||1===n.length&&o.isComment&&!ht(o))?void 0:n};return r.proxy&&Object.defineProperty(t,n,{get:o,enumerable:!0,configurable:!0}),o}function gt(e,t){return function(){return e[t]}}function bt(e){return{get attrs(){if(!e._attrsProxy){var t=e._attrsProxy={};W(t,"_v_attr_proxy",!0),yt(t,e.$attrs,r,e,"$attrs")}return e._attrsProxy},get listeners(){e._listenersProxy||yt(e._listenersProxy={},e.$listeners,r,e,"$listeners");return e._listenersProxy},get slots(){return function(e){e._slotsProxy||wt(e._slotsProxy={},e.$scopedSlots);return e._slotsProxy}(e)},emit:I(e.$emit,e),expose:function(t){t&&Object.keys(t).forEach((function(n){return qe(e,t,n)}))}}}function yt(e,t,n,r,i){var o=!1;for(var a in t)a in e?t[a]!==n[a]&&(o=!0):(o=!0,_t(e,a,r,i));for(var a in e)a in t||(o=!0,delete e[a]);return o}function _t(e,t,n,r){Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){return n[r][t]}})}function wt(e,t){for(var n in t)e[n]=t[n];for(var n in e)n in t||delete e[n]}var xt=null;function St(e,t){return(e.__esModule||ue&&"Module"===e[Symbol.toStringTag])&&(e=e.default),u(e)?t.extend(e):e}function Ot(e){if(i(e))for(var t=0;t<e.length;t++){var n=e[t];if(a(n)&&(a(n.componentOptions)||ht(n)))return n}}function jt(e,t,n,r,f,p){return(i(n)||s(n))&&(f=r,r=n,n=void 0),l(p)&&(f=2),function(e,t,n,r,s){if(a(n)&&a(n.__ob__))return he();a(n)&&a(n.is)&&(t=n.is);if(!t)return he();0;i(r)&&c(r[0])&&((n=n||{}).scopedSlots={default:r[0]},r.length=0);2===s?r=Je(r):1===s&&(r=function(e){for(var t=0;t<e.length;t++)if(i(e[t]))return Array.prototype.concat.apply([],e);return e}(r));var f,p;if("string"==typeof t){var d=void 0;p=e.$vnode&&e.$vnode.ns||H.getTagNamespace(t),f=H.isReservedTag(t)?new de(H.parsePlatformTagName(t),n,r,void 0,void 0,e):n&&n.pre||!a(d=An(e.$options,"components",t))?new de(t,n,r,void 0,void 0,e):wn(d,n,e,r,t)}else f=wn(t,n,e,r);return i(f)?f:a(f)?(a(p)&&function e(t,n,r){t.ns=n,"foreignObject"===t.tag&&(n=void 0,r=!0);if(a(t.children))for(var i=0,s=t.children.length;i<s;i++){var c=t.children[i];a(c.tag)&&(o(c.ns)||l(r)&&"svg"!==c.tag)&&e(c,n,r)}}(f,p),a(n)&&function(e){u(e.style)&&Bt(e.style);u(e.class)&&Bt(e.class)}(n),f):he()}(e,t,n,r,f)}function kt(e,t,n){we();try{if(t)for(var r=t;r=r.$parent;){var i=r.$options.errorCaptured;if(i)for(var o=0;o<i.length;o++)try{if(!1===i[o].call(r,e,t,n))return}catch(e){Et(e,r,"errorCaptured hook")}}Et(e,t,n)}finally{xe()}}function Pt(e,t,n,r,i){var o;try{(o=n?e.apply(t,n):e.call(t))&&!o._isVue&&v(o)&&!o._handled&&(o.catch((function(e){return kt(e,r,i+" (Promise/async)")})),o._handled=!0)}catch(e){kt(e,r,i)}return o}function Et(e,t,n){if(H.errorHandler)try{return H.errorHandler.call(null,e,t,n)}catch(t){t!==e&&Ct(t,null,"config.errorHandler")}Ct(e,t,n)}function Ct(e,t,n){if(!J||"undefined"==typeof console)throw e;console.error(e)}var It,At=!1,Tt=[],Lt=!1;function Dt(){Lt=!1;var e=Tt.slice(0);Tt.length=0;for(var t=0;t<e.length;t++)e[t]()}if("undefined"!=typeof Promise&&se(Promise)){var $t=Promise.resolve();It=function(){$t.then(Dt),ee&&setTimeout(D)},At=!0}else if(Z||"undefined"==typeof MutationObserver||!se(MutationObserver)&&"[object MutationObserverConstructor]"!==MutationObserver.toString())It="undefined"!=typeof setImmediate&&se(setImmediate)?function(){setImmediate(Dt)}:function(){setTimeout(Dt,0)};else{var Rt=1,Mt=new MutationObserver(Dt),Nt=document.createTextNode(String(Rt));Mt.observe(Nt,{characterData:!0}),It=function(){Rt=(Rt+1)%2,Nt.data=String(Rt)},At=!0}function Ut(e,t){var n;if(Tt.push((function(){if(e)try{e.call(t)}catch(e){kt(e,t,"nextTick")}else n&&n(t)})),Lt||(Lt=!0,It()),!e&&"undefined"!=typeof Promise)return new Promise((function(e){n=e}))}function qt(e){return function(t,n){if(void 0===n&&(n=fe),n)return function(e,t,n){var r=e.$options;r[t]=Pn(r[t],n)}(n,e,t)}}qt("beforeMount"),qt("mounted"),qt("beforeUpdate"),qt("updated"),qt("beforeDestroy"),qt("destroyed"),qt("activated"),qt("deactivated"),qt("serverPrefetch"),qt("renderTracked"),qt("renderTriggered"),qt("errorCaptured");var Ft=new ce;function Bt(e){return function e(t,n){var r,o,a=i(t);if(!a&&!u(t)||t.__v_skip||Object.isFrozen(t)||t instanceof de)return;if(t.__ob__){var l=t.__ob__.dep.id;if(n.has(l))return;n.add(l)}if(a)for(r=t.length;r--;)e(t[r],n);else if(Ue(t))e(t.value,n);else for(o=Object.keys(t),r=o.length;r--;)e(t[o[r]],n)}(e,Ft),Ft.clear(),e}var Ht,zt=0,Vt=function(){function e(e,t,n,r,i){var o,a;o=this,void 0===(a=Fe&&!Fe._vm?Fe:e?e._scope:void 0)&&(a=Fe),a&&a.active&&a.effects.push(o),(this.vm=e)&&i&&(e._watcher=this),r?(this.deep=!!r.deep,this.user=!!r.user,this.lazy=!!r.lazy,this.sync=!!r.sync,this.before=r.before):this.deep=this.user=this.lazy=this.sync=!1,this.cb=n,this.id=++zt,this.active=!0,this.post=!1,this.dirty=this.lazy,this.deps=[],this.newDeps=[],this.depIds=new ce,this.newDepIds=new ce,this.expression="",c(t)?this.getter=t:(this.getter=function(e){if(!K.test(e)){var t=e.split(".");return function(e){for(var n=0;n<t.length;n++){if(!e)return;e=e[t[n]]}return e}}}(t),this.getter||(this.getter=D)),this.value=this.lazy?void 0:this.get()}return e.prototype.get=function(){var e;we(this);var t=this.vm;try{e=this.getter.call(t,t)}catch(e){if(!this.user)throw e;kt(e,t,'getter for watcher "'.concat(this.expression,'"'))}finally{this.deep&&Bt(e),xe(),this.cleanupDeps()}return e},e.prototype.addDep=function(e){var t=e.id;this.newDepIds.has(t)||(this.newDepIds.add(t),this.newDeps.push(e),this.depIds.has(t)||e.addSub(this))},e.prototype.cleanupDeps=function(){for(var e=this.deps.length;e--;){var t=this.deps[e];this.newDepIds.has(t.id)||t.removeSub(this)}var n=this.depIds;this.depIds=this.newDepIds,this.newDepIds=n,this.newDepIds.clear(),n=this.deps,this.deps=this.newDeps,this.newDeps=n,this.newDeps.length=0},e.prototype.update=function(){this.lazy?this.dirty=!0:this.sync?this.run():dn(this)},e.prototype.run=function(){if(this.active){var e=this.get();if(e!==this.value||u(e)||this.deep){var t=this.value;if(this.value=e,this.user){var n='callback for watcher "'.concat(this.expression,'"');Pt(this.cb,this.vm,[e,t],this.vm,n)}else this.cb.call(this.vm,e,t)}}},e.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},e.prototype.depend=function(){for(var e=this.deps.length;e--;)this.deps[e].depend()},e.prototype.teardown=function(){if(this.vm&&!this.vm._isBeingDestroyed&&w(this.vm._scope.effects,this),this.active){for(var e=this.deps.length;e--;)this.deps[e].removeSub(this);this.active=!1,this.onStop&&this.onStop()}},e}();function Wt(e,t){Ht.$on(e,t)}function Kt(e,t){Ht.$off(e,t)}function Gt(e,t){var n=Ht;return function r(){var i=t.apply(null,arguments);null!==i&&n.$off(e,r)}}function Jt(e,t,n){Ht=e,We(t,n||{},Wt,Kt,Gt,e),Ht=void 0}var Qt=null;function Zt(e){var t=Qt;return Qt=e,function(){Qt=t}}function Yt(e){for(;e&&(e=e.$parent);)if(e._inactive)return!0;return!1}function Xt(e,t){if(t){if(e._directInactive=!1,Yt(e))return}else if(e._directInactive)return;if(e._inactive||null===e._inactive){e._inactive=!1;for(var n=0;n<e.$children.length;n++)Xt(e.$children[n]);en(e,"activated")}}function en(e,t,n,r){void 0===r&&(r=!0),we();var i=fe,o=Fe;r&&pe(e);var a=e.$options[t],l="".concat(t," hook");if(a)for(var s=0,c=a.length;s<c;s++)Pt(a[s],e,n||null,e,l);e._hasHookEvent&&e.$emit("hook:"+t),r&&(pe(i),o&&o.on()),xe()}var tn=[],nn=[],rn={},on=!1,an=!1,ln=0;var sn=0,cn=Date.now;if(J&&!Z){var un=window.performance;un&&"function"==typeof un.now&&cn()>document.createEvent("Event").timeStamp&&(cn=function(){return un.now()})}var fn=function(e,t){if(e.post){if(!t.post)return 1}else if(t.post)return-1;return e.id-t.id};function pn(){var e,t;for(sn=cn(),an=!0,tn.sort(fn),ln=0;ln<tn.length;ln++)(e=tn[ln]).before&&e.before(),t=e.id,rn[t]=null,e.run();var n=nn.slice(),r=tn.slice();ln=tn.length=nn.length=0,rn={},on=an=!1,function(e){for(var t=0;t<e.length;t++)e[t]._inactive=!0,Xt(e[t],!0)}(n),function(e){var t=e.length;for(;t--;){var n=e[t],r=n.vm;r&&r._watcher===n&&r._isMounted&&!r._isDestroyed&&en(r,"updated")}}(r),function(){for(var e=0;e<be.length;e++){var t=be[e];t.subs=t.subs.filter((function(e){return e})),t._pending=!1}be.length=0}(),le&&H.devtools&&le.emit("flush")}function dn(e){var t=e.id;if(null==rn[t]&&(e!==ye.target||!e.noRecurse)){if(rn[t]=!0,an){for(var n=tn.length-1;n>ln&&tn[n].id>e.id;)n--;tn.splice(n+1,0,e)}else tn.push(e);on||(on=!0,Ut(pn))}}function hn(e,t){if(e){for(var n=Object.create(null),r=ue?Reflect.ownKeys(e):Object.keys(e),i=0;i<r.length;i++){var o=r[i];if("__ob__"!==o){var a=e[o].from;if(a in t._provided)n[o]=t._provided[a];else if("default"in e[o]){var l=e[o].default;n[o]=c(l)?l.call(t):l}else 0}}return n}}function vn(e,t,n,o,a){var s,c=this,u=a.options;S(o,"_uid")?(s=Object.create(o))._original=o:(s=o,o=o._original);var f=l(u._compiled),p=!f;this.data=e,this.props=t,this.children=n,this.parent=o,this.listeners=e.on||r,this.injections=hn(u.inject,o),this.slots=function(){return c.$slots||vt(o,e.scopedSlots,c.$slots=pt(n,o)),c.$slots},Object.defineProperty(this,"scopedSlots",{enumerable:!0,get:function(){return vt(o,e.scopedSlots,this.slots())}}),f&&(this.$options=u,this.$slots=this.slots(),this.$scopedSlots=vt(o,e.scopedSlots,this.$slots)),u._scopeId?this._c=function(e,t,n,r){var a=jt(s,e,t,n,r,p);return a&&!i(a)&&(a.fnScopeId=u._scopeId,a.fnContext=o),a}:this._c=function(e,t,n,r){return jt(s,e,t,n,r,p)}}function mn(e,t,n,r,i){var o=me(e);return o.fnContext=n,o.fnOptions=r,t.slot&&((o.data||(o.data={})).slot=t.slot),o}function gn(e,t){for(var n in t)e[k(n)]=t[n]}function bn(e){return e.name||e.__name||e._componentTag}ft(vn.prototype);var yn={init:function(e,t){if(e.componentInstance&&!e.componentInstance._isDestroyed&&e.data.keepAlive){var n=e;yn.prepatch(n,n)}else{(e.componentInstance=function(e,t){var n={_isComponent:!0,_parentVnode:e,parent:t},r=e.data.inlineTemplate;a(r)&&(n.render=r.render,n.staticRenderFns=r.staticRenderFns);return new e.componentOptions.Ctor(n)}(e,Qt)).$mount(t?e.elm:void 0,t)}},prepatch:function(e,t){var n=t.componentOptions;!function(e,t,n,i,o){var a=i.data.scopedSlots,l=e.$scopedSlots,s=!!(a&&!a.$stable||l!==r&&!l.$stable||a&&e.$scopedSlots.$key!==a.$key||!a&&e.$scopedSlots.$key),c=!!(o||e.$options._renderChildren||s),u=e.$vnode;e.$options._parentVnode=i,e.$vnode=i,e._vnode&&(e._vnode.parent=i),e.$options._renderChildren=o;var f=i.data.attrs||r;e._attrsProxy&&yt(e._attrsProxy,f,u.data&&u.data.attrs||r,e,"$attrs")&&(c=!0),e.$attrs=f,n=n||r;var p=e.$options._parentListeners;if(e._listenersProxy&&yt(e._listenersProxy,n,p||r,e,"$listeners"),e.$listeners=e.$options._parentListeners=n,Jt(e,n,p),t&&e.$options.props){Ee(!1);for(var d=e._props,h=e.$options._propKeys||[],v=0;v<h.length;v++){var m=h[v],g=e.$options.props;d[m]=Tn(m,g,t,e)}Ee(!0),e.$options.propsData=t}c&&(e.$slots=pt(o,i.context),e.$forceUpdate())}(t.componentInstance=e.componentInstance,n.propsData,n.listeners,t,n.children)},insert:function(e){var t,n=e.context,r=e.componentInstance;r._isMounted||(r._isMounted=!0,en(r,"mounted")),e.data.keepAlive&&(n._isMounted?((t=r)._inactive=!1,nn.push(t)):Xt(r,!0))},destroy:function(e){var t=e.componentInstance;t._isDestroyed||(e.data.keepAlive?function e(t,n){if(!(n&&(t._directInactive=!0,Yt(t))||t._inactive)){t._inactive=!0;for(var r=0;r<t.$children.length;r++)e(t.$children[r]);en(t,"deactivated")}}(t,!0):t.$destroy())}},_n=Object.keys(yn);function wn(e,t,n,s,c){if(!o(e)){var f=n.$options._base;if(u(e)&&(e=f.extend(e)),"function"==typeof e){var p;if(o(e.cid)&&void 0===(e=function(e,t){if(l(e.error)&&a(e.errorComp))return e.errorComp;if(a(e.resolved))return e.resolved;var n=xt;if(n&&a(e.owners)&&-1===e.owners.indexOf(n)&&e.owners.push(n),l(e.loading)&&a(e.loadingComp))return e.loadingComp;if(n&&!a(e.owners)){var r=e.owners=[n],i=!0,s=null,c=null;n.$on("hook:destroyed",(function(){return w(r,n)}));var f=function(e){for(var t=0,n=r.length;t<n;t++)r[t].$forceUpdate();e&&(r.length=0,null!==s&&(clearTimeout(s),s=null),null!==c&&(clearTimeout(c),c=null))},p=U((function(n){e.resolved=St(n,t),i?r.length=0:f(!0)})),d=U((function(t){a(e.errorComp)&&(e.error=!0,f(!0))})),h=e(p,d);return u(h)&&(v(h)?o(e.resolved)&&h.then(p,d):v(h.component)&&(h.component.then(p,d),a(h.error)&&(e.errorComp=St(h.error,t)),a(h.loading)&&(e.loadingComp=St(h.loading,t),0===h.delay?e.loading=!0:s=setTimeout((function(){s=null,o(e.resolved)&&o(e.error)&&(e.loading=!0,f(!1))}),h.delay||200)),a(h.timeout)&&(c=setTimeout((function(){c=null,o(e.resolved)&&d(null)}),h.timeout)))),i=!1,e.loading?e.loadingComp:e.resolved}}(p=e,f)))return function(e,t,n,r,i){var o=he();return o.asyncFactory=e,o.asyncMeta={data:t,context:n,children:r,tag:i},o}(p,t,n,s,c);t=t||{},Wn(e),a(t.model)&&function(e,t){var n=e.model&&e.model.prop||"value",r=e.model&&e.model.event||"input";(t.attrs||(t.attrs={}))[n]=t.model.value;var o=t.on||(t.on={}),l=o[r],s=t.model.callback;a(l)?(i(l)?-1===l.indexOf(s):l!==s)&&(o[r]=[s].concat(l)):o[r]=s}(e.options,t);var d=function(e,t,n){var r=t.options.props;if(!o(r)){var i={},l=e.attrs,s=e.props;if(a(l)||a(s))for(var c in r){var u=C(c);Ge(i,s,c,u,!0)||Ge(i,l,c,u,!1)}return i}}(t,e);if(l(e.options.functional))return function(e,t,n,o,l){var s=e.options,c={},u=s.props;if(a(u))for(var f in u)c[f]=Tn(f,u,t||r);else a(n.attrs)&&gn(c,n.attrs),a(n.props)&&gn(c,n.props);var p=new vn(n,c,l,o,e),d=s.render.call(null,p._c,p);if(d instanceof de)return mn(d,n,p.parent,s,p);if(i(d)){for(var h=Je(d)||[],v=new Array(h.length),m=0;m<h.length;m++)v[m]=mn(h[m],n,p.parent,s,p);return v}}(e,d,t,n,s);var h=t.on;if(t.on=t.nativeOn,l(e.options.abstract)){var m=t.slot;t={},m&&(t.slot=m)}!function(e){for(var t=e.hook||(e.hook={}),n=0;n<_n.length;n++){var r=_n[n],i=t[r],o=yn[r];i===o||i&&i._merged||(t[r]=i?xn(o,i):o)}}(t);var g=bn(e.options)||c;return new de("vue-component-".concat(e.cid).concat(g?"-".concat(g):""),t,void 0,void 0,void 0,n,{Ctor:e,propsData:d,listeners:h,tag:c,children:s},p)}}}function xn(e,t){var n=function(n,r){e(n,r),t(n,r)};return n._merged=!0,n}var Sn=D,On=H.optionMergeStrategies;function jn(e,t,n){if(void 0===n&&(n=!0),!t)return e;for(var r,i,o,a=ue?Reflect.ownKeys(t):Object.keys(t),l=0;l<a.length;l++)"__ob__"!==(r=a[l])&&(i=e[r],o=t[r],n&&S(e,r)?i!==o&&p(i)&&p(o)&&jn(i,o):Le(e,r,o));return e}function kn(e,t,n){return n?function(){var r=c(t)?t.call(n,n):t,i=c(e)?e.call(n,n):e;return r?jn(r,i):i}:t?e?function(){return jn(c(t)?t.call(this,this):t,c(e)?e.call(this,this):e)}:t:e}function Pn(e,t){var n=t?e?e.concat(t):i(t)?t:[t]:e;return n?function(e){for(var t=[],n=0;n<e.length;n++)-1===t.indexOf(e[n])&&t.push(e[n]);return t}(n):n}function En(e,t,n,r){var i=Object.create(e||null);return t?T(i,t):i}On.data=function(e,t,n){return n?kn(e,t,n):t&&"function"!=typeof t?e:kn(e,t)},B.forEach((function(e){On[e]=Pn})),F.forEach((function(e){On[e+"s"]=En})),On.watch=function(e,t,n,r){if(e===re&&(e=void 0),t===re&&(t=void 0),!t)return Object.create(e||null);if(!e)return t;var o={};for(var a in T(o,e),t){var l=o[a],s=t[a];l&&!i(l)&&(l=[l]),o[a]=l?l.concat(s):i(s)?s:[s]}return o},On.props=On.methods=On.inject=On.computed=function(e,t,n,r){if(!e)return t;var i=Object.create(null);return T(i,e),t&&T(i,t),i},On.provide=function(e,t){return e?function(){var n=Object.create(null);return jn(n,c(e)?e.call(this):e),t&&jn(n,c(t)?t.call(this):t,!1),n}:t};var Cn=function(e,t){return void 0===t?e:t};function In(e,t,n){if(c(t)&&(t=t.options),function(e,t){var n=e.props;if(n){var r,o,a={};if(i(n))for(r=n.length;r--;)"string"==typeof(o=n[r])&&(a[k(o)]={type:null});else if(p(n))for(var l in n)o=n[l],a[k(l)]=p(o)?o:{type:o};else 0;e.props=a}}(t),function(e,t){var n=e.inject;if(n){var r=e.inject={};if(i(n))for(var o=0;o<n.length;o++)r[n[o]]={from:n[o]};else if(p(n))for(var a in n){var l=n[a];r[a]=p(l)?T({from:a},l):{from:l}}else 0}}(t),function(e){var t=e.directives;if(t)for(var n in t){var r=t[n];c(r)&&(t[n]={bind:r,update:r})}}(t),!t._base&&(t.extends&&(e=In(e,t.extends,n)),t.mixins))for(var r=0,o=t.mixins.length;r<o;r++)e=In(e,t.mixins[r],n);var a,l={};for(a in e)s(a);for(a in t)S(e,a)||s(a);function s(r){var i=On[r]||Cn;l[r]=i(e[r],t[r],n,r)}return l}function An(e,t,n,r){if("string"==typeof n){var i=e[t];if(S(i,n))return i[n];var o=k(n);if(S(i,o))return i[o];var a=P(o);return S(i,a)?i[a]:i[n]||i[o]||i[a]}}function Tn(e,t,n,r){var i=t[e],o=!S(n,e),a=n[e],l=Rn(Boolean,i.type);if(l>-1)if(o&&!S(i,"default"))a=!1;else if(""===a||a===C(e)){var s=Rn(String,i.type);(s<0||l<s)&&(a=!0)}if(void 0===a){a=function(e,t,n){if(!S(t,"default"))return;var r=t.default;0;if(e&&e.$options.propsData&&void 0===e.$options.propsData[n]&&void 0!==e._props[n])return e._props[n];return c(r)&&"Function"!==Dn(t.type)?r.call(e):r}(r,i,e);var u=Pe;Ee(!0),Ae(a),Ee(u)}return a}var Ln=/^\s*function (\w+)/;function Dn(e){var t=e&&e.toString().match(Ln);return t?t[1]:""}function $n(e,t){return Dn(e)===Dn(t)}function Rn(e,t){if(!i(t))return $n(t,e)?0:-1;for(var n=0,r=t.length;n<r;n++)if($n(t[n],e))return n;return-1}var Mn={enumerable:!0,configurable:!0,get:D,set:D};function Nn(e,t,n){Mn.get=function(){return this[t][n]},Mn.set=function(e){this[t][n]=e},Object.defineProperty(e,n,Mn)}function Un(e){var t=e.$options;if(t.props&&function(e,t){var n=e.$options.propsData||{},r=e._props=Re({}),i=e.$options._propKeys=[];e.$parent&&Ee(!1);var o=function(o){i.push(o);var a=Tn(o,t,n,e);Te(r,o,a,void 0,!0),o in e||Nn(e,"_props",o)};for(var a in t)o(a);Ee(!0)}(e,t.props),function(e){var t=e.$options,n=t.setup;if(n){var r=e._setupContext=bt(e);pe(e),we();var i=Pt(n,null,[e._props||Re({}),r],e,"setup");if(xe(),pe(),c(i))t.render=i;else if(u(i))if(e._setupState=i,i.__sfc){var o=e._setupProxy={};for(var a in i)"__sfc"!==a&&qe(o,i,a)}else for(var a in i)V(a)||qe(e,i,a);else 0}}(e),t.methods&&function(e,t){e.$options.props;for(var n in t)e[n]="function"!=typeof t[n]?D:I(t[n],e)}(e,t.methods),t.data)!function(e){var t=e.$options.data;p(t=e._data=c(t)?function(e,t){we();try{return e.call(t,t)}catch(e){return kt(e,t,"data()"),{}}finally{xe()}}(t,e):t||{})||(t={});var n=Object.keys(t),r=e.$options.props,i=(e.$options.methods,n.length);for(;i--;){var o=n[i];0,r&&S(r,o)||V(o)||Nn(e,"_data",o)}var a=Ae(t);a&&a.vmCount++}(e);else{var n=Ae(e._data={});n&&n.vmCount++}t.computed&&function(e,t){var n=e._computedWatchers=Object.create(null),r=ae();for(var i in t){var o=t[i],a=c(o)?o:o.get;0,r||(n[i]=new Vt(e,a||D,D,qn)),i in e||Fn(e,i,o)}}(e,t.computed),t.watch&&t.watch!==re&&function(e,t){for(var n in t){var r=t[n];if(i(r))for(var o=0;o<r.length;o++)zn(e,n,r[o]);else zn(e,n,r)}}(e,t.watch)}var qn={lazy:!0};function Fn(e,t,n){var r=!ae();c(n)?(Mn.get=r?Bn(t):Hn(n),Mn.set=D):(Mn.get=n.get?r&&!1!==n.cache?Bn(t):Hn(n.get):D,Mn.set=n.set||D),Object.defineProperty(e,t,Mn)}function Bn(e){return function(){var t=this._computedWatchers&&this._computedWatchers[e];if(t)return t.dirty&&t.evaluate(),ye.target&&t.depend(),t.value}}function Hn(e){return function(){return e.call(this,this)}}function zn(e,t,n,r){return p(n)&&(r=n,n=n.handler),"string"==typeof n&&(n=e[n]),e.$watch(t,n,r)}var Vn=0;function Wn(e){var t=e.options;if(e.super){var n=Wn(e.super);if(n!==e.superOptions){e.superOptions=n;var r=function(e){var t,n=e.options,r=e.sealedOptions;for(var i in n)n[i]!==r[i]&&(t||(t={}),t[i]=n[i]);return t}(e);r&&T(e.extendOptions,r),(t=e.options=In(n,e.extendOptions)).name&&(t.components[t.name]=e)}}return t}function Kn(e){this._init(e)}function Gn(e){e.cid=0;var t=1;e.extend=function(e){e=e||{};var n=this,r=n.cid,i=e._Ctor||(e._Ctor={});if(i[r])return i[r];var o=bn(e)||bn(n.options);var a=function(e){this._init(e)};return(a.prototype=Object.create(n.prototype)).constructor=a,a.cid=t++,a.options=In(n.options,e),a.super=n,a.options.props&&function(e){var t=e.options.props;for(var n in t)Nn(e.prototype,"_props",n)}(a),a.options.computed&&function(e){var t=e.options.computed;for(var n in t)Fn(e.prototype,n,t[n])}(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,F.forEach((function(e){a[e]=n[e]})),o&&(a.options.components[o]=a),a.superOptions=n.options,a.extendOptions=e,a.sealedOptions=T({},a.options),i[r]=a,a}}function Jn(e){return e&&(bn(e.Ctor.options)||e.tag)}function Qn(e,t){return i(e)?e.indexOf(t)>-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!d(e)&&e.test(t)}function Zn(e,t){var n=e.cache,r=e.keys,i=e._vnode,o=e.$vnode;for(var a in n){var l=n[a];if(l){var s=l.name;s&&!t(s)&&Yn(n,a,r,i)}}o.componentOptions.children=void 0}function Yn(e,t,n,r){var i=e[t];!i||r&&i.tag===r.tag||i.componentInstance.$destroy(),e[t]=null,w(n,t)}!function(e){e.prototype._init=function(e){var t=this;t._uid=Vn++,t._isVue=!0,t.__v_skip=!0,t._scope=new Be(!0),t._scope.parent=void 0,t._scope._vm=!0,e&&e._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),r=t._parentVnode;n.parent=t.parent,n._parentVnode=r;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(t,e):t.$options=In(Wn(t.constructor),e||{},t),t._renderProxy=t,t._self=t,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._provided=n?n._provided:Object.create(null),e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(t),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&Jt(e,t)}(t),function(e){e._vnode=null,e._staticTrees=null;var t=e.$options,n=e.$vnode=t._parentVnode,i=n&&n.context;e.$slots=pt(t._renderChildren,i),e.$scopedSlots=n?vt(e.$parent,n.data.scopedSlots,e.$slots):r,e._c=function(t,n,r,i){return jt(e,t,n,r,i,!1)},e.$createElement=function(t,n,r,i){return jt(e,t,n,r,i,!0)};var o=n&&n.data;Te(e,"$attrs",o&&o.attrs||r,null,!0),Te(e,"$listeners",t._parentListeners||r,null,!0)}(t),en(t,"beforeCreate",void 0,!1),function(e){var t=hn(e.$options.inject,e);t&&(Ee(!1),Object.keys(t).forEach((function(n){Te(e,n,t[n])})),Ee(!0))}(t),Un(t),function(e){var t=e.$options.provide;if(t){var n=c(t)?t.call(e):t;if(!u(n))return;for(var r=He(e),i=ue?Reflect.ownKeys(n):Object.keys(n),o=0;o<i.length;o++){var a=i[o];Object.defineProperty(r,a,Object.getOwnPropertyDescriptor(n,a))}}}(t),en(t,"created"),t.$options.el&&t.$mount(t.$options.el)}}(Kn),function(e){var t={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",n),e.prototype.$set=Le,e.prototype.$delete=De,e.prototype.$watch=function(e,t,n){if(p(t))return zn(this,e,t,n);(n=n||{}).user=!0;var r=new Vt(this,e,t,n);if(n.immediate){var i='callback for immediate watcher "'.concat(r.expression,'"');we(),Pt(t,this,[r.value],this,i),xe()}return function(){r.teardown()}}}(Kn),function(e){var t=/^hook:/;e.prototype.$on=function(e,n){var r=this;if(i(e))for(var o=0,a=e.length;o<a;o++)r.$on(e[o],n);else(r._events[e]||(r._events[e]=[])).push(n),t.test(e)&&(r._hasHookEvent=!0);return r},e.prototype.$once=function(e,t){var n=this;function r(){n.$off(e,r),t.apply(n,arguments)}return r.fn=t,n.$on(e,r),n},e.prototype.$off=function(e,t){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(i(e)){for(var r=0,o=e.length;r<o;r++)n.$off(e[r],t);return n}var a,l=n._events[e];if(!l)return n;if(!t)return n._events[e]=null,n;for(var s=l.length;s--;)if((a=l[s])===t||a.fn===t){l.splice(s,1);break}return n},e.prototype.$emit=function(e){var t=this,n=t._events[e];if(n){n=n.length>1?A(n):n;for(var r=A(arguments,1),i='event handler for "'.concat(e,'"'),o=0,a=n.length;o<a;o++)Pt(n[o],t,r,t,i)}return t}}(Kn),function(e){e.prototype._update=function(e,t){var n=this,r=n.$el,i=n._vnode,o=Zt(n);n._vnode=e,n.$el=i?n.__patch__(i,e):n.__patch__(n.$el,e,t,!1),o(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n);for(var a=n;a&&a.$vnode&&a.$parent&&a.$vnode===a.$parent._vnode;)a.$parent.$el=a.$el,a=a.$parent},e.prototype.$forceUpdate=function(){this._watcher&&this._watcher.update()},e.prototype.$destroy=function(){var e=this;if(!e._isBeingDestroyed){en(e,"beforeDestroy"),e._isBeingDestroyed=!0;var t=e.$parent;!t||t._isBeingDestroyed||e.$options.abstract||w(t.$children,e),e._scope.stop(),e._data.__ob__&&e._data.__ob__.vmCount--,e._isDestroyed=!0,e.__patch__(e._vnode,null),en(e,"destroyed"),e.$off(),e.$el&&(e.$el.__vue__=null),e.$vnode&&(e.$vnode.parent=null)}}}(Kn),function(e){ft(e.prototype),e.prototype.$nextTick=function(e){return Ut(e,this)},e.prototype._render=function(){var e=this,t=e.$options,n=t.render,r=t._parentVnode;r&&e._isMounted&&(e.$scopedSlots=vt(e.$parent,r.data.scopedSlots,e.$slots,e.$scopedSlots),e._slotsProxy&&wt(e._slotsProxy,e.$scopedSlots)),e.$vnode=r;var o,a=fe,l=xt;try{pe(e),xt=e,o=n.call(e._renderProxy,e.$createElement)}catch(t){kt(t,e,"render"),o=e._vnode}finally{xt=l,pe(a)}return i(o)&&1===o.length&&(o=o[0]),o instanceof de||(o=he()),o.parent=r,o}}(Kn);var Xn=[String,RegExp,Array],er={KeepAlive:{name:"keep-alive",abstract:!0,props:{include:Xn,exclude:Xn,max:[String,Number]},methods:{cacheVNode:function(){var e=this.cache,t=this.keys,n=this.vnodeToCache,r=this.keyToCache;if(n){var i=n.tag,o=n.componentInstance,a=n.componentOptions;e[r]={name:Jn(a),tag:i,componentInstance:o},t.push(r),this.max&&t.length>parseInt(this.max)&&Yn(e,t[0],t,this._vnode),this.vnodeToCache=null}}},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var e in this.cache)Yn(this.cache,e,this.keys)},mounted:function(){var e=this;this.cacheVNode(),this.$watch("include",(function(t){Zn(e,(function(e){return Qn(t,e)}))})),this.$watch("exclude",(function(t){Zn(e,(function(e){return!Qn(t,e)}))}))},updated:function(){this.cacheVNode()},render:function(){var e=this.$slots.default,t=Ot(e),n=t&&t.componentOptions;if(n){var r=Jn(n),i=this.include,o=this.exclude;if(i&&(!r||!Qn(i,r))||o&&r&&Qn(o,r))return t;var a=this.cache,l=this.keys,s=null==t.key?n.Ctor.cid+(n.tag?"::".concat(n.tag):""):t.key;a[s]?(t.componentInstance=a[s].componentInstance,w(l,s),l.push(s)):(this.vnodeToCache=t,this.keyToCache=s),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return H}};Object.defineProperty(e,"config",t),e.util={warn:Sn,extend:T,mergeOptions:In,defineReactive:Te},e.set=Le,e.delete=De,e.nextTick=Ut,e.observable=function(e){return Ae(e),e},e.options=Object.create(null),F.forEach((function(t){e.options[t+"s"]=Object.create(null)})),e.options._base=e,T(e.options.components,er),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=A(arguments,1);return n.unshift(this),c(e.install)?e.install.apply(e,n):c(e)&&e.apply(null,n),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=In(this.options,e),this}}(e),Gn(e),function(e){F.forEach((function(t){e[t]=function(e,n){return n?("component"===t&&p(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&c(n)&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}}))}(e)}(Kn),Object.defineProperty(Kn.prototype,"$isServer",{get:ae}),Object.defineProperty(Kn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(Kn,"FunctionalRenderContext",{value:vn}),Kn.version="2.7.16";var tr=y("style,class"),nr=y("input,textarea,option,select,progress"),rr=y("contenteditable,draggable,spellcheck"),ir=y("events,caret,typing,plaintext-only"),or=y("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,truespeed,typemustmatch,visible"),ar="http://www.w3.org/1999/xlink",lr=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},sr=function(e){return lr(e)?e.slice(6,e.length):""},cr=function(e){return null==e||!1===e};function ur(e){for(var t=e.data,n=e,r=e;a(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(t=fr(r.data,t));for(;a(n=n.parent);)n&&n.data&&(t=fr(t,n.data));return function(e,t){if(a(e)||a(t))return pr(e,dr(t));return""}(t.staticClass,t.class)}function fr(e,t){return{staticClass:pr(e.staticClass,t.staticClass),class:a(e.class)?[e.class,t.class]:t.class}}function pr(e,t){return e?t?e+" "+t:e:t||""}function dr(e){return Array.isArray(e)?function(e){for(var t,n="",r=0,i=e.length;r<i;r++)a(t=dr(e[r]))&&""!==t&&(n&&(n+=" "),n+=t);return n}(e):u(e)?function(e){var t="";for(var n in e)e[n]&&(t&&(t+=" "),t+=n);return t}(e):"string"==typeof e?e:""}var hr={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},vr=y("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template,blockquote,iframe,tfoot"),mr=y("svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,foreignobject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view",!0),gr=function(e){return vr(e)||mr(e)};var br=Object.create(null);var yr=y("text,number,password,search,email,tel,url");var _r=Object.freeze({__proto__:null,createElement:function(e,t){var n=document.createElement(e);return"select"!==e||t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n},createElementNS:function(e,t){return document.createElementNS(hr[e],t)},createTextNode:function(e){return document.createTextNode(e)},createComment:function(e){return document.createComment(e)},insertBefore:function(e,t,n){e.insertBefore(t,n)},removeChild:function(e,t){e.removeChild(t)},appendChild:function(e,t){e.appendChild(t)},parentNode:function(e){return e.parentNode},nextSibling:function(e){return e.nextSibling},tagName:function(e){return e.tagName},setTextContent:function(e,t){e.textContent=t},setStyleScope:function(e,t){e.setAttribute(t,"")}}),wr={create:function(e,t){xr(t)},update:function(e,t){e.data.ref!==t.data.ref&&(xr(e,!0),xr(t))},destroy:function(e){xr(e,!0)}};function xr(e,t){var n=e.data.ref;if(a(n)){var r=e.context,o=e.componentInstance||e.elm,l=t?null:o,s=t?void 0:o;if(c(n))Pt(n,r,[l],r,"template ref function");else{var u=e.data.refInFor,f="string"==typeof n||"number"==typeof n,p=Ue(n),d=r.$refs;if(f||p)if(u){var h=f?d[n]:n.value;t?i(h)&&w(h,o):i(h)?h.includes(o)||h.push(o):f?(d[n]=[o],Sr(r,n,d[n])):n.value=[o]}else if(f){if(t&&d[n]!==o)return;d[n]=s,Sr(r,n,l)}else if(p){if(t&&n.value!==o)return;n.value=l}else 0}}}function Sr(e,t,n){var r=e._setupState;r&&S(r,t)&&(Ue(r[t])?r[t].value=n:r[t]=n)}var Or=new de("",{},[]),jr=["create","activate","update","remove","destroy"];function kr(e,t){return e.key===t.key&&e.asyncFactory===t.asyncFactory&&(e.tag===t.tag&&e.isComment===t.isComment&&a(e.data)===a(t.data)&&function(e,t){if("input"!==e.tag)return!0;var n,r=a(n=e.data)&&a(n=n.attrs)&&n.type,i=a(n=t.data)&&a(n=n.attrs)&&n.type;return r===i||yr(r)&&yr(i)}(e,t)||l(e.isAsyncPlaceholder)&&o(t.asyncFactory.error))}function Pr(e,t,n){var r,i,o={};for(r=t;r<=n;++r)a(i=e[r].key)&&(o[i]=r);return o}var Er={create:Cr,update:Cr,destroy:function(e){Cr(e,Or)}};function Cr(e,t){(e.data.directives||t.data.directives)&&function(e,t){var n,r,i,o=e===Or,a=t===Or,l=Ar(e.data.directives,e.context),s=Ar(t.data.directives,t.context),c=[],u=[];for(n in s)r=l[n],i=s[n],r?(i.oldValue=r.value,i.oldArg=r.arg,Lr(i,"update",t,e),i.def&&i.def.componentUpdated&&u.push(i)):(Lr(i,"bind",t,e),i.def&&i.def.inserted&&c.push(i));if(c.length){var f=function(){for(var n=0;n<c.length;n++)Lr(c[n],"inserted",t,e)};o?Ke(t,"insert",f):f()}u.length&&Ke(t,"postpatch",(function(){for(var n=0;n<u.length;n++)Lr(u[n],"componentUpdated",t,e)}));if(!o)for(n in l)s[n]||Lr(l[n],"unbind",e,e,a)}(e,t)}var Ir=Object.create(null);function Ar(e,t){var n,r,i=Object.create(null);if(!e)return i;for(n=0;n<e.length;n++){if((r=e[n]).modifiers||(r.modifiers=Ir),i[Tr(r)]=r,t._setupState&&t._setupState.__sfc){var o=r.def||An(t,"_setupState","v-"+r.name);r.def="function"==typeof o?{bind:o,update:o}:o}r.def=r.def||An(t.$options,"directives",r.name)}return i}function Tr(e){return e.rawName||"".concat(e.name,".").concat(Object.keys(e.modifiers||{}).join("."))}function Lr(e,t,n,r,i){var o=e.def&&e.def[t];if(o)try{o(n.elm,e,n,r,i)}catch(r){kt(r,n.context,"directive ".concat(e.name," ").concat(t," hook"))}}var Dr=[wr,Er];function $r(e,t){var n=t.componentOptions;if(!(a(n)&&!1===n.Ctor.options.inheritAttrs||o(e.data.attrs)&&o(t.data.attrs))){var r,i,s=t.elm,c=e.data.attrs||{},u=t.data.attrs||{};for(r in(a(u.__ob__)||l(u._v_attr_proxy))&&(u=t.data.attrs=T({},u)),u)i=u[r],c[r]!==i&&Rr(s,r,i,t.data.pre);for(r in(Z||X)&&u.value!==c.value&&Rr(s,"value",u.value),c)o(u[r])&&(lr(r)?s.removeAttributeNS(ar,sr(r)):rr(r)||s.removeAttribute(r))}}function Rr(e,t,n,r){r||e.tagName.indexOf("-")>-1?Mr(e,t,n):or(t)?cr(n)?e.removeAttribute(t):(n="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,n)):rr(t)?e.setAttribute(t,function(e,t){return cr(t)||"false"===t?"false":"contenteditable"===e&&ir(t)?t:"true"}(t,n)):lr(t)?cr(n)?e.removeAttributeNS(ar,sr(t)):e.setAttributeNS(ar,t,n):Mr(e,t,n)}function Mr(e,t,n){if(cr(n))e.removeAttribute(t);else{if(Z&&!Y&&"TEXTAREA"===e.tagName&&"placeholder"===t&&""!==n&&!e.__ieph){var r=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",r)};e.addEventListener("input",r),e.__ieph=!0}e.setAttribute(t,n)}}var Nr={create:$r,update:$r};function Ur(e,t){var n=t.elm,r=t.data,i=e.data;if(!(o(r.staticClass)&&o(r.class)&&(o(i)||o(i.staticClass)&&o(i.class)))){var l=ur(t),s=n._transitionClasses;a(s)&&(l=pr(l,dr(s))),l!==n._prevClass&&(n.setAttribute("class",l),n._prevClass=l)}}var qr,Fr={create:Ur,update:Ur};function Br(e,t,n){var r=qr;return function i(){var o=t.apply(null,arguments);null!==o&&Vr(e,i,n,r)}}var Hr=At&&!(ne&&Number(ne[1])<=53);function zr(e,t,n,r){if(Hr){var i=sn,o=t;t=o._wrapper=function(e){if(e.target===e.currentTarget||e.timeStamp>=i||e.timeStamp<=0||e.target.ownerDocument!==document)return o.apply(this,arguments)}}qr.addEventListener(e,t,ie?{capture:n,passive:r}:n)}function Vr(e,t,n,r){(r||qr).removeEventListener(e,t._wrapper||t,n)}function Wr(e,t){if(!o(e.data.on)||!o(t.data.on)){var n=t.data.on||{},r=e.data.on||{};qr=t.elm||e.elm,function(e){if(a(e.__r)){var t=Z?"change":"input";e[t]=[].concat(e.__r,e[t]||[]),delete e.__r}a(e.__c)&&(e.change=[].concat(e.__c,e.change||[]),delete e.__c)}(n),We(n,r,zr,Vr,Br,t.context),qr=void 0}}var Kr,Gr={create:Wr,update:Wr,destroy:function(e){return Wr(e,Or)}};function Jr(e,t){if(!o(e.data.domProps)||!o(t.data.domProps)){var n,r,i=t.elm,s=e.data.domProps||{},c=t.data.domProps||{};for(n in(a(c.__ob__)||l(c._v_attr_proxy))&&(c=t.data.domProps=T({},c)),s)n in c||(i[n]="");for(n in c){if(r=c[n],"textContent"===n||"innerHTML"===n){if(t.children&&(t.children.length=0),r===s[n])continue;1===i.childNodes.length&&i.removeChild(i.childNodes[0])}if("value"===n&&"PROGRESS"!==i.tagName){i._value=r;var u=o(r)?"":String(r);Qr(i,u)&&(i.value=u)}else if("innerHTML"===n&&mr(i.tagName)&&o(i.innerHTML)){(Kr=Kr||document.createElement("div")).innerHTML="<svg>".concat(r,"</svg>");for(var f=Kr.firstChild;i.firstChild;)i.removeChild(i.firstChild);for(;f.firstChild;)i.appendChild(f.firstChild)}else if(r!==s[n])try{i[n]=r}catch(e){}}}}function Qr(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}(e,t)||function(e,t){var n=e.value,r=e._vModifiers;if(a(r)){if(r.number)return b(n)!==b(t);if(r.trim)return n.trim()!==t.trim()}return n!==t}(e,t))}var Zr={create:Jr,update:Jr},Yr=O((function(e){var t={},n=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach((function(e){if(e){var r=e.split(n);r.length>1&&(t[r[0].trim()]=r[1].trim())}})),t}));function Xr(e){var t=ei(e.style);return e.staticStyle?T(e.staticStyle,t):t}function ei(e){return Array.isArray(e)?L(e):"string"==typeof e?Yr(e):e}var ti,ni=/^--/,ri=/\s*!important$/,ii=function(e,t,n){if(ni.test(t))e.style.setProperty(t,n);else if(ri.test(n))e.style.setProperty(C(t),n.replace(ri,""),"important");else{var r=ai(t);if(Array.isArray(n))for(var i=0,o=n.length;i<o;i++)e.style[r]=n[i];else e.style[r]=n}},oi=["Webkit","Moz","ms"],ai=O((function(e){if(ti=ti||document.createElement("div").style,"filter"!==(e=k(e))&&e in ti)return e;for(var t=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<oi.length;n++){var r=oi[n]+t;if(r in ti)return r}}));function li(e,t){var n=t.data,r=e.data;if(!(o(n.staticStyle)&&o(n.style)&&o(r.staticStyle)&&o(r.style))){var i,l,s=t.elm,c=r.staticStyle,u=r.normalizedStyle||r.style||{},f=c||u,p=ei(t.data.style)||{};t.data.normalizedStyle=a(p.__ob__)?T({},p):p;var d=function(e,t){var n,r={};if(t)for(var i=e;i.componentInstance;)(i=i.componentInstance._vnode)&&i.data&&(n=Xr(i.data))&&T(r,n);(n=Xr(e.data))&&T(r,n);for(var o=e;o=o.parent;)o.data&&(n=Xr(o.data))&&T(r,n);return r}(t,!0);for(l in f)o(d[l])&&ii(s,l,"");for(l in d)i=d[l],ii(s,l,null==i?"":i)}}var si={create:li,update:li},ci=/\s+/;function ui(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(ci).forEach((function(t){return e.classList.add(t)})):e.classList.add(t);else{var n=" ".concat(e.getAttribute("class")||""," ");n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function fi(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(ci).forEach((function(t){return e.classList.remove(t)})):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" ".concat(e.getAttribute("class")||""," "),r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?e.setAttribute("class",n):e.removeAttribute("class")}}function pi(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&T(t,di(e.name||"v")),T(t,e),t}return"string"==typeof e?di(e):void 0}}var di=O((function(e){return{enterClass:"".concat(e,"-enter"),enterToClass:"".concat(e,"-enter-to"),enterActiveClass:"".concat(e,"-enter-active"),leaveClass:"".concat(e,"-leave"),leaveToClass:"".concat(e,"-leave-to"),leaveActiveClass:"".concat(e,"-leave-active")}})),hi=J&&!Y,vi="transition",mi="transitionend",gi="animation",bi="animationend";hi&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(vi="WebkitTransition",mi="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(gi="WebkitAnimation",bi="webkitAnimationEnd"));var yi=J?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(e){return e()};function _i(e){yi((function(){yi(e)}))}function wi(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),ui(e,t))}function xi(e,t){e._transitionClasses&&w(e._transitionClasses,t),fi(e,t)}function Si(e,t,n){var r=ji(e,t),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var l="transition"===i?mi:bi,s=0,c=function(){e.removeEventListener(l,u),n()},u=function(t){t.target===e&&++s>=a&&c()};setTimeout((function(){s<a&&c()}),o+1),e.addEventListener(l,u)}var Oi=/\b(transform|all)(,|$)/;function ji(e,t){var n,r=window.getComputedStyle(e),i=(r[vi+"Delay"]||"").split(", "),o=(r[vi+"Duration"]||"").split(", "),a=ki(i,o),l=(r[gi+"Delay"]||"").split(", "),s=(r[gi+"Duration"]||"").split(", "),c=ki(l,s),u=0,f=0;return"transition"===t?a>0&&(n="transition",u=a,f=o.length):"animation"===t?c>0&&(n="animation",u=c,f=s.length):f=(n=(u=Math.max(a,c))>0?a>c?"transition":"animation":null)?"transition"===n?o.length:s.length:0,{type:n,timeout:u,propCount:f,hasTransform:"transition"===n&&Oi.test(r[vi+"Property"])}}function ki(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max.apply(null,t.map((function(t,n){return Pi(t)+Pi(e[n])})))}function Pi(e){return 1e3*Number(e.slice(0,-1).replace(",","."))}function Ei(e,t){var n=e.elm;a(n._leaveCb)&&(n._leaveCb.cancelled=!0,n._leaveCb());var r=pi(e.data.transition);if(!o(r)&&!a(n._enterCb)&&1===n.nodeType){for(var i=r.css,l=r.type,s=r.enterClass,f=r.enterToClass,p=r.enterActiveClass,d=r.appearClass,h=r.appearToClass,v=r.appearActiveClass,m=r.beforeEnter,g=r.enter,y=r.afterEnter,_=r.enterCancelled,w=r.beforeAppear,x=r.appear,S=r.afterAppear,O=r.appearCancelled,j=r.duration,k=Qt,P=Qt.$vnode;P&&P.parent;)k=P.context,P=P.parent;var E=!k._isMounted||!e.isRootInsert;if(!E||x||""===x){var C=E&&d?d:s,I=E&&v?v:p,A=E&&h?h:f,T=E&&w||m,L=E&&c(x)?x:g,D=E&&S||y,$=E&&O||_,R=b(u(j)?j.enter:j);0;var M=!1!==i&&!Y,N=Ai(L),q=n._enterCb=U((function(){M&&(xi(n,A),xi(n,I)),q.cancelled?(M&&xi(n,C),$&&$(n)):D&&D(n),n._enterCb=null}));e.data.show||Ke(e,"insert",(function(){var t=n.parentNode,r=t&&t._pending&&t._pending[e.key];r&&r.tag===e.tag&&r.elm._leaveCb&&r.elm._leaveCb(),L&&L(n,q)})),T&&T(n),M&&(wi(n,C),wi(n,I),_i((function(){xi(n,C),q.cancelled||(wi(n,A),N||(Ii(R)?setTimeout(q,R):Si(n,l,q)))}))),e.data.show&&(t&&t(),L&&L(n,q)),M||N||q()}}}function Ci(e,t){var n=e.elm;a(n._enterCb)&&(n._enterCb.cancelled=!0,n._enterCb());var r=pi(e.data.transition);if(o(r)||1!==n.nodeType)return t();if(!a(n._leaveCb)){var i=r.css,l=r.type,s=r.leaveClass,c=r.leaveToClass,f=r.leaveActiveClass,p=r.beforeLeave,d=r.leave,h=r.afterLeave,v=r.leaveCancelled,m=r.delayLeave,g=r.duration,y=!1!==i&&!Y,_=Ai(d),w=b(u(g)?g.leave:g);0;var x=n._leaveCb=U((function(){n.parentNode&&n.parentNode._pending&&(n.parentNode._pending[e.key]=null),y&&(xi(n,c),xi(n,f)),x.cancelled?(y&&xi(n,s),v&&v(n)):(t(),h&&h(n)),n._leaveCb=null}));m?m(S):S()}function S(){x.cancelled||(!e.data.show&&n.parentNode&&((n.parentNode._pending||(n.parentNode._pending={}))[e.key]=e),p&&p(n),y&&(wi(n,s),wi(n,f),_i((function(){xi(n,s),x.cancelled||(wi(n,c),_||(Ii(w)?setTimeout(x,w):Si(n,l,x)))}))),d&&d(n,x),y||_||x())}}function Ii(e){return"number"==typeof e&&!isNaN(e)}function Ai(e){if(o(e))return!1;var t=e.fns;return a(t)?Ai(Array.isArray(t)?t[0]:t):(e._length||e.length)>1}function Ti(e,t){!0!==t.data.show&&Ei(t)}var Li=function(e){var t,n,r={},c=e.modules,u=e.nodeOps;for(t=0;t<jr.length;++t)for(r[jr[t]]=[],n=0;n<c.length;++n)a(c[n][jr[t]])&&r[jr[t]].push(c[n][jr[t]]);function f(e){var t=u.parentNode(e);a(t)&&u.removeChild(t,e)}function p(e,t,n,i,o,s,c){if(a(e.elm)&&a(s)&&(e=s[c]=me(e)),e.isRootInsert=!o,!function(e,t,n,i){var o=e.data;if(a(o)){var s=a(e.componentInstance)&&o.keepAlive;if(a(o=o.hook)&&a(o=o.init)&&o(e,!1),a(e.componentInstance))return d(e,t),h(n,e.elm,i),l(s)&&function(e,t,n,i){var o,l=e;for(;l.componentInstance;)if(l=l.componentInstance._vnode,a(o=l.data)&&a(o=o.transition)){for(o=0;o<r.activate.length;++o)r.activate[o](Or,l);t.push(l);break}h(n,e.elm,i)}(e,t,n,i),!0}}(e,t,n,i)){var f=e.data,p=e.children,m=e.tag;a(m)?(e.elm=e.ns?u.createElementNS(e.ns,m):u.createElement(m,e),b(e),v(e,p,t),a(f)&&g(e,t),h(n,e.elm,i)):l(e.isComment)?(e.elm=u.createComment(e.text),h(n,e.elm,i)):(e.elm=u.createTextNode(e.text),h(n,e.elm,i))}}function d(e,t){a(e.data.pendingInsert)&&(t.push.apply(t,e.data.pendingInsert),e.data.pendingInsert=null),e.elm=e.componentInstance.$el,m(e)?(g(e,t),b(e)):(xr(e),t.push(e))}function h(e,t,n){a(e)&&(a(n)?u.parentNode(n)===e&&u.insertBefore(e,t,n):u.appendChild(e,t))}function v(e,t,n){if(i(t)){0;for(var r=0;r<t.length;++r)p(t[r],n,e.elm,null,!0,t,r)}else s(e.text)&&u.appendChild(e.elm,u.createTextNode(String(e.text)))}function m(e){for(;e.componentInstance;)e=e.componentInstance._vnode;return a(e.tag)}function g(e,n){for(var i=0;i<r.create.length;++i)r.create[i](Or,e);a(t=e.data.hook)&&(a(t.create)&&t.create(Or,e),a(t.insert)&&n.push(e))}function b(e){var t;if(a(t=e.fnScopeId))u.setStyleScope(e.elm,t);else for(var n=e;n;)a(t=n.context)&&a(t=t.$options._scopeId)&&u.setStyleScope(e.elm,t),n=n.parent;a(t=Qt)&&t!==e.context&&t!==e.fnContext&&a(t=t.$options._scopeId)&&u.setStyleScope(e.elm,t)}function _(e,t,n,r,i,o){for(;r<=i;++r)p(n[r],o,e,t,!1,n,r)}function w(e){var t,n,i=e.data;if(a(i))for(a(t=i.hook)&&a(t=t.destroy)&&t(e),t=0;t<r.destroy.length;++t)r.destroy[t](e);if(a(t=e.children))for(n=0;n<e.children.length;++n)w(e.children[n])}function x(e,t,n){for(;t<=n;++t){var r=e[t];a(r)&&(a(r.tag)?(S(r),w(r)):f(r.elm))}}function S(e,t){if(a(t)||a(e.data)){var n,i=r.remove.length+1;for(a(t)?t.listeners+=i:t=function(e,t){function n(){0==--n.listeners&&f(e)}return n.listeners=t,n}(e.elm,i),a(n=e.componentInstance)&&a(n=n._vnode)&&a(n.data)&&S(n,t),n=0;n<r.remove.length;++n)r.remove[n](e,t);a(n=e.data.hook)&&a(n=n.remove)?n(e,t):t()}else f(e.elm)}function O(e,t,n,r){for(var i=n;i<r;i++){var o=t[i];if(a(o)&&kr(e,o))return i}}function j(e,t,n,i,s,c){if(e!==t){a(t.elm)&&a(i)&&(t=i[s]=me(t));var f=t.elm=e.elm;if(l(e.isAsyncPlaceholder))a(t.asyncFactory.resolved)?E(e.elm,t,n):t.isAsyncPlaceholder=!0;else if(l(t.isStatic)&&l(e.isStatic)&&t.key===e.key&&(l(t.isCloned)||l(t.isOnce)))t.componentInstance=e.componentInstance;else{var d,h=t.data;a(h)&&a(d=h.hook)&&a(d=d.prepatch)&&d(e,t);var v=e.children,g=t.children;if(a(h)&&m(t)){for(d=0;d<r.update.length;++d)r.update[d](e,t);a(d=h.hook)&&a(d=d.update)&&d(e,t)}o(t.text)?a(v)&&a(g)?v!==g&&function(e,t,n,r,i){var l,s,c,f=0,d=0,h=t.length-1,v=t[0],m=t[h],g=n.length-1,b=n[0],y=n[g],w=!i;for(0;f<=h&&d<=g;)o(v)?v=t[++f]:o(m)?m=t[--h]:kr(v,b)?(j(v,b,r,n,d),v=t[++f],b=n[++d]):kr(m,y)?(j(m,y,r,n,g),m=t[--h],y=n[--g]):kr(v,y)?(j(v,y,r,n,g),w&&u.insertBefore(e,v.elm,u.nextSibling(m.elm)),v=t[++f],y=n[--g]):kr(m,b)?(j(m,b,r,n,d),w&&u.insertBefore(e,m.elm,v.elm),m=t[--h],b=n[++d]):(o(l)&&(l=Pr(t,f,h)),o(s=a(b.key)?l[b.key]:O(b,t,f,h))?p(b,r,e,v.elm,!1,n,d):kr(c=t[s],b)?(j(c,b,r,n,d),t[s]=void 0,w&&u.insertBefore(e,c.elm,v.elm)):p(b,r,e,v.elm,!1,n,d),b=n[++d]);f>h?_(e,o(n[g+1])?null:n[g+1].elm,n,d,g,r):d>g&&x(t,f,h)}(f,v,g,n,c):a(g)?(a(e.text)&&u.setTextContent(f,""),_(f,null,g,0,g.length-1,n)):a(v)?x(v,0,v.length-1):a(e.text)&&u.setTextContent(f,""):e.text!==t.text&&u.setTextContent(f,t.text),a(h)&&a(d=h.hook)&&a(d=d.postpatch)&&d(e,t)}}}function k(e,t,n){if(l(n)&&a(e.parent))e.parent.data.pendingInsert=t;else for(var r=0;r<t.length;++r)t[r].data.hook.insert(t[r])}var P=y("attrs,class,staticClass,staticStyle,key");function E(e,t,n,r){var i,o=t.tag,s=t.data,c=t.children;if(r=r||s&&s.pre,t.elm=e,l(t.isComment)&&a(t.asyncFactory))return t.isAsyncPlaceholder=!0,!0;if(a(s)&&(a(i=s.hook)&&a(i=i.init)&&i(t,!0),a(i=t.componentInstance)))return d(t,n),!0;if(a(o)){if(a(c))if(e.hasChildNodes())if(a(i=s)&&a(i=i.domProps)&&a(i=i.innerHTML)){if(i!==e.innerHTML)return!1}else{for(var u=!0,f=e.firstChild,p=0;p<c.length;p++){if(!f||!E(f,c[p],n,r)){u=!1;break}f=f.nextSibling}if(!u||f)return!1}else v(t,c,n);if(a(s)){var h=!1;for(var m in s)if(!P(m)){h=!0,g(t,n);break}!h&&s.class&&Bt(s.class)}}else e.data!==t.text&&(e.data=t.text);return!0}return function(e,t,n,i){if(!o(t)){var s,c=!1,f=[];if(o(e))c=!0,p(t,f);else{var d=a(e.nodeType);if(!d&&kr(e,t))j(e,t,f,null,null,i);else{if(d){if(1===e.nodeType&&e.hasAttribute("data-server-rendered")&&(e.removeAttribute("data-server-rendered"),n=!0),l(n)&&E(e,t,f))return k(t,f,!0),e;s=e,e=new de(u.tagName(s).toLowerCase(),{},[],void 0,s)}var h=e.elm,v=u.parentNode(h);if(p(t,f,h._leaveCb?null:v,u.nextSibling(h)),a(t.parent))for(var g=t.parent,b=m(t);g;){for(var y=0;y<r.destroy.length;++y)r.destroy[y](g);if(g.elm=t.elm,b){for(var _=0;_<r.create.length;++_)r.create[_](Or,g);var S=g.data.hook.insert;if(S.merged)for(var O=S.fns.slice(1),P=0;P<O.length;P++)O[P]()}else xr(g);g=g.parent}a(v)?x([e],0,0):a(e.tag)&&w(e)}}return k(t,f,c),t.elm}a(e)&&w(e)}}({nodeOps:_r,modules:[Nr,Fr,Gr,Zr,si,J?{create:Ti,activate:Ti,remove:function(e,t){!0!==e.data.show?Ci(e,t):t()}}:{}].concat(Dr)});Y&&document.addEventListener("selectionchange",(function(){var e=document.activeElement;e&&e.vmodel&&Fi(e,"input")}));var Di={inserted:function(e,t,n,r){"select"===n.tag?(r.elm&&!r.elm._vOptions?Ke(n,"postpatch",(function(){Di.componentUpdated(e,t,n)})):$i(e,t,n.context),e._vOptions=[].map.call(e.options,Ni)):("textarea"===n.tag||yr(e.type))&&(e._vModifiers=t.modifiers,t.modifiers.lazy||(e.addEventListener("compositionstart",Ui),e.addEventListener("compositionend",qi),e.addEventListener("change",qi),Y&&(e.vmodel=!0)))},componentUpdated:function(e,t,n){if("select"===n.tag){$i(e,t,n.context);var r=e._vOptions,i=e._vOptions=[].map.call(e.options,Ni);if(i.some((function(e,t){return!M(e,r[t])})))(e.multiple?t.value.some((function(e){return Mi(e,i)})):t.value!==t.oldValue&&Mi(t.value,i))&&Fi(e,"change")}}};function $i(e,t,n){Ri(e,t,n),(Z||X)&&setTimeout((function(){Ri(e,t,n)}),0)}function Ri(e,t,n){var r=t.value,i=e.multiple;if(!i||Array.isArray(r)){for(var o,a,l=0,s=e.options.length;l<s;l++)if(a=e.options[l],i)o=N(r,Ni(a))>-1,a.selected!==o&&(a.selected=o);else if(M(Ni(a),r))return void(e.selectedIndex!==l&&(e.selectedIndex=l));i||(e.selectedIndex=-1)}}function Mi(e,t){return t.every((function(t){return!M(t,e)}))}function Ni(e){return"_value"in e?e._value:e.value}function Ui(e){e.target.composing=!0}function qi(e){e.target.composing&&(e.target.composing=!1,Fi(e.target,"input"))}function Fi(e,t){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function Bi(e){return!e.componentInstance||e.data&&e.data.transition?e:Bi(e.componentInstance._vnode)}var Hi={model:Di,show:{bind:function(e,t,n){var r=t.value,i=(n=Bi(n)).data&&n.data.transition,o=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;r&&i?(n.data.show=!0,Ei(n,(function(){e.style.display=o}))):e.style.display=r?o:"none"},update:function(e,t,n){var r=t.value;!r!=!t.oldValue&&((n=Bi(n)).data&&n.data.transition?(n.data.show=!0,r?Ei(n,(function(){e.style.display=e.__vOriginalDisplay})):Ci(n,(function(){e.style.display="none"}))):e.style.display=r?e.__vOriginalDisplay:"none")},unbind:function(e,t,n,r,i){i||(e.style.display=e.__vOriginalDisplay)}}},zi={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function Vi(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?Vi(Ot(t.children)):e}function Wi(e){var t={},n=e.$options;for(var r in n.propsData)t[r]=e[r];var i=n._parentListeners;for(var r in i)t[k(r)]=i[r];return t}function Ki(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var Gi=function(e){return e.tag||ht(e)},Ji=function(e){return"show"===e.name},Qi={name:"transition",props:zi,abstract:!0,render:function(e){var t=this,n=this.$slots.default;if(n&&(n=n.filter(Gi)).length){0;var r=this.mode;0;var i=n[0];if(function(e){for(;e=e.parent;)if(e.data.transition)return!0}(this.$vnode))return i;var o=Vi(i);if(!o)return i;if(this._leaving)return Ki(e,i);var a="__transition-".concat(this._uid,"-");o.key=null==o.key?o.isComment?a+"comment":a+o.tag:s(o.key)?0===String(o.key).indexOf(a)?o.key:a+o.key:o.key;var l=(o.data||(o.data={})).transition=Wi(this),c=this._vnode,u=Vi(c);if(o.data.directives&&o.data.directives.some(Ji)&&(o.data.show=!0),u&&u.data&&!function(e,t){return t.key===e.key&&t.tag===e.tag}(o,u)&&!ht(u)&&(!u.componentInstance||!u.componentInstance._vnode.isComment)){var f=u.data.transition=T({},l);if("out-in"===r)return this._leaving=!0,Ke(f,"afterLeave",(function(){t._leaving=!1,t.$forceUpdate()})),Ki(e,i);if("in-out"===r){if(ht(o))return c;var p,d=function(){p()};Ke(l,"afterEnter",d),Ke(l,"enterCancelled",d),Ke(f,"delayLeave",(function(e){p=e}))}}return i}}},Zi=T({tag:String,moveClass:String},zi);function Yi(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function Xi(e){e.data.newPos=e.elm.getBoundingClientRect()}function eo(e){var t=e.data.pos,n=e.data.newPos,r=t.left-n.left,i=t.top-n.top;if(r||i){e.data.moved=!0;var o=e.elm.style;o.transform=o.WebkitTransform="translate(".concat(r,"px,").concat(i,"px)"),o.transitionDuration="0s"}}delete Zi.mode;var to={Transition:Qi,TransitionGroup:{props:Zi,beforeMount:function(){var e=this,t=this._update;this._update=function(n,r){var i=Zt(e);e.__patch__(e._vnode,e.kept,!1,!0),e._vnode=e.kept,i(),t.call(e,n,r)}},render:function(e){for(var t=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,i=this.$slots.default||[],o=this.children=[],a=Wi(this),l=0;l<i.length;l++){if((u=i[l]).tag)if(null!=u.key&&0!==String(u.key).indexOf("__vlist"))o.push(u),n[u.key]=u,(u.data||(u.data={})).transition=a;else;}if(r){var s=[],c=[];for(l=0;l<r.length;l++){var u;(u=r[l]).data.transition=a,u.data.pos=u.elm.getBoundingClientRect(),n[u.key]?s.push(u):c.push(u)}this.kept=e(t,null,s),this.removed=c}return e(t,null,o)},updated:function(){var e=this.prevChildren,t=this.moveClass||(this.name||"v")+"-move";e.length&&this.hasMove(e[0].elm,t)&&(e.forEach(Yi),e.forEach(Xi),e.forEach(eo),this._reflow=document.body.offsetHeight,e.forEach((function(e){if(e.data.moved){var n=e.elm,r=n.style;wi(n,t),r.transform=r.WebkitTransform=r.transitionDuration="",n.addEventListener(mi,n._moveCb=function e(r){r&&r.target!==n||r&&!/transform$/.test(r.propertyName)||(n.removeEventListener(mi,e),n._moveCb=null,xi(n,t))})}})))},methods:{hasMove:function(e,t){if(!hi)return!1;if(this._hasMove)return this._hasMove;var n=e.cloneNode();e._transitionClasses&&e._transitionClasses.forEach((function(e){fi(n,e)})),ui(n,t),n.style.display="none",this.$el.appendChild(n);var r=ji(n);return this.$el.removeChild(n),this._hasMove=r.hasTransform}}}};Kn.config.mustUseProp=function(e,t,n){return"value"===n&&nr(e)&&"button"!==t||"selected"===n&&"option"===e||"checked"===n&&"input"===e||"muted"===n&&"video"===e},Kn.config.isReservedTag=gr,Kn.config.isReservedAttr=tr,Kn.config.getTagNamespace=function(e){return mr(e)?"svg":"math"===e?"math":void 0},Kn.config.isUnknownElement=function(e){if(!J)return!0;if(gr(e))return!1;if(e=e.toLowerCase(),null!=br[e])return br[e];var t=document.createElement(e);return e.indexOf("-")>-1?br[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:br[e]=/HTMLUnknownElement/.test(t.toString())},T(Kn.options.directives,Hi),T(Kn.options.components,to),Kn.prototype.__patch__=J?Li:D,Kn.prototype.$mount=function(e,t){return function(e,t,n){var r;e.$el=t,e.$options.render||(e.$options.render=he),en(e,"beforeMount"),r=function(){e._update(e._render(),n)},new Vt(e,r,D,{before:function(){e._isMounted&&!e._isDestroyed&&en(e,"beforeUpdate")}},!0),n=!1;var i=e._preWatchers;if(i)for(var o=0;o<i.length;o++)i[o].run();return null==e.$vnode&&(e._isMounted=!0,en(e,"mounted")),e}(this,e=e&&J?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},J&&setTimeout((function(){H.devtools&&le&&le.emit("init",Kn)}),0)},function(e,t,n){"use strict";var r="object"==typeof document&&document.all;e.exports=void 0===r&&void 0!==r?function(e){return"function"==typeof e||e===r}:function(e){return"function"==typeof e}},function(e,t,n){"use strict";function r(e,t,n,r,i,o,a,l){var s,c="function"==typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=n,c._compiled=!0),r&&(c.functional=!0),o&&(c._scopeId="data-v-"+o),a?(s=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},c._ssrRegister=s):i&&(s=l?function(){i.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:i),s)if(c.functional){c._injectStyles=s;var u=c.render;c.render=function(e,t){return s.call(t),u(e,t)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,s):[s]}return{exports:e,options:c}}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";var r=n(12),i=String,o=TypeError;e.exports=function(e){if(r(e))return e;throw new o(i(e)+" is not an object")}},function(e,t,n){"use strict";var r=function(e){return e&&e.Math===Math&&e};e.exports=r("object"==typeof globalThis&&globalThis)||r("object"==typeof window&&window)||r("object"==typeof self&&self)||r("object"==typeof global&&global)||r("object"==typeof this&&this)||function(){return this}()||Function("return this")()},function(e,t,n){"use strict";e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,n){"use strict";var r=n(7);e.exports=!r((function(){return 7!==Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(e,t,n){"use strict";var r=n(31),i=Function.prototype,o=i.call,a=r&&i.bind.bind(o,o);e.exports=r?a:function(e){return function(){return o.apply(e,arguments)}}},function(e,t,n){"use strict";n(129)},function(e,t,n){"use strict";var r=n(3),i=n(52),o=TypeError;e.exports=function(e){if(r(e))return e;throw new o(i(e)+" is not a function")}},function(e,t,n){"use strict";var r=n(3);e.exports=function(e){return"object"==typeof e?null!==e:r(e)}},function(e,t,n){"use strict";var r=n(9),i=n(37),o=r({}.hasOwnProperty);e.exports=Object.hasOwn||function(e,t){return o(i(e),t)}},function(e,t,n){"use strict";var r=n(6),i=n(71).f,o=n(24),a=n(55),l=n(54),s=n(86),c=n(143);e.exports=function(e,t){var n,u,f,p,d,h=e.target,v=e.global,m=e.stat;if(n=v?r:m?r[h]||l(h,{}):r[h]&&r[h].prototype)for(u in t){if(p=t[u],f=e.dontCallGetSet?(d=i(n,u))&&d.value:n[u],!c(v?u:h+(m?".":"#")+u,e.forced)&&void 0!==f){if(typeof p==typeof f)continue;s(p,f)}(e.sham||f&&f.sham)&&o(p,"sham",!0),a(n,u,p,e)}}},function(e,t){var n=Array.isArray;e.exports=n},function(e,t,n){"use strict";var r=n(31),i=Function.prototype.call;e.exports=r?i.bind(i):function(){return i.apply(i,arguments)}},function(e,t,n){var r=n(99),i="object"==typeof self&&self&&self.Object===Object&&self,o=r||i||Function("return this")();e.exports=o},function(e,t,n){"use strict";var r=n(6),i=n(79),o=n(13),a=n(80),l=n(76),s=n(75),c=r.Symbol,u=i("wks"),f=s?c.for||c:c&&c.withoutSetter||a;e.exports=function(e){return o(u,e)||(u[e]=l&&o(c,e)?c[e]:f("Symbol."+e)),u[e]}},function(e,t,n){"use strict";n(151)},function(e,t,n){"use strict";var r=n(8),i=n(81),o=n(83),a=n(5),l=n(73),s=TypeError,c=Object.defineProperty,u=Object.getOwnPropertyDescriptor;t.f=r?o?function(e,t,n){if(a(e),t=l(t),a(n),"function"==typeof e&&"prototype"===t&&"value"in n&&"writable"in n&&!n.writable){var r=u(e,t);r&&r.writable&&(e[t]=n.value,n={configurable:"configurable"in n?n.configurable:r.configurable,enumerable:"enumerable"in n?n.enumerable:r.enumerable,writable:!1})}return c(e,t,n)}:c:function(e,t,n){if(a(e),t=l(t),a(n),i)try{return c(e,t,n)}catch(e){}if("get"in n||"set"in n)throw new s("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},function(e,t,n){var r=n(204),i=n(207);e.exports=function(e,t){var n=i(e,t);return r(n)?n:void 0}},function(e,t){e.exports=function(e){return null!=e&&"object"==typeof e}},function(e,t,n){"use strict";e.exports=!1},function(e,t,n){"use strict";var r=n(8),i=n(20),o=n(32);e.exports=r?function(e,t,n){return i.f(e,t,o(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){"use strict";var r=n(2);t.a=new r.a},function(e,t,n){"use strict";e.exports=function(e){return{iterator:e,next:e.next,done:!1}}},function(e,t,n){var r=n(29),i=n(189),o=n(190),a=r?r.toStringTag:void 0;e.exports=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":a&&a in Object(e)?i(e):o(e)}},function(e,t,n){"use strict";var r=n(9),i=r({}.toString),o=r("".slice);e.exports=function(e){return o(i(e),8,-1)}},function(e,t,n){var r=n(17).Symbol;e.exports=r},function(e,t,n){"use strict";n(154)},function(e,t,n){"use strict";var r=n(7);e.exports=!r((function(){var e=function(){}.bind();return"function"!=typeof e||e.hasOwnProperty("prototype")}))},function(e,t,n){"use strict";e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,n){"use strict";var r=n(72),i=n(50);e.exports=function(e){return r(i(e))}},function(e,t,n){"use strict";var r=n(6),i=n(3),o=function(e){return i(e)?e:void 0};e.exports=function(e,t){return arguments.length<2?o(r[e]):r[e]&&r[e][t]}},function(e,t,n){"use strict";var r=n(9);e.exports=r({}.isPrototypeOf)},function(e,t,n){"use strict";var r=n(11),i=n(51);e.exports=function(e,t){var n=e[t];return i(n)?void 0:r(n)}},function(e,t,n){"use strict";var r=n(50),i=Object;e.exports=function(e){return i(r(e))}},function(e,t,n){"use strict";var r=n(141);e.exports=function(e){return r(e.length)}},function(e,t,n){var r=n(194),i=n(195),o=n(196),a=n(197),l=n(198);function s(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}s.prototype.clear=r,s.prototype.delete=i,s.prototype.get=o,s.prototype.has=a,s.prototype.set=l,e.exports=s},function(e,t,n){var r=n(101);e.exports=function(e,t){for(var n=e.length;n--;)if(r(e[n][0],t))return n;return-1}},function(e,t,n){var r=n(21)(Object,"create");e.exports=r},function(e,t,n){var r=n(216);e.exports=function(e,t){var n=e.__data__;return r(t)?n["string"==typeof t?"string":"hash"]:n.map}},function(e,t,n){var r=n(67);e.exports=function(e){if("string"==typeof e||r(e))return e;var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}},function(e,t,n){var r=n(117);e.exports=function(e,t,n){var i=null==e?void 0:r(e,t);return void 0===i?n:i}},function(e,t){var n=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,o=/^0o[0-7]+$/i,a=parseInt,l="object"==typeof global&&global&&global.Object===Object&&global,s="object"==typeof self&&self&&self.Object===Object&&self,c=l||s||Function("return this")(),u=Object.prototype.toString,f=Math.max,p=Math.min,d=function(){return c.Date.now()};function h(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function v(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==u.call(e)}(e))return NaN;if(h(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=h(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(n,"");var l=i.test(e);return l||o.test(e)?a(e.slice(2),l?2:8):r.test(e)?NaN:+e}e.exports=function(e,t,n){var r,i,o,a,l,s,c=0,u=!1,m=!1,g=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function b(t){var n=r,o=i;return r=i=void 0,c=t,a=e.apply(o,n)}function y(e){return c=e,l=setTimeout(w,t),u?b(e):a}function _(e){var n=e-s;return void 0===s||n>=t||n<0||m&&e-c>=o}function w(){var e=d();if(_(e))return x(e);l=setTimeout(w,function(e){var n=t-(e-s);return m?p(n,o-(e-c)):n}(e))}function x(e){return l=void 0,g&&r?b(e):(r=i=void 0,a)}function S(){var e=d(),n=_(e);if(r=arguments,i=this,s=e,n){if(void 0===l)return y(s);if(m)return l=setTimeout(w,t),b(s)}return void 0===l&&(l=setTimeout(w,t)),a}return t=v(t)||0,h(n)&&(u=!!n.leading,o=(m="maxWait"in n)?f(v(n.maxWait)||0,t):o,g="trailing"in n?!!n.trailing:g),S.cancel=function(){void 0!==l&&clearTimeout(l),c=0,r=s=i=l=void 0},S.flush=function(){return void 0===l?a:x(d())},S}},function(e,t,n){var r,i;
-/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
- * @license MIT */void 0===(i="function"==typeof(r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function i(e,t,n){return e<t?t:e>n?n:e}function o(e){return 100*(-1+e)}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=i(e,r.minimum,1),n.status=1===e?null:e;var s=n.render(!t),c=s.querySelector(r.barSelector),u=r.speed,f=r.easing;return s.offsetWidth,a((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),l(c,function(e,t,n){var i;return(i="translate3d"===r.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,i}(e,u,f)),1===e?(l(s,{transition:"none",opacity:1}),s.offsetWidth,setTimeout((function(){l(s,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*i(Math.random()*t,.1,.95)),t=i(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");c(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var i,a=t.querySelector(r.barSelector),s=e?"-100":o(n.status||0),u=document.querySelector(r.parent);return l(a,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),r.showSpinner||(i=t.querySelector(r.spinnerSelector))&&p(i),u!=document.body&&c(u,"nprogress-custom-parent"),u.appendChild(t),t},n.remove=function(){u(document.documentElement,"nprogress-busy"),u(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&p(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var a=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),l=function(){var e=["Webkit","O","Moz","ms"],t={};function n(n){return n=n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()})),t[n]||(t[n]=function(t){var n=document.body.style;if(t in n)return t;for(var r,i=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);i--;)if((r=e[i]+o)in n)return r;return t}(n))}function r(e,t,r){t=n(t),e.style[t]=r}return function(e,t){var n,i,o=arguments;if(2==o.length)for(n in t)void 0!==(i=t[n])&&t.hasOwnProperty(n)&&r(e,n,i);else r(e,o[1],o[2])}}();function s(e,t){return("string"==typeof e?e:f(e)).indexOf(" "+t+" ")>=0}function c(e,t){var n=f(e),r=n+t;s(n,t)||(e.className=r.substring(1))}function u(e,t){var n,r=f(e);s(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function f(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function p(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n})?r.call(t,n,t,e):r)||(e.exports=i)},function(e,t,n){"use strict";n(279)},function(e,t,n){"use strict";n(161)},function(e,t,n){"use strict";var r=n(162),i=n(16),o=n(5),a=n(52),l=n(164),s=n(38),c=n(35),u=n(165),f=n(95),p=n(59),d=TypeError,h=function(e,t){this.stopped=e,this.result=t},v=h.prototype;e.exports=function(e,t,n){var m,g,b,y,_,w,x,S=n&&n.that,O=!(!n||!n.AS_ENTRIES),j=!(!n||!n.IS_RECORD),k=!(!n||!n.IS_ITERATOR),P=!(!n||!n.INTERRUPTED),E=r(t,S),C=function(e){return m&&p(m,"normal",e),new h(!0,e)},I=function(e){return O?(o(e),P?E(e[0],e[1],C):E(e[0],e[1])):P?E(e,C):E(e)};if(j)m=e.iterator;else if(k)m=e;else{if(!(g=f(e)))throw new d(a(e)+" is not iterable");if(l(g)){for(b=0,y=s(e);y>b;b++)if((_=I(e[b]))&&c(v,_))return _;return new h(!1)}m=u(e,g)}for(w=j?e.next:m.next;!(x=i(w,m)).done;){try{_=I(x.value)}catch(e){p(m,"throw",e)}if("object"==typeof _&&_&&c(v,_))return _}return new h(!1)}},function(e,t,n){"use strict";var r=n(51),i=TypeError;e.exports=function(e){if(r(e))throw new i("Can't call method on "+e);return e}},function(e,t,n){"use strict";e.exports=function(e){return null==e}},function(e,t,n){"use strict";var r=String;e.exports=function(e){try{return r(e)}catch(e){return"Object"}}},function(e,t,n){"use strict";var r=n(23),i=n(6),o=n(54),a=e.exports=i["__core-js_shared__"]||o("__core-js_shared__",{});(a.versions||(a.versions=[])).push({version:"3.39.0",mode:r?"pure":"global",copyright:"© 2014-2024 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.39.0/LICENSE",source:"https://github.com/zloirock/core-js"})},function(e,t,n){"use strict";var r=n(6),i=Object.defineProperty;e.exports=function(e,t){try{i(r,e,{value:t,configurable:!0,writable:!0})}catch(n){r[e]=t}return t}},function(e,t,n){"use strict";var r=n(3),i=n(20),o=n(84),a=n(54);e.exports=function(e,t,n,l){l||(l={});var s=l.enumerable,c=void 0!==l.name?l.name:t;if(r(n)&&o(n,c,l),l.global)s?e[t]=n:a(t,n);else{try{l.unsafe?e[t]&&(s=!0):delete e[t]}catch(e){}s?e[t]=n:i.f(e,t,{value:n,enumerable:!1,configurable:!l.nonConfigurable,writable:!l.nonWritable})}return e}},function(e,t,n){"use strict";var r=n(79),i=n(80),o=r("keys");e.exports=function(e){return o[e]||(o[e]=i(e))}},function(e,t,n){"use strict";e.exports={}},function(e,t,n){"use strict";e.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(e,t,n){"use strict";var r=n(16),i=n(5),o=n(36);e.exports=function(e,t,n){var a,l;i(e);try{if(!(a=o(e,"return"))){if("throw"===t)throw n;return n}a=r(a,e)}catch(e){l=!0,a=e}if("throw"===t)throw n;if(l)throw a;return i(a),n}},function(e,t,n){var r=n(188),i=n(22),o=Object.prototype,a=o.hasOwnProperty,l=o.propertyIsEnumerable,s=r(function(){return arguments}())?r:function(e){return i(e)&&a.call(e,"callee")&&!l.call(e,"callee")};e.exports=s},function(e,t,n){var r=n(21)(n(17),"Map");e.exports=r},function(e,t){e.exports=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},function(e,t,n){var r=n(208),i=n(215),o=n(217),a=n(218),l=n(219);function s(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}s.prototype.clear=r,s.prototype.delete=i,s.prototype.get=o,s.prototype.has=a,s.prototype.set=l,e.exports=s},function(e,t){e.exports=function(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}},function(e,t){e.exports=function(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=9007199254740991}},function(e,t,n){var r=n(15),i=n(67),o=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,a=/^\w*$/;e.exports=function(e,t){if(r(e))return!1;var n=typeof e;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=e&&!i(e))||(a.test(e)||!o.test(e)||null!=t&&e in Object(t))}},function(e,t,n){var r=n(27),i=n(22);e.exports=function(e){return"symbol"==typeof e||i(e)&&"[object Symbol]"==r(e)}},function(e,t){e.exports=function(e){return e}},function(e,t,n){"use strict";var r=n(14),i=n(37),o=n(38),a=n(183),l=n(185);r({target:"Array",proto:!0,arity:1,forced:n(7)((function(){return 4294967297!==[].push.call({length:4294967296},1)}))||!function(){try{Object.defineProperty([],"length",{writable:!1}).push()}catch(e){return e instanceof TypeError}}()},{push:function(e){var t=i(this),n=o(t),r=arguments.length;l(n+r);for(var s=0;s<r;s++)t[n]=arguments[s],n++;return a(t,n),n}})},function(e,t,n){"use strict";n.r(t);n(10),n(48),n(69),n(19),n(30),n(47);var r=n(44),i=n.n(r),o=(e,t,n=null)=>{let r=i()(t,"title","");return i()(t,"frontmatter.tags")&&(r+=" "+t.frontmatter.tags.join(" ")),n&&(r+=" "+n),a(e,r)};const a=(e,t)=>{const n=e=>e.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),r=new RegExp("[^\0-]"),i=e.split(/\s+/g).map(e=>e.trim()).filter(e=>!!e);if(r.test(e))return i.some(e=>t.toLowerCase().indexOf(e)>-1);{const r=e.endsWith(" ");return new RegExp(i.map((e,t)=>i.length!==t+1||r?`(?=.*\\b${n(e)}\\b)`:`(?=.*\\b${n(e)})`).join("")+".+","gi").test(t)}};var l={name:"SearchBox",data:()=>({query:"",focused:!1,focusIndex:0,placeholder:void 0}),computed:{showSuggestions(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions(){const e=this.query.trim().toLowerCase();if(!e)return;const{pages:t}=this.$site,n=this.$site.themeConfig.searchMaxSuggestions||10,r=this.$localePath,i=[];for(let a=0;a<t.length&&!(i.length>=n);a++){const l=t[a];if(this.getPageLocalePath(l)===r&&this.isSearchable(l))if(o(e,l))i.push(l);else if(l.headers)for(let t=0;t<l.headers.length&&!(i.length>=n);t++){const n=l.headers[t];n.title&&o(e,l,n.title)&&i.push(Object.assign({},l,{path:l.path+"#"+n.slug,header:n}))}}return i},alignRight(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath(e){for(const t in this.$site.locales||{})if("/"!==t&&0===e.path.indexOf(t))return t;return"/"},isSearchable(e){let t=null;return null===t||(t=Array.isArray(t)?t:new Array(t),t.filter(t=>e.path.match(t)).length>0)},onHotkey(e){e.srcElement===document.body&&["s","/"].includes(e.key)&&(this.$refs.input.focus(),e.preventDefault())},onUp(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown(){this.showSuggestions&&(this.focusIndex<this.suggestions.length-1?this.focusIndex++:this.focusIndex=0)},go(e){this.showSuggestions&&(this.$router.push(this.suggestions[e].path),this.query="",this.focusIndex=0)},focus(e){this.focusIndex=e},unfocus(){this.focusIndex=-1}}},s=(n(280),n(4)),c={components:{SearchBox:Object(s.a)(l,(function(){var e=this,t=e._self._c;return t("div",{staticClass:"search-box"},[t("input",{ref:"input",class:{focused:e.focused},attrs:{"aria-label":"Search",placeholder:e.placeholder,autocomplete:"off",spellcheck:"false"},domProps:{value:e.query},on:{input:function(t){e.query=t.target.value},focus:function(t){e.focused=!0},blur:function(t){e.focused=!1},keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.go(e.focusIndex)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:e.onUp.apply(null,arguments)},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:e.onDown.apply(null,arguments)}]}}),e._v(" "),e.showSuggestions?t("ul",{staticClass:"suggestions",class:{"align-right":e.alignRight},on:{mouseleave:e.unfocus}},e._l(e.suggestions,(function(n,r){return t("li",{key:r,staticClass:"suggestion",class:{focused:r===e.focusIndex},on:{mousedown:function(t){return e.go(r)},mouseenter:function(t){return e.focus(r)}}},[t("a",{attrs:{href:n.path},on:{click:function(e){e.preventDefault()}}},[t("span",{staticClass:"page-title"},[e._v(e._s(n.title||n.path))]),e._v(" "),n.header?t("span",{staticClass:"header"},[e._v("> "+e._s(n.header.title))]):e._e()])])})),0):e._e()])}),[],!1,null,null,null).exports,AlgoliaSearchBox:n(126).default},data:()=>({smallMode:!1,isSidebarOpen:!1,selectedNavIndex:null,list:[{title:"指南",link:"/guide/basic/start.html"},{title:"API",link:"/api/"},{title:"文章",link:"/articles/"},{title:"更新记录",link:"https://github.com/didi/mpx/releases",target:"_blank"},{title:"GitHub",link:"https://github.com/didi/mpx",target:"_blank"}]}),computed:{algolia(){return this.$themeLocaleConfig.algolia||this.$site.themeConfig.algolia||{}},isAlgoliaSearch(){return this.algolia&&this.algolia.apiKey&&this.algolia.indexName},calculateStyle(){return"/"!==this.$page.path?"":this.isSidebarOpen?"transform: translateY(0);":""}},mounted(){const e=()=>{document.documentElement.clientWidth<719?this.smallMode=!0:this.smallMode=!1};e(),window.addEventListener("resize",e,!1),this.$router.afterEach(()=>{this.isSidebarOpen=!1});const t=this.$route.path;this.list.forEach((e,n)=>{e.link!==t||e.link.includes("https://")||(this.selectedNavIndex=n)})},methods:{toggleSidebar(e){this.isSidebarOpen="boolean"==typeof e?e:!this.isSidebarOpen,"/"!==this.$page.path&&this.$emit("toggle-sidebar")}}},u=(n(282),Object(s.a)(c,(function(){var e=this,t=e._self._c;return t("header",{staticClass:"header"},[e.smallMode?t("div",{staticClass:"header-menu"},[e._m(0),e._v(" "),t("div",{staticStyle:{display:"flex","align-items":"center"}},[e.isAlgoliaSearch?t("AlgoliaSearchBox",{attrs:{options:e.algolia}}):e._e(),e._v(" "),t("span",{staticClass:"header-menu-icon"},[t("img",{attrs:{height:"14",src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/y_icon_liebiao.png",alt:"menu"},on:{click:e.toggleSidebar}})])],1)]):e._e(),e._v(" "),t("div",{staticClass:"head-container",style:e.calculateStyle},[e.smallMode?e._e():t("a",{attrs:{href:"/"}},[t("div",{staticClass:"logo"},[e._v("mpx")])]),e._v(" "),t("div",{staticClass:"row"},[e.smallMode?e._e():t("div",{staticClass:"header__line"}),e._v(" "),e._l(e.list,(function(n,r){return t("nav",{key:r,class:["nav"]},[t("a",{staticClass:"nav-link",class:[e.selectedNavIndex===r?"router-link-active":""],attrs:{href:n.link,target:n.target}},[e._v("\n          "+e._s(n.title)+"\n          "),e.smallMode?t("img",{attrs:{width:"16",src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/y_icon_jinru.png",alt:"arrow"}}):e._e()])])})),e._v(" "),e.smallMode?e._e():t("div",{staticClass:"searchBox-wrapper"},[t("div",{staticClass:"searchBox"},[e.isAlgoliaSearch?t("AlgoliaSearchBox",{attrs:{options:e.algolia}}):e._e()],1)])],2)]),e._v(" "),e.isSidebarOpen?t("div",{staticClass:"head-mask",on:{click:e.toggleSidebar}}):e._e()])}),[function(){var e=this._self._c;return e("a",{attrs:{href:"/"}},[e("img",{staticStyle:{"vertical-align":"middle"},attrs:{height:"20",src:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/logo_color.png",alt:"logo"}})])}],!1,null,"3ad594c3",null));t.default=u.exports},function(e,t,n){"use strict";var r=n(8),i=n(16),o=n(130),a=n(32),l=n(33),s=n(73),c=n(13),u=n(81),f=Object.getOwnPropertyDescriptor;t.f=r?f:function(e,t){if(e=l(e),t=s(t),u)try{return f(e,t)}catch(e){}if(c(e,t))return a(!i(o.f,e,t),e[t])}},function(e,t,n){"use strict";var r=n(9),i=n(7),o=n(28),a=Object,l=r("".split);e.exports=i((function(){return!a("z").propertyIsEnumerable(0)}))?function(e){return"String"===o(e)?l(e,""):a(e)}:a},function(e,t,n){"use strict";var r=n(131),i=n(74);e.exports=function(e){var t=r(e,"string");return i(t)?t:t+""}},function(e,t,n){"use strict";var r=n(34),i=n(3),o=n(35),a=n(75),l=Object;e.exports=a?function(e){return"symbol"==typeof e}:function(e){var t=r("Symbol");return i(t)&&o(t.prototype,l(e))}},function(e,t,n){"use strict";var r=n(76);e.exports=r&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},function(e,t,n){"use strict";var r=n(77),i=n(7),o=n(6).String;e.exports=!!Object.getOwnPropertySymbols&&!i((function(){var e=Symbol("symbol detection");return!o(e)||!(Object(e)instanceof Symbol)||!Symbol.sham&&r&&r<41}))},function(e,t,n){"use strict";var r,i,o=n(6),a=n(78),l=o.process,s=o.Deno,c=l&&l.versions||s&&s.version,u=c&&c.v8;u&&(i=(r=u.split("."))[0]>0&&r[0]<4?1:+(r[0]+r[1])),!i&&a&&(!(r=a.match(/Edge\/(\d+)/))||r[1]>=74)&&(r=a.match(/Chrome\/(\d+)/))&&(i=+r[1]),e.exports=i},function(e,t,n){"use strict";var r=n(6).navigator,i=r&&r.userAgent;e.exports=i?String(i):""},function(e,t,n){"use strict";var r=n(53);e.exports=function(e,t){return r[e]||(r[e]=t||{})}},function(e,t,n){"use strict";var r=n(9),i=0,o=Math.random(),a=r(1..toString);e.exports=function(e){return"Symbol("+(void 0===e?"":e)+")_"+a(++i+o,36)}},function(e,t,n){"use strict";var r=n(8),i=n(7),o=n(82);e.exports=!r&&!i((function(){return 7!==Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a}))},function(e,t,n){"use strict";var r=n(6),i=n(12),o=r.document,a=i(o)&&i(o.createElement);e.exports=function(e){return a?o.createElement(e):{}}},function(e,t,n){"use strict";var r=n(8),i=n(7);e.exports=r&&i((function(){return 42!==Object.defineProperty((function(){}),"prototype",{value:42,writable:!1}).prototype}))},function(e,t,n){"use strict";var r=n(9),i=n(7),o=n(3),a=n(13),l=n(8),s=n(133).CONFIGURABLE,c=n(134),u=n(85),f=u.enforce,p=u.get,d=String,h=Object.defineProperty,v=r("".slice),m=r("".replace),g=r([].join),b=l&&!i((function(){return 8!==h((function(){}),"length",{value:8}).length})),y=String(String).split("String"),_=e.exports=function(e,t,n){"Symbol("===v(d(t),0,7)&&(t="["+m(d(t),/^Symbol\(([^)]*)\).*$/,"$1")+"]"),n&&n.getter&&(t="get "+t),n&&n.setter&&(t="set "+t),(!a(e,"name")||s&&e.name!==t)&&(l?h(e,"name",{value:t,configurable:!0}):e.name=t),b&&n&&a(n,"arity")&&e.length!==n.arity&&h(e,"length",{value:n.arity});try{n&&a(n,"constructor")&&n.constructor?l&&h(e,"prototype",{writable:!1}):e.prototype&&(e.prototype=void 0)}catch(e){}var r=f(e);return a(r,"source")||(r.source=g(y,"string"==typeof t?t:"")),e};Function.prototype.toString=_((function(){return o(this)&&p(this).source||c(this)}),"toString")},function(e,t,n){"use strict";var r,i,o,a=n(135),l=n(6),s=n(12),c=n(24),u=n(13),f=n(53),p=n(56),d=n(57),h=l.TypeError,v=l.WeakMap;if(a||f.state){var m=f.state||(f.state=new v);m.get=m.get,m.has=m.has,m.set=m.set,r=function(e,t){if(m.has(e))throw new h("Object already initialized");return t.facade=e,m.set(e,t),t},i=function(e){return m.get(e)||{}},o=function(e){return m.has(e)}}else{var g=p("state");d[g]=!0,r=function(e,t){if(u(e,g))throw new h("Object already initialized");return t.facade=e,c(e,g,t),t},i=function(e){return u(e,g)?e[g]:{}},o=function(e){return u(e,g)}}e.exports={set:r,get:i,has:o,enforce:function(e){return o(e)?i(e):r(e,{})},getterFor:function(e){return function(t){var n;if(!s(t)||(n=i(t)).type!==e)throw new h("Incompatible receiver, "+e+" required");return n}}}},function(e,t,n){"use strict";var r=n(13),i=n(136),o=n(71),a=n(20);e.exports=function(e,t,n){for(var l=i(t),s=a.f,c=o.f,u=0;u<l.length;u++){var f=l[u];r(e,f)||n&&r(n,f)||s(e,f,c(t,f))}}},function(e,t,n){"use strict";var r=n(9),i=n(13),o=n(33),a=n(138).indexOf,l=n(57),s=r([].push);e.exports=function(e,t){var n,r=o(e),c=0,u=[];for(n in r)!i(l,n)&&i(r,n)&&s(u,n);for(;t.length>c;)i(r,n=t[c++])&&(~a(u,n)||s(u,n));return u}},function(e,t,n){"use strict";var r=n(140);e.exports=function(e){var t=+e;return t!=t||0===t?0:r(t)}},function(e,t,n){"use strict";var r=n(13),i=n(3),o=n(37),a=n(56),l=n(145),s=a("IE_PROTO"),c=Object,u=c.prototype;e.exports=l?c.getPrototypeOf:function(e){var t=o(e);if(r(t,s))return t[s];var n=t.constructor;return i(n)&&t instanceof n?n.prototype:t instanceof c?u:null}},function(e,t,n){"use strict";var r,i,o,a=n(7),l=n(3),s=n(12),c=n(91),u=n(89),f=n(55),p=n(18),d=n(23),h=p("iterator"),v=!1;[].keys&&("next"in(o=[].keys())?(i=u(u(o)))!==Object.prototype&&(r=i):v=!0),!s(r)||a((function(){var e={};return r[h].call(e)!==e}))?r={}:d&&(r=c(r)),l(r[h])||f(r,h,(function(){return this})),e.exports={IteratorPrototype:r,BUGGY_SAFARI_ITERATORS:v}},function(e,t,n){"use strict";var r,i=n(5),o=n(148),a=n(58),l=n(57),s=n(150),c=n(82),u=n(56),f=u("IE_PROTO"),p=function(){},d=function(e){return"<script>"+e+"<\/script>"},h=function(e){e.write(d("")),e.close();var t=e.parentWindow.Object;return e=null,t},v=function(){try{r=new ActiveXObject("htmlfile")}catch(e){}var e,t;v="undefined"!=typeof document?document.domain&&r?h(r):((t=c("iframe")).style.display="none",s.appendChild(t),t.src=String("javascript:"),(e=t.contentWindow.document).open(),e.write(d("document.F=Object")),e.close(),e.F):h(r);for(var n=a.length;n--;)delete v.prototype[a[n]];return v()};l[f]=!0,e.exports=Object.create||function(e,t){var n;return null!==e?(p.prototype=i(e),n=new p,p.prototype=null,n[f]=e):n=v(),void 0===t?n:o.f(n,t)}},function(e,t,n){"use strict";var r=n(16),i=n(91),o=n(24),a=n(152),l=n(18),s=n(85),c=n(36),u=n(90).IteratorPrototype,f=n(153),p=n(59),d=l("toStringTag"),h=s.set,v=function(e){var t=s.getterFor(e?"WrapForValidIterator":"IteratorHelper");return a(i(u),{next:function(){var n=t(this);if(e)return n.nextHandler();try{var r=n.done?void 0:n.nextHandler();return f(r,n.done)}catch(e){throw n.done=!0,e}},return:function(){var n=t(this),i=n.iterator;if(n.done=!0,e){var o=c(i,"return");return o?r(o,i):f(void 0,!0)}if(n.inner)try{p(n.inner.iterator,"normal")}catch(e){return p(i,"throw",e)}return i&&p(i,"normal"),f(void 0,!0)}})},m=v(!0),g=v(!1);o(g,d,"Iterator Helper"),e.exports=function(e,t){var n=function(n,r){r?(r.iterator=n.iterator,r.next=n.next):r=n,r.type=t?"WrapForValidIterator":"IteratorHelper",r.nextHandler=e,r.counter=0,r.done=!1,h(this,r)};return n.prototype=t?m:g,n}},function(e,t,n){"use strict";var r=n(5),i=n(59);e.exports=function(e,t,n,o){try{return o?t(r(n)[0],n[1]):t(n)}catch(t){i(e,"throw",t)}}},function(e,t,n){"use strict";e.exports={}},function(e,t,n){"use strict";var r=n(96),i=n(36),o=n(51),a=n(94),l=n(18)("iterator");e.exports=function(e){if(!o(e))return i(e,l)||i(e,"@@iterator")||a[r(e)]}},function(e,t,n){"use strict";var r=n(166),i=n(3),o=n(28),a=n(18)("toStringTag"),l=Object,s="Arguments"===o(function(){return arguments}());e.exports=r?o:function(e){var t,n,r;return void 0===e?"Undefined":null===e?"Null":"string"==typeof(n=function(e,t){try{return e[t]}catch(e){}}(t=l(e),a))?n:s?o(t):"Object"===(r=o(t))&&i(t.callee)?"Arguments":r}},function(e,t,n){"use strict";var r=n(172),i=n(12),o=n(50),a=n(173);e.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var e,t=!1,n={};try{(e=r(Object.prototype,"__proto__","set"))(n,[]),t=n instanceof Array}catch(e){}return function(n,r){return o(n),a(r),i(n)?(t?e(n,r):n.__proto__=r,n):n}}():void 0)},function(e,t){e.exports=function(e,t){for(var n=-1,r=t.length,i=e.length;++n<r;)e[i+n]=t[n];return e}},function(e,t){var n="object"==typeof global&&global&&global.Object===Object&&global;e.exports=n},function(e,t,n){var r=n(39),i=n(199),o=n(200),a=n(201),l=n(202),s=n(203);function c(e){var t=this.__data__=new r(e);this.size=t.size}c.prototype.clear=i,c.prototype.delete=o,c.prototype.get=a,c.prototype.has=l,c.prototype.set=s,e.exports=c},function(e,t){e.exports=function(e,t){return e===t||e!=e&&t!=t}},function(e,t,n){var r=n(27),i=n(62);e.exports=function(e){if(!i(e))return!1;var t=r(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},function(e,t){var n=Function.prototype.toString;e.exports=function(e){if(null!=e){try{return n.call(e)}catch(e){}try{return e+""}catch(e){}}return""}},function(e,t,n){var r=n(220),i=n(22);e.exports=function e(t,n,o,a,l){return t===n||(null==t||null==n||!i(t)&&!i(n)?t!=t&&n!=n:r(t,n,o,a,e,l))}},function(e,t,n){var r=n(106),i=n(223),o=n(107);e.exports=function(e,t,n,a,l,s){var c=1&n,u=e.length,f=t.length;if(u!=f&&!(c&&f>u))return!1;var p=s.get(e),d=s.get(t);if(p&&d)return p==t&&d==e;var h=-1,v=!0,m=2&n?new r:void 0;for(s.set(e,t),s.set(t,e);++h<u;){var g=e[h],b=t[h];if(a)var y=c?a(b,g,h,t,e,s):a(g,b,h,e,t,s);if(void 0!==y){if(y)continue;v=!1;break}if(m){if(!i(t,(function(e,t){if(!o(m,t)&&(g===e||l(g,e,n,a,s)))return m.push(t)}))){v=!1;break}}else if(g!==b&&!l(g,b,n,a,s)){v=!1;break}}return s.delete(e),s.delete(t),v}},function(e,t,n){var r=n(63),i=n(221),o=n(222);function a(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new r;++t<n;)this.add(e[t])}a.prototype.add=a.prototype.push=i,a.prototype.has=o,e.exports=a},function(e,t){e.exports=function(e,t){return e.has(t)}},function(e,t,n){var r=n(233),i=n(239),o=n(113);e.exports=function(e){return o(e)?r(e):i(e)}},function(e,t,n){(function(e){var r=n(17),i=n(235),o=t&&!t.nodeType&&t,a=o&&"object"==typeof e&&e&&!e.nodeType&&e,l=a&&a.exports===o?r.Buffer:void 0,s=(l?l.isBuffer:void 0)||i;e.exports=s}).call(this,n(110)(e))},function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e}},function(e,t){var n=/^(?:0|[1-9]\d*)$/;e.exports=function(e,t){var r=typeof e;return!!(t=null==t?9007199254740991:t)&&("number"==r||"symbol"!=r&&n.test(e))&&e>-1&&e%1==0&&e<t}},function(e,t,n){var r=n(236),i=n(237),o=n(238),a=o&&o.isTypedArray,l=a?i(a):r;e.exports=l},function(e,t,n){var r=n(102),i=n(65);e.exports=function(e){return null!=e&&i(e.length)&&!r(e)}},function(e,t,n){var r=n(21)(n(17),"Set");e.exports=r},function(e,t,n){var r=n(62);e.exports=function(e){return e==e&&!r(e)}},function(e,t){e.exports=function(e,t){return function(n){return null!=n&&(n[e]===t&&(void 0!==t||e in Object(n)))}}},function(e,t,n){var r=n(118),i=n(43);e.exports=function(e,t){for(var n=0,o=(t=r(t,e)).length;null!=e&&n<o;)e=e[i(t[n++])];return n&&n==o?e:void 0}},function(e,t,n){var r=n(15),i=n(66),o=n(249),a=n(252);e.exports=function(e,t){return r(e)?e:i(e,t)?[e]:o(a(e))}},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){var r=n(186),i=n(191),o=n(261),a=n(269),l=n(278),s=n(127),c=o((function(e){var t=s(e);return l(t)&&(t=void 0),a(r(e,1,l,!0),i(t,2))}));e.exports=c},function(e,t,n){"use strict";
-/*!
- * escape-html
- * Copyright(c) 2012-2013 TJ Holowaychuk
- * Copyright(c) 2015 Andreas Lubbe
- * Copyright(c) 2015 Tiancheng "Timothy" Gu
- * MIT Licensed
- */var r=/["'&<>]/;e.exports=function(e){var t,n=""+e,i=r.exec(n);if(!i)return n;var o="",a=0,l=0;for(a=i.index;a<n.length;a++){switch(n.charCodeAt(a)){case 34:t="&quot;";break;case 38:t="&amp;";break;case 39:t="&#39;";break;case 60:t="&lt;";break;case 62:t="&gt;";break;default:continue}l!==a&&(o+=n.substring(l,a)),l=a+1,o+=t}return l!==a?o+n.substring(l,a):o}},function(e,t,n){"use strict";n.r(t);
-/*! @docsearch/js 3.8.2 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
-function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(null,arguments)}function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var o,a,l,s,c,u,f,p,d,h,v,m={},g=[],b=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,y=Array.isArray;function _(e,t){for(var n in t)e[n]=t[n];return e}function w(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function x(e,t,n){var r,i,a,l={};for(a in t)"key"==a?r=t[a]:"ref"==a?i=t[a]:l[a]=t[a];if(arguments.length>2&&(l.children=arguments.length>3?o.call(arguments,2):n),"function"==typeof e&&null!=e.defaultProps)for(a in e.defaultProps)void 0===l[a]&&(l[a]=e.defaultProps[a]);return S(e,l,r,i,null)}function S(e,t,n,r,i){var o={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:null==i?++l:i,__i:-1,__u:0};return null==i&&null!=a.vnode&&a.vnode(o),o}function O(e){return e.children}function j(e,t){this.props=e,this.context=t}function k(e,t){if(null==t)return e.__?k(e.__,e.__i+1):null;for(var n;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e)return n.__e;return"function"==typeof e.type?k(e):null}function P(e){var t,n;if(null!=(e=e.__)&&null!=e.__c){for(e.__e=e.__c.base=null,t=0;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e){e.__e=e.__c.base=n.__e;break}return P(e)}}function E(e){(!e.__d&&(e.__d=!0)&&s.push(e)&&!C.__r++||c!==a.debounceRendering)&&((c=a.debounceRendering)||u)(C)}function C(){var e,t,n,r,i,o,l,c;for(s.sort(f);e=s.shift();)e.__d&&(t=s.length,r=void 0,o=(i=(n=e).__v).__e,l=[],c=[],n.__P&&((r=_({},i)).__v=i.__v+1,a.vnode&&a.vnode(r),M(n.__P,r,i,n.__n,n.__P.namespaceURI,32&i.__u?[o]:null,l,null==o?k(i):o,!!(32&i.__u),c),r.__v=i.__v,r.__.__k[r.__i]=r,N(l,r,c),r.__e!=o&&P(r)),s.length>t&&s.sort(f));C.__r=0}function I(e,t,n,r,i,o,a,l,s,c,u){var f,p,d,h,v,b=r&&r.__k||g,_=t.length;for(n.__d=s,function(e,t,n){var r,i,o,a,l,s=t.length,c=n.length,u=c,f=0;for(e.__k=[],r=0;r<s;r++)null!=(i=t[r])&&"boolean"!=typeof i&&"function"!=typeof i?(a=r+f,(i=e.__k[r]="string"==typeof i||"number"==typeof i||"bigint"==typeof i||i.constructor==String?S(null,i,null,null,null):y(i)?S(O,{children:i},null,null,null):void 0===i.constructor&&i.__b>0?S(i.type,i.props,i.key,i.ref?i.ref:null,i.__v):i).__=e,i.__b=e.__b+1,o=null,-1!==(l=i.__i=L(i,n,a,u))&&(u--,(o=n[l])&&(o.__u|=131072)),null==o||null===o.__v?(-1==l&&f--,"function"!=typeof i.type&&(i.__u|=65536)):l!==a&&(l==a-1?f--:l==a+1?f++:(l>a?f--:f++,i.__u|=65536))):i=e.__k[r]=null;if(u)for(r=0;r<c;r++)null!=(o=n[r])&&!(131072&o.__u)&&(o.__e==e.__d&&(e.__d=k(o)),F(o,o))}(n,t,b),s=n.__d,f=0;f<_;f++)null!=(d=n.__k[f])&&(p=-1===d.__i?m:b[d.__i]||m,d.__i=f,M(e,d,p,i,o,a,l,s,c,u),h=d.__e,d.ref&&p.ref!=d.ref&&(p.ref&&q(p.ref,null,d),u.push(d.ref,d.__c||h,d)),null==v&&null!=h&&(v=h),65536&d.__u||p.__k===d.__k?s=A(d,s,e):"function"==typeof d.type&&void 0!==d.__d?s=d.__d:h&&(s=h.nextSibling),d.__d=void 0,d.__u&=-196609);n.__d=s,n.__e=v}function A(e,t,n){var r,i;if("function"==typeof e.type){for(r=e.__k,i=0;r&&i<r.length;i++)r[i]&&(r[i].__=e,t=A(r[i],t,n));return t}e.__e!=t&&(t&&e.type&&!n.contains(t)&&(t=k(e)),n.insertBefore(e.__e,t||null),t=e.__e);do{t=t&&t.nextSibling}while(null!=t&&8===t.nodeType);return t}function T(e,t){return t=t||[],null==e||"boolean"==typeof e||(y(e)?e.some((function(e){T(e,t)})):t.push(e)),t}function L(e,t,n,r){var i=e.key,o=e.type,a=n-1,l=n+1,s=t[n];if(null===s||s&&i==s.key&&o===s.type&&!(131072&s.__u))return n;if(r>(null==s||131072&s.__u?0:1))for(;a>=0||l<t.length;){if(a>=0){if((s=t[a])&&!(131072&s.__u)&&i==s.key&&o===s.type)return a;a--}if(l<t.length){if((s=t[l])&&!(131072&s.__u)&&i==s.key&&o===s.type)return l;l++}}return-1}function D(e,t,n){"-"===t[0]?e.setProperty(t,null==n?"":n):e[t]=null==n?"":"number"!=typeof n||b.test(t)?n:n+"px"}function $(e,t,n,r,i){var o;e:if("style"===t)if("string"==typeof n)e.style.cssText=n;else{if("string"==typeof r&&(e.style.cssText=r=""),r)for(t in r)n&&t in n||D(e.style,t,"");if(n)for(t in n)r&&n[t]===r[t]||D(e.style,t,n[t])}else if("o"===t[0]&&"n"===t[1])o=t!==(t=t.replace(/(PointerCapture)$|Capture$/i,"$1")),t=t.toLowerCase()in e||"onFocusOut"===t||"onFocusIn"===t?t.toLowerCase().slice(2):t.slice(2),e.l||(e.l={}),e.l[t+o]=n,n?r?n.u=r.u:(n.u=p,e.addEventListener(t,o?h:d,o)):e.removeEventListener(t,o?h:d,o);else{if("http://www.w3.org/2000/svg"==i)t=t.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=t&&"height"!=t&&"href"!=t&&"list"!=t&&"form"!=t&&"tabIndex"!=t&&"download"!=t&&"rowSpan"!=t&&"colSpan"!=t&&"role"!=t&&"popover"!=t&&t in e)try{e[t]=null==n?"":n;break e}catch(e){}"function"==typeof n||(null==n||!1===n&&"-"!==t[4]?e.removeAttribute(t):e.setAttribute(t,"popover"==t&&1==n?"":n))}}function R(e){return function(t){if(this.l){var n=this.l[t.type+e];if(null==t.t)t.t=p++;else if(t.t<n.u)return;return n(a.event?a.event(t):t)}}}function M(e,t,n,r,i,o,l,s,c,u){var f,p,d,h,v,m,g,b,w,x,S,k,P,E,C,A,T=t.type;if(void 0!==t.constructor)return null;128&n.__u&&(c=!!(32&n.__u),o=[s=t.__e=n.__e]),(f=a.__b)&&f(t);e:if("function"==typeof T)try{if(b=t.props,w="prototype"in T&&T.prototype.render,x=(f=T.contextType)&&r[f.__c],S=f?x?x.props.value:f.__:r,n.__c?g=(p=t.__c=n.__c).__=p.__E:(w?t.__c=p=new T(b,S):(t.__c=p=new j(b,S),p.constructor=T,p.render=B),x&&x.sub(p),p.props=b,p.state||(p.state={}),p.context=S,p.__n=r,d=p.__d=!0,p.__h=[],p._sb=[]),w&&null==p.__s&&(p.__s=p.state),w&&null!=T.getDerivedStateFromProps&&(p.__s==p.state&&(p.__s=_({},p.__s)),_(p.__s,T.getDerivedStateFromProps(b,p.__s))),h=p.props,v=p.state,p.__v=t,d)w&&null==T.getDerivedStateFromProps&&null!=p.componentWillMount&&p.componentWillMount(),w&&null!=p.componentDidMount&&p.__h.push(p.componentDidMount);else{if(w&&null==T.getDerivedStateFromProps&&b!==h&&null!=p.componentWillReceiveProps&&p.componentWillReceiveProps(b,S),!p.__e&&(null!=p.shouldComponentUpdate&&!1===p.shouldComponentUpdate(b,p.__s,S)||t.__v===n.__v)){for(t.__v!==n.__v&&(p.props=b,p.state=p.__s,p.__d=!1),t.__e=n.__e,t.__k=n.__k,t.__k.some((function(e){e&&(e.__=t)})),k=0;k<p._sb.length;k++)p.__h.push(p._sb[k]);p._sb=[],p.__h.length&&l.push(p);break e}null!=p.componentWillUpdate&&p.componentWillUpdate(b,p.__s,S),w&&null!=p.componentDidUpdate&&p.__h.push((function(){p.componentDidUpdate(h,v,m)}))}if(p.context=S,p.props=b,p.__P=e,p.__e=!1,P=a.__r,E=0,w){for(p.state=p.__s,p.__d=!1,P&&P(t),f=p.render(p.props,p.state,p.context),C=0;C<p._sb.length;C++)p.__h.push(p._sb[C]);p._sb=[]}else do{p.__d=!1,P&&P(t),f=p.render(p.props,p.state,p.context),p.state=p.__s}while(p.__d&&++E<25);p.state=p.__s,null!=p.getChildContext&&(r=_(_({},r),p.getChildContext())),w&&!d&&null!=p.getSnapshotBeforeUpdate&&(m=p.getSnapshotBeforeUpdate(h,v)),I(e,y(A=null!=f&&f.type===O&&null==f.key?f.props.children:f)?A:[A],t,n,r,i,o,l,s,c,u),p.base=t.__e,t.__u&=-161,p.__h.length&&l.push(p),g&&(p.__E=p.__=null)}catch(e){if(t.__v=null,c||null!=o){for(t.__u|=c?160:128;s&&8===s.nodeType&&s.nextSibling;)s=s.nextSibling;o[o.indexOf(s)]=null,t.__e=s}else t.__e=n.__e,t.__k=n.__k;a.__e(e,t,n)}else null==o&&t.__v===n.__v?(t.__k=n.__k,t.__e=n.__e):t.__e=U(n.__e,t,n,r,i,o,l,c,u);(f=a.diffed)&&f(t)}function N(e,t,n){t.__d=void 0;for(var r=0;r<n.length;r++)q(n[r],n[++r],n[++r]);a.__c&&a.__c(t,e),e.some((function(t){try{e=t.__h,t.__h=[],e.some((function(e){e.call(t)}))}catch(e){a.__e(e,t.__v)}}))}function U(e,t,n,r,i,l,s,c,u){var f,p,d,h,v,g,b,_=n.props,x=t.props,S=t.type;if("svg"===S?i="http://www.w3.org/2000/svg":"math"===S?i="http://www.w3.org/1998/Math/MathML":i||(i="http://www.w3.org/1999/xhtml"),null!=l)for(f=0;f<l.length;f++)if((v=l[f])&&"setAttribute"in v==!!S&&(S?v.localName===S:3===v.nodeType)){e=v,l[f]=null;break}if(null==e){if(null===S)return document.createTextNode(x);e=document.createElementNS(i,S,x.is&&x),c&&(a.__m&&a.__m(t,l),c=!1),l=null}if(null===S)_===x||c&&e.data===x||(e.data=x);else{if(l=l&&o.call(e.childNodes),_=n.props||m,!c&&null!=l)for(_={},f=0;f<e.attributes.length;f++)_[(v=e.attributes[f]).name]=v.value;for(f in _)if(v=_[f],"children"==f);else if("dangerouslySetInnerHTML"==f)d=v;else if(!(f in x)){if("value"==f&&"defaultValue"in x||"checked"==f&&"defaultChecked"in x)continue;$(e,f,null,v,i)}for(f in x)v=x[f],"children"==f?h=v:"dangerouslySetInnerHTML"==f?p=v:"value"==f?g=v:"checked"==f?b=v:c&&"function"!=typeof v||_[f]===v||$(e,f,v,_[f],i);if(p)c||d&&(p.__html===d.__html||p.__html===e.innerHTML)||(e.innerHTML=p.__html),t.__k=[];else if(d&&(e.innerHTML=""),I(e,y(h)?h:[h],t,n,r,"foreignObject"===S?"http://www.w3.org/1999/xhtml":i,l,s,l?l[0]:n.__k&&k(n,0),c,u),null!=l)for(f=l.length;f--;)w(l[f]);c||(f="value","progress"===S&&null==g?e.removeAttribute("value"):void 0!==g&&(g!==e[f]||"progress"===S&&!g||"option"===S&&g!==_[f])&&$(e,f,g,_[f],i),f="checked",void 0!==b&&b!==e[f]&&$(e,f,b,_[f],i))}return e}function q(e,t,n){try{if("function"==typeof e){var r="function"==typeof e.__u;r&&e.__u(),r&&null==t||(e.__u=e(t))}else e.current=t}catch(e){a.__e(e,n)}}function F(e,t,n){var r,i;if(a.unmount&&a.unmount(e),(r=e.ref)&&(r.current&&r.current!==e.__e||q(r,null,t)),null!=(r=e.__c)){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(e){a.__e(e,t)}r.base=r.__P=null}if(r=e.__k)for(i=0;i<r.length;i++)r[i]&&F(r[i],t,n||"function"!=typeof e.type);n||w(e.__e),e.__c=e.__=e.__e=e.__d=void 0}function B(e,t,n){return this.constructor(e,n)}function H(e,t,n){var r,i,l,s;a.__&&a.__(e,t),i=(r="function"==typeof n)?null:n&&n.__k||t.__k,l=[],s=[],M(t,e=(!r&&n||t).__k=x(O,null,[e]),i||m,m,t.namespaceURI,!r&&n?[n]:i?null:t.firstChild?o.call(t.childNodes):null,l,!r&&n?n:i?i.__e:t.firstChild,r,s),N(l,e,s)}function z(e,t){H(e,t,z)}function V(e,t,n){var r,i,a,l,s=_({},e.props);for(a in e.type&&e.type.defaultProps&&(l=e.type.defaultProps),t)"key"==a?r=t[a]:"ref"==a?i=t[a]:s[a]=void 0===t[a]&&void 0!==l?l[a]:t[a];return arguments.length>2&&(s.children=arguments.length>3?o.call(arguments,2):n),S(e.type,s,r||e.key,i||e.ref,null)}o=g.slice,a={__e:function(e,t,n,r){for(var i,o,a;t=t.__;)if((i=t.__c)&&!i.__)try{if((o=i.constructor)&&null!=o.getDerivedStateFromError&&(i.setState(o.getDerivedStateFromError(e)),a=i.__d),null!=i.componentDidCatch&&(i.componentDidCatch(e,r||{}),a=i.__d),a)return i.__E=i}catch(t){e=t}throw e}},l=0,j.prototype.setState=function(e,t){var n;n=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=_({},this.state),"function"==typeof e&&(e=e(_({},n),this.props)),e&&_(n,e),null!=e&&this.__v&&(t&&this._sb.push(t),E(this))},j.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),E(this))},j.prototype.render=O,s=[],u="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,f=function(e,t){return e.__v.__b-t.__v.__b},C.__r=0,p=0,d=R(!1),h=R(!0),v=0;var W,K,G,J,Q=0,Z=[],Y=a,X=Y.__b,ee=Y.__r,te=Y.diffed,ne=Y.__c,re=Y.unmount,ie=Y.__;function oe(e,t){Y.__h&&Y.__h(K,e,Q||t),Q=0;var n=K.__H||(K.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function ae(e){return Q=1,le(Se,e)}function le(e,t,n){var r=oe(W++,2);if(r.t=e,!r.__c&&(r.__=[n?n(t):Se(void 0,t),function(e){var t=r.__N?r.__N[0]:r.__[0],n=r.t(t,e);t!==n&&(r.__N=[n,r.__[1]],r.__c.setState({}))}],r.__c=K,!K.u)){var i=function(e,t,n){if(!r.__c.__H)return!0;var i=r.__c.__H.__.filter((function(e){return!!e.__c}));if(i.every((function(e){return!e.__N})))return!o||o.call(this,e,t,n);var a=!1;return i.forEach((function(e){if(e.__N){var t=e.__[0];e.__=e.__N,e.__N=void 0,t!==e.__[0]&&(a=!0)}})),!(!a&&r.__c.props===e)&&(!o||o.call(this,e,t,n))};K.u=!0;var o=K.shouldComponentUpdate,a=K.componentWillUpdate;K.componentWillUpdate=function(e,t,n){if(this.__e){var r=o;o=void 0,i(e,t,n),o=r}a&&a.call(this,e,t,n)},K.shouldComponentUpdate=i}return r.__N||r.__}function se(e,t){var n=oe(W++,3);!Y.__s&&xe(n.__H,t)&&(n.__=e,n.i=t,K.__H.__h.push(n))}function ce(e,t){var n=oe(W++,4);!Y.__s&&xe(n.__H,t)&&(n.__=e,n.i=t,K.__h.push(n))}function ue(e){return Q=5,pe((function(){return{current:e}}),[])}function fe(e,t,n){Q=6,ce((function(){return"function"==typeof e?(e(t()),function(){return e(null)}):e?(e.current=t(),function(){return e.current=null}):void 0}),null==n?n:n.concat(e))}function pe(e,t){var n=oe(W++,7);return xe(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function de(e,t){return Q=8,pe((function(){return e}),t)}function he(e){var t=K.context[e.__c],n=oe(W++,9);return n.c=e,t?(null==n.__&&(n.__=!0,t.sub(K)),t.props.value):e.__}function ve(e,t){Y.useDebugValue&&Y.useDebugValue(t?t(e):e)}function me(){var e=oe(W++,11);if(!e.__){for(var t=K.__v;null!==t&&!t.__m&&null!==t.__;)t=t.__;var n=t.__m||(t.__m=[0,0]);e.__="P"+n[0]+"-"+n[1]++}return e.__}function ge(){for(var e;e=Z.shift();)if(e.__P&&e.__H)try{e.__H.__h.forEach(_e),e.__H.__h.forEach(we),e.__H.__h=[]}catch(t){e.__H.__h=[],Y.__e(t,e.__v)}}Y.__b=function(e){K=null,X&&X(e)},Y.__=function(e,t){e&&t.__k&&t.__k.__m&&(e.__m=t.__k.__m),ie&&ie(e,t)},Y.__r=function(e){ee&&ee(e),W=0;var t=(K=e.__c).__H;t&&(G===K?(t.__h=[],K.__h=[],t.__.forEach((function(e){e.__N&&(e.__=e.__N),e.i=e.__N=void 0}))):(t.__h.forEach(_e),t.__h.forEach(we),t.__h=[],W=0)),G=K},Y.diffed=function(e){te&&te(e);var t=e.__c;t&&t.__H&&(t.__H.__h.length&&(1!==Z.push(t)&&J===Y.requestAnimationFrame||((J=Y.requestAnimationFrame)||ye)(ge)),t.__H.__.forEach((function(e){e.i&&(e.__H=e.i),e.i=void 0}))),G=K=null},Y.__c=function(e,t){t.some((function(e){try{e.__h.forEach(_e),e.__h=e.__h.filter((function(e){return!e.__||we(e)}))}catch(n){t.some((function(e){e.__h&&(e.__h=[])})),t=[],Y.__e(n,e.__v)}})),ne&&ne(e,t)},Y.unmount=function(e){re&&re(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.forEach((function(e){try{_e(e)}catch(e){t=e}})),n.__H=void 0,t&&Y.__e(t,n.__v))};var be="function"==typeof requestAnimationFrame;function ye(e){var t,n=function(){clearTimeout(r),be&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,100);be&&(t=requestAnimationFrame(n))}function _e(e){var t=K,n=e.__c;"function"==typeof n&&(e.__c=void 0,n()),K=t}function we(e){var t=K;e.__c=e.__(),K=t}function xe(e,t){return!e||e.length!==t.length||t.some((function(t,n){return t!==e[n]}))}function Se(e,t){return"function"==typeof t?t(e):t}function Oe(e,t){for(var n in e)if("__source"!==n&&!(n in t))return!0;for(var r in t)if("__source"!==r&&e[r]!==t[r])return!0;return!1}function je(e,t){this.props=e,this.context=t}(je.prototype=new j).isPureReactComponent=!0,je.prototype.shouldComponentUpdate=function(e,t){return Oe(this.props,e)||Oe(this.state,t)};var ke=a.__b;a.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),ke&&ke(e)};var Pe="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911,Ee=function(e,t){return null==e?null:T(T(e).map(t))},Ce={map:Ee,forEach:Ee,count:function(e){return e?T(e).length:0},only:function(e){var t=T(e);if(1!==t.length)throw"Children.only";return t[0]},toArray:T},Ie=a.__e;a.__e=function(e,t,n,r){if(e.then)for(var i,o=t;o=o.__;)if((i=o.__c)&&i.__c)return null==t.__e&&(t.__e=n.__e,t.__k=n.__k),i.__c(e,t);Ie(e,t,n,r)};var Ae=a.unmount;function Te(){this.__u=0,this.t=null,this.__b=null}function Le(e){var t=e.__.__c;return t&&t.__a&&t.__a(e)}function De(){this.u=null,this.o=null}a.unmount=function(e){var t=e.__c;t&&t.__R&&t.__R(),t&&32&e.__u&&(e.type=null),Ae&&Ae(e)},(Te.prototype=new j).__c=function(e,t){var n=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(n);var i=Le(r.__v),o=!1,a=function(){o||(o=!0,n.__R=null,i?i(l):l())};n.__R=a;var l=function(){if(!--r.__u){if(r.state.__a){var e=r.state.__a;r.__v.__k[0]=function e(t,n,r){return t&&r&&(t.__v=null,t.__k=t.__k&&t.__k.map((function(t){return e(t,n,r)})),t.__c&&t.__c.__P===n&&(t.__e&&r.appendChild(t.__e),t.__c.__e=!0,t.__c.__P=r)),t}(e,e.__c.__P,e.__c.__O)}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate()}};r.__u++||32&t.__u||r.setState({__a:r.__b=r.__v.__k[0]}),e.then(a,a)},Te.prototype.componentWillUnmount=function(){this.t=[]},Te.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function e(t,n,r){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach((function(e){"function"==typeof e.__c&&e.__c()})),t.__c.__H=null),null!=(t=function(e,t){for(var n in t)e[n]=t[n];return e}({},t)).__c&&(t.__c.__P===r&&(t.__c.__P=n),t.__c=null),t.__k=t.__k&&t.__k.map((function(t){return e(t,n,r)}))),t}(this.__b,n,r.__O=r.__P)}this.__b=null}var i=t.__a&&x(O,null,e.fallback);return i&&(i.__u&=-33),[x(O,null,t.__a?null:e.children),i]};var $e=function(e,t,n){if(++n[1]===n[0]&&e.o.delete(t),e.props.revealOrder&&("t"!==e.props.revealOrder[0]||!e.o.size))for(n=e.u;n;){for(;n.length>3;)n.pop()();if(n[1]<n[0])break;e.u=n=n[2]}};function Re(e){return this.getChildContext=function(){return e.context},e.children}function Me(e){var t=this,n=e.i;t.componentWillUnmount=function(){H(null,t.l),t.l=null,t.i=null},t.i&&t.i!==n&&t.componentWillUnmount(),t.l||(t.i=n,t.l={nodeType:1,parentNode:n,childNodes:[],contains:function(){return!0},appendChild:function(e){this.childNodes.push(e),t.i.appendChild(e)},insertBefore:function(e,n){this.childNodes.push(e),t.i.appendChild(e)},removeChild:function(e){this.childNodes.splice(this.childNodes.indexOf(e)>>>1,1),t.i.removeChild(e)}}),H(x(Re,{context:t.context},e.__v),t.l)}function Ne(e,t){var n=x(Me,{__v:e,i:t});return n.containerInfo=t,n}(De.prototype=new j).__a=function(e){var t=this,n=Le(t.__v),r=t.o.get(e);return r[0]++,function(i){var o=function(){t.props.revealOrder?(r.push(i),$e(t,e,r)):i()};n?n(o):o()}},De.prototype.render=function(e){this.u=null,this.o=new Map;var t=T(e.children);e.revealOrder&&"b"===e.revealOrder[0]&&t.reverse();for(var n=t.length;n--;)this.o.set(t[n],this.u=[1,0,this.u]);return e.children},De.prototype.componentDidUpdate=De.prototype.componentDidMount=function(){var e=this;this.o.forEach((function(t,n){$e(e,n,t)}))};var Ue="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,qe=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Fe=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,Be=/[A-Z0-9]/g,He="undefined"!=typeof document,ze=function(e){return("undefined"!=typeof Symbol&&"symbol"==i(Symbol())?/fil|che|rad/:/fil|che|ra/).test(e)};function Ve(e,t,n){return null==t.__k&&(t.textContent=""),H(e,t),"function"==typeof n&&n(),e?e.__c:null}j.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach((function(e){Object.defineProperty(j.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})}));var We=a.event;function Ke(){}function Ge(){return this.cancelBubble}function Je(){return this.defaultPrevented}a.event=function(e){return We&&(e=We(e)),e.persist=Ke,e.isPropagationStopped=Ge,e.isDefaultPrevented=Je,e.nativeEvent=e};var Qe,Ze={enumerable:!1,configurable:!0,get:function(){return this.class}},Ye=a.vnode;a.vnode=function(e){"string"==typeof e.type&&function(e){var t=e.props,n=e.type,r={},i=-1===n.indexOf("-");for(var o in t){var a=t[o];if(!("value"===o&&"defaultValue"in t&&null==a||He&&"children"===o&&"noscript"===n||"class"===o||"className"===o)){var l=o.toLowerCase();"defaultValue"===o&&"value"in t&&null==t.value?o="value":"download"===o&&!0===a?a="":"translate"===l&&"no"===a?a=!1:"o"===l[0]&&"n"===l[1]?"ondoubleclick"===l?o="ondblclick":"onchange"!==l||"input"!==n&&"textarea"!==n||ze(t.type)?"onfocus"===l?o="onfocusin":"onblur"===l?o="onfocusout":Fe.test(o)&&(o=l):l=o="oninput":i&&qe.test(o)?o=o.replace(Be,"-$&").toLowerCase():null===a&&(a=void 0),"oninput"===l&&r[o=l]&&(o="oninputCapture"),r[o]=a}}"select"==n&&r.multiple&&Array.isArray(r.value)&&(r.value=T(t.children).forEach((function(e){e.props.selected=-1!=r.value.indexOf(e.props.value)}))),"select"==n&&null!=r.defaultValue&&(r.value=T(t.children).forEach((function(e){e.props.selected=r.multiple?-1!=r.defaultValue.indexOf(e.props.value):r.defaultValue==e.props.value}))),t.class&&!t.className?(r.class=t.class,Object.defineProperty(r,"className",Ze)):(t.className&&!t.class||t.class&&t.className)&&(r.class=r.className=t.className),e.props=r}(e),e.$$typeof=Ue,Ye&&Ye(e)};var Xe=a.__r;a.__r=function(e){Xe&&Xe(e),Qe=e.__c};var et=a.diffed;a.diffed=function(e){et&&et(e);var t=e.props,n=e.__e;null!=n&&"textarea"===e.type&&"value"in t&&t.value!==n.value&&(n.value=null==t.value?"":t.value),Qe=null};var tt={ReactCurrentDispatcher:{current:{readContext:function(e){return Qe.__n[e.__c].props.value},useCallback:de,useContext:he,useDebugValue:ve,useDeferredValue:it,useEffect:se,useId:me,useImperativeHandle:fe,useInsertionEffect:at,useLayoutEffect:ce,useMemo:pe,useReducer:le,useRef:ue,useState:ae,useSyncExternalStore:lt,useTransition:ot}}};function nt(e){return!!e&&e.$$typeof===Ue}function rt(e){e()}function it(e){return e}function ot(){return[!1,rt]}var at=ce;function lt(e,t){var n=t(),r=ae({h:{__:n,v:t}}),i=r[0].h,o=r[1];return ce((function(){i.__=n,i.v=t,st(i)&&o({h:i})}),[e,n,t]),se((function(){return st(i)&&o({h:i}),e((function(){st(i)&&o({h:i})}))}),[e]),n}function st(e){var t,n,r=e.v,i=e.__;try{var o=r();return!((t=i)===(n=o)&&(0!==t||1/t==1/n)||t!=t&&n!=n)}catch(e){return!0}}var ct={useState:ae,useId:me,useReducer:le,useEffect:se,useLayoutEffect:ce,useInsertionEffect:at,useTransition:ot,useDeferredValue:it,useSyncExternalStore:lt,startTransition:rt,useRef:ue,useImperativeHandle:fe,useMemo:pe,useCallback:de,useContext:he,useDebugValue:ve,version:"18.3.1",Children:Ce,render:Ve,hydrate:function(e,t,n){return z(e,t),"function"==typeof n&&n(),e?e.__c:null},unmountComponentAtNode:function(e){return!!e.__k&&(H(null,e),!0)},createPortal:Ne,createElement:x,createContext:function(e,t){var n={__c:t="__cC"+v++,__:e,Consumer:function(e,t){return e.children(t)},Provider:function(e){var n,r;return this.getChildContext||(n=new Set,(r={})[t]=this,this.getChildContext=function(){return r},this.componentWillUnmount=function(){n=null},this.shouldComponentUpdate=function(e){this.props.value!==e.value&&n.forEach((function(e){e.__e=!0,E(e)}))},this.sub=function(e){n.add(e);var t=e.componentWillUnmount;e.componentWillUnmount=function(){n&&n.delete(e),t&&t.call(e)}}),e.children}};return n.Provider.__=n.Consumer.contextType=n},createFactory:function(e){return x.bind(null,e)},cloneElement:function(e){return nt(e)?V.apply(null,arguments):e},createRef:function(){return{current:null}},Fragment:O,isValidElement:nt,isElement:nt,isFragment:function(e){return nt(e)&&e.type===O},isMemo:function(e){return!!e&&!!e.displayName&&("string"==typeof e.displayName||e.displayName instanceof String)&&e.displayName.startsWith("Memo(")},findDOMNode:function(e){return e&&(e.base||1===e.nodeType&&e)||null},Component:j,PureComponent:je,memo:function(e,t){function n(e){var n=this.props.ref,r=n==e.ref;return!r&&n&&(n.call?n(null):n.current=null),t?!t(this.props,e)||!r:Oe(this.props,e)}function r(t){return this.shouldComponentUpdate=n,x(e,t)}return r.displayName="Memo("+(e.displayName||e.name)+")",r.prototype.isReactComponent=!0,r.__f=!0,r},forwardRef:function(e){function t(t){if(!("ref"in t))return e(t,null);var n=t.ref;delete t.ref;var r=e(t,n);return t.ref=n,r}return t.$$typeof=Pe,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(e.displayName||e.name)+")",t},flushSync:function(e,t){return e(t)},unstable_batchedUpdates:function(e,t){return e(t)},StrictMode:O,Suspense:Te,SuspenseList:De,lazy:function(e){var t,n,r;function i(i){if(t||(t=e()).then((function(e){n=e.default||e}),(function(e){r=e})),r)throw r;if(!n)throw t;return x(n,i)}return i.displayName="Lazy",i.__f=!0,i},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:tt};function ut(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function ft(e,t,n,r,i,o,a){try{var l=e[o](a),s=l.value}catch(e){return void n(e)}l.done?t(s):Promise.resolve(s).then(r,i)}function pt(e){return function(){var t=this,n=arguments;return new Promise((function(r,i){var o=e.apply(t,n);function a(e){ft(o,r,i,a,l,"next",e)}function l(e){ft(o,r,i,a,l,"throw",e)}a(void 0)}))}}function dt(e,t,n){return t=bt(t),function(e,t){if(t&&("object"==i(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,_t()?Reflect.construct(t,n||[],bt(e).constructor):t.apply(e,n))}function ht(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function vt(e,t,n){return Object.defineProperty(e,"prototype",{writable:!1}),e}function mt(e,t,n){return(t=function(e){var t=function(e){if("object"!=i(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==i(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function gt(){return(gt=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(null,arguments)}function bt(e){return(bt=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function yt(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&jt(e,t)}function _t(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(e){}return(_t=function(){return!!e})()}function wt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function xt(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?wt(Object(n),!0).forEach((function(t){mt(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):wt(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function St(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function Ot(){Ot=function(){return t};var e,t={},n=Object.prototype,r=n.hasOwnProperty,o=Object.defineProperty||function(e,t,n){e[t]=n.value},a="function"==typeof Symbol?Symbol:{},l=a.iterator||"@@iterator",s=a.asyncIterator||"@@asyncIterator",c=a.toStringTag||"@@toStringTag";function u(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{u({},"")}catch(e){u=function(e,t,n){return e[t]=n}}function f(e,t,n,r){var i=t&&t.prototype instanceof g?t:g,a=Object.create(i.prototype),l=new I(r||[]);return o(a,"_invoke",{value:k(e,n,l)}),a}function p(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}t.wrap=f;var d="suspendedStart",h="executing",v="completed",m={};function g(){}function b(){}function y(){}var _={};u(_,l,(function(){return this}));var w=Object.getPrototypeOf,x=w&&w(w(A([])));x&&x!==n&&r.call(x,l)&&(_=x);var S=y.prototype=g.prototype=Object.create(_);function O(e){["next","throw","return"].forEach((function(t){u(e,t,(function(e){return this._invoke(t,e)}))}))}function j(e,t){function n(o,a,l,s){var c=p(e[o],e,a);if("throw"!==c.type){var u=c.arg,f=u.value;return f&&"object"==i(f)&&r.call(f,"__await")?t.resolve(f.__await).then((function(e){n("next",e,l,s)}),(function(e){n("throw",e,l,s)})):t.resolve(f).then((function(e){u.value=e,l(u)}),(function(e){return n("throw",e,l,s)}))}s(c.arg)}var a;o(this,"_invoke",{value:function(e,r){function i(){return new t((function(t,i){n(e,r,t,i)}))}return a=a?a.then(i,i):i()}})}function k(t,n,r){var i=d;return function(o,a){if(i===h)throw Error("Generator is already running");if(i===v){if("throw"===o)throw a;return{value:e,done:!0}}for(r.method=o,r.arg=a;;){var l=r.delegate;if(l){var s=P(l,r);if(s){if(s===m)continue;return s}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(i===d)throw i=v,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);i=h;var c=p(t,n,r);if("normal"===c.type){if(i=r.done?v:"suspendedYield",c.arg===m)continue;return{value:c.arg,done:r.done}}"throw"===c.type&&(i=v,r.method="throw",r.arg=c.arg)}}}function P(t,n){var r=n.method,i=t.iterator[r];if(i===e)return n.delegate=null,"throw"===r&&t.iterator.return&&(n.method="return",n.arg=e,P(t,n),"throw"===n.method)||"return"!==r&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+r+"' method")),m;var o=p(i,t.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,m;var a=o.arg;return a?a.done?(n[t.resultName]=a.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,m):a:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,m)}function E(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function C(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function I(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(E,this),this.reset(!0)}function A(t){if(t||""===t){var n=t[l];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var o=-1,a=function n(){for(;++o<t.length;)if(r.call(t,o))return n.value=t[o],n.done=!1,n;return n.value=e,n.done=!0,n};return a.next=a}}throw new TypeError(i(t)+" is not iterable")}return b.prototype=y,o(S,"constructor",{value:y,configurable:!0}),o(y,"constructor",{value:b,configurable:!0}),b.displayName=u(y,c,"GeneratorFunction"),t.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===b||"GeneratorFunction"===(t.displayName||t.name))},t.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,y):(e.__proto__=y,u(e,c,"GeneratorFunction")),e.prototype=Object.create(S),e},t.awrap=function(e){return{__await:e}},O(j.prototype),u(j.prototype,s,(function(){return this})),t.AsyncIterator=j,t.async=function(e,n,r,i,o){void 0===o&&(o=Promise);var a=new j(f(e,n,r,i),o);return t.isGeneratorFunction(n)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},O(S),u(S,c,"Generator"),u(S,l,(function(){return this})),u(S,"toString",(function(){return"[object Generator]"})),t.keys=function(e){var t=Object(e),n=[];for(var r in t)n.push(r);return n.reverse(),function e(){for(;n.length;){var r=n.pop();if(r in t)return e.value=r,e.done=!1,e}return e.done=!0,e}},t.values=A,I.prototype={constructor:I,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(C),!t)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function i(r,i){return l.type="throw",l.arg=t,n.next=r,i&&(n.method="next",n.arg=e),!!i}for(var o=this.tryEntries.length-1;o>=0;--o){var a=this.tryEntries[o],l=a.completion;if("root"===a.tryLoc)return i("end");if(a.tryLoc<=this.prev){var s=r.call(a,"catchLoc"),c=r.call(a,"finallyLoc");if(s&&c){if(this.prev<a.catchLoc)return i(a.catchLoc,!0);if(this.prev<a.finallyLoc)return i(a.finallyLoc)}else if(s){if(this.prev<a.catchLoc)return i(a.catchLoc,!0)}else{if(!c)throw Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return i(a.finallyLoc)}}}},abrupt:function(e,t){for(var n=this.tryEntries.length-1;n>=0;--n){var i=this.tryEntries[n];if(i.tryLoc<=this.prev&&r.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var o=i;break}}o&&("break"===e||"continue"===e)&&o.tryLoc<=t&&t<=o.finallyLoc&&(o=null);var a=o?o.completion:{};return a.type=e,a.arg=t,o?(this.method="next",this.next=o.finallyLoc,m):this.complete(a)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),m},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),C(n),m}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var i=r.arg;C(n)}return i}}throw Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:A(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),m}},t}function jt(e,t){return(jt=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}function kt(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,a,l=[],s=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);s=!0);}catch(e){c=!0,i=e}finally{try{if(!s&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw i}}return l}}(e,t)||Et(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Pt(e){return function(e){if(Array.isArray(e))return ut(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||Et(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Et(e,t){if(e){if("string"==typeof e)return ut(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?ut(e,t):void 0}}function Ct(e){var t="function"==typeof Map?new Map:void 0;return(Ct=function(e){if(null===e||!function(e){try{return-1!==Function.toString.call(e).indexOf("[native code]")}catch(t){return"function"==typeof e}}(e))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return function(e,t,n){if(_t())return Reflect.construct.apply(null,arguments);var r=[null];r.push.apply(r,t);var i=new(e.bind.apply(e,r));return n&&jt(i,n.prototype),i}(e,arguments,bt(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),jt(n,e)})(e)}function It(){return ct.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},ct.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function At(){return ct.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20","aria-hidden":"true"},ct.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}var Tt=["translations"],Lt="Ctrl",Dt=ct.forwardRef((function(e,t){var n=e.translations,r=void 0===n?{}:n,i=St(e,Tt),o=r.buttonText,a=void 0===o?"Search":o,l=r.buttonAriaLabel,s=void 0===l?"Search":l,c=kt(ae(null),2),u=c[0],f=c[1];se((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?f("⌘"):f(Lt))}),[]);var p=kt(u===Lt?[Lt,"Ctrl",ct.createElement(It,null)]:["Meta","Command",u],3),d=p[0],h=p[1],v=p[2];return ct.createElement("button",gt({type:"button",className:"DocSearch DocSearch-Button","aria-label":"".concat(s," (").concat(h,"+K)")},i,{ref:t}),ct.createElement("span",{className:"DocSearch-Button-Container"},ct.createElement(At,null),ct.createElement("span",{className:"DocSearch-Button-Placeholder"},a)),ct.createElement("span",{className:"DocSearch-Button-Keys"},null!==u&&ct.createElement(ct.Fragment,null,ct.createElement($t,{reactsToKey:d},v),ct.createElement($t,{reactsToKey:"k"},"K"))))}));function $t(e){var t=e.reactsToKey,n=e.children,r=kt(ae(!1),2),i=r[0],o=r[1];return se((function(){if(t)return window.addEventListener("keydown",e),window.addEventListener("keyup",n),function(){window.removeEventListener("keydown",e),window.removeEventListener("keyup",n)};function e(e){e.key===t&&o(!0)}function n(e){e.key!==t&&"Meta"!==e.key||o(!1)}}),[t]),ct.createElement("kbd",{className:i?"DocSearch-Button-Key DocSearch-Button-Key--pressed":"DocSearch-Button-Key"},n)}function Rt(e,t){var n=void 0;return function(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];n&&clearTimeout(n),n=setTimeout((function(){return e.apply(void 0,i)}),t)}}function Mt(e){return e.reduce((function(e,t){return e.concat(t)}),[])}var Nt=0;function Ut(e){return 0===e.collections.length?0:e.collections.reduce((function(e,t){return e+t.items.length}),0)}function qt(e){return e!==Object(e)}var Ft=function(){},Bt=[{segment:"autocomplete-core",version:"1.17.7"}];function Ht(e){var t=e.item,n=e.items,r=void 0===n?[]:n;return{index:t.__autocomplete_indexName,items:[t],positions:[1+r.findIndex((function(e){return e.objectID===t.objectID}))],queryID:t.__autocomplete_queryID,algoliaSource:["autocomplete"]}}function zt(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var Vt=["items"],Wt=["items"];function Kt(e){return(Kt="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Gt(e){return function(e){if(Array.isArray(e))return Jt(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return Jt(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Jt(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Jt(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function Qt(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function Zt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Yt(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Zt(Object(n),!0).forEach((function(t){Xt(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Zt(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Xt(e,t,n){return(t=function(e){var t=function(e){if("object"!==Kt(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Kt(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Kt(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function en(e){return e.map((function(e){var t=e.items,n=Qt(e,Vt);return Yt(Yt({},n),{},{objectIDs:(null==t?void 0:t.map((function(e){return e.objectID})))||n.objectIDs})}))}function tn(e){var t=e.items.reduce((function(e,t){var n;return e[t.__autocomplete_indexName]=(null!==(n=e[t.__autocomplete_indexName])&&void 0!==n?n:[]).concat(t),e}),{});return Object.keys(t).map((function(e){return{index:e,items:t[e],algoliaSource:["autocomplete"]}}))}function nn(e){return e.objectID&&e.__autocomplete_indexName&&e.__autocomplete_queryID}function rn(e){return(rn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function on(e){return function(e){if(Array.isArray(e))return an(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return an(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?an(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function an(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function ln(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function sn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ln(Object(n),!0).forEach((function(t){cn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ln(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function cn(e,t,n){return(t=function(e){var t=function(e){if("object"!==rn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==rn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===rn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var un="https://cdn.jsdelivr.net/npm/search-insights@".concat("2.15.0","/dist/search-insights.min.js"),fn=Rt((function(e){var t=e.onItemsChange,n=e.items,r=e.insights,i=e.state;t({insights:r,insightsEvents:tn({items:n}).map((function(e){return sn({eventName:"Items Viewed"},e)})),state:i})}),400);function pn(e){var t=function(e){return sn({onItemsChange:function(e){var t=e.insights,n=e.insightsEvents,r=e.state;t.viewedObjectIDs.apply(t,on(n.map((function(e){return sn(sn({},e),{},{algoliaSource:dn(e.algoliaSource,r.context)})}))))},onSelect:function(e){var t=e.insights,n=e.insightsEvents,r=e.state;t.clickedObjectIDsAfterSearch.apply(t,on(n.map((function(e){return sn(sn({},e),{},{algoliaSource:dn(e.algoliaSource,r.context)})}))))},onActive:Ft,__autocomplete_clickAnalytics:!0},e)}(e),n=t.insightsClient,r=t.insightsInitParams,i=t.onItemsChange,o=t.onSelect,a=t.onActive,l=t.__autocomplete_clickAnalytics,s=n;if(n||"undefined"!=typeof window&&function(){var e={window:window}.window,t=e.AlgoliaAnalyticsObject||"aa";"string"==typeof t&&(s=e[t]),s||(e.AlgoliaAnalyticsObject=t,e[t]||(e[t]=function(){e[t].queue||(e[t].queue=[]);for(var n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];e[t].queue.push(r)}),e[t].version="2.15.0",s=e[t],function(e){var t="[Autocomplete]: Could not load search-insights.js. Please load it manually following https://alg.li/insights-autocomplete";try{var n=e.document.createElement("script");n.async=!0,n.src=un,n.onerror=function(){console.error(t)},document.body.appendChild(n)}catch(e){console.error(t)}}(e))}(),!s)return{};r&&s("init",sn({partial:!0},r));var c=function(e){var t,n,r,i=(t=function(e){return function(e){if(Array.isArray(e))return e}(e)||function(e){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,r,i,o,a=[],l=!0,s=!1;try{for(i=(t=t.call(e)).next;!(l=(n=i.call(t)).done)&&(a.push(n.value),2!==a.length);l=!0);}catch(e){s=!0,r=e}finally{try{if(!l&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(s)throw r}}return a}}(e)||function(e){if(e){if("string"==typeof e)return zt(e,2);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?zt(e,2):void 0}}(e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}((e.version||"").split(".").map(Number)),n=t[0],r=t[1],n>=3||2===n&&r>=4||1===n&&r>=10);function o(t,n,r){if(i&&void 0!==r){var o=r[0].__autocomplete_algoliaCredentials,a={"X-Algolia-Application-Id":o.appId,"X-Algolia-API-Key":o.apiKey};e.apply(void 0,[t].concat(Gt(n),[{headers:a}]))}else e.apply(void 0,[t].concat(Gt(n)))}return{init:function(t,n){e("init",{appId:t,apiKey:n})},setAuthenticatedUserToken:function(t){e("setAuthenticatedUserToken",t)},setUserToken:function(t){e("setUserToken",t)},clickedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];t.length>0&&o("clickedObjectIDsAfterSearch",en(t),t[0].items)},clickedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];t.length>0&&o("clickedObjectIDs",en(t),t[0].items)},clickedFilters:function(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];n.length>0&&e.apply(void 0,["clickedFilters"].concat(n))},convertedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];t.length>0&&o("convertedObjectIDsAfterSearch",en(t),t[0].items)},convertedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];t.length>0&&o("convertedObjectIDs",en(t),t[0].items)},convertedFilters:function(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];n.length>0&&e.apply(void 0,["convertedFilters"].concat(n))},viewedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];t.length>0&&t.reduce((function(e,t){var n=t.items,r=Qt(t,Wt);return[].concat(Gt(e),Gt(function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:20,n=[],r=0;r<e.objectIDs.length;r+=t)n.push(Yt(Yt({},e),{},{objectIDs:e.objectIDs.slice(r,r+t)}));return n}(Yt(Yt({},r),{},{objectIDs:(null==n?void 0:n.map((function(e){return e.objectID})))||r.objectIDs})).map((function(e){return{items:n,payload:e}}))))}),[]).forEach((function(e){var t=e.items;return o("viewedObjectIDs",[e.payload],t)}))},viewedFilters:function(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];n.length>0&&e.apply(void 0,["viewedFilters"].concat(n))}}}(s),u={current:[]},f=Rt((function(e){var t=e.state;if(t.isOpen){var n=t.collections.reduce((function(e,t){return[].concat(on(e),on(t.items))}),[]).filter(nn);(function e(t,n){if(t===n)return!0;if(qt(t)||qt(n)||"function"==typeof t||"function"==typeof n)return t===n;if(Object.keys(t).length!==Object.keys(n).length)return!1;for(var r=0,i=Object.keys(t);r<i.length;r++){var o=i[r];if(!(o in n))return!1;if(!e(t[o],n[o]))return!1}return!0})(u.current.map((function(e){return e.objectID})),n.map((function(e){return e.objectID})))||(u.current=n,n.length>0&&fn({onItemsChange:i,items:n,insights:c,state:t}))}}),0);return{name:"aa.algoliaInsightsPlugin",subscribe:function(e){var t=e.setContext,n=e.onSelect,r=e.onActive,i=!1;function u(e){t({algoliaInsightsPlugin:{__algoliaSearchParameters:sn(sn({},l?{clickAnalytics:!0}:{}),e?{userToken:hn(e)}:{}),insights:c}})}s("addAlgoliaAgent","insights-plugin"),u(),s("onUserTokenChange",(function(e){i||u(e)})),s("getUserToken",null,(function(e,t){i||u(t)})),s("onAuthenticatedUserTokenChange",(function(e){e?(i=!0,u(e)):(i=!1,s("getUserToken",null,(function(e,t){return u(t)})))})),s("getAuthenticatedUserToken",null,(function(e,t){t&&(i=!0,u(t))})),n((function(e){var t=e.item,n=e.state,r=e.event,i=e.source;nn(t)&&o({state:n,event:r,insights:c,item:t,insightsEvents:[sn({eventName:"Item Selected"},Ht({item:t,items:i.getItems().filter(nn)}))]})})),r((function(e){var t=e.item,n=e.source,r=e.state,i=e.event;nn(t)&&a({state:r,event:i,insights:c,item:t,insightsEvents:[sn({eventName:"Item Active"},Ht({item:t,items:n.getItems().filter(nn)}))]})}))},onStateChange:function(e){var t=e.state;f({state:t})},__autocomplete_pluginOptions:e}}function dn(){var e,t=arguments.length>1?arguments[1]:void 0;return[].concat(on(arguments.length>0&&void 0!==arguments[0]?arguments[0]:[]),["autocomplete-internal"],on(null!==(e=t.algoliaInsightsPlugin)&&void 0!==e&&e.__automaticInsights?["autocomplete-automatic"]:[]))}function hn(e){return"number"==typeof e?e.toString():e}function vn(e){return function e(t,n){var r=n;return{then:function(n,i){return e(t.then(mn(n,r,t),mn(i,r,t)),r)},catch:function(n){return e(t.catch(mn(n,r,t)),r)},finally:function(n){return n&&r.onCancelList.push(n),e(t.finally(mn(n&&function(){return r.onCancelList=[],n()},r,t)),r)},cancel:function(){r.isCanceled=!0;var e=r.onCancelList;r.onCancelList=[],e.forEach((function(e){e()}))},isCanceled:function(){return!0===r.isCanceled}}}(e,{isCanceled:!1,onCancelList:[]})}function mn(e,t,n){return e?function(n){return t.isCanceled?n:e(n)}:n}function gn(e,t,n,r){if(!n)return null;if(e<0&&(null===t||null!==r&&0===t))return n+e;var i=(null===t?-1:t)+e;return i<=-1||i>=n?null===r?null:0:i}function bn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function yn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?bn(Object(n),!0).forEach((function(t){_n(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):bn(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function _n(e,t,n){return(t=function(e){var t=function(e){if("object"!==wn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==wn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===wn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function wn(e){return(wn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function xn(e){var t=function(e){var t=e.collections.map((function(e){return e.items.length})).reduce((function(e,t,n){var r=(e[n-1]||0)+t;return e.push(r),e}),[]).reduce((function(t,n){return n<=e.activeItemId?t+1:t}),0);return e.collections[t]}(e);if(!t)return null;var n=t.items[function(e){for(var t=e.state,n=e.collection,r=!1,i=0,o=0;!1===r;){var a=t.collections[i];if(a===n){r=!0;break}o+=a.items.length,i++}return t.activeItemId-o}({state:e,collection:t})],r=t.source;return{item:n,itemInputValue:r.getItemInputValue({item:n,state:e}),itemUrl:r.getItemUrl({item:n,state:e}),source:r}}function Sn(e,t,n){return[e,null==n?void 0:n.sourceId,t].filter(Boolean).join("-").replace(/\s/g,"")}var On=/((gt|sm)-|galaxy nexus)|samsung[- ]|samsungbrowser/i;function jn(e){return e.nativeEvent||e}function kn(e){return(kn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Pn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function En(e,t,n){return(t=function(e){var t=function(e){if("object"!==kn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==kn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===kn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Cn(e){return(Cn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function In(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function An(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?In(Object(n),!0).forEach((function(t){Tn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):In(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Tn(e,t,n){return(t=function(e){var t=function(e){if("object"!==Cn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Cn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Cn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Ln(e){return(Ln="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Dn(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function $n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Rn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?$n(Object(n),!0).forEach((function(t){Mn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):$n(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Mn(e,t,n){return(t=function(e){var t=function(e){if("object"!==Ln(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Ln(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Ln(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Nn(e){return(Nn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Un(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function qn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Un(Object(n),!0).forEach((function(t){Fn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Un(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Fn(e,t,n){return(t=function(e){var t=function(e){if("object"!==Nn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Nn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Nn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Bn(e){return(Bn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Hn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function zn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Hn(Object(n),!0).forEach((function(t){Vn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Hn(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Vn(e,t,n){return(t=function(e){var t=function(e){if("object"!==Bn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Bn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Bn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Wn(e){return function(e){if(Array.isArray(e))return Kn(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return Kn(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Kn(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Kn(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function Gn(e){return Boolean(e.execute)}function Jn(e){var t=e.reduce((function(e,t){if(!Gn(t))return e.push(t),e;var n=t.searchClient,r=t.execute,i=t.requesterId,o=t.requests,a=e.find((function(e){return Gn(t)&&Gn(e)&&e.searchClient===n&&Boolean(i)&&e.requesterId===i}));if(a){var l;(l=a.items).push.apply(l,Wn(o))}else{var s={execute:r,requesterId:i,items:o,searchClient:n};e.push(s)}return e}),[]).map((function(e){if(!Gn(e))return Promise.resolve(e);var t=e,n=t.execute,r=t.items;return n({searchClient:t.searchClient,requests:r})}));return Promise.all(t).then((function(e){return Mt(e)}))}function Qn(e){return(Qn="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}var Zn=["event","nextState","props","query","refresh","store"];function Yn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Xn(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Yn(Object(n),!0).forEach((function(t){er(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Yn(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function er(e,t,n){return(t=function(e){var t=function(e){if("object"!==Qn(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Qn(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Qn(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var tr,nr,rr,ir=null,or=(tr=-1,nr=-1,rr=void 0,function(e){var t=++tr;return Promise.resolve(e).then((function(e){return rr&&t<nr?rr:(nr=t,rr=e,e)}))});function ar(e){var t=e.event,n=e.nextState,r=void 0===n?{}:n,i=e.props,o=e.query,a=e.refresh,l=e.store,s=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(e,Zn);ir&&i.environment.clearTimeout(ir);var c=s.setCollections,u=s.setIsOpen,f=s.setQuery,p=s.setActiveItemId,d=s.setStatus,h=s.setContext;if(f(o),p(i.defaultActiveItemId),!o&&!1===i.openOnFocus){var v,m=l.getState().collections.map((function(e){return Xn(Xn({},e),{},{items:[]})}));d("idle"),c(m),u(null!==(v=r.isOpen)&&void 0!==v?v:i.shouldPanelOpen({state:l.getState()}));var g=vn(or(m).then((function(){return Promise.resolve()})));return l.pendingRequests.add(g)}d("loading"),ir=i.environment.setTimeout((function(){d("stalled")}),i.stallThreshold);var b=vn(or(i.getSources(Xn({query:o,refresh:a,state:l.getState()},s)).then((function(e){return Promise.all(e.map((function(e){return Promise.resolve(e.getItems(Xn({query:o,refresh:a,state:l.getState()},s))).then((function(t){return function(e,t,n){if(i=e,Boolean(null==i?void 0:i.execute)){var r="algolia"===e.requesterId?Object.assign.apply(Object,[{}].concat(Wn(Object.keys(n.context).map((function(e){var t;return null===(t=n.context[e])||void 0===t?void 0:t.__algoliaSearchParameters}))))):{};return zn(zn({},e),{},{requests:e.queries.map((function(n){return{query:"algolia"===e.requesterId?zn(zn({},n),{},{params:zn(zn({},r),n.params)}):n,sourceId:t,transformResponse:e.transformResponse}}))})}var i;return{items:e,sourceId:t}}(t,e.sourceId,l.getState())}))}))).then(Jn).then((function(t){var n,r=t.some((function(e){return function(e){return!Array.isArray(e)&&Boolean(null==e?void 0:e._automaticInsights)}(e.items)}));return r&&h({algoliaInsightsPlugin:Xn(Xn({},(null===(n=l.getState().context)||void 0===n?void 0:n.algoliaInsightsPlugin)||{}),{},{__automaticInsights:r})}),function(e,t,n){return t.map((function(t){var r,i=e.filter((function(e){return e.sourceId===t.sourceId})),o=i.map((function(e){return e.items})),a=i[0].transformResponse,l=a?a({results:r=o,hits:r.map((function(e){return e.hits})).filter(Boolean),facetHits:r.map((function(e){var t;return null===(t=e.facetHits)||void 0===t?void 0:t.map((function(e){return{label:e.value,count:e.count,_highlightResult:{label:{value:e.highlighted}}}}))})).filter(Boolean)}):o;return t.onResolve({source:t,results:o,items:l,state:n.getState()}),l.every(Boolean),'The `getItems` function from source "'.concat(t.sourceId,'" must return an array of items but returned ').concat(JSON.stringify(void 0),".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),{source:t,items:l}}))}(t,e,l)})).then((function(e){return function(e){var t=e.props,n=e.state,r=e.collections.reduce((function(e,t){return qn(qn({},e),{},Fn({},t.source.sourceId,qn(qn({},t.source),{},{getItems:function(){return Mt(t.items)}})))}),{}),i=t.plugins.reduce((function(e,t){return t.reshape?t.reshape(e):e}),{sourcesBySourceId:r,state:n}).sourcesBySourceId;return Mt(t.reshape({sourcesBySourceId:i,sources:Object.values(i),state:n})).filter(Boolean).map((function(e){return{source:e,items:e.getItems()}}))}({collections:e,props:i,state:l.getState()})}))})))).then((function(e){var n;d("idle"),c(e);var f=i.shouldPanelOpen({state:l.getState()});u(null!==(n=r.isOpen)&&void 0!==n?n:i.openOnFocus&&!o&&f||f);var p=xn(l.getState());if(null!==l.getState().activeItemId&&p){var h=p.item,v=p.itemInputValue,m=p.itemUrl,g=p.source;g.onActive(Xn({event:t,item:h,itemInputValue:v,itemUrl:m,refresh:a,source:g,state:l.getState()},s))}})).finally((function(){d("idle"),ir&&i.environment.clearTimeout(ir)}));return l.pendingRequests.add(b)}function lr(e){return(lr="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}var sr=["event","props","refresh","store"];function cr(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function ur(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?cr(Object(n),!0).forEach((function(t){fr(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):cr(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function fr(e,t,n){return(t=function(e){var t=function(e){if("object"!==lr(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==lr(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===lr(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function pr(e){return(pr="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}var dr=["props","refresh","store"],hr=["inputElement","formElement","panelElement"],vr=["inputElement"],mr=["inputElement","maxLength"],gr=["source"],br=["item","source"];function yr(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function _r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?yr(Object(n),!0).forEach((function(t){wr(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):yr(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function wr(e,t,n){return(t=function(e){var t=function(e){if("object"!==pr(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==pr(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===pr(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function xr(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function Sr(e){return(Sr="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Or(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function jr(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Or(Object(n),!0).forEach((function(t){kr(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Or(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function kr(e,t,n){return(t=function(e){var t=function(e){if("object"!==Sr(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Sr(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Sr(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Pr(e){var t,n,r,i,o=e.plugins,a=e.options,l=null===(t=((null===(n=a.__autocomplete_metadata)||void 0===n?void 0:n.userAgents)||[])[0])||void 0===t?void 0:t.segment,s=l?kr({},l,Object.keys((null===(r=a.__autocomplete_metadata)||void 0===r?void 0:r.options)||{})):{};return{plugins:o.map((function(e){return{name:e.name,options:Object.keys(e.__autocomplete_pluginOptions||[])}})),options:jr({"autocomplete-core":Object.keys(a)},s),ua:Bt.concat((null===(i=a.__autocomplete_metadata)||void 0===i?void 0:i.userAgents)||[])}}function Er(e){var t,n=e.state;return!1===n.isOpen||null===n.activeItemId?null:(null===(t=xn(n))||void 0===t?void 0:t.itemInputValue)||null}function Cr(e){return(Cr="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function Ir(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Ar(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Ir(Object(n),!0).forEach((function(t){Tr(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Ir(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Tr(e,t,n){return(t=function(e){var t=function(e){if("object"!==Cr(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Cr(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Cr(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var Lr=function(e,t){switch(t.type){case"setActiveItemId":case"mousemove":return Ar(Ar({},e),{},{activeItemId:t.payload});case"setQuery":return Ar(Ar({},e),{},{query:t.payload,completion:null});case"setCollections":return Ar(Ar({},e),{},{collections:t.payload});case"setIsOpen":return Ar(Ar({},e),{},{isOpen:t.payload});case"setStatus":return Ar(Ar({},e),{},{status:t.payload});case"setContext":return Ar(Ar({},e),{},{context:Ar(Ar({},e.context),t.payload)});case"ArrowDown":var n=Ar(Ar({},e),{},{activeItemId:t.payload.hasOwnProperty("nextActiveItemId")?t.payload.nextActiveItemId:gn(1,e.activeItemId,Ut(e),t.props.defaultActiveItemId)});return Ar(Ar({},n),{},{completion:Er({state:n})});case"ArrowUp":var r=Ar(Ar({},e),{},{activeItemId:gn(-1,e.activeItemId,Ut(e),t.props.defaultActiveItemId)});return Ar(Ar({},r),{},{completion:Er({state:r})});case"Escape":return e.isOpen?Ar(Ar({},e),{},{activeItemId:null,isOpen:!1,completion:null}):Ar(Ar({},e),{},{activeItemId:null,query:"",status:"idle",collections:[]});case"submit":return Ar(Ar({},e),{},{activeItemId:null,isOpen:!1,status:"idle"});case"reset":return Ar(Ar({},e),{},{activeItemId:!0===t.props.openOnFocus?t.props.defaultActiveItemId:null,status:"idle",completion:null,query:""});case"focus":return Ar(Ar({},e),{},{activeItemId:t.props.defaultActiveItemId,isOpen:(t.props.openOnFocus||Boolean(e.query))&&t.props.shouldPanelOpen({state:e})});case"blur":return t.props.debug?e:Ar(Ar({},e),{},{isOpen:!1,activeItemId:null});case"mouseleave":return Ar(Ar({},e),{},{activeItemId:t.props.defaultActiveItemId});default:return"The reducer action ".concat(JSON.stringify(t.type)," is not supported."),e}};function Dr(e){return(Dr="function"==typeof Symbol&&"symbol"==i(Symbol.iterator)?function(e){return i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":i(e)})(e)}function $r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Rr(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?$r(Object(n),!0).forEach((function(t){Mr(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):$r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Mr(e,t,n){return(t=function(e){var t=function(e){if("object"!==Dr(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!==Dr(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===Dr(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Nr(e){var t=e.translations,n=(void 0===t?{}:t).searchByText,r=void 0===n?"Search by":n;return ct.createElement("a",{href:"https://www.algolia.com/ref/docsearch/?utm_source=".concat(window.location.hostname,"&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch"),target:"_blank",rel:"noopener noreferrer"},ct.createElement("span",{className:"DocSearch-Label"},r),ct.createElement("svg",{width:"77",height:"19","aria-label":"Algolia",role:"img",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 2196.2 500"},ct.createElement("defs",null,ct.createElement("style",null,".cls-1,.cls-2{fill:#003dff;}.cls-2{fill-rule:evenodd;}")),ct.createElement("path",{className:"cls-2",d:"M1070.38,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z"}),ct.createElement("rect",{className:"cls-1",x:"1845.88",y:"104.73",width:"62.58",height:"277.9",rx:"5.9",ry:"5.9"}),ct.createElement("path",{className:"cls-2",d:"M1851.78,71.38h50.77c3.26,0,5.9-2.64,5.9-5.9V5.9c0-3.62-3.24-6.39-6.82-5.83l-50.77,7.95c-2.87,.45-4.99,2.92-4.99,5.83v51.62c0,3.26,2.64,5.9,5.9,5.9Z"}),ct.createElement("path",{className:"cls-2",d:"M1764.03,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z"}),ct.createElement("path",{className:"cls-2",d:"M1631.95,142.72c-11.14-12.25-24.83-21.65-40.78-28.31-15.92-6.53-33.26-9.85-52.07-9.85-18.78,0-36.15,3.17-51.92,9.85-15.59,6.66-29.29,16.05-40.76,28.31-11.47,12.23-20.38,26.87-26.76,44.03-6.38,17.17-9.24,37.37-9.24,58.36,0,20.99,3.19,36.87,9.55,54.21,6.38,17.32,15.14,32.11,26.45,44.36,11.29,12.23,24.83,21.62,40.6,28.46,15.77,6.83,40.12,10.33,52.4,10.48,12.25,0,36.78-3.82,52.7-10.48,15.92-6.68,29.46-16.23,40.78-28.46,11.29-12.25,20.05-27.04,26.25-44.36,6.22-17.34,9.24-33.22,9.24-54.21,0-20.99-3.34-41.19-10.03-58.36-6.38-17.17-15.14-31.8-26.43-44.03Zm-44.43,163.75c-11.47,15.75-27.56,23.7-48.09,23.7-20.55,0-36.63-7.8-48.1-23.7-11.47-15.75-17.21-34.01-17.21-61.2,0-26.89,5.59-49.14,17.06-64.87,11.45-15.75,27.54-23.52,48.07-23.52,20.55,0,36.63,7.78,48.09,23.52,11.47,15.57,17.36,37.98,17.36,64.87,0,27.19-5.72,45.3-17.19,61.2Z"}),ct.createElement("path",{className:"cls-2",d:"M894.42,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z"}),ct.createElement("path",{className:"cls-2",d:"M2133.97,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z"}),ct.createElement("path",{className:"cls-2",d:"M1314.05,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-11.79,18.34-19.6,39.64-22.11,62.59-.58,5.3-.88,10.68-.88,16.14s.31,11.15,.93,16.59c4.28,38.09,23.14,71.61,50.66,94.52,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47h0c17.99,0,34.61-5.93,48.16-15.97,16.29-11.58,28.88-28.54,34.48-47.75v50.26h-.11v11.08c0,21.84-5.71,38.27-17.34,49.36-11.61,11.08-31.04,16.63-58.25,16.63-11.12,0-28.79-.59-46.6-2.41-2.83-.29-5.46,1.5-6.27,4.22l-12.78,43.11c-1.02,3.46,1.27,7.02,4.83,7.53,21.52,3.08,42.52,4.68,54.65,4.68,48.91,0,85.16-10.75,108.89-32.21,21.48-19.41,33.15-48.89,35.2-88.52V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,64.1s.65,139.13,0,143.36c-12.08,9.77-27.11,13.59-43.49,14.7-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-1.32,0-2.63-.03-3.94-.1-40.41-2.11-74.52-37.26-74.52-79.38,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33Z"}),ct.createElement("path",{className:"cls-1",d:"M249.83,0C113.3,0,2,110.09,.03,246.16c-2,138.19,110.12,252.7,248.33,253.5,42.68,.25,83.79-10.19,120.3-30.03,3.56-1.93,4.11-6.83,1.08-9.51l-23.38-20.72c-4.75-4.21-11.51-5.4-17.36-2.92-25.48,10.84-53.17,16.38-81.71,16.03-111.68-1.37-201.91-94.29-200.13-205.96,1.76-110.26,92-199.41,202.67-199.41h202.69V407.41l-115-102.18c-3.72-3.31-9.42-2.66-12.42,1.31-18.46,24.44-48.53,39.64-81.93,37.34-46.33-3.2-83.87-40.5-87.34-86.81-4.15-55.24,39.63-101.52,94-101.52,49.18,0,89.68,37.85,93.91,85.95,.38,4.28,2.31,8.27,5.52,11.12l29.95,26.55c3.4,3.01,8.79,1.17,9.63-3.3,2.16-11.55,2.92-23.58,2.07-35.92-4.82-70.34-61.8-126.93-132.17-131.26-80.68-4.97-148.13,58.14-150.27,137.25-2.09,77.1,61.08,143.56,138.19,145.26,32.19,.71,62.03-9.41,86.14-26.95l150.26,133.2c6.44,5.71,16.61,1.14,16.61-7.47V9.48C499.66,4.25,495.42,0,490.18,0H249.83Z"})))}function Ur(e){return ct.createElement("svg",{width:"15",height:"15","aria-label":e.ariaLabel,role:"img"},ct.createElement("g",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.2"},e.children))}function qr(e){var t=e.translations,n=void 0===t?{}:t,r=n.selectText,i=void 0===r?"to select":r,o=n.selectKeyAriaLabel,a=void 0===o?"Enter key":o,l=n.navigateText,s=void 0===l?"to navigate":l,c=n.navigateUpKeyAriaLabel,u=void 0===c?"Arrow up":c,f=n.navigateDownKeyAriaLabel,p=void 0===f?"Arrow down":f,d=n.closeText,h=void 0===d?"to close":d,v=n.closeKeyAriaLabel,m=void 0===v?"Escape key":v,g=n.searchByText,b=void 0===g?"Search by":g;return ct.createElement(ct.Fragment,null,ct.createElement("div",{className:"DocSearch-Logo"},ct.createElement(Nr,{translations:{searchByText:b}})),ct.createElement("ul",{className:"DocSearch-Commands"},ct.createElement("li",null,ct.createElement("kbd",{className:"DocSearch-Commands-Key"},ct.createElement(Ur,{ariaLabel:a},ct.createElement("path",{d:"M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"}))),ct.createElement("span",{className:"DocSearch-Label"},i)),ct.createElement("li",null,ct.createElement("kbd",{className:"DocSearch-Commands-Key"},ct.createElement(Ur,{ariaLabel:p},ct.createElement("path",{d:"M7.5 3.5v8M10.5 8.5l-3 3-3-3"}))),ct.createElement("kbd",{className:"DocSearch-Commands-Key"},ct.createElement(Ur,{ariaLabel:u},ct.createElement("path",{d:"M7.5 11.5v-8M10.5 6.5l-3-3-3 3"}))),ct.createElement("span",{className:"DocSearch-Label"},s)),ct.createElement("li",null,ct.createElement("kbd",{className:"DocSearch-Commands-Key"},ct.createElement(Ur,{ariaLabel:m},ct.createElement("path",{d:"M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"}))),ct.createElement("span",{className:"DocSearch-Label"},h))))}function Fr(e){var t=e.hit,n=e.children;return ct.createElement("a",{href:t.url},n)}function Br(){return ct.createElement("svg",{viewBox:"0 0 38 38",stroke:"currentColor",strokeOpacity:".5"},ct.createElement("g",{fill:"none",fillRule:"evenodd"},ct.createElement("g",{transform:"translate(1 1)",strokeWidth:"2"},ct.createElement("circle",{strokeOpacity:".3",cx:"18",cy:"18",r:"18"}),ct.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18"},ct.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"})))))}function Hr(){return ct.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},ct.createElement("path",{d:"M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0"}),ct.createElement("path",{d:"M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13"})))}function zr(){return ct.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("path",{d:"M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Vr(){return ct.createElement("svg",{className:"DocSearch-Hit-Select-Icon",width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},ct.createElement("path",{d:"M18 3v4c0 2-2 4-4 4H2"}),ct.createElement("path",{d:"M8 17l-6-6 6-6"})))}var Wr=function(){return ct.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("path",{d:"M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))};function Kr(e){switch(e.type){case"lvl1":return ct.createElement(Wr,null);case"content":return ct.createElement(Jr,null);default:return ct.createElement(Gr,null)}}function Gr(){return ct.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("path",{d:"M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Jr(){return ct.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("path",{d:"M17 5H3h14zm0 5H3h14zm0 5H3h14z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function Qr(){return ct.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},ct.createElement("path",{d:"M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function Zr(){return ct.createElement("svg",{width:"40",height:"40",viewBox:"0 0 20 20",fill:"none",fillRule:"evenodd",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"},ct.createElement("path",{d:"M19 4.8a16 16 0 00-2-1.2m-3.3-1.2A16 16 0 001.1 4.7M16.7 8a12 12 0 00-2.8-1.4M10 6a12 12 0 00-6.7 2M12.3 14.7a4 4 0 00-4.5 0M14.5 11.4A8 8 0 0010 10M3 16L18 2M10 18h0"}))}function Yr(){return ct.createElement("svg",{width:"40",height:"40",viewBox:"0 0 20 20",fill:"none",fillRule:"evenodd",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"},ct.createElement("path",{d:"M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"}))}function Xr(e){var t=e.translations,n=void 0===t?{}:t,r=n.titleText,i=void 0===r?"Unable to fetch results":r,o=n.helpText,a=void 0===o?"You might want to check your network connection.":o;return ct.createElement("div",{className:"DocSearch-ErrorScreen"},ct.createElement("div",{className:"DocSearch-Screen-Icon"},ct.createElement(Zr,null)),ct.createElement("p",{className:"DocSearch-Title"},i),ct.createElement("p",{className:"DocSearch-Help"},a))}var ei=["translations"];function ti(e){var t=e.translations,n=void 0===t?{}:t,r=St(e,ei),i=n.noResultsText,o=void 0===i?"No results for":i,a=n.suggestedQueryText,l=void 0===a?"Try searching for":a,s=n.reportMissingResultsText,c=void 0===s?"Believe this query should return results?":s,u=n.reportMissingResultsLinkText,f=void 0===u?"Let us know.":u,p=r.state.context.searchSuggestions;return ct.createElement("div",{className:"DocSearch-NoResults"},ct.createElement("div",{className:"DocSearch-Screen-Icon"},ct.createElement(Yr,null)),ct.createElement("p",{className:"DocSearch-Title"},o,' "',ct.createElement("strong",null,r.state.query),'"'),p&&p.length>0&&ct.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},ct.createElement("p",{className:"DocSearch-Help"},l,":"),ct.createElement("ul",null,p.slice(0,3).reduce((function(e,t){return[].concat(Pt(e),[ct.createElement("li",{key:t},ct.createElement("button",{className:"DocSearch-Prefill",key:t,type:"button",onClick:function(){r.setQuery(t.toLowerCase()+" "),r.refresh(),r.inputRef.current.focus()}},t))])}),[]))),r.getMissingResultsUrl&&ct.createElement("p",{className:"DocSearch-Help"},"".concat(c," "),ct.createElement("a",{href:r.getMissingResultsUrl({query:r.state.query}),target:"_blank",rel:"noopener noreferrer"},f)))}var ni=["hit","attribute","tagName"];function ri(e,t){return t.split(".").reduce((function(e,t){return null!=e&&e[t]?e[t]:null}),e)}function ii(e){var t=e.hit,n=e.attribute,r=e.tagName;return x(void 0===r?"span":r,xt(xt({},St(e,ni)),{},{dangerouslySetInnerHTML:{__html:ri(t,"_snippetResult.".concat(n,".value"))||ri(t,n)}}))}function oi(e){return e.collection&&0!==e.collection.items.length?ct.createElement("section",{className:"DocSearch-Hits"},ct.createElement("div",{className:"DocSearch-Hit-source"},e.title),ct.createElement("ul",e.getListProps(),e.collection.items.map((function(t,n){return ct.createElement(ai,gt({key:[e.title,t.objectID].join(":"),item:t,index:n},e))})))):null}function ai(e){var t=e.item,n=e.index,r=e.renderIcon,i=e.renderAction,o=e.getItemProps,a=e.onItemClick,l=e.collection,s=e.hitComponent,c=kt(ct.useState(!1),2),u=c[0],f=c[1],p=kt(ct.useState(!1),2),d=p[0],h=p[1],v=ct.useRef(null),m=s;return ct.createElement("li",gt({className:["DocSearch-Hit",t.__docsearch_parent&&"DocSearch-Hit--Child",u&&"DocSearch-Hit--deleting",d&&"DocSearch-Hit--favoriting"].filter(Boolean).join(" "),onTransitionEnd:function(){v.current&&v.current()}},o({item:t,source:l.source,onClick:function(e){a(t,e)}})),ct.createElement(m,{hit:t},ct.createElement("div",{className:"DocSearch-Hit-Container"},r({item:t,index:n}),t.hierarchy[t.type]&&"lvl1"===t.type&&ct.createElement("div",{className:"DocSearch-Hit-content-wrapper"},ct.createElement(ii,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.lvl1"}),t.content&&ct.createElement(ii,{className:"DocSearch-Hit-path",hit:t,attribute:"content"})),t.hierarchy[t.type]&&("lvl2"===t.type||"lvl3"===t.type||"lvl4"===t.type||"lvl5"===t.type||"lvl6"===t.type)&&ct.createElement("div",{className:"DocSearch-Hit-content-wrapper"},ct.createElement(ii,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.".concat(t.type)}),ct.createElement(ii,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),"content"===t.type&&ct.createElement("div",{className:"DocSearch-Hit-content-wrapper"},ct.createElement(ii,{className:"DocSearch-Hit-title",hit:t,attribute:"content"}),ct.createElement(ii,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),i({item:t,runDeleteTransition:function(e){f(!0),v.current=e},runFavoriteTransition:function(e){h(!0),v.current=e}}))))}function li(e,t,n){return e.reduce((function(e,r){var i=t(r);return e.hasOwnProperty(i)||(e[i]=[]),e[i].length<(n||5)&&e[i].push(r),e}),{})}function si(e){return e}function ci(e){return 1===e.button||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey}function ui(){}var fi=/(<mark>|<\/mark>)/g,pi=RegExp(fi.source);function di(e){var t,n,r=e;if(!r.__docsearch_parent&&!e._highlightResult)return e.hierarchy.lvl0;var i=r.__docsearch_parent?null===(t=r.__docsearch_parent)||void 0===t||null===(t=t._highlightResult)||void 0===t||null===(t=t.hierarchy)||void 0===t?void 0:t.lvl0:null===(n=e._highlightResult)||void 0===n||null===(n=n.hierarchy)||void 0===n?void 0:n.lvl0;return i?i.value&&pi.test(i.value)?i.value.replace(fi,""):i.value:e.hierarchy.lvl0}function hi(e){return ct.createElement("div",{className:"DocSearch-Dropdown-Container"},e.state.collections.map((function(t){if(0===t.items.length)return null;var n=di(t.items[0]);return ct.createElement(oi,gt({},e,{key:t.source.sourceId,title:n,collection:t,renderIcon:function(e){var n,r=e.item,i=e.index;return ct.createElement(ct.Fragment,null,r.__docsearch_parent&&ct.createElement("svg",{className:"DocSearch-Hit-Tree",viewBox:"0 0 24 54"},ct.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},r.__docsearch_parent!==(null===(n=t.items[i+1])||void 0===n?void 0:n.__docsearch_parent)?ct.createElement("path",{d:"M8 6v21M20 27H8.3"}):ct.createElement("path",{d:"M8 6v42M20 27H8.3"}))),ct.createElement("div",{className:"DocSearch-Hit-icon"},ct.createElement(Kr,{type:r.type})))},renderAction:function(){return ct.createElement("div",{className:"DocSearch-Hit-action"},ct.createElement(Vr,null))}}))})),e.resultsFooterComponent&&ct.createElement("section",{className:"DocSearch-HitsFooter"},ct.createElement(e.resultsFooterComponent,{state:e.state})))}var vi=["translations"];function mi(e){var t=e.translations,n=void 0===t?{}:t,r=St(e,vi),i=n.recentSearchesTitle,o=void 0===i?"Recent":i,a=n.noRecentSearchesText,l=void 0===a?"No recent searches":a,s=n.saveRecentSearchButtonTitle,c=void 0===s?"Save this search":s,u=n.removeRecentSearchButtonTitle,f=void 0===u?"Remove this search from history":u,p=n.favoriteSearchesTitle,d=void 0===p?"Favorite":p,h=n.removeFavoriteSearchButtonTitle,v=void 0===h?"Remove this search from favorites":h;return"idle"===r.state.status&&!1===r.hasCollections?r.disableUserPersonalization?null:ct.createElement("div",{className:"DocSearch-StartScreen"},ct.createElement("p",{className:"DocSearch-Help"},l)):!1===r.hasCollections?null:ct.createElement("div",{className:"DocSearch-Dropdown-Container"},ct.createElement(oi,gt({},r,{title:o,collection:r.state.collections[0],renderIcon:function(){return ct.createElement("div",{className:"DocSearch-Hit-icon"},ct.createElement(Hr,null))},renderAction:function(e){var t=e.item,n=e.runFavoriteTransition,i=e.runDeleteTransition;return ct.createElement(ct.Fragment,null,ct.createElement("div",{className:"DocSearch-Hit-action"},ct.createElement("button",{className:"DocSearch-Hit-action-button",title:c,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),n((function(){r.favoriteSearches.add(t),r.recentSearches.remove(t),r.refresh()}))}},ct.createElement(Qr,null))),ct.createElement("div",{className:"DocSearch-Hit-action"},ct.createElement("button",{className:"DocSearch-Hit-action-button",title:f,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),i((function(){r.recentSearches.remove(t),r.refresh()}))}},ct.createElement(zr,null))))}})),ct.createElement(oi,gt({},r,{title:d,collection:r.state.collections[1],renderIcon:function(){return ct.createElement("div",{className:"DocSearch-Hit-icon"},ct.createElement(Qr,null))},renderAction:function(e){var t=e.item,n=e.runDeleteTransition;return ct.createElement("div",{className:"DocSearch-Hit-action"},ct.createElement("button",{className:"DocSearch-Hit-action-button",title:v,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),n((function(){r.favoriteSearches.remove(t),r.refresh()}))}},ct.createElement(zr,null)))}})))}var gi=["translations"],bi=ct.memo((function(e){var t=e.translations,n=void 0===t?{}:t,r=St(e,gi);if("error"===r.state.status)return ct.createElement(Xr,{translations:null==n?void 0:n.errorScreen});var i=r.state.collections.some((function(e){return e.items.length>0}));return r.state.query?!1===i?ct.createElement(ti,gt({},r,{translations:null==n?void 0:n.noResultsScreen})):ct.createElement(hi,r):ct.createElement(mi,gt({},r,{hasCollections:i,translations:null==n?void 0:n.startScreen}))}),(function(e,t){return"loading"===t.state.status||"stalled"===t.state.status})),yi=["translations"];function _i(e){var t=e.translations,n=void 0===t?{}:t,r=St(e,yi),i=n.resetButtonTitle,o=void 0===i?"Clear the query":i,a=n.resetButtonAriaLabel,l=void 0===a?"Clear the query":a,s=n.cancelButtonText,c=void 0===s?"Cancel":s,u=n.cancelButtonAriaLabel,f=void 0===u?"Cancel":u,p=n.searchInputLabel,d=void 0===p?"Search":p,h=r.getFormProps({inputElement:r.inputRef.current}).onReset;return ct.useEffect((function(){r.autoFocus&&r.inputRef.current&&r.inputRef.current.focus()}),[r.autoFocus,r.inputRef]),ct.useEffect((function(){r.isFromSelection&&r.inputRef.current&&r.inputRef.current.select()}),[r.isFromSelection,r.inputRef]),ct.createElement(ct.Fragment,null,ct.createElement("form",{className:"DocSearch-Form",onSubmit:function(e){e.preventDefault()},onReset:h},ct.createElement("label",gt({className:"DocSearch-MagnifierLabel"},r.getLabelProps()),ct.createElement(At,null),ct.createElement("span",{className:"DocSearch-VisuallyHiddenForAccessibility"},d)),ct.createElement("div",{className:"DocSearch-LoadingIndicator"},ct.createElement(Br,null)),ct.createElement("input",gt({className:"DocSearch-Input",ref:r.inputRef},r.getInputProps({inputElement:r.inputRef.current,autoFocus:r.autoFocus,maxLength:64}))),ct.createElement("button",{type:"reset",title:o,className:"DocSearch-Reset","aria-label":l,hidden:!r.state.query},ct.createElement(zr,null))),ct.createElement("button",{className:"DocSearch-Cancel",type:"reset","aria-label":f,onClick:r.onClose},c))}var wi=["_highlightResult","_snippetResult"];function xi(e){var t=e.key,n=e.limit,r=void 0===n?5:n,i=function(e){return!1===function(){var e="__TEST_KEY__";try{return localStorage.setItem(e,""),localStorage.removeItem(e),!0}catch(e){return!1}}()?{setItem:function(){},getItem:function(){return[]}}:{setItem:function(t){return window.localStorage.setItem(e,JSON.stringify(t))},getItem:function(){var t=window.localStorage.getItem(e);return t?JSON.parse(t):[]}}}(t),o=i.getItem().slice(0,r);return{add:function(e){var t=e;t._highlightResult,t._snippetResult;var n=St(t,wi),a=o.findIndex((function(e){return e.objectID===n.objectID}));a>-1&&o.splice(a,1),o.unshift(n),o=o.slice(0,r),i.setItem(o)},remove:function(e){o=o.filter((function(t){return t.objectID!==e.objectID})),i.setItem(o)},getAll:function(){return o}}}function Si(e){var t,n="algolia-client-js-".concat(e.key);function r(){return void 0===t&&(t=e.localStorage||window.localStorage),t}function i(){return JSON.parse(r().getItem(n)||"{}")}function o(e){r().setItem(n,JSON.stringify(e))}return{get:function(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){var n,r,a;return n=e.timeToLive?1e3*e.timeToLive:null,r=i(),o(a=Object.fromEntries(Object.entries(r).filter((function(e){return void 0!==kt(e,2)[1].timestamp})))),n&&o(Object.fromEntries(Object.entries(a).filter((function(e){var t=kt(e,2)[1],r=(new Date).getTime();return!(t.timestamp+n<r)})))),i()[JSON.stringify(t)]})).then((function(e){return Promise.all([e?e.value:n(),void 0!==e])})).then((function(e){var t=kt(e,2),n=t[0],i=t[1];return Promise.all([n,i||r.miss(n)])})).then((function(e){return kt(e,1)[0]}))},set:function(e,t){return Promise.resolve().then((function(){var o=i();return o[JSON.stringify(e)]={timestamp:(new Date).getTime(),value:t},r().setItem(n,JSON.stringify(o)),t}))},delete:function(e){return Promise.resolve().then((function(){var t=i();delete t[JSON.stringify(e)],r().setItem(n,JSON.stringify(t))}))},clear:function(){return Promise.resolve().then((function(){r().removeItem(n)}))}}}function Oi(e){var t=Pt(e.caches),n=t.shift();return void 0===n?{get:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return t().then((function(e){return Promise.all([e,n.miss(e)])})).then((function(e){return kt(e,1)[0]}))},set:function(e,t){return Promise.resolve(t)},delete:function(e){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(e,r){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return n.get(e,r,i).catch((function(){return Oi({caches:t}).get(e,r,i)}))},set:function(e,r){return n.set(e,r).catch((function(){return Oi({caches:t}).set(e,r)}))},delete:function(e){return n.delete(e).catch((function(){return Oi({caches:t}).delete(e)}))},clear:function(){return n.clear().catch((function(){return Oi({caches:t}).clear()}))}}}function ji(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},t={};return{get:function(n,r){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},o=JSON.stringify(n);if(o in t)return Promise.resolve(e.serializable?JSON.parse(t[o]):t[o]);var a=r();return a.then((function(e){return i.miss(e)})).then((function(){return a}))},set:function(n,r){return t[JSON.stringify(n)]=e.serializable?JSON.stringify(r):r,Promise.resolve(r)},delete:function(e){return delete t[JSON.stringify(e)],Promise.resolve()},clear:function(){return t={},Promise.resolve()}}}function ki(e){var t=e.algoliaAgents,n=e.client,r=e.version,i=function(e){var t={value:"Algolia for JavaScript (".concat(e,")"),add:function(e){var n="; ".concat(e.segment).concat(void 0!==e.version?" (".concat(e.version,")"):"");return-1===t.value.indexOf(n)&&(t.value="".concat(t.value).concat(n)),t}};return t}(r).add({segment:n,version:r});return t.forEach((function(e){return i.add(e)})),i}var Pi=12e4;function Ei(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"up",n=Date.now();return xt(xt({},e),{},{status:t,lastUpdate:n,isUp:function(){return"up"===t||Date.now()-n>Pi},isTimedOut:function(){return"timed out"===t&&Date.now()-n<=Pi}})}var Ci=function(){function e(t,n){var r;return ht(this,e),mt(r=dt(this,e,[t]),"name","AlgoliaError"),n&&(r.name=n),r}return yt(e,Ct(Error)),vt(e)}(),Ii=function(){function e(t,n,r){var i;return ht(this,e),mt(i=dt(this,e,[t,r]),"stackTrace",void 0),i.stackTrace=n,i}return yt(e,Ci),vt(e)}(),Ai=function(){function e(t){return ht(this,e),dt(this,e,["Unreachable hosts - your application id may be incorrect. If the error persists, please reach out to the Algolia Support team: https://alg.li/support.",t,"RetryError"])}return yt(e,Ii),vt(e)}(),Ti=function(){function e(t,n,r){var i,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"ApiError";return ht(this,e),mt(i=dt(this,e,[t,r,o]),"status",void 0),i.status=n,i}return yt(e,Ii),vt(e)}(),Li=function(){function e(t,n){var r;return ht(this,e),mt(r=dt(this,e,[t,"DeserializationError"]),"response",void 0),r.response=n,r}return yt(e,Ci),vt(e)}(),Di=function(){function e(t,n,r,i){var o;return ht(this,e),mt(o=dt(this,e,[t,n,i,"DetailedApiError"]),"error",void 0),o.error=r,o}return yt(e,Ti),vt(e)}();function $i(e,t,n){var r,i=(r=n,Object.keys(r).filter((function(e){return void 0!==r[e]})).sort().map((function(e){return"".concat(e,"=").concat(encodeURIComponent("[object Array]"===Object.prototype.toString.call(r[e])?r[e].join(","):r[e]).replace(/\+/g,"%20"))})).join("&")),o="".concat(e.protocol,"://").concat(e.url).concat(e.port?":".concat(e.port):"","/").concat("/"===t.charAt(0)?t.substring(1):t);return i.length&&(o+="?".concat(i)),o}function Ri(e,t){if("GET"!==e.method&&(void 0!==e.data||void 0!==t.data)){var n=Array.isArray(e.data)?e.data:xt(xt({},e.data),t.data);return JSON.stringify(n)}}function Mi(e,t,n){var r=xt(xt(xt({Accept:"application/json"},e),t),n),i={};return Object.keys(r).forEach((function(e){var t=r[e];i[e.toLowerCase()]=t})),i}function Ni(e){try{return JSON.parse(e.content)}catch(t){throw new Li(t.message,e)}}function Ui(e,t){var n=e.content,r=e.status;try{var i=JSON.parse(n);return"error"in i?new Di(i.message,r,i.error,t):new Ti(i.message,r,t)}catch(e){}return new Ti(n,r,t)}function qi(e){return e.map((function(e){return Fi(e)}))}function Fi(e){var t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return xt(xt({},e),{},{request:xt(xt({},e.request),{},{headers:xt(xt({},e.request.headers),t)})})}var Bi=["appId","apiKey","authMode","algoliaAgents"],Hi=["params"];function zi(e){return[{url:"".concat(e,"-dsn.algolia.net"),accept:"read",protocol:"https"},{url:"".concat(e,".algolia.net"),accept:"write",protocol:"https"}].concat(function(e){for(var t=e,n=e.length-1;n>0;n--){var r=Math.floor(Math.random()*(n+1)),i=e[n];t[n]=e[r],t[r]=i}return t}([{url:"".concat(e,"-1.algolianet.com"),accept:"readWrite",protocol:"https"},{url:"".concat(e,"-2.algolianet.com"),accept:"readWrite",protocol:"https"},{url:"".concat(e,"-3.algolianet.com"),accept:"readWrite",protocol:"https"}]))}var Vi="3.8.2",Wi=["footer","searchBox"];function Ki(e){var t=e.appId,n=e.apiKey,r=e.indexName,i=e.placeholder,o=void 0===i?"Search docs":i,a=e.searchParameters,l=e.maxResultsPerGroup,s=e.onClose,c=void 0===s?ui:s,u=e.transformItems,f=void 0===u?si:u,p=e.hitComponent,d=void 0===p?Fr:p,h=e.resultsFooterComponent,v=void 0===h?function(){return null}:h,m=e.navigator,g=e.initialScrollY,b=void 0===g?0:g,y=e.transformSearchClient,_=void 0===y?si:y,w=e.disableUserPersonalization,x=void 0!==w&&w,S=e.initialQuery,O=void 0===S?"":S,j=e.translations,k=void 0===j?{}:j,P=e.getMissingResultsUrl,E=e.insights,C=void 0!==E&&E,I=k.footer,A=k.searchBox,T=St(k,Wi),L=kt(ct.useState({query:"",collections:[],completion:null,context:{},isOpen:!1,activeItemId:null,status:"idle"}),2),D=L[0],$=L[1],R=ct.useRef(null),M=ct.useRef(null),N=ct.useRef(null),U=ct.useRef(null),q=ct.useRef(null),F=ct.useRef(10),B=ct.useRef("undefined"!=typeof window?window.getSelection().toString().slice(0,64):"").current,H=ct.useRef(O||B).current,z=function(e,t,n){return ct.useMemo((function(){var r=function(e,t){if(!e||"string"!=typeof e)throw new Error("`appId` is missing.");if(!t||"string"!=typeof t)throw new Error("`apiKey` is missing.");return function(e){var t=e.appId,n=e.apiKey,r=e.authMode,i=e.algoliaAgents,o=St(e,Bi),a=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"WithinHeaders",r={"x-algolia-api-key":t,"x-algolia-application-id":e};return{headers:function(){return"WithinHeaders"===n?r:{}},queryParameters:function(){return"WithinQueryParameters"===n?r:{}}}}(t,n,r),l=function(e){var t=e.hosts,n=e.hostsCache,r=e.baseHeaders,i=e.logger,o=e.baseQueryParameters,a=e.algoliaAgent,l=e.timeouts,s=e.requester,c=e.requestsCache,u=e.responsesCache;function f(e){return p.apply(this,arguments)}function p(){return(p=pt(Ot().mark((function e(t){var r,i,o,a,l;return Ot().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,Promise.all(t.map((function(e){return n.get(e,(function(){return Promise.resolve(Ei(e))}))})));case 2:return r=e.sent,i=r.filter((function(e){return e.isUp()})),o=r.filter((function(e){return e.isTimedOut()})),a=[].concat(Pt(i),Pt(o)),l=a.length>0?a:t,e.abrupt("return",{hosts:l,getTimeout:function(e,t){return(0===o.length&&0===e?1:o.length+3+e)*t}});case 8:case"end":return e.stop()}}),e)})))).apply(this,arguments)}function d(e,t){return h.apply(this,arguments)}function h(){return(h=pt(Ot().mark((function e(c,u){var p,d,h,v,m,g,b,y,_,w,x,S,O,j=arguments;return Ot().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(p=!(j.length>2&&void 0!==j[2])||j[2],d=[],h=Ri(c,u),v=Mi(r,c.headers,u.headers),m="GET"===c.method?xt(xt({},c.data),u.data):{},g=xt(xt(xt({},o),c.queryParameters),m),a.value&&(g["x-algolia-agent"]=a.value),u&&u.queryParameters)for(b=0,y=Object.keys(u.queryParameters);b<y.length;b++)_=y[b],u.queryParameters[_]&&"[object Object]"!==Object.prototype.toString.call(u.queryParameters[_])?g[_]=u.queryParameters[_].toString():g[_]=u.queryParameters[_];return w=0,x=function(){var e=pt(Ot().mark((function e(t,r){var o,a,f,m,b,y;return Ot().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(void 0!==(o=t.pop())){e.next=3;break}throw new Ai(qi(d));case 3:return a=xt(xt({},l),u.timeouts),f={data:h,headers:v,method:c.method,url:$i(o,c.path,g),connectTimeout:r(w,a.connect),responseTimeout:r(w,p?a.read:a.write)},m=function(e){var n={request:f,response:e,host:o,triesLeft:t.length};return d.push(n),n},e.next=8,s.send(f);case 8:if(S=(_=b=e.sent).isTimedOut,O=_.status,!(S||function(e){return!e.isTimedOut&&!~~e.status}({isTimedOut:S,status:O})||2!=~~(O/100)&&4!=~~(O/100))){e.next=16;break}return y=m(b),b.isTimedOut&&w++,i.info("Retryable failure",Fi(y)),e.next=15,n.set(o,Ei(o,b.isTimedOut?"timed out":"down"));case 15:return e.abrupt("return",x(t,r));case 16:if(2!=~~(b.status/100)){e.next=18;break}return e.abrupt("return",Ni(b));case 18:throw m(b),Ui(b,d);case 20:case"end":return e.stop()}var _,S,O}),e)})));return function(t,n){return e.apply(this,arguments)}}(),S=t.filter((function(e){return"readWrite"===e.accept||(p?"read"===e.accept:"write"===e.accept)})),e.next=13,f(S);case 13:return O=e.sent,e.abrupt("return",x(Pt(O.hosts).reverse(),O.getTimeout));case 15:case"end":return e.stop()}}),e)})))).apply(this,arguments)}return{hostsCache:n,requester:s,timeouts:l,logger:i,algoliaAgent:a,baseHeaders:r,baseQueryParameters:o,hosts:t,request:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.useReadTransporter||"GET"===e.method;if(!n)return d(e,t,n);var i=function(){return d(e,t)};if(!0!==(t.cacheable||e.cacheable))return i();var a={request:e,requestOptions:t,transporter:{queryParameters:o,headers:r}};return u.get(a,(function(){return c.get(a,(function(){return c.set(a,i()).then((function(e){return Promise.all([c.delete(a),e])}),(function(e){return Promise.all([c.delete(a),Promise.reject(e)])})).then((function(e){var t=kt(e,2);return t[0],t[1]}))}))}),{miss:function(e){return u.set(a,e)}})},requestsCache:c,responsesCache:u}}(xt(xt({hosts:zi(t)},o),{},{algoliaAgent:ki({algoliaAgents:i,client:"Lite",version:"5.14.2"}),baseHeaders:xt(xt({"content-type":"text/plain"},a.headers()),o.baseHeaders),baseQueryParameters:xt(xt({},a.queryParameters()),o.baseQueryParameters)}));return{transporter:l,appId:t,clearCache:function(){return Promise.all([l.requestsCache.clear(),l.responsesCache.clear()]).then((function(){}))},get _ua(){return l.algoliaAgent.value},addAlgoliaAgent:function(e,t){l.algoliaAgent.add({segment:e,version:t})},setClientApiKey:function(e){var t=e.apiKey;r&&"WithinHeaders"!==r?l.baseQueryParameters["x-algolia-api-key"]=t:l.baseHeaders["x-algolia-api-key"]=t},searchForHits:function(e,t){return this.search(e,t)},searchForFacets:function(e,t){return this.search(e,t)},customPost:function(e,t){var n=e.path,r=e.parameters,i=e.body;if(!n)throw new Error("Parameter `path` is required when calling `customPost`.");var o={method:"POST",path:"/{path}".replace("{path}",n),queryParameters:r||{},headers:{},data:i||{}};return l.request(o,t)},getRecommendations:function(e,t){if(e&&Array.isArray(e)&&(e={requests:e}),!e)throw new Error("Parameter `getRecommendationsParams` is required when calling `getRecommendations`.");if(!e.requests)throw new Error("Parameter `getRecommendationsParams.requests` is required when calling `getRecommendations`.");var n={method:"POST",path:"/1/indexes/*/recommendations",queryParameters:{},headers:{},data:e,useReadTransporter:!0,cacheable:!0};return l.request(n,t)},search:function(e,t){if(e&&Array.isArray(e)){var n={requests:e.map((function(e){var t=e.params,n=St(e,Hi);return"facet"===n.type?xt(xt(xt({},n),t),{},{type:"facet"}):xt(xt(xt({},n),t),{},{facet:void 0,maxFacetHits:void 0,facetQuery:void 0})}))};e=n}if(!e)throw new Error("Parameter `searchMethodParams` is required when calling `search`.");if(!e.requests)throw new Error("Parameter `searchMethodParams.requests` is required when calling `search`.");var r={method:"POST",path:"/1/indexes/*/queries",queryParameters:{},headers:{},data:e,useReadTransporter:!0,cacheable:!0};return l.request(r,t)}}}(xt({appId:e,apiKey:t,timeouts:{connect:1e3,read:2e3,write:3e4},logger:{debug:function(e,t){return Promise.resolve()},info:function(e,t){return Promise.resolve()},error:function(e,t){return Promise.resolve()}},requester:{send:function(e){return new Promise((function(t){var n=new XMLHttpRequest;n.open(e.method,e.url,!0),Object.keys(e.headers).forEach((function(t){return n.setRequestHeader(t,e.headers[t])}));var r,i=function(e,r){return setTimeout((function(){n.abort(),t({status:0,content:r,isTimedOut:!0})}),e)},o=i(e.connectTimeout,"Connection timeout");n.onreadystatechange=function(){n.readyState>n.OPENED&&void 0===r&&(clearTimeout(o),r=i(e.responseTimeout,"Socket timeout"))},n.onerror=function(){0===n.status&&(clearTimeout(o),clearTimeout(r),t({content:n.responseText||"Network request failed",status:n.status,isTimedOut:!1}))},n.onload=function(){clearTimeout(o),clearTimeout(r),t({content:n.responseText,status:n.status,isTimedOut:!1})},n.send(e.data)}))}},algoliaAgents:[{segment:"Browser"}],authMode:"WithinQueryParameters",responsesCache:ji(),requestsCache:ji({serializable:!1}),hostsCache:Oi({caches:[Si({key:"".concat("5.14.2","-").concat(e)}),ji()]})},void 0))}(e,t);return r.addAlgoliaAgent("docsearch",Vi),!1===/docsearch.js \(.*\)/.test(r.transporter.algoliaAgent.value)&&r.addAlgoliaAgent("docsearch-react",Vi),n(r)}),[e,t,n])}(t,n,_),V=ct.useRef(xi({key:"__DOCSEARCH_FAVORITE_SEARCHES__".concat(r),limit:10})).current,W=ct.useRef(xi({key:"__DOCSEARCH_RECENT_SEARCHES__".concat(r),limit:0===V.getAll().length?7:4})).current,K=ct.useCallback((function(e){if(!x){var t="content"===e.type?e.__docsearch_parent:e;t&&-1===V.getAll().findIndex((function(e){return e.objectID===t.objectID}))&&W.add(t)}}),[V,W,x]),G=ct.useCallback((function(e){if(D.context.algoliaInsightsPlugin&&e.__autocomplete_id){var t=e,n={eventName:"Item Selected",index:t.__autocomplete_indexName,items:[t],positions:[e.__autocomplete_id],queryID:t.__autocomplete_queryID};D.context.algoliaInsightsPlugin.insights.clickedObjectIDsAfterSearch(n)}}),[D.context.algoliaInsightsPlugin]),J=ct.useMemo((function(){return function(e){var t=[],n=function(e,t){var n,r="undefined"!=typeof window?window:{},i=e.plugins||[];return Rn(Rn({debug:!1,openOnFocus:!1,enterKeyHint:void 0,ignoreCompositionEvents:!1,placeholder:"",autoFocus:!1,defaultActiveItemId:null,stallThreshold:300,insights:void 0,environment:r,shouldPanelOpen:function(e){return Ut(e.state)>0},reshape:function(e){return e.sources}},e),{},{id:null!==(n=e.id)&&void 0!==n?n:"autocomplete-".concat(Nt++),plugins:i,initialState:Rn({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},e.initialState),onStateChange:function(t){var n;null===(n=e.onStateChange)||void 0===n||n.call(e,t),i.forEach((function(e){var n;return null===(n=e.onStateChange)||void 0===n?void 0:n.call(e,t)}))},onSubmit:function(t){var n;null===(n=e.onSubmit)||void 0===n||n.call(e,t),i.forEach((function(e){var n;return null===(n=e.onSubmit)||void 0===n?void 0:n.call(e,t)}))},onReset:function(t){var n;null===(n=e.onReset)||void 0===n||n.call(e,t),i.forEach((function(e){var n;return null===(n=e.onReset)||void 0===n?void 0:n.call(e,t)}))},getSources:function(n){return Promise.all([].concat(function(e){return function(e){if(Array.isArray(e))return Dn(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return Dn(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Dn(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(i.map((function(e){return e.getSources}))),[e.getSources]).filter(Boolean).map((function(e){return function(e,t){var n=[];return Promise.resolve(e(t)).then((function(e){return Promise.all(e.filter((function(e){return Boolean(e)})).map((function(e){if(e.sourceId,n.includes(e.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(e.sourceId)," is not unique."));n.push(e.sourceId);var t={getItemInputValue:function(e){return e.state.query},getItemUrl:function(){},onSelect:function(e){(0,e.setIsOpen)(!1)},onActive:Ft,onResolve:Ft};Object.keys(t).forEach((function(e){t[e].__default=!0}));var r=yn(yn({},t),e);return Promise.resolve(r)})))}))}(e,n)}))).then((function(e){return Mt(e)})).then((function(e){return e.map((function(e){return Rn(Rn({},e),{},{onSelect:function(n){e.onSelect(n),t.forEach((function(e){var t;return null===(t=e.onSelect)||void 0===t?void 0:t.call(e,n)}))},onActive:function(n){e.onActive(n),t.forEach((function(e){var t;return null===(t=e.onActive)||void 0===t?void 0:t.call(e,n)}))},onResolve:function(n){e.onResolve(n),t.forEach((function(e){var t;return null===(t=e.onResolve)||void 0===t?void 0:t.call(e,n)}))}})}))}))},navigator:Rn({navigate:function(e){var t=e.itemUrl;r.location.assign(t)},navigateNewTab:function(e){var t=e.itemUrl,n=r.open(t,"_blank","noopener");null==n||n.focus()},navigateNewWindow:function(e){var t=e.itemUrl;r.open(t,"_blank","noopener")}},e.navigator)})}(e,t),r=function(e,t,n){var r,i=t.initialState;return{getState:function(){return i},dispatch:function(r,o){var a=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Pn(Object(n),!0).forEach((function(t){En(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Pn(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},i);i=e(i,{type:r,props:t,payload:o}),n({state:i,prevState:a})},pendingRequests:(r=[],{add:function(e){return r.push(e),e.finally((function(){r=r.filter((function(t){return t!==e}))}))},cancelAll:function(){r.forEach((function(e){return e.cancel()}))},isEmpty:function(){return 0===r.length}})}}(Lr,n,(function(e){var t,r,o=e.prevState,c=e.state;if(n.onStateChange(Rr({prevState:o,state:c,refresh:a,navigator:n.navigator},i)),!s()&&null!==(t=c.context)&&void 0!==t&&null!==(r=t.algoliaInsightsPlugin)&&void 0!==r&&r.__automaticInsights&&!1!==n.insights){var u=pn({__autocomplete_clickAnalytics:!1});n.plugins.push(u),l([u])}})),i=function(e){var t=e.store;return{setActiveItemId:function(e){t.dispatch("setActiveItemId",e)},setQuery:function(e){t.dispatch("setQuery",e)},setCollections:function(e){var n=0,r=e.map((function(e){return An(An({},e),{},{items:Mt(e.items).map((function(e){return An(An({},e),{},{__autocomplete_id:n++})}))})}));t.dispatch("setCollections",r)},setIsOpen:function(e){t.dispatch("setIsOpen",e)},setStatus:function(e){t.dispatch("setStatus",e)},setContext:function(e){t.dispatch("setContext",e)}}}({store:r}),o=function(e){var t=e.props,n=e.refresh,r=e.store,i=xr(e,dr);return{getEnvironmentProps:function(e){var n=e.inputElement,i=e.formElement,o=e.panelElement;function a(e){!r.getState().isOpen&&r.pendingRequests.isEmpty()||e.target===n||!1===[i,o].some((function(t){return(n=t)===(r=e.target)||n.contains(r);var n,r}))&&(r.dispatch("blur",null),t.debug||r.pendingRequests.cancelAll())}return _r({onTouchStart:a,onMouseDown:a,onTouchMove:function(e){!1!==r.getState().isOpen&&n===t.environment.document.activeElement&&e.target!==n&&n.blur()}},xr(e,hr))},getRootProps:function(e){return _r({role:"combobox","aria-expanded":r.getState().isOpen,"aria-haspopup":"listbox","aria-controls":r.getState().isOpen?r.getState().collections.map((function(e){var n=e.source;return Sn(t.id,"list",n)})).join(" "):void 0,"aria-labelledby":Sn(t.id,"label")},e)},getFormProps:function(e){return e.inputElement,_r({action:"",noValidate:!0,role:"search",onSubmit:function(o){var a;o.preventDefault(),t.onSubmit(_r({event:o,refresh:n,state:r.getState()},i)),r.dispatch("submit",null),null===(a=e.inputElement)||void 0===a||a.blur()},onReset:function(o){var a;o.preventDefault(),t.onReset(_r({event:o,refresh:n,state:r.getState()},i)),r.dispatch("reset",null),null===(a=e.inputElement)||void 0===a||a.focus()}},xr(e,vr))},getLabelProps:function(e){return _r({htmlFor:Sn(t.id,"input"),id:Sn(t.id,"label")},e)},getInputProps:function(e){var o;function a(e){(t.openOnFocus||Boolean(r.getState().query))&&ar(_r({event:e,props:t,query:r.getState().completion||r.getState().query,refresh:n,store:r},i)),r.dispatch("focus",null)}var l=e||{};l.inputElement;var s=l.maxLength,c=void 0===s?512:s,u=xr(l,mr),f=xn(r.getState()),p=function(e){return Boolean(e&&e.match(On))}((null===(o=t.environment.navigator)||void 0===o?void 0:o.userAgent)||""),d=t.enterKeyHint||(null!=f&&f.itemUrl&&!p?"go":"search");return _r({"aria-autocomplete":"both","aria-activedescendant":r.getState().isOpen&&null!==r.getState().activeItemId?Sn(t.id,"item-".concat(r.getState().activeItemId),null==f?void 0:f.source):void 0,"aria-controls":r.getState().isOpen?r.getState().collections.map((function(e){var n=e.source;return Sn(t.id,"list",n)})).join(" "):void 0,"aria-labelledby":Sn(t.id,"label"),value:r.getState().completion||r.getState().query,id:Sn(t.id,"input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:d,spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:c,type:"search",onChange:function(e){var o=e.currentTarget.value;t.ignoreCompositionEvents&&jn(e).isComposing?i.setQuery(o):ar(_r({event:e,props:t,query:o.slice(0,c),refresh:n,store:r},i))},onCompositionEnd:function(e){ar(_r({event:e,props:t,query:e.currentTarget.value.slice(0,c),refresh:n,store:r},i))},onKeyDown:function(e){jn(e).isComposing||function(e){var t=e.event,n=e.props,r=e.refresh,i=e.store,o=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(e,sr);if("ArrowUp"===t.key||"ArrowDown"===t.key){var a=function(){var e=xn(i.getState()),t=n.environment.document.getElementById(Sn(n.id,"item-".concat(i.getState().activeItemId),null==e?void 0:e.source));t&&(t.scrollIntoViewIfNeeded?t.scrollIntoViewIfNeeded(!1):t.scrollIntoView(!1))},l=function(){var e=xn(i.getState());if(null!==i.getState().activeItemId&&e){var n=e.item,a=e.itemInputValue,l=e.itemUrl,s=e.source;s.onActive(ur({event:t,item:n,itemInputValue:a,itemUrl:l,refresh:r,source:s,state:i.getState()},o))}};t.preventDefault(),!1===i.getState().isOpen&&(n.openOnFocus||Boolean(i.getState().query))?ar(ur({event:t,props:n,query:i.getState().query,refresh:r,store:i},o)).then((function(){i.dispatch(t.key,{nextActiveItemId:n.defaultActiveItemId}),l(),setTimeout(a,0)})):(i.dispatch(t.key,{}),l(),a())}else if("Escape"===t.key)t.preventDefault(),i.dispatch(t.key,null),i.pendingRequests.cancelAll();else if("Tab"===t.key)i.dispatch("blur",null),i.pendingRequests.cancelAll();else if("Enter"===t.key){if(null===i.getState().activeItemId||i.getState().collections.every((function(e){return 0===e.items.length})))return void(n.debug||i.pendingRequests.cancelAll());t.preventDefault();var s=xn(i.getState()),c=s.item,u=s.itemInputValue,f=s.itemUrl,p=s.source;if(t.metaKey||t.ctrlKey)void 0!==f&&(p.onSelect(ur({event:t,item:c,itemInputValue:u,itemUrl:f,refresh:r,source:p,state:i.getState()},o)),n.navigator.navigateNewTab({itemUrl:f,item:c,state:i.getState()}));else if(t.shiftKey)void 0!==f&&(p.onSelect(ur({event:t,item:c,itemInputValue:u,itemUrl:f,refresh:r,source:p,state:i.getState()},o)),n.navigator.navigateNewWindow({itemUrl:f,item:c,state:i.getState()}));else if(t.altKey);else{if(void 0!==f)return p.onSelect(ur({event:t,item:c,itemInputValue:u,itemUrl:f,refresh:r,source:p,state:i.getState()},o)),void n.navigator.navigate({itemUrl:f,item:c,state:i.getState()});ar(ur({event:t,nextState:{isOpen:!1},props:n,query:u,refresh:r,store:i},o)).then((function(){p.onSelect(ur({event:t,item:c,itemInputValue:u,itemUrl:f,refresh:r,source:p,state:i.getState()},o))}))}}}(_r({event:e,props:t,refresh:n,store:r},i))},onFocus:a,onBlur:Ft,onClick:function(n){e.inputElement!==t.environment.document.activeElement||r.getState().isOpen||a(n)}},u)},getPanelProps:function(e){return _r({onMouseDown:function(e){e.preventDefault()},onMouseLeave:function(){r.dispatch("mouseleave",null)}},e)},getListProps:function(e){var n=e||{},r=n.source,i=xr(n,gr);return _r({role:"listbox","aria-labelledby":Sn(t.id,"label"),id:Sn(t.id,"list",r)},i)},getItemProps:function(e){var o=e.item,a=e.source,l=xr(e,br);return _r({id:Sn(t.id,"item-".concat(o.__autocomplete_id),a),role:"option","aria-selected":r.getState().activeItemId===o.__autocomplete_id,onMouseMove:function(e){if(o.__autocomplete_id!==r.getState().activeItemId){r.dispatch("mousemove",o.__autocomplete_id);var t=xn(r.getState());if(null!==r.getState().activeItemId&&t){var a=t.item,l=t.itemInputValue,s=t.itemUrl,c=t.source;c.onActive(_r({event:e,item:a,itemInputValue:l,itemUrl:s,refresh:n,source:c,state:r.getState()},i))}}},onMouseDown:function(e){e.preventDefault()},onClick:function(e){var l=a.getItemInputValue({item:o,state:r.getState()}),s=a.getItemUrl({item:o,state:r.getState()});(s?Promise.resolve():ar(_r({event:e,nextState:{isOpen:!1},props:t,query:l,refresh:n,store:r},i))).then((function(){a.onSelect(_r({event:e,item:o,itemInputValue:l,itemUrl:s,refresh:n,source:a,state:r.getState()},i))}))}},l)}}}(Rr({props:n,refresh:a,store:r,navigator:n.navigator},i));function a(){return ar(Rr({event:new Event("input"),nextState:{isOpen:r.getState().isOpen},props:n,navigator:n.navigator,query:r.getState().query,refresh:a,store:r},i))}function l(e){e.forEach((function(e){var r;return null===(r=e.subscribe)||void 0===r?void 0:r.call(e,Rr(Rr({},i),{},{navigator:n.navigator,refresh:a,onSelect:function(e){t.push({onSelect:e})},onActive:function(e){t.push({onActive:e})},onResolve:function(e){t.push({onResolve:e})}}))}))}function s(){return n.plugins.some((function(e){return"aa.algoliaInsightsPlugin"===e.name}))}if(n.insights&&!s()){var c="boolean"==typeof n.insights?{}:n.insights;n.plugins.push(pn(c))}return l(n.plugins),function(e){var t,n,r=e.metadata,i=e.environment;if(null===(t=i.navigator)||void 0===t||null===(n=t.userAgent)||void 0===n?void 0:n.includes("Algolia Crawler")){var o=i.document.createElement("meta"),a=i.document.querySelector("head");o.name="algolia:metadata",setTimeout((function(){o.content=JSON.stringify(r),a.appendChild(o)}),0)}}({metadata:Pr({plugins:n.plugins,options:e}),environment:n.environment}),Rr(Rr({refresh:a,navigator:n.navigator},o),i)}({id:"docsearch",defaultActiveItemId:0,placeholder:o,openOnFocus:!0,initialState:{query:H,context:{searchSuggestions:[]}},insights:C,navigator:m,onStateChange:function(e){$(e.state)},getSources:function(e){var i=e.query,o=e.state,s=e.setContext,u=e.setStatus;if(!i)return x?[]:[{sourceId:"recentSearches",onSelect:function(e){var t=e.item,n=e.event;K(t),ci(n)||c()},getItemUrl:function(e){return e.item.url},getItems:function(){return W.getAll()}},{sourceId:"favoriteSearches",onSelect:function(e){var t=e.item,n=e.event;K(t),ci(n)||c()},getItemUrl:function(e){return e.item.url},getItems:function(){return V.getAll()}}];var p=Boolean(C);return z.search({requests:[xt({query:i,indexName:r,attributesToRetrieve:["hierarchy.lvl0","hierarchy.lvl1","hierarchy.lvl2","hierarchy.lvl3","hierarchy.lvl4","hierarchy.lvl5","hierarchy.lvl6","content","type","url"],attributesToSnippet:["hierarchy.lvl1:".concat(F.current),"hierarchy.lvl2:".concat(F.current),"hierarchy.lvl3:".concat(F.current),"hierarchy.lvl4:".concat(F.current),"hierarchy.lvl5:".concat(F.current),"hierarchy.lvl6:".concat(F.current),"content:".concat(F.current)],snippetEllipsisText:"…",highlightPreTag:"<mark>",highlightPostTag:"</mark>",hitsPerPage:20,clickAnalytics:p},a)]}).catch((function(e){throw"RetryError"===e.name&&u("error"),e})).then((function(e){var i=e.results[0],a=i.hits,u=i.nbHits,d=li(a,(function(e){return di(e)}),l);o.context.searchSuggestions.length<Object.keys(d).length&&s({searchSuggestions:Object.keys(d)}),s({nbHits:u});var h={};return p&&(h={__autocomplete_indexName:r,__autocomplete_queryID:i.queryID,__autocomplete_algoliaCredentials:{appId:t,apiKey:n}}),Object.values(d).map((function(e,t){return{sourceId:"hits".concat(t),onSelect:function(e){var t=e.item,n=e.event;K(t),ci(n)||c()},getItemUrl:function(e){return e.item.url},getItems:function(){return Object.values(li(e,(function(e){return e.hierarchy.lvl1}),l)).map(f).map((function(e){return e.map((function(t){var n=null,r=e.find((function(e){return"lvl1"===e.type&&e.hierarchy.lvl1===t.hierarchy.lvl1}));return"lvl1"!==t.type&&r&&(n=r),xt(xt({},t),{},{__docsearch_parent:n},h)}))})).flat()}}}))}))}})}),[r,a,l,z,c,W,V,K,H,o,m,f,x,C,t,n]),Q=J.getEnvironmentProps,Z=J.getRootProps,Y=J.refresh;return function(e){var t=e.getEnvironmentProps,n=e.panelElement,r=e.formElement,i=e.inputElement;ct.useEffect((function(){if(n&&r&&i){var e=t({panelElement:n,formElement:r,inputElement:i}),o=e.onTouchStart,a=e.onTouchMove;return window.addEventListener("touchstart",o),window.addEventListener("touchmove",a),function(){window.removeEventListener("touchstart",o),window.removeEventListener("touchmove",a)}}}),[t,n,r,i])}({getEnvironmentProps:Q,panelElement:U.current,formElement:N.current,inputElement:q.current}),function(e){var t=e.container;ct.useEffect((function(){if(t){var e=t.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), input:not([disabled])"),n=e[0],r=e[e.length-1];return t.addEventListener("keydown",i),function(){t.removeEventListener("keydown",i)}}function i(e){"Tab"===e.key&&(e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus()))}}),[t])}({container:R.current}),ct.useEffect((function(){return document.body.classList.add("DocSearch--active"),function(){var e,t;document.body.classList.remove("DocSearch--active"),null===(e=(t=window).scrollTo)||void 0===e||e.call(t,0,b)}}),[]),ct.useEffect((function(){window.matchMedia("(max-width: 768px)").matches&&(F.current=5)}),[]),ct.useEffect((function(){U.current&&(U.current.scrollTop=0)}),[D.query]),ct.useEffect((function(){H.length>0&&(Y(),q.current&&q.current.focus())}),[H,Y]),ct.useEffect((function(){function e(){if(M.current){var e=.01*window.innerHeight;M.current.style.setProperty("--docsearch-vh","".concat(e,"px"))}}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),ct.createElement("div",gt({ref:R},Z({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===D.status&&"DocSearch-Container--Stalled","error"===D.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),role:"button",tabIndex:0,onMouseDown:function(e){e.target===e.currentTarget&&c()}}),ct.createElement("div",{className:"DocSearch-Modal",ref:M},ct.createElement("header",{className:"DocSearch-SearchBar",ref:N},ct.createElement(_i,gt({},J,{state:D,autoFocus:0===H.length,inputRef:q,isFromSelection:Boolean(H)&&H===B,translations:A,onClose:c}))),ct.createElement("div",{className:"DocSearch-Dropdown",ref:U},ct.createElement(bi,gt({},J,{indexName:r,state:D,hitComponent:d,resultsFooterComponent:v,disableUserPersonalization:x,recentSearches:W,favoriteSearches:V,inputRef:q,translations:T,getMissingResultsUrl:P,onItemClick:function(e,t){G(e),K(e),ci(t)||c()}}))),ct.createElement("footer",{className:"DocSearch-Footer"},ct.createElement(qr,{translations:I}))))}function Gi(e){var t,n,r=ct.useRef(null),i=kt(ct.useState(!1),2),o=i[0],a=i[1],l=kt(ct.useState((null==e?void 0:e.initialQuery)||void 0),2),s=l[0],c=l[1],u=ct.useCallback((function(){a(!0)}),[a]),f=ct.useCallback((function(){a(!1),c(null==e?void 0:e.initialQuery)}),[a,e.initialQuery]);return function(e){var t=e.isOpen,n=e.onOpen,r=e.onClose,i=e.onInput,o=e.searchButtonRef;ct.useEffect((function(){function e(e){var a;if("Escape"===e.code&&t||"k"===(null===(a=e.key)||void 0===a?void 0:a.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)return e.preventDefault(),void(t?r():document.body.classList.contains("DocSearch--active")||n());o&&o.current===document.activeElement&&i&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&i(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,r,i,o])}({isOpen:o,onOpen:u,onClose:f,onInput:ct.useCallback((function(e){a(!0),c(e.key)}),[a,c]),searchButtonRef:r}),ct.createElement(ct.Fragment,null,ct.createElement(Dt,{ref:r,translations:null==e||null===(t=e.translations)||void 0===t?void 0:t.button,onClick:u}),o&&Ne(ct.createElement(Ki,gt({},e,{initialScrollY:window.scrollY,initialQuery:s,translations:null==e||null===(n=e.translations)||void 0===n?void 0:n.modal,onClose:f})),document.body))}n(281);var Ji={props:["options"],mounted(){this.initialize()},methods:{initialize(){!function(e){Ve(ct.createElement(Gi,r({},e,{transformSearchClient:function(t){return t.addAlgoliaAgent("docsearch.js",Vi),e.transformSearchClient?e.transformSearchClient(t):t}})),function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window;return"string"==typeof e?t.document.querySelector(e):e}(e.container,e.environment))}({container:"#docsearch-container",appId:"DZ8S6HN0MP",apiKey:"a34809e24ae1eb13ca3afc255d0a0cef",indexName:"mpxjs"})}},watch:{options(e){this.$el.innerHTML='<div id="docsearch-container"></div>',this.initialize(e)}}},Qi=n(4),Zi=Object(Qi.a)(Ji,(function(){this._self._c;return this._m(0)}),[function(){var e=this._self._c;return e("form",{staticClass:"algolia-search-wrapper search-box",attrs:{id:"search-form",role:"search"}},[e("div",{attrs:{id:"docsearch-container"}})])}],!1,null,null,null);t.default=Zi.exports},function(e,t){e.exports=function(e){var t=null==e?0:e.length;return t?e[t-1]:void 0}},function(e,t,n){e.exports=n(289)},function(e,t,n){"use strict";var r=n(14),i=n(6),o=n(144),a=n(5),l=n(3),s=n(89),c=n(146),u=n(147),f=n(7),p=n(13),d=n(18),h=n(90).IteratorPrototype,v=n(8),m=n(23),g=d("toStringTag"),b=TypeError,y=i.Iterator,_=m||!l(y)||y.prototype!==h||!f((function(){y({})})),w=function(){if(o(this,h),s(this)===h)throw new b("Abstract class Iterator not directly constructable")},x=function(e,t){v?c(h,e,{configurable:!0,get:function(){return t},set:function(t){if(a(this),this===h)throw new b("You can't redefine this property");p(this,e)?this[e]=t:u(this,e,t)}}):h[e]=t};p(h,g)||x(g,"Iterator"),!_&&p(h,"constructor")&&h.constructor!==Object||x("constructor",w),w.prototype=h,r({global:!0,constructor:!0,forced:_},{Iterator:w})},function(e,t,n){"use strict";var r={}.propertyIsEnumerable,i=Object.getOwnPropertyDescriptor,o=i&&!r.call({1:2},1);t.f=o?function(e){var t=i(this,e);return!!t&&t.enumerable}:r},function(e,t,n){"use strict";var r=n(16),i=n(12),o=n(74),a=n(36),l=n(132),s=n(18),c=TypeError,u=s("toPrimitive");e.exports=function(e,t){if(!i(e)||o(e))return e;var n,s=a(e,u);if(s){if(void 0===t&&(t="default"),n=r(s,e,t),!i(n)||o(n))return n;throw new c("Can't convert object to primitive value")}return void 0===t&&(t="number"),l(e,t)}},function(e,t,n){"use strict";var r=n(16),i=n(3),o=n(12),a=TypeError;e.exports=function(e,t){var n,l;if("string"===t&&i(n=e.toString)&&!o(l=r(n,e)))return l;if(i(n=e.valueOf)&&!o(l=r(n,e)))return l;if("string"!==t&&i(n=e.toString)&&!o(l=r(n,e)))return l;throw new a("Can't convert object to primitive value")}},function(e,t,n){"use strict";var r=n(8),i=n(13),o=Function.prototype,a=r&&Object.getOwnPropertyDescriptor,l=i(o,"name"),s=l&&"something"===function(){}.name,c=l&&(!r||r&&a(o,"name").configurable);e.exports={EXISTS:l,PROPER:s,CONFIGURABLE:c}},function(e,t,n){"use strict";var r=n(9),i=n(3),o=n(53),a=r(Function.toString);i(o.inspectSource)||(o.inspectSource=function(e){return a(e)}),e.exports=o.inspectSource},function(e,t,n){"use strict";var r=n(6),i=n(3),o=r.WeakMap;e.exports=i(o)&&/native code/.test(String(o))},function(e,t,n){"use strict";var r=n(34),i=n(9),o=n(137),a=n(142),l=n(5),s=i([].concat);e.exports=r("Reflect","ownKeys")||function(e){var t=o.f(l(e)),n=a.f;return n?s(t,n(e)):t}},function(e,t,n){"use strict";var r=n(87),i=n(58).concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return r(e,i)}},function(e,t,n){"use strict";var r=n(33),i=n(139),o=n(38),a=function(e){return function(t,n,a){var l=r(t),s=o(l);if(0===s)return!e&&-1;var c,u=i(a,s);if(e&&n!=n){for(;s>u;)if((c=l[u++])!=c)return!0}else for(;s>u;u++)if((e||u in l)&&l[u]===n)return e||u||0;return!e&&-1}};e.exports={includes:a(!0),indexOf:a(!1)}},function(e,t,n){"use strict";var r=n(88),i=Math.max,o=Math.min;e.exports=function(e,t){var n=r(e);return n<0?i(n+t,0):o(n,t)}},function(e,t,n){"use strict";var r=Math.ceil,i=Math.floor;e.exports=Math.trunc||function(e){var t=+e;return(t>0?i:r)(t)}},function(e,t,n){"use strict";var r=n(88),i=Math.min;e.exports=function(e){var t=r(e);return t>0?i(t,9007199254740991):0}},function(e,t,n){"use strict";t.f=Object.getOwnPropertySymbols},function(e,t,n){"use strict";var r=n(7),i=n(3),o=/#|\.prototype\./,a=function(e,t){var n=s[l(e)];return n===u||n!==c&&(i(t)?r(t):!!t)},l=a.normalize=function(e){return String(e).replace(o,".").toLowerCase()},s=a.data={},c=a.NATIVE="N",u=a.POLYFILL="P";e.exports=a},function(e,t,n){"use strict";var r=n(35),i=TypeError;e.exports=function(e,t){if(r(t,e))return e;throw new i("Incorrect invocation")}},function(e,t,n){"use strict";var r=n(7);e.exports=!r((function(){function e(){}return e.prototype.constructor=null,Object.getPrototypeOf(new e)!==e.prototype}))},function(e,t,n){"use strict";var r=n(84),i=n(20);e.exports=function(e,t,n){return n.get&&r(n.get,t,{getter:!0}),n.set&&r(n.set,t,{setter:!0}),i.f(e,t,n)}},function(e,t,n){"use strict";var r=n(8),i=n(20),o=n(32);e.exports=function(e,t,n){r?i.f(e,t,o(0,n)):e[t]=n}},function(e,t,n){"use strict";var r=n(8),i=n(83),o=n(20),a=n(5),l=n(33),s=n(149);t.f=r&&!i?Object.defineProperties:function(e,t){a(e);for(var n,r=l(t),i=s(t),c=i.length,u=0;c>u;)o.f(e,n=i[u++],r[n]);return e}},function(e,t,n){"use strict";var r=n(87),i=n(58);e.exports=Object.keys||function(e){return r(e,i)}},function(e,t,n){"use strict";var r=n(34);e.exports=r("document","documentElement")},function(e,t,n){"use strict";var r=n(14),i=n(16),o=n(11),a=n(5),l=n(26),s=n(92),c=n(93),u=n(23),f=s((function(){for(var e,t,n=this.iterator,r=this.predicate,o=this.next;;){if(e=a(i(o,n)),this.done=!!e.done)return;if(t=e.value,c(n,r,[t,this.counter++],!0))return t}}));r({target:"Iterator",proto:!0,real:!0,forced:u},{filter:function(e){return a(this),o(e),new f(l(this),{predicate:e})}})},function(e,t,n){"use strict";var r=n(55);e.exports=function(e,t,n){for(var i in t)r(e,i,t[i],n);return e}},function(e,t,n){"use strict";e.exports=function(e,t){return{value:e,done:t}}},function(e,t,n){"use strict";var r=n(14),i=n(155);r({target:"Iterator",proto:!0,real:!0,forced:n(23)},{map:i})},function(e,t,n){"use strict";var r=n(16),i=n(11),o=n(5),a=n(26),l=n(92),s=n(93),c=l((function(){var e=this.iterator,t=o(r(this.next,e));if(!(this.done=!!t.done))return s(e,this.mapper,[t.value,this.counter++],!0)}));e.exports=function(e){return o(this),i(e),new c(a(this),{mapper:e})}},function(e,t,n){"use strict";var r=n(14),i=n(157).left,o=n(158),a=n(77);r({target:"Array",proto:!0,forced:!n(159)&&a>79&&a<83||!o("reduce")},{reduce:function(e){var t=arguments.length;return i(this,e,t,t>1?arguments[1]:void 0)}})},function(e,t,n){"use strict";var r=n(11),i=n(37),o=n(72),a=n(38),l=TypeError,s="Reduce of empty array with no initial value",c=function(e){return function(t,n,c,u){var f=i(t),p=o(f),d=a(f);if(r(n),0===d&&c<2)throw new l(s);var h=e?d-1:0,v=e?-1:1;if(c<2)for(;;){if(h in p){u=p[h],h+=v;break}if(h+=v,e?h<0:d<=h)throw new l(s)}for(;e?h>=0:d>h;h+=v)h in p&&(u=n(u,p[h],h,f));return u}};e.exports={left:c(!1),right:c(!0)}},function(e,t,n){"use strict";var r=n(7);e.exports=function(e,t){var n=[][e];return!!n&&r((function(){n.call(null,t||function(){return 1},1)}))}},function(e,t,n){"use strict";var r=n(160);e.exports="NODE"===r},function(e,t,n){"use strict";var r=n(6),i=n(78),o=n(28),a=function(e){return i.slice(0,e.length)===e};e.exports=a("Bun/")?"BUN":a("Cloudflare-Workers")?"CLOUDFLARE":a("Deno/")?"DENO":a("Node.js/")?"NODE":r.Bun&&"string"==typeof Bun.version?"BUN":r.Deno&&"object"==typeof Deno.version?"DENO":"process"===o(r.process)?"NODE":r.window&&r.document?"BROWSER":"REST"},function(e,t,n){"use strict";var r=n(14),i=n(49),o=n(11),a=n(5),l=n(26);r({target:"Iterator",proto:!0,real:!0},{forEach:function(e){a(this),o(e);var t=l(this),n=0;i(t,(function(t){e(t,n++)}),{IS_RECORD:!0})}})},function(e,t,n){"use strict";var r=n(163),i=n(11),o=n(31),a=r(r.bind);e.exports=function(e,t){return i(e),void 0===t?e:o?a(e,t):function(){return e.apply(t,arguments)}}},function(e,t,n){"use strict";var r=n(28),i=n(9);e.exports=function(e){if("Function"===r(e))return i(e)}},function(e,t,n){"use strict";var r=n(18),i=n(94),o=r("iterator"),a=Array.prototype;e.exports=function(e){return void 0!==e&&(i.Array===e||a[o]===e)}},function(e,t,n){"use strict";var r=n(16),i=n(11),o=n(5),a=n(52),l=n(95),s=TypeError;e.exports=function(e,t){var n=arguments.length<2?l(e):t;if(i(n))return o(r(n,e));throw new s(a(e)+" is not iterable")}},function(e,t,n){"use strict";var r={};r[n(18)("toStringTag")]="z",e.exports="[object z]"===String(r)},function(e,t,n){"use strict";n(168)},function(e,t,n){"use strict";var r=n(14),i=n(49),o=n(11),a=n(5),l=n(26),s=TypeError;r({target:"Iterator",proto:!0,real:!0},{reduce:function(e){a(this),o(e);var t=l(this),n=arguments.length<2,r=n?void 0:arguments[1],c=0;if(i(t,(function(t){n?(n=!1,r=t):r=e(r,t,c),c++}),{IS_RECORD:!0}),n)throw new s("Reduce of empty iterator with no initial value");return r}})},function(e,t,n){"use strict";var r=n(14),i=n(6),o=n(170),a=n(171),l=i.WebAssembly,s=7!==new Error("e",{cause:7}).cause,c=function(e,t){var n={};n[e]=a(e,t,s),r({global:!0,constructor:!0,arity:1,forced:s},n)},u=function(e,t){if(l&&l[e]){var n={};n[e]=a("WebAssembly."+e,t,s),r({target:"WebAssembly",stat:!0,constructor:!0,arity:1,forced:s},n)}};c("Error",(function(e){return function(t){return o(e,this,arguments)}})),c("EvalError",(function(e){return function(t){return o(e,this,arguments)}})),c("RangeError",(function(e){return function(t){return o(e,this,arguments)}})),c("ReferenceError",(function(e){return function(t){return o(e,this,arguments)}})),c("SyntaxError",(function(e){return function(t){return o(e,this,arguments)}})),c("TypeError",(function(e){return function(t){return o(e,this,arguments)}})),c("URIError",(function(e){return function(t){return o(e,this,arguments)}})),u("CompileError",(function(e){return function(t){return o(e,this,arguments)}})),u("LinkError",(function(e){return function(t){return o(e,this,arguments)}})),u("RuntimeError",(function(e){return function(t){return o(e,this,arguments)}}))},function(e,t,n){"use strict";var r=n(31),i=Function.prototype,o=i.apply,a=i.call;e.exports="object"==typeof Reflect&&Reflect.apply||(r?a.bind(o):function(){return a.apply(o,arguments)})},function(e,t,n){"use strict";var r=n(34),i=n(13),o=n(24),a=n(35),l=n(97),s=n(86),c=n(175),u=n(176),f=n(177),p=n(179),d=n(180),h=n(8),v=n(23);e.exports=function(e,t,n,m){var g=m?2:1,b=e.split("."),y=b[b.length-1],_=r.apply(null,b);if(_){var w=_.prototype;if(!v&&i(w,"cause")&&delete w.cause,!n)return _;var x=r("Error"),S=t((function(e,t){var n=f(m?t:e,void 0),r=m?new _(e):new _;return void 0!==n&&o(r,"message",n),d(r,S,r.stack,2),this&&a(w,this)&&u(r,this,S),arguments.length>g&&p(r,arguments[g]),r}));if(S.prototype=w,"Error"!==y?l?l(S,x):s(S,x,{name:!0}):h&&"stackTraceLimit"in _&&(c(S,_,"stackTraceLimit"),c(S,_,"prepareStackTrace")),s(S,_),!v)try{w.name!==y&&o(w,"name",y),w.constructor=S}catch(e){}return S}}},function(e,t,n){"use strict";var r=n(9),i=n(11);e.exports=function(e,t,n){try{return r(i(Object.getOwnPropertyDescriptor(e,t)[n]))}catch(e){}}},function(e,t,n){"use strict";var r=n(174),i=String,o=TypeError;e.exports=function(e){if(r(e))return e;throw new o("Can't set "+i(e)+" as a prototype")}},function(e,t,n){"use strict";var r=n(12);e.exports=function(e){return r(e)||null===e}},function(e,t,n){"use strict";var r=n(20).f;e.exports=function(e,t,n){n in e||r(e,n,{configurable:!0,get:function(){return t[n]},set:function(e){t[n]=e}})}},function(e,t,n){"use strict";var r=n(3),i=n(12),o=n(97);e.exports=function(e,t,n){var a,l;return o&&r(a=t.constructor)&&a!==n&&i(l=a.prototype)&&l!==n.prototype&&o(e,l),e}},function(e,t,n){"use strict";var r=n(178);e.exports=function(e,t){return void 0===e?arguments.length<2?"":t:r(e)}},function(e,t,n){"use strict";var r=n(96),i=String;e.exports=function(e){if("Symbol"===r(e))throw new TypeError("Cannot convert a Symbol value to a string");return i(e)}},function(e,t,n){"use strict";var r=n(12),i=n(24);e.exports=function(e,t){r(t)&&"cause"in t&&i(e,"cause",t.cause)}},function(e,t,n){"use strict";var r=n(24),i=n(181),o=n(182),a=Error.captureStackTrace;e.exports=function(e,t,n,l){o&&(a?a(e,t):r(e,"stack",i(n,l)))}},function(e,t,n){"use strict";var r=n(9),i=Error,o=r("".replace),a=String(new i("zxcasd").stack),l=/\n\s*at [^:]*:[^\n]*/,s=l.test(a);e.exports=function(e,t){if(s&&"string"==typeof e&&!i.prepareStackTrace)for(;t--;)e=o(e,l,"");return e}},function(e,t,n){"use strict";var r=n(7),i=n(32);e.exports=!r((function(){var e=new Error("a");return!("stack"in e)||(Object.defineProperty(e,"stack",i(1,7)),7!==e.stack)}))},function(e,t,n){"use strict";var r=n(8),i=n(184),o=TypeError,a=Object.getOwnPropertyDescriptor,l=r&&!function(){if(void 0!==this)return!0;try{Object.defineProperty([],"length",{writable:!1}).length=1}catch(e){return e instanceof TypeError}}();e.exports=l?function(e,t){if(i(e)&&!a(e,"length").writable)throw new o("Cannot set read only .length");return e.length=t}:function(e,t){return e.length=t}},function(e,t,n){"use strict";var r=n(28);e.exports=Array.isArray||function(e){return"Array"===r(e)}},function(e,t,n){"use strict";var r=TypeError;e.exports=function(e){if(e>9007199254740991)throw r("Maximum allowed index exceeded");return e}},function(e,t,n){var r=n(98),i=n(187);e.exports=function e(t,n,o,a,l){var s=-1,c=t.length;for(o||(o=i),l||(l=[]);++s<c;){var u=t[s];n>0&&o(u)?n>1?e(u,n-1,o,a,l):r(l,u):a||(l[l.length]=u)}return l}},function(e,t,n){var r=n(29),i=n(60),o=n(15),a=r?r.isConcatSpreadable:void 0;e.exports=function(e){return o(e)||i(e)||!!(a&&e&&e[a])}},function(e,t,n){var r=n(27),i=n(22);e.exports=function(e){return i(e)&&"[object Arguments]"==r(e)}},function(e,t,n){var r=n(29),i=Object.prototype,o=i.hasOwnProperty,a=i.toString,l=r?r.toStringTag:void 0;e.exports=function(e){var t=o.call(e,l),n=e[l];try{e[l]=void 0;var r=!0}catch(e){}var i=a.call(e);return r&&(t?e[l]=n:delete e[l]),i}},function(e,t){var n=Object.prototype.toString;e.exports=function(e){return n.call(e)}},function(e,t,n){var r=n(192),i=n(248),o=n(68),a=n(15),l=n(258);e.exports=function(e){return"function"==typeof e?e:null==e?o:"object"==typeof e?a(e)?i(e[0],e[1]):r(e):l(e)}},function(e,t,n){var r=n(193),i=n(247),o=n(116);e.exports=function(e){var t=i(e);return 1==t.length&&t[0][2]?o(t[0][0],t[0][1]):function(n){return n===e||r(n,e,t)}}},function(e,t,n){var r=n(100),i=n(104);e.exports=function(e,t,n,o){var a=n.length,l=a,s=!o;if(null==e)return!l;for(e=Object(e);a--;){var c=n[a];if(s&&c[2]?c[1]!==e[c[0]]:!(c[0]in e))return!1}for(;++a<l;){var u=(c=n[a])[0],f=e[u],p=c[1];if(s&&c[2]){if(void 0===f&&!(u in e))return!1}else{var d=new r;if(o)var h=o(f,p,u,e,t,d);if(!(void 0===h?i(p,f,3,o,d):h))return!1}}return!0}},function(e,t){e.exports=function(){this.__data__=[],this.size=0}},function(e,t,n){var r=n(40),i=Array.prototype.splice;e.exports=function(e){var t=this.__data__,n=r(t,e);return!(n<0)&&(n==t.length-1?t.pop():i.call(t,n,1),--this.size,!0)}},function(e,t,n){var r=n(40);e.exports=function(e){var t=this.__data__,n=r(t,e);return n<0?void 0:t[n][1]}},function(e,t,n){var r=n(40);e.exports=function(e){return r(this.__data__,e)>-1}},function(e,t,n){var r=n(40);e.exports=function(e,t){var n=this.__data__,i=r(n,e);return i<0?(++this.size,n.push([e,t])):n[i][1]=t,this}},function(e,t,n){var r=n(39);e.exports=function(){this.__data__=new r,this.size=0}},function(e,t){e.exports=function(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n}},function(e,t){e.exports=function(e){return this.__data__.get(e)}},function(e,t){e.exports=function(e){return this.__data__.has(e)}},function(e,t,n){var r=n(39),i=n(61),o=n(63);e.exports=function(e,t){var n=this.__data__;if(n instanceof r){var a=n.__data__;if(!i||a.length<199)return a.push([e,t]),this.size=++n.size,this;n=this.__data__=new o(a)}return n.set(e,t),this.size=n.size,this}},function(e,t,n){var r=n(102),i=n(205),o=n(62),a=n(103),l=/^\[object .+?Constructor\]$/,s=Function.prototype,c=Object.prototype,u=s.toString,f=c.hasOwnProperty,p=RegExp("^"+u.call(f).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");e.exports=function(e){return!(!o(e)||i(e))&&(r(e)?p:l).test(a(e))}},function(e,t,n){var r,i=n(206),o=(r=/[^.]+$/.exec(i&&i.keys&&i.keys.IE_PROTO||""))?"Symbol(src)_1."+r:"";e.exports=function(e){return!!o&&o in e}},function(e,t,n){var r=n(17)["__core-js_shared__"];e.exports=r},function(e,t){e.exports=function(e,t){return null==e?void 0:e[t]}},function(e,t,n){var r=n(209),i=n(39),o=n(61);e.exports=function(){this.size=0,this.__data__={hash:new r,map:new(o||i),string:new r}}},function(e,t,n){var r=n(210),i=n(211),o=n(212),a=n(213),l=n(214);function s(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}s.prototype.clear=r,s.prototype.delete=i,s.prototype.get=o,s.prototype.has=a,s.prototype.set=l,e.exports=s},function(e,t,n){var r=n(41);e.exports=function(){this.__data__=r?r(null):{},this.size=0}},function(e,t){e.exports=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}},function(e,t,n){var r=n(41),i=Object.prototype.hasOwnProperty;e.exports=function(e){var t=this.__data__;if(r){var n=t[e];return"__lodash_hash_undefined__"===n?void 0:n}return i.call(t,e)?t[e]:void 0}},function(e,t,n){var r=n(41),i=Object.prototype.hasOwnProperty;e.exports=function(e){var t=this.__data__;return r?void 0!==t[e]:i.call(t,e)}},function(e,t,n){var r=n(41);e.exports=function(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=r&&void 0===t?"__lodash_hash_undefined__":t,this}},function(e,t,n){var r=n(42);e.exports=function(e){var t=r(this,e).delete(e);return this.size-=t?1:0,t}},function(e,t){e.exports=function(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}},function(e,t,n){var r=n(42);e.exports=function(e){return r(this,e).get(e)}},function(e,t,n){var r=n(42);e.exports=function(e){return r(this,e).has(e)}},function(e,t,n){var r=n(42);e.exports=function(e,t){var n=r(this,e),i=n.size;return n.set(e,t),this.size+=n.size==i?0:1,this}},function(e,t,n){var r=n(100),i=n(105),o=n(224),a=n(227),l=n(243),s=n(15),c=n(109),u=n(112),f="[object Object]",p=Object.prototype.hasOwnProperty;e.exports=function(e,t,n,d,h,v){var m=s(e),g=s(t),b=m?"[object Array]":l(e),y=g?"[object Array]":l(t),_=(b="[object Arguments]"==b?f:b)==f,w=(y="[object Arguments]"==y?f:y)==f,x=b==y;if(x&&c(e)){if(!c(t))return!1;m=!0,_=!1}if(x&&!_)return v||(v=new r),m||u(e)?i(e,t,n,d,h,v):o(e,t,b,n,d,h,v);if(!(1&n)){var S=_&&p.call(e,"__wrapped__"),O=w&&p.call(t,"__wrapped__");if(S||O){var j=S?e.value():e,k=O?t.value():t;return v||(v=new r),h(j,k,n,d,v)}}return!!x&&(v||(v=new r),a(e,t,n,d,h,v))}},function(e,t){e.exports=function(e){return this.__data__.set(e,"__lodash_hash_undefined__"),this}},function(e,t){e.exports=function(e){return this.__data__.has(e)}},function(e,t){e.exports=function(e,t){for(var n=-1,r=null==e?0:e.length;++n<r;)if(t(e[n],n,e))return!0;return!1}},function(e,t,n){var r=n(29),i=n(225),o=n(101),a=n(105),l=n(226),s=n(64),c=r?r.prototype:void 0,u=c?c.valueOf:void 0;e.exports=function(e,t,n,r,c,f,p){switch(n){case"[object DataView]":if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case"[object ArrayBuffer]":return!(e.byteLength!=t.byteLength||!f(new i(e),new i(t)));case"[object Boolean]":case"[object Date]":case"[object Number]":return o(+e,+t);case"[object Error]":return e.name==t.name&&e.message==t.message;case"[object RegExp]":case"[object String]":return e==t+"";case"[object Map]":var d=l;case"[object Set]":var h=1&r;if(d||(d=s),e.size!=t.size&&!h)return!1;var v=p.get(e);if(v)return v==t;r|=2,p.set(e,t);var m=a(d(e),d(t),r,c,f,p);return p.delete(e),m;case"[object Symbol]":if(u)return u.call(e)==u.call(t)}return!1}},function(e,t,n){var r=n(17).Uint8Array;e.exports=r},function(e,t){e.exports=function(e){var t=-1,n=Array(e.size);return e.forEach((function(e,r){n[++t]=[r,e]})),n}},function(e,t,n){var r=n(228),i=Object.prototype.hasOwnProperty;e.exports=function(e,t,n,o,a,l){var s=1&n,c=r(e),u=c.length;if(u!=r(t).length&&!s)return!1;for(var f=u;f--;){var p=c[f];if(!(s?p in t:i.call(t,p)))return!1}var d=l.get(e),h=l.get(t);if(d&&h)return d==t&&h==e;var v=!0;l.set(e,t),l.set(t,e);for(var m=s;++f<u;){var g=e[p=c[f]],b=t[p];if(o)var y=s?o(b,g,p,t,e,l):o(g,b,p,e,t,l);if(!(void 0===y?g===b||a(g,b,n,o,l):y)){v=!1;break}m||(m="constructor"==p)}if(v&&!m){var _=e.constructor,w=t.constructor;_==w||!("constructor"in e)||!("constructor"in t)||"function"==typeof _&&_ instanceof _&&"function"==typeof w&&w instanceof w||(v=!1)}return l.delete(e),l.delete(t),v}},function(e,t,n){var r=n(229),i=n(230),o=n(108);e.exports=function(e){return r(e,o,i)}},function(e,t,n){var r=n(98),i=n(15);e.exports=function(e,t,n){var o=t(e);return i(e)?o:r(o,n(e))}},function(e,t,n){var r=n(231),i=n(232),o=Object.prototype.propertyIsEnumerable,a=Object.getOwnPropertySymbols,l=a?function(e){return null==e?[]:(e=Object(e),r(a(e),(function(t){return o.call(e,t)})))}:i;e.exports=l},function(e,t){e.exports=function(e,t){for(var n=-1,r=null==e?0:e.length,i=0,o=[];++n<r;){var a=e[n];t(a,n,e)&&(o[i++]=a)}return o}},function(e,t){e.exports=function(){return[]}},function(e,t,n){var r=n(234),i=n(60),o=n(15),a=n(109),l=n(111),s=n(112),c=Object.prototype.hasOwnProperty;e.exports=function(e,t){var n=o(e),u=!n&&i(e),f=!n&&!u&&a(e),p=!n&&!u&&!f&&s(e),d=n||u||f||p,h=d?r(e.length,String):[],v=h.length;for(var m in e)!t&&!c.call(e,m)||d&&("length"==m||f&&("offset"==m||"parent"==m)||p&&("buffer"==m||"byteLength"==m||"byteOffset"==m)||l(m,v))||h.push(m);return h}},function(e,t){e.exports=function(e,t){for(var n=-1,r=Array(e);++n<e;)r[n]=t(n);return r}},function(e,t){e.exports=function(){return!1}},function(e,t,n){var r=n(27),i=n(65),o=n(22),a={};a["[object Float32Array]"]=a["[object Float64Array]"]=a["[object Int8Array]"]=a["[object Int16Array]"]=a["[object Int32Array]"]=a["[object Uint8Array]"]=a["[object Uint8ClampedArray]"]=a["[object Uint16Array]"]=a["[object Uint32Array]"]=!0,a["[object Arguments]"]=a["[object Array]"]=a["[object ArrayBuffer]"]=a["[object Boolean]"]=a["[object DataView]"]=a["[object Date]"]=a["[object Error]"]=a["[object Function]"]=a["[object Map]"]=a["[object Number]"]=a["[object Object]"]=a["[object RegExp]"]=a["[object Set]"]=a["[object String]"]=a["[object WeakMap]"]=!1,e.exports=function(e){return o(e)&&i(e.length)&&!!a[r(e)]}},function(e,t){e.exports=function(e){return function(t){return e(t)}}},function(e,t,n){(function(e){var r=n(99),i=t&&!t.nodeType&&t,o=i&&"object"==typeof e&&e&&!e.nodeType&&e,a=o&&o.exports===i&&r.process,l=function(){try{var e=o&&o.require&&o.require("util").types;return e||a&&a.binding&&a.binding("util")}catch(e){}}();e.exports=l}).call(this,n(110)(e))},function(e,t,n){var r=n(240),i=n(241),o=Object.prototype.hasOwnProperty;e.exports=function(e){if(!r(e))return i(e);var t=[];for(var n in Object(e))o.call(e,n)&&"constructor"!=n&&t.push(n);return t}},function(e,t){var n=Object.prototype;e.exports=function(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||n)}},function(e,t,n){var r=n(242)(Object.keys,Object);e.exports=r},function(e,t){e.exports=function(e,t){return function(n){return e(t(n))}}},function(e,t,n){var r=n(244),i=n(61),o=n(245),a=n(114),l=n(246),s=n(27),c=n(103),u=c(r),f=c(i),p=c(o),d=c(a),h=c(l),v=s;(r&&"[object DataView]"!=v(new r(new ArrayBuffer(1)))||i&&"[object Map]"!=v(new i)||o&&"[object Promise]"!=v(o.resolve())||a&&"[object Set]"!=v(new a)||l&&"[object WeakMap]"!=v(new l))&&(v=function(e){var t=s(e),n="[object Object]"==t?e.constructor:void 0,r=n?c(n):"";if(r)switch(r){case u:return"[object DataView]";case f:return"[object Map]";case p:return"[object Promise]";case d:return"[object Set]";case h:return"[object WeakMap]"}return t}),e.exports=v},function(e,t,n){var r=n(21)(n(17),"DataView");e.exports=r},function(e,t,n){var r=n(21)(n(17),"Promise");e.exports=r},function(e,t,n){var r=n(21)(n(17),"WeakMap");e.exports=r},function(e,t,n){var r=n(115),i=n(108);e.exports=function(e){for(var t=i(e),n=t.length;n--;){var o=t[n],a=e[o];t[n]=[o,a,r(a)]}return t}},function(e,t,n){var r=n(104),i=n(44),o=n(255),a=n(66),l=n(115),s=n(116),c=n(43);e.exports=function(e,t){return a(e)&&l(t)?s(c(e),t):function(n){var a=i(n,e);return void 0===a&&a===t?o(n,e):r(t,a,3)}}},function(e,t,n){var r=n(250),i=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,o=/\\(\\)?/g,a=r((function(e){var t=[];return 46===e.charCodeAt(0)&&t.push(""),e.replace(i,(function(e,n,r,i){t.push(r?i.replace(o,"$1"):n||e)})),t}));e.exports=a},function(e,t,n){var r=n(251);e.exports=function(e){var t=r(e,(function(e){return 500===n.size&&n.clear(),e})),n=t.cache;return t}},function(e,t,n){var r=n(63);function i(e,t){if("function"!=typeof e||null!=t&&"function"!=typeof t)throw new TypeError("Expected a function");var n=function(){var r=arguments,i=t?t.apply(this,r):r[0],o=n.cache;if(o.has(i))return o.get(i);var a=e.apply(this,r);return n.cache=o.set(i,a)||o,a};return n.cache=new(i.Cache||r),n}i.Cache=r,e.exports=i},function(e,t,n){var r=n(253);e.exports=function(e){return null==e?"":r(e)}},function(e,t,n){var r=n(29),i=n(254),o=n(15),a=n(67),l=r?r.prototype:void 0,s=l?l.toString:void 0;e.exports=function e(t){if("string"==typeof t)return t;if(o(t))return i(t,e)+"";if(a(t))return s?s.call(t):"";var n=t+"";return"0"==n&&1/t==-1/0?"-0":n}},function(e,t){e.exports=function(e,t){for(var n=-1,r=null==e?0:e.length,i=Array(r);++n<r;)i[n]=t(e[n],n,e);return i}},function(e,t,n){var r=n(256),i=n(257);e.exports=function(e,t){return null!=e&&i(e,t,r)}},function(e,t){e.exports=function(e,t){return null!=e&&t in Object(e)}},function(e,t,n){var r=n(118),i=n(60),o=n(15),a=n(111),l=n(65),s=n(43);e.exports=function(e,t,n){for(var c=-1,u=(t=r(t,e)).length,f=!1;++c<u;){var p=s(t[c]);if(!(f=null!=e&&n(e,p)))break;e=e[p]}return f||++c!=u?f:!!(u=null==e?0:e.length)&&l(u)&&a(p,u)&&(o(e)||i(e))}},function(e,t,n){var r=n(259),i=n(260),o=n(66),a=n(43);e.exports=function(e){return o(e)?r(a(e)):i(e)}},function(e,t){e.exports=function(e){return function(t){return null==t?void 0:t[e]}}},function(e,t,n){var r=n(117);e.exports=function(e){return function(t){return r(t,e)}}},function(e,t,n){var r=n(68),i=n(262),o=n(264);e.exports=function(e,t){return o(i(e,t,r),e+"")}},function(e,t,n){var r=n(263),i=Math.max;e.exports=function(e,t,n){return t=i(void 0===t?e.length-1:t,0),function(){for(var o=arguments,a=-1,l=i(o.length-t,0),s=Array(l);++a<l;)s[a]=o[t+a];a=-1;for(var c=Array(t+1);++a<t;)c[a]=o[a];return c[t]=n(s),r(e,this,c)}}},function(e,t){e.exports=function(e,t,n){switch(n.length){case 0:return e.call(t);case 1:return e.call(t,n[0]);case 2:return e.call(t,n[0],n[1]);case 3:return e.call(t,n[0],n[1],n[2])}return e.apply(t,n)}},function(e,t,n){var r=n(265),i=n(268)(r);e.exports=i},function(e,t,n){var r=n(266),i=n(267),o=n(68),a=i?function(e,t){return i(e,"toString",{configurable:!0,enumerable:!1,value:r(t),writable:!0})}:o;e.exports=a},function(e,t){e.exports=function(e){return function(){return e}}},function(e,t,n){var r=n(21),i=function(){try{var e=r(Object,"defineProperty");return e({},"",{}),e}catch(e){}}();e.exports=i},function(e,t){var n=Date.now;e.exports=function(e){var t=0,r=0;return function(){var i=n(),o=16-(i-r);if(r=i,o>0){if(++t>=800)return arguments[0]}else t=0;return e.apply(void 0,arguments)}}},function(e,t,n){var r=n(106),i=n(270),o=n(275),a=n(107),l=n(276),s=n(64);e.exports=function(e,t,n){var c=-1,u=i,f=e.length,p=!0,d=[],h=d;if(n)p=!1,u=o;else if(f>=200){var v=t?null:l(e);if(v)return s(v);p=!1,u=a,h=new r}else h=t?[]:d;e:for(;++c<f;){var m=e[c],g=t?t(m):m;if(m=n||0!==m?m:0,p&&g==g){for(var b=h.length;b--;)if(h[b]===g)continue e;t&&h.push(g),d.push(m)}else u(h,g,n)||(h!==d&&h.push(g),d.push(m))}return d}},function(e,t,n){var r=n(271);e.exports=function(e,t){return!!(null==e?0:e.length)&&r(e,t,0)>-1}},function(e,t,n){var r=n(272),i=n(273),o=n(274);e.exports=function(e,t,n){return t==t?o(e,t,n):r(e,i,n)}},function(e,t){e.exports=function(e,t,n,r){for(var i=e.length,o=n+(r?1:-1);r?o--:++o<i;)if(t(e[o],o,e))return o;return-1}},function(e,t){e.exports=function(e){return e!=e}},function(e,t){e.exports=function(e,t,n){for(var r=n-1,i=e.length;++r<i;)if(e[r]===t)return r;return-1}},function(e,t){e.exports=function(e,t,n){for(var r=-1,i=null==e?0:e.length;++r<i;)if(n(t,e[r]))return!0;return!1}},function(e,t,n){var r=n(114),i=n(277),o=n(64),a=r&&1/o(new r([,-0]))[1]==1/0?function(e){return new r(e)}:i;e.exports=a},function(e,t){e.exports=function(){}},function(e,t,n){var r=n(113),i=n(22);e.exports=function(e){return i(e)&&r(e)}},function(e,t,n){"use strict";var r=n(14),i=n(49),o=n(11),a=n(5),l=n(26);r({target:"Iterator",proto:!0,real:!0},{some:function(e){a(this),o(e);var t=l(this),n=0;return i(t,(function(t,r){if(e(t,n++))return r()}),{IS_RECORD:!0,INTERRUPTED:!0}).stopped}})},function(e,t,n){"use strict";n(119)},function(e,t,n){},function(e,t,n){"use strict";n(120)},function(e,t){},function(e,t,n){},function(e,t,n){},function(e,t,n){"use strict";n(121)},function(e,t,n){"use strict";n(122)},function(e,t,n){"use strict";n(123)},function(e,t,n){"use strict";n.r(t);n(10),n(19),n(30);var r=n(2);function i(e,t){for(var n in t)e[n]=t[n];return e}var o=/[!'()*]/g,a=function(e){return"%"+e.charCodeAt(0).toString(16)},l=/%2C/g,s=function(e){return encodeURIComponent(e).replace(o,a).replace(l,",")};function c(e){try{return decodeURIComponent(e)}catch(e){0}return e}var u=function(e){return null==e||"object"==typeof e?e:String(e)};function f(e){var t={};return(e=e.trim().replace(/^(\?|#|&)/,""))?(e.split("&").forEach((function(e){var n=e.replace(/\+/g," ").split("="),r=c(n.shift()),i=n.length>0?c(n.join("=")):null;void 0===t[r]?t[r]=i:Array.isArray(t[r])?t[r].push(i):t[r]=[t[r],i]})),t):t}function p(e){var t=e?Object.keys(e).map((function(t){var n=e[t];if(void 0===n)return"";if(null===n)return s(t);if(Array.isArray(n)){var r=[];return n.forEach((function(e){void 0!==e&&(null===e?r.push(s(t)):r.push(s(t)+"="+s(e)))})),r.join("&")}return s(t)+"="+s(n)})).filter((function(e){return e.length>0})).join("&"):null;return t?"?"+t:""}var d=/\/?$/;function h(e,t,n,r){var i=r&&r.options.stringifyQuery,o=t.query||{};try{o=v(o)}catch(e){}var a={name:t.name||e&&e.name,meta:e&&e.meta||{},path:t.path||"/",hash:t.hash||"",query:o,params:t.params||{},fullPath:b(t,i),matched:e?g(e):[]};return n&&(a.redirectedFrom=b(n,i)),Object.freeze(a)}function v(e){if(Array.isArray(e))return e.map(v);if(e&&"object"==typeof e){var t={};for(var n in e)t[n]=v(e[n]);return t}return e}var m=h(null,{path:"/"});function g(e){for(var t=[];e;)t.unshift(e),e=e.parent;return t}function b(e,t){var n=e.path,r=e.query;void 0===r&&(r={});var i=e.hash;return void 0===i&&(i=""),(n||"/")+(t||p)(r)+i}function y(e,t,n){return t===m?e===t:!!t&&(e.path&&t.path?e.path.replace(d,"")===t.path.replace(d,"")&&(n||e.hash===t.hash&&_(e.query,t.query)):!(!e.name||!t.name)&&(e.name===t.name&&(n||e.hash===t.hash&&_(e.query,t.query)&&_(e.params,t.params))))}function _(e,t){if(void 0===e&&(e={}),void 0===t&&(t={}),!e||!t)return e===t;var n=Object.keys(e).sort(),r=Object.keys(t).sort();return n.length===r.length&&n.every((function(n,i){var o=e[n];if(r[i]!==n)return!1;var a=t[n];return null==o||null==a?o===a:"object"==typeof o&&"object"==typeof a?_(o,a):String(o)===String(a)}))}function w(e){for(var t=0;t<e.matched.length;t++){var n=e.matched[t];for(var r in n.instances){var i=n.instances[r],o=n.enteredCbs[r];if(i&&o){delete n.enteredCbs[r];for(var a=0;a<o.length;a++)i._isBeingDestroyed||o[a](i)}}}}var x={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(e,t){var n=t.props,r=t.children,o=t.parent,a=t.data;a.routerView=!0;for(var l=o.$createElement,s=n.name,c=o.$route,u=o._routerViewCache||(o._routerViewCache={}),f=0,p=!1;o&&o._routerRoot!==o;){var d=o.$vnode?o.$vnode.data:{};d.routerView&&f++,d.keepAlive&&o._directInactive&&o._inactive&&(p=!0),o=o.$parent}if(a.routerViewDepth=f,p){var h=u[s],v=h&&h.component;return v?(h.configProps&&S(v,a,h.route,h.configProps),l(v,a,r)):l()}var m=c.matched[f],g=m&&m.components[s];if(!m||!g)return u[s]=null,l();u[s]={component:g},a.registerRouteInstance=function(e,t){var n=m.instances[s];(t&&n!==e||!t&&n===e)&&(m.instances[s]=t)},(a.hook||(a.hook={})).prepatch=function(e,t){m.instances[s]=t.componentInstance},a.hook.init=function(e){e.data.keepAlive&&e.componentInstance&&e.componentInstance!==m.instances[s]&&(m.instances[s]=e.componentInstance),w(c)};var b=m.props&&m.props[s];return b&&(i(u[s],{route:c,configProps:b}),S(g,a,c,b)),l(g,a,r)}};function S(e,t,n,r){var o=t.props=function(e,t){switch(typeof t){case"undefined":return;case"object":return t;case"function":return t(e);case"boolean":return t?e.params:void 0;default:0}}(n,r);if(o){o=t.props=i({},o);var a=t.attrs=t.attrs||{};for(var l in o)e.props&&l in e.props||(a[l]=o[l],delete o[l])}}function O(e,t,n){var r=e.charAt(0);if("/"===r)return e;if("?"===r||"#"===r)return t+e;var i=t.split("/");n&&i[i.length-1]||i.pop();for(var o=e.replace(/^\//,"").split("/"),a=0;a<o.length;a++){var l=o[a];".."===l?i.pop():"."!==l&&i.push(l)}return""!==i[0]&&i.unshift(""),i.join("/")}function j(e){return e.replace(/\/(?:\s*\/)+/g,"/")}var k=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)},P=F,E=L,C=function(e,t){return $(L(e,t),t)},I=$,A=q,T=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function L(e,t){for(var n,r=[],i=0,o=0,a="",l=t&&t.delimiter||"/";null!=(n=T.exec(e));){var s=n[0],c=n[1],u=n.index;if(a+=e.slice(o,u),o=u+s.length,c)a+=c[1];else{var f=e[o],p=n[2],d=n[3],h=n[4],v=n[5],m=n[6],g=n[7];a&&(r.push(a),a="");var b=null!=p&&null!=f&&f!==p,y="+"===m||"*"===m,_="?"===m||"*"===m,w=n[2]||l,x=h||v;r.push({name:d||i++,prefix:p||"",delimiter:w,optional:_,repeat:y,partial:b,asterisk:!!g,pattern:x?M(x):g?".*":"[^"+R(w)+"]+?"})}}return o<e.length&&(a+=e.substr(o)),a&&r.push(a),r}function D(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function $(e,t){for(var n=new Array(e.length),r=0;r<e.length;r++)"object"==typeof e[r]&&(n[r]=new RegExp("^(?:"+e[r].pattern+")$",U(t)));return function(t,r){for(var i="",o=t||{},a=(r||{}).pretty?D:encodeURIComponent,l=0;l<e.length;l++){var s=e[l];if("string"!=typeof s){var c,u=o[s.name];if(null==u){if(s.optional){s.partial&&(i+=s.prefix);continue}throw new TypeError('Expected "'+s.name+'" to be defined')}if(k(u)){if(!s.repeat)throw new TypeError('Expected "'+s.name+'" to not repeat, but received `'+JSON.stringify(u)+"`");if(0===u.length){if(s.optional)continue;throw new TypeError('Expected "'+s.name+'" to not be empty')}for(var f=0;f<u.length;f++){if(c=a(u[f]),!n[l].test(c))throw new TypeError('Expected all "'+s.name+'" to match "'+s.pattern+'", but received `'+JSON.stringify(c)+"`");i+=(0===f?s.prefix:s.delimiter)+c}}else{if(c=s.asterisk?encodeURI(u).replace(/[?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})):a(u),!n[l].test(c))throw new TypeError('Expected "'+s.name+'" to match "'+s.pattern+'", but received "'+c+'"');i+=s.prefix+c}}else i+=s}return i}}function R(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function M(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function N(e,t){return e.keys=t,e}function U(e){return e&&e.sensitive?"":"i"}function q(e,t,n){k(t)||(n=t||n,t=[]);for(var r=(n=n||{}).strict,i=!1!==n.end,o="",a=0;a<e.length;a++){var l=e[a];if("string"==typeof l)o+=R(l);else{var s=R(l.prefix),c="(?:"+l.pattern+")";t.push(l),l.repeat&&(c+="(?:"+s+c+")*"),o+=c=l.optional?l.partial?s+"("+c+")?":"(?:"+s+"("+c+"))?":s+"("+c+")"}}var u=R(n.delimiter||"/"),f=o.slice(-u.length)===u;return r||(o=(f?o.slice(0,-u.length):o)+"(?:"+u+"(?=$))?"),o+=i?"$":r&&f?"":"(?="+u+"|$)",N(new RegExp("^"+o,U(n)),t)}function F(e,t,n){return k(t)||(n=t||n,t=[]),n=n||{},e instanceof RegExp?function(e,t){var n=e.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)t.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return N(e,t)}(e,t):k(e)?function(e,t,n){for(var r=[],i=0;i<e.length;i++)r.push(F(e[i],t,n).source);return N(new RegExp("(?:"+r.join("|")+")",U(n)),t)}(e,t,n):function(e,t,n){return q(L(e,n),t,n)}(e,t,n)}P.parse=E,P.compile=C,P.tokensToFunction=I,P.tokensToRegExp=A;var B=Object.create(null);function H(e,t,n){t=t||{};try{var r=B[e]||(B[e]=P.compile(e));return"string"==typeof t.pathMatch&&(t[0]=t.pathMatch),r(t,{pretty:!0})}catch(e){return""}finally{delete t[0]}}function z(e,t,n,r){var o="string"==typeof e?{path:e}:e;if(o._normalized)return o;if(o.name){var a=(o=i({},e)).params;return a&&"object"==typeof a&&(o.params=i({},a)),o}if(!o.path&&o.params&&t){(o=i({},o))._normalized=!0;var l=i(i({},t.params),o.params);if(t.name)o.name=t.name,o.params=l;else if(t.matched.length){var s=t.matched[t.matched.length-1].path;o.path=H(s,l,t.path)}else 0;return o}var c=function(e){var t="",n="",r=e.indexOf("#");r>=0&&(t=e.slice(r),e=e.slice(0,r));var i=e.indexOf("?");return i>=0&&(n=e.slice(i+1),e=e.slice(0,i)),{path:e,query:n,hash:t}}(o.path||""),p=t&&t.path||"/",d=c.path?O(c.path,p,n||o.append):p,h=function(e,t,n){void 0===t&&(t={});var r,i=n||f;try{r=i(e||"")}catch(e){r={}}for(var o in t){var a=t[o];r[o]=Array.isArray(a)?a.map(u):u(a)}return r}(c.query,o.query,r&&r.options.parseQuery),v=o.hash||c.hash;return v&&"#"!==v.charAt(0)&&(v="#"+v),{_normalized:!0,path:d,query:h,hash:v}}var V,W=function(){},K={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},custom:Boolean,exact:Boolean,exactPath:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,ariaCurrentValue:{type:String,default:"page"},event:{type:[String,Array],default:"click"}},render:function(e){var t=this,n=this.$router,r=this.$route,o=n.resolve(this.to,r,this.append),a=o.location,l=o.route,s=o.href,c={},u=n.options.linkActiveClass,f=n.options.linkExactActiveClass,p=null==u?"router-link-active":u,v=null==f?"router-link-exact-active":f,m=null==this.activeClass?p:this.activeClass,g=null==this.exactActiveClass?v:this.exactActiveClass,b=l.redirectedFrom?h(null,z(l.redirectedFrom),null,n):l;c[g]=y(r,b,this.exactPath),c[m]=this.exact||this.exactPath?c[g]:function(e,t){return 0===e.path.replace(d,"/").indexOf(t.path.replace(d,"/"))&&(!t.hash||e.hash===t.hash)&&function(e,t){for(var n in t)if(!(n in e))return!1;return!0}(e.query,t.query)}(r,b);var _=c[g]?this.ariaCurrentValue:null,w=function(e){G(e)&&(t.replace?n.replace(a,W):n.push(a,W))},x={click:G};Array.isArray(this.event)?this.event.forEach((function(e){x[e]=w})):x[this.event]=w;var S={class:c},O=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:s,route:l,navigate:w,isActive:c[m],isExactActive:c[g]});if(O){if(1===O.length)return O[0];if(O.length>1||!O.length)return 0===O.length?e():e("span",{},O)}if("a"===this.tag)S.on=x,S.attrs={href:s,"aria-current":_};else{var j=function e(t){var n;if(t)for(var r=0;r<t.length;r++){if("a"===(n=t[r]).tag)return n;if(n.children&&(n=e(n.children)))return n}}(this.$slots.default);if(j){j.isStatic=!1;var k=j.data=i({},j.data);for(var P in k.on=k.on||{},k.on){var E=k.on[P];P in x&&(k.on[P]=Array.isArray(E)?E:[E])}for(var C in x)C in k.on?k.on[C].push(x[C]):k.on[C]=w;var I=j.data.attrs=i({},j.data.attrs);I.href=s,I["aria-current"]=_}else S.on=x}return e(this.tag,S,this.$slots.default)}};function G(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey||e.defaultPrevented||void 0!==e.button&&0!==e.button)){if(e.currentTarget&&e.currentTarget.getAttribute){var t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}var J="undefined"!=typeof window;function Q(e,t,n,r,i){var o=t||[],a=n||Object.create(null),l=r||Object.create(null);e.forEach((function(e){!function e(t,n,r,i,o,a){var l=i.path,s=i.name;0;var c=i.pathToRegexpOptions||{},u=function(e,t,n){n||(e=e.replace(/\/$/,""));if("/"===e[0])return e;if(null==t)return e;return j(t.path+"/"+e)}(l,o,c.strict);"boolean"==typeof i.caseSensitive&&(c.sensitive=i.caseSensitive);var f={path:u,regex:Z(u,c),components:i.components||{default:i.component},alias:i.alias?"string"==typeof i.alias?[i.alias]:i.alias:[],instances:{},enteredCbs:{},name:s,parent:o,matchAs:a,redirect:i.redirect,beforeEnter:i.beforeEnter,meta:i.meta||{},props:null==i.props?{}:i.components?i.props:{default:i.props}};i.children&&i.children.forEach((function(i){var o=a?j(a+"/"+i.path):void 0;e(t,n,r,i,f,o)}));n[f.path]||(t.push(f.path),n[f.path]=f);if(void 0!==i.alias)for(var p=Array.isArray(i.alias)?i.alias:[i.alias],d=0;d<p.length;++d){0;var h={path:p[d],children:i.children};e(t,n,r,h,o,f.path||"/")}s&&(r[s]||(r[s]=f))}(o,a,l,e,i)}));for(var s=0,c=o.length;s<c;s++)"*"===o[s]&&(o.push(o.splice(s,1)[0]),c--,s--);return{pathList:o,pathMap:a,nameMap:l}}function Z(e,t){return P(e,[],t)}function Y(e,t){var n=Q(e),r=n.pathList,i=n.pathMap,o=n.nameMap;function a(e,n,a){var l=z(e,n,!1,t),c=l.name;if(c){var u=o[c];if(!u)return s(null,l);var f=u.regex.keys.filter((function(e){return!e.optional})).map((function(e){return e.name}));if("object"!=typeof l.params&&(l.params={}),n&&"object"==typeof n.params)for(var p in n.params)!(p in l.params)&&f.indexOf(p)>-1&&(l.params[p]=n.params[p]);return l.path=H(u.path,l.params),s(u,l,a)}if(l.path){l.params={};for(var d=0;d<r.length;d++){var h=r[d],v=i[h];if(X(v.regex,l.path,l.params))return s(v,l,a)}}return s(null,l)}function l(e,n){var r=e.redirect,i="function"==typeof r?r(h(e,n,null,t)):r;if("string"==typeof i&&(i={path:i}),!i||"object"!=typeof i)return s(null,n);var l=i,c=l.name,u=l.path,f=n.query,p=n.hash,d=n.params;if(f=l.hasOwnProperty("query")?l.query:f,p=l.hasOwnProperty("hash")?l.hash:p,d=l.hasOwnProperty("params")?l.params:d,c){o[c];return a({_normalized:!0,name:c,query:f,hash:p,params:d},void 0,n)}if(u){var v=function(e,t){return O(e,t.parent?t.parent.path:"/",!0)}(u,e);return a({_normalized:!0,path:H(v,d),query:f,hash:p},void 0,n)}return s(null,n)}function s(e,n,r){return e&&e.redirect?l(e,r||n):e&&e.matchAs?function(e,t,n){var r=a({_normalized:!0,path:H(n,t.params)});if(r){var i=r.matched,o=i[i.length-1];return t.params=r.params,s(o,t)}return s(null,t)}(0,n,e.matchAs):h(e,n,r,t)}return{match:a,addRoute:function(e,t){var n="object"!=typeof e?o[e]:void 0;Q([t||e],r,i,o,n),n&&n.alias.length&&Q(n.alias.map((function(e){return{path:e,children:[t]}})),r,i,o,n)},getRoutes:function(){return r.map((function(e){return i[e]}))},addRoutes:function(e){Q(e,r,i,o)}}}function X(e,t,n){var r=t.match(e);if(!r)return!1;if(!n)return!0;for(var i=1,o=r.length;i<o;++i){var a=e.keys[i-1];a&&(n[a.name||"pathMatch"]="string"==typeof r[i]?c(r[i]):r[i])}return!0}var ee=J&&window.performance&&window.performance.now?window.performance:Date;function te(){return ee.now().toFixed(3)}var ne=te();function re(){return ne}function ie(e){return ne=e}var oe=Object.create(null);function ae(){"scrollRestoration"in window.history&&(window.history.scrollRestoration="manual");var e=window.location.protocol+"//"+window.location.host,t=window.location.href.replace(e,""),n=i({},window.history.state);return n.key=re(),window.history.replaceState(n,"",t),window.addEventListener("popstate",ce),function(){window.removeEventListener("popstate",ce)}}function le(e,t,n,r){if(e.app){var i=e.options.scrollBehavior;i&&e.app.$nextTick((function(){var o=function(){var e=re();if(e)return oe[e]}(),a=i.call(e,t,n,r?o:null);a&&("function"==typeof a.then?a.then((function(e){he(e,o)})).catch((function(e){0})):he(a,o))}))}}function se(){var e=re();e&&(oe[e]={x:window.pageXOffset,y:window.pageYOffset})}function ce(e){se(),e.state&&e.state.key&&ie(e.state.key)}function ue(e){return pe(e.x)||pe(e.y)}function fe(e){return{x:pe(e.x)?e.x:window.pageXOffset,y:pe(e.y)?e.y:window.pageYOffset}}function pe(e){return"number"==typeof e}var de=/^#\d/;function he(e,t){var n,r="object"==typeof e;if(r&&"string"==typeof e.selector){var i=de.test(e.selector)?document.getElementById(e.selector.slice(1)):document.querySelector(e.selector);if(i){var o=e.offset&&"object"==typeof e.offset?e.offset:{};t=function(e,t){var n=document.documentElement.getBoundingClientRect(),r=e.getBoundingClientRect();return{x:r.left-n.left-t.x,y:r.top-n.top-t.y}}(i,o={x:pe((n=o).x)?n.x:0,y:pe(n.y)?n.y:0})}else ue(e)&&(t=fe(e))}else r&&ue(e)&&(t=fe(e));t&&("scrollBehavior"in document.documentElement.style?window.scrollTo({left:t.x,top:t.y,behavior:e.behavior}):window.scrollTo(t.x,t.y))}var ve,me=J&&((-1===(ve=window.navigator.userAgent).indexOf("Android 2.")&&-1===ve.indexOf("Android 4.0")||-1===ve.indexOf("Mobile Safari")||-1!==ve.indexOf("Chrome")||-1!==ve.indexOf("Windows Phone"))&&window.history&&"function"==typeof window.history.pushState);function ge(e,t){se();var n=window.history;try{if(t){var r=i({},n.state);r.key=re(),n.replaceState(r,"",e)}else n.pushState({key:ie(te())},"",e)}catch(n){window.location[t?"replace":"assign"](e)}}function be(e){ge(e,!0)}var ye={redirected:2,aborted:4,cancelled:8,duplicated:16};function _e(e,t){return xe(e,t,ye.redirected,'Redirected when going from "'+e.fullPath+'" to "'+function(e){if("string"==typeof e)return e;if("path"in e)return e.path;var t={};return Se.forEach((function(n){n in e&&(t[n]=e[n])})),JSON.stringify(t,null,2)}(t)+'" via a navigation guard.')}function we(e,t){return xe(e,t,ye.cancelled,'Navigation cancelled from "'+e.fullPath+'" to "'+t.fullPath+'" with a new navigation.')}function xe(e,t,n,r){var i=new Error(r);return i._isRouter=!0,i.from=e,i.to=t,i.type=n,i}var Se=["params","query","hash"];function Oe(e){return Object.prototype.toString.call(e).indexOf("Error")>-1}function je(e,t){return Oe(e)&&e._isRouter&&(null==t||e.type===t)}function ke(e,t,n){var r=function(i){i>=e.length?n():e[i]?t(e[i],(function(){r(i+1)})):r(i+1)};r(0)}function Pe(e){return function(t,n,r){var i=!1,o=0,a=null;Ee(e,(function(e,t,n,l){if("function"==typeof e&&void 0===e.cid){i=!0,o++;var s,c=Ae((function(t){var i;((i=t).__esModule||Ie&&"Module"===i[Symbol.toStringTag])&&(t=t.default),e.resolved="function"==typeof t?t:V.extend(t),n.components[l]=t,--o<=0&&r()})),u=Ae((function(e){var t="Failed to resolve async component "+l+": "+e;a||(a=Oe(e)?e:new Error(t),r(a))}));try{s=e(c,u)}catch(e){u(e)}if(s)if("function"==typeof s.then)s.then(c,u);else{var f=s.component;f&&"function"==typeof f.then&&f.then(c,u)}}})),i||r()}}function Ee(e,t){return Ce(e.map((function(e){return Object.keys(e.components).map((function(n){return t(e.components[n],e.instances[n],e,n)}))})))}function Ce(e){return Array.prototype.concat.apply([],e)}var Ie="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function Ae(e){var t=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!t)return t=!0,e.apply(this,n)}}var Te=function(e,t){this.router=e,this.base=function(e){if(!e)if(J){var t=document.querySelector("base");e=(e=t&&t.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else e="/";"/"!==e.charAt(0)&&(e="/"+e);return e.replace(/\/$/,"")}(t),this.current=m,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[],this.listeners=[]};function Le(e,t,n,r){var i=Ee(e,(function(e,r,i,o){var a=function(e,t){"function"!=typeof e&&(e=V.extend(e));return e.options[t]}(e,t);if(a)return Array.isArray(a)?a.map((function(e){return n(e,r,i,o)})):n(a,r,i,o)}));return Ce(r?i.reverse():i)}function De(e,t){if(t)return function(){return e.apply(t,arguments)}}Te.prototype.listen=function(e){this.cb=e},Te.prototype.onReady=function(e,t){this.ready?e():(this.readyCbs.push(e),t&&this.readyErrorCbs.push(t))},Te.prototype.onError=function(e){this.errorCbs.push(e)},Te.prototype.transitionTo=function(e,t,n){var r,i=this;try{r=this.router.match(e,this.current)}catch(e){throw this.errorCbs.forEach((function(t){t(e)})),e}var o=this.current;this.confirmTransition(r,(function(){i.updateRoute(r),t&&t(r),i.ensureURL(),i.router.afterHooks.forEach((function(e){e&&e(r,o)})),i.ready||(i.ready=!0,i.readyCbs.forEach((function(e){e(r)})))}),(function(e){n&&n(e),e&&!i.ready&&(je(e,ye.redirected)&&o===m||(i.ready=!0,i.readyErrorCbs.forEach((function(t){t(e)}))))}))},Te.prototype.confirmTransition=function(e,t,n){var r=this,i=this.current;this.pending=e;var o,a,l=function(e){!je(e)&&Oe(e)&&(r.errorCbs.length?r.errorCbs.forEach((function(t){t(e)})):console.error(e)),n&&n(e)},s=e.matched.length-1,c=i.matched.length-1;if(y(e,i)&&s===c&&e.matched[s]===i.matched[c])return this.ensureURL(),e.hash&&le(this.router,i,e,!1),l(((a=xe(o=i,e,ye.duplicated,'Avoided redundant navigation to current location: "'+o.fullPath+'".')).name="NavigationDuplicated",a));var u=function(e,t){var n,r=Math.max(e.length,t.length);for(n=0;n<r&&e[n]===t[n];n++);return{updated:t.slice(0,n),activated:t.slice(n),deactivated:e.slice(n)}}(this.current.matched,e.matched),f=u.updated,p=u.deactivated,d=u.activated,h=[].concat(function(e){return Le(e,"beforeRouteLeave",De,!0)}(p),this.router.beforeHooks,function(e){return Le(e,"beforeRouteUpdate",De)}(f),d.map((function(e){return e.beforeEnter})),Pe(d)),v=function(t,n){if(r.pending!==e)return l(we(i,e));try{t(e,i,(function(t){!1===t?(r.ensureURL(!0),l(function(e,t){return xe(e,t,ye.aborted,'Navigation aborted from "'+e.fullPath+'" to "'+t.fullPath+'" via a navigation guard.')}(i,e))):Oe(t)?(r.ensureURL(!0),l(t)):"string"==typeof t||"object"==typeof t&&("string"==typeof t.path||"string"==typeof t.name)?(l(_e(i,e)),"object"==typeof t&&t.replace?r.replace(t):r.push(t)):n(t)}))}catch(e){l(e)}};ke(h,v,(function(){ke(function(e){return Le(e,"beforeRouteEnter",(function(e,t,n,r){return function(e,t,n){return function(r,i,o){return e(r,i,(function(e){"function"==typeof e&&(t.enteredCbs[n]||(t.enteredCbs[n]=[]),t.enteredCbs[n].push(e)),o(e)}))}}(e,n,r)}))}(d).concat(r.router.resolveHooks),v,(function(){if(r.pending!==e)return l(we(i,e));r.pending=null,t(e),r.router.app&&r.router.app.$nextTick((function(){w(e)}))}))}))},Te.prototype.updateRoute=function(e){this.current=e,this.cb&&this.cb(e)},Te.prototype.setupListeners=function(){},Te.prototype.teardown=function(){this.listeners.forEach((function(e){e()})),this.listeners=[],this.current=m,this.pending=null};var $e=function(e){function t(t,n){e.call(this,t,n),this._startLocation=Re(this.base)}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.setupListeners=function(){var e=this;if(!(this.listeners.length>0)){var t=this.router,n=t.options.scrollBehavior,r=me&&n;r&&this.listeners.push(ae());var i=function(){var n=e.current,i=Re(e.base);e.current===m&&i===e._startLocation||e.transitionTo(i,(function(e){r&&le(t,e,n,!0)}))};window.addEventListener("popstate",i),this.listeners.push((function(){window.removeEventListener("popstate",i)}))}},t.prototype.go=function(e){window.history.go(e)},t.prototype.push=function(e,t,n){var r=this,i=this.current;this.transitionTo(e,(function(e){ge(j(r.base+e.fullPath)),le(r.router,e,i,!1),t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this,i=this.current;this.transitionTo(e,(function(e){be(j(r.base+e.fullPath)),le(r.router,e,i,!1),t&&t(e)}),n)},t.prototype.ensureURL=function(e){if(Re(this.base)!==this.current.fullPath){var t=j(this.base+this.current.fullPath);e?ge(t):be(t)}},t.prototype.getCurrentLocation=function(){return Re(this.base)},t}(Te);function Re(e){var t=window.location.pathname,n=t.toLowerCase(),r=e.toLowerCase();return!e||n!==r&&0!==n.indexOf(j(r+"/"))||(t=t.slice(e.length)),(t||"/")+window.location.search+window.location.hash}var Me=function(e){function t(t,n,r){e.call(this,t,n),r&&function(e){var t=Re(e);if(!/^\/#/.test(t))return window.location.replace(j(e+"/#"+t)),!0}(this.base)||Ne()}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.setupListeners=function(){var e=this;if(!(this.listeners.length>0)){var t=this.router.options.scrollBehavior,n=me&&t;n&&this.listeners.push(ae());var r=function(){var t=e.current;Ne()&&e.transitionTo(Ue(),(function(r){n&&le(e.router,r,t,!0),me||Be(r.fullPath)}))},i=me?"popstate":"hashchange";window.addEventListener(i,r),this.listeners.push((function(){window.removeEventListener(i,r)}))}},t.prototype.push=function(e,t,n){var r=this,i=this.current;this.transitionTo(e,(function(e){Fe(e.fullPath),le(r.router,e,i,!1),t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this,i=this.current;this.transitionTo(e,(function(e){Be(e.fullPath),le(r.router,e,i,!1),t&&t(e)}),n)},t.prototype.go=function(e){window.history.go(e)},t.prototype.ensureURL=function(e){var t=this.current.fullPath;Ue()!==t&&(e?Fe(t):Be(t))},t.prototype.getCurrentLocation=function(){return Ue()},t}(Te);function Ne(){var e=Ue();return"/"===e.charAt(0)||(Be("/"+e),!1)}function Ue(){var e=window.location.href,t=e.indexOf("#");return t<0?"":e=e.slice(t+1)}function qe(e){var t=window.location.href,n=t.indexOf("#");return(n>=0?t.slice(0,n):t)+"#"+e}function Fe(e){me?ge(qe(e)):window.location.hash=e}function Be(e){me?be(qe(e)):window.location.replace(qe(e))}var He=function(e){function t(t,n){e.call(this,t,n),this.stack=[],this.index=-1}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.push=function(e,t,n){var r=this;this.transitionTo(e,(function(e){r.stack=r.stack.slice(0,r.index+1).concat(e),r.index++,t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this;this.transitionTo(e,(function(e){r.stack=r.stack.slice(0,r.index).concat(e),t&&t(e)}),n)},t.prototype.go=function(e){var t=this,n=this.index+e;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){var e=t.current;t.index=n,t.updateRoute(r),t.router.afterHooks.forEach((function(t){t&&t(r,e)}))}),(function(e){je(e,ye.duplicated)&&(t.index=n)}))}},t.prototype.getCurrentLocation=function(){var e=this.stack[this.stack.length-1];return e?e.fullPath:"/"},t.prototype.ensureURL=function(){},t}(Te),ze=function(e){void 0===e&&(e={}),this.app=null,this.apps=[],this.options=e,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Y(e.routes||[],this);var t=e.mode||"hash";switch(this.fallback="history"===t&&!me&&!1!==e.fallback,this.fallback&&(t="hash"),J||(t="abstract"),this.mode=t,t){case"history":this.history=new $e(this,e.base);break;case"hash":this.history=new Me(this,e.base,this.fallback);break;case"abstract":this.history=new He(this,e.base);break;default:0}},Ve={currentRoute:{configurable:!0}};ze.prototype.match=function(e,t,n){return this.matcher.match(e,t,n)},Ve.currentRoute.get=function(){return this.history&&this.history.current},ze.prototype.init=function(e){var t=this;if(this.apps.push(e),e.$once("hook:destroyed",(function(){var n=t.apps.indexOf(e);n>-1&&t.apps.splice(n,1),t.app===e&&(t.app=t.apps[0]||null),t.app||t.history.teardown()})),!this.app){this.app=e;var n=this.history;if(n instanceof $e||n instanceof Me){var r=function(e){n.setupListeners(),function(e){var r=n.current,i=t.options.scrollBehavior;me&&i&&"fullPath"in e&&le(t,e,r,!1)}(e)};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(e){t.apps.forEach((function(t){t._route=e}))}))}},ze.prototype.beforeEach=function(e){return Ke(this.beforeHooks,e)},ze.prototype.beforeResolve=function(e){return Ke(this.resolveHooks,e)},ze.prototype.afterEach=function(e){return Ke(this.afterHooks,e)},ze.prototype.onReady=function(e,t){this.history.onReady(e,t)},ze.prototype.onError=function(e){this.history.onError(e)},ze.prototype.push=function(e,t,n){var r=this;if(!t&&!n&&"undefined"!=typeof Promise)return new Promise((function(t,n){r.history.push(e,t,n)}));this.history.push(e,t,n)},ze.prototype.replace=function(e,t,n){var r=this;if(!t&&!n&&"undefined"!=typeof Promise)return new Promise((function(t,n){r.history.replace(e,t,n)}));this.history.replace(e,t,n)},ze.prototype.go=function(e){this.history.go(e)},ze.prototype.back=function(){this.go(-1)},ze.prototype.forward=function(){this.go(1)},ze.prototype.getMatchedComponents=function(e){var t=e?e.matched?e:this.resolve(e).route:this.currentRoute;return t?[].concat.apply([],t.matched.map((function(e){return Object.keys(e.components).map((function(t){return e.components[t]}))}))):[]},ze.prototype.resolve=function(e,t,n){var r=z(e,t=t||this.history.current,n,this),i=this.match(r,t),o=i.redirectedFrom||i.fullPath;return{location:r,route:i,href:function(e,t,n){var r="hash"===n?"#"+t:t;return e?j(e+"/"+r):r}(this.history.base,o,this.mode),normalizedTo:r,resolved:i}},ze.prototype.getRoutes=function(){return this.matcher.getRoutes()},ze.prototype.addRoute=function(e,t){this.matcher.addRoute(e,t),this.history.current!==m&&this.history.transitionTo(this.history.getCurrentLocation())},ze.prototype.addRoutes=function(e){this.matcher.addRoutes(e),this.history.current!==m&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(ze.prototype,Ve);var We=ze;function Ke(e,t){return e.push(t),function(){var n=e.indexOf(t);n>-1&&e.splice(n,1)}}ze.install=function e(t){if(!e.installed||V!==t){e.installed=!0,V=t;var n=function(e){return void 0!==e},r=function(e,t){var r=e.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(e,t)};t.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),t.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(t.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(t.prototype,"$route",{get:function(){return this._routerRoot._route}}),t.component("RouterView",x),t.component("RouterLink",K);var i=t.config.optionMergeStrategies;i.beforeRouteEnter=i.beforeRouteLeave=i.beforeRouteUpdate=i.created}},ze.version="3.6.5",ze.isNavigationFailure=je,ze.NavigationFailureType=ye,ze.START_LOCATION=m,J&&window.Vue&&window.Vue.use(ze);n(156),n(48),n(167);var Ge=n(0),Je=n(124),Qe=n.n(Je),Ze=n(125),Ye=n.n(Ze),Xe={created(){if(this.siteMeta=this.$site.headTags.filter(([e])=>"meta"===e).map(([e,t])=>t),this.$ssrContext){const t=this.getMergedMetaTags();this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.pageMeta=(e=t)?e.map(e=>{let t="<meta";return Object.keys(e).forEach(n=>{t+=` ${n}="${Ye()(e[n])}"`}),t+">"}).join("\n    "):"",this.$ssrContext.canonicalLink=tt(this.$canonicalUrl)}var e},mounted(){this.currentMetaTags=[...document.querySelectorAll("meta")],this.updateMeta(),this.updateCanonicalLink()},methods:{updateMeta(){document.title=this.$title,document.documentElement.lang=this.$lang;const e=this.getMergedMetaTags();this.currentMetaTags=nt(e,this.currentMetaTags)},getMergedMetaTags(){const e=this.$page.frontmatter.meta||[];return Qe()([{name:"description",content:this.$description}],e,this.siteMeta,rt)},updateCanonicalLink(){et(),this.$canonicalUrl&&document.head.insertAdjacentHTML("beforeend",tt(this.$canonicalUrl))}},watch:{$page(){this.updateMeta(),this.updateCanonicalLink()}},beforeDestroy(){nt(null,this.currentMetaTags),et()}};function et(){const e=document.querySelector("link[rel='canonical']");e&&e.remove()}function tt(e=""){return e?`<link href="${e}" rel="canonical" />`:""}function nt(e,t){if(t&&[...t].filter(e=>e.parentNode===document.head).forEach(e=>document.head.removeChild(e)),e)return e.map(e=>{const t=document.createElement("meta");return Object.keys(e).forEach(n=>{t.setAttribute(n,e[n])}),document.head.appendChild(t),t})}function rt(e){for(const t of["name","property","itemprop"])if(e.hasOwnProperty(t))return e[t]+t;return JSON.stringify(e)}var it=n(46),ot=n.n(it),at={mounted(){ot.a.configure({showSpinner:!1}),this.$router.beforeEach((e,t,n)=>{e.path===t.path||r.a.component(e.name)||ot.a.start(),n()}),this.$router.afterEach(()=>{ot.a.done(),this.isSidebarOpen=!1})}},lt=(n(47),n(45)),st=n.n(lt),ct=[Xe,at,{mounted(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:st()((function(){this.setActiveHash()}),300),setActiveHash(){const e=[].slice.call(document.querySelectorAll(".header-anchor")),t=[].slice.call(document.querySelectorAll(".header-anchor")).filter(t=>e.some(e=>e.hash===t.hash)),n=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),r=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),i=window.innerHeight+n;for(let e=0;e<t.length;e++){const o=t[e],a=t[e+1],l=0===e&&0===n||n>=o.parentElement.offsetTop+10&&(!a||n<a.parentElement.offsetTop-10),s=decodeURIComponent(this.$route.hash);if(l&&s!==decodeURIComponent(o.hash)){const n=o;if(i===r)for(let n=e+1;n<t.length;n++)if(s===decodeURIComponent(t[n].hash))return;return this.$vuepress.$set("disableScrollBehavior",!0),void this.$router.replace(decodeURIComponent(n.hash),()=>{this.$nextTick(()=>{this.$vuepress.$set("disableScrollBehavior",!1)})})}}}},beforeDestroy(){window.removeEventListener("scroll",this.onScroll)}}],ut=n(1);Object(Ge.f)(ut.default,"mixins",ct);const ft=[{name:"v-81665940",path:"/api/builtIn.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-81665940").then(n)}},{name:"v-78e9c206",path:"/api/app-config.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-78e9c206").then(n)}},{name:"v-1f9c424a",path:"/",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("homepageLayout","v-1f9c424a").then(n)}},{path:"/index.html",redirect:"/"},{name:"v-301af225",path:"/api/ApiIndex.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("v-301af225","v-301af225").then(n)}},{name:"v-13123160",path:"/api/compile.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-13123160").then(n)}},{name:"v-068ddbda",path:"/api/directives.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-068ddbda").then(n)}},{name:"v-7560cbe0",path:"/api/composition-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-7560cbe0").then(n)}},{name:"v-33e6cba4",path:"/api/extend.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-33e6cba4").then(n)}},{name:"v-32b77802",path:"/api/global-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-32b77802").then(n)}},{name:"v-6266eb79",path:"/api/",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-6266eb79").then(n)}},{path:"/api/index.html",redirect:"/api/"},{name:"v-808ce144",path:"/api/instance-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-808ce144").then(n)}},{name:"v-7d2b6e08",path:"/api/optional-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-7d2b6e08").then(n)}},{name:"v-4286840a",path:"/articles/1.0.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4286840a").then(n)}},{name:"v-0c915944",path:"/api/reactivity-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-0c915944").then(n)}},{name:"v-cd129100",path:"/api/store-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-cd129100").then(n)}},{name:"v-b32d8070",path:"/articles/2.0.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-b32d8070").then(n)}},{name:"v-ae4cfcf4",path:"/articles/2.7-release.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-ae4cfcf4").then(n)}},{name:"v-27ec3078",path:"/articles/2.8-release.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-27ec3078").then(n)}},{name:"v-6ced36f6",path:"/articles/",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-6ced36f6").then(n)}},{path:"/articles/index.html",redirect:"/articles/"},{name:"v-1b4df5b2",path:"/articles/2.8-release-alter.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-1b4df5b2").then(n)}},{name:"v-16cd1ba0",path:"/articles/2.9-release-alter.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-16cd1ba0").then(n)}},{name:"v-2f3a4e02",path:"/articles/2.9-release.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-2f3a4e02").then(n)}},{name:"v-65ac7ae0",path:"/articles/mpx1.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-65ac7ae0").then(n)}},{name:"v-29b15788",path:"/articles/mpx-cube-ui.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-29b15788").then(n)}},{name:"v-67f67560",path:"/articles/mpx-cli-next.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-67f67560").then(n)}},{name:"v-9cda2680",path:"/articles/mpx2.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-9cda2680").then(n)}},{name:"v-aba0a160",path:"/articles/performance.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-aba0a160").then(n)}},{name:"v-06150180",path:"/articles/size-control.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-06150180").then(n)}},{name:"v-16a68b26",path:"/articles/ts-derivation.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-16a68b26").then(n)}},{name:"v-2df9c8de",path:"/guide/advance/ability-compatible.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-2df9c8de").then(n)}},{name:"v-770abfaa",path:"/desc.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-770abfaa").then(n)}},{name:"v-419821e2",path:"/guide/advance/custom-output-path.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-419821e2").then(n)}},{name:"v-31f676ba",path:"/articles/unit-test.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-31f676ba").then(n)}},{name:"v-32741058",path:"/guide/advance/dll-plugin.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-32741058").then(n)}},{name:"v-27eacdde",path:"/guide/advance/async-subpackage.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-27eacdde").then(n)}},{name:"v-43feb580",path:"/guide/advance/image-process.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-43feb580").then(n)}},{name:"v-261b4b10",path:"/guide/advance/i18n.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-261b4b10").then(n)}},{name:"v-23021ac0",path:"/guide/advance/mixin.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-23021ac0").then(n)}},{name:"v-6a447440",path:"/guide/advance/pinia.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-6a447440").then(n)}},{name:"v-aa3f94b4",path:"/guide/advance/plugin.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-aa3f94b4").then(n)}},{name:"v-298abc80",path:"/guide/advance/npm.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-298abc80").then(n)}},{name:"v-f6b6871c",path:"/guide/advance/resource-resolve.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-f6b6871c").then(n)}},{name:"v-c6307034",path:"/guide/advance/platform.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-c6307034").then(n)}},{name:"v-b7e9c1dc",path:"/guide/advance/provide-inject.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-b7e9c1dc").then(n)}},{name:"v-59734f60",path:"/guide/advance/ssr.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-59734f60").then(n)}},{name:"v-4cc39ac0",path:"/guide/advance/size-report.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4cc39ac0").then(n)}},{name:"v-04b286c0",path:"/guide/advance/store.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-04b286c0").then(n)}},{name:"v-25e023c0",path:"/guide/advance/subpackage.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-25e023c0").then(n)}},{name:"v-ade3a0c0",path:"/guide/basic/class-style-binding.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-ade3a0c0").then(n)}},{name:"v-082a4080",path:"/guide/basic/component.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-082a4080").then(n)}},{name:"v-4653082a",path:"/guide/basic/conditional-render.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4653082a").then(n)}},{name:"v-eb995c80",path:"/guide/advance/utility-first-css.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-eb995c80").then(n)}},{name:"v-4c636240",path:"/guide/basic/event.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4c636240").then(n)}},{name:"v-9217ab80",path:"/guide/basic/list-render.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-9217ab80").then(n)}},{name:"v-b77c6940",path:"/guide/basic/ide.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-b77c6940").then(n)}},{name:"v-64d5c000",path:"/guide/basic/css.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-64d5c000").then(n)}},{name:"v-3f8ff5dc",path:"/guide/basic/option-chain.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-3f8ff5dc").then(n)}},{name:"v-14d018a4",path:"/guide/basic/refs.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-14d018a4").then(n)}},{name:"v-3e859f72",path:"/guide/basic/reactive.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-3e859f72").then(n)}},{name:"v-05fb8080",path:"/guide/basic/single-file.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-05fb8080").then(n)}},{name:"v-4db713e0",path:"/guide/basic/two-way-binding.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4db713e0").then(n)}},{name:"v-25ecbea0",path:"/guide/basic/template.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-25ecbea0").then(n)}},{name:"v-fa77fc40",path:"/guide/basic/start.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-fa77fc40").then(n)}},{name:"v-1553266a",path:"/guide/composition-api/reactive-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-1553266a").then(n)}},{name:"v-4777611a",path:"/guide/extend/api-proxy.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4777611a").then(n)}},{name:"v-453e3320",path:"/guide/composition-api/composition-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-453e3320").then(n)}},{name:"v-2fa3b31c",path:"/guide/extend/fetch.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-2fa3b31c").then(n)}},{name:"v-670c5b20",path:"/guide/extend/mock.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-670c5b20").then(n)}},{name:"v-4147fde5",path:"/guide/extend/",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4147fde5").then(n)}},{path:"/guide/extend/index.html",redirect:"/guide/extend/"},{name:"v-41032180",path:"/guide/migrate/2.8.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-41032180").then(n)}},{name:"v-05fd3820",path:"/guide/migrate/2.7.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-05fd3820").then(n)}},{name:"v-69e59278",path:"/guide/platform/miniprogram.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-69e59278").then(n)}},{name:"v-4269b2b6",path:"/guide/platform/web.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4269b2b6").then(n)}},{name:"v-63e1d400",path:"/guide/migrate/mpx-cli-3.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-63e1d400").then(n)}},{name:"v-7c090ae0",path:"/guide/migrate/2.9.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-7c090ae0").then(n)}},{name:"v-fbaff41a",path:"/guide/platform/",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-fbaff41a").then(n)}},{path:"/guide/platform/index.html",redirect:"/guide/platform/"},{name:"v-2e48a400",path:"/guide/tool/e2e-test.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-2e48a400").then(n)}},{name:"v-f2e08d00",path:"/guide/platform/rn.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-f2e08d00").then(n)}},{name:"v-29f7525e",path:"/guide/tool/unit-test.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-29f7525e").then(n)}},{name:"v-5bf8d898",path:"/guide/understand/runtime.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-5bf8d898").then(n)}},{name:"v-15dbdb80",path:"/guide/tool/ts.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-15dbdb80").then(n)}},{name:"v-ae319f98",path:"/rn-component.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-ae319f98").then(n)}},{name:"v-0960fc22",path:"/guide/understand/compile.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-0960fc22").then(n)}},{name:"v-c5494280",path:"/guide/advance/progressive.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-c5494280").then(n)}},{name:"v-48addfa0",path:"/guide/basic/intro.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-48addfa0").then(n)}},{name:"v-f625b20c",path:"/rn-api.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-f625b20c").then(n)}},{name:"v-4f2760cc",path:"/rn-style.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-4f2760cc").then(n)}},{name:"v-16c21d00",path:"/rn-template.html",component:ut.default,beforeEnter:(e,t,n)=>{Object(Ge.a)("Layout","v-16c21d00").then(n)}},{path:"*",component:ut.default}],pt={title:"Mpx框架",description:"",base:"/",headTags:[["link",{rel:"icon",href:"/favicon.ico"}],["script",{type:"text/javascript"},'(function(c,l,a,r,i,t,y){\n        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\n        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;\n        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\n    })(window, document, "clarity", "script", "jtvvy52wxy");']],pages:[{title:"内建组件",frontmatter:{},regularPath:"/api/builtIn.html",relativePath:"api/builtIn.md",key:"v-81665940",path:"/api/builtIn.html",headers:[{level:2,title:"component",slug:"component"},{level:2,title:"slot",slug:"slot"}]},{title:"全局配置",frontmatter:{},regularPath:"/api/app-config.html",relativePath:"api/app-config.md",key:"v-78e9c206",path:"/api/app-config.html",headers:[{level:2,title:"useStrictDiff",slug:"usestrictdiff"},{level:2,title:"ignoreWarning",slug:"ignorewarning"},{level:2,title:"ignoreProxyWhiteList",slug:"ignoreproxywhitelist"},{level:2,title:"observeClassInstance",slug:"observeclassinstance"},{level:2,title:"proxyEventHandler",slug:"proxyeventhandler"},{level:2,title:"setDataHandler",slug:"setdatahandler"},{level:2,title:"forceFlushSync",slug:"forceflushsync"},{level:2,title:"errorHandler",slug:"errorhandler"},{level:2,title:"webRouteConfig",slug:"webrouteconfig"},{level:2,title:"webConfig",slug:"webconfig"}]},{title:"Home",frontmatter:{home:!0,layout:"homepageLayout",heroImage:"/logo.png",heroText:"增强型跨端小程序框架",tagline:"良好的开发体验，极致的应用性能，完整的原生兼容，一份源码跨端输出所有小程序平台及Web。",actionText:"快速进入",actionLink:"/guide/basic/start.html",githubText:"Github",githubLink:"https://github.com/didi/mpx",features:[{title:"高性能",details:"Mpx高度关注小程序性能与包体积，深度整合了运行时性能优化与包体积分析优化能力，让开发者在大部分场景下只需专注于业务开发，就能生产出媲美甚至超出原生的高性能小程序应用。",icon:"https://dpubstatic.udache.com/static/dpubimg/PsrcQ_igBl/texing_icon_you.png",micon:"https://dpubstatic.udache.com/static/dpubimg/BBQBgCRCOl/y_icon_you.png"},{title:"优体验",details:"以增强的方式将Vue中优良的开发特性引入到小程序开发中，如数据响应、组合式api等，配合强大的工程化能力，大大提升了小程序开发的体验与效率，同时保障了框架开发的可维护性与可预期性。",icon:"https://dpubstatic.udache.com/static/dpubimg/N7sc6TZnja/texing_icon_gao.png",micon:"https://dpubstatic.udache.com/static/dpubimg/0S3n12uc1k/y_icon_gao.png"},{title:"跨平台",details:"Mpx专注解决小程序跨端问题，通过静态转译与运行时适配结合，将一份源码跨端输出到所有开放的小程序平台和web环境下运行，同时最大限度减少跨端带来的性能与包体积损失。",icon:"https://dpubstatic.udache.com/static/dpubimg/bJMx84lznm/texing_icon_kua.png",micon:"https://dpubstatic.udache.com/static/dpubimg/KPG_IXLuwU/y_icon_kua.png"}],threeSection:{title:"示例项目",details:"扫码查看使用Mpx开发的todoMVC项目在各个小程序平台及web下的运行情况，更多示例项目代码可点击这里查看。",mdetails:"TodoMVC是一个示例项目，它使用目前流行的不同JavaScript框架的来实现同一个Demo，来帮助你熟悉和选择最合适的前端框架。",actionText:"查看详情",actionLink:"https://dpubstatic.udache.com/static/dpubimg/c3b0d3bc-1bb0-4bee-b6da-4205a2744e21.html#/pages/index",img:"https://dpubstatic.udache.com/static/dpubimg/nYbrJSPSz7/anli_pic_phone.png",bg:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/todomvc_bg_v3.png",list:[{title:"微信",icon1:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/todomvc_icon_wechat_normal.png",icon2:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/todomvc_icon_wechat_active.png",code:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/wx-qrcode.jpg"},{title:"支付宝",icon1:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/todomvc_icon_alipay_normal.png",icon2:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/todomvc_icon_alipay_active.png",code:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/ali-qrcode.jpg"}],mlist:[{title:"微信",icon:"https://dpubstatic.udache.com/static/dpubimg/ho5eKaVX5L/y_icon_wechat.png"},{title:"QQ",icon:"https://dpubstatic.udache.com/static/dpubimg/IoQuifVymo/y_icon_qq.png"},{title:"支付宝",icon:"https://dpubstatic.udache.com/static/dpubimg/rMS51-MYUE/y_icon_zhifubao.png"},{title:"百度",icon:"https://dpubstatic.udache.com/static/dpubimg/nth1TOFUVA/y_icon_baidu.png"},{title:"字节跳动",icon:"https://dpubstatic.udache.com/static/dpubimg/JQBu676x6W/y_icon_zijie.png"},{title:"Web",icon:"https://dpubstatic.udache.com/static/dpubimg/d4pVP4BUGU/y_icon_web.png"}]},fourSection:{title:"极致性能",details:"得益于增强的设计思路，Mpx在运行时没有复杂的封装抹平逻辑，而是专注于实现数据响应，setData优化和Composition api等关键增强能力，压缩后体积占用仅为60KB；配合编译构建中灵活强大的包体积分析优化能力，Mpx在性能与包体积方面做到了业内最优。",img:"https://dpubstatic.udache.com/static/dpubimg/jvACYsEQfm/jizhi_pic.png",mimg:"https://dpubstatic.udache.com/static/dpubimg/G4RXehQ40n/y_pic_jizhi.png",bg:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/jizhi_bg_v3.png",actionText:"点击进入",actionLink:"/guide/basic/start.html"},fiveSection:{title:"渐进迁移",details:"同样得益于增强的设计思路，Mpx能够完整兼容小程序原生技术规范，并以较低的成本进行持续跟进；借助框架提供的渐进迁移能力，小程序开发者可以方便地在Mpx项目中使用已有的原生开发生态，如组件库，统计工具等，同时也能将Mpx开发的组件输出到原生小程序项目中使用。",img:"https://dpubstatic.udache.com/static/dpubimg/k5Ft6oWF6F/jianjin_pic.png",mimg:"https://dpubstatic.udache.com/static/dpubimg/Z0W_MvwJ8C/y_pic_jianjin.png",bg:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/jianjin_bg_v3.png",actionText:"点击进入",actionLink:"/guide/basic/start.html"},sixSection:{title:"开发生态",mtitle:"开发生态",bg:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/kaifa_bg_v3.png",details:[{title:"@mpxjs/core",details:"运行时核心",icon:"https://dpubstatic.udache.com/static/dpubimg/K4XYVLjBLH/kaifa_icon_1.png",actionLink:"/guide/basic/start.html"},{title:"@mpxjs/webpack-plugin",details:"编译核心",icon:"https://dpubstatic.udache.com/static/dpubimg/2k0jC-ZkFX/kaifa_icon_2.png",actionLink:"/guide/basic/start.html"},{title:"@mpxjs/cli",details:"脚手架工具",icon:"https://dpubstatic.udache.com/static/dpubimg/ug3MOMmXaz/kaifa_icon_3.png",actionLink:"/guide/basic/start.html"},{title:"@mpxjs/fetch",details:"网络请求库",icon:"https://dpubstatic.udache.com/static/dpubimg/L6kO_akb2G/kaifa_icon_4.png",actionLink:"/api/extend.html#mpx-fetch"},{title:"@mpxjs/api-proxy api",details:"增强调用",icon:"https://dpubstatic.udache.com/static/dpubimg/oZGOmLr5f3/kaifa_icon_5.png",actionLink:"/api/extend.html#api-proxy"},{title:"@mpxjs/webview-bridge web",details:"页面桥接",icon:"https://dpubstatic.udache.com/static/dpubimg/trdVxyR_5_/kaifa_icon_6.png",actionLink:"/api/extend.html#webview-bridge"},{title:"@mpxjs/vscode-plugin ide",details:"插件",icon:"https://dpubstatic.udache.com/static/dpubimg/PczNH3wywM/kaifa_icon_7.png",actionLink:"https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx"},{title:"@mpxjs/es-check",details:"高级语法检查",icon:"https://dpubstatic.udache.com/static/dpubimg/qXb0ZEY4xN/kaifa_icon_8.png",actionLink:"https://github.com/mpx-ecology/mpx-es-check"},{title:"@mpxjs/size-report",details:"包体积分析工具",icon:"https://dpubstatic.udache.com/static/dpubimg/2pa_xoKoeL/kaifa_icon_9.png",actionLink:"/guide/advance/size-report.html"}]},sevenSection:{title:"成功案例",bg:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/anli_bg_v3.png",details:[{title:"滴滴出行",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/bcca3d10-01b7-4c08-951a-22418b2443d6.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg"},{title:"青桔单车",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/pIM3h2vyj2/qingju.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/shunfengche_demo_v3.jpeg"},{title:"滴滴顺风车",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/neOI_G6deQ/shunfengche.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/qingju_demo_v3.jpeg"},{title:"出行广场",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/708d5579-81f0-480e-96b3-5f49e8022273.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/guangchuang_v3.jpeg"},{title:"滴滴公交",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/69a08787-d3a1-4c51-b182-0fcb96960b56.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg"},{title:"滴滴金融",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/8c25bec8-938e-452d-96f9-5e524092a8ee.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/jinlong_v3.jpeg"},{title:"滴滴外卖",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/8fdd04ed-a74b-4b87-be6e-652550fb843f.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg"},{title:"司机招募",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/d3b62a33-7dbd-45ea-a4aa-f30ad61965f2.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/siji_v3.jpeg"},{title:"小桔加油",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/988099b3-9930-4c54-abd7-75e70134d649.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/jiayou_v3.jpeg"},{title:"番薯借阅",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/79573ef6-2a66-462e-8cc7-63eb983168f8.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/jieshu_v3.jpeg"},{title:"疫查查应用",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/8932c3c2-b6da-4da2-8661-5554fe2bd4a3.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/yiqin_v3.jpeg"},{title:"小桔养车",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/b6507fca-1e1f-4922-9240-d0f172bea6de.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/yangche_v3.jpeg"},{title:"学而思直播课",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/40fd646b-10d0-4383-a576-e1d425a8c05d.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/zhibo_v3.jpeg"},{title:"小猴启蒙课",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/6833dbdb-1dc8-4929-bd41-6d71069b0714.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/ai_v3.jpeg"},{title:"科创书店",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/8627f48d-cf64-4511-8b2f-ede8e54186a7.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/shudian_v3.jpeg"},{title:"在武院",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/421bf49b-a9cb-4d54-90d7-e21b80ab21b3.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/wuyuan_v3.jpeg"},{title:"三股绳Lite",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/46ee136b-0791-4069-98b0-35566d5ef394.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/daka_v3.jpeg"},{title:"学而思优选课",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/eab48487-5ca2-4368-9080-a6b843097e67.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/xueersi_v3.jpeg"},{title:"食享会",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/lY7eYSppkW/68747470733a2f2f73686978682e636f6d2f73686571752f696d672f7172636f64655f322e37343664373562342e706e67.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/canshi_v3.jpeg"},{title:"青铜安全医生",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/58cdbcc5-1f00-4da9-89c6-e638b2f77b19.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/qintong_v3.jpeg"},{title:"青铜安全培训",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/a9d60600-40c0-4b66-934e-3bb176d3f07a.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/peixun_v3.jpeg"},{title:"视穹云机械",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/0a816842-dda4-4e30-8c14-e951fb1a8131.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/jixie_v3.jpeg"},{title:"店有生意通",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/7f1b5f22-d765-4142-862a-999c1ed9d10f.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/shenyi_v3.jpeg"},{title:"花小猪打车",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/JzHnEyu8VT/aaa.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/dache_v3.jpeg"},{title:"橙心优选",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/37222642-c508-4a67-8cbc-036a66985bfc.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/chenxin_v3.jpeg"},{title:"小二押镖",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/nB6-p3WzIQ/xiaoeryabiao.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/xiaoer_v3.jpeg"},{title:"顺鑫官方微商城",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/nY2bg3A1L_/shunxin.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/shangchen_v3.jpeg"},{title:"嘀嗒出行",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/DO3m0Iflq1/didachuxing.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/dida_v3.jpeg"},{title:"汉行通Pro",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/86cd89be-de29-48ad-8cb0-72c432446e7b.jpg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/hantong_v3.jpeg"},{title:"滴滴出行(支付宝)",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/47fe83e5-c41a-4245-b910-60ed6493d87e.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg"},{title:"小桔充电(支付宝)",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/fa1a524b-da97-4df3-9412-8c988f50b6ae.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/chongdian_v3.jpeg"},{title:"唯品会QQ",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/2a150b0a-e23d-4e91-98fe-e862410be911.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/weiping_v3.jpeg"},{title:"唯品会(百度)",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/56273723-ba98-4ceb-9672-075a5ab9f2da.png",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/weiping_v3.jpeg"},{title:"唯品会(字节)",details:"写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧写一些介绍的话语吧",img:"https://dpubstatic.udache.com/static/dpubimg/88f898a0-2f3b-44c5-b7ce-c1a8aec25299.jpeg",demo:"https://gift-static.hongyibo.com.cn/static/kfpub/3547/weiping_v3.jpeg"}]},resourcesList:{title:"资源",details:[{title:"案例收集",actionLink:"https://github.com/didi/mpx/issues/385"}]},communityList:{title:"社区",details:[{title:"微信群",actionLink:"https://github.com/didi/mpx",img:"https://dpubstatic.udache.com/static/dpubimg/6DN0ebkbjgI2P9QjJr8jr_WechatIMG3.jpeg"},{title:"QQ群",actionLink:"https://github.com/didi/mpx",img:"https://dpubstatic.udache.com/static/dpubimg/etX-gKWeUb/temp_qrcode_share_374632411.png"}]},helpList:{title:"帮助",details:[{title:"反馈问题",actionLink:"https://github.com/didi/mpx/issues"}]},moreList:{title:"更多",details:[{title:"滴滴前端技术",actionLink:"https://juejin.cn/user/4195392101298510"}]}},regularPath:"/",relativePath:"README.md",key:"v-1f9c424a",path:"/",headers:[{level:2,title:"安装使用",slug:"安装使用"}]},{frontmatter:{layout:"v-301af225"},regularPath:"/api/ApiIndex.html",relativePath:"api/ApiIndex.vue",key:"v-301af225",path:"/api/ApiIndex.html"},{title:"编译构建",frontmatter:{sidebarDepth:2},regularPath:"/api/compile.html",relativePath:"api/compile.md",key:"v-13123160",path:"/api/compile.html",headers:[{level:2,title:"类型定义",slug:"类型定义"},{level:3,title:"Rules",slug:"rules"},{level:2,title:"MpxWebpackPlugin",slug:"mpxwebpackplugin"},{level:3,title:"mode",slug:"mode"},{level:3,title:"srcMode",slug:"srcmode"},{level:3,title:"modeRules",slug:"moderules"},{level:3,title:"externalClasses",slug:"externalclasses"},{level:3,title:"resolveMode",slug:"resolvemode"},{level:3,title:"projectRoot",slug:"projectroot"},{level:3,title:"writeMode",slug:"writemode"},{level:3,title:"autoScopeRules",slug:"autoscoperules"},{level:3,title:"forceDisableProxyCtor",slug:"forcedisableproxyctor"},{level:3,title:"transMpxRules",slug:"transmpxrules"},{level:3,title:"forceProxyEventRules",slug:"forceproxyeventrules"},{level:3,title:"defs",slug:"defs"},{level:3,title:"attributes",slug:"attributes"},{level:3,title:"externals",slug:"externals"},{level:3,title:"miniNpmPackage",slug:"mininpmpackage"},{level:3,title:"forceUsePageCtor",slug:"forceusepagector"},{level:3,title:"transRpxRules",slug:"transrpxrules"},{level:3,title:"postcssInlineConfig",slug:"postcssinlineconfig"},{level:3,title:"decodeHTMLText",slug:"decodehtmltext"},{level:3,title:"nativeConfig",slug:"nativeconfig"},{level:3,title:"webConfig",slug:"webconfig"},{level:3,title:"i18n",slug:"i18n"},{level:3,title:"auditResource",slug:"auditresource"},{level:3,title:"subpackageModulesRules",slug:"subpackagemodulesrules"},{level:3,title:"generateBuildMap",slug:"generatebuildmap"},{level:3,title:"autoVirtualHostRules",slug:"autovirtualhostrules"},{level:3,title:"partialCompileRules",slug:"partialcompilerules"},{level:3,title:"optimizeRenderRules",slug:"optimizerenderrules"},{level:3,title:"asyncSubpackageRules",slug:"asyncsubpackagerules"},{level:3,title:"retryRequireAsync",slug:"retryrequireasync"},{level:3,title:"disableRequireAsync",slug:"disablerequireasync"},{level:3,title:"optimizeSize",slug:"optimizesize"},{level:2,title:"MpxWebpackPlugin static methods",slug:"mpxwebpackplugin-static-methods"},{level:3,title:"MpxWebpackPlugin.loader",slug:"mpxwebpackplugin-loader"},{level:3,title:"MpxWebpackPlugin.pluginLoader",slug:"mpxwebpackplugin-pluginloader"},{level:3,title:"MpxWebpackPlugin.wxsPreLoader",slug:"mpxwebpackplugin-wxspreloader"},{level:3,title:"MpxWebpackPlugin.fileLoader",slug:"mpxwebpackplugin-fileloader"},{level:3,title:"MpxWebpackPlugin.urlLoader",slug:"mpxwebpackplugin-urlloader"},{level:3,title:"MpxWebpackPlugin.getPageEntry",slug:"mpxwebpackplugin-getpageentry"},{level:3,title:"MpxWebpackPlugin.getComponentEntry",slug:"mpxwebpackplugin-getcomponententry"},{level:3,title:"MpxWebpackPlugin.getNativeEntry",slug:"mpxwebpackplugin-getnativeentry"},{level:2,title:"MpxUnocssPlugin",slug:"mpxunocssplugin"},{level:3,title:"unoFile",slug:"unofile"},{level:3,title:"minCount",slug:"mincount"},{level:3,title:"styleIsolation",slug:"styleisolation"},{level:3,title:"scan",slug:"scan"},{level:3,title:"escapeMap",slug:"escapemap"},{level:3,title:"root",slug:"root"},{level:3,title:"transformCSS",slug:"transformcss"},{level:3,title:"transformGroups",slug:"transformgroups"},{level:3,title:"config",slug:"config"},{level:3,title:"configFiles",slug:"configfiles"},{level:3,title:"commentConfig",slug:"commentconfig"},{level:2,title:"MpxUnocssBase",slug:"mpxunocssbase"},{level:3,title:"baseFontSize",slug:"basefontsize"},{level:3,title:"preflight",slug:"preflight"},{level:3,title:"dark",slug:"dark"},{level:3,title:"attributifyPseudo",slug:"attributifypseudo"},{level:3,title:"variablePrefix",slug:"variableprefix"},{level:2,title:"Request query",slug:"request-query"},{level:3,title:"?resolve",slug:"resolve"},{level:3,title:"?root",slug:"root"},{level:3,title:"?fallback",slug:"fallback"},{level:3,title:"?useLocal",slug:"uselocal"},{level:3,title:"?isStyle",slug:"isstyle"},{level:3,title:"?isPage",slug:"ispage"},{level:3,title:"?isComponent",slug:"iscomponent"},{level:3,title:"?async",slug:"async"}]},{title:"模板指令",frontmatter:{},regularPath:"/api/directives.html",relativePath:"api/directives.md",key:"v-068ddbda",path:"/api/directives.html",headers:[{level:2,title:"wx:if",slug:"wx-if"},{level:2,title:"wx:elif",slug:"wx-elif"},{level:2,title:"wx:else",slug:"wx-else"},{level:2,title:"wx:for",slug:"wx-for"},{level:2,title:"wx:for-index",slug:"wx-for-index"},{level:2,title:"wx:for-item",slug:"wx-for-item"},{level:2,title:"wx:key",slug:"wx-key"},{level:2,title:"wx:class",slug:"wx-class"},{level:2,title:"wx:style",slug:"wx-style"},{level:2,title:"wx:model",slug:"wx-model"},{level:2,title:"wx:model-prop",slug:"wx-model-prop"},{level:2,title:"wx:model-event",slug:"wx-model-event"},{level:2,title:"wx:model-value-path",slug:"wx-model-value-path"},{level:2,title:"wx:model-filter",slug:"wx-model-filter"},{level:2,title:"wx:ref",slug:"wx-ref"},{level:2,title:"wx:show",slug:"wx-show"},{level:2,title:"bind",slug:"bind"},{level:2,title:"catch",slug:"catch"},{level:2,title:"capture-bind",slug:"capture-bind"},{level:2,title:"capture-catch",slug:"capture-catch"},{level:2,title:"@mode",slug:"mode"},{level:2,title:"@_mode",slug:"mode"},{level:2,title:"@env",slug:"env"},{level:2,title:"mpxTagName",slug:"mpxtagname"}]},{title:"组合式 API",frontmatter:{},regularPath:"/api/composition-api.html",relativePath:"api/composition-api.md",key:"v-7560cbe0",path:"/api/composition-api.html",headers:[{level:2,title:"setup",slug:"setup"},{level:2,title:"生命周期钩子",slug:"生命周期钩子"},{level:3,title:"onBeforeMount",slug:"onbeforemount"},{level:3,title:"onMounted",slug:"onmounted"},{level:3,title:"onBeforeUpdate",slug:"onbeforeupdate"},{level:3,title:"onUpdated",slug:"onupdated"},{level:3,title:"onBeforeUnmount",slug:"onbeforeunmount"},{level:3,title:"onUnmount",slug:"onunmount"},{level:3,title:"onLoad",slug:"onload"},{level:3,title:"onShow",slug:"onshow"},{level:3,title:"onHide",slug:"onhide"},{level:3,title:"onResize",slug:"onresize"},{level:3,title:"onPullDownRefresh",slug:"onpulldownrefresh"},{level:3,title:"onReachBottom",slug:"onreachbottom"},{level:3,title:"onShareAppMessage",slug:"onshareappmessage"},{level:3,title:"onShareTimeline",slug:"onsharetimeline"},{level:3,title:"onAddToFavorites",slug:"onaddtofavorites"},{level:3,title:"onPageScroll",slug:"onpagescroll"},{level:3,title:"onTabItemTap",slug:"ontabitemtap"},{level:3,title:"onSaveExitState",slug:"onsaveexitstate"},{level:3,title:"onServerPrefetch",slug:"onserverprefetch"},{level:2,title:"getCurrentInstance",slug:"getcurrentinstance"},{level:2,title:"useI18n",slug:"usei18n"},{level:2,title:"useFetch",slug:"usefetch"}]},{title:"周边拓展",frontmatter:{sidebarDepth:2},regularPath:"/api/extend.html",relativePath:"api/extend.md",key:"v-33e6cba4",path:"/api/extend.html",headers:[{level:2,title:"mpx-fetch",slug:"mpx-fetch"},{level:3,title:"fetch(config)",slug:"fetch-config"},{level:3,title:"CancelToken",slug:"canceltoken"},{level:3,title:"XFetch",slug:"xfetch"},{level:3,title:"interceptors",slug:"interceptors"},{level:3,title:"proxy 代理",slug:"proxy"},{level:3,title:"useFetch",slug:"usefetch"},{level:2,title:"api-proxy",slug:"api-proxy"},{level:2,title:"webview-bridge",slug:"webview-bridge"},{level:2,title:"size-report",slug:"size-report"},{level:3,title:"插件配置项",slug:"插件配置项"},{level:2,title:"i18n",slug:"i18n"},{level:3,title:"useI18n",slug:"usei18n"}]},{title:"全局 API",frontmatter:{},regularPath:"/api/global-api.html",relativePath:"api/global-api.md",key:"v-32b77802",path:"/api/global-api.html",headers:[{level:2,title:"全局对象 Mpx",slug:"global-mpx"},{level:3,title:"mixin",slug:"mixin"},{level:3,title:"injectMixins",slug:"injectmixins"},{level:3,title:"observable",slug:"observable"},{level:3,title:"set",slug:"set"},{level:3,title:"delete",slug:"delete"},{level:3,title:"use",slug:"use"},{level:3,title:"watch",slug:"watch"},{level:2,title:"createApp",slug:"createapp"},{level:2,title:"createPage",slug:"createpage"},{level:2,title:"createComponent",slug:"createcomponent"},{level:2,title:"nextTick",slug:"nexttick"},{level:2,title:"toPureObject",slug:"topureobject"},{level:2,title:"getMixin",slug:"getmixin"},{level:2,title:"implement",slug:"implement"},{level:2,title:"内建生命周期变量",slug:"built-in-lifecycle-variable"},{level:3,title:"BEFORECREATE",slug:"beforecreate"},{level:3,title:"CREATED",slug:"created"},{level:3,title:"BEFOREMOUNT",slug:"beforemount"},{level:3,title:"MOUNTED",slug:"mounted"},{level:3,title:"BEFOREUPDATE",slug:"beforeupdate"},{level:3,title:"UPDATED",slug:"updated"},{level:3,title:"SERVERPREFETCH",slug:"serverprefetch"},{level:3,title:"BEFOREUNMOUNT",slug:"beforeunmount"},{level:3,title:"UNMOUNTED",slug:"unmounted"},{level:3,title:"ONLOAD",slug:"onload"},{level:3,title:"ONSHOW",slug:"onshow"},{level:3,title:"ONHIDE",slug:"onhide"},{level:3,title:"ONRESIZE",slug:"onresize"},{level:2,title:"响应式 API",slug:"响应式-api"},{level:2,title:"组合式 API",slug:"组合式-api"},{level:2,title:"store API",slug:"store-api"}]},{frontmatter:{},regularPath:"/api/",relativePath:"api/index.md",key:"v-6266eb79",path:"/api/"},{title:"实例 API",frontmatter:{},regularPath:"/api/instance-api.html",relativePath:"api/instance-api.md",key:"v-808ce144",path:"/api/instance-api.html",headers:[{level:2,title:"$set",slug:"set"},{level:2,title:"$watch",slug:"watch"},{level:2,title:"$delete",slug:"delete"},{level:2,title:"$refs",slug:"refs"},{level:2,title:"$asyncRefs",slug:"asyncrefs"},{level:2,title:"$forceUpdate",slug:"forceupdate"},{level:2,title:"$nextTick",slug:"nexttick"},{level:2,title:"$i18n",slug:"i18n"},{level:2,title:"$rawOptions",slug:"rawoptions"}]},{title:"选项式 API",frontmatter:{},regularPath:"/api/optional-api.html",relativePath:"api/optional-api.md",key:"v-7d2b6e08",path:"/api/optional-api.html",headers:[{level:3,title:"onAppInit",slug:"onappinit"},{level:3,title:"onSSRAppCreated",slug:"onssrappcreated"}]},{title:"滴滴开源小程序框架Mpx",frontmatter:{sidebarDepth:2},regularPath:"/articles/1.0.html",relativePath:"articles/1.0.md",key:"v-4286840a",path:"/articles/1.0.html",headers:[{level:2,title:"设计思路",slug:"设计思路"},{level:2,title:"技术实现",slug:"技术实现"},{level:3,title:"数据响应与性能优化",slug:"数据响应与性能优化"},{level:3,title:"编译构建",slug:"编译构建"},{level:2,title:"结语",slug:"结语"}]},{title:"响应式 API",frontmatter:{sidebarDepth:2},regularPath:"/api/reactivity-api.html",relativePath:"api/reactivity-api.md",key:"v-0c915944",path:"/api/reactivity-api.html",headers:[{level:2,title:"响应式基础 API",slug:"响应式基础-api"},{level:3,title:"reactive",slug:"reactive"},{level:3,title:"isReactive",slug:"isreactive"},{level:3,title:"markRaw",slug:"markraw"},{level:3,title:"shallowReactive",slug:"shallowreactive"},{level:3,title:"set",slug:"set"},{level:3,title:"del",slug:"del"},{level:2,title:"Computed 与 Watch",slug:"computed-与-watch"},{level:3,title:"computed",slug:"computed"},{level:3,title:"watchEffect",slug:"watcheffect"},{level:3,title:"watchSyncEffect",slug:"watchsynceffect"},{level:3,title:"watchPostEffect",slug:"watchposteffect"},{level:3,title:"watch",slug:"watch"},{level:2,title:"Effect 作用域 API",slug:"effect-作用域-api"},{level:3,title:"effectScope",slug:"effectscope"},{level:3,title:"getCurrentScope",slug:"getcurrentscope"},{level:3,title:"onScopeDispose",slug:"onscopedispose"},{level:2,title:"Refs",slug:"refs"},{level:3,title:"ref",slug:"ref"},{level:3,title:"unref",slug:"unref"},{level:3,title:"toRef",slug:"toref"},{level:3,title:"toRefs",slug:"torefs"},{level:3,title:"isRef",slug:"isref"},{level:3,title:"customRef",slug:"customref"},{level:3,title:"shallowRef",slug:"shallowref"},{level:3,title:"triggerRef",slug:"triggerref"}]},{title:"Store API",frontmatter:{sidebarDepth:2},regularPath:"/api/store-api.html",relativePath:"api/store-api.md",key:"v-cd129100",path:"/api/store-api.html",headers:[{level:2,title:"createStore",slug:"createstore"},{level:3,title:"Store 实例属性",slug:"store-实例属性"},{level:3,title:"Store 实例方法",slug:"store-实例方法"},{level:2,title:"createStoreWithThis",slug:"createstorewiththis"},{level:2,title:"createStateWithThis",slug:"createstatewiththis"},{level:2,title:"createGettersWithThis",slug:"creategetterswiththis"},{level:2,title:"createMutationsWithThis",slug:"createmutationswiththis"},{level:2,title:"createActionsWithThis",slug:"createactionswiththis"}]},{title:"滴滴小程序框架Mpx发布2.0，支持小程序跨平台开发，可直接转换已有微信小程序",frontmatter:{sidebarDepth:2},regularPath:"/articles/2.0.html",relativePath:"articles/2.0.md",key:"v-b32d8070",path:"/articles/2.0.html",headers:[{level:2,title:"跨平台开发",slug:"跨平台开发"},{level:3,title:"设计理念",slug:"设计理念"},{level:3,title:"使用方法",slug:"使用方法"},{level:3,title:"差异抹平",slug:"差异抹平"},{level:3,title:"条件编译",slug:"条件编译"},{level:2,title:"性能优化",slug:"性能优化"},{level:3,title:"setData优化",slug:"setdata优化"},{level:3,title:"包体积优化",slug:"包体积优化"},{level:2,title:"渐进迁移",slug:"渐进迁移"},{level:2,title:"未来规划",slug:"未来规划"}]},{title:"Mpx2.7 版本正式发布，大幅提升编译构建速度",frontmatter:{},regularPath:"/articles/2.7-release.html",relativePath:"articles/2.7-release.md",key:"v-ae4cfcf4",path:"/articles/2.7-release.html",headers:[{level:2,title:"编译构建提速",slug:"编译构建提速"},{level:2,title:"分包输出能力增强",slug:"分包输出能力增强"},{level:3,title:"独立分包初始化模块",slug:"独立分包初始化模块"},{level:3,title:"分包异步化",slug:"分包异步化"},{level:2,title:"单元测试支持",slug:"单元测试支持"},{level:2,title:"Module.rules复用",slug:"module-rules复用"},{level:2,title:"即将到来的新特性",slug:"即将到来的新特性"},{level:2,title:"未来规划",slug:"未来规划"}]},{title:"Mpx2.8 版本正式发布，使用组合式 API 开发小程序",frontmatter:{},regularPath:"/articles/2.8-release.html",relativePath:"articles/2.8-release.md",key:"v-27ec3078",path:"/articles/2.8-release.html",headers:[{level:2,title:"组合式 API 实现",slug:"组合式-api-实现"},{level:3,title:"生命周期钩子函数",slug:"生命周期钩子函数"},{level:3,title:"<script setup>",slug:"script-setup"},{level:3,title:"组合式 API 与 Vue3 中的差异",slug:"组合式-api-与-vue3-中的差异"},{level:2,title:"响应式 API 实现",slug:"响应式-api-实现"},{level:3,title:"数据响应限制带来的差异",slug:"数据响应限制带来的差异"},{level:3,title:"响应式 API 与 Vue3 中的区别",slug:"响应式-api-与-vue3-中的区别"},{level:2,title:"生态周边适配",slug:"生态周边适配"},{level:3,title:"Pinia store 支持",slug:"pinia-store-支持"},{level:3,title:"I18n 支持",slug:"i18n-支持"},{level:2,title:"输出 web 适配",slug:"输出-web-适配"},{level:2,title:"性能表现",slug:"性能表现"},{level:3,title:"组件初始化耗时",slug:"组件初始化耗时"},{level:3,title:"组件 JS 体积",slug:"组件-js-体积"},{level:3,title:"框架运行时体积",slug:"框架运行时体积"},{level:2,title:"破坏性改变",slug:"破坏性改变"},{level:2,title:"未来规划",slug:"未来规划"}]},{title:"Mpx框架相关文章",frontmatter:{sidebarDepth:0},regularPath:"/articles/",relativePath:"articles/index.md",key:"v-6ced36f6",path:"/articles/"},{title:"通过 Mpx 使用组合式 API 进行小程序开发",frontmatter:{},regularPath:"/articles/2.8-release-alter.html",relativePath:"articles/2.8-release-alter.md",key:"v-1b4df5b2",path:"/articles/2.8-release-alter.html",headers:[{level:2,title:"组合式 API 实现",slug:"组合式-api-实现"},{level:3,title:"生命周期钩子函数",slug:"生命周期钩子函数"},{level:3,title:"<script setup>",slug:"script-setup"},{level:3,title:"组合式 API 与 Vue3 中的差异",slug:"组合式-api-与-vue3-中的差异"},{level:2,title:"响应式 API 实现",slug:"响应式-api-实现"},{level:3,title:"数据响应限制带来的差异",slug:"数据响应限制带来的差异"},{level:3,title:"响应式 API 与 Vue3 中的区别",slug:"响应式-api-与-vue3-中的区别"},{level:2,title:"生态周边适配",slug:"生态周边适配"},{level:3,title:"Pinia store 支持",slug:"pinia-store-支持"},{level:3,title:"I18n 支持",slug:"i18n-支持"},{level:2,title:"输出 web 适配",slug:"输出-web-适配"},{level:2,title:"性能表现",slug:"性能表现"},{level:3,title:"组件初始化耗时",slug:"组件初始化耗时"},{level:3,title:"组件 JS 体积",slug:"组件-js-体积"},{level:3,title:"框架运行时体积",slug:"框架运行时体积"},{level:2,title:"破坏性改变",slug:"破坏性改变"},{level:2,title:"未来规划",slug:"未来规划"}]},{title:"Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化",frontmatter:{},regularPath:"/articles/2.9-release-alter.html",relativePath:"articles/2.9-release-alter.md",key:"v-16cd1ba0",path:"/articles/2.9-release-alter.html",headers:[{level:2,title:"原子类支持",slug:"原子类支持"},{level:3,title:"小程序原子类使用注意事项",slug:"小程序原子类使用注意事项"},{level:3,title:"原子类使用参考文档",slug:"原子类使用参考文档"},{level:2,title:"输出 web 支持 SSR",slug:"输出-web-支持-ssr"},{level:3,title:"配置使用 SSR",slug:"配置使用-ssr"},{level:3,title:"SSR 生命周期",slug:"ssr-生命周期"},{level:3,title:"其他注意事项",slug:"其他注意事项"},{level:2,title:"包体积优化",slug:"包体积优化"},{level:3,title:"模版代码优化",slug:"模版代码优化"},{level:3,title:"空模块移除",slug:"空模块移除"},{level:3,title:"Render函数优化",slug:"render函数优化"},{level:2,title:"未来规划",slug:"未来规划"}]},{title:"Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化",frontmatter:{},regularPath:"/articles/2.9-release.html",relativePath:"articles/2.9-release.md",key:"v-2f3a4e02",path:"/articles/2.9-release.html",headers:[{level:2,title:"原子类支持",slug:"原子类支持"},{level:3,title:"小程序原子类使用注意事项",slug:"小程序原子类使用注意事项"},{level:3,title:"原子类使用参考文档",slug:"原子类使用参考文档"},{level:2,title:"输出 web 支持 SSR",slug:"输出-web-支持-ssr"},{level:3,title:"配置使用 SSR",slug:"配置使用-ssr"},{level:3,title:"SSR 生命周期",slug:"ssr-生命周期"},{level:3,title:"其他注意事项",slug:"其他注意事项"},{level:2,title:"包体积优化",slug:"包体积优化"},{level:3,title:"模版代码优化",slug:"模版代码优化"},{level:3,title:"空模块移除",slug:"空模块移除"},{level:3,title:"Render函数优化",slug:"render函数优化"},{level:2,title:"未来规划",slug:"未来规划"}]},{title:"小程序开发者，为什么你应该尝试下MPX",frontmatter:{sidebarDepth:2},regularPath:"/articles/mpx1.html",relativePath:"articles/mpx1.md",key:"v-65ac7ae0",path:"/articles/mpx1.html",headers:[{level:2,title:"背景",slug:"背景"},{level:2,title:"优势",slug:"优势"},{level:3,title:"原生兼容",slug:"原生兼容"},{level:3,title:"第三方组件库",slug:"第三方组件库"},{level:3,title:"按需引用",slug:"按需引用"},{level:3,title:"跨小程序平台",slug:"跨小程序平台"},{level:3,title:"能力增强",slug:"能力增强"},{level:3,title:"性能优势",slug:"性能优势"},{level:2,title:"总结",slug:"总结"}]},{title:"小程序跨端组件库 Mpx-cube-ui 开源啦",frontmatter:{},regularPath:"/articles/mpx-cube-ui.html",relativePath:"articles/mpx-cube-ui.md",key:"v-29b15788",path:"/articles/mpx-cube-ui.html",headers:[{level:2,title:"业务现状",slug:"业务现状"},{level:3,title:"集团产品的迭代",slug:"集团产品的迭代"},{level:3,title:"团队内的业务迭代",slug:"团队内的业务迭代"},{level:2,title:"Mpx 技术生态",slug:"mpx-技术生态"},{level:2,title:"组件库自身的维护",slug:"组件库自身的维护"},{level:2,title:"Mpx 组件体系",slug:"mpx-组件体系"},{level:2,title:"Mpx-cube-ui 组件设计",slug:"mpx-cube-ui-组件设计"},{level:2,title:"未来的规划",slug:"未来的规划"}]},{title:"@mpxjs/cli 插件化改造",frontmatter:{},regularPath:"/articles/mpx-cli-next.html",relativePath:"articles/mpx-cli-next.md",key:"v-67f67560",path:"/articles/mpx-cli-next.html",headers:[{level:2,title:"背景 & 现状",slug:"背景-现状"},{level:2,title:"mpxjs/cli@2.x 自身的痛点",slug:"mpxjs-cli-2-x-自身的痛点"},{level:3,title:"有关 @vue/cli",slug:"有关-vue-cli"},{level:2,title:"插件化改造方案",slug:"插件化改造方案"},{level:3,title:"底层能力",slug:"底层能力"},{level:3,title:"上层插件拆分",slug:"上层插件拆分"},{level:3,title:"Web 平台编译构建能力增强",slug:"web-平台编译构建能力增强"},{level:3,title:"项目配置拓展能力",slug:"项目配置拓展能力"},{level:3,title:"改造后的目录结构",slug:"改造后的目录结构"},{level:2,title:"没有银弹",slug:"没有银弹"},{level:2,title:"如何开发一个基于 mpx 的业务脚手架插件",slug:"如何开发一个基于-mpx-的业务脚手架插件"}]},{title:"Mpx 小程序框架技术揭秘",frontmatter:{sidebarDepth:2},regularPath:"/articles/mpx2.html",relativePath:"articles/mpx2.md",key:"v-9cda2680",path:"/articles/mpx2.html",headers:[{level:2,title:"编译环节",slug:"编译环节"},{level:3,title:"动态入口编译",slug:"动态入口编译"},{level:3,title:"Render Function",slug:"render-function"},{level:3,title:"Wxs Module",slug:"wxs-module"},{level:3,title:"template/script/style/json 模块单文件的生成",slug:"template-script-style-json-模块单文件的生成"},{level:2,title:"运行时环节",slug:"运行时环节"},{level:3,title:"响应式系统",slug:"响应式系统"},{level:2,title:"性能优化",slug:"性能优化"},{level:3,title:"尽可能的减少 setData 传输的数据",slug:"尽可能的减少-setdata-传输的数据"},{level:3,title:"尽可能的减少 setData 的调用频次",slug:"尽可能的减少-setdata-的调用频次"}]},{title:"小程序框架运行时性能大测评",frontmatter:{sidebarDepth:2},regularPath:"/articles/performance.html",relativePath:"articles/performance.md",key:"v-aba0a160",path:"/articles/performance.html",headers:[{level:2,title:"测试方案",slug:"测试方案"},{level:3,title:"动态测试场景",slug:"动态测试场景"},{level:3,title:"静态测试场景",slug:"静态测试场景"},{level:2,title:"测试流程及数据",slug:"测试流程及数据"},{level:3,title:"框架运行时体积",slug:"框架运行时体积"},{level:3,title:"页面渲染耗时(动态测试)",slug:"页面渲染耗时-动态测试"},{level:3,title:"页面更新耗时(无后台数据)",slug:"页面更新耗时-无后台数据"},{level:3,title:"页面更新耗时(有后台数据)",slug:"页面更新耗时-有后台数据"},{level:3,title:"页面更新耗时(大数据量场景)",slug:"页面更新耗时-大数据量场景"},{level:3,title:"局部更新耗时",slug:"局部更新耗时"},{level:3,title:"setData调用",slug:"setdata调用"},{level:3,title:"页面渲染耗时(静态测试)",slug:"页面渲染耗时-静态测试"},{level:2,title:"结论",slug:"结论"},{level:2,title:"一点私货",slug:"一点私货"}]},{title:"滴滴出行小程序体积优化实践",frontmatter:{sidebarDepth:2},regularPath:"/articles/size-control.html",relativePath:"articles/size-control.md",key:"v-06150180",path:"/articles/size-control.html",headers:[{level:2,title:"概述",slug:"概述"},{level:2,title:"背景",slug:"背景"},{level:2,title:"体积控制",slug:"体积控制"},{level:3,title:"基础优化手段",slug:"基础优化手段"},{level:3,title:"分析体积",slug:"分析体积"},{level:3,title:"配置分包",slug:"配置分包"},{level:3,title:"分包资源精细化管理",slug:"分包资源精细化管理"},{level:3,title:"封面方案",slug:"封面方案"},{level:2,title:"总结",slug:"总结"}]},{title:"使用Typescript新特性Template Literal Types完善链式key的类型推导",frontmatter:{sidebarDepth:2},regularPath:"/articles/ts-derivation.html",relativePath:"articles/ts-derivation.md",key:"v-16a68b26",path:"/articles/ts-derivation.html",headers:[{level:2,title:"前言",slug:"前言"},{level:2,title:"特性",slug:"特性"},{level:2,title:"可以用来做什么",slug:"可以用来做什么"},{level:2,title:"getValueByPath使用TS实现",slug:"getvaluebypath使用ts实现"},{level:3,title:"单层推导",slug:"单层推导"},{level:3,title:"多层推导",slug:"多层推导"},{level:2,title:"深层次Actions的dispatch函数TS实现",slug:"深层次actions的dispatch函数ts实现"},{level:2,title:"结尾",slug:"结尾"},{level:2,title:"题外话：UnionToIntersection",slug:"题外话：uniontointersection"},{level:3,title:"Distributive conditional types",slug:"distributive-conditional-types"},{level:3,title:"Type inference in conditional types",slug:"type-inference-in-conditional-types"},{level:3,title:"UnionToIntersection 原理探究",slug:"uniontointersection-原理探究"},{level:2,title:"参考资料汇总",slug:"参考资料汇总"}]},{title:"原生能力兼容",frontmatter:{},regularPath:"/guide/advance/ability-compatible.html",relativePath:"guide/advance/ability-compatible.md",key:"v-2df9c8de",path:"/guide/advance/ability-compatible.html",headers:[{level:2,title:"custom-tab-bar",slug:"custom-tab-bar"},{level:2,title:"workers",slug:"workers"},{level:2,title:"云开发",slug:"云开发"},{level:2,title:"useExtendedLib",slug:"useextendedlib"}]},{title:"文档指南",frontmatter:{},regularPath:"/desc.html",relativePath:"desc.md",key:"v-770abfaa",path:"/desc.html",headers:[{level:2,title:"该项目指南",slug:"该项目指南"},{level:2,title:"编写格式指南",slug:"编写格式指南"},{level:2,title:"参考",slug:"参考"}]},{title:"自定义路径",frontmatter:{},regularPath:"/guide/advance/custom-output-path.html",relativePath:"guide/advance/custom-output-path.md",key:"v-419821e2",path:"/guide/advance/custom-output-path.html",headers:[{level:2,title:"自定义页面路径",slug:"自定义页面路径"},{level:2,title:"customOutputPath",slug:"customoutputpath"}]},{title:"Mpx 小程序单元测试能力建设与实践",frontmatter:{sidebarDepth:2},regularPath:"/articles/unit-test.html",relativePath:"articles/unit-test.md",key:"v-31f676ba",path:"/articles/unit-test.html",headers:[{level:2,title:"什么是单元测试",slug:"什么是单元测试"},{level:2,title:"前端单元测试",slug:"前端单元测试"},{level:3,title:"前端单元测试工具",slug:"前端单元测试工具"},{level:3,title:"测试断言库",slug:"测试断言库"},{level:3,title:"Jest 框架简介",slug:"jest-框架简介"},{level:2,title:"小程序单元测试",slug:"小程序单元测试"},{level:3,title:"与 web 应用的不同",slug:"与-web-应用的不同"},{level:3,title:"小程序单测框架整体流程",slug:"小程序单测框架整体流程"},{level:2,title:"Mpx 框架单元测试",slug:"mpx-框架单元测试"},{level:3,title:"初期版本",slug:"初期版本"},{level:3,title:"优化版本",slug:"优化版本"},{level:2,title:"Mpx组件单元测试实战",slug:"mpx组件单元测试实战"},{level:2,title:"结语",slug:"结语"}]},{title:"使用 DllPlugin",frontmatter:{},regularPath:"/guide/advance/dll-plugin.html",relativePath:"guide/advance/dll-plugin.md",key:"v-32741058",path:"/guide/advance/dll-plugin.html",headers:[{level:3,title:"相关插件简述",slug:"相关插件简述"},{level:3,title:"Mpx中 DllPlugin 的使用",slug:"mpx中-dllplugin-的使用"},{level:3,title:"Mpx 中对 DllPlugin 配置所做的相关处理",slug:"mpx-中对-dllplugin-配置所做的相关处理"},{level:3,title:"总结",slug:"总结"}]},{title:"分包异步化",frontmatter:{},regularPath:"/guide/advance/async-subpackage.html",relativePath:"guide/advance/async-subpackage.md",key:"v-27eacdde",path:"/guide/advance/async-subpackage.html",headers:[{level:2,title:"跨分包自定义组件引用",slug:"跨分包自定义组件引用"},{level:2,title:"跨分包 JS 代码引用",slug:"跨分包-js-代码引用"},{level:2,title:"跨分包 Store 引用",slug:"跨分包-store-引用"}]},{title:"图像资源处理",frontmatter:{},regularPath:"/guide/advance/image-process.html",relativePath:"guide/advance/image-process.md",key:"v-43feb580",path:"/guide/advance/image-process.html",headers:[{level:2,title:"图像资源引入有三种方式",slug:"图像资源引入有三种方式"},{level:2,title:"Base64 图像资源",slug:"base64-图像资源"},{level:2,title:"CDN 图像资源",slug:"cdn-图像资源"},{level:2,title:"CDN 图像资源输出本地目录，用户自行批量上传到CDN服务器",slug:"cdn-图像资源输出本地目录，用户自行批量上传到cdn服务器"},{level:2,title:"用户自定义图像处理方式",slug:"用户自定义图像处理方式"}]},{title:"国际化i18n",frontmatter:{},regularPath:"/guide/advance/i18n.html",relativePath:"guide/advance/i18n.md",key:"v-261b4b10",path:"/guide/advance/i18n.html",headers:[{level:2,title:"开启 i18n",slug:"开启-i18n"},{level:2,title:"选项式 API 中使用",slug:"options-api-usage"},{level:2,title:"在组合式 API 中使用",slug:"composition-api-usage"},{level:3,title:"开始使用",slug:"开始使用"},{level:2,title:"作用域",slug:"scope"},{level:2,title:"动态变更locale",slug:"动态变更locale"},{level:2,title:"动态更新语言集",slug:"动态更新语言集"},{level:2,title:"平台支持",slug:"平台支持"}]},{title:"使用 mixin",frontmatter:{},regularPath:"/guide/advance/mixin.html",relativePath:"guide/advance/mixin.md",key:"v-23021ac0",path:"/guide/advance/mixin.html",headers:[{level:2,title:"局部 Mixin",slug:"局部-mixin"},{level:2,title:"全局 Mixin",slug:"全局-mixin"}]},{title:"状态管理（pinia）",frontmatter:{},regularPath:"/guide/advance/pinia.html",relativePath:"guide/advance/pinia.md",key:"v-6a447440",path:"/guide/advance/pinia.html",headers:[{level:2,title:"介绍",slug:"介绍"},{level:3,title:"创建 pinia",slug:"创建-pinia"},{level:3,title:"创建 store",slug:"创建-store"},{level:3,title:"使用 store",slug:"使用-store"},{level:2,title:"使用插件",slug:"使用插件"}]},{title:"小程序插件",frontmatter:{},regularPath:"/guide/advance/plugin.html",relativePath:"guide/advance/plugin.md",key:"v-aa3f94b4",path:"/guide/advance/plugin.html",headers:[{level:3,title:"如何编写一个插件",slug:"如何编写一个插件"}]},{title:"使用npm",frontmatter:{},regularPath:"/guide/advance/npm.html",relativePath:"guide/advance/npm.md",key:"v-298abc80",path:"/guide/advance/npm.html",headers:[{level:2,title:"下载npm包",slug:"下载npm包"},{level:2,title:"引用npm模块",slug:"引用npm模块"},{level:2,title:"引用npm组件/页面",slug:"引用npm组件-页面"},{level:2,title:"兼容原生小程序路径规范",slug:"兼容原生小程序路径规范"}]},{title:"资源路径获取",frontmatter:{},regularPath:"/guide/advance/resource-resolve.html",relativePath:"guide/advance/resource-resolve.md",key:"v-f6b6871c",path:"/guide/advance/resource-resolve.html",headers:[{level:2,title:"?resolve",slug:"resolve"}]},{title:"跨平台",frontmatter:{},regularPath:"/guide/advance/platform.html",relativePath:"guide/advance/platform.md",key:"v-c6307034",path:"/guide/advance/platform.html",headers:[{level:2,title:"多平台支持",slug:"多平台支持"},{level:3,title:"template增强特性",slug:"template增强特性"},{level:3,title:"script增强特性",slug:"script增强特性"},{level:3,title:"style增强特性",slug:"style增强特性"},{level:3,title:"json增强特性",slug:"json增强特性"},{level:2,title:"跨平台输出小程序",slug:"跨平台输出小程序"},{level:3,title:"使用方法",slug:"使用方法"},{level:3,title:"跨平台差异抹平",slug:"跨平台差异抹平"},{level:2,title:"跨平台条件编译",slug:"跨平台条件编译"},{level:3,title:"文件维度条件编译",slug:"文件维度条件编译"},{level:3,title:"区块维度条件编译",slug:"区块维度条件编译"},{level:3,title:"代码维度条件编译",slug:"代码维度条件编译"},{level:3,title:"属性维度条件编译",slug:"属性维度条件编译"},{level:3,title:"通过 env 实现自定义目标环境的条件编译",slug:"use-env"},{level:3,title:"其他注意事项",slug:"其他注意事项"},{level:2,title:"跨平台输出web",slug:"跨平台输出web"},{level:3,title:"技术实现",slug:"技术实现"},{level:3,title:"使用方法",slug:"使用方法"},{level:3,title:"支持范围",slug:"支持范围"}]},{title:"依赖注入（Provide/Inject）",frontmatter:{},regularPath:"/guide/advance/provide-inject.html",relativePath:"guide/advance/provide-inject.md",key:"v-b7e9c1dc",path:"/guide/advance/provide-inject.html",headers:[{level:2,title:"适用场景",slug:"适用场景"},{level:2,title:"Provide 提供",slug:"provide-提供"},{level:3,title:"组合式语法",slug:"组合式语法"},{level:3,title:"选项式语法",slug:"选项式语法"},{level:3,title:"应用级顶层 provide",slug:"应用级顶层-provide"},{level:2,title:"Inject 注入",slug:"inject-注入"},{level:3,title:"组合式语法",slug:"组合式语法"},{level:3,title:"选项式语法",slug:"选项式语法"},{level:2,title:"避免注入名潜在冲突",slug:"避免注入名潜在冲突"},{level:2,title:"TS 类型支持",slug:"ts-类型支持"},{level:2,title:"跨端差异",slug:"跨端差异"}]},{title:"SSR",frontmatter:{},regularPath:"/guide/advance/ssr.html",relativePath:"guide/advance/ssr.md",key:"v-59734f60",path:"/guide/advance/ssr.html",headers:[{level:2,title:"配置使用 SSR",slug:"配置使用-ssr"},{level:3,title:"构建server/client bundle",slug:"构建server-client-bundle"},{level:3,title:"准备页面模版",slug:"准备页面模版"},{level:3,title:"集成启动 SSR 服务",slug:"集成启动-ssr-服务"},{level:2,title:"SSR 生命周期",slug:"ssr-生命周期"},{level:3,title:"onAppInit",slug:"onappinit"},{level:3,title:"serverPrefetch",slug:"serverprefetch"},{level:3,title:"onSSRAppCreated",slug:"onssrappcreated"},{level:2,title:"其他注意事项",slug:"其他注意事项"}]},{title:"包体积分析",frontmatter:{},regularPath:"/guide/advance/size-report.html",relativePath:"guide/advance/size-report.md",key:"v-4cc39ac0",path:"/guide/advance/size-report.html",headers:[{level:2,title:"与 webpack-bundle-analyzer 的区别",slug:"与-webpack-bundle-analyzer-的区别"},{level:2,title:"使用方法",slug:"使用方法"},{level:2,title:"业务实践",slug:"业务实践"},{level:2,title:"总结",slug:"总结"}]},{title:"状态管理（store）",frontmatter:{},regularPath:"/guide/advance/store.html",relativePath:"guide/advance/store.md",key:"v-04b286c0",path:"/guide/advance/store.html",headers:[{level:2,title:"介绍",slug:"介绍"},{level:3,title:"创建 store",slug:"创建-store"},{level:2,title:"State",slug:"state"},{level:3,title:"在组件中获取 state",slug:"在组件中获取-state"},{level:3,title:"MapState 辅助函数",slug:"mapstate-辅助函数"},{level:3,title:"对象展开运算符",slug:"对象展开运算符"},{level:2,title:"Getter",slug:"getter"},{level:3,title:"MapGetters 辅助函数",slug:"mapgetters-辅助函数"},{level:2,title:"Mutation",slug:"mutation"},{level:3,title:"提交载荷（Payload）",slug:"提交载荷（payload）"},{level:3,title:"Mutation 必须是同步函数",slug:"mutation-必须是同步函数"},{level:3,title:"在组件中提交 Mutation",slug:"在组件中提交-mutation"},{level:2,title:"Action",slug:"action"},{level:3,title:"调用 action",slug:"调用-action"},{level:3,title:"在组件中调用 Action",slug:"在组件中调用-action"},{level:3,title:"组合 Action",slug:"组合-action"},{level:2,title:"Modules",slug:"modules"},{level:3,title:"模块的局部状态",slug:"模块的局部状态"},{level:3,title:"模块在组件中的引入方式",slug:"模块在组件中的引入方式"},{level:2,title:"多实例 store",slug:"多实例-store"},{level:3,title:"合并继承多实例 store",slug:"合并继承多实例-store"},{level:2,title:"在 Typescript 中使用 store",slug:"在-typescript-中使用-store"},{level:2,title:"在组合式 API 中使用 store",slug:"use-store-in-composition-api"}]},{title:"使用分包",frontmatter:{},regularPath:"/guide/advance/subpackage.html",relativePath:"guide/advance/subpackage.md",key:"v-25e023c0",path:"/guide/advance/subpackage.html",headers:[{level:2,title:"原生语法注册分包",slug:"原生语法注册分包"},{level:2,title:"packages 语法注册分包",slug:"packages-语法注册分包"},{level:3,title:"使用方法",slug:"使用方法"},{level:3,title:"注意事项",slug:"注意事项"},{level:2,title:"独立分包",slug:"独立分包"},{level:2,title:"分包预下载",slug:"分包预下载"},{level:2,title:"分包注意事项",slug:"分包注意事项"}]},{title:"类名样式绑定",frontmatter:{},regularPath:"/guide/basic/class-style-binding.html",relativePath:"guide/basic/class-style-binding.md",key:"v-ade3a0c0",path:"/guide/basic/class-style-binding.html",headers:[{level:2,title:"类名绑定",slug:"类名绑定"},{level:3,title:"对象语法",slug:"对象语法"},{level:3,title:"数组语法",slug:"数组语法"},{level:2,title:"样式绑定",slug:"样式绑定"},{level:3,title:"对象语法",slug:"对象语法"},{level:3,title:"数组语法",slug:"数组语法"}]},{title:"自定义组件",frontmatter:{},regularPath:"/guide/basic/component.html",relativePath:"guide/basic/component.md",key:"v-082a4080",path:"/guide/basic/component.html",headers:[{level:2,title:"动态组件",slug:"动态组件"},{level:2,title:"slot",slug:"slot"}]},{title:"条件渲染",frontmatter:{},regularPath:"/guide/basic/conditional-render.html",relativePath:"guide/basic/conditional-render.md",key:"v-4653082a",path:"/guide/basic/conditional-render.html"},{title:"使用原子类",frontmatter:{},regularPath:"/guide/advance/utility-first-css.html",relativePath:"guide/advance/utility-first-css.md",key:"v-eb995c80",path:"/guide/advance/utility-first-css.html",headers:[{level:2,title:"原子类环境配置",slug:"compile-config"},{level:3,title:"vscode插件支持",slug:"vscode插件支持"},{level:2,title:"功能支持范围",slug:"config-supports"},{level:2,title:"工具类可用范围",slug:"utility-supports"},{level:3,title:"General",slug:"general"},{level:3,title:"Accessibility",slug:"accessibility"},{level:3,title:"Animations",slug:"animations"},{level:3,title:"Backgrounds",slug:"backgrounds"},{level:3,title:"Behaviors",slug:"behaviors"},{level:3,title:"Borders",slug:"borders"},{level:3,title:"Effects",slug:"effects"},{level:3,title:"Filters",slug:"filters"},{level:3,title:"Interactivity",slug:"interactivity"},{level:3,title:"Layout",slug:"layout"},{level:2,title:"小程序原子类使用注意点",slug:"attentions"},{level:3,title:"特殊字符转义",slug:"escape"},{level:3,title:"原子类分包输出",slug:"subpackage"},{level:3,title:"样式隔离与组件分包异步",slug:"style-isolation"}]},{title:"事件处理",frontmatter:{},regularPath:"/guide/basic/event.html",relativePath:"guide/basic/event.md",key:"v-4c636240",path:"/guide/basic/event.html"},{title:"列表渲染",frontmatter:{},regularPath:"/guide/basic/list-render.html",relativePath:"guide/basic/list-render.md",key:"v-9217ab80",path:"/guide/basic/list-render.html",headers:[{level:2,title:"\b特殊处理",slug:"特殊处理"},{level:3,title:"computed方式",slug:"computed方式"},{level:3,title:"wxs方式",slug:"wxs方式"}]},{title:"IDE 高亮配置",frontmatter:{},regularPath:"/guide/basic/ide.html",relativePath:"guide/basic/ide.md",key:"v-b77c6940",path:"/guide/basic/ide.html",headers:[{level:2,title:"IntelliJ",slug:"intellij"},{level:2,title:"vscode",slug:"vscode"},{level:3,title:"插件功能介绍",slug:"插件功能介绍"}]},{title:"CSS 处理",frontmatter:{},regularPath:"/guide/basic/css.html",relativePath:"guide/basic/css.md",key:"v-64d5c000",path:"/guide/basic/css.html",headers:[{level:2,title:"CSS 预编译",slug:"css-预编译"},{level:2,title:"公共样式复用",slug:"公共样式复用"},{level:3,title:"style src 复用",slug:"style-src-复用"},{level:3,title:"@import 复用",slug:"import-复用"},{level:2,title:"CSS 压缩",slug:"css-压缩"}]},{title:"模版内可选链表达式",frontmatter:{},regularPath:"/guide/basic/option-chain.html",relativePath:"guide/basic/option-chain.md",key:"v-3f8ff5dc",path:"/guide/basic/option-chain.html"},{title:"获取组件实例/节点信息",frontmatter:{},regularPath:"/guide/basic/refs.html",relativePath:"guide/basic/refs.md",key:"v-14d018a4",path:"/guide/basic/refs.html",headers:[{level:2,title:"在列表渲染中使用wx:ref",slug:"在列表渲染中使用wx-ref"}]},{title:"数据响应",frontmatter:{},regularPath:"/guide/basic/reactive.html",relativePath:"guide/basic/reactive.md",key:"v-3e859f72",path:"/guide/basic/reactive.html"},{title:"单文件开发",frontmatter:{},regularPath:"/guide/basic/single-file.html",relativePath:"guide/basic/single-file.md",key:"v-05fb8080",path:"/guide/basic/single-file.html"},{title:"双向绑定",frontmatter:{},regularPath:"/guide/basic/two-way-binding.html",relativePath:"guide/basic/two-way-binding.md",key:"v-4db713e0",path:"/guide/basic/two-way-binding.html",headers:[{level:2,title:"对自定义组件使用",slug:"对自定义组件使用"},{level:2,title:"更改双向绑定的监听事件及数据属性",slug:"更改双向绑定的监听事件及数据属性"},{level:2,title:"更改双向绑定事件数据路径",slug:"更改双向绑定事件数据路径"},{level:2,title:"双向绑定过滤器",slug:"双向绑定过滤器"}]},{title:"模板语法",frontmatter:{},regularPath:"/guide/basic/template.html",relativePath:"guide/basic/template.md",key:"v-25ecbea0",path:"/guide/basic/template.html",headers:[{level:2,title:"模板预编译",slug:"模板预编译"}]},{title:"快速开始",frontmatter:{},regularPath:"/guide/basic/start.html",relativePath:"guide/basic/start.md",key:"v-fa77fc40",path:"/guide/basic/start.html",headers:[{level:2,title:"安装脚手架",slug:"安装脚手架"},{level:2,title:"创建项目安装依赖",slug:"创建项目安装依赖"},{level:2,title:"编译构建",slug:"编译构建"},{level:2,title:"预览调试",slug:"预览调试"},{level:2,title:"开始code",slug:"开始code"},{level:2,title:"跨平台输出",slug:"跨平台输出"}]},{title:"响应式 API",frontmatter:{},regularPath:"/guide/composition-api/reactive-api.html",relativePath:"guide/composition-api/reactive-api.md",key:"v-1553266a",path:"/guide/composition-api/reactive-api.html",headers:[{level:2,title:"创建响应式对象",slug:"创建响应式对象"},{level:2,title:"使用ref()创建独立的响应式值",slug:"use-ref-create-reactive-value"},{level:3,title:"Ref 解包",slug:"ref-解包"},{level:3,title:"访问响应式对象",slug:"访问响应式对象"},{level:2,title:"响应式对象解构",slug:"响应式对象解构"},{level:2,title:"计算值",slug:"计算值"},{level:2,title:"watchEffect",slug:"watcheffect"},{level:3,title:"停止侦听",slug:"停止侦听"},{level:3,title:"清除副作用",slug:"清除副作用"},{level:3,title:"副作用刷新时机",slug:"副作用刷新时机"},{level:2,title:"watch",slug:"watch"},{level:3,title:"侦听单个数据源",slug:"侦听单个数据源"},{level:3,title:"侦听多个数据源",slug:"侦听多个数据源"},{level:3,title:"侦听响应式对象",slug:"侦听响应式对象"},{level:3,title:"立即回调的侦听器",slug:"立即回调的侦听器"},{level:3,title:"与 watchEffect 共享的行为",slug:"与-watcheffect-共享的行为"},{level:2,title:"响应式 API 与 Vue3 中的区别",slug:"响应式-api-与-vue3-中的区别"},{level:3,title:"数据响应限制带来的差异",slug:"数据响应限制带来的差异"}]},{title:"Api代理",frontmatter:{},regularPath:"/guide/extend/api-proxy.html",relativePath:"guide/extend/api-proxy.md",key:"v-4777611a",path:"/guide/extend/api-proxy.html",headers:[{level:2,title:"Usage",slug:"usage"},{level:2,title:"Options",slug:"options"},{level:2,title:"example",slug:"example"},{level:3,title:"普通形式",slug:"普通形式"},{level:3,title:"使用promise形式",slug:"使用promise形式"}]},{title:"组合式 API",frontmatter:{},regularPath:"/guide/composition-api/composition-api.html",relativePath:"guide/composition-api/composition-api.md",key:"v-453e3320",path:"/guide/composition-api/composition-api.html",headers:[{level:2,title:"什么是组合式 API",slug:"什么是组合式-api"},{level:2,title:"组合式 API 基础",slug:"组合式-api-基础"},{level:3,title:"setup 函数",slug:"setup-函数"},{level:3,title:"带 ref 的响应式变量",slug:"带-ref-的响应式变量"},{level:3,title:"在 setup 中注册生命周期钩子",slug:"在-setup-中注册生命周期钩子"},{level:3,title:"watch 响应式更改",slug:"watch-响应式更改"},{level:3,title:"独立的 computed 属性",slug:"独立的-computed-属性"},{level:2,title:"Setup",slug:"setup"},{level:3,title:"参数",slug:"参数"},{level:3,title:"访问组件的 property",slug:"访问组件的-property"},{level:3,title:"结合模板使用",slug:"结合模板使用"},{level:3,title:"使用 this",slug:"使用-this"},{level:2,title:"生命周期钩子",slug:"lifecycle-hooks"},{level:3,title:"框架内置生命周期",slug:"框架内置生命周期"},{level:3,title:"具有副作用的页面事件",slug:"具有副作用的页面事件"},{level:2,title:"模板引用",slug:"template-ref"},{level:2,title:"<script setup>",slug:"script-setup"},{level:3,title:"基本语法",slug:"基本语法"},{level:3,title:"顶层的绑定会被暴露给模版",slug:"顶层的绑定会被暴露给模版"},{level:3,title:"响应式",slug:"响应式"},{level:3,title:"defineProps()",slug:"defineprops"},{level:3,title:"defineExpose()",slug:"defineexpose"},{level:3,title:"defineOptions()",slug:"defineoptions"},{level:3,title:"useContext()",slug:"usecontext"},{level:3,title:"针对 TypeScript 的功能",slug:"针对-typescript-的功能"},{level:3,title:"限制",slug:"限制"},{level:2,title:"组合式 API 与 Vue3 中的区别",slug:"组合式-api-与-vue3-中的区别"},{level:2,title:"组合式 API 周边生态能力的使用",slug:"组合式-api-周边生态能力的使用"}]},{title:"网络请求",frontmatter:{},regularPath:"/guide/extend/fetch.html",relativePath:"guide/extend/fetch.md",key:"v-2fa3b31c",path:"/guide/extend/fetch.html",headers:[{level:2,title:"使用说明",slug:"使用说明"},{level:2,title:"导出说明",slug:"导出说明"},{level:2,title:"请求拦截器",slug:"请求拦截器"},{level:2,title:"请求中断",slug:"请求中断"},{level:2,title:"设置请求参数",slug:"设置请求参数"},{level:2,title:"设置请求 timeout",slug:"设置请求-timeout"},{level:2,title:"在组合式 API 中使用",slug:"composition-api-usage"}]},{title:"数据 Mock",frontmatter:{},regularPath:"/guide/extend/mock.html",relativePath:"guide/extend/mock.md",key:"v-670c5b20",path:"/guide/extend/mock.html",headers:[{level:2,title:"安装",slug:"安装"},{level:2,title:"使用说明",slug:"使用说明"},{level:2,title:"Mock 入参",slug:"mock-入参"},{level:2,title:"Mock 规则示例",slug:"mock-规则示例"}]},{title:"扩展mpx",frontmatter:{},regularPath:"/guide/extend/",relativePath:"guide/extend/index.md",key:"v-4147fde5",path:"/guide/extend/",headers:[{level:2,title:"开发插件",slug:"开发插件"},{level:2,title:"目前已有插件",slug:"目前已有插件"}]},{title:"从 2.7 升级至 2.8",frontmatter:{},regularPath:"/guide/migrate/2.8.html",relativePath:"guide/migrate/2.8.md",key:"v-41032180",path:"/guide/migrate/2.8.html",headers:[{level:2,title:"依赖升级",slug:"依赖升级"},{level:2,title:"编译配置变更",slug:"编译配置变更"},{level:2,title:"运行时破坏性变化",slug:"运行时破坏性变化"}]},{title:"从旧版本迁移至 2.7",frontmatter:{},regularPath:"/guide/migrate/2.7.html",relativePath:"guide/migrate/2.7.md",key:"v-05fd3820",path:"/guide/migrate/2.7.html",headers:[{level:2,title:"依赖升级",slug:"依赖升级"},{level:2,title:"开启持久化缓存",slug:"开启持久化缓存"},{level:2,title:"修改rules",slug:"修改rules"},{level:2,title:"entry配置修改",slug:"entry配置修改"},{level:2,title:"MpxWebpackPlugin配置变更",slug:"mpxwebpackplugin配置变更"}]},{frontmatter:{},regularPath:"/guide/platform/miniprogram.html",relativePath:"guide/platform/miniprogram.md",key:"v-69e59278",path:"/guide/platform/miniprogram.html"},{frontmatter:{},regularPath:"/guide/platform/web.html",relativePath:"guide/platform/web.md",key:"v-4269b2b6",path:"/guide/platform/web.html"},{title:"mpx-cli v2 迁移到 v3",frontmatter:{},regularPath:"/guide/migrate/mpx-cli-3.html",relativePath:"guide/migrate/mpx-cli-3.md",key:"v-63e1d400",path:"/guide/migrate/mpx-cli-3.html",headers:[{level:2,title:"升级@mpxjs/cli",slug:"升级-mpxjs-cli"},{level:2,title:"配置迁移",slug:"配置迁移"},{level:2,title:"新增自定义配置/修改已有配置参数",slug:"新增自定义配置-修改已有配置参数"},{level:2,title:"编译后钩子",slug:"编译后钩子"},{level:2,title:"项目结构变化",slug:"项目结构变化"},{level:2,title:"More",slug:"more"},{level:3,title:"1. 插件化",slug:"_1-插件化"},{level:3,title:"2. 模板",slug:"_2-模板"},{level:3,title:"3. 调试",slug:"_3-调试"},{level:3,title:"4. 插件管理",slug:"_4-插件管理"}]},{title:"从 2.8 升级至 2.9",frontmatter:{},regularPath:"/guide/migrate/2.9.html",relativePath:"guide/migrate/2.9.md",key:"v-7c090ae0",path:"/guide/migrate/2.9.html",headers:[{level:2,title:"依赖升级",slug:"依赖升级"},{level:2,title:"使用原子类",slug:"使用原子类"},{level:2,title:"使用SSR",slug:"使用ssr"}]},{title:"跨端输出基础",frontmatter:{},regularPath:"/guide/platform/",relativePath:"guide/platform/index.md",key:"v-fbaff41a",path:"/guide/platform/",headers:[{level:2,title:"跨端输出配置",slug:"跨端输出配置"},{level:2,title:"跨端条件编译",slug:"跨端条件编译"},{level:3,title:"文件维度条件编译",slug:"文件维度条件编译"},{level:3,title:"区块维度条件编译",slug:"区块维度条件编译"},{level:3,title:"代码维度条件编译",slug:"代码维度条件编译"},{level:3,title:"属性维度条件编译",slug:"属性维度条件编译"},{level:3,title:"通过 env 实现自定义目标环境的条件编译",slug:"use-env"},{level:2,title:"环境API跨端抹平",slug:"环境api跨端抹平"},{level:2,title:"Webview环境跨端抹平",slug:"webview环境跨端抹平"}]},{title:"E2E自动化测试",frontmatter:{},regularPath:"/guide/tool/e2e-test.html",relativePath:"guide/tool/e2e-test.md",key:"v-2e48a400",path:"/guide/tool/e2e-test.html",headers:[{level:2,title:"@mpx/cli 脚手架集成E2E",slug:"mpx-cli-脚手架集成e2e"},{level:3,title:"文件说明",slug:"文件说明"},{level:2,title:"@mpxjs/e2e-scripts",slug:"mpxjs-e2e-scripts"},{level:2,title:"E2E可视化报告平台",slug:"e2e可视化报告平台"},{level:2,title:"E2E录制+自动化生成case",slug:"e2e录制-自动化生成case"},{level:2,title:"增强API",slug:"增强api"},{level:2,title:"SOP",slug:"sop"}]},{title:"跨端输出RN",frontmatter:{},regularPath:"/guide/platform/rn.html",relativePath:"guide/platform/rn.md",key:"v-f2e08d00",path:"/guide/platform/rn.html",headers:[{level:2,title:"跨端样式定义",slug:"跨端样式定义"},{level:3,title:"CSS选择器",slug:"css选择器"},{level:3,title:"样式单位",slug:"样式单位"},{level:3,title:"文本样式继承",slug:"文本样式继承"},{level:3,title:"简写样式属性",slug:"简写样式属性"},{level:3,title:"CSS函数",slug:"css函数"},{level:3,title:"使用原子类",slug:"使用原子类"},{level:2,title:"混合编写RN代码",slug:"混合编写rn代码"},{level:3,title:"使用RN组件",slug:"使用rn组件"},{level:3,title:"使用React hooks",slug:"使用react-hooks"},{level:2,title:"能力支持范围",slug:"能力支持范围"},{level:3,title:"模版语法",slug:"模版语法"},{level:3,title:"基础组件",slug:"基础组件"}]},{title:"单元测试",frontmatter:{},regularPath:"/guide/tool/unit-test.html",relativePath:"guide/tool/unit-test.md",key:"v-29f7525e",path:"/guide/tool/unit-test.html",headers:[{level:2,title:"安装依赖",slug:"安装依赖"},{level:2,title:"jest 相关配置",slug:"jest-相关配置"},{level:2,title:"简单的断言",slug:"简单的断言"},{level:2,title:"编写可被测试的组件",slug:"编写可被测试的组件"},{level:2,title:"断言异步更新",slug:"断言异步更新"}]},{title:"Mpx运行时增强原理",frontmatter:{},regularPath:"/guide/understand/runtime.html",relativePath:"guide/understand/runtime.md",key:"v-5bf8d898",path:"/guide/understand/runtime.html"},{title:"使用TypeScript开发小程序",frontmatter:{},regularPath:"/guide/tool/ts.html",relativePath:"guide/tool/ts.md",key:"v-15dbdb80",path:"/guide/tool/ts.html",headers:[{level:2,title:"什么是TypeScript",slug:"什么是typescript"},{level:2,title:"TypeScript优势",slug:"typescript优势"},{level:2,title:"使用方式",slug:"使用方式"},{level:3,title:"编写ts前的准备工作",slug:"编写ts前的准备工作"},{level:3,title:".mpx中编写ts（推荐）",slug:"mpx中编写ts（推荐）"},{level:3,title:"为.ts文件添加loader",slug:"为-ts文件添加loader"},{level:3,title:"编写tsconfig.json文件",slug:"编写tsconfig-json文件"},{level:3,title:"增强类型",slug:"增强类型"},{level:2,title:"类型推导及注意事项",slug:"类型推导及注意事项"},{level:3,title:"getMixin",slug:"getmixin"},{level:3,title:"createStoreWithThis",slug:"createstorewiththis"},{level:3,title:"createStateWithThis",slug:"createstatewiththis"},{level:3,title:"createGettersWithThis",slug:"creategetterswiththis"},{level:3,title:"createMutationsWithThis",slug:"createmutationswiththis"},{level:3,title:"createActionsWithThis",slug:"createactionswiththis"}]},{title:"RN 自定义组件支持",frontmatter:{},regularPath:"/rn-component.html",relativePath:"rn-component.md",key:"v-ae319f98",path:"/rn-component.html",headers:[{level:2,title:"参数",slug:"参数"},{level:3,title:"组件定义属性说明",slug:"组件定义属性说明"},{level:3,title:"组件实例属性与方法",slug:"组件实例属性与方法"}]},{title:"Mpx编译构建原理",frontmatter:{},regularPath:"/guide/understand/compile.html",relativePath:"guide/understand/compile.md",key:"v-0960fc22",path:"/guide/understand/compile.html",headers:[{level:2,title:"分包处理",slug:"分包处理"}]},{title:"原生渐进迁移",frontmatter:{},regularPath:"/guide/advance/progressive.html",relativePath:"guide/advance/progressive.md",key:"v-c5494280",path:"/guide/advance/progressive.html",headers:[{level:2,title:"原生接入",slug:"原生接入"},{level:3,title:"原理",slug:"原理"},{level:3,title:"例子",slug:"例子"},{level:2,title:"原生page支持",slug:"原生page支持"},{level:2,title:"原生导出",slug:"原生导出"},{level:3,title:"导出部分页面/组件",slug:"导出部分页面-组件"},{level:3,title:"完整导出",slug:"完整导出"}]},{title:"介绍",frontmatter:{},regularPath:"/guide/basic/intro.html",relativePath:"guide/basic/intro.md",key:"v-48addfa0",path:"/guide/basic/intro.html",headers:[{level:2,title:"Mpx是什么？",slug:"mpx是什么？"},{level:2,title:"Mpx提供了哪些能力？",slug:"mpx提供了哪些能力？"},{level:3,title:"单文件开发(SFC)",slug:"单文件开发-sfc"},{level:3,title:"数据响应",slug:"数据响应"},{level:3,title:"增强的模板语法",slug:"增强的模板语法"},{level:3,title:"极致性能",slug:"极致性能"},{level:3,title:"状态管理",slug:"状态管理"},{level:3,title:"编译构建",slug:"编译构建"},{level:3,title:"跨平台能力",slug:"跨平台能力"},{level:3,title:"完善的周边能力",slug:"完善的周边能力"},{level:2,title:"对比其他小程序框架",slug:"对比其他小程序框架"}]},{title:"API支持列表",frontmatter:{},regularPath:"/rn-api.html",relativePath:"rn-api.md",key:"v-f625b20c",path:"/rn-api.html",headers:[{level:3,title:"getSystemInfo/getSystemInfoSync",slug:"getsysteminfo-getsysteminfosync"},{level:3,title:"getDeviceInfo",slug:"getdeviceinfo"},{level:3,title:"getWindowInfo",slug:"getwindowinfo"},{level:3,title:"request",slug:"request"},{level:3,title:"setStorage/getStorage",slug:"setstorage-getstorage"},{level:3,title:"getStorageInfo",slug:"getstorageinfo"},{level:3,title:"connectSocket",slug:"connectsocket"},{level:3,title:"getNetworkType",slug:"getnetworktype"}]},{title:"Mpx转RN样式使用指南",frontmatter:{},regularPath:"/rn-style.html",relativePath:"rn-style.md",key:"v-4f2760cc",path:"/rn-style.html",headers:[{level:2,title:"样式编写限制",slug:"样式编写限制"},{level:3,title:"选择器",slug:"选择器"},{level:3,title:"布局",slug:"布局"},{level:3,title:"样式单位",slug:"样式单位"},{level:2,title:"组件样式规则",slug:"组件样式规则"},{level:3,title:"text",slug:"text"},{level:3,title:"view",slug:"view"},{level:2,title:"样式参考",slug:"样式参考"},{level:3,title:"Layout Style",slug:"layout-style"},{level:3,title:"View Style",slug:"view-style"},{level:3,title:"Text Style",slug:"text-style"},{level:3,title:"Background Style",slug:"background-style"},{level:3,title:"Shadow Style",slug:"shadow-style"},{level:2,title:"附录",slug:"附录"},{level:3,title:"RN 不支持的属性",slug:"rn-不支持的属性"},{level:3,title:"RN 支持的枚举值",slug:"rn-支持的枚举值"},{level:3,title:"缩写支持",slug:"缩写支持"}]},{title:"Mpx转RN模版使用指南",frontmatter:{},regularPath:"/rn-template.html",relativePath:"rn-template.md",key:"v-16c21d00",path:"/rn-template.html",headers:[{level:2,title:"模版指令",slug:"模版指令"},{level:2,title:"事件编写",slug:"事件编写"},{level:2,title:"基础组件",slug:"基础组件"},{level:3,title:"view",slug:"view"},{level:3,title:"text",slug:"text"},{level:3,title:"image",slug:"image"},{level:3,title:"input",slug:"input"},{level:3,title:"textarea",slug:"textarea"},{level:3,title:"button",slug:"button"},{level:3,title:"scroll-view",slug:"scroll-view"},{level:3,title:"swiper",slug:"swiper"},{level:3,title:"swiper-item",slug:"swiper-item"},{level:3,title:"checkbox",slug:"checkbox"},{level:3,title:"checkbox-group",slug:"checkbox-group"},{level:3,title:"radio",slug:"radio"},{level:3,title:"radio-group",slug:"radio-group"},{level:3,title:"label",slug:"label"},{level:3,title:"icon",slug:"icon"},{level:3,title:"movable-area",slug:"movable-area"},{level:3,title:"movable-view",slug:"movable-view"},{level:3,title:"form",slug:"form"},{level:3,title:"cover-view",slug:"cover-view"},{level:3,title:"cover-image",slug:"cover-image"},{level:3,title:"picker-view",slug:"picker-view"},{level:3,title:"picker-view-column",slug:"picker-view-column"},{level:3,title:"picker",slug:"picker"},{level:3,title:"省市区选择器：mode = region",slug:"省市区选择器：mode-region"}]}],themeConfig:{algolia:{apiKey:"7849f511f78afc4383a81f0137a91c0f",indexName:"mpxjs"},sidebarDepth:1,logo:"/logo.png",displayAllHeaders:!1,sidebar:{"/guide/":[{title:"基础",collapsable:!1,children:["basic/start","basic/intro","basic/single-file","basic/ide","basic/template","basic/css","basic/reactive","basic/class-style-binding","basic/conditional-render","basic/list-render","basic/event","basic/two-way-binding","basic/component","basic/refs","basic/option-chain"]},{title:"进阶",collapsable:!1,children:["advance/store","advance/pinia","advance/mixin","advance/npm","advance/subpackage","advance/async-subpackage","advance/platform","advance/i18n","advance/size-report","advance/image-process","advance/progressive","advance/ability-compatible","advance/plugin","advance/custom-output-path","advance/utility-first-css","advance/ssr","advance/provide-inject"]},{title:"组合式 API",collapsable:!1,children:["composition-api/composition-api","composition-api/reactive-api"]},{title:"工具",collapsable:!1,children:["tool/ts","tool/unit-test","tool/e2e-test"]},{title:"拓展",collapsable:!1,path:"/guide/extend",children:["extend/fetch","extend/api-proxy","extend/mock"]},{title:"理解",collapsable:!1,children:["understand/runtime","understand/compile"]},{title:"迁移",collapsable:!1,children:["migrate/2.9","migrate/2.8","migrate/2.7","migrate/mpx-cli-3"]}],"/api/":["app-config","global-api","instance-api","store-api","directives","compile","builtIn","reactivity-api","composition-api","optional-api","extend"],"/articles/":[{title:"滴滴开源小程序框架Mpx",path:"1.0"},{title:"Mpx发布2.0，完美支持跨平台开发",path:"2.0"},{title:"小程序框架运行时性能大测评",path:"performance"},{title:"Mpx框架初体验",path:"mpx1"},{title:"Mpx框架技术揭秘",path:"mpx2"},{title:"基于Mpx的小程序体积优化",path:"size-control"},{title:"Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导",path:"ts-derivation"},{title:"Mpx2.7 版本正式发布，大幅提升编译构建速度",path:"2.7-release"},{title:"Mpx2.8 版本正式发布，使用组合式 API 开发小程序",path:"2.8-release"},{title:"Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化",path:"2.9-release"},{title:"小程序跨端组件库 Mpx-cube-ui 开源啦",path:"mpx-cube-ui"},{title:"Mpx-cli 插件化改造",path:"mpx-cli-next"},{title:"Mpx 小程序单元测试能力建设与实践",path:"unit-test"}]},nav:[{text:"指南",link:"/guide/basic/start"},{text:"API",link:"/api/index"},{text:"文章",link:"/articles/index"},{text:"更新记录",link:"https://github.com/didi/mpx/releases",target:"_blank"},{text:"Github",link:"https://github.com/didi/mpx",target:"_blank"}]},locales:{"/":{lang:"zh-CN",title:"Mpx框架",description:"Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。",path:"/"}}};n(283),n(284);r.a.component("Content",()=>Promise.all([n.e(0),n.e(2)]).then(n.bind(null,370))),r.a.component("Header",()=>n.e(11).then(n.bind(null,371))),r.a.component("Footer",()=>Promise.all([n.e(0),n.e(6)]).then(n.bind(null,355))),r.a.component("Badge",()=>Promise.all([n.e(0),n.e(8)]).then(n.bind(null,382))),r.a.component("CodeBlock",()=>Promise.all([n.e(0),n.e(9)]).then(n.bind(null,374))),r.a.component("CodeGroup",()=>Promise.all([n.e(0),n.e(10)]).then(n.bind(null,375)));n(285);var dt={name:"BackToTop",props:{threshold:{type:Number,default:300}},data:()=>({scrollTop:null}),computed:{show(){return this.scrollTop>this.threshold}},mounted(){this.scrollTop=this.getScrollTop(),window.addEventListener("scroll",st()(()=>{this.scrollTop=this.getScrollTop()},100))},methods:{getScrollTop:()=>window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,scrollToTop(){window.scrollTo({top:0,behavior:"smooth"}),this.scrollTop=0}}},ht=(n(286),n(4)),vt=Object(ht.a)(dt,(function(){var e=this._self._c;return e("transition",{attrs:{name:"fade"}},[this.show?e("svg",{staticClass:"go-to-top",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 49.484 28.284"},on:{click:this.scrollToTop}},[e("g",{attrs:{transform:"translate(-229 -126.358)"}},[e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(229 151.107) rotate(-45)"}}),this._v(" "),e("rect",{attrs:{fill:"currentColor",width:"35",height:"5",rx:"2",transform:"translate(274.949 154.642) rotate(-135)"}})])]):this._e()])}),[],!1,null,"5cf0f4c0",null).exports;class mt{constructor(e){Object.defineProperty(this,"registration",{value:e,configurable:!0,writable:!0})}update(){return this.registration.update()}skipWaiting(){const e=this.registration.waiting;return e?(console.log("[vuepress:sw] Doing worker.skipWaiting()."),new Promise((t,n)=>{const r=new MessageChannel;r.port1.onmessage=e=>{console.log("[vuepress:sw] Done worker.skipWaiting()."),e.data.error?n(e.data.error):t(e.data)},e.postMessage({type:"skip-waiting"},[r.port2])})):Promise.resolve()}}var gt=n(25);r.a.component("SWUpdatePopup",()=>Promise.all([n.e(0),n.e(30)]).then(n.bind(null,373)));var bt=[({router:e})=>{"undefined"!=typeof process&&"server"===process.env.VUE_ENV||e.onReady(()=>{const{app:t}=e;t.$once("hook:mounted",()=>{setTimeout(()=>{const{hash:e}=document.location;if(e.length>1){const t=decodeURIComponent(e.substring(1)),n=document.getElementById(t);n&&n.scrollIntoView()}},500)})})},{},{},({Vue:e})=>{e.mixin({computed:{$dataBlock(){return this.$options.__data__block__}}})},{},{},({Vue:e})=>{e.component("BackToTop",vt)},async({router:e,isServer:t})=>{if(!t){const{register:t}=await n.e(120).then(n.bind(null,372));e.onReady(()=>{t("/service-worker.js",{registrationOptions:{},ready(){console.log("[vuepress:sw] Service worker is active."),gt.a.$emit("sw-ready")},cached(e){console.log("[vuepress:sw] Content has been cached for offline use."),gt.a.$emit("sw-cached",new mt(e))},updated(e){console.log("[vuepress:sw] Content updated."),gt.a.$emit("sw-updated",new mt(e))},offline(){console.log("[vuepress:sw] No internet connection found. App is running in offline mode."),gt.a.$emit("sw-offline")},error(e){console.error("[vuepress:sw] Error during service worker registration:",e),gt.a.$emit("sw-error",e),GA_ID&&ga("send","exception",{exDescription:e.message,exFatal:!1})}})})}}],yt=["BackToTop","SWUpdatePopup"];class _t extends class{constructor(){this.store=new r.a({data:{state:{}}})}$get(e){return this.store.state[e]}$set(e,t){r.a.set(this.store.state,e,t)}$emit(...e){this.store.$emit(...e)}$on(...e){this.store.$on(...e)}}{}Object.assign(_t.prototype,{getPageAsyncComponent:Ge.d,getLayoutAsyncComponent:Ge.c,getAsyncComponent:Ge.b,getVueComponent:Ge.e});var wt={install(e){const t=new _t;e.$vuepress=t,e.prototype.$vuepress=t}};function xt(e,t){const n=t.toLowerCase();return e.options.routes.some(e=>e.path.toLowerCase()===n)}var St={props:{pageKey:String,slotKey:{type:String,default:"default"}},render(e){const t=this.pageKey||this.$parent.$page.key;return Object(Ge.h)("pageKey",t),r.a.component(t)||r.a.component(t,Object(Ge.d)(t)),r.a.component(t)?e(t):e("")}},Ot={functional:!0,props:{slotKey:String,required:!0},render:(e,{props:t,slots:n})=>e("div",{class:["content__"+t.slotKey]},n()[t.slotKey])},jt={computed:{openInNewWindowTitle(){return this.$themeLocaleConfig.openNewWindowText||"(opens new window)"}}},kt=(n(287),n(288),Object(ht.a)(jt,(function(){var e=this._self._c;return e("span",[e("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[e("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),this._v(" "),e("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})]),this._v(" "),e("span",{staticClass:"sr-only"},[this._v(this._s(this.openInNewWindowTitle))])])}),[],!1,null,null,null).exports),Pt={functional:!0,render(e,{parent:t,children:n}){if(t._isMounted)return n;t.$once("hook:mounted",()=>{t.$forceUpdate()})}};r.a.config.productionTip=!1,r.a.use(We),r.a.use(wt),r.a.mixin(function(e,t,n=r.a){!function(e){e.locales&&Object.keys(e.locales).forEach(t=>{e.locales[t].path=t});Object.freeze(e)}(t),n.$vuepress.$set("siteData",t);const i=new(e(n.$vuepress.$get("siteData"))),o=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(i)),a={};return Object.keys(o).reduce((e,t)=>(t.startsWith("$")&&(e[t]=o[t].get),e),a),{computed:a}}(e=>class{setPage(e){this.__page=e}get $site(){return e}get $themeConfig(){return this.$site.themeConfig}get $frontmatter(){return this.$page.frontmatter}get $localeConfig(){const{locales:e={}}=this.$site;let t,n;for(const r in e)"/"===r?n=e[r]:0===this.$page.path.indexOf(r)&&(t=e[r]);return t||n||{}}get $siteTitle(){return this.$localeConfig.title||this.$site.title||""}get $canonicalUrl(){const{canonicalUrl:e}=this.$page.frontmatter;return"string"==typeof e&&e}get $title(){const e=this.$page,{metaTitle:t}=this.$page.frontmatter;if("string"==typeof t)return t;const n=this.$siteTitle,r=e.frontmatter.home?null:e.frontmatter.title||e.title;return n?r?r+" | "+n:n:r||"VuePress"}get $description(){const e=function(e){if(e){const t=e.filter(e=>"description"===e.name)[0];if(t)return t.content}}(this.$page.frontmatter.meta);return e||(this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||"")}get $lang(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}get $localePath(){return this.$localeConfig.path||"/"}get $themeLocaleConfig(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}get $page(){return this.__page?this.__page:function(e,t){for(let n=0;n<e.length;n++){const r=e[n];if(r.path.toLowerCase()===t.toLowerCase())return r}return{path:"",frontmatter:{}}}(this.$site.pages,this.$route.path)}},pt)),r.a.component("Content",St),r.a.component("ContentSlotsDistributor",Ot),r.a.component("OutboundLink",kt),r.a.component("ClientOnly",Pt),r.a.component("Layout",Object(Ge.c)("Layout")),r.a.component("NotFound",Object(Ge.c)("NotFound")),r.a.prototype.$withBase=function(e){const t=this.$site.base;return"/"===e.charAt(0)?t+e.slice(1):e},window.__VUEPRESS__={version:"1.9.10",hash:"3f6a4a558"},async function(e){const t="undefined"!=typeof window&&window.__VUEPRESS_ROUTER_BASE__?window.__VUEPRESS_ROUTER_BASE__:pt.routerBase||pt.base,n=new We({base:t,mode:"history",fallback:!1,routes:ft,scrollBehavior:(e,t,n)=>n||(e.hash?!r.a.$vuepress.$get("disableScrollBehavior")&&{selector:decodeURIComponent(e.hash)}:{x:0,y:0})});!function(e){e.beforeEach((t,n,r)=>{if(xt(e,t.path))r();else if(/(\/|\.html)$/.test(t.path))if(/\/$/.test(t.path)){const n=t.path.replace(/\/$/,"")+".html";xt(e,n)?r(n):r()}else r();else{const n=t.path+"/",i=t.path+".html";xt(e,i)?r(i):xt(e,n)?r(n):r()}})}(n);const i={};try{await Promise.all(bt.filter(e=>"function"==typeof e).map(t=>t({Vue:r.a,options:i,router:n,siteData:pt,isServer:e})))}catch(e){console.error(e)}return{app:new r.a(Object.assign(i,{router:n,render:e=>e("div",{attrs:{id:"app"}},[e("RouterView",{ref:"layout"}),e("div",{class:"global-ui"},yt.map(t=>e(t)))])})),router:n}}(!1).then(({app:e,router:t})=>{t.onReady(()=>{e.$mount("#app")})})}]);
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/baidu_verify_codeva-GYcT5ujCTB.html b/docs-vuepress/.vuepress/dist/baidu_verify_codeva-GYcT5ujCTB.html
deleted file mode 100644
index d4526e039c..0000000000
--- a/docs-vuepress/.vuepress/dist/baidu_verify_codeva-GYcT5ujCTB.html
+++ /dev/null
@@ -1 +0,0 @@
-e197dca3487ecef730bbb3a05e79d985
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/desc.html b/docs-vuepress/.vuepress/dist/desc.html
deleted file mode 100644
index f6794a2c47..0000000000
--- a/docs-vuepress/.vuepress/dist/desc.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>文档指南 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/63.b54aca3e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container no-sidebar"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="文档指南"><a href="#文档指南" class="header-anchor">#</a> 文档指南</h1> <p>该文档使用vuepress生成</p> <h2 id="该项目指南"><a href="#该项目指南" class="header-anchor">#</a> 该项目指南</h2> <p>已安装依赖vuepress，并已经在package.json中新增写作和部署脚本</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token comment"># 写作时</span>
-<span class="token function">npm</span> run docs:dev
-
-<span class="token comment"># 部署时</span>
-<span class="token function">npm</span> run docs:build
-<span class="token comment"># 将在docs-vuepress/.vuepress/dist下生成静态文件，部署到相应服务器即可，部署参考下方链接</span>
-</code></pre></div><h2 id="编写格式指南"><a href="#编写格式指南" class="header-anchor">#</a> 编写格式指南</h2> <ul><li>对于引用的文档或资料使用<a href="">链接</a>指明出处</li> <li>中英文混排时为了阅读体验使用空格对于英文单词进行包裹，在标点符号边缘或句首时可省略该侧空格，例如：这是一个 word 而不是 world。</li> <li>句首的英文单词首字母大写</li> <li>Mpx 正确的写法为 <code>Mpx</code>，首字母大写，任何地方都应该这样书写，其余的专业名称参考原始的写法进行书写</li> <li>除英文段落外，所有标点符号使用中文半角</li> <li>能使用示例代码描述的部分都<strong>尽量添加示例代码</strong>进行说明，show me the code</li> <li>对于文档内容拓展说明的部分使用&gt;引用的方式进行编写，like this</li></ul> <blockquote><p>我们来聊聊人生吧，这个地方你可以不看但没必要</p></blockquote> <h2 id="参考"><a href="#参考" class="header-anchor">#</a> 参考</h2> <ul><li><a href="https://www.vuepress.cn/guide/deploy.html" target="_blank" rel="noopener noreferrer">部署指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.vuepress.cn/" target="_blank" rel="noopener noreferrer">Vuepress文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/63.b54aca3e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/favicon.ico b/docs-vuepress/.vuepress/dist/favicon.ico
deleted file mode 100644
index 891c2ce0106d2e229eaa160a87a6f4a63e4bd519..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9662
zcmZQzU<5(~0|p?ez_3D<fkBLcfk6X^fkF%kKnxNG0~H80N{)uWXb6mkz+ef1ITPBM
zvLe0mVmvLYD8YS=WmbgzH0zWJOXoqMvc|m(Rg~ZvC-oJO?P{yYiHY~I{SS0M**G=W
z<?)2(3JGL$(b<!ZDNhHw`#&Xk!cqC1hwis9A)EdB#WRMg?6`hP+z-;58{>DhwLF^z
z*=!hl)+wWuroBvmDRFz}L4n(cAGBi)qjM*YaOB1M?WEKXrKu59VQz-eOU}DnwCv~j
zPKn!F_j7(;c`4WgW+paz`P``zz;tk%5<kRxTmNk+Oih8AzxGO$MAt!~r<Az8c^}LF
zIj7B|U}oZ@JF5#!68#;%QsRfC0Eh2=4W$-qu7tBpJgRV%61Ri&PC2g8`~34ce9lIZ
z1LlR8IBy%W^D@ZqSrJ}Or|magN~zm>4vX(R^JE4GiUSF7ZeF>-P?Z%slae?9>CGrm
z{ok;g{PL#zkl6DL*AlSiR{~yO*tBX9TYg-?QOf*a@jt&^imdXo{Q%GJ#pm732)PrV
ze1B89SZ27#ON#v9ZT`P(E<Z_rXxhvCf9`2Zco~4tjfCV{O0&$80vvx+;)nPklm9hq
z*@^bU)Z-e{3Au|D`I_8>v{)}Iit=-Eg6{wN9ZUrM(0f?&=+0Y(Y^1o47_~)7Ar$B5
z%wpyL4SR6s=gxzI&*z=70d*m%4rcYWuoWZ(ou?!n#duo$FYK1U>W9|-96y&|^mm}T
z!;uV}(bFWC9_sd*B0m80bNK>3v~<J>%CC7yR?&>vRa5Ac;Ai)f5<kR;82_)?zy|jN
zuzp=gGY4Za7?__6VkpedDM>p2>vuB#?>i!We(41ds^?cM&PEX`P7d8oNgROmmNaYs
z-F!Vw3B_PKaHh1^>LmKxzo*3gv3_R%t5$IRpMFBOkq%CVTd{rp3X!xB*Q=Dc9aIjL
zOce&F|K@$Hf9IdI3xHcdL&l3IkJt+012<CUcFX@cb#f?WD6ntxcH^~VJsLV4Y;;{-
zQZuD)PtDN$->{1jUiQG+*T6o`<+D%ch|tOpjm2qRz&<`j?VyBk!~eCLSuorV^TWiW
zifd`%eqer81NO-%s<&c&&Hh&|<;LlDm>;H}&?%#)A674%$&(r3d6BYoWAVRuq9{t5
zhq)J>2KIG-E<ESxK`lQ3%lXxmx!v-Ac9jBAZio4$Z9n(x4ObH=9`UcuOR9+Rq^#YX
zlB)f`0a(w%+(s-7Y)4<-cej>{+<54zFZPP}r7*vS8vU=`$V#%?VSb!?Tyy1yYw;v|
zp}90e1~?8xQGNxs@&4B?l)ejd3wbo-|7j<*b4c+(XLUYDc9hRqO4EF8USjjgOF>#4
z2lzje=XOXxr)3}e&v|F8?TGQiig{BRfcbSHrEV`w2;O+%^fB-_D6nl1)UuC_!f{W*
z*Ne`%ND=Y_FwF8O?dN8Mdt6^KYoZXcUDHqKwNerXAicnL_Stn;VsMUQ0n?2Gu#Tdr
zeoYB-{tO&{22FpWfGaOnu=F31-At(;fcbg;kp~?pW`j8WO%+nWI_fPY=?2)g_zR3b
zobAYs*OG*Q{qviY_yIWn{vVhZQ1UZq{-roM4AiE4ObM>ej_bq-7&L*|r%W|k_jBC`
z`r$FTxa|P<{aL4s>E7o-^U5f9Gz3ONU^E1VbO`(h0|o|C=?4t_9~hV!7#=XNe_&u|
zU;uJ}LJSN)7?=+*$TKkfVPI?k(f>f9V-Kb4f%bs-K;nM`a9t9JJ^-a3FfcHK_&}N+
zM1Npl;0Mt^7#QS1^dBe<G|(Qz2h#OW8q5dEgK3z0n0_D)HV<Yl&_1v|4N!Z5G}t{r
uilH9iPM~oOAb0;@U_1cw2iRXg{{cM<^fJibK>q{j0}T8?DWDN#h9dx^v_XFW

diff --git a/docs-vuepress/.vuepress/dist/guide/advance/ability-compatible.html b/docs-vuepress/.vuepress/dist/guide/advance/ability-compatible.html
deleted file mode 100644
index 8e7c1007d4..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/ability-compatible.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>原生能力兼容 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/64.399e72b8.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" aria-current="page" class="active sidebar-link">原生能力兼容</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/ability-compatible.html#custom-tab-bar" class="sidebar-link">custom-tab-bar</a></li><li class="sidebar-sub-header"><a href="/guide/advance/ability-compatible.html#workers" class="sidebar-link">workers</a></li><li class="sidebar-sub-header"><a href="/guide/advance/ability-compatible.html#云开发" class="sidebar-link">云开发</a></li><li class="sidebar-sub-header"><a href="/guide/advance/ability-compatible.html#useextendedlib" class="sidebar-link">useExtendedLib</a></li></ul></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="原生能力兼容"><a href="#原生能力兼容" class="header-anchor">#</a> 原生能力兼容</h1> <h2 id="custom-tab-bar"><a href="#custom-tab-bar" class="header-anchor">#</a> custom-tab-bar</h2> <p>Mpx 支持微信小程序原生自定义 tabbar ，关于自定义 tabbar 的详情请查看<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>在 Mpx 中使用自定义 tabbar ，需要在 app.mpx 的 json 部分的 tabBar 配置里的 <code>custom</code> 为 true 。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
-<span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;application/json&quot;</span><span class="token operator">&gt;</span>
-<span class="token punctuation">{</span>
-  <span class="token string-property property">&quot;tabBar&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;custom&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;color&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#000000&quot;</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;selectedColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#000000&quot;</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;backgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#000000&quot;</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./page/component/index&quot;</span><span class="token punctuation">,</span>
-      <span class="token string-property property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;组件&quot;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./page/API/index&quot;</span><span class="token punctuation">,</span>
-      <span class="token string-property property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;接口&quot;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">]</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>在 src 目录下创建 custom-tab-bar 目录，包含 index.mpx 文件，可以在该 index.mpx 文件中编写自定义 tabbar 的模板、js、样式和 json 部分，同时也支持原生写法。</p> <h2 id="workers"><a href="#workers" class="header-anchor">#</a> workers</h2> <p>Mpx 完全支持小程序原生的 worker ，需要在 app.mpx 文件中的 json 部分声明 worker 的目录，Mpx 会将其对应目录进行打包，输出到目标代码目录中。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;application/json&quot;</span><span class="token operator">&gt;</span>
-<span class="token punctuation">{</span>
-  <span class="token comment">// 指定 worker 的目录</span>
-  <span class="token string-property property">&quot;workers&quot;</span><span class="token operator">:</span> <span class="token string">&quot;workers&quot;</span>
-<span class="token punctuation">}</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>更多详情可查看<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="云开发"><a href="#云开发" class="header-anchor">#</a> 云开发</h2> <p>Mpx 支持微信小程序提供的原生云开发能力。如果需要在项目中使用云开发的能力，可以通过 Mpx 脚手架工具在初始化项目时选择支持云开发。如果需要支持云开发能力，在项目初始化时需要选择是微信平台下，且不能支持跨平台开发。如下图所示：</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/cloud_v2.png" alt="云开发"></p> <p>更多关于云开发相关可查看<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="useextendedlib"><a href="#useextendedlib" class="header-anchor">#</a> useExtendedLib</h2> <p>Mpx 对于引入扩展库做了相关处理，可以在 app.mpx 中配置使用的扩展库，目前支持 weui 。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;useExtendedLib&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;weui&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>还需要在 Mpx 的配置文件配置 <code>externals</code> 属性，来指定外部依赖，这样 Mpx 在进行打包时，会将其当做外部依赖进行打包。</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-  <span class="token literal-property property">externals</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'weui'</span> <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/progressive.html" class="prev">
-        原生渐进迁移
-      </a></span> <span class="next"><a href="/guide/advance/plugin.html">
-        小程序插件
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/64.399e72b8.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/async-subpackage.html b/docs-vuepress/.vuepress/dist/guide/advance/async-subpackage.html
deleted file mode 100644
index 36fb075f5e..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/async-subpackage.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>分包异步化 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/65.a8c627d3.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" aria-current="page" class="active sidebar-link">分包异步化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/async-subpackage.html#跨分包自定义组件引用" class="sidebar-link">跨分包自定义组件引用</a></li><li class="sidebar-sub-header"><a href="/guide/advance/async-subpackage.html#跨分包-js-代码引用" class="sidebar-link">跨分包 JS 代码引用</a></li><li class="sidebar-sub-header"><a href="/guide/advance/async-subpackage.html#跨分包-store-引用" class="sidebar-link">跨分包 Store 引用</a></li></ul></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="分包异步化"><a href="#分包异步化" class="header-anchor">#</a> 分包异步化</h1> <blockquote><p>在小程序中，不同的分包对应不同的下载单元；因此，除了非独立分包可以依赖主包外，分包之间不能互相使用自定义组件或进行 require。
-「分包异步化」特性将允许通过一些配置和新的接口，使部分跨分包的内容可以等待下载后异步使用，从而一定程度上解决这个限制。</p></blockquote> <p>具体功能介绍和功能目的可 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html" target="_blank" rel="noopener noreferrer">点击查看<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, Mpx对于分包异步化功能进行了完整支持。</p> <p>当前 Mpx 框架默认支持以下平台的分包异步化能力：</p> <ul><li>微信小程序</li> <li>支付宝小程序</li> <li>字节小程序</li> <li>Web</li></ul> <p>在非上述平台，异步分包代码会默认降级。</p> <h2 id="跨分包自定义组件引用"><a href="#跨分包自定义组件引用" class="header-anchor">#</a> 跨分包自定义组件引用</h2> <blockquote><p>一个分包使用其他分包的自定义组件时，由于其他分包还未下载或注入，其他分包的组件处于不可用的状态。通过为其他分包的自定义组件设置 占位组件，
-我们可以先渲染占位组件作为替代，在分包下载完成后再进行替换。</p></blockquote> <p>在 Mpx 中使用跨分包自定义组件引用通过?root声明组件所属异步分包即可使用，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--/packageA/pages/index.mpx--&gt;</span>
-// 这里在分包packageA中即可异步使用分包packageB中的hello组件
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;hello&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../../packageB/components/hello?root=packageB&quot;</span><span class="token punctuation">,</span>
-      <span class="token string-property property">&quot;simple-hello&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/hello&quot;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;componentPlaceholder&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;hello&quot;</span><span class="token operator">:</span> <span class="token string">&quot;simple-hello&quot;</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><ul><li>注意项：目前该能力已在微信、支付宝和Web环境下支持，其他环境下框架将进行自动降级。</li></ul> <h2 id="跨分包-js-代码引用"><a href="#跨分包-js-代码引用" class="header-anchor">#</a> 跨分包 JS 代码引用</h2> <blockquote><p>一个分包中的代码引用其它分包的代码时，为了不让下载阻塞代码运行，我们需要异步获取引用的结果</p></blockquote> <p>在 Mpx 中跨分包异步引用 JS 代码时，<strong>需要在引用的 JS 路径后拼接 JS 模块所在的分包名</strong>，此外由于 <strong>require</strong> 不能传入多个参数的限制，在Mpx中无法使用回调函数的
-风格跨分包 JS 代码引用，只能使用 Promise 风格。</p> <p>示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// subPackageA/index.js</span>
-<span class="token comment">// 或者使用 Promise 风格的调用</span>
-require<span class="token punctuation">.</span><span class="token function">async</span><span class="token punctuation">(</span><span class="token string">'../commonPackage/index.js?root=subPackageB'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">pkg</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  pkg<span class="token punctuation">.</span><span class="token function">getPackageName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 'common'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><ul><li>注意项：目前该能力仅微信平台下支持，其他平台下框架将会自动降级</li></ul> <h2 id="跨分包-store-引用"><a href="#跨分包-store-引用" class="header-anchor">#</a> 跨分包 Store 引用</h2> <p>在 Mpx 中如果想要跨分包异步引用 Store 代码，分为三个步骤</p> <ul><li>页面或父组件在 <code>created</code> 钩子加载异步 Store</li> <li>异步 Store 加载完成后再渲染使用异步 Store 的组件</li> <li>子组件在框架内部生命周期 <code>BEFORECREATE</code> 钩子中动态注入 computed 和 methods</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--pages/index/index.mpx--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>store-list</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{showStoreList}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>store-list</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">showStoreList</span><span class="token operator">:</span> <span class="token boolean">false</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      require<span class="token punctuation">.</span><span class="token function">async</span><span class="token punctuation">(</span><span class="token string">'../subpackages/sub2/store?root=sub2'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">store</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>asyncStore<span class="token punctuation">.</span>sub2 <span class="token operator">=</span> store<span class="token punctuation">.</span>default
-        <span class="token comment">// 当异步 Store 加载完成后再渲染使用异步 Store 的组件</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>showStoreList <span class="token operator">=</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token comment">&lt;!-- 子组件:store-list --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> <span class="token constant">BEFORECREATE</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token comment">// 在 BEFORECREATE 钩子中动态注入 options</span>
-    <span class="token punctuation">[</span><span class="token constant">BEFORECREATE</span><span class="token punctuation">]</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 获取异步 Store实例</span>
-      <span class="token keyword">const</span> subStore <span class="token operator">=</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>asyncStore<span class="token punctuation">.</span>sub2
-      <span class="token comment">// computed 中 mapState、mapGetters 替换为 mapStateToInstance、mapGettersToInstance，最后一个参数必须传当前 component 实例 this</span>
-      subStore<span class="token punctuation">.</span><span class="token function">mapStateToInstance</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'pagename'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
-      subStore<span class="token punctuation">.</span><span class="token function">mapGettersToInstance</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'pageDataGetter'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
-      <span class="token comment">// methods 中 mapActions、mapMutations 替换为 mapMutationsToInstance、mapActionsToInstance，最后一个参数必须传当前 component 实例 this</span>
-      subStore<span class="token punctuation">.</span><span class="token function">mapMutationsToInstance</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'updatePageData'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
-      subStore<span class="token punctuation">.</span><span class="token function">mapActionsToInstance</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'updatePageName'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/subpackage.html" class="prev">
-        使用分包
-      </a></span> <span class="next"><a href="/guide/advance/platform.html">
-        跨平台
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/65.a8c627d3.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/custom-output-path.html b/docs-vuepress/.vuepress/dist/guide/advance/custom-output-path.html
deleted file mode 100644
index 58a1f1c010..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/custom-output-path.html
+++ /dev/null
@@ -1,101 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>自定义路径 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/66.7f19cc4b.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" aria-current="page" class="active sidebar-link">自定义路径</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/custom-output-path.html#自定义页面路径" class="sidebar-link">自定义页面路径</a></li><li class="sidebar-sub-header"><a href="/guide/advance/custom-output-path.html#customoutputpath" class="sidebar-link">customOutputPath</a></li></ul></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="自定义路径"><a href="#自定义路径" class="header-anchor">#</a> 自定义路径</h1> <p>Mpx在构建时，如果引用的页面不存在于当前 app.mpx 所在的上下文中，例如存在于 npm 包中，为避免和本地声明的其他 page 路径冲突，Mpx 会对页面路径进行 hash 化处理，
-同时处理组件路径时也会添加 hash 防止路径名冲突，hash 化处理后最终的文件名是 name+hash+ext 的格式</p> <p>与此同时，部分开发者希望能够对最终输出的页面路径和组件路径能够自定义，Mpx 对此也提供了相应的配置和Api来支持用户自定义路径</p> <h2 id="自定义页面路径"><a href="#自定义页面路径" class="header-anchor">#</a> 自定义页面路径</h2> <p>针对 Mpx 对 json 中非当前上下文的页面路径 hash 化的特性，如果为提升可读性需要避免路径 hash 化，可以使用该特性，具体为在
-json 中配置 pages 时，数组中支持放入 Object，对象中传入两个字段，src 字段表示页面地址，path 字段表示自定义页面路径</p> <ul><li><strong>示例</strong>:</li></ul> <p>object风格的页面声明</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token punctuation">{</span>
-  <span class="token comment">// 主包中的声明</span>
-  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token punctuation">{</span>
-      <span class="token property">&quot;src&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@someGroup/someNpmPackage/pages/view/index.mpx&quot;</span><span class="token punctuation">,</span>
-      <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/somNpmPackage/index&quot;</span> <span class="token comment">// 注意保持 path 的唯一性</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token comment">// 分包中的声明</span>
-  <span class="token property">&quot;subPackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token punctuation">{</span>
-      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span><span class="token punctuation">,</span>
-      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-         <span class="token punctuation">{</span>
-           <span class="token property">&quot;src&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@someGroup/someNpmPackage/pages/view/test.mpx&quot;</span><span class="token punctuation">,</span>
-           <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/somNpmPackage/test&quot;</span> <span class="token comment">// 注意保持 path 的唯一性</span>
-         <span class="token punctuation">}</span>
-      <span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>使用声明中配置的页面路径进行跳转</p> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/pages/somNpmPackage/index'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/test/pages/somNpmPackage/test'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="customoutputpath"><a href="#customoutputpath" class="header-anchor">#</a> customOutputPath</h2> <p>Mpx 框架 webpack-plugin 也提供了 customOutputPath 方法可以让用户进行页面和组件路径的自定义，
-可使用该方法对<strong>非原生组件和非当前文件context的页面</strong>输出路径进行自定义</p> <p>需要注意的是，该方法需要具有<strong>稳定性和唯一性</strong>，即同样的输入不管什么时候执行都要有同样的返回以及不同的的输入一定会得到不同的输出。</p> <ul><li><strong>示例</strong>：</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-         <span class="token function-variable function">customOutputPath</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> name<span class="token punctuation">,</span> hash<span class="token punctuation">,</span> ext<span class="token punctuation">,</span> resourcePath</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-          <span class="token comment">// type: 资源类型(page | component | static)</span>
-          <span class="token comment">// name: 资源原有文件名</span>
-          <span class="token comment">// hash: 8位长度的hash串</span>
-          <span class="token comment">// ext: 文件后缀(.js｜ .wxml | .json 等)</span>
-          <span class="token comment">// resourcePath: 资源路径</span>
-
-          <span class="token comment">// 输出示例： pages/testax34dde3/index.js</span>
-          <span class="token keyword">return</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>type <span class="token operator">+</span> <span class="token string">'s'</span><span class="token punctuation">,</span> name <span class="token operator">+</span> hash<span class="token punctuation">,</span> <span class="token string">'index'</span> <span class="token operator">+</span> ext<span class="token punctuation">)</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>基于上方示例，你可以根据需要进行路径定制化，例如缩短hash、使用012代替文件名等各种自定义路径</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/plugin.html" class="prev">
-        小程序插件
-      </a></span> <span class="next"><a href="/guide/advance/utility-first-css.html">
-        使用原子类
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/66.7f19cc4b.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/dll-plugin.html b/docs-vuepress/.vuepress/dist/guide/advance/dll-plugin.html
deleted file mode 100644
index ff5a026123..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/dll-plugin.html
+++ /dev/null
@@ -1,126 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>使用 DllPlugin | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/67.e57db97e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用-dllplugin"><a href="#使用-dllplugin" class="header-anchor">#</a> 使用 DllPlugin</h1> <h3 id="相关插件简述"><a href="#相关插件简述" class="header-anchor">#</a> 相关插件简述</h3> <h4 id="dllplugin"><a href="#dllplugin" class="header-anchor">#</a> DllPlugin</h4> <blockquote><p>DllPlugin 和 DllReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度，这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。并且会生成一个名为 manifest.json的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。</p></blockquote> <p>DllPlugin 用来将我们某些长时间不变更的资源，独立拆分出去，之后项目的每次构建这部分资源都不需要重新编译，而是直接通过 DLLReferencePlugin 引入 dll bundle, 大大的节省了构建时间。</p> <p>构建生成对应的 dll bundle 和 manifest.json 文件，manifest 文件中是模块 id 与请求路径的关系映射。</p> <h4 id="dllreferenceplugin"><a href="#dllreferenceplugin" class="header-anchor">#</a> DllReferencePlugin</h4> <blockquote><p>这个插件是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖</p></blockquote> <p>通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上，之后再在需要的时候通过内置的 <strong>webpack_require</strong> 函数来 require 他们。</p> <h3 id="mpx中-dllplugin-的使用"><a href="#mpx中-dllplugin-的使用" class="header-anchor">#</a> Mpx中 DllPlugin 的使用</h3> <p><strong>1.通过 @mpxjs/cli init 生成项目</strong></p> <p>初始化选项中选择使用dll功能。</p> <p><strong>2.在项目中 build/dll.config.js 进行 dll 文件配置</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 这里是一个用法示例</span>
-<span class="token keyword">function</span> <span class="token function">resolve</span> <span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">return</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'..'</span><span class="token punctuation">,</span> file <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">[</span>
-  <span class="token punctuation">{</span>
-    <span class="token literal-property property">cacheGroups</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token punctuation">{</span>
-        <span class="token literal-property property">entries</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/@someNpmGroup/someNpmPkgName/dist/wx/static/js/common.js'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">'testSomeDllFile'</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">modes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'wx'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">entryOnly</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">webpackCfg</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token comment">// 不使用任何默认优化选项</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token punctuation">{</span>
-    <span class="token literal-property property">cacheGroups</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token punctuation">{</span>
-        <span class="token literal-property property">entries</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/@someNpmGroup/someNpmPkgName/dist/ali/static/js/common.js'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">'testSomeDllFile'</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">modes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'ali'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">entryOnly</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">webpackCfg</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> <span class="token comment">// 不使用任何默认优化选项</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-
-<span class="token punctuation">]</span>
-</code></pre></div><p>DllPlugin 的配置项详见<a href="https://webpack.docschina.org/plugins/dll-plugin/" target="_blank" rel="noopener noreferrer">文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，Mpx 中相关配置项依据小程序环境做了相关调整。</p> <ul><li><p><strong>cacheGroups</strong></p> <ul><li>类型: <code>Array&lt;object&gt;</code> <ul><li>entries
-<ul><li><p>类型: <code>Array</code>dll</p> <p>构建入 dll 的文件入口</p></li></ul></li> <li>name
-<ul><li><p>类型: <code>String</code></p> <p>生成的 dll 文件名</p></li></ul></li> <li>root
-<ul><li><p>类型: <code>String</code></p> <p>生成的 dll 文件夹名</p></li></ul></li></ul></li></ul></li> <li><p><strong>modes</strong></p> <ul><li><p>类型: <code>Array</code></p> <p>构建 dll 产物对应的平台</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 配置多平台输出，例如：</span>
-<span class="token punctuation">[</span>
-  <span class="token string">'wx'</span><span class="token punctuation">,</span> <span class="token comment">// 微信平台</span>
-  <span class="token string">'ali'</span> <span class="token comment">// 支付宝平台</span>
-<span class="token punctuation">]</span>
-</code></pre></div></li></ul></li> <li><p><strong>entryOnly</strong></p> <ul><li><p>类型: <code>Boolean</code></p> <p>如果为true，则仅暴露入口</p> <p>这里建立使用entryOnly: true 配置</p> <blockquote><p>如果为 false 时，dllPlugin 中的 tree shakeing 功能就不再起作用</p></blockquote> <p>另外如果为false，如果是将分包资源打入dll bundle，会存在将全局方法打入分包 dll 中的可能性，这样主包在使用该方法被映射到 dll bundle 中时，会因为分包未加载而报错</p></li></ul></li> <li><p><strong>webpackCfg</strong></p> <ul><li><p>类型: <code>Object</code></p> <p>构建 dll 时可添加其他的 webpack 配置</p></li></ul></li> <li><p><strong>format</strong></p> <ul><li><p>类型: <code>Boolean</code></p> <p>生成的 manifest json 文件 是否进行格式化</p></li></ul></li></ul> <h3 id="mpx-中对-dllplugin-配置所做的相关处理"><a href="#mpx-中对-dllplugin-配置所做的相关处理" class="header-anchor">#</a> Mpx 中对 DllPlugin 配置所做的相关处理</h3> <p>正常使用 DllPlugin 是单独创建一个 webpack 配置文件，配置文件中加入 DllPlugin，然后运行 webpack 编译构建生成 dll 文件。</p> <p>考虑到 Mpx 在编译时需要跨平台输出，所以 Mpx 的配置项是 <code>Array&lt;object&gt;</code> 类型，同时增加了 modes 配置项，可以自主控制输出不同平台版本 dll 文件。</p> <p>构建生成 dll bundle 的主要逻辑在 buildDll.js 中，通过对 dll.config 中数组的循环处理，生成 webpackCfgs 数组。</p> <div class="language-js extra-class"><pre class="language-js"><code>dllConfigs<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">dllConfig</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> entries <span class="token operator">=</span> <span class="token function">getDllEntries</span><span class="token punctuation">(</span>dllConfig<span class="token punctuation">.</span>cacheGroups<span class="token punctuation">,</span> dllConfig<span class="token punctuation">.</span>modes<span class="token punctuation">)</span>
-  <span class="token comment">// 根据配置的 mode 以及 cacheGroups 生成 entry，结果例如：</span>
-  <span class="token comment">/**
-  *{
-        'somePkgRoot/wx.somePkgName': [
-            '/Users/didi/didiProject/mp-apphome/node_modules/@someNpmGroup/somNpmName/dist/wx/static/js/common.js'
-        ]
-    }
-  **/</span>
-  <span class="token keyword">if</span> <span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>entries<span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    webpackCfgs<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">merge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">entry</span><span class="token operator">:</span> entries<span class="token punctuation">,</span>
-      <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">path</span><span class="token operator">:</span> config<span class="token punctuation">.</span>dllPath<span class="token punctuation">,</span>
-        <span class="token literal-property property">filename</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'lib'</span><span class="token punctuation">,</span> dllName<span class="token punctuation">)</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">libraryTarget</span><span class="token operator">:</span> <span class="token string">'commonjs2'</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'production'</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>DllPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-          <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>config<span class="token punctuation">.</span>dllPath<span class="token punctuation">,</span> manifestName<span class="token punctuation">)</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">format</span><span class="token operator">:</span> dllConfig<span class="token punctuation">.</span>format<span class="token punctuation">,</span>
-          <span class="token literal-property property">entryOnly</span><span class="token operator">:</span> dllConfig<span class="token punctuation">.</span>entryOnly<span class="token punctuation">,</span>
-          <span class="token literal-property property">name</span><span class="token operator">:</span> dllName<span class="token punctuation">,</span>
-          <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'commonjs2'</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">context</span><span class="token operator">:</span> config<span class="token punctuation">.</span>context
-        <span class="token punctuation">}</span><span class="token punctuation">)</span>
-      <span class="token punctuation">]</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> dllConfig<span class="token punctuation">.</span>webpackCfg<span class="token punctuation">)</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>生成的 webpackCfgs 数组配置项，传入 webpack 执行，最终在 dll 文件夹下生成 dll bundle 和 manifest.json 文件</p> <p>之后在 build.js 中使用 DllReferencePlugin 将编译中的依赖项与 dll bundle 的模块 id 关联起来，这里我们通过多个 DllReferencePlugin 实例来将可能存在的多个 manifest 文件关联引入，具体在项目 build.js 文件中：</p> <div class="language-js extra-class"><pre class="language-js"><code>plugins<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>DllReferencePlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">context</span><span class="token operator">:</span> config<span class="token punctuation">.</span>context<span class="token punctuation">,</span> <span class="token comment">//（绝对路径） manifest (或者是内容属性)中请求的上下文</span>
-    <span class="token literal-property property">manifest</span><span class="token operator">:</span> manifest<span class="token punctuation">.</span>content <span class="token comment">// 请求到模块 id 的映射（默认值为 manifest.content）</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-</code></pre></div><p>DllReferencePlugin 的其他配置项详见<a href="https://webpack.docschina.org/plugins/dll-plugin/" target="_blank" rel="noopener noreferrer">文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h3> <p>综上所述，在 Mpx 中使用 dllPlugin 时，只需要进行 build/dll.config.js 文件的配置，然后通过 build:dll 命令生成 dll bundle，之后就可以正常的进行代码的 build 了。不过每次 build 需要检查下项目中使用的 npm 包版本与 dll bundle 中的 npm 包版本是否一致，避免因为包版本的滞后更新导致线上 bug，这里我们后续也会提供相应的包版本比对插件。</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/67.e57db97e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/i18n.html b/docs-vuepress/.vuepress/dist/guide/advance/i18n.html
deleted file mode 100644
index 207d91a34b..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/i18n.html
+++ /dev/null
@@ -1,276 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>国际化i18n | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/68.ebe4213c.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" aria-current="page" class="active sidebar-link">国际化i18n</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#开启-i18n" class="sidebar-link">开启 i18n</a></li><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#options-api-usage" class="sidebar-link">选项式 API 中使用</a></li><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#composition-api-usage" class="sidebar-link">在组合式 API 中使用</a></li><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#scope" class="sidebar-link">作用域</a></li><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#动态变更locale" class="sidebar-link">动态变更locale</a></li><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#动态更新语言集" class="sidebar-link">动态更新语言集</a></li><li class="sidebar-sub-header"><a href="/guide/advance/i18n.html#平台支持" class="sidebar-link">平台支持</a></li></ul></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="国际化i18n"><a href="#国际化i18n" class="header-anchor">#</a> 国际化i18n</h1> <p>Mpx 支持国际化 i18n，使用方式及支持能力与 vue-i18n 非常接近。</p> <p>Mpx 自带 i18n 能力，无需额外安装插件。由于小程序模板中的 i18n 函数是通过 wxs 编译注入进行实现，我们需要将 i18n 配置传入到 MpxWebpackPlugin 中来使 i18n 生效，这是与 vue-i18n 最大的区别。</p> <h2 id="开启-i18n"><a href="#开启-i18n" class="header-anchor">#</a> 开启 i18n</h2> <p>I18n 配置传入到 MpxWebpackPlugin 选项中即可生效，额外支持 messagesPath 配置，通过模块路径传入语言集，其余配置参考 vue-i18n。</p> <p>由于小程序的双线程特性，在选项式 API 场景下，默认情况下模板中调用的 i18n 函数由 wxs 实现，而 js 中调用的 i18n 函数由 js 实现，该设计能够将视图层和逻辑层之间的通信开销降至最低，得到最优的性能表现，但是由于 wxs 和 js 之间无法共享数据，在最终的编译产物中语言集会同时存在于 js 和 wxs 当中，对包体积产生负面影响。</p> <p>为了平衡上述影响，自2.6.56版本之后我们新增了编译配置项 <code>i18n.useComputed</code> ，改配置项开启的情况下对于模板中的 i18n 调用将不再使用 wxs 实现，而是通过在 computed 进行实现，语言集将只存在于 js 逻辑层当中，对于节省了包体积的同时双线程通信成本也会增加，用时间换空间，具体是否开启可以根据实际项目的使用情况及资源瓶颈由开发者自行决定，
-另外需要注意的是，<strong>在 Mpx 组合式 API 场景下 i18n 仅支持通过 computed 实现</strong>。</p> <blockquote><p>开启 <code>i18n.useComputed</code> 配置时，由于 computed 技术架构的限制，i18n 函数无法对模板循环渲染中的 <code>item</code> 或 <code>index</code> 生效。</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span><span class="token punctuation">,</span>
-          <span class="token comment">// messages既可以通过对象字面量传入，也可以通过messagesPath指定一个js模块路径，在该模块中定义配置并导出，dateTimeFormats/dateTimeFormatsPath和numberFormats/numberFormatsPath同理</span>
-          <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token string-property property">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-              <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} world'</span>
-              <span class="token punctuation">}</span>
-            <span class="token punctuation">}</span><span class="token punctuation">,</span>
-            <span class="token string-property property">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-              <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'{msg} 世界'</span>
-              <span class="token punctuation">}</span>
-            <span class="token punctuation">}</span>
-          <span class="token punctuation">}</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">useComputed</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 默认 false,  此开关将模板中的 i18n 函数注入 computed，在包体积空间紧张的情况下可以使用</span>
-          <span class="token comment">// messagesPath: path.resolve(__dirname, '../src/i18n.js')</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="options-api-usage"><a href="#options-api-usage" class="header-anchor">#</a> 选项式 API 中使用 </h2> <p>同 vue-i18n，在组件中直接调用翻译函数使用，由于 wxs 执行环境的限制，目前 js 中支持了 vue-i18n 中 $t/$tc/$te 翻译函数，$d/$n 暂不支持，详细使用方法可参考 vue-i18n。</p> <p>此外类似于 vue-i18n，在组件模板的 Mustache 插值中直接调用翻译函数。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{isMessageExist}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ $t('message.hello', { msg: 'hello' }) }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'message.hello'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'hello'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token function">isMessageExist</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-                <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$te</span><span class="token punctuation">(</span><span class="token string">'message.hello'</span><span class="token punctuation">)</span>
-            <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="composition-api-usage"><a href="#composition-api-usage" class="header-anchor">#</a> 在组合式 API 中使用 </h2> <p>在组合式 API setup 中，<code>this</code> 不是该活跃实例的引用，为了继续使用 i18n 的相关能力，我们需要一个新的方法来替代 <code>this</code>
-，这里 Mpx 提供 <code>useI18n</code> 方法支持对 i18n 相关功能的使用。</p> <h3 id="开始使用"><a href="#开始使用" class="header-anchor">#</a> 开始使用</h3> <p>同 vue-i18n, <strong>useI18n</strong> 返回一个 i18n 实例，该实例提供文案翻译 API 例如 <strong>t</strong> 方法，相较于选项式 API 中的翻译方法，在组合式 API 中有部分变化。</p> <ol><li>翻译方法 $t/t 和 $tc/tc，在组合式 API 中统一使用翻译方法 t</li> <li>翻译方法 $te/te，在组合式 API 中统一使用 te</li> <li>翻译方法 $tm/tm，在组合式 API 中统一使用 tm</li></ol> <p><code>useI18n</code> 方法的执行必须在 <code>setup</code> 中的顶层。</p> <p>i18n 同时也支持传入参数，例如 <code>locale</code> 和 <code>fallbackLocale</code>，
-关于实例的更多信息可移步API章节 <a href="/api/extend.html#usei18n">查看</a></p> <p>在不给 <code>useI18n</code> 传入任何参数时，i18n 实例的上下文将是全局作用域，即翻译函数 <code>t</code> 引用的文案来源是我们在 <code>MpxWebpackPlugin</code>
-中配置的文案。</p> <p>通过在 <strong>setup</strong> 中返回翻译函数 <strong>t</strong>，我们可以在模版中直接使用它:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t(&quot;message.hello&quot;)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> useI18n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 从返回中解构出 t 方法</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      t
-    <span class="token punctuation">}</span> <span class="token comment">// 将 t 方法返回挂载到渲染实例</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>注意事项：</strong></p> <p>组合式 API 中，Mpx 在编译时对模版进行 ast 遍历分析，检测到对应的翻译函数 t/tc/te 后，将其转换为 computed 方法注入，computed 中调用 setup 中返回的 t 方法进行文案获取，由此引申出来两个注意项：</p> <p>1.不可对从 <strong>useI18n</strong> 中解构出的 <strong>t</strong> 方法进行重命名，否则模版中将无法正确获取文案。</p> <p>下方即为错误示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t1('message.hello')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> useI18n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-    <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            <span class="token keyword">const</span> <span class="token punctuation">{</span><span class="token literal-property property">t</span><span class="token operator">:</span> t1<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-            <span class="token keyword">return</span> <span class="token punctuation">{</span>
-                t1
-            <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>2.模版中的 t/tc/te 方法都是使用 computed 实现，由于 computed 技术架构的限制，i18n 函数无法对模板循环渲染中的 <code>item</code> 或 <code>index</code> 生效。</p> <p>例如下方示例将会报错 computed 中找不到 item</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--tc方法使用 computed 实现，最终将无法正确获取item--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{listData}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{tc('message.hello', {msg: item})}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> useI18n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-    <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            <span class="token keyword">const</span> listData <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-            <span class="token keyword">const</span> <span class="token punctuation">{</span>tc<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-            <span class="token keyword">return</span> <span class="token punctuation">{</span>
-                tc<span class="token punctuation">,</span>
-                listData
-            <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="scope"><a href="#scope" class="header-anchor">#</a> 作用域 </h2> <p>在 Mpx 组合式 API 中，<code>useI18n</code> 返回的 i18n 实例默认是指向全局作用域，文案来源即为 <code>MpxWebpackPlugin</code> 中配置的 messages。</p> <p>如果需要在组合式 API 中使用本地作用域，需要给 <code>useI18n</code> 传入响应的配置项，<code>useI18n</code> 将根据传入的 locale、messages 等配置项来生成一个全新的
-i18n 实例，该实例的文案源即为用户传入的 <code>messages</code>。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--将展示本地作用域中的文案 哈喽--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('message.hello')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">import</span> <span class="token punctuation">{</span>createPage<span class="token punctuation">,</span> useI18n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-    <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-                <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span><span class="token punctuation">,</span>
-                <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                    <span class="token string-property property">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                        <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                            <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'哈喽'</span>
-                        <span class="token punctuation">}</span>
-                    <span class="token punctuation">}</span>
-                <span class="token punctuation">}</span>
-            <span class="token punctuation">}</span><span class="token punctuation">)</span>
-            <span class="token keyword">return</span> <span class="token punctuation">{</span>
-                t
-            <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>注意事项：</strong></p> <p>在给 <code>useI18n</code> 传参时，若只传入 <code>messages</code> 属性，则 <code>locale</code> 会自动 fallback 到全局 locale，修改 <code>useI18n</code> 返回的 <code>locale</code> ref 值将改变本地作用域  locale。</p> <p>若只传入 <code>locale</code> 属性，不传入 <code>messages</code>，则会自动 fallback 到全局 <code>locale</code> 和 <code>messages</code>，且修改 <code>useI18n</code> 返回的 <code>locale</code> 对<strong>全局和本地都不会起作用</strong>，
-因此建议不要单独传入 <code>locale</code> 属性，若想使用本地 i18n 实例，则必须传入 <code>messages</code> 属性。</p> <p>在 Mpx 选项式 API 中，i18n 实例仅有全局 global i18n 实例，所有 i18n 翻译方法 $t/$tc/$te/$tm 的执行上下文都为全局作用域。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{$t('message.hello')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">import</span> <span class="token punctuation">{</span>createPage<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-    <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$i18n<span class="token punctuation">)</span>
-            <span class="token comment">/**
-             * locale 全局 locale
-             * fallbackLocale 全局兜底 locale
-             */</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-                <span class="token comment">// 作用域为 global scope</span>
-                <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'message.name'</span><span class="token punctuation">)</span>
-            <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="动态变更locale"><a href="#动态变更locale" class="header-anchor">#</a> 动态变更locale</h2> <p>在 Mpx 组合式 API 中，你可以通过修改 <code>useI18n</code> 返回的 <code>locale</code> 来更换局部或全局语言，或者更改 mpx.i18n 中的 locale 属性更换全局语言集，并自动更新视图。</p> <ul><li>变更全局 locale</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 局部locale变更，生效范围为当前组件内</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span>t<span class="token punctuation">,</span> locale<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 全局locale变更，生效范围为项目全局，locale 是一个 ref 变量</span>
-      locale<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'zh-CN'</span>
-      <span class="token comment">// 或者通过mpx.i18n来修改，也能起到全局locale修改作用</span>
-      mpx<span class="token punctuation">.</span>i18n<span class="token punctuation">.</span>locale <span class="token operator">=</span> <span class="token string">'zh-CN'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        t
-    <span class="token punctuation">}</span>  
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>注意：</strong> 这里通过 mpx.i18n 修改 locale 时，为和 vue3 保持一直，需要通过 global 属性来获取 locale，同时 locale 也是一个 ref 变量，需要使用 <code>.value</code> 来修改。</p> <ul><li>变更局部 locale</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 局部locale变更，生效范围为当前组件内</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span>t<span class="token punctuation">,</span> locale<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token string-property property">'en-US'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                    <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'hello'</span>
-                <span class="token punctuation">}</span>
-            <span class="token punctuation">}</span><span class="token punctuation">,</span>
-            <span class="token string-property property">'zh-CN'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                    <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'你好'</span>
-                <span class="token punctuation">}</span>
-            <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 局部locale变更，生效范围为当前组件/页面，locale 是一个 ref 变量</span>
-      locale<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'zh-CN'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        t
-    <span class="token punctuation">}</span>  
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>在选项式 API 中，仅支持修改全局 locale, 不支持修改局部 locale。</p> <p>在 Vue3 中，选项式 API 中直接修改 this.$i18n.locale 无任何作用，这里为和 Vue3 拉齐建议使用 mpx.i18n 来进行 locale 修改。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 修改全局 locale</span>
-      mpx<span class="token punctuation">.</span>i18n<span class="token punctuation">.</span>locale <span class="token operator">=</span> <span class="token string">'en-US'</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="动态更新语言集"><a href="#动态更新语言集" class="header-anchor">#</a> 动态更新语言集</h2> <p>在组合式 API 中默认支持动态更新语言集。</p> <p>在选项式 API 中，当模板中没有使用 i18n 函数或开启了 <code>i18n.useComputed</code> 配置时, 可以对语言集进行动态更新。</p> <p>我们提供了 <code>mergeLocaleMessage</code> 对语言集进行动态扩展，<code>setLocaleMessage</code> 对语言集进行覆盖更新。</p> <p>使用方式如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--2 秒之后展示 哈喽--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('message.hello')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--1秒之后展示 hello1, 2秒之后展示为 恭喜你--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{t('message.hello1')}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> useI18n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-    <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-            <span class="token keyword">const</span> <span class="token punctuation">{</span> t<span class="token punctuation">,</span> mergeLocaleMessage<span class="token punctuation">,</span> setLocaleMessage <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-            <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-                <span class="token comment">// 新增一门语言或针对特定语言更新语言集</span>
-                <span class="token function">mergeLocaleMessage</span><span class="token punctuation">(</span><span class="token string">'en-US'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-                    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                        <span class="token literal-property property">hello1</span><span class="token operator">:</span> <span class="token string">'hello1'</span><span class="token punctuation">,</span>
-                    <span class="token punctuation">}</span>
-                <span class="token punctuation">}</span><span class="token punctuation">)</span>
-            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
-            <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-                <span class="token function">setLocaleMessage</span><span class="token punctuation">(</span><span class="token string">'en-US'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-                    <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                        <span class="token literal-property property">hello</span><span class="token operator">:</span> <span class="token string">'哈喽'</span><span class="token punctuation">,</span>
-                        <span class="token literal-property property">hello1</span><span class="token operator">:</span> <span class="token string">'恭喜你'</span>
-                    <span class="token punctuation">}</span>
-                <span class="token punctuation">}</span><span class="token punctuation">)</span>
-            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span>
-            <span class="token keyword">return</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>同理我们在选项式 API 中可以使用 <code>mpx.i18n.global.mergeLocaleMessage</code>, <code>mpx.i18n.global.setLocaleMessage</code> 方法来动态更新或扩展语言集。</p> <h2 id="平台支持"><a href="#平台支持" class="header-anchor">#</a> 平台支持</h2> <p>目前支持业内所有小程序平台(微信/支付宝/qq/百度/头条)。</p> <p>在输出 web 时，构建会自动引入 vue-i18n 并进行安装配置，无需修改任何代码即可按照预期正常工作。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/platform.html" class="prev">
-        跨平台
-      </a></span> <span class="next"><a href="/guide/advance/size-report.html">
-        包体积分析
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/68.ebe4213c.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/image-process.html b/docs-vuepress/.vuepress/dist/guide/advance/image-process.html
deleted file mode 100644
index 37b1f3de55..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/image-process.html
+++ /dev/null
@@ -1,175 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>图像资源处理 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/69.2d309866.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" aria-current="page" class="active sidebar-link">图像资源处理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/image-process.html#图像资源引入有三种方式" class="sidebar-link">图像资源引入有三种方式</a></li><li class="sidebar-sub-header"><a href="/guide/advance/image-process.html#base64-图像资源" class="sidebar-link">Base64 图像资源</a></li><li class="sidebar-sub-header"><a href="/guide/advance/image-process.html#cdn-图像资源" class="sidebar-link">CDN 图像资源</a></li><li class="sidebar-sub-header"><a href="/guide/advance/image-process.html#cdn-图像资源输出本地目录，用户自行批量上传到cdn服务器" class="sidebar-link">CDN 图像资源输出本地目录，用户自行批量上传到CDN服务器</a></li><li class="sidebar-sub-header"><a href="/guide/advance/image-process.html#用户自定义图像处理方式" class="sidebar-link">用户自定义图像处理方式</a></li></ul></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="图像资源处理"><a href="#图像资源处理" class="header-anchor">#</a> 图像资源处理</h1> <blockquote><p>Mpx在小程序开发中提供了很好的图像资源处理能力，让开发者可以愉快地在项目中使用图片。</p></blockquote> <h2 id="图像资源引入有三种方式"><a href="#图像资源引入有三种方式" class="header-anchor">#</a> 图像资源引入有三种方式</h2> <ol><li>Template 中通过 image src 指定图像资源
-<ul><li>直接指定图像的远程资源地址</li> <li>资源为本地路径，若配置 publicPath，则 publicPath 与 webpack loader 中配置的 name 进行拼接</li></ul></li> <li>Style 中通过 src 指定图像资源</li> <li>Style 中通过 class 指定图像资源</li></ol> <p>Wxss文件中只能用 CDN 地址或 Base64, 针对第二、三种方式引入的资源，可以通过配置决定使用 CDN 还是 Base64，且 Mpx 中图像资源处理会优先检查 Base64，具体配置参数如下：</p> <ul><li>publicPath：资源存放 CDN 地址，可选</li> <li>limit: 资源大小限制，可根据资源的大小判断走 Base64 还是 CDN， 可选</li> <li>publicPathScope: 限制输出 CDN 图像资源的范围，可选 styleOnly、all，默认为 styleOnly。（图像引用方式分两大类 Template, Style）</li> <li>outputPathCDN: 设置 CDN 图像对应的本地相对地址（相对于当前编译输出目录的地址，如 dist,或者 dist/wx），可写脚本将本地图像批量上传到 CDN</li></ul> <h2 id="base64-图像资源"><a href="#base64-图像资源" class="header-anchor">#</a> Base64 图像资源</h2> <p>图像转 Base64的两种方式:</p> <ul><li>未配置 publicPath</li> <li>配置了 publicPath，且用户未自定义图像处理 fallback query，且未配置 limit 或图像资源未超过 limit 的限制时</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.config.js 配置,未配置 publicPath 必走 Base64</span>
-<span class="token keyword">const</span> webpackConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-      <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">urlLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="custom-block tip"><p class="custom-block-title">@mpxjs/cli 3.x 版本配置如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">urlLoader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div></div> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">&lt;style&gt;
-  .logo</span> <span class="token punctuation">{</span>
-    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'~images/logo.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-&lt;/style&gt;
-</code></pre></div><h2 id="cdn-图像资源"><a href="#cdn-图像资源" class="header-anchor">#</a> CDN 图像资源</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.config.js 配置</span>
-<span class="token keyword">const</span> webpackConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-      <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">urlLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
-        <span class="token comment">// CDN 地址</span>
-        <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com/'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token string">'1024'</span> <span class="token comment">// Base64 的最大长度，超过则走 CDN </span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="custom-block tip"><p class="custom-block-title">@mpxjs/cli 3.x 版本配置如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">urlLoader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
-        <span class="token comment">// CDN 地址</span>
-        <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com/'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token string">'1024'</span> <span class="token comment">// Base64 的最大长度，超过则走 CDN </span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div></div> <h2 id="cdn-图像资源输出本地目录，用户自行批量上传到cdn服务器"><a href="#cdn-图像资源输出本地目录，用户自行批量上传到cdn服务器" class="header-anchor">#</a> CDN 图像资源输出本地目录，用户自行批量上传到CDN服务器</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.config.js 配置</span>
-<span class="token keyword">const</span> webpackConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-      <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">urlLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com'</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">publicPathScope</span><span class="token operator">:</span> <span class="token string">'styleOnly'</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">outputPathCDN</span><span class="token operator">:</span> <span class="token string">'./cdnImages'</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="custom-block tip"><p class="custom-block-title">@mpxjs/cli 3.x 版本配置如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">urlLoader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">publicPathScope</span><span class="token operator">:</span> <span class="token string">'styleOnly'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">outputPathCDN</span><span class="token operator">:</span> <span class="token string">'./cdnImages'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div></div> <blockquote><p>备注:<br>
-图像默认编译后会输出到 img 目录下, 当设置 outputPathCDN 后，输出的本地图像地址为 outputPathCDN + img/图像.png<br>
-CND 文件地址为 publicPath + img/图像.png，所以当使用脚本上传到 CDN 时，路径要带上 img</p></blockquote> <h2 id="用户自定义图像处理方式"><a href="#用户自定义图像处理方式" class="header-anchor">#</a> 用户自定义图像处理方式</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.config.js 配置</span>
-<span class="token keyword">const</span> webpackConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-      <span class="token literal-property property">loader</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">urlLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
-        <span class="token comment">// CDN 地址</span>
-        <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com/'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token string">'1024'</span> <span class="token comment">// Base64 的最大长度，超过则走 CDN,</span>
-        <span class="token literal-property property">fallback</span><span class="token operator">:</span> <span class="token string">'file-loader'</span> <span class="token comment">// 默认走 file-loader</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="custom-block tip"><p class="custom-block-title">@mpxjs/cli 3.x 版本配置如下</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">urlLoader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span><span class="token punctuation">,</span>
-        <span class="token comment">// CDN 地址</span>
-        <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'http://a.com/'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">limit</span><span class="token operator">:</span> <span class="token string">'1024'</span> <span class="token comment">// Base64 的最大长度，超过则走 CDN,</span>
-        <span class="token literal-property property">fallback</span><span class="token operator">:</span> <span class="token string">'file-loader'</span> <span class="token comment">// 默认走 file-loader</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div></div> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*不走 Base64 的情况下*/</span>
-<span class="token selector">&lt;style&gt;
-  .logo2</span> <span class="token punctuation">{</span>
-    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'~images/logo.png?fallback=true'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-&lt;/style&gt;
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/size-report.html" class="prev">
-        包体积分析
-      </a></span> <span class="next"><a href="/guide/advance/progressive.html">
-        原生渐进迁移
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/69.2d309866.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/mixin.html b/docs-vuepress/.vuepress/dist/guide/advance/mixin.html
deleted file mode 100644
index 312f093e26..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/mixin.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>使用 mixin | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/70.60ae83e6.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" aria-current="page" class="active sidebar-link">使用 mixin</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/mixin.html#局部-mixin" class="sidebar-link">局部 Mixin</a></li><li class="sidebar-sub-header"><a href="/guide/advance/mixin.html#全局-mixin" class="sidebar-link">全局 Mixin</a></li></ul></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用-mixin"><a href="#使用-mixin" class="header-anchor">#</a> 使用 mixin</h1> <p>Mpx 提供了一套完善的 mixin 机制，有人可能要问，原生小程序中已经支持了 behaviors，为何我们还需要提供 mixin 呢？主要有以下两点原因：</p> <ol><li>Behaviors 是平台限度的，只有在部分小程序平台中可以使用，而且内置 behaviors 承载了除了 mixin 外的其他功能，框架提供的 mixin 是一个与平台无关的基础能力；</li> <li>Behaviors 只有组件支持使用，页面不支持，而且只支持局部声明，框架提供的 mixin 与组件页面无关，且支持全局 mixin 声明。</li></ol> <h2 id="局部-mixin"><a href="#局部-mixin" class="header-anchor">#</a> 局部 Mixin</h2> <p><code>App</code>、<code>Page</code>、<code>Component</code> 接收 mixins 参数,参数格式为[Mixin1(Object),Mixin2(Object)]</p> <blockquote><p>Mixin 混合实例对象可以像正常的实例对象一样包含选项，相同选项将进行逻辑合并。举例：如果 mixin1 包含一个钩子 ready,而创建组件 Component 也有一个钩子 ready，两个函数将被调用。 Mixin 钩子按照传入顺序(数组顺序)依次调用，并在调用组件自身的钩子之前被调用。</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// mixin.js</span>
-<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">'phone'</span><span class="token operator">:</span> <span class="token string">'手机'</span><span class="token punctuation">,</span>
-      <span class="token string-property property">'tv'</span><span class="token operator">:</span> <span class="token string">'电视'</span><span class="token punctuation">,</span>
-      <span class="token string-property property">'computer'</span><span class="token operator">:</span> <span class="token string">'电脑'</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'mixins ready:'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span>phone<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{list}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token keyword">import</span> mixins <span class="token keyword">from</span> <span class="token string">'../common/mixins'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">mixins</span><span class="token operator">:</span> <span class="token punctuation">[</span>mixins<span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'手机'</span><span class="token punctuation">,</span> <span class="token string">'电视'</span><span class="token punctuation">,</span> <span class="token string">'电脑'</span><span class="token punctuation">]</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'component ready:'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">.</span>phone<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><div class="language-shell extra-class"><pre class="language-shell"><code>// 输出结果为
-mixins ready: 手机
-component ready: 手机
-</code></pre></div><h2 id="全局-mixin"><a href="#全局-mixin" class="header-anchor">#</a> 全局 Mixin</h2> <p>Mpx 中可以使用 <code>mpx.injectMixins</code> 方法配置全局 mixin，能够按照 App / 组件 / 页面维度自由配置，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token comment">// 第一个参数为 mixins，可以混入任意配置，第二个参数为混入生效范围，可传递 'app' / 'page' / 'component' 字符串或由其组成的数组</span>
-mpx<span class="token punctuation">.</span><span class="token function">injectMixins</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-  <span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">customData</span><span class="token operator">:</span> <span class="token string">'123'</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'page'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-
-<span class="token comment">// mpx.mixin 为 mpx.injectMixins 的别名，混入单个 mixin 时可以直接传递对象，生效范围可传递字符串</span>
-mpx<span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">useCustomData</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>customData<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'component'</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 当未传递生效范围时默认为全局生效，对 app / page / component 都生效</span>
-mpx<span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">processedCustomData</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>customData <span class="token operator">+</span> <span class="token string">'321'</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/pinia.html" class="prev">
-        状态管理（pinia）
-      </a></span> <span class="next"><a href="/guide/advance/npm.html">
-        使用npm
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/70.60ae83e6.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/npm.html b/docs-vuepress/.vuepress/dist/guide/advance/npm.html
deleted file mode 100644
index 7dc074ae6d..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/npm.html
+++ /dev/null
@@ -1,144 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>使用npm | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/71.188d7bca.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" aria-current="page" class="active sidebar-link">使用npm</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/npm.html#下载npm包" class="sidebar-link">下载npm包</a></li><li class="sidebar-sub-header"><a href="/guide/advance/npm.html#引用npm模块" class="sidebar-link">引用npm模块</a></li><li class="sidebar-sub-header"><a href="/guide/advance/npm.html#引用npm组件-页面" class="sidebar-link">引用npm组件/页面</a></li><li class="sidebar-sub-header"><a href="/guide/advance/npm.html#兼容原生小程序路径规范" class="sidebar-link">兼容原生小程序路径规范</a></li></ul></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用npm"><a href="#使用npm" class="header-anchor">#</a> 使用npm</h1> <p>Mpx项目中用户能够方便自然地引用 npm 资源，像 web 开发中一样</p> <p>在 Mpx 中使用 npm，通过 Webpack 插件在编译时将引用的 npm 包输出为小程序文件，所以 Mpx 的构建产物不需要在开发工具再次进行 npm 构建。</p> <h2 id="下载npm包"><a href="#下载npm包" class="header-anchor">#</a> 下载npm包</h2> <p>在项目 package.json 所在的目录中执行命令安装项目 npm 包</p> <div class="language-js extra-class"><pre class="language-js"><code>npm install
-</code></pre></div><p>在项目中安装某个第三方 npm 包</p> <div class="language-js extra-class"><pre class="language-js"><code>npm install mpx<span class="token operator">-</span>ui
-</code></pre></div><p>如若之前未接触过 npm，请翻阅 <a href="https://docs.npmjs.com/about-npm/index.html" target="_blank" rel="noopener noreferrer">官方 npm 文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 进行学习。</p> <h2 id="引用npm模块"><a href="#引用npm模块" class="header-anchor">#</a> 引用npm模块</h2> <p>直接使用模块路径引用，可以直接通过 ES6 的 import 语法来引用 JS 文件，并且无需额外执行npm构建</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-</code></pre></div><h2 id="引用npm组件-页面"><a href="#引用npm组件-页面" class="header-anchor">#</a> 引用npm组件/页面</h2> <p>在页面 script 标签中的 json 对象中使用 usingComponents 引入第三方组件，直接使用模块路径引用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;application/json&quot;</span><span class="token operator">&gt;</span>
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;mpx-button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;mpx-ui/src/components/button&quot;</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>在 app.mpx 中的 script 标签中的 pages/packages/subPackages 中都可以声明引用 npm 包页面</p> <p>示例:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;application/json&quot;</span><span class="token operator">&gt;</span>
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;@someGroup/someNpmPackage/pages/view/index.mpx&quot;</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>以上这种写法为避免和本地页面路径冲突，Mpx 会将路径进行 hash 化处理，所以使用页面时要在路径后添加 ?resovle 标识符，编译时会被处理成正确的、完整的绝对路径。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> packageIndexPage <span class="token keyword">from</span> <span class="token string">'@someGroup/someNpmPackage/pages/view/index.mpx?resolve'</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">url</span><span class="token operator">:</span> packageIndexPage
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>如果你觉得上述引用 npm 包页面的方式太繁琐，我们也提供了另一种 page 声明方式，可以让你自定义页面路径</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 声明</span>
-<span class="token punctuation">{</span>
-  <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;src&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@someGroup/someNpmPackage/pages/view/index.mpx&quot;</span><span class="token punctuation">,</span>
-      <span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/somNpmPackage/index&quot;</span> <span class="token comment">// 注意保持 path 的唯一性</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">// 使用</span>
-<span class="token comment">// 可以直接使用你自己声明的 path</span>
-mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/pages/somNpmPackage/index'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>同理，我们在使用 subPackages 分包时也可以使用 pages 对象的方式</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string-property property">&quot;subPackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-       <span class="token punctuation">{</span>
-         <span class="token string-property property">&quot;src&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@someGroup/someNpmPackage/pages/view/index.mpx&quot;</span><span class="token punctuation">,</span>
-         <span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/somNpmPackage/index&quot;</span> <span class="token comment">// 注意保持 path 的唯一性</span>
-       <span class="token punctuation">}</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">]</span>
-<span class="token comment">// 使用</span>
-mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/test/pages/somNpmPackage/index'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>同时使用 Mpx 引用npm组件/页面时包体积比原生中的 npm 规范更优，好处有：</p> <p>Mpx npm构建的优势主要有两点：1. 按需构建；2. 支持分包</p> <ul><li><p>小程序的 npm 规范场景下，组件库需声明miniprogram_dist目录，执行构建npm命令，将整个miniprogram_dist中的代码copy到项目的miniprogram_npm目录下。而 Mpx 的 npm 包引用，借助 Webpack 强大的构建分析能力，loader 在解析 json 中的 pages 域和 usingComponents 域中的路径时，通过动态创建 entry 的方式把这些文件添加进来，同时按需加载被确切使用的文件，降低包体积，借助  CommonsChunkPlugin/SplitChunksPlugin 的能力将复用的 js 模块抽出到一个外部公用的 bundle 中。</p></li> <li><p>原生小程序的构建中，所有的 npm 模块都会输出到主包中，Mpx 在编译中，还会进行分包处理，对组件和静态资源，根据用户的分包配置，串行对主包和各个分包进行构建，标记出每个组件及静态资源的归属，根据小程序资源访问策略将其输出到主包或者分包中。</p></li></ul> <p>所以使用 Mpx 框架开发小程序，可以享受最舒适最自然最好用的 npm 机制，详细原理介绍请移步<a href="/guide/understand/compile.html">Mpx编译构建原理</a></p> <h2 id="兼容原生小程序路径规范"><a href="#兼容原生小程序路径规范" class="header-anchor">#</a> 兼容原生小程序路径规范</h2> <p>组件或者页面的引入有绝对路径和相对路径，或者引入 npm 第三方包，原生小程序中，我们通过相对路径引入一个组件时</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
-  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;component-tag-name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;path/to/the/custom/component&quot;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>这种路径形式在 webpack 路径规范中会被当成 npm 包路径来处理，所以要对原生小程序的路径规范做下兼容。</p> <p>Mpx 提供了两种路径规范的配置模式可供大家选择，具体的使用方式为：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-         <span class="token literal-property property">resolveMode</span><span class="token operator">:</span> <span class="token string">'webpack'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>在 MpxWebpackPlugin 插件中设置 resolveMode 项，默认值为 webpack，可选值有 webpack/native，推荐使用 webpack 模式，更舒服一些，配置项为 webpack 时，json 中的 pages/usingComponents 等需要写相对路径，但是也可以直接写 npm 包路径。例如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
-  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;component-tag-name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./path/to/the/custom/component&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 内部组件路径</span>
-    <span class="token string-property property">&quot;mpx-button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;mpx-ui/src/components/button&quot;</span> <span class="token comment">// npm 包路径</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>如果希望使用类似小程序原始那种&quot;绝对路径&quot;，可以将 resolveMode 设置为 native，但是 npm 路径需要在前面加一个~，类似 webpack 的样式引入规范，同时必须配合 projectRoot 参数提供项目根目录地址。</p> <p>resolveMode 为 native 时的使用示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">resolveMode</span><span class="token operator">:</span> <span class="token string">'native'</span><span class="token punctuation">,</span>
-        <span class="token comment">// 当resolveMode为native时可通过该字段指定项目根目录</span>
-        <span class="token literal-property property">projectRoot</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'../src'</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 项目page.mpx</span>
-<span class="token punctuation">{</span>
-  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;mpx-button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;~mpx-ui/src/components/button&quot;</span><span class="token punctuation">,</span> <span class="token comment">// npm 包路径</span>
-    <span class="token string-property property">&quot;component-tag-name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;path/to/the/custom/component&quot;</span> <span class="token comment">// 内部组件路径</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/mixin.html" class="prev">
-        使用 mixin
-      </a></span> <span class="next"><a href="/guide/advance/subpackage.html">
-        使用分包
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/71.188d7bca.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/pinia.html b/docs-vuepress/.vuepress/dist/guide/advance/pinia.html
deleted file mode 100644
index dff4cbe5af..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/pinia.html
+++ /dev/null
@@ -1,191 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>状态管理（pinia） | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/72.3f7bfd0d.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" aria-current="page" class="active sidebar-link">状态管理（pinia）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/pinia.html#介绍" class="sidebar-link">介绍</a></li><li class="sidebar-sub-header"><a href="/guide/advance/pinia.html#使用插件" class="sidebar-link">使用插件</a></li></ul></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="状态管理-pinia"><a href="#状态管理-pinia" class="header-anchor">#</a> 状态管理（pinia）</h1> <p>Mpx 参考 <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener noreferrer">Pinia<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 设计实现了一套外部状态逻辑管理系统（pinia），允许跨页面/组件共享状态，其中的概念与 api 与 Pinia 保持一致，同时支持在 Mpx 组合式 API（Composition API）和选项式 API（Options API）模式下使用。</p> <h2 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h2> <p><code>pinia</code> 是一个状态管理容器，可支持复杂场景下的组件通信机制，与<code>Vuex</code>状态管理不同之处在于：</p> <ol><li><p>mutations 不再存在，使用 actions 来支持应用中状态的同步和异步变更。</p></li> <li><p>动态创建 store，使用<code>useStore</code>实现运行时动态创建 store。</p></li> <li><p>扁平架构，不再有 modules 嵌套结构，支持不同 store 之间的交叉组合方式使用。</p></li></ol> <h3 id="创建-pinia"><a href="#创建-pinia" class="header-anchor">#</a> 创建 pinia</h3> <p>首先在应用中调用<code>createPinia</code>方法来创建全局 pinia 实例。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
-<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
-
-<span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-</code></pre></div><p>如果你的应用想使用 SSR 渲染模式，请将 pinia 的创建放在 <code>onAppInit</code> 钩子中执行</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
-
-<span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
-
-<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-  <span class="token function">onAppInit</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      pinia
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="创建-store"><a href="#创建-store" class="header-anchor">#</a> 创建 store</h3> <p>然后调用<code>defineStore</code>方法，传入 store 唯一标识（id），来创建一个 store，支持 Setup 和 Options 两种风格的 store。</p> <h4 id="setup-store"><a href="#setup-store" class="header-anchor">#</a> Setup store</h4> <p>与组合式 API 的 setup 函数类似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并返回一个带有我们想暴露出去的属性和方法的对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// setup.js</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">export</span> <span class="token keyword">const</span> useSetupStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'setup'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'pinia'</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> myName <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> name<span class="token punctuation">.</span>value
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token keyword">function</span> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    count<span class="token punctuation">.</span>value<span class="token operator">++</span>
-  <span class="token punctuation">}</span>
-  <span class="token keyword">return</span> <span class="token punctuation">{</span> count<span class="token punctuation">,</span> name<span class="token punctuation">,</span> myName<span class="token punctuation">,</span> increment <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>在 Setup Store 中：</p> <ul><li><code>ref()</code> 就是 <code>state</code> 属性</li> <li><code>computed()</code> 就是 <code>getters</code></li> <li><code>function()</code> 就是 <code>actions</code></li></ul> <h4 id="options-store"><a href="#options-store" class="header-anchor">#</a> Options store</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// options.js</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">export</span> <span class="token keyword">const</span> useOptionsStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'options'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token function-variable function">state</span> <span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'pinia'</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">myName</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> state<span class="token punctuation">.</span>name
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$patch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        state<span class="token punctuation">.</span>count<span class="token operator">++</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="使用-store"><a href="#使用-store" class="header-anchor">#</a> 使用 store</h3> <p>在选项式 API 中使用，如果你不能使用组合式 API，但你可以使用 <code>computed</code>, <code>methods</code>, '...'，那你可以使用 <code>mapState()</code>, <code>mapActions()</code> 辅助函数
-来将 <code>state</code>, <code>getter</code>, <code>action</code> 等映射到你的组件中。</p> <p>无论是 optionsStore、还是 setupStore，我们都可以在选项式组件中使用，且使用方式并无差异，下方例子我们统一使用 useSetupStore 来作为示范例</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> storeToRefs<span class="token punctuation">,</span> mapState<span class="token punctuation">,</span> mapActions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> useOptionsStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'xxx/options'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> useSetupStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'xxx/setup'</span>
-
-
-<span class="token comment">// 选项式API（Options API）风格下通过mapHelper函数使用</span>
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 可以访问组件中的 this.name</span>
-    <span class="token comment">// 此处与直接从 useSetupStore 中读取的数据相同</span>
-    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span>useSetupStore<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'count'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// 也可以将state修改别名，例如将name 注册为 otherName</span>
-    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span>useSetupStore<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">otherName</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
-      <span class="token comment">// 也可以写一个函数来获取对 useSetupStore 的访问权</span>
-      <span class="token function-variable function">double</span><span class="token operator">:</span> <span class="token parameter">store</span> <span class="token operator">=&gt;</span> store<span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">,</span>
-      <span class="token comment">// 也可以通过访问 `this` 拿到数据</span>
-      <span class="token function">magicValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>double
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// 在pinia中，getter 也是通过 mapState 来进行映射</span>
-    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span>useSetupStore<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'myName'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span>useSetupStore<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'increment'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// 也可以将其注册问题 this.setupIncrement 方法</span>
-    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span>useSetupStore<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">setupIncrement</span><span class="token operator">:</span> <span class="token string">'increment'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><strong>注意：</strong> 在 <code>pinia</code> 中，getter 也是通过 mapState 来进行映射</p> <p>在组合式API (Setup API) 风格下使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useSetupStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'xxx/setup'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> storeToRefs<span class="token punctuation">,</span> mapState<span class="token punctuation">,</span> mapActions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> setupStore <span class="token operator">=</span> <span class="token function">useSetupStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    setupStore<span class="token punctuation">.</span>count <span class="token operator">=</span> <span class="token number">2</span>
-    <span class="token comment">// 作为 store 的一个属性，我们可以直接访问任何 getter(与 state )</span>
-    setupStore<span class="token punctuation">.</span>myName <span class="token comment">// pinia</span>
-
-    <span class="token keyword">function</span> <span class="token function">onIncrementClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 调用 action 方法</span>
-      setupStore<span class="token punctuation">.</span><span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'New Count:'</span><span class="token punctuation">,</span> setupStore<span class="token punctuation">.</span>count<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      onIncrementClick<span class="token punctuation">,</span>
-      <span class="token operator">...</span><span class="token function">storeToRefs</span><span class="token punctuation">(</span>setupStore<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><blockquote><p>注意：在组合式 API（Setup API）模式下，直接解构获取到的 store 数据会失去响应性，需要通过 storeToRefs 方法处理赋予数据响应性。另外<code>storeToRefs</code>方法只会返回 state 或 getter。</p></blockquote> <h2 id="使用插件"><a href="#使用插件" class="header-anchor">#</a> 使用插件</h2> <p>Mpx pinia 支持使用插件扩展当前 store 实例的功能，用法如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// onStoreAction.js，订阅所有store实例的方法</span>
-<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">onStoreAction</span><span class="token operator">:</span> <span class="token parameter">context</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  context<span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">$onAction</span><span class="token punctuation">(</span><span class="token punctuation">(</span>
-    <span class="token parameter"><span class="token punctuation">{</span>
-      name<span class="token punctuation">,</span>
-      store<span class="token punctuation">,</span>
-      args<span class="token punctuation">,</span>
-      after<span class="token punctuation">,</span>
-      onError
-    <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token function">after</span><span class="token punctuation">(</span><span class="token parameter">name</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'after'</span><span class="token punctuation">,</span> name<span class="token punctuation">,</span> store<span class="token punctuation">,</span> args<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-      <span class="token function">onError</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onError'</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">// app.mpx</span>
-<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> onStoreAction <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'xxx/onStoreAction'</span>
-
-<span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-pinia<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>onStoreAction<span class="token punctuation">)</span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/store.html" class="prev">
-        状态管理（store）
-      </a></span> <span class="next"><a href="/guide/advance/mixin.html">
-        使用 mixin
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/72.3f7bfd0d.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/platform.html b/docs-vuepress/.vuepress/dist/guide/advance/platform.html
deleted file mode 100644
index b95a932b6d..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/platform.html
+++ /dev/null
@@ -1,300 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>跨平台 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/73.171571e4.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" aria-current="page" class="active sidebar-link">跨平台</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/platform.html#多平台支持" class="sidebar-link">多平台支持</a></li><li class="sidebar-sub-header"><a href="/guide/advance/platform.html#跨平台输出小程序" class="sidebar-link">跨平台输出小程序</a></li><li class="sidebar-sub-header"><a href="/guide/advance/platform.html#跨平台条件编译" class="sidebar-link">跨平台条件编译</a></li><li class="sidebar-sub-header"><a href="/guide/advance/platform.html#跨平台输出web" class="sidebar-link">跨平台输出web</a></li></ul></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="跨平台"><a href="#跨平台" class="header-anchor">#</a> 跨平台</h1> <h2 id="多平台支持"><a href="#多平台支持" class="header-anchor">#</a> 多平台支持</h2> <p>Mpx支持在多个小程序平台中进行增强，目前支持的小程序平台包括微信，支付宝，百度，qq和头条，不过自2.0版本后，Mpx支持了以微信增强语法为base的跨平台输出，实现了一套业务源码在多端输出运行的能力，大大提升了多小程序平台业务的开发效率，详情可以查看<a href="#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%BC%96%E8%AF%91">跨平台编译</a></p> <h3 id="template增强特性"><a href="#template增强特性" class="header-anchor">#</a> template增强特性</h3> <p>不同平台上的模板增强指令按照平台的指令风格进行设计，文档和代码示例为了方便统一采用微信小程序下的书写方式。</p> <p>模板增强指令对应表：</p> <table><thead><tr><th>增强指令</th> <th>微信</th> <th>支付宝</th> <th>百度</th> <th>qq</th> <th>头条</th></tr></thead> <tbody><tr><td>双向绑定</td> <td>wx:model</td> <td>a:model</td> <td>s-model</td> <td>qq:model</td> <td>tt:model</td></tr> <tr><td>双向绑定辅助属性</td> <td>wx:model-prop</td> <td>a:model-prop</td> <td>s-model-prop</td> <td>qq:model-prop</td> <td>tt:model-prop</td></tr> <tr><td>双向绑定辅助属性</td> <td>wx:model-event</td> <td>a:model-event</td> <td>s-model-event</td> <td>qq:model-event</td> <td>tt:model-event</td></tr> <tr><td>双向绑定辅助属性</td> <td>wx:model-value-path</td> <td>a:model-value-path</td> <td>s-model-value-path</td> <td>qq:model-value-path</td> <td>tt:model-value-path</td></tr> <tr><td>双向绑定辅助属性</td> <td>wx:model-filter</td> <td>a:model-filter</td> <td>s-model-filter</td> <td>qq:model-filter</td> <td>tt:model-filter</td></tr> <tr><td>动态样式绑定</td> <td>wx:class</td> <td>a:class</td> <td>s-class</td> <td>qq:class</td> <td>暂不支持</td></tr> <tr><td>动态样式绑定</td> <td>wx:style</td> <td>a:style</td> <td>s-style</td> <td>qq:style</td> <td>暂不支持</td></tr> <tr><td>获取节点/组件实例</td> <td>wx:ref</td> <td>a:ref</td> <td>s-ref</td> <td>qq:ref</td> <td>tt:ref</td></tr> <tr><td>显示/隐藏</td> <td>wx:show</td> <td>a:show</td> <td>s-show</td> <td>qq:show</td> <td>tt:show</td></tr></tbody></table> <h3 id="script增强特性"><a href="#script增强特性" class="header-anchor">#</a> script增强特性</h3> <table><thead><tr><th>增强字段</th> <th>微信</th> <th>支付宝</th> <th>百度</th> <th>qq</th> <th>头条</th></tr></thead> <tbody><tr><td>computed</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>部分支持，无法作为props传递(待头条修复生命周期执行顺序可完整支持)</td></tr> <tr><td>watch</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td></tr> <tr><td>mixins</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td></tr></tbody></table> <h3 id="style增强特性"><a href="#style增强特性" class="header-anchor">#</a> style增强特性</h3> <p>无平台差异</p> <h3 id="json增强特性"><a href="#json增强特性" class="header-anchor">#</a> json增强特性</h3> <table><thead><tr><th>增强字段</th> <th>微信</th> <th>支付宝</th> <th>百度</th> <th>qq</th> <th>头条</th></tr></thead> <tbody><tr><td>packages</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>支持</td> <td>部分支持，无法分包</td></tr></tbody></table> <h2 id="跨平台输出小程序"><a href="#跨平台输出小程序" class="header-anchor">#</a> 跨平台输出小程序</h2> <p>自2.0版本开始，mpx开始支持跨小程序平台编译，不同于常规跨平台框架重新定义一套DSL的方式，mpx支持基于现有平台的源码编译为其他已支持平台的目标代码。跨平台编译能力依赖于mpx的多平台支持，目前mpx已经支持将微信小程序跨平台编译为支付宝、百度、qq和头条小程序。</p> <h3 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h3> <p>如果你是使用<code>mpx init xxx</code>新生成的项目，package.json里script部分有<code>npm run build:cross</code>，直接执行<code>npm run build:cross</code>（watch同理），如果仅需构建某几个平台的，可以修改该script，按已有的格式删除或增添某些某些平台</p> <p>如果你是自行搭建的mpx项目，你只需要进行简单的配置修改，打开项目的webpack配置，找到@mpxjs/webpack-plugin的声明位置，传入mode和srcMode参数即可，示例如下</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">MpxwebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt|jd|web|ios|android)</span>
-  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'ali'</span><span class="token punctuation">,</span>
-  <span class="token comment">// srcMode为mpx编译的源码平台，目前仅支持wx   </span>
-  <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>使用 @mpxjs/cli 创建的项目，可以通过在 <code>npm script</code> 当中定义 <code>targets</code> 来设置编译的目标平台</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 项目 package.json</span>
-<span class="token punctuation">{</span>
-  <span class="token string-property property">&quot;script&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;build:cross&quot;</span><span class="token operator">:</span> <span class="token string">&quot;mpx-cli-service build --targets=wx,ali&quot;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h3 id="跨平台差异抹平"><a href="#跨平台差异抹平" class="header-anchor">#</a> 跨平台差异抹平</h3> <p>为了实现小程序的跨平台编译，我们在编译和运行时做了很多工作以抹平小程序开发中各个方面的跨平台差异</p> <h4 id="模板语法差异抹平"><a href="#模板语法差异抹平" class="header-anchor">#</a> 模板语法差异抹平</h4> <p>对于通用指令/事件处理的差异，mpx提供了统一的编译转换抹平操作；而对于平台组件和组件属性的差异，我们也在力所能及的范围内进行了转换抹平，对于平台差异性过大无法转换的部分会在编译阶段报错指出。</p> <h4 id="组件-页面对象差异抹平"><a href="#组件-页面对象差异抹平" class="header-anchor">#</a> 组件/页面对象差异抹平</h4> <p>不同平台间组件/页面对象的差异主要体现在生命周期上，我们在支持多平台能力时已经将不同平台的生命周期映射到mpx框架的一套内部生命周期中，基于这个统一的映射，不同平台的生命周期差异也得到了抹平。</p> <p>此外，我们还进行了一系列运行时增强来模拟微信平台中提供而其他平台中未提供的能力，例如：</p> <ul><li>在支付宝组件实例中提供了this.triggerEvent方法模拟微信中的自定义组件事件；</li> <li>提供了this.selectComponent/this.selectAllComponents方法模拟微信中获取子组件实例的能力；</li> <li>重写了createSelectorQuery方法抹平了微信/支付宝平台间的使用差异；</li> <li>转换抹平了微信/支付宝中properties定义的差异；</li> <li>利用mpx本身的数据响应能力模拟了微信中的observers/property observer能力等;</li> <li>提供了this.getRelationNodes方法并支持了微信中组件间关系relations的能力</li></ul> <p>对于原生小程序组件的转换，还会进行一些额外的抹平，已兼容一些已有的原生组件库，例如：</p> <ul><li>将支付宝组件中的props数据挂载到this.data中以模拟微信平台中的表现；</li> <li>利用mpx本身的mixins能力模拟微信中的behaviors能力。</li></ul> <p>对于一些无法进行模拟的跨平台差异，会在运行时进行检测并报错指出，例如微信转支付宝时使用moved生命周期等。</p> <h4 id="json配置差异抹平"><a href="#json配置差异抹平" class="header-anchor">#</a> json配置差异抹平</h4> <p>类似于模板语法，会在编译阶段进行转换抹平，无法转换的部分会在编译阶段报错指出。</p> <h4 id="api调用差异抹平"><a href="#api调用差异抹平" class="header-anchor">#</a> api调用差异抹平</h4> <p>对于api调用，mpx提供了一个api调用代理插件来抹平跨平台api调用的差异，使用时需要在项目中安装使用<code>@mpxjs/api-proxy</code>，可以通过两种方式使用</p> <h4 id="方式一-在调用小程序api时统一使用mpx对象进行调用-示例如下"><a href="#方式一-在调用小程序api时统一使用mpx对象进行调用-示例如下" class="header-anchor">#</a> 方式一：在调用小程序api时统一使用mpx对象进行调用，示例如下：</h4> <p>安装插件支持options传入，options说明如下：</p> <table><thead><tr><th>参数名称</th> <th>类型</th> <th>含义</th> <th>是否必填</th> <th>默认值</th> <th>备注</th></tr></thead> <tbody><tr><td><s>platform</s></td> <td><s>Object</s></td> <td><s>各平台之间的转换</s></td> <td><s>否</s></td> <td><s>{ from:'', to:'' }</s></td> <td>已删除</td></tr> <tr><td>usePromise</td> <td>Boolean</td> <td>是否将 api 转化为 promise 格式使用</td> <td>-</td> <td>-</td> <td>-</td></tr> <tr><td><s>exclude</s></td> <td><s>Array(String)</s></td> <td><s>跨平台时不需要转换的 api</s></td> <td>-</td> <td>-</td> <td>已删除</td></tr> <tr><td>whiteList</td> <td>Array(String)</td> <td>强行转化为 promise 格式的 api</td> <td>否</td> <td>[]</td> <td>需要 usePromise 设为 true</td></tr> <tr><td>blackList</td> <td>Array(String)</td> <td>不转换 promise 格式的 api</td> <td>否</td> <td>[]</td> <td>需要 usePromise 设为 true</td></tr> <tr><td>custom</td> <td>Object</td> <td>提供用户在各渠道下自定义api开放能力</td> <td>否</td> <td>[]</td> <td>-</td></tr></tbody></table> <h4 id="普通形式"><a href="#普通形式" class="header-anchor">#</a> 普通形式</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">)</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'标题'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'这是一个弹窗'</span><span class="token punctuation">,</span>
-  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>cancel<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'用户点击取消'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="使用promise形式"><a href="#使用promise形式" class="header-anchor">#</a> 使用promise形式</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">usePromise</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">showActionSheet</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">itemList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>tapIndex<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="用户自定义"><a href="#用户自定义" class="header-anchor">#</a> 用户自定义</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> scanCode <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@test/scanCode'</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">custom</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">web</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      scanCode
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token comment">// 在web下调用的实际是用户自定义部分的scanCode</span>
-mpx<span class="token punctuation">.</span><span class="token function">scanCode</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">onlyFromCamera</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">,</span> <span class="token string">'scanCode, success'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">fail</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">,</span> <span class="token string">'scanCode, fail'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="方式二-直接在-mpxjs-api-proxy导出想使用的方法"><a href="#方式二-直接在-mpxjs-api-proxy导出想使用的方法" class="header-anchor">#</a> 方式二：直接在<code>@mpxjs/api-proxy</code>导出想使用的方法</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 独立使用 支持treesharking能力</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> showModal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
-
-<span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'标题'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'这是一个弹窗'</span><span class="token punctuation">,</span>
-  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'弹框展示成功'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>对于无法转换抹平的api调用会在运行时阶段报错指出。</p> <h4 id="webview-bridge差异抹平"><a href="#webview-bridge差异抹平" class="header-anchor">#</a> webview bridge差异抹平</h4> <p>Mpx支持小程序跨平台后，多个平台的小程序里都有webview组件，webview打开的页面和小程序可以通过API来通信以及调用一些小程序能力，但是各方webview提供的API是不一样的。</p> <p>比如微信是用 wx.miniProgram.navigateTo 来跳转到别的小程序页面，而支付宝里是 my.navigateTo ，那么我们开发H5时候为了让H5能适应各家小程序平台就需要写多份对应逻辑。</p> <p>为解决这个问题，Mpx提供了用于运行在小程序的webview里的H5抹平平台差异的bridge库：@mpxjs/webview-bridge</p> <p>使用方式很简单，不过注意这个库是给H5用的，不是给小程序用的。在H5项目中引入。</p> <p><a href="https://github.com/didi/mpx/tree/master/examples/mpx-webview" target="_blank" rel="noopener noreferrer">使用示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>支持script标签引入和npm引入，标签引入的话，全局实例是mpx（npm模块使用下也鼓励import mpx from '@mpxjs/webview-birdge'），使用就例如 mpx.navigateTo ，能保持整个项目风格完全一致。</p> <p>提供的API如下：<code>navigateTo, navigateBack, switchTab, reLaunch, redirectTo, getEnv, postMessage, getLoadError</code></p> <h2 id="跨平台条件编译"><a href="#跨平台条件编译" class="header-anchor">#</a> 跨平台条件编译</h2> <p>Mpx跨平台编译的原则在于，<code>能转则转，转不了则报错提示</code>，对于无法抹平差异的部分，我们提供了完善的跨平台条件编译机制便于用户处理因平台差异而无法相互转换的部分，也能够用于实现具有平台差异性的业务逻辑。</p> <p>mpx中我们支持了三种维度的条件编译，分别是文件维度，区块维度和代码维度，其中，文件维度和区块维度主要用于处理一些大块的平台差异性逻辑，而代码维度主要用于处理一些局部简单的平台差异。</p> <h3 id="文件维度条件编译"><a href="#文件维度条件编译" class="header-anchor">#</a> 文件维度条件编译</h3> <p>文件维度条件编译简单的来说就是文件为维度进行跨平台差异代码的编写，例如在微信-&gt;支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，这时你可以在相同的位置新建一个map.ali.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的mode来加载对应模块，当mode为ali时，会优先加载map.ali.mpx，反之则会加载map.mpx。</p> <p>文件维度条件编译能够与webpack alias结合使用，对于npm包的文件我们并不方便在原本的文件位置创建.ali的条件编译文件，但我们可以通过webpack alias在相同位置创建一个<code>虚拟的</code>.ali文件，并将其指向项目中的其他文件位置。</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// 对于npm包中的文件依赖</span>
-  <span class="token keyword">import</span> npmModule <span class="token keyword">from</span> <span class="token string">'somePackage/lib/index'</span>
-
-  <span class="token comment">// 配置以下alias后，当mode为ali时，会优先加载项目目录中定义的projectRoot/somePackage/lib/index文件</span>
-  <span class="token comment">// vue.config.js</span>
-  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token string-property property">'somePackage/lib/index.ali'</span><span class="token operator">:</span> <span class="token string">'projectRoot/somePackage/lib/index'</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="区块维度条件编译"><a href="#区块维度条件编译" class="header-anchor">#</a> 区块维度条件编译</h3> <p>在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加<code>mode</code>属性定义该区块的目标平台即可，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--编译mode为ali时使用如下区块--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-<span class="token comment">&lt;!--该区块中的所有代码需采用支付宝的技术标准进行编写--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>支付宝环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token comment">&lt;!--其他编译mode时使用如下区块--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>其他环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="代码维度条件编译"><a href="#代码维度条件编译" class="header-anchor">#</a> 代码维度条件编译</h3> <p>如果只有局部的代码存在跨平台差异，mpx同样支持在代码内使用if/else进行局部条件编译，用户可以在js代码和template插值中访问<code>__mpx_mode__</code>获取当前编译mode，进行平台差异逻辑编写，js代码中使用示例如下。</p> <p>除了 <code>__mpx_mode__</code> 这个默认插值以外，有别的环境变量需要的话可以在mpx.plugin.conf.js里通过defs进行配置。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span><span class="token punctuation">(</span>__mpx_mode__ <span class="token operator">===</span> <span class="token string">'ali'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 执行支付宝环境相关逻辑</span>
-<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 执行其他环境相关逻辑</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>template代码中使用示例如下</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--此处的__mpx_mode__不需要在组件中声明数据，编译时会基于当前编译mode进行替换--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'ali'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>支付宝环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span>其他环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>JSON中的条件编译（注意，这个依赖JSON的动态方案，得通过name=&quot;json&quot;这种方式来编写，其实写的是js代码，最终module.exports导出一个可json化的对象即可）：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-<span class="token keyword">const</span> pages <span class="token operator">=</span> __mpx_mode__ <span class="token operator">===</span> <span class="token string">'wx'</span> <span class="token operator">?</span> <span class="token punctuation">[</span>
-  <span class="token string">'main/xxx'</span><span class="token punctuation">,</span>
-  <span class="token string">'sub/xxx'</span>
-<span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token punctuation">[</span>
-  <span class="token string">'test/xxx'</span>
-<span class="token punctuation">]</span> <span class="token comment">// 可以为不同环境动态书写配置</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">usingComponents</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">aComponents</span><span class="token operator">:</span> <span class="token string">'../xxxxx'</span> <span class="token comment">// 可以打注释 xxx组件</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>样式的条件编译：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*
-  @mpx-if (__mpx_env__ === 'someEvn')
-*/</span>
-  <span class="token comment">/* @mpx-if (__mpx_mode__ === 'wx') */</span>
-  <span class="token selector">.backColor</span> <span class="token punctuation">{</span>
-    <span class="token property">background</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-  <span class="token comment">/*
-    @mpx-elif (__mpx_mode__ === 'qq')
-  */</span>
-  <span class="token selector">.backColor</span> <span class="token punctuation">{</span>
-    <span class="token property">background</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-  <span class="token comment">/* @mpx-endif */</span>
-
-  <span class="token comment">/* @mpx-if (__mpx_mode__ === 'swan') */</span>
-  <span class="token selector">.backColor</span> <span class="token punctuation">{</span>
-    <span class="token property">background</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-  <span class="token comment">/* @mpx-endif */</span>
-  <span class="token selector">.textSize</span> <span class="token punctuation">{</span>
-    <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-<span class="token comment">/*
-  @mpx-else
-*/</span>
-<span class="token selector">.backColor</span> <span class="token punctuation">{</span>
-  <span class="token comment">/* @mpx-if (__mpx_mode__ === 'swan') */</span>
-  <span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
-  <span class="token comment">/* @mpx-else */</span>
-  <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
-  <span class="token comment">/* @mpx-endif */</span>
-<span class="token punctuation">}</span>
-<span class="token comment">/*
-  @mpx-endif
-*/</span>
-</code></pre></div><h3 id="属性维度条件编译"><a href="#属性维度条件编译" class="header-anchor">#</a> 属性维度条件编译</h3> <p>属性维度条件编译允许用户在组件上使用 <code>@</code> 和 <code>|</code> 符号来指定某个节点或属性只在某些平台下有效。</p> <p>对于同一个 button 组件，微信小程序支持 <code>open-type=&quot;getUserInfo&quot;</code>，但是支付宝小程序支持 <code>open-type=&quot;getAuthorize&quot;</code>。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。</p> <p>比如业务中需要通过 button 按钮获取用户信息，虽然可以使用代码维度条件编译来解决，但是增加了很多代码量：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
-  <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'wx' || __mpx_mode__ === 'swan'}}<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">bindgetuserinfo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  获取用户信息
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
-  <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'ali'}}<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAuthorize<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  获取用户信息
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>而用属性维度的编译则方便很多：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
-  <span class="token attr-name">open-type@wx|swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">bindgetuserinfo@wx|swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">open-type@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAuthorize<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">scope@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">onTap@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  获取用户信息
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>属性维度的编译也可以对整个节点进行条件编译，例如只想在支付宝小程序中输出某个节点：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span><span class="token punctuation">&gt;</span></span>this is view<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>需要注意使用上述用法时，节点自身在构建时框架不会对节点属性进行平台语法转换，但对于其子节点，框架并不会继承父级节点 mode，会进行正常跨平台语法转换。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--错误示例--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-// srcMode 为 wx 跨端输出 ali 结果为
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>上述示例为错误写法，假如srcMode为微信小程序，用上述写法构建输出支付宝小程序时，父节点 bindtap 不会被转为 onTap，在支付宝平台执行时事件会无响应。</p> <p>正确写法如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--正确示例--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-// 输出 ali 产物
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>有时开发者期望使用 @ali 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--srcMode为 wx，输出 ali 时，bindtap 会被正常转换为 onTap--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@_ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。</p> <p>有时候我们不仅需要对节点属性进行条件编译，可能还需要对节点标签进行条件编译。</p> <p>为此，我们支持了一个特殊属性 <code>mpxTagName</code>，如果节点存在这个属性，我们会在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">mpxTagName@swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>will be cover-view in swan<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="use-env"><a href="#use-env" class="header-anchor">#</a> 通过 env 实现自定义目标环境的条件编译 </h3> <p>Mpx 支持在以上四种条件编译的基础上，通过自定义 env 的形式实现在不同环境下编译产出不同的代码。</p> <p>实例化 MpxWebpackPlugin 的时候，传入配置 env。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span> <span class="token comment">// srcMode为mpx编译的源码平台，目前仅支持wx</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token string">&quot;didi&quot;</span> <span class="token comment">// env为mpx编译的目标环境，需自定义</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="文件维度条件编译-2"><a href="#文件维度条件编译-2" class="header-anchor">#</a> 文件维度条件编译</h4> <p>微信转支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，而且这个地图组件在不同的目标环境中也有很大的差异，这时你可以在相同的位置新建一个 map.ali.didi.mpx 或 map.ali.qingju.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的 mode 和 env 来加载对应模块，当 mode 为 ali，env 为 didi 时，会优先加载 map.ali.didi.mpx、map.ali.mpx，如果没有定义 env，则会优先加载 map.ali.mpx，反之则会加载 map.mpx。</p> <h4 id="区块维度条件编译-2"><a href="#区块维度条件编译-2" class="header-anchor">#</a> 区块维度条件编译</h4> <p>在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加<code>mode</code>或<code>env</code>属性定义该区块的目标平台即可，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--编译mode为ali且env为didi时使用如下区块，优先级最高是4--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span> <span class="token attr-name">env</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>didi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token comment">&lt;!--编译mode为ali时使用如下区块，优先级是3--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token comment">&lt;!--编译env为didi时使用如下区块，优先级是2--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">env</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>didi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token comment">&lt;!--其他环境，优先级是1--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>注意，如果多个相同的区块写相同的 mode 和 env，默认会用最后一个，如：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块会被忽略<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>默认会用这个区块<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h4 id="代码维度条件编译-2"><a href="#代码维度条件编译-2" class="header-anchor">#</a> 代码维度条件编译</h4> <p>如果在 MpxWebpackPlugin 插件初始化时自定义了 env，你可以访问<code>__mpx_env__</code>获取当前编译env，进行环境差异逻辑编写。使用方法与<code>__mpx_mode__</code>相同。</p> <h4 id="属性维度条件编译-2"><a href="#属性维度条件编译-2" class="header-anchor">#</a> 属性维度条件编译</h4> <p>env 属性维度条件编译与 mode 的用法大致相同，使用 <code>:</code> 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 <code>attr@mode:env:env|mode:env</code>，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 <code>:</code> 前缀，形如 <code>attr@:env</code>。</p> <p>对于同一个 button 组件，微信小程序支持 <code>open-type=&quot;getUserInfo&quot;</code>，但是支付宝小程序支持 <code>open-type=&quot;getAuthorize&quot;</code>。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。</p> <p>如果当前编译的目标平台是 wx，以下写法 open-type 属性将被忽略</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@swan:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>如果当前 env 不是 didi，以下写法 open-type 属性也会被忽略</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>如果只想在 mode 为 wx 且 env 为 didi 或 qingju 的环境下使用 open-type 属性，则可以这样写：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@wx:</span><span class="token namespace">didi:</span>qingju</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>env 属性维度的编译同样支持对整个节点或者节点标签名进行条件编译：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">@:</span>didi</span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">mpxTagName@:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">@:</span>didi</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">bindtap@:</span>didi</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="其他注意事项"><a href="#其他注意事项" class="header-anchor">#</a> 其他注意事项</h3> <ul><li>当目标平台为支付宝时，需要启用支付宝最新的component2编译才能保障框架正常工作，关于component2<a href="https://docs.alipay.com/mini/framework/custom-component-overview" target="_blank" rel="noopener noreferrer">点此查看详情<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>；</li> <li>跨平台源码中自定义组件的标签名不能使用驼峰形式<code>myComponent</code>，请使用横杠形式<code>my-component</code>来书写；</li> <li>生成的目标代码中文件名和文件夹名不能带有<code>@</code>符号，目前媒体文件和原生自定义组件在编译时不会修改文件名，需要重点关注。</li></ul> <h2 id="跨平台输出web"><a href="#跨平台输出web" class="header-anchor">#</a> 跨平台输出web</h2> <p>从2.3.0版本开始，Mpx开始支持将已有项目跨平台输出web平台中运行的能力，目前输出web能力完备，能够支持直接转换大型复杂项目，我们会持续对输出web的能力进行优化，不断的建全更全面的适用范围和开发体验。</p> <h3 id="技术实现"><a href="#技术实现" class="header-anchor">#</a> 技术实现</h3> <p>与小程序平台间的差异相比，web平台和小程序平台间的差异要大很多，小程序相当于是基于web技术的上层封装，所以不同于我们跨平台输出其他小程序平台时以编译转换为主的思路，在输出web时，我们更多地采用了封装的方式来抹平组件/Api和底层环境的差异，与当前大部分的跨平台框架相仿。但与当前大部分跨平台框架以web MVVM框架为base输出到小程序上运行的思路不同，我们是以Mpx小程序增强语法为基础输出到web中运行，前面说过小程序本身是基于web技术进行的实现，小程序-&gt;web的转换在可行性和兼容性上会好一些。</p> <p>在具体实现上，Mpx项目输出到web中运行时在组件化和路由层面都是基于Vue生态实现，所以可以将Mpx的跨端输出产物整合到既有的Vue项目中，或者在条件编译中直接使用Vue语法进行web端的实现。</p> <h3 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h3> <p>使用@mpxjs/cli创建新项目时选择跨平台并选择输出web后，即可生成可输出web的示例项目，运行<code>npm run build:web</code>，就会在dist/web下输出构建后的web项目，并启动静态服务预览运行。</p> <h3 id="支持范围"><a href="#支持范围" class="header-anchor">#</a> 支持范围</h3> <p>目前对输出web的通用能力支持已经非常完备，下列表格中显示了当前版本中已支持的能力范围</p> <h4 id="模板指令"><a href="#模板指令" class="header-anchor">#</a> 模板指令</h4> <table><thead><tr><th style="text-align:left;">指令名称</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">Mustache数据绑定</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:for</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:for-item</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:for-index</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:key</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:if</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:elif</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:else</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:model</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:model-prop</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:model-event</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:model-value-path</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:model-filter</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:class</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:style</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:ref</td> <td>是</td></tr> <tr><td style="text-align:left;">wx:show</td> <td>是</td></tr></tbody></table> <h4 id="事件绑定方式"><a href="#事件绑定方式" class="header-anchor">#</a> 事件绑定方式</h4> <table><thead><tr><th style="text-align:left;">绑定方式</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">bind</td> <td>是</td></tr> <tr><td style="text-align:left;">catch</td> <td>是</td></tr> <tr><td style="text-align:left;">capture-bind</td> <td>是</td></tr> <tr><td style="text-align:left;">capture-catch</td> <td>是</td></tr></tbody></table> <h4 id="事件名称"><a href="#事件名称" class="header-anchor">#</a> 事件名称</h4> <table><thead><tr><th style="text-align:left;">事件名称</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">tap</td> <td>是</td></tr> <tr><td style="text-align:left;">longpress</td> <td>是</td></tr> <tr><td style="text-align:left;">longtap</td> <td>是</td></tr></tbody></table> <p>web同名事件默认全部支持，已支持组件的特殊事件默认为支持，不支持的情况下会在编译时抛出异常</p> <h4 id="基础组件"><a href="#基础组件" class="header-anchor">#</a> 基础组件</h4> <table><thead><tr><th style="text-align:left;">组件名称</th> <th>是否支持</th> <th>说明</th></tr></thead> <tbody><tr><td style="text-align:left;">audio</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">block</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">button</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">canvas</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">checkbox</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">checkbox-group</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">cover-view</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">form</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">image</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">input</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">movable-area</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">movable-view</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">navigator</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">picker</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">picker-view</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">progress</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">radio</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">radio-group</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">rich-text</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">scroll-view</td> <td>是</td> <td>scroll-view 输出 web 底层滚动依赖 <a href="https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html" target="_blank" rel="noopener noreferrer">BetterScroll<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 实现，支持额外传入以下属性： <br><br><code>scroll-options</code>: object <br>可重写 BetterScroll 初始化基本配置<br>若出现无法滚动，可尝试手动传入 <code>{ observeDOM: true }</code> <br><br> <code>update-refresh</code>: boolean <br>Vue updated 钩子函数触发时，可用于重新计算 BetterScroll<br><br>tips: 当使用下拉刷新相关属性时，由于 Vue 数据响应机制的限制，在 web 侧可能出现下拉组件状态无法复原的问题，可尝试在 <code>refresherrefresh</code> 事件中，手动将 refresher-triggered 属性值设置为 true</td></tr> <tr><td style="text-align:left;">swiper</td> <td>是</td> <td>swiper 输出 web 底层滚动依赖 <a href="https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html" target="_blank" rel="noopener noreferrer">BetterScroll<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 实现，支持额外传入以下属性： <br><br><code>scroll-options</code>: object <br>可重写 BetterScroll 初始化基本配置<br>当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 <code>{ eventPassthrough: vertical }</code>，反之可将 eventPassthrough 设置为 <code>horizontal</code></td></tr> <tr><td style="text-align:left;">swiper-item</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">switch</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">slider</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">text</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">textarea</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">video</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">view</td> <td>是</td> <td></td></tr> <tr><td style="text-align:left;">web-view</td> <td>是</td> <td></td></tr></tbody></table> <p>在项目的app.json 中配置 &quot;style&quot;: &quot;v2&quot;启用新版的组件样式，涉及的组件有 button icon radio checkbox switch slider在输出web时也与小程序保持了一致</p> <h4 id="生命周期"><a href="#生命周期" class="header-anchor">#</a> 生命周期</h4> <table><thead><tr><th style="text-align:left;">生命周期名称</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">onLaunch</td> <td>是</td></tr> <tr><td style="text-align:left;">onLoad</td> <td>是</td></tr> <tr><td style="text-align:left;">onReady</td> <td>是</td></tr> <tr><td style="text-align:left;">onShow</td> <td>是</td></tr> <tr><td style="text-align:left;">onHide</td> <td>是</td></tr> <tr><td style="text-align:left;">onUnload</td> <td>是</td></tr> <tr><td style="text-align:left;">onError</td> <td>是</td></tr></tbody></table> <p>onServerPrefetch｜是
-created|是
-attached|是
-ready|是
-detached|是
-updated|是
-serverPrefetch|是</p> <h4 id="应用级事件"><a href="#应用级事件" class="header-anchor">#</a> 应用级事件</h4> <table><thead><tr><th style="text-align:left;">应用级事件名称</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">onPageNotFound</td> <td>是</td></tr> <tr><td style="text-align:left;">onPageScroll</td> <td>是</td></tr> <tr><td style="text-align:left;">onPullDownRefresh</td> <td>是</td></tr> <tr><td style="text-align:left;">onReachBottom</td> <td>是</td></tr> <tr><td style="text-align:left;">onResize</td> <td>是</td></tr> <tr><td style="text-align:left;">onTabItemTap</td> <td>是</td></tr></tbody></table> <h4 id="组件配置"><a href="#组件配置" class="header-anchor">#</a> 组件配置</h4> <table><thead><tr><th style="text-align:left;">配置项</th> <th>支持度</th></tr></thead> <tbody><tr><td style="text-align:left;">properties</td> <td>部分支持，observer不支持，请使用watch代替</td></tr> <tr><td style="text-align:left;">data</td> <td>支持</td></tr> <tr><td style="text-align:left;">watch</td> <td>支持</td></tr> <tr><td style="text-align:left;">computed</td> <td>支持</td></tr> <tr><td style="text-align:left;">relations</td> <td>支持</td></tr> <tr><td style="text-align:left;">methods</td> <td>支持</td></tr> <tr><td style="text-align:left;">mixins</td> <td>支持</td></tr> <tr><td style="text-align:left;">pageLifetimes</td> <td>支持</td></tr> <tr><td style="text-align:left;">observers</td> <td>不支持，请使用watch代替</td></tr> <tr><td style="text-align:left;">behaviors</td> <td>不支持，请使用mixins代替</td></tr></tbody></table> <h4 id="组件api"><a href="#组件api" class="header-anchor">#</a> 组件API</h4> <table><thead><tr><th style="text-align:left;">api名称</th> <th>支持度</th></tr></thead> <tbody><tr><td style="text-align:left;">triggerEvent</td> <td>支持</td></tr> <tr><td style="text-align:left;">$nextTick</td> <td>支持</td></tr> <tr><td style="text-align:left;">createSelectorQuery/selectComponent</td> <td>支持</td></tr></tbody></table> <h4 id="全局api"><a href="#全局api" class="header-anchor">#</a> 全局API</h4> <table><thead><tr><th style="text-align:left;">api名称</th> <th>支持度</th></tr></thead> <tbody><tr><td style="text-align:left;">navigateTo</td> <td>支持</td></tr> <tr><td style="text-align:left;">navigateBack</td> <td>支持</td></tr> <tr><td style="text-align:left;">redirectTo</td> <td>支持</td></tr> <tr><td style="text-align:left;">request</td> <td>支持</td></tr> <tr><td style="text-align:left;">connectSocket</td> <td>支持</td></tr> <tr><td style="text-align:left;">SocketTask</td> <td>支持</td></tr> <tr><td style="text-align:left;">EventChannel</td> <td>支持</td></tr> <tr><td style="text-align:left;">createSelectorQuery</td> <td>支持</td></tr> <tr><td style="text-align:left;">base64ToArrayBuffer</td> <td>支持</td></tr> <tr><td style="text-align:left;">arrayBufferToBase64</td> <td>支持</td></tr> <tr><td style="text-align:left;">nextTick</td> <td>支持</td></tr> <tr><td style="text-align:left;">set</td> <td>支持</td></tr> <tr><td style="text-align:left;">setNavigationBarTitle</td> <td>支持</td></tr> <tr><td style="text-align:left;">setNavigationBarColor</td> <td>支持</td></tr> <tr><td style="text-align:left;">setStorage</td> <td>支持</td></tr> <tr><td style="text-align:left;">setStorageSync</td> <td>支持</td></tr> <tr><td style="text-align:left;">getStorage</td> <td>支持</td></tr> <tr><td style="text-align:left;">getStorageSync</td> <td>支持</td></tr> <tr><td style="text-align:left;">getStorageInfo</td> <td>支持</td></tr> <tr><td style="text-align:left;">getStorageInfoSync</td> <td>支持</td></tr> <tr><td style="text-align:left;">removeStorage</td> <td>支持</td></tr> <tr><td style="text-align:left;">removeStorageSync</td> <td>支持</td></tr> <tr><td style="text-align:left;">clearStorage</td> <td>支持</td></tr> <tr><td style="text-align:left;">clearStorageSync</td> <td>支持</td></tr> <tr><td style="text-align:left;">getSystemInfo</td> <td>支持</td></tr> <tr><td style="text-align:left;">getSystemInfoSync</td> <td>支持</td></tr> <tr><td style="text-align:left;">showModal</td> <td>支持</td></tr> <tr><td style="text-align:left;">showToast</td> <td>支持</td></tr> <tr><td style="text-align:left;">hideToast</td> <td>支持</td></tr> <tr><td style="text-align:left;">showLoading</td> <td>支持</td></tr> <tr><td style="text-align:left;">hideLoading</td> <td>支持</td></tr> <tr><td style="text-align:left;">onWindowResize</td> <td>支持</td></tr> <tr><td style="text-align:left;">offWindowResize</td> <td>支持</td></tr> <tr><td style="text-align:left;">createAnimation</td> <td>支持</td></tr></tbody></table> <h4 id="json配置"><a href="#json配置" class="header-anchor">#</a> JSON配置</h4> <table><thead><tr><th style="text-align:left;">配置项</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">backgroundColor</td> <td>是</td></tr> <tr><td style="text-align:left;">backgroundTextStyle</td> <td>是</td></tr> <tr><td style="text-align:left;">disableScroll</td> <td>是</td></tr> <tr><td style="text-align:left;">enablePullDownRefresh</td> <td>是</td></tr> <tr><td style="text-align:left;">onReachBottomDistance</td> <td>是</td></tr> <tr><td style="text-align:left;">packages</td> <td>是</td></tr> <tr><td style="text-align:left;">pages</td> <td>是</td></tr> <tr><td style="text-align:left;">navigationBarBackgroundColor</td> <td>是</td></tr> <tr><td style="text-align:left;">navigationBarTextStyle</td> <td>是</td></tr> <tr><td style="text-align:left;">navigationBarTitleText</td> <td>是</td></tr> <tr><td style="text-align:left;">networkTimeout</td> <td>是</td></tr> <tr><td style="text-align:left;">subpackages</td> <td>是</td></tr> <tr><td style="text-align:left;">tabBar</td> <td>是</td></tr> <tr><td style="text-align:left;">usingComponents</td> <td>是</td></tr></tbody></table> <h4 id="拓展能力"><a href="#拓展能力" class="header-anchor">#</a> 拓展能力</h4> <table><thead><tr><th style="text-align:left;">能力</th> <th>是否支持</th></tr></thead> <tbody><tr><td style="text-align:left;">fetch</td> <td>是</td></tr> <tr><td style="text-align:left;">i18n</td> <td>是</td></tr></tbody></table> <h4 id="小程序其他原生能力"><a href="#小程序其他原生能力" class="header-anchor">#</a> 小程序其他原生能力</h4> <table><thead><tr><th style="text-align:left;">能力</th> <th>支持度</th></tr></thead> <tbody><tr><td style="text-align:left;">wxs</td> <td>支持</td></tr> <tr><td style="text-align:left;">animation</td> <td>支持组件的animation属性，支持所有animation对象方法(export、step、width、height、rotate、scale、skew、translate等等)</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/async-subpackage.html" class="prev">
-        分包异步化
-      </a></span> <span class="next"><a href="/guide/advance/i18n.html">
-        国际化i18n
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/73.171571e4.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/plugin.html b/docs-vuepress/.vuepress/dist/guide/advance/plugin.html
deleted file mode 100644
index 19aa35df50..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/plugin.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>小程序插件 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/74.3d5cfaba.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" aria-current="page" class="active sidebar-link">小程序插件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="小程序插件"><a href="#小程序插件" class="header-anchor">#</a> 小程序插件</h1> <p>插件，是可被添加到小程序内直接使用的功能组件，是对一组 js 接口、自定义组件或页面的封装，。开发者可以像开发小程序一样开发一个插件，供其他小程序使用。同时，小程序开发者可直接在小程序内使用插件，无需重复开发，但是在使用第三那个插件时，无法看到插件的代码。插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用。</p> <p>开发小程序插件，大致要经过 开通插件功能，填写开发信息，提交审,发布，管理插件使用申请。同时在原生小程序使用插件，要先发出插件申请，等待使用申请通过，插件所有者还可以进行拒绝。
-原生小程序开发插件请移步：</p> <ul><li><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html" target="_blank" rel="noopener noreferrer">微信小程序插件开发<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://opendocs.alipay.com/mini/plugin/create-plugin" target="_blank" rel="noopener noreferrer">支付宝小程序插件开发<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>新建插件类型的项目后，如果创建示例项目，则项目中将包含三个目录：</p> <ul><li>plugin 目录：插件代码目录。</li> <li>miniprogram 目录：放置一个小程序，用于调试插件。</li> <li>doc 目录：用于放置插件开发文档。</li></ul> <p>，插件会同时有多个线上版本，由使用插件的小程序决定具体使用的版本号。</p> <h3 id="如何编写一个插件"><a href="#如何编写一个插件" class="header-anchor">#</a> 如何编写一个插件</h3> <p>推荐使用 mpx 官方脚手架 @mpxjs/cli 创建一个小程序插件项目来快速的进入插件开发阶段，首先全局安装 @mpxjs/cli</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">npm</span> i <span class="token parameter variable">-g</span> @mpxjs/cli
-</code></pre></div><p>然后使用 cli 初始化项目</p> <div class="language-sh extra-class"><pre class="language-sh"><code>mpx create <span class="token operator">&lt;</span>project-name<span class="token operator">&gt;</span>
-? 请选择小程序项目所属平台（目前仅微信下支持跨平台输出） wx
-? 是否需要跨小程序平台 No
-? 是否需要使用小程序云开发能力 No
-? 是否是个插件项目?（不清楚请选 No ！什么是插件项目请看微信官方文档！） Yes
-? 是否需要typescript No
-? 项目描述 A mpx project
-? 请输入小程序的Appid touristappid
-</code></pre></div><p><strong>文件目录</strong></p> <div class="language- extra-class"><pre class="language-text"><code>  src
-  |-- miniprogram // 目录：放置一个小程序，用于调试插件。
-  |   --pages
-  |   --app.mpx // 引入插件调试
-  |-- plugin // 目录：插件代码目录
-  |   --components // 插件组件
-  |     -- list.mpx // 插件提供的列表组件
-  |   --plugin.json // 插件配置文件
-</code></pre></div><p>我们在 plugin/components/list.mpx 中开发插件中的列表组件，开发完成后，在plugin.json中我们向使用者小程序开放的所有自定义组件、页面和 js 接口，格式如下：</p> <p><strong>代码示例：</strong></p> <div class="language-html extra-class"><pre class="language-html"><code>{
-  &quot;publicComponents&quot;: {
-    &quot;list&quot;: &quot;./components/list&quot; // 使用mpx 中的webpack 路径引入规范
-  },
-  &quot;pages&quot;: {
-    &quot;hello-page&quot;: &quot;./pages/hello-page&quot;
-  }
-}
-</code></pre></div><p>运行 <strong>npm run build/serve</strong> 构建小程序产物，在 dist 文件夹下，生成最终的小程序插件产物，使用微信开发者工具，打开代码片段菜单栏，选择插件模式，打开 dist 文件夹。</p> <p>我们可以像小程序一样预览和上传，但插件没有体验版，同时我们通常将 miniprogram 下的代码当做使用插件的小程序代码，来进行插件的调试和测试。</p> <p>在开发完插件之后，我们可以上传插件代码，在小程序管理后台进行提交发布审核，审核通过后，就可以提供给第三方小程序使用我们的插件了。</p> <p>使用 mpx 开发插件的优势相似于使用 mpx 开发小程序项目，可以使用 mpx 的各种增强特性以及跨平台输出的特性，提高开发效率和插件性能。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/ability-compatible.html" class="prev">
-        原生能力兼容
-      </a></span> <span class="next"><a href="/guide/advance/custom-output-path.html">
-        自定义路径
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/74.3d5cfaba.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/progressive.html b/docs-vuepress/.vuepress/dist/guide/advance/progressive.html
deleted file mode 100644
index 7dc46cdf63..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/progressive.html
+++ /dev/null
@@ -1,135 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>原生渐进迁移 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/75.093d716c.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" aria-current="page" class="active sidebar-link">原生渐进迁移</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/progressive.html#原生接入" class="sidebar-link">原生接入</a></li><li class="sidebar-sub-header"><a href="/guide/advance/progressive.html#原生page支持" class="sidebar-link">原生page支持</a></li><li class="sidebar-sub-header"><a href="/guide/advance/progressive.html#原生导出" class="sidebar-link">原生导出</a></li></ul></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="原生渐进迁移"><a href="#原生渐进迁移" class="header-anchor">#</a> 原生渐进迁移</h1> <p><strong>已有项目</strong> 期望接入 Mpx，可根据项目或人力情况选择如何迁移，Mpx 不要求用户一次性用上框架的所有东西。</p> <ol><li>项目初始期：可以考虑一次性转为 Mpx，此时迁移成本比较低</li> <li>项目成熟期：若人力有限，可选择逐步将原生小程序转为Mpx，而且 <strong><code>不需要对原有代码做全局重写</code></strong>。可参考此demo：<a href="https://github.com/didi/mpx/tree/master/examples/mpx-progressive" target="_blank" rel="noopener noreferrer">Mpx渐进接入demo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。
-<ul><li>可以保持原有代码不变，新的组件、页面期望使用 Mpx 某些特性时才引入 Mpx。（推荐新模块引 Mpx，老模块逐步迁移 Mpx）</li> <li>用 Mpx 编写新的页面、组件，再局部导出对应的页面、组件，反向应用到现有的原生小程序项目中。见<a href="#%E5%AF%BC%E5%87%BA%E5%8E%9F%E7%94%9F">导出原生</a>一节。(建议优先考虑老项目渐进改为 Mpx，而不是反向 Mpx 输出原生小程序的模式)</li></ul></li></ol> <h2 id="原生接入"><a href="#原生接入" class="header-anchor">#</a> 原生接入</h2> <p>有些时候，我们需要在<code>Mpx</code>工程中使用原生小程序组件:</p> <ul><li>通过<code>npm</code>引用安装第三包</li> <li>将第三方包源码拷贝到本地<code>src</code>目录下</li></ul> <blockquote><p>注：Mpx并不限制第三方包的格式。开发者可以自己参考小程序官方的<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/trdparty.html" target="_blank" rel="noopener noreferrer">开发第三方自定义组件<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <h3 id="原理"><a href="#原理" class="header-anchor">#</a> 原理</h3> <p>根据<code>unsingComponents</code>中设定的路径，<code>Mpx</code>会去查找包入口的js文件。然后提取入口文件所在的<strong>目录</strong>中的<code>js</code> <code>json</code> <code>wxss</code> <code>wxml</code>进行编译</p> <p>编译带来的好处是，常规的拷贝操作，会造成组件内部的依赖缺失，以及冗余代码被打包。而执行了编译，使得<code>Mpx</code>可以精确的收集依赖，这表现在：</p> <ul><li><code>js</code>文件中的依赖也会被打包，没有被加载的依赖库不会打包，减小体积</li> <li><code>json</code>文件的<code>usingComponents</code>会被解析，因此原生组件内部可以再引用其他原生组件，甚至是mpx组件</li> <li><code>wxss</code>中引用外部样式</li> <li><code>wxml</code>中的图片资源会被打包</li></ul> <blockquote><p>例如:使用第三方组件库时，很多组件可能并未使用，如果按照官方给出的组件库使用方式，会将整个组件库放进项目。<br>
-而采用Mpx这种方式则只会引入使用了的组件，所以如果你喜欢vant的按钮，iview的输入框，ColorUI的布局，欢迎尝试mpx。<br>
-（本段内容具有时效性，未来微信可能会有优化，毕竟一开始微信连npm都不支持）</p></blockquote> <h3 id="例子"><a href="#例子" class="header-anchor">#</a> 例子</h3> <p><strong>文件目录</strong></p> <div class="language- extra-class"><pre class="language-text"><code>node_modules
-|-- npm-a-wx-component // npm安装
-|   --package.json
-|   --src
-|     --index.js
-|     --index.json
-|     --index.wxss
-|     --index.wxml
-|-- npm-b-wx-component // npm安装
-|   --package.json
-|   --src
-|     --index.js
-|     --index.json
-|     --index.wxss
-|     --index.wxml
-component
-│-- container.mpx 
-│-- com-a.mpx 
-|-- src-wx-component // 手动拷贝
-|  --index.js
-|  --index.json
-|  --index.wxss
-|  --index.wxml
-
-</code></pre></div><p><strong>container.mpx</strong></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- mpx组件 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>com-a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>com-a</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- npm安装的原生组件 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>npm-a-wx-component</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>npm-a-wx-component</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- 手动拷贝到工程的原生组件 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>src-wx-component</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>src-wx-component</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;com-a&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./com-a&quot;</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;npm-a-wx-component&quot;</span><span class="token operator">:</span> <span class="token string">&quot;npm-a-wx-component&quot;</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;src-wx-component&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./src-wx-component&quot;</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>node_modules/npm-a-wx-component/src/index.wxml</strong></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>this is a native component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- 原生组件内部使用原生组件 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>npm-b-wx-component</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>npm-b-wx-component</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><strong>node_modules/npm-a-wx-component/src/index.json</strong></p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
-  <span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;npm-b-wx-component&quot;</span><span class="token operator">:</span> <span class="token string">&quot;npm-b-wx-component&quot;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="原生page支持"><a href="#原生page支持" class="header-anchor">#</a> 原生page支持</h2> <p>原生自定义组件的支持已经基本能保证第三方 UI 库和 Mpx 的完美结合，但如果是用户存在已经开发好的小程序，在后续的迭代中发现了 Mpx 想使用，就需要用户手工将4个文件变成 Mpx 文件，这不够友好。</p> <p>Mpx 提供了对原生页面的支持，允许项目中存在原生小程序文件（wxml,js,json,wxss）和 Mpx 文件，两者可以混合使用，通过 webpack 的构建将两者完美混合在一起生成最终的 dist。</p> <p>使用方式和组件相似。</p> <h2 id="原生导出"><a href="#原生导出" class="header-anchor">#</a> 原生导出</h2> <p>通过导出原生能力，你可以将一个 Mpx 项目融回到原生小程序项目中。有两种做法：</p> <ul><li>一是局部导出部分页面、组件</li> <li>二是完整导出一个 Mpx 项目。</li></ul> <h3 id="导出部分页面-组件"><a href="#导出部分页面-组件" class="header-anchor">#</a> 导出部分页面/组件</h3> <p>使用 Mpx 开发的页面/组件也可以局部导出为纯粹的普通的原生小程序页面/组件，整合到已有的原生小程序中。</p> <ol><li>修改 webpack config 中 entry 一项，将 app 改为对应的页面/组件即可。</li></ol> <p>在路径后追加 ?isPage 来声明独立页面构建，构建产物为该页面的独立原生代码,在路径后追加 ?isComponent 来声明独立组件构建，构建产物为该组件的独立原生代码。</p> <p>请参考下面的例子，<code>注意resolve时候最后的query不可以省略，一定要按正确的类型声明这是一个组件or页面。</code></p> <p>例子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// </span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseWebpackConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'main-compile'</span><span class="token punctuation">,</span>
-  <span class="token comment">// entry point of our application</span>
-  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 此处以mpx脚手架生成的项目为例</span>
-    
-    <span class="token comment">// before</span>
-    <span class="token comment">// app: resolveSrc('app.mpx')</span>
-    
-    <span class="token comment">// after，这里&quot;pages/dindex&quot;代表将原页面导出到output目录下的pages目录，文件名改为dindex.*</span>
-    <span class="token string-property property">'pages/dindex'</span><span class="token operator">:</span> <span class="token function">resolveSrc</span><span class="token punctuation">(</span><span class="token string">'./pages/index.mpx?isPage'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// ?后标识导出类型</span>
-    <span class="token string-property property">'components/dlist'</span><span class="token operator">:</span> <span class="token function">resolveSrc</span><span class="token punctuation">(</span><span class="token string">'./components/list.mpx?isComponent'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><ol start="2"><li>执行 webpack 打包命令</li> <li>拷贝打包后 dist 里所有文件到原生微信小程序项目根目录即可正常工作。</li></ol> <h3 id="完整导出"><a href="#完整导出" class="header-anchor">#</a> 完整导出</h3> <p>举例：假如我们使用 Mpx 开发了一个完整的项目，这个项目可能包含多个页面，这些页面组合完成一个完整的功能。一般可能是公共需求，比如登录/用户中心等公共模块</p> <p>如果其它接入方想复用这一公共模块，考虑有以下两种情形</p> <ul><li>接入方也是 Mpx 框架开发的项目，直接迁移</li> <li>接入方是原生开发，这时我们希望能将整个项目完整导出成原生，并让接入方顺利使用。</li></ul> <blockquote><p>其实观察下 Mpx 项目的打包结构，结构是非常简单的，页面/组件都很规矩地放在对应文件夹里的，所以删掉app.json/app.js/app.wxss/project.config.json几个文件后直接整个拷贝即可。</p></blockquote> <p>完整导出整个项目的做法可以是这样：</p> <ol><li><p>确认页面路径不要冲突，一般这种公共模块项目，路径上就不要占据<code>/pages/index/index</code>，页面路径Mpx是不会修改的，所以定一个<code>/pages/{模块名}/{页面名}</code>就好。</p></li> <li><p>app.*的内容都要删掉的，所以全局样式都应该写在独立的文件中（wxss），全局配置有什么特殊的要告知接入方（json），因为App.js会被舍弃，所以入口js要抽出来(js)。</p></li> <li><p>如果有要导出的入口文件，需要给output增加配置：</p></li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.conf</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">app</span><span class="token operator">:</span> <span class="token function">resolveSrc</span><span class="token punctuation">(</span><span class="token string">'app.mpx'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">index</span><span class="token operator">:</span> <span class="token function">resolveSrc</span><span class="token punctuation">(</span><span class="token string">'index.js'</span><span class="token punctuation">)</span> <span class="token comment">// 导出的入口文件，若没有可不写</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">libraryTarget</span><span class="token operator">:</span> <span class="token string">'commonjs2'</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">libraryExport</span><span class="token operator">:</span> <span class="token string">'default'</span> <span class="token comment">// 若export default导出需要写这个,module.exports可省略</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token comment">// ... 略</span>
-<span class="token punctuation">}</span>
-</code></pre></div><ol start="4"><li>整个复制进<strong>接入方</strong>的项目里，注册对应的页面，然后就可以正常使用了！</li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/image-process.html" class="prev">
-        图像资源处理
-      </a></span> <span class="next"><a href="/guide/advance/ability-compatible.html">
-        原生能力兼容
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/75.093d716c.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/provide-inject.html b/docs-vuepress/.vuepress/dist/guide/advance/provide-inject.html
deleted file mode 100644
index b6d04c03a9..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/provide-inject.html
+++ /dev/null
@@ -1,200 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>依赖注入（Provide/Inject） | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/76.50d84c61.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" aria-current="page" class="active sidebar-link">依赖注入（Provide/Inject）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/provide-inject.html#适用场景" class="sidebar-link">适用场景</a></li><li class="sidebar-sub-header"><a href="/guide/advance/provide-inject.html#provide-提供" class="sidebar-link">Provide 提供</a></li><li class="sidebar-sub-header"><a href="/guide/advance/provide-inject.html#inject-注入" class="sidebar-link">Inject 注入</a></li><li class="sidebar-sub-header"><a href="/guide/advance/provide-inject.html#避免注入名潜在冲突" class="sidebar-link">避免注入名潜在冲突</a></li><li class="sidebar-sub-header"><a href="/guide/advance/provide-inject.html#ts-类型支持" class="sidebar-link">TS 类型支持</a></li><li class="sidebar-sub-header"><a href="/guide/advance/provide-inject.html#跨端差异" class="sidebar-link">跨端差异</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="依赖注入-provide-inject"><a href="#依赖注入-provide-inject" class="header-anchor">#</a> 依赖注入（Provide/Inject）</h1> <h2 id="适用场景"><a href="#适用场景" class="header-anchor">#</a> 适用场景</h2> <p>通常情况下，从父组件向子组件传递数据时，我们会使用 props 向下传递。如果在一颗组件层级嵌套很深的组件树中，某个深层的子组件依赖一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链路逐级传递下去，这就是 <strong>prop 逐级透传（prop-drilling）</strong> 问题。</p> <p>使用 <code>provide</code> 和 <code>inject</code> 可以帮助我们解决这一麻烦问题：一个父组件相对于其所有的后代组件，会作为<strong>依赖提供者</strong>。任何后代的组件树，无论层级有多深，都可以<strong>注入</strong>由父组件提供给整条链路的依赖。</p> <p><img src="https://s3-gz01.didistatic.com/packages-mait/img/bLipGWmlcm1732166788438.png" alt="组件间 provide-inject 示意图"></p> <h2 id="provide-提供"><a href="#provide-提供" class="header-anchor">#</a> Provide 提供</h2> <h3 id="组合式语法"><a href="#组合式语法" class="header-anchor">#</a> 组合式语法</h3> <p>在组合式语法中，需要使用到 <code>provide()</code> 函数，<code>provide()</code> 函数接收两个必填参数：</p> <ol><li>第一个参数表示<strong>注入名</strong>，是一个字符串或者 <code>Symbol</code>。后代组件会用注入名来查找期望注入的值，一个组件可以多次调用 <code>provide()</code>，使用不同的注入名，注入不同的依赖值。使用 <code>Symbol</code> 作为注入名时，只能使用组合式语法而非选项式语法。</li> <li>第二个参数表示<strong>提供值</strong>，值可以是任意类型，包括响应式的状态，比如一个 <code>ref</code>、<code>reactive</code> 或者 <code>computed</code> 计算值。</li></ol> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token operator">&lt;</span>script setup<span class="token operator">&gt;</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> computed<span class="token punctuation">,</span> provide<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token comment">// 静态数据</span>
-<span class="token function">provide</span><span class="token punctuation">(</span><span class="token comment">/* 注入名 */</span> <span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token comment">/* 值 */</span> <span class="token string">'hello!'</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 使用 Symbol 作为注入名</span>
-<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-<span class="token function">provide</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token string">'hello!'</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 响应式数据</span>
-<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> double <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
-<span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">'count'</span><span class="token punctuation">,</span> count<span class="token punctuation">)</span>
-<span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">'double'</span><span class="token punctuation">,</span> double<span class="token punctuation">)</span>
-
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><h3 id="选项式语法"><a href="#选项式语法" class="header-anchor">#</a> 选项式语法</h3> <p>选项式语法的 <code>setup()</code> 中，用法和组合式 API 一致。另外针对选项式语法，我们也提供了 <code>provide</code> 选项，它是<strong>一个对象或返回一个对象的函数</strong>。</p> <p>对于 <code>provide</code> 对象上的每一个属性，后代组件会用其 key 为注入名查找期望注入的值，属性的值就是要提供的数据。</p> <p>如果我们需要提供依赖当前组件实例的状态 (比如在 <code>data</code> 属性中定义的数据)，那么需要使用函数形式的 <code>provide</code> 选项。需要注意的是，这 <strong>并不会</strong> 使注入保持响应性，如果需要保证注入方和供给方之间的响应性链接，我们需要使用 <code>computed()</code> 函数提供一个计算属性。</p> <div class="language-ts extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-ts"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  data<span class="token operator">:</span> <span class="token punctuation">{</span>
-    count<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token comment">// 1. 静态数据可以选择直接使用对象形式</span>
-  provide<span class="token operator">:</span> <span class="token punctuation">{</span>
-    message<span class="token operator">:</span> <span class="token string">'hello'</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token comment">// 2. 选择使用函数的形式，可以访问到 `this`</span>
-  <span class="token function">provide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      count<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count
-      <span class="token comment">// 显式提供一个计算属性</span>
-      message<span class="token operator">:</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><h3 id="应用级顶层-provide"><a href="#应用级顶层-provide" class="header-anchor">#</a> 应用级顶层 provide</h3> <p>前面介绍的是在一个组件中提供依赖，我们还可以在整个应用层面提供依赖，这样整个应用中所有组件都可以使用。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// 应用层 provide</span>
-  <span class="token function">provide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">'appMessage'</span><span class="token operator">:</span> <span class="token string">'provide from App scope!'</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="inject-注入"><a href="#inject-注入" class="header-anchor">#</a> Inject 注入</h2> <h3 id="组合式语法"><a href="#组合式语法" class="header-anchor">#</a> 组合式语法</h3> <p><code>inject()</code> 函数最多接收三个参数：</p> <ul><li>第一个参数必填，表示<strong>注入名</strong>，字符串类型。</li> <li>第二个参数可选，表示<strong>默认值</strong>。
-<ul><li>如果在注入一个值时不确定是否有提供者，那么应该声明一个默认值。如果既没有提供者也没有默认值，则会抛出一个运行时警告。</li></ul></li> <li>第三个参数可选，表示<strong>是否将默认值视为工厂函数</strong>，布尔类型。
-<ul><li>某些场景下，默认值可能需要通过调用一个函数或初始化一个类来生成，或者某些非基础类型数据创建开销比较大，请使用工厂函数来创建默认值。</li></ul></li></ul> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token operator">&lt;</span>script setup<span class="token operator">&gt;</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> inject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token comment">// 注入 message 依赖</span>
-<span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">)</span>
-<span class="token comment">// 创建默认值</span>
-<span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token string">'default value'</span><span class="token punctuation">)</span>
-<span class="token comment">// 使用工厂函数创建默认值</span>
-<span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'key'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">new</span> <span class="token class-name">ExpensiveClass</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>如果提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值。这使得注入方能够通过 ref 对象和提供方保持响应性链接。</p> <h3 id="选项式语法"><a href="#选项式语法" class="header-anchor">#</a> 选项式语法</h3> <p>选项式语法的 <code>setup()</code> 中，用法和组合式 API 一致。另外针对选项式语法，我们也提供了 <code>inject</code> 选项，它是<strong>一个数组或一个对象</strong>。</p> <ol><li><strong>数组</strong>形式使用。数组中的每一项对应一个注入名，注入的属性会以同名的 key 暴露到组件实例上。如下示例中，注入名 <code>&quot;message&quot;</code> 在注入后以 <code>this.message</code> 的形式暴露。另外，<code>inject</code> 会在组件自身的状态<strong>之前</strong>被解析，意味着你可以在 <code>data()</code> 中访问到注入的属性。</li></ol> <div class="language-ts extra-class"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br></div><pre class="language-ts"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// 数组形式使用 `inject` 选项</span>
-  inject<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token string">'count'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 可以在 `data()` 中访问到注入的属性</span>
-      fullMessage<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">,</span>
-      fullCount<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><ol start="2"><li><strong>对象</strong>形式使用。相比数组形式，对象形式支持注入<strong>别名</strong>和<strong>默认值</strong>。如下示例，通过 <code>from</code> 属性指定原注入名，通过 <code>default</code> 属性指定默认值。</li></ol> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  inject<span class="token operator">:</span> <span class="token punctuation">{</span>
-    myCount<span class="token operator">:</span> <span class="token string">'count'</span><span class="token punctuation">,</span> <span class="token comment">// 按注入名 'count' 注入</span>
-    message<span class="token operator">:</span> <span class="token punctuation">{</span>
-      from<span class="token operator">:</span> <span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token comment">// 'message' 是原注入名，当与原注入名同名时，这个属性是可选的</span>
-      <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">'default value'</span> <span class="token comment">// 默认值</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    user<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 与原注入名 'user' 同名</span>
-      <span class="token function-variable function">default</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Wang'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 使用工厂函数创建默认值</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><h2 id="避免注入名潜在冲突"><a href="#避免注入名潜在冲突" class="header-anchor">#</a> 避免注入名潜在冲突</h2> <p>如果你正在构建大型的应用，包含非常多的依赖提供，那么随处定义的注入名容易存在潜在的同名冲突。在 Mpx 实现中，同名的注入名会覆盖之前已有的注入名对应的提供值。</p> <p>针对大型应用的最佳实践，我们通常推荐在一个单独的文件中导出这些注入名，可以结合业务模块功能来统一注入名的命名和管理规范。<em>以下示例仅供参考，具体实现请依据自身实际场景确定。</em></p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">/** 推荐创建一个单独的文件来管理和导出注入名 */</span>
-
-<span class="token comment">// 1. 使用枚举类型</span>
-<span class="token keyword">export</span> <span class="token keyword">const</span> InjectionKeys <span class="token operator">=</span> <span class="token punctuation">{</span>
-  user<span class="token operator">:</span> <span class="token string">'user'</span><span class="token punctuation">,</span>
-  auth<span class="token operator">:</span> <span class="token string">'auth'</span><span class="token punctuation">,</span>
-  product<span class="token operator">:</span> <span class="token string">'product'</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">// 2. 按业务模块功能划分命名，不容易命名冲突，可读性高</span>
-<span class="token keyword">export</span> <span class="token keyword">const</span> InjectionKeys <span class="token operator">=</span> <span class="token punctuation">{</span>
-  user<span class="token operator">:</span> <span class="token punctuation">{</span>
-    service<span class="token operator">:</span> <span class="token string">'user:service'</span><span class="token punctuation">,</span>
-    store<span class="token operator">:</span> <span class="token string">'user:store'</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  auth<span class="token operator">:</span> <span class="token punctuation">{</span>
-    service<span class="token operator">:</span> <span class="token string">'auth:service'</span><span class="token punctuation">,</span>
-    token<span class="token operator">:</span> <span class="token string">'auth:token'</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  product<span class="token operator">:</span> <span class="token punctuation">{</span>
-    list<span class="token operator">:</span> <span class="token string">'product:list'</span><span class="token punctuation">,</span>
-    details<span class="token operator">:</span> <span class="token string">'product:details'</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">// 3. 使用 Symbol 创建唯一注入名，或再结合命名空间</span>
-<span class="token keyword">export</span> <span class="token keyword">const</span> InjectionKeys <span class="token operator">=</span> <span class="token punctuation">{</span>
-  user<span class="token operator">:</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-  auth<span class="token operator">:</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'auth'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-  product<span class="token operator">:</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'product'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">// 4. 自行实现类似 Symbol polyfill 的命名生成函数</span>
-<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createInjectionKey</span> <span class="token operator">=</span> <span class="token punctuation">(</span>module<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">module</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
-<span class="token keyword">export</span> <span class="token keyword">const</span> InjectionKeys <span class="token operator">=</span> <span class="token punctuation">{</span>
-  user<span class="token operator">:</span> <span class="token function">createInjectionKey</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">,</span> <span class="token string">'service'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-  auth<span class="token operator">:</span> <span class="token function">createInjectionKey</span><span class="token punctuation">(</span><span class="token string">'auth'</span><span class="token punctuation">,</span> <span class="token string">'token'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-  product<span class="token operator">:</span> <span class="token function">createInjectionKey</span><span class="token punctuation">(</span><span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token string">'list'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="ts-类型支持"><a href="#ts-类型支持" class="header-anchor">#</a> TS 类型支持</h2> <p>直接使用字符串注入 key 时，注入值的类型默认推导会是 <code>unknown</code>，需要通过泛型参数显式声明。因为无法保证运行时一定存在这个 provide，所以推导类型也可能是 <code>undefined</code>。当声明一个默认值后，这个 <code>undefined</code> 类型就可以成功被移除。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token operator">&lt;</span>script setup lang<span class="token operator">=</span><span class="token string">&quot;ts&quot;</span><span class="token operator">&gt;</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> inject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token comment">// 类型：unknown</span>
-<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token generic-function"><span class="token function">inject</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token comment">// 类型：string | undefined</span>
-<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token generic-function"><span class="token function">inject</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'default value'</span><span class="token punctuation">)</span> <span class="token comment">// 类型：string ✅</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
-</code></pre></div><p>当然，如果你已经确定注入名肯定被提供了，也可以强制断言。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token builtin">string</span>
-</code></pre></div><p>如果使用 <code>Symbol</code> 作为注入名，可以使用我们提供的 <code>InjectionKey</code> 泛型接口，使用它对注入名进行注解或者断言后，可以用来在不同组件之间同步注入值的类型。建议将注入 key 放在单独文件，这样方便在多个组件中导入使用。</p> <div class="language-ts extra-class"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-ts"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> provide<span class="token punctuation">,</span> inject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> InjectionKey <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">export</span> <span class="token keyword">const</span> key<span class="token operator">:</span> InjectionKey<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 类型注解</span>
-<span class="token comment">// const key = Symbol() as InjectionKey&lt;string&gt; // 类型断言写法等效</span>
-
-<span class="token function">provide</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">)</span> <span class="token comment">// 若默认值是非字符串则会 TS 类型报错</span>
-
-<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token comment">// ✅ foo 的类型：string | undefined</span>
-<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token string">'default value'</span><span class="token punctuation">)</span> <span class="token comment">// ✅ foo 的类型：string</span>
-<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token function">inject</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// ❌ 默认值是非字符串则会 TS 类型报错</span>
-</code></pre></div><h2 id="跨端差异"><a href="#跨端差异" class="header-anchor">#</a> 跨端差异</h2> <ul><li>Mpx 输出 Web 端后，使用规则与 Vue 一致，<code>provide/inject</code> 的生效范围严格遵行父子组件关系，只有父组件可以成功向子孙组件提供依赖。</li> <li>Mpx 输出小程序端会略有不同，由于小程序原生框架限制，暂时无法在子组件获取真实渲染时的父组件引用关系，所以不能像 Vue 那样基于父组件原型继承来实现 <code>provide</code>。在 Mpx 底层实现中，我们将组件层的 <code>provide</code> 挂载在所属页面实例上，相当于将组件 scope 提升到页面 scope，可以理解成一种“降级模拟”。当然，这并不影响父组件向子孙组件 <code>provide</code> 的能力，只是会额外存在“<strong>副作用</strong>”：同一页面中的组件可以向页面中其他所有在其之后渲染子组件提供依赖。比如同一页面下的组件 A 可以向后渲染的兄弟组件 B 的子孙组件提供数据，这在 Web 端是不允许的。因此，针对小程序端可能出现的“副作用”需要开发者自行保证，可以结合上述注入名的管理优化来规避。</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/ssr.html" class="prev">
-        SSR
-      </a></span> <span class="next"><a href="/guide/composition-api/composition-api.html">
-        组合式 API
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/76.50d84c61.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/resource-resolve.html b/docs-vuepress/.vuepress/dist/guide/advance/resource-resolve.html
deleted file mode 100644
index 449adbb2ab..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/resource-resolve.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>资源路径获取 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/77.7bc0f013.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="资源路径获取"><a href="#资源路径获取" class="header-anchor">#</a> 资源路径获取</h1> <p>Mpx在构建时，如果引用的页面不存在于当前 app.mpx 所在的上下文中，例如存在于 npm 包中，为避免和本地声明的其他 page 路径冲突，Mpx 会对页面路径进行 hash 化处理；
-处理组件路径时也会添加 hash 防止路径名冲突，hash 化处理后最终的文件名是 name+hash+ext 的格式；对于图片等资源路径输出也会进行 hash 化处理。</p> <p>开发者经常会面临以下问题：</p> <ul><li>希望获取 hash 化之后的页面/组件/图片路径</li> <li>在页面路径变化时(分包名更改或页面名修改)，需要手动修改散落在代码中各处写死的资源路径</li></ul> <h2 id="resolve"><a href="#resolve" class="header-anchor">#</a> ?resolve</h2> <p>为了解决以上开发者痛点，Mpx 框架提供了资源路径自动获取能力，只需要在资源引用路径后加上?resolve，
-Mpx 在编译时会生成一个资源路径处理模块，该模块暴露出资源对应的真实输出路径，从而可以实现在页面/组件/图片路径变化时正确获取输出路径，并避免写死资源路径。</p> <p>获取并使用页面路径</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.json 中注册分包，此处仅列出 packages 语法示例</span>
-<span class="token punctuation">{</span>
-    <span class="token literal-property property">packages</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token string">'@someNpm/app.mpx?root=someNpm'</span>
-    <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-
-<span class="token comment">// import 语法获取并使用页面路径</span>
-<span class="token keyword">import</span> subPackageIndexPage <span class="token keyword">from</span> <span class="token string">'@someNpm/subpackage/pages/index.mpx?resolve'</span>
-mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">url</span><span class="token operator">:</span> subPackageIndexPage
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// require 语法获取并使用页面路径</span>
-mpx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@someNpm/subpackage/pages/index.mpx?resolve'</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>获取并使用组件资源路径</p> <blockquote><p>我们在使用小程序 relations 语法时，需要获取组件路径，这时就可使用 ?resolve 语法</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> someComponentItem <span class="token keyword">from</span> <span class="token string">'./some-component-item?resolve'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">relations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token punctuation">[</span>someComponentItem<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'child'</span>
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>获取并使用图像资源路径</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{someStyle}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-    <span class="token keyword">import</span> iconPath <span class="token keyword">from</span> <span class="token string">'../assets/icon.png?resolve'</span>
-    
-    <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token function">someStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-                <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">background-image url(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>iconPath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span>
-            <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/77.7bc0f013.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/size-report.html b/docs-vuepress/.vuepress/dist/guide/advance/size-report.html
deleted file mode 100644
index 9246a7aa13..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/size-report.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>包体积分析 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/78.e2ded2d4.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" aria-current="page" class="active sidebar-link">包体积分析</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/size-report.html#与-webpack-bundle-analyzer-的区别" class="sidebar-link">与 webpack-bundle-analyzer 的区别</a></li><li class="sidebar-sub-header"><a href="/guide/advance/size-report.html#使用方法" class="sidebar-link">使用方法</a></li><li class="sidebar-sub-header"><a href="/guide/advance/size-report.html#业务实践" class="sidebar-link">业务实践</a></li><li class="sidebar-sub-header"><a href="/guide/advance/size-report.html#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="包体积分析"><a href="#包体积分析" class="header-anchor">#</a> 包体积分析</h1> <p>目前业内主流小程序平台都对小程序的代码包设置了严格的体积限制，微信是单包 2MB，总包 16MB，支付宝是单包 2MB，总包 8MB；包体积作为有限的资源，在小程序业务开发中异常重要，特别对于像滴滴出行这样的大型复杂业务。</p> <p>Mpx 在包体积控制上做了很多工作，主要包括：</p> <ul><li><a href="/guide/advance/subpackage.html#分包">完善的分包支持</a></li> <li><a href="/guide/advance/npm.html">基于依赖声明的按需构建</a></li> <li><a href="/guide/advance/image-process.html">图像资源处理</a></li> <li><a href="/guide/basic/css.html#公共样式复用">公共样式复用</a></li></ul> <p>此外由于 Mpx 的编译构建完全基于 webpack，也能够直接复用webpack生态自带的代码压缩，模块复用，tree shaking，side effects 等能力对代码体积进行优化。</p> <p>但是系统能做的工作终究有限，在一些人为不规范操作的影响下，最终输出的项目依然可能存在大量优化空间，比如在业务中不会被调用但无法被 tree shaking / side effects 移除的代码，因为 npm 依赖版本不统一造成的重复依赖，未经压缩的图像静态资源等，在大型项目中，这些问题想要被发现会非常困难，因此我们非常需要一个体积分析工具来管控项目体积和发现隐藏的体积问题。</p> <h2 id="与-webpack-bundle-analyzer-的区别"><a href="#与-webpack-bundle-analyzer-的区别" class="header-anchor">#</a> 与 webpack-bundle-analyzer 的区别</h2> <p><code>webpack-bundle-analyzer</code> 提供了非常完善的体积分析和可视化展示能力，但是在 Mpx 构建输出小程序场景下，其所提供的能力还是有所缺失：</p> <ul><li>只能对 js 资源进行模块体积分析，而小程序的输出中包含了大量的非 js 静态资源，如 wxss / wxml / json 等，这些资源的体积都不会被统计分析；</li> <li>没有针对某个分包进行体积分析的能力，由于小程序中存在对单一分包的体积限制，我们的体积往往会集中在主包和主要业务分包中，以分包维度进行体积分析的能力非常必要；</li> <li>无法以特定的输入范围为维度进行体积的统计分析，这个能力诉求更多地出现在跨团队合作的复杂小程序当中，如滴滴出行。在这种场景下，接入合作的各方会更加关注己方引入的体积，并进行针对性地优化。</li></ul> <p>由于上述原因，我们提供了<code>@mpxjs/size-report</code>插件提供包体积分析能力，弥补了 <code>webpack-bundle-analyzer</code> 的能力缺失，为业务提供了便捷准确的包体积管控优化抓手。</p> <h2 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h2> <h4 id="安装插件"><a href="#安装插件" class="header-anchor">#</a> 安装插件</h4> <div class="language- extra-class"><pre class="language-text"><code>npm i @mpxjs/size-report --save-dev
-</code></pre></div><h4 id="配置插件"><a href="#配置插件" class="header-anchor">#</a> 配置插件</h4> <p>在项目 webpack.config 文件中配置使用 <code>@mpxjs/size-report</code> 插件即可使用，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> MpxSizeReportPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/size-report'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token keyword">new</span> <span class="token class-name">MpxSizeReportPlugin</span><span class="token punctuation">(</span>
-          <span class="token punctuation">{</span>
-              <span class="token comment">// 本地可视化服务相关配置</span>
-              <span class="token literal-property property">server</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                  <span class="token literal-property property">enable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否启动本地服务，非必填，默认 true</span>
-                  <span class="token literal-property property">autoOpenBrowser</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否自动打开可视化平台页面，非必填，默认 true</span>
-                  <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 本地服务端口，非必填，默认 0(随机端口)</span>
-                  <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">'127.0.0.1'</span><span class="token punctuation">,</span> <span class="token comment">// 本地服务host，非必填</span>
-              <span class="token punctuation">}</span><span class="token punctuation">,</span>
-              <span class="token comment">// 体积报告生成后输出的文件地址名，路径相对为 dist/wx 或者 dist/ali</span>
-              <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">'../report.json'</span><span class="token punctuation">,</span>
-              <span class="token comment">// 配置阈值，此处代表总包体积阈值为 16MB，分包体积阈值为 2MB，超出将会触发编译报错提醒，该报错不阻断构建</span>
-              <span class="token literal-property property">threshold</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                  <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token string">'16MB'</span><span class="token punctuation">,</span>
-                  <span class="token literal-property property">packages</span><span class="token operator">:</span> <span class="token string">'2MB'</span>
-              <span class="token punctuation">}</span><span class="token punctuation">,</span>
-              <span class="token comment">// 配置体积计算分组，以输入分组为维度对体积进行分析，当没有该配置时结果中将不会包含分组体积信息</span>
-              <span class="token literal-property property">groups</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-                  <span class="token punctuation">{</span>
-                      <span class="token comment">// 分组名称</span>
-                      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'vant'</span><span class="token punctuation">,</span>
-                      <span class="token comment">// 配置分组 entry 匹配规则，小程序中所有的页面和组件都可被视为 entry，如下所示的分组配置将计算项目中引入的 vant 组件带来的体积占用</span>
-                      <span class="token literal-property property">entryRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token string">'@vant/weapp'</span>
-                      <span class="token punctuation">}</span>
-                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-                  <span class="token punctuation">{</span>
-                      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'pageGroup'</span><span class="token punctuation">,</span>
-                      <span class="token comment">// 每个分组中可分别配置阈值，如果不配置则表示</span>
-                      <span class="token literal-property property">threshold</span><span class="token operator">:</span> <span class="token string">'500KB'</span><span class="token punctuation">,</span>
-                      <span class="token literal-property property">entryRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'src/pages/index'</span><span class="token punctuation">,</span> <span class="token string">'src/pages/user'</span><span class="token punctuation">]</span>
-                      <span class="token punctuation">}</span>
-                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-                  <span class="token punctuation">{</span>
-                      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'someSdk'</span><span class="token punctuation">,</span>
-                      <span class="token literal-property property">entryRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'@somegroup/someSdk/index'</span><span class="token punctuation">,</span> <span class="token string">'@somegroup/someSdk2/index'</span><span class="token punctuation">]</span>
-                      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-                      <span class="token comment">// 有的时候你可能希望计算纯 js 入口引入的体积（不包含组件和页面），这种情况下需要使用 noEntryRules</span>
-                      <span class="token literal-property property">noEntryRules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                          <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token string">'src/lib/sdk.js'</span>
-                      <span class="token punctuation">}</span>
-                  <span class="token punctuation">}</span>
-              <span class="token punctuation">]</span><span class="token punctuation">,</span>
-              <span class="token comment">// 是否收集页面维度体积详情，默认 false</span>
-              <span class="token literal-property property">reportPages</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-              <span class="token comment">// 是否收集资源维度体积详情，默认 false</span>
-              <span class="token literal-property property">reportAssets</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-              <span class="token comment">// 是否收集冗余资源，默认 false</span>
-              <span class="token literal-property property">reportRedundance</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-              <span class="token comment">// 展示某些分包资源的引用来源信息，默认为 []</span>
-              <span class="token literal-property property">showEntrysPackages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'main'</span><span class="token punctuation">]</span>
-          <span class="token punctuation">}</span>
-      <span class="token punctuation">)</span>
-      <span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>参考上述示例进行配置后，构建代码后，dist 目录下会产出 report.json 文件，里边是项目的具体体积信息，关于输入 json 的简单示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code>{
-    // 项目体积概要，大部分情况下，我们只需要看这部分就足够了
-    &quot;sizeSummary&quot;: {
-        // 分组体积概要，与上述配置文件中的 groups 对应
-        &quot;groups&quot;: [
-            {
-                &quot;name&quot;: &quot;vant&quot;,
-                // 只有该分组包含的模块体积
-                &quot;selfSize&quot;: &quot;164.75KiB&quot;,
-                &quot;selfSizeInfo&quot;: {
-                  // 该分组所占 shansong
-                  &quot;shansong&quot;: &quot;164.75KiB&quot;
-                },
-                &quot;sharedSize&quot;: &quot;885.68KiB&quot;,
-                &quot;sharedSizeInfo&quot;: {
-                  &quot;main&quot;: &quot;885.68KiB&quot;
-                }
-            },
-        ],
-        // 项目各个分包以及主包体积概要
-        &quot;sizeInfo&quot;: {
-            &quot;main&quot;: &quot;1000KiB&quot;,
-            &quot;fenbao1&quot;: &quot;200kiB&quot;
-        },
-        // 项目总体积
-        &quot;totalSize&quot;: &quot;13468.85KiB&quot;,
-        // 项目静态资源总体积
-        &quot;staticSize&quot;: &quot;4880.58KiB&quot;,
-        // 项目chunk 文件总体积
-        &quot;chunkSize&quot;: &quot;8587.70KiB&quot;,
-        // 非依赖项体积大小
-        &quot;copySize&quot;: &quot;1KiB&quot;
-    },
-    // 分组资源详细体积
-    &quot;groupsSizeInfo&quot;: [
-        {
-            &quot;name&quot;: &quot;groupOne&quot;,
-            // group 自身包含的 module 详情列表
-            &quot;selfEntryModules&quot;: [],
-            // group 与其他group 共有的 module 详情列表
-            &quot;sharedEntryModules&quot;: [],
-            // 自身包含 module 体积
-            &quot;selfSize&quot;: &quot;&quot;,
-            // 自身包含 module 体积详情
-            &quot;selfSizeInfo&quot;: {
-                &quot;main&quot;: {},
-                &quot;homepage&quot;: {}
-            },
-            // 与其他 group 共有 module 体积
-            &quot;sharedSize&quot;: &quot;&quot;,
-            // 与其他 group 共有 module 体积详情
-            &quot;sharedSizeInfo&quot;: {
-                &quot;main&quot;: {},
-                &quot;homepage&quot;: {}
-            },
-
-        }
-    ],
-    // 项目资源详细体积报告
-    &quot;assetsSizeInfo&quot;: {
-        &quot;assets&quot;: [{
-            // 资源类型
-            &quot;type&quot;: &quot;chunk&quot;,
-            &quot;name&quot;: &quot;test&quot;,
-            // 分包名
-            &quot;packageName&quot;: &quot;main&quot;,
-            &quot;size&quot;: &quot;&quot;,
-            &quot;modules&quot;: []
-        }]
-    }
-}
-</code></pre></div><p>与此同时，如果你开启了本地可视化平台服务，可以直接通过可视化平台查看项目体积构成。默认开启自动打开平台网页或者手动打开后，整体页面展示如下图：</p> <p><a href="https://mpxjs.cn" target="_blank" rel="noopener noreferrer"><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/feat1.png" alt="size-report"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>可视化平台中包含三部分功能，第一个体积分析如上图所示，主要是展示整体项目的体积总览，以及 group 体积列表和分包体积列表。</p> <p>第二个功能是体积详情模块，在该模块中，可以最小颗粒度的查看包体积构成，通过 table 表格的层层展开可看到每个 group 中包含的分包，点击分包可看到该分包包含的静态资源和 js 模块详细列表，同时聚合模式可将分散的模块整合为具体的npm包名，方便宏观查看。此外为了方便用户定向查看某个特定资源的分布情况，列表上方可进行资源路径/名称搜索，该搜索支持模糊匹配，搜索结果为该资源在项目中 group 和 分包的分布情况。</p> <p><a href="https://mpxjs.cn" target="_blank" rel="noopener noreferrer"><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/feat2.png" alt="size-report"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>第三个功能为体积对比功能，这里主要进行项目不同版本之间的体积大小变化比较，体积对比依赖插件生成的json文件，通过该功能，可具体的分析出包体积具体增大的group，分包，以及模块，给包体积优化提供定向目标。</p> <p><a href="https://mpxjs.cn" target="_blank" rel="noopener noreferrer"><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/feat3.png" alt="size-report"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="业务实践"><a href="#业务实践" class="header-anchor">#</a> 业务实践</h2> <p>目前 sizeReport 工具在滴滴出行小程序, 花小猪, 青桔骑行, 特惠出行小程序以及一部分外部小程序中使用。</p> <p>在滴滴出行小程序中，配置使用 @mpxjs/size-report 插件后使包体积管控和优化更加工程化：</p> <ul><li><p>在 sizeReport 检测结果文件中，通过对 groupsSizeInfo 和 assetsSizeInfo 中assets 与 module 体积分析，我们发现了部分体积较大图片文件和css资源，通过将图片存 CDN 和删除冗余文件；</p></li> <li><p>基于各小程序平台对小程序总包，主包，分包有大小限制的原则，给各接入方配置了主包和首页分包体积大小占比阈值，在构建时检测到包体积超过阈值时，抛出 error 阻断构建，开发者可通过 size-report.json 中详细的包体积分析准确的找到体积变动点。</p></li></ul> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>Mpx sizeReport 工具对小程序体积计算有更细微(模块级别)的体积展示。 更加适合小程序开发场景的包体积分析。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/i18n.html" class="prev">
-        国际化i18n
-      </a></span> <span class="next"><a href="/guide/advance/image-process.html">
-        图像资源处理
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/78.e2ded2d4.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/ssr.html b/docs-vuepress/.vuepress/dist/guide/advance/ssr.html
deleted file mode 100644
index 809c77cb83..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/ssr.html
+++ /dev/null
@@ -1,190 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>SSR | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/79.f7eeb76b.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" aria-current="page" class="active sidebar-link">SSR</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/ssr.html#配置使用-ssr" class="sidebar-link">配置使用 SSR</a></li><li class="sidebar-sub-header"><a href="/guide/advance/ssr.html#ssr-生命周期" class="sidebar-link">SSR 生命周期</a></li><li class="sidebar-sub-header"><a href="/guide/advance/ssr.html#其他注意事项" class="sidebar-link">其他注意事项</a></li></ul></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="ssr"><a href="#ssr" class="header-anchor">#</a> SSR</h1> <p>近些年来，SSR/SSG 由于其良好的首屏展现速度和SEO友好性逐渐成为主流的技术规范，但过去 Mpx 对 SSR 的支持不完善，使用 Mpx 开发的跨端页面一直无法享受到 SSR 带来的性能提升，在 2.9 版本中，我们对 Mpx 输出 web 流程进行了大量适配改造，解决了 SSR 中常见的内存泄漏、跨请求状态污染和数据预请求等问题，完整支持了基于 Vue 和 Pinia 的 SSR 技术方案。</p> <h2 id="配置使用-ssr"><a href="#配置使用-ssr" class="header-anchor">#</a> 配置使用 SSR</h2> <p>在 Vue SSR 项目中，我们一般需要提供 server entry 和 client entry 两个文件作为 webpack 的构建入口，然后通过 webpack 构建出 server bundle 和 client bundle。在用户访问页面时，在服务端使用 server bundle 渲染出 HTML 字符串，作为静态页面发送到客户端，然后在客户端使用 client bundle 通过水合（hydration）对静态页面进行激活，实现可交互效果，下图展示了 Vue SSR 的大致流程。</p> <p><img src="https://img-hxy021.didistatic.com/static/webappstatic/do1_kWBH7L8mTgpHeKsBKp85" alt="Vue SSR流程"></p> <p>Mpx SSR 核心基于 Vue SSR 实现，大致流程思路与 Vue 一致，不过为了保持与小程序代码的兼容性，在配置使用上有一些改动差异，下面我们详细展开介绍：</p> <h3 id="构建server-client-bundle"><a href="#构建server-client-bundle" class="header-anchor">#</a> 构建server/client bundle</h3> <p>SSR项目中，我们需要分别构建出 server bundle 和 client bundle，对于不同环境的产物构建，我们需要进行不同的配置。
-在 Vue 中，我们需要提供 <code>entry-server.js</code> 和 <code>entry-client.js</code> 两个文件分别作为 server 和 client 的构建入口，与 Vue 不同，在 Mpx 中我们通过编译处理与运行时增强生命周期实现了使用 <code>app.mpx</code> 作为统一构建入口，无需区分 server 和 client。</p> <h4 id="服务端构建配置"><a href="#服务端构建配置" class="header-anchor">#</a> 服务端构建配置</h4> <p>服务端配置中除了将 entry 制定为 <code>app.mpx</code> 及其它基础配置外，最重要的是安装 <code>vue-server-renderer</code> 包中提供的  <code>server-plugin</code> 插件，该插件能够构建产出 <code>vue-ssr-server-bundle.json</code> 文件供 <code>renderer</code> 后续消费。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.server.config.js</span>
-<span class="token keyword">const</span> VueSSRServerPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer/server-plugin'</span><span class="token punctuation">)</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 将 entry 指向项目的 app.mpx 文件</span>
-  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./app.mpx'</span><span class="token punctuation">,</span>
-  <span class="token comment">// ...</span>
-  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-   <span class="token comment">// 产出 `vue-ssr-server-bundle.json`</span>
-    <span class="token keyword">new</span> <span class="token class-name">VueSSRServerPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#server-config" target="_blank" rel="noopener noreferrer">Vue SSR的服务端配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="客户端构建配置"><a href="#客户端构建配置" class="header-anchor">#</a> 客户端构建配置</h4> <p>类似服务端构建配置，在客户端构建中我们需要使用 <code>vue-server-renderer</code> 包中 <code>client-plugin</code> 插件来帮助我们生成客户端环境的资源清单 <code>vue-ssr-client-manifest.json</code>，并供 <code>renderer</code> 后续消费。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// webpack.client.config.js</span>
-<span class="token keyword">const</span> VueSSRClientPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer/client-plugin'</span><span class="token punctuation">)</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>baseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 将 entry 指向项目的 app.mpx 文件</span>
-  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./app.mpx'</span><span class="token punctuation">,</span>
-  <span class="token comment">// ...</span>
-  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token comment">// 产出 `vue-ssr-client-manifest.json`。</span>
-    <span class="token keyword">new</span> <span class="token class-name">VueSSRClientPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>更加详细的配置说明可参考 <a href="https://v2.ssr.vuejs.org/guide/build-config.html#client-config" target="_blank" rel="noopener noreferrer">Vue SSR的客户端配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="准备页面模版"><a href="#准备页面模版" class="header-anchor">#</a> 准备页面模版</h3> <p>SSR 渲染中，我们创建 <code>renderer</code> 需要一个页面模板，简单的示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Hello<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--vue-ssr-outlet--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>与 CSR 渲染模版不同，SSR 渲染模版中需要提供一个特殊的 <code>&lt;!--vue-ssr-outlet--&gt;</code>注释，标记 SSR 渲染产物的插入位置，如使用 <code>@mpxjs/cli</code> 脚手架创建 SSR 项目，该模版已经内置于脚手架中。</p> <h3 id="集成启动-ssr-服务"><a href="#集成启动-ssr-服务" class="header-anchor">#</a> 集成启动 SSR 服务</h3> <p>当我们准备好页面模版和双端构建产物后，我们就可以创建 <code>renderer</code> 并与 Node 服务进行集成，启动 SSR 服务，下面以 <code>express</code> 为例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//server.js</span>
-<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'express'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> createBundleRenderer <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-server-renderer'</span><span class="token punctuation">)</span>
-<span class="token comment">// 通过 vue-server-renderer/server-plugin 生成的文件</span>
-<span class="token keyword">const</span> serverBundle <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../dist/server/vue-ssr-server-bundle.json'</span><span class="token punctuation">)</span>
-<span class="token comment">// 通过 vue-server-renderer/client-plugin 生成的文件</span>
-<span class="token keyword">const</span> clientManifest <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../dist/client/vue-ssr-client-manifest.json'</span><span class="token punctuation">)</span>
- <span class="token comment">// 页面模版文件</span>
-<span class="token keyword">const</span> template <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token string">'../src/index.template.html'</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span>
-<span class="token comment">// 创建 renderer 渲染器</span>
-<span class="token keyword">const</span> renderer <span class="token operator">=</span> <span class="token function">createBundleRenderer</span><span class="token punctuation">(</span>serverBundle<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">runInNewContext</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
-    template<span class="token punctuation">,</span>
-    clientManifest<span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token comment">// 注册启动 SSR 服务</span>
-app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> req<span class="token punctuation">.</span>url <span class="token punctuation">}</span>
-  renderer<span class="token punctuation">.</span><span class="token function">renderToString</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> html</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  	<span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  	  res<span class="token punctuation">.</span><span class="token function">status</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'Internal Server Error'</span><span class="token punctuation">)</span>
-      <span class="token keyword">return</span>
-    <span class="token punctuation">}</span>
-  	res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">8080</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="ssr-生命周期"><a href="#ssr-生命周期" class="header-anchor">#</a> SSR 生命周期</h2> <p>在 Mpx 2.9 的版本中，我们提供了三个全新用于 SSR 的生命周期，分别是<code>onAppInit</code>、<code>serverPrefetch</code> 和 <code>onSSRAppCreated</code>，以统一服务端与客户端的构建入口，下面展开介绍：</p> <h3 id="onappinit"><a href="#onappinit" class="header-anchor">#</a> onAppInit</h3> <blockquote><p>该生命周期仅可在 App 中使用</p></blockquote> <p>在 SSR 中用户每发出一个请求，我们都会为其生成一个新的应用实例，<code>onAppInit</code> 生命周期会在应用创建 <code>new Vue(...)</code> 前被调用，其执行的返回结果会被合并到创建应用的 <code>options</code> 中</p> <p>很常见的使用场景在于返回新的全局状态管理实例，Mpx 中提供了 <code>@mpxjs/pinia</code> 作为全局状态管理工具，我们可以在 <code>onAppInit</code> 中返回全新的 <code>pinia</code> 示例避免产生跨请求状态污染，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
-<span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/pinia'</span>
-
-<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-  <span class="token function">onAppInit</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      pinia
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><blockquote><p>SSR 中仅支持使用 <code>@mpxjs/pinia</code> 作为状态管理工具，<code>@mpxjs/store</code> 暂不支持</p></blockquote> <h3 id="serverprefetch"><a href="#serverprefetch" class="header-anchor">#</a> serverPrefetch</h3> <blockquote><p>该生命周期可在 App/Page/Component 中使用，只在服务端渲染时执行</p></blockquote> <p>当我们需要在 SSR 使用数据预拉取时，可以使用这个生命周期进行，使用方法与 Vue 一致, 示例如下：</p> <p>选项式 API：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> useStore <span class="token keyword">from</span> <span class="token string">'../store/index'</span>
-
-<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">//...</span>
-  <span class="token function">serverPrefetch</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query
-    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$pinia<span class="token punctuation">)</span>
-    <span class="token comment">// return the promise from the action, fetch data and update state</span>
-    <span class="token keyword">return</span> store<span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>组合式 API：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onServerPrefetch<span class="token punctuation">,</span> getCurrentInstance<span class="token punctuation">,</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> useStore <span class="token keyword">from</span> <span class="token string">'../store/index'</span>
-
-<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">userStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token function">onServerPrefetch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token function">getCurrentInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>proxy<span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query
-      <span class="token comment">// return the promise from the action, fetch data and update state</span>
-      <span class="token keyword">return</span> store<span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>关于数据预拉取更详细的说明可以查看<a href="https://v2.ssr.vuejs.org/guide/data.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="onssrappcreated"><a href="#onssrappcreated" class="header-anchor">#</a> onSSRAppCreated</h3> <blockquote><p>该生命周期仅可在 App 中使用，只在服务端渲染时执行</p></blockquote> <p>在 Vue SSR 项目中，我们会在 <code>entry-server.js</code> 中导出一个工厂函数，在该函数中实现创建应用实例、路由匹配和状态同步等逻辑，并返回应用实例 <code>app</code>。</p> <p>在 Mpx SSR 中，我们将这部分逻辑整合在 <code>onSSRAppCreated</code> 中执行，该生命周期执行时用户可以从参数中获取应用实例 <code>app</code>、路由实例 <code>router</code>、数据管理实例 <code>pinia</code> 和 SSR 上下文 <code>context</code>，在完成必要的操作后，该生命周期需要返回一个 <code>resolve(app)</code> 的 promise。</p> <p>通常我们会在 <code>onSSRAppCreated</code> 中进行路由路径设置和数据预拉取后的状态同步工作，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
-<span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token comment">// ...,</span>
-    <span class="token function">onSSRAppCreated</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> pinia<span class="token punctuation">,</span> router<span class="token punctuation">,</span> app<span class="token punctuation">,</span> context <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token comment">// 设置服务端路由路径</span>
-        router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
-        router<span class="token punctuation">.</span><span class="token function">onReady</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-          <span class="token comment">// 应用完成渲染时执行</span>
-          context<span class="token punctuation">.</span><span class="token function-variable function">rendered</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-            <span class="token comment">// 将服务端渲染后得到的 pinia.state 同步到 context.state 中，</span>
-            <span class="token comment">// context.state 会被自动序列化并通过 `window.__INITIAL_STATE__`</span>
-            <span class="token comment">// 注入到 HTML 中，并在客户端运行时再读取同步</span>
-            context<span class="token punctuation">.</span>state <span class="token operator">=</span> pinia<span class="token punctuation">.</span>state<span class="token punctuation">.</span>value
-          <span class="token punctuation">}</span>
-          <span class="token comment">// 返回应用程序实例</span>
-          <span class="token function">resolve</span><span class="token punctuation">(</span>app<span class="token punctuation">)</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> reject<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>上述示例代码等价于 Vue 中的 <code>entry-server.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// entry-server.js</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./app'</span>
-
-<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token parameter">context</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> app<span class="token punctuation">,</span> router<span class="token punctuation">,</span> store <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
-    router<span class="token punctuation">.</span><span class="token function">onReady</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token comment">// This `rendered` hook is called when the app has finished rendering</span>
-      context<span class="token punctuation">.</span><span class="token function-variable function">rendered</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token comment">// After the app is rendered, our store is now</span>
-        <span class="token comment">// filled with the state from our components.</span>
-        <span class="token comment">// When we attach the state to the context, and the `template` option</span>
-        <span class="token comment">// is used for the renderer, the state will automatically be</span>
-        <span class="token comment">// serialized and injected into the HTML as `window.__INITIAL_STATE__`.</span>
-        context<span class="token punctuation">.</span>state <span class="token operator">=</span> store<span class="token punctuation">.</span>state
-      <span class="token punctuation">}</span>
-      <span class="token function">resolve</span><span class="token punctuation">(</span>app<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> reject<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>如用户没有配置 onSSRAppCreated，框架内部会执行兜底逻辑，以保障 SSR 的正常运行。</p> <h2 id="其他注意事项"><a href="#其他注意事项" class="header-anchor">#</a> 其他注意事项</h2> <ol><li><p>Mpx SSR 渲染支持 i18n 的功能，但为了防止内存泄漏，当前 i18n 实例不会随着每次请求而重新创建，这是由于 Vue2.x 版本插件机制的设计缺陷所造成的，因此在使用 i18n 进行 SSR 时可能会产生跨请求状态污染的问题，这个问题会在未来 Mpx 输出 web 切换为 Vue3 后完全解决。</p></li> <li><p>在服务端渲染阶段，对于 global 全局对象访问修改，如__mpx, __mpxRouter, __mpxPinia 都可能导致全局状态污染，所以在服务端渲染阶段请尽量避免进行相关操作；对于存在全局访问修改的方法，如 getApp(), getCurrentPages() 等在服务端渲染中被调用时，会产生相关报错提示。</p></li> <li><p>由于服务器无法收到 URL 中的 hash 信息，使用 SSR 时需要通过修改 <code>mpx.config.webRouteConfig</code> 将路由模式设置成 <code>history</code> 模式。</p></li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/utility-first-css.html" class="prev">
-        使用原子类
-      </a></span> <span class="next"><a href="/guide/advance/provide-inject.html">
-        依赖注入（Provide/Inject）
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/79.f7eeb76b.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/store.html b/docs-vuepress/.vuepress/dist/guide/advance/store.html
deleted file mode 100644
index c8a3cea770..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/store.html
+++ /dev/null
@@ -1,599 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>状态管理（store） | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/80.41418749.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" aria-current="page" class="active sidebar-link">状态管理（store）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/store.html#介绍" class="sidebar-link">介绍</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#state" class="sidebar-link">State</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#getter" class="sidebar-link">Getter</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#mutation" class="sidebar-link">Mutation</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#action" class="sidebar-link">Action</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#modules" class="sidebar-link">Modules</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#多实例-store" class="sidebar-link">多实例 store</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#在-typescript-中使用-store" class="sidebar-link">在 Typescript 中使用 store</a></li><li class="sidebar-sub-header"><a href="/guide/advance/store.html#use-store-in-composition-api" class="sidebar-link">在组合式 API 中使用 store</a></li></ul></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="状态管理-store"><a href="#状态管理-store" class="header-anchor">#</a> 状态管理（store）</h1> <p>Mpx 参考 vuex 设计实现了外部状态管理系统（store），其中的概念与 api 与 vuex 保持一致，为了更好地支持状态模块管理和跨团队合作场景，我们提出多实例 store 作为 vuex 中 modules 的替代方案，该方案在模块拆分及合并上的灵活性远高于 modules。</p> <h2 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h2> <p><code>Store</code> 是一个全局状态管理容器，能够轻松实现复杂场景下的组件通信需求，store 与简单的全局状态对象主要有以下两点不同：</p> <ol><li><p>Store 中存放的状态是响应式的。当用户将 store 中的状态注入到组件以后，若 store 中状态发生变化，那么对应的组件也会得到更新。</p></li> <li><p>你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径是显式地提交变更（commit mutation），这种方式能使整个应用中的状态变更变得可回朔可追踪，同时也更加安全。</p></li></ol> <h3 id="创建-store"><a href="#创建-store" class="header-anchor">#</a> 创建 store</h3> <p>让我们来创建一个简单 store。创建过程直截了当，仅需要提供一个初始 state 对象和一些 mutation 方法，并调用 Mpx 暴露的 <code>createStore</code> 方法进行创建：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">export</span> <span class="token keyword">default</span> store
-</code></pre></div><p>现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token comment">// 1</span>
-</code></pre></div><p>接下来，我们将会更深入地探讨一些 store 的核心概念。让我们先从 <a href="#state">State</a> 开始。</p> <h2 id="state"><a href="#state" class="header-anchor">#</a> State</h2> <p>State 存放了 store 中的原始状态数据，可以通过 <code>store.state</code> 进行访问。</p> <h3 id="在组件中获取-state"><a href="#在组件中获取-state" class="header-anchor">#</a> 在组件中获取 state</h3> <p>Mpx 在小程序组件中实现了数据响应，而刚才提到 store 中的状态也是响应式的，组件中获取 store 状态最简单的方法就是建立一个计算属性，在计算属性中访问 store 中需要的状态数据并返回：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// store.js</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">,</span> createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">count</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>count
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>当 store.state.count 发生变化时, 组件中访问了 count 计算属性的 watcher 将得到响应。</p> <blockquote><p>于 vuex 中的不同的地方在于，vuex 奉行<code>单一状态树</code>，一个应用当中只存在一个 store 示例，用户能够在组件中通过<code>this.$store</code>隐式地访问到当前应用的 store；而 Mpx 当中为了追求灵活便捷的状态模块化管理及跨团队合作的能力，支持了多实例 store，用户需要显式地引入 store 实例，并通过计算属性将其注入到组件当中。</p></blockquote> <h3 id="mapstate-辅助函数"><a href="#mapstate-辅助函数" class="header-anchor">#</a> MapState 辅助函数</h3> <p>当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 <code>mapState</code> 辅助函数帮助我们生成计算属性</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../store'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token comment">// 箭头函数可使代码更简练</span>
-    <span class="token function-variable function">count</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>count<span class="token punctuation">,</span>
-
-    <span class="token comment">// 传字符串参数 'count' 等同于 state =&gt; state.count</span>
-    <span class="token literal-property property">countAlias</span><span class="token operator">:</span> <span class="token string">'count'</span><span class="token punctuation">,</span>
-
-    <span class="token comment">// 为了能够使用 `this` 获取局部状态，必须使用常规函数</span>
-    <span class="token function">countPlusLocalState</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>localCount
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../store'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-    <span class="token comment">// 映射 this.count 为 store.state.count</span>
-    <span class="token string">'count'</span>
-  <span class="token punctuation">]</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="对象展开运算符"><a href="#对象展开运算符" class="header-anchor">#</a> 对象展开运算符</h3> <p>MapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了<a href="https://github.com/sebmarkbage/ecmascript-rest-spread" target="_blank" rel="noopener noreferrer">对象展开运算符<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，我们可以极大地简化写法：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../store'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">localComputed</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token comment">// 使用对象展开运算符将 mapState 返回的对象合并到计算属性中</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-      <span class="token string">'count'</span><span class="token punctuation">,</span>
-      <span class="token comment">// ...</span>
-    <span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><blockquote><p>使用 store 并不意味着你需要将所有的状态放入 store。如果有些状态严格属于单个组件，最好将其放到组件内部的 data 当中。</p></blockquote> <h2 id="getter"><a href="#getter" class="header-anchor">#</a> Getter</h2> <p>有时候我们需要从 state 中派生出一些状态，例如经过过滤的列表：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">doneTodos</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">todo</span> <span class="token operator">=&gt;</span> todo<span class="token punctuation">.</span>done<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它，无论哪种方式都不是很理想。</p> <p>这个时候我们可以在 store 中定义 <code>getter</code> 来完成这个功能，getter 可以简单认为是 store 中的计算属性。同计算属性一样，getter 的返回值会根据它的依赖被缓存起来，只有当它的依赖发生变化时才会被重新计算。</p> <p>Getter 接受 state 作为第一个参数：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">todos</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'sth1'</span><span class="token punctuation">,</span> <span class="token literal-property property">done</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'sth2'</span><span class="token punctuation">,</span> <span class="token literal-property property">done</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function-variable function">doneTodos</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> state<span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">todo</span> <span class="token operator">=&gt;</span> todo<span class="token punctuation">.</span>done<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">export</span> <span class="token keyword">default</span> store
-</code></pre></div><p>定义好的 getter 可以通过 <code>store.getters</code> 访问：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodos <span class="token comment">// -&gt; [{ id: 1, text: '...', done: true }]</span>
-</code></pre></div><p>Getter 也可以接受其他 getters 作为第二个参数, rootState作为第三个参数，rootState是模块化中引入的概念，之后会详细介绍：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-  <span class="token function-variable function">doneTodosCount</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> getters<span class="token punctuation">.</span>doneTodos<span class="token punctuation">.</span>length
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodosCount <span class="token comment">// -&gt; 1</span>
-</code></pre></div><p>我们采用与state类似的方法将其注入到组件中进行访问：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-  <span class="token function">doneTodosCount</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>doneTodosCount
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h3 id="mapgetters-辅助函数"><a href="#mapgetters-辅助函数" class="header-anchor">#</a> MapGetters 辅助函数</h3> <p><code>MapGetters</code> 的作用与使用方法同上面提到的 <code>mapState</code> 高度类似，唯一的区别在于 mapGetters 用于映射 store 中的 getter：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../store'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 使用对象展开运算符将 getter 混入 computed 对象中</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-      <span class="token string">'doneTodosCount'</span><span class="token punctuation">,</span>
-      <span class="token string">'anotherGetter'</span><span class="token punctuation">,</span>
-      <span class="token comment">// ...</span>
-    <span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>如果你想将一个 getter 在组件中映射为另一个名字，使用对象形式：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// 映射 this.doneCount 为 store.getters.doneTodosCount</span>
-  <span class="token literal-property property">doneCount</span><span class="token operator">:</span> <span class="token string">'doneTodosCount'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="mutation"><a href="#mutation" class="header-anchor">#</a> Mutation</h2> <p>更改 store 中的状态的唯一方法是提交 mutation。Mutation 非常类似于事件：每个 mutation 都有一个字符串的<strong>类型（type）</strong> 和 一个<strong>回调函数（handler）</strong>。这个回调函数就是我们实际进行状态更改的地方，它接受 state 作为第一个参数：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 变更状态</span>
-      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">export</span> <span class="token keyword">default</span> store
-</code></pre></div><p>当你需要触发某个 mutation 时，你需要使用对应的 <code>type</code> 调用 <code>store.commit</code> 方法，就像触发某个事件一样：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="提交载荷（payload）"><a href="#提交载荷（payload）" class="header-anchor">#</a> 提交载荷（Payload）</h3> <p>你可以向 <code>store.commit</code> 传入额外的参数，作为 mutation 的<strong>载荷（payload）</strong>：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// ...</span>
-<span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-  <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    state<span class="token punctuation">.</span>count <span class="token operator">+=</span> n
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span>
-</code></pre></div><p>在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且增强 mutation 的可读性：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// ...</span>
-<span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-  <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> payload</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    state<span class="token punctuation">.</span>count <span class="token operator">+=</span> payload<span class="token punctuation">.</span>amount
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">amount</span><span class="token operator">:</span> <span class="token number">10</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="mutation-必须是同步函数"><a href="#mutation-必须是同步函数" class="header-anchor">#</a> Mutation 必须是同步函数</h3> <p>一条重要的原则就是要记住 <strong>mutation 必须是同步函数</strong></p> <h3 id="在组件中提交-mutation"><a href="#在组件中提交-mutation" class="header-anchor">#</a> 在组件中提交 Mutation</h3> <p>你可以在组件中使用 <code>store.commit('increment')</code> 提交 mutation，或者使用 <code>store.mapMutations</code> 辅助函数将组件中名为 <code>increment</code> 的 <code>method</code> 映射为 <code>store.commit('increment')</code> 调用。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../store'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-      <span class="token comment">// 将 this.increment() 映射为 store.commit('increment')</span>
-      <span class="token string">'increment'</span><span class="token punctuation">,</span> 
-       <span class="token comment">// mapMutations 也支持载荷：将 this.incrementBy(amount) 映射为 store.commit('incrementBy', amount)</span>
-      <span class="token string">'incrementBy'</span>
-    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// mapMutations同样支持传入对象形式的参数进行别名映射</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token comment">// 将 this.add() 映射为 store.commit('increment')</span>
-      <span class="token literal-property property">add</span><span class="token operator">:</span> <span class="token string">'increment'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="action"><a href="#action" class="header-anchor">#</a> Action</h2> <p>Action 类似于 mutation，不同在于：</p> <ul><li>Action 不能直接变更状态，但是可以提交 mutation 进行状态变更</li> <li>Action 可以包含任意异步操作</li></ul> <p>让我们来创建一个简单的 action：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">export</span> <span class="token keyword">default</span> store
-</code></pre></div><p>Action 函数接受一个 <code>context</code> 对象，因此你可以调用 <code>context.commit</code> 提交一个 mutation，调用 <code>context.dispatch</code> 触发其他的 action 调用，或者通过 <code>context.rootState</code>、<code>context.state</code> 和 <code>context.getters</code> 来获取全局state、局部state 和 全局 getters。</p> <p>实践中，我们会经常用到 ES2015 的<a href="https://github.com/lukehoban/es6features#destructuring" target="_blank" rel="noopener noreferrer">参数解构<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>来简化代码：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-  <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h3 id="调用-action"><a href="#调用-action" class="header-anchor">#</a> 调用 action</h3> <p>Action 可以通过 <code>store.dispatch</code> 方法进行调用：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
-</code></pre></div><p>乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 <strong>mutation 必须同步执行</strong>这个限制么？Action 就不受约束！我们可以在 action 内部执行<strong>异步</strong>操作：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-  <span class="token function">incrementAsync</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>Action 同样支持载荷：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 调用载荷</span>
-store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'incrementAsync'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">amount</span><span class="token operator">:</span> <span class="token number">10</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>来看一个更加实际的购物车示例，涉及到<strong>调用异步 API</strong> 和<strong>提交多个 mutation</strong>：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-  <span class="token function">checkout</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit<span class="token punctuation">,</span> state <span class="token punctuation">}</span><span class="token punctuation">,</span> products</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 把当前购物车的物品备份起来</span>
-    <span class="token keyword">const</span> savedCartItems <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>state<span class="token punctuation">.</span>cart<span class="token punctuation">.</span>added<span class="token punctuation">]</span>
-    <span class="token comment">// 发出结账请求，然后乐观地清空购物车</span>
-    <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span><span class="token constant">CHECKOUT_REQUEST</span><span class="token punctuation">)</span>
-    <span class="token comment">// 购物 API 接受一个成功回调和一个失败回调</span>
-    shop<span class="token punctuation">.</span><span class="token function">buyProducts</span><span class="token punctuation">(</span>
-      products<span class="token punctuation">,</span>
-      <span class="token comment">// 成功操作</span>
-      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span><span class="token constant">CHECKOUT_SUCCESS</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-      <span class="token comment">// 失败操作</span>
-      <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span><span class="token constant">CHECKOUT_FAILURE</span><span class="token punctuation">,</span> savedCartItems<span class="token punctuation">)</span>
-    <span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>注意我们进行了一系列异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）。</p> <h3 id="在组件中调用-action"><a href="#在组件中调用-action" class="header-anchor">#</a> 在组件中调用 Action</h3> <p>你可以在组件中使用 <code>store.dispatch('increment')</code> 进行 action 调用，或者使用 <code>store.mapActions</code> 辅助函数将组件中名为 <code>increment</code> 的 <code>method</code> 映射为 <code>store.dispatch('increment')</code>：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../store'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-      <span class="token comment">// 将 this.increment() 映射为 store.dispatch('increment')</span>
-      <span class="token string">'increment'</span><span class="token punctuation">,</span> 
-      <span class="token comment">// mapActions 也支持载荷：将 this.incrementBy(amount) 映射为 store.dispatch('incrementBy', amount)</span>
-      <span class="token string">'incrementBy'</span>
-    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// mapActions 同样支持传入对象形式的参数进行别名映射</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token comment">// 将 this.add() 映射为 store.dispatch('increment')</span>
-      <span class="token literal-property property">add</span><span class="token operator">:</span> <span class="token string">'increment'</span> 
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="组合-action"><a href="#组合-action" class="header-anchor">#</a> 组合 Action</h3> <p>Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？</p> <p>在 Mpx 中，action 永远返回一个 Promise，你可以在定义 action 手动返回一个 Promise，即使你没有这样做，框架也会对你 action 的返回值进行 <code>Promise.resolve(returned)</code> 包装，确保你可以使用 Promise 的方式处理多个 action 之间的异步组合：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-  <span class="token function">actionA</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'someMutation'</span><span class="token punctuation">)</span>
-        <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>现在你可以通过 <code>then</code> 方法获取 <code>actionA</code> 执行完毕的时机：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'actionA'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>在另外一个 action 中也可以通过这种方式进行一系列异步调用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-  <span class="token function">actionB</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'actionA'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'someOtherMutation'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>如果我们利用 <a href="https://tc39.github.io/ecmascript-asyncawait/" target="_blank" rel="noopener noreferrer">async / await<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，我们能够更方便地对一系列异步操作进行组合：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 假设 getData() 和 getOtherData() 返回的是 Promise</span>
-
-<span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-  <span class="token keyword">async</span> <span class="token function">actionA</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'gotData'</span><span class="token punctuation">,</span> <span class="token keyword">await</span> <span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token keyword">async</span> <span class="token function">actionB</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">await</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'actionA'</span><span class="token punctuation">)</span> <span class="token comment">// 等待 actionA 完成</span>
-    <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'gotOtherData'</span><span class="token punctuation">,</span> <span class="token keyword">await</span> <span class="token function">getOtherData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="modules"><a href="#modules" class="header-anchor">#</a> Modules</h2> <blockquote><p>Mpx 虽然支持了 modules，但并不推荐使用。在 Mpx 中，我们更推荐使用[多实例模式](#多实例 store)进行对应用状态进行模块划分</p></blockquote> <p>在 Mpx 中，modules 的设计与 vuex 中基本保持一致，在 createStore 中将子模块配置传入 modules 配置项中即可使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-
-<span class="token keyword">const</span> moduleB <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-
-<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    moduleA<span class="token punctuation">,</span>
-    moduleB
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>moduleA <span class="token comment">// -&gt; moduleA 的状态</span>
-store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>moduleB <span class="token comment">// -&gt; moduleB 的状态</span>
-
-<span class="token keyword">export</span> <span class="token keyword">default</span> store
-</code></pre></div><blockquote><p>Mpx 并未实现 vuex 中的命名空间，除 state 外的所有属性（getters / mutations / actions）将被平铺展开到根 store 的对应空间下。在多实例 store 中，我们的实现方式则与命名空间高度相似。</p></blockquote> <h3 id="模块的局部状态"><a href="#模块的局部状态" class="header-anchor">#</a> 模块的局部状态</h3> <p>对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">increment</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 这里的 state 对象是模块的局部状态</span>
-      state<span class="token punctuation">.</span>count<span class="token operator">++</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">doubleCount</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>对于模块内部的 action，局部状态通过 <code>context.state</code> 访问，根状态则通过 <code>context.rootState</code> 访问：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">incrementIfOddOnRootSum</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> state<span class="token punctuation">,</span> commit<span class="token punctuation">,</span> rootState <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count <span class="token operator">+</span> rootState<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>对于模块内部的 getter，根状态能通过第三个参数访问：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> moduleA <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token comment">// ...</span>
-  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">sumWithRootCount</span> <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> getters<span class="token punctuation">,</span> rootState</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">+</span> rootState<span class="token punctuation">.</span>count
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h3 id="模块在组件中的引入方式"><a href="#模块在组件中的引入方式" class="header-anchor">#</a> 模块在组件中的引入方式</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token number">1</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token function-variable function">getName</span><span class="token operator">:</span> <span class="token parameter">s</span> <span class="token operator">=&gt;</span> s<span class="token punctuation">.</span>name
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">b</span><span class="token operator">:</span> moduleB
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// 我们支持了多种方式引入子模块中的 state</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 通过函数引入</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token function-variable function">nameA</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>a<span class="token punctuation">.</span>name
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// 通过路径字符串引入</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">nameA2</span><span class="token operator">:</span> <span class="token string">'a.name'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// 通过传入模块路径引入</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// 对于 getters / mutations / actions，由于我们没有实现 namespace，子模块当中定义的 getters / mutations / actions 都能在根空间下直接访问，正常调用映射方法即可</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token string">'getName'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="多实例-store"><a href="#多实例-store" class="header-anchor">#</a> 多实例 store</h2> <p>在 Mpx 中，我们允许在一个应用下创建多个 store 实例，进行模块化分布式的数据管理，同时提供了 deps 声明模块依赖的机制，让用户自由组合多个 store 实例并基于这些已有的 store 创建新的继承 store。在实际业务使用中，我们发现多实例模式的灵活性远高于 module，更加适合跨团队合作当中的数据管理。</p> <p>使用多实例 store 的方式非常简单，你只需要多次调用 <code>createStore</code> api 创建出多个 store 示例，并分别将其注入到组件中即可使用，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> storeA <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">countA</span><span class="token operator">:</span> <span class="token number">0</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">incrementA</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      state<span class="token punctuation">.</span>countA<span class="token operator">++</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">const</span> storeB <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">countB</span><span class="token operator">:</span> <span class="token number">0</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">incrementB</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      state<span class="token punctuation">.</span>countB<span class="token operator">++</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-    <span class="token operator">...</span>storeA<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'countA'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token operator">...</span>storeB<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'countB'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-    <span class="token operator">...</span>storeA<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'incrementA'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token operator">...</span>storeB<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'incrementB'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><blockquote><p>可以看到 Mpx 中的 map 辅助方法都挂载在 store 实例上，正是为了支持多实例 store 的实现</p></blockquote> <h3 id="合并继承多实例-store"><a href="#合并继承多实例-store" class="header-anchor">#</a> 合并继承多实例 store</h3> <p>在实际的跨团队业务当中，我们既希望不同团队间的数据管理尽量解耦，也希望一些共同的部分能够复用，这就要求我们的 store 实例可以以某种方式组合起来使用，我们提供了 deps 能来实现多实例 store 的合并与继承。</p> <p>承接上面的示例，我们基于 storeA 和 storeB 创建一个新的 storeC，在 storeC 当中可以定义自身的独立状态，也能基于 storeA 和 storeB 进行状态衍生：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> storeA <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">countA</span><span class="token operator">:</span> <span class="token number">0</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">incrementA</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      state<span class="token punctuation">.</span>countA<span class="token operator">++</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">const</span> storeB <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">countB</span><span class="token operator">:</span> <span class="token number">0</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">incrementB</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      state<span class="token punctuation">.</span>countB<span class="token operator">++</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">const</span> storeC <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">countC</span><span class="token operator">:</span> <span class="token number">0</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">abc</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 此处 state.storeA 指向了原始的 storeA.state</span>
-      <span class="token keyword">return</span> state<span class="token punctuation">.</span>storeA<span class="token punctuation">.</span>countA <span class="token operator">+</span> state<span class="token punctuation">.</span>storeB<span class="token punctuation">.</span>countB <span class="token operator">+</span> state<span class="token punctuation">.</span>countC
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">incrementC</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      state<span class="token punctuation">.</span>countC<span class="token operator">++</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">incrementB</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// storeC内部也可以通过命名空间路径的方式提交 storeB 的 mutation</span>
-      <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'storeB.incrementB'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token comment">// 此处 deps 声明了 storeC 的依赖，依赖中的 state / getters / mutations / actions 都会以 deps 中的 key 为命名空间存放在 storeC 对应的域下</span>
-  <span class="token literal-property property">deps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    storeA<span class="token punctuation">,</span>
-    storeB
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 通过继承合并得到的 storeC，我们可以完整访问其依赖 storeA / storeB</span>
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-    <span class="token comment">// 使用路径字符串或函数映射，可以看出和 modules 中 mapState 的方式非常类似</span>
-    <span class="token operator">...</span>storeC<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">countA</span><span class="token operator">:</span> <span class="token string">'storeA.countA'</span><span class="token punctuation">,</span>
-      <span class="token function-variable function">countA2</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>storeA<span class="token punctuation">.</span>countA
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// 传入命名空间参数映射 storeB 中的 countB</span>
-    <span class="token operator">...</span>storeC<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">'storeB'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'countB'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// 映射基于 storeA/B/C 衍生得到的 getters</span>
-    <span class="token operator">...</span>storeC<span class="token punctuation">.</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'abc'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-    <span class="token comment">// mutation不支持函数映射</span>
-    <span class="token comment">// 下面代码以三种方式分别映射了increment、incrementB和incrementC</span>
-    <span class="token operator">...</span>storeC<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">incrementA</span><span class="token operator">:</span> <span class="token string">'storeA.incrementA'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token operator">...</span>storeC<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token string">'storeB'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'incrementB'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token operator">...</span>storeC<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'incrementC'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><blockquote><p>简单来讲，作为 deps 的 store 会以注册在 deps 中的 key 值作为命名空间，将其原始的 state / getters / mutations / actions 存放在新生成 store 对应的域下，便于新 store 对其进行访问并衍生出新的数据或操作，如上述示例中，storeA.state 会存放在 storeC.state.storeA 中，对于 getters / mutations / actions 亦然。</p></blockquote> <h2 id="在-typescript-中使用-store"><a href="#在-typescript-中使用-store" class="header-anchor">#</a> 在 Typescript 中使用 store</h2> <p>Mpx 自 2.2 版本开始支持 Typescript，为了更好地支持 store 中的类型推导，我们针对 Typescript 环境提供了变种的 store api <code>createStoreWithThis</code> 进行 store 创建，该 api 最主要的变化在于定义 getters，mutations 和 actions 时，自身的 state，getters 等属性不再通过参数传入，而是会挂载到函数的执行上下文 <code>this</code> 当中，通过 this.state 或 this.getters 的方式进行访问，简单的使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">aa</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">bb</span><span class="token operator">:</span> <span class="token number">2</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">cc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 使用 this.state 访问 state</span>
-      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>aa <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bb
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">doSth3</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 使用 this.getters 访问 getter</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>getters<span class="token punctuation">.</span>cc<span class="token punctuation">)</span>
-      <span class="token keyword">return</span> <span class="token boolean">false</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>详细的使用方式及推导规则请查看 <a href="/guide/tool/ts.html">Typescript 支持</a>章节。</p> <h2 id="use-store-in-composition-api"><a href="#use-store-in-composition-api" class="header-anchor">#</a> 在组合式 API 中使用 store </h2> <p>Mpx 自 2.8 版本完整支持了组合式 API 的开发方式，虽然在组合式 API 中我们首推使用 <a href="/guide/advance/pinia.html">pinia</a> 作为外部状态管理方案，不过旧的 store 在组合式 API 中仍然可以使用，我们提供了新的 <code>mapStateToRefs</code> 和 <code>mapGettersToRefs</code> 便于用户在组合式 API 中访问 <code>state</code> 和 <code>getters</code>，而对于 <code>mutations</code> 和 <code>actions</code>，用户可以直接调用 store 实例上的 <code>commit</code> 和 <code>dispatch</code> 方法进行调用，或者使用原有的 <code>map*</code> API 进行映射访问，简单使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createPage<span class="token punctuation">,</span> createStoreWithThis<span class="token punctuation">,</span> watchEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">123</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">doubleCount</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">addCount</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token operator">++</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">subCount</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token operator">--</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> count <span class="token punctuation">}</span> <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">mapStateToRefs</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'count'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> doubleCount <span class="token punctuation">}</span> <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">mapGettersToRefs</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'doubleCount'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> addCount <span class="token punctuation">}</span> <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'addCount'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-
-    <span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">,</span> doubleCount<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      count<span class="token punctuation">,</span>
-      doubleCount<span class="token punctuation">,</span>
-      addCount<span class="token punctuation">,</span>
-      <span class="token function">subCount</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token comment">// 两种方式均可以进行 mutations 调用，actions 同理</span>
-        store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'subCount'</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/option-chain.html" class="prev">
-        模版内可选链表达式
-      </a></span> <span class="next"><a href="/guide/advance/pinia.html">
-        状态管理（pinia）
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/80.41418749.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/subpackage.html b/docs-vuepress/.vuepress/dist/guide/advance/subpackage.html
deleted file mode 100644
index 79df9e595e..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/subpackage.html
+++ /dev/null
@@ -1,264 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>使用分包 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/81.16e2cc83.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" aria-current="page" class="active sidebar-link">使用分包</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/subpackage.html#原生语法注册分包" class="sidebar-link">原生语法注册分包</a></li><li class="sidebar-sub-header"><a href="/guide/advance/subpackage.html#packages-语法注册分包" class="sidebar-link">packages 语法注册分包</a></li><li class="sidebar-sub-header"><a href="/guide/advance/subpackage.html#独立分包" class="sidebar-link">独立分包</a></li><li class="sidebar-sub-header"><a href="/guide/advance/subpackage.html#分包预下载" class="sidebar-link">分包预下载</a></li><li class="sidebar-sub-header"><a href="/guide/advance/subpackage.html#分包注意事项" class="sidebar-link">分包注意事项</a></li></ul></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用分包"><a href="#使用分包" class="header-anchor">#</a> 使用分包</h1> <p>作为一个对 performance 极度重视的框架，分包作为提升小程序体验的重要能力，框架对各种类型的分包能力进行了完善支持。</p> <blockquote><p>分包是小程序平台提供的原生能力，mpx是对该能力做了部分加强，目前各大主流小程序平台都已支持分包，且框架在可能的情况下进行了抹平。</p></blockquote> <blockquote><p>使用分包一定要记得阅读下面的<a href="#%E5%88%86%E5%8C%85%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9">分包注意事项</a></p></blockquote> <h2 id="原生语法注册分包"><a href="#原生语法注册分包" class="header-anchor">#</a> 原生语法注册分包</h2> <p>Mpx 支持小程序原生语法注册分包，并且在框架层面对不同平台的的差异进行了抹平，我们以微信小程序原生语法注册分包为例。</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
-  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token string">&quot;pages/index/index&quot;</span>
-  <span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token property">&quot;subPackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token punctuation">{</span>
-      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span><span class="token punctuation">,</span>
-      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token string">&quot;pages/other/other&quot;</span><span class="token punctuation">,</span>
-        <span class="token string">&quot;pages/other/other2&quot;</span>
-      <span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="packages-语法注册分包"><a href="#packages-语法注册分包" class="header-anchor">#</a> packages 语法注册分包</h2> <p>Mpx 提供 packages 语法来对小程序的主包页面和分包划分能力进行增强，使用 packages 语法可以灵活的对业务进行拆分，允许以 npm 包的形式进行
-主包页面和分包注册，且分包名和页面路径可自定义，十分有利于大型多团队开发的项目维护。</p> <h3 id="使用方法"><a href="#使用方法" class="header-anchor">#</a> 使用方法</h3> <p>Mpx 拓展了 app.json 的语法，新增了 packages 域，用来声明依赖的 packages，packages 可嵌套依赖。</p> <h4 id="注册主包页面"><a href="#注册主包页面" class="header-anchor">#</a> 注册主包页面</h4> <p>首先我们介绍下 packages 注册主包页面的用法，在 packages 中直接配置资源路径，Mpx 会去读取该资源中 json 区块中的 pages 属性，合并到主包页面配置中。</p> <div class="language-html extra-class"><pre class="language-html"><code>// @file src/app.mpx
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;./pages/index/index&quot;</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;{npmPackage || relativePathToPackage}/index&quot;</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-// @file src/packages/index.mpx
-// 注意确保页面路径的唯一性
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;./pages/other/other&quot;</span><span class="token punctuation">,</span>
-      <span class="token string">&quot;./pages/other/other2&quot;</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>打包结果：dist/app.json</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
-  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token string">&quot;pages/index/index&quot;</span><span class="token punctuation">,</span>
-    <span class="token string">&quot;pages/other/other&quot;</span><span class="token punctuation">,</span>
-    <span class="token string">&quot;pages/other/other2&quot;</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h4 id="注册分包"><a href="#注册分包" class="header-anchor">#</a> 注册分包</h4> <p>Mpx 会将 packages 域下的路径带 root 为 key 的 query 解析注册为分包，使用 packages 语法注册分包，只需要在 packages 中配置资源路径添加 <code>root=xxx</code>，root的值即为分包名。</p> <div class="language-html extra-class"><pre class="language-html"><code>// @file src/app.mpx
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;./pages/index/index&quot;</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;{npmPackage || relativePathToPackage}/index?root=test&quot;</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-// @file src/packages/index.mpx (子包的入口文件)
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;./pages/other/other&quot;</span><span class="token punctuation">,</span>
-      <span class="token string">&quot;./pages/other/other2&quot;</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>打包结果：dist/app.json</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
-  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token string">&quot;pages/index/index&quot;</span>
-  <span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token property">&quot;subPackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token punctuation">{</span>
-      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;test&quot;</span><span class="token punctuation">,</span>
-      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token string">&quot;pages/other/other&quot;</span><span class="token punctuation">,</span>
-        <span class="token string">&quot;pages/other/other2&quot;</span>
-      <span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>由上可见，经过我们的编译过程，packages 中注册的页面可按照原始的路径被合并入主包页面或注册为分包，
-这样开发者可以不用考虑自己在被依赖时页面路径是怎么样的，也可以直接将调试用的app.mpx作为依赖入口直接暴露出去，
-对于主app的开发者来说也不需要了解依赖内部的细节，只需要在packages中声明自己所需的依赖即可。</p> <h3 id="注意事项"><a href="#注意事项" class="header-anchor">#</a> 注意事项</h3> <ul><li>依赖的开发者在自己的入口 app.mpx 中注册页面时对于本地页面一定要使用相对路径进行注册，否则在主app中进行编译时会找不到对应的页面</li> <li>不管是用 json 还是 mpx 格式定义 package 入口，编译时永远只会解析 json 且只会关注 json 中的 pages 和 packages 域，其余所有东西在主app编译时都会被忽略</li> <li>由于我们是将 packages 中注册的页面按照原始的路径合并到主 app 当中，有可能会出现路径名冲突。<br>
-这种情况下编译会报出响应错误提示用户解决冲突，为了避免这种情况的发生，依赖的提供者最好将自己内部的页面放置在能够描述依赖特性的子文件夹下。</li></ul> <p>例如一个包叫login，建议包内页面文件目录为：</p> <div class="language- extra-class"><pre class="language-text"><code>project
-│   app.mpx  
-└───pages
-    └───login
-        │   page1.mpx
-        │   page2.mpx
-        │   ...
-</code></pre></div><h2 id="独立分包"><a href="#独立分包" class="header-anchor">#</a> 独立分包</h2> <p>Mpx目前已支持独立分包构建，使用 <a href="#packages">packages</a> 语法声明分包时只需要在后面添加 <code>independent=true</code> query 即可，同时也支持原生语法声明。
-如下方示例声明 packageA 分包为独立分包</p> <p><strong>示例：</strong></p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token comment">// src/app.mpx 文件中 json 块</span>
-
-<span class="token comment">// Mpx packages 方式</span>
-<span class="token punctuation">{</span>
-  <span class="token property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token string">&quot;packageA/app.mpx?root=packageA&amp;independent=true&quot;</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token comment">// 微信原生方式</span>
-<span class="token punctuation">{</span>
-  <span class="token property">&quot;subpackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token punctuation">{</span>
-      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;packageA&quot;</span><span class="token punctuation">,</span>
-      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token string">&quot;pages/index&quot;</span>
-      <span class="token punctuation">]</span><span class="token punctuation">,</span>
-      <span class="token property">&quot;independent&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>需要注意的是，由于独立分包可以独立于主包和其他分包运行，从独立分包页面进入小程序时，主包中的相应初始化逻辑并不会执行，如果独立分包中多个页面需要某种通用初始化逻辑时就无法优雅的实现，
-Mpx框架针对独立分包场景提供了独立分包初始化逻辑执行能力。</p> <p>对于使用 packages 方式声明的独立分包，默认将 .mpx 文件自身的 script 块作为初始化逻辑执行。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--src/packagesA/app.mpx，packageA 独立分包入口文件--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">usePromise</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> 
-<span class="token keyword">if</span> <span class="token punctuation">(</span>isIndependent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// do some in independent package</span>
-<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-    <span class="token comment">// do some not independent package</span>
-<span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-<span class="token punctuation">{</span>
-  <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token string">&quot;./pages/index&quot;</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>上方代码中 独立分包 packageA 的入口文件 app.mpx 中的 script block 代码会默认在独立分包初始化时执行，Mpx 同时提供了全局变量 <code>isIndependent</code> 标识当前代码执行环境是否为独立分包来进行特定逻辑区分</p> <p>如果你不想走这个默认的初始化逻辑执行规则，想自定义一个 js 文件存储当前独立分包的初始化逻辑，我们支持 independent 配置项直接配置为初始化逻辑文件地址</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token comment">// src/app.mpx 文件中 json 块</span>
-<span class="token comment">// Mpx packages 方式</span>
-<span class="token punctuation">{</span>
-  <span class="token property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token string">&quot;packageA/app.mpx?root=packageA&amp;independent=./common&quot;</span> <span class="token comment">// 路径上下文为 packageA 文件夹</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token comment">// 微信原生方式</span>
-<span class="token punctuation">{</span>
-  <span class="token property">&quot;subpackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token punctuation">{</span>
-      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;packageA&quot;</span><span class="token punctuation">,</span>
-      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token string">&quot;pages/index&quot;</span>
-      <span class="token punctuation">]</span><span class="token punctuation">,</span>
-      <span class="token property">&quot;independent&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./common&quot;</span> <span class="token comment">// 路径上下文为 packageA 文件夹</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/pacakgeA/common.js</span>
-<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">usePromise</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token keyword">if</span> <span class="token punctuation">(</span>isIndependent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// do some in independent package</span>
-<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-    <span class="token comment">// do some not independent package</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>注意上方配置 independent 为初始化逻辑文件地址时，路径相对地址上下文为 packageA</p> <h2 id="分包预下载"><a href="#分包预下载" class="header-anchor">#</a> 分包预下载</h2> <p>分包预下载是在 json中 新增一个 preloadRule 字段，mpx 打包时候会原封不动把这个部分放到 app.json 中，所以只需要按照 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html" target="_blank" rel="noopener noreferrer">微信小程序官方文档 - 分包预下载<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 或者 <a href="https://opendocs.alipay.com/mini/framework/subpackages" target="_blank" rel="noopener noreferrer">支付宝小程序官方文档 - 分包预下载<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 配置即可。</p> <p><strong>示例：</strong></p> <div class="language-html extra-class"><pre class="language-html"><code>// @file src/app.mpx
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;./pages/index/index&quot;</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;{npmPackage || relativePathToPackage}/index?root=xxx&quot;</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;preloadRule&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;pages/index&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token string-property property">&quot;network&quot;</span><span class="token operator">:</span> <span class="token string">&quot;all&quot;</span><span class="token punctuation">,</span>
-        <span class="token string-property property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;important&quot;</span><span class="token punctuation">]</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token string-property property">&quot;sub1/index&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token string-property property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;hello&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;sub3&quot;</span><span class="token punctuation">]</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-// @file src/packages/index.mpx (子包的入口文件)
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;./pages/other/other&quot;</span><span class="token punctuation">,</span>
-      <span class="token string">&quot;./pages/other/other2&quot;</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>打包结果：dist/app.json</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
-  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token string">&quot;pages/index/index&quot;</span>
-  <span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token property">&quot;subPackages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token punctuation">{</span>
-      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;xxx&quot;</span><span class="token punctuation">,</span>
-      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token string">&quot;pages/other/other&quot;</span><span class="token punctuation">,</span>
-        <span class="token string">&quot;pages/other/other2&quot;</span>
-      <span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token property">&quot;preloadRule&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;pages/index&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token property">&quot;network&quot;</span><span class="token operator">:</span> <span class="token string">&quot;all&quot;</span><span class="token punctuation">,</span>
-      <span class="token property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;important&quot;</span><span class="token punctuation">]</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;sub1/index&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;hello&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;sub3&quot;</span><span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>  
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="分包注意事项"><a href="#分包注意事项" class="header-anchor">#</a> 分包注意事项</h2> <p>当我们使用分包加载时，依赖包内的跳转路径需注意，比如要跳转到other2页面</p> <ul><li>不用分包时会是：/pages/other/other2</li> <li>使用分包后应为：/test/pages/other/other2</li></ul> <p>即前面会多?root={rootKey}的rootKey这一层</p> <p>为了解决这个问题，有三种方案：</p> <ul><li><p>import的时候在最后加'?resolve', 例如: <code>import testPagePath from '../pages/testPage.mpx?resolve'</code> , 编译时就会把它处理成正确的完整的绝对路径。</p></li> <li><p>使用相对路径跳转。</p></li> <li><p>定死使用的分包路径名，直接写/{rootKey}/pages/xxx （极度不推荐，尤其在分包可能被多方引用的情况时）</p></li></ul> <p>这里我们建议使用第一种方式。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/npm.html" class="prev">
-        使用npm
-      </a></span> <span class="next"><a href="/guide/advance/async-subpackage.html">
-        分包异步化
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/81.16e2cc83.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/advance/utility-first-css.html b/docs-vuepress/.vuepress/dist/guide/advance/utility-first-css.html
deleted file mode 100644
index 7fc7a64234..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/advance/utility-first-css.html
+++ /dev/null
@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>使用原子类 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/82.56c0d7c1.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" aria-current="page" class="active sidebar-link">使用原子类</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advance/utility-first-css.html#compile-config" class="sidebar-link">原子类环境配置</a></li><li class="sidebar-sub-header"><a href="/guide/advance/utility-first-css.html#config-supports" class="sidebar-link">功能支持范围</a></li><li class="sidebar-sub-header"><a href="/guide/advance/utility-first-css.html#utility-supports" class="sidebar-link">工具类可用范围</a></li><li class="sidebar-sub-header"><a href="/guide/advance/utility-first-css.html#attentions" class="sidebar-link">小程序原子类使用注意点</a></li></ul></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用原子类"><a href="#使用原子类" class="header-anchor">#</a> 使用原子类</h1> <p>原子类(utility-first CSS)是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，我们耳熟能详的有<a href="https://github.com/" target="_blank" rel="noopener noreferrer">Github<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<a href="https://openai.com/" target="_blank" rel="noopener noreferrer">OpenAI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，<a href="https://top10.netflix.com/" target="_blank" rel="noopener noreferrer">Netflix<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
-和<a href="https://www.jpl.nasa.gov/" target="_blank" rel="noopener noreferrer">NASA官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
-等。使用原子类离不开原子类框架的支持，常用的原子类框架有 <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwindcss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://windicss.org/" target="_blank" rel="noopener noreferrer">Windicss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
-和 <a href="https://unocss.dev/" target="_blank" rel="noopener noreferrer">Unocss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 等，而在 <strong>Mpx2.9</strong> 以后，我们在框架中内置了基于 unocss
-的原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx
-页面/组件模板中直接使用一些预定义的基础样式类，诸如flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：</p> <div class="language-html extra-class"><pre class="language-html"><code>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-base text-black font-semibold mb-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-          Erin Lindford
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text-gray-500 font-medium pb-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-          Product Engineer
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span>
-          <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-          Message
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：</p> <p><img src="https://dpubstatic.udache.com/static/dpubimg/Or3aaN-mmxV8pK-LmEVPm_demo.png" alt="utility-css-demo"></p> <p>相较于传统的自定义类编写样式的方式，使用原子类能给你带来以下这些好处：</p> <ul><li><strong>不用再烦恼于为自定义类取类名</strong>，传统样式开发中，我们仅仅是为某个元素定义样式就需要绞尽脑汁发明一些抽象的类名，还得提防类名冲突，使用原子类可以完全将你从这种琐碎无趣的工作中解放；</li> <li><strong>停止css体积的无序增长</strong>，传统样式开发中，css体积会随着你的迭代不断增长，而在原子类中，一切样式都可以复用，你几乎不需要编写新的css；</li> <li><strong>让调整样式变得更加安全</strong>，传统css是全局的，当你修改某个样式时无法保障其不会破坏其他地方的样式，而你在模板中使用的原子类是本地的，你完全不用担心修改它会影响其他地方。</li></ul> <p>而相较于使用内联样式，原子类也有一些重要的优势：</p> <ul><li><strong>约束下的设计</strong>，使用内联样式时，里面的每一个数值都是魔法数字(magic number)
-，而通过原子工具类，你可以选择一些符合预定义设计规范的样式，便于构筑具有视觉一致性的UI；</li> <li><strong>响应式设计</strong>，你无法在内联样式中使用媒体查询，然而通过原子类框架中提供的响应式工具，你可以轻而易举地构建出响应式界面；</li> <li><strong>Hover、focus和其他状态</strong>，使用内联样式无法定义特定状态下的样式，如hover和focus，通过原子类框架的状态变量能力，我们可以轻松为这些状态定义样式。</li></ul> <p>看到这里相信你已经迫不及待地想要在 Mpx 中体验原子类开发了吧，可以根据下面的指南开启你的原子类之旅。</p> <h2 id="compile-config"><a href="#compile-config" class="header-anchor">#</a> 原子类环境配置 </h2> <p>如果你想在新项目中使用原子类，可以使用最新版本的 <code>@mpxjs/cli</code> 创建项目，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用 unocss 的原子类，关于可使用的工具类可参考 <a href="https://unocss.dev/interactive/" target="_blank" rel="noopener noreferrer">unocss 交互示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>及本指南下方的<a href="#%E5%B7%A5%E5%85%B7%E7%B1%BB%E6%94%AF%E6%8C%81%E8%8C%83%E5%9B%B4">工具类支持范围</a>。</p> <blockquote><p>与 web 中使用 unocss 不同，在 Mpx 中使用 unocss 不需要显式引入虚拟模块 <code>import 'uno.css'</code> 来承载生成的样式内容，这是由于在
-Mpx 中，我们充分考虑到小程序分包架构的特殊性和主包体积的重要性，结合 Mpx
-强大的分包构建能力，对生成的原子工具类的使用情况进行分析，将其自动注入到合适的主包或者分包中，来达到全局体积分配的最优（在没有内容冗余的情况下尽可能输出到分包）。</p></blockquote> <p>对于使用 <code>@mpxjs/cli@3.0</code> 新版脚手架创建的项目，可以在项目初始化时选择<code>需要使用原子类</code>
-选项，或在已有项目下执行<code>mpx add @mpxjs/vue-cli-plugin-mpx-utility-first-css</code>以激活原子类相关编译配置。</p> <p>对于使用旧版脚手架创建的项目，可以通过修改项目编译配置以激活原子类支持：</p> <ol><li>安装相关依赖：</li></ol> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token punctuation">{</span>
-  <span class="token comment">//...</span>
-  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;@mpxjs/unocss-base&quot;</span><span class="token operator">:</span> <span class="token string">'^2.9.0'</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/unocss-plugin&quot;</span><span class="token operator">:</span> <span class="token string">'^2.9.0'</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><ol start="2"><li>新建uno.config.js，基础配置内容如下：</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'unocss'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> presetMpx <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/unocss-base'</span><span class="token punctuation">)</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token function">presetMpx</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><ol start="3"><li>注册<code>MpxUnocssPlugin</code>，在<code>build/getPlugins</code>中添加如下代码：</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> MpxUnocssPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/unocss-plugin'</span><span class="token punctuation">)</span>
-<span class="token comment">// ...</span>
-plugins<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">MpxUnocssPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-</code></pre></div><p>即可在项目模版中使用基于<code>unocss</code>的原子类功能，<code>unocss</code>默认的preset兼容<code>tailwindcss</code>/<code>windicss</code>
-，可以通过查阅<a href="https://tailwindcss.com/docs/installation" target="_blank" rel="noopener noreferrer">tailwindcss文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://windicss.org/utilities/general/colors.html" target="_blank" rel="noopener noreferrer">windicss文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>或<a href="https://unocss.dev/interactive/" target="_blank" rel="noopener noreferrer">unocss可交互文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>进行探索使用。</p> <p>关于<code>uno.config.js</code>可用配置项及<code>@mpxjs/unocss-plugin</code>及<code>@mpxjs/unocss-base</code>的配置项请参考<a href="/api/compile.html#mpxunocssplugin-配置">API文档</a></p> <h3 id="vscode插件支持"><a href="#vscode插件支持" class="header-anchor">#</a> vscode插件支持</h3> <p>推荐使用unocss官方插件https://unocss.dev/integrations/vscode
-mpx文件则需要在unocss.config.js添加如下参数才能生效</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'unocss'</span><span class="token punctuation">)</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.mpx($|\?)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="config-supports"><a href="#config-supports" class="header-anchor">#</a> 功能支持范围 </h2> <p>我们支持了<code>unocss</code>大部分的配置项及功能，并针对小程序技术规范提供了一些额外的功能支持，如分包输出和样式隔离等功能，以下为详细功能支持范围。</p> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Load Config</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">支持windi默认的全部配置文件路径，并支持在plugin options中手动传入配置对象或配置文件路径</td></tr> <tr><td style="text-align:left;">Rules</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Shortcuts</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Theme</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Variants</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Extractors</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Transformers</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">内建支持variant groups、directives和alias，不支持自定义transformers</td></tr> <tr><td style="text-align:left;">Preflights</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">支持内建和自定义preflight配置</td></tr> <tr><td style="text-align:left;">Presets</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Safelist</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">支持全局配置和模版注释语法局部配置声明safelist</td></tr> <tr><td style="text-align:left;">Value Auto-infer</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Variant Groups</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Directives</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Alias</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Attributify Mode</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序模版不支持不识别的自定义属性</td></tr> <tr><td style="text-align:left;">Responsive Design</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Dark Mode</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Important Prefix</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Layers Ordering</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">分包输出/公共样式抽离</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">可通过设置<code>@mpxjs/unocss-plugin</code>配置项<code>minCount</code>决定公共样式范围</td></tr> <tr><td style="text-align:left;">组件分包异步/组件样式隔离</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">可通过全局配置和模版注释语法局部配置<code>styleIsolation='isolated'</code>支持相关场景的原子类使用</td></tr> <tr><td style="text-align:left;">Rpx样式单位</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">小程序类名特殊字符转义</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">静态类名和动态类名均以支持</td></tr> <tr><td style="text-align:left;">跨平台输出</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">支持输出Mpx已支持的所有小程序平台及Web</td></tr></tbody></table> <h2 id="utility-supports"><a href="#utility-supports" class="header-anchor">#</a> 工具类可用范围 </h2> <p>经过我们的详细测试，大部分<code>unocss</code>
-提供的工具类都能在小程序环境下正常工作，但是也有部分工具类由于小程序底层环境差异无法正常运行，以下是详细的测试结果，参考<a href="https://windicss.org/utilities/general/colors.html" target="_blank" rel="noopener noreferrer">windicss文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
-进行分类组织。</p> <h3 id="general"><a href="#general" class="header-anchor">#</a> General</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Colors</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Typography</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">不支持子项：Font Variant Numeric Tab Size</td></tr> <tr><td style="text-align:left;">SVG</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持svg标签</td></tr> <tr><td style="text-align:left;">Variants</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">不支持子项：Child Selectors，因为小程序不支持*选择器</td></tr></tbody></table> <h3 id="accessibility"><a href="#accessibility" class="header-anchor">#</a> Accessibility</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Screen Readers</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="animations"><a href="#animations" class="header-anchor">#</a> Animations</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Animation</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Transforms</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Transitions</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="backgrounds"><a href="#backgrounds" class="header-anchor">#</a> Backgrounds</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Background Attachment</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Clip</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Color</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Opacity</td> <td style="text-align:left;">支持</td> <td style="text-align:left;">需要和Background Color一起使用</td></tr> <tr><td style="text-align:left;">Background Position</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Repeat</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Size</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Origin</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Gradient Direction</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Gradient From</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Gradient Via</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Gradient To</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Background Blend Mode</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="behaviors"><a href="#behaviors" class="header-anchor">#</a> Behaviors</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Box Decoration Break</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Image Rendering</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">image-render-edge 真机不支持</td></tr> <tr><td style="text-align:left;">Listings</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Overflow</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Overscroll Behavior</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Placeholder</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">微信小程序 input 需要通过 placeholder-style 设置 placeholder 样式</td></tr></tbody></table> <h3 id="borders"><a href="#borders" class="header-anchor">#</a> Borders</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Border Radius</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Border Width</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Border Color</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Border Opacity</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Border Style</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Divider Width</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的css选择器</td></tr> <tr><td style="text-align:left;">Divider Color</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的css选择器</td></tr> <tr><td style="text-align:left;">Divider Opacity</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的css选择器</td></tr> <tr><td style="text-align:left;">Divider Style</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的css选择器</td></tr> <tr><td style="text-align:left;">Outline</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Outline Solid</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Outline Dotted</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Ring Width</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Ring Color</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Ring Opacity</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Ring Offset Width</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Ring Offset Color</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="effects"><a href="#effects" class="header-anchor">#</a> Effects</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Box Shadow</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Opacity</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Mix Blend Mode</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="filters"><a href="#filters" class="header-anchor">#</a> Filters</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Filter</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Backdrop Filter</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr></tbody></table> <h3 id="interactivity"><a href="#interactivity" class="header-anchor">#</a> Interactivity</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Accent Color</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Appearance</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Cursor</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Caret</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Pointer Events</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Resize</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Scroll Behavior</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Touch Action</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">User Select</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr> <tr><td style="text-align:left;">Will Change</td> <td style="text-align:left;">不支持</td> <td style="text-align:left;">小程序不支持生成的样式</td></tr></tbody></table> <h3 id="layout"><a href="#layout" class="header-anchor">#</a> Layout</h3> <table><thead><tr><th style="text-align:left;">功能</th> <th style="text-align:left;">支持度</th> <th style="text-align:left;">备注</th></tr></thead> <tbody><tr><td style="text-align:left;">Columns</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Container</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Display</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Flex</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Grid</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Positioning</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">小程序图片设置object-fit 无效，可使用mode代替</td></tr> <tr><td style="text-align:left;">Sizing</td> <td style="text-align:left;">支持</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">Spacing</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">Space Between小程序不支持生成的css选择器</td></tr> <tr><td style="text-align:left;">Tables</td> <td style="text-align:left;">部分支持</td> <td style="text-align:left;">小程序不支持部分table样式</td></tr></tbody></table> <h2 id="attentions"><a href="#attentions" class="header-anchor">#</a> 小程序原子类使用注意点 </h2> <p>小程序由于底层环境差异，我们在支持和使用原子类时有一些特殊的注意点。</p> <h3 id="escape"><a href="#escape" class="header-anchor">#</a> 特殊字符转义 </h3> <p>基于<code>unocss</code>的原子类支持<code>value auto-infer</code>（值自动推导），可以在模版中根据相关规则书写灵活的自定义值原子类，如<code>p-5px bg-[hsl(211.7,81.9%,69.6%)]</code>等，针对原子类中出现的<code>[</code> <code>(</code> <code>,</code>等特殊字符，在web中会通过转义字符<code>\</code>进行转义，由于小程序环境下不支持css选择器中出现<code>\</code>转义字符，我们内置支持了一套不带<code>\</code>的转义规则对这些特殊字符进行转义，同时替换模版和css文件中的类名，内建的默认转义规则如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> escapeMap <span class="token operator">=</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">'('</span><span class="token operator">:</span> <span class="token string">'_pl_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">')'</span><span class="token operator">:</span> <span class="token string">'_pr_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'['</span><span class="token operator">:</span> <span class="token string">'_bl_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">']'</span><span class="token operator">:</span> <span class="token string">'_br_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'{'</span><span class="token operator">:</span> <span class="token string">'_cl_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'}'</span><span class="token operator">:</span> <span class="token string">'_cr_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'#'</span><span class="token operator">:</span> <span class="token string">'_h_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'!'</span><span class="token operator">:</span> <span class="token string">'_i_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'/'</span><span class="token operator">:</span> <span class="token string">'_s_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'.'</span><span class="token operator">:</span> <span class="token string">'_d_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">':'</span><span class="token operator">:</span> <span class="token string">'_c_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">','</span><span class="token operator">:</span> <span class="token string">'_2c_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'%'</span><span class="token operator">:</span> <span class="token string">'_p_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'\''</span><span class="token operator">:</span> <span class="token string">'_q_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'&quot;'</span><span class="token operator">:</span> <span class="token string">'_dq_'</span><span class="token punctuation">,</span>
-    <span class="token string-property property">'+'</span><span class="token operator">:</span> <span class="token string">'_a_'</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">$</span><span class="token operator">:</span> <span class="token string">'_si_'</span><span class="token punctuation">,</span>
-    <span class="token comment">// unknown用于兜底不在上述范围中未知的转义字符</span>
-    <span class="token literal-property property">unknown</span><span class="token operator">:</span> <span class="token string">'_u_'</span>
-  <span class="token punctuation">}</span>
-</code></pre></div><p>与此同时，用户也可以通过传递<code>@mpxjs/unocss-plugin</code>的<a href="/api/compile.html#escapeMap"><code>escapeMap</code>配置项</a>来覆盖内建的转义规则。</p> <h3 id="subpackage"><a href="#subpackage" class="header-anchor">#</a> 原子类分包输出 </h3> <p>在web中，原子类会被全部打包输出单个样式文件，一般会放置在顶层样式表中以供全局访问，但在小程序中这种全量的输出策略并不是最优的，主要原因在于小程序中可供全局访问的主包体积存在<strong>2M大小限制</strong>，主包体积十分紧缺珍贵，Mpx在构建输出时遵循着分包优先的原则，尽可能充分利用分包体积从而减少对主包体积的占用，再进行原子类产物输出时，我们也遵循了相同的原则。</p> <p>在Mpx中，我们在收集原子类时同时记录了每个原子类的引用分包，在收集结束后根据每个原子类的分包引用数量决定该原子类应该输出到主包还是分包当中，我们在<code>@mpxjs/unocss-plugin</code>中提供了<a href="/api/compile.html#minCount"><code>minCount</code>配置项</a>来决定分包的输出规则，该配置项的默认值为2，即当一个原子类被2个或以上分包引用时，会被作为公共原子类抽取到主包中，否则输出到所属分包中，这也是全局最优的策略。当我们想要让原子类输出产物更少地占用主包体积时，我们也可以将<code>minCount</code>值调大，让原子类抽取到主包的条件更加苛刻，不过这样也会伴随着原子类分包冗余的增加。</p> <p><code>unocss.config.js</code>配置中定义的<code>safelist</code>原子类默认会输出到主包，为了组件局部使用的<code>safelist</code>有输出到分包的机会，我们在模版中提供了<a href="/api/compile.html#commentConfig"><code>注释配置</code></a>（comments config），灵感来源于<code>webpack</code>中的魔法注释（magic comments），用户可以在组件模版中通过<code>注释配置</code>声明当前组件所需的<code>safelist</code>，对应的原子类也会根据上述的规则输出到主包或分包中，使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- mpx_config_safelist: 'text-red-500 bg-blue-500' --&gt;</span>
-    <span class="token comment">&lt;!-- 动态样式中可以使用text-red-500和bg-blue-500原子类 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{classObj}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- ... --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="style-isolation"><a href="#style-isolation" class="header-anchor">#</a> 样式隔离与组件分包异步 </h3> <p>在小程序中，自定义组件的样式默认是隔离的，web中通过全局样式访问原子类的方式不再生效，不过由于小程序提供了<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB" target="_blank" rel="noopener noreferrer">样式隔离配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，我们可以将该组件样式隔离配置调整为<code>apply-shared</code>来获取页面或app中定义的原子类，但是当我们在使用传统类名和原子类混合开发或者迁移原子类的过程中，我们往往希望保留原本自定义组件的样式隔离。</p> <p>针对这种情况，我们在<code>@mpxjs/unocss-plugin</code>中提供了<a href="/api/compile.html#styleIsolation"><code>styleIsolation</code>配置项</a>，可选设置为<code>isolated</code>|<code>apply-shared</code>，当设置为<code>isolated</code>时每个组件都会通过<code>@import</code>独立引用主包或者分包的原子类样式文件，因此不会受到样式隔离的影响；当设置为<code>apply-shared</code>时，只有app和分包页面会引用对应的原子类样式文件，自定义组件需要通过配置样式隔离为<code>apply-shared</code>使原子类生效。</p> <p>在组件分包异步的情况下对应组件即使将样式隔离配置为<code>apply-shared</code>的情况下，<code>@mpxjs/unocss-plugin</code>也需要将<code>styleIsolation</code>设置为<code>isolated</code>才能正常工作，原因在于组件分包异步的情况下，组件被其他分包的页面所引用渲染，由于上述原子类样式分包输出的规则，其他分包的页面中可能并不包含当前组件所需的原子类，只有在<code>isolated</code>模式下由组件自身引用所需的原子类样式才能保证正常work，类似于<code>safelist</code>，我们也提供了<a href="/api/compile.html#commentConfig"><code>注释配置</code></a>的方式对组件的<code>styleIsolation</code>模式进行局部配置，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- mpx_config_styleIsolation: 'isolated' --&gt;</span>
-    <span class="token comment">&lt;!-- 当前组件会直接引用对应主包或分包的原子类样式 --&gt;</span>
-     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>@dark:(text-white bg-dark-500)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- ... --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/custom-output-path.html" class="prev">
-        自定义路径
-      </a></span> <span class="next"><a href="/guide/advance/ssr.html">
-        SSR
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/82.56c0d7c1.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/class-style-binding.html b/docs-vuepress/.vuepress/dist/guide/basic/class-style-binding.html
deleted file mode 100644
index b8db15d7b5..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/class-style-binding.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>类名样式绑定 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/83.ea65d6b1.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" aria-current="page" class="active sidebar-link">类名样式绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/class-style-binding.html#类名绑定" class="sidebar-link">类名绑定</a></li><li class="sidebar-sub-header"><a href="/guide/basic/class-style-binding.html#样式绑定" class="sidebar-link">样式绑定</a></li></ul></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="类名样式绑定"><a href="#类名样式绑定" class="header-anchor">#</a> 类名样式绑定</h1> <p>Mpx利用wxs完整实现了Vue中的类名样式绑定，性能优良且没有任何使用限制（很多小程序框架基于字符串解析来实现该能力，只支持在模板上写简单的字面量，大大限制了使用场景）</p> <h2 id="类名绑定"><a href="#类名绑定" class="header-anchor">#</a> 类名绑定</h2> <p>类名绑定的增强指令是wx:class，可以与普通的class属性同时存在，在视图渲染中进行合成。</p> <h3 id="对象语法"><a href="#对象语法" class="header-anchor">#</a> 对象语法</h3> <p>wx:class中传入对象，key值为类名，value值控制该类名是否生效。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!--支持传入对象字面量，此处视图的class=&quot;outer active&quot;--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ {active:active, disabled:disabled} }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--直接直接传入对象数据，此处视图的class=&quot;inner selected&quot;--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{innerClass}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">disable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">innerClass</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="数组语法"><a href="#数组语法" class="header-anchor">#</a> 数组语法</h3> <p>wx:class中传入字符串数组，字符串为类名。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!--支持传入数组字面量，此处视图的class=&quot;outer active danger&quot;--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ ['active', 'danger'] }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--直接直接传入数组数据，此处视图的class=&quot;inner selected&quot;--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{innerClass}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">innerClass</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'selected'</span><span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="样式绑定"><a href="#样式绑定" class="header-anchor">#</a> 样式绑定</h2> <p>样式的增强指令是wx:style，可以与普通的style属性同时存在，在视图渲染中进行合成。</p> <h3 id="对象语法"><a href="#对象语法" class="header-anchor">#</a> 对象语法</h3> <p>wx:style中传入用样式对象，带有横杠的样式名可以用驼峰写法来代替</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!--支持传入对象字面量，模板会显得杂乱，此处视图的style=&quot;color:red;font-size:16px;font-weight:bold;&quot;--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ {fontSize:'16px', fontWeight:'bold'} }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--更好的方式是直接传入对象数据，此处视图的style=&quot;color:blue;font-size:14px;&quot;--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{innerStyle}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">innerStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'14px'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="数组语法"><a href="#数组语法" class="header-anchor">#</a> 数组语法</h3> <p>wx:style同样支持传入数组将多个样式合成应用到视图上</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!--此处视图的style=&quot;color:blue;font-size:14px;background-color:red;&quot;--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ [baseStyle, activeStyle] }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">baseStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'14px'</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">activeStyle</span><span class="token operator">:</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'red'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/reactive.html" class="prev">
-        数据响应
-      </a></span> <span class="next"><a href="/guide/basic/conditional-render.html">
-        条件渲染
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/83.ea65d6b1.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/component.html b/docs-vuepress/.vuepress/dist/guide/basic/component.html
deleted file mode 100644
index 6b1f590c6b..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/component.html
+++ /dev/null
@@ -1,117 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>自定义组件 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/84.d50d3d09.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" aria-current="page" class="active sidebar-link">自定义组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/component.html#动态组件" class="sidebar-link">动态组件</a></li><li class="sidebar-sub-header"><a href="/guide/basic/component.html#slot" class="sidebar-link">slot</a></li></ul></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="自定义组件"><a href="#自定义组件" class="header-anchor">#</a> 自定义组件</h1> <p>Mpx中的自定义组件完全基于小程序原生的自定义组件支持，与此同时，Mpx提供的数据响应和模板增强等一系列增强能力都能在自定义组件中使用。</p> <p>原生自定义组件的规范详情查看<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="动态组件"><a href="#动态组件" class="header-anchor">#</a> 动态组件</h2> <p>Mpx中提供了使用方法类似于 Vue 的动态组件能力，这是一个基于 wx:if 实现的语法。通过对 <code>is</code> 属性进行动态绑定，可以实现在同一个挂载点切换多个组件，前提需要动态切换的组件已经在全局或者组件中完成注册。
-使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!-- current为组件名称字符串，可选范围为局部注册的自定义组件和全局注册的自定义组件 --&gt;</span>
-  <span class="token comment">&lt;!-- 当 `current`改变时，组件也会跟着切换  --&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{current}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">current</span><span class="token operator">:</span> <span class="token string">'test'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>current <span class="token operator">=</span> <span class="token string">'list'</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/list&quot;</span><span class="token punctuation">,</span>
-      <span class="token string-property property">&quot;test&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/test&quot;</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="slot"><a href="#slot" class="header-anchor">#</a> slot</h2> <p>在组件中使用slot（插槽）可以使我们封装的组件更具有可扩展性，Mpx完全支持原生插槽的使用。</p> <p>简单示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 组件模板 --&gt;</span>
-<span class="token comment">&lt;!-- components/mySlot.mpx --&gt;</span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>这是组件模板<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slot1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slot2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>下面是引入 <code>mySlot</code> 组件的页面</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- index.mpx --&gt;</span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-slot</span><span class="token punctuation">&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slot1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是slot1中的内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slot2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是slot2中的内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-slot</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">multipleSlots</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 启用多slot支持</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token comment">// ...</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;my-slot&quot;</span><span class="token operator">:</span> <span class="token string">&quot;components/mySlot&quot;</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>更多详情可查看<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/two-way-binding.html" class="prev">
-        双向绑定
-      </a></span> <span class="next"><a href="/guide/basic/refs.html">
-        获取组件实例/节点信息
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/84.d50d3d09.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/conditional-render.html b/docs-vuepress/.vuepress/dist/guide/basic/conditional-render.html
deleted file mode 100644
index 0bf8e876a2..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/conditional-render.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>条件渲染 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/85.1eed1486.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" aria-current="page" class="active sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="条件渲染"><a href="#条件渲染" class="header-anchor">#</a> 条件渲染</h1> <p>Mpx中的条件渲染与原生小程序中完全一致，详情可以查看<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>简单示例如下:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- 通过 wx:if 的语法来控制需要渲染的元素 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ score &gt; 90 }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> A <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ score &gt; 60 }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> B <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span> C <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-
-    <span class="token comment">&lt;!-- 通过 wx:show 来控制元素的显示隐藏--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ score &gt; 90 }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> very good! <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">score</span><span class="token operator">:</span> <span class="token number">80</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/class-style-binding.html" class="prev">
-        类名样式绑定
-      </a></span> <span class="next"><a href="/guide/basic/list-render.html">
-        列表渲染
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/85.1eed1486.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/css.html b/docs-vuepress/.vuepress/dist/guide/basic/css.html
deleted file mode 100644
index d862ed1e58..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/css.html
+++ /dev/null
@@ -1,173 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>CSS 处理 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/86.1ab04b8d.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" aria-current="page" class="active sidebar-link">CSS 处理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/css.html#css-预编译" class="sidebar-link">CSS 预编译</a></li><li class="sidebar-sub-header"><a href="/guide/basic/css.html#公共样式复用" class="sidebar-link">公共样式复用</a></li><li class="sidebar-sub-header"><a href="/guide/basic/css.html#css-压缩" class="sidebar-link">CSS 压缩</a></li></ul></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-处理"><a href="#css-处理" class="header-anchor">#</a> CSS 处理</h1> <h2 id="css-预编译"><a href="#css-预编译" class="header-anchor">#</a> CSS 预编译</h2> <p>Mpx 支持 CSS 预编译处理，你可以通过在 style 标签上设置 <code>lang</code> 属性，来指定使用的 CSS 预处理器，此外需要在对应的 webpack 配置文件中
-加入对应的 loader 配置</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 使用 stylus --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
-  .nav
-    width 100px
-    height 80px
-    color #f90
-    &amp;<span class="token punctuation">:</span>hover
-      background-color #f40
-      color #fff
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
-
-// getRules 配置文件
-rules: [
-    {
-        test: /\.styl(us)?$/,
-        use: [
-            MpxWebpackPlugin.wxssLoader(),
-            'stylus-loader'
-        ]
-    }
-]
-</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 使用 sass  --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
-  <span class="token selector">.nav</span> <span class="token punctuation">{</span>
-    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
-    <span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
-    <span class="token selector">color: #f90
-    &amp;:hover</span> <span class="token punctuation">{</span>
-      <span class="token property">background-color</span><span class="token punctuation">:</span> #f40<span class="token punctuation">;</span>
-      <span class="token property">color</span><span class="token punctuation">:</span> #fff
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
-
-// getRules 配置文件
-rules: [
-    {
-        test: /\.scss$/,
-        use: [
-            'css-loader',
-            'sass-loader'
-        ]
-    }
-]
-</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 使用 less --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
-  <span class="token selector">.size</span> <span class="token punctuation">{</span>
-    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
-    <span class="token property">height</span><span class="token punctuation">:</span> 80px
-  <span class="token punctuation">}</span>
-  <span class="token selector">.nav</span> <span class="token punctuation">{</span>
-    .<span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token property">color</span><span class="token punctuation">:</span> #f90<span class="token punctuation">;</span>
-    <span class="token selector">&amp;:hover</span> <span class="token punctuation">{</span>
-      <span class="token property">background-color</span><span class="token punctuation">:</span> #f40<span class="token punctuation">;</span>
-      <span class="token property">color</span><span class="token punctuation">:</span> #fff
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
-
-// getRules 配置文件
-rules: [
-    {
-        test: /\.less$/,
-        use: [
-            'css-loader',
-            'less-loader'
-        ]
-    }
-]
-
-</code></pre></div><h2 id="公共样式复用"><a href="#公共样式复用" class="header-anchor">#</a> 公共样式复用</h2> <p>为了达到最大限度的样式复用，Mpx 提供了以下两种方式实现公共样式抽离，但是最终打包的效果有所区别。</p> <div class="language-styl extra-class"><pre class="language-styl"><code><span class="token selector"><span class="token comment">// styles/mixin.styl</span>
-.header-styl</span>
-  <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">%</span></span>
-  <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">px</span></span>
-  <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#f00</span></span>
-</code></pre></div><h3 id="style-src-复用"><a href="#style-src-复用" class="header-anchor">#</a> style src 复用</h3> <p>通过给 style 标签添加 src 属性引入外部样式，最终公共样式代码只会打包一份。</p> <div class="language-template extra-class"><pre class="language-text"><code>&lt;!-- index.mpx --&gt;
-&lt;style lang=&quot;stylus&quot; src=&quot;../styles/common.styl&quot;&gt;&lt;/style&gt;
-</code></pre></div><div class="language-template extra-class"><pre class="language-text"><code>&lt;!-- list.mpx --&gt;
-&lt;style lang=&quot;stylus&quot; src=&quot;../styles/common.styl&quot;&gt;&lt;/style&gt;
-</code></pre></div><p>Mpx 将 common.styl 中的代码经过 loader 编译后生成一份单独的 wxss 文件，这样既实现了样式抽离，又能节省打包后的代码体积。</p> <h3 id="import-复用"><a href="#import-复用" class="header-anchor">#</a> @import 复用</h3> <p>如果指定 style 标签的 lang 属性并且使用 @import 导入样式，那么这个文件经过对应的 loader 处理之后的内容会重复打包到引用它的文件目录下，并不会抽离成单独的文件，这样无形中增加了代码体积。</p> <div class="language-template extra-class"><pre class="language-text"><code>&lt;!-- index.mpx --&gt;
-&lt;style lang=&quot;stylus&quot;&gt;
-  @import &quot;../styles/mixin.styl&quot;
-&lt;/style&gt;
-</code></pre></div><div class="language-template extra-class"><pre class="language-text"><code>&lt;!-- list.mpx --&gt;
-&lt;style lang=&quot;less&quot;&gt;
-  @import &quot;../styles/mixin.less&quot;;
-&lt;/style&gt;
-</code></pre></div><p>如果导入的是一份 css 文件，则最终打包后的效果与 style src 一致。</p> <div class="language-styl extra-class"><pre class="language-styl"><code><span class="token selector"><span class="token comment">// styles/mixin.css</span>
-.header-css <span class="token punctuation">{</span></span>
-  <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">;</span></span>
-  <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span></span>
-  <span class="token property-declaration"><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#f00</span><span class="token punctuation">;</span></span>
-<span class="token punctuation">}</span>
-</code></pre></div><div class="language-template extra-class"><pre class="language-text"><code>&lt;!-- index.mpx --&gt;
-&lt;style&gt;
-  @import &quot;../styles/mixin.css&quot;;
-&lt;/style&gt;
-</code></pre></div><div class="language-template extra-class"><pre class="language-text"><code>&lt;!-- list.mpx --&gt;
-&lt;style&gt;
-  @import &quot;../styles/mixin.css&quot;;
-&lt;/style&gt;
-</code></pre></div><p>对于多个页面或组件公用的样式，建议使用 style src 形式引入，避免一份样式被内联打成多份，同时还能使用 less、scss 等提升编码效率。</p> <h2 id="css-压缩"><a href="#css-压缩" class="header-anchor">#</a> CSS 压缩</h2> <p>在 production 模式下，框架默认会使用 <a href="https://www.cssnano.cn/" target="_blank" rel="noopener noreferrer"><code>cssnano</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 对 css 内容进行压缩。</p> <p>框架默认内置 cssnano 的 default 预设，默认配置为：</p> <div class="language-js extra-class"><pre class="language-js"><code>cssnanoConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">preset</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'cssnano-preset-default'</span><span class="token punctuation">,</span> minimizeOptions<span class="token punctuation">.</span>optimisation <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>以上配置为框架内置，开发者无需手动配置。</p> <p>如果你想要使用 cssnano advanced 预设，则需要在 wxssLoader 中传入配置开启</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
-  <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(wxss|acss|css|qss|ttss|jxss|ddss)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-  <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxssLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">minimize</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">advanced</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 使用 cssnano advanced preset</span>
-        <span class="token literal-property property">optimisation</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token string-property property">'autoprefixer'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-          <span class="token string-property property">'discardUnused'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-          <span class="token string-property property">'mergeIdents'</span><span class="token operator">:</span> <span class="token boolean">true</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span>
-</code></pre></div><p>同时也需要安装 advanced 依赖：</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-D</span> cssnano-preset-advanced
-</code></pre></div><p>optimisation 配置可以点击<a href="https://www.cssnano.cn/docs/what-are-optimisations/" target="_blank" rel="noopener noreferrer">详情<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>查看更多配置项。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/template.html" class="prev">
-        模板语法
-      </a></span> <span class="next"><a href="/guide/basic/reactive.html">
-        数据响应
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/86.1ab04b8d.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/event.html b/docs-vuepress/.vuepress/dist/guide/basic/event.html
deleted file mode 100644
index 2ad5251974..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/event.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>事件处理 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/87.392384e7.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" aria-current="page" class="active sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="事件处理"><a href="#事件处理" class="header-anchor">#</a> 事件处理</h1> <p>Mpx在事件处理上基于原生小程序，支持原生小程序的全部事件处理技术规范，在此基础上新增了事件处理内联传参的增强机制。</p> <p>原生小程序事件处理详情请参考<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>增强的内联传参能力对于传递参数的个数和类型没有特殊限制，可以传递各种字面量，可以传递组件数据，甚至可以传递for中的item和index，
-当内联事件处理器中需要访问原始事件对象时，可以传递<code>$event</code>特殊关键字作为参数，在事件处理器的对应参数位置即可获取。</p> <p>示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--原生小程序语法，通过dataset进行传参--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">data-name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--Mpx增强语法，模板内联传参，方便简洁--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTapInline('b')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--参数支持传递字面量和组件数据--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTapInline(name)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--参数同样支持传递for作用域下的item/index--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{names}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTapInline(item)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--需要使用原始事件对象时可以传递$event特殊关键字--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTapInlineWithEvent('g', $event)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>g<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'c'</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">names</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">,</span> <span class="token string">'f'</span><span class="token punctuation">]</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">handleTap</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'name:'</span><span class="token punctuation">,</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token comment">// 直接通过参数获取数据，直观方便</span>
-      <span class="token function">handleTapInline</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'name:'</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token function">handleTapInlineWithEvent</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'name:'</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'event:'</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/list-render.html" class="prev">
-        列表渲染
-      </a></span> <span class="next"><a href="/guide/basic/two-way-binding.html">
-        双向绑定
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/87.392384e7.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/ide.html b/docs-vuepress/.vuepress/dist/guide/basic/ide.html
deleted file mode 100644
index 1a6dc86a12..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/ide.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>IDE 高亮配置 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/33.936d018e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" aria-current="page" class="active sidebar-link">IDE 高亮配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/ide.html#intellij" class="sidebar-link">IntelliJ</a></li><li class="sidebar-sub-header"><a href="/guide/basic/ide.html#vscode" class="sidebar-link">vscode</a></li></ul></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="ide-高亮配置"><a href="#ide-高亮配置" class="header-anchor">#</a> IDE 高亮配置</h1> <ul><li><a href="/guide/basic/ide.html#IntelliJ">IntelliJ</a></li> <li><a href="/guide/basic/ide.html#vscode">vscode</a></li></ul> <h2 id="intellij"><a href="#intellij" class="header-anchor">#</a> IntelliJ</h2> <p>如果使用 IntelliJ 系 IDE 开发，可将<code>.mpx</code>后缀文件关联到<code>vue</code>模板类型，按<code>vue</code>模板解析。</p> <p><img src="/assets/img/start-tips2.7d8836f8.png" alt="关联文件类型"></p> <p>但会报一个<code>warning</code>提示有重复的<code>script</code>标签，关闭该警告即可。</p> <p><img src="/assets/img/start-tips1.3b76ac97.png" alt="关闭警告"></p> <h2 id="vscode"><a href="#vscode" class="header-anchor">#</a> vscode</h2> <blockquote><p><a href="https://github.com/mpx-ecology/vscode-mpx" target="_blank" rel="noopener noreferrer">git地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，有任何vscode插件的问题和需求可在仓库中提issue</p></blockquote> <blockquote><p>下载</p></blockquote> <ol><li><p><a href="https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx" target="_blank" rel="noopener noreferrer">下载地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>也可直接在vscode扩展处搜索mpx即可下载</p></li></ol> <blockquote><p>使用</p></blockquote> <h3 id="插件功能介绍"><a href="#插件功能介绍" class="header-anchor">#</a> 插件功能介绍</h3> <ul><li>高亮</li> <li>emmet</li> <li>跳转定义</li> <li>自动补全</li> <li>eslint</li> <li>格式化</li></ul> <p><a href="https://gift-static.hongyibo.com.cn/static/kfpub/3227/vscodes.mp4" target="_blank" rel="noopener noreferrer">视频介绍<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h4 id="高亮"><a href="#高亮" class="header-anchor">#</a> 高亮</h4> <p>  与其他语言插件无异，提供相应代码的高亮，因为Mpx分为四个模块，所以每个模块都有相应的语法高亮，还包括注释快捷键，也区分了相应模块，比如<code>&lt;template&gt;</code>中使用的是html的高亮，且注释是<code>&lt;!-- --&gt;</code>,而<code>&lt;script&gt;</code>中就是<code>js</code>的高亮，注释是<code>//</code></p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/codelight.jpeg" alt="image"></p> <h4 id="emmet"><a href="#emmet" class="header-anchor">#</a> emmet</h4> <p>  早在使用sublime时就在使用emmet插件，以提高写HTML的效率。</p> <p>  比如键入多个<code>&lt;view&gt;</code>标签：<code>view*n</code>。</p> <p>  比如一些标签的快速键入，配合<code>tab</code>或者<code>Enter</code>键快速键入</p> <p>  不仅仅是<code>&lt;template&gt;</code>模块，css，scss，less，stylus，sass模块也有相应的快捷指令</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200258.gif" alt="image"> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200331.gif" alt="image"></p> <p>提示组件标签</p> <p>我们可以像编写 html 一样，只要输入对应的单词就会出现对应的标签，比如输入的是 view ，然后按下 tab 键，即可输入 <code>&lt;view&gt;&lt;/view&gt;</code> 标签。</p> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi1_v2.png" width="500" alt="图片名称"> <p>组件指令提示</p> <p>指令的提示类似于 vue 文件一样，只要输入对应的指令前缀就会出现对应的完整指令，比如输入的是 wx ，然后按下 tab 键，就可以输入 wx:if=&quot;&quot; 指令。</p> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi2_v2.png" width="500" alt="图片名称"> <p>组件属性提示</p> <p>微信小程序的每个组件都有一些属性选项，在编写组件的时候输入前缀就会出现完整的属性，并且包含了属性的说明和属性的类型。</p> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi3_v2.png" width="500" alt="图片名称"> <p>组件事件提示</p> <p>给组件绑定事件，也是只需要输入事件的前缀，就会出现完整的事件列表，然后按下 tab 键，即可输入 bindtap=&quot;&quot; 类似的事件。</p> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/tishi4_v2.png" width="500" alt="图片名称"> <h4 id="跳转定义"><a href="#跳转定义" class="header-anchor">#</a> 跳转定义</h4> <p>  command + 鼠标左键 查看定义位置，也可以在当前文件查看内容，决定是否跳转</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-200848.gif" alt="image"></p> <h4 id="自动补全"><a href="#自动补全" class="header-anchor">#</a> 自动补全</h4> <p>  毕竟Mpx是个小程序的框架，对于微信和支付宝的api快速补全snippets没有怎么能行，可在<code>&lt;script&gt;</code>中通过键入部分文字插入相应的代码块</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/6168/QQ20210728-201858.gif" alt="image"></p> <h4 id="eslint"><a href="#eslint" class="header-anchor">#</a> eslint</h4> <p>  eslint这块要分两部分来讲，一部分是插件实现了按照模块区分的简单的eslint，另一部分是要配合eslint的vscode插件，配置.eslintrc高阶的eslint检测。</p> <p>部分一可通过配置开关</p> <p><code>&lt;template&gt;</code>是通过我们自己实现的eslint插件<code>eslint-plugin-mpx</code>，通过调eslint提供的引擎api，返回eslint校验的结果，我们再进行展示。</p> <p><code>&lt;script&gt;</code>中是通过调用typescript提供的检测js代码的api来进行检测，返回
-的校验结果也是不太符合语法的，基础的检测，不会过于苛刻</p> <p><code>&lt;style&gt;</code>中会根据lang的设定进行相应的检测，此检测是vscode官方提供的库
-<code>vscode-css-languageservice</code></p> <p><code>&lt;json&gt;</code>模块同tempalte，用到了一个eslint插件<code>eslint-plugin-jsonc</code>来检测json的部分</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/vscodeseting.png" alt="image"></p> <p>部分二可参照此<a href="https://github.com/mpx-ecology/vscode-mpx/issues/35" target="_blank" rel="noopener noreferrer">链接<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>配置</p> <h4 id="代码格式化"><a href="#代码格式化" class="header-anchor">#</a> 代码格式化</h4> <p>支持代码格式化 JavaScript  (ts)· JSON · CSS (less/scss/stylus) · WXML，通过鼠标右键选择代码格式化文档。</p> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/format_v2.png" width="500" alt="图片名称"> <p>默认每个区块都是调用 Prettier 这个库来完成格式化的，当然也可以在设置中切换成使用其他库。</p> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/format2_v3.png" width="500" alt="图片名称"> <p>如果切换成 none 将会禁用格式化。</p> <p>Prettier 支持从项目根目录读取 .prettierrc 配置文件。配置选项可以参考 <a href="https://prettier.io/docs/en/configuration.html" target="_blank" rel="noopener noreferrer">官方<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 文档。.prettierrc 文件可以使用 JSON 语法编写，比如下面这样：</p> <div class="language- extra-class"><pre class="language-text"><code>{
-  &quot;tabWidth&quot;: 4,
-  &quot;semi&quot;: false,
-  &quot;singleQuote&quot;: true
-}
-</code></pre></div><p>注意：由于 Prettier 这个库不支持格式化 stylus 语法，所以 stylus 的格式化使用另外一个 stylus-supremacy 库，配置 stylus 格式化规则只能在编辑器的 settings 中配置。</p> <div class="language- extra-class"><pre class="language-text"><code>&quot;mpx.format.defaultFormatterOptions&quot;: {
-  &quot;stylus-supremacy&quot;: {
-    &quot;insertColons&quot;: false, // 不使用括号
-    &quot;insertSemicolons&quot;: false, // 不使用冒号
-    &quot;insertBraces&quot;: false, // 不使用分号
-    &quot;insertNewLineAroundImports&quot;: true, // import之后插入空行
-    &quot;insertNewLineAroundBlocks&quot;: false // 每个块不添加空行
-  }
-}
-</code></pre></div><p>总结一下，配置格式化有两种方式，一种是使用 .prettierrc 文件的形式配置，另一种是在编辑器的 settings 中自行配置，通过 mpx.format.defaultFormatterOptions 选项。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/single-file.html" class="prev">
-        单文件开发
-      </a></span> <span class="next"><a href="/guide/basic/template.html">
-        模板语法
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/33.936d018e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/intro.html b/docs-vuepress/.vuepress/dist/guide/basic/intro.html
deleted file mode 100644
index f96f40a674..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/intro.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>介绍 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/88.a95133cd.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" aria-current="page" class="active sidebar-link">介绍</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/intro.html#mpx是什么？" class="sidebar-link">Mpx是什么？</a></li><li class="sidebar-sub-header"><a href="/guide/basic/intro.html#mpx提供了哪些能力？" class="sidebar-link">Mpx提供了哪些能力？</a></li><li class="sidebar-sub-header"><a href="/guide/basic/intro.html#对比其他小程序框架" class="sidebar-link">对比其他小程序框架</a></li></ul></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h1> <h2 id="mpx是什么？"><a href="#mpx是什么？" class="header-anchor">#</a> Mpx是什么？</h2> <p>Mpx是一款致力于提高小程序开发体验和开发效率的增强型小程序框架，通过Mpx，我们能够高效优雅地开发出具有极致性能的优质小程序应用，并将其输出到各大小程序平台和web平台中运行。</p> <p>Mpx的核心设计理念在于增强，这意味着Mpx是对小程序原生开发标准的补强和扩充，同时也兼容了原生开发标准。Mpx的一个设计理念在于尽可能地依赖小程序原生的自有能力，如路由系统，自定义组件，事件系统和slot等能力，因此用户在使用Mpx开发小程序时，需要对原生小程序开发有一定程度的掌握。所幸小程序开发本身并不困难，我们也会在本文档中对必要的原生小程序开发知识进行一定程度地说明。</p> <p>微信小程序作为小程序的开山鼻祖，具有最完善的生态和最全面的特性支持，后来的所有小程序平台在技术方案和代码语法上都与微信小程序高度相似，Mpx目前完善支持了以微信小程序增强语法为base的跨平台输出能力，本文档在介绍原生小程序开发相关的部分时也会以微信小程序为例。</p> <p>最后，Mpx是一个开发框架，不是组件库，这一点经常会有开发者搞混。Mpx兼容业内已有的小程序组件库，如vant/iview等，我们之后也会开源内部基于Mpx开发的跨端组件库。</p> <h2 id="mpx提供了哪些能力？"><a href="#mpx提供了哪些能力？" class="header-anchor">#</a> Mpx提供了哪些能力？</h2> <h3 id="单文件开发-sfc"><a href="#单文件开发-sfc" class="header-anchor">#</a> 单文件开发(SFC)</h3> <p>Mpx使用类似Vue的单文件开发模式，小程序原本的template/js/style/json都可以写在单个的.mpx文件中，清晰便捷。</p> <h3 id="数据响应"><a href="#数据响应" class="header-anchor">#</a> 数据响应</h3> <p>数据响应是Mpx提供的核心增强能力，该能力主要受Vue的启发，主要包含数据赋值响应，watch api和computed计算属性等能力，关于该能力更详细的介绍可以查看<a href="/guide/basic/reactive.html">这里</a></p> <h3 id="增强的模板语法"><a href="#增强的模板语法" class="header-anchor">#</a> 增强的模板语法</h3> <p>同样受到Vue的启发，Mpx提供了很多增强模板语法便于开发者方便快捷地进行视图开发，主要包含以下：</p> <ul><li><a href="/guide/basic/class-style-binding.html#样式绑定">wx:style动态样式</a></li> <li><a href="/guide/basic/class-style-binding.html#类名绑定">wx:class动态类名</a></li> <li><a href="/guide/basic/two-way-binding.html">wx:model双向绑定</a></li> <li><a href="/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性">wx:model-prop双向绑定属性</a></li> <li><a href="/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性">wx:model-event双向绑定事件</a></li> <li><a href="/guide/basic/two-way-binding.html#更改双向绑定事件数据路径">wx:model-value-path双向绑定数据路径</a></li> <li><a href="/guide/basic/two-way-binding.html#双向绑定过滤器">wx:model-filter双向绑定过滤器</a></li> <li><a href="/guide/basic/refs.html">wx:ref获取实例</a></li> <li><a href="/guide/basic/conditional-render.html">wx:show隐藏显示</a></li> <li><a href="/guide/basic/component.html#动态组件">component动态组件</a></li> <li><a href="/guide/basic/event.html">事件处理内联传参</a></li> <li><a href="/guide/basic/conditional-render.html">模板条件编译</a></li></ul> <h3 id="极致性能"><a href="#极致性能" class="header-anchor">#</a> 极致性能</h3> <p>Mpx在性能上做到了极致，我们在框架中通过模板数据依赖收集进行了深度的setData优化，做到了程序上的最优，让用户能够专注于业务开发；</p> <p>其次，Mpx的编译构建完全基于依赖收集，支持按需进行的npm构建，能够自动根据用户的分包配置抽离共用模块，确保用户最终产出项目的包体积最优；</p> <p>最后，Mpx的运行时框架部分仅占用51KB；</p> <p>Mpx和业内其他框架的运行时性能对比可以参考<a href="https://github.com/hiyuki/mp-framework-benchmark/blob/master/README.md" target="_blank" rel="noopener noreferrer">这篇文章<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="状态管理"><a href="#状态管理" class="header-anchor">#</a> 状态管理</h3> <p>Mpx借鉴Vuex的设计实现一套与框架搭配使用的状态管理(store)工具，除了支持Vuex中已有的特性外，我们还创新地提出了一种多实例store的跨团队状态管理模式，我们在业务中实际使用后普遍认为该设计比原有的modules更加灵活方便，更多详情可以<a href="/guide/advance/store.html">查看这里</a></p> <h3 id="编译构建"><a href="#编译构建" class="header-anchor">#</a> 编译构建</h3> <p>Mpx的编译构建以webpack为基础，针对小程序项目结构深度定制开发了一个webpack插件和一系列loaders，整个构建过程完全基于依赖收集按需打包，兼容大部分webpack自身能力及生态，此外Mpx的编译构建还支持以下能力：</p> <ul><li><a href="/guide/advance/npm.html">npm构建</a></li> <li><a href="/guide/advance/subpackage.html#分包">分包构建</a></li> <li><a href="/guide/advance/subpackage.html">包体积优化</a></li> <li><a href="/guide/advance/progressive.html#原生接入">原生组件支持</a></li> <li><a href="/guide/advance/ability-compatible.html">原生能力兼容(custom-tab-bar/workers/云开发等)</a></li> <li><a href="/guide/advance/plugin.html">小程序插件</a></li> <li><a href="/guide/basic/template.html#模板预编译">模板预编译</a></li> <li><a href="/guide/basic/css.html">css预编译</a></li> <li><a href="/guide/advance/image-process.html">静态资源处理</a></li></ul> <h3 id="跨平台能力"><a href="#跨平台能力" class="header-anchor">#</a> 跨平台能力</h3> <p>Mpx支持全部小程序平台(微信，支付宝，百度，头条，qq)的增强开发，同时支持将一份基于微信增强的业务源码输出到全部的小程序平台和web平台中运行，也即将支持输出快应用的能力，更多详情请<a href="/guide/advance/platform.html">查看这里</a></p> <h3 id="完善的周边能力"><a href="#完善的周边能力" class="header-anchor">#</a> 完善的周边能力</h3> <p>除了上述的核心能力外，Mpx还提供了丰富的周边能力支持，主要包括以下能力：</p> <ul><li><a href="/guide/extend/fetch.html">网络请求</a></li> <li><a href="/guide/extend/mock.html">数据mock</a></li> <li><a href="/guide/extend/api-proxy.html">api增强抹平</a></li> <li><a href="/api/extend.html#webview-bridge">webview抹平</a></li> <li><a href="/guide/tool/ts.html">Typescript支持</a></li> <li><a href="/guide/advance/i18n.html">I18n国际化</a></li> <li><a href="/guide/tool/unit-test.html">单元测试</a></li> <li><a href="/guide/tool/e2e-test.html">E2E测试</a></li></ul> <p>Mpx具有以下功能特性：</p> <ul><li>数据响应 (赋值响应 / <a href="/guide/basic/reactive.html">watch</a> / <a href="/guide/basic/reactive.html">computed</a>)</li> <li>增强模板语法 (<a href="/guide/basic/component.html#动态组件">动态组件</a> / <a href="/guide/basic/class-style-binding.html">样式绑定 / 类名绑定 </a> / <a href="/guide/basic/event.html">内联事件函数</a> / <a href="/guide/basic/two-way-binding.html">双向绑定</a> / <a href="/guide/basic/refs.html">refs</a>)</li> <li>极致性能 (<a href="/guide/understand/runtime.html">运行时性能优化</a> / <a href="/guide/advance/subpackage.html#分包">包体积优化</a> / 框架运行时体积14KB)</li> <li><a href="/guide/understand/compile.html">高效强大的编译构建</a> (基于webpack / 兼容webpack生态 / 兼容原生小程序 / 完善支持npm场景下的分包输出 / 高效调试)</li> <li><a href="/guide/basic/single-file.html">单文件组件开发</a></li> <li><a href="/guide/advance/progressive.html">渐进接入 / 原生组件支持</a></li> <li><a href="/guide/advance/store.html">状态管理</a> (Vuex规范 / 支持多实例Store)</li> <li>跨团队开发 (<a href="/guide/advance/subpackage.html#packages">packages</a>)</li> <li>逻辑复用 (<a href="/guide/advance/mixin.html">mixins</a>)</li> <li><a href="/guide/extend/">周边能力支持</a> (fetch / api增强 / mock / webview-bridge)</li> <li>脚手架支持</li> <li><a href="/guide/advance/platform.html#多平台支持">多平台增强</a> (支持在微信、支付宝、百度、qq、头条小程序平台中进行增强开发)</li> <li><a href="/guide/advance/platform.html#跨平台编译">跨平台编译</a> (支持以微信为base，将一套代码转换输出到支付宝、百度、qq、头条小程序平台和<a href="/guide/advance/platform.html#跨平台输出web">web平台</a>中运行)</li> <li><a href="/guide/tool/ts.html">TypeScript支持</a> (基于ThisType实现了完善的类型推导)</li> <li><a href="/guide/tool/i18n.html">I18n国际化</a></li> <li>单元测试支持 (即将到来)</li> <li>快应用输出 (即将到来)</li></ul> <h2 id="对比其他小程序框架"><a href="#对比其他小程序框架" class="header-anchor">#</a> 对比其他小程序框架</h2> <p>目前业内的小程序框架主要分为两类，一类是以uniapp，taro2为代表的静态编译型框架，这类框架以静态编译为主要手段，将React和Vue开发的业务源码转换到小程序环境中进行适配运行。这类框架的主要优点在于web项目迁移方便，跨端能力较强。但是由于React/Vue等web框架的DSL与小程序本身存在较大差距，无法完善支持原web框架的全部能力，开发的时候容易踩坑。</p> <p>另一类是以kbone，taro3为代表的运行时框架，这类框架利用小程序本身提供的动态渲染能力，在小程序中模拟出web的运行时环境，让React/Vue等框架直接在上层运行。这类框架的优点在于web项目迁移方便，且在web框架语法能力的支持上比静态编译型的框架要强很多，开发时遇到的坑也会少很多。但是由于模拟的web运行时环境带来了巨大的性能开销，这类框架并不适合用于大型复杂的小程序开发。</p> <p>不同于上面两类框架，Mpx以小程序本身的DSL为基础，通过编译和运行时手段结合对其进行了一系列拓展增强，没有复杂庞大的转译和环境抹平，在提升用户开发体验和效率的同时，既能保障开发的稳定和可预期性，又能保障接近原生的良好性能，非常适合开发大型复杂的小程序应用。</p> <p>在跨端方面，Mpx重点保障跨小程序平台的跨端能力，由于各家小程序标准具有很强的相似性，Mpx在进行跨端输出时，以静态编译为主要手段，辅以灵活便捷的条件编译，保障了跨端输出的性能和可用性。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/start.html" class="prev">
-        快速开始
-      </a></span> <span class="next"><a href="/guide/basic/single-file.html">
-        单文件开发
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/88.a95133cd.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/list-render.html b/docs-vuepress/.vuepress/dist/guide/basic/list-render.html
deleted file mode 100644
index def7b0a120..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/list-render.html
+++ /dev/null
@@ -1,144 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>列表渲染 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/89.213efaae.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" aria-current="page" class="active sidebar-link">列表渲染</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/list-render.html#特殊处理" class="sidebar-link">特殊处理</a></li></ul></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="列表渲染"><a href="#列表渲染" class="header-anchor">#</a> 列表渲染</h1> <p>Mpx中的列表渲染与原生小程序中完全一致，详情可以查看<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <blockquote><p>值得注意的是wx:key与Vue中的key属性的区别，不能使用数据绑定，只能传递普通字符串将数组item中的对应属性作为key，或者传入保留关键字*this将item本身作为key</p></blockquote> <p>下面是简单示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!-- 使用数组中元素的 id属性/保留关键字*this 作为key值  --&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{titleList}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- item 默认代表数组的当前项 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{item.id}}: {{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">titleList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'A'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'C'</span> <span class="token punctuation">}</span>
-      <span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="特殊处理"><a href="#特殊处理" class="header-anchor">#</a> 特殊处理</h2> <p>当列表中一些需要特殊二次处理的数据，可参考下列两种方式</p> <h3 id="computed方式"><a href="#computed方式" class="header-anchor">#</a> computed方式</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!-- 使用数组中元素的 id属性/保留关键字*this 作为key值  --&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{refactorTitleList}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- item 默认代表数组的当前项 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{item.id}}: {{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- bad方式 不可用computed或methods中方法处理 --&gt;</span>
-    <span class="token comment">&lt;!-- &lt;view&gt;{{item.id}}: {{format(item.name)}}&lt;/view&gt; --&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">titleList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'A'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'C'</span> <span class="token punctuation">}</span>
-      <span class="token punctuation">]</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">nameMap</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token string-property property">'1'</span><span class="token operator">:</span> <span class="token string">'mpx'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">refactorTitleList</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>titleList<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-          <span class="token comment">// 列表中需要特殊处理的数据可在computed中处理好再渲染</span>
-          item<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>nameMap<span class="token punctuation">[</span>item<span class="token punctuation">.</span>id<span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>nameMap<span class="token punctuation">[</span>item<span class="token punctuation">.</span>id<span class="token punctuation">]</span> <span class="token operator">:</span> item<span class="token punctuation">.</span>name
-          <span class="token keyword">return</span> item
-        <span class="token punctuation">}</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="wxs方式"><a href="#wxs方式" class="header-anchor">#</a> wxs方式</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>wxs</span> <span class="token attr-name">module</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>foo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    var formatName = function (item, nameMap) {
-      // 这里区别string和number
-      var id = ''+item.id
-      if(nameMap[id]){
-        return nameMap[id];
-      }
-      return item.name;
-    }
-    module.exports = {
-      formatName: formatName
-    };
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>wxs</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!-- 使用数组中元素的 id属性/保留关键字*this 作为key值  --&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{titleList}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- item 默认代表数组的当前项 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{item.id}}: {{foo.formatName(item, nameMap)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">titleList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'A'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'C'</span> <span class="token punctuation">}</span>
-      <span class="token punctuation">]</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">nameMap</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token string-property property">'1'</span><span class="token operator">:</span> <span class="token string">'mpx'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/conditional-render.html" class="prev">
-        条件渲染
-      </a></span> <span class="next"><a href="/guide/basic/event.html">
-        事件处理
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/89.213efaae.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/option-chain.html b/docs-vuepress/.vuepress/dist/guide/basic/option-chain.html
deleted file mode 100644
index f70ea3b9b0..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/option-chain.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>模版内可选链表达式 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/90.ef03688f.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" aria-current="page" class="active sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="模版内可选链表达式"><a href="#模版内可选链表达式" class="header-anchor">#</a> 模版内可选链表达式</h1> <p>Mpx提供了在模版中使用可选链<code>?.</code>访问变量属性的能力，用法/能力和JS的可选链基本一致，可以在任意被<code>{{}}</code>所包裹的模版语法内使用。</p> <blockquote><p>实现原理是在编译时将使用<code>?.</code>的部分转化为<code>wxs</code>函数调用，运行时通过<code>wxs</code>访问变量属性，模拟出可选链的效果。</p></blockquote> <p>使用示例：</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ a?.b }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ a?.c + a?.d }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ a?.d || [] }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ a?.d ? 'a' : 'b' }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ a?.g[e?.d] }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-    <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">123</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">g</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-                <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token number">321</span>
-            <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">e</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token literal-property property">d</span><span class="token operator">:</span> <span class="token string">'d'</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/refs.html" class="prev">
-        获取组件实例/节点信息
-      </a></span> <span class="next"><a href="/guide/advance/store.html">
-        状态管理（store）
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/90.ef03688f.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/reactive.html b/docs-vuepress/.vuepress/dist/guide/basic/reactive.html
deleted file mode 100644
index 71fe87fcb3..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/reactive.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>数据响应 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/91.43930d52.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" aria-current="page" class="active sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="数据响应"><a href="#数据响应" class="header-anchor">#</a> 数据响应</h1> <p>Vue中最为开发者们所津津乐道的特性就是其数据响应特性，Vue中的数据响应特性主要包含：响应数据赋值、watch观察数据和computed计算属性，该能力让我们能够以非常直观简洁的方式建立起数据与数据之间/数据与视图之间的绑定依赖关系，大幅提升复杂webapp的开发体验和开发效率。</p> <p>受此启发，Mpx通过增强的方式在小程序开发中提供了完整的数据响应特性，在2.5.x版本前，Mpx通过mobx实现内部和核心数据响应，在2.5.x版本之后，从数据响应性能、完整度和运行时包体积等多方面角度考虑，我们借鉴了Vue2的设计，在内部自行维护了一套精简高效的数据响应系统，全面移除了对于mobx的依赖。</p> <p>在新的响应系统中，所有的使用方法和使用限制都和Vue保持一致，关于数据响应的原理和使用限制可以参考<a href="https://cn.vuejs.org/v2/guide/reactivity.html" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>下面是一个小程序数据响应的简单示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>Num: {{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>Minus num: {{mnum}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>Num plus: {{nump}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{info.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{info.age}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{info.age}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token comment">// data中定义的数据会在初始化时进行数据响应处理</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">info</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token comment">// 配置中直接定义watch</span>
-    <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">num</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token comment">// 定义计算属性，模板中可以直接访问</span>
-    <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">mnum</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> <span class="token operator">-</span><span class="token keyword">this</span><span class="token punctuation">.</span>num
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">nump</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token function">get</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>num <span class="token operator">+</span> <span class="token number">1</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token comment">// 支持计算属性的setter</span>
-        <span class="token function">set</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token keyword">this</span><span class="token punctuation">.</span>num <span class="token operator">=</span> val <span class="token operator">-</span> <span class="token number">1</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">onReady</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 使用实例方法定义watch，可以传递追踪函数更加灵活</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>nump <span class="token operator">-</span> <span class="token keyword">this</span><span class="token punctuation">.</span>mnum
-      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-      <span class="token comment">// 每隔一秒进行一次更新，相关watcher会被触发，视图也会发生更新</span>
-      <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>num<span class="token operator">++</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
-      <span class="token comment">// 使用$set新增响应属性，视图同样能够得到更新</span>
-      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/css.html" class="prev">
-        CSS 处理
-      </a></span> <span class="next"><a href="/guide/basic/class-style-binding.html">
-        类名样式绑定
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/91.43930d52.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/refs.html b/docs-vuepress/.vuepress/dist/guide/basic/refs.html
deleted file mode 100644
index 1ce9cdb5d7..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/refs.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>获取组件实例/节点信息 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/92.ae5e9611.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" aria-current="page" class="active sidebar-link">获取组件实例/节点信息</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/refs.html#在列表渲染中使用wx-ref" class="sidebar-link">在列表渲染中使用wx:ref</a></li></ul></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="获取组件实例-节点信息"><a href="#获取组件实例-节点信息" class="header-anchor">#</a> 获取组件实例/节点信息</h1> <p>微信小程序中原生提供了<code>selectComponent/SelectorQuery.select</code>方法获取自定义组件实例和wxml节点信息，但是该api使用起来不太方便，并且不具备平台无关性，我们提供了增强指令<code>wx:ref</code>用于获取组件实例及节点信息，该指令的使用方式同vue中的ref类似，在模板中声明了<code>wx:ref</code>后，在组件ready后用户可以通过<code>this.$refs</code>获取对应的组件实例或节点查询对象(NodeRefs)，调用响应的组件方法或者获取视图节点信息。</p> <blockquote><p><code>wx:ref</code>其实也是模板编译和运行时注入结合实现的语法糖，本质还是通过原生小程序平台提供的能力进行获取，其实现的主要意义在于抹平跨平台差异以及提升用户的使用体验。</p></blockquote> <p>简单的使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-      <span class="token comment">&lt;!-- my-header 为一个组件，组件内部定义了一个 show 方法 --&gt;</span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-header</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>myHeader<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-header</span><span class="token punctuation">&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-    <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token function">ready</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token comment">// 通过 this.$refs 获取view的节点查询对象</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">fields</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token comment">// res 就是我们要拿到的节点大小</span>
-        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-        <span class="token comment">// 通过 this.$refs 可直接获取组件实例</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>myHeader<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span>  <span class="token comment">// 拿到组件实例，调用组件内部的方法</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="在列表渲染中使用-wx-ref"><a href="#在列表渲染中使用-wx-ref" class="header-anchor">#</a> 在列表渲染中使用<code>wx:ref</code></h2> <p>在列表渲染中定义的<code>wx:ref</code>存在多个实例/节点，Mpx会在模板编译中判断某个<code>wx:ref</code>是否存在于列表渲染<code>wx:for</code>中，是的情况下在注入<code>this.$refs</code>时会通过<code>selectAllComponents/SelectQuery.selectAll</code>方法获取组件实例数组或数组节点查询对象，确保开发者能拿到列表渲染中所有的组件实例/节点信息。</p> <p>使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- list 组件 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{listData}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.name}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!-- view 节点 --&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{listData}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">listData</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'B'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'C'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token punctuation">]</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">ready</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 通过 this.$refs.list 获取的是组件实例的数组</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token comment">// 对每一个组件实例的操作...</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-      <span class="token comment">// 通过 this.$refs.test 获取的是节点查询对象，通过相关的方法操作节点</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>test<span class="token punctuation">.</span><span class="token function">fields</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token comment">// 此处拿到的 res 是一个数组，包含了列表渲染中的所有节点的大小信息</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/component.html" class="prev">
-        自定义组件
-      </a></span> <span class="next"><a href="/guide/basic/option-chain.html">
-        模版内可选链表达式
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/92.ae5e9611.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/single-file.html b/docs-vuepress/.vuepress/dist/guide/basic/single-file.html
deleted file mode 100644
index 4b872a020a..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/single-file.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>单文件开发 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/93.3cdab647.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" aria-current="page" class="active sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="单文件开发"><a href="#单文件开发" class="header-anchor">#</a> 单文件开发</h1> <p>小程序规范中每个页面和组件都是由四个文件描述组成的，wxml/js/wxss/json，分别描述了组件/页面的视图模板，执行逻辑，样式和配置，由于这四个部分彼此之间存在相关性，比如模板中的组件需要在json中注册，数据需要在js中定义，这种离散的文件结构在实际开发的时候体验并不理想；受Vue单文件开发的启发，Mpx也提供了类似的单文件开发模式，拓展名为.mpx。</p> <p>从下面的简单例子可以看出，.mpx中的四个区块分别对应了原生规范中的四个文件，Mpx在执行编译构建时会通过内置的<code>mpx-loader</code>收集依赖，并将.mpx的文件转换输出为原生规范中的四个文件。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--对应wxml文件--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-<span class="token comment">&lt;!--对应js文件--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token function">onLoad</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">onReady</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-<span class="token comment">&lt;!--对应wxss文件--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
-<span class="token comment">&lt;!--对应json文件--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/list&quot;</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/intro.html" class="prev">
-        介绍
-      </a></span> <span class="next"><a href="/guide/basic/ide.html">
-        IDE 高亮配置
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/93.3cdab647.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/start.html b/docs-vuepress/.vuepress/dist/guide/basic/start.html
deleted file mode 100644
index 6aadde0f98..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/start.html
+++ /dev/null
@@ -1,132 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>快速开始 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/94.72df7b53.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" aria-current="page" class="active sidebar-link">快速开始</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/start.html#安装脚手架" class="sidebar-link">安装脚手架</a></li><li class="sidebar-sub-header"><a href="/guide/basic/start.html#创建项目安装依赖" class="sidebar-link">创建项目安装依赖</a></li><li class="sidebar-sub-header"><a href="/guide/basic/start.html#编译构建" class="sidebar-link">编译构建</a></li><li class="sidebar-sub-header"><a href="/guide/basic/start.html#预览调试" class="sidebar-link">预览调试</a></li><li class="sidebar-sub-header"><a href="/guide/basic/start.html#开始code" class="sidebar-link">开始code</a></li><li class="sidebar-sub-header"><a href="/guide/basic/start.html#跨平台输出" class="sidebar-link">跨平台输出</a></li></ul></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="快速开始"><a href="#快速开始" class="header-anchor">#</a> 快速开始</h1> <h2 id="安装脚手架"><a href="#安装脚手架" class="header-anchor">#</a> 安装脚手架</h2> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> i <span class="token parameter variable">-g</span> @mpxjs/cli
-</code></pre></div><blockquote><p>@mpxjs/cli文档 https://github.com/mpx-ecology/mpx-cli</p></blockquote> <h2 id="创建项目安装依赖"><a href="#创建项目安装依赖" class="header-anchor">#</a> 创建项目安装依赖</h2> <p>在当前目录下创建mpx项目。</p> <div class="language-shell extra-class"><pre class="language-shell"><code>mpx create mpx-project
-</code></pre></div><p>也可以使用npx在不全局安装脚手架情况下创建项目。</p> <div class="language-shell extra-class"><pre class="language-shell"><code>npx @mpxjs/cli create mpx-project
-</code></pre></div><p>执行命令后会弹出一系列问题进行项目初始配置，根据自身需求进行选择，完成后进入项目目录进行依赖安装。</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> <span class="token function">install</span>
-</code></pre></div><blockquote><p>创建<code>插件项目</code>由于微信限制必须填写插件的<code>AppID</code>，创建<code>普通项目</code>无强制要求。</p></blockquote> <h2 id="编译构建"><a href="#编译构建" class="header-anchor">#</a> 编译构建</h2> <p>使用npm script执行mpx的编译构建，在开发模式下我们执行serve命令，将项目源码构建输出到<code>dist/${平台目录}</code>下，并且监听源码的改动进行重新编译。</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> run serve
-</code></pre></div><h2 id="预览调试"><a href="#预览调试" class="header-anchor">#</a> 预览调试</h2> <p>使用小程序开发者工具打开dist下对应平台的目录，对你的小程序进行预览、调试，详情可参考<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html" target="_blank" rel="noopener noreferrer">小程序开发指南<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <blockquote><p>开启小程序开发者工具的watch选项，配合mpx本身的watch，能够得到很好的开发调试体验。</p></blockquote> <h2 id="开始code"><a href="#开始code" class="header-anchor">#</a> 开始code</h2> <p>在Mpx中，我们使用<code>@mpxjs/core</code>提供的createApp、createPage和createComponent函数（分别对应原生小程序中的App、Page和Component）来创建App、页面和组件，我们下面根据脚手架创建出的初始项目目录，进行简单的介绍。</p> <p>进入src/app.mpx，我们可以看到里面的结构和.vue文件非常类似，三个区块分别对应了小程序中的js/wxss/json文件。</p> <p>js区块中调用createApp用于注册小程序，传入的配置可以参考<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html" target="_blank" rel="noopener noreferrer">小程序App构造器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，由于app.js是小程序全局最早执行的js模块，一般mpx插件安装等初始化操作也在这里进行。</p> <p>style区块对应app.wxss定义了全局样式，可以自由使用sass/less/stylus等css预编译语言。</p> <p>json区块完全支持小程序原生的<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html" target="_blank" rel="noopener noreferrer">app.json配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，还额外支持了<a href="/guide/advance/subpackage.html#packages">packages多人合作</a>等增强特性。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
-
-  mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">usePromise</span><span class="token operator">:</span> <span class="token boolean">true</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  
-  <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token function">onLaunch</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
-  .bold
-    font-weight bold
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;./pages/index&quot;</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>进入src/pages/index.mpx，可以看到同样是.vue风格的单文件结构，比起上面的app.mpx多了一个template区块，用于定义页面模板，除了支持小程序本身的全部模块语法和指令外，mpx还参考vue提供了大量<a href="/api/directives.html">模板增强指令</a>，便于用户更快速高效地进行界面开发。</p> <p>在js中调用createPage创建页面时，除了支持原本小程序支持的<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html" target="_blank" rel="noopener noreferrer">Page配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>外，我们还支持以<a href="/guide/basic/reactive.html">数据响应</a>为核心的一系列增强能力。</p> <p>在json中，我们同样支持原生的<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html" target="_blank" rel="noopener noreferrer">页面json配置<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，此外，我们能够直接在<code>usingComponents</code>中填写npm地址引用npm包中的组件，mpx组件和原生小程序组件均可引用，无需调用开发者工具npm编译，且能够通过依赖收集按需进行打包。</p> <blockquote><p>为了保障增强能力的完整性，在支持的平台中Mpx优先使用Component构造器创建页面，支持全部Component生命周期；在某些特殊情况下，你可以在<a href="/api/compile.html#forceusepagector">@mpxjs/webpack-plugin</a>中传入forceUsePageCtor:true配置来禁用掉这个行为。</p></blockquote> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token function">onLoad</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">onReady</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
-
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/list&quot;</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>最后，我们进入src/components/list.mpx文件，可以看到其构成与页面文件十分相似，对于组件，Mpx提供了和页面完全一致的增强能力</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{listData}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">listData</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'手机'</span><span class="token punctuation">,</span> <span class="token string">'电视'</span><span class="token punctuation">,</span> <span class="token string">'电脑'</span><span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
-  .list
-    background-color red
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>更多用法可以查看我们的官方实例：<a href="https://github.com/didi/mpx/tree/master/examples/" target="_blank" rel="noopener noreferrer">https://github.com/didi/mpx/tree/master/examples/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="跨平台输出"><a href="#跨平台输出" class="header-anchor">#</a> 跨平台输出</h2> <p>如果你选择的base平台为微信，mpx提供了强大的跨平台输出能力，能够将你的小程序源码输出到目前业内的全部小程序平台(微信/支付宝/百度/头条/QQ)中和web平台中运行。</p> <p>执行以下命令进行跨平台输出</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> run build:cross
-</code></pre></div><p>关于跨平台能力的更多详情请查看<a href="/guide/advance/platform.html">这里</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/guide/basic/intro.html">
-        介绍
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/94.72df7b53.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/template.html b/docs-vuepress/.vuepress/dist/guide/basic/template.html
deleted file mode 100644
index 975c328298..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/template.html
+++ /dev/null
@@ -1,137 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>模板语法 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/95.c8e36604.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" aria-current="page" class="active sidebar-link">模板语法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/template.html#模板预编译" class="sidebar-link">模板预编译</a></li></ul></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="模板语法"><a href="#模板语法" class="header-anchor">#</a> 模板语法</h1> <p>Mpx中的模板语法以小程序模板语法为基础，支持小程序的全部模板语法，同时提供了一系列增强的模板指令及语法。</p> <p>小程序原生模板语法请参考<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/" target="_blank" rel="noopener noreferrer">这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Mpx提供的增强指令语法如下：</p> <ul><li><a href="/guide/basic/class-style-binding.html#样式绑定">wx:style动态样式</a></li> <li><a href="/guide/basic/class-style-binding.html#类名绑定">wx:class动态类名</a></li> <li><a href="/guide/basic/two-way-binding.html">wx:model双向绑定</a></li> <li><a href="/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性">wx:model-prop双向绑定属性</a></li> <li><a href="/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性">wx:model-event双向绑定事件</a></li> <li><a href="/guide/basic/two-way-binding.html#更改双向绑定事件数据路径">wx:model-value-path双向绑定数据路径</a></li> <li><a href="/guide/basic/two-way-binding.html#双向绑定过滤器">wx:model-filter双向绑定过滤器</a></li> <li><a href="/guide/basic/refs.html">wx:ref获取实例</a></li> <li><a href="/guide/basic/conditional-render.html">wx:show隐藏显示</a></li> <li><a href="/guide/basic/component.html#动态组件">component动态组件</a></li> <li><a href="/guide/basic/event.html">事件处理内联传参</a></li> <li><a href="/guide/basic/template.html" aria-current="page" class="router-link-exact-active router-link-active">模板条件编译</a></li></ul> <p>下面是使用了模板增强语法的一个简单实例，许多在原生小程序上很繁琐的模板描述在增强语法的帮助下变得清晰简洁：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!--动态样式--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{dynamicStyle}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--数据绑定--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{title}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--计算属性数据绑定--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{reversedTitle}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-      <span class="token comment">&lt;!--循环渲染，动态类名，事件处理内联传参--&gt;</span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{list}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ {active:item.active} }}<span class="token punctuation">&quot;</span></span>
-            <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap(index)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{item.content}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-        <span class="token comment">&lt;!--循环内部双向数据绑定--&gt;</span>
-        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{list[index].content}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--自定义组件获取实例，双向绑定，自定义双向绑定属性及事件--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom-input</span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ci<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{customInfo}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>change<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
-    <span class="token comment">&lt;!--动态组件，is传入组件名字符串，可使用的组件需要在json中注册，全局注册也生效--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{current}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>component</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--显示/隐藏dom--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{showBottom}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-      <span class="token comment">&lt;!--模板条件编译，__mpx_mode__为框架注入的环境变量，条件判断为false的模板不会生成到dist--&gt;</span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'wx'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>wx env<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'ali'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>ali env<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 动态样式和类名也可以使用computed返回</span>
-      <span class="token literal-property property">dynamicStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'16px'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'hello world'</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token punctuation">{</span>
-          <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'全军出击'</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">false</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span>
-        <span class="token punctuation">{</span>
-          <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'猥琐发育，别浪'</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">false</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">]</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">customInfo</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'test content'</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">current</span><span class="token operator">:</span> <span class="token string">'com-a'</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">showBottom</span><span class="token operator">:</span> <span class="token boolean">false</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token function">reversedTitle</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">handleTap</span> <span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 处理函数直接通过参数获取当前点击的index，清晰简洁</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>active <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>active
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;custom-input&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/custom-input&quot;</span><span class="token punctuation">,</span>
-      <span class="token string-property property">&quot;com-a&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/com-a&quot;</span><span class="token punctuation">,</span>
-      <span class="token string-property property">&quot;com-b&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../components/com-b&quot;</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="模板预编译"><a href="#模板预编译" class="header-anchor">#</a> 模板预编译</h2> <p>Mpx还支持开发者使用插值语法与小程序不冲突第三方的模板引擎语法来编写template，如pug：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pug<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  view(class=&quot;list&quot;)
-    view(class=&quot;list-item&quot;) red
-    view(class=&quot;list-item&quot;) blue
-    view(class=&quot;list-item&quot;) green
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/ide.html" class="prev">
-        IDE 高亮配置
-      </a></span> <span class="next"><a href="/guide/basic/css.html">
-        CSS 处理
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/95.c8e36604.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/basic/two-way-binding.html b/docs-vuepress/.vuepress/dist/guide/basic/two-way-binding.html
deleted file mode 100644
index 6f45b2eeeb..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/basic/two-way-binding.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>双向绑定 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/96.1ebdc00d.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" aria-current="page" class="active sidebar-link">双向绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/basic/two-way-binding.html#对自定义组件使用" class="sidebar-link">对自定义组件使用</a></li><li class="sidebar-sub-header"><a href="/guide/basic/two-way-binding.html#更改双向绑定的监听事件及数据属性" class="sidebar-link">更改双向绑定的监听事件及数据属性</a></li><li class="sidebar-sub-header"><a href="/guide/basic/two-way-binding.html#更改双向绑定事件数据路径" class="sidebar-link">更改双向绑定事件数据路径</a></li><li class="sidebar-sub-header"><a href="/guide/basic/two-way-binding.html#双向绑定过滤器" class="sidebar-link">双向绑定过滤器</a></li></ul></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="双向绑定"><a href="#双向绑定" class="header-anchor">#</a> 双向绑定</h1> <p>Mpx针对表单组件提供了<code>wx:model</code>双向绑定指令，类似于<code>v-model</code>，该指令是一个语法糖指令，监听了组件抛出的输入事件并对绑定的数据进行更新，默认情况下会监听表单组件的<code>input</code>事件，并将<code>event.detail.value</code>中的数据更新到组件的<code>value</code>属性上。</p> <p>简单实用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{message}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
-  <span class="token comment">&lt;!--view中的文案会随着用户对输入框进行输入而实时更新--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="对自定义组件使用"><a href="#对自定义组件使用" class="header-anchor">#</a> 对自定义组件使用</h2> <p>对自定义组件使用双向绑定时用法与原生小程序组件完全一致</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{message}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
-  <span class="token comment">&lt;!--此处的文案会随着输入框输入实时更新--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="更改双向绑定的监听事件及数据属性"><a href="#更改双向绑定的监听事件及数据属性" class="header-anchor">#</a> 更改双向绑定的监听事件及数据属性</h2> <p>如前文所述，<code>wx:model</code>指令默认监听组件抛出的<code>input</code>事件，并将声明的数据绑定到组件的<code>value</code>属性上，该行为在一些原生组件和自定义组件上并不成立，因为这些组件可能不存在<code>input</code>事件或<code>value</code>属性。对此，我们提供了<code>wx:model-event</code>和<code>wx:model-prop</code>指令来修改双向绑定的监听事件和数据属性，使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!--原生组件picker中没有input事件，通过wx:model-event指令将双向绑定监听事件改为change事件--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>picker</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selector<span class="token punctuation">&quot;</span></span> <span class="token attr-name">range</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{countryRange}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{country}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>change<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-      当前选择: {{country}}
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>picker</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!--通过wx:model-event和wx:model-prop将该自定义组件的双向绑定监听事件和数据属性修改为customInput/customValue--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom-input</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{message}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-event</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>customValue<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="更改双向绑定事件数据路径"><a href="#更改双向绑定事件数据路径" class="header-anchor">#</a> 更改双向绑定事件数据路径</h2> <p>Mpx中双向绑定默认使用event对象中的<code>event.detail.value</code>作为用户输入来更新组件数据，该行为在一些原生组件和自定义组件中也不成立，例如vant中的field输入框组件，用户的输入直接存储在<code>event.detail</code>当中，当然用户也可以将其存放在detail中的其他数据路径下，对此，我们提供了<code>wx:model-value-path</code>指令让用户声明在事件当中应该访问的数据路径。</p> <p>由于小程序triggerEvent的Api设计，事件的用户数据都只能存放在<code>event.detail</code>中，因此<code>wx:model-value-path</code>的值都是相对于<code>event.detail</code>的数据路径，我们支持两种形式进行声明：</p> <ul><li>一种是点语法，如传入<code>current.value</code>时框架会从<code>event.detail.current.value</code>中取值作为用户输入，为空字符串时<code>wx:model-value-path=&quot;&quot;</code>代表直接使用<code>event.detail</code>作为用户输入；</li> <li>第二种是数组字面量的JSON字符串，如<code>[&quot;current&quot;, &quot;value&quot;]</code>与上面的<code>current.value</code>等价，传入<code>[]</code>时与上面的空字符串等价。</li></ul> <p>使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!--wx:model-value-path传入[]直接使用event.detail作为用户输入，使vant-field中双向绑定能够生效--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-field</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{username}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-value-path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户名<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入用户名<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="双向绑定过滤器"><a href="#双向绑定过滤器" class="header-anchor">#</a> 双向绑定过滤器</h2> <p>用户可以使用<code>wx:model-filter</code>指令定义双向绑定过滤器，在修改数据之前对用户输入进行过滤，来实现特定的效果，框架内置了<code>trim</code>过滤器对用户输入进行trim操作，传入其他字符串时会使用当前组件中的同名方法作为自定义过滤器，使用示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token comment">&lt;!--以下示例中，用户输入的首尾空格将被过滤--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name"><span class="token namespace">wx:</span>model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{message}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>model-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>trim<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/basic/event.html" class="prev">
-        事件处理
-      </a></span> <span class="next"><a href="/guide/basic/component.html">
-        自定义组件
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/96.1ebdc00d.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/composition-api/composition-api.html b/docs-vuepress/.vuepress/dist/guide/composition-api/composition-api.html
deleted file mode 100644
index 7f655aade1..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/composition-api/composition-api.html
+++ /dev/null
@@ -1,527 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>组合式 API | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/97.fa1ed9e7.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" aria-current="page" class="active sidebar-link">组合式 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#什么是组合式-api" class="sidebar-link">什么是组合式 API</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#组合式-api-基础" class="sidebar-link">组合式 API 基础</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#setup" class="sidebar-link">Setup</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#lifecycle-hooks" class="sidebar-link">生命周期钩子</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#template-ref" class="sidebar-link">模板引用</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#script-setup" class="sidebar-link">&lt;script setup&gt;</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#组合式-api-与-vue3-中的区别" class="sidebar-link">组合式 API 与 Vue3 中的区别</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/composition-api.html#组合式-api-周边生态能力的使用" class="sidebar-link">组合式 API 周边生态能力的使用</a></li></ul></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="组合式-api"><a href="#组合式-api" class="header-anchor">#</a> 组合式 API</h1> <h2 id="什么是组合式-api"><a href="#什么是组合式-api" class="header-anchor">#</a> 什么是组合式 API</h2> <p>组合式 API 是 Vue3 中包含的最重要的特性之一，主要由 <code>setup</code> 函数及一系列响应式 API 及生命周期钩子函数组成，与传统的选项式 API 相比，组合式 API 具备以下优势：</p> <ul><li>更好的逻辑复用，通过函数包装复用逻辑，显式引入调用，方便简洁且符合直觉，规避消除了 mixins 复用中存在的缺陷；</li> <li>更灵活的代码组织，相比于选项式 API 提前规定了代码的组织方式，组合式 API 在这方面几乎没有做任何限制与规定，更加灵活自由，在功能复杂的庞大组件中，我们能够通过组合式 API 让我们的功能代码更加内聚且有条理，不过这也会对开发者自身的代码规范意识提出更高要求；</li> <li>更方便的类型推导，虽然基于 <code>this</code> 的选项式 API 通过 <code>ThisType</code> 也能在一定程度上实现 TS 类型推导，但推导和实现成本较高，同时仍然无法完美覆盖一些复杂场景（如嵌套 mixins 等）；而组合式 API 以本地变量和函数为基础，本身就是类型友好的，我们在类型方面几乎不需要做什么额外的工作就能享受到完美的类型推导。</li></ul> <p>同时与 React Hooks 相比，组合式 API 中的 <code>setup</code> 函数只在初始化时单次执行，在数据响应能力的加持下大大降低了理解与使用成本，基于以上原因，我们决定为 Mpx 添加组合式 API 能力，让用户能够用组合式 API 方式进行小程序开发。</p> <p>更多关于组合式 API 的说明可以查看 <a href="https://vuejs.org/guide/extras/composition-api-faq.html" target="_blank" rel="noopener noreferrer">Vue3 官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>Mpx 是一个小程序优先的增强型跨端框架，因此我们在为 Mpx 设计实现组合式 API 的过程中，并不追求与 Vue3 中的组合式 API 完全一致，我们更多是借鉴 Vue3 中组合式 API 的设计思想，将其与目前 Mpx 及小程序中的开发模式结合起来，而非完全照搬其实现。因此在 Mpx 中一些具体的 API 设计实现会与 Vue3 存在差异，我们会在后续相关的文档中进行标注说明，如果你想查看 Mpx 与 Vue3 在组合式 API 中的差异，可以跳转到<a href="#%E7%BB%84%E5%90%88%E5%BC%8F-API-%E4%B8%8E-Vue3-%E4%B8%AD%E7%9A%84%E5%8C%BA%E5%88%AB">这里</a>查看。</p> <h2 id="组合式-api-基础"><a href="#组合式-api-基础" class="header-anchor">#</a> 组合式 API 基础</h2> <h3 id="setup-函数"><a href="#setup-函数" class="header-anchor">#</a> setup 函数</h3> <p>同 Vue3 一样，在 Mpx 当中 <code>setup</code> 函数是组合式 API 的基础，我们可以在 <code>createPage</code> 和 <code>createComponent</code> 中声明 <code>setup</code> 函数。</p> <p><code>setup</code> 函数接收 <code>props</code> 和 <code>context</code> 两个参数，其中 <code>context</code> 参数与 Vue3 中存在差别，详情可以查看<a href="#Setup">这里</a>。</p> <p>我们参考 Vue3 中的示例实现一个小程序版本，可以看到它和 Vue3 中的实现基本一致，包含以下功能：</p> <ul><li>仓库列表</li> <li>更新仓库列表的函数</li> <li>返回列表和函数，以便其他组件选项可以对它们进行访问</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> fetchUserRepositories <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/repositories'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">user</span><span class="token operator">:</span> String
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">let</span> repositories <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
-    <span class="token keyword">const</span> <span class="token function-variable function">getUserRepositories</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      repositories <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserRepositories</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>user<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      repositories<span class="token punctuation">,</span> <span class="token comment">// 返回的数据，可以在其他选项式 API 中通过 this 访问或在模板上直接访问</span>
-      getUserRepositories <span class="token comment">// 返回的函数，它的行为与将其定义在 methods 选项中的行为相同</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>目前 <code>repositories</code> 是个非响应式变量，用户层面将无法感知它的变化，仓库列表将始终为空。</p> <h3 id="带-ref-的响应式变量"><a href="#带-ref-的响应式变量" class="header-anchor">#</a> 带 <code>ref</code> 的响应式变量</h3> <p>同 Vue3 一致，我们可以通过 <code>ref</code> 函数为任意一个变量创建响应式引用，<code>ref</code> 接收参数并将其包裹在一个带有 <code>value</code> property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> counter <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>counter<span class="token punctuation">)</span> <span class="token comment">// { value: 0 }</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>counter<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 0</span>
-
-counter<span class="token punctuation">.</span>value<span class="token operator">++</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>counter<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 1</span>
-</code></pre></div><p>回到我们的示例中，我们通过 <code>ref</code> 创建一个响应式的 <code>repositories</code> 变量：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> fetchUserRepositories <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/repositories'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">user</span><span class="token operator">:</span> String
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">let</span> repositories <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> <span class="token function-variable function">getUserRepositories</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      repositories<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserRepositories</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>user<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      repositories<span class="token punctuation">,</span>
-      getUserRepositories
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>通过 <code>ref</code> 包裹以后，我们每次调用 <code>getUserRepositories</code> 更新 <code>repositories</code> 的值都能被外部的 <code>watch</code> 观测到，并且触发视图的更新。</p> <h3 id="在-setup-中注册生命周期钩子"><a href="#在-setup-中注册生命周期钩子" class="header-anchor">#</a> 在 <code>setup</code> 中注册生命周期钩子</h3> <p>为了完整实现选项式 API 中的能力，我们需要支持在 <code>setup</code> 中注册生命周期钩子，同 Vue3 类似，我们也提供了一系列生命周期钩子的注册函数，这些函数都以 <code>on</code> 开头，不过由于 Mpx 的跨平台特性，我们不可能针对不同的平台提供不同的生命周期钩子函数，因此我们提供了一份抹平跨平台差异后统一的生命周期钩子，与小程序原生生命周期的映射关系可查看<a href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90">这里</a>。</p> <p>我们希望在组件挂载时调用 <code>getUserRepositories</code>，可以使用 <code>onMounted</code> 钩子来实现，注意这里不是 <code>onReady</code>，不过它确实对应于微信小程序中组件的 <code>ready</code> 钩子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> fetchUserRepositories <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/repositories'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">user</span><span class="token operator">:</span> String
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">let</span> repositories <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> <span class="token function-variable function">getUserRepositories</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      repositories<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserRepositories</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>user<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token comment">// 在组件挂载时（微信小程序中相当于ready）调用 getUserRepositories</span>
-    <span class="token function">onMounted</span><span class="token punctuation">(</span>getUserRepositories<span class="token punctuation">)</span> 
-
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      repositories<span class="token punctuation">,</span>
-      getUserRepositories
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="watch-响应式更改"><a href="#watch-响应式更改" class="header-anchor">#</a> <code>watch</code> 响应式更改</h3> <p>现在我们需要对 <code>user</code> prop 的变化做出响应，可以使用新的 <code>watch</code> API，该 API 接受 3 个参数：</p> <ul><li>一个想要侦听的响应式引用或 getter 函数</li> <li>一个回调</li> <li>可选的配置选项</li></ul> <p>简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> watch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> counter <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-<span class="token function">watch</span><span class="token punctuation">(</span>counter<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">newValue<span class="token punctuation">,</span> oldValue</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'The new counter value is: '</span> <span class="token operator">+</span> counter<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>当 <code>counter</code> 被修改时，例如 <code>counter.value = 5</code>，侦听将触发并执行回调打印 <code>The new counter value is:5</code>。</p> <p>回到我们的示例中，当 <code>user</code> prop 发生变化时调用 <code>getUserRepositories</code> 更新仓库列表：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> fetchUserRepositories <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/repositories'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">user</span><span class="token operator">:</span> String
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 使用 `toRefs` 创建对 `props` 中的 `user` property 的响应式引用</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> user <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
-    
-    <span class="token keyword">let</span> repositories <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> <span class="token function-variable function">getUserRepositories</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 更新 `prop.user` 到 `user.value` 访问引用值</span>
-      repositories<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserRepositories</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token function">onMounted</span><span class="token punctuation">(</span>getUserRepositories<span class="token punctuation">)</span> 
-    
-    <span class="token comment">// 在 user prop 的响应式引用上设置一个侦听器</span>
-    <span class="token function">watch</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> getUserRepositories<span class="token punctuation">)</span>
-
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      repositories<span class="token punctuation">,</span>
-      getUserRepositories
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>你可能已经注意到在我们的 setup 的顶部使用了 toRefs。这是为了确保我们的侦听器能够根据 user prop 的变化做出反应。</p> <h3 id="独立的-computed-属性"><a href="#独立的-computed-属性" class="header-anchor">#</a> 独立的 <code>computed</code> 属性</h3> <p>与 <code>ref</code> 和 <code>watch</code> 类似，也可以使用从 Mpx 导入的 <code>computed</code> 函数创建计算属性，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> counter <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> twiceTheCounter <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> counter<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
-
-counter<span class="token punctuation">.</span>value<span class="token operator">++</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>counter<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 1</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>twiceTheCounter<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 2</span>
-</code></pre></div><p>这里我们给 <code>computed</code> 函数传递了第一个参数，它是一个类似 getter 的回调函数，输出的是一个只读的响应式引用。为了访问新创建的计算变量的 value，我们需要像 <code>ref</code> 一样使用 <code>.value</code> property。</p> <p>回到我们的示例，我们通过 <code>computed</code> 为仓库列表实现搜索功能：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> toRefs<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> fetchUserRepositories <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/repositories'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">user</span><span class="token operator">:</span> String
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> user <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
-    
-    <span class="token keyword">let</span> repositories <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> <span class="token function-variable function">getUserRepositories</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      repositories<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserRepositories</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token function">onMounted</span><span class="token punctuation">(</span>getUserRepositories<span class="token punctuation">)</span> 
-    
-    <span class="token function">watch</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> getUserRepositories<span class="token punctuation">)</span>
-    
-    <span class="token keyword">const</span> searchQuery <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> repositoriesMatchingSearchQuery <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> repositories<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>
-        <span class="token parameter">repository</span> <span class="token operator">=&gt;</span> repository<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>searchQuery<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-      <span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      repositories<span class="token punctuation">,</span>
-      getUserRepositories<span class="token punctuation">,</span>
-      searchQuery<span class="token punctuation">,</span>
-      repositoriesMatchingSearchQuery
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>可以看到目前我们的 <code>setup</code> 函数已经相当庞大了，在不进行任何封装的情况下我们很可能在 <code>setup</code> 中写出流水账式的代码，可维护性很差，这也是为什么组合式 API 会对开发者的代码风格提出更高的要求，下面我们来拆解目前已经实现的功能，将它们提取到独立的组合函数中，先从创建 <code>useUserRepositories</code> 函数开始：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/composables/useUserRepositories.js</span>
-
-<span class="token keyword">import</span> <span class="token punctuation">{</span> fetchUserRepositories <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/repositories'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> onMounted<span class="token punctuation">,</span> watch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">useUserRepositories</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> repositories <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> <span class="token function-variable function">getUserRepositories</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    repositories<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserRepositories</span><span class="token punctuation">(</span>user<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-
-  <span class="token function">onMounted</span><span class="token punctuation">(</span>getUserRepositories<span class="token punctuation">)</span>
-  <span class="token function">watch</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> getUserRepositories<span class="token punctuation">)</span>
-
-  <span class="token keyword">return</span> <span class="token punctuation">{</span>
-    repositories<span class="token punctuation">,</span>
-    getUserRepositories
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-
-</code></pre></div><p>然后是搜索功能：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/composables/useRepositoryNameSearch.js</span>
-
-<span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">useRepositoryNameSearch</span><span class="token punctuation">(</span><span class="token parameter">repositories</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> searchQuery <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> repositoriesMatchingSearchQuery <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> repositories<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">repository</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> repository<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>searchQuery<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-  <span class="token keyword">return</span> <span class="token punctuation">{</span>
-    searchQuery<span class="token punctuation">,</span>
-    repositoriesMatchingSearchQuery
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>现在我们有了两个单独的功能模块，接下来就可以开始在组件中使用它们了:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> useUserRepositories <span class="token keyword">from</span> <span class="token string">'@/composables/useUserRepositories'</span>
-<span class="token keyword">import</span> useRepositoryNameSearch <span class="token keyword">from</span> <span class="token string">'@/composables/useRepositoryNameSearch'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">user</span><span class="token operator">:</span> String
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> user <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
-    
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> repositories<span class="token punctuation">,</span> getUserRepositories <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useUserRepositories</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span>
-    
-    <span class="token keyword">const</span> <span class="token punctuation">{</span>
-      searchQuery<span class="token punctuation">,</span>
-      repositoriesMatchingSearchQuery
-    <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useRepositoryNameSearch</span><span class="token punctuation">(</span>repositories<span class="token punctuation">)</span>
-
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      <span class="token comment">// 因为我们并不关心未经过滤的仓库</span>
-      <span class="token comment">// 我们可以在 `repositories` 名称下暴露过滤后的结果</span>
-      <span class="token literal-property property">repositories</span><span class="token operator">:</span> repositoriesMatchingSearchQuery<span class="token punctuation">,</span>
-      getUserRepositories<span class="token punctuation">,</span>
-      searchQuery<span class="token punctuation">,</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>现在我们使用组合式 API 完成了仓库列表组件的开发，它看上去相当清晰且易于维护。想要了解更多组合式 API 的信息，请继续查看本页接下来的章节，想要了解新的响应式 API 的使用，请跳转查看<a href="/guide/composition-api/reactive-api.html">响应式 API</a>章节。</p> <h2 id="setup"><a href="#setup" class="header-anchor">#</a> Setup</h2> <p><code>setup</code> 函数在组件创建时执行，返回组件所需的数据和方法，是组合式 API 的核心。</p> <blockquote><p>注意，<code>setup</code> 函数不可被混入，所有定义在 <code>mixin</code> 中的 <code>setup</code> 都将被丢弃。</p></blockquote> <h3 id="参数"><a href="#参数" class="header-anchor">#</a> 参数</h3> <p><code>setup</code> 函数接受两个参数，分别是 <code>props</code> 和 <code>context</code>。</p> <h4 id="props"><a href="#props" class="header-anchor">#</a> Props</h4> <p><code>setup</code> 函数的第一个参数 <code>props</code> 和 Vue3 中完全一致，就是包含当前组件 props 的响应式数据，当父组件更新某个 prop 时，该数据也将被更新。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">title</span><span class="token operator">:</span> String
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>title<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><blockquote><p>Warning: <code>props</code> 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。</p></blockquote> <p>如果需要解构 prop，可以在 <code>setup</code> 函数中使用 <code>toRefs</code> 函数将其转换一个包含 ref 数据的纯对象：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">title</span><span class="token operator">:</span> String
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> title <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
-    <span class="token comment">// `title` 是一个 ref</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>title<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>如果 <code>title</code> 是可选的 prop，则传入的 <code>props</code> 中可能没有 <code>title</code> 。在这种情况下，<code>toRefs</code> 将不会为 <code>title</code> 创建一个 ref 。你需要使用 <code>toRef</code> 替代它：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> toRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">title</span><span class="token operator">:</span> String
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> title <span class="token operator">=</span> <span class="token function">toRef</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> <span class="token string">'title'</span><span class="token punctuation">)</span>
-    <span class="token comment">// `title` 是一个 ref</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>title<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="context"><a href="#context" class="header-anchor">#</a> Context</h4> <p>由于小程序与 web 基础技术规范的差异，Mpx 中 <code>setup</code> 的第二个参数 <code>context</code> 与 Vue3 中完全不同，<code>context</code> 包含的属性如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 触发事件，等价于 this.triggerEvent</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>triggerEvent<span class="token punctuation">)</span>
-    <span class="token comment">// 获取 NodesRef/组件实例，等价于 this.$refs</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>refs<span class="token punctuation">)</span>
-    <span class="token comment">// 字节小程序中异步获取组件实例，等价于 this.$asyncRefs</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>asyncRefs<span class="token punctuation">)</span>
-    <span class="token comment">// 获取组件实例，等价于 this.selectComponent，可用 this.$refs 替代</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>selectComponent<span class="token punctuation">)</span>
-    <span class="token comment">// 批量获取组件实例，等价于 this.selectAllComponents，可用 $refs 替代</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>selectAllComponents<span class="token punctuation">)</span>
-    <span class="token comment">// 获取 SelectorQuery 对象实例查询元素布局信息，等价于 this.createSelectorQuery，可用 $refs 替代</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>createSelectorQuery<span class="token punctuation">)</span>
-    <span class="token comment">// 获取 IntersectionObserver 对象实例查询视图相交信息，等价于 this.createIntersectionObserver</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>createIntersectionObserver<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><code>context</code> 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 <code>context</code> 使用 ES6 解构。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> <span class="token punctuation">{</span> triggerEvent<span class="token punctuation">,</span> refs <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// ...</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p><code>refs</code> 是有状态的对象，它会随组件本身的更新而更新。这意味着你应该避免对其进行解构，并始终以 refs.x 的方式访问 NodesRef 或组件实例。与 props 不同，refs 是非响应式的。如果你打算根据 refs 的更改应用副作用，那么应该在 onUpdated 生命周期钩子中执行此操作。</p> <h3 id="访问组件的-property"><a href="#访问组件的-property" class="header-anchor">#</a> 访问组件的 property</h3> <p>除了 <code>props</code> 和 <code>context</code> 中包含的内容，执行 <code>setup</code> 时将<strong>无法访问</strong>部分组件选项，包括：</p> <ul><li>data</li> <li>computed</li></ul> <h3 id="结合模板使用"><a href="#结合模板使用" class="header-anchor">#</a> 结合模板使用</h3> <p>如果 <code>setup</code> 返回一个对象，那么该对象的 property 可以在模板中访问到：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ collectionName }}: {{ readersNumber }} {{ book.title }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">collectionName</span><span class="token operator">:</span> String
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> readersNumber <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-      <span class="token keyword">const</span> book <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Mpx'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-      <span class="token comment">// 暴露给 template</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        readersNumber<span class="token punctuation">,</span>
-        book
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="使用-this"><a href="#使用-this" class="header-anchor">#</a> 使用 <code>this</code></h3> <p><strong>在 <code>setup()</code> 内部，<code>this</code> 不是当前组件的引用</strong>，因为 <code>setup()</code> 是在解析其它组件选项之前被调用的，所以 <code>setup()</code> 内部的 <code>this</code> 的行为与其它选项中的 <code>this</code> 完全不同。这使得 <code>setup()</code>  在和其它选项式 API 一起使用时可能会导致混淆。</p> <blockquote><p>Mpx 的组合式 API 设计极力避免了用户需要在 <code>setup()</code> 中访问 <code>this</code> 的场景，不过在一些例外情况下，用户仍然可以通过 <code>getCurrentInstance()</code> 的方式获取到当前组件实例，注意该函数必须在 <code>setup()</code> 或生命周期钩子中同步调用。</p></blockquote> <h2 id="lifecycle-hooks"><a href="#lifecycle-hooks" class="header-anchor">#</a> 生命周期钩子 </h2> <p>组合式 API 中，我们通过 <code>on${Hookname}(fn)</code> 的方式注册访问生命周期钩子。</p> <p>Mpx 作为一个跨端小程序框架，需要兼容不同小程序平台不同的生命周期，在选项式 API 中，我们在框架中内置了一套统一的生命周期，将不同小程序平台的生命周期转换映射为内置生命周期后再进行统一的驱动，以抹平不同小程序平台生命周期钩子的差异，如微信小程序的 <code>attached</code> 钩子和支付宝小程序的 <code>onInit</code> 钩子，在组合式 API 中，我们基于框架内置的生命周期暴露了一套统一的生命周期钩子函数，下表展示了框架内置生命周期/组合式 API 生命周期函数与不同小程序平台原生生命周期的对应关系：</p> <h4 id="组件生命周期"><a href="#组件生命周期" class="header-anchor">#</a> 组件生命周期</h4> <table><thead><tr><th style="text-align:left;">框架内置生命周期</th> <th style="text-align:left;">Hook inside <code>setup</code></th> <th style="text-align:left;">微信原生</th> <th style="text-align:left;">支付宝原生</th></tr></thead> <tbody><tr><td style="text-align:left;">BEFORECREATE</td> <td style="text-align:left;"><code>null</code></td> <td style="text-align:left;">attached（数据响应初始化前）</td> <td style="text-align:left;">onInit（数据响应初始化前）</td></tr> <tr><td style="text-align:left;">CREATED</td> <td style="text-align:left;"><code>null</code></td> <td style="text-align:left;">attached（数据响应初始化后）</td> <td style="text-align:left;">onInit（数据响应初始化后）</td></tr> <tr><td style="text-align:left;">BEFOREMOUNT</td> <td style="text-align:left;">onBeforeMount</td> <td style="text-align:left;">ready（<code>MOUNTED</code> 执行前）</td> <td style="text-align:left;">didMount（<code>MOUNTED</code> 执行前）</td></tr> <tr><td style="text-align:left;">MOUNTED</td> <td style="text-align:left;">onMounted</td> <td style="text-align:left;">ready（<code>BEFOREMOUNT</code> 执行后）</td> <td style="text-align:left;">didMount（<code>BEFOREMOUNT</code> 执行后）</td></tr> <tr><td style="text-align:left;">BEFOREUPDATE</td> <td style="text-align:left;">onBeforeUpdate</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> 执行前）</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> 执行前）</td></tr> <tr><td style="text-align:left;">UPDATED</td> <td style="text-align:left;">onUpdated</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> callback）</td> <td style="text-align:left;"><code>null</code>（<code>setData</code> callback）</td></tr> <tr><td style="text-align:left;">BEFOREUNMOUNT</td> <td style="text-align:left;">onBeforeUnmount</td> <td style="text-align:left;">detached（数据响应销毁前）</td> <td style="text-align:left;">didUnmount（数据响应销毁前）</td></tr> <tr><td style="text-align:left;">UNMOUNTED</td> <td style="text-align:left;">onUnmounted</td> <td style="text-align:left;">detached（数据响应销毁后）</td> <td style="text-align:left;">didUnmount（数据响应销毁后）</td></tr></tbody></table> <blockquote><p>同 Vue3 一样，组合式 API 中没有提供 <code>BEFORECREATE</code> 和 <code>CREATED</code> 对应的生命周期钩子函数，用户可以直接在 <code>setup</code> 中编写相关逻辑。</p></blockquote> <blockquote><p>除支付宝外的小程序平台支持使用Component构建页面，在页面中使用组件生命周期钩子与在组件中完全一致，并且框架在支付宝环境也进行了抹平实现。</p></blockquote> <h4 id="页面生命周期"><a href="#页面生命周期" class="header-anchor">#</a> 页面生命周期</h4> <table><thead><tr><th style="text-align:left;">框架内置生命周期</th> <th style="text-align:left;">Hook inside <code>setup</code></th> <th style="text-align:left;">微信原生</th> <th style="text-align:left;">支付宝原生</th></tr></thead> <tbody><tr><td style="text-align:left;">ONLOAD</td> <td style="text-align:left;">onLoad</td> <td style="text-align:left;">onLoad</td> <td style="text-align:left;">onLoad</td></tr> <tr><td style="text-align:left;">ONSHOW</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">onShow</td></tr> <tr><td style="text-align:left;">ONHIDE</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">onHide</td></tr> <tr><td style="text-align:left;">ONRESIZE</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">events.onResize</td></tr></tbody></table> <h4 id="组件中访问页面生命周期"><a href="#组件中访问页面生命周期" class="header-anchor">#</a> 组件中访问页面生命周期</h4> <table><thead><tr><th style="text-align:left;">框架内置生命周期</th> <th style="text-align:left;">Hook inside <code>setup</code></th> <th style="text-align:left;">微信原生</th> <th style="text-align:left;">支付宝原生</th></tr></thead> <tbody><tr><td style="text-align:left;">ONSHOW</td> <td style="text-align:left;">onShow</td> <td style="text-align:left;">pageLifetimes.show</td> <td style="text-align:left;"><code>null</code>（框架抹平实现）</td></tr> <tr><td style="text-align:left;">ONHIDE</td> <td style="text-align:left;">onHide</td> <td style="text-align:left;">pageLifetimes.hide</td> <td style="text-align:left;"><code>null</code>（框架抹平实现）</td></tr> <tr><td style="text-align:left;">ONRESIZE</td> <td style="text-align:left;">onResize</td> <td style="text-align:left;">pageLifetimes.resize</td> <td style="text-align:left;"><code>null</code>（框架抹平实现）</td></tr></tbody></table> <p>下面是简单的使用示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> onMounted<span class="token punctuation">,</span> onUnmounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// mounted</span>
-    <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Component mounted.'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token comment">// unmounted</span>
-    <span class="token function">onUnmounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Component unmounted.'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="框架内置生命周期"><a href="#框架内置生命周期" class="header-anchor">#</a> 框架内置生命周期</h3> <p>从上面可以看到我们在框架内部内置了一套统一的生命周期来抹平不同平台生命周期的差异，由于存在数据响应机制，这套内置生命周期与小程序原生的生命周期不完全一一对应，反而与 Vue 的生命周期更加相似，在过去的版本中，我们没有显式地暴露出 <code>BEFORECREATE</code> 这这类框架内置的生命周期，更多都在框架内部使用，但是在组合式 API 版本中，为了使选项式 API 的生命周期能力与之对齐，我们将框架内置的生命周期显式导出，让用户在选项式 API 开发环境下也能正常使用这些能力，简单使用示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> <span class="token constant">BEFORECREATE</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token punctuation">[</span><span class="token constant">BEFORECREATE</span><span class="token punctuation">]</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'beforeCreate exec.'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 原生的 created 会被映射为框架内部的 CREATED 执行，此处逻辑在 BEFORECREATE 后执行</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'created exec.'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="具有副作用的页面事件"><a href="#具有副作用的页面事件" class="header-anchor">#</a> 具有副作用的页面事件</h3> <p>在小程序中，一些页面事件的注册存在副作用，即该页面事件注册与否会产生实质性的影响，比如微信中的 <code>onShareAppMessage</code> 和 <code>onPageScroll</code>，前者在不注册时会禁用当前页面的分享功能，而后者在注册时会带来视图与逻辑层之间的线程通信开销，对于这部分页面事件，我们无法通过<code>预注册 -&gt; 驱动</code>方式提供组合式 API 的注册方式，用户可以通过选项式 API 的方式来注册使用，通过 <code>this</code> 访问组合式 API <code>setup</code> 函数的返回。</p> <p>然而这种使用方式显然不够优雅，我们考虑是否可以通过一些非常规的方式提供这类副作用页面事件的组合式 API 注册支持，例如，借助编译手段。我们在运行时提供了副作用页面事件的注册函数，并在编译时通过 <code>babel</code> 插件的方式解析识别到当前页面中存在这些特殊注册函数的调用时，通过框架已有的<code>编译 -&gt; 运行时注入</code>的方式将事件驱动逻辑添加到当前页面当中，以提供相对优雅的副作用页面事件在组合式 API 中的注册方式，同时不产生非预期的副作用影响。</p> <p>我们需要先修改 <code>babel</code> 配置添加 <code>@mpxjs/babel-plugin-inject-page-events</code> 插件：</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token comment">// babel.config.json</span>
-<span class="token punctuation">{</span>
- <span class="token property">&quot;plugins&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token punctuation">[</span>
-      <span class="token string">&quot;@babel/transform-runtime&quot;</span><span class="token punctuation">,</span>
-      <span class="token punctuation">{</span>
-        <span class="token property">&quot;corejs&quot;</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
-        <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^7.10.4&quot;</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token string">&quot;@mpxjs/babel-plugin-inject-page-events&quot;</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>然后就能想普通生命周期一样使用组合式 API 进行页面事件注册，简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onShareAppMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-
-    <span class="token function">onShareAppMessage</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'页面分享'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      count
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>目前我们通过这种方式支持的页面事件如下：</p> <table><thead><tr><th style="text-align:left;">页面事件</th> <th style="text-align:left;">Hook inside <code>setup</code></th> <th style="text-align:left;">平台支持</th></tr></thead> <tbody><tr><td style="text-align:left;">onPullDownRefresh</td> <td style="text-align:left;">onPullDownRefresh</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onReachBottom</td> <td style="text-align:left;">onReachBottom</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onPageScroll</td> <td style="text-align:left;">onPageScroll</td> <td style="text-align:left;">全小程序平台 + web</td></tr> <tr><td style="text-align:left;">onShareAppMessage</td> <td style="text-align:left;">onShareAppMessage</td> <td style="text-align:left;">全小程序平台</td></tr> <tr><td style="text-align:left;">onTabItemTap</td> <td style="text-align:left;">onTabItemTap</td> <td style="text-align:left;">微信/支付宝/百度/QQ</td></tr> <tr><td style="text-align:left;">onAddToFavorites</td> <td style="text-align:left;">onAddToFavorites</td> <td style="text-align:left;">微信 / QQ</td></tr> <tr><td style="text-align:left;">onShareTimeline</td> <td style="text-align:left;">onShareTimeline</td> <td style="text-align:left;">微信</td></tr> <tr><td style="text-align:left;">onSaveExitState</td> <td style="text-align:left;">onSaveExitState</td> <td style="text-align:left;">微信</td></tr></tbody></table> <blockquote><p>特别注意，由于静态编译分析实现方式的限制，这类页面事件的组合式 API 使用需要满足页面事件注册函数的调用和 <code>createPage</code> 的调用位于同一个 js 文件当中。</p></blockquote> <h2 id="template-ref"><a href="#template-ref" class="header-anchor">#</a> 模板引用 </h2> <p>在 Vue3 的组合式 API 中，我们可以在 <code>setup</code> 函数中使用 <code>ref()</code> 创建引用数据获取模板中绑定了 <code>ref</code> 属性的组件或 DOM 节点，优雅地将<strong>响应式引用</strong>和<strong>模板引用</strong>进行了关联统一，但在 Mpx 中，受限于小程序的技术限制，我们无法在低性能损耗下实现相同的设计，因此我们在 setup 的 context 参数中提供了 refs 对象，结合模板中的<code>wx:ref</code>指令使用，与选项式 API 中的 $refs 保持一致。</p> <p>下面是组合式 API 中进行模板引用的使用示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleHello<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hello<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{showWorld}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>world<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>world<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{list}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted<span class="token punctuation">,</span> nextTick <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> <span class="token punctuation">{</span> refs <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> showWorld <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
-      <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'手机'</span><span class="token punctuation">,</span> <span class="token string">'电视'</span><span class="token punctuation">,</span> <span class="token string">'电脑'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-
-      <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token comment">// 最早在 onMounted 中才能访问refs，对于节点返回 NodesRef 对象，对于组件返回组件实例</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello ref:'</span><span class="token punctuation">,</span> refs<span class="token punctuation">.</span>hello<span class="token punctuation">)</span>
-        <span class="token comment">// 在循环中定义 wx:ref，对应的 refs 返回数组</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'list ref:'</span><span class="token punctuation">,</span> refs<span class="token punctuation">.</span>list<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-      <span class="token keyword">const</span> <span class="token function-variable function">handleHello</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        showWorld<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span>
-        <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-          <span class="token comment">// 数据变更后要在 nextTick 中访问更新后的视图数据</span>
-          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'world ref:'</span><span class="token punctuation">,</span> refs<span class="token punctuation">.</span>world<span class="token punctuation">)</span>
-        <span class="token punctuation">}</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-      
-      <span class="token comment">// 暴露给 template</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        showWorld<span class="token punctuation">,</span>
-        handleHello<span class="token punctuation">,</span>
-        list
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="script-setup"><a href="#script-setup" class="header-anchor">#</a> <code>&lt;script setup&gt;</code></h2> <p>和 Vue 类似，<code>&lt;script setup&gt;</code> 是在 Mpx 单文件组件中使用组合式 API 时的编译时语法糖。不过受小程序底层技术限制，在 Mpx 中 <code>&lt;script setup&gt;</code> 无法完整提供其在 Vue 中所具备的相关优势，我们提供了这个语法能力，但不作为默认的推荐选项。</p> <h3 id="基本语法"><a href="#基本语法" class="header-anchor">#</a> 基本语法</h3> <p>启用该语法需要在 <code>&lt;script&gt;</code> 代码块上添加 <code>setup</code> attribute:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello Mpx script setup'</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p><code>&lt;script&gt;</code> 里边的代码会被编译成组件 <code>setup()</code> 函数的内容。</p> <h3 id="顶层的绑定会被暴露给模版"><a href="#顶层的绑定会被暴露给模版" class="header-anchor">#</a> 顶层的绑定会被暴露给模版</h3> <blockquote><p>从 v2.8.19 开始，顶层绑定自动暴露给模板的能力被取消，构建时会强制用户通过 <code>defineExpose</code> 手动声明需要暴露给模板的数据或方法。</p></blockquote> <p>和 Vue 一样，当使用 <code>&lt;script setup&gt;</code> 时，任何在 <code>&lt;script setup&gt;</code> 声明的顶层的绑定（包括变量，函数声明，以及 import 导入的内容） 都能在模版中直接使用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-    <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token keyword">function</span> <span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>msg: {{msg}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">ontap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>log<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>import 导入的内容，除了从 <code>@mpxjs/core</code> 中导入的变量或方法，其他模块导入的属性和方法全部都会暴露给模版。这意味着我们可以直接在模版中使用引入的相关方法，而不需要通过 <code>methods</code> 选项来暴露：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">ontap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clickTrigger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">import</span> <span class="token punctuation">{</span> clickTrigger <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./utils'</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><blockquote><p>注意项：如果你 <code>script setup</code> 中有较多对象或方法的声明和引入，比如全局 store 这种十分复杂的对象，走默认逻辑暴露给模版会造成性能问题，因此需要使用 <code>defineExpose</code> 来手动定义暴露给模版的数据和方法。</p></blockquote> <h3 id="响应式"><a href="#响应式" class="header-anchor">#</a> 响应式</h3> <p>和 Vue 中一样，响应式状态需要明确使用响应性 API 来创建。和 <code>setup()</code> 函数的返回值一样，ref 在模版中使用的时候会自动解包：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">ontap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addCount<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-    <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-    <span class="token keyword">function</span> <span class="token function">addCount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        count<span class="token punctuation">.</span>value<span class="token operator">++</span>
-    <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="defineprops"><a href="#defineprops" class="header-anchor">#</a> <code>defineProps()</code></h3> <p>和 Vue 类似，为了在声明小程序组件 <code>properties</code> 选项时获得完整的类型推导支持，在 <code>&lt;script setup&gt;</code> 中，我们需要使用 <code>defineProps</code> API，它默认在 <code>&lt;script setup&gt;</code> 中可用：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">testA</span><span class="token operator">:</span> String
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><ul><li><code>defineProps</code> 是只能在 <code>&lt;script setup&gt;</code> 中使用的<strong>编译宏</strong>，不需要手动导入，会跟随 <code>&lt;script setup&gt;</code> 的处理过程一同被编译掉。</li> <li><code>defineProps</code> 接收与小程序 <code>properties</code> 选项相同的值。</li> <li>传入到 <code>defineProps</code> 的选项会从 setup 中提升到模块的作用域。因此传入的选项不能引用在 setup 作用域中声明的局部变量，否则会导致编译错误，不过可以引入导入的绑定。</li></ul> <h3 id="defineexpose"><a href="#defineexpose" class="header-anchor">#</a> <code>defineExpose()</code></h3> <p>在 <code>&lt;script setup&gt;</code> 中定义暴露给模版的变量和方法，在 Mpx <code>&lt;script setup&gt;</code> 中属于<strong>强制要求</strong>，若不使用该编译宏，则会构建报错。</p> <p>Mpx 中的 defineExpose 和 Vue3 中的不尽相同，在 Vue3 中，使用 <code>&lt;scrip setup&gt;</code> 的组件默认是关闭的-即通过模版引用或者 <code>$parent</code> 链获取到的组件实例中不会暴露任何在<code>&lt;script setup&gt;</code> 中声明的绑定。</p> <p>在 Mpx 中，<code>&lt;script setup&gt;</code> 中的声明绑定都会挂载到组件实例中，都可以通过组件实例来访问，Mpx <code>defineExpose</code> 更大的作用是假如你在 <code>&lt;scrip setup&gt;</code> 中引入了一些 store 实例，这些 store 实例默认会挂载到组件实例中，会导致后续的响应式处理以及组件更新速度变慢，这里我们通过强制使用
-<code>defineExpose</code> 来规避掉这个问题。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'black'</span><span class="token punctuation">)</span>
-    <span class="token function">defineExpose</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        name
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--正确渲染 black--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token comment">&lt;!--找不到对应变量，无内容--&gt;</span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="defineoptions"><a href="#defineoptions" class="header-anchor">#</a> <code>defineOptions()</code></h3> <p>此编译宏相较于 Vue 是 Mpx 中独有的，主要是当开发者想在 <code>&lt;script setup&gt;</code> 中使用一些微信小程序中特有的选项式，例如 relations、moved 等，可以使用该编译宏进行定义。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token function">defineOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">pageLifetimes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token comment">// 组件所在页面的生命周期函数</span>
-            <span class="token function-variable function">resize</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><ul><li><code>defineOptions</code> 是只能在 <code>&lt;script setup&gt;</code> 中使用的<strong>编译宏</strong>，不需要手动导入，会跟随 <code>&lt;script setup&gt;</code> 的处理过程一同被编译掉。</li> <li><code>defineOptions</code> 无返回值。</li> <li><code>defineOptions</code> 中的选项会无脑提升至组件或页面构造器的选项之中，因此不可引用 setup 中的局部变量。</li></ul> <h3 id="usecontext"><a href="#usecontext" class="header-anchor">#</a> <code>useContext()</code></h3> <p>在 <code>&lt;script setup&gt;</code> 中，当我们想要使用 <code>context</code> 时，可以使用 <code>useContext()</code> 来获 <code>context</code> 对象。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-    <span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token function">useContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token comment">// 获取 NodesRef/组件实例，等价于 this.$refs</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>refs<span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="针对-typescript-的功能"><a href="#针对-typescript-的功能" class="header-anchor">#</a> 针对 TypeScript 的功能</h3> <h4 id="类型-props-的声明"><a href="#类型-props-的声明" class="header-anchor">#</a> 类型 props 的声明</h4> <p>props 可以通过给 <code>defineProps</code> 传递纯类型函数的方式来声明：</p> <div class="language-ts extra-class"><pre class="language-ts"><code>    <span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token generic-function"><span class="token function">defineProps</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token punctuation">{</span>
-        foo<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
-        bar<span class="token operator">:</span> <span class="token builtin">number</span>
-    <span class="token punctuation">}</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-
-    <span class="token comment">// 构建转换为</span>
-    <span class="token punctuation">{</span>
-        properties<span class="token operator">:</span> <span class="token punctuation">{</span>
-            foo<span class="token operator">:</span> <span class="token punctuation">{</span>
-                type<span class="token operator">:</span> String
-            <span class="token punctuation">}</span><span class="token punctuation">,</span>
-            bar<span class="token operator">:</span> <span class="token punctuation">{</span>
-                type<span class="token operator">:</span> Number
-            <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-</code></pre></div><ul><li><code>defineProps</code> 要么使用运行时声明，要么使用类型声明。同时使用两种方式会导致编译报错。</li> <li>小程序中 <code>defineProps</code> 类型声明若有 optional 不会生效，因为小程序的 props 只要声明则一定会存在</li> <li>类型声明参数必须是一下内容之一，以确保正确的静态分析：
-<ul><li>类型字面量</li> <li>在同一文件中的接口或者类型字面量的引用</li></ul></li></ul> <h4 id="使用类型声明时的默认-props-值"><a href="#使用类型声明时的默认-props-值" class="header-anchor">#</a> 使用类型声明时的默认 props 值</h4> <p>和 Vue3 一样，针对类型的 <code>defineProps</code> 声明的不足，它无法给 props 提供默认值。为了解决这个问题，我们也支持了 <code>withDefaults</code> 编译宏：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
-  msg<span class="token operator">:</span> <span class="token builtin">string</span>
-  labels<span class="token operator">:</span> <span class="token builtin">string</span>
-<span class="token punctuation">}</span>
-
-<span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">withDefaults</span><span class="token punctuation">(</span><span class="token generic-function"><span class="token function">defineProps</span><span class="token generic class-name"><span class="token operator">&lt;</span>Props<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  msg<span class="token operator">:</span> <span class="token string">'hello'</span><span class="token punctuation">,</span>
-  labels<span class="token operator">:</span> <span class="token string">'world'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>上边代码会被编译为等价的运行时 props 的 <code>value</code> 选项。</p> <ul><li>小程序 properties 定义中的 optionalTypes 和 observer 字段，无法使用 TypeScript 类型声明的方式定义，如果需要定义这两个字段，目前需要使用运行时的方式来定义。</li></ul> <h3 id="限制"><a href="#限制" class="header-anchor">#</a> 限制</h3> <p>由于模块执行语义的差异，<code>&lt;script setup&gt;</code> 中的代码依赖单文件组件的上下文，如果将其移动到外部的 <code>.js</code> 或者 <code>.ts</code> 的时候，对于开发者可工具来说都十分混乱。因此 <code>&lt;script setup&gt;</code> 不能和 <code>src</code> attribute 一起使用。</p> <h2 id="组合式-api-与-vue3-中的区别"><a href="#组合式-api-与-vue3-中的区别" class="header-anchor">#</a> 组合式 API 与 Vue3 中的区别</h2> <p>下面我们来总结一下 Mpx 中组合式 API 与 Vue3 中的区别：</p> <ul><li><code>setup</code> 的 <code>context</code> 参数不同，详见<a href="#Context">这里</a></li> <li><code>setup</code> 不支持返回<strong>渲染函数</strong></li> <li><code>setup</code> 不能是异步函数</li> <li><code>&lt;script setup&gt;</code> 提供的宏方法不同，详见<a href="#script-setup">这里</a></li> <li><code>&lt;script setup&gt;</code> 不支持 <code>import</code> 快捷引入组件</li> <li><code>&lt;script setup&gt;</code> 必须使用 <a href="#defineprops">defineExpose</a></li> <li>支持的生命周期钩子不同，详见<a href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90">这里</a></li> <li>模板引用的方式不同，详见<a href="#%E6%A8%A1%E6%9D%BF%E5%BC%95%E7%94%A8">这里</a></li></ul> <h2 id="组合式-api-周边生态能力的使用"><a href="#组合式-api-周边生态能力的使用" class="header-anchor">#</a> 组合式 API 周边生态能力的使用</h2> <p>我们对 Mpx 提供的周边生态能力也都进行了组合式 API 适配升级，详情如下：</p> <ul><li><code>store</code> 在组合式 API 中使用，详见<a href="/guide/advance/store.html#use-store-in-composition-api">这里</a></li> <li><code>pinia</code> 在组合式 API 中使用，详见<a href="/guide/advance/pinia.html">这里</a></li> <li><code>fetch</code> 在组合式 API 中使用，详见<a href="/guide/extend/fetch.md/#composition-api-usage">这里</a></li> <li><code>i18n</code> 在组合式 API 中使用，详见<a href="/guide/advance/i18n.html#composition-api-usage">这里</a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/advance/provide-inject.html" class="prev">
-        依赖注入（Provide/Inject）
-      </a></span> <span class="next"><a href="/guide/composition-api/reactive-api.html">
-        响应式 API
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/97.fa1ed9e7.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/composition-api/reactive-api.html b/docs-vuepress/.vuepress/dist/guide/composition-api/reactive-api.html
deleted file mode 100644
index 2cdf69c97a..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/composition-api/reactive-api.html
+++ /dev/null
@@ -1,386 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>响应式 API | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/98.939cb6ef.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" aria-current="page" class="active sidebar-link">响应式 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#创建响应式对象" class="sidebar-link">创建响应式对象</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#use-ref-create-reactive-value" class="sidebar-link">使用ref()创建独立的响应式值</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#响应式对象解构" class="sidebar-link">响应式对象解构</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#计算值" class="sidebar-link">计算值</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#watcheffect" class="sidebar-link">watchEffect</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#watch" class="sidebar-link">watch</a></li><li class="sidebar-sub-header"><a href="/guide/composition-api/reactive-api.html#响应式-api-与-vue3-中的区别" class="sidebar-link">响应式 API 与 Vue3 中的区别</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="响应式-api"><a href="#响应式-api" class="header-anchor">#</a> 响应式 API</h1> <p>在 Mpx 中，为了支持<a href="/guide/composition-api/composition-api.html">组合式 API</a> 的使用，我们参考 Vue3 提供了相关的响应式 API，但由于 <code>proxy</code> 目前仍然存在浏览器兼容性问题，我们在底层还是基于 <code>Object.defineProperty</code> 实现的数据响应，因此相较于 Vue3 提供的 API 存在一些删减，同时也存在与 Vue2 一样的数据响应<a href="https://v2.cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" target="_blank" rel="noopener noreferrer">使用限制<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="创建响应式对象"><a href="#创建响应式对象" class="header-anchor">#</a> 创建响应式对象</h2> <p>在 Mpx 中，我们可以使用 <code>reactive</code> 方法将一个 JavaScript 对象<strong>深度转换</strong>为响应式对象，当对象内数据发生变化时能够被系统感知，相当于 Vue2 中的 <code>observable</code>，需要注意的是在 Mpx 中 <code>reactive()</code> 是将传入的对象进行响应性转化后返回原对象，而在 Vue3 中则会基于 <code>proxy</code> API 返回传入对象的响应式代理。</p> <p>目前 <code>reactive</code> 仅支持传入基础对象类型，包括纯对象和数组，暂不支持 <code>Map</code> 和 <code>Set</code> 这样的集合类型。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token comment">// 响应式对象</span>
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>你可以在<a href="/api/reactivity-api/basic-reactivity.html">响应式基础 API</a> 章节中了解更多关于 <code>reactive</code> 的信息。</p> <h2 id="use-ref-create-reactive-value"><a href="#use-ref-create-reactive-value" class="header-anchor">#</a> 使用<code>ref()</code>创建独立的响应式值 </h2> <p>上面提到 <code>reactive</code> 只能传入对象类型数据，当我们想将一个原始数据类型的值（如数字、字符串、布尔值）变成响应式时，我们不得不先将其包装为一个对象，使用起来较为繁琐，新的 <code>ref</code> 方法能够让我们便捷地达成上述目标：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token comment">// 响应式值</span>
-<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-</code></pre></div><p><code>ref()</code> 会返回一个可变的响应式对象，该对象作为一个<strong>响应式引用</strong>通过 <code>value</code> 属性维护着传入的内部值：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 0</span>
-
-count<span class="token punctuation">.</span>value<span class="token operator">++</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 1</span>
-</code></pre></div><h3 id="ref-解包"><a href="#ref-解包" class="header-anchor">#</a> Ref 解包</h3> <p>当 <code>ref</code> 作为渲染上下文 (从 <code>setup()</code> 中返回的对象) 上的 property 返回并可以在模板中被访问时，它将自动浅层次解包内部值。只有访问嵌套的 ref 时需要在模板中添加 <code>.value</code>：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ count }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ nested.count.value }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-   
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        count<span class="token punctuation">,</span>
-        <span class="token literal-property property">nested</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          count
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="访问响应式对象"><a href="#访问响应式对象" class="header-anchor">#</a> 访问响应式对象</h3> <p>当 <code>ref</code> 作为响应式对象的 property 被访问或更改时，为使其行为类似于普通 property，它会自动解包内部值：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  count
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token comment">// 0</span>
-
-state<span class="token punctuation">.</span>count <span class="token operator">=</span> <span class="token number">1</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 1</span>
-</code></pre></div><p>如果将新的 ref 赋值给现有 ref 的 property，将会替换旧的 ref：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> otherCount <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
-
-state<span class="token punctuation">.</span>count <span class="token operator">=</span> otherCount
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>count<span class="token punctuation">)</span> <span class="token comment">// 2</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 1</span>
-</code></pre></div><p>Ref 解包仅发生在被响应式 <code>Object</code> 嵌套的时候。当从 <code>Array</code> 访问 ref 时，不会进行解包：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'Hello world'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-<span class="token comment">// 这里需要 .value</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-</code></pre></div><h2 id="响应式对象解构"><a href="#响应式对象解构" class="header-anchor">#</a> 响应式对象解构</h2> <p>当我们想使用大型响应式对象的一些 property 时，可能很想使用 <strong>ES6 解构</strong>来获取我们想要的 property：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> people <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'hiyuki'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">26</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">'male'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">city</span><span class="token operator">:</span> <span class="token string">'Beijing'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">let</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age <span class="token punctuation">}</span> <span class="token operator">=</span> people
-</code></pre></div><p>遗憾的是，使用解构的两个 property 的响应性都会丢失。对于这种情况，我们需要将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> toRefs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> people <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'hiyuki'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">26</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">'male'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">city</span><span class="token operator">:</span> <span class="token string">'Beijing'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token keyword">let</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> age <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">toRefs</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span>
-age<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token number">30</span> <span class="token comment">// age 现在是个 ref，我们需要使用 .value 进行访问，对其进行修改也将直接作用在原响应式对象中</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>people<span class="token punctuation">.</span>age<span class="token punctuation">)</span> <span class="token comment">// 30</span>
-</code></pre></div><p>你可以在<a href="/api/reactivity-api/refs-api.html">Refs API</a> 章节中了解更多关于 <code>refs</code> 的信息。</p> <h2 id="计算值"><a href="#计算值" class="header-anchor">#</a> 计算值</h2> <p>有时我们需要依赖于其他状态的状态——在 选项式 API 中，这是用组件计算属性处理的，在新的组合式 API 中，我们可以使用 <code>computed</code> 函数直接创建计算值：它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> plusOne <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
-
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>plusOne<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 2</span>
-
-plusOne<span class="token punctuation">.</span>value<span class="token operator">++</span> <span class="token comment">// error</span>
-</code></pre></div><p>或者，可以使用一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> plusOne <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
-  <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token parameter">val</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    count<span class="token punctuation">.</span>value <span class="token operator">=</span> val <span class="token operator">-</span> <span class="token number">1</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-plusOne<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token number">1</span>
-console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token comment">// 0</span>
-</code></pre></div><h2 id="watcheffect"><a href="#watcheffect" class="header-anchor">#</a> <code>watchEffect</code></h2> <p>为了根据响应式状态自动应用和重新应用副作用，我们可以使用 <code>watchEffect</code> 函数。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-
-<span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
-<span class="token comment">// -&gt; logs 0</span>
-
-<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  count<span class="token punctuation">.</span>value<span class="token operator">++</span>
-  <span class="token comment">// -&gt; logs 1</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="停止侦听"><a href="#停止侦听" class="header-anchor">#</a> 停止侦听</h3> <p>当 <code>watchEffect</code> 在组件的 <a href="/guide/composition-api/composition-api.html#Setup">setup()</a> 函数或<a href="/guide/composition-api/composition-api.html#生命周期钩子">生命周期钩子</a>被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。</p> <p>在一些情况下，也可以显式调用返回值以停止侦听：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> stop <span class="token operator">=</span> <span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token comment">/* ... */</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// later</span>
-<span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="清除副作用"><a href="#清除副作用" class="header-anchor">#</a> 清除副作用</h3> <p>有时副作用函数会执行一些异步的副作用，这些响应需要在其失效时清除 (即完成之前状态已改变了) 。所以侦听副作用传入的函数可以接收一个 <code>onInvalidate</code> 函数作入参，用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发：</p> <ul><li>副作用即将重新执行时</li> <li>侦听器被停止 (如果在 <code>setup()</code> 或生命周期钩子函数中使用了 <code>watchEffect</code>，则在组件卸载时)</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token parameter">onInvalidate</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> token <span class="token operator">=</span> <span class="token function">performAsyncOperation</span><span class="token punctuation">(</span>id<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-  <span class="token function">onInvalidate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token comment">// id has changed or watcher is stopped.</span>
-    <span class="token comment">// invalidate previously pending async operation</span>
-    token<span class="token punctuation">.</span><span class="token function">cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>之所以是通过传入一个函数去注册失效回调，而不是从回调返回它，是因为返回值对于异步错误处理很重要。</p> <p>在执行数据请求时，副作用函数往往是一个异步函数：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span>
-<span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token parameter">onInvalidate</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token function">onInvalidate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token comment">/* ... */</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 在Promise解析之前注册清除函数</span>
-  data<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchData</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>我们知道异步函数都会隐式地返回一个 Promise，但是清理函数必须要在 Promise 被 resolve 之前被注册。</p> <h3 id="副作用刷新时机"><a href="#副作用刷新时机" class="header-anchor">#</a> 副作用刷新时机</h3> <p>默认情况下，数据发生变更时，关联的副作用会被推入异步队列中，进行异步刷新，这样可以避免同一个“tick” 中多个状态改变导致的不必要的重复调用。在核心的具体实现中，组件的 <code>render</code> 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时，默认情况下，会在所有的组件 <code>render</code> 前执行：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ count }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-<span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> watchEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-
-    <span class="token function">watchEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>count<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      count
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>在这个例子中：</p> <ul><li><code>count</code> 会在初始运行时同步打印出来</li> <li>更改 <code>count</code> 时，将在组件<strong>更新前</strong>执行副作用。</li></ul> <p>如果需要在组件更新(例如：当与<a href="/guide/composition-api/composition-api.html#模板引用">模板引用</a>一起)后重新运行侦听器副作用，我们可以传递带有 <code>flush</code> 选项的附加 <code>options</code> 对象 (默认为 <code>'pre'</code>)：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 在组件更新后触发，这样你就可以访问更新的 DOM。</span>
-<span class="token comment">// 注意：这也将推迟副作用的初始运行，直到组件的首次渲染完成。</span>
-<span class="token function">watchEffect</span><span class="token punctuation">(</span>
-  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token comment">/* 访问视图 */</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token punctuation">{</span>
-    <span class="token literal-property property">flush</span><span class="token operator">:</span> <span class="token string">'post'</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">)</span>
-</code></pre></div><p><code>flush</code> 选项还接受 <code>sync</code>，这将强制效果始终同步触发。然而，这是低效的，应该很少需要。</p> <p>与此同时，我们还提供了 <code>watchPostEffect</code> 和 <code>watchSyncEffect</code> 别名用来让代码意图更加明显。</p> <h2 id="watch"><a href="#watch" class="header-anchor">#</a> <code>watch</code></h2> <p><code>watch</code> API 相当于选项式 API 中的 <code>watch property</code>。<code>watch</code> 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况下，它也是惰性的，即只有当被侦听的源发生变化时才执行回调。</p> <ul><li>与 <a href="#watcheffect">watchEffect</a> 比较，<code>watch</code> 允许我们：
-<ul><li>懒执行副作用；</li> <li>更具体地说明什么状态应该触发侦听器重新运行；</li> <li>访问侦听状态变化前后的值。</li></ul></li></ul> <h3 id="侦听单个数据源"><a href="#侦听单个数据源" class="header-anchor">#</a> 侦听单个数据源</h3> <p>侦听器数据源可以是返回值的 getter 函数，也可以直接是 <code>ref</code>：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 侦听一个 getter</span>
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token function">watch</span><span class="token punctuation">(</span>
-  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>count<span class="token punctuation">,</span>
-  <span class="token punctuation">(</span><span class="token parameter">count<span class="token punctuation">,</span> prevCount</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token comment">/* ... */</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">)</span>
-
-<span class="token comment">// 直接侦听ref</span>
-<span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-<span class="token function">watch</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">count<span class="token punctuation">,</span> prevCount</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token comment">/* ... */</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="侦听多个数据源"><a href="#侦听多个数据源" class="header-anchor">#</a> 侦听多个数据源</h3> <p>侦听器还可以使用数组同时侦听多个源：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> firstName <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> lastName <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
-
-<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">[</span>firstName<span class="token punctuation">,</span> lastName<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">newValues<span class="token punctuation">,</span> prevValues</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newValues<span class="token punctuation">,</span> prevValues<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-firstName<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'John'</span> <span class="token comment">// logs: [&quot;John&quot;, &quot;&quot;] [&quot;&quot;, &quot;&quot;]</span>
-lastName<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'Smith'</span> <span class="token comment">// logs: [&quot;John&quot;, &quot;Smith&quot;] [&quot;John&quot;, &quot;&quot;]</span>
-</code></pre></div><p>尽管如此，如果你在同一个函数里同时改变这些被侦听的来源，侦听器仍只会执行一次：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> firstName <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> lastName <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
-  
-    <span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">[</span>firstName<span class="token punctuation">,</span> lastName<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">newValues<span class="token punctuation">,</span> prevValues</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newValues<span class="token punctuation">,</span> prevValues<span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  
-    <span class="token keyword">const</span> <span class="token function-variable function">changeValues</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      firstName<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'John'</span>
-      lastName<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'Smith'</span>
-      <span class="token comment">// 打印 [&quot;John&quot;, &quot;Smith&quot;] [&quot;&quot;, &quot;&quot;]</span>
-    <span class="token punctuation">}</span>
-  
-    <span class="token keyword">return</span> <span class="token punctuation">{</span> changeValues <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>注意多个同步更改只会触发一次侦听器。</p> <p>通过更改设置 <code>flush: 'sync'</code>，我们可以为每个更改都强制触发侦听器，尽管这通常是不推荐的。或者，可以用 <a href="/api/global-api.html#nexttick">nextTick</a> 等待侦听器在下一步改变之前运行。例如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">changeValues</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  firstName<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'John'</span> <span class="token comment">// 打印 [&quot;John&quot;, &quot;&quot;] [&quot;&quot;, &quot;&quot;]</span>
-  <span class="token keyword">await</span> <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  lastName<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'Smith'</span> <span class="token comment">// 打印 [&quot;John&quot;, &quot;Smith&quot;] [&quot;John&quot;, &quot;&quot;]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h3 id="侦听响应式对象"><a href="#侦听响应式对象" class="header-anchor">#</a> 侦听响应式对象</h3> <p>为了侦听深度嵌套的对象或数组中 property 变化，我们需要将 <code>deep</code> 选项设置为 true：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> 
-  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token punctuation">{</span> 
-    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">watch</span><span class="token punctuation">(</span>
-  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">,</span>
-  <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> prevState</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'not deep'</span><span class="token punctuation">,</span> state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">,</span> prevState<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">)</span>
-
-<span class="token function">watch</span><span class="token punctuation">(</span>
-  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">,</span>
-  <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> prevState</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'deep'</span><span class="token punctuation">,</span> state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">,</span> prevState<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token punctuation">{</span> <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
-<span class="token punctuation">)</span>
-
-state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'Alex'</span> <span class="token comment">// 日志: &quot;deep&quot; &quot;Alex&quot; &quot;Alex&quot;</span>
-</code></pre></div><p>然而，侦听一个响应式对象或数组将始终返回该对象的引用。为了完全侦听深度嵌套的对象和数组，可能需要对值进行深拷贝。这可以通过诸如 <code>lodash.cloneDeep</code> 这样的实用工具来实现：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> _ <span class="token keyword">from</span> <span class="token string">'lodash'</span>
-
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">watch</span><span class="token punctuation">(</span>
-  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> _<span class="token punctuation">.</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">,</span>
-  <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> prevState</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">,</span> prevState<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">)</span>
-
-state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'Alex'</span> <span class="token comment">// 日志: &quot;Alex&quot; &quot;&quot;</span>
-</code></pre></div><p>我们也可以直接给 <code>watch()</code> 传入一个响应式对象，这种情况下会隐式地强制开启 <code>deep</code> 选项，确保嵌套的深层变更能够被监听到：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> 
-  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token punctuation">{</span> 
-    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">watch</span><span class="token punctuation">(</span>
-  state<span class="token punctuation">,</span>
-  <span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> prevState</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'implicit deep'</span><span class="token punctuation">,</span> state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">,</span> prevState<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">)</span>
-
-state<span class="token punctuation">.</span>attributes<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'Alex'</span> <span class="token comment">// 日志: &quot;implicit deep&quot; &quot;Alex&quot; &quot;Alex&quot;</span>
-</code></pre></div><blockquote><p>需要注意的是，在侦听使用 <code>reactive()</code> 创建的响应式对象时，受数据响应限制影响，在改变数组或使用 <code>set()</code> 新增对象属性时，存在和 Vue3 中表现不一致的情况，详情查看<a href="#%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E9%99%90%E5%88%B6%E5%B8%A6%E6%9D%A5%E7%9A%84%E5%B7%AE%E5%BC%82">这里</a></p></blockquote> <h3 id="立即回调的侦听器"><a href="#立即回调的侦听器" class="header-anchor">#</a> 立即回调的侦听器</h3> <p>同选项式 <code>watch</code> 一致，我们也可以通过传递 <code>immediate</code> 选项让侦听回调立即执行：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> 
-  <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">watch</span><span class="token punctuation">(</span>
-  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>count<span class="token punctuation">,</span>
-  <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> oldValue</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'immediate'</span><span class="token punctuation">,</span> value<span class="token punctuation">,</span> oldValue<span class="token punctuation">)</span> <span class="token comment">// 日志: &quot;immediate&quot; 0 undefined</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token punctuation">{</span> <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
-<span class="token punctuation">)</span>
-</code></pre></div><h3 id="与-watcheffect-共享的行为"><a href="#与-watcheffect-共享的行为" class="header-anchor">#</a> 与 watchEffect 共享的行为</h3> <p><code>watch</code> 与 <code>watchEffect</code> 共享<a href="#%E5%81%9C%E6%AD%A2%E4%BE%A6%E5%90%AC">停止侦听</a>，<a href="#%E6%B8%85%E9%99%A4%E5%89%AF%E4%BD%9C%E7%94%A8">清除副作用</a> (相应地 <code>onInvalidate</code> 会作为回调的第三个参数传入)、<a href="#%E5%89%AF%E4%BD%9C%E7%94%A8%E5%88%B7%E6%96%B0%E6%97%B6%E6%9C%BA">副作用刷新时机</a>行为。</p> <h2 id="响应式-api-与-vue3-中的区别"><a href="#响应式-api-与-vue3-中的区别" class="header-anchor">#</a> 响应式 API 与 Vue3 中的区别</h2> <p>下面我们来总结一下 Mpx 中响应式 API 与 Vue3 中的区别：</p> <ul><li>不支持 <code>raw</code> 相关 API（<code>markRaw</code> 除外，我们提供了该 API 用于跳过部分数据的响应式转换）</li> <li>不支持 <code>readonly</code> 相关 API</li> <li>不支持 <code>watchEffect</code>、<code>watch</code>、<code>computed</code> 的调试选项</li> <li>不支持对 <code>map</code>、<code>set</code> 等集合类型进行响应式转换</li> <li>受到 <code>Object.defineProperty</code> 实现带来的数据响应限制影响</li></ul> <h3 id="数据响应限制带来的差异"><a href="#数据响应限制带来的差异" class="header-anchor">#</a> 数据响应限制带来的差异</h3> <p>同 Vue2 一致，Mpx 无法感知到对象 property 的添加或移除，我们暴露了 <code>set</code> 和 <code>del</code> API 来让用户显式地进行相关操作：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set<span class="token punctuation">,</span> del <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// {&quot;count&quot;:0}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token string">'hello'</span><span class="token punctuation">,</span> <span class="token string">'world'</span><span class="token punctuation">)</span> <span class="token comment">// {&quot;count&quot;:0,&quot;hello&quot;:&quot;world&quot;}</span>
-
-<span class="token function">del</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token string">'count'</span><span class="token punctuation">)</span> <span class="token comment">// {&quot;hello&quot;:&quot;world&quot;}</span>
-</code></pre></div><p>同样，我们需要使用 <code>set</code> 或数组原型方法对数组进行修改：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-
-<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [0,1,2,3]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// [0,3,2,3]</span>
-
-state<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// [0,3,2,3,4]</span>
-</code></pre></div><p>可能你已经注意到，上面两个示例当中我们都使用了 <code>ref()</code> 进行响应式数据创建，这是有原因的，在新的响应式 API 模式下，我们使用 <code>reactive()</code> 创建的响应式数据在上述情况下仍然无法绕过 Vue2 设计中的数据响应限制，即使你使用了 <code>set</code> 或数组原型方法：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive<span class="token punctuation">,</span> watchSyncEffect<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-
-<span class="token function">watchSyncEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [0,1,2,3]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发 watchEffect</span>
-
-state<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发 watchEffect</span>
-</code></pre></div><p>对于对象和在模板中使用也是同理：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addCount2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{state.count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{state.count2}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> createComponent<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> set <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token function">setup</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-        <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-      <span class="token keyword">const</span> <span class="token function-variable function">addCount2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">set</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token string">'count2'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token comment">// 不会触发视图更新</span>
-      <span class="token punctuation">}</span>
-
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        state<span class="token punctuation">,</span>
-        addCount2
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>为什么会产生这个现象呢？原因在于：基于 <code>Object.defineProperty</code> 实现的数据响应系统中，我们会对对象的每个已有属性创建了一个 <code>Dep</code> 对象，在对该属性进行 <code>get</code> 访问时通过这个对象将其与依赖它的观察者 <code>ReactiveEffect</code> 关联起来，并在 <code>set</code> 操作时触发关联 <code>ReactiveEffect</code> 的更新，这是我们大家都知道的数据响应的基本原理。但是对于新增/删除对象属性和修改数组的场景，我们无法事先定义当前不存在属性的 <code>get/set</code> (当然这在 <code>proxy</code> 当中是可行的)，因此我们会把对象或者数组本身作为一个数据依赖创建 <code>Dep</code> 对象，<strong>通过父级访问</strong>该数据时定义的 <code>get/set</code> 将其关联到对应的 <code>ReactiveEffect</code>，并在对数据进行新增/删除属性或数组操作时通过数据本身持有的 <code>Dep</code> 对象触发关联 <code>ReactiveEffect</code> 的更新，如下图所示：</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/ReactiveEffect.png" alt="数据响应原理"></p> <p>需要注意的是，<strong>通过父级访问</strong>是建立 <code>Dep</code> 与 <code>ReactiveEffect</code> 关联关系的先决条件，在选项式 API 中，我们访问组件的响应式数据都需要通过 <code>this</code> 进行访问，相当于这些数据都存在 <code>this</code> 这个必要的<strong>父级</strong>，因此我们在使用 <code>$set/$delete</code> 进行对对象进行新增/删除属性或对数组进行修改时都能得到符合预期的结果，唯一的限制在于不能新增/删除根级数据属性，原因就在于 <code>this</code> 不存在访问它的父级。</p> <p>但是在组合式 API 中，我们不需要通过 <code>this</code> 访问响应式数据，因此通过 <code>reactive()</code> 创建的响应式数据本身就是根级数据，我们自然无法通过上述方式感知到根级数据自身的变化（在 Vue3 中，基于 <code>proxy</code> 提供的强大能力响应式系统能够精确地感知到数据属性，甚至是当前不存在属性的访问与修改，不需要为数据自身建立 <code>Dep</code> 对象，自然也不存在相关问题）。</p> <p>在这种情况下，我们就需要用 <code>ref()</code> 创建响应式数据，因为 <code>ref</code> 创建了一个包装对象，我们永远需要通过 <code>.value</code> 来访问其持有的数据（不管是显式访问还是隐式自动解包），这样就能保证 <code>ref</code> 数据自身的变化能够被响应式系统感知，因此也不会遇到上面描述的问题。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/composition-api/composition-api.html" class="prev">
-        组合式 API
-      </a></span> <span class="next"><a href="/guide/tool/ts.html">
-        使用TypeScript开发小程序
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/98.939cb6ef.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/extend/api-proxy.html b/docs-vuepress/.vuepress/dist/guide/extend/api-proxy.html
deleted file mode 100644
index 3dc598d21e..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/extend/api-proxy.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Api代理 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/99.96c5a70e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable router-link-active open"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" aria-current="page" class="active sidebar-link">Api代理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/extend/api-proxy.html#usage" class="sidebar-link">Usage</a></li><li class="sidebar-sub-header"><a href="/guide/extend/api-proxy.html#options" class="sidebar-link">Options</a></li><li class="sidebar-sub-header"><a href="/guide/extend/api-proxy.html#example" class="sidebar-link">example</a></li></ul></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="api代理"><a href="#api代理" class="header-anchor">#</a> Api代理</h1> <blockquote><p>convert API at each end 各个平台之间 api 进行转换，目前已支持微信转支付宝、微信转web</p></blockquote> <h2 id="usage"><a href="#usage" class="header-anchor">#</a> Usage</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 使用 mpx 生态</span>
-
-<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> options<span class="token punctuation">)</span>
-</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 脱离 Mpx 单独使用</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> getProxy <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
-<span class="token comment">// proxy 即为target 实例</span>
-<span class="token keyword">const</span> proxy <span class="token operator">=</span> <span class="token function">getProxy</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span>
-
-proxy<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/pages/test'</span><span class="token punctuation">,</span>
-  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="options"><a href="#options" class="header-anchor">#</a> Options</h2> <table><thead><tr><th>参数名称</th> <th>类型</th> <th>含义</th> <th>是否必填</th> <th>默认值</th> <th>备注</th></tr></thead> <tbody><tr><td>platform</td> <td>Object</td> <td>各平台之间的转换</td> <td>否</td> <td>{ from:'', to:'' }</td> <td>使用 mpx 脚手架配置会自动进行转换，无需配置</td></tr> <tr><td>exclude</td> <td>Array(String)</td> <td>跨平台时不需要转换的 api</td> <td>-</td> <td></td> <td></td></tr> <tr><td>usePromise</td> <td>Boolean</td> <td>是否将 api 转化为 promise 格式使用</td> <td>否</td> <td>false</td> <td>-</td></tr> <tr><td>whiteList</td> <td>Array(String)</td> <td>强行转化为 promise 格式的 api</td> <td>否</td> <td>[]</td> <td>需要 usePromise 设为 true</td></tr> <tr><td>blackList</td> <td>Array(String)</td> <td>强制不变成 promise 格式的 api</td> <td>否</td> <td>[]</td> <td>-</td></tr> <tr><td>fallbackMap</td> <td>Object</td> <td>对于不支持的API，允许配置一个映射表，接管不存在的API</td> <td>否</td> <td>{}</td> <td>-</td></tr></tbody></table> <h2 id="example"><a href="#example" class="header-anchor">#</a> example</h2> <h3 id="普通形式"><a href="#普通形式" class="header-anchor">#</a> 普通形式</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'showToast'</span><span class="token punctuation">]</span> <span class="token comment">// showToast 将不会被转换为目标平台</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'标题'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'这是一个弹窗'</span><span class="token punctuation">,</span>
-  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>cancel<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'用户点击取消'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="使用promise形式"><a href="#使用promise形式" class="header-anchor">#</a> 使用promise形式</h3> <blockquote><p>开启usePromise时所有的异步api将返回promise，但是小程序中存在一些异步api本身的返回值是具有意义的，如uploadFile会返回一个uploadTask对象用于后续监听上传进度或者取消上传，在对api进行promise化之后我们会将原始的返回值挂载到promise.__returned属性上，便于开发者访问使用</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">usePromise</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">showActionSheet</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">itemList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>tapIndex<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/extend/fetch.html" class="prev">
-        网络请求
-      </a></span> <span class="next"><a href="/guide/extend/mock.html">
-        数据 Mock
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/99.96c5a70e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/extend/fetch.html b/docs-vuepress/.vuepress/dist/guide/extend/fetch.html
deleted file mode 100644
index 7d412bec01..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/extend/fetch.html
+++ /dev/null
@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>网络请求 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/100.f31ffd06.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable router-link-active open"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" aria-current="page" class="active sidebar-link">网络请求</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#使用说明" class="sidebar-link">使用说明</a></li><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#导出说明" class="sidebar-link">导出说明</a></li><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#请求拦截器" class="sidebar-link">请求拦截器</a></li><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#请求中断" class="sidebar-link">请求中断</a></li><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#设置请求参数" class="sidebar-link">设置请求参数</a></li><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#设置请求-timeout" class="sidebar-link">设置请求 timeout</a></li><li class="sidebar-sub-header"><a href="/guide/extend/fetch.html#composition-api-usage" class="sidebar-link">在组合式 API 中使用</a></li></ul></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="网络请求"><a href="#网络请求" class="header-anchor">#</a> 网络请求</h1> <p>Mpx 提供了网络请求库 fetch，抹平了微信，阿里等平台请求参数及响应数据的差异；同时支持请求拦截器，请求取消等</p> <h2 id="使用说明"><a href="#使用说明" class="header-anchor">#</a> 使用说明</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> mpxFetch <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>mpxFetch<span class="token punctuation">)</span>
-<span class="token comment">// 第一种访问形式</span>
-mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-	<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-	<span class="token function">onLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-		<span class="token comment">// 第二种访问形式</span>
-		<span class="token keyword">this</span><span class="token punctuation">.</span>$xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://test.com'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-	<span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="导出说明"><a href="#导出说明" class="header-anchor">#</a> 导出说明</h2> <p>mpx-fetch提供了一个实例 <strong>xfetch</strong> ，该实例包含以下api</p> <ul><li>fetch(config)， 正常的promisify风格的请求方法</li> <li>CancelToken，实例属性，用于创建一个取消请求的凭证。</li> <li>interceptors，实例属性，用于添加拦截器，包含两个属性，request &amp; response</li></ul> <h2 id="请求拦截器"><a href="#请求拦截器" class="header-anchor">#</a> 请求拦截器</h2> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span>
-	<span class="token comment">// 也可以返回promise</span>
-	<span class="token keyword">return</span> config
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
-	<span class="token comment">// 也可以返回promise</span>
-	<span class="token keyword">return</span> res
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="请求中断"><a href="#请求中断" class="header-anchor">#</a> 请求中断</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> cancelToken <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span>CancelToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-	<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-		<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
-	<span class="token punctuation">}</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">cancelToken</span><span class="token operator">:</span> cancelToken<span class="token punctuation">.</span>token
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-cancelToken<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token string">'手动取消请求'</span><span class="token punctuation">)</span> <span class="token comment">// 执行后请求中断，返回abort fail</span>
-</code></pre></div><h2 id="设置请求参数"><a href="#设置请求参数" class="header-anchor">#</a> 设置请求参数</h2> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-	<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-		<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
-	<span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-	<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
-	<span class="token comment">// params 参数等价于 url query</span>
-	<span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-		<span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">10</span>
-	<span class="token punctuation">}</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-		<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
-	<span class="token punctuation">}</span><span class="token punctuation">,</span>
-	<span class="token comment">// 设置参数序列化方式，等价于header = {'content-type': 'application/x-www-form-urlencoded'}</span>
-	<span class="token literal-property property">emulateJSON</span><span class="token operator">:</span> <span class="token boolean">true</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="设置请求-timeout"><a href="#设置请求-timeout" class="header-anchor">#</a> 设置请求 timeout</h2> <div class="language-js extra-class"><pre class="language-js"><code>mpx<span class="token punctuation">.</span>xfetch<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-	<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-		<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
-	<span class="token punctuation">}</span><span class="token punctuation">,</span>
-	<span class="token literal-property property">timeout</span><span class="token operator">:</span> <span class="token number">10000</span> <span class="token comment">// 超时时间</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="composition-api-usage"><a href="#composition-api-usage" class="header-anchor">#</a> 在组合式 API 中使用 </h2> <p>在组合式 API 中我们提供了 <a href="/api/extend.html#usefetch">useFetch</a> 方法来访问 <code>xfetch</code> 实例对象</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.mpx</span>
-<span class="token keyword">import</span> mpx<span class="token punctuation">,</span> <span class="token punctuation">{</span> createComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> useFetch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/fetch'</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token function">useFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-          <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-              <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">10</span>
-          <span class="token punctuation">}</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-              <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'test'</span>
-          <span class="token punctuation">}</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">emulateJSON</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">usePre</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">cacheInvalidationTime</span><span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
-          <span class="token literal-property property">ignorePreParamKeys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'timestamp'</span><span class="token punctuation">]</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>   
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/tool/e2e-test.html" class="prev">
-        E2E自动化测试
-      </a></span> <span class="next"><a href="/guide/extend/api-proxy.html">
-        Api代理
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/100.f31ffd06.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/extend/index.html b/docs-vuepress/.vuepress/dist/guide/extend/index.html
deleted file mode 100644
index ce8aee8acf..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/extend/index.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>扩展mpx | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/101.283d0363.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" aria-current="page" class="sidebar-heading clickable router-link-exact-active router-link-active"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="扩展mpx"><a href="#扩展mpx" class="header-anchor">#</a> 扩展mpx</h1> <h2 id="开发插件"><a href="#开发插件" class="header-anchor">#</a> 开发插件</h2> <p>mpx支持使用mpx.use使用插件来进行扩展。插件本身需要提供一个install方法或本身是一个function，该函数接收一个proxyMPX。插件将采用直接在proxyMPX挂载新api属性或在prototype上挂属性。需要注意的是，一定要在app创建之前进行mpx.use。</p> <p>简单示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">install</span><span class="token punctuation">(</span><span class="token parameter">proxyMPX</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  proxyMPX<span class="token punctuation">.</span><span class="token function-variable function">newApi</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'is new api'</span><span class="token punctuation">)</span>
-  proxyMPX
-    <span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token function">onLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app onLaunch'</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'app'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token function">onShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'page onShow'</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'page'</span><span class="token punctuation">)</span> <span class="token comment">// proxyMPX.injectMixins === proxyMPX.mixin</span>
-
-    <span class="token comment">//  注意：proxyMPX.prototype上挂载的属性都将挂载到组件实例（page实例、app实例上，可以直接通过this访问）, 可以看mixin中的case</span>
-    proxyMPX<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">testHello</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="目前已有插件"><a href="#目前已有插件" class="header-anchor">#</a> 目前已有插件</h2> <ul><li><p>网络请求库fetch: @mpxjs/fetch <a href="#fetch">详细介绍</a> <a href="https://github.com/didi/mpx/tree/master/packages/fetch" target="_blank" rel="noopener noreferrer">源码地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>小程序API转换及promisify：@mpxjs/api-proxy <a href="#api-proxy">详细介绍</a> <a href="https://github.com/didi/mpx/tree/master/packages/api-proxy" target="_blank" rel="noopener noreferrer">源码地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>mock数据：@mpxjs/mock <a href="#mock">详细介绍</a> <a href="https://github.com/didi/mpx/tree/master/packages/mock" target="_blank" rel="noopener noreferrer">源码地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/101.283d0363.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/extend/mock.html b/docs-vuepress/.vuepress/dist/guide/extend/mock.html
deleted file mode 100644
index 322e2bd0c4..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/extend/mock.html
+++ /dev/null
@@ -1,177 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>数据 Mock | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/102.094a0a16.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable router-link-active open"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" aria-current="page" class="active sidebar-link">数据 Mock</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/extend/mock.html#安装" class="sidebar-link">安装</a></li><li class="sidebar-sub-header"><a href="/guide/extend/mock.html#使用说明" class="sidebar-link">使用说明</a></li><li class="sidebar-sub-header"><a href="/guide/extend/mock.html#mock-入参" class="sidebar-link">Mock 入参</a></li><li class="sidebar-sub-header"><a href="/guide/extend/mock.html#mock-规则示例" class="sidebar-link">Mock 规则示例</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="数据-mock"><a href="#数据-mock" class="header-anchor">#</a> 数据 Mock</h1> <h2 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h2> <p>Mpx 提供了对请求响应数据进行拦截的 mock 插件，可通过如下命令进行安装：</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">npm</span> i @mpxjs/mock
-</code></pre></div><h2 id="使用说明"><a href="#使用说明" class="header-anchor">#</a> 使用说明</h2> <p>新建 mock 文件目录及文件(例如：<code>src/mock/index.js</code> )：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/mock/index.js</span>
-<span class="token keyword">import</span> mock <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/mock&quot;</span><span class="token punctuation">;</span>
-<span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-  <span class="token punctuation">{</span>
-    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;http://api.example.com&quot;</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">rule</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;list|1-10&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token punctuation">{</span>
-          <span class="token string-property property">&quot;id|+1&quot;</span><span class="token operator">:</span> <span class="token number">1</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><p>在入口文件( <code>app.mpx</code> )中引入：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token string">&quot;mock/index&quot;</span><span class="token punctuation">;</span> <span class="token comment">// 引入mock即可</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-<span class="token comment">&lt;!-- 其他配置 --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>application/json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;./pages/index&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token string-property property">&quot;window&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;backgroundTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;light&quot;</span><span class="token punctuation">,</span>
-      <span class="token string-property property">&quot;navigationBarBackgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#fff&quot;</span><span class="token punctuation">,</span>
-      <span class="token string-property property">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;WeChat&quot;</span><span class="token punctuation">,</span>
-      <span class="token string-property property">&quot;navigationBarTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;black&quot;</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><blockquote><p>由于 mock 为全局自动代理，执行<code>@mpxjs/mock</code>所暴露的方法之后会立即拦截小程序的原生请求，如果需要根据不同环境变量等去控制是否使用 mock 数据，可以参考如下方法：</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// src/mock/index.js</span>
-<span class="token keyword">import</span> mock <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/mock&quot;</span><span class="token punctuation">;</span>
-<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-  <span class="token punctuation">{</span>
-    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;http://api.example.com&quot;</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">rule</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;list|1-10&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-        <span class="token punctuation">{</span>
-          <span class="token string-property property">&quot;id|+1&quot;</span><span class="token operator">:</span> <span class="token number">1</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- app.mpx --&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> mockSetup <span class="token keyword">from</span> <span class="token string">&quot;mock/index&quot;</span><span class="token punctuation">;</span>
-  <span class="token comment">// 当为开发环境时才启用mock</span>
-  process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">&quot;development&quot;</span> <span class="token operator">&amp;&amp;</span> <span class="token function">mockSetup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="mock-入参"><a href="#mock-入参" class="header-anchor">#</a> Mock 入参</h2> <p><code>@mpxjs/mock</code> 所暴露的函数仅接收一个类型为 <code>mockRequstList</code> 的参数，该类型定义如下：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">type</span> <span class="token class-name">mockItem</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
-  url<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
-  rule<span class="token operator">:</span> object
-<span class="token punctuation">}</span>
-<span class="token keyword">type</span> <span class="token class-name">mockRequstList</span> <span class="token operator">=</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>mockItem<span class="token operator">&gt;</span>
-
-<span class="token comment">//示例:</span>
-<span class="token keyword">let</span> mockList<span class="token operator">:</span> mockRequstList <span class="token operator">=</span> <span class="token punctuation">[</span>
-  <span class="token punctuation">{</span>
-    url<span class="token operator">:</span> <span class="token string">&quot;http://api.example.com&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 请求触发后匹配到该链接时其响应数据会被mock拦截</span>
-    rule<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// mock生成返回数据的规则</span>
-      <span class="token string-property property">'number|1-10'</span><span class="token operator">:</span> <span class="token number">1</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">]</span>
-</code></pre></div><h2 id="mock-规则示例"><a href="#mock-规则示例" class="header-anchor">#</a> Mock 规则示例</h2> <ul><li>基本类型数据生成</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mock <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/mock&quot;</span><span class="token punctuation">;</span>
-<span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-  <span class="token punctuation">{</span>
-    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;http://api.example.com&quot;</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">rule</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;number|1-10&quot;</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 随机生成1-10中的任意整数</span>
-      <span class="token string-property property">&quot;string|6&quot;</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[0-9a-f]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 值支持正则表达式,随机生成6位的16进制值</span>
-      <span class="token string-property property">&quot;boolean|1&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 随机生成一个布尔值,值为 true 的概率是 1/2</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token comment">// 请求 http://api.example.com 后返回值为:</span>
-<span class="token comment">// {</span>
-<span class="token comment">//   number: 2,</span>
-<span class="token comment">//   string: &quot;e1e6dc&quot;,</span>
-<span class="token comment">//   boolean: false</span>
-<span class="token comment">// }</span>
-</code></pre></div><ul><li>生成随机长度id自增的列表</li></ul> <details class="custom-block details"><summary>查看示例</summary> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mock <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/mock&quot;</span><span class="token punctuation">;</span>
-<span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-  <span class="token punctuation">{</span>
-    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;http://api.example.com&quot;</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">rule</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;list|2-5&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// 生成长度范围在2-5的数组</span>
-        <span class="token punctuation">{</span>
-          <span class="token string-property property">&quot;id|+1&quot;</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token comment">// id每次自增1</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token comment">// 请求 http://api.example.com 后返回</span>
-<span class="token comment">// {</span>
-<span class="token comment">//   &quot;list&quot;: [{</span>
-<span class="token comment">//     &quot;id&quot;: 0</span>
-<span class="token comment">//   },{</span>
-<span class="token comment">//     &quot;id&quot;: 1</span>
-<span class="token comment">//   },{</span>
-<span class="token comment">//     &quot;id&quot;: 2</span>
-<span class="token comment">//   }]</span>
-<span class="token comment">// }</span>
-</code></pre></div></details> <ul><li>pick对象中的随机个值</li></ul> <details class="custom-block details"><summary>查看示例</summary> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mock <span class="token keyword">from</span> <span class="token string">&quot;@mpxjs/mock&quot;</span><span class="token punctuation">;</span>
-<span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
-  <span class="token punctuation">{</span>
-    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;http://api.example.com&quot;</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">rule</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token string-property property">&quot;object|2&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 随机选取object中的两条数据作为返回</span>
-        <span class="token string-property property">&quot;310000&quot;</span><span class="token operator">:</span> <span class="token string">&quot;上海市&quot;</span><span class="token punctuation">,</span>
-        <span class="token string-property property">&quot;320000&quot;</span><span class="token operator">:</span> <span class="token string">&quot;江苏省&quot;</span><span class="token punctuation">,</span>
-        <span class="token string-property property">&quot;330000&quot;</span><span class="token operator">:</span> <span class="token string">&quot;浙江省&quot;</span><span class="token punctuation">,</span>
-        <span class="token string-property property">&quot;340000&quot;</span><span class="token operator">:</span> <span class="token string">&quot;安徽省&quot;</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token comment">// 请求 http://api.example.com 后返回</span>
-<span class="token comment">// {</span>
-<span class="token comment">//   &quot;object&quot;: {</span>
-<span class="token comment">//     &quot;330000&quot;: &quot;浙江省&quot;,</span>
-<span class="token comment">//     &quot;340000&quot;: &quot;安徽省&quot;</span>
-<span class="token comment">//   }</span>
-<span class="token comment">// }</span>
-</code></pre></div></details> <p>更多生成规则可查阅 <a href="https://github.com/nuysoft/Mock/wiki/Syntax-Specification" target="_blank" rel="noopener noreferrer">Mock官方文档-Syntax Specification<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>更多示例可查看 <a href="http://mockjs.com/examples.html" target="_blank" rel="noopener noreferrer">Mock示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>由于小程序环境的局限性，mockjs 依赖 eval 函数实现的相关能力(如：占位符)无法正确运行</p></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/extend/api-proxy.html" class="prev">
-        Api代理
-      </a></span> <span class="next"><a href="/guide/understand/runtime.html">
-        Mpx运行时增强原理
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/102.094a0a16.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/migrate/2.7.html b/docs-vuepress/.vuepress/dist/guide/migrate/2.7.html
deleted file mode 100644
index c374438e70..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/migrate/2.7.html
+++ /dev/null
@@ -1,172 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>从旧版本迁移至 2.7 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/103.b34f6752.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" aria-current="page" class="active sidebar-link">从旧版本迁移至 2.7</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/migrate/2.7.html#依赖升级" class="sidebar-link">依赖升级</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.7.html#开启持久化缓存" class="sidebar-link">开启持久化缓存</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.7.html#修改rules" class="sidebar-link">修改rules</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.7.html#entry配置修改" class="sidebar-link">entry配置修改</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.7.html#mpxwebpackplugin配置变更" class="sidebar-link">MpxWebpackPlugin配置变更</a></li></ul></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="从旧版本迁移至-2-7"><a href="#从旧版本迁移至-2-7" class="header-anchor">#</a> 从旧版本迁移至 2.7</h1> <p>自 2.7 版本开始，Mpx 将编译构建流程基于 Webpack5 进行了<strong>全面的重构</strong>，优化解决了老的编译流程中存在的大量历史遗留问题，安全完整地支持了基于文件系统的持久化缓存，大幅提升了 Mpx 想的编译构建速度，以滴滴出行小程序为例，无缓存场景下相较 2.6 版本提速约 180%，有缓存场景下提速约 <strong>10</strong> 倍。</p> <p>与此同时，Mpx 2.7 版本还带来了 rules 复用，完善的单元测试支持，独立分包构建，分包异步化等众多新特性。直接通过 @mpxjs/cli 创建的新项目就能够直接使用这些新特性，如果你对于编译构建没有太多定制化诉求，我们也推荐使用 @mpxjs/cli 新建项目，并将老项目中的 src 目录 copy 覆盖至新项目的方式进行迁移，这是一种成本最低的迁移方式。</p> <p>如果你的老项目中已经对编译构建进行了高度的定制，本文将提供详细的迁移工作指引。</p> <h2 id="依赖升级"><a href="#依赖升级" class="header-anchor">#</a> 依赖升级</h2> <p>将下面列出的相关依赖升级至对应版本，如果有其他自行引入的 loader 也确保将其升级至 webpack5 兼容的版本：</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token punctuation">{</span>
-  <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;@mpxjs/api-proxy&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.7.1&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/core&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.7.1&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/fetch&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.7.1&quot;</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;@mpxjs/webpack-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.7.1&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;webpack&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^5.64.4&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;webpack-merge&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^5.8.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;terser-webpack-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^5.2.5&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;copy-webpack-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^9.0.1&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;webpack-bundle-analyzer&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^4.5.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;ts-loader&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^9.2.6&quot;</span><span class="token punctuation">,</span>
-    <span class="token comment">// eslint相关配置，按需安装</span>
-    <span class="token property">&quot;eslint&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^7.32.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;eslint-config-standard&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^16.0.3&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;eslint-plugin-html&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^6.2.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;eslint-plugin-import&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.25.2&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;eslint-plugin-node&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^11.1.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;eslint-plugin-promise&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^5.1.1&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;eslint-webpack-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.1.0&quot;</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="开启持久化缓存"><a href="#开启持久化缓存" class="header-anchor">#</a> 开启持久化缓存</h2> <p>在 webpack 配置中添加以下配置项：</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">cache</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'filesystem'</span><span class="token punctuation">,</span>
-    <span class="token comment">// 声明构建配置，注意如果声明某个文件夹为构建配置，需要在文件夹下放置空的package.json文件，避免构建依赖收集时将主项目的依赖项视为构建依赖</span>
-    <span class="token literal-property property">buildDependencies</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">build</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'build/'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'config/'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">cacheDirectory</span><span class="token operator">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'.cache/'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">snapshot</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 如果希望修改node_modules下的文件时对应的缓存可以失效，可以将此处的配置改为 managedPaths: []</span>
-    <span class="token literal-property property">managedPaths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="修改rules"><a href="#修改rules" class="header-anchor">#</a> 修改rules</h2> <p>在 2.7 版本中，我们优化了 .mpx 文件中各个 block 应用 loader 的规则。</p> <p>在之前的版本中，我们基本上使用内置的规则对 .mpx 中的 block 应用 loaders，如：对 &lt;script&gt; 应用 babel-loader，对 &lt;style lang=&quot;stylus&quot;&gt; 应用 stylus-loader。这种方式的弊端主要在于用户无法便捷地自定义 block 的 loaders 应用规则，比如传入特定的 loaders 配置。</p> <p>在 2.7 版本中，我们支持了构建时读取用户在 module.rules 中配置的规则来对 block 进行 loaders 应用， 例如：对于 &lt;style lang=&quot;stylus&quot;&gt; 我们会对其应用用户在 rules 中对于 .stylus 文件 配置的 loaders，当用户没有在 block 中声明 lang 属性时，我们也会兜底使用不同区块默认的 lang 来进行 rules 匹配。</p> <p>因此，相较于过去的版本，我们需要在 rules 中添加一些规则使得 .mpx 文件中的各类 block 都能得到正确的处理。</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token comment">// 新版本中rules规则对.mpx文件中的区块同样生效，在旧版本中.mpx文件中script会走内置的babel转义，但是新版当中只有在include范围内的.mpx文件才会走babel，但由于新版本中.mpx文件中的script会采用.mpx.js的格式来匹配rules，因此我们可以用如下include条件让其保持与旧版本一致的表现。</span>
-      <span class="token punctuation">{</span>
-        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-        <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.mpx\.js</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'node_modules/@mpxjs'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token comment">// 如使用ts编码则需要添加本条rule</span>
-      <span class="token punctuation">{</span>
-        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.ts$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-          <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
-          <span class="token punctuation">{</span>
-            <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">'ts-loader'</span><span class="token punctuation">,</span>
-            <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-              <span class="token literal-property property">appendTsSuffixTo</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(mpx|vue)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">]</span>
-            <span class="token punctuation">}</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">]</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token comment">// 处理json区块</span>
-      <span class="token punctuation">{</span>
-        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.json$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-        <span class="token literal-property property">resourceQuery</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">asScript</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'javascript/auto'</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token comment">// 处理wxs</span>
-      <span class="token punctuation">{</span>
-        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(wxs|qs|sjs|qjs|jds|dds|filter\.js)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-          MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxsPreLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-        <span class="token punctuation">]</span><span class="token punctuation">,</span>
-        <span class="token literal-property property">enforce</span><span class="token operator">:</span> <span class="token string">'pre'</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token comment">// 处理图像资源</span>
-      <span class="token punctuation">{</span>
-        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-          MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">urlLoader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'img/[name][hash].[ext]'</span>
-          <span class="token punctuation">}</span><span class="token punctuation">)</span>
-        <span class="token punctuation">]</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token comment">// 下面的rules输出小程序时需配置，如输出web需要修改为vue的相关rules，具体逻辑可以参考脚手架项目中build/getRules.js</span>
-      <span class="token comment">// mpx主loader</span>
-      <span class="token punctuation">{</span>
-        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.mpx$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-        <span class="token literal-property property">use</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">loader</span><span class="token punctuation">(</span>currentMpxLoaderConf<span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token comment">// 如使用sass/less等其他预编译语言，自行修改test规则并用sass/less-loader替换stylus-loader</span>
-      <span class="token punctuation">{</span>
-        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl(us)?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-          MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxssLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-          <span class="token string">'stylus-loader'</span>
-        <span class="token punctuation">]</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token comment">// 处理未使用预编译语言的style区块和独立样式文件</span>
-      <span class="token punctuation">{</span>
-        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(wxss|acss|css|qss|ttss|jxss|ddss)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-        <span class="token literal-property property">use</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxssLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token comment">// 处理未使用预编译语言的template区块和独立模板文件</span>
-      <span class="token punctuation">{</span>
-        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(wxml|axml|swan|qml|ttml|qxml|jxml|ddml)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-        <span class="token literal-property property">use</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">wxmlLoader</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="entry配置修改"><a href="#entry配置修改" class="header-anchor">#</a> entry配置修改</h2> <p>如果进行常规的小程序输出，无需关注。如进行插件输出或独立输出组件/页面等特殊场景，mpx 提供了辅助方法来生成对应的 entry request，示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">entry</span><span class="token operator">:</span><span class="token punctuation">{</span>
-    <span class="token comment">// 输出plugin</span>
-    <span class="token literal-property property">plugin</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">getPluginEntry</span><span class="token punctuation">(</span><span class="token string">'./plugin.json'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// 独立输出组件，相当于./list.mpx?isComponent，不过为了保障后续该配置不受框架内部query变动影响，建议使用辅助方法</span>
-    <span class="token literal-property property">list</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">getComponentEntry</span><span class="token punctuation">(</span><span class="token string">'./list.mpx'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-    <span class="token comment">// 独立输出页面，相当于./index.mpx?isPage</span>
-    <span class="token literal-property property">index</span><span class="token operator">:</span> MpxWebpackPlugin<span class="token punctuation">.</span><span class="token function">getPageEntry</span><span class="token punctuation">(</span><span class="token string">'./index.mpx'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="mpxwebpackplugin配置变更"><a href="#mpxwebpackplugin配置变更" class="header-anchor">#</a> MpxWebpackPlugin配置变更</h2> <ul><li>移除了forceDisableInject配置</li> <li>nativeOptions更名为nativeConfig</li></ul> <p>上述的内容中只列举了一些和 mpx 高度相关的配置项变更，如果你的项目使用了特定的插件或者loader，请确保将其升级至兼容 webpack5 的版本。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/migrate/2.8.html" class="prev">
-        从 2.7 升级至 2.8
-      </a></span> <span class="next"><a href="/guide/migrate/mpx-cli-3.html">
-        mpx-cli v2 迁移到 v3
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/103.b34f6752.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/migrate/2.8.html b/docs-vuepress/.vuepress/dist/guide/migrate/2.8.html
deleted file mode 100644
index b88fd302bf..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/migrate/2.8.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>从 2.7 升级至 2.8 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/104.78f6358e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" aria-current="page" class="active sidebar-link">从 2.7 升级至 2.8</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/migrate/2.8.html#依赖升级" class="sidebar-link">依赖升级</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.8.html#编译配置变更" class="sidebar-link">编译配置变更</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.8.html#运行时破坏性变化" class="sidebar-link">运行时破坏性变化</a></li></ul></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="从-2-7-升级至-2-8"><a href="#从-2-7-升级至-2-8" class="header-anchor">#</a> 从 2.7 升级至 2.8</h1> <p>不同于 2.7 版本对于编译构建进行的大幅度变动升级，Mpx@2.8 版本升级的核心在于运行时支持组合式 API 能力，并尽可能追求向前兼容，以降低用户的升级成本。我们默认脚手架生成的全新项目已经适配了 2.8 版本的全部变更，如果你需要将旧项目从 2.7 升级至 2.8 版本，下面是详细的升级指引。</p> <h2 id="依赖升级"><a href="#依赖升级" class="header-anchor">#</a> 依赖升级</h2> <p>请按照下方列表升级或新增相关依赖：</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token punctuation">{</span>
-  <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;@mpxjs/api-proxy&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/core&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/store&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/pinia&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/utils&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/fetch&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token comment">// 这部分依赖为输出 web 专用，如项目无需输出 web 可以省略</span>
-    <span class="token property">&quot;vue&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.7.10&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;vue-demi&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^0.13.11&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;vue-i18n&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^8.27.2&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;vue-i18n-bridge&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^9.2.2&quot;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;@mpxjs/webpack-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/size-report&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/babel-plugin-inject-page-events&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.8.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token comment">// ...</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="编译配置变更"><a href="#编译配置变更" class="header-anchor">#</a> 编译配置变更</h2> <p>在编译配置方面，用户几乎不用进行任何改变，唯一的例外是当用户想要通过组合式 API 的方式注册具有副作用的页面事件时，需要在 <code>babel</code> 配置中添加 <code>@mpxjs/babel-plugin-inject-page-events</code> 插件，如下所示：</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token comment">// babel.config.json</span>
-<span class="token punctuation">{</span>
- <span class="token property">&quot;plugins&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token punctuation">[</span>
-      <span class="token string">&quot;@babel/transform-runtime&quot;</span><span class="token punctuation">,</span>
-      <span class="token punctuation">{</span>
-        <span class="token property">&quot;corejs&quot;</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
-        <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^7.10.4&quot;</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token string">&quot;@mpxjs/babel-plugin-inject-page-events&quot;</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>关于副作用页面事件的更多详情查看<a href="/guide/composition-api/composition-api.html#具有副作用的页面事件">这里</a>。</p> <h2 id="运行时破坏性变化"><a href="#运行时破坏性变化" class="header-anchor">#</a> 运行时破坏性变化</h2> <p>在 2.8 开发过程中，我们修正了过去版本中存在的不合理的设计与实现，在运行时带来了少许破坏性改变，详情如下：</p> <ul><li>框架过往提供的组件增强生命周期 <code>pageShow/pageHide</code> 与微信原生提供的 <code>pageLifetimes.show/hide</code> 完全对齐，不再提供组件初始挂载时必定执行 <code>pageShow</code> 的保障（因为组件可能在后台页面进行挂载），相关初始化逻辑一定不要放置在 <code>pageShow</code> 当中；</li> <li>取消了框架过去提供的基于内部生命周期实现的非标准增强生命周期，如 <code>beforeCreate/onBeforeCreate</code> 等，直接将内部生命周期变量导出提供给用户使用，详情查看<a href="/guide/composition-api/composition-api.html#框架内置生命周期">这里</a>；</li> <li>为了优化 tree shaking，作为框架运行时 <code>default export</code> 的 <code>Mpx</code> 对象不再挂载 <code>createComponent/createStore</code> 等运行时方法，一律通过 <code>named export</code> 提供，<code>Mpx</code> 对象上仅保留 <code>set/use</code> 等全局 API；</li> <li>使用 I18n 能力时，为了与新版 vue-i18n 保持对齐，<code>this.$i18n</code> 对象指向全局作用域，如需创建局部作用域需要使用组合式 API <code>useI18n</code> 的方式进行创建。</li> <li><code>watch</code> API 不再接受第二个参数为带有 <code>handler</code> 属性的对象形式（该参数形式只应存在于 <code>watch</code> option 中），第二个参数必须为回调函数，与 <a href="https://vuejs.org/api/reactivity-core.html#watch" target="_blank" rel="noopener noreferrer">Vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 对齐。</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/migrate/2.9.html" class="prev">
-        从 2.8 升级至 2.9
-      </a></span> <span class="next"><a href="/guide/migrate/2.7.html">
-        从旧版本迁移至 2.7
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/104.78f6358e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/migrate/2.9.html b/docs-vuepress/.vuepress/dist/guide/migrate/2.9.html
deleted file mode 100644
index e11caac560..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/migrate/2.9.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>从 2.8 升级至 2.9 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/105.eb6680fc.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" aria-current="page" class="active sidebar-link">从 2.8 升级至 2.9</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/migrate/2.9.html#依赖升级" class="sidebar-link">依赖升级</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.9.html#使用原子类" class="sidebar-link">使用原子类</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/2.9.html#使用ssr" class="sidebar-link">使用SSR</a></li></ul></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="从-2-8-升级至-2-9"><a href="#从-2-8-升级至-2-9" class="header-anchor">#</a> 从 2.8 升级至 2.9</h1> <p>Mpx 2.9 版本不包含破坏性变更，主要新增了原子类支持、输出 web 支持 SSR 和构建产物体积优化三项核心特性，更详细的介绍查看<a href="/articles/2.9-release.html">这里</a></p> <h2 id="依赖升级"><a href="#依赖升级" class="header-anchor">#</a> 依赖升级</h2> <p>如果你从既有项目中进行升级，仅需将 @mpxjs 下的依赖升级至 2.9 即可</p> <div class="language-json5 extra-class"><pre class="language-json5"><code><span class="token punctuation">{</span>
-  <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;@mpxjs/api-proxy&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/core&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/store&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/pinia&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/utils&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/fetch&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token comment">// ...</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;@mpxjs/webpack-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/size-report&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/babel-plugin-inject-page-events&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token comment">// 如需使用原子类，加入以下依赖</span>
-    <span class="token property">&quot;@mpxjs/unocss-plugin&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/unocss-base&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.9.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token comment">// 如需使用SSR，加入以下依赖</span>
-    <span class="token property">&quot;axios&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^1.6.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;express&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^4.18.2&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;serve-favicon&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.5.0&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;vue-server-renderer&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.7.14&quot;</span><span class="token punctuation">,</span>
-    <span class="token comment">// ...</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="使用原子类"><a href="#使用原子类" class="header-anchor">#</a> 使用原子类</h2> <p>详情查看<a href="/guide/advance/utility-first-css.html">这里</a></p> <h2 id="使用ssr"><a href="#使用ssr" class="header-anchor">#</a> 使用SSR</h2> <p>详情查看<a href="/guide/advance/ssr.html">这里</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/understand/compile.html" class="prev">
-        Mpx编译构建原理
-      </a></span> <span class="next"><a href="/guide/migrate/2.8.html">
-        从 2.7 升级至 2.8
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/105.eb6680fc.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/migrate/mpx-cli-3.html b/docs-vuepress/.vuepress/dist/guide/migrate/mpx-cli-3.html
deleted file mode 100644
index efbd718296..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/migrate/mpx-cli-3.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>mpx-cli v2 迁移到 v3 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/106.471f03cf.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" aria-current="page" class="active sidebar-link">mpx-cli v2 迁移到 v3</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/migrate/mpx-cli-3.html#升级-mpxjs-cli" class="sidebar-link">升级@mpxjs/cli</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/mpx-cli-3.html#配置迁移" class="sidebar-link">配置迁移</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/mpx-cli-3.html#新增自定义配置-修改已有配置参数" class="sidebar-link">新增自定义配置/修改已有配置参数</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/mpx-cli-3.html#编译后钩子" class="sidebar-link">编译后钩子</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/mpx-cli-3.html#项目结构变化" class="sidebar-link">项目结构变化</a></li><li class="sidebar-sub-header"><a href="/guide/migrate/mpx-cli-3.html#more" class="sidebar-link">More</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx-cli-v2-迁移到-v3"><a href="#mpx-cli-v2-迁移到-v3" class="header-anchor">#</a> mpx-cli v2 迁移到 v3</h1> <h2 id="升级-mpxjs-cli"><a href="#升级-mpxjs-cli" class="header-anchor">#</a> 升级<code>@mpxjs/cli</code></h2> <div class="language- extra-class"><pre class="language-text"><code>npm install @mpxjs/cli@3.x -g
-</code></pre></div><h2 id="配置迁移"><a href="#配置迁移" class="header-anchor">#</a> 配置迁移</h2> <blockquote><p>v3 兼容了 v2 的所有配置，如果没有特殊修改，则不需要进行配置迁移。</p></blockquote> <ul><li><code>config/devServer.js</code>迁移到<code>vue.config.js</code>下的<code>devServer</code></li> <li><code>config/mpxPlugin.conf.js</code>迁移到<code>vue.config.js</code>下的<code>pluginOptions.mpx.plugin</code></li> <li><code>config/mpxLoader.conf.js</code>迁移到<code>vue.config.js</code>下的<code>pluginOptions.mpx.loader</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token comment">// 这里等同于`@mpxjs/webpack-plugin`的参数</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token comment">// 这里等同于`mpx-loader`参数</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token comment">// dev服务配置</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="新增自定义配置-修改已有配置参数"><a href="#新增自定义配置-修改已有配置参数" class="header-anchor">#</a> 新增自定义配置/修改已有配置参数</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// vue.config.js</span>
-<span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
-
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'newPlugin'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>newPlugin<span class="token punctuation">,</span> <span class="token punctuation">[</span>params<span class="token punctuation">]</span><span class="token punctuation">)</span>
-    <span class="token comment">// 使用mpx inspect 可以根据注释来查看插件命名</span>
-    config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'mpx-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">args</span> <span class="token operator">=&gt;</span> newArgs<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token comment">// 或者也可以通过configureWebpack配置,这里返回的配置会通过webpack-merge合并到内部配置中</span>
-  <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token keyword">return</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Plugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><ul><li><a href="https://github.com/neutrinojs/webpack-chain" target="_blank" rel="noopener noreferrer">webpack-chain<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/survivejs/webpack-merge" target="_blank" rel="noopener noreferrer">webpack-merge<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="编译后钩子"><a href="#编译后钩子" class="header-anchor">#</a> 编译后钩子</h2> <p>由于 webpack 配置都内置到了插件里，所以编译后的钩子无法像 2.x 一样直接在<code>webpack</code>脚本里添加。</p> <p>这里有两个方案来解决上述问题</p> <ol><li><code>webpack</code>插件</li> <li>新建一个<code>mpx-cli</code>插件</li></ol> <p>例如我们新建一个<code>vue-cli-plugin-mpx-build-upload</code>插件,用来在构建完成后上传图片到<code>cdn</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// index.js</span>
-module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">api<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">function</span> <span class="token function">runServiceCommand</span><span class="token punctuation">(</span><span class="token parameter">api<span class="token punctuation">,</span> command<span class="token punctuation">,</span> <span class="token operator">...</span>args</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-    <span class="token keyword">const</span> <span class="token punctuation">{</span> fn <span class="token punctuation">}</span> <span class="token operator">=</span> api<span class="token punctuation">.</span>service<span class="token punctuation">.</span>commands<span class="token punctuation">[</span>command<span class="token punctuation">]</span>
-    <span class="token keyword">return</span> fn <span class="token operator">&amp;&amp;</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-  <span class="token comment">// 注册一个新的命令</span>
-  api<span class="token punctuation">.</span><span class="token function">registerCommand</span><span class="token punctuation">(</span><span class="token string">'build:upload'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">deploy</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    <span class="token comment">// 运行原有的build命令，build会返回一个promise来表示构建完成</span>
-    <span class="token keyword">return</span> <span class="token function">runServiceCommand</span><span class="token punctuation">(</span>api<span class="token punctuation">,</span> <span class="token string">'build'</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
-      <span class="token comment">// do something</span>
-      <span class="token function">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>然后在我们的项目里安装该插件并运行<code>npx mpx-cli-service build:upload</code>即可。</p> <h2 id="项目结构变化"><a href="#项目结构变化" class="header-anchor">#</a> 项目结构变化</h2> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/filetree.jpg" alt="项目结构变化"></p> <p>v3 版本相对于 v2 版本的目录结构更加清晰。</p> <ul><li>移除了<code>config/build</code>的配置目录，将其统一到了插件配置当中，可以通过<code>vue.config.js</code>修改。</li> <li><code>index.html</code>移动到<code>public</code>目录下。</li> <li>增加<code>jsconfig.json</code>,让类型提示更加友好。</li></ul> <h2 id="more"><a href="#more" class="header-anchor">#</a> More</h2> <p>v3 版本相对于 v2 版本的整体架构相差较大，v3 版本主要基于<code>vue-cli</code>架构，主要有以下优势。</p> <h3 id="_1-插件化"><a href="#_1-插件化" class="header-anchor">#</a> 1. 插件化</h3> <p>v3 版本的配置依靠插件化，将 v2 版本的文件配置整合到了各个自定义插件中。</p> <ul><li>vue-cli-plugin-mpx-eslint eslint 配置</li> <li>vue-cli-plugin-mpx-mp 小程序构建配置以及命令</li> <li>vue-cli-plugin-mpx-plugin-mode 插件配置</li> <li>vue-cli-plugin-mpx-typescript ts 配置</li> <li>vue-cli-plugin-mpx-web web 构建配置以及命令</li></ul> <p>除此之外，也可以使用统一的<code>vue.config.js</code>来自定义配置，或者将配置抽离到插件当中，来进行统一的管理。</p> <h3 id="_2-模板"><a href="#_2-模板" class="header-anchor">#</a> 2. 模板</h3> <p>v3 版本的模板也可以通过插件进行自定义生成，同时不依赖于 github，在国内网络下不会有生成模板时网络错误的问题。</p> <h3 id="_3-调试"><a href="#_3-调试" class="header-anchor">#</a> 3. 调试</h3> <p>v3 版本可以通过<code>mpx inspect:mp/web</code>来直接调试相关配置，可以更直观的发现配置错误。</p> <h3 id="_4-插件管理"><a href="#_4-插件管理" class="header-anchor">#</a> 4. 插件管理</h3> <p>使用<code>mpx invoke</code>/<code>mpx add</code>/<code>mpx upgrade</code>来管理插件，可以更细粒度的控制相关配置的更新。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/migrate/2.7.html" class="prev">
-        从旧版本迁移至 2.7
-      </a></span> <!----></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/106.471f03cf.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/platform/index.html b/docs-vuepress/.vuepress/dist/guide/platform/index.html
deleted file mode 100644
index 43b6e08b46..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/platform/index.html
+++ /dev/null
@@ -1,225 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>跨端输出基础 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/107.63fd18fd.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="跨端输出基础"><a href="#跨端输出基础" class="header-anchor">#</a> 跨端输出基础</h1> <p>Mpx以微信增强DSL为基础，支持跨端输出至多端小程序、web和客户端，包括支付宝、百度、抖音、京东、QQ等多端小程序平台，基于Vue的web平台，和基于react-native的ios、android及鸿蒙平台。</p> <h2 id="跨端输出配置"><a href="#跨端输出配置" class="header-anchor">#</a> 跨端输出配置</h2> <p>配置mpx进行跨端输出十分简单，找到项目构建的webpack配置，在@mpxjs/webpack-plugin的配置参数中设置mode和srcMode参数即可。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">MpxwebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token comment">// mode为mpx编译的目标平台，可选值有(wx|ali|swan|qq|tt|jd|web|ios|android|harmony)</span>
-  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'ali'</span><span class="token punctuation">,</span>
-  <span class="token comment">// srcMode为mpx编译的源码平台，目前仅支持wx   </span>
-  <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>对于使用 @mpxjs/cli 创建的项目，可以通过在 <code>npm script</code> 当中定义 <code>targets</code> 来设置编译的目标平台，多个平台标识以<code>,</code>分隔。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 项目 package.json</span>
-<span class="token punctuation">{</span>
-  <span class="token string-property property">&quot;script&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token string-property property">&quot;build:cross&quot;</span><span class="token operator">:</span> <span class="token string">&quot;mpx-cli-service build --targets=wx,ali,ios,android&quot;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h2 id="跨端条件编译"><a href="#跨端条件编译" class="header-anchor">#</a> 跨端条件编译</h2> <p>Mpx跨端输出时在框架内针对不同平台的差异进行了大量的转换抹平工作，但框架能做的工作始终是有限的，对于框架无法抹平的部分我们会在编译和运行时进行报错提示，同时提供了完善的跨平台条件编译机制，便于用户自行进行差异化处理，该能力也能够用于实现区分平台进行业务逻辑实现。</p> <p>Mpx中我们支持了三种维度的条件编译，分别是文件维度，区块维度和代码维度，其中，文件维度和区块维度主要用于处理一些大块的平台差异性逻辑，而代码维度主要用于处理一些局部简单的平台差异。</p> <h3 id="文件维度条件编译"><a href="#文件维度条件编译" class="header-anchor">#</a> 文件维度条件编译</h3> <p>文件维度条件编译简单的来说就是文件为维度进行跨平台差异代码的编写，例如在微信-&gt;支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，这时你可以在相同的位置新建一个map.ali.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的mode来加载对应模块，当mode为ali时，会优先加载map.ali.mpx，反之则会加载map.mpx。</p> <p>文件维度条件编译能够与webpack alias结合使用，对于npm包的文件我们并不方便在原本的文件位置创建.ali的条件编译文件，但我们可以通过webpack alias在相同位置创建一个<code>虚拟的</code>.ali文件，并将其指向项目中的其他文件位置。</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token comment">// 对于npm包中的文件依赖</span>
-  <span class="token keyword">import</span> npmModule <span class="token keyword">from</span> <span class="token string">'somePackage/lib/index'</span>
-
-  <span class="token comment">// 配置以下alias后，当mode为ali时，会优先加载项目目录中定义的projectRoot/somePackage/lib/index文件</span>
-  <span class="token comment">// vue.config.js</span>
-  module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token function">configureWebpack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-          <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-            <span class="token string-property property">'somePackage/lib/index.ali'</span><span class="token operator">:</span> <span class="token string">'projectRoot/somePackage/lib/index'</span>
-          <span class="token punctuation">}</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="区块维度条件编译"><a href="#区块维度条件编译" class="header-anchor">#</a> 区块维度条件编译</h3> <p>在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加<code>mode</code>属性定义该区块的目标平台即可，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--编译mode为ali时使用如下区块--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-<span class="token comment">&lt;!--该区块中的所有代码需采用支付宝的技术标准进行编写--&gt;</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>支付宝环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token comment">&lt;!--其他编译mode时使用如下区块--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>其他环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="代码维度条件编译"><a href="#代码维度条件编译" class="header-anchor">#</a> 代码维度条件编译</h3> <p>如果只有局部的代码存在跨平台差异，mpx同样支持在代码内使用if/else进行局部条件编译，用户可以在js代码和template插值中访问<code>__mpx_mode__</code>获取当前编译mode，进行平台差异逻辑编写，js代码中使用示例如下。</p> <p>除了 <code>__mpx_mode__</code> 这个默认插值以外，有别的环境变量需要的话可以在mpx.plugin.conf.js里通过defs进行配置。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span><span class="token punctuation">(</span>__mpx_mode__ <span class="token operator">===</span> <span class="token string">'ali'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 执行支付宝环境相关逻辑</span>
-<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 执行其他环境相关逻辑</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>template代码中使用示例如下</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--此处的__mpx_mode__不需要在组件中声明数据，编译时会基于当前编译mode进行替换--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'ali'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>支付宝环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span>其他环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>JSON中的条件编译（注意，这个依赖JSON的动态方案，得通过name=&quot;json&quot;这种方式来编写，其实写的是js代码，最终module.exports导出一个可json化的对象即可）：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-<span class="token keyword">const</span> pages <span class="token operator">=</span> __mpx_mode__ <span class="token operator">===</span> <span class="token string">'wx'</span> <span class="token operator">?</span> <span class="token punctuation">[</span>
-  <span class="token string">'main/xxx'</span><span class="token punctuation">,</span>
-  <span class="token string">'sub/xxx'</span>
-<span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token punctuation">[</span>
-  <span class="token string">'test/xxx'</span>
-<span class="token punctuation">]</span> <span class="token comment">// 可以为不同环境动态书写配置</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">usingComponents</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">aComponents</span><span class="token operator">:</span> <span class="token string">'../xxxxx'</span> <span class="token comment">// 可以打注释 xxx组件</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>样式的条件编译：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*
-  @mpx-if (__mpx_env__ === 'someEvn')
-*/</span>
-  <span class="token comment">/* @mpx-if (__mpx_mode__ === 'wx') */</span>
-  <span class="token selector">.backColor</span> <span class="token punctuation">{</span>
-    <span class="token property">background</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-  <span class="token comment">/*
-    @mpx-elif (__mpx_mode__ === 'qq')
-  */</span>
-  <span class="token selector">.backColor</span> <span class="token punctuation">{</span>
-    <span class="token property">background</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-  <span class="token comment">/* @mpx-endif */</span>
-
-  <span class="token comment">/* @mpx-if (__mpx_mode__ === 'swan') */</span>
-  <span class="token selector">.backColor</span> <span class="token punctuation">{</span>
-    <span class="token property">background</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-  <span class="token comment">/* @mpx-endif */</span>
-  <span class="token selector">.textSize</span> <span class="token punctuation">{</span>
-    <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-<span class="token comment">/*
-  @mpx-else
-*/</span>
-<span class="token selector">.backColor</span> <span class="token punctuation">{</span>
-  <span class="token comment">/* @mpx-if (__mpx_mode__ === 'swan') */</span>
-  <span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
-  <span class="token comment">/* @mpx-else */</span>
-  <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
-  <span class="token comment">/* @mpx-endif */</span>
-<span class="token punctuation">}</span>
-<span class="token comment">/*
-  @mpx-endif
-*/</span>
-</code></pre></div><h3 id="属性维度条件编译"><a href="#属性维度条件编译" class="header-anchor">#</a> 属性维度条件编译</h3> <p>属性维度条件编译允许用户在组件上使用 <code>@</code> 和 <code>|</code> 符号来指定某个节点或属性只在某些平台下有效。</p> <p>对于同一个 button 组件，微信小程序支持 <code>open-type=&quot;getUserInfo&quot;</code>，但是支付宝小程序支持 <code>open-type=&quot;getAuthorize&quot;</code>。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。</p> <p>比如业务中需要通过 button 按钮获取用户信息，虽然可以使用代码维度条件编译来解决，但是增加了很多代码量：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
-  <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'wx' || __mpx_mode__ === 'swan'}}<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">bindgetuserinfo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  获取用户信息
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
-  <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{__mpx_mode__ === 'ali'}}<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAuthorize<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  获取用户信息
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>而用属性维度的编译则方便很多：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span>
-  <span class="token attr-name">open-type@wx|swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">bindgetuserinfo@wx|swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">open-type@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getAuthorize<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">scope@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span>
-  <span class="token attr-name">onTap@ali</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  获取用户信息
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>属性维度的编译也可以对整个节点进行条件编译，例如只想在支付宝小程序中输出某个节点：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span><span class="token punctuation">&gt;</span></span>this is view<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>需要注意使用上述用法时，节点自身在构建时框架不会对节点属性进行平台语法转换，但对于其子节点，框架并不会继承父级节点 mode，会进行正常跨平台语法转换。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--错误示例--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-// srcMode 为 wx 跨端输出 ali 结果为
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>上述示例为错误写法，假如srcMode为微信小程序，用上述写法构建输出支付宝小程序时，父节点 bindtap 不会被转为 onTap，在支付宝平台执行时事件会无响应。</p> <p>正确写法如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--正确示例--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-// 输出 ali 产物
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@ali</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>otherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">onTap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>tap click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>有时开发者期望使用 @ali 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--srcMode为 wx，输出 ali 时，bindtap 会被正常转换为 onTap--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@_ali</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。</p> <p>有时候我们不仅需要对节点属性进行条件编译，可能还需要对节点标签进行条件编译。</p> <p>为此，我们支持了一个特殊属性 <code>mpxTagName</code>，如果节点存在这个属性，我们会在最终输出时将节点标签修改为该属性的值，配合属性维度条件编译，即可实现对节点标签进行条件编译，例如在百度环境下希望将某个 view 标签替换为 cover-view，我们可以这样写：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">mpxTagName@swan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>will be cover-view in swan<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="use-env"><a href="#use-env" class="header-anchor">#</a> 通过 env 实现自定义目标环境的条件编译 </h3> <p>Mpx 支持在以上四种条件编译的基础上，通过自定义 env 的形式实现在不同环境下编译产出不同的代码。</p> <p>实例化 MpxWebpackPlugin 的时候，传入配置 env。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">pluginOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">mpx</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">srcMode</span><span class="token operator">:</span> <span class="token string">'wx'</span> <span class="token comment">// srcMode为mpx编译的源码平台，目前仅支持wx</span>
-      <span class="token literal-property property">plugin</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token string">&quot;didi&quot;</span> <span class="token comment">// env为mpx编译的目标环境，需自定义</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="文件维度条件编译-2"><a href="#文件维度条件编译-2" class="header-anchor">#</a> 文件维度条件编译</h4> <p>微信转支付宝的项目中存在一个业务地图组件map.mpx，由于微信和支付宝中的原生地图组件标准差异非常大，无法通过框架转译方式直接进行跨平台输出，而且这个地图组件在不同的目标环境中也有很大的差异，这时你可以在相同的位置新建一个 map.ali.didi.mpx 或 map.ali.qingju.mpx，在其中使用支付宝的技术标准进行开发，编译系统会根据当前编译的 mode 和 env 来加载对应模块，当 mode 为 ali，env 为 didi 时，会优先加载 map.ali.didi.mpx、map.ali.mpx，如果没有定义 env，则会优先加载 map.ali.mpx，反之则会加载 map.mpx。</p> <h4 id="区块维度条件编译-2"><a href="#区块维度条件编译-2" class="header-anchor">#</a> 区块维度条件编译</h4> <p>在.mpx单文件中一般存在template、js、stlye、json四个区块，mpx的编译系统支持以区块为维度进行条件编译，只需在区块标签中添加<code>mode</code>或<code>env</code>属性定义该区块的目标平台即可，示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--编译mode为ali且env为didi时使用如下区块，优先级最高是4--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span> <span class="token attr-name">env</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>didi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token comment">&lt;!--编译mode为ali时使用如下区块，优先级是3--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token comment">&lt;!--编译env为didi时使用如下区块，优先级是2--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">env</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>didi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token comment">&lt;!--其他环境，优先级是1--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块中的所有代码需采用支付宝的技术标准进行编写<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>注意，如果多个相同的区块写相同的 mode 和 env，默认会用最后一个，如：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>该区块会被忽略<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ali<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>默认会用这个区块<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h4 id="代码维度条件编译-2"><a href="#代码维度条件编译-2" class="header-anchor">#</a> 代码维度条件编译</h4> <p>如果在 MpxWebpackPlugin 插件初始化时自定义了 env，你可以访问<code>__mpx_env__</code>获取当前编译env，进行环境差异逻辑编写。使用方法与<code>__mpx_mode__</code>相同。</p> <h4 id="属性维度条件编译-2"><a href="#属性维度条件编译-2" class="header-anchor">#</a> 属性维度条件编译</h4> <p>env 属性维度条件编译与 mode 的用法大致相同，使用 <code>:</code> 符号与 mode 和其他 env 进行串联，与 mode 组合使用格式形如 <code>attr@mode:env:env|mode:env</code>，为了不与 mode 混淆，当条件编译中仅存在 env 条件时，也需要添加 <code>:</code> 前缀，形如 <code>attr@:env</code>。</p> <p>对于同一个 button 组件，微信小程序支持 <code>open-type=&quot;getUserInfo&quot;</code>，但是支付宝小程序支持 <code>open-type=&quot;getAuthorize&quot;</code>。如果不使用任何维度的条件编译，则在编译的时候会有警告和报错信息。</p> <p>如果当前编译的目标平台是 wx，以下写法 open-type 属性将被忽略</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@swan:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>如果当前 env 不是 didi，以下写法 open-type 属性也会被忽略</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>如果只想在 mode 为 wx 且 env 为 didi 或 qingju 的环境下使用 open-type 属性，则可以这样写：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">open-type@wx:</span><span class="token namespace">didi:</span>qingju</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getUserInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>获取用户信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>env 属性维度的编译同样支持对整个节点或者节点标签名进行条件编译：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">@:</span>didi</span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">mpxTagName@:</span>didi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover-view<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>如果只声明了 env，没有声明 mode，跨平台输出时框架对于节点属性默认会进行转换：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--srcMode为wx，跨平台输出ali时，bindtap会被转为onTap--&gt;</span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">@:</span>didi</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">bindtap@:</span>didi</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>someClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is a  view component<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h2 id="环境api跨端抹平"><a href="#环境api跨端抹平" class="header-anchor">#</a> 环境API跨端抹平</h2> <h2 id="webview环境跨端抹平"><a href="#webview环境跨端抹平" class="header-anchor">#</a> Webview环境跨端抹平</h2></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/107.63fd18fd.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/platform/miniprogram.html b/docs-vuepress/.vuepress/dist/guide/platform/miniprogram.html
deleted file mode 100644
index 2e04c6e315..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/platform/miniprogram.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/108.614260e9.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/108.614260e9.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/platform/rn.html b/docs-vuepress/.vuepress/dist/guide/platform/rn.html
deleted file mode 100644
index d804f30d1b..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/platform/rn.html
+++ /dev/null
@@ -1,198 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>跨端输出RN | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/109.3da50cc1.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="跨端输出rn"><a href="#跨端输出rn" class="header-anchor">#</a> 跨端输出RN</h1> <p>大致介绍</p> <h2 id="跨端样式定义"><a href="#跨端样式定义" class="header-anchor">#</a> 跨端样式定义</h2> <h3 id="css选择器"><a href="#css选择器" class="header-anchor">#</a> CSS选择器</h3> <h3 id="样式单位"><a href="#样式单位" class="header-anchor">#</a> 样式单位</h3> <h3 id="文本样式继承"><a href="#文本样式继承" class="header-anchor">#</a> 文本样式继承</h3> <h3 id="简写样式属性"><a href="#简写样式属性" class="header-anchor">#</a> 简写样式属性</h3> <h3 id="css函数"><a href="#css函数" class="header-anchor">#</a> CSS函数</h3> <h3 id="使用原子类"><a href="#使用原子类" class="header-anchor">#</a> 使用原子类</h3> <h2 id="混合编写rn代码"><a href="#混合编写rn代码" class="header-anchor">#</a> 混合编写RN代码</h2> <h3 id="使用rn组件"><a href="#使用rn组件" class="header-anchor">#</a> 使用RN组件</h3> <h3 id="使用react-hooks"><a href="#使用react-hooks" class="header-anchor">#</a> 使用React hooks</h3> <h2 id="能力支持范围"><a href="#能力支持范围" class="header-anchor">#</a> 能力支持范围</h2> <h3 id="模版语法"><a href="#模版语法" class="header-anchor">#</a> 模版语法</h3> <h4 id="事件处理"><a href="#事件处理" class="header-anchor">#</a> 事件处理</h4> <p>目前 Mpx 输出 React Native 的事件编写遵循小程序的事件编写规范，支持事件的冒泡及捕获</p> <p>普通事件绑定</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view bindtap<span class="token operator">=</span><span class="token string">&quot;handleTap&quot;</span><span class="token operator">&gt;</span>
-    Click here<span class="token operator">!</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-</code></pre></div><p>绑定并阻止事件冒泡</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view catchtap<span class="token operator">=</span><span class="token string">&quot;handleTap&quot;</span><span class="token operator">&gt;</span>
-    Click here<span class="token operator">!</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-</code></pre></div><p>事件捕获</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view capture<span class="token operator">-</span>bind<span class="token operator">:</span>touchstart<span class="token operator">=</span><span class="token string">&quot;handleTap1&quot;</span><span class="token operator">&gt;</span>
-  outer view
-  <span class="token operator">&lt;</span>view capture<span class="token operator">-</span>bind<span class="token operator">:</span>touchstart<span class="token operator">=</span><span class="token string">&quot;handleTap2&quot;</span><span class="token operator">&gt;</span>
-    inner view
-  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-</code></pre></div><p>中断捕获阶段和取消冒泡阶段</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view capture<span class="token operator">-</span>catch<span class="token operator">:</span>touchstart<span class="token operator">=</span><span class="token string">&quot;handleTap1&quot;</span><span class="token operator">&gt;</span>
-  outer view
-<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-
-</code></pre></div><p>在此基础上也新增了事件处理内联传参的增强机制。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
- <span class="token comment">&lt;!--Mpx增强语法，模板内联传参，方便简洁--&gt;</span>
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTapInline('b')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token comment">// 直接通过参数获取数据，直观方便</span>
-  <span class="token keyword">const</span> <span class="token function-variable function">handleTapInline</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'name:'</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-  <span class="token comment">// ...</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>除此之外，Mpx 也支持了动态事件绑定</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
- <span class="token comment">&lt;!--动态事件绑定--&gt;</span>
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{items}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap_{{index}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  {{item}}
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Item 1'</span><span class="token punctuation">,</span> <span class="token string">'Item 2'</span><span class="token punctuation">,</span> <span class="token string">'Item 3'</span><span class="token punctuation">,</span> <span class="token string">'Item 4'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_0</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-
-  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_1</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-
-  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 3'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-
-  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_3</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 4'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>注意事项</p> <ol><li>当同一个元素上同时绑定了 catchtap 和 bindtap 事件时，两个事件都会被触发执行。但是是否阻止事件冒泡的行为,会以模板上第一个绑定的事件标识符为准。
-如果第一个绑定的是 catchtap，那么不管后面绑定的是什么,都会阻止事件冒泡。如果第一个绑定的是 bindtap，则不会阻止事件冒泡。</li> <li>当同一个元素上绑定了 capture-bind:tap 和 bindtap 事件时，事件的执行时机会根据模板上第一个绑定事件的标识符来决定。如果第一个绑定的是 capture-bind:tap，则事件会在捕获阶段触发，如果第一个绑定的是 bindtap，则事件会在冒泡阶段触发。</li> <li>当使用了事件委托想获取 e.target.dataset 时，只有点击到文本节点才能获取到，点击其他区域无效。建议直接将事件绑定到事件触发的元素上，使用 e.currentTarget 来获取 dataset 等数据。</li> <li>如果元素上设置了 opacity: 0 的样式，会导致 ios 事件无法响应。</li></ol> <h3 id="基础组件"><a href="#基础组件" class="header-anchor">#</a> 基础组件</h3> <p>目前 Mpx 输出 React Native 仅支持以下组件，文档中未提及的组件以及组件属性即为不支持，具体使用范围可参考如下文档</p> <p>RN环境基础组件通用属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>enable-offset</td> <td>Boolean</td> <td>false</td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr> <tr><td>enable-var</td> <td>Boolean</td> <td>true</td> <td>默认支持使用 css variable，若想关闭该功能可设置为 false</td></tr> <tr><td>parent-font-size</td> <td>Number</td> <td></td> <td>父组件字体大小，主要用于百分比计算的场景，如 font-size: 100%</td></tr> <tr><td>parent-width</td> <td>Number</td> <td></td> <td>父组件宽度，主要用于百分比计算的场景，如 width: calc(100% - 20px)，需要在外部传递父组件的宽度</td></tr> <tr><td>parent-height</td> <td>Number</td> <td></td> <td>父组件高度，主要用于百分比计算的场景，如 height: calc(100% - 20px),需要在外部传递父组件的高度</td></tr></tbody></table> <h4 id="view"><a href="#view" class="header-anchor">#</a> view</h4> <p>视图容器。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>hover-class</td> <td>string</td> <td></td> <td>指定按下去的样式类。</td></tr> <tr><td>hover-start-time</td> <td>number</td> <td>50</td> <td>按住后多久出现点击态，单位毫秒</td></tr> <tr><td>hover-stay-time</td> <td>number</td> <td>400</td> <td>手指松开后点击态保留时间，单位毫秒</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td>false</td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindtap</td> <td>点击的时候触发</td></tr></tbody></table> <h4 id="scroll-view"><a href="#scroll-view" class="header-anchor">#</a> scroll-view</h4> <p>可滚动视图区域。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>scroll-x</td> <td>Boolean</td> <td><code>false</code></td> <td>允许横向滚动动</td></tr> <tr><td>scroll-y</td> <td>Boolean</td> <td><code>false</code></td> <td>允许纵向滚动</td></tr> <tr><td>upper-threshold</td> <td>Number</td> <td><code>50</code></td> <td>距顶部/左边多远时(单位 px),触发 scrolltoupper 事件</td></tr> <tr><td>lower-threshold</td> <td>Number</td> <td><code>50</code></td> <td>距底部/右边多远时(单位 px),触发 scrolltolower 事件</td></tr> <tr><td>scroll-top</td> <td>Number</td> <td><code>0</code></td> <td>设置纵向滚动条位置</td></tr> <tr><td>scroll-left</td> <td>Number</td> <td><code>0</code></td> <td>设置横向滚动条位置</td></tr> <tr><td>scroll-with-animation</td> <td>Boolean</td> <td><code>false</code></td> <td>在设置滚动条位置时使用动画过渡</td></tr> <tr><td>enable-back-to-top</td> <td>Boolean</td> <td><code>false</code></td> <td>点击状态栏的时候视图会滚动到顶部</td></tr> <tr><td>enhanced</td> <td>Boolean</td> <td><code>false</code></td> <td>scroll-view 组件功能增强</td></tr> <tr><td>refresher-enabled</td> <td>Boolean</td> <td><code>false</code></td> <td>开启自定义下拉刷新</td></tr> <tr><td>scroll-anchoring</td> <td>Boolean</td> <td><code>false</code></td> <td>开启滚动区域滚动锚点</td></tr> <tr><td>scroll-into-view</td> <td>Boolean</td> <td><code>false</code></td> <td>值应为某子元素id（id不能以数字开头）</td></tr> <tr><td>refresher-default-style</td> <td>String</td> <td><code>'black'</code></td> <td>设置下拉刷新默认样式,支持 <code>black</code>、<code>white</code>、<code>none</code>，仅安卓支持</td></tr> <tr><td>refresher-background</td> <td>String</td> <td><code>'#fff'</code></td> <td>设置自定义下拉刷新背景颜色，仅安卓支持</td></tr> <tr><td>refresher-triggered</td> <td>Boolean</td> <td><code>false</code></td> <td>设置当前下拉刷新状态,true 表示已触发</td></tr> <tr><td>paging-enabled</td> <td>Number</td> <td><code>false</code></td> <td>分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置</td></tr> <tr><td>show-scrollbar</td> <td>Number</td> <td><code>true</code></td> <td>滚动条显隐控制 (同时开启 enhanced 属性后生效)</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr> <tr><td>enable-trigger-intersection-observer</td> <td>Boolean</td> <td>[]</td> <td>是否开启intersection-observer</td></tr> <tr><td>simultaneous-handlers</td> <td>Array<object></object></td> <td>[]</td> <td>主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件</td></tr> <tr><td>wait-for</td> <td>Array<object></object></td> <td>[]</td> <td>主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 scroll-view 组件</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>binddragstart</td> <td>滑动开始事件，同时开启 enhanced 属性后生效</td></tr> <tr><td>binddragging</td> <td>滑动事件，同时开启 enhanced 属性后生效</td></tr> <tr><td>binddragend</td> <td>滑动结束事件，同时开启 enhanced 属性后生效</td></tr> <tr><td>bindscrolltoupper</td> <td>滚动到顶部/左边触发</td></tr> <tr><td>bindscrolltolower</td> <td>滚动到底部/右边触发</td></tr> <tr><td>bindscroll</td> <td>滚动时触发</td></tr> <tr><td>bindrefresherrefresh</td> <td>自定义下拉刷新被触发</td></tr></tbody></table> <p>注意事项</p> <ol><li>目前不支持自定义下拉刷新节点，使用 slot=&quot;refresher&quot; 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来</li> <li>若使用 scroll-into-view 属性，需要 id 对应的组件节点添加 wx:ref 标记，否则无法正常滚动</li> <li>simultaneous-handlers 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture]</li> <li>wait-for  为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail]</li></ol> <h4 id="swiper"><a href="#swiper" class="header-anchor">#</a> swiper</h4> <p>滑块视图容器。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>indicator-dots</td> <td>Boolean</td> <td><code>false</code></td> <td>是否显示面板指示点</td></tr> <tr><td>indicator-color</td> <td>color</td> <td><code>rgba(0, 0, 0, .3)</code></td> <td>指示点颜色</td></tr> <tr><td>indicator-active-color</td> <td>color</td> <td><code>#000000</code></td> <td>当前选中的指示点颜色</td></tr> <tr><td>autoplay</td> <td>Boolean</td> <td><code>false</code></td> <td>是否自动切换</td></tr> <tr><td>current</td> <td>Number</td> <td><code>0</code></td> <td>当前所在滑块的 index</td></tr> <tr><td>interval</td> <td>Number</td> <td><code>5000</code></td> <td>自动切换时间间隔</td></tr> <tr><td>duration</td> <td>Number</td> <td><code>500</code></td> <td>滑动动画时长</td></tr> <tr><td>circular</td> <td>Boolean</td> <td><code>false</code></td> <td>是否采用衔接滑动</td></tr> <tr><td>vertical</td> <td>Boolean</td> <td><code>false</code></td> <td>滑动方向是否为纵向</td></tr> <tr><td>previous-margin</td> <td>String</td> <td><code>0</code></td> <td>前边距，可用于露出前一项的一小部分，接受px</td></tr> <tr><td>next-margin</td> <td>String</td> <td><code>0</code></td> <td>后边距，可用于露出后一项的一小部分，接受px</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr> <tr><td>easing-function</td> <td>String</td> <td><code>linear</code></td> <td>支持 linear、easeInCubic、easeOutCubic、easeInOutCubic</td></tr> <tr><td>bindchange</td> <td>eventhandle</td> <td>无</td> <td>current 改变时会触发 change 事件，event.detail = {current, source}</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>current 改变时会触发 change 事件，event.detail = {current, source}</td></tr></tbody></table> <h4 id="swiper-item"><a href="#swiper-item" class="header-anchor">#</a> swiper-item</h4> <ol><li>仅可放置在swiper组件中，宽高自动设置为100%。</li></ol> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>item-id</td> <td>string</td> <td><code>无</code></td> <td>该 swiper-item 的标识符</td></tr></tbody></table> <h4 id="movable-area"><a href="#movable-area" class="header-anchor">#</a> movable-area</h4> <p>movable-view的可移动区域。</p> <p>注意事项</p> <ol><li>movable-area不支持设置 scale-area，缩放手势生效区域仅在 movable-view 内</li></ol> <h4 id="movable-view"><a href="#movable-view" class="header-anchor">#</a> movable-view</h4> <p>可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>direction</td> <td>String</td> <td>none</td> <td>目前支持 all、vertical、horizontal、none｜</td></tr> <tr><td>inertia</td> <td>boolean</td> <td>false</td> <td>movable-view是否带有惯性｜</td></tr> <tr><td>out-of-bounds</td> <td>boolean</td> <td>false</td> <td>超过可移动区域后，movable-view是否还可以移动｜</td></tr> <tr><td>x</td> <td>Number</td> <td></td> <td>定义x轴方向的偏移</td></tr> <tr><td>y</td> <td>Number</td> <td></td> <td>定义y轴方向的偏移</td></tr> <tr><td>friction</td> <td>Number</td> <td>7</td> <td>摩擦系数</td></tr> <tr><td>disabled</td> <td>boolean</td> <td>false</td> <td>是否禁用</td></tr> <tr><td>animation</td> <td>boolean</td> <td>true</td> <td>是否使用动画</td></tr> <tr><td>simultaneous-handlers</td> <td>Array<object></object></td> <td>[]</td> <td>主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件</td></tr> <tr><td>wait-for</td> <td>Array<object></object></td> <td>[]</td> <td>主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 movable-view 组件</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>拖动过程中触发的事件，event.detail = {x, y, source}</td></tr> <tr><td>bindscale</td> <td>缩放过程中触发的事件，event.detail = {x, y, scale}</td></tr> <tr><td>htouchmove</td> <td>初次手指触摸后移动为横向的移动时触发</td></tr> <tr><td>vtouchmove</td> <td>初次手指触摸后移动为纵向的移动时触发</td></tr></tbody></table> <p>注意事项</p> <ol><li>simultaneous-handlers 为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture]</li> <li>wait-for  为 RN 环境特有属性，具体含义可参考(react-native-gesture-handler)[https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail]</li></ol> <h4 id="root-portal"><a href="#root-portal" class="header-anchor">#</a> root-portal</h4> <p>使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。
-属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody></tbody></table> <p>| enable   | boolean           |   true	     | 是否从页面中脱离出来	｜</p> <p>注意事项</p> <ol><li>style 样式不支持中使用百分比计算、css variable</li></ol> <h4 id="cover-view"><a href="#cover-view" class="header-anchor">#</a> cover-view</h4> <p>视图容器。
-功能同 view 组件</p> <h4 id="cover-image"><a href="#cover-image" class="header-anchor">#</a> cover-image</h4> <p>视图容器。
-功能同 image 组件</p> <h4 id="icon"><a href="#icon" class="header-anchor">#</a> icon</h4> <p>图标组件</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>type</td> <td>String</td> <td></td> <td>icon 的类型，有效值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear</td></tr> <tr><td>size</td> <td>String | Number</td> <td>23</td> <td>icon 的大小</td></tr> <tr><td>color</td> <td>String</td> <td></td> <td>icon 的颜色，同 css 的 color</td></tr></tbody></table> <h4 id="text"><a href="#text" class="header-anchor">#</a> text</h4> <p>文本。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>user-select</td> <td>boolean</td> <td><code>false</code></td> <td>文本是否可选。</td></tr> <tr><td>disable-default-style</td> <td>boolean</td> <td><code>false</code></td> <td>会内置默认样式，比如fontSize为16。设置<code>true</code>可以禁止默认的内置样式。</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td>false</td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindtap</td> <td>点击的时候触发</td></tr></tbody></table> <p>注意事项</p> <ol><li>未包裹 text 标签的文本，会自动包裹 text 标签。</li> <li>text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段</li></ol> <h4 id="button"><a href="#button" class="header-anchor">#</a> button</h4> <p>按钮。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>size</td> <td>String</td> <td><code>default</code></td> <td>按钮的大小</td></tr> <tr><td>type</td> <td>String</td> <td><code>default</code></td> <td>按钮的样式类型</td></tr> <tr><td>plain</td> <td>Boolean</td> <td><code>false</code></td> <td>按钮是否镂空，背景色透明</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr> <tr><td>loading</td> <td>Boolean</td> <td><code>false</code></td> <td>名称前是否带 loading 图标</td></tr> <tr><td>open-type</td> <td>String</td> <td></td> <td>微信开放能力，当前仅支持 <code>share</code></td></tr> <tr><td>hover-class</td> <td>String</td> <td></td> <td>指定按钮按下去的样式类。当 hover-class=&quot;none&quot; 时，没有点击态效果</td></tr> <tr><td>hover-start-time</td> <td>Number</td> <td><code>20</code></td> <td>按住后多久出现点击态，单位毫秒</td></tr> <tr><td>hover-stay-time</td> <td>Number</td> <td><code>70</code></td> <td>手指松开后点击态保留时间，单位毫秒</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <h4 id="label"><a href="#label" class="header-anchor">#</a> label</h4> <p>用来改进表单组件的可用性</p> <p>注意事项</p> <ol><li>当前不支持使用 for 属性找到对应 id，仅支持将控件放在该标签内，目前可以绑定的空间有：checkbox、radio、switch。</li></ol> <h4 id="checkbox"><a href="#checkbox" class="header-anchor">#</a> checkbox</h4> <p>多选项目</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td>false</td> <td>是否禁用</td></tr> <tr><td>checked</td> <td>Boolean</td> <td>false</td> <td>当前是否选中，可用来设置默认选中</td></tr> <tr><td>color</td> <td>String</td> <td>#09BB07</td> <td>checkbox的颜色，同css的color</td></tr></tbody></table> <h4 id="checkbox-group"><a href="#checkbox-group" class="header-anchor">#</a> checkbox-group</h4> <p>多项选择器，内部由多个checkbox组成。</p> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }</td></tr></tbody></table> <h4 id="radio"><a href="#radio" class="header-anchor">#</a> radio</h4> <p>单选项目</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>radio 标识，当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td>false</td> <td>是否禁用</td></tr> <tr><td>checked</td> <td>Boolean</td> <td>false</td> <td>当前是否选中，可用来设置默认选中</td></tr> <tr><td>color</td> <td>String</td> <td>#09BB07</td> <td>checkbox 的颜色，同 css 的 color</td></tr></tbody></table> <h4 id="radio-group"><a href="#radio-group" class="header-anchor">#</a> radio-group</h4> <p>单项选择器，内部由多个 radio 组成</p> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>radio-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 radio 的 value 的数组 ] }</td></tr></tbody></table> <h4 id="form"><a href="#form" class="header-anchor">#</a> form</h4> <p>表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。</p> <p>当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。</p> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindsubmit</td> <td>携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} }</td></tr> <tr><td>bindreset</td> <td>表单重置时会触发 reset 事件</td></tr></tbody></table> <h4 id="input"><a href="#input" class="header-anchor">#</a> input</h4> <p>输入框。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>输入框的初始内容</td></tr> <tr><td>type</td> <td>String</td> <td><code>text</code></td> <td>input 的类型，不支持 <code>safe-password</code>、<code>nickname</code></td></tr> <tr><td>password</td> <td>Boolean</td> <td><code>false</code></td> <td>是否是密码类型</td></tr> <tr><td>placeholder</td> <td>String</td> <td></td> <td>输入框为空时占位符</td></tr> <tr><td>placeholder-class</td> <td>String</td> <td></td> <td>指定 placeholder 的样式类，仅支持 color 属性</td></tr> <tr><td>placeholder-style</td> <td>String</td> <td></td> <td>指定 placeholder 的样式，仅支持 color 属性</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr> <tr><td>maxlength</td> <td>Number</td> <td><code>140</code></td> <td>最大输入长度，设置为 -1 的时候不限制最大长度</td></tr> <tr><td>auto-focus</td> <td>Boolean</td> <td><code>false</code></td> <td>(即将废弃，请直接使用 focus )自动聚焦，拉起键盘</td></tr> <tr><td>focus</td> <td>Boolean</td> <td><code>false</code></td> <td>获取焦点</td></tr> <tr><td>confirm-type</td> <td>String</td> <td><code>done</code></td> <td>设置键盘右下角按钮的文字，仅在 type='text' 时生效</td></tr> <tr><td>confirm-hold</td> <td>Boolean</td> <td><code>false</code></td> <td>点击键盘右下角按钮时是否保持键盘不收起</td></tr> <tr><td>cursor</td> <td>Number</td> <td></td> <td>指定 focus 时的光标位置</td></tr> <tr><td>cursor-color</td> <td>String</td> <td></td> <td>光标颜色</td></tr> <tr><td>selection-start</td> <td>Number</td> <td><code>-1</code></td> <td>光标起始位置，自动聚集时有效，需与 selection-end 搭配使用</td></tr> <tr><td>selection-end</td> <td>Number</td> <td><code>-1</code></td> <td>光标结束位置，自动聚集时有效，需与 selection-start 搭配使用</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindinput</td> <td>键盘输入时触发，event.detail = { value, cursor }，不支持 <code>keyCode</code></td></tr> <tr><td>bindfocus</td> <td>输入框聚焦时触发，event.detail = { value }，不支持 <code>height</code></td></tr> <tr><td>bindblur</td> <td>输入框失去焦点时触发，event.detail = { value }，不支持 <code>encryptedValue</code>、<code>encryptError</code></td></tr> <tr><td>bindconfirm</td> <td>点击完成按钮时触发，event.detail = { value }</td></tr> <tr><td>bind:selectionchange</td> <td>选区改变事件, event.detail = { selectionStart, selectionEnd }</td></tr></tbody></table> <p>方法</p> <p>可通过 <code>ref</code> 方式调用以下组件实例方法</p> <table><thead><tr><th>方法名</th> <th>说明</th></tr></thead> <tbody><tr><td>focus</td> <td>使输入框得到焦点</td></tr> <tr><td>blur</td> <td>使输入框失去焦点</td></tr> <tr><td>clear</td> <td>清空输入框的内容</td></tr> <tr><td>isFocused</td> <td>返回值表明当前输入框是否获得了焦点</td></tr></tbody></table> <h4 id="textarea"><a href="#textarea" class="header-anchor">#</a> textarea</h4> <p>多行输入框。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>输入框内容</td></tr> <tr><td>type</td> <td>String</td> <td><code>text</code></td> <td>input 的类型，不支持 <code>safe-password</code>、<code>nickname</code></td></tr> <tr><td>placeholder</td> <td>String</td> <td></td> <td>输入框为空时占位符</td></tr> <tr><td>placeholder-class</td> <td>String</td> <td></td> <td>指定 placeholder 的样式类，仅支持 color 属性</td></tr> <tr><td>placeholder-style</td> <td>String</td> <td></td> <td>指定 placeholder 的样式，仅支持 color 属性</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr> <tr><td>maxlength</td> <td>Number</td> <td><code>140</code></td> <td>最大输入长度，设置为 -1 的时候不限制最大长度</td></tr> <tr><td>auto-focus</td> <td>Boolean</td> <td><code>false</code></td> <td>(即将废弃，请直接使用 focus )自动聚焦，拉起键盘</td></tr> <tr><td>focus</td> <td>Boolean</td> <td><code>false</code></td> <td>获取焦点</td></tr> <tr><td>auto-height</td> <td>Boolean</td> <td><code>false</code></td> <td>是否自动增高，设置 auto-height 时，style.height不生效</td></tr> <tr><td>confirm-type</td> <td>String</td> <td><code>done</code></td> <td>设置键盘右下角按钮的文字，不支持 <code>return</code></td></tr> <tr><td>confirm-hold</td> <td>Boolean</td> <td><code>false</code></td> <td>点击键盘右下角按钮时是否保持键盘不收起</td></tr> <tr><td>cursor</td> <td>Number</td> <td></td> <td>指定 focus 时的光标位置</td></tr> <tr><td>cursor-color</td> <td>String</td> <td></td> <td>光标颜色</td></tr> <tr><td>selection-start</td> <td>Number</td> <td><code>-1</code></td> <td>光标起始位置，自动聚集时有效，需与 selection-end 搭配使用</td></tr> <tr><td>selection-end</td> <td>Number</td> <td><code>-1</code></td> <td>光标结束位置，自动聚集时有效，需与 selection-start 搭配使用</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindinput</td> <td>键盘输入时触发，event.detail = { value, cursor }，不支持 <code>keyCode</code></td></tr> <tr><td>bindfocus</td> <td>输入框聚焦时触发，event.detail = { value }，不支持 <code>height</code></td></tr> <tr><td>bindblur</td> <td>输入框失去焦点时触发，event.detail = { value }，不支持 <code>encryptedValue</code>、<code>encryptError</code></td></tr> <tr><td>bindconfirm</td> <td>点击完成按钮时触发，event.detail = { value }</td></tr> <tr><td>bindlinechange</td> <td>输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 <code>heightRpx</code></td></tr> <tr><td>bind:selectionchange</td> <td>选区改变事件, {selectionStart, selectionEnd}</td></tr></tbody></table> <p>方法</p> <p>可通过 <code>ref</code> 方式调用以下组件实例方法</p> <table><thead><tr><th>方法名</th> <th>说明</th></tr></thead> <tbody><tr><td>focus</td> <td>使输入框得到焦点</td></tr> <tr><td>blur</td> <td>使输入框失去焦点</td></tr> <tr><td>clear</td> <td>清空输入框的内容</td></tr> <tr><td>isFocused</td> <td>返回值表明当前输入框是否获得了焦点</td></tr></tbody></table> <h4 id="picker-view"><a href="#picker-view" class="header-anchor">#</a> picker-view</h4> <p>嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>Array[number]</td> <td><code>false</code></td> <td>数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }</td></tr></tbody></table> <h4 id="picker-view-column"><a href="#picker-view-column" class="header-anchor">#</a> picker-view-column</h4> <p>滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致</p> <h4 id="picker"><a href="#picker" class="header-anchor">#</a> picker</h4> <p>从底部弹起的滚动选择器。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>mode</td> <td>string</td> <td><code>selector</code></td> <td>选择器类型</td></tr> <tr><td>disabled</td> <td>boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr></tbody></table> <p>公共事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindcancel</td> <td>取消选择时触发</td></tr> <tr><td>bindchange</td> <td>滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）</td></tr></tbody></table> <h5 id="普通选择器-mode-selector"><a href="#普通选择器-mode-selector" class="header-anchor">#</a> 普通选择器：mode = selector</h5> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>range</td> <td>array[object]/array</td> <td><code>[]</code></td> <td>mode 为 selector 或 multiSelector 时，range 有效</td></tr> <tr><td>range-key</td> <td>string</td> <td><code>false</code></td> <td>当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容</td></tr> <tr><td>value</td> <td>number</td> <td>0</td> <td>表示选择了 range 中的第几个（下标从 0 开始）</td></tr></tbody></table> <h5 id="多列选择器-mode-multiselector"><a href="#多列选择器-mode-multiselector" class="header-anchor">#</a> 多列选择器：mode = multiSelector</h5> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>range</td> <td>array[object]/array</td> <td><code>[]</code></td> <td>mode 为 selector 或 multiSelector 时，range 有效</td></tr> <tr><td>range-key</td> <td>string</td> <td><code>false</code></td> <td>当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容</td></tr> <tr><td>value</td> <td>array</td> <td><code>[]</code></td> <td>表示选择了 range 中的第几个（下标从 0 开始）</td></tr> <tr><td>bindcolumnchange</td> <td></td> <td></td> <td>列改变时触发</td></tr></tbody></table> <h5 id="多列选择器-时间选择器-mode-time"><a href="#多列选择器-时间选择器-mode-time" class="header-anchor">#</a> 多列选择器：时间选择器：mode = time</h5> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>string</td> <td><code>[]</code></td> <td>表示选中的时间，格式为&quot;hh:mm&quot;</td></tr> <tr><td>start</td> <td>string</td> <td><code>false</code></td> <td>表示有效时间范围的开始，字符串格式为&quot;hh:mm&quot;</td></tr> <tr><td>end</td> <td>string</td> <td><code>[]</code></td> <td>表示有效时间范围的结束，字符串格式为&quot;hh:mm&quot;</td></tr></tbody></table> <h5 id="多列选择器-时间选择器-mode-date"><a href="#多列选择器-时间选择器-mode-date" class="header-anchor">#</a> 多列选择器：时间选择器：mode = date</h5> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>string</td> <td><code>当天</code></td> <td>表示选中的日期，格式为&quot;YYYY-MM-DD&quot;</td></tr> <tr><td>start</td> <td>string</td> <td><code>false</code></td> <td>表示有效日期范围的开始，字符串格式为&quot;YYYY-MM-DD&quot;</td></tr> <tr><td>end</td> <td>string</td> <td><code>[]</code></td> <td>表示有效日期范围的结束，字符串格式为&quot;YYYY-MM-DD&quot;</td></tr> <tr><td>fields</td> <td>string</td> <td><code>day</code></td> <td>有效值 year,month,day，表示选择器的粒度</td></tr></tbody></table> <h5 id="fields-有效值"><a href="#fields-有效值" class="header-anchor">#</a> fields 有效值：</h5> <table><thead><tr><th>属性名</th> <th>说明</th></tr></thead> <tbody><tr><td>year</td> <td>选择器粒度为年</td></tr> <tr><td>month</td> <td>选择器粒度为月份</td></tr> <tr><td>day</td> <td>选择器粒度为天</td></tr></tbody></table> <h5 id="省市区选择器-mode-region"><a href="#省市区选择器-mode-region" class="header-anchor">#</a> 省市区选择器：mode = region</h5> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>array</td> <td><code>[]</code></td> <td>表示选中的省市区，默认选中每一列的第一个值</td></tr> <tr><td>custom-item</td> <td>string</td> <td></td> <td>可为每一列的顶部添加一个自定义的项</td></tr> <tr><td>level</td> <td>string</td> <td><code>region</code></td> <td>选择器层级</td></tr></tbody></table> <h5 id="level-有效值"><a href="#level-有效值" class="header-anchor">#</a> level 有效值：</h5> <table><thead><tr><th>属性名</th> <th>说明</th></tr></thead> <tbody><tr><td>province</td> <td>选省级选择器</td></tr> <tr><td>city</td> <td>市级选择器</td></tr> <tr><td>region</td> <td>区级选择器</td></tr></tbody></table> <h4 id="image"><a href="#image" class="header-anchor">#</a> image</h4> <p>图片。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>src</td> <td>String</td> <td><code>false</code></td> <td>图片资源地址，支持本地图片资源及 base64 格式数据，暂不支持 svg 格式</td></tr> <tr><td>mode</td> <td>String</td> <td><code>scaleToFill</code></td> <td>图片裁剪、缩放的模式，适配微信 image 所有 mode 格式</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>binderror</td> <td>当错误发生时触发，event.detail = { errMsg }</td></tr> <tr><td>bindload</td> <td>当图片载入完毕时触发，event.detail = { height, width }</td></tr></tbody></table> <p>注意事项</p> <ol><li>image 组件默认宽度320px、高度240px</li> <li>image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分</li></ol> <h4 id="canvas"><a href="#canvas" class="header-anchor">#</a> canvas</h4> <p>画布。</p> <p>事件</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>说明</th></tr></thead> <tbody><tr><td>bindtouchstart</td> <td>eventhandle</td> <td>手指触摸动作开始</td></tr> <tr><td>bindtouchmove</td> <td>eventhandle</td> <td>手指触摸后移动</td></tr> <tr><td>bindtouchend</td> <td>eventhandle</td> <td>手指触摸动作结束</td></tr> <tr><td>bindtouchcancel</td> <td>eventhandle</td> <td>手指触摸动作被打断</td></tr> <tr><td>bindlongtap</td> <td>eventhandle</td> <td>手指长按 300ms 之后触发</td></tr> <tr><td>binderror</td> <td>eventhandle</td> <td>当发生错误时触发 error 事件， detail = {errMsg}</td></tr></tbody></table> <p>API</p> <table><thead><tr><th>方法名</th> <th>说明</th></tr></thead> <tbody><tr><td>createImage</td> <td>创建一个图片对象。 仅支持在 2D Canvas 中使用</td></tr> <tr><td>createImageData</td> <td>创建一个 ImageData 对象。仅支持在 2D Canvas 中使用</td></tr> <tr><td>getContext</td> <td>该方法返回 Canvas 的绘图上下文。仅支持在 2D Canvas 中使用</td></tr> <tr><td>toDataURL</td> <td>返回一个包含图片展示的 data URI</td></tr></tbody></table> <p>注意事项</p> <ol><li>canvas 组件目前仅支持 2D 类型，不支持 webgl</li> <li>通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，具体接口可以参考 (HTML Canvas 2D Context)[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D] 定义的属性、方法</li> <li>canvas 的实现主要借助于 PostMessage 方式与 webview 容器通信进行绘制，所以对于严格依赖方法执行时机的场景，如调用 drawImage 绘图，再通过 getImageData 获取图片数据的场景，调用时需要使用 await 等方式来保证方法的执行时机</li> <li>通过 Canvas.createImage 画图，图片的链接不能有特殊字符，安卓手机可能会 load 失败</li></ol> <h5 id="web-view"><a href="#web-view" class="header-anchor">#</a> web-view</h5> <p>承载网页的容器。会自动铺满整个RN页面</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>src</td> <td>String</td> <td></td> <td>webview 指向网页的链接，如果需要对跳转的URL设定白名单可跳转，需要在业务跳转之前出来该逻辑</td></tr> <tr><td>bindmessage</td> <td>EventHandler</td> <td></td> <td>网页向RN通过 postMessage 传递数据</td></tr> <tr><td>bindload</td> <td>EventHandler</td> <td></td> <td>网页加载成功时候触发此事件</td></tr> <tr><td>binderror</td> <td>EventHandler</td> <td></td> <td>网页加载失败的时候触发此事件</td></tr></tbody></table> <p>注意事项</p> <ol><li>web-view网页中可使用@mpxjs/webview-bridge@2.9.68提供的接口返回RN页面或与RN页面通信，具体使用细节可以参见<a href="#WebviewAPI">Webview API</a></li></ol> <h4 id="自定义组件"><a href="#自定义组件" class="header-anchor">#</a> 自定义组件</h4> <h4 id="样式规则"><a href="#样式规则" class="header-anchor">#</a> 样式规则</h4> <h4 id="应用能力"><a href="#应用能力" class="header-anchor">#</a> 应用能力</h4> <h4 id="环境api"><a href="#环境api" class="header-anchor">#</a> 环境API</h4> <p>在RN环境中也提供了一部分常用api能力，方法名与使用方式与小程序相同，可能对于某个api提供的能力会比微信小程序提供的能力少一些，以下是使用说明：</p> <h5 id="使用说明"><a href="#使用说明" class="header-anchor">#</a> 使用说明</h5> <p>如果全量引入api-proxy这种情况下，需要如下配置</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 全量引入api-proxy</span>
-<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@didi/mpxjs-api-proxy'</span>
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">usePromise</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>需要在mpx项目中需要配置externals</p> <div class="language- extra-class"><pre class="language-text"><code>externals: {
-  ...
-  '@react-native-async-storage/async-storage': '@react-native-async-storage/async-storage',
-  '@react-native-clipboard/clipboard': '@react-native-clipboard/clipboard',
-  '@react-native-community/netinfo': '@react-native-community/netinfo',
-  'react-native-device-info': 'react-native-device-info',
-  'react-native-safe-area-context': 'react-native-safe-area-context',
-  'react-native-reanimated': 'react-native-reanimated',
-  'react-native-get-location': 'react-native-get-location',
-  'react-native-haptic-feedback': 'react-native-haptic-feedback'
-},
-</code></pre></div><p>如果引用单独的api-proxy方法这种情况，需要根据下表说明是否用到一下方法，来确定是否需要配置externals，配置参考上面示例</p> <table><thead><tr><th>api方法</th> <th>依赖的react-native三方库</th></tr></thead> <tbody><tr><td>showActionSheet</td> <td>react-native-reanimated</td></tr> <tr><td>getNetworkType、<br>offNetworkStatusChange、<br>onNetworkStatusChange</td> <td>@react-native-community/netinfo</td></tr> <tr><td>getLocation、<br>openLocation、<br>chooseLocation</td> <td>react-native-get-location</td></tr> <tr><td>setStorage、<br> setStorageSync、<br>getStorage、<br> getStorageSync、<br>getStorageInfo、<br>getStorageInfoSync、<br>removeStorage，<br>removeStorageSync，<br>clearStorage，<br>clearStorageSync</td> <td>@react-native-async-storage/async-storage</td></tr> <tr><td>getSystemInfo、<br>getSystemInfoSync、<br>getDeviceInfo、<br>getWindowInfo、<br>getLaunchOptionsSync、<br>getEnterOptionsSync</td> <td>react-native-device-info</td></tr> <tr><td>getWindowInfo、<br>getLaunchOptionsSync、<br>getEnterOptionsSync</td> <td>react-native-safe-area-context</td></tr> <tr><td>vibrateShort、<br> vibrateLong</td> <td>react-native-haptic-feedback</td></tr></tbody></table> <p>在RN 项目中，如果是以全量引入api-proxy的方法需要在RN环境中执行以下所有的命令，如果只是使用单个api的能力，可以参考上表来判断安装对应的包</p> <div class="language- extra-class"><pre class="language-text"><code>// 安装api-proxy下所用到的依赖 如果
-npm i @react-native-async-storage/async-storage
-npm i @react-native-clipboard/clipboard
-npm i @react-native-community/netinfo
-npm i react-native-safe-area-context
-npm i react-native-device-info
-npm i react-native-reanimated
-npm i react-native-haptic-feedback
-ios项目需要执行如下命令
-cd ios
-pod install
-
-npm i react-native-get-location
-</code></pre></div><p>android下需要做如下配置：
-安装react-native-get-location包后，需要在AndroidManifest.xml中定义位置权限，<a href="https://www.npmjs.com/package/react-native-get-location" target="_blank" rel="noopener noreferrer">参考文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language- extra-class"><pre class="language-text"><code>&lt;!-- Define ACCESS_FINE_LOCATION if you will use enableHighAccuracy=true  --&gt;
-&lt;uses-permission android:name=&quot;android.permission.ACCESS_FINE_LOCATION&quot;/&gt;
-
-&lt;!-- Define ACCESS_COARSE_LOCATION if you will use enableHighAccuracy=false  --&gt;
-&lt;uses-permission android:name=&quot;android.permission.ACCESS_COARSE_LOCATION&quot;/&gt;
-
-</code></pre></div><p>安装react-native-haptic-feedback包后需要在安卓中配置，<a href="https://github.com/mkuczera/react-native-haptic-feedback" target="_blank" rel="noopener noreferrer">配置参考文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
-打开 android/app/src/main/java/[...]/MainApplication.java. 在文件的顶部添加以下导入下面的代码片段</p> <div class="language- extra-class"><pre class="language-text"><code>import com.mkuczera.RNReactNativeHapticFeedbackPackage;
-</code></pre></div><p>修改设置,将下面的配置添加到android/settings.gradle文件中</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>include <span class="token string">':react-native-haptic-feedback'</span>
-<span class="token function">project</span><span class="token punctuation">(</span><span class="token string">':react-native-haptic-feedback'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>projectDir <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">File</span><span class="token punctuation">(</span>rootProject<span class="token punctuation">.</span>projectDir<span class="token punctuation">,</span> <span class="token string">'../node_modules/react-native-haptic-feedback/android'</span><span class="token punctuation">)</span>
-</code></pre></div><p>react-native-reanimated在mpx和RN项目都要安装，安装好包后需要在babel.config.json文件中做如下配置，并且RN环境中使用的react-native-reanimated与mpx项目中安装的react-native-reanimated版本要一致：
-<a href="https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/" target="_blank" rel="noopener noreferrer">配置参考文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token operator">...</span> <span class="token comment">// don't add it here :)</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token operator">...</span>
-      <span class="token string">'react-native-reanimated/plugin'</span><span class="token punctuation">,</span>
-    <span class="token punctuation">]</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span>
-</code></pre></div> <h4 id="webview-api"><a href="#webview-api" class="header-anchor">#</a> Webview API</h4> <p>对于web-view组件打开的网页，想要跟RN通信，或者跳转到RN页面，提供了以下能力</p> <table><thead><tr><th>方法名</th> <th>说明</th></tr></thead> <tbody><tr><td>navigateTo</td> <td>保留当前webview页面，跳转RN页面</td></tr> <tr><td>navigateBack</td> <td>关闭当前页面，返回上一页或多级RN页面</td></tr> <tr><td>switchTab</td> <td>跳转到RN的 tabBar 页面</td></tr> <tr><td>reLaunch</td> <td>关闭所有页面，打开到应用内的某个RN页面</td></tr> <tr><td>redirectTo</td> <td>关闭当前页面，跳转到应用内的某个RN页面</td></tr> <tr><td>getEnv</td> <td>获取当前环境</td></tr> <tr><td>postMessage</td> <td>向RN发送消息，实时触发组件的message事件</td></tr> <tr><td>invoke</td> <td>开放一个webview页面和web页面互通消息的能力</td></tr></tbody></table> <h5 id="webview-bridge示例代码"><a href="#webview-bridge示例代码" class="header-anchor">#</a> webview-bridge示例代码</h5> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> webviewBridge <span class="token keyword">from</span> <span class="token string">'@mpxjs/webview-bridge'</span>
-webviewBridge<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'RN地址'</span><span class="token punctuation">,</span>
-  <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'跳转成功'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h5 id="invoke示例代码"><a href="#invoke示例代码" class="header-anchor">#</a> invoke示例代码</h5> <p>RN环境中挂载getTime的逻辑</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token operator">...</span>
-<span class="token comment">// 普通方法</span>
-mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>webviewConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">apiImplementations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function-variable function">getTime</span><span class="token operator">:</span>  <span class="token punctuation">(</span><span class="token parameter">options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> <span class="token punctuation">{</span> params <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">=</span> options
-      <span class="token keyword">return</span> <span class="token punctuation">{</span>
-        <span class="token literal-property property">text</span><span class="token operator">:</span> params<span class="token punctuation">.</span>text<span class="token punctuation">,</span>
-        <span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token string">'2024-12-24'</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-<span class="token comment">// 或者promise</span>
-mpx<span class="token punctuation">.</span>config<span class="token punctuation">.</span>webviewConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">apiImplementations</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function-variable function">getTime</span><span class="token operator">:</span>  <span class="token punctuation">(</span><span class="token parameter">options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token keyword">const</span> <span class="token punctuation">{</span> params <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">=</span> options
-        <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>text<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-            <span class="token literal-property property">text</span><span class="token operator">:</span> params<span class="token punctuation">.</span>text<span class="token punctuation">,</span>
-            <span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token string">'2024-12-24'</span>
-          <span class="token punctuation">}</span><span class="token punctuation">)</span>
-        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'没有传text参数'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-<span class="token operator">...</span>
-</code></pre></div><p>web中通信的逻辑</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> webviewBridge <span class="token keyword">from</span> <span class="token string">'@mpxjs/webview-bridge'</span>
-webviewBridge<span class="token punctuation">.</span><span class="token function">invoke</span><span class="token punctuation">(</span><span class="token string">'getTime'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'我是入参'</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'接收到的消息：'</span><span class="token punctuation">,</span> res<span class="token punctuation">.</span>time<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h4 id="其他使用限制"><a href="#其他使用限制" class="header-anchor">#</a> 其他使用限制</h4> <p>如事件的target等</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/109.3da50cc1.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/platform/web.html b/docs-vuepress/.vuepress/dist/guide/platform/web.html
deleted file mode 100644
index d6ebdac7d9..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/platform/web.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/110.f74ff3a3.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/110.f74ff3a3.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/tool/e2e-test.html b/docs-vuepress/.vuepress/dist/guide/tool/e2e-test.html
deleted file mode 100644
index fce599e788..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/tool/e2e-test.html
+++ /dev/null
@@ -1,297 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>E2E自动化测试 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/111.51932e54.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" aria-current="page" class="active sidebar-link">E2E自动化测试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/tool/e2e-test.html#mpx-cli-脚手架集成e2e" class="sidebar-link">@mpx/cli 脚手架集成E2E</a></li><li class="sidebar-sub-header"><a href="/guide/tool/e2e-test.html#mpxjs-e2e-scripts" class="sidebar-link">@mpxjs/e2e-scripts</a></li><li class="sidebar-sub-header"><a href="/guide/tool/e2e-test.html#e2e可视化报告平台" class="sidebar-link">E2E可视化报告平台</a></li><li class="sidebar-sub-header"><a href="/guide/tool/e2e-test.html#e2e录制-自动化生成case" class="sidebar-link">E2E录制+自动化生成case</a></li><li class="sidebar-sub-header"><a href="/guide/tool/e2e-test.html#增强api" class="sidebar-link">增强API</a></li><li class="sidebar-sub-header"><a href="/guide/tool/e2e-test.html#sop" class="sidebar-link">SOP</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="e2e自动化测试"><a href="#e2e自动化测试" class="header-anchor">#</a> E2E自动化测试</h1> <p>微信小程序的官方文档推荐 <a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html" target="_blank" rel="noopener noreferrer">miniprogram-automator<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，其与小程序IDE的关系，正如 Google 与 UiAutomator、selenium 与 webdriver 一样；它是最契合小程序的。</p> <p>虽然微信小程序提供了 automator + ide 的 E2E 的解决方案，但该项目维护频率低且 case 编写效率低、API 不够友好等问题，因此基于微信提供的能力&amp; Mpx 生态我们产出了相对完善的小程序E2E自动化测试增强方案，此外还提供了可扩展的开箱即用的E2E基础设施。</p> <p>小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。</p> <blockquote><p>如果你之前使用过 Selenium WebDriver 或者 Puppeteer，那你可以很容易快速上手。小程序自动化 SDK 与它们的工作原理是类似的，主要区别在于控制对象由浏览器换成了小程序。</p></blockquote> <h2 id="mpx-cli-脚手架集成e2e"><a href="#mpx-cli-脚手架集成e2e" class="header-anchor">#</a> @mpx/cli 脚手架集成E2E</h2> <p>当使用 @mpxjs/cli 初始化 Mpx 项目的时候，交互式命令行里面新增了 E2E 选项，当选择了此选项，项目将会初始化 E2E 配置，完成相关内容的生成。</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/mpxtemplate_v2.png" alt=""></p> <p>关于 E2E 的模板文件如下：</p> <div class="language- extra-class"><pre class="language-text"><code># 忽略部分文件夹
-vue-project
-├─ .e2erc.js # E2E配置
-├─ src
-│  ├─ app.mpx
-│  ├─ pages
-│  │  └─ index.png
-│  └─ components
-│     └─ list.mpx
-├─ test
-│  └─ e2e # case目录
-│     └─ list.spec.js # 示例文件
-├─ jest-e2e.config.js # Jest配置
-└─ package.json
-</code></pre></div><p>这里罗列了 E2E 项目中约定(或推荐)的目录结构，在项目开发中，请遵照这个目录结构组织代码。</p> <h3 id="文件说明"><a href="#文件说明" class="header-anchor">#</a> 文件说明</h3> <p><strong>package.json</strong></p> <p>使用自动化测试，我们要做的第一件事就是安装 @mpxjs/e2e 和 @mpxjs/e2e-scripts，然后我们需要在 package.json 中定义两个自动化测试的脚本 test 和 testServer。</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
-  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;@mpxjs/e2e&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0.0.13&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;@mpxjs/e2e-scripts&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0.0.12&quot;</span><span class="token punctuation">,</span>
-  <span class="token punctuation">}</span>
-  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;test&quot;</span><span class="token operator">:</span> <span class="token string">&quot;e2e-runner&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;testServer&quot;</span><span class="token operator">:</span> <span class="token string">&quot;e2e-runner --preview&quot;</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。</p> <p><strong>.e2erc.js</strong></p> <p>E2E 配置文件，包含 E2E 内置功能和插件的配置。可以在这里扩展运行时的能力，比如修改运行时是否自动保存页面快照。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token keyword">const</span> PluginReport <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/e2e/report-server/server.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">recordsDir</span><span class="token operator">:</span> <span class="token string">'dist/wx/minitest'</span><span class="token punctuation">,</span> <span class="token comment">// 录制 json 文件的存储目录</span>
-  <span class="token literal-property property">connectFirst</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 优先使用 automator.connect，默认 automator.launch 优先</span>
-  <span class="token literal-property property">defaultWaitFor</span><span class="token operator">:</span> <span class="token number">5000</span><span class="token punctuation">,</span> <span class="token comment">// 默认 waitFor 时长</span>
-  <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 测试报告服务器配置</span>
-    <span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8886</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">jestTimeout</span><span class="token operator">:</span> <span class="token number">990000</span><span class="token punctuation">,</span> <span class="token comment">// jestTimeout</span>
-  <span class="token literal-property property">jsonCaseCpDir</span><span class="token operator">:</span> <span class="token string">'test/e2e/e2e-json'</span><span class="token punctuation">,</span> <span class="token comment">// 从 minitest 目录复制 json 文件到该目录下</span>
-  <span class="token literal-property property">needRealMachine</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否需要真机</span>
-  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">PluginReport</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 自定义测试报告的插件</span>
-  <span class="token literal-property property">projectPath</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./dist/wx'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">sequence</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// e2e 的 case 的执行顺序</span>
-    <span class="token comment">// 'minitest-1'</span>
-  <span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">testSuitsDir</span><span class="token operator">:</span> <span class="token string">'test/e2e/'</span><span class="token punctuation">,</span> <span class="token comment">// e2e 的 case 存放目录</span>
-  <span class="token literal-property property">useTS</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// e2e 的 case 是否为 TS 语法</span>
-  <span class="token literal-property property">wsEndpoint</span><span class="token operator">:</span> <span class="token string">'ws://localhost:9420'</span><span class="token punctuation">,</span> <span class="token comment">// automator.connect 的 wsEndpoint</span>
-  <span class="token literal-property property">timeoutSave</span><span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> <span class="token comment">// 定时截图默认开启，设置为 false 即可关闭</span>
-  <span class="token literal-property property">cacheDirectory</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./node_modules/@mpxjs/e2e/report-server/cache'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 配置截图数据的保存目录</span>
-  <span class="token literal-property property">tapSave</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 点击截图默认开启，设置为 false 即可关闭</span>
-  <span class="token literal-property property">routeUpdateSave</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 路由切换截图默认开启，设置为 false 即可关闭</span>
-  <span class="token literal-property property">routeTime</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span> <span class="token comment">// 路由切换 300ms 后再截图</span>
-  <span class="token literal-property property">watchResponse</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/api/list'</span><span class="token punctuation">,</span> <span class="token function">handler</span> <span class="token punctuation">(</span><span class="token parameter">newRes<span class="token punctuation">,</span> oldRes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 配置接口请求截图</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>我们提供了丰富的配置化选项，满足各种场景运行。</p> <table><thead><tr><th>参数</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>projectPath</td> <td>String</td> <td>./dist/wx</td> <td>小程序代码路径，Mpx 框架的 wx 输出目录</td></tr> <tr><td>testSuitsDir</td> <td>String</td> <td>test/e2e/suits/</td> <td>e2e 的 case 存放目录</td></tr> <tr><td>sequence</td> <td>string[ ]</td> <td>[ ]</td> <td>用例运行的顺序</td></tr> <tr><td>recordsDir</td> <td>String</td> <td>dist/wx/minitest</td> <td>录制 json 文件的存储目录</td></tr> <tr><td>connectFirst</td> <td>Boolean</td> <td>false</td> <td>优先使用 automator 的 connect 方法</td></tr> <tr><td>wsEndpoint</td> <td>String</td> <td>ws://localhost:9420</td> <td>使用 connect 方式时的 wsEndpoint 选项</td></tr> <tr><td>defaultWaitFor</td> <td>Number</td> <td>15000</td> <td>默认 waitFor 时长</td></tr> <tr><td>useTS</td> <td>Boolean</td> <td>false</td> <td>用例是否为 TS 语法</td></tr> <tr><td>jestTimeout</td> <td>Number</td> <td>990000</td> <td>默认测试超时时间</td></tr> <tr><td>jsonCaseCpDir</td> <td>String</td> <td>test/e2e-json</td> <td>从 minitest 目录复制 json 文件到该目录下</td></tr> <tr><td>needRealMachine</td> <td>Boolean</td> <td>false</td> <td>是否需要真机回放</td></tr> <tr><td>devServer</td> <td>Object</td> <td>null</td> <td>测试报告服务器配置</td></tr> <tr><td>plugins</td> <td>Array</td> <td>[ ]</td> <td>自定义测试报告的插件</td></tr> <tr><td>timeoutSave</td> <td>Number</td> <td>3000</td> <td>定时3000ms保存页面快照</td></tr> <tr><td>cacheDirectory</td> <td>String</td> <td>report-server/cache</td> <td>页面快照的保存目录</td></tr> <tr><td>tapSave</td> <td>Boolean</td> <td>true</td> <td>点击时候保存页面快照</td></tr> <tr><td>routeUpdateSave</td> <td>Boolean</td> <td>true</td> <td>路由切换时候保存页面快照</td></tr> <tr><td>routeTime</td> <td>Number</td> <td>300</td> <td>路由切换300ms后保存页面快照</td></tr> <tr><td>watchResponse</td> <td>Object</td> <td>null</td> <td>监听接口请求保存页面快照</td></tr></tbody></table> <p><strong>e2e</strong></p> <p>e2e 目录，所有的 case 文件存放在此目录下，默认会创建一个演示 demo 文件，也就是 list.spec.js 文件，约定 e2e 下所有的 .spec.js 结尾的作为自动化测试的文件，使用 Typescript 编写测试文件的时候, 需要将文件名改成 .spec.ts 格式，然后 tsconfig.json 加上 &quot;esModuleInterop&quot;: true。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
- * @file e2e test example
- * 首先开启工具安全设置中的 CLI/HTTP 调用功能
- * docs of miniprogram-automator: https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/quick-start.html
- */</span>
-<span class="token keyword">import</span> automator <span class="token keyword">from</span> <span class="token string">'@mpxjs/e2e'</span>
-
-<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'index'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">let</span> miniProgram
-  <span class="token keyword">let</span> page
-
-  <span class="token function">beforeAll</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">try</span> <span class="token punctuation">{</span>
-      miniProgram <span class="token operator">=</span> <span class="token keyword">await</span> automator<span class="token punctuation">.</span><span class="token function">connect</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">wsEndpoint</span><span class="token operator">:</span> <span class="token string">'ws://localhost:9420'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      miniProgram <span class="token operator">=</span> <span class="token keyword">await</span> automator<span class="token punctuation">.</span><span class="token function">launch</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">projectPath</span><span class="token operator">:</span> <span class="token string">'./dist/wx'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span>
-    page <span class="token operator">=</span> <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">reLaunch</span><span class="token punctuation">(</span><span class="token string">'/pages/index'</span><span class="token punctuation">)</span>
-    <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">waitFor</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">30000</span><span class="token punctuation">)</span>
-
-  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'desc'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> desc <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">,</span> <span class="token string">'components/list2271575d/index'</span><span class="token punctuation">)</span>
-    <span class="token comment">// 断言页面标签</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>desc<span class="token punctuation">.</span>tagName<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'view'</span><span class="token punctuation">)</span>
-    <span class="token comment">// 断言文字内容</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span><span class="token keyword">await</span> desc<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toContain</span><span class="token punctuation">(</span><span class="token string">'手机'</span><span class="token punctuation">)</span>
-    <span class="token comment">// 保存页面快照</span>
-    <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">screenshot</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'test/e2e/screenshot/homePage.png'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-  <span class="token function">afterAll</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>如果你已经熟悉了 Jest，你应该很适应 Jest 的断言 API。</p> <p><strong>jest-e2e.config.js</strong></p> <p>Jest 配置文件，这些选项可让你控制 Jest 的行为，你可以了解 Jest 的默认选项，以便在必要时扩展它们：</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">preset</span><span class="token operator">:</span> <span class="token string">'ts-jest'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">testEnvironment</span><span class="token operator">:</span> <span class="token string">'node'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">testTimeout</span><span class="token operator">:</span> <span class="token number">1000000000</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">maxWorkers</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">reporters</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token string">'default'</span><span class="token punctuation">,</span>
-    <span class="token punctuation">[</span><span class="token string">'&lt;rootDir&gt;/node_modules/@mpxjs/e2e/report-server/report.js'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 自定义测试报告</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>除了 Jest 提供的默认测试报告器外，我们还可以自定义测试报告。框架 @mpxjs/e2e 内部提供了可视化测试报告平台，需要配置 reporters 字段。</p> <p>目前对于@mpx/cli@3.*版本也会陆续完成E2E的相关支持。</p> <h2 id="mpxjs-e2e-scripts"><a href="#mpxjs-e2e-scripts" class="header-anchor">#</a> @mpxjs/e2e-scripts</h2> <p>默认情况下，Jest 将会递归的找到整个工程里所有 .spec.js 或 .test.js 扩展名的文件。 Jest 支持并行运行 test ，特别是在 ci 场景，将会极大减少 test 消耗时间。配置 --maxWorkers 参数表示的是 Jest 会开启多少个线程去完成所有的测试任务，默认值是 50% * os.cpus().length，相关的文档可见：<a href="https://jestjs.io/docs/cli#--maxworkersnumstring" target="_blank" rel="noopener noreferrer">链接<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>合理的设置 maxWorkers 会使得运行变快，依赖的是并行跑用例，但是在自动化测试环境下，用例通过脚本操控模拟器或真机环境，多个用例不能同时操控一个环境，否则会相互干扰，就好比 JS 只能是单线程执行一样。</p> <p>因为用例只能一个一个的执行，一个完整的项目自然会包含很多用例，但是一次只能执行一个用例的话，我们需要人工的操作很多次，才能全部执行完。为了跑一个遍就把所有的用例都执行完的话，我们会想到写一个脚本通过遍历的方式依次执行，这就是 @mpxjs/e2e-scripts 设计的初衷。</p> <p>使用 @mpxjs/e2e-scripts 内部提供的命令脚本，执行 npx e2e-runner 将会按照 sequence 的定义的顺序依次执行用例文件。</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">sequence</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// 测试用例的执行顺序</span>
-    <span class="token string">'minitest-1'</span><span class="token punctuation">,</span>
-    <span class="token string">'minitest-2'</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>上面代码表示会先执行 minitest-1.spec.js 文件，然后再执行 minitest-2.spec.js 文件。</p> <h2 id="e2e可视化报告平台"><a href="#e2e可视化报告平台" class="header-anchor">#</a> E2E可视化报告平台</h2> <p>E2E内置的 Jest 默认支持输出 HTML 的报告，因其只支持对测试结果数据的简单展示，故我们希望在其基础上，不仅针对报告查看的广度和颗粒度进行细化，还将对自动化测试过程中涉及到的痛点实现功能上的增强。</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/baogao-2.jpeg" alt=""></p> <p>E2E可视化报告平台是一个运行在本地环境，统合了用例管理、测试报告、页面快照和错误日志的平台。支持对通过 WechatDevTools 录制回放功能录制出的 case 进行自定义增强的能力，同时提供执行 E2E 测试过程中产出的页面快照和错误日志等信息进行快捷、直观地查看的功能。</p> <p>目前支持多种交互动作保存快照（点击、输入、滑动等），我们还在页面快照方面做了增强，提供了快照标记的功能，可以完善测试报告，增强排查手段，当点击元素后，页面快照上会自动标记出点击的区域或者元素。</p> <h2 id="e2e录制-自动化生成case"><a href="#e2e录制-自动化生成case" class="header-anchor">#</a> E2E录制+自动化生成case</h2> <p>微信推出了官方的录制回放能力。通过微信开发者工具可以录制用户的操作过程，期间可以进行简单断言，录制结束后支持回放。但是经过实际使用发现录制回放存在下列不足：</p> <ol><li>录制结果结果以 json 形式存在于 dist 目录，难以扩展、难维护；</li> <li>仅支持 data快照、wxml快照、检查元素、检查路径四种简单断言，难以满足复杂业务场景的细粒度断言诉求；</li> <li>因等待时长、接口响应时机、组件更新时机等难以和录制时对应，录制结果回放失败频率高、不稳定；</li></ol> <p>我们通过基于微信原生的录制进行增强的方案。使用录制的便捷性降低手写流程的成本，再通过 sdk 的能力对录制所得 Case 进行增强。</p> <p>这样，我们通过分析录制 JSON 文件，把 JSON 中的每一条进行分析转换，最终得到 spec 的 JS 代码文件，通过这种方式，可以大幅度降低获取元素、触发事件等常规 Case 的编写。</p> <p>JSON to Spec 本质只是录制结果的一种呈现，而这种转换的目的在于通过扩展强化录制 Case，弥补录制的能力有限。</p> <p>为了方便我们进行扩展，首先需要对录制所得的 JSON 文件进行语义化的分析。这么做的意义在于把录制的操作步骤和 JSON 的数据关联起来，而关联步骤和数据又可以增强可读性为用户在某一个步骤之后进行扩展增加了极大的便利性。</p> <p>上一个部分已经论证过把录制和SDK增强接合起来的可行性，但是上面一系列的操作都是通过脚本的形式呈现的，这对于我们前面的降低门槛来说仍然是繁琐的。最起码对于不会写代码的的人来说，还是不够理想。接下来就是探索如何更直观、更高效的方式把这种方案落地。</p> <p>我们设计了 Mpx-E2E 的工作台，当然这些也都集成到了 Mpx-E2E 的可视化平台中，下面我们看看这些具体的可视化的工作。</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/gencae.png" alt=""></p> <p>分析 JSON 操作步骤后，我们把依据 JSON 生成的 Spec 同样做了可视化处理，起初的时候我们只是做了 Spec 代码的 highlight，并没有支持编辑。但是考虑到所见即所得的效率，我们又在此支持了 WEB-IDE。在生成 Spec 代码后，即可在线进行编辑，最终通过我们的@mpxjs/e2e SDK核心能力，完成了保存spec文件。</p> <h2 id="增强api"><a href="#增强api" class="header-anchor">#</a> 增强API</h2> <blockquote><p>@mpxjs/e2e</p></blockquote> <p>小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。</p> <p>然而在我们使用过程中发现原始小程序官网提供的sdk存在能力的不足和缺失，或者说无法满足我们复杂的业务流程，针对这一系列的能力的缺失，我们开发了针对e2e的增强型api，来满足我们的整个自动化流程所需的功能</p> <p>1、获取页面中的DOM元素 $ 方法 ：</p> <p>SDK 中重写 page 和 element 的 <code>$</code> 方法。之所以这么处理是因为原生的 <code>$</code> 方法存在自定义组件中的元素不能稳定获取的问题，而这个问题的根源在于微信小程序会以某种规则为元素拼接组件或者父组件的名字作为真实类名，而这种规则并不固定。</p> <p>目前增强后的 <code>$</code> 方法支持两个参数，第一个为选择器，第二个是自定义组件名。第二个参数不传时其行为和原生 <code>$</code> 方法一致。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span>className<span class="token operator">:</span> string<span class="token punctuation">,</span> componentsName<span class="token operator">?</span><span class="token operator">:</span> string<span class="token punctuation">)</span><span class="token operator">:</span> Promise<span class="token operator">&lt;</span>Element <span class="token operator">|</span> any<span class="token operator">&gt;</span>
- 
-<span class="token keyword">const</span> confirmbtn <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'confirm-btn'</span><span class="token punctuation">,</span> <span class="token string">'homepage/components/confirmef91faba/confirm'</span><span class="token punctuation">)</span>
- 
-<span class="token keyword">const</span> confirmbtn2 <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.confirm-btn'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> view <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'view'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> id <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#id'</span><span class="token punctuation">)</span>
-</code></pre></div><p>获取自定义组件中的元素需要以渲染结果为准，通常第二个参数是传入组件的 <code>is</code> 属性。注意弹窗类似的组件往往会存在动画所以需要异步获取。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 页面的渲染结果</span>
-<span class="token operator">&lt;</span>base<span class="token operator">-</span>dialog is<span class="token operator">=</span><span class="token string">&quot;homepage/components/dialogd2d0cea6/index&quot;</span><span class="token operator">&gt;</span>
-  #shadow<span class="token operator">-</span>root
-    <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;wrapper&quot;</span><span class="token operator">&gt;</span>
-      <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;cancel-btn&quot;</span><span class="token operator">&gt;</span>确认<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-      <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;confirm-btn&quot;</span><span class="token operator">&gt;</span>取消<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-    <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>base<span class="token operator">-</span>dialog<span class="token operator">&gt;</span>
-
-<span class="token comment">// 对应获取元素的方法</span>
-<span class="token keyword">const</span> cancelbtn <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'cancel-btn'</span><span class="token punctuation">,</span> <span class="token string">'homepage/components/dialogd2d0cea6/index'</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> confirmbtn <span class="token operator">=</span> <span class="token keyword">await</span> page<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'confirm-btn'</span><span class="token punctuation">,</span> <span class="token string">'homepage/components/dialogd2d0cea6/index'</span><span class="token punctuation">)</span>
-</code></pre></div><p>2、增强 wait/ waitAll</p> <p>automator 中原生支持 <code>wait</code> 方法，表示等待时长或者等待终止的断言函数。但是经过实际测试发现，使用指定的等待时间并不可靠，其运行受限于硬件条件。</p> <p>经过增强的 <code>wait</code> 方法可以支持： 路由到指定页面， 指定组件渲染，指定组件更新，指定接口发起， 指定接口响应后；</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">wait</span><span class="token punctuation">(</span>path<span class="token operator">:</span> string<span class="token punctuation">,</span> type<span class="token operator">?</span><span class="token operator">:</span> string<span class="token punctuation">)</span><span class="token operator">:</span> Promise<span class="token operator">&lt;</span>string <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token operator">&gt;</span> <span class="token operator">|</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
- 
-<span class="token keyword">const</span> miniProgram <span class="token operator">=</span> <span class="token keyword">await</span> Automator<span class="token punctuation">.</span><span class="token function">launch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">projectPath</span><span class="token operator">:</span> <span class="token string">'./dist/wx'</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 页面</span>
-page <span class="token operator">=</span> <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">reLaunch</span><span class="token punctuation">(</span><span class="token string">'/pages/index/index'</span><span class="token punctuation">)</span>
-<span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">wait</span><span class="token punctuation">(</span><span class="token string">'pages/index/index'</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 组件</span>
-<span class="token keyword">const</span> suggest1 <span class="token operator">=</span> <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">wait</span><span class="token punctuation">(</span><span class="token string">'suggest/components/suggestcaafe3e4/suggest'</span><span class="token punctuation">,</span> <span class="token string">'component'</span><span class="token punctuation">)</span>
- 
-<span class="token comment">// 组件更新</span>
-<span class="token keyword">const</span> suggest2 <span class="token operator">=</span> <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">wait</span><span class="token punctuation">(</span><span class="token string">'suggest/components/suggestcaafe3e4/suggest'</span><span class="token punctuation">,</span> <span class="token string">'componentUpdate'</span><span class="token punctuation">)</span>
- 
-<span class="token comment">// 请求</span>
-<span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">wait</span><span class="token punctuation">(</span><span class="token string">'https://xxxx.xxx/xxx'</span><span class="token punctuation">,</span> <span class="token string">'request'</span><span class="token punctuation">)</span>
- 
-<span class="token comment">// 返回结果</span>
-<span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> miniProgram<span class="token punctuation">.</span><span class="token function">wait</span><span class="token punctuation">(</span><span class="token string">'https://xxxx.xxx/xxx'</span><span class="token punctuation">,</span> <span class="token string">'response'</span><span class="token punctuation">)</span>
-<span class="token function">expect</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>options<span class="token punctuation">.</span>data<span class="token punctuation">.</span>errno<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
-<span class="token keyword">const</span> data <span class="token operator">=</span> response<span class="token punctuation">.</span>options<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data
-<span class="token function">expect</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
-</code></pre></div><p>3、新增 mock 能力</p> <p>考虑到进行 e2e 测试时有些场景需要 mock 数据，所以 SDK 结合 mpx-fetch 的 <code>setProxy</code> 能力提供了静态资源文件 mock、手动设置接口响应结果的能力。</p> <p>前置：如果需要使用 mock 需要使用支持 <code>setProxy</code> 的 mpx-fetch 版本；此外还需要在 createApp 的时候传入 <code>setProxy</code> 属性，其配置与 mpx-fetch 的 <code>setProxy</code> 方法的配置相同，示例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-	<span class="token literal-property property">setProxy</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-  	<span class="token punctuation">{</span>
-    	<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      	<span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">'some-domain.com'</span><span class="token punctuation">,</span>
-      	<span class="token literal-property property">protocol</span><span class="token operator">:</span> <span class="token string">'https:'</span>
-    	<span class="token punctuation">}</span><span class="token punctuation">,</span>
-    	<span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      	<span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">'localhost'</span><span class="token punctuation">,</span>
-      	<span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8887</span><span class="token punctuation">,</span>
-      	<span class="token literal-property property">protocol</span><span class="token operator">:</span> <span class="token string">'http:'</span>
-    	<span class="token punctuation">}</span>
-  	<span class="token punctuation">}</span>
-  <span class="token punctuation">]</span><span class="token punctuation">,</span>
-	<span class="token comment">// otherApp props</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>3.1 初始化 mock：initMock</p> <p>当传入 <code>staticDir</code> 时会优先匹配该目录下的静 json 文件作为指定接口的响应结果。</p> <p>接口与文件名的映射规则：将域名后的 path 中的分隔符 <code>/</code> 替换为 <code>-</code>，示例：</p> <ul><li>接口名称：<code>api/pGetIndexInfo</code></li> <li>json 文件名称：<code>api-pGetIndexInfo.json</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">interface</span> <span class="token class-name">E2eMockConfig</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">staticDir</span><span class="token operator">:</span> string <span class="token comment">// 本地文件目录：</span>
-<span class="token punctuation">}</span>
-
-Automator<span class="token punctuation">.</span><span class="token function">initMock</span><span class="token punctuation">(</span>mockCfg<span class="token operator">:</span> E2eMockConfig<span class="token punctuation">)</span><span class="token operator">:</span> Promise<span class="token operator">&lt;</span>MiniProgram<span class="token operator">&gt;</span>
-</code></pre></div><p>3.2 <code>setMock</code> 方法，除了上面的静态资源文件，mock 内置了一个 Map 列表，因此可以按需的设置某一接口的响应结果。</p> <div class="language-js extra-class"><pre class="language-js"><code>Automator<span class="token punctuation">.</span><span class="token function">setMock</span> <span class="token punctuation">(</span>path<span class="token operator">:</span>string<span class="token punctuation">,</span> <span class="token literal-property property">response</span><span class="token operator">:</span>any<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
- 
-<span class="token comment">// 示例：</span>
-<span class="token keyword">let</span> un <span class="token operator">=</span> Automator<span class="token punctuation">.</span><span class="token function">setMock</span><span class="token punctuation">(</span><span class="token string">'https://some-domain.com/api/pGetIndexInfo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">errno</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">errmsg</span><span class="token operator">:</span> <span class="token string">'mock-index-info'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
- 
-<span class="token comment">// 需要取消时可以调用 un，注意这一步骤非必须！！</span>
-<span class="token function">un</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><p>3.3 <code>removeMockFromMap</code> 从 mock 内置的 Map 列表中移除指定 path 对应的的 mock 数据。</p> <div class="language-js extra-class"><pre class="language-js"><code>Automator<span class="token punctuation">.</span><span class="token function">removeMockFromMap</span> <span class="token punctuation">(</span>path<span class="token operator">:</span>string<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
-</code></pre></div><h2 id="sop"><a href="#sop" class="header-anchor">#</a> SOP</h2> <p><strong>一、环境要求</strong></p> <p>1.1 微信环境
-安装 Node.js 并且版本大于 8.0
-基础库版本为 2.7.3 及以上
-开发者工具版本为 1.02.1907232 及以上
- 
-1.2 Mpx 环境
-Mpx-E2E 很多能力基于 Mpx 增强的，最低版本要求如下：
-@mpxjs/core &gt;= 2.7.2
-@mpxjs/api-proxy &gt;= 2.7.1
-@mpxjs/webpack-plugin &gt;= 2.7.8</p> <p><strong>二、新建项目</strong></p> <p>2.1 安装 @mpxjs/cli 脚手架</p> <div class="language-js extra-class"><pre class="language-js"><code>$ npm install <span class="token operator">-</span>g @mpxjs<span class="token operator">/</span>cli
-</code></pre></div><p>2.2 初始化项目选择 E2E 测试，执行以下命令执行初始化项目</p> <div class="language-js extra-class"><pre class="language-js"><code>$ mpx init some<span class="token operator">-</span>proj
-</code></pre></div><p>执行该命令后稍等片刻，等模板下载完成 Terminal 会输出以下提示，当输出到 ”是否需要 E2E 测试“时输入 “yes“ ，脚手架内置了 E2E 需要的依赖和简单的测试用例。待脚手架初始化完成后，你的新项目就已经拥有了开箱即用的E2E能力。</p> <p><strong>三、已有项目</strong></p> <p>3.1 安装 E2E sdk、runner</p> <div class="language-js extra-class"><pre class="language-js"><code>npm i @mpxjs<span class="token operator">/</span>e2e  @mpxjs<span class="token operator">/</span>e2e<span class="token operator">-</span>scripts <span class="token operator">--</span>save<span class="token operator">-</span>dev
-</code></pre></div><p>3.2 创建 .e2erc 配置文件</p> <blockquote><p>在项目的源文件目录下创建名为 .e2erc.js 的配置文件，以下为 e2erc 各选项及其含义，建议直接复制到项目中</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token keyword">const</span> PluginReport <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/e2e/report-server/server.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// E2E 报告插件</span>
-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">recordsDir</span><span class="token operator">:</span> <span class="token string">'dist/wx/minitest'</span><span class="token punctuation">,</span> <span class="token comment">// 录制 json 文件的存储目录</span>
-  <span class="token literal-property property">connectFirst</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 优先使用 automator.connect，默认 automator.launch 优先</span>
-  <span class="token literal-property property">wsEndpoint</span><span class="token operator">:</span> <span class="token string">'ws://localhost:9420'</span><span class="token punctuation">,</span> <span class="token comment">// automator.connect 的 wsEndpoint 选项，用于 connectFirst 时链接到模拟器服务</span>
-  <span class="token literal-property property">defaultWaitFor</span><span class="token operator">:</span> <span class="token number">15000</span><span class="token punctuation">,</span> <span class="token comment">// 默认 waitFor 时长</span>
-  <span class="token literal-property property">useTS</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否启用 TS , 该特性暂不支持，</span>
-  <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">jestTimeout</span><span class="token operator">:</span> <span class="token number">990000</span><span class="token punctuation">,</span> <span class="token comment">// jestTimeout</span>
-  <span class="token literal-property property">jsonCaseCpDir</span><span class="token operator">:</span> <span class="token string">'test/e2e-json'</span><span class="token punctuation">,</span> <span class="token comment">// 从 minitest 目录复制 json 文件到该目录下</span>
-  <span class="token literal-property property">needRealMachine</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否需要真机</span>
-  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">PluginReport</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> 
-  <span class="token literal-property property">projectPath</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./dist/wx'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 小程序代码路径，Mpx 框架的 wx 输出目录</span>
-  <span class="token literal-property property">testSuitsDir</span><span class="token operator">:</span> <span class="token string">'test/e2e/suits/'</span><span class="token punctuation">,</span> <span class="token comment">// e2e 的 case 存放目录</span>
-  <span class="token literal-property property">sequence</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// E2E case，runner 将会按照这个数组顺序执行其中的 case 文件，</span>
-    <span class="token string">'minitest-20'</span><span class="token punctuation">,</span> <span class="token comment">// 不需要写 .spec.js 这个扩展名</span>
-  <span class="token punctuation">]</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">reportsDir</span><span class="token operator">:</span> <span class="token string">'test/reports'</span> <span class="token comment">// 报告输出目录</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p><strong>四、获取 Case</strong></p> <p>4.1 录制 JSON Case</p> <p>录制 case 是依托于微信开发者工具已有的能力，操作流程如下：</p> <ol><li>启动录制
-启动微信开发者工具 -&gt; 工具 -&gt; 自动化测试</li> <li>创建用例
-选择【开始录制】按钮
-【用例名】会成为录制 JSON case 的文件名，比如上图中录制结束后会得到一个名为
-minitest-3.json 的 JSON 文件；我们推荐您采用更语义化的测试用例名称，便于后续的 CASE 管理。
-【结束录制】后，开发者工具会在小程序的代目录（Mpx 的产物输出目录，如 dist/wx）下新增 minitest/ 目录，该目录是微信开发者工具自动创建的，用于存放录制 JSON case。例如上面的例子中，录制结束后该目录下就应该有 名为 minitest-3.json 的 文件。</li></ol> <p>4.2 生成 Spec Case</p> <p>启动 Mpx-E2E 平台服务，首先在项目的 package.json 中加入以下 npm script：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
-  <span class="token string-property property">&quot;e2eServe&quot;</span><span class="token operator">:</span> <span class="token string">&quot;npx e2e-runner --preview&quot;</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span>
-</code></pre></div><p>在小程序项目录下通过命令行启动 Mpx-E2E 平台服务:</p> <div class="language-js extra-class"><pre class="language-js"><code>npm run e2eServe
-</code></pre></div><p>平台服务已经成功启动！打开 Mpx-E2E 的可视化平台:
-选择【用例管理】，加载录制的 JSON Case，点击可视化平台上的 【JSON 导入】按钮。界面中间是对当前 JSON 文件的语义化解析，最后侧是包含自动生成代码的 Web IDE。点击中间的语义化解析会联动右侧 WebIDE 代码跳转到对应的区域。</p> <p>4.3 可视化扩展 Spec Case</p> <ol><li><p>新增
-鼠标悬浮在中间语义化区域中每一条的左侧的绿色按钮时，就会出现一个扩展菜单，在弹出框中填写相关信息，点击【保存】即可新增一条操作</p></li> <li><p>编辑
-通过可视化的方式扩展的操作可以编辑，录制的操作不能编辑；</p></li></ol> <p>4.4 保存 Spec case</p> <p>在完成上述操作后，点击 Web-IDE 下面的 【保存】即可.</p> <p>点击保存后， Web-IDE 中的内容将会被写入到 .e2erc.js 的 testSuitsDir 字段指定的目录中。当文件写入成功后，被保存的 spec 文件名会被自动写入到剪贴板中。</p> <p>另外，生成这份 Case 的 JSON 文件也会被复制到 .e2erc.js 的 jsonCaseCpDir 目录下，之所以保存 JSON 文件主要是做备份，你可以不关心这个 json 的文件内容，但是我们建议你随着 spec 代码已经提交到版本库；
- 
-经过保存后，我们就得到了 minitest-3.spec.js Case 文件。</p> <p><strong>五、修改 .e2erc.js sequence</strong></p> <p>5.1 sequence 数组
-经过前面的获取 Case 后步骤后，我们已经得到了 minitest-3.spec.js Case 文件。在正式运行前，我们需要把这个 minitest-3.spec.js Case 加入到 .e2erc.js 的 sequence 字段数组中。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">sequence</span><span class="token operator">:</span> <span class="token punctuation">[</span> 
-  <span class="token string">'minitest-3'</span><span class="token punctuation">,</span> <span class="token comment">// 不用写 .spec.js </span>
-<span class="token punctuation">]</span>
-</code></pre></div><p>5.2 为什么手动维护？
-之所以需要手动维护这个数组，是因为微信的 automator 不能并发运行，进而 E2E 的 Case 无法并发运行；又或者某几个 spec 间是有联系的， 这种情况下只能把顺序交给人工维护。</p> <p><strong>六、运行 e2e</strong></p> <p>6.1 新增 npm scripts
-修改项目的 package.json 中 scripts 字段，向其中加入 &quot;test:e2e&quot;:&quot;npx e2e-runner&quot; 命令</p> <p>6.2 运行 E2E 测试命令</p> <div class="language-js extra-class"><pre class="language-js"><code>npm run test<span class="token operator">:</span>e2e
-</code></pre></div><p>6.3 在真机中运行 E2E</p> <ol><li>真机运行 E2E 相当于微信开发者工具的【真机调试】，首先需要确保你的 Mpx 构建输出产物是 prod 模式下的产物；</li> <li>修改 .e2erc.js 中的 needRealMachine 字段为 true，再执行 npm run test:e2e 命令；
-静等微信开发者工具完成真机调试二维码的构建完成，待完成后用真机扫描二维码即可开始；</li></ol> <blockquote><p>注：目前因为微信 automator 的限制，包括 wait 接口请求等能力暂时在真机上不能支持，这些问题目前已经反馈到微信，有进展我们会及时更新！</p></blockquote> <p><strong>七、测试报告</strong></p> <p>在 .e2erc.js 中配置 report-plugin（详情见.e2erc.js 配置文件部分） 即可在所有 spec 运行结束后自动打开浏览器并呈现测试结果，测试结果包含以下三部分:</p> <p>1） Jest 数据
-2） 自动截图：
-截图分析：在 Mpx-E2E 平台下，点击【截图】Tab 即可，截图以 spec 文件为维度展示，目前包含三种自动时机的截图：定时、点击时、路由发生时，默认全部展示。
-截图筛选：通过操作 timeout/tap/router 的复选框即可实现分类查看，另外在点击时的自动截图还会对点击位置进行标记；
-3）JSError 分析
-如果运行过程中小程序抛出 JS 异常，此时会触发 Mpx-E2E 的收集动作，同时会抓取报错瞬间的截图</p> <p>未来可视化平台会持续集成更多功能，可以涵盖业务稳定，数据稳定(埋点测试)和性能数据，持续更新...</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/tool/unit-test.html" class="prev">
-        单元测试
-      </a></span> <span class="next"><a href="/guide/extend/fetch.html">
-        网络请求
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/111.51932e54.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/tool/ts.html b/docs-vuepress/.vuepress/dist/guide/tool/ts.html
deleted file mode 100644
index bcc732ee83..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/tool/ts.html
+++ /dev/null
@@ -1,164 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>使用TypeScript开发小程序 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/112.da7bd3e7.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" aria-current="page" class="active sidebar-link">使用TypeScript开发小程序</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/tool/ts.html#什么是typescript" class="sidebar-link">什么是TypeScript</a></li><li class="sidebar-sub-header"><a href="/guide/tool/ts.html#typescript优势" class="sidebar-link">TypeScript优势</a></li><li class="sidebar-sub-header"><a href="/guide/tool/ts.html#使用方式" class="sidebar-link">使用方式</a></li><li class="sidebar-sub-header"><a href="/guide/tool/ts.html#类型推导及注意事项" class="sidebar-link">类型推导及注意事项</a></li></ul></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="使用typescript开发小程序"><a href="#使用typescript开发小程序" class="header-anchor">#</a> 使用TypeScript开发小程序</h1> <h2 id="什么是typescript"><a href="#什么是typescript" class="header-anchor">#</a> 什么是TypeScript</h2> <p>TypeScript 是一个开源的编程语言，通过在 JavaScript（世界上最常用的语言之一） 的基础上添加静态类型定义构建而成。</p> <p>类型提供了一种描述对象形状的方法。可以帮助提供更好的文档，还可以让 TypeScript 验证你的代码可以正常工作。</p> <p>在 TypeScript 中，不是每个地方都需要标注类型，因为类型推断允许您无需编写额外的代码即可获得大量功能。</p> <h2 id="typescript优势"><a href="#typescript优势" class="header-anchor">#</a> TypeScript优势</h2> <ol><li><p>静态类型检查
-静态类型检查可以避免很多不必要类型的错误，在编译阶段提前发现问题；</p></li> <li><p>强大的类型推断能力
-除了类型声明外，<code>TypeScript</code> 提供了强大的类型推断能力，该能力能够大大减少我们需要编写的类型声明，有效地减少我们使用 <code>TypeScript</code> 的额外压力；</p></li> <li><p>IDE 智能提示
-目前主流的 IDE 都对 <code>TypeScript</code> 提供了良好的支持，基于 <code>TypeScript</code> 的类型系统提供友好准确的编码提示与错误检查。</p></li></ol> <h2 id="使用方式"><a href="#使用方式" class="header-anchor">#</a> 使用方式</h2> <h3 id="编写ts前的准备工作"><a href="#编写ts前的准备工作" class="header-anchor">#</a> 编写ts前的准备工作</h3> <p>由于对 store 做类型推导使用了最新的 <code>TypeScript</code> 特性，因此需要将编辑器的 <code>TypeScript</code> 版本升级至 <strong>4.1.3</strong> 及以上版本。以下是 VSCode 配置示例：</p> <ol><li><p>更新项目中的TypeScript为 4.1.3 及以上版本。</p></li> <li><p>在VSCode中打开一个 .js/.ts/.tsx 后缀的文件，使用 <code>Shift+Command+P</code> 唤出 VSCode 命令行，输入 <code>TypeScript</code> ，选择 <code>Select TypeScript Version</code>，选择使用工作区版本，将版本切换至 4.1.3 及以上版本。</p></li></ol> <img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/select-ts-version.png" style="border-radius:6px;"> <ol start="3"><li>在 VSCode 编辑器中安装 mpx 插件，来支持在.mpx单文件中编写 ts 时的代码提示和实时报错等优秀体验。</li></ol> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>使用 @typescript/eslint-plugin 对 ts 代码进行检查，当在.mpx文件中使用全局类型时，eslint 会抛出 no-undef 错误，可以关闭相关 eslint 规则校验</p></div> <h3 id="mpx中编写ts（推荐）"><a href="#mpx中编写ts（推荐）" class="header-anchor">#</a> .mpx中编写ts（推荐）</h3> <p>目前 Mpx 已经支持在.mpx文件的 script 标签中编写 ts 代码，需要在 script 标签上添加 <code>lang=&quot;ts&quot;</code> 属性，在编译时会自动这部分 script 中的内容进行 ts 类型检查。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-<span class="token comment">// 内联编写ts代码</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>当然，由于大部分IDE对 ts 的语法支持都只对 .ts 和 .d.ts 文件生效，因此 Mpx 也支持创建一个 .ts 文件进行 ts 代码编写，在.mpx文件中，通过 src 的方式引入。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./index.ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><h3 id="为-ts文件添加loader"><a href="#为-ts文件添加loader" class="header-anchor">#</a> 为.ts文件添加loader</h3> <p>在 Webpack 配置中添加如下 rules 以配置 ts-loader</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
-  <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.ts$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
-  <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
-    <span class="token string">'ts-loader'</span>
-  <span class="token punctuation">]</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h3 id="编写tsconfig-json文件"><a href="#编写tsconfig-json文件" class="header-anchor">#</a> 编写tsconfig.json文件</h3> <p>对相关配置不熟悉的同学可以直接采用下面配置，能够最大限度发挥 Mpx 中强大的 ts 类型推导能力</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
-  <span class="token property">&quot;compilerOptions&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token property">&quot;target&quot;</span><span class="token operator">:</span> <span class="token string">&quot;es6&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;allowJs&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;noImplicitThis&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;noImplicitAny&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;strictNullChecks&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;moduleResolution&quot;</span><span class="token operator">:</span> <span class="token string">&quot;node&quot;</span><span class="token punctuation">,</span>
-    <span class="token property">&quot;lib&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
-      <span class="token string">&quot;dom&quot;</span><span class="token punctuation">,</span>
-      <span class="token string">&quot;es6&quot;</span><span class="token punctuation">,</span>
-      <span class="token string">&quot;dom.iterable&quot;</span>
-    <span class="token punctuation">]</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><h3 id="增强类型"><a href="#增强类型" class="header-anchor">#</a> 增强类型</h3> <p>如果需要增加 Mpx 的属性和选项，可以自定义声明 <code>TypeScript</code> 补充现有的类型。</p> <p>例如，首先创建一个 types.d.ts 文件</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// types.d.ts</span>
-
-<span class="token keyword">import</span> <span class="token punctuation">{</span> Mpx <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token keyword">declare</span> <span class="token keyword">module</span> <span class="token string">'@mpxjs/core'</span> <span class="token punctuation">{</span>
-  <span class="token comment">// 声明为 Mpx 补充的属性</span>
-  <span class="token keyword">interface</span> <span class="token class-name">Mpx</span> <span class="token punctuation">{</span>
-    $myProperty<span class="token operator">:</span> <span class="token builtin">string</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span>
-</code></pre></div><p>之后在任意文件只需引用一次 types.d.ts 声明文件即可，例如在 app.mpx 中引用</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// app.mpx</span>
-
-<span class="token comment">/// &lt;reference path=&quot;./types.d.ts&quot; /&gt;</span>
-<span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-mpx<span class="token punctuation">.</span>$myProperty <span class="token operator">=</span> <span class="token string">'my-property'</span>
-</code></pre></div><h2 id="类型推导及注意事项"><a href="#类型推导及注意事项" class="header-anchor">#</a> 类型推导及注意事项</h2> <p>Mpx 基于泛型函数提供了非常方便用户使用的反向类型推导能力，简单来说，就是用户可以用非常接近于 js 的方式调用 Mpx 提供的 api ，就能够获得大量基于用户输入参数反向推导得到的类型提示及检查。但是由于 ts 本身的能力限制，我们在 Mpx 的运行时中添加了少量辅助函数和变种api，便于用户最大程度地享受反向类型推导带来的便利性，简单的使用示例如下：</p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">,</span> getMixin<span class="token punctuation">,</span> createStoreWithThis<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-<span class="token comment">// createStoreWithThis作为createStore的变种方法，主要变化在于定义getters，mutations和actions时，</span>
-<span class="token comment">// 获取自身的state，getters等属性不再通过参数传入，而是通过this.state或者this.getters等属性进行访问，</span>
-<span class="token comment">// 由于TS的能力限制，getters/mutations/actions只有使用对象字面量的方式直接传入createStoreWithThis时</span>
-<span class="token comment">// 才能正确推导出this的类型，当需要将getters/mutations/actions拆解为对象编写时，</span>
-<span class="token comment">// 需要用户显式地声明this类型，无法直接推导得出。</span>
-
-<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStoreWithThis</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  state<span class="token operator">:</span> <span class="token punctuation">{</span>
-    aa<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-    bb<span class="token operator">:</span> <span class="token number">2</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  getters<span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">cc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>aa <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bb
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  actions<span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">doSth3</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>getters<span class="token punctuation">.</span>cc<span class="token punctuation">)</span>
-      <span class="token keyword">return</span> <span class="token boolean">false</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-<span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  data<span class="token operator">:</span> <span class="token punctuation">{</span>
-    a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-    b<span class="token operator">:</span> <span class="token string">'2'</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  computed<span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">c</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>b
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">d</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token comment">// data, mixin, computed中定义的数据能够被推导到this中</span>
-      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>aaa <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>c
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token comment">// 从store上map过来的计算属性或者方法同样能够被推导到this中</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'aa'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-  mixins<span class="token operator">:</span> <span class="token punctuation">[</span>
-    <span class="token comment">// 使用mixins，需要对每一个mixin子项进行getMixin辅助函数包裹，支持嵌套mixin</span>
-    <span class="token function">getMixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-      computed<span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token function">aaa</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token keyword">return</span> <span class="token number">123</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span><span class="token punctuation">,</span>
-      methods<span class="token operator">:</span> <span class="token punctuation">{</span>
-        <span class="token function">doSth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>aaa<span class="token punctuation">)</span>
-          <span class="token keyword">return</span> <span class="token boolean">false</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-  <span class="token punctuation">]</span><span class="token punctuation">,</span>
-  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token function">doSth2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token operator">++</span>
-      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>d<span class="token punctuation">)</span>
-      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>aa<span class="token punctuation">)</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doSth3</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token operator">...</span>store<span class="token punctuation">.</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'doSth3'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h3 id="getmixin"><a href="#getmixin" class="header-anchor">#</a> getMixin</h3> <p>为 ts 项目提供的反向推导 mixin 的辅助函数，getMixin 接收一个对象作为参数，使用 mixins 时，支持嵌套 mixin。具体用法见<a href="/api/global-api.html#getmixin">getMixin</a>。</p> <h3 id="createstorewiththis"><a href="#createstorewiththis" class="header-anchor">#</a> createStoreWithThis</h3> <p>为了在 ts 项目中更好的支持 store 的类型推导，提供了 createStoreWithThis 进行 store 的创建，createStoreWithThis 接收一个 options 对象作为参数。通过 createStoreWithThis 创建 store 时，使用<code>this.state</code>，<code>this.getters</code>，<code>this.commit</code>, <code>this.dispatch</code>对自身的相关属性进行获取。具体用法见<a href="/api/store-api.html#createstorewiththis">createStoreWithThis</a>。</p> <h3 id="createstatewiththis"><a href="#createstatewiththis" class="header-anchor">#</a> createStateWithThis</h3> <p>创建一个 state，支持 state 类型推导的辅助函数，具体用法见<a href="/api/store-api.html#createstatewiththis">createStateWithThis</a></p> <h3 id="creategetterswiththis"><a href="#creategetterswiththis" class="header-anchor">#</a> createGettersWithThis</h3> <p>创建一个 getters，支持 getters 类型推导的辅助函数，具体用法见<a href="/api/store-api.html#creategetterswiththis">createGettersWithThis</a></p> <h3 id="createmutationswiththis"><a href="#createmutationswiththis" class="header-anchor">#</a> createMutationsWithThis</h3> <p>创建一个 mutations，支持 mutations 类型推导的辅助函数，具体用法见<a href="/api/store-api.html#createmutationswiththis">createMutationsWithThis</a></p> <h3 id="createactionswiththis"><a href="#createactionswiththis" class="header-anchor">#</a> createActionsWithThis</h3> <p>创建一个 actions，支持 actions 类型推导的辅助函数，具体用法见<a href="/api/store-api.html#createactionswiththis">createActionsWithThis</a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/composition-api/reactive-api.html" class="prev">
-        响应式 API
-      </a></span> <span class="next"><a href="/guide/tool/unit-test.html">
-        单元测试
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/112.da7bd3e7.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/tool/unit-test.html b/docs-vuepress/.vuepress/dist/guide/tool/unit-test.html
deleted file mode 100644
index ab9f9a8676..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/tool/unit-test.html
+++ /dev/null
@@ -1,149 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>单元测试 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/113.caaf11a3.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" aria-current="page" class="active sidebar-link">单元测试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/tool/unit-test.html#安装依赖" class="sidebar-link">安装依赖</a></li><li class="sidebar-sub-header"><a href="/guide/tool/unit-test.html#jest-相关配置" class="sidebar-link">jest 相关配置</a></li><li class="sidebar-sub-header"><a href="/guide/tool/unit-test.html#简单的断言" class="sidebar-link">简单的断言</a></li><li class="sidebar-sub-header"><a href="/guide/tool/unit-test.html#编写可被测试的组件" class="sidebar-link">编写可被测试的组件</a></li><li class="sidebar-sub-header"><a href="/guide/tool/unit-test.html#断言异步更新" class="sidebar-link">断言异步更新</a></li></ul></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="单元测试"><a href="#单元测试" class="header-anchor">#</a> 单元测试</h1> <p>Mpx 框架提供了 jest 转换器 mpx-jest，结合微信小程序提供的 <a href="https://github.com/wechat-miniprogram/miniprogram-simulate" target="_blank" rel="noopener noreferrer">miniprogram-simulate<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 来进行单元测试的工作。</p> <blockquote><p>因为目前仅微信提供了仿真工具，暂时只支持微信小程序平台的单元测试。如果需要 E2E 测试，则和框架无关了，可参考微信的<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/" target="_blank" rel="noopener noreferrer">小程序自动化<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></blockquote> <p>如果是初始化项目，单元测试相关的项目依赖和配置可以通过 @mpx/cli 创建项目时选择使用单元测试选项自动生成，如果时旧项目需要使用，可以按照下方步骤安装依赖和添加配置。</p> <h2 id="安装依赖"><a href="#安装依赖" class="header-anchor">#</a> 安装依赖</h2> <div class="language-html extra-class"><pre class="language-html"><code>npm i -D @mpxjs/mpx-jest @mpxjs/miniprogram-simulate jest babel-jest
-
-// 如果项目使用了ts，则还需要安装
-npm i -D ts-jest
-</code></pre></div><h2 id="jest-相关配置"><a href="#jest-相关配置" class="header-anchor">#</a> jest 相关配置</h2> <p>首先在项目根目录创建 jest.config.js 配置文件，并加入以下关键配置</p> <div class="language-html extra-class"><pre class="language-html"><code>  testEnvironment: 'jsdom', // 使用 jsdom 环境
-  transform: {
-    '^.+\\.js$': '<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rootDir</span><span class="token punctuation">&gt;</span></span>/node_modules/babel-jest',
-    '^.+\\.mpx$': '<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rootDir</span><span class="token punctuation">&gt;</span></span>/node_modules/@mpxjs/mpx-jest',
-    '^.+\\.ts$': '<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rootDir</span><span class="token punctuation">&gt;</span></span>/node_modules/ts-jest' // 如果没使用 ts 可不用添加
-  },
-  setupFiles: ['<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rootDir</span><span class="token punctuation">&gt;</span></span>/test/setup'], // test 文件夹下声明 setup，路径可以随意定义，可以为每一个单测添加相应的配置
-  transformIgnorePatterns: ['node_modules/(?!(@mpxjs))'], // 定义node_modules 中需要进行 transform 的内容
-
-</code></pre></div><h2 id="简单的断言"><a href="#简单的断言" class="header-anchor">#</a> 简单的断言</h2> <p>暂时进行一个简单的组件单元测试书写，对于复杂组件以及通用测试逻辑的总结我们会在后续进行发布。</p> <p>示例如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'hello!'</span>
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token function">attached</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">this</span><span class="token punctuation">.</span>message <span class="token operator">=</span> <span class="token string">'bye!'</span>
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>对应的 hello-world.spec.js</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> simulate <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/miniprogram-simulate'</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 这里是一些 Jasmine 2.0 的测试，你也可以使用你喜欢的任何断言库或测试工具。</span>
-<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'MyComponent'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">let</span> id
-  <span class="token function">beforeAll</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    id <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">loadMpx</span><span class="token punctuation">(</span><span class="token string">'&lt;rootDir&gt;/src/components/hello-world.mpx'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-  <span class="token comment">// 检查 mount 中的组件实例</span>
-  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'correctly sets the message when component attached'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> comp <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
-    <span class="token keyword">const</span> instance <span class="token operator">=</span> comp<span class="token punctuation">.</span>instance
-    
-    <span class="token comment">// Mpx提供的数据响应是发生在组件挂载时的，未挂载前只能通过实例上的data访问数据</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>instance<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'hello!'</span><span class="token punctuation">)</span>
-    
-    <span class="token keyword">const</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'parent-wrapper'</span><span class="token punctuation">)</span> <span class="token comment">// 创建容器节点</span>
-    comp<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span> <span class="token comment">// 将组件插入到容器节点中，会触发 attached 生命周期</span>
-    <span class="token comment">// 挂载后则可以直接通过实例访问</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>instance<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'bye!'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-  <span class="token comment">// 创建一个实例并检查渲染输出</span>
-  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'renders the correct message'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> comp <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
-    <span class="token keyword">const</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'parent-wrapper'</span><span class="token punctuation">)</span> <span class="token comment">// 创建容器节点</span>
-    comp<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span> <span class="token comment">// 挂载组件到容器节点</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'&lt;wx-view&gt;bye!&lt;/wx-view&gt;'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="编写可被测试的组件"><a href="#编写可被测试的组件" class="header-anchor">#</a> 编写可被测试的组件</h2> <p>很多组件的渲染输出由它的 props 决定。事实上，如果一个组件的渲染输出完全取决于它的 props，那么它会让测试变得简单，就好像断言不同参数的纯函数的返回值。看下面这个例子：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ msg }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span>createComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-  <span class="token function">createComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-    <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> String <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>你可以在不同的 properties 中，通过 simulate.render 的第二个参数控制组件的输出：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> simulate <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/miniprogram-simulate'</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 省略辅助方法</span>
-<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'MyComponent'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'renders correctly with different props'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token keyword">const</span> id <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">loadMpx</span><span class="token punctuation">(</span><span class="token string">'&lt;rootDir&gt;/src/components/hello-world.mpx'</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> comp1 <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'hello'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> parent1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'parent-wrapper'</span><span class="token punctuation">)</span>
-    comp1<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent1<span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp1<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'&lt;wx-view&gt;hello&lt;/wx-view&gt;'</span><span class="token punctuation">)</span>
-    
-    <span class="token keyword">const</span> comp2 <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'bye'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token keyword">const</span> parent2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'parent-wrapper'</span><span class="token punctuation">)</span>
-    comp2<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent2<span class="token punctuation">)</span>
-    <span class="token function">expect</span><span class="token punctuation">(</span>comp2<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'&lt;wx-view&gt;bye&lt;/wx-view&gt;'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h2 id="断言异步更新"><a href="#断言异步更新" class="header-anchor">#</a> 断言异步更新</h2> <p>小程序视图层的更新是异步的，一些依赖视图更新结果的断言必须 await simulate.sleep() 或者 await comp.instance.$nextTick() 后进行：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> simulate <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@mpxjs/miniprogram-simulate'</span><span class="token punctuation">)</span>
-
-<span class="token comment">// 省略辅助方法</span>
-<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'updates the rendered message when vm.message updates'</span><span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">const</span> id <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">loadMpx</span><span class="token punctuation">(</span><span class="token string">'&lt;rootDir&gt;/src/components/hello-world.mpx'</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> comp <span class="token operator">=</span> simulate<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
-  <span class="token keyword">const</span> parent <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'parent-wrapper'</span><span class="token punctuation">)</span>
-  comp<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>parent<span class="token punctuation">)</span>
-  comp<span class="token punctuation">.</span>instance<span class="token punctuation">.</span>msg <span class="token operator">=</span> <span class="token string">'foo'</span>
-  <span class="token keyword">await</span> simulate<span class="token punctuation">.</span><span class="token function">sleep</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span>
-  <span class="token function">expect</span><span class="token punctuation">(</span>comp<span class="token punctuation">.</span>dom<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token string">'&lt;wx-view&gt;foo&lt;/wx-view&gt;'</span><span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><p>更深入的 Mpx 单元测试的内容将在以后持续更新……</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/tool/ts.html" class="prev">
-        使用TypeScript开发小程序
-      </a></span> <span class="next"><a href="/guide/tool/e2e-test.html">
-        E2E自动化测试
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/113.caaf11a3.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/understand/compile.html b/docs-vuepress/.vuepress/dist/guide/understand/compile.html
deleted file mode 100644
index a234b49880..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/understand/compile.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx编译构建原理 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/114.16cda7ac.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" class="sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" aria-current="page" class="active sidebar-link">Mpx编译构建原理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/understand/compile.html#分包处理" class="sidebar-link">分包处理</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx编译构建原理"><a href="#mpx编译构建原理" class="header-anchor">#</a> Mpx编译构建原理</h1> <p>我们希望使用目前设计最强大、生态最完善的编译构建工具Webpack来实现小程序的编译构建，让用户得到web开发中先进强大的工程化开发体验。使用过Webpack的同学都知道，通常来说Webpack都是将项目中使用到的一系列碎片化模块打包为一个或几个bundle，而小程序所需要的文件结构是非常离散化的，如何调解这两者的矛盾成为了我们最大的难题。一种非常直观简单的思路在于遍历整个src目录，将其中的每一个.mpx文件都作为一个entry加入到Webpack中进行处理，这样做的问题主要有两个：</p> <ol><li>src目录中用不到的.mpx文件也会被编译输出，最终也会被小程序打包进项目包中，无意义地增加了包体积；</li> <li>对于node_modules下的.mpx文件，我们不认为遍历node_modules是一个好的选择。</li></ol> <p>最终我们采用了一种基于依赖分析和动态添加entry的方式来进行实现，用户在Webpack配置中只需要配置一个入口文件app.mpx，loader在解析到json时会解析json中pages域和usingComponents域中声明的路径，通过动态添加entry的方式将这些文件添加到Webpack的构建系统当中（注意这里是添加entry而不是添加依赖，因为只有entry能生成独立的文件，满足小程序的离散化文件结构），并递归执行这个过程，直到整个项目中所有用到的.mpx文件都加入进来，在输出前，我们借助了CommonsChunkPlugin/SplitChunksPlugin的能力将复用的模块抽取到一个外部的bundle中，确保最终生成的包中不包含重复模块。我们提供了一个Webpack插件和一个.mpx文件对应的loader来实现上述操作，用户只需要将其添加到Webpack配置中就可以以打包web项目的方式正常打包小程序，没有任何的前置和后置操作，支持Webpack本身的完整生态。</p> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/mpx-liucheng.002.jpeg" alt="Mpx编译构建机制流程示意图"></p> <p><em>Mpx编译构建机制流程示意图</em></p> <h2 id="分包处理"><a href="#分包处理" class="header-anchor">#</a> 分包处理</h2> <p>构建时对于非JS资源，是所有的包串行处理，资源map会精确记录每个包中引用了哪些资源。</p> <p>在主包的处理过程中，将主包页面中引用的所有非js资源(组件、外部样式、外部模板、wxs，图像媒体等)都记录下来，在处理分包时，对分包内引用的非js资源都进行检查，如果被主包引用过则输出到主包中，否则标记为分包only的资源输出到分包目录下。</p> <p>由于主包和分包限制相同，一般情况下分包体积远小于主包体积
-，而微信小程序的体积限制策略主要卡主包体积不得超过2M，因此，Mpx设定的是主包体积优先策略，即尽可能减小主包体积，为此，会将分包资源尽可能打到分包去。</p> <p>组件和静态资源的输出规则如下：</p> <ol><li>主包引用的资源输出至主包</li> <li>分包引用且主包引用过的资源输出至主包，不在当前分包重复输出</li> <li>分包引用且无其他包引用的资源输出至当前分包</li> <li>分包引用且其他分包也引用过的资源，重复输出至当前分包</li> <li>当用户通过packageName query显式指定了资源的所属包时，输出至指定的包</li></ol> <p>如此复杂的分包策略也完全是为了尽可能良好地支持处理分包引用npm资源，因此不管在主包还是分包中，使用Mpx框架开发小程序，可以享受最舒适最自然最好用的npm机制。</p> <p>而小程序原生的分包是不具备这个能力，只能引用自己分包下的资源，同时大部分基于web技术而来的转译型框架应该也都是不会考虑这个部分的。</p> <p>甚至如果出现这种场景：同一个组件在A分包和B分包中都有使用，但未在主包使用，会将这个组件分别放入A分包和B分包而不是主包。（是否需要这样可自行斟酌，如果不希望出现这种情况，可在主包中引入一次该组件就会被收到主包去，全局就这一份了）</p> <p>总结一下：</p> <p>对于组件，若同时被多个分包引用，主包未引用，会有多份分包存在于各分包中。一旦被主包使用，就仅有一份存在于主包中。</p> <p>对于资源（例如纯JS模块），若被主包使用，会被收集到主包里。若被多个分包使用，会被收集进主包的bundle里。若仅被某分包使用，就会在分包的bundle.js里（视模块大小及引用次数也可能被内联到某个组件JS里）。</p> <p>进阶用户有更花式的需求可通过packageName query来显式指定输出。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/understand/runtime.html" class="prev">
-        Mpx运行时增强原理
-      </a></span> <span class="next"><a href="/guide/migrate/2.9.html">
-        从 2.8 升级至 2.9
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/114.16cda7ac.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/guide/understand/runtime.html b/docs-vuepress/.vuepress/dist/guide/understand/runtime.html
deleted file mode 100644
index ae5408c4ff..0000000000
--- a/docs-vuepress/.vuepress/dist/guide/understand/runtime.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx运行时增强原理 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/115.88124b12.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/basic/start.html" class="sidebar-link">快速开始</a></li><li><a href="/guide/basic/intro.html" class="sidebar-link">介绍</a></li><li><a href="/guide/basic/single-file.html" class="sidebar-link">单文件开发</a></li><li><a href="/guide/basic/ide.html" class="sidebar-link">IDE 高亮配置</a></li><li><a href="/guide/basic/template.html" class="sidebar-link">模板语法</a></li><li><a href="/guide/basic/css.html" class="sidebar-link">CSS 处理</a></li><li><a href="/guide/basic/reactive.html" class="sidebar-link">数据响应</a></li><li><a href="/guide/basic/class-style-binding.html" class="sidebar-link">类名样式绑定</a></li><li><a href="/guide/basic/conditional-render.html" class="sidebar-link">条件渲染</a></li><li><a href="/guide/basic/list-render.html" class="sidebar-link">列表渲染</a></li><li><a href="/guide/basic/event.html" class="sidebar-link">事件处理</a></li><li><a href="/guide/basic/two-way-binding.html" class="sidebar-link">双向绑定</a></li><li><a href="/guide/basic/component.html" class="sidebar-link">自定义组件</a></li><li><a href="/guide/basic/refs.html" class="sidebar-link">获取组件实例/节点信息</a></li><li><a href="/guide/basic/option-chain.html" class="sidebar-link">模版内可选链表达式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/advance/store.html" class="sidebar-link">状态管理（store）</a></li><li><a href="/guide/advance/pinia.html" class="sidebar-link">状态管理（pinia）</a></li><li><a href="/guide/advance/mixin.html" class="sidebar-link">使用 mixin</a></li><li><a href="/guide/advance/npm.html" class="sidebar-link">使用npm</a></li><li><a href="/guide/advance/subpackage.html" class="sidebar-link">使用分包</a></li><li><a href="/guide/advance/async-subpackage.html" class="sidebar-link">分包异步化</a></li><li><a href="/guide/advance/platform.html" class="sidebar-link">跨平台</a></li><li><a href="/guide/advance/i18n.html" class="sidebar-link">国际化i18n</a></li><li><a href="/guide/advance/size-report.html" class="sidebar-link">包体积分析</a></li><li><a href="/guide/advance/image-process.html" class="sidebar-link">图像资源处理</a></li><li><a href="/guide/advance/progressive.html" class="sidebar-link">原生渐进迁移</a></li><li><a href="/guide/advance/ability-compatible.html" class="sidebar-link">原生能力兼容</a></li><li><a href="/guide/advance/plugin.html" class="sidebar-link">小程序插件</a></li><li><a href="/guide/advance/custom-output-path.html" class="sidebar-link">自定义路径</a></li><li><a href="/guide/advance/utility-first-css.html" class="sidebar-link">使用原子类</a></li><li><a href="/guide/advance/ssr.html" class="sidebar-link">SSR</a></li><li><a href="/guide/advance/provide-inject.html" class="sidebar-link">依赖注入（Provide/Inject）</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组合式 API</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/composition-api/composition-api.html" class="sidebar-link">组合式 API</a></li><li><a href="/guide/composition-api/reactive-api.html" class="sidebar-link">响应式 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tool/ts.html" class="sidebar-link">使用TypeScript开发小程序</a></li><li><a href="/guide/tool/unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="/guide/tool/e2e-test.html" class="sidebar-link">E2E自动化测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/guide/extend" class="sidebar-heading clickable"><span>拓展</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/extend/fetch.html" class="sidebar-link">网络请求</a></li><li><a href="/guide/extend/api-proxy.html" class="sidebar-link">Api代理</a></li><li><a href="/guide/extend/mock.html" class="sidebar-link">数据 Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>理解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/understand/runtime.html" aria-current="page" class="active sidebar-link">Mpx运行时增强原理</a></li><li><a href="/guide/understand/compile.html" class="sidebar-link">Mpx编译构建原理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/migrate/2.9.html" class="sidebar-link">从 2.8 升级至 2.9</a></li><li><a href="/guide/migrate/2.8.html" class="sidebar-link">从 2.7 升级至 2.8</a></li><li><a href="/guide/migrate/2.7.html" class="sidebar-link">从旧版本迁移至 2.7</a></li><li><a href="/guide/migrate/mpx-cli-3.html" class="sidebar-link">mpx-cli v2 迁移到 v3</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx运行时增强原理"><a href="#mpx运行时增强原理" class="header-anchor">#</a> Mpx运行时增强原理</h1> <p>数据响应作为Vue最核心的特性，在我们的日常开发中被大量使用，能够极大地提高前端开发体验和效率，我们在框架设计初期最早考虑的就是如何将数据响应特性加入到小程序开发中。在数据响应的实现上，我们引入了MobX，一个实现了纯粹数据响应能力的知名开源项目。借助MobX和mixins，我们在小程序组件创建初期建立了一个响应式数据管理系统，该系统观察着小程序组件中的所有数据(data/props/computed)并基于数据的变更驱动视图的渲染(setData)及用户注册的watch回调，实现了Vue中的数据响应编程体验。与此同时，我们基于MobX封装实现了一个Vuex规范的数据管理store，能够方便地注入组件进行全局数据管理。为了提高跨团队开发的体验，我们对store添加了多实例可合并的特性，不同团队维护自己的store，在需要时能够合并他人或者公共的store生成新的store实例，我们认为这是一种比Vuex中modules更加灵活便捷的跨团队数据管理模式</p> <p>作为一个接管了小程序setData的数据响应开发框架，我们高度重视Mpx的渲染性能，通过小程序官方文档中提到的性能优化建议可以得知，setData对于小程序性能来说是重中之重，setData优化的方向主要有两个：</p> <ol><li>尽可能减少setData调用的频次</li> <li>尽可能减少单次setData传输的数据</li></ol> <p>为了实现以上两个优化方向，我们做了以下几项工作：</p> <ul><li>将组件的静态模板编译为可执行的render函数，通过render函数收集模板数据依赖，只有当render函数中的依赖数据发生变化时才会触发小程序组件的setData，同时通过一个异步队列确保一个tick中最多只会进行一次setData，这个机制和Vue中的render机制非常类似，大大降低了setData的调用频次；</li> <li>将模板编译render函数的过程中，我们还记录输出了模板中使用的数据路径，在每次需要setData时会根据这些数据路径与上一次的数据进行diff，仅将发生变化的数据通过数据路径的方式进行setData，这样确保了每次setData传输的数据量最低，同时避免了不必要的setData操作，进一步降低了setData的频次。</li></ul> <p><img src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/runtime.jpeg" alt="Mpx数据响应机制流程示意图"></p> <p><em>Mpx数据响应机制流程示意图</em></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
-      ←
-      <a href="/guide/extend/mock.html" class="prev">
-        数据 Mock
-      </a></span> <span class="next"><a href="/guide/understand/compile.html">
-        Mpx编译构建原理
-      </a>
-      →
-    </span></p></div> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/115.88124b12.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/index.html b/docs-vuepress/.vuepress/dist/index.html
deleted file mode 100644
index d44770cb87..0000000000
--- a/docs-vuepress/.vuepress/dist/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/5.12d049b6.js" as="script"><link rel="preload" href="/assets/js/2.314c65b9.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container" data-v-13a300a6><header class="header" data-v-3ad594c3 data-v-13a300a6><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div style="position:relative;overflow:hidden;min-width:950px;background:#f5f5f5;" data-v-2d48710e data-v-13a300a6><div class="one-section__img1" data-v-2d48710e></div> <div class="one-section__img2" data-v-2d48710e></div> <section class="one-section" data-v-2d48710e><div class="one-section__inner one-section__content" data-v-2d48710e><div style="display: inline-block;" data-v-2d48710e><h2 class="one-section__title" data-v-2d48710e>增强型跨端小程序框架</h2> <p class="one-section__desc" data-v-2d48710e>
-            良好的开发体验，极致的应用性能，完整的原生兼容，一份源码跨端输出所有小程序平台及Web。
-          </p> <button class="one-section__btn one-section__enter" data-v-2d48710e><a href="/guide/basic/start.html" class="white-link" data-v-2d48710e>
-              快速进入
-            </a></button> <button class="one-section__btn one-section__github" data-v-2d48710e><a href="https://github.com/didi/mpx" target="_blank" class="blue-link" data-v-2d48710e>
-              Github
-            </a></button></div></div> <div class="one-section__inner" data-v-2d48710e></div></section> <section class="two-section" data-v-2d48710e><ul class="row" data-v-2d48710e><li class="two-section__item" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/PsrcQ_igBl/texing_icon_you.png" alt="svg" loading="lazy" width="80" height="80" data-v-2d48710e> <p class="two-section__title" data-v-2d48710e>高性能</p> <p class="two-section__desc" data-v-2d48710e>Mpx高度关注小程序性能与包体积，深度整合了运行时性能优化与包体积分析优化能力，让开发者在大部分场景下只需专注于业务开发，就能生产出媲美甚至超出原生的高性能小程序应用。</p> <div class="two-section__line" data-v-2d48710e></div></li><li class="two-section__item" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/N7sc6TZnja/texing_icon_gao.png" alt="svg" loading="lazy" width="80" height="80" data-v-2d48710e> <p class="two-section__title" data-v-2d48710e>优体验</p> <p class="two-section__desc" data-v-2d48710e>以增强的方式将Vue中优良的开发特性引入到小程序开发中，如数据响应、组合式api等，配合强大的工程化能力，大大提升了小程序开发的体验与效率，同时保障了框架开发的可维护性与可预期性。</p> <div class="two-section__line" data-v-2d48710e></div></li><li class="two-section__item" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/bJMx84lznm/texing_icon_kua.png" alt="svg" loading="lazy" width="80" height="80" data-v-2d48710e> <p class="two-section__title" data-v-2d48710e>跨平台</p> <p class="two-section__desc" data-v-2d48710e>Mpx专注解决小程序跨端问题，通过静态转译与运行时适配结合，将一份源码跨端输出到所有开放的小程序平台和web环境下运行，同时最大限度减少跨端带来的性能与包体积损失。</p> <div class="two-section__line" data-v-2d48710e></div></li></ul></section> <section class="three-section" style="background-image:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/todomvc_bg_v3.png);" data-v-2d48710e><div class="three-section__inner" data-v-2d48710e><div data-v-2d48710e><div class="three-section__todo" data-v-2d48710e><div class="three-section__phone" data-v-2d48710e><img width="410" height="712" src="https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png" alt="phone" loading="lazy" data-v-2d48710e></div> <div class="three-section__iframe" data-v-2d48710e><iframe title="todo示例" scrolling="no" width="325" height="617" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/index.html" frameborder="0" data-v-2d48710e></iframe></div></div></div> <div class="three-section__mvc" data-v-2d48710e><div data-v-2d48710e><span class="dot-inner" style="background: #fff; margin: 0 auto;" data-v-2d48710e></span> <p class="white-text title" data-v-2d48710e>示例项目</p> <p class="white-text desc" data-v-2d48710e>
-              扫码体验Mpx版本的
-              <a href="https://github.com/didi/mpx/tree/master/examples/mpx-todoMVC" class="target-link" data-v-2d48710e>todoMVC</a>
-              在各个小程序平台和web中的一致表现 ，更多示例项目可点击
-              <a href="https://github.com/didi/mpx/tree/master/examples" class="target-link" data-v-2d48710e>这里</a>
-              进入查看。
-            </p></div> <div class="code-list" data-v-76bf3aa2 data-v-2d48710e><div class="code-list__item" data-v-76bf3aa2><img width="150" height="170" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/wx-qrcode.jpg" alt="code" loading="lazy" data-v-76bf3aa2></div><div class="code-list__item" data-v-76bf3aa2><img width="150" height="170" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/ali-qrcode.jpg" alt="code" loading="lazy" data-v-76bf3aa2></div></div></div></div></section> <section class="section four-section" data-v-2d48710e><div class="grow four-section__bg" style="background-image:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/jizhi_bg_v3.png);" data-v-2d48710e></div> <div class="four-section__inner" data-v-2d48710e><div class="grow" style="position: relative;" data-v-2d48710e><img width="412" src="https://dpubstatic.udache.com/static/dpubimg/jvACYsEQfm/jizhi_pic.png" alt="svg" loading="lazy" data-v-2d48710e></div> <div class="four-section__text grow" data-v-2d48710e><div style="margin-left: 86px;" data-v-2d48710e><div data-v-2d48710e><span class="dot-inner" data-v-2d48710e></span> <p class="title" data-v-2d48710e>极致性能</p> <p class="desc" data-v-2d48710e>
-                得益于增强的设计思路，Mpx在运行时没有复杂的封装抹平逻辑，而是专注于实现数据响应，setData优化和Composition api等关键增强能力，压缩后体积占用仅为60KB；配合编译构建中灵活强大的包体积分析优化能力，Mpx在性能与包体积方面做到了业内最优。
-              </p></div> <button class="btn" data-v-2d48710e><a href="/guide/basic/start.html" class="white-link" data-v-2d48710e>
-                点击进入
-              </a></button></div></div></div></section> <section class="section five-section" data-v-2d48710e><div class="grow five-section__bg" style="background-image:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/jianjin_bg_v3.png);" data-v-2d48710e></div> <div class="five-section__inner" data-v-2d48710e><div class="five-section__text grow" data-v-2d48710e><div style="margin-right: 86px;" data-v-2d48710e><div data-v-2d48710e><span class="dot-inner" data-v-2d48710e></span> <p class="title" data-v-2d48710e>渐进迁移</p> <p class="desc" data-v-2d48710e>
-                同样得益于增强的设计思路，Mpx能够完整兼容小程序原生技术规范，并以较低的成本进行持续跟进；借助框架提供的渐进迁移能力，小程序开发者可以方便地在Mpx项目中使用已有的原生开发生态，如组件库，统计工具等，同时也能将Mpx开发的组件输出到原生小程序项目中使用。
-              </p></div> <button class="btn" data-v-2d48710e><a href="/guide/basic/start.html" class="white-link" data-v-2d48710e>
-                点击进入
-              </a></button></div></div> <div class="grow" style="position: relative; display: flex; justify-content: flex-end;" data-v-2d48710e><img width="412" src="https://dpubstatic.udache.com/static/dpubimg/k5Ft6oWF6F/jianjin_pic.png" alt="svg" loading="lazy" data-v-2d48710e></div></div></section> <section class="six-section" style="background-image:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/kaifa_bg_v3.png);" data-v-2d48710e><div class="six-section__inner" data-v-2d48710e><div style="text-align: center;" data-v-2d48710e><span class="dot-inner" style="background: #fff; margin: 0 auto;" data-v-2d48710e></span></div> <p class="title six-section__title" data-v-2d48710e>开发生态</p> <ul class="row six-section__row" data-v-2d48710e><li data-v-2d48710e><a href="/guide/basic/start.html" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/K4XYVLjBLH/kaifa_icon_1.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/core</div> <div data-v-2d48710e>运行时核心</div></div></a></li><li data-v-2d48710e><a href="/guide/basic/start.html" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/2k0jC-ZkFX/kaifa_icon_2.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/webpack-plugin</div> <div data-v-2d48710e>编译核心</div></div></a></li><li data-v-2d48710e><a href="/guide/basic/start.html" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/ug3MOMmXaz/kaifa_icon_3.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/cli</div> <div data-v-2d48710e>脚手架工具</div></div></a></li></ul><ul class="row six-section__row" data-v-2d48710e><li data-v-2d48710e><a href="/api/extend.html#mpx-fetch" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/L6kO_akb2G/kaifa_icon_4.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/fetch</div> <div data-v-2d48710e>网络请求库</div></div></a></li><li data-v-2d48710e><a href="/api/extend.html#api-proxy" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/oZGOmLr5f3/kaifa_icon_5.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/api-proxy api</div> <div data-v-2d48710e>增强调用</div></div></a></li><li data-v-2d48710e><a href="/api/extend.html#webview-bridge" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/trdVxyR_5_/kaifa_icon_6.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/webview-bridge web</div> <div data-v-2d48710e>页面桥接</div></div></a></li></ul><ul class="row six-section__row" data-v-2d48710e><li data-v-2d48710e><a href="https://marketplace.visualstudio.com/items?itemName=pagnkelly.mpx" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/PczNH3wywM/kaifa_icon_7.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/vscode-plugin ide</div> <div data-v-2d48710e>插件</div></div></a></li><li data-v-2d48710e><a href="https://github.com/mpx-ecology/mpx-es-check" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/qXb0ZEY4xN/kaifa_icon_8.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/es-check</div> <div data-v-2d48710e>高级语法检查</div></div></a></li><li data-v-2d48710e><a href="/guide/advance/size-report.html" class="six-section__item six-section__step" data-v-2d48710e><div class="six-section__icon" data-v-2d48710e><img src="https://dpubstatic.udache.com/static/dpubimg/2pa_xoKoeL/kaifa_icon_9.png" alt="svg" loading="lazy" width="50" height="50" data-v-2d48710e></div> <div class="six-section__list" data-v-2d48710e><div class="six-section__bold" data-v-2d48710e>@mpxjs/size-report</div> <div data-v-2d48710e>包体积分析工具</div></div></a></li></ul></div></section> <section class="seven-section" data-v-2d48710e><span class="dot-inner" data-v-2d48710e></span> <p class="title" data-v-2d48710e>成功案例</p> <div class="row seven-section__wrap" data-v-2d48710e><div class="grow" data-v-2d48710e><p class="seven-section__title" data-v-2d48710e>
-            滴滴出行
-          </p> <p class="seven-section__desc" data-v-2d48710e></p></div> <div class="grow seven-section__center" style="background-image:url(https://gift-static.hongyibo.com.cn/static/kfpub/3547/anli_bg_v3.png);" data-v-2d48710e><div class="seven-section_phone" data-v-2d48710e><img width="213" height="433" src="https://dpubstatic.udache.com/static/dpubimg/Vx5n_3YCtP/anli_pic_phone.png" alt="phone" loading="lazy" data-v-2d48710e></div> <div class="seven-section__inner" data-v-2d48710e><div class="swiper-img" data-v-60490726 data-v-2d48710e><div class="swiper-img__list" style="transform:translate3d(0px, 0, 0);" data-v-60490726><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/shunfengche_demo_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/qingju_demo_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/guangchuang_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/jinlong_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/siji_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/jiayou_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/jieshu_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/yiqin_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/yangche_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/zhibo_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/ai_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/shudian_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/wuyuan_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/daka_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/xueersi_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/canshi_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/qintong_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/peixun_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/jixie_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/shenyi_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/dache_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/chenxin_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/xiaoer_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/shangchen_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/dida_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/hantong_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/didi2_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/chongdian_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/weiping_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/weiping_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div><div class="swiper-img__wrap" data-v-60490726><img width="188" height="410" src="https://gift-static.hongyibo.com.cn/static/kfpub/3547/weiping_v3.jpeg" alt="img" loading="lazy" data-v-60490726></div></div></div></div></div> <div class="grow" data-v-2d48710e></div></div> <div class="swiper-container" data-v-5724bcdd data-v-2d48710e><div class="swiper-button" data-v-5724bcdd><img src="https://dpubstatic.udache.com/static/dpubimg/0cgzDC8Apn/anli_icon_left.png" width="50" height="50" alt="left" loading="lazy" class="swiper-img swiper-disable" data-v-5724bcdd></div> <div class="swiper" data-v-5724bcdd><div class="swiper-list active" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/bcca3d10-01b7-4c08-951a-22418b2443d6.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>滴滴出行</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/pIM3h2vyj2/qingju.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>青桔单车</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/neOI_G6deQ/shunfengche.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>滴滴顺风车</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/708d5579-81f0-480e-96b3-5f49e8022273.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>出行广场</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/69a08787-d3a1-4c51-b182-0fcb96960b56.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>滴滴公交</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/8c25bec8-938e-452d-96f9-5e524092a8ee.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>滴滴金融</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/8fdd04ed-a74b-4b87-be6e-652550fb843f.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>滴滴外卖</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/d3b62a33-7dbd-45ea-a4aa-f30ad61965f2.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>司机招募</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/988099b3-9930-4c54-abd7-75e70134d649.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>小桔加油</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/79573ef6-2a66-462e-8cc7-63eb983168f8.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>番薯借阅</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/8932c3c2-b6da-4da2-8661-5554fe2bd4a3.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>疫查查应用</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/b6507fca-1e1f-4922-9240-d0f172bea6de.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>小桔养车</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/40fd646b-10d0-4383-a576-e1d425a8c05d.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>学而思直播课</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/6833dbdb-1dc8-4929-bd41-6d71069b0714.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>小猴启蒙课</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/8627f48d-cf64-4511-8b2f-ede8e54186a7.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>科创书店</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/421bf49b-a9cb-4d54-90d7-e21b80ab21b3.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>在武院</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/46ee136b-0791-4069-98b0-35566d5ef394.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>三股绳Lite</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/eab48487-5ca2-4368-9080-a6b843097e67.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>学而思优选课</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/lY7eYSppkW/68747470733a2f2f73686978682e636f6d2f73686571752f696d672f7172636f64655f322e37343664373562342e706e67.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>食享会</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/58cdbcc5-1f00-4da9-89c6-e638b2f77b19.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>青铜安全医生</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/a9d60600-40c0-4b66-934e-3bb176d3f07a.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>青铜安全培训</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/0a816842-dda4-4e30-8c14-e951fb1a8131.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>视穹云机械</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/7f1b5f22-d765-4142-862a-999c1ed9d10f.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>店有生意通</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/JzHnEyu8VT/aaa.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>花小猪打车</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/37222642-c508-4a67-8cbc-036a66985bfc.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>橙心优选</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/nB6-p3WzIQ/xiaoeryabiao.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>小二押镖</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/nY2bg3A1L_/shunxin.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>顺鑫官方微商城</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/DO3m0Iflq1/didachuxing.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>嘀嗒出行</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/86cd89be-de29-48ad-8cb0-72c432446e7b.jpg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>汉行通Pro</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/47fe83e5-c41a-4245-b910-60ed6493d87e.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>滴滴出行(支付宝)</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/fa1a524b-da97-4df3-9412-8c988f50b6ae.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>小桔充电(支付宝)</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/2a150b0a-e23d-4e91-98fe-e862410be911.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>唯品会QQ</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/56273723-ba98-4ceb-9672-075a5ab9f2da.png" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>唯品会(百度)</div></div></div></div><div class="swiper-list" data-v-5724bcdd><div class="swiper-item" data-v-5724bcdd><div data-v-5724bcdd><div data-v-5724bcdd><img width="80" height="80" src="https://dpubstatic.udache.com/static/dpubimg/88f898a0-2f3b-44c5-b7ce-c1a8aec25299.jpeg" alt="二维码" loading="lazy" data-v-5724bcdd></div> <div data-v-5724bcdd>唯品会(字节)</div></div></div></div></div> <div class="swiper-button" data-v-5724bcdd><img src="https://dpubstatic.udache.com/static/dpubimg/QhD6ulEP7k/anli_icon_right.png" width="50" height="50" alt="right" loading="lazy" class="swiper-img" data-v-5724bcdd></div></div></section></div> <div class="footer-container" data-v-f9ca297c data-v-13a300a6><footer class="footer" data-v-f9ca297c><ul class="footer__list" data-v-f9ca297c><li class="grow" data-v-f9ca297c><img width="180" src="https://dpubstatic.udache.com/static/dpubimg/T1R-u2N8nn/footer_logo.png" alt="logo" data-v-f9ca297c></li> <li class="grow" data-v-f9ca297c><ul class="footer-inner" data-v-f9ca297c><li class="footer__wrap" data-v-f9ca297c><span class="footer__text footer__title" data-v-f9ca297c>资源</span></li> <li class="footer__wrap" data-v-f9ca297c><a href="https://github.com/didi/mpx/issues/385" target="_blank" class="footer__text" data-v-f9ca297c>案例收集</a></li></ul></li> <li class="grow" data-v-f9ca297c><ul class="footer-inner" data-v-f9ca297c><li class="footer__wrap" data-v-f9ca297c><span class="footer__text footer__title" data-v-f9ca297c>社区</span></li> <li class="footer__wrap" data-v-f9ca297c><div class="popover" data-v-8bac5638 data-v-f9ca297c><div class="popover__content" data-v-8bac5638><span target="_blank" class="footer__text" data-v-8bac5638 data-v-f9ca297c>微信群</span></div> <div class="popover__top" style="display:none;" data-v-8bac5638><div class="popover__content" data-v-8bac5638><div class="popover__inner" data-v-8bac5638><img width="300" src="https://dpubstatic.udache.com/static/dpubimg/6DN0ebkbjgI2P9QjJr8jr_WechatIMG3.jpeg" alt="code" loading="lazy" data-v-8bac5638> <!----></div> <div class="popover__arrow" data-v-8bac5638></div></div></div></div></li><li class="footer__wrap" data-v-f9ca297c><div class="popover" data-v-8bac5638 data-v-f9ca297c><div class="popover__content" data-v-8bac5638><span target="_blank" class="footer__text" data-v-8bac5638 data-v-f9ca297c>QQ群</span></div> <div class="popover__top" style="display:none;" data-v-8bac5638><div class="popover__content" data-v-8bac5638><div class="popover__inner" data-v-8bac5638><img width="300" src="https://dpubstatic.udache.com/static/dpubimg/etX-gKWeUb/temp_qrcode_share_374632411.png" alt="code" loading="lazy" data-v-8bac5638> <!----></div> <div class="popover__arrow" data-v-8bac5638></div></div></div></div></li></ul></li> <li class="grow" data-v-f9ca297c><ul class="footer-inner" data-v-f9ca297c><li class="footer__wrap" data-v-f9ca297c><span class="footer__text footer__title" data-v-f9ca297c>帮助</span></li> <li class="footer__wrap" data-v-f9ca297c><a href="https://github.com/didi/mpx/issues" target="_blank" class="footer__text" data-v-f9ca297c>反馈问题</a></li></ul></li> <li class="grow" data-v-f9ca297c><ul class="footer-inner" data-v-f9ca297c><li class="footer__wrap" data-v-f9ca297c><span class="footer__text footer__title" data-v-f9ca297c>更多</span></li> <li class="footer__wrap" data-v-f9ca297c><a href="https://juejin.cn/user/4195392101298510" target="_blank" class="footer__text" data-v-f9ca297c>滴滴前端技术</a></li></ul></li></ul></footer> <div class="copyright" data-v-f9ca297c><div data-v-f9ca297c>备案号：<a href="https://beian.miit.gov.cn/" data-v-f9ca297c>蜀ICP备15023364号-2</a></div> <div data-v-f9ca297c>Copyright 2020 滴滴出行</div></div></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/5.12d049b6.js" defer></script><script src="/assets/js/2.314c65b9.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/logo.png b/docs-vuepress/.vuepress/dist/logo.png
deleted file mode 100644
index c5e0693f74a5f2fbf80a8f7b7c73684a83f687b0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 13635
zcmdtIWl)^m6FoRUu#lj^9TGgad(hw(+-2}ExWf<#Awh#X1b252Zo%Dc2=4CxhrG4F
z+TG9lX{mxKo|@-M-@biLpY9*ZiqfxN61@b0K(A#!N~nTB@P{A}+zS+V;K}tz8W`|_
zYX4E&2?RpJdH#h1C8ZF6Kreq=iHj>MTSA;6PL>dR3K?;63VTP0xs@##1ahA*iL>~m
zHb>U|bhUgA|K%&nN7NS7aa4*HBxTPUENqG|n5G|<D;NW)dGS6;{QidSPsfWV+T;J-
zg!m29EV7xha(Y0P(T7c+RjlRWtJdb4WoSv$A>_biSom)74va8Lb_`}m9RT%3GQij<
zA5*enZ_rQpj6{);>iyshe=?qh1P6ma3EodWQb!2zAp71pmS~w(DDi7!&r%TR2fQDr
zaVZ5dh!4>(1-}pW5+n}?qLF*UjtJ5~0x@~0I=%$Cz5!_^;w-)d6<4FSq5%)}<Ut^A
z6w%C+n^SqvE;48phRTi$;=}{Z$_1LxgWh9;nh~j5G5s_^APz@IJXAQ#Ubx@v2P@v}
zPk$40Phn>q>VgjVAP@y&uoD>jk^LH~6fVK%@r?~MDsehW05U?L;F=5RP-jv|#^LKX
zq5S<eBqrk|nyK&g$3!zq5mxW0*trwm=s)pF2e^#x4$(}8Z?aC~W&cX#-%ofjD2}`i
zPKCX4V1-1TNjm(9PN7vy;OK9dt5{RBf&bK~N0>E`LW!ZV#767JknAVo5-0WspFfsT
zCRRFuj39eF=cMq0J+N&+jpj$v01K+hPJ>59VarR86xosWAW4NAiGo&)7h;$aqA%<z
zUXrw9k^CkUgL|_hhYNU0h}j@)T|Ux(gEm@boKLXew;fXN*zy;&pD`&NiPzmn<REwu
zN-}584`zh=Y6OaTHJu(;zg!him_PlH$vZ!DR?$6;FRE!g8EYWWu_&C2(HC?AKU6LM
z_q_g$?*1$<J`hNVk-Y7M$Mi#S6h)UaLM#pxqx)7;jx%6PPV$wA7m4;4>Tri-Jv`4U
z_hLZrC>p{s(Kq8aJ(w>jshq$5*rxdQozNtJmrAdT7*&kwC&61n8A*05`b-H8ioHma
z>=*RX=oB@5EPaG9D#zD5Vq{c4eVC{Cr-<FkL<3?MDo)Nc1CkG;_MGUc5$2g8W8T%E
zrO>zx^=*}Etd{S~qDL7m+cwTG5JH11*r@;DZJ5Amy^Zq+8#&tIYJ80~QP&ch_IELI
zD>vAGeMu<&o6UhF<^3=YesD-Hs(pw<k$tlLW<8M}bt$PE@=OqMk5BK!iKjbpGjdvx
zQisKQ{3_Z>&b9Tu)jjxL=pN)7BT7+@iuZy?jE*w#r=*tRti-IiB}FxMBg(^9EUL(S
z@oGv>Eb1TLnf_WI7Zn6$n??6&&@n|K^WTa`QPU^Hh($$BN6N}bf83H;%8t)wV-K*E
zx}=bf3WR}S?_uIFywmrmAdk?@4;8=MRo3aWV`^g9Wra4`H&Hi*Vr98<8`ZK3Om>N^
z2`_jr7-}MJ6LV#%auG-Wj>S|DRd-fv%!|)^@u%7;UghMC;+_wk>)gJ(<+!Eg%1ufo
zQc}pT)hQ7xQ7O?qDB;&$l3!Bt`Qq8?S#T?Jp}PwqF#E<w?bmKmZ1Rb9nAMYjnn?aN
za@fZ(k}w4#Y0grsSJv2ELtFuzfk}u-$XqN|mmF-ls2qOuMx_>HCI;r{<tR*OcoDJP
z4CbV!E|uSEIBQaBu&d*&)h$yecEP5$PTUdijUmSAMk^N3#9Wafh|X<w*u-w0i_%@b
zkp6<EfPT}*rVn>%m-wXNia!-=hq+T}Qu7*l^=+0cm)<pcxv=cDCJrYZ^69g-Sl<5F
zi8xmlvS}e`+4Mxdu-gsWCf*L(9z1v3GaQGS{^maB>SLcZwqG{t`)RfPnT~tW*uDK2
zS2|>)H`0E9_aMcXS}04II%f<nOEHVh6m7$O!=>kSkCFl%jb8MtXi}QbG@ZHMa;p?H
z6Q&b|*{PEqh9u0J{_y`1PSQ=FO@gpO*vYF$Yge^lx|7<171_GCTFkY@mCZJi<?A|N
z-Ghq8&tW=ES|P=Z#gMsQ+@;(m$wJ)v9LF4s79TA>4Q*HC%-zoYotvJ!oU1sX+Mk}|
znrlh5;^zSWtxY85Xj^ESmD|Ud6LB4NMsd>G8eKn*&#KA#UD0t;inByNYgMCGH6dU@
zyyd*rGK`^@z+9!zU0>bc?d0MV+ce#T-jLXs)2QBfVXwVNcSv)n?$+GYc4vK6b(k)s
zC-jDlR`Bt>`r^-};5r}gpozw9v3S*OOK8ir0dliv3*U0V@?DFUPpJ2`u)6SwkAin#
z>r^YtL-Bp(efVw5Mcq~WUHat{!75fc`!6m`v{$H1FZW-KzY4}+!0^PgB}pOF!xto3
z$F3C2=6XX;MArDeIw)@h=h)h#)7Z|Kv2(uDYOP{zb8UpWm>P!lzG`gFxT<c%m%Z0E
z+*wiWt;8u+owRUR<#!#D3mZ;KeuhS>Tgg!IKfwv%TITy5v(yz?4v!AH>twyUJ&YR*
z*poPa-%ZkZ%fFImlG#^CN~~tzk*c(-<Za*!Oo;lan##`3V|h5-fN-Yw7k9WxWX0rh
z{ALDkoB1abZ=JFaC3LO-lee|WZscUy{YPJ1=-aS(jYMuH6wH0>X1v>%ZYV+HE#q?I
zhUV_z7_(RAo?yEX66~ArvXYQ4xOK;qrsC0JA8qm~>M9J22s!L`ulcf5CQ~?66|8Ej
zeIna4b3z);xGTl9k4z%E1@JKjJ2$5qJ|5mLnj^|lsx5xfVSp-MZhCB~!+dn2%3(0o
zu$=K6o_KARh5CK4ul?i5pu-^I;DQE0iB?l4Bxhv+q3EZ&Rnfdgaxt@(P&tj6!jR6u
z{C-VaNtK~y<zeS-*Ts9pTSS|ew@{Ruj8f$iWrNwOcBjr(atD!M=>Fn%wZm1<kz_~a
zUiW2pPPZWsD!2Yq|5{#UdJm6<?cw5jBlt+8Lt|(9Zo#{DD#kJf7Jm*&Z)tHrwvZkR
z#}L3jY}VM-YlPr~;~h02+7jAlb`wjwZqWDmu`5N#WtRDqMT=TD4iWZBR|YFB7kB4Z
zxJP%DhRsjyUw$HlssB~aK}JPBLvQ7cvCrSII2@^&YMknxT0xh?xSH;ote$C{nkE|)
zsLVkxQJa2En(B6bS@GL+=%V%lnP~QPckf#L>2;BzDzpJgbuY0XbJ%~YW}e5O#G!=G
zMHMzk6qGEX&@$9Nq;JtNTwUW{oANkyIMZnnHms2{!C$v2xar+~bAon*FQo%6fiRmJ
z>_c>CFRxX{bD9pu4pQSgSqxjSy*E{Z40{8M3^Yd!&gxzN@?UvQyq+Nr<I%TEdmP%V
zn@BB94XazU<63cTTN>vo+Viecy6P7A;#Ru2xzyqS8Ez@PJGml1|FgH_L*dPOt$cdC
zl+`S48Zjf-E<*1);I4Bkf22Kiq|wH6-gud|hqm8zBY1hU;rrofPsH)*nqT?Y|1tAC
zXKir)LvMSPc)NI=;gAp4vCgIEzQURa=cCHa^yxu?h|g0qUkaz-vErlMeVM|M%QE@n
z>V3xNx7M&Z%i-<W-b^L_bZcQJ5jSs{`%_2Te$DlnN{GgaPHPYp%AUp{%)Bvp0|NO0
zTrv{wc*Ypy$qqW>21$O-q(%UN*vIzZX!!e}TR+HNgFvOAsS*&X4JdO4^r;p;p$?u^
z2QJeaZrvNs#Zgu0DQWQ)Z7(W|H4doN+56sy3N-d|Rd?k2T5IC^y3QK3k0rXdEy05f
zG9p2oZChZY>}gv#hC!WSP<WLi6kP?jPHTYRQkZ^JRRDqPXh9&SG7#uK90dAW2hiAP
z5NMYPSP&uzgzGd!dZP#e(LcyYeE8%(zrW-mI_a|hbi!9}{6g|;`<;<s1$I-N*}}e~
zM)c&{+7jorUTgCTg-xu9Rqg7SSY|`5A|cF)4tqA661>9qy2(1-PJ+rR(h_e-L`xHI
z9@-yoZ$1n0nhT#LdWeui5591ukK8>xHj9+qcrOQy?>I96>uin=rUE`B2!TJDuYf-)
zNFWd<K)6BQ+5hj)DF%T5{`cIE4lt@{3>>h}|2=<x@&EPwe*^w|{{I~C|Er1qw{kz&
zJ<L^<QL|*}UZ!AlM>WUO^agFCCp>21OY9WcT{i}_Rv?vXW_W*=_>p%#-kAhMk#(25
zh`#OSL{2Q^o!_UvZqJKX=3Z6UD5W9ol6li{ej4V#m5}UtuAk-QXMg}$M04Y4tIl>z
zO^Dj_yB=eWOD&?DW=(BvKg>Oe^fLSO^;Ah1m8NXE-zdg<9&-NVIT2u_hH0TJw=yu=
z*3Av7&&VvaoXYE>iJdQj54m=~-d+~Ad#qW=9iBMNqP+d}HAo^+vEKL3cUlWtGy|S@
zP?m-Bu`M!@(8cJ#btO-D&CHcS3e6lQ6c32NVelLG#CRPw?YXuWZCxz3#T*H2w<BCP
zmO4JRM<A93N}Ki!A3-@%|9$nK!K2DqJn)fzaelhi@+O&U%UbC4U^?!0r)dS^Fe_Q=
zPt3{I&`CR{2Dm^jqdz=?29qy;W{?z&h+o&qckGl$cOjb$esR5AiDkvTaE``tP5KrY
z%4#n4eLg)69<YsmcG%&=_?gouhK%^rg_@a4hBDE0mWQQ`wx_C6RhWq;W9*(3?Q8V#
zU&(;0$=5A9cP5<o=As!WNxn<Bo4X7&GrTHw+0vzTMKSn0_-)ZesVw8=^J4B)a}{oH
zM(nVg3k~!i@*aX1-d<Bx4e@XN#%q`J(n(htdEK0f{=9_Jj86>sBGLTrMuw3^g$+62
z_9*olmqXHK)us7_Ppxa2SqiXBGE$<8;l6&^Mr6Qw>y_>8M+flJ(a~OGHPjXs+8F5F
z#C5LOPi!ru4ktE=@GgI%b)*csL$nKq^2(En9z9<b{5^8wv#7N?*__d~xFLb7QiG;t
z1@gzmwa@A4Wta`_u`eatx3lYi8aTfO&fg(q!LHGFnpzF9tg1snSLDH@X;9>{rBH~k
zw+_vqHZg!!J~%YX5U@!o@sKC1J$=bLV0EhYzUE#Ww={)b-vDYp{W#<wznk61yRnMu
z{PKBBmK@c@8{1pIRyHb4T{Wjc|D3XgU1GgctD4UWGMmIi2PIVaR(c=H{KsToT_6HO
zzv&PYe?C!O-jA>(0V^R>Zx4m5AP}%i>B~2yjqZxDj#p~Pw!khIS$>ki0mj586f8el
zw@^hShi_hLw)xziYv=pDAk)@nh%z!nr9iov!|`-`l&%p0FyqJFEs-XAaMJeOeM?ho
z{r=uj<NXMa`jMgMIa>SRal@B7r9F<|*5{x?_VaP}Jh`VkL=UQ%=QL+?)61abvbJ&v
z5xnbaHOZUB|1H$=jhWaHpA-&oaY5&EhS;43z6v(6HlloprMK};;qA8`#fPHC+P?)&
z+><q2A$raM0o2oBimHr+`)I)NjG!K2)ta2#{}RoZF&EPCum&bkw2)3O=fw@Cy~I6&
z2r@cm1m-`85O7eBizFEQTNNIU+3K0n5MDFYVC&=I(nUAv{l=zr+v2Ad!(;40QsEsW
zg;)B|5zuUHIemrObfCq5W^>+OVa2=dED3t)Fhpr8S+EM`YI_=r=n37tMFwmhD##~r
zbIV38Q7RYIc{0uj<+T!Wif!ZbKDnp%3f@=DK)zchWMlQ3m0<P-jMx{Fp6)r<;o;+n
z)`In`q}8~6d?q<bm-+6AdtNtsfF}iFgWd4`7V&bH*F33BwYwVw*zDX6;h5=7X5Rh7
zy+rAlIBx8q;b7bT6PL}?U;PVpDttvh*@qAJ=fZFqdN+XML>8!Y1_=vXIkYogOt94A
z+s)rbKe26HUtSenq8PB-IAbhMX0gNzJ#X|N{z@^y@o5CHY-Y-4CfV)q;iS#iw{^Xt
zbKwO`^yI8Vl__L3>3O60eb)zNy`dyDjxGEo;rN=Z>gxJg%5)6L%zqXizO0J-Kz7EC
z-Y-4q9Ro`^L4Wl19mEr!Vx-c86_%7#z1ONNEG=Lw@D_Km$?B8DBE@WE^VRW_9YVwa
zwMy@tFOlyFxRJYCuMJGsaz`@quJ?S<rM(W(gNI|d$eR)Il<oqRx`K{nS_R)-G_rN3
zr=&8uBhDQ15}h6KN6JwE=5>4p?5BC^oc>DC{)*Ip=HwUjlZ~Rmo3lmo34^OoZOQe+
zaDH?f-D#<J*T=>I5~Zd&O9czw{J#w9@jq{H&T};)*Y`btW9eU9Oe4oC#cD`GAewhh
zE|F~#jZW~q3wqN%f}(Qg6o~**>DlW(-}&rmS1SANT<0Q5O(8&}3=d{DCA--;CW8>r
z(a`Zc7PVco@%f@Q2AaX#n84m`j3MTlyymNi?k)rI`er!M7x14oIh}SNywFJ=?+2kj
z^i~2ygeC}ZmC12nom;#uBl#A{i#;_<4aLxnu+j(7Fex=Xz2Y(Vxe)!3?x?ghyQ(?8
z>qJyk)P{zJ$`bmSv>l~KCp|qqTiasb-d$<xmQ2UQyqVEh<l1p=TwK(P;5<!9N$Kbi
z`@uL9I5fNI?V+Fe<XTa{caaz$P9i{gs!$}kQMWe+S3=p^V6d1lD!kA;f)4&3`pWJn
ze`@KkU%x|MwwqVwWM^xYXz;Bdz(~NQ1}H%0zF6<@<HrxX+u*1u?CActCmuT&o>^mb
zC-Jh-T%D5IU%y0$+vF!%TF#?*A8OjtR}?nZ>wGWO<!p+|dEUE(Q13fW%#8`Xku?;k
zv2Xi5()++qLlJ5@u6=WJ!~FCoDT%0PYPVH4esCy>Yj3u~l=*3Pc2=v!fMqKw%5Tbg
zsm1H6_VdE&*%=0zAOR*OtK}#~ytGA*sug!~jvz}&cjhMs79Wy#?L5L4lWMAISyEXZ
z8(};qrly;VzrPZrF0gRVpD&Wcsuo~sMGS->$oYImDVHtK<Kef`vS)Gp;T;nb^YNab
zc~G7vy4xgU;H|Qbjx{U6VdGxu{k`{$FoK+df{U^B{;%fd=J9dWer#h;&&Dp=gvdzB
zc1E#G`Mf314VNm_+?UJAmP0iyR}0=dp`igZf|!K8K4Nx`j*f31GZt(5)Kyi*z%u>j
zRhyfe3Tc9KX6y~DqXc16J4a30+S=GKqvWB>{i+dJK{7f%KJ8oQk1;#>v{B^E8*vW)
zZtuiJ3SO4jU4}U&E_z*u1RTLGDU^@`J`7_B{xPpQH)XQ73YV9W=^q(!n^NHC;n6Ib
zk|h~@i$Xa5B3JGm4UM^(nY$z-Hs=6c>;OLW3W{_-!SEv2+GSU``WDFYA0(V9BcWs$
zzedYmfuHUc%-Ch_Z7KtbHHzAeeuWDzi=CdHs;a8$or09I#+q+;i?Ab9T-?M5`uijI
zxu&7F>Z!~e91}Kn799qH#u=21hTi;dc|TH?|7x7BkD8E$q;=)00LYY%b%@{hAUe#1
zC#Rti_v+}^xJX5>`nV`yPq`j0FBrEice0bC<KjvGcm&^sC8t!@SO}gPrYGFuhX+%9
zi){LCGI$b)>WU{#E(6bF*}(Nw6*Z|qDF@=8ZNS0sxSZ?LJm7fgsTmlgwHs~ww#v)P
z$M_~W8yjZ~BI|22;q9=b{P`n)gK_b0KyQ2z(snYo<Jpduaa6bENm_i>Lk%@v9U%)Q
zk~unhzc@DLrVWJ3E~WjklgYiPz?T=EE$8AI`U1Ga=2Z>eLp?UKa&l*xTyMU!Kb6h<
z3LX6Y>fVlKJUd;unuK@6|JTdwwLUv+i__>RDmt1v2$}NTyLTQQ9-o428?5KR!0p-0
zWI52o6&8##J@@pnwl19EBFGFC14uzyG7j;CG)zpnj`thB?$i)Egm0CyU1;V%c-#ZS
zSOvSOfn^0+JNApt@9*3GSc#pr<&Gz5IBzh_oA4Nnd6)SId_MZML{CtJj#U&Uh9W$}
zZo6ky#yg2w168>XHF#|2)Q7+#!L5RKa`^fiQD3Ub2;1i$sN)|$7fYM_VuAH+XMe(>
z{e6-;7Tb2o&sgEvf<aR}Ixl7dB_}LfZjtNq;v6Y^-QzntIu0?ctXHm7ZmEwP@lN^z
zI-eIbvq3pf-`&-vYoXYp1Pt-yqA)`J+EKV8?`|ap8%N3M!j(+hD1HgGSw%xb<7y&L
zF)!LzOl@Wvv!?B9?6oonJ9{?yCy5w`_=YO;WlRyVZ7O?)_1YBl!q^?xWE?6abByGV
z;uo)JqGbkzUYl`2U#2$JG{LX}4a$@h72~e^n#y_202dpqvxwL2#{@6Rm1wZ&UVlno
z7K6y-+qu4aI*ut+cSYN}K-;fi^KDFzlG+n^g%rTqQhOK267WJ+R#q>{6IjLDH1ox|
zZc6=Au@W`G)8=5h4OgtSB;1g#ySuv|dMK0@y5D@5$|!$-VQ>NLO811Blppc18fPRH
zUG%r(cYt2y%kmDKkha*kI9K};gPov0OHQI4X)G-8TXt2RE>-}<(I`(vefHh9Hk|}*
zz9}_UNHc{^T-AFiA@Ci60>e3yhf3!&=z$Bp?!iwwN8Z|!A*)w7jvttO?GUIJ_n3xy
z$0W_|bKcMw$ogyFR{WFElIVyCip)_mtDKk6(6}Zr^WUwlCM#oRSK94gU%!4GM86kw
z*`3T`fy*ITKF0yPl9@1RKF$1X+MqcrL2yV&Srjo4YTw!A1Glfqm6l?_xqD(Kf~+u~
zX~j)>7F(Gg*Fje?{>fU@2}7wiTDSAAB)BO8X=ecl5$o&gdcxr!ZXdq3@DDf(DkKe=
z7fsDSW=mAE6#^3x5)v|d1dq1jrNk(Gn4cMH8ed2WZ~N*P3xk>MxVhMq8?fp}0`O58
zct+(ViK34ZcDdG_MgmWQgIVkF=NuH9gtT*}_joM<Ob|FA<k_-p$!WLT+yLNDWwMF3
zc4CpRY}t%lb7je#ZR`Gb^5h|!lhzXeKMfiSS%8elQ~FY`);_H*eRQN$tSBkS+p~w-
zko1=-goL96^6OhJ9sCSBoVgo(f3?z=xn_^57Z6500<hqz85Il5Q5!i<quE+Y_=I)M
z+}xb-G|CV58CKUAJA++ne|)jYG&HuA8QG_nHgeaI5h|only2i19ewtx?@OrJc~jPC
zFJCSSP0ejmyJVBIoJNC9-=_H-Of}(Pf*Zl}EVPPA?m?@8toi%Je_@jJZ6^)~E=re8
zk$-84s^%7luwKCkFb4koao$_M;!YmgG&OZ{a>~&we;V)hF3~6|qDgd9mXi85@(PG+
z&hu4H<m7C&<$dpdRSN_`YLO=EWX@bri4Kz1qAlG`cK@a!jUUm5%0bWba&j6j81)Pq
z#zpe4PY&|B247_7<lKxa8v>Yyi1eb^-N9F)el&plo_N1;NF!(IK-@3uUOaf+;zdz{
z0c|NWB(Cf51zFzA-qP*QPEtPgya^dW@9gsOQ6tumd{shhY-0+0qyTG^asC90!cY5D
z@RgZus35mJUA^goaZ+~kmJQ=I%FDcdRAwQemZ~amIXOAPT}EU(Qnrm;X*=NDu*+6h
zHZciP72^{VcRCfq=_V3ueV6hZsw{%Zc3h_}=-XCXN1z_tOKuk=@}}Yzw44oIQ%24J
zUD;?pDF*_!QY&=qAB<dmyTt}KGJEVkxUG1E0H%gba2QY1xOtz33TLq+Ey{9qM(kt<
zC~428irQT%UisAP8V&&99M43@#5fKSkc>HjM@yF><<D>Hdp9clVzzDUa6TdoWAALZ
zk6u=XfLTRVbv%-u3@PACM(gR?lof@5z(Ty;{Wt_k5unQ-zQ8f!jbNbRdWQT3=_VgS
zG;%t@;(pZk{(v>V=08{&UH=#?WpFJB-=9Ku{>f6(oH?@>9UU#1&y^{!c^(qREhHj+
zO!-@gfd!pOU@s~{^}kFU?ND-}1FR2LLU5(^8?>sKXZ#!olbpXw#LgZ7(s}2->pk;4
zdE5too|((#E&nmpo_3tW2okBRj#xb_y3lTuNJnYW?^!-PNJm1xhWb<SbQ_)#BPr}_
zwI}}g9iwfUfoWEU!?f~YL>2C%shqTWsof?w{b@)CMYpQ#?6B!8pQw^Qds7gL%Brdy
zy^aKcfXB#gW?HBsUq;|IV16nYUhCFq3(+Tm7ZiLOmC?F={ra>QRbgL|!osd3epYLz
zaWORX6(l9?Ao{HQJG<Q*Jfcd~YapDulmJ17Q9uN~KFDx2_d2Na0p9B4_Ahe$Gq4*x
z-`(Tg(bCl#b{pqOqe6(ciwj9+sMqU#@}}dRPdTdFv}jn;#COoS2Fl;h93e7V`rBnL
zYK9uX@A}P5fcKqj4nC4FaS|!m*_GD4;y<~h6qX=Vl5O_6H^orGYsS2N-1E-PY2ARf
z*^iRSs8Cx8{#;1KUize^wLOh5@8IBoogP`2op`zNrfLen$_<`2*~WLq#eiF#ZvgNg
z7k<C#6WJ*rfMdn&7g3?bM5;YrE+EMMvWxMO^)xe2T7s}4E=v~d>8oh?nLHBh!_qpz
zNrw8;e!bK>>S2SObCgcMk>T$d$Izx;lRamCrKJ)a9GuN&`H(To^P45q@9e6hUjs|E
z?wys5{Q3ehom<}>W=&|`1pJ5YX}%vg34UA5+ScCR-vbGP+X(&Hepd<*WIe+3V-LQ_
z^hAV=27Y^e*mj&a`6sqWlKE>|5b>>#&tcc+c*91wgYW&Ootah)ei-FiOn4zV#l`!(
z0&?{~dm*z@Srre(n`&sl-CQr;m5Yh&TXI{jJo+68s3O2HkA^dxT`$tev4M>AA@Q;9
zPbirJHI}raW96J}+*9$+CGDC2$l>8?qbpuWw|Ui^E%#1{T;4?g8mX+EogKge<#j?d
ziiU=VbBh4}u)H|O@m@MS(d`g$B>?=FFN)w4gr1%*fBq0c1_K1(3^Q0Ni;XCZ-Egq<
zfdZ=MtpuZ^KGWv|S6-HS>(p2_;picnf)|x@8K!{n6B-`;rU7$uD15CuZ?fcx5Pnf4
zzxNy41i>yNMXDn0nPC_Z*Qp}n&oi|IjXPfGT;w#{-3Vuf#{WQ>Db^Acq4;eGFe$zT
z_VW#fKryWBQ$~Q#Zjy_2Vn(N|Y+9I^eXs3mikDSTh@IL9`ug?72(wgtTpZ0c5Kcqi
zNOisD{^O%}EcRVcdF5)s$>y5~s{xK&G-jfpg_iq;?-#K#>l*fAdJH?Pp9u*GNlCJu
zfFu)eMgKA|n#xa%vMp$>gZbnz%uH7;&2y30>94#FqKeeZI}G*a##?=W!%E@1p2itC
zVR)O>YFlCZM^Eh@QL&sHx&Y)8e22{{B(y}mV#7*Mtii9I8JavbJ%`7nJ+(Ma<w(hS
ziO%Z{trp9u-?o%vSW#Y@|JX?})c02OdvjNl+t`kCC8;HtJyDSB-GX_Q(A|EOV;aH7
zm=jO*ppEWWh`RdBcRiF#(Wx)=6|PTDoaGw|E*x%9Be&Dq9|F-^hI=TjT>^76?_Q#z
z2{n}zber@K3}i+Ej0}7+f8o!<0B8*8iop%eDujVzCpS02Tj-E1kKa`RpS9PQnjAv~
z$<q>t%=wrkJ^?uyd!i+S1mVoxdB}l3%SDkgo#Nv3UR(UFI^7#Uh-=fV36g?WQut#2
z!|iB*?bO@dyh01$bn@uA+1XuH7(w6Jg}0B#1~$t!(F{<wg1%}jyLNBFSsbi17qtfG
z!tdbcMn9SO{Dg*A%-I6OQX}9K5HSA4ThR=-M+1Ttpc8X(p$Sda734j&%di30P0Gtg
z_2%2zX9Z3IJ58x9mC6}pY$$1CG%tYmW&#QHjEr*Myj%!hA+@_<QV-OB>s(`PZT{Ou
zpOMZp`=E}T+cl3+HkOZWDEQQuM)eIOo;LwDH<vxrPfSdFbrIWEU0v<(4_~6eIMO*d
zG7@i#ajY1*Rz;N=s;Q$}zLR|9`qBU;=qSQ&pL8^`?Y{o+&w|WQ^MI}{2~?yq0LX!?
zPj%ig?&nWsWo3#jTw6I=S%9LMdAS33Pc38-6YMQ9H?sn0eOkw2ydG*JMEY92Prf^2
zEZpixc_+V@)Pm1Fh2)wC6E%vsh{7sKNzP1_e?Bem;Dt!eqAK|6eOz)bKAo(bIZZWb
zV=f?lqv|1jr1*f7Cw9`+x*nO)BK`F|7Z;V8n!3}ZqJ9J1mV&P(E+*!WT*tP{%c2ue
znw>3?H-TDTMWB+ayGu-DsMT25`eEC}Ho5ZwLowLF)wiwSKY`GeTtom+G;80ohe@67
z7L@_VS$}Ca_E-TJiMT`~IUyl`X0HW&t_lPY`~&Qt(a~9BmJ+&xKj<c0{-;j@WE~y4
z`GtPI*2rb%@#e9oN@<_*k-`^=7~<$PI5eanBjd1UVQyhD=n5+E!~XX}BcHIUzfmSs
zFYv)_JXA3c$2vtoC3o-feEDx>SsP9>X1IK)-S$L@1w(S-6^qbqcSyitwj^q)j}n4r
z%RUcaw50&$uSP_~#6@G4&ittwMN`%_20Hi#jiA&ab2%j?7G`F=t;n}3xgoX5ZVxAA
zlK%MqE_xCdbohD<xxtkuNwas<L1U#a0E#ta?sNqqGhl-kw;LZHCm{EsFC&v&NHg!6
z<Blbi*LN8A?72QA3hJbEq}1ES_huU7qINw{v=~Us?8G0Ls2+XDqj#LGz&3ai7_z>&
zY#1_N+XIprHie=0XmPD}MG(veOdU?&xPG0y0kF8<a2?mXScqkH-T3d(R5s=VQ#(3w
z=OBCq?Z!qx0{SriN+ow9t}PClpQ#GNwl9oDrm@i#pDcZt1q92gOGxgQj6sfwgvuB3
zef|9>i9R6U_Djw}qUa|2%`2?-@(gY90pl$$<rxse!j*i>td)jO4mdfSKPv?QbikEX
zlxK5m>u$DXg_zbD3%uCZ>~yqSvxms?wXkB%V%@9$=qz2J`QYpfmy`P~4NY!Nj?4Yg
zQj0aK1fbk7Y%QTSG6C_fZUR_kXWj8`5};<j1Hy1Jcm6uQirvG@rU^c$E9BnfT}#K0
z3JM2C{E_A?wAb8#<`x^fnXF$|cElqSv-2}9ZW_4rK&X^p{yL3W1FoDdaJ{p31qwuf
zJkQKOZ|T0>CqPZ_Hv4VlQSs~|xux5Ljo_68VFtL&*X`*;#)>EJl<c6{=MbsP!0&&!
z_ZAVz$BylXBAbcAdMr8FC-IleSP8Pd5dm)n=+ir4>8iQ?qB{j_aA`?CY~uYwD<)th
zg>9b<!}6Gw>+p*e8%1B~vjB~v7TLV?#KeAOLuWNb#c%*xPl-7=H~@-}V+iV(n_;0D
zaGoh`iBtDL1TvG0ZL(<xta0cO2eQbGh5oxROaQ#&56*$)78?hLp4|ED&_GLzZj)#C
z;`Y*YFA`j!K%-`5MXw@7VPP}OqVs5OlMLhlM41Q?i%Y%KhD-lf`AABw3+i_3*&@ux
zml*ZI?PHt37sb3L=kJZu8kl_p1E&?J3KEHo)}L*3tM7-BoNB1>#dOPWf5&JAwe@nB
z*49octvvXKbSegX9kaZzn0V@c0B!qUh6QKe_dJo!=Zslquh92f#BtCJ=q(gJ-Pqi;
z22jQOsTGuOn<ja=yN`^O?J;bT-zOlU28yXDE0>%0hLZ}ozIpS86|ihfS{n1o!F}b3
z(fmZ{WE*yg#*R`t9d!+0Rl51p#MMCi`{8951aX-C+XmVpi0+d@)r(bz@v<*ov5{<K
za|l!Mm&tDj^m-lxaOa9vaGNo$zXhc>R^)kyTMU1BFTk9V=>WeiyyHgGXs&hAH(M4J
z6$NO8nV}ek&tiCEVUFbX`y^s7WRgY}9gU#L{c@3NFF+foR(K=omM~=gBVDSRCBk_~
z<g70gP!$Eq6Veo7ZVXA#d)ILx8vlb-WK+_|N*m%>1$^^;-<3n>ab-B?FloG&p+A2n
zt!qf{<#uQ}Z+<JTN+dpQmed5U9L>`@W6|Lv({^)8UJssa%Z`w9k<3epBaR}H&81TC
z@ilCW=m=JNy4=Y#0|H^p3F3lmn|7Pbc_Mpkog~297`CXrOB}t7r|gm#{f47_g<_eD
ziGEG&WUoy8UdXe+0Y7exMs6@_Jg5MeA;NjyRnh|JLTz(Tb*UHXoH`)V`1Ev^6NWnd
zG_X(3X35e(5f2jW0NtCHfhDbLfjLD<NxHyg%1whqCjWjCEdIH=jwTkuJL4Idi}s5e
z5M2O(diyxOzrWAi#&Ft~hLn?&W6-$rRz+&fo;Q@GjL+pZv@g&IL-_!zY=d#0bZHM;
zzX6J0Y%d6Yb9tD-#fFB40uslecSp{ku3X|xvx69piquJO8{TK0BkX2O^c8#`Hum35
z;WyDvK^%;a9}tl2amfe~*9#?09G#p5crW?`0nG2Z`-%f@EILnLdDv+g0urJAWUs01
zj^>j-O_GPge9v@vP^su`10VAuMX}EZqMfU4R)SZ{Ttd3rbWYX(ATh<HEju58#G9&*
zEJE)8AaUr9Xn5QZp?)6$=?A2rIbGo(GF458-6oZ80{7x|7z>j}ONPpJMwY_bBk~2C
zVh(<KM<7ri+dP`8;hL~PsE?8U=3{1I(d6wH0*G94a?#fk06Fhk_=W@Kf3jKL(L23+
z;`8lbICVKZ*3==JtVJvUWL<R5X~EhnaU>8z{kbC3gIUTU#zjli<m4y7b3C$N{a{Z$
zR$L1*w0kl*mU}oB8hfqsrPYDC+X92B;M)I?*iS5@T&HAQM8*Ef_a`9VkR^@+Nzlib
z$Sg?f!p&tPhGg3$4%Kk@<n=gVVtAa-C#Ro^B$z4ExlA&wnK?e~LclbeFjybdv({ea
zZ&v}s#-I%edQe~dZQx^jFAdO26Ya>G8nI8$?|ed{&qu+&!y|2rL5Tf_<8<;X&CL-H
zy+(|cwVigkv$~IXR^N<ANYBWrT!~uFd5c<+jg2D1%BUqIhX=VU2JpKF>K9gy@&f<V
z0{RowTHx(1R0ViR!n}zFCfcLpG1<s6ryv~<qu^RDiGw0qEd%J^A3oi$;E-Mb?2_T(
z@WpspKfosF9?%uol{nxf6EBi$eJ?lb{0(<;-L48EP)`q>7VXU;!zYmKX}An`GoG$z
z<%$-MUa(p`I^`<)&AWm9YvYmKx)q#z)v`wBdwFjRtl{&U&U9bTLzGkj3X}+@9e|Nh
zJgmEjuoH#ZC0+aA0zN)|WG)$V6ER^iOk}A29)K!cTjg$j75|jtr5$fGrLl@!{ziAv
z7vn6|WmDEwRaHV>(}!B&M@ayzf_XFgud?Kw<OVx(Ad>)AwGQiwPd($f4*f8_W*s;C
z3j)j!08Df(kb7FwM9QO!-yTqu_K$4o-V_zBEJ5?dV0()N8e|E@pHa_n4!YXvw70Z`
zJ>6h$Zf|WICn~o$dcw})ut)bU>^$|3<^x3+>-<{q)u(d+tzIfC(p~?_VWUUpi5DhY
z!pOr@S6nQ=e#DhL#7_UkRd!`r{^X(U^B`aV#5Otgd#c^@*H|5CkHn34e=nMTl*5Bs
z2jUG`4;D>5IH0MkxQiP-AE>qnfJ|UN<Fnxu*_P^aX)?Z`l&{VGhPdSOXR4XQ@5TW$
zZRHdnvVf#ehvX9IeGr+m-LQWC;*8}#un9{#6H_vJ&f1;@Ec=iD3A2$Q>&|iy=S#%8
zB(BWvK&{q2C`IJn<Em9$Y^F%I1{O%0l|_a7vfJ<1@r5ZFps!Hj_wl&U{?)E^Y=15Y
zqTL@vSFV>lVKy6V4SVvgHL8d_&NO+V`+~P6+6UhrO<vh3J^bc+F6e46Sn!?hCb=P&
zO&Tsboc$@ddV)d!5ZDiPj%6XTB=W^YJi4sC{jWk>SUX&6v{N{(kr8x@PC5xykxDvs
zEQ?+yW8)Jpj_3=VST7g()OsQ>hoC9^T+!{ds{=5(C$VZvqI9@?^d}%iBO@Z|T|T{5
zxx?=s`F@NB6qpq`4HGKv9=P)YLdb!7{psoS{Dnx&5q=}HI>W@7(`~nu;U?r8;*|~$
zzYL%%fopnS1=Tv70Na$3629r3Ir6!#SasnO0PmJ;lr{ZLUn1xG!|U$93cm2%tV7Hj
zY<L8!pVVl`5hPwWVKx4mu&)a}BEnT!$*<p&Id4toWBJEx&3}o4&ZOs}JvT)JP3h+w
z0(V%=DWtE4_gA{>7)QYXdK<SY!<(bf6n3iYy1u|^ONauHeNK2r{#VW4u;(=xFmT#+
z1}bL+MA*%z-Fcm20(EJSdO#4W;OKaOmt<}X4ygfxN9Emlc;Rzpyrx;C?Wsh28w*1=
z$8n6qD&V%)b!{aaW#{1%=oYD9@oNKk<96Sc^NZ&qw%<7P@OrQZyM6DdB8ZlDS-5rZ
zNs!(e*73m&#o${R$=w$6)ZI23&=Eyl5WGPf{};yB?aO5^*D<?t&rpy|ZbFpeZU|$I
z3>hm>7Obdqhlq16JvThORb3gaH|pOD!%vndZD^er&fVI||Fl%{p+*(ZcE(3n)2Q%s
zhnCrEyv6l(IfUSWR~Da$=Xd^ia$Q}^WaNz@AtDuP-B;5vO}<N?o?ywR^94F|3}I9?
zKrnA~!$I(Su06X#%I=PfAd)L9?rReTok&-1YslfRLwvou%-ZEHAQtbnal!vJnq)y-
z_r1NAXxjH||4!Z=rrC!8%`0o$V}uBHSk1NyxL{pt^l=uTO{eF*VoD)<Yo*k2Mk~;D
z<?ZNNnJj!Cn}Kt*%clifcVT!#?-h*Bot9<ue5fJ%w${GJ{d)j-QO#%o67M+TS)<70
zmF$1Y?ghp!kc-UJa4EfqmMt%f{cF3KdC+j>k8g={gUzBw7BNu#hIX&tV673=`O3vW
zpD!v!Y<iz$OJ0WObn6fhn1N{qi|<ymM%wP<SJlA@ch}!}>6afvXSzxWAN^KyT2B5f
zYeqm7kl~(tdah?Mnx2jik=pm@WuRBtKip(5U6d@#(kI-SSHZ2T#}*62q!|(aI+wJH
zhFj17%a`7Tk>(_)$5EZcx8k`S9jrY_GP^cS-1MaZtwuG@IDn_@Waj>jLzFWtYcaxU
z_y&|Fm~?qZR+M(z8G-hNp6i{8FGP`OPqsFufEpm>#VGXLt<^|%SK`JL6!Ak(=wGkI
zaL7LHS|nr!>FZ|_j`yNDcnvRo%TpCa$^-v(UZvJnTp#I*+{qsACZ@-+yT%L$AlvJ@
zKh10$;x^+wI(p6&4nTI80AHLyeeR^N`JA!p!eO<ZDs$T;<V(<YAn=HKaN$1_xHekL
zViPd|^dhO`iVvp<)d7uS&w*3(&-eQFZw(QHFr(>LP@`rV4cM-w3xDp>vU}zYygm}J
z<WiRr%YS6usm6tBMpmNU95@^}ILEm{{*RlQZ$zjEL?mFc1=dyx29M9gy$mpVV$sdR
zuE@b0^y4;zN<kcR0zN4&eNomf`J`!Qf|YfSDy(qMcdbirP#S2YqhOS6ce8i_0xdtF
h`2GK;W%2O{bYNU{>YHeN0`ymcWF!?OO2v%){|_THq09gP

diff --git a/docs-vuepress/.vuepress/dist/manifest.webmanifest b/docs-vuepress/.vuepress/dist/manifest.webmanifest
deleted file mode 100644
index dcc89dfc8b..0000000000
--- a/docs-vuepress/.vuepress/dist/manifest.webmanifest
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    "name": "Mpx",
-    "short_name": "Mpx",
-    "icons": [
-        {
-            "src": "https://dpubstatic.udache.com/static/dpubimg/1ESVodfAED/logo.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        }
-    ],
-    "start_url": "/index.html",
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
-}
\ No newline at end of file
diff --git a/docs-vuepress/.vuepress/dist/rn-api.html b/docs-vuepress/.vuepress/dist/rn-api.html
deleted file mode 100644
index ff2acf3a1a..0000000000
--- a/docs-vuepress/.vuepress/dist/rn-api.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>API支持列表 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/116.4a116234.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container no-sidebar"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="api支持列表"><a href="#api支持列表" class="header-anchor">#</a> API支持列表</h1> <p>mpx转RN的对标微信api目前支持及部分的api转换，目前支持的能力可以参考下表：</p> <table><thead><tr><th>支持方法</th></tr></thead> <tbody><tr><td>getSystemInfo</td></tr> <tr><td>getSystemInfoSync</td></tr> <tr><td>getDeviceInfo</td></tr> <tr><td>getWindowInfo</td></tr> <tr><td>request</td></tr> <tr><td>setStorage</td></tr> <tr><td>removeStorage</td></tr> <tr><td>removeStorageSync</td></tr> <tr><td>getStorage</td></tr> <tr><td>getStorageInfo</td></tr> <tr><td>clearStorage</td></tr> <tr><td>clearStorageSync</td></tr> <tr><td>setClipboardData</td></tr> <tr><td>getClipboardData</td></tr> <tr><td>makePhoneCall</td></tr> <tr><td>onWindowResize</td></tr> <tr><td>offWindowResize</td></tr> <tr><td>arrayBufferToBase64</td></tr> <tr><td>base64ToArrayBuffer</td></tr> <tr><td>connectSocket</td></tr> <tr><td>getNetworkType</td></tr> <tr><td>onNetworkStatusChange</td></tr> <tr><td>offNetworkStatusChange</td></tr></tbody></table> <h1 id="使用说明"><a href="#使用说明" class="header-anchor">#</a> 使用说明</h1> <p>对于一些api-proxy中没有提供的能力，用户可以搭配mpx对象方式传入custom使用即可示例如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> mpx <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-<span class="token keyword">import</span> apiProxy <span class="token keyword">from</span> <span class="token string">'@mpxjs/api-proxy'</span>
-<span class="token keyword">import</span> <span class="token punctuation">{</span> showModal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@test/showModal'</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>apiProxy<span class="token punctuation">,</span> <span class="token punctuation">{</span>
-  <span class="token literal-property property">custom</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-    <span class="token literal-property property">ios</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      showModal
-    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-    <span class="token literal-property property">android</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-      showModal
-    <span class="token punctuation">}</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-
-mpx<span class="token punctuation">.</span><span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'标题'</span><span class="token punctuation">,</span>
-  <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'这是一个弹窗'</span><span class="token punctuation">,</span>
-  <span class="token function">success</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'弹框展示成功'</span><span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span>
-</code></pre></div><h1 id="api抹平差异详情"><a href="#api抹平差异详情" class="header-anchor">#</a> API抹平差异详情</h1> <p>对于一些微信独有的返回结果，或者RN目前不能支持的入参/返回结果，在下面会有详细说明：</p> <h3 id="getsysteminfo-getsysteminfosync"><a href="#getsysteminfo-getsysteminfosync" class="header-anchor">#</a> getSystemInfo/getSystemInfoSync</h3> <table><thead><tr><th>不支持返回值</th></tr></thead> <tbody><tr><td>language</td></tr> <tr><td>version</td></tr> <tr><td>SDKVersion</td></tr> <tr><td>benchmarkLevel</td></tr> <tr><td>albumAuthorized</td></tr> <tr><td>cameraAuthorized</td></tr> <tr><td>locationAuthorized</td></tr> <tr><td>microphoneAuthorized</td></tr> <tr><td>notificationAuthorized</td></tr> <tr><td>phoneCalendarAuthorized</td></tr> <tr><td>host</td></tr> <tr><td>enableDebug</td></tr> <tr><td>notificationAlertAuthorized</td></tr> <tr><td>notificationBadgeAuthorized</td></tr> <tr><td>notificationSoundAuthorized</td></tr> <tr><td>bluetoothEnabled</td></tr> <tr><td>locationEnabled</td></tr> <tr><td>wifiEnabled</td></tr> <tr><td>locationReducedAccuracy</td></tr> <tr><td>theme</td></tr></tbody></table> <h3 id="getdeviceinfo"><a href="#getdeviceinfo" class="header-anchor">#</a> getDeviceInfo</h3> <table><thead><tr><th>不支持返回值</th></tr></thead> <tbody><tr><td>benchmarkLevel</td></tr> <tr><td>abi</td></tr> <tr><td>cpuType</td></tr></tbody></table> <h3 id="getwindowinfo"><a href="#getwindowinfo" class="header-anchor">#</a> getWindowInfo</h3> <table><thead><tr><th>不支持返回值</th></tr></thead> <tbody><tr><td>screenTop</td></tr></tbody></table> <h3 id="request"><a href="#request" class="header-anchor">#</a> request</h3> <table><thead><tr><th>不支持入参</th></tr></thead> <tbody><tr><td>useHighPerformanceMode</td></tr> <tr><td>enableHttp2</td></tr> <tr><td>enableProfile</td></tr> <tr><td>enableQuic</td></tr> <tr><td>enableCache</td></tr> <tr><td>enableHttpDNS</td></tr> <tr><td>httpDNSServiceId</td></tr> <tr><td>enableChunked</td></tr> <tr><td>forceCellularNetwork</td></tr> <tr><td>redirect</td></tr></tbody></table> <table><thead><tr><th>不支持返回值</th></tr></thead> <tbody><tr><td>cookies</td></tr> <tr><td>profile</td></tr> <tr><td>exception</td></tr></tbody></table> <h3 id="setstorage-getstorage"><a href="#setstorage-getstorage" class="header-anchor">#</a> setStorage/getStorage</h3> <table><thead><tr><th>不支持入参</th></tr></thead> <tbody><tr><td>encrypt</td></tr></tbody></table> <h3 id="getstorageinfo"><a href="#getstorageinfo" class="header-anchor">#</a> getStorageInfo</h3> <table><thead><tr><th>不支持返回值</th></tr></thead> <tbody><tr><td>currentSize</td></tr> <tr><td>limitSize</td></tr></tbody></table> <h3 id="connectsocket"><a href="#connectsocket" class="header-anchor">#</a> connectSocket</h3> <table><thead><tr><th>不支持入参</th></tr></thead> <tbody><tr><td>tcpNoDelay</td></tr> <tr><td>perMessageDeflate</td></tr> <tr><td>timeout</td></tr> <tr><td>forceCellularNetwork</td></tr></tbody></table> <h3 id="getnetworktype"><a href="#getnetworktype" class="header-anchor">#</a> getNetworkType</h3> <table><thead><tr><th>不支持返回值</th></tr></thead> <tbody><tr><td>signalStrength</td></tr> <tr><td>hasSystemProxy</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/116.4a116234.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/rn-component.html b/docs-vuepress/.vuepress/dist/rn-component.html
deleted file mode 100644
index 71bec22783..0000000000
--- a/docs-vuepress/.vuepress/dist/rn-component.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>RN 自定义组件支持 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/117.e45c1b95.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container no-sidebar"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="rn-自定义组件支持"><a href="#rn-自定义组件支持" class="header-anchor">#</a> RN 自定义组件支持</h1> <p>创建自定义组件在 RN 环境下部分实例方法、属性存在兼容性问题不支持，
-此文档以微信小程序为参照，会详细列出各方法、属性的支持度。</p> <h2 id="参数"><a href="#参数" class="header-anchor">#</a> 参数</h2> <h3 id="组件定义属性说明"><a href="#组件定义属性说明" class="header-anchor">#</a> 组件定义属性说明</h3> <table><thead><tr><th>属性</th> <th>类型</th> <th>RN 是否支持</th> <th>描述</th></tr></thead> <tbody><tr><td>properties</td> <td>Object Map</td> <td>是</td> <td>组件的对外属性，是属性名到属性设置的映射表</td></tr> <tr><td>data</td> <td>Object</td> <td>是</td> <td>组件的内部数据，和 <code>properties</code> 一同用于组件的模板渲染</td></tr> <tr><td>observers</td> <td>Object</td> <td>是</td> <td>组件数据字段监听器，用于监听 <code>properties</code> 和 <code>data</code> 的变化</td></tr> <tr><td>methods</td> <td>Object</td> <td>是</td> <td>组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用</td></tr> <tr><td>behaviors</td> <td>String Array</td> <td>否</td> <td>输出 RN 不支持</td></tr> <tr><td>created</td> <td>Function</td> <td>是</td> <td>组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 <code>setData</code></td></tr> <tr><td>attached</td> <td>Function</td> <td>是</td> <td>组件生命周期函数-在组件实例进入页面节点树时执行</td></tr> <tr><td>ready</td> <td>Function</td> <td>是</td> <td>组件生命周期函数-在组件布局完成后执行</td></tr> <tr><td>moved</td> <td>Function</td> <td>否</td> <td>RN 不支持，组件生命周期函数-在组件实例被移动到节点树另一个位置时执行</td></tr> <tr><td>detached</td> <td>Function</td> <td>是</td> <td>组件生命周期函数-在组件实例被从页面节点树移除时执行</td></tr> <tr><td>relations</td> <td>Object</td> <td>否</td> <td>输出 RN 不支持</td></tr> <tr><td>externalClasses</td> <td>String Array</td> <td>否</td> <td>输出 RN 不支持</td></tr> <tr><td>options</td> <td>Object Map</td> <td>否</td> <td>输出 RN 不支持，一些选项，诸如 multipleSlots、virtualHost、pureDataPattern，这些功能输出 RN 不支持</td></tr> <tr><td>lifetimes</td> <td>Object</td> <td>是</td> <td>组件生命周期声明对象</td></tr> <tr><td>pageLifetimes</td> <td>Object</td> <td>是</td> <td>组件所在页面的生命周期声明对象</td></tr></tbody></table> <h3 id="组件实例属性与方法"><a href="#组件实例属性与方法" class="header-anchor">#</a> 组件实例属性与方法</h3> <p>生成的组件实例可以在组件的方法、生命周期函数中通过 this 访问。组件包含一些通用属性和方法。</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>RN 是否支持</th> <th>描述</th></tr></thead> <tbody><tr><td>is</td> <td>String</td> <td>否</td> <td>输出 RN 暂不支持，未来支持, 组件的文件路径</td></tr> <tr><td>id</td> <td>String</td> <td>是</td> <td>节点id</td></tr> <tr><td>dataset</td> <td>String</td> <td>是</td> <td>节点dataset</td></tr> <tr><td>data</td> <td>Object</td> <td>否</td> <td>组件数据，通过 this 直接访问</td></tr> <tr><td>properties</td> <td>Object</td> <td>否</td> <td>组件props，通过 this 直接访问</td></tr> <tr><td>router</td> <td>Object</td> <td>否</td> <td>输出 RN 暂不支持</td></tr> <tr><td>pageRouter</td> <td>Object</td> <td>否</td> <td>输出 RN 暂不支持</td></tr> <tr><td>renderer</td> <td>string</td> <td>否</td> <td>输出 RN 暂不支持</td></tr></tbody></table> <p>微信小程序原生方法</p> <table><thead><tr><th>方法名</th> <th>RN是否支持</th> <th>参数</th> <th>描述</th></tr></thead> <tbody><tr><td>setData</td> <td>是</td> <td>Object newData</td> <td>设置data并执行视图层渲染</td></tr> <tr><td>hasBehavior</td> <td>否</td> <td>Object behavior</td> <td>检查组件是否具有 behavior</td></tr> <tr><td>triggerEvent</td> <td>是</td> <td>String name, Object detail, Object options</td> <td>触发事件</td></tr> <tr><td>createSelectorQuery</td> <td>否</td> <td></td> <td>输出 RN 暂不支持，未来支持，建议使用 ref</td></tr> <tr><td>createIntersectionObserver</td> <td>否</td> <td></td> <td>输出 RN 暂不支持</td></tr> <tr><td>selectComponent</td> <td>否</td> <td>String selector</td> <td>输出 RN 暂不支持，未来支持，建议使用 ref</td></tr> <tr><td>selectAllComponents</td> <td>否</td> <td>String selector</td> <td>输出 RN 暂不支持，未来支持，建议使用 ref</td></tr> <tr><td>selectOwnerComponent</td> <td>否</td> <td></td> <td>输出 RN 不支持</td></tr> <tr><td>getRelationNodes</td> <td>否</td> <td>String relationKey</td> <td>输出 RN 不支持</td></tr> <tr><td>groupSetData</td> <td>否</td> <td>Function callback</td> <td>输出 RN 不支持</td></tr> <tr><td>getTabBar</td> <td>否</td> <td></td> <td>输出 RN 不支持</td></tr> <tr><td>getPageId</td> <td>否</td> <td></td> <td>输出 RN 不支持</td></tr> <tr><td>animate</td> <td>否</td> <td>String selector, Array keyframes, ...</td> <td>输出 RN 不支持</td></tr> <tr><td>clearAnimation</td> <td>否</td> <td>String selector, Object options, ...</td> <td>输出 RN 不支持</td></tr></tbody></table> <p>Mpx 框架增强实例方法</p> <table><thead><tr><th>方法名</th> <th>RN是否支持</th> <th>描述</th></tr></thead> <tbody><tr><td>$set</td> <td>是</td> <td>向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新</td></tr> <tr><td>$watch</td> <td>是</td> <td>观察 Mpx 实例上的一个表达式或者一个函数计算结果的变化</td></tr> <tr><td>$delete</td> <td>是</td> <td>删除对象属性，如果该对象是响应式的，那么该方法可以触发观察器更新（视图更新</td></tr> <tr><td>$refs</td> <td>是</td> <td>一个对象，持有注册过 ref的所有 DOM 元素和组件实例，调用响应的组件方法或者获取视图节点信息。</td></tr> <tr><td>$asyncRefs</td> <td>否</td> <td>输出 RN 不支持</td></tr> <tr><td>$forceUpdate</td> <td>是</td> <td>用于强制刷新视图，不常用，通常建议使用响应式数据驱动视图更新</td></tr> <tr><td>$nextTick</td> <td>是</td> <td>在下次 DOM 更新循环结束之后执行延迟回调函数，用于等待 Mpx 完成状态更新和 DOM 更新后再执行某些操作</td></tr> <tr><td>$i18n</td> <td>否</td> <td>输出 RN 暂不支持，国际化功能访问器，用于获取多语言字符串资源</td></tr> <tr><td>$rawOptions</td> <td>是</td> <td>访问组件原始选项对象</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/117.e45c1b95.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/rn-style.html b/docs-vuepress/.vuepress/dist/rn-style.html
deleted file mode 100644
index 10589cd7ff..0000000000
--- a/docs-vuepress/.vuepress/dist/rn-style.html
+++ /dev/null
@@ -1,331 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx转RN样式使用指南 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/118.9cbac09e.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container no-sidebar"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx转rn样式使用指南"><a href="#mpx转rn样式使用指南" class="header-anchor">#</a> Mpx转RN样式使用指南</h1> <p>RN 的样式的支持基本为 web 样式的一个子集，同时还有一些属性并未与 web 对齐，因此跨平台输出 RN 时，为了保障多端输出样式一致，可参考本文针对样式在RN上的支持情况来进行样式编写。</p> <h2 id="样式编写限制"><a href="#样式编写限制" class="header-anchor">#</a> 样式编写限制</h2> <h3 id="选择器"><a href="#选择器" class="header-anchor">#</a> 选择器</h3> <p>RN 环境下仅支持以下类名选择器，不支持逗号之外的组合选择器。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 支持 */</span>
-<span class="token selector">.classname</span> <span class="token punctuation">{</span>
-  <span class="token property">color</span><span class="token punctuation">:</span> red
-<span class="token punctuation">}</span>
-<span class="token selector">.classA, .classB</span> <span class="token punctuation">{</span>
-    <span class="token property">color</span><span class="token punctuation">:</span> red
-<span class="token punctuation">}</span>
-</code></pre></div><h3 id="布局"><a href="#布局" class="header-anchor">#</a> 布局</h3> <p>在 RN 中布局方式有限制，像 block inline inline-block 和 fixed 等都不支持，支持的布局方式如下：</p> <h4 id="flex"><a href="#flex" class="header-anchor">#</a> flex</h4> <p>在RN中，常规的组件元素可以用过 flex 布局来实现，<a href="https://reactnative.dev/docs/layout-props#flex" target="_blank" rel="noopener noreferrer">参考文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p><strong>注</strong>：RN中view标签的主轴是column，和css不一致，使用mpx开发设置<code>dispay:flex</code>时，会默认的主轴方向是row。</p> <h4 id="relative-absolute"><a href="#relative-absolute" class="header-anchor">#</a> relative/absolute</h4> <p>在 RN 中 position 仅支持 relative（默认）和 absolute，可<a href="https://reactnative.dev/docs/layout-props#position" target="_blank" rel="noopener noreferrer">参考文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="样式单位"><a href="#样式单位" class="header-anchor">#</a> 样式单位</h3> <h4 id="number-类型值"><a href="#number-类型值" class="header-anchor">#</a> number 类型值</h4> <p>RN 环境中，number 数值型单位支持 px rpx % 三种，web 下的 vw em rem 等不支持。</p> <h4 id="color-类型值"><a href="#color-类型值" class="header-anchor">#</a> color 类型值</h4> <p>RN 环境支持大部分 css 中 color 定义方式，仅少量不支持，详情参考 RN 文档 https://reactnative.dev/docs/colors</p> <h2 id="组件样式规则"><a href="#组件样式规则" class="header-anchor">#</a> 组件样式规则</h2> <p>在web和RN下组件的渲染会存在一些差异的地方，比如默认样式不一致、继承的关系不一致等。框架针对这些不一致进行了抹平工作，但是仍旧存在一些使用限制，具体参考以下组件节点的介绍。</p> <h3 id="text"><a href="#text" class="header-anchor">#</a> text</h3> <p>RN中，文本节点需要通过Text组件来创建文本节点。文本节点需要给Text组件来设定<a href="https://reactnative.dev/docs/text-style-props" target="_blank" rel="noopener noreferrer">属性<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>来调整文本的外观。</p> <p>Web/小程序中，文本节点可以通过div/view节点进行直接包裹，在div/view标签上设定对应文本样式即可。不需单独包裹text节点。</p> <p>框架抹平了此部分的差异，但仍因受限于RN内text的样式<a href="https://reactnative.dev/docs/text#limited-style-inheritance" target="_blank" rel="noopener noreferrer">继承原则的限制<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，通过在祖先节点来设置文本节点的样式仍旧无法生效。具体例子说明如下</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是文本<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
-
-.wrapper {
-    font-size: 20px;
-}
-.content {
-    text-align: right;
-}
-/** 以上例子中
-web渲染效果: 字体的大小为20px，文字居右 
-转RN之后渲染效果: 字体大小为默认大小，文字居右
-*/
-
-</code></pre></div><p><strong>限制与使用说明</strong></p> <ol><li>无法通过设置祖先节点的样式来修改文本节点的样式，只可通过修改直接包裹文本的节点来修改文本的样式。</li> <li>框架处理将文本节点样式的默认值与web进行了对齐，如果需要按照RN的默认值来进行渲染，可设置<code>disable-default-style</code>为<code>true</code></li></ol> <h3 id="view"><a href="#view" class="header-anchor">#</a> view</h3> <p>background、background-image、background-size、background-repeat仅在view标签下支持，background-color在其他标签上也支持。</p> <p><strong>各属性支持的类型</strong></p> <ul><li>background - 仅支持 background-image | background-color | background-size | background-repeat，每个属性支持情况，可参考下面的介绍。</li> <li>background-image - 仅支持 &lt;url()&gt;。</li> <li>background-size - 支持px|rpx|%，也支持枚举值 contain|cover|auto； 不支持两个以上的值进行设置。</li> <li>backgroundno-repeat - 仅支持值为no-repeat。</li> <li>backfround-color - 参考<a href="https://reactnative.dev/docs/colors" target="_blank" rel="noopener noreferrer">Color<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p><strong>支持的语法</strong></p> <div class="language-css extra-class"><pre class="language-css"><code>
-<span class="token comment">/** 1. background **/</span>
-<span class="token comment">/* 支持 */</span>
-<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg&quot;</span><span class="token punctuation">)</span></span> pink contain no-repeat<span class="token punctuation">;</span>
-<span class="token property">background</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
-<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg&quot;</span><span class="token punctuation">)</span></span> pink<span class="token punctuation">;</span>
-
-<span class="token comment">/* 不支持 */</span>
-<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
-
-<span class="token comment">/** 2. background-image **/</span>
-<span class="token comment">/* 支持 */</span>
-<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg&quot;</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
-<span class="token comment">/* 不支持 */</span>
-<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
-
-<span class="token comment">/** 3. background-size **/</span>
-<span class="token comment">/* 支持 */</span>
-<span class="token property">background-size</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
-<span class="token property">background-size</span><span class="token punctuation">:</span> 50% 25%<span class="token punctuation">;</span>
-<span class="token property">background-size</span><span class="token punctuation">:</span> contain<span class="token punctuation">;</span>
-<span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
-<span class="token property">background-size</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
-<span class="token property">background-size</span><span class="token punctuation">:</span> 20px auto<span class="token punctuation">;</span>
-
-/ * 不支持 * /
-<span class="token property">background-size</span><span class="token punctuation">:</span> 50%<span class="token punctuation">,</span> 25%<span class="token punctuation">,</span> 25%<span class="token punctuation">;</span>
-
-
-<span class="token comment">/** 4. background-repeat **/</span>
-<span class="token comment">/* 支持 */</span>
-<span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
-
-<span class="token comment">/* 不支持 */</span>
-<span class="token property">background-repeat</span><span class="token punctuation">:</span> repeat<span class="token punctuation">;</span>
-
-
-<span class="token comment">/** 5. background-color **/</span>
-<span class="token property">background-repeat</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
-</code></pre></div><h2 id="样式参考"><a href="#样式参考" class="header-anchor">#</a> 样式参考</h2> <h3 id="layout-style"><a href="#layout-style" class="header-anchor">#</a> Layout Style</h3> <h4 id="position"><a href="#position" class="header-anchor">#</a> position</h4> <p>设置元素的定位样式
-<strong>值支持类型</strong>
-enum: absolute, relative， 默认relative。</p> <h5 id="语法"><a href="#语法" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
-<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
-
-</code></pre></div><h4 id="top-right-left-bottom"><a href="#top-right-left-bottom" class="header-anchor">#</a> top|right|left|bottom</h4> <p>设置元素的不同方向的偏移量</p> <h5 id="值支持类型"><a href="#值支持类型" class="header-anchor">#</a> 值支持类型</h5> <p>number: px,rpx,%</p> <h5 id="语法-2"><a href="#语法-2" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
-<span class="token property">top</span><span class="token punctuation">:</span> 10rpx<span class="token punctuation">;</span>
-<span class="token property">top</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
-</code></pre></div><h4 id="z-index"><a href="#z-index" class="header-anchor">#</a> z-index</h4> <p>控制着元素的堆叠覆盖顺序。</p> <h5 id="值支持类型-2"><a href="#值支持类型-2" class="header-anchor">#</a> 值支持类型</h5> <p>number</p> <h5 id="语法-3"><a href="#语法-3" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
-</code></pre></div><h4 id="display"><a href="#display" class="header-anchor">#</a> display</h4> <p>设置元素的布局方式。</p> <h5 id="值支持类型-3"><a href="#值支持类型-3" class="header-anchor">#</a> 值支持类型</h5> <p>flex/none</p> <h5 id="语法-4"><a href="#语法-4" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 默认 */</span> 
-<span class="token property">display</span><span class="token punctuation">:</span>flex
-<span class="token comment">/* 隐藏 */</span>
-<span class="token property">display</span><span class="token punctuation">:</span>none
-</code></pre></div><h4 id="align-content"><a href="#align-content" class="header-anchor">#</a> align-content</h4> <p>设置多根轴线的对齐方式。</p> <h5 id="值支持类型-4"><a href="#值支持类型-4" class="header-anchor">#</a> 值支持类型</h5> <p>enum: flex-start, flex-end, center, stretch, space-between, space-around, space-evenly</p> <h5 id="语法-5"><a href="#语法-5" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
-<span class="token property">align-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
-<span class="token property">align-content</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span>
-<span class="token property">align-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
-<span class="token property">align-content</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
-<span class="token property">align-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
-<span class="token property">align-content</span><span class="token punctuation">:</span> space-around<span class="token punctuation">;</span>
-<span class="token property">align-content</span><span class="token punctuation">:</span> space-evenly<span class="token punctuation">;</span>
-
-<span class="token comment">/** 不支持 **/</span>
-<span class="token property">align-content</span><span class="token punctuation">:</span> safe center<span class="token punctuation">;</span>
-<span class="token property">align-content</span><span class="token punctuation">:</span> unsafe center<span class="token punctuation">;</span>
-</code></pre></div><h4 id="align-items"><a href="#align-items" class="header-anchor">#</a> align-items</h4> <p>设置单根轴线上的子元素的对齐方式。默认会是交叉轴上的。</p> <h5 id="值支持类型-5"><a href="#值支持类型-5" class="header-anchor">#</a> 值支持类型</h5> <p>enum: flex-start, flex-end, center, stretch, baseline</p> <h5 id="语法-6"><a href="#语法-6" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
-<span class="token property">align-items</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
-<span class="token property">align-items</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span>
-<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
-<span class="token property">align-items</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
-<span class="token property">align-items</span><span class="token punctuation">:</span> baseline<span class="token punctuation">;</span>
-
-<span class="token comment">/** 不支持 **/</span>
-<span class="token property">align-items</span><span class="token punctuation">:</span> first baseline<span class="token punctuation">;</span>
-<span class="token property">align-items</span><span class="token punctuation">:</span> last baseline<span class="token punctuation">;</span>
-</code></pre></div><h4 id="align-self"><a href="#align-self" class="header-anchor">#</a> align-self</h4> <p>设置单个子元素在单根轴线上的对齐方式</p> <h5 id="值支持类型-6"><a href="#值支持类型-6" class="header-anchor">#</a> 值支持类型</h5> <p>enum: auto, flex-start, flex-end, center, stretch, baseline</p> <h5 id="语法-7"><a href="#语法-7" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
-<span class="token property">align-self</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
-<span class="token property">align-self</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
-<span class="token property">align-self</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span>
-<span class="token property">align-self</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
-<span class="token property">align-self</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
-<span class="token property">align-self</span><span class="token punctuation">:</span> baseline<span class="token punctuation">;</span>
-
-<span class="token comment">/** 不支持 **/</span>
-<span class="token property">align-self</span><span class="token punctuation">:</span> first baseline<span class="token punctuation">;</span>
-<span class="token property">align-self</span><span class="token punctuation">:</span> last baseline<span class="token punctuation">;</span>
-</code></pre></div><h4 id="flex-2"><a href="#flex-2" class="header-anchor">#</a> flex</h4> <p>仅支持 flex-grow | flex-shrink | flex-basis 这种顺序，值以空格分隔按顺序赋值</p> <h5 id="值支持类型-7"><a href="#值支持类型-7" class="header-anchor">#</a> 值支持类型</h5> <p>flex: number number px/rpx</p> <h5 id="语法-8"><a href="#语法-8" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 简写 **/</span>
-<span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
-<span class="token comment">/* flex-grow | flex-shrink | flex-basis */</span>
-<span class="token property">flex</span><span class="token punctuation">:</span> 0 1 1<span class="token punctuation">;</span>
-</code></pre></div><h4 id="flex-grow"><a href="#flex-grow" class="header-anchor">#</a> flex-grow</h4> <p>设置子盒子的放大比例</p> <h5 id="值支持类型-8"><a href="#值支持类型-8" class="header-anchor">#</a> 值支持类型</h5> <p>number</p> <h5 id="语法-9"><a href="#语法-9" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
-</code></pre></div><h4 id="flex-shrink"><a href="#flex-shrink" class="header-anchor">#</a> flex-shrink</h4> <p>设置子盒子的缩放比例。</p> <h5 id="值支持类型-9"><a href="#值支持类型-9" class="header-anchor">#</a> 值支持类型</h5> <p>number</p> <h5 id="语法-10"><a href="#语法-10" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">flex-shrink</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
-</code></pre></div><h4 id="flex-basis"><a href="#flex-basis" class="header-anchor">#</a> flex-basis</h4> <p>设置在分配多余空间之前，子盒子的初始主轴尺寸。</p> <h5 id="值支持类型-10"><a href="#值支持类型-10" class="header-anchor">#</a> 值支持类型</h5> <p>number px|rpx|%</p> <h5 id="语法-11"><a href="#语法-11" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">flex-shrink</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
-<span class="token property">flex-shrink</span><span class="token punctuation">:</span> 10rpx<span class="token punctuation">;</span>
-<span class="token property">flex-shrink</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span>
-</code></pre></div><h4 id="flex-direction"><a href="#flex-direction" class="header-anchor">#</a> flex-direction</h4> <p>设置主轴的方向。</p> <h5 id="值支持类型-11"><a href="#值支持类型-11" class="header-anchor">#</a> 值支持类型</h5> <p>enum: row, row-reverse, column, column-reverse</p> <h5 id="语法-12"><a href="#语法-12" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span>
-<span class="token property">flex-direction</span><span class="token punctuation">:</span> row-reverse<span class="token punctuation">;</span>
-<span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
-<span class="token property">flex-direction</span><span class="token punctuation">:</span> column-reverse<span class="token punctuation">;</span>
-
-</code></pre></div><h4 id="flex-wrap"><a href="#flex-wrap" class="header-anchor">#</a> flex-wrap</h4> <p>设置元素是否换行。当值为wrap时，alignItems：center不生效。</p> <h5 id="值支持类型-12"><a href="#值支持类型-12" class="header-anchor">#</a> 值支持类型</h5> <p>enum: wrap, nowrap, wrap-reverse</p> <h5 id="语法-13"><a href="#语法-13" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
-<span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
-<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap-reverse<span class="token punctuation">;</span>
-</code></pre></div><h4 id="flex-flow"><a href="#flex-flow" class="header-anchor">#</a> flex-flow</h4> <p>是flex-direction flex-wrap 缩写，仅支持 flex-flow: flex-direction flex-wrap 这种顺序，值以空格分隔按顺序赋值</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* flex-direction */</span>
-<span class="token property">flex-flow</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span>
-<span class="token comment">/* flex-direction|  flex-wrap*/</span>
-<span class="token property">flex-flow</span><span class="token punctuation">:</span> row nowrap<span class="token punctuation">;</span>
-</code></pre></div><h3 id="view-style"><a href="#view-style" class="header-anchor">#</a> View Style</h3> <h4 id="margin"><a href="#margin" class="header-anchor">#</a> margin</h4> <p>margin 是 margin-top|margin-right|margin-left|margin-bottom 的缩写模式, 目前仅支持四种缩写模式。</p> <h5 id="值支持类型-13"><a href="#值支持类型-13" class="header-anchor">#</a> 值支持类型</h5> <p>string: 'auto'
-number: rpx，px, %</p> <h5 id="语法-14"><a href="#语法-14" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* all */</span>
-<span class="token property">margin</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
-
-<span class="token comment">/* top and bottom | left and right */</span>
-<span class="token property">margin</span><span class="token punctuation">:</span> 5% auto<span class="token punctuation">;</span>
-
-<span class="token comment">/* top | left and right | bottom */</span>
-<span class="token property">margin</span><span class="token punctuation">:</span> 1rpx auto 2rpx<span class="token punctuation">;</span>
-
-<span class="token comment">/* top | right | bottom | left */</span>
-<span class="token property">margin</span><span class="token punctuation">:</span> 1rpx 2rpx 2rpx <span class="token punctuation">;</span>
-</code></pre></div><h4 id="margin-top-margin-bottom-margin-right-margin-left"><a href="#margin-top-margin-bottom-margin-right-margin-left" class="header-anchor">#</a> margin-top|margin-bottom|margin-right|margin-left</h4> <h5 id="值支持类型-14"><a href="#值支持类型-14" class="header-anchor">#</a> 值支持类型</h5> <p>number: rpx，px, %</p> <h5 id="语法-15"><a href="#语法-15" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">margin-top</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
-<span class="token property">margin-top</span><span class="token punctuation">:</span> 2rpx<span class="token punctuation">;</span>
-<span class="token property">margin-top</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
-</code></pre></div><h4 id="padding"><a href="#padding" class="header-anchor">#</a> padding</h4> <p>padding是padding-left、padding-right、padding-left、padding-bottom的缩写模式, 目前仅支持四种缩写模式。</p> <h5 id="值支持类型-15"><a href="#值支持类型-15" class="header-anchor">#</a> 值支持类型</h5> <p>string: 'auto'
-number: rpx，px, %</p> <h5 id="语法-16"><a href="#语法-16" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* all */</span>
-<span class="token property">padding</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
-
-<span class="token comment">/* top and bottom | left and right */</span>
-<span class="token property">padding</span><span class="token punctuation">:</span> 5% 10%<span class="token punctuation">;</span>
-
-<span class="token comment">/* top | left and right | bottom */</span>
-<span class="token property">padding</span><span class="token punctuation">:</span> 1rpx 0 2rpx<span class="token punctuation">;</span>
-
-<span class="token comment">/* top | right | bottom | left */</span>
-<span class="token property">padding</span><span class="token punctuation">:</span> 1rpx 2rpx 2rpx <span class="token punctuation">;</span>
-</code></pre></div><h4 id="padding-top-padding-bottom-padding-left-padding-right"><a href="#padding-top-padding-bottom-padding-left-padding-right" class="header-anchor">#</a> padding-top|padding-bottom|padding-left|padding-right</h4> <h5 id="值支持类型-16"><a href="#值支持类型-16" class="header-anchor">#</a> 值支持类型</h5> <p>number: rpx，px, %</p> <h5 id="语法-17"><a href="#语法-17" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** padding-top **/</span>
-<span class="token property">padding-top</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
-<span class="token property">padding-top</span><span class="token punctuation">:</span> 2rpx<span class="token punctuation">;</span>
-<span class="token property">padding-top</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
-</code></pre></div><h4 id="border"><a href="#border" class="header-anchor">#</a> border</h4> <p>border 是 border-width|border-style|border-color 的缩写模式, 目前仅支持 width | style | color 这种排序，值以空格分隔按顺序赋值</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* width | style | color */</span>
-<span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span>
-<span class="token property">border</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
-<span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span>
-<span class="token property">border</span><span class="token punctuation">:</span> 1px double pink<span class="token punctuation">;</span>
-</code></pre></div><h4 id="border-color"><a href="#border-color" class="header-anchor">#</a> border-color</h4> <p>设置边框的颜色, 目前只支持统一设置，不支持缩写。</p> <h5 id="值支持类型-17"><a href="#值支持类型-17" class="header-anchor">#</a> 值支持类型</h5> <p>color: 参考<a href="https://reactnative.dev/docs/colors" target="_blank" rel="noopener noreferrer">Color<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="语法-18"><a href="#语法-18" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* all border */</span>
-<span class="token comment">/** 支持 **/</span>
-<span class="token property">border-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
-</code></pre></div><h4 id="border-style"><a href="#border-style" class="header-anchor">#</a> border-style</h4> <p>设置边框的样式, 目前只支持统一设置，不支持缩写。</p> <h5 id="值支持类型-18"><a href="#值支持类型-18" class="header-anchor">#</a> 值支持类型</h5> <p>enum: solid|dotted|dashed</p> <h5 id="语法-19"><a href="#语法-19" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
-<span class="token comment">/* all border */</span>
-<span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token string">'solid'</span><span class="token punctuation">;</span>
-<span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token string">'dotted'</span><span class="token punctuation">;</span>
-<span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token string">'dashed'</span><span class="token punctuation">;</span>
-
-<span class="token comment">/** 不支持 **/</span>
-<span class="token property">border-style</span><span class="token punctuation">:</span> double<span class="token punctuation">;</span>
-<span class="token property">border-style</span><span class="token punctuation">:</span> groove<span class="token punctuation">;</span>
-<span class="token property">border-style</span><span class="token punctuation">:</span> ridge<span class="token punctuation">;</span>
-<span class="token property">border-style</span><span class="token punctuation">:</span> dotted solid<span class="token punctuation">;</span>
-<span class="token property">border-style</span><span class="token punctuation">:</span> hidden double dashed<span class="token punctuation">;</span>
-<span class="token property">border-style</span><span class="token punctuation">:</span> none solid dotted dashed<span class="token punctuation">;</span>
-</code></pre></div><h4 id="border-width"><a href="#border-width" class="header-anchor">#</a> border-width</h4> <p>设置边框的宽度，目前只支持统一设置，不支持缩写。</p> <h5 id="值支持类型-19"><a href="#值支持类型-19" class="header-anchor">#</a> 值支持类型</h5> <p>number: px rpx %</p> <h5 id="语法-20"><a href="#语法-20" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* all border */</span>
-<span class="token property">border-width</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
-</code></pre></div><h4 id="border-top-color-border-bottom-color-border-left-color-border-right-color"><a href="#border-top-color-border-bottom-color-border-left-color-border-right-color" class="header-anchor">#</a> border-top-color|border-bottom-color|border-left-color|border-right-color</h4> <p>设置各边框的颜色</p> <h5 id="值支持类型-20"><a href="#值支持类型-20" class="header-anchor">#</a> 值支持类型</h5> <p>color: 参考<a href="https://reactnative.dev/docs/colors" target="_blank" rel="noopener noreferrer">Color<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="语法-21"><a href="#语法-21" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-top-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
-</code></pre></div><h4 id="border-top-width-border-bottom-width-border-left-width-border-right-width"><a href="#border-top-width-border-bottom-width-border-left-width-border-right-width" class="header-anchor">#</a> border-top-width|border-bottom-width|border-left-width|border-right-width</h4> <p>设置各边框的宽度</p> <h5 id="值支持类型-21"><a href="#值支持类型-21" class="header-anchor">#</a> 值支持类型</h5> <p>number: px rpx</p> <h5 id="语法-22"><a href="#语法-22" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-top-width</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
-</code></pre></div><h4 id="border-radius"><a href="#border-radius" class="header-anchor">#</a> border-radius</h4> <p>设置border的圆角格式，支持一种缩写方式</p> <h5 id="值支持类型-22"><a href="#值支持类型-22" class="header-anchor">#</a> 值支持类型</h5> <p>仅支持 border-radius 0px|border-radius 0px 0px 0px 0px（值以空格分隔按顺序赋值）
-number: px rpx %</p> <h5 id="语法-23"><a href="#语法-23" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* all */</span>
-<span class="token property">border-radius</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
-<span class="token comment">/* top-left | top-right | bottom-right | bottom-left */</span>
-<span class="token property">border-radius</span><span class="token punctuation">:</span> 10px 10px 10px 0<span class="token punctuation">;</span>
-</code></pre></div><h4 id="border-bottom-left-radius-border-bottom-right-radius-border-top-left-radius-border-top-right-radius"><a href="#border-bottom-left-radius-border-bottom-right-radius-border-top-left-radius-border-top-right-radius" class="header-anchor">#</a> border-bottom-left-radius|border-bottom-right-radius|border-top-left-radius|border-top-right-radius</h4> <h5 id="值支持类型-23"><a href="#值支持类型-23" class="header-anchor">#</a> 值支持类型</h5> <p>number: px rpx %</p> <h5 id="语法-24"><a href="#语法-24" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
-</code></pre></div><h3 id="text-style"><a href="#text-style" class="header-anchor">#</a> Text Style</h3> <h4 id="color"><a href="#color" class="header-anchor">#</a> color</h4> <h5 id="值支持类型-24"><a href="#值支持类型-24" class="header-anchor">#</a> 值支持类型</h5> <p>color: 参考<a href="https://reactnative.dev/docs/colors" target="_blank" rel="noopener noreferrer">Color<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="语法-25"><a href="#语法-25" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>
-<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
-<span class="token property">color</span><span class="token punctuation">:</span> #fafafa<span class="token punctuation">;</span>
-<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 99<span class="token punctuation">,</span> 71<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span>
-</code></pre></div><h4 id="font-family"><a href="#font-family" class="header-anchor">#</a> font-family</h4> <p>可设置系统字体，引入字体文件，暂时不支持。</p> <h5 id="值支持类型-25"><a href="#值支持类型-25" class="header-anchor">#</a> 值支持类型</h5> <p>string</p> <h5 id="语法-26"><a href="#语法-26" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;PingFangSC-Regular&quot;</span>
-</code></pre></div><h4 id="font-size"><a href="#font-size" class="header-anchor">#</a> font-size</h4> <p>可设置字体的大小</p> <h5 id="值支持类型-26"><a href="#值支持类型-26" class="header-anchor">#</a> 值支持类型</h5> <p>number: px,rpx</p> <h5 id="语法-27"><a href="#语法-27" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
-<span class="token property">font-size</span><span class="token punctuation">:</span> 12rpx<span class="token punctuation">;</span>
-</code></pre></div><h4 id="font-style"><a href="#font-style" class="header-anchor">#</a> font-style</h4> <p>设置文本的字体样式。</p> <h5 id="值支持类型-27"><a href="#值支持类型-27" class="header-anchor">#</a> 值支持类型</h5> <p>enum: normal，italic</p> <h5 id="语法-28"><a href="#语法-28" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span>
-<span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
-</code></pre></div><h4 id="font-weight"><a href="#font-weight" class="header-anchor">#</a> font-weight</h4> <p>设置文字的权重。</p> <h5 id="值支持类型-28"><a href="#值支持类型-28" class="header-anchor">#</a> 值支持类型</h5> <p>enum: 100，200，300，400，500，600，800，900,normal,bold</p> <h5 id="语法-29"><a href="#语法-29" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">font-weight</span><span class="token punctuation">:</span> 100<span class="token punctuation">;</span>
-<span class="token property">font-weight</span><span class="token punctuation">:</span> 200<span class="token punctuation">;</span>
-<span class="token property">font-weight</span><span class="token punctuation">:</span> 300<span class="token punctuation">;</span>
-<span class="token property">font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span>
-<span class="token property">font-weight</span><span class="token punctuation">:</span> 500<span class="token punctuation">;</span>
-<span class="token property">font-weight</span><span class="token punctuation">:</span> 600<span class="token punctuation">;</span>
-<span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span>
-<span class="token property">font-weight</span><span class="token punctuation">:</span> 800<span class="token punctuation">;</span>
-<span class="token property">font-weight</span><span class="token punctuation">:</span> 900<span class="token punctuation">;</span>
-
-<span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
-<span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
-</code></pre></div><h4 id="font-variant"><a href="#font-variant" class="header-anchor">#</a> font-variant</h4> <p>设置文本的字体变体</p> <h5 id="值支持类型-29"><a href="#值支持类型-29" class="header-anchor">#</a> 值支持类型</h5> <p>enum: small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums</p> <h5 id="语法-30"><a href="#语法-30" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">font-variant</span><span class="token punctuation">:</span> small-caps<span class="token punctuation">;</span>
-<span class="token property">font-variant</span><span class="token punctuation">:</span> oldstyle-nums<span class="token punctuation">;</span>
-<span class="token property">font-variant</span><span class="token punctuation">:</span> lining-nums<span class="token punctuation">;</span>
-<span class="token property">font-variant</span><span class="token punctuation">:</span> tabular-nums<span class="token punctuation">;</span>
-<span class="token property">font-variant</span><span class="token punctuation">:</span> lining-nums<span class="token punctuation">;</span>
-<span class="token property">font-variant</span><span class="token punctuation">:</span> proportional-nums<span class="token punctuation">;</span>
-</code></pre></div><h4 id="letter-spacing"><a href="#letter-spacing" class="header-anchor">#</a> letter-spacing</h4> <p>定义字符之间的间距</p> <h5 id="值支持类型-30"><a href="#值支持类型-30" class="header-anchor">#</a> 值支持类型</h5> <p>px,rpx</p> <h5 id="语法-31"><a href="#语法-31" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">letter-spacing</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
-<span class="token property">letter-spacing</span><span class="token punctuation">:</span> 2rpx<span class="token punctuation">;</span>
-</code></pre></div><h4 id="line-height"><a href="#line-height" class="header-anchor">#</a> line-height</h4> <p>设置行高。</p> <h5 id="值支持类型-31"><a href="#值支持类型-31" class="header-anchor">#</a> 值支持类型</h5> <p>px,rpx,%</p> <h5 id="语法-32"><a href="#语法-32" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">line-height</span><span class="token punctuation">:</span> 16px
-<span class="token property">line-height</span><span class="token punctuation">:</span> 16rpx
-<span class="token property">line-height</span><span class="token punctuation">:</span> 100%
-<span class="token property">line-height</span><span class="token punctuation">:</span> 1
-</code></pre></div><h4 id="text-align"><a href="#text-align" class="header-anchor">#</a> text-align</h4> <p>设置文本的水平对齐方式。</p> <h5 id="值支持类型-32"><a href="#值支持类型-32" class="header-anchor">#</a> 值支持类型</h5> <p>enum: left, right, center, justify</p> <h5 id="语法-33"><a href="#语法-33" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
-<span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
-<span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
-<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
-<span class="token property">text-align</span><span class="token punctuation">:</span> justify<span class="token punctuation">;</span>
-
-<span class="token comment">/** 不支持 **/</span>
-<span class="token property">text-align</span><span class="token punctuation">:</span> match-parent<span class="token punctuation">;</span>
-<span class="token property">text-align</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
-<span class="token property">text-align</span><span class="token punctuation">:</span> justify-all<span class="token punctuation">;</span>
-</code></pre></div><h4 id="text-decoration-line"><a href="#text-decoration-line" class="header-anchor">#</a> text-decoration-line</h4> <p>设置文本的装饰线样式。</p> <h5 id="值支持类型-33"><a href="#值支持类型-33" class="header-anchor">#</a> 值支持类型</h5> <p>enum: none, underline, line-through, underline line-through</p> <h5 id="语法-34"><a href="#语法-34" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
-<span class="token property">text-decoration-line</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
-<span class="token property">text-decoration-line</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
-<span class="token property">text-decoration-line</span><span class="token punctuation">:</span> line-through<span class="token punctuation">;</span>
-<span class="token property">text-decoration-line</span><span class="token punctuation">:</span> underline line-through<span class="token punctuation">;</span>
-
-<span class="token comment">/** 不支持 **/</span>
-<span class="token property">text-decoration-line</span><span class="token punctuation">:</span> overline<span class="token punctuation">;</span>
-</code></pre></div><h4 id="text-transform"><a href="#text-transform" class="header-anchor">#</a> text-transform</h4> <p>设置文本的大小写转换。</p> <h5 id="值支持类型-34"><a href="#值支持类型-34" class="header-anchor">#</a> 值支持类型</h5> <p>enum: none, uppercase, lowercase, capitalize</p> <h5 id="语法-35"><a href="#语法-35" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/** 支持 **/</span>
-<span class="token property">text-transform</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
-<span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span>
-<span class="token property">text-transform</span><span class="token punctuation">:</span> lowercase<span class="token punctuation">;</span>
-<span class="token property">text-transform</span><span class="token punctuation">:</span> capitalize<span class="token punctuation">;</span>
-
-<span class="token comment">/** 不支持 **/</span>
-<span class="token property">text-transform</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
-<span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span>
-<span class="token property">text-transform</span><span class="token punctuation">:</span> lowercase<span class="token punctuation">;</span>
-<span class="token property">text-transform</span><span class="token punctuation">:</span> capitalize<span class="token punctuation">;</span>
-</code></pre></div><h4 id="text-shadow"><a href="#text-shadow" class="header-anchor">#</a> text-shadow</h4> <p>设置文本阴影</p> <h5 id="值支持类型-35"><a href="#值支持类型-35" class="header-anchor">#</a> 值支持类型</h5> <p>仅支持 offset-x | offset-y | blur-radius | color 排序，值以空格分隔按顺序赋值</p> <h5 id="语法-36"><a href="#语法-36" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">text-shadow</span><span class="token punctuation">:</span> 1rpx 3rpx 0 #2E0C02<span class="token punctuation">;</span>
-</code></pre></div><h3 id="background-style"><a href="#background-style" class="header-anchor">#</a> Background Style</h3> <p>背景相关的属性</p> <h4 id="background-color"><a href="#background-color" class="header-anchor">#</a> background-color</h4> <p>表示背景色，可以在任何标签上使用。</p> <h5 id="值支持类型-36"><a href="#值支持类型-36" class="header-anchor">#</a> 值支持类型</h5> <p>color: 参考<a href="https://reactnative.dev/docs/colors" target="_blank" rel="noopener noreferrer">Color<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h5 id="语法-37"><a href="#语法-37" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* all border */</span>
-<span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
-</code></pre></div><h4 id="background-image"><a href="#background-image" class="header-anchor">#</a> background-image</h4> <p>表示背景图，只能在view上使用</p> <h5 id="值支持类型-37"><a href="#值支持类型-37" class="header-anchor">#</a> 值支持类型</h5> <p>仅支持 &lt;url()&gt;</p> <h5 id="语法-38"><a href="#语法-38" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg&quot;</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
-
-<span class="token comment">/* 不支持 */</span>
-<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><h4 id="background-size"><a href="#background-size" class="header-anchor">#</a> background-size</h4> <p>表示背景大小，只能在view上使用</p> <h5 id="值支持类型-38"><a href="#值支持类型-38" class="header-anchor">#</a> 值支持类型</h5> <p>number 支持 px|rpx|%，枚举值支持 contain|cover|auto；
-支持一个值:这个值指定图片的宽度，图片的高度隐式的为 auto；
-支持两个值:第一个值指定图片的宽度，第二个值指定图片的高度；
-不支持逗号分隔的多个值：设置多重背景!!!</p> <h5 id="语法-39"><a href="#语法-39" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 支持 */</span>
-<span class="token property">background-size</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
-<span class="token property">background-size</span><span class="token punctuation">:</span> 50% 25%<span class="token punctuation">;</span>
-<span class="token property">background-size</span><span class="token punctuation">:</span> contain<span class="token punctuation">;</span>
-<span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
-<span class="token property">background-size</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
-<span class="token property">background-size</span><span class="token punctuation">:</span> 20px auto<span class="token punctuation">;</span>
-
-/ * 不支持 * /
-<span class="token property">background-size</span><span class="token punctuation">:</span> 50%<span class="token punctuation">,</span> 25%<span class="token punctuation">,</span> 25%<span class="token punctuation">;</span>
-</code></pre></div><h4 id="background-repeat"><a href="#background-repeat" class="header-anchor">#</a> background-repeat</h4> <p>表示背景图是否重复，只能在view上使用</p> <h5 id="值支持类型-39"><a href="#值支持类型-39" class="header-anchor">#</a> 值支持类型</h5> <p>enum: no-repeat</p> <h5 id="语法-40"><a href="#语法-40" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
-
-<span class="token comment">/* 不支持 */</span>
-<span class="token property">background-repeat</span><span class="token punctuation">:</span> repeat<span class="token punctuation">;</span> 
-</code></pre></div><h4 id="background"><a href="#background" class="header-anchor">#</a> background</h4> <p>表示背景的组合属性，只能在view上使用</p> <h5 id="值支持类型-40"><a href="#值支持类型-40" class="header-anchor">#</a> 值支持类型</h5> <p>仅支持 background-image | background-color | background-size | background-repeat，具体每个属性的支持情况参见上面具体属性支持的文档</p> <h5 id="语法-41"><a href="#语法-41" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 支持 */</span>
-<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg&quot;</span><span class="token punctuation">)</span></span> pink no-repeat<span class="token punctuation">;</span>
-<span class="token property">background</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
-<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg&quot;</span><span class="token punctuation">)</span></span> pink<span class="token punctuation">;</span>
-
-<span class="token comment">/* 不支持 */</span>
-<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><h3 id="shadow-style"><a href="#shadow-style" class="header-anchor">#</a> Shadow Style</h3> <h4 id="box-shadow"><a href="#box-shadow" class="header-anchor">#</a> box-shadow</h4> <p>此属性是阴影颜色、阴影的偏移量</p> <h5 id="值支持类型-41"><a href="#值支持类型-41" class="header-anchor">#</a> 值支持类型</h5> <p>仅支持 offset-x | offset-y | blur-radius | color 排序，值以空格分隔按顺序赋值</p> <h5 id="语法-42"><a href="#语法-42" class="header-anchor">#</a> 语法</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* offset-x | offset-y | blur-radius | color */</span>
-<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 1px 3px <span class="token function">rgba</span><span class="token punctuation">(</span>139<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.32<span class="token punctuation">)</span><span class="token punctuation">;</span>
-</code></pre></div><h2 id="附录"><a href="#附录" class="header-anchor">#</a> 附录</h2> <h3 id="rn-不支持的属性"><a href="#rn-不支持的属性" class="header-anchor">#</a> RN 不支持的属性</h3> <p>若设置以下不支持的属性会被 mpx 编译处理时丢弃，有编译 error 提示</p> <table><thead><tr><th>描述</th> <th>不支持的属性</th></tr></thead> <tbody><tr><td>双端都不支持</td> <td>box-sizing white-space text-overflow animation transition</td></tr> <tr><td>ios 不支持</td> <td>vertical-align</td></tr> <tr><td>android 不支持</td> <td>text-decoration-style text-decoration-color shadow-offset shadow-opacity shadow-radius</td></tr></tbody></table> <h3 id="rn-支持的枚举值"><a href="#rn-支持的枚举值" class="header-anchor">#</a> RN 支持的枚举值</h3> <p>RN 支持的枚举值映射如下表，其他不支持的枚举值会被 mpx 编译处理时丢弃，设置无效</p> <table><thead><tr><th>prop</th> <th>value 枚举</th></tr></thead> <tbody><tr><td>overflow</td> <td>visible hidden scroll</td></tr> <tr><td>border-style</td> <td>solid dotted dashed</td></tr> <tr><td>display</td> <td>flex none</td></tr> <tr><td>pointer-events</td> <td>auto none</td></tr> <tr><td>position</td> <td>relative absolute</td></tr> <tr><td>vertical-align</td> <td>auto top bottom center</td></tr> <tr><td>font-variant</td> <td>small-caps oldstyle-nums lining-nums tabular-nums proportional-nums</td></tr> <tr><td>text-align</td> <td>left right center justify</td></tr> <tr><td>font-style</td> <td>normal italic</td></tr> <tr><td>font-weight</td> <td>normal bold 100-900</td></tr> <tr><td>text-decoration-line</td> <td>none underline line-through 'underline line-through'</td></tr> <tr><td>text-transform</td> <td>none uppercase lowercase capitalize</td></tr> <tr><td>user-select</td> <td>auto text none contain all</td></tr> <tr><td>align-content</td> <td>flex-start flex-end none center stretch space-between space-around</td></tr> <tr><td>align-items</td> <td>flex-start flex-end center stretch baseline</td></tr> <tr><td>align-self</td> <td>auto flex-start flex-end center stretch baseline</td></tr> <tr><td>justify-content</td> <td>flex-start flex-end center space-between space-around space-evenly none</td></tr> <tr><td>background-repeat</td> <td>no-repeat</td></tr></tbody></table> <h3 id="缩写支持"><a href="#缩写支持" class="header-anchor">#</a> 缩写支持</h3> <p>RN 仅支持部分常用的缩写形式，具体参加下表：</p> <table><thead><tr><th>缩写属性</th> <th>支持的缩写格式</th> <th>备注</th></tr></thead> <tbody><tr><td>text-decoration</td> <td>仅支持 text-decoration-line text-decoration-style text-decoration-color</td> <td>顺序固定，值以空格分隔后按按顺序赋值</td></tr> <tr><td>margin</td> <td>margin: 0;margin: 0 auto;margin: 0 auto 10px;margin: 0 10px 10px 20px;</td> <td>-</td></tr> <tr><td>padding</td> <td>padding: 0;padding: 0 auto;padding: 0 auto 10px;padding: 0 10px 10px 20px;</td> <td>-</td></tr> <tr><td>text-shadow</td> <td>仅支持 offset-x offset-y blur-radius color 排序</td> <td>顺序固定，值以空格分隔后按按顺序赋值</td></tr> <tr><td>border</td> <td>仅支持 border-width border-style border-color</td> <td>顺序固定，值以空格分隔后按按顺序赋值</td></tr> <tr><td>box-shadow</td> <td>仅支持 offset-x offset-y blur-radius color</td> <td>顺序固定，值以空格分隔后按按顺序赋值</td></tr> <tr><td>flex</td> <td>仅支持 flex-grow flex-shrink flex-basis</td> <td>顺序固定，值以空格分隔后按按顺序赋值</td></tr> <tr><td>flex-flow</td> <td>仅支持 flex-direction flex-wrap</td> <td>顺序固定，值以空格分隔后按按顺序赋值</td></tr> <tr><td>border-radius</td> <td>支持 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius</td> <td>顺序固定，值以空格分隔后按按顺序赋值；当设置 border-radius: 0 相当于同时设置了4个方向</td></tr> <tr><td>background</td> <td>仅支持 background-image  background-color background-repeat</td> <td>顺序不固定，具体每个属性的支持情况参见上面具体属性支持的文档；</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/118.9cbac09e.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/rn-template.html b/docs-vuepress/.vuepress/dist/rn-template.html
deleted file mode 100644
index 4881256db1..0000000000
--- a/docs-vuepress/.vuepress/dist/rn-template.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Mpx转RN模版使用指南 | Mpx框架</title>
-    <meta name="generator" content="VuePress 1.9.10">
-    <link rel="icon" href="/favicon.ico">
-    <script type="text/javascript">(function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-    })(window, document, "clarity", "script", "jtvvy52wxy");</script>
-    <meta name="description" content="Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。">
-    
-    <link rel="preload" href="/assets/css/0.styles.f22478ca.css" as="style"><link rel="preload" href="/assets/js/app.84c88b57.js" as="script"><link rel="preload" href="/assets/js/7.01e4e942.js" as="script"><link rel="preload" href="/assets/js/3.145e69cd.js" as="script"><link rel="preload" href="/assets/js/1.4f7abe8f.js" as="script"><link rel="preload" href="/assets/js/119.312e4c21.js" as="script"><link rel="preload" href="/assets/js/30.04d1a7ea.js" as="script">
-    <link rel="stylesheet" href="/assets/css/0.styles.f22478ca.css">
-  </head>
-  <body>
-    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><div class="content-wrapper"><div class="container"><div class="theme-container no-sidebar"><header class="header" data-v-3ad594c3><!----> <div class="head-container" data-v-3ad594c3><a href="/" data-v-3ad594c3><div class="logo" data-v-3ad594c3>mpx</div></a> <div class="row" data-v-3ad594c3><div class="header__line" data-v-3ad594c3></div> <nav class="nav" data-v-3ad594c3><a href="/guide/basic/start.html" class="nav-link" data-v-3ad594c3>
-          指南
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/api/" class="nav-link" data-v-3ad594c3>
-          API
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="/articles/" class="nav-link" data-v-3ad594c3>
-          文章
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx/releases" target="_blank" class="nav-link" data-v-3ad594c3>
-          更新记录
-          <!----></a></nav><nav class="nav" data-v-3ad594c3><a href="https://github.com/didi/mpx" target="_blank" class="nav-link" data-v-3ad594c3>
-          GitHub
-          <!----></a></nav> <div class="searchBox-wrapper" data-v-3ad594c3><div class="searchBox" data-v-3ad594c3><form id="search-form" role="search" class="algolia-search-wrapper search-box" data-v-3ad594c3><div id="docsearch-container"></div></form></div></div></div></div> <!----></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/basic/start.html" class="nav-link">
-  指南
-</a></div><div class="nav-item"><a href="/api/index.html" class="nav-link">
-  API
-</a></div><div class="nav-item"><a href="/articles/index.html" class="nav-link">
-  文章
-</a></div><div class="nav-item"><a href="https://github.com/didi/mpx/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  更新记录
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/didi/mpx" target="_blank" rel="noopener noreferrer" class="nav-link external">
-  Github
-  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mpx转rn模版使用指南"><a href="#mpx转rn模版使用指南" class="header-anchor">#</a> Mpx转RN模版使用指南</h1> <h2 id="模版指令"><a href="#模版指令" class="header-anchor">#</a> 模版指令</h2> <p>目前 Mpx 输出 React Native 仅支持以下指令，具体使用范围可参考如下文档</p> <table><thead><tr><th>指令名</th> <th>说明</th></tr></thead> <tbody><tr><td>wx:if</td> <td>根据表达式的值的来有条件地渲染元素</td></tr> <tr><td>wx:elif</td> <td>根据表达式的值的来有条件地渲染元素，前一兄弟元素必须有 wx:if 或 wx:elif</td></tr> <tr><td>wx:else</td> <td>不需要表达式，前一兄弟元素必须有 wx:if 或 wx:elif</td></tr> <tr><td>wx:show</td> <td>根据表达式的值的来有条件地渲染元素，与 wx:if 所不同的是不会移除节点，而是设置节点的 style 为 display: none</td></tr> <tr><td>wx:style</td> <td>动态绑定 style 样式</td></tr> <tr><td>wx:class</td> <td>动态绑定 class 样式</td></tr> <tr><td>wx:for</td> <td>在组件上使用 wx:for 绑定一个数组，即可使数组中各项的数据重复渲染该组件</td></tr> <tr><td>wx:for-item</td> <td>指定数组当前元素的变量名</td></tr> <tr><td>wx:for-index</td> <td>指定数组当前下标的变量名</td></tr> <tr><td>wx:key</td> <td>指定列表中项目的唯一的标识符</td></tr> <tr><td>wx:ref</td> <td>获取节点信息</td></tr> <tr><td>mpxTagName</td> <td>动态转换标签</td></tr> <tr><td>component</td> <td>使用 component is 动态切换组件</td></tr> <tr><td>@mode</td> <td>使用 @ 符号来指定某个节点或属性只在某些平台下有效</td></tr> <tr><td>@_mode</td> <td>隐式属性条件编译，仅控制节点的展示，保留节点属性的平台转换能力</td></tr> <tr><td>@env</td> <td>自定义 env 目标应用，来实现在不同应用下编译产出不同的代码</td></tr></tbody></table> <h2 id="事件编写"><a href="#事件编写" class="header-anchor">#</a> 事件编写</h2> <p>目前 Mpx 输出 React Native 的事件编写遵循小程序的事件编写规范，支持事件的冒泡及捕获</p> <p>普通事件绑定</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view bindtap<span class="token operator">=</span><span class="token string">&quot;handleTap&quot;</span><span class="token operator">&gt;</span>
-    Click here<span class="token operator">!</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-</code></pre></div><p>绑定并阻止事件冒泡</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view catchtap<span class="token operator">=</span><span class="token string">&quot;handleTap&quot;</span><span class="token operator">&gt;</span>
-    Click here<span class="token operator">!</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-</code></pre></div><p>事件捕获</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view capture<span class="token operator">-</span>bind<span class="token operator">:</span>touchstart<span class="token operator">=</span><span class="token string">&quot;handleTap1&quot;</span><span class="token operator">&gt;</span>
-  outer view
-  <span class="token operator">&lt;</span>view capture<span class="token operator">-</span>bind<span class="token operator">:</span>touchstart<span class="token operator">=</span><span class="token string">&quot;handleTap2&quot;</span><span class="token operator">&gt;</span>
-    inner view
-  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-</code></pre></div><p>中断捕获阶段和取消冒泡阶段</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>view capture<span class="token operator">-</span>catch<span class="token operator">:</span>touchstart<span class="token operator">=</span><span class="token string">&quot;handleTap1&quot;</span><span class="token operator">&gt;</span>
-  outer view
-<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
-
-</code></pre></div><p>在此基础上也新增了事件处理内联传参的增强机制。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
- <span class="token comment">&lt;!--Mpx增强语法，模板内联传参，方便简洁--&gt;</span>
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTapInline('b')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token comment">// 直接通过参数获取数据，直观方便</span>
-  <span class="token keyword">const</span> <span class="token function-variable function">handleTapInline</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'name:'</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span>
-  <span class="token punctuation">}</span>
-  <span class="token comment">// ...</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>除此之外，Mpx 也支持了动态事件绑定</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
- <span class="token comment">&lt;!--动态事件绑定--&gt;</span>
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{items}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleTap_{{index}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
-  {{item}}
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
-  <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mpxjs/core'</span>
-
-  <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Item 1'</span><span class="token punctuation">,</span> <span class="token string">'Item 2'</span><span class="token punctuation">,</span> <span class="token string">'Item 3'</span><span class="token punctuation">,</span> <span class="token string">'Item 4'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
-  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_0</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-
-  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_1</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-
-  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 3'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-
-  <span class="token keyword">const</span> <span class="token function-variable function">handleTap_3</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tapped on item 4'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  <span class="token punctuation">}</span>
-</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div><p>注意事项：</p> <p>当同一个元素上同时绑定了 catchtap 和 bindtap 事件时:</p> <p>两个事件都会被触发执行。
-但是是否阻止事件冒泡的行为,会以模板上第一个绑定的事件标识符为准。
-如果第一个绑定的是 catchtap，那么不管后面绑定的是什么,都会阻止事件冒泡。
-如果第一个绑定的是 bindtap，则不会阻止事件冒泡。</p> <p>同理,如果同一个元素上绑定了 capture-bind:tap 和 bindtap:</p> <p>事件的执行时机会根据模板上第一个绑定事件的标识符来决定:
-如果第一个绑定的是 capture-bind:tap，则事件会在捕获阶段触发。
-如果第一个绑定的是 bindtap，则事件会在冒泡阶段触发。</p> <h2 id="基础组件"><a href="#基础组件" class="header-anchor">#</a> 基础组件</h2> <p>目前 Mpx 输出 React Native 仅支持以下组件，具体使用范围可参考如下文档</p> <h3 id="view"><a href="#view" class="header-anchor">#</a> view</h3> <p>视图容器。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>hover-class</td> <td>string</td> <td></td> <td>指定按下去的样式类。</td></tr> <tr><td>hover-start-time</td> <td>number</td> <td>50</td> <td>按住后多久出现点击态，单位毫秒</td></tr> <tr><td>hover-stay-time</td> <td>number</td> <td>400</td> <td>手指松开后点击态保留时间，单位毫秒</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td>false</td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindtap</td> <td>点击的时候触发</td></tr></tbody></table> <h3 id="text"><a href="#text" class="header-anchor">#</a> text</h3> <p>文本。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>user-select</td> <td>boolean</td> <td><code>false</code></td> <td>文本是否可选。</td></tr> <tr><td>disable-default-style</td> <td>boolean</td> <td><code>false</code></td> <td>会内置默认样式，比如fontSize为16。设置<code>true</code>可以禁止默认的内置样式。</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td>false</td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindtap</td> <td>点击的时候触发</td></tr></tbody></table> <p>注意事项</p> <ol><li>未包裹 text 标签的文本，会自动包裹 text 标签。</li> <li>text 组件开启 enable-offset 后，offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段</li></ol> <h3 id="image"><a href="#image" class="header-anchor">#</a> image</h3> <p>图片。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>src</td> <td>String</td> <td><code>false</code></td> <td>图片资源地址，支持本地图片资源及 base64 格式数据，暂不支持 svg 格式</td></tr> <tr><td>mode</td> <td>String</td> <td><code>scaleToFill</code></td> <td>图片裁剪、缩放的模式，适配微信 image 所有 mode 格式</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>binderror</td> <td>当错误发生时触发，event.detail = { errMsg }</td></tr> <tr><td>bindload</td> <td>当图片载入完毕时触发，event.detail = { height, width }</td></tr></tbody></table> <p>注意事项</p> <ol><li>image 组件默认宽度320px、高度240px</li> <li>image 组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分</li></ol> <h3 id="input"><a href="#input" class="header-anchor">#</a> input</h3> <p>输入框。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>输入框的初始内容</td></tr> <tr><td>type</td> <td>String</td> <td><code>text</code></td> <td>input 的类型，不支持 <code>safe-password</code>、<code>nickname</code></td></tr> <tr><td>password</td> <td>Boolean</td> <td><code>false</code></td> <td>是否是密码类型</td></tr> <tr><td>placeholder</td> <td>String</td> <td></td> <td>输入框为空时占位符</td></tr> <tr><td>placeholder-class</td> <td>String</td> <td></td> <td>指定 placeholder 的样式类，仅支持 color 属性</td></tr> <tr><td>placeholder-style</td> <td>String</td> <td></td> <td>指定 placeholder 的样式，仅支持 color 属性</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr> <tr><td>maxlength</td> <td>Number</td> <td><code>140</code></td> <td>最大输入长度，设置为 -1 的时候不限制最大长度</td></tr> <tr><td>auto-focus</td> <td>Boolean</td> <td><code>false</code></td> <td>(即将废弃，请直接使用 focus )自动聚焦，拉起键盘</td></tr> <tr><td>focus</td> <td>Boolean</td> <td><code>false</code></td> <td>获取焦点</td></tr> <tr><td>confirm-type</td> <td>String</td> <td><code>done</code></td> <td>设置键盘右下角按钮的文字，仅在 type='text' 时生效</td></tr> <tr><td>confirm-hold</td> <td>Boolean</td> <td><code>false</code></td> <td>点击键盘右下角按钮时是否保持键盘不收起</td></tr> <tr><td>cursor</td> <td>Number</td> <td></td> <td>指定 focus 时的光标位置</td></tr> <tr><td>cursor-color</td> <td>String</td> <td></td> <td>光标颜色</td></tr> <tr><td>selection-start</td> <td>Number</td> <td><code>-1</code></td> <td>光标起始位置，自动聚集时有效，需与 selection-end 搭配使用</td></tr> <tr><td>selection-end</td> <td>Number</td> <td><code>-1</code></td> <td>光标结束位置，自动聚集时有效，需与 selection-start 搭配使用</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindinput</td> <td>键盘输入时触发，event.detail = { value, cursor }，不支持 <code>keyCode</code></td></tr> <tr><td>bindfocus</td> <td>输入框聚焦时触发，event.detail = { value }，不支持 <code>height</code></td></tr> <tr><td>bindblur</td> <td>输入框失去焦点时触发，event.detail = { value }，不支持 <code>encryptedValue</code>、<code>encryptError</code></td></tr> <tr><td>bindconfirm</td> <td>点击完成按钮时触发，event.detail = { value }</td></tr> <tr><td>bind:selectionchange</td> <td>选区改变事件, event.detail = { selectionStart, selectionEnd }</td></tr></tbody></table> <p>方法</p> <p>可通过 <code>ref</code> 方式调用以下组件实例方法</p> <table><thead><tr><th>方法名</th> <th>说明</th></tr></thead> <tbody><tr><td>focus</td> <td>使输入框得到焦点</td></tr> <tr><td>blur</td> <td>使输入框失去焦点</td></tr> <tr><td>clear</td> <td>清空输入框的内容</td></tr> <tr><td>isFocused</td> <td>返回值表明当前输入框是否获得了焦点</td></tr></tbody></table> <h3 id="textarea"><a href="#textarea" class="header-anchor">#</a> textarea</h3> <p>多行输入框。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>输入框内容</td></tr> <tr><td>type</td> <td>String</td> <td><code>text</code></td> <td>input 的类型，不支持 <code>safe-password</code>、<code>nickname</code></td></tr> <tr><td>placeholder</td> <td>String</td> <td></td> <td>输入框为空时占位符</td></tr> <tr><td>placeholder-class</td> <td>String</td> <td></td> <td>指定 placeholder 的样式类，仅支持 color 属性</td></tr> <tr><td>placeholder-style</td> <td>String</td> <td></td> <td>指定 placeholder 的样式，仅支持 color 属性</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr> <tr><td>maxlength</td> <td>Number</td> <td><code>140</code></td> <td>最大输入长度，设置为 -1 的时候不限制最大长度</td></tr> <tr><td>auto-focus</td> <td>Boolean</td> <td><code>false</code></td> <td>(即将废弃，请直接使用 focus )自动聚焦，拉起键盘</td></tr> <tr><td>focus</td> <td>Boolean</td> <td><code>false</code></td> <td>获取焦点</td></tr> <tr><td>auto-height</td> <td>Boolean</td> <td><code>false</code></td> <td>是否自动增高，设置 auto-height 时，style.height不生效</td></tr> <tr><td>confirm-type</td> <td>String</td> <td><code>done</code></td> <td>设置键盘右下角按钮的文字，不支持 <code>return</code></td></tr> <tr><td>confirm-hold</td> <td>Boolean</td> <td><code>false</code></td> <td>点击键盘右下角按钮时是否保持键盘不收起</td></tr> <tr><td>cursor</td> <td>Number</td> <td></td> <td>指定 focus 时的光标位置</td></tr> <tr><td>cursor-color</td> <td>String</td> <td></td> <td>光标颜色</td></tr> <tr><td>selection-start</td> <td>Number</td> <td><code>-1</code></td> <td>光标起始位置，自动聚集时有效，需与 selection-end 搭配使用</td></tr> <tr><td>selection-end</td> <td>Number</td> <td><code>-1</code></td> <td>光标结束位置，自动聚集时有效，需与 selection-start 搭配使用</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindinput</td> <td>键盘输入时触发，event.detail = { value, cursor }，不支持 <code>keyCode</code></td></tr> <tr><td>bindfocus</td> <td>输入框聚焦时触发，event.detail = { value }，不支持 <code>height</code></td></tr> <tr><td>bindblur</td> <td>输入框失去焦点时触发，event.detail = { value }，不支持 <code>encryptedValue</code>、<code>encryptError</code></td></tr> <tr><td>bindconfirm</td> <td>点击完成按钮时触发，event.detail = { value }</td></tr> <tr><td>bindlinechange</td> <td>输入框行数变化时调用，event.detail = { height: 0, lineCount: 0 }，不支持 <code>heightRpx</code></td></tr> <tr><td>bind:selectionchange</td> <td>选区改变事件, {selectionStart, selectionEnd}</td></tr></tbody></table> <p>方法</p> <p>可通过 <code>ref</code> 方式调用以下组件实例方法</p> <table><thead><tr><th>方法名</th> <th>说明</th></tr></thead> <tbody><tr><td>focus</td> <td>使输入框得到焦点</td></tr> <tr><td>blur</td> <td>使输入框失去焦点</td></tr> <tr><td>clear</td> <td>清空输入框的内容</td></tr> <tr><td>isFocused</td> <td>返回值表明当前输入框是否获得了焦点</td></tr></tbody></table> <h3 id="button"><a href="#button" class="header-anchor">#</a> button</h3> <p>按钮。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>size</td> <td>String</td> <td><code>default</code></td> <td>按钮的大小</td></tr> <tr><td>type</td> <td>String</td> <td><code>default</code></td> <td>按钮的样式类型</td></tr> <tr><td>plain</td> <td>Boolean</td> <td><code>false</code></td> <td>按钮是否镂空，背景色透明</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr> <tr><td>loading</td> <td>Boolean</td> <td><code>false</code></td> <td>名称前是否带 loading 图标</td></tr> <tr><td>open-type</td> <td>String</td> <td></td> <td>微信开放能力，当前仅支持 <code>share</code></td></tr> <tr><td>hover-class</td> <td>String</td> <td></td> <td>指定按钮按下去的样式类。当 hover-class=&quot;none&quot; 时，没有点击态效果</td></tr> <tr><td>hover-start-time</td> <td>Number</td> <td><code>20</code></td> <td>按住后多久出现点击态，单位毫秒</td></tr> <tr><td>hover-stay-time</td> <td>Number</td> <td><code>70</code></td> <td>手指松开后点击态保留时间，单位毫秒</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <h3 id="scroll-view"><a href="#scroll-view" class="header-anchor">#</a> scroll-view</h3> <p>可滚动视图区域。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>scroll-x</td> <td>Boolean</td> <td><code>false</code></td> <td>允许横向滚动动</td></tr> <tr><td>scroll-y</td> <td>Boolean</td> <td><code>false</code></td> <td>允许纵向滚动</td></tr> <tr><td>upper-threshold</td> <td>Number</td> <td><code>50</code></td> <td>距顶部/左边多远时(单位 px),触发 scrolltoupper 事件</td></tr> <tr><td>lower-threshold</td> <td>Number</td> <td><code>50</code></td> <td>距底部/右边多远时(单位 px),触发 scrolltolower 事件</td></tr> <tr><td>scroll-top</td> <td>Number</td> <td><code>0</code></td> <td>设置纵向滚动条位置</td></tr> <tr><td>scroll-left</td> <td>Number</td> <td><code>0</code></td> <td>设置横向滚动条位置</td></tr> <tr><td>scroll-with-animation</td> <td>Boolean</td> <td><code>false</code></td> <td>在设置滚动条位置时使用动画过渡</td></tr> <tr><td>enable-back-to-top</td> <td>Boolean</td> <td><code>false</code></td> <td>点击状态栏的时候视图会滚动到顶部</td></tr> <tr><td>enhanced</td> <td>Boolean</td> <td><code>false</code></td> <td>scroll-view 组件功能增强</td></tr> <tr><td>refresher-enabled</td> <td>Boolean</td> <td><code>false</code></td> <td>开启自定义下拉刷新</td></tr> <tr><td>scroll-anchoring</td> <td>Boolean</td> <td><code>false</code></td> <td>开启滚动区域滚动锚点</td></tr> <tr><td>refresher-default-style</td> <td>String</td> <td><code>'black'</code></td> <td>设置下拉刷新默认样式,支持 <code>black</code>、<code>white</code>、<code>none</code>，仅安卓支持</td></tr> <tr><td>refresher-background</td> <td>String</td> <td><code>'#fff'</code></td> <td>设置自定义下拉刷新背景颜色，仅安卓支持</td></tr> <tr><td>refresher-triggered</td> <td>Boolean</td> <td><code>false</code></td> <td>设置当前下拉刷新状态,true 表示已触发</td></tr> <tr><td>paging-enabled</td> <td>Number</td> <td><code>false</code></td> <td>分页滑动效果 (同时开启 enhanced 属性后生效)，当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置</td></tr> <tr><td>show-scrollbar</td> <td>Number</td> <td><code>true</code></td> <td>滚动条显隐控制 (同时开启 enhanced 属性后生效)</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>binddragstart</td> <td>滑动开始事件，同时开启 enhanced 属性后生效</td></tr> <tr><td>binddragging</td> <td>滑动事件，同时开启 enhanced 属性后生效</td></tr> <tr><td>binddragend</td> <td>滑动结束事件，同时开启 enhanced 属性后生效</td></tr> <tr><td>bindscrolltoupper</td> <td>滚动到顶部/左边触发</td></tr> <tr><td>bindscrolltolower</td> <td>滚动到底部/右边触发</td></tr> <tr><td>bindscroll</td> <td>滚动时触发</td></tr> <tr><td>bindrefresherrefresh</td> <td>自定义下拉刷新被触发</td></tr></tbody></table> <p>注意事项</p> <ol><li>目前不支持自定义下拉刷新节点，使用 slot=&quot;refresher&quot; 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来</li></ol> <h3 id="swiper"><a href="#swiper" class="header-anchor">#</a> swiper</h3> <p>滑块视图容器。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>indicator-dots</td> <td>Boolean</td> <td><code>false</code></td> <td>是否显示面板指示点</td></tr> <tr><td>indicator-color</td> <td>color</td> <td><code>rgba(0, 0, 0, .3)</code></td> <td>指示点颜色</td></tr> <tr><td>indicator-active-color</td> <td>color</td> <td><code>#000000</code></td> <td>当前选中的指示点颜色</td></tr> <tr><td>autoplay</td> <td>Boolean</td> <td><code>false</code></td> <td>是否自动切换</td></tr> <tr><td>current</td> <td>Number</td> <td><code>0</code></td> <td>当前所在滑块的 index</td></tr> <tr><td>interval</td> <td>Number</td> <td><code>5000</code></td> <td>自动切换时间间隔</td></tr> <tr><td>duration</td> <td>Number</td> <td><code>500</code></td> <td>滑动动画时长</td></tr> <tr><td>circular</td> <td>Boolean</td> <td><code>false</code></td> <td>是否采用衔接滑动</td></tr> <tr><td>vertical</td> <td>Boolean</td> <td><code>false</code></td> <td>滑动方向是否为纵向</td></tr> <tr><td>previous-margin</td> <td>String</td> <td><code>0</code></td> <td>前边距，可用于露出前一项的一小部分，接受px</td></tr> <tr><td>next-margin</td> <td>String</td> <td><code>0</code></td> <td>后边距，可用于露出后一项的一小部分，接受px</td></tr> <tr><td>enable-offset</td> <td>Number</td> <td><code>false</code></td> <td>设置是否要获取组件的布局信息，若设置了该属性，会在 e.target 中返回组件的 offsetLeft、offsetWidth 信息</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>current 改变时会触发 change 事件，event.detail = {current, source}</td></tr></tbody></table> <h3 id="swiper-item"><a href="#swiper-item" class="header-anchor">#</a> swiper-item</h3> <ol><li>仅可放置在swiper组件中，宽高自动设置为100%。</li></ol> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>item-id</td> <td>string</td> <td><code>无</code></td> <td>该 swiper-item 的标识符</td></tr></tbody></table> <h3 id="checkbox"><a href="#checkbox" class="header-anchor">#</a> checkbox</h3> <p>多选项目</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td>false</td> <td>是否禁用</td></tr> <tr><td>checked</td> <td>Boolean</td> <td>false</td> <td>当前是否选中，可用来设置默认选中</td></tr> <tr><td>color</td> <td>String</td> <td>#09BB07</td> <td>checkbox的颜色，同css的color</td></tr></tbody></table> <h3 id="checkbox-group"><a href="#checkbox-group" class="header-anchor">#</a> checkbox-group</h3> <p>多项选择器，内部由多个checkbox组成。</p> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }</td></tr></tbody></table> <h3 id="radio"><a href="#radio" class="header-anchor">#</a> radio</h3> <p>单选项目</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>String</td> <td></td> <td>radio 标识，当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value</td></tr> <tr><td>disabled</td> <td>Boolean</td> <td>false</td> <td>是否禁用</td></tr> <tr><td>checked</td> <td>Boolean</td> <td>false</td> <td>当前是否选中，可用来设置默认选中</td></tr> <tr><td>color</td> <td>String</td> <td>#09BB07</td> <td>checkbox 的颜色，同 css 的 color</td></tr></tbody></table> <h3 id="radio-group"><a href="#radio-group" class="header-anchor">#</a> radio-group</h3> <p>单项选择器，内部由多个 radio 组成</p> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>radio-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 radio 的 value 的数组 ] }</td></tr></tbody></table> <h3 id="label"><a href="#label" class="header-anchor">#</a> label</h3> <p>用来改进表单组件的可用性</p> <p>注意事项</p> <ol><li>当前不支持使用 for 属性找到对应 id，仅支持将控件放在该标签内，目前可以绑定的空间有：checkbox、radio、switch。</li></ol> <h3 id="icon"><a href="#icon" class="header-anchor">#</a> icon</h3> <p>图标组件</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>type</td> <td>String</td> <td></td> <td>icon 的类型，有效值：success、success_no_circle、info、warn、waiting、cancel、download、search、clear</td></tr> <tr><td>size</td> <td>String | Number</td> <td>23</td> <td>icon 的大小</td></tr> <tr><td>color</td> <td>String</td> <td></td> <td>icon 的颜色，同 css 的 color</td></tr></tbody></table> <h3 id="movable-area"><a href="#movable-area" class="header-anchor">#</a> movable-area</h3> <p>movable-view的可移动区域。</p> <p>注意事项</p> <ol><li>movable-area不支持设置 scale-area，缩放手势生效区域仅在 movable-view 内</li></ol> <h3 id="movable-view"><a href="#movable-view" class="header-anchor">#</a> movable-view</h3> <p>可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>direction</td> <td>String</td> <td>none</td> <td>目前支持 all、vertical、horizontal、none｜</td></tr> <tr><td>x</td> <td>Number</td> <td></td> <td>定义x轴方向的偏移</td></tr> <tr><td>y</td> <td>Number</td> <td></td> <td>定义y轴方向的偏移</td></tr> <tr><td>friction</td> <td>Number</td> <td>7</td> <td>摩擦系数</td></tr> <tr><td>disabled</td> <td>boolean</td> <td>false</td> <td>是否禁用</td></tr> <tr><td>scale</td> <td>boolean</td> <td>false</td> <td>是否支持双指缩放</td></tr> <tr><td>scale-min</td> <td>Number</td> <td>0.1</td> <td>定义缩放倍数最小值</td></tr> <tr><td>scale-max</td> <td>Number</td> <td>10</td> <td>定义缩放倍数最大值</td></tr> <tr><td>scale-value</td> <td>Number</td> <td>1</td> <td>定义缩放倍数，取值范围为 0.1 - 10</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>拖动过程中触发的事件，event.detail = {x, y, source}</td></tr> <tr><td>bindscale</td> <td>缩放过程中触发的事件，event.detail = {x, y, scale}</td></tr> <tr><td>htouchmove</td> <td>初次手指触摸后移动为横向的移动时触发</td></tr> <tr><td>vtouchmove</td> <td>初次手指触摸后移动为纵向的移动时触发</td></tr></tbody></table> <h3 id="form"><a href="#form" class="header-anchor">#</a> form</h3> <p>表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。</p> <p>当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。</p> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindsubmit</td> <td>携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} }</td></tr> <tr><td>bindreset</td> <td>表单重置时会触发 reset 事件</td></tr></tbody></table> <h3 id="cover-view"><a href="#cover-view" class="header-anchor">#</a> cover-view</h3> <p>视图容器。
-功能同 view 组件</p> <h3 id="cover-image"><a href="#cover-image" class="header-anchor">#</a> cover-image</h3> <p>视图容器。
-功能同 image 组件
-| bindchange      | 滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）|</p> <h3 id="picker-view"><a href="#picker-view" class="header-anchor">#</a> picker-view</h3> <p>嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>Array[number]</td> <td><code>false</code></td> <td>数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。</td></tr></tbody></table> <p>事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindchange</td> <td>checkbox-group 中选中项发生改变时触发 change 事件，detail = { value: [ 选中的 checkbox 的 value 的数组 ] }</td></tr></tbody></table> <h3 id="picker-view-column"><a href="#picker-view-column" class="header-anchor">#</a> picker-view-column</h3> <p>滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致</p> <h3 id="picker"><a href="#picker" class="header-anchor">#</a> picker</h3> <p>从底部弹起的滚动选择器。</p> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>mode</td> <td>string</td> <td><code>selector</code></td> <td>选择器类型</td></tr> <tr><td>disabled</td> <td>boolean</td> <td><code>false</code></td> <td>是否禁用</td></tr></tbody></table> <p>公共事件</p> <table><thead><tr><th>事件名</th> <th>说明</th></tr></thead> <tbody><tr><td>bindcancel</td> <td>取消选择时触发</td></tr> <tr><td>bindchange</td> <td>滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）</td></tr></tbody></table> <h4 id="普通选择器-mode-selector"><a href="#普通选择器-mode-selector" class="header-anchor">#</a> 普通选择器：mode = selector</h4> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>range</td> <td>array[object]/array</td> <td><code>[]</code></td> <td>mode 为 selector 或 multiSelector 时，range 有效</td></tr> <tr><td>range-key</td> <td>string</td> <td><code>false</code></td> <td>当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容</td></tr> <tr><td>value</td> <td>number</td> <td>0</td> <td>表示选择了 range 中的第几个（下标从 0 开始）</td></tr></tbody></table> <h4 id="多列选择器-mode-multiselector"><a href="#多列选择器-mode-multiselector" class="header-anchor">#</a> 多列选择器：mode = multiSelector</h4> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>range</td> <td>array[object]/array</td> <td><code>[]</code></td> <td>mode 为 selector 或 multiSelector 时，range 有效</td></tr> <tr><td>range-key</td> <td>string</td> <td><code>false</code></td> <td>当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容</td></tr> <tr><td>value</td> <td>array</td> <td><code>[]</code></td> <td>表示选择了 range 中的第几个（下标从 0 开始）</td></tr> <tr><td>bindcolumnchange</td> <td></td> <td></td> <td>列改变时触发</td></tr></tbody></table> <h4 id="多列选择器-时间选择器-mode-time"><a href="#多列选择器-时间选择器-mode-time" class="header-anchor">#</a> 多列选择器：时间选择器：mode = time</h4> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>string</td> <td><code>[]</code></td> <td>表示选中的时间，格式为&quot;hh:mm&quot;</td></tr> <tr><td>start</td> <td>string</td> <td><code>false</code></td> <td>表示有效时间范围的开始，字符串格式为&quot;hh:mm&quot;</td></tr> <tr><td>end</td> <td>string</td> <td><code>[]</code></td> <td>表示有效时间范围的结束，字符串格式为&quot;hh:mm&quot;</td></tr></tbody></table> <h4 id="多列选择器-时间选择器-mode-date"><a href="#多列选择器-时间选择器-mode-date" class="header-anchor">#</a> 多列选择器：时间选择器：mode = date</h4> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>string</td> <td><code>当天</code></td> <td>表示选中的日期，格式为&quot;YYYY-MM-DD&quot;</td></tr> <tr><td>start</td> <td>string</td> <td><code>false</code></td> <td>表示有效日期范围的开始，字符串格式为&quot;YYYY-MM-DD&quot;</td></tr> <tr><td>end</td> <td>string</td> <td><code>[]</code></td> <td>表示有效日期范围的结束，字符串格式为&quot;YYYY-MM-DD&quot;</td></tr> <tr><td>fields</td> <td>string</td> <td><code>day</code></td> <td>有效值 year,month,day，表示选择器的粒度</td></tr></tbody></table> <h4 id="fields-有效值"><a href="#fields-有效值" class="header-anchor">#</a> fields 有效值：</h4> <table><thead><tr><th>属性名</th> <th>说明</th></tr></thead> <tbody><tr><td>year</td> <td>选择器粒度为年</td></tr> <tr><td>month</td> <td>选择器粒度为月份</td></tr> <tr><td>day</td> <td>选择器粒度为天</td></tr></tbody></table> <h3 id="省市区选择器：mode-region"><a href="#省市区选择器：mode-region" class="header-anchor">#</a> 省市区选择器：mode = region</h3> <p>属性</p> <table><thead><tr><th>属性名</th> <th>类型</th> <th>默认值</th> <th>说明</th></tr></thead> <tbody><tr><td>value</td> <td>array</td> <td><code>[]</code></td> <td>表示选中的省市区，默认选中每一列的第一个值</td></tr> <tr><td>custom-item</td> <td>string</td> <td></td> <td>可为每一列的顶部添加一个自定义的项</td></tr> <tr><td>level</td> <td>string</td> <td><code>region</code></td> <td>选择器层级</td></tr></tbody></table> <h4 id="level-有效值"><a href="#level-有效值" class="header-anchor">#</a> level 有效值：</h4> <table><thead><tr><th>属性名</th> <th>说明</th></tr></thead> <tbody><tr><td>province</td> <td>选省级选择器</td></tr> <tr><td>city</td> <td>市级选择器</td></tr> <tr><td>region</td> <td>区级选择器</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div></div></div><div class="global-ui"><!----><!----></div></div>
-    <script src="/assets/js/app.84c88b57.js" defer></script><script src="/assets/js/7.01e4e942.js" defer></script><script src="/assets/js/3.145e69cd.js" defer></script><script src="/assets/js/1.4f7abe8f.js" defer></script><script src="/assets/js/119.312e4c21.js" defer></script><script src="/assets/js/30.04d1a7ea.js" defer></script>
-  </body>
-</html>
diff --git a/docs-vuepress/.vuepress/dist/service-worker.js b/docs-vuepress/.vuepress/dist/service-worker.js
deleted file mode 100644
index 3fcd8056f9..0000000000
--- a/docs-vuepress/.vuepress/dist/service-worker.js
+++ /dev/null
@@ -1,901 +0,0 @@
-/**
- * Welcome to your Workbox-powered service worker!
- *
- * You'll need to register this file in your web app and you should
- * disable HTTP caching for this file too.
- * See https://goo.gl/nhQhGp
- *
- * The rest of the code is auto-generated. Please don't update this file
- * directly; instead, make changes to your Workbox build configuration
- * and re-run your build process.
- * See https://goo.gl/2aRDsh
- */
-
-importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
-
-self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
-  }
-});
-
-/**
- * The workboxSW.precacheAndRoute() method efficiently caches and responds to
- * requests for URLs in the manifest.
- * See https://goo.gl/S9QRab
- */
-self.__precacheManifest = [
-  {
-    "url": "404.html",
-    "revision": "5b00337f21832bd4573ba6c98bedacb4"
-  },
-  {
-    "url": "api/ApiIndex.html",
-    "revision": "f5736e201b8355b58c4a3127475e6757"
-  },
-  {
-    "url": "api/app-config.html",
-    "revision": "73b3f4c261fc6ad75418f21d0f696b62"
-  },
-  {
-    "url": "api/builtIn.html",
-    "revision": "e854e0ad752129084b0de9d2a9b692fd"
-  },
-  {
-    "url": "api/compile.html",
-    "revision": "5eb3d7fe5d6193c15061bcca578def13"
-  },
-  {
-    "url": "api/composition-api.html",
-    "revision": "70dccb11a976b0321ae6c6df8cbccf83"
-  },
-  {
-    "url": "api/directives.html",
-    "revision": "39ac7af3ed7a9131d4dad8bbda934d5e"
-  },
-  {
-    "url": "api/extend.html",
-    "revision": "67026f94a9c9fb2b42094426f6157048"
-  },
-  {
-    "url": "api/global-api.html",
-    "revision": "33d7c25d85ca74401645e05f2e5990f1"
-  },
-  {
-    "url": "api/index.html",
-    "revision": "a0bb36716602184632c2781156f0256e"
-  },
-  {
-    "url": "api/instance-api.html",
-    "revision": "2999969ec01f4b0893d81a7c810e05f7"
-  },
-  {
-    "url": "api/optional-api.html",
-    "revision": "52cf38d179e9e86b426fe9c31b758659"
-  },
-  {
-    "url": "api/reactivity-api.html",
-    "revision": "a580e6086de61b32a4442ff42d8e6caa"
-  },
-  {
-    "url": "api/store-api.html",
-    "revision": "fc79ec11f5b437574ee9c0d3f0b51a36"
-  },
-  {
-    "url": "articles/1.0.html",
-    "revision": "c7408bac5c637d07a68bd9f1e0579d47"
-  },
-  {
-    "url": "articles/2.0.html",
-    "revision": "89411f8727853b0ad8db88d46d2f92d0"
-  },
-  {
-    "url": "articles/2.7-release.html",
-    "revision": "36f589577d67385b01da5b910e5e4f43"
-  },
-  {
-    "url": "articles/2.8-release-alter.html",
-    "revision": "c7c41c65d2fcc7577004ce04712d5e46"
-  },
-  {
-    "url": "articles/2.8-release.html",
-    "revision": "c968dd0160e52f569d8a35f6978c22cb"
-  },
-  {
-    "url": "articles/2.9-release-alter.html",
-    "revision": "842d2cf8a91c896bf46ff406a900951e"
-  },
-  {
-    "url": "articles/2.9-release.html",
-    "revision": "7714799727658659001df91df0ab765d"
-  },
-  {
-    "url": "articles/index.html",
-    "revision": "28e08a2249444d784e1b13e59cb8e0ba"
-  },
-  {
-    "url": "articles/mpx-cli-next.html",
-    "revision": "9edaa671d20c5721ade80295c5487d9a"
-  },
-  {
-    "url": "articles/mpx-cube-ui.html",
-    "revision": "339facb42ee86b3f21cbf22195f0ea7c"
-  },
-  {
-    "url": "articles/mpx1.html",
-    "revision": "b09e8d522bf61190a9b2cf2c77b1c9e9"
-  },
-  {
-    "url": "articles/mpx2.html",
-    "revision": "628254e250ec236cfc816e2f6dcd3098"
-  },
-  {
-    "url": "articles/performance.html",
-    "revision": "62339e70fe8371692b301f390ece7791"
-  },
-  {
-    "url": "articles/size-control.html",
-    "revision": "8256646d0a2da95674f4f7deab424781"
-  },
-  {
-    "url": "articles/ts-derivation.html",
-    "revision": "15a7473ded3bb895564dce5ebb866f76"
-  },
-  {
-    "url": "articles/unit-test.html",
-    "revision": "2b5854814775bb3f12b5f87cd3807433"
-  },
-  {
-    "url": "assets/css/0.styles.f22478ca.css",
-    "revision": "20c20b6924c0d21c3946c0c2f73e3852"
-  },
-  {
-    "url": "assets/img/search.83621669.svg",
-    "revision": "83621669651b9a3d4bf64d1a670ad856"
-  },
-  {
-    "url": "assets/img/start-tips1.3b76ac97.png",
-    "revision": "3b76ac977e543ae853c79f5fb4bf648d"
-  },
-  {
-    "url": "assets/img/start-tips2.7d8836f8.png",
-    "revision": "7d8836f8026aa7e1813ec450276d21ad"
-  },
-  {
-    "url": "assets/js/1.4f7abe8f.js",
-    "revision": "12b0c0887ef86bb29d29e515a8254df4"
-  },
-  {
-    "url": "assets/js/10.0192acce.js",
-    "revision": "2e489bb3c3e4db7eb021df8227a78d17"
-  },
-  {
-    "url": "assets/js/100.f31ffd06.js",
-    "revision": "5204b3c7795a10953cdf3e4715daaeec"
-  },
-  {
-    "url": "assets/js/101.283d0363.js",
-    "revision": "a02fdbbcd800637e2e923ae5ce3f526f"
-  },
-  {
-    "url": "assets/js/102.094a0a16.js",
-    "revision": "c6084875d5966ca473c712a0c8eb8592"
-  },
-  {
-    "url": "assets/js/103.b34f6752.js",
-    "revision": "385380e54f276b92c30b8c769eb3500f"
-  },
-  {
-    "url": "assets/js/104.78f6358e.js",
-    "revision": "eeeb9573bb2e751a7efcf7b866d559a4"
-  },
-  {
-    "url": "assets/js/105.eb6680fc.js",
-    "revision": "fbbf2d50f5f790400258587ca7d319ab"
-  },
-  {
-    "url": "assets/js/106.471f03cf.js",
-    "revision": "3a2b07fdde55595e53ee58f20d93fb35"
-  },
-  {
-    "url": "assets/js/107.63fd18fd.js",
-    "revision": "8e1580b610cbe287488f9dc6a17c21a0"
-  },
-  {
-    "url": "assets/js/108.614260e9.js",
-    "revision": "960d17597536a94c9f465c1f183470ad"
-  },
-  {
-    "url": "assets/js/109.3da50cc1.js",
-    "revision": "85bb938489ee7bdb469106adf4520d52"
-  },
-  {
-    "url": "assets/js/11.d7a8d045.js",
-    "revision": "9bc45c1f6e30baa42b6f61119767b063"
-  },
-  {
-    "url": "assets/js/110.f74ff3a3.js",
-    "revision": "8b75f04fbf04424cc6c55c9f2dbec4a7"
-  },
-  {
-    "url": "assets/js/111.51932e54.js",
-    "revision": "08920579c78da19f6afbc656719be751"
-  },
-  {
-    "url": "assets/js/112.da7bd3e7.js",
-    "revision": "fe8d576cf790411d588601fae4414b03"
-  },
-  {
-    "url": "assets/js/113.caaf11a3.js",
-    "revision": "414f18602138c0fb69fb8e493d5659dd"
-  },
-  {
-    "url": "assets/js/114.16cda7ac.js",
-    "revision": "a50fb0cd876585fa9a81503bfee109f9"
-  },
-  {
-    "url": "assets/js/115.88124b12.js",
-    "revision": "3440d45dc5afd506ea94fd2159c1b733"
-  },
-  {
-    "url": "assets/js/116.4a116234.js",
-    "revision": "77eb5727ecdf8abd544ab6180852ab0a"
-  },
-  {
-    "url": "assets/js/117.e45c1b95.js",
-    "revision": "22697b9821bf9d90ef8542c9f525bc4f"
-  },
-  {
-    "url": "assets/js/118.9cbac09e.js",
-    "revision": "2ee13a56a4d9163596caa0d4c599d268"
-  },
-  {
-    "url": "assets/js/119.312e4c21.js",
-    "revision": "00e5ef4ca7025684be01fd3aefee9bdc"
-  },
-  {
-    "url": "assets/js/12.4d7217be.js",
-    "revision": "cf2ee26c47e0f0d7ee3f2bda3d92cf40"
-  },
-  {
-    "url": "assets/js/120.7a6b4035.js",
-    "revision": "7967e6835f248a74746ab0aa147c5177"
-  },
-  {
-    "url": "assets/js/14.7377c68f.js",
-    "revision": "b7514f8cb2d06cdaf18d71594d346192"
-  },
-  {
-    "url": "assets/js/15.6f885a83.js",
-    "revision": "40c60e1604dfac53cae641e598daf156"
-  },
-  {
-    "url": "assets/js/16.974f551e.js",
-    "revision": "df88e248621a7536527b6a547143dc57"
-  },
-  {
-    "url": "assets/js/17.e94e6745.js",
-    "revision": "afe65725c62091da4210e3c489f993f6"
-  },
-  {
-    "url": "assets/js/18.b1f7a4a2.js",
-    "revision": "2746cf3eaba809a8792ab8e911b6e6b1"
-  },
-  {
-    "url": "assets/js/19.62186e92.js",
-    "revision": "2e5228047eaba20f8fcc067431adb2a4"
-  },
-  {
-    "url": "assets/js/2.314c65b9.js",
-    "revision": "b8cf0e72859eb5f0e3fb7f67d27ef340"
-  },
-  {
-    "url": "assets/js/20.e9cd4de3.js",
-    "revision": "0045f2d19fe78531ce98e2db9aa6bdd5"
-  },
-  {
-    "url": "assets/js/21.217f8fa9.js",
-    "revision": "bd130990daa769d2fb63d19c19c31932"
-  },
-  {
-    "url": "assets/js/22.4cd3344f.js",
-    "revision": "db69d7654880d9f1c64373d171c787b6"
-  },
-  {
-    "url": "assets/js/23.365f9a87.js",
-    "revision": "cd54b4361286190f19e5c3067303c425"
-  },
-  {
-    "url": "assets/js/24.17777a13.js",
-    "revision": "eb0f29a4f257f591178f6201882b8298"
-  },
-  {
-    "url": "assets/js/25.889c07d7.js",
-    "revision": "5a964529d1992e5ecbe2f545980ee947"
-  },
-  {
-    "url": "assets/js/26.3aa9f276.js",
-    "revision": "03b8f1eb7e4dbebe65672c17914db693"
-  },
-  {
-    "url": "assets/js/27.1a35170a.js",
-    "revision": "7d5ed813bbe766a1748a0f21ee5569d8"
-  },
-  {
-    "url": "assets/js/28.3670fa46.js",
-    "revision": "6e3c125eaf27c095cad1d77637e4e80f"
-  },
-  {
-    "url": "assets/js/29.a911e510.js",
-    "revision": "363f3beef26a3abf2161c7e1278cfcae"
-  },
-  {
-    "url": "assets/js/3.145e69cd.js",
-    "revision": "1a153ade78a92885e52f897ec87c1c3e"
-  },
-  {
-    "url": "assets/js/30.04d1a7ea.js",
-    "revision": "578f318e24529539c775d12d5436fca8"
-  },
-  {
-    "url": "assets/js/31.ec06bf2f.js",
-    "revision": "00a3a86bdd7caad32fa0eec96cf4698a"
-  },
-  {
-    "url": "assets/js/32.f29d2cd1.js",
-    "revision": "7d811f0e993fbee6e7c7d6800f830839"
-  },
-  {
-    "url": "assets/js/33.936d018e.js",
-    "revision": "2714336439729f02460fbcd2af4a7c5c"
-  },
-  {
-    "url": "assets/js/34.f494d685.js",
-    "revision": "3f1099fca4eff5ef8e62348425a3e7ff"
-  },
-  {
-    "url": "assets/js/35.c3ed1ff7.js",
-    "revision": "8f836b9e9e2107c4c281203b190ef9a8"
-  },
-  {
-    "url": "assets/js/36.d2c9afa9.js",
-    "revision": "fe308138cfddd6e5819569d6609a7672"
-  },
-  {
-    "url": "assets/js/37.4e1eee2c.js",
-    "revision": "0efac40e5dd0e3fc8e94f0b8cda4f0b2"
-  },
-  {
-    "url": "assets/js/38.7826170e.js",
-    "revision": "8e5e62243cab1c2f356d0f77ffac4b04"
-  },
-  {
-    "url": "assets/js/39.094ffa40.js",
-    "revision": "4342737cae50042277b76721d79315d2"
-  },
-  {
-    "url": "assets/js/4.9489102c.js",
-    "revision": "c5f4723242bd00da0724a4737e1cb142"
-  },
-  {
-    "url": "assets/js/40.10d90636.js",
-    "revision": "76033b573e4da1b2cd491c8794b35af7"
-  },
-  {
-    "url": "assets/js/41.8351af86.js",
-    "revision": "16e3ded52f241dfcedb215d3e784ffd2"
-  },
-  {
-    "url": "assets/js/42.53972f6c.js",
-    "revision": "f59a9f585a6b06d80cebcdb81772acd0"
-  },
-  {
-    "url": "assets/js/43.e2b432ea.js",
-    "revision": "f0fb7f9acf7bfd42c8777fa0532a4f7c"
-  },
-  {
-    "url": "assets/js/44.e4242a1f.js",
-    "revision": "397c66f6b7866718983234d014f94e60"
-  },
-  {
-    "url": "assets/js/45.392413aa.js",
-    "revision": "51fcb57964dd90d24c02593411a478cd"
-  },
-  {
-    "url": "assets/js/46.22f9a9c6.js",
-    "revision": "d8f80568057ee4169e8f145ed42a28d8"
-  },
-  {
-    "url": "assets/js/47.2bd2cecc.js",
-    "revision": "09684550aea02b1058ea119724a2fed1"
-  },
-  {
-    "url": "assets/js/48.55792a30.js",
-    "revision": "6900523d21b183f5a8aae5e2799674cc"
-  },
-  {
-    "url": "assets/js/49.cde94a79.js",
-    "revision": "3c992f7d6d21537ae32091b611215346"
-  },
-  {
-    "url": "assets/js/5.12d049b6.js",
-    "revision": "d489c45818dd2315c2c97a3437acd6cf"
-  },
-  {
-    "url": "assets/js/50.42e34e52.js",
-    "revision": "1831c8d5de17eeed779edb5f28385671"
-  },
-  {
-    "url": "assets/js/51.90dfa84e.js",
-    "revision": "531ac61e50a863e5bb409b2f893c4240"
-  },
-  {
-    "url": "assets/js/52.10bb0251.js",
-    "revision": "79eb24907253da0d7120ae9dcf34c73f"
-  },
-  {
-    "url": "assets/js/53.7207ffc5.js",
-    "revision": "53164733a3c1e6f29a4ca6719591b70b"
-  },
-  {
-    "url": "assets/js/54.af3d3dcd.js",
-    "revision": "f175b1f13236f10b690d5e86b9bb368d"
-  },
-  {
-    "url": "assets/js/55.2d6ae2e1.js",
-    "revision": "eb8dd3e8ff4c57ed143c9778ec15bd4b"
-  },
-  {
-    "url": "assets/js/56.9aec9a9e.js",
-    "revision": "5ebf6c52558f0709c076b202a55b9fa3"
-  },
-  {
-    "url": "assets/js/57.9d9ddcbd.js",
-    "revision": "99117ec556700247d528c7acd29c203b"
-  },
-  {
-    "url": "assets/js/58.50eb3b91.js",
-    "revision": "e7f565c15f3cab12bf1eedf0659fd523"
-  },
-  {
-    "url": "assets/js/59.27106fbb.js",
-    "revision": "f485b2d1b0a56c26176ea8f44f9e2738"
-  },
-  {
-    "url": "assets/js/6.6ea91b28.js",
-    "revision": "5fac1ead0dd12855a5d8976740456131"
-  },
-  {
-    "url": "assets/js/60.a47e5279.js",
-    "revision": "f6f5d7dc973878332b5b1d0157f92135"
-  },
-  {
-    "url": "assets/js/61.74ebd7d9.js",
-    "revision": "ae27832c8fa41953cc04725e0d5001d0"
-  },
-  {
-    "url": "assets/js/62.4bf212f9.js",
-    "revision": "2ae416136507b54b6c19f00f94ea9dd4"
-  },
-  {
-    "url": "assets/js/63.b54aca3e.js",
-    "revision": "80860c2eb8c0374ffd19206c3653a451"
-  },
-  {
-    "url": "assets/js/64.399e72b8.js",
-    "revision": "d9f80db9175e32d06a3ea1077135f0e4"
-  },
-  {
-    "url": "assets/js/65.a8c627d3.js",
-    "revision": "779b4c30258b0bd6aad23a1436bc1b92"
-  },
-  {
-    "url": "assets/js/66.7f19cc4b.js",
-    "revision": "2e79a49876a6073bd459a1575199269d"
-  },
-  {
-    "url": "assets/js/67.e57db97e.js",
-    "revision": "78a67eab42f946943b9651d089a4ef56"
-  },
-  {
-    "url": "assets/js/68.ebe4213c.js",
-    "revision": "93e3246379979219b4af948dba1bc71a"
-  },
-  {
-    "url": "assets/js/69.2d309866.js",
-    "revision": "f5dc40ff8ea229a2fa6ac697fcf42475"
-  },
-  {
-    "url": "assets/js/7.01e4e942.js",
-    "revision": "e4797b632e362ecd096a64375e7003ae"
-  },
-  {
-    "url": "assets/js/70.60ae83e6.js",
-    "revision": "acba0df2ef73d360ec4686677942d0a4"
-  },
-  {
-    "url": "assets/js/71.188d7bca.js",
-    "revision": "cf49e628f26e54631f9a3fcb3f909fbc"
-  },
-  {
-    "url": "assets/js/72.3f7bfd0d.js",
-    "revision": "8b3a18399033b6fbc07696b31226998a"
-  },
-  {
-    "url": "assets/js/73.171571e4.js",
-    "revision": "4152daed0ad6a65b39b3f20c0ba648ca"
-  },
-  {
-    "url": "assets/js/74.3d5cfaba.js",
-    "revision": "0fbea56200387d87caa90abc9f1c807d"
-  },
-  {
-    "url": "assets/js/75.093d716c.js",
-    "revision": "0abd2acf22923e75799377e678b91077"
-  },
-  {
-    "url": "assets/js/76.50d84c61.js",
-    "revision": "c299d111edbf4d3c46c44c9374a3e4f3"
-  },
-  {
-    "url": "assets/js/77.7bc0f013.js",
-    "revision": "6d86d8510f2fb24917c56fcd00333e12"
-  },
-  {
-    "url": "assets/js/78.e2ded2d4.js",
-    "revision": "4058b878e45344934acd21b46e02795f"
-  },
-  {
-    "url": "assets/js/79.f7eeb76b.js",
-    "revision": "8e9491e599a437e2d5affbbfbd58559c"
-  },
-  {
-    "url": "assets/js/8.ba7f6ace.js",
-    "revision": "3db41c27492ef5d04cfe98f3ba38c493"
-  },
-  {
-    "url": "assets/js/80.41418749.js",
-    "revision": "76617f3118e34b77c5ce0cddcebd6ec4"
-  },
-  {
-    "url": "assets/js/81.16e2cc83.js",
-    "revision": "2ad3cec1add1ede3456c3c89a27f2a07"
-  },
-  {
-    "url": "assets/js/82.56c0d7c1.js",
-    "revision": "5ef8ed46677490c1264882fe0c1eade8"
-  },
-  {
-    "url": "assets/js/83.ea65d6b1.js",
-    "revision": "2629982f8da068c64b96af5cb7cc0170"
-  },
-  {
-    "url": "assets/js/84.d50d3d09.js",
-    "revision": "cdc0e25e4f147f635e4c04c409f99935"
-  },
-  {
-    "url": "assets/js/85.1eed1486.js",
-    "revision": "99a6b518c198712eba4adb916001461c"
-  },
-  {
-    "url": "assets/js/86.1ab04b8d.js",
-    "revision": "9218ab6fe0cc3e0d0cc9465ae1f04957"
-  },
-  {
-    "url": "assets/js/87.392384e7.js",
-    "revision": "b247ed9b2da1e82b477313aa886db306"
-  },
-  {
-    "url": "assets/js/88.a95133cd.js",
-    "revision": "4036de5ef3a7b6e9a318942ba6faf560"
-  },
-  {
-    "url": "assets/js/89.213efaae.js",
-    "revision": "fa74c388f721c266e3ae5f6edbb4bd85"
-  },
-  {
-    "url": "assets/js/9.26319460.js",
-    "revision": "b5a027c58f63f184432e7851068830a1"
-  },
-  {
-    "url": "assets/js/90.ef03688f.js",
-    "revision": "58920a350be92626cfd2cf15e640fd3d"
-  },
-  {
-    "url": "assets/js/91.43930d52.js",
-    "revision": "bff38c73ab05c14ddc5da88e4ba036e1"
-  },
-  {
-    "url": "assets/js/92.ae5e9611.js",
-    "revision": "b3faf9fd83b537307278864b0e5464ec"
-  },
-  {
-    "url": "assets/js/93.3cdab647.js",
-    "revision": "f66789e02a5ffd1afc485242e108c860"
-  },
-  {
-    "url": "assets/js/94.72df7b53.js",
-    "revision": "bd73044a9f346ca23782d615da42d4a4"
-  },
-  {
-    "url": "assets/js/95.c8e36604.js",
-    "revision": "e40ad2a5dfe1e25c058962cf86660287"
-  },
-  {
-    "url": "assets/js/96.1ebdc00d.js",
-    "revision": "2c67b7841bd6c48f9af68c6d95c8ffe4"
-  },
-  {
-    "url": "assets/js/97.fa1ed9e7.js",
-    "revision": "7e054747dd126fecc7e9d670794002b1"
-  },
-  {
-    "url": "assets/js/98.939cb6ef.js",
-    "revision": "56b3178533a666894baddadd8ab9bc06"
-  },
-  {
-    "url": "assets/js/99.96c5a70e.js",
-    "revision": "0cbc93b6dce3419f25775487b0d1407a"
-  },
-  {
-    "url": "assets/js/app.84c88b57.js",
-    "revision": "1067055bba375603bb5781924201a8a5"
-  },
-  {
-    "url": "baidu_verify_codeva-GYcT5ujCTB.html",
-    "revision": "05e79aba57b6dbeeb58f6aadc23f0074"
-  },
-  {
-    "url": "desc.html",
-    "revision": "f46e5deaa0b32c74a5465f7e57401fcd"
-  },
-  {
-    "url": "guide/advance/ability-compatible.html",
-    "revision": "3b8afd343db4d74cc203261e4141a4af"
-  },
-  {
-    "url": "guide/advance/async-subpackage.html",
-    "revision": "bc5eb1b9ec36b9d874620ec322f4d323"
-  },
-  {
-    "url": "guide/advance/custom-output-path.html",
-    "revision": "72a926d622c483691ffc39f9aa346f2d"
-  },
-  {
-    "url": "guide/advance/dll-plugin.html",
-    "revision": "e8d95670c94231a0a5d0c9ac40d23795"
-  },
-  {
-    "url": "guide/advance/i18n.html",
-    "revision": "f81fab30016db6683dc67d7f87ca65dd"
-  },
-  {
-    "url": "guide/advance/image-process.html",
-    "revision": "4c139d9d8d72efe3136d29bb862e4fe4"
-  },
-  {
-    "url": "guide/advance/mixin.html",
-    "revision": "5989556c2b6a6285617fcb2775e0b403"
-  },
-  {
-    "url": "guide/advance/npm.html",
-    "revision": "acc08a0cd161d56e73c5ea141affc99c"
-  },
-  {
-    "url": "guide/advance/pinia.html",
-    "revision": "2359fa01373e8bfb92e81ff3b275d5a8"
-  },
-  {
-    "url": "guide/advance/platform.html",
-    "revision": "83cd97f6ec8954c086b2b0361fc608c8"
-  },
-  {
-    "url": "guide/advance/plugin.html",
-    "revision": "7aecc3bfede3b13de6afc7a20e25e8af"
-  },
-  {
-    "url": "guide/advance/progressive.html",
-    "revision": "13fd4ea947dd5e9c0b3c4cb2ffff6ef4"
-  },
-  {
-    "url": "guide/advance/provide-inject.html",
-    "revision": "94f05629f5f4c9b7c9808d87e957eea8"
-  },
-  {
-    "url": "guide/advance/resource-resolve.html",
-    "revision": "cf43ecea0f34b0087d6ea2310d68d903"
-  },
-  {
-    "url": "guide/advance/size-report.html",
-    "revision": "e9b31045eeb57a567487eb0cec8c1a55"
-  },
-  {
-    "url": "guide/advance/ssr.html",
-    "revision": "a9a2ab6192f90ecf01f14e5e23ca3afc"
-  },
-  {
-    "url": "guide/advance/store.html",
-    "revision": "21fef840c6de0b5e61c831a76077e497"
-  },
-  {
-    "url": "guide/advance/subpackage.html",
-    "revision": "b43e2e4c902b2e4d10b58d5b8406b880"
-  },
-  {
-    "url": "guide/advance/utility-first-css.html",
-    "revision": "203f30c86d031caab57667d23d874a8c"
-  },
-  {
-    "url": "guide/basic/class-style-binding.html",
-    "revision": "b8f5d12016d754c0504aab2e06a8dda2"
-  },
-  {
-    "url": "guide/basic/component.html",
-    "revision": "c8e7cf6524386db839da0964dde4530a"
-  },
-  {
-    "url": "guide/basic/conditional-render.html",
-    "revision": "458a0e675d9fc7e4f4ed3a3d7cb10d2f"
-  },
-  {
-    "url": "guide/basic/css.html",
-    "revision": "a60840e3e0ab988469dd9701b8d9740f"
-  },
-  {
-    "url": "guide/basic/event.html",
-    "revision": "34a29012d67135507b22853092744b7a"
-  },
-  {
-    "url": "guide/basic/ide.html",
-    "revision": "84d9ce263667bac51aa966600d81f452"
-  },
-  {
-    "url": "guide/basic/intro.html",
-    "revision": "3564335cfab7690662f7e6981e28384c"
-  },
-  {
-    "url": "guide/basic/list-render.html",
-    "revision": "81564ae12132bfdeee22556dc29cf2aa"
-  },
-  {
-    "url": "guide/basic/option-chain.html",
-    "revision": "b8af0aca729f041f5d32e1df83383f8c"
-  },
-  {
-    "url": "guide/basic/reactive.html",
-    "revision": "fa1199d698f37cd18ab5e1cbd1fcde85"
-  },
-  {
-    "url": "guide/basic/refs.html",
-    "revision": "1ad3afc97da4858d06e82df08d4715ef"
-  },
-  {
-    "url": "guide/basic/single-file.html",
-    "revision": "82003549b10795b0c603a66854e2a89f"
-  },
-  {
-    "url": "guide/basic/start.html",
-    "revision": "06f28accbba57fc3d2696c3303a17ca0"
-  },
-  {
-    "url": "guide/basic/template.html",
-    "revision": "ac4adffc987166bd6b014e4874f9807b"
-  },
-  {
-    "url": "guide/basic/two-way-binding.html",
-    "revision": "9f94591106431eae092285cc63bf73b3"
-  },
-  {
-    "url": "guide/composition-api/composition-api.html",
-    "revision": "f372f2e4334ed4580d06f8fdfd741e9a"
-  },
-  {
-    "url": "guide/composition-api/reactive-api.html",
-    "revision": "a8f594693bbd5ae4af7644ea13f697fb"
-  },
-  {
-    "url": "guide/extend/api-proxy.html",
-    "revision": "13330ecd6678b2e40e034d8ad425029c"
-  },
-  {
-    "url": "guide/extend/fetch.html",
-    "revision": "6a54e8095f85d420cd97707a5d3684c7"
-  },
-  {
-    "url": "guide/extend/index.html",
-    "revision": "258dede7e9407b44d9998bf7fe1fd3b0"
-  },
-  {
-    "url": "guide/extend/mock.html",
-    "revision": "2951d26e9b525fb4c94afabf4ac9924f"
-  },
-  {
-    "url": "guide/migrate/2.7.html",
-    "revision": "fc84b08b7d29082e1dbb1999d900a704"
-  },
-  {
-    "url": "guide/migrate/2.8.html",
-    "revision": "28587490b791a1b8ba35c7d92f12a6de"
-  },
-  {
-    "url": "guide/migrate/2.9.html",
-    "revision": "658e207bc34b8a18cb8ed68442c62712"
-  },
-  {
-    "url": "guide/migrate/mpx-cli-3.html",
-    "revision": "f91fdb6ac9c54c8c865d19637c7ee591"
-  },
-  {
-    "url": "guide/platform/index.html",
-    "revision": "b0af12d7eaf7882a8aea01d8202c4d02"
-  },
-  {
-    "url": "guide/platform/miniprogram.html",
-    "revision": "2b5ed743d1a4eeab70f2b4f8051eefba"
-  },
-  {
-    "url": "guide/platform/rn.html",
-    "revision": "cb10026541b586deac1fc9c234328e78"
-  },
-  {
-    "url": "guide/platform/web.html",
-    "revision": "e99c298705c937e4965c229cd7e4a2b9"
-  },
-  {
-    "url": "guide/tool/e2e-test.html",
-    "revision": "858693cd05b55bc582f420643ef9e514"
-  },
-  {
-    "url": "guide/tool/ts.html",
-    "revision": "a1b3d19233cad159d0bd946a2ea3eb41"
-  },
-  {
-    "url": "guide/tool/unit-test.html",
-    "revision": "bf791feac87c5709dfb9e3fd326c99fd"
-  },
-  {
-    "url": "guide/understand/compile.html",
-    "revision": "6e9a16d929784bcdbe34ca2564c47a18"
-  },
-  {
-    "url": "guide/understand/runtime.html",
-    "revision": "c7008c7a29fefb544fb600bd71677b7a"
-  },
-  {
-    "url": "index.html",
-    "revision": "51c2b45fb4b6fac444845411d55acbca"
-  },
-  {
-    "url": "logo.png",
-    "revision": "b362e51deb26ea4ff1d0daa6da1e7c44"
-  },
-  {
-    "url": "rn-api.html",
-    "revision": "41b9df161419f392a9a40e6b7b162ae3"
-  },
-  {
-    "url": "rn-component.html",
-    "revision": "e0533defbccf789f8f8e2c15ae3ebd22"
-  },
-  {
-    "url": "rn-style.html",
-    "revision": "163003bbcbe6b7665c2f420daee35296"
-  },
-  {
-    "url": "rn-template.html",
-    "revision": "71cca96a9f67d8ddb84cb284342b8329"
-  }
-].concat(self.__precacheManifest || []);
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
-addEventListener('message', event => {
-  const replyPort = event.ports[0]
-  const message = event.data
-  if (replyPort && message && message.type === 'skip-waiting') {
-    event.waitUntil(
-      self.skipWaiting().then(
-        () => replyPort.postMessage({ error: null }),
-        error => replyPort.postMessage({ error })
-      )
-    )
-  }
-})

From 042cccc9ead4f0e80669507efd59f9a58991d65e Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 11 Feb 2025 15:58:01 +0800
Subject: [PATCH 013/126] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96recycle-view?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/wx/mpx-recycle-view.mpx    | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index 37b04cc613..2c26ec058d 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -23,11 +23,11 @@
       <view class="infinite-list" wx:style="{{contentStyle}}">
         <view
           wx:for="{{visibleData}}"
-          wx:key="index"
+          wx:key="_index"
           class="infinite-list-item"
           wx:style="height: {{itemSize.height}}px; overflow: hidden"
         >
-          <recycle-item current-item="{{item.item}}" />
+          <recycle-item current-item="{{item}}" />
         </view>
       </view>
     </view>
@@ -96,10 +96,7 @@ createComponent({
     },
     _listData() {
       return this.listData.map((item, index) => {
-        return {
-          _index: `_${index}`,
-          item
-        }
+        return Object.assign({}, item, { _index: `_${index}` })
       })
     },
     _scrollTop() {
@@ -113,7 +110,7 @@ createComponent({
       return Math.min(this.start, this.bufferScale * this.visibleCount)
     },
     belowCount() {
-      return Math.min(this.listData.length - this.end, this.bufferScale * this.visibleCount)
+      return Math.min(this._listData.length - this.end, this.bufferScale * this.visibleCount)
     },
     visibleData() {
       const start = this.start - this.aboveCount

From b13b4acec0c58ff20f712facfa5f4e64ef2c302f Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 11 Feb 2025 15:58:24 +0800
Subject: [PATCH 014/126] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96recycle-view?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/{wx => extend}/mpx-recycle-item-default.mpx        | 0
 .../lib/runtime/components/{wx => extend}/mpx-recycle-view.mpx    | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/webpack-plugin/lib/runtime/components/{wx => extend}/mpx-recycle-item-default.mpx (100%)
 rename packages/webpack-plugin/lib/runtime/components/{wx => extend}/mpx-recycle-view.mpx (100%)

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-item-default.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
rename to packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-item-default.mpx
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
rename to packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx

From dd88f94035cb14b8aedf6e9a60d00d886e969313 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 11 Feb 2025 17:03:34 +0800
Subject: [PATCH 015/126] =?UTF-8?q?feat:=20=E7=BC=96=E8=AF=91=E6=97=B6?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=86=85=E7=BD=AE=E6=89=A9=E5=B1=95=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/wx/component-config/index.js     |  4 +++-
 .../wx/component-config/recycle-view.js       | 22 +++++++++++++++++++
 .../components/extend/mpx-recycle-view.mpx    |  6 ++---
 .../lib/template-compiler/compiler.js         |  4 ++++
 4 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
index 40281a2953..ca8b4638a2 100644
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
@@ -42,6 +42,7 @@ const wxs = require('./wxs')
 const component = require('./component')
 const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
+const recycleView = require('./recycle-view')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -125,6 +126,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     hyphenTagName({ print }),
     label({ print }),
     component(),
-    rootPortal({ print })
+    rootPortal({ print }),
+    recycleView({ print })
   ]
 }
diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js
new file mode 100644
index 0000000000..522fe7e658
--- /dev/null
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js
@@ -0,0 +1,22 @@
+const TAG_NAME = 'recycle-view'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      el.isExtend = true
+      return 'mpx-recycle-view'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      el.isExtend = true
+      return 'mpx-recycle-view'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      el.isExtend = true
+      return 'mpx-recycle-view'
+    }
+  }
+}
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 2c26ec058d..9bd40c6484 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -1,6 +1,6 @@
 <template>
   <scroll-view
-    class="mpx-recycle-list"
+    class="mpx-recycle-view"
     wx:ref
     type="list"
     scroll-y="{{scrollY}}"
@@ -153,7 +153,7 @@ createComponent({
     this.initPositions()
     const query = mpx.createSelectorQuery().in(this)
     query
-      .select('.mpx-recycle-list')
+      .select('.mpx-recycle-view')
       .boundingClientRect((rect) => {
         this.containerHeight = rect.height
         this.start = this.getStartIndex(this.scrollTop)
@@ -242,7 +242,7 @@ createComponent({
   }
 </script>
 <style scoped>
-  .mpx-recycle-list {
+  .mpx-recycle-view {
     position: relative;
     overflow: hidden;
   }
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index a2f5c7165d..eab3d9101b 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2339,6 +2339,10 @@ function processBuiltInComponents (el, meta) {
     }
     const tag = el.tag
     if (!meta.builtInComponentsMap[tag]) {
+      if (el.isExtend) {
+        meta.builtInComponentsMap[tag] = `${builtInComponentsPrefix}/extend/${tag}`
+        return
+      }
       if (isReact(mode)) {
         meta.builtInComponentsMap[tag] = `${builtInComponentsPrefix}/react/dist/${tag}`
       } else {

From 0731d04dbd3f9322daa44c58e775748adc5ea5ba Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 11 Feb 2025 19:45:22 +0800
Subject: [PATCH 016/126] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=B0=8F?=
 =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=B9=B3=E5=8F=B0recycle-view=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E7=BB=84=E4=BB=B6=E6=B3=A8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/webpack-plugin/lib/json-compiler/index.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/webpack-plugin/lib/json-compiler/index.js b/packages/webpack-plugin/lib/json-compiler/index.js
index 755d7863d5..ee5d51697c 100644
--- a/packages/webpack-plugin/lib/json-compiler/index.js
+++ b/packages/webpack-plugin/lib/json-compiler/index.js
@@ -186,6 +186,14 @@ module.exports = function (content) {
     json.usingComponents = json.usingComponents || {}
   }
 
+  if (mode === 'wx' || mode === 'ali') {
+    if (isApp) {
+      json.usingComponents = Object.assign({}, {
+        'recycle-view': require.resolve('../runtime/components/extend/mpx-recycle-view.mpx')
+      }, json.usingComponents)
+    }
+  }
+
   // 快应用补全json配置，必填项
   if (mode === 'qa' && isApp) {
     const defaultConf = {

From 109e5dd00b9215a96fd019dfb3636207d88e7f64 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 12 Feb 2025 16:50:40 +0800
Subject: [PATCH 017/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9web,rn?=
 =?UTF-8?q?=E5=B9=B3=E5=8F=B0recycle-view=E5=85=A8=E5=B1=80=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B3=A8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/wx/component-config/index.js     |  4 +---
 .../wx/component-config/recycle-view.js       | 22 -------------------
 .../webpack-plugin/lib/react/processJSON.js   |  4 ++++
 .../lib/template-compiler/compiler.js         |  4 ----
 .../webpack-plugin/lib/web/processJSON.js     |  4 ++++
 5 files changed, 9 insertions(+), 29 deletions(-)
 delete mode 100644 packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
index ca8b4638a2..40281a2953 100644
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
@@ -42,7 +42,6 @@ const wxs = require('./wxs')
 const component = require('./component')
 const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
-const recycleView = require('./recycle-view')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -126,7 +125,6 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     hyphenTagName({ print }),
     label({ print }),
     component(),
-    rootPortal({ print }),
-    recycleView({ print })
+    rootPortal({ print })
   ]
 }
diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js
deleted file mode 100644
index 522fe7e658..0000000000
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const TAG_NAME = 'recycle-view'
-
-module.exports = function ({ print }) {
-  return {
-    test: TAG_NAME,
-    web (tag, { el }) {
-      el.isBuiltIn = true
-      el.isExtend = true
-      return 'mpx-recycle-view'
-    },
-    ios (tag, { el }) {
-      el.isBuiltIn = true
-      el.isExtend = true
-      return 'mpx-recycle-view'
-    },
-    android (tag, { el }) {
-      el.isBuiltIn = true
-      el.isExtend = true
-      return 'mpx-recycle-view'
-    }
-  }
-}
diff --git a/packages/webpack-plugin/lib/react/processJSON.js b/packages/webpack-plugin/lib/react/processJSON.js
index 1f8fcbf2a3..d1c8f8af11 100644
--- a/packages/webpack-plugin/lib/react/processJSON.js
+++ b/packages/webpack-plugin/lib/react/processJSON.js
@@ -101,6 +101,10 @@ module.exports = function (jsonContent, {
 
     if (!isApp) {
       rulesRunnerOptions.mainKey = ctorType
+    } else {
+      jsonObj.usingComponents = Object.assign({}, {
+        'recycle-view': require.resolve('../runtime/components/extend/mpx-recycle-view.mpx')
+      }, jsonObj.usingComponents)
     }
 
     const rulesRunner = getRulesRunner(rulesRunnerOptions)
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index eab3d9101b..a2f5c7165d 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2339,10 +2339,6 @@ function processBuiltInComponents (el, meta) {
     }
     const tag = el.tag
     if (!meta.builtInComponentsMap[tag]) {
-      if (el.isExtend) {
-        meta.builtInComponentsMap[tag] = `${builtInComponentsPrefix}/extend/${tag}`
-        return
-      }
       if (isReact(mode)) {
         meta.builtInComponentsMap[tag] = `${builtInComponentsPrefix}/react/dist/${tag}`
       } else {
diff --git a/packages/webpack-plugin/lib/web/processJSON.js b/packages/webpack-plugin/lib/web/processJSON.js
index 49abb713b0..505120da78 100644
--- a/packages/webpack-plugin/lib/web/processJSON.js
+++ b/packages/webpack-plugin/lib/web/processJSON.js
@@ -102,6 +102,10 @@ module.exports = function (jsonContent, {
 
     if (!isApp) {
       rulesRunnerOptions.mainKey = ctorType
+    } else {
+      jsonObj.usingComponents = Object.assign({}, {
+        'recycle-view': require.resolve('../runtime/components/extend/mpx-recycle-view.mpx')
+      }, jsonObj.usingComponents)
     }
 
     const rulesRunner = getRulesRunner(rulesRunnerOptions)

From 985aec0ebb2dd6a5a8fe8a3d54ceee94f7167e65 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 12 Feb 2025 19:38:56 +0800
Subject: [PATCH 018/126] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Eweb,=20?=
 =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E7=8E=AF=E5=A2=83=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=B7=A8=E5=B9=B3=E5=8F=B0=E7=BB=84=E4=BB=B6=E7=BC=96=E8=AF=91?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/webpack-plugin/lib/index.js          |  2 ++
 .../webpack-plugin/lib/json-compiler/index.js | 17 +++++++++-----
 .../wx/component-config/recycle-view.js       | 22 +++++++++++++++++++
 .../webpack-plugin/lib/react/processJSON.js   | 19 +++++++++++-----
 packages/webpack-plugin/lib/utils/const.js    |  3 ++-
 .../webpack-plugin/lib/web/processJSON.js     | 19 +++++++++++-----
 6 files changed, 66 insertions(+), 16 deletions(-)
 create mode 100644 packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js

diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js
index 0216e633ef..c694fe7eee 100644
--- a/packages/webpack-plugin/lib/index.js
+++ b/packages/webpack-plugin/lib/index.js
@@ -191,6 +191,7 @@ class MpxWebpackPlugin {
     options.retryRequireAsync = options.retryRequireAsync || false
     options.optimizeSize = options.optimizeSize || false
     options.dynamicComponentRules = options.dynamicComponentRules || {}// 运行时组件配置
+    options.useExtendComponents = options.useExtendComponents
     this.options = options
     // Hack for buildDependencies
     const rawResolveBuildDependencies = FileSystemInfo.prototype.resolveBuildDependencies
@@ -726,6 +727,7 @@ class MpxWebpackPlugin {
           // 若配置disableRequireAsync=true, 则全平台构建不支持异步分包
           supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode)),
           partialCompileRules: this.options.partialCompileRules,
+          useExtendComponents: this.options.useExtendComponents,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
               hasPage: false,
diff --git a/packages/webpack-plugin/lib/json-compiler/index.js b/packages/webpack-plugin/lib/json-compiler/index.js
index ee5d51697c..3c86ccf823 100644
--- a/packages/webpack-plugin/lib/json-compiler/index.js
+++ b/packages/webpack-plugin/lib/json-compiler/index.js
@@ -12,7 +12,7 @@ const createHelpers = require('../helpers')
 const createJSONHelper = require('./helper')
 const RecordIndependentDependency = require('../dependencies/RecordIndependentDependency')
 const RecordRuntimeInfoDependency = require('../dependencies/RecordRuntimeInfoDependency')
-const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR, JSON_JS_EXT } = require('../utils/const')
+const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR, JSON_JS_EXT, EXTEND_COMPONENTS_LIST } = require('../utils/const')
 const resolve = require('../utils/resolve')
 const resolveTabBarPath = require('../utils/resolve-tab-bar-path')
 const normalize = require('../utils/normalize')
@@ -187,10 +187,17 @@ module.exports = function (content) {
   }
 
   if (mode === 'wx' || mode === 'ali') {
-    if (isApp) {
-      json.usingComponents = Object.assign({}, {
-        'recycle-view': require.resolve('../runtime/components/extend/mpx-recycle-view.mpx')
-      }, json.usingComponents)
+    const { useExtendComponents } = mpx
+    if (isApp && useExtendComponents) {
+      const extendComponents = {}
+        useExtendComponents.forEach((name) => {
+          if (EXTEND_COMPONENTS_LIST.includes(name)) {
+            extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
+          } else {
+            emitWarning(`extend component ${name} is not supported!`)
+          }
+        })
+        json.usingComponents = Object.assign({}, extendComponents, json.usingComponents)
     }
   }
 
diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js
new file mode 100644
index 0000000000..522fe7e658
--- /dev/null
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js
@@ -0,0 +1,22 @@
+const TAG_NAME = 'recycle-view'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      el.isExtend = true
+      return 'mpx-recycle-view'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      el.isExtend = true
+      return 'mpx-recycle-view'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      el.isExtend = true
+      return 'mpx-recycle-view'
+    }
+  }
+}
diff --git a/packages/webpack-plugin/lib/react/processJSON.js b/packages/webpack-plugin/lib/react/processJSON.js
index d1c8f8af11..ed0eb26152 100644
--- a/packages/webpack-plugin/lib/react/processJSON.js
+++ b/packages/webpack-plugin/lib/react/processJSON.js
@@ -10,7 +10,7 @@ const getJSONContent = require('../utils/get-json-content')
 const resolve = require('../utils/resolve')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
-const { RESOLVE_IGNORED_ERR } = require('../utils/const')
+const { RESOLVE_IGNORED_ERR, EXTEND_COMPONENTS_LIST } = require('../utils/const')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 
 module.exports = function (jsonContent, {
@@ -30,7 +30,8 @@ module.exports = function (jsonContent, {
     mode,
     srcMode,
     env,
-    projectRoot
+    projectRoot,
+    useExtendComponents
   } = mpx
 
   const context = loaderContext.context
@@ -102,9 +103,17 @@ module.exports = function (jsonContent, {
     if (!isApp) {
       rulesRunnerOptions.mainKey = ctorType
     } else {
-      jsonObj.usingComponents = Object.assign({}, {
-        'recycle-view': require.resolve('../runtime/components/extend/mpx-recycle-view.mpx')
-      }, jsonObj.usingComponents)
+      if (useExtendComponents) {
+        const extendComponents = {}
+        useExtendComponents.forEach((name) => {
+          if (EXTEND_COMPONENTS_LIST.includes(name)) {
+            extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
+          } else {
+            emitWarning(`extend component ${name} is not supported!`)
+          }
+        })
+        jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
+      }
     }
 
     const rulesRunner = getRulesRunner(rulesRunnerOptions)
diff --git a/packages/webpack-plugin/lib/utils/const.js b/packages/webpack-plugin/lib/utils/const.js
index 88e22096b7..3b556cae40 100644
--- a/packages/webpack-plugin/lib/utils/const.js
+++ b/packages/webpack-plugin/lib/utils/const.js
@@ -6,5 +6,6 @@ module.exports = {
   JSON_JS_EXT: '.json.js',
   MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
   MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId
-  PARENT_MODULE_ID: '__pid'
+  PARENT_MODULE_ID: '__pid',
+  EXTEND_COMPONENTS_LIST: ['recycle-view'] // 扩展组件列表
 }
diff --git a/packages/webpack-plugin/lib/web/processJSON.js b/packages/webpack-plugin/lib/web/processJSON.js
index 505120da78..7bc882eb5e 100644
--- a/packages/webpack-plugin/lib/web/processJSON.js
+++ b/packages/webpack-plugin/lib/web/processJSON.js
@@ -10,7 +10,7 @@ const getJSONContent = require('../utils/get-json-content')
 const resolve = require('../utils/resolve')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
-const { RESOLVE_IGNORED_ERR } = require('../utils/const')
+const { RESOLVE_IGNORED_ERR, EXTEND_COMPONENTS_LIST } = require('../utils/const')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 
 module.exports = function (jsonContent, {
@@ -30,7 +30,8 @@ module.exports = function (jsonContent, {
     mode,
     srcMode,
     env,
-    projectRoot
+    projectRoot,
+    useExtendComponents
   } = mpx
 
   const context = loaderContext.context
@@ -103,9 +104,17 @@ module.exports = function (jsonContent, {
     if (!isApp) {
       rulesRunnerOptions.mainKey = ctorType
     } else {
-      jsonObj.usingComponents = Object.assign({}, {
-        'recycle-view': require.resolve('../runtime/components/extend/mpx-recycle-view.mpx')
-      }, jsonObj.usingComponents)
+      // if (useExtendComponents) {
+      //   const extendComponents = {}
+      //   useExtendComponents.forEach((name) => {
+      //     if (EXTEND_COMPONENTS_LIST.includes(name)) {
+      //       extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
+      //     } else {
+      //       emitWarning(`extend component ${name} is not supported!`)
+      //     }
+      //   })
+      //   jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
+      // }
     }
 
     const rulesRunner = getRulesRunner(rulesRunnerOptions)

From 0df56f37d09ff0a94d283344545eb6fd3c5d0ccc Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 13 Feb 2025 15:58:29 +0800
Subject: [PATCH 019/126] =?UTF-8?q?feat:=20item=E6=94=AF=E6=8C=81=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.mpx    | 432 ++++++++++--------
 1 file changed, 247 insertions(+), 185 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 9bd40c6484..8ee04fc4a2 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -16,16 +16,13 @@
     bindscrolltolower="onScrollToLower"
   >
     <view class="content-wrapper">
-      <view
-        class="infinite-list-placeholder"
-        wx:style="{{placeholderStyle}}"
-      ></view>
+      <view class="infinite-list-placeholder" wx:style="{{placeholderStyle}}"></view>
       <view class="infinite-list" wx:style="{{contentStyle}}">
         <view
           wx:for="{{visibleData}}"
           wx:key="_index"
           class="infinite-list-item"
-          wx:style="height: {{itemSize.height}}px; overflow: hidden"
+          wx:style="height: {{item._size.height}}px; width: {{item._size.width}}px; overflow: hidden"
         >
           <recycle-item current-item="{{item}}" />
         </view>
@@ -34,202 +31,267 @@
   </scroll-view>
 </template>
 <script>
-import mpx, { createComponent } from '@mpxjs/core'
+  import mpx, { createComponent } from '@mpxjs/core'
 
-createComponent({
-  properties: {
-    scrollY: Boolean,
-    height: {
-      type: Number,
-      value: 0
-    },
-    width: {
-      type: Number,
-      value: 0
-    },
-    // 预估尺寸
-    itemSize: Object,
-    bufferScale: {
-      type: Number,
-      value: 2
-    },
-    listData: Array,
-    scrollTop: {
-      type: Number,
-      value: 0
-    },
-    scrollWithAnimation: Boolean,
-    enableBackToTop: Boolean,
-    lowerThreshold: {
-      type: Number,
-      value: 50
-    },
-    upperThreshold: {
-      type: Number,
-      value: 50
-    },
-    scrollOptions: {
-      type: Object,
-      value: {}
-    },
-    scrollThrottleDelay: {
-      type: Number,
-      value: 16
-    }
-  },
-  data: {
-    start: 0,
-    end: 0,
-    contentStyle: '',
-    placeholderStyle: '',
-    containerHeight: 0,
-    positions: [],
-    isReady: false,
-    lastScrollTime: 0
-  },
-  computed: {
-    _width() {
-      return this.width ? `${this.width}px` : '100%'
-    },
-    _height() {
-      return this.height ? `${this.height}px` : '100%'
-    },
-    _listData() {
-      return this.listData.map((item, index) => {
-        return Object.assign({}, item, { _index: `_${index}` })
-      })
-    },
-    _scrollTop() {
-      // 使用初始值或当前值
-      return this.isReady ? this.scrollTop : 0
-    },
-    visibleCount() {
-      return Math.ceil(this.containerHeight / this.itemSize.height)
-    },
-    aboveCount() {
-      return Math.min(this.start, this.bufferScale * this.visibleCount)
+  createComponent({
+    properties: {
+      scrollY: Boolean,
+      height: {
+        type: Number,
+        value: 0
+      },
+      width: {
+        type: Number,
+        value: 0
+      },
+      itemSize: {
+        type: Object,
+        value: {}
+      },
+      bufferScale: {
+        type: Number,
+        value: 2
+      },
+      listData: Array,
+      scrollTop: {
+        type: Number,
+        value: 0
+      },
+      scrollWithAnimation: Boolean,
+      enableBackToTop: Boolean,
+      lowerThreshold: {
+        type: Number,
+        value: 50
+      },
+      upperThreshold: {
+        type: Number,
+        value: 50
+      },
+      scrollOptions: {
+        type: Object,
+        value: {}
+      },
+      scrollThrottleDelay: {
+        type: Number,
+        value: 16
+      }
     },
-    belowCount() {
-      return Math.min(this._listData.length - this.end, this.bufferScale * this.visibleCount)
+    data: {
+      start: 0,
+      end: 0,
+      contentStyle: '',
+      placeholderStyle: '',
+      containerHeight: 0,
+      positions: [],
+      isReady: false,
+      lastScrollTime: 0
     },
-    visibleData() {
-      const start = this.start - this.aboveCount
-      const end = this.end + this.belowCount
-      return this._listData.slice(start, end)
-    }
-  },
-  watch: {
-    listData: {
-      handler() {
-        this.initPositions()
-        this.$nextTick(() => {
-          if (!this.positions || !this.positions.length) {
-            return
+    computed: {
+      _width() {
+        return this.width ? `${this.width}px` : '100%'
+      },
+      _height() {
+        return this.height ? `${this.height}px` : '100%'
+      },
+      _listData() {
+        return this.listData.map((item, index) => {
+          return Object.assign({}, item, { _index: `_${index}` })
+        })
+      },
+      _scrollTop() {
+        // 使用初始值或当前值
+        return this.isReady ? this.scrollTop : 0
+      },
+      visibleCount() {
+        if (!this.positions.length) return 0
+
+        let count = 0
+        let totalHeight = 0
+        const startIndex = Math.min(this.start, this.positions.length - 1)
+
+        // 确保至少显示一屏的内容
+        const minCount = Math.ceil(this.containerHeight / this.positions[0].height)
+
+        for (let i = startIndex; i < this.positions.length; i++) {
+          totalHeight += this.positions[i].height
+          if (totalHeight > this.containerHeight && count >= minCount) {
+            break
           }
-          // 更新列表总高度
-          const height = this.positions[this.positions.length - 1].bottom
-          this.placeholderStyle = `height: ${height}px`
-          if (!this.isReady) {
-            this.$nextTick(() => {
-              this.isReady = true
-            })
+          count++
+        }
+
+        // 如果是最后几个项目，确保全部显示
+        if (startIndex + count > this.positions.length - 3) {
+          count = this.positions.length - startIndex
+        }
+
+        return Math.max(count, minCount)
+      },
+      aboveCount() {
+        return Math.min(this.start, this.bufferScale * this.visibleCount)
+      },
+      belowCount() {
+        return Math.min(this._listData.length - this.end, this.bufferScale * this.visibleCount)
+      },
+      visibleData() {
+        if (!this._listData.length) return []
+
+        const start = Math.min(Math.max(0, this.start - this.aboveCount), this._listData.length - 1)
+
+        // 修改结束索引的计算
+        let end = Math.min(this._listData.length, this.start + this.visibleCount + this.belowCount)
+
+        // 如果接近列表末尾，确保显示所有剩余项目
+        if (end > this._listData.length - 3) {
+          end = this._listData.length
+        }
+
+        return this._listData.slice(start, end).map((item, idx) => {
+          const realIndex = start + idx
+          const size =
+            typeof this.itemSize.itemSizeFunc === 'function' ? this.itemSize.itemSizeFunc(item, realIndex) : this.itemSize.defult
+
+          return {
+            ...item,
+            _index: `_${realIndex}`,
+            _size: size
           }
-          // 更新真实偏移量
-          this.setStartOffset()
         })
       },
-      immediate: true
+      totalHeight() {
+        if (!this.positions.length) return 0
+        return this.positions[this.positions.length - 1].bottom
+      }
     },
-    scrollTop: {
-      handler(val) {
-        this.start = this.getStartIndex(val)
-        this.end = this.start + this.visibleCount
-        this.setStartOffset()
+    watch: {
+      listData: {
+        handler() {
+          this.initPositions()
+          this.$nextTick(() => {
+            if (!this.positions || !this.positions.length) {
+              return
+            }
+            // 更新列表总高度
+            this.placeholderStyle = `height: ${this.totalHeight}px`
+            if (!this.isReady) {
+              this.$nextTick(() => {
+                this.isReady = true
+              })
+            }
+            // 更新真实偏移量
+            this.setStartOffset()
+          })
+        },
+        immediate: true
       },
-      immediate: true
-    }
-  },
-  ready() {
-    this.initPositions()
-    const query = mpx.createSelectorQuery().in(this)
-    query
-      .select('.mpx-recycle-view')
-      .boundingClientRect((rect) => {
-        this.containerHeight = rect.height
-        this.start = this.getStartIndex(this.scrollTop)
-        this.end = this.start + this.visibleCount
-        this.setStartOffset()
-      })
-      .exec()
-  },
-  methods: {
-    initPositions() {
-      const { height } = this.itemSize
-      this.positions = this.listData.map((d, index) => ({
-        index,
-        height,
-        top: index * height,
-        bottom: (index + 1) * height
-      }))
+      scrollTop: {
+        handler(val) {
+          this.start = this.getStartIndex(val)
+          this.end = this.start + this.visibleCount
+          this.setStartOffset()
+        },
+        immediate: true
+      }
     },
-    getStartIndex(scrollTop = 0) {
-      return this.binarySearch(this.positions, scrollTop)
+    ready() {
+      this.initPositions()
+      const query = mpx.createSelectorQuery().in(this)
+      query
+        .select('.mpx-recycle-view')
+        .boundingClientRect((rect) => {
+          this.containerHeight = rect.height
+          this.start = this.getStartIndex(this.scrollTop)
+          this.end = this.start + this.visibleCount
+          this.setStartOffset()
+        })
+        .exec()
     },
-    binarySearch(list, value) {
-      let start = 0
-      let end = list.length - 1
-      let tempIndex = null
+    methods: {
+      initPositions() {
+        let bottom = 0
+        this.positions = this._listData.map((item, index) => {
+          const size =
+            typeof this.itemSize.itemSizeFunc === 'function' ? this.itemSize.itemSizeFunc(item, index) : this.itemSize.defult
+          const position = {
+            index,
+            height: size.height,
+            top: bottom,
+            bottom: bottom + size.height
+          }
+          bottom = position.bottom
+          return position
+        })
+      },
+      getStartIndex(scrollTop = 0) {
+        // 确保不会返回超出范围的索引
+        const index = this.binarySearch(this.positions, scrollTop)
+        return Math.min(index, this._listData.length - 1)
+      },
+      binarySearch(list, value) {
+        if (!list.length) return 0
+
+        // 如果 scrollTop 超过了最后一个元素的底部
+        if (value >= list[list.length - 1].bottom) {
+          return list.length - 1
+        }
+
+        let start = 0
+        let end = list.length - 1
+
+        while (start <= end) {
+          const midIndex = Math.floor((start + end) / 2)
+          const midValue = list[midIndex]
 
-      while (start <= end) {
-        const midIndex = parseInt((start + end) / 2)
-        const midValue = list[midIndex].bottom
-        if (midValue === value) {
-          return midIndex + 1
-        } else if (midValue < value) {
-          start = midIndex + 1
-        } else if (midValue > value) {
-          if (tempIndex === null || tempIndex > midIndex) {
-            tempIndex = midIndex
+          if (value >= midValue.top && value < midValue.bottom) {
+            return midIndex
+          }
+
+          if (value < midValue.top) {
+            end = midIndex - 1
+          } else {
+            start = midIndex + 1
           }
-          end = end - 1
         }
+
+        return Math.min(Math.max(0, start - 1), list.length - 1)
+      },
+      setStartOffset() {
+        if (!this.positions.length) return
+
+        if (this.start >= 1) {
+          // 确保 startIndex 不会超出范围
+          const startIndex = Math.min(
+            Math.max(0, this.start - this.aboveCount),
+            this.positions.length - 1
+          )
+
+          const offset = this.positions[startIndex].top
+
+          this.contentStyle = `transform: translateY(${offset}px);`
+        } else {
+          this.contentStyle = `transform: translateY(0px);`
+        }
+      },
+      onScroll(e) {
+        const now = Date.now()
+        if (now - this.lastScrollTime < this.scrollThrottleDelay) {
+          return
+        }
+        this.lastScrollTime = now
+        const { scrollTop } = e.detail
+        this.start = this.getStartIndex(scrollTop)
+        this.end = this.start + this.visibleCount
+        this.setStartOffset()
+        this.triggerEvent('scroll', e)
+      },
+      onScrollToUpper(e) {
+        this.triggerEvent('scrolltoupper', e)
+      },
+      onScrollToLower(e) {
+        this.triggerEvent('scrolltolower', e)
       }
-      return tempIndex
-    },
-    setStartOffset() {
-      let startOffset
-      if (this.start >= 1) {
-        const size =
-            this.positions[this.start].top -
-            (this.positions[this.start - this.aboveCount]
-              ? this.positions[this.start - this.aboveCount].top
-              : 0)
-        startOffset = this.positions[this.start - 1].bottom - size
-      } else {
-        startOffset = 0
-      }
-      this.contentStyle = `transform: translateY(${startOffset}px);`
-    },
-    onScroll(e) {
-      const now = Date.now()
-      if (now - this.lastScrollTime < this.scrollThrottleDelay) {
-        return
-      }
-      this.lastScrollTime = now
-      const { scrollTop } = e.detail
-      this.start = this.getStartIndex(scrollTop)
-      this.end = this.start + this.visibleCount
-      this.setStartOffset()
-      this.triggerEvent('scroll', e)
-    },
-    onScrollToUpper(e) {
-      this.triggerEvent('scrolltoupper', e)
-    },
-    onScrollToLower(e) {
-      this.triggerEvent('scrolltolower', e)
     }
-  }
-})
+  })
 </script>
 <script type="application/json">
   {

From fd38830f514579803adf9a1d67b4e2cd90a84daf Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 13 Feb 2025 16:05:06 +0800
Subject: [PATCH 020/126] fix: lint error

---
 packages/webpack-plugin/lib/index.js          |  1 -
 .../webpack-plugin/lib/web/processJSON.js     | 22 +++++++++----------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js
index c694fe7eee..9883992e62 100644
--- a/packages/webpack-plugin/lib/index.js
+++ b/packages/webpack-plugin/lib/index.js
@@ -191,7 +191,6 @@ class MpxWebpackPlugin {
     options.retryRequireAsync = options.retryRequireAsync || false
     options.optimizeSize = options.optimizeSize || false
     options.dynamicComponentRules = options.dynamicComponentRules || {}// 运行时组件配置
-    options.useExtendComponents = options.useExtendComponents
     this.options = options
     // Hack for buildDependencies
     const rawResolveBuildDependencies = FileSystemInfo.prototype.resolveBuildDependencies
diff --git a/packages/webpack-plugin/lib/web/processJSON.js b/packages/webpack-plugin/lib/web/processJSON.js
index 7bc882eb5e..614781bf68 100644
--- a/packages/webpack-plugin/lib/web/processJSON.js
+++ b/packages/webpack-plugin/lib/web/processJSON.js
@@ -104,17 +104,17 @@ module.exports = function (jsonContent, {
     if (!isApp) {
       rulesRunnerOptions.mainKey = ctorType
     } else {
-      // if (useExtendComponents) {
-      //   const extendComponents = {}
-      //   useExtendComponents.forEach((name) => {
-      //     if (EXTEND_COMPONENTS_LIST.includes(name)) {
-      //       extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
-      //     } else {
-      //       emitWarning(`extend component ${name} is not supported!`)
-      //     }
-      //   })
-      //   jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
-      // }
+      if (useExtendComponents) {
+        const extendComponents = {}
+        useExtendComponents.forEach((name) => {
+          if (EXTEND_COMPONENTS_LIST.includes(name)) {
+            extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
+          } else {
+            emitWarning(`extend component ${name} is not supported!`)
+          }
+        })
+        jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
+      }
     }
 
     const rulesRunner = getRulesRunner(rulesRunnerOptions)

From 09287cb7835765eabaf1226c63879817b1c3cd0f Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 13 Feb 2025 16:47:05 +0800
Subject: [PATCH 021/126] =?UTF-8?q?chore:=20=E7=AE=80=E5=8C=96visibleCount?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.mpx    | 68 ++++++++-----------
 1 file changed, 30 insertions(+), 38 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 8ee04fc4a2..722070af53 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -22,7 +22,7 @@
           wx:for="{{visibleData}}"
           wx:key="_index"
           class="infinite-list-item"
-          wx:style="height: {{item._size.height}}px; width: {{item._size.width}}px; overflow: hidden"
+          wx:style="height: {{item._size.height}}; width: {{item._size.width}}; overflow: hidden"
         >
           <recycle-item current-item="{{item}}" />
         </view>
@@ -57,6 +57,10 @@
         type: Number,
         value: 0
       },
+      visibleCount: {
+        type: Number,
+        value: 0
+      },
       scrollWithAnimation: Boolean,
       enableBackToTop: Boolean,
       lowerThreshold: {
@@ -102,44 +106,21 @@
         // 使用初始值或当前值
         return this.isReady ? this.scrollTop : 0
       },
-      visibleCount() {
-        if (!this.positions.length) return 0
-
-        let count = 0
-        let totalHeight = 0
-        const startIndex = Math.min(this.start, this.positions.length - 1)
-
-        // 确保至少显示一屏的内容
-        const minCount = Math.ceil(this.containerHeight / this.positions[0].height)
-
-        for (let i = startIndex; i < this.positions.length; i++) {
-          totalHeight += this.positions[i].height
-          if (totalHeight > this.containerHeight && count >= minCount) {
-            break
-          }
-          count++
-        }
-
-        // 如果是最后几个项目，确保全部显示
-        if (startIndex + count > this.positions.length - 3) {
-          count = this.positions.length - startIndex
-        }
-
-        return Math.max(count, minCount)
+      _visibleCount() {
+        return this.visibleCount || Math.ceil(this.containerHeight / this.positions[0].height)
       },
       aboveCount() {
-        return Math.min(this.start, this.bufferScale * this.visibleCount)
+        return Math.min(this.start, this.bufferScale * this._visibleCount)
       },
       belowCount() {
-        return Math.min(this._listData.length - this.end, this.bufferScale * this.visibleCount)
+        return Math.min(this._listData.length - this.end, this.bufferScale * this._visibleCount)
       },
       visibleData() {
         if (!this._listData.length) return []
 
         const start = Math.min(Math.max(0, this.start - this.aboveCount), this._listData.length - 1)
 
-        // 修改结束索引的计算
-        let end = Math.min(this._listData.length, this.start + this.visibleCount + this.belowCount)
+        let end = Math.min(this._listData.length, this.start + this._visibleCount + this.belowCount)
 
         // 如果接近列表末尾，确保显示所有剩余项目
         if (end > this._listData.length - 3) {
@@ -148,13 +129,14 @@
 
         return this._listData.slice(start, end).map((item, idx) => {
           const realIndex = start + idx
-          const size =
-            typeof this.itemSize.itemSizeFunc === 'function' ? this.itemSize.itemSizeFunc(item, realIndex) : this.itemSize.defult
-
+          const size = this.getItemSize(item, realIndex)
           return {
             ...item,
             _index: `_${realIndex}`,
-            _size: size
+            _size: {
+              width: typeof size.width === 'number' ? `${size.width}px` : size.width,
+              height: typeof size.height === 'number' ? `${size.height}px` : size.height
+            }
           }
         })
       },
@@ -187,7 +169,7 @@
       scrollTop: {
         handler(val) {
           this.start = this.getStartIndex(val)
-          this.end = this.start + this.visibleCount
+          this.end = this.start + this._visibleCount
           this.setStartOffset()
         },
         immediate: true
@@ -201,7 +183,7 @@
         .boundingClientRect((rect) => {
           this.containerHeight = rect.height
           this.start = this.getStartIndex(this.scrollTop)
-          this.end = this.start + this.visibleCount
+          this.end = this.start + this._visibleCount
           this.setStartOffset()
         })
         .exec()
@@ -210,8 +192,7 @@
       initPositions() {
         let bottom = 0
         this.positions = this._listData.map((item, index) => {
-          const size =
-            typeof this.itemSize.itemSizeFunc === 'function' ? this.itemSize.itemSizeFunc(item, index) : this.itemSize.defult
+          const size = this.getItemSize(item, index)
           const position = {
             index,
             height: size.height,
@@ -272,6 +253,17 @@
           this.contentStyle = `transform: translateY(0px);`
         }
       },
+      getItemSize(item, index) {
+        let size
+        if (typeof this.itemSize.itemSizeFunc === 'function') {
+          size = this.itemSize.itemSizeFunc(item, index)
+        } else {
+          size = this.itemSize.default
+        }
+
+        return size
+      },
+
       onScroll(e) {
         const now = Date.now()
         if (now - this.lastScrollTime < this.scrollThrottleDelay) {
@@ -280,7 +272,7 @@
         this.lastScrollTime = now
         const { scrollTop } = e.detail
         this.start = this.getStartIndex(scrollTop)
-        this.end = this.start + this.visibleCount
+        this.end = this.start + this._visibleCount
         this.setStartOffset()
         this.triggerEvent('scroll', e)
       },

From 5b8bc99e7fdff3f2899a982126775bd9687582fa Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 13 Feb 2025 18:40:44 +0800
Subject: [PATCH 022/126] =?UTF-8?q?fix:=20rn=E5=85=A8=E5=B1=80=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B3=A8=E5=86=8C=E6=89=BE=E4=B8=8D=E5=88=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../platform/patch/getDefaultOptions.ios.js   |  2 +-
 .../wx/component-config/recycle-view.js       | 22 -------------------
 2 files changed, 1 insertion(+), 23 deletions(-)
 delete mode 100644 packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js

diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js
index 73c4f70d4b..529c027512 100644
--- a/packages/core/src/platform/patch/getDefaultOptions.ios.js
+++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js
@@ -59,7 +59,7 @@ function createEffect (proxy, components) {
         }
       }
     }
-    return components[tagName] || getByPath(ReactNative, tagName)
+    return components[tagName] || global.__getAppComponents()[tagName] || getByPath(ReactNative, tagName)
   }
   const innerCreateElement = (type, ...rest) => {
     if (!type) return null
diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js
deleted file mode 100644
index 522fe7e658..0000000000
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/recycle-view.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const TAG_NAME = 'recycle-view'
-
-module.exports = function ({ print }) {
-  return {
-    test: TAG_NAME,
-    web (tag, { el }) {
-      el.isBuiltIn = true
-      el.isExtend = true
-      return 'mpx-recycle-view'
-    },
-    ios (tag, { el }) {
-      el.isBuiltIn = true
-      el.isExtend = true
-      return 'mpx-recycle-view'
-    },
-    android (tag, { el }) {
-      el.isBuiltIn = true
-      el.isExtend = true
-      return 'mpx-recycle-view'
-    }
-  }
-}

From 4877bc68a013567d39559596f6015d1eb3795f36 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 13 Feb 2025 19:01:04 +0800
Subject: [PATCH 023/126] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/template-compiler/compiler.js          | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index a2f5c7165d..a4da50d963 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2459,40 +2459,32 @@ function getVirtualHostRoot (options, meta) {
 
 function processComponentGenericsReact (el, options) {
   const { componentGenerics, usingComponentsInfo } = options
-  // 处理子组件定义
   if (componentGenerics && componentGenerics[el.tag]) {
       const genericKey = el.tag
-
-      // 使用 is 属性处理动态组件
       el.is = `this.__props.generic && this.__props.generic['${genericKey}'] && getComponent(this.__props.generic['${genericKey}']) ? this.__props.generic['${genericKey}'] : '${genericKey}default'`
-
-      // 保存可能的组件列表
       el.components = [
         `this.__props.generic['${genericKey}']`,
         `${genericKey}default`
       ]
   }
 
-  // 处理父组件中使用 generic 组件的情况
-  const genericConfig = {} // 用一个对象收集所有的 generic 配置
-  const genericComponentsConfig = {} // 收集所有组件的 moduleId
+  const genericConfig = {}
+  const genericComponentsConfig = {}
+
   el.attrsList.forEach(attr => {
     const match = attr.name.match(genericRE)
     if (match) {
       const key = match[1]
       const componentName = attr.value
-      // 将每个 generic 配置添加到同一个对象中
       genericConfig[key] = componentName
 
-      // 从 usingComponentsInfo 中获取组件的 moduleId
       if (usingComponentsInfo[componentName]) {
         const { mid } = usingComponentsInfo[componentName]
-        // 收集组件的 moduleId
         genericComponentsConfig[componentName] = mid
       }
     }
   })
-  // 只有在有 generic 配置时才添加属性
+
   if (Object.keys(genericConfig).length) {
     const attrsToAdd = [
       {
@@ -2500,7 +2492,7 @@ function processComponentGenericsReact (el, options) {
         value: genericConfig
       }
     ]
-    // 只有在有 moduleId 时才添加 genericComponents 属性
+
     if (Object.keys(genericComponentsConfig).length) {
       attrsToAdd.push({
         name: 'genericComponents',

From 1e7365abde278c7cd9548148aaae4ec1cabcb72a Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 13 Feb 2025 19:23:05 +0800
Subject: [PATCH 024/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9itemSize?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core/src/platform/patch/getDefaultOptions.ios.js  |  2 +-
 .../runtime/components/extend/mpx-recycle-view.mpx    | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js
index 529c027512..73c4f70d4b 100644
--- a/packages/core/src/platform/patch/getDefaultOptions.ios.js
+++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js
@@ -59,7 +59,7 @@ function createEffect (proxy, components) {
         }
       }
     }
-    return components[tagName] || global.__getAppComponents()[tagName] || getByPath(ReactNative, tagName)
+    return components[tagName] || getByPath(ReactNative, tagName)
   }
   const innerCreateElement = (type, ...rest) => {
     if (!type) return null
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 722070af53..416cc27327 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -254,13 +254,16 @@
         }
       },
       getItemSize(item, index) {
+        const { width, height, getter } = this.itemSize
         let size
-        if (typeof this.itemSize.itemSizeFunc === 'function') {
-          size = this.itemSize.itemSizeFunc(item, index)
+        if (typeof getter === 'function') {
+          size = getter(item, index)
         } else {
-          size = this.itemSize.default
+          size = {
+            width: width || 0,
+            height: height || 0
+          }
         }
-
         return size
       },
 

From 4ba6ccd115e1f1c9a8d0def9bdb8588c6cfffdb8 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 14 Feb 2025 18:19:32 +0800
Subject: [PATCH 025/126] =?UTF-8?q?chore:=20visibleCount=E8=AE=A1=E7=AE=97?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E6=94=AF=E6=8C=81item=E5=AE=BD=E9=AB=98?=
 =?UTF-8?q?=E4=B8=8D=E4=B8=80=E8=87=B4=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.mpx    | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 416cc27327..c389f36be8 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -57,10 +57,6 @@
         type: Number,
         value: 0
       },
-      visibleCount: {
-        type: Number,
-        value: 0
-      },
       scrollWithAnimation: Boolean,
       enableBackToTop: Boolean,
       lowerThreshold: {
@@ -106,21 +102,39 @@
         // 使用初始值或当前值
         return this.isReady ? this.scrollTop : 0
       },
-      _visibleCount() {
-        return this.visibleCount || Math.ceil(this.containerHeight / this.positions[0].height)
+      visibleCount() {
+        if (!this.positions.length) return 0
+
+        let count = 0
+        let totalHeight = 0
+        const startIndex = Math.min(this.start, this.positions.length - 1)
+
+        for (let i = startIndex; i < this.positions.length; i++) {
+          totalHeight += this.positions[i]?.height || 0
+          if (totalHeight > this.containerHeight) {
+            break
+          }
+          count++
+        }
+
+        // 如果是最后几个项目，确保全部显示
+        if (startIndex + count > this.positions.length - 3) {
+          count = this.positions.length - startIndex
+        }
+        return count || 1
       },
       aboveCount() {
-        return Math.min(this.start, this.bufferScale * this._visibleCount)
+        return Math.min(this.start, this.bufferScale * this.visibleCount)
       },
       belowCount() {
-        return Math.min(this._listData.length - this.end, this.bufferScale * this._visibleCount)
+        return Math.min(this._listData.length - this.end, this.bufferScale * this.visibleCount)
       },
       visibleData() {
         if (!this._listData.length) return []
 
         const start = Math.min(Math.max(0, this.start - this.aboveCount), this._listData.length - 1)
 
-        let end = Math.min(this._listData.length, this.start + this._visibleCount + this.belowCount)
+        let end = Math.min(this._listData.length, this.start + this.visibleCount + this.belowCount)
 
         // 如果接近列表末尾，确保显示所有剩余项目
         if (end > this._listData.length - 3) {
@@ -169,7 +183,7 @@
       scrollTop: {
         handler(val) {
           this.start = this.getStartIndex(val)
-          this.end = this.start + this._visibleCount
+          this.end = this.start + this.visibleCount
           this.setStartOffset()
         },
         immediate: true
@@ -183,7 +197,7 @@
         .boundingClientRect((rect) => {
           this.containerHeight = rect.height
           this.start = this.getStartIndex(this.scrollTop)
-          this.end = this.start + this._visibleCount
+          this.end = this.start + this.visibleCount
           this.setStartOffset()
         })
         .exec()
@@ -275,7 +289,7 @@
         this.lastScrollTime = now
         const { scrollTop } = e.detail
         this.start = this.getStartIndex(scrollTop)
-        this.end = this.start + this._visibleCount
+        this.end = this.start + this.visibleCount
         this.setStartOffset()
         this.triggerEvent('scroll', e)
       },

From de3e8e844596046e83af8f19cb6f62be88aa53e6 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 17 Feb 2025 11:51:05 +0800
Subject: [PATCH 026/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9visibleCount?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97=EF=BC=8C=E6=94=AF=E6=8C=81=E5=AE=BD=E9=AB=98?=
 =?UTF-8?q?=E4=B8=8D=E4=B8=80=E8=87=B4=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.mpx    | 116 ++++++++++++++----
 1 file changed, 91 insertions(+), 25 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index c389f36be8..86233277d7 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -74,6 +74,10 @@
       scrollThrottleDelay: {
         type: Number,
         value: 16
+      },
+      minRenderCount: {
+        type: Number,
+        value: 10
       }
     },
     data: {
@@ -84,7 +88,8 @@
       containerHeight: 0,
       positions: [],
       isReady: false,
-      lastScrollTime: 0
+      lastScrollTime: 0,
+      visibleCounts: []
     },
     computed: {
       _width() {
@@ -103,31 +108,39 @@
         return this.isReady ? this.scrollTop : 0
       },
       visibleCount() {
-        if (!this.positions.length) return 0
+        if (!this.visibleCounts.length) return this.minRenderCount
+        return Math.max(this.visibleCounts[this.start], this.minRenderCount)
+      },
+      // visibleCount() {
+      //   if (!this.positions.length) return 0
 
-        let count = 0
-        let totalHeight = 0
-        const startIndex = Math.min(this.start, this.positions.length - 1)
+      //   let count = 0
+      //   let totalHeight = 0
+      //   const startIndex = Math.min(this.start, this.positions.length - 1)
 
-        for (let i = startIndex; i < this.positions.length; i++) {
-          totalHeight += this.positions[i]?.height || 0
-          if (totalHeight > this.containerHeight) {
-            break
-          }
-          count++
-        }
+      //   for (let i = startIndex; i < this.positions.length; i++) {
+      //     totalHeight += this.positions[i]?.height || 0
+      //     if (totalHeight > this.containerHeight) {
+      //       break
+      //     }
+      //     count++
+      //   }
 
-        // 如果是最后几个项目，确保全部显示
-        if (startIndex + count > this.positions.length - 3) {
-          count = this.positions.length - startIndex
-        }
-        return count || 1
-      },
+      //   // 如果是最后几个项目，确保全部显示
+      //   if (startIndex + count > this.positions.length - 3) {
+      //     count = this.positions.length - startIndex
+      //   }
+      //   return Math.max(count, this.minRenderCount)
+      // },
       aboveCount() {
-        return Math.min(this.start, this.bufferScale * this.visibleCount)
+        return Math.max(0, Math.min(this.start, this.bufferScale * this.visibleCount))
       },
       belowCount() {
-        return Math.min(this._listData.length - this.end, this.bufferScale * this.visibleCount)
+        if (!this._listData.length) return 0
+        return Math.max(
+          0,
+          Math.min(this._listData.length - this.end, this.bufferScale * this.visibleCount)
+        )
       },
       visibleData() {
         if (!this._listData.length) return []
@@ -187,6 +200,9 @@
           this.setStartOffset()
         },
         immediate: true
+      },
+      containerHeight() {
+        this.calculateVisibleCounts()
       }
     },
     ready() {
@@ -216,11 +232,44 @@
           bottom = position.bottom
           return position
         })
+        if (this.containerHeight) {
+          this.calculateVisibleCounts()
+        }
+      },
+      calculateVisibleCounts() {
+        this.visibleCounts = this.positions.map((_, startIndex) => {
+          let count = 0
+          let totalHeight = 0
+
+          for (let i = startIndex; i < this.positions.length; i++) {
+            totalHeight += this.positions[i].height
+            if (totalHeight > this.containerHeight) {
+              break
+            }
+            count++
+          }
+
+          // 如果是最后几个项目，确保全部显示
+          if (startIndex + count > this.positions.length - 3) {
+            count = this.positions.length - startIndex
+          }
+
+          return count
+        })
       },
+
       getStartIndex(scrollTop = 0) {
         // 确保不会返回超出范围的索引
+        if (!this.positions.length) {
+          return 0
+        }
+
+        // 如果滚动位置为0，直接返回0
+        if (scrollTop <= 0) {
+          return 0
+        }
         const index = this.binarySearch(this.positions, scrollTop)
-        return Math.min(index, this._listData.length - 1)
+        return Math.max(0, Math.min(index, this._listData.length - 1))
       },
       binarySearch(list, value) {
         if (!list.length) return 0
@@ -282,15 +331,32 @@
       },
 
       onScroll(e) {
+        // const now = Date.now()
+        // if (now - this.lastScrollTime < this.scrollThrottleDelay) {
+        //   return
+        // }
+        // this.lastScrollTime = now
+        // const { scrollTop } = e.detail
+        // this.start = this.getStartIndex(scrollTop)
+        // this.end = this.start + this.visibleCount
+        // this.setStartOffset()
+        // this.triggerEvent('scroll', e)
         const now = Date.now()
         if (now - this.lastScrollTime < this.scrollThrottleDelay) {
           return
         }
-        this.lastScrollTime = now
+
         const { scrollTop } = e.detail
-        this.start = this.getStartIndex(scrollTop)
-        this.end = this.start + this.visibleCount
-        this.setStartOffset()
+        const currentStartIndex = this.getStartIndex(scrollTop)
+
+        const threshold = Math.max(2, Math.floor(this.visibleCounts[this.start] / 3))
+        if (Math.abs(currentStartIndex - this.start) > threshold) {
+          this.start = currentStartIndex
+          this.end = this.start + this.visibleCount
+          this.setStartOffset()
+        }
+
+        this.lastScrollTime = now
         this.triggerEvent('scroll', e)
       },
       onScrollToUpper(e) {

From b24fcd4c7676057d2de695803866f07c6a019db5 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 17 Feb 2025 14:30:10 +0800
Subject: [PATCH 027/126] =?UTF-8?q?fix:=20web=E8=AF=AF=E8=A7=A6=E5=8F=91on?=
 =?UTF-8?q?ScrollToLower=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.mpx    | 27 +++++--------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 86233277d7..7b36ad4eed 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -14,6 +14,7 @@
     bindscroll="onScroll"
     bindscrolltoupper="onScrollToUpper"
     bindscrolltolower="onScrollToLower"
+    wx:if="{{_listData && _listData.length}}"
   >
     <view class="content-wrapper">
       <view class="infinite-list-placeholder" wx:style="{{placeholderStyle}}"></view>
@@ -232,6 +233,7 @@
           bottom = position.bottom
           return position
         })
+
         if (this.containerHeight) {
           this.calculateVisibleCounts()
         }
@@ -331,32 +333,15 @@
       },
 
       onScroll(e) {
-        // const now = Date.now()
-        // if (now - this.lastScrollTime < this.scrollThrottleDelay) {
-        //   return
-        // }
-        // this.lastScrollTime = now
-        // const { scrollTop } = e.detail
-        // this.start = this.getStartIndex(scrollTop)
-        // this.end = this.start + this.visibleCount
-        // this.setStartOffset()
-        // this.triggerEvent('scroll', e)
         const now = Date.now()
         if (now - this.lastScrollTime < this.scrollThrottleDelay) {
           return
         }
-
-        const { scrollTop } = e.detail
-        const currentStartIndex = this.getStartIndex(scrollTop)
-
-        const threshold = Math.max(2, Math.floor(this.visibleCounts[this.start] / 3))
-        if (Math.abs(currentStartIndex - this.start) > threshold) {
-          this.start = currentStartIndex
-          this.end = this.start + this.visibleCount
-          this.setStartOffset()
-        }
-
         this.lastScrollTime = now
+        const { scrollTop } = e.detail
+        this.start = this.getStartIndex(scrollTop)
+        this.end = this.start + this.visibleCount
+        this.setStartOffset()
         this.triggerEvent('scroll', e)
       },
       onScrollToUpper(e) {

From 9578c47039fff1d5eb8480352ee5325b04d1be80 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 17 Feb 2025 20:53:55 +0800
Subject: [PATCH 028/126] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4listData?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=9B=B4=E6=96=B0=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.mpx    | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 7b36ad4eed..24822a1685 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -14,7 +14,6 @@
     bindscroll="onScroll"
     bindscrolltoupper="onScrollToUpper"
     bindscrolltolower="onScrollToLower"
-    wx:if="{{_listData && _listData.length}}"
   >
     <view class="content-wrapper">
       <view class="infinite-list-placeholder" wx:style="{{placeholderStyle}}"></view>
@@ -177,22 +176,10 @@
       listData: {
         handler() {
           this.initPositions()
-          this.$nextTick(() => {
-            if (!this.positions || !this.positions.length) {
-              return
-            }
-            // 更新列表总高度
-            this.placeholderStyle = `height: ${this.totalHeight}px`
-            if (!this.isReady) {
-              this.$nextTick(() => {
-                this.isReady = true
-              })
-            }
-            // 更新真实偏移量
-            this.setStartOffset()
-          })
-        },
-        immediate: true
+          this.placeholderStyle = `height: ${this.totalHeight}px`
+          // 更新真实偏移量
+          this.setStartOffset()
+        }
       },
       scrollTop: {
         handler(val) {
@@ -213,6 +200,11 @@
         .select('.mpx-recycle-view')
         .boundingClientRect((rect) => {
           this.containerHeight = rect.height
+          this.isReady = true
+          this.placeholderStyle = `height: ${this.totalHeight}px`
+          if (!this.positions || !this.positions.length) {
+            return
+          }
           this.start = this.getStartIndex(this.scrollTop)
           this.end = this.start + this.visibleCount
           this.setStartOffset()

From c244764b9d8ad32a1fb2c54b8b07e5c61da6c8d2 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 18 Feb 2025 17:12:11 +0800
Subject: [PATCH 029/126] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Esticky-sectio?=
 =?UTF-8?q?n=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-sticky-header.mpx   |   0
 .../components/extend/mpx-sticky-section.mpx  | 209 ++++++++++++++++++
 2 files changed, 209 insertions(+)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
 create mode 100644 packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-section.mpx

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-section.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-section.mpx
new file mode 100644
index 0000000000..b351578b91
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-section.mpx
@@ -0,0 +1,209 @@
+<template>
+  <view class="mpx-sticky-section">
+    <view 
+      class="sticky-placeholder" 
+      style="height: {{isSticky ? contentHeight : 0}}px;"
+    ></view>
+    <view 
+      id="{{id}}"
+      wx:ref
+      class="sticky-content {{isSticky ? 'is-sticky' : ''}}" 
+      style="{{contentStyle}}"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+import mpx, { createComponent } from '@mpxjs/core'
+
+createComponent({
+  properties: {
+    // 吸顶时与顶部的距离，单位px
+    offsetTop: {
+      type: Number,
+      value: 0
+    },
+    // 吸顶元素重叠时是否继续上推
+    pushPinnedHeader: {
+      type: Boolean,
+      value: true
+    },
+    // 内边距 [top, right, bottom, left]
+    padding: {
+      type: Array,
+      value: [0, 0, 0, 0]
+    },
+    // scroll-view的选择器
+    scrollSelector: {
+      type: String,
+      value: ''
+    },
+    id: {
+      type: String,
+      value: ''
+    }
+  },
+
+  data: {
+    isSticky: false,
+    contentHeight: 0,
+    contentStyle: '',
+    selectorQuery: null
+  },
+
+  computed: {
+    baseStyle() {
+      const { padding, offsetTop, isSticky } = this
+      const [paddingTop, paddingRight, paddingBottom, paddingLeft] = padding
+      
+      return [
+        isSticky ? `top: ${offsetTop}px;` : '',
+        `padding: ${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px;`
+      ].join('')
+    }
+  },
+
+  lifetimes: {
+    attached() {
+      this.selectorQuery = mpx.createSelectorQuery().in(this)
+      this.init()
+    },
+    
+    detached() {
+      this.cleanup()
+    }
+  },
+
+  methods: {
+    init() {
+      query.select('.sticky-content')
+        .boundingClientRect(rect => {
+          if (rect) {
+            this.contentHeight = rect.height
+            this.setupObservers()
+          }
+        })
+        .exec()
+    },
+
+    setupObservers() {
+      let lastPushedOffset = 0
+
+      const updateStickyState = () => {
+        const getRects = () => {
+            return new Promise((resolve) => {
+            
+            if (this.scrollSelector) {
+              this.selectorQuery.select(`#${this.scrollSelector}`)
+                .boundingClientRect()
+                .selectAll('.sticky-content')
+                .boundingClientRect()
+                .exec(res => {
+                  if (!res || !res[0] || !res[1]) {
+                    resolve([])
+                    return
+                  }
+                  
+                  const scrollRect = res[0]
+                  const contentRects = res[1]
+                  
+                  const adjustedRects = contentRects.map(rect => ({
+                    ...rect,
+                    relativeTop: rect.top - scrollRect.top
+                  }))
+                  resolve(adjustedRects)
+                })
+            }
+          })
+        }
+
+        const updatePosition = async () => {
+          const rects = await getRects()
+          const currentRect = rects.find(rect => rect.id === this.id)
+          if (!currentRect) return
+
+          const shouldSticky = currentRect.relativeTop <= this.offsetTop
+
+          if (this.isSticky !== shouldSticky) {
+            this.isSticky = shouldSticky
+            this.triggerEvent('stickontopchange', {
+              isSticky: shouldSticky,
+              height: currentRect.height
+            })
+          }
+
+          if (this.pushPinnedHeader && shouldSticky) {
+            const stickyRects = rects.filter(rect => {
+              const el = this.selectorQuery.select(`#${rect.id}`)
+              return el && el.hasClass('is-sticky')
+            })
+            
+            const aboveHeaders = stickyRects.filter(rect => 
+              rect.relativeTop < currentRect.relativeTop && 
+              rect.id !== this.id
+            )
+            
+            const totalPush = aboveHeaders.reduce((sum, rect) => sum + rect.height, 0)
+            
+            if (totalPush !== lastPushedOffset) {
+              lastPushedOffset = totalPush
+              this.contentStyle = this.baseStyle + (totalPush ? `transform: translateY(${totalPush}px);` : '')
+            }
+          }
+        }
+
+        updatePosition()
+      }
+
+      if (this.scrollSelector) {
+        this.createIntersectionObserver({
+          thresholds: [0, 1]
+        })
+        .relativeTo(`#${this.scrollSelector}`, {
+          top: -this.offsetTop  // 设置观察的偏移量
+        })
+        .observe('.sticky-content', (res) => {
+          if (res.intersectionRatio < 1) {
+            updateStickyState()
+          }
+        })
+      }
+
+      // 触发初始状态检查
+      updateStickyState()
+    },
+
+    cleanup() {
+      if (this.intersectionObserver) {
+        this.intersectionObserver.disconnect()
+      }
+    }
+  }
+})
+</script>
+
+<style lang="stylus">
+.mpx-sticky-section
+  position: relative
+  
+  .sticky-placeholder
+    width: 100%
+    transition: height 0.1s ease-in-out
+  
+  .sticky-content
+    width: 100%
+    z-index: 100
+    box-sizing: border-box
+    
+    &.is-sticky
+      position: fixed
+      left: 0
+</style>
+
+<script type="application/json">
+{
+  "component": true
+}
+</script>
\ No newline at end of file

From 17b67f88c11df670bd8e19a410f0bfa927a34944 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 20 Feb 2025 10:36:01 +0800
Subject: [PATCH 030/126] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96stic?=
 =?UTF-8?q?ky-header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-sticky-header.mpx   | 147 ++++++++++++++++++
 1 file changed, 147 insertions(+)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
index e69de29bb2..e991a4d93f 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
@@ -0,0 +1,147 @@
+<template>
+  <view class="mpx-sticky-header">
+    <view class="sticky-header-placeholder" style="height: {{contentHeight}}px; position: {{ isSticky ? 'relative' : 'absolute' }}"></view>
+    <view
+      id="{{stickyId}}"
+      wx:ref
+      class="sticky-header-content {{isSticky ? 'is-sticky' : ''}}"
+      style="{{contentStyle}}"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  import mpx, { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    properties: {
+      // 吸顶时与顶部的距离，单位px
+      offsetTop: {
+        type: Number,
+        value: 0
+      },
+      // 内边距 [top, right, bottom, left]
+      padding: {
+        type: Array,
+        value: [0, 0, 0, 0]
+      },
+      // scroll-view的选择器
+      scrollSelector: {
+        type: String,
+        value: ''
+      },
+      stickyId: {
+        type: String,
+        value: ''
+      }
+    },
+
+    data: {
+      isSticky: false,
+      contentHeight: 0,
+      contentStyle: '',
+      zIndex: 1
+    },
+
+    computed: {
+      baseStyle() {
+        const { padding, offsetTop, isSticky, zIndex } = this
+        const [paddingTop, paddingRight, paddingBottom, paddingLeft] = padding
+        return [
+          isSticky ? `top: ${offsetTop}px;` : '',
+          `padding: ${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px;`
+        ].join('')
+      }
+    },
+
+    lifetimes: {
+      attached() {
+        this.init()
+      },
+
+      detached() {
+        this.cleanup()
+      }
+    },
+
+    methods: {
+      init() {
+        mpx
+          .createSelectorQuery()
+          .in(this)
+          .select('.sticky-header-content')
+          .boundingClientRect((rect) => {
+            if (rect) {
+              this.contentHeight = rect.height
+              this.setupObservers()
+            }
+          })
+          .exec()
+      },
+
+      setupObservers() {
+        if (this.intersectionObserver) {
+          this.intersectionObserver.disconnect()
+        }
+
+        let lastPushedOffset
+
+        const updateStickyState = (entry) => {
+        const topDistance = entry.boundingClientRect.top - this.offsetTop
+        const shouldSticky = entry.intersectionRatio < 1 && topDistance <= 0
+          
+          if (this.isSticky !== shouldSticky) {
+            this.isSticky = shouldSticky
+            this.contentStyle = shouldSticky ? this.baseStyle : ''
+            
+            this.triggerEvent('stickontopchange', {
+              isSticky: shouldSticky,
+              height: entry.boundingClientRect.height
+            })
+          }
+        }
+
+        if (this.scrollSelector) {
+          this.intersectionObserver = this.createIntersectionObserver({
+            thresholds: [0, 1]
+          })
+            .relativeToViewport()
+            .observe(`.sticky-header-placeholder`, (res) => {
+              updateStickyState(res)
+            })
+        }
+      },
+
+      cleanup() {
+        if (this.intersectionObserver) {
+          this.intersectionObserver.disconnect()
+        }
+      }
+    }
+  })
+</script>
+
+<style lang="stylus">
+  .mpx-sticky-header
+    position relative
+    .sticky-header-placeholder
+      width 100%
+      transition height 0.1s ease-in-out
+      position absolute  // 改为占位符绝对定位
+      top 0
+      left 0
+    .sticky-header-content
+      width 100%
+      box-sizing border-box
+      &.is-sticky
+        position fixed
+        left 0
+</style>
+
+<script type="application/json">
+  {
+    "component": true
+  }
+</script>
\ No newline at end of file

From 57dfee4c4114e738fe916c443eb61684c0f782a6 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 20 Feb 2025 14:58:17 +0800
Subject: [PATCH 031/126] =?UTF-8?q?fix:=20scrollView=E5=85=B7=E5=A4=87marg?=
 =?UTF-8?q?in=E6=A0=B7=E5=BC=8F=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-sticky-header.mpx   | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
index e991a4d93f..017772ca42 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
@@ -42,15 +42,15 @@
       isSticky: false,
       contentHeight: 0,
       contentStyle: '',
-      zIndex: 1
+      parentRect: {}
     },
 
     computed: {
       baseStyle() {
-        const { padding, offsetTop, isSticky, zIndex } = this
+        const { padding, offsetTop, isSticky } = this
         const [paddingTop, paddingRight, paddingBottom, paddingLeft] = padding
         return [
-          isSticky ? `top: ${offsetTop}px;` : '',
+          isSticky ? `top: ${(this.parentRect.top || 0) + offsetTop}px;` : '',
           `padding: ${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px;`
         ].join('')
       }
@@ -68,6 +68,9 @@
 
     methods: {
       init() {
+        mpx.createSelectorQuery().select(`#${this.scrollSelector}`).boundingClientRect((rect) => {
+          this.parentRect = rect
+        }).exec()
         mpx
           .createSelectorQuery()
           .in(this)
@@ -89,7 +92,7 @@
         let lastPushedOffset
 
         const updateStickyState = (entry) => {
-        const topDistance = entry.boundingClientRect.top - this.offsetTop
+        const topDistance = entry.boundingClientRect.top - this.parentRect.top -this.offsetTop
         const shouldSticky = entry.intersectionRatio < 1 && topDistance <= 0
           
           if (this.isSticky !== shouldSticky) {
@@ -107,7 +110,12 @@
           this.intersectionObserver = this.createIntersectionObserver({
             thresholds: [0, 1]
           })
-            .relativeToViewport()
+            .relativeToViewport({
+              top: -this.parentRect.top,
+              left: -this.parentRect.left,
+              right: this.parentRect.right,
+              bottom: this.parentRect.bottom
+            })
             .observe(`.sticky-header-placeholder`, (res) => {
               updateStickyState(res)
             })
@@ -129,7 +137,7 @@
     .sticky-header-placeholder
       width 100%
       transition height 0.1s ease-in-out
-      position absolute  // 改为占位符绝对定位
+      position absolute
       top 0
       left 0
     .sticky-header-content

From d2f0999310bb49a8dacb65799ffd915b61e32602 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 20 Feb 2025 19:14:16 +0800
Subject: [PATCH 032/126] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=B7=A8?=
 =?UTF-8?q?=E5=B9=B3=E5=8F=B0=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-sticky-header.mpx   | 90 ++++++++++++-------
 1 file changed, 56 insertions(+), 34 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
index 017772ca42..c1066f472c 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
@@ -1,14 +1,30 @@
 <template>
   <view class="mpx-sticky-header">
-    <view class="sticky-header-placeholder" style="height: {{contentHeight}}px; position: {{ isSticky ? 'relative' : 'absolute' }}"></view>
     <view
-      id="{{stickyId}}"
-      wx:ref
-      class="sticky-header-content {{isSticky ? 'is-sticky' : ''}}"
-      style="{{contentStyle}}"
-    >
-      <slot></slot>
-    </view>
+      class="sticky-header-placeholder"
+      id="sticky-header-placeholder-{{stickyId}}"
+      style="height: {{contentHeight}}px; position: {{ isSticky ? 'relative' : 'absolute' }}"
+    ></view>
+
+    <root-portal wx:if="{{isRn && isSticky}}">
+      <view
+        id="{{stickyId}}"
+        wx:ref
+        class="sticky-header-content {{isSticky ? 'is-sticky' : ''}}"
+        style="{{contentStyle}}"
+      >
+        <slot></slot>
+      </view>
+    </root-portal>
+    <view
+      wx:else
+        id="{{stickyId}}"
+        wx:ref
+        class="sticky-header-content {{isSticky ? 'is-sticky' : ''}}"
+        style="{{contentStyle}}"
+      >
+        <slot></slot>
+      </view>
   </view>
 </template>
 
@@ -42,7 +58,8 @@
       isSticky: false,
       contentHeight: 0,
       contentStyle: '',
-      parentRect: {}
+      parentRect: {},
+      isRn: __mpx_mode__ === 'ios' || __mpx_mode__ === 'android'
     },
 
     computed: {
@@ -55,12 +72,10 @@
         ].join('')
       }
     },
-
+    ready() {
+      this.init()
+    },
     lifetimes: {
-      attached() {
-        this.init()
-      },
-
       detached() {
         this.cleanup()
       }
@@ -68,9 +83,13 @@
 
     methods: {
       init() {
-        mpx.createSelectorQuery().select(`#${this.scrollSelector}`).boundingClientRect((rect) => {
-          this.parentRect = rect
-        }).exec()
+        mpx
+          .createSelectorQuery()
+          .select(`#${this.scrollSelector}`)
+          .boundingClientRect((rect) => {
+            this.parentRect = rect
+          })
+          .exec()
         mpx
           .createSelectorQuery()
           .in(this)
@@ -92,13 +111,13 @@
         let lastPushedOffset
 
         const updateStickyState = (entry) => {
-        const topDistance = entry.boundingClientRect.top - this.parentRect.top -this.offsetTop
-        const shouldSticky = entry.intersectionRatio < 1 && topDistance <= 0
-          
+          const topDistance = entry.boundingClientRect.top - this.parentRect.top - this.offsetTop
+          const shouldSticky = entry.intersectionRatio < 1 && topDistance <= 0
+
           if (this.isSticky !== shouldSticky) {
             this.isSticky = shouldSticky
             this.contentStyle = shouldSticky ? this.baseStyle : ''
-            
+
             this.triggerEvent('stickontopchange', {
               isSticky: shouldSticky,
               height: entry.boundingClientRect.height
@@ -116,7 +135,7 @@
               right: this.parentRect.right,
               bottom: this.parentRect.bottom
             })
-            .observe(`.sticky-header-placeholder`, (res) => {
+            .observe(`#sticky-header-placeholder-${this.stickyId}`, (res) => {
               updateStickyState(res)
             })
         }
@@ -134,18 +153,21 @@
 <style lang="stylus">
   .mpx-sticky-header
     position relative
-    .sticky-header-placeholder
-      width 100%
-      transition height 0.1s ease-in-out
-      position absolute
-      top 0
-      left 0
-    .sticky-header-content
-      width 100%
-      box-sizing border-box
-      &.is-sticky
-        position fixed
-        left 0
+  .sticky-header-placeholder
+    width 100%
+    position absolute
+    top 0
+    left 0
+    /* 支付宝环境需要设置允许事件穿透, 否则点不动 */
+    /* @mpx-if (__mpx_mode__ === 'ali') */
+    pointer-events none
+    /* @mpx-endif */
+  .sticky-header-content
+    width 100%
+    box-sizing border-box
+  .is-sticky
+    position fixed
+    left 0
 </style>
 
 <script type="application/json">

From ff8d7ff3e4a9a9a049ad6e0523dc3cd3aab8efbc Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 24 Feb 2025 21:24:57 +0800
Subject: [PATCH 033/126] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0=E8=B0=83?=
 =?UTF-8?q?=E8=AF=95=E6=96=87=E4=BB=B6=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/wx/component-config/index.js     |  5 +-
 .../wx/component-config/sticky-header.js      | 15 +++
 .../components/extend/mpx-sticky-header.mpx   | 48 +++++-----
 .../components/react/mpx-sticky-header-v1.jsx | 93 +++++++++++++++++++
 .../components/react/mpx-sticky-header.tsx    | 68 ++++++++++++++
 5 files changed, 204 insertions(+), 25 deletions(-)
 create mode 100644 packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-header.js
 create mode 100644 packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header-v1.jsx
 create mode 100644 packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
index 40281a2953..338470e9f7 100644
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
@@ -42,7 +42,7 @@ const wxs = require('./wxs')
 const component = require('./component')
 const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
-
+const stickyHeader = require('./sticky-header')
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
    * universal print for detail component warn or error
@@ -125,6 +125,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     hyphenTagName({ print }),
     label({ print }),
     component(),
-    rootPortal({ print })
+    rootPortal({ print }),
+    stickyHeader({ print })
   ]
 }
diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-header.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-header.js
new file mode 100644
index 0000000000..37e00e18ca
--- /dev/null
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-header.js
@@ -0,0 +1,15 @@
+const TAG_NAME = 'sticky-header'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    }
+  }
+}
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
index c1066f472c..8f2c052d7a 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
@@ -1,6 +1,7 @@
 <template>
   <view class="mpx-sticky-header">
     <view
+      wx:ref
       class="sticky-header-placeholder"
       id="sticky-header-placeholder-{{stickyId}}"
       style="height: {{contentHeight}}px; position: {{ isSticky ? 'relative' : 'absolute' }}"
@@ -43,14 +44,18 @@
         type: Array,
         value: [0, 0, 0, 0]
       },
-      // scroll-view的选择器
-      scrollSelector: {
-        type: String,
-        value: ''
-      },
       stickyId: {
         type: String,
         value: ''
+      },
+      margins: {
+        type: Object,
+        value: {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0
+        }
       }
     },
 
@@ -58,7 +63,6 @@
       isSticky: false,
       contentHeight: 0,
       contentStyle: '',
-      parentRect: {},
       isRn: __mpx_mode__ === 'ios' || __mpx_mode__ === 'android'
     },
 
@@ -67,7 +71,7 @@
         const { padding, offsetTop, isSticky } = this
         const [paddingTop, paddingRight, paddingBottom, paddingLeft] = padding
         return [
-          isSticky ? `top: ${(this.parentRect.top || 0) + offsetTop}px;` : '',
+          isSticky ? `top: ${(this.margins.top || 0) + offsetTop}px;` : '',
           `padding: ${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px;`
         ].join('')
       }
@@ -75,6 +79,13 @@
     ready() {
       this.init()
     },
+    watch: {
+      margins: {
+        handler(newVal) {
+          this.setupObservers()
+        }
+      }
+    },
     lifetimes: {
       detached() {
         this.cleanup()
@@ -83,13 +94,6 @@
 
     methods: {
       init() {
-        mpx
-          .createSelectorQuery()
-          .select(`#${this.scrollSelector}`)
-          .boundingClientRect((rect) => {
-            this.parentRect = rect
-          })
-          .exec()
         mpx
           .createSelectorQuery()
           .in(this)
@@ -111,7 +115,7 @@
         let lastPushedOffset
 
         const updateStickyState = (entry) => {
-          const topDistance = entry.boundingClientRect.top - this.parentRect.top - this.offsetTop
+          const topDistance = entry.boundingClientRect.top - this.margins.top - this.offsetTop
           const shouldSticky = entry.intersectionRatio < 1 && topDistance <= 0
 
           if (this.isSticky !== shouldSticky) {
@@ -125,20 +129,18 @@
           }
         }
 
-        if (this.scrollSelector) {
-          this.intersectionObserver = this.createIntersectionObserver({
+        this.intersectionObserver = this.createIntersectionObserver({
             thresholds: [0, 1]
           })
             .relativeToViewport({
-              top: -this.parentRect.top,
-              left: -this.parentRect.left,
-              right: this.parentRect.right,
-              bottom: this.parentRect.bottom
+              top: -this.margins.top,
+              left: -this.margins.left,
+              right: this.margins.right,
+              bottom: this.margins.bottom
             })
-            .observe(`#sticky-header-placeholder-${this.stickyId}`, (res) => {
+            .observe(`#sticky-header-placeholder-${this.stickyId}`, (res) => {              
               updateStickyState(res)
             })
-        }
       },
 
       cleanup() {
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header-v1.jsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header-v1.jsx
new file mode 100644
index 0000000000..9ed844c9fc
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header-v1.jsx
@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, useState, useContext } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, useAnimatedReaction, runOnJS, useScrollViewOffset } from 'react-native-reanimated';
+import { ScrollViewContext } from './context';
+
+export const _StickyHeader = ({ offsetTop = 0, children, onStickOnTopChange, style }) => {
+    const [contentHeight, setContentHeight] = useState(0);
+    const [headerTop, setHeaderTop] = useState(0);
+    const [isSticky, setIsSticky] = useState(false);
+    const scrollViewContext = useContext(ScrollViewContext);
+    const scrollY = useScrollViewOffset(scrollViewContext.gestureRef);
+    const headerRef = useRef(null);
+    // Animated value for translation
+    const translateY = useSharedValue(0);
+    const lastStickyState = useSharedValue(false);
+    const animatedStyles = useAnimatedStyle(() => {
+  if (headerTop === 0) return { transform: [{ translateY: 0 }] };
+
+  const elementTopToViewport = headerTop - scrollY.value;
+  const shouldSticky = elementTopToViewport <= offsetTop;
+  const translateY = shouldSticky 
+    ? scrollY.value - (headerTop - offsetTop)
+    : 0;
+
+  // 状态变化和样式更新在一起，逻辑更清晰
+  if (lastStickyState.value !== shouldSticky) {
+    lastStickyState.value = shouldSticky;
+    if (onStickOnTopChange) {
+      runOnJS(onStickOnTopChange)?.(shouldSticky, contentHeight);
+    }
+  }
+
+  return {
+    transform: [{ translateY }],
+    zIndex: 10,
+  };
+});
+    // const animatedStyles = useAnimatedStyle(() => {
+    //     return {
+    //         transform: [{ translateY: translateY.value }],
+    //         zIndex: 10,
+    //     };
+    // });
+    // useAnimatedReaction(() => scrollY.value, currentScrollY => {
+    //     // 计算元素顶部距离视口顶部的距离
+    //     const elementTopToViewport = headerTop - currentScrollY;
+    //     // 当元素顶部距离视口顶部的距离小于等于 offsetTop 时触发吸顶
+    //     const shouldSticky = elementTopToViewport <= offsetTop;
+    //      if (shouldSticky) {
+    //     // 计算需要偏移的距离：
+    //     // 当前滚动位置 - (header初始位置 - 期望的吸顶位置)
+    //     translateY.value = currentScrollY - (headerTop - offsetTop);
+    //   } else {
+    //     // 不吸顶时回到原始位置
+    //     translateY.value = 0;
+    //   }
+    //     // 更新吸顶状态
+    //     if (isSticky !== shouldSticky) {
+    //         runOnJS(setIsSticky)(shouldSticky);
+    //         if (onStickOnTopChange) {
+    //             runOnJS(onStickOnTopChange)(shouldSticky, contentHeight);
+    //         }
+    //     }
+    // }, [headerTop, offsetTop, contentHeight, isSticky]);
+    useEffect(() => {
+        if (headerRef.current) {
+            headerRef.current.measure((x, y, width, height, pageX, pageY) => {
+                setContentHeight(height);
+                setHeaderTop(pageY);
+            });
+        }
+    }, []);
+    return (<Animated.View ref={headerRef} style={[
+            style,
+            styles.content,
+            animatedStyles,
+        ]}>
+      {React.cloneElement(children, {
+            style: Object.assign(children.props.style, styles.fill)
+        })}
+    </Animated.View>);
+};
+const styles = StyleSheet.create({
+    content: {
+        width: '100%',
+        boxSizing: 'border-box',
+    },
+    fill: {
+        flex: 1,
+    },
+});
+_StickyHeader.displayName = 'MpxStickyHeader';
+export default _StickyHeader;
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
new file mode 100644
index 0000000000..deab432c39
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
@@ -0,0 +1,68 @@
+import React, { useEffect, useRef, useState, useContext } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, useAnimatedReaction, runOnJS, useScrollViewOffset } from 'react-native-reanimated';
+import { ScrollViewContext } from './context';
+export const _StickyHeader = ({ offsetTop = 0, children, onStickOnTopChange }) => {
+    const [contentHeight, setContentHeight] = useState(0);
+    const [headerTop, setHeaderTop] = useState(0);
+    const [isSticky, setIsSticky] = useState(false);
+    const scrollViewContext = useContext(ScrollViewContext);
+    const scrollY = useScrollViewOffset(scrollViewContext.gestureRef);
+    const headerRef = useRef(null);
+    // Animated value for translation
+    const translateY = useSharedValue(0);
+    const animatedStyles = useAnimatedStyle(() => {
+        return {
+            transform: [{ translateY: translateY.value }],
+        };
+    });
+    useAnimatedReaction(() => scrollY.value, currentScrollY => {
+        // 计算元素顶部距离视口顶部的距离
+        const elementTopToViewport = headerTop - currentScrollY;
+        // 当元素顶部距离视口顶部的距离小于等于 offsetTop 时触发吸顶
+        const shouldSticky = elementTopToViewport <= offsetTop;
+        if (shouldSticky) {
+            // 计算需要偏移的距离：
+            // 当前滚动位置 - (header初始位置 - 期望的吸顶位置)
+            translateY.value = withSpring(currentScrollY - (headerTop - offsetTop));
+        }
+        else {
+            // 不吸顶时回到原始位置
+            translateY.value = withSpring(0);
+        }
+        // 更新吸顶状态
+        if (isSticky !== shouldSticky) {
+            runOnJS(setIsSticky)(shouldSticky);
+            if (onStickOnTopChange) {
+                runOnJS(onStickOnTopChange)(shouldSticky, contentHeight);
+            }
+        }
+    }, [headerTop, offsetTop, contentHeight, isSticky]);
+    useEffect(() => {
+        if (headerRef.current) {
+            headerRef.current.measure((x, y, width, height, pageX, pageY) => {
+                setContentHeight(height);
+                setHeaderTop(pageY);
+            });
+        }
+    }, []);
+    return (<Animated.View ref={headerRef} style={[
+            styles.content,
+            animatedStyles,
+        ]}>
+      {React.cloneElement(children, {
+            style: styles.fill,
+        })}
+    </Animated.View>);
+};
+const styles = StyleSheet.create({
+    content: {
+        width: '100%',
+        boxSizing: 'border-box',
+    },
+    fill: {
+        flex: 1,
+    },
+});
+_StickyHeader.displayName = 'MpxStickyHeader';
+export default _StickyHeader;

From 54401350361e643cfaa3958f8f538b0a80bb0b10 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 25 Feb 2025 14:03:49 +0800
Subject: [PATCH 034/126] =?UTF-8?q?fix:=20sticky-header=E6=8A=96=E5=8A=A8?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-scroll-view.tsx      |   2 +-
 .../components/react/mpx-sticky-header.tsx    | 133 +++++++++---------
 2 files changed, 68 insertions(+), 67 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
index 14dd7c86fc..e9cf9c9092 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
@@ -110,6 +110,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   const {
     enhanced = false,
     bounces = true,
+    scrollEventThrottle = 0,
     style = {},
     binddragstart,
     binddragging,
@@ -159,7 +160,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     visibleLength: 0
   })
 
-  const scrollEventThrottle = 50
   const hasCallScrollToUpper = useRef(true)
   const hasCallScrollToLower = useRef(false)
   const initialTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
index deab432c39..2ad3bfe701 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
@@ -1,68 +1,69 @@
-import React, { useEffect, useRef, useState, useContext } from 'react';
-import { StyleSheet } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withSpring, useAnimatedReaction, runOnJS, useScrollViewOffset } from 'react-native-reanimated';
-import { ScrollViewContext } from './context';
-export const _StickyHeader = ({ offsetTop = 0, children, onStickOnTopChange }) => {
-    const [contentHeight, setContentHeight] = useState(0);
-    const [headerTop, setHeaderTop] = useState(0);
-    const [isSticky, setIsSticky] = useState(false);
-    const scrollViewContext = useContext(ScrollViewContext);
-    const scrollY = useScrollViewOffset(scrollViewContext.gestureRef);
-    const headerRef = useRef(null);
-    // Animated value for translation
-    const translateY = useSharedValue(0);
-    const animatedStyles = useAnimatedStyle(() => {
-        return {
-            transform: [{ translateY: translateY.value }],
-        };
-    });
-    useAnimatedReaction(() => scrollY.value, currentScrollY => {
-        // 计算元素顶部距离视口顶部的距离
-        const elementTopToViewport = headerTop - currentScrollY;
-        // 当元素顶部距离视口顶部的距离小于等于 offsetTop 时触发吸顶
-        const shouldSticky = elementTopToViewport <= offsetTop;
-        if (shouldSticky) {
-            // 计算需要偏移的距离：
-            // 当前滚动位置 - (header初始位置 - 期望的吸顶位置)
-            translateY.value = withSpring(currentScrollY - (headerTop - offsetTop));
-        }
-        else {
-            // 不吸顶时回到原始位置
-            translateY.value = withSpring(0);
-        }
-        // 更新吸顶状态
-        if (isSticky !== shouldSticky) {
-            runOnJS(setIsSticky)(shouldSticky);
-            if (onStickOnTopChange) {
-                runOnJS(onStickOnTopChange)(shouldSticky, contentHeight);
-            }
-        }
-    }, [headerTop, offsetTop, contentHeight, isSticky]);
-    useEffect(() => {
-        if (headerRef.current) {
-            headerRef.current.measure((x, y, width, height, pageX, pageY) => {
-                setContentHeight(height);
-                setHeaderTop(pageY);
-            });
-        }
-    }, []);
-    return (<Animated.View ref={headerRef} style={[
-            styles.content,
-            animatedStyles,
-        ]}>
+import React, { useEffect, useRef, useState, useContext } from 'react'
+import { StyleSheet } from 'react-native'
+import Animated, { useAnimatedStyle, useSharedValue, useAnimatedReaction, runOnJS, useScrollViewOffset } from 'react-native-reanimated'
+import { ScrollViewContext } from './context'
+export const _StickyHeader = ({ offsetTop = 0, children, onStickOnTopChange, style, scrollViewRef }) => {
+  const [contentHeight, setContentHeight] = useState(0)
+  const [headerTop, setHeaderTop] = useState(0)
+  const [isSticky, setIsSticky] = useState(false)
+  const scrollViewContext = useContext(ScrollViewContext)
+  const scrollY = useScrollViewOffset(scrollViewContext.gestureRef)
+  const headerRef = useRef(null)
+  const translateY = useSharedValue(0)
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      zIndex: 10
+    }
+  })
+  useAnimatedReaction(() => scrollY.value, currentScrollY => {
+    // 计算元素顶部距离视口顶部的距离
+    const elementTopToViewport = headerTop - currentScrollY
+    // 当元素顶部距离视口顶部的距离小于等于 offsetTop 时触发吸顶
+    const shouldSticky = elementTopToViewport <= offsetTop
+    if (shouldSticky) {
+      // 计算需要偏移的距离：
+      // 当前滚动位置 - (header初始位置 - 期望的吸顶位置)
+      translateY.value = currentScrollY - (headerTop - offsetTop)
+    } else {
+      // 不吸顶时回到原始位置
+      translateY.value = 0
+    }
+    // 更新吸顶状态
+    if (isSticky !== shouldSticky) {
+      runOnJS(setIsSticky)(shouldSticky)
+      if (onStickOnTopChange) {
+        runOnJS(onStickOnTopChange)(shouldSticky, contentHeight)
+      }
+    }
+  }, [headerTop, offsetTop, contentHeight, isSticky])
+  useEffect(() => {
+    if (headerRef.current) {
+      headerRef.current.measure((x, y, width, height, pageX, pageY) => {
+        setContentHeight(height)
+        setHeaderTop(pageY)
+      })
+    }
+  }, [])
+  return (<Animated.View ref={headerRef} style={[
+    styles.content,
+    animatedStyles,
+    style
+  ]}>
       {React.cloneElement(children, {
-            style: styles.fill,
-        })}
-    </Animated.View>);
-};
+        style: styles.fill
+      })}
+    </Animated.View>)
+}
 const styles = StyleSheet.create({
-    content: {
-        width: '100%',
-        boxSizing: 'border-box',
-    },
-    fill: {
-        flex: 1,
-    },
-});
-_StickyHeader.displayName = 'MpxStickyHeader';
-export default _StickyHeader;
+  content: {
+    width: '100%',
+    boxSizing: 'border-box'
+  },
+  fill: {
+    flex: 1
+  }
+})
+
+_StickyHeader.displayName = 'MpxStickyHeader'
+export default _StickyHeader

From a906c68c826cdb3197b5c061363b6f60881573d9 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 27 Feb 2025 17:40:36 +0800
Subject: [PATCH 035/126] =?UTF-8?q?feat:=20sticky-header=E6=96=B9=E6=A1=88?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-scroll-view.tsx      |  29 +++-
 .../components/react/mpx-sticky-header-v1.jsx | 156 ++++++++----------
 .../components/react/mpx-sticky-header.tsx    | 134 ++++++++++-----
 3 files changed, 184 insertions(+), 135 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
index e9cf9c9092..da78ac4de6 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
@@ -32,7 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView } from 'react-native-gesture-handler'
-import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
+import { Animated, View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
 import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react'
 import { useAnimatedRef } from 'react-native-reanimated'
 import { warn } from '@mpxjs/utils'
@@ -46,6 +46,7 @@ interface ScrollViewProps {
   enhanced?: boolean;
   bounces?: boolean;
   style?: ViewStyle;
+  scrollEventThrottle?: number;
   'scroll-x'?: boolean;
   'scroll-y'?: boolean;
   'enable-back-to-top'?: boolean;
@@ -68,6 +69,7 @@ interface ScrollViewProps {
   'parent-font-size'?: number;
   'parent-width'?: number;
   'parent-height'?: number;
+  'enable-sticky'?: boolean;
   'wait-for'?: Array<GestureHandler>;
   'simultaneous-handlers'?: Array<GestureHandler>;
   bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -141,9 +143,12 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'parent-height': parentHeight,
     'simultaneous-handlers': originSimultaneousHandlers,
     'wait-for': waitFor,
+    'enable-sticky': enableSticky,
     __selectRef
   } = props
 
+  const scrollOffset = useRef(new Animated.Value(0)).current
+
   const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
   const waitForHandlers = flatGesture(waitFor)
 
@@ -196,7 +201,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const contextValue = useMemo(() => {
     return {
-      gestureRef: scrollViewRef
+      gestureRef: scrollViewRef,
+      scrollOffset
     }
   }, [])
 
@@ -442,6 +448,16 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     updateIntersection()
   }
 
+  const scrollHandler = Animated.event(
+    [{ nativeEvent: { contentOffset: { y: scrollOffset } } }],
+    {
+      useNativeDriver: true,
+      listener: (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        onScroll(event)
+      }
+    }
+  )
+
   const scrollAdditionalProps: ScrollAdditionalProps = extendObject(
     {
       style: extendObject({}, innerStyle, layoutStyle),
@@ -453,7 +469,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       showsVerticalScrollIndicator: scrollY && showScrollbar,
       scrollEnabled: scrollX || scrollY,
       ref: scrollViewRef,
-      onScroll: onScroll,
+      onScroll: scrollHandler,
       onContentSizeChange: onContentSizeChange,
       bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
       bindtouchmove: ((enhanced && binddragging) || bindtouchend) && onScrollTouchMove,
@@ -507,8 +523,13 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     white: ['#fff']
   }
 
+  let ScrollViewComponent = ScrollView
+  if (enableSticky) {
+    ScrollViewComponent = Animated.createAnimatedComponent(ScrollView)
+  }
+
   return createElement(
-    ScrollView,
+    ScrollViewComponent,
     extendObject({}, innerProps, {
       refreshControl: refresherEnabled
         ? createElement(RefreshControl, extendObject({
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header-v1.jsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header-v1.jsx
index 9ed844c9fc..e15726f489 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header-v1.jsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header-v1.jsx
@@ -1,93 +1,69 @@
-import React, { useEffect, useRef, useState, useContext } from 'react';
-import { StyleSheet } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withSpring, useAnimatedReaction, runOnJS, useScrollViewOffset } from 'react-native-reanimated';
-import { ScrollViewContext } from './context';
-
-export const _StickyHeader = ({ offsetTop = 0, children, onStickOnTopChange, style }) => {
-    const [contentHeight, setContentHeight] = useState(0);
-    const [headerTop, setHeaderTop] = useState(0);
-    const [isSticky, setIsSticky] = useState(false);
-    const scrollViewContext = useContext(ScrollViewContext);
-    const scrollY = useScrollViewOffset(scrollViewContext.gestureRef);
-    const headerRef = useRef(null);
-    // Animated value for translation
-    const translateY = useSharedValue(0);
-    const lastStickyState = useSharedValue(false);
-    const animatedStyles = useAnimatedStyle(() => {
-  if (headerTop === 0) return { transform: [{ translateY: 0 }] };
-
-  const elementTopToViewport = headerTop - scrollY.value;
-  const shouldSticky = elementTopToViewport <= offsetTop;
-  const translateY = shouldSticky 
-    ? scrollY.value - (headerTop - offsetTop)
-    : 0;
-
-  // 状态变化和样式更新在一起，逻辑更清晰
-  if (lastStickyState.value !== shouldSticky) {
-    lastStickyState.value = shouldSticky;
-    if (onStickOnTopChange) {
-      runOnJS(onStickOnTopChange)?.(shouldSticky, contentHeight);
+import React, { useEffect, useRef, useState, useContext } from 'react'
+import { StyleSheet } from 'react-native'
+import Animated, { useAnimatedStyle, useSharedValue, useAnimatedReaction, runOnJS, useScrollViewOffset } from 'react-native-reanimated'
+import { ScrollViewContext } from './context'
+export const _StickyHeader = ({ offsetTop = 0, children, onStickOnTopChange, style, scrollViewRef }) => {
+  const [contentHeight, setContentHeight] = useState(0)
+  const [headerTop, setHeaderTop] = useState(0)
+  const [isSticky, setIsSticky] = useState(false)
+  const scrollViewContext = useContext(ScrollViewContext)
+  const scrollY = useScrollViewOffset(scrollViewContext.gestureRef)
+  const headerRef = useRef(null)
+  const translateY = useSharedValue(0)
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      zIndex: 10
     }
-  }
-
-  return {
-    transform: [{ translateY }],
-    zIndex: 10,
-  };
-});
-    // const animatedStyles = useAnimatedStyle(() => {
-    //     return {
-    //         transform: [{ translateY: translateY.value }],
-    //         zIndex: 10,
-    //     };
-    // });
-    // useAnimatedReaction(() => scrollY.value, currentScrollY => {
-    //     // 计算元素顶部距离视口顶部的距离
-    //     const elementTopToViewport = headerTop - currentScrollY;
-    //     // 当元素顶部距离视口顶部的距离小于等于 offsetTop 时触发吸顶
-    //     const shouldSticky = elementTopToViewport <= offsetTop;
-    //      if (shouldSticky) {
-    //     // 计算需要偏移的距离：
-    //     // 当前滚动位置 - (header初始位置 - 期望的吸顶位置)
-    //     translateY.value = currentScrollY - (headerTop - offsetTop);
-    //   } else {
-    //     // 不吸顶时回到原始位置
-    //     translateY.value = 0;
-    //   }
-    //     // 更新吸顶状态
-    //     if (isSticky !== shouldSticky) {
-    //         runOnJS(setIsSticky)(shouldSticky);
-    //         if (onStickOnTopChange) {
-    //             runOnJS(onStickOnTopChange)(shouldSticky, contentHeight);
-    //         }
-    //     }
-    // }, [headerTop, offsetTop, contentHeight, isSticky]);
-    useEffect(() => {
-        if (headerRef.current) {
-            headerRef.current.measure((x, y, width, height, pageX, pageY) => {
-                setContentHeight(height);
-                setHeaderTop(pageY);
-            });
-        }
-    }, []);
-    return (<Animated.View ref={headerRef} style={[
-            style,
-            styles.content,
-            animatedStyles,
-        ]}>
+  })
+  useAnimatedReaction(() => scrollY.value, currentScrollY => {
+    // 计算元素顶部距离视口顶部的距离
+    const elementTopToViewport = headerTop - currentScrollY
+    // 当元素顶部距离视口顶部的距离小于等于 offsetTop 时触发吸顶
+    const shouldSticky = elementTopToViewport <= offsetTop
+    if (shouldSticky) {
+      // 计算需要偏移的距离：
+      // 当前滚动位置 - (header初始位置 - 期望的吸顶位置)
+      translateY.value = currentScrollY - (headerTop - offsetTop)
+    } else {
+      // 不吸顶时回到原始位置
+      translateY.value = 0
+    }
+    // 更新吸顶状态
+    if (isSticky !== shouldSticky) {
+      runOnJS(setIsSticky)(shouldSticky)
+      if (onStickOnTopChange) {
+        runOnJS(onStickOnTopChange)(shouldSticky, contentHeight)
+      }
+    }
+  }, [headerTop, offsetTop, contentHeight, isSticky])
+  useEffect(() => {
+    if (headerRef.current) {
+      headerRef.current.measure((x, y, width, height, pageX, pageY) => {
+        setContentHeight(height)
+        setHeaderTop(pageY)
+      })
+    }
+  }, [])
+  return (<Animated.View ref={headerRef} style={[
+    styles.content,
+    animatedStyles,
+    style
+  ]}>
       {React.cloneElement(children, {
-            style: Object.assign(children.props.style, styles.fill)
-        })}
-    </Animated.View>);
-};
+        style: styles.fill
+      })}
+    </Animated.View>)
+}
 const styles = StyleSheet.create({
-    content: {
-        width: '100%',
-        boxSizing: 'border-box',
-    },
-    fill: {
-        flex: 1,
-    },
-});
-_StickyHeader.displayName = 'MpxStickyHeader';
-export default _StickyHeader;
+  content: {
+    width: '100%',
+    boxSizing: 'border-box'
+  },
+  fill: {
+    flex: 1
+  }
+})
+
+_StickyHeader.displayName = 'MpxStickyHeader'
+export default _StickyHeader
\ No newline at end of file
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
index 2ad3bfe701..a64f04c2b3 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
@@ -1,42 +1,56 @@
-import React, { useEffect, useRef, useState, useContext } from 'react'
-import { StyleSheet } from 'react-native'
-import Animated, { useAnimatedStyle, useSharedValue, useAnimatedReaction, runOnJS, useScrollViewOffset } from 'react-native-reanimated'
+
+import React, { useEffect, useRef, useState, useContext, forwardRef, cloneElement } from 'react'
+import { Animated, StyleSheet, View } from 'react-native'
 import { ScrollViewContext } from './context'
-export const _StickyHeader = ({ offsetTop = 0, children, onStickOnTopChange, style, scrollViewRef }) => {
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
+interface StickyHeaderProps {
+  children?: ReactNode;
+  style?: ViewStyle;
+  'enable-var'?: boolean;
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
+
+}
+
+const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHeaderProps>((stickyHeaderProps: StickyHeaderProps = {}, ref): JSX.Element => {
+  const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps)
+  const {
+    style,
+    children,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
   const [contentHeight, setContentHeight] = useState(0)
   const [headerTop, setHeaderTop] = useState(0)
   const [isSticky, setIsSticky] = useState(false)
   const scrollViewContext = useContext(ScrollViewContext)
-  const scrollY = useScrollViewOffset(scrollViewContext.gestureRef)
+  const scrollOffset = scrollViewContext.scrollOffset
   const headerRef = useRef(null)
-  const translateY = useSharedValue(0)
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: translateY.value }],
-      zIndex: 10
-    }
+
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef })
+
+  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
+
+  useNodesRef(props, ref, headerRef, {
+    style: normalStyle
   })
-  useAnimatedReaction(() => scrollY.value, currentScrollY => {
-    // 计算元素顶部距离视口顶部的距离
-    const elementTopToViewport = headerTop - currentScrollY
-    // 当元素顶部距离视口顶部的距离小于等于 offsetTop 时触发吸顶
-    const shouldSticky = elementTopToViewport <= offsetTop
-    if (shouldSticky) {
-      // 计算需要偏移的距离：
-      // 当前滚动位置 - (header初始位置 - 期望的吸顶位置)
-      translateY.value = currentScrollY - (headerTop - offsetTop)
-    } else {
-      // 不吸顶时回到原始位置
-      translateY.value = 0
-    }
-    // 更新吸顶状态
-    if (isSticky !== shouldSticky) {
-      runOnJS(setIsSticky)(shouldSticky)
-      if (onStickOnTopChange) {
-        runOnJS(onStickOnTopChange)(shouldSticky, contentHeight)
-      }
-    }
-  }, [headerTop, offsetTop, contentHeight, isSticky])
+
+  // 测量 header 位置
   useEffect(() => {
     if (headerRef.current) {
       headerRef.current.measure((x, y, width, height, pageX, pageY) => {
@@ -45,20 +59,58 @@ export const _StickyHeader = ({ offsetTop = 0, children, onStickOnTopChange, sty
       })
     }
   }, [])
-  return (<Animated.View ref={headerRef} style={[
-    styles.content,
-    animatedStyles,
-    style
-  ]}>
-      {React.cloneElement(children, {
+
+  const animatedStyle = React.useMemo(() => {
+    if (headerTop === null) {
+      return {}
+    } // 等待 headerTop 被测量
+
+    // 设置阈值，处理精度问题
+    const threshold = 1
+
+    // 根据 headerTop 的值选择合适的 inputRange 和 outputRange
+    const inputRange =
+      headerTop <= threshold ? [0, 1] : [headerTop - 1, headerTop]
+
+    const outputRange = [0, 1]
+
+    // 计算 translateY
+    const translateY = Animated.multiply(
+      scrollOffset.interpolate({
+        inputRange,
+        outputRange,
+        extrapolate: 'clamp'
+      }),
+      Animated.subtract(scrollOffset, headerTop <= threshold ? 0 : headerTop)
+    )
+
+    return {
+      transform: [{ translateY }],
+      zIndex: 100
+    }
+  }, [headerTop, scrollOffset])
+
+  return (
+    <Animated.View
+      ref={headerRef}
+      style={[
+        styles.content,
+        innerStyle,
+        layoutStyle,
+        animatedStyle
+      ]}>
+      {cloneElement(children, {
         style: styles.fill
       })}
-    </Animated.View>)
-}
+    </Animated.View>
+  )
+})
+
 const styles = StyleSheet.create({
   content: {
     width: '100%',
-    boxSizing: 'border-box'
+    boxSizing: 'border-box',
+    zIndex: 10
   },
   fill: {
     flex: 1

From 82c9710fc22c33f1cd1dfeff6dc85161cd696d83 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 27 Feb 2025 20:22:02 +0800
Subject: [PATCH 036/126] =?UTF-8?q?chore:=20=E8=A1=A5=E5=85=85header?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-sticky-header.tsx    | 95 +++++++++++--------
 1 file changed, 58 insertions(+), 37 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
index a64f04c2b3..96dd4673db 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
@@ -1,37 +1,41 @@
 
-import React, { useEffect, useRef, useState, useContext, forwardRef, cloneElement } from 'react'
-import { Animated, StyleSheet, View } from 'react-native'
+import React, { useEffect, useRef, useState, useContext, forwardRef, useMemo, createElement } from 'react'
+import { Animated, StyleSheet, View, NativeSyntheticEvent } from 'react-native'
 import { ScrollViewContext } from './context'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+
 interface StickyHeaderProps {
   children?: ReactNode;
   style?: ViewStyle;
+  'offset-top'?: number;
   'enable-var'?: boolean;
   'external-var-context'?: Record<string, any>;
   'parent-font-size'?: number;
   'parent-width'?: number;
   'parent-height'?: number;
-
+  bindstickontopchange?: (e: NativeSyntheticEvent<unknown>) => void;
 }
 
 const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHeaderProps>((stickyHeaderProps: StickyHeaderProps = {}, ref): JSX.Element => {
   const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps)
   const {
     style,
-    children,
+    bindstickontopchange,
+    'offset-top': offsetTop = 0,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight
   } = props
-  const [contentHeight, setContentHeight] = useState(0)
+  const contentHeight = useRef(0)
   const [headerTop, setHeaderTop] = useState(0)
-  const [isSticky, setIsSticky] = useState(false)
   const scrollViewContext = useContext(ScrollViewContext)
   const scrollOffset = scrollViewContext.scrollOffset
   const headerRef = useRef(null)
+  const isStickOnTopRef = useRef(false)
 
   const {
     normalStyle,
@@ -42,7 +46,7 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef })
+  const { layoutRef } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef })
 
   const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
 
@@ -50,59 +54,79 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
     style: normalStyle
   })
 
-  // 测量 header 位置
   useEffect(() => {
     if (headerRef.current) {
-      headerRef.current.measure((x, y, width, height, pageX, pageY) => {
-        setContentHeight(height)
-        setHeaderTop(pageY)
+      headerRef.current.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+        contentHeight.current = height
+        setHeaderTop(pageY - offsetTop)
       })
     }
   }, [])
 
-  const animatedStyle = React.useMemo(() => {
-    if (headerTop === null) {
-      return {}
-    } // 等待 headerTop 被测量
+  useEffect(() => {
+    if (!bindstickontopchange) return
+
+    const listener = scrollOffset.addListener((state: { value: number }) => {
+      const currentScrollValue = state.value
+      const newIsStickOnTop = currentScrollValue > headerTop
+      if (newIsStickOnTop !== isStickOnTopRef.current) {
+        isStickOnTopRef.current = newIsStickOnTop
+        bindstickontopchange(
+          getCustomEvent('stickontopchange', {}, {
+            detail: {
+              isStickOnTop: newIsStickOnTop
+            },
+            layoutRef
+          }, props))
+      }
+    })
+
+    return () => {
+      scrollOffset.removeListener(listener)
+    }
+  }, [headerTop])
 
-    // 设置阈值，处理精度问题
+  const animatedStyle = useMemo(() => {
     const threshold = 1
 
-    // 根据 headerTop 的值选择合适的 inputRange 和 outputRange
     const inputRange =
       headerTop <= threshold ? [0, 1] : [headerTop - 1, headerTop]
 
     const outputRange = [0, 1]
 
-    // 计算 translateY
     const translateY = Animated.multiply(
       scrollOffset.interpolate({
         inputRange,
         outputRange,
         extrapolate: 'clamp'
       }),
-      Animated.subtract(scrollOffset, headerTop <= threshold ? 0 : headerTop)
+      Animated.subtract(scrollOffset, headerTop <= threshold ? -offsetTop : headerTop)
     )
 
     return {
-      transform: [{ translateY }],
-      zIndex: 100
+      transform: [{ translateY }]
     }
   }, [headerTop, scrollOffset])
 
+  const innerProps = useInnerProps(props, {
+    ref: headerRef,
+    style: extendObject({}, styles.content, innerStyle, animatedStyle)
+  }, [], { layoutRef })
+
   return (
-    <Animated.View
-      ref={headerRef}
-      style={[
-        styles.content,
-        innerStyle,
-        layoutStyle,
-        animatedStyle
-      ]}>
-      {cloneElement(children, {
-        style: styles.fill
-      })}
-    </Animated.View>
+    createElement(
+      Animated.View,
+      innerProps,
+      wrapChildren(
+        props,
+        {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
+        }
+      )
+    )
   )
 })
 
@@ -111,9 +135,6 @@ const styles = StyleSheet.create({
     width: '100%',
     boxSizing: 'border-box',
     zIndex: 10
-  },
-  fill: {
-    flex: 1
   }
 })
 

From 0709497240b60a741a6a5b6a55b26a0d473ff3d9 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 27 Feb 2025 20:30:06 +0800
Subject: [PATCH 037/126] =?UTF-8?q?fix:=20=E9=9D=9Esticky=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6scroll=20=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/react/mpx-scroll-view.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
index da78ac4de6..f22e7eb365 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
@@ -469,7 +469,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       showsVerticalScrollIndicator: scrollY && showScrollbar,
       scrollEnabled: scrollX || scrollY,
       ref: scrollViewRef,
-      onScroll: scrollHandler,
+      onScroll: enableSticky ? scrollHandler: onScroll,
       onContentSizeChange: onContentSizeChange,
       bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
       bindtouchmove: ((enhanced && binddragging) || bindtouchend) && onScrollTouchMove,

From 963747dd98c7302383554d160b0d21cd1b965f98 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 28 Feb 2025 15:28:43 +0800
Subject: [PATCH 038/126] =?UTF-8?q?feat:=20web=E7=8E=AF=E5=A2=83=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81sticky-header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wx/component-config/sticky-header.js      |  4 ++
 .../components/web/mpx-scroll-view.vue        | 10 +++-
 .../components/web/mpx-sticky-header.vue      | 60 +++++++++++++++++++
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/web/mpx-sticky-header.vue

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-header.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-header.js
index 37e00e18ca..0d824097ca 100644
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-header.js
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-header.js
@@ -10,6 +10,10 @@ module.exports = function ({ print }) {
     ios (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-sticky-header'
+    },
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
     }
   }
 }
diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-scroll-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-scroll-view.vue
index 802c539795..428b3d6fc7 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-scroll-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-scroll-view.vue
@@ -44,6 +44,7 @@
       enhanced: Boolean,
       refresherEnabled: Boolean,
       refresherTriggered: Boolean,
+      enableSticky: Boolean,
       refresherThreshold: {
         type: Number,
         default: 45
@@ -57,6 +58,13 @@
         default: ''
       }
     },
+    provide () {
+      return {
+        scrollOffset: {
+          get: () => this.lastY
+        }
+      }
+    },
     data () {
       return {
         isLoading: false,
@@ -251,7 +259,7 @@
           }
           this.lastX = x
           this.lastY = y
-        }, 30, {
+        }, this.enableSticky ? 0 : 30, {
           leading: true,
           trailing: true
         }))
diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-sticky-header.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-sticky-header.vue
new file mode 100644
index 0000000000..4b8ba74c9c
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-sticky-header.vue
@@ -0,0 +1,60 @@
+<script>
+import { getCustomEvent } from './getInnerListeners'
+
+export default {
+  name: 'mpx-sticky-header',
+  inject: ['scrollOffset'],
+  props: {
+    'offset-top': {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      headerTop: 0,
+      isStickOnTop: false
+    }
+  },
+  computed: {
+    _scrollOffset () {
+      return -this.scrollOffset.get()
+    }
+  },
+  mounted () {
+    // 使用$el获取当前组件的根DOM元素
+    if (this.$el) {
+      const rect = this.$el.getBoundingClientRect()
+      const scrollViewRect = this.$parent.$refs.wrapper.getBoundingClientRect()
+      this.headerTop = rect.top - scrollViewRect.top - this.offsetTop
+    }
+  },
+  watch: {
+    _scrollOffset: {
+      handler (newScrollOffset) {
+        const newIsStickOnTop = newScrollOffset > this.headerTop
+        
+        if (newIsStickOnTop !== this.isStickOnTop) {
+          this.isStickOnTop = newIsStickOnTop
+          this.$emit('stickontopchange', getCustomEvent('stickontopchange', {
+            isStickOnTop: newIsStickOnTop
+          }, this))
+        }
+      },
+      immediate: true
+    }
+  },
+  render (h) {
+    const style = {
+      width: '100%',
+      boxSizing: 'border-box',
+      position: 'relative',
+      transform: this.isStickOnTop ? `translateY(${this._scrollOffset - this.headerTop + this.offsetTop}px)` : 'none'
+    }
+
+    return h('div', {
+      style
+    }, this.$slots.default)
+  }
+}
+</script>
\ No newline at end of file

From 9ea18396f9879d9204eb154d37ac411b038ed2eb Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 28 Feb 2025 15:47:55 +0800
Subject: [PATCH 039/126] =?UTF-8?q?chore:=20=E6=96=B0=E5=A2=9Edom=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E6=A3=80=E6=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../runtime/components/web/mpx-sticky-header.vue  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-sticky-header.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-sticky-header.vue
index 4b8ba74c9c..73b9fa64d8 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-sticky-header.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-sticky-header.vue
@@ -5,7 +5,7 @@ export default {
   name: 'mpx-sticky-header',
   inject: ['scrollOffset'],
   props: {
-    'offset-top': {
+    'offsetTop': {
       type: Number,
       default: 0
     }
@@ -18,16 +18,17 @@ export default {
   },
   computed: {
     _scrollOffset () {
-      return -this.scrollOffset.get()
+      return -this.scrollOffset?.get() || 0
     }
   },
   mounted () {
-    // 使用$el获取当前组件的根DOM元素
-    if (this.$el) {
-      const rect = this.$el.getBoundingClientRect()
-      const scrollViewRect = this.$parent.$refs.wrapper.getBoundingClientRect()
-      this.headerTop = rect.top - scrollViewRect.top - this.offsetTop
+    if (!this.$parent?.$refs?.wrapper) {
+      console.error('[Mpx runtime error]: sticky-header must be placed inside a scroll-view component')
+      return
     }
+    const rect = this.$el.getBoundingClientRect()
+    const scrollViewRect = this.$parent.$refs.wrapper.getBoundingClientRect()
+    this.headerTop = rect.top - scrollViewRect.top - this.offsetTop
   },
   watch: {
     _scrollOffset: {

From 6d22397c76fca44981cf93ea4b8d8d2dc0d40b09 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 3 Mar 2025 17:07:54 +0800
Subject: [PATCH 040/126] =?UTF-8?q?feat:=20add=20sticky-section=20?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wx/component-config/sticky-section.js      | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-section.js

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-section.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-section.js
new file mode 100644
index 0000000000..f60733bfbe
--- /dev/null
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-section.js
@@ -0,0 +1,18 @@
+const TAG_NAME = 'sticky-section'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'View'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'View'
+    },
+    web (tag, { el }) {
+      return 'div'
+    }
+  }
+}

From 4c7e6474b4dc62dc8c004c029d11da6e6152804f Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 4 Mar 2025 10:46:24 +0800
Subject: [PATCH 041/126] chore: add sticky section config

---
 .../lib/platform/template/wx/component-config/index.js        | 4 +++-
 .../lib/runtime/components/react/mpx-scroll-view.tsx          | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
index 338470e9f7..a76146a2e2 100644
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
@@ -43,6 +43,7 @@ const component = require('./component')
 const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
 const stickyHeader = require('./sticky-header')
+const stickySection = require('./sticky-section')
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
    * universal print for detail component warn or error
@@ -126,6 +127,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     label({ print }),
     component(),
     rootPortal({ print }),
-    stickyHeader({ print })
+    stickyHeader({ print }),
+    stickySection({ print })
   ]
 }
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
index 2e3bb12041..bc788161ab 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
@@ -478,7 +478,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       showsVerticalScrollIndicator: scrollY && showScrollbar,
       scrollEnabled: scrollX || scrollY,
       ref: scrollViewRef,
-      onScroll: enableSticky ? scrollHandler: onScroll,
+      onScroll: enableSticky ? scrollHandler : onScroll,
       onContentSizeChange: onContentSizeChange,
       bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
       bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,

From 5b1e320d8295909ba3d6e5e00f67ae95d8241433 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 4 Mar 2025 15:04:07 +0800
Subject: [PATCH 042/126] =?UTF-8?q?fix:=20rn=20=E5=90=B8=E9=A1=B6=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/react/context.ts      |  8 +++++---
 .../runtime/components/react/mpx-scroll-view.tsx | 11 ++++++-----
 .../components/react/mpx-sticky-header.tsx       | 16 ++++++++--------
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/context.ts b/packages/webpack-plugin/lib/runtime/components/react/context.ts
index 73227b0c5c..202333fed3 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/context.ts
+++ b/packages/webpack-plugin/lib/runtime/components/react/context.ts
@@ -1,5 +1,5 @@
 import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react'
-import { NativeSyntheticEvent } from 'react-native'
+import { NativeSyntheticEvent, Animated } from 'react-native'
 
 export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
@@ -43,7 +43,9 @@ export interface PortalContextValue {
 }
 
 export interface ScrollViewContextValue {
-   gestureRef: React.RefObject<any> | null
+  gestureRef: React.RefObject<any> | null,
+  scrollOffset: Animated.Value,
+  scrollLayoutRef: React.RefObject<any>
 }
 
 export interface RouteContextValue {
@@ -73,6 +75,6 @@ export const SwiperContext = createContext({})
 
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
 
-export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
+export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null, scrollOffset: new Animated.Value(0), scrollLayoutRef: { current: {} } })
 
 export const PortalContext = createContext<PortalContextValue>(null as any)
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
index bc788161ab..4615516f43 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
@@ -199,15 +199,16 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     gestureRef: scrollViewRef
   })
 
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
+
   const contextValue = useMemo(() => {
     return {
       gestureRef: scrollViewRef,
-      scrollOffset
+      scrollOffset,
+      scrollLayoutRef: layoutRef
     }
   }, [])
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
-
   if (scrollX && scrollY) {
     warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion')
   }
@@ -532,9 +533,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     white: ['#fff']
   }
 
-  let ScrollViewComponent = ScrollView
+  let ScrollViewComponent: React.ComponentType<any> = ScrollView
   if (enableSticky) {
-    ScrollViewComponent = Animated.createAnimatedComponent(ScrollView)
+    ScrollViewComponent = Animated.createAnimatedComponent(ScrollView) as React.ComponentType<any>
   }
 
   return createElement(
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
index 96dd4673db..dd1aa08b3f 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
@@ -1,6 +1,6 @@
 
-import React, { useEffect, useRef, useState, useContext, forwardRef, useMemo, createElement } from 'react'
-import { Animated, StyleSheet, View, NativeSyntheticEvent } from 'react-native'
+import  { useEffect, useRef, useState, useContext, forwardRef, useMemo, createElement, ReactNode } from 'react'
+import { Animated, StyleSheet, View, NativeSyntheticEvent, ViewStyle } from 'react-native'
 import { ScrollViewContext } from './context'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
@@ -33,8 +33,8 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
   const contentHeight = useRef(0)
   const [headerTop, setHeaderTop] = useState(0)
   const scrollViewContext = useContext(ScrollViewContext)
-  const scrollOffset = scrollViewContext.scrollOffset
-  const headerRef = useRef(null)
+  const { scrollOffset, scrollLayoutRef } = scrollViewContext
+  const headerRef = useRef<View>(null)
   const isStickOnTopRef = useRef(false)
 
   const {
@@ -68,7 +68,7 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
 
     const listener = scrollOffset.addListener((state: { value: number }) => {
       const currentScrollValue = state.value
-      const newIsStickOnTop = currentScrollValue > headerTop
+      const newIsStickOnTop = currentScrollValue > (headerTop - (scrollLayoutRef.current.offsetTop || 0))
       if (newIsStickOnTop !== isStickOnTopRef.current) {
         isStickOnTopRef.current = newIsStickOnTop
         bindstickontopchange(
@@ -88,9 +88,10 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
 
   const animatedStyle = useMemo(() => {
     const threshold = 1
+    const realHeaderTop = headerTop - (scrollLayoutRef.current.offsetTop || 0)
 
     const inputRange =
-      headerTop <= threshold ? [0, 1] : [headerTop - 1, headerTop]
+     realHeaderTop <= threshold ? [0, 1] : [realHeaderTop - 1, realHeaderTop]
 
     const outputRange = [0, 1]
 
@@ -100,7 +101,7 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
         outputRange,
         extrapolate: 'clamp'
       }),
-      Animated.subtract(scrollOffset, headerTop <= threshold ? -offsetTop : headerTop)
+      Animated.subtract(scrollOffset, realHeaderTop <= threshold ? -offsetTop : realHeaderTop)
     )
 
     return {
@@ -133,7 +134,6 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
 const styles = StyleSheet.create({
   content: {
     width: '100%',
-    boxSizing: 'border-box',
     zIndex: 10
   }
 })

From fe3dc93930260e9f942a6d5e2946131870c94b78 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 4 Mar 2025 19:45:56 +0800
Subject: [PATCH 043/126] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81padding?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../runtime/components/react/mpx-sticky-header.tsx    | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
index dd1aa08b3f..9b79645b56 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
@@ -1,5 +1,5 @@
 
-import  { useEffect, useRef, useState, useContext, forwardRef, useMemo, createElement, ReactNode } from 'react'
+import { useEffect, useRef, useState, useContext, forwardRef, useMemo, createElement, ReactNode } from 'react'
 import { Animated, StyleSheet, View, NativeSyntheticEvent, ViewStyle } from 'react-native'
 import { ScrollViewContext } from './context'
 import useNodesRef, { HandlerRef } from './useNodesRef'
@@ -9,6 +9,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 interface StickyHeaderProps {
   children?: ReactNode;
   style?: ViewStyle;
+  padding?: [number, number, number, number];
   'offset-top'?: number;
   'enable-var'?: boolean;
   'external-var-context'?: Record<string, any>;
@@ -23,6 +24,7 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
   const {
     style,
     bindstickontopchange,
+    padding = [0, 0, 0, 0],
     'offset-top': offsetTop = 0,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
@@ -111,7 +113,12 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
 
   const innerProps = useInnerProps(props, {
     ref: headerRef,
-    style: extendObject({}, styles.content, innerStyle, animatedStyle)
+    style: extendObject({}, styles.content, innerStyle, animatedStyle, {
+      paddingTop: padding[0] || 0,
+      paddingRight: padding[1] || 0,
+      paddingBottom: padding[2] || 0,
+      paddingLeft: padding[3] || 0
+    })
   }, [], { layoutRef })
 
   return (

From a325f03d278835a7fd23a65902627a717cb428c3 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 5 Mar 2025 11:25:05 +0800
Subject: [PATCH 044/126] =?UTF-8?q?fix:=20=E5=AF=BC=E8=88=AA=E6=9D=A1?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E8=8E=B7=E5=8F=96=E5=BC=82=E5=B8=B8=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E5=90=B8=E9=99=84=E4=BD=8D=E7=BD=AE=E4=B8=8D=E6=AD=A3?=
 =?UTF-8?q?=E7=A1=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-scroll-view.tsx      |  2 +-
 .../components/react/mpx-sticky-header.tsx    | 24 +++++++++----------
 .../lib/runtime/components/react/utils.tsx    | 13 +++++++++-
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
index 4615516f43..7736b48503 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
@@ -199,7 +199,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     gestureRef: scrollViewRef
   })
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props: extendObject({}, props, { 'enable-offset': true }), hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
 
   const contextValue = useMemo(() => {
     return {
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
index 9b79645b56..9d91d76450 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
@@ -1,6 +1,6 @@
 
 import { useEffect, useRef, useState, useContext, forwardRef, useMemo, createElement, ReactNode } from 'react'
-import { Animated, StyleSheet, View, NativeSyntheticEvent, ViewStyle } from 'react-native'
+import { Animated, StyleSheet, View, NativeSyntheticEvent, ViewStyle, LayoutChangeEvent } from 'react-native'
 import { ScrollViewContext } from './context'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
@@ -48,29 +48,29 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { layoutRef } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef })
+  const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout })
 
   const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
 
-  useNodesRef(props, ref, headerRef, {
-    style: normalStyle
-  })
-
-  useEffect(() => {
+  function onLayout (e: LayoutChangeEvent) {
     if (headerRef.current) {
       headerRef.current.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
         contentHeight.current = height
         setHeaderTop(pageY - offsetTop)
       })
     }
-  }, [])
+  }
+
+  useNodesRef(props, ref, headerRef, {
+    style: normalStyle
+  })
 
   useEffect(() => {
     if (!bindstickontopchange) return
 
     const listener = scrollOffset.addListener((state: { value: number }) => {
       const currentScrollValue = state.value
-      const newIsStickOnTop = currentScrollValue > (headerTop - (scrollLayoutRef.current.offsetTop || 0))
+      const newIsStickOnTop = currentScrollValue > (headerTop - (scrollLayoutRef.current._offsetTop || 0))
       if (newIsStickOnTop !== isStickOnTopRef.current) {
         isStickOnTopRef.current = newIsStickOnTop
         bindstickontopchange(
@@ -90,7 +90,7 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
 
   const animatedStyle = useMemo(() => {
     const threshold = 1
-    const realHeaderTop = headerTop - (scrollLayoutRef.current.offsetTop || 0)
+    const realHeaderTop = headerTop - (scrollLayoutRef.current._offsetTop || 0)
 
     const inputRange =
      realHeaderTop <= threshold ? [0, 1] : [realHeaderTop - 1, realHeaderTop]
@@ -111,7 +111,7 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
     }
   }, [headerTop, scrollOffset])
 
-  const innerProps = useInnerProps(props, {
+  const innerProps = useInnerProps(props, extendObject({}, {
     ref: headerRef,
     style: extendObject({}, styles.content, innerStyle, animatedStyle, {
       paddingTop: padding[0] || 0,
@@ -119,7 +119,7 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
       paddingBottom: padding[2] || 0,
       paddingLeft: padding[3] || 0
     })
-  }, [], { layoutRef })
+  }, layoutProps), [], { layoutRef })
 
   return (
     createElement(
diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
index d6c06f0e57..474183165b 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx
@@ -535,7 +535,18 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
       if (enableOffset) {
         nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
           const { y: navigationY = 0 } = navigation?.layout || {}
-          layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY }
+          layoutRef.current = {
+            x,
+            y: y - navigationY,
+            width,
+            height,
+            offsetLeft,
+            offsetTop: offsetTop - navigationY,
+            _x: x,
+            _y: y,
+            _offsetLeft: offsetLeft,
+            _offsetTop: offsetTop
+          }
         })
       }
       onLayout && onLayout(e)

From 93e0a07921f6ee3d751ecd1aad2bbc350dcaa974 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 5 Mar 2025 13:05:16 +0800
Subject: [PATCH 045/126] =?UTF-8?q?feat:=20add=20sticky-section=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wx/component-config/sticky-section.js     |  4 +-
 .../components/react/mpx-sticky-section.tsx   | 71 +++++++++++++++++++
 2 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-section.tsx

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-section.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-section.js
index f60733bfbe..31abe0dded 100644
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-section.js
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-section.js
@@ -5,11 +5,11 @@ module.exports = function ({ print }) {
     test: TAG_NAME,
     android (tag, { el }) {
       el.isBuiltIn = true
-      return 'View'
+      return 'mpx-sticky-section'
     },
     ios (tag, { el }) {
       el.isBuiltIn = true
-      return 'View'
+      return "mpx-sticky-section";
     },
     web (tag, { el }) {
       return 'div'
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-section.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-section.tsx
new file mode 100644
index 0000000000..5df753ee1a
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-section.tsx
@@ -0,0 +1,71 @@
+
+import { useRef, forwardRef, createElement, ReactNode } from 'react'
+import { View, ViewStyle } from 'react-native'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
+import useInnerProps from './getInnerListeners'
+
+interface StickySectionProps {
+  children?: ReactNode;
+  style?: ViewStyle;
+  'offset-top'?: number;
+  'enable-var'?: boolean;
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
+}
+
+const _StickySection = forwardRef<HandlerRef<View, StickySectionProps>, StickySectionProps>((stickySectionProps: StickySectionProps = {}, ref): JSX.Element => {
+  const { textProps, innerProps: props = {} } = splitProps(stickySectionProps)
+  const {
+    style,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+  const sectionRef = useRef<View>(null)
+
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef })
+
+  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
+
+  useNodesRef(props, ref, sectionRef, {
+    style: normalStyle
+  })
+
+  const innerProps = useInnerProps(props, extendObject({
+    style: extendObject(innerStyle, layoutStyle),
+    ref: sectionRef
+  }, layoutProps), [], { layoutRef })
+
+  return (
+    createElement(
+      View,
+      innerProps,
+      wrapChildren(
+        props,
+        {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
+        }
+      )
+    )
+  )
+})
+
+_StickySection.displayName = 'MpxStickySection'
+export default _StickySection

From 0d2484da3cb6ef09cbca3c9f96d438791d154567 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 5 Mar 2025 19:28:24 +0800
Subject: [PATCH 046/126] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E6=97=A0?=
 =?UTF-8?q?=E7=94=A8sticky=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-sticky-header.mpx   | 179 ---------------
 .../components/extend/mpx-sticky-section.mpx  | 209 ------------------
 .../components/react/mpx-sticky-header-v1.jsx |  69 ------
 3 files changed, 457 deletions(-)
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-section.mpx
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header-v1.jsx

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
deleted file mode 100644
index 8f2c052d7a..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-header.mpx
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-  <view class="mpx-sticky-header">
-    <view
-      wx:ref
-      class="sticky-header-placeholder"
-      id="sticky-header-placeholder-{{stickyId}}"
-      style="height: {{contentHeight}}px; position: {{ isSticky ? 'relative' : 'absolute' }}"
-    ></view>
-
-    <root-portal wx:if="{{isRn && isSticky}}">
-      <view
-        id="{{stickyId}}"
-        wx:ref
-        class="sticky-header-content {{isSticky ? 'is-sticky' : ''}}"
-        style="{{contentStyle}}"
-      >
-        <slot></slot>
-      </view>
-    </root-portal>
-    <view
-      wx:else
-        id="{{stickyId}}"
-        wx:ref
-        class="sticky-header-content {{isSticky ? 'is-sticky' : ''}}"
-        style="{{contentStyle}}"
-      >
-        <slot></slot>
-      </view>
-  </view>
-</template>
-
-<script>
-  import mpx, { createComponent } from '@mpxjs/core'
-
-  createComponent({
-    properties: {
-      // 吸顶时与顶部的距离，单位px
-      offsetTop: {
-        type: Number,
-        value: 0
-      },
-      // 内边距 [top, right, bottom, left]
-      padding: {
-        type: Array,
-        value: [0, 0, 0, 0]
-      },
-      stickyId: {
-        type: String,
-        value: ''
-      },
-      margins: {
-        type: Object,
-        value: {
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 0
-        }
-      }
-    },
-
-    data: {
-      isSticky: false,
-      contentHeight: 0,
-      contentStyle: '',
-      isRn: __mpx_mode__ === 'ios' || __mpx_mode__ === 'android'
-    },
-
-    computed: {
-      baseStyle() {
-        const { padding, offsetTop, isSticky } = this
-        const [paddingTop, paddingRight, paddingBottom, paddingLeft] = padding
-        return [
-          isSticky ? `top: ${(this.margins.top || 0) + offsetTop}px;` : '',
-          `padding: ${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px;`
-        ].join('')
-      }
-    },
-    ready() {
-      this.init()
-    },
-    watch: {
-      margins: {
-        handler(newVal) {
-          this.setupObservers()
-        }
-      }
-    },
-    lifetimes: {
-      detached() {
-        this.cleanup()
-      }
-    },
-
-    methods: {
-      init() {
-        mpx
-          .createSelectorQuery()
-          .in(this)
-          .select('.sticky-header-content')
-          .boundingClientRect((rect) => {
-            if (rect) {
-              this.contentHeight = rect.height
-              this.setupObservers()
-            }
-          })
-          .exec()
-      },
-
-      setupObservers() {
-        if (this.intersectionObserver) {
-          this.intersectionObserver.disconnect()
-        }
-
-        let lastPushedOffset
-
-        const updateStickyState = (entry) => {
-          const topDistance = entry.boundingClientRect.top - this.margins.top - this.offsetTop
-          const shouldSticky = entry.intersectionRatio < 1 && topDistance <= 0
-
-          if (this.isSticky !== shouldSticky) {
-            this.isSticky = shouldSticky
-            this.contentStyle = shouldSticky ? this.baseStyle : ''
-
-            this.triggerEvent('stickontopchange', {
-              isSticky: shouldSticky,
-              height: entry.boundingClientRect.height
-            })
-          }
-        }
-
-        this.intersectionObserver = this.createIntersectionObserver({
-            thresholds: [0, 1]
-          })
-            .relativeToViewport({
-              top: -this.margins.top,
-              left: -this.margins.left,
-              right: this.margins.right,
-              bottom: this.margins.bottom
-            })
-            .observe(`#sticky-header-placeholder-${this.stickyId}`, (res) => {              
-              updateStickyState(res)
-            })
-      },
-
-      cleanup() {
-        if (this.intersectionObserver) {
-          this.intersectionObserver.disconnect()
-        }
-      }
-    }
-  })
-</script>
-
-<style lang="stylus">
-  .mpx-sticky-header
-    position relative
-  .sticky-header-placeholder
-    width 100%
-    position absolute
-    top 0
-    left 0
-    /* 支付宝环境需要设置允许事件穿透, 否则点不动 */
-    /* @mpx-if (__mpx_mode__ === 'ali') */
-    pointer-events none
-    /* @mpx-endif */
-  .sticky-header-content
-    width 100%
-    box-sizing border-box
-  .is-sticky
-    position fixed
-    left 0
-</style>
-
-<script type="application/json">
-  {
-    "component": true
-  }
-</script>
\ No newline at end of file
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-section.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-section.mpx
deleted file mode 100644
index b351578b91..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-sticky-section.mpx
+++ /dev/null
@@ -1,209 +0,0 @@
-<template>
-  <view class="mpx-sticky-section">
-    <view 
-      class="sticky-placeholder" 
-      style="height: {{isSticky ? contentHeight : 0}}px;"
-    ></view>
-    <view 
-      id="{{id}}"
-      wx:ref
-      class="sticky-content {{isSticky ? 'is-sticky' : ''}}" 
-      style="{{contentStyle}}"
-    >
-      <slot></slot>
-    </view>
-  </view>
-</template>
-
-<script>
-import mpx, { createComponent } from '@mpxjs/core'
-
-createComponent({
-  properties: {
-    // 吸顶时与顶部的距离，单位px
-    offsetTop: {
-      type: Number,
-      value: 0
-    },
-    // 吸顶元素重叠时是否继续上推
-    pushPinnedHeader: {
-      type: Boolean,
-      value: true
-    },
-    // 内边距 [top, right, bottom, left]
-    padding: {
-      type: Array,
-      value: [0, 0, 0, 0]
-    },
-    // scroll-view的选择器
-    scrollSelector: {
-      type: String,
-      value: ''
-    },
-    id: {
-      type: String,
-      value: ''
-    }
-  },
-
-  data: {
-    isSticky: false,
-    contentHeight: 0,
-    contentStyle: '',
-    selectorQuery: null
-  },
-
-  computed: {
-    baseStyle() {
-      const { padding, offsetTop, isSticky } = this
-      const [paddingTop, paddingRight, paddingBottom, paddingLeft] = padding
-      
-      return [
-        isSticky ? `top: ${offsetTop}px;` : '',
-        `padding: ${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px;`
-      ].join('')
-    }
-  },
-
-  lifetimes: {
-    attached() {
-      this.selectorQuery = mpx.createSelectorQuery().in(this)
-      this.init()
-    },
-    
-    detached() {
-      this.cleanup()
-    }
-  },
-
-  methods: {
-    init() {
-      query.select('.sticky-content')
-        .boundingClientRect(rect => {
-          if (rect) {
-            this.contentHeight = rect.height
-            this.setupObservers()
-          }
-        })
-        .exec()
-    },
-
-    setupObservers() {
-      let lastPushedOffset = 0
-
-      const updateStickyState = () => {
-        const getRects = () => {
-            return new Promise((resolve) => {
-            
-            if (this.scrollSelector) {
-              this.selectorQuery.select(`#${this.scrollSelector}`)
-                .boundingClientRect()
-                .selectAll('.sticky-content')
-                .boundingClientRect()
-                .exec(res => {
-                  if (!res || !res[0] || !res[1]) {
-                    resolve([])
-                    return
-                  }
-                  
-                  const scrollRect = res[0]
-                  const contentRects = res[1]
-                  
-                  const adjustedRects = contentRects.map(rect => ({
-                    ...rect,
-                    relativeTop: rect.top - scrollRect.top
-                  }))
-                  resolve(adjustedRects)
-                })
-            }
-          })
-        }
-
-        const updatePosition = async () => {
-          const rects = await getRects()
-          const currentRect = rects.find(rect => rect.id === this.id)
-          if (!currentRect) return
-
-          const shouldSticky = currentRect.relativeTop <= this.offsetTop
-
-          if (this.isSticky !== shouldSticky) {
-            this.isSticky = shouldSticky
-            this.triggerEvent('stickontopchange', {
-              isSticky: shouldSticky,
-              height: currentRect.height
-            })
-          }
-
-          if (this.pushPinnedHeader && shouldSticky) {
-            const stickyRects = rects.filter(rect => {
-              const el = this.selectorQuery.select(`#${rect.id}`)
-              return el && el.hasClass('is-sticky')
-            })
-            
-            const aboveHeaders = stickyRects.filter(rect => 
-              rect.relativeTop < currentRect.relativeTop && 
-              rect.id !== this.id
-            )
-            
-            const totalPush = aboveHeaders.reduce((sum, rect) => sum + rect.height, 0)
-            
-            if (totalPush !== lastPushedOffset) {
-              lastPushedOffset = totalPush
-              this.contentStyle = this.baseStyle + (totalPush ? `transform: translateY(${totalPush}px);` : '')
-            }
-          }
-        }
-
-        updatePosition()
-      }
-
-      if (this.scrollSelector) {
-        this.createIntersectionObserver({
-          thresholds: [0, 1]
-        })
-        .relativeTo(`#${this.scrollSelector}`, {
-          top: -this.offsetTop  // 设置观察的偏移量
-        })
-        .observe('.sticky-content', (res) => {
-          if (res.intersectionRatio < 1) {
-            updateStickyState()
-          }
-        })
-      }
-
-      // 触发初始状态检查
-      updateStickyState()
-    },
-
-    cleanup() {
-      if (this.intersectionObserver) {
-        this.intersectionObserver.disconnect()
-      }
-    }
-  }
-})
-</script>
-
-<style lang="stylus">
-.mpx-sticky-section
-  position: relative
-  
-  .sticky-placeholder
-    width: 100%
-    transition: height 0.1s ease-in-out
-  
-  .sticky-content
-    width: 100%
-    z-index: 100
-    box-sizing: border-box
-    
-    &.is-sticky
-      position: fixed
-      left: 0
-</style>
-
-<script type="application/json">
-{
-  "component": true
-}
-</script>
\ No newline at end of file
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header-v1.jsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header-v1.jsx
deleted file mode 100644
index e15726f489..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header-v1.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { useEffect, useRef, useState, useContext } from 'react'
-import { StyleSheet } from 'react-native'
-import Animated, { useAnimatedStyle, useSharedValue, useAnimatedReaction, runOnJS, useScrollViewOffset } from 'react-native-reanimated'
-import { ScrollViewContext } from './context'
-export const _StickyHeader = ({ offsetTop = 0, children, onStickOnTopChange, style, scrollViewRef }) => {
-  const [contentHeight, setContentHeight] = useState(0)
-  const [headerTop, setHeaderTop] = useState(0)
-  const [isSticky, setIsSticky] = useState(false)
-  const scrollViewContext = useContext(ScrollViewContext)
-  const scrollY = useScrollViewOffset(scrollViewContext.gestureRef)
-  const headerRef = useRef(null)
-  const translateY = useSharedValue(0)
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: translateY.value }],
-      zIndex: 10
-    }
-  })
-  useAnimatedReaction(() => scrollY.value, currentScrollY => {
-    // 计算元素顶部距离视口顶部的距离
-    const elementTopToViewport = headerTop - currentScrollY
-    // 当元素顶部距离视口顶部的距离小于等于 offsetTop 时触发吸顶
-    const shouldSticky = elementTopToViewport <= offsetTop
-    if (shouldSticky) {
-      // 计算需要偏移的距离：
-      // 当前滚动位置 - (header初始位置 - 期望的吸顶位置)
-      translateY.value = currentScrollY - (headerTop - offsetTop)
-    } else {
-      // 不吸顶时回到原始位置
-      translateY.value = 0
-    }
-    // 更新吸顶状态
-    if (isSticky !== shouldSticky) {
-      runOnJS(setIsSticky)(shouldSticky)
-      if (onStickOnTopChange) {
-        runOnJS(onStickOnTopChange)(shouldSticky, contentHeight)
-      }
-    }
-  }, [headerTop, offsetTop, contentHeight, isSticky])
-  useEffect(() => {
-    if (headerRef.current) {
-      headerRef.current.measure((x, y, width, height, pageX, pageY) => {
-        setContentHeight(height)
-        setHeaderTop(pageY)
-      })
-    }
-  }, [])
-  return (<Animated.View ref={headerRef} style={[
-    styles.content,
-    animatedStyles,
-    style
-  ]}>
-      {React.cloneElement(children, {
-        style: styles.fill
-      })}
-    </Animated.View>)
-}
-const styles = StyleSheet.create({
-  content: {
-    width: '100%',
-    boxSizing: 'border-box'
-  },
-  fill: {
-    flex: 1
-  }
-})
-
-_StickyHeader.displayName = 'MpxStickyHeader'
-export default _StickyHeader
\ No newline at end of file

From 09cc2622969479daa7bbaf1dbbcb2e48fdeed218 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 7 Mar 2025 15:26:55 +0800
Subject: [PATCH 047/126] =?UTF-8?q?fix:=20add=20enableSticky=20=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/extend/mpx-recycle-view.mpx       | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 24822a1685..87b9eccaf1 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -10,6 +10,7 @@
     lower-threshold="{{lowerThreshold}}"
     upper-threshold="{{upperThreshold}}"
     scroll-options="{{scrollOptions}}"
+    enable-sticky="{{enableSticky}}"
     wx:style="width: {{_width}}; height: {{_height}}"
     bindscroll="onScroll"
     bindscrolltoupper="onScrollToUpper"
@@ -78,6 +79,10 @@
       minRenderCount: {
         type: Number,
         value: 10
+      },
+      enableSticky: {
+        type: Boolean,
+        value: false
       }
     },
     data: {

From 3e89590854130ef6cf66583aabd901bb21f3028f Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 7 Mar 2025 15:27:32 +0800
Subject: [PATCH 048/126] chore: del useless code

---
 .../components/extend/mpx-recycle-view.mpx    | 23 +------------------
 1 file changed, 1 insertion(+), 22 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 87b9eccaf1..f6f0b0ad9a 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -115,28 +115,7 @@
       visibleCount() {
         if (!this.visibleCounts.length) return this.minRenderCount
         return Math.max(this.visibleCounts[this.start], this.minRenderCount)
-      },
-      // visibleCount() {
-      //   if (!this.positions.length) return 0
-
-      //   let count = 0
-      //   let totalHeight = 0
-      //   const startIndex = Math.min(this.start, this.positions.length - 1)
-
-      //   for (let i = startIndex; i < this.positions.length; i++) {
-      //     totalHeight += this.positions[i]?.height || 0
-      //     if (totalHeight > this.containerHeight) {
-      //       break
-      //     }
-      //     count++
-      //   }
-
-      //   // 如果是最后几个项目，确保全部显示
-      //   if (startIndex + count > this.positions.length - 3) {
-      //     count = this.positions.length - startIndex
-      //   }
-      //   return Math.max(count, this.minRenderCount)
-      // },
+      },  
       aboveCount() {
         return Math.max(0, Math.min(this.start, this.bufferScale * this.visibleCount))
       },

From a05fda418d559cfae080f8a358f1e8625affc66c Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 7 Mar 2025 17:23:56 +0800
Subject: [PATCH 049/126] fix: sticky-header

---
 .../components/web/mpx-scroll-view.vue        |  7 +++++-
 .../components/web/mpx-sticky-header.vue      | 22 +++++++++++--------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-scroll-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-scroll-view.vue
index 428b3d6fc7..3130be9565 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-scroll-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-scroll-view.vue
@@ -62,6 +62,9 @@
       return {
         scrollOffset: {
           get: () => this.lastY
+        },
+        scrollViewRect: {
+          get: () => this.scrollViewRect
         }
       }
     },
@@ -76,7 +79,8 @@
         lastContentWidth: 0,
         lastContentHeight: 0,
         lastWrapperWidth: 0,
-        lastWrapperHeight: 0
+        lastWrapperHeight: 0,
+        scrollViewRect: {}
       }
     },
     computed: {
@@ -335,6 +339,7 @@
         const scrollWrapperHeight = wrapper?.clientHeight || 0
         if (wrapper) {
           const computedStyle = getComputedStyle(wrapper)
+          this.scrollViewRect = wrapper.getBoundingClientRect()
           // 考虑子元素样式可能会设置100%，如果直接继承 scrollContent 的样式可能会有问题
           // 所以使用 wrapper 作为 innerWrapper 的宽高参考依据
           this.$refs.innerWrapper.style.width = `${scrollWrapperWidth - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-sticky-header.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-sticky-header.vue
index 73b9fa64d8..f17fc69e45 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-sticky-header.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-sticky-header.vue
@@ -3,7 +3,7 @@ import { getCustomEvent } from './getInnerListeners'
 
 export default {
   name: 'mpx-sticky-header',
-  inject: ['scrollOffset'],
+  inject: ['scrollOffset', 'scrollViewRect'],
   props: {
     'offsetTop': {
       type: Number,
@@ -13,22 +13,21 @@ export default {
   data () {
     return {
       headerTop: 0,
-      isStickOnTop: false
+      isStickOnTop: false,
+      headerRect: {}
     }
   },
   computed: {
     _scrollOffset () {
       return -this.scrollOffset?.get() || 0
+    },
+    _scrollViewRect () {
+      return this.scrollViewRect?.get() || {}
     }
   },
   mounted () {
-    if (!this.$parent?.$refs?.wrapper) {
-      console.error('[Mpx runtime error]: sticky-header must be placed inside a scroll-view component')
-      return
-    }
-    const rect = this.$el.getBoundingClientRect()
-    const scrollViewRect = this.$parent.$refs.wrapper.getBoundingClientRect()
-    this.headerTop = rect.top - scrollViewRect.top - this.offsetTop
+    this.headerRect = this.$el.getBoundingClientRect()
+    this.headerTop = this.headerRect.top - (this._scrollViewRect.top || 0) - this.offsetTop
   },
   watch: {
     _scrollOffset: {
@@ -43,6 +42,11 @@ export default {
         }
       },
       immediate: true
+    },
+    _scrollViewRect: {
+      handler (rect = {}) {
+        this.headerTop = this.headerRect.top - (rect.top || 0) - this.offsetTop
+      },
     }
   },
   render (h) {

From 15dd08b5443b0068f57c3312b1576fb6bbcecaab Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 14 Mar 2025 14:54:43 +0800
Subject: [PATCH 050/126] =?UTF-8?q?fix:=20AnimatedScrollView=20=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E6=97=B6=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/react/mpx-scroll-view.tsx        | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
index 15d240d53f..f76812948d 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
@@ -107,6 +107,9 @@ type ScrollAdditionalProps = {
   onScrollEndDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };
+
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView) as React.ComponentType<any>
+
 const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, ScrollViewProps>((scrollViewProps: ScrollViewProps = {}, ref): JSX.Element => {
   const { textProps, innerProps: props = {} } = splitProps(scrollViewProps)
   const {
@@ -535,8 +538,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   let ScrollViewComponent: React.ComponentType<any> = ScrollView
   if (enableSticky) {
-    ScrollViewComponent = Animated.createAnimatedComponent(ScrollView) as React.ComponentType<any>
-  }
+    ScrollViewComponent = AnimatedScrollView
 
   return createElement(
     ScrollViewComponent,

From 8f2b0a6c58e37751f8944aadee033529e2058a5c Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 14 Mar 2025 14:56:21 +0800
Subject: [PATCH 051/126] =?UTF-8?q?fix:=20AnimatedScrollView=20=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E6=97=B6=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/react/mpx-scroll-view.tsx          | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
index f76812948d..22b0652292 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
@@ -536,9 +536,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     white: ['#fff']
   }
 
-  let ScrollViewComponent: React.ComponentType<any> = ScrollView
-  if (enableSticky) {
-    ScrollViewComponent = AnimatedScrollView
+  const ScrollViewComponent = enableSticky ? AnimatedScrollView : ScrollView
 
   return createElement(
     ScrollViewComponent,

From 1f9ad4c0bdf77a88ac9e2bf8acb530709656887b Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 14 Mar 2025 17:55:25 +0800
Subject: [PATCH 052/126] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=85=A5=E5=8F=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.mpx    | 39 ++++++-------------
 1 file changed, 11 insertions(+), 28 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index f6f0b0ad9a..bda9539f85 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -19,14 +19,7 @@
     <view class="content-wrapper">
       <view class="infinite-list-placeholder" wx:style="{{placeholderStyle}}"></view>
       <view class="infinite-list" wx:style="{{contentStyle}}">
-        <view
-          wx:for="{{visibleData}}"
-          wx:key="_index"
-          class="infinite-list-item"
-          wx:style="height: {{item._size.height}}; width: {{item._size.width}}; overflow: hidden"
-        >
-          <recycle-item current-item="{{item}}" />
-        </view>
+        <recycle-item wx:for="{{visibleData}}" wx:key="_index" current-item="{{item}}"/>
       </view>
     </view>
   </scroll-view>
@@ -45,7 +38,7 @@
         type: Number,
         value: 0
       },
-      itemSize: {
+      itemHeight: {
         type: Object,
         value: {}
       },
@@ -140,14 +133,10 @@
 
         return this._listData.slice(start, end).map((item, idx) => {
           const realIndex = start + idx
-          const size = this.getItemSize(item, realIndex)
+          const height = this.getItemHeight(item, realIndex)
           return {
             ...item,
-            _index: `_${realIndex}`,
-            _size: {
-              width: typeof size.width === 'number' ? `${size.width}px` : size.width,
-              height: typeof size.height === 'number' ? `${size.height}px` : size.height
-            }
+            _index: `_${realIndex}`
           }
         })
       },
@@ -199,12 +188,12 @@
       initPositions() {
         let bottom = 0
         this.positions = this._listData.map((item, index) => {
-          const size = this.getItemSize(item, index)
+          const height = this.getItemHeight(item, index)
           const position = {
             index,
-            height: size.height,
+            height: height,
             top: bottom,
-            bottom: bottom + size.height
+            bottom: bottom + height
           }
           bottom = position.bottom
           return position
@@ -294,20 +283,14 @@
           this.contentStyle = `transform: translateY(0px);`
         }
       },
-      getItemSize(item, index) {
-        const { width, height, getter } = this.itemSize
-        let size
+      getItemHeight(item, index) {
+        const { value, getter } = this.itemHeight
         if (typeof getter === 'function') {
-          size = getter(item, index)
+          return getter(item, index) || 0
         } else {
-          size = {
-            width: width || 0,
-            height: height || 0
-          }
+          return value || 0
         }
-        return size
       },
-
       onScroll(e) {
         const now = Date.now()
         if (now - this.lastScrollTime < this.scrollThrottleDelay) {

From 371ccf8c959ba6df3035659f7778be0fd0573c64 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 14 Mar 2025 19:41:29 +0800
Subject: [PATCH 053/126] fix: lint

---
 .../lib/platform/template/wx/component-config/sticky-section.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-section.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-section.js
index 31abe0dded..1b8efda540 100644
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-section.js
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/sticky-section.js
@@ -9,7 +9,7 @@ module.exports = function ({ print }) {
     },
     ios (tag, { el }) {
       el.isBuiltIn = true
-      return "mpx-sticky-section";
+      return 'mpx-sticky-section'
     },
     web (tag, { el }) {
       return 'div'

From 9680227c74d0b4d6a91427ce06dafaec7493873b Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 19 Mar 2025 14:52:54 +0800
Subject: [PATCH 054/126] =?UTF-8?q?fix:=20=E5=A4=96=E5=B1=82=E5=81=9A?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=20android=20pageY=20=E5=8F=AF=E8=83=BD?=
 =?UTF-8?q?=E6=8B=BF=E5=88=B0=E4=B8=8D=E5=87=86=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../runtime/components/react/mpx-sticky-header.tsx    | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
index 9d91d76450..36a0159f32 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx
@@ -54,10 +54,13 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
 
   function onLayout (e: LayoutChangeEvent) {
     if (headerRef.current) {
-      headerRef.current.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
-        contentHeight.current = height
-        setHeaderTop(pageY - offsetTop)
-      })
+      // hack 外层做动画 android pageY 可能拿到不准问题
+      setTimeout(() => {
+        headerRef.current!.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+          contentHeight.current = height
+          setHeaderTop(pageY - offsetTop)
+        })
+      }, 100)
     }
   }
 

From c2eef9daa65b91e71028ff9ea15c04da0b2f9da8 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 21 Mar 2025 14:08:37 +0800
Subject: [PATCH 055/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9scroll?=
 =?UTF-8?q?=E8=A7=A6=E5=8F=91=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.mpx        | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index bda9539f85..2d6b86167a 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -10,7 +10,7 @@
     lower-threshold="{{lowerThreshold}}"
     upper-threshold="{{upperThreshold}}"
     scroll-options="{{scrollOptions}}"
-    enable-sticky="{{enableSticky}}"
+    scrollEventThrottle="{{scrollEventThrottle}}"
     wx:style="width: {{_width}}; height: {{_height}}"
     bindscroll="onScroll"
     bindscrolltoupper="onScrollToUpper"
@@ -65,17 +65,13 @@
         type: Object,
         value: {}
       },
-      scrollThrottleDelay: {
+      scrollEventThrottle: {
         type: Number,
-        value: 16
+        value: 0
       },
       minRenderCount: {
         type: Number,
         value: 10
-      },
-      enableSticky: {
-        type: Boolean,
-        value: false
       }
     },
     data: {
@@ -292,11 +288,6 @@
         }
       },
       onScroll(e) {
-        const now = Date.now()
-        if (now - this.lastScrollTime < this.scrollThrottleDelay) {
-          return
-        }
-        this.lastScrollTime = now
         const { scrollTop } = e.detail
         this.start = this.getStartIndex(scrollTop)
         this.end = this.start + this.visibleCount

From 2ec66c0b5440ada09380fc7f6ebd3e58556e5f81 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 21 Mar 2025 14:37:33 +0800
Subject: [PATCH 056/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9scroll?=
 =?UTF-8?q?=E8=A7=A6=E5=8F=91=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/extend/mpx-recycle-view.mpx           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 2d6b86167a..3d550403e2 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -13,6 +13,7 @@
     scrollEventThrottle="{{scrollEventThrottle}}"
     wx:style="width: {{_width}}; height: {{_height}}"
     bindscroll="onScroll"
+    bindscrollend="onScrollEnd"
     bindscrolltoupper="onScrollToUpper"
     bindscrolltolower="onScrollToLower"
   >

From 4d7a2d2edd5174e6dca1911f024167d4ff1a43ed Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 21 Mar 2025 15:08:24 +0800
Subject: [PATCH 057/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9=20aboveCoun?=
 =?UTF-8?q?t=20=E5=92=8C=20belowCount=20=E8=AE=A1=E7=AE=97=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.mpx    | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 3d550403e2..71cb8548ba 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -20,7 +20,7 @@
     <view class="content-wrapper">
       <view class="infinite-list-placeholder" wx:style="{{placeholderStyle}}"></view>
       <view class="infinite-list" wx:style="{{contentStyle}}">
-        <recycle-item wx:for="{{visibleData}}" wx:key="_index" current-item="{{item}}"/>
+        <recycle-item wx:for="{{visibleData}}" wx:key="_index" current-item="{{item}}" />
       </view>
     </view>
   </scroll-view>
@@ -105,16 +105,30 @@
       visibleCount() {
         if (!this.visibleCounts.length) return this.minRenderCount
         return Math.max(this.visibleCounts[this.start], this.minRenderCount)
-      },  
+      },
       aboveCount() {
-        return Math.max(0, Math.min(this.start, this.bufferScale * this.visibleCount))
+        if (!this._listData.length || !this.visibleCounts.length) return 0
+        let count = 0
+        const startIndex = Math.max(0, this.start)
+        const endIndex = Math.max(0, startIndex - this.bufferScale)
+
+        for (let i = startIndex; i > endIndex; i--) {
+          count += this.visibleCounts[i] || 0
+        }
+
+        return count
       },
       belowCount() {
-        if (!this._listData.length) return 0
-        return Math.max(
-          0,
-          Math.min(this._listData.length - this.end, this.bufferScale * this.visibleCount)
-        )
+        if (!this._listData.length || !this.visibleCounts.length) return 0
+        let count = 0
+        const startIndex = Math.min(this.start, this._listData.length - 1)
+        const endIndex = Math.min(startIndex + this.bufferScale, this._listData.length - 1)
+
+        for (let i = startIndex; i < endIndex; i++) {
+          count += this.visibleCounts[i] || 0
+        }
+
+        return count
       },
       visibleData() {
         if (!this._listData.length) return []

From 730736de9839e9bff0b4b2d0635fa5f2e07f25a0 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 21 Mar 2025 21:40:27 +0800
Subject: [PATCH 058/126] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=87=8D=E5=BB=BA=E6=97=B6=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.mpx      | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 71cb8548ba..ff58f9c480 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -303,10 +303,21 @@
         }
       },
       onScroll(e) {
+        const now = Date.now()
+        if (now - this.lastScrollTime < 16) {
+          return
+        }
+        this.lastScrollTime = now
+
         const { scrollTop } = e.detail
-        this.start = this.getStartIndex(scrollTop)
-        this.end = this.start + this.visibleCount
-        this.setStartOffset()
+        const newStart = this.getStartIndex(scrollTop)
+        // 只有当start发生足够变化时才更新，避免触发重渲染
+        if (Math.abs(newStart - this.end) >= Math.floor(this.belowCount / 2)) {
+          this.start = newStart
+          this.end = this.start + this.visibleCount
+          this.setStartOffset()
+        }
+        
         this.triggerEvent('scroll', e)
       },
       onScrollToUpper(e) {

From c29beeb2644c2b64aa49a9d357fa70d9274dc69a Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 21 Mar 2025 23:07:22 +0800
Subject: [PATCH 059/126] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81scrollTo?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../runtime/components/extend/mpx-recycle-view.mpx  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index ff58f9c480..06225411e4 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -1,7 +1,7 @@
 <template>
   <scroll-view
     class="mpx-recycle-view"
-    wx:ref
+    wx:ref="mpxRecycleView"
     type="list"
     scroll-y="{{scrollY}}"
     scroll-top="{{_scrollTop}}"
@@ -304,6 +304,7 @@
       },
       onScroll(e) {
         const now = Date.now()
+        // 添加16ms的节流，大约60fps
         if (now - this.lastScrollTime < 16) {
           return
         }
@@ -311,7 +312,8 @@
 
         const { scrollTop } = e.detail
         const newStart = this.getStartIndex(scrollTop)
-        // 只有当start发生足够变化时才更新，避免触发重渲染
+        
+        // 只有当start发生足够变化时才更新，避免滚动触发重渲染
         if (Math.abs(newStart - this.end) >= Math.floor(this.belowCount / 2)) {
           this.start = newStart
           this.end = this.start + this.visibleCount
@@ -325,6 +327,13 @@
       },
       onScrollToLower(e) {
         this.triggerEvent('scrolltolower', e)
+      },
+      scrollTo(params = {}) {
+        this.$refs.mpxRecycleView.node().exec(res => {
+          if (res && res[0]) {
+            res[0].node.scrollTo(params)
+          }
+        })
       }
     }
   })

From 24e91837500ce7299cb92edaa252df474656e618 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 21 Mar 2025 23:52:33 +0800
Subject: [PATCH 060/126] =?UTF-8?q?chore:=20=E6=96=B0=E5=A2=9E=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/extend/mpx-recycle-view.mpx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index 06225411e4..edfbb2c3f3 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -5,6 +5,8 @@
     type="list"
     scroll-y="{{scrollY}}"
     scroll-top="{{_scrollTop}}"
+    enhanced="{{enhanced}}"
+    bounces="{{bounces}}"
     scroll-with-animation="{{scrollWithAnimation}}"
     enable-back-to-top="{{enableBackToTop}}"
     lower-threshold="{{lowerThreshold}}"
@@ -73,6 +75,14 @@
       minRenderCount: {
         type: Number,
         value: 10
+      },
+      enhanced: {
+        type: Boolean,
+        value: false
+      },
+      bounces: {
+        type: Boolean,
+        value: false
       }
     },
     data: {

From d12815d1a8ba04e36cd8fff949c9acae98d29086 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 24 Mar 2025 18:52:02 +0800
Subject: [PATCH 061/126] chore: add rn recyle

---
 .../components/extend/mpx-recycle-view.jsx    | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
new file mode 100644
index 0000000000..531e1f01f8
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
@@ -0,0 +1,52 @@
+import React, { forwardRef } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  SafeAreaView,
+  SectionList,
+  StatusBar,
+} from 'react-native';
+
+  const Item = global.__mpxOptionsMap._e0b4ebfc
+
+const App = (props = {}, ref) => {
+  const { listData } = props
+  return (
+    <SafeAreaView style={styles.container}>
+      <SectionList
+        sections={listData}
+        stickySectionHeadersEnabled={true}
+        keyExtractor={(item, index) => item + index}
+        renderItem={({item}) => <Item currentItem={item} />}
+        renderSectionHeader={({ section: { title } }) => (
+          <Text style={styles.header}>{title}</Text>
+        )}
+      />
+    </SafeAreaView>
+  )
+
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 500,
+    paddingTop: StatusBar.currentHeight,
+    marginHorizontal: 16,
+    backgroundColor: 'red'
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+  },
+  header: {
+    fontSize: 32,
+    backgroundColor: '#fff',
+  },
+  title: {
+    fontSize: 24,
+  },
+});
+
+export default App;
\ No newline at end of file

From b9ce38207d93cf3b86dd079e0d422875a5d45ea6 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 24 Mar 2025 20:57:34 +0800
Subject: [PATCH 062/126] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81generic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../platform/patch/getDefaultOptions.ios.js   | 20 ++----
 .../webpack-plugin/lib/react/processScript.js | 16 ++++-
 .../webpack-plugin/lib/react/script-helper.js | 38 +++++++++++-
 .../lib/template-compiler/compiler.js         | 61 ++++++++-----------
 4 files changed, 81 insertions(+), 54 deletions(-)

diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js
index f5807d108f..4fd3f32aa4 100644
--- a/packages/core/src/platform/patch/getDefaultOptions.ios.js
+++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js
@@ -46,20 +46,12 @@ function createEffect (proxy, components) {
     if (!tagName) return null
     if (tagName === 'block') return Fragment
     const appComponents = global.__getAppComponents?.() || {}
-    // 从父组件传递的 genericComponents 中获取 moduleId
-    if (proxy.target.__props.genericComponents && proxy.target.__props.generic) {
-      const genericKeys = Object.keys(proxy.target.__props.generic)
-      for (const genericKey of genericKeys) {
-        const actualComponentName = proxy.target.__props.generic[genericKey]
-        if (tagName === actualComponentName) {
-          // 通过 moduleId 从全局获取组件定义
-          const moduleId =
-            proxy.target.__props.genericComponents[actualComponentName]
-          if (moduleId) {
-            return global.__mpxOptionsMap[moduleId]
-          }
-        }
-      }
+    const generichash = proxy.target.__props.generichash
+    const genericComponents = global.__mpxGenericsMap[generichash]
+    if (generichash && genericComponents) {
+      Object.keys(genericComponents).forEach((name) => {
+        return genericComponents[name]
+      })
     }
     return components[tagName] || appComponents[tagName] || getByPath(ReactNative, tagName)
   }
diff --git a/packages/webpack-plugin/lib/react/processScript.js b/packages/webpack-plugin/lib/react/processScript.js
index 6a5dfca487..72306b76f8 100644
--- a/packages/webpack-plugin/lib/react/processScript.js
+++ b/packages/webpack-plugin/lib/react/processScript.js
@@ -1,6 +1,6 @@
 const normalize = require('../utils/normalize')
 const optionProcessorPath = normalize.lib('runtime/optionProcessorReact')
-const { buildPagesMap, buildComponentsMap, getRequireScript, buildGlobalParams, stringifyRequest } = require('./script-helper')
+const { buildPagesMap, buildComponentsMap, getRequireScript, buildGlobalParams, stringifyRequest, buildGenericsComponent } = require('./script-helper')
 
 module.exports = function (script, {
   loaderContext,
@@ -12,7 +12,9 @@ module.exports = function (script, {
   outputPath,
   builtInComponentsMap,
   localComponentsMap,
-  localPagesMap
+  localPagesMap,
+  componentGenerics,
+  genericsInfo
 }, callback) {
   let scriptSrcMode = srcMode
   const mode = loaderContext.getMpx().mode
@@ -70,7 +72,15 @@ global.__navigationHelper = {
 
     output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath })
     output += getRequireScript({ ctorType, script, loaderContext })
-    output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
+
+    output += buildGenericsComponent({
+      genericsInfo,
+      componentGenerics,
+      componentsMap,
+      moduleId
+    })
+
+   output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }
 
   callback(null, {
diff --git a/packages/webpack-plugin/lib/react/script-helper.js b/packages/webpack-plugin/lib/react/script-helper.js
index 943aa0889b..026397f670 100644
--- a/packages/webpack-plugin/lib/react/script-helper.js
+++ b/packages/webpack-plugin/lib/react/script-helper.js
@@ -3,6 +3,7 @@ const createHelpers = require('../helpers')
 const parseRequest = require('../utils/parse-request')
 const shallowStringify = require('../utils/shallow-stringify')
 const normalize = require('../utils/normalize')
+const isEmptyObject = require('../utils/is-empty-object')
 
 function stringifyRequest (loaderContext, request) {
   return loaderUtils.stringifyRequest(loaderContext, request)
@@ -137,11 +138,46 @@ function buildI18n ({ loaderContext }) {
   return `require(${stringifyRequest(loaderContext, i18nWxsRequest)})\n`
 }
 
+function buildGenericsComponent ({ genericsInfo, componentGenerics, componentsMap, moduleId }) {
+  let content = ''
+ if (genericsInfo) {
+    content += `
+    const genericHash = ${JSON.stringify(genericsInfo.hash)}
+    global.__mpxGenericsMap[genericHash] = {}
+    const componentsMapObj = {
+      ${Object.entries(componentsMap).map(([key, value]) => `"${key}": ${value}`).join(',\n      ')}
+    }
+    Object.keys(${JSON.stringify(genericsInfo.map)}).forEach((genericValue) => {
+      if (componentsMapObj[genericValue]) {
+        global.__mpxGenericsMap[genericHash][genericValue] = componentsMapObj[genericValue]\n
+      } else {
+        console.warn('[Mpx runtime warn]: generic value "' + genericValue + '" must be registered in parent context!')\n
+      }
+    })\n`
+  }
+
+  if (!isEmptyObject(componentGenerics)) {
+    const defaultProps = {}
+    Object.keys(componentGenerics).forEach(genericName => {
+      defaultProps[`generic${genericName}`] = componentGenerics[genericName].default
+        ? `${genericName}default`
+        : ''
+    })
+    // 输出简化后的内容
+    content += `
+      const option = global.__mpxOptionsMap[${JSON.stringify(moduleId)}] = {}\n
+      option.defaultProps = ${JSON.stringify(defaultProps)}\n`
+  }
+
+  return content
+}
+
 module.exports = {
   buildPagesMap,
   buildComponentsMap,
   getRequireScript,
   buildGlobalParams,
   stringifyRequest,
-  buildI18n
+  buildI18n,
+  buildGenericsComponent
 }
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index dc1dbc7f99..9aca37aa14 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2475,49 +2475,38 @@ function getVirtualHostRoot (options, meta) {
   return getTempNode()
 }
 
-function processComponentGenericsReact (el, options) {
-  const { componentGenerics, usingComponentsInfo } = options
+function processComponentGenericsReact (el, options, meta) {
+  const { componentGenerics } = options
   if (componentGenerics && componentGenerics[el.tag]) {
-      const genericKey = el.tag
-      el.is = `this.__props.generic && this.__props.generic['${genericKey}'] && getComponent(this.__props.generic['${genericKey}']) ? this.__props.generic['${genericKey}'] : '${genericKey}default'`
-      el.components = [
-        `this.__props.generic['${genericKey}']`,
-        `${genericKey}default`
-      ]
+      const generic = dash2hump(el.tag)
+      el.tag = 'component'
+      addAttrs(el, [{
+        name: ':is',
+        value: `generic${generic}`
+      }])
   }
 
-  const genericConfig = {}
-  const genericComponentsConfig = {}
+  let hasGeneric = false
 
-  el.attrsList.forEach(attr => {
-    const match = attr.name.match(genericRE)
-    if (match) {
-      const key = match[1]
-      const componentName = attr.value
-      genericConfig[key] = componentName
+  const genericHash = moduleId
 
-      if (usingComponentsInfo[componentName]) {
-        const { mid } = usingComponentsInfo[componentName]
-        genericComponentsConfig[componentName] = mid
-      }
+  el.attrsList.forEach((attr) => {
+    if (genericRE.test(attr.name)) {
+      getAndRemoveAttr(el, attr.name)
+      addAttrs(el, [{
+        name: attr.name.replace(':', ''),
+        value: attr.value
+      }])
+      hasGeneric = true
+      addGenericInfo(meta, genericHash, attr.value)
     }
   })
 
-  if (Object.keys(genericConfig).length) {
-    const attrsToAdd = [
-      {
-        name: 'generic',
-        value: genericConfig
-      }
-    ]
-
-    if (Object.keys(genericComponentsConfig).length) {
-      attrsToAdd.push({
-        name: 'genericComponents',
-        value: genericComponentsConfig
-      })
-    }
-    el.attrsList = el.attrsList.concat(attrsToAdd)
+  if (hasGeneric) {
+    addAttrs(el, [{
+      name: 'generichash',
+      value: genericHash
+    }])
   }
 }
 
@@ -2771,7 +2760,7 @@ function processElement (el, root, options, meta) {
       processSlotReact(el, meta)
     }
     processAttrs(el, options)
-    processComponentGenericsReact(el, options)
+    processComponentGenericsReact(el, options, meta)
     return
   }
 

From b408c80f96baad998327e436eb0dc59477c75c60 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 25 Mar 2025 13:26:40 +0800
Subject: [PATCH 063/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9generic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/platform/patch/getDefaultOptions.ios.js | 3 ++-
 packages/webpack-plugin/lib/react/script-helper.js        | 5 +++--
 packages/webpack-plugin/lib/template-compiler/compiler.js | 4 ++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js
index 4fd3f32aa4..851acff7c2 100644
--- a/packages/core/src/platform/patch/getDefaultOptions.ios.js
+++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js
@@ -45,6 +45,7 @@ function createEffect (proxy, components) {
   const getComponent = (tagName) => {
     if (!tagName) return null
     if (tagName === 'block') return Fragment
+    if (components[tagName]) return components[tagName]
     const appComponents = global.__getAppComponents?.() || {}
     const generichash = proxy.target.__props.generichash
     const genericComponents = global.__mpxGenericsMap[generichash]
@@ -53,7 +54,7 @@ function createEffect (proxy, components) {
         return genericComponents[name]
       })
     }
-    return components[tagName] || appComponents[tagName] || getByPath(ReactNative, tagName)
+    return appComponents[tagName] || getByPath(ReactNative, tagName)
   }
   const innerCreateElement = (type, ...rest) => {
     if (!type) return null
diff --git a/packages/webpack-plugin/lib/react/script-helper.js b/packages/webpack-plugin/lib/react/script-helper.js
index 026397f670..9ad98147a3 100644
--- a/packages/webpack-plugin/lib/react/script-helper.js
+++ b/packages/webpack-plugin/lib/react/script-helper.js
@@ -165,8 +165,9 @@ function buildGenericsComponent ({ genericsInfo, componentGenerics, componentsMa
     })
     // 输出简化后的内容
     content += `
-      const option = global.__mpxOptionsMap[${JSON.stringify(moduleId)}] = {}\n
-      option.defaultProps = ${JSON.stringify(defaultProps)}\n`
+      const option = global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n
+      option.defaultProps = ${JSON.stringify(defaultProps)}\n
+      `
   }
 
   return content
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index 9aca37aa14..cb5fe36cc9 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2478,7 +2478,7 @@ function getVirtualHostRoot (options, meta) {
 function processComponentGenericsReact (el, options, meta) {
   const { componentGenerics } = options
   if (componentGenerics && componentGenerics[el.tag]) {
-      const generic = dash2hump(el.tag)
+      const generic = el.tag
       el.tag = 'component'
       addAttrs(el, [{
         name: ':is',
@@ -2753,6 +2753,7 @@ function processElement (el, root, options, meta) {
     processIf(el)
     processFor(el)
     processRefReact(el, meta)
+    processComponentGenericsReact(el, options, meta)
     if (!pass) {
       processStyleReact(el, options)
       processEventReact(el, options)
@@ -2760,7 +2761,6 @@ function processElement (el, root, options, meta) {
       processSlotReact(el, meta)
     }
     processAttrs(el, options)
-    processComponentGenericsReact(el, options, meta)
     return
   }
 

From 0bd9f71f62528f0e127b97d7e7156b4a9fbac113 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 25 Mar 2025 14:04:02 +0800
Subject: [PATCH 064/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9generic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/template-compiler/compiler.js           | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index cb5fe36cc9..383b7e2931 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2490,18 +2490,25 @@ function processComponentGenericsReact (el, options, meta) {
 
   const genericHash = moduleId
 
+  const genericAttrs = []
+
   el.attrsList.forEach((attr) => {
     if (genericRE.test(attr.name)) {
-      getAndRemoveAttr(el, attr.name)
-      addAttrs(el, [{
-        name: attr.name.replace(':', ''),
-        value: attr.value
-      }])
+      genericAttrs.push(attr)
       hasGeneric = true
       addGenericInfo(meta, genericHash, attr.value)
     }
   })
 
+  // 统一处理所有的generic:属性
+  genericAttrs.forEach((attr) => {
+    getAndRemoveAttr(el, attr.name)
+    addAttrs(el, [{
+      name: attr.name.replace(':', ''),
+      value: attr.value
+    }])
+  })
+
   if (hasGeneric) {
     addAttrs(el, [{
       name: 'generichash',

From d024f47cc1c85f36e83152688bf6fef954c08be8 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 25 Mar 2025 16:20:45 +0800
Subject: [PATCH 065/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9generic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/core/transferOptions.js     |  4 +++
 .../webpack-plugin/lib/react/processScript.js |  3 ++-
 .../webpack-plugin/lib/react/script-helper.js | 26 +++++++++++++------
 .../lib/template-compiler/compiler.js         | 11 +++-----
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/core/src/core/transferOptions.js b/packages/core/src/core/transferOptions.js
index 6b222d4749..04f722b916 100644
--- a/packages/core/src/core/transferOptions.js
+++ b/packages/core/src/core/transferOptions.js
@@ -18,6 +18,10 @@ export default function transferOptions (options, type, needConvert = true) {
   if (!options.__nativeRender__) {
     options = mergeInjectedMixins(options, type)
   }
+  if (currentInject && currentInject.injectProperties) {
+    // 编译计算属性注入
+    options.properties = Object.assign({}, currentInject.injectProperties, options.properties)
+  }
   if (currentInject && currentInject.injectComputed) {
     // 编译计算属性注入
     options.computed = Object.assign({}, currentInject.injectComputed, options.computed)
diff --git a/packages/webpack-plugin/lib/react/processScript.js b/packages/webpack-plugin/lib/react/processScript.js
index 72306b76f8..6a72d8a529 100644
--- a/packages/webpack-plugin/lib/react/processScript.js
+++ b/packages/webpack-plugin/lib/react/processScript.js
@@ -71,6 +71,7 @@ global.__navigationHelper = {
     })
 
     output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath })
+
     output += getRequireScript({ ctorType, script, loaderContext })
 
     output += buildGenericsComponent({
@@ -80,7 +81,7 @@ global.__navigationHelper = {
       moduleId
     })
 
-   output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
+    output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }
 
   callback(null, {
diff --git a/packages/webpack-plugin/lib/react/script-helper.js b/packages/webpack-plugin/lib/react/script-helper.js
index 9ad98147a3..716d60f943 100644
--- a/packages/webpack-plugin/lib/react/script-helper.js
+++ b/packages/webpack-plugin/lib/react/script-helper.js
@@ -4,7 +4,7 @@ const parseRequest = require('../utils/parse-request')
 const shallowStringify = require('../utils/shallow-stringify')
 const normalize = require('../utils/normalize')
 const isEmptyObject = require('../utils/is-empty-object')
-
+const dash2hump = require('../utils/hump-dash').dash2hump
 function stringifyRequest (loaderContext, request) {
   return loaderUtils.stringifyRequest(loaderContext, request)
 }
@@ -157,17 +157,27 @@ function buildGenericsComponent ({ genericsInfo, componentGenerics, componentsMa
   }
 
   if (!isEmptyObject(componentGenerics)) {
-    const defaultProps = {}
+    const defaultProps = {
+      generichash: {
+        type: String,
+        value: ''
+      }
+    }
     Object.keys(componentGenerics).forEach(genericName => {
-      defaultProps[`generic${genericName}`] = componentGenerics[genericName].default
-        ? `${genericName}default`
-        : ''
+      defaultProps[`generic${dash2hump(genericName)}`] = componentGenerics[genericName].default
+        ? {
+          type: String,
+          value: `${genericName}default`
+        }
+        : {
+          type: String,
+          value: ''
+        }
     })
     // 输出简化后的内容
     content += `
-      const option = global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n
-      option.defaultProps = ${JSON.stringify(defaultProps)}\n
-      `
+      global.currentInject.injectProperties = ${JSON.stringify(defaultProps)}\n
+      `;
   }
 
   return content
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index 383b7e2931..7b004be1fe 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2478,12 +2478,9 @@ function getVirtualHostRoot (options, meta) {
 function processComponentGenericsReact (el, options, meta) {
   const { componentGenerics } = options
   if (componentGenerics && componentGenerics[el.tag]) {
-      const generic = el.tag
+      const generic = dash2hump(el.tag)
       el.tag = 'component'
-      addAttrs(el, [{
-        name: ':is',
-        value: `generic${generic}`
-      }])
+      el.is = `generic${generic}`
   }
 
   let hasGeneric = false
@@ -2492,7 +2489,7 @@ function processComponentGenericsReact (el, options, meta) {
 
   const genericAttrs = []
 
-  el.attrsList.forEach((attr) => {
+ el.attrsList.forEach((attr) => {
     if (genericRE.test(attr.name)) {
       genericAttrs.push(attr)
       hasGeneric = true
@@ -2504,7 +2501,7 @@ function processComponentGenericsReact (el, options, meta) {
   genericAttrs.forEach((attr) => {
     getAndRemoveAttr(el, attr.name)
     addAttrs(el, [{
-      name: attr.name.replace(':', ''),
+      name: dash2hump(attr.name.replace(':', '')),
       value: attr.value
     }])
   })

From 7b87ad65d76dcadbfc3168d5d5befe9cf4076ae9 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 25 Mar 2025 20:25:38 +0800
Subject: [PATCH 066/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9injectProper?=
 =?UTF-8?q?ties=E6=B3=A8=E5=85=A5=E6=97=B6=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../platform/patch/getDefaultOptions.ios.js   |  9 ++---
 .../webpack-plugin/lib/react/processScript.js | 13 +++----
 .../webpack-plugin/lib/react/script-helper.js | 35 ++++++++-----------
 3 files changed, 20 insertions(+), 37 deletions(-)

diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js
index 851acff7c2..09ecb273a0 100644
--- a/packages/core/src/platform/patch/getDefaultOptions.ios.js
+++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js
@@ -48,13 +48,8 @@ function createEffect (proxy, components) {
     if (components[tagName]) return components[tagName]
     const appComponents = global.__getAppComponents?.() || {}
     const generichash = proxy.target.__props.generichash
-    const genericComponents = global.__mpxGenericsMap[generichash]
-    if (generichash && genericComponents) {
-      Object.keys(genericComponents).forEach((name) => {
-        return genericComponents[name]
-      })
-    }
-    return appComponents[tagName] || getByPath(ReactNative, tagName)
+    const genericComponents = global.__mpxGenericsMap[generichash] || noop
+    return components[tagName] || genericComponents(tagName) || appComponents[tagName] || getByPath(ReactNative, tagName)
   }
   const innerCreateElement = (type, ...rest) => {
     if (!type) return null
diff --git a/packages/webpack-plugin/lib/react/processScript.js b/packages/webpack-plugin/lib/react/processScript.js
index 6a72d8a529..f004c9f6a0 100644
--- a/packages/webpack-plugin/lib/react/processScript.js
+++ b/packages/webpack-plugin/lib/react/processScript.js
@@ -1,6 +1,6 @@
 const normalize = require('../utils/normalize')
 const optionProcessorPath = normalize.lib('runtime/optionProcessorReact')
-const { buildPagesMap, buildComponentsMap, getRequireScript, buildGlobalParams, stringifyRequest, buildGenericsComponent } = require('./script-helper')
+const { buildPagesMap, buildComponentsMap, getRequireScript, buildGlobalParams, stringifyRequest, buildGenericsProperties } = require('./script-helper')
 
 module.exports = function (script, {
   loaderContext,
@@ -70,16 +70,11 @@ global.__navigationHelper = {
       jsonConfig
     })
 
-    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath })
+    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath, genericsInfo })
 
-    output += getRequireScript({ ctorType, script, loaderContext })
+    output += buildGenericsProperties({ componentGenerics })
 
-    output += buildGenericsComponent({
-      genericsInfo,
-      componentGenerics,
-      componentsMap,
-      moduleId
-    })
+    output += getRequireScript({ ctorType, script, loaderContext })
 
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }
diff --git a/packages/webpack-plugin/lib/react/script-helper.js b/packages/webpack-plugin/lib/react/script-helper.js
index 716d60f943..20acb57f04 100644
--- a/packages/webpack-plugin/lib/react/script-helper.js
+++ b/packages/webpack-plugin/lib/react/script-helper.js
@@ -90,7 +90,8 @@ function buildGlobalParams ({
   componentsMap,
   pagesMap,
   firstPage,
-  outputPath
+  outputPath,
+  genericsInfo
 }) {
   let content = ''
   if (ctorType === 'app') {
@@ -119,6 +120,15 @@ global.currentInject.firstPage = ${JSON.stringify(firstPage)}\n`
     content += `global.currentInject.getComponents = function () {
   return ${shallowStringify(componentsMap)}
 }\n`
+
+    if (genericsInfo) {
+      content += `
+        const genericHash = ${JSON.stringify(genericsInfo.hash)}\n
+        global.__mpxGenericsMap[genericHash] = function (name) {
+          return ${shallowStringify(componentsMap)}[name]
+        }
+      \n`
+    }
     if (ctorType === 'component') {
       content += `global.currentInject.componentPath = '/' + ${JSON.stringify(outputPath)}\n`
     }
@@ -138,24 +148,8 @@ function buildI18n ({ loaderContext }) {
   return `require(${stringifyRequest(loaderContext, i18nWxsRequest)})\n`
 }
 
-function buildGenericsComponent ({ genericsInfo, componentGenerics, componentsMap, moduleId }) {
+function buildGenericsProperties ({ componentGenerics }) {
   let content = ''
- if (genericsInfo) {
-    content += `
-    const genericHash = ${JSON.stringify(genericsInfo.hash)}
-    global.__mpxGenericsMap[genericHash] = {}
-    const componentsMapObj = {
-      ${Object.entries(componentsMap).map(([key, value]) => `"${key}": ${value}`).join(',\n      ')}
-    }
-    Object.keys(${JSON.stringify(genericsInfo.map)}).forEach((genericValue) => {
-      if (componentsMapObj[genericValue]) {
-        global.__mpxGenericsMap[genericHash][genericValue] = componentsMapObj[genericValue]\n
-      } else {
-        console.warn('[Mpx runtime warn]: generic value "' + genericValue + '" must be registered in parent context!')\n
-      }
-    })\n`
-  }
-
   if (!isEmptyObject(componentGenerics)) {
     const defaultProps = {
       generichash: {
@@ -174,10 +168,9 @@ function buildGenericsComponent ({ genericsInfo, componentGenerics, componentsMa
           value: ''
         }
     })
-    // 输出简化后的内容
     content += `
       global.currentInject.injectProperties = ${JSON.stringify(defaultProps)}\n
-      `;
+      `
   }
 
   return content
@@ -190,5 +183,5 @@ module.exports = {
   buildGlobalParams,
   stringifyRequest,
   buildI18n,
-  buildGenericsComponent
+  buildGenericsProperties
 }

From bf6d32fc5c1b9af97a70ef4d933dffd4bf4f9285 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 25 Mar 2025 23:54:54 +0800
Subject: [PATCH 067/126] =?UTF-8?q?fix:=20boundingClientRect=20=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/extend/mpx-recycle-view.mpx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
index edfbb2c3f3..002c345905 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
@@ -189,11 +189,10 @@
     },
     ready() {
       this.initPositions()
-      const query = mpx.createSelectorQuery().in(this)
-      query
-        .select('.mpx-recycle-view')
-        .boundingClientRect((rect) => {
-          this.containerHeight = rect.height
+      this.$refs.mpxRecycleView
+        .fields({ size: true})
+        .exec((res) => {
+          this.containerHeight = res.height
           this.isReady = true
           this.placeholderStyle = `height: ${this.totalHeight}px`
           if (!this.positions || !this.positions.length) {
@@ -203,7 +202,6 @@
           this.end = this.start + this.visibleCount
           this.setStartOffset()
         })
-        .exec()
     },
     methods: {
       initPositions() {

From acdefe2a3fa836b22e85884f631cdc5ca9432dbd Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 26 Mar 2025 00:08:24 +0800
Subject: [PATCH 068/126] chore: del

---
 packages/core/src/platform/patch/getDefaultOptions.ios.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js
index 09ecb273a0..930e534fd1 100644
--- a/packages/core/src/platform/patch/getDefaultOptions.ios.js
+++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js
@@ -45,7 +45,6 @@ function createEffect (proxy, components) {
   const getComponent = (tagName) => {
     if (!tagName) return null
     if (tagName === 'block') return Fragment
-    if (components[tagName]) return components[tagName]
     const appComponents = global.__getAppComponents?.() || {}
     const generichash = proxy.target.__props.generichash
     const genericComponents = global.__mpxGenericsMap[generichash] || noop

From a3f6a7019c89c332c45e2b5f6725a2266b56dfec Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 26 Mar 2025 15:20:04 +0800
Subject: [PATCH 069/126] fix conflict

---
 packages/webpack-plugin/lib/react/script-helper.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/webpack-plugin/lib/react/script-helper.js b/packages/webpack-plugin/lib/react/script-helper.js
index 0906943d6d..07d6e92248 100644
--- a/packages/webpack-plugin/lib/react/script-helper.js
+++ b/packages/webpack-plugin/lib/react/script-helper.js
@@ -5,10 +5,6 @@ const shallowStringify = require('../utils/shallow-stringify')
 const normalize = require('../utils/normalize')
 const isEmptyObject = require('../utils/is-empty-object')
 const dash2hump = require('../utils/hump-dash').dash2hump
-<<<<<<< HEAD
-=======
-
->>>>>>> feat-generic-rn-new
 function stringifyRequest (loaderContext, request) {
   return loaderUtils.stringifyRequest(loaderContext, request)
 }

From 6ec3a9ca4470b1d7ab09811d434ef4c9791a7200 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 26 Mar 2025 17:03:43 +0800
Subject: [PATCH 070/126] =?UTF-8?q?chore:=20=E5=A2=9E=E5=BC=BArecycle-view?=
 =?UTF-8?q?.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.jsx    | 75 ++++++++++---------
 1 file changed, 40 insertions(+), 35 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
index 531e1f01f8..4fde79654a 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
@@ -1,52 +1,57 @@
 import React, { forwardRef } from 'react';
 import {
   StyleSheet,
-  Text,
-  View,
   SafeAreaView,
   SectionList,
   StatusBar,
 } from 'react-native';
 
-  const Item = global.__mpxOptionsMap._e0b4ebfc
+const getGenericComponent = ({props, ref, generichash, generickey}) => {
+  const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
+  return <GenericComponent ref={ref} {...props}/>
+}
+const Item = forwardRef((props, ref) => {
+   const { generichash, genericrecycleItem } = props
+   return getGenericComponent({props, ref, generichash, generickey: genericrecycleItem})
+  })
+
+const SectionHeader = forwardRef((props, ref) => {
+  const { generichash, genericsectionHeader } = props
+  return getGenericComponent({props, ref, generichash, generickey: genericsectionHeader})
+  })
+
+const SectionFooter = forwardRef((props, ref) => {
+  const { generichash, genericsectionFooter } = props
+  return getGenericComponent({props, ref, generichash, generickey: genericsectionFooter})
+})
+
+const ListHeader = forwardRef((props, ref) => {
+  const { generichash, genericlistHeader } = props
+   return getGenericComponent({props, ref, generichash, generickey: genericlistHeader})
+  })
 
-const App = (props = {}, ref) => {
-  const { listData } = props
+const ListFooter= forwardRef((props, ref) => {
+  const { generichash, genericlistFooter } = props
+  return getGenericComponent({props, ref, generichash, generickey: genericlistFooter})
+  })
+
+
+const RecycleView = forwardRef((props = {}, ref) => {
+  const { style, height, width, listData, generichash, genericrecycleItem, genericsectionHeader, genericsectionFooter, genericlistHeader, genericlistFooter, 'enable-sticky': enableSticky = false} = props
   return (
-    <SafeAreaView style={styles.container}>
       <SectionList
+        style={[{ height, width }, style]}
         sections={listData}
-        stickySectionHeadersEnabled={true}
+        stickySectionHeadersEnabled={enableSticky}
         keyExtractor={(item, index) => item + index}
-        renderItem={({item}) => <Item currentItem={item} />}
-        renderSectionHeader={({ section: { title } }) => (
-          <Text style={styles.header}>{title}</Text>
-        )}
+        renderItem={({item}) => <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>}
+        renderSectionHeader={(data) => <SectionHeader data={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/>}
+        renderSectionFooter={(data) => <SectionFooter data={data.section} generichash={generichash} genericsectionFooter={genericsectionFooter}/>}
+        ListHeaderComponent={<ListHeader {...props} generichash={generichash} genericlistHeader={genericlistHeader}/>}
+        ListFooterComponent={<ListFooter {...props} generichash={generichash} genericlistFooter={genericlistFooter}/>}
       />
-    </SafeAreaView>
   )
 
-}
+})
 
-const styles = StyleSheet.create({
-  container: {
-    height: 500,
-    paddingTop: StatusBar.currentHeight,
-    marginHorizontal: 16,
-    backgroundColor: 'red'
-  },
-  item: {
-    backgroundColor: '#f9c2ff',
-    padding: 20,
-    marginVertical: 8,
-  },
-  header: {
-    fontSize: 32,
-    backgroundColor: '#fff',
-  },
-  title: {
-    fontSize: 24,
-  },
-});
-
-export default App;
\ No newline at end of file
+export default RecycleView
\ No newline at end of file

From 5b517637e12f02bf8dd0a352acd751984923b887 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Sun, 30 Mar 2025 21:12:30 +0800
Subject: [PATCH 071/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9recycle?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../extend/mpx-list-footer-default.mpx        |  21 +++
 .../extend/mpx-list-header-default.mpx        |  21 +++
 .../components/extend/mpx-recycle-view.jsx    | 114 +++++++++++++--
 .../components/extend/mpx-recycle-view.wx.mpx | 137 ++++++++++++++++++
 .../extend/mpx-section-footer-default.mpx     |  21 +++
 .../extend/mpx-section-header-default.,px     |  21 +++
 6 files changed, 325 insertions(+), 10 deletions(-)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/extend/mpx-list-footer-default.mpx
 create mode 100644 packages/webpack-plugin/lib/runtime/components/extend/mpx-list-header-default.mpx
 create mode 100644 packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.wx.mpx
 create mode 100644 packages/webpack-plugin/lib/runtime/components/extend/mpx-section-footer-default.mpx
 create mode 100644 packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.,px

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-list-footer-default.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-list-footer-default.mpx
new file mode 100644
index 0000000000..5cf26e0eb4
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-list-footer-default.mpx
@@ -0,0 +1,21 @@
+<template>
+  <view class="list-item">
+    <view class="item-content">recycle-item-default</view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+.list-item
+  margin 4px 16px
+  padding 16px
+  background #fff
+  border-radius 8px
+  box-shadow 0 2px 4px rgba(0,0,0,0.1)
+
+.item-content
+  display flex
+  flex-direction column
+  font-size 14px
+  color #666
+
+</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-list-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-list-header-default.mpx
new file mode 100644
index 0000000000..5cf26e0eb4
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-list-header-default.mpx
@@ -0,0 +1,21 @@
+<template>
+  <view class="list-item">
+    <view class="item-content">recycle-item-default</view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+.list-item
+  margin 4px 16px
+  padding 16px
+  background #fff
+  border-radius 8px
+  box-shadow 0 2px 4px rgba(0,0,0,0.1)
+
+.item-content
+  display flex
+  flex-direction column
+  font-size 14px
+  color #666
+
+</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
index 4fde79654a..4793929b72 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
@@ -1,15 +1,14 @@
 import React, { forwardRef } from 'react';
-import {
-  StyleSheet,
-  SafeAreaView,
-  SectionList,
-  StatusBar,
-} from 'react-native';
+import { SectionList, FlatList } from 'react-native';
+import useInnerProps from '../react/getInnerListeners';
+import useNodesRef from '../react/useNodesRef'
+import { extendObject, getCustomEvent } from '../react/utils'
 
 const getGenericComponent = ({props, ref, generichash, generickey}) => {
   const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
   return <GenericComponent ref={ref} {...props}/>
 }
+
 const Item = forwardRef((props, ref) => {
    const { generichash, genericrecycleItem } = props
    return getGenericComponent({props, ref, generichash, generickey: genericrecycleItem})
@@ -37,12 +36,98 @@ const ListFooter= forwardRef((props, ref) => {
 
 
 const RecycleView = forwardRef((props = {}, ref) => {
-  const { style, height, width, listData, generichash, genericrecycleItem, genericsectionHeader, genericsectionFooter, genericlistHeader, genericlistFooter, 'enable-sticky': enableSticky = false} = props
+  const {
+    enhanced = false,
+    bounces = true,
+    scrollEventThrottle = 0,
+    height,
+    width,
+    listData,
+    type,
+    generichash,
+    genericrecycleItem,
+    genericsectionHeader,
+    genericsectionFooter,
+    genericlistHeader,
+    genericlistFooter,
+    'enable-sticky': enableSticky = false,
+    'enable-back-to-top': enableBackToTop = false,
+    'lower-threshold': lowerThreshold = 50,
+    'refresher-enabled': refresherEnabled,
+    'show-scrollbar': showScrollbar = true,
+    'refresher-triggered': refresherTriggered
+  } = props
+
+  const scrollViewRef = useRef(null)
+  const {
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props: extendObject({}, props, { 'enable-offset': true }), hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef })
+  
+  useNodesRef(props, ref, scrollViewRef, { style })
+
+  function onRefresh() {
+    const { bindrefresherrefresh } = props
+    bindrefresherrefresh &&
+      bindrefresherrefresh(
+        getCustomEvent('refresherrefresh', {}, { layoutRef }, props)
+    )
+  }
+
+  function onEndReached() {
+    const { bindscrolltolower } = props
+    bindscrolltolower &&
+      bindscrolltolower(
+        getCustomEvent('scrolltolower', {}, { layoutRef }, props)
+      )
+  }
+
+  const scrollAdditionalProps = extendObject(
+    {
+      alwaysBounceVertical: false,
+      alwaysBounceHorizontal: false,
+      scrollEventThrottle: scrollEventThrottle,
+      scrollsToTop: enableBackToTop,
+      showsHorizontalScrollIndicator: showScrollbar,
+      onEndReachedThreshold: lowerThreshold,
+      ref: scrollViewRef,
+      stickySectionHeadersEnabled: enableSticky,
+      onScroll: onScroll,
+      onEndReached: onEndReached
+    },
+    layoutProps
+  )
+
+  if (enhanced) {
+    Object.assign(scrollAdditionalProps, {
+      bounces
+    })
+  }
+  if (refresherEnabled) {
+    Object.assign(scrollAdditionalProps, {
+      onRefresh: onRefresh,
+      refreshing: refresherTriggered
+    })
+  }
+
+  const innerProps = useInnerProps(props, scrollAdditionalProps, [
+    'id',
+    'show-scrollbar',
+    'lower-threshold',
+    'refresher-triggered',
+    'refresher-enabled',
+    'bindrefresherrefresh'
+  ], { layoutRef })
+
   return (
+    type === 'section' ?
       <SectionList
-        style={[{ height, width }, style]}
+        {...innerProps}
+        style={[{ height, width }, style, layoutStyle]}
         sections={listData}
-        stickySectionHeadersEnabled={enableSticky}
         keyExtractor={(item, index) => item + index}
         renderItem={({item}) => <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>}
         renderSectionHeader={(data) => <SectionHeader data={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/>}
@@ -50,8 +135,17 @@ const RecycleView = forwardRef((props = {}, ref) => {
         ListHeaderComponent={<ListHeader {...props} generichash={generichash} genericlistHeader={genericlistHeader}/>}
         ListFooterComponent={<ListFooter {...props} generichash={generichash} genericlistFooter={genericlistFooter}/>}
       />
+    :
+      <FlatList
+        {...innerProps}
+        style={[{ height, width }, style, layoutStyle]}
+        data={listData}
+        keyExtractor={(item, index) => item + index}
+        renderItem={({item}) => <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>}
+        ListHeaderComponent={<ListHeader {...props} generichash={generichash} genericlistHeader={genericlistHeader}/>}
+        ListFooterComponent={<ListFooter {...props} generichash={generichash} genericlistFooter={genericlistFooter}/>}
+      />
   )
-
 })
 
 export default RecycleView
\ No newline at end of file
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.wx.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.wx.mpx
new file mode 100644
index 0000000000..43d4922ce2
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.wx.mpx
@@ -0,0 +1,137 @@
+<template>
+  <scroll-view
+    class="mpx-recycle-view"
+    scroll-y
+    wx:style="{ height: height + 'px', width: width ? width + 'px' : '100%' }"
+    type="{{type}}"
+    enhanced="{{enhanced}}"
+    scroll-with-animation="{{scrollWithAnimation}}"
+    bounces="{{bounces}}"
+    show-scrollbar="{{showScrollbar}}"
+    refresher-enabled="{{refresherEnabled}}"
+    refresher-triggered="{{refresherTriggered}}"
+    bindscroll="onScroll"
+    bindrefresherrefresh="onRefresh"
+  >
+    <!-- list header -->
+    <template wx:if="{{genericlistHeader}}">
+      <list-header data="{{listData}}" />
+    </template>
+
+    <block wx:for="{{listData}}" wx:key="index">
+      <!-- section header -->
+      <template wx:if="{{genericsectionHeader}}">
+        <sticky-section>
+          <sticky-header>
+            <section-header data="{{item}}"></section-header>
+          </sticky-header>
+        </sticky-section>
+      </template>
+
+      <template
+        wx:if="{{genericrecycleItem}}"
+        wx:for="{{item.data}}"
+        wx:for-item="subItem"
+        wx:key="subIndex"
+      >
+        <!-- section items -->
+        <recycle-item currentItem="{{subItem}}"></recycle-item>
+      </template>
+
+        <!-- section footer -->
+      <template wx:if="{{genericsectionFooter}}">
+        <section-footer data="{{subItem}}"></section-footer>
+      </template>
+    </block>
+
+    <!-- list footer -->
+    <template wx:if="{{genericlistFooter}}">
+      <list-footer data="{{listData}}" />
+    </template>
+  </scroll-view>
+</template>
+
+<script>
+  import { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    properties: {
+      height: {
+        type: Number,
+        value: 0
+      },
+      width: {
+        type: Number,
+        value: 0
+      },
+      type: String,
+      listData: {
+        type: Array,
+        value: []
+      },
+      generichash: String,
+      genericrecycleItem: String,
+      genericsectionHeader: String,
+      genericsectionFooter: String,
+      genericlistHeader: String,
+      genericlistFooter: String,
+      scrollWithAnimation: Boolean,
+      enableSticky: {
+        type: Boolean,
+        value: false
+      },
+      showScrollbar: {
+        type: Boolean,
+        value: false
+      },
+      enhanced: {
+        type: Boolean,
+        value: false
+      },
+      bounces: {
+        type: Boolean,
+        value: false
+      },
+      refresherEnable: {
+        type: Boolean,
+        value: false
+      },
+      refresherEnabled: {
+        type: Boolean,
+        value: false
+      }
+    },
+
+    methods: {
+      onScroll(e) {
+        this.triggerEvent('scroll', e.detail)
+      },
+      onRefresh(e) {
+        this.triggerEvent('refresh', e.detail)
+      }
+    }
+  })
+</script>
+
+<script type="application/json">
+  {
+    "component": true,
+    "componentGenerics": {
+      "recycle-item": {
+        "default": "./mpx-recycle-item-default.mpx"
+      },
+      "list-header": {
+        "default": "./mpx-list-header-default.mpx"
+      },
+      "list-footer": {
+        "default": "./mpx-list-footer-default.mpx"
+      },
+      "section-header": {
+        "default": "./mpx-section-header-default.mpx"
+      },
+      "section-footer": {
+        "default": "./mpx-section-footer-default.mpx"
+      }
+    }
+  }
+</script>
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-footer-default.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-footer-default.mpx
new file mode 100644
index 0000000000..5cf26e0eb4
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-footer-default.mpx
@@ -0,0 +1,21 @@
+<template>
+  <view class="list-item">
+    <view class="item-content">recycle-item-default</view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+.list-item
+  margin 4px 16px
+  padding 16px
+  background #fff
+  border-radius 8px
+  box-shadow 0 2px 4px rgba(0,0,0,0.1)
+
+.item-content
+  display flex
+  flex-direction column
+  font-size 14px
+  color #666
+
+</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.,px b/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.,px
new file mode 100644
index 0000000000..5cf26e0eb4
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.,px
@@ -0,0 +1,21 @@
+<template>
+  <view class="list-item">
+    <view class="item-content">recycle-item-default</view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+.list-item
+  margin 4px 16px
+  padding 16px
+  background #fff
+  border-radius 8px
+  box-shadow 0 2px 4px rgba(0,0,0,0.1)
+
+.item-content
+  display flex
+  flex-direction column
+  font-size 14px
+  color #666
+
+</style>

From 28ed166695eb2c90cec9d5e5ab1a0bdf51f2f303 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 1 Apr 2025 11:44:01 +0800
Subject: [PATCH 072/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../extend/mpx-section-header-default.mpx     | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.mpx

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.mpx
new file mode 100644
index 0000000000..5cf26e0eb4
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.mpx
@@ -0,0 +1,21 @@
+<template>
+  <view class="list-item">
+    <view class="item-content">recycle-item-default</view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+.list-item
+  margin 4px 16px
+  padding 16px
+  background #fff
+  border-radius 8px
+  box-shadow 0 2px 4px rgba(0,0,0,0.1)
+
+.item-content
+  display flex
+  flex-direction column
+  font-size 14px
+  color #666
+
+</style>

From 4f409dce957cf377e5b2bbb985cfab171282971d Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 11 Apr 2025 11:02:10 +0800
Subject: [PATCH 073/126] fix: lint;

---
 .../components/extend/mpx-recycle-view.jsx    | 70 +++++++++++--------
 1 file changed, 41 insertions(+), 29 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
index 4793929b72..990771edea 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
@@ -1,39 +1,38 @@
-import React, { forwardRef } from 'react';
-import { SectionList, FlatList } from 'react-native';
-import useInnerProps from '../react/getInnerListeners';
+import React, { forwardRef, useRef } from 'react'
+import { SectionList, FlatList } from 'react-native'
+import useInnerProps from '../react/getInnerListeners'
 import useNodesRef from '../react/useNodesRef'
-import { extendObject, getCustomEvent } from '../react/utils'
+import { extendObject, getCustomEvent, useLayout, useTransformStyle } from '../react/utils'
 
-const getGenericComponent = ({props, ref, generichash, generickey}) => {
+const getGenericComponent = ({ props, ref, generichash, generickey }) => {
   const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
   return <GenericComponent ref={ref} {...props}/>
 }
 
 const Item = forwardRef((props, ref) => {
-   const { generichash, genericrecycleItem } = props
-   return getGenericComponent({props, ref, generichash, generickey: genericrecycleItem})
-  })
+  const { generichash, genericrecycleItem } = props
+  return getGenericComponent({ props, ref, generichash, generickey: genericrecycleItem })
+})
 
 const SectionHeader = forwardRef((props, ref) => {
   const { generichash, genericsectionHeader } = props
-  return getGenericComponent({props, ref, generichash, generickey: genericsectionHeader})
-  })
+  return getGenericComponent({ props, ref, generichash, generickey: genericsectionHeader })
+})
 
 const SectionFooter = forwardRef((props, ref) => {
   const { generichash, genericsectionFooter } = props
-  return getGenericComponent({props, ref, generichash, generickey: genericsectionFooter})
+  return getGenericComponent({ props, ref, generichash, generickey: genericsectionFooter })
 })
 
 const ListHeader = forwardRef((props, ref) => {
   const { generichash, genericlistHeader } = props
-   return getGenericComponent({props, ref, generichash, generickey: genericlistHeader})
-  })
+  return getGenericComponent({ props, ref, generichash, generickey: genericlistHeader })
+})
 
-const ListFooter= forwardRef((props, ref) => {
+const ListFooter = forwardRef((props, ref) => {
   const { generichash, genericlistFooter } = props
-  return getGenericComponent({props, ref, generichash, generickey: genericlistFooter})
-  })
-
+  return getGenericComponent({ props, ref, generichash, generickey: genericlistFooter })
+})
 
 const RecycleView = forwardRef((props = {}, ref) => {
   const {
@@ -50,6 +49,12 @@ const RecycleView = forwardRef((props = {}, ref) => {
     genericsectionFooter,
     genericlistHeader,
     genericlistFooter,
+    style = {},
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
     'enable-sticky': enableSticky = false,
     'enable-back-to-top': enableBackToTop = false,
     'lower-threshold': lowerThreshold = 50,
@@ -65,19 +70,19 @@ const RecycleView = forwardRef((props = {}, ref) => {
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props: extendObject({}, props, { 'enable-offset': true }), hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef })
-  
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef })
+
   useNodesRef(props, ref, scrollViewRef, { style })
 
-  function onRefresh() {
+  function onRefresh () {
     const { bindrefresherrefresh } = props
     bindrefresherrefresh &&
       bindrefresherrefresh(
         getCustomEvent('refresherrefresh', {}, { layoutRef }, props)
-    )
+      )
   }
 
-  function onEndReached() {
+  function onEndReached () {
     const { bindscrolltolower } = props
     bindscrolltolower &&
       bindscrolltolower(
@@ -85,6 +90,14 @@ const RecycleView = forwardRef((props = {}, ref) => {
       )
   }
 
+  function onScroll (event) {
+    const { bindscroll } = props
+    bindscroll &&
+      bindscroll(
+        getCustomEvent('scroll', event.nativeEvent, { layoutRef }, props)
+      )
+  }
+
   const scrollAdditionalProps = extendObject(
     {
       alwaysBounceVertical: false,
@@ -123,29 +136,28 @@ const RecycleView = forwardRef((props = {}, ref) => {
   ], { layoutRef })
 
   return (
-    type === 'section' ?
-      <SectionList
+    type === 'section'
+      ? <SectionList
         {...innerProps}
         style={[{ height, width }, style, layoutStyle]}
         sections={listData}
         keyExtractor={(item, index) => item + index}
-        renderItem={({item}) => <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>}
+        renderItem={({ item }) => <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>}
         renderSectionHeader={(data) => <SectionHeader data={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/>}
         renderSectionFooter={(data) => <SectionFooter data={data.section} generichash={generichash} genericsectionFooter={genericsectionFooter}/>}
         ListHeaderComponent={<ListHeader {...props} generichash={generichash} genericlistHeader={genericlistHeader}/>}
         ListFooterComponent={<ListFooter {...props} generichash={generichash} genericlistFooter={genericlistFooter}/>}
       />
-    :
-      <FlatList
+      : <FlatList
         {...innerProps}
         style={[{ height, width }, style, layoutStyle]}
         data={listData}
         keyExtractor={(item, index) => item + index}
-        renderItem={({item}) => <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>}
+        renderItem={({ item }) => <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>}
         ListHeaderComponent={<ListHeader {...props} generichash={generichash} genericlistHeader={genericlistHeader}/>}
         ListFooterComponent={<ListFooter {...props} generichash={generichash} genericlistFooter={genericlistFooter}/>}
       />
   )
 })
 
-export default RecycleView
\ No newline at end of file
+export default RecycleView

From f5fcefe91925ffda0aaa2cccd792e1e9cc177419 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 11 Apr 2025 16:15:58 +0800
Subject: [PATCH 074/126] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85recycle?=
 =?UTF-8?q?=E8=83=BD=E5=8A=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.jsx    | 135 +++++++++++++++---
 1 file changed, 114 insertions(+), 21 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
index 990771edea..0de25d3ac6 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
@@ -1,8 +1,8 @@
-import React, { forwardRef, useRef } from 'react'
-import { SectionList, FlatList } from 'react-native'
-import useInnerProps from '../react/getInnerListeners'
-import useNodesRef from '../react/useNodesRef'
-import { extendObject, getCustomEvent, useLayout, useTransformStyle } from '../react/utils'
+import React, { forwardRef, useRef, useCallback, useState, useEffect } from 'react'
+import { SectionList, FlatList, RefreshControl } from 'react-native'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef from './useNodesRef'
+import { extendObject, useLayout, useTransformStyle } from './utils'
 
 const getGenericComponent = ({ props, ref, generichash, generickey }) => {
   const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
@@ -44,12 +44,16 @@ const RecycleView = forwardRef((props = {}, ref) => {
     listData,
     type,
     generichash,
-    genericrecycleItem,
-    genericsectionHeader,
-    genericsectionFooter,
-    genericlistHeader,
-    genericlistFooter,
     style = {},
+    itemHeight = {},
+    sectionHeaderHeight = {},
+    sectionFooterHeight = {},
+    listHeaderHeight = {},
+    'genericrecycle-item': genericrecycleItem,
+    'genericsection-header': genericsectionHeader,
+    'genericsection-footer': genericsectionFooter,
+    'genericlist-header': genericlistHeader,
+    'genericlist-footer': genericlistFooter,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     'parent-font-size': parentFontSize,
@@ -63,6 +67,8 @@ const RecycleView = forwardRef((props = {}, ref) => {
     'refresher-triggered': refresherTriggered
   } = props
 
+  const [refreshing, setRefreshing] = useState(!!refresherTriggered)
+
   const scrollViewRef = useRef(null)
   const {
     hasSelfPercent,
@@ -72,7 +78,20 @@ const RecycleView = forwardRef((props = {}, ref) => {
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef })
 
-  useNodesRef(props, ref, scrollViewRef, { style })
+  useNodesRef(props, ref, scrollViewRef, {
+    style,
+    node: {
+      scrollToLocation,
+      scrollToOffset,
+      scrollToIndex
+    }
+  })
+
+  useEffect(() => {
+    if (refreshing !== refresherTriggered) {
+      setRefreshing(!!refresherTriggered)
+    }
+  }, [refresherTriggered])
 
   function onRefresh () {
     const { bindrefresherrefresh } = props
@@ -98,6 +117,77 @@ const RecycleView = forwardRef((props = {}, ref) => {
       )
   }
 
+  function getHeight ({ data, index, key }) {
+    if (!key) {
+      return 0
+    }
+    if (key.getter) {
+      return key.getter(data[index], index) || 0
+    } else {
+      return key.value || 0
+    }
+  }
+
+  const renderItem = useCallback(({ item }) => (
+    <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>
+  ), [])
+
+  const renderSectionHeader = useCallback((data) => (
+    <SectionHeader data={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/>
+  ), [])
+
+  const renderSectionFooter = useCallback((data) => (
+    <SectionFooter data={data.section} generichash={generichash} genericsectionFooter={genericsectionFooter}/>
+  ), [])
+
+  const renderListHeader = useCallback((data) => (
+    <ListHeader {...props} generichash={generichash} genericlistHeader={genericlistHeader}/>
+  ), [])
+
+  const renderListFooter = useCallback((data) => (
+    <ListFooter {...props} generichash={generichash} genericlistFooter={genericlistFooter}/>
+  ), [])
+  function getSectionItemLayout (data, index) {
+    // todo 需要计算 sectionHeader、sectionFooter、listHeader、itemHeight
+    // https://github.com/jsoendermann/rn-section-list-get-item-layout/blob/master/index.ts
+    return {
+      length: getHeight({ data, index, key: itemHeight }),
+      offset: getHeight({ data, index, key: itemHeight }) * index || 0,
+      index
+    }
+  }
+
+  function getItemLayout (data, index) {
+    return {
+      length: getHeight({ data, index, key: itemHeight }),
+      offset: getHeight({ data, index, key: listHeaderHeight }) + getHeight({ data, index, key: itemHeight }) * index || 0,
+      index
+    }
+  }
+
+  function scrollToLocation ({
+    itemIndex,
+    sectionIndex,
+    animated,
+    viewOffset = 0,
+    viewPosition = 0
+  }) {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollToLocation?.({ itemIndex, sectionIndex, animated, viewOffset, viewPosition })
+    }
+  }
+
+  function scrollToOffset ({ offset, animated }) {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollToOffset({ offset, animated })
+    }
+  }
+
+  function scrollToIndex ({ index, animated, viewOffset = 0, viewPosition = 0 }) {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollToIndex?.({ index, animated, viewOffset, viewPosition })
+    }
+  }
   const scrollAdditionalProps = extendObject(
     {
       alwaysBounceVertical: false,
@@ -121,8 +211,7 @@ const RecycleView = forwardRef((props = {}, ref) => {
   }
   if (refresherEnabled) {
     Object.assign(scrollAdditionalProps, {
-      onRefresh: onRefresh,
-      refreshing: refresherTriggered
+      refreshing: refreshing
     })
   }
 
@@ -142,20 +231,24 @@ const RecycleView = forwardRef((props = {}, ref) => {
         style={[{ height, width }, style, layoutStyle]}
         sections={listData}
         keyExtractor={(item, index) => item + index}
-        renderItem={({ item }) => <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>}
-        renderSectionHeader={(data) => <SectionHeader data={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/>}
-        renderSectionFooter={(data) => <SectionFooter data={data.section} generichash={generichash} genericsectionFooter={genericsectionFooter}/>}
-        ListHeaderComponent={<ListHeader {...props} generichash={generichash} genericlistHeader={genericlistHeader}/>}
-        ListFooterComponent={<ListFooter {...props} generichash={generichash} genericlistFooter={genericlistFooter}/>}
+        renderItem={renderItem}
+        getItemLayout={getSectionItemLayout}
+        renderSectionHeader={generichash && genericsectionHeader && renderSectionHeader || null}
+        renderSectionFooter={generichash && genericsectionFooter && renderSectionFooter || null}
+        ListHeaderComponent={generichash && genericlistHeader && renderListHeader || null}
+        ListFooterComponent={generichash && genericlistFooter && renderListFooter || null}
+        refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
       />
       : <FlatList
         {...innerProps}
         style={[{ height, width }, style, layoutStyle]}
         data={listData}
         keyExtractor={(item, index) => item + index}
-        renderItem={({ item }) => <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>}
-        ListHeaderComponent={<ListHeader {...props} generichash={generichash} genericlistHeader={genericlistHeader}/>}
-        ListFooterComponent={<ListFooter {...props} generichash={generichash} genericlistFooter={genericlistFooter}/>}
+        renderItem={renderItem}
+        getItemLayout={getItemLayout}
+        ListHeaderComponent={generichash && genericlistHeader && renderListHeader || null}
+        ListFooterComponent={generichash && genericlistFooter && renderListFooter || null}
+        refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
       />
   )
 })

From 5148785469484bcc503027f53deef39defe3574b Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 15 Apr 2025 19:14:25 +0800
Subject: [PATCH 075/126] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=B0=8F?=
 =?UTF-8?q?=E7=A8=8B=E5=BA=8F=20recycle-view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/extend/mpx-recycle-view.wx.mpx | 88 +++++++++++--------
 .../lib/template-compiler/compiler.js         |  8 +-
 2 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.wx.mpx b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.wx.mpx
index 43d4922ce2..6c7c04f579 100644
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.wx.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.wx.mpx
@@ -1,10 +1,11 @@
 <template>
   <scroll-view
+    wx:ref="recycleViewRef"
     class="mpx-recycle-view"
     scroll-y
-    wx:style="{ height: height + 'px', width: width ? width + 'px' : '100%' }"
-    type="{{type}}"
-    enhanced="{{enhanced}}"
+    wx:style="{{scrollViewStyle}}"
+    type="custom"
+    enhanced="{{true}}"
     scroll-with-animation="{{scrollWithAnimation}}"
     bounces="{{bounces}}"
     show-scrollbar="{{showScrollbar}}"
@@ -14,45 +15,48 @@
     bindrefresherrefresh="onRefresh"
   >
     <!-- list header -->
-    <template wx:if="{{genericlistHeader}}">
-      <list-header data="{{listData}}" />
-    </template>
+    <block wx:if="{{mpxGenericListHeader}}">
+      <list-header dataInfo="{{listData}}" />
+    </block>
 
     <block wx:for="{{listData}}" wx:key="index">
       <!-- section header -->
-      <template wx:if="{{genericsectionHeader}}">
+      <block wx:if="{{mpxGenericSectionHeader}}">
         <sticky-section>
-          <sticky-header>
-            <section-header data="{{item}}"></section-header>
+          <sticky-header wx:if="{{enableSticky}}">
+            <section-header dataInfo="{{item}}"></section-header>
           </sticky-header>
-        </sticky-section>
-      </template>
+          <section-header wx:else dataInfo="{{item}}"></section-header>
 
-      <template
-        wx:if="{{genericrecycleItem}}"
-        wx:for="{{item.data}}"
-        wx:for-item="subItem"
-        wx:key="subIndex"
-      >
-        <!-- section items -->
-        <recycle-item currentItem="{{subItem}}"></recycle-item>
-      </template>
+          <list-view>
+            <block
+              wx:if="{{mpxGenericRecycleItem}}"
+              wx:for="{{item.data}}"
+              wx:for-item="subItem"
+              wx:key="subIndex"
+            >
+              <!-- section items -->
+              <recycle-item currentItem="{{subItem}}"></recycle-item>
+            </block>
 
-        <!-- section footer -->
-      <template wx:if="{{genericsectionFooter}}">
-        <section-footer data="{{subItem}}"></section-footer>
-      </template>
+            <!-- section footer -->
+            <block wx:if="{{mpxGenericSectionFooter}}">
+              <section-footer dataInfo="{{item}}"></section-footer>
+            </block>
+          </list-view>
+        </sticky-section>
+      </block>
     </block>
 
     <!-- list footer -->
-    <template wx:if="{{genericlistFooter}}">
+    <block wx:if="{{mpxGenericListFooter}}">
       <list-footer data="{{listData}}" />
-    </template>
+    </block>
   </scroll-view>
 </template>
 
 <script>
-  import { createComponent } from '@mpxjs/core'
+  import mpx, { createComponent } from '@mpxjs/core'
 
   createComponent({
     properties: {
@@ -64,17 +68,19 @@
         type: Number,
         value: 0
       },
-      type: String,
       listData: {
         type: Array,
         value: []
       },
-      generichash: String,
-      genericrecycleItem: String,
-      genericsectionHeader: String,
-      genericsectionFooter: String,
-      genericlistHeader: String,
-      genericlistFooter: String,
+      'a:recycleItem': {
+        type: String,
+        value: ''
+      },
+      mpxGenericRecycleItem: String,
+      mpxGenericSectionHeader: String,
+      mpxGenericSectionFooter: String,
+      mpxGenericListHeader: String,
+      mpxGenericListFooter: String,
       scrollWithAnimation: Boolean,
       enableSticky: {
         type: Boolean,
@@ -101,13 +107,25 @@
         value: false
       }
     },
-
+    computed: {
+      scrollViewStyle() {
+        return `height: ${this.height}px;width: ${this.width}px`
+      }
+    },
     methods: {
       onScroll(e) {
         this.triggerEvent('scroll', e.detail)
       },
       onRefresh(e) {
         this.triggerEvent('refresh', e.detail)
+      },
+      scrollToOffset({ offset, animated}) {
+        this.$refs.recycleViewRef.node().exec(res => {
+           res[0].node.scrollTo({
+            top: offset,
+            animated
+           })
+        })
       }
     }
   })
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index efeffc1919..38d0984798 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -724,13 +724,19 @@ function parse (template, options) {
       processElement(element, root, options, meta)
 
       tagNames.add(element.tag)
+
+      const genericAttrs = []
       // 统计通过抽象节点方式使用的组件
       element.attrsList.forEach((attr) => {
         if (genericRE.test(attr.name)) {
           tagNames.add(attr.value)
+          genericAttrs.push({
+            name: attr.name.replace('generic:', 'mpx-generic-'),
+            value: attr.value
+          })
         }
       })
-
+      element.attrsList = element.attrsList.concat(genericAttrs)
       if (!unary) {
         currentParent = element
         stack.push(element)

From 835368b18b3b75f18873eff533e304ffb73fc5fb Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 15 Apr 2025 19:51:58 +0800
Subject: [PATCH 076/126] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4recycle?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../webpack-plugin/lib/json-compiler/index.js | 14 ++++++------
 .../webpack-plugin/lib/react/processJSON.js   | 14 ++++++------
 .../extend/mpx-section-header-default.,px     | 21 ------------------
 .../mpx-recycle-view.tsx}                     |  0
 .../mpx-list-footer-default.mpx               |  0
 .../mpx-list-header-default.mpx               |  0
 .../mpx-recycle-item-default.mpx              |  0
 .../mpx-recycle-view.mpx}                     |  0
 .../mpx-recycle-view.old.mpx}                 |  0
 .../mpx-section-footer-default.mpx            |  0
 .../mpx-section-header-default.mpx            |  0
 .../lib/template-compiler/compiler.js         | 22 +++++++++++++++----
 .../webpack-plugin/lib/web/processJSON.js     | 14 ++++++------
 13 files changed, 39 insertions(+), 46 deletions(-)
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.,px
 rename packages/webpack-plugin/lib/runtime/components/{extend/mpx-recycle-view.jsx => react/mpx-recycle-view.tsx} (100%)
 rename packages/webpack-plugin/lib/runtime/components/{extend => wx}/mpx-list-footer-default.mpx (100%)
 rename packages/webpack-plugin/lib/runtime/components/{extend => wx}/mpx-list-header-default.mpx (100%)
 rename packages/webpack-plugin/lib/runtime/components/{extend => wx}/mpx-recycle-item-default.mpx (100%)
 rename packages/webpack-plugin/lib/runtime/components/{extend/mpx-recycle-view.wx.mpx => wx/mpx-recycle-view.mpx} (100%)
 rename packages/webpack-plugin/lib/runtime/components/{extend/mpx-recycle-view.mpx => wx/mpx-recycle-view.old.mpx} (100%)
 rename packages/webpack-plugin/lib/runtime/components/{extend => wx}/mpx-section-footer-default.mpx (100%)
 rename packages/webpack-plugin/lib/runtime/components/{extend => wx}/mpx-section-header-default.mpx (100%)

diff --git a/packages/webpack-plugin/lib/json-compiler/index.js b/packages/webpack-plugin/lib/json-compiler/index.js
index 3c86ccf823..a7af630e64 100644
--- a/packages/webpack-plugin/lib/json-compiler/index.js
+++ b/packages/webpack-plugin/lib/json-compiler/index.js
@@ -190,13 +190,13 @@ module.exports = function (content) {
     const { useExtendComponents } = mpx
     if (isApp && useExtendComponents) {
       const extendComponents = {}
-        useExtendComponents.forEach((name) => {
-          if (EXTEND_COMPONENTS_LIST.includes(name)) {
-            extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
-          } else {
-            emitWarning(`extend component ${name} is not supported!`)
-          }
-        })
+        // useExtendComponents.forEach((name) => {
+        //   if (EXTEND_COMPONENTS_LIST.includes(name)) {
+        //     extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
+        //   } else {
+        //     emitWarning(`extend component ${name} is not supported!`)
+        //   }
+        // })
         json.usingComponents = Object.assign({}, extendComponents, json.usingComponents)
     }
   }
diff --git a/packages/webpack-plugin/lib/react/processJSON.js b/packages/webpack-plugin/lib/react/processJSON.js
index 4967c6db90..ce5eb3bc92 100644
--- a/packages/webpack-plugin/lib/react/processJSON.js
+++ b/packages/webpack-plugin/lib/react/processJSON.js
@@ -105,13 +105,13 @@ module.exports = function (jsonContent, {
     } else {
       if (useExtendComponents) {
         const extendComponents = {}
-        useExtendComponents.forEach((name) => {
-          if (EXTEND_COMPONENTS_LIST.includes(name)) {
-            extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
-          } else {
-            emitWarning(`extend component ${name} is not supported!`)
-          }
-        })
+        // useExtendComponents.forEach((name) => {
+        //   if (EXTEND_COMPONENTS_LIST.includes(name)) {
+        //     extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
+        //   } else {
+        //     emitWarning(`extend component ${name} is not supported!`)
+        //   }
+        // })
         jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
       }
     }
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.,px b/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.,px
deleted file mode 100644
index 5cf26e0eb4..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.,px
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <view class="list-item">
-    <view class="item-content">recycle-item-default</view>
-  </view>
-</template>
-
-<style lang="stylus" scoped>
-.list-item
-  margin 4px 16px
-  padding 16px
-  background #fff
-  border-radius 8px
-  box-shadow 0 2px 4px rgba(0,0,0,0.1)
-
-.item-content
-  display flex
-  flex-direction column
-  font-size 14px
-  color #666
-
-</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.jsx
rename to packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-list-footer-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-footer-default.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/extend/mpx-list-footer-default.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-list-footer-default.mpx
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-list-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/extend/mpx-list-header-default.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-item-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-item-default.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.wx.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.wx.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.old.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/extend/mpx-recycle-view.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.old.mpx
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-footer-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-footer-default.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/extend/mpx-section-footer-default.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-section-footer-default.mpx
diff --git a/packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-header-default.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/extend/mpx-section-header-default.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-section-header-default.mpx
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index 38d0984798..b2104d7bdc 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -730,10 +730,12 @@ function parse (template, options) {
       element.attrsList.forEach((attr) => {
         if (genericRE.test(attr.name)) {
           tagNames.add(attr.value)
-          genericAttrs.push({
-            name: attr.name.replace('generic:', 'mpx-generic-'),
-            value: attr.value
-          })
+          if (mode === 'wx') {
+            genericAttrs.push({
+              name: attr.name.replace('generic:', 'mpx-generic-'),
+              value: attr.value
+            })
+          }
         }
       })
       element.attrsList = element.attrsList.concat(genericAttrs)
@@ -2684,6 +2686,16 @@ function processMpxTagName (el) {
   }
 }
 
+function processMpxExtendComponent (el) {
+  const extendTagList = ['recycle-view']
+  extendTagList.forEach(tag => {
+    if (el.tag === tag) {
+    el.tag = `mpx-${tag}`
+    el.isBuiltIn = true
+  }
+  })
+}
+
 function processElement (el, root, options, meta) {
   processAtMode(el)
   // 如果已经标记了这个元素要被清除，直接return跳过后续处理步骤
@@ -2693,6 +2705,8 @@ function processElement (el, root, options, meta) {
 
   processMpxTagName(el)
 
+  processMpxExtendComponent(el)
+
   if (runtimeCompile && options.dynamicTemplateRuleRunner) {
     options.dynamicTemplateRuleRunner(el, options, config[mode])
   }
diff --git a/packages/webpack-plugin/lib/web/processJSON.js b/packages/webpack-plugin/lib/web/processJSON.js
index abd31d1169..a95fd4bd31 100644
--- a/packages/webpack-plugin/lib/web/processJSON.js
+++ b/packages/webpack-plugin/lib/web/processJSON.js
@@ -104,13 +104,13 @@ module.exports = function (jsonContent, {
     } else {
       if (useExtendComponents) {
         const extendComponents = {}
-        useExtendComponents.forEach((name) => {
-          if (EXTEND_COMPONENTS_LIST.includes(name)) {
-            extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
-          } else {
-            emitWarning(`extend component ${name} is not supported!`)
-          }
-        })
+        // useExtendComponents.forEach((name) => {
+        //   if (EXTEND_COMPONENTS_LIST.includes(name)) {
+        //     extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
+        //   } else {
+        //     emitWarning(`extend component ${name} is not supported!`)
+        //   }
+        // })
         jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
       }
     }

From 0ce684737d895d9695d78248409762c471bb31ce Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 16 Apr 2025 22:09:09 +0800
Subject: [PATCH 077/126] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=20rn=20?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83recycle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../webpack-plugin/lib/json-compiler/index.js |  14 +-
 .../webpack-plugin/lib/react/processJSON.js   |  14 +-
 .../components/react/mpx-recycle-view-v1.tsx  | 256 +++++++++
 .../components/react/mpx-recycle-view.tsx     | 490 ++++++++++--------
 .../webpack-plugin/lib/web/processJSON.js     |  14 +-
 5 files changed, 550 insertions(+), 238 deletions(-)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-v1.tsx

diff --git a/packages/webpack-plugin/lib/json-compiler/index.js b/packages/webpack-plugin/lib/json-compiler/index.js
index a7af630e64..6bc49d1cb0 100644
--- a/packages/webpack-plugin/lib/json-compiler/index.js
+++ b/packages/webpack-plugin/lib/json-compiler/index.js
@@ -190,13 +190,13 @@ module.exports = function (content) {
     const { useExtendComponents } = mpx
     if (isApp && useExtendComponents) {
       const extendComponents = {}
-        // useExtendComponents.forEach((name) => {
-        //   if (EXTEND_COMPONENTS_LIST.includes(name)) {
-        //     extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
-        //   } else {
-        //     emitWarning(`extend component ${name} is not supported!`)
-        //   }
-        // })
+        useExtendComponents.forEach((name) => {
+          if (EXTEND_COMPONENTS_LIST.includes(name)) {
+            extendComponents[name] = require.resolve(`../runtime/components/wx/mpx-${name}.mpx`)
+          } else {
+            emitWarning(`extend component ${name} is not supported!`)
+          }
+        })
         json.usingComponents = Object.assign({}, extendComponents, json.usingComponents)
     }
   }
diff --git a/packages/webpack-plugin/lib/react/processJSON.js b/packages/webpack-plugin/lib/react/processJSON.js
index ce5eb3bc92..95c076ab12 100644
--- a/packages/webpack-plugin/lib/react/processJSON.js
+++ b/packages/webpack-plugin/lib/react/processJSON.js
@@ -105,13 +105,13 @@ module.exports = function (jsonContent, {
     } else {
       if (useExtendComponents) {
         const extendComponents = {}
-        // useExtendComponents.forEach((name) => {
-        //   if (EXTEND_COMPONENTS_LIST.includes(name)) {
-        //     extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
-        //   } else {
-        //     emitWarning(`extend component ${name} is not supported!`)
-        //   }
-        // })
+        useExtendComponents.forEach((name) => {
+          if (EXTEND_COMPONENTS_LIST.includes(name)) {
+            extendComponents[name] = require.resolve(`../runtime/components/react/mpx-${name}.tsx`)
+          } else {
+            emitWarning(`extend component ${name} is not supported!`)
+          }
+        })
         jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
       }
     }
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-v1.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-v1.tsx
new file mode 100644
index 0000000000..0de25d3ac6
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-v1.tsx
@@ -0,0 +1,256 @@
+import React, { forwardRef, useRef, useCallback, useState, useEffect } from 'react'
+import { SectionList, FlatList, RefreshControl } from 'react-native'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef from './useNodesRef'
+import { extendObject, useLayout, useTransformStyle } from './utils'
+
+const getGenericComponent = ({ props, ref, generichash, generickey }) => {
+  const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
+  return <GenericComponent ref={ref} {...props}/>
+}
+
+const Item = forwardRef((props, ref) => {
+  const { generichash, genericrecycleItem } = props
+  return getGenericComponent({ props, ref, generichash, generickey: genericrecycleItem })
+})
+
+const SectionHeader = forwardRef((props, ref) => {
+  const { generichash, genericsectionHeader } = props
+  return getGenericComponent({ props, ref, generichash, generickey: genericsectionHeader })
+})
+
+const SectionFooter = forwardRef((props, ref) => {
+  const { generichash, genericsectionFooter } = props
+  return getGenericComponent({ props, ref, generichash, generickey: genericsectionFooter })
+})
+
+const ListHeader = forwardRef((props, ref) => {
+  const { generichash, genericlistHeader } = props
+  return getGenericComponent({ props, ref, generichash, generickey: genericlistHeader })
+})
+
+const ListFooter = forwardRef((props, ref) => {
+  const { generichash, genericlistFooter } = props
+  return getGenericComponent({ props, ref, generichash, generickey: genericlistFooter })
+})
+
+const RecycleView = forwardRef((props = {}, ref) => {
+  const {
+    enhanced = false,
+    bounces = true,
+    scrollEventThrottle = 0,
+    height,
+    width,
+    listData,
+    type,
+    generichash,
+    style = {},
+    itemHeight = {},
+    sectionHeaderHeight = {},
+    sectionFooterHeight = {},
+    listHeaderHeight = {},
+    'genericrecycle-item': genericrecycleItem,
+    'genericsection-header': genericsectionHeader,
+    'genericsection-footer': genericsectionFooter,
+    'genericlist-header': genericlistHeader,
+    'genericlist-footer': genericlistFooter,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
+    'enable-sticky': enableSticky = false,
+    'enable-back-to-top': enableBackToTop = false,
+    'lower-threshold': lowerThreshold = 50,
+    'refresher-enabled': refresherEnabled,
+    'show-scrollbar': showScrollbar = true,
+    'refresher-triggered': refresherTriggered
+  } = props
+
+  const [refreshing, setRefreshing] = useState(!!refresherTriggered)
+
+  const scrollViewRef = useRef(null)
+  const {
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef })
+
+  useNodesRef(props, ref, scrollViewRef, {
+    style,
+    node: {
+      scrollToLocation,
+      scrollToOffset,
+      scrollToIndex
+    }
+  })
+
+  useEffect(() => {
+    if (refreshing !== refresherTriggered) {
+      setRefreshing(!!refresherTriggered)
+    }
+  }, [refresherTriggered])
+
+  function onRefresh () {
+    const { bindrefresherrefresh } = props
+    bindrefresherrefresh &&
+      bindrefresherrefresh(
+        getCustomEvent('refresherrefresh', {}, { layoutRef }, props)
+      )
+  }
+
+  function onEndReached () {
+    const { bindscrolltolower } = props
+    bindscrolltolower &&
+      bindscrolltolower(
+        getCustomEvent('scrolltolower', {}, { layoutRef }, props)
+      )
+  }
+
+  function onScroll (event) {
+    const { bindscroll } = props
+    bindscroll &&
+      bindscroll(
+        getCustomEvent('scroll', event.nativeEvent, { layoutRef }, props)
+      )
+  }
+
+  function getHeight ({ data, index, key }) {
+    if (!key) {
+      return 0
+    }
+    if (key.getter) {
+      return key.getter(data[index], index) || 0
+    } else {
+      return key.value || 0
+    }
+  }
+
+  const renderItem = useCallback(({ item }) => (
+    <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>
+  ), [])
+
+  const renderSectionHeader = useCallback((data) => (
+    <SectionHeader data={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/>
+  ), [])
+
+  const renderSectionFooter = useCallback((data) => (
+    <SectionFooter data={data.section} generichash={generichash} genericsectionFooter={genericsectionFooter}/>
+  ), [])
+
+  const renderListHeader = useCallback((data) => (
+    <ListHeader {...props} generichash={generichash} genericlistHeader={genericlistHeader}/>
+  ), [])
+
+  const renderListFooter = useCallback((data) => (
+    <ListFooter {...props} generichash={generichash} genericlistFooter={genericlistFooter}/>
+  ), [])
+  function getSectionItemLayout (data, index) {
+    // todo 需要计算 sectionHeader、sectionFooter、listHeader、itemHeight
+    // https://github.com/jsoendermann/rn-section-list-get-item-layout/blob/master/index.ts
+    return {
+      length: getHeight({ data, index, key: itemHeight }),
+      offset: getHeight({ data, index, key: itemHeight }) * index || 0,
+      index
+    }
+  }
+
+  function getItemLayout (data, index) {
+    return {
+      length: getHeight({ data, index, key: itemHeight }),
+      offset: getHeight({ data, index, key: listHeaderHeight }) + getHeight({ data, index, key: itemHeight }) * index || 0,
+      index
+    }
+  }
+
+  function scrollToLocation ({
+    itemIndex,
+    sectionIndex,
+    animated,
+    viewOffset = 0,
+    viewPosition = 0
+  }) {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollToLocation?.({ itemIndex, sectionIndex, animated, viewOffset, viewPosition })
+    }
+  }
+
+  function scrollToOffset ({ offset, animated }) {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollToOffset({ offset, animated })
+    }
+  }
+
+  function scrollToIndex ({ index, animated, viewOffset = 0, viewPosition = 0 }) {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollToIndex?.({ index, animated, viewOffset, viewPosition })
+    }
+  }
+  const scrollAdditionalProps = extendObject(
+    {
+      alwaysBounceVertical: false,
+      alwaysBounceHorizontal: false,
+      scrollEventThrottle: scrollEventThrottle,
+      scrollsToTop: enableBackToTop,
+      showsHorizontalScrollIndicator: showScrollbar,
+      onEndReachedThreshold: lowerThreshold,
+      ref: scrollViewRef,
+      stickySectionHeadersEnabled: enableSticky,
+      onScroll: onScroll,
+      onEndReached: onEndReached
+    },
+    layoutProps
+  )
+
+  if (enhanced) {
+    Object.assign(scrollAdditionalProps, {
+      bounces
+    })
+  }
+  if (refresherEnabled) {
+    Object.assign(scrollAdditionalProps, {
+      refreshing: refreshing
+    })
+  }
+
+  const innerProps = useInnerProps(props, scrollAdditionalProps, [
+    'id',
+    'show-scrollbar',
+    'lower-threshold',
+    'refresher-triggered',
+    'refresher-enabled',
+    'bindrefresherrefresh'
+  ], { layoutRef })
+
+  return (
+    type === 'section'
+      ? <SectionList
+        {...innerProps}
+        style={[{ height, width }, style, layoutStyle]}
+        sections={listData}
+        keyExtractor={(item, index) => item + index}
+        renderItem={renderItem}
+        getItemLayout={getSectionItemLayout}
+        renderSectionHeader={generichash && genericsectionHeader && renderSectionHeader || null}
+        renderSectionFooter={generichash && genericsectionFooter && renderSectionFooter || null}
+        ListHeaderComponent={generichash && genericlistHeader && renderListHeader || null}
+        ListFooterComponent={generichash && genericlistFooter && renderListFooter || null}
+        refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
+      />
+      : <FlatList
+        {...innerProps}
+        style={[{ height, width }, style, layoutStyle]}
+        data={listData}
+        keyExtractor={(item, index) => item + index}
+        renderItem={renderItem}
+        getItemLayout={getItemLayout}
+        ListHeaderComponent={generichash && genericlistHeader && renderListHeader || null}
+        ListFooterComponent={generichash && genericlistFooter && renderListFooter || null}
+        refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
+      />
+  )
+})
+
+export default RecycleView
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index 0de25d3ac6..bc971e0a2f 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -1,256 +1,312 @@
-import React, { forwardRef, useRef, useCallback, useState, useEffect } from 'react'
-import { SectionList, FlatList, RefreshControl } from 'react-native'
-import useInnerProps, { getCustomEvent } from './getInnerListeners'
-import useNodesRef from './useNodesRef'
-import { extendObject, useLayout, useTransformStyle } from './utils'
-
-const getGenericComponent = ({ props, ref, generichash, generickey }) => {
-  const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
-  return <GenericComponent ref={ref} {...props}/>
+import React, { useRef, useState, useEffect, useCallback } from 'react'
+import { View, StyleSheet, LayoutChangeEvent, ViewStyle, Animated } from 'react-native'
+import { ScrollView } from 'react-native-gesture-handler'
+
+interface RecycleViewProps {
+  scrollY?: boolean;
+  height?: number;
+  width?: number;
+  itemHeight?: {
+    value?: number;
+    getter?: (item: any, index: number) => number;
+  };
+  bufferScale?: number;
+  listData?: any[];
+  scrollTop?: number;
+  scrollWithAnimation?: boolean;
+  enableBackToTop?: boolean;
+  lowerThreshold?: number;
+  upperThreshold?: number;
+  scrollOptions?: Record<string, any>;
+  scrollEventThrottle?: number;
+  minRenderCount?: number;
+  enhanced?: boolean;
+  bounces?: boolean;
+  onScroll?: (e: any) => void;
+  onScrollToUpper?: (e: any) => void;
+  onScrollToLower?: (e: any) => void;
+  children?: React.ReactNode;
 }
 
-const Item = forwardRef((props, ref) => {
-  const { generichash, genericrecycleItem } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericrecycleItem })
-})
+const RecycleView: React.FC<RecycleViewProps> = ({
+  scrollY = true,
+  height = 0,
+  width = 0,
+  itemHeight = {},
+  bufferScale = 2,
+  listData = [],
+  scrollTop = 0,
+  scrollWithAnimation = false,
+  enableBackToTop = false,
+  lowerThreshold = 50,
+  upperThreshold = 50,
+  scrollOptions = {},
+  scrollEventThrottle = 0,
+  minRenderCount = 10,
+  enhanced = false,
+  bounces = false,
+  onScroll: onScrollProp,
+  onScrollToUpper,
+  onScrollToLower,
+  children
+}) => {
+  const scrollViewRef = useRef<ScrollView>(null)
 
-const SectionHeader = forwardRef((props, ref) => {
-  const { generichash, genericsectionHeader } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericsectionHeader })
-})
+  const [containerHeight, setContainerHeight] = useState(0)
+  const [_listData, setListData] = useState(listData)
+  const [positions, setPositions] = useState<Array<{
+    index: number;
+    height: number;
+    top: number;
+    bottom: number;
+  }>>([])
+  const [totalHeight, setTotalHeight] = useState(0)
+  const [visibleCounts, setVisibleCounts] = useState<number[]>([])
+  const [visibleData, setVisibleData] = useState([])
 
-const SectionFooter = forwardRef((props, ref) => {
-  const { generichash, genericsectionFooter } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericsectionFooter })
-})
+  const startIndexValueRef = useRef(0)
+  const endIndexValueRef = useRef(0)
+  const transformYRef = useRef(new Animated.Value(0)).current
 
-const ListHeader = forwardRef((props, ref) => {
-  const { generichash, genericlistHeader } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericlistHeader })
-})
+  useEffect(() => {
+    setListData(listData.map((item, index) => ({
+      ...item,
+      _index: `_${index}`
+    })))
+    initPositions()
+    setStartOffset()
+  }, [listData])
 
-const ListFooter = forwardRef((props, ref) => {
-  const { generichash, genericlistFooter } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericlistFooter })
-})
+  const getItemHeight = useCallback((item: any, index: number) => {
+    const { value, getter } = itemHeight
+    if (typeof getter === 'function') {
+      return getter(item, index) || 0
+    }
+    return value || 0
+  }, [itemHeight])
+
+  function initPositions () {
+    let bottom = 0
+    const newPositions = _listData.map((item, index) => {
+      const height = getItemHeight(item, index)
+      const position = {
+        index,
+        height,
+        top: bottom,
+        bottom: bottom + height
+      }
+      bottom = position.bottom
+      return position
+    })
+    setPositions(newPositions)
+    setTotalHeight(!newPositions.length ? 0 : newPositions[newPositions.length - 1].bottom)
 
-const RecycleView = forwardRef((props = {}, ref) => {
-  const {
-    enhanced = false,
-    bounces = true,
-    scrollEventThrottle = 0,
-    height,
-    width,
-    listData,
-    type,
-    generichash,
-    style = {},
-    itemHeight = {},
-    sectionHeaderHeight = {},
-    sectionFooterHeight = {},
-    listHeaderHeight = {},
-    'genericrecycle-item': genericrecycleItem,
-    'genericsection-header': genericsectionHeader,
-    'genericsection-footer': genericsectionFooter,
-    'genericlist-header': genericlistHeader,
-    'genericlist-footer': genericlistFooter,
-    'enable-var': enableVar,
-    'external-var-context': externalVarContext,
-    'parent-font-size': parentFontSize,
-    'parent-width': parentWidth,
-    'parent-height': parentHeight,
-    'enable-sticky': enableSticky = false,
-    'enable-back-to-top': enableBackToTop = false,
-    'lower-threshold': lowerThreshold = 50,
-    'refresher-enabled': refresherEnabled,
-    'show-scrollbar': showScrollbar = true,
-    'refresher-triggered': refresherTriggered
-  } = props
-
-  const [refreshing, setRefreshing] = useState(!!refresherTriggered)
-
-  const scrollViewRef = useRef(null)
-  const {
-    hasSelfPercent,
-    setWidth,
-    setHeight
-  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
-
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef })
-
-  useNodesRef(props, ref, scrollViewRef, {
-    style,
-    node: {
-      scrollToLocation,
-      scrollToOffset,
-      scrollToIndex
+    if (containerHeight) {
+      calculateVisibleCounts(newPositions)
     }
-  })
+  }
+
+  const calculateVisibleCounts = useCallback((currentPositions = positions) => {
+    const newVisibleCounts = currentPositions.map((_, startIndex) => {
+      let count = 0
+      let totalHeight = 0
+
+      for (let i = startIndex; i < currentPositions.length; i++) {
+        totalHeight += currentPositions[i].height
+        if (totalHeight > containerHeight) {
+          break
+        }
+        count++
+      }
+
+      if (startIndex + count > currentPositions.length - 3) {
+        count = currentPositions.length - startIndex
+      }
+
+      return count
+    })
+
+    setVisibleCounts(newVisibleCounts)
+  }, [containerHeight])
 
   useEffect(() => {
-    if (refreshing !== refresherTriggered) {
-      setRefreshing(!!refresherTriggered)
+    calculateVisibleCounts(positions)
+  }, [containerHeight])
+
+  const binarySearch = useCallback((list: typeof positions, value: number) => {
+    if (!list.length) return 0
+
+    if (value >= list[list.length - 1].bottom) {
+      return list.length - 1
     }
-  }, [refresherTriggered])
 
-  function onRefresh () {
-    const { bindrefresherrefresh } = props
-    bindrefresherrefresh &&
-      bindrefresherrefresh(
-        getCustomEvent('refresherrefresh', {}, { layoutRef }, props)
-      )
-  }
+    let start = 0
+    let end = list.length - 1
 
-  function onEndReached () {
-    const { bindscrolltolower } = props
-    bindscrolltolower &&
-      bindscrolltolower(
-        getCustomEvent('scrolltolower', {}, { layoutRef }, props)
-      )
-  }
+    while (start <= end) {
+      const midIndex = Math.floor((start + end) / 2)
+      const midValue = list[midIndex]
 
-  function onScroll (event) {
-    const { bindscroll } = props
-    bindscroll &&
-      bindscroll(
-        getCustomEvent('scroll', event.nativeEvent, { layoutRef }, props)
-      )
-  }
+      if (value >= midValue.top && value < midValue.bottom) {
+        return midIndex
+      }
 
-  function getHeight ({ data, index, key }) {
-    if (!key) {
-      return 0
-    }
-    if (key.getter) {
-      return key.getter(data[index], index) || 0
-    } else {
-      return key.value || 0
+      if (value < midValue.top) {
+        end = midIndex - 1
+      } else {
+        start = midIndex + 1
+      }
     }
-  }
 
-  const renderItem = useCallback(({ item }) => (
-    <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>
-  ), [])
-
-  const renderSectionHeader = useCallback((data) => (
-    <SectionHeader data={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/>
-  ), [])
-
-  const renderSectionFooter = useCallback((data) => (
-    <SectionFooter data={data.section} generichash={generichash} genericsectionFooter={genericsectionFooter}/>
-  ), [])
-
-  const renderListHeader = useCallback((data) => (
-    <ListHeader {...props} generichash={generichash} genericlistHeader={genericlistHeader}/>
-  ), [])
-
-  const renderListFooter = useCallback((data) => (
-    <ListFooter {...props} generichash={generichash} genericlistFooter={genericlistFooter}/>
-  ), [])
-  function getSectionItemLayout (data, index) {
-    // todo 需要计算 sectionHeader、sectionFooter、listHeader、itemHeight
-    // https://github.com/jsoendermann/rn-section-list-get-item-layout/blob/master/index.ts
-    return {
-      length: getHeight({ data, index, key: itemHeight }),
-      offset: getHeight({ data, index, key: itemHeight }) * index || 0,
-      index
-    }
+    return Math.min(Math.max(0, start - 1), list.length - 1)
+  }, [])
+
+  const getStartIndex = (scrollTop: number) => {
+    if (!positions.length) return 0
+    if (scrollTop <= 0) return 0
+    const index = binarySearch(positions, scrollTop)
+    return Math.max(0, Math.min(index, _listData.length - 1))
   }
 
-  function getItemLayout (data, index) {
-    return {
-      length: getHeight({ data, index, key: itemHeight }),
-      offset: getHeight({ data, index, key: listHeaderHeight }) + getHeight({ data, index, key: itemHeight }) * index || 0,
-      index
-    }
+  const getVisibleCount = () => {
+    if (!visibleCounts.length) return minRenderCount
+    return Math.max(visibleCounts[startIndexValueRef.current], minRenderCount)
   }
 
-  function scrollToLocation ({
-    itemIndex,
-    sectionIndex,
-    animated,
-    viewOffset = 0,
-    viewPosition = 0
-  }) {
-    if (scrollViewRef.current) {
-      scrollViewRef.current.scrollToLocation?.({ itemIndex, sectionIndex, animated, viewOffset, viewPosition })
+  const getAboveCount = () => {
+    if (!_listData.length || !visibleCounts.length) return 0
+    let count = 0
+    const startIdx = Math.max(0, startIndexValueRef.current)
+    const endIdx = Math.max(0, startIdx - bufferScale)
+
+    for (let i = startIdx; i >= endIdx; i--) {
+      count += visibleCounts[i] || 0
     }
+
+    return count
   }
 
-  function scrollToOffset ({ offset, animated }) {
-    if (scrollViewRef.current) {
-      scrollViewRef.current.scrollToOffset({ offset, animated })
+  const getBelowCount = () => {
+    if (!_listData.length || !visibleCounts.length) return 0
+    let count = 0
+    const startIdx = Math.min(startIndexValueRef.current, _listData.length - 1)
+    const endIdx = Math.min(startIdx + bufferScale, _listData.length - 1)
+
+    for (let i = startIdx; i <= endIdx; i++) {
+      count += visibleCounts[i] || 0
     }
+
+    return count
   }
 
-  function scrollToIndex ({ index, animated, viewOffset = 0, viewPosition = 0 }) {
-    if (scrollViewRef.current) {
-      scrollViewRef.current.scrollToIndex?.({ index, animated, viewOffset, viewPosition })
+  const getVisibleData = () => {
+    if (!_listData.length) return []
+
+    const currentStart = startIndexValueRef.current
+
+    const startIdx = Math.min(Math.max(0, currentStart - getAboveCount()), _listData.length - 1)
+    let endIdx = Math.min(_listData.length, currentStart + getVisibleCount() + getBelowCount())
+
+    if (endIdx > _listData.length - 3) {
+      endIdx = _listData.length
     }
-  }
-  const scrollAdditionalProps = extendObject(
-    {
-      alwaysBounceVertical: false,
-      alwaysBounceHorizontal: false,
-      scrollEventThrottle: scrollEventThrottle,
-      scrollsToTop: enableBackToTop,
-      showsHorizontalScrollIndicator: showScrollbar,
-      onEndReachedThreshold: lowerThreshold,
-      ref: scrollViewRef,
-      stickySectionHeadersEnabled: enableSticky,
-      onScroll: onScroll,
-      onEndReached: onEndReached
-    },
-    layoutProps
-  )
 
-  if (enhanced) {
-    Object.assign(scrollAdditionalProps, {
-      bounces
+    return _listData.slice(startIdx, endIdx).map((item, idx) => {
+      const realIndex = startIdx + idx
+      return {
+        ...item,
+        _index: `_${realIndex}`
+      }
     })
   }
-  if (refresherEnabled) {
-    Object.assign(scrollAdditionalProps, {
-      refreshing: refreshing
-    })
+
+  const handleScroll = (e) => {
+    const newStart = getStartIndex(e.contentOffset.y)
+    const newEnd = newStart + getVisibleCount()
+    startIndexValueRef.current = newStart
+    endIndexValueRef.current = newEnd
+    setStartOffset()
+    onScrollProp?.(e)
+  }
+
+  function setStartOffset () {
+    if (positions.length && startIndexValueRef.current >= 1) {
+      const startIdx = Math.min(
+        Math.max(0, startIndexValueRef.current - getAboveCount()),
+        positions.length - 1
+      )
+      const offset = positions[startIdx].top
+      const data = getVisibleData()
+      setVisibleData(data)
+      transformYRef.setValue(offset)
+    } else {
+      transformYRef.setValue(0)
+    }
   }
 
-  const innerProps = useInnerProps(props, scrollAdditionalProps, [
-    'id',
-    'show-scrollbar',
-    'lower-threshold',
-    'refresher-triggered',
-    'refresher-enabled',
-    'bindrefresherrefresh'
-  ], { layoutRef })
+  const handleLayout = useCallback((e: LayoutChangeEvent) => {
+    const { height: newHeight } = e.nativeEvent.layout
+    setContainerHeight(newHeight)
+  }, [])
+
+  useEffect(() => {
+    const newStart = getStartIndex(scrollTop)
+    const newEnd = newStart + getVisibleCount()
+    startIndexValueRef.current = newStart
+    endIndexValueRef.current = newEnd
+    setStartOffset()
+  }, [scrollTop])
 
   return (
-    type === 'section'
-      ? <SectionList
-        {...innerProps}
-        style={[{ height, width }, style, layoutStyle]}
-        sections={listData}
-        keyExtractor={(item, index) => item + index}
-        renderItem={renderItem}
-        getItemLayout={getSectionItemLayout}
-        renderSectionHeader={generichash && genericsectionHeader && renderSectionHeader || null}
-        renderSectionFooter={generichash && genericsectionFooter && renderSectionFooter || null}
-        ListHeaderComponent={generichash && genericlistHeader && renderListHeader || null}
-        ListFooterComponent={generichash && genericlistFooter && renderListFooter || null}
-        refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
-      />
-      : <FlatList
-        {...innerProps}
-        style={[{ height, width }, style, layoutStyle]}
-        data={listData}
-        keyExtractor={(item, index) => item + index}
-        renderItem={renderItem}
-        getItemLayout={getItemLayout}
-        ListHeaderComponent={generichash && genericlistHeader && renderListHeader || null}
-        ListFooterComponent={generichash && genericlistFooter && renderListFooter || null}
-        refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
-      />
+    <ScrollView
+      ref={scrollViewRef}
+      style={[styles.container, { width: width || '100%', height: height || '100%' } as ViewStyle]}
+      bounces={bounces}
+      onScroll={handleScroll}
+      onLayout={handleLayout}
+    >
+      <View style={styles.contentWrapper}>
+        <View style={[styles.placeholder, { height: totalHeight }]} />
+        <Animated.View
+          style={[
+            styles.infiniteList,
+            {
+              transform: [{ translateY: transformYRef }]
+            }
+          ]}
+        >
+          {visibleData.map((item) => (
+            <View key={item._index}>
+              {children}
+            </View>
+          ))}
+        </Animated.View>
+      </View>
+    </ScrollView>
   )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  contentWrapper: {
+    position: 'relative',
+    width: '100%'
+  },
+  placeholder: {
+    width: '100%'
+  },
+  infiniteList: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    backfaceVisibility: 'hidden'
+  }
 })
 
+RecycleView.displayName = 'MpxRecycleView'
+
 export default RecycleView
diff --git a/packages/webpack-plugin/lib/web/processJSON.js b/packages/webpack-plugin/lib/web/processJSON.js
index a95fd4bd31..870ec396e4 100644
--- a/packages/webpack-plugin/lib/web/processJSON.js
+++ b/packages/webpack-plugin/lib/web/processJSON.js
@@ -104,13 +104,13 @@ module.exports = function (jsonContent, {
     } else {
       if (useExtendComponents) {
         const extendComponents = {}
-        // useExtendComponents.forEach((name) => {
-        //   if (EXTEND_COMPONENTS_LIST.includes(name)) {
-        //     extendComponents[name] = require.resolve(`../runtime/components/extend/mpx-${name}.mpx`)
-        //   } else {
-        //     emitWarning(`extend component ${name} is not supported!`)
-        //   }
-        // })
+        useExtendComponents.forEach((name) => {
+          if (EXTEND_COMPONENTS_LIST.includes(name)) {
+            extendComponents[name] = require.resolve(`../runtime/components/web/mpx-${name}.vue`)
+          } else {
+            emitWarning(`extend component ${name} is not supported!`)
+          }
+        })
         jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
       }
     }

From c192ec08167551f6e532fe5e4d427ba92f431af0 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 17 Apr 2025 14:18:27 +0800
Subject: [PATCH 078/126] =?UTF-8?q?chore:=20rn=E7=8E=AF=E5=A2=83=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81recycle-view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-recycle-view.tsx     | 64 ++++++++++++++-----
 1 file changed, 49 insertions(+), 15 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index bc971e0a2f..a4628dc663 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -1,6 +1,7 @@
-import React, { useRef, useState, useEffect, useCallback } from 'react'
-import { View, StyleSheet, LayoutChangeEvent, ViewStyle, Animated } from 'react-native'
+import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react'
+import { View, Text, StyleSheet, LayoutChangeEvent, Animated } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
+import { HandlerRef } from './useNodesRef'
 
 interface RecycleViewProps {
   scrollY?: boolean;
@@ -28,7 +29,17 @@ interface RecycleViewProps {
   children?: React.ReactNode;
 }
 
-const RecycleView: React.FC<RecycleViewProps> = ({
+const getGenericComponent = ({ props, ref, generichash, generickey }) => {
+  const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
+  return <GenericComponent ref={ref} {...props}/>
+}
+
+const Item = forwardRef((props, ref) => {
+  const { generichash, genericrecycleItem } = props
+  return getGenericComponent({ props, ref, generichash, generickey: genericrecycleItem })
+})
+
+const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewProps>(({
   scrollY = true,
   height = 0,
   width = 0,
@@ -48,8 +59,14 @@ const RecycleView: React.FC<RecycleViewProps> = ({
   onScroll: onScrollProp,
   onScrollToUpper,
   onScrollToLower,
+  generichash,
+  'genericrecycle-item': genericrecycleItem,
+  'genericsection-header': genericsectionHeader,
+  'genericsection-footer': genericsectionFooter,
+  'genericlist-header': genericlistHeader,
+  'genericlist-footer': genericlistFooter,
   children
-}) => {
+}, ref) : React.JSX.Element => {
   const scrollViewRef = useRef<ScrollView>(null)
 
   const [containerHeight, setContainerHeight] = useState(0)
@@ -67,16 +84,23 @@ const RecycleView: React.FC<RecycleViewProps> = ({
   const startIndexValueRef = useRef(0)
   const endIndexValueRef = useRef(0)
   const transformYRef = useRef(new Animated.Value(0)).current
+  const lastScrollTimeRef = useRef(0)
 
   useEffect(() => {
-    setListData(listData.map((item, index) => ({
+    const data = listData.map((item, index) => ({
       ...item,
       _index: `_${index}`
-    })))
+    }))
+    setListData(data)
     initPositions()
-    setStartOffset()
   }, [listData])
 
+  useEffect(() => {
+    if (positions.length > 0) {
+      setStartOffset()
+    }
+  }, [positions])
+
   const getItemHeight = useCallback((item: any, index: number) => {
     const { value, getter } = itemHeight
     if (typeof getter === 'function') {
@@ -221,16 +245,23 @@ const RecycleView: React.FC<RecycleViewProps> = ({
   }
 
   const handleScroll = (e) => {
-    const newStart = getStartIndex(e.contentOffset.y)
-    const newEnd = newStart + getVisibleCount()
-    startIndexValueRef.current = newStart
-    endIndexValueRef.current = newEnd
-    setStartOffset()
+    const now = Date.now()
+    // 添加16ms的节流，大约60fps
+    if (now - lastScrollTimeRef.current < 16) {
+      return
+    }
+    lastScrollTimeRef.current = now
+    const newStart = getStartIndex(e.nativeEvent.contentOffset.y)
+    if (Math.abs(newStart - endIndexValueRef.current) >= Math.floor(getAboveCount() / 2)) {
+      startIndexValueRef.current = newStart
+      endIndexValueRef.current = newStart + getVisibleCount()
+      setStartOffset()
+    }
     onScrollProp?.(e)
   }
 
   function setStartOffset () {
-    if (positions.length && startIndexValueRef.current >= 1) {
+    if (positions.length) {
       const startIdx = Math.min(
         Math.max(0, startIndexValueRef.current - getAboveCount()),
         positions.length - 1
@@ -257,6 +288,9 @@ const RecycleView: React.FC<RecycleViewProps> = ({
     setStartOffset()
   }, [scrollTop])
 
+  const renderItem = useCallback(({ item }) => (
+    <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>
+  ), [])
   return (
     <ScrollView
       ref={scrollViewRef}
@@ -277,14 +311,14 @@ const RecycleView: React.FC<RecycleViewProps> = ({
         >
           {visibleData.map((item) => (
             <View key={item._index}>
-              {children}
+              {renderItem({ item })}
             </View>
           ))}
         </Animated.View>
       </View>
     </ScrollView>
   )
-}
+})
 
 const styles = StyleSheet.create({
   container: {

From de646d4bcdd42082d86e8bfebadf87ec9f445aeb Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 17 Apr 2025 15:37:33 +0800
Subject: [PATCH 079/126] =?UTF-8?q?chore:=20rn=E7=8E=AF=E5=A2=83=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81recycle-view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-recycle-view.tsx     | 35 +++----------------
 1 file changed, 5 insertions(+), 30 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index a4628dc663..b0dc84ef81 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react'
-import { View, Text, StyleSheet, LayoutChangeEvent, Animated } from 'react-native'
+import { View, StyleSheet, LayoutChangeEvent, Animated } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import { HandlerRef } from './useNodesRef'
 
@@ -28,17 +28,6 @@ interface RecycleViewProps {
   onScrollToLower?: (e: any) => void;
   children?: React.ReactNode;
 }
-
-const getGenericComponent = ({ props, ref, generichash, generickey }) => {
-  const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
-  return <GenericComponent ref={ref} {...props}/>
-}
-
-const Item = forwardRef((props, ref) => {
-  const { generichash, genericrecycleItem } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericrecycleItem })
-})
-
 const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewProps>(({
   scrollY = true,
   height = 0,
@@ -59,12 +48,6 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
   onScroll: onScrollProp,
   onScrollToUpper,
   onScrollToLower,
-  generichash,
-  'genericrecycle-item': genericrecycleItem,
-  'genericsection-header': genericsectionHeader,
-  'genericsection-footer': genericsectionFooter,
-  'genericlist-header': genericlistHeader,
-  'genericlist-footer': genericlistFooter,
   children
 }, ref) : React.JSX.Element => {
   const scrollViewRef = useRef<ScrollView>(null)
@@ -93,14 +76,9 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
     }))
     setListData(data)
     initPositions()
+    setStartOffset()
   }, [listData])
 
-  useEffect(() => {
-    if (positions.length > 0) {
-      setStartOffset()
-    }
-  }, [positions])
-
   const getItemHeight = useCallback((item: any, index: number) => {
     const { value, getter } = itemHeight
     if (typeof getter === 'function') {
@@ -251,7 +229,7 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
       return
     }
     lastScrollTimeRef.current = now
-    const newStart = getStartIndex(e.nativeEvent.contentOffset.y)
+    const newStart = getStartIndex(e.contentOffset.y)
     if (Math.abs(newStart - endIndexValueRef.current) >= Math.floor(getAboveCount() / 2)) {
       startIndexValueRef.current = newStart
       endIndexValueRef.current = newStart + getVisibleCount()
@@ -261,7 +239,7 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
   }
 
   function setStartOffset () {
-    if (positions.length) {
+    if (positions.length && startIndexValueRef.current >= 1) {
       const startIdx = Math.min(
         Math.max(0, startIndexValueRef.current - getAboveCount()),
         positions.length - 1
@@ -288,9 +266,6 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
     setStartOffset()
   }, [scrollTop])
 
-  const renderItem = useCallback(({ item }) => (
-    <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>
-  ), [])
   return (
     <ScrollView
       ref={scrollViewRef}
@@ -311,7 +286,7 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
         >
           {visibleData.map((item) => (
             <View key={item._index}>
-              {renderItem({ item })}
+              {children}
             </View>
           ))}
         </Animated.View>

From 0ab5792466477570a0a3b13ef8259c9e4afa46f8 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 21 Apr 2025 14:13:38 +0800
Subject: [PATCH 080/126] =?UTF-8?q?chore:=20=E8=B0=83=E8=AF=95recycle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-recycle-view.tsx     | 42 ++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index b0dc84ef81..f527c05416 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -28,6 +28,17 @@ interface RecycleViewProps {
   onScrollToLower?: (e: any) => void;
   children?: React.ReactNode;
 }
+
+const getGenericComponent = ({ props, ref, generichash, generickey }) => {
+  const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
+  return <GenericComponent ref={ref} {...props}/>
+}
+
+const Item = forwardRef((props, ref) => {
+  const { generichash, genericrecycleItem } = props
+  return getGenericComponent({ props, ref, generichash, generickey: genericrecycleItem })
+})
+
 const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewProps>(({
   scrollY = true,
   height = 0,
@@ -42,13 +53,19 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
   upperThreshold = 50,
   scrollOptions = {},
   scrollEventThrottle = 0,
-  minRenderCount = 10,
+  minRenderCount = 5,
   enhanced = false,
   bounces = false,
   onScroll: onScrollProp,
   onScrollToUpper,
   onScrollToLower,
-  children
+  children,
+  generichash,
+  'genericrecycle-item': genericrecycleItem,
+  'genericsection-header': genericsectionHeader,
+  'genericsection-footer': genericsectionFooter,
+  'genericlist-header': genericlistHeader,
+  'genericlist-footer': genericlistFooter
 }, ref) : React.JSX.Element => {
   const scrollViewRef = useRef<ScrollView>(null)
 
@@ -76,9 +93,12 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
     }))
     setListData(data)
     initPositions()
-    setStartOffset()
   }, [listData])
 
+  useEffect(() => {
+    setStartOffset()
+  }, [positions])
+
   const getItemHeight = useCallback((item: any, index: number) => {
     const { value, getter } = itemHeight
     if (typeof getter === 'function') {
@@ -135,6 +155,10 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
     calculateVisibleCounts(positions)
   }, [containerHeight])
 
+  const renderItem = useCallback(({ item }) => (
+    <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem} key={item._index}/>
+  ), [])
+
   const binarySearch = useCallback((list: typeof positions, value: number) => {
     if (!list.length) return 0
 
@@ -181,7 +205,7 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
     const startIdx = Math.max(0, startIndexValueRef.current)
     const endIdx = Math.max(0, startIdx - bufferScale)
 
-    for (let i = startIdx; i >= endIdx; i--) {
+    for (let i = startIdx; i > endIdx; i--) {
       count += visibleCounts[i] || 0
     }
 
@@ -194,7 +218,7 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
     const startIdx = Math.min(startIndexValueRef.current, _listData.length - 1)
     const endIdx = Math.min(startIdx + bufferScale, _listData.length - 1)
 
-    for (let i = startIdx; i <= endIdx; i++) {
+    for (let i = startIdx; i < endIdx; i++) {
       count += visibleCounts[i] || 0
     }
 
@@ -229,7 +253,7 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
       return
     }
     lastScrollTimeRef.current = now
-    const newStart = getStartIndex(e.contentOffset.y)
+    const newStart = getStartIndex(e.nativeEvent.contentOffset.y)
     if (Math.abs(newStart - endIndexValueRef.current) >= Math.floor(getAboveCount() / 2)) {
       startIndexValueRef.current = newStart
       endIndexValueRef.current = newStart + getVisibleCount()
@@ -239,7 +263,7 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
   }
 
   function setStartOffset () {
-    if (positions.length && startIndexValueRef.current >= 1) {
+    if (positions.length) {
       const startIdx = Math.min(
         Math.max(0, startIndexValueRef.current - getAboveCount()),
         positions.length - 1
@@ -285,9 +309,7 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
           ]}
         >
           {visibleData.map((item) => (
-            <View key={item._index}>
-              {children}
-            </View>
+            renderItem({item})
           ))}
         </Animated.View>
       </View>

From 48a2364f3d6f3c20e9695cdd7f53db24b89ea9db Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 21 Apr 2025 15:43:11 +0800
Subject: [PATCH 081/126] =?UTF-8?q?chore:=20=E8=B0=83=E8=AF=95recycle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../runtime/components/react/mpx-recycle-view.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index f527c05416..7588b334f2 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -83,7 +83,8 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
 
   const startIndexValueRef = useRef(0)
   const endIndexValueRef = useRef(0)
-  const transformYRef = useRef(new Animated.Value(0)).current
+  // const transformYRef = useRef(new Animated.Value(0)).current
+  const transformYRef = useRef(0)
   const lastScrollTimeRef = useRef(0)
 
   useEffect(() => {
@@ -271,9 +272,11 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
       const offset = positions[startIdx].top
       const data = getVisibleData()
       setVisibleData(data)
-      transformYRef.setValue(offset)
+      // transformYRef.setValue(offset)
+      transformYRef.current = offset
     } else {
-      transformYRef.setValue(0)
+      // transformYRef.setValue(0)
+       transformYRef.current = 0
     }
   }
 
@@ -300,18 +303,18 @@ const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewPr
     >
       <View style={styles.contentWrapper}>
         <View style={[styles.placeholder, { height: totalHeight }]} />
-        <Animated.View
+        <View
           style={[
             styles.infiniteList,
             {
-              transform: [{ translateY: transformYRef }]
+              transform: [{ translateY: transformYRef.current }]
             }
           ]}
         >
           {visibleData.map((item) => (
             renderItem({item})
           ))}
-        </Animated.View>
+        </View>
       </View>
     </ScrollView>
   )

From d207cdd84e72cd9bb0d9fc787e51a7693be2cd87 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 23 Apr 2025 20:57:39 +0800
Subject: [PATCH 082/126] =?UTF-8?q?chore:=20=E8=B0=83=E8=AF=95getSectionIt?=
 =?UTF-8?q?emLayout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/react/getLayout.ts | 113 ++++
 .../react/mpx-recycle-view-4.23.tsx           | 346 +++++++++++++
 .../components/react/mpx-recycle-view-v1.tsx  | 256 ----------
 .../components/react/mpx-recycle-view.tsx     | 483 +++++++-----------
 4 files changed, 642 insertions(+), 556 deletions(-)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/react/getLayout.ts
 create mode 100644 packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-4.23.tsx
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-v1.tsx

diff --git a/packages/webpack-plugin/lib/runtime/components/react/getLayout.ts b/packages/webpack-plugin/lib/runtime/components/react/getLayout.ts
new file mode 100644
index 0000000000..3ac8c3ea61
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/react/getLayout.ts
@@ -0,0 +1,113 @@
+export type SectionListDataProp = Array<{
+  title: string
+  data: any[]
+}>
+
+interface SectionHeader {
+  type: 'SECTION_HEADER'
+}
+
+interface Row {
+  type: 'ROW'
+  index: number
+}
+
+interface SectionFooter {
+  type: 'SECTION_FOOTER'
+}
+
+type ListElement = SectionHeader | Row | SectionFooter
+
+export interface Parameters {
+  getItemHeight: (
+    rowData: any,
+    sectionIndex: number,
+    rowIndex: number,
+  ) => number
+  getSeparatorHeight?: (sectionIndex: number, rowIndex: number) => number
+  getSectionHeaderHeight?: (sectionIndex: number) => number
+  getSectionFooterHeight?: (sectionIndex: number) => number
+  listHeaderHeight?: number | (() => number)
+}
+
+export default ({
+  getItemHeight,
+  getSeparatorHeight = () => 0,
+  getSectionHeaderHeight = () => 0,
+  getSectionFooterHeight = () => 0,
+  listHeaderHeight = 0,
+}: Parameters) => (data: SectionListDataProp, index: number) => {
+  let i = 0
+  let sectionIndex = 0
+  let elementPointer: ListElement = { type: 'SECTION_HEADER' }
+  let offset =
+    typeof listHeaderHeight === 'function'
+      ? listHeaderHeight()
+      : listHeaderHeight
+
+  while (i < index) {
+    switch (elementPointer.type) {
+      case 'SECTION_HEADER': {
+        const sectionData = data[sectionIndex].data
+
+        offset += getSectionHeaderHeight(sectionIndex)
+
+        // If this section is empty, we go right to the footer...
+        if (sectionData.length === 0) {
+          elementPointer = { type: 'SECTION_FOOTER' }
+          // ...otherwise we make elementPointer point at the first row in this section
+        } else {
+          elementPointer = { type: 'ROW', index: 0 }
+        }
+
+        break
+      }
+      case 'ROW': {
+        const sectionData = data[sectionIndex].data
+
+        const rowIndex = elementPointer.index
+
+        offset += getItemHeight(sectionData[rowIndex], sectionIndex, rowIndex)
+        elementPointer.index += 1
+
+        if (rowIndex === sectionData.length - 1) {
+          elementPointer = { type: 'SECTION_FOOTER' }
+        } else {
+          offset += getSeparatorHeight(sectionIndex, rowIndex)
+        }
+
+        break
+      }
+      case 'SECTION_FOOTER': {
+        offset += getSectionFooterHeight(sectionIndex)
+        sectionIndex += 1
+        elementPointer = { type: 'SECTION_HEADER' }
+        break
+      }
+    }
+
+    i += 1
+  }
+
+  let length
+  switch (elementPointer.type) {
+    case 'SECTION_HEADER':
+      length = getSectionHeaderHeight(sectionIndex)
+      break
+    case 'ROW':
+      const rowIndex = elementPointer.index
+      length = getItemHeight(
+        data[sectionIndex].data[rowIndex],
+        sectionIndex,
+        rowIndex,
+      )
+      break
+    case 'SECTION_FOOTER':
+      length = getSectionFooterHeight(sectionIndex)
+      break
+    default:
+      throw new Error('Unknown elementPointer.type')
+  }
+
+  return { length, offset, index }
+}
\ No newline at end of file
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-4.23.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-4.23.tsx
new file mode 100644
index 0000000000..7588b334f2
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-4.23.tsx
@@ -0,0 +1,346 @@
+import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react'
+import { View, StyleSheet, LayoutChangeEvent, Animated } from 'react-native'
+import { ScrollView } from 'react-native-gesture-handler'
+import { HandlerRef } from './useNodesRef'
+
+interface RecycleViewProps {
+  scrollY?: boolean;
+  height?: number;
+  width?: number;
+  itemHeight?: {
+    value?: number;
+    getter?: (item: any, index: number) => number;
+  };
+  bufferScale?: number;
+  listData?: any[];
+  scrollTop?: number;
+  scrollWithAnimation?: boolean;
+  enableBackToTop?: boolean;
+  lowerThreshold?: number;
+  upperThreshold?: number;
+  scrollOptions?: Record<string, any>;
+  scrollEventThrottle?: number;
+  minRenderCount?: number;
+  enhanced?: boolean;
+  bounces?: boolean;
+  onScroll?: (e: any) => void;
+  onScrollToUpper?: (e: any) => void;
+  onScrollToLower?: (e: any) => void;
+  children?: React.ReactNode;
+}
+
+const getGenericComponent = ({ props, ref, generichash, generickey }) => {
+  const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
+  return <GenericComponent ref={ref} {...props}/>
+}
+
+const Item = forwardRef((props, ref) => {
+  const { generichash, genericrecycleItem } = props
+  return getGenericComponent({ props, ref, generichash, generickey: genericrecycleItem })
+})
+
+const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewProps>(({
+  scrollY = true,
+  height = 0,
+  width = 0,
+  itemHeight = {},
+  bufferScale = 2,
+  listData = [],
+  scrollTop = 0,
+  scrollWithAnimation = false,
+  enableBackToTop = false,
+  lowerThreshold = 50,
+  upperThreshold = 50,
+  scrollOptions = {},
+  scrollEventThrottle = 0,
+  minRenderCount = 5,
+  enhanced = false,
+  bounces = false,
+  onScroll: onScrollProp,
+  onScrollToUpper,
+  onScrollToLower,
+  children,
+  generichash,
+  'genericrecycle-item': genericrecycleItem,
+  'genericsection-header': genericsectionHeader,
+  'genericsection-footer': genericsectionFooter,
+  'genericlist-header': genericlistHeader,
+  'genericlist-footer': genericlistFooter
+}, ref) : React.JSX.Element => {
+  const scrollViewRef = useRef<ScrollView>(null)
+
+  const [containerHeight, setContainerHeight] = useState(0)
+  const [_listData, setListData] = useState(listData)
+  const [positions, setPositions] = useState<Array<{
+    index: number;
+    height: number;
+    top: number;
+    bottom: number;
+  }>>([])
+  const [totalHeight, setTotalHeight] = useState(0)
+  const [visibleCounts, setVisibleCounts] = useState<number[]>([])
+  const [visibleData, setVisibleData] = useState([])
+
+  const startIndexValueRef = useRef(0)
+  const endIndexValueRef = useRef(0)
+  // const transformYRef = useRef(new Animated.Value(0)).current
+  const transformYRef = useRef(0)
+  const lastScrollTimeRef = useRef(0)
+
+  useEffect(() => {
+    const data = listData.map((item, index) => ({
+      ...item,
+      _index: `_${index}`
+    }))
+    setListData(data)
+    initPositions()
+  }, [listData])
+
+  useEffect(() => {
+    setStartOffset()
+  }, [positions])
+
+  const getItemHeight = useCallback((item: any, index: number) => {
+    const { value, getter } = itemHeight
+    if (typeof getter === 'function') {
+      return getter(item, index) || 0
+    }
+    return value || 0
+  }, [itemHeight])
+
+  function initPositions () {
+    let bottom = 0
+    const newPositions = _listData.map((item, index) => {
+      const height = getItemHeight(item, index)
+      const position = {
+        index,
+        height,
+        top: bottom,
+        bottom: bottom + height
+      }
+      bottom = position.bottom
+      return position
+    })
+    setPositions(newPositions)
+    setTotalHeight(!newPositions.length ? 0 : newPositions[newPositions.length - 1].bottom)
+
+    if (containerHeight) {
+      calculateVisibleCounts(newPositions)
+    }
+  }
+
+  const calculateVisibleCounts = useCallback((currentPositions = positions) => {
+    const newVisibleCounts = currentPositions.map((_, startIndex) => {
+      let count = 0
+      let totalHeight = 0
+
+      for (let i = startIndex; i < currentPositions.length; i++) {
+        totalHeight += currentPositions[i].height
+        if (totalHeight > containerHeight) {
+          break
+        }
+        count++
+      }
+
+      if (startIndex + count > currentPositions.length - 3) {
+        count = currentPositions.length - startIndex
+      }
+
+      return count
+    })
+
+    setVisibleCounts(newVisibleCounts)
+  }, [containerHeight])
+
+  useEffect(() => {
+    calculateVisibleCounts(positions)
+  }, [containerHeight])
+
+  const renderItem = useCallback(({ item }) => (
+    <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem} key={item._index}/>
+  ), [])
+
+  const binarySearch = useCallback((list: typeof positions, value: number) => {
+    if (!list.length) return 0
+
+    if (value >= list[list.length - 1].bottom) {
+      return list.length - 1
+    }
+
+    let start = 0
+    let end = list.length - 1
+
+    while (start <= end) {
+      const midIndex = Math.floor((start + end) / 2)
+      const midValue = list[midIndex]
+
+      if (value >= midValue.top && value < midValue.bottom) {
+        return midIndex
+      }
+
+      if (value < midValue.top) {
+        end = midIndex - 1
+      } else {
+        start = midIndex + 1
+      }
+    }
+
+    return Math.min(Math.max(0, start - 1), list.length - 1)
+  }, [])
+
+  const getStartIndex = (scrollTop: number) => {
+    if (!positions.length) return 0
+    if (scrollTop <= 0) return 0
+    const index = binarySearch(positions, scrollTop)
+    return Math.max(0, Math.min(index, _listData.length - 1))
+  }
+
+  const getVisibleCount = () => {
+    if (!visibleCounts.length) return minRenderCount
+    return Math.max(visibleCounts[startIndexValueRef.current], minRenderCount)
+  }
+
+  const getAboveCount = () => {
+    if (!_listData.length || !visibleCounts.length) return 0
+    let count = 0
+    const startIdx = Math.max(0, startIndexValueRef.current)
+    const endIdx = Math.max(0, startIdx - bufferScale)
+
+    for (let i = startIdx; i > endIdx; i--) {
+      count += visibleCounts[i] || 0
+    }
+
+    return count
+  }
+
+  const getBelowCount = () => {
+    if (!_listData.length || !visibleCounts.length) return 0
+    let count = 0
+    const startIdx = Math.min(startIndexValueRef.current, _listData.length - 1)
+    const endIdx = Math.min(startIdx + bufferScale, _listData.length - 1)
+
+    for (let i = startIdx; i < endIdx; i++) {
+      count += visibleCounts[i] || 0
+    }
+
+    return count
+  }
+
+  const getVisibleData = () => {
+    if (!_listData.length) return []
+
+    const currentStart = startIndexValueRef.current
+
+    const startIdx = Math.min(Math.max(0, currentStart - getAboveCount()), _listData.length - 1)
+    let endIdx = Math.min(_listData.length, currentStart + getVisibleCount() + getBelowCount())
+
+    if (endIdx > _listData.length - 3) {
+      endIdx = _listData.length
+    }
+
+    return _listData.slice(startIdx, endIdx).map((item, idx) => {
+      const realIndex = startIdx + idx
+      return {
+        ...item,
+        _index: `_${realIndex}`
+      }
+    })
+  }
+
+  const handleScroll = (e) => {
+    const now = Date.now()
+    // 添加16ms的节流，大约60fps
+    if (now - lastScrollTimeRef.current < 16) {
+      return
+    }
+    lastScrollTimeRef.current = now
+    const newStart = getStartIndex(e.nativeEvent.contentOffset.y)
+    if (Math.abs(newStart - endIndexValueRef.current) >= Math.floor(getAboveCount() / 2)) {
+      startIndexValueRef.current = newStart
+      endIndexValueRef.current = newStart + getVisibleCount()
+      setStartOffset()
+    }
+    onScrollProp?.(e)
+  }
+
+  function setStartOffset () {
+    if (positions.length) {
+      const startIdx = Math.min(
+        Math.max(0, startIndexValueRef.current - getAboveCount()),
+        positions.length - 1
+      )
+      const offset = positions[startIdx].top
+      const data = getVisibleData()
+      setVisibleData(data)
+      // transformYRef.setValue(offset)
+      transformYRef.current = offset
+    } else {
+      // transformYRef.setValue(0)
+       transformYRef.current = 0
+    }
+  }
+
+  const handleLayout = useCallback((e: LayoutChangeEvent) => {
+    const { height: newHeight } = e.nativeEvent.layout
+    setContainerHeight(newHeight)
+  }, [])
+
+  useEffect(() => {
+    const newStart = getStartIndex(scrollTop)
+    const newEnd = newStart + getVisibleCount()
+    startIndexValueRef.current = newStart
+    endIndexValueRef.current = newEnd
+    setStartOffset()
+  }, [scrollTop])
+
+  return (
+    <ScrollView
+      ref={scrollViewRef}
+      style={[styles.container, { width: width || '100%', height: height || '100%' } as ViewStyle]}
+      bounces={bounces}
+      onScroll={handleScroll}
+      onLayout={handleLayout}
+    >
+      <View style={styles.contentWrapper}>
+        <View style={[styles.placeholder, { height: totalHeight }]} />
+        <View
+          style={[
+            styles.infiniteList,
+            {
+              transform: [{ translateY: transformYRef.current }]
+            }
+          ]}
+        >
+          {visibleData.map((item) => (
+            renderItem({item})
+          ))}
+        </View>
+      </View>
+    </ScrollView>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  contentWrapper: {
+    position: 'relative',
+    width: '100%'
+  },
+  placeholder: {
+    width: '100%'
+  },
+  infiniteList: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    backfaceVisibility: 'hidden'
+  }
+})
+
+RecycleView.displayName = 'MpxRecycleView'
+
+export default RecycleView
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-v1.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-v1.tsx
deleted file mode 100644
index 0de25d3ac6..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-v1.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import React, { forwardRef, useRef, useCallback, useState, useEffect } from 'react'
-import { SectionList, FlatList, RefreshControl } from 'react-native'
-import useInnerProps, { getCustomEvent } from './getInnerListeners'
-import useNodesRef from './useNodesRef'
-import { extendObject, useLayout, useTransformStyle } from './utils'
-
-const getGenericComponent = ({ props, ref, generichash, generickey }) => {
-  const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
-  return <GenericComponent ref={ref} {...props}/>
-}
-
-const Item = forwardRef((props, ref) => {
-  const { generichash, genericrecycleItem } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericrecycleItem })
-})
-
-const SectionHeader = forwardRef((props, ref) => {
-  const { generichash, genericsectionHeader } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericsectionHeader })
-})
-
-const SectionFooter = forwardRef((props, ref) => {
-  const { generichash, genericsectionFooter } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericsectionFooter })
-})
-
-const ListHeader = forwardRef((props, ref) => {
-  const { generichash, genericlistHeader } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericlistHeader })
-})
-
-const ListFooter = forwardRef((props, ref) => {
-  const { generichash, genericlistFooter } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericlistFooter })
-})
-
-const RecycleView = forwardRef((props = {}, ref) => {
-  const {
-    enhanced = false,
-    bounces = true,
-    scrollEventThrottle = 0,
-    height,
-    width,
-    listData,
-    type,
-    generichash,
-    style = {},
-    itemHeight = {},
-    sectionHeaderHeight = {},
-    sectionFooterHeight = {},
-    listHeaderHeight = {},
-    'genericrecycle-item': genericrecycleItem,
-    'genericsection-header': genericsectionHeader,
-    'genericsection-footer': genericsectionFooter,
-    'genericlist-header': genericlistHeader,
-    'genericlist-footer': genericlistFooter,
-    'enable-var': enableVar,
-    'external-var-context': externalVarContext,
-    'parent-font-size': parentFontSize,
-    'parent-width': parentWidth,
-    'parent-height': parentHeight,
-    'enable-sticky': enableSticky = false,
-    'enable-back-to-top': enableBackToTop = false,
-    'lower-threshold': lowerThreshold = 50,
-    'refresher-enabled': refresherEnabled,
-    'show-scrollbar': showScrollbar = true,
-    'refresher-triggered': refresherTriggered
-  } = props
-
-  const [refreshing, setRefreshing] = useState(!!refresherTriggered)
-
-  const scrollViewRef = useRef(null)
-  const {
-    hasSelfPercent,
-    setWidth,
-    setHeight
-  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
-
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef })
-
-  useNodesRef(props, ref, scrollViewRef, {
-    style,
-    node: {
-      scrollToLocation,
-      scrollToOffset,
-      scrollToIndex
-    }
-  })
-
-  useEffect(() => {
-    if (refreshing !== refresherTriggered) {
-      setRefreshing(!!refresherTriggered)
-    }
-  }, [refresherTriggered])
-
-  function onRefresh () {
-    const { bindrefresherrefresh } = props
-    bindrefresherrefresh &&
-      bindrefresherrefresh(
-        getCustomEvent('refresherrefresh', {}, { layoutRef }, props)
-      )
-  }
-
-  function onEndReached () {
-    const { bindscrolltolower } = props
-    bindscrolltolower &&
-      bindscrolltolower(
-        getCustomEvent('scrolltolower', {}, { layoutRef }, props)
-      )
-  }
-
-  function onScroll (event) {
-    const { bindscroll } = props
-    bindscroll &&
-      bindscroll(
-        getCustomEvent('scroll', event.nativeEvent, { layoutRef }, props)
-      )
-  }
-
-  function getHeight ({ data, index, key }) {
-    if (!key) {
-      return 0
-    }
-    if (key.getter) {
-      return key.getter(data[index], index) || 0
-    } else {
-      return key.value || 0
-    }
-  }
-
-  const renderItem = useCallback(({ item }) => (
-    <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>
-  ), [])
-
-  const renderSectionHeader = useCallback((data) => (
-    <SectionHeader data={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/>
-  ), [])
-
-  const renderSectionFooter = useCallback((data) => (
-    <SectionFooter data={data.section} generichash={generichash} genericsectionFooter={genericsectionFooter}/>
-  ), [])
-
-  const renderListHeader = useCallback((data) => (
-    <ListHeader {...props} generichash={generichash} genericlistHeader={genericlistHeader}/>
-  ), [])
-
-  const renderListFooter = useCallback((data) => (
-    <ListFooter {...props} generichash={generichash} genericlistFooter={genericlistFooter}/>
-  ), [])
-  function getSectionItemLayout (data, index) {
-    // todo 需要计算 sectionHeader、sectionFooter、listHeader、itemHeight
-    // https://github.com/jsoendermann/rn-section-list-get-item-layout/blob/master/index.ts
-    return {
-      length: getHeight({ data, index, key: itemHeight }),
-      offset: getHeight({ data, index, key: itemHeight }) * index || 0,
-      index
-    }
-  }
-
-  function getItemLayout (data, index) {
-    return {
-      length: getHeight({ data, index, key: itemHeight }),
-      offset: getHeight({ data, index, key: listHeaderHeight }) + getHeight({ data, index, key: itemHeight }) * index || 0,
-      index
-    }
-  }
-
-  function scrollToLocation ({
-    itemIndex,
-    sectionIndex,
-    animated,
-    viewOffset = 0,
-    viewPosition = 0
-  }) {
-    if (scrollViewRef.current) {
-      scrollViewRef.current.scrollToLocation?.({ itemIndex, sectionIndex, animated, viewOffset, viewPosition })
-    }
-  }
-
-  function scrollToOffset ({ offset, animated }) {
-    if (scrollViewRef.current) {
-      scrollViewRef.current.scrollToOffset({ offset, animated })
-    }
-  }
-
-  function scrollToIndex ({ index, animated, viewOffset = 0, viewPosition = 0 }) {
-    if (scrollViewRef.current) {
-      scrollViewRef.current.scrollToIndex?.({ index, animated, viewOffset, viewPosition })
-    }
-  }
-  const scrollAdditionalProps = extendObject(
-    {
-      alwaysBounceVertical: false,
-      alwaysBounceHorizontal: false,
-      scrollEventThrottle: scrollEventThrottle,
-      scrollsToTop: enableBackToTop,
-      showsHorizontalScrollIndicator: showScrollbar,
-      onEndReachedThreshold: lowerThreshold,
-      ref: scrollViewRef,
-      stickySectionHeadersEnabled: enableSticky,
-      onScroll: onScroll,
-      onEndReached: onEndReached
-    },
-    layoutProps
-  )
-
-  if (enhanced) {
-    Object.assign(scrollAdditionalProps, {
-      bounces
-    })
-  }
-  if (refresherEnabled) {
-    Object.assign(scrollAdditionalProps, {
-      refreshing: refreshing
-    })
-  }
-
-  const innerProps = useInnerProps(props, scrollAdditionalProps, [
-    'id',
-    'show-scrollbar',
-    'lower-threshold',
-    'refresher-triggered',
-    'refresher-enabled',
-    'bindrefresherrefresh'
-  ], { layoutRef })
-
-  return (
-    type === 'section'
-      ? <SectionList
-        {...innerProps}
-        style={[{ height, width }, style, layoutStyle]}
-        sections={listData}
-        keyExtractor={(item, index) => item + index}
-        renderItem={renderItem}
-        getItemLayout={getSectionItemLayout}
-        renderSectionHeader={generichash && genericsectionHeader && renderSectionHeader || null}
-        renderSectionFooter={generichash && genericsectionFooter && renderSectionFooter || null}
-        ListHeaderComponent={generichash && genericlistHeader && renderListHeader || null}
-        ListFooterComponent={generichash && genericlistFooter && renderListFooter || null}
-        refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
-      />
-      : <FlatList
-        {...innerProps}
-        style={[{ height, width }, style, layoutStyle]}
-        data={listData}
-        keyExtractor={(item, index) => item + index}
-        renderItem={renderItem}
-        getItemLayout={getItemLayout}
-        ListHeaderComponent={generichash && genericlistHeader && renderListHeader || null}
-        ListFooterComponent={generichash && genericlistFooter && renderListFooter || null}
-        refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
-      />
-  )
-})
-
-export default RecycleView
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index 7588b334f2..d6f6f56c5b 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -1,33 +1,9 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react'
-import { View, StyleSheet, LayoutChangeEvent, Animated } from 'react-native'
-import { ScrollView } from 'react-native-gesture-handler'
-import { HandlerRef } from './useNodesRef'
-
-interface RecycleViewProps {
-  scrollY?: boolean;
-  height?: number;
-  width?: number;
-  itemHeight?: {
-    value?: number;
-    getter?: (item: any, index: number) => number;
-  };
-  bufferScale?: number;
-  listData?: any[];
-  scrollTop?: number;
-  scrollWithAnimation?: boolean;
-  enableBackToTop?: boolean;
-  lowerThreshold?: number;
-  upperThreshold?: number;
-  scrollOptions?: Record<string, any>;
-  scrollEventThrottle?: number;
-  minRenderCount?: number;
-  enhanced?: boolean;
-  bounces?: boolean;
-  onScroll?: (e: any) => void;
-  onScrollToUpper?: (e: any) => void;
-  onScrollToLower?: (e: any) => void;
-  children?: React.ReactNode;
-}
+import React, { forwardRef, useRef, useCallback, useState, useEffect } from 'react'
+import { SectionList, FlatList, RefreshControl } from 'react-native'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef from './useNodesRef'
+import { extendObject, useLayout, useTransformStyle } from './utils'
+import sectionListGetItemLayout from './getLayout'
 
 const getGenericComponent = ({ props, ref, generichash, generickey }) => {
   const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
@@ -39,308 +15,215 @@ const Item = forwardRef((props, ref) => {
   return getGenericComponent({ props, ref, generichash, generickey: genericrecycleItem })
 })
 
-const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewProps>(({
-  scrollY = true,
-  height = 0,
-  width = 0,
-  itemHeight = {},
-  bufferScale = 2,
-  listData = [],
-  scrollTop = 0,
-  scrollWithAnimation = false,
-  enableBackToTop = false,
-  lowerThreshold = 50,
-  upperThreshold = 50,
-  scrollOptions = {},
-  scrollEventThrottle = 0,
-  minRenderCount = 5,
-  enhanced = false,
-  bounces = false,
-  onScroll: onScrollProp,
-  onScrollToUpper,
-  onScrollToLower,
-  children,
-  generichash,
-  'genericrecycle-item': genericrecycleItem,
-  'genericsection-header': genericsectionHeader,
-  'genericsection-footer': genericsectionFooter,
-  'genericlist-header': genericlistHeader,
-  'genericlist-footer': genericlistFooter
-}, ref) : React.JSX.Element => {
-  const scrollViewRef = useRef<ScrollView>(null)
-
-  const [containerHeight, setContainerHeight] = useState(0)
-  const [_listData, setListData] = useState(listData)
-  const [positions, setPositions] = useState<Array<{
-    index: number;
-    height: number;
-    top: number;
-    bottom: number;
-  }>>([])
-  const [totalHeight, setTotalHeight] = useState(0)
-  const [visibleCounts, setVisibleCounts] = useState<number[]>([])
-  const [visibleData, setVisibleData] = useState([])
-
-  const startIndexValueRef = useRef(0)
-  const endIndexValueRef = useRef(0)
-  // const transformYRef = useRef(new Animated.Value(0)).current
-  const transformYRef = useRef(0)
-  const lastScrollTimeRef = useRef(0)
+const SectionHeader = forwardRef((props, ref) => {
+  const { generichash, genericsectionHeader } = props
+  return getGenericComponent({ props, ref, generichash, generickey: genericsectionHeader })
+})
 
-  useEffect(() => {
-    const data = listData.map((item, index) => ({
-      ...item,
-      _index: `_${index}`
-    }))
-    setListData(data)
-    initPositions()
-  }, [listData])
+const RecycleView = forwardRef((props = {}, ref) => {
+  const {
+    enhanced = false,
+    bounces = true,
+    scrollEventThrottle = 0,
+    height,
+    width,
+    listData,
+    type,
+    generichash,
+    style = {},
+    itemHeight = {},
+    sectionHeaderHeight = {},
+    listHeaderHeight = {},
+    'genericrecycle-item': genericrecycleItem,
+    'genericsection-header': genericsectionHeader,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
+    'enable-sticky': enableSticky = false,
+    'enable-back-to-top': enableBackToTop = false,
+    'lower-threshold': lowerThreshold = 50,
+    'refresher-enabled': refresherEnabled,
+    'show-scrollbar': showScrollbar = true,
+    'refresher-triggered': refresherTriggered
+  } = props
+
+  const [refreshing, setRefreshing] = useState(!!refresherTriggered)
+
+  const scrollViewRef = useRef(null)
+  const {
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef })
+
+  useNodesRef(props, ref, scrollViewRef, {
+    style,
+    node: {
+      scrollToLocation,
+      scrollToOffset,
+      scrollToIndex
+    }
+  })
 
   useEffect(() => {
-    setStartOffset()
-  }, [positions])
-
-  const getItemHeight = useCallback((item: any, index: number) => {
-    const { value, getter } = itemHeight
-    if (typeof getter === 'function') {
-      return getter(item, index) || 0
+    if (refreshing !== refresherTriggered) {
+      setRefreshing(!!refresherTriggered)
     }
-    return value || 0
-  }, [itemHeight])
+  }, [refresherTriggered])
 
-  function initPositions () {
-    let bottom = 0
-    const newPositions = _listData.map((item, index) => {
-      const height = getItemHeight(item, index)
-      const position = {
-        index,
-        height,
-        top: bottom,
-        bottom: bottom + height
-      }
-      bottom = position.bottom
-      return position
-    })
-    setPositions(newPositions)
-    setTotalHeight(!newPositions.length ? 0 : newPositions[newPositions.length - 1].bottom)
-
-    if (containerHeight) {
-      calculateVisibleCounts(newPositions)
-    }
+  function onRefresh () {
+    const { bindrefresherrefresh } = props
+    bindrefresherrefresh &&
+      bindrefresherrefresh(
+        getCustomEvent('refresherrefresh', {}, { layoutRef }, props)
+      )
   }
 
-  const calculateVisibleCounts = useCallback((currentPositions = positions) => {
-    const newVisibleCounts = currentPositions.map((_, startIndex) => {
-      let count = 0
-      let totalHeight = 0
-
-      for (let i = startIndex; i < currentPositions.length; i++) {
-        totalHeight += currentPositions[i].height
-        if (totalHeight > containerHeight) {
-          break
-        }
-        count++
-      }
-
-      if (startIndex + count > currentPositions.length - 3) {
-        count = currentPositions.length - startIndex
-      }
-
-      return count
-    })
-
-    setVisibleCounts(newVisibleCounts)
-  }, [containerHeight])
-
-  useEffect(() => {
-    calculateVisibleCounts(positions)
-  }, [containerHeight])
-
-  const renderItem = useCallback(({ item }) => (
-    <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem} key={item._index}/>
-  ), [])
+  function onEndReached () {
+    const { bindscrolltolower } = props
+    bindscrolltolower &&
+      bindscrolltolower(
+        getCustomEvent('scrolltolower', {}, { layoutRef }, props)
+      )
+  }
 
-  const binarySearch = useCallback((list: typeof positions, value: number) => {
-    if (!list.length) return 0
+  function onScroll (event) {
+    const { bindscroll } = props
+    bindscroll &&
+      bindscroll(
+        getCustomEvent('scroll', event.nativeEvent, { layoutRef }, props)
+      )
+  }
 
-    if (value >= list[list.length - 1].bottom) {
-      return list.length - 1
+  function getHeight ({ data, index, key }) {
+    if (!key) {
+      return 0
     }
-
-    let start = 0
-    let end = list.length - 1
-
-    while (start <= end) {
-      const midIndex = Math.floor((start + end) / 2)
-      const midValue = list[midIndex]
-
-      if (value >= midValue.top && value < midValue.bottom) {
-        return midIndex
-      }
-
-      if (value < midValue.top) {
-        end = midIndex - 1
-      } else {
-        start = midIndex + 1
-      }
+    if (key.getter) {
+      return key.getter(data[index], index) || 0
+    } else {
+      return key.value || 0
     }
-
-    return Math.min(Math.max(0, start - 1), list.length - 1)
-  }, [])
-
-  const getStartIndex = (scrollTop: number) => {
-    if (!positions.length) return 0
-    if (scrollTop <= 0) return 0
-    const index = binarySearch(positions, scrollTop)
-    return Math.max(0, Math.min(index, _listData.length - 1))
   }
 
-  const getVisibleCount = () => {
-    if (!visibleCounts.length) return minRenderCount
-    return Math.max(visibleCounts[startIndexValueRef.current], minRenderCount)
-  }
+  const renderItem = useCallback(({ item }) => (
+    <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>
+  ), [])
 
-  const getAboveCount = () => {
-    if (!_listData.length || !visibleCounts.length) return 0
-    let count = 0
-    const startIdx = Math.max(0, startIndexValueRef.current)
-    const endIdx = Math.max(0, startIdx - bufferScale)
+  const renderSectionHeader = useCallback((data) => (
+    <SectionHeader dataInfo={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/>
+  ), [])
 
-    for (let i = startIdx; i > endIdx; i--) {
-      count += visibleCounts[i] || 0
+  // function getSectionItemLayout (data, index) {
+  //   // console.log(data, index)
+  //   // // todo 需要计算 sectionHeader、sectionFooter、listHeader、itemHeight
+  //   // // https://github.com/jsoendermann/rn-section-list-get-item-layout/blob/master/index.ts
+  //   // return {
+  //   //   length: getHeight({ data, index, key: itemHeight }),
+  //   //   offset: getHeight({ data, index, key: itemHeight }) * index || 0,
+  //   //   index
+  //   // }
+  // }
+
+  const getSectionItemLayout = sectionListGetItemLayout({
+    // The height of the row with rowData at the given sectionIndex and rowIndex
+    getItemHeight: (rowData, sectionIndex, rowIndex) => 400,
+    getSectionHeaderHeight: () => 50
+  })
+
+  function getItemLayout (data, index) {
+    return {
+      length: getHeight({ data, index, key: itemHeight }),
+      offset: getHeight({ data, index, key: listHeaderHeight }) + getHeight({ data, index, key: itemHeight }) * index || 0,
+      index
     }
-
-    return count
   }
 
-  const getBelowCount = () => {
-    if (!_listData.length || !visibleCounts.length) return 0
-    let count = 0
-    const startIdx = Math.min(startIndexValueRef.current, _listData.length - 1)
-    const endIdx = Math.min(startIdx + bufferScale, _listData.length - 1)
-
-    for (let i = startIdx; i < endIdx; i++) {
-      count += visibleCounts[i] || 0
+  function scrollToLocation ({
+    itemIndex,
+    sectionIndex,
+    animated,
+    viewOffset = 0,
+    viewPosition = 0
+  }) {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollToLocation?.({ itemIndex, sectionIndex, animated, viewOffset, viewPosition })
     }
-
-    return count
   }
 
-  const getVisibleData = () => {
-    if (!_listData.length) return []
-
-    const currentStart = startIndexValueRef.current
-
-    const startIdx = Math.min(Math.max(0, currentStart - getAboveCount()), _listData.length - 1)
-    let endIdx = Math.min(_listData.length, currentStart + getVisibleCount() + getBelowCount())
-
-    if (endIdx > _listData.length - 3) {
-      endIdx = _listData.length
+  function scrollToOffset ({ offset, animated }) {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollToOffset({ offset, animated })
     }
-
-    return _listData.slice(startIdx, endIdx).map((item, idx) => {
-      const realIndex = startIdx + idx
-      return {
-        ...item,
-        _index: `_${realIndex}`
-      }
-    })
   }
 
-  const handleScroll = (e) => {
-    const now = Date.now()
-    // 添加16ms的节流，大约60fps
-    if (now - lastScrollTimeRef.current < 16) {
-      return
+  function scrollToIndex ({ index, animated, viewOffset = 0, viewPosition = 0 }) {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollToIndex?.({ index, animated, viewOffset, viewPosition })
     }
-    lastScrollTimeRef.current = now
-    const newStart = getStartIndex(e.nativeEvent.contentOffset.y)
-    if (Math.abs(newStart - endIndexValueRef.current) >= Math.floor(getAboveCount() / 2)) {
-      startIndexValueRef.current = newStart
-      endIndexValueRef.current = newStart + getVisibleCount()
-      setStartOffset()
-    }
-    onScrollProp?.(e)
   }
+  const scrollAdditionalProps = extendObject(
+    {
+      alwaysBounceVertical: false,
+      alwaysBounceHorizontal: false,
+      scrollEventThrottle: scrollEventThrottle,
+      scrollsToTop: enableBackToTop,
+      showsHorizontalScrollIndicator: showScrollbar,
+      onEndReachedThreshold: lowerThreshold,
+      ref: scrollViewRef,
+      stickySectionHeadersEnabled: enableSticky,
+      onScroll: onScroll,
+      onEndReached: onEndReached
+    },
+    layoutProps
+  )
 
-  function setStartOffset () {
-    if (positions.length) {
-      const startIdx = Math.min(
-        Math.max(0, startIndexValueRef.current - getAboveCount()),
-        positions.length - 1
-      )
-      const offset = positions[startIdx].top
-      const data = getVisibleData()
-      setVisibleData(data)
-      // transformYRef.setValue(offset)
-      transformYRef.current = offset
-    } else {
-      // transformYRef.setValue(0)
-       transformYRef.current = 0
-    }
+  if (enhanced) {
+    Object.assign(scrollAdditionalProps, {
+      bounces
+    })
+  }
+  if (refresherEnabled) {
+    Object.assign(scrollAdditionalProps, {
+      refreshing: refreshing
+    })
   }
 
-  const handleLayout = useCallback((e: LayoutChangeEvent) => {
-    const { height: newHeight } = e.nativeEvent.layout
-    setContainerHeight(newHeight)
-  }, [])
-
-  useEffect(() => {
-    const newStart = getStartIndex(scrollTop)
-    const newEnd = newStart + getVisibleCount()
-    startIndexValueRef.current = newStart
-    endIndexValueRef.current = newEnd
-    setStartOffset()
-  }, [scrollTop])
+  const innerProps = useInnerProps(props, scrollAdditionalProps, [
+    'id',
+    'show-scrollbar',
+    'lower-threshold',
+    'refresher-triggered',
+    'refresher-enabled',
+    'bindrefresherrefresh'
+  ], { layoutRef })
 
   return (
-    <ScrollView
-      ref={scrollViewRef}
-      style={[styles.container, { width: width || '100%', height: height || '100%' } as ViewStyle]}
-      bounces={bounces}
-      onScroll={handleScroll}
-      onLayout={handleLayout}
-    >
-      <View style={styles.contentWrapper}>
-        <View style={[styles.placeholder, { height: totalHeight }]} />
-        <View
-          style={[
-            styles.infiniteList,
-            {
-              transform: [{ translateY: transformYRef.current }]
-            }
-          ]}
-        >
-          {visibleData.map((item) => (
-            renderItem({item})
-          ))}
-        </View>
-      </View>
-    </ScrollView>
+    type === 'section'
+      ? <SectionList
+        {...innerProps}
+        style={[{ height, width }, style, layoutStyle]}
+        sections={listData}
+        keyExtractor={(item, index) => item + index}
+        renderItem={renderItem}
+        getItemLayout={getSectionItemLayout}
+        renderSectionHeader={generichash && genericsectionHeader && renderSectionHeader || null}
+        refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
+      />
+      : <FlatList
+        {...innerProps}
+        style={[{ height, width }, style, layoutStyle]}
+        data={listData}
+        keyExtractor={(item, index) => item + index}
+        renderItem={renderItem}
+        getItemLayout={getItemLayout}
+        refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
+      />
   )
 })
 
-const styles = StyleSheet.create({
-  container: {
-    position: 'relative',
-    overflow: 'hidden'
-  },
-  contentWrapper: {
-    position: 'relative',
-    width: '100%'
-  },
-  placeholder: {
-    width: '100%'
-  },
-  infiniteList: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    backfaceVisibility: 'hidden'
-  }
-})
-
-RecycleView.displayName = 'MpxRecycleView'
-
 export default RecycleView

From 1e764fa9594991f72269c2ab4efe016db7efaf3f Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 24 Apr 2025 17:00:38 +0800
Subject: [PATCH 083/126] =?UTF-8?q?chore:=20=E8=B0=83=E8=AF=95getSectionIt?=
 =?UTF-8?q?emLayout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-recycle-view.tsx     | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index d6f6f56c5b..be3be51536 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, useRef, useCallback, useState, useEffect } from 'react'
-import { SectionList, FlatList, RefreshControl } from 'react-native'
+import { SectionList, FlatList, RefreshControl, Text, View} from 'react-native'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef from './useNodesRef'
 import { extendObject, useLayout, useTransformStyle } from './utils'
@@ -32,6 +32,7 @@ const RecycleView = forwardRef((props = {}, ref) => {
     generichash,
     style = {},
     itemHeight = {},
+    headerHeight={},
     sectionHeaderHeight = {},
     listHeaderHeight = {},
     'genericrecycle-item': genericrecycleItem,
@@ -69,6 +70,11 @@ const RecycleView = forwardRef((props = {}, ref) => {
     }
   })
 
+  // setTimeout(() => {
+  //   scrollToLocation({
+  //     itemIndex: 1, sectionIndex: 3
+  //   })
+  // }, 3000)
   useEffect(() => {
     if (refreshing !== refresherTriggered) {
       setRefreshing(!!refresherTriggered)
@@ -99,23 +105,35 @@ const RecycleView = forwardRef((props = {}, ref) => {
       )
   }
 
-  function getHeight ({ data, index, key }) {
+  function getHeight ({ sectionIndex, rowIndex, key }) {
     if (!key) {
       return 0
     }
     if (key.getter) {
-      return key.getter(data[index], index) || 0
+      const item = listData[sectionIndex].data[rowIndex]
+      return key.getter(item, item.originalIndex) || 0
     } else {
       return key.value || 0
     }
   }
 
+  function getHeaderHeight ({ sectionIndex }) {
+    const item = listData[sectionIndex]
+    const { originalIndex = -1 } = item
+    if (originalIndex === -1) return 0
+    if (headerHeight.getter) {
+      return headerHeight.getter(item, originalIndex) || 0
+    } else {
+      return headerHeight.value || 0
+    }
+  }
+
   const renderItem = useCallback(({ item }) => (
     <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>
   ), [])
 
   const renderSectionHeader = useCallback((data) => (
-    <SectionHeader dataInfo={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/>
+    data.section.originalIndex !== -1 ? <SectionHeader dataInfo={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/> : null
   ), [])
 
   // function getSectionItemLayout (data, index) {
@@ -131,8 +149,8 @@ const RecycleView = forwardRef((props = {}, ref) => {
 
   const getSectionItemLayout = sectionListGetItemLayout({
     // The height of the row with rowData at the given sectionIndex and rowIndex
-    getItemHeight: (rowData, sectionIndex, rowIndex) => 400,
-    getSectionHeaderHeight: () => 50
+    getItemHeight: (rowData, sectionIndex, rowIndex) => getHeight({sectionIndex, rowIndex, key: itemHeight  }),
+    getSectionHeaderHeight: (sectionIndex) => getHeaderHeight({ sectionIndex }),
   })
 
   function getItemLayout (data, index) {

From c42ac70a0135f0f4c46dc01c36d18338edc67145 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 25 Apr 2025 11:49:21 +0800
Subject: [PATCH 084/126] =?UTF-8?q?chore:=20=E8=B0=83=E8=AF=95getSectionIt?=
 =?UTF-8?q?emLayout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-recycle-view.tsx     | 65 ++++++++++++-------
 1 file changed, 41 insertions(+), 24 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index be3be51536..1eacfa9ea0 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -1,9 +1,8 @@
-import React, { forwardRef, useRef, useCallback, useState, useEffect } from 'react'
-import { SectionList, FlatList, RefreshControl, Text, View} from 'react-native'
+import React, { forwardRef, useRef, useCallback, useState, useEffect, useMemo } from 'react'
+import { SectionList, FlatList, RefreshControl } from 'react-native'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef from './useNodesRef'
 import { extendObject, useLayout, useTransformStyle } from './utils'
-import sectionListGetItemLayout from './getLayout'
 
 const getGenericComponent = ({ props, ref, generichash, generickey }) => {
   const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
@@ -70,11 +69,6 @@ const RecycleView = forwardRef((props = {}, ref) => {
     }
   })
 
-  // setTimeout(() => {
-  //   scrollToLocation({
-  //     itemIndex: 1, sectionIndex: 3
-  //   })
-  // }, 3000)
   useEffect(() => {
     if (refreshing !== refresherTriggered) {
       setRefreshing(!!refresherTriggered)
@@ -136,22 +130,45 @@ const RecycleView = forwardRef((props = {}, ref) => {
     data.section.originalIndex !== -1 ? <SectionHeader dataInfo={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/> : null
   ), [])
 
-  // function getSectionItemLayout (data, index) {
-  //   // console.log(data, index)
-  //   // // todo 需要计算 sectionHeader、sectionFooter、listHeader、itemHeight
-  //   // // https://github.com/jsoendermann/rn-section-list-get-item-layout/blob/master/index.ts
-  //   // return {
-  //   //   length: getHeight({ data, index, key: itemHeight }),
-  //   //   offset: getHeight({ data, index, key: itemHeight }) * index || 0,
-  //   //   index
-  //   // }
-  // }
-
-  const getSectionItemLayout = sectionListGetItemLayout({
-    // The height of the row with rowData at the given sectionIndex and rowIndex
-    getItemHeight: (rowData, sectionIndex, rowIndex) => getHeight({sectionIndex, rowIndex, key: itemHeight  }),
-    getSectionHeaderHeight: (sectionIndex) => getHeaderHeight({ sectionIndex }),
-  })
+  const itemLayouts = useMemo(() => {
+    const layouts = []
+    let offset = 0
+
+    // 遍历所有 sections
+    listData.forEach((section, sectionIndex) => {
+      // 添加 section header 的位置信息
+      const headerHeight = getHeaderHeight({ sectionIndex })
+      layouts.push({
+        length: headerHeight,
+        offset,
+        index: layouts.length
+      })
+      offset += headerHeight
+
+      // 添加该 section 中所有 items 的位置信息
+      section.data.forEach((item, itemIndex) => {
+        const contenteight = getHeight({ sectionIndex, rowIndex: itemIndex, key: itemHeight })
+        layouts.push({
+          length: contenteight,
+          offset,
+          index: layouts.length
+        })
+        offset += contenteight
+      })
+
+      layouts.push({
+        length: 0,
+        offset,
+        index: layouts.length
+      })
+    })
+
+    return layouts
+  }, [listData])
+
+  const getSectionItemLayout = useCallback((data, index) => {
+    return itemLayouts[index]
+  }, [])
 
   function getItemLayout (data, index) {
     return {

From fb368893660e0a71c71dc282a9348e5165f616fd Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 25 Apr 2025 14:34:26 +0800
Subject: [PATCH 085/126] =?UTF-8?q?chore:=20=E8=B0=83=E8=AF=95getSectionIt?=
 =?UTF-8?q?emLayout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/react/getLayout.ts | 113 ------------------
 .../components/react/mpx-recycle-view.tsx     |  68 +++++++++--
 2 files changed, 57 insertions(+), 124 deletions(-)
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/react/getLayout.ts

diff --git a/packages/webpack-plugin/lib/runtime/components/react/getLayout.ts b/packages/webpack-plugin/lib/runtime/components/react/getLayout.ts
deleted file mode 100644
index 3ac8c3ea61..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/react/getLayout.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-export type SectionListDataProp = Array<{
-  title: string
-  data: any[]
-}>
-
-interface SectionHeader {
-  type: 'SECTION_HEADER'
-}
-
-interface Row {
-  type: 'ROW'
-  index: number
-}
-
-interface SectionFooter {
-  type: 'SECTION_FOOTER'
-}
-
-type ListElement = SectionHeader | Row | SectionFooter
-
-export interface Parameters {
-  getItemHeight: (
-    rowData: any,
-    sectionIndex: number,
-    rowIndex: number,
-  ) => number
-  getSeparatorHeight?: (sectionIndex: number, rowIndex: number) => number
-  getSectionHeaderHeight?: (sectionIndex: number) => number
-  getSectionFooterHeight?: (sectionIndex: number) => number
-  listHeaderHeight?: number | (() => number)
-}
-
-export default ({
-  getItemHeight,
-  getSeparatorHeight = () => 0,
-  getSectionHeaderHeight = () => 0,
-  getSectionFooterHeight = () => 0,
-  listHeaderHeight = 0,
-}: Parameters) => (data: SectionListDataProp, index: number) => {
-  let i = 0
-  let sectionIndex = 0
-  let elementPointer: ListElement = { type: 'SECTION_HEADER' }
-  let offset =
-    typeof listHeaderHeight === 'function'
-      ? listHeaderHeight()
-      : listHeaderHeight
-
-  while (i < index) {
-    switch (elementPointer.type) {
-      case 'SECTION_HEADER': {
-        const sectionData = data[sectionIndex].data
-
-        offset += getSectionHeaderHeight(sectionIndex)
-
-        // If this section is empty, we go right to the footer...
-        if (sectionData.length === 0) {
-          elementPointer = { type: 'SECTION_FOOTER' }
-          // ...otherwise we make elementPointer point at the first row in this section
-        } else {
-          elementPointer = { type: 'ROW', index: 0 }
-        }
-
-        break
-      }
-      case 'ROW': {
-        const sectionData = data[sectionIndex].data
-
-        const rowIndex = elementPointer.index
-
-        offset += getItemHeight(sectionData[rowIndex], sectionIndex, rowIndex)
-        elementPointer.index += 1
-
-        if (rowIndex === sectionData.length - 1) {
-          elementPointer = { type: 'SECTION_FOOTER' }
-        } else {
-          offset += getSeparatorHeight(sectionIndex, rowIndex)
-        }
-
-        break
-      }
-      case 'SECTION_FOOTER': {
-        offset += getSectionFooterHeight(sectionIndex)
-        sectionIndex += 1
-        elementPointer = { type: 'SECTION_HEADER' }
-        break
-      }
-    }
-
-    i += 1
-  }
-
-  let length
-  switch (elementPointer.type) {
-    case 'SECTION_HEADER':
-      length = getSectionHeaderHeight(sectionIndex)
-      break
-    case 'ROW':
-      const rowIndex = elementPointer.index
-      length = getItemHeight(
-        data[sectionIndex].data[rowIndex],
-        sectionIndex,
-        rowIndex,
-      )
-      break
-    case 'SECTION_FOOTER':
-      length = getSectionFooterHeight(sectionIndex)
-      break
-    default:
-      throw new Error('Unknown elementPointer.type')
-  }
-
-  return { length, offset, index }
-}
\ No newline at end of file
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index 1eacfa9ea0..0f96897cd0 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, useRef, useCallback, useState, useEffect, useMemo } from 'react'
-import { SectionList, FlatList, RefreshControl } from 'react-native'
+import { SectionList, FlatList, RefreshControl} from 'react-native'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef from './useNodesRef'
 import { extendObject, useLayout, useTransformStyle } from './utils'
@@ -19,6 +19,47 @@ const SectionHeader = forwardRef((props, ref) => {
   return getGenericComponent({ props, ref, generichash, generickey: genericsectionHeader })
 })
 
+
+const convertToSectionListData = (data) => {
+  const sections = []
+  let currentSection = null
+
+  data.forEach((item, index) => {
+    if (item.isSectionHeader) {
+      // 如果已经存在一个 section，先把它添加到 sections 中
+      if (currentSection) {
+        sections.push(currentSection)
+      }
+      // 创建新的 section
+      currentSection = {
+        headerData: item,
+        data: [],
+        _originalHeaderIndex: index 
+      }
+    } else {
+      // 如果没有当前 section，创建一个默认的
+      if (!currentSection) {
+        currentSection = {
+          headerData: null,
+          data: [],
+          _originalHeaderIndex: -1
+        }
+      }
+      // 将 item 添加到当前 section 的 data 中
+      currentSection.data.push({
+        ...item,
+        _originalItemIndex: index
+      })
+    }
+  })
+
+  // 添加最后一个 section
+  if (currentSection) {
+    sections.push(currentSection)
+  }
+
+  return sections
+}
 const RecycleView = forwardRef((props = {}, ref) => {
   const {
     enhanced = false,
@@ -51,6 +92,11 @@ const RecycleView = forwardRef((props = {}, ref) => {
 
   const [refreshing, setRefreshing] = useState(!!refresherTriggered)
 
+  const sectionListData = useMemo(() => {
+    if (type === 'section') {
+      return convertToSectionListData(listData) || []
+    }
+  }, [listData])
   const scrollViewRef = useRef(null)
   const {
     hasSelfPercent,
@@ -104,19 +150,19 @@ const RecycleView = forwardRef((props = {}, ref) => {
       return 0
     }
     if (key.getter) {
-      const item = listData[sectionIndex].data[rowIndex]
-      return key.getter(item, item.originalIndex) || 0
+      const item = sectionListData[sectionIndex].data[rowIndex]
+      return key.getter(item, item._originalItemIndex) || 0
     } else {
       return key.value || 0
     }
   }
 
   function getHeaderHeight ({ sectionIndex }) {
-    const item = listData[sectionIndex]
-    const { originalIndex = -1 } = item
-    if (originalIndex === -1) return 0
+    const item = sectionListData[sectionIndex]
+    const { headerData, _originalHeaderIndex } = item
+    if (!headerData || _originalHeaderIndex === -1) return 0
     if (headerHeight.getter) {
-      return headerHeight.getter(item, originalIndex) || 0
+      return headerHeight.getter(item, _originalHeaderIndex) || 0
     } else {
       return headerHeight.value || 0
     }
@@ -127,7 +173,7 @@ const RecycleView = forwardRef((props = {}, ref) => {
   ), [])
 
   const renderSectionHeader = useCallback((data) => (
-    data.section.originalIndex !== -1 ? <SectionHeader dataInfo={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/> : null
+    !data.section.headerData || data.section._originalHeaderIndex === -1 ? null : <SectionHeader dataInfo={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/>
   ), [])
 
   const itemLayouts = useMemo(() => {
@@ -135,7 +181,7 @@ const RecycleView = forwardRef((props = {}, ref) => {
     let offset = 0
 
     // 遍历所有 sections
-    listData.forEach((section, sectionIndex) => {
+    sectionListData.forEach((section, sectionIndex) => {
       // 添加 section header 的位置信息
       const headerHeight = getHeaderHeight({ sectionIndex })
       layouts.push({
@@ -164,7 +210,7 @@ const RecycleView = forwardRef((props = {}, ref) => {
     })
 
     return layouts
-  }, [listData])
+  }, [sectionListData])
 
   const getSectionItemLayout = useCallback((data, index) => {
     return itemLayouts[index]
@@ -242,7 +288,7 @@ const RecycleView = forwardRef((props = {}, ref) => {
       ? <SectionList
         {...innerProps}
         style={[{ height, width }, style, layoutStyle]}
-        sections={listData}
+        sections={sectionListData}
         keyExtractor={(item, index) => item + index}
         renderItem={renderItem}
         getItemLayout={getSectionItemLayout}

From af7d0b6bcfe6ed7f9548ff8b66e668b8ab81da22 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 25 Apr 2025 14:55:49 +0800
Subject: [PATCH 086/126] =?UTF-8?q?chore:=20=E5=85=BC=E5=AE=B9flatList?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-recycle-view.tsx     | 61 +++++++++++--------
 1 file changed, 36 insertions(+), 25 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index 0f96897cd0..3fa2948bc8 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -92,9 +92,11 @@ const RecycleView = forwardRef((props = {}, ref) => {
 
   const [refreshing, setRefreshing] = useState(!!refresherTriggered)
 
-  const sectionListData = useMemo(() => {
+  const convertedListData = useMemo(() => {
     if (type === 'section') {
       return convertToSectionListData(listData) || []
+    } else {
+      return listData || []
     }
   }, [listData])
   const scrollViewRef = useRef(null)
@@ -145,20 +147,26 @@ const RecycleView = forwardRef((props = {}, ref) => {
       )
   }
 
-  function getHeight ({ sectionIndex, rowIndex, key }) {
-    if (!key) {
+  function getHeight ({ sectionIndex, rowIndex }) {
+    if (!itemHeight) {
       return 0
     }
-    if (key.getter) {
-      const item = sectionListData[sectionIndex].data[rowIndex]
-      return key.getter(item, item._originalItemIndex) || 0
+    if (itemHeight.getter) {
+      if (type === 'section') {
+        const item = convertedListData[sectionIndex].data[rowIndex]
+        return itemHeight.getter(item, item._originalItemIndex) || 0
+      } else {
+        const item = convertedListData[rowIndex]
+        return itemHeight.getter(item, rowIndex) || 0
+      }
+    
     } else {
-      return key.value || 0
+      return itemHeight.value || 0
     }
   }
 
   function getHeaderHeight ({ sectionIndex }) {
-    const item = sectionListData[sectionIndex]
+    const item = convertedListData[sectionIndex]
     const { headerData, _originalHeaderIndex } = item
     if (!headerData || _originalHeaderIndex === -1) return 0
     if (headerHeight.getter) {
@@ -180,8 +188,9 @@ const RecycleView = forwardRef((props = {}, ref) => {
     const layouts = []
     let offset = 0
 
-    // 遍历所有 sections
-    sectionListData.forEach((section, sectionIndex) => {
+    if (type === 'section') { 
+      // 遍历所有 sections
+    convertedListData.forEach((section, sectionIndex) => {
       // 添加 section header 的位置信息
       const headerHeight = getHeaderHeight({ sectionIndex })
       layouts.push({
@@ -193,7 +202,7 @@ const RecycleView = forwardRef((props = {}, ref) => {
 
       // 添加该 section 中所有 items 的位置信息
       section.data.forEach((item, itemIndex) => {
-        const contenteight = getHeight({ sectionIndex, rowIndex: itemIndex, key: itemHeight })
+        const contenteight = getHeight({ sectionIndex, rowIndex: itemIndex })
         layouts.push({
           length: contenteight,
           offset,
@@ -208,22 +217,24 @@ const RecycleView = forwardRef((props = {}, ref) => {
         index: layouts.length
       })
     })
-
+    } else {
+      convertedListData.forEach((item, index) => {
+        const itemHeightValue = getHeight({ sectionIndex: 0, rowIndex: index })
+        layouts.push({
+          length: itemHeightValue,
+          offset,
+          index: layouts.length
+        })
+        offset += itemHeightValue
+      })
+    }
     return layouts
-  }, [sectionListData])
+  }, [convertedListData])
 
-  const getSectionItemLayout = useCallback((data, index) => {
+  const getItemLayout = useCallback((data, index) => {
     return itemLayouts[index]
   }, [])
 
-  function getItemLayout (data, index) {
-    return {
-      length: getHeight({ data, index, key: itemHeight }),
-      offset: getHeight({ data, index, key: listHeaderHeight }) + getHeight({ data, index, key: itemHeight }) * index || 0,
-      index
-    }
-  }
-
   function scrollToLocation ({
     itemIndex,
     sectionIndex,
@@ -288,17 +299,17 @@ const RecycleView = forwardRef((props = {}, ref) => {
       ? <SectionList
         {...innerProps}
         style={[{ height, width }, style, layoutStyle]}
-        sections={sectionListData}
+        sections={convertedListData}
         keyExtractor={(item, index) => item + index}
         renderItem={renderItem}
-        getItemLayout={getSectionItemLayout}
+        getItemLayout={getItemLayout}
         renderSectionHeader={generichash && genericsectionHeader && renderSectionHeader || null}
         refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
       />
       : <FlatList
         {...innerProps}
         style={[{ height, width }, style, layoutStyle]}
-        data={listData}
+        data={convertedListData}
         keyExtractor={(item, index) => item + index}
         renderItem={renderItem}
         getItemLayout={getItemLayout}

From 1e2f722604464bb4a57f1e7fcecdc6a9f6396752 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 25 Apr 2025 15:12:06 +0800
Subject: [PATCH 087/126] =?UTF-8?q?chore:=20=E6=94=AF=E6=8C=81scrollToInde?=
 =?UTF-8?q?x?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-recycle-view.tsx     | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index 3fa2948bc8..e9fd1e9d4e 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -111,8 +111,6 @@ const RecycleView = forwardRef((props = {}, ref) => {
   useNodesRef(props, ref, scrollViewRef, {
     style,
     node: {
-      scrollToLocation,
-      scrollToOffset,
       scrollToIndex
     }
   })
@@ -235,29 +233,28 @@ const RecycleView = forwardRef((props = {}, ref) => {
     return itemLayouts[index]
   }, [])
 
-  function scrollToLocation ({
-    itemIndex,
-    sectionIndex,
-    animated,
-    viewOffset = 0,
-    viewPosition = 0
-  }) {
-    if (scrollViewRef.current) {
-      scrollViewRef.current.scrollToLocation?.({ itemIndex, sectionIndex, animated, viewOffset, viewPosition })
-    }
-  }
-
-  function scrollToOffset ({ offset, animated }) {
-    if (scrollViewRef.current) {
-      scrollViewRef.current.scrollToOffset({ offset, animated })
-    }
-  }
-
   function scrollToIndex ({ index, animated, viewOffset = 0, viewPosition = 0 }) {
     if (scrollViewRef.current) {
-      scrollViewRef.current.scrollToIndex?.({ index, animated, viewOffset, viewPosition })
+      if (type === 'section') {
+        const sectionIndex = convertedListData.findIndex(section => section._originalHeaderIndex === index)
+        if (sectionIndex !== -1) {
+          scrollViewRef.current.scrollToLocation?.({ itemIndex: 0, sectionIndex, animated, viewOffset, viewPosition })
+        } else {
+          for (let i = 0; i < convertedListData.length; i++) {
+            const section = convertedListData[i]
+            const itemIndex = section.data.findIndex(item => item._originalItemIndex === index)
+            if (itemIndex !== -1) {
+              scrollViewRef.current.scrollToLocation?.({ itemIndex, sectionIndex: i, animated, viewOffset, viewPosition })
+              break
+            }
+          }
+        }
+      } else {
+        scrollViewRef.current.scrollToIndex?.({ index, animated, viewOffset, viewPosition })
+      }
     }
   }
+
   const scrollAdditionalProps = extendObject(
     {
       alwaysBounceVertical: false,

From 25263d71aef6bad72e8b7ce7be7a6e4ff67bb358 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 25 Apr 2025 20:06:57 +0800
Subject: [PATCH 088/126] =?UTF-8?q?chore:=20=E6=94=AF=E6=8C=81=E5=8F=8D?=
 =?UTF-8?q?=E5=90=91=E7=B4=A2=E5=BC=95=E6=98=A0=E5=B0=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-recycle-view.tsx     | 388 ++++++++++++------
 1 file changed, 253 insertions(+), 135 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index e9fd1e9d4e..348263be86 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -1,66 +1,100 @@
-import React, { forwardRef, useRef, useCallback, useState, useEffect, useMemo } from 'react'
-import { SectionList, FlatList, RefreshControl} from 'react-native'
+import React, { forwardRef, useRef, useCallback, useState, useEffect, useMemo, ForwardedRef, ReactElement } from 'react'
+import { SectionList, FlatList, RefreshControl, NativeSyntheticEvent, NativeScrollEvent } from 'react-native'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef from './useNodesRef'
 import { extendObject, useLayout, useTransformStyle } from './utils'
 
-const getGenericComponent = ({ props, ref, generichash, generickey }) => {
+interface GenericComponentProps {
+  props: Record<string, any>;
+  ref: ForwardedRef<any>;
+  generichash: string;
+  generickey: string;
+}
+
+interface ItemProps {
+  generichash: string;
+  genericrecycleItem: string;
+  itemData: any;
+}
+
+interface SectionHeaderProps {
+  generichash: string;
+  genericsectionHeader: string;
+  itemData: any;
+}
+
+interface ListItem {
+  isSectionHeader?: boolean;
+  _originalItemIndex?: number;
+  [key: string]: any;
+}
+
+interface Section {
+  headerData: ListItem | null;
+  data: ListItem[];
+  hasSectionHeader?: boolean;
+  _originalItemIndex?: number;
+}
+
+interface ItemHeightType {
+  value?: number;
+  getter?: (item: any, index: number) => number;
+}
+
+interface RecycleViewProps {
+  enhanced?: boolean;
+  bounces?: boolean;
+  scrollEventThrottle?: number;
+  height?: number | string;
+  width?: number | string;
+  listData?: ListItem[];
+  type?: 'normal' | 'section';
+  generichash?: string;
+  style?: Record<string, any>;
+  itemHeight?: ItemHeightType;
+  sectionHeaderHeight?: ItemHeightType;
+  'genericrecycle-item'?: string;
+  'genericsection-header'?: string;
+  'enable-var'?: boolean;
+  'external-var-context'?: any;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
+  'enable-sticky'?: boolean;
+  'enable-back-to-top'?: boolean;
+  'lower-threshold'?: number;
+  'refresher-enabled'?: boolean;
+  'show-scrollbar'?: boolean;
+  'refresher-triggered'?: boolean;
+  bindrefresherrefresh?: (event: any) => void;
+  bindscrolltolower?: (event: any) => void;
+  bindscroll?: (event: any) => void;
+  [key: string]: any;
+}
+
+interface ScrollPositionParams {
+  index: number;
+  animated?: boolean;
+  viewOffset?: number;
+  viewPosition?: number;
+}
+
+const getGenericComponent = ({ props, ref, generichash, generickey }: GenericComponentProps): ReactElement => {
   const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
   return <GenericComponent ref={ref} {...props}/>
 }
 
-const Item = forwardRef((props, ref) => {
+const Item = forwardRef<any, ItemProps>((props, ref) => {
   const { generichash, genericrecycleItem } = props
   return getGenericComponent({ props, ref, generichash, generickey: genericrecycleItem })
 })
 
-const SectionHeader = forwardRef((props, ref) => {
+const SectionHeader = forwardRef<any, SectionHeaderProps>((props, ref) => {
   const { generichash, genericsectionHeader } = props
   return getGenericComponent({ props, ref, generichash, generickey: genericsectionHeader })
 })
 
-
-const convertToSectionListData = (data) => {
-  const sections = []
-  let currentSection = null
-
-  data.forEach((item, index) => {
-    if (item.isSectionHeader) {
-      // 如果已经存在一个 section，先把它添加到 sections 中
-      if (currentSection) {
-        sections.push(currentSection)
-      }
-      // 创建新的 section
-      currentSection = {
-        headerData: item,
-        data: [],
-        _originalHeaderIndex: index 
-      }
-    } else {
-      // 如果没有当前 section，创建一个默认的
-      if (!currentSection) {
-        currentSection = {
-          headerData: null,
-          data: [],
-          _originalHeaderIndex: -1
-        }
-      }
-      // 将 item 添加到当前 section 的 data 中
-      currentSection.data.push({
-        ...item,
-        _originalItemIndex: index
-      })
-    }
-  })
-
-  // 添加最后一个 section
-  if (currentSection) {
-    sections.push(currentSection)
-  }
-
-  return sections
-}
-const RecycleView = forwardRef((props = {}, ref) => {
+const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
   const {
     enhanced = false,
     bounces = true,
@@ -72,9 +106,7 @@ const RecycleView = forwardRef((props = {}, ref) => {
     generichash,
     style = {},
     itemHeight = {},
-    headerHeight={},
     sectionHeaderHeight = {},
-    listHeaderHeight = {},
     'genericrecycle-item': genericrecycleItem,
     'genericsection-header': genericsectionHeader,
     'enable-var': enableVar,
@@ -92,14 +124,12 @@ const RecycleView = forwardRef((props = {}, ref) => {
 
   const [refreshing, setRefreshing] = useState(!!refresherTriggered)
 
-  const convertedListData = useMemo(() => {
-    if (type === 'section') {
-      return convertToSectionListData(listData) || []
-    } else {
-      return listData || []
-    }
-  }, [listData])
-  const scrollViewRef = useRef(null)
+  const scrollViewRef = useRef<any>(null)
+
+  const indexMap = useRef<{ [key: string]: string | number }>({})
+
+  const reverseIndexMap = useRef<{ [key: string]: number }>({})
+
   const {
     hasSelfPercent,
     setWidth,
@@ -108,20 +138,13 @@ const RecycleView = forwardRef((props = {}, ref) => {
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef })
 
-  useNodesRef(props, ref, scrollViewRef, {
-    style,
-    node: {
-      scrollToIndex
-    }
-  })
-
   useEffect(() => {
     if (refreshing !== refresherTriggered) {
       setRefreshing(!!refresherTriggered)
     }
   }, [refresherTriggered])
 
-  function onRefresh () {
+  const onRefresh = () => {
     const { bindrefresherrefresh } = props
     bindrefresherrefresh &&
       bindrefresherrefresh(
@@ -129,7 +152,7 @@ const RecycleView = forwardRef((props = {}, ref) => {
       )
   }
 
-  function onEndReached () {
+  const onEndReached = () => {
     const { bindscrolltolower } = props
     bindscrolltolower &&
       bindscrolltolower(
@@ -137,7 +160,7 @@ const RecycleView = forwardRef((props = {}, ref) => {
       )
   }
 
-  function onScroll (event) {
+  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     const { bindscroll } = props
     bindscroll &&
       bindscroll(
@@ -145,79 +168,188 @@ const RecycleView = forwardRef((props = {}, ref) => {
       )
   }
 
-  function getHeight ({ sectionIndex, rowIndex }) {
+  // 通过sectionIndex和rowIndex获取原始索引
+  const getOriginalIndex = (sectionIndex: number, rowIndex: number | 'header'): number => {
+    const key = `${sectionIndex}_${rowIndex}`
+    return reverseIndexMap.current[key] ?? -1 // 如果找不到，返回-1
+  }
+
+  const scrollToIndex = ({ index, animated, viewOffset = 0, viewPosition = 0 }: ScrollPositionParams) => {
+    if (scrollViewRef.current) {
+      if (type === 'section') {
+        // 通过索引映射表快速定位位置
+        const position = indexMap.current[index]
+        const [sectionIndex, itemIndex] = (position as string).split('_')
+        scrollViewRef.current.scrollToLocation?.({
+          itemIndex: Number(itemIndex) || 0,
+          sectionIndex: Number(sectionIndex) || 0,
+          animated,
+          viewOffset,
+          viewPosition
+        })
+      } else {
+        scrollViewRef.current.scrollToIndex?.({ index, animated, viewOffset, viewPosition })
+      }
+    }
+  }
+
+  const getItemHeight = ({ sectionIndex, rowIndex }: { sectionIndex: number, rowIndex: number }) => {
     if (!itemHeight) {
       return 0
     }
-    if (itemHeight.getter) {
+    if ((itemHeight as ItemHeightType).getter) {
       if (type === 'section') {
         const item = convertedListData[sectionIndex].data[rowIndex]
-        return itemHeight.getter(item, item._originalItemIndex) || 0
+        // 使用getOriginalIndex获取原始索引
+        const originalIndex = getOriginalIndex(sectionIndex, rowIndex)
+        return (itemHeight as ItemHeightType).getter?.(item, originalIndex) || 0
       } else {
         const item = convertedListData[rowIndex]
-        return itemHeight.getter(item, rowIndex) || 0
+        return (itemHeight as ItemHeightType).getter?.(item, rowIndex) || 0
       }
-    
     } else {
-      return itemHeight.value || 0
+      return (itemHeight as ItemHeightType).value || 0
     }
   }
 
-  function getHeaderHeight ({ sectionIndex }) {
+  const getSectionHeaderHeight = ({ sectionIndex }: { sectionIndex: number }) => {
     const item = convertedListData[sectionIndex]
-    const { headerData, _originalHeaderIndex } = item
-    if (!headerData || _originalHeaderIndex === -1) return 0
-    if (headerHeight.getter) {
-      return headerHeight.getter(item, _originalHeaderIndex) || 0
+    const { headerData, hasSectionHeader } = item
+    // 使用getOriginalIndex获取原始索引
+    const originalIndex = getOriginalIndex(sectionIndex, 'header')
+    if (!headerData || !hasSectionHeader) return 0
+    if ((sectionHeaderHeight as ItemHeightType).getter) {
+      return (sectionHeaderHeight as ItemHeightType).getter?.(item, originalIndex) || 0
     } else {
-      return headerHeight.value || 0
+      return (sectionHeaderHeight as ItemHeightType).value || 0
     }
   }
 
-  const renderItem = useCallback(({ item }) => (
-    <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>
+  const renderItem = useCallback(({ item }: { item: any }) => (
+    <Item itemData={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>
   ), [])
 
-  const renderSectionHeader = useCallback((data) => (
-    !data.section.headerData || data.section._originalHeaderIndex === -1 ? null : <SectionHeader dataInfo={data.section} generichash={generichash} genericsectionHeader={genericsectionHeader}/>
-  ), [])
+  const renderSectionHeader = useCallback((data: { section: Section }) => (
+    !data.section.headerData || !data.section.hasSectionHeader ? null : <SectionHeader itemData={data.section.headerData} generichash={generichash} genericsectionHeader={genericsectionHeader}/>
+  ), [generichash, genericsectionHeader])
+
+  const convertToSectionListData = useCallback((data: ListItem[]): Section[] => {
+    const sections: Section[] = []
+    let currentSection: Section | null = null
+    // 清空之前的索引映射
+    indexMap.current = {}
+    // 清空反向索引映射
+    reverseIndexMap.current = {}
+    // 标记是否已创建了默认section (无header的section)
+    let hasDefaultSection = false
+
+    data.forEach((item: ListItem, index: number) => {
+      if (item.isSectionHeader) {
+      // 如果已经存在一个 section，先把它添加到 sections 中
+        if (currentSection) {
+          sections.push(currentSection)
+        }
+        // 创建新的 section
+        currentSection = {
+          headerData: item,
+          data: [],
+          hasSectionHeader: true,
+          _originalItemIndex: index
+        }
+        // 为 section header 添加索引映射
+        const sectionIndex = sections.length
+        indexMap.current[index] = `${sectionIndex}_header`
+        // 添加反向索引映射
+        reverseIndexMap.current[`${sectionIndex}_header`] = index
+      } else {
+      // 如果没有当前 section，创建一个默认的
+        if (!currentSection) {
+          // 创建默认section (无header的section)
+          currentSection = {
+            headerData: null,
+            data: [],
+            hasSectionHeader: false,
+            _originalItemIndex: -1
+          }
+          // 标记已创建默认section
+          hasDefaultSection = true
+        }
+        // 将 item 添加到当前 section 的 data 中
+        const itemIndex = currentSection.data.length
+        currentSection.data.push({
+          ...item,
+          _originalItemIndex: index
+        })
+        let sectionIndex
+        // 为 item 添加索引映射 - 存储格式为: "sectionIndex_itemIndex"
+        if (!currentSection.hasSectionHeader && sections.length === 0) {
+          // 在默认section中(第一个且无header)
+          sectionIndex = 0
+          indexMap.current[index] = `${sectionIndex}_${itemIndex}`
+        } else {
+          // 在普通section中
+          sectionIndex = sections.length
+          indexMap.current[index] = `${sectionIndex}_${itemIndex}`
+        }
+        // 添加反向索引映射
+        reverseIndexMap.current[`${sectionIndex}_${itemIndex}`] = index
+      }
+    })
+
+    // 添加最后一个 section
+    if (currentSection) {
+      sections.push(currentSection)
+    }
+
+    return sections
+  }, [])
+
+  const convertedListData = useMemo(() => {
+    if (type === 'section') {
+      return convertToSectionListData(listData || []) || []
+    } else {
+      return listData
+    }
+  }, [listData])
 
   const itemLayouts = useMemo(() => {
-    const layouts = []
+    const layouts: Array<{ length: number, offset: number, index: number }> = []
     let offset = 0
 
-    if (type === 'section') { 
+    if (type === 'section') {
       // 遍历所有 sections
-    convertedListData.forEach((section, sectionIndex) => {
+      convertedListData.forEach((section: Section, sectionIndex: number) => {
       // 添加 section header 的位置信息
-      const headerHeight = getHeaderHeight({ sectionIndex })
-      layouts.push({
-        length: headerHeight,
-        offset,
-        index: layouts.length
-      })
-      offset += headerHeight
-
-      // 添加该 section 中所有 items 的位置信息
-      section.data.forEach((item, itemIndex) => {
-        const contenteight = getHeight({ sectionIndex, rowIndex: itemIndex })
+        const headerHeight = getSectionHeaderHeight({ sectionIndex })
         layouts.push({
-          length: contenteight,
+          length: headerHeight,
           offset,
           index: layouts.length
         })
-        offset += contenteight
-      })
+        offset += headerHeight
+
+        // 添加该 section 中所有 items 的位置信息
+        section.data.forEach((item: ListItem, itemIndex: number) => {
+          const contenteight = getItemHeight({ sectionIndex, rowIndex: itemIndex })
+          layouts.push({
+            length: contenteight,
+            offset,
+            index: layouts.length
+          })
+          offset += contenteight
+        })
 
-      layouts.push({
-        length: 0,
-        offset,
-        index: layouts.length
+        // 添加该 section 尾部位置信息
+        // 因为即使 sectionList 没传 renderSectionFooter，getItemLayout 中的 index 的计算也会包含尾部节点
+        layouts.push({
+          length: 0,
+          offset,
+          index: layouts.length
+        })
       })
-    })
     } else {
-      convertedListData.forEach((item, index) => {
-        const itemHeightValue = getHeight({ sectionIndex: 0, rowIndex: index })
+      convertedListData.forEach((item: ListItem, index: number) => {
+        const itemHeightValue = getItemHeight({ sectionIndex: 0, rowIndex: index })
         layouts.push({
           length: itemHeightValue,
           offset,
@@ -229,31 +361,9 @@ const RecycleView = forwardRef((props = {}, ref) => {
     return layouts
   }, [convertedListData])
 
-  const getItemLayout = useCallback((data, index) => {
+  const getItemLayout = useCallback((data: any, index: number) => {
     return itemLayouts[index]
-  }, [])
-
-  function scrollToIndex ({ index, animated, viewOffset = 0, viewPosition = 0 }) {
-    if (scrollViewRef.current) {
-      if (type === 'section') {
-        const sectionIndex = convertedListData.findIndex(section => section._originalHeaderIndex === index)
-        if (sectionIndex !== -1) {
-          scrollViewRef.current.scrollToLocation?.({ itemIndex: 0, sectionIndex, animated, viewOffset, viewPosition })
-        } else {
-          for (let i = 0; i < convertedListData.length; i++) {
-            const section = convertedListData[i]
-            const itemIndex = section.data.findIndex(item => item._originalItemIndex === index)
-            if (itemIndex !== -1) {
-              scrollViewRef.current.scrollToLocation?.({ itemIndex, sectionIndex: i, animated, viewOffset, viewPosition })
-              break
-            }
-          }
-        }
-      } else {
-        scrollViewRef.current.scrollToIndex?.({ index, animated, viewOffset, viewPosition })
-      }
-    }
-  }
+  }, [itemLayouts])
 
   const scrollAdditionalProps = extendObject(
     {
@@ -264,6 +374,7 @@ const RecycleView = forwardRef((props = {}, ref) => {
       showsHorizontalScrollIndicator: showScrollbar,
       onEndReachedThreshold: lowerThreshold,
       ref: scrollViewRef,
+      bounces: false,
       stickySectionHeadersEnabled: enableSticky,
       onScroll: onScroll,
       onEndReached: onEndReached
@@ -282,6 +393,13 @@ const RecycleView = forwardRef((props = {}, ref) => {
     })
   }
 
+  useNodesRef(props, ref, scrollViewRef, {
+    style,
+    node: {
+      scrollToIndex
+    }
+  })
+
   const innerProps = useInnerProps(props, scrollAdditionalProps, [
     'id',
     'show-scrollbar',
@@ -294,17 +412,17 @@ const RecycleView = forwardRef((props = {}, ref) => {
   return (
     type === 'section'
       ? <SectionList
-        {...innerProps}
+        {...innerProps as any}
         style={[{ height, width }, style, layoutStyle]}
         sections={convertedListData}
         keyExtractor={(item, index) => item + index}
         renderItem={renderItem}
         getItemLayout={getItemLayout}
-        renderSectionHeader={generichash && genericsectionHeader && renderSectionHeader || null}
+        renderSectionHeader={(generichash && genericsectionHeader && renderSectionHeader) || null}
         refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
       />
       : <FlatList
-        {...innerProps}
+        {...innerProps as any}
         style={[{ height, width }, style, layoutStyle]}
         data={convertedListData}
         keyExtractor={(item, index) => item + index}

From cbd6b1b43723826b3088ac3e600593f48c0474b7 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Sun, 27 Apr 2025 16:25:51 +0800
Subject: [PATCH 089/126] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=B0=8F?=
 =?UTF-8?q?=E7=A8=8B=E5=BA=8Frecycle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/wx/mpx-recycle-view.mpx        | 115 ++++++++++++------
 1 file changed, 80 insertions(+), 35 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index 6c7c04f579..ae472bcf0c 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -14,19 +14,17 @@
     bindscroll="onScroll"
     bindrefresherrefresh="onRefresh"
   >
-    <!-- list header -->
-    <block wx:if="{{mpxGenericListHeader}}">
-      <list-header dataInfo="{{listData}}" />
-    </block>
-
-    <block wx:for="{{listData}}" wx:key="index">
+    <block wx:for="{{convertedListData}}" wx:key="index">
       <!-- section header -->
-      <block wx:if="{{mpxGenericSectionHeader}}">
+      <block wx:if="{{type === 'section'}}">
         <sticky-section>
-          <sticky-header wx:if="{{enableSticky}}">
-            <section-header dataInfo="{{item}}"></section-header>
+          <sticky-header wx:if="{{enableSticky && item.hasSectionHeader}}">
+            <section-header itemData="{{item.headerData}}"></section-header>
           </sticky-header>
-          <section-header wx:else dataInfo="{{item}}"></section-header>
+          <section-header
+            wx:if="{{!enableSticky && item.hasSectionHeader}}"
+            itemData="{{item}}"
+          ></section-header>
 
           <list-view>
             <block
@@ -36,21 +34,15 @@
               wx:key="subIndex"
             >
               <!-- section items -->
-              <recycle-item currentItem="{{subItem}}"></recycle-item>
-            </block>
-
-            <!-- section footer -->
-            <block wx:if="{{mpxGenericSectionFooter}}">
-              <section-footer dataInfo="{{item}}"></section-footer>
+              <recycle-item itemData="{{subItem}}"></recycle-item>
             </block>
           </list-view>
         </sticky-section>
       </block>
-    </block>
-
-    <!-- list footer -->
-    <block wx:if="{{mpxGenericListFooter}}">
-      <list-footer data="{{listData}}" />
+      <block wx:if="{{mpxGenericRecycleItem}}">
+        <!-- section items -->
+        <recycle-item itemData="{{item}}"></recycle-item>
+      </block>
     </block>
   </scroll-view>
 </template>
@@ -72,7 +64,7 @@
         type: Array,
         value: []
       },
-      'a:recycleItem': {
+      type: {
         type: String,
         value: ''
       },
@@ -107,11 +99,26 @@
         value: false
       }
     },
+    data: {
+      convertedListData: []
+    },
     computed: {
       scrollViewStyle() {
         return `height: ${this.height}px;width: ${this.width}px`
       }
     },
+    watch: {
+      listData: {
+        handler(newVal) {
+          if (this.type === 'section') {
+            this.convertedListData = this.convertToSectionListData(newVal)
+          } else {
+            this.convertedListData = newVal
+          }
+        },
+        immediate: true
+      }
+    },
     methods: {
       onScroll(e) {
         this.triggerEvent('scroll', e.detail)
@@ -119,13 +126,60 @@
       onRefresh(e) {
         this.triggerEvent('refresh', e.detail)
       },
-      scrollToOffset({ offset, animated}) {
-        this.$refs.recycleViewRef.node().exec(res => {
-           res[0].node.scrollTo({
+      scrollToOffset({ offset, animated }) {
+        this.$refs.recycleViewRef.node().exec((res) => {
+          res[0].node.scrollTo({
             top: offset,
             animated
-           })
+          })
         })
+      },
+      convertToSectionListData(data) {
+        const sections = []
+        let currentSection = null
+        // 标记是否已创建了默认section (无header的section)
+        let hasDefaultSection = false
+
+        data.forEach((item, index) => {
+          if (item.isSectionHeader) {
+            // 如果已经存在一个 section，先把它添加到 sections 中
+            if (currentSection) {
+              sections.push(currentSection)
+            }
+            // 创建新的 section
+            currentSection = {
+              headerData: item,
+              data: [],
+              hasSectionHeader: true
+            }
+          } else {
+            // 如果没有当前 section，创建一个默认的
+            if (!currentSection) {
+              // 创建默认section (无header的section)
+              currentSection = {
+                headerData: null,
+                data: [],
+                hasSectionHeader: false,
+                _originalItemIndex: -1
+              }
+              // 标记已创建默认section
+              hasDefaultSection = true
+            }
+            // 将 item 添加到当前 section 的 data 中
+            const itemIndex = currentSection.data.length
+            currentSection.data.push({
+              ...item,
+              _originalItemIndex: index
+            })
+          }
+        })
+
+        // 添加最后一个 section
+        if (currentSection) {
+          sections.push(currentSection)
+        }
+
+        return sections
       }
     }
   })
@@ -138,17 +192,8 @@
       "recycle-item": {
         "default": "./mpx-recycle-item-default.mpx"
       },
-      "list-header": {
-        "default": "./mpx-list-header-default.mpx"
-      },
-      "list-footer": {
-        "default": "./mpx-list-footer-default.mpx"
-      },
       "section-header": {
         "default": "./mpx-section-header-default.mpx"
-      },
-      "section-footer": {
-        "default": "./mpx-section-footer-default.mpx"
       }
     }
   }

From cd5100a9c69382d2b917ddf30e9bbbdf28029b3b Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Sun, 27 Apr 2025 20:19:47 +0800
Subject: [PATCH 090/126] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=B0=8F?=
 =?UTF-8?q?=E7=A8=8B=E5=BA=8Frecycle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/wx/mpx-list-footer-default.mpx |  21 ----
 .../components/wx/mpx-list-header-default.mpx |  21 ----
 .../components/wx/mpx-recycle-view.mpx        |  99 +++++++++------
 .../wx/mpx-section-footer-default.mpx         |  21 ----
 rn-event-system.md                            | 119 ++++++++++++++++++
 5 files changed, 179 insertions(+), 102 deletions(-)
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-list-footer-default.mpx
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-section-footer-default.mpx
 create mode 100644 rn-event-system.md

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-footer-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-footer-default.mpx
deleted file mode 100644
index 5cf26e0eb4..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-footer-default.mpx
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <view class="list-item">
-    <view class="item-content">recycle-item-default</view>
-  </view>
-</template>
-
-<style lang="stylus" scoped>
-.list-item
-  margin 4px 16px
-  padding 16px
-  background #fff
-  border-radius 8px
-  box-shadow 0 2px 4px rgba(0,0,0,0.1)
-
-.item-content
-  display flex
-  flex-direction column
-  font-size 14px
-  color #666
-
-</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
deleted file mode 100644
index 5cf26e0eb4..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <view class="list-item">
-    <view class="item-content">recycle-item-default</view>
-  </view>
-</template>
-
-<style lang="stylus" scoped>
-.list-item
-  margin 4px 16px
-  padding 16px
-  background #fff
-  border-radius 8px
-  box-shadow 0 2px 4px rgba(0,0,0,0.1)
-
-.item-content
-  display flex
-  flex-direction column
-  font-size 14px
-  color #666
-
-</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index ae472bcf0c..2ea8c7dd67 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -13,35 +13,35 @@
     refresher-triggered="{{refresherTriggered}}"
     bindscroll="onScroll"
     bindrefresherrefresh="onRefresh"
+    scroll-into-view="{{scrollIntoViewId}}"
+    scroll-into-view-alignment="{{viewPosition}}"
   >
     <block wx:for="{{convertedListData}}" wx:key="index">
-      <!-- section header -->
       <block wx:if="{{type === 'section'}}">
         <sticky-section>
-          <sticky-header wx:if="{{enableSticky && item.hasSectionHeader}}">
-            <section-header itemData="{{item.headerData}}"></section-header>
-          </sticky-header>
-          <section-header
-            wx:if="{{!enableSticky && item.hasSectionHeader}}"
-            itemData="{{item}}"
-          ></section-header>
+          <!-- section header -->
+          <block wx:if="{{item.hasSectionHeader && mpxGenericSectionHeader}}">
+            <sticky-header wx:if="{{enableSticky}}">
+              <section-header itemData="{{item.headerData}}" id="{{item._domId}}"></section-header>
+            </sticky-header>
+            <section-header wx:else id="{{item._domId}}" itemData="{{item}}"></section-header>
+          </block>
 
-          <list-view>
+          <list-view wx:if="{{mpxGenericRecycleItem}}">
             <block
-              wx:if="{{mpxGenericRecycleItem}}"
               wx:for="{{item.data}}"
               wx:for-item="subItem"
               wx:key="subIndex"
             >
               <!-- section items -->
-              <recycle-item itemData="{{subItem}}"></recycle-item>
+              <recycle-item itemData="{{subItem.itemData}}" id="{{subItem._domId}}"></recycle-item>
             </block>
           </list-view>
         </sticky-section>
       </block>
-      <block wx:if="{{mpxGenericRecycleItem}}">
-        <!-- section items -->
-        <recycle-item itemData="{{item}}"></recycle-item>
+      <block wx:if="{{type !== 'section' && (mpxGenericRecycleItem || mpxGenericSectionHeader)}}">
+        <section-header wx:if="{{item.itemData && item.itemData.isSectionHeader}}" id="{{item._domId}}" itemData="{{item.itemData}}"></section-header>
+        <recycle-item wx:else itemData="{{item.itemData}}" id="{{item._domId}}"></recycle-item>
       </block>
     </block>
   </scroll-view>
@@ -70,9 +70,6 @@
       },
       mpxGenericRecycleItem: String,
       mpxGenericSectionHeader: String,
-      mpxGenericSectionFooter: String,
-      mpxGenericListHeader: String,
-      mpxGenericListFooter: String,
       scrollWithAnimation: Boolean,
       enableSticky: {
         type: Boolean,
@@ -90,30 +87,40 @@
         type: Boolean,
         value: false
       },
-      refresherEnable: {
+      refresherEnabled: {
         type: Boolean,
         value: false
       },
-      refresherEnabled: {
+      refresherTriggered: {
         type: Boolean,
         value: false
       }
     },
     data: {
-      convertedListData: []
+      convertedListData: [],
+      scrollIntoViewId: '',
+      viewPosition: 'start'
     },
     computed: {
       scrollViewStyle() {
         return `height: ${this.height}px;width: ${this.width}px`
       }
     },
+    created() {
+      // setTimeout(() => {
+      //   this.scrollToIndex({
+      //     index: 303,
+      //     animated: true
+      //   })
+      // }, 3000)
+    },
     watch: {
       listData: {
         handler(newVal) {
           if (this.type === 'section') {
             this.convertedListData = this.convertToSectionListData(newVal)
           } else {
-            this.convertedListData = newVal
+            this.convertedListData = this.convertToListData(newVal)
           }
         },
         immediate: true
@@ -121,24 +128,32 @@
     },
     methods: {
       onScroll(e) {
-        this.triggerEvent('scroll', e.detail)
+        this.triggerEvent('scroll', e)
       },
       onRefresh(e) {
-        this.triggerEvent('refresh', e.detail)
+        this.triggerEvent('refresh', e)
       },
-      scrollToOffset({ offset, animated }) {
-        this.$refs.recycleViewRef.node().exec((res) => {
-          res[0].node.scrollTo({
-            top: offset,
-            animated
-          })
-        })
+      scrollToIndex({ index, animated, viewPosition = 0 }) {
+        if (index >= 0) {
+          this.scrollIntoViewId = `mpx-recycle-item-${index}`
+          switch (viewPosition) {
+            case 0:
+              this.viewPosition = 'start'
+              break
+            case 0.5:
+              this.viewPosition = 'center'
+              break
+            case 1:
+              this.viewPosition = 'end'
+              break
+            default:
+              this.viewPosition = 'start'
+          }
+        }
       },
       convertToSectionListData(data) {
         const sections = []
         let currentSection = null
-        // 标记是否已创建了默认section (无header的section)
-        let hasDefaultSection = false
 
         data.forEach((item, index) => {
           if (item.isSectionHeader) {
@@ -160,16 +175,12 @@
                 headerData: null,
                 data: [],
                 hasSectionHeader: false,
-                _originalItemIndex: -1
+                _domId: `mpx-recycle-item-${index}`
               }
-              // 标记已创建默认section
-              hasDefaultSection = true
             }
-            // 将 item 添加到当前 section 的 data 中
-            const itemIndex = currentSection.data.length
             currentSection.data.push({
-              ...item,
-              _originalItemIndex: index
+              itemData: item,
+              _domId: `mpx-recycle-item-${index}`
             })
           }
         })
@@ -180,6 +191,16 @@
         }
 
         return sections
+      },
+      convertToListData(data) {
+        const listData = []
+        data.forEach((item, index) => {
+          listData.push({
+            itemData: item,
+            _domId: `mpx-recycle-item-${index}`
+          })
+        })
+        return listData
       }
     }
   })
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-footer-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-footer-default.mpx
deleted file mode 100644
index 5cf26e0eb4..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-footer-default.mpx
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <view class="list-item">
-    <view class="item-content">recycle-item-default</view>
-  </view>
-</template>
-
-<style lang="stylus" scoped>
-.list-item
-  margin 4px 16px
-  padding 16px
-  background #fff
-  border-radius 8px
-  box-shadow 0 2px 4px rgba(0,0,0,0.1)
-
-.item-content
-  display flex
-  flex-direction column
-  font-size 14px
-  color #666
-
-</style>
diff --git a/rn-event-system.md b/rn-event-system.md
new file mode 100644
index 0000000000..b86b486a0a
--- /dev/null
+++ b/rn-event-system.md
@@ -0,0 +1,119 @@
+# React Native 事件系统设计分享
+
+## 一、事件系统概述
+
+React Native 事件系统是连接原生触摸事件与 JavaScript 的重要桥梁，它将不同平台的原生事件规范化为一致的事件模型，使开发者能够以统一的方式处理用户交互。
+
+## 二、事件流程
+
+1. **原生触摸事件发生**：用户触摸屏幕
+2. **原生事件捕获**：由原生平台 (iOS/Android) 捕获触摸事件
+3. **事件桥接**：通过 Bridge 将原生事件传递给 JS 线程
+4. **事件规范化**：将平台特定事件转换为统一的 RN 事件对象
+5. **事件分发**：按照捕获和冒泡顺序分发事件
+6. **事件响应**：组件中的事件处理函数被调用
+
+## 三、事件处理机制
+
+### 1. 事件注册与分发
+
+```javascript
+// 事件注册示例
+<TouchableOpacity 
+  onPress={handlePress}
+  onLongPress={handleLongPress}
+/>
+```
+
+### 2. 事件规范化
+
+React Native 将不同平台的触摸事件规范化，确保一致的属性和行为：
+
+```javascript
+// 规范化事件对象示例
+const touchEvent = {
+  target: element,
+  identifier: touchId,
+  pageX: touchX,
+  pageY: touchY,
+  timestamp: Date.now(),
+  touches: [...currentTouches],
+  changedTouches: [...changedTouches]
+}
+```
+
+### 3. 事件冒泡与捕获
+
+RN 支持类似 DOM 的事件冒泡和捕获机制：
+
+- **捕获阶段**：事件从根节点向下传播到目标元素
+- **目标阶段**：事件到达目标元素
+- **冒泡阶段**：事件从目标元素向上传播到根节点
+
+### 4. 合成事件
+
+以下是 RN 支持的主要触摸事件：
+
+- **触摸事件**：onTouchStart, onTouchMove, onTouchEnd, onTouchCancel
+- **手势事件**：onPress, onLongPress, onPressIn, onPressOut
+- **响应系统事件**：onStartShouldSetResponder, onMoveShouldSetResponder 等
+
+## 四、自定义事件处理
+
+MPX 框架中的事件处理增强示例：
+
+```javascript
+// 自定义事件处理逻辑
+function handleTouchstart(e, type, eventConfig) {
+  e.persist();
+  const { innerRef } = eventConfig;
+  
+  // 设置初始按压状态
+  globalEventState.needPress = true;
+  innerRef.current.mpxPressInfo.detail = {
+    x: e.nativeEvent.changedTouches[0].pageX,
+    y: e.nativeEvent.changedTouches[0].pageY
+  };
+
+  // 触发原始事件
+  handleEmitEvent('touchstart', e, type, eventConfig);
+
+  // 处理长按事件
+  if (eventConfig.longpress) {
+    // 长按定时器设置
+    innerRef.current.startTimer[type] = setTimeout(() => {
+      globalEventState.needPress = false;
+      handleEmitEvent('longpress', e, type, eventConfig);
+    }, 350);
+  }
+}
+```
+
+## 五、与 Web 事件系统的差异
+
+1. **响应者系统**：RN 使用响应者系统决定哪个视图响应触摸
+2. **手势识别**：内置手势识别器自动处理常见手势
+3. **单线程模型**：JS 线程处理所有事件，有别于 Web 的多线程模型
+4. **事件池回收**：RN 使用事件池优化性能，需要使用 persist() 保留事件
+
+## 六、性能优化
+
+1. **事件委托**：集中处理事件，减少监听器数量
+2. **事件节流与防抖**：控制高频事件触发频率
+3. **事件对象复用**：通过事件池复用事件对象减少内存分配
+4. **异步处理**：将耗时操作放在事件处理后异步执行
+
+## 七、最佳实践
+
+1. 使用 useCallback 封装事件处理函数以避免重复创建
+2. 在适当时机调用 e.stopPropagation() 阻止事件冒泡
+3. 避免在事件处理函数中进行复杂计算或DOM操作
+4. 使用 PanResponder 处理复杂手势交互
+5. 针对关键交互添加触感反馈 (如 TouchableOpacity 的透明度变化)
+
+## 八、调试技巧
+
+1. 使用 console.log 输出事件对象结构
+2. 开启触摸指示器 (Debug > Show Perf Monitor > Enable touch indicators)
+3. 利用 React DevTools 分析组件事件绑定
+4. 监控 JS 线程性能，发现事件处理瓶颈 
\ No newline at end of file

From 18f8552d45e483a552794175f13ebb8d88403f1e Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 28 Apr 2025 15:07:09 +0800
Subject: [PATCH 091/126] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=B0=8F?=
 =?UTF-8?q?=E7=A8=8B=E5=BA=8Frecycle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-recycle-view.tsx     | 40 ++++++++++----
 .../components/wx/mpx-list-header-default.mpx | 21 ++++++++
 .../components/wx/mpx-recycle-view.mpx        | 53 +++++++++++--------
 3 files changed, 83 insertions(+), 31 deletions(-)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index 348263be86..d40475c824 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -23,6 +23,11 @@ interface SectionHeaderProps {
   itemData: any;
 }
 
+interface ListHeaderProps {
+  generichash: string;
+  genericlistHeader: string;
+  listHeaderData: any;
+}
 interface ListItem {
   isSectionHeader?: boolean;
   _originalItemIndex?: number;
@@ -53,6 +58,8 @@ interface RecycleViewProps {
   style?: Record<string, any>;
   itemHeight?: ItemHeightType;
   sectionHeaderHeight?: ItemHeightType;
+  listHeaderData?: any;
+  listHeaderHeight?: ItemHeightType;
   'genericrecycle-item'?: string;
   'genericsection-header'?: string;
   'enable-var'?: boolean;
@@ -94,6 +101,11 @@ const SectionHeader = forwardRef<any, SectionHeaderProps>((props, ref) => {
   return getGenericComponent({ props, ref, generichash, generickey: genericsectionHeader })
 })
 
+const ListHeader = forwardRef<any, ListHeaderProps>((props, ref) => {
+  const { generichash, genericlistHeader } = props
+  return getGenericComponent({ props, ref, generichash, generickey: genericlistHeader })
+})
+
 const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
   const {
     enhanced = false,
@@ -107,8 +119,11 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
     style = {},
     itemHeight = {},
     sectionHeaderHeight = {},
+    listHeaderHeight = {},
+    listHeaderData = null,
     'genericrecycle-item': genericrecycleItem,
     'genericsection-header': genericsectionHeader,
+    'genericlist-header': genericListHeader,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     'parent-font-size': parentFontSize,
@@ -181,7 +196,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
         const position = indexMap.current[index]
         const [sectionIndex, itemIndex] = (position as string).split('_')
         scrollViewRef.current.scrollToLocation?.({
-          itemIndex: Number(itemIndex) || 0,
+          itemIndex: itemIndex === 'header' ? 0 : Number(itemIndex) + 1,
           sectionIndex: Number(sectionIndex) || 0,
           animated,
           viewOffset,
@@ -214,10 +229,10 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
 
   const getSectionHeaderHeight = ({ sectionIndex }: { sectionIndex: number }) => {
     const item = convertedListData[sectionIndex]
-    const { headerData, hasSectionHeader } = item
+    const { hasSectionHeader } = item
     // 使用getOriginalIndex获取原始索引
     const originalIndex = getOriginalIndex(sectionIndex, 'header')
-    if (!headerData || !hasSectionHeader) return 0
+    if (!hasSectionHeader) return 0
     if ((sectionHeaderHeight as ItemHeightType).getter) {
       return (sectionHeaderHeight as ItemHeightType).getter?.(item, originalIndex) || 0
     } else {
@@ -230,8 +245,12 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
   ), [])
 
   const renderSectionHeader = useCallback((data: { section: Section }) => (
-    !data.section.headerData || !data.section.hasSectionHeader ? null : <SectionHeader itemData={data.section.headerData} generichash={generichash} genericsectionHeader={genericsectionHeader}/>
-  ), [generichash, genericsectionHeader])
+    !data.section.hasSectionHeader ? null : <SectionHeader itemData={data.section.headerData} generichash={generichash} genericsectionHeader={genericsectionHeader}/>
+  ), [])
+
+  const renderListHeader = useCallback(() => (
+    <ListHeader listHeaderData={listHeaderData} generichash={generichash} genericlistHeader={genericListHeader}/>
+  ), [])
 
   const convertToSectionListData = useCallback((data: ListItem[]): Section[] => {
     const sections: Section[] = []
@@ -240,8 +259,6 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
     indexMap.current = {}
     // 清空反向索引映射
     reverseIndexMap.current = {}
-    // 标记是否已创建了默认section (无header的section)
-    let hasDefaultSection = false
 
     data.forEach((item: ListItem, index: number) => {
       if (item.isSectionHeader) {
@@ -271,8 +288,6 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
             hasSectionHeader: false,
             _originalItemIndex: -1
           }
-          // 标记已创建默认section
-          hasDefaultSection = true
         }
         // 将 item 添加到当前 section 的 data 中
         const itemIndex = currentSection.data.length
@@ -316,6 +331,11 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
     const layouts: Array<{ length: number, offset: number, index: number }> = []
     let offset = 0
 
+    if (generichash && genericListHeader) {
+      // 计算列表头部的高度
+      offset += listHeaderHeight.getter?.() || listHeaderHeight.value || 0
+    }
+
     if (type === 'section') {
       // 遍历所有 sections
       convertedListData.forEach((section: Section, sectionIndex: number) => {
@@ -418,6 +438,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
         keyExtractor={(item, index) => item + index}
         renderItem={renderItem}
         getItemLayout={getItemLayout}
+        ListHeaderComponent={(generichash && genericListHeader && renderListHeader) || null}
         renderSectionHeader={(generichash && genericsectionHeader && renderSectionHeader) || null}
         refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
       />
@@ -428,6 +449,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
         keyExtractor={(item, index) => item + index}
         renderItem={renderItem}
         getItemLayout={getItemLayout}
+        ListHeaderComponent={(generichash && genericListHeader && renderListHeader) || null}
         refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
       />
   )
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
new file mode 100644
index 0000000000..23fc2f2d55
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
@@ -0,0 +1,21 @@
+<template>
+  <view class="list-item">
+    <view class="item-content">list-header-default</view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+.list-item
+  margin 4px 16px
+  padding 16px
+  background #fff
+  border-radius 8px
+  box-shadow 0 2px 4px rgba(0,0,0,0.1)
+
+.item-content
+  display flex
+  flex-direction column
+  font-size 14px
+  color #666
+
+</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index 2ea8c7dd67..1aed690df4 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -16,6 +16,9 @@
     scroll-into-view="{{scrollIntoViewId}}"
     scroll-into-view-alignment="{{viewPosition}}"
   >
+    <block wx:if="{{mpxGenericListHeader}}">
+      <list-header listHeaderData="{{listHeaderData}}"></list-header>
+    </block>
     <block wx:for="{{convertedListData}}" wx:key="index">
       <block wx:if="{{type === 'section'}}">
         <sticky-section>
@@ -27,20 +30,23 @@
             <section-header wx:else id="{{item._domId}}" itemData="{{item}}"></section-header>
           </block>
 
-          <list-view wx:if="{{mpxGenericRecycleItem}}">
-            <block
-              wx:for="{{item.data}}"
-              wx:for-item="subItem"
-              wx:key="subIndex"
-            >
-              <!-- section items -->
-              <recycle-item itemData="{{subItem.itemData}}" id="{{subItem._domId}}"></recycle-item>
-            </block>
-          </list-view>
+          <block
+            wx:if="{{mpxGenericRecycleItem}}"
+            wx:for="{{item.data}}"
+            wx:for-item="subItem"
+            wx:key="subIndex"
+          >
+            <!-- section items -->
+            <recycle-item itemData="{{subItem.itemData}}" id="{{subItem._domId}}"></recycle-item>
+          </block>
         </sticky-section>
       </block>
       <block wx:if="{{type !== 'section' && (mpxGenericRecycleItem || mpxGenericSectionHeader)}}">
-        <section-header wx:if="{{item.itemData && item.itemData.isSectionHeader}}" id="{{item._domId}}" itemData="{{item.itemData}}"></section-header>
+        <section-header
+          wx:if="{{item.itemData && item.itemData.isSectionHeader}}"
+          id="{{item._domId}}"
+          itemData="{{item.itemData}}"
+        ></section-header>
         <recycle-item wx:else itemData="{{item.itemData}}" id="{{item._domId}}"></recycle-item>
       </block>
     </block>
@@ -54,11 +60,11 @@
     properties: {
       height: {
         type: Number,
-        value: 0
+        value: null
       },
       width: {
         type: Number,
-        value: 0
+        value: null
       },
       listData: {
         type: Array,
@@ -70,6 +76,7 @@
       },
       mpxGenericRecycleItem: String,
       mpxGenericSectionHeader: String,
+      mpxGenericListHeader: String,
       scrollWithAnimation: Boolean,
       enableSticky: {
         type: Boolean,
@@ -94,6 +101,10 @@
       refresherTriggered: {
         type: Boolean,
         value: false
+      },
+      listHeaderData: {
+        type: Object,
+        value: null
       }
     },
     data: {
@@ -103,17 +114,9 @@
     },
     computed: {
       scrollViewStyle() {
-        return `height: ${this.height}px;width: ${this.width}px`
+        return `height: ${this.formatDimension(this.height)};width: ${this.formatDimension(this.width)}`
       }
     },
-    created() {
-      // setTimeout(() => {
-      //   this.scrollToIndex({
-      //     index: 303,
-      //     animated: true
-      //   })
-      // }, 3000)
-    },
     watch: {
       listData: {
         handler(newVal) {
@@ -127,6 +130,9 @@
       }
     },
     methods: {
+      formatDimension(value) {
+        return typeof value === 'number' ? `${value}px` : (value || '100%')
+      },
       onScroll(e) {
         this.triggerEvent('scroll', e)
       },
@@ -215,6 +221,9 @@
       },
       "section-header": {
         "default": "./mpx-section-header-default.mpx"
+      },
+      "list-header": {
+        "default": "./mpx-list-header-default.mpx"
       }
     }
   }

From be207ec1db1b893d7052ab05d78397f731afe41e Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Mon, 28 Apr 2025 15:44:14 +0800
Subject: [PATCH 092/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9recycle?=
 =?UTF-8?q?=E6=B3=A8=E5=85=A5=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../webpack-plugin/lib/template-compiler/compiler.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index 5fe0097129..51df21590a 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2686,16 +2686,6 @@ function processMpxTagName (el) {
   }
 }
 
-function processMpxExtendComponent (el) {
-  const extendTagList = ['recycle-view']
-  extendTagList.forEach(tag => {
-    if (el.tag === tag) {
-    el.tag = `mpx-${tag}`
-    el.isBuiltIn = true
-  }
-  })
-}
-
 function processElement (el, root, options, meta) {
   processAtMode(el)
   // 如果已经标记了这个元素要被清除，直接return跳过后续处理步骤
@@ -2705,8 +2695,6 @@ function processElement (el, root, options, meta) {
 
   processMpxTagName(el)
 
-  processMpxExtendComponent(el)
-
   if (runtimeCompile && options.dynamicTemplateRuleRunner) {
     options.dynamicTemplateRuleRunner(el, options, config[mode])
   }

From b8407da88e4a1cc1a4a9dd67cddbeb9263d8503e Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 29 Apr 2025 11:56:27 +0800
Subject: [PATCH 093/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9rn=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B3=A8=E5=85=A5=E6=9D=A1=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../webpack-plugin/lib/template-compiler/compiler.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index 51df21590a..92760a2a20 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -1,7 +1,7 @@
 const JSON5 = require('json5')
 const he = require('he')
 const config = require('../config')
-const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID, PARENT_MODULE_ID } = require('../utils/const')
+const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID, PARENT_MODULE_ID, EXTEND_COMPONENTS_LIST } = require('../utils/const')
 const normalize = require('../utils/normalize')
 const { normalizeCondition } = require('../utils/match-condition')
 const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
@@ -1810,8 +1810,8 @@ function processFor (el) {
 function processRefReact (el, meta) {
   const { val, has } = getAndRemoveAttr(el, config[mode].directive.ref)
 
-  // rn中只有内建组件能被作为node ref处理
-  const type = el.isBuiltIn ? 'node' : 'component'
+  // rn中只有内建组件和内部扩展组件能被作为node ref处理
+  const type = el.isBuiltIn || isExtendComponentNode(el) ? 'node' : 'component'
   if (has) {
     if (!meta.refs) {
       meta.refs = []
@@ -2271,12 +2271,16 @@ function isComponentNode (el) {
   return usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component' || componentGenerics[el.tag]
 }
 
+function isExtendComponentNode (el) {
+  return EXTEND_COMPONENTS_LIST.includes(el.tag)
+}
+
 function getComponentInfo (el) {
   return usingComponentsInfo[el.tag] || {}
 }
 
 function isReactComponent (el) {
-  return !isComponentNode(el) && isRealNode(el) && !el.isBuiltIn
+  return !isComponentNode(el) && isRealNode(el) && !el.isBuiltIn && !isExtendComponentNode(el)
 }
 
 function processExternalClasses (el, options) {

From a7f38c68e6165c15c27dea783cbfa146d05998b5 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 29 Apr 2025 16:10:01 +0800
Subject: [PATCH 094/126] =?UTF-8?q?chore:=20rn=E7=8E=AF=E5=A2=83=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E9=80=9A=E8=BF=87ref=E8=8E=B7=E5=8F=96scrollToIndex?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core/src/platform/builtInMixins/refsMixin.ios.js   | 10 +++++++++-
 .../lib/runtime/components/react/mpx-recycle-view.tsx  |  5 +----
 .../lib/runtime/components/wx/mpx-recycle-view.mpx     |  6 +++---
 .../webpack-plugin/lib/template-compiler/compiler.js   |  6 +++---
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/platform/builtInMixins/refsMixin.ios.js b/packages/core/src/platform/builtInMixins/refsMixin.ios.js
index 9a761624d1..e7a9984bd6 100644
--- a/packages/core/src/platform/builtInMixins/refsMixin.ios.js
+++ b/packages/core/src/platform/builtInMixins/refsMixin.ios.js
@@ -59,7 +59,15 @@ export default function getRefsMixin () {
           const res = []
           refs.forEach(({ type, instance }) => {
             if (type === refType) {
-              res.push(instance)
+              // 内置扩展的tsx 组件如 recycle-view，既不是内建组件也不是自定义组件
+              if (instance.getNodeInstance) {
+                const { instance: nodeInstance } = instance.getNodeInstance()
+                if (nodeInstance) {
+                  res.push(nodeInstance)
+                }
+              } else {
+                res.push(instance)
+              }
             }
           })
           return res
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index d40475c824..602d39db32 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -414,10 +414,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
   }
 
   useNodesRef(props, ref, scrollViewRef, {
-    style,
-    node: {
-      scrollToIndex
-    }
+    scrollToIndex
   })
 
   const innerProps = useInnerProps(props, scrollAdditionalProps, [
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index 1aed690df4..7bfade9f26 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -171,7 +171,8 @@
             currentSection = {
               headerData: item,
               data: [],
-              hasSectionHeader: true
+              hasSectionHeader: true,
+              _domId: `mpx-recycle-item-${index}`
             }
           } else {
             // 如果没有当前 section，创建一个默认的
@@ -180,8 +181,7 @@
               currentSection = {
                 headerData: null,
                 data: [],
-                hasSectionHeader: false,
-                _domId: `mpx-recycle-item-${index}`
+                hasSectionHeader: false
               }
             }
             currentSection.data.push({
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index 92760a2a20..2c4d2683b6 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -1810,8 +1810,8 @@ function processFor (el) {
 function processRefReact (el, meta) {
   const { val, has } = getAndRemoveAttr(el, config[mode].directive.ref)
 
-  // rn中只有内建组件和内部扩展组件能被作为node ref处理
-  const type = el.isBuiltIn || isExtendComponentNode(el) ? 'node' : 'component'
+  // rn中只有内建组件能被作为node ref处理
+  const type = el.isBuiltIn ? 'node' : 'component'
   if (has) {
     if (!meta.refs) {
       meta.refs = []
@@ -2268,7 +2268,7 @@ function isRealNode (el) {
 }
 
 function isComponentNode (el) {
-  return usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component' || componentGenerics[el.tag]
+  return usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component' || componentGenerics[el.tag] || isExtendComponentNode(el)
 }
 
 function isExtendComponentNode (el) {

From 011f8e5f760cdac01aa92079fd70299f44083d86 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 29 Apr 2025 20:21:17 +0800
Subject: [PATCH 095/126] fix: wx recycle

---
 .../lib/runtime/components/wx/mpx-recycle-view.mpx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index 7bfade9f26..50c7eaaa77 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -27,7 +27,7 @@
             <sticky-header wx:if="{{enableSticky}}">
               <section-header itemData="{{item.headerData}}" id="{{item._domId}}"></section-header>
             </sticky-header>
-            <section-header wx:else id="{{item._domId}}" itemData="{{item}}"></section-header>
+            <section-header wx:else id="{{item._domId}}" itemData="{{item.headerData}}"></section-header>
           </block>
 
           <block

From 3ee2cc646bfe0c1094b8aaacaa59577d8c772417 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Tue, 29 Apr 2025 20:40:43 +0800
Subject: [PATCH 096/126] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4wx=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/webpack-plugin/lib/json-compiler/index.js              | 2 +-
 .../wx/{mpx-recycle-view.mpx => mpx-recycle-view/index.mpx}     | 0
 .../wx/{ => mpx-recycle-view}/mpx-list-header-default.mpx       | 0
 .../wx/{ => mpx-recycle-view}/mpx-recycle-item-default.mpx      | 0
 .../wx/{ => mpx-recycle-view}/mpx-recycle-view.old.mpx          | 0
 .../wx/{ => mpx-recycle-view}/mpx-section-header-default.mpx    | 0
 6 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/webpack-plugin/lib/runtime/components/wx/{mpx-recycle-view.mpx => mpx-recycle-view/index.mpx} (100%)
 rename packages/webpack-plugin/lib/runtime/components/wx/{ => mpx-recycle-view}/mpx-list-header-default.mpx (100%)
 rename packages/webpack-plugin/lib/runtime/components/wx/{ => mpx-recycle-view}/mpx-recycle-item-default.mpx (100%)
 rename packages/webpack-plugin/lib/runtime/components/wx/{ => mpx-recycle-view}/mpx-recycle-view.old.mpx (100%)
 rename packages/webpack-plugin/lib/runtime/components/wx/{ => mpx-recycle-view}/mpx-section-header-default.mpx (100%)

diff --git a/packages/webpack-plugin/lib/json-compiler/index.js b/packages/webpack-plugin/lib/json-compiler/index.js
index 6bc49d1cb0..8d9e2a162d 100644
--- a/packages/webpack-plugin/lib/json-compiler/index.js
+++ b/packages/webpack-plugin/lib/json-compiler/index.js
@@ -192,7 +192,7 @@ module.exports = function (content) {
       const extendComponents = {}
         useExtendComponents.forEach((name) => {
           if (EXTEND_COMPONENTS_LIST.includes(name)) {
-            extendComponents[name] = require.resolve(`../runtime/components/wx/mpx-${name}.mpx`)
+            extendComponents[name] = require.resolve(`../runtime/components/${mode}/mpx-${name}/index.mpx`)
           } else {
             emitWarning(`extend component ${name} is not supported!`)
           }
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-list-header-default.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-list-header-default.mpx
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-recycle-item-default.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-recycle-item-default.mpx
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.old.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-recycle-view.old.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.old.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-recycle-view.old.mpx
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-section-header-default.mpx
similarity index 100%
rename from packages/webpack-plugin/lib/runtime/components/wx/mpx-section-header-default.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-section-header-default.mpx

From 3a725d2d1bdd505f678e2a923fabb29d33f7d0b1 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 30 Apr 2025 17:14:21 +0800
Subject: [PATCH 097/126] =?UTF-8?q?chore:=20del=20=E6=97=A0=E7=94=A8md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rn-event-system.md | 119 ---------------------------------------------
 1 file changed, 119 deletions(-)
 delete mode 100644 rn-event-system.md

diff --git a/rn-event-system.md b/rn-event-system.md
deleted file mode 100644
index b86b486a0a..0000000000
--- a/rn-event-system.md
+++ /dev/null
@@ -1,119 +0,0 @@
-# React Native 事件系统设计分享
-
-## 一、事件系统概述
-
-React Native 事件系统是连接原生触摸事件与 JavaScript 的重要桥梁，它将不同平台的原生事件规范化为一致的事件模型，使开发者能够以统一的方式处理用户交互。
-
-## 二、事件流程
-
-1. **原生触摸事件发生**：用户触摸屏幕
-2. **原生事件捕获**：由原生平台 (iOS/Android) 捕获触摸事件
-3. **事件桥接**：通过 Bridge 将原生事件传递给 JS 线程
-4. **事件规范化**：将平台特定事件转换为统一的 RN 事件对象
-5. **事件分发**：按照捕获和冒泡顺序分发事件
-6. **事件响应**：组件中的事件处理函数被调用
-
-## 三、事件处理机制
-
-### 1. 事件注册与分发
-
-```javascript
-// 事件注册示例
-<TouchableOpacity 
-  onPress={handlePress}
-  onLongPress={handleLongPress}
-/>
-```
-
-### 2. 事件规范化
-
-React Native 将不同平台的触摸事件规范化，确保一致的属性和行为：
-
-```javascript
-// 规范化事件对象示例
-const touchEvent = {
-  target: element,
-  identifier: touchId,
-  pageX: touchX,
-  pageY: touchY,
-  timestamp: Date.now(),
-  touches: [...currentTouches],
-  changedTouches: [...changedTouches]
-}
-```
-
-### 3. 事件冒泡与捕获
-
-RN 支持类似 DOM 的事件冒泡和捕获机制：
-
-- **捕获阶段**：事件从根节点向下传播到目标元素
-- **目标阶段**：事件到达目标元素
-- **冒泡阶段**：事件从目标元素向上传播到根节点
-
-### 4. 合成事件
-
-以下是 RN 支持的主要触摸事件：
-
-- **触摸事件**：onTouchStart, onTouchMove, onTouchEnd, onTouchCancel
-- **手势事件**：onPress, onLongPress, onPressIn, onPressOut
-- **响应系统事件**：onStartShouldSetResponder, onMoveShouldSetResponder 等
-
-## 四、自定义事件处理
-
-MPX 框架中的事件处理增强示例：
-
-```javascript
-// 自定义事件处理逻辑
-function handleTouchstart(e, type, eventConfig) {
-  e.persist();
-  const { innerRef } = eventConfig;
-  
-  // 设置初始按压状态
-  globalEventState.needPress = true;
-  innerRef.current.mpxPressInfo.detail = {
-    x: e.nativeEvent.changedTouches[0].pageX,
-    y: e.nativeEvent.changedTouches[0].pageY
-  };
-
-  // 触发原始事件
-  handleEmitEvent('touchstart', e, type, eventConfig);
-
-  // 处理长按事件
-  if (eventConfig.longpress) {
-    // 长按定时器设置
-    innerRef.current.startTimer[type] = setTimeout(() => {
-      globalEventState.needPress = false;
-      handleEmitEvent('longpress', e, type, eventConfig);
-    }, 350);
-  }
-}
-```
-
-## 五、与 Web 事件系统的差异
-
-1. **响应者系统**：RN 使用响应者系统决定哪个视图响应触摸
-2. **手势识别**：内置手势识别器自动处理常见手势
-3. **单线程模型**：JS 线程处理所有事件，有别于 Web 的多线程模型
-4. **事件池回收**：RN 使用事件池优化性能，需要使用 persist() 保留事件
-
-## 六、性能优化
-
-1. **事件委托**：集中处理事件，减少监听器数量
-2. **事件节流与防抖**：控制高频事件触发频率
-3. **事件对象复用**：通过事件池复用事件对象减少内存分配
-4. **异步处理**：将耗时操作放在事件处理后异步执行
-
-## 七、最佳实践
-
-1. 使用 useCallback 封装事件处理函数以避免重复创建
-2. 在适当时机调用 e.stopPropagation() 阻止事件冒泡
-3. 避免在事件处理函数中进行复杂计算或DOM操作
-4. 使用 PanResponder 处理复杂手势交互
-5. 针对关键交互添加触感反馈 (如 TouchableOpacity 的透明度变化)
-
-## 八、调试技巧
-
-1. 使用 console.log 输出事件对象结构
-2. 开启触摸指示器 (Debug > Show Perf Monitor > Enable touch indicators)
-3. 利用 React DevTools 分析组件事件绑定
-4. 监控 JS 线程性能，发现事件处理瓶颈 
\ No newline at end of file

From 2b04cc03cbd8f7735ce727d3e29e5bbbd2920a54 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 30 Apr 2025 17:39:34 +0800
Subject: [PATCH 098/126] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4ali,web?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B3=A8=E5=85=A5=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../webpack-plugin/lib/json-compiler/index.js |  12 +-
 .../webpack-plugin/lib/react/processJSON.js   |   4 +-
 .../react/mpx-recycle-view-4.23.tsx           | 346 ------------------
 .../webpack-plugin/lib/web/processJSON.js     |  12 +-
 4 files changed, 14 insertions(+), 360 deletions(-)
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-4.23.tsx

diff --git a/packages/webpack-plugin/lib/json-compiler/index.js b/packages/webpack-plugin/lib/json-compiler/index.js
index 8d9e2a162d..e0b20ce49e 100644
--- a/packages/webpack-plugin/lib/json-compiler/index.js
+++ b/packages/webpack-plugin/lib/json-compiler/index.js
@@ -190,14 +190,18 @@ module.exports = function (content) {
     const { useExtendComponents } = mpx
     if (isApp && useExtendComponents) {
       const extendComponents = {}
-        useExtendComponents.forEach((name) => {
+      useExtendComponents.forEach((name) => {
+        if (mode === 'wx') {
           if (EXTEND_COMPONENTS_LIST.includes(name)) {
             extendComponents[name] = require.resolve(`../runtime/components/${mode}/mpx-${name}/index.mpx`)
           } else {
-            emitWarning(`extend component ${name} is not supported!`)
+            emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
           }
-        })
-        json.usingComponents = Object.assign({}, extendComponents, json.usingComponents)
+        } else {
+          emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
+        }
+      })
+      json.usingComponents = Object.assign({}, extendComponents, json.usingComponents)
     }
   }
 
diff --git a/packages/webpack-plugin/lib/react/processJSON.js b/packages/webpack-plugin/lib/react/processJSON.js
index 95c076ab12..90e2001995 100644
--- a/packages/webpack-plugin/lib/react/processJSON.js
+++ b/packages/webpack-plugin/lib/react/processJSON.js
@@ -107,9 +107,9 @@ module.exports = function (jsonContent, {
         const extendComponents = {}
         useExtendComponents.forEach((name) => {
           if (EXTEND_COMPONENTS_LIST.includes(name)) {
-            extendComponents[name] = require.resolve(`../runtime/components/react/mpx-${name}.tsx`)
+            extendComponents[name] = require.resolve(`../runtime/components/react/dist/mpx-${name}.jsx`)
           } else {
-            emitWarning(`extend component ${name} is not supported!`)
+            emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
           }
         })
         jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-4.23.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-4.23.tsx
deleted file mode 100644
index 7588b334f2..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view-4.23.tsx
+++ /dev/null
@@ -1,346 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react'
-import { View, StyleSheet, LayoutChangeEvent, Animated } from 'react-native'
-import { ScrollView } from 'react-native-gesture-handler'
-import { HandlerRef } from './useNodesRef'
-
-interface RecycleViewProps {
-  scrollY?: boolean;
-  height?: number;
-  width?: number;
-  itemHeight?: {
-    value?: number;
-    getter?: (item: any, index: number) => number;
-  };
-  bufferScale?: number;
-  listData?: any[];
-  scrollTop?: number;
-  scrollWithAnimation?: boolean;
-  enableBackToTop?: boolean;
-  lowerThreshold?: number;
-  upperThreshold?: number;
-  scrollOptions?: Record<string, any>;
-  scrollEventThrottle?: number;
-  minRenderCount?: number;
-  enhanced?: boolean;
-  bounces?: boolean;
-  onScroll?: (e: any) => void;
-  onScrollToUpper?: (e: any) => void;
-  onScrollToLower?: (e: any) => void;
-  children?: React.ReactNode;
-}
-
-const getGenericComponent = ({ props, ref, generichash, generickey }) => {
-  const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
-  return <GenericComponent ref={ref} {...props}/>
-}
-
-const Item = forwardRef((props, ref) => {
-  const { generichash, genericrecycleItem } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericrecycleItem })
-})
-
-const RecycleView = forwardRef<HandlerRef<View, RecycleViewProps>, RecycleViewProps>(({
-  scrollY = true,
-  height = 0,
-  width = 0,
-  itemHeight = {},
-  bufferScale = 2,
-  listData = [],
-  scrollTop = 0,
-  scrollWithAnimation = false,
-  enableBackToTop = false,
-  lowerThreshold = 50,
-  upperThreshold = 50,
-  scrollOptions = {},
-  scrollEventThrottle = 0,
-  minRenderCount = 5,
-  enhanced = false,
-  bounces = false,
-  onScroll: onScrollProp,
-  onScrollToUpper,
-  onScrollToLower,
-  children,
-  generichash,
-  'genericrecycle-item': genericrecycleItem,
-  'genericsection-header': genericsectionHeader,
-  'genericsection-footer': genericsectionFooter,
-  'genericlist-header': genericlistHeader,
-  'genericlist-footer': genericlistFooter
-}, ref) : React.JSX.Element => {
-  const scrollViewRef = useRef<ScrollView>(null)
-
-  const [containerHeight, setContainerHeight] = useState(0)
-  const [_listData, setListData] = useState(listData)
-  const [positions, setPositions] = useState<Array<{
-    index: number;
-    height: number;
-    top: number;
-    bottom: number;
-  }>>([])
-  const [totalHeight, setTotalHeight] = useState(0)
-  const [visibleCounts, setVisibleCounts] = useState<number[]>([])
-  const [visibleData, setVisibleData] = useState([])
-
-  const startIndexValueRef = useRef(0)
-  const endIndexValueRef = useRef(0)
-  // const transformYRef = useRef(new Animated.Value(0)).current
-  const transformYRef = useRef(0)
-  const lastScrollTimeRef = useRef(0)
-
-  useEffect(() => {
-    const data = listData.map((item, index) => ({
-      ...item,
-      _index: `_${index}`
-    }))
-    setListData(data)
-    initPositions()
-  }, [listData])
-
-  useEffect(() => {
-    setStartOffset()
-  }, [positions])
-
-  const getItemHeight = useCallback((item: any, index: number) => {
-    const { value, getter } = itemHeight
-    if (typeof getter === 'function') {
-      return getter(item, index) || 0
-    }
-    return value || 0
-  }, [itemHeight])
-
-  function initPositions () {
-    let bottom = 0
-    const newPositions = _listData.map((item, index) => {
-      const height = getItemHeight(item, index)
-      const position = {
-        index,
-        height,
-        top: bottom,
-        bottom: bottom + height
-      }
-      bottom = position.bottom
-      return position
-    })
-    setPositions(newPositions)
-    setTotalHeight(!newPositions.length ? 0 : newPositions[newPositions.length - 1].bottom)
-
-    if (containerHeight) {
-      calculateVisibleCounts(newPositions)
-    }
-  }
-
-  const calculateVisibleCounts = useCallback((currentPositions = positions) => {
-    const newVisibleCounts = currentPositions.map((_, startIndex) => {
-      let count = 0
-      let totalHeight = 0
-
-      for (let i = startIndex; i < currentPositions.length; i++) {
-        totalHeight += currentPositions[i].height
-        if (totalHeight > containerHeight) {
-          break
-        }
-        count++
-      }
-
-      if (startIndex + count > currentPositions.length - 3) {
-        count = currentPositions.length - startIndex
-      }
-
-      return count
-    })
-
-    setVisibleCounts(newVisibleCounts)
-  }, [containerHeight])
-
-  useEffect(() => {
-    calculateVisibleCounts(positions)
-  }, [containerHeight])
-
-  const renderItem = useCallback(({ item }) => (
-    <Item currentItem={item} generichash={generichash} genericrecycleItem={genericrecycleItem} key={item._index}/>
-  ), [])
-
-  const binarySearch = useCallback((list: typeof positions, value: number) => {
-    if (!list.length) return 0
-
-    if (value >= list[list.length - 1].bottom) {
-      return list.length - 1
-    }
-
-    let start = 0
-    let end = list.length - 1
-
-    while (start <= end) {
-      const midIndex = Math.floor((start + end) / 2)
-      const midValue = list[midIndex]
-
-      if (value >= midValue.top && value < midValue.bottom) {
-        return midIndex
-      }
-
-      if (value < midValue.top) {
-        end = midIndex - 1
-      } else {
-        start = midIndex + 1
-      }
-    }
-
-    return Math.min(Math.max(0, start - 1), list.length - 1)
-  }, [])
-
-  const getStartIndex = (scrollTop: number) => {
-    if (!positions.length) return 0
-    if (scrollTop <= 0) return 0
-    const index = binarySearch(positions, scrollTop)
-    return Math.max(0, Math.min(index, _listData.length - 1))
-  }
-
-  const getVisibleCount = () => {
-    if (!visibleCounts.length) return minRenderCount
-    return Math.max(visibleCounts[startIndexValueRef.current], minRenderCount)
-  }
-
-  const getAboveCount = () => {
-    if (!_listData.length || !visibleCounts.length) return 0
-    let count = 0
-    const startIdx = Math.max(0, startIndexValueRef.current)
-    const endIdx = Math.max(0, startIdx - bufferScale)
-
-    for (let i = startIdx; i > endIdx; i--) {
-      count += visibleCounts[i] || 0
-    }
-
-    return count
-  }
-
-  const getBelowCount = () => {
-    if (!_listData.length || !visibleCounts.length) return 0
-    let count = 0
-    const startIdx = Math.min(startIndexValueRef.current, _listData.length - 1)
-    const endIdx = Math.min(startIdx + bufferScale, _listData.length - 1)
-
-    for (let i = startIdx; i < endIdx; i++) {
-      count += visibleCounts[i] || 0
-    }
-
-    return count
-  }
-
-  const getVisibleData = () => {
-    if (!_listData.length) return []
-
-    const currentStart = startIndexValueRef.current
-
-    const startIdx = Math.min(Math.max(0, currentStart - getAboveCount()), _listData.length - 1)
-    let endIdx = Math.min(_listData.length, currentStart + getVisibleCount() + getBelowCount())
-
-    if (endIdx > _listData.length - 3) {
-      endIdx = _listData.length
-    }
-
-    return _listData.slice(startIdx, endIdx).map((item, idx) => {
-      const realIndex = startIdx + idx
-      return {
-        ...item,
-        _index: `_${realIndex}`
-      }
-    })
-  }
-
-  const handleScroll = (e) => {
-    const now = Date.now()
-    // 添加16ms的节流，大约60fps
-    if (now - lastScrollTimeRef.current < 16) {
-      return
-    }
-    lastScrollTimeRef.current = now
-    const newStart = getStartIndex(e.nativeEvent.contentOffset.y)
-    if (Math.abs(newStart - endIndexValueRef.current) >= Math.floor(getAboveCount() / 2)) {
-      startIndexValueRef.current = newStart
-      endIndexValueRef.current = newStart + getVisibleCount()
-      setStartOffset()
-    }
-    onScrollProp?.(e)
-  }
-
-  function setStartOffset () {
-    if (positions.length) {
-      const startIdx = Math.min(
-        Math.max(0, startIndexValueRef.current - getAboveCount()),
-        positions.length - 1
-      )
-      const offset = positions[startIdx].top
-      const data = getVisibleData()
-      setVisibleData(data)
-      // transformYRef.setValue(offset)
-      transformYRef.current = offset
-    } else {
-      // transformYRef.setValue(0)
-       transformYRef.current = 0
-    }
-  }
-
-  const handleLayout = useCallback((e: LayoutChangeEvent) => {
-    const { height: newHeight } = e.nativeEvent.layout
-    setContainerHeight(newHeight)
-  }, [])
-
-  useEffect(() => {
-    const newStart = getStartIndex(scrollTop)
-    const newEnd = newStart + getVisibleCount()
-    startIndexValueRef.current = newStart
-    endIndexValueRef.current = newEnd
-    setStartOffset()
-  }, [scrollTop])
-
-  return (
-    <ScrollView
-      ref={scrollViewRef}
-      style={[styles.container, { width: width || '100%', height: height || '100%' } as ViewStyle]}
-      bounces={bounces}
-      onScroll={handleScroll}
-      onLayout={handleLayout}
-    >
-      <View style={styles.contentWrapper}>
-        <View style={[styles.placeholder, { height: totalHeight }]} />
-        <View
-          style={[
-            styles.infiniteList,
-            {
-              transform: [{ translateY: transformYRef.current }]
-            }
-          ]}
-        >
-          {visibleData.map((item) => (
-            renderItem({item})
-          ))}
-        </View>
-      </View>
-    </ScrollView>
-  )
-})
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'relative',
-    overflow: 'hidden'
-  },
-  contentWrapper: {
-    position: 'relative',
-    width: '100%'
-  },
-  placeholder: {
-    width: '100%'
-  },
-  infiniteList: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    backfaceVisibility: 'hidden'
-  }
-})
-
-RecycleView.displayName = 'MpxRecycleView'
-
-export default RecycleView
diff --git a/packages/webpack-plugin/lib/web/processJSON.js b/packages/webpack-plugin/lib/web/processJSON.js
index 870ec396e4..828633df39 100644
--- a/packages/webpack-plugin/lib/web/processJSON.js
+++ b/packages/webpack-plugin/lib/web/processJSON.js
@@ -10,7 +10,7 @@ const getJSONContent = require('../utils/get-json-content')
 const resolve = require('../utils/resolve')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
-const { RESOLVE_IGNORED_ERR, EXTEND_COMPONENTS_LIST } = require('../utils/const')
+const { RESOLVE_IGNORED_ERR } = require('../utils/const')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 
 module.exports = function (jsonContent, {
@@ -103,15 +103,11 @@ module.exports = function (jsonContent, {
       rulesRunnerOptions.mainKey = ctorType
     } else {
       if (useExtendComponents) {
-        const extendComponents = {}
         useExtendComponents.forEach((name) => {
-          if (EXTEND_COMPONENTS_LIST.includes(name)) {
-            extendComponents[name] = require.resolve(`../runtime/components/web/mpx-${name}.vue`)
-          } else {
-            emitWarning(`extend component ${name} is not supported!`)
-          }
+          emitWarning(
+            `extend component ${name} is not supported in web environment!`
+          )
         })
-        jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
       }
     }
 

From b2f151d3fef3fc67a1b2b7ed12967d99427e95a7 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 7 May 2025 20:14:51 +0800
Subject: [PATCH 099/126] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=20web=20stic?=
 =?UTF-8?q?ky=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/web/mpx-recycle-view.vue       | 404 ++++++++++++++++++
 .../webpack-plugin/lib/web/processJSON.js     |  12 +-
 2 files changed, 412 insertions(+), 4 deletions(-)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
new file mode 100644
index 0000000000..4609bb229c
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
@@ -0,0 +1,404 @@
+<template>
+  <div class="mpx-recycle-view">
+    <ScrollView ref="scrollView" :enableSticky="enableSticky" :scroll-y="true" @scroll="handleScroll" :style="{ 'width': _width, 'height': _height }">
+      <div class="content-wrapper">
+        <div class="infinite-list-placeholder" :style="placeholderStyle"></div>
+        <div class="infinite-list" :style="contentStyle">
+          <template v-for="item in visibleData">
+            <section-header v-if="item.isSectionHeader" :key="'header' + item._index" :itemData="item" />
+            <recycle-item v-else :key="'item' + item._index" :itemData="item" />
+          </template>
+        </div>
+      </div>
+      <StickyHeader v-for="(stickyItem) in _stickyHeaders" class="sticky-section" :style="{'top': (positions[stickyItem._index] && positions[stickyItem._index].top || 0) + 'px'}">
+        <section-header :key="'header' + stickyItem._index" :itemData="stickyItem"/>
+      </StickyHeader>
+    </ScrollView>
+  </div>
+</template>
+
+<script>
+  import ScrollView from './mpx-scroll-view.vue'
+  import StickyHeader from './mpx-sticky-header.vue'
+
+
+  export default {
+    props: {
+      listData: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      enableSticky: Boolean,
+      minRenderCount: {
+        type: Number,
+        default: 10
+      },
+      bufferScale: {
+        type: Number,
+        default: 1
+      },
+      'enable-sticky': {
+        type: Boolean,
+        default: false
+      },
+      'height': {
+        type: [String, Number],
+        default: '100%'
+      },
+      'width': {
+        type: [String, Number],
+        default: '100%'
+      },
+      'scroll-y': {
+        type: Boolean,
+        default: true
+      },
+      'itemHeight': {
+        type: Object,
+        default: {}
+      },
+      'listHeaderHeight': {
+        type: Object,
+        default: {}
+      },
+      'sectionHeaderHeight': {
+        type: Object,
+        default: {}
+      },
+      'type': {
+        type: String,
+        default: ''
+      },
+      'generichash': {
+        type: String,
+        default: ''
+      },
+      'genericlist-header': {
+        type: String,
+        default: ''
+      },
+      'genericrecycle-item': {
+        type: String,
+        default: ''
+      },
+      'genericsection-header': {
+        type: String,
+        default: ''
+      },
+    },
+    data() {
+      return {
+        start: 0,
+        end: 0,
+        contentStyle: '',
+        placeholderStyle: '',
+        containerHeight: 0,
+        positions: [],
+        isReady: false,
+        lastScrollTime: 0,
+        visibleCounts: []
+      }
+    },
+    computed: {
+      _width() {
+        return this.width ? `${this.width}px` : '100%'
+      },
+      _height() {
+        return this.height ? `${this.height}px` : '100%'
+      },
+      _listData() {
+        return this.listData.map((item, index) => {
+          return Object.assign({}, item, { _index: `_${index}` })
+        })
+      },
+      _stickyHeaders () {
+         const data = []
+         this.listData.forEach((item, index) => {
+          if (item.isSectionHeader) {
+            data.push(Object.assign({}, item, { _index: `${index}` }))
+          }
+        })
+        return data
+      },
+      _scrollTop() {
+        // 使用初始值或当前值
+        return this.isReady ? this.scrollTop : 0
+      },
+      visibleCount() {
+        if (!this.visibleCounts.length) return this.minRenderCount
+        return Math.max(this.visibleCounts[this.start], this.minRenderCount)
+      },
+      aboveCount() {
+        if (!this._listData.length || !this.visibleCounts.length) return 0
+        let count = 0
+        const startIndex = Math.max(0, this.start)
+        const endIndex = Math.max(0, startIndex - this.bufferScale)
+
+        for (let i = startIndex; i > endIndex; i--) {
+          count += this.visibleCounts[i] || 0
+        }
+
+        return count
+      },
+      belowCount() {
+        if (!this._listData.length || !this.visibleCounts.length) return 0
+        let count = 0
+        const startIndex = Math.min(this.start, this._listData.length - 1)
+        const endIndex = Math.min(startIndex + this.bufferScale, this._listData.length - 1)
+
+        for (let i = startIndex; i < endIndex; i++) {
+          count += this.visibleCounts[i] || 0
+        }
+
+        return count
+      },
+      visibleData() {
+        if (!this._listData.length) return []
+
+        const start = Math.min(Math.max(0, this.start - this.aboveCount), this._listData.length - 1)
+
+        let end = Math.min(this._listData.length, this.start + this.visibleCount + this.belowCount)
+
+        // 如果接近列表末尾，确保显示所有剩余项目
+        if (end > this._listData.length - 3) {
+          end = this._listData.length
+        }
+
+        return this._listData.slice(start, end).map((item, idx) => {
+          const realIndex = start + idx
+          return {
+            ...item,
+            _index: `_${realIndex}`
+          }
+        })
+      },
+      totalHeight() {
+        if (!this.positions.length) return 0
+        return this.positions[this.positions.length - 1].bottom
+      }
+    },
+    watch: {
+      listData: {
+        handler() {
+          this.initPositions()
+          this.placeholderStyle = `height: ${this.totalHeight}px`
+          // 更新真实偏移量
+          this.setStartOffset()
+        }
+      },
+      scrollTop: {
+        handler(val) {
+          this.start = this.getStartIndex(val)
+          this.end = this.start + this.visibleCount
+          this.setStartOffset()
+        },
+        immediate: true
+      },
+      containerHeight() {
+        this.calculateVisibleCounts()
+      }
+    },
+    created() {
+      if (this.generichash && global.__mpxGenericsMap[this.generichash]) {
+        const components = {}
+        if (this.genericrecycleItem) {
+          const value = global.__mpxGenericsMap[this.generichash][this.genericrecycleItem]
+          components['recycle-item'] = value
+        }
+
+        if (this.genericlistHeader) {
+          const value = global.__mpxGenericsMap[this.generichash][this.genericlistHeader]
+          components['list-header'] = value
+        }
+
+        if (this.genericsectionHeader) {
+          const value = global.__mpxGenericsMap[this.generichash][this.genericsectionHeader]
+          components['section-header'] = value
+        }
+        this.$options.components = Object.assign({}, this.$options.components, components)
+      }
+    },
+    mounted() {
+      this.initPositions()
+      this.containerHeight = this.$refs.scrollView.clientHeight
+      this.isReady = true
+      this.placeholderStyle = `height: ${this.totalHeight}px`
+      if (!this.positions || !this.positions.length) {
+        return
+      }
+      this.start = this.getStartIndex(this.scrollTop)
+      this.end = this.start + this.visibleCount
+      this.setStartOffset()
+    },
+    methods: {
+      initPositions() {
+        let bottom = 0
+        this.positions = this._listData.map((item, index) => {
+          const height = this.getItemHeight(item, index, item.isSectionHeader ? 'sectionHeaderHeight': 'itemHeight')
+          const position = {
+            index,
+            height: height,
+            top: bottom,
+            bottom: bottom + height
+          }
+          bottom = position.bottom
+          return position
+        })
+
+        if (this.containerHeight) {
+          this.calculateVisibleCounts()
+        }
+      },
+      calculateVisibleCounts() {
+        this.visibleCounts = this.positions.map((_, startIndex) => {
+          let count = 0
+          let totalHeight = 0
+
+          for (let i = startIndex; i < this.positions.length; i++) {
+            totalHeight += this.positions[i].height
+            if (totalHeight > this.containerHeight) {
+              break
+            }
+            count++
+          }
+
+          // 如果是最后几个项目，确保全部显示
+          if (startIndex + count > this.positions.length - 3) {
+            count = this.positions.length - startIndex
+          }
+
+          return count
+        })
+      },
+
+      getStartIndex(scrollTop = 0) {
+        // 确保不会返回超出范围的索引
+        if (!this.positions.length) {
+          return 0
+        }
+
+        // 如果滚动位置为0，直接返回0
+        if (scrollTop <= 0) {
+          return 0
+        }
+        const index = this.binarySearch(this.positions, scrollTop)
+        return Math.max(0, Math.min(index, this._listData.length - 1))
+      },
+      binarySearch(list, value) {
+        if (!list.length) return 0
+
+        // 如果 scrollTop 超过了最后一个元素的底部
+        if (value >= list[list.length - 1].bottom) {
+          return list.length - 1
+        }
+
+        let start = 0
+        let end = list.length - 1
+
+        while (start <= end) {
+          const midIndex = Math.floor((start + end) / 2)
+          const midValue = list[midIndex]
+
+          if (value >= midValue.top && value < midValue.bottom) {
+            return midIndex
+          }
+
+          if (value < midValue.top) {
+            end = midIndex - 1
+          } else {
+            start = midIndex + 1
+          }
+        }
+
+        return Math.min(Math.max(0, start - 1), list.length - 1)
+      },
+      setStartOffset() {
+        if (!this.positions.length) return
+
+        if (this.start >= 1) {
+          // 确保 startIndex 不会超出范围
+          const startIndex = Math.min(
+            Math.max(0, this.start - this.aboveCount),
+            this.positions.length - 1
+          )
+
+          const offset = this.positions[startIndex].top
+
+          this.contentStyle = `transform: translateY(${offset}px);`
+        } else {
+          this.contentStyle = `transform: translateY(0px);`
+        }
+      },
+      getItemHeight(item, index, key) {
+        const { value, getter } = this[key]
+        if (typeof getter === 'function') {
+          return getter(item, index) || 0
+        } else {
+          return value || 0
+        }
+      },
+      handleScroll(e) {
+        const now = Date.now()
+        // 添加16ms的节流，大约60fps
+        if (now - this.lastScrollTime < 16) {
+          return
+        }
+        this.lastScrollTime = now
+
+        const { scrollTop } = e.detail
+        const newStart = this.getStartIndex(scrollTop)
+
+        // 只有当start发生足够变化时才更新，避免滚动触发重渲染
+        if (Math.abs(newStart - this.end) >= Math.floor(this.belowCount / 2)) {
+          this.start = newStart
+          this.end = this.start + this.visibleCount
+          this.setStartOffset()
+        }
+
+        this.triggerEvent('scroll', e)
+      },
+      onScrollToUpper(e) {
+        this.triggerEvent('scrolltoupper', e)
+      },
+      onScrollToLower(e) {
+        this.triggerEvent('scrolltolower', e)
+      },
+      scrollTo(params = {}) {
+      }
+    },
+    watch: {
+
+    },
+    components: {
+      ScrollView,
+      StickyHeader
+    }
+  }
+</script>
+
+<style scoped>
+  .mpx-recycle-view {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .content-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .infinite-list {
+    left: 0;
+    right: 0;
+    top: 0;
+    position: absolute;
+    will-change: transform;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+  }
+  .sticky-section {
+    position: absolute!important;
+  }
+</style>
diff --git a/packages/webpack-plugin/lib/web/processJSON.js b/packages/webpack-plugin/lib/web/processJSON.js
index 828633df39..60edaef746 100644
--- a/packages/webpack-plugin/lib/web/processJSON.js
+++ b/packages/webpack-plugin/lib/web/processJSON.js
@@ -10,7 +10,7 @@ const getJSONContent = require('../utils/get-json-content')
 const resolve = require('../utils/resolve')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
-const { RESOLVE_IGNORED_ERR } = require('../utils/const')
+const { RESOLVE_IGNORED_ERR, EXTEND_COMPONENTS_LIST } = require('../utils/const')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 
 module.exports = function (jsonContent, {
@@ -103,11 +103,15 @@ module.exports = function (jsonContent, {
       rulesRunnerOptions.mainKey = ctorType
     } else {
       if (useExtendComponents) {
+        const extendComponents = {}
         useExtendComponents.forEach((name) => {
-          emitWarning(
-            `extend component ${name} is not supported in web environment!`
-          )
+          if (EXTEND_COMPONENTS_LIST.includes(name)) {
+            extendComponents[name] = require.resolve(`../runtime/components/web/mpx-${name}.vue`)
+          } else {
+            emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
+          }
         })
+        jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
       }
     }
 

From e575ba8b5ed9bf1ff37c7d301e10cf82cd14151e Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 8 May 2025 16:45:06 +0800
Subject: [PATCH 100/126] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81scrollToIndex?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/web/mpx-recycle-view.vue       | 69 ++++++++++++-------
 1 file changed, 46 insertions(+), 23 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
index 4609bb229c..dcdc689e9e 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
@@ -2,17 +2,19 @@
   <div class="mpx-recycle-view">
     <ScrollView ref="scrollView" :enableSticky="enableSticky" :scroll-y="true" @scroll="handleScroll" :style="{ 'width': _width, 'height': _height }">
       <div class="content-wrapper">
-        <div class="infinite-list-placeholder" :style="placeholderStyle"></div>
-        <div class="infinite-list" :style="contentStyle">
+        <div class="infinite-list-placeholder" ref="infinitePlaceholder"></div>
+        <div class="infinite-list" ref="infiniteList">
           <template v-for="item in visibleData">
-            <section-header v-if="item.isSectionHeader" :key="'header' + item._index" :itemData="item" />
-            <recycle-item v-else :key="'item' + item._index" :itemData="item" />
+            <section-header v-if="item.itemData.isSectionHeader" :key="'header' + item._index" :itemData="item.itemData"/>
+            <recycle-item v-else :key="'item' + item._index" :itemData="item.itemData"/>
           </template>
         </div>
       </div>
-      <StickyHeader v-for="(stickyItem) in _stickyHeaders" class="sticky-section" :style="{'top': (positions[stickyItem._index] && positions[stickyItem._index].top || 0) + 'px'}">
-        <section-header :key="'header' + stickyItem._index" :itemData="stickyItem"/>
-      </StickyHeader>
+      <template v-if="_stickyHeaders && _stickyHeaders.length && enableSticky">
+        <StickyHeader v-for="stickyItem in _stickyHeaders" class="sticky-section" :style="{'top': (positions[stickyItem._index] && positions[stickyItem._index].top || 0) + 'px'}">
+          <section-header :key="'header' + stickyItem._index" :itemData="stickyItem.itemData"/>
+        </StickyHeader>
+      </template>
     </ScrollView>
   </div>
 </template>
@@ -93,7 +95,6 @@
         start: 0,
         end: 0,
         contentStyle: '',
-        placeholderStyle: '',
         containerHeight: 0,
         positions: [],
         isReady: false,
@@ -110,14 +111,20 @@
       },
       _listData() {
         return this.listData.map((item, index) => {
-          return Object.assign({}, item, { _index: `_${index}` })
+          return {
+            itemData: item,
+            _index: `_${index}`
+          }
         })
       },
       _stickyHeaders () {
          const data = []
          this.listData.forEach((item, index) => {
           if (item.isSectionHeader) {
-            data.push(Object.assign({}, item, { _index: `${index}` }))
+            data.push({
+              itemData: item,
+              _index: index
+            })
           }
         })
         return data
@@ -183,7 +190,7 @@
       listData: {
         handler() {
           this.initPositions()
-          this.placeholderStyle = `height: ${this.totalHeight}px`
+          this.setPlaceholderStyle()
           // 更新真实偏移量
           this.setStartOffset()
         }
@@ -222,9 +229,9 @@
     },
     mounted() {
       this.initPositions()
-      this.containerHeight = this.$refs.scrollView.clientHeight
+      this.containerHeight = this.$refs.scrollView.clientHeight || 0
       this.isReady = true
-      this.placeholderStyle = `height: ${this.totalHeight}px`
+      this.setPlaceholderStyle()
       if (!this.positions || !this.positions.length) {
         return
       }
@@ -233,10 +240,16 @@
       this.setStartOffset()
     },
     methods: {
+      setPlaceholderStyle () {
+        const infinitePlaceholder = this.$refs.infinitePlaceholder
+        if (infinitePlaceholder) {
+          infinitePlaceholder.style.height = `${this.totalHeight}px`
+        }
+      },
       initPositions() {
         let bottom = 0
         this.positions = this._listData.map((item, index) => {
-          const height = this.getItemHeight(item, index, item.isSectionHeader ? 'sectionHeaderHeight': 'itemHeight')
+          const height = this.getItemHeight(item.itemData, index, item.itemData.isSectionHeader ? 'sectionHeaderHeight': 'itemHeight')
           const position = {
             index,
             height: height,
@@ -315,8 +328,8 @@
         return Math.min(Math.max(0, start - 1), list.length - 1)
       },
       setStartOffset() {
-        if (!this.positions.length) return
-
+        const infiniteList = this.$refs.infiniteList
+        if (!this.positions.length || !infiniteList) return
         if (this.start >= 1) {
           // 确保 startIndex 不会超出范围
           const startIndex = Math.min(
@@ -325,10 +338,9 @@
           )
 
           const offset = this.positions[startIndex].top
-
-          this.contentStyle = `transform: translateY(${offset}px);`
+          infiniteList.style.transform = `translateY(${offset}px)`
         } else {
-          this.contentStyle = `transform: translateY(0px);`
+          infiniteList.style.transform = 'none'
         }
       },
       getItemHeight(item, index, key) {
@@ -365,11 +377,22 @@
       onScrollToLower(e) {
         this.triggerEvent('scrolltolower', e)
       },
-      scrollTo(params = {}) {
+      scrollToIndex({index, animated}) {
+        const isStickyHeader = this._listData[index].itemData?.isSectionHeader
+        let prevHeaderHeight = 0
+        // 如果不是Sticky header 查找最近一个吸顶的 sticky header
+        if (!isStickyHeader && this.enableSticky) {
+           for (let i = index - 1; i >= 0; i--) {
+          if (this._listData[i].itemData?.isSectionHeader) {
+            prevHeaderHeight = this.positions[i].height
+            break
+          }
+        }
+        }
+       
+        const top = (this.positions[index]?.top || 0) - prevHeaderHeight
+        this.$refs.scrollView?.bs.scrollTo(0, -top, animated ? 200 : 0)
       }
-    },
-    watch: {
-
     },
     components: {
       ScrollView,

From b7993c2947feb532a75228e9e34d5bc0e6ee5e52 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 8 May 2025 17:08:43 +0800
Subject: [PATCH 101/126] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/web/mpx-recycle-view.vue       | 45 +++++++++++++------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
index dcdc689e9e..9a2efd5167 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
@@ -1,6 +1,17 @@
 <template>
   <div class="mpx-recycle-view">
-    <ScrollView ref="scrollView" :enableSticky="enableSticky" :scroll-y="true" @scroll="handleScroll" :style="{ 'width': _width, 'height': _height }">
+    <ScrollView ref="scrollView"
+    :enableSticky="enableSticky"
+    :scroll-y="true" 
+    :enhanced="enhanced"
+    :scrollWithAnimation="scrollWithAnimation"
+    :refresherEnabled="refresherEnabled"
+    :refresherTriggered="refresherTriggered"
+    @scroll="onScroll"
+    @scrolltolower="onScrolltolower" 
+    @refresherrefresh="onRefresherrefresh" 
+    :style="{ 'width': _width, 'height': _height }"
+    >
       <div class="content-wrapper">
         <div class="infinite-list-placeholder" ref="infinitePlaceholder"></div>
         <div class="infinite-list" ref="infiniteList">
@@ -33,6 +44,19 @@
         }
       },
       enableSticky: Boolean,
+      scrollWithAnimation: Boolean,
+      enhanced: {
+        type: Boolean,
+        default: false
+      },
+      refresherEnabled: {
+        type: Boolean,
+        default: false
+      },
+      refresherTriggered: {
+        type: Boolean,
+        default: false
+      },
       minRenderCount: {
         type: Number,
         default: 10
@@ -351,14 +375,7 @@
           return value || 0
         }
       },
-      handleScroll(e) {
-        const now = Date.now()
-        // 添加16ms的节流，大约60fps
-        if (now - this.lastScrollTime < 16) {
-          return
-        }
-        this.lastScrollTime = now
-
+      onScroll(e) {
         const { scrollTop } = e.detail
         const newStart = this.getStartIndex(scrollTop)
 
@@ -369,13 +386,13 @@
           this.setStartOffset()
         }
 
-        this.triggerEvent('scroll', e)
+        this.$emit('scroll', e)
       },
-      onScrollToUpper(e) {
-        this.triggerEvent('scrolltoupper', e)
+      onScrolltolower(e) {
+        this.$emit('scrolltolower', e)
       },
-      onScrollToLower(e) {
-        this.triggerEvent('scrolltolower', e)
+      onRefresherrefresh(e) {
+        this.$emit('refresherrefresh', e)
       },
       scrollToIndex({index, animated}) {
         const isStickyHeader = this._listData[index].itemData?.isSectionHeader

From 548ac5eca46ad3d079e41403b5f88c4ff415cdd6 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 8 May 2025 17:30:38 +0800
Subject: [PATCH 102/126] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81list-header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/web/mpx-recycle-view.vue        | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
index 9a2efd5167..0906a09355 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
@@ -13,15 +13,19 @@
     :style="{ 'width': _width, 'height': _height }"
     >
       <div class="content-wrapper">
-        <div class="infinite-list-placeholder" ref="infinitePlaceholder"></div>
+        <template v-if="genericlistHeader">
+          <list-header :listHeaderData="listHeaderData"></list-header>
+        </template>
+        <div class="infinite-list-placeholder" ref="infinitePlaceholder">
+        </div>
         <div class="infinite-list" ref="infiniteList">
           <template v-for="item in visibleData">
-            <section-header v-if="item.itemData.isSectionHeader" :key="'header' + item._index" :itemData="item.itemData"/>
-            <recycle-item v-else :key="'item' + item._index" :itemData="item.itemData"/>
+            <section-header v-if="item.itemData.isSectionHeader && genericsectionHeader" :key="'header' + item._index" :itemData="item.itemData"/>
+            <recycle-item v-if="!item.itemData.isSectionHeader && genericrecycleItem" :key="'item' + item._index" :itemData="item.itemData"/>
           </template>
         </div>
       </div>
-      <template v-if="_stickyHeaders && _stickyHeaders.length && enableSticky">
+      <template v-if="_stickyHeaders && _stickyHeaders.length && enableSticky && genericsectionHeader">
         <StickyHeader v-for="stickyItem in _stickyHeaders" class="sticky-section" :style="{'top': (positions[stickyItem._index] && positions[stickyItem._index].top || 0) + 'px'}">
           <section-header :key="'header' + stickyItem._index" :itemData="stickyItem.itemData"/>
         </StickyHeader>
@@ -43,6 +47,7 @@
           return []
         }
       },
+      listHeaderData: Object,
       enableSticky: Boolean,
       scrollWithAnimation: Boolean,
       enhanced: {
@@ -272,6 +277,9 @@
       },
       initPositions() {
         let bottom = 0
+        if (this.genericlistHeader) {
+          bottom = this.getItemHeight(this.listHeaderData, 0, 'listHeaderHeight') || 0
+        }
         this.positions = this._listData.map((item, index) => {
           const height = this.getItemHeight(item.itemData, index, item.itemData.isSectionHeader ? 'sectionHeaderHeight': 'itemHeight')
           const position = {
@@ -364,7 +372,7 @@
           const offset = this.positions[startIndex].top
           infiniteList.style.transform = `translateY(${offset}px)`
         } else {
-          infiniteList.style.transform = 'none'
+          infiniteList.style.transform = `translateY(${this.positions[0].top}px)`
         }
       },
       getItemHeight(item, index, key) {

From 51051ba4908fca19735baf8b2d9184216ffcfd99 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 8 May 2025 19:56:19 +0800
Subject: [PATCH 103/126] =?UTF-8?q?chore:=20=E4=BD=BF=E7=94=A8enableSticky?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=BA=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-recycle-view.tsx     | 89 +++++++++++--------
 .../components/wx/mpx-recycle-view/index.mpx  | 35 ++++----
 2 files changed, 73 insertions(+), 51 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index 0bb4839e3c..f6cc7fa670 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useCallback, useState, useEffect, useMemo, ForwardedRef, ReactElement } from 'react'
+import React, { forwardRef, useRef, useCallback, useState, useEffect, useMemo, ForwardedRef, ReactElement, createElement } from 'react'
 import { SectionList, FlatList, RefreshControl, NativeSyntheticEvent, NativeScrollEvent } from 'react-native'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef from './useNodesRef'
@@ -53,7 +53,6 @@ interface RecycleViewProps {
   height?: number | string;
   width?: number | string;
   listData?: ListItem[];
-  type?: 'normal' | 'section';
   generichash?: string;
   style?: Record<string, any>;
   itemHeight?: ItemHeightType;
@@ -88,7 +87,11 @@ interface ScrollPositionParams {
 
 const getGenericComponent = ({ props, ref, generichash, generickey }: GenericComponentProps): ReactElement => {
   const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
-  return <GenericComponent ref={ref} {...props}/>
+  return createElement(GenericComponent,
+    extendObject({}, {
+      ref: ref
+    }, props)
+  )
 }
 
 const Item = forwardRef<any, ItemProps>((props, ref) => {
@@ -114,7 +117,6 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
     height,
     width,
     listData,
-    type,
     generichash,
     style = {},
     itemHeight = {},
@@ -191,7 +193,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
 
   const scrollToIndex = ({ index, animated, viewOffset = 0, viewPosition = 0 }: ScrollPositionParams) => {
     if (scrollViewRef.current) {
-      if (type === 'section') {
+      if (enableSticky) {
         // 通过索引映射表快速定位位置
         const position = indexMap.current[index]
         const [sectionIndex, itemIndex] = (position as string).split('_')
@@ -213,7 +215,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
       return 0
     }
     if ((itemHeight as ItemHeightType).getter) {
-      if (type === 'section') {
+      if (enableSticky) {
         const item = convertedListData[sectionIndex].data[rowIndex]
         // 使用getOriginalIndex获取原始索引
         const originalIndex = getOriginalIndex(sectionIndex, rowIndex)
@@ -291,10 +293,9 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
         }
         // 将 item 添加到当前 section 的 data 中
         const itemIndex = currentSection.data.length
-        currentSection.data.push({
-          ...item,
+        currentSection.data.push(extendObject({}, item, {
           _originalItemIndex: index
-        })
+        }))
         let sectionIndex
         // 为 item 添加索引映射 - 存储格式为: "sectionIndex_itemIndex"
         if (!currentSection.hasSectionHeader && sections.length === 0) {
@@ -320,7 +321,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
   }, [])
 
   const convertedListData = useMemo(() => {
-    if (type === 'section') {
+    if (enableSticky) {
       return convertToSectionListData(listData || []) || []
     } else {
       return listData
@@ -336,7 +337,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
       offset += listHeaderHeight.getter?.() || listHeaderHeight.value || 0
     }
 
-    if (type === 'section') {
+    if (enableSticky) {
       // 遍历所有 sections
       convertedListData.forEach((section: Section, sectionIndex: number) => {
       // 添加 section header 的位置信息
@@ -426,30 +427,48 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
     'bindrefresherrefresh'
   ], { layoutRef })
 
-  return (
-    type === 'section'
-      ? <SectionList
-        {...innerProps as any}
-        style={[{ height, width }, style, layoutStyle]}
-        sections={convertedListData}
-        keyExtractor={(item, index) => item + index}
-        renderItem={renderItem}
-        getItemLayout={getItemLayout}
-        ListHeaderComponent={(generichash && genericListHeader && renderListHeader) || null}
-        renderSectionHeader={(generichash && genericsectionHeader && renderSectionHeader) || null}
-        refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
-      />
-      : <FlatList
-        {...innerProps as any}
-        style={[{ height, width }, style, layoutStyle]}
-        data={convertedListData}
-        keyExtractor={(item, index) => item + index}
-        renderItem={renderItem}
-        getItemLayout={getItemLayout}
-        ListHeaderComponent={(generichash && genericListHeader && renderListHeader) || null}
-        refreshControl={refresherEnabled ? <RefreshControl onRefresh={onRefresh} refreshing={refreshing}/> : undefined}
-      />
-  )
+  return enableSticky
+    ? createElement(
+      SectionList,
+      extendObject(
+        {
+          style: [{ height, width }, style, layoutStyle],
+          sections: convertedListData,
+          keyExtractor: (item: any, index: number) => item + index,
+          renderItem: renderItem,
+          getItemLayout: getItemLayout,
+          ListHeaderComponent: (generichash && genericListHeader && renderListHeader) || null,
+          renderSectionHeader: (generichash && genericsectionHeader && renderSectionHeader) || null,
+          refreshControl: refresherEnabled
+            ? React.createElement(RefreshControl, {
+              onRefresh: onRefresh,
+              refreshing: refreshing
+            })
+            : undefined
+        },
+        innerProps
+      )
+    )
+    : createElement(
+      FlatList,
+      extendObject(
+        {
+          style: [{ height, width }, style, layoutStyle],
+          data: convertedListData,
+          keyExtractor: (item: any, index: number) => item + index,
+          renderItem: renderItem,
+          getItemLayout: getItemLayout,
+          ListHeaderComponent: (generichash && genericListHeader && renderListHeader) || null,
+          refreshControl: refresherEnabled
+            ? React.createElement(RefreshControl, {
+              onRefresh: onRefresh,
+              refreshing: refreshing
+            })
+            : undefined
+        },
+        innerProps
+      )
+    )
 })
 
 export default RecycleView
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
index 50c7eaaa77..cc5e4b8291 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
@@ -20,14 +20,13 @@
       <list-header listHeaderData="{{listHeaderData}}"></list-header>
     </block>
     <block wx:for="{{convertedListData}}" wx:key="index">
-      <block wx:if="{{type === 'section'}}">
+      <block wx:if="{{enableSticky}}">
         <sticky-section>
           <!-- section header -->
           <block wx:if="{{item.hasSectionHeader && mpxGenericSectionHeader}}">
-            <sticky-header wx:if="{{enableSticky}}">
+            <sticky-header>
               <section-header itemData="{{item.headerData}}" id="{{item._domId}}"></section-header>
             </sticky-header>
-            <section-header wx:else id="{{item._domId}}" itemData="{{item.headerData}}"></section-header>
           </block>
 
           <block
@@ -41,13 +40,21 @@
           </block>
         </sticky-section>
       </block>
-      <block wx:if="{{type !== 'section' && (mpxGenericRecycleItem || mpxGenericSectionHeader)}}">
-        <section-header
-          wx:if="{{item.itemData && item.itemData.isSectionHeader}}"
-          id="{{item._domId}}"
-          itemData="{{item.itemData}}"
-        ></section-header>
-        <recycle-item wx:else itemData="{{item.itemData}}" id="{{item._domId}}"></recycle-item>
+      <block wx:else>
+        <block wx:if="{{item.itemData && item.itemData.isSectionHeader}}">
+          <section-header
+            wx:if="{{mpxGenericSectionHeader}}"
+            id="{{item._domId}}"
+            itemData="{{item.itemData}}"
+          ></section-header>
+        </block>
+        <block wx:else>
+          <recycle-item
+            wx:if="{{mpxGenericRecycleItem}}"
+            itemData="{{item.itemData}}"
+            id="{{item._domId}}"
+          ></recycle-item>
+        </block>
       </block>
     </block>
   </scroll-view>
@@ -70,10 +77,6 @@
         type: Array,
         value: []
       },
-      type: {
-        type: String,
-        value: ''
-      },
       mpxGenericRecycleItem: String,
       mpxGenericSectionHeader: String,
       mpxGenericListHeader: String,
@@ -120,7 +123,7 @@
     watch: {
       listData: {
         handler(newVal) {
-          if (this.type === 'section') {
+          if (this.enableSticky) {
             this.convertedListData = this.convertToSectionListData(newVal)
           } else {
             this.convertedListData = this.convertToListData(newVal)
@@ -131,7 +134,7 @@
     },
     methods: {
       formatDimension(value) {
-        return typeof value === 'number' ? `${value}px` : (value || '100%')
+        return typeof value === 'number' ? `${value}px` : value || '100%'
       },
       onScroll(e) {
         this.triggerEvent('scroll', e)

From 5fcc34178181dae7affa9f0678c8fdc627625d93 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 8 May 2025 20:44:52 +0800
Subject: [PATCH 104/126] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B3=A8=E5=86=8C=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/web/mpx-recycle-view.vue       | 80 ++++++++++++-------
 1 file changed, 52 insertions(+), 28 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
index 0906a09355..2e9fc7737e 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
@@ -1,16 +1,18 @@
 <template>
   <div class="mpx-recycle-view">
-    <ScrollView ref="scrollView"
+    <ScrollView
+    ref="scrollView"
     :enableSticky="enableSticky"
     :scroll-y="true" 
     :enhanced="enhanced"
     :scrollWithAnimation="scrollWithAnimation"
     :refresherEnabled="refresherEnabled"
     :refresherTriggered="refresherTriggered"
+    :scrollOptions="scrollOptions"
     @scroll="onScroll"
     @scrolltolower="onScrolltolower" 
     @refresherrefresh="onRefresherrefresh" 
-    :style="{ 'width': _width, 'height': _height }"
+    :style="scrollViewStyle"
     >
       <div class="content-wrapper">
         <template v-if="genericlistHeader">
@@ -118,6 +120,12 @@
         type: String,
         default: ''
       },
+      'scrollOptions': {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      }
     },
     data() {
       return {
@@ -158,6 +166,9 @@
         })
         return data
       },
+      scrollViewStyle() {
+        return `height: ${this.formatDimension(this.height)};width: ${this.formatDimension(this.width)}`
+      },
       _scrollTop() {
         // 使用初始值或当前值
         return this.isReady ? this.scrollTop : 0
@@ -210,9 +221,16 @@
           }
         })
       },
-      totalHeight() {
+      _listHeaderHeight () {
+        let listHeaderHeight = 0
+        if (this.genericlistHeader) {
+          listHeaderHeight = this.getItemHeight(this.listHeaderData, 0, 'listHeaderHeight') || 0
+        }
+        return listHeaderHeight
+      },
+      placeholderHeight() {
         if (!this.positions.length) return 0
-        return this.positions[this.positions.length - 1].bottom
+        return (this.positions[this.positions.length - 1].bottom - this._listHeaderHeight) || 0
       }
     },
     watch: {
@@ -237,28 +255,11 @@
       }
     },
     created() {
-      if (this.generichash && global.__mpxGenericsMap[this.generichash]) {
-        const components = {}
-        if (this.genericrecycleItem) {
-          const value = global.__mpxGenericsMap[this.generichash][this.genericrecycleItem]
-          components['recycle-item'] = value
-        }
-
-        if (this.genericlistHeader) {
-          const value = global.__mpxGenericsMap[this.generichash][this.genericlistHeader]
-          components['list-header'] = value
-        }
-
-        if (this.genericsectionHeader) {
-          const value = global.__mpxGenericsMap[this.generichash][this.genericsectionHeader]
-          components['section-header'] = value
-        }
-        this.$options.components = Object.assign({}, this.$options.components, components)
-      }
+      this.registerGenericComponents()
     },
     mounted() {
       this.initPositions()
-      this.containerHeight = this.$refs.scrollView.clientHeight || 0
+      this.containerHeight = this.$refs.scrollView?.$el?.clientHeight || 0
       this.isReady = true
       this.setPlaceholderStyle()
       if (!this.positions || !this.positions.length) {
@@ -269,17 +270,40 @@
       this.setStartOffset()
     },
     methods: {
+      registerGenericComponents() {
+        if (!this.generichash || !global.__mpxGenericsMap[this.generichash]) {
+          return
+        }
+
+        let components = null
+        const genericList = [
+          ['recycle-item', this.genericrecycleItem],
+          ['list-header', this.genericlistHeader],
+          ['section-header', this.genericsectionHeader]
+        ]
+
+        for (const [key, value] of genericList) {
+          if (value) {
+            components = components || {}
+            components[key] = global.__mpxGenericsMap[this.generichash][value]
+          }
+        }
+
+        if (components) {
+          this.$options.components = Object.assign({}, this.$options.components, components)
+        }
+      },
+      formatDimension(value) {
+        return typeof value === 'number' ? `${value}px` : value || '100%'
+      },
       setPlaceholderStyle () {
         const infinitePlaceholder = this.$refs.infinitePlaceholder
         if (infinitePlaceholder) {
-          infinitePlaceholder.style.height = `${this.totalHeight}px`
+          infinitePlaceholder.style.height = `${this.placeholderHeight}px`
         }
       },
       initPositions() {
-        let bottom = 0
-        if (this.genericlistHeader) {
-          bottom = this.getItemHeight(this.listHeaderData, 0, 'listHeaderHeight') || 0
-        }
+        let bottom = this._listHeaderHeight || 0
         this.positions = this._listData.map((item, index) => {
           const height = this.getItemHeight(item.itemData, index, item.itemData.isSectionHeader ? 'sectionHeaderHeight': 'itemHeight')
           const position = {

From 5305a4810f92774ea4c1d36894852d9beb63030a Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Thu, 8 May 2025 20:58:18 +0800
Subject: [PATCH 105/126] =?UTF-8?q?feat:=20scrollToIndex=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?viewPosition?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/web/mpx-recycle-view.vue       | 870 +++++++++---------
 1 file changed, 457 insertions(+), 413 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
index 2e9fc7737e..064dab92c0 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
@@ -1,35 +1,61 @@
 <template>
   <div class="mpx-recycle-view">
     <ScrollView
-    ref="scrollView"
-    :enableSticky="enableSticky"
-    :scroll-y="true" 
-    :enhanced="enhanced"
-    :scrollWithAnimation="scrollWithAnimation"
-    :refresherEnabled="refresherEnabled"
-    :refresherTriggered="refresherTriggered"
-    :scrollOptions="scrollOptions"
-    @scroll="onScroll"
-    @scrolltolower="onScrolltolower" 
-    @refresherrefresh="onRefresherrefresh" 
-    :style="scrollViewStyle"
+      ref="scrollView"
+      :enableSticky="enableSticky"
+      :scroll-y="true"
+      :enhanced="enhanced"
+      :scrollWithAnimation="scrollWithAnimation"
+      :refresherEnabled="refresherEnabled"
+      :refresherTriggered="refresherTriggered"
+      :scrollOptions="scrollOptions"
+      @scroll="onScroll"
+      @scrolltolower="onScrolltolower"
+      @refresherrefresh="onRefresherrefresh"
+      :style="scrollViewStyle"
     >
       <div class="content-wrapper">
         <template v-if="genericlistHeader">
           <list-header :listHeaderData="listHeaderData"></list-header>
         </template>
-        <div class="infinite-list-placeholder" ref="infinitePlaceholder">
-        </div>
+        <div class="infinite-list-placeholder" ref="infinitePlaceholder"></div>
         <div class="infinite-list" ref="infiniteList">
           <template v-for="item in visibleData">
-            <section-header v-if="item.itemData.isSectionHeader && genericsectionHeader" :key="'header' + item._index" :itemData="item.itemData"/>
-            <recycle-item v-if="!item.itemData.isSectionHeader && genericrecycleItem" :key="'item' + item._index" :itemData="item.itemData"/>
+            <section-header
+              v-if="item.itemData.isSectionHeader && genericsectionHeader"
+              :key="'header' + item._index"
+              :itemData="item.itemData"
+            />
+            <recycle-item
+              v-if="!item.itemData.isSectionHeader && genericrecycleItem"
+              :key="'item' + item._index"
+              :itemData="item.itemData"
+            />
           </template>
         </div>
       </div>
-      <template v-if="_stickyHeaders && _stickyHeaders.length && enableSticky && genericsectionHeader">
-        <StickyHeader v-for="stickyItem in _stickyHeaders" class="sticky-section" :style="{'top': (positions[stickyItem._index] && positions[stickyItem._index].top || 0) + 'px'}">
-          <section-header :key="'header' + stickyItem._index" :itemData="stickyItem.itemData"/>
+      <template
+        v-if="
+          _stickyHeaders &&
+          _stickyHeaders.length &&
+          enableSticky &&
+          genericsectionHeader
+        "
+      >
+        <StickyHeader
+          v-for="stickyItem in _stickyHeaders"
+          class="sticky-section"
+          :style="{
+            top:
+              ((positions[stickyItem._index] &&
+                positions[stickyItem._index].top) ||
+                0) + 'px',
+          }"
+        >
+          <section-header
+            :key="'header' + stickyItem._index"
+            :itemData="stickyItem.itemData"
+          />
         </StickyHeader>
       </template>
     </ScrollView>
@@ -37,440 +63,458 @@
 </template>
 
 <script>
-  import ScrollView from './mpx-scroll-view.vue'
-  import StickyHeader from './mpx-sticky-header.vue'
-
+import ScrollView from "./mpx-scroll-view.vue";
+import StickyHeader from "./mpx-sticky-header.vue";
 
-  export default {
-    props: {
-      listData: {
-        type: Array,
-        default() {
-          return []
-        }
-      },
-      listHeaderData: Object,
-      enableSticky: Boolean,
-      scrollWithAnimation: Boolean,
-      enhanced: {
-        type: Boolean,
-        default: false
-      },
-      refresherEnabled: {
-        type: Boolean,
-        default: false
-      },
-      refresherTriggered: {
-        type: Boolean,
-        default: false
-      },
-      minRenderCount: {
-        type: Number,
-        default: 10
-      },
-      bufferScale: {
-        type: Number,
-        default: 1
-      },
-      'enable-sticky': {
-        type: Boolean,
-        default: false
-      },
-      'height': {
-        type: [String, Number],
-        default: '100%'
-      },
-      'width': {
-        type: [String, Number],
-        default: '100%'
-      },
-      'scroll-y': {
-        type: Boolean,
-        default: true
-      },
-      'itemHeight': {
-        type: Object,
-        default: {}
-      },
-      'listHeaderHeight': {
-        type: Object,
-        default: {}
-      },
-      'sectionHeaderHeight': {
-        type: Object,
-        default: {}
-      },
-      'type': {
-        type: String,
-        default: ''
-      },
-      'generichash': {
-        type: String,
-        default: ''
+export default {
+  props: {
+    listData: {
+      type: Array,
+      default() {
+        return [];
       },
-      'genericlist-header': {
-        type: String,
-        default: ''
-      },
-      'genericrecycle-item': {
-        type: String,
-        default: ''
-      },
-      'genericsection-header': {
-        type: String,
-        default: ''
-      },
-      'scrollOptions': {
-        type: Object,
-        default: () => {
-          return {}
-        }
-      }
     },
-    data() {
-      return {
-        start: 0,
-        end: 0,
-        contentStyle: '',
-        containerHeight: 0,
-        positions: [],
-        isReady: false,
-        lastScrollTime: 0,
-        visibleCounts: []
-      }
+    listHeaderData: Object,
+    enableSticky: Boolean,
+    scrollWithAnimation: Boolean,
+    enhanced: {
+      type: Boolean,
+      default: false,
     },
-    computed: {
-      _width() {
-        return this.width ? `${this.width}px` : '100%'
-      },
-      _height() {
-        return this.height ? `${this.height}px` : '100%'
+    refresherEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    refresherTriggered: {
+      type: Boolean,
+      default: false,
+    },
+    minRenderCount: {
+      type: Number,
+      default: 10,
+    },
+    bufferScale: {
+      type: Number,
+      default: 1,
+    },
+    "enable-sticky": {
+      type: Boolean,
+      default: false,
+    },
+    height: {
+      type: [String, Number],
+      default: "100%",
+    },
+    width: {
+      type: [String, Number],
+      default: "100%",
+    },
+    "scroll-y": {
+      type: Boolean,
+      default: true,
+    },
+    itemHeight: {
+      type: Object,
+      default: {},
+    },
+    listHeaderHeight: {
+      type: Object,
+      default: {},
+    },
+    sectionHeaderHeight: {
+      type: Object,
+      default: {},
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+    generichash: {
+      type: String,
+      default: "",
+    },
+    "genericlist-header": {
+      type: String,
+      default: "",
+    },
+    "genericrecycle-item": {
+      type: String,
+      default: "",
+    },
+    "genericsection-header": {
+      type: String,
+      default: "",
+    },
+    scrollOptions: {
+      type: Object,
+      default: () => {
+        return {};
       },
-      _listData() {
-        return this.listData.map((item, index) => {
-          return {
+    },
+  },
+  data() {
+    return {
+      start: 0,
+      end: 0,
+      containerHeight: 0,
+      positions: [],
+      visibleCounts: [],
+    };
+  },
+  computed: {
+    _width() {
+      return this.width ? `${this.width}px` : "100%";
+    },
+    _height() {
+      return this.height ? `${this.height}px` : "100%";
+    },
+    _listData() {
+      return this.listData.map((item, index) => {
+        return {
+          itemData: item,
+          _index: `_${index}`,
+        };
+      });
+    },
+    _stickyHeaders() {
+      const data = [];
+      this.listData.forEach((item, index) => {
+        if (item.isSectionHeader) {
+          data.push({
             itemData: item,
-            _index: `_${index}`
-          }
-        })
-      },
-      _stickyHeaders () {
-         const data = []
-         this.listData.forEach((item, index) => {
-          if (item.isSectionHeader) {
-            data.push({
-              itemData: item,
-              _index: index
-            })
-          }
-        })
-        return data
-      },
-      scrollViewStyle() {
-        return `height: ${this.formatDimension(this.height)};width: ${this.formatDimension(this.width)}`
-      },
-      _scrollTop() {
-        // 使用初始值或当前值
-        return this.isReady ? this.scrollTop : 0
-      },
-      visibleCount() {
-        if (!this.visibleCounts.length) return this.minRenderCount
-        return Math.max(this.visibleCounts[this.start], this.minRenderCount)
-      },
-      aboveCount() {
-        if (!this._listData.length || !this.visibleCounts.length) return 0
-        let count = 0
-        const startIndex = Math.max(0, this.start)
-        const endIndex = Math.max(0, startIndex - this.bufferScale)
-
-        for (let i = startIndex; i > endIndex; i--) {
-          count += this.visibleCounts[i] || 0
+            _index: index,
+          });
         }
+      });
+      return data;
+    },
+    scrollViewStyle() {
+      return `height: ${this.formatDimension(
+        this.height
+      )};width: ${this.formatDimension(this.width)}`;
+    },
+    visibleCount() {
+      if (!this.visibleCounts.length) return this.minRenderCount;
+      return Math.max(this.visibleCounts[this.start], this.minRenderCount);
+    },
+    aboveCount() {
+      if (!this._listData.length || !this.visibleCounts.length) return 0;
+      let count = 0;
+      const startIndex = Math.max(0, this.start);
+      const endIndex = Math.max(0, startIndex - this.bufferScale);
+
+      for (let i = startIndex; i > endIndex; i--) {
+        count += this.visibleCounts[i] || 0;
+      }
 
-        return count
-      },
-      belowCount() {
-        if (!this._listData.length || !this.visibleCounts.length) return 0
-        let count = 0
-        const startIndex = Math.min(this.start, this._listData.length - 1)
-        const endIndex = Math.min(startIndex + this.bufferScale, this._listData.length - 1)
-
-        for (let i = startIndex; i < endIndex; i++) {
-          count += this.visibleCounts[i] || 0
-        }
-
-        return count
-      },
-      visibleData() {
-        if (!this._listData.length) return []
-
-        const start = Math.min(Math.max(0, this.start - this.aboveCount), this._listData.length - 1)
-
-        let end = Math.min(this._listData.length, this.start + this.visibleCount + this.belowCount)
+      return count;
+    },
+    belowCount() {
+      if (!this._listData.length || !this.visibleCounts.length) return 0;
+      let count = 0;
+      const startIndex = Math.min(this.start, this._listData.length - 1);
+      const endIndex = Math.min(
+        startIndex + this.bufferScale,
+        this._listData.length - 1
+      );
+
+      for (let i = startIndex; i < endIndex; i++) {
+        count += this.visibleCounts[i] || 0;
+      }
 
-        // 如果接近列表末尾，确保显示所有剩余项目
-        if (end > this._listData.length - 3) {
-          end = this._listData.length
-        }
+      return count;
+    },
+    visibleData() {
+      if (!this._listData.length) return [];
+
+      const start = Math.min(
+        Math.max(0, this.start - this.aboveCount),
+        this._listData.length - 1
+      );
+
+      let end = Math.min(
+        this._listData.length,
+        this.start + this.visibleCount + this.belowCount
+      );
+
+      // 如果接近列表末尾，确保显示所有剩余项目
+      if (end > this._listData.length - 3) {
+        end = this._listData.length;
+      }
 
-        return this._listData.slice(start, end).map((item, idx) => {
-          const realIndex = start + idx
-          return {
-            ...item,
-            _index: `_${realIndex}`
-          }
-        })
-      },
-      _listHeaderHeight () {
-        let listHeaderHeight = 0
-        if (this.genericlistHeader) {
-          listHeaderHeight = this.getItemHeight(this.listHeaderData, 0, 'listHeaderHeight') || 0
-        }
-        return listHeaderHeight
-      },
-      placeholderHeight() {
-        if (!this.positions.length) return 0
-        return (this.positions[this.positions.length - 1].bottom - this._listHeaderHeight) || 0
+      return this._listData.slice(start, end).map((item, idx) => {
+        const realIndex = start + idx;
+        return {
+          ...item,
+          _index: `_${realIndex}`,
+        };
+      });
+    },
+    _listHeaderHeight() {
+      let listHeaderHeight = 0;
+      if (this.genericlistHeader) {
+        listHeaderHeight =
+          this.getItemHeight(this.listHeaderData, 0, "listHeaderHeight") || 0;
       }
+      return listHeaderHeight;
     },
-    watch: {
-      listData: {
-        handler() {
-          this.initPositions()
-          this.setPlaceholderStyle()
-          // 更新真实偏移量
-          this.setStartOffset()
-        }
-      },
-      scrollTop: {
-        handler(val) {
-          this.start = this.getStartIndex(val)
-          this.end = this.start + this.visibleCount
-          this.setStartOffset()
-        },
-        immediate: true
+    placeholderHeight() {
+      if (!this.positions.length) return 0;
+      return (
+        this.positions[this.positions.length - 1].bottom -
+          this._listHeaderHeight || 0
+      );
+    },
+  },
+  watch: {
+    listData: {
+      handler() {
+        this.initPositions();
+        this.setPlaceholderStyle();
+        // 更新真实偏移量
+        this.setStartOffset();
       },
-      containerHeight() {
-        this.calculateVisibleCounts()
-      }
     },
-    created() {
-      this.registerGenericComponents()
+    containerHeight() {
+      this.calculateVisibleCounts();
     },
-    mounted() {
-      this.initPositions()
-      this.containerHeight = this.$refs.scrollView?.$el?.clientHeight || 0
-      this.isReady = true
-      this.setPlaceholderStyle()
-      if (!this.positions || !this.positions.length) {
-        return
+  },
+  created() {
+    this.registerGenericComponents();
+  },
+  mounted() {
+    this.initPositions();
+    this.containerHeight = this.$refs.scrollView?.$el?.clientHeight || 0;
+    this.setPlaceholderStyle();
+    if (!this.positions || !this.positions.length) {
+      return;
+    }
+    this.start = this.getStartIndex();
+    this.end = this.start + this.visibleCount;
+    this.setStartOffset();
+  },
+  methods: {
+    registerGenericComponents() {
+      if (!this.generichash || !global.__mpxGenericsMap[this.generichash]) {
+        return;
       }
-      this.start = this.getStartIndex(this.scrollTop)
-      this.end = this.start + this.visibleCount
-      this.setStartOffset()
-    },
-    methods: {
-      registerGenericComponents() {
-        if (!this.generichash || !global.__mpxGenericsMap[this.generichash]) {
-          return
-        }
 
-        let components = null
-        const genericList = [
-          ['recycle-item', this.genericrecycleItem],
-          ['list-header', this.genericlistHeader],
-          ['section-header', this.genericsectionHeader]
-        ]
-
-        for (const [key, value] of genericList) {
-          if (value) {
-            components = components || {}
-            components[key] = global.__mpxGenericsMap[this.generichash][value]
-          }
+      let components = null;
+      const genericList = [
+        ["recycle-item", this.genericrecycleItem],
+        ["list-header", this.genericlistHeader],
+        ["section-header", this.genericsectionHeader],
+      ];
+
+      for (const [key, value] of genericList) {
+        if (value) {
+          components = components || {};
+          components[key] = global.__mpxGenericsMap[this.generichash][value];
         }
+      }
 
-        if (components) {
-          this.$options.components = Object.assign({}, this.$options.components, components)
-        }
-      },
-      formatDimension(value) {
-        return typeof value === 'number' ? `${value}px` : value || '100%'
-      },
-      setPlaceholderStyle () {
-        const infinitePlaceholder = this.$refs.infinitePlaceholder
-        if (infinitePlaceholder) {
-          infinitePlaceholder.style.height = `${this.placeholderHeight}px`
-        }
-      },
-      initPositions() {
-        let bottom = this._listHeaderHeight || 0
-        this.positions = this._listData.map((item, index) => {
-          const height = this.getItemHeight(item.itemData, index, item.itemData.isSectionHeader ? 'sectionHeaderHeight': 'itemHeight')
-          const position = {
-            index,
-            height: height,
-            top: bottom,
-            bottom: bottom + height
+      if (components) {
+        this.$options.components = Object.assign(
+          {},
+          this.$options.components,
+          components
+        );
+      }
+    },
+    formatDimension(value) {
+      return typeof value === "number" ? `${value}px` : value || "100%";
+    },
+    setPlaceholderStyle() {
+      const infinitePlaceholder = this.$refs.infinitePlaceholder;
+      if (infinitePlaceholder) {
+        infinitePlaceholder.style.height = `${this.placeholderHeight}px`;
+      }
+    },
+    initPositions() {
+      let bottom = this._listHeaderHeight || 0;
+      this.positions = this._listData.map((item, index) => {
+        const height = this.getItemHeight(
+          item.itemData,
+          index,
+          item.itemData.isSectionHeader ? "sectionHeaderHeight" : "itemHeight"
+        );
+        const position = {
+          index,
+          height: height,
+          top: bottom,
+          bottom: bottom + height,
+        };
+        bottom = position.bottom;
+        return position;
+      });
+
+      if (this.containerHeight) {
+        this.calculateVisibleCounts();
+      }
+    },
+    calculateVisibleCounts() {
+      this.visibleCounts = this.positions.map((_, startIndex) => {
+        let count = 0;
+        let totalHeight = 0;
+
+        for (let i = startIndex; i < this.positions.length; i++) {
+          totalHeight += this.positions[i].height;
+          if (totalHeight > this.containerHeight) {
+            break;
           }
-          bottom = position.bottom
-          return position
-        })
-
-        if (this.containerHeight) {
-          this.calculateVisibleCounts()
+          count++;
         }
-      },
-      calculateVisibleCounts() {
-        this.visibleCounts = this.positions.map((_, startIndex) => {
-          let count = 0
-          let totalHeight = 0
-
-          for (let i = startIndex; i < this.positions.length; i++) {
-            totalHeight += this.positions[i].height
-            if (totalHeight > this.containerHeight) {
-              break
-            }
-            count++
-          }
-
-          // 如果是最后几个项目，确保全部显示
-          if (startIndex + count > this.positions.length - 3) {
-            count = this.positions.length - startIndex
-          }
-
-          return count
-        })
-      },
 
-      getStartIndex(scrollTop = 0) {
-        // 确保不会返回超出范围的索引
-        if (!this.positions.length) {
-          return 0
+        // 如果是最后几个项目，确保全部显示
+        if (startIndex + count > this.positions.length - 3) {
+          count = this.positions.length - startIndex;
         }
 
-        // 如果滚动位置为0，直接返回0
-        if (scrollTop <= 0) {
-          return 0
-        }
-        const index = this.binarySearch(this.positions, scrollTop)
-        return Math.max(0, Math.min(index, this._listData.length - 1))
-      },
-      binarySearch(list, value) {
-        if (!list.length) return 0
+        return count;
+      });
+    },
 
-        // 如果 scrollTop 超过了最后一个元素的底部
-        if (value >= list[list.length - 1].bottom) {
-          return list.length - 1
-        }
+    getStartIndex(scrollTop = 0) {
+      // 确保不会返回超出范围的索引
+      if (!this.positions.length) {
+        return 0;
+      }
 
-        let start = 0
-        let end = list.length - 1
+      // 如果滚动位置为0，直接返回0
+      if (scrollTop <= 0) {
+        return 0;
+      }
+      const index = this.binarySearch(this.positions, scrollTop);
+      return Math.max(0, Math.min(index, this._listData.length - 1));
+    },
+    binarySearch(list, value) {
+      if (!list.length) return 0;
 
-        while (start <= end) {
-          const midIndex = Math.floor((start + end) / 2)
-          const midValue = list[midIndex]
+      // 如果 scrollTop 超过了最后一个元素的底部
+      if (value >= list[list.length - 1].bottom) {
+        return list.length - 1;
+      }
 
-          if (value >= midValue.top && value < midValue.bottom) {
-            return midIndex
-          }
+      let start = 0;
+      let end = list.length - 1;
 
-          if (value < midValue.top) {
-            end = midIndex - 1
-          } else {
-            start = midIndex + 1
-          }
-        }
+      while (start <= end) {
+        const midIndex = Math.floor((start + end) / 2);
+        const midValue = list[midIndex];
 
-        return Math.min(Math.max(0, start - 1), list.length - 1)
-      },
-      setStartOffset() {
-        const infiniteList = this.$refs.infiniteList
-        if (!this.positions.length || !infiniteList) return
-        if (this.start >= 1) {
-          // 确保 startIndex 不会超出范围
-          const startIndex = Math.min(
-            Math.max(0, this.start - this.aboveCount),
-            this.positions.length - 1
-          )
-
-          const offset = this.positions[startIndex].top
-          infiniteList.style.transform = `translateY(${offset}px)`
-        } else {
-          infiniteList.style.transform = `translateY(${this.positions[0].top}px)`
+        if (value >= midValue.top && value < midValue.bottom) {
+          return midIndex;
         }
-      },
-      getItemHeight(item, index, key) {
-        const { value, getter } = this[key]
-        if (typeof getter === 'function') {
-          return getter(item, index) || 0
+
+        if (value < midValue.top) {
+          end = midIndex - 1;
         } else {
-          return value || 0
-        }
-      },
-      onScroll(e) {
-        const { scrollTop } = e.detail
-        const newStart = this.getStartIndex(scrollTop)
-
-        // 只有当start发生足够变化时才更新，避免滚动触发重渲染
-        if (Math.abs(newStart - this.end) >= Math.floor(this.belowCount / 2)) {
-          this.start = newStart
-          this.end = this.start + this.visibleCount
-          this.setStartOffset()
+          start = midIndex + 1;
         }
+      }
 
-        this.$emit('scroll', e)
-      },
-      onScrolltolower(e) {
-        this.$emit('scrolltolower', e)
-      },
-      onRefresherrefresh(e) {
-        this.$emit('refresherrefresh', e)
-      },
-      scrollToIndex({index, animated}) {
-        const isStickyHeader = this._listData[index].itemData?.isSectionHeader
-        let prevHeaderHeight = 0
-        // 如果不是Sticky header 查找最近一个吸顶的 sticky header
-        if (!isStickyHeader && this.enableSticky) {
-           for (let i = index - 1; i >= 0; i--) {
+      return Math.min(Math.max(0, start - 1), list.length - 1);
+    },
+    setStartOffset() {
+      const infiniteList = this.$refs.infiniteList;
+      if (!this.positions.length || !infiniteList) return;
+      if (this.start >= 1) {
+        // 确保 startIndex 不会超出范围
+        const startIndex = Math.min(
+          Math.max(0, this.start - this.aboveCount),
+          this.positions.length - 1
+        );
+
+        const offset = this.positions[startIndex].top;
+        infiniteList.style.transform = `translateY(${offset}px)`;
+      } else {
+        infiniteList.style.transform = `translateY(${this.positions[0].top}px)`;
+      }
+    },
+    getItemHeight(item, index, key) {
+      const { value, getter } = this[key];
+      if (typeof getter === "function") {
+        return getter(item, index) || 0;
+      } else {
+        return value || 0;
+      }
+    },
+    onScroll(e) {
+      const { scrollTop } = e.detail;
+      const newStart = this.getStartIndex(scrollTop);
+
+      // 只有当start发生足够变化时才更新，避免滚动触发重渲染
+      if (Math.abs(newStart - this.end) >= Math.floor(this.belowCount / 2)) {
+        this.start = newStart;
+        this.end = this.start + this.visibleCount;
+        this.setStartOffset();
+      }
+
+      this.$emit("scroll", e);
+    },
+    onScrolltolower(e) {
+      this.$emit("scrolltolower", e);
+    },
+    onRefresherrefresh(e) {
+      this.$emit("refresherrefresh", e);
+    },
+    scrollToIndex({ index, animated, viewPosition = 0 }) {
+      const isStickyHeader = this._listData[index].itemData?.isSectionHeader;
+      let prevHeaderHeight = 0;
+      // 如果不是sticky header 查找最近一个吸顶的 sticky header
+      if (!isStickyHeader && this.enableSticky) {
+        for (let i = index - 1; i >= 0; i--) {
           if (this._listData[i].itemData?.isSectionHeader) {
-            prevHeaderHeight = this.positions[i].height
-            break
+            prevHeaderHeight = this.positions[i].height;
+            break;
           }
         }
-        }
-       
-        const top = (this.positions[index]?.top || 0) - prevHeaderHeight
-        this.$refs.scrollView?.bs.scrollTo(0, -top, animated ? 200 : 0)
       }
+
+      const itemTop = (this.positions[index]?.top || 0) - prevHeaderHeight;
+      const itemHeight = this.positions[index]?.height || 0;
+      const containerHeight = this.containerHeight;
+
+      let targetTop = itemTop;
+      if (viewPosition === 1) {
+        // 滚动到可视区底部
+        targetTop = itemTop - (containerHeight - itemHeight);
+      } else if (viewPosition === 0.5) {
+        // 滚动到可视区中央
+        targetTop = itemTop - (containerHeight - itemHeight) / 2;
+      }
+
+      this.$refs.scrollView?.bs.scrollTo(0, -targetTop, animated ? 200 : 0);
     },
-    components: {
-      ScrollView,
-      StickyHeader
-    }
-  }
+  },
+  components: {
+    ScrollView,
+    StickyHeader,
+  },
+};
 </script>
 
 <style scoped>
-  .mpx-recycle-view {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .content-wrapper {
-    position: relative;
-    width: 100%;
-  }
-
-  .infinite-list {
-    left: 0;
-    right: 0;
-    top: 0;
-    position: absolute;
-    will-change: transform;
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-  }
-  .sticky-section {
-    position: absolute!important;
-  }
+.mpx-recycle-view {
+  position: relative;
+  overflow: hidden;
+}
+
+.content-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.infinite-list {
+  left: 0;
+  right: 0;
+  top: 0;
+  position: absolute;
+  will-change: transform;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.sticky-section {
+  position: absolute !important;
+}
 </style>

From eedc1fc856d9a5bffe9bde55b8a301d602ce6f93 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 9 May 2025 15:32:53 +0800
Subject: [PATCH 106/126] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96props?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/web/mpx-recycle-view.vue       | 71 ++++---------------
 1 file changed, 15 insertions(+), 56 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
index 064dab92c0..2de96f475e 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
@@ -74,20 +74,11 @@ export default {
         return [];
       },
     },
-    listHeaderData: Object,
-    enableSticky: Boolean,
-    scrollWithAnimation: Boolean,
-    enhanced: {
-      type: Boolean,
-      default: false,
-    },
-    refresherEnabled: {
-      type: Boolean,
-      default: false,
-    },
-    refresherTriggered: {
-      type: Boolean,
-      default: false,
+    scrollOptions: {
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
     minRenderCount: {
       type: Number,
@@ -97,22 +88,6 @@ export default {
       type: Number,
       default: 1,
     },
-    "enable-sticky": {
-      type: Boolean,
-      default: false,
-    },
-    height: {
-      type: [String, Number],
-      default: "100%",
-    },
-    width: {
-      type: [String, Number],
-      default: "100%",
-    },
-    "scroll-y": {
-      type: Boolean,
-      default: true,
-    },
     itemHeight: {
       type: Object,
       default: {},
@@ -125,32 +100,16 @@ export default {
       type: Object,
       default: {},
     },
-    type: {
-      type: String,
-      default: "",
-    },
-    generichash: {
-      type: String,
-      default: "",
-    },
-    "genericlist-header": {
-      type: String,
-      default: "",
-    },
-    "genericrecycle-item": {
-      type: String,
-      default: "",
-    },
-    "genericsection-header": {
-      type: String,
-      default: "",
-    },
-    scrollOptions: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
+    enhanced: Boolean,
+    refresherEnabled: Boolean,
+    refresherTriggered:Boolean,
+    listHeaderData: Object,
+    enableSticky: Boolean,
+    scrollWithAnimation: Boolean,
+    generichash: String,
+    genericlistHeader: String,
+    genericrecycleItem: String,
+    genericsectionHeader: String
   },
   data() {
     return {

From 043752b5aa42e40500e4f9693318be95407b6bfa Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 9 May 2025 15:36:55 +0800
Subject: [PATCH 107/126] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96props?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/wx/mpx-recycle-view/index.mpx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
index cc5e4b8291..53e34f77bb 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
@@ -5,7 +5,7 @@
     scroll-y
     wx:style="{{scrollViewStyle}}"
     type="custom"
-    enhanced="{{true}}"
+    enhanced="{{enhanced}}"
     scroll-with-animation="{{scrollWithAnimation}}"
     bounces="{{bounces}}"
     show-scrollbar="{{showScrollbar}}"

From c366c404b691b984026d18eec0c4283dff8b2fe1 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 9 May 2025 15:38:48 +0800
Subject: [PATCH 108/126] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96props?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/wx/mpx-recycle-view/index.mpx        | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
index 53e34f77bb..1e78ad0083 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
@@ -77,10 +77,6 @@
         type: Array,
         value: []
       },
-      mpxGenericRecycleItem: String,
-      mpxGenericSectionHeader: String,
-      mpxGenericListHeader: String,
-      scrollWithAnimation: Boolean,
       enableSticky: {
         type: Boolean,
         value: false
@@ -108,7 +104,14 @@
       listHeaderData: {
         type: Object,
         value: null
-      }
+      },
+      scrollWithAnimation: {
+        type: Boolean,
+        value: false
+      },
+      mpxGenericRecycleItem: String,
+      mpxGenericSectionHeader: String,
+      mpxGenericListHeader: String
     },
     data: {
       convertedListData: [],

From 6eba2d4afb3b3a15b42f394c46dd21782a1477ce Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 9 May 2025 15:45:31 +0800
Subject: [PATCH 109/126] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96props?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/web/mpx-recycle-view.vue       | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
index 2de96f475e..0179fe0480 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
@@ -70,15 +70,11 @@ export default {
   props: {
     listData: {
       type: Array,
-      default() {
-        return [];
-      },
+      default: []
     },
     scrollOptions: {
       type: Object,
-      default: () => {
-        return {};
-      },
+      default: {}
     },
     minRenderCount: {
       type: Number,
@@ -100,12 +96,30 @@ export default {
       type: Object,
       default: {},
     },
-    enhanced: Boolean,
-    refresherEnabled: Boolean,
-    refresherTriggered:Boolean,
-    listHeaderData: Object,
-    enableSticky: Boolean,
-    scrollWithAnimation: Boolean,
+    listHeaderData: {
+      type: Object,
+      default: {},
+    },
+    enhanced: {
+      type: Boolean,
+      default: false
+    },
+    refresherEnabled: {
+      type: Boolean,
+      default: false
+    },
+    refresherTriggered: {
+      type: Boolean,
+      default: false
+    },
+    enableSticky: {
+      type: Boolean,
+      default: false
+    },
+    scrollWithAnimation: {
+      type: Boolean,
+      default: false
+    },
     generichash: String,
     genericlistHeader: String,
     genericrecycleItem: String,

From 8fc35153ca7dd9c403a8414c26db638dc8b77a30 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 9 May 2025 16:26:19 +0800
Subject: [PATCH 110/126] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B3=A8=E5=86=8C=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/web/mpx-recycle-view.vue       | 48 +++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
index 0179fe0480..27e8680cac 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
@@ -44,6 +44,7 @@
       >
         <StickyHeader
           v-for="stickyItem in _stickyHeaders"
+          :key="stickyItem._index"
           class="sticky-section"
           :style="{
             top:
@@ -68,13 +69,19 @@ import StickyHeader from "./mpx-sticky-header.vue";
 
 export default {
   props: {
+    width: String | Number,
+    height: String | Number,
     listData: {
       type: Array,
-      default: []
+      default: () => {
+        return []
+      }
     },
     scrollOptions: {
       type: Object,
-      default: {}
+      default: () => {
+        return {}
+      }
     },
     minRenderCount: {
       type: Number,
@@ -86,19 +93,27 @@ export default {
     },
     itemHeight: {
       type: Object,
-      default: {},
+      default: () => {
+        return {}
+      }
     },
     listHeaderHeight: {
       type: Object,
-      default: {},
+      default: () => {
+        return {}
+      }
     },
     sectionHeaderHeight: {
       type: Object,
-      default: {},
+      default: () => {
+        return {}
+      }
     },
     listHeaderData: {
       type: Object,
-      default: {},
+      default: () => {
+        return {}
+      }
     },
     enhanced: {
       type: Boolean,
@@ -135,12 +150,6 @@ export default {
     };
   },
   computed: {
-    _width() {
-      return this.width ? `${this.width}px` : "100%";
-    },
-    _height() {
-      return this.height ? `${this.height}px` : "100%";
-    },
     _listData() {
       return this.listData.map((item, index) => {
         return {
@@ -273,16 +282,17 @@ export default {
       }
 
       let components = null;
-      const genericList = [
-        ["recycle-item", this.genericrecycleItem],
-        ["list-header", this.genericlistHeader],
-        ["section-header", this.genericsectionHeader],
-      ];
+      const genericList = {
+        "recycle-item": this.genericrecycleItem ,
+        "list-header": this.genericlistHeader ,
+        "section-header": this.genericsectionHeader
+      }
 
-      for (const [key, value] of genericList) {
+      for (const key in genericList) {
+        const value = genericList[key]
         if (value) {
           components = components || {};
-          components[key] = global.__mpxGenericsMap[this.generichash][value];
+          components[key] = global.__mpxGenericsMap[this.generichash][value]
         }
       }
 

From 169e42886b608ee7cbd98cda872668ec3d47803f Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 9 May 2025 16:31:44 +0800
Subject: [PATCH 111/126] =?UTF-8?q?chore:=20=20=E8=B0=83=E6=95=B4mpx-recyc?=
 =?UTF-8?q?le-view=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../webpack-plugin/lib/json-compiler/index.js |  2 +-
 .../index.mpx => mpx-recycle-view.mpx}        |  6 +++---
 .../mpx-list-header-default.mpx               | 21 -------------------
 .../mpx-recycle-item-default.mpx              | 21 -------------------
 .../mpx-section-header-default.mpx            | 21 -------------------
 5 files changed, 4 insertions(+), 67 deletions(-)
 rename packages/webpack-plugin/lib/runtime/components/wx/{mpx-recycle-view/index.mpx => mpx-recycle-view.mpx} (97%)
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-list-header-default.mpx
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-recycle-item-default.mpx
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-section-header-default.mpx

diff --git a/packages/webpack-plugin/lib/json-compiler/index.js b/packages/webpack-plugin/lib/json-compiler/index.js
index e0b20ce49e..e5ec2eed36 100644
--- a/packages/webpack-plugin/lib/json-compiler/index.js
+++ b/packages/webpack-plugin/lib/json-compiler/index.js
@@ -193,7 +193,7 @@ module.exports = function (content) {
       useExtendComponents.forEach((name) => {
         if (mode === 'wx') {
           if (EXTEND_COMPONENTS_LIST.includes(name)) {
-            extendComponents[name] = require.resolve(`../runtime/components/${mode}/mpx-${name}/index.mpx`)
+            extendComponents[name] = require.resolve(`../runtime/components/${mode}/mpx-${name}.mpx`)
           } else {
             emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
           }
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
similarity index 97%
rename from packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
rename to packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index 1e78ad0083..1de3bb8623 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/index.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -223,13 +223,13 @@
     "component": true,
     "componentGenerics": {
       "recycle-item": {
-        "default": "./mpx-recycle-item-default.mpx"
+        "default": ""
       },
       "section-header": {
-        "default": "./mpx-section-header-default.mpx"
+        "default": ""
       },
       "list-header": {
-        "default": "./mpx-list-header-default.mpx"
+        "default": ""
       }
     }
   }
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-list-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-list-header-default.mpx
deleted file mode 100644
index 23fc2f2d55..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-list-header-default.mpx
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <view class="list-item">
-    <view class="item-content">list-header-default</view>
-  </view>
-</template>
-
-<style lang="stylus" scoped>
-.list-item
-  margin 4px 16px
-  padding 16px
-  background #fff
-  border-radius 8px
-  box-shadow 0 2px 4px rgba(0,0,0,0.1)
-
-.item-content
-  display flex
-  flex-direction column
-  font-size 14px
-  color #666
-
-</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-recycle-item-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-recycle-item-default.mpx
deleted file mode 100644
index 5cf26e0eb4..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-recycle-item-default.mpx
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <view class="list-item">
-    <view class="item-content">recycle-item-default</view>
-  </view>
-</template>
-
-<style lang="stylus" scoped>
-.list-item
-  margin 4px 16px
-  padding 16px
-  background #fff
-  border-radius 8px
-  box-shadow 0 2px 4px rgba(0,0,0,0.1)
-
-.item-content
-  display flex
-  flex-direction column
-  font-size 14px
-  color #666
-
-</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-section-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-section-header-default.mpx
deleted file mode 100644
index 5cf26e0eb4..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-section-header-default.mpx
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <view class="list-item">
-    <view class="item-content">recycle-item-default</view>
-  </view>
-</template>
-
-<style lang="stylus" scoped>
-.list-item
-  margin 4px 16px
-  padding 16px
-  background #fff
-  border-radius 8px
-  box-shadow 0 2px 4px rgba(0,0,0,0.1)
-
-.item-content
-  display flex
-  flex-direction column
-  font-size 14px
-  color #666
-
-</style>

From 8f60230038d5ecf6429b9db26c05b469d5d5fc00 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Fri, 9 May 2025 16:32:52 +0800
Subject: [PATCH 112/126] =?UTF-8?q?chore:=20=20=E8=B0=83=E6=95=B4mpx-recyc?=
 =?UTF-8?q?le-view=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mpx-recycle-view/mpx-recycle-view.old.mpx | 383 ------------------
 1 file changed, 383 deletions(-)
 delete mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-recycle-view.old.mpx

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-recycle-view.old.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-recycle-view.old.mpx
deleted file mode 100644
index 002c345905..0000000000
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view/mpx-recycle-view.old.mpx
+++ /dev/null
@@ -1,383 +0,0 @@
-<template>
-  <scroll-view
-    class="mpx-recycle-view"
-    wx:ref="mpxRecycleView"
-    type="list"
-    scroll-y="{{scrollY}}"
-    scroll-top="{{_scrollTop}}"
-    enhanced="{{enhanced}}"
-    bounces="{{bounces}}"
-    scroll-with-animation="{{scrollWithAnimation}}"
-    enable-back-to-top="{{enableBackToTop}}"
-    lower-threshold="{{lowerThreshold}}"
-    upper-threshold="{{upperThreshold}}"
-    scroll-options="{{scrollOptions}}"
-    scrollEventThrottle="{{scrollEventThrottle}}"
-    wx:style="width: {{_width}}; height: {{_height}}"
-    bindscroll="onScroll"
-    bindscrollend="onScrollEnd"
-    bindscrolltoupper="onScrollToUpper"
-    bindscrolltolower="onScrollToLower"
-  >
-    <view class="content-wrapper">
-      <view class="infinite-list-placeholder" wx:style="{{placeholderStyle}}"></view>
-      <view class="infinite-list" wx:style="{{contentStyle}}">
-        <recycle-item wx:for="{{visibleData}}" wx:key="_index" current-item="{{item}}" />
-      </view>
-    </view>
-  </scroll-view>
-</template>
-<script>
-  import mpx, { createComponent } from '@mpxjs/core'
-
-  createComponent({
-    properties: {
-      scrollY: Boolean,
-      height: {
-        type: Number,
-        value: 0
-      },
-      width: {
-        type: Number,
-        value: 0
-      },
-      itemHeight: {
-        type: Object,
-        value: {}
-      },
-      bufferScale: {
-        type: Number,
-        value: 2
-      },
-      listData: Array,
-      scrollTop: {
-        type: Number,
-        value: 0
-      },
-      scrollWithAnimation: Boolean,
-      enableBackToTop: Boolean,
-      lowerThreshold: {
-        type: Number,
-        value: 50
-      },
-      upperThreshold: {
-        type: Number,
-        value: 50
-      },
-      scrollOptions: {
-        type: Object,
-        value: {}
-      },
-      scrollEventThrottle: {
-        type: Number,
-        value: 0
-      },
-      minRenderCount: {
-        type: Number,
-        value: 10
-      },
-      enhanced: {
-        type: Boolean,
-        value: false
-      },
-      bounces: {
-        type: Boolean,
-        value: false
-      }
-    },
-    data: {
-      start: 0,
-      end: 0,
-      contentStyle: '',
-      placeholderStyle: '',
-      containerHeight: 0,
-      positions: [],
-      isReady: false,
-      lastScrollTime: 0,
-      visibleCounts: []
-    },
-    computed: {
-      _width() {
-        return this.width ? `${this.width}px` : '100%'
-      },
-      _height() {
-        return this.height ? `${this.height}px` : '100%'
-      },
-      _listData() {
-        return this.listData.map((item, index) => {
-          return Object.assign({}, item, { _index: `_${index}` })
-        })
-      },
-      _scrollTop() {
-        // 使用初始值或当前值
-        return this.isReady ? this.scrollTop : 0
-      },
-      visibleCount() {
-        if (!this.visibleCounts.length) return this.minRenderCount
-        return Math.max(this.visibleCounts[this.start], this.minRenderCount)
-      },
-      aboveCount() {
-        if (!this._listData.length || !this.visibleCounts.length) return 0
-        let count = 0
-        const startIndex = Math.max(0, this.start)
-        const endIndex = Math.max(0, startIndex - this.bufferScale)
-
-        for (let i = startIndex; i > endIndex; i--) {
-          count += this.visibleCounts[i] || 0
-        }
-
-        return count
-      },
-      belowCount() {
-        if (!this._listData.length || !this.visibleCounts.length) return 0
-        let count = 0
-        const startIndex = Math.min(this.start, this._listData.length - 1)
-        const endIndex = Math.min(startIndex + this.bufferScale, this._listData.length - 1)
-
-        for (let i = startIndex; i < endIndex; i++) {
-          count += this.visibleCounts[i] || 0
-        }
-
-        return count
-      },
-      visibleData() {
-        if (!this._listData.length) return []
-
-        const start = Math.min(Math.max(0, this.start - this.aboveCount), this._listData.length - 1)
-
-        let end = Math.min(this._listData.length, this.start + this.visibleCount + this.belowCount)
-
-        // 如果接近列表末尾，确保显示所有剩余项目
-        if (end > this._listData.length - 3) {
-          end = this._listData.length
-        }
-
-        return this._listData.slice(start, end).map((item, idx) => {
-          const realIndex = start + idx
-          const height = this.getItemHeight(item, realIndex)
-          return {
-            ...item,
-            _index: `_${realIndex}`
-          }
-        })
-      },
-      totalHeight() {
-        if (!this.positions.length) return 0
-        return this.positions[this.positions.length - 1].bottom
-      }
-    },
-    watch: {
-      listData: {
-        handler() {
-          this.initPositions()
-          this.placeholderStyle = `height: ${this.totalHeight}px`
-          // 更新真实偏移量
-          this.setStartOffset()
-        }
-      },
-      scrollTop: {
-        handler(val) {
-          this.start = this.getStartIndex(val)
-          this.end = this.start + this.visibleCount
-          this.setStartOffset()
-        },
-        immediate: true
-      },
-      containerHeight() {
-        this.calculateVisibleCounts()
-      }
-    },
-    ready() {
-      this.initPositions()
-      this.$refs.mpxRecycleView
-        .fields({ size: true})
-        .exec((res) => {
-          this.containerHeight = res.height
-          this.isReady = true
-          this.placeholderStyle = `height: ${this.totalHeight}px`
-          if (!this.positions || !this.positions.length) {
-            return
-          }
-          this.start = this.getStartIndex(this.scrollTop)
-          this.end = this.start + this.visibleCount
-          this.setStartOffset()
-        })
-    },
-    methods: {
-      initPositions() {
-        let bottom = 0
-        this.positions = this._listData.map((item, index) => {
-          const height = this.getItemHeight(item, index)
-          const position = {
-            index,
-            height: height,
-            top: bottom,
-            bottom: bottom + height
-          }
-          bottom = position.bottom
-          return position
-        })
-
-        if (this.containerHeight) {
-          this.calculateVisibleCounts()
-        }
-      },
-      calculateVisibleCounts() {
-        this.visibleCounts = this.positions.map((_, startIndex) => {
-          let count = 0
-          let totalHeight = 0
-
-          for (let i = startIndex; i < this.positions.length; i++) {
-            totalHeight += this.positions[i].height
-            if (totalHeight > this.containerHeight) {
-              break
-            }
-            count++
-          }
-
-          // 如果是最后几个项目，确保全部显示
-          if (startIndex + count > this.positions.length - 3) {
-            count = this.positions.length - startIndex
-          }
-
-          return count
-        })
-      },
-
-      getStartIndex(scrollTop = 0) {
-        // 确保不会返回超出范围的索引
-        if (!this.positions.length) {
-          return 0
-        }
-
-        // 如果滚动位置为0，直接返回0
-        if (scrollTop <= 0) {
-          return 0
-        }
-        const index = this.binarySearch(this.positions, scrollTop)
-        return Math.max(0, Math.min(index, this._listData.length - 1))
-      },
-      binarySearch(list, value) {
-        if (!list.length) return 0
-
-        // 如果 scrollTop 超过了最后一个元素的底部
-        if (value >= list[list.length - 1].bottom) {
-          return list.length - 1
-        }
-
-        let start = 0
-        let end = list.length - 1
-
-        while (start <= end) {
-          const midIndex = Math.floor((start + end) / 2)
-          const midValue = list[midIndex]
-
-          if (value >= midValue.top && value < midValue.bottom) {
-            return midIndex
-          }
-
-          if (value < midValue.top) {
-            end = midIndex - 1
-          } else {
-            start = midIndex + 1
-          }
-        }
-
-        return Math.min(Math.max(0, start - 1), list.length - 1)
-      },
-      setStartOffset() {
-        if (!this.positions.length) return
-
-        if (this.start >= 1) {
-          // 确保 startIndex 不会超出范围
-          const startIndex = Math.min(
-            Math.max(0, this.start - this.aboveCount),
-            this.positions.length - 1
-          )
-
-          const offset = this.positions[startIndex].top
-
-          this.contentStyle = `transform: translateY(${offset}px);`
-        } else {
-          this.contentStyle = `transform: translateY(0px);`
-        }
-      },
-      getItemHeight(item, index) {
-        const { value, getter } = this.itemHeight
-        if (typeof getter === 'function') {
-          return getter(item, index) || 0
-        } else {
-          return value || 0
-        }
-      },
-      onScroll(e) {
-        const now = Date.now()
-        // 添加16ms的节流，大约60fps
-        if (now - this.lastScrollTime < 16) {
-          return
-        }
-        this.lastScrollTime = now
-
-        const { scrollTop } = e.detail
-        const newStart = this.getStartIndex(scrollTop)
-        
-        // 只有当start发生足够变化时才更新，避免滚动触发重渲染
-        if (Math.abs(newStart - this.end) >= Math.floor(this.belowCount / 2)) {
-          this.start = newStart
-          this.end = this.start + this.visibleCount
-          this.setStartOffset()
-        }
-        
-        this.triggerEvent('scroll', e)
-      },
-      onScrollToUpper(e) {
-        this.triggerEvent('scrolltoupper', e)
-      },
-      onScrollToLower(e) {
-        this.triggerEvent('scrolltolower', e)
-      },
-      scrollTo(params = {}) {
-        this.$refs.mpxRecycleView.node().exec(res => {
-          if (res && res[0]) {
-            res[0].node.scrollTo(params)
-          }
-        })
-      }
-    }
-  })
-</script>
-<script type="application/json">
-  {
-    "component": true,
-    "componentGenerics": {
-      "recycle-item": {
-        "default": "./mpx-recycle-item-default.mpx"
-      }
-    }
-  }
-</script>
-<style scoped>
-  .mpx-recycle-view {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .content-wrapper {
-    position: relative;
-    width: 100%;
-  }
-
-  .infinite-list {
-    left: 0;
-    right: 0;
-    /* 支付宝环境需要设置允许事件穿透, 否则滑不动 */
-    /* @mpx-if (__mpx_mode__ === 'ali') */
-    pointer-events: none;
-    /* @mpx-endif */
-    top: 0;
-    position: absolute;
-    will-change: transform;
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-  }
-</style>

From ccc8ac53b323cf98e1f72395c7d3142beff9ae5b Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 28 May 2025 10:46:12 +0800
Subject: [PATCH 113/126] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96recyle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/webpack-plugin/lib/json-compiler/index.js        | 8 ++------
 .../lib/runtime/components/react/mpx-recycle-view.tsx     | 2 --
 packages/webpack-plugin/lib/utils/const.js                | 5 ++++-
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/webpack-plugin/lib/json-compiler/index.js b/packages/webpack-plugin/lib/json-compiler/index.js
index e5ec2eed36..f6aa393c89 100644
--- a/packages/webpack-plugin/lib/json-compiler/index.js
+++ b/packages/webpack-plugin/lib/json-compiler/index.js
@@ -191,12 +191,8 @@ module.exports = function (content) {
     if (isApp && useExtendComponents) {
       const extendComponents = {}
       useExtendComponents.forEach((name) => {
-        if (mode === 'wx') {
-          if (EXTEND_COMPONENTS_LIST.includes(name)) {
-            extendComponents[name] = require.resolve(`../runtime/components/${mode}/mpx-${name}.mpx`)
-          } else {
-            emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
-          }
+        if (EXTEND_COMPONENTS_LIST[mode].includes(name)) {
+          extendComponents[name] = normalize.lib(`runtime/components/${mode}/mpx-${name}.mpx`)
         } else {
           emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
         }
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index f6cc7fa670..9ca73c75e4 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -434,7 +434,6 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
         {
           style: [{ height, width }, style, layoutStyle],
           sections: convertedListData,
-          keyExtractor: (item: any, index: number) => item + index,
           renderItem: renderItem,
           getItemLayout: getItemLayout,
           ListHeaderComponent: (generichash && genericListHeader && renderListHeader) || null,
@@ -455,7 +454,6 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
         {
           style: [{ height, width }, style, layoutStyle],
           data: convertedListData,
-          keyExtractor: (item: any, index: number) => item + index,
           renderItem: renderItem,
           getItemLayout: getItemLayout,
           ListHeaderComponent: (generichash && genericListHeader && renderListHeader) || null,
diff --git a/packages/webpack-plugin/lib/utils/const.js b/packages/webpack-plugin/lib/utils/const.js
index 3b556cae40..6e45d61ce9 100644
--- a/packages/webpack-plugin/lib/utils/const.js
+++ b/packages/webpack-plugin/lib/utils/const.js
@@ -7,5 +7,8 @@ module.exports = {
   MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
   MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId
   PARENT_MODULE_ID: '__pid',
-  EXTEND_COMPONENTS_LIST: ['recycle-view'] // 扩展组件列表
+  EXTEND_COMPONENTS_LIST: {
+    wx: ['recycle-view'],
+    web: ['recycle-view']
+  } // 扩展组件列表
 }

From 9bea494e43dc9feca5840c2d7bb203545c254474 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 28 May 2025 13:20:55 +0800
Subject: [PATCH 114/126] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96recyle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../webpack-plugin/lib/json-compiler/index.js |   2 +-
 .../webpack-plugin/lib/react/processJSON.js   |   2 +-
 .../components/react/mpx-recycle-view.tsx     | 225 ++++++++----------
 .../lib/template-compiler/compiler.js         |   2 +-
 packages/webpack-plugin/lib/utils/const.js    |   5 +-
 5 files changed, 104 insertions(+), 132 deletions(-)

diff --git a/packages/webpack-plugin/lib/json-compiler/index.js b/packages/webpack-plugin/lib/json-compiler/index.js
index f6aa393c89..8fa4228bf4 100644
--- a/packages/webpack-plugin/lib/json-compiler/index.js
+++ b/packages/webpack-plugin/lib/json-compiler/index.js
@@ -191,7 +191,7 @@ module.exports = function (content) {
     if (isApp && useExtendComponents) {
       const extendComponents = {}
       useExtendComponents.forEach((name) => {
-        if (EXTEND_COMPONENTS_LIST[mode].includes(name)) {
+        if (EXTEND_COMPONENTS_LIST[mode]?.includes(name)) {
           extendComponents[name] = normalize.lib(`runtime/components/${mode}/mpx-${name}.mpx`)
         } else {
           emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
diff --git a/packages/webpack-plugin/lib/react/processJSON.js b/packages/webpack-plugin/lib/react/processJSON.js
index 90e2001995..f31fa338dd 100644
--- a/packages/webpack-plugin/lib/react/processJSON.js
+++ b/packages/webpack-plugin/lib/react/processJSON.js
@@ -106,7 +106,7 @@ module.exports = function (jsonContent, {
       if (useExtendComponents) {
         const extendComponents = {}
         useExtendComponents.forEach((name) => {
-          if (EXTEND_COMPONENTS_LIST.includes(name)) {
+          if (EXTEND_COMPONENTS_LIST[mode]?.includes(name)) {
             extendComponents[name] = require.resolve(`../runtime/components/react/dist/mpx-${name}.jsx`)
           } else {
             emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index 9ca73c75e4..fb4e8b838a 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -3,31 +3,6 @@ import { SectionList, FlatList, RefreshControl, NativeSyntheticEvent, NativeScro
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef from './useNodesRef'
 import { extendObject, useLayout, useTransformStyle } from './utils'
-
-interface GenericComponentProps {
-  props: Record<string, any>;
-  ref: ForwardedRef<any>;
-  generichash: string;
-  generickey: string;
-}
-
-interface ItemProps {
-  generichash: string;
-  genericrecycleItem: string;
-  itemData: any;
-}
-
-interface SectionHeaderProps {
-  generichash: string;
-  genericsectionHeader: string;
-  itemData: any;
-}
-
-interface ListHeaderProps {
-  generichash: string;
-  genericlistHeader: string;
-  listHeaderData: any;
-}
 interface ListItem {
   isSectionHeader?: boolean;
   _originalItemIndex?: number;
@@ -61,6 +36,7 @@ interface RecycleViewProps {
   listHeaderHeight?: ItemHeightType;
   'genericrecycle-item'?: string;
   'genericsection-header'?: string;
+  'genericlist-header'?: string;
   'enable-var'?: boolean;
   'external-var-context'?: any;
   'parent-font-size'?: number;
@@ -85,29 +61,42 @@ interface ScrollPositionParams {
   viewPosition?: number;
 }
 
-const getGenericComponent = ({ props, ref, generichash, generickey }: GenericComponentProps): ReactElement => {
+const getGeneric = (generichash: string, generickey: string) => {
+  if (!generichash || !generickey) return null
   const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
-  return createElement(GenericComponent,
-    extendObject({}, {
+  if (!GenericComponent) return null
+
+  return forwardRef((props: any, ref: any) => {
+    return createElement(GenericComponent, extendObject({}, {
       ref: ref
-    }, props)
-  )
+    }, props))
+  })
 }
 
-const Item = forwardRef<any, ItemProps>((props, ref) => {
-  const { generichash, genericrecycleItem } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericrecycleItem })
-})
+const getListHeaderComponent = (generichash: string, generickey: string, data: any) => {
+  if (!generichash || !generickey) return undefined
+  return () => {
+    const ListHeaderComponent = getGeneric(generichash, generickey)
+    return ListHeaderComponent ? createElement(ListHeaderComponent, { listHeaderData: data }) : null
+  }
+}
 
-const SectionHeader = forwardRef<any, SectionHeaderProps>((props, ref) => {
-  const { generichash, genericsectionHeader } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericsectionHeader })
-})
+const getSectionHeaderRenderer = (generichash: string, generickey: string) => {
+  if (!generichash || !generickey) return undefined
+  return (sectionData: { section: Section }) => {
+    if (!sectionData.section.hasSectionHeader) return null
+    const SectionHeaderComponent = getGeneric(generichash, generickey)
+    return SectionHeaderComponent ? createElement(SectionHeaderComponent, { itemData: sectionData.section.headerData }) : null
+  }
+}
 
-const ListHeader = forwardRef<any, ListHeaderProps>((props, ref) => {
-  const { generichash, genericlistHeader } = props
-  return getGenericComponent({ props, ref, generichash, generickey: genericlistHeader })
-})
+const getItemRenderer = (generichash: string, generickey: string) => {
+  if (!generichash || !generickey) return undefined
+  return ({ item }: { item: any }) => {
+    const ItemComponent = getGeneric(generichash, generickey)
+    return ItemComponent ? createElement(ItemComponent, { itemData: item }) : null
+  }
+}
 
 const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
   const {
@@ -242,93 +231,74 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
     }
   }
 
-  const renderItem = useCallback(({ item }: { item: any }) => (
-    <Item itemData={item} generichash={generichash} genericrecycleItem={genericrecycleItem}/>
-  ), [])
-
-  const renderSectionHeader = useCallback((data: { section: Section }) => (
-    !data.section.hasSectionHeader ? null : <SectionHeader itemData={data.section.headerData} generichash={generichash} genericsectionHeader={genericsectionHeader}/>
-  ), [])
-
-  const renderListHeader = useCallback(() => (
-    <ListHeader listHeaderData={listHeaderData} generichash={generichash} genericlistHeader={genericListHeader}/>
-  ), [])
-
-  const convertToSectionListData = useCallback((data: ListItem[]): Section[] => {
-    const sections: Section[] = []
-    let currentSection: Section | null = null
-    // 清空之前的索引映射
-    indexMap.current = {}
-    // 清空反向索引映射
-    reverseIndexMap.current = {}
-
-    data.forEach((item: ListItem, index: number) => {
-      if (item.isSectionHeader) {
-      // 如果已经存在一个 section，先把它添加到 sections 中
-        if (currentSection) {
-          sections.push(currentSection)
-        }
-        // 创建新的 section
-        currentSection = {
-          headerData: item,
-          data: [],
-          hasSectionHeader: true,
-          _originalItemIndex: index
-        }
-        // 为 section header 添加索引映射
-        const sectionIndex = sections.length
-        indexMap.current[index] = `${sectionIndex}_header`
-        // 添加反向索引映射
-        reverseIndexMap.current[`${sectionIndex}_header`] = index
-      } else {
-      // 如果没有当前 section，创建一个默认的
-        if (!currentSection) {
-          // 创建默认section (无header的section)
+  const convertedListData = useMemo(() => {
+    if (enableSticky) {
+      const sections: Section[] = []
+      let currentSection: Section | null = null
+      // 清空之前的索引映射
+      indexMap.current = {}
+      // 清空反向索引映射
+      reverseIndexMap.current = {}
+      listData.forEach((item: ListItem, index: number) => {
+        if (item.isSectionHeader) {
+        // 如果已经存在一个 section，先把它添加到 sections 中
+          if (currentSection) {
+            sections.push(currentSection)
+          }
+          // 创建新的 section
           currentSection = {
-            headerData: null,
+            headerData: item,
             data: [],
-            hasSectionHeader: false,
-            _originalItemIndex: -1
+            hasSectionHeader: true,
+            _originalItemIndex: index
           }
-        }
-        // 将 item 添加到当前 section 的 data 中
-        const itemIndex = currentSection.data.length
-        currentSection.data.push(extendObject({}, item, {
-          _originalItemIndex: index
-        }))
-        let sectionIndex
-        // 为 item 添加索引映射 - 存储格式为: "sectionIndex_itemIndex"
-        if (!currentSection.hasSectionHeader && sections.length === 0) {
-          // 在默认section中(第一个且无header)
-          sectionIndex = 0
-          indexMap.current[index] = `${sectionIndex}_${itemIndex}`
+          // 为 section header 添加索引映射
+          const sectionIndex = sections.length
+          indexMap.current[index] = `${sectionIndex}_header`
+          // 添加反向索引映射
+          reverseIndexMap.current[`${sectionIndex}_header`] = index
         } else {
-          // 在普通section中
-          sectionIndex = sections.length
-          indexMap.current[index] = `${sectionIndex}_${itemIndex}`
+        // 如果没有当前 section，创建一个默认的
+          if (!currentSection) {
+            // 创建默认section (无header的section)
+            currentSection = {
+              headerData: null,
+              data: [],
+              hasSectionHeader: false,
+              _originalItemIndex: -1
+            }
+          }
+          // 将 item 添加到当前 section 的 data 中
+          const itemIndex = currentSection.data.length
+          currentSection.data.push(extendObject({}, item, {
+            _originalItemIndex: index
+          }))
+          let sectionIndex
+          // 为 item 添加索引映射 - 存储格式为: "sectionIndex_itemIndex"
+          if (!currentSection.hasSectionHeader && sections.length === 0) {
+            // 在默认section中(第一个且无header)
+            sectionIndex = 0
+            indexMap.current[index] = `${sectionIndex}_${itemIndex}`
+          } else {
+            // 在普通section中
+            sectionIndex = sections.length
+            indexMap.current[index] = `${sectionIndex}_${itemIndex}`
+          }
+          // 添加反向索引映射
+          reverseIndexMap.current[`${sectionIndex}_${itemIndex}`] = index
         }
-        // 添加反向索引映射
-        reverseIndexMap.current[`${sectionIndex}_${itemIndex}`] = index
+      })
+      // 添加最后一个 section
+      if (currentSection) {
+        sections.push(currentSection)
       }
-    })
-
-    // 添加最后一个 section
-    if (currentSection) {
-      sections.push(currentSection)
-    }
-
-    return sections
-  }, [])
-
-  const convertedListData = useMemo(() => {
-    if (enableSticky) {
-      return convertToSectionListData(listData || []) || []
+      return sections
     } else {
       return listData
     }
   }, [listData])
 
-  const itemLayouts = useMemo(() => {
+  const { getItemLayout } = useMemo(() => {
     const layouts: Array<{ length: number, offset: number, index: number }> = []
     let offset = 0
 
@@ -379,13 +349,12 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
         offset += itemHeightValue
       })
     }
-    return layouts
+    return {
+      itemLayouts: layouts,
+      getItemLayout: (data: any, index: number) => layouts[index]
+    }
   }, [convertedListData])
 
-  const getItemLayout = useCallback((data: any, index: number) => {
-    return itemLayouts[index]
-  }, [itemLayouts])
-
   const scrollAdditionalProps = extendObject(
     {
       alwaysBounceVertical: false,
@@ -434,10 +403,10 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
         {
           style: [{ height, width }, style, layoutStyle],
           sections: convertedListData,
-          renderItem: renderItem,
+          renderItem: getItemRenderer(generichash, genericrecycleItem),
           getItemLayout: getItemLayout,
-          ListHeaderComponent: (generichash && genericListHeader && renderListHeader) || null,
-          renderSectionHeader: (generichash && genericsectionHeader && renderSectionHeader) || null,
+          ListHeaderComponent: getListHeaderComponent(generichash, genericListHeader, listHeaderData),
+          renderSectionHeader: getSectionHeaderRenderer(generichash, genericsectionHeader),
           refreshControl: refresherEnabled
             ? React.createElement(RefreshControl, {
               onRefresh: onRefresh,
@@ -454,9 +423,9 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
         {
           style: [{ height, width }, style, layoutStyle],
           data: convertedListData,
-          renderItem: renderItem,
+          renderItem: getItemRenderer(generichash, genericrecycleItem),
           getItemLayout: getItemLayout,
-          ListHeaderComponent: (generichash && genericListHeader && renderListHeader) || null,
+          ListHeaderComponent: getListHeaderComponent(generichash, genericListHeader, listHeaderData),
           refreshControl: refresherEnabled
             ? React.createElement(RefreshControl, {
               onRefresh: onRefresh,
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index c6383d1f95..0ae7912837 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2272,7 +2272,7 @@ function isComponentNode (el) {
 }
 
 function isExtendComponentNode (el) {
-  return EXTEND_COMPONENTS_LIST.includes(el.tag)
+  return EXTEND_COMPONENTS_LIST[mode]?.includes(el.tag)
 }
 
 function getComponentInfo (el) {
diff --git a/packages/webpack-plugin/lib/utils/const.js b/packages/webpack-plugin/lib/utils/const.js
index 6e45d61ce9..8a09e18c82 100644
--- a/packages/webpack-plugin/lib/utils/const.js
+++ b/packages/webpack-plugin/lib/utils/const.js
@@ -9,6 +9,9 @@ module.exports = {
   PARENT_MODULE_ID: '__pid',
   EXTEND_COMPONENTS_LIST: {
     wx: ['recycle-view'],
-    web: ['recycle-view']
+    web: ['recycle-view'],
+    ios: ['recycle-view'],
+    android: ['recycle-view'],
+    harmony: ['recycle-view']
   } // 扩展组件列表
 }

From d104685f92b72e6cc9a9c5ea78926772c912d4e2 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 28 May 2025 15:44:08 +0800
Subject: [PATCH 115/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9recycle-view?=
 =?UTF-8?q?=20ref=20=E8=8E=B7=E5=8F=96=E8=BF=94=E5=9B=9E=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core/src/platform/builtInMixins/refsMixin.ios.js   | 10 +---------
 .../lib/runtime/components/react/mpx-recycle-view.tsx  | 10 ++++++----
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/platform/builtInMixins/refsMixin.ios.js b/packages/core/src/platform/builtInMixins/refsMixin.ios.js
index e7a9984bd6..9a761624d1 100644
--- a/packages/core/src/platform/builtInMixins/refsMixin.ios.js
+++ b/packages/core/src/platform/builtInMixins/refsMixin.ios.js
@@ -59,15 +59,7 @@ export default function getRefsMixin () {
           const res = []
           refs.forEach(({ type, instance }) => {
             if (type === refType) {
-              // 内置扩展的tsx 组件如 recycle-view，既不是内建组件也不是自定义组件
-              if (instance.getNodeInstance) {
-                const { instance: nodeInstance } = instance.getNodeInstance()
-                if (nodeInstance) {
-                  res.push(nodeInstance)
-                }
-              } else {
-                res.push(instance)
-              }
+              res.push(instance)
             }
           })
           return res
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index fb4e8b838a..0666112a0d 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -1,7 +1,6 @@
-import React, { forwardRef, useRef, useCallback, useState, useEffect, useMemo, ForwardedRef, ReactElement, createElement } from 'react'
+import React, { forwardRef, useRef, useState, useEffect, useMemo, createElement, useImperativeHandle } from 'react'
 import { SectionList, FlatList, RefreshControl, NativeSyntheticEvent, NativeScrollEvent } from 'react-native'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
-import useNodesRef from './useNodesRef'
 import { extendObject, useLayout, useTransformStyle } from './utils'
 interface ListItem {
   isSectionHeader?: boolean;
@@ -383,8 +382,11 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
     })
   }
 
-  useNodesRef(props, ref, scrollViewRef, {
-    scrollToIndex
+  useImperativeHandle(ref, () => {
+    return {
+      ...props,
+      scrollToIndex
+    }
   })
 
   const innerProps = useInnerProps(extendObject({}, props, scrollAdditionalProps), [

From d77cc56baa4b21ec10be667f26c8cf3c731d4dd8 Mon Sep 17 00:00:00 2001
From: lareinayanyu <lareinayanyu@didiglobal.com>
Date: Wed, 28 May 2025 16:26:05 +0800
Subject: [PATCH 116/126] =?UTF-8?q?chore:=20=E8=A1=A5=E5=85=85ali=E7=8E=AF?=
 =?UTF-8?q?=E5=A2=83EXTEND=5FCOMPONENTS=5FLIST?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/webpack-plugin/lib/json-compiler/index.js | 6 +++---
 packages/webpack-plugin/lib/react/processJSON.js   | 6 +++---
 packages/webpack-plugin/lib/web/processJSON.js     | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/webpack-plugin/lib/json-compiler/index.js b/packages/webpack-plugin/lib/json-compiler/index.js
index 8fa4228bf4..9dfda1a2c4 100644
--- a/packages/webpack-plugin/lib/json-compiler/index.js
+++ b/packages/webpack-plugin/lib/json-compiler/index.js
@@ -187,10 +187,10 @@ module.exports = function (content) {
   }
 
   if (mode === 'wx' || mode === 'ali') {
-    const { useExtendComponents } = mpx
-    if (isApp && useExtendComponents) {
+    const { useExtendComponents = {} } = mpx
+    if (isApp && useExtendComponents[mode]) {
       const extendComponents = {}
-      useExtendComponents.forEach((name) => {
+      useExtendComponents[mode].forEach((name) => {
         if (EXTEND_COMPONENTS_LIST[mode]?.includes(name)) {
           extendComponents[name] = normalize.lib(`runtime/components/${mode}/mpx-${name}.mpx`)
         } else {
diff --git a/packages/webpack-plugin/lib/react/processJSON.js b/packages/webpack-plugin/lib/react/processJSON.js
index f31fa338dd..4c4b614fa4 100644
--- a/packages/webpack-plugin/lib/react/processJSON.js
+++ b/packages/webpack-plugin/lib/react/processJSON.js
@@ -32,7 +32,7 @@ module.exports = function (jsonContent, {
     srcMode,
     env,
     projectRoot,
-    useExtendComponents
+    useExtendComponents = {}
   } = mpx
 
   const context = loaderContext.context
@@ -103,9 +103,9 @@ module.exports = function (jsonContent, {
     if (ctorType !== 'app') {
       rulesRunnerOptions.mainKey = ctorType
     } else {
-      if (useExtendComponents) {
+      if (useExtendComponents[mode]) {
         const extendComponents = {}
-        useExtendComponents.forEach((name) => {
+        useExtendComponents[mode].forEach((name) => {
           if (EXTEND_COMPONENTS_LIST[mode]?.includes(name)) {
             extendComponents[name] = require.resolve(`../runtime/components/react/dist/mpx-${name}.jsx`)
           } else {
diff --git a/packages/webpack-plugin/lib/web/processJSON.js b/packages/webpack-plugin/lib/web/processJSON.js
index 828633df39..4a503b20a8 100644
--- a/packages/webpack-plugin/lib/web/processJSON.js
+++ b/packages/webpack-plugin/lib/web/processJSON.js
@@ -31,7 +31,7 @@ module.exports = function (jsonContent, {
     srcMode,
     env,
     projectRoot,
-    useExtendComponents
+    useExtendComponents = {}
   } = mpx
 
   const context = loaderContext.context
@@ -102,8 +102,8 @@ module.exports = function (jsonContent, {
     if (ctorType !== 'app') {
       rulesRunnerOptions.mainKey = ctorType
     } else {
-      if (useExtendComponents) {
-        useExtendComponents.forEach((name) => {
+      if (useExtendComponents[mode]) {
+        useExtendComponents[mode].forEach((name) => {
           emitWarning(
             `extend component ${name} is not supported in web environment!`
           )

From 23312fb787d62875f419c0729baf98d0b19fe9d7 Mon Sep 17 00:00:00 2001
From: yandadaFreedom <lareinayanyu@didiglobal.com>
Date: Fri, 5 Sep 2025 16:51:05 +0800
Subject: [PATCH 117/126] =?UTF-8?q?chore:=20cr=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/webpack-plugin/lib/react/processJSON.js |  2 +-
 .../components/react/mpx-recycle-view.tsx        | 10 +++++-----
 .../runtime/components/wx/mpx-recycle-view.mpx   | 16 +++++++---------
 .../lib/template-compiler/compiler.js            |  9 +--------
 4 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/packages/webpack-plugin/lib/react/processJSON.js b/packages/webpack-plugin/lib/react/processJSON.js
index 0b6287373a..bc4f83e704 100644
--- a/packages/webpack-plugin/lib/react/processJSON.js
+++ b/packages/webpack-plugin/lib/react/processJSON.js
@@ -111,7 +111,7 @@ module.exports = function (jsonContent, {
         const extendComponents = {}
         useExtendComponents[mode].forEach((name) => {
           if (EXTEND_COMPONENTS_LIST[mode]?.includes(name)) {
-            extendComponents[name] = require.resolve(`../runtime/components/react/dist/mpx-${name}.jsx`)
+            extendComponents[name] = normalize.lib(`runtime/components/react/dist/mpx-${name}.jsx`)
           } else {
             emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
           }
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index 0666112a0d..6da92de4cb 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -33,6 +33,7 @@ interface RecycleViewProps {
   sectionHeaderHeight?: ItemHeightType;
   listHeaderData?: any;
   listHeaderHeight?: ItemHeightType;
+  useListHeader?: boolean;
   'genericrecycle-item'?: string;
   'genericsection-header'?: string;
   'genericlist-header'?: string;
@@ -74,10 +75,8 @@ const getGeneric = (generichash: string, generickey: string) => {
 
 const getListHeaderComponent = (generichash: string, generickey: string, data: any) => {
   if (!generichash || !generickey) return undefined
-  return () => {
-    const ListHeaderComponent = getGeneric(generichash, generickey)
-    return ListHeaderComponent ? createElement(ListHeaderComponent, { listHeaderData: data }) : null
-  }
+  const ListHeaderComponent = getGeneric(generichash, generickey)
+  return ListHeaderComponent ? createElement(ListHeaderComponent, { listHeaderData: data }) : null
 }
 
 const getSectionHeaderRenderer = (generichash: string, generickey: string) => {
@@ -111,6 +110,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
     sectionHeaderHeight = {},
     listHeaderHeight = {},
     listHeaderData = null,
+    useListHeader = true,
     'genericrecycle-item': genericrecycleItem,
     'genericsection-header': genericsectionHeader,
     'genericlist-header': genericListHeader,
@@ -407,7 +407,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
           sections: convertedListData,
           renderItem: getItemRenderer(generichash, genericrecycleItem),
           getItemLayout: getItemLayout,
-          ListHeaderComponent: getListHeaderComponent(generichash, genericListHeader, listHeaderData),
+          ListHeaderComponent: useListHeader ? getListHeaderComponent(generichash, genericListHeader, listHeaderData) : null,
           renderSectionHeader: getSectionHeaderRenderer(generichash, genericsectionHeader),
           refreshControl: refresherEnabled
             ? React.createElement(RefreshControl, {
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index 1de3bb8623..6a6ad5ccb6 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -16,21 +16,20 @@
     scroll-into-view="{{scrollIntoViewId}}"
     scroll-into-view-alignment="{{viewPosition}}"
   >
-    <block wx:if="{{mpxGenericListHeader}}">
+    <block wx:if="{{useListHeader}}">
       <list-header listHeaderData="{{listHeaderData}}"></list-header>
     </block>
     <block wx:for="{{convertedListData}}" wx:key="index">
       <block wx:if="{{enableSticky}}">
         <sticky-section>
           <!-- section header -->
-          <block wx:if="{{item.hasSectionHeader && mpxGenericSectionHeader}}">
+          <block wx:if="{{item.hasSectionHeader}}">
             <sticky-header>
               <section-header itemData="{{item.headerData}}" id="{{item._domId}}"></section-header>
             </sticky-header>
           </block>
 
           <block
-            wx:if="{{mpxGenericRecycleItem}}"
             wx:for="{{item.data}}"
             wx:for-item="subItem"
             wx:key="subIndex"
@@ -43,14 +42,12 @@
       <block wx:else>
         <block wx:if="{{item.itemData && item.itemData.isSectionHeader}}">
           <section-header
-            wx:if="{{mpxGenericSectionHeader}}"
             id="{{item._domId}}"
             itemData="{{item.itemData}}"
           ></section-header>
         </block>
         <block wx:else>
           <recycle-item
-            wx:if="{{mpxGenericRecycleItem}}"
             itemData="{{item.itemData}}"
             id="{{item._domId}}"
           ></recycle-item>
@@ -61,7 +58,7 @@
 </template>
 
 <script>
-  import mpx, { createComponent } from '@mpxjs/core'
+  import { createComponent } from '@mpxjs/core'
 
   createComponent({
     properties: {
@@ -109,9 +106,10 @@
         type: Boolean,
         value: false
       },
-      mpxGenericRecycleItem: String,
-      mpxGenericSectionHeader: String,
-      mpxGenericListHeader: String
+      useListHeader: {
+        type: Boolean,
+        value: true
+      }
     },
     data: {
       convertedListData: [],
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index 15bcb56bfa..5601005f94 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -726,20 +726,13 @@ function parse (template, options) {
 
       tagNames.add(element.tag)
 
-      const genericAttrs = []
       // 统计通过抽象节点方式使用的组件
       element.attrsList.forEach((attr) => {
         if (genericRE.test(attr.name)) {
           tagNames.add(attr.value)
-          if (mode === 'wx') {
-            genericAttrs.push({
-              name: attr.name.replace('generic:', 'mpx-generic-'),
-              value: attr.value
-            })
-          }
         }
       })
-      element.attrsList = element.attrsList.concat(genericAttrs)
+
       if (!unary) {
         currentParent = element
         stack.push(element)

From 2adde6e9aedd8acdc4154aa4d732af4333d705cd Mon Sep 17 00:00:00 2001
From: yandadaFreedom <lareinayanyu@didiglobal.com>
Date: Tue, 16 Sep 2025 15:58:34 +0800
Subject: [PATCH 118/126] =?UTF-8?q?refactor:=20flatlist=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E4=B8=BAsectionlist?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/react/mpx-recycle-view.tsx     | 265 ++++++--------
 .../components/wx/mpx-list-header-default.mpx |  21 ++
 .../wx/mpx-recycle-item-default.mpx           |  21 ++
 .../components/wx/mpx-recycle-view.mpx        | 337 ++++++++----------
 .../wx/mpx-section-header-default.mpx         |  21 ++
 5 files changed, 321 insertions(+), 344 deletions(-)
 create mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
 create mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
 create mode 100644 packages/webpack-plugin/lib/runtime/components/wx/mpx-section-header-default.mpx

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index 6da92de4cb..7c4769092c 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -63,7 +63,7 @@ interface ScrollPositionParams {
 
 const getGeneric = (generichash: string, generickey: string) => {
   if (!generichash || !generickey) return null
-  const GenericComponent = global.__mpxGenericsMap[generichash](generickey)
+  const GenericComponent = global.__mpxGenericsMap[generichash][generickey]()
   if (!GenericComponent) return null
 
   return forwardRef((props: any, ref: any) => {
@@ -181,20 +181,16 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
 
   const scrollToIndex = ({ index, animated, viewOffset = 0, viewPosition = 0 }: ScrollPositionParams) => {
     if (scrollViewRef.current) {
-      if (enableSticky) {
-        // 通过索引映射表快速定位位置
-        const position = indexMap.current[index]
-        const [sectionIndex, itemIndex] = (position as string).split('_')
-        scrollViewRef.current.scrollToLocation?.({
-          itemIndex: itemIndex === 'header' ? 0 : Number(itemIndex) + 1,
-          sectionIndex: Number(sectionIndex) || 0,
-          animated,
-          viewOffset,
-          viewPosition
-        })
-      } else {
-        scrollViewRef.current.scrollToIndex?.({ index, animated, viewOffset, viewPosition })
-      }
+      // 通过索引映射表快速定位位置
+      const position = indexMap.current[index]
+      const [sectionIndex, itemIndex] = (position as string).split('_')
+      scrollViewRef.current.scrollToLocation?.({
+        itemIndex: itemIndex === 'header' ? 0 : Number(itemIndex) + 1,
+        sectionIndex: Number(sectionIndex) || 0,
+        animated,
+        viewOffset,
+        viewPosition
+      })
     }
   }
 
@@ -203,15 +199,10 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
       return 0
     }
     if ((itemHeight as ItemHeightType).getter) {
-      if (enableSticky) {
-        const item = convertedListData[sectionIndex].data[rowIndex]
-        // 使用getOriginalIndex获取原始索引
-        const originalIndex = getOriginalIndex(sectionIndex, rowIndex)
-        return (itemHeight as ItemHeightType).getter?.(item, originalIndex) || 0
-      } else {
-        const item = convertedListData[rowIndex]
-        return (itemHeight as ItemHeightType).getter?.(item, rowIndex) || 0
-      }
+      const item = convertedListData[sectionIndex].data[rowIndex]
+      // 使用getOriginalIndex获取原始索引
+      const originalIndex = getOriginalIndex(sectionIndex, rowIndex)
+      return (itemHeight as ItemHeightType).getter?.(item, originalIndex) || 0
     } else {
       return (itemHeight as ItemHeightType).value || 0
     }
@@ -231,128 +222,112 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
   }
 
   const convertedListData = useMemo(() => {
-    if (enableSticky) {
-      const sections: Section[] = []
-      let currentSection: Section | null = null
-      // 清空之前的索引映射
-      indexMap.current = {}
-      // 清空反向索引映射
-      reverseIndexMap.current = {}
-      listData.forEach((item: ListItem, index: number) => {
-        if (item.isSectionHeader) {
+    const sections: Section[] = []
+    let currentSection: Section | null = null
+    // 清空之前的索引映射
+    indexMap.current = {}
+    // 清空反向索引映射
+    reverseIndexMap.current = {}
+    listData.forEach((item: ListItem, index: number) => {
+      if (item.isSectionHeader) {
         // 如果已经存在一个 section，先把它添加到 sections 中
-          if (currentSection) {
-            sections.push(currentSection)
-          }
-          // 创建新的 section
+        if (currentSection) {
+          sections.push(currentSection)
+        }
+        // 创建新的 section
+        currentSection = {
+          headerData: item,
+          data: [],
+          hasSectionHeader: true,
+          _originalItemIndex: index
+        }
+        // 为 section header 添加索引映射
+        const sectionIndex = sections.length
+        indexMap.current[index] = `${sectionIndex}_header`
+        // 添加反向索引映射
+        reverseIndexMap.current[`${sectionIndex}_header`] = index
+      } else {
+        // 如果没有当前 section，创建一个默认的
+        if (!currentSection) {
+          // 创建默认section (无header的section)
           currentSection = {
-            headerData: item,
+            headerData: null,
             data: [],
-            hasSectionHeader: true,
-            _originalItemIndex: index
+            hasSectionHeader: false,
+            _originalItemIndex: -1
           }
-          // 为 section header 添加索引映射
-          const sectionIndex = sections.length
-          indexMap.current[index] = `${sectionIndex}_header`
-          // 添加反向索引映射
-          reverseIndexMap.current[`${sectionIndex}_header`] = index
+        }
+        // 将 item 添加到当前 section 的 data 中
+        const itemIndex = currentSection.data.length
+        currentSection.data.push(extendObject({}, item, {
+          _originalItemIndex: index
+        }))
+        let sectionIndex
+        // 为 item 添加索引映射 - 存储格式为: "sectionIndex_itemIndex"
+        if (!currentSection.hasSectionHeader && sections.length === 0) {
+          // 在默认section中(第一个且无header)
+          sectionIndex = 0
+          indexMap.current[index] = `${sectionIndex}_${itemIndex}`
         } else {
-        // 如果没有当前 section，创建一个默认的
-          if (!currentSection) {
-            // 创建默认section (无header的section)
-            currentSection = {
-              headerData: null,
-              data: [],
-              hasSectionHeader: false,
-              _originalItemIndex: -1
-            }
-          }
-          // 将 item 添加到当前 section 的 data 中
-          const itemIndex = currentSection.data.length
-          currentSection.data.push(extendObject({}, item, {
-            _originalItemIndex: index
-          }))
-          let sectionIndex
-          // 为 item 添加索引映射 - 存储格式为: "sectionIndex_itemIndex"
-          if (!currentSection.hasSectionHeader && sections.length === 0) {
-            // 在默认section中(第一个且无header)
-            sectionIndex = 0
-            indexMap.current[index] = `${sectionIndex}_${itemIndex}`
-          } else {
-            // 在普通section中
-            sectionIndex = sections.length
-            indexMap.current[index] = `${sectionIndex}_${itemIndex}`
-          }
-          // 添加反向索引映射
-          reverseIndexMap.current[`${sectionIndex}_${itemIndex}`] = index
+          // 在普通section中
+          sectionIndex = sections.length
+          indexMap.current[index] = `${sectionIndex}_${itemIndex}`
         }
-      })
-      // 添加最后一个 section
-      if (currentSection) {
-        sections.push(currentSection)
+        // 添加反向索引映射
+        reverseIndexMap.current[`${sectionIndex}_${itemIndex}`] = index
       }
-      return sections
-    } else {
-      return listData
+    })
+    // 添加最后一个 section
+    if (currentSection) {
+      sections.push(currentSection)
     }
+    return sections
   }, [listData])
 
   const { getItemLayout } = useMemo(() => {
     const layouts: Array<{ length: number, offset: number, index: number }> = []
     let offset = 0
 
-    if (generichash && genericListHeader) {
+    if (useListHeader) {
       // 计算列表头部的高度
       offset += listHeaderHeight.getter?.() || listHeaderHeight.value || 0
     }
 
-    if (enableSticky) {
-      // 遍历所有 sections
-      convertedListData.forEach((section: Section, sectionIndex: number) => {
+    // 遍历所有 sections
+    convertedListData.forEach((section: Section, sectionIndex: number) => {
       // 添加 section header 的位置信息
-        const headerHeight = getSectionHeaderHeight({ sectionIndex })
-        layouts.push({
-          length: headerHeight,
-          offset,
-          index: layouts.length
-        })
-        offset += headerHeight
-
-        // 添加该 section 中所有 items 的位置信息
-        section.data.forEach((item: ListItem, itemIndex: number) => {
-          const contenteight = getItemHeight({ sectionIndex, rowIndex: itemIndex })
-          layouts.push({
-            length: contenteight,
-            offset,
-            index: layouts.length
-          })
-          offset += contenteight
-        })
+      const headerHeight = getSectionHeaderHeight({ sectionIndex })
+      layouts.push({
+        length: headerHeight,
+        offset,
+        index: layouts.length
+      })
+      offset += headerHeight
 
-        // 添加该 section 尾部位置信息
-        // 因为即使 sectionList 没传 renderSectionFooter，getItemLayout 中的 index 的计算也会包含尾部节点
+      // 添加该 section 中所有 items 的位置信息
+      section.data.forEach((item: ListItem, itemIndex: number) => {
+        const contenteight = getItemHeight({ sectionIndex, rowIndex: itemIndex })
         layouts.push({
-          length: 0,
+          length: contenteight,
           offset,
           index: layouts.length
         })
+        offset += contenteight
       })
-    } else {
-      convertedListData.forEach((item: ListItem, index: number) => {
-        const itemHeightValue = getItemHeight({ sectionIndex: 0, rowIndex: index })
-        layouts.push({
-          length: itemHeightValue,
-          offset,
-          index: layouts.length
-        })
-        offset += itemHeightValue
+
+      // 添加该 section 尾部位置信息
+      // 因为即使 sectionList 没传 renderSectionFooter，getItemLayout 中的 index 的计算也会包含尾部节点
+      layouts.push({
+        length: 0,
+        offset,
+        index: layouts.length
       })
-    }
+    })
     return {
       itemLayouts: layouts,
       getItemLayout: (data: any, index: number) => layouts[index]
     }
-  }, [convertedListData])
+  }, [convertedListData, useListHeader])
 
   const scrollAdditionalProps = extendObject(
     {
@@ -398,46 +373,26 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
     'bindrefresherrefresh'
   ], { layoutRef })
 
-  return enableSticky
-    ? createElement(
-      SectionList,
-      extendObject(
-        {
-          style: [{ height, width }, style, layoutStyle],
-          sections: convertedListData,
-          renderItem: getItemRenderer(generichash, genericrecycleItem),
-          getItemLayout: getItemLayout,
-          ListHeaderComponent: useListHeader ? getListHeaderComponent(generichash, genericListHeader, listHeaderData) : null,
-          renderSectionHeader: getSectionHeaderRenderer(generichash, genericsectionHeader),
-          refreshControl: refresherEnabled
-            ? React.createElement(RefreshControl, {
-              onRefresh: onRefresh,
-              refreshing: refreshing
-            })
-            : undefined
-        },
-        innerProps
-      )
-    )
-    : createElement(
-      FlatList,
-      extendObject(
-        {
-          style: [{ height, width }, style, layoutStyle],
-          data: convertedListData,
-          renderItem: getItemRenderer(generichash, genericrecycleItem),
-          getItemLayout: getItemLayout,
-          ListHeaderComponent: getListHeaderComponent(generichash, genericListHeader, listHeaderData),
-          refreshControl: refresherEnabled
-            ? React.createElement(RefreshControl, {
-              onRefresh: onRefresh,
-              refreshing: refreshing
-            })
-            : undefined
-        },
-        innerProps
-      )
+  return createElement(
+    SectionList,
+    extendObject(
+      {
+        style: [{ height, width }, style, layoutStyle],
+        sections: convertedListData,
+        renderItem: getItemRenderer(generichash, genericrecycleItem),
+        getItemLayout: getItemLayout,
+        ListHeaderComponent: useListHeader ? getListHeaderComponent(generichash, genericListHeader, listHeaderData) : null,
+        renderSectionHeader: getSectionHeaderRenderer(generichash, genericsectionHeader),
+        refreshControl: refresherEnabled
+          ? React.createElement(RefreshControl, {
+            onRefresh: onRefresh,
+            refreshing: refreshing
+          })
+          : undefined
+      },
+      innerProps
     )
+  )
 })
 
 export default RecycleView
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
new file mode 100644
index 0000000000..5cf26e0eb4
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
@@ -0,0 +1,21 @@
+<template>
+  <view class="list-item">
+    <view class="item-content">recycle-item-default</view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+.list-item
+  margin 4px 16px
+  padding 16px
+  background #fff
+  border-radius 8px
+  box-shadow 0 2px 4px rgba(0,0,0,0.1)
+
+.item-content
+  display flex
+  flex-direction column
+  font-size 14px
+  color #666
+
+</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
new file mode 100644
index 0000000000..5cf26e0eb4
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
@@ -0,0 +1,21 @@
+<template>
+  <view class="list-item">
+    <view class="item-content">recycle-item-default</view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+.list-item
+  margin 4px 16px
+  padding 16px
+  background #fff
+  border-radius 8px
+  box-shadow 0 2px 4px rgba(0,0,0,0.1)
+
+.item-content
+  display flex
+  flex-direction column
+  font-size 14px
+  color #666
+
+</style>
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index 6a6ad5ccb6..4911b6759f 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -1,219 +1,178 @@
 <template>
-  <scroll-view
-    wx:ref="recycleViewRef"
-    class="mpx-recycle-view"
-    scroll-y
-    wx:style="{{scrollViewStyle}}"
-    type="custom"
-    enhanced="{{enhanced}}"
-    scroll-with-animation="{{scrollWithAnimation}}"
-    bounces="{{bounces}}"
-    show-scrollbar="{{showScrollbar}}"
-    refresher-enabled="{{refresherEnabled}}"
-    refresher-triggered="{{refresherTriggered}}"
-    bindscroll="onScroll"
-    bindrefresherrefresh="onRefresh"
-    scroll-into-view="{{scrollIntoViewId}}"
-    scroll-into-view-alignment="{{viewPosition}}"
-  >
-    <block wx:if="{{useListHeader}}">
-      <list-header listHeaderData="{{listHeaderData}}"></list-header>
+  <scroll-view wx:ref="recycleViewRef" class="mpx-recycle-view" scroll-y wx:style="{{ scrollViewStyle }}" type="custom"
+    enhanced="{{ enhanced }}" scroll-with-animation="{{ scrollWithAnimation }}" bounces="{{ bounces }}"
+    show-scrollbar="{{ showScrollbar }}" refresher-enabled="{{ refresherEnabled }}"
+    refresher-triggered="{{ refresherTriggered }}" bindscroll="onScroll" bindrefresherrefresh="onRefresh"
+    scroll-into-view="{{ scrollIntoViewId }}" scroll-into-view-alignment="{{ viewPosition }}">
+    <block wx:if="{{ useListHeader }}">
+      <list-header listHeaderData="{{ listHeaderData }}"></list-header>
     </block>
-    <block wx:for="{{convertedListData}}" wx:key="index">
-      <block wx:if="{{enableSticky}}">
-        <sticky-section>
-          <!-- section header -->
-          <block wx:if="{{item.hasSectionHeader}}">
+    <block wx:for="{{ convertedListData }}" wx:key="index">
+      <sticky-section>
+        <!-- section header -->
+        <block wx:if="{{ item.hasSectionHeader }}">
+          <block wx:if="{{ enableSticky }}">
             <sticky-header>
-              <section-header itemData="{{item.headerData}}" id="{{item._domId}}"></section-header>
+              <section-header itemData="{{ item.headerData }}" id="{{ item._domId }}"></section-header>
             </sticky-header>
           </block>
-
-          <block
-            wx:for="{{item.data}}"
-            wx:for-item="subItem"
-            wx:key="subIndex"
-          >
-            <!-- section items -->
-            <recycle-item itemData="{{subItem.itemData}}" id="{{subItem._domId}}"></recycle-item>
+          <block wx:else>
+            <section-header itemData="{{ item.headerData }}" id="{{ item._domId }}"></section-header>
           </block>
-        </sticky-section>
-      </block>
-      <block wx:else>
-        <block wx:if="{{item.itemData && item.itemData.isSectionHeader}}">
-          <section-header
-            id="{{item._domId}}"
-            itemData="{{item.itemData}}"
-          ></section-header>
+
         </block>
-        <block wx:else>
-          <recycle-item
-            itemData="{{item.itemData}}"
-            id="{{item._domId}}"
-          ></recycle-item>
+        <block wx:for="{{ item.data }}" wx:for-item="subItem" wx:key="subIndex">
+          <!-- section items -->
+          <recycle-item itemData="{{ subItem.itemData }}" id="{{ subItem._domId }}"></recycle-item>
         </block>
-      </block>
+      </sticky-section>
     </block>
   </scroll-view>
 </template>
 
 <script>
-  import { createComponent } from '@mpxjs/core'
+import { createComponent } from '@mpxjs/core'
 
-  createComponent({
-    properties: {
-      height: {
-        type: Number,
-        value: null
-      },
-      width: {
-        type: Number,
-        value: null
-      },
-      listData: {
-        type: Array,
-        value: []
-      },
-      enableSticky: {
-        type: Boolean,
-        value: false
-      },
-      showScrollbar: {
-        type: Boolean,
-        value: false
-      },
-      enhanced: {
-        type: Boolean,
-        value: false
-      },
-      bounces: {
-        type: Boolean,
-        value: false
-      },
-      refresherEnabled: {
-        type: Boolean,
-        value: false
-      },
-      refresherTriggered: {
-        type: Boolean,
-        value: false
-      },
-      listHeaderData: {
-        type: Object,
-        value: null
-      },
-      scrollWithAnimation: {
-        type: Boolean,
-        value: false
-      },
-      useListHeader: {
-        type: Boolean,
-        value: true
-      }
+createComponent({
+  properties: {
+    height: {
+      type: Number,
+      value: null
     },
-    data: {
-      convertedListData: [],
-      scrollIntoViewId: '',
-      viewPosition: 'start'
+    width: {
+      type: Number,
+      value: null
     },
-    computed: {
-      scrollViewStyle() {
-        return `height: ${this.formatDimension(this.height)};width: ${this.formatDimension(this.width)}`
-      }
+    listData: {
+      type: Array,
+      value: []
     },
-    watch: {
-      listData: {
-        handler(newVal) {
-          if (this.enableSticky) {
-            this.convertedListData = this.convertToSectionListData(newVal)
-          } else {
-            this.convertedListData = this.convertToListData(newVal)
-          }
-        },
-        immediate: true
-      }
+    enableSticky: {
+      type: Boolean,
+      value: false
     },
-    methods: {
-      formatDimension(value) {
-        return typeof value === 'number' ? `${value}px` : value || '100%'
-      },
-      onScroll(e) {
-        this.triggerEvent('scroll', e)
-      },
-      onRefresh(e) {
-        this.triggerEvent('refresh', e)
+    showScrollbar: {
+      type: Boolean,
+      value: false
+    },
+    enhanced: {
+      type: Boolean,
+      value: false
+    },
+    bounces: {
+      type: Boolean,
+      value: false
+    },
+    refresherEnabled: {
+      type: Boolean,
+      value: false
+    },
+    refresherTriggered: {
+      type: Boolean,
+      value: false
+    },
+    listHeaderData: {
+      type: Object,
+      value: null
+    },
+    scrollWithAnimation: {
+      type: Boolean,
+      value: false
+    },
+    useListHeader: {
+      type: Boolean,
+      value: true
+    }
+  },
+  data: {
+    convertedListData: [],
+    scrollIntoViewId: '',
+    viewPosition: 'start'
+  },
+  computed: {
+    scrollViewStyle() {
+      return `height: ${this.formatDimension(this.height)};width: ${this.formatDimension(this.width)}`
+    }
+  },
+  watch: {
+    listData: {
+      handler(newVal) {
+        this.convertedListData = this.convertToSectionListData(newVal)
       },
-      scrollToIndex({ index, animated, viewPosition = 0 }) {
-        if (index >= 0) {
-          this.scrollIntoViewId = `mpx-recycle-item-${index}`
-          switch (viewPosition) {
-            case 0:
-              this.viewPosition = 'start'
-              break
-            case 0.5:
-              this.viewPosition = 'center'
-              break
-            case 1:
-              this.viewPosition = 'end'
-              break
-            default:
-              this.viewPosition = 'start'
-          }
+      immediate: true
+    }
+  },
+  methods: {
+    formatDimension(value) {
+      return typeof value === 'number' ? `${value}px` : value || '100%'
+    },
+    onScroll(e) {
+      this.triggerEvent('scroll', e)
+    },
+    onRefresh(e) {
+      this.triggerEvent('refresh', e)
+    },
+    scrollToIndex({ index, animated, viewPosition = 0 }) {
+      if (index >= 0) {
+        this.scrollIntoViewId = `mpx-recycle-item-${index}`
+        switch (viewPosition) {
+          case 0:
+            this.viewPosition = 'start'
+            break
+          case 0.5:
+            this.viewPosition = 'center'
+            break
+          case 1:
+            this.viewPosition = 'end'
+            break
+          default:
+            this.viewPosition = 'start'
         }
-      },
-      convertToSectionListData(data) {
-        const sections = []
-        let currentSection = null
+      }
+    },
+    convertToSectionListData(data) {
+      const sections = []
+      let currentSection = null
 
-        data.forEach((item, index) => {
-          if (item.isSectionHeader) {
-            // 如果已经存在一个 section，先把它添加到 sections 中
-            if (currentSection) {
-              sections.push(currentSection)
-            }
-            // 创建新的 section
+      data.forEach((item, index) => {
+        if (item.isSectionHeader) {
+          // 如果已经存在一个 section，先把它添加到 sections 中
+          if (currentSection) {
+            sections.push(currentSection)
+          }
+          // 创建新的 section
+          currentSection = {
+            headerData: item,
+            data: [],
+            hasSectionHeader: true,
+            _domId: `mpx-recycle-item-${index}`
+          }
+        } else {
+          // 如果没有当前 section，创建一个默认的
+          if (!currentSection) {
+            // 创建默认section (无header的section)
             currentSection = {
-              headerData: item,
+              headerData: null,
               data: [],
-              hasSectionHeader: true,
-              _domId: `mpx-recycle-item-${index}`
+              hasSectionHeader: false
             }
-          } else {
-            // 如果没有当前 section，创建一个默认的
-            if (!currentSection) {
-              // 创建默认section (无header的section)
-              currentSection = {
-                headerData: null,
-                data: [],
-                hasSectionHeader: false
-              }
-            }
-            currentSection.data.push({
-              itemData: item,
-              _domId: `mpx-recycle-item-${index}`
-            })
           }
-        })
-
-        // 添加最后一个 section
-        if (currentSection) {
-          sections.push(currentSection)
-        }
-
-        return sections
-      },
-      convertToListData(data) {
-        const listData = []
-        data.forEach((item, index) => {
-          listData.push({
+          currentSection.data.push({
             itemData: item,
             _domId: `mpx-recycle-item-${index}`
           })
-        })
-        return listData
+        }
+      })
+
+      // 添加最后一个 section
+      if (currentSection) {
+        sections.push(currentSection)
       }
+
+      return sections
     }
-  })
+  }
+})
 </script>
 
 <script type="application/json">
@@ -221,13 +180,13 @@
     "component": true,
     "componentGenerics": {
       "recycle-item": {
-        "default": ""
+        "default": "./mpx-recycle-item-default"
       },
       "section-header": {
-        "default": ""
+        "default": "./mpx-section-header-default"
       },
       "list-header": {
-        "default": ""
+        "default": "./mpx-list-header-default"
       }
     }
   }
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-header-default.mpx
new file mode 100644
index 0000000000..4e75873723
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-header-default.mpx
@@ -0,0 +1,21 @@
+<template>
+  <view class="list-item">
+    <view class="item-content">section-header-default</view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+.list-item
+  margin 4px 16px
+  padding 16px
+  background #fff
+  border-radius 8px
+  box-shadow 0 2px 4px rgba(0,0,0,0.1)
+
+.item-content
+  display flex
+  flex-direction column
+  font-size 14px
+  color #666
+
+</style>

From 5c8cfd7b7f878f9e381795cf6ce5c6c32435e301 Mon Sep 17 00:00:00 2001
From: yandadaFreedom <lareinayanyu@didiglobal.com>
Date: Tue, 16 Sep 2025 20:29:49 +0800
Subject: [PATCH 119/126] =?UTF-8?q?feat:=20=E6=8B=93=E5=B1=95=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B3=A8=E5=86=8C=E8=80=83=E8=99=91=E5=8D=95=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=BE=93=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../webpack-plugin/lib/json-compiler/index.js | 22 +++++-----
 .../webpack-plugin/lib/react/processJSON.js   | 26 ++++++-----
 .../components/react/mpx-recycle-view.tsx     |  2 +-
 .../lib/template-compiler/compiler.js         |  4 +-
 packages/webpack-plugin/lib/utils/const.js    | 18 +++++---
 .../lib/utils/process-extend-components.js    | 43 +++++++++++++++++++
 6 files changed, 85 insertions(+), 30 deletions(-)
 create mode 100644 packages/webpack-plugin/lib/utils/process-extend-components.js

diff --git a/packages/webpack-plugin/lib/json-compiler/index.js b/packages/webpack-plugin/lib/json-compiler/index.js
index 36baf00ac4..6d989953b3 100644
--- a/packages/webpack-plugin/lib/json-compiler/index.js
+++ b/packages/webpack-plugin/lib/json-compiler/index.js
@@ -12,7 +12,8 @@ const createHelpers = require('../helpers')
 const createJSONHelper = require('./helper')
 const RecordIndependentDependency = require('../dependencies/RecordIndependentDependency')
 const RecordRuntimeInfoDependency = require('../dependencies/RecordRuntimeInfoDependency')
-const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR, JSON_JS_EXT, EXTEND_COMPONENTS_LIST } = require('../utils/const')
+const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR, JSON_JS_EXT } = require('../utils/const')
+const { processExtendComponents } = require('../utils/process-extend-components')
 const resolve = require('../utils/resolve')
 const resolveTabBarPath = require('../utils/resolve-tab-bar-path')
 const normalize = require('../utils/normalize')
@@ -101,13 +102,17 @@ module.exports = function (content) {
   const { getRequestString } = createHelpers(this)
 
   let currentName
-
+  let hasApp = true
   if (isApp) {
     currentName = appInfo.name
   } else {
     currentName = componentsMap[resourcePath] || pagesMap[resourcePath]
   }
 
+  if (!appInfo.name) {
+    hasApp = false
+  }
+
   const relativePath = useRelativePath ? publicPath + path.dirname(currentName) : ''
 
   const copydir = (dir, context, callback) => {
@@ -188,14 +193,11 @@ module.exports = function (content) {
 
   if (mode === 'wx' || mode === 'ali') {
     const { useExtendComponents = {} } = mpx
-    if (isApp && useExtendComponents[mode]) {
-      const extendComponents = {}
-      useExtendComponents[mode].forEach((name) => {
-        if (EXTEND_COMPONENTS_LIST[mode]?.includes(name)) {
-          extendComponents[name] = normalize.lib(`runtime/components/${mode}/mpx-${name}.mpx`)
-        } else {
-          emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
-        }
+    if ((isApp || !hasApp) && useExtendComponents[mode]) {
+      const extendComponents = processExtendComponents({
+        useExtendComponents,
+        mode,
+        emitWarning
       })
       json.usingComponents = Object.assign({}, extendComponents, json.usingComponents)
     }
diff --git a/packages/webpack-plugin/lib/react/processJSON.js b/packages/webpack-plugin/lib/react/processJSON.js
index bc4f83e704..e1c24a4ad0 100644
--- a/packages/webpack-plugin/lib/react/processJSON.js
+++ b/packages/webpack-plugin/lib/react/processJSON.js
@@ -11,7 +11,8 @@ const resolve = require('../utils/resolve')
 const { transSubpackage } = require('../utils/trans-async-sub-rules')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
-const { RESOLVE_IGNORED_ERR, EXTEND_COMPONENTS_LIST } = require('../utils/const')
+const { RESOLVE_IGNORED_ERR } = require('../utils/const')
+const { processExtendComponents } = require('../utils/process-extend-components')
 const normalize = require('../utils/normalize')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 const RecordPageConfigsMapDependency = require('../dependencies/RecordPageConfigsMapDependency')
@@ -36,11 +37,18 @@ module.exports = function (jsonContent, {
     srcMode,
     env,
     projectRoot,
-    useExtendComponents = {}
+    useExtendComponents = {},
+    appInfo
   } = mpx
 
   const context = loaderContext.context
 
+  let hasApp = true
+
+  if (!appInfo.name) {
+    hasApp = false
+  }
+
   const emitWarning = (msg) => {
     loaderContext.emitWarning(
       new Error('[json processor][' + loaderContext.resource + ']: ' + msg)
@@ -106,15 +114,13 @@ module.exports = function (jsonContent, {
 
     if (ctorType !== 'app') {
       rulesRunnerOptions.mainKey = ctorType
-    } else {
+    }
+    if (!hasApp || ctorType === 'app') {
       if (useExtendComponents[mode]) {
-        const extendComponents = {}
-        useExtendComponents[mode].forEach((name) => {
-          if (EXTEND_COMPONENTS_LIST[mode]?.includes(name)) {
-            extendComponents[name] = normalize.lib(`runtime/components/react/dist/mpx-${name}.jsx`)
-          } else {
-            emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
-          }
+        const extendComponents = processExtendComponents({
+          useExtendComponents,
+          mode,
+          emitWarning
         })
         jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
       }
diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index 7c4769092c..b172a5e720 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -63,7 +63,7 @@ interface ScrollPositionParams {
 
 const getGeneric = (generichash: string, generickey: string) => {
   if (!generichash || !generickey) return null
-  const GenericComponent = global.__mpxGenericsMap[generichash][generickey]()
+  const GenericComponent = global.__mpxGenericsMap?.[generichash]?.[generickey]?.()
   if (!GenericComponent) return null
 
   return forwardRef((props: any, ref: any) => {
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index 5601005f94..a6cfad8277 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -1,7 +1,7 @@
 const JSON5 = require('json5')
 const he = require('he')
 const config = require('../config')
-const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID, PARENT_MODULE_ID, EXTEND_COMPONENTS_LIST } = require('../utils/const')
+const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID, PARENT_MODULE_ID, EXTEND_COMPONENT_CONFIG } = require('../utils/const')
 const normalize = require('../utils/normalize')
 const { normalizeCondition } = require('../utils/match-condition')
 const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
@@ -2307,7 +2307,7 @@ function isComponentNode (el) {
 }
 
 function isExtendComponentNode (el) {
-  return EXTEND_COMPONENTS_LIST[mode]?.includes(el.tag)
+  return EXTEND_COMPONENT_CONFIG[el.tag]?.[mode]
 }
 
 function getComponentInfo (el) {
diff --git a/packages/webpack-plugin/lib/utils/const.js b/packages/webpack-plugin/lib/utils/const.js
index 8a09e18c82..91c8438189 100644
--- a/packages/webpack-plugin/lib/utils/const.js
+++ b/packages/webpack-plugin/lib/utils/const.js
@@ -7,11 +7,15 @@ module.exports = {
   MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
   MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId
   PARENT_MODULE_ID: '__pid',
-  EXTEND_COMPONENTS_LIST: {
-    wx: ['recycle-view'],
-    web: ['recycle-view'],
-    ios: ['recycle-view'],
-    android: ['recycle-view'],
-    harmony: ['recycle-view']
-  } // 扩展组件列表
+  // 扩展组件的平台配置：声明哪些组件在哪些平台有专用实现，哪些使用公共组件
+  EXTEND_COMPONENT_CONFIG: {
+    'recycle-view': {
+      wx: 'runtime/components/wx/mpx-recycle-view.mpx',
+      ali: 'runtime/components/ali/mpx-recycle-view.mpx',
+      web: 'runtime/components/web/mpx-recycle-view.vue',
+      ios: 'runtime/components/react/dist/mpx-recycle-view.jsx',
+      android: 'runtime/components/react/dist/mpx-recycle-view.jsx',
+      harmony: 'runtime/components/react/dist/mpx-recycle-view.jsx'
+    }
+  }
 }
diff --git a/packages/webpack-plugin/lib/utils/process-extend-components.js b/packages/webpack-plugin/lib/utils/process-extend-components.js
new file mode 100644
index 0000000000..fa236402b0
--- /dev/null
+++ b/packages/webpack-plugin/lib/utils/process-extend-components.js
@@ -0,0 +1,43 @@
+const { EXTEND_COMPONENT_CONFIG } = require('./const')
+const normalize = require('./normalize')
+
+/**
+ * 处理扩展组件的公共方法
+ * @param {Object} options 配置选项
+ * @param {Object} options.useExtendComponents 使用的扩展组件配置
+ * @param {string} options.mode 当前模式 (wx, ali, web, rn 等)
+ * @param {Function} options.emitWarning 警告函数
+ * @returns {Object} 扩展组件映射对象
+ */
+function processExtendComponents (options) {
+  const {
+    useExtendComponents = {},
+    mode,
+    emitWarning
+  } = options
+
+  if (!useExtendComponents[mode]) {
+    return {}
+  }
+
+  const extendComponents = {}
+
+  useExtendComponents[mode].forEach((name) => {
+    // 从配置中获取该组件在当前平台的具体路径
+    const componentConfig = EXTEND_COMPONENT_CONFIG[name]
+
+    if (componentConfig && componentConfig[mode]) {
+      extendComponents[name] = normalize.lib(componentConfig[mode])
+    } else if (componentConfig) {
+      emitWarning('extend component ' + name + ' is not configured for ' + mode + ' environment!')
+    } else {
+      emitWarning('extend component ' + name + ' is not supported in any environment!')
+    }
+  })
+
+  return extendComponents
+}
+
+module.exports = {
+  processExtendComponents
+}

From f6d519ed82bcf92a4da67724a376eb4e529c9433 Mon Sep 17 00:00:00 2001
From: yandadaFreedom <lareinayanyu@didiglobal.com>
Date: Wed, 17 Sep 2025 17:27:05 +0800
Subject: [PATCH 120/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/wx/mpx-list-header-default.mpx | 8 ++++----
 .../runtime/components/wx/mpx-recycle-item-default.mpx    | 8 ++++----
 .../runtime/components/wx/mpx-section-header-default.mpx  | 8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
index 5cf26e0eb4..8cbd94aa69 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-list-header-default.mpx
@@ -1,18 +1,18 @@
 <template>
-  <view class="list-item">
-    <view class="item-content">recycle-item-default</view>
+  <view class="mpx-list-header-default">
+    <view class="mpx-default-content">list-header-default</view>
   </view>
 </template>
 
 <style lang="stylus" scoped>
-.list-item
+.mpx-list-header-default
   margin 4px 16px
   padding 16px
   background #fff
   border-radius 8px
   box-shadow 0 2px 4px rgba(0,0,0,0.1)
 
-.item-content
+.mpx-default-content
   display flex
   flex-direction column
   font-size 14px
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
index 5cf26e0eb4..39ed23dc2c 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-item-default.mpx
@@ -1,18 +1,18 @@
 <template>
-  <view class="list-item">
-    <view class="item-content">recycle-item-default</view>
+  <view class="mpx-recycle-item-default">
+    <view class="mpx-default-content">recycle-item-default</view>
   </view>
 </template>
 
 <style lang="stylus" scoped>
-.list-item
+.mpx-recycle-item-default
   margin 4px 16px
   padding 16px
   background #fff
   border-radius 8px
   box-shadow 0 2px 4px rgba(0,0,0,0.1)
 
-.item-content
+.mpx-default-content
   display flex
   flex-direction column
   font-size 14px
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-header-default.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-header-default.mpx
index 4e75873723..27172694ea 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-header-default.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-section-header-default.mpx
@@ -1,18 +1,18 @@
 <template>
-  <view class="list-item">
-    <view class="item-content">section-header-default</view>
+  <view class="mpx-section-header-default">
+    <view class="mpx-default-content">section-header-default</view>
   </view>
 </template>
 
 <style lang="stylus" scoped>
-.list-item
+.mpx-section-header-default
   margin 4px 16px
   padding 16px
   background #fff
   border-radius 8px
   box-shadow 0 2px 4px rgba(0,0,0,0.1)
 
-.item-content
+.mpx-default-content
   display flex
   flex-direction column
   font-size 14px

From 4e83ff625333888c3f856c3592b6983f897f1736 Mon Sep 17 00:00:00 2001
From: yandadaFreedom <lareinayanyu@didiglobal.com>
Date: Thu, 18 Sep 2025 15:26:17 +0800
Subject: [PATCH 121/126] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Eend-reached-t?=
 =?UTF-8?q?hreshold=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/react/mpx-recycle-view.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index b172a5e720..19280821cd 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -44,7 +44,7 @@ interface RecycleViewProps {
   'parent-height'?: number;
   'enable-sticky'?: boolean;
   'enable-back-to-top'?: boolean;
-  'lower-threshold'?: number;
+  'end-reached-threshold'?: number;
   'refresher-enabled'?: boolean;
   'show-scrollbar'?: boolean;
   'refresher-triggered'?: boolean;
@@ -121,7 +121,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
     'parent-height': parentHeight,
     'enable-sticky': enableSticky = false,
     'enable-back-to-top': enableBackToTop = false,
-    'lower-threshold': lowerThreshold = 50,
+    'end-reached-threshold': onEndReachedThreshold = 0.1,
     'refresher-enabled': refresherEnabled,
     'show-scrollbar': showScrollbar = true,
     'refresher-triggered': refresherTriggered
@@ -336,7 +336,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
       scrollEventThrottle: scrollEventThrottle,
       scrollsToTop: enableBackToTop,
       showsHorizontalScrollIndicator: showScrollbar,
-      onEndReachedThreshold: lowerThreshold,
+      onEndReachedThreshold,
       ref: scrollViewRef,
       bounces: false,
       stickySectionHeadersEnabled: enableSticky,

From 9ea4fe45cb9ba044eafa7bbcc4dbdbae6f9d30a1 Mon Sep 17 00:00:00 2001
From: yandadaFreedom <lareinayanyu@didiglobal.com>
Date: Fri, 21 Nov 2025 17:26:23 +0800
Subject: [PATCH 122/126] =?UTF-8?q?fix:=20web=20recycle-view=20=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8E=E5=85=B6=E4=BB=96=E5=B9=B3=E5=8F=B0=E6=8B=89?=
 =?UTF-8?q?=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/web/mpx-recycle-view.vue  | 12 ++++++++----
 packages/webpack-plugin/lib/web/processJSON.js       |  8 +++++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
index 27e8680cac..e781141f21 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
@@ -15,19 +15,19 @@
       :style="scrollViewStyle"
     >
       <div class="content-wrapper">
-        <template v-if="genericlistHeader">
+        <template v-if="useListHeader">
           <list-header :listHeaderData="listHeaderData"></list-header>
         </template>
         <div class="infinite-list-placeholder" ref="infinitePlaceholder"></div>
         <div class="infinite-list" ref="infiniteList">
           <template v-for="item in visibleData">
             <section-header
-              v-if="item.itemData.isSectionHeader && genericsectionHeader"
+              v-if="item.itemData.isSectionHeader"
               :key="'header' + item._index"
               :itemData="item.itemData"
             />
             <recycle-item
-              v-if="!item.itemData.isSectionHeader && genericrecycleItem"
+              v-if="!item.itemData.isSectionHeader"
               :key="'item' + item._index"
               :itemData="item.itemData"
             />
@@ -135,6 +135,10 @@ export default {
       type: Boolean,
       default: false
     },
+    useListHeader: {
+      type: Boolean,
+      default: true
+    },
     generichash: String,
     genericlistHeader: String,
     genericrecycleItem: String,
@@ -234,7 +238,7 @@ export default {
     },
     _listHeaderHeight() {
       let listHeaderHeight = 0;
-      if (this.genericlistHeader) {
+      if (this.useListHeader) {
         listHeaderHeight =
           this.getItemHeight(this.listHeaderData, 0, "listHeaderHeight") || 0;
       }
diff --git a/packages/webpack-plugin/lib/web/processJSON.js b/packages/webpack-plugin/lib/web/processJSON.js
index 37a1e9bf6d..2e5ebaa963 100644
--- a/packages/webpack-plugin/lib/web/processJSON.js
+++ b/packages/webpack-plugin/lib/web/processJSON.js
@@ -10,7 +10,8 @@ const getJSONContent = require('../utils/get-json-content')
 const resolve = require('../utils/resolve')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
-const { RESOLVE_IGNORED_ERR, EXTEND_COMPONENTS_LIST } = require('../utils/const')
+const { RESOLVE_IGNORED_ERR, EXTEND_COMPONENT_CONFIG } = require('../utils/const')
+const normalize = require('../utils/normalize')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 
 module.exports = function (jsonContent, {
@@ -120,8 +121,9 @@ module.exports = function (jsonContent, {
       if (useExtendComponents[mode]) {
         const extendComponents = {}
         useExtendComponents[mode].forEach((name) => {
-          if (EXTEND_COMPONENTS_LIST[mode].includes(name)) {
-            extendComponents[name] = require.resolve(`../runtime/components/web/mpx-${name}.vue`)
+          const componentConfig = EXTEND_COMPONENT_CONFIG[name]
+          if (componentConfig && componentConfig[mode]) {
+            extendComponents[name] = normalize.lib(componentConfig[mode])
           } else {
             emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
           }

From 7e604f0e58914c1b8dded0bfce4b461364bdcb17 Mon Sep 17 00:00:00 2001
From: yandadaFreedom <lareinayanyu@didiglobal.com>
Date: Mon, 24 Nov 2025 10:47:20 +0800
Subject: [PATCH 123/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9web=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C=E6=8B=93=E5=B1=95=E7=BB=84=E4=BB=B6=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../webpack-plugin/lib/web/processJSON.js     | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/webpack-plugin/lib/web/processJSON.js b/packages/webpack-plugin/lib/web/processJSON.js
index 2e5ebaa963..07e4087969 100644
--- a/packages/webpack-plugin/lib/web/processJSON.js
+++ b/packages/webpack-plugin/lib/web/processJSON.js
@@ -10,8 +10,8 @@ const getJSONContent = require('../utils/get-json-content')
 const resolve = require('../utils/resolve')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
-const { RESOLVE_IGNORED_ERR, EXTEND_COMPONENT_CONFIG } = require('../utils/const')
-const normalize = require('../utils/normalize')
+const { RESOLVE_IGNORED_ERR } = require('../utils/const')
+const { processExtendComponents } = require('../utils/process-extend-components')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 
 module.exports = function (jsonContent, {
@@ -32,11 +32,18 @@ module.exports = function (jsonContent, {
     srcMode,
     env,
     projectRoot,
-    useExtendComponents = {}
+    useExtendComponents = {},
+    appInfo
   } = mpx
 
   const context = loaderContext.context
 
+  let hasApp = true
+
+  if (!appInfo.name) {
+    hasApp = false
+  }
+
   const emitWarning = (msg) => {
     loaderContext.emitWarning(
       new Error('[Mpx json warning][' + loaderContext.resource + ']: ' + msg)
@@ -117,21 +124,17 @@ module.exports = function (jsonContent, {
 
     if (ctorType !== 'app') {
       rulesRunnerOptions.mainKey = ctorType
-    } else {
+    }
+    if (!hasApp || ctorType === 'app') {
       if (useExtendComponents[mode]) {
-        const extendComponents = {}
-        useExtendComponents[mode].forEach((name) => {
-          const componentConfig = EXTEND_COMPONENT_CONFIG[name]
-          if (componentConfig && componentConfig[mode]) {
-            extendComponents[name] = normalize.lib(componentConfig[mode])
-          } else {
-            emitWarning(`extend component ${name} is not supported in ${mode} environment!`)
-          }
+        const extendComponents = processExtendComponents({
+          useExtendComponents,
+          mode,
+          emitWarning
         })
         jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
       }
     }
-
     const rulesRunner = getRulesRunner(rulesRunnerOptions)
 
     if (rulesRunner) {

From e331c77cb16268fbd626ed6d4087c225392b9baa Mon Sep 17 00:00:00 2001
From: yandadaFreedom <lareinayanyu@didiglobal.com>
Date: Mon, 1 Dec 2025 10:48:22 +0800
Subject: [PATCH 124/126] =?UTF-8?q?fix:=20=E5=A4=96=E5=B1=82=E5=AE=B9?=
 =?UTF-8?q?=E5=99=A8=E5=AE=9A=E9=AB=98,recycle-view=E6=97=A0=E6=B3=95?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/web/mpx-recycle-view.vue              | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
index e781141f21..2da8a21dde 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-recycle-view.vue
@@ -485,6 +485,7 @@ export default {
 .mpx-recycle-view {
   position: relative;
   overflow: hidden;
+  height: 100%;
 }
 
 .content-wrapper {

From 5d480421adce033dc61557216047ee3789a8b158 Mon Sep 17 00:00:00 2001
From: yandadaFreedom <lareinayanyu@didiglobal.com>
Date: Mon, 1 Dec 2025 11:39:12 +0800
Subject: [PATCH 125/126] fix: lint error

---
 packages/webpack-plugin/lib/utils/const.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/utils/const.js b/packages/webpack-plugin/lib/utils/const.js
index b94140b45b..ebcf81d449 100644
--- a/packages/webpack-plugin/lib/utils/const.js
+++ b/packages/webpack-plugin/lib/utils/const.js
@@ -17,6 +17,6 @@ module.exports = {
       android: 'runtime/components/react/dist/mpx-recycle-view.jsx',
       harmony: 'runtime/components/react/dist/mpx-recycle-view.jsx'
     }
-  }
+  },
   MPX_TAG_PAGE_SELECTOR: 'mpx-page'
 }

From 30bb85d1bc4be8491582892db61da5a6e3e2df1b Mon Sep 17 00:00:00 2001
From: yandadaFreedom <lareinayanyu@didiglobal.com>
Date: Mon, 1 Dec 2025 11:44:00 +0800
Subject: [PATCH 126/126] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9useListHeade?=
 =?UTF-8?q?r=E9=BB=98=E8=AE=A4=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/runtime/components/react/mpx-recycle-view.tsx           | 2 +-
 .../lib/runtime/components/wx/mpx-recycle-view.mpx              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
index 19280821cd..145c51c09e 100644
--- a/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
+++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-recycle-view.tsx
@@ -110,7 +110,7 @@ const RecycleView = forwardRef<any, RecycleViewProps>((props = {}, ref) => {
     sectionHeaderHeight = {},
     listHeaderHeight = {},
     listHeaderData = null,
-    useListHeader = true,
+    useListHeader = false,
     'genericrecycle-item': genericrecycleItem,
     'genericsection-header': genericsectionHeader,
     'genericlist-header': genericListHeader,
diff --git a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
index 4911b6759f..7607e1e8eb 100644
--- a/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
+++ b/packages/webpack-plugin/lib/runtime/components/wx/mpx-recycle-view.mpx
@@ -81,7 +81,7 @@ createComponent({
     },
     useListHeader: {
       type: Boolean,
-      value: true
+      value: false
     }
   },
   data: {